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

package/src/navigation/expo-router/types.ts

@@ -0,0 +1,116 @@
+/**
+ * Expo Router flavour of `../types`: same shapes, but bound to Expo Router's
+ * vendored React Navigation types so apps that only install `expo-router` still
+ * get real types instead of `any` — see `./base-types`.
+ */
+import type { TrueSheetActionType } from '../actions';
+import type {
+  TrueSheetActionHelpersOf,
+  TrueSheetDispatch,
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationOptions,
+  TrueSheetStateOf,
+} from '../types';
+import type {
+  DefaultNavigatorOptions,
+  NavigationAction,
+  NavigationHelpers,
+  NavigationProp,
+  NavigationState,
+  ParamListBase,
+  RouteProp,
+  Router,
+  StackActionHelpers,
+  StackRouterOptions,
+} from './base-types';
+
+export type TrueSheetRouterOptions = StackRouterOptions;
+
+export type TrueSheetNavigationState<ParamList extends ParamListBase> = TrueSheetStateOf<
+  NavigationState<ParamList>
+>;
+
+export type TrueSheetRouterState = TrueSheetNavigationState<ParamListBase>;
+
+export type TrueSheetRouter = Router<TrueSheetRouterState, TrueSheetActionType>;
+
+export type TrueSheetRouterFactory = (options: TrueSheetRouterOptions) => TrueSheetRouter;
+
+/**
+ * The base `StackRouter` factory to wrap — see `../types` for the shared contract.
+ */
+export type StackRouterFactory = <
+  State extends NavigationState<ParamListBase>,
+  Action extends NavigationAction,
+>(
+  options: TrueSheetRouterOptions
+) => Router<State, Action>;
+
+export type TrueSheetRoute = TrueSheetNavigationState<ParamListBase>['routes'][number];
+
+/**
+ * Props injected into the navigator content by Expo Router's `createProps`.
+ * Raw routes carry the custom fields (`closing`, `dismissing`, `resizeIndex`, `resizeKey`)
+ * that the standard state strips out.
+ */
+export interface TrueSheetNavigatorContentExtraProps {
+  routes: TrueSheetRoute[];
+  dispatch: TrueSheetDispatch;
+}
+
+export type TrueSheetActionHelpers<ParamList extends ParamListBase> = TrueSheetActionHelpersOf<
+  StackActionHelpers<ParamList>
+>;
+
+export type TrueSheetNavigationProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string,
+  NavigatorID extends string | undefined = undefined,
+> = NavigationProp<
+  ParamList,
+  RouteName,
+  NavigatorID,
+  TrueSheetNavigationState<ParamList>,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationEventMap
+> &
+  TrueSheetActionHelpers<ParamList>;
+
+export type TrueSheetScreenProps<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string,
+  NavigatorID extends string | undefined = undefined,
+> = {
+  navigation: TrueSheetNavigationProp<ParamList, RouteName, NavigatorID>;
+  route: RouteProp<ParamList, RouteName>;
+};
+
+export type TrueSheetNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  TrueSheetNavigationEventMap
+>;
+
+export type TrueSheetNavigatorProps = DefaultNavigatorOptions<
+  ParamListBase,
+  string | undefined,
+  TrueSheetNavigationState<ParamListBase>,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationEventMap,
+  unknown
+> & {
+  /**
+   * The name of the route to use as the base screen.
+   * This screen will be rendered as a regular screen, while other screens are presented as sheets.
+   * Defaults to the first screen defined in the navigator.
+   */
+  initialRouteName?: string;
+};
+
+export type {
+  PositionChangeHandler,
+  TrueSheetDispatch,
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationSheetProps,
+  TrueSheetStandardEventMap,
+} from '../types';

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,56 @@ 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;
+    // Stacked above a `closing` route and dismissed natively with it
+    dismissing?: 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.
  */
@@ -108,7 +153,7 @@ export type TrueSheetEmitFn = NavigatorArgs<
 /**
  * Props injected into the navigator content by each adapter
  * (React Navigation's `mapper` / Expo Router's `createProps`).
- * Raw routes carry the custom fields (`closing`, `resizeIndex`, `resizeKey`)
+ * Raw routes carry the custom fields (`closing`, `dismissing`, `resizeIndex`, `resizeKey`)
  * that the standard state strips out.
  */
 export interface TrueSheetNavigatorContentExtraProps {
@@ -116,13 +161,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 +208,9 @@ export type TrueSheetNavigationSheetProps = Pick<
   TrueSheetProps,
   | 'detents'
   | 'backgroundColor'
+  | 'detentBackgrounds'
+  | 'background'
+  | 'backgroundStyle'
   | 'cornerRadius'
   | 'dismissible'
   | 'draggable'
@@ -163,9 +218,10 @@ export type TrueSheetNavigationSheetProps = Pick<
   | 'grabberOptions'
   | 'accessibilityOptions'
   | 'dimmed'
+  | 'dimColor'
+  | 'dimOpacity'
   | 'dimmedDetentIndex'
   | 'backgroundBlur'
-  | 'blurOptions'
   | 'maxContentHeight'
   | 'maxContentWidth'
   | 'presentation'
@@ -176,10 +232,12 @@ export type TrueSheetNavigationSheetProps = Pick<
   | 'footer'
   | 'footerStyle'
   | 'footerOptions'
+  | 'scrollableRef'
   | 'scrollableOptions'
   | 'insetAdjustment'
-  | 'anchor'
-  | 'anchorOffset'
+  | 'placement'
+  | 'placementOffset'
+  | 'foldOptions'
   | 'elevation'
   | 'detached'
   | 'detachedOffset'

package/src/scrollable.ts

@@ -0,0 +1,25 @@
+const ACCESSORS = ['getScrollableNode', 'getNativeScrollRef'] as const;
+
+// Resolves a `scrollableRef` value to its scroll node: a native tag on native,
+// a DOM node on web. Imperative-handle lists (e.g. LegendList, FlashList) are
+// not host components, so they go through the accessors ScrollView/FlatList
+// also expose. A composite result is resolved again until it yields a tag or
+// host node. `getScrollResponder` is skipped: it returns the ScrollView class
+// instance, which findNodeHandle resolves to its first host child (the
+// SwipeRefreshLayout on Android when a refreshControl is set).
+export function resolveScrollable(scrollable: unknown): unknown {
+  if (!scrollable || typeof scrollable !== 'object') return scrollable;
+  for (const name of ACCESSORS) {
+    const accessor = (scrollable as Record<string, unknown>)[name];
+    if (typeof accessor !== 'function') continue;
+    let node: unknown;
+    try {
+      node = accessor.call(scrollable);
+    } catch {
+      // e.g. LegendList forwarding to a custom scroll component that lacks it
+      continue;
+    }
+    if (node != null && node !== scrollable) return resolveScrollable(node);
+  }
+  return scrollable;
+}

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/keyboard.ts

@@ -0,0 +1,79 @@
+/// <reference lib="dom" />
+import { useEffect, useState } from 'react';
+
+import { FOOTER_INSET } from './layout';
+import { getScrollParent } from './vaul/use-prevent-scroll';
+import type { KeyboardViewport } from './vaul/types';
+
+// Subpixel tolerance between the visual and layout viewport heights
+const VIEWPORT_EPSILON = 1;
+
+const readKeyboardViewport = (): KeyboardViewport | undefined => {
+  const vv = window.visualViewport;
+  if (!vv) return undefined;
+  const layoutHeight = document.documentElement.clientHeight;
+  // Pinch-zoom shrinks the visual viewport too — scaling it back out leaves
+  // only what the keyboard covers.
+  if (vv.height * vv.scale >= layoutHeight - VIEWPORT_EPSILON) return undefined;
+  return { top: vv.offsetTop, height: vv.height, layoutHeight };
+};
+
+const isSameViewport = (a: KeyboardViewport | undefined, b: KeyboardViewport | undefined) =>
+  a === b ||
+  (a !== undefined &&
+    b !== undefined &&
+    a.top === b.top &&
+    a.height === b.height &&
+    a.layoutHeight === b.layoutHeight);
+
+/**
+ * Tracks the visual viewport while a soft keyboard shrinks it. iOS Safari and
+ * Chrome (default `interactive-widget`) keep the layout viewport — and every
+ * fixed element — full height under the keyboard, so the sheet has to be laid
+ * out against the visual viewport instead.
+ */
+export function useKeyboardViewport(enabled: boolean): KeyboardViewport | undefined {
+  const [viewport, setViewport] = useState<KeyboardViewport | undefined>();
+
+  useEffect(() => {
+    const vv = window.visualViewport;
+    if (!enabled || !vv) {
+      setViewport(undefined);
+      return undefined;
+    }
+
+    const update = () => {
+      const next = readKeyboardViewport();
+      setViewport((current) => (isSameViewport(current, next) ? current : next));
+    };
+
+    update();
+    vv.addEventListener('resize', update);
+    vv.addEventListener('scroll', update);
+    window.addEventListener('resize', update);
+    return () => {
+      vv.removeEventListener('resize', update);
+      vv.removeEventListener('scroll', update);
+      window.removeEventListener('resize', update);
+    };
+  }, [enabled]);
+
+  return viewport;
+}
+
+/**
+ * Scrolls the focused field in `container` back above its scroll parent's
+ * bottom edge, clearing a floating footer. The browser only reveals it on
+ * focus — before the sheet fits above the keyboard.
+ */
+export function revealFocusedElement(container: HTMLElement) {
+  const focused = document.activeElement;
+  if (!(focused instanceof HTMLElement) || !container.contains(focused)) return;
+  const scroller = getScrollParent(focused);
+  if (!container.contains(scroller)) return;
+  const footerInset = parseFloat(getComputedStyle(scroller).getPropertyValue(FOOTER_INSET)) || 0;
+  const overflow =
+    focused.getBoundingClientRect().bottom -
+    (scroller.getBoundingClientRect().bottom - footerInset);
+  if (overflow > 0) scroller.scrollTop += overflow;
+}

package/src/web/layout.ts

@@ -0,0 +1,196 @@
+/// <reference lib="dom" />
+
+export 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,15 @@ 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;
+
 export const SCROLL_LOCK_TIMEOUT = 100;
 
 export const BORDER_RADIUS = 8;