@mx-cartographer/experiences 7.2.12-alpha.san1 → 7.2.13-alpha-ram1-finstrongtesting-wec-947

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [7.2.13] - 11-24-2025
+
+- **FIXED** - interactive controls for budget and spending mini widgets
+
 ## [7.2.12] - 11-20-2025
 
 - **FIXED** - Accessibility label on split transaction amount input

package/dist/Donut-oaQFlbit.mjs

@@ -0,0 +1,86 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import b from "react";
+import { selectAll as m, interpolateString as x, arc as I } from "d3";
+import d from "@mui/material/Box";
+import { useTheme as S } from "@mui/material/styles";
+const k = 100, E = 140, v = 10, B = ({
+  data: u,
+  hoveredId: h,
+  onClick: s,
+  onMouseEnter: a,
+  onMouseLeave: l,
+  selectedId: i,
+  size: t = 300,
+  children: p
+}) => {
+  const f = S();
+  let r = 0;
+  const g = (o, n) => {
+    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), s?.(n));
+  }, y = (o) => {
+    a?.(o);
+  }, D = (o) => {
+    l?.(o);
+  };
+  return b.useEffect(() => {
+    m(".arc-outer").transition("roll").duration(500).attrTween("transform", () => x("rotate(0)", "rotate(360)"));
+  }, []), /* @__PURE__ */ c(d, { height: t, position: "relative", width: t, children: [
+    /* @__PURE__ */ e(d, { height: "100%", width: "100%", children: p }),
+    /* @__PURE__ */ c(
+      "svg",
+      {
+        height: t,
+        style: { position: "absolute", top: 0, left: 0 },
+        viewBox: "-150 -150 300 300",
+        width: t,
+        children: [
+          /* @__PURE__ */ e("style", { children: `
+            .arc-outer:focus,
+            .arc-outer:focus-visible {
+              stroke: ${f.palette.primary.main};
+              stroke-width: 3;
+              stroke-opacity: 0.8;
+            }
+          ` }),
+          /* @__PURE__ */ e("g", { children: u.map((o) => {
+            const n = r;
+            r = r + 2 * Math.PI * (o.value / 100);
+            const w = r, R = I().cornerRadius(4)({
+              innerRadius: k,
+              outerRadius: E + (o.id === i || o.id === h ? v : 0),
+              startAngle: n,
+              endAngle: w,
+              padAngle: 0.025
+            });
+            return /* @__PURE__ */ e(
+              "path",
+              {
+                "aria-label": o.label || `Segment ${o.id}`,
+                "aria-pressed": o.id === i,
+                className: "arc-outer",
+                d: R,
+                fill: o.color,
+                onBlur: () => D(o.id),
+                onClick: () => s?.(o.id),
+                onFocus: () => y(o.id),
+                onKeyDown: (A) => g(A, o.id),
+                onMouseEnter: () => a?.(o.id),
+                onMouseLeave: () => l?.(o.id),
+                role: "button",
+                style: {
+                  cursor: "pointer",
+                  outline: "none"
+                },
+                tabIndex: 0
+              },
+              o.id
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+}, j = B;
+export {
+  j as D
+};

package/dist/SpendingLegend-CW8mIzqd.mjs

@@ -0,0 +1,196 @@
+import { b as S } from "./CategoryUtil-DUM8NuGO.mjs";
+import { b as p } from "./Category-CevNQ03n.mjs";
+import { jsxs as y, Fragment as v, jsx as m } from "react/jsx-runtime";
+import x from "react";
+import { observer as w } from "mobx-react-lite";
+import f from "@mui/material/Stack";
+import { CategoryIcon as M, CategoryIconVariants as N, Text as h } from "@mxenabled/mxui";
+import { u as k } from "./useAriaLive-B3_pRUio.mjs";
+import G from "@mui/material/Button";
+import { useTheme as A } from "@mui/material";
+import { D as O } from "./Donut-oaQFlbit.mjs";
+import { u as j } from "./hooks-C41HAxM5.mjs";
+import { u as R } from "./useScreenSize-B6JyS_Lj.mjs";
+import { f as D } from "./NumberFormatting-Buh7u8Oi.mjs";
+import $ from "@mui/material/Box";
+const T = 5, B = (r, l, u) => u.reduce((g, t) => {
+  if (t.total > 0) {
+    const n = r.find((e) => e.guid === t.category_guid);
+    if (!n) return g;
+    const s = n.parent_guid ?? n.guid, o = r.find((e) => e.guid === s);
+    if (!o) return g;
+    const a = {
+      guid: n.guid,
+      name: n.guid === s ? `General ${n.name}` : n.name,
+      color: S(o.guid, l),
+      amount: t.total
+    }, c = g.find((e) => e.guid === s);
+    c ? (c.amount += t.total, c.categoryTotals?.push(a)) : g.push({
+      guid: s,
+      name: o.name,
+      color: S(o.guid, l),
+      categoryTotals: [a],
+      amount: t.total
+    });
+  }
+  return g;
+}, []), to = (r, l, u, g) => {
+  const t = B(r, u, g), n = t.filter(
+    (e) => e.guid !== p.INCOME && e.guid !== p.INVESTMENTS && e.guid !== p.TRANSFER
+  ).sort((e, d) => d.amount - e.amount), s = n.reduce(
+    (e, d) => e + d.amount,
+    0
+  ), o = n.length > T ? T : n.length, a = n.slice(0, o), c = a.map((e) => ({
+    id: e.guid,
+    color: S(e.guid, u),
+    label: e.name,
+    value: e.amount / s * 100
+  }));
+  if (n.length > 5) {
+    const e = n.slice(T, t.length), d = e.reduce(
+      (C, i) => C + i.amount,
+      0
+    );
+    a.push({
+      guid: "other",
+      color: u.palette.categories.others || "",
+      name: l.saving_goal_other,
+      categoryTotals: e,
+      amount: d
+    }), c.push({
+      id: "other",
+      color: u.palette.categories.others || "",
+      label: l.saving_goal_other,
+      value: d / s * 100
+    });
+  }
+  return {
+    categoryData: a,
+    donutData: c,
+    totalAmount: s
+  };
+}, no = (r, l, u) => {
+  const g = r.filter(
+    (o) => o.guid === p.INCOME || o.parent_guid === p.INCOME
+  ), t = l.filter((o) => g.some((a) => a.guid === o.category_guid)).sort((o, a) => o.total - a.total).map((o, a) => ({
+    guid: o.category_guid,
+    name: r.find((c) => c.guid === o.category_guid)?.name,
+    color: u[a],
+    categoryTotals: [],
+    amount: Math.abs(o.total)
+  })), n = t.reduce(
+    (o, a) => o + a.amount,
+    0
+  ), s = t.map((o) => ({
+    id: o.guid,
+    color: o.color,
+    label: o.name,
+    value: o.amount / n * 100
+  }));
+  return {
+    categoryData: t,
+    donutData: s,
+    totalAmount: n
+  };
+}, H = ({
+  data: r,
+  isIncome: l = !1,
+  onSelected: u,
+  onViewTransactions: g,
+  selectedId: t,
+  size: n = 150,
+  totalLabel: s,
+  variant: o = "mini"
+}) => {
+  const { spending: a } = j(), c = A(), { isTablet: e } = R(), { announce: d, ariaLive: C } = k(), i = x.useMemo(
+    () => t ? r.categoryData.find((b) => b.guid === t) : void 0,
+    [t]
+  );
+  x.useEffect(() => {
+    if (i) {
+      const b = D(i.amount, "0,0");
+      d(`${i.name}: ${b}`);
+    }
+  }, [i, d]);
+  const _ = x.useMemo(() => r.donutData.length > 0 ? r.donutData : [{ id: "0", color: c.palette.divider, value: 100 }], [r, c]), E = () => {
+    g?.(t);
+  }, I = e ? 32 : 48;
+  return /* @__PURE__ */ y(v, { children: [
+    C,
+    /* @__PURE__ */ m(O, { data: _, onClick: u, selectedId: t, size: n, children: /* @__PURE__ */ m(f, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ y(f, { alignItems: "center", justifyContent: "center", minHeight: n, minWidth: n, children: [
+      i && /* @__PURE__ */ y(
+        f,
+        {
+          alignItems: "center",
+          gap: o === "mini" ? 0 : 8,
+          mb: o === "mini" ? 0 : 8,
+          mt: o === "mini" ? 0 : -16,
+          sx: o === "mini" ? { gap: 0, mb: 0 } : { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } },
+          children: [
+            /* @__PURE__ */ m(
+              M,
+              {
+                categoryGuid: l ? p.INCOME : i.guid,
+                size: o === "mini" ? 24 : I,
+                variant: N.Transparent
+              }
+            ),
+            /* @__PURE__ */ m(
+              h,
+              {
+                color: "secondary",
+                noWrap: !0,
+                variant: o === "mini" ? "Tiny" : "Body",
+                children: i ? i.name : s
+              }
+            )
+          ]
+        }
+      ),
+      !i && o === "full" && /* @__PURE__ */ m(h, { bold: !0, color: "secondary", sx: { mb: { xs: 4, xl: 8 } }, children: s }),
+      /* @__PURE__ */ m(h, { variant: o === "mini" ? "H2" : "H1", children: i ? D(i.amount, "0,0") : D(r.totalAmount, "0,0") }),
+      !i && o === "mini" && /* @__PURE__ */ m(h, { color: "secondary", noWrap: !0, variant: "Tiny", children: s }),
+      o === "full" && /* @__PURE__ */ m(
+        G,
+        {
+          "aria-label": `View ${i?.name || ""} Transactions`,
+          disabled: r.categoryData.length === 0,
+          onClick: E,
+          sx: { mt: { xl: 4, xs: 0 }, zIndex: 1 },
+          variant: "text",
+          children: a.view_transactions
+        }
+      )
+    ] }) }) })
+  ] });
+}, eo = w(H), ro = ({ data: r, onSelected: l, selectedId: u }) => {
+  const g = (t, n) => {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), l(n));
+  };
+  return /* @__PURE__ */ m(f, { gap: 8, height: "100%", justifyContent: "center", my: "auto", children: r.categoryData.map((t) => /* @__PURE__ */ y(
+    f,
+    {
+      alignItems: "center",
+      "aria-label": t.name,
+      "aria-pressed": t.guid === u,
+      direction: "row",
+      gap: 8,
+      onClick: () => l(t.guid),
+      onKeyDown: (n) => g(n, t.guid),
+      role: "button",
+      sx: { cursor: "pointer" },
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ m($, { borderRadius: 4, height: 8, sx: { backgroundColor: t.color }, width: 8 }),
+        /* @__PURE__ */ m(h, { bold: t.guid === u, variant: "XSmall", children: t.name })
+      ]
+    },
+    t.guid
+  )) });
+};
+export {
+  eo as S,
+  no as a,
+  ro as b,
+  to as g
+};