@marimo-team/frontend 0.23.7-dev6 → 0.23.7-dev61

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

@@ -0,0 +1,261 @@
+/* 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";
+
+const renderWithProviders = (ui: React.ReactElement) =>
+  render(<TooltipProvider>{ui}</TooltipProvider>);
+
+beforeAll(() => {
+  global.HTMLElement.prototype.scrollIntoView = () => {
+    // jsdom does not implement scrollIntoView; cmdk calls it on selection.
+  };
+  // jsdom lacks hasPointerCapture used by radix Select
+  if (!global.HTMLElement.prototype.hasPointerCapture) {
+    global.HTMLElement.prototype.hasPointerCapture = () => false;
+  }
+  if (!global.HTMLElement.prototype.scrollTo) {
+    global.HTMLElement.prototype.scrollTo = () => {
+      // noop for jsdom
+    };
+  }
+});
+
+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>;
+}
+
+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>;
+}
+
+async function calculateTopK() {
+  return {
+    data: [
+      ["alice", 3],
+      ["bob", 1],
+    ] as Array<[string, number]>,
+  };
+}
+
+describe("FilterPillEditor — snapshot rehydration", () => {
+  it("rehydrates a number > snapshot with seeded value", () => {
+    renderWithProviders(
+      <FilterPillEditor
+        snapshot={{
+          columnId: "age",
+          value: Filter.number({ operator: ">", value: 18 }),
+        }}
+        table={mockTable()}
+        onClose={vi.fn()}
+      />,
+    );
+    expect(screen.getByDisplayValue("18")).toBeInTheDocument();
+    expect(screen.getByLabelText("value")).toBeInTheDocument();
+    // No min/max range fields rendered for comparison operator.
+    expect(screen.queryByLabelText("min")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("max")).not.toBeInTheDocument();
+  });
+
+  it("rehydrates a number between snapshot with seeded min/max", () => {
+    renderWithProviders(
+      <FilterPillEditor
+        snapshot={{
+          columnId: "age",
+          value: Filter.number({ operator: "between", min: 1, max: 9 }),
+        }}
+        table={mockTable()}
+        onClose={vi.fn()}
+      />,
+    );
+    expect(screen.getByDisplayValue("1")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("9")).toBeInTheDocument();
+  });
+
+  it("rehydrates a text in snapshot seeding the creatable picker", async () => {
+    renderWithProviders(
+      <FilterPillEditor
+        snapshot={{
+          columnId: "name",
+          value: Filter.text({ operator: "in", values: ["a", "b"] }),
+        }}
+        table={mockTable()}
+        calculateTopKRows={calculateTopK}
+        onClose={vi.fn()}
+      />,
+    );
+    expect(await screen.findByText("[a, b]")).toBeInTheDocument();
+  });
+
+  it("rehydrates a text contains snapshot with seeded text", () => {
+    renderWithProviders(
+      <FilterPillEditor
+        snapshot={{
+          columnId: "name",
+          value: Filter.text({ operator: "contains", text: "hello" }),
+        }}
+        table={mockTable()}
+        onClose={vi.fn()}
+      />,
+    );
+    expect(screen.getByDisplayValue("hello")).toBeInTheDocument();
+  });
+
+  it("hides the value slot for is_null/is_not_null/is_empty", () => {
+    const { rerender } = renderWithProviders(
+      <FilterPillEditor
+        snapshot={{
+          columnId: "name",
+          value: Filter.text({ operator: "is_null" }),
+        }}
+        table={mockTable()}
+        onClose={vi.fn()}
+      />,
+    );
+    expect(screen.queryByText("Value")).not.toBeInTheDocument();
+
+    rerender(
+      <TooltipProvider>
+        <FilterPillEditor
+          snapshot={{
+            columnId: "name",
+            value: Filter.text({ operator: "is_empty" }),
+          }}
+          table={mockTable()}
+          onClose={vi.fn()}
+        />
+      </TooltipProvider>,
+    );
+    expect(screen.queryByText("Value")).not.toBeInTheDocument();
+  });
+});
+
+describe("FilterPillEditor — date/datetime/time", () => {
+  it("rehydrates a date between snapshot with the range picker", () => {
+    renderWithProviders(
+      <FilterPillEditor
+        snapshot={{
+          columnId: "when",
+          value: Filter.date({
+            operator: "between",
+            min: new Date("2024-01-01T00:00:00Z"),
+            max: new Date("2024-06-01T00:00:00Z"),
+          }),
+        }}
+        table={mockTable()}
+        onClose={vi.fn()}
+      />,
+    );
+    expect(screen.getByLabelText("range")).toBeInTheDocument();
+    expect(screen.queryByLabelText("value")).not.toBeInTheDocument();
+  });
+
+  it("rehydrates a datetime <= snapshot with a single value picker", () => {
+    renderWithProviders(
+      <FilterPillEditor
+        snapshot={{
+          columnId: "at",
+          value: Filter.datetime({
+            operator: "<=",
+            value: new Date("2024-06-01T12:00:00Z"),
+          }),
+        }}
+        table={mockTable()}
+        onClose={vi.fn()}
+      />,
+    );
+    expect(screen.getByLabelText("value")).toBeInTheDocument();
+    expect(screen.queryByLabelText("range")).not.toBeInTheDocument();
+  });
+
+  it("renders min/max TimeFields for time between", () => {
+    renderWithProviders(
+      <FilterPillEditor
+        snapshot={{
+          columnId: "clock",
+          value: Filter.time({
+            operator: "between",
+            min: new Date("2024-01-01T08:00:00Z"),
+            max: new Date("2024-01-01T17:00:00Z"),
+          }),
+        }}
+        table={mockTable()}
+        onClose={vi.fn()}
+      />,
+    );
+    expect(screen.getByLabelText("min")).toBeInTheDocument();
+    expect(screen.getByLabelText("max")).toBeInTheDocument();
+  });
+
+  it("hides the value slot for date is_null", () => {
+    renderWithProviders(
+      <FilterPillEditor
+        snapshot={{
+          columnId: "when",
+          value: Filter.date({ operator: "is_null" }),
+        }}
+        table={mockTable()}
+        onClose={vi.fn()}
+      />,
+    );
+    expect(screen.queryByText("Value")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("range")).not.toBeInTheDocument();
+  });
+});
+
+describe("FilterPillEditor — apply", () => {
+  it("commits a number > filter via setColumnFilters", () => {
+    const table = mockTable();
+    const onClose = vi.fn();
+    renderWithProviders(
+      <FilterPillEditor
+        snapshot={{
+          columnId: "age",
+          value: Filter.number({ operator: ">", value: 18 }),
+        }}
+        table={table}
+        onClose={onClose}
+      />,
+    );
+    fireEvent.click(screen.getByLabelText("Apply filter"));
+    expect(table.setColumnFilters).toHaveBeenCalledTimes(1);
+    expect(onClose).toHaveBeenCalledTimes(1);
+
+    const updater = (table.setColumnFilters as ReturnType<typeof vi.fn>).mock
+      .calls[0][0];
+    const next = updater([]);
+    expect(next).toEqual([
+      {
+        id: "age",
+        value: { type: "number", operator: ">", value: 18 },
+      },
+    ]);
+  });
+});

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

@@ -24,7 +24,6 @@ describe("filterToFilterCondition", () => {
       {
         column_id: "col",
         operator: "is_null",
-        value: undefined,
         type: "condition",
         negate: false,
       },
@@ -40,45 +39,53 @@ describe("filterToFilterCondition", () => {
       {
         column_id: "col",
         operator: "is_not_null",
-        value: undefined,
         type: "condition",
         negate: false,
       },
     ]);
   });
 
-  it("handles number filter with min only", () => {
-    const result = filterToFilterCondition("age", Filter.number({ min: 18 }));
-    expect(result).toHaveLength(1);
-    expect(result[0]).toMatchObject({
-      column_id: "age",
-      operator: ">=",
-      value: 18,
-      type: "condition",
-      negate: false,
-    });
+  it("handles number filter with == operator", () => {
+    const result = filterToFilterCondition(
+      "age",
+      Filter.number({ operator: "==", value: 42 }),
+    );
+    expect(result).toEqual([
+      {
+        column_id: "age",
+        operator: "==",
+        value: 42,
+        type: "condition",
+        negate: false,
+      },
+    ]);
   });
 
-  it("handles number filter with max only", () => {
-    const result = filterToFilterCondition("age", Filter.number({ max: 65 }));
-    expect(result).toHaveLength(1);
-    expect(result[0]).toMatchObject({
-      column_id: "age",
-      operator: "<=",
-      value: 65,
-      type: "condition",
-      negate: false,
-    });
+  it("handles number filter with all comparison operators", () => {
+    for (const op of ["==", "!=", ">", ">=", "<", "<="] as const) {
+      const result = filterToFilterCondition(
+        "x",
+        Filter.number({ operator: op, value: 5 }),
+      );
+      expect(result).toHaveLength(1);
+      expect(result[0]).toMatchObject({ operator: op, value: 5 });
+    }
   });
 
-  it("handles number filter with min and max", () => {
+  it("number / between emits a single between condition", () => {
     const result = filterToFilterCondition(
       "age",
-      Filter.number({ min: 18, max: 65 }),
+      Filter.number({ operator: "between", min: 18, max: 65 }),
     );
-    expect(result).toHaveLength(2);
-    expect(result[0]).toMatchObject({ operator: ">=", value: 18 });
-    expect(result[1]).toMatchObject({ operator: "<=", value: 65 });
+    expect(result).toEqual([
+      {
+        column_id: "age",
+        operator: "between",
+        value: { min: 18, max: 65 },
+        type: "condition",
+        negate: false,
+      },
+    ]);
   });
 
   it("handles text filter", () => {
@@ -97,6 +104,71 @@ describe("filterToFilterCondition", () => {
     ]);
   });
 
+  it("handles text filter with all single-string operators", () => {
+    for (const op of [
+      "contains",
+      "equals",
+      "does_not_equal",
+      "regex",
+      "starts_with",
+      "ends_with",
+    ] as const) {
+      const result = filterToFilterCondition(
+        "col",
+        Filter.text({ operator: op, text: "x" }),
+      );
+      expect(result).toHaveLength(1);
+      expect(result[0]).toMatchObject({ operator: op, value: "x" });
+    }
+  });
+
+  it("handles text filter with in operator", () => {
+    const result = filterToFilterCondition(
+      "name",
+      Filter.text({ operator: "in", values: ["alice", "bob"] }),
+    );
+    expect(result).toEqual([
+      {
+        column_id: "name",
+        operator: "in",
+        value: ["alice", "bob"],
+        type: "condition",
+        negate: false,
+      },
+    ]);
+  });
+
+  it("handles text filter with not_in operator", () => {
+    const result = filterToFilterCondition(
+      "name",
+      Filter.text({ operator: "not_in", values: ["alice"] }),
+    );
+    expect(result).toEqual([
+      {
+        column_id: "name",
+        operator: "not_in",
+        value: ["alice"],
+        type: "condition",
+        negate: false,
+      },
+    ]);
+  });
+
+  it("handles text filter with is_empty operator", () => {
+    const result = filterToFilterCondition(
+      "name",
+      Filter.text({ operator: "is_empty" }),
+    );
+    expect(result).toEqual([
+      {
+        column_id: "name",
+        operator: "is_empty",
+        type: "condition",
+        negate: false,
+      },
+    ]);
+  });
+
   it("handles boolean true filter", () => {
     const result = filterToFilterCondition(
       "active",
@@ -106,7 +178,6 @@ describe("filterToFilterCondition", () => {
       {
         column_id: "active",
         operator: "is_true",
-        value: undefined,
         type: "condition",
         negate: false,
       },
@@ -122,7 +193,6 @@ describe("filterToFilterCondition", () => {
       {
         column_id: "active",
         operator: "is_false",
-        value: undefined,
         type: "condition",
         negate: false,
       },
@@ -145,28 +215,99 @@ describe("filterToFilterCondition", () => {
     ]);
   });
 
-  it("handles date filter with min and max", () => {
-    const min = new Date("2024-01-01");
-    const max = new Date("2024-12-31");
+  it("handles date between filter", () => {
+    const min = new Date(2024, 0, 1);
+    const max = new Date(2024, 11, 31);
     const result = filterToFilterCondition(
       "created",
-      Filter.date({ min, max }),
+      Filter.date({ operator: "between", min, max }),
     );
-    expect(result).toHaveLength(2);
-    expect(result[0]).toMatchObject({
-      operator: ">=",
-      value: min.toISOString(),
-    });
-    expect(result[1]).toMatchObject({
-      operator: "<=",
-      value: max.toISOString(),
-    });
+    expect(result).toEqual([
+      {
+        column_id: "created",
+        operator: "between",
+        value: { min: "2024-01-01", max: "2024-12-31" },
+        type: "condition",
+        negate: false,
+      },
+    ]);
+  });
+
+  it("handles date comparison filter", () => {
+    const value = new Date(2024, 5, 15);
+    const result = filterToFilterCondition(
+      "created",
+      Filter.date({ operator: ">=", value }),
+    );
+    expect(result).toEqual([
+      {
+        column_id: "created",
+        operator: ">=",
+        value: "2024-06-15",
+        type: "condition",
+        negate: false,
+      },
+    ]);
+  });
+
+  it("handles datetime between filter as local ISO string without TZ", () => {
+    const min = new Date(2024, 0, 1, 0, 0, 0);
+    const max = new Date(2024, 11, 31, 23, 59, 59);
+    const result = filterToFilterCondition(
+      "created",
+      Filter.datetime({ operator: "between", min, max }),
+    );
+    expect(result).toEqual([
+      {
+        column_id: "created",
+        operator: "between",
+        value: {
+          min: "2024-01-01T00:00:00",
+          max: "2024-12-31T23:59:59",
+        },
+        type: "condition",
+        negate: false,
+      },
+    ]);
+  });
+
+  it("handles time between filter as HH:MM:SS", () => {
+    const min = new Date(2024, 0, 1, 9, 30, 0);
+    const max = new Date(2024, 0, 1, 17, 45, 15);
+    const result = filterToFilterCondition(
+      "start",
+      Filter.time({ operator: "between", min, max }),
+    );
+    expect(result).toEqual([
+      {
+        column_id: "start",
+        operator: "between",
+        value: { min: "09:30:00", max: "17:45:15" },
+        type: "condition",
+        negate: false,
+      },
+    ]);
+  });
+
+  it("handles date is_null filter", () => {
+    const result = filterToFilterCondition(
+      "created",
+      Filter.date({ operator: "is_null" }),
+    );
+    expect(result).toEqual([
+      {
+        column_id: "created",
+        operator: "is_null",
+        type: "condition",
+        negate: false,
+      },
+    ]);
   });
 
   it("every condition has type and negate fields", () => {
     const result = filterToFilterCondition(
       "col",
-      Filter.number({ min: 1, max: 10 }),
+      Filter.number({ operator: "between", min: 1, max: 10 }),
     );
     for (const condition of result) {
       expect(condition).toHaveProperty("type", "condition");
@@ -188,7 +329,7 @@ describe("filtersToFilterGroup", () => {
 
   it("wraps single filter in AND group", () => {
     const result = filtersToFilterGroup([
-      { id: "age", value: Filter.number({ min: 18 }) },
+      { id: "age", value: Filter.number({ operator: ">=", value: 18 }) },
     ]);
     expect(result.type).toBe("group");
     expect(result.operator).toBe("and");
@@ -198,19 +339,25 @@ describe("filtersToFilterGroup", () => {
 
   it("wraps multiple filters in AND group", () => {
     const result = filtersToFilterGroup([
-      { id: "age", value: Filter.number({ min: 18 }) },
+      { id: "age", value: Filter.number({ operator: ">=", value: 18 }) },
       { id: "name", value: Filter.text({ text: "foo", operator: "contains" }) },
     ]);
     expect(result.children).toHaveLength(2);
     expect(result.operator).toBe("and");
   });
 
-  it("flattens multi-condition filters", () => {
+  it("between filter emits a single between condition", () => {
     const result = filtersToFilterGroup([
-      { id: "age", value: Filter.number({ min: 18, max: 65 }) },
+      {
+        id: "age",
+        value: Filter.number({ operator: "between", min: 18, max: 65 }),
+      },
     ]);
-    // min + max = 2 conditions
-    expect(result.children).toHaveLength(2);
+    expect(result.children).toHaveLength(1);
+    expect(result.children[0]).toMatchObject({
+      operator: "between",
+      value: { min: 18, max: 65 },
+    });
   });
 });
 

package/src/components/data-table/charts/components/form-fields.tsx

@@ -789,6 +789,7 @@ export const TooltipSelect = ({
             <FormControl>
               <Multiselect
                 options={fields?.map((field) => field.name) ?? []}
+                disabled={false}
                 value={values}
                 setValue={(values) => {
                   const selectedValues =