@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.30

package/dist/components/combobox/Combobox.js

@@ -1,352 +1,582 @@
-import { jsxs as P, jsx as i } from "react/jsx-runtime";
-import { forwardRef as Te, useId as Ue, useRef as K, useCallback as m, useState as I, useMemo as Q, useEffect as ie } from "react";
-import __je from "@mattermost/compass-icons/components/chevron-down.js";const je=__je&&__je.default?__je.default:__je;
-import ze from "../chip/Chip.js";
-import Ke from "../icon/Icon.js";
-import Qe from "../menu-item/MenuItem.js";
-import Xe, { PopoverMenuScroll as qe } from "../popover-menu/PopoverMenu.js";
-import Ge from "../user-avatar/UserAvatar.js";
-import { useAnchoredPopupPortal as We } from "../../hooks/use-anchored-popup-portal.js";
-import { useOutsideClose as Ye } from "../../hooks/use-outside-close.js";
-import { usePopoverTransition as Ze } from "../../hooks/use-popover-transition.js";
-import { toKebab as Je } from "../../utils/string.js";
-import o from "./Combobox.module.scss.js";
-const ue = 280, er = {
+import { jsxs as M, jsx as o } from "react/jsx-runtime";
+import { forwardRef as Sr, useId as Fr, useRef as O, useCallback as d, useState as I, useMemo as E, useEffect as me } from "react";
+import __Lr from "@mattermost/compass-icons/components/chevron-down.js";const Lr=__Lr&&__Lr.default?__Lr.default:__Lr;
+import __Tr from "@mattermost/compass-icons/components/close-circle.js";const Tr=__Tr&&__Tr.default?__Tr.default:__Tr;
+import __Cr from "@mattermost/compass-icons/components/plus.js";const Cr=__Cr&&__Cr.default?__Cr.default:__Cr;
+import $r from "../chip/Chip.js";
+import zr from "../chip/ChipGroup.js";
+import be, { IconSlotContext as Hr } from "../icon/Icon.js";
+import { mergeFieldDescribedBy as Or, hasFieldMessage as jr, isFieldInvalid as Ur } from "../field/fieldDescribedBy.js";
+import qr from "../field-message/FieldMessage.js";
+import $e from "../menu-item/MenuItem.js";
+import Gr, { PopoverMenuScroll as Kr } from "../popover-menu/PopoverMenu.js";
+import Qr from "../spinner/Spinner.js";
+import Xr from "../team-avatar/TeamAvatar.js";
+import Zr from "../user-avatar/UserAvatar.js";
+import { useAnchoredPopupPortal as Wr } from "../../hooks/use-anchored-popup-portal.js";
+import { useOutsideClose as Yr } from "../../hooks/use-outside-close.js";
+import { usePopoverTransition as Jr } from "../../hooks/use-popover-transition.js";
+import { mergeMenuItemProps as Pr } from "../../utils/menuItemProps.js";
+import { mergeClassNames as Br } from "../../utils/props.js";
+import { toKebab as en } from "../../utils/string.js";
+import l from "./Combobox.module.scss.js";
+const ze = 280, rn = {
   small: "small",
   medium: "medium",
   large: "large"
+}, nn = {
+  small: "12",
+  medium: "16",
+  large: "16"
 };
-function rr(l, u) {
-  return u ? l.label.toLowerCase().includes(u.toLowerCase()) : !0;
+function tn(n) {
+  return typeof n == "string" ? `${n} selections` : "Selected";
 }
-function nr(l) {
-  return l == null ? null : Array.isArray(l) ? l[0] ?? null : l === "" ? null : l;
+function an(n) {
+  return `Create "${n}"`;
 }
-function tr(l) {
-  return l == null ? [] : Array.isArray(l) ? l : l === "" ? [] : [l];
+function Y(n) {
+  return n.kind === "option" && n.option.disabled === !0;
 }
-function or(l) {
-  if (l.leadingVisual != null) return l.leadingVisual;
-  if (l.leadingAvatar != null)
-    return /* @__PURE__ */ i(
-      Ge,
+function on(n, v) {
+  return v ? n.label.toLowerCase().includes(v.toLowerCase()) : !0;
+}
+function ln(n) {
+  return n == null ? null : Array.isArray(n) ? n[0] ?? null : n === "" ? null : n;
+}
+function sn(n) {
+  return n == null ? [] : Array.isArray(n) ? n : n === "" ? [] : [n];
+}
+function cn(n) {
+  if (n.leadingVisual != null) return n.leadingVisual;
+  if (n.leadingAvatar != null)
+    return /* @__PURE__ */ o(
+      Zr,
       {
-        src: l.leadingAvatar.src,
-        alt: l.leadingAvatar.alt,
+        src: n.leadingAvatar.src,
+        alt: n.leadingAvatar.alt,
         size: "24"
       }
     );
+  if (n.leadingTeamAvatar != null)
+    return /* @__PURE__ */ o(
+      Xr,
+      {
+        src: n.leadingTeamAvatar.src,
+        initials: n.leadingTeamAvatar.initials ?? (n.leadingTeamAvatar.src ? void 0 : Array.from(n.label).slice(0, 2).join("")),
+        alt: n.leadingTeamAvatar.alt,
+        size: "24",
+        variant: "menu"
+      }
+    );
 }
-const pr = Te(function({
-  options: u,
+const Sn = Sr(function({
+  options: v,
+  menuItemProps: He,
   multiple: t = !1,
-  value: X,
-  defaultValue: q,
-  onChange: N,
-  inputValue: B,
-  defaultInputValue: de = "",
-  onInputChange: v,
-  label: A,
-  placeholder: fe,
-  leadingIcon: R,
-  size: G = "medium",
-  invalid: W = !1,
-  disabled: p = !1,
-  filter: V = !0,
-  emptyMessage: be = "No results",
-  className: me = "",
-  id: ve,
-  "aria-label": Y,
-  portalContainer: xe = null,
-  zIndex: he
-}, D) {
-  const pe = Ue(), $ = ve ?? pe, g = `${$}-listbox`, F = K(null), Z = K(null), _ = K(null), ge = m(
+  value: ve,
+  defaultValue: he,
+  onChange: j,
+  inputValue: J,
+  defaultInputValue: Oe = "",
+  onInputChange: u,
+  label: D,
+  placeholder: je,
+  leadingIcon: P,
+  size: B = "medium",
+  invalid: Ue = !1,
+  message: ee,
+  messageTone: xe,
+  disabled: _ = !1,
+  filter: U = !0,
+  emptyMessage: qe = "No results",
+  loading: ge = !1,
+  loadingMessage: Ge = "Loading…",
+  selectedOptions: A,
+  creatable: V = !1,
+  onCreateOption: re,
+  formatCreateLabel: Ke = an,
+  clearable: Qe = !1,
+  openOnFocus: Xe = !1,
+  submitOnEnter: Ze = !0,
+  clearLabel: We = "Clear",
+  clearButtonProps: m,
+  selectionsLabel: Ye,
+  listboxLabel: Je = "Options",
+  className: Pe = "",
+  id: Be,
+  "aria-label": _e,
+  "aria-describedby": er,
+  required: rr = !1,
+  onFocus: ne,
+  onBlur: te,
+  onKeyDown: ae,
+  portalContainer: nr = null,
+  zIndex: tr,
+  ...ar
+}, R) {
+  const or = Fr(), q = Be ?? or, S = `${q}-listbox`, oe = O(null), ye = O(null), w = O(null), lr = d(
+    (e) => {
+      w.current = e, typeof R == "function" ? R(e) : R && (R.current = e);
+    },
+    [R]
+  ), le = ve !== void 0, [ir, sr] = I(() => he !== void 0 ? he : t ? [] : null), ie = le ? ve : ir, h = t ? null : ln(ie), i = E(
+    () => t ? sn(ie) : [],
+    [t, ie]
+  ), b = J !== void 0, [se, F] = I(Oe), [c, pe] = I(!1), [cr, ke] = I(!1), [x, y] = I(-1), G = O(!1), L = O(null), Ae = d(
     (e) => {
-      _.current = e, typeof D == "function" ? D(e) : D && (D.current = e);
+      e !== x && (G.current = !0, y(e));
     },
-    [D]
-  ), H = X !== void 0, [_e, ye] = I(() => q !== void 0 ? q : t ? [] : null), J = H ? X : _e, d = t ? null : nr(J), c = t ? tr(J) : [], f = B !== void 0, [S, C] = I(de), [a, ee] = I(!1), [Ie, re] = I(!1), [b, x] = I(-1), [O, L] = I(null), M = Q(
-    () => d == null ? void 0 : u.find((e) => e.value === d),
-    [u, d]
-  ), T = f ? B : t ? S : O !== null ? O : (M == null ? void 0 : M.label) ?? S, ne = f ? B : t ? S : O !== null ? O : "", U = m(
+    [x]
+  ), [K, T] = I(null), Q = d(
+    (e) => v.find((r) => r.value === e) ?? (A == null ? void 0 : A.find((r) => r.value === e)) ?? (V ? { value: e, label: e } : void 0),
+    [v, A, V]
+  ), X = E(
+    () => h == null ? void 0 : Q(h),
+    [Q, h]
+  ), ce = b ? J : t ? se : K !== null ? K : (X == null ? void 0 : X.label) ?? se, ue = b ? J : t ? se : K !== null ? K : "", C = d(
     (e) => {
-      f || (C(e), t || L(e)), v == null || v(e);
+      b || (F(e), t || T(e)), u == null || u(e);
     },
-    [f, t, v]
-  ), w = m(
+    [b, t, u]
+  ), g = d(
     (e) => {
-      H || ye(e), N == null || N(e);
+      le || sr(e), j == null || j(e);
     },
-    [H, N]
-  ), s = Q(() => {
-    if (V === !1) return u;
-    const e = typeof V == "function" ? V : rr;
-    return u.filter((r) => e(r, ne));
-  }, [u, V, ne]), { mounted: te, visible: Ae } = Ze(a), {
-    placement: De,
-    maxHeight: we,
-    style: ke,
-    portalRef: oe,
-    renderPortal: Ne
-  } = We(Z, te, {
-    preferredHeight: ue,
-    maxHeightCap: ue,
-    portalContainer: xe,
-    zIndex: he
-  }), y = m(() => {
-    ee(!1), x(-1), !t && !f && (L(null), C(""));
-  }, [t, f]), k = m(() => {
-    p || ee(!0);
-  }, [p]);
-  Ye(F, a, y, oe), ie(() => {
-    a && x((e) => {
+    [le, j]
+  ), we = E(() => {
+    if (U === !1) return v;
+    const e = typeof U == "function" ? U : on;
+    return v.filter((r) => e(r, ue));
+  }, [v, U, ue]), $ = V ? ue.trim() : "", De = E(() => {
+    if ($ === "") return !1;
+    const e = $.toLowerCase(), r = (k) => k.toLowerCase() === e;
+    return [...v, ...A ?? []].some((k) => r(k.label) || r(k.value)) ? !1 : !(t ? i : h != null ? [h] : []).some(r);
+  }, [
+    $,
+    v,
+    A,
+    t,
+    i,
+    h
+  ]), s = E(
+    () => [
+      ...we.map((e) => ({ kind: "option", option: e })),
+      ...De ? [{ kind: "create", inputValue: $ }] : []
+    ],
+    [we, De, $]
+  ), N = d(
+    (e) => e.kind === "option" ? `${S}-option-${e.option.value}` : `${S}-create`,
+    [S]
+  ), { mounted: Ne, visible: ur } = Jr(c), {
+    placement: fr,
+    maxHeight: dr,
+    style: mr,
+    portalRef: Me,
+    renderPortal: br
+  } = Wr(ye, Ne, {
+    preferredHeight: ze,
+    maxHeightCap: ze,
+    portalContainer: nr,
+    zIndex: tr
+  }), p = d(() => {
+    pe(!1), y(-1), !t && !b && (T(null), F(""));
+  }, [t, b]), z = d(() => {
+    _ || pe(!0);
+  }, [_]);
+  Yr(oe, c, p, Me), me(() => {
+    c && y((e) => {
       if (s.length === 0) return -1;
       if (e >= 0 && e < s.length) return e;
-      const r = t ? s.findIndex((n) => c.includes(n.value)) : s.findIndex((n) => n.value === d);
+      const r = s.findIndex(
+        (a) => a.kind === "option" && (t ? i.includes(a.option.value) : a.option.value === h)
+      );
       return r >= 0 ? r : 0;
     });
-  }, [a, s, t, c, d]);
-  const Ve = m(
-    (e) => t ? c.includes(e) : d === e,
-    [t, c, d]
-  ), le = m(
+  }, [c, s, t, i, h]);
+  const vr = d(
+    (e) => t ? i.includes(e) : h === e,
+    [t, i, h]
+  ), fe = d(
     (e) => {
       var r;
       if (!e.disabled) {
         if (t) {
-          const n = c.includes(e.value) ? c.filter((h) => h !== e.value) : [...c, e.value];
-          w(n), U(""), y(), (r = _.current) == null || r.focus();
+          const a = i.includes(e.value) ? i.filter((f) => f !== e.value) : [...i, e.value];
+          g(a), C(""), p(), (r = w.current) == null || r.focus();
           return;
         }
-        w(e.value), f ? v == null || v(e.label) : (C(""), L(null)), y();
+        g(e.value), b ? u == null || u(e.label) : (F(""), T(null)), p();
       }
     },
     [
       t,
-      c,
-      w,
-      U,
-      f,
-      v,
-      y
+      i,
+      g,
+      C,
+      b,
+      u,
+      p
     ]
-  ), se = m(
+  ), de = d(
     (e) => {
       var r;
-      t && (w(c.filter((n) => n !== e)), (r = _.current) == null || r.focus());
+      if (re ? re(e) : g(t ? [...i, e] : e), t) {
+        C(""), p(), (r = w.current) == null || r.focus();
+        return;
+      }
+      b ? u == null || u(e) : (F(""), T(null)), p();
     },
-    [t, c, w]
-  ), ae = m(
+    [
+      re,
+      t,
+      i,
+      g,
+      C,
+      b,
+      u,
+      p
+    ]
+  ), hr = d(
     (e) => {
-      const r = s.map((n, h) => ({ o: n, i: h })).filter(({ o: n }) => !n.disabled);
+      e.kind === "create" ? de(e.inputValue) : fe(e.option);
+    },
+    [de, fe]
+  ), Ie = d(() => {
+    var e;
+    g(null), b ? u == null || u("") : (F(""), T(null)), (e = w.current) == null || e.focus();
+  }, [g, b, u]), Ee = d(
+    (e) => {
+      t && g(i.filter((r) => r !== e));
+    },
+    [t, i, g]
+  ), Ve = d(
+    (e) => {
+      G.current = !1;
+      const r = s.map((a, f) => ({ row: a, i: f })).filter(({ row: a }) => !Y(a));
       if (r.length === 0) {
-        x(-1);
+        y(-1);
         return;
       }
-      x((n) => {
-        const h = r.findIndex(({ i: z }) => z === n), E = h < 0 ? e > 0 ? 0 : r.length - 1 : (h + e + r.length) % r.length;
-        return r[E].i;
+      y((a) => {
+        const f = r.findIndex(({ i: W }) => W === a), k = f < 0 ? e > 0 ? 0 : r.length - 1 : (f + e + r.length) % r.length;
+        return r[k].i;
       });
     },
     [s]
   );
-  ie(() => {
-    if (!a || b < 0) return;
-    const e = s[b];
-    if (!e) return;
-    const r = document.getElementById(
-      `${g}-option-${e.value}`
-    );
-    r == null || r.scrollIntoView({ block: "nearest" });
-  }, [a, b, s, g]);
-  const Oe = (e) => {
+  me(() => {
+    var r, a;
+    if (!c || x < 0) return;
+    if (G.current) {
+      G.current = !1;
+      return;
+    }
+    const e = s[x];
+    e && ((a = (r = document.getElementById(N(e))) == null ? void 0 : r.scrollIntoView) == null || a.call(r, { block: "nearest" }));
+  }, [c, x, s, N]);
+  const xr = (e) => {
+    H();
     const r = e.target.value;
-    U(r), a || k(), x(0);
-  }, Me = () => {
-    re(!0), k(), !t && !f && M && requestAnimationFrame(() => {
+    C(r), c || z(), y(0);
+  }, H = () => {
+    L.current !== null && (cancelAnimationFrame(L.current), L.current = null);
+  };
+  me(() => H, []);
+  const gr = () => {
+    ke(!0), Xe && z(), !t && !b && X && (H(), L.current = requestAnimationFrame(() => {
       var e;
-      (e = _.current) == null || e.select();
-    });
-  }, Ee = (e) => {
-    var n;
+      L.current = null, (e = w.current) == null || e.select();
+    }));
+  }, Re = (e) => {
+    var a;
     const r = e.relatedTarget;
-    r && ((n = F.current) != null && n.contains(r)) || re(!1);
-  }, Pe = (e) => {
-    var r;
-    if (!p)
-      switch (e.key) {
+    r && ((a = oe.current) != null && a.contains(r)) || (H(), ke(!1));
+  }, _r = (e) => {
+    if (!_)
+      switch (H(), e.key) {
         case "ArrowDown":
-          e.preventDefault(), a ? ae(1) : k();
+          e.preventDefault(), c ? Ve(1) : z();
           break;
         case "ArrowUp":
-          e.preventDefault(), a ? ae(-1) : k();
+          if (e.preventDefault(), c)
+            Ve(-1);
+          else {
+            for (let r = s.length - 1; r >= 0; r--)
+              if (!Y(s[r])) {
+                y(r);
+                break;
+              }
+            z();
+          }
           break;
         case "Home":
-          a && s.length > 0 && (e.preventDefault(), x(
-            s.findIndex((n) => !n.disabled) >= 0 ? s.findIndex((n) => !n.disabled) : 0
+          c && s.length > 0 && (e.preventDefault(), y(
+            Math.max(
+              0,
+              s.findIndex((r) => !Y(r))
+            )
           ));
           break;
         case "End":
-          if (a && s.length > 0) {
+          if (c && s.length > 0) {
             e.preventDefault();
-            for (let n = s.length - 1; n >= 0; n--)
-              if (!((r = s[n]) != null && r.disabled)) {
-                x(n);
+            for (let r = s.length - 1; r >= 0; r--)
+              if (!Y(s[r])) {
+                y(r);
                 break;
               }
           }
           break;
         case "Enter":
-          a && b >= 0 && s[b] && (e.preventDefault(), le(s[b]));
+          if (e.nativeEvent.isComposing || e.keyCode === 229) break;
+          (c || !Ze) && (e.preventDefault(), e.stopPropagation()), c && x >= 0 && s[x] && hr(s[x]);
           break;
         case "Escape":
-          a && (e.preventDefault(), y());
+          c && (e.preventDefault(), e.stopPropagation(), p());
           break;
         case "Backspace":
-          t && T === "" && c.length > 0 && (e.preventDefault(), se(c[c.length - 1]));
+          t && ce === "" && i.length > 0 && (e.preventDefault(), Ee(i[i.length - 1]));
           break;
         case "Tab":
-          y();
+          p();
           break;
       }
-  }, Be = (e) => {
+  }, yr = (e) => {
+    gr(), ne == null || ne(e);
+  }, pr = (e) => {
+    Re(e), te == null || te(e);
+  }, kr = (e) => {
+    _r(e), ae == null || ae(e);
+  }, Ar = (e) => {
     var r;
-    p || e.target.closest("button") || (e.target !== _.current && (e.preventDefault(), (r = _.current) == null || r.focus()), a || k());
-  }, Re = t ? c.length > 0 : d != null && d !== "", $e = T.length > 0, Fe = Ie || a || Re || $e, ce = b >= 0 ? s[b] : void 0, He = ce != null ? `${g}-option-${ce.value}` : void 0, j = Q(
-    () => u.filter((e) => c.includes(e.value)),
-    [u, c]
-  ), Se = o[`combobox--size-${Je(G)}`], Ce = t && j.length > 0, Le = [
-    o.combobox,
-    Se,
-    W ? o["combobox--invalid"] : "",
-    A != null && Fe ? o["combobox--label-floated"] : "",
-    R != null ? o["combobox--has-leading-icon"] : "",
-    Ce ? o["combobox--has-chips"] : "",
-    a ? o["combobox--open"] : "",
-    p ? o["combobox--disabled"] : "",
-    me
+    _ || e.target.closest("[data-chip], [data-combobox-clear]") || (e.target !== w.current && (e.preventDefault(), (r = w.current) == null || r.focus()), c || z());
+  }, wr = (e) => {
+    e.target.closest(
+      'input, textarea, select, [contenteditable="true"]'
+    ) || e.preventDefault();
+  }, Se = t ? i.length > 0 : h != null && h !== "", Dr = ce.length > 0, Nr = Qe && !t && Se && !_, Mr = cr || c || Se || Dr, Fe = x >= 0 ? s[x] : void 0, Ir = Fe != null ? N(Fe) : void 0, Z = E(() => {
+    if (!t) return [];
+    if (A == null) {
+      const e = v.filter((a) => i.includes(a.value));
+      if (!V) return e;
+      const r = new Set(e.map((a) => a.value));
+      return [
+        ...e,
+        ...i.filter((a) => !r.has(a)).map((a) => ({ value: a, label: a }))
+      ];
+    }
+    return i.map(Q).filter((e) => e != null);
+  }, [
+    t,
+    A,
+    v,
+    i,
+    V,
+    Q
+  ]), Er = l[`combobox--size-${en(B)}`], Vr = t && Z.length > 0, Le = Ur(Ue, ee, xe), Te = jr(ee), Ce = Te ? `${q}-message` : void 0, Rr = [
+    l.combobox,
+    Er,
+    Le ? l["combobox--invalid"] : "",
+    D != null && Mr ? l["combobox--label-floated"] : "",
+    P != null ? l["combobox--has-leading-icon"] : "",
+    Vr ? l["combobox--has-chips"] : "",
+    c ? l["combobox--open"] : "",
+    _ ? l["combobox--disabled"] : "",
+    Pe
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ P("div", { className: Le, ref: F, children: [
-    /* @__PURE__ */ P(
-      "div",
-      {
-        className: o.combobox__wrapper,
-        ref: Z,
-        children: [
-          A != null && /* @__PURE__ */ i("label", { className: o.combobox__label, htmlFor: $, children: A }),
-          /* @__PURE__ */ P(
-            "div",
-            {
-              className: o.combobox__inner,
-              onMouseDown: Be,
-              children: [
-                R != null && /* @__PURE__ */ i("span", { className: o.combobox__leadingIcon, "aria-hidden": !0, children: R }),
-                /* @__PURE__ */ P("div", { className: o.combobox__value, children: [
-                  t && j.map((e) => /* @__PURE__ */ i(
-                    ze,
+  return /* @__PURE__ */ M("div", { className: Rr, ref: oe, children: [
+    /* @__PURE__ */ M("div", { className: l.combobox__wrapper, ref: ye, children: [
+      D != null && /* @__PURE__ */ o("label", { className: l.combobox__label, htmlFor: q, children: D }),
+      /* @__PURE__ */ M(
+        "div",
+        {
+          className: l.combobox__inner,
+          onMouseDown: Ar,
+          children: [
+            P != null && /* @__PURE__ */ o("span", { className: l["combobox__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ o(Hr.Provider, { value: { size: "16" }, children: P }) }),
+            /* @__PURE__ */ M("div", { className: l.combobox__value, children: [
+              t && Z.length > 0 && /* @__PURE__ */ o(
+                zr,
+                {
+                  "aria-label": Ye ?? tn(D),
+                  disabled: _,
+                  children: Z.map((e) => /* @__PURE__ */ o(
+                    $r,
                     {
-                      size: er[G],
+                      size: rn[B],
                       leadingAvatar: e.leadingAvatar,
                       leadingIcon: e.leadingAvatar == null ? e.leadingVisual : void 0,
-                      onRemove: p ? void 0 : (r) => {
-                        r.stopPropagation(), se(e.value);
+                      onRemove: _ ? void 0 : (r) => {
+                        r.stopPropagation(), Ee(e.value);
                       },
-                      removeLabel: `Remove ${e.label}`,
                       children: e.label
                     },
                     e.value
-                  )),
-                  /* @__PURE__ */ i(
-                    "input",
-                    {
-                      ref: ge,
-                      id: $,
-                      className: o.combobox__control,
-                      type: "text",
-                      role: "combobox",
-                      autoComplete: "off",
-                      spellCheck: !1,
-                      disabled: p,
-                      placeholder: t && j.length > 0 ? void 0 : fe,
-                      value: T,
-                      "aria-label": Y,
-                      "aria-invalid": W ? !0 : void 0,
-                      "aria-expanded": a,
-                      "aria-controls": g,
-                      "aria-autocomplete": "list",
-                      "aria-activedescendant": He,
-                      onChange: Oe,
-                      onFocus: Me,
-                      onBlur: Ee,
-                      onKeyDown: Pe
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ i("span", { className: o.combobox__trailingIcon, "aria-hidden": !0, children: /* @__PURE__ */ i(Ke, { size: "12", glyph: /* @__PURE__ */ i(je, {}) }) })
-              ]
-            }
-          )
-        ]
+                  ))
+                }
+              ),
+              /* @__PURE__ */ o(
+                "input",
+                {
+                  ...ar,
+                  ref: lr,
+                  id: q,
+                  className: l.combobox__control,
+                  type: "text",
+                  role: "combobox",
+                  autoComplete: "off",
+                  spellCheck: !1,
+                  disabled: _,
+                  placeholder: t && Z.length > 0 ? void 0 : je,
+                  value: ce,
+                  "aria-label": _e,
+                  "aria-describedby": Or(
+                    er,
+                    Ce,
+                    void 0
+                  ),
+                  "aria-required": rr ? !0 : void 0,
+                  "aria-invalid": Le ? !0 : void 0,
+                  "aria-expanded": c,
+                  "aria-controls": S,
+                  "aria-autocomplete": "list",
+                  "aria-activedescendant": Ir,
+                  "aria-busy": ge || void 0,
+                  onChange: xr,
+                  onFocus: yr,
+                  onBlur: pr,
+                  onKeyDown: kr
+                }
+              )
+            ] }),
+            Nr && /* @__PURE__ */ o(
+              "button",
+              {
+                ...m,
+                type: "button",
+                className: Br(
+                  l.combobox__clear,
+                  m == null ? void 0 : m.className
+                ),
+                "aria-label": We,
+                "data-combobox-clear": "",
+                onClick: Ie,
+                onKeyDown: (e) => {
+                  var r;
+                  e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), Ie()), (r = m == null ? void 0 : m.onKeyDown) == null || r.call(m, e);
+                },
+                onBlur: (e) => {
+                  var r;
+                  (r = m == null ? void 0 : m.onBlur) == null || r.call(m, e), Re(e);
+                },
+                children: /* @__PURE__ */ o(be, { size: nn[B], glyph: /* @__PURE__ */ o(Tr, {}) })
+              }
+            ),
+            /* @__PURE__ */ o("span", { className: l["combobox__trailing-icon"], "aria-hidden": !0, children: /* @__PURE__ */ o(be, { size: "12", glyph: /* @__PURE__ */ o(Lr, {}) }) })
+          ]
+        }
+      )
+    ] }),
+    Te && /* @__PURE__ */ o(
+      qr,
+      {
+        id: Ce,
+        className: l.combobox__message,
+        message: ee,
+        tone: xe ?? "error"
       }
     ),
-    te && Ne(
-      /* @__PURE__ */ i(
+    Ne && br(
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- keeps focus on the input for presses anywhere in the menu
+      /* @__PURE__ */ o(
         "div",
         {
-          ref: oe,
+          ref: Me,
           className: [
-            o.combobox__popup,
-            De === "above" ? o["combobox__popup--above"] : "",
-            Ae ? o["combobox__popup--visible"] : ""
+            l.combobox__popup,
+            fr === "above" ? l["combobox__popup--above"] : "",
+            ur ? l["combobox__popup--visible"] : ""
           ].filter(Boolean).join(" "),
-          style: ke,
-          children: /* @__PURE__ */ i(Xe, { className: o.combobox__menu, children: /* @__PURE__ */ i(qe, { maxHeight: we, children: s.length === 0 ? /* @__PURE__ */ i("p", { className: o.combobox__empty, children: be }) : /* @__PURE__ */ i(
-            "ul",
-            {
-              id: g,
-              className: o.combobox__list,
-              role: "listbox",
-              "aria-multiselectable": t || void 0,
-              "aria-label": typeof A == "string" ? A : Y ?? "Options",
-              children: s.map((e, r) => {
-                const n = Ve(e.value), h = r === b, E = or(e);
-                return /* @__PURE__ */ i(
-                  "li",
-                  {
-                    className: o.combobox__option,
-                    role: "presentation",
-                    children: /* @__PURE__ */ i(
-                      Qe,
+          style: mr,
+          onMouseDown: wr,
+          children: /* @__PURE__ */ o(Gr, { className: l.combobox__menu, children: /* @__PURE__ */ M(Kr, { maxHeight: dr, children: [
+            s.length > 0 && /* @__PURE__ */ o(
+              "ul",
+              {
+                id: S,
+                className: l.combobox__list,
+                role: "listbox",
+                "aria-multiselectable": t || void 0,
+                "aria-label": typeof D == "string" ? D : _e ?? Je,
+                children: s.map((e, r) => {
+                  const a = r === x;
+                  if (e.kind === "create")
+                    return /* @__PURE__ */ o(
+                      "li",
                       {
-                        id: `${g}-option-${e.value}`,
-                        role: "option",
-                        label: e.label,
-                        secondaryLabel: e.secondaryLabel,
-                        leadingElement: E != null,
-                        leadingVisual: E,
-                        trailingElement: n,
-                        active: h,
-                        disabled: e.disabled,
-                        "aria-selected": n,
-                        onMouseDown: (z) => {
-                          z.preventDefault();
-                        },
-                        onMouseEnter: () => x(r),
-                        onClick: () => le(e)
-                      }
-                    )
-                  },
-                  e.value
-                );
-              })
-            }
-          ) }) })
+                        className: l.combobox__option,
+                        role: "presentation",
+                        children: /* @__PURE__ */ o(
+                          $e,
+                          {
+                            id: N(e),
+                            role: "option",
+                            label: Ke(e.inputValue),
+                            leadingVisual: /* @__PURE__ */ o(be, { glyph: /* @__PURE__ */ o(Cr, {}) }),
+                            active: a,
+                            "aria-selected": !1,
+                            onMouseEnter: () => Ae(r),
+                            onClick: () => de(e.inputValue)
+                          }
+                        )
+                      },
+                      N(e)
+                    );
+                  const { option: f } = e, k = vr(f.value), W = cn(f);
+                  return /* @__PURE__ */ o(
+                    "li",
+                    {
+                      className: l.combobox__option,
+                      role: "presentation",
+                      children: /* @__PURE__ */ o(
+                        $e,
+                        {
+                          ...Pr(
+                            He,
+                            f.menuItemProps
+                          ),
+                          id: N(e),
+                          role: "option",
+                          label: f.label,
+                          secondaryLabel: f.secondaryLabel,
+                          leadingElement: W != null,
+                          leadingVisual: W,
+                          trailingElement: k,
+                          active: a,
+                          disabled: f.disabled,
+                          "aria-selected": k,
+                          onMouseEnter: () => Ae(r),
+                          onClick: () => fe(f)
+                        }
+                      )
+                    },
+                    f.value
+                  );
+                })
+              }
+            ),
+            ge ? /* @__PURE__ */ M("div", { className: l.combobox__loading, role: "status", children: [
+              /* @__PURE__ */ o(Qr, { size: "16", "aria-hidden": !0 }),
+              /* @__PURE__ */ o("span", { children: Ge })
+            ] }) : s.length === 0 && /* @__PURE__ */ o("p", { className: l.combobox__empty, children: qe })
+          ] }) })
         }
       )
     )
   ] });
 });
 export {
-  pr as default
+  Sn as default
 };
 //# sourceMappingURL=Combobox.js.map