@multiplatform.one/table 7.6.3 → 7.7.1

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

@@ -0,0 +1,143 @@
+/**
+ * DataTableDocumentList specs — the list body's OWN contract.
+ *
+ * cardLayout.spec.tsx proves layout=list picks this body over the grid and the
+ * cards, that the title slot honours meta.role, and that rows are a nowrap flex
+ * list rather than a column grid. What no spec pinned is the SLOT TAXONOMY the
+ * list is built on (documentListSlots.ts): which column lands in the trailing
+ * indicator cluster, which becomes muted meta, which is dropped outright, and
+ * what happens when nothing declares a role at all. Plus the row head
+ * (selection) and the two empty-state copies.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn, TableFilter } from "../../types";
+import { DataTable } from "./index";
+
+type Task = {
+  id: number;
+  title: string;
+  owner: string;
+  status: string;
+};
+
+const tasks: Task[] = [
+  { id: 1, title: "Ship the card layout", owner: "Ada", status: "Open" },
+  { id: 2, title: "Rewire the chips", owner: "Grace", status: "Blocked" },
+];
+
+const columns: DataTableColumn<Task>[] = [
+  { accessorKey: "title", header: "Title", meta: { role: "title" } },
+  { accessorKey: "owner", header: "Owner" },
+  { accessorKey: "status", header: "Status", meta: { role: "indicator" } },
+];
+
+function renderList(props: Record<string, any> = {}) {
+  return renderWithProviders(
+    <DataTable data={tasks} columns={columns} layout="list" onStateChange={vi.fn()} {...props} />,
+  );
+}
+
+const slots = (container: HTMLElement, slot: string) =>
+  Array.from(container.querySelectorAll(`[data-list-slot="${slot}"]`)).map((n) => n.textContent);
+
+describe("DataTableDocumentList", () => {
+  it("renders one row per document inside the list container", () => {
+    const { container } = renderList();
+    expect(container.querySelector('[data-testid="data-table-list"]')).not.toBeNull();
+    expect(container.querySelectorAll('[data-testid="data-table-list-row"]').length).toBe(
+      tasks.length,
+    );
+  });
+
+  it("splits a row into title, muted meta and a trailing indicator", () => {
+    const { container } = renderList();
+    expect(slots(container, "title")[0]).toBe("Ship the card layout");
+    expect(slots(container, "meta")).toContain("Ada");
+    expect(slots(container, "indicator")).toContain("Open");
+  });
+
+  it("with no roles declared the first content column leads and status still indicates", () => {
+    const { container } = renderList({
+      columns: [
+        { accessorKey: "title", header: "Title" },
+        { accessorKey: "owner", header: "Owner" },
+        { accessorKey: "status", header: "Status" },
+      ],
+    });
+    expect(slots(container, "title")[0]).toBe("Ship the card layout");
+    expect(slots(container, "meta")).toContain("Ada");
+    // `status` reaches the indicator cluster on its id alone, no meta.role.
+    expect(slots(container, "indicator")).toContain("Open");
+  });
+
+  it("an underscore-prefixed column is an action, never muted meta", () => {
+    const { container } = renderList({
+      columns: [
+        { accessorKey: "title", header: "Title", meta: { role: "title" } },
+        { id: "_liked_by", accessorKey: "owner", header: "♥", meta: { label: "Liked" } },
+      ],
+    });
+    expect(slots(container, "actions")).toContain("Ada");
+    expect(slots(container, "meta")).not.toContain("Ada");
+  });
+
+  it("a hidden-role column is dropped from every slot, not merely styled down", () => {
+    const { container } = renderList({
+      columns: [
+        { accessorKey: "title", header: "Title", meta: { role: "title" } },
+        { accessorKey: "owner", header: "Owner", meta: { role: "hidden" } },
+      ],
+    });
+    expect(slots(container, "title")[0]).toBe("Ship the card layout");
+    expect(slots(container, "meta")).not.toContain("Ada");
+    expect(slots(container, "indicator")).not.toContain("Ada");
+    expect(slots(container, "actions")).not.toContain("Ada");
+  });
+
+  it("a list is not a form: column headers never reprint as row labels", () => {
+    renderList();
+    expect(screen.queryByText("Owner")).toBeNull();
+    expect(screen.queryByText("Status")).toBeNull();
+  });
+
+  it("selection puts a named checkbox at the head of every row", () => {
+    renderList({ enableRowSelection: true });
+    expect(screen.getAllByLabelText(/^Select row /).length).toBe(tasks.length);
+  });
+
+  it("empty with no filters reads 'No data available'", () => {
+    renderWithProviders(
+      <DataTable data={[]} columns={columns} layout="list" onStateChange={vi.fn()} />,
+    );
+    expect(screen.getByText("No data available")).toBeTruthy();
+  });
+
+  it("empty because a filter matched nothing reads 'No results found'", async () => {
+    const noMatch: TableFilter[] = [
+      {
+        id: "flt-owner",
+        columnId: "owner",
+        value: { operator: "contains", value: "zzzz" },
+        label: "Owner",
+      },
+    ];
+    const { container } = renderWithProviders(
+      <DataTable
+        data={tasks}
+        columns={columns}
+        layout="list"
+        enableFiltering
+        filterableFields={[{ id: "owner", label: "Owner", type: "text" }]}
+        initialState={{ filters: noMatch }}
+        onStateChange={vi.fn()}
+      />,
+    );
+    await waitFor(() => {
+      expect(container.querySelectorAll('[data-testid="data-table-list-row"]').length).toBe(0);
+      expect(screen.getByText("No results found")).toBeTruthy();
+    });
+  });
+});

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

@@ -0,0 +1,151 @@
+/**
+ * DataTableMobileCards specs — the card body's OWN contract.
+ *
+ * cardLayout.spec.tsx proves the layout switch, the title slot, label/value
+ * rows, column visibility, sorting, search and filtering through the compound
+ * table. What no spec pinned is the card's header chrome and its empty state:
+ * the select-all bar above the stack, the per-card checkbox / row number /
+ * delete cluster beside the title, the delete floor at `minRows`, and the two
+ * distinct empty-state copies (no data vs no results) — plus the rule that an
+ * in-flight refetch paints NO empty state over a momentarily blank body.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DataTableColumn, TableFilter } from "../../types";
+import { DataTable } from "./index";
+
+type Person = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  age: number;
+};
+
+const people: Person[] = [
+  { id: 1, firstName: "John", lastName: "Doe", age: 28 },
+  { id: 2, firstName: "Jane", lastName: "Smith", age: 32 },
+  { id: 3, firstName: "Bob", lastName: "Johnson", age: 45 },
+];
+
+const columns: DataTableColumn<Person>[] = [
+  { accessorKey: "firstName", header: "First Name" },
+  { accessorKey: "lastName", header: "Last Name" },
+  { accessorKey: "age", header: "Age" },
+];
+
+function renderCards(props: Record<string, any> = {}) {
+  return renderWithProviders(
+    <DataTable data={people} columns={columns} layout="cards" onStateChange={vi.fn()} {...props} />,
+  );
+}
+
+function cards(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll('[data-testid="data-table-card"]'));
+}
+
+describe("DataTableMobileCards", () => {
+  it("renders one card per row inside the card list container", () => {
+    const { container } = renderCards();
+    expect(container.querySelector('[data-testid="data-table-cards"]')).not.toBeNull();
+    expect(cards(container).length).toBe(people.length);
+  });
+
+  it("the first visible column is the card title, the rest are label/value rows", () => {
+    const { container } = renderCards();
+    const first = cards(container)[0];
+    expect(first.querySelector('[data-card-slot="title"]')?.textContent).toBe("John");
+    expect(first.textContent).toContain("Last Name");
+    expect(first.textContent).toContain("Doe");
+  });
+
+  it("a single visible column gives a title and no field rows", () => {
+    const { container } = renderCards({
+      columns: [{ accessorKey: "firstName", header: "First Name" }],
+    });
+    const first = cards(container)[0];
+    expect(first.querySelector('[data-card-slot="title"]')?.textContent).toBe("John");
+    expect(first.textContent).not.toContain("Last Name");
+  });
+
+  it("selection adds a select-all bar above the stack and a checkbox per card", () => {
+    const { container } = renderCards({ enableRowSelection: true });
+    expect(screen.getByLabelText("Select all rows")).toBeTruthy();
+    expect(screen.getAllByLabelText(/^Select row /).length).toBe(people.length);
+    expect(cards(container).length).toBe(people.length);
+  });
+
+  it("without selection there is no select-all bar", () => {
+    renderCards();
+    expect(screen.queryByLabelText("Select all rows")).toBeNull();
+  });
+
+  it("select-all checks every card's checkbox", async () => {
+    renderCards({ enableRowSelection: true });
+    fireEvent.click(screen.getByLabelText("Select all rows"));
+    await waitFor(() => {
+      const boxes = screen.getAllByLabelText(/^Select row /);
+      for (const box of boxes) expect(box.getAttribute("aria-checked")).toBe("true");
+    });
+  });
+
+  it("row numbers print in the card header, one-based", () => {
+    const { container } = renderCards({ showRowNumbers: true });
+    expect(cards(container)[0].textContent).toContain("#1");
+    expect(cards(container)[2].textContent).toContain("#3");
+  });
+
+  it("delete is offered per card and reports the row removal to the owner", () => {
+    const onDataChange = vi.fn();
+    renderCards({ showDeleteRow: true, minRows: 1, onDataChange });
+    const deletes = screen.getAllByLabelText(/Delete row/i);
+    expect(deletes.length).toBe(people.length);
+    fireEvent.click(deletes[0]);
+    // The parent owns `data`; the card list asks, it does not splice.
+    expect(onDataChange).toHaveBeenCalledTimes(1);
+    expect(onDataChange.mock.calls[0][0]).toEqual(people.slice(1));
+  });
+
+  it("delete goes inert at the minRows floor rather than emptying the list", () => {
+    const onDataChange = vi.fn();
+    renderCards({ showDeleteRow: true, minRows: people.length, onDataChange });
+    const deletes = screen.getAllByLabelText(/Delete row/i);
+    expect(deletes.length).toBe(people.length);
+    fireEvent.click(deletes[0]);
+    expect(onDataChange).not.toHaveBeenCalled();
+  });
+
+  it("empty with no filters reads 'No data available'", () => {
+    renderWithProviders(
+      <DataTable data={[]} columns={columns} layout="cards" onStateChange={vi.fn()} />,
+    );
+    expect(screen.getByText("No data available")).toBeTruthy();
+  });
+
+  it("empty because a filter matched nothing reads 'No results found'", async () => {
+    const noMatch: TableFilter[] = [
+      {
+        id: "flt-first",
+        columnId: "firstName",
+        value: { operator: "contains", value: "zzzz" },
+        label: "First Name",
+      },
+    ];
+    const { container } = renderWithProviders(
+      <DataTable
+        data={people}
+        columns={columns}
+        layout="cards"
+        enableFiltering
+        filterableFields={[{ id: "firstName", label: "First Name", type: "text" }]}
+        initialState={{ filters: noMatch }}
+        onStateChange={vi.fn()}
+      />,
+    );
+    await waitFor(() => {
+      expect(cards(container).length).toBe(0);
+      expect(screen.getByText("No results found")).toBeTruthy();
+    });
+  });
+});

package/src/components/DataTableCell/CellOptionsEditor.stories.tsx

@@ -0,0 +1,139 @@
+/**
+ * CellOptionsEditor — the popover/sheet host for option groups too big for a
+ * cell (UX-022 / LC-06 OVERSIZED-EDIT).
+ *
+ * A radio group rendered inline in a narrow column has options the user cannot
+ * reach: the cell's overflow guard clips them. So the cell face becomes a
+ * compact FieldDisplay trigger showing the current option label, and the full
+ * list opens in a forms FloatingPanel — an anchored popover with collision
+ * handling on desktop web, a bottom sheet on native and small viewports —
+ * seeded at the cell's current value (Axiom 11).
+ *
+ * Two classes. COMMIT (`dismissOnPick`, the default) closes on a pick,
+ * including re-picking the value already selected. COMPOSE (multi-select
+ * toggles) stays open until Escape or an outside click, so several options can
+ * be composed in one visit.
+ */
+
+import type { Meta } from "@storybook/react-native-web-vite";
+import { RadioGroup, ToggleGroup } from "@multiplatform.one/forms";
+import { useState } from "react";
+import { Paragraph, View, YStack } from "tamagui";
+import { CellOptionsEditor } from "./CellOptionsEditor";
+
+const meta: Meta<typeof CellOptionsEditor> = {
+  title: "Table/CellOptionsEditor",
+  component: CellOptionsEditor,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Compact cell face plus a FloatingPanel holding the full option list. " +
+          "COMMIT groups close on a pick; COMPOSE groups stay open.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+const priorities = [
+  { label: "Urgent", value: "urgent" },
+  { label: "High", value: "high" },
+  { label: "Medium", value: "medium" },
+  { label: "Low", value: "low" },
+];
+
+const labels = [
+  { label: "Bug", value: "bug" },
+  { label: "Design", value: "design" },
+  { label: "Infra", value: "infra" },
+];
+
+/** A narrow frame, so the reason the panel exists is visible: the cell clips. */
+function CellFrame({ children }: { children: React.ReactNode }) {
+  return (
+    <View width={180} borderWidth={1} borderColor="$color6" borderRadius="$2" overflow="hidden">
+      {children}
+    </View>
+  );
+}
+
+function CommitCell() {
+  const [value, setValue] = useState("high");
+  return (
+    <YStack padding="$4" gap="$3" alignItems="flex-start">
+      <Paragraph size="$2">COMMIT: picking is the exit. Panel closes on any pick.</Paragraph>
+      <CellFrame>
+        <CellOptionsEditor field="radiogroup" value={value} label="Priority">
+          {(close) => (
+            <RadioGroup
+              value={value}
+              onValueChange={(next: string) => {
+                setValue(next);
+                close();
+              }}
+              options={priorities}
+              orientation="vertical"
+            />
+          )}
+        </CellOptionsEditor>
+      </CellFrame>
+      <Paragraph size="$2" testID="committed-value">{`value: ${value}`}</Paragraph>
+    </YStack>
+  );
+}
+
+export const Default = {
+  name: "Main",
+  render: () => <CommitCell />,
+};
+
+function ComposeCell() {
+  const [value, setValue] = useState<string[]>(["bug"]);
+  return (
+    <YStack padding="$4" gap="$3" alignItems="flex-start">
+      <Paragraph size="$2">
+        COMPOSE: multi-select stays open so several options land in one visit.
+      </Paragraph>
+      <CellFrame>
+        <CellOptionsEditor field="togglegroup" value={value} label="Labels" dismissOnPick={false}>
+          {() => (
+            <ToggleGroup
+              value={value}
+              onValueChange={(next: string | string[]) =>
+                setValue(Array.isArray(next) ? next : [next])
+              }
+              options={labels}
+              type="multiple"
+              orientation="vertical"
+            />
+          )}
+        </CellOptionsEditor>
+      </CellFrame>
+      <Paragraph size="$2" testID="committed-value">{`value: ${value.join(", ")}`}</Paragraph>
+    </YStack>
+  );
+}
+
+/** COMPOSE class: `dismissOnPick={false}` keeps the panel open across picks. */
+export const Compose = {
+  render: () => <ComposeCell />,
+};
+
+/**
+ * Disabled: the face renders alone at reduced opacity, with no button role and
+ * no panel — a disabled cell is not a keyboard stop.
+ */
+export const Disabled = {
+  render: () => (
+    <YStack padding="$4" gap="$3" alignItems="flex-start">
+      <CellFrame>
+        <CellOptionsEditor field="radiogroup" value="medium" label="Priority" disabled>
+          {() => <RadioGroup value="medium" options={priorities} orientation="vertical" />}
+        </CellOptionsEditor>
+      </CellFrame>
+    </YStack>
+  ),
+};

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

@@ -0,0 +1,127 @@
+/**
+ * CellOptionsEditor specs — the popover host's OWN contract (UX-022 / LC-06).
+ *
+ * dataTableCell.spec.tsx drives this host through DataTableCell with a faked
+ * FloatingPanel, so it proves the CELL wires it up. Nothing pinned the host
+ * itself: that a disabled editor collapses to a bare face with no trigger and
+ * no keyboard stop, that the face is chromeless on focus because the ring
+ * belongs to the parent cell (LC-71), that the panel body leaves table-cell
+ * context so option groups get their full chrome back, and that `close` is
+ * handed to the children so a COMMIT-class pick can dismiss.
+ *
+ * The panel is faked the same way the sibling cell spec fakes it: content only
+ * while open, trigger toggles.
+ */
+
+import React from "react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/forms")>()),
+  FieldDisplay: (props: { field?: string; value?: unknown }) =>
+    React.createElement(
+      "div",
+      { "data-testid": "mock-FieldDisplay", "data-field": props.field },
+      String(props.value ?? ""),
+    ),
+  FloatingPanel: ({ open, onOpenChange, trigger, children }: any) =>
+    React.createElement(
+      "div",
+      { "data-testid": "mock-FloatingPanel" },
+      React.createElement(
+        "div",
+        { "data-testid": "floating-panel-trigger", onClick: () => onOpenChange?.(!open) },
+        trigger,
+      ),
+      open
+        ? React.createElement("div", { "data-testid": "floating-panel-content" }, children)
+        : null,
+    ),
+}));
+
+vi.mock("@multiplatform.one/table-primitives", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@multiplatform.one/table-primitives")>();
+  return {
+    ...actual,
+    TableCellContext: {
+      ...actual.TableCellContext,
+      Provider: ({ value, children }: any) =>
+        React.createElement(
+          "div",
+          { "data-testid": "cell-context", "data-in-table-cell": String(value?.inTableCell) },
+          children,
+        ),
+    },
+  };
+});
+
+import { CellOptionsEditor } from "./CellOptionsEditor";
+
+function renderEditor(props: Record<string, any> = {}, body?: (close: () => void) => any) {
+  return renderWithProviders(
+    <CellOptionsEditor field="radiogroup" value="high" label="Priority" {...props}>
+      {body ??
+        ((close) => (
+          <button type="button" data-testid="pick" onClick={() => close()}>
+            pick
+          </button>
+        ))}
+    </CellOptionsEditor>,
+  );
+}
+
+describe("CellOptionsEditor", () => {
+  it("renders the current value as a compact face, panel closed", () => {
+    renderEditor();
+    expect(screen.getByTestId("mock-FieldDisplay").textContent).toBe("high");
+    expect(screen.queryByTestId("floating-panel-content")).toBeNull();
+  });
+
+  it("the face is a named, focusable button that reports its expanded state", () => {
+    const { container } = renderEditor();
+    const face = container.querySelector('[role="button"]') as HTMLElement;
+    expect(face).not.toBeNull();
+    expect(face.getAttribute("aria-label")).toBe("Priority");
+    expect(face.getAttribute("aria-expanded")).toBe("false");
+    expect(face.getAttribute("tabindex")).toBe("0");
+  });
+
+  it("opening the panel flips aria-expanded and mounts the option group", () => {
+    const { container } = renderEditor();
+    fireEvent.click(screen.getByTestId("floating-panel-trigger"));
+    expect(screen.getByTestId("floating-panel-content")).toBeTruthy();
+    expect(
+      (container.querySelector('[role="button"]') as HTMLElement).getAttribute("aria-expanded"),
+    ).toBe("true");
+  });
+
+  it("hands `close` to the children so a COMMIT pick can dismiss the panel", () => {
+    renderEditor();
+    fireEvent.click(screen.getByTestId("floating-panel-trigger"));
+    fireEvent.click(screen.getByTestId("pick"));
+    expect(screen.queryByTestId("floating-panel-content")).toBeNull();
+  });
+
+  it("the panel body leaves table-cell context so options get full chrome back", () => {
+    renderEditor();
+    fireEvent.click(screen.getByTestId("floating-panel-trigger"));
+    const ctx = screen.getByTestId("cell-context");
+    expect(ctx.getAttribute("data-in-table-cell")).toBe("false");
+  });
+
+  it("disabled collapses to a bare face: no panel host, no button role, no tab stop", () => {
+    const { container } = renderEditor({ disabled: true });
+    expect(screen.getByTestId("mock-FieldDisplay").textContent).toBe("high");
+    expect(screen.queryByTestId("mock-FloatingPanel")).toBeNull();
+    expect(container.querySelector('[role="button"]')).toBeNull();
+    expect(container.querySelector("[tabindex]")).toBeNull();
+  });
+
+  it("the face paints no ring of its own — the parent cell owns the one ring (LC-71)", () => {
+    const { container } = renderEditor();
+    const face = container.querySelector('[role="button"]') as HTMLElement;
+    expect(face.style.outlineWidth === "" || face.style.outlineWidth === "0px").toBe(true);
+  });
+});

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

@@ -55,12 +55,17 @@ const mockColumns = [
 const mockCreateObjectURL = vi.fn(() => "mock-url");
 const mockRevokeObjectURL = vi.fn();
 
+// configurable: true is load-bearing — the "Blob URLs are unavailable" case
+// below redefines createObjectURL, and defineProperty defaults configurable to
+// false, which made that redefine throw "Cannot redefine property".
 Object.defineProperty(window.URL, "createObjectURL", {
+  configurable: true,
   writable: true,
   value: mockCreateObjectURL,
 });
 
 Object.defineProperty(window.URL, "revokeObjectURL", {
+  configurable: true,
   writable: true,
   value: mockRevokeObjectURL,
 });