@adyen/adyen-platform-experience-web 1.7.1 → 1.8.0

package/dist/es/components/external/TransactionsOverview/components/TransactionTotalItem/TransactionTotalItem.js

@@ -1,56 +1,66 @@
 import { jsx as x } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import b from "../../../../../core/Context/useCoreContext.js";
-import { useRef as s, useMemo as C } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { SummaryItem as k } from "../SummaryItem/SummaryItem.js";
-const S = ({
+import V from "../../../../../core/Context/useCoreContext.js";
+import { useRef as t, useMemo as h } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { SummaryItem as C } from "../SummaryItem/SummaryItem.js";
+const K = ({
   total: e,
   hiddenField: n,
-  isHeader: t = !1,
+  isHeader: o = !1,
   isHovered: i = !1,
   isSkeleton: r = !1,
-  isLoading: c = !1,
-  widths: u,
-  onWidthsSet: l
+  isLoading: a = !1,
+  widths: l,
+  onWidthsSet: c,
+  expensesElemId: u,
+  incomingsElemId: g
 }) => {
-  const { i18n: o } = b(), m = s(null), f = s(null), g = s(null), a = C(() => {
-    const p = {
-      labelKey: "totalIncoming",
+  const { i18n: s } = V(), m = t(null), f = t(null), p = t(null), y = h(() => {
+    const b = {
+      elemId: g,
+      labelKey: "transactions.overview.totals.tags.incoming",
       ref: m,
       skeletonWidth: 80,
-      getValue: () => e && o.amount(e.incomings, e.currency),
-      tooltipLabel: "tooltip.totalIncoming"
-    }, y = {
-      labelKey: "totalOutgoing",
+      getValue: () => e && s.amount(e.incomings, e.currency),
+      tooltipLabel: "transactions.overview.totals.tags.incoming.description",
+      get ariaLabel() {
+        return `${s.get(this.labelKey)}: ${this.getValue()}`;
+      }
+    }, v = {
+      elemId: u,
+      labelKey: "transactions.overview.totals.tags.outgoing",
       ref: f,
       skeletonWidth: 80,
-      getValue: () => e && o.amount(e.expenses, e.currency),
-      tooltipLabel: "tooltip.totalOutgoing"
+      getValue: () => e && s.amount(e.expenses, e.currency),
+      tooltipLabel: "transactions.overview.totals.tags.outgoing.description",
+      get ariaLabel() {
+        return `${s.get(this.labelKey)}: ${this.getValue()}`;
+      }
     };
     return [
-      ...n !== "incomings" ? [p] : [],
-      ...n !== "expenses" ? [y] : [],
+      ...n !== "incomings" ? [b] : [],
+      ...n !== "expenses" ? [v] : [],
       {
-        ref: g,
+        ref: p,
         skeletonWidth: 40,
         valueHasLabelStyle: !0,
         getValue: () => e == null ? void 0 : e.currency
       }
     ];
-  }, [e, n, o]);
+  }, [e, n, s]);
   return /* @__PURE__ */ x(
-    k,
+    C,
     {
       isHovered: i,
       isEmpty: !e,
-      columnConfigs: a,
-      isHeader: t,
+      columnConfigs: y,
+      isHeader: o,
       isSkeletonVisible: r,
-      isLoading: c,
-      widths: u,
-      onWidthsSet: l
+      isLoading: a,
+      widths: l,
+      onWidthsSet: c
     }
   );
 };
 export {
-  S as TransactionTotalItem
+  K as TransactionTotalItem
 };

package/dist/es/components/external/TransactionsOverview/components/TransactionTotals/TotalsCard.js

@@ -1,47 +1,86 @@
 import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useState as p, useMemo as c } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import h from "../../../../internal/ExpandableCard/ExpandableCard.js";
-import { memo as M } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { TransactionTotalItem as u } from "../TransactionTotalItem/TransactionTotalItem.js";
-import { BaseList as x } from "../../../../internal/BaseList/BaseList.js";
-import { useMaxWidthsState as T } from "../../hooks/useMaxWidths.js";
+import { memo as h } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useState as $, useMemo as i } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import y from "../../../../../core/Context/useCoreContext.js";
+import w from "../../../../internal/ExpandableCard/ExpandableCard.js";
+import { TransactionTotalItem as v } from "../TransactionTotalItem/TransactionTotalItem.js";
+import { useMaxWidthsState as M } from "../../hooks/useMaxWidths.js";
 /* empty css                       */
-const C = M(({ totals: s, isLoading: o, hiddenField: a, fullWidth: l }) => {
-  const [m, n] = T(), [i, t] = p(!1), [f, ...d] = c(() => s.map((e) => (e.key = `${e.currency}-${Math.random()}`, e)), [s]);
-  return /* @__PURE__ */ r(
-    h,
+import { Fragment as C } from "../../../../../external/preact/dist/preact.module.js";
+import { uniqueId as I } from "../../../../../utils/random/uniqueId.js";
+const P = h(({ totals: p, isLoading: o, hiddenField: t, fullWidth: x, ...E }) => {
+  const { i18n: n } = y(), [m, a] = M(), [l, c] = $(!1), d = i(() => n.get("transactions.overview.totals.currency.label"), [n]), [s, ...u] = i(() => p.map((e) => (e.key = `${e.currency}-${Math.random()}`, e.expensesElemId = I("elem"), e.incomingsElemId = I("elem"), e)), [p]), f = i(() => {
+    switch (t) {
+      case "expenses":
+        return n.get("transactions.overview.totals.lists.incoming");
+      case "incomings":
+        return n.get("transactions.overview.totals.lists.outgoing");
+      default:
+        return n.get("transactions.overview.totals.lists.default");
+    }
+  }, [n, t]), g = i(
+    () => /* @__PURE__ */ r(
+      "div",
+      {
+        role: "listitem",
+        "aria-label": s ? `${d}: ${s.currency}` : void 0,
+        "aria-describedby": s ? `${s.incomingsElemId} ${s.expensesElemId}` : void 0,
+        children: /* @__PURE__ */ r(
+          v,
+          {
+            isHovered: l,
+            total: s,
+            hiddenField: t,
+            widths: m,
+            isHeader: !0,
+            isSkeleton: o,
+            isLoading: o,
+            onWidthsSet: a,
+            expensesElemId: s == null ? void 0 : s.expensesElemId,
+            incomingsElemId: s == null ? void 0 : s.incomingsElemId
+          }
+        )
+      }
+    ),
+    [l, s, t, m, o, a, d]
+  ), b = i(() => !o && u.length ? /* @__PURE__ */ r(C, { children: u.map((e) => /* @__PURE__ */ r(
+    "div",
     {
-      renderHeader: /* @__PURE__ */ r(
-        u,
+      role: "listitem",
+      "aria-label": `${d}: ${e.currency}`,
+      "aria-describedby": `${e.incomingsElemId} ${e.expensesElemId}`,
+      children: /* @__PURE__ */ r(
+        v,
         {
-          isHovered: i,
-          total: f,
-          hiddenField: a,
-          widths: m,
-          isHeader: !0,
-          isSkeleton: o,
-          isLoading: o,
-          onWidthsSet: n
-        }
-      ),
-      fullWidth: l,
-      onMouseEnter: () => t(!0),
-      onFocus: () => t(!0),
-      onMouseLeave: () => t(!1),
-      onBlur: () => t(!1),
-      children: !o && d.length && /* @__PURE__ */ r(x, { children: d.map((e) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
-        u,
-        {
-          isHovered: i,
+          isHovered: l,
           total: e,
-          hiddenField: a,
+          hiddenField: t,
           widths: m,
-          onWidthsSet: n
+          onWidthsSet: a,
+          expensesElemId: e.expensesElemId,
+          incomingsElemId: e.incomingsElemId
         }
-      ) }, e.key)) })
+      )
+    },
+    e.key
+  )) }) : void 0, [o, u, l, t, m, a, d]);
+  return /* @__PURE__ */ r(
+    w,
+    {
+      renderContent: ({ collapsibleContent: e }) => /* @__PURE__ */ r("div", { role: "list", "aria-label": f, children: [
+        g,
+        e
+      ] }),
+      fullWidth: x,
+      onMouseEnter: () => c(!0),
+      onFocus: () => c(!0),
+      onMouseLeave: () => c(!1),
+      onBlur: () => c(!1),
+      ...E,
+      children: b
     }
   );
 });
 export {
-  C as TotalsCard
+  P as TotalsCard
 };

package/dist/es/components/external/TransactionsOverview/components/TransactionTotals/TransactionTotals.js

@@ -1,54 +1,81 @@
-import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useCallback as u, useMemo as S } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useCallback as T, useMemo as S } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import b from "../../../../../core/Context/useCoreContext.js";
 import { useFetch as k } from "../../../../../hooks/useFetch.js";
-import { BASE_CLASS as q, ITEM_CLASS as y } from "./constants.js";
-import { memo as L } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useResponsiveContainer as N, containerQueries as _ } from "../../../../../hooks/useResponsiveContainer.js";
+import { BASE_CLASS as q, ITEM_CLASS as x } from "./constants.js";
+import { memo as w } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useResponsiveContainer as L, containerQueries as N } from "../../../../../hooks/useResponsiveContainer.js";
 /* empty css                       */
 import { TotalsCard as p } from "./TotalsCard.js";
-import { Fragment as v } from "../../../../../external/preact/dist/preact.module.js";
+import { Fragment as _ } from "../../../../../external/preact/dist/preact.module.js";
 import { useConfigContext as B } from "../../../../../core/ConfigContext/context.js";
 import { EMPTY_OBJECT as j } from "../../../../../utils/value/constants.js";
-const Z = L(
+const U = w(
   ({
-    availableCurrencies: e,
-    isAvailableCurrenciesFetching: F,
-    balanceAccountId: r,
+    availableCurrencies: i,
+    isAvailableCurrenciesFetching: y,
+    balanceAccountId: e,
     createdSince: f,
-    createdUntil: d,
-    categories: l,
-    statuses: c,
+    createdUntil: c,
+    categories: d,
+    statuses: g,
     maxAmount: C,
-    minAmount: h,
-    currencies: T,
-    fullWidth: i
+    minAmount: u,
+    currencies: h,
+    fullWidth: n
   }) => {
-    const { getTransactionTotals: t } = B().endpoints, x = u(async () => t == null ? void 0 : t(j, {
+    const { i18n: a } = b(), { getTransactionTotals: s } = B().endpoints, F = T(async () => s == null ? void 0 : s(j, {
       query: {
         createdSince: f,
-        createdUntil: d,
-        categories: l,
-        statuses: c,
+        createdUntil: c,
+        categories: d,
+        statuses: g,
         maxAmount: C,
-        minAmount: h,
-        currencies: T,
-        balanceAccountId: r
+        minAmount: u,
+        currencies: h,
+        balanceAccountId: e
       }
-    }), [r, l, f, d, T, t, C, h, c]), { data: o, isFetching: E } = k({
-      fetchOptions: S(() => ({ enabled: !!r && !!t }), [r, t]),
-      queryFn: x
-    }), m = !r || E || F, a = u(() => {
-      if (!e || !o)
+    }), [e, d, f, c, h, s, C, u, g]), { data: o, isFetching: E } = k({
+      fetchOptions: S(() => ({ enabled: !!e && !!s }), [e, s]),
+      queryFn: F
+    }), m = !e || E || y, l = T(() => {
+      if (!i || !o)
         return o == null ? void 0 : o.data;
-      const g = e.map((n) => o.data.find((O) => O.currency === n) || { currency: n, incomings: 0, expenses: 0 });
-      return g.concat(o.data.filter((n) => !g.includes(n)));
-    }, [e, o])() ?? [], M = N(_.only.xs);
-    return /* @__PURE__ */ s("div", { className: q, children: M ? /* @__PURE__ */ s(v, { children: [
-      /* @__PURE__ */ s("div", { className: y, children: /* @__PURE__ */ s(p, { totals: a, isLoading: m, hiddenField: "expenses", fullWidth: i }) }),
-      /* @__PURE__ */ s("div", { className: y, children: /* @__PURE__ */ s(p, { totals: a, isLoading: m, hiddenField: "incomings", fullWidth: i }) })
-    ] }) : /* @__PURE__ */ s(p, { totals: a, isLoading: m, fullWidth: i }) });
+      const v = i.map((r) => o.data.find((O) => O.currency === r) || { currency: r, incomings: 0, expenses: 0 });
+      return v.concat(o.data.filter((r) => !v.includes(r)));
+    }, [i, o])() ?? [], M = L(N.only.xs);
+    return /* @__PURE__ */ t("div", { className: q, children: M ? /* @__PURE__ */ t(_, { children: [
+      /* @__PURE__ */ t("div", { className: x, children: /* @__PURE__ */ t(
+        p,
+        {
+          "aria-label": a.get("transactions.overview.totals.labels.incoming"),
+          totals: l,
+          isLoading: m,
+          hiddenField: "expenses",
+          fullWidth: n
+        }
+      ) }),
+      /* @__PURE__ */ t("div", { className: x, children: /* @__PURE__ */ t(
+        p,
+        {
+          "aria-label": a.get("transactions.overview.totals.labels.outgoing"),
+          totals: l,
+          isLoading: m,
+          hiddenField: "incomings",
+          fullWidth: n
+        }
+      ) })
+    ] }) : /* @__PURE__ */ t(
+      p,
+      {
+        "aria-label": a.get("transactions.overview.totals.labels.default"),
+        totals: l,
+        isLoading: m,
+        fullWidth: n
+      }
+    ) });
   }
 );
 export {
-  Z as default
+  U as default
 };