@mx-cartographer/experiences 9.0.9 → 9.0.11

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [9.0.11] - 06-01-2026
+
+- **ADDED** - Spending chart accessibility description for screen readers
+
+## [9.0.10] - 05-27-2026
+
+- **UPDATED** - Adds Tab indexes to the BubbleWeek component to make it accessable to screen readers.
+
 ## [9.0.9] - 05-27-2026
 
 - **FIXED** - Split transaction save creating duplicate children due to double-click race condition

package/dist/SpendingLegend-CxvNOg3c.mjs

@@ -0,0 +1,203 @@
+import { g as D } from "./TransactionUtils-BphBJBbU.mjs";
+import { C as p } from "./Category-DEKZGLYe.mjs";
+import { jsxs as f, jsx as d } from "react/jsx-runtime";
+import S from "react";
+import { observer as N } from "mobx-react-lite";
+import T from "@mui/material/Box";
+import k from "@mui/material/Button";
+import h from "@mui/material/Stack";
+import { useTheme as A } from "@mui/material/styles";
+import { CategoryIcon as M, CategoryIconVariants as G, Text as y, P as O } from "@mxenabled/mxui";
+import { f as b } from "./NumberFormatting--XMeeBfr.mjs";
+import { D as $ } from "./Donut-SzzfZDHF.mjs";
+import { u as j } from "./useAriaLive-MkYebyUR.mjs";
+import { u as v } from "./hooks-97sNJ_lf.mjs";
+import { u as R } from "./useScreenSize-mWpmnh5w.mjs";
+const _ = 5, V = (i, g, s, c) => c.reduce((o, n) => {
+  const a = i.find((u) => u.guid === n.category_guid);
+  if (!a) return o;
+  const t = a.parent_guid ?? a.guid, r = i.find((u) => u.guid === t);
+  if (!r || n.total <= 0) return o;
+  const m = {
+    guid: a.guid,
+    name: a.guid === t ? `${g.parent_category_totals_label_general} ${a.name}` : a.name,
+    color: D(r.guid, s),
+    amount: n.total
+  }, e = o.find((u) => u.guid === t);
+  return e ? (e.amount += n.total, e.categoryTotals?.push(m)) : o.push({
+    guid: t,
+    name: r.name,
+    color: D(r.guid, s),
+    categoryTotals: [m],
+    amount: n.total
+  }), o;
+}, []), ot = (i, g, s, c) => {
+  const n = V(i, g, s, c).filter(
+    (e) => e.guid !== p.INCOME && e.guid !== p.INVESTMENTS && e.guid !== p.TRANSFER && e.amount > 0
+  ).sort((e, u) => u.amount - e.amount), a = n.reduce(
+    (e, u) => e + u.amount,
+    0
+  ), t = n.length > _ ? _ : n.length, r = n.slice(0, t), m = r.map((e) => ({
+    id: e.guid,
+    color: D(e.guid, s),
+    label: e.name,
+    value: e.amount / a * 100
+  }));
+  if (n.length > 5) {
+    const e = n.slice(_), u = e.reduce(
+      (C, l) => C + l.amount,
+      0
+    );
+    r.push({
+      guid: "other",
+      color: s.palette.categories.others || "",
+      name: g.saving_goal_other,
+      categoryTotals: e,
+      amount: u
+    }), m.push({
+      id: "other",
+      color: s.palette.categories.others || "",
+      label: g.saving_goal_other,
+      value: u / a * 100
+    });
+  }
+  return {
+    categoryData: r,
+    donutData: m,
+    totalAmount: a
+  };
+}, nt = (i, g, s) => {
+  const c = i.filter(
+    (t) => t.guid === p.INCOME || t.parent_guid === p.INCOME
+  ), o = g.filter((t) => c.some((r) => r.guid === t.category_guid)).sort((t, r) => t.total - r.total).map((t, r) => ({
+    guid: t.category_guid,
+    name: i.find((m) => m.guid === t.category_guid)?.name,
+    color: s[r % s.length],
+    categoryTotals: [],
+    amount: Math.abs(t.total)
+  })), n = o.reduce(
+    (t, r) => t + r.amount,
+    0
+  ), a = o.map((t) => ({
+    id: t.guid,
+    color: t.color,
+    label: t.name,
+    value: t.amount / n * 100
+  }));
+  return {
+    categoryData: o,
+    donutData: a,
+    totalAmount: n
+  };
+}, B = ({
+  data: i,
+  isIncome: g = !1,
+  onSelected: s,
+  onViewTransactions: c,
+  selectedId: o,
+  size: n = 150,
+  totalLabel: a,
+  variant: t = "mini"
+}) => {
+  const { spending: r } = v(), m = A(), { isTablet: e } = R(), { announce: u, ariaLive: C } = j(), l = S.useMemo(
+    () => o ? i.categoryData.find((x) => x.guid === o) : void 0,
+    [o]
+  );
+  S.useEffect(() => {
+    if (l) {
+      const x = b(l.amount, t === "mini" ? "0,0" : "0,0.00");
+      u(`${l.name}: ${x}`);
+    }
+  }, [l, u, t]);
+  const E = i.donutData.length > 0 ? i.donutData : [{ id: "0", color: m.palette.divider, value: 100 }], w = () => {
+    c?.(o);
+  }, I = e ? 32 : 48;
+  return /* @__PURE__ */ f(
+    T,
+    {
+      "aria-label": r.chart_description,
+      height: n,
+      position: "relative",
+      role: "group",
+      width: n,
+      children: [
+        C,
+        /* @__PURE__ */ d($, { data: E, onClick: s, selectedId: o, size: n, children: /* @__PURE__ */ d(h, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ f(h, { alignItems: "center", justifyContent: "center", minHeight: n, minWidth: n, children: [
+          l && /* @__PURE__ */ f(
+            h,
+            {
+              alignItems: "center",
+              gap: t === "mini" ? 0 : 8,
+              mb: t === "mini" ? 0 : 8,
+              mt: t === "mini" ? 0 : -16,
+              sx: t === "mini" ? { gap: 0, mb: 0 } : { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } },
+              children: [
+                /* @__PURE__ */ d(T, { "aria-hidden": "true", role: "presentation", children: /* @__PURE__ */ d(
+                  M,
+                  {
+                    categoryGuid: g ? p.INCOME : l.guid,
+                    size: t === "mini" ? 24 : I,
+                    variant: G.Transparent
+                  }
+                ) }),
+                /* @__PURE__ */ d(
+                  y,
+                  {
+                    color: "text.secondary",
+                    noWrap: !0,
+                    variant: t === "mini" ? "tiny" : "body1",
+                    children: l ? l.name : a
+                  }
+                )
+              ]
+            }
+          ),
+          !l && t === "full" && /* @__PURE__ */ d(y, { bold: !0, color: "text.secondary", sx: { mb: { xs: 4, xl: 8 } }, children: a }),
+          /* @__PURE__ */ d(O, { variant: t === "mini" ? "h2" : "h1", children: l ? b(l.amount, t === "mini" ? "0,0" : "0,0.00") : b(i.totalAmount, t === "mini" ? "0,0" : "0,0.00") }),
+          !l && t === "mini" && /* @__PURE__ */ d(y, { color: "text.secondary", noWrap: !0, variant: "tiny", children: a }),
+          t === "full" && /* @__PURE__ */ d(
+            k,
+            {
+              "aria-label": `View ${l?.name || ""} Transactions`,
+              disabled: i.categoryData.length === 0,
+              onClick: w,
+              sx: { mt: { xl: 4, xs: 0 }, zIndex: 1 },
+              variant: "text",
+              children: r.view_transactions
+            }
+          )
+        ] }) }) })
+      ]
+    }
+  );
+}, et = N(B), rt = ({ data: i, onSelected: g, selectedId: s }) => {
+  const c = (o, n) => {
+    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), g(n));
+  };
+  return /* @__PURE__ */ d(h, { gap: 8, height: "100%", justifyContent: "center", my: "auto", children: i.categoryData.map((o) => /* @__PURE__ */ f(
+    h,
+    {
+      alignItems: "center",
+      "aria-label": o.name,
+      "aria-pressed": o.guid === s,
+      direction: "row",
+      gap: 8,
+      onClick: () => g(o.guid),
+      onKeyDown: (n) => c(n, o.guid),
+      role: "button",
+      sx: { cursor: "pointer", touchAction: "manipulation" },
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ d(T, { borderRadius: 4, height: 8, sx: { backgroundColor: o.color }, width: 8 }),
+        /* @__PURE__ */ d(y, { bold: o.guid === s, variant: "caption", children: o.name })
+      ]
+    },
+    o.guid
+  )) });
+};
+export {
+  et as S,
+  nt as a,
+  rt as b,
+  ot as g
+};

package/dist/core/types/localization/SpendingCopy.d.ts

@@ -1,5 +1,6 @@
 export interface SpendingCopy {
     by_category: string;
+    chart_description: string;
     close_drawer_aria: string;
     income_tab_title: string;
     mini_title: string;

package/dist/finstrong/index.es.js

@@ -58,7 +58,7 @@ import { ChartsXAxis as Qn } from "@mui/x-charts/ChartsXAxis";
 import { ChartsYAxis as Zn } from "@mui/x-charts/ChartsYAxis";
 import { startOfMonth as It } from "date-fns/startOfMonth";
 import { endOfMonth as At } from "date-fns/endOfMonth";
-import { g as Jn, S as eo, b as to } from "../SpendingLegend-Bn3DzGyK.mjs";
+import { g as Jn, S as eo, b as to } from "../SpendingLegend-CxvNOg3c.mjs";
 import { formatISO as no } from "date-fns/formatISO";
 import { fromUnixTime as oo } from "date-fns/fromUnixTime";
 import { subDays as ro } from "date-fns/subDays";

package/dist/insights/components/insights/WeeklyNoSpendDays/BubbleWeek.d.ts

@@ -3,7 +3,10 @@ interface BubbleWeekProps {
     noSpendDays: {
         [key in string]?: string;
     };
-    daysOfTheWeek: string[];
+    daysOfTheWeek: Array<{
+        name: string;
+        altText: string;
+    }>;
 }
 export declare const BubbleWeek: React.FC<BubbleWeekProps>;
 export {};

package/dist/insights/components/insights/WeeklyNoSpendDays/WeeklyNoSpendDays.d.ts

@@ -5,7 +5,10 @@ export interface WeeklyNoSpendDaysProps extends CommonBeatProps {
         noSpendDays: {
             [key in string]?: string;
         };
-        daysOfTheWeek: string[];
+        daysOfTheWeek: Array<{
+            name: string;
+            altText: string;
+        }>;
     };
 }
 export declare const WeeklyNoSpendDays: React.FC<WeeklyNoSpendDaysProps>;