@smwb/ui-solid 0.12.1 → 0.13.0

package/dist/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/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;"}

package/dist/components/inputs/selectField/selectField.d.ts

@@ -13,6 +13,13 @@ type SelectValue = null | string | number | (string | number | undefined | null)
 export type OnSelectChange = (e: SelectEvent, data: SelectFieldProps) => void;
 export interface SelectFieldProps {
     class?: string;
+    /**
+     * The selected value, or the values of a `multiple` field. Any value but
+     * `undefined` makes the field controlled: it shows this value and nothing
+     * else, and a pick, a chip delete or a clear only asks for a change through
+     * `onChange`. `null` means nothing is selected. While `value` is `undefined`,
+     * the field keeps its own value, starting from `defaultValue`.
+     */
     value?: SelectValue | undefined;
     defaultValue?: null | string | number | (string | number)[];
     onChange?: OnSelectChange;
@@ -24,11 +31,21 @@ export interface SelectFieldProps {
     menuMiddleware?: DropdownItemProps["menuMiddleware"];
     menuNoItemsMessage?: JSX.Element;
     menuContainer?: HTMLElement;
+    /**
+     * A search box for the options: `true` puts it in the field, where it takes
+     * the focus and is the combobox; `"menu"` puts it at the top of the menu,
+     * which moves the focus into it when it opens.
+     */
     search?: true | false | "menu";
     chips?: boolean;
     isFocused?: boolean;
     error?: boolean;
     items: DropdownItem[];
+    /**
+     * Visible label, drawn above the field (an `inline` field draws none). It
+     * names the combobox, whose value is the selected text: "Country", "Russia".
+     * With `chips` the chips' texts follow it in the name: "Labels Backend Docs".
+     */
     label?: string;
     variant?: "outlined" | "filled";
     /** Height of the field, as for TextField: `small` (40px, for toolbars), `medium` (default) or `large`. */
@@ -41,13 +58,27 @@ export interface SelectFieldProps {
     inline?: boolean;
     endAdornment?: JSX.Element;
     hideSelectArrowIcon?: boolean;
+    /**
+     * Draws an option in place of the default one. It gets the option's props
+     * and returns its `<li>`: pass `id`, `role`, `aria-selected`, `aria-disabled`,
+     * `class` and `onClick` on to it, so the option can be reached from the
+     * keyboard, read out and picked.
+     */
     optionRenderer?: (args: MenuItemProps) => JSX.Element;
     clearable?: boolean;
     creatable?: boolean;
     onCreate?: (inputValue: string, event: SelectEvent) => void;
     virtualized?: boolean;
     itemHeight?: number;
-    "aria-label"?: string;
+    /**
+     * Accessible name of the combobox. Replaces the name the visible `label`
+     * gives it; a field without a drawn label needs it.
+     */
+    "aria-label"?: string | undefined;
+    /**
+     * Id of the control, the part of the field that holds the selected text. It is
+     * the combobox, unless `search` puts a search box in it: then the box is.
+     */
     id?: string;
     ref?: Ref<HTMLSpanElement>;
 }

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

@@ -1,92 +1,196 @@
-import { createComponent as i, addEventListener as Y, use as A, insert as m, effect as L, memo as k, setAttribute as v, className as Z, template as M, delegateEvents as ee } from "solid-js/web";
+import { createComponent as p, use as J, insert as g, setAttribute as s, effect as ce, memo as Q, className as je, template as Z, delegateEvents as Ne } from "solid-js/web";
 import '../../../assets/styles/less/components/selectField/selectField.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                 */
-import { splitProps as te, createSignal as $, createMemo as re, createEffect as V, Show as x, For as ne } from "solid-js";
-import y from "clsx";
-import { DropdownMenu as le } from "./dropdownMenu.js";
-import { mergeRefs as se } from "../../../primitives/mergeRefs.js";
-import { TextFieldWrapper as ae } from "../textField/textFieldWrapper.js";
-import { Chip as ie } from "../../dataDisplay/chip/chip.js";
-import { Icon as H } from "../../base/icon/icon.js";
-var R = /* @__PURE__ */ M("<span class=smwb-select-field__values>"), oe = /* @__PURE__ */ M("<span class=smwb-select-field__search><span class=smwb-select-field__search-text></span><input class=smwb-select-field__search-input type=text data-testid=search-input>"), ue = /* @__PURE__ */ M("<span role=button aria-haspopup=listbox data-testid=select-field><span class=smwb-select-field__search-wrapper></span><span class=smwb-select-field__actions>");
-function W(p) {
-  p.preventDefault(), p.stopPropagation();
+import { splitProps as Ue, createSignal as R, onCleanup as qe, createMemo as Oe, createEffect as V, Show as B, For as Ge } from "solid-js";
+import X from "clsx";
+import { DropdownMenu as Je, dropdownOptionId as Qe } from "./dropdownMenu.js";
+import { firstOption as Y, lastOption as Ee, moveOption as ue, matchOption as Xe } from "./optionNavigation.js";
+import { createHelperText as Ye } from "../../../primitives/createHelperText.js";
+import { mergeRefs as Ze } from "../../../primitives/mergeRefs.js";
+import { createId as et } from "../../../primitives/createId.js";
+import { TextFieldWrapper as tt } from "../textField/textFieldWrapper.js";
+import { Chip as rt } from "../../dataDisplay/chip/chip.js";
+import { Icon as $e } from "../../base/icon/icon.js";
+var Me = /* @__PURE__ */ Z("<span class=smwb-select-field__values>"), nt = /* @__PURE__ */ Z("<span class=smwb-select-field__search><span class=smwb-select-field__search-text></span><input class=smwb-select-field__search-input type=text role=combobox aria-haspopup=listbox aria-autocomplete=list autocomplete=off data-testid=search-input>"), lt = /* @__PURE__ */ Z('<button type=button class=smwb-select-field__clear aria-label="Clear selection">'), it = /* @__PURE__ */ Z("<span><span class=smwb-select-field__search-wrapper><span class=smwb-select-field__control data-testid=select-field></span></span><span class=smwb-select-field__actions>");
+function Te(d) {
+  d.preventDefault(), d.stopPropagation();
 }
-function _e(p) {
-  const [e] = te(p, ["class", "value", "defaultValue", "onChange", "disabled", "readOnly", "name", "multiple", "menuMaxHeight", "menuMiddleware", "menuNoItemsMessage", "menuContainer", "search", "chips", "isFocused", "error", "items", "label", "variant", "size", "fullWidth", "helperText", "onSearch", "resetSearch", "isLoading", "inline", "endAdornment", "hideSelectArrowIcon", "optionRenderer", "clearable", "creatable", "onCreate", "virtualized", "itemHeight", "aria-label", "id", "ref"]), I = () => e.variant ?? "outlined", [o, f] = $(!1), [T, N] = $(e.defaultValue), [h, b] = $(""), P = e.value != null;
-  let g, w, D;
-  const u = () => P ? e.value : T(), C = () => !!e.isFocused || o(), _ = re(() => {
-    const t = u();
-    if (Array.isArray(t)) return e.items.filter((l) => t.includes(l.value));
+function Le(d, e) {
+  if (!e) return d;
+  const W = new RegExp(e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "i");
+  return d.filter((I) => I.text.search(W) !== -1);
+}
+function ke(d) {
+  return d.key.length === 1 && d.key !== " " && !d.altKey && !d.ctrlKey && !d.metaKey;
+}
+function wt(d) {
+  const [e] = Ue(d, ["class", "value", "defaultValue", "onChange", "disabled", "readOnly", "name", "multiple", "menuMaxHeight", "menuMiddleware", "menuNoItemsMessage", "menuContainer", "search", "chips", "isFocused", "error", "items", "label", "variant", "size", "fullWidth", "helperText", "onSearch", "resetSearch", "isLoading", "inline", "endAdornment", "hideSelectArrowIcon", "optionRenderer", "clearable", "creatable", "onCreate", "virtualized", "itemHeight", "aria-label", "id", "ref"]), W = () => e.variant ?? "outlined", I = Ye(() => e.helperText, {
+    inline: () => e.inline
+  }), [c, S] = R(!1), [ze, He] = R(e.defaultValue), [x, j] = R(""), [de, A] = R(-1), [ee, O] = R(!1), _ = {
+    text: ""
+  };
+  qe(() => clearTimeout(_.timer));
+  const fe = () => e.value !== void 0;
+  let me, C, N, he, te, pe;
+  const b = () => fe() ? e.value : ze(), re = () => !!e.isFocused || c(), ne = et(), U = `${ne}-label`, E = `${ne}-value`, $ = `${ne}-listbox`, q = () => e.chips ? D().map((t, l) => `${E}-${l}`) : [E], le = () => {
+    if (e["aria-label"]) return;
+    const t = e.chips ? q() : [];
+    return e.label && !e.inline ? [U, ...t].join(" ") : t.length > 0 ? t.join(" ") : !e.chips && D().length > 0 ? E : void 0;
+  }, Ke = () => {
+    if (!e["aria-label"])
+      return e.label && !e.inline ? [U, ...q()].join(" ") : e.chips && q().length > 0 ? q().join(" ") : void 0;
+  }, D = Oe(() => {
+    const t = b();
+    if (Array.isArray(t)) return e.items.filter((r) => t.includes(r.value));
     if (t == null || t === "") return [];
-    const n = e.items.find((l) => l.value === t);
-    return n ? [n] : [];
-  }), S = (t, n) => {
+    const l = e.items.find((r) => r.value === t);
+    return l ? [l] : [];
+  }), m = () => e.search === !0 && !e.readOnly, w = Oe(() => e.onSearch ? e.items : Le(e.items, x())), G = () => {
+    const t = x();
+    if (e.creatable && t && !e.items.some((l) => l.text.toLowerCase() === t.toLowerCase()))
+      return {
+        text: `Создать "${t}"`,
+        onCreate: (l) => {
+          e.onCreate?.(t, l), j(""), y();
+        }
+      };
+  }, be = () => G() ? w().length : -1, ve = () => w().length + (G() ? 1 : 0), h = (t) => t >= 0 && (t === be() || !e.isLoading && t < w().length && !w()[t]?.disabled), v = () => c() && h(de()) ? de() : -1, ie = () => ee() && v() >= 0 ? Qe($, v()) : void 0, ge = (t) => {
+    const l = b();
+    return Array.isArray(l) ? l.includes(t.value) : l != null && l !== "" && l === t.value;
+  }, we = () => {
+    const t = w().findIndex(ge);
+    return h(t) ? t : Y(ve(), h);
+  }, ye = () => {
+    const t = w().findIndex(ge);
+    return h(t) ? t : -1;
+  }, M = (t, l) => {
+    A(t), O(l), S(!0);
+  }, y = () => {
+    te?.contains(te.ownerDocument.activeElement) && C?.focus(), S(!1), A(-1), O(!1);
+  }, ae = (t, l) => {
     e.onChange?.(t, {
-      ...p,
-      value: n,
+      ...d,
+      value: l,
       name: e.name || void 0
-    }), N(n);
-  }, j = (t) => {
-    t.button === 0 && (t.preventDefault(), g?.focus(), f(!o()));
-  }, B = () => {
-    f(!1), g?.focus();
-  }, K = () => {
-    e.search === !0 && D?.focus();
-  }, U = (t) => {
-    !e.readOnly && [" ", "ArrowUp", "ArrowDown", "Enter"].includes(t.key) && (t.preventDefault(), f(!o()));
+    }), fe() || He(l);
+  }, Fe = (t) => {
+    e.disabled || e.readOnly || t.button !== 0 || (t.preventDefault(), C?.focus(), c() ? y() : M(ye(), !1));
+  }, Pe = () => {
+    m() && he?.focus();
+  }, xe = (t, l, r) => {
+    let a;
+    if (e.multiple) {
+      const u = b();
+      a = (Array.isArray(u) ? u : [u].filter(Boolean)).slice();
+      const f = a.findIndex((o) => o === l.value);
+      f === -1 ? a.push(l.value) : a.splice(f, 1);
+    } else {
+      if (b() === l.value && !r) return;
+      a = b() === l.value ? "" : l.value;
+    }
+    x() && j(""), ae(t, a);
+  }, Re = (t, l) => {
+    xe(t, l, !0), e.multiple ? A(e.items.indexOf(l)) : (y(), C?.focus());
+  }, oe = (t) => {
+    if (!ee()) return;
+    const l = v();
+    if (l >= 0 && l === be())
+      G()?.onCreate(t);
+    else {
+      const r = w()[l];
+      if (!r) return;
+      const a = !!x();
+      xe(t, r, !1), e.multiple ? A(a ? e.items.indexOf(r) : l) : y();
+    }
+  }, T = (t, l) => {
+    t.preventDefault(), l >= 0 && A(l), O(!0);
+  }, Ie = (t) => {
+    clearTimeout(_.timer), _.text += t, _.timer = setTimeout(() => {
+      _.text = "";
+    }, 500);
+    const l = w().map((r) => r.text);
+    return Xe(l, h, _.text, v());
+  }, se = (t, l) => {
+    const {
+      key: r
+    } = t;
+    if (e.disabled || e.readOnly || t.ctrlKey || t.metaKey) return;
+    const a = l === "control", u = ve();
+    if (!c()) {
+      if (r === "ArrowDown" || r === "ArrowUp" || r === "Enter" || a && r === " ")
+        t.preventDefault(), M(we(), !0);
+      else if (a && (r === "Home" || r === "End"))
+        t.preventDefault(), M(r === "Home" ? Y(u, h) : Ee(u, h), !0);
+      else if (a && !e.search && ke(t)) {
+        t.preventDefault();
+        const n = Ie(r);
+        M(n >= 0 ? n : we(), !0);
+      }
+      return;
+    }
+    if (r === "ArrowDown")
+      T(t, t.altKey ? v() : ue(u, h, v(), 1));
+    else if (r === "ArrowUp" && t.altKey)
+      t.preventDefault(), e.multiple || oe(t), y();
+    else if (r === "ArrowUp")
+      T(t, ue(u, h, v(), -1));
+    else if (r === "PageDown" || r === "PageUp")
+      T(t, ue(u, h, v(), r === "PageDown" ? 10 : -10));
+    else if (a && (r === "Home" || r === "End"))
+      T(t, r === "Home" ? Y(u, h) : Ee(u, h));
+    else if (r === "Enter" || a && r === " ") {
+      t.preventDefault();
+      const n = v();
+      oe(t), O(!0), !e.multiple && n < 0 && a && y();
+    } else r === "Escape" ? (t.preventDefault(), y()) : r === "Tab" ? (l === "menuSearch" ? t.preventDefault() : a && !e.multiple && oe(t), y()) : a && !e.search && ke(t) && T(t, Ie(r));
+  }, Ve = (t) => {
+    t.target !== t.currentTarget || m() || se(t, "control");
   };
   V(() => {
-    (!C() || e.search === "menu" && !o()) && (b(""), e.resetSearch?.());
+    e.readOnly && c() && S(!1);
+  }), V(() => {
+    (!re() || e.search === "menu" && !c()) && (j(""), e.resetSearch?.());
+  }), V(() => {
+    e.disabled && c() && S(!1);
   }), V(() => {
-    u(), w && (w.scrollLeft = w.scrollWidth);
+    c() && e.search === "menu" && queueMicrotask(() => pe?.focus());
+  }), V(() => {
+    b(), N && (N.scrollLeft = N.scrollWidth);
   });
-  const q = (t, n) => {
-    let l;
-    if (e.multiple) {
-      const c = u();
-      l = (Array.isArray(c) ? c : [c].filter(Boolean)).slice();
-      const s = l.findIndex((a) => a === n.value);
-      s === -1 ? l.push(n.value) : l.splice(s, 1);
-    } else
-      l = u() === n.value ? "" : n.value;
-    h() && b(""), e.multiple || (f(!1), g?.focus()), S(t, l);
-  }, z = (t) => {
-    b(t.currentTarget.value), e.onSearch?.(t), o() || f(!0);
-  }, G = (t) => (n) => {
-    const l = u();
-    Array.isArray(l) && S(n, l.filter((c) => t !== c));
-  }, J = (t) => {
-    S(t, []);
-  }, Q = () => {
-    if (e.onSearch) return e.items;
-    const t = h();
-    return t ? e.items.filter((n) => n.text.search(new RegExp(t, "i")) !== -1) : e.items;
-  }, X = () => {
-    const t = h();
-    if (e.creatable && t && !e.items.some((n) => n.text.toLowerCase() === t.toLowerCase()))
-      return {
-        text: `Создать "${t}"`,
-        onCreate: (n) => {
-          e.onCreate?.(t, n), b(""), f(!1);
-        }
-      };
+  const Ae = (t) => {
+    const l = t.currentTarget.value;
+    j(l), e.onSearch?.(t);
+    const r = Le(e.items, l), a = e.creatable && l && !e.items.some((n) => n.text.toLowerCase() === l.toLowerCase()), u = e.onSearch ? 0 : r.length + (a ? 1 : 0);
+    A(Y(u, (n) => n >= r.length || !r[n]?.disabled)), O(!0), c() || S(!0);
+  }, _e = (t) => t.currentTarget.contains(t.currentTarget.ownerDocument.activeElement), Be = (t) => (l) => {
+    const r = b();
+    if (Array.isArray(r)) {
+      const a = _e(l);
+      ae(l, r.filter((u) => t !== u)), a && C?.focus();
+    }
+  }, We = (t) => {
+    const l = _e(t);
+    ae(t, []), l && C?.focus();
   };
-  return [i(ae, {
+  return [p(tt, {
+    labelId: U,
     get label() {
       return e.label;
     },
     get helperText() {
-      return e.helperText;
+      return I.text();
+    },
+    get helperTextId() {
+      return I.id;
     },
     get variant() {
-      return I();
+      return W();
     },
     get disabled() {
       return e.disabled;
     },
     get class() {
-      return y(e.class, e.size && e.size !== "medium" && `smwb-text-field_size-${e.size}`);
+      return X(e.class, e.size && e.size !== "medium" && `smwb-text-field_size-${e.size}`);
     },
     get error() {
       return e.error;
@@ -95,110 +199,139 @@ function _e(p) {
       return e.fullWidth;
     },
     get isFilledState() {
-      return !!_().length || !!h();
+      return !!D().length || !!x();
     },
     get isFocused() {
-      return C();
+      return re();
     },
     get inline() {
       return e.inline;
     },
     get children() {
-      var t = ue(), n = t.firstChild, l = n.nextSibling;
-      t.$$keydown = U, t.addEventListener("focus", K), Y(t, "mousedown", e.disabled || e.readOnly ? void 0 : j, !0);
-      var c = se(e.ref, (r) => g = r);
-      return typeof c == "function" && A(c, t), A((r) => w = r, n), m(n, i(x, {
+      var t = it(), l = t.firstChild, r = l.firstChild, a = l.nextSibling;
+      t.$$mousedown = Fe, J((n) => me = n, t), J((n) => N = n, l), g(l, p(B, {
         get when() {
           return e.chips;
         },
-        get fallback() {
-          return (() => {
-            var r = R();
-            return m(r, () => _().map((s) => s.text).join(", ")), r;
-          })();
-        },
         get children() {
-          var r = R();
-          return m(r, i(ne, {
+          var n = Me();
+          return g(n, p(Ge, {
             get each() {
-              return _();
+              return D();
             },
-            children: (s) => i(ie, {
+            children: (f, o) => p(rt, {
               get label() {
-                return s.text;
+                return f.text;
+              },
+              get labelId() {
+                return `${E}-${o()}`;
+              },
+              get deleteAriaLabel() {
+                return `Remove ${f.text}`;
               },
               get size() {
                 return e.size === "small" ? "small" : "medium";
               },
               get onDelete() {
-                return G(s.value);
+                return e.readOnly ? void 0 : Be(f.value);
               },
-              onDeleteMouseDown: W
+              onDeleteMouseDown: Te,
+              get disabled() {
+                return !!e.disabled;
+              }
             })
-          })), r;
+          })), n;
         }
-      }), null), m(n, i(x, {
+      }), r), r.$$keydown = Ve, r.addEventListener("focus", Pe);
+      var u = Ze(e.ref, (n) => C = n);
+      return typeof u == "function" && J(u, r), g(r, p(B, {
         get when() {
-          return k(() => !!(e.search && typeof e.search == "boolean"))() && !e.readOnly;
+          return !e.chips;
         },
         get children() {
-          var r = oe(), s = r.firstChild, a = s.nextSibling;
-          return m(s, h), a.$$keydown = (d) => d.stopPropagation(), a.$$mousedown = (d) => {
-            d.stopPropagation(), f(!0);
-          }, a.$$input = z, A((d) => D = d, a), L(() => a.value = h()), r;
+          var n = Me();
+          return s(n, "id", E), g(n, () => D().map((f) => f.text).join(", ")), n;
         }
-      }), null), m(l, i(x, {
+      }), null), g(r, p(B, {
         get when() {
-          return k(() => !!(Array.isArray(u()) && u().length > 0 || e.clearable && _().length > 0))() && !e.disabled;
+          return Q(() => !!(e.search && typeof e.search == "boolean"))() && !e.readOnly;
         },
         get children() {
-          return i(H, {
+          var n = nt(), f = n.firstChild, o = f.nextSibling;
+          return g(f, x), o.$$keydown = (i) => {
+            se(i, "search"), i.key !== "Escape" && i.stopPropagation();
+          }, o.$$mousedown = (i) => {
+            i.stopPropagation(), c() || M(ye(), !1);
+          }, o.$$input = Ae, J((i) => he = i, o), ce((i) => {
+            var L = e.disabled, k = c(), z = c() ? $ : void 0, H = ie(), K = e["aria-label"], F = Ke(), P = I.describedBy();
+            return L !== i.e && (o.disabled = i.e = L), k !== i.t && s(o, "aria-expanded", i.t = k), z !== i.a && s(o, "aria-controls", i.a = z), H !== i.o && s(o, "aria-activedescendant", i.o = H), K !== i.i && s(o, "aria-label", i.i = K), F !== i.n && s(o, "aria-labelledby", i.n = F), P !== i.s && s(o, "aria-describedby", i.s = P), i;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0,
+            s: void 0
+          }), ce(() => o.value = x()), n;
+        }
+      }), null), g(a, p(B, {
+        get when() {
+          return Q(() => !!((Array.isArray(b()) && b().length > 0 || e.clearable && D().length > 0) && !e.disabled))() && !e.readOnly;
+        },
+        get children() {
+          var n = lt();
+          return n.$$mousedown = Te, n.$$click = We, g(n, p($e, {
             name: "close",
             size: 20,
-            onClick: J,
-            onMouseDown: W,
             get class() {
-              return y("smwb-select-field__icon", "smwb-select-field__icon--close");
-            },
-            "aria-label": "Clear selection",
-            role: "button"
-          });
+              return X("smwb-select-field__icon", "smwb-select-field__icon--close");
+            }
+          })), n;
         }
-      }), null), m(l, () => e.endAdornment, null), m(l, i(x, {
+      }), null), g(a, () => e.endAdornment, null), g(a, p(B, {
         get when() {
           return !e.hideSelectArrowIcon;
         },
         get children() {
-          return i(H, {
+          return p($e, {
             name: "arrow_drop_down",
             get class() {
-              return y("smwb-select-field__icon", "smwb-select-field__icon--arrow", {
-                "smwb-select-field__icon--opened": o(),
-                "smwb-select-field__icon--focused": C(),
+              return X("smwb-select-field__icon", "smwb-select-field__icon--arrow", {
+                "smwb-select-field__icon--opened": c(),
+                "smwb-select-field__icon--focused": re(),
                 "smwb-select-field__icon--error": e.error
               });
             }
           });
         }
-      }), null), L((r) => {
-        var s = e.id, a = y("smwb-select-field", e.class, {
-          "smwb-select-field--filled": I() === "filled" && e.label,
+      }), null), ce((n) => {
+        var f = X("smwb-select-field", e.class, {
+          "smwb-select-field--filled": W() === "filled" && e.label,
           "smwb-select-field--disabled": e.disabled,
           "smwb-select-field--search": e.search,
           "smwb-select-field--inline": e.inline
-        }), d = e.disabled ? void 0 : 0, E = o(), F = e.disabled || void 0, O = e["aria-label"];
-        return s !== r.e && v(t, "id", r.e = s), a !== r.t && Z(t, r.t = a), d !== r.a && v(t, "tabindex", r.a = d), E !== r.o && v(t, "aria-expanded", r.o = E), F !== r.i && v(t, "aria-disabled", r.i = F), O !== r.n && v(t, "aria-label", r.n = O), r;
+        }), o = e.id, i = e.disabled ? void 0 : m() ? -1 : 0, L = m() ? void 0 : "combobox", k = m() ? void 0 : le(), z = m() ? void 0 : "listbox", H = m() ? void 0 : c(), K = m() || !c() ? void 0 : $, F = m() || e.search === "menu" ? void 0 : ie(), P = m() ? void 0 : e.disabled || void 0, Ce = m() ? void 0 : e.readOnly || void 0, De = m() ? void 0 : I.describedBy(), Se = m() ? void 0 : e["aria-label"];
+        return f !== n.e && je(t, n.e = f), o !== n.t && s(r, "id", n.t = o), i !== n.a && s(r, "tabindex", n.a = i), L !== n.o && s(r, "role", n.o = L), k !== n.i && s(r, "aria-labelledby", n.i = k), z !== n.n && s(r, "aria-haspopup", n.n = z), H !== n.s && s(r, "aria-expanded", n.s = H), K !== n.h && s(r, "aria-controls", n.h = K), F !== n.r && s(r, "aria-activedescendant", n.r = F), P !== n.d && s(r, "aria-disabled", n.d = P), Ce !== n.l && s(r, "aria-readonly", n.l = Ce), De !== n.u && s(r, "aria-describedby", n.u = De), Se !== n.c && s(r, "aria-label", n.c = Se), n;
       }, {
         e: void 0,
         t: void 0,
         a: void 0,
         o: void 0,
         i: void 0,
-        n: void 0
+        n: void 0,
+        s: void 0,
+        h: void 0,
+        r: void 0,
+        d: void 0,
+        l: void 0,
+        u: void 0,
+        c: void 0
       }), t;
     }
-  }), i(le, {
-    anchorElement: () => g ?? null,
+  }), p(Je, {
+    anchorElement: () => me ?? null,
+    menuRef: (t) => te = t,
     get menuMaxHeight() {
       return e.menuMaxHeight;
     },
@@ -208,23 +341,45 @@ function _e(p) {
     get search() {
       return e.search === "menu";
     },
-    onSearchInputChange: z,
+    onSearchInputChange: Ae,
+    searchInputRef: (t) => pe = t,
+    searchInputProps: {
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      get "aria-expanded"() {
+        return c();
+      },
+      get "aria-controls"() {
+        return c() ? $ : void 0;
+      },
+      "aria-autocomplete": "list",
+      get "aria-activedescendant"() {
+        return ie();
+      },
+      get "aria-labelledby"() {
+        return le();
+      },
+      get "aria-label"() {
+        return e["aria-label"];
+      },
+      onKeyDown: (t) => se(t, "menuSearch")
+    },
     get optionRenderer() {
       return e.optionRenderer;
     },
     get items() {
-      return Q();
+      return w();
     },
     get searchValue() {
-      return h();
+      return x();
     },
     get isOpen() {
-      return o();
+      return c();
     },
-    onClose: B,
-    onItemClick: q,
+    onClose: y,
+    onItemClick: Re,
     get value() {
-      return u();
+      return b();
     },
     get isLoading() {
       return e.isLoading;
@@ -242,12 +397,28 @@ function _e(p) {
       return e.itemHeight;
     },
     get createOption() {
-      return X();
+      return G();
+    },
+    listboxId: $,
+    get labelledBy() {
+      return Q(() => !!e["aria-label"])() ? void 0 : Q(() => !!(e.label && !e.inline))() ? U : le();
+    },
+    get label() {
+      return e["aria-label"];
+    },
+    get multiple() {
+      return e.multiple;
+    },
+    get activeIndex() {
+      return v();
+    },
+    get showActive() {
+      return ee();
     }
   })];
 }
-ee(["mousedown", "keydown", "input"]);
+Ne(["mousedown", "keydown", "input", "click"]);
 export {
-  _e as SelectField
+  wt as SelectField
 };
 //# sourceMappingURL=selectField.js.map