@zenkigen-inc/component-ui 1.6.3 → 1.7.0

package/dist/index.esm.js

@@ -49,8 +49,8 @@ function Avatar(_ref) {
     'bg-disabled-disabled01': props.isDisabled,
     'bg-icon-icon01': !props.userId
   }, _clsx[userColors[((_props$userId = props.userId) != null ? _props$userId : 0) % userColors.length]] = props.userId && !props.isDisabled, _clsx));
-  var trimmedFirstName = props.firstName.trim();
-  var trimmedLastName = props.lastName.trim();
+  var trimmedFirstName = props.firstName.replace('　', ' ').trim();
+  var trimmedLastName = props.lastName.replace('　', ' ').trim().trim();
   var nameOnIcon = isAsciiString(trimmedLastName) ? trimmedFirstName.slice(0, 1).toUpperCase() + trimmedLastName.slice(0, 1).toUpperCase() : (trimmedLastName + trimmedFirstName).slice(0, 2);
   return /*#__PURE__*/jsx("span", {
     className: classes,
@@ -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
@@ -32650,8 +32656,8 @@ var TailIcon = function 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", {
@@ -32694,54 +32700,53 @@ function Tooltip(_ref) {
   var _useState = useState(false),
     isVisible = _useState[0],
     setIsVisible = _useState[1];
-  var _useState2 = useState({
-      width: 0,
-      height: 0
-    }),
-    targetDimensions = _useState2[0],
-    setTargetDimensions = _useState2[1];
   var targetRef = useRef(null);
   var handleMouseOverWrapper = useCallback(function () {
-    if (targetRef.current === null || isDisabledHover) {
+    if (isDisabledHover) {
       return;
     }
-    var dimensions = targetRef.current.getBoundingClientRect();
-    var calculatedDimensions = {
-      width: dimensions.right - dimensions.left,
-      height: dimensions.bottom - dimensions.top
-    };
-    setTargetDimensions(calculatedDimensions);
     setIsVisible(true);
   }, [isDisabledHover]);
   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',
-    '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: 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: maxWidth
+        },
+        children: [content, /*#__PURE__*/jsx(TailIcon, {
+          size: size,
+          verticalPosition: verticalPosition,
+          horizontalAlign: horizontalAlign
+        })]
+      })
     })]
   });
 }