@mx-cartographer/experiences 7.12.5 → 7.12.7

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [7.12.7] - 03-23-2026
+
+- **FIXED** - Cosmetic issues in dark mode (flagged transactions and survey feedback)
+
+## [7.12.6] - 03-23-2026
+
+- **FIXED** - Trends Category List Icons Fill Color.
+
 ## [7.12.5] - 03-18-2026
 
 - **FIXED** - ADA color contrast in BudgetDetails zero states

package/README.md

@@ -1,5 +1,5 @@
 - [Getting Started](#getting-started)
-- [Merging and Publishing](#merging-and-publishing)
+<!-- - [Merging and Publishing](#merging-and-publishing) -->
 - [React Library Application Template](#react-library-application-template)
 
 
@@ -12,7 +12,9 @@ In order to run the project you will need to make sure that you have yarn instal
 1. The storybook project should automatically run in your local browser
 1. The QA storybook containing the latest Experience changes is [accessible here](https://experiences.kube.qa.internal.mx/?path=/docs/experiences-introduction--docs)
 
-## Publishing alpha versions
+<!-- Commented this out to prevent exposing internal operations in the npm registry -->
+
+<!-- ## Publishing alpha versions
 1. Bump the version in package.json using the format `major.minor.patch-alpha.<yourinitials><n>` See [the version history](https://www.npmjs.com/package/@mx-cartographer/experiences?activeTab=versions) for examples.
 1. Run `npm publish --tag alpha`.
 
@@ -21,7 +23,7 @@ In order to run the project you will need to make sure that you have yarn instal
 1. Update CHANGELOG.md and include the version to publish using the standard `major.minor.patch`. If there are breaking changes, we bump the major, new feature we bump minor and bug fixes or minor changes, we bump patch.
 1. Request a MR review by commenting `shipit --review`
 1. Once the MR is approved, comment `shipit --publish-version=major|minor|patch`.
-2. Shipit will bump the version in package.json, merge and publish the package to npm.
+2. Shipit will bump the version in package.json, merge and publish the package to npm. -->
 
 
 ## React Library Application Template

package/dist/{ManageIncome-DE6JV3Mp.mjs → ManageIncome-YlYP7fi8.mjs}

@@ -17,8 +17,8 @@ import { endOfMonth as ue } from "date-fns/endOfMonth";
 import { parseISO as me } from "date-fns/parseISO";
 import J from "@mui/material/Button";
 import { Delete as pe, Add as ye, ReceiptLong as he } from "@mxenabled/mx-icons";
-import { T as V, u as fe, S as ge, a as Ce } from "./StatusIndicator-Bo80rdKq.mjs";
-import { T as be } from "./TransactionDetails-DWZuZgBw.mjs";
+import { T as V, u as fe, S as ge, a as Ce } from "./StatusIndicator-BnYO7yL3.mjs";
+import { T as be } from "./TransactionDetails-DmDYs0lX.mjs";
 import { addYears as j } from "date-fns/addYears";
 import { getDayOfYear as xe } from "date-fns/getDayOfYear";
 import { setDayOfYear as Se } from "date-fns/setDayOfYear";

package/dist/{RecurringSettings-CkVI8rR3.mjs → RecurringSettings-BGN0u9oW.mjs}

@@ -7,7 +7,7 @@ import R from "@mui/material/Tabs";
 import d from "@mui/material/Divider";
 import b from "@mui/material/List";
 import T from "@mui/material/Stack";
-import { R as C, A as S, a as E, M as v } from "./ManageIncome-DE6JV3Mp.mjs";
+import { R as C, A as S, a as E, M as v } from "./ManageIncome-YlYP7fi8.mjs";
 import { u as _, i as A, g as f } from "./hooks-BxkfR-Ff.mjs";
 import { R as y, F as N } from "./RecurringTransactions-CYNpe_RS.mjs";
 import { A as m } from "./Analytics-BYItVAe-.mjs";

package/dist/StatusIndicator-BnYO7yL3.mjs

@@ -0,0 +1,261 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import u from "react";
+import { observer as D } from "mobx-react-lite";
+import { useVirtualizer as B } from "@tanstack/react-virtual";
+import b from "@mui/material/Box";
+import H from "@mui/material/Divider";
+import W from "@mui/material/List";
+import { G as X, h as E, u as R, g as K } from "./hooks-BxkfR-Ff.mjs";
+import { MerchantLogo as P, Icon as v, Text as l, P as Y, H2 as Z } from "@mxenabled/mxui";
+import F from "@mui/material/ListItemAvatar";
+import q from "@mui/material/ListItemText";
+import s from "@mui/material/Stack";
+import { useTheme as J } from "@mui/material/styles";
+import { T as Q, L as ee, O as te } from "./Transaction-B_2AG36b.mjs";
+import { f as re } from "./NumberFormatting-QCaNwbjv.mjs";
+import { Receipt as oe } from "@mxenabled/mx-icons";
+import { fromUnixTime as y } from "date-fns/fromUnixTime";
+import { isSameDay as z } from "date-fns/isSameDay";
+import { h as ne } from "./DateUtil-wcYTmDRD.mjs";
+import { L as ie } from "./Loader-D3rjKx72.mjs";
+import { A as se } from "./Analytics-BYItVAe-.mjs";
+const C = () => {
+  if (!u.useContext(X))
+    throw new Error("useTransactionsUiStore() must be used within the GlobalDataContext");
+  return E().uiStore;
+};
+function ae() {
+  return window.opener && window.opener.location ? window.opener.location.toString() : document.referrer;
+}
+function ce(e) {
+  const r = ae().replace(/([^:]+:\/\/[^\/]+).*/, "$1"), o = window.parent || window.opener || !1;
+  return o && o.postMessage && r ? (o.postMessage(e, r), !0) : !1;
+}
+function le(e) {
+  return ce({
+    metadata: { beat_guid: e },
+    mx: !0,
+    type: "mx/moneyDashboard/insightOnTransaction"
+  });
+}
+const de = ({ transaction: e, onClick: r }) => {
+  const c = J().palette.mode === "dark", { associatedBeats: m } = E(), { expandedSplits: h } = C(), { transactions: d } = R(), { showInsights: f } = C(), g = e.transaction_type === Q.CREDIT, _ = u.useMemo(() => m.find((x) => x.associated_transaction_guid === e.guid), [m, e]);
+  return (
+    //TODO: implement common/components/ListItemRow.tsx
+    /* @__PURE__ */ n(
+      ee,
+      {
+        clickEventName: te.ON_TRANSACTION_LIST_ITEM_CLICK,
+        onClick: r ? () => r(e.guid) : void 0,
+        children: [
+          /* @__PURE__ */ t(F, { children: e.parent_guid && h.includes(e.parent_guid) ? /* @__PURE__ */ t(u.Fragment, {}) : /* @__PURE__ */ t(
+            P,
+            {
+              categoryGuid: e.top_level_category_guid || "",
+              merchantGuid: e.merchant_guid || ""
+            }
+          ) }),
+          /* @__PURE__ */ t(
+            q,
+            {
+              disableTypography: !0,
+              secondary: /* @__PURE__ */ n(s, { direction: "row", justifyContent: "space-between", children: [
+                /* @__PURE__ */ n(s, { alignItems: "center", direction: "row", gap: 4, children: [
+                  e.is_flagged && /* @__PURE__ */ t(
+                    v,
+                    {
+                      fill: !0,
+                      name: "flag",
+                      size: 16,
+                      sx: { color: c ? "primary.main" : "warning.dark" }
+                    }
+                  ),
+                  e.is_hidden && /* @__PURE__ */ t(v, { name: "visibility_off", size: 16 }),
+                  e.has_been_split && /* @__PURE__ */ t(v, { name: "call_split", size: 16 }),
+                  /* @__PURE__ */ t(l, { variant: "XSmall", children: e.has_been_split ? d.split_transaction_category_label : e.category })
+                ] }),
+                _ && f && /* @__PURE__ */ t(
+                  l,
+                  {
+                    bold: !0,
+                    color: "action.active",
+                    onClick: (x) => {
+                      x.stopPropagation(), x.preventDefault(), le(_.guid);
+                    },
+                    variant: "XSmall",
+                    children: _.short_title
+                  }
+                )
+              ] }),
+              children: /* @__PURE__ */ n(s, { direction: "row", justifyContent: "space-between", sx: { gap: 8 }, children: [
+                /* @__PURE__ */ n(l, { bold: !0, variant: "Body", children: [
+                  e.is_hidden && d.hide_trnx_cancel_hidden_note,
+                  e.payee || e.description || e.feed_description
+                ] }),
+                /* @__PURE__ */ n(
+                  l,
+                  {
+                    bold: !0,
+                    color: g ? "success.main" : "text.primary",
+                    sx: { flexShrink: 0 },
+                    variant: "Body",
+                    children: [
+                      g ? "+" : "",
+                      re(e.amount, "0,0.00")
+                    ]
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  );
+}, ue = D(de), me = ({
+  bgcolor: e = "background.default",
+  children: r
+}) => /* @__PURE__ */ t(b, { display: "inline-block", sx: { bgcolor: e, py: 6, width: "100%" }, children: /* @__PURE__ */ t(l, { bold: !0, sx: { pl: 24 }, variant: "XSmall", children: r }) }), pe = ({ showIcon: e = !0, showSubtitle: r = !0 }) => {
+  const { transactions: o } = R();
+  return /* @__PURE__ */ n(s, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
+    e && /* @__PURE__ */ t(oe, { color: "action", sx: { fontSize: 32 } }),
+    /* @__PURE__ */ t(l, { bold: !0, color: "text.secondary", variant: "Small", children: o.zero_state_no_transactions }),
+    r && /* @__PURE__ */ t(l, { color: "text.secondary", variant: "XSmall", children: o.zero_state_there_are_no_transactions })
+  ] });
+}, he = D(pe), k = (e, r) => {
+  const o = y(r[e].date), c = y(r[e - 1]?.date);
+  return !z(o, c);
+}, fe = (e, r) => {
+  const o = y(r[e].date), c = y(r[e + 1]?.date);
+  return z(o, c);
+}, A = 65, N = 32, ge = ({
+  bgcolor: e,
+  filter: r,
+  height: o = "calc(100dvh - 36px)",
+  loader: c = /* @__PURE__ */ t(ie, { label: "Loading", size: 40 }),
+  onClick: m,
+  showInsights: h = !1,
+  showLoader: d = !1,
+  showHiddenTransactions: f = !1,
+  transaction: g,
+  width: _ = "100%",
+  zeroState: x = /* @__PURE__ */ t(he, {})
+}) => {
+  const { isLoading: w, sortedTransactions: I } = E(), p = u.useMemo(() => {
+    const i = r ? I.filter(r) : I, a = g ?? i;
+    return f ? a : a.filter((S) => !S.is_hidden);
+  }, [I, f]), { clearExpandedSplits: O, setShowInsights: G, toggleSplit: M } = C(), { onEvent: V } = K(), $ = (i) => {
+    const a = p.find((S) => S.guid === i);
+    if (a?.has_been_split) {
+      M(a.guid);
+      return;
+    }
+    V(se.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
+      account_guid: a?.account_guid,
+      transaction_guid: i
+    }), m?.(i);
+  }, L = u.useRef(null), T = B({
+    count: p.length,
+    getScrollElement: () => L.current,
+    estimateSize: (i) => A + (k(i, p) ? N : 0),
+    overscan: 5
+  });
+  return u.useEffect(() => T.measure(), [p]), u.useEffect(() => G(h), [h]), u.useEffect(() => () => O(), []), /* @__PURE__ */ t(W, { sx: { width: _ }, children: /* @__PURE__ */ t(b, { height: o, overflow: "auto", ref: L, width: _, children: /* @__PURE__ */ n(
+    b,
+    {
+      height: (
+        // set the height to auto when there are no transactions so the zero state isn't set to 0
+        T.getVirtualItems().length === 0 ? "auto" : T.getTotalSize()
+      ),
+      position: "relative",
+      width: "100%",
+      children: [
+        (w || d) && c,
+        !w && !d && T.getVirtualItems().length === 0 && x,
+        !w && !d && T.getVirtualItems().length > 0 && T.getVirtualItems().map((i) => {
+          const a = p[i.index], S = k(i.index, p), U = fe(i.index, p), j = A + (S ? N : 0);
+          return /* @__PURE__ */ n(
+            b,
+            {
+              sx: {
+                height: j,
+                position: "absolute",
+                transform: `translateY(${i.start}px)`,
+                width: "100%",
+                bgcolor: "background.paper"
+              },
+              children: [
+                S && /* @__PURE__ */ t(me, { bgcolor: e, children: ne(a.date) }),
+                /* @__PURE__ */ t(
+                  ue,
+                  {
+                    ...m && { onClick: $ },
+                    transaction: a
+                  }
+                ),
+                /* @__PURE__ */ t(H, { sx: { ml: U ? 68 : 0 } })
+              ]
+            },
+            a.guid
+          );
+        })
+      ]
+    }
+  ) }) });
+}, $e = D(ge), _e = ({
+  amount: e,
+  borderRadius: r = "2px",
+  completeColor: o = "success.main",
+  icon: c,
+  label: m,
+  leftLabel: h,
+  percentComplete: d = 0,
+  rightLabel: f,
+  sx: g
+}) => /* @__PURE__ */ t(s, { sx: { p: 24, width: "100%", ...g }, children: /* @__PURE__ */ n(s, { className: "details-container", sx: { gap: 16 }, children: [
+  /* @__PURE__ */ n(s, { sx: { alignItems: "center", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ t(b, { children: c }),
+    /* @__PURE__ */ n(s, { children: [
+      /* @__PURE__ */ t(Y, { variant: "body2", children: m }),
+      typeof e == "string" ? /* @__PURE__ */ t(Z, { children: e }) : e
+    ] })
+  ] }),
+  /* @__PURE__ */ n(s, { sx: { gap: 4 }, children: [
+    /* @__PURE__ */ t(
+      s,
+      {
+        sx: {
+          bgcolor: "divider",
+          borderRadius: r,
+          flexDirection: "row",
+          height: 16,
+          width: "100%"
+        },
+        children: /* @__PURE__ */ t(
+          b,
+          {
+            sx: {
+              bgcolor: o,
+              borderRadius: r,
+              height: 16,
+              width: `${d}%`
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ n(s, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ t(l, { variant: "body2", children: h }),
+      /* @__PURE__ */ t(l, { variant: "body2", children: f })
+    ] })
+  ] })
+] }) }), Ue = _e;
+export {
+  me as S,
+  $e as T,
+  ue as a,
+  Ue as b,
+  fe as h,
+  k as s,
+  C as u
+};