@mattermost/compass-ui 0.1.0-alpha.10 → 0.1.0-alpha.11

package/dist/components/combobox/Combobox.js

@@ -1,358 +1,463 @@
-import { jsxs as B, jsx as c } from "react/jsx-runtime";
-import { forwardRef as Te, useId as Ue, useRef as K, useCallback as m, useState as A, useMemo as G, useEffect as ie } from "react";
-import __je from "@mattermost/compass-icons/components/chevron-down.js";const je=__je&&__je.default?__je.default:__je;
-import Le from "../chip/Chip.js";
-import Ke from "../chip/ChipGroup.js";
-import Ge, { IconSlotContext as Qe } from "../icon/Icon.js";
-import Xe from "../menu-item/MenuItem.js";
-import qe, { PopoverMenuScroll as We } from "../popover-menu/PopoverMenu.js";
-import Ye from "../user-avatar/UserAvatar.js";
-import { useAnchoredPopupPortal as Ze } from "../../hooks/use-anchored-popup-portal.js";
-import { useOutsideClose as Je } from "../../hooks/use-outside-close.js";
-import { usePopoverTransition as er } from "../../hooks/use-popover-transition.js";
-import { toKebab as rr } from "../../utils/string.js";
-import o from "./Combobox.module.scss.js";
-const ue = 280, nr = {
+import { jsxs as N, jsx as a } from "react/jsx-runtime";
+import { forwardRef as lr, useId as sr, useRef as ne, useCallback as f, useState as M, useMemo as V, useEffect as ye } from "react";
+import __ar from "@mattermost/compass-icons/components/chevron-down.js";const ar=__ar&&__ar.default?__ar.default:__ar;
+import __ir from "@mattermost/compass-icons/components/plus.js";const ir=__ir&&__ir.default?__ir.default:__ir;
+import cr from "../chip/Chip.js";
+import ur from "../chip/ChipGroup.js";
+import ke, { IconSlotContext as fr } from "../icon/Icon.js";
+import De from "../menu-item/MenuItem.js";
+import dr, { PopoverMenuScroll as mr } from "../popover-menu/PopoverMenu.js";
+import br from "../spinner/Spinner.js";
+import vr from "../user-avatar/UserAvatar.js";
+import { useAnchoredPopupPortal as hr } from "../../hooks/use-anchored-popup-portal.js";
+import { useOutsideClose as pr } from "../../hooks/use-outside-close.js";
+import { usePopoverTransition as xr } from "../../hooks/use-popover-transition.js";
+import { toKebab as _r } from "../../utils/string.js";
+import l from "./Combobox.module.scss.js";
+const we = 280, gr = {
   small: "small",
   medium: "medium",
   large: "large"
 };
-function tr(l, u) {
-  return u ? l.label.toLowerCase().includes(u.toLowerCase()) : !0;
+function yr(t) {
+  return `Create "${t}"`;
 }
-function or(l) {
-  return l == null ? null : Array.isArray(l) ? l[0] ?? null : l === "" ? null : l;
+function oe(t) {
+  return t.kind === "option" && t.option.disabled === !0;
 }
-function lr(l) {
-  return l == null ? [] : Array.isArray(l) ? l : l === "" ? [] : [l];
+function kr(t, d) {
+  return d ? t.label.toLowerCase().includes(d.toLowerCase()) : !0;
 }
-function sr(l) {
-  if (l.leadingVisual != null) return l.leadingVisual;
-  if (l.leadingAvatar != null)
-    return /* @__PURE__ */ c(
-      Ye,
+function Dr(t) {
+  return t == null ? null : Array.isArray(t) ? t[0] ?? null : t === "" ? null : t;
+}
+function wr(t) {
+  return t == null ? [] : Array.isArray(t) ? t : t === "" ? [] : [t];
+}
+function Ar(t) {
+  if (t.leadingVisual != null) return t.leadingVisual;
+  if (t.leadingAvatar != null)
+    return /* @__PURE__ */ a(
+      vr,
       {
-        src: l.leadingAvatar.src,
-        alt: l.leadingAvatar.alt,
+        src: t.leadingAvatar.src,
+        alt: t.leadingAvatar.alt,
         size: "24"
       }
     );
 }
-const yr = Te(function({
-  options: u,
-  multiple: t = !1,
-  value: Q,
-  defaultValue: X,
-  onChange: N,
-  inputValue: S,
-  defaultInputValue: de = "",
-  onInputChange: v,
-  label: g,
-  placeholder: fe,
-  leadingIcon: $,
-  size: q = "medium",
-  invalid: W = !1,
-  disabled: h = !1,
-  filter: V = !0,
-  emptyMessage: be = "No results",
-  className: me = "",
-  id: ve,
-  "aria-label": Y,
-  portalContainer: he = null,
-  zIndex: pe
-}, D) {
-  const xe = Ue(), F = ve ?? xe, _ = `${F}-listbox`, R = K(null), Z = K(null), I = K(null), ge = m(
+const Tr = lr(function({
+  options: d,
+  multiple: n = !1,
+  value: te,
+  defaultValue: le,
+  onChange: F,
+  inputValue: j,
+  defaultInputValue: Ae = "",
+  onInputChange: m,
+  label: D,
+  placeholder: Ne,
+  leadingIcon: K,
+  size: se = "medium",
+  invalid: ae = !1,
+  disabled: g = !1,
+  filter: L = !0,
+  emptyMessage: Me = "No results",
+  loading: ie = !1,
+  loadingMessage: Ve = "Loading…",
+  selectedOptions: y,
+  creatable: I = !1,
+  onCreateOption: G,
+  formatCreateLabel: Ie = yr,
+  className: Pe = "",
+  id: Re,
+  "aria-label": ce,
+  portalContainer: Ee = null,
+  zIndex: Se
+}, P) {
+  const Be = sr(), Q = Re ?? Be, R = `${Q}-listbox`, X = ne(null), ue = ne(null), w = ne(null), Fe = f(
     (e) => {
-      I.current = e, typeof D == "function" ? D(e) : D && (D.current = e);
+      w.current = e, typeof P == "function" ? P(e) : P && (P.current = e);
     },
-    [D]
-  ), C = Q !== void 0, [_e, ye] = A(() => X !== void 0 ? X : t ? [] : null), J = C ? Q : _e, d = t ? null : or(J), i = t ? lr(J) : [], f = S !== void 0, [H, z] = A(de), [a, ee] = A(!1), [Ae, re] = A(!1), [b, p] = A(-1), [O, T] = A(null), M = G(
-    () => d == null ? void 0 : u.find((e) => e.value === d),
-    [u, d]
-  ), U = f ? S : t ? H : O !== null ? O : (M == null ? void 0 : M.label) ?? H, ne = f ? S : t ? H : O !== null ? O : "", j = m(
+    [P]
+  ), q = te !== void 0, [Le, He] = M(() => le !== void 0 ? le : n ? [] : null), W = q ? te : Le, b = n ? null : Dr(W), s = V(
+    () => n ? wr(W) : [],
+    [n, W]
+  ), v = j !== void 0, [Y, H] = M(Ae), [c, fe] = M(!1), [$e, de] = M(!1), [p, x] = M(-1), [$, z] = M(null), C = f(
+    (e) => d.find((r) => r.value === e) ?? (y == null ? void 0 : y.find((r) => r.value === e)) ?? (I ? { value: e, label: e } : void 0),
+    [d, y, I]
+  ), O = V(
+    () => b == null ? void 0 : C(b),
+    [C, b]
+  ), Z = v ? j : n ? Y : $ !== null ? $ : (O == null ? void 0 : O.label) ?? Y, J = v ? j : n ? Y : $ !== null ? $ : "", E = f(
     (e) => {
-      f || (z(e), t || T(e)), v == null || v(e);
+      v || (H(e), n || z(e)), m == null || m(e);
     },
-    [f, t, v]
-  ), w = m(
+    [v, n, m]
+  ), k = f(
     (e) => {
-      C || ye(e), N == null || N(e);
+      q || He(e), F == null || F(e);
     },
-    [C, N]
-  ), s = G(() => {
-    if (V === !1) return u;
-    const e = typeof V == "function" ? V : tr;
-    return u.filter((r) => e(r, ne));
-  }, [u, V, ne]), { mounted: te, visible: De } = er(a), {
-    placement: Ie,
-    maxHeight: we,
-    style: ke,
-    portalRef: oe,
-    renderPortal: Ne
-  } = Ze(Z, te, {
-    preferredHeight: ue,
-    maxHeightCap: ue,
-    portalContainer: he,
-    zIndex: pe
-  }), y = m(() => {
-    ee(!1), p(-1), !t && !f && (T(null), z(""));
-  }, [t, f]), k = m(() => {
-    h || ee(!0);
-  }, [h]);
-  Je(R, a, y, oe), ie(() => {
-    a && p((e) => {
-      if (s.length === 0) return -1;
-      if (e >= 0 && e < s.length) return e;
-      const r = t ? s.findIndex((n) => i.includes(n.value)) : s.findIndex((n) => n.value === d);
+    [q, F]
+  ), me = V(() => {
+    if (L === !1) return d;
+    const e = typeof L == "function" ? L : kr;
+    return d.filter((r) => e(r, J));
+  }, [d, L, J]), S = I ? J.trim() : "", be = V(() => {
+    if (S === "") return !1;
+    const e = S.toLowerCase(), r = (u) => u.toLowerCase() === e;
+    return [...d, ...y ?? []].some((u) => r(u.label) || r(u.value)) ? !1 : !(n ? s : b != null ? [b] : []).some(r);
+  }, [
+    S,
+    d,
+    y,
+    n,
+    s,
+    b
+  ]), i = V(
+    () => [
+      ...me.map((e) => ({ kind: "option", option: e })),
+      ...be ? [{ kind: "create", inputValue: S }] : []
+    ],
+    [me, be, S]
+  ), A = f(
+    (e) => e.kind === "option" ? `${R}-option-${e.option.value}` : `${R}-create`,
+    [R]
+  ), { mounted: ve, visible: ze } = xr(c), {
+    placement: Ce,
+    maxHeight: Oe,
+    style: Te,
+    portalRef: he,
+    renderPortal: Ue
+  } = hr(ue, ve, {
+    preferredHeight: we,
+    maxHeightCap: we,
+    portalContainer: Ee,
+    zIndex: Se
+  }), _ = f(() => {
+    fe(!1), x(-1), !n && !v && (z(null), H(""));
+  }, [n, v]), B = f(() => {
+    g || fe(!0);
+  }, [g]);
+  pr(X, c, _, he), ye(() => {
+    c && x((e) => {
+      if (i.length === 0) return -1;
+      if (e >= 0 && e < i.length) return e;
+      const r = i.findIndex(
+        (o) => o.kind === "option" && (n ? s.includes(o.option.value) : o.option.value === b)
+      );
       return r >= 0 ? r : 0;
     });
-  }, [a, s, t, i, d]);
-  const Ve = m(
-    (e) => t ? i.includes(e) : d === e,
-    [t, i, d]
-  ), le = m(
+  }, [c, i, n, s, b]);
+  const je = f(
+    (e) => n ? s.includes(e) : b === e,
+    [n, s, b]
+  ), ee = f(
     (e) => {
       var r;
       if (!e.disabled) {
-        if (t) {
-          const n = i.includes(e.value) ? i.filter((x) => x !== e.value) : [...i, e.value];
-          w(n), j(""), y(), (r = I.current) == null || r.focus();
+        if (n) {
+          const o = s.includes(e.value) ? s.filter((h) => h !== e.value) : [...s, e.value];
+          k(o), E(""), _(), (r = w.current) == null || r.focus();
           return;
         }
-        w(e.value), f ? v == null || v(e.label) : (z(""), T(null)), y();
+        k(e.value), v ? m == null || m(e.label) : (H(""), z(null)), _();
       }
     },
     [
-      t,
-      i,
-      w,
-      j,
-      f,
+      n,
+      s,
+      k,
+      E,
       v,
-      y
+      m,
+      _
     ]
-  ), se = m(
+  ), re = f(
     (e) => {
-      t && w(i.filter((r) => r !== e));
+      var r;
+      if (G ? G(e) : k(n ? [...s, e] : e), n) {
+        E(""), _(), (r = w.current) == null || r.focus();
+        return;
+      }
+      v ? m == null || m(e) : (H(""), z(null)), _();
     },
-    [t, i, w]
-  ), ae = m(
+    [
+      G,
+      n,
+      s,
+      k,
+      E,
+      v,
+      m,
+      _
+    ]
+  ), Ke = f(
+    (e) => {
+      e.kind === "create" ? re(e.inputValue) : ee(e.option);
+    },
+    [re, ee]
+  ), pe = f(
     (e) => {
-      const r = s.map((n, x) => ({ o: n, i: x })).filter(({ o: n }) => !n.disabled);
+      n && k(s.filter((r) => r !== e));
+    },
+    [n, s, k]
+  ), xe = f(
+    (e) => {
+      const r = i.map((o, h) => ({ row: o, i: h })).filter(({ row: o }) => !oe(o));
       if (r.length === 0) {
-        p(-1);
+        x(-1);
         return;
       }
-      p((n) => {
-        const x = r.findIndex(({ i: L }) => L === n), E = x < 0 ? e > 0 ? 0 : r.length - 1 : (x + e + r.length) % r.length;
-        return r[E].i;
+      x((o) => {
+        const h = r.findIndex(({ i: U }) => U === o), u = h < 0 ? e > 0 ? 0 : r.length - 1 : (h + e + r.length) % r.length;
+        return r[u].i;
       });
     },
-    [s]
+    [i]
   );
-  ie(() => {
-    if (!a || b < 0) return;
-    const e = s[b];
-    if (!e) return;
-    const r = document.getElementById(
-      `${_}-option-${e.value}`
-    );
-    r == null || r.scrollIntoView({ block: "nearest" });
-  }, [a, b, s, _]);
-  const Oe = (e) => {
+  ye(() => {
+    var r;
+    if (!c || p < 0) return;
+    const e = i[p];
+    e && ((r = document.getElementById(A(e))) == null || r.scrollIntoView({ block: "nearest" }));
+  }, [c, p, i, A]);
+  const Ge = (e) => {
     const r = e.target.value;
-    j(r), a || k(), p(0);
-  }, Me = () => {
-    re(!0), k(), !t && !f && M && requestAnimationFrame(() => {
+    E(r), c || B(), x(0);
+  }, Qe = () => {
+    de(!0), B(), !n && !v && O && requestAnimationFrame(() => {
       var e;
-      (e = I.current) == null || e.select();
+      (e = w.current) == null || e.select();
     });
-  }, Pe = (e) => {
-    var n;
+  }, Xe = (e) => {
+    var o;
     const r = e.relatedTarget;
-    r && ((n = R.current) != null && n.contains(r)) || re(!1);
-  }, Ee = (e) => {
-    var r;
-    if (!h)
+    r && ((o = X.current) != null && o.contains(r)) || de(!1);
+  }, qe = (e) => {
+    if (!g)
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault(), a ? ae(1) : k();
+          e.preventDefault(), c ? xe(1) : B();
           break;
         case "ArrowUp":
-          e.preventDefault(), a ? ae(-1) : k();
+          e.preventDefault(), c ? xe(-1) : B();
           break;
         case "Home":
-          a && s.length > 0 && (e.preventDefault(), p(
-            s.findIndex((n) => !n.disabled) >= 0 ? s.findIndex((n) => !n.disabled) : 0
+          c && i.length > 0 && (e.preventDefault(), x(
+            Math.max(
+              0,
+              i.findIndex((r) => !oe(r))
+            )
           ));
           break;
         case "End":
-          if (a && s.length > 0) {
+          if (c && i.length > 0) {
             e.preventDefault();
-            for (let n = s.length - 1; n >= 0; n--)
-              if (!((r = s[n]) != null && r.disabled)) {
-                p(n);
+            for (let r = i.length - 1; r >= 0; r--)
+              if (!oe(i[r])) {
+                x(r);
                 break;
               }
           }
           break;
         case "Enter":
-          a && b >= 0 && s[b] && (e.preventDefault(), le(s[b]));
+          c && p >= 0 && i[p] && (e.preventDefault(), Ke(i[p]));
           break;
         case "Escape":
-          a && (e.preventDefault(), y());
+          c && (e.preventDefault(), _());
           break;
         case "Backspace":
-          t && U === "" && i.length > 0 && (e.preventDefault(), se(i[i.length - 1]));
+          n && Z === "" && s.length > 0 && (e.preventDefault(), pe(s[s.length - 1]));
           break;
         case "Tab":
-          y();
+          _();
           break;
       }
-  }, Be = (e) => {
+  }, We = (e) => {
     var r;
-    h || e.target.closest("[data-chip]") || (e.target !== I.current && (e.preventDefault(), (r = I.current) == null || r.focus()), a || k());
-  }, Se = t ? i.length > 0 : d != null && d !== "", $e = U.length > 0, Fe = Ae || a || Se || $e, ce = b >= 0 ? s[b] : void 0, Re = ce != null ? `${_}-option-${ce.value}` : void 0, P = G(
-    () => u.filter((e) => i.includes(e.value)),
-    [u, i]
-  ), Ce = o[`combobox--size-${rr(q)}`], He = t && P.length > 0, ze = [
-    o.combobox,
-    Ce,
-    W ? o["combobox--invalid"] : "",
-    g != null && Fe ? o["combobox--label-floated"] : "",
-    $ != null ? o["combobox--has-leading-icon"] : "",
-    He ? o["combobox--has-chips"] : "",
-    a ? o["combobox--open"] : "",
-    h ? o["combobox--disabled"] : "",
-    me
+    g || e.target.closest("[data-chip]") || (e.target !== w.current && (e.preventDefault(), (r = w.current) == null || r.focus()), c || B());
+  }, Ye = n ? s.length > 0 : b != null && b !== "", Ze = Z.length > 0, Je = $e || c || Ye || Ze, _e = p >= 0 ? i[p] : void 0, er = _e != null ? A(_e) : void 0, T = V(() => {
+    if (!n) return [];
+    if (y == null) {
+      const e = d.filter((o) => s.includes(o.value));
+      if (!I) return e;
+      const r = new Set(e.map((o) => o.value));
+      return [
+        ...e,
+        ...s.filter((o) => !r.has(o)).map((o) => ({ value: o, label: o }))
+      ];
+    }
+    return s.map(C).filter((e) => e != null);
+  }, [
+    n,
+    y,
+    d,
+    s,
+    I,
+    C
+  ]), rr = l[`combobox--size-${_r(se)}`], nr = n && T.length > 0, or = [
+    l.combobox,
+    rr,
+    ae ? l["combobox--invalid"] : "",
+    D != null && Je ? l["combobox--label-floated"] : "",
+    K != null ? l["combobox--has-leading-icon"] : "",
+    nr ? l["combobox--has-chips"] : "",
+    c ? l["combobox--open"] : "",
+    g ? l["combobox--disabled"] : "",
+    Pe
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ B("div", { className: ze, ref: R, children: [
-    /* @__PURE__ */ B(
-      "div",
-      {
-        className: o.combobox__wrapper,
-        ref: Z,
-        children: [
-          g != null && /* @__PURE__ */ c("label", { className: o.combobox__label, htmlFor: F, children: g }),
-          /* @__PURE__ */ B(
-            "div",
-            {
-              className: o.combobox__inner,
-              onMouseDown: Be,
-              children: [
-                $ != null && /* @__PURE__ */ c("span", { className: o["combobox__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ c(Qe.Provider, { value: { size: "16" }, children: $ }) }),
-                /* @__PURE__ */ B("div", { className: o.combobox__value, children: [
-                  t && P.length > 0 && /* @__PURE__ */ c(
-                    Ke,
-                    {
-                      "aria-label": typeof g == "string" ? `${g} selections` : "Selected",
-                      disabled: h,
-                      children: P.map((e) => /* @__PURE__ */ c(
-                        Le,
-                        {
-                          size: nr[q],
-                          leadingAvatar: e.leadingAvatar,
-                          leadingIcon: e.leadingAvatar == null ? e.leadingVisual : void 0,
-                          onRemove: h ? void 0 : (r) => {
-                            r.stopPropagation(), se(e.value);
-                          },
-                          children: e.label
-                        },
-                        e.value
-                      ))
-                    }
-                  ),
-                  /* @__PURE__ */ c(
-                    "input",
+  return /* @__PURE__ */ N("div", { className: or, ref: X, children: [
+    /* @__PURE__ */ N("div", { className: l.combobox__wrapper, ref: ue, children: [
+      D != null && /* @__PURE__ */ a("label", { className: l.combobox__label, htmlFor: Q, children: D }),
+      /* @__PURE__ */ N(
+        "div",
+        {
+          className: l.combobox__inner,
+          onMouseDown: We,
+          children: [
+            K != null && /* @__PURE__ */ a("span", { className: l["combobox__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ a(fr.Provider, { value: { size: "16" }, children: K }) }),
+            /* @__PURE__ */ N("div", { className: l.combobox__value, children: [
+              n && T.length > 0 && /* @__PURE__ */ a(
+                ur,
+                {
+                  "aria-label": typeof D == "string" ? `${D} selections` : "Selected",
+                  disabled: g,
+                  children: T.map((e) => /* @__PURE__ */ a(
+                    cr,
                     {
-                      ref: ge,
-                      id: F,
-                      className: o.combobox__control,
-                      type: "text",
-                      role: "combobox",
-                      autoComplete: "off",
-                      spellCheck: !1,
-                      disabled: h,
-                      placeholder: t && P.length > 0 ? void 0 : fe,
-                      value: U,
-                      "aria-label": Y,
-                      "aria-invalid": W ? !0 : void 0,
-                      "aria-expanded": a,
-                      "aria-controls": _,
-                      "aria-autocomplete": "list",
-                      "aria-activedescendant": Re,
-                      onChange: Oe,
-                      onFocus: Me,
-                      onBlur: Pe,
-                      onKeyDown: Ee
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ c("span", { className: o["combobox__trailing-icon"], "aria-hidden": !0, children: /* @__PURE__ */ c(Ge, { size: "12", glyph: /* @__PURE__ */ c(je, {}) }) })
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    te && Ne(
-      /* @__PURE__ */ c(
+                      size: gr[se],
+                      leadingAvatar: e.leadingAvatar,
+                      leadingIcon: e.leadingAvatar == null ? e.leadingVisual : void 0,
+                      onRemove: g ? void 0 : (r) => {
+                        r.stopPropagation(), pe(e.value);
+                      },
+                      children: e.label
+                    },
+                    e.value
+                  ))
+                }
+              ),
+              /* @__PURE__ */ a(
+                "input",
+                {
+                  ref: Fe,
+                  id: Q,
+                  className: l.combobox__control,
+                  type: "text",
+                  role: "combobox",
+                  autoComplete: "off",
+                  spellCheck: !1,
+                  disabled: g,
+                  placeholder: n && T.length > 0 ? void 0 : Ne,
+                  value: Z,
+                  "aria-label": ce,
+                  "aria-invalid": ae ? !0 : void 0,
+                  "aria-expanded": c,
+                  "aria-controls": R,
+                  "aria-autocomplete": "list",
+                  "aria-activedescendant": er,
+                  "aria-busy": ie || void 0,
+                  onChange: Ge,
+                  onFocus: Qe,
+                  onBlur: Xe,
+                  onKeyDown: qe
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a("span", { className: l["combobox__trailing-icon"], "aria-hidden": !0, children: /* @__PURE__ */ a(ke, { size: "12", glyph: /* @__PURE__ */ a(ar, {}) }) })
+          ]
+        }
+      )
+    ] }),
+    ve && Ue(
+      /* @__PURE__ */ a(
         "div",
         {
-          ref: oe,
+          ref: he,
           className: [
-            o.combobox__popup,
-            Ie === "above" ? o["combobox__popup--above"] : "",
-            De ? o["combobox__popup--visible"] : ""
+            l.combobox__popup,
+            Ce === "above" ? l["combobox__popup--above"] : "",
+            ze ? l["combobox__popup--visible"] : ""
           ].filter(Boolean).join(" "),
-          style: ke,
-          children: /* @__PURE__ */ c(qe, { className: o.combobox__menu, children: /* @__PURE__ */ c(We, { maxHeight: we, children: s.length === 0 ? /* @__PURE__ */ c("p", { className: o.combobox__empty, children: be }) : /* @__PURE__ */ c(
-            "ul",
-            {
-              id: _,
-              className: o.combobox__list,
-              role: "listbox",
-              "aria-multiselectable": t || void 0,
-              "aria-label": typeof g == "string" ? g : Y ?? "Options",
-              children: s.map((e, r) => {
-                const n = Ve(e.value), x = r === b, E = sr(e);
-                return /* @__PURE__ */ c(
-                  "li",
-                  {
-                    className: o.combobox__option,
-                    role: "presentation",
-                    children: /* @__PURE__ */ c(
-                      Xe,
+          style: Te,
+          children: /* @__PURE__ */ a(dr, { className: l.combobox__menu, children: /* @__PURE__ */ N(mr, { maxHeight: Oe, children: [
+            i.length > 0 && /* @__PURE__ */ a(
+              "ul",
+              {
+                id: R,
+                className: l.combobox__list,
+                role: "listbox",
+                "aria-multiselectable": n || void 0,
+                "aria-label": typeof D == "string" ? D : ce ?? "Options",
+                children: i.map((e, r) => {
+                  const o = r === p, h = (tr) => {
+                    tr.preventDefault();
+                  };
+                  if (e.kind === "create")
+                    return /* @__PURE__ */ a(
+                      "li",
                       {
-                        id: `${_}-option-${e.value}`,
-                        role: "option",
-                        label: e.label,
-                        secondaryLabel: e.secondaryLabel,
-                        leadingElement: E != null,
-                        leadingVisual: E,
-                        trailingElement: n,
-                        active: x,
-                        disabled: e.disabled,
-                        "aria-selected": n,
-                        onMouseDown: (L) => {
-                          L.preventDefault();
-                        },
-                        onMouseEnter: () => p(r),
-                        onClick: () => le(e)
-                      }
-                    )
-                  },
-                  e.value
-                );
-              })
-            }
-          ) }) })
+                        className: l.combobox__option,
+                        role: "presentation",
+                        children: /* @__PURE__ */ a(
+                          De,
+                          {
+                            id: A(e),
+                            role: "option",
+                            label: Ie(e.inputValue),
+                            leadingVisual: /* @__PURE__ */ a(ke, { glyph: /* @__PURE__ */ a(ir, {}) }),
+                            active: o,
+                            "aria-selected": !1,
+                            onMouseDown: h,
+                            onMouseEnter: () => x(r),
+                            onClick: () => re(e.inputValue)
+                          }
+                        )
+                      },
+                      A(e)
+                    );
+                  const { option: u } = e, U = je(u.value), ge = Ar(u);
+                  return /* @__PURE__ */ a(
+                    "li",
+                    {
+                      className: l.combobox__option,
+                      role: "presentation",
+                      children: /* @__PURE__ */ a(
+                        De,
+                        {
+                          id: A(e),
+                          role: "option",
+                          label: u.label,
+                          secondaryLabel: u.secondaryLabel,
+                          leadingElement: ge != null,
+                          leadingVisual: ge,
+                          trailingElement: U,
+                          active: o,
+                          disabled: u.disabled,
+                          "aria-selected": U,
+                          onMouseDown: h,
+                          onMouseEnter: () => x(r),
+                          onClick: () => ee(u)
+                        }
+                      )
+                    },
+                    u.value
+                  );
+                })
+              }
+            ),
+            ie ? /* @__PURE__ */ N("div", { className: l.combobox__loading, role: "status", children: [
+              /* @__PURE__ */ a(br, { size: "16", "aria-hidden": !0 }),
+              /* @__PURE__ */ a("span", { children: Ve })
+            ] }) : i.length === 0 && /* @__PURE__ */ a("p", { className: l.combobox__empty, children: Me })
+          ] }) })
         }
       )
     )
   ] });
 });
 export {
-  yr as default
+  Tr as default
 };
 //# sourceMappingURL=Combobox.js.map