@zenkigen-inc/component-ui 1.14.4 → 1.14.5

package/README.md

@@ -44,11 +44,6 @@ yarn generate-component
 
 使用する側の import を簡略化させるため root にある [packages/component-ui/src/index.ts](https://github.com/zenkigen/zenkigen-component/blob/main/packages/components/src/index.ts) に実装したコンポーネントを export してください。
 
-### コーディングガイドライン（社内のみ）
-
-開発する際は以下を参照してください。
-https://www.notion.so/zenkigen/5d4ebd0d93b74124a533cf167b852ec0
-
 ## ライセンス
 
 @zenkigen-inc/component-ui は MIT ライセンスに基づいています。

package/dist/hooks/use-outside-click.d.ts

@@ -1,2 +1,2 @@
 import type { RefObject } from 'react';
-export declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void, enabled?: boolean) => void;
+export declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: Event) => void, enabled?: boolean) => void;

package/dist/index.esm.js

@@ -18,7 +18,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -697,7 +697,7 @@ function Modal(_ref) {
   useEffect(function () {
     setIsMounted(true);
   }, []);
-  return isMounted && isOpen ? /*#__PURE__*/createPortal( /*#__PURE__*/jsx(ModalContext.Provider, {
+  return isMounted && isOpen ? /*#__PURE__*/createPortal(/*#__PURE__*/jsx(ModalContext.Provider, {
     value: {
       onClose: onClose
     },
@@ -1602,15 +1602,18 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onClickClearButton = _ref.onClickClearButton,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var isShowClearButton = !!onClickClearButton && props.value.length !== 0 && !disabled;
   var inputWrapClasses = clsx('relative flex items-center gap-2 overflow-hidden rounded border', {
     'border-uiBorder02': !isError && !disabled,
     'border-supportError': isError && !disabled,
     'hover:border-hoverInput': !disabled && !isError,
     'hover:focus-within:border-activeInput': !isError,
     'focus-within:border-activeInput': !isError,
-    'bg-disabled02 border-disabled01': disabled
+    'bg-disabled02 border-disabled01': disabled,
+    'pr-2': size === 'medium' && isShowClearButton,
+    'pr-3': size === 'large' && isShowClearButton
   });
-  var inputClasses = clsx('flex-1 pl-2 pr-3 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', (_clsx = {}, _clsx['typography-label14regular min-h-8'] = size === 'medium', _clsx['typography-label16regular min-h-10'] = size === 'large', _clsx['text-text01'] = !isError, _clsx['text-supportError'] = isError, _clsx));
+  var inputClasses = clsx('flex-1 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', (_clsx = {}, _clsx['typography-label14regular min-h-8 px-2'] = size === 'medium', _clsx['typography-label16regular min-h-10 px-3'] = size === 'large', _clsx['text-text01'] = !isError, _clsx['text-supportError'] = isError, _clsx['pr-0'] = isShowClearButton, _clsx));
   return /*#__PURE__*/jsxs("div", {
     className: inputWrapClasses,
     children: [/*#__PURE__*/jsx("input", _extends({
@@ -1619,15 +1622,11 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className: inputClasses,
       disabled: disabled,
       onChange: props.onChange
-    }, props)), onClickClearButton && props.value.length !== 0 && !disabled && /*#__PURE__*/jsx("div", {
-      className: "absolute right-3",
-      children: /*#__PURE__*/jsx(IconButton, {
-        variant: "text",
-        icon: "close",
-        size: "small",
-        isNoPadding: true,
-        onClick: onClickClearButton
-      })
+    }, props)), isShowClearButton && /*#__PURE__*/jsx(IconButton, {
+      variant: "text",
+      icon: "close",
+      size: "small",
+      onClick: onClickClearButton
     })]
   });
 });
@@ -1745,7 +1744,7 @@ var ToastProvider = function ToastProvider(_ref) {
       addToast: addToast,
       removeToast: removeToast
     },
-    children: [children, isClientRender && /*#__PURE__*/createPortal( /*#__PURE__*/jsx("div", {
+    children: [children, isClientRender && /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
       className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-[16px]",
       children: toasts.map(function (_ref3) {
         var id = _ref3.id,
@@ -2032,7 +2031,7 @@ function Tooltip(_ref) {
       verticalPosition: verticalPosition,
       horizontalAlign: horizontalAlign,
       tooltipPosition: tooltipPosition
-    }) : ( /*#__PURE__*/createPortal( /*#__PURE__*/jsx(TooltipContent, {
+    }) : (/*#__PURE__*/createPortal(/*#__PURE__*/jsx(TooltipContent, {
       isPortal: true,
       content: content,
       size: size,