@trackunit/react-drawer 1.7.103 → 1.7.104

package/index.cjs.js

@@ -321,57 +321,72 @@ const isPassedThreshold = (dragDistance, threshold) => {
 };
 /**
  * Hook for handling swipe events on the drawer.
+/**
+ * Hook for handling swipe events on the drawer.
+ *
+ * @param closingThreshold - The fraction (0-1) of the drawer's height needed to trigger open/close.
+ * @param onCloseGesture - Callback when a close gesture is detected (optional).
+ * @param onOpenGesture - Callback when an open gesture is detected (optional).
+ * @param onDragEnd - Callback when the drag/swipe gesture ends. Receives drag distance and velocity (optional).
+ * @param constrainDrag - Function to constrain/deny drag. Receives drag distance, returns boolean (optional).
  */
-const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, constrainDrag, }) => {
+const useSwipeHandlers = ({ closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, constrainDrag, }) => {
     const [isDragging, setIsDragging] = react.useState(false);
     const [dragDistance, setDragDistance] = react.useState(0);
     const currentY = react.useRef(0);
     const [currentHeight, setCurrentHeight] = react.useState(0);
-    const geometry = reactComponents.useMeasureElement(ref);
+    const { geometry, ref, element } = reactComponents.useMeasure();
     const [threshold, setThreshold] = react.useState(0);
     react.useEffect(() => {
         setThreshold(currentHeight * closingThreshold);
     }, [currentHeight, closingThreshold]);
+    const handleTouchStartOrMouseDown = react.useCallback(() => {
+        const y = getElementYTranslation(element);
+        const height = geometry?.height ?? 0;
+        currentY.current = y;
+        setCurrentHeight(height);
+        setDragDistance(y);
+        setIsDragging(true);
+    }, [element, geometry]);
+    const handleSwiping = react.useCallback((e) => {
+        const newY = currentY.current + e.deltaY;
+        if (constrainDrag && constrainDrag(e.deltaY)) {
+            return;
+        }
+        if (newY >= 0) {
+            setDragDistance(newY);
+        }
+    }, [constrainDrag]);
+    const handleSwipedDown = react.useCallback((e) => {
+        if (isPassedThreshold(e.absY, threshold) && onCloseGesture) {
+            onCloseGesture();
+        }
+        setIsDragging(false);
+        setDragDistance(0);
+    }, [threshold, onCloseGesture]);
+    const handleSwipedUp = react.useCallback((e) => {
+        if (isPassedThreshold(e.absY, threshold) && onOpenGesture) {
+            onOpenGesture();
+        }
+        setIsDragging(false);
+        setDragDistance(0);
+    }, [threshold, onOpenGesture]);
+    const handleSwiped = react.useCallback((e) => {
+        if (onDragEnd) {
+            onDragEnd(e.deltaY, e.velocity);
+        }
+    }, [onDragEnd]);
     const handlers = reactSwipeable.useSwipeable({
-        onTouchStartOrOnMouseDown: () => {
-            const y = getElementYTranslation(ref.current);
-            const height = geometry?.height ?? 0;
-            currentY.current = y;
-            setCurrentHeight(height);
-            setDragDistance(y);
-            setIsDragging(true);
-        },
-        onSwiping: (e) => {
-            const newY = currentY.current + e.deltaY;
-            if (constrainDrag && constrainDrag(e.deltaY)) {
-                return;
-            }
-            if (newY >= 0) {
-                setDragDistance(newY);
-            }
-        },
-        onSwipedDown: (e) => {
-            if (isPassedThreshold(e.absY, threshold) && onCloseGesture) {
-                onCloseGesture();
-            }
-            setIsDragging(false);
-            setDragDistance(0);
-        },
-        onSwipedUp: (e) => {
-            if (isPassedThreshold(e.absY, threshold) && onOpenGesture) {
-                onOpenGesture();
-            }
-            setIsDragging(false);
-            setDragDistance(0);
-        },
-        onSwiped: (e) => {
-            onDragEnd && onDragEnd(e.deltaY, e.velocity);
-        },
+        onTouchStartOrOnMouseDown: handleTouchStartOrMouseDown,
+        onSwiping: handleSwiping,
+        onSwipedDown: handleSwipedDown,
+        onSwipedUp: handleSwipedUp,
+        onSwiped: handleSwiped,
         trackMouse: true,
         trackTouch: true,
         preventScrollOnSwipe: true,
     });
-    return { handlers, isDragging, dragDistance };
+    return react.useMemo(() => ({ handlers, isDragging, dragDistance, ref, element }), [handlers, isDragging, dragDistance, ref, element]);
 };
 
 /**
@@ -443,8 +458,7 @@ const SwipeableDrawer = ({ open = false, onClose, onOpen, onOpenGesture, onSnapP
         setActiveSnapPoint(nextSnapPoint);
         onSnapPointChange?.(nextSnapPoint);
     }, [snapPoints, snapPointOffsets, activeSnapPointIndex, containerGeometry, onSnapPointChange]);
-    const { handlers, isDragging, dragDistance } = useSwipeHandlers({
-        ref: drawerRef,
+    const { handlers, isDragging, dragDistance, ref: swipeHandlersRef, } = useSwipeHandlers({
         closingThreshold: CLOSING_THRESHOLD,
         onCloseGesture: () => {
             if (!snapPoints) {
@@ -467,6 +481,7 @@ const SwipeableDrawer = ({ open = false, onClose, onOpen, onOpenGesture, onSnapP
             return false;
         },
     });
+    const mergedRef = reactComponents.useMergeRefs([drawerRef, swipeHandlersRef]);
     const { blockScroll, restoreScroll } = reactComponents.useScrollBlock();
     const { blockScroll: blockScrollContent, restoreScroll: restoreScrollContent } = reactComponents.useScrollBlock(document.getElementById("host-layout-content"));
     react.useEffect(() => {
@@ -548,7 +563,7 @@ const SwipeableDrawer = ({ open = false, onClose, onOpen, onOpenGesture, onSnapP
         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] }));
+    return (jsxRuntime.jsxs(Drawer, { className: cvaSwipeableDrawer({ className }), keepMountedWhenClosed: keepMountedWhenClosed, onClose: onCloseHandler, onOpen: onOpenHandler, open: open, position: position, ref: mergedRef, ...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, useScrollBlock } from '@trackunit/react-components';
-import { useEffect, useState, useRef, useCallback, useImperativeHandle, useMemo } from 'react';
+import { useViewportBreakpoints, Portal, Icon, useMeasure, useMergeRefs, useScrollBlock } from '@trackunit/react-components';
+import { useEffect, useState, useRef, useCallback, useMemo, useImperativeHandle } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { useSwipeable } from 'react-swipeable';
 
@@ -319,57 +319,72 @@ const isPassedThreshold = (dragDistance, threshold) => {
 };
 /**
  * Hook for handling swipe events on the drawer.
+/**
+ * Hook for handling swipe events on the drawer.
+ *
+ * @param closingThreshold - The fraction (0-1) of the drawer's height needed to trigger open/close.
+ * @param onCloseGesture - Callback when a close gesture is detected (optional).
+ * @param onOpenGesture - Callback when an open gesture is detected (optional).
+ * @param onDragEnd - Callback when the drag/swipe gesture ends. Receives drag distance and velocity (optional).
+ * @param constrainDrag - Function to constrain/deny drag. Receives drag distance, returns boolean (optional).
  */
-const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, constrainDrag, }) => {
+const useSwipeHandlers = ({ closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, constrainDrag, }) => {
     const [isDragging, setIsDragging] = useState(false);
     const [dragDistance, setDragDistance] = useState(0);
     const currentY = useRef(0);
     const [currentHeight, setCurrentHeight] = useState(0);
-    const geometry = useMeasureElement(ref);
+    const { geometry, ref, element } = useMeasure();
     const [threshold, setThreshold] = useState(0);
     useEffect(() => {
         setThreshold(currentHeight * closingThreshold);
     }, [currentHeight, closingThreshold]);
+    const handleTouchStartOrMouseDown = useCallback(() => {
+        const y = getElementYTranslation(element);
+        const height = geometry?.height ?? 0;
+        currentY.current = y;
+        setCurrentHeight(height);
+        setDragDistance(y);
+        setIsDragging(true);
+    }, [element, geometry]);
+    const handleSwiping = useCallback((e) => {
+        const newY = currentY.current + e.deltaY;
+        if (constrainDrag && constrainDrag(e.deltaY)) {
+            return;
+        }
+        if (newY >= 0) {
+            setDragDistance(newY);
+        }
+    }, [constrainDrag]);
+    const handleSwipedDown = useCallback((e) => {
+        if (isPassedThreshold(e.absY, threshold) && onCloseGesture) {
+            onCloseGesture();
+        }
+        setIsDragging(false);
+        setDragDistance(0);
+    }, [threshold, onCloseGesture]);
+    const handleSwipedUp = useCallback((e) => {
+        if (isPassedThreshold(e.absY, threshold) && onOpenGesture) {
+            onOpenGesture();
+        }
+        setIsDragging(false);
+        setDragDistance(0);
+    }, [threshold, onOpenGesture]);
+    const handleSwiped = useCallback((e) => {
+        if (onDragEnd) {
+            onDragEnd(e.deltaY, e.velocity);
+        }
+    }, [onDragEnd]);
     const handlers = useSwipeable({
-        onTouchStartOrOnMouseDown: () => {
-            const y = getElementYTranslation(ref.current);
-            const height = geometry?.height ?? 0;
-            currentY.current = y;
-            setCurrentHeight(height);
-            setDragDistance(y);
-            setIsDragging(true);
-        },
-        onSwiping: (e) => {
-            const newY = currentY.current + e.deltaY;
-            if (constrainDrag && constrainDrag(e.deltaY)) {
-                return;
-            }
-            if (newY >= 0) {
-                setDragDistance(newY);
-            }
-        },
-        onSwipedDown: (e) => {
-            if (isPassedThreshold(e.absY, threshold) && onCloseGesture) {
-                onCloseGesture();
-            }
-            setIsDragging(false);
-            setDragDistance(0);
-        },
-        onSwipedUp: (e) => {
-            if (isPassedThreshold(e.absY, threshold) && onOpenGesture) {
-                onOpenGesture();
-            }
-            setIsDragging(false);
-            setDragDistance(0);
-        },
-        onSwiped: (e) => {
-            onDragEnd && onDragEnd(e.deltaY, e.velocity);
-        },
+        onTouchStartOrOnMouseDown: handleTouchStartOrMouseDown,
+        onSwiping: handleSwiping,
+        onSwipedDown: handleSwipedDown,
+        onSwipedUp: handleSwipedUp,
+        onSwiped: handleSwiped,
         trackMouse: true,
         trackTouch: true,
         preventScrollOnSwipe: true,
     });
-    return { handlers, isDragging, dragDistance };
+    return useMemo(() => ({ handlers, isDragging, dragDistance, ref, element }), [handlers, isDragging, dragDistance, ref, element]);
 };
 
 /**
@@ -441,8 +456,7 @@ const SwipeableDrawer = ({ open = false, onClose, onOpen, onOpenGesture, onSnapP
         setActiveSnapPoint(nextSnapPoint);
         onSnapPointChange?.(nextSnapPoint);
     }, [snapPoints, snapPointOffsets, activeSnapPointIndex, containerGeometry, onSnapPointChange]);
-    const { handlers, isDragging, dragDistance } = useSwipeHandlers({
-        ref: drawerRef,
+    const { handlers, isDragging, dragDistance, ref: swipeHandlersRef, } = useSwipeHandlers({
         closingThreshold: CLOSING_THRESHOLD,
         onCloseGesture: () => {
             if (!snapPoints) {
@@ -465,6 +479,7 @@ const SwipeableDrawer = ({ open = false, onClose, onOpen, onOpenGesture, onSnapP
             return false;
         },
     });
+    const mergedRef = useMergeRefs([drawerRef, swipeHandlersRef]);
     const { blockScroll, restoreScroll } = useScrollBlock();
     const { blockScroll: blockScrollContent, restoreScroll: restoreScrollContent } = useScrollBlock(document.getElementById("host-layout-content"));
     useEffect(() => {
@@ -546,7 +561,7 @@ const SwipeableDrawer = ({ open = false, onClose, onOpen, onOpenGesture, onSnapP
         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] }));
+    return (jsxs(Drawer, { className: cvaSwipeableDrawer({ className }), keepMountedWhenClosed: keepMountedWhenClosed, onClose: onCloseHandler, onOpen: onOpenHandler, open: open, position: position, ref: mergedRef, ...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.103",
+  "version": "1.7.104",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,10 +9,10 @@
   "dependencies": {
     "react": "19.0.0",
     "react-swipeable": "^7.0.1",
-    "@trackunit/react-components": "1.10.42",
-    "@trackunit/css-class-variance-utilities": "1.7.72",
-    "@trackunit/ui-icons": "1.7.73",
-    "@trackunit/i18n-library-translation": "1.7.86"
+    "@trackunit/react-components": "1.10.43",
+    "@trackunit/css-class-variance-utilities": "1.7.73",
+    "@trackunit/ui-icons": "1.7.74",
+    "@trackunit/i18n-library-translation": "1.7.87"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/hooks/useSwipeHandlers.d.ts

@@ -1,6 +1,4 @@
-import { type RefObject } from "react";
 interface UseSwipeHandlersProps {
-    ref: RefObject<HTMLDivElement | null>;
     closingThreshold: number;
     onCloseGesture?: () => void;
     onOpenGesture?: () => void;
@@ -16,10 +14,20 @@ interface UseSwipeHandlersProps {
 export declare const getElementYTranslation: (element?: HTMLElement | null) => number;
 /**
  * Hook for handling swipe events on the drawer.
+/**
+ * Hook for handling swipe events on the drawer.
+ *
+ * @param closingThreshold - The fraction (0-1) of the drawer's height needed to trigger open/close.
+ * @param onCloseGesture - Callback when a close gesture is detected (optional).
+ * @param onOpenGesture - Callback when an open gesture is detected (optional).
+ * @param onDragEnd - Callback when the drag/swipe gesture ends. Receives drag distance and velocity (optional).
+ * @param constrainDrag - Function to constrain/deny drag. Receives drag distance, returns boolean (optional).
  */
-export declare const useSwipeHandlers: ({ ref, closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, constrainDrag, }: UseSwipeHandlersProps) => {
+export declare const useSwipeHandlers: ({ closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, constrainDrag, }: UseSwipeHandlersProps) => {
     handlers: import("react-swipeable").SwipeableHandlers;
     isDragging: boolean;
     dragDistance: number;
+    ref: import("react").RefCallback<HTMLDivElement>;
+    element: HTMLDivElement | null;
 };
 export {};