@zenkigen-inc/component-ui 1.14.5 → 1.15.0

package/dist/index.esm.js

@@ -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;
@@ -1783,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'
   });