@multiplatform.one/table 6.0.0

package/src/components/DataTable/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * DataTable - compound component for data tables.
+ *
+ * Orchestrates DataTableRoot with all sub-components attached via
+ * withStaticProperties. Supports both compound composition:
+ *
+ *   <DataTable data={data} columns={columns}>
+ *     <DataTable.Toolbar />
+ *     <DataTable.Pagination />
+ *   </DataTable>
+ *
+ * Or the root only (no child slots):
+ *
+ *   <DataTable data={data} columns={columns} />
+ */
+
+import { withStaticProperties } from "tamagui";
+import { DataTableRoot } from "./DataTableRoot";
+import { DataTableToolbar } from "../DataTableToolbar";
+import { DataTableFilters } from "../DataTableFilters";
+import { DataTablePagination } from "../DataTablePagination";
+import { DataTableBulkActions } from "../DataTableBulkActions";
+import { DataTableExport } from "../DataTableExport";
+import { DataTableSearch } from "../DataTableSearch";
+import { DataTableViewOptions } from "../DataTableViewOptions";
+import { DataTableGrouping } from "../DataTableGrouping";
+
+export { DataTableContext } from "./DataTableContext";
+export { DataTableStateContext, useDataTableState } from "./DataTableStateContext";
+export type { DataTableStateContextValue } from "./DataTableStateContext";
+export type { DataTableRootProps } from "./DataTableRoot";
+
+export const DataTable = withStaticProperties(DataTableRoot, {
+  Toolbar: DataTableToolbar,
+  Filters: DataTableFilters,
+  Pagination: DataTablePagination,
+  BulkActions: DataTableBulkActions,
+  Export: DataTableExport,
+  Search: DataTableSearch,
+  ViewOptions: DataTableViewOptions,
+  Grouping: DataTableGrouping,
+});
+
+export type DataTableComponent = typeof DataTable;

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

@@ -0,0 +1,408 @@
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import type React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { type BulkAction, DataTableBulkActions, useRowSelection } from "./index";
+
+// Test data type
+type TestItem = {
+  id: string;
+  name: string;
+  status: "active" | "inactive";
+};
+
+// Mock bulk actions
+const mockActions: BulkAction<TestItem>[] = [
+  {
+    id: "delete",
+    label: "Delete",
+    variant: "destructive",
+    requiresConfirmation: true,
+    onExecute: vi.fn(),
+  },
+  {
+    id: "export",
+    label: "Export",
+    onExecute: vi.fn(),
+  },
+  {
+    id: "duplicate",
+    label: "Duplicate",
+    onExecute: vi.fn(),
+  },
+];
+
+// Test data
+const mockData: TestItem[] = [
+  { id: "1", name: "Item 1", status: "active" },
+  { id: "2", name: "Item 2", status: "inactive" },
+  { id: "3", name: "Item 3", status: "active" },
+];
+
+describe("DataTableBulkActions", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders nothing when no items are selected", () => {
+    renderWithProviders(
+      <DataTableBulkActions selectedItems={[]} onClearSelection={vi.fn()} actions={mockActions} />,
+    );
+
+    expect(screen.queryByText(/selected/)).not.toBeInTheDocument();
+  });
+
+  it("renders selection count and action buttons when items are selected", () => {
+    renderWithProviders(
+      <DataTableBulkActions
+        selectedItems={[mockData[0]]}
+        onClearSelection={vi.fn()}
+        actions={mockActions}
+      />,
+    );
+
+    expect(screen.getByText("1 selected")).toBeInTheDocument();
+    expect(screen.getByText("Delete")).toBeInTheDocument();
+    expect(screen.getByText("Export")).toBeInTheDocument();
+    expect(screen.getByText("Duplicate")).toBeInTheDocument();
+  });
+
+  it("hides selection count when showSelectionCount is false", () => {
+    renderWithProviders(
+      <DataTableBulkActions
+        selectedItems={[mockData[0]]}
+        onClearSelection={vi.fn()}
+        actions={mockActions}
+        showSelectionCount={false}
+      />,
+    );
+
+    expect(screen.queryByText("1 selected")).not.toBeInTheDocument();
+  });
+
+  it("calls onClearSelection when clear button is clicked", () => {
+    const mockClearSelection = vi.fn();
+
+    renderWithProviders(
+      <DataTableBulkActions
+        selectedItems={[mockData[0]]}
+        onClearSelection={mockClearSelection}
+        actions={mockActions}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Clear"));
+    expect(mockClearSelection).toHaveBeenCalledTimes(1);
+  });
+
+  it("executes action immediately when requiresConfirmation is false", async () => {
+    const mockExecute = vi.fn();
+    const exportAction = mockActions.find((a) => a.id === "export")!;
+    exportAction.onExecute = mockExecute;
+
+    renderWithProviders(
+      <DataTableBulkActions
+        selectedItems={[mockData[0]]}
+        onClearSelection={vi.fn()}
+        actions={[exportAction]}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Export"));
+
+    await waitFor(() => {
+      expect(mockExecute).toHaveBeenCalledWith([mockData[0]], expect.any(Function));
+    });
+  });
+
+  it("shows confirmation dialog when action requires confirmation", () => {
+    const deleteAction = mockActions.find((a) => a.id === "delete")!;
+
+    renderWithProviders(
+      <DataTableBulkActions
+        selectedItems={[mockData[0], mockData[1]]}
+        onClearSelection={vi.fn()}
+        actions={[deleteAction]}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Delete"));
+
+    expect(screen.getByText("Confirm Delete")).toBeInTheDocument();
+    expect(screen.getByText("Are you sure you want to delete 2 items?")).toBeInTheDocument();
+  });
+
+  it("executes action after confirmation", async () => {
+    const mockExecute = vi.fn();
+    const deleteAction = mockActions.find((a) => a.id === "delete")!;
+    deleteAction.onExecute = mockExecute;
+
+    renderWithProviders(
+      <DataTableBulkActions
+        selectedItems={[mockData[0]]}
+        onClearSelection={vi.fn()}
+        actions={[deleteAction]}
+      />,
+    );
+
+    // Click the action button first
+    fireEvent.click(screen.getByText("Delete"));
+
+    // Click the confirmation button (there will be two "Delete" buttons now)
+    const deleteButtons = screen.getAllByText("Delete");
+    fireEvent.click(deleteButtons[1]); // Click the confirmation button
+
+    await waitFor(() => {
+      expect(mockExecute).toHaveBeenCalledWith([mockData[0]], expect.any(Function));
+    });
+  });
+
+  it("shows overflow menu when there are more actions than maxVisibleActions", () => {
+    renderWithProviders(
+      <DataTableBulkActions
+        selectedItems={[mockData[0]]}
+        onClearSelection={vi.fn()}
+        actions={mockActions}
+        maxVisibleActions={2}
+      />,
+    );
+
+    // Should show first 2 actions and overflow menu
+    expect(screen.getByText("Delete")).toBeInTheDocument();
+    expect(screen.getByText("Export")).toBeInTheDocument();
+    expect(screen.queryByText("Duplicate")).not.toBeInTheDocument();
+  });
+
+  it("disables button when action is disabled", () => {
+    const disabledAction = { ...mockActions[0], disabled: true };
+
+    renderWithProviders(
+      <DataTableBulkActions
+        selectedItems={[mockData[0]]}
+        onClearSelection={vi.fn()}
+        actions={[disabledAction]}
+      />,
+    );
+
+    const button = screen.getByRole("button", { name: "Delete" });
+    expect(button).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("shows loading state 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;
+
+    renderWithProviders(
+      <DataTableBulkActions
+        selectedItems={[mockData[0]]}
+        onClearSelection={vi.fn()}
+        actions={[exportAction]}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Export"));
+    expect(screen.getByText("...")).toBeInTheDocument();
+  });
+
+  it("handles action execution errors gracefully", async () => {
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    const mockExecute = vi.fn(() => Promise.reject(new Error("Test error")));
+    const exportAction = mockActions.find((a) => a.id === "export")!;
+    exportAction.onExecute = mockExecute;
+
+    renderWithProviders(
+      <DataTableBulkActions
+        selectedItems={[mockData[0]]}
+        onClearSelection={vi.fn()}
+        actions={[exportAction]}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Export"));
+
+    await waitFor(() => {
+      expect(consoleSpy).toHaveBeenCalledWith("Bulk action failed:", expect.any(Error));
+    });
+
+    consoleSpy.mockRestore();
+  });
+});
+
+describe("useRowSelection", () => {
+  const TestComponent = ({ children }: { children: (props: any) => React.ReactNode }) => {
+    const selectionProps = useRowSelection({
+      data: mockData,
+      selectionKey: "id",
+    });
+
+    return <>{children(selectionProps)}</>;
+  };
+
+  it("initializes with empty selection", () => {
+    let selectionProps: any;
+
+    renderWithProviders(
+      <TestComponent>
+        {(props) => {
+          selectionProps = props;
+          return null;
+        }}
+      </TestComponent>,
+    );
+
+    expect(selectionProps.selectedItems).toEqual([]);
+    expect(selectionProps.selectedIds.size).toBe(0);
+    expect(selectionProps.isAllSelected).toBe(false);
+    expect(selectionProps.isIndeterminate).toBe(false);
+  });
+
+  it("toggles item selection", () => {
+    let selectionProps: any;
+
+    renderWithProviders(
+      <TestComponent>
+        {(props) => {
+          selectionProps = props;
+          return (
+            <button type="button" onClick={() => props.toggleItem(mockData[0])}>
+              Toggle
+            </button>
+          );
+        }}
+      </TestComponent>,
+    );
+
+    fireEvent.click(screen.getByText("Toggle"));
+
+    expect(selectionProps.selectedItems).toEqual([mockData[0]]);
+    expect(selectionProps.isSelected(mockData[0])).toBe(true);
+    expect(selectionProps.isSelected(mockData[1])).toBe(false);
+  });
+
+  it("toggles all items", () => {
+    let selectionProps: any;
+
+    renderWithProviders(
+      <TestComponent>
+        {(props) => {
+          selectionProps = props;
+          return (
+            <button type="button" onClick={() => props.toggleAll()}>
+              Toggle All
+            </button>
+          );
+        }}
+      </TestComponent>,
+    );
+
+    fireEvent.click(screen.getByText("Toggle All"));
+
+    expect(selectionProps.selectedItems).toEqual(mockData);
+    expect(selectionProps.isAllSelected).toBe(true);
+    expect(selectionProps.isIndeterminate).toBe(false);
+  });
+
+  it("clears selection", () => {
+    let selectionProps: any;
+
+    renderWithProviders(
+      <TestComponent>
+        {(props) => {
+          selectionProps = props;
+          return (
+            <button type="button" onClick={() => props.clearSelection()}>
+              Clear
+            </button>
+          );
+        }}
+      </TestComponent>,
+    );
+
+    act(() => {
+      selectionProps.selectAll();
+    });
+
+    expect(selectionProps.selectedItems).toEqual(mockData);
+
+    fireEvent.click(screen.getByText("Clear"));
+    expect(selectionProps.selectedItems).toEqual([]);
+  });
+
+  it("selects specific items", () => {
+    let selectionProps: any;
+
+    renderWithProviders(
+      <TestComponent>
+        {(props) => {
+          selectionProps = props;
+          return (
+            <button type="button" onClick={() => props.selectItems([mockData[1]])}>
+              Select
+            </button>
+          );
+        }}
+      </TestComponent>,
+    );
+
+    fireEvent.click(screen.getByText("Select"));
+
+    expect(selectionProps.selectedItems).toEqual([mockData[1]]);
+  });
+
+  it("handles indeterminate state", () => {
+    let selectionProps: any;
+
+    renderWithProviders(
+      <TestComponent>
+        {(props) => {
+          selectionProps = props;
+          return (
+            <button type="button" onClick={() => props.selectItems([mockData[0]])}>
+              Select One
+            </button>
+          );
+        }}
+      </TestComponent>,
+    );
+
+    fireEvent.click(screen.getByText("Select One"));
+
+    expect(selectionProps.isIndeterminate).toBe(true);
+    expect(selectionProps.isAllSelected).toBe(false);
+  });
+
+  it("calls onSelectionChange callback", () => {
+    const mockOnChange = vi.fn();
+
+    const TestComponentWithCallback = ({
+      children,
+    }: {
+      children: (props: any) => React.ReactNode;
+    }) => {
+      const selectionProps = useRowSelection({
+        data: mockData,
+        selectionKey: "id",
+        onSelectionChange: mockOnChange,
+      });
+
+      return <>{children(selectionProps)}</>;
+    };
+
+    renderWithProviders(
+      <TestComponentWithCallback>
+        {(props) => (
+          <button type="button" onClick={() => props.toggleItem(mockData[0])}>
+            Toggle
+          </button>
+        )}
+      </TestComponentWithCallback>,
+    );
+
+    fireEvent.click(screen.getByText("Toggle"));
+
+    expect(mockOnChange).toHaveBeenCalledWith([mockData[0]]);
+  });
+});
+
+// Note: createBulkActions has been removed - users should define their own actions