@seed-design/react-drawer 1.0.10 → 2.0.0

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

@@ -1,34 +1,19 @@
 'use client';
 var jsxRuntime = require('react/jsx-runtime');
 var reactComposeRefs = require('@radix-ui/react-compose-refs');
-var DialogPrimitive = require('@radix-ui/react-dialog');
+var reactFocusScope = require('@radix-ui/react-focus-scope');
 var reactUseCallbackRef = require('@radix-ui/react-use-callback-ref');
+var ariaHidden = require('aria-hidden');
+var reactDismissibleLayer = require('@seed-design/react-dismissible-layer');
+var reactPresence = require('@seed-design/react-presence');
 var domUtils = require('@seed-design/dom-utils');
+var reactPreventScroll = require('@seed-design/react-prevent-scroll');
 var reactPrimitive = require('@seed-design/react-primitive');
 var React = require('react');
 var reactUseControllableState = require('@seed-design/react-use-controllable-state');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return n;
-}
-
-var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 function isMobileFirefox() {
@@ -41,9 +26,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;
@@ -148,124 +130,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__default.default.useState(()=>typeof window !== "undefined" ? window.location.href : "");
-    const scrollPos = React__default.default.useRef(0);
-    const setPositionFixed = React__default.default.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__default.default.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__default.default.useEffect(()=>{
-        function onScroll() {
-            scrollPos.current = window.scrollY;
-        }
-        onScroll();
-        window.addEventListener("scroll", onScroll);
-        return ()=>{
-            window.removeEventListener("scroll", onScroll);
-        };
-    }, []);
-    React__default.default.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__default.default.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] = reactUseControllableState.useControllableState({
         prop: activeSnapPointProp,
@@ -491,38 +355,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 = React.useId();
+    const titleId = `${drawerId}-title`;
+    const descriptionId = `${drawerId}-description`;
     const [isOpen = false, setIsOpen] = reactUseControllableState.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] = 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);
@@ -554,14 +404,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;
@@ -843,15 +685,6 @@ function useDrawer(props) {
         repositionInputs,
         fixed
     ]);
-    React.useEffect(()=>{
-        if (!modal) {
-            window.requestAnimationFrame(()=>{
-                document.body.style.pointerEvents = "auto";
-            });
-        }
-    }, [
-        modal
-    ]);
     // Effect 1: Track drawer open state
     React.useEffect(()=>{
         if (isOpen) {
@@ -892,6 +725,11 @@ function useDrawer(props) {
         snapPoints,
         fadeFromIndex
     ]);
+    const stateProps = React.useMemo(()=>domUtils.elementProps({
+            "data-open": domUtils.dataAttr(isOpen)
+        }), [
+        isOpen
+    ]);
     return React.useMemo(()=>({
             activeSnapPoint,
             snapPoints,
@@ -914,16 +752,57 @@ function useDrawer(props) {
             snapPointsOffset,
             activeSnapPointIndex,
             direction,
-            noBodyStyles,
             container,
             autoFocus,
             setHasBeenOpened,
             setIsOpen,
             closeOnInteractOutside,
             closeOnEscape,
+            titleId,
+            descriptionId,
+            lazyMount: lazyMountProp,
+            unmountOnExit: unmountOnExitProp,
             hasAnimationDone,
-            closeButtonRef,
-            isCloseButtonRendered
+            triggerProps: domUtils.buttonProps({
+                ...stateProps,
+                onClick: (e)=>{
+                    if (e.defaultPrevented) return;
+                    setIsOpen(true, {
+                        reason: "trigger",
+                        event: e.nativeEvent
+                    });
+                }
+            }),
+            positionerProps: domUtils.elementProps({
+                ...stateProps,
+                style: {
+                    pointerEvents: isOpen && modal ? undefined : "none"
+                }
+            }),
+            backdropProps: domUtils.elementProps({
+                ...stateProps
+            }),
+            titleProps: domUtils.elementProps({
+                id: titleId,
+                ...stateProps
+            }),
+            descriptionProps: domUtils.elementProps({
+                id: descriptionId,
+                ...stateProps
+            }),
+            headerProps: domUtils.elementProps({
+                ...stateProps
+            }),
+            closeButtonProps: domUtils.buttonProps({
+                ...stateProps,
+                onClick: (e)=>{
+                    if (e.defaultPrevented) return;
+                    setIsOpen(false, {
+                        reason: "closeButton",
+                        event: e.nativeEvent
+                    });
+                }
+            })
         }), [
         activeSnapPoint,
         snapPoints,
@@ -940,7 +819,6 @@ function useDrawer(props) {
         snapPointsOffset,
         activeSnapPointIndex,
         direction,
-        noBodyStyles,
         container,
         autoFocus,
         setIsOpen,
@@ -949,9 +827,12 @@ function useDrawer(props) {
         onRelease,
         onDrag,
         onPress,
+        titleId,
+        descriptionId,
+        lazyMountProp,
+        unmountOnExitProp,
         hasAnimationDone,
-        closeButtonRef,
-        isCloseButtonRendered
+        stateProps
     ]);
 }
 
@@ -966,71 +847,83 @@ function useDrawerContext() {
 }
 
 const DrawerRoot = (props)=>{
-    const { children, defaultOpen, dismissible, modal } = props;
     const api = useDrawer(props);
-    return /*#__PURE__*/ jsxRuntime.jsx(DialogPrimitive__namespace.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__*/ jsxRuntime.jsx(DrawerProvider, {
-            value: api,
-            children: children
-        })
+    return /*#__PURE__*/ jsxRuntime.jsx(DrawerProvider, {
+        value: api,
+        children: props.children
     });
 };
-const DrawerTrigger = DialogPrimitive__namespace.Trigger;
+const DrawerTrigger = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const api = useDrawerContext();
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.button, {
+        ref: ref,
+        ...domUtils.mergeProps(api.triggerProps, props)
+    });
+});
+DrawerTrigger.displayName = "DrawerTrigger";
 const DrawerPositioner = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const api = useDrawerContext();
     return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
         ref: ref,
-        ...props,
-        style: {
-            pointerEvents: api.isOpen ? undefined : "none",
-            ...props.style
-        }
+        ...domUtils.mergeProps(api.positionerProps, props)
     });
 });
 DrawerPositioner.displayName = "DrawerPositioner";
 const DrawerBackdrop = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-    const { overlayRef, onRelease, modal, snapPoints, isOpen, shouldFade, shouldOverlayAnimate, hasAnimationDone } = useDrawerContext();
-    const composedRef = reactComposeRefs.useComposedRefs(ref, overlayRef);
+    const { overlayRef, onRelease, modal, snapPoints, isOpen, shouldFade, shouldOverlayAnimate, hasAnimationDone, lazyMount, unmountOnExit } = useDrawerContext();
+    const composedRef = reactComposeRefs.composeRefs(ref, overlayRef);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
     const onMouseUp = reactUseCallbackRef.useCallbackRef((event)=>onRelease(event));
     if (!modal) {
         return null;
     }
-    return /*#__PURE__*/ jsxRuntime.jsx(DialogPrimitive__namespace.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": domUtils.dataAttr(isOpen),
-        "data-animation-done": hasAnimationDone ? "true" : "false",
-        ...props
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPresence.Presence, {
+        present: isOpen,
+        unmountOnExit: unmountOnExit,
+        lazyMount: lazyMount,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.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": 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, 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.
+    reactPreventScroll.usePreventScroll({
+        isDisabled: !(modal && isOpen)
+    });
+    const [contentNode, setContentNode] = React.useState(null);
+    const contentRef = React.useCallback((el)=>setContentNode(el), []);
+    // aria-hide everything except the content when modal
+    React.useEffect(()=>{
+        if (!isOpen || !modal || !contentNode) return;
+        return ariaHidden.hideOthers(contentNode);
+    }, [
+        isOpen,
+        modal,
+        contentNode
+    ]);
     // Needed to use transition instead of animations
     const [delayedSnapPoints, setDelayedSnapPoints] = React.useState(false);
-    const composedRef = reactComposeRefs.useComposedRefs(ref, drawerRef);
     const pointerStartRef = React.useRef(null);
     const lastKnownPointerEventRef = React.useRef(null);
     const wasBeyondThePointRef = React.useRef(false);
+    // Whether the current gesture moved past the swipe-start threshold. Used to
+    // suppress the trailing click so dragging the sheet doesn't also activate the
+    // element the gesture started on (iOS still synthesizes a click on release).
+    const draggedRef = React.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);
@@ -1038,8 +931,8 @@ const DrawerContent = /*#__PURE__*/ React.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;
@@ -1065,132 +958,177 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         wasBeyondThePointRef.current = false;
         onRelease(event);
     }
-    return /*#__PURE__*/ jsxRuntime.jsx(DialogPrimitive__namespace.Content, {
-        "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",
-        ...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
-            };
-            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
-            };
-            const isAllowedToSwipe = isDeltaInDirection(delta, direction, swipeStartThreshold);
-            if (isAllowedToSwipe) onDrag(event);
-            else if (Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold) {
-                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);
-            }
-        },
-        onInteractOutside: (e)=>{
-            // Only close if event is not prevented (e.g., by onFocusOutside or onPointerDownOutside)
-            if (dismissible && closeOnInteractOutside && !e.defaultPrevented) {
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPresence.Presence, {
+        present: isOpen,
+        unmountOnExit: unmountOnExit,
+        lazyMount: lazyMount,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactDismissibleLayer.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__*/ jsxRuntime.jsx(reactFocusScope.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__*/ jsxRuntime.jsx(reactPrimitive.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": domUtils.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: reactComposeRefs.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__namespace.Title;
-const DrawerDescription = DialogPrimitive__namespace.Description;
+const DrawerTitle = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const api = useDrawerContext();
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.h2, {
+        ref: ref,
+        ...domUtils.mergeProps(api.titleProps, props)
+    });
+});
+DrawerTitle.displayName = "DrawerTitle";
+const DrawerDescription = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const api = useDrawerContext();
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.p, {
+        ref: ref,
+        ...domUtils.mergeProps(api.descriptionProps, props)
+    });
+});
+DrawerDescription.displayName = "DrawerDescription";
 const DrawerHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-    const { isCloseButtonRendered } = useDrawerContext();
+    const api = useDrawerContext();
     return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
         ref: ref,
-        "data-show-close-button": domUtils.dataAttr(isCloseButtonRendered),
-        ...props
+        ...domUtils.mergeProps(api.headerProps, props)
     });
 });
 DrawerHeader.displayName = "DrawerHeader";
 const DrawerCloseButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-    const { closeButtonRef, setIsOpen } = useDrawerContext();
-    const composedRef = reactComposeRefs.useComposedRefs(ref, closeButtonRef);
+    const api = useDrawerContext();
     return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.button, {
-        ref: composedRef,
-        ...props,
-        onClick: (e)=>{
-            props.onClick?.(e);
-            if (e.defaultPrevented) return;
-            setIsOpen(false, {
-                reason: "closeButton",
-                event: e.nativeEvent
-            });
-        }
+        ref: ref,
+        ...domUtils.mergeProps(api.closeButtonProps, props)
     });
 });
 const LONG_HANDLE_PRESS_TIMEOUT = 250;