@flanksource/clicky-ui 0.2.2 → 0.2.4

package/dist/components/FilterBar.js

@@ -1,15 +1,23 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, createContext, useRef, useState, useEffect, useContext } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo, useRef, useState, useLayoutEffect, useCallback, useEffect, createContext, useContext } from "react";
 import { FilterPill } from "../data/FilterPill.js";
 import { Icon } from "../data/Icon.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
-import { DatePicker } from "./DatePicker.js";
 import { DateTimePicker } from "./DateTimePicker.js";
 import { MultiSelect } from "./MultiSelect.js";
 import { RangeSlider } from "./RangeSlider.js";
 import { Select } from "./select.js";
+import { TimeRange } from "./TimeRange.js";
+import { UiSearch } from "../icons/components/UiSearch.js";
+import { UiFilter } from "../icons/components/UiFilter.js";
+import { UiClose } from "../icons/components/UiClose.js";
+import { UiChevronUp } from "../icons/components/UiChevronUp.js";
+import { UiChevronDown } from "../icons/components/UiChevronDown.js";
+import { UiChevronRight } from "../icons/components/UiChevronRight.js";
 const FILTER_INPUT_DEBOUNCE_MS = 500;
+const FILTER_BAR_GAP_PX = 8;
+const FILTER_BAR_OVERFLOW_TRIGGER_ESTIMATE_PX = 44;
 const FilterBarContext = createContext({
   autoSubmit: true
 });
@@ -25,51 +33,138 @@ function FilterBar({
   autoSubmit = true,
   onApply,
   applyLabel = "Apply",
-  isPending = false
+  isPending = false,
+  overflowMode = "responsive"
 }) {
   const hasRangeControls = Boolean(timeRange || dateRange);
   const showApply = !autoSubmit && !!onApply;
   const contextValue = useMemo(() => ({ autoSubmit }), [autoSubmit]);
+  const allFilters = filters ?? [];
+  const responsiveOverflow = overflowMode === "responsive" && allFilters.length > 0;
+  const filterListRef = useRef(null);
+  const overflowTriggerRef = useRef(null);
+  const filterNodeRefs = useRef(/* @__PURE__ */ new Map());
+  const filterWidthCache = useRef(/* @__PURE__ */ new Map());
+  const filterKeys = useMemo(
+    () => allFilters.map((filter) => filter.key).join("\0"),
+    [allFilters]
+  );
+  const [visibleFilterCount, setVisibleFilterCount] = useState(allFilters.length);
+  const allFiltersRef = useRef(allFilters);
+  const responsiveOverflowRef = useRef(responsiveOverflow);
+  allFiltersRef.current = allFilters;
+  responsiveOverflowRef.current = responsiveOverflow;
+  useLayoutEffect(() => {
+    setVisibleFilterCount(allFiltersRef.current.length);
+  }, [filterKeys]);
+  const measureOverflow = useCallback(() => {
+    var _a;
+    const current = allFiltersRef.current;
+    if (!responsiveOverflowRef.current) {
+      setVisibleFilterCount(current.length);
+      return;
+    }
+    const filterList = filterListRef.current;
+    if (!filterList) return;
+    const availableWidth = Math.floor(filterList.getBoundingClientRect().width);
+    if (availableWidth <= 0) return;
+    const widths = current.map((filter) => {
+      const node = filterNodeRefs.current.get(filter.key);
+      const measured = (node == null ? void 0 : node.getBoundingClientRect().width) ?? 0;
+      if (measured > 0) {
+        const width = Math.ceil(measured);
+        filterWidthCache.current.set(filter.key, width);
+        return width;
+      }
+      return filterWidthCache.current.get(filter.key) ?? estimateFilterWidth(filter);
+    });
+    const triggerWidth = Math.ceil(
+      ((_a = overflowTriggerRef.current) == null ? void 0 : _a.getBoundingClientRect().width) ?? FILTER_BAR_OVERFLOW_TRIGGER_ESTIMATE_PX
+    );
+    const triggerGap = triggerWidth > 0 ? FILTER_BAR_GAP_PX : 0;
+    const allFiltersWidth = sumFilterWidths(widths);
+    const nextVisible = allFiltersWidth <= availableWidth ? current.length : calculateVisibleFilterCount(
+      widths,
+      Math.max(0, availableWidth - triggerWidth - triggerGap)
+    );
+    setVisibleFilterCount((prev) => prev === nextVisible ? prev : nextVisible);
+  }, []);
+  useLayoutEffect(() => {
+    measureOverflow();
+  }, [measureOverflow]);
+  useEffect(() => {
+    if (!responsiveOverflow) return;
+    const filterList = filterListRef.current;
+    const trigger = overflowTriggerRef.current;
+    const ResizeObserverCtor = typeof ResizeObserver === "undefined" ? null : ResizeObserver;
+    if (!ResizeObserverCtor) {
+      window.addEventListener("resize", measureOverflow);
+      measureOverflow();
+      return () => window.removeEventListener("resize", measureOverflow);
+    }
+    const observer = new ResizeObserverCtor(() => measureOverflow());
+    if (filterList) observer.observe(filterList);
+    if (trigger) observer.observe(trigger);
+    window.addEventListener("resize", measureOverflow);
+    measureOverflow();
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", measureOverflow);
+    };
+  }, [measureOverflow, responsiveOverflow]);
+  const inlineFilters = responsiveOverflow ? allFilters.slice(0, Math.min(visibleFilterCount, allFilters.length)) : allFilters;
+  const overflowFilters = responsiveOverflow ? allFilters.slice(Math.min(visibleFilterCount, allFilters.length)) : [];
+  const activeOverflowCount = overflowFilters.filter(isFilterBarFilterActive).length;
+  const setFilterNode = useCallback((key, node) => {
+    if (!node) {
+      filterNodeRefs.current.delete(key);
+      return;
+    }
+    filterNodeRefs.current.set(key, node);
+  }, []);
   return /* @__PURE__ */ jsx(FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "flex flex-wrap items-center gap-2 rounded-lg border border-input bg-background px-2 py-1.5 shadow-sm",
+        "flex flex-nowrap items-center gap-2 overflow-visible rounded-lg border border-input bg-background px-2 py-1.5 shadow-sm",
+        overflowMode === "wrap" && "flex-wrap",
         className
       ),
       children: [
-        leading && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: leading }),
+        leading && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: leading }),
         search && /* @__PURE__ */ jsx(SearchField, { search }),
         children,
-        filters == null ? void 0 : filters.map((filter, index) => {
-          const grow = !search && index === 0;
-          if (filter.kind === "lookup") {
-            return /* @__PURE__ */ jsx(LookupFilterField, { filter, grow }, filter.key);
-          }
-          if (filter.kind === "lookup-multi") {
-            return /* @__PURE__ */ jsx(LookupMultiFilterField, { filter, grow }, filter.key);
-          }
-          if (filter.kind === "multi") {
-            return /* @__PURE__ */ jsx(MultiFilterField, { filter, grow }, filter.key);
-          }
-          if (filter.kind === "nested-multi") {
-            return /* @__PURE__ */ jsx(NestedMultiFilterField, { filter, grow }, filter.key);
-          }
-          if (filter.kind === "select-multi") {
-            return /* @__PURE__ */ jsx(SelectMultiFilterField, { filter, grow }, filter.key);
-          }
-          if (filter.kind === "number") {
-            return /* @__PURE__ */ jsx(NumberFilterField, { filter, grow }, filter.key);
-          }
-          if (filter.kind === "enum") {
-            return /* @__PURE__ */ jsx(EnumFilterField, { filter, grow }, filter.key);
+        allFilters.length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: filterListRef,
+            "data-filter-bar-list": true,
+            className: cn(
+              "flex min-w-0 items-center gap-2",
+              overflowMode === "wrap" ? "flex-wrap" : "flex-1"
+            ),
+            children: inlineFilters.map((filter, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: (node) => setFilterNode(filter.key, node),
+                "data-filter-bar-item": filter.key,
+                className: "min-w-0 shrink-0",
+                children: renderFilterField(filter, !search && index === 0)
+              },
+              filter.key
+            ))
           }
-          if (filter.kind === "boolean") {
-            return /* @__PURE__ */ jsx(BooleanFilterField, { filter }, filter.key);
+        ),
+        responsiveOverflow && overflowFilters.length > 0 && /* @__PURE__ */ jsx(
+          OverflowFiltersMenu,
+          {
+            triggerRef: overflowTriggerRef,
+            filters: overflowFilters,
+            activeHidden: activeOverflowCount,
+            ...onApply ? { onApply } : {}
           }
-          return /* @__PURE__ */ jsx(TextFilterField, { filter, grow }, filter.key);
-        }),
-        (hasRangeControls || trailing || showApply) && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [
+        ),
+        (hasRangeControls || trailing || showApply) && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 flex-nowrap items-center gap-2", children: [
           dateRange && /* @__PURE__ */ jsx(RangeControlButton, { kind: "date", label: "Date range", ...dateRange }),
           timeRange && /* @__PURE__ */ jsx(RangeControlButton, { kind: "time", label: "Time range", ...timeRange }),
           trailing,
@@ -90,11 +185,18 @@ function FilterBar({
   ) });
 }
 function FilterBarFilterPanel({
+  filter,
+  chrome = "full",
+  autoSubmit = true
+}) {
+  const contextValue = useMemo(() => ({ autoSubmit }), [autoSubmit]);
+  return /* @__PURE__ */ jsx(FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(FilterBarFilterPanelContent, { filter, chrome }) });
+}
+function FilterBarFilterPanelContent({
   filter,
   chrome = "full"
 }) {
-  const contextValue = useMemo(() => ({ autoSubmit: true }), []);
-  return /* @__PURE__ */ jsxs(FilterBarContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     filter.kind === "lookup" && /* @__PURE__ */ jsx(LookupFilterField, { filter, grow: true }),
     filter.kind === "lookup-multi" && /* @__PURE__ */ jsx(LookupMultiFilterField, { filter, grow: true }),
     filter.kind === "multi" && /* @__PURE__ */ jsx(MultiFilterPanel, { filter, chrome }),
@@ -106,75 +208,411 @@ function FilterBarFilterPanel({
     filter.kind === "text" && /* @__PURE__ */ jsx(TextFilterField, { filter, grow: true })
   ] });
 }
-function FilterBarRangePanel({
-  kind,
-  label,
-  from = "",
-  to = "",
-  onApply,
-  presets: _presets,
-  fromPlaceholder,
-  toPlaceholder,
-  emptyLabel: _emptyLabel
+function renderFilterField(filter, grow) {
+  if (filter.kind === "lookup") {
+    return /* @__PURE__ */ jsx(LookupFilterField, { filter, grow });
+  }
+  if (filter.kind === "lookup-multi") {
+    return /* @__PURE__ */ jsx(LookupMultiFilterField, { filter, grow });
+  }
+  if (filter.kind === "multi") {
+    return /* @__PURE__ */ jsx(MultiFilterField, { filter, grow });
+  }
+  if (filter.kind === "nested-multi") {
+    return /* @__PURE__ */ jsx(NestedMultiFilterField, { filter, grow });
+  }
+  if (filter.kind === "select-multi") {
+    return /* @__PURE__ */ jsx(SelectMultiFilterField, { filter, grow });
+  }
+  if (filter.kind === "number") {
+    return /* @__PURE__ */ jsx(NumberFilterField, { filter, grow });
+  }
+  if (filter.kind === "enum") {
+    return /* @__PURE__ */ jsx(EnumFilterField, { filter, grow });
+  }
+  if (filter.kind === "boolean") {
+    return /* @__PURE__ */ jsx(BooleanFilterField, { filter });
+  }
+  return /* @__PURE__ */ jsx(TextFilterField, { filter, grow });
+}
+function OverflowFiltersMenu({
+  triggerRef,
+  filters,
+  activeHidden,
+  onApply
 }) {
-  const fromInputRef = useRef(null);
-  const toInputRef = useRef(null);
-  const [draftFrom, setDraftFrom] = useState(from);
-  const [draftTo, setDraftTo] = useState(to);
+  const rootRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [stagedValues, setStagedValues] = useState({});
+  const hasHidden = filters.length > 0;
+  const hiddenFilterKeys = useMemo(
+    () => filters.map((filter) => filter.key).join("\0"),
+    [filters]
+  );
+  const openOverflowMenu = useCallback(() => {
+    setStagedValues(createFilterValueMap(filters));
+    setOpen(true);
+  }, [filters]);
+  const closeOverflowMenu = useCallback(() => {
+    setStagedValues(createFilterValueMap(filters));
+    setOpen(false);
+  }, [filters]);
+  useDismissablePopup(open, rootRef, triggerRef, closeOverflowMenu);
   useEffect(() => {
-    setDraftFrom(from);
-    setDraftTo(to);
-  }, [from, to]);
-  function applyRange(nextFrom, nextTo) {
-    onApply(
-      kind === "time" ? normalizeDateMath(nextFrom) : nextFrom.trim(),
-      kind === "time" ? normalizeDateMath(nextTo) : nextTo.trim()
-    );
-  }
-  return /* @__PURE__ */ jsx("div", { className: "w-72 text-popover-foreground", children: /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
-    /* @__PURE__ */ jsx("div", { className: "mb-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-[10px] text-muted-foreground", children: "From" }),
-        /* @__PURE__ */ jsx(
-          RangeInput,
+    if (!hasHidden) closeOverflowMenu();
+  }, [closeOverflowMenu, hasHidden]);
+  useEffect(() => {
+    if (!open) return;
+    setStagedValues(createFilterValueMap(filters));
+  }, [hiddenFilterKeys, open]);
+  const stagedFilters = filters.map(
+    (filter) => filterWithStagedValue(
+      filter,
+      stagedValues[filter.key] ?? filterBarFilterValue(filter),
+      (next) => setStagedValues((current) => ({
+        ...current,
+        [filter.key]: next
+      }))
+    )
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: cn("relative shrink-0", !hasHidden && "invisible pointer-events-none"),
+      "aria-hidden": !hasHidden || void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Button,
           {
-            inputRef: fromInputRef,
-            kind,
-            ariaLabel: `${label} from`,
-            placeholder: fromPlaceholder ?? (kind === "date" ? "" : "now-24h"),
-            value: draftFrom,
-            onChange: setDraftFrom
+            ref: triggerRef,
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            "aria-label": "More filters",
+            "aria-haspopup": "dialog",
+            "aria-expanded": hasHidden ? open : false,
+            tabIndex: hasHidden ? 0 : -1,
+            title: hasHidden ? "More filters" : void 0,
+            onClick: () => {
+              if (!hasHidden) return;
+              if (open) {
+                closeOverflowMenu();
+              } else {
+                openOverflowMenu();
+              }
+            },
+            className: cn(
+              "h-8 min-w-0 gap-1.5 px-2 text-xs font-normal",
+              activeHidden > 0 && "border-primary/40 text-primary"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Icon, { icon: UiFilter, className: "text-[14px]" }),
+              activeHidden > 0 && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-1.5 text-[10px] font-medium text-muted-foreground", children: activeHidden })
+            ]
           }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-[10px] text-muted-foreground", children: "To" }),
-        /* @__PURE__ */ jsx(
-          RangeInput,
+        ),
+        hasHidden && open && /* @__PURE__ */ jsxs(
+          "div",
           {
-            inputRef: toInputRef,
-            kind,
-            ariaLabel: `${label} to`,
-            placeholder: toPlaceholder ?? (kind === "date" ? "" : "now"),
-            value: draftTo,
-            onChange: setDraftTo
+            role: "dialog",
+            "aria-label": "Overflow filters",
+            className: "absolute right-0 top-[calc(100%+0.375rem)] z-50 w-[min(34rem,calc(100vw-2rem))] overflow-visible rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5",
+            onClick: (event) => event.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2 px-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Filters" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "rounded px-1.5 py-0.5 text-xs text-primary transition-colors hover:bg-accent focus:bg-accent focus:outline-none disabled:text-muted-foreground",
+                      onClick: () => stagedFilters.forEach(clearFilterBarFilter),
+                      disabled: stagedFilters.every((filter) => !isFilterBarFilterActive(filter)),
+                      children: "Clear all"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Close overflow filters",
+                      title: "Close",
+                      className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+                      onClick: closeOverflowMenu,
+                      children: /* @__PURE__ */ jsx(Icon, { icon: UiClose, className: "text-sm" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/70 rounded-md border border-border/70", children: stagedFilters.map((filter) => {
+                const active = isFilterBarFilterActive(filter);
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-overflow-filter-row": filter.key,
+                    className: "grid h-12 grid-cols-[minmax(7rem,10rem)_auto_minmax(0,1fr)_auto] items-center gap-2 overflow-visible p-2",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "label",
+                        {
+                          htmlFor: filterInputId(filter),
+                          className: "min-w-0 truncate text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+                          title: filter.description ?? filter.label,
+                          children: filter.label
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "=" }),
+                      /* @__PURE__ */ jsx("div", { className: "min-w-0 overflow-visible", children: /* @__PURE__ */ jsx(FilterBarContext.Provider, { value: { autoSubmit: false }, children: /* @__PURE__ */ jsx(FilterBarKeyValueControl, { filter }) }) }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": `Clear ${filter.label}`,
+                          title: `Clear ${filter.label}`,
+                          className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none disabled:text-muted-foreground/40",
+                          onClick: () => clearFilterBarFilter(filter),
+                          disabled: !active,
+                          children: /* @__PURE__ */ jsx(Icon, { icon: UiClose, className: "text-sm" })
+                        }
+                      )
+                    ]
+                  },
+                  filter.key
+                );
+              }) }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-3 flex justify-end gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-8 px-3 text-xs",
+                    onClick: closeOverflowMenu,
+                    children: "Close"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "default",
+                    size: "sm",
+                    className: "h-8 px-3 text-xs",
+                    onClick: () => {
+                      applyStagedFilterValues(filters, stagedValues);
+                      onApply == null ? void 0 : onApply();
+                      setOpen(false);
+                    },
+                    children: "Apply"
+                  }
+                )
+              ] })
+            ]
           }
         )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-3 flex justify-end", children: /* @__PURE__ */ jsx(
-      Button,
+      ]
+    }
+  );
+}
+function FilterBarKeyValueControl({ filter }) {
+  if (filter.kind === "text") {
+    return /* @__PURE__ */ jsx(TextFilterValueControl, { filter });
+  }
+  if (filter.kind === "lookup") {
+    return /* @__PURE__ */ jsx(LookupFilterValueControl, { filter });
+  }
+  if (filter.kind === "lookup-multi") {
+    return /* @__PURE__ */ jsx(LookupMultiFilterValueControl, { filter });
+  }
+  if (filter.kind === "enum") {
+    return /* @__PURE__ */ jsx(EnumFilterValueControl, { filter });
+  }
+  if (filter.kind === "boolean") {
+    return /* @__PURE__ */ jsx(BooleanFilterValueControl, { filter });
+  }
+  if (filter.kind === "select-multi") {
+    return /* @__PURE__ */ jsx(SelectMultiFilterValueControl, { filter });
+  }
+  if (filter.kind === "multi") {
+    return /* @__PURE__ */ jsx(MultiFilterField, { filter, grow: true });
+  }
+  if (filter.kind === "nested-multi") {
+    return /* @__PURE__ */ jsx(NestedMultiFilterField, { filter, grow: true });
+  }
+  return /* @__PURE__ */ jsx(NumberFilterField, { filter, grow: true });
+}
+function filterInputId(filter) {
+  return `filterbar-overflow-${filter.key}`;
+}
+function valueInputClassName(disabled) {
+  return cn(
+    "h-8 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring",
+    disabled && "cursor-not-allowed opacity-60"
+  );
+}
+function TextFilterValueControl({ filter }) {
+  const [draft, setDraft] = useDebouncedTextDraft(filter.value, filter.onChange);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: filterInputId(filter),
+      type: "text",
+      "aria-label": filter.label,
+      className: valueInputClassName(filter.disabled),
+      placeholder: filter.placeholder ?? "Filter...",
+      value: draft,
+      disabled: filter.disabled,
+      onChange: (event) => setDraft(event.target.value)
+    }
+  );
+}
+function LookupFilterValueControl({ filter }) {
+  const [draft, setDraft] = useDebouncedTextDraft(filter.value, filter.onChange);
+  const listId = `${filter.key}-overflow-lookup-options`;
+  if (filter.inputType === "date") {
+    return /* @__PURE__ */ jsx(
+      DateTimePicker,
+      {
+        id: filterInputId(filter),
+        "aria-label": filter.label,
+        className: "w-full",
+        inputClassName: valueInputClassName(filter.disabled),
+        buttonClassName: "right-1",
+        placeholder: filter.placeholder ?? "Filter...",
+        value: draft,
+        list: listId,
+        disabled: filter.disabled,
+        onChange: setDraft
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
       {
-        type: "button",
-        variant: "default",
-        size: "sm",
-        className: "h-8 px-3 text-xs",
-        onClick: () => applyRange(draftFrom, draftTo),
-        children: "Apply"
+        id: filterInputId(filter),
+        type: filter.inputType === "number" ? "number" : "text",
+        "aria-label": filter.label,
+        className: valueInputClassName(filter.disabled),
+        placeholder: filter.placeholder ?? "Filter...",
+        value: draft,
+        list: listId,
+        disabled: filter.disabled,
+        onChange: (event) => setDraft(event.target.value)
       }
-    ) })
-  ] }) });
+    ),
+    /* @__PURE__ */ jsx("datalist", { id: listId, children: filter.options.map((option) => /* @__PURE__ */ jsx(
+      "option",
+      {
+        value: option.value,
+        label: option.label ?? option.value,
+        disabled: option.disabled
+      },
+      option.value
+    )) })
+  ] });
+}
+function LookupMultiFilterValueControl({ filter }) {
+  return /* @__PURE__ */ jsx(
+    MultiSelect,
+    {
+      options: filter.options.map((option) => ({
+        value: option.value,
+        label: option.label ?? option.value,
+        ...option.disabled !== void 0 ? { disabled: option.disabled } : {},
+        ...option.title !== void 0 ? { title: option.title } : {}
+      })),
+      value: filter.value,
+      onChange: filter.onChange,
+      placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+      ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {},
+      triggerClassName: "h-8 w-full rounded-md border border-input bg-background px-2 text-sm shadow-none",
+      menuClassName: "left-auto right-0"
+    }
+  );
+}
+function EnumFilterValueControl({ filter }) {
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      id: filterInputId(filter),
+      "aria-label": filter.label,
+      className: "h-8 w-full rounded-md border border-input bg-background px-2 text-sm shadow-none",
+      value: filter.value,
+      placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+      disabled: filter.disabled,
+      onChange: (event) => filter.onChange(event.target.value),
+      options: filter.options.map((option) => ({
+        value: option.value,
+        label: option.label ?? option.value
+      }))
+    }
+  );
+}
+function BooleanFilterValueControl({ filter }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex h-8 items-center", children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: filterInputId(filter),
+      type: "checkbox",
+      "aria-label": filter.label,
+      className: "h-4 w-4 accent-primary",
+      checked: filter.value,
+      disabled: filter.disabled,
+      onChange: (event) => filter.onChange(event.target.checked)
+    }
+  ) });
+}
+function SelectMultiFilterValueControl({ filter }) {
+  return /* @__PURE__ */ jsx(
+    MultiSelect,
+    {
+      options: filter.options,
+      value: filter.value,
+      onChange: filter.onChange,
+      placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+      ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {},
+      triggerClassName: "h-8 w-full rounded-md border border-input bg-background px-2 text-sm shadow-none",
+      menuClassName: "left-auto right-0"
+    }
+  );
+}
+function FilterBarRangePanel({
+  kind,
+  label,
+  from = "",
+  to = "",
+  onApply,
+  presets,
+  timeEnabled,
+  timeZone,
+  timeZones,
+  fromPlaceholder,
+  toPlaceholder,
+  emptyLabel
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "w-72 p-3 text-popover-foreground", children: /* @__PURE__ */ jsx(
+    TimeRange,
+    {
+      kind,
+      label,
+      align: "left",
+      from,
+      to,
+      onApply,
+      ...presets ? { presets } : {},
+      ...timeEnabled !== void 0 ? { timeEnabled } : {},
+      ...timeZone ? { timeZone } : {},
+      ...timeZones ? { timeZones } : {},
+      ...fromPlaceholder ? { fromPlaceholder } : {},
+      ...toPlaceholder ? { toPlaceholder } : {},
+      ...emptyLabel ? { emptyLabel } : {},
+      panelClassName: "left-0 right-auto"
+    }
+  ) });
 }
 function EnumFilterField({ filter, grow }) {
   return /* @__PURE__ */ jsxs(
@@ -245,7 +683,7 @@ function SearchField({ search }) {
         search.className
       ),
       children: [
-        draft.trim() ? /* @__PURE__ */ jsx("span", { className: "mr-2 whitespace-nowrap text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: search.ariaLabel ?? "Search" }) : /* @__PURE__ */ jsx(Icon, { name: "codicon:search", className: "mr-2 shrink-0 text-muted-foreground" }),
+        draft.trim() ? /* @__PURE__ */ jsx("span", { className: "mr-2 whitespace-nowrap text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: search.ariaLabel ?? "Search" }) : /* @__PURE__ */ jsx(Icon, { icon: UiSearch, className: "mr-2 shrink-0 text-muted-foreground" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -435,13 +873,7 @@ function NumberFilterField({ filter, grow }) {
             ),
             children: [
               /* @__PURE__ */ jsx("span", { className: "truncate", children: summary }),
-              /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  name: open ? "codicon:chevron-up" : "codicon:chevron-down",
-                  className: "text-muted-foreground"
-                }
-              )
+              /* @__PURE__ */ jsx(Icon, { icon: open ? UiChevronUp : UiChevronDown, className: "text-muted-foreground" })
             ]
           }
         ),
@@ -682,13 +1114,7 @@ function MultiFilterField({ filter, grow }) {
             ),
             children: [
               /* @__PURE__ */ jsx("span", { className: "truncate", children: summary }),
-              /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  name: open ? "codicon:chevron-up" : "codicon:chevron-down",
-                  className: "text-muted-foreground"
-                }
-              )
+              /* @__PURE__ */ jsx(Icon, { icon: open ? UiChevronUp : UiChevronDown, className: "text-muted-foreground" })
             ]
           }
         ),
@@ -707,7 +1133,7 @@ function MultiFilterField({ filter, grow }) {
             )
           ] }),
           showOptionFilter && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2 rounded-md border border-input bg-background px-2", children: [
-            /* @__PURE__ */ jsx(Icon, { name: "codicon:search", className: "shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(Icon, { icon: UiSearch, className: "shrink-0 text-muted-foreground" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -798,7 +1224,7 @@ function MultiFilterPanel({
           )
         ] }),
         showOptionFilter && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2 rounded-md border border-input bg-background px-2", children: [
-          /* @__PURE__ */ jsx(Icon, { name: "codicon:search", className: "shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(Icon, { icon: UiSearch, className: "shrink-0 text-muted-foreground" }),
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -945,7 +1371,7 @@ function NestedMultiFilterPanel({
                       "/",
                       group.options.length
                     ] }),
-                    /* @__PURE__ */ jsx(Icon, { name: "codicon:chevron-right", className: "shrink-0 text-muted-foreground" })
+                    /* @__PURE__ */ jsx(Icon, { icon: UiChevronRight, className: "shrink-0 text-muted-foreground" })
                   ]
                 },
                 group.groupKey
@@ -1104,13 +1530,7 @@ function NestedMultiFilterField({
             ),
             children: [
               /* @__PURE__ */ jsx("span", { className: "truncate", children: summary }),
-              /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  name: open ? "codicon:chevron-up" : "codicon:chevron-down",
-                  className: "text-muted-foreground"
-                }
-              )
+              /* @__PURE__ */ jsx(Icon, { icon: open ? UiChevronUp : UiChevronDown, className: "text-muted-foreground" })
             ]
           }
         ),
@@ -1171,7 +1591,7 @@ function NestedMultiFilterField({
                             "/",
                             group.options.length
                           ] }),
-                          /* @__PURE__ */ jsx(Icon, { name: "codicon:chevron-right", className: "shrink-0 text-muted-foreground" })
+                          /* @__PURE__ */ jsx(Icon, { icon: UiChevronRight, className: "shrink-0 text-muted-foreground" })
                         ]
                       },
                       group.groupKey
@@ -1295,118 +1715,33 @@ function RangeControlButton({
   from = "",
   to = "",
   onApply,
-  presets: _presets,
+  presets,
+  timeEnabled,
+  timeZone,
+  timeZones,
   fromPlaceholder,
   toPlaceholder,
   emptyLabel,
   className
 }) {
-  const rootRef = useRef(null);
-  const triggerRef = useRef(null);
-  const fromInputRef = useRef(null);
-  const toInputRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const [draftFrom, setDraftFrom] = useState(from);
-  const [draftTo, setDraftTo] = useState(to);
-  useDismissablePopup(open, rootRef, triggerRef, () => setOpen(false));
-  useEffect(() => {
-    if (open) {
-      setDraftFrom(from);
-      setDraftTo(to);
+  return /* @__PURE__ */ jsx(
+    TimeRange,
+    {
+      kind,
+      label,
+      from,
+      to,
+      onApply,
+      ...presets ? { presets } : {},
+      ...timeEnabled !== void 0 ? { timeEnabled } : {},
+      ...timeZone ? { timeZone } : {},
+      ...timeZones ? { timeZones } : {},
+      ...fromPlaceholder ? { fromPlaceholder } : {},
+      ...toPlaceholder ? { toPlaceholder } : {},
+      ...emptyLabel ? { emptyLabel } : {},
+      ...className ? { className } : {}
     }
-  }, [from, open, to]);
-  const buttonLabel = formatRangeLabel(kind, from, to, emptyLabel);
-  function applyRange(nextFrom, nextTo) {
-    onApply(
-      kind === "time" ? normalizeDateMath(nextFrom) : nextFrom.trim(),
-      kind === "time" ? normalizeDateMath(nextTo) : nextTo.trim()
-    );
-    setOpen(false);
-  }
-  function clearRange() {
-    setDraftFrom("");
-    setDraftTo("");
-    onApply("", "");
-    setOpen(false);
-  }
-  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative", className), children: [
-    /* @__PURE__ */ jsxs(
-      Button,
-      {
-        ref: triggerRef,
-        type: "button",
-        variant: "outline",
-        size: "sm",
-        "aria-label": `${label} filter`,
-        "aria-expanded": open,
-        "aria-haspopup": "dialog",
-        onClick: () => setOpen((current) => !current),
-        className: "h-7 w-fit max-w-[11rem] min-w-0 gap-2 px-2 text-xs font-normal",
-        children: [
-          /* @__PURE__ */ jsx(Icon, { name: "codicon:calendar", className: "text-muted-foreground text-[14px]" }),
-          /* @__PURE__ */ jsx("span", { className: "truncate font-normal tabular-nums", children: buttonLabel })
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-[calc(100%+0.375rem)] z-50 w-72 rounded-md border border-border bg-popover text-popover-foreground shadow-md shadow-black/5 outline-none", children: /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: label }),
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsx("label", { className: "text-[10px] text-muted-foreground", children: "From" }),
-          /* @__PURE__ */ jsx(
-            RangeInput,
-            {
-              inputRef: fromInputRef,
-              kind,
-              ariaLabel: `${label} from`,
-              placeholder: fromPlaceholder ?? (kind === "date" ? "" : "now-24h"),
-              value: draftFrom,
-              onChange: setDraftFrom
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsx("label", { className: "text-[10px] text-muted-foreground", children: "To" }),
-          /* @__PURE__ */ jsx(
-            RangeInput,
-            {
-              inputRef: toInputRef,
-              kind,
-              ariaLabel: `${label} to`,
-              placeholder: toPlaceholder ?? (kind === "date" ? "" : "now"),
-              value: draftTo,
-              onChange: setDraftTo
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-3 flex justify-between gap-2", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            variant: "ghost",
-            size: "sm",
-            className: "h-8 px-3 text-xs",
-            disabled: !from && !to,
-            onClick: clearRange,
-            children: "Clear"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            variant: "default",
-            size: "sm",
-            className: "h-8 px-3 text-xs",
-            onClick: () => applyRange(draftFrom, draftTo),
-            children: "Apply"
-          }
-        )
-      ] })
-    ] }) })
-  ] });
+  );
 }
 function useDismissablePopup(open, rootRef, triggerRef, onClose) {
   useEffect(() => {
@@ -1617,69 +1952,169 @@ function nextFilterMode(mode) {
   if (mode === "exclude") return "neutral";
   return "include";
 }
-function normalizeDateMath(value) {
-  const trimmed = value.trim();
-  if (!trimmed) return "";
-  if (trimmed === "now" || trimmed.startsWith("now")) return trimmed;
-  if (/^[+-]\d/.test(trimmed)) return `now${trimmed}`;
-  return trimmed;
+function clearFilterBarFilter(filter) {
+  if (filter.kind === "text" || filter.kind === "lookup" || filter.kind === "enum") {
+    filter.onChange("");
+    return;
+  }
+  if (filter.kind === "lookup-multi" || filter.kind === "select-multi") {
+    filter.onChange([]);
+    return;
+  }
+  if (filter.kind === "number") {
+    filter.onChange({});
+    return;
+  }
+  if (filter.kind === "boolean") {
+    filter.onChange(false);
+    return;
+  }
+  filter.onChange({});
 }
-function formatRangeLabel(kind, from, to, emptyLabel) {
-  const trimmedFrom = from.trim();
-  const trimmedTo = to.trim();
-  if (!trimmedFrom && !trimmedTo) {
-    return emptyLabel ?? (kind === "date" ? "Any date" : "now-24h");
+function isFilterBarFilterActive(filter) {
+  if (filter.kind === "text" || filter.kind === "lookup" || filter.kind === "enum") {
+    return String(filter.value ?? "").trim() !== "";
   }
-  if (kind === "time") {
-    const normalizedFrom = normalizeDateMath(trimmedFrom);
-    const normalizedTo = normalizeDateMath(trimmedTo || "now");
-    if (!normalizedFrom) return normalizedTo;
-    if (normalizedTo === "now") return normalizedFrom;
-    return `${normalizedFrom} → ${normalizedTo}`;
+  if (filter.kind === "lookup-multi" || filter.kind === "select-multi") {
+    return filter.value.length > 0;
   }
-  if (trimmedFrom && trimmedTo && trimmedFrom === trimmedTo) {
-    return trimmedFrom;
+  if (filter.kind === "number") {
+    return String(filter.value.min ?? "").trim() !== "" || String(filter.value.max ?? "").trim() !== "";
   }
-  if (!trimmedFrom) return trimmedTo;
-  if (!trimmedTo) return trimmedFrom;
-  return `${trimmedFrom} → ${trimmedTo}`;
+  if (filter.kind === "boolean") return filter.value;
+  return Object.keys(filter.value).length > 0;
 }
-function RangeInput({
-  inputRef,
-  kind,
-  ariaLabel,
-  value,
-  onChange,
-  placeholder
-}) {
-  if (kind === "date") {
-    return /* @__PURE__ */ jsx(
-      DatePicker,
-      {
-        ref: inputRef,
-        "aria-label": ariaLabel,
-        value,
-        onChange,
-        placeholder,
-        inputClassName: "pr-8"
-      }
-    );
+function createFilterValueMap(filters) {
+  return Object.fromEntries(filters.map((filter) => [filter.key, filterBarFilterValue(filter)]));
+}
+function filterBarFilterValue(filter) {
+  return filter.value;
+}
+function filterWithStagedValue(filter, value, onChange) {
+  if (filter.kind === "text") {
+    return {
+      ...filter,
+      value: String(value ?? ""),
+      onChange: (next) => onChange(next)
+    };
   }
-  return /* @__PURE__ */ jsx(
-    DateTimePicker,
-    {
-      ref: inputRef,
-      "aria-label": ariaLabel,
-      inputClassName: "pr-8",
-      placeholder,
-      value,
-      onChange
-    }
-  );
+  if (filter.kind === "lookup") {
+    return {
+      ...filter,
+      value: String(value ?? ""),
+      onChange: (next) => onChange(next)
+    };
+  }
+  if (filter.kind === "lookup-multi") {
+    return {
+      ...filter,
+      value: Array.isArray(value) ? value.map(String) : [],
+      onChange: (next) => onChange(next)
+    };
+  }
+  if (filter.kind === "multi") {
+    return {
+      ...filter,
+      value: isMultiFilterValue(value) ? value : {},
+      onChange: (next) => onChange(next)
+    };
+  }
+  if (filter.kind === "nested-multi") {
+    return {
+      ...filter,
+      value: isMultiFilterValue(value) ? value : {},
+      onChange: (next) => onChange(next)
+    };
+  }
+  if (filter.kind === "select-multi") {
+    return {
+      ...filter,
+      value: Array.isArray(value) ? value.map(String) : [],
+      onChange: (next) => onChange(next)
+    };
+  }
+  if (filter.kind === "number") {
+    return {
+      ...filter,
+      value: isNumberFilterValue(value) ? value : {},
+      onChange: (next) => onChange(next)
+    };
+  }
+  if (filter.kind === "enum") {
+    return {
+      ...filter,
+      value: String(value ?? ""),
+      onChange: (next) => onChange(next)
+    };
+  }
+  return {
+    ...filter,
+    value: Boolean(value),
+    onChange: (next) => onChange(next)
+  };
+}
+function applyStagedFilterValues(filters, stagedValues) {
+  for (const filter of filters) {
+    const next = stagedValues[filter.key] ?? filterBarFilterValue(filter);
+    if (sameFilterBarValue(filterBarFilterValue(filter), next)) continue;
+    applyFilterBarValue(filter, next);
+  }
+}
+function applyFilterBarValue(filter, value) {
+  if (filter.kind === "text" || filter.kind === "lookup" || filter.kind === "enum") {
+    filter.onChange(String(value ?? ""));
+    return;
+  }
+  if (filter.kind === "lookup-multi" || filter.kind === "select-multi") {
+    filter.onChange(Array.isArray(value) ? value.map(String) : []);
+    return;
+  }
+  if (filter.kind === "number") {
+    filter.onChange(isNumberFilterValue(value) ? value : {});
+    return;
+  }
+  if (filter.kind === "boolean") {
+    filter.onChange(Boolean(value));
+    return;
+  }
+  filter.onChange(isMultiFilterValue(value) ? value : {});
+}
+function sameFilterBarValue(left, right) {
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+function isNumberFilterValue(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isMultiFilterValue(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function calculateVisibleFilterCount(widths, availableWidth) {
+  if (widths.length === 0) return 0;
+  let used = 0;
+  let count = 0;
+  for (const width of widths) {
+    const nextUsed = used + (count > 0 ? FILTER_BAR_GAP_PX : 0) + width;
+    if (nextUsed > availableWidth) break;
+    used = nextUsed;
+    count += 1;
+  }
+  return count;
+}
+function sumFilterWidths(widths) {
+  if (widths.length === 0) return 0;
+  return widths.reduce((total, width) => total + width, 0) + (widths.length - 1) * FILTER_BAR_GAP_PX;
+}
+function estimateFilterWidth(filter) {
+  if (filter.kind === "boolean") return Math.max(88, filter.label.length * 8 + 40);
+  if (filter.kind === "multi" || filter.kind === "nested-multi") return 136;
+  if (filter.kind === "number") return 152;
+  return Math.max(144, filter.label.length * 8 + 96);
 }
 export {
   FilterBar,
   FilterBarFilterPanel,
-  FilterBarRangePanel
+  FilterBarRangePanel,
+  clearFilterBarFilter,
+  isFilterBarFilterActive
 };
 //# sourceMappingURL=FilterBar.js.map