@zenkigen-inc/component-ui 1.14.4 → 1.15.0

package/dist/index.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;
@@ -612,6 +612,109 @@ function Loading({
   });
 }
 
+/**
+ * モーダル表示時にバックグラウンドのスクロールを防止するコンポーネント。
+ * コンポーネントがマウントされている間、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>
+ *       )}
+ *     </>
+ *   );
+ * };
+ */
+const BodyScrollLock = () => {
+  useLayoutEffect(() => {
+    // 現在の縦横スクロール位置を記録
+    const {
+      scrollX,
+      scrollY
+    } = window;
+    const {
+      body
+    } = document;
+    // スクロールバーの有無と幅を検出
+    const hasVerticalScrollbar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
+    const scrollbarWidth = hasVerticalScrollbar ? window.innerWidth - document.documentElement.clientWidth : 0;
+    // 元のインラインスタイルの値を保存
+    const 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の値を取得
+      const {
+        paddingRight
+      } = window.getComputedStyle(body);
+      const paddingRightValue = paddingRight !== '' ? parseInt(paddingRight, 10) : 0;
+      // スクロールバーの幅を加算
+      body.style.paddingRight = `${paddingRightValue + scrollbarWidth}px`;
+    }
+    // クリーンアップ関数
+    return () => {
+      // 元のスタイル値を取得
+      const {
+        position,
+        top,
+        left,
+        width,
+        overflow,
+        paddingRight
+      } = originalInlineStyles;
+      // プロパティごとに元の値を復元
+      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({
   children
 }) {
@@ -679,22 +782,24 @@ function Modal({
   useEffect(() => {
     setIsMounted(true);
   }, []);
-  return isMounted && isOpen ? /*#__PURE__*/createPortal( /*#__PURE__*/jsx(ModalContext.Provider, {
-    value: {
-      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
+      },
       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;
@@ -1552,19 +1657,23 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       onClickClearButton
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const isShowClearButton = !!onClickClearButton && props.value.length !== 0 && !disabled;
   const 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
   });
-  const inputClasses = clsx('flex-1 pl-2 pr-3 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', {
-    ['typography-label14regular min-h-8']: size === 'medium',
-    ['typography-label16regular min-h-10']: size === 'large',
+  const inputClasses = clsx('flex-1 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', {
+    ['typography-label14regular min-h-8 px-2']: size === 'medium',
+    ['typography-label16regular min-h-10 px-3']: size === 'large',
     'text-text01': !isError,
-    'text-supportError': isError
+    'text-supportError': isError,
+    'pr-0': isShowClearButton
   });
   return /*#__PURE__*/jsxs("div", {
     className: inputWrapClasses,
@@ -1574,15 +1683,11 @@ const TextInput = /*#__PURE__*/forwardRef((_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
     })]
   });
 });
@@ -1685,7 +1790,7 @@ const ToastProvider = ({
       addToast,
       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(({
         id,
@@ -1719,7 +1824,7 @@ function Toggle({
     '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'
   });
@@ -1961,7 +2066,7 @@ function Tooltip({
       verticalPosition: verticalPosition,
       horizontalAlign: horizontalAlign,
       tooltipPosition: tooltipPosition
-    }) : ( /*#__PURE__*/createPortal( /*#__PURE__*/jsx(TooltipContent, {
+    }) : (/*#__PURE__*/createPortal(/*#__PURE__*/jsx(TooltipContent, {
       isPortal: true,
       content: content,
       size: size,