@mx-cartographer/experiences 7.11.7 → 7.11.9

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [7.11.9] - 03-04-2026
+
+- **FIXED** - `Debts` return to the top of the page when scrolling quickly
+
+## [7.11.8] - 03-04-2026
+
+- **UPDATED** - `categoryBudget` cta button
+
 ## [7.11.7] - 03-04-2026
 
 - **UPDATED** - Transaction Details | Added "Add a Merchant Budgets" | Without "Manage merchant Budget Flow"

package/dist/debts/index.es.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as s, Fragment as $ } from "react/jsx-runtime";
 import g from "react";
 import { observer as v } from "mobx-react-lite";
 import x from "@mui/material/Stack";
-import { useTheme as V, Card as we, Stack as _, Box as W } from "@mui/material";
+import { useTheme as Y, Card as we, Stack as _, Box as W } from "@mui/material";
 import { Text as l, P as Ce, H3 as Fe, InstitutionLogo as Le, Icon as ne } from "@mxenabled/mxui";
 import { intervalToDuration as $e, formatDuration as He } from "date-fns";
 import { addMonths as he } from "date-fns/addMonths";
@@ -12,11 +12,11 @@ import { a as P, M as Oe, I as We } from "../DebtsStore-BZqNLaqd.mjs";
 import { D as ra } from "../DebtsStore-BZqNLaqd.mjs";
 import { f as N, a as Ge } from "../NumberFormatting-DjTD0t3W.mjs";
 import { f as Q, D as ee } from "../DateFormats-Cs-NbEZ7.mjs";
-import { G as je, v as te, u as C, l as Y, g as R, d as re, a as ze, b as Xe } from "../hooks-zu7yblbi.mjs";
+import { G as je, v as te, u as C, l as V, g as R, d as re, a as ze, b as Xe } from "../hooks-zu7yblbi.mjs";
 import { u as K } from "../useScreenSize-B6JyS_Lj.mjs";
 import { D as ie } from "../Drawer-DV4NTsFg.mjs";
 import { b as E } from "../Localization-2MODESHW.mjs";
-import { A as Ve, u as Ye } from "../AccountDetailsHeader-BCi1WwkM.mjs";
+import { A as Ye, u as Ve } from "../AccountDetailsHeader-BCi1WwkM.mjs";
 import Ke from "@mui/material/Card";
 import Ue from "@mui/material/CardContent";
 import qe from "@mui/material/CardHeader";
@@ -160,7 +160,7 @@ const F = () => {
     throw new Error("useCateUiStore() must be used within the GlobalDataContext");
   return te().uiStore;
 }, xt = ({ debts: a, onClickCta: o, sx: r }) => {
-  const t = V(), { isMobile: n } = K(), { debts: i } = C(), { selectedDebtPriority: c } = F(), { monthlyCashFlowProfile: d } = Y(), { payoffDate: p, payoffSavings: h, payoffDuration: m } = g.useMemo(() => {
+  const t = Y(), { isMobile: n } = K(), { debts: i } = C(), { selectedDebtPriority: c } = F(), { monthlyCashFlowProfile: d } = V(), { payoffDate: p, payoffSavings: h, payoffDuration: m } = g.useMemo(() => {
     const w = d?.extra_payment ?? 0;
     return gt(a, c, w);
   }, [a, c, d]);
@@ -212,7 +212,7 @@ const F = () => {
     }
   );
 }, wt = v(xt), Ct = ({ isOpen: a, onClose: o }) => {
-  const r = V(), { debts: t } = C(), [n, i] = g.useState(!1);
+  const r = Y(), { debts: t } = C(), [n, i] = g.useState(!1);
   return /* @__PURE__ */ e(
     ie,
     {
@@ -722,7 +722,7 @@ const Ae = ({
     }
   );
 }, Tt = () => {
-  const a = V(), { debts: o } = C(), { selectedDebtChartData: r } = F();
+  const a = Y(), { debts: o } = C(), { selectedDebtChartData: r } = F();
   return /* @__PURE__ */ s($, { children: [
     /* @__PURE__ */ s(
       Ke,
@@ -749,7 +749,7 @@ const Ae = ({
     )
   ] });
 }, At = v(Tt), Et = () => {
-  const a = V(), { onEvent: o } = R(), { debts: r } = C(), { selectedDebtChartData: t, showCompleted: n, showError: i } = F();
+  const a = Y(), { onEvent: o } = R(), { debts: r } = C(), { selectedDebtChartData: t, showCompleted: n, showError: i } = F();
   return g.useEffect(() => o(D.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(Se, { children: i || n ? /* @__PURE__ */ e(
     l,
     {
@@ -1017,13 +1017,13 @@ const Ae = ({
       onClose: o,
       title: r.details_title,
       children: /* @__PURE__ */ s(x, { bgcolor: "background.default", children: [
-        /* @__PURE__ */ e(Ve, { customDetailsChart: i }),
+        /* @__PURE__ */ e(Ye, { customDetailsChart: i }),
         /* @__PURE__ */ e($t, {})
       ] })
     }
   );
 }, Ot = v(() => {
-  const { debts: a } = C(), { monthlyCashFlowProfile: o, updateMonthlyCashFlowProfile: r } = Y(), { onEvent: t } = R(), [n, i] = g.useState(o?.extra_payment ?? 0), c = n < 0 || n > 9999999999e-2, d = async () => {
+  const { debts: a } = C(), { monthlyCashFlowProfile: o, updateMonthlyCashFlowProfile: r } = V(), { onEvent: t } = R(), [n, i] = g.useState(o?.extra_payment ?? 0), c = n < 0 || n > 9999999999e-2, d = async () => {
     o && (await r({ ...o, extra_payment: n }), o.extra_payment = n, t(D.DEBTS_SAVE_PAYDOWN_ACTION, {
       user_guid: o?.user_guid
     }));
@@ -1057,7 +1057,7 @@ const Ae = ({
     }
   );
 }), Wt = () => {
-  const { debts: a } = C(), { totalMonthlyPayments: o } = te(), { monthlyCashFlowProfile: r } = Y(), t = o + Number(r?.extra_payment);
+  const { debts: a } = C(), { totalMonthlyPayments: o } = te(), { monthlyCashFlowProfile: r } = V(), t = o + Number(r?.extra_payment);
   return /* @__PURE__ */ s(x, { sx: { backgroundColor: "background.default", height: "100%" }, children: [
     /* @__PURE__ */ s(x, { p: 24, children: [
       /* @__PURE__ */ s(x, { alignItems: "center", gap: 4, mb: 24, children: [
@@ -1100,14 +1100,14 @@ function zt(a, o) {
 function Xt(a) {
   return a.is_paid_off ? "✓" : a.priority === void 0 || a.is_impossible ? "!" : a.priority;
 }
-const Vt = (a) => {
+const Yt = (a) => {
   const o = {
     text: "#121417",
     background: "#FFB252"
   };
   return a === "!" && (o.text = "#FFFFFF", o.background = "#DF320C"), a === "✓" && (o.text = "#FFFFFF", o.background = "#09A57F"), o;
-}, Yt = (a) => {
-  const o = String(a.formattedValue), r = Vt(o);
+}, Vt = (a) => {
+  const o = String(a.formattedValue), r = Yt(o);
   return /* @__PURE__ */ e(
     le,
     {
@@ -1147,14 +1147,14 @@ const Vt = (a) => {
   onHoverRow: t,
   onClickRow: n
 }) => {
-  const i = V(), { onEvent: c } = R(), { isMobile: d } = K(), { debts: p, common: h } = C(), [m, w] = g.useState([
+  const i = Y(), { onEvent: c } = R(), { isMobile: d } = K(), { debts: p, common: h } = C(), [m, w] = g.useState([
     { field: "priority", sort: "asc" }
   ]), b = [
     {
       field: "priority",
       headerName: p.table_column_priority,
       renderHeader: j,
-      renderCell: Yt,
+      renderCell: Vt,
       sortComparator: zt,
       sortable: !0,
       hideSortIcons: !0,
@@ -1258,10 +1258,11 @@ const Vt = (a) => {
     le,
     {
       sx: {
-        height: "100dvh",
+        height: "auto",
         width: "100%",
         mt: "15px",
         overflowX: "auto",
+        overflowY: "visible",
         boxShadow: "none",
         ...a
       },
@@ -1463,7 +1464,7 @@ const Vt = (a) => {
   onClickHandler: o ? r : void 0,
   primaryButton: o ? a.connect_accounts : void 0
 }), tr = v(({ disabled: a, onClick: o }) => {
-  const { debts: r } = C(), { isDesktop: t } = K(), { totalMonthlyPayments: n } = te(), { monthlyCashFlowProfile: i } = Y(), c = n + Number(i?.extra_payment), d = t ? r.paydown_button_long : r.paydown_button_short;
+  const { debts: r } = C(), { isDesktop: t } = K(), { totalMonthlyPayments: n } = te(), { monthlyCashFlowProfile: i } = V(), c = n + Number(i?.extra_payment), d = t ? r.paydown_button_long : r.paydown_button_short;
   return /* @__PURE__ */ e(
     De,
     {
@@ -1480,12 +1481,12 @@ const Vt = (a) => {
 }), rr = ({ onBackClick: a, sx: o }) => {
   const { isDesktop: r, isMobile: t } = K(), { connect: n, debts: i } = C(), { onEvent: c } = R(), {
     config: { show_connections_widget_in_master: d }
-  } = ze(), { isInitialized: p } = Xe(), { setSelectedAccount: h } = Ye(), { selectedDebtPriority: m, setSelectedDebtChartData: w } = F(), {
+  } = ze(), { isInitialized: p } = Xe(), { setSelectedAccount: h } = Ve(), { selectedDebtPriority: m, setSelectedDebtChartData: w } = F(), {
     isAccountDataLoaded: b,
     loadAccountData: B,
     detailedAccounts: M,
     visibleDebtAccounts: I
-  } = re(), { isAllGoalDataLoaded: S, loadGoalData: T, monthlyCashFlowProfile: H } = Y(), { debts: y } = te(), [u, f] = g.useState(!1), [A, k] = g.useState(!1), [L, z] = g.useState(!1), [U, Ee] = g.useState(""), [Ie, ce] = g.useState(!1);
+  } = re(), { isAllGoalDataLoaded: S, loadGoalData: T, monthlyCashFlowProfile: H } = V(), { debts: y } = te(), [u, f] = g.useState(!1), [A, k] = g.useState(!1), [L, z] = g.useState(!1), [U, Ee] = g.useState(""), [Ie, ce] = g.useState(!1);
   pt({
     widgetName: "DebtsWidget",
     isLoaded: S

package/dist/insights/components/insights/CategoryBudget/types/CategoryBudget.d.ts

@@ -3,6 +3,7 @@ export interface CategoryBudgetProps extends CommonBeatProps {
     amount: string;
     budgetPercentage: number;
     label: string;
+    hasBudget?: boolean;
     avatarBgColor?: string;
     leftLabel: string;
     rightLabel: string;

package/dist/insights/index.es.js

@@ -2403,44 +2403,54 @@ const Ae = ({
   label: n,
   beat: i,
   budgetPercentage: l,
-  leftLabel: o,
-  rightLabel: a,
-  buttonProps: s,
-  ...h
+  hasBudget: o = !1,
+  leftLabel: a,
+  rightLabel: s,
+  buttonProps: h,
+  ...d
 }) => {
-  const { category_guid: d } = i.payload, m = () => l > 100 ? "error.main" : l > 50 ? "warning.main" : "success.main", p = Ze(), u = Se(d, p);
+  const { category_guid: m } = i.payload, p = () => l > 100 ? "error.main" : l > 50 ? "warning.main" : "success.main", u = Ze(), C = Se(m, u);
   return /* @__PURE__ */ e(
     v,
     {
-      ...h,
+      ...d,
       beat: i,
-      button: /* @__PURE__ */ e(H, { ...s, beat: i }),
+      button: /* @__PURE__ */ e(
+        H,
+        {
+          ...h,
+          beat: {
+            ...i,
+            call_to_action: o ? i.supporting_action : i.call_to_action
+          }
+        }
+      ),
       contentProps: { sx: { "& p": { px: 0, pb: 16, pt: 20 } } },
-      header: { ...h.header, sx: { mb: 20 } },
+      header: { ...d.header, sx: { mb: 20 } },
       children: /* @__PURE__ */ e(
         re,
         {
           amount: r,
           borderRadius: "6px",
-          completeColor: m(),
+          completeColor: p(),
           icon: /* @__PURE__ */ e(
             y1,
             {
-              categoryGuid: d,
+              categoryGuid: m,
               size: 44,
               sx: {
                 color: "text.primary",
-                bgcolor: R1(u, 0.25),
-                borderColor: u,
+                bgcolor: R1(C, 0.25),
+                borderColor: C,
                 borderWidth: 1,
                 borderStyle: "solid"
               }
             }
           ),
           label: n,
-          leftLabel: o,
+          leftLabel: a,
           percentComplete: l,
-          rightLabel: a,
+          rightLabel: s,
           sx: { p: 0, "& .details-container": { gap: 12 } }
         }
       )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.11.7",
+  "version": "7.11.9",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",