@tensor_1/react 2.6.0 → 2.7.0

package/dist/hooks/useDialog.js

@@ -1,16 +1,47 @@
 "use client";
 import { useRef, useEffect } from "react";
+let lockCount = 0;
+let saved = null;
+function lockBodyScroll() {
+  if (typeof document === "undefined") return;
+  if (++lockCount > 1) return;
+  const el = document.scrollingElement ?? document.documentElement;
+  const scrollbarW = window.innerWidth - document.documentElement.clientWidth;
+  saved = {
+    el,
+    overflow: el.style.overflow,
+    paddingRight: el.style.paddingRight,
+    overscroll: el.style.overscrollBehavior
+  };
+  el.style.overflow = "hidden";
+  if (scrollbarW > 0) {
+    const current = parseFloat(getComputedStyle(el).paddingRight) || 0;
+    el.style.paddingRight = `${current + scrollbarW}px`;
+  }
+  el.style.overscrollBehavior = "contain";
+}
+function unlockBodyScroll() {
+  if (typeof document === "undefined" || lockCount === 0) return;
+  if (--lockCount > 0) return;
+  if (saved) {
+    saved.el.style.overflow = saved.overflow;
+    saved.el.style.paddingRight = saved.paddingRight;
+    saved.el.style.overscrollBehavior = saved.overscroll;
+    saved = null;
+  }
+}
 function useDialog(open) {
   const ref = useRef(null);
   useEffect(() => {
     const el = ref.current;
-    if (!el) return;
-    if (open) {
-      if (!el.open) el.showModal();
-    } else {
-      if (el.open) el.close();
+    if (!el || !open) {
+      if (el && el.open) el.close();
+      return;
     }
+    if (!el.open) el.showModal();
+    lockBodyScroll();
     return () => {
+      unlockBodyScroll();
       if (el.open) el.close();
     };
   }, [open]);