@multiplatform.one/forms 7.56.0 → 7.58.0

package/src/FloatingPanel/FloatingPanel.compactFace.spec.tsx

@@ -0,0 +1,187 @@
+/**
+ * FZ-7830: on a phone-width web a menu opened inside another overlay opens
+ * over its trigger, never as a second bottom sheet; at page level it keeps the
+ * sheet. Inside an overlay a collision slides the menu back on screen instead
+ * of taking LC-139's collision sheet.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useState } from "react";
+import { Button } from "../Button";
+import { OverlayStackProvider } from "../shared/overlayStack";
+import type { CompactFace } from "./compactFace";
+import { FloatingPanel } from "./index";
+import { panelViewportPadding } from "./useFloatingPanel";
+
+const phone = { width: 390, height: 844 };
+const triggerBounds = {
+  x: 20,
+  y: 240,
+  top: 240,
+  bottom: 284,
+  left: 20,
+  right: 140,
+  width: 120,
+  height: 44,
+};
+
+let originalWidth = 0;
+let originalHeight = 0;
+beforeEach(() => {
+  originalWidth = window.innerWidth;
+  originalHeight = window.innerHeight;
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: phone.width,
+  });
+  Object.defineProperty(window, "innerHeight", {
+    configurable: true,
+    writable: true,
+    value: phone.height,
+  });
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: originalWidth,
+  });
+  Object.defineProperty(window, "innerHeight", {
+    configurable: true,
+    writable: true,
+    value: originalHeight,
+  });
+});
+
+function measure(bounds = triggerBounds, panelWidth = 200, panelHeight = 180) {
+  const original = HTMLElement.prototype.getBoundingClientRect;
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: HTMLElement) {
+      if (this.hasAttribute("data-fp-reference")) return { ...bounds, toJSON: () => ({}) };
+      return original.call(this);
+    },
+  );
+  vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(
+    function (this: HTMLElement) {
+      return this.hasAttribute("data-fp-panel") ? panelWidth : 0;
+    },
+  );
+  vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockImplementation(
+    function (this: HTMLElement) {
+      return this.hasAttribute("data-fp-panel") ? panelHeight : 0;
+    },
+  );
+}
+
+function Menu({ face }: { face?: CompactFace }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      compactFace={face}
+      triggerSizing="content"
+      trigger={<Button aria-label="Stack actions">⋯</Button>}
+    >
+      <Button>Stop</Button>
+      <Button>Restart</Button>
+    </FloatingPanel>
+  );
+}
+
+/** What a SheetModal, Dialog or AdaptivePopup puts around its content. */
+function InSheet({ children }: { children: React.ReactNode }) {
+  return <OverlayStackProvider zIndex={100_000}>{children}</OverlayStackProvider>;
+}
+
+function open(result: ReturnType<typeof renderWithProviders>) {
+  fireEvent.click(result.getByRole("button", { name: "Stack actions" }), { detail: 0 });
+}
+
+describe("FloatingPanel compactFace on a 390pt web viewport (FZ-7830)", () => {
+  it("keeps the bottom sheet at page level for the auto face", async () => {
+    measure();
+    const result = renderWithProviders(<Menu face="auto" />);
+    open(result);
+    await result.findByTestId("floating-panel-sheet");
+    expect(result.queryByTestId("floating-panel-viewport")).toBeNull();
+  });
+
+  it("opens over the trigger inside an overlay for the auto face, never a second sheet", async () => {
+    measure();
+    const result = renderWithProviders(
+      <InSheet>
+        <Menu face="auto" />
+      </InSheet>,
+    );
+    open(result);
+    const panel = await result.findByTestId("floating-panel-viewport");
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+    await waitFor(() => expect(panel.style.top).toBe("240px"));
+    expect(panel.style.left).toBe("20px");
+  });
+
+  it("opens over the trigger at page level for the menu face", async () => {
+    measure();
+    const result = renderWithProviders(<Menu face="menu" />);
+    open(result);
+    const panel = await result.findByTestId("floating-panel-viewport");
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+    await waitFor(() => expect(panel.style.top).toBe("240px"));
+  });
+
+  it("leaves a panel without a face as a sheet, even inside an overlay", async () => {
+    measure();
+    const result = renderWithProviders(
+      <InSheet>
+        <Menu />
+      </InSheet>,
+    );
+    open(result);
+    await result.findByTestId("floating-panel-sheet");
+    expect(result.queryByTestId("floating-panel-viewport")).toBeNull();
+  });
+
+  it("slides a trailing ⋯ menu back inside the end edge instead of taking a collision sheet", async () => {
+    measure({ ...triggerBounds, x: 330, left: 330, right: 374, width: 44 });
+    const result = renderWithProviders(
+      <InSheet>
+        <Menu face="auto" />
+      </InSheet>,
+    );
+    open(result);
+    const panel = await result.findByTestId("floating-panel-viewport");
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+    await waitFor(() => expect(parseFloat(panel.style.left)).toBeLessThan(330));
+    expect(parseFloat(panel.style.left) + 200).toBeLessThanOrEqual(
+      phone.width - panelViewportPadding,
+    );
+    expect(panel.style.top).toBe("240px");
+  });
+
+  it("slides up from the bottom edge instead of taking a collision sheet", async () => {
+    measure({ ...triggerBounds, y: 800, top: 800, bottom: 844 });
+    const result = renderWithProviders(
+      <InSheet>
+        <Menu face="auto" />
+      </InSheet>,
+    );
+    open(result);
+    const panel = await result.findByTestId("floating-panel-viewport");
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+    await waitFor(() => expect(parseFloat(panel.style.top)).toBeLessThan(800));
+    expect(parseFloat(panel.style.top) + 180).toBeLessThanOrEqual(
+      phone.height - panelViewportPadding,
+    );
+  });
+
+  it("still takes LC-139's collision sheet at page level", async () => {
+    measure({ ...triggerBounds, y: 800, top: 800, bottom: 844 });
+    const result = renderWithProviders(<Menu face="menu" />);
+    open(result);
+    await result.findByTestId("floating-panel-sheet");
+  });
+});

package/src/FloatingPanel/FloatingPanel.menuFace.native.spec.tsx

@@ -0,0 +1,183 @@
+/**
+ * FZ-7830: on native a menu-faced FloatingPanel opens over its trigger (LC-112,
+ * the UIMenu pull-down) instead of as a bottom sheet, and an `auto` panel does
+ * so only inside another overlay, so a sheet never stacks on a sheet.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act } from "@testing-library/react";
+import { useState, type ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { OverlayStackProvider } from "../shared/overlayStack";
+import type { CompactFace } from "./compactFace";
+import { FloatingPanel } from "./index.native";
+import { panelViewportPadding } from "./useFloatingPanel";
+
+vi.mock("react-native-web", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-native")>();
+  return {
+    ...actual,
+    ActionSheetIOS: undefined,
+    Modal: ({ children, visible }: { children: ReactNode; visible: boolean }) =>
+      visible ? children : null,
+    useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }),
+  };
+});
+
+let trigger = { x: 20, y: 240, width: 120, height: 44 };
+beforeEach(() => {
+  vi.useFakeTimers();
+  trigger = { x: 20, y: 240, width: 120, height: 44 };
+  // RN-web's measureInWindow reads the node's client rect on a timer.
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(() => ({
+    x: trigger.x,
+    y: trigger.y,
+    left: trigger.x,
+    top: trigger.y,
+    width: trigger.width,
+    height: trigger.height,
+    right: trigger.x + trigger.width,
+    bottom: trigger.y + trigger.height,
+    toJSON: () => ({}),
+  }));
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+});
+
+function Menu({ face }: { face?: CompactFace }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      compactFace={face}
+      triggerSizing="content"
+      contentPadding="none"
+      trigger={<Text>Stack actions</Text>}
+      triggerA11y={{ label: "Stack actions" }}
+    >
+      <Text>Stop</Text>
+      <Text>Restart</Text>
+    </FloatingPanel>
+  );
+}
+
+/** What a native SheetModal's OverlayWindow puts around its content. */
+function InSheet({ children }: { children: ReactNode }) {
+  return <OverlayStackProvider zIndex={100_000}>{children}</OverlayStackProvider>;
+}
+
+function tap(target: Element) {
+  act(() => {
+    target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("click", { bubbles: true, button: 0 }));
+  });
+  // measureInWindow answers on the next tick.
+  act(() => {
+    vi.advanceTimersByTime(1);
+  });
+}
+
+/** RN-web parks onLayout on the node for a ResizeObserver happy-dom never fires. */
+function layout(node: Element, width: number, height: number) {
+  const onLayout = (node as unknown as { __reactLayoutHandler?: (event: unknown) => void })
+    .__reactLayoutHandler;
+  expect(onLayout).toBeTypeOf("function");
+  act(() => {
+    onLayout?.({ nativeEvent: { layout: { x: 0, y: 0, width, height } } });
+  });
+}
+
+const menu = () => document.querySelector<HTMLElement>('[data-testid="floating-panel-menu"]');
+const sheet = () => document.querySelector('[data-testid="floating-panel-sheet"]');
+const echo = () => document.querySelector('[data-testid="floating-panel-menu-echo"]');
+
+describe("FloatingPanel native menu face (FZ-7830)", () => {
+  it("opens the menu face over the trigger at page level, never a sheet", () => {
+    const result = renderWithProviders(<Menu face="menu" />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    const panel = menu();
+    expect(panel).not.toBeNull();
+    expect(sheet()).toBeNull();
+    expect(panel?.style.opacity).toBe("0");
+    layout(panel as HTMLElement, 200, 180);
+    expect(panel?.style.left).toBe("20px");
+    expect(panel?.style.top).toBe("240px");
+    expect(panel?.style.opacity).toBe("1");
+  });
+
+  it("repeats the trigger as the first row, in the trigger's own box", () => {
+    const result = renderWithProviders(<Menu face="menu" />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    const row = echo() as HTMLElement;
+    expect(row).not.toBeNull();
+    expect(row.textContent).toBe("Stack actions");
+    expect(row.style.height).toBe("44px");
+    expect(row.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("closes when the repeated trigger row is pressed", () => {
+    const result = renderWithProviders(<Menu face="menu" />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    tap(echo() as HTMLElement);
+    expect(menu()).toBeNull();
+  });
+
+  it("slides a trailing ⋯ menu back inside the padded window", () => {
+    trigger = { x: 330, y: 240, width: 44, height: 44 };
+    const result = renderWithProviders(<Menu face="menu" />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    const panel = menu() as HTMLElement;
+    layout(panel, 200, 180);
+    expect(panel.style.left).toBe(`${390 - panelViewportPadding - 200}px`);
+    expect(panel.style.top).toBe("240px");
+  });
+
+  it("slides up from the bottom edge instead of running under it", () => {
+    trigger = { x: 20, y: 800, width: 120, height: 44 };
+    const result = renderWithProviders(<Menu face="menu" />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    const panel = menu() as HTMLElement;
+    layout(panel, 200, 180);
+    const top = parseFloat(panel.style.top);
+    expect(top + 180).toBeLessThanOrEqual(844 - panelViewportPadding);
+    expect(top).toBeLessThan(800);
+  });
+
+  it("keeps the sheet at page level for the auto face", () => {
+    const result = renderWithProviders(<Menu face="auto" />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    expect(sheet()).not.toBeNull();
+    expect(menu()).toBeNull();
+  });
+
+  it("opens the auto face over the trigger inside another overlay, never a second sheet", () => {
+    const result = renderWithProviders(
+      <InSheet>
+        <Menu face="auto" />
+      </InSheet>,
+    );
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    expect(sheet()).toBeNull();
+    const panel = menu() as HTMLElement;
+    layout(panel, 200, 180);
+    expect(panel.style.top).toBe("240px");
+  });
+
+  it("leaves a panel without a face as a sheet, even inside an overlay", () => {
+    const result = renderWithProviders(
+      <InSheet>
+        <Menu />
+      </InSheet>,
+    );
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    expect(sheet()).not.toBeNull();
+    expect(menu()).toBeNull();
+  });
+});

package/src/FloatingPanel/compactFace.spec.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { pickerCompactFace, resolveCompactFace, SHORT_LIST_MAX } from "./compactFace";
+
+describe("resolveCompactFace (FZ-7830)", () => {
+  it("keeps the sheet by default, at page level and inside an overlay", () => {
+    expect(resolveCompactFace(undefined, false)).toBe("sheet");
+    expect(resolveCompactFace(undefined, true)).toBe("sheet");
+    expect(resolveCompactFace("sheet", true)).toBe("sheet");
+  });
+
+  it("opens a menu everywhere for the menu face", () => {
+    expect(resolveCompactFace("menu", false)).toBe("menu");
+    expect(resolveCompactFace("menu", true)).toBe("menu");
+  });
+
+  it("opens a menu only inside another overlay for the auto face", () => {
+    expect(resolveCompactFace("auto", false)).toBe("sheet");
+    expect(resolveCompactFace("auto", true)).toBe("menu");
+  });
+});
+
+describe("pickerCompactFace (FZ-7830)", () => {
+  it("opens a short list as a menu at every level", () => {
+    expect(SHORT_LIST_MAX).toBe(7);
+    expect(pickerCompactFace(1)).toBe("menu");
+    expect(pickerCompactFace(7)).toBe("menu");
+    expect(resolveCompactFace(pickerCompactFace(7), false)).toBe("menu");
+  });
+
+  it("keeps a long list's sheet at page level and opens it as a menu inside an overlay", () => {
+    expect(pickerCompactFace(8)).toBe("auto");
+    expect(resolveCompactFace(pickerCompactFace(8), false)).toBe("sheet");
+    expect(resolveCompactFace(pickerCompactFace(8), true)).toBe("menu");
+  });
+
+  it("keeps a searchable list's sheet at page level, however short", () => {
+    expect(pickerCompactFace(3, true)).toBe("auto");
+    expect(resolveCompactFace(pickerCompactFace(3, true), false)).toBe("sheet");
+  });
+});

package/src/FloatingPanel/compactFace.ts

@@ -0,0 +1,32 @@
+/**
+ * What a FloatingPanel becomes where it would otherwise be a bottom sheet:
+ * on native, and on the web at or below OVERLAY_BREAKPOINT.
+ *
+ * - `"sheet"`: the bottom sheet, wherever it opens.
+ * - `"menu"`: a menu over its trigger (LC-112) wherever it opens.
+ * - `"auto"`: the sheet at page level, the menu inside another overlay. A
+ *   sheet over a sheet is the one thing a phone must never show (FZ-7830).
+ */
+export type CompactFace = "sheet" | "menu" | "auto";
+
+export function resolveCompactFace(
+  face: CompactFace | undefined,
+  insideOverlay: boolean,
+): "sheet" | "menu" {
+  if (face === "menu") return "menu";
+  if (face === "auto") return insideOverlay ? "menu" : "sheet";
+  return "sheet";
+}
+
+/** The longest list a picker opens as a menu over its trigger (FZ-7830). */
+export const SHORT_LIST_MAX = 7;
+
+/**
+ * A picker's face (FZ-7830, LC-112): a short list with no search opens as a
+ * menu over its trigger at every level, the iOS 14+ pull-down picker. A long or
+ * searchable list keeps the sheet at page level and opens as a scrolling menu
+ * inside another overlay.
+ */
+export function pickerCompactFace(optionCount: number, searchable = false): CompactFace {
+  return !searchable && optionCount <= SHORT_LIST_MAX ? "menu" : "auto";
+}

package/src/FloatingPanel/index.native.tsx

@@ -44,6 +44,13 @@
  * - Opening a Modal under the same finger can synthesize a backdrop press;
  *   backdrop dismiss is armed a short delay after the present begins.
  *
+ * Menu face (`compactFace`, FZ-7830): instead of the sheet, a menu opens
+ * over the trigger (LC-112), its top start corner on the trigger's, the
+ * trigger echoed as its first row, sliding back inside the safe area where it
+ * would run off screen. DropdownMenu always opens this way (a UIMenu
+ * pull-down); Select opens this way for a short list, and for any list inside
+ * another overlay, so a sheet never stacks on a sheet.
+ *
  * ContextMenu (`openOn="contextmenu"`): long-press opens it. On a window wider
  * than OVERLAY_BREAKPOINT (a tablet) it opens at the long-press point, the
  * same free overlay the web draws at the pointer; a phone keeps the sheet,
@@ -83,12 +90,19 @@ import {
   motionDurationMs,
 } from "@multiplatform.one/theme";
 import { View, YStack } from "tamagui";
-import { useOverlayZIndex } from "../shared/overlayStack";
+import { useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
 import { OverlayWindow } from "../shared/OverlayWindow";
 import { t } from "../shared/t";
 import { useKeyboardInset } from "../shared/useKeyboardInset";
 import type { FloatingPanelProps } from "./index";
-import { placeAtPoint, type PanelBounds, type PanelPoint } from "./pointAnchor";
+import { resolveCompactFace } from "./compactFace";
+import {
+  placeAtPoint,
+  placeOverTrigger,
+  type PanelBounds,
+  type PanelPoint,
+  type TriggerRect,
+} from "./pointAnchor";
 import { panelViewportPadding } from "./useFloatingPanel";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
 
@@ -142,11 +156,18 @@ export function FloatingPanel({
   triggerA11y,
   sheetFill,
   openOn = "press",
+  compactFace,
+  triggerRow,
+  triggerEcho = true,
 }: FloatingPanelProps) {
   // The panel floats over the page: it never inherits a painted ancestor.
   const { knobProps } = useResolvedKnobs({ painted: false });
   const windowZIndex = useOverlayZIndex("sheet");
-  const children = <Surface painted={false}>{panelChildren}</Surface>;
+  const children = (
+    <Surface painted={false} elevated>
+      {panelChildren}
+    </Surface>
+  );
   const slideTransition = knobProps.motion.slide.transition;
   const enterDuration = motionDurationMs(slideTransition);
   const scrimDuration = motionDurationMs(knobProps.motion.scrim.transition);
@@ -181,6 +202,34 @@ export function FloatingPanel({
   );
   const isContextMenu = openOn === "contextmenu";
   const atPoint = isContextMenu && pressPoint !== null && windowWidth > OVERLAY_BREAKPOINT;
+  const insideOverlay = useInsideOverlay();
+  const asMenu = !isContextMenu && resolveCompactFace(compactFace, insideOverlay) === "menu";
+  const triggerRef = useRef<RNView | null>(null);
+  const [anchor, setAnchor] = useState<TriggerRect | null>(null);
+  // The trigger's window rect, read each time the menu opens: it may have
+  // moved (a scrolled sheet) since the last open.
+  useLayoutEffect(() => {
+    if (!asMenu || !open) {
+      setAnchor(null);
+      return;
+    }
+    const node = triggerRef.current as
+      | (RNView & {
+          measureInWindow?: (cb: (x: number, y: number, w: number, h: number) => void) => void;
+        })
+      | null;
+    let live = true;
+    if (typeof node?.measureInWindow === "function") {
+      node.measureInWindow((x, y, width, height) => {
+        if (live) setAnchor({ x, y, width, height });
+      });
+    } else {
+      setAnchor({ x: 0, y: 0, width: 0, height: 0 });
+    }
+    return () => {
+      live = false;
+    };
+  }, [asMenu, open]);
 
   const handleBackdropPress = useCallback(() => {
     if (backdropArmed) close();
@@ -473,6 +522,8 @@ export function FloatingPanel({
   return (
     <>
       <RNView
+        ref={triggerRef}
+        collapsable={false}
         style={{
           flexDirection: "row",
           alignItems: "center",
@@ -526,7 +577,29 @@ export function FloatingPanel({
         }}
       >
         <OverlayWindow zIndex={windowZIndex}>
-          {atPoint && pressPoint ? (
+          {asMenu ? (
+            <TriggerMenuPanel
+              anchor={anchor}
+              bounds={{
+                top: topInset + panelViewportPadding,
+                left: (safeArea?.left ?? 0) + panelViewportPadding,
+                right: windowWidth - (safeArea?.right ?? 0) - panelViewportPadding,
+                bottom:
+                  windowHeight -
+                  Math.max(safeArea?.bottom ?? 0, keyboardInset) -
+                  panelViewportPadding,
+              }}
+              echo={triggerEcho ? (triggerRow ?? trigger) : null}
+              echoLabel={triggerA11y?.label}
+              framePadding={framePadding}
+              frameGap={frameGap}
+              onBackdropPress={handleBackdropPress}
+              onClose={close}
+            >
+              {header}
+              {children}
+            </TriggerMenuPanel>
+          ) : atPoint && pressPoint ? (
             <PointPanel
               key={`${pressPoint.x},${pressPoint.y}`}
               point={pressPoint}
@@ -644,6 +717,100 @@ export function FloatingPanel({
   );
 }
 
+/**
+ * The menu over its trigger (LC-112): measured once per open at its natural
+ * size, then placed on the trigger's window rect. The first row repeats the
+ * trigger in the trigger's own box, and pressing it closes the menu, as the
+ * web echo row does.
+ */
+function TriggerMenuPanel({
+  anchor,
+  bounds,
+  echo,
+  echoLabel,
+  framePadding,
+  frameGap,
+  onBackdropPress,
+  onClose,
+  children,
+}: {
+  anchor: TriggerRect | null;
+  bounds: PanelBounds;
+  echo: ReactNode;
+  echoLabel?: string;
+  framePadding: string;
+  frameGap: string | undefined;
+  onBackdropPress: () => void;
+  onClose: () => void;
+  children: ReactNode;
+}) {
+  const { knobProps } = useResolvedKnobs({ painted: false });
+  const [size, setSize] = useState<{ width: number; height: number } | null>(null);
+  const placement =
+    anchor && size
+      ? placeOverTrigger({
+          trigger: anchor,
+          width: size.width,
+          height: size.height,
+          bounds,
+          rtl: I18nManager.isRTL,
+        })
+      : null;
+  return (
+    <RNView style={StyleSheet.absoluteFill}>
+      <Pressable
+        style={StyleSheet.absoluteFill}
+        onPress={onBackdropPress}
+        accessibilityRole="button"
+        accessibilityLabel={t("Close")}
+      />
+      <RNView
+        testID="floating-panel-menu"
+        onLayout={(e) => {
+          if (size) return;
+          const { width, height } = e.nativeEvent.layout;
+          if (width > 0 && height > 0) setSize({ width, height });
+        }}
+        style={{
+          position: "absolute",
+          left: placement?.left ?? bounds.left,
+          top: placement?.top ?? bounds.top,
+          minWidth: anchor?.width ?? 0,
+          maxWidth: bounds.right - bounds.left,
+          maxHeight: placement?.maxHeight ?? bounds.bottom - bounds.top,
+          opacity: placement ? 1 : 0,
+        }}
+      >
+        <YStack
+          {...knobProps.elevatedSurface}
+          flexShrink={1}
+          minHeight={0}
+          overflow="hidden"
+          onAccessibilityEscape={onClose}
+        >
+          {echo != null && anchor && anchor.height > 0 ? (
+            <Pressable
+              testID="floating-panel-menu-echo"
+              onPress={onClose}
+              accessibilityRole="button"
+              {...(echoLabel ? { accessibilityLabel: echoLabel } : undefined)}
+              aria-expanded
+              style={{ height: anchor.height, minWidth: anchor.width, justifyContent: "center" }}
+            >
+              <RNView pointerEvents="none">{echo}</RNView>
+            </Pressable>
+          ) : null}
+          <RNScrollView style={{ flexGrow: 0, flexShrink: 1 }} keyboardShouldPersistTaps="handled">
+            <YStack padding={framePadding} gap={frameGap}>
+              {children}
+            </YStack>
+          </RNScrollView>
+        </YStack>
+      </RNView>
+    </RNView>
+  );
+}
+
 /**
  * The menu at the long-press point: measured once per open at its natural
  * size, then placed by the same rule as the web pointer menu. Later layouts