@zenkigen-inc/component-ui 1.6.2 → 1.6.4

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './use-outside-click';

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './checkbox';
 export * from './dropdown';
 export * from './evaluation-star';
 export * from './heading';
+export * from './hooks';
 export * from './icon';
 export * from './icon-button';
 export * from './loading';

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,
@@ -32650,8 +32650,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,57 +32694,56 @@ 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
+        })]
+      })
     })]
   });
 }
 
-export { Avatar, Breadcrumb, Button, Checkbox, Dropdown, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, Radio, Search, Select, SelectSort, Tab, TabItem, Table, TableCell, TableRow, Tag, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, useToast };
+export { Avatar, Breadcrumb, Button, Checkbox, Dropdown, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, Radio, Search, Select, SelectSort, Tab, TabItem, Table, TableCell, TableRow, Tag, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, useOutsideClick, useToast };
 //# sourceMappingURL=index.esm.js.map