@viax.io/uxm 4.36.0

package/dist/ui/listbox/listbox.cjs

@@ -0,0 +1,502 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var listbox_exports = {};
+__export(listbox_exports, {
+  DEFAULT_MULTI_REQUIRED_MESSAGE: () => DEFAULT_MULTI_REQUIRED_MESSAGE,
+  Listbox: () => Listbox,
+  MultiListbox: () => MultiListbox,
+  SEARCHABLE_AUTO_THRESHOLD: () => SEARCHABLE_AUTO_THRESHOLD
+});
+module.exports = __toCommonJS(listbox_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_cn = require("../../helpers/cn.cjs");
+var import_icon = require("../icon/index.cjs");
+var import_popover = require("../popover/index.cjs");
+const SEARCHABLE_AUTO_THRESHOLD = 6;
+const DEFAULT_MULTI_REQUIRED_MESSAGE = "Select at least one option";
+function ListboxCore({
+  items,
+  getKey,
+  getLabel,
+  renderTrigger,
+  renderItem,
+  searchable = true,
+  searchPlaceholder = "Search\u2026",
+  searchAriaLabel,
+  filterItems,
+  groupBy,
+  renderGroupHeader,
+  emptyState,
+  columns = 1,
+  footer,
+  isItemDisabled,
+  indicator,
+  placement = "bottom-start",
+  matchAnchorWidth = true,
+  minPanelWidth,
+  maxPanelWidth,
+  portal = true,
+  anchorRef,
+  showCheckmark = true,
+  panelClassName,
+  panelStyle,
+  className,
+  style,
+  disabled = false,
+  onOpenChange,
+  "aria-label": ariaLabel,
+  selectedKeys,
+  triggerSelected,
+  onSelect,
+  closeOnSelect
+}) {
+  const [open, setOpenState] = (0, import_react.useState)(false);
+  const [search, setSearch] = (0, import_react.useState)("");
+  const [active, setActive] = (0, import_react.useState)(0);
+  const showSearch = searchable === "auto" ? items.length > SEARCHABLE_AUTO_THRESHOLD : searchable;
+  const triggerRef = (0, import_react.useRef)(null);
+  const searchRef = (0, import_react.useRef)(null);
+  const listRef = (0, import_react.useRef)(null);
+  const optionRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const panelId = (0, import_react.useId)();
+  const setOpen = (0, import_react.useCallback)(
+    (next) => {
+      if (next === open) return;
+      setOpenState(next);
+      onOpenChange?.(next);
+    },
+    [open, onOpenChange]
+  );
+  const filtered = (0, import_react.useMemo)(() => {
+    if (!search) return items;
+    if (filterItems) return filterItems(items, search);
+    const q = search.toLowerCase();
+    return items.filter((it) => getLabel(it).toLowerCase().includes(q));
+  }, [items, search, filterItems, getLabel]);
+  const { rows, selectableIndices } = (0, import_react.useMemo)(() => {
+    const out = [];
+    const idx = [];
+    if (groupBy) {
+      const seen = /* @__PURE__ */ new Set();
+      const order = [];
+      for (const it of filtered) {
+        const g = groupBy(it);
+        if (!seen.has(g)) {
+          seen.add(g);
+          order.push(g);
+        }
+      }
+      for (const g of order) {
+        out.push({ kind: "header", group: g, key: `__h_${g}` });
+        for (const it of filtered) {
+          if (groupBy(it) !== g) continue;
+          const disabled2 = isItemDisabled?.(it) ?? false;
+          out.push({ kind: "item", item: it, key: getKey(it), disabled: disabled2 });
+          if (!disabled2) idx.push(out.length - 1);
+        }
+      }
+    } else {
+      for (const it of filtered) {
+        const disabled2 = isItemDisabled?.(it) ?? false;
+        out.push({ kind: "item", item: it, key: getKey(it), disabled: disabled2 });
+        if (!disabled2) idx.push(out.length - 1);
+      }
+    }
+    return { rows: out, selectableIndices: idx };
+  }, [filtered, groupBy, getKey, isItemDisabled]);
+  (0, import_react.useEffect)(() => {
+    if (selectableIndices.length === 0) {
+      setActive(0);
+      return;
+    }
+    if (active >= selectableIndices.length) {
+      setActive(selectableIndices.length - 1);
+    }
+  }, [selectableIndices.length, active]);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    setSearch("");
+    if (selectedKeys.size === 1) {
+      const sel = [...selectedKeys][0];
+      const flatIndex = selectableIndices.findIndex(
+        (i) => rows[i].kind === "item" && rows[i].key === sel
+      );
+      setActive(flatIndex >= 0 ? flatIndex : 0);
+    } else {
+      setActive(0);
+    }
+  }, [open]);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const rowIdx = selectableIndices[active];
+    if (rowIdx == null) return;
+    const row = rows[rowIdx];
+    if (!row || row.kind !== "item") return;
+    const el = optionRefs.current.get(row.key);
+    el?.scrollIntoView({ block: "nearest" });
+  }, [active, open, rows, selectableIndices]);
+  const commitSelection = (0, import_react.useCallback)(
+    (item) => {
+      onSelect(item);
+      if (closeOnSelect) setOpen(false);
+    },
+    [onSelect, closeOnSelect, setOpen]
+  );
+  const onPanelKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (selectableIndices.length === 0) return;
+        setActive((i) => (i + 1) % selectableIndices.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (selectableIndices.length === 0) return;
+        setActive((i) => (i - 1 + selectableIndices.length) % selectableIndices.length);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActive(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        if (selectableIndices.length > 0) setActive(selectableIndices.length - 1);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const rowIdx = selectableIndices[active];
+        const row = rowIdx != null ? rows[rowIdx] : void 0;
+        if (row && row.kind === "item") commitSelection(row.item);
+      }
+    },
+    [active, rows, selectableIndices, commitSelection]
+  );
+  const onTriggerKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        setOpen(!open);
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setOpen(true);
+      }
+    },
+    [disabled, open, setOpen]
+  );
+  const triggerProps = (0, import_react.useMemo)(
+    () => ({
+      ref: (el) => {
+        triggerRef.current = el;
+      },
+      onClick: () => {
+        if (disabled) return;
+        setOpen(!open);
+      },
+      onKeyDown: onTriggerKeyDown,
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": open ? panelId : void 0,
+      disabled: disabled || void 0
+    }),
+    [disabled, open, setOpen, onTriggerKeyDown, panelId]
+  );
+  const optionId = (rowIdx) => `${panelId}-opt-${rowIdx}`;
+  const activeRowIdx = selectableIndices[active];
+  const activeDescendantId = open && activeRowIdx != null && rows[activeRowIdx]?.kind === "item" ? optionId(activeRowIdx) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_cn.cn)("uxm-listbox", className), style, children: [
+    renderTrigger({ open, selected: triggerSelected, triggerProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_popover.Popover,
+      {
+        open,
+        onOpenChange: setOpen,
+        anchor: anchorRef ?? triggerRef,
+        placement,
+        matchAnchorWidth,
+        minWidth: minPanelWidth,
+        maxWidth: maxPanelWidth,
+        portal,
+        initialFocus: showSearch ? searchRef : listRef,
+        role: "listbox",
+        "aria-label": ariaLabel,
+        id: panelId,
+        className: (0, import_cn.cn)("uxm-listbox__panel", panelClassName),
+        style: panelStyle,
+        children: [
+          showSearch && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-listbox__search", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_icon.Icon,
+              {
+                glyph: "search",
+                size: 14,
+                className: "uxm-listbox__search-icon"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                ref: searchRef,
+                type: "text",
+                className: "uxm-listbox__search-input",
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                onKeyDown: onPanelKeyDown,
+                placeholder: searchPlaceholder,
+                autoComplete: "off",
+                spellCheck: false,
+                "aria-label": searchAriaLabel,
+                "aria-controls": panelId,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": activeDescendantId
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ref: listRef,
+              className: "uxm-listbox__list",
+              style: columns > 1 ? { "--uxm-listbox-list-columns": columns } : void 0,
+              tabIndex: showSearch ? void 0 : -1,
+              onKeyDown: showSearch ? void 0 : onPanelKeyDown,
+              children: selectableIndices.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-listbox__empty", children: emptyState ?? "No matches" }) : rows.map((row, rowIdx) => {
+                if (row.kind === "header") {
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-listbox__group-header", role: "presentation", children: renderGroupHeader ? renderGroupHeader(row.group) : row.group }, row.key);
+                }
+                const isActive = selectableIndices[active] === rowIdx;
+                const isSelected = selectedKeys.has(row.key);
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "button",
+                  {
+                    id: optionId(rowIdx),
+                    ref: (el) => {
+                      if (el) optionRefs.current.set(row.key, el);
+                      else optionRefs.current.delete(row.key);
+                    },
+                    type: "button",
+                    role: "option",
+                    "aria-selected": isSelected,
+                    "aria-disabled": row.disabled || void 0,
+                    disabled: row.disabled || void 0,
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      if (row.disabled) return;
+                      commitSelection(row.item);
+                    },
+                    onMouseEnter: () => {
+                      if (row.disabled) return;
+                      const flatIdx = selectableIndices.indexOf(rowIdx);
+                      if (flatIdx >= 0) setActive(flatIdx);
+                    },
+                    className: (0, import_cn.cn)(
+                      "uxm-listbox__option",
+                      isActive && "uxm-listbox__option--active",
+                      isSelected && "uxm-listbox__option--selected",
+                      row.disabled && "uxm-listbox__option--disabled"
+                    ),
+                    children: [
+                      indicator === "checkbox" && // Multi-select pattern — left-aligned checkbox slot
+                      // on every row, filled when selected. Visual-only
+                      // (no real <input>) so nesting inside the row
+                      // <button> stays valid HTML; the row button owns
+                      // clicks + keys. `aria-hidden` because aria-selected
+                      // on the parent already conveys state to AT.
+                      //
+                      // The `uxm-checkbox` class on the wrapper is what
+                      // makes the saved `.uxm-checkbox { --uxm-checkbox-*: … }`
+                      // rule from the Checkbox atom's workbench tuning
+                      // reach down into our marker — CSS custom properties
+                      // only cascade from where they're declared. Without
+                      // this class, tuning Checkbox colours has no effect
+                      // here. Base `.uxm-checkbox` styles (display, gap,
+                      // cursor) are harmless overlap with the indicator's
+                      // own inline-flex layout.
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-listbox__option-indicator uxm-checkbox", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "span",
+                        {
+                          className: (0, import_cn.cn)(
+                            "uxm-listbox__option-checkbox",
+                            isSelected && "uxm-listbox__option-checkbox--checked"
+                          ),
+                          children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "check", size: 10 })
+                        }
+                      ) }),
+                      renderItem(row.item, { active: isActive, selected: isSelected }),
+                      indicator === "checkmark" && isSelected && showCheckmark && // Single-select pattern — right-aligned ✓ on the
+                      // selected row only. Reserving the slot on unselected
+                      // rows would create a constant leading/trailing
+                      // indent that reads as multi-select; right-edge +
+                      // only-when-selected keeps unselected rows clean,
+                      // and the row's other content stays put because
+                      // `margin-left: auto` reflows from the trailing edge.
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-listbox__option-checkmark", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "check", size: 14 }) })
+                    ]
+                  },
+                  row.key
+                );
+              })
+            }
+          ),
+          footer && (() => {
+            const content = typeof footer === "function" ? footer({ close: () => setOpen(false) }) : footer;
+            return content ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-listbox__footer", children: content }) : null;
+          })()
+        ]
+      }
+    )
+  ] });
+}
+function Listbox({
+  value,
+  onChange,
+  getKey,
+  closeOnSelect = true,
+  ...rest
+}) {
+  const selectedKeys = (0, import_react.useMemo)(
+    () => value ? /* @__PURE__ */ new Set([getKey(value)]) : /* @__PURE__ */ new Set(),
+    [value, getKey]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ListboxCore,
+    {
+      ...rest,
+      getKey,
+      selectedKeys,
+      triggerSelected: value,
+      onSelect: onChange,
+      closeOnSelect,
+      indicator: "checkmark"
+    }
+  );
+}
+function MultiListbox({
+  value,
+  onChange,
+  items,
+  getKey,
+  excludeSelected = false,
+  closeOnSelect = false,
+  showCheckbox = true,
+  commitMode = "change",
+  required = false,
+  requiredMessage = DEFAULT_MULTI_REQUIRED_MESSAGE,
+  onRequiredViolation,
+  footer,
+  onOpenChange,
+  ...rest
+}) {
+  const staged = commitMode === "close";
+  const [draft, setDraft] = (0, import_react.useState)(null);
+  const draftRef = (0, import_react.useRef)(null);
+  const setWorkingDraft = (0, import_react.useCallback)((next) => {
+    draftRef.current = next;
+    setDraft(next);
+  }, []);
+  const working = staged ? draft ?? value : value;
+  const selectedKeys = (0, import_react.useMemo)(
+    () => new Set(working.map(getKey)),
+    [working, getKey]
+  );
+  const visibleItems = (0, import_react.useMemo)(
+    () => excludeSelected ? items.filter((it) => !selectedKeys.has(getKey(it))) : items,
+    [items, excludeSelected, selectedKeys, getKey]
+  );
+  const emit = (0, import_react.useCallback)(
+    (next) => {
+      if (required && next.length === 0) {
+        onRequiredViolation?.(requiredMessage);
+        if (staged) return;
+      }
+      const changed = next.length !== value.length || next.some((n) => !value.some((v) => getKey(v) === getKey(n)));
+      if (changed) onChange(next);
+    },
+    [required, requiredMessage, onRequiredViolation, staged, value, onChange, getKey]
+  );
+  const handleSelect = (0, import_react.useCallback)(
+    (item) => {
+      const k = getKey(item);
+      const next = selectedKeys.has(k) ? working.filter((v) => getKey(v) !== k) : [...working, item];
+      if (staged) setWorkingDraft(next);
+      else emit(next);
+    },
+    [working, selectedKeys, staged, emit, getKey, setWorkingDraft]
+  );
+  const handleOpenChange = (0, import_react.useCallback)(
+    (open) => {
+      onOpenChange?.(open);
+      if (!staged) return;
+      if (open) {
+        setWorkingDraft(value);
+      } else {
+        const final = draftRef.current ?? value;
+        setWorkingDraft(null);
+        emit(final);
+      }
+    },
+    [staged, value, emit, onOpenChange, setWorkingDraft]
+  );
+  const emitRef = (0, import_react.useRef)(emit);
+  (0, import_react.useEffect)(() => {
+    emitRef.current = emit;
+  }, [emit]);
+  (0, import_react.useEffect)(
+    () => () => {
+      const pending = draftRef.current;
+      if (pending !== null) emitRef.current(pending);
+    },
+    []
+  );
+  const valueKeys = (0, import_react.useMemo)(() => JSON.stringify(value.map(getKey)), [value, getKey]);
+  const prevValueKeys = (0, import_react.useRef)(valueKeys);
+  (0, import_react.useEffect)(() => {
+    if (prevValueKeys.current === valueKeys) return;
+    prevValueKeys.current = valueKeys;
+    if (draftRef.current !== null) setWorkingDraft(value);
+  }, [valueKeys, value, setWorkingDraft]);
+  const wrappedFooter = (0, import_react.useMemo)(() => {
+    if (footer == null || typeof footer !== "function") return footer;
+    return ({ close }) => footer({
+      close,
+      selected: working,
+      clear: () => staged ? setWorkingDraft([]) : emit([])
+    });
+  }, [footer, working, staged, emit, setWorkingDraft]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ListboxCore,
+    {
+      ...rest,
+      items: visibleItems,
+      getKey,
+      selectedKeys,
+      triggerSelected: null,
+      onSelect: handleSelect,
+      onOpenChange: handleOpenChange,
+      footer: wrappedFooter,
+      closeOnSelect,
+      indicator: showCheckbox ? "checkbox" : "none"
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_MULTI_REQUIRED_MESSAGE,
+  Listbox,
+  MultiListbox,
+  SEARCHABLE_AUTO_THRESHOLD
+});
+//# sourceMappingURL=listbox.cjs.map

package/dist/ui/listbox/listbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/listbox/listbox.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from 'react';\n\nimport { cn } from '../../helpers/cn';\nimport { Icon } from '../icon';\nimport { Popover, type PopoverPlacement } from '../popover';\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Public constants\n// ─────────────────────────────────────────────────────────────────────────────\n\n/** Item count above which `searchable=\"auto\"` enables the search box. */\nexport const SEARCHABLE_AUTO_THRESHOLD = 6;\n\n/**\n * Default message when a `required` multi-select is left empty. Lives here so\n * every picker (MultiListbox itself, PillSelect's chip-removal path, …) reports\n * the identical text — the one place that rule's wording lives.\n */\nexport const DEFAULT_MULTI_REQUIRED_MESSAGE = 'Select at least one option';\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Public types\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Props the consumer must spread on their trigger element. The `ref` is a\n * callback ref so a single `{...triggerProps}` spread wires up everything\n * (positioning anchor, toggle, ARIA state).\n *\n * Consumers should NOT add their own onClick / aria-expanded /\n * aria-haspopup — they would override the listbox's wiring.\n */\nexport interface ListboxTriggerProps {\n  ref: (el: HTMLElement | null) => void;\n  onClick: () => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n  'aria-haspopup': 'listbox';\n  'aria-expanded': boolean;\n  'aria-controls'?: string;\n  disabled?: boolean;\n}\n\nexport interface ListboxRenderTriggerState<T> {\n  open: boolean;\n  selected: T | null;\n  triggerProps: ListboxTriggerProps;\n}\n\nexport interface ListboxRenderItemState {\n  /** Keyboard-highlighted (arrow keys). */\n  active: boolean;\n  /** Currently selected value. */\n  selected: boolean;\n}\n\ninterface ListboxCommonProps<T> {\n  items: T[];\n  /** Unique stable key per item — used for React keys + active tracking. */\n  getKey: (item: T) => string;\n  /** Plain text label per item — used for default substring filter, type-ahead, a11y. */\n  getLabel: (item: T) => string;\n\n  /** Render the consumer's trigger. Spread `triggerProps` on your button/field. */\n  renderTrigger: (state: ListboxRenderTriggerState<T>) => ReactNode;\n  /** Render each item's row body. Active / selected come from internal state. */\n  renderItem: (item: T, state: ListboxRenderItemState) => ReactNode;\n\n  /** Render a search input above the list. `true`/`false` force it; `\"auto\"` shows it only when the item count exceeds `SEARCHABLE_AUTO_THRESHOLD`. Default true. */\n  searchable?: boolean | 'auto';\n  searchPlaceholder?: string;\n  /**\n   * Accessible name for the search input. A `searchPlaceholder` is NOT a\n   * reliable accessible name (it vanishes once the field has a value and AT\n   * support for placeholder-as-name is inconsistent), so pickers with a\n   * domain-specific search (PhoneInput → \"Search countries\", CurrencyInput →\n   * \"Search currencies\") should pass this. Falls back to the placeholder text.\n   */\n  searchAriaLabel?: string;\n  /** Override default case-insensitive substring filter on `getLabel`. */\n  filterItems?: (items: T[], query: string) => T[];\n\n  /** Render section headers when items group; the function returns a group key per item. */\n  groupBy?: (item: T) => string;\n  /** Override the default group header rendering. */\n  renderGroupHeader?: (group: string) => ReactNode;\n\n  /** Shown in place of the list when the filter returns nothing. */\n  emptyState?: ReactNode;\n\n  /**\n   * Lay the option list out in up to this many balanced columns instead of\n   * one. Default `1`. Use `2` to tame a long list — the panel's height is\n   * roughly halved (20 rows become two columns of ~10), so it fits without a\n   * deep scroll. Rows keep their source order top-to-bottom down the first\n   * column, then continue in the next, so `ArrowDown` / `ArrowUp` still read\n   * naturally.\n   *\n   * This is a **maximum**, not a fixed count: each column keeps a minimum\n   * width (`--uxm-listbox-list-column-min-width`, 150px), so a panel too\n   * narrow for two readable columns gracefully falls back to one rather than\n   * cramping. Widen the panel — a wider anchor, or `matchAnchorWidth={false}`\n   * + `minPanelWidth` — to actually reveal the second column.\n   *\n   * Works with `groupBy`: each header spans the full width above its group,\n   * whose rows wrap into the columns beneath it.\n   */\n  columns?: 1 | 2;\n\n  /** Optional footer slot below the list (e.g. ColorPicker's \"Custom hex\" panel). Pass a function to receive `{ close }`. */\n  footer?: ReactNode | ((api: { close: () => void }) => ReactNode);\n\n  /** Disable an individual item — it won't be selectable or arrow-navigable. */\n  isItemDisabled?: (item: T) => boolean;\n\n  // Layout — forwarded to Popover.\n  placement?: PopoverPlacement;\n  /**\n   * Match panel width to the positioning anchor (the trigger by\n   * default, or `anchorRef` if provided). Default true.\n   */\n  matchAnchorWidth?: boolean;\n  /** Min panel width when not matching anchor. */\n  minPanelWidth?: number;\n  /** Maximum panel width in px. */\n  maxPanelWidth?: number;\n  /** Render panel into a portal. Default true. */\n  portal?: boolean;\n  /**\n   * Optional override for what the popover anchors against (positioning\n   * + width matching). By default the trigger element from\n   * `renderTrigger`'s `triggerProps.ref` is the anchor — that's what\n   * users click, and that's what the panel sits below. Pass `anchorRef`\n   * when the panel should size / position against a DIFFERENT element\n   * than the click target — e.g. PhoneInput's country picker, where\n   * the trigger is just the small country button but the panel should\n   * span the full field width (anchor = field wrapper).\n   */\n  anchorRef?: React.RefObject<HTMLElement | null>;\n  /**\n   * Render the right-edge ✓ on the selected row. Default true. Set to\n   * `false` for single-select pickers whose rows already have trailing\n   * meta content (dial codes in PhoneInput, currency codes in\n   * CurrencyInput) — the trailing visual + the selected row's bg/text\n   * styling are enough; the extra ✓ creates visual noise + competes\n   * with the meta for the right edge. Multi-select MultiListbox's\n   * left-edge checkbox is unaffected.\n   */\n  showCheckmark?: boolean;\n\n  /** Class applied to the panel root. */\n  panelClassName?: string;\n  panelStyle?: CSSProperties;\n  /** Wrapper element class — only meaningful if you visually wrap the trigger. */\n  className?: string;\n  style?: CSSProperties;\n\n  /** Block all interaction. */\n  disabled?: boolean;\n\n  /** Notified whenever the panel opens/closes. */\n  onOpenChange?: (open: boolean) => void;\n\n  'aria-label'?: string;\n}\n\nexport interface ListboxProps<T> extends ListboxCommonProps<T> {\n  /** Currently selected value. `null` = nothing selected. */\n  value: T | null;\n  /**\n   * Selection callback. Called with the picked item, OR with `null`\n   * when the consumer clears the selection (e.g. a ✕ button inside\n   * their `renderTrigger`). The atom itself never invokes this with\n   * `null` — picking an already-selected row in single-select mode\n   * is a no-op visually. Clear behavior is consumer-driven so each\n   * trigger can decide whether / how to expose a clear affordance.\n   */\n  onChange: (item: T | null) => void;\n  /** Close the panel after a selection. Default true. */\n  closeOnSelect?: boolean;\n}\n\nexport interface MultiListboxProps<T> extends Omit<ListboxCommonProps<T>, 'footer'> {\n  value: T[];\n  onChange: (items: T[]) => void;\n  /** Hide items already in `value` from the panel list. Default false. */\n  excludeSelected?: boolean;\n  /** Close the panel after each selection. Default false. */\n  closeOnSelect?: boolean;\n  /**\n   * When the working selection is pushed to `onChange`:\n   *   - `'change'` (default) — every toggle fires `onChange` immediately\n   *     (live). The historical behavior, and what chip-style pickers\n   *     (PillSelect) and a live \"N selected\" trigger count need.\n   *   - `'close'` — toggles stage into an internal draft; `onChange` fires\n   *     ONCE when the panel closes. Opt in for a commit-boundary editor like\n   *     EditableCell: \"clear all → pick one\" works on a required cell (the\n   *     transient empty set never commits), N picks are a single commit, and\n   *     any consumer `validate` runs once on the final set (so a required-field\n   *     warning shows on close only when the result is actually empty).\n   * The draft is fully internal — consumers keep passing the committed\n   * `value` and receive the final array via `onChange`; nothing else changes.\n   */\n  commitMode?: 'change' | 'close';\n  /**\n   * Mark the selection as required — an empty set is invalid. The RULE lives\n   * here so every MultiListbox consumer (EditableCell, PillSelect, …) enforces\n   * it identically; the DISPLAY can't (the panel is gone once closed), so the\n   * message is reported via `onRequiredViolation` for the consumer to render.\n   * Enforcement timing follows `commitMode`:\n   *   - `'change'` (live, default) — checked per toggle; empty → still\n   *     committed (so the user isn't trapped) + violation reported.\n   *   - `'close'` (staged) — checked on close; empty → NOT committed (the\n   *     committed value stays) + violation reported, mirroring the live\n   *     \"transient empty is allowed\" model.\n   */\n  required?: boolean;\n  /** Message passed to `onRequiredViolation`. Default `\"Select at least one option\"`. */\n  requiredMessage?: string;\n  /** Fired when a `required` selection is left/made empty — the consumer renders the message its own way (Banner, inline error, …). */\n  onRequiredViolation?: (message: string) => void;\n  /**\n   * Footer slot below the list. The function form receives the working\n   * selection (`selected` — the draft in `commitMode=\"close\"`, else the live\n   * value) plus a mode-aware `clear` that empties it WITHOUT closing the\n   * panel — so a \"Clear all\" can hide itself when empty and, on a staged\n   * cell, clear-then-repick never trips validation.\n   */\n  footer?:\n    | ReactNode\n    | ((api: { close: () => void; clear: () => void; selected: T[] }) => ReactNode);\n  /**\n   * Render a checkbox indicator at the leading edge of each row.\n   * Default true (the standard multi-select pattern). Set to `false`\n   * when the consumer ALREADY shows selection state outside the panel\n   * (e.g. PillSelect's chips below the trigger) — the checkbox would\n   * be redundant signal. Pair with `excludeSelected={true}` for the\n   * classic \"items disappear when picked, return to dropdown when\n   * removed from chips\" UX.\n   */\n  showCheckbox?: boolean;\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Internal: shared core\n// ─────────────────────────────────────────────────────────────────────────────\n\ninterface ListboxCoreProps<T> extends ListboxCommonProps<T> {\n  /** Set of selected keys. Single-mode passes a 0/1-sized set. */\n  selectedKeys: Set<string>;\n  /** Selected item passed back to `renderTrigger`. Single-mode = the one selected item; multi-mode = null (consumer reads its own value). */\n  triggerSelected: T | null;\n  /** Called when an item is chosen via click / Enter. */\n  onSelect: (item: T) => void;\n  /** Whether to close after select. */\n  closeOnSelect: boolean;\n  /**\n   * Internal — which indicator pattern the row renders. Set by the\n   * wrapper component:\n   *   - `Listbox` → 'checkmark' (right-edge ✓ on selected)\n   *   - `MultiListbox` with `showCheckbox=true` (default) → 'checkbox'\n   *   - `MultiListbox` with `showCheckbox=false` → 'none' (used by\n   *     PillSelect, where chips already represent the selection state\n   *     and a checkbox in the dropdown would be redundant signal)\n   * Not part of the public API; designers don't pick indicator styles.\n   */\n  indicator: 'checkmark' | 'checkbox' | 'none';\n}\n\nfunction ListboxCore<T>({\n  items,\n  getKey,\n  getLabel,\n  renderTrigger,\n  renderItem,\n  searchable = true,\n  searchPlaceholder = 'Search…',\n  searchAriaLabel,\n  filterItems,\n  groupBy,\n  renderGroupHeader,\n  emptyState,\n  columns = 1,\n  footer,\n  isItemDisabled,\n  indicator,\n  placement = 'bottom-start',\n  matchAnchorWidth = true,\n  minPanelWidth,\n  maxPanelWidth,\n  portal = true,\n  anchorRef,\n  showCheckmark = true,\n  panelClassName,\n  panelStyle,\n  className,\n  style,\n  disabled = false,\n  onOpenChange,\n  'aria-label': ariaLabel,\n\n  selectedKeys,\n  triggerSelected,\n  onSelect,\n  closeOnSelect,\n}: ListboxCoreProps<T>) {\n  const [open, setOpenState] = useState(false);\n  const [search, setSearch] = useState('');\n  const [active, setActive] = useState(0);\n\n  const showSearch = searchable === 'auto' ? items.length > SEARCHABLE_AUTO_THRESHOLD : searchable;\n\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const searchRef = useRef<HTMLInputElement | null>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const optionRefs = useRef(new Map<string, HTMLButtonElement>());\n\n  const panelId = useId();\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (next === open) return;\n      setOpenState(next);\n      onOpenChange?.(next);\n    },\n    [open, onOpenChange],\n  );\n\n  // Default filter — case-insensitive substring on `getLabel`.\n  const filtered = useMemo(() => {\n    if (!search) return items;\n    if (filterItems) return filterItems(items, search);\n    const q = search.toLowerCase();\n    return items.filter((it) => getLabel(it).toLowerCase().includes(q));\n  }, [items, search, filterItems, getLabel]);\n\n  // Build the render plan — group headers interleaved between items.\n  // We also keep a parallel `selectableIndices` list so arrow nav skips\n  // headers and disabled items cleanly.\n  const { rows, selectableIndices } = useMemo(() => {\n    type Row =\n      | { kind: 'header'; group: string; key: string }\n      | { kind: 'item'; item: T; key: string; disabled: boolean };\n    const out: Row[] = [];\n    const idx: number[] = [];\n    if (groupBy) {\n      // Stable group order — first appearance wins.\n      const seen = new Set<string>();\n      const order: string[] = [];\n      for (const it of filtered) {\n        const g = groupBy(it);\n        if (!seen.has(g)) {\n          seen.add(g);\n          order.push(g);\n        }\n      }\n      for (const g of order) {\n        out.push({ kind: 'header', group: g, key: `__h_${g}` });\n        for (const it of filtered) {\n          if (groupBy(it) !== g) continue;\n          const disabled = isItemDisabled?.(it) ?? false;\n          out.push({ kind: 'item', item: it, key: getKey(it), disabled });\n          if (!disabled) idx.push(out.length - 1);\n        }\n      }\n    } else {\n      for (const it of filtered) {\n        const disabled = isItemDisabled?.(it) ?? false;\n        out.push({ kind: 'item', item: it, key: getKey(it), disabled });\n        if (!disabled) idx.push(out.length - 1);\n      }\n    }\n    return { rows: out, selectableIndices: idx };\n  }, [filtered, groupBy, getKey, isItemDisabled]);\n\n  // Clamp active when the selectable set shrinks under us (typing in\n  // the filter, items prop changes). Cascade is bounded — one extra\n  // render then settled. No derivable-from-props alternative.\n  useEffect(() => {\n    if (selectableIndices.length === 0) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- clamp on shrinkage\n      setActive(0);\n      return;\n    }\n    if (active >= selectableIndices.length) {\n      setActive(selectableIndices.length - 1);\n    }\n  }, [selectableIndices.length, active]);\n\n  // Reset search + active on open. Default active to the currently\n  // selected item if any, so Enter on first keystroke re-selects it.\n  // One-shot reset on open transition; no derivable-from-props alternative.\n  useEffect(() => {\n    if (!open) return;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- one-shot reset on open\n    setSearch('');\n    if (selectedKeys.size === 1) {\n      const sel = [...selectedKeys][0];\n      const flatIndex = selectableIndices.findIndex(\n        (i) => rows[i].kind === 'item' && (rows[i] as { key: string }).key === sel,\n      );\n      setActive(flatIndex >= 0 ? flatIndex : 0);\n    } else {\n      setActive(0);\n    }\n    // Only on open — selectableIndices / rows recompute as search runs,\n    // and we don't want to reset active on every keystroke.\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- deliberately keyed on `open` only (see above)\n  }, [open]);\n\n  // Scroll the active option into view after arrow nav. `block: 'nearest'`\n  // avoids jumping the page when the list is already fully visible.\n  useEffect(() => {\n    if (!open) return;\n    const rowIdx = selectableIndices[active];\n    if (rowIdx == null) return;\n    const row = rows[rowIdx];\n    if (!row || row.kind !== 'item') return;\n    const el = optionRefs.current.get(row.key);\n    el?.scrollIntoView({ block: 'nearest' });\n  }, [active, open, rows, selectableIndices]);\n\n  const commitSelection = useCallback(\n    (item: T) => {\n      onSelect(item);\n      if (closeOnSelect) setOpen(false);\n    },\n    [onSelect, closeOnSelect, setOpen],\n  );\n\n  // Keyboard nav — fired from both the search input (when searchable)\n  // and the panel itself (when not searchable). Handlers are identical;\n  // we just attach in the right place.\n  const onPanelKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        if (selectableIndices.length === 0) return;\n        setActive((i) => (i + 1) % selectableIndices.length);\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        if (selectableIndices.length === 0) return;\n        setActive((i) => (i - 1 + selectableIndices.length) % selectableIndices.length);\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        setActive(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        if (selectableIndices.length > 0) setActive(selectableIndices.length - 1);\n      } else if (e.key === 'Enter') {\n        e.preventDefault();\n        const rowIdx = selectableIndices[active];\n        const row = rowIdx != null ? rows[rowIdx] : undefined;\n        if (row && row.kind === 'item') commitSelection(row.item);\n      }\n      // Escape is handled globally by Popover.\n    },\n    [active, rows, selectableIndices, commitSelection],\n  );\n\n  // Trigger keyboard — Enter/Space toggles, ArrowDown opens + jumps to\n  // first item. This matches WAI-ARIA combobox patterns.\n  const onTriggerKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      if (disabled) return;\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        setOpen(!open);\n      } else if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        setOpen(true);\n      }\n    },\n    [disabled, open, setOpen],\n  );\n\n  // Memoised so the trigger callback ref + handlers don't re-create\n  // every render — without this, consumers spreading {...triggerProps}\n  // re-bind handlers on every render AND the ref callback fires extra\n  // times, churning DOM ref state. Also pacifies the react-hooks/refs\n  // rule which flags inline ref-writing callbacks as \"ref access during\n  // render\".\n  const triggerProps: ListboxTriggerProps = useMemo(\n    () => ({\n      ref: (el: HTMLElement | null) => {\n        triggerRef.current = el;\n      },\n      onClick: () => {\n        if (disabled) return;\n        setOpen(!open);\n      },\n      onKeyDown: onTriggerKeyDown,\n      'aria-haspopup': 'listbox',\n      'aria-expanded': open,\n      'aria-controls': open ? panelId : undefined,\n      disabled: disabled || undefined,\n    }),\n    [disabled, open, setOpen, onTriggerKeyDown, panelId],\n  );\n\n  // Stable per-row option id, so the focused search input can point\n  // `aria-activedescendant` at the arrow-highlighted option — otherwise DOM\n  // focus stays pinned in the search box and AT announces nothing as the user\n  // arrows through the list.\n  const optionId = (rowIdx: number) => `${panelId}-opt-${rowIdx}`;\n  const activeRowIdx = selectableIndices[active];\n  const activeDescendantId =\n    open && activeRowIdx != null && rows[activeRowIdx]?.kind === 'item'\n      ? optionId(activeRowIdx)\n      : undefined;\n\n  return (\n    <div className={cn('uxm-listbox', className)} style={style}>\n      {/* eslint-disable-next-line react-hooks/refs -- triggerProps is memoised above and contains a ref-setter callback; the rule flags the pattern but the callback is the React-blessed way to wire a ref through a consumer-rendered element */}\n      {renderTrigger({ open, selected: triggerSelected, triggerProps })}\n      <Popover\n        open={open}\n        onOpenChange={setOpen}\n        // External anchor (PhoneInput's field wrapper, etc.) takes\n        // precedence — that controls positioning + width matching.\n        // Trigger ref stays the interactive surface (click target).\n        anchor={(anchorRef ?? triggerRef) as React.RefObject<HTMLElement | null>}\n        placement={placement}\n        matchAnchorWidth={matchAnchorWidth}\n        minWidth={minPanelWidth}\n        maxWidth={maxPanelWidth}\n        portal={portal}\n        initialFocus={showSearch ? (searchRef as React.RefObject<HTMLElement | null>) : (listRef as React.RefObject<HTMLElement | null>)}\n        role=\"listbox\"\n        aria-label={ariaLabel}\n        id={panelId}\n        className={cn('uxm-listbox__panel', panelClassName)}\n        style={panelStyle}\n      >\n        {showSearch && (\n          <div className=\"uxm-listbox__search\">\n            <Icon\n              glyph=\"search\"\n              size={14}\n              className=\"uxm-listbox__search-icon\"\n            />\n            <input\n              ref={searchRef}\n              type=\"text\"\n              className=\"uxm-listbox__search-input\"\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              onKeyDown={onPanelKeyDown}\n              placeholder={searchPlaceholder}\n              autoComplete=\"off\"\n              spellCheck={false}\n              aria-label={searchAriaLabel}\n              aria-controls={panelId}\n              aria-autocomplete=\"list\"\n              aria-activedescendant={activeDescendantId}\n            />\n          </div>\n        )}\n        <div\n          ref={listRef}\n          className=\"uxm-listbox__list\"\n          // Multi-column wrap: drive the count through a CSS var so the\n          // single-column default (var fallback = 1) stays plain block flow\n          // and one property does the whole job. Only set inline when > 1.\n          style={columns > 1 ? ({ '--uxm-listbox-list-columns': columns } as CSSProperties) : undefined}\n          // When not searchable, the panel itself is focusable so keyboard\n          // nav works without a search input.\n          tabIndex={showSearch ? undefined : -1}\n          onKeyDown={showSearch ? undefined : onPanelKeyDown}\n        >\n          {selectableIndices.length === 0 ? (\n            <div className=\"uxm-listbox__empty\">\n              {emptyState ?? 'No matches'}\n            </div>\n          ) : (\n            rows.map((row, rowIdx) => {\n              if (row.kind === 'header') {\n                return (\n                  <div key={row.key} className=\"uxm-listbox__group-header\" role=\"presentation\">\n                    {renderGroupHeader ? renderGroupHeader(row.group) : row.group}\n                  </div>\n                );\n              }\n              const isActive = selectableIndices[active] === rowIdx;\n              const isSelected = selectedKeys.has(row.key);\n              return (\n                <button\n                  key={row.key}\n                  id={optionId(rowIdx)}\n                  ref={(el) => {\n                    if (el) optionRefs.current.set(row.key, el);\n                    else optionRefs.current.delete(row.key);\n                  }}\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={isSelected}\n                  aria-disabled={row.disabled || undefined}\n                  disabled={row.disabled || undefined}\n                  // mouseDown (not click) — keeps focus on the search input\n                  // so consecutive selections via filter remain ergonomic.\n                  onMouseDown={(e) => {\n                    e.preventDefault();\n                    if (row.disabled) return;\n                    commitSelection(row.item);\n                  }}\n                  onMouseEnter={() => {\n                    if (row.disabled) return;\n                    const flatIdx = selectableIndices.indexOf(rowIdx);\n                    if (flatIdx >= 0) setActive(flatIdx);\n                  }}\n                  className={cn(\n                    'uxm-listbox__option',\n                    isActive && 'uxm-listbox__option--active',\n                    isSelected && 'uxm-listbox__option--selected',\n                    row.disabled && 'uxm-listbox__option--disabled',\n                  )}\n                >\n                  {indicator === 'checkbox' && (\n                    // Multi-select pattern — left-aligned checkbox slot\n                    // on every row, filled when selected. Visual-only\n                    // (no real <input>) so nesting inside the row\n                    // <button> stays valid HTML; the row button owns\n                    // clicks + keys. `aria-hidden` because aria-selected\n                    // on the parent already conveys state to AT.\n                    //\n                    // The `uxm-checkbox` class on the wrapper is what\n                    // makes the saved `.uxm-checkbox { --uxm-checkbox-*: … }`\n                    // rule from the Checkbox atom's workbench tuning\n                    // reach down into our marker — CSS custom properties\n                    // only cascade from where they're declared. Without\n                    // this class, tuning Checkbox colours has no effect\n                    // here. Base `.uxm-checkbox` styles (display, gap,\n                    // cursor) are harmless overlap with the indicator's\n                    // own inline-flex layout.\n                    <span className=\"uxm-listbox__option-indicator uxm-checkbox\" aria-hidden=\"true\">\n                      <span\n                        className={cn(\n                          'uxm-listbox__option-checkbox',\n                          isSelected && 'uxm-listbox__option-checkbox--checked',\n                        )}\n                      >\n                        {isSelected && <Icon glyph=\"check\" size={10} />}\n                      </span>\n                    </span>\n                  )}\n                  {renderItem(row.item, { active: isActive, selected: isSelected })}\n                  {indicator === 'checkmark' && isSelected && showCheckmark && (\n                    // Single-select pattern — right-aligned ✓ on the\n                    // selected row only. Reserving the slot on unselected\n                    // rows would create a constant leading/trailing\n                    // indent that reads as multi-select; right-edge +\n                    // only-when-selected keeps unselected rows clean,\n                    // and the row's other content stays put because\n                    // `margin-left: auto` reflows from the trailing edge.\n                    <span className=\"uxm-listbox__option-checkmark\" aria-hidden=\"true\">\n                      <Icon glyph=\"check\" size={14} />\n                    </span>\n                  )}\n                </button>\n              );\n            })\n          )}\n        </div>\n        {footer && (() => {\n          // Render the footer wrapper only when there's actual content —\n          // a footer function may legitimately return null (e.g. a \"Clear\n          // all\" that hides itself once the working selection is empty), and\n          // an always-present wrapper would leave an empty padded strip.\n          const content = typeof footer === 'function' ? footer({ close: () => setOpen(false) }) : footer;\n          return content ? <div className=\"uxm-listbox__footer\">{content}</div> : null;\n        })()}\n      </Popover>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Single-select Listbox\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Single-select dropdown. Owns ALL dropdown behavior — popover, search,\n * keyboard nav, ARIA — and is generic over `T`. Consumers only supply\n * data + a renderItem; the dropdown has no domain knowledge of what's\n * inside (countries, icons, colors, currencies — all just `T`).\n *\n * For multi-select, use `MultiListbox`.\n *\n * Themable through `--uxm-listbox-*` custom properties (panel chrome,\n * option states, search input). The trigger's visual is owned by the\n * consumer's `renderTrigger` callback — the atom only wires behavior.\n */\nexport function Listbox<T>({\n  value,\n  onChange,\n  getKey,\n  closeOnSelect = true,\n  ...rest\n}: ListboxProps<T>) {\n  const selectedKeys = useMemo(\n    () => (value ? new Set([getKey(value)]) : new Set<string>()),\n    [value, getKey],\n  );\n  return (\n    <ListboxCore<T>\n      {...rest}\n      getKey={getKey}\n      selectedKeys={selectedKeys}\n      triggerSelected={value}\n      onSelect={onChange}\n      closeOnSelect={closeOnSelect}\n      indicator=\"checkmark\"\n    />\n  );\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n//  Multi-select MultiListbox\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Multi-select dropdown. Same behavior contract as `Listbox`, but accepts\n * an array `value` and toggles items in/out.\n *\n * Defaults are tuned for a standard checklist UX: every row shows a\n * checkbox indicator (`selectionIndicator=\"checkbox\"`), already-selected\n * items remain visible (`excludeSelected=false`), and the panel stays\n * open across picks (`closeOnSelect=false`).\n *\n * For a \"selected items disappear\" pattern (PillSelect-style, where\n * selections render as chips in the trigger), pass\n * `selectionIndicator=\"none\"` + `excludeSelected={true}`.\n */\nexport function MultiListbox<T>({\n  value,\n  onChange,\n  items,\n  getKey,\n  excludeSelected = false,\n  closeOnSelect = false,\n  showCheckbox = true,\n  commitMode = 'change',\n  required = false,\n  requiredMessage = DEFAULT_MULTI_REQUIRED_MESSAGE,\n  onRequiredViolation,\n  footer,\n  onOpenChange,\n  ...rest\n}: MultiListboxProps<T>) {\n  const staged = commitMode === 'close';\n  // In staged mode the working set lives in a local draft while the panel is\n  // open (`null` = not editing, fall back to the committed `value`). In the\n  // default 'change' mode there's no draft — `value` is the live truth.\n  //\n  // The draft is mirrored into a ref because a close can happen in the SAME\n  // event as the toggle that preceded it (`closeOnSelect`: ListboxCore calls\n  // `onSelect(item)` then `setOpen(false)` synchronously). Reading `draft`\n  // from the render closure there would commit the selection as it was BEFORE\n  // the click and silently drop the item the user just picked; the ref is\n  // already up to date.\n  const [draft, setDraft] = useState<T[] | null>(null);\n  const draftRef = useRef<T[] | null>(null);\n  const setWorkingDraft = useCallback((next: T[] | null) => {\n    draftRef.current = next;\n    setDraft(next);\n  }, []);\n  const working = staged ? draft ?? value : value;\n\n  const selectedKeys = useMemo(\n    () => new Set(working.map(getKey)),\n    [working, getKey],\n  );\n\n  // If `excludeSelected`, drop already-picked items from what the panel\n  // shows. Filtering happens BEFORE search runs (search filters the\n  // remainder). This matches the legacy PillSelect behavior.\n  const visibleItems = useMemo(\n    () => (excludeSelected ? items.filter((it) => !selectedKeys.has(getKey(it))) : items),\n    [items, excludeSelected, selectedKeys, getKey],\n  );\n\n  // Push to the consumer, applying the `required` rule and skipping a no-op\n  // (same membership) so `onChange` / downstream validation don't fire when\n  // nothing changed. Required timing follows the mode: staged BLOCKS an empty\n  // commit (value stays), live ALLOWS it (so the user isn't trapped mid-edit);\n  // either way the violation is reported for the consumer to display.\n  const emit = useCallback(\n    (next: T[]) => {\n      if (required && next.length === 0) {\n        onRequiredViolation?.(requiredMessage);\n        if (staged) return;\n      }\n      const changed =\n        next.length !== value.length ||\n        next.some((n) => !value.some((v) => getKey(v) === getKey(n)));\n      if (changed) onChange(next);\n    },\n    [required, requiredMessage, onRequiredViolation, staged, value, onChange, getKey],\n  );\n\n  const handleSelect = useCallback(\n    (item: T) => {\n      const k = getKey(item);\n      const next = selectedKeys.has(k)\n        ? working.filter((v) => getKey(v) !== k)\n        : [...working, item];\n      // Staged: mutate the draft only (commit deferred to close). Live: emit now.\n      if (staged) setWorkingDraft(next);\n      else emit(next);\n    },\n    [working, selectedKeys, staged, emit, getKey, setWorkingDraft],\n  );\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      onOpenChange?.(open);\n      if (!staged) return;\n      if (open) {\n        // Seed the draft from the committed value on open.\n        setWorkingDraft(value);\n      } else {\n        // Commit the staged draft ONCE on close, then drop it. Read the REF,\n        // not the state — see the `draftRef` note above (`closeOnSelect`).\n        const final = draftRef.current ?? value;\n        setWorkingDraft(null);\n        emit(final);\n      }\n    },\n    [staged, value, emit, onOpenChange, setWorkingDraft],\n  );\n\n  // A non-null draft means \"the panel is open and staging\". Keep the latest\n  // `emit` reachable from the unmount cleanup below without re-running it.\n  const emitRef = useRef(emit);\n  useEffect(() => {\n    emitRef.current = emit;\n  }, [emit]);\n\n  // Commit a staged draft if the component unmounts while the panel is still\n  // open — a route change or a table cell torn down mid-edit would otherwise\n  // drop the user's in-flight picks with no commit at all.\n  useEffect(\n    () => () => {\n      const pending = draftRef.current;\n      if (pending !== null) emitRef.current(pending);\n    },\n    [],\n  );\n\n  // Re-seed the draft when the committed `value` changes UNDER an open panel\n  // (an external update — not one of our own commits, which null the draft\n  // first). Without this the stale draft silently overwrites that update on\n  // close. Compared by key membership, not identity: consumers routinely\n  // rebuild the array every render, and identity alone would nuke the draft\n  // on each parent re-render.\n  // Serialised rather than joined: keys are consumer-supplied strings and a\n  // separator character could appear inside one.\n  const valueKeys = useMemo(() => JSON.stringify(value.map(getKey)), [value, getKey]);\n  const prevValueKeys = useRef(valueKeys);\n  useEffect(() => {\n    if (prevValueKeys.current === valueKeys) return;\n    prevValueKeys.current = valueKeys;\n    if (draftRef.current !== null) setWorkingDraft(value);\n  }, [valueKeys, value, setWorkingDraft]);\n\n  // Enrich a function footer with the working selection + a mode-aware clear\n  // (empties the draft when staged, else commits [] via `emit` so the\n  // `required` rule + no-op guard still apply) — neither closes the panel.\n  const wrappedFooter = useMemo(() => {\n    if (footer == null || typeof footer !== 'function') return footer;\n    return ({ close }: { close: () => void }) =>\n      footer({\n        close,\n        selected: working,\n        clear: () => (staged ? setWorkingDraft([]) : emit([])),\n      });\n  }, [footer, working, staged, emit, setWorkingDraft]);\n\n  return (\n    <ListboxCore<T>\n      {...rest}\n      items={visibleItems}\n      getKey={getKey}\n      selectedKeys={selectedKeys}\n      // MultiListbox triggers usually render their own selection (chips),\n      // so we don't pass a single \"selected\" — consumer owns the trigger\n      // visual entirely.\n      triggerSelected={null}\n      onSelect={handleSelect}\n      onOpenChange={handleOpenChange}\n      footer={wrappedFooter}\n      closeOnSelect={closeOnSelect}\n      indicator={showCheckbox ? 'checkbox' : 'none'}\n    />\n  );\n}\n"],"mappings":"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","names":["disabled"]}