@lodev09/react-native-true-sheet 3.11.6 → 3.11.8

package/src/web/vaul/index.tsx

@@ -5,7 +5,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 { DrawerContext, useDrawerContext, type DragEvent } from './context';
 import './style.css';
 
 import { isIOS, isMobileFirefox } from './browser';
@@ -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
@@ -437,7 +491,7 @@ export function Root({
     return true;
   }
 
-  function onDrag(event: React.PointerEvent<HTMLDivElement>) {
+  function drag(event: DragEvent, pointerEvent?: React.PointerEvent<HTMLDivElement>) {
     if (!drawerRef.current) {
       return;
     }
@@ -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',
       });
@@ -492,7 +557,7 @@ export function Root({
         transition: 'none',
       });
 
-      onDragProp?.(event, percentageDragged);
+      if (pointerEvent) onDragProp?.(pointerEvent, percentageDragged);
 
       if (snapPoints) {
         onDragSnapPoints({ draggedDistance });
@@ -691,15 +756,17 @@ export function Root({
 
     drawerRef.current.classList.remove(DRAG_CLASS);
     isAllowedToDrag.current = false;
+    unfreezeScrollables();
     setIsDragging(false);
     dragEndTime.current = new Date();
   }
 
-  function onRelease(event: React.PointerEvent<HTMLDivElement> | null) {
+  function release(event: DragEvent | null, pointerEvent?: React.PointerEvent<HTMLDivElement>) {
     if (!isDragging || !drawerRef.current) return;
 
     drawerRef.current.classList.remove(DRAG_CLASS);
     isAllowedToDrag.current = false;
+    unfreezeScrollables();
     setIsDragging(false);
     dragEndTime.current = new Date();
     const swipeAmount = getTranslate(drawerRef.current, direction);
@@ -730,20 +797,20 @@ export function Root({
         velocity,
         dismissible,
       });
-      onReleaseProp?.(event, true);
+      if (pointerEvent) onReleaseProp?.(pointerEvent, true);
       return;
     }
 
     // Moved upwards, don't do anything
     if (direction === 'bottom' || direction === 'right' ? distMoved > 0 : distMoved < 0) {
       resetDrawer();
-      onReleaseProp?.(event, true);
+      if (pointerEvent) onReleaseProp?.(pointerEvent, true);
       return;
     }
 
     if (velocity > VELOCITY_THRESHOLD) {
       closeDrawer();
-      onReleaseProp?.(event, false);
+      if (pointerEvent) onReleaseProp?.(pointerEvent, false);
       return;
     }
 
@@ -762,11 +829,11 @@ export function Root({
       (isHorizontalSwipe ? visibleDrawerWidth : visibleDrawerHeight) * closeThreshold
     ) {
       closeDrawer();
-      onReleaseProp?.(event, false);
+      if (pointerEvent) onReleaseProp?.(pointerEvent, false);
       return;
     }
 
-    onReleaseProp?.(event, true);
+    if (pointerEvent) onReleaseProp?.(pointerEvent, true);
     resetDrawer();
   }
 
@@ -876,8 +943,10 @@ export function Root({
           overlayRef,
           onOpenChange,
           onPress,
-          onRelease,
-          onDrag,
+          onRelease: (event) => release(event, event ?? undefined),
+          onDrag: (event) => drag(event, event),
+          onTouchDrag: (event, pointerEvent) => drag(event, pointerEvent),
+          onTouchRelease: (event, pointerEvent) => release(event, pointerEvent),
           dismissible,
           shouldAnimate,
           handleOnly,
@@ -1021,6 +1090,8 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       onPress,
       onRelease,
       onDrag,
+      onTouchDrag,
+      onTouchRelease,
       keyboardIsOpen,
       snapPointsOffset,
       activeSnapPointIndex,
@@ -1077,6 +1148,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
     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 continuingCanceledTouchRef = React.useRef(false);
     const wasBeyondThePointRef = React.useRef(false);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
     useScaleBackground();
@@ -1309,6 +1381,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
         onPointerDown={(event) => {
           if (handleOnly) return;
           rest.onPointerDown?.(event);
+          continuingCanceledTouchRef.current = false;
           pointerStartRef.current = { x: event.pageX, y: event.pageY };
           onPress(event);
         }}
@@ -1395,14 +1468,68 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
         }}
         onPointerUp={(event) => {
           rest.onPointerUp?.(event);
+          continuingCanceledTouchRef.current = false;
           pointerStartRef.current = null;
           wasBeyondThePointRef.current = false;
           onRelease(event);
         }}
+        onPointerCancel={(event) => {
+          rest.onPointerCancel?.(event);
+          if (
+            event.pointerType === 'touch' &&
+            snapPoints &&
+            activeSnapPointIndex === snapPoints.length - 1
+          ) {
+            continuingCanceledTouchRef.current = true;
+            return;
+          }
+          handleOnPointerUp(null);
+        }}
         onPointerOut={(event) => {
           rest.onPointerOut?.(event);
+          if (continuingCanceledTouchRef.current) return;
           handleOnPointerUp(lastKnownPointerEventRef.current);
         }}
+        onTouchMove={(event) => {
+          rest.onTouchMove?.(event);
+          if (!continuingCanceledTouchRef.current) return;
+          const touch = event.touches[0];
+          if (!touch) return;
+          onTouchDrag(
+            {
+              target: event.target,
+              pageX: touch.pageX,
+              pageY: touch.pageY,
+              pointerType: 'touch',
+            },
+            lastKnownPointerEventRef.current ?? undefined
+          );
+        }}
+        onTouchEnd={(event) => {
+          rest.onTouchEnd?.(event);
+          if (!continuingCanceledTouchRef.current) return;
+          continuingCanceledTouchRef.current = false;
+          pointerStartRef.current = null;
+          wasBeyondThePointRef.current = false;
+          const touch = event.changedTouches[0];
+          onTouchRelease(
+            touch
+              ? {
+                  target: event.target,
+                  pageX: touch.pageX,
+                  pageY: touch.pageY,
+                  pointerType: 'touch',
+                }
+              : null,
+            lastKnownPointerEventRef.current ?? undefined
+          );
+        }}
+        onTouchCancel={(event) => {
+          rest.onTouchCancel?.(event);
+          if (!continuingCanceledTouchRef.current) return;
+          continuingCanceledTouchRef.current = false;
+          handleOnPointerUp(null);
+        }}
         onContextMenu={(event) => {
           rest.onContextMenu?.(event);
           if (lastKnownPointerEventRef.current) {

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`,
     });
   }