@adyen/adyen-platform-experience-web 1.1.1 → 1.3.0

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

@@ -1,82 +1,73 @@
-import { ARIA_ERROR_SUFFIX as h } from "../../../core/Errors/constants.js";
-import _ from "classnames";
-import { forwardRef as P } from "../../../external/preact/compat/dist/compat.module.js";
-import { useCallback as r } from "../../../external/preact/hooks/dist/hooks.module.js";
-import "./FormFields.scss.js";
 import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { Fragment as k } from "../../../external/preact/dist/preact.module.js";
-import { hasOwnProperty as q } from "../../../utils/struct/property.js";
-function u({
-  onInput: a,
-  onKeyUp: d,
-  trimOnBlur: l,
-  onBlurHandler: e,
-  onBlur: t,
-  onFocusHandler: s,
-  errorMessage: f,
-  ...p
-}, v) {
-  const {
-    autoCorrect: A,
-    classNameModifiers: m,
-    isInvalid: n,
-    isValid: C,
-    readonly: I = !1,
-    spellCheck: O,
-    type: y,
-    uniqueId: o,
-    isCollatingErrors: $,
-    disabled: g
-  } = p;
-  q(p, "onChange") && console.error("Error: Form fields that rely on InputBase may not have an onChange property");
-  const N = r((i) => {
-    a == null || a(i);
-  }, [a]), x = r((i) => {
-    d && d(i);
-  }, [d]), R = r((i) => {
-    e == null || e(i), l && (i.target.value = i.target.value.trim()), t == null || t(i);
-  }, [t, e, l]), b = r((i) => {
-    s == null || s(i);
-  }, [s]), w = _("adyen-pe-input", [`adyen-pe-input--${y}`], p.className, {
-    "adyen-pe-input--invalid": n,
-    "adyen-pe-input--valid": C
-  }, m == null ? void 0 : m.map((i) => `adyen-pe-input--${i}`)), {
-    classNameModifiers: V,
-    uniqueId: j,
-    isInvalid: F,
-    isValid: S,
-    isCollatingErrors: U,
-    ...E
-  } = p;
-  return c(k, {
-    children: [c("input", {
-      id: o,
-      ...E,
-      type: y,
-      className: w,
-      readOnly: I,
-      "aria-describedby": $ ? void 0 : `${o}${h}`,
-      "aria-invalid": n,
-      onInput: N,
-      onBlur: R,
-      onFocus: b,
-      onKeyUp: x,
-      disabled: g,
-      ref: v
-    }), n && f && c("span", {
-      className: "adyen-pe-input__invalid-value",
-      id: `${o}${h}`,
-      children: f
-    })]
-  });
+import { ARIA_ERROR_SUFFIX as u } from "../../../core/Errors/constants.js";
+import k from "classnames";
+import { forwardRef as q } from "../../../external/preact/compat/dist/compat.module.js";
+import { useCallback as r } from "../../../external/preact/hooks/dist/hooks.module.js";
+/* empty css                */
+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;
+  P(p, "onChange") && console.error("Error: Form fields that rely on InputBase may not have an onChange property");
+  const N = r(
+    (a) => {
+      i == null || i(a);
+    },
+    [i]
+  ), R = r(
+    (a) => {
+      d && d(a);
+    },
+    [d]
+  ), b = r(
+    (a) => {
+      e == null || e(a), l && (a.target.value = a.target.value.trim()), t == null || t(a);
+    },
+    [t, e, l]
+  ), x = r(
+    (a) => {
+      s == null || s(a);
+    },
+    [s]
+  ), E = k(
+    "adyen-pe-input",
+    [`adyen-pe-input--${y}`],
+    p.className,
+    {
+      "adyen-pe-input--invalid": m,
+      "adyen-pe-input--valid": C
+    },
+    n == null ? void 0 : n.map((a) => `adyen-pe-input--${a}`)
+  ), { classNameModifiers: V, uniqueId: j, isInvalid: D, isValid: F, isCollatingErrors: S, ..._ } = p;
+  return /* @__PURE__ */ c(w, { children: [
+    /* @__PURE__ */ c(
+      "input",
+      {
+        id: o,
+        ..._,
+        type: y,
+        className: E,
+        readOnly: I,
+        "aria-describedby": $ ? void 0 : `${o}${u}`,
+        "aria-invalid": m,
+        onInput: N,
+        onBlurCapture: b,
+        onFocus: x,
+        onKeyUp: R,
+        disabled: g,
+        ref: v
+      }
+    ),
+    m && f && /* @__PURE__ */ c("span", { className: "adyen-pe-input__invalid-value", id: `${o}${u}`, children: f })
+  ] });
 }
-u.defaultProps = {
+h.defaultProps = {
   type: "text",
   classNameModifiers: [],
   onInput: () => {
   }
 };
-const Q = P(u);
+const Q = q(h);
 export {
   Q as default
 };

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

@@ -1,14 +1,8 @@
-import t from "./InputBase.js";
-import { forwardRef as a } from "../../../external/preact/compat/dist/compat.module.js";
-import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const m = a(function(e, r) {
-  return i(t, {
-    classNameModifiers: e.classNameModifiers,
-    ...e,
-    ref: r,
-    "aria-required": e.required,
-    type: "text"
-  });
+import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import a from "./InputBase.js";
+import { forwardRef as i } from "../../../external/preact/compat/dist/compat.module.js";
+const m = i(function(e, r) {
+  return /* @__PURE__ */ t(a, { classNameModifiers: e.classNameModifiers, ...e, ref: r, "aria-required": e.required, type: "text" });
 });
 export {
   m as default

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

@@ -1,40 +1,43 @@
+import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { memo as n } from "../../../../../external/preact/compat/dist/compat.module.js";
 import { useCallback as a } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { useResponsiveViewport as p, mediaQueries as C } from "../../../../hooks/useResponsiveViewport.js";
-import { renderDefaultSingleSelectionCheckedness as c } from "../components/SelectListItem.js";
-import "./BalanceAccountSelector.scss.js";
-import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { Fragment as d } from "../../../../../external/preact/dist/preact.module.js";
-import S from "../Select.js";
-const m = "adyen-pe-balance-account-selector", _ = `${m}__account-id`, f = `${m}__account-label`, u = n(({
-  activeBalanceAccount: r,
-  balanceAccountSelectionOptions: o,
-  onBalanceAccountSelection: t
-}) => {
-  const l = p(C.down.xs), i = a((e) => s(d, {
-    children: [s("div", {
-      className: e.contentClassName,
-      children: [e.item.name && s("span", {
-        className: f,
-        children: e.item.name
-      }), s("span", {
-        className: _,
-        children: e.item.id
-      })]
-    }), c(e)]
-  }), []);
-  return o && o.length > 1 ? s(S, {
-    popoverClassNameModifiers: [m],
-    onChange: t,
-    filterable: !1,
-    multiSelect: !1,
-    selected: r == null ? void 0 : r.id,
-    withoutCollapseIndicator: !0,
-    items: o,
-    renderListItem: i,
-    showOverlay: l
-  }) : null;
-}), x = u;
+import { useResponsiveViewport as p, mediaQueries as C } from "../../../../../hooks/useResponsiveViewport.js";
+import { renderDefaultSingleSelectionCheckedness as d } from "../components/SelectListItem.js";
+/* empty css                            */
+import { Fragment as _ } from "../../../../../external/preact/dist/preact.module.js";
+import f from "../Select.js";
+const o = "adyen-pe-balance-account-selector", S = `${o}__account-id`, c = `${o}__account-label`, A = n(
+  ({
+    activeBalanceAccount: r,
+    balanceAccountSelectionOptions: m,
+    onBalanceAccountSelection: t
+  }) => {
+    const i = p(C.down.xs), l = a(
+      (e) => /* @__PURE__ */ s(_, { children: [
+        /* @__PURE__ */ s("div", { className: e.contentClassName, children: [
+          e.item.name && /* @__PURE__ */ s("span", { className: c, children: e.item.name }),
+          /* @__PURE__ */ s("span", { className: S, children: e.item.id })
+        ] }),
+        d(e)
+      ] }),
+      []
+    );
+    return m && m.length > 1 ? /* @__PURE__ */ s(
+      f,
+      {
+        popoverClassNameModifiers: [o],
+        onChange: t,
+        filterable: !1,
+        multiSelect: !1,
+        selected: r == null ? void 0 : r.id,
+        withoutCollapseIndicator: !0,
+        items: m,
+        renderListItem: l,
+        showOverlay: i
+      }
+    ) : null;
+  }
+);
 export {
-  x as default
+  A as default
 };

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

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