@eifi1/ui-kit 0.51.6 → 0.52.0

package/dist/components/inline-entity-combobox.js

@@ -1,27 +1,30 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment2, useId, useMemo, useRef, useState } from "react";
+import { useId, useMemo, useRef, useState } from "react";
 import { ChevronDown, Plus, X } 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 { takeEscape, useDismissLayer } from "../hooks/use-dismiss.js";
+import { claimEscape, takeEscape, useDismissLayer } from "../hooks/use-dismiss.js";
 import { isImeEnter } from "../lib/ime.js";
 import { isQuietFocus } from "../lib/quiet-focus.js";
 import { usePhoneLayout } from "../hooks/use-breakpoint.js";
 import { PickerSheet, SHEET_ROW_CLASS } from "./picker-sheet.js";
 import {
+  anchoredHeadingClass,
   ComboboxFieldLabel,
   DISABLED_ROW_CLASS,
   endHintRowProps,
-  GROUP_HEADING_STICKY,
+  GroupedOptions,
+  groupRuns,
   isOptionEnabled,
   offersCreate,
+  SHEET_HEADING_CLASS,
   stepEnabled,
-  useActiveOptionScroll
+  useTypedListStatus
 } from "./combobox-core.js";
 import { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
-import { matchesSearch, rankMatch, searchWords } from "../lib/text-match.js";
+import { sameName, searchRanked } from "../lib/text-match.js";
 import {
   EndHintRow,
   FieldCaption,
@@ -119,15 +122,7 @@ function InlineEntityCombobox(props) {
   const matches = useMemo(() => {
     let ranked = options;
     if (query) {
-      const words = searchWords(query, locale);
-      const hit = (o) => matchesSearch(words, [o.label, o.sublabel], locale);
-      const leads = (o) => {
-        const rank = rankMatch(o.label, query, { locale });
-        return rank === 0 || rank === 1;
-      };
-      const starts = options.filter(leads);
-      const rest2 = options.filter((o) => !leads(o) && hit(o));
-      ranked = [...starts, ...rest2];
+      ranked = searchRanked(options, query, (o) => [o.label, o.sublabel], { locale }).sort((a, b) => Number(a.rank > 1) - Number(b.rank > 1)).map((x) => x.row);
     }
     if (!ranked.some((o) => o.group)) return ranked;
     const blocks = /* @__PURE__ */ new Map();
@@ -143,19 +138,28 @@ function InlineEntityCombobox(props) {
     onCreate,
     createQuery,
     options.map((o) => o.label),
-    createEmptyLabel
+    createEmptyLabel,
+    locale
   );
   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 showing = !isPhone && open && !inert && (matches.length > 0 || showCreate);
+  const { showing, expanded, activeOption, statusRegion } = useTypedListStatus({
+    isPhone,
+    open,
+    inert,
+    rowCount: matches.length,
+    extraRow: showCreate,
+    query,
+    active: isOptionEnabled(rows[active]) ? active : -1,
+    optionId,
+    labels
+  });
   useDismissLayer(showing, () => {
     setText(null);
     close();
@@ -172,20 +176,52 @@ function InlineEntityCombobox(props) {
     setText(null);
     close();
   };
+  const exactHit = (q) => {
+    const hits = options.filter((o) => !o.disabled && sameName(o.label, q, locale));
+    return new Set(hits.map((h) => h.value)).size === 1 ? hits[0] : null;
+  };
   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);
+        const hit = exactHit(q);
+        if (hit && hit.value !== value) onChange(hit.value);
       }
     }
     setText(null);
     close();
   };
+  const dismissSheet = () => {
+    setText(null);
+    close();
+  };
+  const listKeyDown = (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 (isImeEnter(e)) return;
+      if (open && isOptionEnabled(rows[active])) {
+        e.preventDefault();
+        if (active === createIndex && showCreate) create();
+        else take(matches[active]);
+      } else if (isPhone) {
+        const hit = exactHit(sheetQuery.trim());
+        if (hit) {
+          e.preventDefault();
+          take(hit);
+        }
+      } else {
+        reconcile();
+      }
+    }
+  };
   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: [
@@ -194,6 +230,16 @@ function InlineEntityCombobox(props) {
     ] })
   ] });
   const withLock = (box) => locked ? /* @__PURE__ */ jsx(LockedReason, { lock, display: disabledReasonDisplay, className: "block", children: box }) : box;
+  const groupedRows = (sheet, row) => /* @__PURE__ */ jsx(
+    GroupedOptions,
+    {
+      runs: groupRuns(matches, (o) => o.group),
+      listboxId,
+      rowKey: (o) => String(o.value),
+      row,
+      headingClassName: (run) => sheet ? SHEET_HEADING_CLASS : anchoredHeadingClass(run)
+    }
+  );
   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,
@@ -218,9 +264,9 @@ function InlineEntityCombobox(props) {
               placeholder,
               "aria-label": ariaLabel,
               role: "combobox",
-              "aria-expanded": open,
+              "aria-expanded": expanded,
               "aria-controls": listboxId,
-              "aria-activedescendant": activeId,
+              "aria-activedescendant": isPhone ? void 0 : activeOption,
               "aria-autocomplete": "list",
               "aria-invalid": field.isInvalid || void 0,
               "aria-describedby": mergeDescribedBy(field.describedBy, locked && lock.reasonId),
@@ -260,24 +306,10 @@ function InlineEntityCombobox(props) {
               },
               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 (isImeEnter(e)) return;
-                  if (open && isOptionEnabled(rows[active])) {
-                    e.preventDefault();
-                    if (active === createIndex && showCreate) create();
-                    else take(matches[active]);
-                  } else {
-                    reconcile();
-                  }
-                } else if (e.key === "Escape") {
+                listKeyDown(e);
+                if (e.key === "Escape") {
                   if (showing && takeEscape(e)) return;
+                  if (text !== null && text !== (selected?.label ?? "")) claimEscape(e);
                   setText(null);
                   close();
                 } else if (e.key === "Tab") {
@@ -330,11 +362,12 @@ function InlineEntityCombobox(props) {
       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(
+      !isPhone && statusRegion,
+      isPhone && /* @__PURE__ */ jsxs(
         PickerSheet,
         {
           open: open && !inert,
-          onClose: reconcile,
+          onClose: dismissSheet,
           title: sheetTitle ?? label,
           query: sheetQuery,
           onQueryChange: (v) => {
@@ -344,109 +377,85 @@ function InlineEntityCombobox(props) {
           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: cn(
-                      GROUP_HEADING_STICKY,
-                      "px-4 pb-0.5 pt-3 text-caption font-semibold uppercase tracking-wide 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-muted", children: labels.noResults })
-          ] })
+          onSearchKeyDown: listKeyDown,
+          listboxId,
+          activeId: activeOption,
+          children: [
+            /* @__PURE__ */ jsxs("ul", { id: listboxId, role: "listbox", children: [
+              groupedRows(true, (o, i) => /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  id: optionId(i),
+                  role: "option",
+                  "aria-selected": o.value === value,
+                  "aria-disabled": o.disabled || void 0,
+                  onClick: () => take(o),
+                  className: cn(
+                    SHEET_ROW_CLASS,
+                    // The row the sheet's arrows are on.
+                    i === active && !o.disabled && "bg-active",
+                    o.value === value && "font-medium",
+                    o.disabled && DISABLED_ROW_CLASS
+                  ),
+                  children: o.label
+                }
+              ) })),
+              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,
+                  onClick: create,
+                  className: cn(
+                    SHEET_ROW_CLASS,
+                    CREATE_ROW_CLASS,
+                    active === createIndex && !createLocked && "bg-active",
+                    createLocked && DISABLED_ROW_CLASS
+                  ),
+                  children: createRowContent
+                }
+              ) }),
+              matches.length === 0 && !showCreate && /* @__PURE__ */ jsx("li", { "aria-hidden": true, className: "px-4 py-3 text-sm text-muted", children: labels.noResults })
+            ] }),
+            statusRegion
+          ]
         }
       ),
       showing && /* @__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: cn(
-                  GROUP_HEADING_STICKY,
-                  "px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-muted first:pt-1"
-                ),
-                children: o.group
-              }
+        groupedRows(false, (o, i) => /* @__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"
             ),
-            /* @__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-placeholder", children: o.sublabel })
-                ]
-              }
-            ) })
-          ] }, `${o.group ?? ""}|${String(o.value)}`)
-        )),
+            children: [
+              o.label,
+              o.sublabel && /* @__PURE__ */ jsx("span", { className: "ms-2 text-xs text-placeholder", children: o.sublabel })
+            ]
+          }
+        ) })),
         showCreate && /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
           "button",
           {