@trackunit/react-drawer 1.21.0 → 1.21.2

package/index.cjs.js

@@ -5,7 +5,6 @@ var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var reactComponents = require('@trackunit/react-components');
 var react = require('react');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
-var reactSwipeable = require('react-swipeable');
 
 var defaultTranslations = {
 	
@@ -362,276 +361,6 @@ const cvaToggleContainer = cssClassVarianceUtilities.cvaMerge(["z-8", "absolute"
     },
 });
 
-/**
- * Retrieves the Y-axis translation value of a given HTML element.
- *
- * @param element - The HTML element for which to get the Y translation. If not provided or null, returns 0.
- * @returns {number} - The Y translation value of the element. Returns 0 if the element is not provided or if the transform style is "none".
- */
-const getElementYTranslation = (element) => {
-    if (!element) {
-        return 0;
-    }
-    const style = window.getComputedStyle(element);
-    const transform = style.transform;
-    if (transform === "none") {
-        return 0;
-    }
-    const matrix = new DOMMatrix(transform);
-    return matrix.m42;
-};
-const isPassedThreshold = (dragDistance, threshold) => {
-    return dragDistance >= threshold;
-};
-/**
- * Hook for handling swipe events on the drawer.
- *
- * @param options - The hook options.
- * @param options.closingThreshold - The fraction (0-1) of the drawer's height needed to trigger open/close.
- * @param options.onCloseGesture - Callback when a close gesture is detected (optional).
- * @param options.onOpenGesture - Callback when an open gesture is detected (optional).
- * @param options.onDragEnd - Callback when the drag/swipe gesture ends. Receives drag distance and velocity (optional).
- * @param options.constrainDrag - Function to constrain/deny drag. Receives drag distance, returns boolean (optional).
- */
-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, 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: handleTouchStartOrMouseDown,
-        onSwiping: handleSwiping,
-        onSwipedDown: handleSwipedDown,
-        onSwipedUp: handleSwipedUp,
-        onSwiped: handleSwiped,
-        trackMouse: true,
-        trackTouch: true,
-        preventScrollOnSwipe: true,
-    });
-    return react.useMemo(() => ({ handlers, isDragging, dragDistance, ref, element }), [handlers, isDragging, dragDistance, ref, element]);
-};
-
-/**
- * DrawerPuller is a React component that renders a puller element for a swipeable drawer.
- *
- * @param props - The props for the DrawerPuller component.
- * @param props.className - Additional class names to apply to the puller element.
- * @param props.ref - The ref to be forwarded to the root div element.
- * @returns {ReactElement} The drawer puller element.
- */
-const DrawerPuller = ({ className, ref, ...props }) => {
-    return (jsxRuntime.jsx("div", { className: cvaPuller({ className }), "data-testid": "drawer-puller", ...props, ref: ref, children: jsxRuntime.jsx("div", { className: cvaPullerIcon() }) }));
-};
-DrawerPuller.displayName = "DrawerPuller";
-const cvaPuller = cssClassVarianceUtilities.cvaMerge(["pt-1", "pb-4", "flex", "items-center", "justify-center"]);
-const cvaPullerIcon = cssClassVarianceUtilities.cvaMerge(["block", "h-1", "w-8", "rounded-full", "bg-neutral-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.
- * It uses swipe handlers to detect swipe gestures for opening and closing the drawer.
- * 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 = 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);
-    const [activeSnapPoint, setActiveSnapPoint] = react.useState(activeSnapPointProp);
-    const [snapPointOffsets, setSnapPointOffsets] = react.useState([]);
-    const isLastSnapPoint = react.useMemo(() => {
-        return activeSnapPoint === snapPoints?.[snapPoints.length - 1];
-    }, [activeSnapPoint, snapPoints]);
-    const isFirstSnapPoint = react.useMemo(() => {
-        return activeSnapPoint === snapPoints?.[0];
-    }, [activeSnapPoint, snapPoints]);
-    const activeSnapPointIndex = react.useMemo(() => snapPoints?.findIndex(snapPoint => snapPoint === activeSnapPoint) ?? -1, [snapPoints, activeSnapPoint]);
-    const onHandleDragEnd = react.useCallback((draggedBy, velocity) => {
-        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) * 0.4) {
-            const newSnapPoint = snapPoints[activeSnapPointIndex + direction] ?? null;
-            if (newSnapPoint !== null) {
-                setActiveSnapPoint(newSnapPoint);
-                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 = (snapPointOffsets[activeSnapPointIndex] ?? 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 = snapPoints[snapPointIndex] ?? null;
-        if (nextSnapPoint === null) {
-            return;
-        }
-        setActiveSnapPoint(nextSnapPoint);
-        onSnapPointChange?.(nextSnapPoint);
-    }, [snapPoints, snapPointOffsets, activeSnapPointIndex, containerGeometry, onSnapPointChange]);
-    const { handlers, isDragging, dragDistance, ref: swipeHandlersRef, } = useSwipeHandlers({
-        closingThreshold: CLOSING_THRESHOLD,
-        onCloseGesture: () => {
-            if (!snapPoints) {
-                onClose?.();
-            }
-        },
-        onOpenGesture: () => {
-            if (!snapPoints) {
-                onOpenGesture?.();
-            }
-        },
-        onDragEnd: onHandleDragEnd,
-        constrainDrag: (y) => {
-            if (isLastSnapPoint) {
-                return y <= 0;
-            }
-            if (isFirstSnapPoint) {
-                return y >= 0;
-            }
-            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(() => {
-        if (!snapPoints || !drawerRef.current) {
-            return;
-        }
-        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") {
-                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, containerGeometry]);
-    react.useEffect(() => {
-        if (container) {
-            containerMeasureRef(container);
-        }
-    }, [container, containerMeasureRef]);
-    react.useEffect(() => {
-        if (!snapPoints || snapPoints.length === 0) {
-            return;
-        }
-        const snapPointIndex = snapPoints.findIndex(offset => offset === activeSnapPointProp);
-        const nextSnapPoint = snapPoints[snapPointIndex > -1 ? snapPointIndex : 0] ?? null;
-        if (nextSnapPoint === null) {
-            return;
-        }
-        setActiveSnapPoint(nextSnapPoint);
-        onSnapPointChange?.(nextSnapPoint);
-    }, [snapPoints, activeSnapPointProp, onSnapPointChange]);
-    const drawerStyle = react.useMemo(() => {
-        if (isDragging) {
-            return {
-                transform: `translateY(${dragDistance}px)`,
-                transition: "none",
-            };
-        }
-        if (snapPoints && snapPointOffsets.length > 0 && activeSnapPointIndex !== -1) {
-            return {
-                transform: `translateY(${snapPointOffsets[activeSnapPointIndex]}px)`,
-                transition: SNAP_POINT_TRANSITION,
-            };
-        }
-        return {};
-    }, [isDragging, dragDistance, snapPointOffsets, activeSnapPointIndex, snapPoints]);
-    const applyDrawerStyles = react.useCallback(() => {
-        if (!drawerRef.current) {
-            return;
-        }
-        if (open) {
-            drawerRef.current.style.transform = drawerStyle.transform ?? "";
-            drawerRef.current.style.transition = drawerStyle.transition ?? "";
-        }
-        else {
-            drawerRef.current.style.transform = "";
-            drawerRef.current.style.transition = "";
-        }
-    }, [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: mergedRef, ...others, children: [jsxRuntime.jsx(DrawerPuller, { ...handlers }), children] }));
-};
-SwipeableDrawer.displayName = "SwipeableDrawer";
-const cvaSwipeableDrawer = cssClassVarianceUtilities.cvaMerge([]);
-
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -643,6 +372,4 @@ setupLibraryTranslations();
 
 exports.Drawer = Drawer;
 exports.DrawerToggle = DrawerToggle;
-exports.SwipeableDrawer = SwipeableDrawer;
 exports.TRANSITION_DURATION = TRANSITION_DURATION;
-exports.cvaSwipeableDrawer = cvaSwipeableDrawer;

package/index.esm.js

@@ -1,9 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
-import { useViewportBreakpoints, Portal, Icon, useMeasure, useMergeRefs, useScrollBlock } from '@trackunit/react-components';
-import { useEffect, useReducer, useRef, useCallback, useState, useMemo, useImperativeHandle } from 'react';
+import { useViewportBreakpoints, Portal, Icon } from '@trackunit/react-components';
+import { useEffect, useReducer, useRef, useCallback } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { useSwipeable } from 'react-swipeable';
 
 var defaultTranslations = {
 	
@@ -360,276 +359,6 @@ const cvaToggleContainer = cvaMerge(["z-8", "absolute"], {
     },
 });
 
-/**
- * Retrieves the Y-axis translation value of a given HTML element.
- *
- * @param element - The HTML element for which to get the Y translation. If not provided or null, returns 0.
- * @returns {number} - The Y translation value of the element. Returns 0 if the element is not provided or if the transform style is "none".
- */
-const getElementYTranslation = (element) => {
-    if (!element) {
-        return 0;
-    }
-    const style = window.getComputedStyle(element);
-    const transform = style.transform;
-    if (transform === "none") {
-        return 0;
-    }
-    const matrix = new DOMMatrix(transform);
-    return matrix.m42;
-};
-const isPassedThreshold = (dragDistance, threshold) => {
-    return dragDistance >= threshold;
-};
-/**
- * Hook for handling swipe events on the drawer.
- *
- * @param options - The hook options.
- * @param options.closingThreshold - The fraction (0-1) of the drawer's height needed to trigger open/close.
- * @param options.onCloseGesture - Callback when a close gesture is detected (optional).
- * @param options.onOpenGesture - Callback when an open gesture is detected (optional).
- * @param options.onDragEnd - Callback when the drag/swipe gesture ends. Receives drag distance and velocity (optional).
- * @param options.constrainDrag - Function to constrain/deny drag. Receives drag distance, returns boolean (optional).
- */
-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, 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: handleTouchStartOrMouseDown,
-        onSwiping: handleSwiping,
-        onSwipedDown: handleSwipedDown,
-        onSwipedUp: handleSwipedUp,
-        onSwiped: handleSwiped,
-        trackMouse: true,
-        trackTouch: true,
-        preventScrollOnSwipe: true,
-    });
-    return useMemo(() => ({ handlers, isDragging, dragDistance, ref, element }), [handlers, isDragging, dragDistance, ref, element]);
-};
-
-/**
- * DrawerPuller is a React component that renders a puller element for a swipeable drawer.
- *
- * @param props - The props for the DrawerPuller component.
- * @param props.className - Additional class names to apply to the puller element.
- * @param props.ref - The ref to be forwarded to the root div element.
- * @returns {ReactElement} The drawer puller element.
- */
-const DrawerPuller = ({ className, ref, ...props }) => {
-    return (jsx("div", { className: cvaPuller({ className }), "data-testid": "drawer-puller", ...props, ref: ref, children: jsx("div", { className: cvaPullerIcon() }) }));
-};
-DrawerPuller.displayName = "DrawerPuller";
-const cvaPuller = cvaMerge(["pt-1", "pb-4", "flex", "items-center", "justify-center"]);
-const cvaPullerIcon = cvaMerge(["block", "h-1", "w-8", "rounded-full", "bg-neutral-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.
- * It uses swipe handlers to detect swipe gestures for opening and closing the drawer.
- * 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 = 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);
-    const [activeSnapPoint, setActiveSnapPoint] = useState(activeSnapPointProp);
-    const [snapPointOffsets, setSnapPointOffsets] = useState([]);
-    const isLastSnapPoint = useMemo(() => {
-        return activeSnapPoint === snapPoints?.[snapPoints.length - 1];
-    }, [activeSnapPoint, snapPoints]);
-    const isFirstSnapPoint = useMemo(() => {
-        return activeSnapPoint === snapPoints?.[0];
-    }, [activeSnapPoint, snapPoints]);
-    const activeSnapPointIndex = useMemo(() => snapPoints?.findIndex(snapPoint => snapPoint === activeSnapPoint) ?? -1, [snapPoints, activeSnapPoint]);
-    const onHandleDragEnd = useCallback((draggedBy, velocity) => {
-        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) * 0.4) {
-            const newSnapPoint = snapPoints[activeSnapPointIndex + direction] ?? null;
-            if (newSnapPoint !== null) {
-                setActiveSnapPoint(newSnapPoint);
-                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 = (snapPointOffsets[activeSnapPointIndex] ?? 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 = snapPoints[snapPointIndex] ?? null;
-        if (nextSnapPoint === null) {
-            return;
-        }
-        setActiveSnapPoint(nextSnapPoint);
-        onSnapPointChange?.(nextSnapPoint);
-    }, [snapPoints, snapPointOffsets, activeSnapPointIndex, containerGeometry, onSnapPointChange]);
-    const { handlers, isDragging, dragDistance, ref: swipeHandlersRef, } = useSwipeHandlers({
-        closingThreshold: CLOSING_THRESHOLD,
-        onCloseGesture: () => {
-            if (!snapPoints) {
-                onClose?.();
-            }
-        },
-        onOpenGesture: () => {
-            if (!snapPoints) {
-                onOpenGesture?.();
-            }
-        },
-        onDragEnd: onHandleDragEnd,
-        constrainDrag: (y) => {
-            if (isLastSnapPoint) {
-                return y <= 0;
-            }
-            if (isFirstSnapPoint) {
-                return y >= 0;
-            }
-            return false;
-        },
-    });
-    const mergedRef = useMergeRefs([drawerRef, swipeHandlersRef]);
-    const { blockScroll, restoreScroll } = useScrollBlock();
-    const { blockScroll: blockScrollContent, restoreScroll: restoreScrollContent } = useScrollBlock(document.getElementById("host-layout-content"));
-    useEffect(() => {
-        if (!snapPoints || !drawerRef.current) {
-            return;
-        }
-        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") {
-                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, containerGeometry]);
-    useEffect(() => {
-        if (container) {
-            containerMeasureRef(container);
-        }
-    }, [container, containerMeasureRef]);
-    useEffect(() => {
-        if (!snapPoints || snapPoints.length === 0) {
-            return;
-        }
-        const snapPointIndex = snapPoints.findIndex(offset => offset === activeSnapPointProp);
-        const nextSnapPoint = snapPoints[snapPointIndex > -1 ? snapPointIndex : 0] ?? null;
-        if (nextSnapPoint === null) {
-            return;
-        }
-        setActiveSnapPoint(nextSnapPoint);
-        onSnapPointChange?.(nextSnapPoint);
-    }, [snapPoints, activeSnapPointProp, onSnapPointChange]);
-    const drawerStyle = useMemo(() => {
-        if (isDragging) {
-            return {
-                transform: `translateY(${dragDistance}px)`,
-                transition: "none",
-            };
-        }
-        if (snapPoints && snapPointOffsets.length > 0 && activeSnapPointIndex !== -1) {
-            return {
-                transform: `translateY(${snapPointOffsets[activeSnapPointIndex]}px)`,
-                transition: SNAP_POINT_TRANSITION,
-            };
-        }
-        return {};
-    }, [isDragging, dragDistance, snapPointOffsets, activeSnapPointIndex, snapPoints]);
-    const applyDrawerStyles = useCallback(() => {
-        if (!drawerRef.current) {
-            return;
-        }
-        if (open) {
-            drawerRef.current.style.transform = drawerStyle.transform ?? "";
-            drawerRef.current.style.transition = drawerStyle.transition ?? "";
-        }
-        else {
-            drawerRef.current.style.transform = "";
-            drawerRef.current.style.transition = "";
-        }
-    }, [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: mergedRef, ...others, children: [jsx(DrawerPuller, { ...handlers }), children] }));
-};
-SwipeableDrawer.displayName = "SwipeableDrawer";
-const cvaSwipeableDrawer = cvaMerge([]);
-
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -639,4 +368,4 @@ const cvaSwipeableDrawer = cvaMerge([]);
  */
 setupLibraryTranslations();
 
-export { Drawer, DrawerToggle, SwipeableDrawer, TRANSITION_DURATION, cvaSwipeableDrawer };
+export { Drawer, DrawerToggle, TRANSITION_DURATION };

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "@trackunit/react-drawer",
-  "version": "1.21.0",
+  "version": "1.21.2",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "react-swipeable": "^7.0.1",
-    "@trackunit/react-components": "1.22.0",
-    "@trackunit/css-class-variance-utilities": "1.11.97",
-    "@trackunit/ui-icons": "1.11.93",
-    "@trackunit/i18n-library-translation": "1.18.3"
+    "@trackunit/react-components": "1.22.2",
+    "@trackunit/css-class-variance-utilities": "1.11.99",
+    "@trackunit/ui-icons": "1.11.95",
+    "@trackunit/i18n-library-translation": "1.18.5"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.114.29",

package/src/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./components/Drawer/Drawer";
 export * from "./components/DrawerToggle/DrawerToggle";
-export * from "./components/SwipeableDrawer/SwipeableDrawer";

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

@@ -1,16 +0,0 @@
-import { CommonProps } from "@trackunit/react-components";
-import { ReactElement, type Ref } from "react";
-/**
- * DrawerPuller is a React component that renders a puller element for a swipeable drawer.
- *
- * @param props - The props for the DrawerPuller component.
- * @param props.className - Additional class names to apply to the puller element.
- * @param props.ref - The ref to be forwarded to the root div element.
- * @returns {ReactElement} The drawer puller element.
- */
-export declare const DrawerPuller: {
-    ({ className, ref, ...props }: CommonProps & {
-        ref?: Ref<HTMLDivElement>;
-    }): ReactElement;
-    displayName: string;
-};

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

@@ -1,25 +0,0 @@
-import { ReactElement, Ref } from "react";
-import { type DrawerProps } from "../Drawer/Drawer";
-export interface SwipeableDrawerProps extends DrawerProps {
-    onOpenGesture?: () => void;
-    onSnapPointChange?: (snapPoint: number | string) => void;
-    snapPoints?: Array<number | string>;
-    activeSnapPoint?: number | string | null;
-    container?: HTMLElement | null;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLDivElement>;
-}
-/**
- *
- * SwipeableDrawer is a component that wraps the Drawer component to add swipeable functionality.
- * It uses swipe handlers to detect swipe gestures for opening and closing the drawer.
- * 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.
- */
-export declare const SwipeableDrawer: {
-    ({ 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/types").ClassProp | undefined) => string;

package/src/hooks/useSwipeHandlers.d.ts

@@ -1,25 +0,0 @@
-interface UseSwipeHandlersProps {
-    closingThreshold: number;
-    onCloseGesture?: () => void;
-    onOpenGesture?: () => void;
-    onDragEnd?: (dragDistance: number, velocity: number) => void;
-    constrainDrag?: (dragDistance: number) => boolean;
-}
-/**
- * Hook for handling swipe events on the drawer.
- *
- * @param options - The hook options.
- * @param options.closingThreshold - The fraction (0-1) of the drawer's height needed to trigger open/close.
- * @param options.onCloseGesture - Callback when a close gesture is detected (optional).
- * @param options.onOpenGesture - Callback when an open gesture is detected (optional).
- * @param options.onDragEnd - Callback when the drag/swipe gesture ends. Receives drag distance and velocity (optional).
- * @param options.constrainDrag - Function to constrain/deny drag. Receives drag distance, returns boolean (optional).
- */
-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 {};