@multiplatform.one/table 6.1.0 → 6.4.0

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

@@ -0,0 +1,294 @@
+/**
+ * Responsive card-layout specs.
+ *
+ * In the happy-dom test env Tamagui's useMedia resolves { sm: false }
+ * (below the `$sm` breakpoint), so layout="auto" renders the card list
+ * by default and layout="table" pins the grid — both directions of the
+ * breakpoint switch are exercised without resizing a window.
+ *
+ * Covers: breakpoint/override switching, card anatomy (title slot +
+ * label/value rows), column visibility, sorting order, global search,
+ * column filters, the card sort/filter controls, the SimpleTable layout
+ * override, and the Table primitives card layout.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, waitFor, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Table } from "@multiplatform.one/table-primitives";
+import type { DataTableColumn } from "../../types";
+import { SimpleTable } from "../SimpleTable";
+import { DataTable } from "./index";
+
+type Person = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  age: number;
+  email: string;
+};
+
+const sampleData: Person[] = [
+  { id: 1, firstName: "John", lastName: "Doe", age: 28, email: "john@example.com" },
+  { id: 2, firstName: "Jane", lastName: "Smith", age: 32, email: "jane@example.com" },
+  { id: 3, firstName: "Bob", lastName: "Johnson", age: 45, email: "bob@example.com" },
+  { id: 4, firstName: "Alice", lastName: "Williams", age: 22, email: "alice@example.com" },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "lastName", header: "Last Name" },
+  { accessorKey: "age", header: "Age" },
+  { accessorKey: "email", header: "Email" },
+];
+
+function getCards(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll('[data-testid="data-table-card"]'));
+}
+
+describe("DataTable card layout", () => {
+  describe("layout switching", () => {
+    it("renders cards below the sm breakpoint with layout=auto (default)", () => {
+      const { container } = renderWithProviders(
+        <DataTable data={sampleData} columns={columns} onStateChange={vi.fn()} />,
+      );
+      expect(container.querySelector('[data-testid="data-table-cards"]')).not.toBeNull();
+      expect(container.querySelector(".is_Table")).toBeNull();
+      expect(getCards(container).length).toBe(sampleData.length);
+    });
+
+    it("layout=table pins the grid even below the sm breakpoint", () => {
+      const { container } = renderWithProviders(
+        <DataTable data={sampleData} columns={columns} layout="table" onStateChange={vi.fn()} />,
+      );
+      expect(container.querySelector('[data-testid="data-table-cards"]')).toBeNull();
+      expect(container.querySelector(".is_Table")).not.toBeNull();
+    });
+
+    it("layout=cards pins the card list", () => {
+      const { container } = renderWithProviders(
+        <DataTable data={sampleData} columns={columns} layout="cards" onStateChange={vi.fn()} />,
+      );
+      expect(container.querySelector('[data-testid="data-table-cards"]')).not.toBeNull();
+      expect(container.querySelector(".is_Table")).toBeNull();
+    });
+  });
+
+  describe("card anatomy", () => {
+    it("renders the first visible column as the card title and the rest as label/value rows", () => {
+      const { container } = renderWithProviders(
+        <DataTable data={sampleData} columns={columns} onStateChange={vi.fn()} />,
+      );
+      const [firstCard] = getCards(container);
+      expect(firstCard).toBeDefined();
+
+      // Title slot holds the primary column value, without a label row.
+      const title = firstCard.querySelector('[data-card-slot="title"]');
+      expect(title).not.toBeNull();
+      expect(title!.textContent).toContain("John");
+      expect(within(firstCard).queryByText("First Name")).toBeNull();
+
+      // Remaining visible columns render as label/value rows.
+      expect(within(firstCard).getByText("Last Name")).toBeDefined();
+      expect(within(firstCard).getByText("Age")).toBeDefined();
+      expect(within(firstCard).getByText("Email")).toBeDefined();
+      expect(firstCard.textContent).toContain("Doe");
+      expect(firstCard.textContent).toContain("28");
+    });
+
+    it("respects column visibility (hidden columns stay hidden in cards)", () => {
+      const { container } = renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          initialState={{ columnVisibility: { email: false } }}
+          onStateChange={vi.fn()}
+        />,
+      );
+      const [firstCard] = getCards(container);
+      expect(within(firstCard).queryByText("Email")).toBeNull();
+      expect(firstCard.textContent).not.toContain("john@example.com");
+    });
+  });
+
+  describe("state features in card layout", () => {
+    it("initial sorting orders the cards", () => {
+      const { container } = renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          initialState={{ sorting: [{ id: "age", desc: false }] }}
+          onStateChange={vi.fn()}
+        />,
+      );
+      const titles = getCards(container).map(
+        (card) => card.querySelector('[data-card-slot="title"]')!.textContent,
+      );
+      // Ascending age: Alice (22), John (28), Jane (32), Bob (45)
+      expect(titles).toEqual(["Alice", "John", "Jane", "Bob"]);
+    });
+
+    it("sort control cycles column sorting and reorders cards", async () => {
+      const { container, getByLabelText, findByLabelText } = renderWithProviders(
+        <DataTable data={sampleData} columns={columns} onStateChange={vi.fn()} />,
+      );
+      fireEvent.click(getByLabelText("Sort rows"));
+      const ageItem = await findByLabelText("Sort by Age");
+      fireEvent.click(ageItem);
+
+      await waitFor(() => {
+        const titles = getCards(container).map(
+          (card) => card.querySelector('[data-card-slot="title"]')!.textContent,
+        );
+        expect(titles).toEqual(["Alice", "John", "Jane", "Bob"]);
+      });
+
+      // Second activation flips to descending.
+      fireEvent.click(ageItem);
+      await waitFor(() => {
+        const titles = getCards(container).map(
+          (card) => card.querySelector('[data-card-slot="title"]')!.textContent,
+        );
+        expect(titles).toEqual(["Bob", "Jane", "John", "Alice"]);
+      });
+    });
+
+    it("global search filters the cards", async () => {
+      const { container, getByLabelText } = renderWithProviders(
+        <DataTable data={sampleData} columns={columns} onStateChange={vi.fn()} />,
+      );
+      expect(getCards(container).length).toBe(4);
+      const search = getByLabelText("Search table data");
+      fireEvent.change(search, { target: { value: "Jane" } });
+      await waitFor(() => {
+        expect(getCards(container).length).toBe(1);
+        expect(getCards(container)[0].textContent).toContain("Jane");
+      });
+    });
+
+    it("column filters filter the cards", () => {
+      const { container } = renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          initialState={{
+            columnFilters: [{ id: "firstName", value: { operator: "contains", value: "jo" } }],
+          }}
+          onStateChange={vi.fn()}
+        />,
+      );
+      const titles = getCards(container).map(
+        (card) => card.querySelector('[data-card-slot="title"]')!.textContent,
+      );
+      expect(titles).toEqual(["John"]);
+    });
+
+    it("renders the filter chrome (Add Filter) in card layout", () => {
+      const { getByText } = renderWithProviders(
+        <DataTable data={sampleData} columns={columns} onStateChange={vi.fn()} />,
+      );
+      expect(getByText("Add Filter")).toBeDefined();
+    });
+
+    it("hides sort/filter chrome when sorting and filtering are disabled", () => {
+      const { queryByLabelText, queryByText } = renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          enableSorting={false}
+          enableFiltering={false}
+          onStateChange={vi.fn()}
+        />,
+      );
+      expect(queryByLabelText("Sort rows")).toBeNull();
+      expect(queryByText("Add Filter")).toBeNull();
+    });
+
+    it("row selection works in card layout", () => {
+      const { container, getAllByLabelText } = renderWithProviders(
+        <DataTable
+          data={sampleData}
+          columns={columns}
+          enableRowSelection={true}
+          onStateChange={vi.fn()}
+        />,
+      );
+      expect(getAllByLabelText(/^Select row \d+$/).length).toBe(sampleData.length);
+      expect(container.querySelector('[data-testid="data-table-cards"]')).not.toBeNull();
+    });
+  });
+});
+
+describe("SimpleTable layout override", () => {
+  const simpleColumns = [
+    { accessorKey: "name", header: "Name" },
+    { accessorKey: "value", header: "Value" },
+  ];
+  const simpleData = [
+    { name: "Item 1", value: "100" },
+    { name: "Item 2", value: "200" },
+  ];
+
+  it("layout=table pins the grid below the sm breakpoint", () => {
+    const { container } = renderWithProviders(
+      <SimpleTable data={simpleData} columns={simpleColumns} layout="table" />,
+    );
+    expect(container.querySelector('[data-testid="simple-table-cards"]')).toBeNull();
+    expect(container.querySelector(".is_Table")).not.toBeNull();
+  });
+
+  it("layout=cards pins the card list", () => {
+    const { container } = renderWithProviders(
+      <SimpleTable data={simpleData} columns={simpleColumns} layout="cards" />,
+    );
+    expect(container.querySelector('[data-testid="simple-table-cards"]')).not.toBeNull();
+  });
+});
+
+describe("Table primitives card layout", () => {
+  function PrimitiveTable({ layout }: { layout?: "auto" | "table" | "cards" }) {
+    return (
+      <Table layout={layout}>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>City</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>John Doe</Table.Cell>
+            <Table.Cell>New York</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Jane Smith</Table.Cell>
+            <Table.Cell>Los Angeles</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    );
+  }
+
+  it("defaults to the semantic table (no behavior change for existing consumers)", () => {
+    const { container } = renderWithProviders(<PrimitiveTable />);
+    expect(container.querySelector(".is_Table")).not.toBeNull();
+    expect(container.querySelector('[data-testid="table-cards"]')).toBeNull();
+  });
+
+  it("layout=cards renders body rows as label/value cards", () => {
+    const { container, getAllByText } = renderWithProviders(<PrimitiveTable layout="cards" />);
+    expect(container.querySelector(".is_Table")).toBeNull();
+    const cards = container.querySelectorAll('[data-testid="table-card"]');
+    expect(cards.length).toBe(2);
+    // Header labels repeat per card as field labels.
+    expect(getAllByText("Name").length).toBe(2);
+    expect(getAllByText("City").length).toBe(2);
+    expect(cards[0].textContent).toContain("John Doe");
+    expect(cards[1].textContent).toContain("Los Angeles");
+  });
+
+  it("layout=auto renders cards below the sm breakpoint", () => {
+    const { container } = renderWithProviders(<PrimitiveTable layout="auto" />);
+    expect(container.querySelector('[data-testid="table-cards"]')).not.toBeNull();
+  });
+});

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

@@ -0,0 +1,282 @@
+/**
+ * Interplay matrix for the table chrome trio: Export × BulkActions × Grouping.
+ *
+ * - export while grouped → leaf rows only, no group-header artifacts
+ * - bulk-select while grouped → selection counts/payloads are leaf rows only
+ * - export with an active selection → exports the full filtered view
+ *   (documented contract: DataTableExport has no export-selected mode; a
+ *   selection-scoped export is a BulkAction concern)
+ *
+ * Plus the external-filter-authority arm: Search × injected filters ×
+ * enableFiltering — `enableFiltering={false}` suppresses every filter entry
+ * point while filters injected via `initialState.filters` keep applying and
+ * cannot be mutated from table chrome (backoffice list contract, MOD-04).
+ */
+
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { DataTable } from "./index";
+import { useDataTableState } from "./DataTableStateContext";
+
+type Item = { id: string; name: string; status: string };
+
+const rows: Item[] = [
+  { id: "1", name: "Alpha", status: "ready" },
+  { id: "2", name: "Bravo", status: "blocked" },
+  { id: "3", name: "Charlie", status: "ready" },
+  { id: "4", name: "Delta", status: "blocked" },
+];
+
+const columns = [
+  { id: "name", accessorKey: "name", header: "Name" },
+  { id: "status", accessorKey: "status", header: "Status" },
+];
+
+// Grouping state has no initialState channel — it's driven via
+// actions.setGrouping (as the toolbar's grouping config does).
+function GroupingProbe({ by }: { by: string[] }) {
+  const ctx = useDataTableState();
+  const applied = React.useRef(false);
+  React.useEffect(() => {
+    if (!applied.current && ctx?.actions.setGrouping) {
+      applied.current = true;
+      ctx.actions.setGrouping(by);
+    }
+  }, [ctx, by]);
+  return null;
+}
+
+const mockCreateObjectURL = vi.fn(() => "mock-url");
+Object.defineProperty(window.URL, "createObjectURL", {
+  writable: true,
+  value: mockCreateObjectURL,
+});
+Object.defineProperty(window.URL, "revokeObjectURL", {
+  writable: true,
+  value: vi.fn(),
+});
+
+describe("chrome interplay: Export × BulkActions × Grouping", () => {
+  it("export while grouped emits leaf rows only (no group headers, no undefined)", async () => {
+    mockCreateObjectURL.mockClear();
+
+    renderWithProviders(
+      <DataTable data={rows} columns={columns as any} enableGrouping>
+        <GroupingProbe by={["status"]} />
+        <DataTable.Export />
+      </DataTable>,
+    );
+
+    fireEvent.click(screen.getByText("CSV"));
+
+    await waitFor(() => expect(mockCreateObjectURL).toHaveBeenCalledWith(expect.any(Blob)));
+    const blob = (mockCreateObjectURL.mock.calls.at(-1) as unknown as [Blob])[0];
+    const text = await blob.text();
+    const lines = text.trim().split("\n");
+
+    // TanStack's default groupedColumnMode:"reorder" moves the grouped column
+    // to the front of the view; the export mirrors the on-screen order.
+    expect(lines[0]).toBe("Status,Name");
+    // All four leaf rows present, exactly once each.
+    expect(lines).toHaveLength(5);
+    for (const name of ["Alpha", "Bravo", "Charlie", "Delta"]) {
+      expect(lines.filter((l) => l.includes(name))).toHaveLength(1);
+    }
+    expect(text).not.toContain("undefined");
+  });
+
+  it("bulk select-all while grouped counts and delivers leaf rows only", async () => {
+    const received: Item[][] = [];
+    const bulkActions = [
+      {
+        id: "tag",
+        label: "Tag",
+        onExecute: (items: Item[]) => {
+          received.push(items);
+        },
+      },
+    ];
+
+    renderWithProviders(
+      <DataTable
+        data={rows}
+        columns={columns as any}
+        enableGrouping
+        enableRowSelection
+        bulkActions={bulkActions}
+      >
+        <GroupingProbe by={["status"]} />
+      </DataTable>,
+    );
+
+    fireEvent.click(screen.getByLabelText("Select all rows"));
+
+    // Group rows are selected transitively but never counted — the count is
+    // the leaf-row selection, and the action payload contains only real rows.
+    expect(await screen.findByText("4 selected")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("Tag"));
+    await waitFor(() => expect(received).toHaveLength(1));
+    expect(received[0].map((r) => r.id).sort()).toEqual(["1", "2", "3", "4"]);
+    expect(received[0].every((r) => r && typeof r.name === "string")).toBe(true);
+  });
+
+  it("export with an active row selection exports the full filtered view (documented contract)", async () => {
+    mockCreateObjectURL.mockClear();
+
+    renderWithProviders(
+      <DataTable
+        data={rows}
+        columns={columns as any}
+        enableRowSelection
+        bulkActions={[{ id: "noop", label: "Noop", onExecute: vi.fn() }]}
+      >
+        <DataTable.Export />
+      </DataTable>,
+    );
+
+    fireEvent.click(screen.getAllByLabelText(/^Select row/)[0]!);
+    expect(await screen.findByText("1 selected")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("CSV"));
+
+    await waitFor(() => expect(mockCreateObjectURL).toHaveBeenCalledWith(expect.any(Blob)));
+    const blob = (mockCreateObjectURL.mock.calls.at(-1) as unknown as [Blob])[0];
+    const text = await blob.text();
+    // Selection does NOT scope the default export — all 4 rows ship.
+    for (const name of ["Alpha", "Bravo", "Charlie", "Delta"]) {
+      expect(text).toContain(name);
+    }
+  });
+});
+
+describe("chrome interplay: Search × injected filters × enableFiltering", () => {
+  // layout="table" pins the grid: the happy-dom env resolves sm=false, so
+  // the auto layout would render cards (no header funnels there).
+  const injectedReadyFilter = [
+    { id: "ext-status", columnId: "status", value: { operator: "is" as const, value: "ready" } },
+  ];
+  const statusFilterField = [{ id: "status", label: "Status", type: "text" as const }];
+
+  it("enableFiltering=false renders no filter entry points while injected filters still apply", () => {
+    // Positive control first: the same composition WITH filter chrome shows
+    // every entry point, proving the suppressed-render queries can match.
+    const control = renderWithProviders(
+      <DataTable
+        data={rows}
+        columns={columns as any}
+        layout="table"
+        enableFiltering
+        filterableFields={statusFilterField}
+        initialState={{ filters: injectedReadyFilter }}
+      />,
+    );
+    expect(screen.getByLabelText("Filter")).toBeInTheDocument();
+    expect(screen.getAllByLabelText(/^Filter column/).length).toBeGreaterThan(0);
+    expect(screen.getByLabelText("Active filters")).toBeInTheDocument();
+    control.unmount();
+
+    renderWithProviders(
+      <DataTable
+        data={rows}
+        columns={columns as any}
+        layout="table"
+        enableFiltering={false}
+        filterableFields={statusFilterField}
+        initialState={{ filters: injectedReadyFilter }}
+      />,
+    );
+
+    // Injected filters keep applying: only the "ready" rows render.
+    expect(screen.getByText("Alpha")).toBeInTheDocument();
+    expect(screen.getByText("Charlie")).toBeInTheDocument();
+    expect(screen.queryByText("Bravo")).not.toBeInTheDocument();
+    expect(screen.queryByText("Delta")).not.toBeInTheDocument();
+
+    // No filter chrome: toolbar Filter button, column funnels, chips row.
+    expect(screen.queryByLabelText("Filter")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText(/^Filter column/)).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("Active filters")).not.toBeInTheDocument();
+
+    // Search survives suppression (it is not part of the filter chrome).
+    expect(screen.getByLabelText("Search table data")).toBeInTheDocument();
+  });
+
+  it("enableFiltering=false suppresses the card layout's Add Filter control too", () => {
+    // auto layout renders cards below sm (the test env default).
+    const control = renderWithProviders(
+      <DataTable
+        data={rows}
+        columns={columns as any}
+        enableFiltering
+        initialState={{ filters: injectedReadyFilter }}
+      />,
+    );
+    expect(screen.getByText("Add Filter")).toBeInTheDocument();
+    control.unmount();
+
+    renderWithProviders(
+      <DataTable
+        data={rows}
+        columns={columns as any}
+        enableFiltering={false}
+        initialState={{ filters: injectedReadyFilter }}
+      />,
+    );
+    expect(screen.queryByText("Add Filter")).not.toBeInTheDocument();
+    // Injected filters still scope the card list.
+    expect(screen.getByText("Alpha")).toBeInTheDocument();
+    expect(screen.queryByText("Bravo")).not.toBeInTheDocument();
+  });
+
+  it("search clear X preserves injected filters when enableFiltering=false", async () => {
+    renderWithProviders(
+      <DataTable
+        data={rows}
+        columns={columns as any}
+        layout="table"
+        enableFiltering={false}
+        initialState={{ filters: injectedReadyFilter }}
+      />,
+    );
+
+    const search = screen.getByRole("searchbox");
+    fireEvent.change(search, { target: { value: "Alp" } });
+    await waitFor(() => expect(screen.queryByText("Charlie")).not.toBeInTheDocument());
+    expect(screen.getByText("Alpha")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText("Clear search"));
+
+    // Search text cleared → both "ready" rows return; the injected filter
+    // is untouched (Bravo/Delta stay filtered out).
+    await waitFor(() => expect(screen.getByText("Charlie")).toBeInTheDocument());
+    expect(screen.getByText("Alpha")).toBeInTheDocument();
+    expect(screen.queryByText("Bravo")).not.toBeInTheDocument();
+    expect(screen.queryByText("Delta")).not.toBeInTheDocument();
+  });
+
+  it("search clear X clears injected filters when the table owns filtering (existing contract)", async () => {
+    renderWithProviders(
+      <DataTable
+        data={rows}
+        columns={columns as any}
+        layout="table"
+        enableFiltering
+        filterableFields={statusFilterField}
+        initialState={{ filters: injectedReadyFilter }}
+      />,
+    );
+
+    expect(screen.queryByText("Bravo")).not.toBeInTheDocument();
+
+    const search = screen.getByRole("searchbox");
+    fireEvent.change(search, { target: { value: "x" } });
+    fireEvent.click(screen.getByLabelText("Clear search"));
+
+    // Explicit clear intent with an owned filter surface clears everything.
+    await waitFor(() => expect(screen.getByText("Bravo")).toBeInTheDocument());
+    expect(screen.getByText("Delta")).toBeInTheDocument();
+  });
+});

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

@@ -48,11 +48,13 @@ describe("DataTable Compound Component", () => {
     expect(typeof DataTable.Toolbar).toBe("function");
     expect(DataTable.Toolbar).toBe(DataTableToolbar);
 
-    // Verify all 8 sub-components are attached via withStaticProperties
+    // Verify sub-components are attached via withStaticProperties
     expect(DataTable.Toolbar).toBeDefined();
     expect(DataTable.Filters).toBeDefined();
     expect(DataTable.Pagination).toBeDefined();
     expect(DataTable.BulkActions).toBeDefined();
+    expect(DataTable.SelectionToolbar).toBeDefined();
+    expect(DataTable.SelectionToolbar).toBe(DataTable.BulkActions);
     expect(DataTable.Export).toBeDefined();
     expect(DataTable.Search).toBeDefined();
     expect(DataTable.ViewOptions).toBeDefined();
@@ -116,6 +118,7 @@ describe("DataTable Compound Component", () => {
           filteredData: sampleData,
           paginatedData: sampleData,
           totalPages: 1,
+          totalRows: sampleData.length,
           hasActiveFilters: false,
           activeFilterCount: 0,
         },
@@ -193,6 +196,7 @@ describe("DataTable Compound Component", () => {
           filteredData: [sampleData[0]],
           paginatedData: [sampleData[0]],
           totalPages: 1,
+          totalRows: 1,
           hasActiveFilters: true,
           activeFilterCount: 1,
         },
@@ -316,6 +320,7 @@ describe("DataTable Compound Component", () => {
           filteredData: sampleData,
           paginatedData: sampleData,
           totalPages: 1,
+          totalRows: sampleData.length,
           hasActiveFilters: false,
           activeFilterCount: 0,
         },