@adyen/adyen-platform-experience-web 1.7.0 → 1.8.0

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

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

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

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