@adyen/adyen-platform-experience-web 1.9.0 → 1.10.0

package/dist/es/components/internal/FormFields/Select/Select.js

@@ -1,148 +1,158 @@
-import { jsx as x } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import Re from "classnames";
-import { useState as W, useRef as i, useMemo as $, useCallback as u, useEffect as A } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { jsx as W } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import Te from "classnames";
+import { useState as N, useRef as d, useMemo as J, useCallback as i, useEffect as D } from "../../../../external/preact/hooks/dist/hooks.module.js";
 import { InteractionKeyCode as o } from "../../../types.js";
-import { ARIA_ERROR_SUFFIX as Se } from "../../../../core/Errors/constants.js";
-import { useUniqueId as U } from "../../../../hooks/useUniqueId.js";
-import Ie from "./components/SelectButton.js";
-import De from "./components/SelectList.js";
-import he from "./hooks/useSelect.js";
-import { DROPDOWN_BASE_CLASS as K, DROPDOWN_MULTI_SELECT_CLASS as ke } from "./constants.js";
+import { ARIA_ERROR_SUFFIX as Oe } from "../../../../core/Errors/constants.js";
+import { useUniqueId as Q } from "../../../../hooks/useUniqueId.js";
+import _e from "./components/SelectButton.js";
+import Fe from "./components/SelectList.js";
+import ye from "./hooks/useSelect.js";
+import { DROPDOWN_BASE_CLASS as V, DROPDOWN_MULTI_SELECT_CLASS as Be } from "./constants.js";
 /* empty css            */
-import Ce from "../../../../hooks/useCommitAction/useCommitAction.js";
-import { CommitAction as q } from "../../../../hooks/useCommitAction/types.js";
-import { EMPTY_ARRAY as Y } from "../../../../utils/value/constants.js";
-import { boolOrFalse as xe } from "../../../../utils/value/bool.js";
-import { noop as Te } from "../../../../utils/common.js";
-const Me = ({
-  className: T,
-  classNameModifiers: w = Y,
-  popoverClassNameModifiers: M,
-  items: g = Y,
-  filterable: l = !1,
-  disableFocusTrap: j = !1,
-  multiSelect: d = !1,
-  readonly: H = !1,
-  onChange: L = Te,
-  selected: X,
-  name: P,
-  isInvalid: z,
-  isValid: G,
-  placeholder: J,
-  uniqueId: Q,
-  renderListItem: V,
-  isCollatingErrors: Z,
-  setToTargetWidth: ee,
-  withoutCollapseIndicator: te = !1,
-  showOverlay: re = !1,
-  fitPosition: ne,
-  fixedPopoverPositioning: se,
-  onResetAction: oe,
-  ...ae
+import We from "../../../../hooks/useCommitAction/useCommitAction.js";
+import { CommitAction as Z } from "../../../../hooks/useCommitAction/types.js";
+import { EMPTY_ARRAY as K } from "../../../../utils/value/constants.js";
+import { boolOrFalse as Ne } from "../../../../utils/value/bool.js";
+import { noop as Ke } from "../../../../utils/common.js";
+const rt = ({
+  className: U,
+  classNameModifiers: $ = K,
+  clearable: ee = !1,
+  popoverClassNameModifiers: te,
+  items: g = K,
+  filterable: a = !1,
+  disableFocusTrap: re = !1,
+  disableToggleFocusOnClose: q = !1,
+  multiSelect: m = !1,
+  readonly: ne = !1,
+  onChange: h = Ke,
+  selected: se,
+  name: I,
+  isInvalid: oe,
+  isValid: ae,
+  placeholder: ce,
+  uniqueId: ie,
+  renderListItem: le,
+  renderButtonContent: ue,
+  isCollatingErrors: de,
+  setToTargetWidth: fe,
+  withoutCollapseIndicator: me = !1,
+  showOverlay: pe = !1,
+  fitPosition: be,
+  fixedPopoverPositioning: Ae,
+  onResetAction: ge,
+  buttonVariant: Ie,
+  ...Ee
 }) => {
-  const { resetSelection: m, select: O, selection: n } = he({ items: g, multiSelect: d, selected: X }), [s, a] = W(!1), [I, f] = W(""), E = i(null), p = i(null), D = i(null), ce = `elem-${U()}`, h = Q ?? ce, _ = `select-${U()}`, B = i(), R = i(!0), k = i(!1), C = i(n), F = i(n), ie = $(() => n.length, [n]), ue = u(() => {
-    f(""), a(!1), s && (m(C.current), R.current = !0);
-  }, [m, a, f, s]), le = $(
-    () => Re([
-      K,
-      { [ke]: xe(d) },
-      ...w.map((e) => `${K}--${e}`),
-      T
+  const { resetSelection: p, select: w, selection: c } = ye({ items: g, multiSelect: m, selected: se }), [n, f] = N(!1), [E, R] = N(""), [b, u] = N(-1), v = d(null), k = d(null), F = d(null), Re = `elem-${Q()}`, y = ie ?? Re, Y = `select-${Q()}`, M = d(), P = d(!0), B = d(!1), S = d(c), j = d(c), De = J(() => c.length, [c]), he = i(() => {
+    R(""), f(!1), u(-1), n && (p(S.current), P.current = !0);
+  }, [p, f, R, n]), ke = J(
+    () => Te([
+      V,
+      { [Be]: Ne(m) },
+      ...$.map((e) => `${V}--${e}`),
+      U
     ]),
-    [T, w, d]
-  ), { commitAction: v, commitActionButtons: de, committing: y, resetCommitAction: N } = Ce({
-    resetDisabled: !n.length,
-    onResetAction: oe
-  }), c = u(() => {
+    [U, $, m]
+  ), { commitAction: H, commitActionButtons: Se, committing: X, resetCommitAction: z } = We({
+    resetDisabled: !c.length,
+    onResetAction: ge
+  }), l = i(() => {
     var e;
-    f(""), a(!1), N(), R.current ? R.current = !1 : (e = D.current) == null || e.focus();
-  }, [N, a, f]), S = u(() => {
-    C.current = n;
-    const e = `${n.map(({ id: t }) => t)}`;
-    L({ target: { value: e, name: P } });
-  }, [P, L, n]);
-  A(() => {
-    switch (v) {
-      case q.APPLY:
-        S();
+    R(""), f(!1), u(-1), z(), P.current ? P.current = !1 : q || (e = F.current) == null || e.focus();
+  }, [q, z, f, R]), C = i(() => {
+    S.current = c;
+    const e = `${c.map(({ id: t }) => t)}`;
+    h({ target: { value: e, name: I } });
+  }, [I, h, c]), L = i(() => {
+    p(), S.current = K, h({ target: { value: "", name: I } });
+  }, [I, h, p]);
+  D(() => {
+    switch (H) {
+      case Z.APPLY:
+        C();
         break;
-      case q.CLEAR:
-        m(), k.current = !0;
+      case Z.CLEAR:
+        B.current = !0, L();
         break;
     }
-  }, [v, S, m]);
-  const b = u(
+  }, [L, H, C, I, h, p]);
+  const x = i(
     (e) => {
       var r;
       e.preventDefault();
-      const t = e.currentTarget && ((r = p == null ? void 0 : p.current) != null && r.contains(e.currentTarget)) ? e.currentTarget : null;
+      const t = e.currentTarget && ((r = k == null ? void 0 : k.current) != null && r.contains(e.currentTarget)) ? e.currentTarget : null;
       if (t && !t.getAttribute("data-disabled")) {
-        const Ae = t.getAttribute("data-value"), ge = g.find((Ee) => Ee.id === Ae);
-        O(ge);
+        const A = t.getAttribute("data-value"), T = g.find((O) => O.id === A);
+        w(T);
       }
     },
-    [g, O]
+    [g, w]
   );
-  A(() => {
-    F.current !== n && (F.current = n, (!d || k.current) && (S(), c())), k.current = !1;
-  }, [c, S, d, n]), A(() => {
-    y && c();
-  }, [y, c]);
-  const me = u(
+  D(() => {
+    j.current !== c && (j.current = c, (!m || B.current) && n && (C(), l())), B.current = !1;
+  }, [l, C, m, c, n]), D(() => {
+    X && l();
+  }, [X, l]), D(() => {
+    n || (S.current = c);
+  }, [c, n]);
+  const xe = i(
     (e) => {
       switch (e.code) {
         case o.ESCAPE:
         case o.TAB:
-          s && c(), R.current = e.key === o.TAB;
+          n && l(), P.current = e.key === o.TAB;
           return;
         case o.ENTER:
         case o.SPACE:
-          if (l && s) {
+          if (a && n) {
             if (e.key === o.ENTER)
-              if (I) b(e);
+              if (E) x(e);
               else break;
             return;
           }
           break;
         case o.ARROW_DOWN:
         case o.ARROW_UP:
+          if (a && n)
+            return;
           break;
         default:
           return;
       }
-      e.preventDefault(), a(!0);
+      e.preventDefault(), f(!0);
     },
-    [c, l, b, s, a, I]
+    [l, a, x, n, f, E]
   );
-  A(() => {
-    s && (cancelAnimationFrame(B.current), B.current = requestAnimationFrame(() => {
+  D(() => {
+    n && (cancelAnimationFrame(M.current), M.current = requestAnimationFrame(() => {
       var e;
       e: {
-        let t = (e = p.current) == null ? void 0 : e.firstElementChild, r;
+        let t = (e = k.current) == null ? void 0 : e.firstElementChild, r, A = 0;
         for (; t; ) {
           if (!(t.dataset.disabled && t.dataset.disabled === "true")) {
             if (t.getAttribute("aria-selected") === "true") {
-              t.tabIndex = 0, t.focus();
+              t.tabIndex = 0, a ? u(A) : t.focus();
               break e;
             }
-            r = r || t;
+            r = r || t, A++;
           }
           t = t.nextElementSibling;
         }
-        r && (r.tabIndex = 0, r.focus());
+        r && !a && (r.tabIndex = 0, r.focus());
       }
     }));
-  }, [s]);
-  const fe = u(
+  }, [a, n]);
+  const we = i(
     (e) => {
       const t = e.target;
       switch (e.code) {
         case o.ESCAPE:
-          e.preventDefault(), e.stopPropagation(), c();
+          e.preventDefault(), e.stopPropagation(), l();
           break;
         case o.ENTER:
         case o.SPACE:
-          b(e);
+          x(e);
           break;
         case o.ARROW_DOWN: {
           e.preventDefault();
@@ -167,79 +177,145 @@ const Me = ({
               }
               r = r.previousElementSibling;
             }
-            l && E.current && E.current.focus();
+            a && v.current && v.current.focus();
           }
           break;
         }
       }
     },
-    [c, l, b]
-  ), pe = u(
+    [l, a, x]
+  ), ve = i(
+    (e) => {
+      var A, T, O;
+      if (!a || !n) return;
+      const t = g.filter((s) => !E || s.name.toLowerCase().includes(E)), r = t.filter((s) => !s.disabled);
+      switch (e.code) {
+        case o.ESCAPE:
+          e.preventDefault(), l();
+          break;
+        case o.ENTER:
+          if (e.preventDefault(), b >= 0 && b < t.length) {
+            const s = t[b];
+            s && !(s != null && s.disabled) && w(s);
+          }
+          break;
+        case o.ARROW_DOWN: {
+          if (e.preventDefault(), r.length === 0) break;
+          let s = b + 1;
+          for (; s < t.length; ) {
+            if (!((A = t[s]) != null && A.disabled)) {
+              u(s);
+              break;
+            }
+            s++;
+          }
+          if (s >= t.length) {
+            for (let _ = 0; _ < t.length; _++)
+              if (!((T = t[_]) != null && T.disabled)) {
+                u(_);
+                break;
+              }
+          }
+          break;
+        }
+        case o.ARROW_UP: {
+          if (e.preventDefault(), r.length === 0) break;
+          let s = b - 1;
+          for (; s >= 0; ) {
+            if (!((O = t[s]) != null && O.disabled)) {
+              u(s);
+              break;
+            }
+            s--;
+          }
+          s < 0 && u(-1);
+          break;
+        }
+      }
+    },
+    [a, n, g, E, b, l, w]
+  ), Pe = i(
     (e) => {
       const t = e.target.value;
-      f(t.toLowerCase());
+      R(t.toLowerCase()), u(-1);
     },
-    [f]
-  ), be = u(
+    [R]
+  ), G = d(!1), Ce = i(
     (e) => {
-      e.preventDefault(), a((t) => !t), s && m(C.current);
+      e.preventDefault(), G.current || f((t) => !t), n && p(S.current);
     },
-    [a, s, m]
+    [f, n, p]
   );
-  return A(() => {
+  D(() => {
     var e;
-    s && l && ((e = E.current) == null || e.focus());
-  }, [l, s]), /* @__PURE__ */ x("div", { className: le, children: [
-    /* @__PURE__ */ x(
-      Ie,
+    n && a && ((e = v.current) == null || e.focus(), u(-1)), G.current = n;
+  }, [a, n]);
+  const Le = i(
+    (e) => {
+      var t, r;
+      (t = e == null ? void 0 : e.preventDefault) == null || t.call(e), (r = e == null ? void 0 : e.stopPropagation) == null || r.call(e), L();
+    },
+    [L]
+  );
+  return /* @__PURE__ */ W("div", { className: ke, children: [
+    /* @__PURE__ */ W(
+      _e,
       {
-        id: h,
-        appliedFilterNumber: ie,
-        active: n,
-        filterInputRef: E,
-        filterable: l,
-        isInvalid: z,
-        isValid: G,
-        onButtonKeyDown: me,
-        onInput: pe,
-        multiSelect: d,
-        placeholder: J,
-        readonly: H,
-        selectListId: _,
-        showList: s,
-        toggleButtonRef: D,
-        toggleList: be,
-        withoutCollapseIndicator: te,
-        ariaDescribedBy: !Z && h ? `${h}${Se}` : void 0,
-        ...ae
+        buttonVariant: Ie,
+        id: y,
+        appliedFilterNumber: De,
+        active: c,
+        clearable: ee,
+        filterInputRef: v,
+        filterable: a,
+        isInvalid: oe,
+        isValid: ae,
+        name: I,
+        onClear: Le,
+        onButtonKeyDown: xe,
+        onFilterInputKeyDown: ve,
+        multiSelect: m,
+        placeholder: ce,
+        readonly: ne,
+        renderButtonContent: ue,
+        selectListId: Y,
+        showList: n,
+        toggleButtonRef: F,
+        toggleList: Ce,
+        withoutCollapseIndicator: me,
+        ariaDescribedBy: !de && y ? `${y}${Oe}` : void 0,
+        ...Ee,
+        onInput: Pe
       }
     ),
-    /* @__PURE__ */ x(
-      De,
+    /* @__PURE__ */ W(
+      Fe,
       {
-        popoverClassNameModifiers: M,
-        setToTargetWidth: ee,
-        dismissPopover: ue,
-        active: n,
-        commitActions: de,
+        popoverClassNameModifiers: te,
+        setToTargetWidth: fe,
+        dismissPopover: he,
+        active: c,
+        commitActions: Se,
         items: g,
-        multiSelect: d,
-        disableFocusTrap: j,
-        onKeyDown: fe,
-        onSelect: b,
-        selectListId: _,
-        ref: p,
-        toggleButtonRef: D,
-        renderListItem: V,
-        showList: s,
-        showOverlay: re,
-        textFilter: I,
-        fitPosition: ne,
-        fixedPopoverPositioning: se
+        multiSelect: m,
+        disableFocusTrap: re || a,
+        onKeyDown: we,
+        onSelect: x,
+        selectListId: Y,
+        ref: k,
+        toggleButtonRef: F,
+        renderListItem: le,
+        showList: n,
+        showOverlay: pe,
+        textFilter: E,
+        activeIndex: a ? b : void 0,
+        filterable: a,
+        fitPosition: be,
+        fixedPopoverPositioning: Ae
       }
     )
   ] });
 };
 export {
-  Me as default
+  rt as default
 };

package/dist/es/components/internal/FormFields/Select/components/SelectButton.js

@@ -1,71 +1,76 @@
-import { jsx as l } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import D from "classnames";
-import { useMemo as O } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import b from "../../../../../core/Context/useCoreContext.js";
-import { ButtonVariant as C } from "../../../Button/types.js";
-import L from "../../../Typography/Typography.js";
-import { TypographyVariant as f, TypographyElement as u } from "../../../Typography/types.js";
-import { DROPDOWN_BUTTON_ICON_CLASS as y, DROPDOWN_BUTTON_TEXT_CLASS as B, DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS as R, DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS as h, DROPDOWN_BUTTON_CLASS as A, DROPDOWN_BUTTON_VALID_CLASS as g, DROPDOWN_BUTTON_INVALID_CLASS as E, DROPDOWN_BUTTON_READONLY_CLASS as P, DROPDOWN_BUTTON_HAS_SELECTION_CLASS as U, DROPDOWN_BUTTON_ACTIVE_CLASS as I, DROPDOWN_BUTTON_CLASSNAME as x } from "../constants.js";
-import { Fragment as W } from "../../../../../external/preact/dist/preact.module.js";
-import p from "../../../Img/Img.js";
-import { Icon as v } from "../../../Icon/Icon.js";
-import w from "../../../Button/Button.js";
-import { boolOrFalse as V } from "../../../../../utils/value/bool.js";
-const F = ({
+import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import L from "classnames";
+import { useMemo as N } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import B from "../../../../../core/Context/useCoreContext.js";
+import { ButtonVariant as R } from "../../../Button/types.js";
+import h from "../../../Typography/Typography.js";
+import { TypographyVariant as A, TypographyElement as E } from "../../../Typography/types.js";
+import { DROPDOWN_BUTTON_ICON_CLASS as I, DROPDOWN_BUTTON_TEXT_CLASS as P, DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS as g, DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS as U, DROPDOWN_BUTTON_CLEAR_CLASS as x, DROPDOWN_BUTTON_CLASS as W, DROPDOWN_BUTTON_VALID_CLASS as v, DROPDOWN_BUTTON_INVALID_CLASS as w, DROPDOWN_BUTTON_READONLY_CLASS as V, DROPDOWN_BUTTON_HAS_SELECTION_CLASS as K, DROPDOWN_BUTTON_ACTIVE_CLASS as F, DROPDOWN_BUTTON_CLASSNAME as k } from "../constants.js";
+import { InteractionKeyCode as b } from "../../../../types.js";
+import { Fragment as M } from "../../../../../external/preact/dist/preact.module.js";
+import Y from "../../../Img/Img.js";
+import { Icon as u } from "../../../Icon/Icon.js";
+import j from "../../../Button/Button.js";
+import { boolOrFalse as f } from "../../../../../utils/value/bool.js";
+const H = ({
   active: a,
-  disabled: m,
-  className: r,
-  filterable: i,
+  disabled: T,
+  className: t,
+  filterable: r,
   toggleButtonRef: n,
-  ...t
+  buttonVariant: c,
+  ...l
 }) => {
-  const o = O(() => i ? D(x, r) : r, [r, i]);
-  return i ? /* @__PURE__ */ l("div", { ...t, className: o, ref: n }) : /* @__PURE__ */ l(
-    w,
+  const o = N(() => r ? L(k, t) : t, [t, r]);
+  return r ? /* @__PURE__ */ i("div", { ...l, className: o, ref: n }) : /* @__PURE__ */ i(
+    j,
     {
-      ...t,
+      ...l,
       className: o,
-      disabled: m,
-      variant: C.SECONDARY,
+      disabled: T,
+      variant: c ?? R.SECONDARY,
       ref: n,
-      "aria-label": t["aria-label"],
-      "aria-labelledby": t["aria-labelledby"]
+      "aria-label": l["aria-label"],
+      "aria-labelledby": l["aria-labelledby"]
     }
   );
-}, $ = (a) => {
-  var T, s;
-  const { i18n: m } = b(), { active: r, filterable: i, multiSelect: n, placeholder: t, readonly: o, showList: d, withoutCollapseIndicator: S } = a, N = O(() => (t == null ? void 0 : t.trim()) || m.get("common.inputs.select.placeholder"), [m, t]), e = O(() => V(n) ? void 0 : r[0], [r, n]), c = O(() => {
-    var _;
-    return ((_ = e == null ? void 0 : e.name) == null ? void 0 : _.trim()) || N;
-  }, [e, N]);
-  return /* @__PURE__ */ l(
-    F,
+}, na = (a) => {
+  var S, C;
+  const { i18n: T } = B(), { active: t, clearable: r, filterable: n, multiSelect: c, placeholder: l, onClear: o, readonly: O, showList: d, withoutCollapseIndicator: y } = a, s = N(() => (l == null ? void 0 : l.trim()) || T.get("common.inputs.select.placeholder"), [T, l]), e = N(() => f(c) ? void 0 : t[0], [t, c]), _ = N(() => {
+    var m;
+    return ((m = e == null ? void 0 : e.name) == null ? void 0 : m.trim()) || s;
+  }, [e, s]), D = N(() => f(r) && !!t.length, [t, r]);
+  return /* @__PURE__ */ i(
+    H,
     {
-      active: r,
-      disabled: o,
-      "aria-disabled": o,
+      buttonVariant: a.buttonVariant,
+      active: t,
+      disabled: O,
+      "aria-disabled": O,
       "aria-expanded": d,
       "aria-haspopup": "dialog",
-      className: D(A, {
-        [I]: d,
-        [U]: !!r.length,
-        [P]: o,
-        [E]: a.isInvalid,
-        [g]: a.isValid
+      "aria-invalid": a.isInvalid,
+      className: L(W, {
+        [F]: d,
+        [K]: !!t.length,
+        [V]: O,
+        [w]: a.isInvalid,
+        [v]: a.isValid
       }),
-      filterable: i,
-      onClick: o ? void 0 : a.toggleList,
-      onKeyDown: o ? void 0 : a.onButtonKeyDown,
-      role: !i || d ? "button" : void 0,
+      filterable: n,
+      name: a.name,
+      onClick: O ? void 0 : a.toggleList,
+      onKeyDown: O ? void 0 : a.onButtonKeyDown,
+      role: !n || d ? "button" : void 0,
       tabIndex: 0,
-      title: c,
+      title: _,
       toggleButtonRef: a.toggleButtonRef,
-      type: i ? void 0 : "button",
+      type: n ? void 0 : "button",
       "aria-describedby": a.ariaDescribedBy,
       id: a.id,
-      ...d && i ? {} : { "aria-label": a["aria-label"], "aria-labelledby": a["aria-labelledby"] },
+      ...d && n ? {} : { "aria-label": a["aria-label"], "aria-labelledby": a["aria-labelledby"] },
       children: [
-        d && i ? /* @__PURE__ */ l(
+        a.renderButtonContent ? a.renderButtonContent({ item: e }) : d && n ? /* @__PURE__ */ i(
           "input",
           {
             "aria-autocomplete": "list",
@@ -74,24 +79,39 @@ const F = ({
             "aria-controls": a.selectListId,
             "aria-expanded": d,
             "aria-owns": a.selectListId,
+            "aria-invalid": a.isInvalid,
             autoComplete: "off",
             className: "adyen-pe-filter-input",
             onInput: a.onInput,
-            placeholder: N,
+            onKeyDown: a.onFilterInputKeyDown,
+            placeholder: s,
             ref: a.filterInputRef,
             role: "combobox",
             type: "text"
           }
-        ) : /* @__PURE__ */ l(W, { children: [
-          (e == null ? void 0 : e.icon) && /* @__PURE__ */ l(p, { className: y, src: e.icon, alt: ((T = e == null ? void 0 : e.name) == null ? void 0 : T.trim()) ?? "" }),
-          /* @__PURE__ */ l("span", { className: B, children: ((s = e == null ? void 0 : e.selectedOptionName) == null ? void 0 : s.trim()) || c }),
-          n && a.appliedFilterNumber > 0 && /* @__PURE__ */ l("div", { className: R, children: /* @__PURE__ */ l(L, { el: u.SPAN, variant: f.BODY, stronger: !0, children: a.appliedFilterNumber }) })
+        ) : /* @__PURE__ */ i(M, { children: [
+          (e == null ? void 0 : e.icon) && /* @__PURE__ */ i(Y, { className: I, src: e.icon, alt: ((S = e == null ? void 0 : e.name) == null ? void 0 : S.trim()) ?? "" }),
+          /* @__PURE__ */ i("span", { className: P, children: ((C = e == null ? void 0 : e.selectedOptionName) == null ? void 0 : C.trim()) || _ }),
+          c && a.appliedFilterNumber > 0 && /* @__PURE__ */ i("div", { className: g, children: /* @__PURE__ */ i(h, { el: E.SPAN, variant: A.BODY, stronger: !0, children: a.appliedFilterNumber }) })
         ] }),
-        !S && /* @__PURE__ */ l("span", { className: h, children: /* @__PURE__ */ l(v, { name: "chevron-down" }) })
+        !y && !D && /* @__PURE__ */ i("span", { className: U, children: /* @__PURE__ */ i(u, { name: "chevron-down" }) }),
+        D && /* @__PURE__ */ i(
+          "span",
+          {
+            role: "button",
+            tabIndex: 0,
+            className: x,
+            onClick: o,
+            onKeyDown: (m) => {
+              (m.code === b.ENTER || m.code === b.SPACE) && (o == null || o(m));
+            },
+            children: /* @__PURE__ */ i(u, { name: "cross-circle-fill" })
+          }
+        )
       ]
     }
   );
 };
 export {
-  $ as default
+  na as default
 };