@zenkigen-inc/component-ui 1.7.0 → 1.7.1

package/dist/index.js

@@ -32596,6 +32596,56 @@ function Toggle({
   });
 }
 
+const useTooltip = () => {
+  const calculatePosition = useCallback(args => {
+    var _args$maxWidth;
+    const result = {
+      maxWidth: 'none',
+      width: 'auto',
+      left: '0px',
+      top: '0px',
+      bottom: '0px',
+      translateX: '0',
+      translateY: '0'
+    };
+    result.maxWidth = (_args$maxWidth = args.maxWidth) != null ? _args$maxWidth : 'none';
+    const offsetH = args.tooltipSize === 'small' ? 11 : 22;
+    const targetHorizontalCenter = args.dimensions.right - (args.dimensions.right - args.dimensions.left) / 2;
+    const targetLeft = args.dimensions.left;
+    const targetRight = args.dimensions.right;
+    const targetWidth = args.dimensions.width;
+    switch (args.horizontalAlign) {
+      case 'center':
+        result.left = `${targetHorizontalCenter}px`;
+        result.translateX = '-50%';
+        break;
+      case 'left':
+        result.left = `${targetLeft - offsetH}px`;
+        result.translateX = `${targetWidth / 2}px`;
+        break;
+      case 'right':
+        result.left = `${targetRight + offsetH}px`;
+        result.translateX = `-${targetWidth / 2}px`;
+        break;
+    }
+    switch (args.verticalPosition) {
+      case 'bottom':
+        result.top = `${args.dimensions.top + args.dimensions.height + window.scrollY}px`;
+        result.bottom = 'unset';
+        break;
+      case 'top':
+        result.top = `${args.dimensions.top + window.scrollY}px`;
+        result.bottom = 'unset';
+        result.translateY = '-100%';
+        break;
+    }
+    return result;
+  }, []);
+  return {
+    calculatePosition
+  };
+};
+
 const TailIcon = props => {
   const tailClasses = clsx$1('absolute fill-background-uiBackgroundTooltip', {
     'rotate-180': props.verticalPosition === 'bottom',
@@ -32637,6 +32687,54 @@ const TailIcon = props => {
   }
 };
 
+const TooltipContent = ({
+  content,
+  horizontalAlign,
+  verticalPosition,
+  size,
+  tooltipPosition,
+  maxWidth,
+  isPortal
+}) => {
+  const tooltipWrapperClasses = clsx$1('absolute z-tooltip m-auto flex', {
+    'top-0': !isPortal && verticalPosition === 'top',
+    'bottom-0': !isPortal && verticalPosition === 'bottom',
+    'justify-start': horizontalAlign === 'left',
+    'justify-center': horizontalAlign === 'center',
+    'justify-end': horizontalAlign === 'right',
+    'w-[24px]': size === 'small',
+    'w-[46px]': size !== 'small'
+  });
+  const tooltipBodyClasses = clsx$1('absolute z-tooltip inline-block w-max rounded bg-background-uiBackgroundTooltip text-text-textOnColor', {
+    'typography-body3regular': size === 'small',
+    'typography-body2regular': size === 'medium',
+    'px-2 pb-1 pt-1.5': size === 'small',
+    'px-4 py-3': size === 'medium',
+    'bottom-2': verticalPosition !== 'bottom' && size === 'small',
+    'bottom-3': verticalPosition !== 'bottom' && size === 'medium',
+    'top-2': verticalPosition === 'bottom' && size === 'small',
+    'top-3': verticalPosition === 'bottom' && size === 'medium'
+  });
+  const tooltipWrapperStyle = isPortal ? _extends({
+    transform: `translate(${tooltipPosition.translateX}, ${tooltipPosition.translateY})`
+  }, tooltipPosition) : {};
+  return /*#__PURE__*/jsx("div", {
+    className: tooltipWrapperClasses,
+    style: tooltipWrapperStyle,
+    children: /*#__PURE__*/jsxs("div", {
+      className: tooltipBodyClasses,
+      style: {
+        maxWidth
+      },
+      children: [content, /*#__PURE__*/jsx(TailIcon, {
+        size: size,
+        verticalPosition: verticalPosition,
+        horizontalAlign: horizontalAlign
+      })]
+    })
+  });
+};
+
 function Tooltip({
   children,
   content,
@@ -32644,9 +32742,22 @@ function Tooltip({
   maxWidth,
   verticalPosition = 'bottom',
   horizontalAlign = 'center',
-  isDisabledHover = false
+  isDisabledHover = false,
+  portalTargetRef
 }) {
+  const {
+    calculatePosition
+  } = useTooltip();
   const [isVisible, setIsVisible] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({
+    maxWidth: 'none',
+    width: 'auto',
+    left: '0px',
+    top: '0px',
+    bottom: '0px',
+    translateX: '0',
+    translateY: '0'
+  });
   const targetRef = useRef(null);
   const handleMouseOverWrapper = useCallback(() => {
     if (isDisabledHover) {
@@ -32657,44 +32768,40 @@ function Tooltip({
   const handleMouseOutWrapper = useCallback(() => {
     setIsVisible(false);
   }, []);
-  const tooltipWrapClasses = clsx$1('absolute inset-x-0 z-tooltip m-auto flex', {
-    'top-0': verticalPosition !== 'bottom',
-    'bottom-0': verticalPosition === 'bottom',
-    'justify-start': horizontalAlign === 'left',
-    'justify-center': horizontalAlign === 'center',
-    'justify-end': horizontalAlign === 'right',
-    'w-[24px]': size === 'small',
-    'w-[46px]': size !== 'small'
-  });
-  const tooltipBodyClasses = clsx$1('absolute z-tooltip inline-block w-max rounded bg-background-uiBackgroundTooltip text-text-textOnColor', {
-    'typography-body3regular': size === 'small',
-    'typography-body2regular': size === 'medium',
-    'px-2 pb-1 pt-1.5': size === 'small',
-    'px-4 py-3': size === 'medium',
-    'bottom-2': verticalPosition !== 'bottom' && size === 'small',
-    'bottom-3': verticalPosition !== 'bottom' && size === 'medium',
-    'top-2': verticalPosition === 'bottom' && size === 'small',
-    'top-3': verticalPosition === 'bottom' && size === 'medium'
-  });
+  useEffect(() => {
+    var _targetRef$current;
+    if (targetRef.current === null) return;
+    const dimensions = (_targetRef$current = targetRef.current) == null ? void 0 : _targetRef$current.getBoundingClientRect();
+    const position = calculatePosition({
+      dimensions,
+      maxWidth,
+      verticalPosition,
+      horizontalAlign,
+      tooltipSize: size
+    });
+    setTooltipPosition(position);
+  }, [calculatePosition, horizontalAlign, maxWidth, size, verticalPosition]);
   return /*#__PURE__*/jsxs("div", {
     ref: targetRef,
     className: "relative flex items-center justify-center",
     onMouseOver: handleMouseOverWrapper,
     onMouseLeave: handleMouseOutWrapper,
-    children: [children, isVisible && /*#__PURE__*/jsx("div", {
-      className: tooltipWrapClasses,
-      children: /*#__PURE__*/jsxs("div", {
-        className: tooltipBodyClasses,
-        style: {
-          maxWidth
-        },
-        children: [content, /*#__PURE__*/jsx(TailIcon, {
-          size: size,
-          verticalPosition: verticalPosition,
-          horizontalAlign: horizontalAlign
-        })]
-      })
-    })]
+    children: [children, isVisible && ((portalTargetRef == null ? void 0 : portalTargetRef.current) == null ? /*#__PURE__*/jsx(TooltipContent, {
+      content: content,
+      size: size,
+      maxWidth: maxWidth,
+      verticalPosition: verticalPosition,
+      horizontalAlign: horizontalAlign,
+      tooltipPosition: tooltipPosition
+    }) : ( /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/jsx(TooltipContent, {
+      isPortal: true,
+      content: content,
+      size: size,
+      maxWidth: maxWidth,
+      verticalPosition: verticalPosition,
+      horizontalAlign: horizontalAlign,
+      tooltipPosition: tooltipPosition
+    }), (portalTargetRef == null ? void 0 : portalTargetRef.current) != null ? portalTargetRef.current : document.body)))]
   });
 }