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

package/src/navigation/index.ts

@@ -4,16 +4,17 @@ import {
   type StandardNavigationTypeBagBase,
 } from '@react-navigation/native';
 
-import { createTrueSheetRouter, type StackRouterFactory } from './createTrueSheetRouter';
+import { createTrueSheetRouter } from './createTrueSheetRouter';
 import { trueSheetNavigator } from './navigator';
 import type {
+  StackRouterFactory,
   TrueSheetActionHelpers,
   TrueSheetNavigationOptions,
   TrueSheetNavigationEventMap,
   TrueSheetNavigationState,
   TrueSheetNavigatorContentExtraProps,
+  TrueSheetRouterOptions,
 } from './types';
-import type { TrueSheetRouterOptions } from './createTrueSheetRouter';
 
 export interface TrueSheetNavigationTypeBag extends StandardNavigationTypeBagBase {
   State: TrueSheetNavigationState<this['ParamList']>;
@@ -62,20 +63,18 @@ export const createTrueSheetNavigator = createNavigator;
 export const createTrueSheetScreen = createScreen;
 
 export { TrueSheetActions, type TrueSheetActionType } from './actions';
-export {
-  createTrueSheetRouter,
-  type StackRouterFactory,
-  type TrueSheetRouterOptions,
-} from './createTrueSheetRouter';
+export { createTrueSheetRouter } from './createTrueSheetRouter';
 export { useTrueSheetNavigation } from './useTrueSheetNavigation';
 
 export type { DetentInfoEventPayload, PositionChangeEventPayload } from '../TrueSheet.types';
 
 export type {
+  StackRouterFactory,
   TrueSheetNavigationEventMap,
   TrueSheetNavigationHelpers,
   TrueSheetNavigationOptions,
   TrueSheetNavigationProp,
   TrueSheetNavigationState,
+  TrueSheetRouterOptions,
   TrueSheetScreenProps,
 } from './types';

package/src/navigation/screen/useSheetScreenState.ts

@@ -14,6 +14,7 @@ import type {
   PositionChangeEventPayload,
   WillBlurEvent,
   WillDismissEvent,
+  DismissAttemptEvent,
   WillFocusEvent,
   WillPresentEvent,
 } from '../../TrueSheet.types';
@@ -78,6 +79,7 @@ export const useSheetScreenState = (props: UseSheetScreenStateProps) => {
       onDidPresent: (e: DidPresentEvent) => emitEvent('sheetDidPresent', e.nativeEvent),
       onWillDismiss: (_e: WillDismissEvent) => emitEvent('sheetWillDismiss', undefined),
       onDidDismiss,
+      onDismissAttempt: (_e: DismissAttemptEvent) => emitEvent('sheetDismissAttempt', undefined),
       onDetentChange: (e: DetentChangeEvent) => emitEvent('sheetDetentChange', e.nativeEvent),
       onDragBegin: (e: DragBeginEvent) => emitEvent('sheetDragBegin', e.nativeEvent),
       onDragChange: (e: DragChangeEvent) => emitEvent('sheetDragChange', e.nativeEvent),

package/src/navigation/types.ts

@@ -1,21 +1,24 @@
+import type { NavigatorArgs } from 'standard-navigation';
+
+import type {
+  DetentInfoEventPayload,
+  PositionChangeEventPayload,
+  TrueSheetProps,
+} from '../TrueSheet.types';
+import type { TrueSheetActionType } from './actions';
 import type {
   DefaultNavigatorOptions,
   Descriptor,
+  NavigationAction,
   NavigationHelpers,
   NavigationProp,
   NavigationState,
   ParamListBase,
   RouteProp,
+  Router,
   StackActionHelpers,
-} from '@react-navigation/core';
-import type { NavigatorArgs } from 'standard-navigation';
-
-import type {
-  DetentInfoEventPayload,
-  PositionChangeEventPayload,
-  TrueSheetProps,
-} from '../TrueSheet.types';
-import type { TrueSheetActionType } from './actions';
+  StackRouterOptions,
+} from './base-types';
 
 export type PositionChangeHandler = (payload: PositionChangeEventPayload) => void;
 
@@ -36,6 +39,10 @@ export type TrueSheetNavigationEventMap = {
    * Event fired when the sheet has been dismissed.
    */
   sheetDidDismiss: { data: undefined };
+  /**
+   * Event fired when the user tries to dismiss a non-dismissible sheet.
+   */
+  sheetDismissAttempt: { data: undefined };
   /**
    * Event fired when the sheet's detent changes.
    */
@@ -74,18 +81,54 @@ export type TrueSheetNavigationEventMap = {
   sheetDidBlur: { data: undefined };
 };
 
-export type TrueSheetNavigationState<ParamList extends ParamListBase> = Omit<
-  NavigationState<ParamList>,
+/**
+ * A navigation state tagged as `true-sheet`, with the sheet fields the router
+ * adds to each route.
+ * Generic over the base state so each entry point can bind its own
+ * `NavigationState` — see `./base-types`.
+ */
+export type TrueSheetStateOf<State extends { routes: readonly unknown[] }> = Omit<
+  State,
   'routes'
 > & {
   type: 'true-sheet';
-  routes: (NavigationState<ParamList>['routes'][number] & {
+  routes: (State['routes'][number] & {
     resizeIndex?: number;
     resizeKey?: number;
     closing?: boolean;
   })[];
 };
 
+export type TrueSheetNavigationState<ParamList extends ParamListBase> = TrueSheetStateOf<
+  NavigationState<ParamList>
+>;
+
+export type TrueSheetRouterState = TrueSheetNavigationState<ParamListBase>;
+
+export type TrueSheetRouterOptions = StackRouterOptions;
+
+export type TrueSheetRouter = Router<TrueSheetRouterState, TrueSheetActionType>;
+
+/**
+ * The wrapped router factory — also the shape `createTrueSheetRouter` accepts,
+ * pre-instantiated so either entry point's `StackRouterFactory` fits it.
+ */
+export type TrueSheetRouterFactory = (options: TrueSheetRouterOptions) => TrueSheetRouter;
+
+/**
+ * The base `StackRouter` factory to wrap, typed generically over the state and
+ * action types the wrapper threads through — `StackRouter` is structural and
+ * never touches the sheet-specific fields.
+ * Injected by each entry point so the shared router never imports
+ * `@react-navigation/*` at runtime (Expo Router apps don't install it).
+ */
+export type StackRouterFactory = <
+  State extends NavigationState<ParamListBase>,
+  Action extends NavigationAction,
+>(
+  options: TrueSheetRouterOptions
+) => Router<State, Action>;
+
 /**
  * `TrueSheetNavigationEventMap` in the `standard-navigation` event-map shape.
  */
@@ -116,13 +159,20 @@ export interface TrueSheetNavigatorContentExtraProps {
   dispatch: TrueSheetDispatch;
 }
 
-export type TrueSheetActionHelpers<ParamList extends ParamListBase> =
-  StackActionHelpers<ParamList> & {
-    /**
-     * Resize the sheet to a specific detent index.
-     */
-    resize(index?: number): void;
-  };
+/**
+ * Generic over the base helpers so each entry point can bind its own
+ * `StackActionHelpers` — see `./base-types`.
+ */
+export type TrueSheetActionHelpersOf<Helpers> = Helpers & {
+  /**
+   * Resize the sheet to a specific detent index.
+   */
+  resize(index?: number): void;
+};
+
+export type TrueSheetActionHelpers<ParamList extends ParamListBase> = TrueSheetActionHelpersOf<
+  StackActionHelpers<ParamList>
+>;
 
 export type TrueSheetNavigationProp<
   ParamList extends ParamListBase,
@@ -156,6 +206,9 @@ export type TrueSheetNavigationSheetProps = Pick<
   TrueSheetProps,
   | 'detents'
   | 'backgroundColor'
+  | 'detentBackgrounds'
+  | 'background'
+  | 'backgroundStyle'
   | 'cornerRadius'
   | 'dismissible'
   | 'draggable'
@@ -165,7 +218,6 @@ export type TrueSheetNavigationSheetProps = Pick<
   | 'dimmed'
   | 'dimmedDetentIndex'
   | 'backgroundBlur'
-  | 'blurOptions'
   | 'maxContentHeight'
   | 'maxContentWidth'
   | 'presentation'
@@ -176,10 +228,11 @@ export type TrueSheetNavigationSheetProps = Pick<
   | 'footer'
   | 'footerStyle'
   | 'footerOptions'
+  | 'scrollableRef'
   | 'scrollableOptions'
   | 'insetAdjustment'
-  | 'anchor'
-  | 'anchorOffset'
+  | 'placement'
+  | 'placementOffset'
   | 'elevation'
   | 'detached'
   | 'detachedOffset'

package/src/web/constants.ts

@@ -4,7 +4,7 @@ export const DEFAULT_FORM_SHEET_WIDTH = 580;
 export const DEFAULT_FORM_SHEET_HEIGHT_RATIO = 0.5;
 export const COLOR_SURFACE_CONTAINER_LOW_LIGHT = '#F7F2FA';
 export const COLOR_SURFACE_CONTAINER_LOW_DARK = '#1D1B20';
-export const DEFAULT_ANCHOR_OFFSET = 16;
+export const DEFAULT_PLACEMENT_OFFSET = 16;
 export const DEFAULT_DETACHED_OFFSET = 16;
 export const DEFAULT_GRABBER_COLOR_LIGHT = 'rgba(0, 0, 0, 0.3)';
 export const DEFAULT_GRABBER_COLOR_DARK = 'rgba(255, 255, 255, 0.3)';

package/src/web/layout.ts

@@ -0,0 +1,196 @@
+/// <reference lib="dom" />
+
+const FOOTER_INSET = '--truesheet-footer-inset';
+
+interface SheetLayoutOptions {
+  drawer: HTMLElement;
+  layout: HTMLElement;
+  getContent: () => HTMLElement | null;
+  getHeader: () => HTMLElement | null;
+  getFooter: () => HTMLElement | null;
+  getScrollable: () => HTMLElement | null;
+  absoluteHeader: boolean;
+  absoluteFooter: boolean;
+  footerInsetAdjustment: boolean;
+  measureContent: boolean;
+  onHeightChange: (height: number) => void;
+}
+
+export function observeSheetLayout({
+  drawer,
+  layout,
+  getContent,
+  getHeader,
+  getFooter,
+  getScrollable,
+  absoluteHeader,
+  absoluteFooter,
+  footerInsetAdjustment,
+  measureContent,
+  onHeightChange,
+}: SheetLayoutOptions) {
+  let frame = 0;
+  let disposed = false;
+  let width = -1;
+  let height = -1;
+  let scroller: HTMLElement | null = null;
+  let originalPadding = '';
+  let insetPadding = '';
+  let appliedInset = 0;
+  const observed = new Set<Element>();
+
+  // This tree has no viewport constraint or injected footer inset. Its resize
+  // observer catches intrinsic changes without observing the live flex layout.
+  const measurement = measureContent ? document.createElement('div') : null;
+  if (measurement) {
+    Object.assign(measurement.style, {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      display: 'flex',
+      flexDirection: 'column',
+      visibility: 'hidden',
+      pointerEvents: 'none',
+    });
+    measurement.style.setProperty(FOOTER_INSET, '0px');
+    measurement.inert = true;
+    measurement.setAttribute('aria-hidden', 'true');
+    measurement.setAttribute('data-truesheet-measure', '');
+    drawer.appendChild(measurement);
+  }
+
+  const measure = () => {
+    if (!measurement?.isConnected) return;
+    const headerHeight = absoluteHeader ? 0 : (getHeader()?.offsetHeight ?? 0);
+    const footerHeight =
+      !absoluteFooter || (footerInsetAdjustment && scroller) ? (getFooter()?.offsetHeight ?? 0) : 0;
+    const next = measurement.offsetHeight + headerHeight + footerHeight;
+    if (height === next) return;
+    height = next;
+    onHeightChange(next);
+  };
+
+  const updateInset = () => {
+    let inset = 0;
+    const footer = getFooter();
+    if (footerInsetAdjustment && scroller && footer) {
+      let bottom = scroller.offsetTop + scroller.offsetHeight;
+      let parent = scroller.offsetParent;
+      while (parent instanceof HTMLElement && parent !== layout) {
+        bottom += parent.offsetTop;
+        parent = parent.offsetParent;
+      }
+      if (parent === layout) {
+        inset = Math.min(
+          footer.offsetHeight,
+          Math.max(0, bottom - (layout.clientHeight - footer.offsetHeight))
+        );
+      }
+    }
+    if (inset === appliedInset) return;
+    appliedInset = inset;
+    layout.style.setProperty(FOOTER_INSET, `${inset}px`);
+  };
+
+  const resizeObserver = new ResizeObserver(() => {
+    if (measurement && width !== layout.clientWidth) {
+      width = layout.clientWidth;
+      measurement.style.width = `${width}px`;
+    }
+    updateInset();
+    measure();
+  });
+  const measurementObserver = new ResizeObserver(measure);
+  if (measurement) measurementObserver.observe(measurement);
+
+  const restorePadding = () => {
+    if (scroller && scroller.style.paddingBottom === insetPadding) {
+      scroller.style.paddingBottom = originalPadding;
+    }
+  };
+
+  const sync = () => {
+    if (disposed) return;
+    const content = getContent();
+    const nextScroller = getScrollable();
+    if (nextScroller !== scroller) {
+      restorePadding();
+      scroller = nextScroller;
+      insetPadding = '';
+    }
+    if (
+      footerInsetAdjustment &&
+      scroller &&
+      (!insetPadding || scroller.style.paddingBottom !== insetPadding)
+    ) {
+      originalPadding = scroller.style.paddingBottom;
+      const base = getComputedStyle(scroller).paddingBottom;
+      insetPadding = `calc(${base} + var(${FOOTER_INSET}, 0px))`;
+      scroller.style.paddingBottom = insetPadding;
+      insetPadding = scroller.style.paddingBottom;
+    }
+
+    const nodes = new Set<Element>([layout]);
+    for (const node of [getHeader(), getFooter(), scroller]) {
+      if (node) nodes.add(node);
+    }
+    for (const node of observed) {
+      if (!nodes.has(node)) {
+        resizeObserver.unobserve(node);
+        observed.delete(node);
+      }
+    }
+    for (const node of nodes) {
+      if (!observed.has(node)) {
+        resizeObserver.observe(node);
+        observed.add(node);
+      }
+    }
+
+    if (measurement && content) {
+      width = layout.clientWidth;
+      measurement.style.width = `${width}px`;
+      measurement.replaceChildren(content.cloneNode(true));
+    }
+    updateInset();
+    measure();
+  };
+
+  const mutationObserver = new MutationObserver((mutations) => {
+    const changed = mutations.some(
+      (mutation) => mutation.target !== layout || mutation.type === 'childList'
+    );
+    if (!changed || frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      sync();
+    });
+  });
+
+  sync();
+  mutationObserver.observe(layout, {
+    childList: true,
+    characterData: true,
+    attributes: true,
+    attributeFilter: ['style', 'class'],
+    subtree: true,
+  });
+  const footer = getFooter();
+  if (absoluteFooter && footer) {
+    mutationObserver.observe(footer, { childList: true, characterData: true, subtree: true });
+  }
+
+  return {
+    measure,
+    disconnect: () => {
+      disposed = true;
+      cancelAnimationFrame(frame);
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+      measurementObserver.disconnect();
+      restorePadding();
+      layout.style.removeProperty(FOOTER_INSET);
+      measurement?.remove();
+    },
+  };
+}

package/src/web/vaul/constants.ts

@@ -9,6 +9,10 @@ export const DEFAULT_PEEK_HEIGHT = 150;
 
 export const CLOSE_THRESHOLD = 0.25;
 
+// 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;
+
 export const SCROLL_LOCK_TIMEOUT = 100;
 
 export const BORDER_RADIUS = 8;

package/src/web/vaul/context.ts

@@ -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>;

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,7 +20,14 @@ import {
   VELOCITY_THRESHOLD,
   WINDOW_TOP_OFFSET,
 } from './constants';
-import { dampenValue, getTranslate, isVertical, reset, set } from './helpers';
+import {
+  dampenValue,
+  getSnapPointTransform,
+  getTranslate,
+  isVertical,
+  reset,
+  set,
+} from './helpers';
 import type { DrawerDirection } from './types';
 import { useComposedRefs } from './use-composed-refs';
 import { useControllableState } from './use-controllable-state';
@@ -93,6 +101,12 @@ export type DialogProps = {
    * @default true
    */
   dismissible?: boolean;
+  /**
+   * 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`.
@@ -218,6 +232,7 @@ export function Root({
   closeThreshold = CLOSE_THRESHOLD,
   scrollLockTimeout = SCROLL_LOCK_TIMEOUT,
   dismissible = true,
+  onDismissAttempt,
   draggable = true,
   handleOnly = false,
   fadeFromIndex = snapPoints && snapPoints.length - 1,
@@ -274,6 +289,7 @@ 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 previousDiffFromInitial = React.useRef(0);
@@ -517,7 +533,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 +804,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
@@ -966,6 +1007,7 @@ export function Root({
           onTouchDrag: (event, pointerEvent) => drag(event, pointerEvent),
           onTouchRelease: (event, pointerEvent) => release(event, pointerEvent),
           dismissible,
+          onDismissAttempt,
           shouldAnimate,
           handleOnly,
           isOpen,
@@ -1121,6 +1163,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       snapPoints,
       setActiveSnapPoint,
       dismissible,
+      onDismissAttempt,
       container,
       handleOnly,
       shouldAnimate,
@@ -1265,11 +1308,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) => {
@@ -1376,6 +1425,9 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       wasOpenRef.current = isOpen;
     }, [isOpen, detached, drawerRef]);
 
+    // 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 +1442,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 +1506,8 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
               activeSnapPointIndex > 0
             ) {
               setActiveSnapPoint(snapPoints![0]!);
+            } else {
+              onDismissAttempt?.();
             }
           }
         }}
@@ -1594,6 +1649,7 @@ export const Handle = React.forwardRef<HTMLDivElement, HandleProps>(
       activeSnapPoint,
       setActiveSnapPoint,
       dismissible,
+      onDismissAttempt,
       handleOnly,
       isOpen,
       onPress,
@@ -1637,6 +1693,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/use-snap-points.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck — vendored upstream, incompatible with noUncheckedIndexedAccess
 import React from 'react';
-import { set, isVertical } from './helpers';
+import { set, isVertical, getSnapPointTransform } from './helpers';
 import { DEFAULT_PEEK_HEIGHT, TRANSITIONS, VELOCITY_THRESHOLD } from './constants';
 import { useControllableState } from './use-controllable-state';
 import type { DrawerDirection } from './types';
@@ -198,16 +198,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`,
       });
 
@@ -364,9 +360,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 +372,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`,
     });
   }