feat: add zkill widget

assets/js/hooks/Mapper/components/ui-kit/WdTooltipWrapper/WdTooltipWrapper.tsx

@@ -1,49 +1,57 @@
-import React, { HTMLProps, MouseEventHandler, useCallback, useRef } from 'react';
-
-import classes from './WdTooltipWrapper.module.scss';
-import { WithChildren, WithClassName } from '@/hooks/Mapper/types/common.ts';
-import { TooltipProps, WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit';
+import { forwardRef, HTMLProps, ReactNode } from 'react';
 import clsx from 'clsx';
+import { WdTooltip, WdTooltipHandlers, TooltipProps } from '@/hooks/Mapper/components/ui-kit';
+import classes from './WdTooltipWrapper.module.scss';
+
+type TooltipSize = 'xs' | 'sm' | 'md' | 'lg';
 
 export type WdTooltipWrapperProps = {
-  content?: (() => React.ReactNode) | React.ReactNode;
-} & WithChildren &
-  WithClassName &
-  HTMLProps<HTMLDivElement> &
+  content?: (() => ReactNode) | ReactNode;
+  size?: TooltipSize;
+  interactive?: boolean;
+} & Omit<HTMLProps<HTMLDivElement>, 'content' | 'size'> &
   Omit<TooltipProps, 'content'>;
 
-export const WdTooltipWrapper = ({
-  className,
-  children,
-  content,
-  offset,
-  position,
-  targetSelector,
-  ...props
-}: WdTooltipWrapperProps) => {
-  const tooltipRef = useRef<WdTooltipHandlers>(null);
-  const handleShowDeleteTooltip: MouseEventHandler = useCallback(e => tooltipRef.current?.show(e), []);
-  const handleHideDeleteTooltip: MouseEventHandler = useCallback(e => tooltipRef.current?.hide(e), []);
+export const WdTooltipWrapper = forwardRef<WdTooltipHandlers, WdTooltipWrapperProps>(
+  (
+    { className, children, content, offset, position, targetSelector, interactive = false, size, ...props },
+    forwardedRef,
+  ) => {
+    const suffix = Math.random().toString(36).slice(2, 7);
+    const autoClass = `wdTooltipAutoTrigger-${suffix}`;
+    const finalTargetSelector = targetSelector || `.${autoClass}`;
 
-  return (
-    <>
-      <div
-        className={clsx(classes.WdTooltipWrapperRoot, className)}
-        {...props}
-        {...(content && {
-          onMouseEnter: handleShowDeleteTooltip,
-          onMouseLeave: handleHideDeleteTooltip,
-        })}
-      >
-        {children}
+    return (
+      <div className={clsx(classes.WdTooltipWrapperRoot, className)} {...props}>
+        {targetSelector ? <>{children}</> : <div className={autoClass}>{children}</div>}
+
+        <WdTooltip
+          ref={forwardedRef}
+          offset={offset}
+          position={position}
+          content={content}
+          interactive={interactive}
+          targetSelector={finalTargetSelector}
+          className={size ? sizeClass(size) : undefined}
+        />
       </div>
-      <WdTooltip
-        ref={tooltipRef}
-        offset={offset}
-        position={position}
-        content={content}
-        targetSelector={targetSelector}
-      />
-    </>
-  );
-};
+    );
+  },
+);
+
+WdTooltipWrapper.displayName = 'WdTooltipWrapper';
+
+function sizeClass(size: TooltipSize) {
+  switch (size) {
+    case 'xs':
+      return classes.wdTooltipSizeXs;
+    case 'sm':
+      return classes.wdTooltipSizeSm;
+    case 'md':
+      return classes.wdTooltipSizeMd;
+    case 'lg':
+      return classes.wdTooltipSizeLg;
+    default:
+      return undefined;
+  }
+}