@multiplatform.one/table 6.1.0 → 6.3.0

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

@@ -0,0 +1,118 @@
+/**
+ * DataTable paginationMode specs — pages (default, footer pager) vs
+ * infinite (tail status + accumulation, no footer pager), plus the
+ * loader-mode prefetch contract observed through the component.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn, PageLoadQuery, PageLoadResult } from "../../types";
+import { DataTable } from "./index";
+
+type Row = { id: number; name: string };
+
+const rows: Row[] = Array.from({ length: 50 }, (_, i) => ({
+  id: i + 1,
+  name: `Row ${i + 1}`,
+}));
+
+const columns: DataTableColumn<Row>[] = [
+  { accessorKey: "id", header: "ID" },
+  { accessorKey: "name", header: "Name" },
+];
+
+const query = (container: HTMLElement, testId: string) =>
+  container.querySelector(`[data-testid="${testId}"]`);
+
+describe("DataTable paginationMode", () => {
+  it("pages mode (default) renders the footer pager and no infinite tail", () => {
+    const { container, getByLabelText } = renderWithProviders(
+      <DataTable data={rows} columns={columns} readOnly />,
+    );
+    // Catalog Pagination signature (numbered variant next-page control).
+    expect(getByLabelText("Go to next page")).toBeDefined();
+    expect(query(container, "infinite-status")).toBeNull();
+  });
+
+  it("infinite mode hides the footer pager and renders the tail status", () => {
+    const { container, queryByLabelText, getByText } = renderWithProviders(
+      <DataTable
+        data={rows}
+        columns={columns}
+        readOnly
+        paginationMode="infinite"
+        initialState={{ pagination: { pageIndex: 0, pageSize: 10 } }}
+      />,
+    );
+    expect(queryByLabelText("Go to next page")).toBeNull();
+    const status = query(container, "infinite-status");
+    expect(status).not.toBeNull();
+    expect(status!.getAttribute("aria-live")).toBe("polite");
+    // Client mode reveals only the first chunk.
+    expect(getByText("Row 1")).toBeDefined();
+    expect(status!.textContent).toContain("10");
+    expect(status!.textContent).toContain("50");
+  });
+
+  it("switching modes swaps chrome without losing data", () => {
+    const { container, rerender, queryByLabelText, getByLabelText } = renderWithProviders(
+      <DataTable data={rows} columns={columns} readOnly paginationMode="pages" />,
+    );
+    expect(getByLabelText("Go to next page")).toBeDefined();
+
+    rerender(<DataTable data={rows} columns={columns} readOnly paginationMode="infinite" />);
+    expect(queryByLabelText("Go to next page")).toBeNull();
+    expect(query(container, "infinite-status")).not.toBeNull();
+
+    rerender(<DataTable data={rows} columns={columns} readOnly paginationMode="pages" />);
+    expect(getByLabelText("Go to next page")).toBeDefined();
+    expect(query(container, "infinite-status")).toBeNull();
+  });
+
+  it("loader mode prefetches page 1 while page 0 renders", async () => {
+    const loader = vi.fn(async (q: PageLoadQuery): Promise<PageLoadResult<Row>> => {
+      const start = q.pageIndex * q.pageSize;
+      return { rows: rows.slice(start, start + q.pageSize), totalCount: rows.length };
+    });
+    const { getByText } = renderWithProviders(
+      <DataTable
+        data={[]}
+        columns={columns}
+        readOnly
+        paginationMode="infinite"
+        loadPage={loader}
+        initialState={{ pagination: { pageIndex: 0, pageSize: 10 } }}
+      />,
+    );
+
+    await waitFor(() => expect(getByText("Row 1")).toBeDefined());
+    // Prefetch-ahead: page 1 requested while page 0 is the visible page.
+    await waitFor(() => {
+      const requested = loader.mock.calls.map(([q]) => q.pageIndex);
+      expect(requested).toEqual([0, 1]);
+    });
+  });
+
+  it("loader mode shows honest end state when the loader is empty", async () => {
+    const loader = vi.fn(
+      async (_q: PageLoadQuery): Promise<PageLoadResult<Row>> => ({ rows: [], totalCount: 0 }),
+    );
+    const { container } = renderWithProviders(
+      <DataTable
+        data={[]}
+        columns={columns}
+        readOnly
+        paginationMode="infinite"
+        loadPage={loader}
+      />,
+    );
+    await waitFor(() => {
+      const status = query(container, "infinite-status");
+      expect(status).not.toBeNull();
+      expect(status!.textContent?.length).toBeGreaterThan(0);
+    });
+    // Exactly one page-0 probe; nothing else to prefetch.
+    expect(loader.mock.calls.map(([q]) => q.pageIndex)).toEqual([0]);
+  });
+});

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

@@ -0,0 +1,144 @@
+/**
+ * Column-pinning scroll/sticky geometry (LTR breakage fix).
+ *
+ * Sticky resolves against the NEAREST scroll container, so pinning requires
+ * ONE horizontal scrollport wrapping header + body: the content View takes
+ * `overflow-x: auto`, the Table floors at max-content with overflow visible,
+ * and Table.Body drops its flex-variant `overflowY: auto` (which computes
+ * overflow-x: auto and made TBODY its own scroller — headers, outside it,
+ * never moved with the columns).
+ *
+ * jsdom/happy-dom can't scroll, so these specs pin the GEOMETRY contract:
+ * which element owns overflow, that the intermediate boxes are not scroll
+ * containers, that pinned cells are sticky with correct logical insets, and
+ * that pinned columns render at exactly getSize() in the flexed equal layout.
+ */
+
+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; lastName: string; age: number };
+
+const sampleData: Person[] = [
+  { id: 1, firstName: "John", lastName: "Doe", age: 28 },
+  { id: 2, firstName: "Jane", lastName: "Smith", age: 32 },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "id", header: "ID" },
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "lastName", header: "Last Name" },
+  { accessorKey: "age", header: "Age" },
+];
+
+function renderPinned(extraProps: Record<string, any> = {}) {
+  return renderWithProviders(
+    <DataTable
+      data={sampleData}
+      columns={columns}
+      layout="table"
+      enableColumnPinning
+      onStateChange={vi.fn()}
+      {...extraProps}
+    />,
+  );
+}
+
+/**
+ * Tamagui compiles style props to atomic classes (`_ox-auto`, `_oy-visible`)
+ * on web; consumer `style={{…}}` objects stay inline. Accept either channel.
+ */
+function hasStyle(el: HTMLElement, inlineKey: string, value: string, atomicToken: string): boolean {
+  return (el.style as any)[inlineKey] === value || String(el.className).includes(atomicToken);
+}
+
+async function pinIdColumn(utils: ReturnType<typeof renderPinned>) {
+  fireEvent.click(utils.getByLabelText("Pin ID column left"));
+  await waitFor(() => {
+    expect(utils.getByLabelText("Pin ID column right")).toBeDefined();
+  });
+}
+
+describe("column pinning geometry", () => {
+  it("content View owns horizontal overflow; Table and Body are not scroll containers", () => {
+    const { container } = renderPinned();
+    const contentView = container.querySelector('[aria-label="Data table content"]') as HTMLElement;
+    expect(contentView).not.toBeNull();
+    expect(hasStyle(contentView, "overflowX", "auto", "_ox-auto")).toBe(true);
+
+    const table = container.querySelector('[role="table"]') as HTMLElement;
+    // minWidth: max-content rides the consumer style object (inline).
+    expect(table.style.minWidth).toBe("max-content");
+    // overflow visible replaces the scroll-container-creating hidden base.
+    expect(hasStyle(table, "overflow", "visible", "_ox-visible")).toBe(true);
+    expect(String(table.className).includes("_ox-hidden")).toBe(false);
+
+    const body = container.querySelector('[aria-label="Table data"]') as HTMLElement;
+    expect(hasStyle(body, "overflowY", "visible", "_oy-visible")).toBe(true);
+    expect(String(body.className).includes("_oy-auto")).toBe(false);
+  });
+
+  it("without pinning, the equal layout keeps its original geometry", () => {
+    const { container } = renderWithProviders(
+      <DataTable data={sampleData} columns={columns} layout="table" onStateChange={vi.fn()} />,
+    );
+    const contentView = container.querySelector('[aria-label="Data table content"]') as HTMLElement;
+    expect(hasStyle(contentView, "overflowX", "auto", "_ox-auto")).toBe(false);
+    const table = container.querySelector('[role="table"]') as HTMLElement;
+    expect(table.style.minWidth).not.toBe("max-content");
+  });
+
+  it("pinned header AND body cells are sticky with logical start inset 0", async () => {
+    const utils = renderPinned();
+    await pinIdColumn(utils);
+    const { container } = utils;
+
+    const headerCell = container.querySelector("#id-header") as HTMLElement;
+    expect(headerCell.style.position).toBe("sticky");
+    expect(headerCell.style.insetInlineStart).toBe("0px");
+    expect(headerCell.style.zIndex).toBe("2");
+
+    const row1 = container.querySelector('[role="row"][aria-label="Row 1"]')!;
+    const firstCell = row1.querySelector('[role="cell"], td') as HTMLElement;
+    expect(firstCell.style.position).toBe("sticky");
+    expect(firstCell.style.insetInlineStart).toBe("0px");
+    expect(firstCell.style.zIndex).toBe("2");
+  });
+
+  it("pinned columns render at exactly getSize() (clamped) in the flexed equal layout", async () => {
+    const utils = renderPinned();
+    await pinIdColumn(utils);
+    const headerCell = utils.container.querySelector("#id-header") as HTMLElement;
+    // TanStack default size 150: width/min/max clamp beats any flex resolution
+    // so getStickyStyle offsets (summed getSize()) stay true.
+    expect(hasStyle(headerCell, "width", "150px", "_w-150px")).toBe(true);
+    expect(hasStyle(headerCell, "minWidth", "150px", "_miw-150px")).toBe(true);
+    expect(hasStyle(headerCell, "maxWidth", "150px", "_maw-150px")).toBe(true);
+    expect(hasStyle(headerCell, "flexGrow", "0", "_fg-0")).toBe(true);
+    expect(hasStyle(headerCell, "flexShrink", "0", "_fs-0")).toBe(true);
+  });
+
+  it("body cells clip their content in the pinning mode (no bleed-through)", () => {
+    const { container } = renderPinned();
+    const row1 = container.querySelector('[role="row"][aria-label="Row 1"]')!;
+    const cells = [...row1.querySelectorAll('[role="cell"], td')] as HTMLElement[];
+    expect(cells.length).toBeGreaterThan(0);
+    for (const cell of cells) {
+      expect(hasStyle(cell, "overflow", "hidden", "_ox-hidden")).toBe(true);
+    }
+  });
+
+  it("second left-pinned column offsets by the first column's getSize()", async () => {
+    const utils = renderPinned({ maxPinnedColumns: 3 });
+    await pinIdColumn(utils);
+    fireEvent.click(utils.getByLabelText("Pin First Name column left"));
+    await waitFor(() => {
+      const headerCell = utils.container.querySelector("#firstName-header") as HTMLElement;
+      expect(headerCell.style.position).toBe("sticky");
+      expect(headerCell.style.insetInlineStart).toBe("150px");
+    });
+  });
+});

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

@@ -0,0 +1,97 @@
+// DG-A11Y-06: repeated row actions get differentiated accessible names from
+// row identity. Before this pass every per-row action carried the identical
+// name ("Delete row" xN, unlabeled chip removes); the names now template the
+// row number / item identity through the i18n t() pattern. This spec runs
+// with an initialized i18next instance (mirroring the packages/i18n keys) so
+// it verifies the real interpolated names, not the raw keys.
+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";
+import { TableInput } from "../TableInput";
+
+type Person = { id: number; name: string };
+
+const sampleData: Person[] = [
+  { id: 1, name: "John" },
+  { id: 2, name: "Jane" },
+  { id: 3, name: "Bob" },
+];
+
+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 () => {
+  // Same natural-language keys registered in packages/i18n/en/common.json.
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: {
+      en: {
+        translation: {
+          "Delete row {{row}}": "Delete row {{row}}",
+          "Select row {{row}}": "Select row {{row}}",
+          "Expand row {{row}}": "Expand row {{row}}",
+          "Collapse row {{row}}": "Collapse row {{row}}",
+          "Row {{row}}": "Row {{row}}",
+        },
+      },
+    },
+  });
+});
+
+afterEach(cleanup);
+
+describe("row action accessible names (DG-A11Y-06)", () => {
+  it("DataTable delete buttons carry unique row-numbered names", () => {
+    renderWithProviders(
+      <DataTable
+        data={sampleData}
+        columns={columns}
+        showDeleteRow
+        onDataChange={vi.fn()}
+        onStateChange={vi.fn()}
+      />,
+    );
+    const labels = screen
+      .getAllByLabelText(/^Delete row \d+$/)
+      .map((el) => el.getAttribute("aria-label"));
+    expect(labels.length).toBe(sampleData.length);
+    expect(new Set(labels).size).toBe(sampleData.length);
+    expect(labels).toContain("Delete row 1");
+    expect(labels).toContain("Delete row 3");
+  });
+
+  it("DataTable row selection checkboxes carry unique row-numbered names", () => {
+    renderWithProviders(
+      <DataTable data={sampleData} columns={columns} enableRowSelection onStateChange={vi.fn()} />,
+    );
+    const labels = screen
+      .getAllByLabelText(/^Select row \d+$/)
+      .map((el) => el.getAttribute("aria-label"));
+    expect(labels.length).toBe(sampleData.length);
+    expect(new Set(labels).size).toBe(sampleData.length);
+  });
+
+  it("TableInput delete buttons carry unique row-numbered names", () => {
+    renderWithProviders(
+      <TableInput<Person>
+        data={sampleData}
+        columns={columns}
+        showDeleteRow
+        onDataChange={vi.fn()}
+      />,
+    );
+    const labels = screen
+      .getAllByLabelText(/^Delete row \d+$/)
+      .map((el) => el.getAttribute("aria-label"));
+    expect(labels).toEqual(["Delete row 1", "Delete row 2", "Delete row 3"]);
+  });
+});

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

@@ -0,0 +1,99 @@
+/**
+ * Grouped rows inside the virtualized body (grouping × virtualization
+ * interplay). A TanStack group row must render as a group header with an
+ * expand toggle — not fall through renderRowContent as a fake data row.
+ */
+
+import { fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { DataTableVirtualized } from "./DataTableVirtualized";
+
+function makeGroupRow(overrides: Partial<Record<string, any>> = {}) {
+  return {
+    id: "region:Electronics",
+    depth: 0,
+    groupingValue: "Electronics",
+    subRows: [{ id: "1" }, { id: "2" }],
+    getIsGrouped: () => true,
+    getIsExpanded: vi.fn(() => false),
+    toggleExpanded: vi.fn(),
+    ...overrides,
+  };
+}
+
+function makeDataRow(id: string) {
+  return {
+    id,
+    depth: 0,
+    getIsGrouped: () => false,
+    getVisibleCells: () => [],
+    original: { id },
+  };
+}
+
+const baseProps = {
+  totalSize: 80,
+  bodyScrollRef: createRef<HTMLDivElement>(),
+  virtualizationHeight: 200,
+  headerGroups: [],
+  showRowNumbers: false,
+  enableRowExpansion: false,
+  showDeleteRow: false,
+  readOnly: false,
+  enableKeyboardNavigation: false,
+  keyboardNav: {},
+  getColSizeProps: () => ({}),
+  extraColumnsBefore: 0,
+  extraColumnsAfter: 0,
+  table: {},
+};
+
+describe("DataTableVirtualized × grouping", () => {
+  it("renders a group header (not data cells) for grouped rows", () => {
+    const groupRow = makeGroupRow();
+    const renderRowContent = vi.fn(() => <div data-testid="data-cells" />);
+
+    renderWithProviders(
+      <DataTableVirtualized
+        {...baseProps}
+        virtualItems={[{ index: 0, start: 0, size: 40 }]}
+        tableRows={[groupRow]}
+        renderRowContent={renderRowContent}
+      />,
+    );
+
+    // Group header shows value + member count; data-cell renderer untouched.
+    expect(screen.getByText("Electronics")).toBeInTheDocument();
+    expect(screen.getByText("(2)")).toBeInTheDocument();
+    expect(renderRowContent).not.toHaveBeenCalled();
+
+    // Toggle is keyboard-reachable and announces expansion state.
+    const toggle = screen.getByRole("button", { expanded: false });
+    fireEvent.click(toggle);
+    expect(groupRow.toggleExpanded).toHaveBeenCalledTimes(1);
+
+    fireEvent.keyDown(toggle, { key: "Enter" });
+    expect(groupRow.toggleExpanded).toHaveBeenCalledTimes(2);
+  });
+
+  it("still renders plain data rows through renderRowContent", () => {
+    const dataRow = makeDataRow("42");
+    const renderRowContent = vi.fn(() => <div data-testid="data-cells" />);
+
+    renderWithProviders(
+      <DataTableVirtualized
+        {...baseProps}
+        virtualItems={[{ index: 0, start: 0, size: 40 }]}
+        tableRows={[dataRow]}
+        renderRowContent={renderRowContent}
+      />,
+    );
+
+    // "div" = virtualized cell element: real <td>s are invalid children of
+    // the absolutely-positioned div rows (semantics come from role="cell")
+    expect(renderRowContent).toHaveBeenCalledWith(dataRow, 0, true, "div");
+    expect(screen.getByTestId("data-cells")).toBeInTheDocument();
+  });
+});