@tapizlabs/ui 0.2.26 → 0.2.28

package/dist/index.js

@@ -2782,12 +2782,23 @@ import { createPortal as createPortal5 } from "react-dom";
 var lockCount = 0;
 var originalHtmlOverflow = "";
 var originalBodyOverflow = "";
+var originalBodyPaddingRight = "";
+var SCROLLBAR_VAR = "--tapiz-scrollbar-comp";
 function acquireBodyScrollLock() {
   if (lockCount === 0) {
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
     originalHtmlOverflow = document.documentElement.style.overflow;
     originalBodyOverflow = document.body.style.overflow;
+    originalBodyPaddingRight = document.body.style.paddingRight;
     document.documentElement.style.overflow = "hidden";
     document.body.style.overflow = "hidden";
+    if (scrollbarWidth > 0) {
+      const currentPadding = Number.parseFloat(window.getComputedStyle(document.body).paddingRight) || 0;
+      document.body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;
+      document.documentElement.style.setProperty(SCROLLBAR_VAR, `${scrollbarWidth}px`);
+    } else {
+      document.documentElement.style.setProperty(SCROLLBAR_VAR, "0px");
+    }
   }
   lockCount += 1;
   return () => {
@@ -2795,8 +2806,11 @@ function acquireBodyScrollLock() {
     if (lockCount === 0) {
       document.documentElement.style.overflow = originalHtmlOverflow;
       document.body.style.overflow = originalBodyOverflow;
+      document.body.style.paddingRight = originalBodyPaddingRight;
+      document.documentElement.style.removeProperty(SCROLLBAR_VAR);
       originalHtmlOverflow = "";
       originalBodyOverflow = "";
+      originalBodyPaddingRight = "";
     }
   };
 }
@@ -2888,6 +2902,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",
           {
@@ -2914,7 +2930,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 })
             ]
           }