@trackunit/react-drawer 1.7.94 → 1.7.101

package/index.cjs.js

@@ -193,15 +193,22 @@ const NOOP$1 = () => void 0;
  * @param {DrawerProps} props - The props for the Drawer component
  */
 const Drawer = ({ open = false, // Default to closed
-onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, dataTestId, className, renderInPortal = false, keepMountedWhenClosed = false, containerClassName, ref, ...others }) => {
+onClose = NOOP$1, onOpen = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, dataTestId, className, renderInPortal = false, keepMountedWhenClosed = false, containerClassName, ref, ...others }) => {
     const { isSm } = reactComponents.useViewportBreakpoints();
     const shouldUsePortal = !isSm || renderInPortal;
     const [shouldRender, setShouldRender] = react.useState(open);
     const [mode, setMode] = react.useState(open ? "open" : "closed");
+    const onOpenRef = react.useRef(onOpen);
+    react.useEffect(() => {
+        onOpenRef.current = onOpen;
+    }, [onOpen]);
     react.useEffect(() => {
         if (open) {
             setShouldRender(true);
-            setTimeout(() => setMode("open"), TRANSITION_DURATION);
+            setTimeout(() => {
+                setMode("open");
+                onOpenRef.current();
+            }, TRANSITION_DURATION);
         }
         else {
             setMode("closed");
@@ -291,47 +298,6 @@ const cvaToggleContainer = cssClassVarianceUtilities.cvaMerge(["z-8", "absolute"
     },
 });
 
-const blockDocumentScroll = () => {
-    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`;
-};
-const restoreDocumentScroll = () => {
-    const { body } = document;
-    const html = document.documentElement;
-    html.style.position = "";
-    html.style.overflow = "";
-    body.style.position = "";
-    body.style.overflow = "";
-    body.style.paddingRight = "";
-};
-/**
- * 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(() => {
-        blockDocumentScroll();
-        scrollBlocked.current = true;
-        return () => {
-            restoreDocumentScroll();
-            scrollBlocked.current = false;
-        };
-    }, []);
-    react.useEffect(() => {
-        if (isDisabled) {
-            return;
-        }
-        return blockScroll();
-    }, [isDisabled, blockScroll]);
-};
-
 /**
  * Retrieves the Y-axis translation value of a given HTML element.
  *
@@ -432,7 +398,7 @@ const SNAP_POINT_TRANSITION = "transform 500ms cubic-bezier(0.32,0.72,0,1)";
  * The component manages its docked state based on the open prop and keepMountedWhenClosed prop.
  * It also applies styles dynamically based on whether the drawer is being dragged.
  */
-const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position = "bottom", snapPoints, activeSnapPoint: activeSnapPointProp = null, container, ref, ...others }) => {
+const SwipeableDrawer = ({ open = false, onClose, onOpen, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position = "bottom", snapPoints, activeSnapPoint: activeSnapPointProp = null, container, ref, ...others }) => {
     const drawerRef = react.useRef(null);
     const { geometry: containerGeometry, ref: containerMeasureRef } = reactComponents.useMeasure();
     react.useImperativeHandle(ref, () => drawerRef.current);
@@ -453,7 +419,7 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
         // If the velocity is greater than the threshold and the dragged distance is less than 40% of the container height, snap to the next snap point
         if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedBy) < (containerGeometry?.height ?? 0) * 0.4) {
             const newSnapPoint = snapPoints[activeSnapPointIndex + direction] ?? null;
-            if (newSnapPoint) {
+            if (newSnapPoint !== null) {
                 setActiveSnapPoint(newSnapPoint);
                 onSnapPointChange?.(newSnapPoint);
             }
@@ -471,7 +437,7 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
         });
         const snapPointIndex = snapPointOffsets.findIndex(offset => offset === closestSnapPoint);
         const nextSnapPoint = snapPoints[snapPointIndex] ?? null;
-        if (!nextSnapPoint) {
+        if (nextSnapPoint === null) {
             return;
         }
         setActiveSnapPoint(nextSnapPoint);
@@ -482,12 +448,12 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
         closingThreshold: CLOSING_THRESHOLD,
         onCloseGesture: () => {
             if (!snapPoints) {
-                onClose && onClose();
+                onClose?.();
             }
         },
         onOpenGesture: () => {
             if (!snapPoints) {
-                onOpenGesture && onOpenGesture();
+                onOpenGesture?.();
             }
         },
         onDragEnd: onHandleDragEnd,
@@ -501,7 +467,8 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
             return false;
         },
     });
-    useScrollBlock({ isDisabled: !open || isDragging });
+    const { blockScroll, restoreScroll } = reactComponents.useScrollBlock();
+    const { blockScroll: blockScrollContent, restoreScroll: restoreScrollContent } = reactComponents.useScrollBlock(document.getElementById("host-layout-content"));
     react.useEffect(() => {
         if (!snapPoints || !drawerRef.current) {
             return;
@@ -532,7 +499,7 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
         }
         const snapPointIndex = snapPoints.findIndex(offset => offset === activeSnapPointProp);
         const nextSnapPoint = snapPoints[snapPointIndex > -1 ? snapPointIndex : 0] ?? null;
-        if (!nextSnapPoint) {
+        if (nextSnapPoint === null) {
             return;
         }
         setActiveSnapPoint(nextSnapPoint);
@@ -553,7 +520,7 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
         }
         return {};
     }, [isDragging, dragDistance, snapPointOffsets, activeSnapPointIndex, snapPoints]);
-    react.useEffect(() => {
+    const applyDrawerStyles = react.useCallback(() => {
         if (!drawerRef.current) {
             return;
         }
@@ -565,8 +532,23 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
             drawerRef.current.style.transform = "";
             drawerRef.current.style.transition = "";
         }
-    }, [drawerStyle, drawerRef, open]);
-    return (jsxRuntime.jsxs(Drawer, { className: cvaSwipeableDrawer({ className }), keepMountedWhenClosed: keepMountedWhenClosed, onClose: onClose, open: open, position: position, ref: drawerRef, ...others, children: [jsxRuntime.jsx(DrawerPuller, { ...handlers }), children] }));
+    }, [open, drawerStyle]);
+    react.useEffect(() => {
+        applyDrawerStyles();
+    }, [applyDrawerStyles]);
+    const onOpenHandler = react.useCallback(() => {
+        onOpen?.();
+        blockScroll();
+        blockScrollContent();
+        applyDrawerStyles();
+    }, [onOpen, blockScroll, blockScrollContent, applyDrawerStyles]);
+    const onCloseHandler = react.useCallback(() => {
+        onClose?.();
+        restoreScroll();
+        restoreScrollContent();
+        applyDrawerStyles();
+    }, [onClose, restoreScroll, restoreScrollContent, applyDrawerStyles]);
+    return (jsxRuntime.jsxs(Drawer, { className: cvaSwipeableDrawer({ className }), keepMountedWhenClosed: keepMountedWhenClosed, onClose: onCloseHandler, onOpen: onOpenHandler, open: open, position: position, ref: drawerRef, ...others, children: [jsxRuntime.jsx(DrawerPuller, { ...handlers }), children] }));
 };
 SwipeableDrawer.displayName = "SwipeableDrawer";
 const cvaSwipeableDrawer = cssClassVarianceUtilities.cvaMerge([]);

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
-import { useViewportBreakpoints, Portal, Icon, useMeasureElement, useMeasure } from '@trackunit/react-components';
-import { useEffect, useState, useCallback, useRef, useImperativeHandle, useMemo } from 'react';
+import { useViewportBreakpoints, Portal, Icon, useMeasureElement, useMeasure, useScrollBlock } from '@trackunit/react-components';
+import { useEffect, useState, useRef, useCallback, useImperativeHandle, useMemo } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { useSwipeable } from 'react-swipeable';
 
@@ -191,15 +191,22 @@ const NOOP$1 = () => void 0;
  * @param {DrawerProps} props - The props for the Drawer component
  */
 const Drawer = ({ open = false, // Default to closed
-onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, dataTestId, className, renderInPortal = false, keepMountedWhenClosed = false, containerClassName, ref, ...others }) => {
+onClose = NOOP$1, onOpen = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, dataTestId, className, renderInPortal = false, keepMountedWhenClosed = false, containerClassName, ref, ...others }) => {
     const { isSm } = useViewportBreakpoints();
     const shouldUsePortal = !isSm || renderInPortal;
     const [shouldRender, setShouldRender] = useState(open);
     const [mode, setMode] = useState(open ? "open" : "closed");
+    const onOpenRef = useRef(onOpen);
+    useEffect(() => {
+        onOpenRef.current = onOpen;
+    }, [onOpen]);
     useEffect(() => {
         if (open) {
             setShouldRender(true);
-            setTimeout(() => setMode("open"), TRANSITION_DURATION);
+            setTimeout(() => {
+                setMode("open");
+                onOpenRef.current();
+            }, TRANSITION_DURATION);
         }
         else {
             setMode("closed");
@@ -289,47 +296,6 @@ const cvaToggleContainer = cvaMerge(["z-8", "absolute"], {
     },
 });
 
-const blockDocumentScroll = () => {
-    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`;
-};
-const restoreDocumentScroll = () => {
-    const { body } = document;
-    const html = document.documentElement;
-    html.style.position = "";
-    html.style.overflow = "";
-    body.style.position = "";
-    body.style.overflow = "";
-    body.style.paddingRight = "";
-};
-/**
- * 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(() => {
-        blockDocumentScroll();
-        scrollBlocked.current = true;
-        return () => {
-            restoreDocumentScroll();
-            scrollBlocked.current = false;
-        };
-    }, []);
-    useEffect(() => {
-        if (isDisabled) {
-            return;
-        }
-        return blockScroll();
-    }, [isDisabled, blockScroll]);
-};
-
 /**
  * Retrieves the Y-axis translation value of a given HTML element.
  *
@@ -430,7 +396,7 @@ const SNAP_POINT_TRANSITION = "transform 500ms cubic-bezier(0.32,0.72,0,1)";
  * The component manages its docked state based on the open prop and keepMountedWhenClosed prop.
  * It also applies styles dynamically based on whether the drawer is being dragged.
  */
-const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position = "bottom", snapPoints, activeSnapPoint: activeSnapPointProp = null, container, ref, ...others }) => {
+const SwipeableDrawer = ({ open = false, onClose, onOpen, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position = "bottom", snapPoints, activeSnapPoint: activeSnapPointProp = null, container, ref, ...others }) => {
     const drawerRef = useRef(null);
     const { geometry: containerGeometry, ref: containerMeasureRef } = useMeasure();
     useImperativeHandle(ref, () => drawerRef.current);
@@ -451,7 +417,7 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
         // If the velocity is greater than the threshold and the dragged distance is less than 40% of the container height, snap to the next snap point
         if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedBy) < (containerGeometry?.height ?? 0) * 0.4) {
             const newSnapPoint = snapPoints[activeSnapPointIndex + direction] ?? null;
-            if (newSnapPoint) {
+            if (newSnapPoint !== null) {
                 setActiveSnapPoint(newSnapPoint);
                 onSnapPointChange?.(newSnapPoint);
             }
@@ -469,7 +435,7 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
         });
         const snapPointIndex = snapPointOffsets.findIndex(offset => offset === closestSnapPoint);
         const nextSnapPoint = snapPoints[snapPointIndex] ?? null;
-        if (!nextSnapPoint) {
+        if (nextSnapPoint === null) {
             return;
         }
         setActiveSnapPoint(nextSnapPoint);
@@ -480,12 +446,12 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
         closingThreshold: CLOSING_THRESHOLD,
         onCloseGesture: () => {
             if (!snapPoints) {
-                onClose && onClose();
+                onClose?.();
             }
         },
         onOpenGesture: () => {
             if (!snapPoints) {
-                onOpenGesture && onOpenGesture();
+                onOpenGesture?.();
             }
         },
         onDragEnd: onHandleDragEnd,
@@ -499,7 +465,8 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
             return false;
         },
     });
-    useScrollBlock({ isDisabled: !open || isDragging });
+    const { blockScroll, restoreScroll } = useScrollBlock();
+    const { blockScroll: blockScrollContent, restoreScroll: restoreScrollContent } = useScrollBlock(document.getElementById("host-layout-content"));
     useEffect(() => {
         if (!snapPoints || !drawerRef.current) {
             return;
@@ -530,7 +497,7 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
         }
         const snapPointIndex = snapPoints.findIndex(offset => offset === activeSnapPointProp);
         const nextSnapPoint = snapPoints[snapPointIndex > -1 ? snapPointIndex : 0] ?? null;
-        if (!nextSnapPoint) {
+        if (nextSnapPoint === null) {
             return;
         }
         setActiveSnapPoint(nextSnapPoint);
@@ -551,7 +518,7 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
         }
         return {};
     }, [isDragging, dragDistance, snapPointOffsets, activeSnapPointIndex, snapPoints]);
-    useEffect(() => {
+    const applyDrawerStyles = useCallback(() => {
         if (!drawerRef.current) {
             return;
         }
@@ -563,8 +530,23 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
             drawerRef.current.style.transform = "";
             drawerRef.current.style.transition = "";
         }
-    }, [drawerStyle, drawerRef, open]);
-    return (jsxs(Drawer, { className: cvaSwipeableDrawer({ className }), keepMountedWhenClosed: keepMountedWhenClosed, onClose: onClose, open: open, position: position, ref: drawerRef, ...others, children: [jsx(DrawerPuller, { ...handlers }), children] }));
+    }, [open, drawerStyle]);
+    useEffect(() => {
+        applyDrawerStyles();
+    }, [applyDrawerStyles]);
+    const onOpenHandler = useCallback(() => {
+        onOpen?.();
+        blockScroll();
+        blockScrollContent();
+        applyDrawerStyles();
+    }, [onOpen, blockScroll, blockScrollContent, applyDrawerStyles]);
+    const onCloseHandler = useCallback(() => {
+        onClose?.();
+        restoreScroll();
+        restoreScrollContent();
+        applyDrawerStyles();
+    }, [onClose, restoreScroll, restoreScrollContent, applyDrawerStyles]);
+    return (jsxs(Drawer, { className: cvaSwipeableDrawer({ className }), keepMountedWhenClosed: keepMountedWhenClosed, onClose: onCloseHandler, onOpen: onOpenHandler, open: open, position: position, ref: drawerRef, ...others, children: [jsx(DrawerPuller, { ...handlers }), children] }));
 };
 SwipeableDrawer.displayName = "SwipeableDrawer";
 const cvaSwipeableDrawer = cvaMerge([]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-drawer",
-  "version": "1.7.94",
+  "version": "1.7.101",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,11 +9,11 @@
   "dependencies": {
     "react": "19.0.0",
     "react-swipeable": "^7.0.1",
-    "@trackunit/react-components": "1.10.33",
-    "@trackunit/css-class-variance-utilities": "1.7.64",
-    "@trackunit/ui-icons": "1.7.65",
-    "@trackunit/i18n-library-translation": "1.7.78",
-    "@trackunit/react-test-setup": "1.4.64"
+    "@trackunit/react-components": "1.10.40",
+    "@trackunit/css-class-variance-utilities": "1.7.70",
+    "@trackunit/ui-icons": "1.7.71",
+    "@trackunit/i18n-library-translation": "1.7.84",
+    "@trackunit/react-test-setup": "1.4.70"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/Drawer/Drawer.d.ts

@@ -15,6 +15,10 @@ export interface DrawerProps extends CommonProps {
      * The handler for closing the drawer. If not provided, the drawer will dock when closed.=
      */
     onClose?: () => void;
+    /**
+     * The handler for opening the drawer. Called when the drawer transitions to open state.
+     */
+    onOpen?: () => void;
     /**
      * Whether the drawer needs an overlay or not. Without the overlay, user will have to handle mechanism for closing the drawer.
      * Default is true.
@@ -59,6 +63,6 @@ export interface DrawerProps extends CommonProps {
  * @param {DrawerProps} props - The props for the Drawer component
  */
 export declare const Drawer: {
-    ({ open, onClose, hasOverlay, position, children, dataTestId, className, renderInPortal, keepMountedWhenClosed, containerClassName, ref, ...others }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ open, onClose, onOpen, hasOverlay, position, children, dataTestId, className, renderInPortal, keepMountedWhenClosed, containerClassName, ref, ...others }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/src/components/Drawer/Drawer.stories.d.ts

@@ -6,7 +6,7 @@ type Story = StoryObj<typeof Drawer | typeof SwipeableDrawer>;
 declare const meta: {
     title: string;
     component: {
-        ({ open, onClose, hasOverlay, position, children, dataTestId, className, renderInPortal, keepMountedWhenClosed, containerClassName, ref, ...others }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;
+        ({ open, onClose, onOpen, hasOverlay, position, children, dataTestId, className, renderInPortal, keepMountedWhenClosed, containerClassName, ref, ...others }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;
         displayName: string;
     };
     tags: string[];

package/src/components/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from "react";
+import { ReactElement, Ref } from "react";
 import { type DrawerProps } from "../Drawer/Drawer";
 export interface SwipeableDrawerProps extends DrawerProps {
     onOpenGesture?: () => void;
@@ -19,7 +19,7 @@ export interface SwipeableDrawerProps extends DrawerProps {
  * It also applies styles dynamically based on whether the drawer is being dragged.
  */
 export declare const SwipeableDrawer: {
-    ({ open, onClose, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position, snapPoints, activeSnapPoint: activeSnapPointProp, container, ref, ...others }: SwipeableDrawerProps): import("react/jsx-runtime").JSX.Element;
+    ({ open, onClose, onOpen, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position, snapPoints, activeSnapPoint: activeSnapPointProp, container, ref, ...others }: SwipeableDrawerProps): ReactElement;
     displayName: string;
 };
 export declare const cvaSwipeableDrawer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/hooks/index.d.ts

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

package/src/hooks/useScrollBlock.d.ts

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