Fix stacked provider settings sheets

packages/app/src/components/ui/combobox.tsx

@@ -95,6 +95,7 @@ export interface ComboboxProps {
    */
   header?: SheetHeader;
   mobileChildrenScrollEnabled?: boolean;
+  presentation?: "push" | "replace";
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   desktopPlacement?: "top-start" | "bottom-start";
@@ -965,6 +966,7 @@ interface MobileBodyProps {
   searchable: boolean;
   hasChildren: boolean;
   mobileChildrenScrollEnabled: boolean;
+  presentation?: "push" | "replace";
   searchResetKey: number;
   searchPlaceholder: string;
   searchQuery: string;
@@ -1024,6 +1026,7 @@ function MobileComboboxBody(props: MobileBodyProps): ReactElement {
       handleIndicatorStyle={props.handleIndicatorStyle}
       keyboardBehavior="extend"
       keyboardBlurBehavior="none"
+      presentation={props.presentation}
     >
       {props.header ? (
         <SheetHeaderView header={props.header} onClose={props.onClose} />
@@ -1248,6 +1251,7 @@ export function Combobox({
   title = "Select",
   header,
   mobileChildrenScrollEnabled = true,
+  presentation,
   open,
   onOpenChange,
   desktopPlacement = "top-start",
@@ -1534,6 +1538,7 @@ export function Combobox({
         searchable={searchable}
         hasChildren={hasChildren}
         mobileChildrenScrollEnabled={mobileChildrenScrollEnabled}
+        presentation={presentation}
         searchResetKey={searchResetKey}
         searchPlaceholder={effectiveSearchPlaceholder}
         searchQuery={searchQuery}

packages/app/src/components/ui/isolated-bottom-sheet-modal/index.test.tsx

@@ -0,0 +1,76 @@
+/**
+ * @vitest-environment jsdom
+ */
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@gorhom/portal", () => ({
+  Portal: ({ children, hostName }: { children?: React.ReactNode; hostName?: string }) =>
+    React.createElement("div", { "data-portal-host": hostName }, children),
+  PortalHost: ({ name }: { name?: string }) => React.createElement("div", { "data-host": name }),
+}));
+
+vi.mock("@gorhom/bottom-sheet", () => ({
+  BottomSheetModalProvider: ({ children }: { children?: React.ReactNode }) =>
+    React.createElement("div", { "data-bottom-sheet-provider": true }, children),
+  BottomSheetModal: React.forwardRef(
+    (
+      {
+        children,
+        stackBehavior,
+      }: {
+        children?: React.ReactNode;
+        stackBehavior?: string;
+      },
+      _ref,
+    ) => React.createElement("div", { "data-stack-behavior": stackBehavior }, children),
+  ),
+}));
+
+import { IsolatedBottomSheetModal } from ".";
+
+describe("IsolatedBottomSheetModal presentation", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  it("defaults sibling top-level sheets to push instead of replacing by React ancestry", () => {
+    act(() => {
+      root.render(
+        <>
+          <IsolatedBottomSheetModal>Settings</IsolatedBottomSheetModal>
+          <IsolatedBottomSheetModal>Diagnostic</IsolatedBottomSheetModal>
+        </>,
+      );
+    });
+
+    expect(
+      Array.from(container.querySelectorAll("[data-stack-behavior]")).map((node) =>
+        node.getAttribute("data-stack-behavior"),
+      ),
+    ).toEqual(["push", "push"]);
+  });
+
+  it("only replaces when the callsite asks for replacement", () => {
+    act(() => {
+      root.render(
+        <IsolatedBottomSheetModal presentation="replace">Selector</IsolatedBottomSheetModal>,
+      );
+    });
+
+    expect(
+      container.querySelector("[data-stack-behavior]")?.getAttribute("data-stack-behavior"),
+    ).toBe("replace");
+  });
+});

packages/app/src/components/ui/isolated-bottom-sheet-modal/index.tsx

@@ -1,10 +1,8 @@
 import {
   BottomSheetModal as GorhomBottomSheetModal,
-  BottomSheetModalProvider,
   type BottomSheetModalProps,
 } from "@gorhom/bottom-sheet";
-import { Portal } from "@gorhom/portal";
-import React, { createContext, useContext } from "react";
+import React from "react";
 import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
 import type { ElementRef } from "react";
 import {
@@ -17,50 +15,29 @@ type GorhomBottomSheetModalMethods = ElementRef<typeof GorhomBottomSheetModal>;
 type IsolatedBottomSheetModalProps = Omit<
   BottomSheetModalProps,
   "enableDismissOnClose" | "stackBehavior"
->;
+> & {
+  presentation?: "push" | "replace";
+};
 
 export type IsolatedBottomSheetModalRef = GorhomBottomSheetModalMethods;
 
-const IsolatedBottomSheetScopeContext = createContext(false);
-
 export const IsolatedBottomSheetModal = forwardRef<
   IsolatedBottomSheetModalRef,
   IsolatedBottomSheetModalProps
 >(function IsolatedBottomSheetModal(props, ref) {
-  const isNestedSheet = useContext(IsolatedBottomSheetScopeContext);
-  const { children, ...bottomSheetProps } = props;
-  const scopedChildren =
-    typeof children === "function" ? (
-      (input: { data?: unknown }) => (
-        <IsolatedBottomSheetScopeContext.Provider value={true}>
-          {children(input) as React.ReactNode}
-        </IsolatedBottomSheetScopeContext.Provider>
-      )
-    ) : (
-      <IsolatedBottomSheetScopeContext.Provider value={true}>
-        {children}
-      </IsolatedBottomSheetScopeContext.Provider>
-    );
+  const { children, presentation = "push", ...bottomSheetProps } = props;
   const modal = (
     <GorhomBottomSheetModal
       {...bottomSheetProps}
       ref={ref}
       enableDismissOnClose
-      stackBehavior={isNestedSheet ? "push" : "replace"}
+      stackBehavior={presentation}
     >
-      {scopedChildren}
+      {children}
     </GorhomBottomSheetModal>
   );
 
-  if (isNestedSheet) {
-    return modal;
-  }
-
-  return (
-    <Portal hostName="root">
-      <BottomSheetModalProvider>{modal}</BottomSheetModalProvider>
-    </Portal>
-  );
+  return modal;
 });
 
 export function useIsolatedBottomSheetVisibility({

packages/app/src/components/ui/isolated-bottom-sheet-modal/visibility-tracker.test.ts

@@ -70,17 +70,17 @@ describe("bottom sheet visibility tracker", () => {
     expect(sheet.events).toEqual([]);
   });
 
-  it("only reports a user close when the sheet was visible", () => {
+  it("does not treat index -1 as a close because stacked sheets can be hidden without dismissing", () => {
     const { sheet, tracker, closeCount } = setup();
     tracker.attachController(sheet);
     tracker.syncDesired({ visible: true });
 
     tracker.handleSheetIndexChange(-1);
-    expect(closeCount()).toBe(1);
+    expect(closeCount()).toBe(0);
 
     tracker.syncDesired({ visible: false });
     tracker.handleSheetIndexChange(-1);
-    expect(closeCount()).toBe(1);
+    expect(closeCount()).toBe(0);
   });
 
   it("reports a dismiss while visible as a close request", () => {
@@ -93,7 +93,7 @@ describe("bottom sheet visibility tracker", () => {
     expect(closeCount()).toBe(1);
   });
 
-  it("deduplicates close notifications from change and dismiss callbacks", () => {
+  it("reports close once when a hidden sheet is actually dismissed", () => {
     const { sheet, tracker, closeCount } = setup();
     tracker.attachController(sheet);
     tracker.syncDesired({ visible: true });
@@ -110,12 +110,14 @@ describe("bottom sheet visibility tracker", () => {
     tracker.syncDesired({ visible: true });
 
     tracker.handleSheetIndexChange(-1);
+    tracker.handleSheetDismiss();
     expect(closeCount()).toBe(1);
 
     tracker.syncDesired({ visible: false });
     tracker.syncDesired({ visible: true });
 
     tracker.handleSheetIndexChange(-1);
+    tracker.handleSheetDismiss();
     expect(closeCount()).toBe(2);
   });
 
@@ -128,7 +130,7 @@ describe("bottom sheet visibility tracker", () => {
     tracker.attachController(null);
     tracker.attachController(sheet);
 
-    expect(closeCount()).toBe(1);
+    expect(closeCount()).toBe(0);
     expect(sheet.events).toEqual([{ type: "present" }]);
   });
 

packages/app/src/components/ui/isolated-bottom-sheet-modal/visibility-tracker.ts

@@ -69,7 +69,7 @@ export function createBottomSheetVisibilityTracker(opts: {
     },
     handleSheetIndexChange(index) {
       if (index !== -1) {
-        if (phase === "presenting") {
+        if (phase === "presenting" || phase === "dismissing") {
           phase = "presented";
         }
         return;
@@ -77,9 +77,6 @@ export function createBottomSheetVisibilityTracker(opts: {
       if (phase === "presenting" || phase === "presented") {
         phase = "dismissing";
       }
-      if (visible) {
-        notifyClose();
-      }
     },
     handleSheetDismiss() {
       if (visible) {