@flanksource/clicky-ui 0.3.10 → 0.3.11

package/dist/components/FilterBar.cjs

@@ -4,6 +4,9 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const react$1 = require("@floating-ui/react");
 const FilterPill = require("../data/FilterPill.cjs");
+const filterBarContext = require("./filter-bar-context.cjs");
+const filterBarFieldUtils = require("./filter-bar-field-utils.cjs");
+const filterBarMulti = require("./filter-bar-multi.cjs");
 const filterBarUtils = require("./filter-bar-utils.cjs");
 const Icon = require("../data/Icon.cjs");
 const timestampFormat = require("../data/cells/timestamp-format.cjs");
@@ -21,12 +24,8 @@ const UiClose = require("../icons/components/UiClose.cjs");
 const UiChevronUp = require("../icons/components/UiChevronUp.cjs");
 const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
 const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
-const FILTER_INPUT_DEBOUNCE_MS = 500;
 const FILTER_BAR_GAP_PX = 8;
 const FILTER_BAR_OVERFLOW_TRIGGER_ESTIMATE_PX = 44;
-const FilterBarContext = react.createContext({
-  autoSubmit: true
-});
 function FilterBar({
   search,
   filters,
@@ -137,7 +136,7 @@ function FilterBar({
     }
     filterNodeRefs.current.set(key, node);
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: utils.cn(
@@ -213,7 +212,7 @@ function FilterBarFilterPanel({
   autoSubmit = true
 }) {
   const contextValue = react.useMemo(() => ({ autoSubmit }), [autoSubmit]);
-  return /* @__PURE__ */ jsxRuntime.jsx(FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarFilterPanelContent, { filter, chrome }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarFilterPanelContent, { filter, chrome }) });
 }
 function FilterBarFilterPanelContent({
   filter,
@@ -222,7 +221,7 @@ function FilterBarFilterPanelContent({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     filter.kind === "lookup" && /* @__PURE__ */ jsxRuntime.jsx(LookupFilterField, { filter, grow: true }),
     filter.kind === "lookup-multi" && /* @__PURE__ */ jsxRuntime.jsx(LookupMultiFilterField, { filter, grow: true }),
-    filter.kind === "multi" && /* @__PURE__ */ jsxRuntime.jsx(MultiFilterPanel, { filter, chrome }),
+    filter.kind === "multi" && /* @__PURE__ */ jsxRuntime.jsx(filterBarMulti.MultiFilterPanel, { filter, chrome }),
     filter.kind === "nested-multi" && /* @__PURE__ */ jsxRuntime.jsx(NestedMultiFilterPanel, { filter, chrome }),
     filter.kind === "select-multi" && /* @__PURE__ */ jsxRuntime.jsx(SelectMultiFilterField, { filter, grow: true }),
     filter.kind === "number" && /* @__PURE__ */ jsxRuntime.jsx(NumberFilterPanel, { filter, chrome }),
@@ -239,7 +238,7 @@ function renderFilterField(filter, grow) {
     return /* @__PURE__ */ jsxRuntime.jsx(LookupMultiFilterField, { filter, grow });
   }
   if (filter.kind === "multi") {
-    return /* @__PURE__ */ jsxRuntime.jsx(MultiFilterField, { filter, grow });
+    return /* @__PURE__ */ jsxRuntime.jsx(filterBarMulti.MultiFilterField, { filter, grow });
   }
   if (filter.kind === "nested-multi") {
     return /* @__PURE__ */ jsxRuntime.jsx(NestedMultiFilterField, { filter, grow });
@@ -382,7 +381,7 @@ function OverflowFiltersMenu({
                             /* @__PURE__ */ jsxRuntime.jsx(
                               Icon.LabelIcon,
                               {
-                                icon: sizedIcon(filter.icon, 12),
+                                icon: filterBarFieldUtils.sizedIcon(filter.icon, 12),
                                 className: "text-[12px] normal-case"
                               }
                             ),
@@ -391,7 +390,7 @@ function OverflowFiltersMenu({
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden text-sm text-muted-foreground md:block", children: "=" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 min-w-0 overflow-visible md:col-span-1", children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarContext.Provider, { value: { autoSubmit: false }, children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarKeyValueControl, { filter }) }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 min-w-0 overflow-visible md:col-span-1", children: /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: { autoSubmit: false }, children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarKeyValueControl, { filter }) }) }),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "button",
                         {
@@ -464,7 +463,7 @@ function FilterBarKeyValueControl({ filter }) {
     return /* @__PURE__ */ jsxRuntime.jsx(SelectMultiFilterValueControl, { filter });
   }
   if (filter.kind === "multi") {
-    return /* @__PURE__ */ jsxRuntime.jsx(MultiFilterField, { filter, grow: true });
+    return /* @__PURE__ */ jsxRuntime.jsx(filterBarMulti.MultiFilterField, { filter, grow: true });
   }
   if (filter.kind === "nested-multi") {
     return /* @__PURE__ */ jsxRuntime.jsx(NestedMultiFilterField, { filter, grow: true });
@@ -544,6 +543,7 @@ function LookupFilterValueControl({ filter }) {
       value: filter.value,
       onChange: filter.onChange,
       allowCustomValue: false,
+      size: "sm",
       className: "w-full",
       ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
       ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {}
@@ -560,6 +560,7 @@ function LookupMultiFilterValueControl({ filter }) {
       value: filter.value,
       onChange: filter.onChange,
       allowCustomValue: false,
+      size: "sm",
       className: "w-full",
       ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
       ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {}
@@ -581,6 +582,7 @@ function EnumFilterValueControl({ filter }) {
       value: filter.value,
       onChange: filter.onChange,
       allowCustomValue: false,
+      size: "sm",
       ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
       className: "w-full",
       ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {}
@@ -654,13 +656,14 @@ function EnumFilterField({ filter, grow }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Combobox.Combobox,
     {
-      ...comboboxLabelProps(filter),
+      ...filterBarFieldUtils.comboboxLabelProps(filter),
       options: enumOptionsToCombobox(filter.options),
       value: filter.value,
       onChange: filter.onChange,
       allowCustomValue: false,
+      size: "sm",
       ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
-      className: utils.cn(lookupFieldWidthClass(grow), filter.className),
+      className: utils.cn(filterBarFieldUtils.lookupFieldWidthClass(grow), filter.className),
       ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {}
     }
   );
@@ -754,23 +757,6 @@ function FilterFieldLabel({ icon, label }) {
     label
   ] });
 }
-function sizedIcon(icon, px) {
-  if (!react.isValidElement(icon)) return icon;
-  const el = icon;
-  return react.cloneElement(el, {
-    style: { width: `${px}px`, height: `${px}px`, ...el.props.style }
-  });
-}
-function comboboxLabelProps(filter) {
-  if (filter.icon == null) return { label: filter.label };
-  return {
-    label: /* @__PURE__ */ jsxRuntime.jsx("span", { title: filter.label, className: "inline-flex items-center text-[10px]", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: sizedIcon(filter.icon, 10), className: "normal-case" }) }),
-    ariaLabel: filter.label
-  };
-}
-function lookupFieldWidthClass(grow) {
-  return grow ? "min-w-[12rem] max-w-[18rem] flex-1" : "min-w-[11rem] max-w-[15rem] shrink-0";
-}
 function LookupFilterField({ filter, grow }) {
   const [draft, setDraft] = useDebouncedTextDraft(filter.value, filter.onChange);
   if (filter.inputType === "date" || filter.inputType === "number") {
@@ -781,7 +767,7 @@ function LookupFilterField({ filter, grow }) {
         title: dateTitle ?? filter.description,
         className: utils.cn(
           "flex h-8 items-center gap-2 rounded-md border border-input bg-muted/30 pl-2 pr-2 text-xs",
-          lookupFieldWidthClass(grow),
+          filterBarFieldUtils.lookupFieldWidthClass(grow),
           filter.disabled && "opacity-60",
           filter.className
         ),
@@ -818,12 +804,13 @@ function LookupFilterField({ filter, grow }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Combobox.Combobox,
     {
-      ...comboboxLabelProps(filter),
+      ...filterBarFieldUtils.comboboxLabelProps(filter),
       options: lookupOptionsToCombobox(filter.options),
       value: filter.value,
       onChange: filter.onChange,
       allowCustomValue: false,
-      className: utils.cn(lookupFieldWidthClass(grow), filter.className),
+      size: "sm",
+      className: utils.cn(filterBarFieldUtils.lookupFieldWidthClass(grow), filter.className),
       ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
       ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {}
     }
@@ -837,12 +824,13 @@ function LookupMultiFilterField({
     Combobox.Combobox,
     {
       multiple: true,
-      ...comboboxLabelProps(filter),
+      ...filterBarFieldUtils.comboboxLabelProps(filter),
       options: lookupOptionsToCombobox(filter.options),
       value: filter.value,
       onChange: filter.onChange,
       allowCustomValue: false,
-      className: utils.cn(lookupFieldWidthClass(grow), filter.className),
+      size: "sm",
+      className: utils.cn(filterBarFieldUtils.lookupFieldWidthClass(grow), filter.className),
       ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
       ...filter.onSearch !== void 0 ? { onSearch: filter.onSearch } : {},
       ...filter.loading !== void 0 ? { loading: filter.loading } : {},
@@ -1094,346 +1082,13 @@ function NumberFilterPanel({
     }
   );
 }
-const MULTI_FILTER_OPTION_ROW_HEIGHT = 30;
-const MULTI_FILTER_OPTION_LIST_HEIGHT = 288;
-const MULTI_FILTER_OPTION_OVERSCAN = 6;
-function MultiFilterField({ filter, grow }) {
-  const [open, setOpen] = react.useState(false);
-  const [optionQuery, setOptionQuery] = react.useState("");
-  const [optionScrollTop, setOptionScrollTop] = react.useState(0);
-  const [searchOptions, setSearchOptions] = react.useState([]);
-  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);
-  const popup = useAnchoredPopup(open, setOpen);
-  const onSearch = filter.onSearch;
-  react.useEffect(() => {
-    if (!onSearch) return;
-    const query = optionQuery.trim();
-    if (!query) {
-      setSearchOptions([]);
-      return;
-    }
-    let cancelled = false;
-    const handle = setTimeout(() => {
-      Promise.resolve(onSearch(query)).then((opts) => {
-        if (!cancelled && Array.isArray(opts)) setSearchOptions(opts);
-      }).catch(() => {
-        if (!cancelled) setSearchOptions([]);
-      });
-    }, 250);
-    return () => {
-      cancelled = true;
-      clearTimeout(handle);
-    };
-  }, [onSearch, optionQuery]);
-  const summary = summarizeMultiFilter(filter.label, draft);
-  const allowCustomValue = Boolean(filter.allowCustomValue);
-  const baseOptions = react.useMemo(() => {
-    if (!allowCustomValue) return filter.options;
-    const known = new Set(filter.options.map((o) => o.value));
-    const pinned = Object.keys(draft).filter((v) => !known.has(v)).map((v) => ({ value: v, label: v }));
-    return mergeMultiSelectOptions(pinned, filter.options);
-  }, [allowCustomValue, filter.options, draft]);
-  const showOptionFilter = filter.truncated || Boolean(onSearch) || allowCustomValue || filter.options.length > 7;
-  const visibleOptions = react.useMemo(() => {
-    const query = optionQuery.trim();
-    if (!query) return baseOptions;
-    if (onSearch) {
-      const selectedHead = baseOptions.filter((o) => draft[o.value] !== void 0);
-      return mergeMultiSelectOptions(selectedHead, searchOptions);
-    }
-    const lowered = query.toLowerCase();
-    return baseOptions.filter(
-      (option) => multiSelectOptionText(option).toLowerCase().includes(lowered)
-    );
-  }, [baseOptions, searchOptions, optionQuery, onSearch, draft]);
-  react.useEffect(() => {
-    setOptionScrollTop(0);
-  }, [optionQuery]);
-  const optionWindow = react.useMemo(() => {
-    const visibleRows = Math.ceil(MULTI_FILTER_OPTION_LIST_HEIGHT / MULTI_FILTER_OPTION_ROW_HEIGHT);
-    const start = Math.max(
-      0,
-      Math.floor(optionScrollTop / MULTI_FILTER_OPTION_ROW_HEIGHT) - MULTI_FILTER_OPTION_OVERSCAN
-    );
-    const end = Math.min(
-      visibleOptions.length,
-      start + visibleRows + MULTI_FILTER_OPTION_OVERSCAN * 2
-    );
-    return {
-      options: visibleOptions.slice(start, end),
-      totalHeight: visibleOptions.length * MULTI_FILTER_OPTION_ROW_HEIGHT,
-      top: start * MULTI_FILTER_OPTION_ROW_HEIGHT
-    };
-  }, [optionScrollTop, visibleOptions]);
-  const trimmedQuery = optionQuery.trim();
-  const canAddCustom = allowCustomValue && trimmedQuery !== "" && !visibleOptions.some((o) => o.value === trimmedQuery);
-  const addCustom = () => {
-    setDraft(updateMultiFilterValue(draft, trimmedQuery, "include"));
-    setOptionQuery("");
-  };
-  const moreCount = filter.truncated && filter.total ? Math.max(filter.total - filter.options.length, 0) : 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      title: filter.description,
-      className: utils.cn(
-        "inline-flex min-w-0",
-        grow ? "min-w-[8rem] max-w-[12rem] flex-1" : "shrink-0",
-        filter.disabled && "opacity-60",
-        filter.className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          button.Button,
-          {
-            ref: popup.refs.setReference,
-            type: "button",
-            variant: "outline",
-            size: "sm",
-            "aria-label": `${filter.label} filter`,
-            disabled: filter.disabled,
-            className: utils.cn(
-              "min-w-0 gap-2 font-normal",
-              grow ? "w-full max-w-[12rem] justify-between" : "w-auto max-w-[8.5rem] px-2.5",
-              summary === filter.label && "text-muted-foreground"
-            ),
-            ...popup.getReferenceProps(),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: filter.icon, className: "text-[14px] text-muted-foreground" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: summary }),
-              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: open ? UiChevronUp.UiChevronUp : UiChevronDown.UiChevronDown, className: "text-muted-foreground" })
-            ]
-          }
-        ),
-        open && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context: popup.context, modal: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            ref: popup.refs.setFloating,
-            role: "dialog",
-            "aria-label": filter.label,
-            style: { ...popup.floatingStyles, zIndex: popup.floatingZ },
-            className: "min-w-[18rem] max-w-[22rem] rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5",
-            ...popup.getFloatingProps(),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "text-[10px] text-primary disabled:text-muted-foreground",
-                    onClick: () => setDraft({}),
-                    disabled: Object.keys(draft).length === 0,
-                    children: "Clear all"
-                  }
-                )
-              ] }),
-              showOptionFilter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-2 rounded-md border border-input bg-background px-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSearch.UiSearch, className: "shrink-0 text-muted-foreground" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "search",
-                    "aria-label": `Filter ${filter.label} options`,
-                    className: "h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
-                    placeholder: `Filter ${filter.label.toLowerCase()}`,
-                    value: optionQuery,
-                    onChange: (event) => setOptionQuery(event.target.value)
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: "max-h-72 overflow-auto",
-                  onScroll: (event) => setOptionScrollTop(event.currentTarget.scrollTop),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", style: { height: optionWindow.totalHeight }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { transform: `translateY(${optionWindow.top}px)` }, children: optionWindow.options.map((option) => {
-                      const mode = draft[option.value] ?? "neutral";
-                      const title = option.title ?? multiSelectOptionText(option);
-                      return /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          role: "button",
-                          tabIndex: 0,
-                          "data-filter-option": option.value,
-                          className: "box-border flex items-center rounded-md px-1.5 py-0.5 hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
-                          style: { height: MULTI_FILTER_OPTION_ROW_HEIGHT },
-                          onClick: () => setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode))),
-                          onKeyDown: (event) => {
-                            if (event.key === "Enter" || event.key === " ") {
-                              event.preventDefault();
-                              setDraft(
-                                updateMultiFilterValue(draft, option.value, nextFilterMode(mode))
-                              );
-                            }
-                          },
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            FilterPill.FilterPill,
-                            {
-                              className: "w-full justify-between",
-                              label: option.label,
-                              mode,
-                              title,
-                              togglePosition: "right",
-                              onModeChange: (next) => setDraft(updateMultiFilterValue(draft, option.value, next))
-                            }
-                          )
-                        },
-                        option.value
-                      );
-                    }) }) }),
-                    canAddCustom && /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        role: "button",
-                        tabIndex: 0,
-                        "data-filter-add-custom": trimmedQuery,
-                        className: "rounded-md px-2 py-1 text-sm text-primary hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
-                        onClick: addCustom,
-                        onKeyDown: (event) => {
-                          if (event.key === "Enter" || event.key === " ") {
-                            event.preventDefault();
-                            addCustom();
-                          }
-                        },
-                        children: [
-                          "Add “",
-                          trimmedQuery,
-                          "”"
-                        ]
-                      }
-                    ),
-                    visibleOptions.length === 0 && !canAddCustom && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground", children: "No options found" })
-                  ]
-                }
-              ),
-              moreCount > 0 && !optionQuery.trim() && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 px-1.5 text-[11px] text-muted-foreground", children: [
-                "… and ",
-                moreCount.toLocaleString(),
-                " more",
-                onSearch ? " — type to search all" : ""
-              ] })
-            ]
-          }
-        ) }) })
-      ]
-    }
-  );
-}
-function TriStateMultiSelect({ grow = true, ...rest }) {
-  const filter = { key: rest.label, kind: "multi", ...rest };
-  return /* @__PURE__ */ jsxRuntime.jsx(FilterBarContext.Provider, { value: { autoSubmit: false }, children: /* @__PURE__ */ jsxRuntime.jsx(MultiFilterField, { filter, grow }) });
-}
-function mergeMultiSelectOptions(head, extra) {
-  if (extra.length === 0) return head;
-  const seen = new Set(head.map((o) => o.value));
-  const merged = [...head];
-  for (const option of extra) {
-    if (!seen.has(option.value)) {
-      seen.add(option.value);
-      merged.push(option);
-    }
-  }
-  return merged;
-}
-function MultiFilterPanel({
-  filter,
-  chrome = "full"
-}) {
-  const [optionQuery, setOptionQuery] = react.useState("");
-  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);
-  const showOptionFilter = filter.options.length > 7;
-  const embedded = chrome === "embedded";
-  const visibleOptions = react.useMemo(() => {
-    const query = optionQuery.trim().toLowerCase();
-    if (!query) return filter.options;
-    return filter.options.filter(
-      (option) => multiSelectOptionText(option).toLowerCase().includes(query)
-    );
-  }, [filter.options, optionQuery]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      "data-filter-panel-chrome": chrome,
-      className: utils.cn(
-        "min-w-[18rem] max-w-[22rem] text-popover-foreground",
-        embedded ? "p-0" : "rounded-md border border-border bg-popover p-2 shadow-sm shadow-black/5"
-      ),
-      children: [
-        !embedded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: "text-[10px] text-primary disabled:text-muted-foreground",
-              onClick: () => setDraft({}),
-              disabled: Object.keys(draft).length === 0,
-              children: "Clear all"
-            }
-          )
-        ] }),
-        showOptionFilter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-2 rounded-md border border-input bg-background px-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSearch.UiSearch, className: "shrink-0 text-muted-foreground" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "search",
-              "aria-label": `Filter ${filter.label} options`,
-              className: "h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
-              placeholder: `Filter ${filter.label.toLowerCase()}`,
-              value: optionQuery,
-              onChange: (event) => setOptionQuery(event.target.value)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-72 space-y-0.5 overflow-auto", children: [
-          visibleOptions.map((option) => {
-            const mode = draft[option.value] ?? "neutral";
-            const title = option.title ?? multiSelectOptionText(option);
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                role: "button",
-                tabIndex: 0,
-                "data-filter-option": option.value,
-                className: "rounded-md px-1.5 py-0.5 hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
-                onClick: () => setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode))),
-                onKeyDown: (event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode)));
-                  }
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  FilterPill.FilterPill,
-                  {
-                    className: "w-full justify-between",
-                    label: option.label,
-                    mode,
-                    title,
-                    togglePosition: "right",
-                    onModeChange: (next) => setDraft(updateMultiFilterValue(draft, option.value, next))
-                  }
-                )
-              },
-              option.value
-            );
-          }),
-          visibleOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground", children: "No options found" })
-        ] })
-      ]
-    }
-  );
-}
 function NestedMultiFilterPanel({
   filter,
   chrome = "full"
 }) {
   var _a;
   const [activeGroup, setActiveGroup] = react.useState(((_a = filter.groups[0]) == null ? void 0 : _a.groupKey) ?? null);
-  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);
+  const [draft, setDraft] = filterBarFieldUtils.useDebouncedMultiDraft(filter.value, filter.onChange);
   const groups = filter.groups;
   const embedded = chrome === "embedded";
   const activeGroupData = react.useMemo(
@@ -1555,7 +1210,7 @@ function NestedMultiFilterPanel({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-72 space-y-0.5 overflow-auto", children: [
             activeGroupData.options.map((option) => {
               const mode = draft[option.value] ?? "neutral";
-              const title = option.title ?? multiSelectOptionText(option);
+              const title = option.title ?? filterBarFieldUtils.multiSelectOptionText(option);
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -1563,11 +1218,11 @@ function NestedMultiFilterPanel({
                   tabIndex: 0,
                   "data-filter-option": option.value,
                   className: "rounded-md px-1.5 py-0.5 hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
-                  onClick: () => setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode))),
+                  onClick: () => setDraft(filterBarFieldUtils.updateMultiFilterValue(draft, option.value, filterBarFieldUtils.nextFilterMode(mode))),
                   onKeyDown: (event) => {
                     if (event.key === "Enter" || event.key === " ") {
                       event.preventDefault();
-                      setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode)));
+                      setDraft(filterBarFieldUtils.updateMultiFilterValue(draft, option.value, filterBarFieldUtils.nextFilterMode(mode)));
                     } else if (event.key === "ArrowLeft") {
                       event.preventDefault();
                       setActiveGroup(null);
@@ -1581,7 +1236,7 @@ function NestedMultiFilterPanel({
                       mode,
                       title,
                       togglePosition: "right",
-                      onModeChange: (next) => setDraft(updateMultiFilterValue(draft, option.value, next))
+                      onModeChange: (next) => setDraft(filterBarFieldUtils.updateMultiFilterValue(draft, option.value, next))
                     }
                   )
                 },
@@ -1595,22 +1250,18 @@ function NestedMultiFilterPanel({
     )
   ] });
 }
-function multiSelectOptionText(option) {
-  const label = typeof option.label === "string" ? option.label : "";
-  return [option.value, label, option.title ?? ""].filter(Boolean).join(" ");
-}
 function NestedMultiFilterField({
   filter,
   grow
 }) {
   const [open, setOpen] = react.useState(false);
   const [activeGroup, setActiveGroup] = react.useState(null);
-  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);
+  const [draft, setDraft] = filterBarFieldUtils.useDebouncedMultiDraft(filter.value, filter.onChange);
   const popup = useAnchoredPopup(open, (next) => {
     setOpen(next);
     if (!next) setActiveGroup(null);
   });
-  const summary = summarizeMultiFilter(filter.label, draft);
+  const summary = filterBarFieldUtils.summarizeMultiFilter(filter.label, draft);
   const groups = filter.groups;
   const activeGroupData = react.useMemo(
     () => groups.find((group) => group.groupKey === activeGroup) ?? null,
@@ -1762,7 +1413,7 @@ function NestedMultiFilterField({
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-72 space-y-0.5 overflow-auto", children: [
                       activeGroupData.options.map((option) => {
                         const mode = draft[option.value] ?? "neutral";
-                        const title = option.title ?? multiSelectOptionText(option);
+                        const title = option.title ?? filterBarFieldUtils.multiSelectOptionText(option);
                         return /* @__PURE__ */ jsxRuntime.jsx(
                           "div",
                           {
@@ -1770,12 +1421,12 @@ function NestedMultiFilterField({
                             tabIndex: 0,
                             "data-filter-option": option.value,
                             className: "rounded-md px-1.5 py-0.5 hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
-                            onClick: () => setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode))),
+                            onClick: () => setDraft(filterBarFieldUtils.updateMultiFilterValue(draft, option.value, filterBarFieldUtils.nextFilterMode(mode))),
                             onKeyDown: (event) => {
                               if (event.key === "Enter" || event.key === " ") {
                                 event.preventDefault();
                                 setDraft(
-                                  updateMultiFilterValue(draft, option.value, nextFilterMode(mode))
+                                  filterBarFieldUtils.updateMultiFilterValue(draft, option.value, filterBarFieldUtils.nextFilterMode(mode))
                                 );
                               } else if (event.key === "ArrowLeft") {
                                 event.preventDefault();
@@ -1790,7 +1441,7 @@ function NestedMultiFilterField({
                                 mode,
                                 title,
                                 togglePosition: "right",
-                                onModeChange: (next) => setDraft(updateMultiFilterValue(draft, option.value, next))
+                                onModeChange: (next) => setDraft(filterBarFieldUtils.updateMultiFilterValue(draft, option.value, next))
                               }
                             )
                           },
@@ -1923,62 +1574,8 @@ function useMediaQuery(query) {
   }, [query]);
   return matches;
 }
-function summarizeMultiFilter(label, value) {
-  const includeCount = Object.values(value).filter((mode) => mode === "include").length;
-  const excludeCount = Object.values(value).filter((mode) => mode === "exclude").length;
-  if (includeCount === 0 && excludeCount === 0) {
-    return label;
-  }
-  const counts = [
-    includeCount > 0 ? `+${includeCount}` : null,
-    excludeCount > 0 ? `-${excludeCount}` : null
-  ].filter(Boolean);
-  return `${label} ${counts.join(" ")}`;
-}
-function useDebouncedMultiDraft(value, onChange) {
-  const { autoSubmit } = react.useContext(FilterBarContext);
-  const [draft, setDraft] = react.useState(value);
-  const latestOnChange = react.useRef(onChange);
-  const latestValue = react.useRef(value);
-  const valueKey = multiFilterValueKey(value);
-  react.useEffect(() => {
-    latestOnChange.current = onChange;
-  }, [onChange]);
-  react.useEffect(() => {
-    if (!sameMultiFilterValue(latestValue.current, value)) {
-      latestValue.current = value;
-      setDraft(value);
-      return;
-    }
-    latestValue.current = value;
-  }, [valueKey, value]);
-  react.useEffect(() => {
-    if (sameMultiFilterValue(draft, value)) return;
-    if (!autoSubmit) {
-      latestOnChange.current(draft);
-      return;
-    }
-    const timeoutId = window.setTimeout(() => {
-      latestOnChange.current(draft);
-    }, FILTER_INPUT_DEBOUNCE_MS);
-    return () => window.clearTimeout(timeoutId);
-  }, [autoSubmit, draft, valueKey]);
-  return [draft, setDraft];
-}
-function multiFilterValueKey(value) {
-  return Object.keys(value).sort().map((key) => `${key}:${value[key]}`).join("\0");
-}
-function sameMultiFilterValue(a, b) {
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-  if (aKeys.length !== bKeys.length) return false;
-  for (const key of aKeys) {
-    if (a[key] !== b[key]) return false;
-  }
-  return true;
-}
 function useDebouncedTextDraft(value, onChange) {
-  const { autoSubmit } = react.useContext(FilterBarContext);
+  const { autoSubmit } = react.useContext(filterBarContext.FilterBarContext);
   const [draft, setDraft] = react.useState(value);
   const latestOnChange = react.useRef(onChange);
   react.useEffect(() => {
@@ -1995,13 +1592,13 @@ function useDebouncedTextDraft(value, onChange) {
     }
     const timeoutId = window.setTimeout(() => {
       latestOnChange.current(draft);
-    }, FILTER_INPUT_DEBOUNCE_MS);
+    }, filterBarContext.FILTER_INPUT_DEBOUNCE_MS);
     return () => window.clearTimeout(timeoutId);
   }, [autoSubmit, draft, value]);
   return [draft, setDraft];
 }
 function useDebouncedNumberDraft(value, onChange) {
-  const { autoSubmit } = react.useContext(FilterBarContext);
+  const { autoSubmit } = react.useContext(filterBarContext.FilterBarContext);
   const [draft, setDraft] = react.useState(value);
   const latestOnChange = react.useRef(onChange);
   react.useEffect(() => {
@@ -2018,7 +1615,7 @@ function useDebouncedNumberDraft(value, onChange) {
     }
     const timeoutId = window.setTimeout(() => {
       latestOnChange.current(draft);
-    }, FILTER_INPUT_DEBOUNCE_MS);
+    }, filterBarContext.FILTER_INPUT_DEBOUNCE_MS);
     return () => window.clearTimeout(timeoutId);
   }, [autoSubmit, draft, value]);
   return [draft, setDraft];
@@ -2099,22 +1696,6 @@ function formatNumberValue(value, filter) {
 function formatRawNumber(value) {
   return Number.isInteger(value) ? String(value) : String(Number(value.toFixed(6)));
 }
-function updateMultiFilterValue(current, optionValue, nextMode) {
-  const next = { ...current };
-  if (nextMode === "neutral") {
-    delete next[optionValue];
-    return next;
-  }
-  if (nextMode === "include" || nextMode === "exclude") {
-    next[optionValue] = nextMode;
-  }
-  return next;
-}
-function nextFilterMode(mode) {
-  if (mode === "include") return "exclude";
-  if (mode === "exclude") return "neutral";
-  return "include";
-}
 function createFilterValueMap(filters) {
   return Object.fromEntries(filters.map((filter) => [filter.key, filterBarFilterValue(filter)]));
 }
@@ -2237,12 +1818,13 @@ function sumFilterWidths(widths) {
 }
 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 === "multi") return 176;
+  if (filter.kind === "nested-multi") return 136;
   if (filter.kind === "number") return 152;
   return Math.max(144, filter.label.length * 8 + 96);
 }
+exports.TriStateMultiSelect = filterBarMulti.TriStateMultiSelect;
 exports.FilterBar = FilterBar;
 exports.FilterBarFilterPanel = FilterBarFilterPanel;
 exports.FilterBarRangePanel = FilterBarRangePanel;
-exports.TriStateMultiSelect = TriStateMultiSelect;
 //# sourceMappingURL=FilterBar.cjs.map