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

package/dist/components/combobox/Combobox.js

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