@marimo-team/islands 0.23.7-dev47 → 0.23.7-dev48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.7-dev47",
+  "version": "0.23.7-dev48",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -49,7 +49,9 @@ describe("seedFromFilter", () => {
       values: [],
       operator: "in",
     });
-    expect(seedFromFilter(Filter.number({ min: 0, max: 10 }))).toEqual({
+    expect(
+      seedFromFilter(Filter.number({ operator: "between", min: 0, max: 10 })),
+    ).toEqual({
       values: [],
       operator: "in",
     });

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

@@ -0,0 +1,203 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Column } from "@tanstack/react-table";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { NumberFilterMenu, TextFilterMenu } from "../column-header";
+import { Filter } from "../filters";
+
+beforeAll(() => {
+  global.HTMLElement.prototype.scrollIntoView = () => {
+    // jsdom does not implement scrollIntoView; Radix calls it on open.
+  };
+  // 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
+    };
+  }
+});
+
+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>;
+  };
+}
+
+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 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",
+    ]);
+  });
+
+  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("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" },
+    });
+    expect(screen.getByRole("button", { name: /apply/i })).not.toBeDisabled();
+  });
+});

package/src/components/data-table/__tests__/filter-by-values-picker.test.tsx

@@ -0,0 +1,112 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Column } from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { FilterByValuesList } from "../filter-by-values-picker";
+
+beforeAll(() => {
+  global.HTMLElement.prototype.scrollIntoView = () => {
+    // jsdom does not implement scrollIntoView; cmdk calls it on selection.
+  };
+});
+
+function mockColumn(): Column<unknown, unknown> {
+  return {
+    id: "name",
+    columnDef: { meta: { dataType: "string" } },
+  } as unknown as Column<unknown, unknown>;
+}
+
+async function calculateTopK() {
+  return {
+    data: [
+      ["alice", 3],
+      ["bob", 1],
+    ] as Array<[string, number]>,
+  };
+}
+
+describe("FilterByValuesList — creatable", () => {
+  it("shows '+ Add \"X\"' item when creatable and query is non-empty", async () => {
+    const onChange = vi.fn();
+    render(
+      <FilterByValuesList
+        column={mockColumn()}
+        calculateTopKRows={calculateTopK}
+        chosenValues={new Set()}
+        onChange={onChange}
+        creatable={true}
+      />,
+    );
+    await screen.findByText("alice");
+    const input = screen.getByPlaceholderText(/Search or add/i);
+    fireEvent.change(input, { target: { value: "carol" } });
+    expect(await screen.findByText(/\+ Add "carol"/)).toBeInTheDocument();
+  });
+
+  it("commits the literal when '+ Add' is selected", async () => {
+    const onChange = vi.fn();
+    render(
+      <FilterByValuesList
+        column={mockColumn()}
+        calculateTopKRows={calculateTopK}
+        chosenValues={new Set()}
+        onChange={onChange}
+        creatable={true}
+      />,
+    );
+    await screen.findByText("alice");
+    const input = screen.getByPlaceholderText(/Search or add/i);
+    fireEvent.change(input, { target: { value: "carol" } });
+    fireEvent.click(await screen.findByText(/\+ Add "carol"/));
+    expect(onChange).toHaveBeenCalledWith(["carol"]);
+  });
+
+  it("Enter key in creatable mode commits the query as a value", async () => {
+    const onChange = vi.fn();
+    render(
+      <FilterByValuesList
+        column={mockColumn()}
+        calculateTopKRows={calculateTopK}
+        chosenValues={new Set()}
+        onChange={onChange}
+        creatable={true}
+      />,
+    );
+    await screen.findByText("alice");
+    const input = screen.getByPlaceholderText(/Search or add/i);
+    fireEvent.change(input, { target: { value: "dave" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(onChange).toHaveBeenCalledWith(["dave"]);
+  });
+
+  it("does NOT show '+ Add' when creatable is false", async () => {
+    render(
+      <FilterByValuesList
+        column={mockColumn()}
+        calculateTopKRows={calculateTopK}
+        chosenValues={new Set()}
+        onChange={vi.fn()}
+        creatable={false}
+      />,
+    );
+    await screen.findByText("alice");
+    const input = screen.getByPlaceholderText(/Search among/i);
+    fireEvent.change(input, { target: { value: "carol" } });
+    expect(screen.queryByText(/\+ Add/)).not.toBeInTheDocument();
+  });
+
+  it("renders chosen values that are not in top-K with — count", async () => {
+    render(
+      <FilterByValuesList
+        column={mockColumn()}
+        calculateTopKRows={calculateTopK}
+        chosenValues={new Set(["zara"])}
+        onChange={vi.fn()}
+      />,
+    );
+    await screen.findByText("alice");
+    expect(screen.getByText("zara")).toBeInTheDocument();
+    expect(screen.getByText("—")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,175 @@
+/* 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",
+): 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")];
+  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 — 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 },
+      },
+    ]);
+  });
+});