@multiplatform.one/table 7.10.0 → 7.11.0

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

@@ -42,7 +42,7 @@ function renderCards(props: Record<string, any> = {}) {
 describe("DataTableCardControls", () => {
   it("is a labelled toolbar above the card list", () => {
     renderCards({ enableSorting: true, enableFiltering: true });
-    const toolbar = screen.getByRole("toolbar", { name: "Card list controls" });
+    const toolbar = screen.getByRole("toolbar", { name: "Table toolbar" });
     expect(toolbar).toBeTruthy();
     expect(screen.getByLabelText("Sort rows")).toBeTruthy();
   });
@@ -61,7 +61,8 @@ describe("DataTableCardControls", () => {
   it("filtering only: the filter chrome is there, the sort menu is not", () => {
     renderCards({ enableSorting: false, enableFiltering: true });
     expect(screen.queryByLabelText("Sort rows")).toBeNull();
-    expect(screen.getByText("Add Filter")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Filter" })).toBeTruthy();
+    expect(screen.queryByText("Add Filter")).toBeNull();
   });
 
   it("with no sort applied the trigger reads the neutral label", () => {

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

@@ -0,0 +1,250 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { DataTableColumn } from "../../types";
+import { DataTable } from "./index";
+
+// Happy DOM has no viewport measurements. Keep the actual virtualizer and row renderer.
+vi.mock("@tanstack/react-virtual", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@tanstack/react-virtual")>();
+  return {
+    ...actual,
+    useVirtualizer: (options: Parameters<typeof actual.useVirtualizer>[0]) =>
+      actual.useVirtualizer({
+        ...options,
+        initialRect: { width: 800, height: 240 },
+        observeElementRect: (_instance, callback) => {
+          callback({ width: 800, height: 240 });
+          return () => {};
+        },
+        observeElementOffset: (_instance, callback) => {
+          callback(0, false);
+          return () => {};
+        },
+        scrollToFn: () => {},
+      }),
+  };
+});
+
+const data = [{ id: "1", account: "Account 1", balance: "10.00" }];
+const columns: DataTableColumn<(typeof data)[number]>[] = [
+  { accessorKey: "account", header: "Account", size: 320, footer: "Totals" },
+  { accessorKey: "balance", header: "Balance", size: 80, footer: "10.00" },
+];
+const allAuxiliaries = {
+  enableRowSelection: true,
+  showRowNumbers: true,
+  enableRowExpansion: true,
+  showDeleteRow: true,
+};
+
+function renderTable(props = {}, size: "small" | "medium" | "large" = "medium") {
+  return renderWithProviders(
+    <Preset overrides={{ size }}>
+      <DataTable
+        data={data}
+        columns={columns}
+        layout="table"
+        columnLayout="scroll"
+        enablePagination={false}
+        {...props}
+      />
+    </Preset>,
+  );
+}
+
+function cells(row: Element): HTMLElement[] {
+  return [...row.children].filter((element) =>
+    ["cell", "columnheader"].includes(element.getAttribute("role") ?? ""),
+  ) as HTMLElement[];
+}
+
+function width(cell: HTMLElement): number {
+  return Number.parseFloat(
+    cell.style.width || /(?:^| )_w-([\d.]+)px(?: |$)/.exec(cell.className)?.[1] || "NaN",
+  );
+}
+
+function rows(container: HTMLElement) {
+  const header = container.querySelector('thead [role="row"]')!;
+  const body = container.querySelector('[aria-label="Row 1"]')!;
+  const footer = container.querySelector('tfoot [role="row"]')!;
+  expect(header).not.toBeNull();
+  expect(body).not.toBeNull();
+  expect(footer).not.toBeNull();
+  return { header: cells(header), body: cells(body), footer: cells(footer) };
+}
+
+function expectPinned(cell: HTMLElement, side: "start" | "end", offset: number) {
+  expect(cell.style.position).toBe("sticky");
+  expect(cell.style[side === "start" ? "insetInlineStart" : "insetInlineEnd"]).toBe(`${offset}px`);
+  expect(cell.style.zIndex).toBe("2");
+  expect(cell.style.backgroundColor).toBe("var(--color2)");
+}
+
+let previousDirection: string | null;
+beforeEach(() => {
+  previousDirection = document.documentElement.getAttribute("dir");
+});
+afterEach(() => {
+  if (previousDirection === null) document.documentElement.removeAttribute("dir");
+  else document.documentElement.setAttribute("dir", previousDirection);
+});
+
+describe.each(["ltr", "rtl"])("footer layout in %s", (direction) => {
+  beforeEach(() => document.documentElement.setAttribute("dir", direction));
+
+  it.each([
+    { name: "no auxiliaries", props: {}, leading: 0, trailing: 0 },
+    { name: "selection", props: { enableRowSelection: true }, leading: 1, trailing: 0 },
+    { name: "row numbers", props: { showRowNumbers: true }, leading: 1, trailing: 0 },
+    { name: "expansion", props: { enableRowExpansion: true }, leading: 1, trailing: 0 },
+    { name: "delete", props: { showDeleteRow: true }, leading: 0, trailing: 1 },
+    { name: "all auxiliaries", props: allAuxiliaries, leading: 3, trailing: 1 },
+    {
+      name: "read-only auxiliaries",
+      props: { ...allAuxiliaries, readOnly: true },
+      leading: 3,
+      trailing: 0,
+    },
+    {
+      name: "read-only delete suppressed",
+      props: { showDeleteRow: true, readOnly: true },
+      leading: 0,
+      trailing: 0,
+    },
+    {
+      name: "compact auxiliaries",
+      props: { ...allAuxiliaries, compact: true },
+      leading: 3,
+      trailing: 1,
+    },
+  ])("matches resolved header/body slots with $name", ({ props, leading, trailing }) => {
+    const { container } = renderTable(props);
+    const row = rows(container);
+    const headerWidths = row.header.map(width);
+    expect(row.header).toHaveLength(leading + 2 + trailing);
+    expect(headerWidths.every((value) => Number.isFinite(value) && value > 0)).toBe(true);
+    expect(headerWidths.slice(leading, leading + 2)).toEqual([320, 80]);
+    expect(row.body.map(width)).toEqual(headerWidths);
+    expect(row.footer.map(width)).toEqual(headerWidths);
+    expect(row.footer[leading]).toHaveTextContent("Totals");
+    expect(row.footer[leading + 1]).toHaveTextContent("10.00");
+    const auxiliaryCells = [...row.footer.slice(0, leading), ...row.footer.slice(leading + 2)];
+    for (const cell of auxiliaryCells) {
+      expect(cell.textContent).toBe("");
+      expect(cell.tabIndex).toBe(-1);
+      expect(
+        cell.querySelector('button, input, [role="button"], [role="checkbox"], [tabindex]'),
+      ).toBeNull();
+    }
+  });
+
+  it.each(["left", "right"] as const)(
+    "resolves pinned %s footer paint like header/body",
+    async (side) => {
+      const utils = renderTable({ enableColumnPinning: true });
+      fireEvent.click(utils.getByLabelText("Pin Account column left"));
+      if (side === "right") fireEvent.click(utils.getByLabelText("Pin Account column right"));
+      await waitFor(() =>
+        expect(
+          (utils.container.querySelector("#account-header") as HTMLElement).style.position,
+        ).toBe("sticky"),
+      );
+      const row = rows(utils.container);
+      const index = row.header.findIndex((cell) => cell.id === "account-header");
+      const logicalSide = side === "left" ? "start" : "end";
+      expectPinned(row.header[index], logicalSide, 0);
+      expectPinned(row.body[index], logicalSide, 0);
+      expectPinned(row.footer[index], logicalSide, 0);
+      expect(row.footer[1 - index].style.position).not.toBe("sticky");
+    },
+  );
+
+  it("follows resolved auxiliary widths at small and large preset sizes", () => {
+    const widthsBySize = ["small", "large"].map((size) => {
+      const utils = renderTable(allAuxiliaries, size as "small" | "large");
+      const row = rows(utils.container);
+      const headerWidths = row.header.map(width);
+      expect(headerWidths).toHaveLength(6);
+      expect(headerWidths.slice(3, 5)).toEqual([320, 80]);
+      expect(row.body.map(width)).toEqual(headerWidths);
+      expect(row.footer.map(width)).toEqual(headerWidths);
+      utils.unmount();
+      return headerWidths;
+    });
+    for (const index of [0, 1, 2, 5]) {
+      expect(widthsBySize[0][index]).toBeLessThan(widthsBySize[1][index]);
+    }
+  });
+
+  it.each([false, true])(
+    "reserves auxiliary flow around both pin sides, readOnly=%s",
+    async (readOnly) => {
+      const utils = renderTable({ ...allAuxiliaries, readOnly, enableColumnPinning: true });
+      fireEvent.click(utils.getByLabelText("Pin Account column left"));
+      fireEvent.click(utils.getByLabelText("Pin Balance column left"));
+      fireEvent.click(utils.getByLabelText("Pin Balance column right"));
+      await waitFor(() => expect(rows(utils.container).header[3].style.position).toBe("sticky"));
+      const row = rows(utils.container);
+      const headerWidths = row.header.map(width);
+      const leadingWidth = headerWidths.slice(0, 3).reduce((sum, value) => sum + value, 0);
+      const trailingWidth = readOnly ? 0 : headerWidths[5];
+      expect(leadingWidth).toBeGreaterThan(0);
+      expect(row.body.map(width)).toEqual(headerWidths);
+      expect(row.footer.map(width)).toEqual(headerWidths);
+      for (const section of [row.header, row.body, row.footer]) {
+        expectPinned(section[3], "start", leadingWidth);
+        expectPinned(section[4], "end", trailingWidth);
+      }
+    },
+  );
+
+  it("keeps actual virtual rows and auxiliary footer slots aligned after pinned resize", async () => {
+    const utils = renderWithProviders(
+      <DataTable
+        data={[
+          { id: "1", rank: 1, label: "Record 1" },
+          { id: "2", rank: 2, label: "Record 2" },
+        ]}
+        columns={[
+          { accessorKey: "rank", header: "Rank", size: 48, minSize: 32, maxSize: 64, footer: "2" },
+          { accessorKey: "label", header: "Label", size: 320, footer: "Total" },
+        ]}
+        layout="table"
+        columnLayout="scroll"
+        enableColumnResizing
+        enableColumnPinning
+        enableVirtualization
+        virtualizationHeight={240}
+        enablePagination={false}
+        {...allAuxiliaries}
+      />,
+    );
+    const virtualRows = () =>
+      utils.container.querySelectorAll('tbody[role="presentation"] [role="rowgroup"] [role="row"]');
+    await waitFor(() => expect(virtualRows()).toHaveLength(2));
+    fireEvent.click(utils.getByLabelText("Pin Rank column left"));
+    fireEvent.click(utils.getByLabelText("Pin Label column left"));
+    const header = () => cells(utils.container.querySelector('thead [role="row"]')!);
+    const leadingWidth = header()
+      .slice(0, 3)
+      .reduce((sum, cell) => sum + width(cell), 0);
+    expect(width(header()[3])).toBe(48);
+    expectPinned(header()[4], "start", leadingWidth + 48);
+    const handle = utils.getByRole("separator", { name: "Resize Rank column" });
+    fireEvent.mouseDown(handle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 130 });
+    fireEvent.mouseUp(document, { clientX: 130 });
+    expect(width(header()[3])).toBe(64);
+    expectPinned(header()[4], "start", leadingWidth + 64);
+    const footer = cells(utils.container.querySelector('tfoot [role="row"]')!);
+    expect(virtualRows()).toHaveLength(2);
+    for (const section of [...virtualRows()].map(cells).concat([footer])) {
+      expect(section.map(width)).toEqual(header().map(width));
+      expectPinned(section[3], "start", leadingWidth);
+      expectPinned(section[4], "start", leadingWidth + 64);
+    }
+  });
+});

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

@@ -16,7 +16,7 @@
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { fireEvent, waitFor } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import type { DataTableColumn } from "../../types";
 import { DataTable } from "./index";
 
@@ -142,3 +142,68 @@ describe("column pinning geometry", () => {
     });
   });
 });
+
+afterEach(() => document.documentElement.removeAttribute("dir"));
+
+it.each(["ltr", "rtl"])(
+  "keeps declared small pinned boxes and logical offsets aligned in %s",
+  async (direction) => {
+    document.documentElement.setAttribute("dir", direction);
+    const utils = renderPinned({
+      columns: columns.map((column, index) => ({
+        ...column,
+        footer: String(column.header),
+        width: index === 0 ? 48 : 320,
+      })),
+    });
+    await pinIdColumn(utils);
+    fireEvent.click(utils.getByLabelText("Pin First Name column left"));
+    await waitFor(() => {
+      const first = utils.container.querySelector("#id-header") as HTMLElement;
+      const second = utils.container.querySelector("#firstName-header") as HTMLElement;
+      expect(hasStyle(first, "width", "48px", "_w-48px")).toBe(true);
+      expect(hasStyle(first, "minWidth", "48px", "_miw-48px")).toBe(true);
+      expect(hasStyle(first, "maxWidth", "48px", "_maw-48px")).toBe(true);
+      expect(second.style.insetInlineStart).toBe("48px");
+      const body = utils.container.querySelector('[role="row"][aria-label="Row 1"]')!;
+      const cells = body.querySelectorAll('[role="cell"]');
+      expect(hasStyle(cells[0] as HTMLElement, "width", "48px", "_w-48px")).toBe(true);
+      expect((cells[1] as HTMLElement).style.insetInlineStart).toBe("48px");
+      const footer = utils.container.querySelectorAll('tfoot [role="cell"]');
+      expect(hasStyle(footer[0] as HTMLElement, "width", "48px", "_w-48px")).toBe(true);
+      expect((footer[1] as HTMLElement).style.insetInlineStart).toBe("48px");
+    });
+  },
+);
+
+it.each(["ltr", "rtl"])(
+  "aligns right-pinned headers, rows and footers in %s",
+  async (direction) => {
+    document.documentElement.setAttribute("dir", direction);
+    const utils = renderPinned({
+      columns: columns.map((column, index) => ({
+        ...column,
+        footer: String(column.header),
+        width: index === 3 ? 76 : 320,
+      })),
+    });
+    for (const label of ["Last Name", "Age"]) {
+      fireEvent.click(utils.getByLabelText(`Pin ${label} column left`));
+      fireEvent.click(utils.getByLabelText(`Pin ${label} column right`));
+    }
+    await waitFor(() => {
+      const last = utils.container.querySelector("#age-header") as HTMLElement;
+      const previous = utils.container.querySelector("#lastName-header") as HTMLElement;
+      expect(hasStyle(last, "width", "76px", "_w-76px")).toBe(true);
+      expect(last.style.insetInlineEnd).toBe("0px");
+      expect(previous.style.insetInlineEnd).toBe("76px");
+      const body = utils.container.querySelector('[role="row"][aria-label="Row 1"]')!;
+      const cells = body.querySelectorAll('[role="cell"]');
+      expect(hasStyle(cells[3] as HTMLElement, "width", "76px", "_w-76px")).toBe(true);
+      expect((cells[2] as HTMLElement).style.insetInlineEnd).toBe("76px");
+      const footer = utils.container.querySelectorAll('tfoot [role="cell"]');
+      expect(hasStyle(footer[3] as HTMLElement, "width", "76px", "_w-76px")).toBe(true);
+      expect((footer[2] as HTMLElement).style.insetInlineEnd).toBe("76px");
+    });
+  },
+);

package/src/components/DataTableExport/DataTableExport.spec.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { DataTable } from "../DataTable";
@@ -203,16 +203,30 @@ describe("DataTableExport", () => {
   });
 
   it("shows loading state when export is in progress", async () => {
-    const mockOnExport = vi.fn(
-      () => new Promise<void>((resolve) => setTimeout(resolve, 100)),
-    ) as unknown as ReturnType<typeof vi.fn> & ((options: ExportOptions) => Promise<void>);
+    let finishExport!: () => void;
+    const pending = new Promise<void>((resolve) => {
+      finishExport = resolve;
+    });
+    const mockOnExport = vi.fn(() => pending) as unknown as ReturnType<typeof vi.fn> &
+      ((options: ExportOptions) => Promise<void>);
 
     renderWithProviders(
       <DataTableExport data={mockData} columns={mockColumns} onExport={mockOnExport} />,
     );
 
-    fireEvent.click(screen.getByText("CSV"));
-    expect(screen.getByText("...")).toBeInTheDocument();
+    const exportButton = screen.getByRole("button", { name: /Export as CSV/i });
+    try {
+      fireEvent.click(exportButton);
+      expect(screen.getByText("...")).toBeInTheDocument();
+      expect(exportButton).toHaveAttribute("aria-disabled", "true");
+    } finally {
+      await act(async () => {
+        finishExport();
+        await pending;
+      });
+    }
+    expect(exportButton).toHaveTextContent("CSV");
+    expect(exportButton).not.toHaveAttribute("aria-disabled", "true");
   });
 
   it("disables buttons when disabled prop is true", () => {
@@ -599,9 +613,12 @@ describe("DataTableExport", () => {
   });
 
   it("prevents multiple simultaneous exports", async () => {
-    const mockOnExport = vi.fn(
-      () => new Promise<void>((resolve) => setTimeout(resolve, 200)),
-    ) as unknown as ReturnType<typeof vi.fn> & ((options: ExportOptions) => Promise<void>);
+    let finishExport!: () => void;
+    const pending = new Promise<void>((resolve) => {
+      finishExport = resolve;
+    });
+    const mockOnExport = vi.fn(() => pending) as unknown as ReturnType<typeof vi.fn> &
+      ((options: ExportOptions) => Promise<void>);
 
     renderWithProviders(
       <DataTableExport data={mockData} columns={mockColumns} onExport={mockOnExport} />,
@@ -609,13 +626,22 @@ describe("DataTableExport", () => {
 
     // Click export twice quickly - button shows "..." when loading
     const exportButton = screen.getByRole("button", { name: /Export as CSV/i });
-    fireEvent.click(exportButton);
-    fireEvent.click(exportButton);
+    try {
+      fireEvent.click(exportButton);
+      fireEvent.click(exportButton);
 
-    // Should only call once
-    await waitFor(() => {
-      expect(mockOnExport).toHaveBeenCalledTimes(1);
-    });
+      // Should only call once
+      await waitFor(() => {
+        expect(mockOnExport).toHaveBeenCalledTimes(1);
+      });
+    } finally {
+      await act(async () => {
+        finishExport();
+        await pending;
+      });
+    }
+    expect(exportButton).toHaveTextContent("CSV");
+    expect(exportButton).not.toHaveAttribute("aria-disabled", "true");
   });
 
   it("surfaces an inline error when Blob URLs are unavailable", async () => {
@@ -629,9 +655,7 @@ describe("DataTableExport", () => {
       renderWithProviders(<DataTableExport data={mockData} columns={mockColumns} />);
       fireEvent.click(screen.getByRole("button", { name: /Export as CSV/i }));
       await waitFor(() => {
-        expect(screen.getByRole("alert").textContent).toMatch(
-          /not available on this platform/i,
-        );
+        expect(screen.getByRole("alert").textContent).toMatch(/not available on this platform/i);
       });
       expect(mockCreateObjectURL).not.toHaveBeenCalled();
     } finally {

package/src/components/DataTableFilterButton/index.tsx

@@ -91,6 +91,14 @@ function GroupHeader({ children }: { children: string }) {
 }
 
 export function DataTableFilterButton() {
+  return <FilterButton />;
+}
+
+export function DataTableCardFilterButton() {
+  return <FilterButton contentTrigger />;
+}
+
+function FilterButton({ contentTrigger = false }: { contentTrigger?: boolean }) {
   const ctx = useDataTableState();
   const { knobProps } = useResolvedKnobs();
   // "Back to field list" points toward the panel's start edge — directional,
@@ -315,6 +323,7 @@ export function DataTableFilterButton() {
       open={open}
       onOpenChange={handleOpenChange}
       trigger={trigger}
+      {...(contentTrigger ? { triggerSizing: "content" as const } : {})}
       fitContent
       scrollable={false}
     >