@seed-design/react-drawer 1.0.4 → 1.0.6

package/lib/{Drawer-12s-BOMSoUDc.js → Drawer-12s-BdeYHia6.js}

@@ -5,7 +5,7 @@ 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 React, { useState, useCallback, useRef, useEffect, useMemo, createContext, useContext, forwardRef } from 'react';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 
 function isMobileFirefox() {
@@ -482,8 +482,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);
@@ -492,7 +497,6 @@ function useDrawer(props) {
     const isAllowedToDrag = useRef(false);
     const pointerStart = useRef(0);
     const keyboardIsOpen = useRef(false);
-    const shouldAnimate = useRef(!defaultOpen);
     const previousDiffFromInitial = useRef(0);
     const drawerRef = useRef(null);
     const drawerHeightRef = useRef(drawerRef.current?.getBoundingClientRect().height || 0);
@@ -746,11 +750,6 @@ function useDrawer(props) {
     }, [
         isOpen
     ]);
-    useEffect(()=>{
-        window.requestAnimationFrame(()=>{
-            shouldAnimate.current = true;
-        });
-    }, []);
     useEffect(()=>{
         function onVisualViewportChange() {
             if (!drawerRef.current || !repositionInputs) return;
@@ -812,6 +811,7 @@ function useDrawer(props) {
     }, [
         modal
     ]);
+    // Effect 1: Track drawer open state
     useEffect(()=>{
         if (isOpen) {
             setHasBeenOpened(true);
@@ -819,6 +819,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);
@@ -845,7 +863,6 @@ function useDrawer(props) {
             onRelease,
             onDrag,
             dismissible,
-            shouldAnimate,
             handleOnly,
             isOpen,
             isDragging,
@@ -862,7 +879,10 @@ function useDrawer(props) {
             setHasBeenOpened,
             setIsOpen,
             closeOnInteractOutside,
-            closeOnEscape
+            closeOnEscape,
+            hasAnimationDone,
+            closeButtonRef,
+            isCloseButtonRendered
         }), [
         activeSnapPoint,
         snapPoints,
@@ -887,7 +907,10 @@ function useDrawer(props) {
         closeOnEscape,
         onRelease,
         onDrag,
-        onPress
+        onPress,
+        hasAnimationDone,
+        closeButtonRef,
+        isCloseButtonRendered
     ]);
 }
 
@@ -937,11 +960,10 @@ const DrawerPositioner = /*#__PURE__*/ forwardRef((props, ref)=>{
 });
 DrawerPositioner.displayName = "DrawerPositioner";
 const DrawerBackdrop = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { overlayRef, onRelease, modal, snapPoints, isOpen, shouldFade, shouldAnimate, 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;
     }
@@ -950,16 +972,16 @@ const DrawerBackdrop = /*#__PURE__*/ forwardRef((props, ref)=>{
         onMouseUp: onMouseUp,
         "data-snap-points": isOpen && hasSnapPoints ? "true" : "false",
         "data-snap-points-overlay": isOpen && shouldFade ? "true" : "false",
-        "data-animate": shouldAnimate?.current ? "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, shouldAnimate, 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);
@@ -1006,10 +1028,10 @@ 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",
-        "data-animate": shouldAnimate?.current ? "true" : "false",
         ...restProps,
         ref: composedRef,
         style: snapPointsOffset && snapPointsOffset.length > 0 ? {
@@ -1042,10 +1064,10 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
             }
         },
         onFocusOutside: (e)=>{
-            if (!modal) {
-                e.preventDefault();
-                return;
-            }
+            props.onFocusOutside?.(e);
+            // Always prevent focusOutside to avoid conflicts when focus moves between modals
+            // (e.g., when Dialog closes and restores focus while BottomSheet is opening)
+            e.preventDefault();
         },
         onPointerMove: (event)=>{
             lastKnownPointerEventRef.current = event;
@@ -1082,7 +1104,8 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
             }
         },
         onInteractOutside: (e)=>{
-            if (dismissible && closeOnInteractOutside) {
+            // Only close if event is not prevented (e.g., by onFocusOutside or onPointerDownOutside)
+            if (dismissible && closeOnInteractOutside && !e.defaultPrevented) {
                 closeDrawer();
             }
             props.onInteractOutside?.(e);
@@ -1098,15 +1121,25 @@ 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);
         }
     });
 });
@@ -1187,4 +1220,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-Yr_NcCoF.cjs → Drawer-12s-DriAYAR2.cjs}

@@ -505,8 +505,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);
@@ -515,7 +520,6 @@ function useDrawer(props) {
     const isAllowedToDrag = React.useRef(false);
     const pointerStart = React.useRef(0);
     const keyboardIsOpen = React.useRef(false);
-    const shouldAnimate = React.useRef(!defaultOpen);
     const previousDiffFromInitial = React.useRef(0);
     const drawerRef = React.useRef(null);
     const drawerHeightRef = React.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
@@ -769,11 +773,6 @@ function useDrawer(props) {
     }, [
         isOpen
     ]);
-    React.useEffect(()=>{
-        window.requestAnimationFrame(()=>{
-            shouldAnimate.current = true;
-        });
-    }, []);
     React.useEffect(()=>{
         function onVisualViewportChange() {
             if (!drawerRef.current || !repositionInputs) return;
@@ -835,6 +834,7 @@ function useDrawer(props) {
     }, [
         modal
     ]);
+    // Effect 1: Track drawer open state
     React.useEffect(()=>{
         if (isOpen) {
             setHasBeenOpened(true);
@@ -842,6 +842,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);
@@ -868,7 +886,6 @@ function useDrawer(props) {
             onRelease,
             onDrag,
             dismissible,
-            shouldAnimate,
             handleOnly,
             isOpen,
             isDragging,
@@ -885,7 +902,10 @@ function useDrawer(props) {
             setHasBeenOpened,
             setIsOpen,
             closeOnInteractOutside,
-            closeOnEscape
+            closeOnEscape,
+            hasAnimationDone,
+            closeButtonRef,
+            isCloseButtonRendered
         }), [
         activeSnapPoint,
         snapPoints,
@@ -910,7 +930,10 @@ function useDrawer(props) {
         closeOnEscape,
         onRelease,
         onDrag,
-        onPress
+        onPress,
+        hasAnimationDone,
+        closeButtonRef,
+        isCloseButtonRendered
     ]);
 }
 
@@ -960,11 +983,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, shouldAnimate, 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;
     }
@@ -973,16 +995,16 @@ const DrawerBackdrop = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         onMouseUp: onMouseUp,
         "data-snap-points": isOpen && hasSnapPoints ? "true" : "false",
         "data-snap-points-overlay": isOpen && shouldFade ? "true" : "false",
-        "data-animate": shouldAnimate?.current ? "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, shouldAnimate, 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);
@@ -1029,10 +1051,10 @@ 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",
-        "data-animate": shouldAnimate?.current ? "true" : "false",
         ...restProps,
         ref: composedRef,
         style: snapPointsOffset && snapPointsOffset.length > 0 ? {
@@ -1065,10 +1087,10 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
             }
         },
         onFocusOutside: (e)=>{
-            if (!modal) {
-                e.preventDefault();
-                return;
-            }
+            props.onFocusOutside?.(e);
+            // Always prevent focusOutside to avoid conflicts when focus moves between modals
+            // (e.g., when Dialog closes and restores focus while BottomSheet is opening)
+            e.preventDefault();
         },
         onPointerMove: (event)=>{
             lastKnownPointerEventRef.current = event;
@@ -1105,7 +1127,8 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
             }
         },
         onInteractOutside: (e)=>{
-            if (dismissible && closeOnInteractOutside) {
+            // Only close if event is not prevented (e.g., by onFocusOutside or onPointerDownOutside)
+            if (dismissible && closeOnInteractOutside && !e.defaultPrevented) {
                 closeDrawer();
             }
             props.onInteractOutside?.(e);
@@ -1121,15 +1144,25 @@ 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);
         }
     });
 });
@@ -1215,6 +1248,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-Yr_NcCoF.cjs');
+var Drawer12s = require('./Drawer-12s-DriAYAR2.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,7 +1,7 @@
 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';
 
 interface UseDrawerProps {
     activeSnapPoint?: number | string | null;
@@ -55,7 +55,7 @@ interface UseDrawerProps {
      */
     direction?: "top" | "bottom" | "left" | "right";
     /**
-     * Opened by default, skips initial enter animation. Still reacts to `open` state changes
+     * Opened by default. Still reacts to `open` state changes
      * @default false
      */
     defaultOpen?: boolean;
@@ -106,22 +106,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: React$1.SetStateAction<string | number | null>) => void;
+    drawerRef: React$1.RefObject<HTMLDivElement | null>;
+    overlayRef: React$1.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;
     dismissible: boolean;
-    shouldAnimate: react.RefObject<boolean>;
     handleOnly: boolean;
     isOpen: boolean;
     isDragging: boolean;
     shouldFade: boolean;
     closeDrawer: (fromWithin?: boolean) => void;
-    keyboardIsOpen: react.RefObject<boolean>;
+    keyboardIsOpen: React$1.RefObject<boolean>;
     modal: boolean;
     snapPointsOffset: number[];
     activeSnapPointIndex: number | null;
@@ -129,62 +128,67 @@ 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$1.Dispatch<React$1.SetStateAction<boolean>>;
+    setIsOpen: (value: React$1.SetStateAction<boolean>) => 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: React$1.SetStateAction<string | number | null>) => void;
+    drawerRef: React$1.RefObject<HTMLDivElement | null>;
+    overlayRef: React$1.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;
     dismissible: boolean;
-    shouldAnimate: react.RefObject<boolean>;
     handleOnly: boolean;
     isOpen: boolean;
     isDragging: boolean;
     shouldFade: boolean;
     closeDrawer: (fromWithin?: boolean) => void;
-    keyboardIsOpen: react.RefObject<boolean>;
+    keyboardIsOpen: React$1.RefObject<boolean>;
     modal: boolean;
     snapPointsOffset: number[];
     activeSnapPointIndex: number | null;
@@ -192,16 +196,19 @@ 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: React$1.SetStateAction<boolean>) => 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-BOMSoUDc.js';
-export { u as useDrawer, i as useDrawerContext } from './Drawer-12s-BOMSoUDc.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-BdeYHia6.js';
+export { u as useDrawer, j as useDrawerContext } from './Drawer-12s-BdeYHia6.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.4",
+  "version": "1.0.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

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

@@ -71,14 +71,13 @@ export const DrawerBackdrop = forwardRef<HTMLDivElement, DrawerBackdropProps>((p
     snapPoints,
     isOpen,
     shouldFade,
-    shouldAnimate,
     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;
   }
@@ -89,9 +88,9 @@ export const DrawerBackdrop = forwardRef<HTMLDivElement, DrawerBackdropProps>((p
       onMouseUp={onMouseUp}
       data-snap-points={isOpen && hasSnapPoints ? "true" : "false"}
       data-snap-points-overlay={isOpen && shouldFade ? "true" : "false"}
-      data-animate={shouldAnimate?.current ? "true" : "false"}
       data-should-overlay-animate={shouldOverlayAnimate ? "true" : "false"}
       data-open={dataAttr(isOpen)}
+      data-animation-done={hasAnimationDone ? "true" : "false"}
       {...props}
     />
   );
@@ -118,12 +117,12 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
     snapPoints,
     container,
     handleOnly,
-    shouldAnimate,
     autoFocus,
     closeDrawer,
     closeOnInteractOutside,
     closeOnEscape,
     dismissible,
+    hasAnimationDone,
   } = useDrawerContext();
   // Needed to use transition instead of animations
   const [delayedSnapPoints, setDelayedSnapPoints] = useState(false);
@@ -180,10 +179,10 @@ 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"}
-      data-animate={shouldAnimate?.current ? "true" : "false"}
       {...restProps}
       ref={composedRef}
       style={
@@ -220,10 +219,10 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
         }
       }}
       onFocusOutside={(e) => {
-        if (!modal) {
-          e.preventDefault();
-          return;
-        }
+        props.onFocusOutside?.(e);
+        // Always prevent focusOutside to avoid conflicts when focus moves between modals
+        // (e.g., when Dialog closes and restores focus while BottomSheet is opening)
+        e.preventDefault();
       }}
       onPointerMove={(event) => {
         lastKnownPointerEventRef.current = event;
@@ -262,7 +261,8 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
         }
       }}
       onInteractOutside={(e) => {
-        if (dismissible && closeOnInteractOutside) {
+        // Only close if event is not prevented (e.g., by onFocusOutside or onPointerDownOutside)
+        if (dismissible && closeOnInteractOutside && !e.defaultPrevented) {
           closeDrawer();
         }
         props.onInteractOutside?.(e);
@@ -286,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);
         }}
       />
     );

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/useDrawer.ts

@@ -65,7 +65,7 @@ export interface UseDrawerProps {
    */
   direction?: "top" | "bottom" | "left" | "right";
   /**
-   * Opened by default, skips initial enter animation. Still reacts to `open` state changes
+   * Opened by default. Still reacts to `open` state changes
    * @default false
    */
   defaultOpen?: boolean;
@@ -178,9 +178,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);
@@ -189,7 +195,6 @@ export function useDrawer(props: UseDrawerProps) {
   const isAllowedToDrag = useRef<boolean>(false);
   const pointerStart = useRef(0);
   const keyboardIsOpen = useRef(false);
-  const shouldAnimate = useRef(!defaultOpen);
   const previousDiffFromInitial = useRef(0);
   const drawerRef = useRef<HTMLDivElement>(null);
   const drawerHeightRef = useRef(drawerRef.current?.getBoundingClientRect().height || 0);
@@ -543,12 +548,6 @@ export function useDrawer(props: UseDrawerProps) {
     };
   }, [isOpen]);
 
-  useEffect(() => {
-    window.requestAnimationFrame(() => {
-      shouldAnimate.current = true;
-    });
-  }, []);
-
   useEffect(() => {
     function onVisualViewportChange() {
       if (!drawerRef.current || !repositionInputs) return;
@@ -614,12 +613,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);
@@ -647,7 +666,6 @@ export function useDrawer(props: UseDrawerProps) {
       onRelease,
       onDrag,
       dismissible,
-      shouldAnimate,
       handleOnly,
       isOpen,
       isDragging,
@@ -665,6 +683,9 @@ export function useDrawer(props: UseDrawerProps) {
       setIsOpen,
       closeOnInteractOutside,
       closeOnEscape,
+      hasAnimationDone,
+      closeButtonRef,
+      isCloseButtonRendered,
     }),
     [
       activeSnapPoint,
@@ -691,6 +712,9 @@ export function useDrawer(props: UseDrawerProps) {
       onRelease,
       onDrag,
       onPress,
+      hasAnimationDone,
+      closeButtonRef,
+      isCloseButtonRendered,
     ],
   );
 }