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

package/src/TrueSheetPeek.web.tsx

@@ -1,5 +1,5 @@
-import { createContext, useContext, useEffect, useRef, type RefObject } from 'react';
-import { View, type LayoutChangeEvent, type ViewProps } from 'react-native';
+import { createContext, type RefObject, useContext, useEffect, useRef } from 'react';
+import { type LayoutChangeEvent, View, type ViewProps } from 'react-native';
 
 /**
  * Reports the measured peek content height to the owning TrueSheet.
@@ -7,11 +7,25 @@ import { View, type LayoutChangeEvent, type ViewProps } from 'react-native';
  */
 export interface TrueSheetPeekContextValue {
   contentRef: RefObject<View | null>;
+  peekRef: RefObject<View | null>;
   setPeekContentHeight: (height: number) => void;
 }
 
 export const TrueSheetPeekContext = createContext<TrueSheetPeekContextValue | null>(null);
 
+/**
+ * Distance from the top of the content view to the bottom of the peek view,
+ * so the peek view's offset within the content (padding, views above it)
+ * counts toward the peek detent. Both rects live in the drawer's transformed
+ * subtree, so an in-flight translate cancels out of the delta.
+ * @internal
+ */
+export const measurePeekContentHeight = (
+  peekElement: HTMLElement,
+  contentElement: HTMLElement
+): number =>
+  peekElement.getBoundingClientRect().bottom - contentElement.getBoundingClientRect().top;
+
 /**
  * Wrapper component that marks its children as the sheet's peek content.
  * When rendered within a `TrueSheet`, the `"peek"` detent reveals everything
@@ -20,7 +34,11 @@ export const TrueSheetPeekContext = createContext<TrueSheetPeekContextValue | nu
  */
 export const TrueSheetPeek = ({ onLayout, ...rest }: ViewProps) => {
   const context = useContext(TrueSheetPeekContext);
-  const viewRef = useRef<View>(null);
+  const localRef = useRef<View>(null);
+
+  // Register into the sheet's peek ref so it can measure the peek live
+  // during detent geometry computation (state lags the first willPresent).
+  const viewRef = context?.peekRef ?? localRef;
 
   useEffect(() => () => context?.setPeekContentHeight(0), [context]);
 
@@ -30,12 +48,9 @@ export const TrueSheetPeek = ({ onLayout, ...rest }: ViewProps) => {
       const peekElement = viewRef.current as unknown as HTMLElement | null;
       const contentElement = context.contentRef.current as unknown as HTMLElement | null;
 
-      // Distance from the top of the content view to the bottom of the peek view,
-      // so the peek view's offset within the content (padding, views above it)
-      // counts toward the peek detent.
       const bottom =
         peekElement && contentElement
-          ? peekElement.getBoundingClientRect().bottom - contentElement.getBoundingClientRect().top
+          ? measurePeekContentHeight(peekElement, contentElement)
           : event.nativeEvent.layout.height;
 
       context.setPeekContentHeight(bottom);

package/src/web/vaul/context.ts

@@ -1,12 +1,24 @@
 import React from 'react';
 import type { DrawerDirection } from './types';
 
+export interface DragEvent {
+  target: EventTarget;
+  pageX: number;
+  pageY: number;
+  pointerType: string;
+}
+
 interface DrawerContextValue {
   drawerRef: React.RefObject<HTMLDivElement | null>;
   overlayRef: React.RefObject<HTMLDivElement | null>;
   onPress: (event: React.PointerEvent<HTMLDivElement>) => void;
   onRelease: (event: React.PointerEvent<HTMLDivElement> | null) => void;
   onDrag: (event: React.PointerEvent<HTMLDivElement>) => void;
+  onTouchDrag: (event: DragEvent, pointerEvent?: React.PointerEvent<HTMLDivElement>) => void;
+  onTouchRelease: (
+    event: DragEvent | null,
+    pointerEvent?: React.PointerEvent<HTMLDivElement>
+  ) => void;
   onNestedDrag: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
   onNestedOpenChange: (o: boolean) => void;
   onNestedRelease: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
@@ -47,6 +59,8 @@ export const DrawerContext = React.createContext<DrawerContextValue>({
   onPress: () => {},
   onRelease: () => {},
   onDrag: () => {},
+  onTouchDrag: () => {},
+  onTouchRelease: () => {},
   onNestedDrag: () => {},
   onNestedOpenChange: () => {},
   onNestedRelease: () => {},

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';
@@ -491,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;
     }
@@ -557,7 +557,7 @@ export function Root({
         transition: 'none',
       });
 
-      onDragProp?.(event, percentageDragged);
+      if (pointerEvent) onDragProp?.(pointerEvent, percentageDragged);
 
       if (snapPoints) {
         onDragSnapPoints({ draggedDistance });
@@ -761,7 +761,7 @@ export function Root({
     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);
@@ -797,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;
     }
 
@@ -829,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();
   }
 
@@ -943,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,
@@ -1088,6 +1090,8 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       onPress,
       onRelease,
       onDrag,
+      onTouchDrag,
+      onTouchRelease,
       keyboardIsOpen,
       snapPointsOffset,
       activeSnapPointIndex,
@@ -1144,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();
@@ -1376,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);
         }}
@@ -1462,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) {