@mx-cartographer/experiences 8.2.8 → 8.2.9-alpha-insightv2-2

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [8.2.9] - 05-28-2026
+
+- **UPDATED** - Adds Tab indexes to the BubbleWeek component to make it accessable to screen readers.
+
 ## [8.2.8] - 05-21-2026
 
 - **UPDATED** - ADD the html_in_description_cta field to the ClientConfigurableCta

package/dist/BarChartV2-x2zNPJ-a.mjs

@@ -0,0 +1,510 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import g, { useState as z, useEffect as B } from "react";
+import { observer as G } from "mobx-react-lite";
+import j from "@mui/material/ListItemAvatar";
+import W from "@mui/material/ListItemText";
+import m from "@mui/material/Stack";
+import { useTheme as L } from "@mui/material/styles";
+import { MerchantLogo as F, Text as h, Icon as E } from "@mxenabled/mxui";
+import { f as x } from "./NumberFormatting--XMeeBfr.mjs";
+import { G as Y, h as v, u as M } from "./hooks-BaO_gOI6.mjs";
+import { T as Z } from "./TransactionUtils-BphBJBbU.mjs";
+import { L as Q } from "./ListItemWrapper-B5r-YQQ_.mjs";
+import K from "@mui/material/Box";
+import { Receipt as X } from "@mxenabled/mx-icons";
+import { fromUnixTime as f } from "date-fns/fromUnixTime";
+import { isSameDay as H } from "date-fns/isSameDay";
+import { f as q, D as J } from "./DateFormats-HudZ3Bjs.mjs";
+import { ChartContainer as tt, ChartsReferenceLine as k, ChartsXAxis as et, BarPlot as nt } from "@mui/x-charts";
+const w = () => {
+  if (!g.useContext(Y))
+    throw new Error("useTransactionsUiStore() must be used within the GlobalDataContext");
+  return v().uiStore;
+}, ot = {
+  ON_TRANSACTION_CATEGORY_CLICK: "onTransactionCategoryClick",
+  ON_TRANSACTION_CATEGORY_CHANGED: "onTransactionCategoryChanged",
+  ON_TRANSACTION_MANUAL_ADD_CLICK: "onTransactionManualAddClick",
+  ON_TRANSACTION_MANUAL_ADD_ADDED: "onTransactionManualAddAdded",
+  ON_TRANSACTION_DATE_CHANGED: "onTransactionDateChanged",
+  ON_TRANSACTION_DATE_CLICK: "onTransactionDateClick",
+  ON_TRANSACTION_DELETE_CANCEL: "onTransactionDeleteCancel",
+  ON_TRANSACTION_DELETE_CLICK: "onTransactionDeleteClick",
+  ON_TRANSACTION_DELETE_DELETED: "onTransactionDeleted",
+  ON_TRANSACTION_DELETE_LOGO_CANCEL: "onTransactionDeleteLogoCancel",
+  ON_TRANSACTION_DELETE_LOGO_CLICK: "onTransactionDeleteLogoClick",
+  ON_TRANSACTION_DELETE_LOGO_DELETED: "onTransactionDeletedLogo",
+  ON_TRANSACTION_DESCRIPTION_EDIT_CLICK: "onTransactionDescriptionEditClick",
+  ON_TRANSACTION_DESCRIPTION_SAVE_CLICK: "onTransactionDescriptionSaveClick",
+  ON_TRANSACTION_EXPORT_CSV_CLICK: "onTransactionExportCsvClick",
+  ON_TRANSACTION_HIDDEN: "onTransactionHidden",
+  ON_TRANSACTION_HIDE_CLICK: "onTransactionHideClick",
+  ON_TRANSACTION_HIDE_CANCEL_CLICK: "onTransactionHideCancelClick",
+  ON_TRANSACTION_LIST_ITEM_CLICK: "onTransactionListItemClick",
+  ON_TRANSACTION_MEMO_CHANGED: "onTransactionMemoChanged",
+  ON_TRANSACTION_MEMO_CLICK: "onTransactionMemoClick",
+  ON_TRANSACTION_SPLIT_ADD_CLICK: "onTransactionSplitAddClick",
+  ON_TRANSACTION_SPLIT_CANCEL_CLICK: "onTransactionSplitCancelClick",
+  ON_TRANSACTION_SPLIT_CATEGORY_CLICK: "onTransactionSplitCategoryClick",
+  ON_TRANSACTION_SPLIT_CLICK: "onTransactionSplitClick",
+  ON_TRANSACTION_SPLIT_DELETE_CLICK: "onTransactionSplitDeleteClick",
+  ON_TRANSACTION_SPLIT_SAVE_CLICK: "onTransactionSplitSaveClick",
+  ON_TRANSACTION_TAGS_CHANGED: "onTransactionTagsChanged",
+  ON_TRANSACTION_TAGS_CLICK: "onTransactionTagsClick",
+  ON_TRANSACTION_TAGS_TAG_ADD_CANCEL_CLICK: "onTransactionTagsTagAddCancelClick",
+  ON_TRANSACTION_TAGS_TAG_ADD_CLICK: "onTransactionTagsTagAddClick",
+  ON_TRANSACTION_TAGS_TAG_ADDED: "onTransactionTagsTagAdded",
+  ON_TRANSACTION_TAGS_TAG_DELETE_CLICK: "onTransactionTagsTagDeleteClick",
+  ON_TRANSACTION_TAGS_TAG_DELETE_CANCEL_CLICK: "onTransactionTagsTagDeleteCancelClick",
+  ON_TRANSACTION_TAGS_TAG_DELETED: "onTransactionTagsTagDeleted",
+  ON_TRANSACTION_TAGS_TAG_EDIT_CLICK: "onTransactionTagsTagEditClick",
+  ON_TRANSACTION_TAGS_TAG_EDIT_SAVED: "onTransactionTagsTagEditSavedClick",
+  ON_TRANSACTION_TOGGLE_FLAG_CLICK: "onTransactionToggleFlagClick",
+  ON_TRANSACTION_UNHIDDEN: "onTransactionUnHidden",
+  ON_TRANSACTION_UNHIDE_CLICK: "onTransactionUnHideClick",
+  ON_TRANSACTION_UNHIDE_CANCEL_CLICK: "onTransactionUnHideCancelClick",
+  ON_TRANSACTION_UNSPLIT: "onTransactionUnsplit",
+  ON_TRANSACTION_UNSPLIT_CANCEL: "onTransactionUnsplitCancel"
+};
+function at() {
+  return window.opener && window.opener.location ? window.opener.location.toString() : document.referrer;
+}
+function $(t) {
+  const n = at().replace(/([^:]+:\/\/[^\/]+).*/, "$1"), e = window.parent || window.opener || !1;
+  return e && e.postMessage && n ? (e.postMessage(t, n), !0) : !1;
+}
+function it(t) {
+  return $({
+    metadata: { beat_guid: t },
+    mx: !0,
+    type: "mx/moneyDashboard/insightOnTransaction"
+  });
+}
+function bt(t) {
+  return $({
+    metadata: { template: t },
+    mx: !0,
+    type: "mx/pulse/client_configured_cta"
+  });
+}
+const rt = ({ transaction: t, onClick: n }) => {
+  const a = L().palette.mode === "dark", { associatedBeats: r } = v(), { expandedSplits: l } = w(), { transactions: _ } = M(), { showInsights: I } = w(), u = t.transaction_type === Z.CREDIT, T = g.useMemo(() => r.find((s) => s.associated_transaction_guid === t.guid), [r, t]), O = (s, d) => {
+    const A = [];
+    return s.is_flagged && A.push(
+      /* @__PURE__ */ o(
+        E,
+        {
+          fill: !0,
+          name: "flag",
+          size: 16,
+          sx: { color: d ? "primary.main" : "warning.dark" }
+        },
+        "flag"
+      )
+    ), s.is_hidden && A.push(/* @__PURE__ */ o(E, { name: "visibility_off", size: 16 }, "hidden")), s.has_been_split && A.push(/* @__PURE__ */ o(E, { name: "call_split", size: 16 }, "split")), A;
+  }, p = (s, d) => s.is_hidden ? d.is_excluded : s.has_been_split ? d.split_transaction_category_label : s.category || "";
+  return (
+    //TODO: implement common/components/ListItemRow.tsx
+    /* @__PURE__ */ c(
+      Q,
+      {
+        clickEventName: ot.ON_TRANSACTION_LIST_ITEM_CLICK,
+        onClick: n ? () => n(t.guid) : void 0,
+        sx: t.is_hidden ? { backgroundColor: "grey.50", color: "text.secondary" } : void 0,
+        children: [
+          /* @__PURE__ */ o(j, { children: t.parent_guid && l.includes(t.parent_guid) ? /* @__PURE__ */ o(g.Fragment, {}) : /* @__PURE__ */ o(
+            F,
+            {
+              categoryGuid: t.top_level_category_guid || "",
+              merchantGuid: t.merchant_guid || ""
+            }
+          ) }),
+          /* @__PURE__ */ o(
+            W,
+            {
+              disableTypography: !0,
+              secondary: /* @__PURE__ */ c(m, { direction: "row", justifyContent: "space-between", children: [
+                /* @__PURE__ */ c(m, { alignItems: "center", direction: "row", gap: 4, children: [
+                  O(t, a),
+                  /* @__PURE__ */ o(h, { variant: "caption", children: p(t, _) })
+                ] }),
+                T && I && /* @__PURE__ */ o(
+                  h,
+                  {
+                    bold: !0,
+                    color: "action.active",
+                    onClick: (s) => {
+                      s.stopPropagation(), s.preventDefault(), it(T.guid);
+                    },
+                    variant: "caption",
+                    children: T.short_title
+                  }
+                )
+              ] }),
+              children: /* @__PURE__ */ c(m, { direction: "row", justifyContent: "space-between", sx: { gap: 8 }, children: [
+                /* @__PURE__ */ o(h, { bold: !0, variant: "body1", children: t.payee || t.description || t.feed_description }),
+                /* @__PURE__ */ c(
+                  h,
+                  {
+                    bold: !0,
+                    color: u ? "success.main" : "text.primary",
+                    sx: { flexShrink: 0 },
+                    variant: "body1",
+                    children: [
+                      u ? "+" : "",
+                      x(t.amount, "0,0.00")
+                    ]
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  );
+}, kt = G(rt), wt = ({
+  bgcolor: t = "background.default",
+  children: n
+}) => /* @__PURE__ */ o(K, { display: "inline-block", sx: { bgcolor: t, py: 6, width: "100%" }, children: /* @__PURE__ */ o(h, { bold: !0, sx: { pl: 24 }, variant: "caption", children: n }) }), st = ({ showIcon: t = !0, showSubtitle: n = !0 }) => {
+  const { transactions: e } = M();
+  return /* @__PURE__ */ c(m, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
+    t && /* @__PURE__ */ o(X, { color: "action", sx: { fontSize: 32 } }),
+    /* @__PURE__ */ o(h, { bold: !0, color: "text.secondary", variant: "body2", children: e.zero_state_no_transactions }),
+    n && /* @__PURE__ */ o(h, { color: "text.secondary", variant: "caption", children: e.zero_state_there_are_no_transactions })
+  ] });
+}, Gt = G(st), vt = (t, n) => {
+  const e = f(n[t].date), a = f(n[t - 1]?.date);
+  return !H(e, a);
+}, Mt = (t, n) => {
+  const e = f(n[t].date), a = f(n[t + 1]?.date);
+  return H(e, a);
+}, Kt = (t) => t?.data ? t.data.map((n) => Object.fromEntries((t.names || []).map((e, a) => [e, n[a]]))) : [], Ht = (t, n = "") => t.map((a) => {
+  const r = q(a.date, J.MONTH_SHORT);
+  return {
+    ariaLabel: `
+        ${r},
+        ${x(a.amount, "0.00")},
+        ${n}`,
+    label: r,
+    value: a.amount,
+    formattedAmount: x(a.amount, "0,0")
+  };
+}), ct = (t) => {
+  const [n, e] = z({ width: 0, height: 0 });
+  return B(() => {
+    const a = () => {
+      if (t.current) {
+        const { offsetWidth: r, offsetHeight: l } = t.current;
+        e({ width: r, height: l });
+      }
+    };
+    return a(), window.addEventListener("resize", a), () => {
+      window.removeEventListener("resize", a);
+    };
+  }, [t]), n;
+}, lt = ({
+  color: t,
+  legendStyle: n = {},
+  monthlyAmount: e,
+  monthlyAmountLabel: a,
+  trendAmount: r,
+  trendAmountLabel: l
+}) => {
+  const _ = L();
+  return /* @__PURE__ */ c(
+    m,
+    {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 24,
+        justifyContent: "flex-start",
+        py: 4,
+        width: "100%",
+        ...n
+      },
+      children: [
+        a && /* @__PURE__ */ c(m, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+          /* @__PURE__ */ o(
+            "svg",
+            {
+              "aria-hidden": "true",
+              "aria-labelledby": "chartLegendLabel",
+              fill: "none",
+              height: "12",
+              role: "figure",
+              width: "12",
+              children: /* @__PURE__ */ o("rect", { fill: t, height: "12", rx: "2", width: "12" })
+            }
+          ),
+          /* @__PURE__ */ c(h, { id: "chartLegendLabel", variant: "caption", children: [
+            a,
+            ": ",
+            e
+          ] })
+        ] }),
+        l && /* @__PURE__ */ c(m, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+          /* @__PURE__ */ o(
+            "svg",
+            {
+              "aria-hidden": "true",
+              "aria-labelledby": "chartLegendLabel",
+              fill: "none",
+              height: "12",
+              role: "figure",
+              width: "12",
+              children: /* @__PURE__ */ o("rect", { fill: _.palette.chart.chart7, height: "12", rx: "2", width: "12" })
+            }
+          ),
+          /* @__PURE__ */ c(h, { id: "chartLegendLabel", variant: "caption", children: [
+            l,
+            ": ",
+            r
+          ] })
+        ] })
+      ]
+    }
+  );
+}, Tt = (t, n) => {
+  if (t <= 0 || n <= 0) return "";
+  const e = Math.min(4, t / 2, n / 2);
+  return `M${e},0 L${t - e},0 Q${t},0 ${t},${e} L${t},${n} L0,${n} L0,${e} Q0,0 ${e},0 Z`;
+}, _t = ({
+  colorRange: t,
+  data: n,
+  dataIndex: e,
+  removeSelectedTabColorChange: a,
+  selectedTabIndex: r,
+  style: l,
+  ..._
+}) => {
+  const I = L(), { ariaLabel: u, formattedAmount: T } = n[e], O = r === e ? "bold" : 400, p = l.x ?? 0, s = l.y ?? 0, d = l.width ?? 0, A = l.height ?? 0;
+  return /* @__PURE__ */ c("g", { "aria-label": u, children: [
+    /* @__PURE__ */ o(
+      "path",
+      {
+        ..._,
+        d: Tt(d, A),
+        fill: t[e],
+        transform: `translate(${p}, ${s})`
+      }
+    ),
+    /* @__PURE__ */ o(
+      "text",
+      {
+        fill: I.palette.text.primary,
+        fontSize: 11,
+        fontWeight: a ? "bold" : O,
+        textAnchor: "middle",
+        x: p + d / 2,
+        y: s - 8,
+        children: T
+      }
+    )
+  ] });
+}, $t = ({
+  amounts: t,
+  color: n,
+  data: e,
+  heightOverride: a,
+  margin: r = {
+    bottom: 30,
+    left: 40,
+    right: 40,
+    top: 20
+  },
+  onBarClick: l,
+  legendPosition: _ = "bottom",
+  monthlyAmountLabel: I,
+  removeSelectedTabColorChange: u,
+  selectedTabIndex: T,
+  trendAmountLabel: O
+}) => {
+  const p = g.useRef(null), { height: s, width: d } = ct(p), A = L(), y = g.useMemo(() => {
+    const i = e.map(({ value: S }) => S), C = Math.min(...i), N = Math.max(...i);
+    return {
+      series: [
+        {
+          data: i,
+          type: "bar"
+        }
+      ],
+      xAxis: [
+        {
+          data: e.map(({ label: S }) => S),
+          scaleType: "band",
+          categoryGapRatio: 0.45
+        }
+      ],
+      yAxis: [
+        {
+          scaleType: "linear",
+          min: C < 0 ? C * 1.2 : 0,
+          max: N > 0 ? N : 0
+        }
+      ]
+    };
+  }, [e]), U = g.useMemo(() => {
+    const i = `${n}80`;
+    return u ? e.map(() => n) : T == null ? [...new Array(e.length - 1).fill(i), n] : e.map((C, N) => N === T ? n : i);
+  }, [n, e, T]), P = g.useMemo(
+    () => e[T ?? e.length - 1],
+    [e, T]
+  ), D = e.reduce((i, C) => Math.min(i, C.value), 1 / 0) < 0, R = /* @__PURE__ */ o(
+    lt,
+    {
+      color: n,
+      legendStyle: { pl: r.left },
+      monthlyAmount: P.formattedAmount,
+      monthlyAmountLabel: I,
+      trendAmount: t?.formattedAverage,
+      trendAmountLabel: O
+    }
+  ), b = I || O, V = (i, { dataIndex: C }) => l?.(C);
+  return /* @__PURE__ */ c(m, { sx: { alignItems: "center", width: "100%" }, children: [
+    b && _ === "top" && R,
+    /* @__PURE__ */ o(
+      K,
+      {
+        ref: p,
+        sx: {
+          height: a || 122,
+          mb: _ === "top" ? 0 : 4,
+          mt: _ === "top" ? 4 : 0,
+          touchAction: "pan-y",
+          width: "100%",
+          "& svg": {
+            touchAction: "pan-y",
+            userSelect: "none"
+          },
+          "& .recharts-wrapper": {
+            touchAction: "pan-y"
+          }
+        },
+        children: /* @__PURE__ */ c(
+          tt,
+          {
+            height: s,
+            margin: {
+              bottom: r.bottom,
+              left: r.left,
+              right: r.right,
+              top: r.top || 45
+            },
+            series: y.series,
+            width: d,
+            xAxis: y.xAxis,
+            yAxis: [{ width: 0 }],
+            children: [
+              t?.average && /* @__PURE__ */ o(
+                k,
+                {
+                  labelAlign: "middle",
+                  lineStyle: {
+                    stroke: A.palette.chart.chart7,
+                    strokeDasharray: "4",
+                    strokeLinecap: "round",
+                    strokeWidth: 1
+                  },
+                  y: t?.average
+                }
+              ),
+              D && /* @__PURE__ */ o(
+                k,
+                {
+                  labelAlign: "middle",
+                  lineStyle: {
+                    stroke: A.palette.chart.chart7
+                  },
+                  y: 0
+                }
+              ),
+              /* @__PURE__ */ o(
+                et,
+                {
+                  position: "bottom",
+                  slots: {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    axisTickLabel: ({ text: i, ownerState: C, ...N }) => {
+                      const S = e[T ?? e.length - 1]?.label;
+                      return /* @__PURE__ */ o(
+                        "text",
+                        {
+                          ...N,
+                          style: {
+                            ...N.style,
+                            fontWeight: !u && S === i ? "bold" : 400
+                          },
+                          children: i
+                        }
+                      );
+                    }
+                  },
+                  sx: (i) => ({
+                    "& .MuiChartsAxis-line": {
+                      stroke: D ? "none" : i.palette.text?.primary
+                    },
+                    "& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick": {
+                      display: "none"
+                    },
+                    "& .MuiChartsAxis-tickLabel": {
+                      transform: D ? "translateY(15px)" : {}
+                    }
+                  }),
+                  tickLabelStyle: {
+                    fontSize: 11
+                  }
+                }
+              ),
+              /* @__PURE__ */ o(
+                nt,
+                {
+                  onItemClick: V,
+                  slots: {
+                    bar: (i) => {
+                      const { ownerState: C, ...N } = i;
+                      return /* @__PURE__ */ o(
+                        _t,
+                        {
+                          ...N,
+                          colorRange: U,
+                          data: e,
+                          dataIndex: C.dataIndex,
+                          removeSelectedTabColorChange: u,
+                          selectedTabIndex: T ?? e.length - 1,
+                          style: {
+                            height: i.height,
+                            x: i.x,
+                            y: i.y,
+                            width: i.width
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    b && _ === "bottom" && R
+  ] });
+};
+export {
+  $t as B,
+  _t as C,
+  lt as L,
+  ot as O,
+  wt as S,
+  kt as T,
+  Gt as Z,
+  Ht as a,
+  Kt as b,
+  ct as c,
+  Mt as h,
+  bt as p,
+  vt as s,
+  w as u
+};