@adyen/adyen-platform-experience-web 1.0.1 → 1.0.2

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

@@ -1,47 +1,67 @@
-import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import c from "classnames";
 import { memo as N } from "../../../../../external/preact/compat/dist/compat.module.js";
 import E from "../../../SVGIcons/CheckedBox.js";
 import C from "../../../SVGIcons/UncheckedBox.js";
 import d from "../../../SVGIcons/Checkmark.js";
 import { DROPDOWN_ELEMENT_CHECKMARK_CLASS as S, DROPDOWN_ELEMENT_CLASS as D, DROPDOWN_ELEMENT_ACTIVE_CLASS as _, DROPDOWN_ELEMENT_DISABLED_CLASS as p, DROPDOWN_ELEMENT_CONTENT_CLASS as L, DROPDOWN_ELEMENT_ICON_CLASS as O, DROPDOWN_ELEMENT_CHECKBOX_CLASS as f } from "../constants.js";
+import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import u from "../../../Img/Img.js";
 import { Fragment as h } from "../../../../../external/preact/dist/preact.module.js";
 import { boolOrFalse as A } from "../../../../../utils/value/bool.js";
-const T = (e) => e.multiSelect ? /* @__PURE__ */ s("span", { className: f, children: e.selected ? /* @__PURE__ */ s(E, { role: "presentation" }) : /* @__PURE__ */ s(C, { role: "presentation" }) }) : null, M = (e) => e.multiSelect ? null : /* @__PURE__ */ s("span", { className: S, children: e.selected && /* @__PURE__ */ s(d, { role: "presentation" }) }), w = (e) => /* @__PURE__ */ s(h, { children: [
-  T(e),
-  /* @__PURE__ */ s("div", { className: e.contentClassName, children: [
-    e.item.icon && /* @__PURE__ */ s(u, { className: e.iconClassName, alt: e.item.name, src: e.item.icon }),
-    /* @__PURE__ */ s("span", { children: e.item.name })
-  ] }),
-  M(e)
-] }), b = ({ item: e, multiSelect: n, onKeyDown: t, onSelect: r, renderListItem: i, selected: l }) => {
+const T = (e) => e.multiSelect ? s("span", {
+  className: f,
+  children: e.selected ? s(E, {
+    role: "presentation"
+  }) : s(C, {
+    role: "presentation"
+  })
+}) : null, M = (e) => e.multiSelect ? null : s("span", {
+  className: S,
+  children: e.selected && s(d, {
+    role: "presentation"
+  })
+}), w = (e) => s(h, {
+  children: [T(e), s("div", {
+    className: e.contentClassName,
+    children: [e.item.icon && s(u, {
+      className: e.iconClassName,
+      alt: e.item.name,
+      src: e.item.icon
+    }), s("span", {
+      children: e.item.name
+    })]
+  }), M(e)]
+}), b = ({
+  item: e,
+  multiSelect: n,
+  onKeyDown: t,
+  onSelect: r,
+  renderListItem: i,
+  selected: l
+}) => {
   const o = !!e.disabled, m = A(e.disabled) || null, a = c(D, {
     [_]: l,
     [p]: o
   });
-  return /* @__PURE__ */ s(
-    "li",
-    {
-      "aria-disabled": o,
-      "aria-selected": l,
-      className: a,
-      "data-disabled": m,
-      "data-value": e.id,
-      onClick: r,
-      onKeyDown: t,
-      title: e.name,
-      role: "option",
-      tabIndex: -1,
-      children: i({
-        item: e,
-        multiSelect: n,
-        selected: l,
-        contentClassName: L,
-        iconClassName: O
-      })
-    }
-  );
+  return s("li", {
+    "aria-disabled": o,
+    "aria-selected": l,
+    className: a,
+    "data-disabled": m,
+    "data-value": e.id,
+    onClick: r,
+    onKeyDown: t,
+    title: e.name,
+    role: "option",
+    tabIndex: -1,
+    children: i({
+      item: e,
+      multiSelect: n,
+      selected: l,
+      contentClassName: L,
+      iconClassName: O
+    })
+  });
 }, F = N(b);
 export {
   F as default,

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

@@ -1,33 +1,32 @@
 import { useCallback as i, useState as p, useEffect as O } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import { EMPTY_ARRAY as t } from "../../../../../utils/value/constants.js";
-const g = ({ items: f, multiSelect: r, selected: l }) => {
-  const a = i(
-    (c = t) => {
-      const e = t.concat(c ?? t).filter(Boolean), n = f.filter((b) => e.includes(b.id)), o = r ? n : n.slice(0, 1);
-      return o.length ? Object.freeze(o) : t;
-    },
-    [f, r]
-  ), [d, s] = p(a(l)), u = i(
-    (c = t) => {
-      const e = c.filter((n) => f.includes(n));
-      s(e.length ? Object.freeze(e) : t);
-    },
-    [f, s]
-  ), x = i(
-    (c) => {
-      s((e) => {
-        const n = e.indexOf(c);
-        if (n < 0)
-          return Object.freeze((r ? e : t).concat(c));
-        if (!r)
-          return e;
-        const o = [...e];
-        return o.splice(n, 1), o.length ? Object.freeze(o) : t;
-      });
-    },
-    [r, s]
-  );
-  return O(() => s(a(l)), [a, l, s]), { resetSelection: u, select: x, selection: d };
+const g = ({
+  items: f,
+  multiSelect: r,
+  selected: l
+}) => {
+  const a = i((c = t) => {
+    const e = t.concat(c ?? t).filter(Boolean), n = f.filter((b) => e.includes(b.id)), o = r ? n : n.slice(0, 1);
+    return o.length ? Object.freeze(o) : t;
+  }, [f, r]), [d, s] = p(a(l)), u = i((c = t) => {
+    const e = c.filter((n) => f.includes(n));
+    s(e.length ? Object.freeze(e) : t);
+  }, [f, s]), x = i((c) => {
+    s((e) => {
+      const n = e.indexOf(c);
+      if (n < 0)
+        return Object.freeze((r ? e : t).concat(c));
+      if (!r)
+        return e;
+      const o = [...e];
+      return o.splice(n, 1), o.length ? Object.freeze(o) : t;
+    });
+  }, [r, s]);
+  return O(() => s(a(l)), [a, l, s]), {
+    resetSelection: u,
+    select: x,
+    selection: d
+  };
 }, _ = g;
 export {
   _ as default

package/dist/es/components/internal/Image/Image.js

@@ -1,13 +1,26 @@
-import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import i from "classnames";
-import { useImageUrl as p } from "../../../hooks/useImageUrl/useImageUrl.js";
-import { useMemo as c } from "../../../external/preact/hooks/dist/hooks.module.js";
-const f = ({ folder: m = "components/", className: r, alt: s, name: e, extension: o }) => {
-  const a = p({
-    options: c(() => ({ imageFolder: m, extension: o }), [o, m]),
+import t from "classnames";
+import { useImageUrl as i } from "../../../hooks/useImageUrl/useImageUrl.js";
+import { useMemo as p } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+const f = ({
+  folder: m = "components/",
+  className: r,
+  alt: s,
+  name: e,
+  extension: o
+}) => {
+  const a = i({
+    options: p(() => ({
+      imageFolder: m,
+      extension: o
+    }), [o, m]),
     name: e
   });
-  return /* @__PURE__ */ t("img", { className: i("adyen-pe__image", r), alt: s, src: a });
+  return c("img", {
+    className: t("adyen-pe__image", r),
+    alt: s,
+    src: a
+  });
 };
 export {
   f as Image

package/dist/es/components/internal/Img/Img.js

@@ -1,22 +1,38 @@
-import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { useState as p, useRef as N, useEffect as y } from "../../../external/preact/hooks/dist/hooks.module.js";
 import E from "classnames";
 import "./Img.scss.js";
+import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 function L(s) {
-  const { backgroundUrl: a = "", className: m = "", classNameModifiers: c = [], src: l = "", alt: d = "", showOnError: f = !1 } = s, [i, o] = p(!1), r = N(null), u = () => {
+  const {
+    backgroundUrl: a = "",
+    className: m = "",
+    classNameModifiers: c = [],
+    src: l = "",
+    alt: d = "",
+    showOnError: f = !1
+  } = s, [i, o] = p(!1), r = N(null), u = () => {
     o(!0);
   }, g = () => {
     o(f);
-  }, t = E(
-    [m],
-    "adyen-pe-image",
-    { "adyen-pe-image--loaded": i },
-    ...c.map((e) => `adyen-pe-image--${e}`)
-  );
+  }, t = E([m], "adyen-pe-image", {
+    "adyen-pe-image--loaded": i
+  }, ...c.map((e) => `adyen-pe-image--${e}`));
   return y(() => {
     const e = a ? new Image() : r.current;
     e && (e.src = a || l, e.onload = u), o(!!(e != null && e.complete));
-  }, []), a ? /* @__PURE__ */ n("div", { style: { backgroundUrl: a }, ...s, className: t }) : /* @__PURE__ */ n("img", { ...s, alt: d, ref: r, className: t, onError: g });
+  }, []), a ? n("div", {
+    style: {
+      backgroundUrl: a
+    },
+    ...s,
+    className: t
+  }) : n("img", {
+    ...s,
+    alt: d,
+    ref: r,
+    className: t,
+    onError: g
+  });
 }
 export {
   L as default

package/dist/es/components/internal/Modal/Modal.js

@@ -1,93 +1,73 @@
-import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { ButtonVariant as _ } from "../Button/types.js";
-import v from "../SVGIcons/Close.js";
-import g from "../../../core/Context/useCoreContext.js";
-import { useRef as N, useCallback as i, useEffect as k } from "../../../external/preact/hooks/dist/hooks.module.js";
-import c from "classnames";
+import { useClickOutside as w } from "../../../hooks/element/useClickOutside.js";
+import { useResponsiveViewport as h, mediaQueries as _ } from "../../external/TransactionsOverview/hooks/useResponsiveViewport.js";
+import { ButtonVariant as v } from "../Button/types.js";
+import g from "../SVGIcons/Close.js";
+import E from "../../../core/Context/useCoreContext.js";
+import { useCallback as N, useEffect as k } from "../../../external/preact/hooks/dist/hooks.module.js";
+import m from "classnames";
 import "./Modal.scss.js";
-import E from "../Button/Button.js";
-import { Fragment as x } from "../../../external/preact/dist/preact.module.js";
-function B(r) {
-  return !(!r || !("nodeType" in r));
-}
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import x from "../Button/Button.js";
+import { Fragment as B } from "../../../external/preact/dist/preact.module.js";
 function K({
-  title: r,
-  children: u,
-  classNameModifiers: f = [],
-  isOpen: e,
-  onClose: t,
-  isDismissible: d = !0,
-  headerWithBorder: y = !0,
-  size: n = "fluid",
+  title: n,
+  children: i,
+  classNameModifiers: p = [],
+  isOpen: a,
+  onClose: d,
+  isDismissible: o = !0,
+  headerWithBorder: c = !0,
+  size: r = "fluid",
   ...s
 }) {
-  const l = N(null), { i18n: h } = g(), w = i(
-    (o) => {
-      var p;
-      d && e && B(o.target) && !((p = l == null ? void 0 : l.current) != null && p.contains(o.target)) && t();
-    },
-    [d, e, t]
-  ), m = i(
-    (o) => {
-      o.key === "Escape" && e && d && t();
-    },
-    [e, d, t]
-  );
-  return k(() => (e ? window.addEventListener("keydown", m) : window.removeEventListener("keydown", m), () => window.removeEventListener("keydown", m)), [e, m]), /* @__PURE__ */ a(x, { children: e && /* @__PURE__ */ a(
-    "div",
-    {
-      className: c(
-        "adyen-pe-modal-wrapper",
-        f.map((o) => `adyen-pe-modal-wrapper--${o}`),
-        { "adyen-pe-modal-wrapper--open": e, "adyen-pe-modal-wrapper--dismissible": d }
-      ),
+  const u = h(_.down.xs), {
+    i18n: f
+  } = E(), y = w(null, d), l = N((t) => {
+    t.key === "Escape" && a && o && d();
+  }, [a, o, d]);
+  return k(() => (a ? window.addEventListener("keydown", l) : window.removeEventListener("keydown", l), () => window.removeEventListener("keydown", l)), [a, l]), e(B, {
+    children: a && e("div", {
+      className: m("adyen-pe-modal-wrapper", p.map((t) => `adyen-pe-modal-wrapper--${t}`), {
+        "adyen-pe-modal-wrapper--open": a,
+        "adyen-pe-modal-wrapper--dismissible": o
+      }),
       role: "dialog",
       "aria-modal": "true",
       "aria-hidden": !open,
-      onClick: w,
       ...s,
-      children: /* @__PURE__ */ a(
-        "div",
-        {
-          className: c("adyen-pe-modal", {
-            "adyen-pe-modal--fluid": n === "fluid",
-            "adyen-pe-modal--small": n === "small",
-            "adyen-pe-modal--large": n === "large",
-            "adyen-pe-modal--extra-large": n === "extra-large",
-            "adyen-pe-modal--full-screen": n === "full-screen"
+      children: e("div", {
+        className: m("adyen-pe-modal", {
+          "adyen-pe-modal--fluid": r === "fluid",
+          "adyen-pe-modal--small": r === "small",
+          "adyen-pe-modal--large": r === "large",
+          "adyen-pe-modal--extra-large": r === "extra-large",
+          "adyen-pe-modal--full-screen": r === "full-screen" || u
+        }),
+        ref: y,
+        children: [e("div", {
+          className: m("adyen-pe-modal__header", {
+            "adyen-pe-modal__header--with-title": n,
+            "adyen-pe-modal__header--with-border-bottom": c
           }),
-          ref: l,
-          children: [
-            /* @__PURE__ */ a(
-              "div",
-              {
-                className: c("adyen-pe-modal__header", {
-                  "adyen-pe-modal__header--with-title": r,
-                  "adyen-pe-modal__header--with-border-bottom": y
-                }),
-                children: [
-                  r && /* @__PURE__ */ a("div", { className: "adyen-pe-modal__header__title", children: r }),
-                  d && /* @__PURE__ */ a(
-                    E,
-                    {
-                      onClick: t,
-                      variant: _.TERTIARY,
-                      iconButton: !0,
-                      classNameModifiers: ["circle"],
-                      className: "adyen-pe-modal__header-icon",
-                      "aria-label": h.get("dismiss"),
-                      children: /* @__PURE__ */ a(v, {})
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ a("div", { className: "adyen-pe-modal__content", children: u })
-          ]
-        }
-      )
-    }
-  ) });
+          children: [n && e("div", {
+            className: "adyen-pe-modal__header__title",
+            children: n
+          }), o && e(x, {
+            onClick: d,
+            variant: v.TERTIARY,
+            iconButton: !0,
+            classNameModifiers: ["circle"],
+            className: "adyen-pe-modal__header-icon",
+            "aria-label": f.get("dismiss"),
+            children: e(g, {})
+          })]
+        }), e("div", {
+          className: "adyen-pe-modal__content",
+          children: i
+        })]
+      })
+    })
+  });
 }
 export {
   K as default

package/dist/es/components/internal/Modal/ModalContent/ModalContent.js

@@ -1,15 +1,34 @@
-import { jsx as e } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { useMemo as i } from "../../../../external/preact/hooks/dist/hooks.module.js";
 import s from "../../DataOverviewDetails/DataOverviewDetails.js";
 import "./ModalContent.scss.js";
+import { jsx as e } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { Fragment as n } from "../../../../external/preact/dist/preact.module.js";
 import { hasOwnProperty as m } from "../../../../utils/struct/property.js";
 const a = {
   base: "adyen-pe-modal-content"
 }, l = (o) => m(o, "id");
-function v({ type: o, data: r }) {
-  const t = i(() => o === "payout" ? { ...r, type: "payout" } : l(r) ? { data: r, type: o } : { id: r, type: o }, [r, o]);
-  return /* @__PURE__ */ e(n, { children: t && /* @__PURE__ */ e("div", { className: a.base, children: /* @__PURE__ */ e(s, { ...t }) }) });
+function v({
+  type: o,
+  data: r
+}) {
+  const t = i(() => o === "payout" ? {
+    ...r,
+    type: "payout"
+  } : l(r) ? {
+    data: r,
+    type: o
+  } : {
+    id: r,
+    type: o
+  }, [r, o]);
+  return e(n, {
+    children: t && e("div", {
+      className: a.base,
+      children: e(s, {
+        ...t
+      })
+    })
+  });
 }
 export {
   v as default

package/dist/es/components/internal/Pagination/Pagination.js

@@ -1,4 +1,3 @@
-import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { ButtonVariant as s } from "../Button/types.js";
 import b from "../../../core/Context/useCoreContext.js";
 import h from "classnames";
@@ -6,66 +5,74 @@ import { useMemo as v, useCallback as C } from "../../../external/preact/hooks/d
 import "./Pagination.scss.js";
 import _ from "../SVGIcons/ChevronLeft.js";
 import N from "../SVGIcons/ChevronRight.js";
+import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import R from "../FormFields/Select/Select.js";
 import d from "../Button/Button.js";
 import { isNullish as T } from "../../../utils/value/is.js";
 import { EMPTY_ARRAY as c } from "../../../utils/value/constants.js";
-function q({ next: m, hasNext: n, hasPrev: o, page: p, prev: f, limit: u, limitOptions: t, onLimitSelection: i }) {
-  const { i18n: r } = b(), l = v(
-    () => t && Object.freeze(t.map((e) => ({ id: `${e}`, name: `${e}` }))),
-    [t]
-  ), g = C(
-    ({ target: e }) => {
-      T(e == null ? void 0 : e.value) || i == null || i(+e.value);
-    },
-    [i]
-  );
-  return /* @__PURE__ */ a("div", { "aria-label": r.get("paginatedNavigation"), className: `adyen-pe-pagination ${h({})}`, children: [
-    /* @__PURE__ */ a("div", { className: "adyen-pe-pagination__context", children: [
-      /* @__PURE__ */ a("span", { children: [
-        r.get("pagination.showing"),
-        " ",
-        p
-      ] }),
-      l && i && /* @__PURE__ */ a("div", { className: "adyen-pe-pagination__limit-selector", children: /* @__PURE__ */ a(
-        R,
-        {
+function q({
+  next: m,
+  hasNext: n,
+  hasPrev: o,
+  page: p,
+  prev: f,
+  limit: u,
+  limitOptions: t,
+  onLimitSelection: i
+}) {
+  const {
+    i18n: r
+  } = b(), l = v(() => t && Object.freeze(t.map((e) => ({
+    id: `${e}`,
+    name: `${e}`
+  }))), [t]), g = C(({
+    target: e
+  }) => {
+    T(e == null ? void 0 : e.value) || i == null || i(+e.value);
+  }, [i]);
+  return a("div", {
+    "aria-label": r.get("paginatedNavigation"),
+    className: `adyen-pe-pagination ${h({})}`,
+    children: [a("div", {
+      className: "adyen-pe-pagination__context",
+      children: [a("span", {
+        children: [r.get("pagination.showing"), " ", p]
+      }), l && i && a("div", {
+        className: "adyen-pe-pagination__limit-selector",
+        children: a(R, {
           setToTargetWidth: !0,
           filterable: !1,
           multiSelect: !1,
           items: l,
           onChange: g,
           selected: `${u ?? ""}`
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ a("div", { className: "adyen-pe-pagination__controls", children: [
-      /* @__PURE__ */ a(
-        d,
-        {
-          "aria-label": r.get("pagination.previousPage"),
-          variant: s.TERTIARY,
-          disabled: !o,
-          iconButton: !0,
-          classNameModifiers: ["circle"].concat(o ? c : "disabled"),
-          onClick: f,
-          children: /* @__PURE__ */ a(_, { disabled: !o })
-        }
-      ),
-      /* @__PURE__ */ a(
-        d,
-        {
-          "aria-label": r.get("pagination.nextPage"),
-          variant: s.TERTIARY,
-          disabled: !n,
-          iconButton: !0,
-          classNameModifiers: ["circle"].concat(n ? c : "disabled"),
-          onClick: m,
-          children: /* @__PURE__ */ a(N, { disabled: !n })
-        }
-      )
-    ] })
-  ] });
+        })
+      })]
+    }), a("div", {
+      className: "adyen-pe-pagination__controls",
+      children: [a(d, {
+        "aria-label": r.get("pagination.previousPage"),
+        variant: s.TERTIARY,
+        disabled: !o,
+        iconButton: !0,
+        classNameModifiers: ["circle"].concat(o ? c : "disabled"),
+        onClick: f,
+        children: a(_, {
+          disabled: !o
+        })
+      }), a(d, {
+        "aria-label": r.get("pagination.nextPage"),
+        variant: s.TERTIARY,
+        disabled: !n,
+        iconButton: !0,
+        classNameModifiers: ["circle"].concat(n ? c : "disabled"),
+        onClick: m,
+        children: a(N, {
+          disabled: !n
+        })
+      })]
+    })]
+  });
 }
 export {
   q as default

package/dist/es/components/internal/Pagination/hooks/useCursorPagination.js

@@ -5,13 +5,20 @@ const C = (e) => i(e.next), h = (e) => i(e.prev), l = (e, u) => {
   const c = m(() => {
     const o = [], P = () => o.length, a = () => {
       o.length = 0;
-    }, g = (t) => ({ cursor: o[t - 1] }), r = (t, s) => {
+    }, g = (t) => ({
+      cursor: o[t - 1]
+    }), r = (t, s) => {
       const n = o[s - 1];
       (s === 1 || s === (o.length || 1) + 1) && f(n) && (o[s - 1] = t ? decodeURIComponent(t) : void 0);
     };
-    return { getPageCount: P, getPageParams: g, resetPageCount: a, updatePagination: (t, s, n) => {
-      C(n) && r(n.next, t + 1), h(n) && r(n.prev, t - 1);
-    } };
+    return {
+      getPageCount: P,
+      getPageParams: g,
+      resetPageCount: a,
+      updatePagination: (t, s, n) => {
+        C(n) && r(n.next, t + 1), h(n) && r(n.prev, t - 1);
+      }
+    };
   }, []);
   return d(c, e, u);
 }, U = l;

package/dist/es/components/internal/Pagination/hooks/useOffsetPagination.js

@@ -3,11 +3,18 @@ import r from "./usePagination.js";
 const u = (e) => e.next, P = (e, s) => {
   const g = i(() => {
     let t = 0;
-    return { getPageCount: () => t, getPageParams: (a, n) => ({ offset: (a - 1) * n }), resetPageCount: () => {
-      t = 0;
-    }, updatePagination: (a, n, o) => {
-      u(o) && o.next && (t = Math.max(t, a + 1));
-    } };
+    return {
+      getPageCount: () => t,
+      getPageParams: (a, n) => ({
+        offset: (a - 1) * n
+      }),
+      resetPageCount: () => {
+        t = 0;
+      },
+      updatePagination: (a, n, o) => {
+        u(o) && o.next && (t = Math.max(t, a + 1));
+      }
+    };
   }, []);
   return r(g, e, s);
 }, d = P;