@lodev09/react-native-true-sheet 3.10.0 → 3.11.0-beta.0

package/src/TrueSheetProvider.tsx

@@ -1,11 +1,9 @@
 import type { ReactNode } from 'react';
 
 import { TrueSheet } from './TrueSheet';
+import type { TrueSheetStaticMethods } from './TrueSheet.types';
 
-export type TrueSheetStaticMethods = Pick<
-  typeof TrueSheet,
-  'present' | 'dismiss' | 'dismissStack' | 'resize' | 'dismissAll'
->;
+export type { TrueSheetStaticMethods };
 
 export interface TrueSheetProviderProps {
   children: ReactNode;

package/src/TrueSheetProvider.web.tsx

@@ -1,143 +1,211 @@
-import { createContext, useContext, useRef, type ReactNode, type RefObject } from 'react';
-import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-
-import type { TrueSheetStaticMethods } from './TrueSheetProvider';
-import type { TrueSheet } from './TrueSheet';
-
-export type TrueSheetRefMethods = Pick<
-  TrueSheet,
-  'present' | 'dismiss' | 'resize' | 'dismissStack'
->;
-
-interface BottomSheetContextValue extends TrueSheetStaticMethods {
-  register: (name: string, methods: RefObject<TrueSheetRefMethods>) => void;
-  unregister: (name: string) => void;
-  pushToStack: (name: string) => void;
-  removeFromStack: (name: string) => void;
-  getSheetsAbove: (name: string) => string[];
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+
+import type { TrueSheetMethods, TrueSheetStaticMethods } from './TrueSheet.types';
+
+type SheetRef = RefObject<TrueSheetMethods | null>;
+type NodeRef = RefObject<HTMLDivElement | null>;
+
+interface StackEntry {
+  ref: SheetRef;
+  nodeRef: NodeRef;
 }
 
-export const BottomSheetContext = createContext<BottomSheetContextValue | null>(null);
+interface SheetContextValue {
+  registerByName: (name: string, ref: SheetRef) => () => void;
+  resolveByName: (name: string) => TrueSheetMethods;
+  pushOpen: (entry: StackEntry) => void;
+  popOpen: (entry: StackEntry) => void;
+  subscribeStack: (listener: () => void) => () => void;
+  getStackSnapshot: () => readonly StackEntry[];
+  portalContainer: HTMLElement | null;
+}
+
+const SheetContext = createContext<SheetContextValue | null>(null);
+
+const NO_PROVIDER_ERROR =
+  'TrueSheet: useTrueSheet() requires a <TrueSheetProvider> ancestor on web.';
+
+const EMPTY_STACK: readonly StackEntry[] = Object.freeze([]);
 
 export interface TrueSheetProviderProps {
   children: ReactNode;
 }
 
-/**
- * Provider for TrueSheet on web.
- * Required to wrap your app for sheet management via useTrueSheet hook.
- */
 export function TrueSheetProvider({ children }: TrueSheetProviderProps) {
-  const sheetsRef = useRef<Map<string, RefObject<TrueSheetRefMethods>>>(new Map());
-  const presentedStackRef = useRef<string[]>([]);
+  const namedSheetsRef = useRef<Map<string, SheetRef>>(new Map());
+  const stackRef = useRef<readonly StackEntry[]>(EMPTY_STACK);
+  const listenersRef = useRef<Set<() => void>>(new Set());
+
+  // Stable portal container created once. Attached to an anchor div rendered
+  // in this provider's tree so the sheets unmount cleanly with the provider
+  // (e.g., when a screen-scoped provider unmounts on navigation).
+  const portalContainer = useMemo<HTMLDivElement | null>(
+    () => (typeof document !== 'undefined' ? document.createElement('div') : null),
+    []
+  );
+  const anchorRef = useRef<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    const anchor = anchorRef.current;
+    if (!anchor || !portalContainer) return;
+    anchor.appendChild(portalContainer);
+    return () => {
+      if (portalContainer.parentNode) {
+        portalContainer.parentNode.removeChild(portalContainer);
+      }
+    };
+  }, [portalContainer]);
+
+  const value = useMemo<SheetContextValue>(() => {
+    const notify = () => listenersRef.current.forEach((listener) => listener());
+
+    return {
+      registerByName: (name, ref) => {
+        namedSheetsRef.current.set(name, ref);
+        return () => {
+          if (namedSheetsRef.current.get(name) === ref) {
+            namedSheetsRef.current.delete(name);
+          }
+        };
+      },
+      resolveByName: (name) => {
+        const ref = namedSheetsRef.current.get(name);
+        const methods = ref?.current;
+        if (!methods) {
+          throw new Error(`TrueSheet: no sheet registered with name "${name}"`);
+        }
+        return methods;
+      },
+      pushOpen: (entry) => {
+        if (stackRef.current.some((e) => e.ref === entry.ref)) return;
+        stackRef.current = [...stackRef.current, entry];
+        notify();
+      },
+      popOpen: (entry) => {
+        const idx = stackRef.current.findIndex((e) => e.ref === entry.ref);
+        if (idx < 0) return;
+        stackRef.current = [...stackRef.current.slice(0, idx), ...stackRef.current.slice(idx + 1)];
+        notify();
+      },
+      subscribeStack: (listener) => {
+        listenersRef.current.add(listener);
+        return () => {
+          listenersRef.current.delete(listener);
+        };
+      },
+      getStackSnapshot: () => stackRef.current,
+      portalContainer,
+    };
+  }, [portalContainer]);
 
-  const register = (name: string, methods: RefObject<TrueSheetRefMethods>) => {
-    sheetsRef.current.set(name, methods);
-  };
+  return (
+    <SheetContext.Provider value={value}>
+      {children}
+      <div ref={anchorRef} />
+    </SheetContext.Provider>
+  );
+}
 
-  const unregister = (name: string) => {
-    sheetsRef.current.delete(name);
-  };
+export function usePortalContainer(): HTMLElement | null {
+  const ctx = useContext(SheetContext);
+  return ctx?.portalContainer ?? null;
+}
 
-  const pushToStack = (name: string) => {
-    const index = presentedStackRef.current.indexOf(name);
-    if (index >= 0) {
-      presentedStackRef.current.splice(index, 1);
+export function useTrueSheet(): TrueSheetStaticMethods {
+  const ctx = useContext(SheetContext);
+
+  return useMemo<TrueSheetStaticMethods>(() => {
+    if (!ctx) {
+      const reject = async (): Promise<never> => {
+        throw new Error(NO_PROVIDER_ERROR);
+      };
+      return {
+        present: reject,
+        resize: reject,
+        dismiss: reject,
+        dismissStack: reject,
+        dismissAll: reject,
+      };
     }
-    presentedStackRef.current.push(name);
-  };
 
-  const removeFromStack = (name: string) => {
-    const index = presentedStackRef.current.indexOf(name);
-    if (index >= 0) {
-      presentedStackRef.current.splice(index, 1);
-    }
-  };
-
-  /**
-   * Returns all sheets presented on top of the given sheet.
-   * Returns them in reverse order (top-most first) for proper dismissal.
-   */
-  const getSheetsAbove = (name: string): string[] => {
-    const index = presentedStackRef.current.indexOf(name);
-    if (index < 0 || index >= presentedStackRef.current.length - 1) return [];
-    return presentedStackRef.current.slice(index + 1).reverse();
-  };
-
-  const present = async (name: string, index: number = 0) => {
-    const sheet = sheetsRef.current.get(name);
-    if (!sheet?.current) {
-      console.warn(`TrueSheet: Could not find sheet with name "${name}"`);
-      return;
-    }
-    return sheet.current.present(index);
-  };
-
-  const dismiss = async (name: string) => {
-    const sheet = sheetsRef.current.get(name);
-    if (!sheet?.current) {
-      console.warn(`TrueSheet: Could not find sheet with name "${name}"`);
-      return;
-    }
-    return sheet.current.dismiss();
-  };
-
-  const dismissStack = async (name: string) => {
-    const sheet = sheetsRef.current.get(name);
-    if (!sheet?.current) {
-      console.warn(`TrueSheet: Could not find sheet with name "${name}"`);
-      return;
-    }
-    return sheet.current.dismissStack();
-  };
-
-  const resize = async (name: string, index: number) => {
-    const sheet = sheetsRef.current.get(name);
-    if (!sheet?.current) {
-      console.warn(`TrueSheet: Could not find sheet with name "${name}"`);
-      return;
-    }
-    return sheet.current.resize(index);
-  };
+    return {
+      present: (name, index, animated) => ctx.resolveByName(name).present(index, animated),
+      resize: (name, index) => ctx.resolveByName(name).resize(index),
+      dismiss: (name, animated) => ctx.resolveByName(name).dismiss(animated),
+      dismissStack: (name, animated) => ctx.resolveByName(name).dismissStack(animated),
+      dismissAll: async (animated) => {
+        const stack = ctx.getStackSnapshot();
+        await Promise.all(
+          [...stack].reverse().map((entry) => entry.ref.current?.dismiss(animated))
+        );
+      },
+    };
+  }, [ctx]);
+}
 
-  const dismissAll = async () => {
-    const rootSheet = presentedStackRef.current[0];
-    if (!rootSheet) return;
-    return dismiss(rootSheet);
-  };
+export function useRegisterSheet(name: string | undefined, ref: SheetRef): void {
+  const ctx = useContext(SheetContext);
+  useEffect(() => {
+    if (!ctx || !name) return;
+    return ctx.registerByName(name, ref);
+  }, [ctx, name, ref]);
+}
 
-  return (
-    <BottomSheetContext.Provider
-      value={{
-        register,
-        unregister,
-        pushToStack,
-        removeFromStack,
-        getSheetsAbove,
-        present,
-        dismiss,
-        dismissStack,
-        resize,
-        dismissAll,
-      }}
-    >
-      <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
-    </BottomSheetContext.Provider>
+/**
+ * Registers the sheet in the open stack while `isOpen` is true and returns
+ * live data used by each sheet to render stacked visuals and dismiss children.
+ */
+export function useSheetStack(ref: SheetRef, nodeRef: NodeRef, isOpen: boolean) {
+  const ctx = useContext(SheetContext);
+
+  const entry = useMemo<StackEntry>(() => ({ ref, nodeRef }), [ref, nodeRef]);
+
+  useEffect(() => {
+    if (!ctx || !isOpen) return;
+    ctx.pushOpen(entry);
+    return () => ctx.popOpen(entry);
+  }, [ctx, entry, isOpen]);
+
+  const subscribe = useCallback(
+    (listener: () => void) => {
+      if (!ctx) return () => {};
+      return ctx.subscribeStack(listener);
+    },
+    [ctx]
   );
-}
 
-export function useTrueSheet(): TrueSheetStaticMethods {
-  const context = useContext(BottomSheetContext);
-
-  if (!context) {
-    throw new Error('useTrueSheet must be used within a TrueSheetProvider');
-  }
-
-  return {
-    present: context.present,
-    dismiss: context.dismiss,
-    dismissStack: context.dismissStack,
-    resize: context.resize,
-    dismissAll: context.dismissAll,
-  };
+  const getSnapshot = useCallback(() => (ctx ? ctx.getStackSnapshot() : EMPTY_STACK), [ctx]);
+
+  const stack = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const stackIndex = stack.findIndex((e) => e.ref === ref);
+  const isNested = stackIndex > 0;
+  const descendants = useMemo<readonly StackEntry[]>(
+    () => (stackIndex < 0 ? EMPTY_STACK : stack.slice(stackIndex + 1)),
+    [stack, stackIndex]
+  );
+
+  const dismissAbove = useCallback(
+    async (animated?: boolean) => {
+      if (!ctx) return;
+      const snapshot = ctx.getStackSnapshot();
+      const idx = snapshot.findIndex((e) => e.ref === ref);
+      if (idx < 0) return;
+      const above = snapshot.slice(idx + 1);
+      await Promise.all([...above].reverse().map((e) => e.ref.current?.dismiss(animated)));
+    },
+    [ctx, ref]
+  );
+
+  return { descendants, isNested, dismissAbove };
 }

package/src/mocks/index.ts

@@ -1,8 +1,7 @@
 import React, { createElement, isValidElement, type ReactNode } from 'react';
 import { View } from 'react-native';
 
-import type { TrueSheetProps } from '../TrueSheet.types';
-import type { TrueSheetStaticMethods } from '../TrueSheetProvider';
+import type { TrueSheetProps, TrueSheetStaticMethods } from '../TrueSheet.types';
 
 interface TrueSheetState {
   shouldRenderNativeView: boolean;

package/src/navigation/types.ts

@@ -148,7 +148,6 @@ export type TrueSheetNavigationSheetProps = Pick<
   | 'elevation'
   | 'detached'
   | 'detachedOffset'
-  | 'stackBehavior'
 >;
 
 /**

package/src/reanimated/ReanimatedTrueSheet.web.tsx

@@ -8,7 +8,6 @@ import { useReanimatedTrueSheet } from './ReanimatedTrueSheetProvider';
 interface ReanimatedTrueSheetProps extends TrueSheetProps {
   /**
    * Callback for position changes.
-   * On web, this is called with the position data from @gorhom/bottom-sheet.
    *
    * @see {@link TrueSheetProps.onPositionChange}
    */

package/src/reanimated/useReanimatedPositionChangeHandler.web.ts

@@ -9,9 +9,8 @@ type PositionChangeHandler = (
 /**
  * Web implementation of useReanimatedPositionChangeHandler.
  *
- * On web, this returns a simple callback wrapper since @gorhom/bottom-sheet
- * already provides animated position values. The worklet directive is ignored
- * on web as there's no native UI thread.
+ * Returns a simple callback wrapper. The worklet directive is ignored on web
+ * since there's no native UI thread.
  *
  * @param handler - The position change handler function
  * @param _dependencies - Unused on web, kept for API compatibility

package/src/web/constants.ts

@@ -0,0 +1,13 @@
+export const DEFAULT_CORNER_RADIUS = 16;
+export const DEFAULT_MAX_WIDTH = 640;
+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_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)';
+export const DEFAULT_GRABBER_WIDTH = 32;
+export const DEFAULT_GRABBER_HEIGHT = 4;
+export const DEFAULT_GRABBER_TOP_MARGIN = 16;

package/src/web/vaul/README.md

@@ -0,0 +1,9 @@
+# vaul
+
+Originally forked from [vaul](https://github.com/emilkowalski/vaul) by Emil Kowalski at `v1.1.2`. Upstream is unmaintained; maintained here as part of truesheet's web renderer.
+
+Only external runtime dep: `@radix-ui/react-dialog`.
+
+## License
+
+vaul is MIT-licensed. See the [upstream LICENSE](https://github.com/emilkowalski/vaul/blob/main/LICENSE.md). Original copyright remains with Emil Kowalski.

package/src/web/vaul/browser.ts

@@ -0,0 +1,38 @@
+export function isMobileFirefox(): boolean | undefined {
+  const userAgent = navigator.userAgent;
+  return (
+    typeof window !== 'undefined' &&
+    ((/Firefox/.test(userAgent) && /Mobile/.test(userAgent)) || // Android Firefox
+      /FxiOS/.test(userAgent)) // iOS Firefox
+  );
+}
+
+export function isMac(): boolean | undefined {
+  return testPlatform(/^Mac/);
+}
+
+export function isIPhone(): boolean | undefined {
+  return testPlatform(/^iPhone/);
+}
+
+export function isSafari(): boolean | undefined {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+
+export function isIPad(): boolean | undefined {
+  return (
+    testPlatform(/^iPad/) ||
+    // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+    (isMac() && navigator.maxTouchPoints > 1)
+  );
+}
+
+export function isIOS(): boolean | undefined {
+  return isIPhone() || isIPad();
+}
+
+export function testPlatform(re: RegExp): boolean | undefined {
+  return typeof window !== 'undefined' && window.navigator != null
+    ? re.test(window.navigator.platform)
+    : undefined;
+}

package/src/web/vaul/constants.ts

@@ -0,0 +1,18 @@
+export const TRANSITIONS = {
+  DURATION: 0.5,
+  EASE: [0.32, 0.72, 0, 1],
+};
+
+export const VELOCITY_THRESHOLD = 0.4;
+
+export const CLOSE_THRESHOLD = 0.25;
+
+export const SCROLL_LOCK_TIMEOUT = 100;
+
+export const BORDER_RADIUS = 8;
+
+export const NESTED_DISPLACEMENT = 16;
+
+export const WINDOW_TOP_OFFSET = 26;
+
+export const DRAG_CLASS = 'vaul-dragging';

package/src/web/vaul/context.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import type { DrawerDirection } from './types';
+
+interface DrawerContextValue {
+  drawerRef: React.RefObject<HTMLDivElement | null>;
+  overlayRef: React.RefObject<HTMLDivElement | null>;
+  onPress: (event: React.PointerEvent<HTMLDivElement>) => void;
+  onRelease: (event: React.PointerEvent<HTMLDivElement> | null) => void;
+  onDrag: (event: React.PointerEvent<HTMLDivElement>) => void;
+  onNestedDrag: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
+  onNestedOpenChange: (o: boolean) => void;
+  onNestedRelease: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
+  dismissible: boolean;
+  isOpen: boolean;
+  isDragging: boolean;
+  keyboardIsOpen: React.MutableRefObject<boolean>;
+  snapPointsOffset: number[] | null;
+  snapPoints?: (number | string)[] | null;
+  activeSnapPointIndex?: number | null;
+  fadeFromIndex?: number;
+  modal: boolean;
+  shouldFade: boolean;
+  activeSnapPoint?: number | string | null;
+  setActiveSnapPoint: (o: number | string | null) => void;
+  closeDrawer: () => void;
+  openProp?: boolean;
+  onOpenChange?: (o: boolean) => void;
+  direction: DrawerDirection;
+  shouldScaleBackground: boolean;
+  setBackgroundColorOnScale: boolean;
+  noBodyStyles: boolean;
+  handleOnly?: boolean;
+  container?: HTMLElement | null;
+  autoFocus?: boolean;
+  shouldAnimate?: React.RefObject<boolean>;
+  onPositionChangeRef: React.RefObject<((position: number) => void) | undefined>;
+  setContentHeight: (height: number) => void;
+  detached: boolean;
+  detachedOffset: number;
+  detachedRadius: number;
+  detachedWrapperStyle?: React.CSSProperties;
+}
+
+export const DrawerContext = React.createContext<DrawerContextValue>({
+  drawerRef: { current: null },
+  overlayRef: { current: null },
+  onPress: () => {},
+  onRelease: () => {},
+  onDrag: () => {},
+  onNestedDrag: () => {},
+  onNestedOpenChange: () => {},
+  onNestedRelease: () => {},
+  openProp: undefined,
+  dismissible: false,
+  isOpen: false,
+  isDragging: false,
+  keyboardIsOpen: { current: false },
+  snapPointsOffset: null,
+  snapPoints: null,
+  handleOnly: false,
+  modal: false,
+  shouldFade: false,
+  activeSnapPoint: null,
+  onOpenChange: () => {},
+  setActiveSnapPoint: () => {},
+  closeDrawer: () => {},
+  direction: 'bottom',
+  shouldAnimate: { current: true },
+  shouldScaleBackground: false,
+  setBackgroundColorOnScale: true,
+  noBodyStyles: false,
+  container: null,
+  autoFocus: false,
+  onPositionChangeRef: { current: undefined },
+  setContentHeight: () => {},
+  detached: false,
+  detachedOffset: 0,
+  detachedRadius: 0,
+});
+
+export const useDrawerContext = () => {
+  const context = React.useContext(DrawerContext);
+  if (!context) {
+    throw new Error('useDrawerContext must be used within a Drawer.Root');
+  }
+  return context;
+};