@adyen/adyen-platform-experience-web 1.3.1 → 1.4.1

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

@@ -1,31 +1,52 @@
-import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import c from "../DataGridCell.js";
-import u from "./Icon.js";
-import { Fragment as v } from "../../../../external/preact/dist/preact.module.js";
-const b = (n) => !!n && typeof n == "object" && "value" in n, m = ({
-  columns: n,
-  customCells: d,
+import { jsx as c } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import y from "../DataGridCell.js";
+import T from "./Icon.js";
+import B from "../../Link/Link.js";
+import { ButtonVariant as D } from "../../Button/types.js";
+import a from "classnames";
+import S from "../../Button/Button.js";
+import { Fragment as I } from "../../../../external/preact/dist/preact.module.js";
+const L = (o) => !!o && typeof o == "object" && "value" in o, _ = (o) => !!o && typeof o == "object" && o.type === "icon", O = (o) => !!o && typeof o == "object" && o.type === "button", w = (o) => !!o && typeof o == "object" && o.type === "link", Y = ({
+  columns: o,
+  customCells: i,
   item: l,
-  rowIndex: e
-}) => /* @__PURE__ */ a(v, { children: n.map(({ key: r, position: t }) => {
-  if (d != null && d[r])
-    return /* @__PURE__ */ a(c, { "aria-labelledby": String(r), column: r, position: t, children: /* @__PURE__ */ a("div", {
+  rowIndex: j
+}) => /* @__PURE__ */ c(I, { children: o.map(({ key: r, position: f }) => {
+  var u, g, m, d, b, h, N;
+  if (i != null && i[r])
+    return /* @__PURE__ */ c(y, { "aria-labelledby": String(r), column: r, position: f, children: /* @__PURE__ */ c("div", {
       style: { width: "min-content" },
       // TODO create safeguard to remove "as any" assertion
-      children: d[r]({
+      children: i[r]({
         key: r,
         value: l[r],
         item: l,
-        rowIndex: e
+        rowIndex: j
       })
     }) }, r);
-  const { icon: i, value: o } = b(l[r]) ? l[r] : { value: l[r], icon: void 0 };
-  return /* @__PURE__ */ a(c, { "aria-labelledby": String(r), column: r, position: t, children: /* @__PURE__ */ a("div", { className: "adyen-pe-data-grid__cell-value", children: [
-    (i == null ? void 0 : i.url) && /* @__PURE__ */ a(u, { ...i }),
-    /* @__PURE__ */ a("div", { children: o })
+  const n = l[r], { value: e, type: s } = L(n) ? n : { value: n, type: "text" }, t = _(n) ? { url: (u = n == null ? void 0 : n.config) == null ? void 0 : u.src, alt: ((g = n == null ? void 0 : n.config) == null ? void 0 : g.alt) !== void 0 && ((m = n == null ? void 0 : n.config) == null ? void 0 : m.alt) !== null ? (d = n == null ? void 0 : n.config) == null ? void 0 : d.alt : n.value } : void 0, p = O(n) ? (x) => {
+    var v;
+    x.stopPropagation(), (v = n == null ? void 0 : n.config) == null || v.action();
+  } : void 0;
+  return /* @__PURE__ */ c(y, { "aria-labelledby": String(r), column: r, position: f, children: /* @__PURE__ */ c("div", { className: "adyen-pe-data-grid__cell-value", children: [
+    _(n) && n.config && (t == null ? void 0 : t.url) && /* @__PURE__ */ c("div", { className: a("adyen-pe-data-grid__icon-cell", (b = n == null ? void 0 : n.config) == null ? void 0 : b.className), children: [
+      /* @__PURE__ */ c(T, { ...t }),
+      e.trim() && /* @__PURE__ */ c("span", { children: e })
+    ] }),
+    s === "text" && /* @__PURE__ */ c("span", { className: a((h = n == null ? void 0 : n.config) == null ? void 0 : h.className), children: e }),
+    s === "button" && n.config && p && /* @__PURE__ */ c(S, { className: a((N = n.config) == null ? void 0 : N.className), onClick: p, variant: D.SECONDARY, children: e }),
+    w(n) && n.config && /* @__PURE__ */ c(
+      B,
+      {
+        classNames: n.config.className ? [n.config.className] : [],
+        href: n.config.href,
+        target: n.config.target,
+        children: e
+      }
+    )
   ] }) }, r);
 }) });
 export {
-  m as TableCells,
-  b as _isCustomDataObject
+  Y as TableCells,
+  L as isCustomDataObject
 };

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

@@ -1,29 +1,28 @@
-import { jsx as i } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import o from "classnames";
-import { CellTextPosition as n } from "../types.js";
+import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import l from "classnames";
 import { useDataGridContext as c } from "../hooks/useDataGridContext.js";
-import { useRef as s, useEffect as m } from "../../../../external/preact/hooks/dist/hooks.module.js";
-const h = ({ cellKey: e, position: t, label: l }) => {
-  const { registerCells: a } = c(), r = s(null);
-  return m(() => {
+import { useRef as o, useEffect as s } from "../../../../external/preact/hooks/dist/hooks.module.js";
+const f = ({ cellKey: e, position: t, label: i }) => {
+  const { registerCells: a } = c(), r = o(null);
+  return s(() => {
     var d;
     r.current && a({
       column: e,
       width: (d = r.current) == null ? void 0 : d.getBoundingClientRect().width
     });
-  }, [e, a]), /* @__PURE__ */ i(
+  }, [e, a]), /* @__PURE__ */ n(
     "div",
     {
       role: "columnheader",
       id: String(e),
-      className: o("adyen-pe-data-grid__cell adyen-pe-data-grid__cell--heading", {
-        "adyen-pe-data-grid__cell--right": t === n.RIGHT,
-        "adyen-pe-data-grid__cell--center": t === n.CENTER
+      className: l("adyen-pe-data-grid__cell adyen-pe-data-grid__cell--heading", {
+        "adyen-pe-data-grid__cell--right": t === "right",
+        "adyen-pe-data-grid__cell--center": t === "center"
       }),
-      children: /* @__PURE__ */ i("div", { ref: r, className: "adyen-pe-data-grid__cell--heading-content", children: l })
+      children: /* @__PURE__ */ n("div", { ref: r, className: "adyen-pe-data-grid__cell--heading-content", children: i })
     }
   );
 };
 export {
-  h as TableHeaderCell
+  f as TableHeaderCell
 };

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

@@ -1,68 +1,83 @@
-import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 /* empty css                         */
-import { useMemo as r } from "../../../external/preact/hooks/dist/hooks.module.js";
-import { useFetch as I } from "../../../hooks/useFetch.js";
-import { PayoutData as b } from "../../external/PayoutDetails/components/PayoutData.js";
-import w from "../../../hooks/useBalanceAccounts.js";
-import { getErrorMessage as E } from "../../utils/getErrorMessage.js";
-import { ErrorMessageDisplay as P } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
-import x from "../Typography/Typography.js";
-import { TypographyVariant as C } from "../Typography/types.js";
-import { useDataOverviewDetailsTitle as N } from "./useDataOverviewDetailsTitle.js";
-import { TransactionData as O } from "../../external/TransactionDetails/components/TransactionData/TransactionData.js";
-import { useConfigContext as B } from "../../../core/ConfigContext/context.js";
-import { EMPTY_OBJECT as d } from "../../../utils/value/constants.js";
-const F = {
+import { useMemo as y, 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";
+import { getErrorMessage as q } from "../../utils/getErrorMessage.js";
+import { ErrorMessageDisplay as z } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import M from "../Typography/Typography.js";
+import { TypographyVariant as R } from "../Typography/types.js";
+import { useDataOverviewDetailsTitle as V } from "./useDataOverviewDetailsTitle.js";
+import { TX_DETAILS_RESERVED_FIELDS_SET as j } from "../../external/TransactionDetails/components/constants.js";
+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";
+const X = {
   transaction: "getTransaction",
   payout: "getPayout"
-}, m = (t) => !("data" in t);
-function K(t) {
-  var s;
-  const f = r(() => m(t) ? null : t.data, [t]), n = r(() => m(t) ? t.id : null, [t]), l = B().endpoints[F[t.type]], { hideTitle: D, title: h } = N(t), { data: c, error: i, isFetching: y } = I(
-    r(
+}, l = (t) => !("data" in t);
+function dt(t) {
+  var v;
+  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: T } = O(
+    y(
       () => ({
-        fetchOptions: { enabled: !!n && !!l },
+        fetchOptions: { enabled: !!c && !!s },
         queryFn: async () => {
-          const A = t.type === "transaction" ? {
-            path: { transactionId: n }
+          const u = t.type === "transaction" ? {
+            path: { transactionId: c }
           } : {
-            query: { balanceAccountId: n, createdAt: t.date }
+            query: { balanceAccountId: c, createdAt: t.date }
           };
-          return l(d, { ...A });
+          return s(b, { ...u });
         }
       }),
-      [n, l, t]
+      [c, s, t]
     )
-  ), v = t.type === "payout" ? t.id : c == null ? void 0 : c.balanceAccountId, T = t.type === "payout" ? t == null ? void 0 : t.balanceAccountDescription : t == null ? void 0 : t.balanceAccount, { balanceAccounts: a } = w(v, !T), u = r(() => {
-    if (i)
-      return E(i, "weCouldNotLoadYourTransactions", t.onContactSupport);
-  }, [i, t.onContactSupport]), g = m(t) && t.type === "transaction" ? t.extraDetails : d, o = f ?? c;
-  return /* @__PURE__ */ e("div", { className: "adyen-pe-overview-details", children: [
-    !D && /* @__PURE__ */ e("div", { className: "adyen-pe-overview-details--title", children: /* @__PURE__ */ e(x, { variant: C.TITLE, medium: !0, children: h }) }),
-    i && u && /* @__PURE__ */ e("div", { className: "adyen-pe-overview-details--error-container", children: /* @__PURE__ */ e(P, { withImage: !0, ...u }) }),
-    t.type === "transaction" && /* @__PURE__ */ e(
-      O,
+  ), 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), D = y(() => {
+    if (o)
+      return q(o, "weCouldNotLoadYourTransactions", t.onContactSupport);
+  }, [o, t.onContactSupport]), r = S ?? e, [E, k] = x(), f = 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] } : {} }, {})
+      );
+    }
+  }, [e, t]), h = l(t) && t.type === "transaction" || t.type === "payout" ? t.dataCustomization : void 0;
+  return N(() => {
+    f();
+  }, [f]), /* @__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 && 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: o ? {
-          ...o || d,
-          balanceAccount: (t == null ? void 0 : t.balanceAccount) || (a == null ? void 0 : a[0])
+        transaction: r ? {
+          ...r || b,
+          balanceAccount: (t == null ? void 0 : t.balanceAccount) || (i == null ? void 0 : i[0])
         } : void 0,
-        error: !!(i && u),
-        isFetching: y,
-        extraFields: g
+        error: !!(o && D),
+        isFetching: T,
+        extraFields: E,
+        dataCustomization: h
       }
     ),
-    t.type === "payout" && o && /* @__PURE__ */ e(
-      b,
+    t.type === "payout" && r && /* @__PURE__ */ n(
+      B,
       {
-        balanceAccountId: n,
-        payout: o,
-        balanceAccountDescription: (t == null ? void 0 : t.balanceAccountDescription) || ((s = a == null ? void 0 : a[0]) == null ? void 0 : s.description),
-        isFetching: y
+        balanceAccountId: c,
+        payout: r,
+        balanceAccountDescription: (t == null ? void 0 : t.balanceAccountDescription) || ((v = i == null ? void 0 : i[0]) == null ? void 0 : v.description),
+        isFetching: T,
+        extraFields: E,
+        dataCustomization: h
       }
     )
   ] });
 }
 export {
-  K as default
+  dt as default
 };

package/dist/es/components/internal/DataOverviewDisplay/DataDetailsModal.js

@@ -1,31 +1,32 @@
 import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useEffect as u } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useEffect as C } from "../../../external/preact/hooks/dist/hooks.module.js";
 import { popoverUtil as h } from "../Popover/utils/popoverUtil.js";
-import C from "../../../core/Context/useCoreContext.js";
+import s from "../../../core/Context/useCoreContext.js";
 import M from "../Modal/ModalContent/ModalContent.js";
-import g from "../Modal/Modal.js";
+import a from "../Modal/Modal.js";
 const O = ({
-  children: p,
-  className: f,
+  children: i,
+  className: p,
   selectedDetail: o,
-  resetDetails: i
+  resetDetails: f,
+  dataCustomization: u
 }) => {
-  const { i18n: n } = C(), m = !!o;
-  return u(() => {
+  const { i18n: n } = s(), m = !!o;
+  return C(() => {
     m && h.closeAll();
-  }, [m]), /* @__PURE__ */ r("div", { className: f, children: [
-    p,
+  }, [m]), /* @__PURE__ */ r("div", { className: p, children: [
+    i,
     o && /* @__PURE__ */ r(
-      g,
+      a,
       {
         title: o != null && o.title ? n.get(o.title) : void 0,
         isOpen: !!o,
         "aria-label": n.get("payoutDetails"),
-        onClose: i,
+        onClose: f,
         isDismissible: !0,
         headerWithBorder: !1,
         size: (o == null ? void 0 : o.modalSize) ?? "large",
-        children: o && /* @__PURE__ */ r(M, { ...o == null ? void 0 : o.selection })
+        children: o && /* @__PURE__ */ r(M, { dataCustomization: { details: u }, ...o == null ? void 0 : o.selection })
       }
     )
   ] });

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

@@ -6,8 +6,8 @@ import I from "../../../core/Context/useCoreContext.js";
 /* empty css                         */
 import N from "../../../images/no-results.svg.js";
 import k from "classnames";
-import g from "../Button/Button.js";
 import { Fragment as p } from "../../../external/preact/dist/preact.module.js";
+import g from "../Button/Button.js";
 const f = {
   md: 680,
   lg: 1024

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

@@ -1,38 +1,38 @@
 import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import l from "classnames";
-import { ButtonVariant as n } from "../Button/types.js";
-import { useState as s, useEffect as c } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { ButtonVariant as o } from "../Button/types.js";
+import { useState as c, useEffect as s } from "../../../external/preact/hooks/dist/hooks.module.js";
 import m from "../../../core/Context/useCoreContext.js";
-import { useResponsiveViewport as u, mediaQueries as f } from "../../../hooks/useResponsiveViewport.js";
+import { useResponsiveContainer as u, containerQueries as f } from "../../../hooks/useResponsiveContainer.js";
 /* empty css               */
 import a from "../Button/Button.js";
 import { Icon as d } from "../Icon/Icon.js";
 import { isFunction as b } from "../../../utils/value/is.js";
-const o = "adyen-pe-filter-bar-mobile-switch", E = () => {
-  const e = u(f.down.xs), [t, r] = s(!e);
-  return c(() => {
-    r(!e);
-  }, [e]), { isMobileViewport: e, showingFilters: t, setShowingFilters: r };
-}, F = ({ isMobileViewport: e, showingFilters: t, setShowingFilters: r }) => e ? /* @__PURE__ */ i("div", { className: o, children: /* @__PURE__ */ i(
+const n = "adyen-pe-filter-bar-mobile-switch", E = () => {
+  const t = u(f.down.xs), [e, r] = c(!t);
+  return s(() => {
+    r(!t);
+  }, [t]), { isMobileContainer: t, showingFilters: e, setShowingFilters: r };
+}, F = ({ isMobileContainer: t, showingFilters: e, setShowingFilters: r }) => t ? /* @__PURE__ */ i("div", { className: n, children: /* @__PURE__ */ i(
   a,
   {
     iconButton: !0,
-    className: `${o}__button`,
+    className: `${n}__button`,
     disabled: !b(r),
-    onClick: () => r == null ? void 0 : r(!t),
-    variant: n.SECONDARY,
-    children: /* @__PURE__ */ i(d, { name: t ? "cross" : "filter" })
+    onClick: () => r == null ? void 0 : r(!e),
+    variant: o.SECONDARY,
+    children: /* @__PURE__ */ i(d, { name: e ? "cross" : "filter" })
   }
-) }) : null, I = (e) => {
-  const { i18n: t } = m();
-  return e.showingFilters ? /* @__PURE__ */ i(
+) }) : null, I = (t) => {
+  const { i18n: e } = m();
+  return t.showingFilters ? /* @__PURE__ */ i(
     "div",
     {
-      "aria-label": t.get("filterBar"),
-      className: l("adyen-pe-filter-bar", { "adyen-pe-filter-bar__content--mobile": e.isMobileViewport }),
+      "aria-label": e.get("filterBar"),
+      className: l("adyen-pe-filter-bar", { "adyen-pe-filter-bar__content--mobile": t.isMobileContainer }),
       children: [
-        e.children,
-        e.canResetFilters && !!e.resetFilters && /* @__PURE__ */ i(a, { variant: n.TERTIARY, onClick: e.resetFilters, children: t.get("button.clearAll") })
+        t.children,
+        t.canResetFilters && !!t.resetFilters && /* @__PURE__ */ i(a, { variant: o.TERTIARY, onClick: t.resetFilters, children: e.get("button.clearAll") })
       ]
     }
   ) : null;

package/dist/es/components/internal/FilterBar/filters/BaseFilter/BaseFilter.js

@@ -1,94 +1,94 @@
-import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useResponsiveViewport as g, mediaQueries as V } from "../../../../../hooks/useResponsiveViewport.js";
+import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useResponsiveContainer as g, containerQueries as C } from "../../../../../hooks/useResponsiveContainer.js";
 import $ from "../../components/FilterButton/FilterButton.js";
 import q from "../../../Popover/Popover.js";
 import { PopoverContainerVariant as z, PopoverContainerPosition as H } from "../../../Popover/types.js";
-import { TypographyElement as B, TypographyVariant as D } from "../../../Typography/types.js";
-import O from "../../../Typography/Typography.js";
+import { TypographyElement as B, TypographyVariant as O } from "../../../Typography/types.js";
+import S from "../../../Typography/Typography.js";
 import L from "../../../../../hooks/element/useUniqueIdentifier.js";
 import { memo as j } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useMemo as E, useCallback as _, useEffect as A, useState as Q } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useMemo as E, useCallback as D, useEffect as A, useState as Q } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import c from "../../../../../hooks/useBooleanState.js";
 import G from "../../../FormFields/InputText.js";
 import J from "../../../../../hooks/useCommitAction/useCommitAction.js";
 import { Fragment as K } from "../../../../../external/preact/dist/preact.module.js";
 import { isNull as W } from "../../../../../utils/value/is.js";
 import { isEmptyString as X } from "../../../../../utils/value/string.js";
-import { CommitAction as S } from "../../../../../hooks/useCommitAction/types.js";
-const Z = (s) => !s || X(s), ee = /* @__PURE__ */ (() => {
-  const s = (e) => {
-    const { editAction: f, name: a, onChange: u, onValueUpdated: r } = e, [l, n] = Q(e.value), m = _(
+import { CommitAction as _ } from "../../../../../hooks/useCommitAction/types.js";
+const Z = (r) => !r || X(r), ee = /* @__PURE__ */ (() => {
+  const r = (e) => {
+    const { editAction: f, name: i, onChange: u, onValueUpdated: s } = e, [l, n] = Q(e.value), m = D(
       (t) => {
-        const p = t.target.value.trim();
-        n(p), r(p);
+        const y = t.target.value.trim();
+        n(y), s(y);
       },
-      [r]
+      [s]
     );
     return A(() => {
-      if (f === S.CLEAR) {
+      if (f === _.CLEAR) {
         const t = "";
-        n(t), r(t), u(t);
+        n(t), s(t), u(t);
       }
-      f === S.APPLY && u(l ?? "");
-    }, [l, f, u, r]), /* @__PURE__ */ i(G, { name: a, value: l, onInput: m });
+      f === _.APPLY && u(l ?? "");
+    }, [l, f, u, s]), /* @__PURE__ */ a(G, { name: i, value: l, onInput: m });
   };
-  return (e) => /* @__PURE__ */ i(s, { ...e });
-})(), te = ({ render: s, ...e }) => {
+  return (e) => /* @__PURE__ */ a(r, { ...e });
+})(), te = ({ render: r, ...e }) => {
   var N;
-  const f = g(V.down.xs), [a, u] = c(!1), [r, l] = c(!1), n = E(() => e.isValueEmpty ?? Z, [e.isValueEmpty]), [m, t] = c(n(e.value)), [p, v] = c(!1), [w, h] = c(!1), [T, M] = c(n(e.value)), b = L(), I = E(() => s ?? ee, [s]), k = _(
+  const f = g(C.down.xs), [i, u] = c(!1), [s, l] = c(!1), n = E(() => e.isValueEmpty ?? Z, [e.isValueEmpty]), [m, t] = c(n(e.value)), [y, h] = c(!1), [T, v] = c(!1), [I, M] = c(n(e.value)), b = L(), w = E(() => r ?? ee, [r]), k = D(
     (o) => {
       const d = n(o ?? void 0);
-      t(d), M(W(o)), h(p ? o !== e.value : !d);
+      t(d), M(W(o)), v(y ? o !== e.value : !d);
     },
-    [n, t, M, h, p, e.value]
-  ), { commitAction: x, commitActionButtons: R, committing: C, resetCommitAction: P } = J({
-    applyDisabled: T || !w,
+    [n, t, M, v, y, e.value]
+  ), { commitAction: x, commitActionButtons: R, committing: V, resetCommitAction: P } = J({
+    applyDisabled: I || !T,
     resetDisabled: m
-  }), [y, F] = E(() => {
+  }), [p, F] = E(() => {
     const o = (d) => () => {
-      d !== a && (d && (P(), h(!1), v(!1)), u(d), l(d));
+      d !== i && (d && (P(), v(!1), h(!1)), u(d), l(d));
     };
     return [o(!1), o(!0)];
-  }, [u, a, P, l, v, h]);
+  }, [u, i, P, l, h, v]);
   A(() => {
-    if (r) {
+    if (s) {
       const o = n(e.value);
-      l(!1), t(o), v(!o);
+      l(!1), t(o), h(!o);
     }
-  }, [e.value, r, n, l, t, v]), A(() => {
-    C && y(), t(m);
-  }, [C, y, t, m]);
-  const U = g(V.only.sm), Y = g(V.only.md);
-  return /* @__PURE__ */ i(K, { children: [
-    /* @__PURE__ */ i("div", { className: `adyen-pe-filter adyen-pe-filter--${e.type}`, children: E(
-      () => /* @__PURE__ */ i(
+  }, [e.value, s, n, l, t, h]), A(() => {
+    V && p(), t(m);
+  }, [V, p, t, m]);
+  const U = g(C.only.sm), Y = g(C.only.md);
+  return /* @__PURE__ */ a(K, { children: [
+    /* @__PURE__ */ a("div", { className: `adyen-pe-filter adyen-pe-filter--${e.type}`, children: E(
+      () => /* @__PURE__ */ a(
         $,
         {
           classNameModifiers: [
             ...e.appliedFilterAmount ? ["with-counter"] : [],
             ...e.classNameModifiers ?? [],
-            ...a ? ["active"] : [],
+            ...i ? ["active"] : [],
             ...m ? [] : ["has-selection"]
           ],
-          onClick: a ? y : F,
+          onClick: i ? p : F,
           tabIndex: 0,
           ref: b,
-          children: /* @__PURE__ */ i("div", { className: "adyen-pe-filter-button__default-container", children: [
-            /* @__PURE__ */ i(
-              O,
+          children: /* @__PURE__ */ a("div", { className: "adyen-pe-filter-button__default-container", children: [
+            /* @__PURE__ */ a(
+              S,
               {
                 el: B.SPAN,
-                variant: D.BODY,
+                variant: O.BODY,
                 stronger: !0,
                 className: "adyen-pe-filter-button__label",
                 children: e.label
               }
             ),
-            !!e.appliedFilterAmount && /* @__PURE__ */ i("div", { className: "adyen-pe-filter-button__counter-wrapper", children: /* @__PURE__ */ i(
-              O,
+            !!e.appliedFilterAmount && /* @__PURE__ */ a("div", { className: "adyen-pe-filter-button__counter-wrapper", children: /* @__PURE__ */ a(
+              S,
               {
                 el: B.SPAN,
-                variant: D.BODY,
+                variant: O.BODY,
                 stronger: !0,
                 className: "adyen-pe-filter-button__counter",
                 children: e.appliedFilterAmount
@@ -101,23 +101,23 @@ const Z = (s) => !s || X(s), ee = /* @__PURE__ */ (() => {
         e.appliedFilterAmount,
         e.classNameModifiers,
         e.label,
-        a,
+        i,
         m,
-        y,
+        p,
         F,
         b
       ]
     ) }),
-    a && /* @__PURE__ */ i(
+    i && /* @__PURE__ */ a(
       q,
       {
         actions: R,
         title: (N = e.title) == null ? void 0 : N.trim(),
         variant: z.POPOVER,
         modifiers: ["filter"],
-        open: a,
+        open: i,
         "aria-label": `${e.label}`,
-        dismiss: y,
+        dismiss: p,
         dismissible: !1,
         withContentPadding: e.withContentPadding ?? !0,
         divider: !0,
@@ -127,7 +127,7 @@ const Z = (s) => !s || X(s), ee = /* @__PURE__ */ (() => {
         containerSize: e.containerSize,
         showOverlay: f,
         fitPosition: U || Y,
-        children: I({ ...e, editAction: x, onValueUpdated: k })
+        children: w({ ...e, editAction: x, onValueUpdated: k })
       }
     )
   ] });

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

@@ -1,43 +1,45 @@
 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 d } from "../components/SelectListItem.js";
+import { memo as p } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useCallback as d } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import f from "../../../../../core/Context/useCoreContext.js";
+import { useResponsiveContainer as _, containerQueries as S } from "../../../../../hooks/useResponsiveContainer.js";
+import { renderDefaultSingleSelectionCheckedness as h } 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(
+import { Fragment as L } from "../../../../../external/preact/dist/preact.module.js";
+import E from "../Select.js";
+const o = "adyen-pe-balance-account-selector", N = `${o}__account-id`, i = `${o}__account-label`, w = p(
   ({
-    activeBalanceAccount: r,
+    activeBalanceAccount: e,
     balanceAccountSelectionOptions: m,
-    onBalanceAccountSelection: t
+    onBalanceAccountSelection: l
   }) => {
-    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 })
+    const t = _(S.down.xs), { i18n: n } = f(), C = d(
+      (r) => /* @__PURE__ */ s(L, { children: [
+        /* @__PURE__ */ s("div", { className: r.contentClassName, children: [
+          r.item.name && /* @__PURE__ */ s("span", { className: i, children: r.item.name }),
+          /* @__PURE__ */ s("span", { className: r.item.name ? N : i, children: r.item.id })
         ] }),
-        d(e)
+        h(r)
       ] }),
       []
     );
     return m && m.length > 1 ? /* @__PURE__ */ s(
-      f,
+      E,
       {
         popoverClassNameModifiers: [o],
-        onChange: t,
+        onChange: l,
         filterable: !1,
         multiSelect: !1,
-        selected: r == null ? void 0 : r.id,
+        placeholder: (e == null ? void 0 : e.id) || n.get("balanceAccount"),
+        selected: e == null ? void 0 : e.id,
         withoutCollapseIndicator: !0,
         items: m,
-        renderListItem: l,
-        showOverlay: i
+        renderListItem: C,
+        showOverlay: t
       }
     ) : null;
   }
 );
 export {
-  A as default
+  w as default
 };