@multiplatform.one/forms 7.80.0 → 7.81.0

package/src/FloatingPanel/FloatingPanel.iconEcho.spec.tsx

@@ -1,357 +0,0 @@
-/**
- * LC-112 icon trigger echo (FZ-8480, Clay's rv_2607879d3bdaf9bf): a panel
- * that covers the icon button it opened from draws that button again in its
- * exact spot, same size and plate, as an X (Round 37: every icon trigger,
- * the + and a menu's button alike). It closes the panel and reads "Close".
- */
-import { PlusIcon, XIcon } from "@phosphor-icons/react";
-import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { fireEvent, render, waitFor, within } from "@testing-library/react";
-import { useState } from "react";
-import { MIN_PRESS_TARGET, Surface, useBarSurface } from "@multiplatform.one/theme";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { Text } from "tamagui";
-import { Button } from "../Button";
-import { GLYPH_BOLD_STROKE_UNITS } from "../Button/circleGlyph";
-import { FloatingPanel } from "./index";
-import { usePanelIconEchoBox } from "./echoContext";
-import { PanelHeader } from "./PanelHeader";
-import type { IconEcho } from "./iconEcho";
-
-type Rect = { x: number; y: number; width: number; height: number };
-
-function measure(trigger: Rect, panelWidth = 240, panelHeight = 160, surface?: Rect) {
-  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")) return rect;
-      if (surface && this.hasAttribute("data-fp-cover-surface")) {
-        return {
-          ...surface,
-          top: surface.y,
-          left: surface.x,
-          right: surface.x + surface.width,
-          bottom: surface.y + surface.height,
-          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 EchoBoxProbe() {
-  const box = usePanelIconEchoBox();
-  return box ? (
-    <span
-      data-testid="echo-box"
-      data-height={box.height}
-      data-left={box.left}
-      data-right={box.right}
-    />
-  ) : null;
-}
-
-function AddPanel({ kind = "close", header = false }: { kind?: IconEcho; header?: boolean }) {
-  const [open, setOpen] = useState(false);
-  return (
-    <FloatingPanel
-      open={open}
-      onOpenChange={setOpen}
-      anchorMode="cover-trigger"
-      compactFace="menu"
-      triggerEcho={false}
-      iconEcho={kind}
-      coverAlign="auto"
-      widthMode="fit-content"
-      triggerSizing="content"
-      contentPadding="none"
-      trigger={<Button icon={PlusIcon} aria-label="Add node" />}
-    >
-      {header ? (
-        <PanelHeader>
-          <Text>Add a node</Text>
-          <EchoBoxProbe />
-        </PanelHeader>
-      ) : (
-        <Text>Add a node</Text>
-      )}
-      <Button>Copy</Button>
-    </FloatingPanel>
-  );
-}
-
-/** An account menu opened from a 32pt avatar (no `icon`, so its X is a circle). */
-function AvatarPanel() {
-  return (
-    <FloatingPanel
-      open
-      onOpenChange={() => {}}
-      anchorMode="cover-trigger"
-      compactFace="menu"
-      triggerEcho={false}
-      iconEcho="menu"
-      coverAlign="auto"
-      widthMode="fit-content"
-      triggerSizing="content"
-      contentPadding="none"
-      trigger={
-        <span role="button" aria-label="Account">
-          AD
-        </span>
-      }
-    >
-      <Text>Sign out</Text>
-    </FloatingPanel>
-  );
-}
-
-const glyphPath = (node: Element | null | undefined) =>
-  node?.querySelector("svg path")?.getAttribute("d");
-
-async function open(result: ReturnType<typeof renderWithProviders>) {
-  fireEvent.click(result.getByRole("button", { name: "Add node" }), { detail: 0 });
-  const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
-  await waitFor(() => expect(panel.style.visibility).toBe("visible"));
-  return panel;
-}
-
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-
-describe("LC-112 icon trigger echo on the web (FZ-8480)", () => {
-  const viewportWidth = () => document.documentElement.clientWidth || window.innerWidth;
-
-  it("draws the + again as an X on the button's exact box at the panel's top trailing corner", async () => {
-    const button = { x: viewportWidth() - 16 - 44, y: 12, width: 44, height: 44 };
-    measure(button, 240);
-    const result = renderWithProviders(<AddPanel />);
-    const panel = await open(result);
-    const panelLeft = button.x + button.width - 240;
-    expect(panel.style.top).toBe(`${button.y}px`);
-    expect(panel.style.left).toBe(`${panelLeft}px`);
-    const row = panel.querySelector<HTMLElement>("[data-fp-icon-echo]") as HTMLElement;
-    expect(row.style.order).toBe("-1");
-    expect(row.style.height).toBe(`${button.height}px`);
-    // The X shares the content's first row, like a sheet's close button: it
-    // takes no height of its own.
-    expect(row.getAttribute("data-fp-icon-echo")).toBe("overlay");
-    const borderTop = parseFloat(getComputedStyle(panel).borderTopWidth) || 0;
-    expect(row.style.marginBottom).toBe(`${-(button.height - borderTop)}px`);
-    const box = row.querySelector<HTMLElement>("[data-fp-icon-echo-box]") as HTMLElement;
-    expect(box.style.width).toBe(`${button.width}px`);
-    expect(box.style.height).toBe(`${button.height}px`);
-    expect(box.style.marginLeft).toBe(`${button.x - panelLeft}px`);
-    const echo = within(panel).getByRole("button", { name: "Close" });
-    const x = render(<XIcon weight="bold" />);
-    expect(glyphPath(echo)).toBe(glyphPath(x.container));
-    x.unmount();
-    expect(glyphPath(echo)).not.toBe(glyphPath(result.getByRole("button", { name: "Add node" })));
-    expect(panel.querySelector("[data-fp-trigger-row]")).toBeNull();
-  });
-
-  it("renders the echo on the trigger's bar surface, so it keeps the bar button's plate", async () => {
-    measure({ x: 16, y: 12, width: 44, height: 44 });
-    function BarProbe({ icon: _icon, ...rest }: { icon?: unknown; [key: string]: unknown }) {
-      const bar = useBarSurface();
-      const press = rest.onPress as (() => void) | undefined;
-      return (
-        <button
-          type="button"
-          aria-label={rest["aria-label"] as string}
-          data-bar={String(bar)}
-          onClick={() => press?.()}
-        />
-      );
-    }
-    const result = renderWithProviders(
-      <Surface bar>
-        <FloatingPanel
-          open
-          onOpenChange={() => {}}
-          anchorMode="cover-trigger"
-          compactFace="menu"
-          triggerEcho={false}
-          iconEcho="close"
-          coverAlign="auto"
-          widthMode="fit-content"
-          triggerSizing="content"
-          trigger={<BarProbe icon={PlusIcon} aria-label="Add node" />}
-        >
-          <Text>Add a node</Text>
-        </FloatingPanel>
-      </Surface>,
-    );
-    const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
-    expect(within(panel).getByRole("button", { name: "Close" }).getAttribute("data-bar")).toBe(
-      "true",
-    );
-  });
-
-  it("covers a grouped trigger's whole plate, only the pressed trigger showing as its X", async () => {
-    const button = { x: viewportWidth() - 16 - 44, y: 12, width: 44, height: 44 };
-    const plate = { x: button.x - 100, y: 12, width: 144, height: 44 };
-    measure(button, 120, 160, plate);
-    const result = renderWithProviders(
-      <div data-fp-cover-surface="">
-        <Button icon={PlusIcon} aria-label="Search" />
-        <AddPanel kind="menu" />
-      </div>,
-    );
-    const panel = await open(result);
-    // The plate is wider than the menu, so the menu takes the plate's width
-    // and both edges.
-    expect(panel.style.left).toBe(`${plate.x}px`);
-    expect(panel.style.top).toBe(`${plate.y}px`);
-    const row = panel.querySelector<HTMLElement>("[data-fp-icon-echo]") as HTMLElement;
-    // The band covers the whole plate; the group's other buttons are covered,
-    // not echoed.
-    expect(row.getAttribute("data-fp-icon-echo")).toBe("band");
-    expect(row.style.height).toBe(`${plate.height}px`);
-    expect(row.querySelector("[data-fp-group-echo]")).toBeNull();
-    expect(within(panel).queryByRole("button", { name: "Search" })).toBeNull();
-    const box = row.querySelector<HTMLElement>("[data-fp-icon-echo-box]") as HTMLElement;
-    expect(box.style.marginLeft).toBe(`${button.x - plate.x}px`);
-    expect(within(panel).getByRole("button", { name: "Close" })).toBeTruthy();
-  });
-
-  it("closes the panel when the echo is pressed", async () => {
-    measure({ x: 16, y: 12, width: 44, height: 44 });
-    const result = renderWithProviders(<AddPanel />);
-    const panel = await open(result);
-    fireEvent.click(within(panel).getByRole("button", { name: "Close" }));
-    await waitFor(() => expect(result.queryByTestId("floating-panel-viewport")).toBeNull());
-  });
-
-  it("turns a menu trigger into an X too, in its own band", async () => {
-    measure({ x: 16, y: 12, width: 44, height: 44 });
-    const result = renderWithProviders(<AddPanel kind="menu" />);
-    const panel = await open(result);
-    const echo = within(panel).getByRole("button", { name: "Close" });
-    const x = render(<XIcon weight="bold" />);
-    expect(glyphPath(echo)).toBe(glyphPath(x.container));
-    x.unmount();
-    // A menu's rows run the full width, so its X takes its own band.
-    const row = panel.querySelector<HTMLElement>("[data-fp-icon-echo]") as HTMLElement;
-    expect(row.getAttribute("data-fp-icon-echo")).toBe("band");
-    expect(row.style.marginBottom).toBe("");
-  });
-
-  it("puts a panel header on the X's line, clear of the X", async () => {
-    const button = { x: viewportWidth() - 16 - 44, y: 12, width: 44, height: 44 };
-    measure(button, 240);
-    const result = renderWithProviders(<AddPanel header />);
-    const panel = await open(result);
-    expect(panel.querySelector("[data-fp-panel-header]")).toBeTruthy();
-    const box = await within(panel).findByTestId("echo-box");
-    // The header takes the X's height, and the X sits at the end edge, so it
-    // keeps the X's whole box clear there: from the X's start to the panel's end.
-    const panelLeft = button.x + button.width - 240;
-    expect(box.dataset.height).toBe(`${button.height}`);
-    expect(box.dataset.left).toBe("0");
-    expect(box.dataset.right).toBe(`${240 - (button.x - panelLeft)}`);
-  });
-
-  it("keeps a content-sized trigger on a centring row's line", async () => {
-    measure({ x: 16, y: 12, width: 44, height: 44 });
-    const centred = renderWithProviders(
-      <div style={{ display: "flex", flexDirection: "row", alignItems: "center", height: 60 }}>
-        <AddPanel />
-      </div>,
-    );
-    const inRow = centred.container.querySelector<HTMLElement>(
-      "[data-fp-reference]",
-    ) as HTMLElement;
-    await waitFor(() => expect(getComputedStyle(inRow).alignSelf).not.toBe("flex-start"));
-    centred.unmount();
-    const column = renderWithProviders(
-      <div style={{ display: "flex", flexDirection: "column", alignItems: "stretch" }}>
-        <AddPanel />
-      </div>,
-    );
-    const inColumn = column.container.querySelector<HTMLElement>(
-      "[data-fp-reference]",
-    ) as HTMLElement;
-    expect(getComputedStyle(inColumn).alignSelf).toBe("flex-start");
-  });
-
-  it("comes last in the document, so a keyboard open lands on the content first", async () => {
-    measure({ x: 16, y: 12, width: 44, height: 44 });
-    const result = renderWithProviders(<AddPanel />);
-    const panel = await open(result);
-    const buttons = within(panel).getAllByRole("button");
-    expect(buttons.map((b) => b.textContent || b.getAttribute("aria-label"))).toEqual([
-      "Copy",
-      "Close",
-    ]);
-  });
-
-  it("opens up from the button's bottom edge near the bottom, the echo on the bottom row", async () => {
-    const button = { x: 16, y: window.innerHeight - 60, width: 44, height: 44 };
-    measure(button, 240, 300);
-    const result = renderWithProviders(<AddPanel />);
-    const panel = await open(result);
-    const frame = getComputedStyle(panel);
-    const borders =
-      (parseFloat(frame.borderTopWidth) || 0) + (parseFloat(frame.borderBottomWidth) || 0);
-    expect(parseFloat(panel.style.top) + 300 + borders).toBe(button.y + button.height);
-    expect(panel.style.left).toBe(`${button.x}px`);
-    const row = panel.querySelector<HTMLElement>("[data-fp-icon-echo]") as HTMLElement;
-    expect(row.style.order).toBe("1");
-    expect(panel.style.transformOrigin).toBe("bottom left");
-    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
-  });
-
-  it("strokes the avatar's X to the bar buttons' bold stem (FZ-8480 follow-up)", async () => {
-    measure({ x: 100, y: 12, width: 44, height: 44 });
-    const bar = renderWithProviders(<AddPanel kind="menu" />);
-    const barPanel = await open(bar);
-    const barX = within(barPanel).getByRole("button", { name: "Close" }).querySelector("svg");
-    expect(barX?.getAttribute("stroke-width")).toBe(String(GLYPH_BOLD_STROKE_UNITS));
-    bar.unmount();
-    const result = renderWithProviders(<AvatarPanel />);
-    const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
-    const avatarX = within(panel).getByRole("button", { name: "Close" }).querySelector("svg");
-    expect(avatarX?.getAttribute("stroke-width")).toBe(barX?.getAttribute("stroke-width"));
-    expect(avatarX?.getAttribute("stroke-linejoin")).toBe("round");
-  });
-
-  it("covers a 32pt avatar at its 44pt target, its centre on the row-icon column (FZ-8480 GAP)", async () => {
-    const avatar = { x: 100, y: 18, width: 32, height: 32 };
-    measure(avatar, 240);
-    const result = renderWithProviders(<AvatarPanel />);
-    const panel = (await result.findByTestId("floating-panel-viewport")) as HTMLElement;
-    await waitFor(() => expect(panel.style.visibility).toBe("visible"));
-    const inset = (MIN_PRESS_TARGET - avatar.width) / 2;
-    expect(panel.style.left).toBe(`${avatar.x - inset}px`);
-    expect(panel.style.top).toBe(`${avatar.y - inset}px`);
-    const row = panel.querySelector<HTMLElement>("[data-fp-icon-echo]") as HTMLElement;
-    expect(row.style.height).toBe(`${MIN_PRESS_TARGET}px`);
-    const box = row.querySelector<HTMLElement>("[data-fp-icon-echo-box]") as HTMLElement;
-    expect(box.style.width).toBe(`${avatar.width}px`);
-    expect(box.style.marginLeft).toBe(`${inset}px`);
-    expect(box.style.marginTop).toBe(`${inset}px`);
-    // The X's centre sits half a press target in, the centre of a menu row's
-    // leading glyph slot.
-    expect(inset + avatar.width / 2).toBe(MIN_PRESS_TARGET / 2);
-  });
-});

package/src/FloatingPanel/iconEcho.tsx

@@ -1,124 +0,0 @@
-import { XIcon } from "@phosphor-icons/react";
-import { cloneElement, isValidElement, useState, type ReactElement, type ReactNode } from "react";
-import { SurfaceContext, type SurfaceIntent } from "@multiplatform.one/theme";
-import { useTheme, View } from "tamagui";
-import { boldStroke, ICON_BUTTON_CIRCLE_GLYPH_RATIO } from "../Button/circleGlyph";
-import { t } from "../shared/t";
-
-/**
- * How a panel covering an icon-only trigger shows the pressed button (LC-112,
- * FZ-8480 Round 37): in its exact spot, turned into an X that closes the
- * panel, the way iOS morphs a + into an X. `"close"` lays the X over the
- * content's header row (a panel's title shares the X's line); `"menu"` gives
- * the X its own band above the rows, which run the panel's full width.
- */
-export type IconEcho = "close" | "menu";
-
-export const ICON_ECHO_TEST_ID = "floating-panel-icon-echo";
-
-const DROPPED_PROPS = [
-  "id",
-  "onLongPress",
-  "onKeyDown",
-  "onContextMenu",
-  "aria-haspopup",
-  "aria-expanded",
-  "aria-controls",
-  "aria-describedby",
-  "tooltip",
-] as const;
-
-/**
- * An X sits in the panel's corner over the content's header row, the way a
- * sheet's close button shares the row with its title; a menu's X takes its
- * own band above the rows. A panel that opened upward always gives the echo
- * its own band.
- */
-export function iconEchoOverlays(kind: IconEcho, up: boolean): boolean {
-  return kind === "close" && !up;
-}
-
-/**
- * The pressed trigger drawn again over its panel as an X: the same element
- * with the same size and plate and an X for its glyph, a fresh render that
- * shares none of the consumer's refs. It renders on the trigger's own
- * surface, so a bar button keeps its bar treatment (on iOS its own Liquid
- * Glass circle) inside the panel. Pressing it closes the panel, and it reads
- * "Close". A button (anything with an `icon`) is the control itself; any
- * other trigger (an avatar) becomes an X in a circle of its size.
- */
-export function iconEchoElement(
-  trigger: ReactNode,
-  kind: IconEcho,
-  onClose: () => void,
-  surface?: SurfaceIntent,
-): ReactNode {
-  const echo = echoOf(trigger, kind, onClose);
-  if (echo == null || !surface) return echo;
-  return <SurfaceContext.Provider {...surface}>{echo}</SurfaceContext.Provider>;
-}
-
-function echoOf(trigger: ReactNode, _kind: IconEcho, onClose: () => void): ReactNode {
-  if (!isValidElement(trigger)) return null;
-  const props = trigger.props as { icon?: unknown };
-  const label = t("Close");
-  const dropped = Object.fromEntries(DROPPED_PROPS.map((name) => [name, undefined]));
-  if (props.icon != null) {
-    return cloneElement(trigger as ReactElement<Record<string, unknown>>, {
-      ...dropped,
-      ref: null,
-      icon: XIcon,
-      "aria-label": label,
-      onPress: onClose,
-      testID: ICON_ECHO_TEST_ID,
-      "data-testid": ICON_ECHO_TEST_ID,
-    });
-  }
-  return <CircleClose label={label} onClose={onClose} />;
-}
-
-/** The plate an avatar draws by default, so its X keeps the avatar's circle. */
-const avatarPlate = "$selectedBackground";
-
-/** The X's glyph before the circle has measured itself. */
-const circleGlyphFallbackPx = 18;
-
-/**
- * An X in a circle the size of the trigger it replaces (an avatar), stroked
- * to the bar buttons' bold stem (LC-176), so every X in a bar reads at one
- * weight.
- */
-function CircleClose({ label, onClose }: { label: string; onClose: () => void }) {
-  const theme = useTheme();
-  const [side, setSide] = useState(0);
-  const ink = theme.selectedColor?.val ?? theme.color?.val;
-  return (
-    <View
-      role="button"
-      aria-label={label}
-      tabIndex={0}
-      cursor="pointer"
-      width="100%"
-      height="100%"
-      borderRadius={100000}
-      backgroundColor={avatarPlate}
-      alignItems="center"
-      justifyContent="center"
-      pressStyle={{ opacity: 0.6 }}
-      onPress={onClose}
-      onLayout={(event) =>
-        setSide(Math.min(event.nativeEvent.layout.width, event.nativeEvent.layout.height))
-      }
-      testID={ICON_ECHO_TEST_ID}
-      data-testid={ICON_ECHO_TEST_ID}
-    >
-      <XIcon
-        size={side > 0 ? Math.round(side * ICON_BUTTON_CIRCLE_GLYPH_RATIO) : circleGlyphFallbackPx}
-        weight="bold"
-        color={ink}
-        {...boldStroke("bold", typeof ink === "string" ? ink : undefined)}
-        aria-hidden
-      />
-    </View>
-  );
-}

package/types/FloatingPanel/iconEcho.d.ts

@@ -1,29 +0,0 @@
-import { type ReactNode } from "react";
-import { type SurfaceIntent } from "@multiplatform.one/theme";
-/**
- * How a panel covering an icon-only trigger shows the pressed button (LC-112,
- * FZ-8480 Round 37): in its exact spot, turned into an X that closes the
- * panel, the way iOS morphs a + into an X. `"close"` lays the X over the
- * content's header row (a panel's title shares the X's line); `"menu"` gives
- * the X its own band above the rows, which run the panel's full width.
- */
-export type IconEcho = "close" | "menu";
-export declare const ICON_ECHO_TEST_ID = "floating-panel-icon-echo";
-/**
- * An X sits in the panel's corner over the content's header row, the way a
- * sheet's close button shares the row with its title; a menu's X takes its
- * own band above the rows. A panel that opened upward always gives the echo
- * its own band.
- */
-export declare function iconEchoOverlays(kind: IconEcho, up: boolean): boolean;
-/**
- * The pressed trigger drawn again over its panel as an X: the same element
- * with the same size and plate and an X for its glyph, a fresh render that
- * shares none of the consumer's refs. It renders on the trigger's own
- * surface, so a bar button keeps its bar treatment (on iOS its own Liquid
- * Glass circle) inside the panel. Pressing it closes the panel, and it reads
- * "Close". A button (anything with an `icon`) is the control itself; any
- * other trigger (an avatar) becomes an X in a circle of its size.
- */
-export declare function iconEchoElement(trigger: ReactNode, kind: IconEcho, onClose: () => void, surface?: SurfaceIntent): ReactNode;
-//# sourceMappingURL=iconEcho.d.ts.map

package/types/FloatingPanel/iconEcho.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"iconEcho.d.ts","sourceRoot":"","sources":["../../src/FloatingPanel/iconEcho.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClG,OAAO,EAAkB,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAK9E;;;;;;GAMG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAExC,eAAO,MAAM,iBAAiB,6BAA6B,CAAC;AAc5D;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,GAAG,OAAO,CAErE;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,MAAM,IAAI,EACnB,OAAO,CAAC,EAAE,aAAa,GACtB,SAAS,CAIX"}