@multiplatform.one/table 6.4.3 → 6.7.0

package/src/components/DataTable/rowPress.spec.tsx

@@ -0,0 +1,229 @@
+/**
+ * onRowPress — first-class row activation (LC-49 ONE-TAB-STOP, LC-50
+ * KEY-ACTIVATION, DG-A11Y-06 names).
+ *
+ * The row is ONE pressable unit: click/tap anywhere activates, Enter AND
+ * Space activate from the keyboard, the row set exposes exactly one tab
+ * stop (roving tabindex, arrows/Home/End move it), and presses that
+ * originate on inner interactive controls (selection checkboxes, buttons)
+ * never reach the row handler. Cards (layout="cards") take the same
+ * contract with role="button".
+ *
+ * layout="table" pins the grid below the $sm test-env breakpoint.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Button } from "@multiplatform.one/forms";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+type Person = {
+  id: number;
+  firstName: string;
+  age: number;
+};
+
+const sampleData: Person[] = [
+  { id: 1, firstName: "Alice", age: 30 },
+  { id: 2, firstName: "Bob", age: 40 },
+  { id: 3, firstName: "Carol", age: 20 },
+];
+
+// Explicit ids: DataTable seeds columnOrder from `col.id || ""`, so mixing
+// id-less accessor columns with an id'd display column would reorder the
+// display column first (and identity fallbacks would read it as the "first
+// visible cell").
+const columns: DataTableColumn<Person>[] = [
+  { id: "firstName", accessorKey: "firstName", header: "First Name" },
+  { id: "age", accessorKey: "age", header: "Age" },
+];
+
+function pressRows(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll('[data-row-press="true"]')) as HTMLElement[];
+}
+
+function renderRowPressTable(extraProps: Record<string, unknown> = {}) {
+  const onRowPress = vi.fn();
+  const result = renderWithProviders(
+    <DataTable
+      data={sampleData}
+      columns={columns as DataTableColumn<Record<string, any>>[]}
+      layout="table"
+      enablePagination={false}
+      onRowPress={onRowPress}
+      {...extraProps}
+    />,
+  );
+  return { ...result, onRowPress };
+}
+
+describe("DataTable onRowPress (grid)", () => {
+  it("activates on a click anywhere in the row with the row data and index", () => {
+    const { container, onRowPress } = renderRowPressTable();
+    const rows = pressRows(container);
+    expect(rows).toHaveLength(3);
+
+    fireEvent.click(screen.getByText("Bob"));
+    expect(onRowPress).toHaveBeenCalledTimes(1);
+    expect(onRowPress).toHaveBeenCalledWith(
+      expect.objectContaining({ firstName: "Bob", id: 2 }),
+      1,
+    );
+  });
+
+  it("exposes exactly one tab stop; arrows and Home/End rove it (LC-49)", async () => {
+    const { container } = renderRowPressTable();
+    const rows = pressRows(container);
+
+    const tabStops = () => rows.map((row) => row.getAttribute("tabindex"));
+    expect(tabStops()).toEqual(["0", "-1", "-1"]);
+
+    rows[0].focus();
+    expect(document.activeElement).toBe(rows[0]);
+
+    fireEvent.keyDown(rows[0], { key: "ArrowDown" });
+    expect(document.activeElement).toBe(rows[1]);
+    // The anchor follows focus: still exactly one tabindex=0.
+    await waitFor(() => {
+      const stops = pressRows(container).map((row) => row.getAttribute("tabindex"));
+      expect(stops).toEqual(["-1", "0", "-1"]);
+    });
+
+    fireEvent.keyDown(rows[1], { key: "End" });
+    expect(document.activeElement).toBe(rows[2]);
+    fireEvent.keyDown(rows[2], { key: "Home" });
+    expect(document.activeElement).toBe(rows[0]);
+    fireEvent.keyDown(rows[0], { key: "ArrowUp" });
+    // Clamped at the first row — no wrap.
+    expect(document.activeElement).toBe(rows[0]);
+  });
+
+  it("activates on Enter AND Space, once per physical key press (LC-50)", () => {
+    const { container, onRowPress } = renderRowPressTable();
+    const rows = pressRows(container);
+    rows[0].focus();
+
+    fireEvent.keyDown(rows[0], { key: "Enter" });
+    expect(onRowPress).toHaveBeenCalledTimes(1);
+    expect(onRowPress).toHaveBeenLastCalledWith(expect.objectContaining({ firstName: "Alice" }), 0);
+
+    fireEvent.keyDown(rows[0], { key: " " });
+    expect(onRowPress).toHaveBeenCalledTimes(2);
+
+    // Key auto-repeat never machine-guns activations.
+    fireEvent.keyDown(rows[0], { key: "Enter", repeat: true });
+    expect(onRowPress).toHaveBeenCalledTimes(2);
+  });
+
+  it("ignores presses that originate on inner interactive controls", () => {
+    const buttonPress = vi.fn();
+    const interactiveColumns: DataTableColumn<Person>[] = [
+      ...columns,
+      {
+        id: "row_actions",
+        header: "Actions",
+        cell: ({ row }) => (
+          <Button size="$2" onPress={() => buttonPress(row.original.id)}>
+            Edit
+          </Button>
+        ),
+      },
+    ];
+    const { container, onRowPress } = renderRowPressTable({
+      columns: interactiveColumns as DataTableColumn<Record<string, any>>[],
+      enableRowSelection: true,
+    });
+
+    // Selection checkbox: toggles selection, never fires the row press.
+    const rowCheckbox = screen.getByRole("checkbox", { name: "Select row Alice" });
+    fireEvent.click(rowCheckbox);
+    expect(rowCheckbox.getAttribute("aria-checked")).toBe("true");
+    expect(onRowPress).not.toHaveBeenCalled();
+
+    // Inner button: its own handler fires, the row press does not.
+    fireEvent.click(screen.getAllByText("Edit")[0]);
+    expect(buttonPress).toHaveBeenCalledWith(1);
+    expect(onRowPress).not.toHaveBeenCalled();
+
+    // A plain cell in the same row still activates the row.
+    fireEvent.click(screen.getByText("Alice"));
+    expect(onRowPress).toHaveBeenCalledTimes(1);
+    expect(container.querySelectorAll('[data-row-press="true"]').length).toBe(3);
+  });
+
+  it("names rows: rowLabel accessor wins; first cell value is the fallback", () => {
+    const { container, unmount } = renderRowPressTable({
+      rowLabel: (row: Person) => `Open ${row.firstName}`,
+    });
+    expect(pressRows(container).map((row) => row.getAttribute("aria-label"))).toEqual([
+      "Open Alice",
+      "Open Bob",
+      "Open Carol",
+    ]);
+    unmount();
+
+    const { container: fallbackContainer } = renderRowPressTable();
+    expect(pressRows(fallbackContainer)[0].getAttribute("aria-label")).toBe("Alice");
+  });
+});
+
+describe("DataTable onRowPress (cards layout)", () => {
+  it("cards are pressable buttons with the same activation + isolation contract", async () => {
+    const onRowPress = vi.fn();
+    renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns as DataTableColumn<Record<string, any>>[]}
+        layout="cards"
+        enablePagination={false}
+        enableRowSelection
+        onRowPress={onRowPress}
+        rowLabel={(row) => (row as Person).firstName}
+      />,
+    );
+
+    const card = screen.getByRole("button", { name: "Bob" });
+    expect(card.getAttribute("data-row-press")).toBe("true");
+
+    // Inner selection checkbox stays isolated from the card press.
+    const checkbox = screen.getByRole("checkbox", { name: "Select row Bob" });
+    fireEvent.click(checkbox);
+    expect(checkbox.getAttribute("aria-checked")).toBe("true");
+    expect(onRowPress).not.toHaveBeenCalled();
+
+    fireEvent.click(card);
+    expect(onRowPress).toHaveBeenCalledTimes(1);
+    expect(onRowPress).toHaveBeenCalledWith(expect.objectContaining({ firstName: "Bob" }), 1);
+
+    // Enter activates the focused card (LC-50).
+    card.focus();
+    fireEvent.keyDown(card, { key: "Enter" });
+    await waitFor(() => expect(onRowPress).toHaveBeenCalledTimes(2));
+  });
+
+  it("card list exposes one roving tab stop scoped to the list (LC-49)", () => {
+    const { container } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns as DataTableColumn<Record<string, any>>[]}
+        layout="cards"
+        enablePagination={false}
+        onRowPress={vi.fn()}
+      />,
+    );
+    const cards = pressRows(container as HTMLElement);
+    expect(cards).toHaveLength(3);
+    expect(cards.map((card) => card.getAttribute("tabindex"))).toEqual(["0", "-1", "-1"]);
+    expect(
+      (container as HTMLElement).querySelector(
+        '[data-row-press-scope="true"] [data-row-press="true"]',
+      ),
+    ).not.toBeNull();
+
+    cards[0].focus();
+    fireEvent.keyDown(cards[0], { key: "ArrowDown" });
+    expect(document.activeElement).toBe(cards[1]);
+  });
+});

package/src/components/DataTable/selectionSemantics.spec.tsx

@@ -0,0 +1,156 @@
+/**
+ * Row-selection semantics (desk-parity audit fix).
+ *
+ * The audit finding: list-row selection toggles rendered as anonymous
+ * pressables — no role=checkbox, no aria-checked, invisible to AT and
+ * automation; the bulk-actions bar was unreachable without a mouse. These
+ * specs pin the REAL checkbox contract on the package selection column:
+ * every toggle is role="checkbox" with aria-checked (header select-all
+ * supports "mixed"), named by row identity ("Select row {name}"), meets
+ * the 44px press floor through the control's own box (LC-54), toggles
+ * from the keyboard, and keyboard-only selection reaches the bulk bar.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import type { BulkAction, DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+type Person = {
+  id: number;
+  firstName: string;
+  age: number;
+};
+
+const sampleData: Person[] = [
+  { id: 1, firstName: "Alice", age: 30 },
+  { id: 2, firstName: "Bob", age: 40 },
+  { id: 3, firstName: "Carol", age: 20 },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "age", header: "Age" },
+];
+
+function renderSelectionTable(extraProps: Record<string, unknown> = {}) {
+  const bulkExecute = vi.fn();
+  const bulkActions: BulkAction<Person>[] = [
+    { id: "archive", label: "Archive", onExecute: bulkExecute },
+  ];
+  const result = renderWithProviders(
+    <DataTable
+      data={sampleData}
+      columns={columns as DataTableColumn<Record<string, any>>[]}
+      layout="table"
+      enablePagination={false}
+      enableRowSelection
+      bulkActions={bulkActions as BulkAction<Record<string, any>>[]}
+      {...extraProps}
+    />,
+  );
+  return { ...result, bulkExecute };
+}
+
+describe("DataTable selection semantics", () => {
+  it("row toggles are real checkboxes named by row identity", () => {
+    renderSelectionTable();
+
+    const rowCheckboxes = [
+      screen.getByRole("checkbox", { name: "Select row Alice" }),
+      screen.getByRole("checkbox", { name: "Select row Bob" }),
+      screen.getByRole("checkbox", { name: "Select row Carol" }),
+    ];
+    for (const checkbox of rowCheckboxes) {
+      expect(checkbox.getAttribute("aria-checked")).toBe("false");
+      // Real disclosure for automation: state is machine-readable, and the
+      // toggle is a focusable control (not an anonymous pressable View).
+      expect(checkbox.getAttribute("role")).toBe("checkbox");
+      expect((checkbox as HTMLElement).tagName).toBe("BUTTON");
+    }
+  });
+
+  it("rowLabel drives the checkbox names when provided", () => {
+    renderSelectionTable({
+      rowLabel: (row: Person) => `${row.firstName} #${row.id}`,
+    });
+    expect(screen.getByRole("checkbox", { name: "Select row Alice #1" })).toBeDefined();
+    expect(screen.getByRole("checkbox", { name: "Select row Carol #3" })).toBeDefined();
+  });
+
+  it("meets the 44px press floor through the control's own box (LC-54)", () => {
+    renderSelectionTable();
+    const checkbox = screen.getByRole("checkbox", { name: "Select row Alice" });
+    const style = getComputedStyle(checkbox);
+    expect(parseFloat(style.minWidth)).toBeGreaterThanOrEqual(44);
+    expect(parseFloat(style.minHeight)).toBeGreaterThanOrEqual(44);
+  });
+
+  it("header select-all exposes aria-checked including the mixed state", async () => {
+    renderSelectionTable();
+    const selectAll = screen.getByRole("checkbox", { name: "Select all rows on page" });
+    expect(selectAll.getAttribute("aria-checked")).toBe("false");
+
+    fireEvent.click(screen.getByRole("checkbox", { name: "Select row Alice" }));
+    await waitFor(() => expect(selectAll.getAttribute("aria-checked")).toBe("mixed"));
+
+    fireEvent.click(selectAll);
+    await waitFor(() => expect(selectAll.getAttribute("aria-checked")).toBe("true"));
+    for (const name of ["Alice", "Bob", "Carol"]) {
+      expect(
+        screen.getByRole("checkbox", { name: `Select row ${name}` }).getAttribute("aria-checked"),
+      ).toBe("true");
+    }
+
+    fireEvent.click(selectAll);
+    await waitFor(() => expect(selectAll.getAttribute("aria-checked")).toBe("false"));
+  });
+
+  it("keyboard-only selection reaches the bulk-actions bar", async () => {
+    const user = userEvent.setup();
+    const { bulkExecute } = renderSelectionTable();
+    expect(screen.queryByText("1 selected")).toBeNull();
+
+    // Space on the focused checkbox (real keystroke; the role=checkbox
+    // frame is a native button, so Space activates it).
+    const alice = screen.getByRole("checkbox", { name: "Select row Alice" });
+    (alice as HTMLElement).focus();
+    expect(document.activeElement).toBe(alice);
+    await user.keyboard(" ");
+    await waitFor(() => expect(alice.getAttribute("aria-checked")).toBe("true"));
+
+    // The bulk bar appears with the count and reachable actions.
+    expect(await screen.findByText("1 selected")).toBeDefined();
+
+    const carol = screen.getByRole("checkbox", { name: "Select row Carol" });
+    (carol as HTMLElement).focus();
+    await user.keyboard(" ");
+    expect(await screen.findByText("2 selected")).toBeDefined();
+
+    // The bar's actions are real buttons — Enter activates without a pointer.
+    const archive = screen.getByRole("button", { name: "Archive" });
+    (archive as HTMLElement).focus();
+    await user.keyboard("{Enter}");
+    await waitFor(() => expect(bulkExecute).toHaveBeenCalledTimes(1));
+    expect(bulkExecute.mock.calls[0][0]).toHaveLength(2);
+  });
+
+  it("cards layout carries the same checkbox semantics", () => {
+    renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns as DataTableColumn<Record<string, any>>[]}
+        layout="cards"
+        enablePagination={false}
+        enableRowSelection
+      />,
+    );
+    const checkbox = screen.getByRole("checkbox", { name: "Select row Bob" });
+    expect(checkbox.getAttribute("aria-checked")).toBe("false");
+    fireEvent.click(checkbox);
+    expect(checkbox.getAttribute("aria-checked")).toBe("true");
+    expect(screen.getByRole("checkbox", { name: "Select all rows" })).toBeDefined();
+  });
+});

package/src/components/DataTableBulkActions/index.tsx

@@ -1,10 +1,12 @@
 import { DotsThreeIcon } from "@phosphor-icons/react";
 import { useAccentOnSurface, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Button, zIndex } from "@multiplatform.one/forms";
 import { ConfirmDialog, DropdownMenu } from "@multiplatform.one/components";
 import { Text, View, XStack } from "tamagui";
 import type { BulkAction } from "../../types";
+import { withInterp } from "../../utils/withInterp";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 
 export type { BulkAction };
@@ -43,6 +45,7 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
 
   const [confirmAction, setConfirmAction] = useState<BulkAction<T> | null>(null);
   const [isExecuting, setIsExecuting] = useState<string | null>(null);
+  const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   // UX-P04 / Axiom 12: the selection count is accent-hued text on the bar
   // surface (page), so it needs the page-readable accent — `$accentColor` (the
@@ -135,9 +138,20 @@ export function DataTableBulkActions<T = any>(props: DataTableBulkActionsProps<T
       >
         {showSelectionCount && (
           <Text fontSize="$3" fontWeight="600" color={countColor}>
+            {/* D-15: one whole-sentence key per variant (never concatenated
+                fragments — word order is locale-owned); withInterp fills the
+                params when no i18n instance is mounted (house table pattern). */}
             {filteredOutCount > 0
-              ? `${selectedItems.length} selected (+${filteredOutCount} filtered out)`
-              : `${selectedItems.length} selected`}
+              ? withInterp(
+                  t("{{n}} selected (+{{hidden}} filtered out)", {
+                    n: selectedItems.length,
+                    hidden: filteredOutCount,
+                  }),
+                  { n: selectedItems.length, hidden: filteredOutCount },
+                )
+              : withInterp(t("{{n}} selected", { n: selectedItems.length }), {
+                  n: selectedItems.length,
+                })}
           </Text>
         )}
 

package/src/components/DataTableBulkActions/selectionCountI18n.spec.tsx

@@ -0,0 +1,94 @@
+// D-15: the selection-count label is i18n-safe — each variant is ONE
+// whole-sentence t() key ("{{n}} selected", "{{n}} selected (+{{hidden}}
+// filtered out)"), never concatenated English fragments, so locales own the
+// word order. This spec runs with an initialized i18next instance whose
+// translations deliberately differ from the keys (reordered words), proving
+// the label routes through t() — the sibling DataTableBulkActions.spec.tsx
+// covers the untranslated fallback (withInterp fills the raw key).
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import React from "react";
+import {
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { DataTableStateContext } from "../DataTable/DataTableStateContext";
+import { type BulkAction, DataTableBulkActions } from "./index";
+
+beforeAll(async () => {
+  // Same natural-language keys registered in packages/i18n/en/common.json,
+  // mapped to a pseudo-locale that reorders the sentence.
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: {
+      en: {
+        translation: {
+          "{{n}} selected": "selected: {{n}}",
+          "{{n}} selected (+{{hidden}} filtered out)":
+            "selected: {{n}} (hidden by filter: {{hidden}})",
+        },
+      },
+    },
+  });
+});
+
+afterEach(cleanup);
+
+type Row = { id: string; name: string; status: string };
+
+const rows: Row[] = [
+  { id: "a", name: "Alpha", status: "ready" },
+  { id: "b", name: "Bravo", status: "blocked" },
+];
+
+const actions: BulkAction<Row>[] = [{ id: "x", label: "X", onExecute: vi.fn() }];
+
+function Harness({ columnFilters = [] }: { columnFilters?: Array<{ id: string; value: any }> }) {
+  const [rowSelection, setRowSelection] = React.useState<Record<string, boolean>>({
+    a: true,
+    b: true,
+  });
+  const table = useReactTable({
+    data: rows,
+    columns: [
+      { id: "name", accessorKey: "name", header: "Name" },
+      { id: "status", accessorKey: "status", header: "Status" },
+    ] as any,
+    state: { rowSelection, columnFilters, pagination: { pageIndex: 0, pageSize: 10 } },
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getRowId: (row) => row.id,
+    enableRowSelection: true,
+  });
+  const ctxValue = React.useMemo(
+    () => ({ table, state: {} as any, actions: {} as any, computed: {} as any }) as any,
+    [table, rowSelection, columnFilters],
+  );
+  return (
+    <DataTableStateContext.Provider value={ctxValue}>
+      <DataTableBulkActions actions={actions} />
+    </DataTableStateContext.Provider>
+  );
+}
+
+describe("selection count label i18n (D-15)", () => {
+  it("base count renders through the {{n}} selected key", () => {
+    renderWithProviders(<Harness />);
+    expect(screen.getByText("selected: 2")).toBeInTheDocument();
+    expect(screen.queryByText(/\d selected/)).not.toBeInTheDocument();
+  });
+
+  it("filtered-out annotation renders through its own whole-sentence key", () => {
+    renderWithProviders(<Harness columnFilters={[{ id: "status", value: "ready" }]} />);
+    expect(screen.getByText("selected: 2 (hidden by filter: 1)")).toBeInTheDocument();
+    expect(screen.queryByText(/filtered out/)).not.toBeInTheDocument();
+  });
+});

package/src/components/DataTableCell/CellModalEditor.tsx

@@ -12,6 +12,7 @@
  * footer stays within the two-action dialog budget (LC-31).
  */
 
+import { DialogOverlay } from "@multiplatform.one/components";
 import { FieldDisplay, type FieldDisplayType } from "@multiplatform.one/forms";
 import { TableCellContext } from "@multiplatform.one/table-primitives";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
@@ -118,11 +119,12 @@ export function CellModalEditor({
       </View>
       <Dialog open={open} onOpenChange={handleOpenChange} modal>
         <Dialog.Portal>
-          <Dialog.Overlay opacity={0.5} enterStyle={{ opacity: 0 }} exitStyle={{ opacity: 0 }} />
+          <DialogOverlay opacity={0.5} />
           <Dialog.Content
             borderWidth={1}
             borderColor="$borderColor"
             elevation={knobProps.elevation}
+            transition={knobProps.transition}
             enterStyle={{ y: -10, opacity: 0, scale: 0.96 }}
             exitStyle={{ y: 10, opacity: 0, scale: 0.96 }}
             maxWidth={720}

package/src/components/DataTableCell/cellDraftPolicy.spec.tsx

@@ -188,7 +188,11 @@ function MockMultiDatePicker({ value, onChange }: any) {
   );
 }
 
-vi.mock("@multiplatform.one/forms", () => ({
+// Partial mock: real module first (module-scope exports like `zIndex` keep
+// resolving for transitive imports), field components faked on top — the
+// spec asserts draft/commit policy per field, not the fields themselves.
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/forms")>()),
   Checkbox: createMock("Checkbox"),
   Switch: createMock("Switch"),
   Select: MockSelect,
@@ -231,7 +235,11 @@ vi.mock("@multiplatform.one/rich-text", () => ({
   RichTextEditor: createMock("RichTextEditor"),
 }));
 
-vi.mock("@multiplatform.one/theme", () => ({
+// Partial mock (importOriginal): only the knobs hook is stubbed — real
+// module-scope exports (MIN_PRESS_TARGET, press-target helpers, formatters)
+// keep resolving for every component this spec transitively imports.
+vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/theme")>()),
   useResolvedKnobs: () => ({
     knobProps: {
       sizeToken: "$3",

package/src/components/DataTableCell/dataTableCell.spec.tsx

@@ -30,7 +30,11 @@ function createMock(name: string) {
   return Comp;
 }
 
-vi.mock("@multiplatform.one/forms", () => ({
+// Partial mock: real module first (module-scope exports like `zIndex` keep
+// resolving for transitive imports), field components faked on top — the
+// spec asserts ROUTING to fields, not the fields themselves.
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/forms")>()),
   Checkbox: createMock("Checkbox"),
   Switch: createMock("Switch"),
   Select: createMock("Select"),
@@ -94,7 +98,11 @@ vi.mock("@multiplatform.one/rich-text", () => ({
   RichTextEditor: createMock("RichTextEditor"),
 }));
 
-vi.mock("@multiplatform.one/theme", () => ({
+// Partial mock (importOriginal): only the knobs hook is stubbed — real
+// module-scope exports (MIN_PRESS_TARGET, press-target helpers, formatters)
+// keep resolving for every component this spec transitively imports.
+vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/theme")>()),
   useResolvedKnobs: () => ({
     knobProps: {
       sizeToken: "$3",

package/src/components/DataTableCell/index.tsx

@@ -175,19 +175,16 @@ export function DataTableCell({
   // large tables performant and gives heavy fields a purpose-built compact
   // representation. Edit-mode (below) still mounts the full field component.
   if (readOnly) {
-    // FieldDisplay formats currency via Intl.NumberFormat, which requires an
-    // ISO-4217 code — a raw symbol ("$") throws RangeError and crashes the
-    // whole table. Normalize symbols to codes and drop anything still invalid.
-    const displayFieldProps =
-      fieldProps.currency != null
-        ? { ...fieldProps, currency: normalizeCurrencyCode(fieldProps.currency) }
-        : fieldProps;
+    // Currency symbols ride through untouched: the money register in
+    // `@multiplatform.one/theme` owns symbol→ISO-code resolution (LC-12 one
+    // channel per data class) and prefixes a symbol it has no code for, so a
+    // cell never has to sanitize a value on the way to the formatter.
     return (
       <CellWrapper justify={cellJustify}>
         <FieldDisplay
           field={field}
           value={value}
-          fieldProps={displayFieldProps}
+          fieldProps={fieldProps}
           linkedValue={_linkedValue}
         />
       </CellWrapper>
@@ -1182,34 +1179,6 @@ function DraftFieldEditor({
   );
 }
 
-const CURRENCY_SYMBOL_TO_CODE: Record<string, string> = {
-  $: "USD",
-  "€": "EUR",
-  "£": "GBP",
-  "¥": "JPY",
-  "₹": "INR",
-  "₩": "KRW",
-  "₽": "RUB",
-  R$: "BRL",
-};
-
-const currencyCodeCache = new Map<string, string | undefined>();
-
-function normalizeCurrencyCode(currency: unknown): string | undefined {
-  if (typeof currency !== "string" || !currency) return undefined;
-  if (currencyCodeCache.has(currency)) return currencyCodeCache.get(currency);
-  const mapped = CURRENCY_SYMBOL_TO_CODE[currency] ?? currency;
-  let resolved: string | undefined;
-  try {
-    new Intl.NumberFormat(undefined, { style: "currency", currency: mapped });
-    resolved = mapped;
-  } catch {
-    resolved = undefined;
-  }
-  currencyCodeCache.set(currency, resolved);
-  return resolved;
-}
-
 function CellWrapper({
   children,
   justify = "flex-start",