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

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

@@ -1,308 +1,141 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { Column } from "@tanstack/react-table";
-import { fireEvent, render, screen, within } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { beforeAll, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { DataTableColumnHeader } from "../column-header";
 import {
-  DateFilterMenu,
-  NumberFilterMenu,
-  TextFilterMenu,
-} from "../column-header";
-import { Filter } from "../filters";
+  type AddFilterRequest,
+  FilterEditorProvider,
+} from "../filter-editor-context";
+import { buildFilterTestTable } from "./filter-test-utils";
 
 beforeAll(() => {
   global.HTMLElement.prototype.scrollIntoView = () => {
-    // jsdom does not implement scrollIntoView; Radix calls it on open.
+    // jsdom does not implement scrollIntoView
   };
-  // Radix Select gates pointer interactions on hasPointerCapture; jsdom omits it.
   if (!global.HTMLElement.prototype.hasPointerCapture) {
     global.HTMLElement.prototype.hasPointerCapture = () => false;
   }
   if (!global.HTMLElement.prototype.releasePointerCapture) {
     global.HTMLElement.prototype.releasePointerCapture = () => {
-      // no-op
+      // noop for jsdom
     };
   }
 });
 
-function mockColumn(initial?: ReturnType<typeof Filter.number>): Column<
-  unknown,
-  unknown
-> & {
-  setFilterValue: ReturnType<typeof vi.fn>;
-} {
-  let filterValue = initial;
-  const setFilterValue = vi.fn((next) => {
-    filterValue = next;
-  });
-  return {
-    id: "age",
-    columnDef: { meta: { dataType: "number", filterType: "number" } },
-    getFilterValue: () => filterValue,
-    setFilterValue,
-  } as unknown as Column<unknown, unknown> & {
-    setFilterValue: ReturnType<typeof vi.fn>;
-  };
+function renderHeader(opts: {
+  column: Column<unknown, unknown>;
+  requestAddFilter?: (req: AddFilterRequest) => void;
+  withProvider: boolean;
+}) {
+  const { column, requestAddFilter, withProvider } = opts;
+  const headerNode = (
+    <DataTableColumnHeader column={column} header={column.id} />
+  );
+  return render(
+    <TooltipProvider>
+      {withProvider ? (
+        <FilterEditorProvider
+          value={{ requestAddFilter: requestAddFilter ?? vi.fn() }}
+        >
+          {headerNode}
+        </FilterEditorProvider>
+      ) : (
+        headerNode
+      )}
+    </TooltipProvider>,
+  );
 }
 
-describe("NumberFilterMenu", () => {
-  it("shows all expected operators in the dropdown", () => {
-    const column = mockColumn();
-    render(<NumberFilterMenu column={column} />);
-    const trigger = screen.getByRole("combobox");
-    fireEvent.click(trigger);
-    const listbox = screen.getByRole("listbox");
-    const labels = within(listbox)
-      .getAllByRole("option")
-      .map((o) => o.textContent);
-    expect(labels).toEqual([
-      "Between",
-      "Equals",
-      "Doesn't equal",
-      "Greater than",
-      "Greater than or equal",
-      "Less than",
-      "Less than or equal",
-      "Is null",
-      "Is not null",
-    ]);
-  });
-
-  it("between mode disables Apply until both min and max are defined", () => {
-    const column = mockColumn();
-    render(<NumberFilterMenu column={column} />);
-    const apply = screen.getByRole("button", { name: /apply/i });
-    expect(apply).toBeDisabled();
-
-    const min = screen.getByLabelText("min");
-    fireEvent.change(min, { target: { value: "1" } });
-    fireEvent.blur(min);
-    expect(apply).toBeDisabled();
+const openMenu = () => {
+  const trigger = screen.getByLabelText("Column options");
+  trigger.focus();
+  fireEvent.keyDown(trigger, { key: "Enter" });
+};
 
-    const max = screen.getByLabelText("max");
-    fireEvent.change(max, { target: { value: "10" } });
-    fireEvent.blur(max);
-    expect(apply).not.toBeDisabled();
-  });
-
-  it("comparison mode shows a single value field seeded from current filter", () => {
-    const column = mockColumn(Filter.number({ operator: ">", value: 18 }));
-    render(<NumberFilterMenu column={column} />);
-    const value = screen.getByLabelText("value") as HTMLInputElement;
-    expect(value).toBeInTheDocument();
-    expect(value.value).toBe("18");
-    expect(screen.queryByLabelText("min")).not.toBeInTheDocument();
-    expect(screen.queryByLabelText("max")).not.toBeInTheDocument();
-  });
-
-  it("selecting a nullish operator hides value inputs and commits on Apply", () => {
-    const column = mockColumn();
-    render(<NumberFilterMenu column={column} />);
-    fireEvent.click(screen.getByRole("combobox"));
-    const listbox = screen.getByRole("listbox");
-    fireEvent.click(within(listbox).getByText("Is null"));
-    expect(column.setFilterValue).not.toHaveBeenCalled();
-    expect(screen.queryByLabelText("min")).not.toBeInTheDocument();
-    expect(screen.queryByLabelText("max")).not.toBeInTheDocument();
-    expect(screen.queryByLabelText("value")).not.toBeInTheDocument();
-    fireEvent.click(screen.getByRole("button", { name: /apply/i }));
-    expect(column.setFilterValue).toHaveBeenCalledWith(
-      Filter.number({ operator: "is_null" }),
-    );
-  });
-});
-
-function mockTextColumn(initial?: ReturnType<typeof Filter.text>): Column<
-  unknown,
-  unknown
-> & {
-  setFilterValue: ReturnType<typeof vi.fn>;
-} {
-  let filterValue = initial;
-  const setFilterValue = vi.fn((next) => {
-    filterValue = next;
-  });
-  return {
-    id: "name",
-    columnDef: { meta: { dataType: "string", filterType: "text" } },
-    getFilterValue: () => filterValue,
-    setFilterValue,
-  } as unknown as Column<unknown, unknown> & {
-    setFilterValue: ReturnType<typeof vi.fn>;
-  };
-}
-
-describe("TextFilterMenu", () => {
-  it("shows all 11 text operators in the dropdown", () => {
-    const column = mockTextColumn();
-    render(<TextFilterMenu column={column} />);
-    fireEvent.click(screen.getByRole("combobox"));
-    const listbox = screen.getByRole("listbox");
-    const labels = within(listbox)
-      .getAllByRole("option")
-      .map((o) => o.textContent);
-    expect(labels).toEqual([
-      "Contains",
-      "Equals",
-      "Doesn't equal",
-      "Matches regex",
-      "Starts with",
-      "Ends with",
-      "Is in",
-      "Not in",
-      "Is empty",
-      "Is null",
-      "Is not null",
+describe("DataTableColumnHeader — filter menu", () => {
+  it("renders Filter and Filter-by-values items for text columns inside a provider", () => {
+    const { table } = buildFilterTestTable([
+      { id: "name", filterType: "text" },
     ]);
+    renderHeader({ column: table.getColumn("name")!, withProvider: true });
+    openMenu();
+    expect(screen.getByText("Filter")).toBeInTheDocument();
+    expect(screen.getByText("Filter by values")).toBeInTheDocument();
   });
 
-  it("single-string operator renders a text input seeded from current filter", () => {
-    const column = mockTextColumn(
-      Filter.text({ operator: "equals", text: "alice" }),
-    );
-    render(<TextFilterMenu column={column} />);
-    const input = screen.getByPlaceholderText("Text...") as HTMLInputElement;
-    expect(input).toBeInTheDocument();
-    expect(input.value).toBe("alice");
-  });
-
-  it("'in' operator renders the creatable values picker", async () => {
-    const column = mockTextColumn(
-      Filter.text({ operator: "in", values: ["a", "b"] }),
-    );
-    const calculateTopKRows = vi.fn(async () => ({
-      data: [["a", 1] as [unknown, number]],
-    }));
-    render(
-      <TextFilterMenu column={column} calculateTopKRows={calculateTopKRows} />,
-    );
-    expect(
-      await screen.findByPlaceholderText(/Search or add a value/i),
-    ).toBeInTheDocument();
-    expect(screen.queryByPlaceholderText("Text...")).not.toBeInTheDocument();
-  });
-
-  it("selecting is_empty hides the value UI and commits on Apply", () => {
-    const column = mockTextColumn();
-    render(<TextFilterMenu column={column} />);
-    fireEvent.click(screen.getByRole("combobox"));
-    const listbox = screen.getByRole("listbox");
-    fireEvent.click(within(listbox).getByText("Is empty"));
-    expect(column.setFilterValue).not.toHaveBeenCalled();
-    expect(screen.queryByPlaceholderText("Text...")).not.toBeInTheDocument();
-    fireEvent.click(screen.getByRole("button", { name: /apply/i }));
-    expect(column.setFilterValue).toHaveBeenCalledWith(
-      Filter.text({ operator: "is_empty" }),
-    );
+  it("renders Filter and Filter-by-values items for number columns", () => {
+    const { table } = buildFilterTestTable([
+      { id: "age", filterType: "number" },
+    ]);
+    renderHeader({ column: table.getColumn("age")!, withProvider: true });
+    openMenu();
+    expect(screen.getByText("Filter")).toBeInTheDocument();
+    expect(screen.getByText("Filter by values")).toBeInTheDocument();
+  });
+
+  it.each(["date", "datetime", "time", "boolean"] as const)(
+    "hides Filter-by-values for %s columns",
+    (filterType) => {
+      const { table } = buildFilterTestTable([{ id: "col", filterType }]);
+      renderHeader({ column: table.getColumn("col")!, withProvider: true });
+      openMenu();
+      expect(screen.getByText("Filter")).toBeInTheDocument();
+      expect(screen.queryByText("Filter by values")).not.toBeInTheDocument();
+    },
+  );
+
+  it("hides both items when filterType is missing", () => {
+    const { table } = buildFilterTestTable([{ id: "opaque" }]);
+    renderHeader({ column: table.getColumn("opaque")!, withProvider: true });
+    openMenu();
+    expect(screen.queryByText("Filter")).not.toBeInTheDocument();
+    expect(screen.queryByText("Filter by values")).not.toBeInTheDocument();
+  });
+
+  it("hides both items when no FilterEditorProvider is present", () => {
+    const { table } = buildFilterTestTable([
+      { id: "name", filterType: "text" },
+    ]);
+    renderHeader({ column: table.getColumn("name")!, withProvider: false });
+    openMenu();
+    expect(screen.queryByText("Filter")).not.toBeInTheDocument();
+    expect(screen.queryByText("Filter by values")).not.toBeInTheDocument();
   });
 
-  it("apply is disabled when scalar text is empty", () => {
-    const column = mockTextColumn();
-    render(<TextFilterMenu column={column} />);
-    expect(screen.getByRole("button", { name: /apply/i })).toBeDisabled();
-    fireEvent.change(screen.getByPlaceholderText("Text..."), {
-      target: { value: "x" },
+  it("invokes requestAddFilter with columnId when Filter is clicked", () => {
+    const requestAddFilter = vi.fn();
+    const { table } = buildFilterTestTable([
+      { id: "name", filterType: "text" },
+    ]);
+    renderHeader({
+      column: table.getColumn("name")!,
+      requestAddFilter,
+      withProvider: true,
     });
-    expect(screen.getByRole("button", { name: /apply/i })).not.toBeDisabled();
+    openMenu();
+    fireEvent.click(screen.getByText("Filter"));
+    expect(requestAddFilter).toHaveBeenCalledTimes(1);
+    expect(requestAddFilter).toHaveBeenCalledWith({ columnId: "name" });
   });
-});
-
-type DateFilterValue = ReturnType<typeof Filter.date>;
 
-function mockDateColumn(
-  filterType: "date" | "datetime" | "time" = "date",
-  initial?: DateFilterValue,
-): Column<unknown, unknown> & {
-  setFilterValue: ReturnType<typeof vi.fn>;
-} {
-  let filterValue = initial;
-  const setFilterValue = vi.fn((next) => {
-    filterValue = next;
-  });
-  return {
-    id: "when",
-    columnDef: { meta: { dataType: filterType, filterType } },
-    getFilterValue: () => filterValue,
-    setFilterValue,
-  } as unknown as Column<unknown, unknown> & {
-    setFilterValue: ReturnType<typeof vi.fn>;
-  };
-}
-
-describe("DateFilterMenu", () => {
-  it("shows all expected operators in the dropdown", () => {
-    const column = mockDateColumn("date");
-    render(<DateFilterMenu column={column} filterType="date" />);
-    fireEvent.click(screen.getByRole("combobox"));
-    const listbox = screen.getByRole("listbox");
-    const labels = within(listbox)
-      .getAllByRole("option")
-      .map((o) => o.textContent);
-    expect(labels).toEqual([
-      "Between",
-      "Equals",
-      "Doesn't equal",
-      "Greater than",
-      "Greater than or equal",
-      "Less than",
-      "Less than or equal",
-      "Is null",
-      "Is not null",
+  it("invokes requestAddFilter with operator='in' when Filter by values is clicked", () => {
+    const requestAddFilter = vi.fn();
+    const { table } = buildFilterTestTable([
+      { id: "name", filterType: "text" },
     ]);
-  });
-
-  it("defaults to between mode and disables Apply until both bounds set", () => {
-    const column = mockDateColumn("date");
-    render(<DateFilterMenu column={column} filterType="date" />);
-    expect(screen.getByLabelText("range")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: /apply/i })).toBeDisabled();
-    expect(screen.queryByLabelText("value")).not.toBeInTheDocument();
-  });
-
-  it("seeds between min/max from current filter", () => {
-    const column = mockDateColumn(
-      "date",
-      Filter.date({
-        operator: "between",
-        min: new Date("2024-01-01T00:00:00Z"),
-        max: new Date("2024-06-01T00:00:00Z"),
-      }),
-    );
-    render(<DateFilterMenu column={column} filterType="date" />);
-    expect(screen.getByLabelText("range")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: /apply/i })).not.toBeDisabled();
-  });
-
-  it("comparison operator swaps range for a single value picker", () => {
-    const column = mockDateColumn(
-      "date",
-      Filter.date({
-        operator: ">",
-        value: new Date("2024-01-01T00:00:00Z"),
-      }),
-    );
-    render(<DateFilterMenu column={column} filterType="date" />);
-    expect(screen.getByLabelText("value")).toBeInTheDocument();
-    expect(screen.queryByLabelText("range")).not.toBeInTheDocument();
-  });
-
-  it("time filter type renders two TimeFields for between", () => {
-    const column = mockDateColumn("time");
-    render(<DateFilterMenu column={column} filterType="time" />);
-    expect(screen.getByLabelText("min")).toBeInTheDocument();
-    expect(screen.getByLabelText("max")).toBeInTheDocument();
-  });
-
-  it("selecting a nullish operator hides value inputs and commits on Apply", () => {
-    const column = mockDateColumn("date");
-    render(<DateFilterMenu column={column} filterType="date" />);
-    fireEvent.click(screen.getByRole("combobox"));
-    const listbox = screen.getByRole("listbox");
-    fireEvent.click(within(listbox).getByText("Is null"));
-    expect(screen.queryByLabelText("range")).not.toBeInTheDocument();
-    expect(screen.queryByLabelText("value")).not.toBeInTheDocument();
-    fireEvent.click(screen.getByRole("button", { name: /apply/i }));
-    expect(column.setFilterValue).toHaveBeenCalledWith(
-      Filter.date({ operator: "is_null" }),
-    );
+    renderHeader({
+      column: table.getColumn("name")!,
+      requestAddFilter,
+      withProvider: true,
+    });
+    openMenu();
+    fireEvent.click(screen.getByText("Filter by values"));
+    expect(requestAddFilter).toHaveBeenCalledTimes(1);
+    expect(requestAddFilter).toHaveBeenCalledWith({
+      columnId: "name",
+      operator: "in",
+    });
   });
 });

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

@@ -0,0 +1,33 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import { dateToLocalISODate } from "@/utils/dates";
+import { parsePastedRange } from "../date-filter-inputs";
+
+describe("parsePastedRange", () => {
+  it.each([
+    ["hyphen", "2026-02-01 - 2026-04-01"],
+    ["en dash", "2026-02-01 – 2026-04-01"],
+    ["em dash", "2026-02-01 — 2026-04-01"],
+    ["to", "2026-02-01 to 2026-04-01"],
+    ["TO (uppercase)", "2026-02-01 TO 2026-04-01"],
+    ["and", "2026-02-01 and 2026-04-01"],
+    ["AND (uppercase)", "2026-02-01 AND 2026-04-01"],
+  ])("splits a date range pasted with %s separator", (_, text) => {
+    const result = parsePastedRange("date", text);
+    expect(result).toBeDefined();
+    expect(result && dateToLocalISODate(result.min)).toBe("2026-02-01");
+    expect(result && dateToLocalISODate(result.max)).toBe("2026-04-01");
+  });
+
+  it("returns a degenerate range for a single pasted date", () => {
+    const result = parsePastedRange("date", "2026-03-15");
+    expect(result).toBeDefined();
+    expect(result && dateToLocalISODate(result.min)).toBe("2026-03-15");
+    expect(result && dateToLocalISODate(result.max)).toBe("2026-03-15");
+  });
+
+  it("returns undefined for unparsable input", () => {
+    expect(parsePastedRange("date", "Sunday and Monday")).toBeUndefined();
+    expect(parsePastedRange("date", "not a date")).toBeUndefined();
+  });
+});

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: [] },
+    });
+  });
+});