@tapizlabs/ui 0.2.25 → 0.2.27

package/dist/index.js

@@ -2777,6 +2777,31 @@ function Drawer({ open, onClose, title, description, children, footer, side = "r
 // src/components/overlays/SidePanel.tsx
 import { useEffect as useEffect4, useId as useId4, useState as useState10 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
+
+// src/components/overlays/scrollLock.ts
+var lockCount = 0;
+var originalHtmlOverflow = "";
+var originalBodyOverflow = "";
+function acquireBodyScrollLock() {
+  if (lockCount === 0) {
+    originalHtmlOverflow = document.documentElement.style.overflow;
+    originalBodyOverflow = document.body.style.overflow;
+    document.documentElement.style.overflow = "hidden";
+    document.body.style.overflow = "hidden";
+  }
+  lockCount += 1;
+  return () => {
+    lockCount = Math.max(0, lockCount - 1);
+    if (lockCount === 0) {
+      document.documentElement.style.overflow = originalHtmlOverflow;
+      document.body.style.overflow = originalBodyOverflow;
+      originalHtmlOverflow = "";
+      originalBodyOverflow = "";
+    }
+  };
+}
+
+// src/components/overlays/SidePanel.tsx
 import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
 var widthRem = {
   md: 28,
@@ -2835,17 +2860,13 @@ function SidePanel({
   }, []);
   useEffect4(() => {
     if (!isOpen) return;
-    const html = document.documentElement.style.overflow;
-    const body = document.body.style.overflow;
-    document.documentElement.style.overflow = "hidden";
-    document.body.style.overflow = "hidden";
+    const releaseBodyScrollLock = acquireBodyScrollLock();
     const onKeyDown = (e) => {
       if (e.key === "Escape") onClose();
     };
     document.addEventListener("keydown", onKeyDown);
     return () => {
-      document.documentElement.style.overflow = html;
-      document.body.style.overflow = body;
+      releaseBodyScrollLock();
       document.removeEventListener("keydown", onKeyDown);
     };
   }, [isOpen, onClose]);
@@ -2867,6 +2888,8 @@ function SidePanel({
         className: `fixed inset-0 z-50 flex bg-[rgba(5,6,8,0.75)] backdrop-blur-[2px] ${side === "right" ? "justify-end" : "justify-start"} ${shown ? "opacity-100" : "opacity-0"}`,
         style: { transition: reduceMotion ? "none" : `opacity ${TRANSITION_MS}ms ${TRANSITION_EASE}` },
         onClick: (e) => e.target === e.currentTarget && onClose(),
+        onWheel: (e) => e.preventDefault(),
+        onTouchMove: (e) => e.preventDefault(),
         children: /* @__PURE__ */ jsxs47(
           "div",
           {
@@ -2893,7 +2916,15 @@ function SidePanel({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx66("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4 sm:px-5", children }),
+              /* @__PURE__ */ jsx66(
+                "div",
+                {
+                  className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4 sm:px-5",
+                  onWheel: (e) => e.stopPropagation(),
+                  onTouchMove: (e) => e.stopPropagation(),
+                  children
+                }
+              ),
               footer && /* @__PURE__ */ jsx66("div", { className: "shrink-0 border-t border-border px-4 py-3 sm:px-5", children: footer })
             ]
           }