@lodev09/react-native-true-sheet 3.11.5 → 3.11.7

package/src/TrueSheet.web.tsx

@@ -255,6 +255,42 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     (header ? headerHeight : 0) + (footer ? footerHeight : 0) + peekContentHeight ||
     DEFAULT_PEEK_HEIGHT;
 
+  // Below the last detent a vertical touch pan moves the sheet, not the
+  // content — `[data-vaul-scroll-locked]` disables vertical touch panning on
+  // the scroll container and everything inside it (see vaul/style.css).
+  const isScrollLocked =
+    validDetents.length > 0 && activeSnapPoint !== validDetents[validDetents.length - 1];
+
+  // Vaul measures the auto-size wrapper's offsetHeight (always, post fork).
+  // Track it here so the form sheet can size its card to fit content,
+  // clamped between a minimum ratio of the viewport and a maximum derived
+  // from `detachedOffset` (the breathing room left at top + bottom of the
+  // floating card).
+  const [measuredContentHeight, setMeasuredContentHeight] = useState(0);
+
+  const effectiveMaxContentHeight = useMemo<number | undefined>(() => {
+    if (maxContentHeight !== undefined) return maxContentHeight;
+    if (!isFormSheet) return undefined;
+    const min = windowHeight * DEFAULT_FORM_SHEET_HEIGHT_RATIO;
+    const max = Math.max(min, windowHeight - 2 * detachedOffset);
+    if (measuredContentHeight <= 0) return min;
+    return Math.max(min, Math.min(measuredContentHeight, max));
+  }, [maxContentHeight, isFormSheet, windowHeight, detachedOffset, measuredContentHeight]);
+
+  // Center the form sheet using the actual visible drawer height. Vaul
+  // auto-sizes to content (capped by `maxContentHeight`), so when content is
+  // shorter than `effectiveMaxContentHeight`'s min-clamped floor, using that
+  // for the offset would push a small sheet below the viewport center.
+  const effectiveDetachedOffset = useMemo(() => {
+    if (!isFormSheet) return detachedOffset;
+    const max = Math.max(0, windowHeight - 2 * detachedOffset);
+    const visibleHeight =
+      measuredContentHeight > 0
+        ? Math.min(measuredContentHeight, max)
+        : (effectiveMaxContentHeight ?? 0);
+    return Math.max(0, (windowHeight - visibleHeight) / 2);
+  }, [isFormSheet, windowHeight, detachedOffset, measuredContentHeight, effectiveMaxContentHeight]);
+
   // Present/dismiss events. The sheet settles via a CSS `transform` transition
   // on either the drawer (snap-points on autopresent) or the wrapper (whole-
   // card slide on reopen/dismiss). `Animation.finished` from the Web Animations
@@ -285,54 +321,91 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     activeSnapPointRef.current = activeSnapPoint;
   });
 
-  const computeDetentInfo = useCallback((): DetentInfoEventPayload => {
-    const snap = activeSnapPointRef.current;
-    const index = snap != null ? validDetentsRef.current.indexOf(snap) : -1;
-    const position = drawerContentRef.current?.getBoundingClientRect().top ?? 0;
-    const detent = typeof snap === 'number' ? snap : 0;
-    return { index, position, detent };
+  // Detent geometry — target top-Y (`positions`) and height ratio (`values`)
+  // per detent. Mirrors vaul's snap-offset math exactly (same effective
+  // height, ceiling, and 'auto'/'peek' resolution) so computed targets match
+  // where the drawer actually settles. Numeric detent d → top-Y =
+  // (1 - d) * effectiveH. 'auto' resolves to the auto-size wrapper's measured
+  // height (tracked via vaul's `onContentHeightChange`) — same signal vaul
+  // uses to compute its snap offset. Inputs live in a render-synced ref so
+  // the compute callbacks stay referentially stable for the event effects.
+  const geometryInputsRef = useRef({
+    effectiveDetached,
+    effectiveDetachedOffset,
+    effectiveMaxContentHeight,
+    peekHeight,
+    measuredContentHeight,
+  });
+  geometryInputsRef.current = {
+    effectiveDetached,
+    effectiveDetachedOffset,
+    effectiveMaxContentHeight,
+    peekHeight,
+    measuredContentHeight,
+  };
+
+  const computeDetentGeometry = useCallback(() => {
+    const inputs = geometryInputsRef.current;
+    const windowH = window.innerHeight;
+    const effectiveH = inputs.effectiveDetached
+      ? windowH - inputs.effectiveDetachedOffset
+      : windowH;
+    // Matches vaul's height ceiling: min(effectiveH, maxContentHeight).
+    const ceiling =
+      inputs.effectiveMaxContentHeight !== undefined
+        ? Math.min(effectiveH, inputs.effectiveMaxContentHeight)
+        : effectiveH;
+    // Matches vaul's 'auto' fallback (effectiveHeight / 2) before content is
+    // measured — keeps targets consistent even before the drawer mounts.
+    const autoHeight = Math.min(
+      inputs.measuredContentHeight > 0 ? inputs.measuredContentHeight : effectiveH / 2,
+      ceiling
+    );
+
+    const positions: number[] = [];
+    const values: number[] = [];
+    for (const d of validDetentsRef.current) {
+      const h =
+        typeof d === 'number'
+          ? Math.min(d * effectiveH, ceiling)
+          : d === 'peek'
+            ? Math.min(inputs.peekHeight, ceiling)
+            : autoHeight;
+      positions.push(effectiveH - h);
+      values.push(effectiveH > 0 ? h / effectiveH : 0);
+    }
+    return { windowH, positions, values };
   }, []);
 
+  // Detent info for lifecycle events. Position/detent come from the active
+  // detent's target geometry — not the live DOM rect — so willPresent (drawer
+  // not mounted yet), detentChange (animation just started), and didPresent
+  // all emit the settled detent position, matching iOS/Android. Drag events
+  // pass `live: true` to report the in-flight rect position instead, also
+  // matching native.
+  const computeDetentInfo = useCallback(
+    (live = false): DetentInfoEventPayload => {
+      const snap = activeSnapPointRef.current;
+      const index = snap != null ? validDetentsRef.current.indexOf(snap) : -1;
+      const { windowH, positions, values } = computeDetentGeometry();
+      const target = index >= 0 ? positions[index] : undefined;
+      const position = live
+        ? (drawerContentRef.current?.getBoundingClientRect().top ?? target ?? windowH)
+        : (target ?? windowH);
+      return { index, position, detent: index >= 0 ? (values[index] ?? 0) : 0 };
+    },
+    [computeDetentGeometry]
+  );
+
   // Mirror Android: interpolate fractional index and detent from the drawer's
   // top-Y so continuous position updates (drag, animation) carry smooth values
-  // between detent boundaries. Numeric detent d → top-Y = (1 - d) * effectiveH.
-  // 'auto' resolves to the [data-vaul-auto-size-wrapper] element's measured
-  // offsetHeight — same signal vaul uses to compute its snap offset.
+  // between detent boundaries.
   const interpolateFromPosition = useCallback(
     (position: number): { index: number; detent: number } => {
-      const snaps = validDetentsRef.current;
-      const count = snaps.length;
+      const { windowH, positions, values } = computeDetentGeometry();
+      const count = positions.length;
       if (count === 0) return { index: -1, detent: 0 };
 
-      const windowH = window.innerHeight;
-      const effectiveH = effectiveDetached ? windowH - detachedOffset : windowH;
-      // Matches vaul's height ceiling: min(effectiveH, maxContentHeight).
-      const ceiling =
-        maxContentHeight !== undefined ? Math.min(effectiveH, maxContentHeight) : effectiveH;
-
-      const autoWrapper = drawerContentRef.current?.querySelector<HTMLElement>(
-        '[data-vaul-auto-size-wrapper]'
-      );
-      const autoHeight = Math.min(autoWrapper?.offsetHeight ?? ceiling / 2, ceiling);
-
-      const positions: number[] = [];
-      const values: number[] = [];
-      for (let i = 0; i < count; i++) {
-        const d = snaps[i];
-        if (typeof d === 'number') {
-          const h = Math.min(d * effectiveH, ceiling);
-          positions.push(effectiveH - h);
-          values.push(effectiveH > 0 ? h / effectiveH : 0);
-        } else if (d === 'peek') {
-          const h = Math.min(peekHeight, ceiling);
-          positions.push(effectiveH - h);
-          values.push(effectiveH > 0 ? h / effectiveH : 0);
-        } else {
-          positions.push(effectiveH - autoHeight);
-          values.push(effectiveH > 0 ? autoHeight / effectiveH : 0);
-        }
-      }
-
       // Absorb subpixel drift from getBoundingClientRect so at-rest positions
       // don't sneak into the below-first branch and emit near-zero negatives
       // like `-1e-8` (which render as "-1" via JS scientific-notation toString).
@@ -378,7 +451,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
 
       return { index: count - 1, detent: values[count - 1]! };
     },
-    [effectiveDetached, detachedOffset, maxContentHeight, peekHeight]
+    [computeDetentGeometry]
   );
 
   const handlePositionChange = useCallback(
@@ -504,14 +577,14 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   const handleDrag = useCallback(() => {
     if (!isDraggingRef.current) {
       isDraggingRef.current = true;
-      onDragBeginRef.current?.({ nativeEvent: computeDetentInfo() } as DragBeginEvent);
+      onDragBeginRef.current?.({ nativeEvent: computeDetentInfo(true) } as DragBeginEvent);
     }
-    onDragChangeRef.current?.({ nativeEvent: computeDetentInfo() } as DragChangeEvent);
+    onDragChangeRef.current?.({ nativeEvent: computeDetentInfo(true) } as DragChangeEvent);
   }, [computeDetentInfo]);
   const handleRelease = useCallback(() => {
     if (!isDraggingRef.current) return;
     isDraggingRef.current = false;
-    onDragEndRef.current?.({ nativeEvent: computeDetentInfo() } as DragEndEvent);
+    onDragEndRef.current?.({ nativeEvent: computeDetentInfo(true) } as DragEndEvent);
   }, [computeDetentInfo]);
 
   const { isNested, dismissAbove, descendants } = useSheetStack(
@@ -764,39 +837,9 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   // Form-sheet style (presentation='form'): centered floating card with a
   // default width and a height fit to content. We reuse the existing detached
   // mechanic so drag/snap math stays correct — the wrapper is bottom-attached
-  // with a computed offset that centers it vertically. `presentation` is
-  // absolute: when 'form', `maxContentWidth` is ignored and the card uses
-  // DEFAULT_FORM_SHEET_WIDTH.
-
-  // Vaul measures the auto-size wrapper's offsetHeight (always, post fork).
-  // Track it here so the form sheet can size its card to fit content,
-  // clamped between a minimum ratio of the viewport and a maximum derived
-  // from `detachedOffset` (the breathing room left at top + bottom of the
-  // floating card).
-  const [measuredContentHeight, setMeasuredContentHeight] = useState(0);
-
-  const effectiveMaxContentHeight = useMemo<number | undefined>(() => {
-    if (maxContentHeight !== undefined) return maxContentHeight;
-    if (!isFormSheet) return undefined;
-    const min = windowHeight * DEFAULT_FORM_SHEET_HEIGHT_RATIO;
-    const max = Math.max(min, windowHeight - 2 * detachedOffset);
-    if (measuredContentHeight <= 0) return min;
-    return Math.max(min, Math.min(measuredContentHeight, max));
-  }, [maxContentHeight, isFormSheet, windowHeight, detachedOffset, measuredContentHeight]);
-
-  // Center the form sheet using the actual visible drawer height. Vaul
-  // auto-sizes to content (capped by `maxContentHeight`), so when content is
-  // shorter than `effectiveMaxContentHeight`'s min-clamped floor, using that
-  // for the offset would push a small sheet below the viewport center.
-  const effectiveDetachedOffset = useMemo(() => {
-    if (!isFormSheet) return detachedOffset;
-    const max = Math.max(0, windowHeight - 2 * detachedOffset);
-    const visibleHeight =
-      measuredContentHeight > 0
-        ? Math.min(measuredContentHeight, max)
-        : (effectiveMaxContentHeight ?? 0);
-    return Math.max(0, (windowHeight - visibleHeight) / 2);
-  }, [isFormSheet, windowHeight, detachedOffset, measuredContentHeight, effectiveMaxContentHeight]);
+  // with a computed offset (`effectiveDetachedOffset`, declared above) that
+  // centers it vertically. `presentation` is absolute: when 'form',
+  // `maxContentWidth` is ignored and the card uses DEFAULT_FORM_SHEET_WIDTH.
 
   // The wrapper holds all horizontal sizing/anchoring so its rounded-bottom
   // clip (when detached) aligns with the drawer's horizontal bounds on
@@ -930,7 +973,10 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
                     {isValidElement(header) ? header : createElement(header)}
                   </View>
                 )}
-                <div style={scrollableContainerStyle}>
+                <div
+                  style={scrollableContainerStyle}
+                  data-vaul-scroll-locked={isScrollLocked ? '' : undefined}
+                >
                   <View ref={contentRef} style={style}>
                     {children}
                   </View>

package/src/web/vaul/index.tsx

@@ -24,7 +24,7 @@ import type { DrawerDirection } from './types';
 import { useComposedRefs } from './use-composed-refs';
 import { useControllableState } from './use-controllable-state';
 import { usePositionFixed } from './use-position-fixed';
-import { isInput, usePreventScroll } from './use-prevent-scroll';
+import { isInput, isScrollable, usePreventScroll } from './use-prevent-scroll';
 import { useScaleBackground } from './use-scale-background';
 import { useSnapPoints } from './use-snap-points';
 
@@ -337,6 +337,44 @@ export function Root({
     noBodyStyles,
   });
 
+  // While the sheet itself is being dragged, scrollables in the touched chain
+  // are frozen (overflow: hidden). Touch browsers latch the scroll gesture at
+  // touchstart and ignore preventDefault once scrolling has started, so making
+  // the scroller non-scrollable mid-gesture is the only reliable way to keep
+  // the content from panning along with the sheet.
+  const frozenScrollablesRef = React.useRef<
+    { element: HTMLElement; overflowX: string; overflowY: string }[] | null
+  >(null);
+
+  function freezeScrollables(target: EventTarget) {
+    if (frozenScrollablesRef.current) return;
+    const frozen: { element: HTMLElement; overflowX: string; overflowY: string }[] = [];
+    let element = target instanceof HTMLElement ? target : null;
+    while (element && element !== drawerRef.current) {
+      if (isScrollable(element)) {
+        frozen.push({
+          element,
+          overflowX: element.style.overflowX,
+          overflowY: element.style.overflowY,
+        });
+        element.style.overflowX = 'hidden';
+        element.style.overflowY = 'hidden';
+      }
+      element = element.parentElement;
+    }
+    frozenScrollablesRef.current = frozen;
+  }
+
+  function unfreezeScrollables() {
+    const frozen = frozenScrollablesRef.current;
+    if (!frozen) return;
+    frozenScrollablesRef.current = null;
+    for (const { element, overflowX, overflowY } of frozen) {
+      element.style.overflowX = overflowX;
+      element.style.overflowY = overflowY;
+    }
+  }
+
   function getScale() {
     return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
   }
@@ -386,7 +424,16 @@ export function Root({
     }
 
     if (swipeAmount !== null) {
-      if (direction === 'bottom' ? swipeAmount > 0 : swipeAmount < 0) {
+      // Translated past the drag threshold → keep dragging. Below the last
+      // snap point the threshold is 0, so the sheet always wins over content
+      // scrolling. At the last snap point the threshold is its resting
+      // translate — which can still be > 0 when the max detent < 1 — so an
+      // at-rest sheet falls through to the scroll checks and content
+      // scrolling wins, matching native. Mid-drag/mid-animation the sheet is
+      // displaced past rest and still wins.
+      const atLastSnapPoint = snapPoints && activeSnapPointIndex === snapPoints.length - 1;
+      const restOffset = atLastSnapPoint ? (snapPointsOffset?.[activeSnapPointIndex!] ?? 0) : 0;
+      if (direction === 'bottom' ? swipeAmount > restOffset + 1 : swipeAmount < restOffset - 1) {
         return true;
       }
     }
@@ -396,13 +443,16 @@ export function Root({
       return false;
     }
 
-    // Disallow dragging if drawer was scrolled within `scrollLockTimeout`
+    // Disallow dragging if drawer was scrolled within `scrollLockTimeout`.
+    // Don't re-arm the timestamp here — a prevented drag attempt is not a
+    // scroll, and re-arming would keep the lock alive for as long as the
+    // finger moves, deadening the whole gesture instead of just the first
+    // `scrollLockTimeout` ms after the last real scroll.
     if (
       lastTimeDragPrevented.current &&
       date.getTime() - lastTimeDragPrevented.current.getTime() < scrollLockTimeout &&
       swipeAmount === 0
     ) {
-      lastTimeDragPrevented.current = date;
       return false;
     }
 
@@ -417,7 +467,11 @@ export function Root({
     while (element) {
       // Check if the element is scrollable
       if (element.scrollHeight > element.clientHeight) {
-        if (element.scrollTop !== 0) {
+        // `> 0`, not `!== 0`: Safari reports a negative scrollTop during the
+        // rubber-band bounce at the top — that's "at the top" for drag
+        // purposes, and treating it as scrolled would arm the scroll lock and
+        // delay the sheet drag until the bounce fully settles.
+        if (element.scrollTop > 0) {
           lastTimeDragPrevented.current = new Date();
 
           // The element is scrollable and not scrolled to the top, so don't drag
@@ -480,10 +534,21 @@ export function Root({
         return;
       }
 
-      if (!isAllowedToDrag.current && !shouldDrag(event.target, isDraggingInDirection)) return;
-      drawerRef.current.classList.add(DRAG_CLASS);
-      // If shouldDrag gave true once after pressing down on the drawer, we set isAllowedToDrag to true and it will remain true until we let go, there's no reason to disable dragging mid way, ever, and that's the solution to it
-      isAllowedToDrag.current = true;
+      if (!isAllowedToDrag.current) {
+        if (!shouldDrag(event.target, isDraggingInDirection)) return;
+        drawerRef.current.classList.add(DRAG_CLASS);
+        // If shouldDrag gave true once after pressing down on the drawer, we set isAllowedToDrag to true and it will remain true until we let go, there's no reason to disable dragging mid way, ever, and that's the solution to it
+        isAllowedToDrag.current = true;
+        // Touch pans latched onto a scroller would keep scrolling the content
+        // along with the sheet drag — freeze them for the drag's duration.
+        if (event.pointerType !== 'mouse') freezeScrollables(event.target);
+        // Drag can engage mid-gesture (content scrolled back to its top under
+        // the same finger, or the scroll lock expiring). Re-anchor and start
+        // moving on the next tick so the sheet tracks the finger from here
+        // instead of jumping by the distance the gesture already consumed.
+        pointerStart.current = isVertical(direction) ? event.pageY : event.pageX;
+        return;
+      }
       set(drawerRef.current, {
         transition: 'none',
       });
@@ -691,6 +756,7 @@ export function Root({
 
     drawerRef.current.classList.remove(DRAG_CLASS);
     isAllowedToDrag.current = false;
+    unfreezeScrollables();
     setIsDragging(false);
     dragEndTime.current = new Date();
   }
@@ -700,6 +766,7 @@ export function Root({
 
     drawerRef.current.classList.remove(DRAG_CLASS);
     isAllowedToDrag.current = false;
+    unfreezeScrollables();
     setIsDragging(false);
     dragEndTime.current = new Date();
     const swipeAmount = getTranslate(drawerRef.current, direction);

package/src/web/vaul/style.css

@@ -1,7 +1,19 @@
+/* Registered so it can transition in sync with `transform` during snaps.
+   Descendants derive their visible-height layout from it, so `inherits: true`
+   is required. Unsupported browsers ignore this and the value just jumps to
+   the snap target instead of animating. */
+@property --snap-point-height {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
 [data-vaul-drawer] {
   touch-action: none;
   will-change: transform;
-  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+  transition:
+    transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
+    --snap-point-height 0.5s cubic-bezier(0.32, 0.72, 0, 1);
   animation-duration: 0.5s;
   animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
 }
@@ -84,6 +96,17 @@
   transform: translate3d(var(--snap-point-height, 0), 0, 0);
 }
 
+/* Below the last snap point, vertical touch pans should move the sheet — not
+   scroll the content (matches native). touch-action is latched at gesture
+   start and ancestors above a scroller aren't consulted, so every descendant
+   (nested scrollers included) must opt out of vertical panning ahead of time.
+   pan-x keeps horizontal carousels inside the content working. Wheel/trackpad
+   scrolling is unaffected. */
+[data-vaul-scroll-locked],
+[data-vaul-scroll-locked] * {
+  touch-action: pan-x !important;
+}
+
 [data-vaul-overlay][data-vaul-snap-points='false'] {
   animation-duration: 0.5s;
   animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);

package/src/web/vaul/use-snap-points.ts

@@ -198,13 +198,17 @@ export function useSnapPoints({
 
       const animateThisSnap = hasSnappedRef.current || initialAnimated;
       hasSnappedRef.current = true;
+      // `--snap-point-height` transitions alongside `transform` (registered via
+      // @property) so layouts derived from it (e.g. the scrollable fill) resize
+      // in sync with the drawer's slide instead of jumping to the target.
       set(drawerRef.current, {
-        transition: animateThisSnap
-          ? `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`
+        'transition': animateThisSnap
+          ? `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')}), --snap-point-height ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`
           : 'none',
-        transform: isVertical(direction)
+        'transform': isVertical(direction)
           ? `translate3d(0, ${dimension}px, 0)`
           : `translate3d(${dimension}px, 0, 0)`,
+        '--snap-point-height': `${dimension}px`,
       });
 
       // Snapping implies drag overshoot (if any) should be undone.
@@ -360,19 +364,24 @@ export function useSnapPoints({
     if ((direction === 'bottom' || direction === 'right') && newValue > snapPointsOffset[0]) {
       const excess = newValue - snapPointsOffset[0];
       set(drawerRef.current, {
-        transform: isVertical(direction)
+        'transform': isVertical(direction)
           ? `translate3d(0, ${snapPointsOffset[0]}px, 0)`
           : `translate3d(${snapPointsOffset[0]}px, 0, 0)`,
+        '--snap-point-height': `${snapPointsOffset[0]}px`,
       });
       setDetachedWrapperTransform(excess, false);
       return;
     }
 
     setDetachedWrapperTransform(0, false);
+    // Keep `--snap-point-height` tracking the live drag position so layouts
+    // derived from it (e.g. the scrollable fill) resize with the drawer
+    // instead of staying cut off at the last detent's visible height.
     set(drawerRef.current, {
-      transform: isVertical(direction)
+      'transform': isVertical(direction)
         ? `translate3d(0, ${newValue}px, 0)`
         : `translate3d(${newValue}px, 0, 0)`,
+      '--snap-point-height': `${newValue}px`,
     });
   }