@zenkigen-inc/component-ui 1.7.0 → 1.7.1

package/dist/index.esm.js

@@ -32644,6 +32644,56 @@ function Toggle(_ref) {
   });
 }
 
+var useTooltip = function useTooltip() {
+  var calculatePosition = useCallback(function (args) {
+    var _args$maxWidth;
+    var 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';
+    var offsetH = args.tooltipSize === 'small' ? 11 : 22;
+    var targetHorizontalCenter = args.dimensions.right - (args.dimensions.right - args.dimensions.left) / 2;
+    var targetLeft = args.dimensions.left;
+    var targetRight = args.dimensions.right;
+    var 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: calculatePosition
+  };
+};
+
 var TailIcon = function TailIcon(props) {
   var tailClasses = clsx$1('absolute fill-background-uiBackgroundTooltip', {
     'rotate-180': props.verticalPosition === 'bottom',
@@ -32685,6 +32735,53 @@ var TailIcon = function TailIcon(props) {
   }
 };
 
+var TooltipContent = function TooltipContent(_ref) {
+  var content = _ref.content,
+    horizontalAlign = _ref.horizontalAlign,
+    verticalPosition = _ref.verticalPosition,
+    size = _ref.size,
+    tooltipPosition = _ref.tooltipPosition,
+    maxWidth = _ref.maxWidth,
+    isPortal = _ref.isPortal;
+  var 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'
+  });
+  var 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'
+  });
+  var 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: maxWidth
+      },
+      children: [content, /*#__PURE__*/jsx(TailIcon, {
+        size: size,
+        verticalPosition: verticalPosition,
+        horizontalAlign: horizontalAlign
+      })]
+    })
+  });
+};
+
 function Tooltip(_ref) {
   var children = _ref.children,
     content = _ref.content,
@@ -32696,10 +32793,24 @@ function Tooltip(_ref) {
     _ref$horizontalAlign = _ref.horizontalAlign,
     horizontalAlign = _ref$horizontalAlign === void 0 ? 'center' : _ref$horizontalAlign,
     _ref$isDisabledHover = _ref.isDisabledHover,
-    isDisabledHover = _ref$isDisabledHover === void 0 ? false : _ref$isDisabledHover;
+    isDisabledHover = _ref$isDisabledHover === void 0 ? false : _ref$isDisabledHover,
+    portalTargetRef = _ref.portalTargetRef;
+  var _useTooltip = useTooltip(),
+    calculatePosition = _useTooltip.calculatePosition;
   var _useState = useState(false),
     isVisible = _useState[0],
     setIsVisible = _useState[1];
+  var _useState2 = useState({
+      maxWidth: 'none',
+      width: 'auto',
+      left: '0px',
+      top: '0px',
+      bottom: '0px',
+      translateX: '0',
+      translateY: '0'
+    }),
+    tooltipPosition = _useState2[0],
+    setTooltipPosition = _useState2[1];
   var targetRef = useRef(null);
   var handleMouseOverWrapper = useCallback(function () {
     if (isDisabledHover) {
@@ -32710,44 +32821,40 @@ function Tooltip(_ref) {
   var handleMouseOutWrapper = useCallback(function () {
     setIsVisible(false);
   }, []);
-  var 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'
-  });
-  var 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(function () {
+    var _targetRef$current;
+    if (targetRef.current === null) return;
+    var dimensions = (_targetRef$current = targetRef.current) == null ? void 0 : _targetRef$current.getBoundingClientRect();
+    var position = calculatePosition({
+      dimensions: dimensions,
+      maxWidth: maxWidth,
+      verticalPosition: verticalPosition,
+      horizontalAlign: 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: 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)))]
   });
 }