@multiplatform.one/forms 7.70.0 → 7.72.0

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

@@ -7,9 +7,12 @@ 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, XStack, YStack } from "tamagui";
+import { Text, XStack, YStack, getTokens, getVariableValue } from "tamagui";
+import { Button } from "../Button";
+import { Input as InputParts } from "../InputParts";
 import { OverlayStackProvider } from "../shared/overlayStack";
 import { MENU_MIN_WIDTH, type CompactFace } from "./compactFace";
+import type { PanelWidth } from "./panelWidth";
 import { FloatingPanel } from "./index.native";
 import { panelViewportPadding } from "./useFloatingPanel";
 
@@ -49,13 +52,22 @@ afterEach(() => {
   vi.useRealTimers();
 });
 
-function Menu({ face, attach = false }: { face?: CompactFace; attach?: boolean }) {
+function Menu({
+  face,
+  attach = false,
+  width,
+}: {
+  face?: CompactFace;
+  attach?: boolean;
+  width?: PanelWidth;
+}) {
   const [open, setOpen] = useState(false);
   return (
     <FloatingPanel
       open={open}
       onOpenChange={setOpen}
       compactFace={face}
+      {...(width === undefined ? null : { panelWidth: width })}
       {...(attach ? { anchorMode: "attach" as const, triggerEcho: false } : null)}
       triggerSizing="content"
       contentPadding="none"
@@ -207,6 +219,134 @@ describe("FloatingPanel native menu face (FZ-7830)", () => {
   });
 });
 
+function IconMenu() {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      compactFace="menu"
+      anchorMode="cover-trigger"
+      triggerEcho={false}
+      coverAlign="auto"
+      triggerSizing="content"
+      contentPadding="none"
+      trigger={<Text>◐</Text>}
+      triggerA11y={{ label: "Appearance" }}
+    >
+      <Text>System</Text>
+    </FloatingPanel>
+  );
+}
+
+function ButtonMenu() {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      compactFace="menu"
+      contentPadding="none"
+      trigger={<Button data-testid="pill">Status: All</Button>}
+      triggerA11y={{ label: "Filter status" }}
+    >
+      <Text>Open</Text>
+    </FloatingPanel>
+  );
+}
+
+function FieldMenu() {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      compactFace="menu"
+      contentPadding="none"
+      trigger={
+        <InputParts>
+          <InputParts.Box data-testid="field-box">
+            <Text>United States</Text>
+          </InputParts.Box>
+        </InputParts>
+      }
+      triggerA11y={{ label: "Country" }}
+    >
+      <Text>Canada</Text>
+    </FloatingPanel>
+  );
+}
+
+const frame = () =>
+  document.querySelector<HTMLElement>('[data-testid="floating-panel-menu-surface"]');
+const corners = (el: Element) =>
+  Array.from(el.classList)
+    .filter((c) => /^_b[tb][lr]r-/.test(c))
+    .sort();
+const radiusAtoms = (px: number) =>
+  [`_bblr-${px}px`, `_bbrr-${px}px`, `_btlr-${px}px`, `_btrr-${px}px`].sort();
+
+describe("LC-112 seamless cover on native (FZ-8438)", () => {
+  it("opens an icon trigger's menu ON the button from its top trailing corner (rv_d86cc201997dffd4)", () => {
+    trigger = { x: 330, y: 60, width: 44, height: 44 };
+    const result = renderWithProviders(<IconMenu />);
+    tap(result.getByRole("button", { name: "Appearance" }));
+    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`);
+    expect(echo()).toBeNull();
+    expect(sheet()).toBeNull();
+    expect(corners(frame() as HTMLElement)).toEqual(radiusAtoms(22));
+  });
+
+  it("keeps the shadow on an unclipped frame and clips inside it (FZ-8414)", () => {
+    const result = renderWithProviders(<IconMenu />);
+    tap(result.getByRole("button", { name: "Appearance" }));
+    const outer = frame() as HTMLElement;
+    expect(outer.className).not.toMatch(/(?:^| )_ox-hidden|_ov-hidden|_o-hidden/);
+    expect(getComputedStyle(outer).overflow).not.toBe("hidden");
+    const inner = outer.firstElementChild as HTMLElement;
+    expect(inner.className).toMatch(/hidden/);
+  });
+
+  it("echoes a field with no border or fill of its own and repeats the field's arc", () => {
+    trigger = { x: 20, y: 240, width: 300, height: 44 };
+    const result = renderWithProviders(<FieldMenu />);
+    const live = result.getByTestId("field-box");
+    const atom = corners(live).find((c) => c.startsWith("_btlr-")) as string;
+    expect(atom).toBeTruthy();
+    const token = atom.match(/^_btlr-t-radius-(.+)$/);
+    const drawn = token
+      ? Number(getVariableValue((getTokens().radius as Record<string, unknown>)[`$${token[1]}`]))
+      : Number(atom.match(/^_btlr-([\d.]+)px$/)?.[1]);
+    tap(result.getByRole("button", { name: "Country" }));
+    const row = echo() as HTMLElement;
+    expect(row).not.toBeNull();
+    const box = row.querySelector('[data-testid="field-box"]') as HTMLElement;
+    expect(box.className).toMatch(/_bbc-transparent/);
+    expect(box.className).toMatch(/_bg-transparent/);
+    expect(live.className).not.toMatch(/_bbc-transparent/);
+    expect(corners(frame() as HTMLElement)).toEqual(radiusAtoms(Math.min(drawn, 22)));
+  });
+
+  it("echoes a labelled Button trigger with no border or fill of its own", () => {
+    trigger = { x: 20, y: 240, width: 140, height: 44 };
+    const result = renderWithProviders(<ButtonMenu />);
+    const live = result.getByTestId("pill");
+    tap(result.getByRole("button", { name: "Filter status" }));
+    const row = echo() as HTMLElement;
+    expect(row).not.toBeNull();
+    // The echo is the trigger's own box at the start edge, not the menu's width.
+    expect(row.style.width).toBe("140px");
+    expect(row.style.alignSelf).toBe("flex-start");
+    const pill = row.querySelector('[data-testid="pill"]') as HTMLElement;
+    expect(pill.className).toMatch(/_bbc-transparent|_btc-transparent/);
+    expect(pill.className).toMatch(/_bg-transparent/);
+    expect(live.className).not.toBe(pill.className);
+  });
+});
+
 /** The SHC account menu's shape: an avatar-sized trigger over rows that fill their width. */
 function AccountMenu() {
   const [open, setOpen] = useState(false);
@@ -263,3 +403,54 @@ describe("FloatingPanel native menu face width (FZ-8220)", () => {
     expect(menu()?.style.minWidth).toBe("320px");
   });
 });
+
+describe("FloatingPanel native menu face panelWidth (LC-112, FZ-8438 r3)", () => {
+  const room = 390 - 2 * panelViewportPadding;
+  const open = (width?: PanelWidth) => {
+    const result = renderWithProviders(<Menu face="menu" width={width} />);
+    tap(result.getByRole("button", { name: "Stack actions" }));
+    return menu() as HTMLElement;
+  };
+
+  it('"content" is the default: the 250pt pull-down floor, up to the room', () => {
+    const panel = open();
+    expect(panel.style.minWidth).toBe(`${MENU_MIN_WIDTH}px`);
+    expect(panel.style.maxWidth).toBe(`${room}px`);
+    expect(panel.style.width).toBe("");
+  });
+
+  it('"trigger" is exactly the trigger\'s width', () => {
+    const panel = open("trigger");
+    expect([panel.style.minWidth, panel.style.width, panel.style.maxWidth]).toEqual([
+      "120px",
+      "120px",
+      "120px",
+    ]);
+  });
+
+  it('"screen" from a trigger in the gutter spans the gutters, start edge on the trigger\'s', () => {
+    const panel = open("screen");
+    const gutters = 390 - 2 * trigger.x;
+    expect(panel.style.width).toBe(`${gutters}px`);
+    layout(panel, gutters, 180);
+    expect(panel.style.left).toBe(`${trigger.x}px`);
+    expect(panel.style.top).toBe(`${trigger.y}px`);
+  });
+
+  it('"screen" from a trigger deep in the row fills the room, top edge on the trigger\'s', () => {
+    trigger = { x: 186, y: 240, width: 120, height: 44 };
+    const panel = open("screen");
+    expect(panel.style.width).toBe(`${room}px`);
+    layout(panel, room, 180);
+    expect(panel.style.left).toBe(`${panelViewportPadding}px`);
+    expect(panel.style.top).toBe(`${trigger.y}px`);
+  });
+
+  it("a number is a fixed width, capped at the room", () => {
+    expect(open(300).style.width).toBe("300px");
+  });
+
+  it("a number wider than the room stops at the margins", () => {
+    expect(open(900).style.width).toBe(`${room}px`);
+  });
+});

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

@@ -0,0 +1,237 @@
+/**
+ * LC-112 seamless cover (FZ-8438, Clay's rv_a07d4308a6c445b6 and
+ * rv_0ea65e640a0ef261 notes; rv_d86cc201997dffd4 for icon triggers). An open
+ * panel is ONE surface laid exactly over its trigger: same top edge, left
+ * edge and corner arc, the trigger's content echoed in place with no border,
+ * fill or divider of its own, drawn above the trigger.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { fireEvent, waitFor, within } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { Button } from "../Button";
+import { FloatingPanel } from "./index";
+
+type Rect = { x: number; y: number; width: number; height: number };
+
+function measure(trigger: Rect, panelWidth = 240) {
+  const original = HTMLElement.prototype.getBoundingClientRect;
+  const rect = {
+    ...trigger,
+    top: trigger.y,
+    left: trigger.x,
+    right: trigger.x + trigger.width,
+    bottom: trigger.y + trigger.height,
+    toJSON: () => ({}),
+  };
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: HTMLElement) {
+      if (this.hasAttribute("data-fp-reference") || this.dataset.testid === "field") return rect;
+      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") ? 160 : 0;
+    },
+  );
+}
+
+/** A field the way a browser paints it: border, fill and a 10px arc. */
+function Field({ radius }: { radius: number }) {
+  return (
+    <div
+      data-testid="field"
+      role="combobox"
+      aria-expanded={false}
+      tabIndex={0}
+      style={{
+        borderTopLeftRadius: `${radius}px`,
+        borderRadius: `${radius}px`,
+        border: "1px solid rgb(200, 200, 200)",
+        borderBottom: "1px solid rgb(200, 200, 200)",
+        backgroundColor: "rgb(250, 250, 250)",
+        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
+      }}
+    >
+      Mar 5, 2026
+    </div>
+  );
+}
+
+function FieldPanel({ radius = 10 }: { radius?: number }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      contentPadding="none"
+      trigger={<Field radius={radius} />}
+    >
+      <Text>March 2026</Text>
+    </FloatingPanel>
+  );
+}
+
+function IconPanel({ align = "auto" }: { align?: "start" | "auto" }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      anchorMode="cover-trigger"
+      triggerEcho={false}
+      coverAlign={align}
+      widthMode="fit-content"
+      triggerSizing="content"
+      trigger={<Button aria-label="Appearance">◐</Button>}
+    >
+      <Text>System</Text>
+    </FloatingPanel>
+  );
+}
+
+const corners = (el: Element) =>
+  Array.from(el.classList)
+    .filter((c) => /^_b[tb][lr]r-/.test(c))
+    .sort();
+
+const radiusAtoms = (px: number) =>
+  [`_bblr-${px}px`, `_bbrr-${px}px`, `_btlr-${px}px`, `_btrr-${px}px`].sort();
+
+async function openField(result: ReturnType<typeof renderWithProviders>) {
+  fireEvent.click(result.getByTestId("field"), { detail: 0 });
+  const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
+  return panel;
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("LC-112 seamless cover: one surface over the field (FZ-8438)", () => {
+  const field = { x: 16, y: 42, width: 400, height: 40 };
+
+  it("lays the panel's top and start edges on the field's", async () => {
+    measure(field);
+    const result = renderWithProviders(<FieldPanel />);
+    const panel = await openField(result);
+    await waitFor(() => expect(panel.style.top).toBe(`${field.y}px`));
+    expect(panel.style.left).toBe(`${field.x}px`);
+    const echo = panel.querySelector<HTMLElement>("[data-fp-trigger-row]");
+    expect(echo?.style.width).toBe(`${field.width}px`);
+    expect(echo?.style.height).toBe(`${field.height}px`);
+  });
+
+  it("draws the field's own arc at all four corners", async () => {
+    measure(field);
+    const result = renderWithProviders(<FieldPanel radius={10} />);
+    const panel = await openField(result);
+    await waitFor(() => expect(corners(panel)).toEqual(radiusAtoms(10)));
+  });
+
+  it("keeps the field's arc past the container cap (full preset, 20px on a 40px field)", async () => {
+    measure(field);
+    const result = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <FieldPanel radius={50} />
+      </Preset>,
+    );
+    const panel = await openField(result);
+    await waitFor(() => expect(corners(panel)).toEqual(radiusAtoms(20)));
+  });
+
+  it("echoes the field with no border, fill, shadow or divider of its own", async () => {
+    measure(field);
+    const result = renderWithProviders(<FieldPanel />);
+    const panel = await openField(result);
+    const frame = await waitFor(() => {
+      const found = panel.querySelector<HTMLElement>("[data-fp-echo-frame]");
+      expect(found).not.toBeNull();
+      return found as HTMLElement;
+    });
+    expect(frame.textContent).toBe("Mar 5, 2026");
+    expect(frame.style.getPropertyValue("border-color")).toBe("transparent");
+    expect(frame.style.getPropertyPriority("border-color")).toBe("important");
+    expect(frame.style.getPropertyValue("background-color")).toBe("transparent");
+    expect(frame.style.getPropertyValue("box-shadow")).toBe("none");
+    const bottom = getComputedStyle(frame).borderBottomColor;
+    expect(["transparent", "rgba(0, 0, 0, 0)"]).toContain(bottom);
+    // Layout keeps the field's widths, so the echoed text sits where it did.
+    expect(getComputedStyle(frame).borderBottomWidth).toBe("1px");
+    const row = panel.querySelector<HTMLElement>("[data-fp-trigger-row]") as HTMLElement;
+    expect(row.style.backgroundColor).toBe(getComputedStyle(panel).backgroundColor);
+    // The live field keeps its chrome; only the echo drops it.
+    expect(result.getByTestId("field").style.backgroundColor).toBe("rgb(250, 250, 250)");
+  });
+
+  it("draws above the field: a fixed, stacked layer later in the document", async () => {
+    measure(field);
+    const result = renderWithProviders(<FieldPanel />);
+    const panel = await openField(result);
+    await waitFor(() => expect(panel.style.top).toBe(`${field.y}px`));
+    expect(panel.style.position).toBe("fixed");
+    expect(Number(panel.style.zIndex)).toBeGreaterThan(0);
+    const live = result.getByTestId("field");
+    expect(live.compareDocumentPosition(panel) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(live.contains(panel)).toBe(false);
+  });
+});
+
+describe("LC-112 icon trigger: the menu opens on its button (rv_d86cc201997dffd4)", () => {
+  it("opens from the button's top trailing corner at the end edge, with no echo row", async () => {
+    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+    const button = { x: viewportWidth - 16 - 44, y: 12, width: 44, height: 44 };
+    measure(button, 200);
+    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`));
+    expect(panel.style.left).toBe(`${button.x + button.width - 200}px`);
+    expect(panel.style.transformOrigin).toBe("top right");
+    expect(panel.querySelector("[data-fp-trigger-row]")).toBeNull();
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+  });
+
+  it("opens from the button's top leading corner where that fits", async () => {
+    const button = { x: 16, y: 12, width: 44, height: 44 };
+    measure(button, 200);
+    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`));
+    expect(panel.style.left).toBe(`${button.x}px`);
+    expect(panel.style.transformOrigin).toBe("top left");
+    expect(within(panel).queryByRole("button", { name: "Appearance" })).toBeNull();
+  });
+
+  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);
+    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.visibility).toBe("visible"));
+    const top = parseFloat(panel.style.top);
+    expect(top).toBeLessThan(button.y);
+    expect(top + 160).toBeGreaterThanOrEqual(button.y + button.height);
+    expect(panel.style.left).toBe(`${button.x}px`);
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+  });
+
+  it("never end-aligns a custom first row (triggerEcho off, coverAlign start): it collides to the sheet", async () => {
+    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+    const button = { x: viewportWidth - 16 - 44, y: 12, width: 44, height: 44 };
+    measure(button, 200);
+    const result = renderWithProviders(<IconPanel align="start" />);
+    fireEvent.click(result.getByRole("button", { name: "Appearance" }), { detail: 0 });
+    expect(await result.findByTestId("floating-panel-sheet")).toBeTruthy();
+  });
+});

package/src/FloatingPanel/echoContext.ts

@@ -0,0 +1,22 @@
+import { createContext, useContext } from "react";
+
+/**
+ * LC-112 seamless cover (FZ-8438): true while a field is drawn as the echo row
+ * of the panel covering it. The field keeps its geometry and drops its own
+ * border, fill and shadow, so the panel's edge and surface are the only ones.
+ */
+export const PanelEchoContext = createContext(false);
+
+export function useInPanelEcho(): boolean {
+  return useContext(PanelEchoContext);
+}
+
+/**
+ * Native has no computed style to read, so a trigger's frame reports the
+ * radius it draws and a covering panel repeats it at all four corners.
+ */
+export const PanelTriggerRadiusContext = createContext<((radius: number) => void) | null>(null);
+
+export function usePanelTriggerRadiusReporter(): ((radius: number) => void) | null {
+  return useContext(PanelTriggerRadiusContext);
+}