@adyen/adyen-platform-experience-web 0.1.2 → 1.0.0-beta

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

@@ -1,23 +1,37 @@
-import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useState as p, useRef as N, useEffect as h } from "../../../external/preact/hooks/dist/hooks.module.js";
-import y from "classnames";
-import "./Img.scss.js";
-function L(s) {
-  const { backgroundUrl: a = "", className: c = "", classNameModifiers: m = [], src: l = "", alt: f = "", showOnError: d = !1 } = s, [i, o] = p(!1), r = N(null), u = () => {
-    o(!0);
-  }, g = () => {
-    o(d);
-  }, t = y(
-    [c],
-    "adyen-fp-image",
-    { "adyen-fp-image--loaded": i },
-    ...m.map((e) => `adyen-fp-image--${e}`)
+import '../../../../Img.css';
+import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
+import { h, _, p } from "../../../../hooks.module-8565d716.mjs";
+import cx from "classnames";
+const Img$1 = "";
+function Img(props) {
+  const { backgroundUrl = "", className = "", classNameModifiers = [], src = "", alt = "", showOnError = false } = props;
+  const [loaded, setLoaded] = h(false);
+  const imageRef = _(null);
+  const handleLoad = () => {
+    setLoaded(true);
+  };
+  const handleError = () => {
+    setLoaded(showOnError);
+  };
+  const classNames = cx(
+    [className],
+    "adyen-pe-image",
+    { "adyen-pe-image--loaded": loaded },
+    ...classNameModifiers.map((modifier) => `adyen-pe-image--${modifier}`)
   );
-  return h(() => {
-    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: f, ref: r, className: t, onError: g });
+  p(() => {
+    const image = backgroundUrl ? new Image() : imageRef.current;
+    if (image) {
+      image.src = backgroundUrl || src;
+      image.onload = handleLoad;
+    }
+    setLoaded(!!(image == null ? void 0 : image.complete));
+  }, []);
+  if (backgroundUrl) {
+    return /* @__PURE__ */ o("div", { style: { backgroundUrl }, ...props, className: classNames });
+  }
+  return /* @__PURE__ */ o("img", { ...props, alt, ref: imageRef, className: classNames, onError: handleError });
 }
 export {
-  L as default
+  Img as default
 };

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

@@ -0,0 +1,4 @@
+import { default as default2 } from "./Img.js";
+export {
+  default2 as default
+};

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

@@ -1,93 +1,105 @@
-import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import s from "../Button/Button.js";
-import { ButtonVariant as _ } from "../Button/types.js";
-import g from "../../../core/Context/useCoreContext.js";
-import { useRef as L, useCallback as c, useEffect as k } from "../../../external/preact/hooks/dist/hooks.module.js";
-import m from "classnames";
-import "./Modal.scss.js";
-import { Fragment as C } from "../../../external/preact/dist/preact.module.js";
-function x(d) {
-  return !(!d || !("nodeType" in d));
+import '../../../../Modal.css';
+import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
+import Button from "../Button/Button.js";
+import { B as ButtonVariant } from "../../../../types-7ad6576a.mjs";
+import Close from "../SVGIcons/Close.js";
+import useCoreContext from "../../../core/Context/useCoreContext.js";
+import { _, T, p } from "../../../../hooks.module-8565d716.mjs";
+import cx from "classnames";
+import { k } from "../../../../preact.module-38e5a571.mjs";
+const Modal$1 = "";
+function targetIsNode(e) {
+  if (!e || !("nodeType" in e)) {
+    return false;
+  }
+  return true;
 }
-function A({
-  title: d,
-  children: i,
-  classNameModifiers: u = [],
-  isOpen: a,
-  onClose: l,
-  isDismissible: r = !0,
-  headerWithBorder: h = !0,
-  size: o = "fluid",
-  ...y
+function Modal({
+  title,
+  children,
+  classNameModifiers = [],
+  isOpen,
+  onClose,
+  isDismissible = true,
+  headerWithBorder = true,
+  size = "fluid",
+  ...props
 }) {
-  const t = L(null), { i18n: w } = g(), v = c(
-    (n) => {
-      var p;
-      r && a && x(n.target) && !((p = t == null ? void 0 : t.current) != null && p.contains(n.target)) && l();
+  const modalContainerRef = _(null);
+  const { i18n } = useCoreContext();
+  const handleClickOutside = T(
+    (e) => {
+      var _a;
+      if (isDismissible && isOpen && targetIsNode(e.target) && !((_a = modalContainerRef == null ? void 0 : modalContainerRef.current) == null ? void 0 : _a.contains(e.target))) {
+        onClose();
+      }
     },
-    [r, a, l]
-  ), f = c(
-    (n) => {
-      n.key === "Escape" && a && r && l();
+    [isDismissible, isOpen, onClose]
+  );
+  const handleEscKey = T(
+    (e) => {
+      if (e.key === "Escape" && isOpen && isDismissible) {
+        onClose();
+      }
     },
-    [a, r, l]
+    [isOpen, isDismissible, onClose]
   );
-  return k(() => (a ? window.addEventListener("keydown", f) : window.removeEventListener("keydown", f), () => window.removeEventListener("keydown", f)), [a, f]), /* @__PURE__ */ e(C, { children: a && /* @__PURE__ */ e(
+  p(() => {
+    if (isOpen) {
+      window.addEventListener("keydown", handleEscKey);
+    } else {
+      window.removeEventListener("keydown", handleEscKey);
+    }
+    return () => window.removeEventListener("keydown", handleEscKey);
+  }, [isOpen, handleEscKey]);
+  return /* @__PURE__ */ o(k, { children: isOpen && /* @__PURE__ */ o(
     "div",
     {
-      className: m(
-        "adyen-fp-modal-wrapper",
-        u.map((n) => `adyen-fp-modal-wrapper--${n}`),
-        { "adyen-fp-modal-wrapper--open": a, "adyen-fp-modal-wrapper--dismissible": r }
+      className: cx(
+        "adyen-pe-modal-wrapper",
+        classNameModifiers.map((m) => `adyen-pe-modal-wrapper--${m}`),
+        { "adyen-pe-modal-wrapper--open": isOpen, "adyen-pe-modal-wrapper--dismissible": isDismissible }
       ),
       role: "dialog",
       "aria-modal": "true",
       "aria-hidden": !open,
-      onClick: v,
-      ...y,
-      children: /* @__PURE__ */ e(
+      onClick: handleClickOutside,
+      ...props,
+      children: /* @__PURE__ */ o(
         "div",
         {
-          className: m("adyen-fp-modal", {
-            "adyen-fp-modal--fluid": o === "fluid",
-            "adyen-fp-modal--small": o === "small",
-            "adyen-fp-modal--large": o === "large",
-            "adyen-fp-modal--extra-large": o === "extra-large",
-            "adyen-fp-modal--full-screen": o === "full-screen"
+          className: cx("adyen-pe-modal", {
+            "adyen-pe-modal--fluid": size === "fluid",
+            "adyen-pe-modal--small": size === "small",
+            "adyen-pe-modal--large": size === "large",
+            "adyen-pe-modal--extra-large": size === "extra-large",
+            "adyen-pe-modal--full-screen": size === "full-screen"
           }),
-          ref: t,
+          ref: modalContainerRef,
           children: [
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ o(
               "div",
               {
-                className: m("adyen-fp-modal__header", {
-                  "adyen-fp-modal__header--with-title": d,
-                  "adyen-fp-modal__header--with-border-bottom": h
+                className: cx("adyen-pe-modal__header", {
+                  "adyen-pe-modal__header--with-title": title,
+                  "adyen-pe-modal__header--with-border-bottom": headerWithBorder
                 }),
                 children: [
-                  d && /* @__PURE__ */ e("div", { className: "adyen-fp-modal__header__title", children: d }),
-                  r && /* @__PURE__ */ e(
-                    s,
+                  title && /* @__PURE__ */ o("div", { className: `adyen-pe-modal__header__title`, children: title }),
+                  isDismissible && /* @__PURE__ */ o(
+                    Button,
                     {
-                      onClick: l,
-                      variant: _.TERTIARY,
-                      className: "adyen-fp-modal__header-icon",
-                      "aria-label": w.get("dismiss"),
-                      children: /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
-                        "path",
-                        {
-                          fillRule: "evenodd",
-                          clipRule: "evenodd",
-                          d: "M13.6569 4.07112C14.0474 3.6806 14.0474 3.04743 13.6569 2.65691C13.2664 2.26638 12.6332 2.26638 12.2427 2.65691L8.00005 6.89954L3.75745 2.65694C3.36692 2.26641 2.73376 2.26641 2.34324 2.65694C1.95271 3.04746 1.95271 3.68063 2.34324 4.07115L6.58584 8.31375L2.34319 12.5564C1.95266 12.9469 1.95266 13.5801 2.34319 13.9706C2.73371 14.3611 3.36688 14.3611 3.7574 13.9706L8.00005 9.72796L12.2427 13.9706C12.6333 14.3612 13.2664 14.3612 13.6569 13.9706C14.0475 13.5801 14.0475 12.947 13.6569 12.5564L9.41426 8.31375L13.6569 4.07112Z",
-                          fill: "#000"
-                        }
-                      ) })
+                      onClick: onClose,
+                      variant: ButtonVariant.TERTIARY,
+                      className: `adyen-pe-modal__header-icon`,
+                      "aria-label": i18n.get("dismiss"),
+                      children: /* @__PURE__ */ o(Close, {})
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ e("div", { className: "adyen-fp-modal__content", children: i })
+            /* @__PURE__ */ o("div", { className: "adyen-pe-modal__content", children })
           ]
         }
       )
@@ -95,5 +107,5 @@ function A({
   ) });
 }
 export {
-  A as default
+  Modal as default
 };

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

@@ -0,0 +1,4 @@
+import { default as default2 } from "./Modal.js";
+export {
+  default2 as default
+};

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

@@ -1,61 +1,77 @@
-import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { ButtonVariant as d } from "../Button/types.js";
-import b from "../../../core/Context/useCoreContext.js";
-import v from "classnames";
-import { useMemo as C, useCallback as _ } from "../../../external/preact/hooks/dist/hooks.module.js";
-import s from "../Button/Button.js";
-import "./Pagination.scss.js";
-import h from "../FormFields/Select/Select.js";
-import R from "../SVGIcons/ChevronLeft.js";
-import T from "../SVGIcons/ChevronRight.js";
-import { EMPTY_ARRAY as c } from "../../../utils/common/constants.js";
-function I({ next: m, hasNext: o, hasPrev: r, page: p, prev: f, limit: u, limitOptions: t, onLimitSelection: i }) {
-  const { i18n: n } = b(), l = C(
-    () => t && Object.freeze(t.map((e) => ({ id: `${e}`, name: `${e}` }))),
-    [t]
-  ), g = _(
-    ({ target: e }) => {
-      (e == null ? void 0 : e.value) != null && (i == null || i(+e.value));
+import '../../../../Pagination.css';
+import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
+import { B as ButtonVariant } from "../../../../types-7ad6576a.mjs";
+import useCoreContext from "../../../core/Context/useCoreContext.js";
+import "../../../utils/common/index.js";
+import cx from "classnames";
+import { F, T } from "../../../../hooks.module-8565d716.mjs";
+import Button from "../Button/Button.js";
+import Select from "../FormFields/Select/Select.js";
+import ChevronLeft from "../SVGIcons/ChevronLeft.js";
+import ChevronRight from "../SVGIcons/ChevronRight.js";
+import { EMPTY_ARRAY } from "../../../utils/common/constants.js";
+const Pagination$1 = "";
+function Pagination({ next, hasNext, hasPrev, page, prev, limit, limitOptions, onLimitSelection }) {
+  const { i18n } = useCoreContext();
+  const _limitOptions = F(
+    () => limitOptions && Object.freeze(limitOptions.map((option) => ({ id: `${option}`, name: `${option}` }))),
+    [limitOptions]
+  );
+  const _onLimitChanged = T(
+    ({ target }) => {
+      if ((target == null ? void 0 : target.value) == void 0)
+        return;
+      onLimitSelection == null ? void 0 : onLimitSelection(+target.value);
     },
-    [i]
+    [onLimitSelection]
   );
-  return /* @__PURE__ */ a("div", { "aria-label": n.get("paginatedNavigation"), className: `adyen-fp-pagination ${v({})}`, children: [
-    /* @__PURE__ */ a("div", { className: "adyen-fp-pagination__context", children: [
-      /* @__PURE__ */ a("span", { children: [
-        n.get("pagination.page"),
+  return /* @__PURE__ */ o("div", { "aria-label": i18n.get("paginatedNavigation"), className: `adyen-pe-pagination ${cx({})}`, children: [
+    /* @__PURE__ */ o("div", { className: "adyen-pe-pagination__context", children: [
+      /* @__PURE__ */ o("span", { children: [
+        i18n.get("pagination.page"),
         " ",
-        p
+        page
       ] }),
-      l && i && /* @__PURE__ */ a("div", { className: "adyen-fp-pagination__limit-selector", children: /* @__PURE__ */ a(h, { filterable: !1, multiSelect: !1, items: l, onChange: g, selected: `${u ?? ""}` }) })
+      _limitOptions && onLimitSelection && /* @__PURE__ */ o("div", { className: "adyen-pe-pagination__limit-selector", children: /* @__PURE__ */ o(
+        Select,
+        {
+          setToTargetWidth: true,
+          filterable: false,
+          multiSelect: false,
+          items: _limitOptions,
+          onChange: _onLimitChanged,
+          selected: `${limit ?? ""}`
+        }
+      ) })
     ] }),
-    /* @__PURE__ */ a("div", { className: "adyen-fp-pagination__controls", children: [
-      /* @__PURE__ */ a(
-        s,
+    /* @__PURE__ */ o("div", { className: "adyen-pe-pagination__controls", children: [
+      /* @__PURE__ */ o(
+        Button,
         {
-          "aria-label": n.get("pagination.previousPage"),
-          variant: d.TERTIARY,
-          disabled: !r,
-          iconButton: !0,
-          classNameModifiers: ["circle"].concat(r ? c : "disabled"),
-          onClick: f,
-          children: /* @__PURE__ */ a(R, { disabled: !r })
+          "aria-label": i18n.get("pagination.previousPage"),
+          variant: ButtonVariant.TERTIARY,
+          disabled: !hasPrev,
+          iconButton: true,
+          classNameModifiers: ["circle"].concat(hasPrev ? EMPTY_ARRAY : "disabled"),
+          onClick: prev,
+          children: /* @__PURE__ */ o(ChevronLeft, { disabled: !hasPrev })
         }
       ),
-      /* @__PURE__ */ a(
-        s,
+      /* @__PURE__ */ o(
+        Button,
         {
-          "aria-label": n.get("pagination.nextPage"),
-          variant: d.TERTIARY,
-          disabled: !o,
-          iconButton: !0,
-          classNameModifiers: ["circle"].concat(o ? c : "disabled"),
-          onClick: m,
-          children: /* @__PURE__ */ a(T, { disabled: !o })
+          "aria-label": i18n.get("pagination.nextPage"),
+          variant: ButtonVariant.TERTIARY,
+          disabled: !hasNext,
+          iconButton: true,
+          classNameModifiers: ["circle"].concat(hasNext ? EMPTY_ARRAY : "disabled"),
+          onClick: next,
+          children: /* @__PURE__ */ o(ChevronRight, { disabled: !hasNext })
         }
       )
     ] })
   ] });
 }
 export {
-  I as default
+  Pagination as default
 };

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

@@ -0,0 +1 @@
+

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

@@ -1,6 +1,8 @@
-const I = Object.freeze([10, 20, 50, 100]), e = 100, t = 10;
+const LIMIT_OPTIONS = Object.freeze([10, 20]);
+const MAX_PAGE_LIMIT = 100;
+const DEFAULT_PAGE_LIMIT = 10;
 export {
-  t as DEFAULT_PAGE_LIMIT,
-  I as LIMIT_OPTIONS,
-  e as MAX_PAGE_LIMIT
+  DEFAULT_PAGE_LIMIT,
+  LIMIT_OPTIONS,
+  MAX_PAGE_LIMIT
 };

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

@@ -0,0 +1,6 @@
+import { default as default2 } from "./useCursorPaginatedRecords.js";
+import { default as default3 } from "./useOffsetPaginatedRecords.js";
+export {
+  default2 as useCursorPaginatedRecords,
+  default3 as useOffsetPaginatedRecords
+};

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

@@ -1,9 +1,10 @@
-import r from "./usePaginatedRecords.js";
-import { PaginationType as e } from "../types.js";
-const a = (o) => r({
-  ...o,
-  pagination: e.CURSOR
-}), n = a;
+import { u as usePaginatedRecords, P as PaginationType } from "../../../../../usePaginatedRecords-63a69bf1.mjs";
+const useCursorPaginatedRecords = (initOptions) => {
+  return usePaginatedRecords({
+    ...initOptions,
+    pagination: PaginationType.CURSOR
+  });
+};
 export {
-  n as default
+  useCursorPaginatedRecords as default
 };

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

@@ -1,22 +1,34 @@
-import { useMemo as m } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import { isString as i } from "../../../../utils/validator-utils.js";
-import d from "./usePagination.js";
-const f = (e) => i(e.next), C = (e) => i(e.prev), h = (e, u) => {
-  const c = m(() => {
-    const o = [], P = () => o.length, a = () => {
-      o.length = 0;
-    }, g = (t) => ({ cursor: o[t - 1] }), s = (t, r) => {
-      const n = o[r - 1];
-      (r === 1 || r === (o.length || 1) + 1) && n === void 0 && (o[r - 1] = t ? decodeURIComponent(t) : void 0);
+import { F } from "../../../../../hooks.module-8565d716.mjs";
+import { isString } from "../../../../utils/validator-utils.js";
+import usePagination from "./usePagination.js";
+const hasNextPage = (value) => isString(value.next);
+const hasPrevPage = (value) => isString(value.prev);
+const useCursorPagination = (requestPageCallback, pageLimit) => {
+  const paginationSetupConfig = F(() => {
+    const cursors = [];
+    const getPageCount = () => cursors.length;
+    const resetPageCount = () => {
+      cursors.length = 0;
     };
-    return { getPageCount: P, getPageParams: g, resetPageCount: a, updatePagination: (t, r, n) => {
-      f(n) && s(n.next, t + 1), C(n) && s(n.prev, t - 1);
-    } };
+    const getPageParams = (page) => ({ cursor: cursors[page - 1] });
+    const updateCursor = (cursor, page) => {
+      const currentCursor = cursors[page - 1];
+      if ((page === 1 || page === (cursors.length || 1) + 1) && currentCursor === void 0) {
+        cursors[page - 1] = cursor ? decodeURIComponent(cursor) : void 0;
+      }
+    };
+    const updatePagination = (page, limit, paginationData) => {
+      if (hasNextPage(paginationData))
+        updateCursor(paginationData.next, page + 1);
+      if (hasPrevPage(paginationData))
+        updateCursor(paginationData.prev, page - 1);
+    };
+    return { getPageCount, getPageParams, resetPageCount, updatePagination };
   }, []);
-  return d(c, e, u);
-}, S = h;
+  return usePagination(paginationSetupConfig, requestPageCallback, pageLimit);
+};
 export {
-  S as default,
-  f as hasNextPage,
-  C as hasPrevPage
+  useCursorPagination as default,
+  hasNextPage,
+  hasPrevPage
 };

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

@@ -0,0 +1,10 @@
+import { u as usePaginatedRecords, P as PaginationType } from "../../../../../usePaginatedRecords-63a69bf1.mjs";
+const useOffsetPaginatedRecords = (initOptions) => {
+  return usePaginatedRecords({
+    ...initOptions,
+    pagination: PaginationType.OFFSET
+  });
+};
+export {
+  useOffsetPaginatedRecords as default
+};

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

@@ -1,17 +1,24 @@
-import { useMemo as i } from "../../../../external/preact/hooks/dist/hooks.module.js";
-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));
-    } };
+import { F } from "../../../../../hooks.module-8565d716.mjs";
+import usePagination from "./usePagination.js";
+const hasNextPage = (value) => value.next;
+const useOffsetPagination = (requestPageCallback, pageLimit) => {
+  const paginationSetupConfig = F(() => {
+    let currentPage = 0;
+    const getPageCount = () => currentPage;
+    const resetPageCount = () => {
+      currentPage = 0;
+    };
+    const getPageParams = (page, limit) => ({ offset: (page - 1) * limit });
+    const updatePagination = (page, limit, paginationData) => {
+      if (hasNextPage(paginationData) && paginationData.next) {
+        currentPage = Math.max(currentPage, page + 1);
+      }
+    };
+    return { getPageCount, getPageParams, resetPageCount, updatePagination };
   }, []);
-  return r(g, e, s);
-}, d = P;
+  return usePagination(paginationSetupConfig, requestPageCallback, pageLimit);
+};
 export {
-  d as default,
-  u as hasNextPage
+  useOffsetPagination as default,
+  hasNextPage
 };