@oxyhq/bloom 0.45.0 → 0.48.0

package/src/__tests__/BottomSheet.test.tsx

@@ -248,6 +248,53 @@ describe('BottomSheet', () => {
     });
   });
 
+  describe('unmount-while-open does not fire onDismiss (responsive placement swap)', () => {
+    it('skips onDismiss when a fully-open sheet is unmounted (yanked, not closing)', () => {
+      // A responsive Dialog crossing its breakpoint swaps its bottom-sheet branch
+      // for the centered-card branch, unmounting this sheet while it is still
+      // fully OPEN. That is NOT a dismissal — firing onDismiss here would tear the
+      // surface down mid-swap. The unmount-safety only flushes when a close was
+      // already underway (visible=false).
+      const onDismiss = jest.fn();
+      const ref = createRef<BottomSheetRef>();
+      const { unmount } = renderWithTheme(
+        <BottomSheet ref={ref} onDismiss={onDismiss}>
+          <React.Fragment>Open content</React.Fragment>
+        </BottomSheet>,
+      );
+      act(() => {
+        ref.current?.present();
+      });
+      act(() => {
+        unmount();
+      });
+      expect(onDismiss).not.toHaveBeenCalled();
+    });
+
+    it('still flushes onDismiss when unmounted mid-close (visible already false)', () => {
+      // The original guard's purpose: a sheet yanked mid-close-animation must
+      // still flush its onDismiss so queued post-close callbacks are not lost.
+      const onDismiss = jest.fn();
+      const ref = createRef<BottomSheetRef>();
+      const { unmount } = renderWithTheme(
+        <BottomSheet ref={ref} onDismiss={onDismiss}>
+          <React.Fragment>Closing content</React.Fragment>
+        </BottomSheet>,
+      );
+      act(() => {
+        ref.current?.present();
+      });
+      // Start the close (visible → false), then yank before the exit settles.
+      act(() => {
+        ref.current?.dismiss();
+      });
+      act(() => {
+        unmount();
+      });
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('close generation tracking', () => {
     it('re-opening the sheet after dismiss does not throw or get stuck', () => {
       // Regression test for the "tap to open does nothing" bug: when the

package/src/__tests__/DialogBottomSheet.test.tsx

@@ -206,7 +206,7 @@ describe('Dialog bottom placement delegates to BottomSheet', () => {
     expect(flattened.padding).toBe(0);
   });
 
-  it('does NOT wrap pure custom children in a second scroll container (no scroll-in-scroll)', () => {
+  it('wraps pure custom children in the internal scroll container by default (Dialog owns scroll)', () => {
     let control: ReturnType<typeof useDialogControl> | undefined;
     const result = renderWithTheme(
       <Harness>
@@ -214,7 +214,7 @@ describe('Dialog bottom placement delegates to BottomSheet', () => {
           control = c;
           return (
             <Dialog control={c} placement="bottom">
-              <Text>Custom children own their own scrolling</Text>
+              <Text>Custom children scroll inside the sheet by default</Text>
             </Dialog>
           );
         }}
@@ -223,9 +223,34 @@ describe('Dialog bottom placement delegates to BottomSheet', () => {
     act(() => {
       control?.open();
     });
-    // Pure custom children → DialogBottomSheet passes `scrollable={false}` to
-    // BottomSheet, so the sheet does NOT add its internal ScrollView. A child
-    // that contains its own scroller is then the ONLY scroll container.
+    // Pure custom children default to `scrollable` (undefined → true), so the
+    // sheet DOES add its internal ScrollView and the screen — stripped of its
+    // own scroller — scrolls inside it. The Dialog owns the scroll boundary.
+    const tree: RenderedNode | RenderedNode[] | null = result.toJSON();
+    expect(countNodesByType(tree, 'Animated.ScrollView')).toBe(1);
+  });
+
+  it('opts custom children OUT of the internal scroll container when scrollable={false}', () => {
+    let control: ReturnType<typeof useDialogControl> | undefined;
+    const result = renderWithTheme(
+      <Harness>
+        {(c) => {
+          control = c;
+          return (
+            <Dialog control={c} placement="bottom" scrollable={false}>
+              <Text>Owns its own FlatList</Text>
+            </Dialog>
+          );
+        }}
+      </Harness>,
+    );
+    act(() => {
+      control?.open();
+    });
+    // A surface whose content owns its own scroller (a FlatList / VirtualizedList)
+    // passes `scrollable={false}`, so the sheet does NOT add its internal
+    // ScrollView — the child is then the ONLY scroll container (no scroll-in-
+    // scroll, no "VirtualizedList inside a plain ScrollView" warning).
     const tree: RenderedNode | RenderedNode[] | null = result.toJSON();
     expect(countNodesByType(tree, 'Animated.ScrollView')).toBe(0);
   });

package/src/__tests__/surfaceStore.test.ts

@@ -0,0 +1,219 @@
+import {
+  __resetSurfacesForTests,
+  dismissAll,
+  dismissToRoot,
+  dismissTop,
+  finalizeClose,
+  getSnapshot,
+  present,
+  requestDismiss,
+  resetSurfaces,
+  subscribe,
+} from '../surfaces/surfaceStore';
+import { confirm, prompt, surfaces } from '../surfaces/api';
+
+const noop = () => null;
+
+/** Id of the current top surface (guarded so strict tsc is satisfied). */
+function topId(): string {
+  const stack = getSnapshot();
+  const top = stack[stack.length - 1];
+  if (!top) throw new Error('expected a surface on the stack');
+  return top.id;
+}
+
+afterEach(() => {
+  // Resolve any lingering promises so awaiting tests never hang, then reset the
+  // module store + id counter for isolation.
+  resetSurfaces();
+  __resetSurfacesForTests();
+});
+
+describe('surfaceStore', () => {
+  it('present pushes an entry and resolves its promise on dismiss', async () => {
+    const p = present(noop);
+    const stack = getSnapshot();
+    expect(stack).toHaveLength(1);
+    expect(stack[0]?.status).toBe('open');
+    requestDismiss(topId(), 'hello');
+    await expect(p).resolves.toBe('hello');
+  });
+
+  it('stacks bottom→top; the last entry is the top', () => {
+    void present(noop);
+    void present(noop);
+    void present(noop);
+    expect(getSnapshot().map((e) => e.id)).toEqual([
+      'bloom-surface-1',
+      'bloom-surface-2',
+      'bloom-surface-3',
+    ]);
+  });
+
+  it('resolves ONCE — a second dismiss with a different result is ignored', async () => {
+    const p = present(noop);
+    const id = topId();
+    requestDismiss(id, 'first');
+    requestDismiss(id, 'second');
+    await expect(p).resolves.toBe('first');
+  });
+
+  it('requestDismiss flips the entry to closing but does not splice it', () => {
+    void present(noop);
+    const id = topId();
+    requestDismiss(id, 1);
+    const stack = getSnapshot();
+    expect(stack).toHaveLength(1);
+    expect(stack[0]?.status).toBe('closing');
+    expect(stack[0]?.generation).toBe(1);
+  });
+
+  it('finalizeClose removes a CLOSING entry; is a no-op for an OPEN entry', async () => {
+    const p = present(noop);
+    const id = topId();
+    // Open → no-op.
+    finalizeClose(id);
+    expect(getSnapshot()).toHaveLength(1);
+    // Closing → removed.
+    requestDismiss(id, 'x');
+    finalizeClose(id);
+    expect(getSnapshot()).toHaveLength(0);
+    await expect(p).resolves.toBe('x');
+  });
+
+  it('dismissTop dismisses only the top surface', async () => {
+    const a = present(noop);
+    const b = present(noop);
+    dismissTop('B');
+    await expect(b).resolves.toBe('B');
+    const stack = getSnapshot();
+    expect(stack.find((e) => e.id === 'bloom-surface-1')?.status).toBe('open');
+    expect(stack.find((e) => e.id === 'bloom-surface-2')?.status).toBe('closing');
+    // Clean up the still-open root.
+    void a;
+  });
+
+  it('dismissToRoot resolves everything above the root with undefined, keeps the root', async () => {
+    const root = present(noop);
+    const mid = present(noop);
+    const top = present(noop);
+    dismissToRoot();
+    await expect(mid).resolves.toBeUndefined();
+    await expect(top).resolves.toBeUndefined();
+    const stack = getSnapshot();
+    expect(stack.find((e) => e.id === 'bloom-surface-1')?.status).toBe('open');
+    void root;
+  });
+
+  it('dismissToRoot is a no-op with 0 or 1 surfaces', async () => {
+    dismissToRoot();
+    expect(getSnapshot()).toHaveLength(0);
+    const only = present(noop);
+    dismissToRoot();
+    expect(getSnapshot()[0]?.status).toBe('open');
+    void only;
+  });
+
+  it('dismissAll resolves ALL pending awaiters with undefined', async () => {
+    const a = present(noop);
+    const b = present(noop);
+    const c = present(noop);
+    dismissAll();
+    await expect(a).resolves.toBeUndefined();
+    await expect(b).resolves.toBeUndefined();
+    await expect(c).resolves.toBeUndefined();
+  });
+
+  it('resetSurfaces resolves pending awaiters and clears the stack', async () => {
+    const a = present(noop);
+    const b = present(noop);
+    resetSurfaces();
+    await expect(a).resolves.toBeUndefined();
+    await expect(b).resolves.toBeUndefined();
+    expect(getSnapshot()).toHaveLength(0);
+  });
+
+  it('requestDismiss / finalizeClose ignore an unknown id', () => {
+    expect(() => requestDismiss('does-not-exist', 1)).not.toThrow();
+    expect(() => finalizeClose('does-not-exist')).not.toThrow();
+  });
+
+  it('getSnapshot returns a STABLE reference while unchanged', () => {
+    const s1 = getSnapshot();
+    expect(getSnapshot()).toBe(s1);
+    void present(noop);
+    const s2 = getSnapshot();
+    expect(s2).not.toBe(s1);
+    expect(getSnapshot()).toBe(s2);
+  });
+
+  it('notifies subscribers on each stack mutation', () => {
+    let calls = 0;
+    const unsub = subscribe(() => {
+      calls += 1;
+    });
+    void present(noop); // +1
+    dismissTop(); // requestDismiss emits +1
+    expect(calls).toBe(2);
+    unsub();
+  });
+});
+
+describe('surfaces imperative API', () => {
+  it('surfaces.present + surfaces.dismiss resolve with the top result', async () => {
+    const p = surfaces.present(noop);
+    surfaces.dismiss('done');
+    await expect(p).resolves.toBe('done');
+  });
+
+  it('surfaces.dismissById targets a specific surface', async () => {
+    const a = surfaces.present(noop);
+    const b = surfaces.present(noop);
+    const bottom = getSnapshot()[0];
+    if (!bottom) throw new Error('expected a surface on the stack');
+    surfaces.dismissById(bottom.id, 'A');
+    await expect(a).resolves.toBe('A');
+    void b;
+  });
+
+  it('surfaces.dismissAll clears the stack and resolves pending', async () => {
+    const a = surfaces.present(noop);
+    const b = surfaces.present(noop);
+    surfaces.dismissAll();
+    await expect(a).resolves.toBeUndefined();
+    await expect(b).resolves.toBeUndefined();
+  });
+});
+
+describe('confirm / prompt surfaces', () => {
+  it('confirm resolves true when dismissed with true, false otherwise', async () => {
+    const yes = confirm({ title: 'Delete?' });
+    requestDismiss(topId(), true);
+    await expect(yes).resolves.toBe(true);
+
+    const no = confirm({ title: 'Delete?' });
+    requestDismiss(topId(), false);
+    await expect(no).resolves.toBe(false);
+  });
+
+  it('confirm resolves false when dismissed without a result (backdrop/Escape)', async () => {
+    const c = confirm({ title: 'Proceed?' });
+    dismissTop(); // undefined → coerced to false
+    await expect(c).resolves.toBe(false);
+  });
+
+  it('confirm presents a centered surface', () => {
+    void confirm({ title: 'Hi' });
+    expect(getSnapshot()[0]?.presentation.placement).toBe('center');
+  });
+
+  it('prompt resolves the entered string, or null when dismissed without one', async () => {
+    const p = prompt({ title: 'Name?' });
+    requestDismiss(topId(), 'Ada');
+    await expect(p).resolves.toBe('Ada');
+
+    const cancelled = prompt({ title: 'Name?' });
+    dismissTop(); // undefined → coerced to null
+    await expect(cancelled).resolves.toBeNull();
+  });
+});

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -55,6 +55,16 @@ export interface BottomSheetRef {
 
 export interface BottomSheetProps {
     children: React.ReactNode;
+    /**
+     * Controlled open state. When provided, the sheet mounts already-open if
+     * `true` (seeding its internal visible/rendered state) instead of relying on
+     * an imperative `present()` after mount. This is what makes a responsive
+     * `Dialog` survive a placement swap (centered card ↔ bottom sheet on resize):
+     * the freshly-mounted sheet is visible on its first commit, with no
+     * present()-in-effect race that would otherwise leave it blank. Omit for the
+     * purely imperative `present()`/`dismiss()` API.
+     */
+    open?: boolean;
     onDismiss?: () => void;
     enablePanDownToClose?: boolean;
     backgroundComponent?: (props: { style?: StyleProp<ViewStyle> }) => React.ReactElement | null;
@@ -128,6 +138,19 @@ export interface BottomSheetProps {
      * `showHandle` is `true`.
      */
     handleComponent?: () => React.ReactNode;
+    /**
+     * External shared value the internal scroll handler mirrors the content
+     * offset into (in addition to its own gesture-gating offset). Lets a host —
+     * e.g. a Dialog nav-header — drive a collapse from the sheet's OWN scroller
+     * without owning the ScrollView. Optional; the standalone sheet ignores it.
+     */
+    scrollY?: SharedValue<number>;
+    /**
+     * Overlay slot rendered absolutely at the TOP of the sheet card, painted
+     * above the scrolling body (clipped to the sheet's rounded top). Used by the
+     * Dialog to float its sticky nav header over the sheet's scroll content.
+     */
+    headerOverlay?: React.ReactNode;
 }
 
 /**
@@ -169,6 +192,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
     const {
         Shell,
         children,
+        open,
         onDismiss,
         enablePanDownToClose = true,
         backgroundComponent,
@@ -183,14 +207,19 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
         manualActivation = false,
         dynamicBackdrop = false,
         handleComponent,
+        scrollY: externalScrollY,
+        headerOverlay,
     } = props;
 
     const insets = useSafeAreaInsets();
     const theme = useTheme();
     const { colors } = theme;
     const { height: screenHeight } = useScreenDimensions();
-    const [visible, setVisible] = useState(false);
-    const [rendered, setRendered] = useState(false); // keep mounted for exit animation
+    // Seed from the controlled `open` prop so a sheet that should be open is
+    // visible on its FIRST commit (no present()-in-effect race) — this is what
+    // lets a responsive Dialog survive a resize placement swap without going blank.
+    const [visible, setVisible] = useState(() => open ?? false);
+    const [rendered, setRendered] = useState(() => open ?? false); // keep mounted for exit animation
     const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
     const hasClosedRef = useRef(false);
     const scrollViewRef = useRef<Animated.ScrollView>(null);
@@ -266,6 +295,12 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
     useEffect(() => {
         renderedRef.current = rendered;
     }, [rendered]);
+    // Mirror `visible` so the unmount cleanup can tell "closing" (visible=false,
+    // animating out) from "fully open" (visible=true) at teardown time.
+    const visibleRef = useRef(visible);
+    useEffect(() => {
+        visibleRef.current = visible;
+    }, [visible]);
 
     /**
      * Commit a close. Two guards prevent stale callbacks from firing:
@@ -325,18 +360,24 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
     }, [visible, rendered, finishClose, screenHeight, closeGeneration, opacity, translateY]);
 
     // On unmount: ensure pending close callbacks (e.g. consumer's `onDismiss`)
-    // still fire if the BS is yanked mid-animation by a parent re-render.
-    // Without this, `Dialog`'s `handleDismiss` never runs and queued
-    // callbacks (post-close handlers) are silently lost.
-    // Only fires when the sheet was actually rendered (open or closing) to
-    // avoid spuriously calling onDismiss on bare unmount of a never-opened
-    // sheet. Refs are read inside the cleanup, so latest values are captured.
+    // still fire if the BS is yanked mid-animation by a parent re-render while a
+    // close is IN PROGRESS. Without this, `Dialog`'s `handleDismiss` never runs
+    // and queued callbacks (post-close handlers) are silently lost.
+    //
+    // Guarded on `!visibleRef.current`: only flush when a close was already
+    // underway (visible=false → closing/animating out). A sheet yanked while
+    // still FULLY OPEN (visible=true) is not closing — it is being swapped out by
+    // a parent, e.g. a responsive `Dialog` crossing its breakpoint between the
+    // bottom-sheet and centered-card branches. Firing onDismiss there would
+    // wrongly dismiss the surface mid-swap (there are no pending close callbacks
+    // to flush anyway), so the new branch can take over still-open. Refs are read
+    // inside the cleanup, so the latest values are captured.
     useEffect(() => () => {
         if (closeTimeoutRef.current) {
             clearTimeout(closeTimeoutRef.current);
             closeTimeoutRef.current = null;
         }
-        if (renderedRef.current && !hasClosedRef.current) {
+        if (renderedRef.current && !hasClosedRef.current && !visibleRef.current) {
             hasClosedRef.current = true;
             safeCloseRef.current();
         }
@@ -639,8 +680,12 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
         onScroll: (event) => {
             scrollOffsetY.value = event.contentOffset.y;
             isScrollAtTop.value = event.contentOffset.y <= 0;
+            // Mirror into the host's collapse offset (a Dialog nav header) when
+            // provided. Listed in deps so the RN-Web (no worklets plugin) handler
+            // re-binds if the shared value identity changes.
+            if (externalScrollY) externalScrollY.value = event.contentOffset.y;
         },
-    }, []);
+    }, [externalScrollY]);
 
     const dynamicStyles = useMemo(() => {
         return StyleSheet.create({
@@ -741,6 +786,10 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                         {handleSlot}
 
                         {bodyContent}
+
+                        {/* Sticky nav-header overlay (Dialog nav-header mode): floats
+                            above the scroll body, clipped to the sheet's rounded top. */}
+                        {headerOverlay}
                     </Animated.View>
                 </GestureDetector>
             </View>

package/src/combobox/Combobox.tsx

@@ -12,7 +12,7 @@ import { useTheme } from '../theme/use-theme';
 import { useControllableState } from '../hooks/useControllableState';
 import { Text } from '../typography';
 import { Item } from '../item';
-import { SearchInput } from '../search-input';
+import { Search } from '../search';
 import { borderRadius, fontSize, space } from '../styles/tokens';
 import {
   ChevronTopBottom_Stroke2_Corner0_Rounded as ChevronUpDownIcon,
@@ -55,7 +55,7 @@ function defaultFilter<T>(option: ComboboxOption<T>, query: string): boolean {
  * `.web` resolution. The combobox logic is single-source.
  *
  * `Combobox` is a filterable autocomplete select that delegates its overlay to
- * Bloom's `Popover` and composes `SearchInput` + `Item`. The trigger + panel
+ * Bloom's `Popover` and composes `Search` + `Item`. The trigger + panel
  * read the overlay control from `Popover` context (via an inner component) so
  * selecting an option reliably closes the overlay on every platform.
  */
@@ -153,7 +153,7 @@ export function createCombobox(PopoverImpl: PopoverModule) {
 
         <PopoverImpl.PopoverContent label={accessibleLabel} placement="bottom-start" minWidth={240}>
           <View style={styles.searchWrap}>
-            <SearchInput
+            <Search
               ref={searchRef}
               label={label ?? 'Search'}
               value={query}

package/src/command/Command.tsx

@@ -12,7 +12,7 @@ import { useControllableState } from '../hooks/useControllableState';
 import { Text } from '../typography';
 import { Item } from '../item';
 import { Kbd } from '../kbd';
-import { SearchInput } from '../search-input';
+import { Search } from '../search';
 import { fontSize, space } from '../styles/tokens';
 import type { DialogProps } from '../dialog';
 import { useDialogControl } from '../dialog/context';
@@ -46,7 +46,7 @@ interface FlatEntry {
  * relies on implicit `.web` resolution. The body is single-source.
  *
  * `Command` is a ⌘K command palette built on `<Dialog placement="center">`,
- * `SearchInput`, an `Item` results list and `Kbd` shortcut hints. Items group
+ * `Search`, an `Item` results list and `Kbd` shortcut hints. Items group
  * by their `group` field (ungrouped first). On web the list is
  * keyboard-navigable (Up/Down/Enter); on native, tap to select.
  *
@@ -231,7 +231,7 @@ export function createCommand(Dialog: DialogComponent) {
       testID={testID}>
       <View {...webKeyHandler}>
         <View style={[styles.searchWrap, { borderBottomColor: theme.colors.borderLight }]}>
-          <SearchInput
+          <Search
             ref={searchRef}
             label={placeholder}
             placeholder={placeholder}