@seed-design/react-drawer 1.0.11 → 2.0.0

package/lib/{Drawer-12s-DxbsRb10.js → Drawer-12s-5syEwTtq.js}

@@ -1,11 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import { FocusScope } from '@radix-ui/react-focus-scope';
 import { useCallbackRef } from '@radix-ui/react-use-callback-ref';
-import { dataAttr } from '@seed-design/dom-utils';
+import { hideOthers } from 'aria-hidden';
+import { DismissibleLayer } from '@seed-design/react-dismissible-layer';
+import { Presence } from '@seed-design/react-presence';
+import { elementProps, dataAttr, buttonProps, mergeProps } from '@seed-design/dom-utils';
+import { usePreventScroll } from '@seed-design/react-prevent-scroll';
 import { Primitive } from '@seed-design/react-primitive';
-import React, { useState, useCallback, useRef, useEffect, useMemo, createContext, useContext, forwardRef } from 'react';
+import React, { useId, useState, useRef, useCallback, useEffect, useMemo, createContext, useContext, forwardRef } from 'react';
 import { useControllableState } from '@seed-design/react-use-controllable-state';
 
 function isMobileFirefox() {
@@ -18,9 +22,6 @@ function isMac() {
 function isIPhone() {
     return testPlatform(/^iPhone/);
 }
-function isSafari() {
-    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-}
 function isIPad() {
     return testPlatform(/^iPad/) || // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
     isMac() && navigator.maxTouchPoints > 1;
@@ -125,124 +126,6 @@ function dampenValue(v) {
     return 8 * (Math.log(v + 1) - 2);
 }
 
-// This code comes from https://github.com/emilkowalski/vaul/blob/main/src/use-position-fixed.ts
-let previousBodyPosition = null;
-/**
- * This hook is necessary to prevent buggy behavior on iOS devices (need to test on Android).
- * I won't get into too much detail about what bugs it solves, but so far I've found that setting the body to `position: fixed` is the most reliable way to prevent those bugs.
- * Issues that this hook solves:
- * https://github.com/emilkowalski/vaul/issues/435
- * https://github.com/emilkowalski/vaul/issues/433
- * And more that I discovered, but were just not reported.
- */ function usePositionFixed({ isOpen, modal, nested, hasBeenOpened, preventScrollRestoration, noBodyStyles }) {
-    const [activeUrl, setActiveUrl] = React.useState(()=>typeof window !== "undefined" ? window.location.href : "");
-    const scrollPos = React.useRef(0);
-    const setPositionFixed = React.useCallback(()=>{
-        // All browsers on iOS will return true here.
-        if (!isSafari()) return;
-        // If previousBodyPosition is already set, don't set it again.
-        if (previousBodyPosition === null && isOpen && !noBodyStyles) {
-            previousBodyPosition = {
-                position: document.body.style.position,
-                top: document.body.style.top,
-                left: document.body.style.left,
-                height: document.body.style.height,
-                right: "unset"
-            };
-            // Update the dom inside an animation frame
-            const { scrollX, innerHeight } = window;
-            document.body.style.setProperty("position", "fixed", "important");
-            Object.assign(document.body.style, {
-                top: `${-scrollPos.current}px`,
-                left: `${-scrollX}px`,
-                right: "0px",
-                height: "auto"
-            });
-            window.setTimeout(()=>window.requestAnimationFrame(()=>{
-                    // Attempt to check if the bottom bar appeared due to the position change
-                    const bottomBarHeight = innerHeight - window.innerHeight;
-                    if (bottomBarHeight && scrollPos.current >= innerHeight) {
-                        // Move the content further up so that the bottom bar doesn't hide it
-                        document.body.style.top = `${-(scrollPos.current + bottomBarHeight)}px`;
-                    }
-                }), 300);
-        }
-    }, [
-        isOpen
-    ]);
-    const restorePositionSetting = React.useCallback(()=>{
-        // All browsers on iOS will return true here.
-        if (!isSafari()) return;
-        if (previousBodyPosition !== null && !noBodyStyles) {
-            // Convert the position from "px" to Int
-            const y = -parseInt(document.body.style.top, 10);
-            const x = -parseInt(document.body.style.left, 10);
-            // Restore styles
-            Object.assign(document.body.style, previousBodyPosition);
-            window.requestAnimationFrame(()=>{
-                if (preventScrollRestoration && activeUrl !== window.location.href) {
-                    setActiveUrl(window.location.href);
-                    return;
-                }
-                window.scrollTo(x, y);
-            });
-            previousBodyPosition = null;
-        }
-    }, [
-        activeUrl
-    ]);
-    React.useEffect(()=>{
-        function onScroll() {
-            scrollPos.current = window.scrollY;
-        }
-        onScroll();
-        window.addEventListener("scroll", onScroll);
-        return ()=>{
-            window.removeEventListener("scroll", onScroll);
-        };
-    }, []);
-    React.useEffect(()=>{
-        if (!modal) return;
-        return ()=>{
-            if (typeof document === "undefined") return;
-            // Another drawer is opened, safe to ignore the execution
-            const hasDrawerOpened = !!document.querySelector("[data-drawer]");
-            if (hasDrawerOpened) return;
-            restorePositionSetting();
-        };
-    }, [
-        modal,
-        restorePositionSetting
-    ]);
-    React.useEffect(()=>{
-        if (nested || !hasBeenOpened) return;
-        // This is needed to force Safari toolbar to show **before** the drawer starts animating to prevent a gnarly shift from happening
-        if (isOpen) {
-            // avoid for standalone mode (PWA)
-            const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
-            !isStandalone && setPositionFixed();
-            if (!modal) {
-                window.setTimeout(()=>{
-                    restorePositionSetting();
-                }, 500);
-            }
-        } else {
-            restorePositionSetting();
-        }
-    }, [
-        isOpen,
-        hasBeenOpened,
-        activeUrl,
-        modal,
-        nested,
-        setPositionFixed,
-        restorePositionSetting
-    ]);
-    return {
-        restorePositionSetting
-    };
-}
-
 function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, direction = "bottom", container, snapToSequentialPoint }) {
     const [activeSnapPoint, setActiveSnapPoint] = useControllableState({
         prop: activeSnapPointProp,
@@ -468,38 +351,24 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
 }
 
 function useDrawer(props) {
-    const { open: openProp, onOpenChange, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = true, direction = "bottom", defaultOpen = false, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false, closeOnInteractOutside = true, closeOnEscape = true } = props;
+    const { open: openProp, onOpenChange, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, direction = "bottom", defaultOpen = false, snapToSequentialPoint = false, repositionInputs = true, onAnimationEnd, container, autoFocus = true, closeOnInteractOutside = true, closeOnEscape = true, lazyMount: lazyMountProp = false, unmountOnExit: unmountOnExitProp = false } = props;
+    const drawerId = useId();
+    const titleId = `${drawerId}-title`;
+    const descriptionId = `${drawerId}-description`;
     const [isOpen = false, setIsOpen] = useControllableState({
         defaultProp: defaultOpen,
         prop: openProp,
         onChange: (o, details)=>{
             onOpenChange?.(o, details);
-            if (!o && !nested) {
-                restorePositionSetting();
-            }
             setTimeout(()=>{
                 onAnimationEnd?.(o);
             }, TRANSITIONS.EXIT_DURATION * 1000);
-            if (o && !modal) {
-                if (typeof window !== "undefined") {
-                    window.requestAnimationFrame(()=>{
-                        document.body.style.pointerEvents = "auto";
-                    });
-                }
-            }
-            if (!o) {
-                document.body.style.pointerEvents = "auto";
-            }
         }
     });
     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);
@@ -531,14 +400,6 @@ function useDrawer(props) {
         direction,
         snapToSequentialPoint
     });
-    const { restorePositionSetting } = usePositionFixed({
-        isOpen,
-        modal,
-        nested: nested ?? false,
-        hasBeenOpened,
-        preventScrollRestoration,
-        noBodyStyles
-    });
     function onPress(event) {
         if (!dismissible && !snapPoints) return;
         if (drawerRef.current && !drawerRef.current.contains(event.target)) return;
@@ -820,15 +681,6 @@ function useDrawer(props) {
         repositionInputs,
         fixed
     ]);
-    useEffect(()=>{
-        if (!modal) {
-            window.requestAnimationFrame(()=>{
-                document.body.style.pointerEvents = "auto";
-            });
-        }
-    }, [
-        modal
-    ]);
     // Effect 1: Track drawer open state
     useEffect(()=>{
         if (isOpen) {
@@ -869,6 +721,11 @@ function useDrawer(props) {
         snapPoints,
         fadeFromIndex
     ]);
+    const stateProps = useMemo(()=>elementProps({
+            "data-open": dataAttr(isOpen)
+        }), [
+        isOpen
+    ]);
     return useMemo(()=>({
             activeSnapPoint,
             snapPoints,
@@ -891,16 +748,57 @@ function useDrawer(props) {
             snapPointsOffset,
             activeSnapPointIndex,
             direction,
-            noBodyStyles,
             container,
             autoFocus,
             setHasBeenOpened,
             setIsOpen,
             closeOnInteractOutside,
             closeOnEscape,
+            titleId,
+            descriptionId,
+            lazyMount: lazyMountProp,
+            unmountOnExit: unmountOnExitProp,
             hasAnimationDone,
-            closeButtonRef,
-            isCloseButtonRendered
+            triggerProps: buttonProps({
+                ...stateProps,
+                onClick: (e)=>{
+                    if (e.defaultPrevented) return;
+                    setIsOpen(true, {
+                        reason: "trigger",
+                        event: e.nativeEvent
+                    });
+                }
+            }),
+            positionerProps: elementProps({
+                ...stateProps,
+                style: {
+                    pointerEvents: isOpen && modal ? undefined : "none"
+                }
+            }),
+            backdropProps: elementProps({
+                ...stateProps
+            }),
+            titleProps: elementProps({
+                id: titleId,
+                ...stateProps
+            }),
+            descriptionProps: elementProps({
+                id: descriptionId,
+                ...stateProps
+            }),
+            headerProps: elementProps({
+                ...stateProps
+            }),
+            closeButtonProps: buttonProps({
+                ...stateProps,
+                onClick: (e)=>{
+                    if (e.defaultPrevented) return;
+                    setIsOpen(false, {
+                        reason: "closeButton",
+                        event: e.nativeEvent
+                    });
+                }
+            })
         }), [
         activeSnapPoint,
         snapPoints,
@@ -917,7 +815,6 @@ function useDrawer(props) {
         snapPointsOffset,
         activeSnapPointIndex,
         direction,
-        noBodyStyles,
         container,
         autoFocus,
         setIsOpen,
@@ -926,9 +823,12 @@ function useDrawer(props) {
         onRelease,
         onDrag,
         onPress,
+        titleId,
+        descriptionId,
+        lazyMountProp,
+        unmountOnExitProp,
         hasAnimationDone,
-        closeButtonRef,
-        isCloseButtonRendered
+        stateProps
     ]);
 }
 
@@ -943,66 +843,74 @@ function useDrawerContext() {
 }
 
 const DrawerRoot = (props)=>{
-    const { children, defaultOpen, dismissible, modal } = props;
     const api = useDrawer(props);
-    return /*#__PURE__*/ jsx(DialogPrimitive.Root, {
-        defaultOpen: defaultOpen,
-        open: api.isOpen,
-        onOpenChange: (open)=>{
-            if (!dismissible && !open) return;
-            if (open) {
-                api.setHasBeenOpened(true);
-            } else {
-                api.closeDrawer(true);
-            }
-            api.setIsOpen(open);
-        },
-        modal: modal,
-        children: /*#__PURE__*/ jsx(DrawerProvider, {
-            value: api,
-            children: children
-        })
+    return /*#__PURE__*/ jsx(DrawerProvider, {
+        value: api,
+        children: props.children
     });
 };
-const DrawerTrigger = DialogPrimitive.Trigger;
+const DrawerTrigger = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const api = useDrawerContext();
+    return /*#__PURE__*/ jsx(Primitive.button, {
+        ref: ref,
+        ...mergeProps(api.triggerProps, props)
+    });
+});
+DrawerTrigger.displayName = "DrawerTrigger";
 const DrawerPositioner = /*#__PURE__*/ forwardRef((props, ref)=>{
     const api = useDrawerContext();
     return /*#__PURE__*/ jsx(Primitive.div, {
         ref: ref,
-        ...props,
-        style: {
-            pointerEvents: api.isOpen ? undefined : "none",
-            ...props.style
-        }
+        ...mergeProps(api.positionerProps, props)
     });
 });
 DrawerPositioner.displayName = "DrawerPositioner";
 const DrawerBackdrop = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { overlayRef, onRelease, modal, snapPoints, isOpen, shouldFade, shouldOverlayAnimate, hasAnimationDone } = useDrawerContext();
-    const composedRef = useComposedRefs(ref, overlayRef);
+    const { overlayRef, onRelease, modal, snapPoints, isOpen, shouldFade, shouldOverlayAnimate, hasAnimationDone, lazyMount, unmountOnExit } = useDrawerContext();
+    const composedRef = composeRefs(ref, overlayRef);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
     const onMouseUp = useCallbackRef((event)=>onRelease(event));
     if (!modal) {
         return null;
     }
-    return /*#__PURE__*/ jsx(DialogPrimitive.Overlay, {
-        ref: composedRef,
-        onMouseUp: onMouseUp,
-        "data-snap-points": isOpen && hasSnapPoints ? "true" : "false",
-        "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
+    return /*#__PURE__*/ jsx(Presence, {
+        present: isOpen,
+        unmountOnExit: unmountOnExit,
+        lazyMount: lazyMount,
+        children: /*#__PURE__*/ jsx(Primitive.div, {
+            ref: composedRef,
+            onMouseUp: onMouseUp,
+            "data-snap-points": isOpen && hasSnapPoints ? "true" : "false",
+            "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, hasAnimationDone } = useDrawerContext();
+    const { style, ...restProps } = props;
+    const { drawerRef, onPress, onRelease, onDrag, keyboardIsOpen, snapPointsOffset, activeSnapPointIndex, modal, isOpen, direction, snapPoints, container, handleOnly, autoFocus, closeDrawer, closeOnInteractOutside, closeOnEscape, dismissible, hasAnimationDone, titleId, descriptionId, lazyMount, unmountOnExit } = useDrawerContext();
+    // Lock body scroll while the modal drawer is open. Mirrors the `modal` contract: the lock
+    // releases the moment the drawer is non-modal or closed.
+    usePreventScroll({
+        isDisabled: !(modal && isOpen)
+    });
+    const [contentNode, setContentNode] = useState(null);
+    const contentRef = useCallback((el)=>setContentNode(el), []);
+    // aria-hide everything except the content when modal
+    useEffect(()=>{
+        if (!isOpen || !modal || !contentNode) return;
+        return hideOthers(contentNode);
+    }, [
+        isOpen,
+        modal,
+        contentNode
+    ]);
     // Needed to use transition instead of animations
     const [delayedSnapPoints, setDelayedSnapPoints] = useState(false);
-    const composedRef = useComposedRefs(ref, drawerRef);
     const pointerStartRef = useRef(null);
     const lastKnownPointerEventRef = useRef(null);
     const wasBeyondThePointRef = useRef(false);
@@ -1011,7 +919,7 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
     // element the gesture started on (iOS still synthesizes a click on release).
     const draggedRef = useRef(false);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
-    const isDeltaInDirection = (delta, direction, threshold = 0)=>{
+    const isDeltaInDirection = (delta, dir, threshold = 0)=>{
         if (wasBeyondThePointRef.current) return true;
         const deltaY = Math.abs(delta.y);
         const deltaX = Math.abs(delta.x);
@@ -1019,8 +927,8 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
         const dFactor = [
             "bottom",
             "right"
-        ].includes(direction) ? 1 : -1;
-        if (direction === "left" || direction === "right") {
+        ].includes(dir) ? 1 : -1;
+        if (dir === "left" || dir === "right") {
             const isReverseDirection = delta.x * dFactor < 0;
             if (!isReverseDirection && deltaX >= 0 && deltaX <= threshold) {
                 return isDeltaX;
@@ -1046,149 +954,177 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
         wasBeyondThePointRef.current = false;
         onRelease(event);
     }
-    return /*#__PURE__*/ jsx(DialogPrimitive.Content, {
-        "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",
-        ...restProps,
-        ref: composedRef,
-        style: snapPointsOffset && snapPointsOffset.length > 0 ? {
-            "--snap-point-height": `${snapPointsOffset[activeSnapPointIndex ?? 0]}px`,
-            ...style
-        } : style ?? {},
-        onPointerDown: (event)=>{
-            if (handleOnly) return;
-            restProps.onPointerDown?.(event);
-            pointerStartRef.current = {
-                x: event.pageX,
-                y: event.pageY
-            };
-            draggedRef.current = false;
-            onPress(event);
-        },
-        onOpenAutoFocus: (e)=>{
-            onOpenAutoFocus?.(e);
-            if (!autoFocus) {
-                e.preventDefault();
-            }
-        },
-        onPointerDownOutside: (e)=>{
-            onPointerDownOutside?.(e);
-            if (!modal || e.defaultPrevented) {
-                e.preventDefault();
-                return;
-            }
-            if (keyboardIsOpen.current) {
-                keyboardIsOpen.current = false;
-            }
-        },
-        onFocusOutside: (e)=>{
-            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;
-            if (handleOnly) return;
-            restProps.onPointerMove?.(event);
-            if (!pointerStartRef.current) return;
-            const yPosition = event.pageY - pointerStartRef.current.y;
-            const xPosition = event.pageX - pointerStartRef.current.x;
-            const swipeStartThreshold = event.pointerType === "touch" ? 10 : 2;
-            const delta = {
-                x: xPosition,
-                y: yPosition
-            };
-            // Once the pointer travels past the swipe-start threshold the gesture
-            // is a drag, not a tap — remember it so the trailing click can be
-            // suppressed on release (iOS still synthesizes one on the origin).
-            const isBeyondThreshold = Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold;
-            if (isBeyondThreshold) draggedRef.current = true;
-            const isAllowedToSwipe = isDeltaInDirection(delta, direction, swipeStartThreshold);
-            if (isAllowedToSwipe) onDrag(event);
-            else if (isBeyondThreshold) {
-                pointerStartRef.current = null;
-            }
-        },
-        onPointerUp: (event)=>{
-            restProps.onPointerUp?.(event);
-            pointerStartRef.current = null;
-            wasBeyondThePointRef.current = false;
-            onRelease(event);
-        },
-        onPointerOut: (event)=>{
-            restProps.onPointerOut?.(event);
-            handleOnPointerUp(lastKnownPointerEventRef.current);
-        },
-        onContextMenu: (event)=>{
-            restProps.onContextMenu?.(event);
-            if (lastKnownPointerEventRef.current) {
-                handleOnPointerUp(lastKnownPointerEventRef.current);
-            }
-        },
-        onClickCapture: (event)=>{
-            restProps.onClickCapture?.(event);
-            // Swallow the click that follows a drag so dragging the sheet (e.g. a
-            // swipe-to-dismiss started on an item) doesn't also activate that item.
-            // A plain tap leaves draggedRef false and clicks normally.
-            if (draggedRef.current) {
-                event.preventDefault();
-                event.stopPropagation();
-                draggedRef.current = false;
-            }
-        },
-        onInteractOutside: (e)=>{
-            // Only close if event is not prevented (e.g., by onFocusOutside or onPointerDownOutside)
-            if (dismissible && closeOnInteractOutside && !e.defaultPrevented) {
+    return /*#__PURE__*/ jsx(Presence, {
+        present: isOpen,
+        unmountOnExit: unmountOnExit,
+        lazyMount: lazyMount,
+        children: /*#__PURE__*/ jsx(DismissibleLayer, {
+            enabled: isOpen,
+            onEscapeKeyDown: (e)=>{
+                if (e.defaultPrevented) return;
+                if (!dismissible || !closeOnEscape) return;
                 closeDrawer(false, {
-                    reason: "interactOutside",
-                    event: e.detail.originalEvent
+                    reason: "escapeKeyDown",
+                    event: e
                 });
-            }
-            props.onInteractOutside?.(e);
-        },
-        onEscapeKeyDown: (e)=>{
-            if (dismissible && closeOnEscape) {
+            },
+            onPressOutside: (e)=>{
+                if (e.defaultPrevented) return;
+                if (!modal) return;
+                if (keyboardIsOpen.current) keyboardIsOpen.current = false;
+                if (!dismissible || !closeOnInteractOutside) return;
                 closeDrawer(false, {
-                    reason: "escapeKeyDown",
+                    reason: "interactOutside",
                     event: e
                 });
-            }
-            props.onEscapeKeyDown?.(e);
-        }
+            },
+            onFocusOutside: ()=>{
+            // Focus trapping is handled by FocusScope — nothing to do here.
+            // The old Radix architecture needed e.preventDefault() here (PR #1187)
+            // to prevent cascade closes, but the new DismissibleLayer handles
+            // that via onCascadeDismiss instead.
+            },
+            onCascadeDismiss: ({ dismissedParent })=>{
+                closeDrawer(false, {
+                    reason: "cascadeDismiss",
+                    dismissedParent
+                });
+            },
+            children: /*#__PURE__*/ jsx(FocusScope, {
+                asChild: true,
+                loop: modal,
+                trapped: modal && isOpen,
+                onMountAutoFocus: (e)=>{
+                    // prevent FocusScope's default autoFocus behavior
+                    e.preventDefault();
+                    // when autoFocus is true, FocusScope sets the focus to the first tabbable element; otherwise content;
+                    // the desired behavior is to set the focus to the content regardless of whether there are tabbable elements or not when true]
+                    if (autoFocus) {
+                        drawerRef.current?.focus();
+                    }
+                // later, we can do something like:
+                // when trigger has clicked using keyboard, focus the first tabbable element;
+                // when trigger has clicked using mouse, focus the content
+                // -> matches Menu behavior
+                },
+                children: /*#__PURE__*/ jsx(Primitive.div, {
+                    role: "dialog",
+                    "aria-modal": modal,
+                    "aria-labelledby": titleId,
+                    "aria-describedby": descriptionId,
+                    "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",
+                    ...restProps,
+                    ref: composeRefs(ref, drawerRef, contentRef),
+                    style: {
+                        ...snapPointsOffset && snapPointsOffset.length > 0 ? {
+                            "--snap-point-height": `${snapPointsOffset[activeSnapPointIndex ?? 0]}px`,
+                            ...style
+                        } : style,
+                        ...!modal && {
+                            pointerEvents: "auto"
+                        }
+                    },
+                    onPointerDown: (event)=>{
+                        if (handleOnly) return;
+                        restProps.onPointerDown?.(event);
+                        pointerStartRef.current = {
+                            x: event.pageX,
+                            y: event.pageY
+                        };
+                        draggedRef.current = false;
+                        onPress(event);
+                    },
+                    onPointerMove: (event)=>{
+                        lastKnownPointerEventRef.current = event;
+                        if (handleOnly) return;
+                        restProps.onPointerMove?.(event);
+                        if (!pointerStartRef.current) return;
+                        const yPosition = event.pageY - pointerStartRef.current.y;
+                        const xPosition = event.pageX - pointerStartRef.current.x;
+                        const swipeStartThreshold = event.pointerType === "touch" ? 10 : 2;
+                        const delta = {
+                            x: xPosition,
+                            y: yPosition
+                        };
+                        // Once the pointer travels past the swipe-start threshold the gesture
+                        // is a drag, not a tap — remember it so the trailing click can be
+                        // suppressed on release (iOS still synthesizes one on the origin).
+                        const isBeyondThreshold = Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold;
+                        if (isBeyondThreshold) draggedRef.current = true;
+                        const isAllowedToSwipe = isDeltaInDirection(delta, direction, swipeStartThreshold);
+                        if (isAllowedToSwipe) onDrag(event);
+                        else if (isBeyondThreshold) {
+                            pointerStartRef.current = null;
+                        }
+                    },
+                    onPointerUp: (event)=>{
+                        restProps.onPointerUp?.(event);
+                        pointerStartRef.current = null;
+                        wasBeyondThePointRef.current = false;
+                        onRelease(event);
+                    },
+                    onPointerOut: (event)=>{
+                        restProps.onPointerOut?.(event);
+                        handleOnPointerUp(lastKnownPointerEventRef.current);
+                    },
+                    onContextMenu: (event)=>{
+                        restProps.onContextMenu?.(event);
+                        if (lastKnownPointerEventRef.current) {
+                            handleOnPointerUp(lastKnownPointerEventRef.current);
+                        }
+                    },
+                    onClickCapture: (event)=>{
+                        restProps.onClickCapture?.(event);
+                        // Swallow the click that follows a drag so dragging the sheet (e.g. a
+                        // swipe-to-dismiss started on an item) doesn't also activate that item.
+                        // A plain tap leaves draggedRef false and clicks normally.
+                        if (draggedRef.current) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            draggedRef.current = false;
+                        }
+                    }
+                })
+            })
+        })
     });
 });
 DrawerContent.displayName = "DrawerContent";
-const DrawerTitle = DialogPrimitive.Title;
-const DrawerDescription = DialogPrimitive.Description;
+const DrawerTitle = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const api = useDrawerContext();
+    return /*#__PURE__*/ jsx(Primitive.h2, {
+        ref: ref,
+        ...mergeProps(api.titleProps, props)
+    });
+});
+DrawerTitle.displayName = "DrawerTitle";
+const DrawerDescription = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const api = useDrawerContext();
+    return /*#__PURE__*/ jsx(Primitive.p, {
+        ref: ref,
+        ...mergeProps(api.descriptionProps, props)
+    });
+});
+DrawerDescription.displayName = "DrawerDescription";
 const DrawerHeader = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { isCloseButtonRendered } = useDrawerContext();
+    const api = useDrawerContext();
     return /*#__PURE__*/ jsx(Primitive.div, {
         ref: ref,
-        "data-show-close-button": dataAttr(isCloseButtonRendered),
-        ...props
+        ...mergeProps(api.headerProps, props)
     });
 });
 DrawerHeader.displayName = "DrawerHeader";
 const DrawerCloseButton = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { closeButtonRef, setIsOpen } = useDrawerContext();
-    const composedRef = useComposedRefs(ref, closeButtonRef);
+    const api = useDrawerContext();
     return /*#__PURE__*/ jsx(Primitive.button, {
-        ref: composedRef,
-        ...props,
-        onClick: (e)=>{
-            props.onClick?.(e);
-            if (e.defaultPrevented) return;
-            setIsOpen(false, {
-                reason: "closeButton",
-                event: e.nativeEvent
-            });
-        }
+        ref: ref,
+        ...mergeProps(api.closeButtonProps, props)
     });
 });
 const LONG_HANDLE_PRESS_TIMEOUT = 250;