@trackunit/react-drawer 0.1.31 → 0.2.0

package/index.cjs.js

@@ -98,7 +98,7 @@ const cvaOverlayContainer = cssClassVarianceUtilities.cvaMerge([
     variants: {
         open: {
             true: "z-popover opacity-100",
-            false: "z-[-1] opacity-0",
+            false: "z-hidden pointer-events-none opacity-0",
         },
     },
 });
@@ -336,15 +336,19 @@ const getElementYTranslation = (element) => {
     const matrix = new DOMMatrix(transform);
     return matrix.m42;
 };
+const isPassedThreshold = (dragDistance, threshold) => {
+    return dragDistance >= threshold;
+};
 /**
  * Hook for handling swipe events on the drawer.
  */
-const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture }) => {
+const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, }) => {
     const [isDragging, setIsDragging] = react.useState(false);
     const [dragDistance, setDragDistance] = react.useState(0);
     const currentY = react.useRef(0);
     const currentHeight = react.useRef(0);
     const geometry = reactComponents.useGeometry(ref);
+    const threshold = currentHeight.current * closingThreshold;
     const handlers = reactSwipeable.useSwipeable({
         onTouchStartOrOnMouseDown: () => {
             const y = getElementYTranslation(ref.current);
@@ -361,22 +365,22 @@ const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture
             }
         },
         onSwipedDown: (e) => {
-            const threshold = currentHeight.current * closingThreshold;
-            if (e.absY > threshold && onCloseGesture) {
+            if (isPassedThreshold(e.absY, threshold) && onCloseGesture) {
                 onCloseGesture();
             }
             setIsDragging(false);
             setDragDistance(0);
         },
         onSwipedUp: (e) => {
-            const threshold = currentHeight.current * closingThreshold;
-            if (e.absY > threshold && onOpenGesture) {
+            if (isPassedThreshold(e.absY, threshold) && onOpenGesture) {
                 onOpenGesture();
             }
             setIsDragging(false);
             setDragDistance(0);
         },
-        onSwiped: () => void 0,
+        onSwiped: (e) => {
+            onDragEnd && onDragEnd(e.deltaY, e.velocity);
+        },
         trackMouse: true,
         trackTouch: true,
         preventScrollOnSwipe: true,
@@ -400,6 +404,8 @@ const cvaPuller = cssClassVarianceUtilities.cvaMerge(["pt-1", "pb-4", "flex", "i
 const cvaPullerIcon = cssClassVarianceUtilities.cvaMerge(["block", "h-1", "w-8", "rounded-full", "bg-gray-400"]);
 
 const CLOSING_THRESHOLD = 0.15;
+const VELOCITY_THRESHOLD = 0.3;
+const SNAP_POINT_TRANSITION = "transform 500ms cubic-bezier(0.32,0.72,0,1)";
 /**
  *
  * SwipeableDrawer is a component that wraps the Drawer component to add swipeable functionality.
@@ -407,52 +413,133 @@ const CLOSING_THRESHOLD = 0.15;
  * 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 = react.forwardRef(({ open, onClose, onOpenGesture, children, keepMountedWhenClosed, className, position = "bottom", ...others }, ref) => {
-    const drawerRefs = react.useRef(null);
-    react.useImperativeHandle(ref, () => drawerRefs.current);
-    const [isDocked, setIsDocked] = react.useState(keepMountedWhenClosed && !open);
+const SwipeableDrawer = react.forwardRef(({ open, onClose, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position = "bottom", snapPoints, activeSnapPoint: activeSnapPointProp = null, container, ...others }, ref) => {
+    const drawerRef = react.useRef(null);
+    const containerRef = react.useRef(container !== null && container !== void 0 ? container : null);
+    const containerGeometry = reactComponents.useGeometry(containerRef);
+    react.useImperativeHandle(ref, () => drawerRef.current);
+    const [activeSnapPoint, setActiveSnapPoint] = react.useState(activeSnapPointProp);
+    const [snapPointOffsets, setSnapPointOffsets] = react.useState([]);
+    const activeSnapPointIndex = react.useMemo(() => { var _a; return (_a = snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.findIndex(snapPoint => snapPoint === activeSnapPoint)) !== null && _a !== void 0 ? _a : -1; }, [snapPoints, activeSnapPoint]);
+    const onHandleDragEnd = react.useCallback((draggedBy, velocity) => {
+        var _a, _b, _c;
+        if (!snapPoints || !snapPoints.length) {
+            return;
+        }
+        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) {
+            const newSnapPoint = (_a = snapPoints[activeSnapPointIndex + direction]) !== null && _a !== void 0 ? _a : null;
+            if (newSnapPoint) {
+                setActiveSnapPoint(newSnapPoint);
+                onSnapPointChange === null || onSnapPointChange === void 0 ? void 0 : onSnapPointChange(newSnapPoint);
+            }
+            return;
+        }
+        // Otherwise, find the closest snap point
+        // This is when the user is dragging but not swiping.
+        // For example, when the user is dragging the drawer to the bottom but not fast enough to trigger a swipe.
+        const currentPosition = ((_b = snapPointOffsets[activeSnapPointIndex]) !== null && _b !== void 0 ? _b : 0) + draggedBy;
+        const closestSnapPoint = snapPointOffsets.reduce((prev, curr) => {
+            if (typeof prev !== "number" || typeof curr !== "number") {
+                return prev;
+            }
+            return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
+        });
+        const snapPointIndex = snapPointOffsets.findIndex(offset => offset === closestSnapPoint);
+        const nextSnapPoint = (_c = snapPoints[snapPointIndex]) !== null && _c !== void 0 ? _c : null;
+        if (!nextSnapPoint) {
+            return;
+        }
+        setActiveSnapPoint(nextSnapPoint);
+        onSnapPointChange === null || onSnapPointChange === void 0 ? void 0 : onSnapPointChange(nextSnapPoint);
+    }, [snapPoints, snapPointOffsets, activeSnapPointIndex, containerGeometry, onSnapPointChange]);
     const { handlers, isDragging, dragDistance } = useSwipeHandlers({
-        ref: drawerRefs,
+        ref: drawerRef,
         closingThreshold: CLOSING_THRESHOLD,
-        onCloseGesture: onClose,
-        onOpenGesture,
+        onCloseGesture: () => {
+            if (!snapPoints) {
+                onClose && onClose();
+            }
+        },
+        onOpenGesture: () => {
+            if (!snapPoints) {
+                onOpenGesture && onOpenGesture();
+            }
+        },
+        onDragEnd: onHandleDragEnd,
     });
     useScrollBlock({ isDisabled: !open || isDragging });
-    const drawerStyle = react.useMemo(() => isDragging
-        ? {
-            transform: `translateY(${dragDistance}px)`,
-            transition: "none",
+    react.useEffect(() => {
+        if (!snapPoints || !drawerRef.current) {
+            return;
         }
-        : {}, [isDragging, dragDistance]);
+        const containerSize = containerRef.current ? 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") {
+                const height = Math.floor(containerSize * snapPoint);
+                return containerSize - height;
+            }
+            // If snapPoint is a string, it is a pixel value
+            if (snapPoint.endsWith("px")) {
+                return containerSize - parseInt(snapPoint.slice(0, -1), 10);
+            }
+            return 0;
+        });
+        setSnapPointOffsets(newSnapPointOffsets);
+    }, [snapPoints, drawerRef, containerRef, containerGeometry]);
+    react.useEffect(() => {
+        if (container) {
+            containerRef.current = container;
+        }
+    }, [container]);
     react.useEffect(() => {
-        if (!keepMountedWhenClosed) {
+        var _a;
+        if (!snapPoints || snapPoints.length === 0) {
             return;
         }
-        if (isDocked && open) {
-            setIsDocked(false);
+        const snapPointIndex = snapPoints.findIndex(offset => offset === activeSnapPointProp);
+        const nextSnapPoint = (_a = snapPoints[snapPointIndex > -1 ? snapPointIndex : 0]) !== null && _a !== void 0 ? _a : null;
+        if (!nextSnapPoint) {
+            return;
+        }
+        setActiveSnapPoint(nextSnapPoint);
+        onSnapPointChange === null || onSnapPointChange === void 0 ? void 0 : onSnapPointChange(nextSnapPoint);
+    }, [snapPoints, activeSnapPointProp, onSnapPointChange]);
+    const drawerStyle = react.useMemo(() => {
+        if (isDragging) {
+            return {
+                transform: `translateY(${dragDistance}px)`,
+                transition: "none",
+            };
         }
-        else if (!isDocked && !open) {
-            setIsDocked(true);
+        if (snapPoints && snapPointOffsets.length > 0 && activeSnapPointIndex !== -1) {
+            return {
+                transform: `translateY(${snapPointOffsets[activeSnapPointIndex]}px)`,
+                transition: SNAP_POINT_TRANSITION,
+            };
         }
-    }, [open, isDocked, keepMountedWhenClosed]);
+        return {};
+    }, [isDragging, dragDistance, snapPointOffsets, activeSnapPointIndex, snapPoints]);
     react.useEffect(() => {
         var _a, _b;
-        if (drawerRefs.current) {
-            drawerRefs.current.style.transform = (_a = drawerStyle.transform) !== null && _a !== void 0 ? _a : "";
-            drawerRefs.current.style.transition = (_b = drawerStyle.transition) !== null && _b !== void 0 ? _b : "";
+        if (!drawerRef.current) {
+            return;
         }
-    }, [drawerStyle, drawerRefs]);
-    return (jsxRuntime.jsxs(Drawer, { className: cvaSwipeableDrawer({ docked: isDocked, className }), "data-docked": isDocked, keepMountedWhenClosed: keepMountedWhenClosed, onClose: onClose, open: open, position: position, ref: drawerRefs, ...others, children: [jsxRuntime.jsx(DrawerPuller, { ...handlers }), children] }));
+        if (open) {
+            drawerRef.current.style.transform = (_a = drawerStyle.transform) !== null && _a !== void 0 ? _a : "";
+            drawerRef.current.style.transition = (_b = drawerStyle.transition) !== null && _b !== void 0 ? _b : "";
+        }
+        else {
+            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] }));
 });
 SwipeableDrawer.displayName = "SwipeableDrawer";
-const cvaSwipeableDrawer = cssClassVarianceUtilities.cvaMerge([], {
-    variants: {
-        docked: {
-            true: "translate-y-[calc(100%-30px)]",
-            false: "",
-        },
-    },
-});
+const cvaSwipeableDrawer = cssClassVarianceUtilities.cvaMerge([]);
 
 /*
  * ----------------------------

package/index.esm.js

@@ -96,7 +96,7 @@ const cvaOverlayContainer = cvaMerge([
     variants: {
         open: {
             true: "z-popover opacity-100",
-            false: "z-[-1] opacity-0",
+            false: "z-hidden pointer-events-none opacity-0",
         },
     },
 });
@@ -334,15 +334,19 @@ const getElementYTranslation = (element) => {
     const matrix = new DOMMatrix(transform);
     return matrix.m42;
 };
+const isPassedThreshold = (dragDistance, threshold) => {
+    return dragDistance >= threshold;
+};
 /**
  * Hook for handling swipe events on the drawer.
  */
-const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture }) => {
+const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, }) => {
     const [isDragging, setIsDragging] = useState(false);
     const [dragDistance, setDragDistance] = useState(0);
     const currentY = useRef(0);
     const currentHeight = useRef(0);
     const geometry = useGeometry(ref);
+    const threshold = currentHeight.current * closingThreshold;
     const handlers = useSwipeable({
         onTouchStartOrOnMouseDown: () => {
             const y = getElementYTranslation(ref.current);
@@ -359,22 +363,22 @@ const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture
             }
         },
         onSwipedDown: (e) => {
-            const threshold = currentHeight.current * closingThreshold;
-            if (e.absY > threshold && onCloseGesture) {
+            if (isPassedThreshold(e.absY, threshold) && onCloseGesture) {
                 onCloseGesture();
             }
             setIsDragging(false);
             setDragDistance(0);
         },
         onSwipedUp: (e) => {
-            const threshold = currentHeight.current * closingThreshold;
-            if (e.absY > threshold && onOpenGesture) {
+            if (isPassedThreshold(e.absY, threshold) && onOpenGesture) {
                 onOpenGesture();
             }
             setIsDragging(false);
             setDragDistance(0);
         },
-        onSwiped: () => void 0,
+        onSwiped: (e) => {
+            onDragEnd && onDragEnd(e.deltaY, e.velocity);
+        },
         trackMouse: true,
         trackTouch: true,
         preventScrollOnSwipe: true,
@@ -398,6 +402,8 @@ const cvaPuller = cvaMerge(["pt-1", "pb-4", "flex", "items-center", "justify-cen
 const cvaPullerIcon = cvaMerge(["block", "h-1", "w-8", "rounded-full", "bg-gray-400"]);
 
 const CLOSING_THRESHOLD = 0.15;
+const VELOCITY_THRESHOLD = 0.3;
+const SNAP_POINT_TRANSITION = "transform 500ms cubic-bezier(0.32,0.72,0,1)";
 /**
  *
  * SwipeableDrawer is a component that wraps the Drawer component to add swipeable functionality.
@@ -405,52 +411,133 @@ const CLOSING_THRESHOLD = 0.15;
  * 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 = forwardRef(({ open, onClose, onOpenGesture, children, keepMountedWhenClosed, className, position = "bottom", ...others }, ref) => {
-    const drawerRefs = useRef(null);
-    useImperativeHandle(ref, () => drawerRefs.current);
-    const [isDocked, setIsDocked] = useState(keepMountedWhenClosed && !open);
+const SwipeableDrawer = forwardRef(({ open, onClose, onOpenGesture, onSnapPointChange, children, keepMountedWhenClosed, className, position = "bottom", snapPoints, activeSnapPoint: activeSnapPointProp = null, container, ...others }, ref) => {
+    const drawerRef = useRef(null);
+    const containerRef = useRef(container !== null && container !== void 0 ? container : null);
+    const containerGeometry = useGeometry(containerRef);
+    useImperativeHandle(ref, () => drawerRef.current);
+    const [activeSnapPoint, setActiveSnapPoint] = useState(activeSnapPointProp);
+    const [snapPointOffsets, setSnapPointOffsets] = useState([]);
+    const activeSnapPointIndex = useMemo(() => { var _a; return (_a = snapPoints === null || snapPoints === void 0 ? void 0 : snapPoints.findIndex(snapPoint => snapPoint === activeSnapPoint)) !== null && _a !== void 0 ? _a : -1; }, [snapPoints, activeSnapPoint]);
+    const onHandleDragEnd = useCallback((draggedBy, velocity) => {
+        var _a, _b, _c;
+        if (!snapPoints || !snapPoints.length) {
+            return;
+        }
+        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) {
+            const newSnapPoint = (_a = snapPoints[activeSnapPointIndex + direction]) !== null && _a !== void 0 ? _a : null;
+            if (newSnapPoint) {
+                setActiveSnapPoint(newSnapPoint);
+                onSnapPointChange === null || onSnapPointChange === void 0 ? void 0 : onSnapPointChange(newSnapPoint);
+            }
+            return;
+        }
+        // Otherwise, find the closest snap point
+        // This is when the user is dragging but not swiping.
+        // For example, when the user is dragging the drawer to the bottom but not fast enough to trigger a swipe.
+        const currentPosition = ((_b = snapPointOffsets[activeSnapPointIndex]) !== null && _b !== void 0 ? _b : 0) + draggedBy;
+        const closestSnapPoint = snapPointOffsets.reduce((prev, curr) => {
+            if (typeof prev !== "number" || typeof curr !== "number") {
+                return prev;
+            }
+            return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
+        });
+        const snapPointIndex = snapPointOffsets.findIndex(offset => offset === closestSnapPoint);
+        const nextSnapPoint = (_c = snapPoints[snapPointIndex]) !== null && _c !== void 0 ? _c : null;
+        if (!nextSnapPoint) {
+            return;
+        }
+        setActiveSnapPoint(nextSnapPoint);
+        onSnapPointChange === null || onSnapPointChange === void 0 ? void 0 : onSnapPointChange(nextSnapPoint);
+    }, [snapPoints, snapPointOffsets, activeSnapPointIndex, containerGeometry, onSnapPointChange]);
     const { handlers, isDragging, dragDistance } = useSwipeHandlers({
-        ref: drawerRefs,
+        ref: drawerRef,
         closingThreshold: CLOSING_THRESHOLD,
-        onCloseGesture: onClose,
-        onOpenGesture,
+        onCloseGesture: () => {
+            if (!snapPoints) {
+                onClose && onClose();
+            }
+        },
+        onOpenGesture: () => {
+            if (!snapPoints) {
+                onOpenGesture && onOpenGesture();
+            }
+        },
+        onDragEnd: onHandleDragEnd,
     });
     useScrollBlock({ isDisabled: !open || isDragging });
-    const drawerStyle = useMemo(() => isDragging
-        ? {
-            transform: `translateY(${dragDistance}px)`,
-            transition: "none",
+    useEffect(() => {
+        if (!snapPoints || !drawerRef.current) {
+            return;
         }
-        : {}, [isDragging, dragDistance]);
+        const containerSize = containerRef.current ? 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") {
+                const height = Math.floor(containerSize * snapPoint);
+                return containerSize - height;
+            }
+            // If snapPoint is a string, it is a pixel value
+            if (snapPoint.endsWith("px")) {
+                return containerSize - parseInt(snapPoint.slice(0, -1), 10);
+            }
+            return 0;
+        });
+        setSnapPointOffsets(newSnapPointOffsets);
+    }, [snapPoints, drawerRef, containerRef, containerGeometry]);
+    useEffect(() => {
+        if (container) {
+            containerRef.current = container;
+        }
+    }, [container]);
     useEffect(() => {
-        if (!keepMountedWhenClosed) {
+        var _a;
+        if (!snapPoints || snapPoints.length === 0) {
             return;
         }
-        if (isDocked && open) {
-            setIsDocked(false);
+        const snapPointIndex = snapPoints.findIndex(offset => offset === activeSnapPointProp);
+        const nextSnapPoint = (_a = snapPoints[snapPointIndex > -1 ? snapPointIndex : 0]) !== null && _a !== void 0 ? _a : null;
+        if (!nextSnapPoint) {
+            return;
+        }
+        setActiveSnapPoint(nextSnapPoint);
+        onSnapPointChange === null || onSnapPointChange === void 0 ? void 0 : onSnapPointChange(nextSnapPoint);
+    }, [snapPoints, activeSnapPointProp, onSnapPointChange]);
+    const drawerStyle = useMemo(() => {
+        if (isDragging) {
+            return {
+                transform: `translateY(${dragDistance}px)`,
+                transition: "none",
+            };
         }
-        else if (!isDocked && !open) {
-            setIsDocked(true);
+        if (snapPoints && snapPointOffsets.length > 0 && activeSnapPointIndex !== -1) {
+            return {
+                transform: `translateY(${snapPointOffsets[activeSnapPointIndex]}px)`,
+                transition: SNAP_POINT_TRANSITION,
+            };
         }
-    }, [open, isDocked, keepMountedWhenClosed]);
+        return {};
+    }, [isDragging, dragDistance, snapPointOffsets, activeSnapPointIndex, snapPoints]);
     useEffect(() => {
         var _a, _b;
-        if (drawerRefs.current) {
-            drawerRefs.current.style.transform = (_a = drawerStyle.transform) !== null && _a !== void 0 ? _a : "";
-            drawerRefs.current.style.transition = (_b = drawerStyle.transition) !== null && _b !== void 0 ? _b : "";
+        if (!drawerRef.current) {
+            return;
         }
-    }, [drawerStyle, drawerRefs]);
-    return (jsxs(Drawer, { className: cvaSwipeableDrawer({ docked: isDocked, className }), "data-docked": isDocked, keepMountedWhenClosed: keepMountedWhenClosed, onClose: onClose, open: open, position: position, ref: drawerRefs, ...others, children: [jsx(DrawerPuller, { ...handlers }), children] }));
+        if (open) {
+            drawerRef.current.style.transform = (_a = drawerStyle.transform) !== null && _a !== void 0 ? _a : "";
+            drawerRef.current.style.transition = (_b = drawerStyle.transition) !== null && _b !== void 0 ? _b : "";
+        }
+        else {
+            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] }));
 });
 SwipeableDrawer.displayName = "SwipeableDrawer";
-const cvaSwipeableDrawer = cvaMerge([], {
-    variants: {
-        docked: {
-            true: "translate-y-[calc(100%-30px)]",
-            false: "",
-        },
-    },
-});
+const cvaSwipeableDrawer = cvaMerge([]);
 
 /*
  * ----------------------------

package/package.json

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

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

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { SwipeableDrawer } from "../SwipeableDrawer/SwipeableDrawer";
 import { Drawer } from "./Drawer";
-type Story = StoryObj<typeof Drawer>;
+type Story = StoryObj<typeof Drawer | typeof SwipeableDrawer>;
 declare const meta: Meta<typeof Drawer>;
 export default meta;
 export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
@@ -9,4 +10,5 @@ export declare const InPortal: Story;
 export declare const Toggleable: Story;
 export declare const WithoutOverlay: Story;
 export declare const Swipeable: Story;
-export declare const SwipeableDocked: Story;
+export declare const SwipeableWithSnapPoints: Story;
+export declare const SwipeableWithSnapPointsWithoutContainer: Story;

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

@@ -1,6 +1,10 @@
 import { type DrawerProps } from "../Drawer/Drawer";
 export interface SwipeableDrawerProps extends DrawerProps {
     onOpenGesture?: () => void;
+    onSnapPointChange?: (snapPoint: number | string) => void;
+    snapPoints?: (number | string)[];
+    activeSnapPoint?: number | string | null;
+    container?: HTMLElement | null;
 }
 /**
  *
@@ -10,6 +14,4 @@ export interface SwipeableDrawerProps extends DrawerProps {
  * It also applies styles dynamically based on whether the drawer is being dragged.
  */
 export declare const SwipeableDrawer: import("react").ForwardRefExoticComponent<SwipeableDrawerProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const cvaSwipeableDrawer: (props?: ({
-    docked?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaSwipeableDrawer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/hooks/useSwipeHandlers.d.ts

@@ -4,6 +4,7 @@ interface UseSwipeHandlersProps {
     closingThreshold: number;
     onCloseGesture?: () => void;
     onOpenGesture?: () => void;
+    onDragEnd?: (dragDistance: number, velocity: number) => void;
 }
 /**
  * Retrieves the Y-axis translation value of a given HTML element.
@@ -15,7 +16,7 @@ export declare const getElementYTranslation: (element?: HTMLElement | null) => n
 /**
  * Hook for handling swipe events on the drawer.
  */
-export declare const useSwipeHandlers: ({ ref, closingThreshold, onCloseGesture, onOpenGesture }: UseSwipeHandlersProps) => {
+export declare const useSwipeHandlers: ({ ref, closingThreshold, onCloseGesture, onOpenGesture, onDragEnd, }: UseSwipeHandlersProps) => {
     handlers: import("react-swipeable").SwipeableHandlers;
     isDragging: boolean;
     dragDistance: number;