@zenkigen-inc/component-ui 1.14.4 → 1.15.0

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;
@@ -628,6 +628,104 @@ function Loading(_ref) {
   });
 }
 
+/**
+ * モーダル表示時にバックグラウンドのスクロールを防止するコンポーネント。
+ * コンポーネントがマウントされている間、position: fixedアプローチを使用して
+ * body要素にスクロールロックを適用します。
+ * 縦横両方のスクロール位置を保存し、コンポーネントのアンマウント時に復元します。
+ * スクロールバーの有無を検出し、その幅を考慮してレイアウトシフトを防止します。
+ * position、top、left、width、overflow、padding-rightを変更し、
+ * 最小限の変更でスクロールを防止します。
+ * グローバルCSSに依存せず、すべてインラインスタイルで実装されています。
+ * このコンポーネントは実際のDOM要素をレンダリングせず、効果のみを適用します。
+ *
+ * @example
+ * // モーダルコンポーネント内で使用する例
+ * const Modal = ({ isOpen, children }) => {
+ *   return (
+ *     <>
+ *       {isOpen && <BodyScrollLock />}
+ *       {isOpen && (
+ *         <div className="modal">
+ *           {children}
+ *         </div>
+ *       )}
+ *     </>
+ *   );
+ * };
+ */
+var BodyScrollLock = function BodyScrollLock() {
+  useLayoutEffect(function () {
+    // 現在の縦横スクロール位置を記録
+    var _window = window,
+      scrollX = _window.scrollX,
+      scrollY = _window.scrollY;
+    var _document = document,
+      body = _document.body;
+    // スクロールバーの有無と幅を検出
+    var hasVerticalScrollbar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
+    var scrollbarWidth = hasVerticalScrollbar ? window.innerWidth - document.documentElement.clientWidth : 0;
+    // 元のインラインスタイルの値を保存
+    var originalInlineStyles = {
+      position: body.style.position,
+      top: body.style.top,
+      left: body.style.left,
+      width: body.style.width,
+      overflow: body.style.overflow,
+      paddingRight: body.style.paddingRight
+    };
+    // スクロールロックスタイルを適用
+    body.style.position = 'fixed';
+    body.style.top = "-" + scrollY + "px";
+    body.style.left = "-" + scrollX + "px";
+    body.style.width = '100%';
+    body.style.overflow = 'hidden';
+    // スクロールバーがある場合、その幅分だけpadding-rightを調整
+    if (hasVerticalScrollbar && scrollbarWidth > 0) {
+      // 現在のpadding-rightの値を取得
+      var _window$getComputedSt = window.getComputedStyle(body),
+        paddingRight = _window$getComputedSt.paddingRight;
+      var paddingRightValue = paddingRight !== '' ? parseInt(paddingRight, 10) : 0;
+      // スクロールバーの幅を加算
+      body.style.paddingRight = paddingRightValue + scrollbarWidth + "px";
+    }
+    // クリーンアップ関数
+    return function () {
+      // 元のスタイル値を取得
+      var position = originalInlineStyles.position,
+        top = originalInlineStyles.top,
+        left = originalInlineStyles.left,
+        width = originalInlineStyles.width,
+        overflow = originalInlineStyles.overflow,
+        paddingRight = originalInlineStyles.paddingRight;
+      // プロパティごとに元の値を復元
+      restoreProperty(body, 'position', position);
+      restoreProperty(body, 'top', top);
+      restoreProperty(body, 'left', left);
+      restoreProperty(body, 'width', width);
+      restoreProperty(body, 'overflow', overflow);
+      restoreProperty(body, 'padding-right', paddingRight);
+      // スクロール位置を復元
+      window.scrollTo(scrollX, scrollY);
+    };
+  }, []); // 空の依存配列を指定して初回のみ実行
+  // DOM要素をレンダリングせず、nullを返す
+  return null;
+};
+/**
+ * 元のスタイル値を復元するヘルパー関数
+ * @param element スタイルを復元する要素
+ * @param property 復元するCSSプロパティ名
+ * @param value 復元する値
+ */
+function restoreProperty(element, property, value) {
+  if (value !== '') {
+    element.style.setProperty(property, value);
+  } else {
+    element.style.removeProperty(property);
+  }
+}
+
 function ModalBody(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx("div", {
@@ -697,22 +795,24 @@ function Modal(_ref) {
   useEffect(function () {
     setIsMounted(true);
   }, []);
-  return isMounted && isOpen ? /*#__PURE__*/createPortal( /*#__PURE__*/jsx(ModalContext.Provider, {
-    value: {
-      onClose: onClose
-    },
-    children: /*#__PURE__*/jsx("div", {
-      className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4",
+  return isMounted && isOpen ? /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(BodyScrollLock, {}), /*#__PURE__*/createPortal(/*#__PURE__*/jsx(ModalContext.Provider, {
+      value: {
+        onClose: onClose
+      },
       children: /*#__PURE__*/jsx("div", {
-        className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-modalShadow",
-        style: {
-          width: renderWidth,
-          height: renderHeight
-        },
-        children: children
+        className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4",
+        children: /*#__PURE__*/jsx("div", {
+          className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-modalShadow",
+          style: {
+            width: renderWidth,
+            height: renderHeight
+          },
+          children: children
+        })
       })
-    })
-  }), (portalTargetRef == null ? void 0 : portalTargetRef.current) != null ? portalTargetRef.current : document.body) : null;
+    }), (portalTargetRef == null ? void 0 : portalTargetRef.current) != null ? portalTargetRef.current : document.body)]
+  }) : null;
 }
 Modal.Body = ModalBody;
 Modal.Header = ModalHeader;
@@ -1602,15 +1702,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 +1722,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 +1844,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,
@@ -1784,7 +1883,7 @@ function Toggle(_ref) {
     'bg-disabledOn': isDisabled && isChecked,
     'bg-disabled01': isDisabled && !isChecked,
     'bg-interactive01 peer-hover:bg-hover01': !isDisabled && isChecked,
-    'bg-interactive02 peer-hover:bg-hover02Dark': !isDisabled && !isChecked,
+    'bg-interactive02 peer-hover:bg-hoverGray': !isDisabled && !isChecked,
     'w-8 h-4 px-[3px]': size === 'small',
     'w-12 h-6 px-1': size === 'medium' || size === 'large'
   });
@@ -2032,7 +2131,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,