@mx-cartographer/experiences 7.6.21 → 7.6.22

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [7.6.22] - 01-22-2026
+
+- **UPDATED** - Transactions details and list actions a11y imrovements
+
 ## [7.6.21] - 01-22-2026
 
 - **FIXED** - Spending widget subcategories to use parent category when in 'Other'

package/dist/CategorySelectorDrawer-cQKX5dZb.mjs

@@ -0,0 +1,418 @@
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import { observer as E } from "mobx-react-lite";
+import _ from "react";
+import K from "@mui/material/Stack";
+import { G as V, m as b, u as h, g as D, b as U } from "./hooks-ZMp65DFz.mjs";
+import Y from "@mui/material/List";
+import W from "@mui/material/Paper";
+import k from "@mui/material/Divider";
+import x from "@mui/material/ListItem";
+import F from "@mui/material/ListItemAvatar";
+import N from "@mui/material/ListItemButton";
+import M from "@mui/material/ListItemIcon";
+import G from "@mui/material/ListItemText";
+import { CheckCircle as j, Edit as X, Delete as z, ExpandMore as q } from "@mxenabled/mx-icons";
+import { Text as I, TextField as H, CategoryIcon as J } from "@mxenabled/mxui";
+import Q from "@mui/material/Collapse";
+import Z from "@mui/material/DialogContent";
+import { b as p } from "./Localization-2MODESHW.mjs";
+import { a as ee } from "./Dialog-B4PI-_bL.mjs";
+import te from "@mui/material/Box";
+import oe from "@mui/material/Chip";
+import v from "@mui/material/IconButton";
+import { u as ae } from "./useAriaLive-B3_pRUio.mjs";
+import { S as re } from "./SearchBox-B2_zLv8-.mjs";
+import { L as P } from "./Loader-DUaFpDGv.mjs";
+import { D as ne } from "./Drawer-DV4NTsFg.mjs";
+const S = () => {
+  if (!_.useContext(V))
+    throw new Error("useCategoryUiStore() must be used within the GlobalDataContext");
+  return b().uiStore;
+}, C = {
+  ON_CATEGORY_EXPANDED: "onCategoryExpanded",
+  ON_CATEGORY_COLLAPSED: "onCategoryCollapsed",
+  ON_CATEGORY_SELECTED: "onCategorySelected",
+  ON_SUBCATEGORY_ADD_CLICK: "onSubcategoryAddClick",
+  ON_SUBCATEGORY_ADD_CANCEL_CLICK: "onSubcategoryAddCancelClick",
+  ON_SUBCATEGORY_ADDED: "onSubcategoryAdded",
+  ON_SUBCATEGORY_EDIT_CLICK: "onSubcategoryEditClick",
+  ON_SUBCATEGORY_EDIT_CANCEL_CLICK: "onSubcategoryEditCancelClick",
+  ON_SUBCATEGORY_DELETE_CLICK: "onSubcategoryDeleteClick",
+  ON_SUBCATEGORY_DELETED: "onSubcategoryDeleted",
+  ON_SUBCATEGORY_SAVED: "onSubcategorySaved"
+};
+var L = /* @__PURE__ */ ((e) => (e.ADD = "add", e.EDIT = "edit", e.DELETE = "delete", e))(L || {});
+const se = ({
+  categoryName: e = "",
+  onClose: s,
+  onSave: o,
+  isOpen: l,
+  type: i
+}) => {
+  const [a, c] = _.useState(e), { categories: r } = h(), { setShouldDisableDrawerScroll: n } = S();
+  let d = "", m = [];
+  const u = i === "delete";
+  switch (i) {
+    case "add":
+      d = r.add_subcategory_title;
+      break;
+    case "edit":
+      d = p(r.edit_subcategory_title, e);
+      break;
+    case "delete":
+      d = r.delete_subcategory_heading, m = p(
+        r.all_transactions_in_this_subcategory,
+        /* @__PURE__ */ t(I, { bold: !0, children: p(r.all_parent_category, e) })
+      );
+      break;
+  }
+  return /* @__PURE__ */ t(
+    ee,
+    {
+      copy: {
+        title: d
+      },
+      disablePrimaryButton: !a,
+      isOpen: l,
+      onClose: () => {
+        n(!1), s();
+      },
+      onPrimaryAction: () => {
+        n(!1), o(a);
+      },
+      children: /* @__PURE__ */ t(Z, { children: u ? /* @__PURE__ */ t(I, { children: m }) : /* @__PURE__ */ t(
+        H,
+        {
+          inputProps: {
+            "aria-label": i === "edit" ? r.edit_subcategory_aria : r.add_subcategory_aria
+          },
+          name: "modify-subcategory",
+          onChange: (y) => c(y.target.value),
+          placeholder: r.input_placeholder,
+          sx: { width: "100%" },
+          value: a
+        }
+      ) })
+    }
+  );
+}, R = E(se), ie = ({ announce: e, parentCategory: s }) => {
+  const [o, l] = _.useState(!1), { addCategory: i } = b(), { categories: a } = h(), { onEvent: c } = D(), { setShouldDisableDrawerScroll: r } = S(), n = async (u) => {
+    await i(u.trim(), s.guid), e(p(a.add_subcategory_announcement, u)), c(C.ON_SUBCATEGORY_ADDED), l(!1);
+  }, d = async () => {
+    c(C.ON_SUBCATEGORY_ADD_CLICK), r(!0), l(!0);
+  }, m = () => {
+    l(!1), c(C.ON_SUBCATEGORY_ADD_CANCEL_CLICK);
+  };
+  return /* @__PURE__ */ g(x, { disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ t(N, { onClick: d, sx: { ml: 60 }, children: /* @__PURE__ */ t(
+      G,
+      {
+        primary: a.add_subcategory_button,
+        primaryTypographyProps: { color: "primary", fontWeight: "normal", variant: "Body" }
+      }
+    ) }),
+    o && /* @__PURE__ */ t(
+      R,
+      {
+        isOpen: o,
+        onClose: m,
+        onSave: n,
+        type: L.ADD
+      }
+    )
+  ] });
+}, ce = E(ie), le = ({
+  announce: e,
+  setShowRename: s,
+  subCategory: o,
+  showRename: l
+}) => {
+  const { onEvent: i } = D(), { updateCategory: a } = b(), { categories: c } = h(), r = async (d) => {
+    await a({ ...o, name: d }), e(p(c.edit_subcategory_announcement, o.name, d)), i(C.ON_SUBCATEGORY_SAVED), s(!1);
+  }, n = () => {
+    s(!1), i(C.ON_SUBCATEGORY_EDIT_CANCEL_CLICK);
+  };
+  return /* @__PURE__ */ t(
+    R,
+    {
+      categoryName: o.name,
+      isOpen: l,
+      onClose: n,
+      onSave: r,
+      type: L.EDIT
+    }
+  );
+}, de = E(le), ue = ({
+  announce: e,
+  parentCategory: s,
+  showDelete: o,
+  setShowDelete: l,
+  subCategory: i
+}) => {
+  const { onEvent: a } = D(), { removeCategory: c } = b(), { categories: r } = h(), n = () => {
+    l(!1), a(C.ON_SUBCATEGORY_DELETE_CLICK);
+  }, d = async () => {
+    await c(i.guid), e(p(r.delete_subcategory_announcement, i.name)), a(C.ON_SUBCATEGORY_DELETED), l(!1);
+  };
+  return /* @__PURE__ */ t(
+    R,
+    {
+      categoryName: s.name,
+      isOpen: o,
+      onClose: n,
+      onSave: d,
+      type: L.DELETE
+    }
+  );
+}, me = E(ue), Ce = ({
+  announce: e,
+  parentCategory: s,
+  subCategory: o
+}) => {
+  const {
+    onSelect: l,
+    selectedGuid: i,
+    setSelectedGuid: a,
+    setShouldDisableDrawerScroll: c,
+    showSelected: r,
+    unselectable: n,
+    unselectableText: d
+  } = S(), { categories: m } = h(), { onEvent: u } = D(), [y, f] = _.useState(!1), [O, A] = _.useState(!1), T = !!o.revision, w = o.guid === i, B = !n.some(($) => $ === o.guid);
+  return /* @__PURE__ */ g(
+    x,
+    {
+      className: "mx-cat-subcategory-row",
+      disableGutters: !0,
+      disablePadding: !0,
+      sx: { pl: 58 },
+      children: [
+        /* @__PURE__ */ g(
+          N,
+          {
+            "aria-pressed": w,
+            color: "secondary",
+            onClick: () => {
+              B && (a(o.guid), l(o.guid), u(C.ON_CATEGORY_SELECTED));
+            },
+            sx: { height: 44 },
+            children: [
+              /* @__PURE__ */ t(
+                G,
+                {
+                  primary: o.name,
+                  primaryTypographyProps: { fontWeight: "normal", variant: "Body" }
+                }
+              ),
+              r && w && /* @__PURE__ */ t(j, { fontSize: "small" }),
+              !B && /* @__PURE__ */ t(oe, { label: d })
+            ]
+          }
+        ),
+        T && /* @__PURE__ */ g(te, { className: "mx-cat-subcategory-edit-container", sx: { marginRight: 24 }, children: [
+          /* @__PURE__ */ t(
+            v,
+            {
+              "aria-label": p(m.edit_subcategory_aria, o.name),
+              onClick: () => {
+                f(!0), c(!0), u(C.ON_SUBCATEGORY_EDIT_CLICK);
+              },
+              children: /* @__PURE__ */ t(X, { color: "secondary" })
+            }
+          ),
+          /* @__PURE__ */ t(
+            v,
+            {
+              "aria-label": p(m.delete_subcategory_aria, o.name),
+              edge: "end",
+              onClick: () => {
+                A(!0), c(!0), u(C.ON_SUBCATEGORY_DELETE_CLICK);
+              },
+              children: /* @__PURE__ */ t(z, { color: "secondary" })
+            }
+          )
+        ] }),
+        O && /* @__PURE__ */ t(
+          me,
+          {
+            announce: e,
+            parentCategory: s,
+            setShowDelete: A,
+            showDelete: O,
+            subCategory: o
+          }
+        ),
+        y && /* @__PURE__ */ t(
+          de,
+          {
+            announce: e,
+            setShowRename: f,
+            showRename: y,
+            subCategory: o
+          }
+        )
+      ]
+    }
+  );
+}, ge = E(Ce), _e = ({ categories: e, parentCategory: s }) => {
+  const { expandedGuid: o, searchValue: l } = S(), { announce: i, ariaLive: a } = ae(), c = s.guid === o, r = !!l;
+  return /* @__PURE__ */ g(
+    Q,
+    {
+      in: c || r,
+      sx: { backgroundColor: "background.default" },
+      timeout: "auto",
+      unmountOnExit: !0,
+      children: [
+        a,
+        /* @__PURE__ */ g(
+          Y,
+          {
+            "aria-labelledby": `category-${s.guid}`,
+            className: "mx-cat-subcategory-list",
+            id: `subcategories-${s.guid}`,
+            children: [
+              e.map((n) => /* @__PURE__ */ g(_.Fragment, { children: [
+                /* @__PURE__ */ t(
+                  ge,
+                  {
+                    announce: i,
+                    parentCategory: s,
+                    subCategory: n
+                  }
+                ),
+                /* @__PURE__ */ t(k, { sx: { ml: 58 } })
+              ] }, n.guid)),
+              !r && /* @__PURE__ */ t(ce, { announce: i, parentCategory: s })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, Ee = E(_e), pe = ({ category: e, subCategories: s }) => {
+  const { expandedGuid: o, searchValue: l, setExpandedGuid: i } = S(), { onEvent: a } = D(), c = e.guid === o, r = () => {
+    const n = e.guid !== o ? e.guid : null;
+    i(n), a(n ? C.ON_CATEGORY_EXPANDED : C.ON_CATEGORY_COLLAPSED);
+  };
+  return /* @__PURE__ */ g(_.Fragment, { children: [
+    /* @__PURE__ */ t(x, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ g(
+      N,
+      {
+        "aria-controls": `subcategories-${e.guid}`,
+        "aria-expanded": e.guid === o,
+        "aria-label": e.name,
+        id: `category-${e.guid}`,
+        onClick: r,
+        children: [
+          /* @__PURE__ */ t(F, { children: /* @__PURE__ */ t(J, { categoryGuid: e.guid }) }),
+          /* @__PURE__ */ t(
+            G,
+            {
+              primary: e.name,
+              primaryTypographyProps: { fontWeight: "normal", variant: "Body" }
+            }
+          ),
+          /* @__PURE__ */ t(M, { children: /* @__PURE__ */ t(
+            q,
+            {
+              sx: {
+                transition: "transform 0.3s ease-in-out",
+                transform: c || l ? "rotate(180deg)" : "rotate(0deg)"
+              }
+            }
+          ) })
+        ]
+      },
+      e.guid
+    ) }),
+    /* @__PURE__ */ t(k, { sx: { ml: 58 } }),
+    /* @__PURE__ */ t(Ee, { categories: s, parentCategory: e })
+  ] });
+}, he = E(pe), Se = () => {
+  const { categories: e } = b(), { searchValue: s } = S(), { categories: o } = h(), i = ((a, c = "") => a.reduce((r, n) => {
+    if (n.parent_guid === null) {
+      const m = [
+        {
+          ...n,
+          name: p(o.all_parent_category, n.name),
+          parent_guid: n.guid
+        },
+        ...a
+      ].filter(
+        (u) => u.parent_guid === n.guid && u.name.toLowerCase().includes(c.toLowerCase())
+      );
+      if (n.name.toLowerCase().includes(c.toLowerCase()) || m.length > 0)
+        return [...r, { category: { ...n }, children: m }];
+    }
+    return r;
+  }, []))(e, s);
+  return /* @__PURE__ */ t(W, { className: "mx-cat-category-list", sx: { boxShadow: "none" }, children: /* @__PURE__ */ t(Y, { children: i.map((a) => /* @__PURE__ */ t(
+    he,
+    {
+      category: a.category,
+      subCategories: a.children
+    },
+    a.category.guid
+  )) }) });
+}, ye = E(Se), be = ({
+  initialSelected: e,
+  onSelect: s = void 0,
+  showSelected: o = !0,
+  unselectable: l = [],
+  unselectableText: i = "Unselectable"
+}) => {
+  const { categories: a, loadCategories: c } = b(), { common: r } = h(), { isCopyLoaded: n } = U(), {
+    searchValue: d,
+    setOnSelect: m,
+    setSearchValue: u,
+    setSelectedGuid: y,
+    setShowSelected: f,
+    setUnselectable: O,
+    setUnselectableText: A
+  } = S();
+  return _.useEffect(() => {
+    s && m(s);
+  }), _.useEffect(() => {
+    a.length || c();
+  }, []), _.useEffect(() => {
+    e && y(e), f(o), O(l), A(i);
+  }, [e, o, l, i]), n ? /* @__PURE__ */ g(K, { className: "mx-cat-category-selector", sx: { width: "100%" }, children: [
+    /* @__PURE__ */ t(
+      re,
+      {
+        ariaLabel: r.search_aria,
+        cancelAriaLabel: r.cancel_search_aria,
+        onChange: (T) => u(T),
+        placeholder: r.search_placeholder,
+        searchValue: d
+      }
+    ),
+    /* @__PURE__ */ t(ye, {})
+  ] }) : /* @__PURE__ */ t(P, {});
+}, De = E(be), fe = ({
+  id: e,
+  onClose: s,
+  title: o,
+  showDrawer: l,
+  ...i
+}) => {
+  const { common: a } = h(), { isCopyLoaded: c } = U();
+  return c ? /* @__PURE__ */ t(
+    ne,
+    {
+      ariaLabelClose: a.close_aria,
+      className: "mx-cat-category-selector-drawer",
+      id: e,
+      isOpen: l,
+      onClose: s,
+      title: o,
+      children: /* @__PURE__ */ t(De, { ...i })
+    }
+  ) : /* @__PURE__ */ t(P, {});
+}, Je = E(fe);
+export {
+  De as C,
+  Je as a,
+  he as b,
+  S as u
+};

package/dist/{ManageIncome-1FRPmZFq.mjs → ManageIncome-DMVbsehr.mjs}

@@ -17,7 +17,7 @@ import { endOfMonth as _e } from "date-fns/endOfMonth";
 import { parseISO as me } from "date-fns/parseISO";
 import $ from "@mui/material/Button";
 import { Delete as pe, Add as he, ReceiptLong as ye } from "@mxenabled/mx-icons";
-import { T as X, a as ge, u as fe, S as Ce, b as be } from "./TransactionDetails-BKoBKUNp.mjs";
+import { T as X, a as ge, u as fe, S as Ce, b as be } from "./TransactionDetails-CTc7ilRf.mjs";
 import { getDayOfYear as xe } from "date-fns/getDayOfYear";
 import { setDayOfYear as Se } from "date-fns/setDayOfYear";
 import { AdapterDateFns as ve } from "@mui/x-date-pickers/AdapterDateFnsV3";
@@ -26,7 +26,7 @@ import { LocalizationProvider as Ae } from "@mui/x-date-pickers/LocalizationProv
 import { u as w, j as F, g as G, b as Ie, h as Z, o as De } from "./hooks-ZMp65DFz.mjs";
 import { b as Ee, f as J } from "./NumberFormatting-DjTD0t3W.mjs";
 import { D as O } from "./Drawer-DV4NTsFg.mjs";
-import { A as R } from "./WidgetContainer-COyiIVSd.mjs";
+import { A as R } from "./WidgetContainer-CpuFZNTe.mjs";
 import { f as Re, D as Te, a as Le } from "./Dialog-B4PI-_bL.mjs";
 import { formatISO as Oe } from "date-fns/formatISO";
 import { fromUnixTime as ke } from "date-fns/fromUnixTime";

package/dist/{RecurringSettings-z0XUW9qx.mjs → RecurringSettings-C_9BmZvv.mjs}

@@ -7,10 +7,10 @@ import b from "@mui/material/Tabs";
 import d from "@mui/material/Divider";
 import R 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-1FRPmZFq.mjs";
+import { R as C, A as S, a as E, M as v } from "./ManageIncome-DMVbsehr.mjs";
 import { u as _, j as A, g as f } from "./hooks-ZMp65DFz.mjs";
 import { R as y, F as N } from "./RecurringTransactions-Bf4lX0Cn.mjs";
-import { A as m } from "./WidgetContainer-COyiIVSd.mjs";
+import { A as m } from "./WidgetContainer-CpuFZNTe.mjs";
 const I = h(() => {
   const { recurring: g } = _(), { repeatingTransactions: n } = A(), { onEvent: o } = f(), l = (r) => {
     o(m.RECURRING_TRANSACTIONS_CLICK_EXPENSE, {

package/dist/{SpendingLegend-BLAhLb1w.mjs → SpendingLegend-BZsjOYfi.mjs}

@@ -8,7 +8,7 @@ import f from "@mui/material/Stack";
 import { useTheme as k } from "@mui/material/styles";
 import { CategoryIcon as A, CategoryIconVariants as G, Text as h } from "@mxenabled/mxui";
 import { D as O } from "./Donut-Dmy3JTWd.mjs";
-import { u as $ } from "./WidgetContainer-COyiIVSd.mjs";
+import { u as $ } from "./useAriaLive-B3_pRUio.mjs";
 import { u as j } from "./hooks-ZMp65DFz.mjs";
 import { u as R } from "./useScreenSize-B6JyS_Lj.mjs";
 import { f as D } from "./NumberFormatting-DjTD0t3W.mjs";