@multiplatform.one/components 7.84.0 → 7.84.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/components",
-  "version": "7.84.0",
+  "version": "7.84.1",
   "description": "multiplatform.one ui components",
   "keywords": [
     "components",
@@ -58,11 +58,11 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/forms": "^7.84.0",
-    "@multiplatform.one/i18n": "^7.84.0",
-    "@multiplatform.one/platform": "^7.84.0",
-    "@multiplatform.one/router": "^7.84.0",
-    "@multiplatform.one/theme": "^7.84.0",
+    "@multiplatform.one/forms": "^7.84.1",
+    "@multiplatform.one/i18n": "^7.84.1",
+    "@multiplatform.one/platform": "^7.84.1",
+    "@multiplatform.one/router": "^7.84.1",
+    "@multiplatform.one/theme": "^7.84.1",
     "@phosphor-icons/react": "^2.1.10",
     "@shopify/flash-list": "^2.3.1",
     "@tamagui/colors": "2.7.6",
@@ -89,16 +89,16 @@
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.84.0",
-    "@multiplatform.one/storybook": "7.84.0",
-    "@multiplatform.one/test-utils": "7.84.0",
+    "@multiplatform.one/config": "7.84.1",
+    "@multiplatform.one/storybook": "7.84.1",
+    "@multiplatform.one/test-utils": "7.84.1",
     "@tamagui/build": "2.7.6",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.2.0",
     "@vitejs/plugin-react": "^6.1.2",
-    "@vitest/coverage-v8": "^4.1.5",
+    "@vitest/coverage-v8": "^4.1.12",
     "expo-blur": "~55.0.18",
     "expo-video": "~55.0.19",
     "matchmedia-polyfill": "^0.3.2",
@@ -109,7 +109,7 @@
     "react-native-reanimated": "~4.3.0",
     "react-native-svg": "15.15.4",
     "react-native-web": "^0.21.2",
-    "vitest": "^4.1.5"
+    "vitest": "^4.1.12"
   },
   "peerDependencies": {
     "@mdx-js/mdx": "^3.1.1",

package/src/CopyField/CopyMenuButton.spec.tsx

@@ -21,6 +21,8 @@ describe("CopyMenuButton (LC-169)", () => {
       />,
     );
     const trigger = result.getByLabelText("Copy");
+    // LC-176 (FZ-8044): the glyph beside an identifier is the inline accent glyph.
+    expect(trigger.getAttribute("data-mp-icon-button")).toBe("inline");
     fireEvent.click(trigger);
     await waitFor(() => expect(result.getByText("Copy discovery URL")).toBeTruthy());
     expect(result.getByText("Copy issuer")).toBeTruthy();

package/src/CopyField/CopyMenuButton.tsx

@@ -37,14 +37,7 @@ export function CopyMenuButton({ items, "aria-label": ariaLabel }: CopyMenuButto
         onSelect: () => void copy(item.value),
       }))}
     >
-      <Button
-        nested
-        chromeless
-        circular
-        flexShrink={0}
-        icon={<CopyIcon />}
-        aria-label={ariaLabel ?? t("Copy")}
-      />
+      <Button inline flexShrink={0} icon={<CopyIcon />} aria-label={ariaLabel ?? t("Copy")} />
     </DropdownMenu>
   );
 }

package/src/layouts/DensePageLayout.spec.tsx

@@ -0,0 +1,105 @@
+import { cleanup, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { layoutBreakpoints } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button, Paragraph } from "tamagui";
+import { CONTENT_MAX_WIDTH } from "./page";
+import { DensePageLayout } from "./PageTemplates";
+
+const size = vi.hoisted(() => ({ value: "medium" as string }));
+vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/theme")>()),
+  useLayoutSizeClass: () => size.value,
+}));
+
+afterEach(() => {
+  cleanup();
+  size.value = "medium";
+});
+
+function Log(props: Partial<Parameters<typeof DensePageLayout>[0]>) {
+  return (
+    <DensePageLayout
+      kind="log"
+      title="Sync worker"
+      status={<Paragraph>Running</Paragraph>}
+      actions={<Button aria-label="Pause the stream">Pause</Button>}
+      data-testid="dense-shell"
+      {...props}
+    >
+      <Paragraph>log rows</Paragraph>
+    </DensePageLayout>
+  );
+}
+
+/** Tamagui's atomic classes on web: `_pl-t-space-4` is paddingLeft $4. */
+function atom(el: HTMLElement, prefix: string) {
+  return el.className.split(" ").find((name) => name.startsWith(prefix)) ?? null;
+}
+
+function surface(kind: string) {
+  return document.querySelector(`[data-dense-surface="${kind}"]`) as HTMLElement;
+}
+
+describe("DensePageLayout (LC-215)", () => {
+  it("keeps the page head and gives the surface the rest of the page", () => {
+    renderWithProviders(<Log />);
+    expect(screen.getByRole("heading", { name: "Sync worker" })).toBeTruthy();
+    expect(screen.getByText("Running")).toBeTruthy();
+    expect(screen.getByLabelText("Pause the stream")).toBeTruthy();
+    const region = surface("log");
+    expect(region.textContent).toBe("log rows");
+    expect(region.contains(screen.getByText("Sync worker"))).toBe(false);
+    expect(region).toHaveStyle({ flexGrow: "1", minHeight: "0px" });
+  });
+
+  it("from medium up holds a log to the page column and a chart to the readable measure", () => {
+    renderWithProviders(<Log />);
+    expect(screen.getByTestId("dense-shell")).toHaveStyle({ maxWidth: `${CONTENT_MAX_WIDTH}px` });
+    const log = surface("log");
+    expect(atom(log, "_ox-")).toBe("_ox-hidden");
+    expect(atom(log, "_btlr-")).toMatch(/^_btlr-t-radius-/);
+    cleanup();
+    renderWithProviders(<Log kind="chart" measure="readable" />);
+    expect(screen.getByTestId("dense-shell")).toHaveStyle({
+      maxWidth: `${layoutBreakpoints.expanded}px`,
+    });
+  });
+
+  it("on a phone bleeds the surface to both edges, with a gutter only when asked", () => {
+    size.value = "compact";
+    renderWithProviders(<Log />);
+    const shell = screen.getByTestId("dense-shell");
+    expect(getComputedStyle(shell).maxWidth).not.toBe(`${CONTENT_MAX_WIDTH}px`);
+    const region = surface("log");
+    expect([atom(region, "_pl-"), atom(region, "_pr-"), atom(region, "_ox-")]).toEqual([
+      null,
+      null,
+      null,
+    ]);
+    expect(region.contains(screen.getByText("Sync worker"))).toBe(false);
+    cleanup();
+    renderWithProviders(<Log kind="chart" gutter />);
+    const chart = surface("chart");
+    expect(atom(chart, "_pl-")).toMatch(/^_pl-t-space-/);
+    expect(atom(chart, "_pl-")?.slice(4)).toBe(atom(chart, "_pr-")?.slice(4));
+  });
+
+  it("takes a caller's header in place of its own, and draws none with nothing to show", () => {
+    renderWithProviders(
+      <DensePageLayout kind="log" header={<Paragraph>Custom head</Paragraph>}>
+        <Paragraph>rows</Paragraph>
+      </DensePageLayout>,
+    );
+    expect(screen.getByText("Custom head")).toBeTruthy();
+    expect(screen.queryByRole("heading")).toBeNull();
+    cleanup();
+    renderWithProviders(
+      <DensePageLayout kind="log">
+        <Paragraph>rows</Paragraph>
+      </DensePageLayout>,
+    );
+    expect(screen.queryByRole("heading")).toBeNull();
+    expect(surface("log").textContent).toBe("rows");
+  });
+});

package/src/layouts/ViewSwitcher.native-press.spec.tsx

@@ -0,0 +1,55 @@
+/**
+ * FZ-8991, under tamagui's NATIVE build (vitest.native.config.mjs). On the iOS
+ * simulator One's Moves list ignored every tap on the ViewSwitcher's Table
+ * segment, so a phone user could never reach the table view. A press on a
+ * segment's label has to reach the segment and switch the view.
+ */
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { isWeb } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ViewSwitcher } from "./ViewSwitcher";
+
+afterEach(cleanup);
+
+const views = [
+  { type: "list", label: "List" },
+  { type: "table", label: "Table" },
+];
+
+function press(el: Element) {
+  fireEvent.mouseDown(el, { button: 0, buttons: 1 });
+  fireEvent.mouseUp(el, { button: 0, buttons: 0 });
+}
+
+describe("ViewSwitcher press on native", () => {
+  it("runs tamagui's native build", () => {
+    expect(isWeb).toBe(false);
+  });
+
+  it("a press on the Table segment switches to table", () => {
+    const onViewChange = vi.fn();
+    renderWithProviders(
+      <ViewSwitcher views={views} currentView="list" onViewChange={onViewChange} />,
+    );
+    press(screen.getByText("Table"));
+    expect(onViewChange).toHaveBeenCalledWith("table");
+  });
+
+  it("a press on the List segment switches back to list", () => {
+    const onViewChange = vi.fn();
+    renderWithProviders(
+      <ViewSwitcher views={views} currentView="table" onViewChange={onViewChange} />,
+    );
+    press(screen.getByText("List"));
+    expect(onViewChange).toHaveBeenCalledWith("list");
+  });
+
+  // The selected state rides accessibilityState, which this DOM shim does not
+  // render; the simulator's accessibility tree is where that is checked.
+  it("each segment is a named button", () => {
+    renderWithProviders(<ViewSwitcher views={views} currentView="list" onViewChange={() => {}} />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons.map((b) => b.getAttribute("aria-label"))).toEqual(["List", "Table"]);
+  });
+});

package/src/layouts/ViewSwitcher.tsx

@@ -126,7 +126,10 @@ export function ViewSwitcher({
       overflow="hidden"
       focusStyle={groupRing}
       focusVisibleStyle={groupRing}
-      focusWithinStyle={groupRing}
+      // FZ-8991: on native a focusWithinStyle hands every descendant focus
+      // events, and the segment's label then takes the touch, so the segment's
+      // onPress never runs. The ring is a keyboard affordance: web only.
+      {...(isWeb ? { focusWithinStyle: groupRing } : undefined)}
       // Carbon / Apple equal-width: inline style so Tamagui's flex class
       // cannot drop `gridAutoFlow` (a Tamagui `display="grid"` prop did).
       {...(isWeb
@@ -167,7 +170,15 @@ export function ViewSwitcher({
           <ToggleGroup.Item
             key={view.type}
             value={view.type}
-            {...(isWeb ? { tabIndex: isTabStop ? 0 : -1 } : undefined)}
+            {...(isWeb
+              ? { tabIndex: isTabStop ? 0 : -1 }
+              : {
+                  accessible: true,
+                  role: "button" as const,
+                  accessibilityRole: "button" as const,
+                  accessibilityLabel: view.label,
+                  accessibilityState: { selected: isSelected },
+                })}
             paddingHorizontal={knobProps.tab.paddingHorizontal}
             width="auto"
             height={knobProps.tab.height}

package/types/CopyField/CopyMenuButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyMenuButton.d.ts","sourceRoot":"","sources":["../../src/CopyField/CopyMenuButton.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAsBrF"}
+{"version":3,"file":"CopyMenuButton.d.ts","sourceRoot":"","sources":["../../src/CopyField/CopyMenuButton.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAerF"}

package/types/layouts/ViewSwitcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewSwitcher.d.ts","sourceRoot":"","sources":["../../src/layouts/ViewSwitcher.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,UAAU;IACzB,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9C,uFAAuF;IACvF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,6BAA6B;IAC7B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,YAAY,EACZ,MAAwB,GACzB,EAAE,iBAAiB,2CAgNnB"}
+{"version":3,"file":"ViewSwitcher.d.ts","sourceRoot":"","sources":["../../src/layouts/ViewSwitcher.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,UAAU;IACzB,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9C,uFAAuF;IACvF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,6BAA6B;IAC7B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,YAAY,EACZ,MAAwB,GACzB,EAAE,iBAAiB,2CA2NnB"}