@trackunit/react-drawer 1.7.78 → 1.7.80

package/index.cjs.js

@@ -361,7 +361,7 @@ const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture
     const [dragDistance, setDragDistance] = react.useState(0);
     const currentY = react.useRef(0);
     const [currentHeight, setCurrentHeight] = react.useState(0);
-    const geometry = reactComponents.useGeometry(ref);
+    const geometry = reactComponents.useMeasureElement(ref);
     const [threshold, setThreshold] = react.useState(0);
     react.useEffect(() => {
         setThreshold(currentHeight * closingThreshold);
@@ -369,7 +369,7 @@ const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture
     const handlers = reactSwipeable.useSwipeable({
         onTouchStartOrOnMouseDown: () => {
             const y = getElementYTranslation(ref.current);
-            const height = geometry.height;
+            const height = geometry?.height ?? 0;
             currentY.current = y;
             setCurrentHeight(height);
             setDragDistance(y);
@@ -434,8 +434,7 @@ const SNAP_POINT_TRANSITION = "transform 500ms cubic-bezier(0.32,0.72,0,1)";
  */
 const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position = "bottom", snapPoints, activeSnapPoint: activeSnapPointProp = null, container, ref, ...others }) => {
     const drawerRef = react.useRef(null);
-    const containerRef = react.useRef(container ?? null);
-    const containerGeometry = reactComponents.useGeometry(containerRef);
+    const { geometry: containerGeometry, ref: containerMeasureRef } = reactComponents.useMeasure();
     react.useImperativeHandle(ref, () => drawerRef.current);
     const [activeSnapPoint, setActiveSnapPoint] = react.useState(activeSnapPointProp);
     const [snapPointOffsets, setSnapPointOffsets] = react.useState([]);
@@ -452,7 +451,7 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
         }
         const direction = draggedBy > 0 ? -1 : 1;
         // 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.4) {
+        if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedBy) < (containerGeometry?.height ?? 0) * 0.4) {
             const newSnapPoint = snapPoints[activeSnapPointIndex + direction] ?? null;
             if (newSnapPoint) {
                 setActiveSnapPoint(newSnapPoint);
@@ -507,7 +506,7 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
         if (!snapPoints || !drawerRef.current) {
             return;
         }
-        const containerSize = containerRef.current ? containerGeometry.height : window.innerHeight;
+        const containerSize = containerGeometry && containerGeometry.height > 0 ? containerGeometry.height : window.innerHeight;
         const newSnapPointOffsets = snapPoints.map(snapPoint => {
             // If snapPoint is a number, it is a percentage of the container size
             if (typeof snapPoint === "number") {
@@ -521,12 +520,12 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
             return 0;
         });
         setSnapPointOffsets(newSnapPointOffsets);
-    }, [snapPoints, drawerRef, containerRef, containerGeometry]);
+    }, [snapPoints, drawerRef, containerGeometry]);
     react.useEffect(() => {
         if (container) {
-            containerRef.current = container;
+            containerMeasureRef(container);
         }
-    }, [container]);
+    }, [container, containerMeasureRef]);
     react.useEffect(() => {
         if (!snapPoints || snapPoints.length === 0) {
             return;

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
-import { useViewportBreakpoints, Portal, Icon, useGeometry } from '@trackunit/react-components';
+import { useViewportBreakpoints, Portal, Icon, useMeasureElement, useMeasure } from '@trackunit/react-components';
 import { useEffect, useState, useCallback, useRef, useImperativeHandle, useMemo } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { useSwipeable } from 'react-swipeable';
@@ -359,7 +359,7 @@ const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture
     const [dragDistance, setDragDistance] = useState(0);
     const currentY = useRef(0);
     const [currentHeight, setCurrentHeight] = useState(0);
-    const geometry = useGeometry(ref);
+    const geometry = useMeasureElement(ref);
     const [threshold, setThreshold] = useState(0);
     useEffect(() => {
         setThreshold(currentHeight * closingThreshold);
@@ -367,7 +367,7 @@ const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture
     const handlers = useSwipeable({
         onTouchStartOrOnMouseDown: () => {
             const y = getElementYTranslation(ref.current);
-            const height = geometry.height;
+            const height = geometry?.height ?? 0;
             currentY.current = y;
             setCurrentHeight(height);
             setDragDistance(y);
@@ -432,8 +432,7 @@ const SNAP_POINT_TRANSITION = "transform 500ms cubic-bezier(0.32,0.72,0,1)";
  */
 const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position = "bottom", snapPoints, activeSnapPoint: activeSnapPointProp = null, container, ref, ...others }) => {
     const drawerRef = useRef(null);
-    const containerRef = useRef(container ?? null);
-    const containerGeometry = useGeometry(containerRef);
+    const { geometry: containerGeometry, ref: containerMeasureRef } = useMeasure();
     useImperativeHandle(ref, () => drawerRef.current);
     const [activeSnapPoint, setActiveSnapPoint] = useState(activeSnapPointProp);
     const [snapPointOffsets, setSnapPointOffsets] = useState([]);
@@ -450,7 +449,7 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
         }
         const direction = draggedBy > 0 ? -1 : 1;
         // 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.4) {
+        if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedBy) < (containerGeometry?.height ?? 0) * 0.4) {
             const newSnapPoint = snapPoints[activeSnapPointIndex + direction] ?? null;
             if (newSnapPoint) {
                 setActiveSnapPoint(newSnapPoint);
@@ -505,7 +504,7 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
         if (!snapPoints || !drawerRef.current) {
             return;
         }
-        const containerSize = containerRef.current ? containerGeometry.height : window.innerHeight;
+        const containerSize = containerGeometry && containerGeometry.height > 0 ? containerGeometry.height : window.innerHeight;
         const newSnapPointOffsets = snapPoints.map(snapPoint => {
             // If snapPoint is a number, it is a percentage of the container size
             if (typeof snapPoint === "number") {
@@ -519,12 +518,12 @@ const SwipeableDrawer = ({ open, onClose, onOpenGesture, onSnapPointChange, chil
             return 0;
         });
         setSnapPointOffsets(newSnapPointOffsets);
-    }, [snapPoints, drawerRef, containerRef, containerGeometry]);
+    }, [snapPoints, drawerRef, containerGeometry]);
     useEffect(() => {
         if (container) {
-            containerRef.current = container;
+            containerMeasureRef(container);
         }
-    }, [container]);
+    }, [container, containerMeasureRef]);
     useEffect(() => {
         if (!snapPoints || snapPoints.length === 0) {
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-drawer",
-  "version": "1.7.78",
+  "version": "1.7.80",
   "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.18",
-    "@trackunit/css-class-variance-utilities": "1.7.50",
-    "@trackunit/ui-icons": "1.7.51",
-    "@trackunit/i18n-library-translation": "1.7.62",
-    "@trackunit/react-test-setup": "1.4.50"
+    "@trackunit/react-components": "1.10.20",
+    "@trackunit/css-class-variance-utilities": "1.7.52",
+    "@trackunit/ui-icons": "1.7.53",
+    "@trackunit/i18n-library-translation": "1.7.64",
+    "@trackunit/react-test-setup": "1.4.52"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",