@marimo-team/islands 0.23.7-dev56 → 0.23.7-dev57

package/dist/{reveal-component-DuRlSS4j.js → reveal-component-Phd-LTXq.js}

@@ -8,7 +8,7 @@ import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import "./html-to-image-CpggM7u1.js";
 import "./chunk-5FQGJX7Z-BOg95xG5.js";
-import { Ft as Code, Mt as Expand, a as DEFAULT_SLIDE_TYPE, c as Slide, i as DEFAULT_DECK_TRANSITION, jt as EyeOff, s as SlideSidebar, t as useNotebookCodeAvailable } from "./code-visibility-nPfbiA_L.js";
+import { Ft as EyeOff, It as Expand, a as DEFAULT_SLIDE_TYPE, c as Slide, i as DEFAULT_DECK_TRANSITION, s as SlideSidebar, t as useNotebookCodeAvailable, zt as Code } from "./code-visibility-PjV7HUDZ.js";
 import "./input-D4kjoQUB.js";
 import "./toDate-CIpC_34u.js";
 import "./react-dom-BWRJ_g_k.js";

package/package.json

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

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

@@ -2,7 +2,11 @@
 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 {
+  DateFilterMenu,
+  NumberFilterMenu,
+  TextFilterMenu,
+} from "../column-header";
 import { Filter } from "../filters";
 
 beforeAll(() => {
@@ -201,3 +205,104 @@ describe("TextFilterMenu", () => {
     expect(screen.getByRole("button", { name: /apply/i })).not.toBeDisabled();
   });
 });
+
+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("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" }),
+    );
+  });
+});

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

@@ -26,7 +26,14 @@ beforeAll(() => {
 
 function makeColumn(
   id: string,
-  filterType: "text" | "number" | "boolean" | "select",
+  filterType:
+    | "text"
+    | "number"
+    | "boolean"
+    | "select"
+    | "date"
+    | "datetime"
+    | "time",
 ): Column<unknown, unknown> {
   return {
     id,
@@ -35,7 +42,13 @@ function makeColumn(
 }
 
 function mockTable(): Table<unknown> {
-  const columns = [makeColumn("name", "text"), makeColumn("age", "number")];
+  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),
@@ -144,6 +157,79 @@ describe("FilterPillEditor — snapshot rehydration", () => {
   });
 });
 
+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();

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

@@ -215,22 +215,93 @@ 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", () => {

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

@@ -44,14 +44,19 @@ import { OPERATOR_LABELS } from "./operator-labels";
 import {
   type ColumnFilterForType,
   type ColumnFilterValue,
+  DATETIME_OPS,
   Filter,
-  NUMBER_COMPARISON_OPS,
-  type NumberComparisonOp,
+  isDatetimeComparisonOp,
+  isNumberComparisonOp,
+  isTextScalarOp,
   NUMBER_OPS,
   TEXT_OPS,
-  TEXT_SCALAR_OPS,
-  type TextScalarOp,
 } from "./filters";
+import {
+  type DateLikeFilterType,
+  DateLikeInput,
+  DateLikeRangeInput,
+} from "./date-filter-inputs";
 import {
   ClearFilterMenuItem,
   FilterButtons,
@@ -283,19 +288,21 @@ export function renderMenuItemFilter<TData, TValue>(
     return null;
   }
 
-  if (filterType === "time") {
-    // Not implemented
-    return null;
-  }
-
-  if (filterType === "datetime") {
-    // Not implemented
-    return null;
-  }
-
-  if (filterType === "date") {
-    // Not implemented
-    return null;
+  if (
+    filterType === "date" ||
+    filterType === "datetime" ||
+    filterType === "time"
+  ) {
+    return (
+      <DropdownMenuSub>
+        {filterMenuItem}
+        <DropdownMenuPortal>
+          <DropdownMenuSubContent>
+            <DateFilterMenu column={column} filterType={filterType} />
+          </DropdownMenuSubContent>
+        </DropdownMenuPortal>
+      </DropdownMenuSub>
+    );
   }
 
   logNever(filterType);
@@ -369,12 +376,6 @@ const BooleanFilter = <TData, TValue>({
   );
 };
 
-const NUMBER_COMPARISON_SET: ReadonlySet<OperatorType> = new Set(
-  NUMBER_COMPARISON_OPS,
-);
-const isNumberComparisonOp = (op: OperatorType): op is NumberComparisonOp =>
-  NUMBER_COMPARISON_SET.has(op);
-
 type NumberComparisonFilter = Extract<
   ColumnFilterForType<"number">,
   { value: number }
@@ -485,9 +486,134 @@ export const NumberFilterMenu = <TData, TValue>({
   );
 };
 
-const TEXT_SCALAR_SET: ReadonlySet<OperatorType> = new Set(TEXT_SCALAR_OPS);
-const isTextScalarOp = (op: OperatorType): op is TextScalarOp =>
-  TEXT_SCALAR_SET.has(op);
+type DateComparisonFilter = Extract<
+  ColumnFilterForType<DateLikeFilterType>,
+  { value: Date }
+>;
+const isDateComparisonFilter = (
+  filter: ColumnFilterForType<DateLikeFilterType>,
+): filter is DateComparisonFilter => isDatetimeComparisonOp(filter.operator);
+
+export const DateFilterMenu = <TData, TValue>({
+  column,
+  filterType,
+}: {
+  column: Column<TData, TValue>;
+  filterType: DateLikeFilterType;
+}) => {
+  const currentFilter = column.getFilterValue() as
+    | ColumnFilterForType<DateLikeFilterType>
+    | undefined;
+  const hasFilter = currentFilter !== undefined;
+
+  const [operator, setOperator] = useState<OperatorType>(
+    currentFilter?.operator ?? "between",
+  );
+  const [min, setMin] = useState<Date | undefined>(
+    currentFilter?.operator === "between" ? currentFilter.min : undefined,
+  );
+  const [max, setMax] = useState<Date | undefined>(
+    currentFilter?.operator === "between" ? currentFilter.max : undefined,
+  );
+  const [value, setValue] = useState<Date | undefined>(
+    currentFilter !== undefined && isDateComparisonFilter(currentFilter)
+      ? currentFilter.value
+      : undefined,
+  );
+
+  const isComparison = isDatetimeComparisonOp(operator);
+  const isNullish = operator === "is_null" || operator === "is_not_null";
+
+  const applyDisabled =
+    (operator === "between" && (min === undefined || max === undefined)) ||
+    (isComparison && value === undefined);
+
+  const buildFilter = (
+    opts: Parameters<typeof Filter.date>[0],
+  ): ColumnFilterForType<DateLikeFilterType> => {
+    switch (filterType) {
+      case "date":
+        return Filter.date(opts);
+      case "datetime":
+        return Filter.datetime(opts);
+      case "time":
+        return Filter.time(opts);
+    }
+  };
+
+  const handleApply = () => {
+    if (isNullish) {
+      column.setFilterValue(buildFilter({ operator }));
+      return;
+    }
+    if (operator === "between" && min !== undefined && max !== undefined) {
+      column.setFilterValue(buildFilter({ operator: "between", min, max }));
+      return;
+    }
+    if (isComparison && value !== undefined) {
+      column.setFilterValue(buildFilter({ operator, value }));
+    }
+  };
+
+  const [resetKey, setResetKey] = useState(0);
+  const handleClear = () => {
+    setMin(undefined);
+    setMax(undefined);
+    setValue(undefined);
+    setResetKey((k) => k + 1);
+    column.setFilterValue(undefined);
+  };
+
+  const handleOperatorChange = (next: OperatorType) => {
+    setOperator(next);
+  };
+
+  return (
+    <div
+      className="flex flex-col gap-1 pt-3 px-2"
+      onKeyDownCapture={(e) => {
+        if (e.key === "Tab") {
+          e.stopPropagation();
+        }
+      }}
+    >
+      <OperatorSelect
+        operator={operator}
+        options={DATETIME_OPS}
+        onChange={handleOperatorChange}
+      />
+      {operator === "between" && (
+        <DateLikeRangeInput
+          key={`${filterType}-${resetKey}`}
+          filterType={filterType}
+          min={min}
+          max={max}
+          onRangeChange={(nextMin, nextMax) => {
+            setMin(nextMin);
+            setMax(nextMax);
+          }}
+          className="shadow-none! border-border hover:shadow-none!"
+        />
+      )}
+      {isComparison && (
+        <DateLikeInput
+          key={`${filterType}-${resetKey}`}
+          filterType={filterType}
+          value={value}
+          onChange={setValue}
+          aria-label="value"
+          className="shadow-none! border-border hover:shadow-none!"
+        />
+      )}
+      <FilterButtons
+        onApply={handleApply}
+        onClear={handleClear}
+        clearButtonDisabled={!hasFilter}
+        applyButtonDisabled={applyDisabled}
+      />
+    </div>
+  );
+};
 
 export const TextFilterMenu = <TData, TValue>({
   column,