@antadesign/anta 0.3.4 → 0.3.6

package/dist/components/Select.js

@@ -1,5 +1,7 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState, useId } from "../jsx-runtime";
+import { ISOLATE_HINT } from "../anta_helpers";
+import { normalizeOpt, matchQueryRegex, matchesQuery, highlight } from "./select-options";
 import { Input } from "./Input";
 import { Icon } from "./Icon";
 import { Menu } from "./Menu";
@@ -8,8 +10,6 @@ import { MenuGroup } from "./MenuGroup";
 import { MenuSeparator } from "./MenuSeparator";
 import { Tooltip } from "./Tooltip";
 import styles from "./Select.module.css";
-const IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad/i.test(navigator.userAgent || "");
-const normalize = (o) => typeof o === "string" ? { value: o, label: o } : o;
 function optionsWithSelection(options, values) {
   const set = new Set(values == null ? [] : Array.isArray(values) ? values : [values]);
   const state = (on, total) => on === 0 ? "none" : on === total ? "all" : "some";
@@ -28,7 +28,7 @@ function optionsWithSelection(options, values) {
       const total = children.reduce((n, c) => n + c.total, 0);
       return { node: { ...g, options: children.map((c) => c.node), selectionState: state(on, total) }, on, total };
     }
-    const o = normalize(raw);
+    const o = normalizeOpt(raw);
     const selected = set.has(o.value);
     return { node: { ...o, selected }, on: selected ? 1 : 0, total: 1 };
   });
@@ -44,6 +44,7 @@ const Select = (props) => {
     onValueChange,
     placeholder,
     icon,
+    leading,
     label,
     hint,
     size,
@@ -53,8 +54,10 @@ const Select = (props) => {
     disabled,
     toneSelected,
     filter,
-    selectAll,
+    selectAll = true,
     selectAllLabel = "Select all",
+    clearable,
+    clearLabel = "Clear",
     renderOption,
     renderIndicator,
     renderTrigger,
@@ -82,7 +85,7 @@ const Select = (props) => {
       if (typeof raw !== "string" && isSubmenu(raw)) collectLeaves(raw.submenu, raw.label, disabled2 || !!raw.disabled, out);
       else if (typeof raw !== "string" && isGroup(raw)) collectLeaves(raw.options, raw.label, disabled2 || !!raw.disabled, out);
       else {
-        const o = normalize(raw);
+        const o = normalizeOpt(raw);
         out.push({ opt: o, disabled: disabled2 || !!o.disabled, group });
       }
     }
@@ -98,28 +101,11 @@ const Select = (props) => {
   const byValue = new Map(allLeaves.map((l) => [l.opt.value, l.opt]));
   const filtering = filter !== void 0 && filter !== false;
   const q = query.trim();
-  const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const queryRe = filtering && typeof filter !== "function" && q ? new RegExp(q.split(/\s+/).map(escapeRe).join("\\s+"), "i") : null;
-  const matches = (o) => typeof filter === "function" ? filter(o, q) : !queryRe || [o.value, o.label ?? "", o.hint ?? ""].some((s) => queryRe.test(s));
+  const queryRe = filtering && typeof filter !== "function" ? matchQueryRegex(q) : null;
+  const matches = (o) => typeof filter === "function" ? filter(o, q) : matchesQuery(o, queryRe);
   const prune = typeof filter === "function" || filtering && !!q;
   const visibleLeaves = prune ? allLeaves.filter((l) => matches(l.opt)) : allLeaves;
   const flattening = filtering && !!q;
-  const highlight = (text) => {
-    if (!queryRe) return text;
-    const re = new RegExp(queryRe.source, "gi");
-    const out = [];
-    let last = 0;
-    let m;
-    while ((m = re.exec(text)) !== null) {
-      if (m.index > last) out.push(text.slice(last, m.index));
-      out.push(/* @__PURE__ */ jsx("b", { children: m[0] }, out.length));
-      last = m.index + m[0].length;
-      if (m[0].length === 0) re.lastIndex++;
-    }
-    if (out.length === 0) return text;
-    if (last < text.length) out.push(text.slice(last));
-    return out;
-  };
   const selectedValues = Array.isArray(currentRaw) ? currentRaw : currentRaw != null ? [currentRaw] : [];
   const isSelected = (v) => selectedValues.includes(v);
   const selectedOptions = selectedValues.map((v) => byValue.get(v)).filter(Boolean);
@@ -158,12 +144,17 @@ const Select = (props) => {
     if (!controlled) setInternal(next);
     emit?.(next, { all: true, selected: !allSelected });
   };
+  const clear = () => {
+    const next = multiple ? [] : void 0;
+    if (!controlled) setInternal(next);
+    emit?.(next, { all: true, selected: false });
+  };
   const renderOptionRow = (o, disabled2) => {
     const optState = { value: o.value, selected: isSelected(o.value), disabled: disabled2 };
     const custom = renderOption?.(o, optState);
     const customMark = renderIndicator?.(optState);
     const ariaSelectable = !multiple && mark === "none" ? { role: "menuitemradio", "aria-checked": isSelected(o.value) ? "true" : "false" } : void 0;
-    const isolateHint = multiple && selectAll && !disabled2 ? IS_MAC ? "\u2325+Click to select only this" : "Alt+Click to select only this" : void 0;
+    const isolateHint = multiple && selectAll && !disabled2 ? ISOLATE_HINT : void 0;
     const tip = o.tooltip ?? isolateHint;
     const hintOnly = o.tooltip == null && isolateHint != null;
     return /* @__PURE__ */ jsxs(
@@ -173,8 +164,8 @@ const Select = (props) => {
         selectionIndicator: menuItemIndicator,
         ...ariaSelectable,
         indicator: customMark ?? void 0,
-        label: custom ? void 0 : queryRe ? highlight(o.label ?? o.value) : o.label ?? o.value,
-        hint: custom ? void 0 : queryRe && o.hint ? highlight(o.hint) : o.hint,
+        label: custom ? void 0 : highlight(o.label ?? o.value, queryRe),
+        hint: custom ? void 0 : o.hint ? highlight(o.hint, queryRe) : o.hint,
         icon: custom ? void 0 : o.icon,
         tone: o.tone,
         toneSelected,
@@ -219,7 +210,7 @@ const Select = (props) => {
         if (inner.length) out.push(/* @__PURE__ */ jsx(MenuGroup, { label: raw.label, children: inner }, `grp-${i}-${raw.label}`));
         return;
       }
-      const o = normalize(raw);
+      const o = normalizeOpt(raw);
       if (typeof filter === "function" && !matches(o)) return;
       out.push(renderOptionRow(o, disabled2 || !!o.disabled));
     });
@@ -256,7 +247,7 @@ const Select = (props) => {
         readOnly: true,
         dimActions: true,
         disabled,
-        leading: icon ? /* @__PURE__ */ jsx(Icon, { shape: icon }) : void 0,
+        leading: leading ?? (icon ? /* @__PURE__ */ jsx(Icon, { shape: icon }) : void 0),
         size,
         status,
         statusIcon,
@@ -329,7 +320,9 @@ const Select = (props) => {
             ),
             /* @__PURE__ */ jsx(MenuSeparator, {})
           ] }),
-          visibleLeaves.length === 0 ? renderEmpty?.({ query: q }) : flattening ? renderFlat() : renderTree(options, false)
+          visibleLeaves.length === 0 ? renderEmpty?.({ query: q }) : flattening ? renderFlat() : renderTree(options, false),
+          clearable && selectedValues.length > 0 && // Pinned in the footer so it never scrolls away in a long / filtered list.
+          /* @__PURE__ */ jsx("div", { slot: "footer", className: styles.footer, children: /* @__PURE__ */ jsx(MenuItem, { icon: "x", label: clearLabel, "data-menu-open": "", onSelect: clear }) })
         ]
       }
     )

package/dist/components/Select.module.css

@@ -1 +1 @@
-.chevron{margin-inline-end:7px;transition:transform .15s ease}.chevron.open{transform:rotate(180deg)}.filter{padding:4px 4px 0}
+.chevron{margin-inline-end:7px;transition:transform .15s ease}.chevron.open{transform:rotate(180deg)}.filter{padding:4px 4px 0}.footer{padding:var(--menu-padding, 4px);border-top:1px solid var(--border-4)}

package/dist/components/SelectFaceted.d.ts

@@ -0,0 +1,190 @@
+import type { BaseProps } from '../general_types';
+import type { IconShape } from '../elements/a-icon.shapes';
+import type { SelectItem, SelectOption } from './Select';
+interface FacetBase {
+    /** The facet's namespace — the key its value is stored under in the value
+     *  record, and what `onValueChange`'s `attrs.facet` reports. Unique across
+     *  `facets`. */
+    key: string;
+    /** The facet's row label in the menu. */
+    label: string;
+    /** Leading icon on the facet's row. */
+    icon?: IconShape;
+}
+/** A per-facet option-list filter (like `Select`'s `filter`): `true` uses the
+ *  built-in case-insensitive substring match on an option's value / label /
+ *  hint; a function `(option, query) => boolean` does custom matching. */
+export type FacetFilter = boolean | ((option: SelectOption, query: string) => boolean);
+/** Pick **one** option. Value: the chosen option's `value` string (or
+ *  `undefined` when cleared). Re-picking the selected option clears it. Options
+ *  are `Select`'s `SelectItem`s — bare strings or `SelectOption`s carrying the
+ *  same fields (`value`, `label`, `hint`, `icon`, `tone`, `disabled`). */
+export interface SelectFacetSingle extends FacetBase {
+    kind: 'single';
+    /** The options — bare strings or `SelectOption`s (groups / submenus are
+     *  flattened to their leaves). */
+    options: SelectItem[];
+    /** Add a search field atop this facet's flyout that filters its options. */
+    filter?: FacetFilter;
+}
+/** Pick **any number** of options. Value: an array of the chosen `value`
+ *  strings (empty array clears the facet). Options are the same `SelectItem`s
+ *  as `single`. */
+export interface SelectFacetMultiple extends FacetBase {
+    kind: 'multiple';
+    /** The options — bare strings or `SelectOption`s (groups / submenus flattened). */
+    options: SelectItem[];
+    /** Add a search field atop this facet's flyout that filters its options. */
+    filter?: FacetFilter;
+    /** A "Select all" row that toggles every option. On by default — set `false`
+     *  to drop it.
+     *  @defaultValue true */
+    selectAll?: boolean;
+    /** Label for the `selectAll` row.
+     *  @defaultValue Select all */
+    selectAllLabel?: string;
+}
+/** Free-form substring. Value: the typed string (or `undefined` when empty).
+ *  Applies on Enter or blur — not on every keystroke. */
+export interface SelectFacetText extends FacetBase {
+    kind: 'text';
+    /** Placeholder for the text field. */
+    placeholder?: string;
+}
+/** Context handed to a `custom` facet's `render`. */
+export interface SelectFacetCustomContext<V> {
+    /** The facet's current value (`undefined` when unset). */
+    value: V | undefined;
+    /** Apply a new value for this facet — pass `undefined` to clear it. */
+    onChange: (next: V | undefined) => void;
+    /** Close the whole filter menu (e.g. after applying from a custom editor). */
+    close: () => void;
+}
+/** Bring your own editor and value type — the escape hatch for anything the
+ *  built-in kinds don't cover, including object-shaped values (a date range, a
+ *  numeric comparator, …). */
+export interface SelectFacetCustom<V = unknown> extends FacetBase {
+    kind: 'custom';
+    /** Render the facet's editor inside its flyout. The returned node stays
+     *  mounted while the menu is open. */
+    render: (ctx: SelectFacetCustomContext<V>) => React.ReactNode;
+    /** Reduce an active value to a short summary shown on the facet's row (a
+     *  string or any node). Called only when the value is set. */
+    summary: (value: V) => React.ReactNode;
+}
+/** One facet (dimension) of the filter, discriminated by `kind`. */
+export type SelectFacet = SelectFacetSingle | SelectFacetMultiple | SelectFacetText | SelectFacetCustom;
+/** The filter value: a facet key → that facet's value. Per kind the value is a
+ *  `string` (single / text), a `string[]` (multiple), or your own `V` (custom).
+ *  A cleared facet is absent from the record (not a falsy entry). */
+export type SelectFacetedValue = Record<string, unknown>;
+/** Second argument to `onValueChange` — what changed. A single-facet edit
+ *  carries `facet` / `kind` / the facet's new `value`; the "Clear all" row
+ *  carries `all: true`. Narrow on `'all' in attrs`. */
+export type SelectFacetedChangeAttrs = {
+    /** The facet key that changed. */
+    facet: string;
+    /** That facet's kind. */
+    kind: SelectFacet['kind'];
+    /** The facet's new value (`undefined` when the facet was cleared). */
+    value: unknown;
+} | {
+    /** Marks the change as the "Clear all" row emptying every facet. */
+    all: true;
+};
+/** Snapshot passed to `renderTrigger` so a custom trigger can reflect the
+ *  current filter and open state. */
+export interface SelectFacetedTriggerState {
+    /** Whether the menu is open — use it for `aria-expanded` and a chevron. */
+    open: boolean;
+    /** The whole current value record. */
+    value: SelectFacetedValue;
+    /** Number of **active facets** (each facet with a value counts once,
+     *  regardless of how many options it holds) — the default badge count. */
+    count: number;
+    /** Whether the whole control is disabled. */
+    disabled: boolean;
+}
+export interface SelectFacetedProps extends Omit<BaseProps, 'children'> {
+    /** The facets (dimensions) to filter across, each with its own editor kind. */
+    facets: SelectFacet[];
+    /** Controlled value — the facet-keyed record. When provided, the consumer
+     *  owns state: a pick only *requests* a change via `onValueChange` (reject by
+     *  not updating). Leave undefined for uncontrolled. */
+    value?: SelectFacetedValue;
+    /** Initial value for the uncontrolled case (the wrapper then owns it). */
+    defaultValue?: SelectFacetedValue;
+    /** Fires after any facet changes, with the new full value record and an
+     *  attrs snapshot of what changed. */
+    onValueChange?: (value: SelectFacetedValue, attrs: SelectFacetedChangeAttrs) => void;
+    /** Default trigger's button label.
+     *  @defaultValue Filter */
+    label?: string;
+    /** Default trigger's leading icon.
+     *  @defaultValue filter */
+    icon?: IconShape;
+    /** Default trigger's button size.
+     *  @defaultValue medium */
+    size?: 'small' | 'medium' | 'large';
+    /** Default trigger's button priority.
+     *  @defaultValue secondary */
+    priority?: 'primary' | 'secondary';
+    /** Disable the whole control. */
+    disabled?: boolean;
+    /** Tone applied to a selected option row in the facet flyouts (label, selected
+     *  tint, and the check / checkbox indicator). A named tone or a custom CSS
+     *  colour, matching `Select`'s `toneSelected`. Defaults to a neutral selection. */
+    toneSelected?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Add a single search field to the top of the root menu that flattens every
+     *  `single` / `multiple` facet's options into one list and searches across them
+     *  — typing "alice" surfaces it under both an Assignee and an Owner facet, each
+     *  selectable in place. `text` / `custom` facets are reachable when the search is
+     *  empty. Matching uses each facet's `filter` function if it has one, else the
+     *  built-in substring match. */
+    searchable?: boolean;
+    /** Placeholder for the global search field.
+     *  @defaultValue Filter… */
+    searchPlaceholder?: string;
+    /** Show the per-facet "Clear" row and the "Clear all" row.
+     *  @defaultValue true */
+    clearable?: boolean;
+    /** Label for the "Clear all" row.
+     *  @defaultValue Clear all */
+    clearAllLabel?: string;
+    /** Render your own trigger in place of the default `Button`. Receives a
+     *  `SelectFacetedTriggerState`; **return exactly one focusable element** (the
+     *  menu anchors to it as its previous sibling and opens it on click). Give it
+     *  `aria-haspopup="menu"` plus `aria-expanded={state.open}`. The custom trigger
+     *  owns its own styling — `className` / `style` / other props apply to the
+     *  *default* trigger only, so put your own on the element you return. */
+    renderTrigger?: (state: SelectFacetedTriggerState) => React.ReactNode;
+}
+/**
+ * `<SelectFaceted>` — a faceted filter: one trigger opens a menu of facets
+ * (dimensions), each a submenu flyout with its own editor. Facet kinds:
+ * `'single'` (pick one), `'multiple'` (pick many), `'text'` (free-form
+ * substring, applied on Enter / blur), and `'custom'` (bring your own editor +
+ * value, including object-shaped values). The value is a
+ * `Record<facetKey, value>`, so the same option value under two facets stays
+ * distinct.
+ *
+ * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * There is no `a-select-faceted` element — this wrapper is the coordinator.
+ *
+ * Requires `@antadesign/anta/elements` (client-side only).
+ *
+ * @example
+ * ```tsx
+ * <SelectFaceted
+ *   facets={[
+ *     { key: 'assignee', label: 'Assignee', kind: 'multiple', options: people },
+ *     { key: 'owner',    label: 'Owner',    kind: 'single',   options: people },
+ *     { key: 'title',    label: 'Title',    kind: 'text' },
+ *   ]}
+ *   value={filters}
+ *   onValueChange={setFilters}
+ * />
+ * ```
+ */
+export declare const SelectFaceted: (props: SelectFacetedProps) => any;
+export {};

package/dist/components/SelectFaceted.js

@@ -0,0 +1,332 @@
+import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { useState, useMemo } from "../jsx-runtime";
+import { nativeStateChange, ISOLATE_HINT } from "../anta_helpers";
+import { normalizeOpt, matchQueryRegex, matchesQuery } from "./select-options";
+import { Button } from "./Button";
+import { Menu } from "./Menu";
+import { MenuItem } from "./MenuItem";
+import { MenuGroup } from "./MenuGroup";
+import { MenuSeparator } from "./MenuSeparator";
+import { Tag } from "./Tag";
+import { Input } from "./Input";
+import { Tooltip } from "./Tooltip";
+import styles from "./SelectFaceted.module.css";
+const leavesOf = (items) => {
+  const out = [];
+  for (const it of items) {
+    if (typeof it !== "string" && Array.isArray(it.submenu))
+      out.push(...leavesOf(it.submenu));
+    else if (typeof it !== "string" && Array.isArray(it.options))
+      out.push(...leavesOf(it.options));
+    else out.push(normalizeOpt(it));
+  }
+  return out;
+};
+const isEmpty = (v) => v == null || v === "" || Array.isArray(v) && v.length === 0;
+const defaultMatch = (o, query) => matchesQuery(o, matchQueryRegex(query));
+const SelectFaceted = (props) => {
+  const {
+    facets,
+    value,
+    defaultValue,
+    onValueChange,
+    label = "Filter",
+    icon = "filter",
+    size,
+    priority = "secondary",
+    disabled,
+    toneSelected,
+    searchable,
+    searchPlaceholder = "Filter\u2026",
+    clearable = true,
+    clearAllLabel = "Clear all",
+    renderTrigger,
+    className,
+    style,
+    ...rest
+  } = props;
+  const controlled = value !== void 0;
+  const [internal, setInternal] = useState(defaultValue ?? {});
+  const current = controlled ? value : internal;
+  const [open, setOpen] = useState(false);
+  const [drafts, setDrafts] = useState({});
+  const [seenText, setSeenText] = useState({});
+  {
+    let nextSeen = null;
+    let nextDrafts = drafts;
+    for (const f of facets) {
+      if (f.kind !== "text") continue;
+      if (seenText[f.key] !== current[f.key]) {
+        nextSeen = { ...nextSeen ?? seenText, [f.key]: current[f.key] };
+        nextDrafts = { ...nextDrafts, [f.key]: current[f.key] ?? "" };
+      }
+    }
+    if (nextSeen) {
+      setSeenText(nextSeen);
+      setDrafts(nextDrafts);
+    }
+  }
+  const [queries, setQueries] = useState({});
+  const [rootQuery, setRootQuery] = useState("");
+  const [activeIds, setActiveIds] = useState({});
+  const onActive = (key) => (e) => {
+    const id = nativeStateChange(e).detail?.id ?? null;
+    setActiveIds((s) => s[key] === id ? s : { ...s, [key]: id });
+  };
+  const activeCount = facets.reduce((n, f) => n + (isEmpty(current[f.key]) ? 0 : 1), 0);
+  const leavesByKey = useMemo(
+    () => new Map(
+      facets.map((f) => [
+        f.key,
+        f.kind === "single" || f.kind === "multiple" ? leavesOf(f.options) : []
+      ])
+    ),
+    [facets]
+  );
+  const commit = (next, attrs) => {
+    if (!controlled) setInternal(next);
+    onValueChange?.(next, attrs);
+  };
+  const setFacet = (facet, nextValue) => {
+    const cleared = isEmpty(nextValue);
+    const next = { ...current };
+    if (cleared) delete next[facet.key];
+    else next[facet.key] = nextValue;
+    commit(next, { facet: facet.key, kind: facet.kind, value: cleared ? void 0 : nextValue });
+  };
+  const clearAll = () => commit({}, { all: true });
+  const visibleLeavesOf = (facet) => {
+    const leaves = leavesByKey.get(facet.key) ?? [];
+    if (!facet.filter) return leaves;
+    const q = queries[facet.key] ?? "";
+    const match = typeof facet.filter === "function" ? facet.filter : defaultMatch;
+    return leaves.filter((o) => match(o, q));
+  };
+  const filterHeader = (facet) => facet.filter ? /* @__PURE__ */ jsx("div", { slot: "header", "data-menu-open": "", style: { padding: "4px" }, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      "data-menu-search": "",
+      size: "small",
+      value: queries[facet.key] ?? "",
+      placeholder: "Filter\u2026",
+      "aria-label": `Filter ${facet.label}`,
+      "aria-autocomplete": "list",
+      "aria-activedescendant": activeIds[facet.key] ?? void 0,
+      onInput: (e) => setQueries((s) => ({ ...s, [facet.key]: e.currentTarget.value }))
+    }
+  ) }) : null;
+  const optionRow = (facet, opt, keyPrefix = "") => {
+    const shared = {
+      icon: opt.icon,
+      label: opt.label ?? opt.value,
+      hint: opt.hint,
+      tone: opt.tone,
+      toneSelected,
+      disabled: opt.disabled,
+      "data-menu-open": ""
+    };
+    if (facet.kind === "single") {
+      const cur = current[facet.key];
+      return /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          ...shared,
+          selectionIndicator: "check",
+          selected: cur === opt.value,
+          onSelect: () => setFacet(facet, cur === opt.value ? void 0 : opt.value)
+        },
+        `${keyPrefix}${opt.value}`
+      );
+    }
+    const arr = current[facet.key] ?? [];
+    const isolable = facet.selectAll !== false && !opt.disabled;
+    const tip = opt.tooltip ?? (isolable ? ISOLATE_HINT : void 0);
+    const hintOnly = opt.tooltip == null && isolable;
+    return /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        ...shared,
+        selectionIndicator: "checkbox",
+        selected: arr.includes(opt.value),
+        onSelect: (e) => isolable && e?.altKey ? setFacet(facet, [opt.value]) : setFacet(facet, arr.includes(opt.value) ? arr.filter((v) => v !== opt.value) : [...arr, opt.value]),
+        children: tip && /* @__PURE__ */ jsx(Tooltip, { ...hintOnly ? { follow: true, delay: 700 } : {}, children: tip })
+      },
+      `${keyPrefix}${opt.value}`
+    );
+  };
+  const renderSingle = (facet) => visibleLeavesOf(facet).map((opt) => optionRow(facet, opt));
+  const renderMultiple = (facet) => {
+    const arr = current[facet.key] ?? [];
+    const leaves = visibleLeavesOf(facet);
+    const enabled = leaves.filter((o) => !o.disabled).map((o) => o.value);
+    const allOn = enabled.length > 0 && enabled.every((v) => arr.includes(v));
+    const someOn = enabled.some((v) => arr.includes(v));
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      facet.selectAll !== false && leaves.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            selectionIndicator: "checkbox",
+            selected: allOn,
+            indeterminate: someOn && !allOn,
+            label: facet.selectAllLabel ?? "Select all",
+            "data-menu-open": "",
+            onSelect: () => setFacet(
+              facet,
+              // Toggle only the visible set, preserving picks hidden by the filter.
+              allOn ? arr.filter((v) => !enabled.includes(v)) : [.../* @__PURE__ */ new Set([...arr, ...enabled])]
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(MenuSeparator, {})
+      ] }),
+      leaves.map((opt) => optionRow(facet, opt))
+    ] });
+  };
+  const renderFlatResults = () => {
+    const groups = facets.filter((f) => f.kind === "single" || f.kind === "multiple").map((facet) => {
+      const match = typeof facet.filter === "function" ? facet.filter : defaultMatch;
+      return { facet, matched: (leavesByKey.get(facet.key) ?? []).filter((o) => match(o, rootQuery)) };
+    }).filter((g) => g.matched.length > 0);
+    return groups.map(({ facet, matched }) => /* @__PURE__ */ jsx(MenuGroup, { label: facet.label, children: matched.map((opt) => optionRow(facet, opt, `${facet.key}:`)) }, facet.key));
+  };
+  const renderText = (facet) => {
+    const applied = current[facet.key] ?? "";
+    const draft = drafts[facet.key] ?? applied;
+    const apply = () => {
+      const next = draft.trim() || void 0;
+      if (next !== (applied || void 0)) setFacet(facet, next);
+    };
+    return (
+      // `data-menu-open` keeps the menu open through typing; the value commits on
+      // Enter / blur, not per keystroke.
+      /* @__PURE__ */ jsx("div", { "data-menu-open": "", style: { padding: "4px" }, children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          size: "small",
+          value: draft,
+          placeholder: facet.placeholder,
+          "aria-label": facet.label,
+          onInput: (e) => setDrafts((d) => ({ ...d, [facet.key]: e.currentTarget.value })),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              apply();
+            }
+          },
+          onBlur: apply
+        }
+      ) })
+    );
+  };
+  const renderCustom = (facet) => /* @__PURE__ */ jsx("div", { "data-menu-open": "", children: facet.render({
+    value: current[facet.key],
+    onChange: (next) => setFacet(facet, next),
+    close: () => setOpen(false)
+  }) });
+  const renderEditor = (facet) => {
+    const isOptions = facet.kind === "single" || facet.kind === "multiple";
+    const body = facet.kind === "single" ? renderSingle(facet) : facet.kind === "multiple" ? renderMultiple(facet) : facet.kind === "text" ? renderText(facet) : renderCustom(facet);
+    const hasValue = !isEmpty(current[facet.key]);
+    return /* @__PURE__ */ jsxs(Menu, { onactivedescendant: isOptions && facet.filter ? onActive(facet.key) : void 0, children: [
+      isOptions && filterHeader(facet),
+      body,
+      clearable && hasValue && /* @__PURE__ */ jsx("div", { slot: "footer", className: styles.footer, children: /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          icon: "x",
+          label: "Clear",
+          "data-menu-open": "",
+          onSelect: () => setFacet(facet, void 0)
+        }
+      ) })
+    ] });
+  };
+  const summaryOf = (facet) => {
+    const v = current[facet.key];
+    if (isEmpty(v)) return null;
+    switch (facet.kind) {
+      case "single": {
+        const opt = (leavesByKey.get(facet.key) ?? []).find((o) => o.value === v);
+        return opt?.label ?? String(v);
+      }
+      case "multiple":
+        return String(v.length);
+      case "text":
+        return String(v);
+      case "custom":
+        return facet.summary(v);
+    }
+  };
+  const triggerState = {
+    open,
+    value: current,
+    count: activeCount,
+    disabled: !!disabled
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderTrigger ? renderTrigger(triggerState) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon,
+        label,
+        priority,
+        size,
+        disabled,
+        "aria-haspopup": "menu",
+        "aria-expanded": open ? "true" : "false",
+        className,
+        style,
+        ...rest,
+        children: activeCount > 0 && /* @__PURE__ */ jsx(Tag, { size: "small", priority: "primary", tone: "brand", children: String(activeCount) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        open,
+        onStateChange: (_e, { next }) => {
+          setOpen(next);
+          if (!next) setRootQuery("");
+        },
+        onactivedescendant: searchable ? onActive("__root__") : void 0,
+        children: [
+          searchable && // Pinned global search: flattens all options facets while a query is active.
+          /* @__PURE__ */ jsx("div", { slot: "header", "data-menu-open": "", className: styles.search, children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              "data-menu-search": "",
+              size: "small",
+              value: rootQuery,
+              placeholder: searchPlaceholder,
+              "aria-label": "Filter all facets",
+              "aria-autocomplete": "list",
+              "aria-activedescendant": activeIds["__root__"] ?? void 0,
+              onInput: (e) => setRootQuery(e.currentTarget.value)
+            }
+          ) }),
+          searchable && rootQuery.trim() ? renderFlatResults() : facets.map((facet) => /* @__PURE__ */ jsxs(MenuItem, { submenu: true, icon: facet.icon, label: facet.label, children: [
+            (() => {
+              const s = summaryOf(facet);
+              return s != null ? /* @__PURE__ */ jsx(Tag, { size: "small", tone: "brand", children: s }) : null;
+            })(),
+            renderEditor(facet)
+          ] }, facet.key)),
+          clearable && /* @__PURE__ */ jsx("div", { slot: "footer", className: styles.footer, children: /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: "filter-x",
+              label: clearAllLabel,
+              disabled: activeCount === 0,
+              "data-menu-open": "",
+              onSelect: clearAll
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  SelectFaceted
+};

package/dist/components/SelectFaceted.module.css

@@ -0,0 +1 @@
+.search{padding:var(--menu-padding, 4px)}.footer{padding:var(--menu-padding, 4px);border-top:1px solid var(--border-4)}