@lodev09/react-native-true-sheet 3.11.0-beta.0 → 3.11.0-beta.10

package/src/web/vaul/index.tsx

@@ -1,28 +1,32 @@
 'use client';
 
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import React from 'react';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Presence } from '@radix-ui/react-presence';
+
 import { DrawerContext, useDrawerContext } from './context';
 import './style.css';
-import { usePreventScroll, isInput } from './use-prevent-scroll';
-import { useComposedRefs } from './use-composed-refs';
-import { useSnapPoints } from './use-snap-points';
-import { set, getTranslate, dampenValue, isVertical, reset } from './helpers';
+
+import { isIOS, isMobileFirefox } from './browser';
 import {
-  TRANSITIONS,
-  VELOCITY_THRESHOLD,
-  CLOSE_THRESHOLD,
-  SCROLL_LOCK_TIMEOUT,
   BORDER_RADIUS,
+  CLOSE_THRESHOLD,
+  DRAG_CLASS,
   NESTED_DISPLACEMENT,
+  SCROLL_LOCK_TIMEOUT,
+  TRANSITIONS,
+  VELOCITY_THRESHOLD,
   WINDOW_TOP_OFFSET,
-  DRAG_CLASS,
 } from './constants';
+import { dampenValue, getTranslate, isVertical, reset, set } from './helpers';
 import type { DrawerDirection } from './types';
+import { useComposedRefs } from './use-composed-refs';
 import { useControllableState } from './use-controllable-state';
-import { useScaleBackground } from './use-scale-background';
 import { usePositionFixed } from './use-position-fixed';
-import { isIOS, isMobileFirefox } from './browser';
+import { isInput, usePreventScroll } from './use-prevent-scroll';
+import { useScaleBackground } from './use-scale-background';
+import { useSnapPoints } from './use-snap-points';
 
 export interface WithFadeFromProps {
   /**
@@ -182,6 +186,12 @@ export type DialogProps = {
    * the sheet appears at its target detent instantly. Defaults to `true`.
    */
   initialAnimated?: boolean;
+  /**
+   * Fires when the auto-size wrapper's measured content height changes.
+   * Useful for callers that want to size the surrounding card to fit
+   * content (e.g. iPad-style form sheets).
+   */
+  onContentHeightChange?: (height: number) => void;
 } & (WithFadeFromProps | WithoutFadeFromProps);
 
 export function Root({
@@ -222,6 +232,7 @@ export function Root({
   detachedWrapperStyle,
   maxContentHeight,
   initialAnimated = true,
+  onContentHeightChange,
 }: DialogProps) {
   const [isOpen = false, setIsOpen] = useControllableState({
     defaultProp: defaultOpen,
@@ -236,19 +247,6 @@ export function Root({
       setTimeout(() => {
         onAnimationEnd?.(o);
       }, TRANSITIONS.DURATION * 1000);
-
-      if (o && !modal) {
-        if (typeof window !== 'undefined') {
-          window.requestAnimationFrame(() => {
-            document.body.style.pointerEvents = 'auto';
-          });
-        }
-      }
-
-      if (!o) {
-        // This will be removed when the exit animation ends (`500ms`)
-        document.body.style.pointerEvents = 'auto';
-      }
     },
   });
   const [hasBeenOpened, setHasBeenOpened] = React.useState<boolean>(false);
@@ -271,6 +269,14 @@ export function Root({
   const initialDrawerHeight = React.useRef(0);
   const [contentHeight, setContentHeight] = React.useState(0);
 
+  const onContentHeightChangeRef = React.useRef(onContentHeightChange);
+  React.useEffect(() => {
+    onContentHeightChangeRef.current = onContentHeightChange;
+  });
+  React.useEffect(() => {
+    onContentHeightChangeRef.current?.(contentHeight);
+  }, [contentHeight]);
+
   const onSnapPointChange = React.useCallback((activeSnapPointIndex: number) => {
     // Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable.
     if (snapPoints && activeSnapPointIndex === snapPointsOffset.length - 1)
@@ -563,63 +569,6 @@ export function Root({
     onPositionChangeRef.current = onPositionChange;
   });
 
-  // Radix's DismissableLayer (modal) sets body pointer-events to "none" so the
-  // overlay traps clicks. When the active snap is below fadeFromIndex the
-  // overlay is fully transparent, and we want clicks to reach the content
-  // behind the drawer — so we restore body interactivity. DismissableLayer
-  // captures its DOM node via a ref-callback `setNode`, so its body write
-  // runs one render later than ours on initial open — re-assert on rAF so
-  // the final write is ours.
-  React.useEffect(() => {
-    if (!modal || !snapPoints || fadeFromIndex === undefined) return;
-    // On close, restore body interactivity. `useControllableState.onChange`
-    // only fires for internal `setIsOpen` calls — when the parent flips the
-    // `open` prop imperatively, the reset at line ~201 never runs.
-    if (!isOpen) {
-      document.body.style.pointerEvents = 'auto';
-      return;
-    }
-    if (typeof activeSnapPointIndex !== 'number') return;
-    const isBelowFade = activeSnapPointIndex < fadeFromIndex;
-    const value = isBelowFade ? 'auto' : 'none';
-    document.body.style.pointerEvents = value;
-    const id = window.requestAnimationFrame(() => {
-      document.body.style.pointerEvents = value;
-    });
-
-    // React Navigation keeps unfocused screens mounted with `display: none` on
-    // web, so the drawer never unmounts and neither `isOpen` nor this effect's
-    // deps change — a lingering `none` body style would then leak to whichever
-    // screen becomes visible. Observe the drawer: when an ancestor hides it,
-    // restore `auto`; when it returns, re-apply the desired value.
-    let observer: IntersectionObserver | null = null;
-    let rafId = 0;
-    const startObserving = () => {
-      const node = drawerRef.current;
-      if (!node) {
-        rafId = window.requestAnimationFrame(startObserving);
-        return;
-      }
-      observer = new IntersectionObserver((entries) => {
-        const entry = entries[entries.length - 1];
-        if (!entry) return;
-        document.body.style.pointerEvents = entry.isIntersecting ? value : 'auto';
-      });
-      observer.observe(node);
-    };
-    rafId = window.requestAnimationFrame(startObserving);
-
-    // Always restore on cleanup so an unmount while the sheet is still open
-    // doesn't leave the page uninteractive. If the effect re-runs for a
-    // normal state change, it re-applies the correct value.
-    return () => {
-      window.cancelAnimationFrame(id);
-      window.cancelAnimationFrame(rafId);
-      observer?.disconnect();
-      document.body.style.pointerEvents = 'auto';
-    };
-  }, [isOpen, modal, snapPoints, fadeFromIndex, activeSnapPointIndex]);
-
   React.useEffect(() => {
     function onVisualViewportChange() {
       if (!drawerRef.current || !repositionInputs) return;
@@ -669,7 +618,7 @@ export function Root({
         }
 
         if (snapPoints && snapPoints.length > 0 && !keyboardIsOpen.current) {
-          drawerRef.current.style.bottom = `0px`;
+          drawerRef.current.style.bottom = '0px';
         } else {
           // Negative bottom value would never make sense
           drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
@@ -888,15 +837,6 @@ export function Root({
     }
   }
 
-  React.useEffect(() => {
-    if (!modal) {
-      // Need to do this manually unfortunately
-      window.requestAnimationFrame(() => {
-        document.body.style.pointerEvents = 'auto';
-      });
-    }
-  }, [modal]);
-
   return (
     <DialogPrimitive.Root
       defaultOpen={defaultOpen}
@@ -911,7 +851,14 @@ export function Root({
         setIsOpen(open);
       }}
       open={isOpen}
-      modal={modal}
+      // Always non-modal at the Radix level — Radix's modal mode locks
+      // body.style.pointerEvents and its restore on layer unmount is buggy
+      // (see git history). Vaul's own overlay handles click-trapping; the
+      // overlay sets pointer-events: none below fadeFromIndex so clicks
+      // pass through to the page (matches native dimmedDetentIndex). Vaul's
+      // own `modal` prop still drives overlay rendering and click-outside
+      // behavior below.
+      modal={false}
     >
       <DrawerContext.Provider
         value={{
@@ -962,7 +909,7 @@ export function Root({
 export const Overlay = React.forwardRef<
   HTMLDivElement,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(function ({ style, ...rest }, ref) {
+>(({ style, ...rest }, ref) => {
   const {
     overlayRef,
     snapPoints,
@@ -1007,26 +954,38 @@ export const Overlay = React.forwardRef<
     typeof activeSnapPointIndex === 'number' &&
     activeSnapPointIndex < fadeFromIndex;
 
+  // Render our own overlay element instead of `DialogPrimitive.Overlay`:
+  // Radix's Overlay returns null when the Dialog is non-modal, and we run
+  // Radix as `modal={false}` to keep it from locking body pointer-events.
+  // `Presence` keeps the node mounted through the closing animation
+  // (`fadeOut`) before unmounting.
   return (
-    <DialogPrimitive.Overlay
-      onMouseUp={onMouseUp}
-      ref={composedRef}
-      data-vaul-overlay=""
-      data-vaul-snap-points={isOpen && hasSnapPoints ? 'true' : 'false'}
-      data-vaul-delayed-snap-points={delayedSnapPoints ? 'true' : 'false'}
-      data-vaul-snap-points-overlay={isOpen && shouldFade ? 'true' : 'false'}
-      data-vaul-animate={shouldAnimate?.current ? 'true' : 'false'}
-      {...rest}
-      style={isBelowFade ? overlayBelowFadeStyle(style) : style}
-    />
+    <Presence present={isOpen}>
+      <div
+        onMouseUp={onMouseUp}
+        ref={composedRef}
+        data-state={isOpen ? 'open' : 'closed'}
+        data-vaul-overlay=""
+        data-vaul-snap-points={isOpen && hasSnapPoints ? 'true' : 'false'}
+        data-vaul-delayed-snap-points={delayedSnapPoints ? 'true' : 'false'}
+        data-vaul-snap-points-overlay={isOpen && shouldFade ? 'true' : 'false'}
+        data-vaul-animate={shouldAnimate?.current ? 'true' : 'false'}
+        {...rest}
+        style={overlayStyle(style, !!isBelowFade)}
+      />
+    </Presence>
   );
 });
 
 Overlay.displayName = 'Drawer.Overlay';
 
-const overlayPointerEventsNone: React.CSSProperties = { pointerEvents: 'none' };
-const overlayBelowFadeStyle = (style: React.CSSProperties | undefined): React.CSSProperties =>
-  style ? { ...style, ...overlayPointerEventsNone } : overlayPointerEventsNone;
+const overlayStyle = (
+  style: React.CSSProperties | undefined,
+  isBelowFade: boolean
+): React.CSSProperties => ({
+  ...style,
+  pointerEvents: isBelowFade ? 'none' : 'auto',
+});
 
 export type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
   /**
@@ -1037,387 +996,427 @@ export type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive
   detachedSiblings?: React.ReactNode;
 };
 
-export const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
-  { onPointerDownOutside, style, onOpenAutoFocus, children, detachedSiblings, ...rest },
-  ref
-) {
-  const {
-    drawerRef,
-    onPress,
-    onRelease,
-    onDrag,
-    keyboardIsOpen,
-    snapPointsOffset,
-    activeSnapPointIndex,
-    fadeFromIndex,
-    modal,
-    isOpen,
-    isDragging,
-    direction,
-    snapPoints,
-    container,
-    handleOnly,
-    shouldAnimate,
-    autoFocus,
-    onPositionChangeRef,
-    setContentHeight,
-    detached,
-    detachedOffset,
-    detachedRadius,
-    detachedWrapperStyle: detachedWrapperStyleProp,
-  } = useDrawerContext();
-  const hasAutoSnapPoint = React.useMemo(
-    () => !!snapPoints?.some((p) => p === 'auto'),
-    [snapPoints]
-  );
-
-  // When 'auto' is used as a snap point, we need the natural content height.
-  // The drawer itself may be styled to a fixed viewport height, so we measure
-  // an inner wrapper instead. Ref callback starts the observer as soon as the
-  // node mounts (Radix Presence defers the portal mount past useEffect).
-  const autoRoRef = React.useRef<ResizeObserver | null>(null);
-  const setAutoSizeNode = React.useCallback(
-    (node: HTMLDivElement | null) => {
-      autoRoRef.current?.disconnect();
-      if (!node || !hasAutoSnapPoint) {
-        autoRoRef.current = null;
-        return;
-      }
-      const measure = () => setContentHeight(node.offsetHeight);
-      measure();
-      const ro = new ResizeObserver(measure);
-      ro.observe(node);
-      autoRoRef.current = ro;
+export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
+  (
+    {
+      onPointerDownOutside,
+      onEscapeKeyDown,
+      style,
+      onOpenAutoFocus,
+      children,
+      detachedSiblings,
+      ...rest
     },
-    [hasAutoSnapPoint, setContentHeight]
-  );
-
-  const isBelowFade =
-    snapPoints !== undefined &&
-    snapPoints !== null &&
-    fadeFromIndex !== undefined &&
-    typeof activeSnapPointIndex === 'number' &&
-    activeSnapPointIndex < fadeFromIndex;
-  // Needed to use transition instead of animations
-  const [delayedSnapPoints, setDelayedSnapPoints] = React.useState(false);
-  const composedRef = useComposedRefs(ref, drawerRef);
-  const pointerStartRef = React.useRef<{ x: number; y: number } | null>(null);
-  const lastKnownPointerEventRef = React.useRef<React.PointerEvent<HTMLDivElement> | null>(null);
-  const wasBeyondThePointRef = React.useRef(false);
-  const hasSnapPoints = snapPoints && snapPoints.length > 0;
-  useScaleBackground();
-
-  const isDeltaInDirection = (
-    delta: { x: number; y: number },
-    dir: DrawerDirection,
-    threshold = 0
+    ref
   ) => {
-    if (wasBeyondThePointRef.current) return true;
-
-    const deltaY = Math.abs(delta.y);
-    const deltaX = Math.abs(delta.x);
-    const isDeltaX = deltaX > deltaY;
-    const dFactor = ['bottom', 'right'].includes(dir) ? 1 : -1;
-
-    if (dir === 'left' || dir === 'right') {
-      const isReverseDirection = delta.x * dFactor < 0;
-      if (!isReverseDirection && deltaX >= 0 && deltaX <= threshold) {
-        return isDeltaX;
-      }
-    } else {
-      const isReverseDirection = delta.y * dFactor < 0;
-      if (!isReverseDirection && deltaY >= 0 && deltaY <= threshold) {
-        return !isDeltaX;
-      }
-    }
-
-    wasBeyondThePointRef.current = true;
-    return true;
-  };
-
-  React.useEffect(() => {
-    if (hasSnapPoints) {
-      window.requestAnimationFrame(() => {
-        setDelayedSnapPoints(true);
-      });
-    }
-  }, []);
-
-  // Event-driven position tracking. We only tick RAF while the drawer is
-  // actually moving (drag / CSS transition / CSS animation). When it's idle at
-  // a snap, no frames run at all.
-  const positionTrackingRef = React.useRef<{
-    rafId: number | null;
-    movingCount: number;
-    lastPosition: number;
-    start: () => void;
-    stop: () => void;
-  } | null>(null);
-
-  React.useEffect(() => {
-    const drawer = drawerRef.current;
-    if (!drawer) return;
-
-    const state = {
-      rafId: null as number | null,
-      movingCount: 0,
-      lastPosition: Number.NaN,
-      start: () => {},
-      stop: () => {},
-    };
+    const {
+      drawerRef,
+      onPress,
+      onRelease,
+      onDrag,
+      keyboardIsOpen,
+      snapPointsOffset,
+      activeSnapPointIndex,
+      fadeFromIndex,
+      modal,
+      isOpen,
+      isDragging,
+      direction,
+      snapPoints,
+      setActiveSnapPoint,
+      dismissible,
+      container,
+      handleOnly,
+      shouldAnimate,
+      autoFocus,
+      onPositionChangeRef,
+      setContentHeight,
+      detached,
+      detachedOffset,
+      detachedRadius,
+      detachedWrapperStyle: detachedWrapperStyleProp,
+    } = useDrawerContext();
+    // Always measure the inner wrapper's natural height. The drawer itself may
+    // be styled to a fixed viewport height, so we measure an inner wrapper
+    // instead. Ref callback starts the observer as soon as the node mounts
+    // (Radix Presence defers the portal mount past useEffect). The measurement
+    // drives the 'auto' snap point and is also exposed via
+    // `onContentHeightChange` for callers that size the surrounding card.
+    const autoRoRef = React.useRef<ResizeObserver | null>(null);
+    const setAutoSizeNode = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        autoRoRef.current?.disconnect();
+        if (!node) {
+          autoRoRef.current = null;
+          return;
+        }
+        const measure = () => setContentHeight(node.offsetHeight);
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(node);
+        autoRoRef.current = ro;
+      },
+      [setContentHeight]
+    );
 
-    const emit = () => {
-      const cb = onPositionChangeRef.current;
-      if (!cb) return;
-      const position = drawer.getBoundingClientRect().top;
-      if (position !== state.lastPosition) {
-        state.lastPosition = position;
-        cb(position);
+    const isBelowFade =
+      snapPoints !== undefined &&
+      snapPoints !== null &&
+      fadeFromIndex !== undefined &&
+      typeof activeSnapPointIndex === 'number' &&
+      activeSnapPointIndex < fadeFromIndex;
+    // Needed to use transition instead of animations
+    const [delayedSnapPoints, setDelayedSnapPoints] = React.useState(false);
+    const composedRef = useComposedRefs(ref, drawerRef);
+    const pointerStartRef = React.useRef<{ x: number; y: number } | null>(null);
+    const lastKnownPointerEventRef = React.useRef<React.PointerEvent<HTMLDivElement> | null>(null);
+    const wasBeyondThePointRef = React.useRef(false);
+    const hasSnapPoints = snapPoints && snapPoints.length > 0;
+    useScaleBackground();
+
+    const isDeltaInDirection = (
+      delta: { x: number; y: number },
+      dir: DrawerDirection,
+      threshold = 0
+    ) => {
+      if (wasBeyondThePointRef.current) return true;
+
+      const deltaY = Math.abs(delta.y);
+      const deltaX = Math.abs(delta.x);
+      const isDeltaX = deltaX > deltaY;
+      const dFactor = ['bottom', 'right'].includes(dir) ? 1 : -1;
+
+      if (dir === 'left' || dir === 'right') {
+        const isReverseDirection = delta.x * dFactor < 0;
+        if (!isReverseDirection && deltaX >= 0 && deltaX <= threshold) {
+          return isDeltaX;
+        }
+      } else {
+        const isReverseDirection = delta.y * dFactor < 0;
+        if (!isReverseDirection && deltaY >= 0 && deltaY <= threshold) {
+          return !isDeltaX;
+        }
       }
-    };
 
-    const tick = () => {
-      emit();
-      state.rafId = state.movingCount > 0 ? window.requestAnimationFrame(tick) : null;
+      wasBeyondThePointRef.current = true;
+      return true;
     };
 
-    state.start = () => {
-      state.movingCount += 1;
-      if (state.rafId === null) {
-        state.rafId = window.requestAnimationFrame(tick);
+    React.useEffect(() => {
+      if (hasSnapPoints) {
+        window.requestAnimationFrame(() => {
+          setDelayedSnapPoints(true);
+        });
       }
-    };
-
-    state.stop = () => {
-      state.movingCount = Math.max(0, state.movingCount - 1);
-      // RAF loop will exit on its next tick; emit the settled position now.
-      if (state.movingCount === 0) emit();
-    };
-
-    const wrapper = drawer.closest<HTMLElement>('[data-vaul-detached-wrapper]');
-
-    // Listen on the wrapper too: drag-overshoot snap-back animates the wrapper
-    // alone when the drawer's target is unchanged (e.g. snapping back to the
-    // same detent). Without this, position goes stale mid-animation because
-    // the drawer's `transitionrun` never fires.
-    const onTransitionRun = (e: TransitionEvent) => {
-      if ((e.target === drawer || e.target === wrapper) && e.propertyName === 'transform')
-        state.start();
-    };
-    const onTransitionDone = (e: TransitionEvent) => {
-      if ((e.target === drawer || e.target === wrapper) && e.propertyName === 'transform')
-        state.stop();
-    };
-    const onAnimationStart = (e: AnimationEvent) => {
-      if (e.target === drawer || e.target === wrapper) state.start();
-    };
-    const onAnimationDone = (e: AnimationEvent) => {
-      if (e.target === drawer || e.target === wrapper) state.stop();
-    };
-
-    drawer.addEventListener('transitionrun', onTransitionRun);
-    drawer.addEventListener('transitionend', onTransitionDone);
-    drawer.addEventListener('transitioncancel', onTransitionDone);
-    drawer.addEventListener('animationstart', onAnimationStart);
-    drawer.addEventListener('animationend', onAnimationDone);
-    drawer.addEventListener('animationcancel', onAnimationDone);
-    wrapper?.addEventListener('transitionrun', onTransitionRun);
-    wrapper?.addEventListener('transitionend', onTransitionDone);
-    wrapper?.addEventListener('transitioncancel', onTransitionDone);
+    }, []);
+
+    // Event-driven position tracking. We only tick RAF while the drawer is
+    // actually moving (drag / CSS transition / CSS animation). When it's idle at
+    // a snap, no frames run at all.
+    const positionTrackingRef = React.useRef<{
+      rafId: number | null;
+      movingCount: number;
+      lastPosition: number;
+      start: () => void;
+      stop: () => void;
+    } | null>(null);
+
+    React.useEffect(() => {
+      const drawer = drawerRef.current;
+      if (!drawer) return;
+
+      const state = {
+        rafId: null as number | null,
+        movingCount: 0,
+        lastPosition: Number.NaN,
+        start: () => {},
+        stop: () => {},
+      };
+
+      const emit = () => {
+        const cb = onPositionChangeRef.current;
+        if (!cb) return;
+        const position = drawer.getBoundingClientRect().top;
+        if (position !== state.lastPosition) {
+          state.lastPosition = position;
+          cb(position);
+        }
+      };
 
-    positionTrackingRef.current = state;
-    emit();
+      const tick = () => {
+        emit();
+        state.rafId = state.movingCount > 0 ? window.requestAnimationFrame(tick) : null;
+      };
 
-    return () => {
-      drawer.removeEventListener('transitionrun', onTransitionRun);
-      drawer.removeEventListener('transitionend', onTransitionDone);
-      drawer.removeEventListener('transitioncancel', onTransitionDone);
-      drawer.removeEventListener('animationstart', onAnimationStart);
-      drawer.removeEventListener('animationend', onAnimationDone);
-      drawer.removeEventListener('animationcancel', onAnimationDone);
-      wrapper?.removeEventListener('transitionrun', onTransitionRun);
-      wrapper?.removeEventListener('transitionend', onTransitionDone);
-      wrapper?.removeEventListener('transitioncancel', onTransitionDone);
-      if (state.rafId !== null) window.cancelAnimationFrame(state.rafId);
-      positionTrackingRef.current = null;
-    };
-  }, []);
+      state.start = () => {
+        state.movingCount += 1;
+        if (state.rafId === null) {
+          state.rafId = window.requestAnimationFrame(tick);
+        }
+      };
+
+      state.stop = () => {
+        state.movingCount = Math.max(0, state.movingCount - 1);
+        // RAF loop will exit on its next tick; emit the settled position now.
+        if (state.movingCount === 0) emit();
+      };
+
+      const wrapper = drawer.closest<HTMLElement>('[data-vaul-detached-wrapper]');
+
+      // Listen on the wrapper too: drag-overshoot snap-back animates the wrapper
+      // alone when the drawer's target is unchanged (e.g. snapping back to the
+      // same detent). Without this, position goes stale mid-animation because
+      // the drawer's `transitionrun` never fires.
+      const onTransitionRun = (e: TransitionEvent) => {
+        if ((e.target === drawer || e.target === wrapper) && e.propertyName === 'transform')
+          state.start();
+      };
+      const onTransitionDone = (e: TransitionEvent) => {
+        if ((e.target === drawer || e.target === wrapper) && e.propertyName === 'transform')
+          state.stop();
+      };
+      const onAnimationStart = (e: AnimationEvent) => {
+        if (e.target === drawer || e.target === wrapper) state.start();
+      };
+      const onAnimationDone = (e: AnimationEvent) => {
+        if (e.target === drawer || e.target === wrapper) state.stop();
+      };
+
+      drawer.addEventListener('transitionrun', onTransitionRun);
+      drawer.addEventListener('transitionend', onTransitionDone);
+      drawer.addEventListener('transitioncancel', onTransitionDone);
+      drawer.addEventListener('animationstart', onAnimationStart);
+      drawer.addEventListener('animationend', onAnimationDone);
+      drawer.addEventListener('animationcancel', onAnimationDone);
+      wrapper?.addEventListener('transitionrun', onTransitionRun);
+      wrapper?.addEventListener('transitionend', onTransitionDone);
+      wrapper?.addEventListener('transitioncancel', onTransitionDone);
+
+      positionTrackingRef.current = state;
+      emit();
 
-  React.useEffect(() => {
-    const state = positionTrackingRef.current;
-    if (!state) return;
-    if (isDragging) state.start();
-    else state.stop();
-  }, [isDragging]);
-
-  function handleOnPointerUp(event: React.PointerEvent<HTMLDivElement> | null) {
-    pointerStartRef.current = null;
-    wasBeyondThePointRef.current = false;
-    onRelease(event);
-  }
+      return () => {
+        drawer.removeEventListener('transitionrun', onTransitionRun);
+        drawer.removeEventListener('transitionend', onTransitionDone);
+        drawer.removeEventListener('transitioncancel', onTransitionDone);
+        drawer.removeEventListener('animationstart', onAnimationStart);
+        drawer.removeEventListener('animationend', onAnimationDone);
+        drawer.removeEventListener('animationcancel', onAnimationDone);
+        wrapper?.removeEventListener('transitionrun', onTransitionRun);
+        wrapper?.removeEventListener('transitionend', onTransitionDone);
+        wrapper?.removeEventListener('transitioncancel', onTransitionDone);
+        if (state.rafId !== null) window.cancelAnimationFrame(state.rafId);
+        positionTrackingRef.current = null;
+      };
+    }, []);
+
+    React.useEffect(() => {
+      const state = positionTrackingRef.current;
+      if (!state) return;
+      if (isDragging) state.start();
+      else state.stop();
+    }, [isDragging]);
+
+    function handleOnPointerUp(event: React.PointerEvent<HTMLDivElement> | null) {
+      pointerStartRef.current = null;
+      wasBeyondThePointRef.current = false;
+      onRelease(event);
+    }
 
-  // The drawer always sits inside a fixed clip wrapper. `contain: paint`
-  // establishes the wrapper as the containing block so the drawer's own
-  // `position: fixed` is constrained here, and `overflow: hidden` keeps any
-  // overshoot out of the viewport. When `detached` the wrapper also floats
-  // with a bottom gap and rounded bottom corners; otherwise it sits flush.
-  // Transform/transition are managed imperatively (via drag overshoot and the
-  // dismiss effect) so React doesn't skip DOM writes for values it thinks it
-  // already owns.
-  const wrapperStyle = React.useMemo<React.CSSProperties>(
-    () => ({
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: detached ? detachedOffset : 0,
-      overflow: 'hidden',
-      contain: 'paint',
-      pointerEvents: 'none',
-      borderBottomLeftRadius: detached ? detachedRadius : 0,
-      borderBottomRightRadius: detached ? detachedRadius : 0,
-      ...detachedWrapperStyleProp,
-    }),
-    [detached, detachedOffset, detachedRadius, detachedWrapperStyleProp]
-  );
+    // The drawer always sits inside a fixed clip wrapper. `contain: paint`
+    // establishes the wrapper as the containing block so the drawer's own
+    // `position: fixed` is constrained here, and `overflow: hidden` keeps any
+    // overshoot out of the viewport. When `detached` the wrapper also floats
+    // with a bottom gap and rounded bottom corners; otherwise it sits flush.
+    // Transform/transition are managed imperatively (via drag overshoot and the
+    // dismiss effect) so React doesn't skip DOM writes for values it thinks it
+    // already owns.
+    const wrapperStyle = React.useMemo<React.CSSProperties>(
+      () => ({
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: detached ? detachedOffset : 0,
+        overflow: 'hidden',
+        contain: 'paint',
+        pointerEvents: 'none',
+        borderBottomLeftRadius: detached ? detachedRadius : 0,
+        borderBottomRightRadius: detached ? detachedRadius : 0,
+        ...detachedWrapperStyleProp,
+      }),
+      [detached, detachedOffset, detachedRadius, detachedWrapperStyleProp]
+    );
 
-  // Translate the wrapper off-screen on dismiss so the whole card slides out
-  // as one. The reset-then-target pattern on open forces the browser to
-  // record a starting value so the transition actually animates.
-  const wasOpenRef = React.useRef(isOpen);
-  React.useEffect(() => {
-    if (!drawerRef.current) {
-      wasOpenRef.current = isOpen;
-      return;
-    }
-    const wrapper = drawerRef.current.closest<HTMLElement>('[data-vaul-detached-wrapper]');
-    if (wrapper) {
-      const transition = `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`;
-      const viewportH = typeof window !== 'undefined' ? window.innerHeight : 0;
-      if (!isOpen && wasOpenRef.current) {
-        wrapper.style.transition = transition;
-        wrapper.style.transform = `translate3d(0, ${viewportH}px, 0)`;
-      } else if (isOpen && !wasOpenRef.current) {
-        wrapper.style.transition = 'none';
-        wrapper.style.transform = `translate3d(0, ${viewportH}px, 0)`;
-        // eslint-disable-next-line no-void
-        void wrapper.offsetHeight;
-        wrapper.style.transition = transition;
-        wrapper.style.transform = 'translate3d(0, 0, 0)';
-      } else if (isOpen && !wrapper.style.transform) {
-        // Fresh mount with open=true — ensure the wrapper starts at rest.
-        wrapper.style.transition = transition;
-        wrapper.style.transform = 'translate3d(0, 0, 0)';
+    // Translate the wrapper off-screen on dismiss so the whole card slides out
+    // as one. The reset-then-target pattern on open forces the browser to
+    // record a starting value so the transition actually animates.
+    // Start at `false` so a mount with `isOpen=true` (autopresent via
+    // `initialDetentIndex`) is detected as a false→true transition and runs
+    // the slide-up animation instead of snapping straight to rest.
+    const wasOpenRef = React.useRef(false);
+    React.useEffect(() => {
+      if (!drawerRef.current) {
+        wasOpenRef.current = isOpen;
+        return;
       }
-    }
-    wasOpenRef.current = isOpen;
-  }, [isOpen, detached, drawerRef]);
-
-  const contentNode = (
-    <DialogPrimitive.Content
-      data-vaul-drawer-direction={direction}
-      data-vaul-drawer=""
-      data-vaul-detached={detached ? 'true' : 'false'}
-      data-vaul-delayed-snap-points={delayedSnapPoints ? 'true' : 'false'}
-      data-vaul-snap-points={isOpen && hasSnapPoints ? 'true' : 'false'}
-      data-vaul-custom-container={container ? 'true' : 'false'}
-      data-vaul-animate={shouldAnimate?.current ? 'true' : 'false'}
-      {...rest}
-      ref={composedRef}
-      style={
-        snapPointsOffset && snapPointsOffset.length > 0
-          ? ({
-              '--snap-point-height': `${snapPointsOffset[activeSnapPointIndex ?? 0]!}px`,
-              ...style,
-              'pointerEvents': 'auto',
-            } as React.CSSProperties)
-          : ({ ...style, pointerEvents: 'auto' } as React.CSSProperties)
+      const wrapper = drawerRef.current.closest<HTMLElement>('[data-vaul-detached-wrapper]');
+      if (wrapper) {
+        const transition = `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`;
+        const viewportH = typeof window !== 'undefined' ? window.innerHeight : 0;
+        if (!isOpen && wasOpenRef.current) {
+          wrapper.style.transition = transition;
+          wrapper.style.transform = `translate3d(0, ${viewportH}px, 0)`;
+        } else if (isOpen && !wasOpenRef.current) {
+          wrapper.style.transition = 'none';
+          wrapper.style.transform = `translate3d(0, ${viewportH}px, 0)`;
+          // eslint-disable-next-line no-void
+          void wrapper.offsetHeight;
+          wrapper.style.transition = transition;
+          wrapper.style.transform = 'translate3d(0, 0, 0)';
+        }
       }
-      onPointerDown={(event) => {
-        if (handleOnly) return;
-        rest.onPointerDown?.(event);
-        pointerStartRef.current = { x: event.pageX, y: event.pageY };
-        onPress(event);
-      }}
-      onOpenAutoFocus={(e) => {
-        onOpenAutoFocus?.(e);
-
-        if (!autoFocus) {
-          e.preventDefault();
+      wasOpenRef.current = isOpen;
+    }, [isOpen, detached, drawerRef]);
+
+    const contentNode = (
+      <DialogPrimitive.Content
+        data-vaul-drawer-direction={direction}
+        data-vaul-drawer=""
+        data-vaul-detached={detached ? 'true' : 'false'}
+        data-vaul-delayed-snap-points={delayedSnapPoints ? 'true' : 'false'}
+        data-vaul-snap-points={isOpen && hasSnapPoints ? 'true' : 'false'}
+        data-vaul-custom-container={container ? 'true' : 'false'}
+        data-vaul-animate={shouldAnimate?.current ? 'true' : 'false'}
+        {...rest}
+        ref={composedRef}
+        style={
+          snapPointsOffset && snapPointsOffset.length > 0
+            ? ({
+                '--snap-point-height': `${snapPointsOffset[activeSnapPointIndex ?? 0]!}px`,
+                ...style,
+                'pointerEvents': 'auto',
+              } as React.CSSProperties)
+            : ({ ...style, pointerEvents: 'auto' } as React.CSSProperties)
         }
-      }}
-      onPointerDownOutside={(e) => {
-        onPointerDownOutside?.(e);
+        onPointerDown={(event) => {
+          if (handleOnly) return;
+          rest.onPointerDown?.(event);
+          pointerStartRef.current = { x: event.pageX, y: event.pageY };
+          onPress(event);
+        }}
+        onOpenAutoFocus={(e) => {
+          onOpenAutoFocus?.(e);
 
-        if (!modal || e.defaultPrevented || isBelowFade) {
-          e.preventDefault();
-          return;
-        }
+          if (!autoFocus) {
+            e.preventDefault();
+          }
+        }}
+        onPointerDownOutside={(e) => {
+          onPointerDownOutside?.(e);
 
-        if (keyboardIsOpen.current) {
-          keyboardIsOpen.current = false;
-        }
-      }}
-      onFocusOutside={(e) => {
-        if (!modal || isBelowFade) {
+          if (!modal || e.defaultPrevented || isBelowFade) {
+            e.preventDefault();
+            return;
+          }
+
+          // Non-dismissible + dimmed: collapse to the highest non-dimmed
+          // snap point instead of silently swallowing the dismiss attempt.
+          // Mirrors the native Android dim-tap behavior.
+          if (
+            !dismissible &&
+            hasSnapPoints &&
+            fadeFromIndex !== undefined &&
+            fadeFromIndex > 0 &&
+            typeof activeSnapPointIndex === 'number' &&
+            activeSnapPointIndex >= fadeFromIndex
+          ) {
+            e.preventDefault();
+            setActiveSnapPoint(snapPoints![fadeFromIndex - 1]!);
+            return;
+          }
+
+          if (keyboardIsOpen.current) {
+            keyboardIsOpen.current = false;
+          }
+        }}
+        onEscapeKeyDown={(e) => {
+          onEscapeKeyDown?.(e);
+          if (e.defaultPrevented) return;
+
+          // Non-dismissible: collapse to the first snap point (if above it)
+          // instead of silently swallowing the dismiss attempt. Mirrors the
+          // native Android back-press behavior.
+          if (!dismissible) {
+            e.preventDefault();
+            if (
+              hasSnapPoints &&
+              typeof activeSnapPointIndex === 'number' &&
+              activeSnapPointIndex > 0
+            ) {
+              setActiveSnapPoint(snapPoints![0]!);
+            }
+          }
+        }}
+        onFocusOutside={(e) => {
+          // Never auto-dismiss the sheet on focus shifts. Without Radix's
+          // FocusScope trap (we run modal={false}), this fires whenever
+          // focus naturally leaves the drawer — e.g. React Navigation's
+          // web driver hides the previous screen via display:none, which
+          // moves focus off the trigger and dismisses the sheet.
           e.preventDefault();
-          return;
-        }
-      }}
-      onPointerMove={(event) => {
-        lastKnownPointerEventRef.current = event;
-        if (handleOnly) return;
-        rest.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
-        ) {
+        }}
+        onPointerMove={(event) => {
+          lastKnownPointerEventRef.current = event;
+          if (handleOnly) return;
+          rest.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) => {
+          rest.onPointerUp?.(event);
           pointerStartRef.current = null;
-        }
-      }}
-      onPointerUp={(event) => {
-        rest.onPointerUp?.(event);
-        pointerStartRef.current = null;
-        wasBeyondThePointRef.current = false;
-        onRelease(event);
-      }}
-      onPointerOut={(event) => {
-        rest.onPointerOut?.(event);
-        handleOnPointerUp(lastKnownPointerEventRef.current);
-      }}
-      onContextMenu={(event) => {
-        rest.onContextMenu?.(event);
-        if (lastKnownPointerEventRef.current) {
+          wasBeyondThePointRef.current = false;
+          onRelease(event);
+        }}
+        onPointerOut={(event) => {
+          rest.onPointerOut?.(event);
           handleOnPointerUp(lastKnownPointerEventRef.current);
-        }
-      }}
-    >
-      {hasAutoSnapPoint ? (
+        }}
+        onContextMenu={(event) => {
+          rest.onContextMenu?.(event);
+          if (lastKnownPointerEventRef.current) {
+            handleOnPointerUp(lastKnownPointerEventRef.current);
+          }
+        }}
+      >
         <div ref={setAutoSizeNode} data-vaul-auto-size-wrapper="" style={autoSizeWrapperStyle}>
           {children}
         </div>
-      ) : (
-        children
-      )}
-    </DialogPrimitive.Content>
-  );
+      </DialogPrimitive.Content>
+    );
 
-  return (
-    <div data-vaul-detached-wrapper="" style={wrapperStyle}>
-      {contentNode}
-      {detachedSiblings}
-    </div>
-  );
-});
+    return (
+      <div data-vaul-detached-wrapper="" style={wrapperStyle}>
+        {contentNode}
+        {detachedSiblings}
+      </div>
+    );
+  }
+);
 
 Content.displayName = 'Drawer.Content';
 
@@ -1434,106 +1433,105 @@ export type HandleProps = React.ComponentPropsWithoutRef<'div'> & {
 const LONG_HANDLE_PRESS_TIMEOUT = 250;
 const DOUBLE_TAP_TIMEOUT = 120;
 
-export const Handle = React.forwardRef<HTMLDivElement, HandleProps>(function (
-  { preventCycle = false, children, ...rest },
-  ref
-) {
-  const {
-    closeDrawer,
-    isDragging,
-    snapPoints,
-    activeSnapPoint,
-    setActiveSnapPoint,
-    dismissible,
-    handleOnly,
-    isOpen,
-    onPress,
-    onDrag,
-  } = useDrawerContext();
-
-  const closeTimeoutIdRef = React.useRef<number | null>(null);
-  const shouldCancelInteractionRef = React.useRef(false);
-
-  function handleStartCycle() {
-    // Stop if this is the second click of a double click
-    if (shouldCancelInteractionRef.current) {
-      handleCancelInteraction();
-      return;
+export const Handle = React.forwardRef<HTMLDivElement, HandleProps>(
+  ({ preventCycle = false, children, ...rest }, ref) => {
+    const {
+      closeDrawer,
+      isDragging,
+      snapPoints,
+      activeSnapPoint,
+      setActiveSnapPoint,
+      dismissible,
+      handleOnly,
+      isOpen,
+      onPress,
+      onDrag,
+    } = useDrawerContext();
+
+    const closeTimeoutIdRef = React.useRef<number | null>(null);
+    const shouldCancelInteractionRef = React.useRef(false);
+
+    function handleStartCycle() {
+      // Stop if this is the second click of a double click
+      if (shouldCancelInteractionRef.current) {
+        handleCancelInteraction();
+        return;
+      }
+      window.setTimeout(() => {
+        handleCycleSnapPoints();
+      }, DOUBLE_TAP_TIMEOUT);
     }
-    window.setTimeout(() => {
-      handleCycleSnapPoints();
-    }, DOUBLE_TAP_TIMEOUT);
-  }
 
-  function handleCycleSnapPoints() {
-    // Prevent accidental taps while resizing drawer
-    if (isDragging || preventCycle || shouldCancelInteractionRef.current) {
+    function handleCycleSnapPoints() {
+      // Prevent accidental taps while resizing drawer
+      if (isDragging || preventCycle || shouldCancelInteractionRef.current) {
+        handleCancelInteraction();
+        return;
+      }
+      // Make sure to clear the timeout id if the user releases the handle before the cancel timeout
       handleCancelInteraction();
-      return;
-    }
-    // Make sure to clear the timeout id if the user releases the handle before the cancel timeout
-    handleCancelInteraction();
 
-    if (!snapPoints || snapPoints.length === 0) {
-      if (!dismissible) {
-        closeDrawer();
+      if (!snapPoints || snapPoints.length === 0) {
+        if (!dismissible) {
+          closeDrawer();
+        }
+        return;
       }
-      return;
-    }
 
-    const isLastSnapPoint = activeSnapPoint === snapPoints[snapPoints.length - 1];
+      const isLastSnapPoint = activeSnapPoint === snapPoints[snapPoints.length - 1];
 
-    if (isLastSnapPoint && dismissible) {
-      closeDrawer();
-      return;
-    }
+      if (isLastSnapPoint && dismissible) {
+        closeDrawer();
+        return;
+      }
 
-    const currentSnapIndex = snapPoints.findIndex((point) => point === activeSnapPoint);
-    if (currentSnapIndex === -1) return; // activeSnapPoint not found in snapPoints
-    const nextSnapPoint = snapPoints[currentSnapIndex + 1];
-    if (nextSnapPoint === undefined) return;
-    setActiveSnapPoint(nextSnapPoint);
-  }
+      const currentSnapIndex = snapPoints.findIndex((point) => point === activeSnapPoint);
+      if (currentSnapIndex === -1) return; // activeSnapPoint not found in snapPoints
+      const nextSnapPoint = snapPoints[currentSnapIndex + 1];
+      if (nextSnapPoint === undefined) return;
+      setActiveSnapPoint(nextSnapPoint);
+    }
 
-  function handleStartInteraction() {
-    closeTimeoutIdRef.current = window.setTimeout(() => {
-      // Cancel click interaction on a long press
-      shouldCancelInteractionRef.current = true;
-    }, LONG_HANDLE_PRESS_TIMEOUT);
-  }
+    function handleStartInteraction() {
+      closeTimeoutIdRef.current = window.setTimeout(() => {
+        // Cancel click interaction on a long press
+        shouldCancelInteractionRef.current = true;
+      }, LONG_HANDLE_PRESS_TIMEOUT);
+    }
 
-  function handleCancelInteraction() {
-    if (closeTimeoutIdRef.current) {
-      window.clearTimeout(closeTimeoutIdRef.current);
+    function handleCancelInteraction() {
+      if (closeTimeoutIdRef.current) {
+        window.clearTimeout(closeTimeoutIdRef.current);
+      }
+      shouldCancelInteractionRef.current = false;
     }
-    shouldCancelInteractionRef.current = false;
-  }
 
-  return (
-    <div
-      onClick={handleStartCycle}
-      onPointerCancel={handleCancelInteraction}
-      onPointerDown={(e) => {
-        if (handleOnly) onPress(e);
-        handleStartInteraction();
-      }}
-      onPointerMove={(e) => {
-        if (handleOnly) onDrag(e);
-      }}
-      // onPointerUp is already handled by the content component
-      ref={ref}
-      data-vaul-drawer-visible={isOpen ? 'true' : 'false'}
-      data-vaul-handle=""
-      aria-hidden="true"
-      {...rest}
-    >
-      {/* Expand handle's hit area beyond what's visible to ensure a 44x44 tap target for touch devices */}
-      <span data-vaul-handle-hitarea="" aria-hidden="true">
-        {children}
-      </span>
-    </div>
-  );
-});
+    return (
+      <div
+        onClick={handleStartCycle}
+        onPointerCancel={handleCancelInteraction}
+        onPointerDown={(e) => {
+          if (handleOnly) onPress(e);
+          handleStartInteraction();
+        }}
+        onPointerMove={(e) => {
+          if (handleOnly) onDrag(e);
+        }}
+        // onPointerUp is already handled by the content component
+        ref={ref}
+        data-vaul-drawer-visible={isOpen ? 'true' : 'false'}
+        data-vaul-handle=""
+        aria-hidden="true"
+        {...rest}
+      >
+        {/* Expand handle's hit area beyond what's visible to ensure a 44x44 tap target for touch devices */}
+        <span data-vaul-handle-hitarea="" aria-hidden="true">
+          {children}
+        </span>
+      </div>
+    );
+  }
+);
 
 Handle.displayName = 'Drawer.Handle';