@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/combobox.js

@@ -1,82 +1,30 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment2, useId, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { ChevronDown, Plus, X } from "lucide-react";
-import { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID } from "./ui.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useId, useMemo, useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID } from "./field-base.js";
 import { cn } from "../lib/cn.js";
 import { useDropdown } from "./dropdown.js";
-import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
-import { useAnchorDir } from "./use-anchor-dir.js";
+import { takeEscape, useDismissLayer } from "../hooks/use-dismiss.js";
+import { isImeEnter } from "../lib/ime.js";
 import { usePhoneLayout } from "../hooks/use-breakpoint.js";
 import { PickerSheet, SHEET_ROW_CLASS } from "./picker-sheet.js";
-import {
-  ComboboxFieldLabel,
-  DISABLED_ROW_CLASS,
-  endHintRowProps,
-  isOptionEnabled,
-  offersCreate,
-  stepEnabled,
-  SUGGESTION_LIST_CLASS,
-  suggestionRowClass,
-  useActiveOptionScroll,
-  useComboboxFieldError
-} from "./combobox-core.js";
-import { DEFAULT_COMBOBOX_LABELS, useKitLabels } from "../i18n/kit-labels.js";
+import { ComboboxFieldLabel, endHintRowProps, useActiveOptionScroll } from "./combobox-core.js";
+import { useKitLocale } from "../i18n/kit-labels.js";
+import { rankMatch } from "../lib/text-match.js";
 import {
   EndHintRow,
   FieldCaption,
   LABEL_IN_ROW,
   LockedReason,
+  mergeDescribedBy,
   StaticLabelRow,
+  useFieldError,
   useFieldHint,
   useLockReason
 } from "./field-parts.js";
-import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
-import { useCommitReason } from "./write-lock.js";
-const LIST_CLASS = SUGGESTION_LIST_CLASS;
-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({
-  id,
-  anchorRef,
-  panelRef,
-  children
-}) {
-  const { rect, top, maxHeight } = useAnchoredPanel(anchorRef, true, { preferredHeight: 256 });
-  const dir = useAnchorDir(anchorRef, true);
-  if (!rect) return null;
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: panelRef,
-        className: "fixed z-50",
-        dir,
-        style: { top, left: rect.left, width: rect.width },
-        children: /* @__PURE__ */ jsx("ul", { id, role: "listbox", "data-clips": "", className: LIST_CLASS, style: { maxHeight }, children })
-      }
-    ),
-    document.body
-  );
-}
-const rowClass = suggestionRowClass;
-function lockedKeyDown(e) {
-  if (e.key === "Enter") e.preventDefault();
-}
-const CREATE_ROW_CLASS = "flex items-center gap-2 font-medium text-[var(--brand)]";
+import { lockedKeyDown, rowClass, SuggestionList, usePrimaryPressOnly } from "./combobox-suggestions.js";
+import { InlineEntityCombobox } from "./inline-entity-combobox.js";
 function Combobox(props) {
   const {
     value,
@@ -97,6 +45,7 @@ function Combobox(props) {
     hint,
     disabled,
     disabledReason,
+    disabledReasonDisplay,
     commit,
     optionAdornment,
     autoFocus,
@@ -113,17 +62,13 @@ function Combobox(props) {
     ...rest
   } = props;
   const hintParts = useFieldHint(hint, ariaDescribedBy);
-  const field = useComboboxFieldError(
-    error,
-    invalid || ariaInvalid === true || ariaInvalid === "true",
-    hintParts.describedBy
-  );
+  const field = useFieldError(error, invalid, hintParts.describedBy, ariaInvalid);
   const generated = useId();
   const fieldId = id ?? generated;
   const listboxId = `${generated}-listbox`;
   const optionId = (index) => `${generated}-option-${index}`;
   const isPhone = usePhoneLayout();
-  const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone });
+  const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone, escapeLayer: false });
   const primaryOnly = usePrimaryPressOnly();
   const [active, setActive] = useState(-1);
   const lock = useLockReason(commit, disabledReason);
@@ -133,7 +78,8 @@ function Combobox(props) {
   const sheetInputRef = useRef(null);
   const fieldRef = useRef(null);
   const [typing, setTyping] = useState(false);
-  const query = typing ? value.trim().toLowerCase() : "";
+  const query = typing ? value.trim() : "";
+  const locale = useKitLocale();
   const matches = useMemo(() => {
     const seen = /* @__PURE__ */ new Set();
     const uniq = options.filter((o) => o && !seen.has(o) && seen.add(o));
@@ -142,11 +88,7 @@ function Combobox(props) {
     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);
+      ranked = uniq.map((o) => ({ o, rank: rankMatch(o, query, { locale }) })).filter((x) => x.rank >= 0).sort((a, b) => a.rank - b.rank).map((x) => x.o).slice(0, cap);
     }
     if (!groupBy) return ranked;
     const byGroup = /* @__PURE__ */ new Map();
@@ -156,7 +98,7 @@ function Combobox(props) {
       byGroup.get(key).push(o);
     }
     return [...byGroup.values()].flat();
-  }, [options, query, groupBy, maxSuggestions, isPhone]);
+  }, [options, query, groupBy, maxSuggestions, isPhone, locale]);
   const groupHeadings = useMemo(() => {
     if (!groupBy) return null;
     const heads = /* @__PURE__ */ new Map();
@@ -177,9 +119,14 @@ function Combobox(props) {
   };
   const activeId = !isPhone && active >= 0 && active < matches.length ? optionId(active) : void 0;
   useActiveOptionScroll(activeId);
-  const withLock = (box) => locked ? /* @__PURE__ */ jsx(LockedReason, { lock, className: "block", children: box }) : box;
+  const withLock = (box) => locked ? /* @__PURE__ */ jsx(LockedReason, { lock, display: disabledReasonDisplay, className: "block", children: box }) : box;
   const typed = value.trim();
   const createRow = createLabel && typed.length > 0 && !options.some((o) => o.toLowerCase() === typed.toLowerCase()) ? createLabel(typed) : null;
+  const showing = !isPhone && open && !inert && (matches.length > 0 || Boolean(createRow));
+  useDismissLayer(showing, () => {
+    setOpen(false);
+    setActive(-1);
+  });
   return (
     // `rest` dresses the outer box — a `data-tour` anchor, a test id. Not the NAME,
     // description, invalid or required state: those belong on the <input> below,
@@ -250,6 +197,7 @@ function Combobox(props) {
                   e.preventDefault();
                   setActive((i) => Math.max(i - 1, 0));
                 } else if (e.key === "Enter") {
+                  if (isImeEnter(e)) return;
                   if (open && active >= 0 && active < matches.length) {
                     e.preventDefault();
                     take(matches[active]);
@@ -259,6 +207,7 @@ function Combobox(props) {
                     onSubmit?.();
                   }
                 } else if (e.key === "Escape") {
+                  if (showing && takeEscape(e)) return;
                   setOpen(false);
                   setActive(-1);
                 } else if (e.key === "Tab") {
@@ -283,7 +232,7 @@ function Combobox(props) {
                 if (!inert) setOpen((o) => !o);
               },
               className: cn(
-                "absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
+                "absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder",
                 // The box above does the dimming; dimming here too would halve it again.
                 !inert && "cursor-pointer"
               )
@@ -319,18 +268,18 @@ function Combobox(props) {
                 role: "option",
                 "aria-selected": false,
                 onClick: () => take(typed),
-                className: cn(SHEET_ROW_CLASS, "font-medium text-[var(--brand)]"),
+                className: cn(SHEET_ROW_CLASS, "font-medium text-brand"),
                 children: createRow
               }
             ) }),
             matches.map((o, i) => {
               const group = groupHeadings?.get(i);
-              return /* @__PURE__ */ jsxs(Fragment2, { children: [
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
                 group !== void 0 && /* @__PURE__ */ jsx(
                   "li",
                   {
                     role: "presentation",
-                    className: "px-4 pb-0.5 pt-3 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)]",
+                    className: "px-4 pb-0.5 pt-3 text-caption font-semibold uppercase tracking-wide text-muted",
                     children: group
                   }
                 ),
@@ -346,7 +295,7 @@ function Combobox(props) {
                       optionAdornment && "flex items-center justify-between gap-2"
                     ),
                     children: [
-                      optionAdornment ? /* @__PURE__ */ jsx("span", { className: "truncate", children: o }) : o,
+                      optionAdornment ? /* @__PURE__ */ jsx("span", { className: "truncate-until-large", children: o }) : o,
                       optionAdornment?.(o)
                     ]
                   }
@@ -356,7 +305,7 @@ function Combobox(props) {
           ] })
         }
       ),
-      !isPhone && open && !inert && (matches.length > 0 || createRow) && /* @__PURE__ */ jsxs(SuggestionList, { id: listboxId, anchorRef: fieldRef, panelRef, children: [
+      showing && /* @__PURE__ */ jsxs(SuggestionList, { id: listboxId, anchorRef: fieldRef, panelRef, children: [
         createRow && /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -368,18 +317,18 @@ function Combobox(props) {
               e.preventDefault();
               take(typed);
             },
-            className: cn(rowClass(false), "font-medium text-[var(--brand)]"),
+            className: cn(rowClass(false), "font-medium text-brand"),
             children: createRow
           }
         ) }),
         matches.map((o, i) => {
           const group = groupHeadings?.get(i);
-          return /* @__PURE__ */ jsxs(Fragment2, { children: [
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
             group !== void 0 && /* @__PURE__ */ jsx(
               "li",
               {
                 role: "presentation",
-                className: "px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1",
+                className: "px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-muted first:pt-1",
                 children: group
               }
             ),
@@ -402,10 +351,12 @@ function Combobox(props) {
                   // 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.
+                  // From Large up the label wraps instead (`truncate-until-large`,
+                  // text size §10.17, round 0.34 T1), as the badge-less row does.
                   optionAdornment && "flex items-center justify-between gap-2"
                 ),
                 children: [
-                  optionAdornment ? /* @__PURE__ */ jsx("span", { className: "truncate", children: o }) : o,
+                  optionAdornment ? /* @__PURE__ */ jsx("span", { className: "truncate-until-large", children: o }) : o,
                   optionAdornment?.(o)
                 ]
               }
@@ -416,424 +367,6 @@ function Combobox(props) {
     ] })
   );
 }
-function InlineEntityCombobox(props) {
-  const {
-    value: rawValue,
-    onChange,
-    clearValue = null,
-    options,
-    label,
-    id,
-    placeholder,
-    className,
-    disabled,
-    autoFocus,
-    searchPlaceholder,
-    emptyLabel,
-    closeLabel,
-    sheetTitle,
-    clearable,
-    clearLabel,
-    disabledReason,
-    commit,
-    onCreate,
-    createLabel,
-    createEmptyLabel,
-    createCommit,
-    invalid,
-    error,
-    hint,
-    ref,
-    "aria-label": ariaLabel,
-    // Off `rest` and onto the <input>, which is the combobox a reader meets: `Field`'s
-    // render-prop spreads `{ id, aria-describedby, aria-invalid, aria-required }`, and
-    // on the wrapper div the hint and required state described nothing.
-    "aria-describedby": ariaDescribedBy,
-    "aria-invalid": ariaInvalid,
-    "aria-required": ariaRequired,
-    ...rest
-  } = props;
-  const value = rawValue == null || rawValue === clearValue ? null : rawValue;
-  const hintParts = useFieldHint(hint, ariaDescribedBy);
-  const field = useComboboxFieldError(
-    error,
-    invalid || ariaInvalid === true || ariaInvalid === "true",
-    hintParts.describedBy
-  );
-  const generated = useId();
-  const fieldId = id ?? generated;
-  const listboxId = `${generated}-listbox`;
-  const optionId = (index) => `${generated}-option-${index}`;
-  const isPhone = usePhoneLayout();
-  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 labels = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS, {
-    search: searchPlaceholder,
-    noResults: emptyLabel,
-    clear: clearLabel,
-    create: createLabel
-  });
-  const lock = useLockReason(commit, disabledReason);
-  const locked = lock.locked;
-  const inert = locked || Boolean(disabled);
-  if (locked && (open || text !== null)) {
-    setOpen(false);
-    setText(null);
-  }
-  const createReason = useCommitReason(createCommit, void 0);
-  const createLocked = hasMessage(createReason);
-  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 && !inert);
-  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 rest2 = options.filter(
-        (o) => !o.label.toLowerCase().startsWith(query) && (hit(o.label) || hit(o.sublabel) || hit(o.group))
-      );
-      ranked = [...starts, ...rest2];
-    }
-    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 createQuery = isPhone ? sheetQuery.trim() : text !== null && text !== (selected?.label ?? "") ? text.trim() : "";
-  const showCreate = offersCreate(
-    onCreate,
-    createQuery,
-    options.map((o) => o.label),
-    createEmptyLabel
-  );
-  const createText = createQuery ? labels.create(createQuery) : createEmptyLabel;
-  const rows = showCreate ? [...matches, { disabled: createLocked }] : matches;
-  const createIndex = matches.length;
-  const activeId = !isPhone && isOptionEnabled(rows[active]) ? optionId(active) : void 0;
-  useActiveOptionScroll(activeId);
-  const close = () => {
-    setOpen(false);
-    setActive(-1);
-    setSheetQuery("");
-  };
-  const take = (o) => {
-    if (o.disabled || locked) return;
-    if (o.value !== value) onChange(o.value);
-    setText(null);
-    close();
-  };
-  const create = () => {
-    if (!onCreate || locked || createLocked) return;
-    onCreate(createQuery);
-    setText(null);
-    close();
-  };
-  const reconcile = () => {
-    if (text !== null && !locked) {
-      const q = text.trim();
-      if (!q) {
-        if (value != null) onChange(clearValue);
-      } else {
-        const hits = options.filter(
-          (o) => !o.disabled && 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();
-  };
-  const createRowContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Plus, { "aria-hidden": true, className: "size-4 shrink-0" }),
-    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx("span", { className: "block truncate", children: createText }),
-      createLocked && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs font-normal text-[var(--text-placeholder)]", children: createReason })
-    ] })
-  ] });
-  const withLock = (box) => locked ? /* @__PURE__ */ jsx(LockedReason, { lock, className: "block", children: box }) : box;
-  return (
-    // `rest` dresses the outer box — a `data-tour` anchor, a test id. Not the NAME,
-    // description, invalid or required state: those belong on the <input> below,
-    // which is the combobox a reader meets. Spread FIRST, so the field's ARIA and the
-    // handlers carrying live #309 and dev#549 cannot be replaced from outside.
-    /* @__PURE__ */ jsxs("div", { ...rest, ref: wrapperRef, className: cn("relative", className), children: [
-      label !== void 0 && hintParts.labelHint === void 0 && /* @__PURE__ */ jsx(ComboboxFieldLabel, { htmlFor: fieldId, className: inert ? "opacity-50" : void 0, children: label }),
-      /* @__PURE__ */ jsx(EndHintRow, { ...endHintRowProps("hint" in props, label !== void 0, hintParts.labelHint), children: withLock(
-        /* Inner wrapper for chevron centering — same reasoning as Combobox above.
-            It is also what the portalled list anchors to.
-            Dimmed as a whole when disabled (or locked), the way EntityCombobox dims its
-            trigger. FIELD_BASE's grey alone left a disabled picker looking like a
-            filled-in one beside the pickers that do dim (the label is not the input's
-            `peer`, so it is dimmed by hand above). */
-        /* @__PURE__ */ jsxs("div", { ref: fieldRef, className: cn("relative", inert && "cursor-not-allowed opacity-50"), children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              id: fieldId,
-              value: shown,
-              placeholder,
-              "aria-label": ariaLabel,
-              role: "combobox",
-              "aria-expanded": open,
-              "aria-controls": listboxId,
-              "aria-activedescendant": activeId,
-              "aria-autocomplete": "list",
-              "aria-invalid": field.isInvalid || void 0,
-              "aria-describedby": mergeDescribedBy(field.describedBy, locked && lock.reasonId),
-              "aria-required": ariaRequired,
-              autoComplete: "off",
-              disabled: locked ? void 0 : disabled,
-              readOnly: locked || void 0,
-              "aria-disabled": locked || void 0,
-              autoFocus,
-              inputMode: isPhone ? "none" : void 0,
-              onMouseDown: primaryOnly.onMouseDown,
-              onFocus: (e) => {
-                if (primaryOnly.fromAuxButton() || locked) return;
-                setText(shown);
-                e.currentTarget.select();
-                setOpen(true);
-                if (isPhone) sheetInputRef.current?.focus();
-              },
-              onBlur: () => {
-                if (!isPhone) reconcile();
-              },
-              onChange: (e) => {
-                if (locked) return;
-                setText(e.target.value);
-                setOpen(true);
-                setActive(-1);
-              },
-              onKeyDown: (e) => {
-                if (locked) return lockedKeyDown(e);
-                if (e.key === "ArrowDown") {
-                  e.preventDefault();
-                  setOpen(true);
-                  setActive((i) => stepEnabled(rows, i, 1));
-                } else if (e.key === "ArrowUp") {
-                  e.preventDefault();
-                  setActive((i) => i < 0 ? stepEnabled(rows, -1, 1) : stepEnabled(rows, i, -1));
-                } else if (e.key === "Enter") {
-                  if (open && isOptionEnabled(rows[active])) {
-                    e.preventDefault();
-                    if (active === createIndex && showCreate) create();
-                    else take(matches[active]);
-                  } else {
-                    reconcile();
-                  }
-                } else if (e.key === "Escape") {
-                  setText(null);
-                  close();
-                } else if (e.key === "Tab") {
-                  reconcile();
-                }
-              },
-              className: cn(
-                FIELD_BASE,
-                label !== void 0 && FIELD_FLOATING_PAD,
-                "pe-9",
-                field.isInvalid && FIELD_INVALID
-              )
-            }
-          ),
-          showClear ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              tabIndex: -1,
-              "aria-label": labels.clear,
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: () => {
-                setText(null);
-                close();
-                if (!locked) onChange(clearValue);
-              },
-              className: cn(
-                "absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)]",
-                "hover:text-[var(--text-secondary)]"
-              ),
-              children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-4" })
-            }
-          ) : /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              "aria-hidden": true,
-              onMouseDown: (e) => {
-                e.preventDefault();
-                if (!inert) setOpen((o) => !o);
-              },
-              className: cn(
-                "absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
-                // The box above does the dimming; dimming here too would halve it again.
-                !inert && "cursor-pointer"
-              )
-            }
-          )
-        ] })
-      ) }),
-      label !== void 0 && hintParts.labelHint !== void 0 && /* @__PURE__ */ jsx(StaticLabelRow, { hint: hintParts.labelHint, children: /* @__PURE__ */ jsx(ComboboxFieldLabel, { htmlFor: fieldId, className: cn(LABEL_IN_ROW, inert && "opacity-50"), children: label }) }),
-      /* @__PURE__ */ jsx(FieldCaption, { parts: hintParts }),
-      field.errorEl,
-      isPhone && /* @__PURE__ */ jsx(
-        PickerSheet,
-        {
-          open: open && !inert,
-          onClose: reconcile,
-          title: sheetTitle ?? label,
-          query: sheetQuery,
-          onQueryChange: (v) => {
-            setSheetQuery(v);
-            setActive(-1);
-          },
-          searchPlaceholder: searchPlaceholder ?? placeholder ?? labels.search,
-          inputRef: sheetInputRef,
-          closeLabel,
-          children: /* @__PURE__ */ jsxs("ul", { id: listboxId, 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(Fragment2, { children: [
-                o.group && o.group !== matches[i - 1]?.group && /* @__PURE__ */ jsx(
-                  "li",
-                  {
-                    role: "presentation",
-                    className: "px-4 pb-0.5 pt-3 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)]",
-                    children: o.group
-                  }
-                ),
-                /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    role: "option",
-                    "aria-selected": o.value === value,
-                    "aria-disabled": o.disabled || void 0,
-                    onClick: () => take(o),
-                    className: cn(
-                      SHEET_ROW_CLASS,
-                      o.value === value && "font-medium",
-                      o.disabled && DISABLED_ROW_CLASS
-                    ),
-                    children: o.label
-                  }
-                ) })
-              ] }, `${o.group ?? ""}|${String(o.value)}`)
-            )),
-            showCreate && /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                role: "option",
-                "aria-selected": false,
-                "aria-disabled": createLocked || void 0,
-                onClick: create,
-                className: cn(
-                  SHEET_ROW_CLASS,
-                  CREATE_ROW_CLASS,
-                  createLocked && DISABLED_ROW_CLASS
-                ),
-                children: createRowContent
-              }
-            ) }),
-            matches.length === 0 && !showCreate && /* @__PURE__ */ jsx("li", { className: "px-4 py-3 text-sm text-[var(--text-muted)]", children: labels.noResults })
-          ] })
-        }
-      ),
-      !isPhone && open && !inert && (matches.length > 0 || showCreate) && /* @__PURE__ */ jsxs(SuggestionList, { id: listboxId, 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(Fragment2, { children: [
-            o.group && o.group !== matches[i - 1]?.group && /* @__PURE__ */ jsx(
-              "li",
-              {
-                role: "presentation",
-                className: "px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1",
-                children: o.group
-              }
-            ),
-            /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                id: optionId(i),
-                role: "option",
-                "aria-selected": o.value === value,
-                "aria-disabled": o.disabled || void 0,
-                tabIndex: -1,
-                onMouseDown: (e) => {
-                  e.preventDefault();
-                  take(o);
-                },
-                onMouseEnter: () => {
-                  if (!o.disabled) setActive(i);
-                },
-                className: cn(
-                  rowClass(i === active && !o.disabled),
-                  o.disabled && DISABLED_ROW_CLASS,
-                  // Indented under its heading, so the hierarchy is readable at a
-                  // glance instead of inferred from grey trailing text.
-                  o.group && "ps-6",
-                  o.value === value && "font-medium"
-                ),
-                children: [
-                  o.label,
-                  o.sublabel && /* @__PURE__ */ jsx("span", { className: "ms-2 text-xs text-[var(--text-placeholder)]", children: o.sublabel })
-                ]
-              }
-            ) })
-          ] }, `${o.group ?? ""}|${String(o.value)}`)
-        )),
-        showCreate && /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            id: optionId(createIndex),
-            role: "option",
-            "aria-selected": false,
-            "aria-disabled": createLocked || void 0,
-            tabIndex: -1,
-            onMouseDown: (e) => {
-              e.preventDefault();
-              create();
-            },
-            onMouseEnter: () => {
-              if (!createLocked) setActive(createIndex);
-            },
-            className: cn(
-              rowClass(active === createIndex && !createLocked),
-              CREATE_ROW_CLASS,
-              createLocked && DISABLED_ROW_CLASS
-            ),
-            children: createRowContent
-          }
-        ) })
-      ] })
-    ] })
-  );
-}
 export {
   Combobox,
   InlineEntityCombobox