@smwb/ui-solid 0.12.1 → 0.13.0

package/dist/headless/components/inputs/selectField/dropdownMenu.js

@@ -1,196 +1,320 @@
-import { createComponent as r, Portal as L, insert as u, addEventListener as S, effect as O, setStyleProperty as d, isServer as R, template as o, memo as W } from "solid-js/web";
-import { createSignal as A, createEffect as x, onCleanup as D, Show as l, For as b } from "solid-js";
-import { createVirtualList as P } from "../../../primitives/createVirtualList.js";
-import { Menu as T } from "../../navigation/menu/menu.js";
-import { TextField as V } from "../textField/textField.js";
-import { MenuDivider as F } from "../../navigation/menu/menuDivider.js";
-import { ProgressIndicator as G } from "../../feedBack/progressIndicator/progressIndicator.js";
-import { MenuItem as $ } from "../../navigation/menu/menuItem.js";
-var Y = /* @__PURE__ */ o("<span class=smwb-select-field__option__helper-text>"), z = /* @__PURE__ */ o("<li class=smwb-select-field__group-label role=presentation>"), K = /* @__PURE__ */ o("<li class=smwb-select-field__menu-search>"), N = /* @__PURE__ */ o("<div class=smwb-select-field__menu-loading>"), j = /* @__PURE__ */ o("<li role=presentation class=smwb-select-field__virtual-viewport><div class=smwb-select-field__virtual-scroller style=overflow-y:auto><div style=position:relative><ul role=presentation class=smwb-select-field__virtual-list style=list-style:none;margin:0;padding:0>"), q = /* @__PURE__ */ o("<li class=smwb-select-field__empty-items>");
-function te(t) {
-  const C = () => Array.isArray(t.value) ? t.value : [t.value], m = () => t.items.some((e) => !!e.group), M = () => t.itemHeight ?? 40, h = () => t.menuMaxHeight || 240, g = () => !!t.virtualized && !m() && !t.isLoading && t.items.length > 0, s = P({
-    itemCount: () => g() ? t.items.length : 0,
-    itemHeight: M,
-    viewportHeight: h
-  }), [v, k] = A();
-  x(() => {
-    const e = t.anchorElement();
-    t.isOpen && e && k(e.clientWidth);
-  }), x(() => {
-    if (!t.isOpen) return;
-    const e = (n) => {
-      n.key === "Escape" && t.onClose();
+import { createComponent as r, Portal as F, insert as g, mergeProps as R, addEventListener as G, use as Y, effect as P, setStyleProperty as I, setAttribute as y, memo as S, isServer as K, template as f, spread as N } from "solid-js/web";
+import { createSignal as j, createEffect as k, onCleanup as q, Show as h, For as $, splitProps as J } from "solid-js";
+import p from "clsx";
+import { createVirtualList as Q } from "../../../primitives/createVirtualList.js";
+import { callHandler as U } from "../../../primitives/callHandler.js";
+import { Menu as X } from "../../navigation/menu/menu.js";
+import { TextField as Z } from "../textField/textField.js";
+import { MenuDivider as ee } from "../../navigation/menu/menuDivider.js";
+import { ProgressIndicator as te } from "../../feedBack/progressIndicator/progressIndicator.js";
+import { Ripple as ne } from "../../base/ripple/ripple.js";
+var le = /* @__PURE__ */ f("<li><span class=smwb-menu__item-inner>"), ie = /* @__PURE__ */ f("<span class=smwb-select-field__option__helper-text>"), re = /* @__PURE__ */ f("<li class=smwb-select-field__group-label role=presentation>"), oe = /* @__PURE__ */ f("<li role=group class=smwb-select-field__group><div class=smwb-select-field__group-label></div><ul role=presentation class=smwb-select-field__group-options>"), ae = /* @__PURE__ */ f("<li class=smwb-select-field__menu-search>"), se = /* @__PURE__ */ f("<li class=smwb-select-field__menu-loading>"), ce = /* @__PURE__ */ f("<li role=presentation class=smwb-select-field__virtual-viewport><div class=smwb-select-field__virtual-scroller tabindex=-1 style=overflow-y:auto><div style=position:relative><ul role=presentation class=smwb-select-field__virtual-list style=list-style:none;margin:0;padding:0>"), ue = /* @__PURE__ */ f("<li><ul role=listbox class=smwb-select-field__listbox>"), de = /* @__PURE__ */ f("<li class=smwb-select-field__empty-items>");
+function A(e, u) {
+  return `${e}-option-${u}`;
+}
+function me(e, u) {
+  for (let c = e.parentElement; c; c = c.parentElement) {
+    if (c.scrollHeight > c.clientHeight) {
+      const d = c.getBoundingClientRect(), m = e.getBoundingClientRect();
+      m.top < d.top ? c.scrollTop -= d.top - m.top : m.bottom > d.bottom && (c.scrollTop += m.bottom - d.bottom);
+    }
+    if (c === u) break;
+  }
+}
+function D(e) {
+  const [u, c] = J(e, ["children", "class", "disabled", "selected", "value", "onClick", "optionRenderer", "ref"]);
+  let d;
+  return (() => {
+    var m = le(), v = m.firstChild;
+    return N(m, R(c, {
+      get class() {
+        return p("smwb-menu__item", u.class, {
+          "smwb-menu__item--disabled": u.disabled,
+          "smwb-menu__item--selected": u.selected
+        });
+      },
+      get "data-value"() {
+        return u.value;
+      },
+      onClick: (b) => U(u.onClick, b),
+      onPointerDown: (b) => {
+        u.disabled || d?.onRipple(b);
+      }
+    }), !1, !0), g(v, () => u.children), g(m, r(ne, {
+      actionRef: (b) => d = b
+    }), null), m;
+  })();
+}
+function $e(e) {
+  const u = () => Array.isArray(e.value) ? e.value : [e.value], c = () => e.items.some((t) => !!t.group), d = () => e.itemHeight ?? 40, m = () => e.menuMaxHeight || 240, v = () => !!e.virtualized && !c() && !e.isLoading && e.items.length > 0, b = () => e.items.length + (e.createOption ? 1 : 0), E = () => e.activeIndex ?? -1, w = Q({
+    itemCount: () => v() ? e.items.length : 0,
+    itemHeight: d,
+    viewportHeight: m
+  });
+  let M, _;
+  const [T, B] = j();
+  k(() => {
+    const t = e.anchorElement();
+    e.isOpen && t && B(t.clientWidth);
+  }), k(() => {
+    if (!e.isOpen) return;
+    const t = (i) => {
+      i.key === "Escape" && !i.defaultPrevented && e.onClose();
     };
-    document.addEventListener("keydown", e), D(() => document.removeEventListener("keydown", e));
+    document.addEventListener("keydown", t), q(() => document.removeEventListener("keydown", t));
+  }), k(() => {
+    const t = E(), i = e.listboxId;
+    if (!e.isOpen || !e.showActive || t < 0 || !i) return;
+    if (v() && _ && t < e.items.length) {
+      const n = t * d(), o = _.clientHeight || m(), s = n < _.scrollTop ? n : n + d() > _.scrollTop + o ? n + d() - o : _.scrollTop;
+      s !== _.scrollTop && (_.scrollTop = s, w.onScroll({
+        currentTarget: {
+          scrollTop: s
+        }
+      }));
+    }
+    const l = document.getElementById(A(i, t));
+    l && me(l, M);
   });
-  const E = (e) => {
-    const n = [];
-    let c;
-    for (const a of e)
-      m() && a.group !== c && (c = a.group, n.push({
-        kind: "group",
-        group: a.group
-      })), n.push({
-        kind: "item",
-        item: a
-      });
-    return n;
-  }, f = (e) => r($, {
-    get value() {
-      return e.value;
+  const H = (t, i, l, n) => ({
+    get id() {
+      return e.listboxId ? A(e.listboxId, t()) : void 0;
     },
-    get disabled() {
-      return e.disabled;
+    role: "option",
+    get "aria-selected"() {
+      return i();
     },
-    get selected() {
-      return !!C().find((n) => n === e.value);
+    "aria-disabled": l || void 0,
+    // With a virtual list only a window of the options exists.
+    get "aria-setsize"() {
+      return v() ? b() : void 0;
     },
-    onClick: (n) => {
-      e.disabled || t.onItemClick(n, e);
+    get "aria-posinset"() {
+      return v() ? t() + 1 : void 0;
     },
-    get optionRenderer() {
-      return t.optionRenderer;
+    // The virtual list places its rows at itemHeight: a row takes that height.
+    get style() {
+      return v() && t() < e.items.length ? {
+        height: `${d()}px`
+      } : void 0;
     },
-    get children() {
-      return [W(() => e.text), r(l, {
+    disabled: l,
+    get selected() {
+      return i();
+    },
+    get class() {
+      return p("smwb-select-field__option", n.class, e.showActive && t() === E() && "smwb-select-field__option--active");
+    },
+    value: n.value,
+    onClick: n.onClick,
+    optionRenderer: n.optionRenderer,
+    children: n.children
+  }), C = (t, i) => {
+    const l = H(i, () => u().some((n) => n === t.value), t.disabled, {
+      value: t.value,
+      onClick: (n) => {
+        t.disabled || e.onItemClick(n, t);
+      },
+      optionRenderer: e.optionRenderer,
+      children: [S(() => t.text), r(h, {
+        get when() {
+          return t.helperText;
+        },
+        get children() {
+          var n = ie();
+          return g(n, () => t.helperText), n;
+        }
+      })]
+    });
+    return r(h, {
+      get when() {
+        return e.optionRenderer;
+      },
+      get fallback() {
+        return r(D, l);
+      },
+      children: (n) => n()(l)
+    });
+  }, V = (t) => {
+    if (!c()) return t.map((o, s) => ({
+      kind: "item",
+      item: o,
+      index: s
+    }));
+    const i = [];
+    let l, n;
+    return t.forEach((o, s) => {
+      (!n || o.group !== l) && (l = o.group, n = {
+        kind: "group",
+        group: o.group,
+        start: s,
+        items: []
+      }, i.push(n)), n.items.push(o);
+    }), i;
+  }, W = (t) => {
+    if (t.kind === "item") return C(t.item, () => t.index);
+    if (t.group === void 0)
+      return [r(h, {
         get when() {
-          return e.helperText;
+          return t.start > 0;
         },
         get children() {
-          var n = Y();
-          return u(n, () => e.helperText), n;
+          return re();
         }
+      }), r($, {
+        get each() {
+          return t.items;
+        },
+        children: (l, n) => C(l, () => t.start + n())
       })];
-    }
-  }), I = (e) => e.kind === "group" ? (() => {
-    var n = z();
-    return u(n, () => e.group), n;
-  })() : f(e.item), H = () => ({
-    ...v() ? {
-      "min-width": `${v()}px`
+    const i = `${e.listboxId}-group-${t.start}`;
+    return (() => {
+      var l = oe(), n = l.firstChild, o = n.nextSibling;
+      return y(l, "aria-labelledby", i), y(n, "id", i), g(n, () => t.group), g(o, r($, {
+        get each() {
+          return t.items;
+        },
+        children: (s, a) => C(s, () => t.start + a())
+      })), l;
+    })();
+  }, z = () => ({
+    ...T() ? {
+      "min-width": `${T()}px`
     } : {},
-    ...t.menuMaxHeight ? {
-      "max-height": `${t.menuMaxHeight}px`,
+    ...e.menuMaxHeight ? {
+      "max-height": `${e.menuMaxHeight}px`,
       "overflow-y": "auto"
     } : {}
   });
-  return r(L, {
+  return r(F, {
     get mount() {
-      return R ? void 0 : t.container ?? document.body;
+      return K ? void 0 : e.container ?? document.body;
     },
     get children() {
-      return r(T, {
+      return r(X, {
+        ref: (t) => {
+          M = t, e.menuRef?.(t);
+        },
         get isOpen() {
-          return t.isOpen;
+          return e.isOpen;
         },
-        onClose: () => t.onClose(),
+        onClose: () => e.onClose(),
         get anchorElement() {
-          return t.anchorElement();
+          return e.anchorElement();
         },
         get middleware() {
-          return t.menuMiddleware;
+          return e.menuMiddleware;
         },
         get style() {
-          return H();
+          return z();
         },
         "data-smwb-overlay-layer": !0,
+        listRole: "presentation",
+        tabIndex: -1,
+        onMouseDown: (t) => {
+          t.target instanceof HTMLInputElement || t.preventDefault();
+        },
         get children() {
-          return [r(l, {
+          return [r(h, {
             get when() {
-              return t.search;
+              return e.search;
             },
             get children() {
               return [(() => {
-                var e = K();
-                return u(e, r(V, {
+                var t = ae();
+                return g(t, r(Z, R(() => e.searchInputProps, {
+                  ref: (i) => e.searchInputRef?.(i),
                   class: "smwb-select-field__menu-search-input",
                   type: "text",
                   placeholder: "Найти...",
+                  autocomplete: "off",
                   get value() {
-                    return t.searchValue;
+                    return e.searchValue;
                   },
-                  onChange: (n) => t.onSearchInputChange?.(n),
+                  onChange: (i) => e.onSearchInputChange?.(i),
                   fullWidth: !0
-                })), e;
-              })(), r(F, {})];
+                }))), t;
+              })(), r(ee, {})];
             }
-          }), r(l, {
+          }), r(h, {
             get when() {
-              return t.isLoading;
+              return e.isLoading;
             },
             get children() {
-              var e = N();
-              return u(e, r(G, {
+              var t = se();
+              return g(t, r(te, {
                 type: "indeterminate",
                 variant: "circular",
                 class: "smwb-select-field__menu__loader"
-              })), e;
+              })), t;
             }
-          }), r(l, {
-            get when() {
-              return !t.isLoading;
-            },
-            get children() {
-              return r(l, {
-                get when() {
-                  return g();
-                },
-                get fallback() {
-                  return r(l, {
-                    get when() {
-                      return t.items.length > 0;
-                    },
-                    get fallback() {
-                      return r(l, {
-                        get when() {
-                          return !t.createOption;
-                        },
-                        get children() {
-                          var e = q();
-                          return u(e, () => t.menuNoItemsMessage || "Опций не найдено."), e;
-                        }
-                      });
-                    },
-                    get children() {
-                      return r(b, {
-                        get each() {
-                          return E(t.items);
-                        },
-                        children: (e) => I(e)
-                      });
-                    }
-                  });
-                },
+          }), (() => {
+            var t = ue(), i = t.firstChild;
+            return g(i, r(h, {
+              get when() {
+                return !e.isLoading;
+              },
+              get children() {
+                return r(h, {
+                  get when() {
+                    return v();
+                  },
+                  get fallback() {
+                    return r($, {
+                      get each() {
+                        return V(e.items);
+                      },
+                      children: (l) => W(l)
+                    });
+                  },
+                  get children() {
+                    var l = ce(), n = l.firstChild, o = n.firstChild, s = o.firstChild;
+                    return G(n, "scroll", w.onScroll), Y((a) => _ = a, n), g(s, r($, {
+                      get each() {
+                        return e.items.slice(w.startIndex(), w.endIndex());
+                      },
+                      children: (a, x) => C(a, () => w.startIndex() + x())
+                    })), P((a) => {
+                      var x = `${m()}px`, L = `${w.totalHeight()}px`, O = `translateY(${w.offsetY()}px)`;
+                      return x !== a.e && I(n, "max-height", a.e = x), L !== a.t && I(o, "height", a.t = L), O !== a.a && I(s, "transform", a.a = O), a;
+                    }, {
+                      e: void 0,
+                      t: void 0,
+                      a: void 0
+                    }), l;
+                  }
+                });
+              }
+            }), null), g(i, r(h, {
+              get when() {
+                return e.createOption;
+              },
+              children: (l) => r(D, R(() => H(() => e.items.length, () => !1, !1, {
+                value: "__create__",
+                class: "smwb-select-field__create-option",
+                onClick: (n) => l().onCreate(n),
                 get children() {
-                  var e = j(), n = e.firstChild, c = n.firstChild, a = c.firstChild;
-                  return S(n, "scroll", s.onScroll), u(a, r(b, {
-                    get each() {
-                      return t.items.slice(s.startIndex(), s.endIndex());
-                    },
-                    children: (i) => f(i)
-                  })), O((i) => {
-                    var _ = `${h()}px`, w = `${s.totalHeight()}px`, y = `translateY(${s.offsetY()}px)`;
-                    return _ !== i.e && d(n, "max-height", i.e = _), w !== i.t && d(c, "height", i.t = w), y !== i.a && d(a, "transform", i.a = y), i;
-                  }, {
-                    e: void 0,
-                    t: void 0,
-                    a: void 0
-                  }), e;
+                  return l().text;
                 }
-              });
-            }
-          }), r(l, {
+              })))
+            }), null), P((l) => {
+              var n = e.listboxId, o = e.labelledBy, s = e.label, a = e.multiple || void 0, x = e.isLoading || void 0;
+              return n !== l.e && y(i, "id", l.e = n), o !== l.t && y(i, "aria-labelledby", l.t = o), s !== l.a && y(i, "aria-label", l.a = s), a !== l.o && y(i, "aria-multiselectable", l.o = a), x !== l.i && y(i, "aria-busy", l.i = x), l;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0,
+              i: void 0
+            }), t;
+          })(), r(h, {
             get when() {
-              return t.createOption;
+              return S(() => !e.isLoading && e.items.length === 0)() && !e.createOption;
             },
-            children: (e) => r($, {
-              value: "__create__",
-              onClick: (n) => e().onCreate(n),
-              class: "smwb-select-field__create-option",
-              get children() {
-                return e().text;
-              }
-            })
+            get children() {
+              var t = de();
+              return g(t, () => e.menuNoItemsMessage || "Опций не найдено."), t;
+            }
           })];
         }
       });
@@ -198,6 +322,7 @@ function te(t) {
   });
 }
 export {
-  te as DropdownMenu
+  $e as DropdownMenu,
+  A as dropdownOptionId
 };
 //# sourceMappingURL=dropdownMenu.js.map

package/dist/headless/components/inputs/selectField/dropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdownMenu.js","sources":["../../../../../src/components/inputs/selectField/dropdownMenu.tsx"],"sourcesContent":["import { type Accessor, type JSX, For, Show, createEffect, createSignal, onCleanup } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport type { Middleware } from \"@floating-ui/dom\";\nimport { Menu, MenuDivider, MenuItem } from \"../../navigation/menu\";\nimport { TextField } from \"../textField\";\nimport { ProgressIndicator } from \"../../feedBack/progressIndicator\";\nimport { createVirtualList } from \"../../../primitives/createVirtualList\";\n\nexport interface DropdownItem {\n  key?: string | number;\n  text: string;\n  value: string | number | undefined | null;\n  helperText?: string;\n  disabled?: boolean;\n  /** Optional group label; consecutive items sharing it get a group header. */\n  group?: string;\n}\n\ntype SearchEvent = Event & { currentTarget: HTMLInputElement };\ntype ItemEvent = Event & { currentTarget: Element; target: Element };\n\nexport interface DropdownItemProps {\n  menuMaxHeight?: number | undefined;\n  menuMiddleware?: Middleware[] | undefined;\n  menuNoItemsMessage?: JSX.Element;\n  search?: boolean | undefined;\n  onSearchInputChange?: ((event: SearchEvent) => void) | undefined;\n  items: DropdownItem[];\n  searchValue?: string | number | undefined;\n  isOpen: boolean;\n  onClose: () => void;\n  anchorElement: Accessor<HTMLElement | null>;\n  value?: undefined | null | string | number | (undefined | null | string | number)[];\n  onItemClick: (event: ItemEvent, item: DropdownItem) => void;\n  isLoading?: boolean | undefined;\n  optionRenderer?: ((args: import(\"../../navigation/menu\").MenuItemProps) => JSX.Element) | undefined;\n  container?: HTMLElement | undefined;\n  createOption?: { text: JSX.Element; onCreate: (event: ItemEvent) => void } | undefined;\n  virtualized?: boolean | undefined;\n  itemHeight?: number | undefined;\n}\n\ntype Row = { kind: \"group\"; group?: string | undefined } | { kind: \"item\"; item: DropdownItem };\n\nexport function DropdownMenu(props: DropdownItemProps): JSX.Element {\n  const valueArray = (): Array<string | number | undefined | null> =>\n    Array.isArray(props.value) ? props.value : [props.value];\n  const hasGroups = (): boolean => props.items.some((i) => !!i.group);\n  const itemHeight = (): number => props.itemHeight ?? 40;\n  const viewportHeight = (): number => props.menuMaxHeight || 240;\n  const useVirtual = (): boolean => !!props.virtualized && !hasGroups() && !props.isLoading && props.items.length > 0;\n\n  const virtual = createVirtualList({\n    itemCount: () => (useVirtual() ? props.items.length : 0),\n    itemHeight,\n    viewportHeight,\n  });\n\n  const [menuMinWidth, setMenuMinWidth] = createSignal<number>();\n\n  createEffect(() => {\n    const anchor = props.anchorElement();\n    if (props.isOpen && anchor) setMenuMinWidth(anchor.clientWidth);\n  });\n\n  createEffect(() => {\n    if (!props.isOpen) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") props.onClose();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const toRows = (list: DropdownItem[]): Row[] => {\n    const out: Row[] = [];\n    let lastGroup: string | undefined;\n    for (const el of list) {\n      if (hasGroups() && el.group !== lastGroup) {\n        lastGroup = el.group;\n        out.push({ kind: \"group\", group: el.group });\n      }\n      out.push({ kind: \"item\", item: el });\n    }\n    return out;\n  };\n\n  const renderItem = (el: DropdownItem): JSX.Element => (\n    <MenuItem\n      value={el.value}\n      disabled={el.disabled}\n      selected={!!valueArray().find((v) => v === el.value)}\n      onClick={(e) => {\n        if (!el.disabled) props.onItemClick(e as ItemEvent, el);\n      }}\n      optionRenderer={props.optionRenderer}\n    >\n      {el.text}\n      <Show when={el.helperText}>\n        <span class=\"smwb-select-field__option__helper-text\">{el.helperText}</span>\n      </Show>\n    </MenuItem>\n  );\n\n  const renderRow = (row: Row): JSX.Element =>\n    row.kind === \"group\" ? (\n      <li class=\"smwb-select-field__group-label\" role=\"presentation\">\n        {row.group}\n      </li>\n    ) : (\n      renderItem(row.item)\n    );\n\n  const menuStyle = (): JSX.CSSProperties => ({\n    ...(menuMinWidth() ? { \"min-width\": `${menuMinWidth()}px` } : {}),\n    ...(props.menuMaxHeight ? { \"max-height\": `${props.menuMaxHeight}px`, \"overflow-y\": \"auto\" } : {}),\n  });\n\n  return (\n    <Portal mount={(isServer ? undefined : (props.container ?? document.body)) as Node}>\n      <Menu\n        isOpen={props.isOpen}\n        onClose={() => props.onClose()}\n        anchorElement={props.anchorElement()}\n        middleware={props.menuMiddleware}\n        style={menuStyle()}\n        data-smwb-overlay-layer\n      >\n        <Show when={props.search}>\n          <li class=\"smwb-select-field__menu-search\">\n            <TextField\n              class=\"smwb-select-field__menu-search-input\"\n              type=\"text\"\n              placeholder=\"Найти...\"\n              value={props.searchValue}\n              onChange={(e) => props.onSearchInputChange?.(e as SearchEvent)}\n              fullWidth\n            />\n          </li>\n          <MenuDivider />\n        </Show>\n\n        <Show when={props.isLoading}>\n          <div class=\"smwb-select-field__menu-loading\">\n            <ProgressIndicator type=\"indeterminate\" variant=\"circular\" class=\"smwb-select-field__menu__loader\" />\n          </div>\n        </Show>\n\n        <Show when={!props.isLoading}>\n          <Show\n            when={useVirtual()}\n            fallback={\n              <Show\n                when={props.items.length > 0}\n                fallback={\n                  <Show when={!props.createOption}>\n                    <li class=\"smwb-select-field__empty-items\">{props.menuNoItemsMessage || \"Опций не найдено.\"}</li>\n                  </Show>\n                }\n              >\n                <For each={toRows(props.items)}>{(row) => renderRow(row)}</For>\n              </Show>\n            }\n          >\n            <li role=\"presentation\" class=\"smwb-select-field__virtual-viewport\">\n              <div\n                class=\"smwb-select-field__virtual-scroller\"\n                style={{ \"max-height\": `${viewportHeight()}px`, \"overflow-y\": \"auto\" }}\n                onScroll={virtual.onScroll}\n              >\n                <div style={{ height: `${virtual.totalHeight()}px`, position: \"relative\" }}>\n                  <ul\n                    role=\"presentation\"\n                    class=\"smwb-select-field__virtual-list\"\n                    style={{ transform: `translateY(${virtual.offsetY()}px)`, \"list-style\": \"none\", margin: \"0\", padding: \"0\" }}\n                  >\n                    <For each={props.items.slice(virtual.startIndex(), virtual.endIndex())}>{(el) => renderItem(el)}</For>\n                  </ul>\n                </div>\n              </div>\n            </li>\n          </Show>\n        </Show>\n\n        <Show when={props.createOption}>\n          {(createOption) => (\n            <MenuItem\n              value=\"__create__\"\n              onClick={(e) => createOption().onCreate(e as ItemEvent)}\n              class=\"smwb-select-field__create-option\"\n            >\n              {createOption().text}\n            </MenuItem>\n          )}\n        </Show>\n      </Menu>\n    </Portal>\n  );\n}\n\nexport default DropdownMenu;\n"],"names":["DropdownMenu","props","valueArray","Array","isArray","value","hasGroups","items","some","i","group","itemHeight","viewportHeight","menuMaxHeight","useVirtual","virtualized","isLoading","length","virtual","createVirtualList","itemCount","menuMinWidth","setMenuMinWidth","createSignal","createEffect","anchor","anchorElement","isOpen","clientWidth","onKeyDown","event","key","onClose","document","addEventListener","onCleanup","removeEventListener","toRows","list","out","lastGroup","el","push","kind","item","renderItem","_$createComponent","MenuItem","disabled","selected","find","v","onClick","e","onItemClick","optionRenderer","children","_$memo","text","Show","when","helperText","_el$","_tmpl$","_$insert","renderRow","row","_el$2","_tmpl$2","menuStyle","Portal","mount","isServer","undefined","container","body","Menu","middleware","menuMiddleware","style","search","_el$3","_tmpl$3","TextField","type","placeholder","searchValue","onChange","onSearchInputChange","fullWidth","MenuDivider","_el$4","_tmpl$4","ProgressIndicator","variant","fallback","createOption","_el$9","_tmpl$6","menuNoItemsMessage","For","each","_el$5","_tmpl$5","_el$6","firstChild","_el$7","_el$8","_$addEventListener","onScroll","slice","startIndex","endIndex","_$effect","_p$","_v$","_v$2","totalHeight","_v$3","offsetY","_$setStyleProperty","t","a","onCreate"],"mappings":"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"}
+{"version":3,"file":"dropdownMenu.js","sources":["../../../../../src/components/inputs/selectField/dropdownMenu.tsx"],"sourcesContent":["import { type Accessor, type JSX, For, Show, createEffect, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport type { Middleware } from \"@floating-ui/dom\";\nimport cn from \"clsx\";\nimport { Menu, MenuDivider, type MenuItemProps } from \"../../navigation/menu\";\nimport { TextField } from \"../textField\";\nimport { ProgressIndicator } from \"../../feedBack/progressIndicator\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { createVirtualList } from \"../../../primitives/createVirtualList\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface DropdownItem {\n  key?: string | number;\n  text: string;\n  value: string | number | undefined | null;\n  helperText?: string;\n  disabled?: boolean;\n  /** Optional group label; consecutive items sharing it get a group header. */\n  group?: string;\n}\n\ntype SearchEvent = Event & { currentTarget: HTMLInputElement };\ntype ItemEvent = Event & { currentTarget: Element; target: Element };\n\nexport interface DropdownItemProps {\n  menuMaxHeight?: number | undefined;\n  menuMiddleware?: Middleware[] | undefined;\n  menuNoItemsMessage?: JSX.Element;\n  search?: boolean | undefined;\n  onSearchInputChange?: ((event: SearchEvent) => void) | undefined;\n  items: DropdownItem[];\n  searchValue?: string | number | undefined;\n  isOpen: boolean;\n  onClose: () => void;\n  anchorElement: Accessor<HTMLElement | null>;\n  value?: undefined | null | string | number | (undefined | null | string | number)[];\n  onItemClick: (event: ItemEvent, item: DropdownItem) => void;\n  isLoading?: boolean | undefined;\n  optionRenderer?: ((args: MenuItemProps) => JSX.Element) | undefined;\n  container?: HTMLElement | undefined;\n  createOption?: { text: JSX.Element; onCreate: (event: ItemEvent) => void } | undefined;\n  virtualized?: boolean | undefined;\n  itemHeight?: number | undefined;\n  /** Id of the listbox; the options' ids follow from it (`dropdownOptionId`). */\n  listboxId?: string | undefined;\n  /** Ids of the elements that name the listbox and the search box in the menu. */\n  labelledBy?: string | undefined;\n  /** Names the listbox and the search box in the menu when no element does. */\n  label?: string | undefined;\n  /** Several options can be selected (`aria-multiselectable`). */\n  multiple?: boolean | undefined;\n  /** Index of the active option, counting `items` and then the create option; -1 for none. */\n  activeIndex?: number | undefined;\n  /** Marks the active option and keeps it in view: the keyboard moved to it. */\n  showActive?: boolean | undefined;\n  /** Attributes and handlers of the search box in the menu, which the field makes a combobox. */\n  searchInputProps?: (JSX.AriaAttributes & Pick<JSX.InputHTMLAttributes<HTMLInputElement>, \"onKeyDown\">) | undefined;\n  searchInputRef?: ((element: HTMLInputElement) => void) | undefined;\n  /** The menu's root element. */\n  menuRef?: ((element: HTMLDivElement) => void) | undefined;\n}\n\n/** Id of the option at `index` in the listbox `listboxId`. */\nexport function dropdownOptionId(listboxId: string, index: number): string {\n  return `${listboxId}-option-${index}`;\n}\n\n// Scrolls each scrolling box from the element up to `root` so the element shows.\nfunction keepInView(element: HTMLElement, root: HTMLElement | undefined): void {\n  for (let box = element.parentElement; box; box = box.parentElement) {\n    if (box.scrollHeight > box.clientHeight) {\n      const outer = box.getBoundingClientRect();\n      const inner = element.getBoundingClientRect();\n      if (inner.top < outer.top) box.scrollTop -= outer.top - inner.top;\n      else if (inner.bottom > outer.bottom) box.scrollTop += inner.bottom - outer.bottom;\n    }\n    if (box === root) break;\n  }\n}\n\n// An option of the listbox. It takes no focus: the field keeps it and points at\n// the active option with aria-activedescendant.\nfunction DropdownOption(props: MenuItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"disabled\",\n    \"selected\",\n    \"value\",\n    \"onClick\",\n    \"optionRenderer\",\n    \"ref\",\n  ]);\n  let rippleActions: RippleActionsRef | undefined;\n\n  return (\n    <li\n      {...rest}\n      class={cn(\"smwb-menu__item\", local.class, {\n        \"smwb-menu__item--disabled\": local.disabled,\n        \"smwb-menu__item--selected\": local.selected,\n      })}\n      data-value={local.value as string | number | undefined}\n      onClick={(event) => callHandler(local.onClick, event)}\n      onPointerDown={(event) => {\n        if (!local.disabled) rippleActions?.onRipple(event);\n      }}\n    >\n      <span class=\"smwb-menu__item-inner\">{local.children}</span>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </li>\n  );\n}\n\ntype Row =\n  | { kind: \"group\"; group?: string | undefined; start: number; items: DropdownItem[] }\n  | { kind: \"item\"; item: DropdownItem; index: number };\n\nexport function DropdownMenu(props: DropdownItemProps): JSX.Element {\n  const valueArray = (): Array<string | number | undefined | null> =>\n    Array.isArray(props.value) ? props.value : [props.value];\n  const hasGroups = (): boolean => props.items.some((i) => !!i.group);\n  const itemHeight = (): number => props.itemHeight ?? 40;\n  const viewportHeight = (): number => props.menuMaxHeight || 240;\n  const useVirtual = (): boolean => !!props.virtualized && !hasGroups() && !props.isLoading && props.items.length > 0;\n  const optionCount = (): number => props.items.length + (props.createOption ? 1 : 0);\n  const activeIndex = (): number => props.activeIndex ?? -1;\n\n  const virtual = createVirtualList({\n    itemCount: () => (useVirtual() ? props.items.length : 0),\n    itemHeight,\n    viewportHeight,\n  });\n\n  let menuEl: HTMLDivElement | undefined;\n  let scrollerEl: HTMLDivElement | undefined;\n  const [menuMinWidth, setMenuMinWidth] = createSignal<number>();\n\n  createEffect(() => {\n    const anchor = props.anchorElement();\n    if (props.isOpen && anchor) setMenuMinWidth(anchor.clientWidth);\n  });\n\n  // An Escape the field did not take (the focus is elsewhere) still closes the menu.\n  createEffect(() => {\n    if (!props.isOpen) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\" && !event.defaultPrevented) props.onClose();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  // The keyboard's active option stays in view. In a virtual list it may not\n  // exist yet: scroll the window to it first.\n  createEffect(() => {\n    const index = activeIndex();\n    const listboxId = props.listboxId;\n    if (!props.isOpen || !props.showActive || index < 0 || !listboxId) return;\n    if (useVirtual() && scrollerEl && index < props.items.length) {\n      const top = index * itemHeight();\n      const height = scrollerEl.clientHeight || viewportHeight();\n      const scrollTop =\n        top < scrollerEl.scrollTop\n          ? top\n          : top + itemHeight() > scrollerEl.scrollTop + height\n            ? top + itemHeight() - height\n            : scrollerEl.scrollTop;\n      if (scrollTop !== scrollerEl.scrollTop) {\n        scrollerEl.scrollTop = scrollTop;\n        virtual.onScroll({ currentTarget: { scrollTop } });\n      }\n    }\n    const option = document.getElementById(dropdownOptionId(listboxId, index));\n    if (option) keepInView(option, menuEl);\n  });\n\n  // The props of the option at `index`, which an optionRenderer gets too: its\n  // element needs the id, role and ARIA state for the field to point at it.\n  // Getters: the selection, the active mark and a virtual row's place follow\n  // the field without the row being rebuilt.\n  const optionProps = (\n    index: Accessor<number>,\n    selected: Accessor<boolean>,\n    disabled: boolean | undefined,\n    own: MenuItemProps\n  ): MenuItemProps =>\n    ({\n      get id() {\n        return props.listboxId ? dropdownOptionId(props.listboxId, index()) : undefined;\n      },\n      role: \"option\",\n      get \"aria-selected\"() {\n        return selected();\n      },\n      \"aria-disabled\": disabled || undefined,\n      // With a virtual list only a window of the options exists.\n      get \"aria-setsize\"() {\n        return useVirtual() ? optionCount() : undefined;\n      },\n      get \"aria-posinset\"() {\n        return useVirtual() ? index() + 1 : undefined;\n      },\n      // The virtual list places its rows at itemHeight: a row takes that height.\n      get style() {\n        return useVirtual() && index() < props.items.length ? { height: `${itemHeight()}px` } : undefined;\n      },\n      disabled,\n      get selected() {\n        return selected();\n      },\n      get class() {\n        return cn(\n          \"smwb-select-field__option\",\n          own.class,\n          props.showActive && index() === activeIndex() && \"smwb-select-field__option--active\"\n        );\n      },\n      value: own.value,\n      onClick: own.onClick,\n      optionRenderer: own.optionRenderer,\n      children: own.children,\n    }) as MenuItemProps;\n\n  const renderItem = (el: DropdownItem, index: Accessor<number>): JSX.Element => {\n    const option = optionProps(index, () => valueArray().some((v) => v === el.value), el.disabled, {\n      value: el.value,\n      onClick: (e: MouseEvent) => {\n        if (!el.disabled) props.onItemClick(e as unknown as ItemEvent, el);\n      },\n      optionRenderer: props.optionRenderer,\n      children: (\n        <>\n          {el.text}\n          <Show when={el.helperText}>\n            <span class=\"smwb-select-field__option__helper-text\">{el.helperText}</span>\n          </Show>\n        </>\n      ),\n    } as MenuItemProps);\n    return (\n      <Show when={props.optionRenderer} fallback={<DropdownOption {...option} />}>\n        {(renderer) => renderer()(option)}\n      </Show>\n    );\n  };\n\n  // Consecutive items of one group sit in a `group` named by its header. Items\n  // without a group before the first one stay loose; after a group, they get an\n  // empty header, as they always did.\n  const toRows = (list: DropdownItem[]): Row[] => {\n    if (!hasGroups()) return list.map((item, index) => ({ kind: \"item\", item, index }));\n    const rows: Row[] = [];\n    let lastGroup: string | undefined;\n    let run: { kind: \"group\"; group?: string | undefined; start: number; items: DropdownItem[] } | undefined;\n    list.forEach((item, index) => {\n      if (!run || item.group !== lastGroup) {\n        lastGroup = item.group;\n        run = { kind: \"group\", group: item.group, start: index, items: [] };\n        rows.push(run);\n      }\n      run.items.push(item);\n    });\n    return rows;\n  };\n\n  const renderRow = (row: Row): JSX.Element => {\n    if (row.kind === \"item\") return renderItem(row.item, () => row.index);\n    if (row.group === undefined) {\n      return (\n        <>\n          <Show when={row.start > 0}>\n            <li class=\"smwb-select-field__group-label\" role=\"presentation\" />\n          </Show>\n          <For each={row.items}>{(item, i) => renderItem(item, () => row.start + i())}</For>\n        </>\n      );\n    }\n    const labelId = `${props.listboxId}-group-${row.start}`;\n    return (\n      <li role=\"group\" aria-labelledby={labelId} class=\"smwb-select-field__group\">\n        <div id={labelId} class=\"smwb-select-field__group-label\">\n          {row.group}\n        </div>\n        <ul role=\"presentation\" class=\"smwb-select-field__group-options\">\n          <For each={row.items}>{(item, i) => renderItem(item, () => row.start + i())}</For>\n        </ul>\n      </li>\n    );\n  };\n\n  const menuStyle = (): JSX.CSSProperties => ({\n    ...(menuMinWidth() ? { \"min-width\": `${menuMinWidth()}px` } : {}),\n    ...(props.menuMaxHeight ? { \"max-height\": `${props.menuMaxHeight}px`, \"overflow-y\": \"auto\" } : {}),\n  });\n\n  return (\n    <Portal mount={(isServer ? undefined : (props.container ?? document.body)) as Node}>\n      <Menu\n        ref={(el) => {\n          menuEl = el;\n          props.menuRef?.(el);\n        }}\n        isOpen={props.isOpen}\n        onClose={() => props.onClose()}\n        anchorElement={props.anchorElement()}\n        middleware={props.menuMiddleware}\n        style={menuStyle()}\n        data-smwb-overlay-layer\n        // The menu is a surface: the options are a listbox of their own inside,\n        // with the search box and the messages beside it.\n        listRole=\"presentation\"\n        // A menu that scrolls, with nothing in it that takes the focus, would be a\n        // tab stop of its own (browsers make such scrollers one): Tab from the field\n        // would land in the closing menu and drop to the page.\n        tabIndex={-1}\n        // The field keeps the focus while the menu is used with the pointer; only\n        // the search box in the menu takes it.\n        onMouseDown={(event) => {\n          if (!(event.target instanceof HTMLInputElement)) event.preventDefault();\n        }}\n      >\n        <Show when={props.search}>\n          <li class=\"smwb-select-field__menu-search\">\n            <TextField\n              {...props.searchInputProps}\n              ref={(el) => props.searchInputRef?.(el)}\n              class=\"smwb-select-field__menu-search-input\"\n              type=\"text\"\n              placeholder=\"Найти...\"\n              autocomplete=\"off\"\n              value={props.searchValue}\n              onChange={(e) => props.onSearchInputChange?.(e as SearchEvent)}\n              fullWidth\n            />\n          </li>\n          <MenuDivider />\n        </Show>\n\n        <Show when={props.isLoading}>\n          <li class=\"smwb-select-field__menu-loading\">\n            <ProgressIndicator type=\"indeterminate\" variant=\"circular\" class=\"smwb-select-field__menu__loader\" />\n          </li>\n        </Show>\n\n        <li>\n          <ul\n            id={props.listboxId}\n            role=\"listbox\"\n            class=\"smwb-select-field__listbox\"\n            aria-labelledby={props.labelledBy}\n            aria-label={props.label}\n            aria-multiselectable={props.multiple || undefined}\n            aria-busy={props.isLoading || undefined}\n          >\n            <Show when={!props.isLoading}>\n              <Show when={useVirtual()} fallback={<For each={toRows(props.items)}>{(row) => renderRow(row)}</For>}>\n                <li role=\"presentation\" class=\"smwb-select-field__virtual-viewport\">\n                  <div\n                    ref={(el) => (scrollerEl = el)}\n                    class=\"smwb-select-field__virtual-scroller\"\n                    tabIndex={-1}\n                    style={{ \"max-height\": `${viewportHeight()}px`, \"overflow-y\": \"auto\" }}\n                    onScroll={virtual.onScroll}\n                  >\n                    <div style={{ height: `${virtual.totalHeight()}px`, position: \"relative\" }}>\n                      <ul\n                        role=\"presentation\"\n                        class=\"smwb-select-field__virtual-list\"\n                        style={{\n                          transform: `translateY(${virtual.offsetY()}px)`,\n                          \"list-style\": \"none\",\n                          margin: \"0\",\n                          padding: \"0\",\n                        }}\n                      >\n                        <For each={props.items.slice(virtual.startIndex(), virtual.endIndex())}>\n                          {(el, i) => renderItem(el, () => virtual.startIndex() + i())}\n                        </For>\n                      </ul>\n                    </div>\n                  </div>\n                </li>\n              </Show>\n            </Show>\n\n            <Show when={props.createOption}>\n              {(createOption) => (\n                <DropdownOption\n                  {...optionProps(\n                    () => props.items.length,\n                    () => false,\n                    false,\n                    {\n                      value: \"__create__\",\n                      class: \"smwb-select-field__create-option\",\n                      onClick: (e: MouseEvent) => createOption().onCreate(e as unknown as ItemEvent),\n                      get children() {\n                        return createOption().text;\n                      },\n                    } as MenuItemProps\n                  )}\n                />\n              )}\n            </Show>\n          </ul>\n        </li>\n\n        <Show when={!props.isLoading && props.items.length === 0 && !props.createOption}>\n          <li class=\"smwb-select-field__empty-items\">{props.menuNoItemsMessage || \"Опций не найдено.\"}</li>\n        </Show>\n      </Menu>\n    </Portal>\n  );\n}\n\nexport default DropdownMenu;\n"],"names":["dropdownOptionId","listboxId","index","keepInView","element","root","box","parentElement","scrollHeight","clientHeight","outer","getBoundingClientRect","inner","top","scrollTop","bottom","DropdownOption","props","local","rest","splitProps","rippleActions","_el$","_tmpl$","_el$2","firstChild","_$spread","_$mergeProps","cn","class","disabled","selected","value","event","callHandler","onClick","onRipple","_$insert","children","_$createComponent","Ripple","actionRef","actions","DropdownMenu","valueArray","Array","isArray","hasGroups","items","some","i","group","itemHeight","viewportHeight","menuMaxHeight","useVirtual","virtualized","isLoading","length","optionCount","createOption","activeIndex","virtual","createVirtualList","itemCount","menuEl","scrollerEl","menuMinWidth","setMenuMinWidth","createSignal","createEffect","anchor","anchorElement","isOpen","clientWidth","onKeyDown","key","defaultPrevented","onClose","document","addEventListener","onCleanup","removeEventListener","showActive","height","onScroll","currentTarget","option","getElementById","optionProps","own","id","undefined","role","style","optionRenderer","renderItem","el","v","e","onItemClick","_$memo","text","Show","when","helperText","_el$3","_tmpl$2","fallback","renderer","toRows","list","map","item","kind","rows","lastGroup","run","forEach","start","push","renderRow","row","_tmpl$3","For","each","labelId","_el$5","_tmpl$4","_el$6","_el$7","nextSibling","_$setAttribute","menuStyle","Portal","mount","isServer","container","body","Menu","ref","menuRef","middleware","menuMiddleware","listRole","tabIndex","onMouseDown","target","HTMLInputElement","preventDefault","search","_el$8","_tmpl$5","TextField","searchInputProps","searchInputRef","type","placeholder","autocomplete","searchValue","onChange","onSearchInputChange","fullWidth","MenuDivider","_el$9","_tmpl$6","ProgressIndicator","variant","_el$0","_tmpl$8","_el$1","_el$10","_tmpl$7","_el$11","_el$12","_el$13","_$addEventListener","_$use","slice","startIndex","endIndex","_$effect","_p$","_v$","_v$2","totalHeight","_v$3","offsetY","_$setStyleProperty","t","a","onCreate","_v$4","_v$5","labelledBy","_v$6","label","_v$7","multiple","_v$8","o","_el$14","_tmpl$9","menuNoItemsMessage"],"mappings":"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"}

package/dist/headless/components/inputs/selectField/optionNavigation.js

@@ -0,0 +1,37 @@
+function l(r, e) {
+  for (let t = 0; t < r; t++)
+    if (e(t))
+      return t;
+  return -1;
+}
+function h(r, e) {
+  for (let t = r - 1; t >= 0; t--)
+    if (e(t))
+      return t;
+  return -1;
+}
+function s(r, e, t, i) {
+  if (t < 0)
+    return i > 0 ? l(r, e) : h(r, e);
+  const n = i > 0 ? 1 : -1;
+  let f = t, c = Math.abs(i);
+  for (let o = t + n; o >= 0 && o < r && c > 0; o += n)
+    e(o) && (f = o, c--);
+  return f;
+}
+function p(r, e, t, i) {
+  const n = t.toLowerCase(), f = Array.from(n).every((a) => a === n.charAt(0)), c = f ? n.charAt(0) : n, o = f ? i + 1 : Math.max(i, 0);
+  for (let a = 0; a < r.length; a++) {
+    const u = (o + a) % r.length;
+    if (e(u) && r[u]?.toLowerCase().startsWith(c))
+      return u;
+  }
+  return -1;
+}
+export {
+  l as firstOption,
+  h as lastOption,
+  p as matchOption,
+  s as moveOption
+};
+//# sourceMappingURL=optionNavigation.js.map

package/dist/headless/components/inputs/selectField/optionNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"optionNavigation.js","sources":["../../../../../src/components/inputs/selectField/optionNavigation.ts"],"sourcesContent":["// Moves of the active option over a select's options, by index in the order\n// they are drawn. A disabled option is passed over, as in a native select.\n\nexport type IsOptionEnabled = (index: number) => boolean;\n\n/** The first enabled option, or -1. */\nexport function firstOption(count: number, isEnabled: IsOptionEnabled): number {\n  for (let index = 0; index < count; index++) {\n    if (isEnabled(index)) {\n      return index;\n    }\n  }\n  return -1;\n}\n\n/** The last enabled option, or -1. */\nexport function lastOption(count: number, isEnabled: IsOptionEnabled): number {\n  for (let index = count - 1; index >= 0; index--) {\n    if (isEnabled(index)) {\n      return index;\n    }\n  }\n  return -1;\n}\n\n/**\n * The enabled option `steps` options after `from` (before it for a negative\n * count), stopping at the first or the last one. With no active option, a move\n * down starts at the first option and a move up at the last.\n */\nexport function moveOption(count: number, isEnabled: IsOptionEnabled, from: number, steps: number): number {\n  if (from < 0) {\n    return steps > 0 ? firstOption(count, isEnabled) : lastOption(count, isEnabled);\n  }\n  const direction = steps > 0 ? 1 : -1;\n  let result = from;\n  let left = Math.abs(steps);\n  for (let index = from + direction; index >= 0 && index < count && left > 0; index += direction) {\n    if (isEnabled(index)) {\n      result = index;\n      left--;\n    }\n  }\n  return result;\n}\n\n/**\n * Type-ahead: the next enabled option whose text starts with what was typed.\n * One character typed again and again (\"ttt\") steps through the options that\n * start with it; a longer string keeps the current option while it matches.\n */\nexport function matchOption(texts: string[], isEnabled: IsOptionEnabled, typed: string, from: number): number {\n  const query = typed.toLowerCase();\n  const repeated = Array.from(query).every((char) => char === query.charAt(0));\n  const prefix = repeated ? query.charAt(0) : query;\n  const start = repeated ? from + 1 : Math.max(from, 0);\n  for (let step = 0; step < texts.length; step++) {\n    const index = (start + step) % texts.length;\n    if (isEnabled(index) && texts[index]?.toLowerCase().startsWith(prefix)) {\n      return index;\n    }\n  }\n  return -1;\n}\n"],"names":["firstOption","count","isEnabled","index","lastOption","moveOption","from","steps","direction","result","left","matchOption","texts","typed","query","repeated","char","prefix","start","step"],"mappings":"AAMO,SAASA,EAAYC,GAAeC,GAAoC;AAC7E,WAASC,IAAQ,GAAGA,IAAQF,GAAOE;AACjC,QAAID,EAAUC,CAAK;AACjB,aAAOA;AAGX,SAAO;AACT;AAGO,SAASC,EAAWH,GAAeC,GAAoC;AAC5E,WAASC,IAAQF,IAAQ,GAAGE,KAAS,GAAGA;AACtC,QAAID,EAAUC,CAAK;AACjB,aAAOA;AAGX,SAAO;AACT;AAOO,SAASE,EAAWJ,GAAeC,GAA4BI,GAAcC,GAAuB;AACzG,MAAID,IAAO;AACT,WAAOC,IAAQ,IAAIP,EAAYC,GAAOC,CAAS,IAAIE,EAAWH,GAAOC,CAAS;AAEhF,QAAMM,IAAYD,IAAQ,IAAI,IAAI;AAClC,MAAIE,IAASH,GACTI,IAAO,KAAK,IAAIH,CAAK;AACzB,WAASJ,IAAQG,IAAOE,GAAWL,KAAS,KAAKA,IAAQF,KAASS,IAAO,GAAGP,KAASK;AACnF,IAAIN,EAAUC,CAAK,MACjBM,IAASN,GACTO;AAGJ,SAAOD;AACT;AAOO,SAASE,EAAYC,GAAiBV,GAA4BW,GAAeP,GAAsB;AAC5G,QAAMQ,IAAQD,EAAM,YAAA,GACdE,IAAW,MAAM,KAAKD,CAAK,EAAE,MAAM,CAACE,MAASA,MAASF,EAAM,OAAO,CAAC,CAAC,GACrEG,IAASF,IAAWD,EAAM,OAAO,CAAC,IAAIA,GACtCI,IAAQH,IAAWT,IAAO,IAAI,KAAK,IAAIA,GAAM,CAAC;AACpD,WAASa,IAAO,GAAGA,IAAOP,EAAM,QAAQO,KAAQ;AAC9C,UAAMhB,KAASe,IAAQC,KAAQP,EAAM;AACrC,QAAIV,EAAUC,CAAK,KAAKS,EAAMT,CAAK,GAAG,YAAA,EAAc,WAAWc,CAAM;AACnE,aAAOd;AAAA,EAEX;AACA,SAAO;AACT;"}