@adyen/adyen-platform-experience-web 1.5.1 → 1.6.1

package/dist/es/components/internal/Button/DownloadButton/DownloadButton.js

@@ -1,51 +1,77 @@
 import { jsx as o } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import _ from "classnames";
-import { useState as g, useEffect as m } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import k from "../../../../core/Context/useCoreContext.js";
-import { useResponsiveContainer as x, containerQueries as B } from "../../../../hooks/useResponsiveContainer.js";
-import h from "../../SVGIcons/Download.js";
-import v from "../Button.js";
+import L from "classnames";
+import { useState as x, useEffect as p, useMemo as k } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import E from "../../../../core/Context/useCoreContext.js";
+import { useResponsiveContainer as N, containerQueries as S } from "../../../../hooks/useResponsiveContainer.js";
+import y from "../../SVGIcons/Download.js";
+import C from "../Button.js";
 import { ButtonVariant as b } from "../types.js";
-import y from "./useDownload.js";
+import U from "./useDownload.js";
 /* empty css                    */
-import C from "../../Spinner/Spinner.js";
-function N({ blob: r, filename: c }) {
-  const t = document.createElement("a"), a = URL.createObjectURL(r);
-  t.href = a, t.download = c || "download";
-  const n = () => {
+import R from "../../Spinner/Spinner.js";
+import { Fragment as j } from "../../../../external/preact/dist/preact.module.js";
+function A({ blob: d, filename: c }) {
+  const e = document.createElement("a"), i = URL.createObjectURL(d);
+  e.href = i, e.download = c || "download";
+  const r = () => {
     setTimeout(() => {
-      URL.revokeObjectURL(a);
+      URL.revokeObjectURL(i);
     }, 150);
   };
-  t.addEventListener("click", n, { once: !0 }), t.click();
+  e.addEventListener("click", r, { once: !0 }), e.click();
 }
-function D({ className: r, disabled: c, endpointName: t, params: a, setError: n, errorDisplay: f, onDownloadRequested: d }) {
-  const { i18n: u } = k(), [s, p] = g(!1), L = x(B.down.xs), { data: l, error: i, isFetching: e } = y(t, a, s);
-  m(() => {
-    s && p(!1);
-  }, [s]), m(() => {
-    l && N(l);
-  }, [l]), m(() => {
-    n && i && n(i);
-  }, [i, n]);
-  const w = () => {
-    p(!0), d == null || d();
-  };
-  return /* @__PURE__ */ o("div", { className: "adyen-pe-download", children: [
-    L ? /* @__PURE__ */ o(v, { iconButton: !0, variant: b.TERTIARY, onClick: w, children: e ? /* @__PURE__ */ o(C, { size: "small" }) : /* @__PURE__ */ o(h, {}) }) : /* @__PURE__ */ o(
-      v,
+function J({
+  className: d,
+  disabled: c,
+  endpointName: e,
+  requestParams: i,
+  setError: r,
+  errorDisplay: w,
+  onDownloadRequested: s,
+  iconButton: n = !1,
+  errorMessage: h
+}) {
+  const { i18n: l } = E(), [m, _] = x(!1), T = N(S.down.xs), { data: f, error: a, isFetching: t } = U(e, i, m);
+  p(() => {
+    m && _(!1);
+  }, [m]), p(() => {
+    f && A(f);
+  }, [f]), p(() => {
+    r && a && r(a);
+  }, [a, r]);
+  const v = () => {
+    _(!0), s == null || s();
+  }, u = k(() => t ? /* @__PURE__ */ o(R, { size: "small" }) : /* @__PURE__ */ o(y, {}), [t]), g = k(() => n ? u : t ? `${l.get("downloading")}..` : l.get("download"), [u, l, t, n]);
+  return /* @__PURE__ */ o(j, { children: [
+    /* @__PURE__ */ o(
+      "div",
       {
-        className: _("adyen-pe-download__button", { "adyen-pe-download__button--loading": e }, r),
-        disabled: c || e,
-        variant: b.SECONDARY,
-        onClick: w,
-        iconLeft: e ? /* @__PURE__ */ o(C, { size: "small" }) : /* @__PURE__ */ o(h, {}),
-        children: e ? `${u.get("downloading")}..` : u.get("download")
+        className: L("adyen-pe-download", {
+          "adyen-pe-download-icon-button-container": n
+        }),
+        children: [
+          T ? /* @__PURE__ */ o(C, { iconButton: !0, variant: b.TERTIARY, onClick: v, children: t ? /* @__PURE__ */ o(R, { size: "small" }) : /* @__PURE__ */ o(y, {}) }) : /* @__PURE__ */ o(
+            C,
+            {
+              className: L(
+                "adyen-pe-download__button",
+                { "adyen-pe-download__button--loading": t, "adyen-pe-download__button--icon": n },
+                d
+              ),
+              disabled: c || t,
+              variant: n ? b.TERTIARY : b.SECONDARY,
+              onClick: v,
+              ...!n && { iconLeft: u },
+              children: g
+            }
+          ),
+          a && w && /* @__PURE__ */ o("div", { className: "adyen-pe-download__error", children: w })
+        ]
       }
     ),
-    i && f && /* @__PURE__ */ o("div", { className: "adyen-pe-download__error", children: f })
+    a && h && h(a)
   ] });
 }
 export {
-  D as default
+  J as default
 };

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

@@ -1,15 +1,16 @@
-const _ = "adyen-pe-button", T = "adyen-pe-button__anchor", N = `${_}-actions`, A = `${_}--icon`, n = `${_}--icon-content`, o = `${N}__container-wrapper`, S = `${_}__label`, t = `${_}__icon-right`, O = `${_}__icon-left`, C = `${_}--condensed`, c = `${_}--full-width`, E = `${_}--loading`;
+const _ = "adyen-pe-button", A = "adyen-pe-button__anchor", N = `${_}-actions`, n = `${_}--icon`, S = `${_}--icon-content`, o = `${N}__container-wrapper`, T = `${_}__label`, t = `${_}__icon-right`, C = `${_}__icon-left`, E = `${_}--condensed`, O = `${_}--full-width`, c = `${_}--loading`, L = `${T}--centered`;
 export {
   N as BUTTON_ACTION_CLASSNAME,
   o as BUTTON_ACTION_CONTAINER_CLASSNAME,
-  T as BUTTON_ANCHOR_CLASSNAME,
-  C as BUTTON_CONDENSED_CLASSNAME,
-  c as BUTTON_FULL_WIDTH_CLASSNAME,
-  O as BUTTON_ICON_LEFT_CLASSNAME,
+  A as BUTTON_ANCHOR_CLASSNAME,
+  E as BUTTON_CONDENSED_CLASSNAME,
+  O as BUTTON_FULL_WIDTH_CLASSNAME,
+  C as BUTTON_ICON_LEFT_CLASSNAME,
   t as BUTTON_ICON_RIGHT_CLASSNAME,
-  S as BUTTON_LABEL_CLASSNAME,
-  E as BUTTON_LOADING_CLASSNAME,
+  L as BUTTON_LABEL_CENTERED_CLASSNAME,
+  T as BUTTON_LABEL_CLASSNAME,
+  c as BUTTON_LOADING_CLASSNAME,
   _ as DEFAULT_BUTTON_CLASSNAME,
-  A as ICON_BUTTON_CLASSNAME,
-  n as ICON_BUTTON_CONTENT_CLASSNAME
+  n as ICON_BUTTON_CLASSNAME,
+  S as ICON_BUTTON_CONTENT_CLASSNAME
 };

package/dist/es/components/internal/Button/hooks/useButton.js

@@ -1,44 +1,54 @@
-import { jsx as r } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useCallback as E, useMemo as _ } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import B from "classnames";
-import { BUTTON_LOADING_CLASSNAME as h, BUTTON_FULL_WIDTH_CLASSNAME as C, BUTTON_CONDENSED_CLASSNAME as g, ICON_BUTTON_CLASSNAME as u, ICON_BUTTON_CONTENT_CLASSNAME as M, BUTTON_ICON_LEFT_CLASSNAME as U, BUTTON_LABEL_CLASSNAME as d, BUTTON_ICON_RIGHT_CLASSNAME as I } from "../constants.js";
+import { jsx as t } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useCallback as p, useMemo as _ } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import L from "classnames";
+import { BUTTON_LOADING_CLASSNAME as C, BUTTON_FULL_WIDTH_CLASSNAME as g, BUTTON_CONDENSED_CLASSNAME as h, ICON_BUTTON_CLASSNAME as M, ICON_BUTTON_CONTENT_CLASSNAME as U, BUTTON_ICON_LEFT_CLASSNAME as u, BUTTON_LABEL_CLASSNAME as d, BUTTON_LABEL_CENTERED_CLASSNAME as D, BUTTON_ICON_RIGHT_CLASSNAME as I } from "../constants.js";
 import y from "../../Typography/Typography.js";
-import { TypographyVariant as D, TypographyElement as x } from "../../Typography/types.js";
-import { getModifierClasses as v } from "../../../../utils/preact/className.js";
-import F from "../../Spinner/Spinner.js";
+import { TypographyVariant as x, TypographyElement as v } from "../../Typography/types.js";
+import { getModifierClasses as F } from "../../../../utils/preact/className.js";
+import R from "../../Spinner/Spinner.js";
 import { Fragment as G } from "../../../../external/preact/dist/preact.module.js";
-const $ = (l, A, e, o, n, a) => {
-  const { children: s, iconLeft: T, iconRight: m, iconButton: N = !1, fullWidth: S, condensed: c, state: t = "default" } = n, O = E(
-    (p) => {
-      p.preventDefault(), o || a == null || a(p);
+const w = (A, l, e, o, r, N) => {
+  const { children: T, iconLeft: i, iconRight: s, iconButton: n = !1, fullWidth: S, condensed: E, state: a = "default" } = r, O = p(
+    (c) => {
+      c.preventDefault(), o || N == null || N(c);
     },
-    [o, a]
-  ), i = _(
-    () => v(e, A, [e, l]),
-    [e, A, l]
-  ), L = _(
+    [o, N]
+  ), m = _(
+    () => F(e, l, [e, A]),
+    [e, l, A]
+  ), f = _(
     () => ({
-      ...n,
-      className: B(i, {
-        [u]: N,
-        [g]: c,
-        [C]: S,
-        [h]: t === "loading"
+      ...r,
+      className: L(m, {
+        [M]: n,
+        [h]: E,
+        [g]: S,
+        [C]: a === "loading"
       }),
-      disabled: o || t === "loading"
+      disabled: o || a === "loading"
     }),
-    [i, c, o, S, N, n, t]
-  ), f = _(
-    () => N ? /* @__PURE__ */ r("div", { className: `${M}`, children: s }) : /* @__PURE__ */ r(G, { children: [
-      t === "loading" && /* @__PURE__ */ r(F, { size: "x-small" }),
-      T && /* @__PURE__ */ r("span", { className: U, children: T }),
-      /* @__PURE__ */ r(y, { className: d, el: x.SPAN, variant: D.BODY, children: s }),
-      m && /* @__PURE__ */ r("span", { className: I, children: m })
+    [m, E, o, S, n, r, a]
+  ), B = _(
+    () => n ? /* @__PURE__ */ t("div", { className: `${U}`, children: T }) : /* @__PURE__ */ t(G, { children: [
+      a === "loading" && /* @__PURE__ */ t(R, { size: "x-small" }),
+      i && /* @__PURE__ */ t("span", { className: u, children: i }),
+      /* @__PURE__ */ t(
+        y,
+        {
+          className: L(d, {
+            [D]: r.align === "center"
+          }),
+          el: v.SPAN,
+          variant: x.BODY,
+          children: T
+        }
+      ),
+      s && /* @__PURE__ */ t("span", { className: I, children: s })
     ] }),
-    [s, N, T, m, t]
+    [T, n, i, s, r.align, a]
   );
-  return { classes: i, click: O, allChildren: f, allProps: L };
+  return { classes: m, click: O, allChildren: B, allProps: f };
 };
 export {
-  $ as default
+  w as default
 };

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

@@ -1,50 +1,80 @@
 import { jsx as s } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { CARD_HEADER as h, CARD_HEADER_CONTENT as o, CARD_TITLE as I, CARD_SUBTITLE as L, CARD_BODY as p, CARD_BODY_WITH_TITLE as n, CARD_FOOTER as d, CARD_BASE_CLASS as f, CARD_NO_PADDING as t, CARD_NO_OUTLINE as B, CARD_FILLED as S } from "./constants.js";
-import m from "classnames";
+import r from "classnames";
+import { useState as p, useMemo as _, useCallback as E } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { InteractionKeyCode as R } from "../../types.js";
+import { CARD_TOGGLE_CLASS as v, CARD_TITLE as w, CARD_SUBTITLE as B, CARD_HEADER_CONTENT as P, CARD_HEADER as g, CARD_BODY as G, CARD_BODY_WITH_TITLE as k, CARD_FOOTER as y, CARD_BASE_CLASS as K, CARD_COMPACT as M, CARD_EXPANDABLE_CLASS as U, CARD_NO_PADDING as Y, CARD_NO_OUTLINE as j, CARD_FILLED as q } from "./constants.js";
 /* empty css          */
-const Y = ({
-  title: D,
-  subTitle: _,
-  children: C,
-  footer: A,
-  el: R,
-  renderHeader: a,
-  renderFooter: c,
-  filled: N,
-  noOutline: E,
-  noPadding: i,
-  classNameModifiers: T,
-  testId: l
+import { Icon as W } from "../Icon/Icon.js";
+import { uuid as X } from "../../../utils/random/uuid.js";
+const $ = ({
+  title: i,
+  subTitle: m,
+  children: l,
+  expandable: o = !1,
+  footer: D,
+  el: N,
+  renderHeader: t,
+  renderFooter: C,
+  filled: T,
+  noOutline: u,
+  noPadding: d,
+  classNameModifiers: f,
+  testId: h,
+  compact: I
 }) => {
-  const O = R || "header";
+  const L = N || "header", [c, S] = p(!1), A = _(() => X(), []), a = E(() => {
+    o && S((n) => !n);
+  }, [o]), e = E(
+    (n) => {
+      switch (n.code) {
+        case R.ENTER:
+        case R.SPACE:
+          n.preventDefault(), a();
+          return;
+      }
+    },
+    [a]
+  ), O = _(() => o ? {
+    role: "button",
+    tabIndex: 0,
+    onClick: a,
+    onKeyDown: e,
+    "aria-controls": A,
+    "aria-expanded": c
+  } : {}, [o, c, A, e, a]);
   return /* @__PURE__ */ s(
     "section",
     {
-      className: m(
-        f,
-        { [S]: N, [B]: E, [t]: i },
-        T
-      ),
-      "data-testid": l,
+      "data-testid": h,
+      className: r(K, f, {
+        [q]: T,
+        [j]: u,
+        [Y]: d,
+        [U]: o,
+        [M]: I
+      }),
+      ...O,
       children: [
-        (D || a) && /* @__PURE__ */ s(O, { className: h, children: (D || a) && /* @__PURE__ */ s("div", { className: o, children: [
-          a || /* @__PURE__ */ s("span", { className: I, children: D }),
-          _ && /* @__PURE__ */ s("div", { className: L, children: _ })
+        (i || t) && /* @__PURE__ */ s(L, { className: r(g), children: /* @__PURE__ */ s("div", { className: r(P), children: [
+          o && /* @__PURE__ */ s(W, { name: c ? "chevron-up" : "chevron-down", className: v, role: "presentation" }),
+          t || /* @__PURE__ */ s("span", { className: w, children: i }),
+          m && /* @__PURE__ */ s("div", { className: B, children: m })
         ] }) }),
-        /* @__PURE__ */ s(
+        (!o || c) && /* @__PURE__ */ s(
           "div",
           {
-            className: m(p, {
-              [n]: D || a
+            id: A,
+            className: r(G, {
+              [k]: i || t
             }),
-            children: C
+            children: l
           }
         ),
-        (A || c) && /* @__PURE__ */ s("footer", { className: d, children: c || A })
+        (D || C) && /* @__PURE__ */ s("footer", { className: y, children: C || D })
       ]
     }
   );
 };
 export {
-  Y as default
+  $ as default
 };

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

@@ -1,14 +1,17 @@
-const _ = "adyen-pe-card", t = `${_}__body`, o = `${_}__header`, n = `${_}__title`, D = `${_}__subtitle`, A = `${o}-content`, R = `${t}--with-title`, c = `${_}--no-outline`, C = `${_}--no-padding`, e = `${_}--filled`, s = `${_}__footer`;
+const _ = "adyen-pe-card", A = `${_}--expandable`, n = `${_}__toggle`, t = `${_}__body`, o = `${_}__header`, D = `${_}__title`, C = `${_}__subtitle`, c = `${o}-content`, R = `${t}--with-title`, e = `${_}--no-outline`, s = `${_}--no-padding`, E = `${_}--filled`, T = `${_}__footer`, $ = `${_}--compact`;
 export {
   _ as CARD_BASE_CLASS,
   t as CARD_BODY,
   R as CARD_BODY_WITH_TITLE,
-  e as CARD_FILLED,
-  s as CARD_FOOTER,
+  $ as CARD_COMPACT,
+  A as CARD_EXPANDABLE_CLASS,
+  E as CARD_FILLED,
+  T as CARD_FOOTER,
   o as CARD_HEADER,
-  A as CARD_HEADER_CONTENT,
-  c as CARD_NO_OUTLINE,
-  C as CARD_NO_PADDING,
-  D as CARD_SUBTITLE,
-  n as CARD_TITLE
+  c as CARD_HEADER_CONTENT,
+  e as CARD_NO_OUTLINE,
+  s as CARD_NO_PADDING,
+  C as CARD_SUBTITLE,
+  D as CARD_TITLE,
+  n as CARD_TOGGLE_CLASS
 };

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

@@ -1,71 +1,74 @@
 import { jsx as d } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { toChildArray as b, Fragment as v } from "../../../external/preact/dist/preact.module.js";
-import c from "classnames";
+import { toChildArray as v, Fragment as w } from "../../../external/preact/dist/preact.module.js";
+import s from "classnames";
 /* empty css              */
-import { TableBody as w } from "./components/TableBody.js";
-import { InteractiveBody as C } from "./components/InteractiveBody.js";
-import _ from "./components/SkeletonBody.js";
-import { ErrorMessageDisplay as T } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { TableBody as C } from "./components/TableBody.js";
+import { InteractiveBody as _ } from "./components/InteractiveBody.js";
+import T from "./components/SkeletonBody.js";
+import { ErrorMessageDisplay as k } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
 import { useMemo as n } from "../../../external/preact/hooks/dist/hooks.module.js";
-import k from "../../../images/no-data-female.svg.js";
-import { DataGridProvider as N } from "./utils/DataGridProvider.js";
-import { useDataGridContext as x } from "./hooks/useDataGridContext.js";
-import { TableHeaderCell as B } from "./components/TableHeaderCell.js";
-const K = Object.freeze({
+import N from "../../../images/no-data-female.svg.js";
+import { DataGridProvider as x } from "./utils/DataGridProvider.js";
+import { useDataGridContext as B } from "./hooks/useDataGridContext.js";
+import { TableHeaderCell as R } from "./components/TableHeaderCell.js";
+const L = Object.freeze({
   activeIndex: -1,
   index: -1
 });
-function s({ errorDisplay: e, ...a }) {
-  return /* @__PURE__ */ d("div", { style: { width: "100%" }, children: /* @__PURE__ */ d(N, { children: /* @__PURE__ */ d(R, { ...a, errorDisplay: e }) }) });
+function y({ errorDisplay: e, ...l }) {
+  return /* @__PURE__ */ d("div", { style: { width: "100%" }, children: /* @__PURE__ */ d(x, { children: /* @__PURE__ */ d(D, { ...l, errorDisplay: e }) }) });
 }
-function R({ errorDisplay: e, ...a }) {
-  var r, m;
-  const i = n(() => b(a.children), [a.children]), g = n(() => i.find((t) => (t == null ? void 0 : t.type) === y), [i]), l = n(() => {
+function D({ autoFitColumns: e, errorDisplay: l, ...a }) {
+  var m, c;
+  const r = n(() => v(a.children), [a.children]), u = n(() => r.find((t) => (t == null ? void 0 : t.type) === g), [r]), o = n(() => {
     var t;
     return ((t = a.data) == null ? void 0 : t.length) === 0;
-  }, [a.data]), u = n(() => !a.loading && (l || a.error), [l, a.error, a.loading]), { getMinWidthByColumn: f } = x(), o = a.columns.filter((t) => t.visible !== !1).map((t) => ({ ...t, minWidth: f(t.key) })), h = o.map((t) => `minmax(${(t.minWidth || 100) + 40}px, ${t.flex || 1}fr)`).join(" ");
+  }, [a.data]), f = n(() => !a.loading && (o || a.error), [o, a.error, a.loading]), { getMinWidthByColumn: h } = B(), i = a.columns.filter((t) => t.visible !== !1).map((t) => ({ ...t, minWidth: h(t.key) })), b = i.map((t) => `minmax(${(t.minWidth || 100) + 40}px, ${t.flex || 1}fr)`).join(" ");
   return /* @__PURE__ */ d(
     "div",
     {
-      className: c("adyen-pe-data-grid", {
+      className: s("adyen-pe-data-grid", {
         "adyen-pe-data-grid--condensed": a.condensed,
         "adyen-pe-data-grid--outline": a.outline,
         "adyen-pe-data-grid--scrollable": a.scrollable,
         "adyen-pe-data-grid--loading": a.loading,
-        "adyen-pe-data-grid--empty": l || a.error
+        "adyen-pe-data-grid--empty": o || a.error
       }),
-      style: `--adyen-pe-data-grid-cols: ${o.length}; --adyen-pe-data-grid-cells: ${h};`,
-      children: /* @__PURE__ */ d(v, { children: [
+      style: e ? void 0 : {
+        "--adyen-pe-data-grid-cols": i.length,
+        "--adyen-pe-data-grid-cells": b
+      },
+      children: /* @__PURE__ */ d(w, { children: [
         /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__table-wrapper", children: [
           /* @__PURE__ */ d("div", { role: "table", className: "adyen-pe-data-grid__table", children: [
-            /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__head", role: "rowgroup", children: /* @__PURE__ */ d("div", { role: "rowheader", className: "adyen-pe-data-grid__header", style: a.loading ? { width: "100%" } : {}, children: o.map((t) => /* @__PURE__ */ d(B, { label: t.label, position: t.position, cellKey: t.key }, t.key)) }) }),
-            /* @__PURE__ */ d(D, { ...a, columns: o, emptyBody: l })
+            /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__head", role: "rowgroup", children: /* @__PURE__ */ d("div", { role: "rowheader", className: "adyen-pe-data-grid__header", style: a.loading ? { width: "100%" } : {}, children: i.map((t) => /* @__PURE__ */ d(R, { label: t.label, position: t.position, cellKey: t.key }, t.key)) }) }),
+            /* @__PURE__ */ d(G, { ...a, columns: i, emptyBody: o })
           ] }),
-          u && (l && !a.error ? /* @__PURE__ */ d(
-            T,
+          f && (o && !a.error ? /* @__PURE__ */ d(
+            k,
             {
-              title: ((r = a.emptyTableMessage) == null ? void 0 : r.title) ?? "thereAreNoResults",
-              message: (m = a.emptyTableMessage) == null ? void 0 : m.message,
-              imageDesktop: k,
+              title: ((m = a.emptyTableMessage) == null ? void 0 : m.title) ?? "thereAreNoResults",
+              message: (c = a.emptyTableMessage) == null ? void 0 : c.message,
+              imageDesktop: N,
               centered: !0
             }
-          ) : a.error && e ? e() : null)
+          ) : a.error && l ? l() : null)
         ] }),
-        g
+        u
       ] })
     }
   );
 }
-function D(e) {
-  const a = n(() => e.loading || e.emptyBody || e.error, [e.emptyBody, e.error, e.loading]);
+function G(e) {
+  const l = n(() => e.loading || e.emptyBody || e.error, [e.emptyBody, e.error, e.loading]);
   return /* @__PURE__ */ d(
     "div",
     {
       role: "rowgroup",
-      className: c("adyen-pe-data-grid__body"),
-      style: a && { display: "grid", gridTemplateColumns: "1fr" },
-      children: a ? /* @__PURE__ */ d(_, { columnsNumber: e.columns.length, loading: e.loading }) : e.onRowClick ? /* @__PURE__ */ d(
-        C,
+      className: s("adyen-pe-data-grid__body"),
+      style: l && { display: "grid", gridTemplateColumns: "1fr" },
+      children: l ? /* @__PURE__ */ d(T, { columnsNumber: e.columns.length, loading: e.loading }) : e.onRowClick ? /* @__PURE__ */ d(
+        _,
         {
           onRowHover: e.onRowHover,
           data: e.data,
@@ -74,7 +77,7 @@ function D(e) {
           customCells: e.customCells
         }
       ) : /* @__PURE__ */ d(
-        w,
+        C,
         {
           onRowHover: e.onRowHover,
           data: e.data,
@@ -85,16 +88,16 @@ function D(e) {
     }
   );
 }
-s.Footer = y;
-function y({ children: e }) {
+y.Footer = g;
+function g({ children: e }) {
   return /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__footer", children: e });
 }
-s.defaultProps = {
+y.defaultProps = {
   condensed: !1,
   outline: !0,
   scrollable: !0
 };
 export {
-  K as INITIAL_STATE,
-  s as default
+  L as INITIAL_STATE,
+  y as default
 };

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

@@ -1,6 +1,6 @@
 import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 /* empty css                         */
-import { useMemo as y, useState as x, useCallback as L, useEffect as N } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useMemo as m, useState as x, useCallback as L, useEffect as N } from "../../../external/preact/hooks/dist/hooks.module.js";
 import { useFetch as O } from "../../../hooks/useFetch.js";
 import { PayoutData as B } from "../../external/PayoutDetails/components/PayoutData.js";
 import Y from "../../../hooks/useBalanceAccounts.js";
@@ -13,65 +13,72 @@ import { TX_DETAILS_RESERVED_FIELDS_SET as j } from "../../external/TransactionD
 import { PAYOUT_TABLE_FIELDS as J } from "../../external/PayoutsOverview/components/PayoutsTable/PayoutsTable.js";
 import { TransactionData as U } from "../../external/TransactionDetails/components/TransactionData/TransactionData.js";
 import { useConfigContext as W } from "../../../core/ConfigContext/context.js";
-import { EMPTY_OBJECT as b } from "../../../utils/value/constants.js";
+import { EMPTY_OBJECT as C } from "../../../utils/value/constants.js";
 const X = {
   transaction: "getTransaction",
-  payout: "getPayout"
-}, l = (t) => !("data" in t);
+  payout: "getPayout",
+  dispute: "getDisputeDetail"
+}, s = (t) => !("data" in t);
 function dt(t) {
   var f;
-  const S = y(() => l(t) ? null : t.data, [t]), c = y(() => l(t) ? t.id : null, [t]), s = W().endpoints[X[t.type]], { hideTitle: _, title: w } = V(t), { data: e, error: o, isFetching: D } = O(
-    y(
+  const k = m(() => s(t) ? null : t.data, [t]), o = m(() => s(t) ? t.id : null, [t]), y = W().endpoints[X[t.type]], { hideTitle: w, title: S } = V(t), { data: e, error: r, isFetching: v } = O(
+    m(
       () => ({
-        fetchOptions: { enabled: !!c && !!s },
+        fetchOptions: { enabled: !!o && !!y },
         queryFn: async () => {
-          const u = t.type === "transaction" ? {
-            path: { transactionId: c }
-          } : {
-            query: { balanceAccountId: c, createdAt: t.date }
-          };
-          return s(b, { ...u });
+          let c = null;
+          switch (t.type) {
+            case "transaction":
+              c = { path: { transactionId: o } };
+              break;
+            case "payout":
+              c = { query: { balanceAccountId: o, createdAt: t.date } };
+              break;
+            default:
+              break;
+          }
+          return y(C, { ...c });
         }
       }),
-      [c, s, t]
+      [o, y, t]
     )
-  ), F = t.type === "payout" ? t.id : e == null ? void 0 : e.balanceAccountId, P = t.type === "payout" ? t == null ? void 0 : t.balanceAccountDescription : t == null ? void 0 : t.balanceAccount, { balanceAccounts: i } = Y(F, !P), v = y(() => {
-    if (o)
-      return q(o, "weCouldNotLoadYourTransactions", t.onContactSupport);
-  }, [o, t.onContactSupport]), r = S ?? e, [T, k] = x(), E = L(async () => {
-    var u, d, A, I, g;
-    if (e && (l(t) && t.type === "transaction" || t.type === "payout")) {
-      const m = await ((A = (d = (u = t.dataCustomization) == null ? void 0 : u.details) == null ? void 0 : d.onDataRetrieve) == null ? void 0 : A.call(d, e));
-      k(
-        (g = (I = t.dataCustomization) == null ? void 0 : I.details) == null ? void 0 : g.fields.reduce((C, a) => j.has(a.key) || J.includes(a.key) || (a == null ? void 0 : a.visibility) === "hidden" ? C : { ...C, ...m != null && m[a.key] ? { [a.key]: m[a.key] } : {} }, {})
+  ), _ = t.type === "payout" ? t.id : e == null ? void 0 : e.balanceAccountId, F = t.type === "payout" ? t == null ? void 0 : t.balanceAccountDescription : t == null ? void 0 : t.balanceAccount, { balanceAccounts: i } = Y(_, !F), D = m(() => {
+    if (r)
+      return q(r, "weCouldNotLoadYourTransactions", t.onContactSupport);
+  }, [r, t.onContactSupport]), u = k ?? e, [T, P] = x(), E = L(async () => {
+    var c, d, b, g, A;
+    if (e && (s(t) && t.type === "transaction" || t.type === "payout")) {
+      const l = await ((b = (d = (c = t.dataCustomization) == null ? void 0 : c.details) == null ? void 0 : d.onDataRetrieve) == null ? void 0 : b.call(d, e));
+      P(
+        (A = (g = t.dataCustomization) == null ? void 0 : g.details) == null ? void 0 : A.fields.reduce((I, a) => j.has(a.key) || J.includes(a.key) || (a == null ? void 0 : a.visibility) === "hidden" ? I : { ...I, ...l != null && l[a.key] ? { [a.key]: l[a.key] } : {} }, {})
       );
     }
-  }, [e, t]), h = l(t) && t.type === "transaction" || t.type === "payout" ? t.dataCustomization : void 0;
+  }, [e, t]), h = s(t) && t.type === "transaction" || t.type === "payout" ? t.dataCustomization : void 0;
   return N(() => {
     E();
   }, [E]), /* @__PURE__ */ n("div", { className: "adyen-pe-overview-details", children: [
-    !_ && /* @__PURE__ */ n("div", { className: "adyen-pe-overview-details--title", children: /* @__PURE__ */ n(M, { variant: R.TITLE, medium: !0, children: w }) }),
-    o && v && /* @__PURE__ */ n("div", { className: "adyen-pe-overview-details--error-container", children: /* @__PURE__ */ n(z, { withImage: !0, ...v }) }),
+    !w && /* @__PURE__ */ n("div", { className: "adyen-pe-overview-details--title", children: /* @__PURE__ */ n(M, { variant: R.TITLE, medium: !0, children: S }) }),
+    r && D && /* @__PURE__ */ n("div", { className: "adyen-pe-overview-details--error-container", children: /* @__PURE__ */ n(z, { withImage: !0, ...D }) }),
     t.type === "transaction" && /* @__PURE__ */ n(
       U,
       {
-        transaction: r ? {
-          ...r || b,
+        transaction: u ? {
+          ...u || C,
           balanceAccount: (t == null ? void 0 : t.balanceAccount) || (i == null ? void 0 : i[0])
         } : void 0,
-        error: !!(o && v),
-        isFetching: D,
+        error: !!(r && D),
+        isFetching: v,
         extraFields: T,
         dataCustomization: h
       }
     ),
-    t.type === "payout" && r && /* @__PURE__ */ n(
+    t.type === "payout" && u && /* @__PURE__ */ n(
       B,
       {
-        balanceAccountId: c,
-        payout: r,
+        balanceAccountId: o,
+        payout: u,
         balanceAccountDescription: (t == null ? void 0 : t.balanceAccountDescription) || ((f = i == null ? void 0 : i[0]) == null ? void 0 : f.description),
-        isFetching: D,
+        isFetching: v,
         extraFields: T,
         dataCustomization: h
       }