@seed-design/react-drawer 1.0.7 → 1.0.8

package/lib/{Drawer-12s-L4KZ1h_g.cjs → Drawer-12s-DXUv7jE4.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 }; }
 
@@ -380,7 +380,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 +392,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 +417,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 +490,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 +511,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 +686,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 +740,8 @@ function useDrawer(props) {
                 draggedDistance: distMoved * directionMultiplier,
                 closeDrawer,
                 velocity,
-                dismissible
+                dismissible,
+                event: event.nativeEvent
             });
             onReleaseProp?.(event, true);
             return;
@@ -740,7 +752,10 @@ function useDrawer(props) {
             return;
         }
         if (velocity > VELOCITY_THRESHOLD) {
-            closeDrawer();
+            closeDrawer(false, {
+                reason: "drag",
+                event: event.nativeEvent
+            });
             onReleaseProp?.(event, false);
             return;
         }
@@ -748,7 +763,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;
         }
@@ -829,6 +847,7 @@ function useDrawer(props) {
     }, [
         modal
     ]);
+    // Effect 1: Track drawer open state
     React.useEffect(()=>{
         if (isOpen) {
             setHasBeenOpened(true);
@@ -836,6 +855,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 +915,10 @@ function useDrawer(props) {
             setHasBeenOpened,
             setIsOpen,
             closeOnInteractOutside,
-            closeOnEscape
+            closeOnEscape,
+            hasAnimationDone,
+            closeButtonRef,
+            isCloseButtonRendered
         }), [
         activeSnapPoint,
         snapPoints,
@@ -903,7 +943,10 @@ function useDrawer(props) {
         closeOnEscape,
         onRelease,
         onDrag,
-        onPress
+        onPress,
+        hasAnimationDone,
+        closeButtonRef,
+        isCloseButtonRendered
     ]);
 }
 
@@ -953,11 +996,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 +1010,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 +1064,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 +1142,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 +1163,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 +1195,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 +1215,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 +1276,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/{Drawer-12s-1gup1cyj.js → Drawer-12s-DnXlK1K0.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;
@@ -357,7 +357,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 +369,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 +394,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 +467,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 +488,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 +663,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 +717,8 @@ function useDrawer(props) {
                 draggedDistance: distMoved * directionMultiplier,
                 closeDrawer,
                 velocity,
-                dismissible
+                dismissible,
+                event: event.nativeEvent
             });
             onReleaseProp?.(event, true);
             return;
@@ -717,7 +729,10 @@ function useDrawer(props) {
             return;
         }
         if (velocity > VELOCITY_THRESHOLD) {
-            closeDrawer();
+            closeDrawer(false, {
+                reason: "drag",
+                event: event.nativeEvent
+            });
             onReleaseProp?.(event, false);
             return;
         }
@@ -725,7 +740,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;
         }
@@ -806,6 +824,7 @@ function useDrawer(props) {
     }, [
         modal
     ]);
+    // Effect 1: Track drawer open state
     useEffect(()=>{
         if (isOpen) {
             setHasBeenOpened(true);
@@ -813,6 +832,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 +892,10 @@ function useDrawer(props) {
             setHasBeenOpened,
             setIsOpen,
             closeOnInteractOutside,
-            closeOnEscape
+            closeOnEscape,
+            hasAnimationDone,
+            closeButtonRef,
+            isCloseButtonRendered
         }), [
         activeSnapPoint,
         snapPoints,
@@ -880,7 +920,10 @@ function useDrawer(props) {
         closeOnEscape,
         onRelease,
         onDrag,
-        onPress
+        onPress,
+        hasAnimationDone,
+        closeButtonRef,
+        isCloseButtonRendered
     ]);
 }
 
@@ -930,11 +973,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 +987,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 +1041,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 +1119,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 +1140,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 +1172,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 +1192,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 +1248,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/index.cjs

@@ -1,4 +1,4 @@
-var Drawer12s = require('./Drawer-12s-L4KZ1h_g.cjs');
+var Drawer12s = require('./Drawer-12s-DXUv7jE4.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;

package/lib/index.d.ts

@@ -1,12 +1,35 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { PrimitiveProps } from '@seed-design/react-primitive';
-import * as react from 'react';
+import * as React$1 from 'react';
+import React__default from 'react';
 
+interface DrawerReasonToDetailMap {
+    closeButton: {
+        event: MouseEvent;
+    };
+    escapeKeyDown: {
+        event: KeyboardEvent;
+    };
+    interactOutside: {
+        event: PointerEvent | FocusEvent;
+    };
+    drag: {
+        event: PointerEvent;
+    };
+    handleClickOnLastSnapPoint: {
+        event: MouseEvent;
+    };
+}
+type DrawerChangeDetails = {
+    [R in keyof DrawerReasonToDetailMap]: {
+        reason?: R;
+    } & DrawerReasonToDetailMap[R];
+}[keyof DrawerReasonToDetailMap];
 interface UseDrawerProps {
     activeSnapPoint?: number | string | null;
     setActiveSnapPoint?: (snapPoint: number | string | null) => void;
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
     open?: boolean;
     /**
      * Number between 0 and 1 that determines when the drawer should be closed.
@@ -19,7 +42,7 @@ interface UseDrawerProps {
      * @default true
      */
     noBodyStyles?: boolean;
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: (open: boolean, details?: DrawerChangeDetails) => void;
     /**
      * Duration for which the drawer is not draggable after scrolling content inside of the drawer.
      * @default 500ms
@@ -40,8 +63,8 @@ interface UseDrawerProps {
      * @default true
      */
     dismissible?: boolean;
-    onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
-    onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
+    onDrag?: (event: React__default.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
+    onRelease?: (event: React__default.PointerEvent<HTMLDivElement>, open: boolean) => void;
     /**
      * When `false` it allows to interact with elements outside of the drawer without closing it.
      * @default true
@@ -106,21 +129,21 @@ interface UseDrawerProps {
 declare function useDrawer(props: UseDrawerProps): {
     activeSnapPoint: string | number | null;
     snapPoints: (string | number)[] | undefined;
-    setActiveSnapPoint: (value: react.SetStateAction<string | number | null>) => void;
-    drawerRef: react.RefObject<HTMLDivElement | null>;
-    overlayRef: react.RefObject<HTMLDivElement | null>;
+    setActiveSnapPoint: (value: string | number | ((prev: string | number | null) => string | number | null) | null, details?: undefined) => void;
+    drawerRef: React__default.RefObject<HTMLDivElement | null>;
+    overlayRef: React__default.RefObject<HTMLDivElement | null>;
     shouldOverlayAnimate: boolean;
-    onOpenChange: ((open: boolean) => void) | undefined;
-    onPress: (event: React.PointerEvent<HTMLDivElement>) => void;
-    onRelease: (event: React.PointerEvent<HTMLDivElement> | null) => void;
-    onDrag: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onOpenChange: ((open: boolean, details?: DrawerChangeDetails) => void) | undefined;
+    onPress: (event: React__default.PointerEvent<HTMLDivElement>) => void;
+    onRelease: (event: React__default.PointerEvent<HTMLDivElement> | null) => void;
+    onDrag: (event: React__default.PointerEvent<HTMLDivElement>) => void;
     dismissible: boolean;
     handleOnly: boolean;
     isOpen: boolean;
     isDragging: boolean;
     shouldFade: boolean;
-    closeDrawer: (fromWithin?: boolean) => void;
-    keyboardIsOpen: react.RefObject<boolean>;
+    closeDrawer: (fromWithin?: boolean, details?: DrawerChangeDetails) => void;
+    keyboardIsOpen: React__default.RefObject<boolean>;
     modal: boolean;
     snapPointsOffset: number[];
     activeSnapPointIndex: number | null;
@@ -128,51 +151,77 @@ declare function useDrawer(props: UseDrawerProps): {
     noBodyStyles: boolean;
     container: HTMLElement | null | undefined;
     autoFocus: boolean;
-    setHasBeenOpened: react.Dispatch<react.SetStateAction<boolean>>;
-    setIsOpen: (value: react.SetStateAction<boolean>) => void;
+    setHasBeenOpened: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    setIsOpen: (value: boolean | ((prev: boolean) => boolean), details?: DrawerChangeDetails | undefined) => void;
     closeOnInteractOutside: boolean;
     closeOnEscape: boolean;
+    hasAnimationDone: boolean;
+    closeButtonRef: (node: HTMLButtonElement | null) => void;
+    isCloseButtonRendered: boolean;
 };
 
 interface DrawerRootProps extends UseDrawerProps {
-    children?: react.ReactNode;
+    children?: React$1.ReactNode;
 }
 declare const DrawerRoot: (props: DrawerRootProps) => react_jsx_runtime.JSX.Element;
 interface DrawerTriggerProps extends DialogPrimitive.DialogTriggerProps {
 }
-declare const DrawerTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
-interface DrawerPositionerProps extends PrimitiveProps, react.HTMLAttributes<HTMLDivElement> {
+declare const DrawerTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+interface DrawerPositionerProps extends PrimitiveProps, React$1.HTMLAttributes<HTMLDivElement> {
 }
-declare const DrawerPositioner: react.ForwardRefExoticComponent<DrawerPositionerProps & react.RefAttributes<HTMLDivElement>>;
-interface DrawerBackdropProps extends DialogPrimitive.DialogOverlayProps, react.HTMLAttributes<HTMLDivElement> {
+declare const DrawerPositioner: React$1.ForwardRefExoticComponent<DrawerPositionerProps & React$1.RefAttributes<HTMLDivElement>>;
+interface DrawerBackdropProps extends DialogPrimitive.DialogOverlayProps, React$1.HTMLAttributes<HTMLDivElement> {
 }
-declare const DrawerBackdrop: react.ForwardRefExoticComponent<DrawerBackdropProps & react.RefAttributes<HTMLDivElement>>;
-interface DrawerContentProps extends DialogPrimitive.DialogContentProps, react.HTMLAttributes<HTMLDivElement> {
+declare const DrawerBackdrop: React$1.ForwardRefExoticComponent<DrawerBackdropProps & React$1.RefAttributes<HTMLDivElement>>;
+interface DrawerContentProps extends DialogPrimitive.DialogContentProps, React$1.HTMLAttributes<HTMLDivElement> {
 }
-declare const DrawerContent: react.ForwardRefExoticComponent<DrawerContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: React$1.ForwardRefExoticComponent<DrawerContentProps & React$1.RefAttributes<HTMLDivElement>>;
 interface DrawerTitleProps extends DialogPrimitive.DialogTitleProps {
 }
-declare const DrawerTitle: react.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerTitle: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
 interface DrawerDescriptionProps extends DialogPrimitive.DialogDescriptionProps {
 }
-declare const DrawerDescription: react.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const DrawerDescription: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
+interface DrawerHeaderProps extends PrimitiveProps, React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare const DrawerHeader: React$1.ForwardRefExoticComponent<DrawerHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 interface DrawerCloseButtonProps extends DialogPrimitive.DialogCloseProps {
 }
-declare const DrawerCloseButton: react.ForwardRefExoticComponent<DrawerCloseButtonProps & react.RefAttributes<HTMLButtonElement>>;
-interface DrawerHandleProps extends react.HTMLAttributes<HTMLDivElement> {
+declare const DrawerCloseButton: React$1.ForwardRefExoticComponent<DrawerCloseButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+interface DrawerHandleProps extends React$1.HTMLAttributes<HTMLDivElement> {
     preventCycle?: boolean;
 }
-declare const DrawerHandle: react.ForwardRefExoticComponent<DrawerHandleProps & react.RefAttributes<HTMLDivElement>>;
+declare const DrawerHandle: React$1.ForwardRefExoticComponent<DrawerHandleProps & React$1.RefAttributes<HTMLDivElement>>;
 
 type DrawerContextValue = ReturnType<typeof useDrawer>;
 declare function useDrawerContext(): {
     activeSnapPoint: string | number | null;
     snapPoints: (string | number)[] | undefined;
-    setActiveSnapPoint: (value: react.SetStateAction<string | number | null>) => void;
-    drawerRef: react.RefObject<HTMLDivElement | null>;
-    overlayRef: react.RefObject<HTMLDivElement | null>;
+    setActiveSnapPoint: (value: string | number | ((prev: string | number | null) => string | number | null) | null, details?: undefined) => void;
+    drawerRef: React$1.RefObject<HTMLDivElement | null>;
+    overlayRef: React$1.RefObject<HTMLDivElement | null>;
     shouldOverlayAnimate: boolean;
-    onOpenChange: ((open: boolean) => void) | undefined;
+    onOpenChange: ((open: boolean, details?: ({
+        reason?: "closeButton" | undefined;
+    } & {
+        event: MouseEvent;
+    }) | ({
+        reason?: "escapeKeyDown" | undefined;
+    } & {
+        event: KeyboardEvent;
+    }) | ({
+        reason?: "interactOutside" | undefined;
+    } & {
+        event: PointerEvent | FocusEvent;
+    }) | ({
+        reason?: "drag" | undefined;
+    } & {
+        event: PointerEvent;
+    }) | ({
+        reason?: "handleClickOnLastSnapPoint" | undefined;
+    } & {
+        event: MouseEvent;
+    })) => void) | undefined;
     onPress: (event: React.PointerEvent<HTMLDivElement>) => void;
     onRelease: (event: React.PointerEvent<HTMLDivElement> | null) => void;
     onDrag: (event: React.PointerEvent<HTMLDivElement>) => void;
@@ -181,8 +230,28 @@ declare function useDrawerContext(): {
     isOpen: boolean;
     isDragging: boolean;
     shouldFade: boolean;
-    closeDrawer: (fromWithin?: boolean) => void;
-    keyboardIsOpen: react.RefObject<boolean>;
+    closeDrawer: (fromWithin?: boolean, details?: ({
+        reason?: "closeButton" | undefined;
+    } & {
+        event: MouseEvent;
+    }) | ({
+        reason?: "escapeKeyDown" | undefined;
+    } & {
+        event: KeyboardEvent;
+    }) | ({
+        reason?: "interactOutside" | undefined;
+    } & {
+        event: PointerEvent | FocusEvent;
+    }) | ({
+        reason?: "drag" | undefined;
+    } & {
+        event: PointerEvent;
+    }) | ({
+        reason?: "handleClickOnLastSnapPoint" | undefined;
+    } & {
+        event: MouseEvent;
+    })) => void;
+    keyboardIsOpen: React$1.RefObject<boolean>;
     modal: boolean;
     snapPointsOffset: number[];
     activeSnapPointIndex: number | null;
@@ -190,16 +259,39 @@ declare function useDrawerContext(): {
     noBodyStyles: boolean;
     container: HTMLElement | null | undefined;
     autoFocus: boolean;
-    setHasBeenOpened: react.Dispatch<react.SetStateAction<boolean>>;
-    setIsOpen: (value: react.SetStateAction<boolean>) => void;
+    setHasBeenOpened: React$1.Dispatch<React$1.SetStateAction<boolean>>;
+    setIsOpen: (value: boolean | ((prev: boolean) => boolean), details?: (({
+        reason?: "closeButton" | undefined;
+    } & {
+        event: MouseEvent;
+    }) | ({
+        reason?: "escapeKeyDown" | undefined;
+    } & {
+        event: KeyboardEvent;
+    }) | ({
+        reason?: "interactOutside" | undefined;
+    } & {
+        event: PointerEvent | FocusEvent;
+    }) | ({
+        reason?: "drag" | undefined;
+    } & {
+        event: PointerEvent;
+    }) | ({
+        reason?: "handleClickOnLastSnapPoint" | undefined;
+    } & {
+        event: MouseEvent;
+    })) | undefined) => void;
     closeOnInteractOutside: boolean;
     closeOnEscape: boolean;
+    hasAnimationDone: boolean;
+    closeButtonRef: (node: HTMLButtonElement | null) => void;
+    isCloseButtonRendered: boolean;
 };
 
 declare namespace Drawer_namespace {
-  export { DrawerBackdrop as Backdrop, DrawerCloseButton as CloseButton, DrawerContent as Content, DrawerDescription as Description, DrawerHandle as Handle, DrawerPositioner as Positioner, DrawerRoot as Root, DrawerTitle as Title, DrawerTrigger as Trigger };
-  export type { DrawerBackdropProps as BackdropProps, DrawerCloseButtonProps as CloseButtonProps, DrawerContentProps as ContentProps, DrawerDescriptionProps as DescriptionProps, DrawerHandleProps as HandleProps, DrawerPositionerProps as PositionerProps, DrawerRootProps as RootProps, DrawerTitleProps as TitleProps, DrawerTriggerProps as TriggerProps };
+  export { DrawerBackdrop as Backdrop, DrawerCloseButton as CloseButton, DrawerContent as Content, DrawerDescription as Description, DrawerHandle as Handle, DrawerHeader as Header, DrawerPositioner as Positioner, DrawerRoot as Root, DrawerTitle as Title, DrawerTrigger as Trigger };
+  export type { DrawerBackdropProps as BackdropProps, DrawerCloseButtonProps as CloseButtonProps, DrawerContentProps as ContentProps, DrawerDescriptionProps as DescriptionProps, DrawerHandleProps as HandleProps, DrawerHeaderProps as HeaderProps, DrawerPositionerProps as PositionerProps, DrawerRootProps as RootProps, DrawerTitleProps as TitleProps, DrawerTriggerProps as TriggerProps };
 }
 
-export { Drawer_namespace as Drawer, DrawerBackdrop, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerHandle, DrawerPositioner, DrawerRoot, DrawerTitle, DrawerTrigger, useDrawer, useDrawerContext };
-export type { DrawerBackdropProps, DrawerCloseButtonProps, DrawerContentProps, DrawerContextValue, DrawerDescriptionProps, DrawerHandleProps, DrawerPositionerProps, DrawerRootProps, DrawerTitleProps, DrawerTriggerProps, UseDrawerProps };
+export { Drawer_namespace as Drawer, DrawerBackdrop, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerHandle, DrawerHeader, DrawerPositioner, DrawerRoot, DrawerTitle, DrawerTrigger, useDrawer, useDrawerContext };
+export type { DrawerBackdropProps, DrawerCloseButtonProps, DrawerContentProps, DrawerContextValue, DrawerDescriptionProps, DrawerHandleProps, DrawerHeaderProps, DrawerPositionerProps, DrawerRootProps, DrawerTitleProps, DrawerTriggerProps, UseDrawerProps };

package/lib/index.js

@@ -1,5 +1,5 @@
-import { D as DrawerBackdrop, a as DrawerCloseButton, b as DrawerContent, c as DrawerDescription, d as DrawerHandle, e as DrawerPositioner, f as DrawerRoot, g as DrawerTitle, h as DrawerTrigger } from './Drawer-12s-1gup1cyj.js';
-export { u as useDrawer, i as useDrawerContext } from './Drawer-12s-1gup1cyj.js';
+import { D as DrawerBackdrop, a as DrawerCloseButton, b as DrawerContent, c as DrawerDescription, d as DrawerHandle, e as DrawerHeader, f as DrawerPositioner, g as DrawerRoot, h as DrawerTitle, i as DrawerTrigger } from './Drawer-12s-DnXlK1K0.js';
+export { u as useDrawer, j as useDrawerContext } from './Drawer-12s-DnXlK1K0.js';
 
 var Drawer_namespace = {
   __proto__: null,
@@ -8,10 +8,11 @@ var Drawer_namespace = {
   Content: DrawerContent,
   Description: DrawerDescription,
   Handle: DrawerHandle,
+  Header: DrawerHeader,
   Positioner: DrawerPositioner,
   Root: DrawerRoot,
   Title: DrawerTitle,
   Trigger: DrawerTrigger
 };
 
-export { Drawer_namespace as Drawer, DrawerBackdrop, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerHandle, DrawerPositioner, DrawerRoot, DrawerTitle, DrawerTrigger };
+export { Drawer_namespace as Drawer, DrawerBackdrop, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerHandle, DrawerHeader, DrawerPositioner, DrawerRoot, DrawerTitle, DrawerTrigger };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-drawer",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -30,7 +30,7 @@
     "@radix-ui/react-compose-refs": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-use-callback-ref": "^1.1.0",
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@seed-design/react-use-controllable-state": "1.0.0",
     "@seed-design/dom-utils": "1.0.0",
     "@seed-design/react-primitive": "1.0.0"
   },

package/src/Drawer.namespace.ts

@@ -4,6 +4,7 @@ export {
   DrawerContent as Content,
   DrawerDescription as Description,
   DrawerHandle as Handle,
+  DrawerHeader as Header,
   DrawerPositioner as Positioner,
   DrawerRoot as Root,
   DrawerTitle as Title,
@@ -13,6 +14,7 @@ export {
   type DrawerContentProps as ContentProps,
   type DrawerDescriptionProps as DescriptionProps,
   type DrawerHandleProps as HandleProps,
+  type DrawerHeaderProps as HeaderProps,
   type DrawerPositionerProps as PositionerProps,
   type DrawerRootProps as RootProps,
   type DrawerTitleProps as TitleProps,

package/src/Drawer.tsx

@@ -64,13 +64,20 @@ export interface DrawerBackdropProps
     React.HTMLAttributes<HTMLDivElement> {}
 
 export const DrawerBackdrop = forwardRef<HTMLDivElement, DrawerBackdropProps>((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: React.PointerEvent<HTMLDivElement>) => 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;
   }
@@ -83,6 +90,7 @@ export const DrawerBackdrop = forwardRef<HTMLDivElement, DrawerBackdropProps>((p
       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}
     />
   );
@@ -114,6 +122,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
     closeOnInteractOutside,
     closeOnEscape,
     dismissible,
+    hasAnimationDone,
   } = useDrawerContext();
   // Needed to use transition instead of animations
   const [delayedSnapPoints, setDelayedSnapPoints] = useState(false);
@@ -170,6 +179,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
       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"}
@@ -253,13 +263,13 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
       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);
       }}
@@ -276,19 +286,30 @@ export interface DrawerDescriptionProps extends DialogPrimitive.DialogDescriptio
 
 export const DrawerDescription = DialogPrimitive.Description;
 
+export interface DrawerHeaderProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>((props, ref) => {
+  const { isCloseButtonRendered } = useDrawerContext();
+  return (
+    <Primitive.div ref={ref} data-show-close-button={dataAttr(isCloseButtonRendered)} {...props} />
+  );
+});
+DrawerHeader.displayName = "DrawerHeader";
+
 export interface DrawerCloseButtonProps extends DialogPrimitive.DialogCloseProps {}
 
 export const DrawerCloseButton = forwardRef<HTMLButtonElement, DrawerCloseButtonProps>(
   (props, ref) => {
-    const api = useDrawerContext();
+    const { closeButtonRef, setIsOpen } = useDrawerContext();
+    const composedRef = useComposedRefs(ref, closeButtonRef);
     return (
       <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 });
         }}
       />
     );
@@ -321,18 +342,18 @@ export const DrawerHandle = forwardRef<HTMLDivElement, DrawerHandleProps>((props
   const closeTimeoutIdRef = useRef<number | null>(null);
   const shouldCancelInteractionRef = useRef(false);
 
-  function handleStartCycle() {
+  function handleStartCycle(event: React.MouseEvent<HTMLDivElement>) {
     // 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: React.MouseEvent<HTMLDivElement>) {
     // Prevent accidental taps while resizing drawer
     if (isDragging || preventCycle || shouldCancelInteractionRef.current) {
       handleCancelInteraction();
@@ -343,7 +364,7 @@ export const DrawerHandle = forwardRef<HTMLDivElement, DrawerHandleProps>((props
 
     if (!snapPoints || snapPoints.length === 0) {
       if (!dismissible) {
-        closeDrawer();
+        closeDrawer(false, { reason: "handleClickOnLastSnapPoint", event: event.nativeEvent });
       }
       return;
     }
@@ -351,7 +372,7 @@ export const DrawerHandle = forwardRef<HTMLDivElement, DrawerHandleProps>((props
     const isLastSnapPoint = activeSnapPoint === snapPoints[snapPoints.length - 1];
 
     if (isLastSnapPoint && dismissible) {
-      closeDrawer();
+      closeDrawer(false, { reason: "handleClickOnLastSnapPoint", event: event.nativeEvent });
       return;
     }
 

package/src/index.ts

@@ -4,6 +4,7 @@ export {
   DrawerContent,
   DrawerDescription,
   DrawerHandle,
+  DrawerHeader,
   DrawerPositioner,
   DrawerRoot,
   DrawerTitle,
@@ -13,6 +14,7 @@ export {
   type DrawerContentProps,
   type DrawerDescriptionProps,
   type DrawerHandleProps,
+  type DrawerHeaderProps,
   type DrawerPositionerProps,
   type DrawerRootProps,
   type DrawerTitleProps,

package/src/use-snap-points.ts

@@ -1,4 +1,4 @@
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useControllableState } from "@seed-design/react-use-controllable-state";
 import React from "react";
 import { TRANSITIONS, VELOCITY_THRESHOLD } from "./constants";
 import { isVertical, set } from "./helpers";
@@ -196,11 +196,13 @@ export function useSnapPoints({
     closeDrawer,
     velocity,
     dismissible,
+    event,
   }: {
     draggedDistance: number;
-    closeDrawer: () => void;
+    closeDrawer: (fromWithin: boolean, details: { reason: "drag"; event: PointerEvent }) => void;
     velocity: number;
     dismissible: boolean;
+    event: PointerEvent;
   }) {
     if (fadeFromIndex === undefined) return;
 
@@ -219,7 +221,7 @@ export function useSnapPoints({
     }
 
     if (!snapToSequentialPoint && velocity > 2 && !hasDraggedUp) {
-      if (dismissible) closeDrawer();
+      if (dismissible) closeDrawer(false, { reason: "drag", event });
       else snapToPoint(snapPointsOffset[0]); // snap to initial point
       return;
     }
@@ -247,7 +249,7 @@ export function useSnapPoints({
       }
 
       if (isFirst && dragDirection < 0 && dismissible) {
-        closeDrawer();
+        closeDrawer(false, { reason: "drag", event });
       }
 
       if (activeSnapPointIndex === null) return;

package/src/useDrawer.ts

@@ -1,4 +1,5 @@
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useControllableState } from "@seed-design/react-use-controllable-state";
+import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isIOS, isMobileFirefox } from "./browser";
 import {
@@ -13,6 +14,21 @@ import { dampenValue, getTranslate, isInput, isVertical, reset, set } from "./he
 import { usePositionFixed } from "./use-position-fixed";
 import { useSnapPoints } from "./use-snap-points";
 
+interface DrawerReasonToDetailMap {
+  // we might add synthetic events later if needed; currently we aim consistency; DismissableLayer gives us native events
+  closeButton: { event: MouseEvent };
+  escapeKeyDown: { event: KeyboardEvent };
+  interactOutside: { event: PointerEvent | FocusEvent };
+  drag: { event: PointerEvent };
+  handleClickOnLastSnapPoint: { event: MouseEvent };
+}
+
+type DrawerChangeDetails = {
+  [R in keyof DrawerReasonToDetailMap]: {
+    reason?: R;
+  } & DrawerReasonToDetailMap[R];
+}[keyof DrawerReasonToDetailMap];
+
 export interface UseDrawerProps {
   activeSnapPoint?: number | string | null;
   setActiveSnapPoint?: (snapPoint: number | string | null) => void;
@@ -29,7 +45,7 @@ export interface UseDrawerProps {
    * @default true
    */
   noBodyStyles?: boolean;
-  onOpenChange?: (open: boolean) => void;
+  onOpenChange?: (open: boolean, details?: DrawerChangeDetails) => void;
   /**
    * Duration for which the drawer is not draggable after scrolling content inside of the drawer.
    * @default 500ms
@@ -149,11 +165,11 @@ export function useDrawer(props: UseDrawerProps) {
     closeOnEscape = true,
   } = props;
 
-  const [isOpen = false, setIsOpen] = useControllableState({
+  const [isOpen = false, setIsOpen] = useControllableState<boolean, DrawerChangeDetails>({
     defaultProp: defaultOpen,
     prop: openProp,
-    onChange: (o: boolean) => {
-      onOpenChange?.(o);
+    onChange: (o: boolean, details?: DrawerChangeDetails) => {
+      onOpenChange?.(o, details);
 
       if (!o && !nested) {
         restorePositionSetting();
@@ -178,9 +194,15 @@ export function useDrawer(props: UseDrawerProps) {
   });
 
   const [hasBeenOpened, setHasBeenOpened] = useState<boolean>(false);
+  const [hasAnimationDone, setHasAnimationDone] = useState<boolean>(false);
   const [isDragging, setIsDragging] = useState<boolean>(false);
   const [shouldOverlayAnimate, setShouldOverlayAnimate] = useState<boolean>(false);
 
+  const [isCloseButtonRendered, setIsCloseButtonRendered] = useState<boolean>(false);
+  const closeButtonRef = useCallback((node: HTMLButtonElement | null) => {
+    setIsCloseButtonRendered(!!node);
+  }, []);
+
   const overlayRef = useRef<HTMLDivElement>(null);
   const openTime = useRef<Date | null>(null);
   const dragStartTime = useRef<Date | null>(null);
@@ -419,12 +441,12 @@ export function useDrawer(props: UseDrawerProps) {
   }, [isDragging]);
 
   const closeDrawer = useCallback(
-    (fromWithin?: boolean) => {
+    (fromWithin?: boolean, details?: DrawerChangeDetails) => {
       cancelDrag();
       onClose?.();
 
       if (!fromWithin) {
-        setIsOpen(false);
+        setIsOpen(false, details);
       }
 
       if (fadeFromIndex !== undefined && fadeFromIndex > 0 && activeSnapPointIndex === 0) {
@@ -489,6 +511,7 @@ export function useDrawer(props: UseDrawerProps) {
         closeDrawer,
         velocity,
         dismissible,
+        event: event.nativeEvent,
       });
       onReleaseProp?.(event, true);
       return;
@@ -501,7 +524,7 @@ export function useDrawer(props: UseDrawerProps) {
     }
 
     if (velocity > VELOCITY_THRESHOLD) {
-      closeDrawer();
+      closeDrawer(false, { reason: "drag", event: event.nativeEvent });
       onReleaseProp?.(event, false);
       return;
     }
@@ -520,7 +543,7 @@ export function useDrawer(props: UseDrawerProps) {
       Math.abs(swipeAmount) >=
       (isHorizontalSwipe ? visibleDrawerWidth : visibleDrawerHeight) * closeThreshold
     ) {
-      closeDrawer();
+      closeDrawer(false, { reason: "drag", event: event.nativeEvent });
       onReleaseProp?.(event, false);
       return;
     }
@@ -607,12 +630,32 @@ export function useDrawer(props: UseDrawerProps) {
     }
   }, [modal]);
 
+  // Effect 1: Track drawer open state
   useEffect(() => {
     if (isOpen) {
       setHasBeenOpened(true);
     }
   }, [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);
@@ -657,6 +700,9 @@ export function useDrawer(props: UseDrawerProps) {
       setIsOpen,
       closeOnInteractOutside,
       closeOnEscape,
+      hasAnimationDone,
+      closeButtonRef,
+      isCloseButtonRendered,
     }),
     [
       activeSnapPoint,
@@ -683,6 +729,9 @@ export function useDrawer(props: UseDrawerProps) {
       onRelease,
       onDrag,
       onPress,
+      hasAnimationDone,
+      closeButtonRef,
+      isCloseButtonRendered,
     ],
   );
 }