@zenkigen-inc/component-ui 1.6.3 → 1.7.0

package/dist/index.js

@@ -51,8 +51,8 @@ function Avatar(_ref) {
     'bg-icon-icon01': !props.userId,
     [userColors[((_props$userId = props.userId) != null ? _props$userId : 0) % userColors.length]]: props.userId && !props.isDisabled
   });
-  const trimmedFirstName = props.firstName.trim();
-  const trimmedLastName = props.lastName.trim();
+  const trimmedFirstName = props.firstName.replace('　', ' ').trim();
+  const trimmedLastName = props.lastName.replace('　', ' ').trim().trim();
   const nameOnIcon = isAsciiString(trimmedLastName) ? trimmedFirstName.slice(0, 1).toUpperCase() + trimmedLastName.slice(0, 1).toUpperCase() : (trimmedLastName + trimmedFirstName).slice(0, 2);
   return /*#__PURE__*/jsx("span", {
     className: classes,
@@ -31219,7 +31219,7 @@ function Dropdown({
   label,
   icon,
   size = 'medium',
-  variant = target ? 'text' : 'outline',
+  variant = 'outline',
   title,
   isDisabled = false,
   isArrowHidden = false,
@@ -31280,13 +31280,19 @@ function Dropdown({
     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,
@@ -31543,7 +31549,7 @@ function Modal({
     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
@@ -32602,8 +32608,8 @@ const TailIcon = props => {
     'right-4': props.horizontalAlign === 'right' && props.size !== 'small',
     'left-2': props.horizontalAlign === 'left' && props.size === 'small',
     'left-4': props.horizontalAlign === 'left' && props.size !== 'small',
-    'left-2/4 -translate-x-1': props.horizontalAlign === 'center' && props.size === 'small',
-    'left-2/4 -translate-x-2': props.horizontalAlign === 'center' && props.size !== 'small'
+    'left-1/2 -translate-x-1': props.horizontalAlign === 'center' && props.size === 'small',
+    'left-1/2 -translate-x-2': props.horizontalAlign === 'center' && props.size !== 'small'
   });
   if (props.size === 'small') {
     return /*#__PURE__*/jsx("svg", {
@@ -32641,52 +32647,53 @@ function Tooltip({
   isDisabledHover = false
 }) {
   const [isVisible, setIsVisible] = useState(false);
-  const [targetDimensions, setTargetDimensions] = useState({
-    width: 0,
-    height: 0
-  });
   const targetRef = useRef(null);
   const handleMouseOverWrapper = useCallback(() => {
-    if (targetRef.current === null || isDisabledHover) {
+    if (isDisabledHover) {
       return;
     }
-    const dimensions = targetRef.current.getBoundingClientRect();
-    const calculatedDimensions = {
-      width: dimensions.right - dimensions.left,
-      height: dimensions.bottom - dimensions.top
-    };
-    setTargetDimensions(calculatedDimensions);
     setIsVisible(true);
   }, [isDisabledHover]);
   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',
-    'left-0': horizontalAlign === 'left',
-    'right-0': horizontalAlign === 'right',
-    'left-auto': horizontalAlign === 'center'
+    'bottom-2': verticalPosition !== 'bottom' && size === 'small',
+    'bottom-3': verticalPosition !== 'bottom' && size === 'medium',
+    'top-2': verticalPosition === 'bottom' && size === 'small',
+    'top-3': verticalPosition === 'bottom' && size === 'medium'
   });
   return /*#__PURE__*/jsxs("div", {
     ref: targetRef,
     className: "relative flex items-center justify-center",
     onMouseOver: handleMouseOverWrapper,
     onMouseLeave: handleMouseOutWrapper,
-    children: [children, isVisible && /*#__PURE__*/jsxs("div", {
-      className: tooltipBodyClasses,
-      style: {
-        maxWidth,
-        top: verticalPosition === 'bottom' ? size === 'small' ? `${targetDimensions.height + 8}px` : `${targetDimensions.height + 12}px` : 'unset',
-        bottom: verticalPosition === 'top' ? size === 'small' ? `${targetDimensions.height + 8}px` : `${targetDimensions.height + 12}px` : 'unset'
-      },
-      children: [content, /*#__PURE__*/jsx(TailIcon, {
-        size: size,
-        verticalPosition: verticalPosition,
-        horizontalAlign: horizontalAlign
-      })]
+    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
+        })]
+      })
     })]
   });
 }