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

package/dist/es/components/internal/FormFields/FileInput/components/Dropzone.js

@@ -1,142 +1,157 @@
 import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import x from "classnames";
-import { useState as h, useMemo as Q, useCallback as S } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import N from "../../../Typography/Typography.js";
-import { useTrackedRef as X } from "../../../../../hooks/useTrackedRef.js";
-import Z from "../../../../../core/Context/useCoreContext.js";
-import { DEFAULT_MAX_FILE_SIZE as A, DEFAULT_FILE_TYPES as H, validationErrors as i, BASE_CLASS as t } from "../constants.js";
-import { TypographyVariant as O, TypographyElement as $ } from "../../../Typography/types.js";
+import w from "classnames";
+import { useState as v, useMemo as H, useCallback as A } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import O from "../../../Typography/Typography.js";
+import { useTrackedRef as J } from "../../../../../hooks/useTrackedRef.js";
+import K from "../../../../../core/Context/useCoreContext.js";
+import { DEFAULT_MAX_FILE_SIZE as R, DEFAULT_FILE_TYPES as ee, validationErrors as d, BASE_CLASS as n } from "../constants.js";
+import { TypographyVariant as $, TypographyElement as M } from "../../../Typography/types.js";
 /* empty css                */
-import { fixedForwardRef as J } from "../../../../../utils/preact/fixedForwardRef.js";
-import { getUploadedFilesFromSource as K } from "../../../../../utils/file/upload.js";
-import { Icon as v } from "../../../Icon/Icon.js";
-import { Fragment as ee } from "../../../../../external/preact/dist/preact.module.js";
-import { uniqueId as re } from "../../../../../utils/random/uniqueId.js";
-import { isFunction as R } from "../../../../../utils/value/is.js";
+import { fixedForwardRef as re } from "../../../../../utils/preact/fixedForwardRef.js";
+import { getUploadedFilesFromSource as te } from "../../../../../utils/file/upload.js";
+import { Icon as y } from "../../../Icon/Icon.js";
+import { Fragment as oe } from "../../../../../external/preact/dist/preact.module.js";
+import { uniqueId as ae } from "../../../../../utils/random/uniqueId.js";
+import { isFunction as x } from "../../../../../utils/value/is.js";
 const o = {
-  dropzone: `${t}__dropzone`,
-  dropzoneDisabled: `${t}__dropzone--disabled`,
-  dropzoneDragOver: `${t}__dropzone--dragover`,
-  dropzoneError: `${t}__dropzone--error`,
-  label: `${t}__label`,
-  labelDefault: `${t}__label-default-content`,
-  labelIcon: `${t}__label-icon`,
-  labelText: `${t}__label-text`,
-  error: `${t}__error`,
-  errorIcon: `${t}__error-icon`,
-  errorText: `${t}__error-text`
-}, ge = J((C, Y) => {
+  dropzone: `${n}__dropzone`,
+  dropzoneDisabled: `${n}__dropzone--disabled`,
+  dropzoneDragOver: `${n}__dropzone--dragover`,
+  dropzoneError: `${n}__dropzone--error`,
+  label: `${n}__label`,
+  labelDefault: `${n}__label-default-content`,
+  labelIcon: `${n}__label-icon`,
+  labelText: `${n}__label-text`,
+  error: `${n}__error`,
+  errorIcon: `${n}__error-icon`,
+  errorText: `${n}__error-text`
+}, Fe = re((C, Y) => {
   const {
-    id: F,
-    name: f,
+    id: D,
+    name: g,
     children: q,
-    disabled: s = !1,
-    required: w = !1,
-    maxFileSize: c = A,
-    allowedFileTypes: _ = H,
-    mapError: I,
-    uploadFiles: D
-  } = C, { i18n: y } = Z(), [p, M] = h(""), [m, b] = h(), [V, E] = h(!1), u = !!p, B = f == null ? void 0 : f.trim(), L = Q(() => F || re(), [F]), g = X(Y), P = (e) => {
-    var n;
-    Array.from(((n = e.dataTransfer) == null ? void 0 : n.types) ?? []).some((l) => l === "Files") && (e.preventDefault(), E(!0));
-  }, k = (e) => {
-    e.preventDefault(), E(!1);
-  }, U = (e) => {
-    e.preventDefault(), E(!1), z(e.dataTransfer);
+    disabled: c = !1,
+    required: P = !1,
+    maxDimensions: t,
+    maxFileSize: m = R,
+    allowedFileTypes: E = ee,
+    mapError: L,
+    uploadFiles: b
+  } = C, { i18n: S } = K(), [f, U] = v(""), [h, z] = v(), [V, I] = v(!1), _ = !!f, B = g == null ? void 0 : g.trim(), N = H(() => D || ae(), [D]), F = J(Y), k = (e) => {
+    var i;
+    Array.from(((i = e.dataTransfer) == null ? void 0 : i.types) ?? []).some((s) => s === "Files") && (e.preventDefault(), I(!0));
+  }, X = (e) => {
+    e.preventDefault(), I(!1);
+  }, j = (e) => {
+    e.preventDefault(), I(!1), T(e.dataTransfer);
   }, G = (e) => {
-    m && b(void 0), z(e.target);
+    h && z(void 0), T(e.target);
   }, W = async (e) => {
     var r;
     e.target !== document.activeElement && ((r = e.target) == null || r.checkValidity());
-  }, j = async (e) => {
-    !p && e.target.validity.valueMissing && d(i.FILE_REQUIRED);
-  }, d = S(
+  }, Q = async (e) => {
+    !f && e.target.validity.valueMissing && p(d.FILE_REQUIRED);
+  }, p = A(
     (e) => {
-      const r = g.current;
+      const r = F.current;
       if (r) {
-        const n = r.required;
-        r.required = !1, r.setCustomValidity(e), M(r.validationMessage ?? ""), r.required = n;
+        const i = r.required;
+        r.required = !1, r.setCustomValidity(e), U(r.validationMessage ?? ""), r.required = i;
       }
     },
-    [g]
-  ), z = S(
-    (e) => {
-      const r = K(e);
+    [F]
+  ), Z = async (e) => new Promise((r, i) => {
+    const s = new Image(), l = URL.createObjectURL(e);
+    s.src = l, s.onerror = i, s.onload = function() {
+      r({ width: s.width, height: s.height });
+    };
+  }), T = A(
+    async (e) => {
+      const r = te(e);
       if (r.length > 1)
-        return d(i.TOO_MANY_FILES);
+        return p(d.TOO_MANY_FILES);
       try {
-        const n = r.filter((l) => {
-          if (!_.includes(l.type))
-            throw i.DISALLOWED_FILE_TYPE;
-          const T = R(c) ? c(l.type) ?? A : c;
-          if (l.size > T)
-            throw b({ type: l.type, limit: T }), i.VERY_LARGE_FILE;
+        const s = (await Promise.all(
+          r.map(async (l) => {
+            if (!t || !(t != null && t.width) || !(t != null && t.height)) return l;
+            const u = await Z(l);
+            if ((t == null ? void 0 : t.width) !== u.width || (t == null ? void 0 : t.height) !== u.height)
+              throw d.MAX_DIMENSIONS;
+            return l;
+          })
+        )).filter((l) => {
+          if (!E.includes(l.type))
+            throw d.DISALLOWED_FILE_TYPE;
+          const u = x(m) ? m(l.type) ?? R : m;
+          if (l.size > u)
+            throw z({ type: l.type, limit: u }), d.VERY_LARGE_FILE;
           return !0;
         });
-        d(""), D(n);
-      } catch (n) {
-        switch (n) {
-          case i.DISALLOWED_FILE_TYPE:
-          case i.VERY_LARGE_FILE:
-            return d(n);
+        p(""), b(s);
+      } catch (i) {
+        switch (i) {
+          case d.DISALLOWED_FILE_TYPE:
+          case d.VERY_LARGE_FILE:
+          case d.MAX_DIMENSIONS:
+            return p(i);
         }
       }
     },
-    [_, c, d, D]
+    [E, m, p, b, t]
   );
-  return /* @__PURE__ */ a(ee, { children: [
+  return /* @__PURE__ */ a(oe, { children: [
     /* @__PURE__ */ a(
       "div",
       {
         role: "region",
-        className: x(o.dropzone, {
-          [o.dropzoneDisabled]: s,
+        className: w(o.dropzone, {
+          [o.dropzoneDisabled]: c,
           [o.dropzoneDragOver]: V,
-          [o.dropzoneError]: u
+          [o.dropzoneError]: _
         }),
-        onDragOver: s ? void 0 : P,
-        onDragLeave: s ? void 0 : k,
-        onDrop: s ? void 0 : U,
+        onDragOver: c ? void 0 : k,
+        onDragLeave: c ? void 0 : X,
+        onDrop: c ? void 0 : j,
         children: [
           /* @__PURE__ */ a(
             "input",
             {
               type: "file",
               className: "adyen-pe-visually-hidden",
-              id: L,
-              ref: g,
+              id: N,
+              ref: F,
               name: B,
-              disabled: s,
-              required: w,
-              accept: String(_),
+              disabled: c,
+              required: P,
+              accept: String(E),
               onBlur: W,
               onChange: G,
-              onInvalid: j,
-              "aria-invalid": u,
+              onInvalid: Q,
+              "aria-invalid": _,
               "data-testId": "dropzone-input"
             }
           ),
-          /* @__PURE__ */ a("label", { className: o.label, htmlFor: L, children: q ?? /* @__PURE__ */ a("div", {
-            className: x(o.labelDefault),
+          /* @__PURE__ */ a("label", { className: o.label, htmlFor: N, children: q ?? /* @__PURE__ */ a("div", {
+            className: w(o.labelDefault),
             // prettier-ignore
             children: [
-              u ? /* @__PURE__ */ a(v, { name: "warning-filled", className: o.labelIcon }) : /* @__PURE__ */ a(v, { name: "upload", className: o.labelIcon }),
-              /* @__PURE__ */ a(N, { className: o.labelText, el: $.SPAN, variant: O.BODY, stronger: !0, children: y.get("common.inputs.file.labels.default") })
+              _ ? /* @__PURE__ */ a(y, { name: "warning-filled", className: o.labelIcon }) : /* @__PURE__ */ a(y, { name: "upload", className: o.labelIcon }),
+              /* @__PURE__ */ a(O, { className: o.labelText, el: M.SPAN, variant: $.BODY, stronger: !0, children: S.get("common.inputs.file.labels.default") })
             ]
           }) })
         ]
       }
     ),
-    u && /* @__PURE__ */ a("div", { className: o.error, children: [
-      /* @__PURE__ */ a(v, { name: "cross-circle-fill", className: o.errorIcon }),
-      /* @__PURE__ */ a(N, { className: o.errorText, el: $.SPAN, variant: O.BODY, children: R(I) ? I(
-        p,
-        m ? { size: m.limit, type: m.type } : void 0
-      ) : y.get(p) })
+    _ && /* @__PURE__ */ a("div", { className: o.error, children: [
+      /* @__PURE__ */ a(y, { name: "cross-circle-fill", className: o.errorIcon }),
+      /* @__PURE__ */ a(O, { className: o.errorText, el: M.SPAN, variant: $.BODY, children: x(L) ? L(
+        f,
+        h ? { size: h.limit, type: h.type } : void 0
+      ) : S.get(f) })
     ] })
   ] });
 });
 export {
-  ge as Dropzone,
-  ge as default
+  Fe as Dropzone,
+  Fe as default
 };

package/dist/es/components/internal/FormFields/FileInput/constants.js

@@ -2,7 +2,9 @@ const _ = "adyen-pe-file-input", e = ["application/pdf", "image/jpeg", "image/jp
   DISALLOWED_FILE_TYPE: "disallowed_file_type",
   FILE_REQUIRED: "file_required",
   TOO_MANY_FILES: "too_many_files",
-  VERY_LARGE_FILE: "very_large_file"
+  VERY_LARGE_FILE: "very_large_file",
+  MAX_FILE_SIZE: "max_file_size",
+  MAX_DIMENSIONS: "max_dimensions"
 };
 export {
   _ as BASE_CLASS,

package/dist/es/components/internal/FormFields/FileInput/helpers/defaultMapError.js

@@ -0,0 +1,20 @@
+import { validationErrors as r } from "../constants.js";
+const s = (e) => {
+  switch (e) {
+    case r.DISALLOWED_FILE_TYPE:
+      return "common.inputs.file.errors.disallowedType";
+    case r.FILE_REQUIRED:
+      return "common.inputs.file.errors.required";
+    case r.TOO_MANY_FILES:
+      return "common.inputs.file.errors.tooMany";
+    case r.VERY_LARGE_FILE:
+      return "common.inputs.file.errors.tooLarge";
+    case r.MAX_DIMENSIONS:
+      return "common.inputs.file.errors.maxDimensions";
+  }
+  return "common.inputs.file.errors.default";
+};
+export {
+  s as default,
+  s as defaultMapErrors
+};

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

@@ -1,80 +1,148 @@
-import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { ARIA_ERROR_SUFFIX as y } from "../../../core/Errors/constants.js";
-import V from "classnames";
-import { forwardRef as k } from "../../../external/preact/compat/dist/compat.module.js";
-import { useCallback as a } from "../../../external/preact/hooks/dist/hooks.module.js";
-import { filterDisallowedCharacters as A } from "./utils.js";
+import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { ARIA_ERROR_SUFFIX as Z } from "../../../core/Errors/constants.js";
+import T from "classnames";
+import { forwardRef as D } from "../../../external/preact/compat/dist/compat.module.js";
+import { useCallback as t } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { filterDisallowedCharacters as K } from "./utils.js";
 /* empty css                */
-import { Fragment as O } from "../../../external/preact/dist/preact.module.js";
-import { hasOwnProperty as j } from "../../../utils/struct/property.js";
-function v({ onInput: t, onKeyUp: n, trimOnBlur: u, onBlurHandler: e, onBlur: s, onFocusHandler: p, errorMessage: h, onKeyDown: r, ...d }, C) {
-  const { classNameModifiers: l, isInvalid: c, isValid: I, readonly: $ = !1, type: m, uniqueId: f, isCollatingErrors: g, disabled: N } = d;
-  j(d, "onChange") && console.error("Error: Form fields that rely on InputBase may not have an onChange property");
-  const R = a(
-    (i) => {
-      t == null || t(i);
+import { ButtonVariant as U } from "../Button/types.js";
+import { FieldError as B } from "./FieldError/FieldError.js";
+import H from "./Select/Select.js";
+import { Fragment as w } from "../../../external/preact/dist/preact.module.js";
+import { hasOwnProperty as aa } from "../../../utils/struct/property.js";
+function q({
+  onInput: s,
+  onKeyUp: h,
+  trimOnBlur: C,
+  onBlurHandler: l,
+  onBlur: r,
+  onFocusHandler: n,
+  errorMessage: N,
+  iconBeforeSlot: y,
+  iconAfterSlot: v,
+  dropdown: e,
+  dropdownPosition: E = "start",
+  onDropdownInput: c,
+  onKeyDown: m,
+  onUpdateDropdown: u,
+  ...p
+}, A) {
+  const { classNameModifiers: _, isInvalid: f, isValid: k, readonly: R = !1, type: d, uniqueId: g, isCollatingErrors: o, disabled: P } = p;
+  aa(p, "onChange") && console.error("Error: Form fields that rely on InputBase may not have an onChange property");
+  const j = t(
+    (a) => {
+      s == null || s(a);
     },
-    [t]
-  ), b = a(
-    (i) => {
-      n && n(i);
+    [s]
+  ), M = t(
+    (a) => {
+      h && h(a);
     },
-    [n]
-  ), x = a(
-    (i) => {
-      e == null || e(i), u && (i.target.value = i.target.value.trim()), s == null || s(i);
+    [h]
+  ), X = t(
+    (a) => {
+      l == null || l(a), C && (a.target.value = a.target.value.trim()), r == null || r(a);
+    },
+    [r, l, C]
+  ), Y = t(
+    (a) => {
+      n == null || n(a);
     },
-    [s, e, u]
-  ), E = a(
-    (i) => {
-      p == null || p(i);
+    [n]
+  ), I = t(
+    (a) => {
+      var x;
+      const $ = (x = a.target) == null ? void 0 : x.value;
+      c == null || c($), e && (u == null || u({ ...e, value: $ }));
     },
-    [p]
-  ), _ = V(
+    [e, c, u]
+  ), z = T(
     "adyen-pe-input",
-    [`adyen-pe-input--${m}`],
-    d.className,
+    [`adyen-pe-input--${d}`],
+    p.className,
     {
-      "adyen-pe-input--invalid": c,
-      "adyen-pe-input--valid": I
+      "adyen-pe-input--invalid": f,
+      "adyen-pe-input--valid": k
     },
-    l == null ? void 0 : l.map((i) => `adyen-pe-input--${i}`)
-  ), q = a(
-    (i) => {
-      A({ event: i, inputType: m, onValidInput: () => r == null ? void 0 : r(i) });
+    _ == null ? void 0 : _.map((a) => `adyen-pe-input--${a}`)
+  ), G = t(
+    (a) => {
+      K({ event: a, inputType: d, onValidInput: () => m == null ? void 0 : m(a) });
     },
-    [m, r]
-  ), { classNameModifiers: w, uniqueId: F, isInvalid: S, isValid: T, isCollatingErrors: U, ...P } = d;
-  return /* @__PURE__ */ o(O, { children: [
-    /* @__PURE__ */ o(
-      "input",
+    [d, m]
+  ), {
+    classNameModifiers: ea,
+    uniqueId: ia,
+    isInvalid: ta,
+    isValid: sa,
+    isCollatingErrors: la,
+    autoFocus: ra,
+    autofocus: na,
+    ...J
+  } = p, L = y || v, b = !!e && e.items.length > 0, Q = b && E === "start", S = b && E === "end", W = L || b, V = R || (e == null ? void 0 : e.readonly), F = /* @__PURE__ */ i(
+    "input",
+    {
+      id: g,
+      ...J,
+      type: d,
+      className: z,
+      readOnly: R,
+      "aria-describedby": o ? void 0 : `${g}${Z}`,
+      "aria-invalid": f,
+      onInput: j,
+      onBlurCapture: X,
+      onFocus: Y,
+      onKeyDown: G,
+      onKeyUp: M,
+      disabled: P,
+      ref: A,
+      autoFocus: !1
+    }
+  ), O = t(
+    () => e ? /* @__PURE__ */ i(
+      H,
+      {
+        name: e.name,
+        buttonVariant: U.TERTIARY,
+        items: e.items,
+        selected: e.value,
+        onChange: I,
+        readonly: V,
+        filterable: e.filterable,
+        "aria-label": e["aria-label"],
+        classNameModifiers: ["input-field"],
+        isCollatingErrors: o,
+        disableToggleFocusOnClose: !0
+      }
+    ) : null,
+    [e, I, o, V]
+  );
+  return /* @__PURE__ */ i(w, { children: [
+    W ? /* @__PURE__ */ i(
+      "div",
       {
-        id: f,
-        ...P,
-        onKeyDown: q,
-        type: m,
-        className: _,
-        readOnly: $,
-        "aria-describedby": g ? void 0 : `${f}${y}`,
-        "aria-invalid": c,
-        onInput: R,
-        onBlurCapture: x,
-        onFocus: E,
-        onKeyUp: b,
-        disabled: N,
-        ref: C
+        className: T("adyen-pe-input__container", {
+          "adyen-pe-input--invalid": f
+        }),
+        children: [
+          Q && /* @__PURE__ */ i("div", { role: "presentation", className: "adyen-pe-input__dropdown adyen-pe-input__dropdown--start", children: O() }),
+          y && /* @__PURE__ */ i("span", { className: "adyen-pe-input__slot-before", children: y }),
+          F,
+          v && /* @__PURE__ */ i("span", { className: "adyen-pe-input__slot-after", children: v }),
+          S && /* @__PURE__ */ i("div", { role: "presentation", className: "adyen-pe-input__dropdown adyen-pe-input__dropdown--end", children: O() })
+        ]
       }
-    ),
-    c && h && /* @__PURE__ */ o("span", { className: "adyen-pe-input__invalid-value", id: `${f}${y}`, children: h })
+    ) : F,
+    f && N && /* @__PURE__ */ i(B, { id: g, errorMessage: N })
   ] });
 }
-v.defaultProps = {
+q.defaultProps = {
   type: "text",
   classNameModifiers: [],
   onInput: () => {
   }
 };
-const Z = k(v);
+const ba = D(q);
 export {
-  Z as default
+  ba as default
 };