@lodev09/react-native-true-sheet 4.0.0-beta.3 → 4.0.0-beta.30

package/src/web/vaul/context.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { DrawerDirection } from './types';
+import type { DrawerDirection, KeyboardViewport } from './types';
 
 export interface DragEvent {
   target: EventTarget;
@@ -23,6 +23,7 @@ interface DrawerContextValue {
   onNestedOpenChange: (o: boolean) => void;
   onNestedRelease: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
   dismissible: boolean;
+  onDismissAttempt?: () => void;
   isOpen: boolean;
   isDragging: boolean;
   keyboardIsOpen: React.MutableRefObject<boolean>;
@@ -45,12 +46,15 @@ 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;
   detachedOffset: number;
   detachedRadius: number;
   detachedWrapperStyle?: React.CSSProperties;
+  keyboardViewport?: KeyboardViewport;
 }
 
 export const DrawerContext = React.createContext<DrawerContextValue>({
@@ -80,6 +84,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/helpers.ts

@@ -80,6 +80,11 @@ export const isVertical = (direction: DrawerDirection) => {
   }
 };
 
+export const getSnapPointTransform = (direction: DrawerDirection) =>
+  isVertical(direction)
+    ? 'translate3d(0, var(--snap-point-height), 0)'
+    : 'translate3d(var(--snap-point-height), 0, 0)';
+
 export function getTranslate(element: HTMLElement, direction: DrawerDirection): number | null {
   if (!element) {
     return null;

package/src/web/vaul/index.tsx

@@ -12,6 +12,7 @@ import { isIOS, isMobileFirefox } from './browser';
 import {
   BORDER_RADIUS,
   CLOSE_THRESHOLD,
+  DISMISS_ATTEMPT_THRESHOLD,
   DRAG_CLASS,
   NESTED_DISPLACEMENT,
   SCROLL_LOCK_TIMEOUT,
@@ -19,8 +20,15 @@ import {
   VELOCITY_THRESHOLD,
   WINDOW_TOP_OFFSET,
 } from './constants';
-import { dampenValue, getTranslate, isVertical, reset, set } from './helpers';
-import type { DrawerDirection } from './types';
+import {
+  dampenValue,
+  getSnapPointTransform,
+  getTranslate,
+  isVertical,
+  reset,
+  set,
+} from './helpers';
+import type { DrawerDirection, KeyboardViewport } from './types';
 import { useComposedRefs } from './use-composed-refs';
 import { useControllableState } from './use-controllable-state';
 import { usePositionFixed } from './use-position-fixed';
@@ -93,6 +101,18 @@ 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
+   * single-snap-point drawer. Overlay clicks don't count, mirroring iOS.
+   */
+  onDismissAttempt?: () => void;
   /**
    * When `false` the drawer can't be dragged by the user. Programmatic snap-point
    * changes still animate. Defaults to `true`.
@@ -204,6 +224,12 @@ export type DialogProps = {
    * from natural flow.
    */
   contentHeight?: number;
+  /**
+   * Lays the drawer out in the visual viewport above a soft keyboard. The
+   * wrapper and snap offsets fit the visible area, while fractional snap
+   * points keep scaling against the full layout height.
+   */
+  keyboardViewport?: KeyboardViewport;
 } & (WithFadeFromProps | WithoutFadeFromProps);
 
 export function Root({
@@ -218,6 +244,8 @@ export function Root({
   closeThreshold = CLOSE_THRESHOLD,
   scrollLockTimeout = SCROLL_LOCK_TIMEOUT,
   dismissible = true,
+  dismissThreshold = 'half',
+  onDismissAttempt,
   draggable = true,
   handleOnly = false,
   fadeFromIndex = snapPoints && snapPoints.length - 1,
@@ -247,6 +275,7 @@ export function Root({
   initialAnimated = true,
   onContentHeightChange,
   contentHeight: contentHeightProp,
+  keyboardViewport,
 }: DialogProps) {
   const [isOpen = false, setIsOpen] = useControllableState({
     defaultProp: defaultOpen,
@@ -274,8 +303,10 @@ export function Root({
   const isAllowedToDrag = React.useRef<boolean>(false);
   const nestedOpenChangeTimer = React.useRef<NodeJS.Timeout | null>(null);
   const pointerStart = React.useRef(0);
+  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);
@@ -292,10 +323,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 {
@@ -324,6 +359,7 @@ export function Root({
     maxContentHeight,
     peekHeight,
     initialAnimated,
+    keyboardViewport,
   });
 
   usePreventScroll({
@@ -517,7 +553,17 @@ export function Root({
       const noCloseSnapPointsPreCondition = snapPoints && !dismissible && !isDraggingInDirection;
 
       // Disallow dragging down to close when first snap point is the active one and dismissible prop is set to false.
-      if (noCloseSnapPointsPreCondition && activeSnapPointIndex === 0) return;
+      if (noCloseSnapPointsPreCondition && activeSnapPointIndex === 0) {
+        // The drawer stays put. Remember a deliberate pull that would otherwise
+        // have dragged it (content at its top) so release() can report it.
+        if (
+          -draggedDistance > DISMISS_ATTEMPT_THRESHOLD &&
+          (isAllowedToDrag.current || shouldDrag(event.target, isDraggingInDirection))
+        ) {
+          dismissAttempted.current = true;
+        }
+        return;
+      }
 
       // We need to capture last time when drag with scroll was triggered and have a timeout between
       const absDraggedDistance = Math.abs(draggedDistance);
@@ -778,6 +824,21 @@ export function Root({
     unfreezeScrollables();
     setIsDragging(false);
     dragEndTime.current = new Date();
+
+    if (dismissAttempted.current) {
+      dismissAttempted.current = false;
+      if (isOpen) onDismissAttempt?.();
+    }
+
+    // The press that started this "drag" may have dismissed the drawer (e.g. a
+    // back button acting on pointerdown). Snapping now would overwrite the
+    // dismiss transform that closeDrawer just wrote and freeze the sheet in
+    // place until it unmounts.
+    if (!isOpen) {
+      if (pointerEvent) onReleaseProp?.(pointerEvent, false);
+      return;
+    }
+
     const swipeAmount = getTranslate(drawerRef.current, direction);
 
     // Drag overshoot below the lowest snap point translates the detached
@@ -814,6 +875,7 @@ export function Root({
         closeDrawer,
         velocity,
         dismissible,
+        dismissThreshold,
       });
       if (pointerEvent) onReleaseProp?.(pointerEvent, true);
       return;
@@ -966,7 +1028,10 @@ export function Root({
           onTouchDrag: (event, pointerEvent) => drag(event, pointerEvent),
           onTouchRelease: (event, pointerEvent) => release(event, pointerEvent),
           dismissible,
+          onDismissAttempt,
           shouldAnimate,
+          initialAnimated,
+          hasPresented,
           handleOnly,
           isOpen,
           isDragging,
@@ -992,6 +1057,7 @@ export function Root({
           detachedOffset: detached ? detachedOffset : 0,
           detachedRadius: detached ? detachedRadius : 0,
           detachedWrapperStyle,
+          keyboardViewport,
         }}
       >
         {children}
@@ -1121,9 +1187,12 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       snapPoints,
       setActiveSnapPoint,
       dismissible,
+      onDismissAttempt,
       container,
       handleOnly,
       shouldAnimate,
+      initialAnimated,
+      hasPresented,
       autoFocus,
       onPositionChangeRef,
       setContentHeight,
@@ -1131,6 +1200,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       detachedOffset,
       detachedRadius,
       detachedWrapperStyle: detachedWrapperStyleProp,
+      keyboardViewport,
     } = useDrawerContext();
     // Always measure the inner wrapper's natural height. The drawer itself may
     // be styled to a fixed viewport height, so we measure an inner wrapper
@@ -1265,11 +1335,17 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       // same detent). Without this, position goes stale mid-animation because
       // the drawer's `transitionrun` never fires.
       const onTransitionRun = (e: TransitionEvent) => {
-        if ((e.target === drawer || e.target === wrapper) && e.propertyName === 'transform')
+        if (
+          (e.target === drawer || e.target === wrapper) &&
+          (e.propertyName === 'transform' || e.propertyName === '--snap-point-height')
+        )
           state.start();
       };
       const onTransitionDone = (e: TransitionEvent) => {
-        if ((e.target === drawer || e.target === wrapper) && e.propertyName === 'transform')
+        if (
+          (e.target === drawer || e.target === wrapper) &&
+          (e.propertyName === 'transform' || e.propertyName === '--snap-point-height')
+        )
           state.stop();
       };
       const onAnimationStart = (e: AnimationEvent) => {
@@ -1327,14 +1403,19 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
     // with a bottom gap and rounded bottom corners; otherwise it sits flush.
     // Transform/transition are managed imperatively (via drag overshoot and the
     // dismiss effect) so React doesn't skip DOM writes for values it thinks it
-    // already owns.
+    // already owns. Above a soft keyboard the wrapper fits the visual viewport,
+    // which the full-height layout viewport extends behind.
     const wrapperStyle = React.useMemo<React.CSSProperties>(
       () => ({
         position: 'fixed',
-        top: 0,
         left: 0,
         right: 0,
-        bottom: detached ? detachedOffset : 0,
+        ...(keyboardViewport
+          ? {
+              top: keyboardViewport.top,
+              height: Math.max(0, keyboardViewport.height - (detached ? detachedOffset : 0)),
+            }
+          : { top: 0, bottom: detached ? detachedOffset : 0 }),
         overflow: 'hidden',
         contain: 'paint',
         pointerEvents: 'none',
@@ -1342,7 +1423,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
         borderBottomRightRadius: detached ? detachedRadius : 0,
         ...detachedWrapperStyleProp,
       }),
-      [detached, detachedOffset, detachedRadius, detachedWrapperStyleProp]
+      [detached, detachedOffset, detachedRadius, detachedWrapperStyleProp, keyboardViewport]
     );
 
     // Translate the wrapper off-screen on dismiss so the whole card slides out
@@ -1366,16 +1447,22 @@ 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.
+    const initialSnapPointOffset = React.useRef(snapPointsOffset?.[activeSnapPointIndex ?? 0] ?? 0);
     const contentNode = (
       <DialogPrimitive.Content
         data-vaul-drawer-direction={direction}
@@ -1390,7 +1477,8 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
         style={
           snapPointsOffset && snapPointsOffset.length > 0
             ? ({
-                '--snap-point-height': `${snapPointsOffset[activeSnapPointIndex ?? 0]!}px`,
+                '--snap-point-height': `${initialSnapPointOffset.current}px`,
+                'transform': getSnapPointTransform(direction),
                 ...style,
                 'pointerEvents': 'auto',
               } as React.CSSProperties)
@@ -1453,6 +1541,8 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
               activeSnapPointIndex > 0
             ) {
               setActiveSnapPoint(snapPoints![0]!);
+            } else {
+              onDismissAttempt?.();
             }
           }
         }}
@@ -1594,6 +1684,7 @@ export const Handle = React.forwardRef<HTMLDivElement, HandleProps>(
       activeSnapPoint,
       setActiveSnapPoint,
       dismissible,
+      onDismissAttempt,
       handleOnly,
       isOpen,
       onPress,
@@ -1637,6 +1728,12 @@ export const Handle = React.forwardRef<HTMLDivElement, HandleProps>(
         return;
       }
 
+      // Mirrors native: a single-detent sheet's handle tap is a dismiss.
+      if (isLastSnapPoint && snapPoints.length === 1) {
+        onDismissAttempt?.();
+        return;
+      }
+
       const currentSnapIndex = snapPoints.findIndex((point) => point === activeSnapPoint);
       if (currentSnapIndex === -1) return; // activeSnapPoint not found in snapPoints
       const nextSnapPoint = snapPoints[currentSnapIndex + 1];

package/src/web/vaul/types.ts

@@ -5,3 +5,13 @@ export interface SnapPoint {
 }
 
 export type AnyFunction = (...args: any) => any;
+
+/**
+ * The visual viewport while a soft keyboard shrinks it, in layout-viewport px.
+ * `layoutHeight` is the full (keyboard-free) height.
+ */
+export interface KeyboardViewport {
+  top: number;
+  height: number;
+  layoutHeight: number;
+}

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

@@ -1,9 +1,15 @@
 // @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';
+import type { DrawerDirection, KeyboardViewport } from './types';
 
 export function useSnapPoints({
   activeSnapPointProp,
@@ -22,6 +28,7 @@ export function useSnapPoints({
   maxContentHeight,
   peekHeight,
   initialAnimated = true,
+  keyboardViewport,
 }: {
   activeSnapPointProp?: number | string | null;
   setActiveSnapPointProp?(snapPoint: number | null | string): void;
@@ -29,7 +36,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;
@@ -39,6 +46,7 @@ export function useSnapPoints({
   maxContentHeight?: number;
   peekHeight?: number;
   initialAnimated?: boolean;
+  keyboardViewport?: KeyboardViewport;
 }) {
   const [activeSnapPoint, setActiveSnapPoint] = useControllableState<string | number | null>({
     prop: activeSnapPointProp,
@@ -92,13 +100,18 @@ export function useSnapPoints({
           height: container.getBoundingClientRect().height,
         }
       : typeof window !== 'undefined'
-        ? { width: window.innerWidth, height: window.innerHeight }
+        ? { width: window.innerWidth, height: keyboardViewport?.height ?? window.innerHeight }
         : { width: 0, height: 0 };
 
     // Shrink the effective vertical area by detachedOffset so snap math
     // reserves a fixed gap at the bottom — the floating card stays offset
     // from the viewport edge through drag, snap and resize.
     const effectiveHeight = Math.max(0, containerSize.height - (detachedOffset || 0));
+    // Above a keyboard, fractional snap points keep their full-height size and
+    // only cap at the visible area — mirrors native, where the sheet rises.
+    const fractionHeight = keyboardViewport
+      ? Math.max(0, keyboardViewport.layoutHeight - (detachedOffset || 0))
+      : effectiveHeight;
 
     return (
       snapPoints?.map((snapPoint) => {
@@ -123,11 +136,11 @@ export function useSnapPoints({
           const rawHeight = isPx
             ? snapPointAsNumber
             : windowDimensions
-              ? resolved * effectiveHeight
+              ? resolved * fractionHeight
               : 0;
-          // Cap px/'auto' snap points so a content taller than the viewport
-          // doesn't push the drawer past the top edge (offset would go
-          // negative). Fractional detents are already ≤ effectiveHeight.
+          // Cap snap points so content taller than the viewport (or a
+          // fraction above a keyboard) doesn't push the drawer past the top
+          // edge (offset would go negative).
           // `maxContentHeight`, when set, caps the visible sheet further so
           // full/'auto' detents respect the user's ceiling.
           const ceiling =
@@ -164,8 +177,11 @@ export function useSnapPoints({
     detachedOffset,
     maxContentHeight,
     peekHeight,
+    keyboardViewport,
   ]);
 
+  const getViewportHeight = () => keyboardViewport?.height ?? window.innerHeight;
+
   const activeSnapPointOffset = React.useMemo(
     () => (activeSnapPointIndex !== null ? snapPointsOffset?.[activeSnapPointIndex] : null),
     [snapPointsOffset, activeSnapPointIndex]
@@ -187,33 +203,46 @@ 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;
-      // `--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.
+      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
-          ? `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`,
       });
 
       // 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 &&
@@ -222,24 +251,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 =
@@ -257,11 +295,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 +319,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.
@@ -287,7 +344,7 @@ export function useSnapPoints({
       (direction === 'bottom' || direction === 'right') &&
       currentPosition > snapPointsOffset[0]
     ) {
-      const viewportDim = isVertical(direction) ? window.innerHeight : window.innerWidth;
+      const viewportDim = isVertical(direction) ? getViewportHeight() : window.innerWidth;
       const effectiveDim = Math.max(0, viewportDim - (detachedOffset || 0));
       const visibleAtLowest = Math.max(0, effectiveDim - snapPointsOffset[0]);
       const overshoot = currentPosition - snapPointsOffset[0];
@@ -315,7 +372,7 @@ export function useSnapPoints({
       return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
     });
 
-    const dim = isVertical(direction) ? window.innerHeight : window.innerWidth;
+    const dim = isVertical(direction) ? getViewportHeight() : window.innerWidth;
     if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < dim * 0.4) {
       const dragDirection = hasDraggedUp ? 1 : -1; // 1 = up, -1 = down
 
@@ -364,9 +421,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 +433,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`,
     });
   }
@@ -401,7 +454,7 @@ export function useSnapPoints({
       if (activeSnapPointIndex === 0 && !isDraggingDown) {
         const activeOffset = snapPointsOffset[activeSnapPointIndex];
         if (activeOffset === undefined) return 0;
-        const windowDim = isVertical(direction) ? window.innerHeight : window.innerWidth;
+        const windowDim = isVertical(direction) ? getViewportHeight() : window.innerWidth;
         const dismissOffset =
           direction === 'bottom' || direction === 'right' ? windowDim : -windowDim;
         const dismissRange = Math.abs(dismissOffset - activeOffset);