@multiplatform.one/table 6.1.0 → 6.3.0

package/src/components/DataTableBulkActions/DataTableBulkActions.spec.tsx

@@ -1,7 +1,15 @@
 import { act, fireEvent, screen, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import type React from "react";
+import React from "react";
+import {
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 import { describe, expect, it, vi } from "vitest";
+import type { SelectAllScope } from "../../types";
+import { DataTableStateContext } from "../DataTable/DataTableStateContext";
 import { type BulkAction, DataTableBulkActions, useRowSelection } from "./index";
 
 // Test data type
@@ -157,6 +165,79 @@ describe("DataTableBulkActions", () => {
     });
   });
 
+  it("routes confirmation through the canonical alertdialog gate (LC-16)", () => {
+    const deleteAction = mockActions.find((a) => a.id === "delete")!;
+
+    renderWithProviders(
+      <DataTableBulkActions
+        selectedItems={[mockData[0]]}
+        onClearSelection={vi.fn()}
+        actions={[deleteAction]}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Delete"));
+
+    const dialog = screen.getByRole("alertdialog");
+    expect(dialog).toBeInTheDocument();
+    // Destructive tone flows into the canonical ConfirmDialog.
+    expect(dialog).toHaveAttribute("data-tone", "destructive");
+  });
+
+  it("gates destructive actions even without requiresConfirmation (DG-DX-01 bulk severity)", async () => {
+    const mockExecute = vi.fn();
+    const destructiveNoFlag: BulkAction<TestItem> = {
+      id: "purge",
+      label: "Purge",
+      variant: "destructive",
+      onExecute: mockExecute,
+    };
+
+    renderWithProviders(
+      <DataTableBulkActions
+        selectedItems={[mockData[0]]}
+        onClearSelection={vi.fn()}
+        actions={[destructiveNoFlag]}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Purge"));
+
+    // Not executed yet — the confirm gate intercepts.
+    expect(mockExecute).not.toHaveBeenCalled();
+    expect(screen.getByRole("alertdialog")).toBeInTheDocument();
+
+    const purgeButtons = screen.getAllByText("Purge");
+    fireEvent.click(purgeButtons[purgeButtons.length - 1]!);
+
+    await waitFor(() => {
+      expect(mockExecute).toHaveBeenCalledWith([mockData[0]], expect.any(Function));
+    });
+  });
+
+  it("cancel dismisses the confirm dialog without executing", async () => {
+    const mockExecute = vi.fn();
+    const deleteAction = { ...mockActions[0], onExecute: mockExecute };
+
+    renderWithProviders(
+      <DataTableBulkActions
+        selectedItems={[mockData[0]]}
+        onClearSelection={vi.fn()}
+        actions={[deleteAction]}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Delete"));
+    expect(screen.getByRole("alertdialog")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("Cancel"));
+
+    await waitFor(() => {
+      expect(screen.queryByRole("alertdialog")).not.toBeInTheDocument();
+    });
+    expect(mockExecute).not.toHaveBeenCalled();
+  });
+
   it("shows overflow menu when there are more actions than maxVisibleActions", () => {
     renderWithProviders(
       <DataTableBulkActions
@@ -188,7 +269,33 @@ describe("DataTableBulkActions", () => {
     expect(button).toHaveAttribute("aria-disabled", "true");
   });
 
-  it("shows loading state when action is executing", () => {
+  it("explains disabled actions via disabledReason (DG-ST-03)", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const explainedAction: BulkAction<TestItem> = {
+      id: "export",
+      label: "Export",
+      onExecute: vi.fn(),
+      disabled: true,
+      disabledReason: "Exports cap at 100 rows",
+    };
+
+    renderWithProviders(
+      <DataTableBulkActions
+        selectedItems={[mockData[0]]}
+        onClearSelection={vi.fn()}
+        actions={[explainedAction]}
+      />,
+    );
+
+    expect(screen.getByText("Exports cap at 100 rows")).toBeInTheDocument();
+    const button = screen.getByRole("button", { name: "Export" });
+    expect(button).toHaveAttribute("aria-disabled", "true");
+    expect(button.getAttribute("aria-describedby")).toBeTruthy();
+    expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("bare-disabled"));
+    warnSpy.mockRestore();
+  });
+
+  it("shows busy state (spinner, not bare-disabled) when action is executing", () => {
     const mockExecute = vi.fn(() => new Promise<void>((resolve) => setTimeout(resolve, 100)));
     const exportAction = mockActions.find((a) => a.id === "export")!;
     exportAction.onExecute = mockExecute;
@@ -202,7 +309,10 @@ describe("DataTableBulkActions", () => {
     );
 
     fireEvent.click(screen.getByText("Export"));
-    expect(screen.getByText("...")).toBeInTheDocument();
+    // Button switches to the loading affordance: label replaced by the
+    // spinner and the control reads disabled while executing.
+    expect(screen.queryByText("Export")).not.toBeInTheDocument();
+    expect(document.querySelector('[aria-disabled="true"]')).toBeTruthy();
   });
 
   it("handles action execution errors gracefully", async () => {
@@ -229,6 +339,169 @@ describe("DataTableBulkActions", () => {
   });
 });
 
+// ---- Context-integration harness (compound DataTable selection model) ----
+
+type HarnessRow = { id: string; name: string; status: string };
+
+const harnessRows: HarnessRow[] = [
+  { id: "a", name: "Alpha", status: "ready" },
+  { id: "b", name: "Bravo", status: "ready" },
+  { id: "c", name: "Charlie", status: "ready" },
+  { id: "d", name: "Delta", status: "blocked" },
+];
+
+const harnessColumns = [
+  { id: "name", accessorKey: "name", header: "Name" },
+  { id: "status", accessorKey: "status", header: "Status" },
+];
+
+function SelectionHarness({
+  initialSelection = {},
+  columnFilters = [],
+  pageSize = 2,
+  selectAllScope = "page" as SelectAllScope,
+  actions,
+}: {
+  initialSelection?: Record<string, boolean>;
+  columnFilters?: Array<{ id: string; value: any }>;
+  pageSize?: number;
+  selectAllScope?: SelectAllScope;
+  actions: BulkAction<HarnessRow>[];
+}) {
+  const [rowSelection, setRowSelection] = React.useState(initialSelection);
+  const table = useReactTable({
+    data: harnessRows,
+    columns: harnessColumns as any,
+    state: {
+      rowSelection,
+      columnFilters,
+      pagination: { pageIndex: 0, pageSize },
+    },
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getRowId: (row) => row.id,
+    enableRowSelection: true,
+  });
+
+  const ctxValue = React.useMemo(
+    () =>
+      ({
+        table,
+        state: {} as any,
+        actions: {} as any,
+        computed: {} as any,
+        selectAllScope,
+      }) as any,
+    [table, rowSelection, columnFilters, selectAllScope],
+  );
+
+  return (
+    <DataTableStateContext.Provider value={ctxValue}>
+      <DataTableBulkActions actions={actions} />
+    </DataTableStateContext.Provider>
+  );
+}
+
+describe("DataTableBulkActions selection contract (context mode)", () => {
+  it("actions receive exactly the selected originals", async () => {
+    const received: HarnessRow[][] = [];
+    const actions: BulkAction<HarnessRow>[] = [
+      {
+        id: "tag",
+        label: "Tag",
+        onExecute: (items) => {
+          received.push(items);
+        },
+      },
+    ];
+
+    renderWithProviders(
+      <SelectionHarness initialSelection={{ a: true, c: true }} actions={actions} />,
+    );
+
+    expect(screen.getByText("2 selected")).toBeInTheDocument();
+    fireEvent.click(screen.getByText("Tag"));
+
+    await waitFor(() => expect(received).toHaveLength(1));
+    expect(received[0].map((r) => r.id)).toEqual(["a", "c"]);
+  });
+
+  it("page scope: full page selected offers 'Select all N matching' with the filtered count", () => {
+    renderWithProviders(
+      <SelectionHarness
+        initialSelection={{ a: true, b: true }}
+        actions={[{ id: "x", label: "X", onExecute: vi.fn() }]}
+      />,
+    );
+
+    // Page (a, b) fully selected; 4 rows match (no filter) → offer scope switch.
+    expect(screen.getByText("2 selected")).toBeInTheDocument();
+    expect(screen.getByText("Select all 4")).toBeInTheDocument();
+  });
+
+  it("expanding to all-matching keeps the count honest", async () => {
+    renderWithProviders(
+      <SelectionHarness
+        initialSelection={{ a: true, b: true }}
+        actions={[{ id: "x", label: "X", onExecute: vi.fn() }]}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Select all 4"));
+    expect(await screen.findByText("4 selected")).toBeInTheDocument();
+    expect(screen.queryByText(/Select all \d/)).toBeNull();
+  });
+
+  it("still offers the scope switch when a stale (filtered-out) selection inflates the count", () => {
+    // Filter shows a, b, c (page = a, b). Row d is selected but filtered out.
+    // selectedItems.length (3: a, b, d) equals matchingCount (3) even though
+    // matching row c is NOT selected — the switch must still appear.
+    renderWithProviders(
+      <SelectionHarness
+        initialSelection={{ a: true, b: true, d: true }}
+        columnFilters={[{ id: "status", value: "ready" }]}
+        actions={[{ id: "x", label: "X", onExecute: vi.fn() }]}
+      />,
+    );
+
+    expect(screen.getByText("3 selected (+1 filtered out)")).toBeInTheDocument();
+    expect(screen.getByText("Select all 3")).toBeInTheDocument();
+  });
+
+  it("annotates selected rows hidden by a column filter (D-15 ruling)", () => {
+    // TanStack's selected row model derives from the CORE model, so selection
+    // survives filter changes. Deliberate flip of the old characterization
+    // ("2 selected" with 1 invisible): the count keeps the full selection
+    // (agency preserved) and annotates the hidden remainder (view honesty).
+    renderWithProviders(
+      <SelectionHarness
+        initialSelection={{ a: true, d: true }}
+        columnFilters={[{ id: "status", value: "ready" }]}
+        actions={[{ id: "x", label: "X", onExecute: vi.fn() }]}
+      />,
+    );
+
+    // d is filtered out: still counted, now annotated.
+    expect(screen.getByText("2 selected (+1 filtered out)")).toBeInTheDocument();
+    expect(screen.queryByText("2 selected")).not.toBeInTheDocument();
+  });
+
+  it("omits the filtered-out annotation when every selected row is visible", () => {
+    renderWithProviders(
+      <SelectionHarness
+        initialSelection={{ a: true, c: true }}
+        columnFilters={[{ id: "status", value: "ready" }]}
+        actions={[{ id: "x", label: "X", onExecute: vi.fn() }]}
+      />,
+    );
+
+    expect(screen.getByText("2 selected")).toBeInTheDocument();
+    expect(screen.queryByText(/filtered out/)).not.toBeInTheDocument();
+  });
+});
+
 describe("useRowSelection", () => {
   const TestComponent = ({ children }: { children: (props: any) => React.ReactNode }) => {
     const selectionProps = useRowSelection({

package/src/components/DataTableBulkActions/DataTableBulkActions.stories.tsx

@@ -249,6 +249,7 @@ export const DisabledActions = () => {
       id: "disabled",
       label: "Disabled Action",
       disabled: true,
+      disabledReason: "Needs the admin role",
       onExecute: (selectedItems, clearSelection) => {
         action("disabled")(selectedItems);
         clearSelection();