@eifi1/ui-kit 0.33.1 → 0.34.0

package/dist/components/combobox-core.js

@@ -1,19 +1,23 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment2, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment2, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Check, Plus } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { CLIPS_ATTRIBUTE } from "../lib/clipping.js";
 import { DropdownSearchHeader } from "./dropdown.js";
 import { PickerSheet, SHEET_ROW_CLASS } from "./picker-sheet.js";
-import { usePhoneLayout } from "../hooks/use-breakpoint.js";
-import { FLOATING_LABEL_STATIC, Spinner } from "./ui.js";
+import { usePhoneLayout, useRemPx } from "../hooks/use-breakpoint.js";
+import { FLOATING_LABEL_STATIC } from "./field-parts.js";
+import { Spinner } from "./spinner.js";
 import { useAnchorDir } from "./use-anchor-dir.js";
-import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
-import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss.js";
-import { DEFAULT_COMBOBOX_LABELS, useKitLabels } from "../i18n/kit-labels.js";
-import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
+import { anchoredInline, useAnchoredPanel, viewportSize } from "../hooks/use-anchored-panel.js";
+import { takeEscape, useDismissLayer, useOutsideClick } from "../hooks/use-dismiss.js";
+import { useOverlayHistory } from "../hooks/use-overlay-history.js";
+import { isImeEnter } from "../lib/ime.js";
+import { foldForSearch } from "../lib/text-match.js";
+import { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { hasContent } from "../lib/presence.js";
 const isOptionEnabled = (o) => o !== void 0 && !o.disabled;
 function stepEnabled(rows, from, dir) {
   for (let i = from + dir; i >= 0 && i < rows.length; i += dir) {
@@ -83,15 +87,15 @@ function useOptionSource({
     );
     return () => clearTimeout(t);
   }, [query, active, isAsync, tooShort, debounceMs]);
+  const locale = useKitLocale();
   const clientResults = useMemo(() => {
     if (isAsync) return [];
     const src = options ?? [];
-    const q = query.trim().toLowerCase();
+    const q = foldForSearch(query.trim(), locale);
     if (!filter || !q) return src;
-    return src.filter(
-      (o) => o.label.toLowerCase().includes(q) || (o.sublabel ?? "").toLowerCase().includes(q)
-    );
-  }, [isAsync, options, query, filter]);
+    const hit = (s) => s !== void 0 && foldForSearch(s, locale).includes(q);
+    return src.filter((o) => hit(o.label) || hit(o.sublabel));
+  }, [isAsync, options, query, filter, locale]);
   const pending = isAsync && active && !tooShort && settled.query !== query;
   const failed = isAsync && !tooShort && settled.failed;
   return {
@@ -104,6 +108,7 @@ function useOptionSource({
 function useComboboxCore({
   options,
   minChars = 0,
+  backCloses = false,
   ...source
 }) {
   const triggerRef = useRef(null);
@@ -121,7 +126,8 @@ function useComboboxCore({
   const rect = placement.rect;
   const isPhone = usePhoneLayout();
   useOutsideClick([triggerRef, panelRef], close, open && !isPhone);
-  useEscapeKey(closeToTrigger, open);
+  useDismissLayer(open && !isPhone, closeToTrigger);
+  useOverlayHistory(backCloses && open && !isPhone, close);
   const [prevOpen, setPrevOpen] = useState(open);
   const [prevQuery, setPrevQuery] = useState(query);
   if (open !== prevOpen || query !== prevQuery) {
@@ -174,20 +180,10 @@ function useComboboxCore({
     closeToTrigger
   };
 }
-const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
-function useComboboxFieldError(error, invalid, describedBy) {
-  const errorId = useId();
-  const has = hasMessage(error);
-  return {
-    isInvalid: Boolean(invalid) || has,
-    describedBy: mergeDescribedBy(describedBy, has && errorId),
-    errorEl: has ? /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error }) : null
-  };
-}
-const SUGGESTION_LIST_CLASS = "max-h-64 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] py-1 shadow-lg";
+const SUGGESTION_LIST_CLASS = "max-h-64 overflow-y-auto rounded-md border border-subtle bg-surface py-1 shadow-lg";
 const suggestionRowClass = (isActive) => cn(
-  "block w-full truncate px-3 py-1.5 text-start text-sm text-[var(--text-primary)]",
-  isActive ? "bg-[var(--bg-active)]" : "hover:bg-[var(--bg-hover)]"
+  "block w-full truncate-until-large px-3 py-1.5 text-start text-sm text-primary",
+  isActive ? "bg-active" : "hover:bg-hover"
 );
 function useActiveOptionScroll(activeId) {
   useEffect(() => {
@@ -195,6 +191,8 @@ function useActiveOptionScroll(activeId) {
     document.getElementById(activeId)?.scrollIntoView?.({ block: "nearest" });
   }, [activeId]);
 }
+const PANEL_MIN_REM = 13.75;
+const PANEL_EDGE = 8;
 function ComboboxPanel({
   core,
   listboxId,
@@ -210,11 +208,16 @@ function ComboboxPanel({
   sheetTitle,
   closeLabel,
   loadErrorLabel,
+  renderOption,
+  toolbar,
+  width,
+  align = "start",
+  columns,
   className,
   style,
   ...rest
 }) {
-  const createLocked = hasMessage(createDisabledReason);
+  const createLocked = hasContent(createDisabledReason);
   const {
     rect,
     placement,
@@ -239,7 +242,23 @@ function ComboboxPanel({
   useActiveOptionScroll(activeId);
   const labels = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS);
   const dir = useAnchorDir(core.triggerRef, core.open);
+  const remPx = useRemPx();
+  const fit = width?.fit === true && !isPhone;
+  const [fitWidth, setFitWidth] = useState(null);
+  const placed = core.open && rect !== null;
+  useLayoutEffect(() => {
+    const el = panelRef.current;
+    if (!fit || !placed || !el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      const measured = el.getBoundingClientRect().width;
+      setFitWidth(measured > 0 ? measured : null);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [fit, placed, panelRef]);
   const onKeyDown = (e) => {
+    if (takeEscape(e)) return;
+    if (isImeEnter(e)) return;
     if (e.key === "ArrowDown") {
       e.preventDefault();
       setActive(stepEnabled(rows, current, 1));
@@ -257,7 +276,7 @@ function ComboboxPanel({
       if (current < 0) return;
       if (current < results.length) onChoose(results[current]);
       else if (showCreate && !createLocked) onCreate();
-    } else if (e.key === "Tab") {
+    } else if (e.key === "Tab" && !isPhone) {
       e.preventDefault();
       closeToTrigger();
     }
@@ -288,12 +307,107 @@ function ComboboxPanel({
       className: cn(
         "relative",
         message !== null && cn("py-2 text-sm", isPhone ? "px-4" : "px-3"),
-        failed ? "text-[var(--danger)]" : "text-[var(--text-muted)]"
+        failed ? "text-danger" : "text-muted"
       ),
       children: message ?? (results.length > 0 && /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.resultCount(results.length) }))
     }
   );
   if (!core.open || typeof document === "undefined") return null;
+  const optionRow = (o, i) => {
+    const selected = isSelected(o.value);
+    return /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        id: optionId(i),
+        role: "option",
+        "aria-selected": selected,
+        "aria-disabled": o.disabled || void 0,
+        tabIndex: -1,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          if (!o.disabled) onChoose(o);
+        },
+        onMouseEnter: () => {
+          if (!o.disabled) setActive(i);
+        },
+        className: cn(
+          isPhone ? SHEET_ROW_CLASS : columns ? (
+            // A cell of a column (GroupedPicker): tighter, so four columns fit.
+            "flex w-full items-center gap-1.5 rounded px-1.5 py-0.5 text-start text-sm"
+          ) : "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
+          // The row the arrows are on shows it on a phone too: the sheet takes
+          // the keyboard (BUG-5), and a tablet or a desktop at Large has one.
+          o.disabled ? DISABLED_ROW_CLASS : i === current ? "bg-active" : !isPhone && "hover:bg-hover",
+          // After SHEET_ROW_CLASS, so its hover is the one cancelled.
+          o.disabled && isPhone && DISABLED_ROW_CLASS
+        ),
+        children: [
+          multi && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "flex size-4 shrink-0 items-center justify-center rounded border",
+                selected ? "border-[var(--bg-inverse)] bg-inverse text-inverse" : "border-strong bg-surface"
+              ),
+              children: selected && /* @__PURE__ */ jsx(Check, { className: "size-3" })
+            }
+          ),
+          o.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: o.icon }),
+          renderOption ? /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: renderOption(o) }) : (
+            /* Label and sublabel wrap from Large up (text size §10.17, round 0.34 T1). */
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("span", { className: cn("block truncate-until-large text-primary", columns && selected && "font-medium"), children: o.label }),
+              o.sublabel && /* @__PURE__ */ jsx("span", { className: "block truncate-until-large text-xs text-placeholder", children: o.sublabel })
+            ] })
+          ),
+          !multi && selected && /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-brand" })
+        ]
+      }
+    ) });
+  };
+  const createRow = showCreate && /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      id: optionId(results.length),
+      role: "option",
+      "aria-selected": false,
+      "aria-disabled": createLocked || void 0,
+      tabIndex: -1,
+      onMouseDown: (e) => {
+        e.preventDefault();
+        if (!createLocked) onCreate();
+      },
+      onMouseEnter: () => {
+        if (!createLocked) setActive(results.length);
+      },
+      className: cn(
+        isPhone ? SHEET_ROW_CLASS : "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
+        "text-secondary",
+        createLocked ? DISABLED_ROW_CLASS : current === results.length ? "bg-active" : !isPhone && "hover:bg-hover",
+        // After SHEET_ROW_CLASS, so its hover is the one cancelled.
+        createLocked && isPhone && DISABLED_ROW_CLASS
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Plus, { className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block truncate-until-large", children: createContent }),
+          createLocked && /* @__PURE__ */ jsx("span", { className: "block truncate-until-large text-xs text-placeholder", children: createDisabledReason })
+        ] })
+      ]
+    }
+  ) });
+  const blocks = [];
+  if (columns && !isPhone) {
+    results.forEach((o, i) => {
+      const group = o.group ?? "";
+      const last = blocks[blocks.length - 1];
+      if (last && last.group === group) last.rows.push({ o, i });
+      else blocks.push({ group, rows: [{ o, i }] });
+    });
+  }
   const list = /* @__PURE__ */ jsxs(
     "ul",
     {
@@ -302,10 +416,21 @@ function ComboboxPanel({
       "aria-multiselectable": multi,
       "aria-busy": busy || void 0,
       ...{ [CLIPS_ATTRIBUTE]: "" },
-      className: cn("min-h-0 flex-1 overflow-y-auto py-1", isPhone && "flex-none"),
+      className: cn(
+        "min-h-0 flex-1 overflow-y-auto",
+        columns && !isPhone ? "columns-2 gap-4 p-3 md:columns-3 xl:columns-4" : "py-1",
+        isPhone && "flex-none"
+      ),
       children: [
-        results.map((o, i) => {
-          const selected = isSelected(o.value);
+        columns && !isPhone ? blocks.map((block) => (
+          // A column block: its heading is a picture of the group's name, which the
+          // `role="group"` carries for a reader — the listbox may own options and
+          // groups, and a heading of loose text in it is neither.
+          /* @__PURE__ */ jsxs("li", { role: "presentation", className: "mb-3 break-inside-avoid", children: [
+            block.group && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "mb-1 text-xs font-semibold uppercase tracking-wide text-muted", children: block.group }),
+            /* @__PURE__ */ jsx("ul", { role: "group", "aria-label": block.group || void 0, className: "space-y-0.5", children: block.rows.map(({ o, i }) => /* @__PURE__ */ jsx(Fragment2, { children: optionRow(o, i) }, `${o.group ?? ""}|${String(o.value)}`)) })
+          ] }, `${block.group}|${block.rows[0].i}`)
+        )) : results.map((o, i) => {
           const startsGroup = o.group != null && o.group !== results[i - 1]?.group;
           return (
             // Keyed by group AND value: an option may deliberately appear twice —
@@ -317,95 +442,23 @@ function ComboboxPanel({
                 {
                   role: "presentation",
                   className: cn(
-                    "font-semibold uppercase tracking-wide text-[var(--text-muted)]",
+                    "font-semibold uppercase tracking-wide text-muted",
                     isPhone ? "px-4 pb-1 pt-3 text-xs" : "px-3 pb-0.5 pt-2 text-caption first:pt-1"
                   ),
                   children: o.group
                 }
               ),
-              /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  id: optionId(i),
-                  role: "option",
-                  "aria-selected": selected,
-                  "aria-disabled": o.disabled || void 0,
-                  tabIndex: -1,
-                  onMouseDown: (e) => {
-                    e.preventDefault();
-                    if (!o.disabled) onChoose(o);
-                  },
-                  onMouseEnter: () => {
-                    if (!o.disabled) setActive(i);
-                  },
-                  className: cn(
-                    isPhone ? SHEET_ROW_CLASS : "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
-                    o.disabled ? DISABLED_ROW_CLASS : i === current && !isPhone ? "bg-[var(--bg-active)]" : !isPhone && "hover:bg-[var(--bg-hover)]",
-                    // After SHEET_ROW_CLASS, so its hover is the one cancelled.
-                    o.disabled && isPhone && DISABLED_ROW_CLASS
-                  ),
-                  children: [
-                    multi && /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        "aria-hidden": true,
-                        className: cn(
-                          "flex size-4 shrink-0 items-center justify-center rounded border",
-                          selected ? "border-[var(--bg-inverse)] bg-[var(--bg-inverse)] text-[var(--text-inverse)]" : "border-[var(--border-strong)] bg-[var(--bg-surface)]"
-                        ),
-                        children: selected && /* @__PURE__ */ jsx(Check, { className: "size-3" })
-                      }
-                    ),
-                    o.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: o.icon }),
-                    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsx("span", { className: "block truncate text-[var(--text-primary)]", children: o.label }),
-                      o.sublabel && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-[var(--text-placeholder)]", children: o.sublabel })
-                    ] }),
-                    !multi && selected && /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-[var(--brand)]" })
-                  ]
-                }
-              ) })
+              optionRow(o, i)
             ] }, `${o.group ?? ""}|${String(o.value)}`)
           );
         }),
-        showCreate && /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            id: optionId(results.length),
-            role: "option",
-            "aria-selected": false,
-            "aria-disabled": createLocked || void 0,
-            tabIndex: -1,
-            onMouseDown: (e) => {
-              e.preventDefault();
-              if (!createLocked) onCreate();
-            },
-            onMouseEnter: () => {
-              if (!createLocked) setActive(results.length);
-            },
-            className: cn(
-              isPhone ? SHEET_ROW_CLASS : "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
-              "text-[var(--text-secondary)]",
-              createLocked ? DISABLED_ROW_CLASS : current === results.length && !isPhone ? "bg-[var(--bg-active)]" : !isPhone && "hover:bg-[var(--bg-hover)]",
-              // After SHEET_ROW_CLASS, so its hover is the one cancelled.
-              createLocked && isPhone && DISABLED_ROW_CLASS
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Plus, { className: "size-4 shrink-0" }),
-              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("span", { className: "block truncate", children: createContent }),
-                createLocked && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-[var(--text-placeholder)]", children: createDisabledReason })
-              ] })
-            ]
-          }
-        ) })
+        createRow
       ]
     }
   );
+  const searchText = searchPlaceholder ?? labels.search;
   if (isPhone) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       PickerSheet,
       {
         ...rest,
@@ -416,18 +469,30 @@ function ComboboxPanel({
         title: sheetTitle,
         query,
         onQueryChange: setQuery,
-        searchPlaceholder: searchPlaceholder ?? labels.search,
+        searchPlaceholder: searchText,
+        searchLabel: searchText,
         inputRef,
         closeLabel,
-        children: /* @__PURE__ */ jsxs("div", { onKeyDown, className: "relative", children: [
-          list,
-          announcement
-        ] })
+        onSearchKeyDown: onKeyDown,
+        listboxId,
+        activeId,
+        children: [
+          toolbar,
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            list,
+            announcement
+          ] })
+        ]
       }
     );
   }
   if (!rect) return null;
-  const inline = dir === "rtl" ? { right: (document.documentElement.clientWidth || window.innerWidth) - rect.right } : { left: rect.left };
+  const glass = viewportSize().width - 2 * PANEL_EDGE;
+  const least = Math.min(Math.max(rect.width, (width?.minRem ?? PANEL_MIN_REM) * remPx), glass);
+  const most = Math.max(least, Math.min(width?.maxRem !== void 0 ? width.maxRem * remPx : glass, glass));
+  const panelWidth = fit ? Math.min(Math.max(fitWidth ?? least, least), most) : least;
+  const at = anchoredInline(rect, panelWidth, { dir, align, edge: PANEL_EDGE });
+  const inline = dir === "rtl" === (align === "start") ? { right: at.right } : { left: at.left };
   return createPortal(
     /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused
        itself: it catches the listbox keys bubbling from the search <input> inside it,
@@ -445,13 +510,13 @@ function ComboboxPanel({
           top: placement.above ? void 0 : placement.top,
           bottom: placement.above ? placement.bottom : void 0,
           ...inline,
-          width: rect.width,
-          // 220 px at Normal, in rem so the panel's text keeps its room at Large (§3.2).
-          minWidth: "13.75rem",
+          // A `fit` panel takes its width from its rows between the two bounds; any other
+          // is exactly the least width.
+          ...fit ? { width: "max-content", minWidth: least, maxWidth: most } : { width: panelWidth },
           maxHeight: placement.maxHeight
         },
         className: cn(
-          "z-50 flex flex-col rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
+          "z-50 flex flex-col rounded-md border border-subtle bg-surface shadow-lg",
           className
         ),
         children: [
@@ -461,11 +526,13 @@ function ComboboxPanel({
               query,
               onQueryChange: setQuery,
               inputRef,
-              placeholder: searchPlaceholder ?? labels.search,
+              placeholder: searchText,
+              "aria-label": searchText,
               listboxId,
               activeId
             }
           ),
+          toolbar,
           list,
           announcement
         ]
@@ -487,7 +554,6 @@ export {
   suggestionRowClass,
   useActiveOptionScroll,
   useComboboxCore,
-  useComboboxFieldError,
   useOptionSource
 };
 //# sourceMappingURL=combobox-core.js.map