@multiplatform.one/table 6.1.0 → 6.3.0

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

@@ -0,0 +1,242 @@
+/**
+ * UX-011 / Axiom 6 HONEST STATE — the advertised `disabled` prop must
+ * actually disable the table (web previously renamed it `_disabled` and
+ * dropped it).
+ *
+ * Covers: root inert + aria-disabled, cell editors rendered disabled,
+ * gated data mutation (sort press, cell change, add/delete row,
+ * selection), and the card-layout twin (default below `$sm` in the
+ * happy-dom env). Enabled twins assert the gates only bite when
+ * `disabled` is set.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+type Person = {
+  id: number;
+  firstName: string;
+  age: number;
+};
+
+const sampleData: Person[] = [
+  { id: 1, firstName: "John", age: 28 },
+  { id: 2, firstName: "Jane", age: 32 },
+  { id: 3, firstName: "Bob", age: 45 },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "age", header: "Age" },
+];
+
+const editableColumns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name", field: "input" },
+  { accessorKey: "age", header: "Age", field: "stepper" },
+];
+
+function firstNameOrder(container: HTMLElement): string[] {
+  return [...container.querySelectorAll('[role="row"][aria-label^="Row"]')].map(
+    (row) => row.querySelector('[role="cell"]')?.textContent?.trim() ?? "",
+  );
+}
+
+describe("DataTable disabled contract (grid layout)", () => {
+  it("marks the root aria-disabled and inert", () => {
+    const { container } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns}
+        layout="table"
+        disabled
+        onStateChange={vi.fn()}
+      />,
+    );
+    const root = container.querySelector('[aria-label="Data table"][aria-disabled="true"]');
+    expect(root).not.toBeNull();
+    expect(root!.hasAttribute("inert")).toBe(true);
+  });
+
+  it("enabled twin carries neither aria-disabled nor inert", () => {
+    const { container } = renderWithProviders(
+      <DataTable data={sampleData} columns={columns} layout="table" onStateChange={vi.fn()} />,
+    );
+    expect(container.querySelector('[aria-disabled="true"]')).toBeNull();
+    expect(container.querySelector("[inert]")).toBeNull();
+  });
+
+  it("renders cell editors disabled (field inputs carry disabled)", () => {
+    const { container } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={editableColumns}
+        layout="table"
+        disabled
+        onDataChange={vi.fn()}
+      />,
+    );
+    // Cell editors live inside the table region (the toolbar search input is
+    // chrome — dimmed + inert via the root, not attribute-disabled).
+    const inputs = [...container.querySelectorAll('[role="table"] input')].filter(
+      (el) => (el as HTMLInputElement).type !== "checkbox",
+    ) as HTMLInputElement[];
+    expect(inputs.length).toBeGreaterThan(0);
+    for (const input of inputs) {
+      expect(input.disabled || input.getAttribute("aria-disabled") === "true").toBe(true);
+    }
+  });
+
+  it("does not commit cell changes while disabled", async () => {
+    const onDataChange = vi.fn();
+    const onCellChange = vi.fn();
+    const { container } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={editableColumns}
+        layout="table"
+        disabled
+        onDataChange={onDataChange}
+        onCellChange={onCellChange}
+      />,
+    );
+    const input = [...container.querySelectorAll("input")].find((el) => el.type !== "checkbox")!;
+    fireEvent.change(input, { target: { value: "Changed" } });
+    fireEvent.blur(input);
+    await waitFor(() => {
+      expect(onDataChange).not.toHaveBeenCalled();
+      expect(onCellChange).not.toHaveBeenCalled();
+    });
+  });
+
+  it("sort header press is inert while disabled (enabled twin sorts)", async () => {
+    const enabled = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns}
+        layout="table"
+        enableSorting
+        onStateChange={vi.fn()}
+      />,
+    );
+    const enabledHeader = enabled.container.querySelector("#firstName-header")!;
+    fireEvent.click(enabledHeader);
+    await waitFor(() => {
+      expect(enabledHeader.getAttribute("aria-sort")).toBe("ascending");
+    });
+
+    const disabledRender = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns}
+        layout="table"
+        enableSorting
+        disabled
+        onStateChange={vi.fn()}
+      />,
+    );
+    const disabledHeader = disabledRender.container.querySelector("#firstName-header")!;
+    fireEvent.click(disabledHeader);
+    await waitFor(() => {
+      expect(disabledHeader.getAttribute("aria-sort")).toBe("none");
+    });
+    expect(firstNameOrder(disabledRender.container)).toEqual(["John", "Jane", "Bob"]);
+  });
+
+  it("row selection checkboxes render disabled and do not toggle", async () => {
+    const { container, getAllByLabelText } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns}
+        layout="table"
+        enableRowSelection
+        disabled
+        onStateChange={vi.fn()}
+      />,
+    );
+    const rowCheckbox = getAllByLabelText(/^Select row 1$/)[0];
+    fireEvent.click(rowCheckbox);
+    await waitFor(() => {
+      expect(container.querySelectorAll('[aria-checked="true"]').length).toBe(0);
+    });
+  });
+
+  it("Add Row button renders disabled", () => {
+    const { getByLabelText } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns}
+        layout="table"
+        showAddRow
+        disabled
+        onDataChange={vi.fn()}
+      />,
+    );
+    const addRow = getByLabelText("Add Row").closest("button, [role='button']") as HTMLElement;
+    expect(
+      (addRow as HTMLButtonElement).disabled || addRow.getAttribute("aria-disabled") === "true",
+    ).toBe(true);
+  });
+
+  it("delete row is gated while disabled", async () => {
+    const onDataChange = vi.fn();
+    const { getAllByLabelText } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns}
+        layout="table"
+        showDeleteRow
+        disabled
+        onDataChange={onDataChange}
+      />,
+    );
+    fireEvent.click(getAllByLabelText(/^Delete row 1$/)[0]);
+    await waitFor(() => {
+      expect(onDataChange).not.toHaveBeenCalled();
+    });
+  });
+});
+
+describe("DataTable disabled contract (card layout)", () => {
+  it("card layout renders with disabled chrome and inert controls", async () => {
+    const onDataChange = vi.fn();
+    const { container, getByLabelText, getAllByLabelText } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns}
+        enableRowSelection
+        enableSorting
+        showDeleteRow
+        disabled
+        onDataChange={onDataChange}
+        onStateChange={vi.fn()}
+      />,
+    );
+    // Cards render (default below $sm in the test env) with the root marked.
+    expect(container.querySelector('[data-testid="data-table-cards"]')).not.toBeNull();
+    expect(container.querySelector('[aria-disabled="true"]')).not.toBeNull();
+
+    // Sort menu trigger renders disabled.
+    const sortButton = getByLabelText("Sort rows").closest(
+      "button, [role='button']",
+    ) as HTMLElement;
+    expect(
+      (sortButton as HTMLButtonElement).disabled ||
+        sortButton.getAttribute("aria-disabled") === "true",
+    ).toBe(true);
+
+    // Row delete is gated.
+    fireEvent.click(getAllByLabelText(/^Delete row 1$/)[0]);
+    await waitFor(() => {
+      expect(onDataChange).not.toHaveBeenCalled();
+    });
+
+    // Selection does not toggle.
+    fireEvent.click(getAllByLabelText(/^Select row 1$/)[0]);
+    await waitFor(() => {
+      expect(container.querySelectorAll('[aria-checked="true"]').length).toBe(0);
+    });
+  });
+});

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

@@ -0,0 +1,80 @@
+// RTL directional icons (rtl-audit backlog #1): the row-expansion caret
+// encodes the expansion direction (inline-end), so it must mirror under RTL
+// via the useDirection glyph swap (CaretRight ⇄ CaretLeft). The storybook
+// with-row-expansion story currently renders no expansion column (mid-wave),
+// so this spec is the direct evidence for the DataTableRoot caret path.
+import { createColumnHelper } from "@tanstack/react-table";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+type Person = { id: number; name: string; subRows?: Person[] };
+
+const data: Person[] = [
+  { id: 1, name: "John", subRows: [{ id: 11, name: "John Detail" }] },
+  { id: 2, name: "Jane" },
+];
+
+const columnHelper = createColumnHelper<Person>();
+const columns: DataTableColumn<Person>[] = [
+  columnHelper.accessor("id", { header: "ID" }) as DataTableColumn<Person>,
+  columnHelper.accessor("name", { header: "Name" }) as DataTableColumn<Person>,
+];
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: {
+      en: {
+        translation: {
+          "Expand row {{row}}": "Expand row {{row}}",
+          "Collapse row {{row}}": "Collapse row {{row}}",
+        },
+      },
+    },
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  document.documentElement.removeAttribute("dir");
+});
+
+function renderTable() {
+  renderWithProviders(
+    // layout="table": jsdom media queries report sm=false, which would flip
+    // the auto layout to mobile cards (no expansion column there).
+    <DataTable
+      data={data}
+      columns={columns}
+      enableRowExpansion
+      layout="table"
+      onStateChange={vi.fn()}
+    />,
+  );
+  const expandButton = screen.getAllByLabelText(/^Expand row \d+$/)[0];
+  const path = expandButton?.querySelector("svg path")?.getAttribute("d");
+  return { expandButton, path };
+}
+
+describe("DataTable expand caret RTL mirroring", () => {
+  it("renders the collapsed caret and mirrors the glyph under RTL", () => {
+    const ltr = renderTable();
+    expect(ltr.expandButton).toBeTruthy();
+    expect(ltr.path).toBeTruthy();
+    cleanup();
+
+    document.documentElement.setAttribute("dir", "rtl");
+    const rtl = renderTable();
+    expect(rtl.expandButton).toBeTruthy();
+    expect(rtl.path).toBeTruthy();
+
+    // Directional pair swapped: CaretRight (LTR) ⇄ CaretLeft (RTL).
+    expect(rtl.path).not.toBe(ltr.path);
+  });
+});

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

@@ -0,0 +1,155 @@
+/**
+ * Header-click sorting regression specs.
+ *
+ * Dispatch context: header-click sorting was reported broken in Storybook
+ * web for all DataTable stories (2026-08-12, pagination agent). The report
+ * did not reproduce against current source — browser probes show the full
+ * asc→desc→clear cycle working on every story (see
+ * p-results/fix-datefilter-headersort.md). These specs pin the whole path —
+ * primitives press wiring → TanStack toggle handler → useTableSorting state
+ * → aria-sort/indicator/row render — so a regression at ANY layer fails
+ * loudly, plus the keyboard operability added with that dispatch.
+ *
+ * layout="table" pins the grid below the $sm test-env breakpoint (the
+ * card layout has no header cells).
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn, DataTableState } from "../../types";
+import { DataTable } from "./index";
+
+type Person = {
+  id: number;
+  firstName: string;
+  age: number;
+};
+
+// Crafted so original / ascending / descending orders are all distinct.
+const sampleData: Person[] = [
+  { id: 1, firstName: "Charlie", age: 30 },
+  { id: 2, firstName: "Alice", age: 40 },
+  { id: 3, firstName: "Bob", age: 20 },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "age", header: "Age" },
+];
+
+function renderTable(extraProps: Record<string, unknown> = {}) {
+  const states: DataTableState[] = [];
+  const result = renderWithProviders(
+    <DataTable
+      data={sampleData}
+      columns={columns as DataTableColumn<Record<string, any>>[]}
+      layout="table"
+      enableSorting
+      onStateChange={(state) => states.push(state)}
+      {...extraProps}
+    />,
+  );
+  const header = () => result.container.querySelector("#firstName-header") as HTMLElement;
+  const rowOrder = () =>
+    Array.from(result.container.querySelectorAll(".is_TableBody .is_TableRow"))
+      .map(
+        (row) =>
+          ["Alice", "Bob", "Charlie"].find((name) => row.textContent?.includes(name)) ?? null,
+      )
+      .filter((name): name is string => name !== null);
+  return { ...result, states, header, rowOrder };
+}
+
+describe("DataTable header sorting (web grid)", () => {
+  it("cycles asc → desc → clear on header clicks, with aria-sort, row order, and sorting state in lockstep", async () => {
+    const { header, rowOrder, states } = renderTable();
+
+    expect(header()).not.toBeNull();
+    expect(header().getAttribute("aria-sort")).toBe("none");
+    expect(rowOrder()).toEqual(["Charlie", "Alice", "Bob"]);
+
+    // 1st click: ascending (string column sorts asc first)
+    fireEvent.click(header());
+    await waitFor(() => expect(header().getAttribute("aria-sort")).toBe("ascending"));
+    expect(rowOrder()).toEqual(["Alice", "Bob", "Charlie"]);
+    expect(states.at(-1)?.sorting).toEqual([{ id: "firstName", desc: false }]);
+
+    // 2nd click: descending
+    fireEvent.click(header());
+    await waitFor(() => expect(header().getAttribute("aria-sort")).toBe("descending"));
+    expect(rowOrder()).toEqual(["Charlie", "Bob", "Alice"]);
+    expect(states.at(-1)?.sorting).toEqual([{ id: "firstName", desc: true }]);
+
+    // 3rd click: clear — original order restored
+    fireEvent.click(header());
+    await waitFor(() => expect(header().getAttribute("aria-sort")).toBe("none"));
+    expect(rowOrder()).toEqual(["Charlie", "Alice", "Bob"]);
+    expect(states.at(-1)?.sorting).toEqual([]);
+  });
+
+  it("only the sorted column advertises a direction; siblings stay aria-sort=none", async () => {
+    const { container, header } = renderTable();
+
+    fireEvent.click(header());
+    await waitFor(() => expect(header().getAttribute("aria-sort")).toBe("ascending"));
+    const ageHeader = container.querySelector("#age-header") as HTMLElement;
+    expect(ageHeader.getAttribute("aria-sort")).toBe("none");
+  });
+
+  it("renders a distinct sort indicator per direction (unsorted / asc / desc icons differ)", async () => {
+    const { header } = renderTable();
+    const icon = () => header().querySelector("svg")?.outerHTML ?? "";
+
+    const noneIcon = icon();
+    expect(noneIcon).not.toBe("");
+
+    fireEvent.click(header());
+    await waitFor(() => expect(header().getAttribute("aria-sort")).toBe("ascending"));
+    const ascIcon = icon();
+    expect(ascIcon).not.toBe(noneIcon);
+
+    fireEvent.click(header());
+    await waitFor(() => expect(header().getAttribute("aria-sort")).toBe("descending"));
+    const descIcon = icon();
+    expect(descIcon).not.toBe(ascIcon);
+  });
+
+  it("sortable headers are keyboard-operable: tab target + Enter/Space toggle (WCAG 2.1.1)", async () => {
+    const { header } = renderTable();
+
+    expect(header().getAttribute("tabindex")).toBe("0");
+
+    fireEvent.keyDown(header(), { key: "Enter" });
+    await waitFor(() => expect(header().getAttribute("aria-sort")).toBe("ascending"));
+
+    fireEvent.keyDown(header(), { key: " " });
+    await waitFor(() => expect(header().getAttribute("aria-sort")).toBe("descending"));
+
+    fireEvent.keyDown(header(), { key: "Enter" });
+    await waitFor(() => expect(header().getAttribute("aria-sort")).toBe("none"));
+  });
+
+  it("non-sortable headers get no press affordance, no tab stop, and no aria-sort", () => {
+    const { container } = renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={
+          [
+            { accessorKey: "firstName", header: "First Name", enableSorting: false },
+            { accessorKey: "age", header: "Age" },
+          ] as DataTableColumn<Record<string, any>>[]
+        }
+        layout="table"
+        enableSorting
+        onStateChange={vi.fn()}
+      />,
+    );
+    const header = container.querySelector("#firstName-header") as HTMLElement;
+    expect(header.getAttribute("aria-sort")).toBeNull();
+    expect(header.getAttribute("tabindex")).toBeNull();
+
+    fireEvent.click(header);
+    expect(header.getAttribute("aria-sort")).toBeNull();
+  });
+});