@flanksource/clicky-ui 0.3.10 → 0.3.11

package/dist/components/filter-bar-field-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar-field-utils.js","sources":["../../src/components/filter-bar-field-utils.tsx"],"sourcesContent":["import {\n  cloneElement,\n  isValidElement,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport type { FilterMode } from \"../data/FilterPill\";\nimport { LabelIcon, type LabelIconSpec } from \"../data/Icon\";\nimport { FILTER_INPUT_DEBOUNCE_MS, FilterBarContext } from \"./filter-bar-context\";\nimport type { MultiSelectOption } from \"./MultiSelect\";\n\nexport type FilterBarMultiFilterMode = Extract<FilterMode, \"include\" | \"exclude\">;\n\n// mergeMultiSelectOptions concatenates two option lists, deduping by value with\n// the first list (the head) taking precedence on ordering and label.\nexport function mergeMultiSelectOptions(\n  head: MultiSelectOption[],\n  extra: MultiSelectOption[],\n): MultiSelectOption[] {\n  if (extra.length === 0) return head;\n  const seen = new Set(head.map((o) => o.value));\n  const merged = [...head];\n  for (const option of extra) {\n    if (!seen.has(option.value)) {\n      seen.add(option.value);\n      merged.push(option);\n    }\n  }\n  return merged;\n}\n\nexport function multiSelectOptionText(option: MultiSelectOption) {\n  const label = typeof option.label === \"string\" ? option.label : \"\";\n  return [option.value, label, option.title ?? \"\"].filter(Boolean).join(\" \");\n}\n\nexport function summarizeMultiFilter(\n  label: string,\n  value: Record<string, FilterBarMultiFilterMode>,\n): string {\n  const includeCount = Object.values(value).filter((mode) => mode === \"include\").length;\n  const excludeCount = Object.values(value).filter((mode) => mode === \"exclude\").length;\n\n  if (includeCount === 0 && excludeCount === 0) {\n    return label;\n  }\n\n  const counts = [\n    includeCount > 0 ? `+${includeCount}` : null,\n    excludeCount > 0 ? `-${excludeCount}` : null,\n  ].filter(Boolean);\n\n  return `${label} ${counts.join(\" \")}`;\n}\n\nexport function useDebouncedMultiDraft(\n  value: Record<string, FilterBarMultiFilterMode>,\n  onChange: (value: Record<string, FilterBarMultiFilterMode>) => void,\n) {\n  const { autoSubmit } = useContext(FilterBarContext);\n  const [draft, setDraft] = useState(value);\n  const latestOnChange = useRef(onChange);\n  const latestValue = useRef(value);\n  const valueKey = multiFilterValueKey(value);\n\n  useEffect(() => {\n    latestOnChange.current = onChange;\n  }, [onChange]);\n\n  useEffect(() => {\n    if (!sameMultiFilterValue(latestValue.current, value)) {\n      latestValue.current = value;\n      setDraft(value);\n      return;\n    }\n    latestValue.current = value;\n  }, [valueKey, value]);\n\n  useEffect(() => {\n    if (sameMultiFilterValue(draft, value)) return;\n\n    if (!autoSubmit) {\n      latestOnChange.current(draft);\n      return;\n    }\n\n    const timeoutId = window.setTimeout(() => {\n      latestOnChange.current(draft);\n    }, FILTER_INPUT_DEBOUNCE_MS);\n\n    return () => window.clearTimeout(timeoutId);\n  }, [autoSubmit, draft, valueKey]);\n\n  return [draft, setDraft] as const;\n}\n\nfunction multiFilterValueKey(value: Record<string, FilterBarMultiFilterMode>): string {\n  return Object.keys(value)\n    .sort()\n    .map((key) => `${key}:${value[key]}`)\n    .join(\"\\u0000\");\n}\n\nfunction sameMultiFilterValue(\n  a: Record<string, FilterBarMultiFilterMode>,\n  b: Record<string, FilterBarMultiFilterMode>,\n) {\n  const aKeys = Object.keys(a);\n  const bKeys = Object.keys(b);\n  if (aKeys.length !== bKeys.length) return false;\n  for (const key of aKeys) {\n    if (a[key] !== b[key]) return false;\n  }\n  return true;\n}\n\nexport function updateMultiFilterValue(\n  current: Record<string, FilterBarMultiFilterMode>,\n  optionValue: string,\n  nextMode: FilterMode,\n): Record<string, FilterBarMultiFilterMode> {\n  const next = { ...current };\n\n  if (nextMode === \"neutral\") {\n    delete next[optionValue];\n    return next;\n  }\n\n  if (nextMode === \"include\" || nextMode === \"exclude\") {\n    next[optionValue] = nextMode;\n  }\n\n  return next;\n}\n\nexport function nextFilterMode(mode: FilterMode): FilterMode {\n  if (mode === \"include\") return \"exclude\";\n  if (mode === \"exclude\") return \"neutral\";\n  return \"include\";\n}\n\n// sizedIcon constrains a filter icon to `px`. A node icon (e.g. a lucide\n// component, which otherwise renders at its own default 24px) is cloned with an\n// explicit inline width/height — done in clicky-ui via a real style so it never\n// depends on a Tailwind arbitrary class being generated in the consumer's build.\n// A string (runtime/iconify) icon is returned as-is and sized by the wrapper's\n// font-size. An existing inline size on the node wins (consumer override).\nexport function sizedIcon(icon: LabelIconSpec | undefined, px: number): LabelIconSpec | undefined {\n  if (!isValidElement(icon)) return icon;\n  const el = icon as ReactElement<{ style?: CSSProperties }>;\n  return cloneElement(el, {\n    style: { width: `${px}px`, height: `${px}px`, ...el.props.style },\n  });\n}\n\n// comboboxLabelProps maps a filter to the Combobox `label`/`ariaLabel`: when the\n// filter carries an `icon`, the icon replaces the inline text label (with the\n// field name kept as tooltip + accessible name); otherwise the text label shows.\n// clicky-ui owns the size (10px default) — the consumer supplies only the icon\n// and its colour.\nexport function comboboxLabelProps(filter: { icon?: LabelIconSpec; label: string }): {\n  label: ReactNode;\n  ariaLabel?: string;\n} {\n  if (filter.icon == null) return { label: filter.label };\n  return {\n    label: (\n      <span title={filter.label} className=\"inline-flex items-center text-[10px]\">\n        <LabelIcon icon={sizedIcon(filter.icon, 10)} className=\"normal-case\" />\n      </span>\n    ),\n    ariaLabel: filter.label,\n  };\n}\n\nexport function lookupFieldWidthClass(grow: boolean) {\n  return grow ? \"min-w-[12rem] max-w-[18rem] flex-1\" : \"min-w-[11rem] max-w-[15rem] shrink-0\";\n}\n"],"names":[],"mappings":"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"}

package/dist/components/filter-bar-multi.cjs

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const FilterPill = require("../data/FilterPill.cjs");
+const Icon = require("../data/Icon.cjs");
+const utils = require("../lib/utils.cjs");
+const Combobox = require("./Combobox.cjs");
+const filterBarContext = require("./filter-bar-context.cjs");
+const filterBarFieldUtils = require("./filter-bar-field-utils.cjs");
+const UiSearch = require("../icons/components/UiSearch.cjs");
+function MultiFilterField({
+  filter,
+  grow
+}) {
+  const [draft, setDraft] = filterBarFieldUtils.useDebouncedMultiDraft(filter.value, filter.onChange);
+  const [searchOptions, setSearchOptions] = react.useState([]);
+  const [loading, setLoading] = react.useState(false);
+  const [activeQuery, setActiveQuery] = react.useState("");
+  const latestQuery = react.useRef("");
+  const onSearchProp = filter.onSearch;
+  const handleSearch = react.useCallback(
+    (query) => {
+      latestQuery.current = query;
+      setActiveQuery(query);
+      if (!query) {
+        setSearchOptions([]);
+        setLoading(false);
+        return;
+      }
+      setLoading(true);
+      Promise.resolve(onSearchProp == null ? void 0 : onSearchProp(query)).then((opts) => {
+        if (latestQuery.current !== query) return;
+        setLoading(false);
+        setSearchOptions(Array.isArray(opts) ? opts : []);
+      }).catch(() => {
+        if (latestQuery.current !== query) return;
+        setLoading(false);
+        setSearchOptions([]);
+      });
+    },
+    [onSearchProp]
+  );
+  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 filterBarFieldUtils.mergeMultiSelectOptions(pinned, filter.options);
+  }, [allowCustomValue, filter.options, draft]);
+  const visibleOptions = react.useMemo(() => {
+    if (!onSearchProp || !activeQuery) return baseOptions;
+    const selectedHead = baseOptions.filter((o) => draft[o.value] !== void 0);
+    return filterBarFieldUtils.mergeMultiSelectOptions(selectedHead, searchOptions);
+  }, [onSearchProp, activeQuery, baseOptions, searchOptions, draft]);
+  const moreCount = filter.truncated && filter.total ? Math.max(filter.total - filter.options.length, 0) : 0;
+  const footer = moreCount > 0 && !activeQuery ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    "… and ",
+    moreCount.toLocaleString(),
+    " more",
+    onSearchProp ? " — type to search all" : ""
+  ] }) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Combobox.Combobox,
+    {
+      multiple: true,
+      tristate: true,
+      ...filterBarFieldUtils.comboboxLabelProps(filter),
+      options: toComboboxOptions(visibleOptions),
+      value: draft,
+      onChange: setDraft,
+      allowCustomValue,
+      size: "sm",
+      className: utils.cn(filterBarFieldUtils.lookupFieldWidthClass(grow), filter.className),
+      ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
+      ...onSearchProp !== void 0 ? { onSearch: handleSearch, loading } : {},
+      ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {},
+      ...footer !== void 0 ? { footer } : {}
+    }
+  );
+}
+function toComboboxOptions(options) {
+  return options.map((option) => {
+    const title = option.title ?? filterBarFieldUtils.multiSelectOptionText(option);
+    return {
+      value: option.value,
+      // A node label (e.g. an icon + text span) can't render as the combobox's
+      // option row or closed summary, so fall back to the option's title text —
+      // the human-readable label — instead of the raw value.
+      label: typeof option.label === "string" ? option.label : title,
+      title,
+      ...option.disabled !== void 0 ? { disabled: option.disabled } : {}
+    };
+  });
+}
+function TriStateMultiSelect({ grow = true, ...rest }) {
+  const filter = { key: rest.label, kind: "multi", ...rest };
+  return /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: { autoSubmit: false }, children: /* @__PURE__ */ jsxRuntime.jsx(MultiFilterField, { filter, grow }) });
+}
+function MultiFilterPanel({
+  filter,
+  chrome = "full"
+}) {
+  const [optionQuery, setOptionQuery] = react.useState("");
+  const [draft, setDraft] = filterBarFieldUtils.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) => filterBarFieldUtils.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 ?? filterBarFieldUtils.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(filterBarFieldUtils.updateMultiFilterValue(draft, option.value, filterBarFieldUtils.nextFilterMode(mode))),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    setDraft(filterBarFieldUtils.updateMultiFilterValue(draft, option.value, filterBarFieldUtils.nextFilterMode(mode)));
+                  }
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  FilterPill.FilterPill,
+                  {
+                    className: "w-full justify-between",
+                    label: option.label,
+                    mode,
+                    title,
+                    togglePosition: "right",
+                    onModeChange: (next) => setDraft(filterBarFieldUtils.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" })
+        ] })
+      ]
+    }
+  );
+}
+exports.MultiFilterField = MultiFilterField;
+exports.MultiFilterPanel = MultiFilterPanel;
+exports.TriStateMultiSelect = TriStateMultiSelect;
+//# sourceMappingURL=filter-bar-multi.cjs.map

package/dist/components/filter-bar-multi.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar-multi.cjs","sources":["../../src/components/filter-bar-multi.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from \"react\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { Icon, type LabelIconSpec } from \"../data/Icon\";\nimport { UiSearch } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\nimport { FilterBarContext } from \"./filter-bar-context\";\nimport {\n  comboboxLabelProps,\n  lookupFieldWidthClass,\n  mergeMultiSelectOptions,\n  multiSelectOptionText,\n  nextFilterMode,\n  updateMultiFilterValue,\n  useDebouncedMultiDraft,\n  type FilterBarMultiFilterMode,\n} from \"./filter-bar-field-utils\";\nimport type { MultiSelectOption } from \"./MultiSelect\";\n\nexport type { FilterBarMultiFilterMode } from \"./filter-bar-field-utils\";\n\nexport type FilterBarMultiFilter = {\n  key: string;\n  /** Renders include/exclude chips for each option. */\n  kind: \"multi\";\n  label: string;\n  /** Leading glyph shown before the label: a runtime icon name or a node. */\n  icon?: LabelIconSpec;\n  description?: string;\n  /** Map of option value to include/exclude state. */\n  value: Record<string, FilterBarMultiFilterMode>;\n  /** Available chip options. When `truncated`, this is only the head set. */\n  options: MultiSelectOption[];\n  onChange: (value: Record<string, FilterBarMultiFilterMode>) => void;\n  /** Ghost text shown in the field when no options are selected. */\n  placeholder?: string;\n  /**\n   * True when more options exist than are in `options` (the option set was\n   * capped server-side). Renders an \"… and N more\" hint and, with `onSearch`,\n   * lets the user search the full set.\n   */\n  truncated?: boolean;\n  /** True distinct count behind a truncated option set; drives the \"N more\" label. */\n  total?: number;\n  /**\n   * Optional async fetch invoked (debounced) as the user types in the option\n   * search box. Returns the options matching the query, which are merged into\n   * the displayed list so values beyond the head become selectable. When\n   * absent, the search box filters the static `options` client-side only.\n   */\n  onSearch?: (query: string) => Promise<MultiSelectOption[]> | void;\n  /**\n   * Lets the user commit a value absent from `options` (a free-typed name or a\n   * `*` wildcard). The option search box stays visible and an \"Add\" row appears\n   * when the query matches no listed option; committed customs pin to the top so\n   * they stay toggleable. Use for MatchItem-style filters (table/login patterns).\n   */\n  allowCustomValue?: boolean;\n  disabled?: boolean;\n  className?: string;\n};\n\n// MultiFilterField renders a \"multi\" filter as a tristate Combobox so the bar\n// stays one control family with the lookup fields: same shell, inline label,\n// typeahead input, and portaled listbox of FilterPill rows.\nexport function MultiFilterField({\n  filter,\n  grow,\n}: {\n  filter: FilterBarMultiFilter;\n  grow: boolean;\n}) {\n  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);\n  // Server-search state: the matches for the active query (they replace the\n  // head while searching), plus the in-flight flag. Combobox owns the 250ms\n  // debounce; this adapter only resolves the Promise, latest query wins.\n  const [searchOptions, setSearchOptions] = useState<MultiSelectOption[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [activeQuery, setActiveQuery] = useState(\"\");\n  const latestQuery = useRef(\"\");\n\n  const onSearchProp = filter.onSearch;\n  const handleSearch = useCallback(\n    (query: string) => {\n      latestQuery.current = query;\n      setActiveQuery(query);\n      if (!query) {\n        setSearchOptions([]);\n        setLoading(false);\n        return;\n      }\n      setLoading(true);\n      Promise.resolve(onSearchProp?.(query))\n        .then((opts) => {\n          if (latestQuery.current !== query) return;\n          setLoading(false);\n          setSearchOptions(Array.isArray(opts) ? opts : []);\n        })\n        .catch(() => {\n          if (latestQuery.current !== query) return;\n          setLoading(false);\n          setSearchOptions([]);\n        });\n    },\n    [onSearchProp],\n  );\n\n  // allowCustomValue: any toggled value absent from `options` (a free-typed name\n  // or a `*` wildcard) is synthesised as a pinned option so it renders and stays\n  // toggleable across reopens.\n  const allowCustomValue = Boolean(filter.allowCustomValue);\n  const baseOptions = useMemo(() => {\n    if (!allowCustomValue) return filter.options;\n    const known = new Set(filter.options.map((o) => o.value));\n    const pinned = Object.keys(draft)\n      .filter((v) => !known.has(v))\n      .map((v) => ({ value: v, label: v }));\n    return mergeMultiSelectOptions(pinned, filter.options);\n  }, [allowCustomValue, filter.options, draft]);\n\n  // Server search active → the matches REPLACE the head, but any head option\n  // the user has already toggled (include/exclude) stays pinned so their\n  // selection remains visible and changeable. Selected first, then matches.\n  // Without a query (or without onSearch) the head set renders and Combobox\n  // client-filters it.\n  const visibleOptions = useMemo(() => {\n    if (!onSearchProp || !activeQuery) return baseOptions;\n    const selectedHead = baseOptions.filter((o) => draft[o.value] !== undefined);\n    return mergeMultiSelectOptions(selectedHead, searchOptions);\n  }, [onSearchProp, activeQuery, baseOptions, searchOptions, draft]);\n\n  const moreCount =\n    filter.truncated && filter.total ? Math.max(filter.total - filter.options.length, 0) : 0;\n  const footer =\n    moreCount > 0 && !activeQuery ? (\n      <>\n        … and {moreCount.toLocaleString()} more\n        {onSearchProp ? \" — type to search all\" : \"\"}\n      </>\n    ) : undefined;\n\n  return (\n    <Combobox\n      multiple\n      tristate\n      {...comboboxLabelProps(filter)}\n      options={toComboboxOptions(visibleOptions)}\n      value={draft}\n      onChange={setDraft}\n      allowCustomValue={allowCustomValue}\n      size=\"sm\"\n      className={cn(lookupFieldWidthClass(grow), filter.className)}\n      {...(filter.placeholder !== undefined ? { placeholder: filter.placeholder } : {})}\n      {...(onSearchProp !== undefined ? { onSearch: handleSearch, loading } : {})}\n      {...(filter.disabled !== undefined ? { disabled: filter.disabled } : {})}\n      {...(footer !== undefined ? { footer } : {})}\n    />\n  );\n}\n\nfunction toComboboxOptions(options: MultiSelectOption[]): ComboboxOption[] {\n  return options.map((option) => {\n    const title = option.title ?? multiSelectOptionText(option);\n    return {\n      value: option.value,\n      // A node label (e.g. an icon + text span) can't render as the combobox's\n      // option row or closed summary, so fall back to the option's title text —\n      // the human-readable label — instead of the raw value.\n      label: typeof option.label === \"string\" ? option.label : title,\n      title,\n      ...(option.disabled !== undefined ? { disabled: option.disabled } : {}),\n    };\n  });\n}\n\nexport type TriStateMultiSelectProps = {\n  /** Trigger label and popover heading. */\n  label: string;\n  /** Map of option value → include/exclude. Neutral options are absent. */\n  value: Record<string, FilterBarMultiFilterMode>;\n  onChange: (value: Record<string, FilterBarMultiFilterMode>) => void;\n  /** Chip options. When `truncated`, this is only the head set. */\n  options: MultiSelectOption[];\n  icon?: LabelIconSpec;\n  description?: string;\n  truncated?: boolean;\n  total?: number;\n  onSearch?: (query: string) => Promise<MultiSelectOption[]> | void;\n  /** Allow committing free-typed / `*`-wildcard values absent from `options`. */\n  allowCustomValue?: boolean;\n  disabled?: boolean;\n  className?: string;\n  /** Fill the available width (form field) vs. shrink to content. Default true. */\n  grow?: boolean;\n};\n\n// TriStateMultiSelect is the standalone include/exclude/neutral multi-select used\n// by FilterBar's \"multi\" kind, exposed for hand-written forms. It renders a\n// tristate combobox whose rows cycle neutral → include → exclude. It commits\n// changes immediately (autoSubmit:false) since a controlled form owns the value.\nexport function TriStateMultiSelect({ grow = true, ...rest }: TriStateMultiSelectProps) {\n  const filter: FilterBarMultiFilter = { key: rest.label, kind: \"multi\", ...rest };\n  return (\n    <FilterBarContext.Provider value={{ autoSubmit: false }}>\n      <MultiFilterField filter={filter} grow={grow} />\n    </FilterBarContext.Provider>\n  );\n}\n\n// MultiFilterPanel is the always-open embedded form of the multi filter (the\n// FilterBarFilterPanel / DataTable column-popover surface). Unlike the inline\n// field it is a panel, not an input, so it keeps the FilterPill row list.\nexport function MultiFilterPanel({\n  filter,\n  chrome = \"full\",\n}: {\n  filter: FilterBarMultiFilter;\n  chrome?: \"full\" | \"embedded\";\n}) {\n  const [optionQuery, setOptionQuery] = useState(\"\");\n  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);\n  const showOptionFilter = filter.options.length > 7;\n  const embedded = chrome === \"embedded\";\n  const visibleOptions = useMemo(() => {\n    const query = optionQuery.trim().toLowerCase();\n    if (!query) return filter.options;\n    return filter.options.filter((option) =>\n      multiSelectOptionText(option).toLowerCase().includes(query),\n    );\n  }, [filter.options, optionQuery]);\n\n  return (\n    <div\n      data-filter-panel-chrome={chrome}\n      className={cn(\n        \"min-w-[18rem] max-w-[22rem] text-popover-foreground\",\n        embedded\n          ? \"p-0\"\n          : \"rounded-md border border-border bg-popover p-2 shadow-sm shadow-black/5\",\n      )}\n    >\n      {!embedded && (\n        <div className=\"mb-2 flex items-center justify-between gap-2\">\n          <div className=\"text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            {filter.label}\n          </div>\n          <button\n            type=\"button\"\n            className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n            onClick={() => setDraft({})}\n            disabled={Object.keys(draft).length === 0}\n          >\n            Clear all\n          </button>\n        </div>\n      )}\n\n      {showOptionFilter && (\n        <div className=\"mb-2 flex items-center gap-2 rounded-md border border-input bg-background px-2\">\n          <Icon icon={UiSearch} className=\"shrink-0 text-muted-foreground\" />\n          <input\n            type=\"search\"\n            aria-label={`Filter ${filter.label} options`}\n            className=\"h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n            placeholder={`Filter ${filter.label.toLowerCase()}`}\n            value={optionQuery}\n            onChange={(event) => setOptionQuery(event.target.value)}\n          />\n        </div>\n      )}\n\n      <div className=\"max-h-72 space-y-0.5 overflow-auto\">\n        {visibleOptions.map((option) => {\n          const mode = draft[option.value] ?? \"neutral\";\n          const title = option.title ?? multiSelectOptionText(option);\n\n          return (\n            <div\n              key={option.value}\n              role=\"button\"\n              tabIndex={0}\n              data-filter-option={option.value}\n              className=\"rounded-md px-1.5 py-0.5 hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none\"\n              onClick={() =>\n                setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode)))\n              }\n              onKeyDown={(event) => {\n                if (event.key === \"Enter\" || event.key === \" \") {\n                  event.preventDefault();\n                  setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode)));\n                }\n              }}\n            >\n              <FilterPill\n                className=\"w-full justify-between\"\n                label={option.label}\n                mode={mode}\n                title={title}\n                togglePosition=\"right\"\n                onModeChange={(next) => setDraft(updateMultiFilterValue(draft, option.value, next))}\n              />\n            </div>\n          );\n        })}\n        {visibleOptions.length === 0 && (\n          <div className=\"px-2 py-3 text-sm text-muted-foreground\">No options found</div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["useDebouncedMultiDraft","useState","useRef","useCallback","useMemo","mergeMultiSelectOptions","jsxs","Fragment","jsx","Combobox","comboboxLabelProps","cn","lookupFieldWidthClass","multiSelectOptionText","FilterBarContext","Icon","UiSearch","updateMultiFilterValue","nextFilterMode","FilterPill"],"mappings":";;;;;;;;;;;AAiEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAIA,oBAAAA,uBAAuB,OAAO,OAAO,OAAO,QAAQ;AAI9E,QAAM,CAAC,eAAe,gBAAgB,IAAIC,MAAAA,SAA8B,CAAA,CAAE;AAC1E,QAAM,CAAC,SAAS,UAAU,IAAIA,MAAAA,SAAS,KAAK;AAC5C,QAAM,CAAC,aAAa,cAAc,IAAIA,MAAAA,SAAS,EAAE;AACjD,QAAM,cAAcC,MAAAA,OAAO,EAAE;AAE7B,QAAM,eAAe,OAAO;AAC5B,QAAM,eAAeC,MAAAA;AAAAA,IACnB,CAAC,UAAkB;AACjB,kBAAY,UAAU;AACtB,qBAAe,KAAK;AACpB,UAAI,CAAC,OAAO;AACV,yBAAiB,CAAA,CAAE;AACnB,mBAAW,KAAK;AAChB;AAAA,MACF;AACA,iBAAW,IAAI;AACf,cAAQ,QAAQ,6CAAe,MAAM,EAClC,KAAK,CAAC,SAAS;AACd,YAAI,YAAY,YAAY,MAAO;AACnC,mBAAW,KAAK;AAChB,yBAAiB,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAA,CAAE;AAAA,MAClD,CAAC,EACA,MAAM,MAAM;AACX,YAAI,YAAY,YAAY,MAAO;AACnC,mBAAW,KAAK;AAChB,yBAAiB,CAAA,CAAE;AAAA,MACrB,CAAC;AAAA,IACL;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAMf,QAAM,mBAAmB,QAAQ,OAAO,gBAAgB;AACxD,QAAM,cAAcC,MAAAA,QAAQ,MAAM;AAChC,QAAI,CAAC,iBAAkB,QAAO,OAAO;AACrC,UAAM,QAAQ,IAAI,IAAI,OAAO,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AACxD,UAAM,SAAS,OAAO,KAAK,KAAK,EAC7B,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,EAC3B,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,EAAA,EAAI;AACtC,WAAOC,4CAAwB,QAAQ,OAAO,OAAO;AAAA,EACvD,GAAG,CAAC,kBAAkB,OAAO,SAAS,KAAK,CAAC;AAO5C,QAAM,iBAAiBD,MAAAA,QAAQ,MAAM;AACnC,QAAI,CAAC,gBAAgB,CAAC,YAAa,QAAO;AAC1C,UAAM,eAAe,YAAY,OAAO,CAAC,MAAM,MAAM,EAAE,KAAK,MAAM,MAAS;AAC3E,WAAOC,oBAAAA,wBAAwB,cAAc,aAAa;AAAA,EAC5D,GAAG,CAAC,cAAc,aAAa,aAAa,eAAe,KAAK,CAAC;AAEjE,QAAM,YACJ,OAAO,aAAa,OAAO,QAAQ,KAAK,IAAI,OAAO,QAAQ,OAAO,QAAQ,QAAQ,CAAC,IAAI;AACzF,QAAM,SACJ,YAAY,KAAK,CAAC,cAChBC,gCAAAC,WAAAA,UAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IACO,UAAU,eAAA;AAAA,IAAiB;AAAA,IACjC,eAAe,0BAA0B;AAAA,EAAA,EAAA,CAC5C,IACE;AAEN,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,UAAQ;AAAA,MACR,UAAQ;AAAA,MACP,GAAGC,oBAAAA,mBAAmB,MAAM;AAAA,MAC7B,SAAS,kBAAkB,cAAc;AAAA,MACzC,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA,MACL,WAAWC,MAAAA,GAAGC,oBAAAA,sBAAsB,IAAI,GAAG,OAAO,SAAS;AAAA,MAC1D,GAAI,OAAO,gBAAgB,SAAY,EAAE,aAAa,OAAO,YAAA,IAAgB,CAAA;AAAA,MAC7E,GAAI,iBAAiB,SAAY,EAAE,UAAU,cAAc,QAAA,IAAY,CAAA;AAAA,MACvE,GAAI,OAAO,aAAa,SAAY,EAAE,UAAU,OAAO,SAAA,IAAa,CAAA;AAAA,MACpE,GAAI,WAAW,SAAY,EAAE,WAAW,CAAA;AAAA,IAAC;AAAA,EAAA;AAGhD;AAEA,SAAS,kBAAkB,SAAgD;AACzE,SAAO,QAAQ,IAAI,CAAC,WAAW;AAC7B,UAAM,QAAQ,OAAO,SAASC,oBAAAA,sBAAsB,MAAM;AAC1D,WAAO;AAAA,MACL,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,MAId,OAAO,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ;AAAA,MACzD;AAAA,MACA,GAAI,OAAO,aAAa,SAAY,EAAE,UAAU,OAAO,aAAa,CAAA;AAAA,IAAC;AAAA,EAEzE,CAAC;AACH;AA2BO,SAAS,oBAAoB,EAAE,OAAO,MAAM,GAAG,QAAkC;AACtF,QAAM,SAA+B,EAAE,KAAK,KAAK,OAAO,MAAM,SAAS,GAAG,KAAA;AAC1E,SACEL,2BAAAA,IAACM,iBAAAA,iBAAiB,UAAjB,EAA0B,OAAO,EAAE,YAAY,MAAA,GAC9C,UAAAN,2BAAAA,IAAC,kBAAA,EAAiB,QAAgB,MAAY,GAChD;AAEJ;AAKO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,SAAS;AACX,GAGG;AACD,QAAM,CAAC,aAAa,cAAc,IAAIP,MAAAA,SAAS,EAAE;AACjD,QAAM,CAAC,OAAO,QAAQ,IAAID,oBAAAA,uBAAuB,OAAO,OAAO,OAAO,QAAQ;AAC9E,QAAM,mBAAmB,OAAO,QAAQ,SAAS;AACjD,QAAM,WAAW,WAAW;AAC5B,QAAM,iBAAiBI,MAAAA,QAAQ,MAAM;AACnC,UAAM,QAAQ,YAAY,KAAA,EAAO,YAAA;AACjC,QAAI,CAAC,MAAO,QAAO,OAAO;AAC1B,WAAO,OAAO,QAAQ;AAAA,MAAO,CAAC,WAC5BS,oBAAAA,sBAAsB,MAAM,EAAE,YAAA,EAAc,SAAS,KAAK;AAAA,IAAA;AAAA,EAE9D,GAAG,CAAC,OAAO,SAAS,WAAW,CAAC;AAEhC,SACEP,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,4BAA0B;AAAA,MAC1B,WAAWK,MAAAA;AAAAA,QACT;AAAA,QACA,WACI,QACA;AAAA,MAAA;AAAA,MAGL,UAAA;AAAA,QAAA,CAAC,YACAL,2BAAAA,KAAC,OAAA,EAAI,WAAU,gDACb,UAAA;AAAA,UAAAE,2BAAAA,IAAC,OAAA,EAAI,WAAU,yEACZ,UAAA,OAAO,OACV;AAAA,UACAA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS,MAAM,SAAS,EAAE;AAAA,cAC1B,UAAU,OAAO,KAAK,KAAK,EAAE,WAAW;AAAA,cACzC,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAED,GACF;AAAA,QAGD,oBACCF,2BAAAA,KAAC,OAAA,EAAI,WAAU,kFACb,UAAA;AAAA,UAAAE,2BAAAA,IAACO,KAAAA,MAAA,EAAK,MAAMC,SAAAA,UAAU,WAAU,kCAAiC;AAAA,UACjER,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,UAAU,OAAO,KAAK;AAAA,cAClC,WAAU;AAAA,cACV,aAAa,UAAU,OAAO,MAAM,aAAa;AAAA,cACjD,OAAO;AAAA,cACP,UAAU,CAAC,UAAU,eAAe,MAAM,OAAO,KAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACxD,GACF;AAAA,QAGFF,2BAAAA,KAAC,OAAA,EAAI,WAAU,sCACZ,UAAA;AAAA,UAAA,eAAe,IAAI,CAAC,WAAW;AAC9B,kBAAM,OAAO,MAAM,OAAO,KAAK,KAAK;AACpC,kBAAM,QAAQ,OAAO,SAASO,oBAAAA,sBAAsB,MAAM;AAE1D,mBACEL,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,sBAAoB,OAAO;AAAA,gBAC3B,WAAU;AAAA,gBACV,SAAS,MACP,SAASS,oBAAAA,uBAAuB,OAAO,OAAO,OAAOC,oBAAAA,eAAe,IAAI,CAAC,CAAC;AAAA,gBAE5E,WAAW,CAAC,UAAU;AACpB,sBAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,0BAAM,eAAA;AACN,6BAASD,oBAAAA,uBAAuB,OAAO,OAAO,OAAOC,oBAAAA,eAAe,IAAI,CAAC,CAAC;AAAA,kBAC5E;AAAA,gBACF;AAAA,gBAEA,UAAAV,2BAAAA;AAAAA,kBAACW,WAAAA;AAAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,OAAO;AAAA,oBACd;AAAA,oBACA;AAAA,oBACA,gBAAe;AAAA,oBACf,cAAc,CAAC,SAAS,SAASF,oBAAAA,uBAAuB,OAAO,OAAO,OAAO,IAAI,CAAC;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACpF;AAAA,cAtBK,OAAO;AAAA,YAAA;AAAA,UAyBlB,CAAC;AAAA,UACA,eAAe,WAAW,oCACxB,OAAA,EAAI,WAAU,2CAA0C,UAAA,mBAAA,CAAgB;AAAA,QAAA,EAAA,CAE7E;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;;;"}

package/dist/components/filter-bar-multi.d.ts

@@ -0,0 +1,74 @@
+import { LabelIconSpec } from '../data/Icon';
+import { FilterBarMultiFilterMode } from './filter-bar-field-utils';
+import { MultiSelectOption } from './MultiSelect';
+export type { FilterBarMultiFilterMode } from './filter-bar-field-utils';
+export type FilterBarMultiFilter = {
+    key: string;
+    /** Renders include/exclude chips for each option. */
+    kind: "multi";
+    label: string;
+    /** Leading glyph shown before the label: a runtime icon name or a node. */
+    icon?: LabelIconSpec;
+    description?: string;
+    /** Map of option value to include/exclude state. */
+    value: Record<string, FilterBarMultiFilterMode>;
+    /** Available chip options. When `truncated`, this is only the head set. */
+    options: MultiSelectOption[];
+    onChange: (value: Record<string, FilterBarMultiFilterMode>) => void;
+    /** Ghost text shown in the field when no options are selected. */
+    placeholder?: string;
+    /**
+     * True when more options exist than are in `options` (the option set was
+     * capped server-side). Renders an "… and N more" hint and, with `onSearch`,
+     * lets the user search the full set.
+     */
+    truncated?: boolean;
+    /** True distinct count behind a truncated option set; drives the "N more" label. */
+    total?: number;
+    /**
+     * Optional async fetch invoked (debounced) as the user types in the option
+     * search box. Returns the options matching the query, which are merged into
+     * the displayed list so values beyond the head become selectable. When
+     * absent, the search box filters the static `options` client-side only.
+     */
+    onSearch?: (query: string) => Promise<MultiSelectOption[]> | void;
+    /**
+     * Lets the user commit a value absent from `options` (a free-typed name or a
+     * `*` wildcard). The option search box stays visible and an "Add" row appears
+     * when the query matches no listed option; committed customs pin to the top so
+     * they stay toggleable. Use for MatchItem-style filters (table/login patterns).
+     */
+    allowCustomValue?: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+export declare function MultiFilterField({ filter, grow, }: {
+    filter: FilterBarMultiFilter;
+    grow: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export type TriStateMultiSelectProps = {
+    /** Trigger label and popover heading. */
+    label: string;
+    /** Map of option value → include/exclude. Neutral options are absent. */
+    value: Record<string, FilterBarMultiFilterMode>;
+    onChange: (value: Record<string, FilterBarMultiFilterMode>) => void;
+    /** Chip options. When `truncated`, this is only the head set. */
+    options: MultiSelectOption[];
+    icon?: LabelIconSpec;
+    description?: string;
+    truncated?: boolean;
+    total?: number;
+    onSearch?: (query: string) => Promise<MultiSelectOption[]> | void;
+    /** Allow committing free-typed / `*`-wildcard values absent from `options`. */
+    allowCustomValue?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** Fill the available width (form field) vs. shrink to content. Default true. */
+    grow?: boolean;
+};
+export declare function TriStateMultiSelect({ grow, ...rest }: TriStateMultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function MultiFilterPanel({ filter, chrome, }: {
+    filter: FilterBarMultiFilter;
+    chrome?: "full" | "embedded";
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=filter-bar-multi.d.ts.map

package/dist/components/filter-bar-multi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar-multi.d.ts","sourceRoot":"","sources":["../../src/components/filter-bar-multi.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAKxD,OAAO,EAQL,KAAK,wBAAwB,EAC9B,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD,YAAY,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAEzE,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,qDAAqD;IACrD,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;IAChD,2EAA2E;IAC3E,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,KAAK,IAAI,CAAC;IACpE,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,iBAAiB,EAAE,CAAC,GAAG,IAAI,CAAC;IAClE;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAKF,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,IAAI,GACL,EAAE;IACD,MAAM,EAAE,oBAAoB,CAAC;IAC7B,IAAI,EAAE,OAAO,CAAC;CACf,2CAuFA;AAiBD,MAAM,MAAM,wBAAwB,GAAG;IACrC,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,KAAK,IAAI,CAAC;IACpE,iEAAiE;IACjE,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,iBAAiB,EAAE,CAAC,GAAG,IAAI,CAAC;IAClE,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAMF,wBAAgB,mBAAmB,CAAC,EAAE,IAAW,EAAE,GAAG,IAAI,EAAE,EAAE,wBAAwB,2CAOrF;AAKD,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,MAAe,GAChB,EAAE;IACD,MAAM,EAAE,oBAAoB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CAC9B,2CA4FA"}

package/dist/components/filter-bar-multi.js

@@ -0,0 +1,193 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useMemo } from "react";
+import { FilterPill } from "../data/FilterPill.js";
+import { Icon } from "../data/Icon.js";
+import { cn } from "../lib/utils.js";
+import { Combobox } from "./Combobox.js";
+import { FilterBarContext } from "./filter-bar-context.js";
+import { useDebouncedMultiDraft, mergeMultiSelectOptions, lookupFieldWidthClass, comboboxLabelProps, multiSelectOptionText, updateMultiFilterValue, nextFilterMode } from "./filter-bar-field-utils.js";
+import { UiSearch } from "../icons/components/UiSearch.js";
+function MultiFilterField({
+  filter,
+  grow
+}) {
+  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);
+  const [searchOptions, setSearchOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [activeQuery, setActiveQuery] = useState("");
+  const latestQuery = useRef("");
+  const onSearchProp = filter.onSearch;
+  const handleSearch = useCallback(
+    (query) => {
+      latestQuery.current = query;
+      setActiveQuery(query);
+      if (!query) {
+        setSearchOptions([]);
+        setLoading(false);
+        return;
+      }
+      setLoading(true);
+      Promise.resolve(onSearchProp == null ? void 0 : onSearchProp(query)).then((opts) => {
+        if (latestQuery.current !== query) return;
+        setLoading(false);
+        setSearchOptions(Array.isArray(opts) ? opts : []);
+      }).catch(() => {
+        if (latestQuery.current !== query) return;
+        setLoading(false);
+        setSearchOptions([]);
+      });
+    },
+    [onSearchProp]
+  );
+  const allowCustomValue = Boolean(filter.allowCustomValue);
+  const baseOptions = 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 visibleOptions = useMemo(() => {
+    if (!onSearchProp || !activeQuery) return baseOptions;
+    const selectedHead = baseOptions.filter((o) => draft[o.value] !== void 0);
+    return mergeMultiSelectOptions(selectedHead, searchOptions);
+  }, [onSearchProp, activeQuery, baseOptions, searchOptions, draft]);
+  const moreCount = filter.truncated && filter.total ? Math.max(filter.total - filter.options.length, 0) : 0;
+  const footer = moreCount > 0 && !activeQuery ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    "… and ",
+    moreCount.toLocaleString(),
+    " more",
+    onSearchProp ? " — type to search all" : ""
+  ] }) : void 0;
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      multiple: true,
+      tristate: true,
+      ...comboboxLabelProps(filter),
+      options: toComboboxOptions(visibleOptions),
+      value: draft,
+      onChange: setDraft,
+      allowCustomValue,
+      size: "sm",
+      className: cn(lookupFieldWidthClass(grow), filter.className),
+      ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
+      ...onSearchProp !== void 0 ? { onSearch: handleSearch, loading } : {},
+      ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {},
+      ...footer !== void 0 ? { footer } : {}
+    }
+  );
+}
+function toComboboxOptions(options) {
+  return options.map((option) => {
+    const title = option.title ?? multiSelectOptionText(option);
+    return {
+      value: option.value,
+      // A node label (e.g. an icon + text span) can't render as the combobox's
+      // option row or closed summary, so fall back to the option's title text —
+      // the human-readable label — instead of the raw value.
+      label: typeof option.label === "string" ? option.label : title,
+      title,
+      ...option.disabled !== void 0 ? { disabled: option.disabled } : {}
+    };
+  });
+}
+function TriStateMultiSelect({ grow = true, ...rest }) {
+  const filter = { key: rest.label, kind: "multi", ...rest };
+  return /* @__PURE__ */ jsx(FilterBarContext.Provider, { value: { autoSubmit: false }, children: /* @__PURE__ */ jsx(MultiFilterField, { filter, grow }) });
+}
+function MultiFilterPanel({
+  filter,
+  chrome = "full"
+}) {
+  const [optionQuery, setOptionQuery] = useState("");
+  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);
+  const showOptionFilter = filter.options.length > 7;
+  const embedded = chrome === "embedded";
+  const visibleOptions = 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__ */ jsxs(
+    "div",
+    {
+      "data-filter-panel-chrome": chrome,
+      className: 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__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "mb-2 flex items-center gap-2 rounded-md border border-input bg-background px-2", children: [
+          /* @__PURE__ */ jsx(Icon, { icon: UiSearch, className: "shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(
+                  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__ */ jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground", children: "No options found" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MultiFilterField,
+  MultiFilterPanel,
+  TriStateMultiSelect
+};
+//# sourceMappingURL=filter-bar-multi.js.map

package/dist/components/filter-bar-multi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar-multi.js","sources":["../../src/components/filter-bar-multi.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from \"react\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { Icon, type LabelIconSpec } from \"../data/Icon\";\nimport { UiSearch } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\nimport { FilterBarContext } from \"./filter-bar-context\";\nimport {\n  comboboxLabelProps,\n  lookupFieldWidthClass,\n  mergeMultiSelectOptions,\n  multiSelectOptionText,\n  nextFilterMode,\n  updateMultiFilterValue,\n  useDebouncedMultiDraft,\n  type FilterBarMultiFilterMode,\n} from \"./filter-bar-field-utils\";\nimport type { MultiSelectOption } from \"./MultiSelect\";\n\nexport type { FilterBarMultiFilterMode } from \"./filter-bar-field-utils\";\n\nexport type FilterBarMultiFilter = {\n  key: string;\n  /** Renders include/exclude chips for each option. */\n  kind: \"multi\";\n  label: string;\n  /** Leading glyph shown before the label: a runtime icon name or a node. */\n  icon?: LabelIconSpec;\n  description?: string;\n  /** Map of option value to include/exclude state. */\n  value: Record<string, FilterBarMultiFilterMode>;\n  /** Available chip options. When `truncated`, this is only the head set. */\n  options: MultiSelectOption[];\n  onChange: (value: Record<string, FilterBarMultiFilterMode>) => void;\n  /** Ghost text shown in the field when no options are selected. */\n  placeholder?: string;\n  /**\n   * True when more options exist than are in `options` (the option set was\n   * capped server-side). Renders an \"… and N more\" hint and, with `onSearch`,\n   * lets the user search the full set.\n   */\n  truncated?: boolean;\n  /** True distinct count behind a truncated option set; drives the \"N more\" label. */\n  total?: number;\n  /**\n   * Optional async fetch invoked (debounced) as the user types in the option\n   * search box. Returns the options matching the query, which are merged into\n   * the displayed list so values beyond the head become selectable. When\n   * absent, the search box filters the static `options` client-side only.\n   */\n  onSearch?: (query: string) => Promise<MultiSelectOption[]> | void;\n  /**\n   * Lets the user commit a value absent from `options` (a free-typed name or a\n   * `*` wildcard). The option search box stays visible and an \"Add\" row appears\n   * when the query matches no listed option; committed customs pin to the top so\n   * they stay toggleable. Use for MatchItem-style filters (table/login patterns).\n   */\n  allowCustomValue?: boolean;\n  disabled?: boolean;\n  className?: string;\n};\n\n// MultiFilterField renders a \"multi\" filter as a tristate Combobox so the bar\n// stays one control family with the lookup fields: same shell, inline label,\n// typeahead input, and portaled listbox of FilterPill rows.\nexport function MultiFilterField({\n  filter,\n  grow,\n}: {\n  filter: FilterBarMultiFilter;\n  grow: boolean;\n}) {\n  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);\n  // Server-search state: the matches for the active query (they replace the\n  // head while searching), plus the in-flight flag. Combobox owns the 250ms\n  // debounce; this adapter only resolves the Promise, latest query wins.\n  const [searchOptions, setSearchOptions] = useState<MultiSelectOption[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [activeQuery, setActiveQuery] = useState(\"\");\n  const latestQuery = useRef(\"\");\n\n  const onSearchProp = filter.onSearch;\n  const handleSearch = useCallback(\n    (query: string) => {\n      latestQuery.current = query;\n      setActiveQuery(query);\n      if (!query) {\n        setSearchOptions([]);\n        setLoading(false);\n        return;\n      }\n      setLoading(true);\n      Promise.resolve(onSearchProp?.(query))\n        .then((opts) => {\n          if (latestQuery.current !== query) return;\n          setLoading(false);\n          setSearchOptions(Array.isArray(opts) ? opts : []);\n        })\n        .catch(() => {\n          if (latestQuery.current !== query) return;\n          setLoading(false);\n          setSearchOptions([]);\n        });\n    },\n    [onSearchProp],\n  );\n\n  // allowCustomValue: any toggled value absent from `options` (a free-typed name\n  // or a `*` wildcard) is synthesised as a pinned option so it renders and stays\n  // toggleable across reopens.\n  const allowCustomValue = Boolean(filter.allowCustomValue);\n  const baseOptions = useMemo(() => {\n    if (!allowCustomValue) return filter.options;\n    const known = new Set(filter.options.map((o) => o.value));\n    const pinned = Object.keys(draft)\n      .filter((v) => !known.has(v))\n      .map((v) => ({ value: v, label: v }));\n    return mergeMultiSelectOptions(pinned, filter.options);\n  }, [allowCustomValue, filter.options, draft]);\n\n  // Server search active → the matches REPLACE the head, but any head option\n  // the user has already toggled (include/exclude) stays pinned so their\n  // selection remains visible and changeable. Selected first, then matches.\n  // Without a query (or without onSearch) the head set renders and Combobox\n  // client-filters it.\n  const visibleOptions = useMemo(() => {\n    if (!onSearchProp || !activeQuery) return baseOptions;\n    const selectedHead = baseOptions.filter((o) => draft[o.value] !== undefined);\n    return mergeMultiSelectOptions(selectedHead, searchOptions);\n  }, [onSearchProp, activeQuery, baseOptions, searchOptions, draft]);\n\n  const moreCount =\n    filter.truncated && filter.total ? Math.max(filter.total - filter.options.length, 0) : 0;\n  const footer =\n    moreCount > 0 && !activeQuery ? (\n      <>\n        … and {moreCount.toLocaleString()} more\n        {onSearchProp ? \" — type to search all\" : \"\"}\n      </>\n    ) : undefined;\n\n  return (\n    <Combobox\n      multiple\n      tristate\n      {...comboboxLabelProps(filter)}\n      options={toComboboxOptions(visibleOptions)}\n      value={draft}\n      onChange={setDraft}\n      allowCustomValue={allowCustomValue}\n      size=\"sm\"\n      className={cn(lookupFieldWidthClass(grow), filter.className)}\n      {...(filter.placeholder !== undefined ? { placeholder: filter.placeholder } : {})}\n      {...(onSearchProp !== undefined ? { onSearch: handleSearch, loading } : {})}\n      {...(filter.disabled !== undefined ? { disabled: filter.disabled } : {})}\n      {...(footer !== undefined ? { footer } : {})}\n    />\n  );\n}\n\nfunction toComboboxOptions(options: MultiSelectOption[]): ComboboxOption[] {\n  return options.map((option) => {\n    const title = option.title ?? multiSelectOptionText(option);\n    return {\n      value: option.value,\n      // A node label (e.g. an icon + text span) can't render as the combobox's\n      // option row or closed summary, so fall back to the option's title text —\n      // the human-readable label — instead of the raw value.\n      label: typeof option.label === \"string\" ? option.label : title,\n      title,\n      ...(option.disabled !== undefined ? { disabled: option.disabled } : {}),\n    };\n  });\n}\n\nexport type TriStateMultiSelectProps = {\n  /** Trigger label and popover heading. */\n  label: string;\n  /** Map of option value → include/exclude. Neutral options are absent. */\n  value: Record<string, FilterBarMultiFilterMode>;\n  onChange: (value: Record<string, FilterBarMultiFilterMode>) => void;\n  /** Chip options. When `truncated`, this is only the head set. */\n  options: MultiSelectOption[];\n  icon?: LabelIconSpec;\n  description?: string;\n  truncated?: boolean;\n  total?: number;\n  onSearch?: (query: string) => Promise<MultiSelectOption[]> | void;\n  /** Allow committing free-typed / `*`-wildcard values absent from `options`. */\n  allowCustomValue?: boolean;\n  disabled?: boolean;\n  className?: string;\n  /** Fill the available width (form field) vs. shrink to content. Default true. */\n  grow?: boolean;\n};\n\n// TriStateMultiSelect is the standalone include/exclude/neutral multi-select used\n// by FilterBar's \"multi\" kind, exposed for hand-written forms. It renders a\n// tristate combobox whose rows cycle neutral → include → exclude. It commits\n// changes immediately (autoSubmit:false) since a controlled form owns the value.\nexport function TriStateMultiSelect({ grow = true, ...rest }: TriStateMultiSelectProps) {\n  const filter: FilterBarMultiFilter = { key: rest.label, kind: \"multi\", ...rest };\n  return (\n    <FilterBarContext.Provider value={{ autoSubmit: false }}>\n      <MultiFilterField filter={filter} grow={grow} />\n    </FilterBarContext.Provider>\n  );\n}\n\n// MultiFilterPanel is the always-open embedded form of the multi filter (the\n// FilterBarFilterPanel / DataTable column-popover surface). Unlike the inline\n// field it is a panel, not an input, so it keeps the FilterPill row list.\nexport function MultiFilterPanel({\n  filter,\n  chrome = \"full\",\n}: {\n  filter: FilterBarMultiFilter;\n  chrome?: \"full\" | \"embedded\";\n}) {\n  const [optionQuery, setOptionQuery] = useState(\"\");\n  const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);\n  const showOptionFilter = filter.options.length > 7;\n  const embedded = chrome === \"embedded\";\n  const visibleOptions = useMemo(() => {\n    const query = optionQuery.trim().toLowerCase();\n    if (!query) return filter.options;\n    return filter.options.filter((option) =>\n      multiSelectOptionText(option).toLowerCase().includes(query),\n    );\n  }, [filter.options, optionQuery]);\n\n  return (\n    <div\n      data-filter-panel-chrome={chrome}\n      className={cn(\n        \"min-w-[18rem] max-w-[22rem] text-popover-foreground\",\n        embedded\n          ? \"p-0\"\n          : \"rounded-md border border-border bg-popover p-2 shadow-sm shadow-black/5\",\n      )}\n    >\n      {!embedded && (\n        <div className=\"mb-2 flex items-center justify-between gap-2\">\n          <div className=\"text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            {filter.label}\n          </div>\n          <button\n            type=\"button\"\n            className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n            onClick={() => setDraft({})}\n            disabled={Object.keys(draft).length === 0}\n          >\n            Clear all\n          </button>\n        </div>\n      )}\n\n      {showOptionFilter && (\n        <div className=\"mb-2 flex items-center gap-2 rounded-md border border-input bg-background px-2\">\n          <Icon icon={UiSearch} className=\"shrink-0 text-muted-foreground\" />\n          <input\n            type=\"search\"\n            aria-label={`Filter ${filter.label} options`}\n            className=\"h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n            placeholder={`Filter ${filter.label.toLowerCase()}`}\n            value={optionQuery}\n            onChange={(event) => setOptionQuery(event.target.value)}\n          />\n        </div>\n      )}\n\n      <div className=\"max-h-72 space-y-0.5 overflow-auto\">\n        {visibleOptions.map((option) => {\n          const mode = draft[option.value] ?? \"neutral\";\n          const title = option.title ?? multiSelectOptionText(option);\n\n          return (\n            <div\n              key={option.value}\n              role=\"button\"\n              tabIndex={0}\n              data-filter-option={option.value}\n              className=\"rounded-md px-1.5 py-0.5 hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none\"\n              onClick={() =>\n                setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode)))\n              }\n              onKeyDown={(event) => {\n                if (event.key === \"Enter\" || event.key === \" \") {\n                  event.preventDefault();\n                  setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode)));\n                }\n              }}\n            >\n              <FilterPill\n                className=\"w-full justify-between\"\n                label={option.label}\n                mode={mode}\n                title={title}\n                togglePosition=\"right\"\n                onModeChange={(next) => setDraft(updateMultiFilterValue(draft, option.value, next))}\n              />\n            </div>\n          );\n        })}\n        {visibleOptions.length === 0 && (\n          <div className=\"px-2 py-3 text-sm text-muted-foreground\">No options found</div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}