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

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

@@ -0,0 +1,325 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type {
+  CalendarDate,
+  CalendarDateTime,
+  Time,
+} from "@internationalized/date";
+import { parseDate, parseDateTime, parseTime } from "@internationalized/date";
+import { MinusIcon } from "lucide-react";
+import { useState } from "react";
+import type { DateValue, TimeValue } from "react-aria-components";
+import { TimeField } from "@/components/ui/date-input";
+import { DatePicker, DateRangePicker } from "@/components/ui/date-picker";
+import {
+  dateToISODate,
+  dateToISODateTime,
+  dateToISOTime,
+  type FilterType,
+} from "./filters";
+
+export type DateLikeFilterType = Extract<
+  FilterType,
+  "date" | "datetime" | "time"
+>;
+
+function dateToAria(
+  filterType: DateLikeFilterType,
+  d: Date,
+): DateValue | TimeValue {
+  switch (filterType) {
+    case "date":
+      return parseDate(dateToISODate(d));
+    case "datetime":
+      return parseDateTime(dateToISODateTime(d));
+    case "time":
+      return parseTime(dateToISOTime(d));
+  }
+}
+
+function ariaToDate(
+  filterType: DateLikeFilterType,
+  aria: DateValue | TimeValue,
+): Date {
+  if (filterType === "time") {
+    const t = aria as Time;
+    return new Date(1970, 0, 1, t.hour, t.minute, t.second, t.millisecond);
+  }
+  if (filterType === "date") {
+    const c = aria as CalendarDate;
+    return new Date(c.year, c.month - 1, c.day);
+  }
+  const c = aria as Partial<CalendarDateTime> & CalendarDate;
+  return new Date(
+    c.year,
+    c.month - 1,
+    c.day,
+    c.hour ?? 0,
+    c.minute ?? 0,
+    c.second ?? 0,
+    c.millisecond ?? 0,
+  );
+}
+
+// Parses a pasted string into a Date appropriate for the filter type.
+// Accepts ISO, US, RFC formats via the Date constructor; time-only strings
+// (HH:MM[:SS]) are handled explicitly since `new Date("12:30")` is invalid.
+export function parsePastedDate(
+  filterType: DateLikeFilterType,
+  text: string,
+): Date | undefined {
+  const trimmed = text.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+
+  const timeMatch =
+    filterType === "time"
+      ? trimmed.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(am|pm)?$/i)
+      : null;
+  if (timeMatch) {
+    const [, hStr, mStr, sStr, ampm] = timeMatch;
+    let hour = Number.parseInt(hStr, 10);
+    const minute = Number.parseInt(mStr, 10);
+    const second = sStr ? Number.parseInt(sStr, 10) : 0;
+    if (ampm) {
+      const isPm = ampm.toLowerCase() === "pm";
+      if (hour === 12) {
+        hour = isPm ? 12 : 0;
+      } else if (isPm) {
+        hour += 12;
+      }
+    }
+    return new Date(1970, 0, 1, hour, minute, second);
+  }
+
+  const dateOnlyMatch = trimmed.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (dateOnlyMatch) {
+    const [, y, m, d] = dateOnlyMatch;
+    return new Date(
+      Number.parseInt(y, 10),
+      Number.parseInt(m, 10) - 1,
+      Number.parseInt(d, 10),
+    );
+  }
+
+  // Parse ISO datetimes as wall-clock to stay consistent with the picker's
+  // local-time basis. Trailing `Z` or offsets are stripped so that pasting
+  // `2024-01-15T08:30:00Z` displays `08:30` instead of being shifted by the
+  // viewer's timezone.
+  const isoMatch = trimmed.match(
+    /^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?(?:Z|[+-]\d{2}:?\d{2})?$/,
+  );
+  if (isoMatch) {
+    const [, y, mo, d, h, mi, s] = isoMatch;
+    return new Date(
+      Number.parseInt(y, 10),
+      Number.parseInt(mo, 10) - 1,
+      Number.parseInt(d, 10),
+      Number.parseInt(h, 10),
+      Number.parseInt(mi, 10),
+      s ? Number.parseInt(s, 10) : 0,
+    );
+  }
+
+  const parsed = new Date(trimmed);
+  if (Number.isNaN(parsed.getTime())) {
+    return undefined;
+  }
+  return parsed;
+}
+
+function parsePastedRange(
+  filterType: DateLikeFilterType,
+  text: string,
+): { min: Date; max: Date } | undefined {
+  const parts = text.split(/\s+(?:-|–|—|to)\s+/i);
+  if (parts.length === 2) {
+    const min = parsePastedDate(filterType, parts[0]);
+    const max = parsePastedDate(filterType, parts[1]);
+    if (min && max) {
+      return { min, max };
+    }
+  }
+  const single = parsePastedDate(filterType, text);
+  if (single) {
+    return { min: single, max: single };
+  }
+  return undefined;
+}
+
+interface DateLikeInputProps {
+  filterType: DateLikeFilterType;
+  value: Date | undefined;
+  onChange: (value: Date | undefined) => void;
+  "aria-label"?: string;
+  className?: string;
+}
+
+export const DateLikeInput = ({
+  filterType,
+  value,
+  onChange,
+  "aria-label": ariaLabel,
+  className,
+}: DateLikeInputProps) => {
+  const [seedKey, setSeedKey] = useState(0);
+  const [seed, setSeed] = useState(value);
+
+  const handleChange = (next: DateValue | TimeValue | null) => {
+    if (next === null) {
+      return;
+    }
+    onChange(ariaToDate(filterType, next));
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
+    const text = e.clipboardData.getData("text");
+    const parsed = parsePastedDate(filterType, text);
+    if (!parsed) {
+      return;
+    }
+    e.preventDefault();
+    onChange(parsed);
+    setSeed(parsed);
+    setSeedKey((k) => k + 1);
+  };
+
+  const seedValue =
+    seed === undefined ? undefined : dateToAria(filterType, seed);
+
+  return (
+    <div onPasteCapture={handlePaste} className="contents">
+      {filterType === "time" ? (
+        <TimeField<Time>
+          key={seedKey}
+          aria-label={ariaLabel}
+          defaultValue={seedValue as Time | undefined}
+          onChange={handleChange}
+          className={className}
+        />
+      ) : filterType === "date" ? (
+        <DatePicker<CalendarDate>
+          key={seedKey}
+          aria-label={ariaLabel}
+          defaultValue={seedValue as CalendarDate | undefined}
+          onChange={handleChange}
+          className={className}
+        />
+      ) : (
+        <DatePicker<CalendarDateTime>
+          key={seedKey}
+          aria-label={ariaLabel}
+          defaultValue={seedValue as CalendarDateTime | undefined}
+          granularity="second"
+          onChange={handleChange}
+          className={className}
+        />
+      )}
+    </div>
+  );
+};
+
+interface DateLikeRangeInputProps {
+  filterType: DateLikeFilterType;
+  min: Date | undefined;
+  max: Date | undefined;
+  onRangeChange: (min: Date | undefined, max: Date | undefined) => void;
+  className?: string;
+}
+
+export const DateLikeRangeInput = ({
+  filterType,
+  min,
+  max,
+  onRangeChange,
+  className,
+}: DateLikeRangeInputProps) => {
+  const [seedKey, setSeedKey] = useState(0);
+  const [seedMin, setSeedMin] = useState(min);
+  const [seedMax, setSeedMax] = useState(max);
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
+    const text = e.clipboardData.getData("text");
+    const parsed = parsePastedRange(filterType, text);
+    if (!parsed) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    onRangeChange(parsed.min, parsed.max);
+    setSeedMin(parsed.min);
+    setSeedMax(parsed.max);
+    setSeedKey((k) => k + 1);
+  };
+
+  if (filterType === "time") {
+    return (
+      <div onPasteCapture={handlePaste} className="flex gap-1 items-center">
+        <DateLikeInput
+          key={`min-${seedKey}`}
+          filterType="time"
+          value={seedMin}
+          onChange={(nextMin) => onRangeChange(nextMin, max)}
+          aria-label="min"
+          className={className}
+        />
+        <MinusIcon className="h-5 w-5 text-muted-foreground" />
+        <DateLikeInput
+          key={`max-${seedKey}`}
+          filterType="time"
+          value={seedMax}
+          onChange={(nextMax) => onRangeChange(min, nextMax)}
+          aria-label="max"
+          className={className}
+        />
+      </div>
+    );
+  }
+
+  const handleChange = (next: { start: DateValue; end: DateValue } | null) => {
+    if (next === null) {
+      return;
+    }
+    onRangeChange(
+      ariaToDate(filterType, next.start),
+      ariaToDate(filterType, next.end),
+    );
+  };
+
+  const seedRange =
+    seedMin === undefined || seedMax === undefined
+      ? undefined
+      : {
+          start: dateToAria(filterType, seedMin),
+          end: dateToAria(filterType, seedMax),
+        };
+
+  return (
+    <div onPasteCapture={handlePaste} className="contents">
+      {filterType === "date" ? (
+        <DateRangePicker<CalendarDate>
+          key={seedKey}
+          aria-label="range"
+          defaultValue={
+            seedRange as { start: CalendarDate; end: CalendarDate } | undefined
+          }
+          onChange={handleChange}
+          className={className}
+        />
+      ) : (
+        <DateRangePicker<CalendarDateTime>
+          key={seedKey}
+          aria-label="range"
+          defaultValue={
+            seedRange as
+              | { start: CalendarDateTime; end: CalendarDateTime }
+              | undefined
+          }
+          granularity="second"
+          onChange={handleChange}
+          className={className}
+        />
+      )}
+    </div>
+  );
+};

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

@@ -17,23 +17,46 @@ import {
   SelectValue,
 } from "../ui/select";
 import { Button } from "../ui/button";
+import { DateLikeInput, DateLikeRangeInput } from "./date-filter-inputs";
 import { FilterByValuesPicker } from "./filter-by-values-picker";
 import { RegexInput } from "./regex-input";
 import {
   type ColumnFilterValue,
+  DATETIME_OPS,
   Filter,
+  isDatetimeComparisonOp,
+  isNumberComparisonOp,
+  isTextScalarOp,
   MEMBERSHIP_OPS,
-  NUMBER_COMPARISON_OPS,
-  type NumberComparisonOp,
   NUMBER_OPS,
   TEXT_OPS,
-  TEXT_SCALAR_OPS,
-  type TextScalarOp,
 } from "./filters";
 import { OPERATOR_LABELS } from "./operator-labels";
 import { Tooltip } from "../ui/tooltip";
 
-type EditableFilterType = "number" | "text" | "boolean" | "select";
+type EditableFilterType =
+  | "number"
+  | "text"
+  | "boolean"
+  | "select"
+  | "date"
+  | "datetime"
+  | "time";
+
+type DateLikeEditableFilterType = Extract<
+  EditableFilterType,
+  "date" | "datetime" | "time"
+>;
+
+const DATE_LIKE_TYPES: ReadonlySet<EditableFilterType> = new Set([
+  "date",
+  "datetime",
+  "time",
+]);
+
+const isDateLikeType = (
+  type: EditableFilterType,
+): type is DateLikeEditableFilterType => DATE_LIKE_TYPES.has(type);
 
 const BOOLEAN_OPS = ["is_true", "is_false", "is_null", "is_not_null"] as const;
 const SELECT_OPS = MEMBERSHIP_OPS;
@@ -46,6 +69,9 @@ const OPERATORS_BY_TYPE: Record<
   text: TEXT_OPS,
   boolean: BOOLEAN_OPS,
   select: SELECT_OPS,
+  date: DATETIME_OPS,
+  datetime: DATETIME_OPS,
+  time: DATETIME_OPS,
 };
 
 const DEFAULT_OPERATOR: Record<EditableFilterType, OperatorType> = {
@@ -53,6 +79,9 @@ const DEFAULT_OPERATOR: Record<EditableFilterType, OperatorType> = {
   text: "contains",
   boolean: "is_true",
   select: "in",
+  date: "between",
+  datetime: "between",
+  time: "between",
 };
 
 const OPERATORS_WITHOUT_VALUE = new Set<OperatorType>([
@@ -63,22 +92,14 @@ const OPERATORS_WITHOUT_VALUE = new Set<OperatorType>([
   "is_empty",
 ]);
 
-const NUMBER_COMPARISON_SET: ReadonlySet<OperatorType> = new Set(
-  NUMBER_COMPARISON_OPS,
-);
-const TEXT_SCALAR_SET: ReadonlySet<OperatorType> = new Set(TEXT_SCALAR_OPS);
-
-const isNumberComparisonOp = (op: OperatorType): op is NumberComparisonOp =>
-  NUMBER_COMPARISON_SET.has(op);
-const isTextScalarOp = (op: OperatorType): op is TextScalarOp =>
-  TEXT_SCALAR_SET.has(op);
-
 type DraftValue =
   | { kind: "between"; min?: number; max?: number }
   | { kind: "single-number"; value?: number }
   | { kind: "single-text"; text?: string }
   | { kind: "multi-text"; values?: string[] }
   | { kind: "options"; options?: unknown[] }
+  | { kind: "date-between"; min?: Date; max?: Date }
+  | { kind: "date-single"; value?: Date }
   | { kind: "none" };
 
 interface Snapshot {
@@ -116,7 +137,13 @@ export const FilterPillEditor = <TData,>({
   const editableColumns = table.getAllColumns().filter((c) => {
     const ft = c.columnDef.meta?.filterType;
     return (
-      ft === "number" || ft === "text" || ft === "boolean" || ft === "select"
+      ft === "number" ||
+      ft === "text" ||
+      ft === "boolean" ||
+      ft === "select" ||
+      ft === "date" ||
+      ft === "datetime" ||
+      ft === "time"
     );
   });
 
@@ -200,7 +227,7 @@ export const FilterPillEditor = <TData,>({
   const operatorTriggerRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
     const firstInput = valueSlotRef.current?.querySelector<HTMLElement>(
-      'input, [role="combobox"], button',
+      'input, [role="spinbutton"], [role="combobox"], button',
     );
     if (firstInput) {
       firstInput.focus();
@@ -216,6 +243,11 @@ export const FilterPillEditor = <TData,>({
         e.preventDefault();
         handleApply();
       }}
+      onKeyDownCapture={(e) => {
+        if (e.key === "Tab") {
+          e.stopPropagation();
+        }
+      }}
     >
       <div className="flex flex-col gap-1">
         <label className="text-xs text-muted-foreground" htmlFor={columnId}>
@@ -426,6 +458,36 @@ const ValueSlot = <TData, TValue>({
       />
     );
   }
+  if (isDateLikeType(type) && operator === "between") {
+    const v =
+      value.kind === "date-between" ? value : { kind: "date-between" as const };
+    return (
+      <DateLikeRangeInput
+        key={`${column?.id ?? "_"}-${operator}`}
+        filterType={type}
+        min={v.min}
+        max={v.max}
+        onRangeChange={(min, max) =>
+          onChange({ kind: "date-between", min, max })
+        }
+        className="border-input"
+      />
+    );
+  }
+  if (isDateLikeType(type) && isDatetimeComparisonOp(operator)) {
+    const v =
+      value.kind === "date-single" ? value : { kind: "date-single" as const };
+    return (
+      <DateLikeInput
+        key={`${column?.id ?? "_"}-${operator}`}
+        filterType={type}
+        value={v.value}
+        onChange={(next) => onChange({ kind: "date-single", value: next })}
+        aria-label="value"
+        className="border-input"
+      />
+    );
+  }
   if (type === "select" && column) {
     const v = value.kind === "options" ? value : { kind: "options" as const };
     return (
@@ -443,19 +505,18 @@ const ValueSlot = <TData, TValue>({
 };
 
 function getEditableType(value: ColumnFilterValue): EditableFilterType {
-  if (value.type === "number") {
-    return "number";
-  }
-  if (value.type === "text") {
-    return "text";
-  }
-  if (value.type === "boolean") {
-    return "boolean";
-  }
-  if (value.type === "select") {
-    return "select";
+  switch (value.type) {
+    case "number":
+    case "text":
+    case "boolean":
+    case "select":
+    case "date":
+    case "datetime":
+    case "time":
+      return value.type;
+    default:
+      return "text";
   }
-  return "text";
 }
 
 function toDraftValue(value: ColumnFilterValue): DraftValue {
@@ -486,6 +547,21 @@ function toDraftValue(value: ColumnFilterValue): DraftValue {
   if (value.type === "select") {
     return { kind: "options", options: [...value.options] };
   }
+  if (
+    value.type === "date" ||
+    value.type === "datetime" ||
+    value.type === "time"
+  ) {
+    switch (value.operator) {
+      case "between":
+        return { kind: "date-between", min: value.min, max: value.max };
+      case "is_null":
+      case "is_not_null":
+        return { kind: "none" };
+      default:
+        return { kind: "date-single", value: value.value };
+    }
+  }
   return { kind: "none" };
 }
 
@@ -509,6 +585,11 @@ function emptyDraftFor(
   if (type === "select") {
     return { kind: "options", options: [] };
   }
+  if (isDateLikeType(type)) {
+    return operator === "between"
+      ? { kind: "date-between" }
+      : { kind: "date-single" };
+  }
   return { kind: "none" };
 }
 
@@ -516,7 +597,7 @@ function getMissingValueMessage(
   type: EditableFilterType,
   operator: OperatorType,
 ): string {
-  if (type === "number" && operator === "between") {
+  if (operator === "between") {
     return "Min and max are required";
   }
   if (type === "text" && (operator === "in" || operator === "not_in")) {
@@ -611,5 +692,33 @@ function buildFilterValue({
       operator: operator === "not_in" ? "not_in" : "in",
     });
   }
+  if (isDateLikeType(type)) {
+    const factory =
+      type === "date"
+        ? Filter.date
+        : type === "datetime"
+          ? Filter.datetime
+          : Filter.time;
+    if (operator === "is_null" || operator === "is_not_null") {
+      return factory({ operator });
+    }
+    if (operator === "between") {
+      if (
+        draft.kind !== "date-between" ||
+        draft.min === undefined ||
+        draft.max === undefined
+      ) {
+        return undefined;
+      }
+      return factory({ operator: "between", min: draft.min, max: draft.max });
+    }
+    if (!isDatetimeComparisonOp(operator)) {
+      return undefined;
+    }
+    if (draft.kind !== "date-single" || draft.value === undefined) {
+      return undefined;
+    }
+    return factory({ operator, value: draft.value });
+  }
   return undefined;
 }