@mx-cartographer/experiences 7.2.9 → 7.2.11

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [7.2.11] - 11-19-2025
+
+- **FIXED** - transactions widget to not announce until copy loaded
+
+## [7.2.10] - 11-18-2025
+
+- **FIXED** - transactions widget to announce dynamic updates via aria live region
+
 ## [7.2.9] - 11-17-2025
 
 - **UPDATED** - components directory `microinsights`

package/dist/common/hooks/useAriaLive.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export type AriaLivePoliteness = 'polite' | 'assertive';
+interface UseAriaLiveResult {
+    announce: (message: string, politeness?: AriaLivePoliteness) => void;
+    ariaLive: React.ReactElement | null;
+}
+export declare const useAriaLive: (initialPoliteness?: AriaLivePoliteness) => UseAriaLiveResult;
+export default useAriaLive;

package/dist/common/types/localization/TransactionsCopy.d.ts

@@ -44,6 +44,7 @@ export interface TransactionsCopy {
     memo_desc_aria: string;
     memo_title: string;
     merchant_logo_desc: string;
+    showing_transactions_count: string;
     merchant_logo_modal_desc: string;
     merchant_logo_modal_desc_bold: string;
     merchant_logo_modal_title: string;

package/dist/transactions/index.es.js

@@ -1,59 +1,59 @@
-import { T as Ca } from "../TransactionApi-B3Tksf7L.mjs";
-import { u as P, C as He, D as Be, M as Pe, c as $e, T as Ve, a as We } from "../TransactionDetails-BWffqew4.mjs";
-import { B as ba, d as Ta, b as Aa } from "../TransactionDetails-BWffqew4.mjs";
+import { T as Ta } from "../TransactionApi-B3Tksf7L.mjs";
+import { u as B, C as Be, D as $e, M as Ve, c as We, T as Ge, a as Ue } from "../TransactionDetails-BWffqew4.mjs";
+import { B as Sa, d as xa, b as wa } from "../TransactionDetails-BWffqew4.mjs";
 import { T as M } from "../User-BQUxBeZV.mjs";
-import { O as xa } from "../User-BQUxBeZV.mjs";
-import { S as ee, D as Ge } from "../TransactionStore-DxPLdF3B.mjs";
-import { T as Ia } from "../TransactionStore-DxPLdF3B.mjs";
-import { e as Ue } from "../exportTransactionsToCSV-7bVS7KXf.mjs";
-import { E as Da } from "../ExportCsvAction-sX8Rg4Ov.mjs";
+import { O as Ia } from "../User-BQUxBeZV.mjs";
+import { S as ae, D as Fe } from "../TransactionStore-DxPLdF3B.mjs";
+import { T as Na } from "../TransactionStore-DxPLdF3B.mjs";
+import { e as ze } from "../exportTransactionsToCSV-7bVS7KXf.mjs";
+import { E as Oa } from "../ExportCsvAction-sX8Rg4Ov.mjs";
 import { jsxs as _, jsx as e } from "react/jsx-runtime";
-import m from "react";
-import { observer as S } from "mobx-react-lite";
-import Fe from "@mui/material/Paper";
-import { DataGridPro as ze } from "@mui/x-data-grid-pro";
-import A from "@mui/material/Box";
-import { useTheme as Ke } from "@mui/material/styles";
-import { Text as C, Icon as B, MerchantLogo as qe, TextField as te, P as je } from "@mxenabled/mxui";
-import { h as $, u as x, b as K, d as re, m as Xe, a as Ye, g as Je, p as Qe } from "../hooks-D6XlXHf4.mjs";
-import { fromUnixTime as Ze } from "date-fns/fromUnixTime";
-import { f as et, D as tt, a as se } from "../Dialog-CWW597AF.mjs";
-import D from "@mui/material/Stack";
-import { f as ie } from "../NumberFormatting-Buh7u8Oi.mjs";
-import { L as q } from "../Loader-DUaFpDGv.mjs";
-import { endOfMonth as at } from "date-fns/endOfMonth";
-import { getUnixTime as nt } from "date-fns/getUnixTime";
-import { startOfMonth as ot } from "date-fns/startOfMonth";
-import { startOfToday as z } from "date-fns/startOfToday";
-import rt from "@mui/material/styles/useTheme";
-import { l as st } from "../ConnectDrawer-DaFRU5st.mjs";
-import it from "@mui/material/Divider";
-import ct from "@mui/material/MenuItem";
-import lt from "@mui/material/RadioGroup";
-import { ExpandMore as dt } from "@mxenabled/mx-icons";
-import { C as ut } from "../CurrencyInput-CsCy7uaS.mjs";
-import { a as mt, u as _t } from "../CategorySelectorDrawer-DUe4lH5-.mjs";
-import { b as ae } from "../Localization-2MODESHW.mjs";
-import { A as T, W as pt } from "../WidgetContainer-C88Ecu2W.mjs";
-import { u as gt } from "../useScreenSize-B6JyS_Lj.mjs";
-import { S as ht } from "../SearchBox-B2_zLv8-.mjs";
-import { D as ne } from "../Drawer-kEE73B87.mjs";
-const ft = (t) => /* @__PURE__ */ _(C, { tabIndex: t.tabIndex, variant: "Small", children: [
+import c from "react";
+import { observer as x } from "mobx-react-lite";
+import Ke from "@mui/material/Paper";
+import { DataGridPro as qe } from "@mui/x-data-grid-pro";
+import T from "@mui/material/Box";
+import { useTheme as je } from "@mui/material/styles";
+import { Text as C, Icon as P, MerchantLogo as Xe, TextField as ne, P as Ye } from "@mxenabled/mxui";
+import { h as $, u as w, b as j, d as se, m as Je, a as Qe, g as Ze, p as et } from "../hooks-D6XlXHf4.mjs";
+import { fromUnixTime as tt } from "date-fns/fromUnixTime";
+import { f as at, D as nt, a as ie } from "../Dialog-CWW597AF.mjs";
+import N from "@mui/material/Stack";
+import { f as ce } from "../NumberFormatting-Buh7u8Oi.mjs";
+import { L as X } from "../Loader-DUaFpDGv.mjs";
+import { endOfMonth as ot } from "date-fns/endOfMonth";
+import { getUnixTime as rt } from "date-fns/getUnixTime";
+import { startOfMonth as st } from "date-fns/startOfMonth";
+import { startOfToday as K } from "date-fns/startOfToday";
+import it from "@mui/material/styles/useTheme";
+import { l as ct } from "../ConnectDrawer-DaFRU5st.mjs";
+import lt from "@mui/material/Divider";
+import dt from "@mui/material/MenuItem";
+import ut from "@mui/material/RadioGroup";
+import { ExpandMore as mt } from "@mxenabled/mx-icons";
+import { C as _t } from "../CurrencyInput-CsCy7uaS.mjs";
+import { a as pt, u as gt } from "../CategorySelectorDrawer-DUe4lH5-.mjs";
+import { b as q } from "../Localization-2MODESHW.mjs";
+import { A as S, W as ht } from "../WidgetContainer-C88Ecu2W.mjs";
+import { u as ft } from "../useScreenSize-B6JyS_Lj.mjs";
+import { S as Ct } from "../SearchBox-B2_zLv8-.mjs";
+import { D as oe } from "../Drawer-kEE73B87.mjs";
+const yt = (t) => /* @__PURE__ */ _(C, { tabIndex: t.tabIndex, variant: "Small", children: [
   `${t.row.account}`,
   t.row.number && ` | ${t.row.number}`
-] }), Ct = (t) => {
-  const { associatedBeats: s } = $(), { showInsights: o } = P(), { amount: a, transaction_type: i } = t.row, l = s.find((p) => p.associated_transaction_guid === t.row.guid), d = i === M.CREDIT;
-  return /* @__PURE__ */ _(D, { alignItems: "flex-end", tabIndex: t.tabIndex, children: [
+] }), bt = (t) => {
+  const { associatedBeats: r } = $(), { showInsights: o } = B(), { amount: a, transaction_type: i } = t.row, l = r.find((p) => p.associated_transaction_guid === t.row.guid), d = i === M.CREDIT;
+  return /* @__PURE__ */ _(N, { alignItems: "flex-end", tabIndex: t.tabIndex, children: [
     /* @__PURE__ */ _(C, { color: d ? "success.main" : "text.primary", variant: "Small", children: [
       d ? "+" : "",
-      ie(a, "0,0.00")
+      ce(a, "0,0.00")
     ] }),
     l && o && /* @__PURE__ */ e(C, { bold: !0, color: "primary.light", variant: "XSmall", children: l.short_title })
   ] });
-}, yt = (t) => {
-  const { transactions: s } = x(), [o, a] = m.useState(!1);
+}, Tt = (t) => {
+  const { transactions: r } = w(), [o, a] = c.useState(!1);
   return /* @__PURE__ */ _(
-    D,
+    N,
     {
       alignItems: "center",
       direction: "row",
@@ -63,22 +63,22 @@ const ft = (t) => /* @__PURE__ */ _(C, { tabIndex: t.tabIndex, variant: "Small",
       onMouseLeave: () => a(!1),
       width: "100%",
       children: [
-        t.row.has_been_split && /* @__PURE__ */ e(B, { name: "call_split", size: 16 }),
-        /* @__PURE__ */ e(C, { tabIndex: t.tabIndex, variant: "Small", children: t.row.has_been_split ? s.split_transaction_category_label : t.row.category }),
-        !t.row.has_been_split && o && /* @__PURE__ */ e(B, { name: "edit", sx: { color: "action.active" } })
+        t.row.has_been_split && /* @__PURE__ */ e(P, { name: "call_split", size: 16 }),
+        /* @__PURE__ */ e(C, { tabIndex: t.tabIndex, variant: "Small", children: t.row.has_been_split ? r.split_transaction_category_label : t.row.category }),
+        !t.row.has_been_split && o && /* @__PURE__ */ e(P, { name: "edit", sx: { color: "action.active" } })
       ]
     }
   );
-}, bt = S(yt), Tt = (t) => /* @__PURE__ */ e(C, { tabIndex: t.tabIndex, variant: "Small", children: et(Ze(t.row.date), tt.MONTH_DAY) }), At = (t) => {
-  const s = Ke(), { transactions: o } = x(), { is_flagged: a, is_hidden: i, has_been_viewed: l, parent_guid: d } = t.row, g = !l && !!!d;
+}, At = x(Tt), St = (t) => /* @__PURE__ */ e(C, { tabIndex: t.tabIndex, variant: "Small", children: at(tt(t.row.date), nt.MONTH_DAY) }), xt = (t) => {
+  const r = je(), { transactions: o } = w(), { is_flagged: a, is_hidden: i, has_been_viewed: l, parent_guid: d } = t.row, g = !l && !!!d;
   return /* @__PURE__ */ _(
-    A,
+    T,
     {
       "aria-label": i ? o.is_hidden : o.is_flagged,
       tabIndex: t.tabIndex,
       children: [
-        a && /* @__PURE__ */ e(B, { fill: !0, name: "flag", size: 16, sx: { color: "warning.dark" } }),
-        !a && i && /* @__PURE__ */ e(B, { name: "visibility_off", size: 16 }),
+        a && /* @__PURE__ */ e(P, { fill: !0, name: "flag", size: 16, sx: { color: "warning.dark" } }),
+        !a && i && /* @__PURE__ */ e(P, { name: "visibility_off", size: 16 }),
         g && /* @__PURE__ */ e(
           "svg",
           {
@@ -86,7 +86,7 @@ const ft = (t) => /* @__PURE__ */ _(C, { tabIndex: t.tabIndex, variant: "Small",
             style: {
               display: "inline-block",
               height: 16,
-              fill: s.palette.primary.light,
+              fill: r.palette.primary.light,
               verticalAlign: "middle",
               width: 16
             },
@@ -97,48 +97,48 @@ const ft = (t) => /* @__PURE__ */ _(C, { tabIndex: t.tabIndex, variant: "Small",
       ]
     }
   );
-}, St = S(At), E = (t) => /* @__PURE__ */ e(C, { fontWeight: 600, variant: "Small", children: t.colDef.headerName }), xt = (t) => /* @__PURE__ */ _(D, { alignItems: "center", direction: "row", gap: 8, children: [
+}, wt = x(xt), O = (t) => /* @__PURE__ */ e(C, { fontWeight: 600, variant: "Small", children: t.colDef.headerName }), vt = (t) => /* @__PURE__ */ _(N, { alignItems: "center", direction: "row", gap: 8, children: [
   /* @__PURE__ */ e(
-    qe,
+    Xe,
     {
       categoryGuid: t.row.top_level_category_guid || "",
       merchantGuid: t.row.merchant_guid || ""
     }
   ),
   /* @__PURE__ */ e(C, { tabIndex: t.tabIndex, variant: "Small", children: t.row.payee })
-] }), wt = ({
+] }), It = ({
   height: t = "100dvh",
-  onCategoryClick: s,
+  onCategoryClick: r,
   onRowClick: o
 }) => {
-  const { transactions: a } = x(), { isCopyLoaded: i } = K(), { isLoading: l, sortedTransactions: d } = $(), { clearExpandedSplits: p, toggleSplit: g } = P();
-  m.useEffect(() => () => p(), []);
-  const h = m.useMemo(
+  const { transactions: a } = w(), { isCopyLoaded: i } = j(), { isLoading: l, sortedTransactions: d } = $(), { clearExpandedSplits: p, toggleSplit: g } = B();
+  c.useEffect(() => () => p(), []);
+  const f = c.useMemo(
     () => d.map((n) => ({
       id: n.guid,
       isHovering: !1,
       ...n
     })),
     [d]
-  ), u = ({ row: { id: n, guid: f, has_been_split: N }, field: O }) => N ? g(n) : O === "category" ? s?.(f) : o?.(f);
+  ), m = ({ row: { id: n, guid: h, has_been_split: A }, field: E }) => A ? g(n) : E === "category" ? r?.(h) : o?.(h);
   if (!i)
-    return /* @__PURE__ */ e(q, {});
-  const w = [
+    return /* @__PURE__ */ e(X, {});
+  const v = [
     {
       field: "flag",
       headerName: "",
       minWidth: 32,
       width: 32,
       sortable: !1,
-      renderCell: (n) => /* @__PURE__ */ e(St, { ...n }),
+      renderCell: (n) => /* @__PURE__ */ e(wt, { ...n }),
       renderHeader: () => /* @__PURE__ */ e("span", { "aria-label": a.transaction_status, role: "presentation" })
     },
     {
       field: "date",
       headerName: a.date_title,
       width: 103,
-      renderHeader: E,
-      renderCell: (n) => n.row.parent_guid ? null : /* @__PURE__ */ e(Tt, { ...n }),
+      renderHeader: O,
+      renderCell: (n) => n.row.parent_guid ? null : /* @__PURE__ */ e(St, { ...n }),
       sortingOrder: ["desc", "asc"]
     },
     {
@@ -146,49 +146,49 @@ const ft = (t) => /* @__PURE__ */ _(C, { tabIndex: t.tabIndex, variant: "Small",
       field: "payee",
       headerName: a.payee_title,
       flex: 0.33,
-      renderHeader: E,
-      renderCell: xt,
+      renderHeader: O,
+      renderCell: vt,
       sortingOrder: ["asc", "desc"]
     },
     {
       field: "category",
       headerName: a.category_title,
       flex: 0.25,
-      renderHeader: E,
-      renderCell: (n) => /* @__PURE__ */ e(bt, { ...n }),
+      renderHeader: O,
+      renderCell: (n) => /* @__PURE__ */ e(At, { ...n }),
       sortingOrder: ["asc", "desc"]
     },
     {
       field: "account",
       headerName: a.account_title,
       flex: 0.33,
-      renderHeader: E,
-      renderCell: (n) => n.row.parent_guid ? null : /* @__PURE__ */ e(ft, { ...n }),
+      renderHeader: O,
+      renderCell: (n) => n.row.parent_guid ? null : /* @__PURE__ */ e(yt, { ...n }),
       sortingOrder: ["asc", "desc"]
     },
     {
       field: "amount",
       headerName: a.amount_title,
       flex: 0.25,
-      renderHeader: E,
-      renderCell: Ct,
+      renderHeader: O,
+      renderCell: bt,
       align: "right",
       headerAlign: "right",
       sortingOrder: ["asc", "desc"]
     }
   ];
-  return /* @__PURE__ */ e(Fe, { sx: { height: t, px: 24, width: "100%", boxShadow: "none" }, children: /* @__PURE__ */ e(
-    ze,
+  return /* @__PURE__ */ e(Ke, { sx: { height: t, px: 24, width: "100%", boxShadow: "none" }, children: /* @__PURE__ */ e(
+    qe,
     {
-      columns: w,
+      columns: v,
       disableColumnFilter: !0,
       disableColumnMenu: !0,
       getCellClassName: (n) => n.row.parent_guid ? "split-row" : "",
       hideFooter: !0,
       initialState: { sorting: { sortModel: [{ field: "date", sort: "desc" }] } },
       loading: l,
-      onCellClick: u,
-      rows: h,
+      onCellClick: m,
+      rows: f,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
       sx: {
         "& .split-row": {
@@ -197,15 +197,15 @@ const ft = (t) => /* @__PURE__ */ _(C, { tabIndex: t.tabIndex, variant: "Small",
       }
     }
   ) });
-}, It = S(wt), vt = ({ copy: t, isOpen: s, onClose: o, onPrimaryAction: a }) => {
-  const { common: i, transactions: l } = x(), { isCopyLoaded: d } = K();
+}, Dt = x(It), Nt = ({ copy: t, isOpen: r, onClose: o, onPrimaryAction: a }) => {
+  const { common: i, transactions: l } = w(), { isCopyLoaded: d } = j();
   return d ? /* @__PURE__ */ _(
-    se,
+    ie,
     {
       copy: {
         title: t.title
       },
-      isOpen: s,
+      isOpen: r,
       onClose: o,
       onPrimaryAction: a,
       primaryText: l.add_manual_account,
@@ -215,43 +215,43 @@ const ft = (t) => /* @__PURE__ */ _(C, { tabIndex: t.tabIndex, variant: "Small",
         /* @__PURE__ */ e(C, { component: "p", truncate: !1, children: l.add_account_modal_cta })
       ]
     }
-  ) : /* @__PURE__ */ e(q, {});
-}, Dt = S(vt), Nt = () => {
-  const { visibleAccounts: t } = re(), { common: s, transactions: o } = x(), { manualTransaction: a, setIsAmountValid: i, updateManualTransaction: l } = P(), [d, p] = m.useState(""), [g, h] = m.useState(""), u = m.useMemo(
-    () => t.filter((r) => r.is_manual),
+  ) : /* @__PURE__ */ e(X, {});
+}, Et = x(Nt), Ot = () => {
+  const { visibleAccounts: t } = se(), { common: r, transactions: o } = w(), { manualTransaction: a, setIsAmountValid: i, updateManualTransaction: l } = B(), [d, p] = c.useState(""), [g, f] = c.useState(""), m = c.useMemo(
+    () => t.filter((s) => s.is_manual),
     [t]
-  ).map((r) => ({
-    label: `${r.name} | ${ie(r.balance, "0,0.00")}`,
-    value: r.guid
-  })), w = {
-    error_amount_is_invalid: s.currency_input.error_amount_is_invalid,
-    error_amount_must_be_equal_to: s.currency_input.error_amount_must_be_equal_to,
-    error_amount_must_be_less_than_or_equal_to: s.currency_input.error_amount_must_be_less_than_or_equal_to,
-    enter_amount: s.currency_input.enter_amount
-  }, n = (r) => {
-    p(r), l({ ...a, amount: Number(r) });
-  }, f = (r, k) => {
+  ).map((s) => ({
+    label: `${s.name} | ${ce(s.balance, "0,0.00")}`,
+    value: s.guid
+  })), v = {
+    error_amount_is_invalid: r.currency_input.error_amount_is_invalid,
+    error_amount_must_be_equal_to: r.currency_input.error_amount_must_be_equal_to,
+    error_amount_must_be_less_than_or_equal_to: r.currency_input.error_amount_must_be_less_than_or_equal_to,
+    enter_amount: r.currency_input.enter_amount
+  }, n = (s) => {
+    p(s), l({ ...a, amount: Number(s) });
+  }, h = (s, k) => {
     l({ ...a, transaction_type: Number(k) });
-  }, N = (r) => {
-    h(r), l({ ...a, payee: r, description: r });
-  }, O = (r) => {
-    l({ ...a, account_guid: r });
+  }, A = (s) => {
+    f(s), l({ ...a, payee: s, description: s });
+  }, E = (s) => {
+    l({ ...a, account_guid: s });
   };
-  return /* @__PURE__ */ _(A, { className: "mx-txn-manual-transaction-details", children: [
-    /* @__PURE__ */ _(D, { gap: 40, mx: 24, my: 32, children: [
+  return /* @__PURE__ */ _(T, { className: "mx-txn-manual-transaction-details", children: [
+    /* @__PURE__ */ _(N, { gap: 40, mx: 24, my: 32, children: [
       /* @__PURE__ */ _(
-        D,
+        N,
         {
           direction: "row",
           sx: { flexDirection: { xs: "column", sm: "row" }, gap: { xs: 40, sm: 8 } },
           children: [
             /* @__PURE__ */ e(
-              ut,
+              _t,
               {
                 allowDecimals: !0,
                 amount: d,
                 ariaLabel: o.amount_title,
-                copy: w,
+                copy: v,
                 inputProps: {
                   noValidate: !0
                 },
@@ -262,9 +262,9 @@ const ft = (t) => /* @__PURE__ */ _(C, { tabIndex: t.tabIndex, variant: "Small",
                 type: "number"
               }
             ),
-            /* @__PURE__ */ e(lt, { name: "TransactionType", onChange: f, row: !0, children: /* @__PURE__ */ _(D, { alignItems: "center", direction: "row", children: [
+            /* @__PURE__ */ e(ut, { name: "TransactionType", onChange: h, row: !0, children: /* @__PURE__ */ _(N, { alignItems: "center", direction: "row", children: [
               /* @__PURE__ */ e(
-                ee,
+                ae,
                 {
                   checked: a.transaction_type === M.CREDIT,
                   label: o.manual_transaction_credit_button_label,
@@ -274,7 +274,7 @@ const ft = (t) => /* @__PURE__ */ _(C, { tabIndex: t.tabIndex, variant: "Small",
                 }
               ),
               /* @__PURE__ */ e(
-                ee,
+                ae,
                 {
                   checked: a.transaction_type === M.DEBIT,
                   label: o.manual_transaction_debit_button_label,
@@ -287,97 +287,125 @@ const ft = (t) => /* @__PURE__ */ _(C, { tabIndex: t.tabIndex, variant: "Small",
         }
       ),
       /* @__PURE__ */ e(
-        te,
+        ne,
         {
           label: o.payee_title,
           name: "payee",
-          onChange: (r) => N(r.target.value),
+          onChange: (s) => A(s.target.value),
           sx: { bgcolor: "background.paper" },
           value: g
         }
       ),
       /* @__PURE__ */ e(
-        te,
+        ne,
         {
           InputLabelProps: { shrink: !0 },
-          SelectProps: { defaultValue: -1, IconComponent: dt },
+          SelectProps: { defaultValue: -1, IconComponent: mt },
           label: o.manual_transaction_select_an_account,
-          onChange: (r) => O(r.target.value),
+          onChange: (s) => E(s.target.value),
           placeholder: o.manual_transaction_select,
           select: !0,
           sx: { bgcolor: "background.paper" },
-          children: u.map((r) => /* @__PURE__ */ e(ct, { value: r.value, children: r.label }, r.value))
+          children: m.map((s) => /* @__PURE__ */ e(dt, { value: s.value, children: s.label }, s.value))
         }
       )
     ] }),
-    /* @__PURE__ */ e(it, { light: !0 }),
-    /* @__PURE__ */ _(A, { bgcolor: "background.paper", children: [
-      /* @__PURE__ */ e(He, { transaction: a }),
+    /* @__PURE__ */ e(lt, { light: !0 }),
+    /* @__PURE__ */ _(T, { bgcolor: "background.paper", children: [
       /* @__PURE__ */ e(Be, { transaction: a }),
-      /* @__PURE__ */ e(Pe, { transaction: a }),
-      /* @__PURE__ */ e($e, { transaction: a })
+      /* @__PURE__ */ e($e, { transaction: a }),
+      /* @__PURE__ */ e(Ve, { transaction: a }),
+      /* @__PURE__ */ e(We, { transaction: a })
     ] })
   ] });
-}, Ot = S(Nt), Et = ({ onClose: t, transaction: s }) => {
-  const { addOrUpdateTransactionRule: o, updateTransaction: a } = $(), { transactions: i } = x(), { categories: l } = Xe(), [d, p] = m.useState(""), g = m.useMemo(
-    () => l.find((u) => u.guid === d),
+}, Mt = x(Ot), kt = ({ onClose: t, transaction: r }) => {
+  const { addOrUpdateTransactionRule: o, updateTransaction: a } = $(), { transactions: i } = w(), { categories: l } = Je(), [d, p] = c.useState(""), g = c.useMemo(
+    () => l.find((m) => m.guid === d),
     [d]
-  ), h = async (u) => {
-    await a({ ...s, category_guid: d }), u && await o(d, s), p(""), t();
+  ), f = async (m) => {
+    await a({ ...r, category_guid: d }), m && await o(d, r), p(""), t();
   };
-  return /* @__PURE__ */ _(A, { className: "mx-txn-edit-category-action", children: [
+  return /* @__PURE__ */ _(T, { className: "mx-txn-edit-category-action", children: [
     /* @__PURE__ */ e(
-      mt,
+      pt,
       {
-        initialSelected: s.category_guid,
+        initialSelected: r.category_guid,
         onClose: t,
-        onSelect: (u) => p(u),
-        showDrawer: !!s,
+        onSelect: (m) => p(m),
+        showDrawer: !!r,
         title: i.actions_select_a_category
       }
     ),
     /* @__PURE__ */ e(
-      se,
+      ie,
       {
         copy: {
-          title: ae(
+          title: q(
             i.actions_apply_to_all_transaction_types,
-            s.description
+            r.description
           )
         },
         isOpen: !!d,
-        onClose: () => h(!1),
-        onPrimaryAction: () => h(!0),
-        onSecondaryAction: () => h(!1),
+        onClose: () => f(!1),
+        onPrimaryAction: () => f(!0),
+        onSecondaryAction: () => f(!1),
         primaryText: i.actions_apply_to_all,
         secondaryText: i.actions_this_time_only,
-        children: /* @__PURE__ */ e(je, { variant: "Paragraph", children: ae(
+        children: /* @__PURE__ */ e(Ye, { variant: "Paragraph", children: q(
           i.actions_all_past_and_future,
-          s.description,
+          r.description,
           g?.name
         ) })
       }
     )
   ] });
-}, Mt = S(Et), oe = 120, kt = ({
+}, Lt = x(kt), Rt = (t = "polite") => {
+  const [r, o] = c.useState(""), [a, i] = c.useState(t), l = c.useCallback((p, g) => {
+    g && i(g), o(p);
+  }, []), d = c.useMemo(
+    () => /* @__PURE__ */ e(
+      T,
+      {
+        "aria-atomic": "true",
+        "aria-live": a,
+        role: a === "assertive" ? "alert" : "status",
+        sx: {
+          position: "absolute",
+          width: "1px",
+          height: "1px",
+          padding: 0,
+          margin: "-1px",
+          overflow: "hidden",
+          clip: "rect(0 0 0 0)",
+          clipPath: "inset(50%)",
+          whiteSpace: "nowrap",
+          border: 0
+        },
+        children: r
+      }
+    ),
+    [r, a]
+  );
+  return { announce: l, ariaLive: d };
+}, re = 120, Ht = ({
   onBackClick: t,
-  height: s = "100dvh",
+  height: r = "100dvh",
   showInsights: o = !1,
   sx: a = {}
 }) => {
-  const { visibleAccounts: i, refreshAccounts: l } = re(), { is_mobile_webview: d, clientConfig: p, config: g } = Ye(), { setSearchValue: h } = _t(), { onEvent: u } = Je(), { common: w, transactions: n } = x(), {
-    displayedDateRange: f,
-    isCopyLoaded: N,
-    isInitialized: O,
-    selectedAccountGuids: r,
+  const { visibleAccounts: i, refreshAccounts: l } = se(), { is_mobile_webview: d, clientConfig: p, config: g } = Qe(), { setSearchValue: f } = gt(), { onEvent: m } = Ze(), { common: v, transactions: n } = w(), {
+    displayedDateRange: h,
+    isCopyLoaded: A,
+    isInitialized: E,
+    selectedAccountGuids: s,
     setDisplayedDate: k,
-    setSelectedAccounts: ce
-  } = K(), { isDesktop: le, isTablet: de } = gt(), L = rt(), {
-    addTransaction: ue,
-    filter: j,
-    loadAssociatedBeats: me,
+    setSelectedAccounts: le
+  } = j(), { isDesktop: de, isTablet: ue } = ft(), L = it(), {
+    addTransaction: me,
+    filter: Y,
+    loadAssociatedBeats: _e,
     setFilter: V,
-    sortedTransactionsWithSplits: _e,
+    sortedTransactionsWithSplits: W,
     tags: pe,
     transactions: ge,
     updateTransaction: he
@@ -389,125 +417,133 @@ const ft = (t) => /* @__PURE__ */ _(C, { tabIndex: t.tabIndex, variant: "Small",
     setSearchValue: be,
     setShowInsights: Te,
     updateManualTransaction: Ae
-  } = P(), { userProfile: Se } = Qe(), [W, y] = m.useState(""), [X, H] = m.useState(""), [xe, G] = m.useState(!1), [we, Y] = m.useState(!1), [U, Ie] = m.useState(!1), I = p?.transactions?.selected_account_guid;
-  m.useEffect(() => {
-    const c = I ? [{ guid: I }] : i.filter((v) => !v.is_hidden), Q = ot(z()), Z = at(z());
-    I || ce(c), k(Q, Z), V({
-      accounts: c.map((v) => v.guid),
-      custom: (v) => !v.accountIsClosed && !v.accountIsHidden,
-      dateRange: { start: Q, end: Z }
-    }), Ie(!0), u(T.TRANSACTIONS_VIEW);
-  }, [i]), m.useEffect(() => {
-    U && (V({
-      ...j,
-      accounts: I ? [I] : r,
-      dateRange: { start: f.start, end: f.end }
-    }), me(f.start).finally());
-  }, [U, f, r]), m.useEffect(() => {
+  } = B(), { userProfile: Se } = et(), [G, y] = c.useState(""), [J, H] = c.useState(""), [xe, U] = c.useState(!1), [we, Q] = c.useState(!1), [F, ve] = c.useState(!1), { announce: Ie, ariaLive: De } = Rt(), I = p?.transactions?.selected_account_guid;
+  c.useEffect(() => {
+    const u = I ? [{ guid: I }] : i.filter((D) => !D.is_hidden), ee = st(K()), te = ot(K());
+    I || le(u), k(ee, te), V({
+      accounts: u.map((D) => D.guid),
+      custom: (D) => !D.accountIsClosed && !D.accountIsHidden,
+      dateRange: { start: ee, end: te }
+    }), ve(!0), m(S.TRANSACTIONS_VIEW);
+  }, [i]), c.useEffect(() => {
+    F && (V({
+      ...Y,
+      accounts: I ? [I] : s,
+      dateRange: { start: h.start, end: h.end }
+    }), _e(h.start).finally());
+  }, [F, h, s]), c.useEffect(() => {
     Te(o);
-  }, [o]);
-  const ve = m.useMemo(
-    () => i.filter((c) => c.is_manual),
+  }, [o]), c.useEffect(() => {
+    A && n.showing_transactions_count && Ie(
+      q(
+        n.showing_transactions_count,
+        W.length
+      )
+    );
+  }, [A, h, s, W, n]);
+  const Ne = c.useMemo(
+    () => i.filter((u) => u.is_manual),
     [i]
-  ), b = X ? ge.find((c) => c.guid === X) : void 0, J = Ce && !!R.payee && !!R.account_guid && !!R.category_guid, De = (c) => {
-    fe(), k(c[0], c[1]);
-  }, Ne = (c) => {
-    be(c), V({
-      ...j,
-      searchTerm: c
-    }), u(T.TRANSACTIONS_CLICK_SEARCH, { search_term: c });
-  }, Oe = () => {
-    Ue(_e, pe), u(T.TRANSACTIONS_CLICK_EXPORT);
-  }, Ee = () => {
-    ve.length > 0 ? (Ae({
-      ...Ge,
-      date: nt(z()),
+  ), b = J ? ge.find((u) => u.guid === J) : void 0, Z = Ce && !!R.payee && !!R.account_guid && !!R.category_guid, Ee = (u) => {
+    fe(), k(u[0], u[1]);
+  }, Oe = (u) => {
+    be(u), V({
+      ...Y,
+      searchTerm: u
+    }), m(S.TRANSACTIONS_CLICK_SEARCH, { search_term: u });
+  }, Me = () => {
+    ze(W, pe), m(S.TRANSACTIONS_CLICK_EXPORT);
+  }, ke = () => {
+    Ne.length > 0 ? (Ae({
+      ...Fe,
+      date: rt(K()),
       user_guid: Se?.user_guid || ""
     }), y(
       "addTransaction"
       /* AddTransaction */
-    ), u(T.TRANSACTIONS_CLICK_ADD)) : (G(!0), u(T.TRANSACTIONS_ADD_MANUAL_ACCOUNT_MODAL));
-  }, Me = async () => {
-    J && await ue(R), y("");
-  }, ke = () => {
-    G(!1), Y(!0);
+    ), m(S.TRANSACTIONS_CLICK_ADD)) : (U(!0), m(S.TRANSACTIONS_ADD_MANUAL_ACCOUNT_MODAL));
   }, Le = async () => {
-    Y(!1), await l();
-  }, Re = async () => {
+    Z && await me(R), y("");
+  }, Re = () => {
+    U(!1), Q(!0);
+  }, He = async () => {
+    Q(!1), await l();
+  }, Pe = async () => {
     b && !b.has_been_viewed && await he({ ...b, has_been_viewed: !0 }), y("");
   };
-  if (!N || !O || !U)
-    return /* @__PURE__ */ e(q, {});
-  const F = [];
-  return !d && (le || de) && F.push({
+  if (!A || !E || !F)
+    return /* @__PURE__ */ e(X, {});
+  const z = [];
+  return !d && (de || ue) && z.push({
     iconName: "open_in_new",
     label: n.export_csv_btn,
-    onClick: Oe
-  }), g.show_connections_widget_in_master && F.push({
+    onClick: Me
+  }), g.show_connections_widget_in_master && z.push({
     iconName: "add",
     label: n.add_transaction_btn,
-    onClick: Ee
+    onClick: ke
   }), /* @__PURE__ */ _(
-    pt,
+    ht,
     {
       ...!I && { accountOptions: i },
-      actions: F,
+      actions: z,
       calendarActions: {
-        onRangeChanged: De
+        onRangeChanged: Ee
       },
-      onAccountsFilterClick: () => u(T.ACCOUNTS_CLICK_FILTER),
+      onAccountsFilterClick: () => m(S.ACCOUNTS_CLICK_FILTER),
       onBackClick: t,
       sx: a,
       title: n.transactions_title,
       children: [
-        /* @__PURE__ */ e(A, { mt: 16, children: /* @__PURE__ */ e(
-          ht,
+        De,
+        /* @__PURE__ */ e(T, { mt: 16, children: /* @__PURE__ */ e(
+          Ct,
           {
-            onChange: Ne,
+            onChange: Oe,
             placeholder: n.action_bar_search_placeholder,
             searchValue: ye
           }
         ) }),
         /* @__PURE__ */ e(
-          A,
+          T,
           {
             sx: {
               [L.breakpoints.down("md")]: { display: "none" },
               [L.breakpoints.up("md")]: { display: "block" }
             },
             children: /* @__PURE__ */ e(
-              It,
+              Dt,
               {
-                height: `calc(${s} - ${oe}px)`,
-                onCategoryClick: (c) => {
-                  H(c), y(
+                height: `calc(${r} - ${re}px)`,
+                onCategoryClick: (u) => {
+                  H(u), y(
                     "category"
                     /* Category */
                   );
                 },
-                onRowClick: (c) => {
-                  H(c), y(
+                onRowClick: (u) => {
+                  H(u), y(
                     "transaction"
                     /* Transaction */
-                  ), u(T.TRANSACTIONS_CLICK_DETAILS, { transaction_guid: c });
+                  ), m(S.TRANSACTIONS_CLICK_DETAILS, { transaction_guid: u });
                 }
               }
             )
           }
         ),
         /* @__PURE__ */ e(
-          A,
+          T,
           {
             sx: {
               [L.breakpoints.down("md")]: { display: "block" },
               [L.breakpoints.up("md")]: { display: "none" }
             },
             children: /* @__PURE__ */ e(
-              Ve,
+              Ge,
               {
-                height: `calc(${s} - ${oe}px)`,
-                onClick: (c) => {
-                  H(c), y(
+                height: `calc(${r} - ${re}px)`,
+                onClick: (u) => {
+                  H(u), y(
                     "transaction"
                     /* Transaction */
                   );
@@ -519,51 +555,51 @@ const ft = (t) => /* @__PURE__ */ _(C, { tabIndex: t.tabIndex, variant: "Small",
           }
         ),
         /* @__PURE__ */ e(
-          ne,
+          oe,
           {
-            ariaLabelClose: w.close_aria,
-            isOpen: W === "transaction" && !!b,
-            onClose: Re,
+            ariaLabelClose: v.close_aria,
+            isOpen: G === "transaction" && !!b,
+            onClose: Pe,
             title: n.details_title,
-            children: b && /* @__PURE__ */ e(We, { transaction: b })
+            children: b && /* @__PURE__ */ e(Ue, { transaction: b })
           }
         ),
-        b && W === "category" && /* @__PURE__ */ e(
-          Mt,
+        b && G === "category" && /* @__PURE__ */ e(
+          Lt,
           {
             onClose: () => {
-              h(""), y(""), H("");
+              f(""), y(""), H("");
             },
             transaction: b
           }
         ),
         /* @__PURE__ */ e(
-          ne,
+          oe,
           {
-            ariaLabelClose: w.close_aria,
-            isOpen: W === "addTransaction",
-            isPrimaryDisabled: !J,
+            ariaLabelClose: v.close_aria,
+            isOpen: G === "addTransaction",
+            isPrimaryDisabled: !Z,
             onClose: () => y(""),
-            onPrimaryAction: Me,
+            onPrimaryAction: Le,
             title: n.add_transaction_title,
-            children: /* @__PURE__ */ e(Ot, {})
+            children: /* @__PURE__ */ e(Mt, {})
           }
         ),
         /* @__PURE__ */ e(
-          Dt,
+          Et,
           {
             copy: { title: n.add_manual_account },
             isOpen: xe,
             onClose: () => {
-              G(!1);
+              U(!1);
             },
-            onPrimaryAction: ke
+            onPrimaryAction: Re
           }
         ),
         /* @__PURE__ */ e(
-          st,
+          ct,
           {
-            onClose: Le,
+            onClose: He,
             showConnectWidget: we,
             title: n.add_manual_account
           }
@@ -571,20 +607,20 @@ const ft = (t) => /* @__PURE__ */ _(C, { tabIndex: t.tabIndex, variant: "Small",
       ]
     }
   );
-}, ga = S(kt);
+}, Ca = x(Ht);
 export {
-  Dt as AddAccountModal,
-  ba as BottomActions,
-  Da as ExportCsvAction,
-  xa as TRANSACTION_EVENTS,
-  Ta as TopActions,
-  Ca as TransactionApi,
-  We as TransactionDetails,
-  Ve as TransactionList,
-  Aa as TransactionRow,
-  Ia as TransactionStore,
-  It as TransactionTable,
-  ga as TransactionWidget,
-  Ue as exportTransactionsToCSV,
-  P as useTransactionsUiStore
+  Et as AddAccountModal,
+  Sa as BottomActions,
+  Oa as ExportCsvAction,
+  Ia as TRANSACTION_EVENTS,
+  xa as TopActions,
+  Ta as TransactionApi,
+  Ue as TransactionDetails,
+  Ge as TransactionList,
+  wa as TransactionRow,
+  Na as TransactionStore,
+  Dt as TransactionTable,
+  Ca as TransactionWidget,
+  ze as exportTransactionsToCSV,
+  B as useTransactionsUiStore
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.2.9",
+  "version": "7.2.11",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",