@lodev09/react-native-true-sheet 4.0.0-beta.1 → 4.0.0-beta.11

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`, `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

@@ -1,14 +1,80 @@
-export { createTrueSheetNavigator } from './createTrueSheetNavigator';
-export { TrueSheetActions, type TrueSheetActionType } from './TrueSheetRouter';
+import {
+  createStandardNavigationFactories,
+  StackRouter,
+  type StandardNavigationTypeBagBase,
+} from '@react-navigation/native';
+
+import { createTrueSheetRouter } from './createTrueSheetRouter';
+import { trueSheetNavigator } from './navigator';
+import type {
+  StackRouterFactory,
+  TrueSheetActionHelpers,
+  TrueSheetNavigationOptions,
+  TrueSheetNavigationEventMap,
+  TrueSheetNavigationState,
+  TrueSheetNavigatorContentExtraProps,
+  TrueSheetRouterOptions,
+} from './types';
+
+export interface TrueSheetNavigationTypeBag extends StandardNavigationTypeBagBase {
+  State: TrueSheetNavigationState<this['ParamList']>;
+  ActionHelpers: TrueSheetActionHelpers<this['ParamList']>;
+  ScreenOptions: TrueSheetNavigationOptions;
+  EventMap: TrueSheetNavigationEventMap;
+  RouterOptions: TrueSheetRouterOptions;
+}
+
+const { createNavigator, createScreen } = createStandardNavigationFactories<
+  TrueSheetNavigationTypeBag,
+  {},
+  TrueSheetNavigatorContentExtraProps
+>(
+  trueSheetNavigator,
+  createTrueSheetRouter(StackRouter as StackRouterFactory),
+  ({ state, navigation }) => ({ routes: state.routes, dispatch: navigation.dispatch })
+);
+
+/**
+ * Creates a TrueSheet navigator.
+ *
+ * @example
+ * ```tsx
+ * const Sheet = createTrueSheetNavigator();
+ *
+ * function App() {
+ *   return (
+ *     <Sheet.Navigator>
+ *       <Sheet.Screen name="Home" component={HomeScreen} />
+ *       <Sheet.Screen
+ *         name="Details"
+ *         component={DetailsSheet}
+ *         options={{ detents: [0.5, 1] }}
+ *       />
+ *     </Sheet.Navigator>
+ *   );
+ * }
+ * ```
+ */
+export const createTrueSheetNavigator = createNavigator;
+
+/**
+ * Creates a screen configuration for the static API.
+ */
+export const createTrueSheetScreen = createScreen;
+
+export { TrueSheetActions, type TrueSheetActionType } from './actions';
+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/navigator.ts

@@ -0,0 +1,18 @@
+import { createStandardNavigator } from 'standard-navigation';
+
+import { TrueSheetNavigatorContent } from './TrueSheetNavigatorContent';
+import type {
+  TrueSheetNavigationOptions,
+  TrueSheetNavigatorContentExtraProps,
+  TrueSheetStandardEventMap,
+} from './types';
+
+/**
+ * Framework-agnostic TrueSheet navigator.
+ * Wired into React Navigation via `./index` and Expo Router via `./expo-router`.
+ */
+export const trueSheetNavigator = createStandardNavigator<
+  TrueSheetNavigationOptions,
+  TrueSheetStandardEventMap,
+  TrueSheetNavigatorContentExtraProps
+>(TrueSheetNavigatorContent);

package/src/navigation/screen/ReanimatedTrueSheetScreen.tsx

@@ -12,7 +12,7 @@ const AnimatedTrueSheet = Animated.createAnimatedComponent(TrueSheet);
 export const ReanimatedTrueSheetScreen = ({
   detentIndex,
   resizeKey,
-  navigation,
+  dispatch,
   emit,
   routeKey,
   closing,
@@ -29,7 +29,7 @@ export const ReanimatedTrueSheetScreen = ({
     detentIndex,
     resizeKey,
     closing,
-    navigation,
+    dispatch,
     routeKey,
     emit,
   });

package/src/navigation/screen/TrueSheetScreen.tsx

@@ -8,7 +8,7 @@ import { useSheetScreenState } from './useSheetScreenState';
 export const TrueSheetScreen = ({
   detentIndex,
   resizeKey,
-  navigation,
+  dispatch,
   emit,
   routeKey,
   closing,
@@ -25,7 +25,7 @@ export const TrueSheetScreen = ({
     detentIndex,
     resizeKey,
     closing,
-    navigation,
+    dispatch,
     routeKey,
     emit,
   });

package/src/navigation/screen/types.ts

@@ -1,18 +1,16 @@
-import type { ParamListBase } from '@react-navigation/core';
-
 import type { TrueSheetProps } from '../../TrueSheet.types';
 import type {
   PositionChangeHandler,
-  TrueSheetNavigationHelpers,
-  TrueSheetNavigationProp,
+  TrueSheetDispatch,
+  TrueSheetEmitFn,
   TrueSheetNavigationSheetProps,
 } from '../types';
 
 export interface TrueSheetScreenProps extends TrueSheetNavigationSheetProps {
   detentIndex: number;
   resizeKey?: number;
-  navigation: TrueSheetNavigationProp<ParamListBase>;
-  emit: TrueSheetNavigationHelpers['emit'];
+  dispatch: TrueSheetDispatch;
+  emit: TrueSheetEmitFn;
   routeKey: string;
   closing?: boolean;
   detents: TrueSheetProps['detents'];

package/src/navigation/screen/useSheetScreenState.ts

@@ -14,30 +14,24 @@ import type {
   PositionChangeEventPayload,
   WillBlurEvent,
   WillDismissEvent,
+  DismissAttemptEvent,
   WillFocusEvent,
   WillPresentEvent,
 } from '../../TrueSheet.types';
-import type {
-  TrueSheetNavigationEventMap,
-  TrueSheetNavigationHelpers,
-  TrueSheetNavigationProp,
-} from '../types';
-import { TrueSheetActions } from '../TrueSheetRouter';
-import type { ParamListBase } from '@react-navigation/core';
-
-type EmitFn = TrueSheetNavigationHelpers['emit'];
+import type { TrueSheetDispatch, TrueSheetEmitFn, TrueSheetNavigationEventMap } from '../types';
+import { TrueSheetActions } from '../actions';
 
 interface UseSheetScreenStateProps {
   detentIndex: number;
   resizeKey?: number;
   closing?: boolean;
-  navigation: TrueSheetNavigationProp<ParamListBase>;
+  dispatch: TrueSheetDispatch;
   routeKey: string;
-  emit: EmitFn;
+  emit: TrueSheetEmitFn;
 }
 
 export const useSheetScreenState = (props: UseSheetScreenStateProps) => {
-  const { detentIndex, resizeKey, closing, navigation, routeKey, emit } = props;
+  const { detentIndex, resizeKey, closing, dispatch, routeKey, emit } = props;
 
   const ref = useRef<TrueSheet>(null);
   const isDismissedRef = useRef(false);
@@ -68,7 +62,7 @@ export const useSheetScreenState = (props: UseSheetScreenStateProps) => {
         type,
         target: routeKey,
         data,
-      } as Parameters<EmitFn>[0]);
+      } as Parameters<TrueSheetEmitFn>[0]);
     },
     [emit, routeKey]
   );
@@ -76,8 +70,8 @@ export const useSheetScreenState = (props: UseSheetScreenStateProps) => {
   const onDidDismiss = useCallback(() => {
     emitEvent('sheetDidDismiss', undefined);
     isDismissedRef.current = true;
-    navigation.dispatch({ ...TrueSheetActions.remove(), source: routeKey });
-  }, [emitEvent, navigation, routeKey]);
+    dispatch({ ...TrueSheetActions.remove(), source: routeKey });
+  }, [emitEvent, dispatch, routeKey]);
 
   const eventHandlers = useMemo(
     () => ({
@@ -85,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,19 +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 {
-  DetentInfoEventPayload,
-  PositionChangeEventPayload,
-  TrueSheetProps,
-} from '../TrueSheet.types';
+  StackRouterOptions,
+} from './base-types';
 
 export type PositionChangeHandler = (payload: PositionChangeEventPayload) => void;
 
@@ -34,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.
    */
@@ -72,25 +81,98 @@ 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 TrueSheetActionHelpers<ParamList extends ParamListBase> =
-  StackActionHelpers<ParamList> & {
-    /**
-     * Resize the sheet to a specific detent index.
-     */
-    resize(index?: number): void;
+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.
+ */
+export type TrueSheetStandardEventMap = {
+  [K in keyof TrueSheetNavigationEventMap]: {
+    data: TrueSheetNavigationEventMap[K]['data'];
+    canPreventDefault: false;
   };
+};
+
+export type TrueSheetRoute = TrueSheetNavigationState<ParamListBase>['routes'][number];
+
+export type TrueSheetDispatch = (action: TrueSheetActionType) => void;
+
+export type TrueSheetEmitFn = NavigatorArgs<
+  TrueSheetNavigationOptions,
+  TrueSheetStandardEventMap
+>['emitter']['emit'];
+
+/**
+ * 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`)
+ * that the standard state strips out.
+ */
+export interface TrueSheetNavigatorContentExtraProps {
+  routes: TrueSheetRoute[];
+  dispatch: TrueSheetDispatch;
+}
+
+/**
+ * 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,
@@ -144,6 +226,7 @@ export type TrueSheetNavigationSheetProps = Pick<
   | 'footer'
   | 'footerStyle'
   | 'footerOptions'
+  | 'scrollableRef'
   | 'scrollableOptions'
   | 'insetAdjustment'
   | 'anchor'

package/src/navigation/useTrueSheetNavigation.ts

@@ -1,4 +1,4 @@
-import { useNavigation, type ParamListBase } from '@react-navigation/core';
+import { useNavigation, type ParamListBase } from '@react-navigation/native';
 
 import type { TrueSheetNavigationProp } from './types';
 

package/src/web/dom.ts

@@ -0,0 +1,9 @@
+/// <reference lib="dom" />
+import type { View } from 'react-native';
+
+/**
+ * Resolves a React Native web `View` ref value to its underlying DOM element —
+ * RN-web refs expose the host DOM node directly.
+ */
+export const getDOMElement = (view: View | null): HTMLElement | null =>
+  view instanceof HTMLElement ? view : null;

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

@@ -4,7 +4,12 @@ interface Style {
   [key: string]: string;
 }
 
-const cache = new WeakMap();
+// CSSStyleDeclaration has no string index signature, so dynamic camelCase
+// keys are assigned through this writable-record view. Values include
+// undefined: originals captured for unknown keys read back as undefined.
+type IndexableStyle = CSSStyleDeclaration & Record<string, string | undefined>;
+
+const cache = new WeakMap<HTMLElement, Record<string, string | undefined>>();
 
 export function isInView(el: HTMLElement): boolean {
   const rect = el.getBoundingClientRect();
@@ -26,7 +31,8 @@ export function set(
   ignoreCache = false
 ) {
   if (!el || !(el instanceof HTMLElement)) return;
-  let originalStyles: Style = {};
+  let originalStyles: Record<string, string | undefined> = {};
+  const style = el.style as IndexableStyle;
 
   Object.entries(styles).forEach(([key, value]: [string, string]) => {
     if (key.startsWith('--')) {
@@ -34,8 +40,8 @@ export function set(
       return;
     }
 
-    originalStyles[key] = (el.style as any)[key];
-    (el.style as any)[key] = value;
+    originalStyles[key] = style[key];
+    style[key] = value;
   });
 
   if (ignoreCache) return;
@@ -51,11 +57,12 @@ export function reset(el: Element | HTMLElement | null, prop?: string) {
     return;
   }
 
+  const style = el.style as IndexableStyle;
   if (prop) {
-    (el.style as any)[prop] = originalStyles[prop];
+    style[prop] = originalStyles[prop];
   } else {
     Object.entries(originalStyles).forEach(([key, value]) => {
-      (el.style as any)[key] = value;
+      style[key] = value;
     });
   }
 }