@izumisy-tailor/tailor-data-viewer 0.2.18 → 0.2.20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.2.18",
+  "version": "0.2.20",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [

package/src/component/collection/collection-provider.tsx

@@ -15,7 +15,7 @@ const CollectionContext = createContext<UseCollectionReturn<
  *
  * <CollectionProvider value={collection}>
  *   <FilterPanel />
- *   <DataTable.Root {...table.rootProps}>...</DataTable.Root>
+ *   <DataTable.Root>...</DataTable.Root>
  *   <Pagination {...table} />
  * </CollectionProvider>
  * ```

package/src/component/column-selector.test.tsx

@@ -0,0 +1,120 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import type { Column } from "./types";
+import { createTestProviders } from "../tests/helpers";
+import { ColumnSelector } from "./column-selector";
+
+// =============================================================================
+// Fixtures
+// =============================================================================
+
+type TestRow = { id: string; name: string; status: string };
+
+const testColumns: Column<TestRow>[] = [
+  { kind: "field", dataKey: "name", label: "Name" },
+  { kind: "field", dataKey: "status", label: "Status" },
+  {
+    kind: "display",
+    id: "actions",
+    label: "Actions",
+    render: (row) => <button>Edit {row.name}</button>,
+  },
+];
+
+const testRows: TestRow[] = [
+  { id: "1", name: "Alice", status: "active" },
+  { id: "2", name: "Bob", status: "inactive" },
+];
+
+const TestProviders = createTestProviders({
+  columns: testColumns,
+  rows: testRows,
+});
+
+// =============================================================================
+// Tests
+// =============================================================================
+
+describe("ColumnSelector", () => {
+  it("renders column names with checkboxes", () => {
+    render(
+      <TestProviders>
+        <ColumnSelector />
+      </TestProviders>,
+    );
+
+    expect(screen.getByText("Columns")).toBeInTheDocument();
+    expect(screen.getByText("Name")).toBeInTheDocument();
+    expect(screen.getByText("Status")).toBeInTheDocument();
+    expect(screen.getByText("Actions")).toBeInTheDocument();
+  });
+
+  it("shows checkboxes as checked when columns are visible", () => {
+    render(
+      <TestProviders dataTable={{ isColumnVisible: vi.fn(() => true) }}>
+        <ColumnSelector />
+      </TestProviders>,
+    );
+
+    const checkboxes = screen.getAllByRole("checkbox");
+    for (const cb of checkboxes) {
+      expect(cb).toBeChecked();
+    }
+  });
+
+  it("shows checkboxes as unchecked when columns are hidden", () => {
+    render(
+      <TestProviders dataTable={{ isColumnVisible: vi.fn(() => false) }}>
+        <ColumnSelector />
+      </TestProviders>,
+    );
+
+    const checkboxes = screen.getAllByRole("checkbox");
+    for (const cb of checkboxes) {
+      expect(cb).not.toBeChecked();
+    }
+  });
+
+  it("calls toggleColumn when a checkbox is clicked", () => {
+    const toggleColumn = vi.fn();
+    render(
+      <TestProviders dataTable={{ toggleColumn }}>
+        <ColumnSelector />
+      </TestProviders>,
+    );
+
+    const checkboxes = screen.getAllByRole("checkbox");
+    fireEvent.click(checkboxes[0]);
+    expect(toggleColumn).toHaveBeenCalledWith("name");
+  });
+
+  it("calls showAllColumns when Select all is clicked", () => {
+    const showAllColumns = vi.fn();
+    render(
+      <TestProviders dataTable={{ showAllColumns }}>
+        <ColumnSelector />
+      </TestProviders>,
+    );
+
+    fireEvent.click(screen.getByText("Select all"));
+    expect(showAllColumns).toHaveBeenCalled();
+  });
+
+  it("calls hideAllColumns when Deselect all is clicked", () => {
+    const hideAllColumns = vi.fn();
+    render(
+      <TestProviders dataTable={{ hideAllColumns }}>
+        <ColumnSelector />
+      </TestProviders>,
+    );
+
+    fireEvent.click(screen.getByText("Deselect all"));
+    expect(hideAllColumns).toHaveBeenCalled();
+  });
+
+  it("throws when rendered outside provider", () => {
+    console.error = vi.fn();
+    expect(() => render(<ColumnSelector />)).toThrow();
+    console.error = globalThis.console.error;
+  });
+});

package/src/component/column-selector.tsx

@@ -1,22 +1,26 @@
-import type { ColumnSelectorProps } from "./types";
+import { useDataTableContext } from "./data-table/data-table-context";
 
 /**
  * Column visibility toggle dropdown.
  *
- * Designed to receive props via spread from `useDataTable()`.
+ * Reads column definitions and visibility state from `DataTableContext`.
+ * Must be rendered inside `DataTable.Provider`.
  *
  * @example
  * ```tsx
- * <ColumnSelector {...table} />
+ * <DataTable.Provider value={table}>
+ *   <ColumnSelector />
+ * </DataTable.Provider>
  * ```
  */
-export function ColumnSelector<TRow extends Record<string, unknown>>({
-  columns,
-  isColumnVisible,
-  toggleColumn,
-  showAllColumns,
-  hideAllColumns,
-}: ColumnSelectorProps<TRow>) {
+export function ColumnSelector() {
+  const {
+    columns,
+    isColumnVisible,
+    toggleColumn,
+    showAllColumns,
+    hideAllColumns,
+  } = useDataTableContext();
   return (
     <div className="relative inline-block">
       <details className="group">
@@ -24,28 +28,22 @@ export function ColumnSelector<TRow extends Record<string, unknown>>({
           Columns
         </summary>
         <div className="absolute right-0 z-50 mt-1 min-w-[180px] rounded-md border bg-popover p-2 text-popover-foreground shadow-md">
-          {(showAllColumns || hideAllColumns) && (
-            <div className="flex gap-2 border-b pb-2 mb-2">
-              {showAllColumns && (
-                <button
-                  type="button"
-                  className="text-xs text-muted-foreground hover:text-foreground"
-                  onClick={showAllColumns}
-                >
-                  Select all
-                </button>
-              )}
-              {hideAllColumns && (
-                <button
-                  type="button"
-                  className="text-xs text-muted-foreground hover:text-foreground"
-                  onClick={hideAllColumns}
-                >
-                  Deselect all
-                </button>
-              )}
-            </div>
-          )}
+          <div className="flex gap-2 border-b pb-2 mb-2">
+            <button
+              type="button"
+              className="text-xs text-muted-foreground hover:text-foreground"
+              onClick={showAllColumns}
+            >
+              Select all
+            </button>
+            <button
+              type="button"
+              className="text-xs text-muted-foreground hover:text-foreground"
+              onClick={hideAllColumns}
+            >
+              Deselect all
+            </button>
+          </div>
           {columns.map((col) => {
             const key = col.kind === "field" ? col.dataKey : col.id;
             const label =

package/src/component/components.test.tsx

@@ -1,7 +1,9 @@
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
 import { Table } from "./table";
-import { DataTable } from "./data-table/index";
+import { DataTable } from "./data-table/data-table";
+import { DataTableContext } from "./data-table/data-table-context";
+import type { DataTableContextValue } from "./data-table/data-table-context";
 import type { Column } from "./types";
 
 describe("Table (static)", () => {
@@ -65,13 +67,51 @@ const testRows: TestRow[] = [
   { id: "2", name: "Bob", status: "Inactive" },
 ];
 
+const noopRowOps = {
+  updateRow: () => ({ rollback: () => {} }),
+  deleteRow: () => ({
+    rollback: () => {},
+    deletedRow: {} as TestRow,
+  }),
+  insertRow: () => ({ rollback: () => {} }),
+};
+
+const defaultPageInfo = {
+  hasNextPage: false,
+  endCursor: null,
+  hasPreviousPage: false,
+  startCursor: null,
+};
+
+function createCtx(
+  overrides: Partial<DataTableContextValue<TestRow>> = {},
+): DataTableContextValue<TestRow> {
+  return {
+    columns: testColumns,
+    rows: testRows,
+    loading: false,
+    error: null,
+    sortStates: [],
+    visibleColumns: testColumns,
+    isColumnVisible: () => true,
+    toggleColumn: () => {},
+    showAllColumns: () => {},
+    hideAllColumns: () => {},
+    pageInfo: defaultPageInfo,
+    ...noopRowOps,
+    ...overrides,
+  };
+}
+
 describe("DataTable", () => {
   it("renders data-bound table with auto-generated rows", () => {
     render(
-      <DataTable.Root columns={testColumns} rows={testRows}>
-        <DataTable.Headers />
-        <DataTable.Body />
-      </DataTable.Root>,
+      <DataTableContext.Provider value={createCtx()}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
     );
 
     expect(screen.getByText("Name")).toBeInTheDocument();
@@ -83,10 +123,12 @@ describe("DataTable", () => {
 
   it("renders display columns via render function", () => {
     render(
-      <DataTable.Root columns={testColumns} rows={testRows}>
-        <DataTable.Headers />
-        <DataTable.Body />
-      </DataTable.Root>,
+      <DataTableContext.Provider value={createCtx()}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
     );
 
     expect(screen.getByText("Edit Alice")).toBeInTheDocument();
@@ -95,10 +137,12 @@ describe("DataTable", () => {
 
   it("shows loading state", () => {
     render(
-      <DataTable.Root columns={testColumns} rows={[]} loading>
-        <DataTable.Headers />
-        <DataTable.Body />
-      </DataTable.Root>,
+      <DataTableContext.Provider value={createCtx({ rows: [], loading: true })}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
     );
 
     expect(screen.getByText("Loading...")).toBeInTheDocument();
@@ -107,10 +151,12 @@ describe("DataTable", () => {
   it("shows error state", () => {
     const err = new Error("Something went wrong");
     render(
-      <DataTable.Root columns={testColumns} rows={[]} error={err}>
-        <DataTable.Headers />
-        <DataTable.Body />
-      </DataTable.Root>,
+      <DataTableContext.Provider value={createCtx({ rows: [], error: err })}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
     );
 
     expect(screen.getByText("Error: Something went wrong")).toBeInTheDocument();
@@ -118,10 +164,12 @@ describe("DataTable", () => {
 
   it("shows empty state", () => {
     render(
-      <DataTable.Root columns={testColumns} rows={[]}>
-        <DataTable.Headers />
-        <DataTable.Body />
-      </DataTable.Root>,
+      <DataTableContext.Provider value={createCtx({ rows: [] })}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
     );
 
     expect(screen.getByText("No data")).toBeInTheDocument();
@@ -129,14 +177,16 @@ describe("DataTable", () => {
 
   it("renders sort indicator on sorted column", () => {
     render(
-      <DataTable.Root
-        columns={testColumns}
-        rows={testRows}
-        sortStates={[{ field: "name", direction: "Asc" }]}
+      <DataTableContext.Provider
+        value={createCtx({
+          sortStates: [{ field: "name", direction: "Asc" }],
+        })}
       >
-        <DataTable.Headers />
-        <DataTable.Body />
-      </DataTable.Root>,
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
     );
 
     expect(screen.getByText("▲")).toBeInTheDocument();
@@ -144,14 +194,16 @@ describe("DataTable", () => {
 
   it("supports custom rendering with children", () => {
     render(
-      <DataTable.Root columns={testColumns} rows={testRows}>
-        <DataTable.Headers />
-        <DataTable.Body>
-          <DataTable.Row>
-            <DataTable.Cell>Custom Cell</DataTable.Cell>
-          </DataTable.Row>
-        </DataTable.Body>
-      </DataTable.Root>,
+      <DataTableContext.Provider value={createCtx()}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body>
+            <DataTable.Row>
+              <DataTable.Cell>Custom Cell</DataTable.Cell>
+            </DataTable.Row>
+          </DataTable.Body>
+        </DataTable.Root>
+      </DataTableContext.Provider>,
     );
 
     expect(screen.getByText("Custom Cell")).toBeInTheDocument();

package/src/component/csv-button.test.tsx

@@ -0,0 +1,122 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import type { Column } from "./types";
+import { createTestProviders } from "../tests/helpers";
+import { CsvButton } from "./csv-button";
+
+// =============================================================================
+// Fixtures
+// =============================================================================
+
+type TestRow = { id: string; name: string; status: string };
+
+const testColumns: Column<TestRow>[] = [
+  { kind: "field", dataKey: "name", label: "Name" },
+  { kind: "field", dataKey: "status", label: "Status" },
+];
+
+const testRows: TestRow[] = [
+  { id: "1", name: "Alice", status: "active" },
+  { id: "2", name: "Bob", status: "inactive" },
+];
+
+const TestProviders = createTestProviders({
+  columns: testColumns,
+  rows: testRows,
+});
+
+// =============================================================================
+// Tests
+// =============================================================================
+
+describe("CsvButton", () => {
+  // Save originals before each test to avoid cross-contamination
+  const originalCreateObjectURL = globalThis.URL.createObjectURL;
+  const originalRevokeObjectURL = globalThis.URL.revokeObjectURL;
+  let originalCreateElement: typeof document.createElement;
+
+  beforeEach(() => {
+    originalCreateElement = document.createElement.bind(document);
+  });
+
+  afterEach(() => {
+    globalThis.URL.createObjectURL = originalCreateObjectURL;
+    globalThis.URL.revokeObjectURL = originalRevokeObjectURL;
+    vi.restoreAllMocks();
+  });
+
+  it("renders Export CSV button", () => {
+    render(
+      <TestProviders>
+        <CsvButton />
+      </TestProviders>,
+    );
+
+    expect(screen.getByText("Export CSV")).toBeInTheDocument();
+  });
+
+  it("triggers CSV download on click", () => {
+    const createObjectURL = vi.fn(() => "blob:mock-url");
+    const revokeObjectURL = vi.fn();
+    globalThis.URL.createObjectURL = createObjectURL;
+    globalThis.URL.revokeObjectURL = revokeObjectURL;
+
+    const clickSpy = vi.fn();
+    vi.spyOn(document, "createElement").mockImplementation(
+      (tag: string, options?: ElementCreationOptions) => {
+        if (tag === "a") {
+          return {
+            href: "",
+            download: "",
+            click: clickSpy,
+          } as unknown as HTMLAnchorElement;
+        }
+        return originalCreateElement(tag, options);
+      },
+    );
+
+    render(
+      <TestProviders>
+        <CsvButton filename="test-export" />
+      </TestProviders>,
+    );
+
+    fireEvent.click(screen.getByText("Export CSV"));
+
+    expect(createObjectURL).toHaveBeenCalled();
+    expect(clickSpy).toHaveBeenCalled();
+    expect(revokeObjectURL).toHaveBeenCalledWith("blob:mock-url");
+  });
+
+  it("uses default filename when not specified", () => {
+    globalThis.URL.createObjectURL = vi.fn(() => "blob:url");
+    globalThis.URL.revokeObjectURL = vi.fn();
+
+    const links: { download: string }[] = [];
+    vi.spyOn(document, "createElement").mockImplementation(
+      (tag: string, options?: ElementCreationOptions) => {
+        if (tag === "a") {
+          const link = { href: "", download: "", click: vi.fn() };
+          links.push(link);
+          return link as unknown as HTMLAnchorElement;
+        }
+        return originalCreateElement(tag, options);
+      },
+    );
+
+    render(
+      <TestProviders>
+        <CsvButton />
+      </TestProviders>,
+    );
+
+    fireEvent.click(screen.getByText("Export CSV"));
+    expect(links[0].download).toBe("export.csv");
+  });
+
+  it("throws when rendered outside provider", () => {
+    console.error = vi.fn();
+    expect(() => render(<CsvButton />)).toThrow();
+    console.error = globalThis.console.error;
+  });
+});

package/src/component/csv-button.tsx

@@ -1,20 +1,21 @@
-import type { CsvButtonProps } from "./types";
+import { useDataTableContext } from "./data-table/data-table-context";
 
 /**
  * CSV export button.
  *
  * Exports visible columns and rows to a CSV file download.
+ * Reads `visibleColumns` and `rows` from `DataTableContext`.
+ * Must be rendered inside `DataTable.Provider`.
  *
  * @example
  * ```tsx
- * <CsvButton {...table} filename="orders-export" />
+ * <DataTable.Provider value={table}>
+ *   <CsvButton filename="orders-export" />
+ * </DataTable.Provider>
  * ```
  */
-export function CsvButton<TRow extends Record<string, unknown>>({
-  visibleColumns,
-  rows,
-  filename = "export",
-}: CsvButtonProps<TRow>) {
+export function CsvButton({ filename = "export" }: { filename?: string }) {
+  const { visibleColumns, rows } = useDataTableContext();
   const handleExport = () => {
     // Build header row
     const headers = visibleColumns.map((col) => {

package/src/component/data-table/data-table-context.tsx

@@ -1,25 +1,36 @@
 import { createContext, useContext } from "react";
-import type { Column, RowOperations, SortState } from "../types";
+import type { Column, PageInfo, RowOperations, SortState } from "../types";
 
 /**
- * Context value provided by `DataTable.Root`.
+ * Context value provided by `DataTable.Provider`.
  *
- * Exposes row operations for optimistic updates and table state
- * so that `DataTable.Headers` / `DataTable.Body` can read them
- * without explicit props.
+ * Exposes row operations for optimistic updates, table state, column
+ * visibility, and page info so that `DataTable.Headers` / `DataTable.Body`
+ * and utility components (`Pagination`, `ColumnSelector`, etc.) can read
+ * them without explicit props.
  */
 export interface DataTableContextValue<TRow extends Record<string, unknown>> {
   updateRow: RowOperations<TRow>["updateRow"];
   deleteRow: RowOperations<TRow>["deleteRow"];
   insertRow: RowOperations<TRow>["insertRow"];
 
-  // Table state propagated from DataTable.Root
+  // Table state propagated from DataTable.Provider
   columns: Column<TRow>[];
   rows: TRow[];
   loading: boolean;
   error: Error | null;
   sortStates: SortState[];
   onSort?: (field: string, direction?: "Asc" | "Desc") => void;
+
+  // Column visibility (populated by DataTable.Provider)
+  visibleColumns: Column<TRow>[];
+  isColumnVisible: (fieldOrId: string) => boolean;
+  toggleColumn: (fieldOrId: string) => void;
+  showAllColumns: () => void;
+  hideAllColumns: () => void;
+
+  // Page info from GraphQL response (populated by DataTable.Provider)
+  pageInfo: PageInfo;
 }
 
 // Using `any` for the context default since generic contexts need a base type.
@@ -29,9 +40,9 @@ const DataTableContext = createContext<DataTableContextValue<any> | null>(null);
 export { DataTableContext };
 
 /**
- * Hook to access row operations from the nearest `DataTable.Root`.
+ * Hook to access row operations from the nearest `DataTable.Provider`.
  *
- * @throws Error if used outside of `DataTable.Root`.
+ * @throws Error if used outside of `DataTable.Provider`.
  *
  * @example
  * ```tsx
@@ -46,7 +57,9 @@ export function useDataTableContext<
 >(): DataTableContextValue<TRow> {
   const ctx = useContext(DataTableContext);
   if (!ctx) {
-    throw new Error("useDataTableContext must be used within <DataTable.Root>");
+    throw new Error(
+      "useDataTableContext must be used within <DataTable.Provider>",
+    );
   }
   return ctx as DataTableContextValue<TRow>;
 }