@multiplatform.one/forms 7.88.8 → 7.88.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "7.88.8",
+  "version": "7.88.10",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -57,10 +57,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/platform": "^7.88.8",
-    "@multiplatform.one/router": "^7.88.8",
-    "@multiplatform.one/table-primitives": "^7.88.8",
-    "@multiplatform.one/theme": "^7.88.8",
+    "@multiplatform.one/platform": "^7.88.10",
+    "@multiplatform.one/router": "^7.88.10",
+    "@multiplatform.one/table-primitives": "^7.88.10",
+    "@multiplatform.one/theme": "^7.88.10",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/get-font-sized": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -80,9 +80,9 @@
   },
   "devDependencies": {
     "@expo/ui": "~55.0.17",
-    "@multiplatform.one/config": "7.88.8",
-    "@multiplatform.one/storybook": "7.88.8",
-    "@multiplatform.one/test-utils": "7.88.8",
+    "@multiplatform.one/config": "7.88.10",
+    "@multiplatform.one/storybook": "7.88.10",
+    "@multiplatform.one/test-utils": "7.88.10",
     "@tamagui/build": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/vite-plugin": "2.7.6",

package/src/Button/Button.scopeFlip.native.spec.tsx

@@ -129,9 +129,12 @@ describe("FZ-9617: native keeps every host-scope paint a literal", () => {
         <Button icon={IconProbe} aria-label="Add" />
       </>,
     );
-    for (const el of Array.from(document.querySelectorAll<HTMLElement>("[style]"))) {
-      expect(el.getAttribute("style") ?? "").not.toContain("--mp-host-");
-    }
+    const themes = config.tamagui.themes as Record<string, Record<string, unknown>>;
+    const aliases = Object.keys(themes[scheme]).map((token) => `--mp-host-${token}`);
+    const declared = Array.from(document.body.querySelectorAll<HTMLElement>("*")).flatMap((el) =>
+      aliases.filter((alias) => el.style.getPropertyValue(alias) !== ""),
+    );
+    expect(declared).toEqual([]);
   });
 
   it.each(SCHEMES)("%s: the ring is the page's literal $outlineColor", (scheme) => {

package/src/fields/Select/InlineChoices.spec.tsx

@@ -0,0 +1,116 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { InlineChoices, type InlineChoice } from "./InlineChoices";
+
+const knobProps = {
+  textAccentColor: "$color12",
+  menuRow: { minHeight: 44 },
+  panelPadding: { padding: "$3" },
+  gap: { gap: "$2" },
+  body: { fontFamily: "$body", fontWeight: "400" },
+  borderRadius: { borderRadius: "$3" },
+};
+
+const options: InlineChoice[] = [
+  { value: "light", label: "Light", icon: <svg data-icon="sun" /> },
+  { value: "dark", label: "Dark" },
+  { value: "system", label: "System" },
+];
+
+function setup(props: Partial<Parameters<typeof InlineChoices>[0]> = {}) {
+  const onValueChange = vi.fn();
+  const view = renderWithProviders(
+    <InlineChoices
+      options={options}
+      value="dark"
+      onValueChange={onValueChange}
+      knobProps={knobProps}
+      markColor="$accent9"
+      aria-label="Appearance"
+      {...props}
+    />,
+  );
+  const radios = () => view.getAllByRole("radio");
+  return { ...view, onValueChange, radios };
+}
+
+describe("InlineChoices (LC-262, APG radio group)", () => {
+  it("is one labelled radio group with the chosen row checked and the only tab stop", () => {
+    const { getByRole, radios } = setup();
+    const group = getByRole("radiogroup");
+    expect(group.getAttribute("aria-label")).toBe("Appearance");
+    expect(radios().map((radio) => radio.textContent)).toEqual(["Light", "Dark", "System"]);
+    expect(radios().map((radio) => radio.getAttribute("aria-checked"))).toEqual([
+      "false",
+      "true",
+      "false",
+    ]);
+    expect(radios().map((radio) => radio.tabIndex)).toEqual([-1, 0, -1]);
+  });
+
+  it("puts the tab stop on the first row when nothing is chosen, and names by labelledBy", () => {
+    const { getByRole, radios } = setup({ value: undefined, labelledBy: "field-label" });
+    expect(radios().map((radio) => radio.tabIndex)).toEqual([0, -1, -1]);
+    const group = getByRole("radiogroup");
+    expect(group.getAttribute("aria-labelledby")).toBe("field-label");
+    expect(group.getAttribute("aria-label")).toBeNull();
+  });
+
+  it("chooses a row on press, but not the row already chosen", () => {
+    const { radios, onValueChange } = setup();
+    fireEvent.click(radios()[1]);
+    expect(onValueChange).not.toHaveBeenCalled();
+    fireEvent.click(radios()[2]);
+    expect(onValueChange).toHaveBeenCalledWith("system");
+  });
+
+  it("moves and chooses with the arrows, wrapping at both ends", () => {
+    const { radios, onValueChange } = setup();
+    fireEvent.keyDown(radios()[1], { key: "ArrowDown" });
+    expect(onValueChange).toHaveBeenLastCalledWith("system");
+    expect(document.activeElement).toBe(radios()[2]);
+    fireEvent.keyDown(radios()[2], { key: "ArrowRight" });
+    expect(onValueChange).toHaveBeenLastCalledWith("light");
+    expect(document.activeElement).toBe(radios()[0]);
+    fireEvent.keyDown(radios()[0], { key: "ArrowUp" });
+    expect(onValueChange).toHaveBeenLastCalledWith("system");
+    fireEvent.keyDown(radios()[2], { key: "ArrowLeft" });
+    expect(document.activeElement).toBe(radios()[1]);
+    expect(onValueChange).toHaveBeenCalledTimes(3);
+  });
+
+  it("chooses with Space and Enter and lets other keys through", () => {
+    const { radios, onValueChange } = setup();
+    fireEvent.keyDown(radios()[0], { key: " " });
+    expect(onValueChange).toHaveBeenLastCalledWith("light");
+    fireEvent.keyDown(radios()[2], { key: "Enter" });
+    expect(onValueChange).toHaveBeenLastCalledWith("system");
+    fireEvent.keyDown(radios()[0], { key: "Tab" });
+    expect(onValueChange).toHaveBeenCalledTimes(2);
+  });
+
+  it("chooses nothing while disabled and takes every row out of the tab order", () => {
+    const { getByRole, radios, onValueChange } = setup({ disabled: true });
+    expect(getByRole("radiogroup").getAttribute("aria-disabled")).toBe("true");
+    expect(radios().map((radio) => radio.tabIndex)).toEqual([-1, -1, -1]);
+    fireEvent.click(radios()[0]);
+    fireEvent.keyDown(radios()[1], { key: "ArrowDown" });
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it("reports blur from a row", () => {
+    const onBlur = vi.fn();
+    const { radios } = setup({ onBlur });
+    fireEvent.blur(radios()[1]);
+    expect(onBlur).toHaveBeenCalled();
+  });
+
+  it("gives every row a glyph column only when some option has an icon", () => {
+    const withIcon = setup();
+    expect(withIcon.container.querySelectorAll("[data-icon]")).toHaveLength(1);
+    withIcon.unmount();
+    const plain = setup({ options: options.map(({ icon: _icon, ...rest }) => rest) });
+    expect(plain.container.querySelectorAll("[data-icon]")).toHaveLength(0);
+  });
+});

package/src/fields/Select/SheetPickerRow.spec.tsx

@@ -0,0 +1,101 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { createSheetNavigationStore } from "../../shared/sheetNavigation";
+import type { InlineChoice } from "./InlineChoices";
+import { SheetPickerRow } from "./SheetPickerRow";
+
+const knobProps = {
+  textAccentColor: "$color12",
+  menuRow: { minHeight: 44 },
+  panelPadding: { padding: "$3" },
+  gap: { gap: "$2" },
+  body: { fontFamily: "$body", fontWeight: "400" },
+  borderRadius: { borderRadius: "$3" },
+};
+
+const options: InlineChoice[] = [
+  { value: "us", label: "United States" },
+  { value: "in", label: "India" },
+];
+
+function setup(props: Partial<Parameters<typeof SheetPickerRow>[0]> = {}) {
+  const store = createSheetNavigationStore();
+  const onValueChange = vi.fn();
+  const element = (extra: Partial<Parameters<typeof SheetPickerRow>[0]> = {}) => (
+    <SheetPickerRow
+      store={store}
+      label="Country"
+      options={options}
+      value="in"
+      placeholder="Choose"
+      onValueChange={onValueChange}
+      knobProps={knobProps}
+      markColor="$accent9"
+      {...props}
+      {...extra}
+    />
+  );
+  const view = renderWithProviders(element());
+  const row = () => view.getByTestId("sheet-picker-row");
+  return { ...view, store, onValueChange, row, element };
+}
+
+describe("SheetPickerRow (LC-262)", () => {
+  it("is a labelled button showing the current value, or the placeholder with none", () => {
+    const { row, getByTestId, rerender, element } = setup();
+    expect(row().getAttribute("role")).toBe("button");
+    expect(row().getAttribute("aria-label")).toBe("Country");
+    expect(row().tabIndex).toBe(0);
+    expect(getByTestId("sheet-picker-value").textContent).toBe("India");
+    rerender(element({ value: undefined }));
+    expect(getByTestId("sheet-picker-value").textContent).toBe("Choose");
+  });
+
+  it("pushes its checkmark list onto the sheet's stack on press, Enter and Space", () => {
+    const { row, store } = setup();
+    fireEvent.click(row());
+    expect(store.getPages()).toHaveLength(1);
+    expect(store.getPages()[0].title).toBe("Country");
+    act(() => store.pop());
+    fireEvent.keyDown(row(), { key: "Enter" });
+    expect(store.getPages()).toHaveLength(1);
+    act(() => store.pop());
+    fireEvent.keyDown(row(), { key: " " });
+    expect(store.getPages()).toHaveLength(1);
+    act(() => store.pop());
+    fireEvent.keyDown(row(), { key: "ArrowDown" });
+    expect(store.getPages()).toHaveLength(0);
+  });
+
+  it("chooses from the pushed page and keeps that page current as the value changes", () => {
+    const { row, store, onValueChange, rerender, element } = setup();
+    fireEvent.click(row());
+    const page = renderWithProviders(<>{store.getPages()[0].content}</>);
+    fireEvent.click(page.getAllByRole("radio")[0]);
+    expect(onValueChange).toHaveBeenCalledWith("us");
+    page.unmount();
+    rerender(element({ value: "us" }));
+    const updated = renderWithProviders(<>{store.getPages()[0].content}</>);
+    expect(
+      updated.getAllByRole("radio").map((radio) => radio.getAttribute("aria-checked")),
+    ).toEqual(["true", "false"]);
+  });
+
+  it("does not open while disabled and leaves the tab order", () => {
+    const { row, store } = setup({ disabled: true });
+    expect(row().tabIndex).toBe(-1);
+    expect(row().getAttribute("aria-disabled")).toBe("true");
+    fireEvent.click(row());
+    fireEvent.keyDown(row(), { key: "Enter" });
+    expect(store.getPages()).toHaveLength(0);
+  });
+
+  it("takes its page off the stack when it unmounts", () => {
+    const { row, store, unmount } = setup();
+    fireEvent.click(row());
+    expect(store.getPages()).toHaveLength(1);
+    unmount();
+    expect(store.getPages()).toHaveLength(0);
+  });
+});

package/src/shared/sheetNavigation.spec.tsx

@@ -0,0 +1,105 @@
+import { act, cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  createSheetNavigationStore,
+  SheetNavigationProvider,
+  useSheetNavigation,
+  useSheetPageOpen,
+  useSheetPages,
+  type SheetNavigationStore,
+  type SheetPage,
+} from "./sheetNavigation";
+
+const page = (id: string, title = id): SheetPage => ({ id, title, content: title });
+const ids = (store: SheetNavigationStore) => store.getPages().map((p) => p.id);
+
+afterEach(cleanup);
+
+describe("sheet navigation store (LC-262)", () => {
+  it("pushes pages oldest first, and a repeat push moves that page to the top", () => {
+    const store = createSheetNavigationStore();
+    store.push(page("country"));
+    store.push(page("region"));
+    store.push(page("country", "Country again"));
+    expect(ids(store)).toEqual(["region", "country"]);
+    expect(store.getPages()[1].title).toBe("Country again");
+    expect(store.has("region")).toBe(true);
+    expect(store.has("city")).toBe(false);
+  });
+
+  it("updates a page in place and ignores an update for one not on the stack", () => {
+    const store = createSheetNavigationStore();
+    store.push(page("a"));
+    store.push(page("b"));
+    const listener = vi.fn();
+    store.subscribe(listener);
+    store.update(page("a", "A2"));
+    expect(store.getPages().map((p) => p.title)).toEqual(["A2", "b"]);
+    store.update(page("missing"));
+    expect(listener).toHaveBeenCalledTimes(1);
+  });
+
+  it("removes a page by id, pops the top, and notifies only on a real change", () => {
+    const store = createSheetNavigationStore();
+    const listener = vi.fn();
+    const stop = store.subscribe(listener);
+    store.pop();
+    store.remove("nothing");
+    expect(listener).not.toHaveBeenCalled();
+    store.push(page("a"));
+    store.push(page("b"));
+    store.push(page("c"));
+    store.remove("b");
+    expect(ids(store)).toEqual(["a", "c"]);
+    store.pop();
+    expect(ids(store)).toEqual(["a"]);
+    expect(listener).toHaveBeenCalledTimes(5);
+    stop();
+    store.pop();
+    expect(listener).toHaveBeenCalledTimes(5);
+    expect(ids(store)).toEqual([]);
+  });
+});
+
+describe("sheet navigation hooks", () => {
+  function Probe({
+    id,
+    out,
+  }: {
+    id: string;
+    out: { store?: unknown; pages?: unknown; open?: boolean };
+  }) {
+    const store = useSheetNavigation();
+    out.store = store;
+    out.pages = useSheetPages(store);
+    out.open = useSheetPageOpen(store, id);
+    return null;
+  }
+
+  it("reads nothing outside a sheet", () => {
+    const out: { store?: unknown; pages?: unknown; open?: boolean } = {};
+    render(<Probe id="a" out={out} />);
+    expect(out.store).toBeUndefined();
+    expect(out.pages).toEqual([]);
+    expect(out.open).toBe(false);
+  });
+
+  it("follows the sheet's stack as pages come and go", () => {
+    const store = createSheetNavigationStore();
+    const out: { store?: unknown; pages?: SheetPage[]; open?: boolean } = {};
+    render(
+      <SheetNavigationProvider value={store}>
+        <Probe id="a" out={out as never} />
+      </SheetNavigationProvider>,
+    );
+    expect(out.store).toBe(store);
+    expect(out.open).toBe(false);
+    act(() => store.push(page("a")));
+    expect(out.open).toBe(true);
+    expect(out.pages?.map((p) => p.id)).toEqual(["a"]);
+    act(() => store.push(page("b")));
+    expect(out.pages?.map((p) => p.id)).toEqual(["a", "b"]);
+    act(() => store.remove("a"));
+    expect(out.open).toBe(false);
+  });
+});