@lodev09/react-native-true-sheet 4.0.0-beta.23 → 4.0.0-beta.25

package/src/TrueSheet.web.tsx

@@ -10,6 +10,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type RefObject,
 } from 'react';
 import type { DimensionValue, LayoutChangeEvent } from 'react-native';
 import { StyleSheet, useColorScheme, useWindowDimensions, View } from 'react-native';
@@ -41,7 +42,12 @@ import {
   TrueSheetPeekContext,
   type TrueSheetPeekContextValue,
 } from './TrueSheetPeek.web';
-import { usePortalContainer, useRegisterSheet, useSheetStack } from './TrueSheetProvider.web';
+import {
+  usePortalContainer,
+  useRegisterSheet,
+  useSheetStack,
+  type SheetHandle,
+} from './TrueSheetProvider.web';
 import {
   COLOR_SURFACE_CONTAINER_LOW_DARK,
   COLOR_SURFACE_CONTAINER_LOW_LIGHT,
@@ -60,18 +66,16 @@ import {
 import { getDOMElement } from './web/dom';
 import { TrueSheetBackground } from './TrueSheetBackground';
 import { getDetentBackgroundIndex, normalizeDetentBackground } from './detentBackgrounds';
+import { revealFocusedElement, useKeyboardViewport } from './web/keyboard';
 import { observeSheetLayout } from './web/layout';
+import { resolveScrollable } from './scrollable';
 import { Drawer } from './web/vaul';
 import { DEFAULT_PEEK_HEIGHT, DRAG_CLASS, TRANSITIONS } from './web/vaul/constants';
 
-// Resolves the user's `scrollableRef` to its scrollable DOM element — RN-web
-// ScrollView refs expose the scroll node directly (with helpers attached);
-// list refs (e.g. FlatList) expose it via getScrollableNode(). The node's
-// first child is the content container.
+// Resolves the user's `scrollableRef` to its scrollable DOM element. The
+// node's first child is the content container.
 const getScrollableElement = (scrollable: unknown): HTMLElement | null => {
-  if (!scrollable) return null;
-  if (scrollable instanceof HTMLElement) return scrollable;
-  const node = (scrollable as { getScrollableNode?: () => unknown }).getScrollableNode?.();
+  const node = resolveScrollable(scrollable);
   return node instanceof HTMLElement ? node : null;
 };
 
@@ -99,6 +103,8 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     accessibilityOptions,
     detents = [0.5, 1],
     dimmed = true,
+    dimColor,
+    dimOpacity,
     dimmedDetentIndex = 0,
     initialDetentIndex = -1,
     header,
@@ -164,7 +170,19 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   const [isOpen, setIsOpen] = useState(shouldAutoPresent);
   const isOpenRef = useRef(isOpen);
   isOpenRef.current = isOpen;
+  const keyboardViewport = useKeyboardViewport(isOpen);
   const isPresentingRef = useRef(shouldAutoPresent);
+  // Native's lifecycle state — updated synchronously so calls in the same tick see each other
+  const phaseRef = useRef<SheetPhase>(shouldAutoPresent ? 'presenting' : 'dismissed');
+  const resolvePresentRef = useRef<(() => void) | null>(null);
+  const resolveDismissRef = useRef<(() => void) | null>(null);
+  // Whether willPresent fired for the current open cycle — a present undone
+  // before it fires has nothing to pair a dismiss with.
+  const didEmitWillPresentRef = useRef(false);
+  // Whether the current open cycle came from initialDetentIndex. Native mounts those
+  // eagerly, so a dismiss before willPresent lands after the present instead of cancelling it.
+  const isAutoPresentRef = useRef(shouldAutoPresent);
+  const shouldDismissOnPresentRef = useRef(false);
   const [displayedBackgroundIndex, setDisplayedBackgroundIndex] = useState(
     shouldAutoPresent ? initialDetentIndex : 0
   );
@@ -199,13 +217,31 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     );
   }, []);
 
+  // Returns null when there's nothing to dismiss. Resolves on didDismiss.
+  const dismissSheet = useCallback((): Promise<void> | null => {
+    if (phaseRef.current === 'dismissed' || phaseRef.current === 'dismissing') return null;
+    settle(resolvePresentRef);
+    if (didEmitWillPresentRef.current) {
+      setIsOpen(false);
+    } else if (isAutoPresentRef.current) {
+      shouldDismissOnPresentRef.current = true;
+    } else {
+      // Mirror native's lazy-mount cancel: nothing shown yet, nothing to animate out
+      setIsOpen(false);
+      phaseRef.current = 'dismissed';
+      return Promise.resolve();
+    }
+    phaseRef.current = 'dismissing';
+    return new Promise((resolve) => {
+      resolveDismissRef.current = resolve;
+    });
+  }, []);
+
   const handleOpenChange = useCallback(
     (open: boolean) => {
-      if (!open && isOpen) {
-        setIsOpen(false);
-      }
+      if (!open) dismissSheet();
     },
-    [isOpen]
+    [dismissSheet]
   );
 
   const portalContainer = usePortalContainer();
@@ -248,24 +284,38 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   const dismissAboveRef = useRef<(animated?: boolean) => Promise<void>>(async () => {});
   const dismissDescendantsRef = useRef<() => void>(() => {});
 
+  const presentSheet = useCallback(async (index: number, auto: boolean) => {
+    const detent = validDetentsRef.current[index];
+    if (detent === undefined) {
+      throw new Error(
+        `TrueSheet: present index (${index}) is out of bounds. detents array has ${validDetentsRef.current.length} item(s)`
+      );
+    }
+    if (phaseRef.current !== 'dismissed') {
+      console.warn(ALREADY_PRESENTED_WARNING);
+      return;
+    }
+    phaseRef.current = 'presenting';
+    isAutoPresentRef.current = auto;
+    isPresentingRef.current = true;
+    setDisplayedBackgroundIndex(index);
+    setActiveSnapPoint(detent);
+    setIsOpen(true);
+    await new Promise<void>((resolve) => {
+      resolvePresentRef.current = resolve;
+    });
+  }, []);
+
   const methods = useMemo<TrueSheetMethods>(
     () => ({
-      present: async (index = 0) => {
-        const detent = validDetentsRef.current[index];
-        if (detent === undefined) {
-          throw new Error(
-            `TrueSheet: present index (${index}) is out of bounds. detents array has ${validDetentsRef.current.length} item(s)`
-          );
-        }
-        if (!isOpenRef.current) {
-          isPresentingRef.current = true;
-          setDisplayedBackgroundIndex(index);
-        }
-        setActiveSnapPoint(detent);
-        setIsOpen(true);
-      },
+      present: (index = 0) => presentSheet(index, false),
       dismiss: async () => {
-        setIsOpen(false);
+        const dismissal = dismissSheet();
+        if (!dismissal) {
+          console.warn(ALREADY_DISMISSED_WARNING);
+          return;
+        }
+        await dismissal;
       },
       resize: async (index) => {
         const detent = validDetentsRef.current[index];
@@ -277,10 +327,14 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
         setActiveSnapPoint(detent);
       },
       dismissStack: async (animated) => {
+        if (phaseRef.current === 'dismissed' || phaseRef.current === 'dismissing') {
+          console.warn(ALREADY_DISMISSED_WARNING);
+          return;
+        }
         await dismissAboveRef.current(animated);
       },
     }),
-    []
+    [presentSheet, dismissSheet]
   );
 
   useImperativeHandle(ref, () => methods, [methods]);
@@ -288,13 +342,27 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   useEffect(() => {
     if (!shouldAutoPresent || didInitiallyPresentRef.current) return;
     didInitiallyPresentRef.current = true;
-    if (!isOpenRef.current) {
-      methods.present(initialDetentIndex);
+    if (phaseRef.current === 'dismissed') {
+      presentSheet(initialDetentIndex, true);
     }
-  }, [initialDetentIndex, shouldAutoPresent, methods]);
+  }, [initialDetentIndex, shouldAutoPresent, presentSheet]);
+
+  // Unmounted mid-transition: don't leave callers awaiting forever
+  useEffect(
+    () => () => {
+      settle(resolvePresentRef);
+      settle(resolveDismissRef);
+    },
+    []
+  );
 
-  const methodsRef = useRef<TrueSheetMethods | null>(methods);
-  useRegisterSheet(name, methodsRef);
+  const handleRef = useRef<SheetHandle>({
+    methods,
+    dismissQuietly: async () => {
+      await dismissSheet();
+    },
+  });
+  useRegisterSheet(name, handleRef);
 
   const drawerContentRef = useRef<HTMLDivElement | null>(null);
   const [drawerContent, setDrawerContent] = useState<HTMLDivElement | null>(null);
@@ -447,6 +515,22 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     scrollableRef,
   ]);
 
+  // Re-reveal the focused field once the sheet settles above the keyboard
+  useEffect(() => {
+    const drawer = drawerContentRef.current;
+    if (!keyboardViewport || !drawer) return undefined;
+    let canceled = false;
+    // Flush styles so this commit's snap transition shows up in getAnimations()
+    // eslint-disable-next-line no-void
+    void drawer.offsetHeight;
+    Promise.allSettled(drawer.getAnimations().map((a) => a.finished)).then(() => {
+      if (!canceled) revealFocusedElement(drawer);
+    });
+    return () => {
+      canceled = true;
+    };
+  }, [keyboardViewport]);
+
   // Below the last detent a vertical touch pan moves the sheet, not the
   // content — `[data-vaul-scroll-locked]` disables vertical touch panning on
   // the scroll container and everything inside it (see vaul/style.css).
@@ -519,6 +603,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     effectiveMaxContentHeight,
     peekHeight,
     peekContentHeight,
+    keyboardViewport,
   });
   geometryInputsRef.current = {
     effectiveDetached,
@@ -526,14 +611,18 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     effectiveMaxContentHeight,
     peekHeight,
     peekContentHeight,
+    keyboardViewport,
   };
 
   const computeDetentGeometry = useCallback(() => {
     const inputs = geometryInputsRef.current;
-    const windowH = window.innerHeight;
-    const effectiveH = inputs.effectiveDetached
-      ? windowH - inputs.effectiveDetachedOffset
-      : windowH;
+    const windowH = inputs.keyboardViewport?.height ?? window.innerHeight;
+    const bottomGap = inputs.effectiveDetached ? inputs.effectiveDetachedOffset : 0;
+    const effectiveH = windowH - bottomGap;
+    // Above a keyboard, fractions keep their full-height size (see vaul).
+    const fractionH = inputs.keyboardViewport
+      ? inputs.keyboardViewport.layoutHeight - bottomGap
+      : effectiveH;
     // Matches vaul's height ceiling: min(effectiveH, maxContentHeight).
     const ceiling =
       inputs.effectiveMaxContentHeight !== undefined
@@ -569,7 +658,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     for (const d of validDetentsRef.current) {
       const h =
         typeof d === 'number'
-          ? Math.min(d * effectiveH, ceiling)
+          ? Math.min(d * fractionH, ceiling)
           : d === 'peek'
             ? Math.min(livePeekHeight, ceiling)
             : autoHeight;
@@ -706,6 +795,9 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       // Mirror native: dismissing a sheet takes every sheet stacked above it
       // (iOS dismisses from the presenter; Android runs dismissStack first).
       dismissDescendantsRef.current();
+      // Mirror native's lazy-mount cancel: dismissed before willPresent, no events
+      if (!didEmitWillPresentRef.current) return undefined;
+      didEmitWillPresentRef.current = false;
       // Pair willBlur with willDismiss on dismiss — mirrors native iOS
       // emitWillDismissEvents (blur fires before dismiss). willPresent is
       // deferred to `start()` below (needs the mounted drawer's geometry).
@@ -716,11 +808,20 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     const fireDone = () => {
       if (present) {
         isPresentingRef.current = false;
+        // A dismiss may already be underway (it lands on the next commit)
+        if (phaseRef.current === 'presenting') phaseRef.current = 'presented';
         onDidPresentRef.current?.({ nativeEvent: computeDetentInfo() } as DidPresentEvent);
         onDidFocusRef.current?.({ nativeEvent: null } as DidFocusEvent);
+        settle(resolvePresentRef);
+        if (shouldDismissOnPresentRef.current) {
+          shouldDismissOnPresentRef.current = false;
+          setIsOpen(false);
+        }
       } else {
+        phaseRef.current = 'dismissed';
         onDidBlurRef.current?.({ nativeEvent: null } as DidBlurEvent);
         onDidDismissRef.current?.({ nativeEvent: null } as DidDismissEvent);
+        settle(resolveDismissRef);
       }
     };
 
@@ -746,6 +847,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
         // willPresent mirrors native iOS where viewWillAppear dispatches
         // both; the descendant-stack focus effect handles subsequent
         // transitions.
+        didEmitWillPresentRef.current = true;
         onWillPresentRef.current?.({ nativeEvent: computeDetentInfo() } as WillPresentEvent);
         onWillFocusRef.current?.({ nativeEvent: null } as WillFocusEvent);
       }
@@ -812,7 +914,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   }, [computeDetentInfo]);
 
   const { isNested, dismissAbove, descendants } = useSheetStack(
-    methodsRef,
+    handleRef,
     drawerContentRef,
     isOpen,
     isFormSheet
@@ -822,7 +924,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   // already been popped from the stack, so `dismissAbove` can't find it.
   dismissDescendantsRef.current = () => {
     for (let i = descendants.length - 1; i >= 0; i--) {
-      descendants[i]!.ref.current?.dismiss();
+      descendants[i]!.ref.current?.dismissQuietly();
     }
   };
 
@@ -1057,6 +1159,16 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     transition: isPresentingRef.current ? 'none' : 'background-color 200ms',
   };
 
+  // Vaul fades the overlay through its opacity, so the dim opacity goes into the color
+  const resolvedOverlayStyle = useMemo<React.CSSProperties>(() => {
+    if (dimColor == null && dimOpacity == null) return overlayStyle;
+    const percentage = Math.min(1, Math.max(0, dimOpacity ?? DEFAULT_DIM_OPACITY)) * 100;
+    return {
+      ...overlayStyle,
+      backgroundColor: `color-mix(in srgb, ${String(dimColor ?? 'black')} ${percentage}%, transparent)`,
+    };
+  }, [dimColor, dimOpacity]);
+
   const mergedContentStyle = useMemo<React.CSSProperties>(
     () => ({
       position: 'fixed',
@@ -1225,12 +1337,13 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
         initialAnimated={shouldAutoPresent ? initialDetentAnimated : true}
         detachedWrapperStyle={wrapperStyle}
         contentHeight={measuredContentHeight}
+        keyboardViewport={keyboardViewport}
         activeSnapPoint={activeSnapPoint}
         setActiveSnapPoint={handleSetActiveSnapPoint}
         {...snapPointsProps}
       >
         <Drawer.Portal container={portalContainer ?? undefined}>
-          <Drawer.Overlay style={overlayStyle} />
+          <Drawer.Overlay style={resolvedOverlayStyle} />
           <Drawer.Content
             ref={handleDrawerRef}
             style={mergedContentStyle}
@@ -1281,6 +1394,8 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   );
 });
 
+const DEFAULT_DIM_OPACITY = 0.5;
+
 const overlayStyle: React.CSSProperties = {
   position: 'fixed',
   inset: 0,
@@ -1329,6 +1444,20 @@ const visuallyHiddenStyle: React.CSSProperties = {
   border: 0,
 };
 
+type SheetPhase = 'dismissed' | 'presenting' | 'presented' | 'dismissing';
+
+const settle = (resolveRef: RefObject<(() => void) | null>) => {
+  const resolve = resolveRef.current;
+  resolveRef.current = null;
+  resolve?.();
+};
+
+// Same as native
+const ALREADY_PRESENTED_WARNING =
+  'TrueSheet: sheet is already presented. Use resize() to change detent.';
+const ALREADY_DISMISSED_WARNING =
+  'TrueSheet: sheet is already dismissed. No need to dismiss it again.';
+
 const STATIC_METHOD_ERROR =
   'Static methods are not supported on web. Use the useTrueSheet() hook instead.';
 

package/src/TrueSheetProvider.web.tsx

@@ -13,7 +13,13 @@ import {
 
 import type { TrueSheetMethods, TrueSheetStaticMethods } from './TrueSheet.types';
 
-type SheetRef = RefObject<TrueSheetMethods | null>;
+export interface SheetHandle {
+  methods: TrueSheetMethods;
+  // dismiss() without the already-dismissed warning, for stack-wide dismissals
+  dismissQuietly: (animated?: boolean) => Promise<void>;
+}
+
+type SheetRef = RefObject<SheetHandle | null>;
 type NodeRef = RefObject<HTMLDivElement | null>;
 
 interface StackEntry {
@@ -23,7 +29,8 @@ interface StackEntry {
 }
 
 interface SheetContextValue {
-  registerByName: (name: string, ref: SheetRef) => () => void;
+  registerSheet: (ref: SheetRef, name?: string) => () => void;
+  getSheets: () => ReadonlySet<SheetRef>;
   resolveByName: (name: string) => TrueSheetMethods;
   pushOpen: (entry: StackEntry) => void;
   popOpen: (entry: StackEntry) => void;
@@ -44,6 +51,7 @@ export interface TrueSheetProviderProps {
 }
 
 export function TrueSheetProvider({ children }: TrueSheetProviderProps) {
+  const sheetsRef = useRef<Set<SheetRef>>(new Set());
   const namedSheetsRef = useRef<Map<string, SheetRef>>(new Map());
   const stackRef = useRef<readonly StackEntry[]>(EMPTY_STACK);
   const listenersRef = useRef<Set<() => void>>(new Set());
@@ -72,17 +80,20 @@ export function TrueSheetProvider({ children }: TrueSheetProviderProps) {
     const notify = () => listenersRef.current.forEach((listener) => listener());
 
     return {
-      registerByName: (name, ref) => {
-        namedSheetsRef.current.set(name, ref);
+      registerSheet: (ref, name) => {
+        sheetsRef.current.add(ref);
+        if (name) namedSheetsRef.current.set(name, ref);
         return () => {
-          if (namedSheetsRef.current.get(name) === ref) {
+          sheetsRef.current.delete(ref);
+          if (name && namedSheetsRef.current.get(name) === ref) {
             namedSheetsRef.current.delete(name);
           }
         };
       },
+      getSheets: () => sheetsRef.current,
       resolveByName: (name) => {
         const ref = namedSheetsRef.current.get(name);
-        const methods = ref?.current;
+        const methods = ref?.current?.methods;
         if (!methods) {
           throw new Error(`TrueSheet: no sheet registered with name "${name}"`);
         }
@@ -145,11 +156,9 @@ export function useTrueSheet(): TrueSheetStaticMethods {
       resize: (name, index) => ctx.resolveByName(name).resize(index),
       dismiss: (name, animated) => ctx.resolveByName(name).dismiss(animated),
       dismissStack: (name, animated) => ctx.resolveByName(name).dismissStack(animated),
+      // Every sheet, not just the open stack — it misses a present() that hasn't committed yet
       dismissAll: async (animated) => {
-        const stack = ctx.getStackSnapshot();
-        await Promise.all(
-          [...stack].reverse().map((entry) => entry.ref.current?.dismiss(animated))
-        );
+        await Promise.all([...ctx.getSheets()].map((ref) => ref.current?.dismissQuietly(animated)));
       },
     };
   }, [ctx]);
@@ -158,8 +167,8 @@ export function useTrueSheet(): TrueSheetStaticMethods {
 export function useRegisterSheet(name: string | undefined, ref: SheetRef): void {
   const ctx = useContext(SheetContext);
   useEffect(() => {
-    if (!ctx || !name) return;
-    return ctx.registerByName(name, ref);
+    if (!ctx) return;
+    return ctx.registerSheet(ref, name);
   }, [ctx, name, ref]);
 }
 
@@ -211,7 +220,7 @@ export function useSheetStack(
       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)));
+      await Promise.all([...above].reverse().map((e) => e.ref.current?.dismissQuietly(animated)));
     },
     [ctx, ref]
   );

package/src/fabric/TrueSheetFooterViewNativeComponent.ts

@@ -1,12 +1,11 @@
-import type { ViewProps } from 'react-native';
-import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import type { CodegenTypes, ViewProps } from 'react-native';
 import { codegenNativeComponent } from 'react-native';
 
 export interface NativeProps extends ViewProps {
   // Seeds the footer's first layout with the sheet's bottom safe-area inset
   // (insetAdjustment: 'automatic') so a late-set footer doesn't need a second
   // layout pass — and a visible sheet resize — once native pushes the inset
-  autoBottomInset?: WithDefault<boolean, false>;
+  autoBottomInset?: CodegenTypes.WithDefault<boolean, false>;
 }
 
 // interfaceOnly: shadow node/state/descriptor are custom (common/cpp) so the