@adyen/adyen-platform-experience-web 1.4.2 → 1.5.1

package/dist/es/components/internal/FilterBar/filters/AmountFilter/AmountFilter.js

@@ -1,57 +1,57 @@
-import { jsx as I } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { RangeSelection as P } from "./RangeSelection.js";
-import { useState as u, useMemo as w, useCallback as T } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { PopoverContainerSize as z } from "../../../Popover/types.js";
-import B from "../../../../../core/Context/useCoreContext.js";
-import { AMOUNT_MULTIPLIER as E } from "./constants.js";
-import D from "../BaseFilter/BaseFilter.js";
+import { jsx as P } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { RangeSelection as w } from "./RangeSelection.js";
+import { useState as T, useMemo as z, useCallback as E } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { PopoverContainerSize as B } from "../../../Popover/types.js";
+import D from "../../../../../core/Context/useCoreContext.js";
+import { AMOUNT_MULTIPLIER as L } from "./constants.js";
+import F from "../BaseFilter/BaseFilter.js";
+import { EMPTY_OBJECT as O } from "../../../../../utils/value/constants.js";
 import { isUndefined as f } from "../../../../../utils/value/is.js";
-import { EMPTY_OBJECT as F } from "../../../../../utils/value/constants.js";
-const d = ({ updateFilters: $, selectedCurrencies: t, availableCurrencies: m, ...x }) => {
-  const { i18n: g } = B(), [y, L] = u(), [p, h] = u(), M = w(() => (t == null ? void 0 : t.length) === 1 || (m == null ? void 0 : m.length) === 1, [m == null ? void 0 : m.length, t == null ? void 0 : t.length]), S = T(
+const G = ({ updateFilters: $, selectedCurrencies: t, availableCurrencies: m, ...y }) => {
+  const { i18n: g } = D(), [h, U] = T(), [p, x] = T(), M = z(() => (t == null ? void 0 : t.length) === 1 || (m == null ? void 0 : m.length) === 1, [m == null ? void 0 : m.length, t == null ? void 0 : t.length]), S = E(
     (n, o) => {
-      const A = (t == null ? void 0 : t[0]) || (m == null ? void 0 : m[0]), V = o && A ? {
+      const A = (t == null ? void 0 : t[0]) || (m == null ? void 0 : m[0]), I = o && A ? {
         style: "currency",
         currency: A,
         currencyDisplay: "symbol"
       } : void 0;
-      return n.toLocaleString(g.locale, V);
+      return n.toLocaleString(g.locale, I);
     },
     [m, g, t]
-  ), U = T(
+  ), V = E(
     (n) => {
-      const { minAmount: o, maxAmount: A } = n ?? F;
-      L({ minAmount: o, maxAmount: A }), f(o) && f(A) && h(void 0), $({
-        minAmount: f(o) ? void 0 : String(Math.round(o * E)),
-        maxAmount: f(A) ? void 0 : String(Math.round(A * E))
+      const { minAmount: o, maxAmount: A } = n ?? O;
+      U({ minAmount: o, maxAmount: A }), f(o) && f(A) && x(void 0), $({
+        minAmount: f(o) ? void 0 : String(Math.round(o * L)),
+        maxAmount: f(A) ? void 0 : String(Math.round(A * L))
       });
     },
     [$]
   );
-  if (y && (y.minAmount || y.maxAmount)) {
-    const { minAmount: n, maxAmount: o } = y ?? {};
-    !f(n) && !f(o) && n <= o ? h(
+  if (h && (h.minAmount || h.maxAmount)) {
+    const { minAmount: n, maxAmount: o } = h ?? {};
+    !f(n) && !f(o) && n <= o ? x(
       `${S(n, M)} ${g.get("to").toLowerCase()} ${S(o, M)}`
-    ) : !f(n) && f(o) && n >= 0 ? h(`${g.get("from")} ${S(n, M)}`) : f(n) && !f(o) ? h(`${g.get("to")} ${S(o, M)}`) : h(void 0);
+    ) : !f(n) && f(o) && n >= 0 ? x(`${g.get("from")} ${S(n, M)}`) : f(n) && !f(o) ? x(`${g.get("to")} ${S(o, M)}`) : x(void 0);
   }
-  return /* @__PURE__ */ I(
-    D,
+  return /* @__PURE__ */ P(
+    F,
     {
-      ...x,
+      ...y,
       updateFilters: $,
-      minAmount: x.minAmount,
-      maxAmount: x.maxAmount,
-      onChange: U,
+      minAmount: y.minAmount,
+      maxAmount: y.maxAmount,
+      onChange: V,
       value: p,
-      label: p || x.label,
+      label: p || y.label,
       type: "text",
-      containerSize: z.MEDIUM,
+      containerSize: B.MEDIUM,
       selectedCurrencies: t,
       availableCurrencies: m,
-      render: P
+      render: w
     }
   );
 };
 export {
-  d as AmountFilter
+  G as AmountFilter
 };

package/dist/es/components/internal/FilterBar/filters/AmountFilter/RangeSelection.js

@@ -1,71 +1,71 @@
-import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import p from "../../../FormFields/InputBase.js";
+import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import g from "../../../FormFields/InputBase.js";
 /* empty css                  */
-import { useState as v, useCallback as x, useEffect as T, useMemo as h } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import N from "../../../../../core/Context/useCoreContext.js";
+import { useState as p, useCallback as x, useEffect as T, useMemo as N } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import h from "../../../../../core/Context/useCoreContext.js";
 import { AMOUNT_MULTIPLIER as b } from "./constants.js";
 import { isUndefined as m } from "../../../../../utils/value/is.js";
 import { CommitAction as F } from "../../../../../hooks/useCommitAction/types.js";
 const S = ({
   onChange: i,
-  editAction: l,
-  onValueUpdated: o,
+  editAction: o,
+  onValueUpdated: u,
   selectedCurrencies: y,
   availableCurrencies: I,
   value: M,
-  ...u
+  ...l
 }) => {
-  const { i18n: r } = N(), [n, c] = v(
-    m(u.minAmount) ? void 0 : parseFloat(u.minAmount) / b
-  ), [t, d] = v(
-    m(u.maxAmount) ? void 0 : parseFloat(u.maxAmount) / b
-  ), f = x(() => {
-    i({ minAmount: n, maxAmount: t });
-  }, [t, n, i]), A = x(() => {
+  const { i18n: r } = h(), [t, c] = p(
+    m(l.minAmount) ? void 0 : parseFloat(l.minAmount) / b
+  ), [a, d] = p(
+    m(l.maxAmount) ? void 0 : parseFloat(l.maxAmount) / b
+  ), v = x(() => {
+    i({ minAmount: t, maxAmount: a });
+  }, [a, t, i]), f = x(() => {
     i({ minAmount: void 0, maxAmount: void 0 }), d(void 0), c(void 0);
   }, [i]);
   T(() => {
-    l === F.APPLY && f(), l === F.CLEAR && A();
-  }, [f, A, l]);
-  const g = h(() => ({ minAmount: Number(n), maxAmount: Number(t) }), [t, n]);
+    o === F.APPLY && v(), o === F.CLEAR && f();
+  }, [v, f, o]);
+  const A = N(() => ({ minAmount: Number(t), maxAmount: Number(a) }), [a, t]);
   return T(() => {
-    const { maxAmount: e, minAmount: s } = g;
-    m(e) && m(s) || s > e ? o(null) : o(`${s}-${e}`);
-  }, [g, o]), /* @__PURE__ */ a("div", { className: "adyen-pe-range-selection-filter", children: [
-    /* @__PURE__ */ a("div", { className: "adyen-pe-range-selection-filter__input", children: [
-      /* @__PURE__ */ a("label", { htmlFor: "minValue", children: `${r.get("from")}:` }),
-      /* @__PURE__ */ a(
-        p,
+    const { maxAmount: e, minAmount: s } = A;
+    m(e) && m(s) || s > e ? u(null) : u(`${s}-${e}`);
+  }, [A, u]), /* @__PURE__ */ n("div", { className: "adyen-pe-range-selection-filter", children: [
+    /* @__PURE__ */ n("div", { className: "adyen-pe-range-selection-filter__input", children: [
+      /* @__PURE__ */ n("label", { htmlFor: "minValue", children: `${r.get("from")}:` }),
+      /* @__PURE__ */ n(
+        g,
         {
           "data-testid": "minValueFilter",
           lang: r.locale,
           name: "minValue",
           type: "number",
-          value: n,
+          value: t,
           onInput: (e) => {
             e.currentTarget && c(e.currentTarget.value !== "" ? e.currentTarget.value : void 0);
           },
           min: 0,
-          isInvalid: n ? n < 0 : !1,
+          isInvalid: t ? t < 0 : !1,
           errorMessage: r.get("noNegativeNumbersAllowed")
         }
       )
     ] }),
-    /* @__PURE__ */ a("div", { className: "adyen-pe-range-selection-filter__input", children: [
-      /* @__PURE__ */ a("label", { htmlFor: "maxValue", children: `${r.get("to")}:` }),
-      /* @__PURE__ */ a(
-        p,
+    /* @__PURE__ */ n("div", { className: "adyen-pe-range-selection-filter__input", children: [
+      /* @__PURE__ */ n("label", { htmlFor: "maxValue", children: `${r.get("to")}:` }),
+      /* @__PURE__ */ n(
+        g,
         {
           "data-testid": "maxValueFilter",
           lang: r.locale,
           name: "maxValue",
           type: "number",
-          value: t,
+          value: a,
           onInput: (e) => {
             e.currentTarget && d(e.currentTarget.value !== "" ? e.currentTarget.value : void 0);
           },
-          min: n,
-          isInvalid: !m(t) && !m(n) && t < n,
+          min: t,
+          isInvalid: !m(a) && !m(t) && a < t,
           errorMessage: r.get("toValueShouldBeGreaterThanTheFromValue")
         }
       )

package/dist/es/components/internal/FilterBar/filters/BaseFilter/BaseFilter.js

@@ -2,8 +2,8 @@ import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRun
 import { useResponsiveContainer as g, containerQueries as C } from "../../../../../hooks/useResponsiveContainer.js";
 import $ from "../../components/FilterButton/FilterButton.js";
 import q from "../../../Popover/Popover.js";
-import { PopoverContainerVariant as z, PopoverContainerPosition as H } from "../../../Popover/types.js";
-import { TypographyElement as B, TypographyVariant as O } from "../../../Typography/types.js";
+import { PopoverContainerPosition as z, PopoverContainerVariant as H } from "../../../Popover/types.js";
+import { TypographyVariant as B, TypographyElement as O } from "../../../Typography/types.js";
 import S from "../../../Typography/Typography.js";
 import L from "../../../../../hooks/element/useUniqueIdentifier.js";
 import { memo as j } from "../../../../../external/preact/compat/dist/compat.module.js";
@@ -35,27 +35,27 @@ const Z = (r) => !r || X(r), ee = /* @__PURE__ */ (() => {
   return (e) => /* @__PURE__ */ a(r, { ...e });
 })(), te = ({ render: r, ...e }) => {
   var N;
-  const f = g(C.down.xs), [i, u] = c(!1), [s, l] = c(!1), n = E(() => e.isValueEmpty ?? Z, [e.isValueEmpty]), [m, t] = c(n(e.value)), [y, h] = c(!1), [T, v] = c(!1), [I, M] = c(n(e.value)), b = L(), w = E(() => r ?? ee, [r]), k = D(
+  const f = g(C.down.xs), [i, u] = c(!1), [s, l] = c(!1), n = E(() => e.isValueEmpty ?? Z, [e.isValueEmpty]), [m, t] = c(n(e.value)), [y, v] = c(!1), [T, h] = c(!1), [I, M] = c(n(e.value)), b = L(), w = E(() => r ?? ee, [r]), k = D(
     (o) => {
       const d = n(o ?? void 0);
-      t(d), M(W(o)), v(y ? o !== e.value : !d);
+      t(d), M(W(o)), h(y ? o !== e.value : !d);
     },
-    [n, t, M, v, y, e.value]
+    [n, t, M, h, y, e.value]
   ), { commitAction: x, commitActionButtons: R, committing: V, resetCommitAction: P } = J({
     applyDisabled: I || !T,
     resetDisabled: m
   }), [p, F] = E(() => {
     const o = (d) => () => {
-      d !== i && (d && (P(), v(!1), h(!1)), u(d), l(d));
+      d !== i && (d && (P(), h(!1), v(!1)), u(d), l(d));
     };
     return [o(!1), o(!0)];
-  }, [u, i, P, l, h, v]);
+  }, [u, i, P, l, v, h]);
   A(() => {
     if (s) {
       const o = n(e.value);
-      l(!1), t(o), h(!o);
+      l(!1), t(o), v(!o);
     }
-  }, [e.value, s, n, l, t, h]), A(() => {
+  }, [e.value, s, n, l, t, v]), A(() => {
     V && p(), t(m);
   }, [V, p, t, m]);
   const U = g(C.only.sm), Y = g(C.only.md);
@@ -77,8 +77,8 @@ const Z = (r) => !r || X(r), ee = /* @__PURE__ */ (() => {
             /* @__PURE__ */ a(
               S,
               {
-                el: B.SPAN,
-                variant: O.BODY,
+                el: O.SPAN,
+                variant: B.BODY,
                 stronger: !0,
                 className: "adyen-pe-filter-button__label",
                 children: e.label
@@ -87,8 +87,8 @@ const Z = (r) => !r || X(r), ee = /* @__PURE__ */ (() => {
             !!e.appliedFilterAmount && /* @__PURE__ */ a("div", { className: "adyen-pe-filter-button__counter-wrapper", children: /* @__PURE__ */ a(
               S,
               {
-                el: B.SPAN,
-                variant: O.BODY,
+                el: O.SPAN,
+                variant: B.BODY,
                 stronger: !0,
                 className: "adyen-pe-filter-button__counter",
                 children: e.appliedFilterAmount
@@ -113,7 +113,7 @@ const Z = (r) => !r || X(r), ee = /* @__PURE__ */ (() => {
       {
         actions: R,
         title: (N = e.title) == null ? void 0 : N.trim(),
-        variant: z.POPOVER,
+        variant: H.POPOVER,
         modifiers: ["filter"],
         open: i,
         "aria-label": `${e.label}`,
@@ -123,7 +123,7 @@ const Z = (r) => !r || X(r), ee = /* @__PURE__ */ (() => {
         divider: !0,
         targetElement: b,
         disableFocusTrap: !1,
-        position: H.BOTTOM,
+        position: z.BOTTOM,
         containerSize: e.containerSize,
         showOverlay: f,
         fitPosition: U || Y,

package/dist/es/components/internal/FilterBar/filters/DateFilter/DateFilter.js

@@ -5,7 +5,7 @@ import { useMemo as C, useState as O, useCallback as P } from "../../../../../ex
 import _ from "../../../../../core/Context/useCoreContext.js";
 import { DateRangeFilterParam as T } from "./types.js";
 import { EMPTY_OBJECT as A } from "../../../../../utils/value/constants.js";
-const L = ({
+const M = ({
   timezone: l,
   canResetFilters: s,
   defaultParams: r,
@@ -60,5 +60,5 @@ const L = ({
   );
 };
 export {
-  L as default
+  M as default
 };

package/dist/es/components/internal/FilterBar/filters/DateFilter/DateFilterCore.js

@@ -1,6 +1,6 @@
 import { jsx as S } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import B from "../../../../../hooks/useTimezoneAwareDateFormatting.js";
-import { useState as C, useCallback as M, useMemo as T, useEffect as E, useRef as L } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useState as T, useCallback as M, useMemo as h, useEffect as E, useRef as L } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import { BASE_LOCALE as x } from "../../../../../core/Localization/datetime/restamper/constants.js";
 import k from "../../../../../core/Context/useCoreContext.js";
 import { DateRangeFilterParam as b } from "./types.js";
@@ -39,20 +39,20 @@ const _ = {
     sinceDate: m,
     untilDate: y
   }) => {
-    const { i18n: O } = k(), { fullDateFormat: d } = B(D), [g, R] = C(f), u = T(() => [new Date(n), new Date(o)], [n, o]), a = L(), P = M(
-      (l, h) => {
-        F(v(O, d, i(l), i(h)));
+    const { i18n: O } = k(), { fullDateFormat: d } = B(D), [g, R] = T(f), u = h(() => [new Date(n), new Date(o)], [n, o]), a = L(), P = M(
+      (l, C) => {
+        F(v(O, d, i(l), i(C)));
       },
       [O, d, F]
     );
     return E(() => {
-      var l, h, A;
+      var l, C, A;
       switch (e) {
         case p.APPLY:
           r({
             selectedPresetOption: g,
             [b.FROM]: i((l = a.current) == null ? void 0 : l.from),
-            [b.TO]: i((h = a.current) == null ? void 0 : h.to)
+            [b.TO]: i((C = a.current) == null ? void 0 : C.to)
           });
           break;
         case p.CLEAR:
@@ -84,7 +84,7 @@ function U({
   selectedPresetOption: o,
   ...t
 }) {
-  const { i18n: r } = k(), { fullDateFormat: F } = B(t.timezone), [w, f] = C(), [c, D] = C(), [m, y] = C(), O = M(
+  const { i18n: r } = k(), { fullDateFormat: F } = B(t.timezone), [w, f] = T(), [c, D] = T(), [m, y] = T(), O = M(
     (u) => {
       const { from: a, to: P, selectedPresetOption: l } = u ?? V;
       try {
@@ -94,7 +94,7 @@ function U({
       }
     },
     [w, c, m, t]
-  ), d = T(() => r.get("rangePreset.custom"), [r]), g = T(() => {
+  ), d = h(() => r.get("rangePreset.custom"), [r]), g = h(() => {
     const u = { ..._, timeZone: t.timezone };
     let a = new Intl.DateTimeFormat(x, u);
     try {
@@ -104,7 +104,7 @@ function U({
     return a;
   }, [r, t.timezone]);
   E(() => f(o), [o]), E(() => D(i(e || Date.now())), [e]), E(() => y(i(n || Date.now())), [n]);
-  const R = T(() => o === d && c && m ? $(g, new Date(c), new Date(m)) : o ?? t.label, [d, g, c, m, o, t.label]);
+  const R = h(() => o === d && c && m ? $(g, new Date(c), new Date(m)) : o ?? t.label, [d, g, c, m, o, t.label]);
   return /* @__PURE__ */ S(
     z,
     {

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

@@ -7,7 +7,7 @@ import { useCallback as r } from "../../../external/preact/hooks/dist/hooks.modu
 import { Fragment as w } from "../../../external/preact/dist/preact.module.js";
 import { hasOwnProperty as P } from "../../../utils/struct/property.js";
 function h({ onInput: i, onKeyUp: d, trimOnBlur: l, onBlurHandler: e, onBlur: t, onFocusHandler: s, errorMessage: f, ...p }, v) {
-  const { autoCorrect: A, classNameModifiers: n, isInvalid: m, isValid: C, readonly: I = !1, spellCheck: O, type: y, uniqueId: o, isCollatingErrors: $, disabled: g } = p;
+  const { autoCorrect: A, classNameModifiers: m, isInvalid: n, isValid: C, readonly: I = !1, spellCheck: O, type: y, uniqueId: o, isCollatingErrors: $, disabled: g } = p;
   P(p, "onChange") && console.error("Error: Form fields that rely on InputBase may not have an onChange property");
   const N = r(
     (a) => {
@@ -34,10 +34,10 @@ function h({ onInput: i, onKeyUp: d, trimOnBlur: l, onBlurHandler: e, onBlur: t,
     [`adyen-pe-input--${y}`],
     p.className,
     {
-      "adyen-pe-input--invalid": m,
+      "adyen-pe-input--invalid": n,
       "adyen-pe-input--valid": C
     },
-    n == null ? void 0 : n.map((a) => `adyen-pe-input--${a}`)
+    m == null ? void 0 : m.map((a) => `adyen-pe-input--${a}`)
   ), { classNameModifiers: V, uniqueId: j, isInvalid: D, isValid: F, isCollatingErrors: S, ..._ } = p;
   return /* @__PURE__ */ c(w, { children: [
     /* @__PURE__ */ c(
@@ -49,7 +49,7 @@ function h({ onInput: i, onKeyUp: d, trimOnBlur: l, onBlurHandler: e, onBlur: t,
         className: E,
         readOnly: I,
         "aria-describedby": $ ? void 0 : `${o}${u}`,
-        "aria-invalid": m,
+        "aria-invalid": n,
         onInput: N,
         onBlurCapture: b,
         onFocus: x,
@@ -58,7 +58,7 @@ function h({ onInput: i, onKeyUp: d, trimOnBlur: l, onBlurHandler: e, onBlur: t,
         ref: v
       }
     ),
-    m && f && /* @__PURE__ */ c("span", { className: "adyen-pe-input__invalid-value", id: `${o}${u}`, children: f })
+    n && f && /* @__PURE__ */ c("span", { className: "adyen-pe-input__invalid-value", id: `${o}${u}`, children: f })
   ] });
 }
 h.defaultProps = {

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

@@ -11,9 +11,9 @@ import { DROPDOWN_BASE_CLASS as K, DROPDOWN_MULTI_SELECT_CLASS as Ee } from "./c
 import Re from "../../../../hooks/useCommitAction/useCommitAction.js";
 import { CommitAction as U } from "../../../../hooks/useCommitAction/types.js";
 import { uuid as Se } from "../../../../utils/random/uuid.js";
-import { boolOrFalse as he } from "../../../../utils/value/bool.js";
 import { EMPTY_ARRAY as Y } from "../../../../utils/value/constants.js";
-import { noop as De } from "../../../../utils/common.js";
+import { boolOrFalse as De } from "../../../../utils/value/bool.js";
+import { noop as he } from "../../../../utils/common.js";
 const $e = ({
   className: O,
   classNameModifiers: P = Y,
@@ -22,13 +22,13 @@ const $e = ({
   filterable: u = !1,
   multiSelect: m = !1,
   readonly: j = !1,
-  onChange: F = De,
+  onChange: F = he,
   selected: H,
   name: _,
   isInvalid: X,
   isValid: q,
   placeholder: z,
-  uniqueId: h,
+  uniqueId: D,
   renderListItem: G,
   isCollatingErrors: J,
   setToTargetWidth: Q,
@@ -36,12 +36,12 @@ const $e = ({
   showOverlay: Z = !1,
   fitPosition: ee
 }) => {
-  const { resetSelection: f, select: I, selection: n } = ge({ items: g, multiSelect: m, selected: H }), [o, i] = w(!1), [D, d] = w(""), E = a(null), p = a(null), k = a(null), B = a(`select-${Se()}`), [te, v] = w(0), x = a(), R = a(!0), C = a(!1), L = a(n), y = a(n), re = l(() => {
+  const { resetSelection: f, select: I, selection: n } = ge({ items: g, multiSelect: m, selected: H }), [o, i] = w(!1), [h, d] = w(""), E = a(null), p = a(null), k = a(null), v = a(`select-${Se()}`), [te, B] = w(0), x = a(), R = a(!0), C = a(!1), L = a(n), y = a(n), re = l(() => {
     d(""), i(!1), o && (f(L.current), R.current = !0);
   }, [f, i, d, o]), se = de(
     () => fe([
       K,
-      { [Ee]: he(m) },
+      { [Ee]: De(m) },
       ...P.map((e) => `${K}--${e}`),
       O
     ]),
@@ -81,8 +81,8 @@ const $e = ({
   b(() => {
     y.current !== n && (y.current = n, (!m || C.current) && (S(), c())), C.current = !1;
   }, [c, S, m, n]), b(() => {
-    W && (v(n.length), c());
-  }, [W, c, v, n.length]);
+    W && (B(n.length), c());
+  }, [W, c, B, n.length]);
   const oe = l(
     (e) => {
       switch (e.code) {
@@ -94,7 +94,7 @@ const $e = ({
         case s.SPACE:
           if (u && o) {
             if (e.key === s.ENTER)
-              if (D) A(e);
+              if (h) A(e);
               else break;
             return;
           }
@@ -107,7 +107,7 @@ const $e = ({
       }
       e.preventDefault(), i(!0);
     },
-    [c, u, A, o, i, D]
+    [c, u, A, o, i, h]
   );
   b(() => {
     o && (cancelAnimationFrame(x.current), x.current = requestAnimationFrame(() => {
@@ -191,7 +191,7 @@ const $e = ({
     /* @__PURE__ */ T(
       Ae,
       {
-        id: h ?? void 0,
+        id: D ?? void 0,
         appliedFilterNumber: te,
         active: n,
         filterInputRef: E,
@@ -203,12 +203,12 @@ const $e = ({
         multiSelect: m,
         placeholder: z,
         readonly: j,
-        selectListId: B.current,
+        selectListId: v.current,
         showList: o,
         toggleButtonRef: k,
         toggleList: ie,
         withoutCollapseIndicator: V,
-        ariaDescribedBy: !J && h ? `${h}${pe}` : ""
+        ariaDescribedBy: !J && D ? `${D}${pe}` : ""
       }
     ),
     /* @__PURE__ */ T(
@@ -223,13 +223,13 @@ const $e = ({
         multiSelect: m,
         onKeyDown: ce,
         onSelect: A,
-        selectListId: B.current,
+        selectListId: v.current,
         ref: p,
         toggleButtonRef: k,
         renderListItem: G,
         showList: o,
         showOverlay: Z,
-        textFilter: D,
+        textFilter: h,
         fitPosition: ee
       }
     )

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

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