@mx-cartographer/experiences 7.6.0 → 7.6.2

package/CHANGELOG.md

@@ -1,4 +1,12 @@
-## [7.6.0] - 14-01-2025
+## [7.6.2] - 01-14-2026
+
+- **UPDATED** - Hover, axes, titles, descriptions, role for Account Details charts
+
+## [7.6.1] - 01-14-2026
+
+- **UPDATED** - Improved ADA support for `Goals` reorder
+
+## [7.6.0] - 01-14-2026
 
 - **UPDATED** - Migrated MUI X-Charts from v7 to v8
 

package/dist/{AccountDetailsContent-ZWkttor7.mjs → AccountDetailsContent-D4oOgcoI.mjs}

@@ -11,7 +11,7 @@ import I from "@mui/material/Divider";
 import v from "@mui/material/ListItem";
 import N from "@mui/material/ListItemButton";
 import w from "@mui/material/ListItemText";
-import { u as D } from "./AccountDetailsHeader-B21Y8_ED.mjs";
+import { u as D } from "./AccountDetailsHeader-D8wbZdBk.mjs";
 import { d as z, u as E, g as O, h as X } from "./hooks-ZMp65DFz.mjs";
 import { A as at } from "./AccountListItem-Dikzsimi.mjs";
 import { A as M } from "./WidgetContainer-DyotIGdv.mjs";

package/dist/AccountDetailsHeader-D8wbZdBk.mjs

@@ -0,0 +1,95 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { observer as f } from "mobx-react-lite";
+import s from "@mui/material/Stack";
+import { H3 as T, InstitutionLogo as x, Text as l, H2 as D } from "@mxenabled/mxui";
+import p from "react";
+import { G as N, d as C, m as P, f as G, u as O } from "./hooks-ZMp65DFz.mjs";
+import { g as R } from "./AccountFields-D9Jil_7P.mjs";
+import { A as r } from "./ConnectDrawer-cXpqSnbj.mjs";
+import w from "@mui/material/Card";
+import v from "@mui/material/CardContent";
+import L from "@mui/material/CardHeader";
+import { L as H } from "./Loader-DUaFpDGv.mjs";
+import { I as M, P as U, S as Y } from "./Account-CQ5cFk24.mjs";
+import { u as j } from "./useAccountDisplayName-DSUFGGaF.mjs";
+import { f as z } from "./NumberFormatting-DjTD0t3W.mjs";
+const _ = () => {
+  if (!p.useContext(N))
+    throw new Error("useCategoryUiStore() must be used within the GlobalDataContext");
+  return C().uiStore;
+}, B = (i, e) => {
+  const c = [r.LOAN, r.MORTGAGE, r.PROPERTY].includes(
+    i
+  ), n = [
+    r.CREDIT_CARD,
+    r.LINE_OF_CREDIT,
+    r.PREPAID,
+    r.CHECKING_LINE_OF_CREDIT
+  ].includes(i);
+  return c ? { title: e.label_payments, description: e.chart_title_payments } : n ? { title: e.label_payments_spend, description: e.chart_title_payments_spend } : { title: e.label_income_spend, description: e.chart_title_income_spend };
+}, k = ({
+  sx: i,
+  ChartComponent: e,
+  header: c
+}) => {
+  const { loadMonthlyCategoryTotals: n } = P(), { isInitialized: o } = G(), { selectedAccount: d } = _(), [u, m] = p.useState(!1);
+  return p.useEffect(() => {
+    o && n([d]).finally(() => {
+      m(!0);
+    });
+  }, [o, d]), !o || !u ? /* @__PURE__ */ t(H, {}) : /* @__PURE__ */ a(
+    w,
+    {
+      sx: {
+        "& .MuiCardContent-root:last-child": {
+          pb: 0
+        },
+        ...i
+      },
+      children: [
+        /* @__PURE__ */ t(L, { sx: { pb: 0 }, title: /* @__PURE__ */ t(T, { sx: { pb: 4 }, children: c }) }),
+        /* @__PURE__ */ t(v, { sx: { p: 0 }, children: e ? /* @__PURE__ */ t(e, {}) : null })
+      ]
+    }
+  );
+}, F = f(k), V = ({
+  customDetailsChart: i,
+  ChartComponent: e
+}) => {
+  const { institutions: c } = C(), { selectedAccount: n } = _(), { accounts: o } = O(), { firstSubtitle: d, firstValue: u, hasAvailableBalance: m, secondSubtitle: h, secondValue: b } = R(n, o), A = c.find(
+    (I) => I.guid === n?.institution_guid
+  ), S = [
+    ...M,
+    ...U,
+    ...Y
+  ].includes(n.account_type), g = j(n), { title: y, description: E } = B(n.account_type, o);
+  return /* @__PURE__ */ a(s, { bgcolor: "background.default", p: 24, children: [
+    /* @__PURE__ */ a(s, { gap: 12, children: [
+      /* @__PURE__ */ t(
+        x,
+        {
+          alt: o.institution_logo_alt,
+          institutionGuid: n.institution_guid || "",
+          size: 64
+        }
+      ),
+      /* @__PURE__ */ t(l, { variant: "Small", children: A?.name })
+    ] }),
+    /* @__PURE__ */ a(s, { gap: 8, mb: 24, mt: 4, children: [
+      /* @__PURE__ */ t(D, { children: g }),
+      /* @__PURE__ */ a(s, { direction: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ t(l, { bold: m, variant: "Body", children: d }),
+        /* @__PURE__ */ t(l, { bold: !0, variant: "Body", children: z(u, "0,0.00") })
+      ] }),
+      /* @__PURE__ */ a(s, { direction: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ t(l, { variant: "Small", children: h }),
+        /* @__PURE__ */ t(l, { variant: "Small", children: b })
+      ] })
+    ] }),
+    S && /* @__PURE__ */ t(s, { "aria-label": E, role: "img", children: i || /* @__PURE__ */ t(F, { ChartComponent: e, header: y }) })
+  ] });
+}, at = f(V);
+export {
+  at as A,
+  _ as u
+};

package/dist/accounts/components/detailsdrawer/Accounts/AccountDetailsChart.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { MiniWidgetProps } from '../../../../common';
 interface AccountDetailsChartProps extends MiniWidgetProps {
     ChartComponent?: React.ComponentType;
+    header?: string;
 }
 declare const _default: React.FunctionComponent<AccountDetailsChartProps>;
 export default _default;

package/dist/accounts/index.es.js

@@ -1,28 +1,28 @@
-import { jsx as e, jsxs as r, Fragment as J } from "react/jsx-runtime";
+import { jsx as e, jsxs as r, Fragment as q } from "react/jsx-runtime";
 import h from "react";
 import { observer as v } from "mobx-react-lite";
 import E from "@mui/material/Box";
-import y from "@mui/material/Divider";
+import x from "@mui/material/Divider";
 import F from "@mui/material/List";
 import O from "@mui/material/ListSubheader";
 import Z from "@mui/system/Stack";
 import { Text as g } from "@mxenabled/mxui";
-import { useTheme as Q } from "@mui/material/styles";
-import { u as U, A as X } from "../AccountDetailsHeader-B21Y8_ED.mjs";
+import { useTheme as J } from "@mui/material/styles";
+import { u as U, A as Q } from "../AccountDetailsHeader-D8wbZdBk.mjs";
 import { L as e1 } from "../LineChart-BF4QA-Lx.mjs";
 import { g as t1, a as n1, b as l1 } from "../SpendingData-zOn0cwrq.mjs";
 import { m as i1, u as M, b as S, d as W, g as P, a as o1 } from "../hooks-ZMp65DFz.mjs";
 import { A as I, l as G, m as C1 } from "../ConnectDrawer-cXpqSnbj.mjs";
 import { F as C3, M as d3 } from "../ConnectDrawer-cXpqSnbj.mjs";
-import { I as $, P as j, S as Y } from "../Account-CQ5cFk24.mjs";
+import { I as $, P as Y, S as j } from "../Account-CQ5cFk24.mjs";
 import { a as d1 } from "../AccountFields-D9Jil_7P.mjs";
 import { g as s3, b as a3 } from "../AccountFields-D9Jil_7P.mjs";
 import { A as N } from "../AccountListItem-Dikzsimi.mjs";
-import { A as c1 } from "../AccountDetailsContent-ZWkttor7.mjs";
-import { u as L3 } from "../AccountDetailsContent-ZWkttor7.mjs";
+import { A as c1 } from "../AccountDetailsContent-D4oOgcoI.mjs";
+import { u as L3 } from "../AccountDetailsContent-D4oOgcoI.mjs";
 import { f as D } from "../NumberFormatting-DjTD0t3W.mjs";
 import { D as s1 } from "../Drawer-HUhV0NVP.mjs";
-import { A as x, W as a1 } from "../WidgetContainer-DyotIGdv.mjs";
+import { A as y, W as a1 } from "../WidgetContainer-DyotIGdv.mjs";
 import { C as r1 } from "../ConnectionsDrawer-CecygbxT.mjs";
 import { u as K } from "../useScreenSize-B6JyS_Lj.mjs";
 import { u as B } from "../useWidgetLoadTimer-hIOioiKx.mjs";
@@ -32,24 +32,24 @@ import { M as z } from "../MiniWidgetContainer-98-hKFqm.mjs";
 import u1 from "@mui/material/Stack";
 import { A as h3, a as H3 } from "../AccountStore-CMEXKMhd.mjs";
 const h1 = (o, C) => {
-  const l = $.includes(C) ? t1(o) : [], t = j.includes(C) ? n1(o) : [], L = Y.includes(C) ? l1(o) : [];
+  const l = $.includes(C) ? t1(o) : [], t = Y.includes(C) ? n1(o) : [], L = j.includes(C) ? l1(o) : [];
   return [l, t, L].filter((i) => i.length > 0);
 }, H1 = (o, C, l) => {
   const [t, L] = o, i = t, d = L ?? t, s = [];
   if (i && d && $.includes(C)) {
     const c = i[i.length - 1].y;
     s.push({ label: l.income_label, amount: c });
-  } else if (j.includes(C)) {
+  } else if (Y.includes(C)) {
     const c = i[i.length - 1].y;
     s.push({ label: l.payments_label, amount: c });
   }
-  if (d && Y.includes(C)) {
+  if (d && j.includes(C)) {
     const c = d[d.length - 1].y;
     s.push({ label: l.spending_label, amount: c });
   }
   return s;
 }, p1 = () => {
-  const o = Q(), { selectedAccount: C } = U(), { monthlyCategoryTotals: l } = i1(), { trends: t } = M(), L = [o.palette.chart?.chart1, o.palette.chart?.chart2], i = h1(l, C.account_type), d = H1(i, C.account_type, t), s = [I.LOAN, I.MORTGAGE].includes(C.account_type);
+  const o = J(), { selectedAccount: C } = U(), { monthlyCategoryTotals: l } = i1(), { trends: t } = M(), L = [o.palette.chart?.chart1, o.palette.chart?.chart2], i = h1(l, C.account_type), d = H1(i, C.account_type, t), s = [I.LOAN, I.MORTGAGE].includes(C.account_type);
   return /* @__PURE__ */ e("div", { "data-testid": "TrendsChart", children: /* @__PURE__ */ e(
     e1,
     {
@@ -58,8 +58,14 @@ const h1 = (o, C) => {
       height: 185,
       labels: d,
       showAverage: s,
+      showAxisHighlight: !0,
       showBars: s,
       showLegend: !0,
+      showTooltip: !0,
+      showXAxis: !0,
+      showXAxisTicks: !0,
+      showYAxis: !0,
+      showYAxisTicks: !0,
       valueFormatterString: "0,0"
     }
   ) });
@@ -81,13 +87,13 @@ const h1 = (o, C) => {
       n && i(n);
     }
   }, [H, o]);
-  const _ = (n) => {
-    C(n.guid), s(x.ACCOUNTS_CLICK_ACCOUNT, {
+  const A = (n) => {
+    C(n.guid), s(y.ACCOUNTS_CLICK_ACCOUNT, {
       account_guid: n.guid,
       account_type: n.account_type
     });
   }, V = (n) => {
-    const a = n === "hidden" ? p : m, k = n === "hidden" ? R : b, u = n === "hidden" ? l.account_hidden : l.account_closed;
+    const a = n === "hidden" ? p : m, T = n === "hidden" ? R : b, u = n === "hidden" ? l.account_hidden : l.account_closed;
     return /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(
       F,
       {
@@ -100,31 +106,31 @@ const h1 = (o, C) => {
             sx: { justifyContent: "space-between", color: "grey.700" },
             children: [
               /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: u }),
-              /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: D(k, "0,0.00") })
+              /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: D(T, "0,0.00") })
             ]
           }
         ) }),
-        children: /* @__PURE__ */ e(Z, { children: a.map((f, A, q) => {
-          const T = A === q.length - 1;
+        children: /* @__PURE__ */ e(Z, { children: a.map((f, _, X) => {
+          const k = _ === X.length - 1;
           return /* @__PURE__ */ r(h.Fragment, { children: [
             /* @__PURE__ */ e(
               N,
               {
                 account: f,
-                onRowClick: () => _(f),
+                onRowClick: () => A(f),
                 shouldShowConnectionStatus: !0
               }
             ),
             n === "hidden" ? /* @__PURE__ */ e(
-              y,
+              x,
               {
                 sx: {
-                  mb: T ? 24 : 4,
-                  ml: T ? 24 : 68
+                  mb: k ? 24 : 4,
+                  ml: k ? 24 : 68
                 }
               }
-            ) : !T && /* @__PURE__ */ e(
-              y,
+            ) : !k && /* @__PURE__ */ e(
+              x,
               {
                 sx: {
                   mb: 4,
@@ -141,7 +147,7 @@ const h1 = (o, C) => {
     c.map((n) => {
       const a = t.filter(
         (u) => u.account_type === n && !u.is_closed && !u.is_hidden
-      ), k = a.reduce(
+      ), T = a.reduce(
         (u, f) => (f.balance || 0) + u,
         0
       );
@@ -157,27 +163,27 @@ const h1 = (o, C) => {
               sx: { display: "flex", justifyContent: "space-between" },
               children: [
                 /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: l.account_types[n] }),
-                /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: D(k, "0,0.00") })
+                /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: D(T, "0,0.00") })
               ]
             }
           ) }),
           children: /* @__PURE__ */ e(Z, { children: a.map((u) => {
-            const f = t.indexOf(u) === t.length - 1, A = a.indexOf(u) === a.length - 1;
+            const f = t.indexOf(u) === t.length - 1, _ = a.indexOf(u) === a.length - 1;
             return /* @__PURE__ */ r(h.Fragment, { children: [
               /* @__PURE__ */ e(
                 N,
                 {
                   account: u,
-                  onRowClick: () => _(u),
+                  onRowClick: () => A(u),
                   shouldShowConnectionStatus: !0
                 }
               ),
               (!f || m.length > 0 || p.length > 0) && /* @__PURE__ */ e(
-                y,
+                x,
                 {
                   sx: {
-                    mb: A ? 24 : 4,
-                    ml: A ? 24 : 68
+                    mb: _ ? 24 : 4,
+                    ml: _ ? 24 : 68
                   }
                 }
               )
@@ -197,14 +203,14 @@ const h1 = (o, C) => {
         onClose: () => C(""),
         title: l.account_details,
         children: [
-          /* @__PURE__ */ e(X, { ChartComponent: m1 }),
+          /* @__PURE__ */ e(Q, { ChartComponent: m1 }),
           /* @__PURE__ */ e(c1, {})
         ]
       }
     )
   ] });
 }, V1 = v(f1), g1 = ({ onBackClick: o, sx: C = {} }) => {
-  const [l, t] = h.useState(!1), [L, i] = h.useState(!1), { config: d } = o1(), { accounts: s } = W(), { accounts: c, connect: H } = M(), { isCopyLoaded: p, isInitialized: m, setSelectedAccounts: R, selectedAccountGuids: b } = S(), { isDesktop: _ } = K(), { onEvent: V } = P();
+  const [l, t] = h.useState(!1), [L, i] = h.useState(!1), { config: d } = o1(), { accounts: s } = W(), { accounts: c, connect: H } = M(), { isCopyLoaded: p, isInitialized: m, setSelectedAccounts: R, selectedAccountGuids: b } = S(), { isDesktop: A } = K(), { onEvent: V } = P();
   B({
     widgetName: "AccountsWidget",
     isLoaded: m && p
@@ -212,9 +218,9 @@ const h1 = (o, C) => {
     R(s);
   }, [s]);
   const n = () => {
-    t(!0), V(x.ACCOUNTS_CLICK_CONNECT);
+    t(!0), V(y.ACCOUNTS_CLICK_CONNECT);
   }, a = () => {
-    i(!0), V(x.ACCOUNTS_CLICK_CONNECT);
+    i(!0), V(y.ACCOUNTS_CLICK_CONNECT);
   };
   return p ? /* @__PURE__ */ e(
     a1,
@@ -228,12 +234,12 @@ const h1 = (o, C) => {
           onClick: a
         }
       ] : [],
-      onAccountsFilterClick: () => V(x.ACCOUNTS_CLICK_FILTER),
+      onAccountsFilterClick: () => V(y.ACCOUNTS_CLICK_FILTER),
       onBackClick: o,
       sx: C,
       title: c.title,
-      children: m ? /* @__PURE__ */ r(J, { children: [
-        /* @__PURE__ */ r(E, { sx: { px: _ ? 24 : 12 }, children: [
+      children: m ? /* @__PURE__ */ r(q, { children: [
+        /* @__PURE__ */ r(E, { sx: { px: A ? 24 : 12 }, children: [
           b.length < 1 && /* @__PURE__ */ e(g, { display: "flex", justifyContent: "center", my: 24, children: c.no_accounts }),
           /* @__PURE__ */ e(V1, {})
         ] }),
@@ -289,7 +295,7 @@ const h1 = (o, C) => {
                 shouldShowConnectionStatus: !0
               }
             ),
-            !R && /* @__PURE__ */ e(y, { "aria-hidden": "true", variant: "inset" })
+            !R && /* @__PURE__ */ e(x, { "aria-hidden": "true", variant: "inset" })
           ] }, `account-item${m}`);
         })
       ] }) : /* @__PURE__ */ e(w, {})
@@ -751,7 +757,7 @@ const h1 = (o, C) => {
       }
     )
   ] });
-}, w1 = v(R1), _1 = ({
+}, w1 = v(R1), A1 = ({
   onPrimaryCtaClick: o = () => {
   },
   sx: C
@@ -783,11 +789,11 @@ const h1 = (o, C) => {
       ]
     }
   ) : /* @__PURE__ */ e(w, {});
-}, l3 = v(_1);
+}, l3 = v(A1);
 export {
   h3 as AccountApi,
   c1 as AccountDetailsContent,
-  X as AccountDetailsHeader,
+  Q as AccountDetailsHeader,
   H3 as AccountStore,
   n3 as AccountsMiniWidget,
   t3 as AccountsWidget,

package/dist/accounts/utils/AccountDetails.d.ts

@@ -0,0 +1,5 @@
+import { AccountType, AccountsCopy } from '../../common';
+export declare const getChartLabels: (accountType: AccountType, copy: AccountsCopy) => {
+    title: string;
+    description: string;
+};

package/dist/common/types/localization/AccountsCopy.d.ts

@@ -45,6 +45,9 @@ export interface AccountsCopy {
     apy: string;
     available_balance: string;
     available_credit: string;
+    chart_title_income_spend: string;
+    chart_title_payments: string;
+    chart_title_payments_spend: string;
     close_aria: string;
     close_account_details_aria: string;
     close_drawer: string;
@@ -73,6 +76,9 @@ export interface AccountsCopy {
     interest_rate: string;
     is_closed: string;
     is_hidden: string;
+    label_income_spend: string;
+    label_payments: string;
+    label_payments_spend: string;
     manage: string;
     manage_connection: string;
     manage_connections: string;

package/dist/common/types/localization/GoalsCopy.d.ts

@@ -75,8 +75,10 @@ export interface GoalsCopy {
     manage_saving_goals: string;
     manage_saving_title: string;
     mark_as_complete_button: string;
-    reorder_goals_title: string;
+    reorder_goals_announcement: string;
     reorder_goals_description: string;
+    reorder_goals_drag_aria_label: string;
+    reorder_goals_title: string;
     retirement: string;
     retirement_goal_description: string;
     retirement_goal_label: string;

package/dist/debts/index.es.js

@@ -16,7 +16,7 @@ import { G as Me, w as q, u as S, l as V, g as F, d as Z, b as Pe } from "../hoo
 import { u as Y } from "../useScreenSize-B6JyS_Lj.mjs";
 import { D as te } from "../Drawer-HUhV0NVP.mjs";
 import { b as E } from "../Localization-2MODESHW.mjs";
-import { A as ke, u as Ne } from "../AccountDetailsHeader-B21Y8_ED.mjs";
+import { A as ke, u as Ne } from "../AccountDetailsHeader-D8wbZdBk.mjs";
 import Fe from "@mui/material/Card";
 import Re from "@mui/material/CardContent";
 import Le from "@mui/material/CardHeader";