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

package/src/web/vaul/index.tsx

@@ -3,6 +3,7 @@
 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';
@@ -185,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({
@@ -225,6 +232,7 @@ export function Root({
   detachedWrapperStyle,
   maxContentHeight,
   initialAnimated = true,
+  onContentHeightChange,
 }: DialogProps) {
   const [isOpen = false, setIsOpen] = useControllableState({
     defaultProp: defaultOpen,
@@ -239,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);
@@ -274,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)
@@ -566,88 +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]);
-
-  // Radix DismissableLayer's body-restore on unmount is broken: its two
-  // useEffects (see @radix-ui/react-dismissable-layer dist/index.mjs:68-92)
-  // run cleanups in reverse declaration order, so the layers-set decrement
-  // (effect B) runs BEFORE the size-1 body-restore check (effect A). When
-  // the last layer unmounts, A sees size=0 and skips the restore — body
-  // stays 'none'. Take ownership of the restore here on Drawer.Root unmount.
-  // Skipped when nested or non-modal so an inner drawer's unmount doesn't
-  // unlock an outer drawer's modal trap. Also bail if any other Radix
-  // dismissable layer is still open (sibling Dialog/AlertDialog/Popover) —
-  // that one wants the lock kept.
-  React.useEffect(() => {
-    if (nested || !modal) return;
-    return () => {
-      if (typeof document === 'undefined') return;
-      if (document.body.style.pointerEvents !== 'none') return;
-      if (
-        document.querySelector(
-          '[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"]'
-        )
-      )
-        return;
-      document.body.style.pointerEvents = 'auto';
-    };
-  }, [nested, modal]);
-
   React.useEffect(() => {
     function onVisualViewportChange() {
       if (!drawerRef.current || !repositionInputs) return;
@@ -916,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}
@@ -939,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={{
@@ -1035,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> & {
   /**
@@ -1066,7 +997,18 @@ export type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive
 };
 
 export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
-  ({ onPointerDownOutside, style, onOpenAutoFocus, children, detachedSiblings, ...rest }, ref) => {
+  (
+    {
+      onPointerDownOutside,
+      onEscapeKeyDown,
+      style,
+      onOpenAutoFocus,
+      children,
+      detachedSiblings,
+      ...rest
+    },
+    ref
+  ) => {
     const {
       drawerRef,
       onPress,
@@ -1081,6 +1023,8 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       isDragging,
       direction,
       snapPoints,
+      setActiveSnapPoint,
+      dismissible,
       container,
       handleOnly,
       shouldAnimate,
@@ -1092,20 +1036,17 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       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).
+    // 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 || !hasAutoSnapPoint) {
+        if (!node) {
           autoRoRef.current = null;
           return;
         }
@@ -1115,7 +1056,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
         ro.observe(node);
         autoRoRef.current = ro;
       },
-      [hasAutoSnapPoint, setContentHeight]
+      [setContentHeight]
     );
 
     const isBelowFade =
@@ -1310,7 +1251,10 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
     // 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);
+    // 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;
@@ -1330,10 +1274,6 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
           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)';
         }
       }
       wasOpenRef.current = isOpen;
@@ -1380,16 +1320,52 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
             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;
           }
         }}
-        onFocusOutside={(e) => {
-          if (!modal || isBelowFade) {
+        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();
-            return;
+            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();
+        }}
         onPointerMove={(event) => {
           lastKnownPointerEventRef.current = event;
           if (handleOnly) return;
@@ -1427,13 +1403,9 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
           }
         }}
       >
-        {hasAutoSnapPoint ? (
-          <div ref={setAutoSizeNode} data-vaul-auto-size-wrapper="" style={autoSizeWrapperStyle}>
-            {children}
-          </div>
-        ) : (
-          children
-        )}
+        <div ref={setAutoSizeNode} data-vaul-auto-size-wrapper="" style={autoSizeWrapperStyle}>
+          {children}
+        </div>
       </DialogPrimitive.Content>
     );
 

package/src/web/vaul/style.css

@@ -182,7 +182,7 @@
 }
 
 @media (pointer: fine) {
-  [data-vaul-handle-hitarea]: {
+  [data-vaul-handle-hitarea] {
     width: 100%;
     height: 100%;
   }