@k2b/ui 0.35.0 → 0.37.0

package/dist/browser/inputs/Combobox.js

@@ -1,6 +1,7 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { addEventListener as _$addEventListener } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
@@ -14,14 +15,17 @@ import { mergeProps as _$mergeProps } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-combobox><div class=k2b-combobox__input><i class="ti ti-search"aria-hidden=true></i><input type=text role=combobox aria-autocomplete=list><!$><!/></div><div popover=manual class=k2b-choice-popover><div class=k2b-choice-options role=listbox><!$><!/><!$><!/>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-combobox><div class=k2b-combobox__input><i class="ti ti-search"aria-hidden=true></i><input type=text role=combobox autocomplete=off aria-autocomplete=list><!$><!/></div><div popover=manual class=k2b-choice-popover><div class=k2b-choice-options role=listbox><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
   _tmpl$3 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-down"aria-hidden=true>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-choice-status data-tone=danger><span></span><button type=button>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-choice-status>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<button type=button class=k2b-choice-option role=option><!$><!/><span><strong></strong><!$><!/>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<small>`);
-import { createEffect, createSignal, For, Show } from "solid-js";
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-choice-status>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-choice-status data-tone=danger><span></span><button type=button>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-choice-loading role=status><span class=k2b-sr-only></span><!$><!/>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-choice-loading__row aria-hidden=true><span class=k2b-skeleton></span><span class=k2b-skeleton>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<button type=button class=k2b-choice-option role=option><!$><!/><span><strong></strong><!$><!/>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<small>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-choice-footer>`);
+import { createEffect, createMemo, createSignal, For, on, Show } from "solid-js";
 import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
 import { useUiMessages } from "../intl/messages";
 import { createChoiceLoader, createChoicePopover, nextEnabledChoiceIndex } from "./choice";
@@ -53,8 +57,11 @@ export function Combobox(props) {
   // 150ms keeps typing responsive without hammering the loader.
   () => props.debounceMs ?? 150);
   const popover = createChoicePopover(() => Boolean(props.disabled || props.readOnly));
-  const options = loader.options;
+  // A host notice or an error replaces the results; hidden results are never selectable.
+  const options = () => props.status || loader.error() ? [] : loader.options();
+  const optionsById = createMemo(() => new Map(options().map(option => [option.value, option])));
   const focusedOption = () => options()[focusedIndex()];
+  const searchable = value => value.trim().length >= (props.minQueryLength ?? 0);
   const focus = index => {
     setFocusedIndex(index);
     optionRefs[index]?.scrollIntoView({
@@ -64,9 +71,9 @@ export function Combobox(props) {
   /** `eager` loads the currently controlled query on open; typing supplies its
    *  own query, so opening from `onInput` skips the duplicate request. */
   const open = (eager = true) => {
-    if (props.disabled || props.readOnly || popover.open()) return;
+    if (props.disabled || props.readOnly || popover.open() || !searchable(query())) return;
     popover.show();
-    if (eager) loader.load(query(), true);
+    if (eager && !props.status) loader.load(query(), true);
     focus(-1);
   };
   const reset = () => {
@@ -76,8 +83,14 @@ export function Combobox(props) {
   };
   const close = () => {
     popover.hide();
-    reset();
+    if (!props.freeText) return reset();
+    loader.cancel();
+    focus(-1);
   };
+  createEffect(on(options, list => {
+    const index = props.autoHighlight;
+    if (index !== undefined && focusedIndex() < 0 && popover.open() && list.length > 0) setFocusedIndex(Math.min(index, list.length - 1));
+  }));
   createEffect(() => {
     if (props.readOnly) {
       popover.hide();
@@ -94,7 +107,10 @@ export function Combobox(props) {
       description: option.description,
       icon: option.icon
     });
-    reset();
+    if (props.freeText) {
+      loader.cancel();
+      focus(-1);
+    } else reset();
     inputRef?.focus();
   };
   const onKeyDown = event => {
@@ -106,7 +122,7 @@ export function Combobox(props) {
       // While the results are open, Enter belongs to them: it never submits an enclosing form, even with no option active.
       event.preventDefault();
       const option = options()[focusedIndex()];
-      if (option) select(option);
+      if (option) select(option);else if (props.freeText) close();
     } else if ((event.key === "Escape" || event.key === "Tab") && popover.open()) {
       // Escape is only ours while the list is open; otherwise it has to reach an
       // enclosing dialog or drawer.
@@ -146,7 +162,11 @@ export function Combobox(props) {
         _el$0 = _el$9.firstChild,
         [_el$1, _co$2] = _$getNextMarker(_el$0.nextSibling),
         _el$10 = _el$1.nextSibling,
-        [_el$11, _co$3] = _$getNextMarker(_el$10.nextSibling);
+        [_el$11, _co$3] = _$getNextMarker(_el$10.nextSibling),
+        _el$12 = _el$11.nextSibling,
+        [_el$13, _co$4] = _$getNextMarker(_el$12.nextSibling),
+        _el$14 = _el$9.nextSibling,
+        [_el$15, _co$5] = _$getNextMarker(_el$14.nextSibling);
       var _ref$ = popover.setTrigger;
       typeof _ref$ === "function" ? _$use(_ref$, _el$2) : popover.setTrigger = _el$2;
       _$use(element => {
@@ -185,10 +205,16 @@ export function Combobox(props) {
             event.currentTarget.value = query();
             return;
           }
-          setQuery(event.currentTarget.value);
-          open(false);
-          loader.load(event.currentTarget.value);
+          const value = event.currentTarget.value;
+          setQuery(value);
           focus(-1);
+          if (!searchable(value)) {
+            popover.hide();
+            loader.cancel();
+            return;
+          }
+          open(false);
+          if (!props.status) loader.load(value);
         },
         "onKeyDown": onKeyDown
       }), false, false);
@@ -208,83 +234,139 @@ export function Combobox(props) {
       _$setAttribute(_el$9, "id", listboxId);
       _$insert(_el$9, _$createComponent(Show, {
         get when() {
-          return loader.error();
+          return props.status;
+        },
+        children: status => (() => {
+          var _el$17 = _$getNextElement(_tmpl$4);
+          _$insert(_el$17, status);
+          return _el$17;
+        })()
+      }), _el$1, _co$2);
+      _$insert(_el$9, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!!props.status)() && loader.error();
         },
         children: message => (() => {
-          var _el$13 = _$getNextElement(_tmpl$4),
-            _el$14 = _el$13.firstChild,
-            _el$15 = _el$14.nextSibling;
-          _$insert(_el$14, message);
-          _$addEventListener(_el$15, "click", loader.retry, true);
-          _$insert(_el$15, () => messages().retry);
+          var _el$18 = _$getNextElement(_tmpl$5),
+            _el$19 = _el$18.firstChild,
+            _el$20 = _el$19.nextSibling;
+          _$insert(_el$19, message);
+          _$addEventListener(_el$20, "click", loader.retry, true);
+          _$insert(_el$20, () => messages().retry);
           _$runHydrationEvents();
-          return _el$13;
+          return _el$18;
         })()
-      }), _el$1, _co$2);
+      }), _el$11, _co$3);
       _$insert(_el$9, _$createComponent(For, {
         get each() {
-          return _$memo(() => !!loader.error())() ? [] : options();
+          return options().map(option => option.value);
         },
         get fallback() {
-          return (() => {
-            var _el$16 = _$getNextElement(_tmpl$5);
-            _$insert(_el$16, (() => {
-              var _c$ = _$memo(() => query().length >= 2);
-              return () => _c$() ? selectMessages().noResultsFound : selectMessages().typeToSearch;
-            })());
-            return _el$16;
-          })();
-        },
-        children: (option, index) => (() => {
-          var _el$17 = _$getNextElement(_tmpl$6),
-            _el$22 = _el$17.firstChild,
-            [_el$23, _co$5] = _$getNextMarker(_el$22.nextSibling),
-            _el$18 = _el$23.nextSibling,
-            _el$19 = _el$18.firstChild,
-            _el$20 = _el$19.nextSibling,
-            [_el$21, _co$4] = _$getNextMarker(_el$20.nextSibling);
-          _el$17.$$click = () => select(option);
-          _el$17.$$pointerdown = event => event.preventDefault();
-          _el$17.$$pointermove = () => focus(index());
-          _$use(element => optionRefs[index()] = element, _el$17);
-          _$insert(_el$17, _$createComponent(Show, {
+          return _$createComponent(Show, {
             get when() {
-              return option.icon;
+              return _$memo(() => !!!props.status)() && !loader.error();
             },
-            children: icon => (() => {
-              var _el$24 = _$getNextElement(_tmpl$7);
-              _$effect(() => _$className(_el$24, iconClass(icon())));
-              return _el$24;
-            })()
-          }), _el$23, _co$5);
-          _$insert(_el$19, () => option.label);
-          _$insert(_el$18, _$createComponent(Show, {
-            get when() {
-              return option.description;
-            },
-            children: description => (() => {
-              var _el$25 = _$getNextElement(_tmpl$8);
-              _$insert(_el$25, description);
-              return _el$25;
-            })()
-          }), _el$21, _co$4);
-          _$effect(_p$ => {
-            var _v$ = `${listboxId}-${index()}`,
-              _v$2 = index() === focusedIndex(),
-              _v$3 = index() === focusedIndex() ? "true" : undefined;
-            _v$ !== _p$.e && _$setAttribute(_el$17, "id", _p$.e = _v$);
-            _v$2 !== _p$.t && _$setAttribute(_el$17, "aria-selected", _p$.t = _v$2);
-            _v$3 !== _p$.a && _$setAttribute(_el$17, "data-focused", _p$.a = _v$3);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined,
-            a: undefined
+            get children() {
+              return _$createComponent(Show, {
+                get when() {
+                  return loader.loading();
+                },
+                get fallback() {
+                  return (() => {
+                    var _el$25 = _$getNextElement(_tmpl$4);
+                    _$insert(_el$25, (() => {
+                      var _c$ = _$memo(() => query().length >= 2);
+                      return () => _c$() ? props.empty ?? selectMessages().noResultsFound : selectMessages().typeToSearch;
+                    })());
+                    return _el$25;
+                  })();
+                },
+                get children() {
+                  var _el$21 = _$getNextElement(_tmpl$6),
+                    _el$22 = _el$21.firstChild,
+                    _el$23 = _el$22.nextSibling,
+                    [_el$24, _co$6] = _$getNextMarker(_el$23.nextSibling);
+                  _$insert(_el$22, () => messages().loading);
+                  _$insert(_el$21, _$createComponent(For, {
+                    each: [62, 48, 55],
+                    children: width => (() => {
+                      var _el$26 = _$getNextElement(_tmpl$7),
+                        _el$27 = _el$26.firstChild,
+                        _el$28 = _el$27.nextSibling;
+                      _$setStyleProperty(_el$28, "width", `${width}%`);
+                      return _el$26;
+                    })()
+                  }), _el$24, _co$6);
+                  return _el$21;
+                }
+              });
+            }
           });
-          _$runHydrationEvents();
-          return _el$17;
+        },
+        children: (id, index) => {
+          const first = optionsById().get(id);
+          const option = () => optionsById().get(id) ?? first;
+          return (() => {
+            var _el$29 = _$getNextElement(_tmpl$8),
+              _el$34 = _el$29.firstChild,
+              [_el$35, _co$8] = _$getNextMarker(_el$34.nextSibling),
+              _el$30 = _el$35.nextSibling,
+              _el$31 = _el$30.firstChild,
+              _el$32 = _el$31.nextSibling,
+              [_el$33, _co$7] = _$getNextMarker(_el$32.nextSibling);
+            _el$29.$$click = () => select(option());
+            _el$29.$$pointerdown = event => event.preventDefault();
+            _el$29.$$pointermove = () => focus(index());
+            _$use(element => optionRefs[index()] = element, _el$29);
+            _$insert(_el$29, _$createComponent(Show, {
+              get when() {
+                return option().icon;
+              },
+              children: icon => (() => {
+                var _el$36 = _$getNextElement(_tmpl$9);
+                _$effect(() => _$className(_el$36, iconClass(icon())));
+                return _el$36;
+              })()
+            }), _el$35, _co$8);
+            _$insert(_el$31, () => option().label);
+            _$insert(_el$30, _$createComponent(Show, {
+              get when() {
+                return option().description;
+              },
+              children: description => (() => {
+                var _el$37 = _$getNextElement(_tmpl$0);
+                _$insert(_el$37, description);
+                return _el$37;
+              })()
+            }), _el$33, _co$7);
+            _$effect(_p$ => {
+              var _v$ = `${listboxId}-${index()}`,
+                _v$2 = index() === focusedIndex(),
+                _v$3 = index() === focusedIndex() ? "true" : undefined;
+              _v$ !== _p$.e && _$setAttribute(_el$29, "id", _p$.e = _v$);
+              _v$2 !== _p$.t && _$setAttribute(_el$29, "aria-selected", _p$.t = _v$2);
+              _v$3 !== _p$.a && _$setAttribute(_el$29, "data-focused", _p$.a = _v$3);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined
+            });
+            _$runHydrationEvents();
+            return _el$29;
+          })();
+        }
+      }), _el$13, _co$4);
+      _$insert(_el$8, _$createComponent(Show, {
+        get when() {
+          return props.footer;
+        },
+        children: footer => (() => {
+          var _el$38 = _$getNextElement(_tmpl$1);
+          _$insert(_el$38, footer);
+          return _el$38;
         })()
-      }), _el$11, _co$3);
+      }), _el$15, _co$5);
       _$effect(() => _$setAttribute(_el$, "data-invalid", error() ? "true" : undefined));
       _$runHydrationEvents();
       return _el$;

package/dist/browser/inputs/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["inputs/Combobox.tsx"],"sourcesContent":["import { createEffect, createSignal, For, type JSX, Show } from \"solid-js\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { type ChoiceOption, createChoiceLoader, createChoicePopover, nextEnabledChoiceIndex } from \"./choice\";\nimport type { FieldProps, MaybeAccessor } from \"./field-contract\";\nimport { resolveMaybeAccessor } from \"./field-contract\";\nimport { useSelectMessages } from \"./select-messages\";\n\nexport type ComboboxOption = { id: string; label: string; description?: string; icon?: string };\nexport type ComboboxProps = FieldProps & {\n  readOnly?: boolean;\n  query?: MaybeAccessor<string>;\n  onQueryChange?: (query: string) => void;\n  placeholder?: string;\n  fetchData: (query: string, signal: AbortSignal) => Promise<ComboboxOption[]>;\n  onSelect: (option: ComboboxOption) => void;\n  debounceMs?: number;\n};\n\nconst iconClass = (icon: string) => (icon.split(/\\s+/).includes(\"ti\") ? icon : `ti ${icon}`);\n\nexport function Combobox(props: ComboboxProps): JSX.Element {\n  const messages = useUiMessages();\n  const selectMessages = useSelectMessages();\n  const meta = createFieldMeta(props.id);\n  const listboxId = `${meta.controlId}-listbox`;\n  const [localQuery, setLocalQuery] = createSignal(\"\");\n  const query = () => resolveMaybeAccessor(props.query) ?? localQuery();\n  const setQuery = (value: string) => {\n    setLocalQuery(value);\n    props.onQueryChange?.(value);\n  };\n  const error = () => resolveMaybeAccessor(props.error);\n  const [focusedIndex, setFocusedIndex] = createSignal(-1);\n  let inputRef: HTMLInputElement | undefined;\n  let optionRefs: HTMLButtonElement[] = [];\n  const loader = createChoiceLoader(\n    () => async (value, signal) => (await props.fetchData(value, signal)).map((option) => ({ ...option, value: option.id })),\n    // Cloud debounces at 200ms and then pads the response with a 200ms minimum\n    // load time to stop the spinner flickering. The spinner here sits in the\n    // chevron slot and stale results stay visible, so there is nothing to pad —\n    // 150ms keeps typing responsive without hammering the loader.\n    () => props.debounceMs ?? 150,\n  );\n  const popover = createChoicePopover(() => Boolean(props.disabled || props.readOnly));\n  const options = loader.options;\n  const focusedOption = () => options()[focusedIndex()];\n  const focus = (index: number) => {\n    setFocusedIndex(index);\n    optionRefs[index]?.scrollIntoView({ block: \"nearest\" });\n  };\n  /** `eager` loads the currently controlled query on open; typing supplies its\n   *  own query, so opening from `onInput` skips the duplicate request. */\n  const open = (eager = true) => {\n    if (props.disabled || props.readOnly || popover.open()) return;\n    popover.show();\n    if (eager) loader.load(query(), true);\n    focus(-1);\n  };\n  const reset = () => {\n    loader.cancel();\n    setQuery(\"\");\n    focus(-1);\n  };\n  const close = () => {\n    popover.hide();\n    reset();\n  };\n  createEffect(() => {\n    if (props.readOnly) {\n      popover.hide();\n      loader.cancel();\n      setFocusedIndex(-1);\n    }\n  });\n  const select = (option: ChoiceOption<string>) => {\n    if (props.disabled || props.readOnly) return;\n    popover.hide();\n    props.onSelect({ id: option.value, label: option.label, description: option.description, icon: option.icon });\n    reset();\n    inputRef?.focus();\n  };\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (props.disabled || props.readOnly) return;\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      if (!popover.open()) open();\n      else focus(nextEnabledChoiceIndex(options(), focusedIndex(), event.key === \"ArrowDown\" ? 1 : -1));\n    } else if (event.key === \"Enter\" && popover.open()) {\n      // While the results are open, Enter belongs to them: it never submits an enclosing form, even with no option active.\n      event.preventDefault();\n      const option = options()[focusedIndex()];\n      if (option) select(option);\n    } else if ((event.key === \"Escape\" || event.key === \"Tab\") && popover.open()) {\n      // Escape is only ours while the list is open; otherwise it has to reach an\n      // enclosing dialog or drawer.\n      if (event.key === \"Escape\") event.preventDefault();\n      close();\n    }\n  };\n\n  return (\n    <Field\n      class={props.class}\n      label={props.label}\n      description={props.description}\n      error={error()}\n      meta={meta}\n      required={props.required}\n      disabled={props.disabled}\n    >\n      <div class=\"k2b-combobox\" data-invalid={error() ? \"true\" : undefined}>\n        <div ref={popover.setTrigger} class=\"k2b-combobox__input\">\n          <i class=\"ti ti-search\" aria-hidden=\"true\" />\n          {/* A click, typing, or an arrow key opens the list. Focus alone (Tab, a dialog's initial focus) does not, so Escape still closes the enclosing dialog. */}\n          <input\n            ref={(element) => {\n              inputRef = element;\n            }}\n            id={meta.controlId}\n            type=\"text\"\n            value={query()}\n            placeholder={props.placeholder ?? messages().search}\n            disabled={props.disabled}\n            readOnly={props.readOnly}\n            aria-readonly={props.readOnly ? \"true\" : undefined}\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={popover.open()}\n            aria-controls={listboxId}\n            aria-activedescendant={focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined}\n            {...fieldControlAria(meta, props)}\n            onClick={() => open()}\n            onInput={(event) => {\n              if (props.disabled || props.readOnly) {\n                event.currentTarget.value = query();\n                return;\n              }\n              setQuery(event.currentTarget.value);\n              open(false);\n              loader.load(event.currentTarget.value);\n              focus(-1);\n            }}\n            onKeyDown={onKeyDown}\n          />\n          <Show when={loader.loading()} fallback={<i class=\"ti ti-chevron-down\" aria-hidden=\"true\" />}>\n            <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n          </Show>\n        </div>\n        <div ref={popover.setPopover} popover=\"manual\" class=\"k2b-choice-popover\">\n          <div class=\"k2b-choice-options\" role=\"listbox\" id={listboxId}>\n            <Show when={loader.error()}>\n              {(message) => (\n                <div class=\"k2b-choice-status\" data-tone=\"danger\">\n                  <span>{message()}</span>\n                  <button type=\"button\" onClick={loader.retry}>\n                    {messages().retry}\n                  </button>\n                </div>\n              )}\n            </Show>\n            <For\n              each={loader.error() ? [] : options()}\n              fallback={\n                <div class=\"k2b-choice-status\">{query().length >= 2 ? selectMessages().noResultsFound : selectMessages().typeToSearch}</div>\n              }\n            >\n              {(option, index) => (\n                <button\n                  ref={(element) => (optionRefs[index()] = element)}\n                  type=\"button\"\n                  id={`${listboxId}-${index()}`}\n                  class=\"k2b-choice-option\"\n                  role=\"option\"\n                  aria-selected={index() === focusedIndex()}\n                  data-focused={index() === focusedIndex() ? \"true\" : undefined}\n                  onPointerMove={() => focus(index())}\n                  onPointerDown={(event) => event.preventDefault()}\n                  onClick={() => select(option)}\n                >\n                  <Show when={option.icon}>{(icon) => <i class={iconClass(icon())} aria-hidden=\"true\" />}</Show>\n                  <span>\n                    <strong>{option.label}</strong>\n                    <Show when={option.description}>{(description) => <small>{description()}</small>}</Show>\n                  </span>\n                </button>\n              )}\n            </For>\n          </div>\n        </div>\n      </div>\n    </Field>\n  );\n}\n\nexport default Combobox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["inputs/Combobox.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, type JSX, on, Show } from \"solid-js\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { type ChoiceOption, createChoiceLoader, createChoicePopover, nextEnabledChoiceIndex } from \"./choice\";\nimport type { FieldProps, MaybeAccessor } from \"./field-contract\";\nimport { resolveMaybeAccessor } from \"./field-contract\";\nimport { useSelectMessages } from \"./select-messages\";\n\nexport type ComboboxOption = { id: string; label: string; description?: string; icon?: string };\nexport type ComboboxProps = FieldProps & {\n  readOnly?: boolean;\n  query?: MaybeAccessor<string>;\n  onQueryChange?: (query: string) => void;\n  placeholder?: string;\n  fetchData: (query: string, signal: AbortSignal) => Promise<ComboboxOption[]>;\n  onSelect: (option: ComboboxOption) => void;\n  debounceMs?: number;\n  /** The query is the field's own value: picking or closing keeps the typed text, and Enter without an active option only closes the list. */\n  freeText?: boolean;\n  /** Below this many characters nothing loads and the list stays closed. */\n  minQueryLength?: number;\n  /** This result (by position) is active as soon as results arrive, so Enter takes it. */\n  autoHighlight?: number;\n  /** Replaces the results with a host-owned notice, such as an exhausted quota; nothing loads while it is set. */\n  status?: JSX.Element;\n  /** Shown instead of the default text when a search finds nothing. */\n  empty?: JSX.Element;\n  /** One line under the results, such as their source. */\n  footer?: JSX.Element;\n};\n\nconst iconClass = (icon: string) => (icon.split(/\\s+/).includes(\"ti\") ? icon : `ti ${icon}`);\n\nexport function Combobox(props: ComboboxProps): JSX.Element {\n  const messages = useUiMessages();\n  const selectMessages = useSelectMessages();\n  const meta = createFieldMeta(props.id);\n  const listboxId = `${meta.controlId}-listbox`;\n  const [localQuery, setLocalQuery] = createSignal(\"\");\n  const query = () => resolveMaybeAccessor(props.query) ?? localQuery();\n  const setQuery = (value: string) => {\n    setLocalQuery(value);\n    props.onQueryChange?.(value);\n  };\n  const error = () => resolveMaybeAccessor(props.error);\n  const [focusedIndex, setFocusedIndex] = createSignal(-1);\n  let inputRef: HTMLInputElement | undefined;\n  let optionRefs: HTMLButtonElement[] = [];\n  const loader = createChoiceLoader(\n    () => async (value, signal) => (await props.fetchData(value, signal)).map((option) => ({ ...option, value: option.id })),\n    // Cloud debounces at 200ms and then pads the response with a 200ms minimum\n    // load time to stop the spinner flickering. The spinner here sits in the\n    // chevron slot and stale results stay visible, so there is nothing to pad —\n    // 150ms keeps typing responsive without hammering the loader.\n    () => props.debounceMs ?? 150,\n  );\n  const popover = createChoicePopover(() => Boolean(props.disabled || props.readOnly));\n  // A host notice or an error replaces the results; hidden results are never selectable.\n  const options = () => (props.status || loader.error() ? [] : loader.options());\n  const optionsById = createMemo(() => new Map(options().map((option) => [option.value, option])));\n  const focusedOption = () => options()[focusedIndex()];\n  const searchable = (value: string) => value.trim().length >= (props.minQueryLength ?? 0);\n  const focus = (index: number) => {\n    setFocusedIndex(index);\n    optionRefs[index]?.scrollIntoView({ block: \"nearest\" });\n  };\n  /** `eager` loads the currently controlled query on open; typing supplies its\n   *  own query, so opening from `onInput` skips the duplicate request. */\n  const open = (eager = true) => {\n    if (props.disabled || props.readOnly || popover.open() || !searchable(query())) return;\n    popover.show();\n    if (eager && !props.status) loader.load(query(), true);\n    focus(-1);\n  };\n  const reset = () => {\n    loader.cancel();\n    setQuery(\"\");\n    focus(-1);\n  };\n  const close = () => {\n    popover.hide();\n    if (!props.freeText) return reset();\n    loader.cancel();\n    focus(-1);\n  };\n  createEffect(\n    on(options, (list) => {\n      const index = props.autoHighlight;\n      if (index !== undefined && focusedIndex() < 0 && popover.open() && list.length > 0) setFocusedIndex(Math.min(index, list.length - 1));\n    }),\n  );\n  createEffect(() => {\n    if (props.readOnly) {\n      popover.hide();\n      loader.cancel();\n      setFocusedIndex(-1);\n    }\n  });\n  const select = (option: ChoiceOption<string>) => {\n    if (props.disabled || props.readOnly) return;\n    popover.hide();\n    props.onSelect({ id: option.value, label: option.label, description: option.description, icon: option.icon });\n    if (props.freeText) {\n      loader.cancel();\n      focus(-1);\n    } else reset();\n    inputRef?.focus();\n  };\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (props.disabled || props.readOnly) return;\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      if (!popover.open()) open();\n      else focus(nextEnabledChoiceIndex(options(), focusedIndex(), event.key === \"ArrowDown\" ? 1 : -1));\n    } else if (event.key === \"Enter\" && popover.open()) {\n      // While the results are open, Enter belongs to them: it never submits an enclosing form, even with no option active.\n      event.preventDefault();\n      const option = options()[focusedIndex()];\n      if (option) select(option);\n      else if (props.freeText) close();\n    } else if ((event.key === \"Escape\" || event.key === \"Tab\") && popover.open()) {\n      // Escape is only ours while the list is open; otherwise it has to reach an\n      // enclosing dialog or drawer.\n      if (event.key === \"Escape\") event.preventDefault();\n      close();\n    }\n  };\n\n  return (\n    <Field\n      class={props.class}\n      label={props.label}\n      description={props.description}\n      error={error()}\n      meta={meta}\n      required={props.required}\n      disabled={props.disabled}\n    >\n      <div class=\"k2b-combobox\" data-invalid={error() ? \"true\" : undefined}>\n        <div ref={popover.setTrigger} class=\"k2b-combobox__input\">\n          <i class=\"ti ti-search\" aria-hidden=\"true\" />\n          {/* A click, typing, or an arrow key opens the list. Focus alone (Tab, a dialog's initial focus) does not, so Escape still closes the enclosing dialog. */}\n          <input\n            ref={(element) => {\n              inputRef = element;\n            }}\n            id={meta.controlId}\n            type=\"text\"\n            value={query()}\n            placeholder={props.placeholder ?? messages().search}\n            disabled={props.disabled}\n            readOnly={props.readOnly}\n            aria-readonly={props.readOnly ? \"true\" : undefined}\n            role=\"combobox\"\n            autocomplete=\"off\"\n            aria-autocomplete=\"list\"\n            aria-expanded={popover.open()}\n            aria-controls={listboxId}\n            aria-activedescendant={focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined}\n            {...fieldControlAria(meta, props)}\n            onClick={() => open()}\n            onInput={(event) => {\n              if (props.disabled || props.readOnly) {\n                event.currentTarget.value = query();\n                return;\n              }\n              const value = event.currentTarget.value;\n              setQuery(value);\n              focus(-1);\n              if (!searchable(value)) {\n                popover.hide();\n                loader.cancel();\n                return;\n              }\n              open(false);\n              if (!props.status) loader.load(value);\n            }}\n            onKeyDown={onKeyDown}\n          />\n          <Show when={loader.loading()} fallback={<i class=\"ti ti-chevron-down\" aria-hidden=\"true\" />}>\n            <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n          </Show>\n        </div>\n        <div ref={popover.setPopover} popover=\"manual\" class=\"k2b-choice-popover\">\n          <div class=\"k2b-choice-options\" role=\"listbox\" id={listboxId}>\n            <Show when={props.status}>{(status) => <div class=\"k2b-choice-status\">{status()}</div>}</Show>\n            <Show when={!props.status && loader.error()}>\n              {(message) => (\n                <div class=\"k2b-choice-status\" data-tone=\"danger\">\n                  <span>{message()}</span>\n                  <button type=\"button\" onClick={loader.retry}>\n                    {messages().retry}\n                  </button>\n                </div>\n              )}\n            </Show>\n            {/* Keyed by option ID, not object: each fetch returns new objects, and a row replaced between press and release\n                would swallow the click. */}\n            <For\n              each={options().map((option) => option.value)}\n              fallback={\n                <Show when={!props.status && !loader.error()}>\n                  <Show\n                    when={loader.loading()}\n                    fallback={\n                      <div class=\"k2b-choice-status\">\n                        {query().length >= 2 ? (props.empty ?? selectMessages().noResultsFound) : selectMessages().typeToSearch}\n                      </div>\n                    }\n                  >\n                    {/* The first search has nothing to keep visible yet: rows of the final size wait in its place. */}\n                    <div class=\"k2b-choice-loading\" role=\"status\">\n                      <span class=\"k2b-sr-only\">{messages().loading}</span>\n                      <For each={[62, 48, 55]}>\n                        {(width) => (\n                          <div class=\"k2b-choice-loading__row\" aria-hidden=\"true\">\n                            <span class=\"k2b-skeleton\" />\n                            <span class=\"k2b-skeleton\" style={{ width: `${width}%` }} />\n                          </div>\n                        )}\n                      </For>\n                    </div>\n                  </Show>\n                </Show>\n              }\n            >\n              {(id, index) => {\n                const first = optionsById().get(id)!;\n                const option = () => optionsById().get(id) ?? first;\n                return (\n                  <button\n                    ref={(element) => (optionRefs[index()] = element)}\n                    type=\"button\"\n                    id={`${listboxId}-${index()}`}\n                    class=\"k2b-choice-option\"\n                    role=\"option\"\n                    aria-selected={index() === focusedIndex()}\n                    data-focused={index() === focusedIndex() ? \"true\" : undefined}\n                    onPointerMove={() => focus(index())}\n                    onPointerDown={(event) => event.preventDefault()}\n                    onClick={() => select(option())}\n                  >\n                    <Show when={option().icon}>{(icon) => <i class={iconClass(icon())} aria-hidden=\"true\" />}</Show>\n                    <span>\n                      <strong>{option().label}</strong>\n                      <Show when={option().description}>{(description) => <small>{description()}</small>}</Show>\n                    </span>\n                  </button>\n                );\n              }}\n            </For>\n          </div>\n          <Show when={props.footer}>{(footer) => <div class=\"k2b-choice-footer\">{footer()}</div>}</Show>\n        </div>\n      </div>\n    </Field>\n  );\n}\n\nexport default Combobox;\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/inputs/RichSelect.js

@@ -71,6 +71,7 @@ import { useRichSelectMessages } from "./rich-select-messages";
 export const RICH_SELECT_SEARCH_FROM = 8;
 const PHONE_QUERY = "(max-width: 47.999rem)";
 const PLACEHOLDER_ROWS = 4;
+const rowKey = row => row.kind === "heading" ? `heading:${row.id}` : `item:${row.item.value}`;
 const isPhone = () => typeof matchMedia === "function" && matchMedia(PHONE_QUERY).matches;
 function RichSelectVisual(props) {
   return _$createComponent(Switch, {
@@ -445,6 +446,9 @@ export function RichSelect(props) {
     });
     return result;
   });
+  // Rows are keyed by heading and value, not by object: a host that rebuilds equal items must not replace the option
+  // under a press, which would swallow its click.
+  const rowsByKey = createMemo(() => new Map(rows().map(row => [rowKey(row), row])));
   const selected = createMemo(() => {
     const current = value();
     return current === null ? undefined : props.items.find(item => item.value === current);
@@ -879,7 +883,7 @@ export function RichSelect(props) {
                 get children() {
                   return _$createComponent(For, {
                     get each() {
-                      return rows();
+                      return rows().map(rowKey);
                     },
                     get fallback() {
                       return (() => {
@@ -888,80 +892,95 @@ export function RichSelect(props) {
                         return _el$77;
                       })();
                     },
-                    children: row => row.kind === "heading" ? (() => {
-                      var _el$78 = _$getNextElement(_tmpl$26);
-                      _$insert(_el$78, () => row.label);
-                      return _el$78;
-                    })() : // biome-ignore lint/a11y/useKeyWithClickEvents: the trigger or search field handles the keys through aria-activedescendant.
-                    (() => {
-                      var _el$79 = _$getNextElement(_tmpl$27),
-                        _el$81 = _el$79.firstChild,
-                        [_el$82, _co$13] = _$getNextMarker(_el$81.nextSibling),
-                        _el$83 = _el$82.nextSibling,
-                        [_el$84, _co$14] = _$getNextMarker(_el$83.nextSibling),
-                        _el$80 = _el$84.nextSibling;
-                      _el$79.$$click = () => choose(row.item);
-                      _el$79.$$pointermove = () => {
-                        if (active() !== row.index) setActive(row.index);
+                    children: key => {
+                      const first = rowsByKey().get(key);
+                      if (first.kind === "heading") {
+                        const label = () => {
+                          const current = rowsByKey().get(key);
+                          return current?.kind === "heading" ? current.label : first.label;
+                        };
+                        return (() => {
+                          var _el$78 = _$getNextElement(_tmpl$26);
+                          _$insert(_el$78, label);
+                          return _el$78;
+                        })();
+                      }
+                      const entry = () => {
+                        const current = rowsByKey().get(key);
+                        return current?.kind === "item" ? current : first;
                       };
-                      _$insert(_el$79, _$createComponent(Show, {
-                        get when() {
-                          return anyVisual();
-                        },
-                        get children() {
-                          return _$createComponent(Show, {
+                      return (// biome-ignore lint/a11y/useKeyWithClickEvents: the trigger or search field handles the keys through aria-activedescendant.
+                        (() => {
+                          var _el$79 = _$getNextElement(_tmpl$27),
+                            _el$81 = _el$79.firstChild,
+                            [_el$82, _co$13] = _$getNextMarker(_el$81.nextSibling),
+                            _el$83 = _el$82.nextSibling,
+                            [_el$84, _co$14] = _$getNextMarker(_el$83.nextSibling),
+                            _el$80 = _el$84.nextSibling;
+                          _el$79.$$click = () => choose(entry().item);
+                          _el$79.$$pointermove = () => {
+                            if (active() !== entry().index) setActive(entry().index);
+                          };
+                          _$insert(_el$79, _$createComponent(Show, {
                             get when() {
-                              return hasVisual(row.item);
-                            },
-                            get fallback() {
-                              return _$getNextElement(_tmpl$);
+                              return anyVisual();
                             },
                             get children() {
-                              return _$createComponent(RichSelectVisual, {
-                                get item() {
-                                  return row.item;
+                              return _$createComponent(Show, {
+                                get when() {
+                                  return hasVisual(entry().item);
+                                },
+                                get fallback() {
+                                  return _$getNextElement(_tmpl$);
+                                },
+                                get children() {
+                                  return _$createComponent(RichSelectVisual, {
+                                    get item() {
+                                      return entry().item;
+                                    }
+                                  });
                                 }
                               });
                             }
+                          }), _el$82, _co$13);
+                          _$insert(_el$79, _$createComponent(RichSelectRowText, {
+                            get item() {
+                              return entry().item;
+                            },
+                            get labelId() {
+                              return `${optionId(entry().index)}-label`;
+                            },
+                            get lineId() {
+                              return `${optionId(entry().index)}-line`;
+                            }
+                          }), _el$84, _co$14);
+                          _$effect(_p$ => {
+                            var _v$25 = optionId(entry().index),
+                              _v$26 = entry().item.value === value(),
+                              _v$27 = entry().item.disabledReason ? "true" : undefined,
+                              _v$28 = `${optionId(entry().index)}-label`,
+                              _v$29 = [entry().item.disabledReason || entry().item.description ? `${optionId(entry().index)}-line` : "", withPreview() && entry().index === active() ? previewId : ""].filter(Boolean).join(" ") || undefined,
+                              _v$30 = entry().index === active() ? "true" : undefined;
+                            _v$25 !== _p$.e && _$setAttribute(_el$79, "id", _p$.e = _v$25);
+                            _v$26 !== _p$.t && _$setAttribute(_el$79, "aria-selected", _p$.t = _v$26);
+                            _v$27 !== _p$.a && _$setAttribute(_el$79, "aria-disabled", _p$.a = _v$27);
+                            _v$28 !== _p$.o && _$setAttribute(_el$79, "aria-labelledby", _p$.o = _v$28);
+                            _v$29 !== _p$.i && _$setAttribute(_el$79, "aria-describedby", _p$.i = _v$29);
+                            _v$30 !== _p$.n && _$setAttribute(_el$79, "data-active", _p$.n = _v$30);
+                            return _p$;
+                          }, {
+                            e: undefined,
+                            t: undefined,
+                            a: undefined,
+                            o: undefined,
+                            i: undefined,
+                            n: undefined
                           });
-                        }
-                      }), _el$82, _co$13);
-                      _$insert(_el$79, _$createComponent(RichSelectRowText, {
-                        get item() {
-                          return row.item;
-                        },
-                        get labelId() {
-                          return `${optionId(row.index)}-label`;
-                        },
-                        get lineId() {
-                          return `${optionId(row.index)}-line`;
-                        }
-                      }), _el$84, _co$14);
-                      _$effect(_p$ => {
-                        var _v$25 = optionId(row.index),
-                          _v$26 = row.item.value === value(),
-                          _v$27 = row.item.disabledReason ? "true" : undefined,
-                          _v$28 = `${optionId(row.index)}-label`,
-                          _v$29 = [row.item.disabledReason || row.item.description ? `${optionId(row.index)}-line` : "", withPreview() && row.index === active() ? previewId : ""].filter(Boolean).join(" ") || undefined,
-                          _v$30 = row.index === active() ? "true" : undefined;
-                        _v$25 !== _p$.e && _$setAttribute(_el$79, "id", _p$.e = _v$25);
-                        _v$26 !== _p$.t && _$setAttribute(_el$79, "aria-selected", _p$.t = _v$26);
-                        _v$27 !== _p$.a && _$setAttribute(_el$79, "aria-disabled", _p$.a = _v$27);
-                        _v$28 !== _p$.o && _$setAttribute(_el$79, "aria-labelledby", _p$.o = _v$28);
-                        _v$29 !== _p$.i && _$setAttribute(_el$79, "aria-describedby", _p$.i = _v$29);
-                        _v$30 !== _p$.n && _$setAttribute(_el$79, "data-active", _p$.n = _v$30);
-                        return _p$;
-                      }, {
-                        e: undefined,
-                        t: undefined,
-                        a: undefined,
-                        o: undefined,
-                        i: undefined,
-                        n: undefined
-                      });
-                      _$runHydrationEvents();
-                      return _el$79;
-                    })()
+                          _$runHydrationEvents();
+                          return _el$79;
+                        })()
+                      );
+                    }
                   });
                 }
               }), _el$60, _co$8);