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

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

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