@marimo-team/frontend 0.23.9-dev3 → 0.23.9-dev30

package/src/components/data-table/__tests__/filter-pill-editor.test.tsx

@@ -1,10 +1,17 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import type { Column, Table } from "@tanstack/react-table";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { beforeAll, describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { FilterPillEditor } from "../filter-pill-editor";
-import { Filter } from "../filters";
+import {
+  buildEditorSnapshot,
+  buildEmptyFilterValue,
+  FilterPillEditor,
+} from "../filter-pill-editor";
+import { defaultFilterValueFor, Filter } from "../filters";
+import {
+  buildFilterTestTable,
+  type FilterColumnSpec,
+} from "./filter-test-utils";
 
 const renderWithProviders = (ui: React.ReactElement) =>
   render(<TooltipProvider>{ui}</TooltipProvider>);
@@ -24,37 +31,15 @@ beforeAll(() => {
   }
 });
 
-function makeColumn(
-  id: string,
-  filterType:
-    | "text"
-    | "number"
-    | "boolean"
-    | "select"
-    | "date"
-    | "datetime"
-    | "time",
-): Column<unknown, unknown> {
-  return {
-    id,
-    columnDef: { meta: { filterType, dataType: "string" } },
-  } as unknown as Column<unknown, unknown>;
-}
+const DEFAULT_COLUMNS: FilterColumnSpec[] = [
+  { id: "name", filterType: "text" },
+  { id: "age", filterType: "number" },
+  { id: "when", filterType: "date" },
+  { id: "at", filterType: "datetime" },
+  { id: "clock", filterType: "time" },
+];
 
-function mockTable(): Table<unknown> {
-  const columns = [
-    makeColumn("name", "text"),
-    makeColumn("age", "number"),
-    makeColumn("when", "date"),
-    makeColumn("at", "datetime"),
-    makeColumn("clock", "time"),
-  ];
-  return {
-    getAllColumns: () => columns,
-    getColumn: (id: string) => columns.find((c) => c.id === id),
-    setColumnFilters: vi.fn(),
-  } as unknown as Table<unknown>;
-}
+const mockTable = () => buildFilterTestTable(DEFAULT_COLUMNS).table;
 
 async function calculateTopK() {
   return {
@@ -111,7 +96,8 @@ describe("FilterPillEditor — snapshot rehydration", () => {
         onClose={vi.fn()}
       />,
     );
-    expect(await screen.findByText("[a, b]")).toBeInTheDocument();
+    expect(await screen.findByText("a")).toBeInTheDocument();
+    expect(screen.getByText("b")).toBeInTheDocument();
   });
 
   it("rehydrates a text contains snapshot with seeded text", () => {
@@ -232,7 +218,7 @@ describe("FilterPillEditor — date/datetime/time", () => {
 
 describe("FilterPillEditor — apply", () => {
   it("commits a number > filter via setColumnFilters", () => {
-    const table = mockTable();
+    const { table, setColumnFilters } = buildFilterTestTable(DEFAULT_COLUMNS);
     const onClose = vi.fn();
     renderWithProviders(
       <FilterPillEditor
@@ -245,11 +231,10 @@ describe("FilterPillEditor — apply", () => {
       />,
     );
     fireEvent.click(screen.getByLabelText("Apply filter"));
-    expect(table.setColumnFilters).toHaveBeenCalledTimes(1);
+    expect(setColumnFilters).toHaveBeenCalledTimes(1);
     expect(onClose).toHaveBeenCalledTimes(1);
 
-    const updater = (table.setColumnFilters as ReturnType<typeof vi.fn>).mock
-      .calls[0][0];
+    const updater = setColumnFilters.mock.calls[0][0];
     const next = updater([]);
     expect(next).toEqual([
       {
@@ -259,3 +244,55 @@ describe("FilterPillEditor — apply", () => {
     ]);
   });
 });
+
+describe("defaultFilterValueFor", () => {
+  it.each([
+    ["number", "between", { type: "number", operator: "between" }],
+    ["number", ">", { type: "number", operator: ">" }],
+    ["text", "contains", { type: "text", operator: "contains" }],
+    ["text", "in", { type: "text", operator: "in", values: [] }],
+    ["text", "not_in", { type: "text", operator: "not_in", values: [] }],
+    ["boolean", "is_true", { type: "boolean", operator: "is_true" }],
+    ["number", "in", { type: "number", operator: "in", values: [] }],
+    ["number", "not_in", { type: "number", operator: "not_in", values: [] }],
+    ["date", "between", { type: "date", operator: "between" }],
+    ["datetime", "between", { type: "datetime", operator: "between" }],
+    ["time", "between", { type: "time", operator: "between" }],
+  ] as const)("seeds %s + %s", (type, operator, expected) => {
+    expect(defaultFilterValueFor(type, operator)).toEqual(expected);
+  });
+});
+
+describe("buildEmptyFilterValue", () => {
+  it.each([
+    ["name", { type: "text", operator: "contains" }],
+    ["age", { type: "number", operator: "between" }],
+    ["when", { type: "date", operator: "==" }],
+    ["at", { type: "datetime", operator: "==" }],
+    ["clock", { type: "time", operator: "between" }],
+  ] as const)(
+    "picks the dtype-default operator for %s",
+    (columnId, expected) => {
+      const column = mockTable().getColumn(columnId)!;
+      expect(buildEmptyFilterValue(column)).toEqual(expected);
+    },
+  );
+});
+
+describe("buildEditorSnapshot", () => {
+  it("uses dtype-default operator when none provided", () => {
+    const column = mockTable().getColumn("name")!;
+    expect(buildEditorSnapshot(column)).toEqual({
+      columnId: "name",
+      value: { type: "text", operator: "contains" },
+    });
+  });
+
+  it("honors an explicit operator override", () => {
+    const column = mockTable().getColumn("name")!;
+    expect(buildEditorSnapshot(column, { operator: "in" })).toEqual({
+      columnId: "name",
+      value: { type: "text", operator: "in", values: [] },
+    });
+  });
+});

package/src/components/data-table/__tests__/filter-pills.test.tsx

@@ -0,0 +1,287 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { ColumnFiltersState } from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { AddFilterButton } from "../add-filter-button";
+import { FilterPills } from "../filter-pills";
+import { buildEditorSnapshot } from "../filter-pill-editor";
+import { Filter, type Snapshot } from "../filters";
+import {
+  buildFilterTestTable,
+  type FilterColumnSpec,
+} from "./filter-test-utils";
+
+const renderWithProviders = (ui: React.ReactElement) =>
+  render(<TooltipProvider>{ui}</TooltipProvider>);
+
+beforeAll(() => {
+  global.HTMLElement.prototype.scrollIntoView = () => {
+    // jsdom does not implement scrollIntoView; cmdk calls it on selection.
+  };
+  if (!global.HTMLElement.prototype.hasPointerCapture) {
+    global.HTMLElement.prototype.hasPointerCapture = () => false;
+  }
+  if (!global.HTMLElement.prototype.scrollTo) {
+    global.HTMLElement.prototype.scrollTo = () => {
+      // noop for jsdom
+    };
+  }
+});
+
+const DEFAULT_COLUMNS: FilterColumnSpec[] = [
+  { id: "name", filterType: "text" },
+  { id: "age", filterType: "number" },
+  { id: "when", filterType: "date" },
+];
+
+const mockTable = (specs: FilterColumnSpec[] = DEFAULT_COLUMNS) =>
+  buildFilterTestTable(specs).table;
+
+describe("FilterPills — strip gating", () => {
+  it("renders nothing when there are no filters and no pending add-snapshot", () => {
+    const { container } = renderWithProviders(
+      <FilterPills
+        filters={[]}
+        table={mockTable()}
+        addFilterSnapshot={null}
+        onAddFilterSnapshotChange={vi.fn()}
+      />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders the strip and + button when at least one filter exists", () => {
+    const filters: ColumnFiltersState = [
+      {
+        id: "age",
+        value: Filter.number({ operator: ">", value: 18 }),
+      },
+    ];
+    renderWithProviders(
+      <FilterPills
+        filters={filters}
+        table={mockTable()}
+        addFilterSnapshot={null}
+        onAddFilterSnapshotChange={vi.fn()}
+      />,
+    );
+    expect(screen.getByLabelText("Add filter")).toBeInTheDocument();
+    expect(screen.getByLabelText("Edit filter on age")).toBeInTheDocument();
+  });
+
+  it("mounts the strip with no filters when a pending add-snapshot is set", () => {
+    const table = mockTable();
+    const snapshot: Snapshot = buildEditorSnapshot(table.getAllColumns()[0]);
+    renderWithProviders(
+      <FilterPills
+        filters={[]}
+        table={table}
+        addFilterSnapshot={snapshot}
+        onAddFilterSnapshotChange={vi.fn()}
+      />,
+    );
+    expect(screen.getByLabelText("Add filter")).toBeInTheDocument();
+  });
+});
+
+describe("AddFilterButton", () => {
+  it("does not render when there are no editable columns", () => {
+    const table = mockTable([{ id: "opaque" }]);
+    const { container } = renderWithProviders(
+      <AddFilterButton
+        table={table}
+        snapshot={null}
+        onSnapshotChange={vi.fn()}
+      />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("seeds the editor with the first editable column's dtype default on click", () => {
+    const table = mockTable();
+    const onSnapshotChange = vi.fn();
+    renderWithProviders(
+      <AddFilterButton
+        table={table}
+        snapshot={null}
+        onSnapshotChange={onSnapshotChange}
+      />,
+    );
+    fireEvent.click(screen.getByLabelText("Add filter"));
+    expect(onSnapshotChange).toHaveBeenCalledTimes(1);
+    expect(onSnapshotChange).toHaveBeenCalledWith({
+      columnId: "name",
+      value: { type: "text", operator: "contains" },
+    });
+  });
+
+  it("clears the snapshot when the popover closes", () => {
+    const onSnapshotChange = vi.fn();
+    const snapshot: Snapshot = {
+      columnId: "age",
+      value: Filter.number({ operator: ">", value: 5 }),
+    };
+    renderWithProviders(
+      <AddFilterButton
+        table={mockTable()}
+        snapshot={snapshot}
+        onSnapshotChange={onSnapshotChange}
+      />,
+    );
+    // Pressing Escape closes the popover via radix.
+    fireEvent.keyDown(document.body, { key: "Escape" });
+    expect(onSnapshotChange).toHaveBeenCalledWith(null);
+  });
+
+  it("renders the editor when a snapshot is provided", () => {
+    renderWithProviders(
+      <AddFilterButton
+        table={mockTable()}
+        snapshot={{
+          columnId: "age",
+          value: Filter.number({ operator: ">", value: 7 }),
+        }}
+        onSnapshotChange={vi.fn()}
+      />,
+    );
+    expect(screen.getByLabelText("Apply filter")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("7")).toBeInTheDocument();
+  });
+});
+
+describe("FilterPills — pill edit", () => {
+  it("opens the editor with the pill's snapshot when clicked", () => {
+    const filters: ColumnFiltersState = [
+      {
+        id: "age",
+        value: Filter.number({ operator: ">", value: 42 }),
+      },
+    ];
+    renderWithProviders(
+      <FilterPills
+        filters={filters}
+        table={mockTable()}
+        addFilterSnapshot={null}
+        onAddFilterSnapshotChange={vi.fn()}
+      />,
+    );
+    fireEvent.click(screen.getByLabelText("Edit filter on age"));
+    expect(screen.getByLabelText("Apply filter")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("42")).toBeInTheDocument();
+  });
+
+  it("splices in place via editIndex when applying an edit", () => {
+    const { table, setColumnFilters } = buildFilterTestTable(DEFAULT_COLUMNS);
+    const filters: ColumnFiltersState = [
+      {
+        id: "name",
+        value: Filter.text({ operator: "contains", text: "foo" }),
+      },
+      {
+        id: "age",
+        value: Filter.number({ operator: ">", value: 1 }),
+      },
+    ];
+    renderWithProviders(
+      <FilterPills
+        filters={filters}
+        table={table}
+        addFilterSnapshot={null}
+        onAddFilterSnapshotChange={vi.fn()}
+      />,
+    );
+    fireEvent.click(screen.getByLabelText("Edit filter on age"));
+    fireEvent.click(screen.getByLabelText("Apply filter"));
+
+    const updater = setColumnFilters.mock.calls[0][0];
+    const next = updater(filters);
+    expect(next).toHaveLength(2);
+    expect(next[0].id).toBe("name");
+    expect(next[1]).toEqual({
+      id: "age",
+      value: { type: "number", operator: ">", value: 1 },
+    });
+  });
+});
+
+describe("FilterPills — column-header trigger integration", () => {
+  it("opens the editor under the + button with a column-header-supplied snapshot", () => {
+    // Simulates what DataTable does when column-header calls
+    // requestAddFilter({ columnId: "name" }): it computes a snapshot via
+    // buildEditorSnapshot and passes it down as addFilterSnapshot.
+    const table = mockTable();
+    const snapshot = buildEditorSnapshot(table.getColumn("name")!);
+    renderWithProviders(
+      <FilterPills
+        filters={[]}
+        table={table}
+        addFilterSnapshot={snapshot}
+        onAddFilterSnapshotChange={vi.fn()}
+      />,
+    );
+    expect(screen.getByLabelText("Apply filter")).toBeInTheDocument();
+    // Default text operator is "contains" — the text input renders.
+    expect(screen.getByPlaceholderText("Text…")).toBeInTheDocument();
+  });
+
+  it("pre-selects 'in' operator when column-header 'Filter by values' is used", () => {
+    const table = mockTable();
+    const snapshot = buildEditorSnapshot(table.getColumn("name")!, {
+      operator: "in",
+    });
+    renderWithProviders(
+      <FilterPills
+        filters={[]}
+        table={table}
+        addFilterSnapshot={snapshot}
+        onAddFilterSnapshotChange={vi.fn()}
+      />,
+    );
+    expect(snapshot.value).toEqual({
+      type: "text",
+      operator: "in",
+      values: [],
+    });
+    expect(screen.getByLabelText("Apply filter")).toBeInTheDocument();
+  });
+});
+
+describe("FilterPills — overflow", () => {
+  it("does not render the 'See all' button when there is no overflow", () => {
+    const filters: ColumnFiltersState = [
+      { id: "age", value: Filter.number({ operator: ">", value: 5 }) },
+    ];
+    renderWithProviders(
+      <FilterPills
+        filters={filters}
+        table={mockTable()}
+        addFilterSnapshot={null}
+        onAddFilterSnapshotChange={vi.fn()}
+      />,
+    );
+    expect(screen.queryByLabelText("See all filters")).toBeNull();
+  });
+});
+
+describe("FilterPill — value truncation", () => {
+  it("renders the value with truncation classes inside a tooltip trigger", () => {
+    const filters: ColumnFiltersState = [
+      {
+        id: "name",
+        value: Filter.text({ operator: "contains", text: "x".repeat(100) }),
+      },
+    ];
+    renderWithProviders(
+      <FilterPills
+        filters={filters}
+        table={mockTable()}
+        addFilterSnapshot={null}
+        onAddFilterSnapshotChange={vi.fn()}
+      />,
+    );
+    const valueSpan = screen.getByText(/^"x{100}"$/);
+    expect(valueSpan.className).toMatch(/overflow-hidden/);
+    expect(valueSpan.className).toMatch(/text-ellipsis/);
+  });
+});

package/src/components/data-table/__tests__/filter-test-utils.ts

@@ -0,0 +1,47 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  type Table,
+  useReactTable,
+} from "@tanstack/react-table";
+import { renderHook } from "@testing-library/react";
+import { vi } from "vitest";
+import type { FilterType } from "../filters";
+
+export interface FilterColumnSpec {
+  id: string;
+  filterType?: FilterType;
+  dtype?: string;
+}
+
+export interface FilterTestHarness {
+  table: Table<unknown>;
+  setColumnFilters: ReturnType<typeof vi.fn>;
+}
+
+export function buildFilterTestTable(
+  specs: FilterColumnSpec[],
+): FilterTestHarness {
+  const setColumnFilters = vi.fn();
+  const columns: Array<ColumnDef<unknown>> = specs.map((spec) => ({
+    id: spec.id,
+    accessorFn: () => undefined,
+    header: spec.id,
+    meta: {
+      ...(spec.filterType !== undefined ? { filterType: spec.filterType } : {}),
+      ...(spec.dtype !== undefined ? { dtype: spec.dtype } : {}),
+    },
+  }));
+  const { result } = renderHook(() =>
+    useReactTable<unknown>({
+      data: [],
+      columns,
+      locale: "en-US",
+      getCoreRowModel: getCoreRowModel(),
+      onColumnFiltersChange: setColumnFilters,
+    }),
+  );
+  return { table: result.current, setColumnFilters };
+}

package/src/components/data-table/__tests__/filters.test.ts

@@ -172,7 +172,7 @@ describe("filterToFilterCondition", () => {
   it("handles boolean true filter", () => {
     const result = filterToFilterCondition(
       "active",
-      Filter.boolean({ value: true }),
+      Filter.boolean({ operator: "is_true" }),
     );
     expect(result).toEqual([
       {
@@ -187,7 +187,7 @@ describe("filterToFilterCondition", () => {
   it("handles boolean false filter", () => {
     const result = filterToFilterCondition(
       "active",
-      Filter.boolean({ value: false }),
+      Filter.boolean({ operator: "is_false" }),
     );
     expect(result).toEqual([
       {
@@ -199,16 +199,16 @@ describe("filterToFilterCondition", () => {
     ]);
   });
 
-  it("handles select in filter", () => {
+  it("handles number in filter", () => {
     const result = filterToFilterCondition(
       "status",
-      Filter.select({ options: ["a", "b"], operator: "in" }),
+      Filter.number({ operator: "in", values: [1, 2] }),
     );
     expect(result).toEqual([
       {
         column_id: "status",
         operator: "in",
-        value: ["a", "b"],
+        value: [1, 2],
         type: "condition",
         negate: false,
       },

package/src/components/data-table/__tests__/header-items.test.tsx

@@ -1,7 +1,14 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { SortingState } from "@tanstack/react-table";
+import type { Column, SortingState } from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { HideColumn } from "../header-items";
 
 describe("multi-column sorting logic", () => {
   // Extract the core sorting logic to test in isolation
@@ -146,3 +153,42 @@ describe("multi-column sorting logic", () => {
     // After removal, dept should move from priority 3 to priority 2
   });
 });
+
+describe("HideColumn", () => {
+  const makeColumn = ({
+    canHide = true,
+    toggleVisibility = vi.fn(),
+  }: {
+    canHide?: boolean;
+    toggleVisibility?: (value?: boolean) => void;
+  } = {}) =>
+    ({
+      getCanHide: () => canHide,
+      toggleVisibility,
+    }) as unknown as Column<unknown, unknown>;
+
+  const renderInMenu = (node: React.ReactNode) =>
+    render(
+      <DropdownMenu open={true}>
+        <DropdownMenuTrigger />
+        <DropdownMenuContent>{node}</DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+  it("renders 'Hide column' when canHide is true", () => {
+    renderInMenu(<HideColumn column={makeColumn()} />);
+    expect(screen.getByText("Hide column")).toBeInTheDocument();
+  });
+
+  it("returns null when getCanHide is false", () => {
+    renderInMenu(<HideColumn column={makeColumn({ canHide: false })} />);
+    expect(screen.queryByText("Hide column")).toBeNull();
+  });
+
+  it("calls toggleVisibility(false) on click", () => {
+    const toggleVisibility = vi.fn();
+    renderInMenu(<HideColumn column={makeColumn({ toggleVisibility })} />);
+    fireEvent.click(screen.getByText("Hide column"));
+    expect(toggleVisibility).toHaveBeenCalledWith(false);
+  });
+});

package/src/components/data-table/__tests__/useColumnVisibility.test.ts

@@ -0,0 +1,42 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useColumnVisibility } from "../hooks/use-column-visibility";
+
+describe("useColumnVisibility", () => {
+  it("should initialize with correct default values", () => {
+    const { result } = renderHook(() => useColumnVisibility());
+    expect(result.current.columnVisibility).toEqual({});
+  });
+
+  it("should seed hidden columns as { name: false }", () => {
+    const { result } = renderHook(() => useColumnVisibility(["a", "b"]));
+    expect(result.current.columnVisibility).toEqual({ a: false, b: false });
+  });
+
+  it("should treat empty hidden list as a no-op", () => {
+    const { result } = renderHook(() => useColumnVisibility([]));
+    expect(result.current.columnVisibility).toEqual({});
+  });
+
+  it("should update visibility state via setter", () => {
+    const { result } = renderHook(() => useColumnVisibility(["a"]));
+
+    act(() => {
+      result.current.setColumnVisibility({ a: true, b: false });
+    });
+
+    expect(result.current.columnVisibility).toEqual({ a: true, b: false });
+  });
+
+  it("should handle functional updates", () => {
+    const { result } = renderHook(() => useColumnVisibility(["a"]));
+
+    act(() => {
+      result.current.setColumnVisibility((prev) => ({ ...prev, c: false }));
+    });
+
+    expect(result.current.columnVisibility).toEqual({ a: false, c: false });
+  });
+});