@lodev09/react-native-true-sheet 4.0.0-beta.2 → 4.0.0-beta.21

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

@@ -1,7 +1,13 @@
 // @ts-nocheck — vendored upstream, incompatible with noUncheckedIndexedAccess
 import React from 'react';
-import { set, isVertical } from './helpers';
-import { DEFAULT_PEEK_HEIGHT, TRANSITIONS, VELOCITY_THRESHOLD } from './constants';
+import { set, isVertical, getSnapPointTransform } from './helpers';
+import {
+  DEFAULT_PEEK_HEIGHT,
+  SHORT_DISMISS_DISTANCE,
+  SHORT_DISMISS_VELOCITY,
+  TRANSITIONS,
+  VELOCITY_THRESHOLD,
+} from './constants';
 import { useControllableState } from './use-controllable-state';
 import type { DrawerDirection } from './types';
 
@@ -198,16 +204,12 @@ 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.
+      // One animated value drives both the translation and the visible height.
       set(drawerRef.current, {
         'transition': animateThisSnap
-          ? `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')}), --snap-point-height ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`
+          ? `--snap-point-height ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`
           : 'none',
-        'transform': isVertical(direction)
-          ? `translate3d(0, ${dimension}px, 0)`
-          : `translate3d(${dimension}px, 0, 0)`,
+        'transform': getSnapPointTransform(direction),
         '--snap-point-height': `${dimension}px`,
       });
 
@@ -257,11 +259,13 @@ export function useSnapPoints({
     closeDrawer,
     velocity,
     dismissible,
+    dismissThreshold,
   }: {
     draggedDistance: number;
     closeDrawer: () => void;
     velocity: number;
     dismissible: boolean;
+    dismissThreshold: 'half' | 'short';
   }) {
     if (fadeFromIndex === undefined) return;
 
@@ -279,6 +283,23 @@ export function useSnapPoints({
       });
     }
 
+    // Short threshold: below the lowest detent, close on a short drag or any
+    // downward fling, like Compose Material3's sheet.
+    if (
+      dismissThreshold === 'short' &&
+      dismissible &&
+      (direction === 'bottom' || direction === 'right') &&
+      currentPosition > snapPointsOffset[0]
+    ) {
+      const overshoot = currentPosition - snapPointsOffset[0];
+      if (velocity > SHORT_DISMISS_VELOCITY || overshoot > SHORT_DISMISS_DISTANCE) {
+        closeDrawer();
+      } else {
+        snapToPoint(snapPointsOffset[0]);
+      }
+      return;
+    }
+
     // Distance-based dismiss: when overshooting past the lowest detent by more
     // than half of its visible height, commit to dismiss regardless of
     // velocity — lets a slow drag-down still close the sheet.
@@ -364,9 +385,7 @@ export function useSnapPoints({
     if ((direction === 'bottom' || direction === 'right') && newValue > snapPointsOffset[0]) {
       const excess = newValue - snapPointsOffset[0];
       set(drawerRef.current, {
-        'transform': isVertical(direction)
-          ? `translate3d(0, ${snapPointsOffset[0]}px, 0)`
-          : `translate3d(${snapPointsOffset[0]}px, 0, 0)`,
+        'transform': getSnapPointTransform(direction),
         '--snap-point-height': `${snapPointsOffset[0]}px`,
       });
       setDetachedWrapperTransform(excess, false);
@@ -378,9 +397,7 @@ export function useSnapPoints({
     // 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)
-        ? `translate3d(0, ${newValue}px, 0)`
-        : `translate3d(${newValue}px, 0, 0)`,
+      'transform': getSnapPointTransform(direction),
       '--snap-point-height': `${newValue}px`,
     });
   }