@zenkigen-inc/component-ui 1.6.4 → 1.7.1

package/dist/index.esm.js

@@ -31210,7 +31210,7 @@ function Dropdown(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? target ? 'text' : 'outline' : _ref$variant,
+    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
     title = _ref.title,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
@@ -31278,13 +31278,19 @@ function Dropdown(_ref) {
     children: /*#__PURE__*/jsxs("div", {
       ref: targetRef,
       className: wrapperClasses,
-      children: [target ? /*#__PURE__*/jsx("button", {
+      children: [target ? /*#__PURE__*/jsxs("button", {
         type: "button",
         title: title,
         className: childrenButtonClasses,
         onClick: handleToggle,
         disabled: isDisabled,
-        children: target
+        children: [target, !isArrowHidden && /*#__PURE__*/jsx("div", {
+          className: "ml-2 flex items-center fill-icon-icon01",
+          children: /*#__PURE__*/jsx(Icon, {
+            name: isVisible ? 'angle-small-up' : 'angle-small-down',
+            size: size === 'large' ? 'medium' : 'small'
+          })
+        })]
       }) : /*#__PURE__*/jsxs("button", {
         type: "button",
         title: title,
@@ -31551,7 +31557,7 @@ function Modal(_ref) {
     children: /*#__PURE__*/jsx("div", {
       className: "fixed left-0 top-0 z-overlay flex h-full w-full items-center justify-center bg-background-backgroundOverlayBlack",
       children: /*#__PURE__*/jsx("div", {
-        className: "flex shrink-0 flex-col rounded-lg bg-background-uiBackground01 shadow-modalShadow",
+        className: "grid grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-background-uiBackground01 shadow-modalShadow",
         style: {
           width: renderWidth,
           height: renderHeight
@@ -32638,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',
@@ -32679,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,
@@ -32690,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) {
@@ -32704,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)))]
   });
 }