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

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

@@ -1,150 +1,157 @@
-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 { 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 { jsx as _ } from "../../../../external/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/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 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 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: 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: 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: 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
     ]),
-    [T, w, d]
-  ), { commitAction: v, commitActionButtons: de, committing: y, resetCommitAction: N } = Ce({
-    resetDisabled: !n.length,
-    onResetAction: oe
-  }), c = u(() => {
-    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();
+    [W, N, m]
+  ), { commitAction: Y, commitActionButtons: Ee, committing: M, resetCommitAction: j } = Oe({
+    resetDisabled: !c.length,
+    onResetAction: me
+  }), l = i(() => {
+    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)}`;
+    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 (Y) {
+      case G.APPLY:
+        L();
         break;
-      case q.CLEAR:
-        m(), k.current = !0;
+      case G.CLEAR:
+        O.current = !0, P();
         break;
     }
-  }, [v, S, m]);
-  const b = u(
+  }, [P, Y, L, g, k, p]);
+  const S = 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 && C?.current?.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 r = t.getAttribute("data-value"), n = b.find((E) => E.id === r);
+        x(n);
       }
     },
-    [g, O]
+    [b, x]
   );
-  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(() => {
+    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:
-          s && c(), R.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 (l && s) {
-            if (e.key === o.ENTER)
-              if (I) b(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:
+        case a.ARROW_DOWN:
+        case a.ARROW_UP:
+          if (o && s)
+            return;
           break;
         default:
           return;
       }
-      e.preventDefault(), a(!0);
+      e.preventDefault(), d(!0);
     },
-    [c, l, b, s, a, I]
+    [l, o, S, s, d, I]
   );
-  A(() => {
-    s && (cancelAnimationFrame(B.current), B.current = requestAnimationFrame(() => {
-      var e;
+  D(() => {
+    s && (cancelAnimationFrame($.current), $.current = requestAnimationFrame(() => {
       e: {
-        let t = (e = p.current) == null ? void 0 : e.firstElementChild, r;
-        for (; t; ) {
-          if (!(t.dataset.disabled && t.dataset.disabled === "true")) {
-            if (t.getAttribute("aria-selected") === "true") {
-              t.tabIndex = 0, 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;
+            t = t || e, r++;
           }
-          t = t.nextElementSibling;
+          e = e.nextElementSibling;
         }
-        r && (r.tabIndex = 0, r.focus());
+        t && !o && (t.tabIndex = 0, t.focus());
       }
     }));
-  }, [s]);
-  const fe = u(
+  }, [o, s]);
+  const ke = i(
     (e) => {
       const t = e.target;
       switch (e.code) {
-        case o.ESCAPE:
-          e.preventDefault(), e.stopPropagation(), c();
+        case a.ESCAPE:
+          e.preventDefault(), e.stopPropagation(), l();
           break;
-        case o.ENTER:
-        case o.SPACE:
-          b(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; ) {
@@ -156,7 +163,7 @@ const Me = ({
           }
           break;
         }
-        case o.ARROW_UP: {
+        case a.ARROW_UP: {
           e.preventDefault();
           e: {
             let r = t.previousElementSibling;
@@ -167,79 +174,147 @@ const Me = ({
               }
               r = r.previousElementSibling;
             }
-            l && E.current && E.current.focus();
+            o && w.current && w.current.focus();
+          }
+          break;
+        }
+      }
+    },
+    [l, o, S]
+  ), he = i(
+    (e) => {
+      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 a.ESCAPE:
+          e.preventDefault(), l();
+          break;
+        case a.ENTER:
+          if (e.preventDefault(), A >= 0 && A < t.length) {
+            const n = t[A];
+            n && !n?.disabled && x(n);
+          }
+          break;
+        case a.ARROW_DOWN: {
+          if (e.preventDefault(), r.length === 0) break;
+          let n = A + 1;
+          for (; n < t.length; ) {
+            if (!t[n]?.disabled) {
+              u(n);
+              break;
+            }
+            n++;
+          }
+          if (n >= t.length) {
+            for (let E = 0; E < t.length; E++)
+              if (!t[E]?.disabled) {
+                u(E);
+                break;
+              }
+          }
+          break;
+        }
+        case a.ARROW_UP: {
+          if (e.preventDefault(), r.length === 0) break;
+          let n = A - 1;
+          for (; n >= 0; ) {
+            if (!t[n]?.disabled) {
+              u(n);
+              break;
+            }
+            n--;
           }
+          n < 0 && u(-1);
           break;
         }
       }
     },
-    [c, l, b]
-  ), pe = u(
+    [o, s, b, I, A, l, x]
+  ), Se = i(
     (e) => {
       const t = e.target.value;
-      f(t.toLowerCase());
+      R(t.toLowerCase()), u(-1);
+    },
+    [R]
+  ), xe = i(
+    (e) => {
+      e.preventDefault(), d((t) => !t), s && p(h.current);
     },
-    [f]
-  ), be = u(
+    [d, s, p]
+  );
+  D(() => {
+    if (s && o) {
+      const e = requestAnimationFrame(() => {
+        w.current?.focus();
+      });
+      return u(-1), () => cancelAnimationFrame(e);
+    }
+  }, [o, s]);
+  const we = i(
     (e) => {
-      e.preventDefault(), a((t) => !t), s && m(C.current);
+      e?.preventDefault?.(), e?.stopPropagation?.(), P();
     },
-    [a, s, m]
+    [P]
   );
-  return A(() => {
-    var e;
-    s && l && ((e = E.current) == null || e.focus());
-  }, [l, s]), /* @__PURE__ */ x("div", { className: le, children: [
-    /* @__PURE__ */ x(
-      Ie,
+  return /* @__PURE__ */ _("div", { className: Re, children: [
+    /* @__PURE__ */ _(
+      Pe,
       {
-        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: _,
+        buttonVariant: pe,
+        id: F,
+        appliedFilterNumber: ge,
+        active: c,
+        clearable: J,
+        filterInputRef: w,
+        filterable: o,
+        isInvalid: te,
+        isValid: re,
+        name: g,
+        onClear: we,
+        onButtonKeyDown: De,
+        onFilterInputKeyDown: he,
+        multiSelect: m,
+        placeholder: ne,
+        readonly: Z,
+        renderButtonContent: oe,
+        selectListId: U,
         showList: s,
-        toggleButtonRef: D,
-        toggleList: be,
-        withoutCollapseIndicator: te,
-        ariaDescribedBy: !Z && h ? `${h}${Se}` : void 0,
-        ...ae
+        toggleButtonRef: T,
+        toggleList: xe,
+        withoutCollapseIndicator: le,
+        ariaDescribedBy: !ce && F ? `${F}${Le}` : void 0,
+        ...Ae,
+        onInput: Se
       }
     ),
-    /* @__PURE__ */ x(
-      De,
+    /* @__PURE__ */ _(
+      Ce,
       {
-        popoverClassNameModifiers: M,
-        setToTargetWidth: ee,
-        dismissPopover: ue,
-        active: n,
-        commitActions: de,
-        items: g,
-        multiSelect: d,
-        disableFocusTrap: j,
-        onKeyDown: fe,
-        onSelect: b,
-        selectListId: _,
-        ref: p,
-        toggleButtonRef: D,
-        renderListItem: V,
+        popoverClassNameModifiers: Q,
+        setToTargetWidth: ie,
+        dismissPopover: Ie,
+        active: c,
+        commitActions: Ee,
+        items: b,
+        multiSelect: m,
+        disableFocusTrap: V || o,
+        onKeyDown: ke,
+        onSelect: S,
+        selectListId: U,
+        ref: C,
+        toggleButtonRef: T,
+        renderListItem: ae,
         showList: s,
-        showOverlay: re,
+        showOverlay: ue,
         textFilter: I,
-        fitPosition: ne,
-        fixedPopoverPositioning: se
+        activeIndex: o ? A : void 0,
+        filterable: o,
+        fitPosition: de,
+        fixedPopoverPositioning: fe
       }
     )
   ] });
 };
 export {
-  Me as default
+  Ve as default
 };