@lodev09/react-native-true-sheet 4.0.0-beta.20 → 4.0.0-beta.22

package/src/TrueSheet.web.tsx

@@ -6,6 +6,7 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -80,6 +81,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     name,
     dismissible = true,
     draggable = true,
+    dismissThreshold = 'half',
     cornerRadius,
     style,
     backgroundColor: backgroundColorProp,
@@ -158,6 +160,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
 
   const colorScheme = useColorScheme();
   const shouldAutoPresent = initialDetentIndex >= 0 && initialDetentIndex < validDetents.length;
+  const didInitiallyPresentRef = useRef(shouldAutoPresent);
   const [isOpen, setIsOpen] = useState(shouldAutoPresent);
   const isOpenRef = useRef(isOpen);
   isOpenRef.current = isOpen;
@@ -282,10 +285,23 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
 
   useImperativeHandle(ref, () => methods, [methods]);
 
+  useEffect(() => {
+    if (!shouldAutoPresent || didInitiallyPresentRef.current) return;
+    didInitiallyPresentRef.current = true;
+    if (!isOpenRef.current) {
+      methods.present(initialDetentIndex);
+    }
+  }, [initialDetentIndex, shouldAutoPresent, methods]);
+
   const methodsRef = useRef<TrueSheetMethods | null>(methods);
   useRegisterSheet(name, methodsRef);
 
   const drawerContentRef = useRef<HTMLDivElement | null>(null);
+  const [drawerContent, setDrawerContent] = useState<HTMLDivElement | null>(null);
+  const handleDrawerRef = useCallback((node: HTMLDivElement | null) => {
+    drawerContentRef.current = node;
+    setDrawerContent(node);
+  }, []);
 
   // Measured header/footer heights drive the 'peek' snap point — mirrors
   // native, where the controller tracks headerHeight/footerHeight.
@@ -394,50 +410,36 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     (insetBehavior === 'automatic' || insetBehavior === 'footer');
   const measureContent = validDetents.includes('auto') || isFormSheet;
 
-  useEffect(() => {
-    if (!isOpen) return undefined;
-
-    let canceled = false;
-    let rafId = 0;
-    let observer: ReturnType<typeof observeSheetLayout> | undefined;
-
-    const attach = () => {
-      if (canceled) return;
-      const layoutEl = sizedLayoutRef.current;
-      const drawer = drawerContentRef.current;
-      if (!drawer || !layoutEl?.isConnected) {
-        // Radix Presence defers the portal mount; poll until the drawer is live.
-        rafId = window.requestAnimationFrame(attach);
-        return;
-      }
-
-      observer = observeSheetLayout({
-        drawer,
-        layout: layoutEl,
-        getContent: () => getDOMElement(contentRef.current),
-        getHeader: () => getDOMElement(headerElRef.current),
-        getFooter: () => getDOMElement(footerElRef.current),
-        getScrollable: () => getScrollableElement(scrollableRef?.current),
-        absoluteHeader,
-        absoluteFooter,
-        footerInsetAdjustment,
-        measureContent,
-        onHeightChange: (height) => {
-          naturalHeightRef.current = height;
-          setMeasuredContentHeight(height);
-        },
-      });
-    };
-
-    rafId = window.requestAnimationFrame(attach);
+  useLayoutEffect(() => {
+    const layoutEl = sizedLayoutRef.current;
+    if (!isOpen || !drawerContent || !layoutEl?.isConnected) return undefined;
+
+    setHeaderHeight(getDOMElement(headerElRef.current)?.offsetHeight ?? 0);
+    setFooterHeight(getDOMElement(footerElRef.current)?.offsetHeight ?? 0);
+    measurePeek();
+
+    const observer = observeSheetLayout({
+      drawer: drawerContent,
+      layout: layoutEl,
+      getContent: () => getDOMElement(contentRef.current),
+      getHeader: () => getDOMElement(headerElRef.current),
+      getFooter: () => getDOMElement(footerElRef.current),
+      getScrollable: () => getScrollableElement(scrollableRef?.current),
+      absoluteHeader,
+      absoluteFooter,
+      footerInsetAdjustment,
+      measureContent,
+      onHeightChange: (height) => {
+        naturalHeightRef.current = height;
+        setMeasuredContentHeight(height);
+      },
+    });
 
-    return () => {
-      canceled = true;
-      window.cancelAnimationFrame(rafId);
-      observer?.disconnect();
-    };
+    return () => observer.disconnect();
   }, [
     isOpen,
+    drawerContent,
+    measurePeek,
     absoluteHeader,
     absoluteFooter,
     footerInsetAdjustment,
@@ -1209,6 +1211,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
         onDrag={handleDrag}
         onRelease={handleRelease}
         dismissible={dismissible}
+        dismissThreshold={dismissThreshold}
         onDismissAttempt={handleDismissAttempt}
         draggable={draggable}
         repositionInputs={false}
@@ -1219,7 +1222,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
         detachedRadius={effectiveCornerRadius}
         maxContentHeight={effectiveMaxContentHeight}
         peekHeight={peekHeight}
-        initialAnimated={initialDetentAnimated}
+        initialAnimated={shouldAutoPresent ? initialDetentAnimated : true}
         detachedWrapperStyle={wrapperStyle}
         contentHeight={measuredContentHeight}
         activeSnapPoint={activeSnapPoint}
@@ -1229,7 +1232,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
         <Drawer.Portal container={portalContainer ?? undefined}>
           <Drawer.Overlay style={overlayStyle} />
           <Drawer.Content
-            ref={drawerContentRef}
+            ref={handleDrawerRef}
             style={mergedContentStyle}
             onPointerDownOutside={handlePointerDownOutside}
             detachedSiblings={

package/src/fabric/TrueSheetViewNativeComponent.ts

@@ -114,6 +114,7 @@ export interface NativeProps extends ViewProps {
   placement?: WithDefault<'automatic' | 'leading' | 'center' | 'trailing', 'automatic'>;
   placementOffset?: WithDefault<Double, 16>;
   insetAdjustment?: WithDefault<'automatic' | 'never', 'automatic'>;
+  dismissThreshold?: WithDefault<'half' | 'short', 'half'>;
 
   // Boolean properties - match defaults from TrueSheet.types.ts
   grabber?: WithDefault<boolean, true>;

package/src/web/vaul/constants.ts

@@ -9,6 +9,11 @@ export const DEFAULT_PEEK_HEIGHT = 150;
 
 export const CLOSE_THRESHOLD = 0.25;
 
+// Compose Material3 SheetState's dismiss thresholds, used by the 'short'
+// dismiss threshold: velocity in px/ms, distance in px.
+export const SHORT_DISMISS_VELOCITY = 0.125;
+export const SHORT_DISMISS_DISTANCE = 56;
+
 // Minimum downward pull (px) on a non-dismissible drawer at its first snap
 // point before the release counts as a dismiss attempt.
 export const DISMISS_ATTEMPT_THRESHOLD = 24;

package/src/web/vaul/context.ts

@@ -46,6 +46,8 @@ interface DrawerContextValue {
   container?: HTMLElement | null;
   autoFocus?: boolean;
   shouldAnimate?: React.RefObject<boolean>;
+  initialAnimated: boolean;
+  hasPresented: React.RefObject<boolean>;
   onPositionChangeRef: React.RefObject<((position: number) => void) | undefined>;
   setContentHeight: (height: number) => void;
   detached: boolean;
@@ -81,6 +83,8 @@ export const DrawerContext = React.createContext<DrawerContextValue>({
   closeDrawer: () => {},
   direction: 'bottom',
   shouldAnimate: { current: true },
+  initialAnimated: true,
+  hasPresented: { current: false },
   shouldScaleBackground: false,
   setBackgroundColorOnScale: true,
   noBodyStyles: false,

package/src/web/vaul/index.tsx

@@ -101,6 +101,12 @@ export type DialogProps = {
    * @default true
    */
   dismissible?: boolean;
+  /**
+   * How far the drawer must be dragged past its first snap point to close.
+   * `'half'` closes past half of it, `'short'` on a short drag or any fling.
+   * @default 'half'
+   */
+  dismissThreshold?: 'half' | 'short';
   /**
    * Called when the user tries to close a non-dismissible drawer — dragging down
    * at the first snap point, pressing escape, or tapping the handle of a
@@ -232,6 +238,7 @@ export function Root({
   closeThreshold = CLOSE_THRESHOLD,
   scrollLockTimeout = SCROLL_LOCK_TIMEOUT,
   dismissible = true,
+  dismissThreshold = 'half',
   onDismissAttempt,
   draggable = true,
   handleOnly = false,
@@ -292,6 +299,7 @@ export function Root({
   const dismissAttempted = React.useRef(false);
   const keyboardIsOpen = React.useRef(false);
   const shouldAnimate = React.useRef(!defaultOpen);
+  const hasPresented = React.useRef(false);
   const previousDiffFromInitial = React.useRef(0);
   const drawerRef = React.useRef<HTMLDivElement>(null);
   const drawerHeightRef = React.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
@@ -308,10 +316,14 @@ export function Root({
     onContentHeightChangeRef.current?.(measuredContentHeight);
   }, [measuredContentHeight]);
 
-  const onSnapPointChange = React.useCallback((activeSnapPointIndex: number) => {
+  const onSnapPointChange = React.useCallback((activeSnapPointIndex: number, animated: boolean) => {
     // 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)
       openTime.current = new Date();
+    // Instant snaps do not emit transition events for position tracking.
+    if (!animated && drawerRef.current) {
+      onPositionChangeRef.current?.(drawerRef.current.getBoundingClientRect().top);
+    }
   }, []);
 
   const {
@@ -855,6 +867,7 @@ export function Root({
         closeDrawer,
         velocity,
         dismissible,
+        dismissThreshold,
       });
       if (pointerEvent) onReleaseProp?.(pointerEvent, true);
       return;
@@ -1009,6 +1022,8 @@ export function Root({
           dismissible,
           onDismissAttempt,
           shouldAnimate,
+          initialAnimated,
+          hasPresented,
           handleOnly,
           isOpen,
           isDragging,
@@ -1167,6 +1182,8 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       container,
       handleOnly,
       shouldAnimate,
+      initialAnimated,
+      hasPresented,
       autoFocus,
       onPositionChangeRef,
       setContentHeight,
@@ -1415,15 +1432,18 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
           wrapper.style.transform = `translate3d(0, ${viewportH}px, 0)`;
         } else if (isOpen && !wasOpenRef.current) {
           wrapper.style.transition = 'none';
-          wrapper.style.transform = `translate3d(0, ${viewportH}px, 0)`;
-          // eslint-disable-next-line no-void
-          void wrapper.offsetHeight;
-          wrapper.style.transition = transition;
+          if (hasPresented.current || initialAnimated) {
+            wrapper.style.transform = `translate3d(0, ${viewportH}px, 0)`;
+            // eslint-disable-next-line no-void
+            void wrapper.offsetHeight;
+            wrapper.style.transition = transition;
+          }
           wrapper.style.transform = 'translate3d(0, 0, 0)';
+          hasPresented.current = true;
         }
       }
       wasOpenRef.current = isOpen;
-    }, [isOpen, detached, drawerRef]);
+    }, [isOpen, detached, drawerRef, initialAnimated, hasPresented]);
 
     // Subsequent snap writes belong to useSnapPoints. A React style update on
     // release would overwrite the live drag value before its transition starts.

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, getSnapPointTransform } from './helpers';
-import { DEFAULT_PEEK_HEIGHT, TRANSITIONS, VELOCITY_THRESHOLD } from './constants';
+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';
 
@@ -29,7 +35,7 @@ export function useSnapPoints({
   fadeFromIndex?: number;
   drawerRef: React.RefObject<HTMLDivElement | null>;
   overlayRef: React.RefObject<HTMLDivElement | null>;
-  onSnapPointChange(activeSnapPointIndex: number): void;
+  onSnapPointChange(activeSnapPointIndex: number, animated: boolean): void;
   direction?: DrawerDirection;
   container?: HTMLElement | null | undefined;
   snapToSequentialPoint?: boolean;
@@ -187,17 +193,31 @@ export function useSnapPoints({
     });
   };
 
-  // Skip the transition on the very first snap when the consumer opts out of
-  // the initial presentation animation. All subsequent snaps still animate.
+  // Initial measurements can take several commits before the first paint.
+  // Keep all of them unanimated when initial presentation animation is disabled.
   const hasSnappedRef = React.useRef(false);
+  const initialSnapFrameRef = React.useRef<number | null>(null);
+  React.useEffect(
+    () => () => {
+      if (initialSnapFrameRef.current !== null) {
+        window.cancelAnimationFrame(initialSnapFrameRef.current);
+        initialSnapFrameRef.current = null;
+      }
+    },
+    []
+  );
   const snapToPoint = React.useCallback(
     (dimension: number) => {
+      if (!drawerRef.current) return;
       const newSnapPointIndex =
         snapPointsOffset?.findIndex((snapPointDim) => snapPointDim === dimension) ?? null;
-      onSnapPointChange(newSnapPointIndex);
 
       const animateThisSnap = hasSnappedRef.current || initialAnimated;
-      hasSnappedRef.current = true;
+      if (initialSnapFrameRef.current === null) {
+        initialSnapFrameRef.current = window.requestAnimationFrame(() => {
+          hasSnappedRef.current = true;
+        });
+      }
       // One animated value drives both the translation and the visible height.
       set(drawerRef.current, {
         'transition': animateThisSnap
@@ -210,6 +230,9 @@ export function useSnapPoints({
       // Snapping implies drag overshoot (if any) should be undone.
       setDetachedWrapperTransform(0, animateThisSnap);
 
+      const overlayTransition = animateThisSnap
+        ? `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`
+        : 'none';
       if (
         snapPointsOffset &&
         newSnapPointIndex !== snapPointsOffset.length - 1 &&
@@ -218,24 +241,33 @@ export function useSnapPoints({
         newSnapPointIndex < fadeFromIndex
       ) {
         set(overlayRef.current, {
-          transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+          transition: overlayTransition,
           opacity: '0',
           pointerEvents: 'none',
         });
       } else {
         set(overlayRef.current, {
-          transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+          transition: overlayTransition,
           opacity: '1',
           pointerEvents: 'auto',
         });
       }
 
+      onSnapPointChange(newSnapPointIndex, animateThisSnap);
       setActiveSnapPoint(snapPoints?.[Math.max(newSnapPointIndex, 0)]);
     },
-    [drawerRef.current, snapPoints, snapPointsOffset, fadeFromIndex, overlayRef, setActiveSnapPoint]
+    [
+      drawerRef.current,
+      snapPoints,
+      snapPointsOffset,
+      fadeFromIndex,
+      overlayRef,
+      setActiveSnapPoint,
+      initialAnimated,
+    ]
   );
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (!isOpen) return;
     if (activeSnapPoint || activeSnapPointProp) {
       const newIndex =
@@ -253,11 +285,13 @@ export function useSnapPoints({
     closeDrawer,
     velocity,
     dismissible,
+    dismissThreshold,
   }: {
     draggedDistance: number;
     closeDrawer: () => void;
     velocity: number;
     dismissible: boolean;
+    dismissThreshold: 'half' | 'short';
   }) {
     if (fadeFromIndex === undefined) return;
 
@@ -275,6 +309,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.