@seed-design/react-drawer 1.0.7 → 1.0.9

package/lib/{Drawer-12s-1gup1cyj.js → Drawer-12s-B-JAOvwq.js}

@@ -5,8 +5,8 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useCallbackRef } from '@radix-ui/react-use-callback-ref';
 import { dataAttr } from '@seed-design/dom-utils';
 import { Primitive } from '@seed-design/react-primitive';
-import React, { useState, useRef, useCallback, useEffect, useMemo, createContext, useContext, forwardRef } from 'react';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { useState, useCallback, useRef, useEffect, useMemo, createContext, useContext, forwardRef } from 'react';
+import { useControllableState } from '@seed-design/react-use-controllable-state';
 
 function isMobileFirefox() {
     if (typeof window === "undefined" || typeof navigator === "undefined") return false;
@@ -28,6 +28,11 @@ function isIPad() {
 function isIOS() {
     return isIPhone() || isIPad();
 }
+function isAndroid() {
+    if (typeof window === "undefined" || typeof navigator === "undefined") return false;
+    return /Android/.test(navigator.userAgent);
+}
+// TODO: use userAgent instead?
 function testPlatform(re) {
     return typeof window !== "undefined" && window.navigator != null ? re.test(window.navigator.platform) : undefined;
 }
@@ -357,7 +362,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
         snapPointsOffset,
         snapToPoint
     ]);
-    function onRelease({ draggedDistance, closeDrawer, velocity, dismissible }) {
+    function onRelease({ draggedDistance, closeDrawer, velocity, dismissible, event }) {
         if (fadeFromIndex === undefined) return;
         const currentPosition = direction === "bottom" || direction === "right" ? (activeSnapPointOffset ?? 0) - draggedDistance : (activeSnapPointOffset ?? 0) + draggedDistance;
         const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1;
@@ -369,7 +374,10 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
             });
         }
         if (!snapToSequentialPoint && velocity > 2 && !hasDraggedUp) {
-            if (dismissible) closeDrawer();
+            if (dismissible) closeDrawer(false, {
+                reason: "drag",
+                event
+            });
             else snapToPoint(snapPointsOffset[0]); // snap to initial point
             return;
         }
@@ -391,7 +399,10 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
                 return;
             }
             if (isFirst && dragDirection < 0 && dismissible) {
-                closeDrawer();
+                closeDrawer(false, {
+                    reason: "drag",
+                    event
+                });
             }
             if (activeSnapPointIndex === null) return;
             snapToPoint(snapPointsOffset[activeSnapPointIndex + dragDirection]);
@@ -461,8 +472,8 @@ function useDrawer(props) {
     const [isOpen = false, setIsOpen] = useControllableState({
         defaultProp: defaultOpen,
         prop: openProp,
-        onChange: (o)=>{
-            onOpenChange?.(o);
+        onChange: (o, details)=>{
+            onOpenChange?.(o, details);
             if (!o && !nested) {
                 restorePositionSetting();
             }
@@ -482,8 +493,13 @@ function useDrawer(props) {
         }
     });
     const [hasBeenOpened, setHasBeenOpened] = useState(false);
+    const [hasAnimationDone, setHasAnimationDone] = useState(false);
     const [isDragging, setIsDragging] = useState(false);
     const [shouldOverlayAnimate, setShouldOverlayAnimate] = useState(false);
+    const [isCloseButtonRendered, setIsCloseButtonRendered] = useState(false);
+    const closeButtonRef = useCallback((node)=>{
+        setIsCloseButtonRendered(!!node);
+    }, []);
     const overlayRef = useRef(null);
     const openTime = useRef(null);
     const dragStartTime = useRef(null);
@@ -652,11 +668,11 @@ function useDrawer(props) {
     }, [
         isDragging
     ]);
-    const closeDrawer = useCallback((fromWithin)=>{
+    const closeDrawer = useCallback((fromWithin, details)=>{
         cancelDrag();
         onClose?.();
         if (!fromWithin) {
-            setIsOpen(false);
+            setIsOpen(false, details);
         }
         if (fadeFromIndex !== undefined && fadeFromIndex > 0 && activeSnapPointIndex === 0) {
             set(overlayRef.current, {
@@ -706,7 +722,8 @@ function useDrawer(props) {
                 draggedDistance: distMoved * directionMultiplier,
                 closeDrawer,
                 velocity,
-                dismissible
+                dismissible,
+                event: event.nativeEvent
             });
             onReleaseProp?.(event, true);
             return;
@@ -717,7 +734,10 @@ function useDrawer(props) {
             return;
         }
         if (velocity > VELOCITY_THRESHOLD) {
-            closeDrawer();
+            closeDrawer(false, {
+                reason: "drag",
+                event: event.nativeEvent
+            });
             onReleaseProp?.(event, false);
             return;
         }
@@ -725,7 +745,10 @@ function useDrawer(props) {
         const visibleDrawerWidth = Math.min(drawerRef.current.getBoundingClientRect().width ?? 0, window.innerWidth);
         const isHorizontalSwipe = direction === "left" || direction === "right";
         if (Math.abs(swipeAmount) >= (isHorizontalSwipe ? visibleDrawerWidth : visibleDrawerHeight) * closeThreshold) {
-            closeDrawer();
+            closeDrawer(false, {
+                reason: "drag",
+                event: event.nativeEvent
+            });
             onReleaseProp?.(event, false);
             return;
         }
@@ -778,7 +801,7 @@ function useDrawer(props) {
                     } else {
                         drawerRef.current.style.height = `${Math.max(newDrawerHeight, visualViewportHeight - offsetFromTop)}px`;
                     }
-                } else if (!isMobileFirefox()) {
+                } else if (!isMobileFirefox() && !isAndroid()) {
                     drawerRef.current.style.height = `${initialDrawerHeight.current}px`;
                 }
                 if (snapPoints && snapPoints.length > 0 && !keyboardIsOpen.current) {
@@ -806,6 +829,7 @@ function useDrawer(props) {
     }, [
         modal
     ]);
+    // Effect 1: Track drawer open state
     useEffect(()=>{
         if (isOpen) {
             setHasBeenOpened(true);
@@ -813,6 +837,24 @@ function useDrawer(props) {
     }, [
         isOpen
     ]);
+    // Effect 2: Handle animation state and timer
+    useEffect(()=>{
+        if (isOpen) {
+            // Only reset animation state if this is the first open
+            if (!hasBeenOpened) {
+                setHasAnimationDone(false);
+            }
+            const timeoutId = setTimeout(()=>{
+                setHasAnimationDone(true);
+            }, TRANSITIONS.ENTER_DURATION * 1000);
+            return ()=>clearTimeout(timeoutId);
+        }
+        // Reset animation state when drawer closes
+        setHasAnimationDone(false);
+    }, [
+        isOpen,
+        hasBeenOpened
+    ]);
     useEffect(()=>{
         if (isOpen && snapPoints && fadeFromIndex === 0) {
             setShouldOverlayAnimate(true);
@@ -855,7 +897,10 @@ function useDrawer(props) {
             setHasBeenOpened,
             setIsOpen,
             closeOnInteractOutside,
-            closeOnEscape
+            closeOnEscape,
+            hasAnimationDone,
+            closeButtonRef,
+            isCloseButtonRendered
         }), [
         activeSnapPoint,
         snapPoints,
@@ -880,7 +925,10 @@ function useDrawer(props) {
         closeOnEscape,
         onRelease,
         onDrag,
-        onPress
+        onPress,
+        hasAnimationDone,
+        closeButtonRef,
+        isCloseButtonRendered
     ]);
 }
 
@@ -930,11 +978,10 @@ const DrawerPositioner = /*#__PURE__*/ forwardRef((props, ref)=>{
 });
 DrawerPositioner.displayName = "DrawerPositioner";
 const DrawerBackdrop = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { overlayRef, onRelease, modal, snapPoints, isOpen, shouldFade, shouldOverlayAnimate } = useDrawerContext();
+    const { overlayRef, onRelease, modal, snapPoints, isOpen, shouldFade, shouldOverlayAnimate, hasAnimationDone } = useDrawerContext();
     const composedRef = useComposedRefs(ref, overlayRef);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
     const onMouseUp = useCallbackRef((event)=>onRelease(event));
-    // Overlay is the component that is locking scroll, removing it will unlock the scroll without having to dig into Radix's Dialog library
     if (!modal) {
         return null;
     }
@@ -945,13 +992,14 @@ const DrawerBackdrop = /*#__PURE__*/ forwardRef((props, ref)=>{
         "data-snap-points-overlay": isOpen && shouldFade ? "true" : "false",
         "data-should-overlay-animate": shouldOverlayAnimate ? "true" : "false",
         "data-open": dataAttr(isOpen),
+        "data-animation-done": hasAnimationDone ? "true" : "false",
         ...props
     });
 });
 DrawerBackdrop.displayName = "DrawerBackdrop";
 const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { onPointerDownOutside, style, onOpenAutoFocus, ...restProps } = props;
-    const { drawerRef, onPress, onRelease, onDrag, keyboardIsOpen, snapPointsOffset, activeSnapPointIndex, modal, isOpen, direction, snapPoints, container, handleOnly, autoFocus, closeDrawer, closeOnInteractOutside, closeOnEscape, dismissible } = useDrawerContext();
+    const { drawerRef, onPress, onRelease, onDrag, keyboardIsOpen, snapPointsOffset, activeSnapPointIndex, modal, isOpen, direction, snapPoints, container, handleOnly, autoFocus, closeDrawer, closeOnInteractOutside, closeOnEscape, dismissible, hasAnimationDone } = useDrawerContext();
     // Needed to use transition instead of animations
     const [delayedSnapPoints, setDelayedSnapPoints] = useState(false);
     const composedRef = useComposedRefs(ref, drawerRef);
@@ -998,6 +1046,7 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
         "data-delayed-snap-points": delayedSnapPoints ? "true" : "false",
         "data-drawer-direction": direction,
         "data-open": dataAttr(isOpen),
+        "data-animation-done": hasAnimationDone ? "true" : "false",
         "data-drawer": "",
         "data-snap-points": isOpen && hasSnapPoints ? "true" : "false",
         "data-custom-container": container ? "true" : "false",
@@ -1075,13 +1124,19 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
         onInteractOutside: (e)=>{
             // Only close if event is not prevented (e.g., by onFocusOutside or onPointerDownOutside)
             if (dismissible && closeOnInteractOutside && !e.defaultPrevented) {
-                closeDrawer();
+                closeDrawer(false, {
+                    reason: "interactOutside",
+                    event: e.detail.originalEvent
+                });
             }
             props.onInteractOutside?.(e);
         },
         onEscapeKeyDown: (e)=>{
             if (dismissible && closeOnEscape) {
-                closeDrawer();
+                closeDrawer(false, {
+                    reason: "escapeKeyDown",
+                    event: e
+                });
             }
             props.onEscapeKeyDown?.(e);
         }
@@ -1090,15 +1145,28 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
 DrawerContent.displayName = "DrawerContent";
 const DrawerTitle = DialogPrimitive.Title;
 const DrawerDescription = DialogPrimitive.Description;
+const DrawerHeader = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { isCloseButtonRendered } = useDrawerContext();
+    return /*#__PURE__*/ jsx(Primitive.div, {
+        ref: ref,
+        "data-show-close-button": dataAttr(isCloseButtonRendered),
+        ...props
+    });
+});
+DrawerHeader.displayName = "DrawerHeader";
 const DrawerCloseButton = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const api = useDrawerContext();
+    const { closeButtonRef, setIsOpen } = useDrawerContext();
+    const composedRef = useComposedRefs(ref, closeButtonRef);
     return /*#__PURE__*/ jsx(Primitive.button, {
-        ref: ref,
+        ref: composedRef,
         ...props,
         onClick: (e)=>{
             props.onClick?.(e);
             if (e.defaultPrevented) return;
-            api.setIsOpen(false);
+            setIsOpen(false, {
+                reason: "closeButton",
+                event: e.nativeEvent
+            });
         }
     });
 });
@@ -1109,17 +1177,17 @@ const DrawerHandle = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag, onRelease } = useDrawerContext();
     const closeTimeoutIdRef = useRef(null);
     const shouldCancelInteractionRef = useRef(false);
-    function handleStartCycle() {
+    function handleStartCycle(event) {
         // Stop if this is the second click of a double click
         if (shouldCancelInteractionRef.current) {
             handleCancelInteraction();
             return;
         }
         window.setTimeout(()=>{
-            handleCycleSnapPoints();
+            handleCycleSnapPoints(event);
         }, DOUBLE_TAP_TIMEOUT);
     }
-    function handleCycleSnapPoints() {
+    function handleCycleSnapPoints(event) {
         // Prevent accidental taps while resizing drawer
         if (isDragging || preventCycle || shouldCancelInteractionRef.current) {
             handleCancelInteraction();
@@ -1129,13 +1197,19 @@ const DrawerHandle = /*#__PURE__*/ forwardRef((props, ref)=>{
         handleCancelInteraction();
         if (!snapPoints || snapPoints.length === 0) {
             if (!dismissible) {
-                closeDrawer();
+                closeDrawer(false, {
+                    reason: "handleClickOnLastSnapPoint",
+                    event: event.nativeEvent
+                });
             }
             return;
         }
         const isLastSnapPoint = activeSnapPoint === snapPoints[snapPoints.length - 1];
         if (isLastSnapPoint && dismissible) {
-            closeDrawer();
+            closeDrawer(false, {
+                reason: "handleClickOnLastSnapPoint",
+                event: event.nativeEvent
+            });
             return;
         }
         const currentSnapIndex = snapPoints.findIndex((point)=>point === activeSnapPoint);
@@ -1179,4 +1253,4 @@ const DrawerHandle = /*#__PURE__*/ forwardRef((props, ref)=>{
 });
 DrawerHandle.displayName = "DrawerHandle";
 
-export { DrawerBackdrop as D, DrawerCloseButton as a, DrawerContent as b, DrawerDescription as c, DrawerHandle as d, DrawerPositioner as e, DrawerRoot as f, DrawerTitle as g, DrawerTrigger as h, useDrawerContext as i, useDrawer as u };
+export { DrawerBackdrop as D, DrawerCloseButton as a, DrawerContent as b, DrawerDescription as c, DrawerHandle as d, DrawerHeader as e, DrawerPositioner as f, DrawerRoot as g, DrawerTitle as h, DrawerTrigger as i, useDrawerContext as j, useDrawer as u };

package/lib/{Drawer-12s-L4KZ1h_g.cjs → Drawer-12s-B35ZJcKm.cjs}

@@ -6,7 +6,7 @@ var reactUseCallbackRef = require('@radix-ui/react-use-callback-ref');
 var domUtils = require('@seed-design/dom-utils');
 var reactPrimitive = require('@seed-design/react-primitive');
 var React = require('react');
-var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
+var reactUseControllableState = require('@seed-design/react-use-controllable-state');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -51,6 +51,11 @@ function isIPad() {
 function isIOS() {
     return isIPhone() || isIPad();
 }
+function isAndroid() {
+    if (typeof window === "undefined" || typeof navigator === "undefined") return false;
+    return /Android/.test(navigator.userAgent);
+}
+// TODO: use userAgent instead?
 function testPlatform(re) {
     return typeof window !== "undefined" && window.navigator != null ? re.test(window.navigator.platform) : undefined;
 }
@@ -380,7 +385,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
         snapPointsOffset,
         snapToPoint
     ]);
-    function onRelease({ draggedDistance, closeDrawer, velocity, dismissible }) {
+    function onRelease({ draggedDistance, closeDrawer, velocity, dismissible, event }) {
         if (fadeFromIndex === undefined) return;
         const currentPosition = direction === "bottom" || direction === "right" ? (activeSnapPointOffset ?? 0) - draggedDistance : (activeSnapPointOffset ?? 0) + draggedDistance;
         const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1;
@@ -392,7 +397,10 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
             });
         }
         if (!snapToSequentialPoint && velocity > 2 && !hasDraggedUp) {
-            if (dismissible) closeDrawer();
+            if (dismissible) closeDrawer(false, {
+                reason: "drag",
+                event
+            });
             else snapToPoint(snapPointsOffset[0]); // snap to initial point
             return;
         }
@@ -414,7 +422,10 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
                 return;
             }
             if (isFirst && dragDirection < 0 && dismissible) {
-                closeDrawer();
+                closeDrawer(false, {
+                    reason: "drag",
+                    event
+                });
             }
             if (activeSnapPointIndex === null) return;
             snapToPoint(snapPointsOffset[activeSnapPointIndex + dragDirection]);
@@ -484,8 +495,8 @@ function useDrawer(props) {
     const [isOpen = false, setIsOpen] = reactUseControllableState.useControllableState({
         defaultProp: defaultOpen,
         prop: openProp,
-        onChange: (o)=>{
-            onOpenChange?.(o);
+        onChange: (o, details)=>{
+            onOpenChange?.(o, details);
             if (!o && !nested) {
                 restorePositionSetting();
             }
@@ -505,8 +516,13 @@ function useDrawer(props) {
         }
     });
     const [hasBeenOpened, setHasBeenOpened] = React.useState(false);
+    const [hasAnimationDone, setHasAnimationDone] = React.useState(false);
     const [isDragging, setIsDragging] = React.useState(false);
     const [shouldOverlayAnimate, setShouldOverlayAnimate] = React.useState(false);
+    const [isCloseButtonRendered, setIsCloseButtonRendered] = React.useState(false);
+    const closeButtonRef = React.useCallback((node)=>{
+        setIsCloseButtonRendered(!!node);
+    }, []);
     const overlayRef = React.useRef(null);
     const openTime = React.useRef(null);
     const dragStartTime = React.useRef(null);
@@ -675,11 +691,11 @@ function useDrawer(props) {
     }, [
         isDragging
     ]);
-    const closeDrawer = React.useCallback((fromWithin)=>{
+    const closeDrawer = React.useCallback((fromWithin, details)=>{
         cancelDrag();
         onClose?.();
         if (!fromWithin) {
-            setIsOpen(false);
+            setIsOpen(false, details);
         }
         if (fadeFromIndex !== undefined && fadeFromIndex > 0 && activeSnapPointIndex === 0) {
             set(overlayRef.current, {
@@ -729,7 +745,8 @@ function useDrawer(props) {
                 draggedDistance: distMoved * directionMultiplier,
                 closeDrawer,
                 velocity,
-                dismissible
+                dismissible,
+                event: event.nativeEvent
             });
             onReleaseProp?.(event, true);
             return;
@@ -740,7 +757,10 @@ function useDrawer(props) {
             return;
         }
         if (velocity > VELOCITY_THRESHOLD) {
-            closeDrawer();
+            closeDrawer(false, {
+                reason: "drag",
+                event: event.nativeEvent
+            });
             onReleaseProp?.(event, false);
             return;
         }
@@ -748,7 +768,10 @@ function useDrawer(props) {
         const visibleDrawerWidth = Math.min(drawerRef.current.getBoundingClientRect().width ?? 0, window.innerWidth);
         const isHorizontalSwipe = direction === "left" || direction === "right";
         if (Math.abs(swipeAmount) >= (isHorizontalSwipe ? visibleDrawerWidth : visibleDrawerHeight) * closeThreshold) {
-            closeDrawer();
+            closeDrawer(false, {
+                reason: "drag",
+                event: event.nativeEvent
+            });
             onReleaseProp?.(event, false);
             return;
         }
@@ -801,7 +824,7 @@ function useDrawer(props) {
                     } else {
                         drawerRef.current.style.height = `${Math.max(newDrawerHeight, visualViewportHeight - offsetFromTop)}px`;
                     }
-                } else if (!isMobileFirefox()) {
+                } else if (!isMobileFirefox() && !isAndroid()) {
                     drawerRef.current.style.height = `${initialDrawerHeight.current}px`;
                 }
                 if (snapPoints && snapPoints.length > 0 && !keyboardIsOpen.current) {
@@ -829,6 +852,7 @@ function useDrawer(props) {
     }, [
         modal
     ]);
+    // Effect 1: Track drawer open state
     React.useEffect(()=>{
         if (isOpen) {
             setHasBeenOpened(true);
@@ -836,6 +860,24 @@ function useDrawer(props) {
     }, [
         isOpen
     ]);
+    // Effect 2: Handle animation state and timer
+    React.useEffect(()=>{
+        if (isOpen) {
+            // Only reset animation state if this is the first open
+            if (!hasBeenOpened) {
+                setHasAnimationDone(false);
+            }
+            const timeoutId = setTimeout(()=>{
+                setHasAnimationDone(true);
+            }, TRANSITIONS.ENTER_DURATION * 1000);
+            return ()=>clearTimeout(timeoutId);
+        }
+        // Reset animation state when drawer closes
+        setHasAnimationDone(false);
+    }, [
+        isOpen,
+        hasBeenOpened
+    ]);
     React.useEffect(()=>{
         if (isOpen && snapPoints && fadeFromIndex === 0) {
             setShouldOverlayAnimate(true);
@@ -878,7 +920,10 @@ function useDrawer(props) {
             setHasBeenOpened,
             setIsOpen,
             closeOnInteractOutside,
-            closeOnEscape
+            closeOnEscape,
+            hasAnimationDone,
+            closeButtonRef,
+            isCloseButtonRendered
         }), [
         activeSnapPoint,
         snapPoints,
@@ -903,7 +948,10 @@ function useDrawer(props) {
         closeOnEscape,
         onRelease,
         onDrag,
-        onPress
+        onPress,
+        hasAnimationDone,
+        closeButtonRef,
+        isCloseButtonRendered
     ]);
 }
 
@@ -953,11 +1001,10 @@ const DrawerPositioner = /*#__PURE__*/ React.forwardRef((props, ref)=>{
 });
 DrawerPositioner.displayName = "DrawerPositioner";
 const DrawerBackdrop = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-    const { overlayRef, onRelease, modal, snapPoints, isOpen, shouldFade, shouldOverlayAnimate } = useDrawerContext();
+    const { overlayRef, onRelease, modal, snapPoints, isOpen, shouldFade, shouldOverlayAnimate, hasAnimationDone } = useDrawerContext();
     const composedRef = reactComposeRefs.useComposedRefs(ref, overlayRef);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
     const onMouseUp = reactUseCallbackRef.useCallbackRef((event)=>onRelease(event));
-    // Overlay is the component that is locking scroll, removing it will unlock the scroll without having to dig into Radix's Dialog library
     if (!modal) {
         return null;
     }
@@ -968,13 +1015,14 @@ const DrawerBackdrop = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         "data-snap-points-overlay": isOpen && shouldFade ? "true" : "false",
         "data-should-overlay-animate": shouldOverlayAnimate ? "true" : "false",
         "data-open": domUtils.dataAttr(isOpen),
+        "data-animation-done": hasAnimationDone ? "true" : "false",
         ...props
     });
 });
 DrawerBackdrop.displayName = "DrawerBackdrop";
 const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const { onPointerDownOutside, style, onOpenAutoFocus, ...restProps } = props;
-    const { drawerRef, onPress, onRelease, onDrag, keyboardIsOpen, snapPointsOffset, activeSnapPointIndex, modal, isOpen, direction, snapPoints, container, handleOnly, autoFocus, closeDrawer, closeOnInteractOutside, closeOnEscape, dismissible } = useDrawerContext();
+    const { drawerRef, onPress, onRelease, onDrag, keyboardIsOpen, snapPointsOffset, activeSnapPointIndex, modal, isOpen, direction, snapPoints, container, handleOnly, autoFocus, closeDrawer, closeOnInteractOutside, closeOnEscape, dismissible, hasAnimationDone } = useDrawerContext();
     // Needed to use transition instead of animations
     const [delayedSnapPoints, setDelayedSnapPoints] = React.useState(false);
     const composedRef = reactComposeRefs.useComposedRefs(ref, drawerRef);
@@ -1021,6 +1069,7 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         "data-delayed-snap-points": delayedSnapPoints ? "true" : "false",
         "data-drawer-direction": direction,
         "data-open": domUtils.dataAttr(isOpen),
+        "data-animation-done": hasAnimationDone ? "true" : "false",
         "data-drawer": "",
         "data-snap-points": isOpen && hasSnapPoints ? "true" : "false",
         "data-custom-container": container ? "true" : "false",
@@ -1098,13 +1147,19 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         onInteractOutside: (e)=>{
             // Only close if event is not prevented (e.g., by onFocusOutside or onPointerDownOutside)
             if (dismissible && closeOnInteractOutside && !e.defaultPrevented) {
-                closeDrawer();
+                closeDrawer(false, {
+                    reason: "interactOutside",
+                    event: e.detail.originalEvent
+                });
             }
             props.onInteractOutside?.(e);
         },
         onEscapeKeyDown: (e)=>{
             if (dismissible && closeOnEscape) {
-                closeDrawer();
+                closeDrawer(false, {
+                    reason: "escapeKeyDown",
+                    event: e
+                });
             }
             props.onEscapeKeyDown?.(e);
         }
@@ -1113,15 +1168,28 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
 DrawerContent.displayName = "DrawerContent";
 const DrawerTitle = DialogPrimitive__namespace.Title;
 const DrawerDescription = DialogPrimitive__namespace.Description;
+const DrawerHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { isCloseButtonRendered } = useDrawerContext();
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+        ref: ref,
+        "data-show-close-button": domUtils.dataAttr(isCloseButtonRendered),
+        ...props
+    });
+});
+DrawerHeader.displayName = "DrawerHeader";
 const DrawerCloseButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-    const api = useDrawerContext();
+    const { closeButtonRef, setIsOpen } = useDrawerContext();
+    const composedRef = reactComposeRefs.useComposedRefs(ref, closeButtonRef);
     return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.button, {
-        ref: ref,
+        ref: composedRef,
         ...props,
         onClick: (e)=>{
             props.onClick?.(e);
             if (e.defaultPrevented) return;
-            api.setIsOpen(false);
+            setIsOpen(false, {
+                reason: "closeButton",
+                event: e.nativeEvent
+            });
         }
     });
 });
@@ -1132,17 +1200,17 @@ const DrawerHandle = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag, onRelease } = useDrawerContext();
     const closeTimeoutIdRef = React.useRef(null);
     const shouldCancelInteractionRef = React.useRef(false);
-    function handleStartCycle() {
+    function handleStartCycle(event) {
         // Stop if this is the second click of a double click
         if (shouldCancelInteractionRef.current) {
             handleCancelInteraction();
             return;
         }
         window.setTimeout(()=>{
-            handleCycleSnapPoints();
+            handleCycleSnapPoints(event);
         }, DOUBLE_TAP_TIMEOUT);
     }
-    function handleCycleSnapPoints() {
+    function handleCycleSnapPoints(event) {
         // Prevent accidental taps while resizing drawer
         if (isDragging || preventCycle || shouldCancelInteractionRef.current) {
             handleCancelInteraction();
@@ -1152,13 +1220,19 @@ const DrawerHandle = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         handleCancelInteraction();
         if (!snapPoints || snapPoints.length === 0) {
             if (!dismissible) {
-                closeDrawer();
+                closeDrawer(false, {
+                    reason: "handleClickOnLastSnapPoint",
+                    event: event.nativeEvent
+                });
             }
             return;
         }
         const isLastSnapPoint = activeSnapPoint === snapPoints[snapPoints.length - 1];
         if (isLastSnapPoint && dismissible) {
-            closeDrawer();
+            closeDrawer(false, {
+                reason: "handleClickOnLastSnapPoint",
+                event: event.nativeEvent
+            });
             return;
         }
         const currentSnapIndex = snapPoints.findIndex((point)=>point === activeSnapPoint);
@@ -1207,6 +1281,7 @@ exports.DrawerCloseButton = DrawerCloseButton;
 exports.DrawerContent = DrawerContent;
 exports.DrawerDescription = DrawerDescription;
 exports.DrawerHandle = DrawerHandle;
+exports.DrawerHeader = DrawerHeader;
 exports.DrawerPositioner = DrawerPositioner;
 exports.DrawerRoot = DrawerRoot;
 exports.DrawerTitle = DrawerTitle;

package/lib/index.cjs

@@ -1,4 +1,4 @@
-var Drawer12s = require('./Drawer-12s-L4KZ1h_g.cjs');
+var Drawer12s = require('./Drawer-12s-B35ZJcKm.cjs');
 
 var Drawer_namespace = {
   __proto__: null,
@@ -7,6 +7,7 @@ var Drawer_namespace = {
   Content: Drawer12s.DrawerContent,
   Description: Drawer12s.DrawerDescription,
   Handle: Drawer12s.DrawerHandle,
+  Header: Drawer12s.DrawerHeader,
   Positioner: Drawer12s.DrawerPositioner,
   Root: Drawer12s.DrawerRoot,
   Title: Drawer12s.DrawerTitle,
@@ -18,6 +19,7 @@ exports.DrawerCloseButton = Drawer12s.DrawerCloseButton;
 exports.DrawerContent = Drawer12s.DrawerContent;
 exports.DrawerDescription = Drawer12s.DrawerDescription;
 exports.DrawerHandle = Drawer12s.DrawerHandle;
+exports.DrawerHeader = Drawer12s.DrawerHeader;
 exports.DrawerPositioner = Drawer12s.DrawerPositioner;
 exports.DrawerRoot = Drawer12s.DrawerRoot;
 exports.DrawerTitle = Drawer12s.DrawerTitle;