@mx-cartographer/experiences 9.2.6 → 9.2.7

package/dist/spending/index.es.js

@@ -1,42 +1,42 @@
 import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import c from "react";
-import { observer as I } from "mobx-react-lite";
-import { startOfMonth as at } from "date-fns/startOfMonth";
-import { endOfMonth as it } from "date-fns/endOfMonth";
-import L from "@mui/material/Box";
-import y from "@mui/material/Stack";
-import $ from "@mui/material/Tab";
-import rt from "@mui/material/Tabs";
-import { useTheme as _t } from "@mui/material/styles";
-import { g as st, a as lt, S as B, b as q } from "../SpendingLegend-CxvNOg3c.mjs";
-import { Text as T, Icon as bt } from "@mxenabled/mxui";
-import { f as k } from "../NumberFormatting--XMeeBfr.mjs";
-import { u as A, l as R, c as ct, a as P, i as H, g as dt, f as yt } from "../hooks-97sNJ_lf.mjs";
-import { u as gt } from "../useWidgetLoadTimer-B0tB-yzL.mjs";
-import { L as pt } from "../Loader-CxeBwuPG.mjs";
-import { M as Ct } from "../MiniWidgetContainer-Bmv_WeUd.mjs";
+import r from "react";
+import { observer as R } from "mobx-react-lite";
+import { startOfMonth as it } from "date-fns/startOfMonth";
+import { endOfMonth as rt } from "date-fns/endOfMonth";
+import E from "@mui/material/Box";
+import S from "@mui/material/Stack";
+import G from "@mui/material/Tab";
+import st from "@mui/material/Tabs";
+import { useTheme as yt } from "@mui/material/styles";
+import { g as lt, a as ct, S as F, b as q } from "../SpendingLegend-CxvNOg3c.mjs";
+import { Text as D, Icon as bt } from "@mxenabled/mxui";
+import { f as B } from "../NumberFormatting--XMeeBfr.mjs";
+import { u as W, l as k, c as dt, a as P, i as H, g as gt, f as Ct } from "../hooks-97sNJ_lf.mjs";
+import { u as pt } from "../useWidgetLoadTimer-B0tB-yzL.mjs";
+import { L as ut } from "../Loader-CxeBwuPG.mjs";
+import { M as St } from "../MiniWidgetContainer-Bmv_WeUd.mjs";
 import { startOfToday as J } from "date-fns/startOfToday";
-import St from "@mui/material/Button";
-import { useTheme as Tt } from "@mui/material";
-import { e as Mt } from "../TransactionUtils-BphBJBbU.mjs";
-import { T as Dt } from "../EmbeddedCard-CQEnrozC.mjs";
-import { T as xt } from "../TransactionDetails-CLc7oeHT.mjs";
+import Tt from "@mui/material/Button";
+import { useTheme as Mt } from "@mui/material";
+import { e as Dt } from "../TransactionUtils-BphBJBbU.mjs";
+import { T as xt } from "../EmbeddedCard-CQEnrozC.mjs";
+import { T as Lt } from "../TransactionDetails-CLc7oeHT.mjs";
 import vt from "@mui/material/Collapse";
 import wt from "@mui/material/Divider";
 import Q from "@mui/material/List";
 import X from "@mui/material/ListItem";
 import Z from "@mui/material/ListItemButton";
-import { u as Lt } from "../useScreenSize-mWpmnh5w.mjs";
+import { u as At } from "../useScreenSize-mWpmnh5w.mjs";
 import { D as tt } from "../Drawer-DsnW2o0v.mjs";
-import { C as w } from "../Category-DEKZGLYe.mjs";
+import { C as I } from "../Category-DEKZGLYe.mjs";
 import { parseISO as et } from "date-fns/parseISO";
 import { A as nt } from "../Analytics-D-jdcL72.mjs";
 import { W as It } from "../WidgetContainer-DvKtBdhn.mjs";
-const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y, { direction: "column", children: [
-  /* @__PURE__ */ t(T, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: d }),
-  /* @__PURE__ */ t(T, { variant: "caption", children: k(n, o === "mini" ? "0,0" : "0,0.00") })
-] }), At = () => {
-  const n = _t(), { goals: d, spending: o } = A(), { categories: a, dateRangeCategoryTotals: i } = R(), g = c.useMemo(
+const V = ({ amount: n, label: s, variant: o = "full" }) => /* @__PURE__ */ p(S, { direction: "column", children: [
+  /* @__PURE__ */ t(D, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: s }),
+  /* @__PURE__ */ t(D, { variant: "caption", children: B(n, o === "mini" ? "0,0" : "0,0.00") })
+] }), Et = () => {
+  const n = yt(), { goals: s, spending: o } = W(), { categories: a, dateRangeCategoryTotals: i } = k(), g = r.useMemo(
     () => [
       n.palette.chartMono.chartMono5,
       n.palette.chartMono.chartMono4,
@@ -46,72 +46,72 @@ const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
       n.palette.chartMono.chartMono6
     ],
     [n]
-  ), [e, r] = c.useState(""), [s, f] = c.useState(0), u = c.useMemo(
-    () => st(a, d, n, i),
+  ), [e, l] = r.useState(""), [c, f] = r.useState(0), u = r.useMemo(
+    () => lt(a, s, n, i),
     [a, i]
-  ), h = c.useMemo(
-    () => lt(a, i, g),
+  ), h = r.useMemo(
+    () => ct(a, i, g),
     [a, i, g]
-  ), M = (b, D) => {
-    f(D), r("");
-  }, _ = (b) => {
-    r(e === b ? "" : b);
+  ), C = (y, L) => {
+    f(L), l("");
+  }, _ = (y) => {
+    l(e === y ? "" : y);
   };
-  return /* @__PURE__ */ p(L, { width: "100%", children: [
+  return /* @__PURE__ */ p(E, { width: "100%", children: [
     /* @__PURE__ */ p(
-      rt,
+      st,
       {
         "aria-label": o.mini_title,
-        onChange: M,
+        onChange: C,
         sx: { touchAction: "manipulation" },
-        value: s,
+        value: c,
         variant: "fullWidth",
         children: [
           /* @__PURE__ */ t(
-            $,
+            G,
             {
               "aria-controls": "spending-tabpanel",
               id: "spending-tab",
               label: /* @__PURE__ */ t(
-                G,
+                V,
                 {
                   amount: u.totalAmount,
                   label: o.spend_tab_title,
                   variant: "mini"
                 }
               ),
-              tabIndex: s === 0 ? 0 : -1
+              tabIndex: c === 0 ? 0 : -1
             }
           ),
           /* @__PURE__ */ t(
-            $,
+            G,
             {
               "aria-controls": "income-tabpanel",
               id: "income-tab",
               label: /* @__PURE__ */ t(
-                G,
+                V,
                 {
                   amount: h.totalAmount,
                   label: o.income_tab_title,
                   variant: "mini"
                 }
               ),
-              tabIndex: s === 1 ? 0 : -1
+              tabIndex: c === 1 ? 0 : -1
             }
           )
         ]
       }
     ),
     /* @__PURE__ */ t(
-      L,
+      E,
       {
         "aria-labelledby": "spending-tab",
-        hidden: s !== 0,
+        hidden: c !== 0,
         id: "spending-tabpanel",
         role: "tabpanel",
-        children: /* @__PURE__ */ p(y, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+        children: /* @__PURE__ */ p(S, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
           /* @__PURE__ */ t(
-            B,
+            F,
             {
               data: u,
               onSelected: _,
@@ -124,15 +124,15 @@ const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
       }
     ),
     /* @__PURE__ */ t(
-      L,
+      E,
       {
         "aria-labelledby": "income-tab",
-        hidden: s !== 1,
+        hidden: c !== 1,
         id: "income-tabpanel",
         role: "tabpanel",
-        children: /* @__PURE__ */ p(y, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+        children: /* @__PURE__ */ p(S, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
           /* @__PURE__ */ t(
-            B,
+            F,
             {
               data: h,
               isIncome: !0,
@@ -146,42 +146,42 @@ const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
       }
     )
   ] });
-}, Et = I(At), Wt = ({ onPrimaryCtaClick: n, sx: d = {} }) => {
-  const { isAccountDataLoaded: o, loadAccountData: a } = ct(), { dateRangeTotalsLoaded: i, categoriesLoaded: g, loadCategories: e, loadDateRangeCategoryTotals: r } = R(), { spending: s } = A(), { isInitialized: f, selectedAccounts: u } = P();
-  return gt({
+}, Rt = R(Et), Wt = ({ onPrimaryCtaClick: n, sx: s = {} }) => {
+  const { isAccountDataLoaded: o, loadAccountData: a } = dt(), { dateRangeTotalsLoaded: i, categoriesLoaded: g, loadCategories: e, loadDateRangeCategoryTotals: l } = k(), { spending: c } = W(), { isInitialized: f, selectedAccounts: u } = P();
+  return pt({
     widgetName: "SpendingMiniWidget",
     isLoaded: i
-  }), c.useEffect(() => {
+  }), r.useEffect(() => {
     o || a().finally(), g || e().finally();
-  }, []), c.useEffect(() => {
-    !f || !o || r(
+  }, []), r.useEffect(() => {
+    !f || !o || l(
       u,
-      at(/* @__PURE__ */ new Date()),
-      it(/* @__PURE__ */ new Date())
+      it(/* @__PURE__ */ new Date()),
+      rt(/* @__PURE__ */ new Date())
     ).finally();
-  }, [f, o, u]), !f || !o || !i ? /* @__PURE__ */ t(pt, {}) : /* @__PURE__ */ t(
-    Ct,
+  }, [f, o, u]), !f || !o || !i ? /* @__PURE__ */ t(ut, {}) : /* @__PURE__ */ t(
+    St,
     {
       className: "mx-exp-spending-miniwidget",
       onPrimaryCtaClick: n,
-      primaryCtaLabel: s.primary_cta,
-      primaryCtaLabelAria: s.primary_cta_aria,
-      sx: { height: "100%", ...d },
-      title: s.mini_title,
-      children: /* @__PURE__ */ t(Et, {})
+      primaryCtaLabel: c.primary_cta,
+      primaryCtaLabelAria: c.primary_cta_aria,
+      sx: { height: "100%", ...s },
+      title: c.mini_title,
+      children: /* @__PURE__ */ t(Rt, {})
     }
   );
-}, Ce = I(Wt), Rt = ({
+}, Se = R(Wt), Nt = ({
   data: n,
-  onSelected: d,
+  onSelected: s,
   selectedId: o = "",
   title: a
 }) => {
-  const { spending: i } = A(), g = n.categoryData.find((e) => e.guid === o);
-  return /* @__PURE__ */ p(y, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
-    /* @__PURE__ */ t(T, { bold: !0, id: "spending-list-title", sx: { py: 12 }, variant: "h3", children: `${a} ${i.by_category}` }),
+  const { spending: i } = W(), g = n.categoryData.find((e) => e.guid === o);
+  return /* @__PURE__ */ p(S, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
+    /* @__PURE__ */ t(D, { bold: !0, id: "spending-list-title", sx: { py: 12 }, variant: "h3", children: `${a} ${i.by_category}` }),
     /* @__PURE__ */ t(wt, { "aria-hidden": "true" }),
-    /* @__PURE__ */ t(Q, { "aria-labelledby": "spending-list-title", children: n.categoryData.map((e) => /* @__PURE__ */ p(c.Fragment, { children: [
+    /* @__PURE__ */ t(Q, { "aria-labelledby": "spending-list-title", children: n.categoryData.map((e) => /* @__PURE__ */ p(r.Fragment, { children: [
       /* @__PURE__ */ t(
         X,
         {
@@ -197,11 +197,11 @@ const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
             {
               "aria-expanded": g?.guid === e.guid,
               id: `spending-list-category-${e.guid}`,
-              onClick: () => d(e.guid),
+              onClick: () => s(e.guid),
               sx: { minHeight: 44, px: 8, py: 0 },
               children: [
                 /* @__PURE__ */ t(
-                  L,
+                  E,
                   {
                     "aria-hidden": "true",
                     borderRadius: 4,
@@ -213,15 +213,15 @@ const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
                   }
                 ),
                 /* @__PURE__ */ p(
-                  y,
+                  S,
                   {
                     alignItems: "center",
                     direction: "row",
                     justifyContent: "space-between",
                     width: "100%",
                     children: [
-                      /* @__PURE__ */ t(T, { bold: o === e.guid, children: e.name }),
-                      /* @__PURE__ */ t(T, { bold: o === e.guid, variant: "body1", children: k(e.amount, "0,0.00") })
+                      /* @__PURE__ */ t(D, { bold: o === e.guid, children: e.name }),
+                      /* @__PURE__ */ t(D, { bold: o === e.guid, variant: "body1", children: B(e.amount, "0,0.00") })
                     ]
                   }
                 )
@@ -230,7 +230,7 @@ const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
           )
         }
       ),
-      e.categoryTotals && e.categoryTotals.length > 0 && /* @__PURE__ */ t(vt, { in: g?.guid === e.guid, unmountOnExit: !0, children: /* @__PURE__ */ t(Q, { sx: { borderBottom: 1, borderColor: "divider" }, children: g?.categoryTotals?.map((r) => /* @__PURE__ */ t(
+      e.categoryTotals && e.categoryTotals.length > 0 && /* @__PURE__ */ t(vt, { in: g?.guid === e.guid, unmountOnExit: !0, children: /* @__PURE__ */ t(Q, { sx: { borderBottom: 1, borderColor: "divider" }, children: g?.categoryTotals?.map((l) => /* @__PURE__ */ t(
         X,
         {
           sx: {
@@ -240,34 +240,34 @@ const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
           children: /* @__PURE__ */ t(
             Z,
             {
-              id: `spending-list-subcategory-${r.guid}`,
-              onClick: () => d(r.guid, !0),
+              id: `spending-list-subcategory-${l.guid}`,
+              onClick: () => s(l.guid, !0),
               sx: { minHeight: 44, px: 8, py: 0 },
-              children: /* @__PURE__ */ p(y, { direction: "row", justifyContent: "space-between", width: "100%", children: [
-                /* @__PURE__ */ p(T, { children: [
-                  r.name,
+              children: /* @__PURE__ */ p(S, { direction: "row", justifyContent: "space-between", width: "100%", children: [
+                /* @__PURE__ */ p(D, { children: [
+                  l.name,
                   " "
                 ] }),
-                /* @__PURE__ */ t(T, { children: k(r.amount, "0,0.00") })
+                /* @__PURE__ */ t(D, { children: B(l.amount, "0,0.00") })
               ] })
             }
           )
         },
-        r.guid
+        l.guid
       )) }) })
     ] }, e.guid)) }),
-    /* @__PURE__ */ t(T, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${i.total}: ${k(n.totalAmount, "0,0.00")}` })
+    /* @__PURE__ */ t(D, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${i.total}: ${B(n.totalAmount, "0,0.00")}` })
   ] });
-}, Nt = I(Rt), Ot = ({
+}, $t = R(Nt), Ot = ({
   data: n,
-  onSelected: d,
+  onSelected: s,
   onViewTransactions: o,
   selectedId: a,
   title: i
 }) => {
-  const { isDesktop: g, isMobile: e } = Lt(), { dateRangeTotalsLoading: r } = R(), { spending: s } = A();
+  const { isDesktop: g, isMobile: e } = At(), { dateRangeTotalsLoading: l } = k(), { spending: c } = W();
   return /* @__PURE__ */ p(
-    y,
+    S,
     {
       alignItems: e ? "center" : "flex-start",
       direction: e ? "column" : "row",
@@ -276,8 +276,8 @@ const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
       pt: 50,
       px: 8,
       children: [
-        r && /* @__PURE__ */ t(
-          B,
+        l && /* @__PURE__ */ t(
+          F,
           {
             data: {
               categoryData: [],
@@ -292,111 +292,111 @@ const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
             variant: "full"
           }
         ),
-        !r && /* @__PURE__ */ t(
-          B,
+        !l && /* @__PURE__ */ t(
+          F,
           {
             data: n,
             onSelected: (h) => {
-              d(h), setTimeout(() => document.getElementById(`spending-list-category-${h}`)?.focus(), 0);
+              s(h), setTimeout(() => document.getElementById(`spending-list-category-${h}`)?.focus(), 0);
             },
             onViewTransactions: o,
             selectedId: a,
             size: g ? 400 : 300,
-            totalLabel: s.total_amount,
+            totalLabel: c.total_amount,
             variant: "full"
           }
         ),
-        /* @__PURE__ */ t(Nt, { data: n, onSelected: d, selectedId: a, title: i })
+        /* @__PURE__ */ t($t, { data: n, onSelected: s, selectedId: a, title: i })
       ]
     }
   );
-}, ot = I(Ot), kt = (n) => [
+}, ot = R(Ot), kt = (n) => [
   n.palette.chartMono.chartMono5,
   n.palette.chartMono.chartMono4,
   n.palette.chartMono.chartMono3,
   n.palette.chartMono.chartMono2,
   n.palette.chartMono.chartMono1,
   n.palette.chartMono.chartMono6
-], $t = () => {
-  const n = Tt(), { is_mobile_webview: d } = H(), { clientConfig: o } = H(), { categories: a, dateRangeCategoryTotals: i } = R(), {
+], jt = () => {
+  const n = Mt(), { is_mobile_webview: s } = H(), { clientConfig: o } = H(), { categories: a, dateRangeCategoryTotals: i } = k(), {
     goals: g,
     spending: e,
-    transactions: r
-  } = A(), { displayedDateRange: s, selectedAccountGuids: f } = P(), {
+    transactions: l
+  } = W(), { displayedDateRange: c, selectedAccountGuids: f } = P(), {
     setFilter: u,
     sortedTransactions: h,
-    sortedTransactionsWithSplits: M,
+    sortedTransactionsWithSplits: C,
     tags: _
-  } = dt(), b = o?.master?.deep_link_params?.account_guids, D = o?.master?.deep_link_params?.view, [x, N] = c.useState(""), [v, C] = c.useState(D === "income" ? 1 : 0), [E, W] = c.useState(""), [O, j] = c.useState(!1), F = c.useMemo(
-    () => st(a, g, n, i),
+  } = gt(), y = o?.master?.deep_link_params?.account_guids, L = o?.master?.deep_link_params?.view, [T, N] = r.useState(""), [v, $] = r.useState(L === "income" ? 1 : 0), [O, j] = r.useState(""), [b, w] = r.useState(!1), x = r.useMemo(
+    () => lt(a, g, n, i),
     [a, i]
-  ), K = c.useMemo(
-    () => lt(a, i, kt(n)),
+  ), A = r.useMemo(
+    () => ct(a, i, kt(n)),
     [a, i]
-  ), V = c.useMemo(
-    () => h.find((l) => l.guid === E),
-    [E, h]
-  ), ut = (l, S) => {
-    C(S), N("");
-  }, U = (l, S = !1) => {
-    S ? mt(l) : N(x === l || l === "0" ? "" : l);
-  }, mt = (l) => {
+  ), z = r.useMemo(
+    () => h.find((d) => d.guid === O),
+    [O, h]
+  ), mt = (d, M) => {
+    $(M), N("");
+  }, U = (d, M = !1) => {
+    M ? ht(d) : N(T === d || d === "0" ? "" : d);
+  }, ht = (d) => {
     u({
       ...{
-        accounts: b || f,
-        dateRange: s
+        accounts: y || f,
+        dateRange: c
       },
-      custom: (m) => x === "other" ? m.top_level_category_guid === l : m.category_guid === l,
+      custom: (m) => T === "other" ? m.top_level_category_guid === d : m.category_guid === d,
       showSplits: !0
-    }), j(!0);
-  }, Y = (l) => {
-    const S = {
-      accounts: b || f,
-      dateRange: s
+    }), w(!0);
+  }, Y = (d) => {
+    const M = {
+      accounts: y || f,
+      dateRange: c
     };
     if (v === 0)
-      if (l === "other") {
-        const m = F.categoryData.find((z) => z.guid === "other");
+      if (d === "other") {
+        const m = x.categoryData.find((K) => K.guid === "other");
         u({
-          ...S,
-          custom: (z) => !!m?.categoryTotals?.find((ft) => ft.guid === z.top_level_category_guid)
+          ...M,
+          custom: (K) => !!m?.categoryTotals?.find((_t) => _t.guid === K.top_level_category_guid)
         });
       } else
         u({
-          ...S,
-          custom: (m) => l ? m.top_level_category_guid === l : m.top_level_category_guid !== w.INCOME && m.category_guid !== w.INCOME && m.top_level_category_guid !== w.INVESTMENTS && m.top_level_category_guid !== w.TRANSFER,
-          showSplits: !!l
+          ...M,
+          custom: (m) => d ? m.top_level_category_guid === d : m.top_level_category_guid !== I.INCOME && m.category_guid !== I.INCOME && m.top_level_category_guid !== I.INVESTMENTS && m.top_level_category_guid !== I.TRANSFER,
+          showSplits: !!d
         });
     else
       u({
-        ...S,
-        custom: (m) => l ? m.category_guid === l : m.category_guid === w.INCOME || m.top_level_category_guid === w.INCOME
+        ...M,
+        custom: (m) => d ? m.category_guid === d : m.category_guid === I.INCOME || m.top_level_category_guid === I.INCOME
       });
-    j(!0);
-  }, ht = () => {
-    Mt(M, _);
+    w(!0);
+  }, ft = () => {
+    Dt(C, _);
   };
-  return /* @__PURE__ */ p(L, { children: [
-    /* @__PURE__ */ p(rt, { onChange: ut, value: v, variant: "fullWidth", children: [
+  return /* @__PURE__ */ p(E, { children: [
+    /* @__PURE__ */ p(st, { onChange: mt, value: v, variant: "fullWidth", children: [
       /* @__PURE__ */ t(
-        $,
+        G,
         {
           label: /* @__PURE__ */ t(
-            G,
+            V,
             {
-              amount: F.totalAmount,
+              amount: x.totalAmount,
               label: e.spend_tab_title
             }
           )
         }
       ),
       /* @__PURE__ */ t(
-        $,
+        G,
         {
           label: /* @__PURE__ */ t(
-            G,
+            V,
             {
-              amount: K.totalAmount,
+              amount: A.totalAmount,
               label: e.income_tab_title
             }
           )
@@ -406,20 +406,20 @@ const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
     v === 0 && /* @__PURE__ */ t(
       ot,
       {
-        data: F,
+        data: x,
         onSelected: U,
         onViewTransactions: Y,
-        selectedId: x,
+        selectedId: T,
         title: e.spend_tab_title
       }
     ),
     v === 1 && /* @__PURE__ */ t(
       ot,
       {
-        data: K,
+        data: A,
         onSelected: U,
         onViewTransactions: Y,
-        selectedId: x,
+        selectedId: T,
         title: e.income_tab_title
       }
     ),
@@ -427,20 +427,20 @@ const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
       tt,
       {
         ariaLabelClose: e.close_drawer_aria,
-        isOpen: O,
-        onClose: () => j(!1),
+        isOpen: b,
+        onClose: () => w(!1),
         title: e.transactions_drawer_title,
-        children: /* @__PURE__ */ p(y, { children: [
-          !d && h.length > 0 && /* @__PURE__ */ t(y, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ t(
-            St,
+        children: /* @__PURE__ */ p(S, { children: [
+          !s && h.length > 0 && /* @__PURE__ */ t(S, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ t(
+            Tt,
             {
-              onClick: ht,
+              onClick: ft,
               startIcon: /* @__PURE__ */ t(bt, { name: "ios_share" }),
               variant: "text",
-              children: r.export_csv_btn
+              children: l.export_csv_btn
             }
           ) }),
-          /* @__PURE__ */ t(Dt, { onClick: W })
+          /* @__PURE__ */ t(xt, { onClick: j })
         ] })
       }
     ),
@@ -448,46 +448,70 @@ const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y,
       tt,
       {
         ariaLabelClose: e.close_drawer_aria,
-        isOpen: !!V,
-        onClose: () => W(""),
+        isOpen: !!z,
+        onClose: () => j(""),
         title: e.transaction_details_drawer_title,
-        children: V && /* @__PURE__ */ t(xt, { transaction: V })
+        children: z && /* @__PURE__ */ t(Lt, { transaction: z })
       }
     )
   ] });
-}, Bt = I($t), Gt = ({ onBackClick: n, onMenuClick: d, sx: o = {} }) => {
-  const { isAccountDataLoaded: a, loadAccountData: i } = ct(), { categoriesLoaded: g, dateRangeTotalsLoaded: e, loadCategories: r, loadDateRangeCategoryTotals: s } = R(), { isTransactionDataLoaded: f, loadTransactionData: u } = dt(), { spending: h } = A(), { displayedDateRange: M, isInitialized: _, setDisplayedDate: b, selectedAccounts: D } = P(), { onEvent: x } = yt(), { clientConfig: N } = H();
-  gt({
+}, Bt = R(jt), at = (n, s, o) => `${n.getTime()}-${s.getTime()}-${[...o].sort().join(",")}`, Gt = ({ onBackClick: n, onMenuClick: s, sx: o = {} }) => {
+  const { isAccountDataLoaded: a, loadAccountData: i } = dt(), { categoriesLoaded: g, dateRangeTotalsLoaded: e, loadCategories: l, loadDateRangeCategoryTotals: c } = k(), { isTransactionDataLoaded: f, loadTransactionData: u } = gt(), { spending: h } = W(), {
+    displayedDateRange: C,
+    isInitialized: _,
+    setDisplayedDate: y,
+    selectedAccounts: L,
+    selectedAccountGuids: T
+  } = P(), { onEvent: N } = Ct(), { clientConfig: v } = H();
+  pt({
     widgetName: "SpendingWidget",
     isLoaded: e
-  }), c.useEffect(() => {
-    const C = N?.master?.deep_link_params, E = C?.date_range ? [et(C.date_range.from), et(C.date_range.to)] : [at(J()), it(J())], W = E[0], O = E[1];
-    b(W, O), a || i().finally(), g || r().finally(), f || u().finally(), _ && a && s(D, W, O).finally(), x(nt.SPENDING_VIEW);
-  }, []), c.useEffect(() => {
-    _ && a && s(
-      D,
-      M.start,
-      M.end
-    ).finally();
-  }, [M, _, a, D]);
-  const v = (C) => {
-    b(C[0], C[1]);
+  });
+  const $ = r.useRef(null), O = r.useRef(!1);
+  r.useEffect(() => {
+    const b = v?.master?.deep_link_params, w = b?.date_range ? [et(b.date_range.from), et(b.date_range.to)] : [it(J()), rt(J())], x = w[0], A = w[1];
+    y(x, A), a || i().finally(), g || l().finally(), f || u().finally(), _ && a && ($.current = at(x, A, T), c(L, x, A).finally()), N(nt.SPENDING_VIEW);
+  }, []), r.useEffect(() => {
+    if (!O.current) {
+      O.current = !0;
+      return;
+    }
+    if (!_ || !a) return;
+    const b = at(
+      C.start,
+      C.end,
+      T
+    );
+    $.current !== b && ($.current = b, c(
+      L,
+      C.start,
+      C.end
+    ).finally());
+  }, [
+    C.start.getTime(),
+    C.end.getTime(),
+    _,
+    a,
+    T.join(",")
+  ]);
+  const j = (b) => {
+    y(b[0], b[1]);
   };
-  return !_ || !a || !e ? /* @__PURE__ */ t(pt, {}) : /* @__PURE__ */ t(
+  return !_ || !a || !e ? /* @__PURE__ */ t(ut, {}) : /* @__PURE__ */ t(
     It,
     {
-      calendarActions: { onRangeChanged: v },
-      onAccountsFilterClick: () => x(nt.SPENDING_CLICK_FILTER),
+      calendarActions: { onRangeChanged: j },
+      onAccountsFilterClick: () => N(nt.SPENDING_CLICK_FILTER),
       onBackClick: n,
-      onMenuClick: d,
+      onMenuClick: s,
       sx: o,
       title: h.title,
-      children: /* @__PURE__ */ t(L, { width: "100%", children: /* @__PURE__ */ t(Bt, {}) })
+      children: /* @__PURE__ */ t(E, { width: "100%", children: /* @__PURE__ */ t(Bt, {}) })
     }
   );
-}, Se = I(Gt);
+}, Te = R(Gt);
 export {
-  Ce as SpendingMiniWidget,
-  Se as SpendingWidget
+  Se as SpendingMiniWidget,
+  Te as SpendingWidget
 };
 //# sourceMappingURL=index.es.js.map