@eifi1/ui-kit 0.4.0

package/dist/components/combobox.d.ts

@@ -0,0 +1,141 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ComboOption } from './combobox-core.js';
+import '../hooks/use-anchored-rect.js';
+import '../hooks/use-anchored-panel.js';
+
+/**
+ * Free-text combobox that looks like the shared {@link Select} (same FIELD_BASE
+ * styling, chevron and static floating label) but lets the user type a value
+ * that isn't in the list — e.g. naming a brand-new payee. Picking from the
+ * filtered suggestion list fills the value; typing keeps whatever was entered.
+ *
+ * Use this instead of an `<Input list="…">` + `<datalist>` so the control is
+ * visually and behaviourally consistent with the other dropdowns (feedback
+ * #230 — the payee field looked/behaved differently from every other select).
+ */
+declare function Combobox({ value, onChange, options, label, id, placeholder, className, groupBy, maxSuggestions, searchPlaceholder, closeLabel, createLabel, invalid, optionAdornment, autoFocus, onBlur, onSubmit, "aria-label": ariaLabel, }: {
+    value: string;
+    onChange: (v: string) => void;
+    /** Suggestion pool (e.g. existing payee names). */
+    options: string[];
+    label?: string;
+    id?: string;
+    placeholder?: string;
+    className?: string;
+    /** Required and unanswered — see {@link Input}'s `invalid`. Set on the `<input>`
+     *  itself rather than on the wrapper, which is what let Keksdose's account picker
+     *  delete the `[&_input]:…` copy of {@link FIELD_INVALID} it had been carrying
+     *  because this component had no `invalid` of its own. */
+    invalid?: boolean;
+    /** Heading an option belongs under. Supplying it makes this list read exactly
+     *  like {@link InlineEntityCombobox}'s — one heading per group with its rows
+     *  indented beneath — instead of a flat list (feedback #136 rework: the payee
+     *  field sat next to the newly-grouped category field and no longer matched).
+     *  Omit for a plain list. */
+    groupBy?: (option: string) => string;
+    /**
+     * Something to show at the far end of an option's row — a badge saying what the
+     * option IS, as distinct from what it is called.
+     *
+     * Keksdose's category-name field is the case: its proposals carry per-locale
+     * names, so picking one stores a category that follows the UI language, and
+     * picking a look-alike custom name does not. That difference is invisible in the
+     * label and decides what the row DOES, so the row has to show it. Returning
+     * `null` for an option renders nothing and costs no layout.
+     *
+     * Not rendered in the create row, which by definition names nothing in the pool.
+     */
+    optionAdornment?: (option: string) => ReactNode;
+    /** Focus on mount, the way `<input autoFocus>` does — and, through `onFocus`, open
+     *  the list with it. A click-the-value inline editor needs it: the cell the user
+     *  clicked names the field the caret should land in. {@link InlineEntityCombobox}
+     *  has had it since live #218. */
+    autoFocus?: boolean;
+    /** Focus genuinely LEFT the field. Not fired by picking a row — the rows suppress
+     *  `mousedown`, so the input never blurs — which is what makes it usable as a
+     *  "close the inline editor" signal. */
+    onBlur?: () => void;
+    /** Enter pressed with no row highlighted, i.e. "I mean what I typed". The list
+     *  closes either way; this is for a caller whose Enter also submits a row editor. */
+    onSubmit?: () => void;
+    "aria-label"?: string;
+    /** Rows to offer when the field is empty. 8 on a dropdown, where that is all
+     *  that fits; the phone sheet asks for more because it has a screen. */
+    maxSuggestions?: number;
+    searchPlaceholder?: string;
+    closeLabel?: string;
+    /**
+     * Label for the row that COMMITS a value the list does not contain — e.g.
+     * `(v) => \`Add "${v}" as payee\``. Supplying it turns the free text into
+     * something you confirm rather than something you leave behind.
+     *
+     * Keksdose live #212: *"For the payee input have an apply button, when input is
+     * placed like 'add xxx as payee' to confirm. Now it can be put in and closed with
+     * the right top X, which seems not intuitive."* On the phone sheet the search box
+     * IS the value, so typing a brand-new name and dismissing the sheet did commit it —
+     * but the only control on offer was the close X, which reads as "discard". A named
+     * affordance says what the typing did.
+     *
+     * Omit and the row is not rendered, which is the right default for a list whose
+     * values are all supposed to already exist.
+     */
+    createLabel?: (value: string) => string;
+}): react.JSX.Element;
+/**
+ * The id-keyed sibling of {@link Combobox}: identical anatomy (a real text input
+ * with the shared field styling, chevron and inline as-you-type filtering) but
+ * the value is an option id, not free text. Built so an entity picker can sit
+ * next to a free-text combobox without any visible difference — a button-trigger
+ * panel picker ({@link EntityCombobox}) never matches an input field exactly.
+ *
+ * Text-vs-value reconciliation: the input's text is transient. Picking a row or
+ * typing an exact (unique) label commits that option; emptying the text commits
+ * a clear; anything else reverts to the selected option's label on blur/Escape.
+ *
+ * **On a phone the list opens as a full-screen sheet**, exactly like {@link Combobox}
+ * beside it (Keksdose live #200, extended by dev#477 — the account picker moved onto
+ * this component and must not lose its sheet). The sheet carries its OWN query state
+ * rather than reusing `text`: `text` is what {@link reconcile} judges on blur, so a
+ * sheet that emptied it to show the full list would read as "the user cleared the
+ * field" the moment it closed.
+ */
+declare function InlineEntityCombobox<V extends string | number>({ value, onChange, options, label, id, placeholder, className, disabled, autoFocus, searchPlaceholder, emptyLabel, closeLabel, clearable, clearLabel, invalid, "aria-label": ariaLabel, }: {
+    /** Selected option id, or null when nothing is selected. */
+    value: V | null;
+    /** Required and unanswered — see {@link Combobox}'s `invalid`. */
+    invalid?: boolean;
+    /** A picked/typed option emits its id; emptying the field emits `null`. */
+    onChange: (v: V | null) => void;
+    options: ComboOption<V>[];
+    label?: string;
+    id?: string;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    /** Focus on mount, the way `<input autoFocus>` does — and, through `onFocus`
+     *  below, open the list with it. A click-the-value editor needs it: the cell
+     *  the user clicked names the field the editor should land the caret in, and
+     *  without a passthrough this component's fixed prop list puts the `<input>`
+     *  out of a caller's reach entirely (Keksdose feedback live #218). */
+    autoFocus?: boolean;
+    /** Phone sheet only — the anchored list has the field itself to type in. */
+    searchPlaceholder?: string;
+    /** Phone sheet only: a full screen showing nothing has to say why. The anchored
+     *  list simply does not open. */
+    emptyLabel?: string;
+    closeLabel?: string;
+    /** Offer a clear "×" in place of the chevron whenever something is selected.
+     *
+     *  Emptying the text already clears (see {@link reconcile}), and on a desktop that
+     *  is the fast way. It is not a way at all on a PHONE: touching the field opens the
+     *  full-screen sheet, which covers the very input the text would have been deleted
+     *  from — so a field that had been answered could not be UNanswered by any gesture
+     *  the screen offered (Keksdose live #236, filed from a phone). The "×" is the one
+     *  affordance both shells share, and it clears without opening anything. */
+    clearable?: boolean;
+    clearLabel?: string;
+    "aria-label"?: string;
+}): react.JSX.Element;
+
+export { Combobox, InlineEntityCombobox };

package/dist/components/combobox.js

@@ -0,0 +1,550 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useId, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { ChevronDown, X } from "lucide-react";
+import { FieldLabel, FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, PHONE_QUERY } from "./ui.js";
+import { cn } from "../lib/cn.js";
+import { useDropdown } from "./dropdown.js";
+import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
+import { useMediaQuery } from "../hooks/use-media-query.js";
+import { PickerSheet, SHEET_ROW_CLASS } from "./picker-sheet.js";
+const LIST_CLASS = "max-h-64 overflow-y-auto rounded-md border border-slate-200 bg-white py-1 shadow-lg dark:border-slate-700 dark:bg-slate-900";
+function usePrimaryPressOnly() {
+  const auxPress = useRef(false);
+  return {
+    onMouseDown: (e) => {
+      if (e.button === 0) return;
+      auxPress.current = true;
+      setTimeout(() => {
+        auxPress.current = false;
+      }, 0);
+    },
+    /** True while handling the focus a non-primary press just caused. */
+    fromAuxButton: () => auxPress.current
+  };
+}
+function SuggestionList({
+  anchorRef,
+  panelRef,
+  children
+}) {
+  const { rect, top, maxHeight } = useAnchoredPanel(anchorRef, true, { preferredHeight: 256 });
+  if (!rect) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        className: "fixed z-50",
+        style: { top, left: rect.left, width: rect.width },
+        children: /* @__PURE__ */ jsx("ul", { role: "listbox", className: LIST_CLASS, style: { maxHeight }, children })
+      }
+    ),
+    document.body
+  );
+}
+const rowClass = (isActive) => cn(
+  "block w-full truncate px-3 py-1.5 text-left text-sm text-slate-900 dark:text-slate-100",
+  isActive ? "bg-slate-100 dark:bg-slate-800" : "hover:bg-slate-50 dark:hover:bg-slate-800"
+);
+function Combobox({
+  value,
+  onChange,
+  options,
+  label,
+  id,
+  placeholder,
+  className,
+  groupBy,
+  maxSuggestions,
+  searchPlaceholder,
+  closeLabel,
+  createLabel,
+  invalid,
+  optionAdornment,
+  autoFocus,
+  onBlur,
+  onSubmit,
+  "aria-label": ariaLabel
+}) {
+  const generated = useId();
+  const fieldId = id ?? generated;
+  const isPhone = useMediaQuery(PHONE_QUERY, false);
+  const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone });
+  const primaryOnly = usePrimaryPressOnly();
+  const [active, setActive] = useState(-1);
+  const sheetInputRef = useRef(null);
+  const fieldRef = useRef(null);
+  const [typing, setTyping] = useState(false);
+  const query = typing ? value.trim().toLowerCase() : "";
+  const matches = useMemo(() => {
+    const seen = /* @__PURE__ */ new Set();
+    const uniq = options.filter((o) => o && !seen.has(o) && seen.add(o));
+    let ranked;
+    const cap = maxSuggestions ?? (isPhone ? 50 : 8);
+    if (!query) {
+      ranked = uniq.slice(0, cap);
+    } else {
+      const starts = uniq.filter((o) => o.toLowerCase().startsWith(query));
+      const contains = uniq.filter(
+        (o) => !o.toLowerCase().startsWith(query) && o.toLowerCase().includes(query)
+      );
+      ranked = [...starts, ...contains].slice(0, cap);
+    }
+    if (!groupBy) return ranked;
+    const byGroup = /* @__PURE__ */ new Map();
+    for (const o of ranked) {
+      const key = groupBy(o);
+      if (!byGroup.has(key)) byGroup.set(key, []);
+      byGroup.get(key).push(o);
+    }
+    return [...byGroup.values()].flat();
+  }, [options, query, groupBy, maxSuggestions, isPhone]);
+  const commit = (v) => {
+    onChange(v);
+    setOpen(false);
+    setActive(-1);
+    setTyping(false);
+  };
+  const typed = value.trim();
+  const createRow = createLabel && typed.length > 0 && !options.some((o) => o.toLowerCase() === typed.toLowerCase()) ? createLabel(typed) : null;
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: cn("relative", className), children: [
+    label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+    /* @__PURE__ */ jsxs("div", { ref: fieldRef, className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: fieldId,
+          value,
+          placeholder,
+          "aria-label": ariaLabel ?? label,
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-autocomplete": "list",
+          "aria-invalid": invalid || void 0,
+          autoComplete: "off",
+          autoFocus,
+          onBlur,
+          onMouseDown: primaryOnly.onMouseDown,
+          onFocus: () => {
+            if (primaryOnly.fromAuxButton()) return;
+            setOpen(true);
+            setTyping(false);
+            if (isPhone) sheetInputRef.current?.focus();
+          },
+          onClick: () => {
+            setOpen(true);
+            setTyping(false);
+          },
+          inputMode: isPhone ? "none" : void 0,
+          onChange: (e) => {
+            onChange(e.target.value);
+            setOpen(true);
+            setActive(-1);
+            setTyping(true);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              setOpen(true);
+              setActive((i) => Math.min(i + 1, matches.length - 1));
+            } else if (e.key === "ArrowUp") {
+              e.preventDefault();
+              setActive((i) => Math.max(i - 1, 0));
+            } else if (e.key === "Enter") {
+              if (open && active >= 0 && active < matches.length) {
+                e.preventDefault();
+                commit(matches[active]);
+              } else {
+                if (onSubmit) e.preventDefault();
+                setOpen(false);
+                onSubmit?.();
+              }
+            } else if (e.key === "Escape") {
+              setOpen(false);
+              setActive(-1);
+            }
+          },
+          className: cn(FIELD_BASE, label !== void 0 && FIELD_FLOATING_PAD, "pr-9", invalid && FIELD_INVALID)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          "aria-hidden": true,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            setOpen((o) => !o);
+          },
+          className: "absolute right-2.5 top-1/2 size-4 -translate-y-1/2 cursor-pointer text-slate-400 dark:text-slate-500"
+        }
+      )
+    ] }),
+    isPhone && /* @__PURE__ */ jsx(
+      PickerSheet,
+      {
+        open,
+        onClose: () => setOpen(false),
+        title: label,
+        query: value,
+        onQueryChange: (v) => {
+          onChange(v);
+          setTyping(true);
+        },
+        searchPlaceholder: searchPlaceholder ?? placeholder,
+        inputRef: sheetInputRef,
+        closeLabel,
+        children: /* @__PURE__ */ jsxs("ul", { role: "listbox", children: [
+          createRow && /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": false, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => commit(typed),
+              className: cn(SHEET_ROW_CLASS, "font-medium text-teal-700 dark:text-teal-300"),
+              children: createRow
+            }
+          ) }),
+          matches.map((o) => {
+            const group = groupBy?.(o);
+            const startsGroup = group != null && group !== (matches[matches.indexOf(o) - 1] && groupBy?.(matches[matches.indexOf(o) - 1]));
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              startsGroup && /* @__PURE__ */ jsx(
+                "li",
+                {
+                  role: "presentation",
+                  className: "px-4 pb-0.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400",
+                  children: group
+                }
+              ),
+              /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": o === value, children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => commit(o),
+                  className: cn(
+                    SHEET_ROW_CLASS,
+                    optionAdornment && "flex items-center justify-between gap-2"
+                  ),
+                  children: [
+                    optionAdornment ? /* @__PURE__ */ jsx("span", { className: "truncate", children: o }) : o,
+                    optionAdornment?.(o)
+                  ]
+                }
+              ) })
+            ] }, o);
+          })
+        ] })
+      }
+    ),
+    !isPhone && open && (matches.length > 0 || createRow) && /* @__PURE__ */ jsxs(SuggestionList, { anchorRef: fieldRef, panelRef, children: [
+      createRow && /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": false, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onMouseDown: (e) => {
+            e.preventDefault();
+            commit(typed);
+          },
+          className: cn(rowClass(false), "font-medium text-teal-700 dark:text-teal-300"),
+          children: createRow
+        }
+      ) }),
+      matches.map((o, i) => {
+        const group = groupBy?.(o);
+        const startsGroup = group != null && group !== (matches[i - 1] && groupBy?.(matches[i - 1]));
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          startsGroup && /* @__PURE__ */ jsx(
+            "li",
+            {
+              role: "presentation",
+              className: "px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500 first:pt-1 dark:text-slate-400",
+              children: group
+            }
+          ),
+          /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": i === active, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                commit(o);
+              },
+              onMouseEnter: () => setActive(i),
+              className: cn(
+                rowClass(i === active),
+                group != null && "pl-6",
+                // A row with a badge is a flex row so the label truncates and the
+                // badge keeps its width; without one it stays the plain block the
+                // other lists render, so nothing shifts for callers that pass none.
+                optionAdornment && "flex items-center justify-between gap-2"
+              ),
+              children: [
+                optionAdornment ? /* @__PURE__ */ jsx("span", { className: "truncate", children: o }) : o,
+                optionAdornment?.(o)
+              ]
+            }
+          ) })
+        ] }, o);
+      })
+    ] })
+  ] });
+}
+function InlineEntityCombobox({
+  value,
+  onChange,
+  options,
+  label,
+  id,
+  placeholder,
+  className,
+  disabled,
+  autoFocus,
+  searchPlaceholder,
+  emptyLabel,
+  closeLabel,
+  clearable,
+  clearLabel,
+  invalid,
+  "aria-label": ariaLabel
+}) {
+  const generated = useId();
+  const fieldId = id ?? generated;
+  const isPhone = useMediaQuery(PHONE_QUERY, false);
+  const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone });
+  const primaryOnly = usePrimaryPressOnly();
+  const [active, setActive] = useState(-1);
+  const [text, setText] = useState(null);
+  const sheetInputRef = useRef(null);
+  const fieldRef = useRef(null);
+  const [sheetQuery, setSheetQuery] = useState("");
+  const selected = useMemo(
+    () => value == null ? null : options.find((o) => o.value === value) ?? null,
+    [options, value]
+  );
+  const shown = text ?? selected?.label ?? "";
+  const showClear = Boolean(clearable && value != null && !disabled);
+  const typedQuery = text !== null && text !== (selected?.label ?? "") ? text.trim().toLowerCase() : "";
+  const query = isPhone ? sheetQuery.trim().toLowerCase() : typedQuery;
+  const matches = useMemo(() => {
+    let ranked = options;
+    if (query) {
+      const hit = (s) => s?.toLowerCase().includes(query) ?? false;
+      const starts = options.filter((o) => o.label.toLowerCase().startsWith(query));
+      const rest = options.filter(
+        (o) => !o.label.toLowerCase().startsWith(query) && (hit(o.label) || hit(o.sublabel) || hit(o.group))
+      );
+      ranked = [...starts, ...rest];
+    }
+    if (!ranked.some((o) => o.group)) return ranked;
+    const blocks = /* @__PURE__ */ new Map();
+    for (const o of ranked) {
+      const key = o.group ?? "";
+      if (!blocks.has(key)) blocks.set(key, []);
+      blocks.get(key).push(o);
+    }
+    return [...blocks.values()].flat();
+  }, [options, query]);
+  const close = () => {
+    setOpen(false);
+    setActive(-1);
+    setSheetQuery("");
+  };
+  const commit = (o) => {
+    if (o.value !== value) onChange(o.value);
+    setText(null);
+    close();
+  };
+  const reconcile = () => {
+    if (text !== null) {
+      const q = text.trim();
+      if (!q) {
+        if (value != null) onChange(null);
+      } else {
+        const hits = options.filter((o) => o.label.toLowerCase() === q.toLowerCase());
+        const ids = new Set(hits.map((h) => h.value));
+        if (ids.size === 1 && hits[0].value !== value) onChange(hits[0].value);
+      }
+      setText(null);
+    }
+    close();
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: cn("relative", className), children: [
+    label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+    /* @__PURE__ */ jsxs("div", { ref: fieldRef, className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: fieldId,
+          value: shown,
+          placeholder,
+          "aria-label": ariaLabel ?? (typeof label === "string" ? label : void 0),
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-autocomplete": "list",
+          "aria-invalid": invalid || void 0,
+          autoComplete: "off",
+          disabled,
+          autoFocus,
+          inputMode: isPhone ? "none" : void 0,
+          onMouseDown: primaryOnly.onMouseDown,
+          onFocus: (e) => {
+            if (primaryOnly.fromAuxButton()) return;
+            setText(shown);
+            e.currentTarget.select();
+            setOpen(true);
+            if (isPhone) sheetInputRef.current?.focus();
+          },
+          onBlur: () => {
+            if (!isPhone) reconcile();
+          },
+          onChange: (e) => {
+            setText(e.target.value);
+            setOpen(true);
+            setActive(-1);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              setOpen(true);
+              setActive((i) => Math.min(i + 1, matches.length - 1));
+            } else if (e.key === "ArrowUp") {
+              e.preventDefault();
+              setActive((i) => Math.max(i - 1, 0));
+            } else if (e.key === "Enter") {
+              if (open && active >= 0 && active < matches.length) {
+                e.preventDefault();
+                commit(matches[active]);
+              } else {
+                reconcile();
+              }
+            } else if (e.key === "Escape") {
+              setText(null);
+              close();
+            }
+          },
+          className: cn(FIELD_BASE, label !== void 0 && FIELD_FLOATING_PAD, "pr-9", invalid && FIELD_INVALID)
+        }
+      ),
+      showClear ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          "aria-label": clearLabel ?? "Clear",
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => {
+            setText(null);
+            close();
+            onChange(null);
+          },
+          className: cn(
+            "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400",
+            "hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300"
+          ),
+          children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-4" })
+        }
+      ) : /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          "aria-hidden": true,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            setOpen((o) => !o);
+          },
+          className: cn(
+            "absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-slate-400 dark:text-slate-500",
+            disabled ? "opacity-50" : "cursor-pointer"
+          )
+        }
+      )
+    ] }),
+    isPhone && /* @__PURE__ */ jsx(
+      PickerSheet,
+      {
+        open,
+        onClose: reconcile,
+        title: label,
+        query: sheetQuery,
+        onQueryChange: (v) => {
+          setSheetQuery(v);
+          setActive(-1);
+        },
+        searchPlaceholder: searchPlaceholder ?? placeholder,
+        inputRef: sheetInputRef,
+        closeLabel,
+        children: /* @__PURE__ */ jsxs("ul", { role: "listbox", children: [
+          matches.map((o, i) => (
+            // Keyed by group AND value, like combobox-core.tsx: an option may
+            // deliberately appear twice (see `reconcile`), and a bare value key
+            // would collide.
+            /* @__PURE__ */ jsxs(Fragment, { children: [
+              o.group && o.group !== matches[i - 1]?.group && /* @__PURE__ */ jsx(
+                "li",
+                {
+                  role: "presentation",
+                  className: "px-4 pb-0.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400",
+                  children: o.group
+                }
+              ),
+              /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": o.value === value, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => commit(o),
+                  className: cn(SHEET_ROW_CLASS, o.value === value && "font-medium"),
+                  children: o.label
+                }
+              ) })
+            ] }, `${o.group ?? ""}|${String(o.value)}`)
+          )),
+          matches.length === 0 && emptyLabel && /* @__PURE__ */ jsx("li", { className: "px-4 py-3 text-sm text-slate-500 dark:text-slate-400", children: emptyLabel })
+        ] })
+      }
+    ),
+    !isPhone && open && matches.length > 0 && /* @__PURE__ */ jsx(SuggestionList, { anchorRef: fieldRef, panelRef, children: matches.map((o, i) => (
+      // A group heading is emitted at each group boundary rather than repeating
+      // the group on every row (feedback #136). `matches` is group-contiguous,
+      // so comparing with the previous row is enough. Fragment key sits here;
+      // the heading and the option carry their own list semantics — keyed by
+      // group AND value, because an option may deliberately appear twice (see
+      // `reconcile`).
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        o.group && o.group !== matches[i - 1]?.group && /* @__PURE__ */ jsx(
+          "li",
+          {
+            role: "presentation",
+            className: "px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500 first:pt-1 dark:text-slate-400",
+            children: o.group
+          }
+        ),
+        /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": o.value === value, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onMouseDown: (e) => {
+              e.preventDefault();
+              commit(o);
+            },
+            onMouseEnter: () => setActive(i),
+            className: cn(
+              rowClass(i === active),
+              // Indented under its heading, so the hierarchy is readable at a
+              // glance instead of inferred from grey trailing text.
+              o.group && "pl-6",
+              o.value === value && "font-medium"
+            ),
+            children: [
+              o.label,
+              o.sublabel && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-slate-400 dark:text-slate-500", children: o.sublabel })
+            ]
+          }
+        ) })
+      ] }, `${o.group ?? ""}|${String(o.value)}`)
+    )) })
+  ] });
+}
+export {
+  Combobox,
+  InlineEntityCombobox
+};
+//# sourceMappingURL=combobox.js.map