@trackunit/react-drawer 0.1.6 → 0.1.8

package/index.cjs.js

@@ -178,7 +178,7 @@ const cvaDrawerContent = cssClassVarianceUtilities.cvaMerge(["flex", "h-full", "
             left: "rounded-r-lg",
             right: "rounded-l-lg",
             top: ["flex-col", "rounded-b-lg"],
-            bottom: ["max-h-[calc(100vh-10px)]", "flex-col", "rounded-t-lg", "sm:max-h-none"],
+            bottom: ["max-h-[calc(100dvh-10px)]", "flex-col", "rounded-t-lg", "sm:max-h-none"],
         },
     },
 });
@@ -294,6 +294,39 @@ const cvaToggleContainer = cssClassVarianceUtilities.cvaMerge(["z-8", "absolute"
     },
 });
 
+/**
+ * Hook for blocking scroll to prevent strange behaviors when full-screen swipeable components are open.
+ */
+const useScrollBlock = ({ isDisabled }) => {
+    const scrollBlocked = react.useRef(false);
+    const blockScroll = react.useCallback(() => {
+        const { body } = document;
+        const html = document.documentElement;
+        const scrollBarWidth = window.innerWidth - (html.clientWidth || 0);
+        const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
+        html.style.position = "relative";
+        html.style.overflow = "hidden";
+        body.style.position = "relative";
+        body.style.overflow = "hidden";
+        body.style.paddingRight = `${bodyPaddingRight + scrollBarWidth}px`;
+        scrollBlocked.current = true;
+        return () => {
+            html.style.position = "";
+            html.style.overflow = "";
+            body.style.position = "";
+            body.style.overflow = "";
+            body.style.paddingRight = "";
+            scrollBlocked.current = false;
+        };
+    }, []);
+    react.useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+        return blockScroll();
+    }, [isDisabled, blockScroll]);
+};
+
 /**
  * Retrieves the Y-axis translation value of a given HTML element.
  *
@@ -392,6 +425,7 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, children, keepMountedWh
         onCloseGesture: onClose,
         onOpenGesture,
     });
+    useScrollBlock({ isDisabled: !open || isDragging });
     const drawerStyle = react.useMemo(() => isDragging
         ? {
             transform: `translateY(${dragDistance}px)`,

package/index.esm.js

@@ -176,7 +176,7 @@ const cvaDrawerContent = cvaMerge(["flex", "h-full", "shadow-lg", "bg-white"], {
             left: "rounded-r-lg",
             right: "rounded-l-lg",
             top: ["flex-col", "rounded-b-lg"],
-            bottom: ["max-h-[calc(100vh-10px)]", "flex-col", "rounded-t-lg", "sm:max-h-none"],
+            bottom: ["max-h-[calc(100dvh-10px)]", "flex-col", "rounded-t-lg", "sm:max-h-none"],
         },
     },
 });
@@ -292,6 +292,39 @@ const cvaToggleContainer = cvaMerge(["z-8", "absolute"], {
     },
 });
 
+/**
+ * Hook for blocking scroll to prevent strange behaviors when full-screen swipeable components are open.
+ */
+const useScrollBlock = ({ isDisabled }) => {
+    const scrollBlocked = useRef(false);
+    const blockScroll = useCallback(() => {
+        const { body } = document;
+        const html = document.documentElement;
+        const scrollBarWidth = window.innerWidth - (html.clientWidth || 0);
+        const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
+        html.style.position = "relative";
+        html.style.overflow = "hidden";
+        body.style.position = "relative";
+        body.style.overflow = "hidden";
+        body.style.paddingRight = `${bodyPaddingRight + scrollBarWidth}px`;
+        scrollBlocked.current = true;
+        return () => {
+            html.style.position = "";
+            html.style.overflow = "";
+            body.style.position = "";
+            body.style.overflow = "";
+            body.style.paddingRight = "";
+            scrollBlocked.current = false;
+        };
+    }, []);
+    useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+        return blockScroll();
+    }, [isDisabled, blockScroll]);
+};
+
 /**
  * Retrieves the Y-axis translation value of a given HTML element.
  *
@@ -390,6 +423,7 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, children, keepMountedWh
         onCloseGesture: onClose,
         onOpenGesture,
     });
+    useScrollBlock({ isDisabled: !open || isDragging });
     const drawerStyle = useMemo(() => isDragging
         ? {
             transform: `translateY(${dragDistance}px)`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-drawer",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/hooks/index.d.ts

@@ -1 +1,2 @@
+export * from "./useScrollBlock";
 export * from "./useSwipeHandlers";

package/src/hooks/useScrollBlock.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook for blocking scroll to prevent strange behaviors when full-screen swipeable components are open.
+ */
+export declare const useScrollBlock: ({ isDisabled }: {
+    isDisabled: boolean;
+}) => void;