@adyen/adyen-platform-experience-web 1.9.0 → 1.10.1

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

@@ -1,48 +1,45 @@
 import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { AmountSkeleton as b } from "../AmountSkeleton/AmountSkeleton.js";
-import { BASE_CLASS as S, PLACEHOLDER_CLASS as f, AMOUNT_CLASS as T, LABEL_CLASS as E, BODY_CLASS as N } from "./constants.js";
-import { SummaryItemLabel as h } from "./SummaryItemLabel.js";
+import { BASE_CLASS as y, PLACEHOLDER_CLASS as f, AMOUNT_CLASS as T, LABEL_CLASS as E, BODY_CLASS as N } from "./constants.js";
+import { SummaryItemLabel as S } from "./SummaryItemLabel.js";
 import { Tooltip as B } from "../../../../internal/Tooltip/Tooltip.js";
-import { TypographyVariant as n, TypographyElement as I } from "../../../../internal/Typography/types.js";
+import { TypographyVariant as s, TypographyElement as I } from "../../../../internal/Typography/types.js";
 import O from "../../../../internal/Typography/Typography.js";
 import _ from "../../../../../core/Context/useCoreContext.js";
-import p from "classnames";
+import n from "classnames";
 import { useEffect as x, useCallback as D } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 /* empty css                 */
 import { useResponsiveContainer as H, containerQueries as M } from "../../../../../hooks/useResponsiveContainer.js";
 const $ = ({
-  columnConfigs: i,
-  isHeader: u = !1,
-  showLabelUnderline: d = !1,
-  isSkeletonVisible: o = !1,
-  isLoading: C = !1,
-  widths: m,
-  onWidthsSet: L,
-  isEmpty: A
+  columnConfigs: p,
+  isHeader: i = !1,
+  showLabelUnderline: h = !1,
+  isSkeletonVisible: a = !1,
+  isLoading: d = !1,
+  widths: l,
+  onWidthsSet: u,
+  isEmpty: C
 }) => {
-  const { i18n: s } = _();
+  const { i18n: o } = _();
   x(() => {
-    const e = i.map((r) => {
-      var a, l;
-      return ((l = (a = r.ref) == null ? void 0 : a.current) == null ? void 0 : l.getBoundingClientRect().width) ?? 0;
-    });
-    L(e);
-  }, [L]);
-  const c = (e) => ({ width: m && m[e] ? m[e] : "auto" }), y = H(M.only.xs), v = D(
-    (e, r) => e.valueHasLabelStyle ? n.CAPTION : r && !y ? n.BODY : n.TITLE,
-    [y]
+    const e = p.map((r) => r.ref?.current?.getBoundingClientRect().width ?? 0);
+    u(e);
+  }, [u]);
+  const A = (e) => ({ width: l && l[e] ? l[e] : "auto" }), L = H(M.only.xs), c = D(
+    (e, r) => e.valueHasLabelStyle ? s.CAPTION : r && !L ? s.BODY : s.TITLE,
+    [L]
   );
-  return /* @__PURE__ */ t("div", { className: p(S, { [N]: !u }), children: i.map((e, r) => {
-    const a = e.getValue(), l = !!a && a.length > 12;
+  return /* @__PURE__ */ t("div", { className: n(y, { [N]: !i }), children: p.map((e, r) => {
+    const m = e.getValue(), v = !!m && m.length > 15;
     return /* @__PURE__ */ t("div", { children: [
-      u && /* @__PURE__ */ t("div", { role: "presentation", children: e.tooltipLabel ? /* @__PURE__ */ t(B, { content: s.get(`${e.tooltipLabel}`), isUnderlineVisible: d, children: /* @__PURE__ */ t(h, { config: e, i18n: s, isSkeletonVisible: o }) }) : /* @__PURE__ */ t(h, { config: e, i18n: s, isSkeletonVisible: o }) }),
-      o ? /* @__PURE__ */ t(b, { isLoading: C, hasMargin: e.hasSkeletonMargin, width: e.skeletonWidth + "px" }) : A ? /* @__PURE__ */ t("span", { className: p([S, f]) }) : /* @__PURE__ */ t("div", { id: e.elemId, ref: e.ref, style: c(r), "aria-label": e.ariaLabel, role: "presentation", children: /* @__PURE__ */ t(
+      i && /* @__PURE__ */ t("div", { role: "presentation", children: e.tooltipLabel ? /* @__PURE__ */ t(B, { content: o.get(`${e.tooltipLabel}`), isUnderlineVisible: h, children: /* @__PURE__ */ t(S, { config: e, i18n: o, isSkeletonVisible: a }) }) : /* @__PURE__ */ t(S, { config: e, i18n: o, isSkeletonVisible: a }) }),
+      a ? /* @__PURE__ */ t(b, { isLoading: d, hasMargin: e.hasSkeletonMargin, width: e.skeletonWidth + "px" }) : C ? /* @__PURE__ */ t("span", { className: n([y, f]) }) : /* @__PURE__ */ t("div", { id: e.elemId, ref: e.ref, style: A(r), "aria-label": e.ariaLabel, role: "presentation", children: /* @__PURE__ */ t(
         O,
         {
           el: I.SPAN,
-          variant: v(e, l),
-          className: p({ [E]: e.valueHasLabelStyle, [T]: !e.valueHasLabelStyle }),
-          children: a
+          variant: c(e, v),
+          className: n({ [E]: e.valueHasLabelStyle, [T]: !e.valueHasLabelStyle }),
+          children: m
         }
       ) })
     ] }, r);

package/dist/es/components/external/TransactionsOverview/components/TransactionFilters/TransactionDateFilter.js

@@ -0,0 +1,94 @@
+import { jsx as v } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TRANSACTION_DATE_RANGE_CUSTOM as E, TRANSACTION_DATE_RANGE_DEFAULT as x, TRANSACTION_DATE_RANGE_MAX_YEARS as H, TRANSACTION_DATE_RANGES as S, TRANSACTION_DATE_RANGE_YEAR_TO_DATE as K, TRANSACTION_DATE_RANGE_LAST_MONTH as j, TRANSACTION_DATE_RANGE_THIS_MONTH as k, TRANSACTION_DATE_RANGE_LAST_WEEK as U, TRANSACTION_DATE_RANGE_THIS_WEEK as V, TRANSACTION_DATE_RANGE_LAST_180_DAYS as W, TRANSACTION_DATE_RANGE_LAST_30_DAYS as q, TRANSACTION_DATE_RANGE_LAST_7_DAYS as B } from "../../constants.js";
+import { useMemo as c, useRef as J, useState as I, useCallback as d, useEffect as p } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { getDateRangeTimestamps as X } from "../../../../internal/Calendar/calendar/timerange/utils.js";
+import { DateRangeFilterParam as h } from "../../../../internal/FilterBar/filters/DateFilter/types.js";
+import Q from "../../../../internal/FilterBar/filters/DateFilter/DateFilterCore.js";
+import Z from "../../../../../hooks/useAnalytics/useFilterAnalyticsEvent.js";
+import $ from "../../../../../core/Context/useCoreContext.js";
+import z from "../../../../internal/Calendar/calendar/timerange/factory.js";
+import { unreachable as ee } from "../../../../../utils/common.js";
+import { EMPTY_OBJECT as te } from "../../../../../utils/value/constants.js";
+const ne = (t) => {
+  switch (t) {
+    case E:
+      return "Custom";
+    case B:
+      return "Last 7 days";
+    case q:
+      return "Last 30 days";
+    case W:
+      return "Last 180 days";
+    case V:
+      return "This week";
+    case U:
+      return "Last week";
+    case k:
+      return "This month";
+    case j:
+      return "Last month";
+    case K:
+      return "Year to date";
+    default:
+      return ee(t);
+  }
+}, ue = ({ createdDate: t, eventCategory: w, eventSubCategory: G, setCreatedDate: L, timezone: T }) => {
+  const { i18n: n } = $(), N = c(() => n.get("common.filters.types.date.label"), [n]), a = c(() => n.get(E), [n]), _ = c(() => n.get(x), [n]), D = J(t), [l, g] = I(_), [O, C] = I(!1), { from: m, to: u, since: y, until: F, now: b } = c(() => {
+    const e = Date.now() + 1, r = new Date(e), s = new Date(r);
+    s.setFullYear(s.getFullYear() - H);
+    const { from: R, to: i } = X(t, e, T), f = new Date(R), P = new Date(i);
+    return {
+      from: f.toISOString(),
+      to: P.toISOString(),
+      since: s.toISOString(),
+      until: r.toISOString(),
+      now: e - 1
+      // remove time shift
+    };
+  }, [t, T]), { logEvent: A } = Z({ category: w, subCategory: G, label: "Date filter" }), M = d(
+    (o = te) => {
+      const e = o.selectedPresetOption || _;
+      if (e !== l || e === a) {
+        let r = E, s;
+        if (e === a) {
+          const i = o[h.FROM], f = o[h.TO];
+          s = z({
+            from: new Date(i || m).getTime(),
+            to: new Date(f || u).getTime()
+          })();
+        } else
+          [r, s] = Object.entries(S).find(([i]) => n.get(i) === e);
+        const R = e === a ? String([s.from, s.to]) : ne(r);
+        g(e), L(D.current = s), A?.("update", R);
+      }
+    },
+    [n, m, u, a, _, l, A]
+  ), Y = d(() => C(!0), []);
+  return p(() => {
+    O && (C(!1), D.current !== t && A?.("reset"));
+  }, [O, t, A]), p(() => {
+    const o = Object.entries(S).find(([e, r]) => r === t)?.[0];
+    g(o ? n.get(o) : a);
+  }, [t, a, n]), /* @__PURE__ */ v(
+    Q,
+    {
+      name: "createdAt",
+      now: b,
+      label: N,
+      "aria-label": N,
+      sinceDate: y,
+      untilDate: F,
+      from: m,
+      to: u,
+      onChange: M,
+      onResetAction: Y,
+      selectedPresetOption: l,
+      timeRangePresetOptions: S,
+      timezone: T,
+      showTimezoneInfo: !0
+    }
+  );
+};
+export {
+  ue as default
+};

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

@@ -0,0 +1,130 @@
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { INITIAL_FILTERS as Z, TRANSACTION_ANALYTICS_SUBCATEGORY_LIST as J, TRANSACTION_ANALYTICS_SUBCATEGORY_INSIGHTS as W, TRANSACTION_ANALYTICS_CATEGORY as X, TRANSACTION_CATEGORIES as $ } from "../../constants.js";
+import { compareTransactionsFilters as D } from "../utils.js";
+import { useRef as p, useState as s, useMemo as a, useCallback as V, useEffect as y } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useResponsiveContainer as ee, containerQueries as te } from "../../../../../hooks/useResponsiveContainer.js";
+import re from "../../../../../hooks/useBalanceAccountSelection.js";
+import w from "./TransactionMultiSelectionFilter.js";
+import ce from "./TransactionPspReferenceFilter.js";
+import ne from "../../../../../core/Context/useCoreContext.js";
+import oe from "../../hooks/useCurrencySelection.js";
+import se from "./TransactionDateFilter.js";
+import { selectionOptionsFor as U } from "../MultiSelectionFilter/useMultiSelectionFilter/utils.js";
+import ae from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
+import { Fragment as Y } from "../../../../../external/preact/dist/preact.module.js";
+import le from "../../../../internal/FormFields/Select/Select.js";
+import { FilterBar as ie } from "../../../../internal/FilterBar/FilterBar.js";
+const l = X, ue = /* @__PURE__ */ (() => {
+  const c = /* @__PURE__ */ new Set(["balanceAccount"]);
+  return () => {
+    let i = {};
+    return (u) => D(i, i = u, c);
+  };
+})(), Ne = ({
+  availableCurrencies: c,
+  balanceAccounts: i,
+  isTransactionsView: u,
+  onChange: b,
+  insightsCurrency: G,
+  setInsightsCurrency: f,
+  ...x
+}) => {
+  const { i18n: m } = ne(), n = u ? J : W, e = p({ ...Z }), k = ee(te.down.xs), [R, M] = s(e.current.statuses), [A, g] = s(e.current.categories), [S, d] = s(e.current.currencies), [C, h] = s(e.current.createdDate), [F, O] = s(e.current.paymentPspReference), [o, I] = s(e.current.balanceAccount), t = a(
+    () => ({ balanceAccount: o, categories: A, createdDate: C, currencies: S, paymentPspReference: F, statuses: R }),
+    [o, A, C, S, F, R]
+  ), v = p(), N = p(), j = a(() => D(t, e.current), [t]), q = V(() => {
+    M(e.current.statuses), g(e.current.categories), d(e.current.currencies), h(e.current.createdDate), O(e.current.paymentPspReference), I(e.current.balanceAccount);
+  }, []), z = a(() => U($), []), H = a(() => m.get("transactions.overview.filters.types.category.label"), [m]), K = a(() => U(c ?? []), [c]), T = a(() => m.get("transactions.overview.filters.types.currency.label"), [m]), L = "Currency filter", _ = p(ue()).current, { resetBalanceAccountSelection: me, ...P } = re({
+    allowAllSelection: !1,
+    onUpdateSelection: I,
+    balanceAccounts: i,
+    eventCategory: l,
+    eventSubCategory: n
+  }), { activeCurrency: B, currencySelectionOptions: E, onCurrencySelection: Q } = oe({
+    eventLabel: L,
+    onUpdateSelection: f,
+    selectedCurrency: G ?? o?.defaultCurrencyCode,
+    availableCurrencies: c,
+    eventCategory: l,
+    eventSubCategory: n
+  });
+  return y(() => {
+    v.current !== c && (_(t) && (d(e.current.currencies), f?.(t.balanceAccount?.defaultCurrencyCode)), v.current = c);
+  }, [c, t, _, f]), y(() => {
+    N.current !== t && (N.current = t, b?.(t));
+  }, [b, t]), y(() => {
+    !e.current.balanceAccount && o && (e.current.balanceAccount = o);
+  }, [o]), /* @__PURE__ */ r(
+    ie,
+    {
+      ...x,
+      ariaLabelKey: "transactions.overview.filters.label",
+      canResetFilters: j && !1,
+      resetFilters: q,
+      children: [
+        /* @__PURE__ */ r(ae, { ...P }),
+        /* @__PURE__ */ r(
+          se,
+          {
+            createdDate: C,
+            eventCategory: l,
+            eventSubCategory: n,
+            setCreatedDate: h,
+            timezone: P.activeBalanceAccount?.timeZone
+          }
+        ),
+        u ? /* @__PURE__ */ r(Y, { children: [
+          /* @__PURE__ */ r(
+            w,
+            {
+              eventLabel: "Category filter",
+              eventCategory: l,
+              eventSubCategory: n,
+              placeholder: H,
+              selectionOptions: z,
+              selection: A,
+              onUpdateFilter: g
+            }
+          ),
+          /* @__PURE__ */ r(
+            w,
+            {
+              eventCategory: l,
+              eventSubCategory: n,
+              eventLabel: L,
+              placeholder: T,
+              selectionOptions: K,
+              selection: S,
+              onUpdateFilter: d
+            }
+          ),
+          /* @__PURE__ */ r(
+            ce,
+            {
+              eventCategory: l,
+              eventSubCategory: n,
+              onChange: O,
+              value: F
+            }
+          )
+        ] }) : /* @__PURE__ */ r(Y, { children: E.length > 1 ? /* @__PURE__ */ r(
+          le,
+          {
+            filterable: !1,
+            multiSelect: !1,
+            items: E,
+            onChange: Q,
+            selected: B,
+            "aria-label": T,
+            placeholder: B || T,
+            showOverlay: k,
+            withoutCollapseIndicator: !0
+          }
+        ) : null })
+      ]
+    }
+  );
+};
+export {
+  Ne as default
+};

package/dist/es/components/external/TransactionsOverview/components/TransactionFilters/TransactionMultiSelectionFilter.js

@@ -0,0 +1,13 @@
+import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import l from "../../../../../hooks/useMultiSelectionFilterProps.js";
+import s from "../MultiSelectionFilter/MultiSelectionFilter.js";
+const m = ({
+  placeholder: t,
+  ...e
+}) => {
+  const { selection: o, ...r } = l(e);
+  return /* @__PURE__ */ i(s, { ...r, placeholder: t, selection: o });
+};
+export {
+  m as default
+};

package/dist/es/components/external/TransactionsOverview/components/TransactionFilters/TransactionPspReferenceFilter.js

@@ -0,0 +1,95 @@
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import M from "classnames";
+import { ARIA_ERROR_SUFFIX as k } from "../../../../../core/Errors/constants.js";
+import { useState as w, useMemo as a, useRef as L, useCallback as _, useEffect as y } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { TypographyVariant as C, TypographyElement as P } from "../../../../internal/Typography/types.js";
+import q from "../../../../../hooks/useAnalytics/useFilterAnalyticsEvent.js";
+import N from "../../../../../core/Context/useCoreContext.js";
+import S from "../../../../internal/Typography/Typography.js";
+import O from "../../../../internal/FormFields/InputBase.js";
+/* empty css                                   */
+import Y from "../../../../internal/FilterBar/filters/TextFilter/TextFilter.js";
+import { Icon as H } from "../../../../internal/Icon/Icon.js";
+import { uniqueId as T } from "../../../../../utils/random/uniqueId.js";
+import { CommitAction as F } from "../../../../../hooks/useCommitAction/types.js";
+const f = "adyen-pe-psp-reference-filter", b = 16, m = {
+  root: f,
+  input: f + "__input",
+  inputError: f + "__input-error",
+  inputWithError: f + "__input--with-error",
+  title: f + "__title"
+}, x = ({ eventCategory: d, eventSubCategory: c, onChange: l, value: n }) => {
+  const { i18n: h } = N(), { logEvent: o } = q({ category: d, subCategory: c, label: "PSP reference filter" }), [r, e] = w(!1), E = a(() => h.get("transactions.overview.filters.types.paymentPspReference.label"), [h]), s = L(n), p = _(
+    (i) => {
+      s.current !== i && (s.current = i, o?.("update", null), l?.(i));
+    },
+    [o, l]
+  ), R = _(() => e(!0), []);
+  return y(() => {
+    r && (e(!1), s.current !== n && o?.("reset"));
+  }, [r, n, o]), /* @__PURE__ */ t(
+    Y,
+    {
+      "aria-label": E,
+      label: n ?? E,
+      onChange: p,
+      onResetAction: R,
+      value: n,
+      render: (i) => /* @__PURE__ */ t(x.EditModal, { ...i }),
+      name: "pspReference"
+    }
+  );
+};
+x.EditModal = ({
+  editAction: d,
+  onChange: c,
+  onValueUpdated: l,
+  name: n,
+  type: h,
+  value: o
+}) => {
+  const { i18n: r } = N(), [e, E] = w(o), s = L(null), p = a(T, []), R = a(T, []), i = a(() => {
+    const v = { length: b };
+    return r.get("transactions.overview.filters.types.paymentPspReference.errors.invalidLength", { values: v });
+  }, [r]), u = e && e.length < b ? i : void 0, V = a(() => r.get("transactions.overview.filters.types.paymentPspReference.label"), [r]), B = a(() => r.get("transactions.overview.filters.types.paymentPspReference.placeholder"), [r]), D = (v) => {
+    const g = v.currentTarget, I = g.selectionEnd, A = g.value.replace(/[^a-z\d]/gi, "").slice(0, b).toUpperCase();
+    g.value = A, g.setSelectionRange(I, I), A !== e && E(A || void 0);
+  };
+  return y(() => {
+    l(u ? o || void 0 : e);
+  }, [e, u, l, o]), y(() => {
+    switch (d) {
+      case F.APPLY:
+        c(e);
+        break;
+      case F.CLEAR:
+        c();
+        break;
+    }
+  }, [d, c, e]), y(() => {
+    s.current && s.current.focus();
+  }, []), /* @__PURE__ */ t("div", { className: m.root, children: [
+    /* @__PURE__ */ t("div", { className: m.title, children: /* @__PURE__ */ t("label", { id: R, htmlFor: p, children: /* @__PURE__ */ t(S, { el: P.DIV, variant: C.BODY, strongest: !0, children: V }) }) }),
+    /* @__PURE__ */ t("div", { className: M(m.input, { [m.inputWithError]: u }), children: /* @__PURE__ */ t(
+      O,
+      {
+        autoComplete: "off",
+        uniqueId: p,
+        ref: s,
+        placeholder: B,
+        "data-testid": n,
+        name: n,
+        type: h,
+        value: e,
+        onInput: D
+      }
+    ) }),
+    u && /* @__PURE__ */ t("div", { className: m.inputError, id: `${p}${k}`, children: [
+      /* @__PURE__ */ t(H, { name: "cross-circle-fill" }),
+      /* @__PURE__ */ t(S, { el: P.SPAN, variant: C.BODY, children: u })
+    ] })
+  ] });
+};
+export {
+  x as default
+};

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

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

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

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