@mattermost/compass-ui 0.1.0-alpha.24 → 0.1.0-alpha.25

package/dist/components/combobox/Combobox.js

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