@multiplatform.one/forms 7.80.0 → 7.81.1

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

@@ -4,8 +4,8 @@
  * so only inside another overlay, so a sheet never stacks on a sheet.
  */
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { act, render } from "@testing-library/react";
-import { PlusIcon, XIcon } from "@phosphor-icons/react";
+import { act } from "@testing-library/react";
+import { PlusIcon } from "@phosphor-icons/react";
 import { useState, type ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Text, XStack, YStack, getTokens, getVariableValue } from "tamagui";
@@ -462,7 +462,7 @@ describe("FloatingPanel native menu face panelWidth (LC-112, FZ-8438 r3)", () =>
   });
 });
 
-function EchoMenu({ kind }: { kind: "close" | "menu" }) {
+function CoverMenu() {
   const [open, setOpen] = useState(false);
   return (
     <FloatingPanel
@@ -471,7 +471,7 @@ function EchoMenu({ kind }: { kind: "close" | "menu" }) {
       compactFace="menu"
       anchorMode="cover-trigger"
       triggerEcho={false}
-      iconEcho={kind}
+      iconCover
       coverAlign="auto"
       triggerSizing="content"
       contentPadding="none"
@@ -483,67 +483,92 @@ function EchoMenu({ kind }: { kind: "close" | "menu" }) {
   );
 }
 
-const iconEcho = () =>
-  document.querySelector<HTMLElement>('[data-testid="floating-panel-icon-echo"]');
-const iconBand = () =>
-  document.querySelector<HTMLElement>('[data-testid="floating-panel-icon-echo-band"]');
-const glyphPath = (node: Element | null) => node?.querySelector("svg path")?.getAttribute("d");
+const clip = () =>
+  document.querySelector<HTMLElement>('[data-testid="floating-panel-menu-clip"]') as HTMLElement;
+
+/** The live prop a component took: RN-web drops the ones it has no DOM use for. */
+function propOf<T>(node: Element, name: string): T | undefined {
+  const key = Object.keys(node).find((candidate) => candidate.startsWith("__reactFiber$"));
+  let fiber = (node as unknown as Record<string, FiberLike | undefined>)[key ?? ""];
+  while (fiber) {
+    const value = fiber.memoizedProps?.[name];
+    if (value !== undefined) return value as T;
+    fiber = fiber.return;
+  }
+  return undefined;
+}
+type FiberLike = { memoizedProps?: Record<string, unknown>; return?: FiberLike };
+
+function settleMenu() {
+  layout(menu() as HTMLElement, MENU_MIN_WIDTH, 180);
+  act(() => {
+    vi.advanceTimersByTime(1000);
+  });
+}
 
-describe("LC-112 icon trigger echo on native (FZ-8480, rv_2607879d3bdaf9bf)", () => {
-  it("draws the + again as an X in the button's own box, at the menu's top trailing corner", () => {
+describe("LC-112 icon trigger cover on native (FZ-8665, reversing Round 37's X)", () => {
+  it("covers the + from the button's top trailing corner and repeats nothing", () => {
     trigger = { x: 330, y: 60, width: 44, height: 44 };
-    const result = renderWithProviders(<EchoMenu kind="close" />);
+    const result = renderWithProviders(<CoverMenu />);
     tap(result.getAllByRole("button", { name: "Add node" })[0]!);
     const panel = menu() as HTMLElement;
     layout(panel, MENU_MIN_WIDTH, 180);
     expect(panel.style.top).toBe(`${trigger.y}px`);
     expect(panel.style.left).toBe(`${trigger.x + trigger.width - MENU_MIN_WIDTH}px`);
-    const band = iconBand() as HTMLElement;
-    expect(band.style.height).toBe("44px");
-    const box = band.firstElementChild as HTMLElement;
-    expect(box.style.width).toBe("44px");
-    expect(box.style.height).toBe("44px");
-    // The box sits where the trigger is: its start offset is the trigger's x
-    // less the menu's left edge.
-    expect(box.style.marginInlineStart || box.style.marginLeft).toBe(
-      `${trigger.x - (trigger.x + trigger.width - MENU_MIN_WIDTH)}px`,
-    );
-    const echoButton = iconEcho() as HTMLElement;
-    expect(echoButton.getAttribute("aria-label")).toBe("Close");
-    const x = render(<XIcon weight="bold" />);
-    expect(glyphPath(echoButton)).toBe(glyphPath(x.container));
-    x.unmount();
     expect(echo()).toBeNull();
+    expect(document.querySelector('[data-testid="floating-panel-icon-echo"]')).toBeNull();
+    expect(document.querySelector('[data-testid="floating-panel-icon-echo-band"]')).toBeNull();
   });
 
-  it("closes the menu when the echo is pressed", () => {
+  it("starts the rows at the panel's top edge: the scroll view is the panel's only child", () => {
     trigger = { x: 330, y: 60, width: 44, height: 44 };
-    const result = renderWithProviders(<EchoMenu kind="close" />);
+    const result = renderWithProviders(<CoverMenu />);
     tap(result.getAllByRole("button", { name: "Add node" })[0]!);
     layout(menu() as HTMLElement, MENU_MIN_WIDTH, 180);
-    act(() => {
-      vi.advanceTimersByTime(1000);
-    });
-    tap(iconEcho() as HTMLElement);
+    expect(clip().children).toHaveLength(1);
+    expect(clip().textContent).toBe("Add a node");
+  });
+
+  it("closes from the backdrop, which a screen reader reads as Close", () => {
+    trigger = { x: 330, y: 60, width: 44, height: 44 };
+    const result = renderWithProviders(<CoverMenu />);
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    settleMenu();
+    tap(result.getByRole("button", { name: "Close" }));
+    expect(menu()).toBeNull();
+  });
+
+  it("closes from VoiceOver's escape gesture", () => {
+    trigger = { x: 330, y: 60, width: 44, height: 44 };
+    const result = renderWithProviders(<CoverMenu />);
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    settleMenu();
+    const escape = propOf<() => void>(frame() as HTMLElement, "onAccessibilityEscape");
+    expect(escape).toBeTypeOf("function");
+    act(() => escape?.());
     expect(menu()).toBeNull();
   });
 
-  it("turns a menu trigger into an X too, and opens up from the button's bottom edge near the bottom", () => {
+  it("is modal to VoiceOver, holding only its backdrop Close and the panel", () => {
+    trigger = { x: 330, y: 60, width: 44, height: 44 };
+    const result = renderWithProviders(<CoverMenu />);
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    settleMenu();
+    const layer = document.querySelector<HTMLElement>('[data-testid="floating-panel-menu-layer"]');
+    expect(layer).not.toBeNull();
+    expect(propOf<boolean>(layer as HTMLElement, "accessibilityViewIsModal")).toBe(true);
+    expect(layer?.contains(result.getByRole("button", { name: "Close" }))).toBe(true);
+    expect(layer?.contains(menu())).toBe(true);
+  });
+
+  it("still covers its button when it opens up from the bottom edge", () => {
     trigger = { x: 20, y: 760, width: 44, height: 44 };
-    const result = renderWithProviders(<EchoMenu kind="menu" />);
-    const live = result.getAllByRole("button", { name: "Add node" })[0]!;
-    tap(live);
+    const result = renderWithProviders(<CoverMenu />);
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
     const panel = menu() as HTMLElement;
     layout(panel, MENU_MIN_WIDTH, 300);
     expect(parseFloat(panel.style.top) + 300).toBe(trigger.y + trigger.height);
-    const surface = frame() as HTMLElement;
-    const band = iconBand() as HTMLElement;
-    const clip = surface.querySelector('[data-testid="floating-panel-menu-clip"]') as HTMLElement;
-    expect(clip.lastElementChild).toBe(band);
-    const x = render(<XIcon weight="bold" />);
-    expect(glyphPath(iconEcho())).toBe(glyphPath(x.container));
-    x.unmount();
-    expect(glyphPath(iconEcho())).not.toBe(glyphPath(live));
+    expect(clip().children).toHaveLength(1);
   });
 });
 
@@ -554,11 +579,11 @@ const capsuleSurface = (plate: IconButtonGroupPlate): IconButtonGroupSurface =>
 describe("LC-112 grouped glass capsule on native (FZ-8550, Round 37 second pass)", () => {
   const plate = { x: 200, y: 50, width: 174, height: 44, radius: 22 };
 
-  it("covers the whole capsule from context at its radius; only the pressed trigger shows, as its X", () => {
+  it("covers the whole capsule from context at its radius, showing none of its buttons", () => {
     trigger = { x: 330, y: 50, width: 44, height: 44 };
     const result = renderWithProviders(
       <IconButtonGroupSurfaceContext.Provider value={capsuleSurface(plate)}>
-        <EchoMenu kind="menu" />
+        <CoverMenu />
       </IconButtonGroupSurfaceContext.Provider>,
     );
     tap(result.getAllByRole("button", { name: "Add node" })[0]!);
@@ -572,18 +597,8 @@ describe("LC-112 grouped glass capsule on native (FZ-8550, Round 37 second pass)
     expect(left + MENU_MIN_WIDTH).toBeGreaterThanOrEqual(plate.x + plate.width);
     expect(left).toBe(plate.x + plate.width - MENU_MIN_WIDTH);
     expect(corners(frame() as HTMLElement)).toEqual(radiusAtoms(plate.radius));
-    // The band is the capsule's height; the X keeps the trigger's own box.
-    const band = iconBand() as HTMLElement;
-    expect(band.style.height).toBe(`${plate.height}px`);
-    const box = band.firstElementChild as HTMLElement;
-    expect(box.style.width).toBe(`${trigger.width}px`);
-    expect(box.style.marginInlineStart || box.style.marginLeft).toBe(`${trigger.x - left}px`);
-    // Only the pressed trigger shows, as an X; nothing else of the group.
-    const echoes = document.querySelectorAll('[data-testid="floating-panel-icon-echo"]');
-    expect(echoes).toHaveLength(1);
-    const x = render(<XIcon weight="bold" />);
-    expect(glyphPath(echoes[0] as Element)).toBe(glyphPath(x.container));
-    x.unmount();
+    expect(clip().children).toHaveLength(1);
+    expect(clip().textContent).toBe("Add a node");
   });
 
   it("takes the capsule's width as its floor when the capsule is wider than the menu", () => {
@@ -591,7 +606,7 @@ describe("LC-112 grouped glass capsule on native (FZ-8550, Round 37 second pass)
     trigger = { x: 330, y: 50, width: 44, height: 44 };
     const result = renderWithProviders(
       <IconButtonGroupSurfaceContext.Provider value={capsuleSurface(wide)}>
-        <EchoMenu kind="menu" />
+        <CoverMenu />
       </IconButtonGroupSurfaceContext.Provider>,
     );
     tap(result.getAllByRole("button", { name: "Add node" })[0]!);
@@ -612,7 +627,7 @@ describe("LC-112 grouped glass capsule on native (FZ-8550, Round 37 second pass)
           },
         }}
       >
-        <EchoMenu kind="menu" />
+        <CoverMenu />
       </IconButtonGroupSurfaceContext.Provider>,
     );
     tap(result.getAllByRole("button", { name: "Add node" })[0]!);
@@ -626,20 +641,14 @@ describe("LC-112 grouped glass capsule on native (FZ-8550, Round 37 second pass)
 
   it("covers a 32pt avatar at its 44pt target, so its centre is the row-icon column (FZ-8480)", () => {
     trigger = { x: 100, y: 56, width: 32, height: 32 };
-    const result = renderWithProviders(<EchoMenu kind="menu" />);
+    const result = renderWithProviders(<CoverMenu />);
     tap(result.getAllByRole("button", { name: "Add node" })[0]!);
     const panel = menu() as HTMLElement;
     layout(panel, MENU_MIN_WIDTH, 180);
     const inset = (MIN_PRESS_TARGET - trigger.width) / 2;
     expect(panel.style.left).toBe(`${trigger.x - inset}px`);
     expect(panel.style.top).toBe(`${trigger.y - inset}px`);
-    const band = iconBand() as HTMLElement;
-    expect(band.style.height).toBe(`${MIN_PRESS_TARGET}px`);
-    const box = band.firstElementChild as HTMLElement;
-    expect(box.style.width).toBe(`${trigger.width}px`);
-    expect(box.style.marginTop).toBe(`${inset}px`);
-    expect(box.style.marginInlineStart || box.style.marginLeft).toBe(`${inset}px`);
-    // The X's centre sits half a press target in: where a row's leading
+    // The avatar's centre sits half a press target in: where a row's leading
     // glyph centres (row inset plus half its 18pt slot, on the frame border).
     expect(inset + trigger.width / 2).toBe(MIN_PRESS_TARGET / 2);
   });

package/src/FloatingPanel/FloatingPanel.seamlessCover.spec.tsx

@@ -212,6 +212,18 @@ describe("LC-112 icon trigger: the menu opens on its button (rv_d86cc201997dffd4
     expect(within(panel).queryByRole("button", { name: "Appearance" })).toBeNull();
   });
 
+  it("lands on a whole pixel when its button sits on a half pixel, so rows reach the far edge (FZ-8557)", async () => {
+    const button = { x: 16.5, y: 12, width: 40, height: 40 };
+    measure(button, 124.6);
+    const result = renderWithProviders(<IconPanel />);
+    fireEvent.click(result.getByRole("button", { name: "Appearance" }), { detail: 0 });
+    const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+    await waitFor(() => expect(panel.style.top).toBe(`${button.y}px`));
+    const left = parseFloat(panel.style.left);
+    expect(Number.isInteger(left)).toBe(true);
+    expect(Math.abs(left - button.x)).toBeLessThanOrEqual(0.5);
+  });
+
   it("slides up over its button near the bottom edge instead of opening a sheet", async () => {
     const button = { x: 16, y: window.innerHeight - 60, width: 44, height: 44 };
     measure(button, 200);

package/src/FloatingPanel/PanelHeader.tsx

@@ -1,22 +1,14 @@
 import { XStack, type XStackProps } from "tamagui";
-import { usePanelIconEchoBox } from "./echoContext";
 
-/**
- * A floating panel's header row (LC-112, FZ-8480 Round 37). Over an
- * icon-trigger panel whose X shares the header's row, it takes the X's
- * height and centres its content on the X's line, keeping clear of the X;
- * anywhere else it is the panel's padded top row.
- */
+/** A floating panel's title row: the panel's padded top row (LC-112). */
 export function PanelHeader({ children, ...rest }: XStackProps) {
-  const echo = usePanelIconEchoBox();
   return (
     <XStack
       alignItems="center"
       gap="$2"
-      paddingLeft={echo?.left || "$4"}
-      paddingRight={echo?.right || "$4"}
-      paddingTop={echo ? 0 : "$4"}
-      {...(echo ? { minHeight: echo.height } : undefined)}
+      paddingLeft="$4"
+      paddingRight="$4"
+      paddingTop="$4"
       data-fp-panel-header=""
       {...rest}
     >

package/src/FloatingPanel/coverRect.ts

@@ -5,8 +5,8 @@ import type { TriggerRect } from "./pointAnchor";
  * The 44pt box an icon trigger is pressed in, centred on the trigger
  * (LC-176). A trigger drawn smaller than its target (a 32pt avatar) is
  * covered at its target, so the panel's row-icon column, which centres on
- * a 44pt start inset, runs through the trigger's centre and the X drawn on
- * it (FZ-8480 GAP). A trigger at least that big is its own box.
+ * a 44pt start inset, runs through the trigger's centre (FZ-8480 GAP). A
+ * trigger at least that big is its own box.
  */
 export function pressTargetRect(trigger: TriggerRect, min = MIN_PRESS_TARGET): TriggerRect {
   const width = Math.max(trigger.width, min);
@@ -27,16 +27,3 @@ export function pressTargetRect(trigger: TriggerRect, min = MIN_PRESS_TARGET): T
 export function iconCoverRect(trigger: TriggerRect, group: TriggerRect | null): TriggerRect {
   return group ?? pressTargetRect(trigger);
 }
-
-/**
- * Where the trigger sits inside the surface its panel covers: the X box's
- * offset from the cover's top, and the band's height. Null when the cover is
- * the trigger itself.
- */
-export function echoInCover(
-  trigger: TriggerRect,
-  cover: TriggerRect,
-): { top: number; height: number } | null {
-  if (cover.y === trigger.y && cover.height === trigger.height) return null;
-  return { top: trigger.y - cover.y, height: cover.height };
-}

package/src/FloatingPanel/echoContext.ts

@@ -22,46 +22,12 @@ export function usePanelTriggerRadiusReporter(): ((radius: number) => void) | nu
 }
 
 /**
- * The X a panel lays over its content's header row (LC-112, FZ-8480 Round
- * 37): its height, and how far the header keeps clear of it on each side.
- * A panel header sits on the X's line and never runs under it.
+ * True inside a panel's sheet face (a phone's bottom sheet, web or native). A
+ * sheet isn't laid over its trigger, so LC-112's echo row has nothing to
+ * cover: a picker titles the sheet instead, per HIG (FZ-8557, Round 40).
  */
-export interface PanelIconEchoBox {
-  height: number;
-  left: number;
-  right: number;
-}
-
-export const PanelIconEchoBoxContext = createContext<PanelIconEchoBox | null>(null);
-
-export function usePanelIconEchoBox(): PanelIconEchoBox | null {
-  return useContext(PanelIconEchoBoxContext);
-}
-
-/**
- * The header's clearance around an X `offset` in from the panel's start edge:
- * the X's side keeps clear of it, the other side keeps none of its own.
- */
-export function echoHeaderBox({
-  offset,
-  width,
-  height,
-  panelWidth,
-  rtl = false,
-}: {
-  offset: number;
-  width: number;
-  height: number;
-  panelWidth: number;
-  rtl?: boolean;
-}): PanelIconEchoBox {
-  const atStart = offset + width / 2 < panelWidth / 2;
-  const start = atStart ? Math.max(0, offset + width) : 0;
-  const end = atStart ? 0 : Math.max(0, panelWidth - offset);
-  return { height, left: rtl ? end : start, right: rtl ? start : end };
-}
+export const PanelSheetContext = createContext(false);
 
-export function sameEchoBox(a: PanelIconEchoBox | null, b: PanelIconEchoBox | null): boolean {
-  if (a == null || b == null) return a === b;
-  return a.height === b.height && a.left === b.left && a.right === b.right;
+export function useInPanelSheet(): boolean {
+  return useContext(PanelSheetContext);
 }