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

package/dist/{process-output-CCeeXIBd.js → process-output-X8TR20AK.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { it as parseHtmlContent, rt as ansiToPlainText } from "./html-to-image-40ZXSWP-.js";
+import { it as parseHtmlContent, rt as ansiToPlainText } from "./html-to-image-CpggM7u1.js";
 import { u as createLucideIcon } from "./dist-D3ZI9nhS.js";
 import { t as Strings } from "./strings-BiIhGaI8.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-COBk7ree.js";

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

@@ -6,11 +6,11 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { _ as Logger, g as cn, h as Events, l as useEventListener, t as Button } from "./button-Dj4BTre0.js";
 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-40ZXSWP-.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-CJ7U5FE0.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-CJWlVNGD.js";
+import "./toDate-CIpC_34u.js";
 import "./react-dom-BWRJ_g_k.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-COBk7ree.js";
 import "./zod-BWkcDORu.js";

package/dist/{toDate-CJWlVNGD.js → toDate-CIpC_34u.js}

@@ -512,15 +512,21 @@ var RuntimeManager = class {
   get isSameOrigin() {
     return this.httpURL.origin === window.location.origin;
   }
-  formatHttpURL(e, b, x = true) {
-    e || (e = "");
+  get isServerless() {
+    return isWasm() || isIslands() || isStaticNotebook();
+  }
+  formatHttpURL({ path: e = "", searchParams: b, restrictToKnownQueryParams: x = true }) {
     let S = this.httpURL, w = new URLSearchParams(window.location.search);
     if (b) for (let [e2, x2] of b.entries()) S.searchParams.set(e2, x2);
     for (let [e2, b2] of w.entries()) x && !Object.values(KnownQueryParams).includes(e2) || S.searchParams.set(e2, b2);
     return S.pathname = `${S.pathname.replace(/\/$/, "")}/${e.replace(/^\//, "")}`, S.hash = "", S;
   }
   formatWsURL(e, b) {
-    let x = this.formatHttpURL(e, b, false);
+    let x = this.formatHttpURL({
+      path: e,
+      searchParams: b,
+      restrictToKnownQueryParams: false
+    });
     return !this.isSameOrigin && this.config.authToken && x.searchParams.set(KnownQueryParams.accessToken, this.config.authToken), asWsUrl(x.toString());
   }
   getWsURL(e) {
@@ -546,26 +552,33 @@ var RuntimeManager = class {
     return this.formatWsURL(`/lsp/${e}`);
   }
   getAiURL(e) {
-    return this.formatHttpURL(`/api/ai/${e}`);
+    return this.formatHttpURL({ path: `/api/ai/${e}` });
   }
   healthURL() {
-    return this.formatHttpURL("/health");
+    return this.formatHttpURL({ path: "/health" });
   }
-  async isHealthy() {
-    if (isWasm() || isIslands() || isStaticNotebook()) return true;
+  async fetchHealth() {
     try {
-      let e = await fetch(this.healthURL().toString());
-      if (e.redirected) {
-        Logger.debug(`Runtime redirected to ${e.url}`);
-        let x2 = new URL(e.url);
-        x2.pathname = x2.pathname.replace(/\/health$/, ""), this.config.url = x2.toString();
-      }
-      let x = e.ok;
-      return x && this.setDOMBaseUri(this.config.url), x;
+      return await fetch(this.healthURL().toString());
     } catch (e) {
-      return Logger.error(`Failed to check health: ${e instanceof Error ? e.message : "Unknown error"}`, { cause: e }), false;
+      return Logger.error(`Failed to check health: ${e instanceof Error ? e.message : "Unknown error"}`, { cause: e }), null;
     }
   }
+  async reconcileFromHealth() {
+    if (this.isServerless) return true;
+    let e = await this.fetchHealth();
+    if (!e) return false;
+    if (e.redirected) {
+      Logger.debug(`Runtime redirected to ${e.url}`);
+      let x = new URL(e.url);
+      x.pathname = x.pathname.replace(/\/health$/, ""), this.config.url = x.toString();
+    }
+    return e.ok && this.setDOMBaseUri(this.config.url), e.ok;
+  }
+  async probeHealth() {
+    var _a;
+    return this.isServerless ? true : ((_a = await this.fetchHealth()) == null ? void 0 : _a.ok) ?? false;
+  }
   setDOMBaseUri(e) {
     e = e.split("?", 1)[0], e.endsWith("/") || (e += "/");
     let b = document.querySelector("base");
@@ -574,7 +587,7 @@ var RuntimeManager = class {
   async init(e) {
     Logger.debug("Initializing runtime...");
     let x = 0;
-    for (; !await this.isHealthy(); ) {
+    for (; !await this.reconcileFromHealth(); ) {
       if (x >= 25) {
         Logger.error("Failed to connect after 25 retries"), this.initialHealthyCheck.reject(/* @__PURE__ */ Error("Failed to connect after 25 retries"));
         return;

package/dist/{vega-component-BtvQ-Kc4.js → vega-component-cSdqoAxe.js}

@@ -2,7 +2,7 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { _ as Logger, c as Objects, g as cn, h as Events } from "./button-Dj4BTre0.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-CJWlVNGD.js";
+import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-CIpC_34u.js";
 import "./react-dom-BWRJ_g_k.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-COBk7ree.js";
 import "./zod-BWkcDORu.js";
@@ -11,7 +11,7 @@ import { t as Tooltip } from "./tooltip-DRaMBu06.js";
 import { i as debounce_default } from "./constants-D0gkYoE2.js";
 import { n as useTheme, w as useEvent_default } from "./useTheme-DykuNHR2.js";
 import { s as uniq } from "./arrays-CldYf7p7.js";
-import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-CpgZM9BM.js";
+import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-Dsy9kkZu.js";
 import { n as formats } from "./vega-loader.browser-3_z8GoFC.js";
 import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-Dr8Qem8p.js";
 import { t as useAsyncData } from "./useAsyncData-C56Khv_R.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.7-dev55",
+  "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,