@mx-cartographer/experiences 9.4.29 → 9.4.31

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [9.4.31] - 09-18-2026
+
+- **FIXED** - Mini widget containers now expose a labelled `region` landmark, so screen readers announce the widget name (and a short summary, for Budgets) when the browse cursor lands on it instead of staying silent (MEW-3709)
+
+## [9.4.30] - 09-17-2026
+
+- **FIXED** - Budgets bubble tooltip is hidden from assistive tech so it is no longer announced out of focus order or left undismissable by mobile screen readers (MEW-3715)
+
 ## [9.4.29] - 09-17-2026
 
 - **FIXED** - Investments Allocation donut misrepresented holdings with no Morningstar asset-class data as ~100% cash, because the ring's denominator was the sum of buckets-with-data instead of total portfolio value. The ring now uses total portfolio value and surfaces the gap as an explicit "Unclassified" slice (expandable into its real holdings), so ring, center total, and legend agree

package/dist/budgets/BubbleBudgetsMiniWidget.es.js

@@ -1,24 +1,24 @@
-import { useBudgetsStore as D, useCategoryStore as S, useEvent as v, useGlobalCopyStore as x, useGlobalUiStore as E, useWidgetContainerProvider as L } from "../common/context/hooks.es.js";
-import { useWidgetLoadTimer as T } from "../common/hooks/useWidgetLoadTimer.es.js";
-import W from "../common/components/drawer/Drawer.es.js";
-import { ANALYTICS_EVENTS as w } from "../common/constants/Analytics.es.js";
-import { formatCurrency as O } from "../core/utils/NumberFormatting.es.js";
-import { getBudgetDifference as R } from "../core/utils/BudgetUtil.es.js";
-import H from "../common/components/MiniWidgetContainer.es.js";
-import I from "../common/components/Loader.es.js";
-import { AddBudgets as j } from "./components/AddBudgets.es.js";
-import { BubbleBudgets as k } from "./components/BubbleBudgets.es.js";
+import { useBudgetsStore as S, useCategoryStore as x, useEvent as E, useGlobalCopyStore as L, useGlobalUiStore as T, useWidgetContainerProvider as W } from "../common/context/hooks.es.js";
+import { useWidgetLoadTimer as w } from "../common/hooks/useWidgetLoadTimer.es.js";
+import O from "../common/components/drawer/Drawer.es.js";
+import { ANALYTICS_EVENTS as R } from "../common/constants/Analytics.es.js";
+import { formatCurrency as p } from "../core/utils/NumberFormatting.es.js";
+import { getBudgetDifference as H } from "../core/utils/BudgetUtil.es.js";
+import I from "../common/components/MiniWidgetContainer.es.js";
+import j from "../common/components/Loader.es.js";
+import { AddBudgets as k } from "./components/AddBudgets.es.js";
+import { BubbleBudgets as G } from "./components/BubbleBudgets.es.js";
 import o from "react";
-import { observer as G } from "mobx-react-lite";
-import N from "@mui/material/Stack";
-import { Text as h } from "@mxenabled/mxui";
+import { observer as N } from "mobx-react-lite";
+import $ from "@mui/material/Stack";
+import { Text as b } from "@mxenabled/mxui";
 import { endOfMonth as U } from "date-fns/endOfMonth";
 import { startOfMonth as z } from "date-fns/startOfMonth";
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
 import { useTheme as K } from "@mui/material/styles";
 import P from "@mui/material/Box";
 var V = ({ budgetsCopy: n, difference: i, handleAddClick: l, shouldShowZeroState: a }) => {
-  const { availableHeight: e = 0 } = L(), s = o.useRef(null);
+  const { availableHeight: e = 0 } = W(), s = o.useRef(null);
   o.useEffect(() => {
     e > 0 && s.current === null && (s.current = e);
   }, [e]);
@@ -26,77 +26,78 @@ var V = ({ budgetsCopy: n, difference: i, handleAddClick: l, shouldShowZeroState
     const t = s.current ?? e;
     return t > 0 ? Math.round(Math.max(120, Math.min(450, t * 0.8))) - 40 : 450;
   }, [e]);
-  return /* @__PURE__ */ f(N, {
+  return /* @__PURE__ */ h($, {
     sx: {
       height: "100%",
       justifyContent: "space-between"
     },
-    children: [/* @__PURE__ */ r(k, {
+    children: [/* @__PURE__ */ r(G, {
       createBudgetOnClick: l,
       height: u,
       isMiniWidget: !0,
       shouldShowZeroState: a
-    }), !a && /* @__PURE__ */ f(P, {
+    }), !a && /* @__PURE__ */ h(P, {
       ml: 16,
-      children: [/* @__PURE__ */ r(h, {
+      children: [/* @__PURE__ */ r(b, {
         bold: !0,
         color: i < 0 ? "error.main" : "success.main",
-        children: O(Math.abs(i), "0,0")
-      }), /* @__PURE__ */ r(h, { children: i < 0 ? n.overspent_in_budgets : n.left_in_budgets })]
+        children: p(Math.abs(i), "0,0")
+      }), /* @__PURE__ */ r(b, { children: i < 0 ? n.overspent_in_budgets : n.left_in_budgets })]
     })]
   });
 }, Y = (n) => {
-  const i = K(), { onEvent: l } = v(), { detailedBudgets: a, isDataLoaded: e, loadBudgetData: s, setTheme: u } = D(), { budgets: t, common: p } = x(), { isInitialized: c, selectedAccounts: m } = E(), { loadDateRangeCategoryTotals: b, loadMonthlyCategoryTotals: B } = S(), C = R(a), [_, d] = o.useState(!1);
+  const i = K(), { onEvent: l } = E(), { detailedBudgets: a, isDataLoaded: e, loadBudgetData: s, setTheme: u } = S(), { budgets: t, common: B } = L(), { isInitialized: m, selectedAccounts: c } = T(), { loadDateRangeCategoryTotals: _, loadMonthlyCategoryTotals: C } = x(), f = H(a), [y, d] = o.useState(!1);
   o.useEffect(() => {
     e || s().finally();
   }, []), o.useEffect(() => {
     u(i);
   }, [i]), o.useEffect(() => {
-    c && !e && (b(m, z(/* @__PURE__ */ new Date()), U(/* @__PURE__ */ new Date())).finally(), B(m).finally());
+    m && !e && (_(c, z(/* @__PURE__ */ new Date()), U(/* @__PURE__ */ new Date())).finally(), C(c).finally());
   }, [
-    c,
     m,
+    c,
     e
   ]);
-  const y = () => {
-    d(!0), l(w.BUDGETS_CLICK_ADD);
-  }, M = () => {
+  const M = () => {
+    d(!0), l(R.BUDGETS_CLICK_ADD);
+  }, A = () => {
     d(!1);
-  }, A = () => d(!1);
-  if (T({
+  }, v = () => d(!1);
+  if (w({
     widgetName: "BubbleBudgetsMiniWidget",
     isLoaded: e
-  }), !c || !e) return /* @__PURE__ */ r(I, {});
-  const g = a.length === 0;
-  return /* @__PURE__ */ f(H, {
+  }), !m || !e) return /* @__PURE__ */ r(j, {});
+  const g = a.length === 0, D = g ? void 0 : `${p(Math.abs(f), "0,0")} ${f < 0 ? t.overspent_in_budgets : t.left_in_budgets}`;
+  return /* @__PURE__ */ h(I, {
     contentStyles: {
       height: "calc(100% - 66px)",
       ":last-child": { pb: 0 }
     },
     primaryCtaLabel: g ? t.get_started_cta : t.details_cta,
     primaryCtaLabelAria: t.details_cta_aria,
+    summaryAria: D,
     sx: { height: "100%" },
     title: t.budgets_title,
     ...n,
     children: [/* @__PURE__ */ r(V, {
       budgetsCopy: t,
-      difference: C,
-      handleAddClick: y,
+      difference: f,
+      handleAddClick: M,
       shouldShowZeroState: g
-    }), /* @__PURE__ */ r(W, {
-      ariaLabelClose: p.close_aria,
-      isOpen: _,
+    }), /* @__PURE__ */ r(O, {
+      ariaLabelClose: B.close_aria,
+      isOpen: y,
       onClose: () => d(!1),
       title: t.add_new_title,
-      children: /* @__PURE__ */ r(j, {
-        onAddBudget: M,
-        onRecalculateBudgets: A
+      children: /* @__PURE__ */ r(k, {
+        onAddBudget: A,
+        onRecalculateBudgets: v
       })
     })]
   });
-}, me = G(Y);
+}, fe = N(Y);
 export {
-  me as default
+  fe as default
 };
 
 //# sourceMappingURL=BubbleBudgetsMiniWidget.es.js.map

package/dist/budgets/BubbleBudgetsMiniWidget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleBudgetsMiniWidget.es.js","names":[],"sources":["../../src/budgets/BubbleBudgetsMiniWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { startOfMonth } from 'date-fns/startOfMonth'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  Loader,\n  MiniWidgetContainer,\n  useBudgetsStore,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useWidgetContainerProvider,\n  useWidgetLoadTimer,\n} from '../common'\nimport { type BudgetsCopy, type MiniWidgetProps } from '../core'\n\nimport { AddBudgets } from './components/AddBudgets'\nimport { BubbleBudgets } from './components/BubbleBudgets'\nimport { getBudgetDifference } from '../core/utils/BudgetUtil'\nimport { formatCurrency } from '../core/utils/NumberFormatting'\n\ninterface BubbleBudgetsContentProps {\n  budgetsCopy: BudgetsCopy\n  difference: number\n  handleAddClick: () => void\n  shouldShowZeroState: boolean\n}\n\nconst BubbleBudgetsContent: React.FC<BubbleBudgetsContentProps> = ({\n  budgetsCopy,\n  difference,\n  handleAddClick,\n  shouldShowZeroState,\n}) => {\n  const { availableHeight = 0 } = useWidgetContainerProvider()\n  const initialHeightRef = React.useRef<number | null>(null)\n\n  React.useEffect(() => {\n    if (availableHeight > 0 && initialHeightRef.current === null) {\n      initialHeightRef.current = availableHeight\n    }\n  }, [availableHeight])\n\n  const bubbleHeight = React.useMemo(() => {\n    const baseHeight = initialHeightRef.current ?? availableHeight\n\n    if (baseHeight > 0) return Math.round(Math.max(120, Math.min(450, baseHeight * 0.8))) - 40\n\n    return 450\n  }, [availableHeight])\n\n  return (\n    <Stack sx={{ height: '100%', justifyContent: 'space-between' }}>\n      <BubbleBudgets\n        createBudgetOnClick={handleAddClick}\n        height={bubbleHeight}\n        isMiniWidget={true}\n        shouldShowZeroState={shouldShowZeroState}\n      />\n\n      {!shouldShowZeroState && (\n        <Box ml={16}>\n          <Text bold={true} color={difference < 0 ? 'error.main' : 'success.main'}>\n            {formatCurrency(Math.abs(difference), '0,0')}\n          </Text>\n          <Text>\n            {difference < 0 ? budgetsCopy.overspent_in_budgets : budgetsCopy.left_in_budgets}\n          </Text>\n        </Box>\n      )}\n    </Stack>\n  )\n}\n\nconst BubbleBudgetsMiniWidget = (props: MiniWidgetProps) => {\n  const theme = useTheme()\n\n  const { onEvent } = useEvent()\n  const { detailedBudgets: budgets, isDataLoaded, loadBudgetData, setTheme } = useBudgetsStore()\n  const { budgets: budgetsCopy, common: commonCopy } = useGlobalCopyStore()\n  const { isInitialized, selectedAccounts } = useGlobalUiStore()\n  const { loadDateRangeCategoryTotals, loadMonthlyCategoryTotals } = useCategoryStore()\n  const difference = getBudgetDifference(budgets)\n\n  const [isAddOpen, setIsAddOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    if (!isDataLoaded) {\n      loadBudgetData().finally()\n    }\n  }, [])\n\n  React.useEffect(() => {\n    setTheme(theme)\n  }, [theme])\n\n  React.useEffect(() => {\n    if (isInitialized && !isDataLoaded) {\n      loadDateRangeCategoryTotals(\n        selectedAccounts,\n        startOfMonth(new Date()),\n        endOfMonth(new Date()),\n      ).finally()\n      loadMonthlyCategoryTotals(selectedAccounts).finally()\n    }\n  }, [isInitialized, selectedAccounts, isDataLoaded])\n\n  const handleAddClick = () => {\n    setIsAddOpen(true)\n    onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_ADD)\n  }\n\n  const handleBudgetAdded = () => {\n    setIsAddOpen(false)\n  }\n\n  const handleBudgetsRecalculated = () => setIsAddOpen(false)\n\n  useWidgetLoadTimer({\n    widgetName: 'BubbleBudgetsMiniWidget',\n    isLoaded: isDataLoaded,\n  })\n\n  if (!isInitialized || !isDataLoaded) return <Loader />\n\n  const shouldShowZeroState = budgets.length === 0\n\n  return (\n    <MiniWidgetContainer\n      contentStyles={{ height: 'calc(100% - 66px)', ':last-child': { pb: 0 } }}\n      primaryCtaLabel={shouldShowZeroState ? budgetsCopy.get_started_cta : budgetsCopy.details_cta}\n      primaryCtaLabelAria={budgetsCopy.details_cta_aria}\n      sx={{ height: '100%' }}\n      title={budgetsCopy.budgets_title}\n      {...props}\n    >\n      <BubbleBudgetsContent\n        budgetsCopy={budgetsCopy}\n        difference={difference}\n        handleAddClick={handleAddClick}\n        shouldShowZeroState={shouldShowZeroState}\n      />\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isAddOpen}\n        onClose={() => setIsAddOpen(false)}\n        title={budgetsCopy.add_new_title}\n      >\n        <AddBudgets\n          onAddBudget={handleBudgetAdded}\n          onRecalculateBudgets={handleBudgetsRecalculated}\n        />\n      </Drawer>\n    </MiniWidgetContainer>\n  )\n}\n\nexport default observer(BubbleBudgetsMiniWidget)\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,IAAM,IAAA,CAA6D,EACjE,aAAA,GACA,YAAA,GACA,gBAAA,GACA,qBAAA,EAAA,MACI;AACJ,QAAM,EAAE,iBAAA,IAAkB,EAAA,IAAM,EAA2B,GACrD,IAAmB,EAAM,OAAsB,IAAI;AAEzD,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAI,IAAkB,KAAK,EAAiB,YAAY,SACtD,EAAiB,UAAU;AAAA,EAE/B,GAAG,CAAC,CAAe,CAAC;AAEpB,QAAM,IAAe,EAAM,QAAA,MAAc;AACvC,UAAM,IAAa,EAAiB,WAAW;AAE/C,WAAI,IAAa,IAAU,KAAK,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,IAAa,GAAG,CAAC,CAAC,IAAI,KAEjF;AAAA,EACT,GAAG,CAAC,CAAe,CAAC;AAEpB,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,QAAQ;AAAA,MAAQ,gBAAgB;AAAA,IAAgB;AAAA,IAA7D,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,qBAAqB;AAAA,MACrB,QAAQ;AAAA,MACR,cAAc;AAAA,MACO,qBAAA;AAAA,IACtB,CAAA,GAEA,CAAC,KACA,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI;AAAA,MAAT,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,OAAO,IAAa,IAAI,eAAe;AAAA,QACtD,UAAA,EAAe,KAAK,IAAI,CAAU,GAAG,KAAK;AAAA,MACvC,CAAA,GACN,gBAAA,EAAC,GAAD,EAAA,UACG,IAAa,IAAI,EAAY,uBAAuB,EAAY,gBAC7D,CAAA,CACH;AAAA,IAEF,CAAA,CAAA;AAAA;AAEX,GAEM,IAAA,CAA2B,MAA2B;AAC1D,QAAM,IAAQ,EAAS,GAEjB,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,iBAAiB,GAAS,cAAA,GAAc,gBAAA,GAAgB,UAAA,EAAA,IAAa,EAAgB,GACvF,EAAE,SAAS,GAAa,QAAQ,EAAA,IAAe,EAAmB,GAClE,EAAE,eAAA,GAAe,kBAAA,EAAA,IAAqB,EAAiB,GACvD,EAAE,6BAAA,GAA6B,2BAAA,EAAA,IAA8B,EAAiB,GAC9E,IAAa,EAAoB,CAAO,GAExC,CAAC,GAAW,CAAA,IAAgB,EAAM,SAAS,EAAK;AAEtD,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAAe,EAAE,QAAQ;AAAA,EAE7B,GAAG,CAAC,CAAC,GAEL,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAS,CAAK;AAAA,EAChB,GAAG,CAAC,CAAK,CAAC,GAEV,EAAM,UAAA,MAAgB;AACpB,IAAI,KAAiB,CAAC,MACpB,EACE,GACA,EAAa,oBAAI,KAAK,CAAC,GACvB,EAAW,oBAAI,KAAK,CAAC,CACvB,EAAE,QAAQ,GACV,EAA0B,CAAgB,EAAE,QAAQ;AAAA,EAExD,GAAG;AAAA,IAAC;AAAA,IAAe;AAAA,IAAkB;AAAA,EAAY,CAAC;AAElD,QAAM,IAAA,MAAuB;AAC3B,IAAA,EAAa,EAAI,GACjB,EAAQ,EAAiB,iBAAiB;AAAA,EAC5C,GAEM,IAAA,MAA0B;AAC9B,IAAA,EAAa,EAAK;AAAA,EACpB,GAEM,IAAA,MAAkC,EAAa,EAAK;AAO1D,MALA,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC,GAEG,CAAC,KAAiB,CAAC,EAAc,QAAO,gBAAA,EAAC,GAAD,CAAS,CAAA;AAErD,QAAM,IAAsB,EAAQ,WAAW;AAE/C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,eAAe;AAAA,MAAE,QAAQ;AAAA,MAAqB,eAAe,EAAE,IAAI,EAAE;AAAA,IAAE;AAAA,IACvE,iBAAiB,IAAsB,EAAY,kBAAkB,EAAY;AAAA,IACjF,qBAAqB,EAAY;AAAA,IACjC,IAAI,EAAE,QAAQ,OAAO;AAAA,IACrB,OAAO,EAAY;AAAA,IACnB,GAAI;AAAA,IANN,UAAA,CAQE,gBAAA,EAAC,GAAD;AAAA,MACe,aAAA;AAAA,MACD,YAAA;AAAA,MACI,gBAAA;AAAA,MACK,qBAAA;AAAA,IACtB,CAAA,GAED,gBAAA,EAAC,GAAD;AAAA,MACE,gBAAgB,EAAW;AAAA,MAC3B,QAAQ;AAAA,MACR,SAAA,MAAe,EAAa,EAAK;AAAA,MACjC,OAAO,EAAY;AAAA,MAEnB,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,aAAa;AAAA,QACb,sBAAsB;AAAA,MACvB,CAAA;AAAA,IACK,CAAA,CACW;AAAA;AAEzB,GAEA,KAAe,EAAS,CAAuB"}
+{"version":3,"file":"BubbleBudgetsMiniWidget.es.js","names":[],"sources":["../../src/budgets/BubbleBudgetsMiniWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { startOfMonth } from 'date-fns/startOfMonth'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  Loader,\n  MiniWidgetContainer,\n  useBudgetsStore,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useWidgetContainerProvider,\n  useWidgetLoadTimer,\n} from '../common'\nimport { type BudgetsCopy, type MiniWidgetProps } from '../core'\n\nimport { AddBudgets } from './components/AddBudgets'\nimport { BubbleBudgets } from './components/BubbleBudgets'\nimport { getBudgetDifference } from '../core/utils/BudgetUtil'\nimport { formatCurrency } from '../core/utils/NumberFormatting'\n\ninterface BubbleBudgetsContentProps {\n  budgetsCopy: BudgetsCopy\n  difference: number\n  handleAddClick: () => void\n  shouldShowZeroState: boolean\n}\n\nconst BubbleBudgetsContent: React.FC<BubbleBudgetsContentProps> = ({\n  budgetsCopy,\n  difference,\n  handleAddClick,\n  shouldShowZeroState,\n}) => {\n  const { availableHeight = 0 } = useWidgetContainerProvider()\n  const initialHeightRef = React.useRef<number | null>(null)\n\n  React.useEffect(() => {\n    if (availableHeight > 0 && initialHeightRef.current === null) {\n      initialHeightRef.current = availableHeight\n    }\n  }, [availableHeight])\n\n  const bubbleHeight = React.useMemo(() => {\n    const baseHeight = initialHeightRef.current ?? availableHeight\n\n    if (baseHeight > 0) return Math.round(Math.max(120, Math.min(450, baseHeight * 0.8))) - 40\n\n    return 450\n  }, [availableHeight])\n\n  return (\n    <Stack sx={{ height: '100%', justifyContent: 'space-between' }}>\n      <BubbleBudgets\n        createBudgetOnClick={handleAddClick}\n        height={bubbleHeight}\n        isMiniWidget={true}\n        shouldShowZeroState={shouldShowZeroState}\n      />\n\n      {!shouldShowZeroState && (\n        <Box ml={16}>\n          <Text bold={true} color={difference < 0 ? 'error.main' : 'success.main'}>\n            {formatCurrency(Math.abs(difference), '0,0')}\n          </Text>\n          <Text>\n            {difference < 0 ? budgetsCopy.overspent_in_budgets : budgetsCopy.left_in_budgets}\n          </Text>\n        </Box>\n      )}\n    </Stack>\n  )\n}\n\nconst BubbleBudgetsMiniWidget = (props: MiniWidgetProps) => {\n  const theme = useTheme()\n\n  const { onEvent } = useEvent()\n  const { detailedBudgets: budgets, isDataLoaded, loadBudgetData, setTheme } = useBudgetsStore()\n  const { budgets: budgetsCopy, common: commonCopy } = useGlobalCopyStore()\n  const { isInitialized, selectedAccounts } = useGlobalUiStore()\n  const { loadDateRangeCategoryTotals, loadMonthlyCategoryTotals } = useCategoryStore()\n  const difference = getBudgetDifference(budgets)\n\n  const [isAddOpen, setIsAddOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    if (!isDataLoaded) {\n      loadBudgetData().finally()\n    }\n  }, [])\n\n  React.useEffect(() => {\n    setTheme(theme)\n  }, [theme])\n\n  React.useEffect(() => {\n    if (isInitialized && !isDataLoaded) {\n      loadDateRangeCategoryTotals(\n        selectedAccounts,\n        startOfMonth(new Date()),\n        endOfMonth(new Date()),\n      ).finally()\n      loadMonthlyCategoryTotals(selectedAccounts).finally()\n    }\n  }, [isInitialized, selectedAccounts, isDataLoaded])\n\n  const handleAddClick = () => {\n    setIsAddOpen(true)\n    onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_ADD)\n  }\n\n  const handleBudgetAdded = () => {\n    setIsAddOpen(false)\n  }\n\n  const handleBudgetsRecalculated = () => setIsAddOpen(false)\n\n  useWidgetLoadTimer({\n    widgetName: 'BubbleBudgetsMiniWidget',\n    isLoaded: isDataLoaded,\n  })\n\n  if (!isInitialized || !isDataLoaded) return <Loader />\n\n  const shouldShowZeroState = budgets.length === 0\n\n  const summaryAria = shouldShowZeroState\n    ? undefined\n    : `${formatCurrency(Math.abs(difference), '0,0')} ${\n        difference < 0 ? budgetsCopy.overspent_in_budgets : budgetsCopy.left_in_budgets\n      }`\n\n  return (\n    <MiniWidgetContainer\n      contentStyles={{ height: 'calc(100% - 66px)', ':last-child': { pb: 0 } }}\n      primaryCtaLabel={shouldShowZeroState ? budgetsCopy.get_started_cta : budgetsCopy.details_cta}\n      primaryCtaLabelAria={budgetsCopy.details_cta_aria}\n      summaryAria={summaryAria}\n      sx={{ height: '100%' }}\n      title={budgetsCopy.budgets_title}\n      {...props}\n    >\n      <BubbleBudgetsContent\n        budgetsCopy={budgetsCopy}\n        difference={difference}\n        handleAddClick={handleAddClick}\n        shouldShowZeroState={shouldShowZeroState}\n      />\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isAddOpen}\n        onClose={() => setIsAddOpen(false)}\n        title={budgetsCopy.add_new_title}\n      >\n        <AddBudgets\n          onAddBudget={handleBudgetAdded}\n          onRecalculateBudgets={handleBudgetsRecalculated}\n        />\n      </Drawer>\n    </MiniWidgetContainer>\n  )\n}\n\nexport default observer(BubbleBudgetsMiniWidget)\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,IAAM,IAAA,CAA6D,EACjE,aAAA,GACA,YAAA,GACA,gBAAA,GACA,qBAAA,EAAA,MACI;AACJ,QAAM,EAAE,iBAAA,IAAkB,EAAA,IAAM,EAA2B,GACrD,IAAmB,EAAM,OAAsB,IAAI;AAEzD,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAI,IAAkB,KAAK,EAAiB,YAAY,SACtD,EAAiB,UAAU;AAAA,EAE/B,GAAG,CAAC,CAAe,CAAC;AAEpB,QAAM,IAAe,EAAM,QAAA,MAAc;AACvC,UAAM,IAAa,EAAiB,WAAW;AAE/C,WAAI,IAAa,IAAU,KAAK,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,IAAa,GAAG,CAAC,CAAC,IAAI,KAEjF;AAAA,EACT,GAAG,CAAC,CAAe,CAAC;AAEpB,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,QAAQ;AAAA,MAAQ,gBAAgB;AAAA,IAAgB;AAAA,IAA7D,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,qBAAqB;AAAA,MACrB,QAAQ;AAAA,MACR,cAAc;AAAA,MACO,qBAAA;AAAA,IACtB,CAAA,GAEA,CAAC,KACA,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI;AAAA,MAAT,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,OAAO,IAAa,IAAI,eAAe;AAAA,QACtD,UAAA,EAAe,KAAK,IAAI,CAAU,GAAG,KAAK;AAAA,MACvC,CAAA,GACN,gBAAA,EAAC,GAAD,EAAA,UACG,IAAa,IAAI,EAAY,uBAAuB,EAAY,gBAC7D,CAAA,CACH;AAAA,IAEF,CAAA,CAAA;AAAA;AAEX,GAEM,IAAA,CAA2B,MAA2B;AAC1D,QAAM,IAAQ,EAAS,GAEjB,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,iBAAiB,GAAS,cAAA,GAAc,gBAAA,GAAgB,UAAA,EAAA,IAAa,EAAgB,GACvF,EAAE,SAAS,GAAa,QAAQ,EAAA,IAAe,EAAmB,GAClE,EAAE,eAAA,GAAe,kBAAA,EAAA,IAAqB,EAAiB,GACvD,EAAE,6BAAA,GAA6B,2BAAA,EAAA,IAA8B,EAAiB,GAC9E,IAAa,EAAoB,CAAO,GAExC,CAAC,GAAW,CAAA,IAAgB,EAAM,SAAS,EAAK;AAEtD,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAAe,EAAE,QAAQ;AAAA,EAE7B,GAAG,CAAC,CAAC,GAEL,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAS,CAAK;AAAA,EAChB,GAAG,CAAC,CAAK,CAAC,GAEV,EAAM,UAAA,MAAgB;AACpB,IAAI,KAAiB,CAAC,MACpB,EACE,GACA,EAAa,oBAAI,KAAK,CAAC,GACvB,EAAW,oBAAI,KAAK,CAAC,CACvB,EAAE,QAAQ,GACV,EAA0B,CAAgB,EAAE,QAAQ;AAAA,EAExD,GAAG;AAAA,IAAC;AAAA,IAAe;AAAA,IAAkB;AAAA,EAAY,CAAC;AAElD,QAAM,IAAA,MAAuB;AAC3B,IAAA,EAAa,EAAI,GACjB,EAAQ,EAAiB,iBAAiB;AAAA,EAC5C,GAEM,IAAA,MAA0B;AAC9B,IAAA,EAAa,EAAK;AAAA,EACpB,GAEM,IAAA,MAAkC,EAAa,EAAK;AAO1D,MALA,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC,GAEG,CAAC,KAAiB,CAAC,EAAc,QAAO,gBAAA,EAAC,GAAD,CAAS,CAAA;AAErD,QAAM,IAAsB,EAAQ,WAAW,GAEzC,IAAc,IAChB,SACA,GAAG,EAAe,KAAK,IAAI,CAAU,GAAG,KAAK,CAAA,IAC3C,IAAa,IAAI,EAAY,uBAAuB,EAAY,eAAA;AAGtE,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,eAAe;AAAA,MAAE,QAAQ;AAAA,MAAqB,eAAe,EAAE,IAAI,EAAE;AAAA,IAAE;AAAA,IACvE,iBAAiB,IAAsB,EAAY,kBAAkB,EAAY;AAAA,IACjF,qBAAqB,EAAY;AAAA,IACpB,aAAA;AAAA,IACb,IAAI,EAAE,QAAQ,OAAO;AAAA,IACrB,OAAO,EAAY;AAAA,IACnB,GAAI;AAAA,IAPN,UAAA,CASE,gBAAA,EAAC,GAAD;AAAA,MACe,aAAA;AAAA,MACD,YAAA;AAAA,MACI,gBAAA;AAAA,MACK,qBAAA;AAAA,IACtB,CAAA,GAED,gBAAA,EAAC,GAAD;AAAA,MACE,gBAAgB,EAAW;AAAA,MAC3B,QAAQ;AAAA,MACR,SAAA,MAAe,EAAa,EAAK;AAAA,MACjC,OAAO,EAAY;AAAA,MAEnB,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,aAAa;AAAA,QACb,sBAAsB;AAAA,MACvB,CAAA;AAAA,IACK,CAAA,CACW;AAAA;AAEzB,GAEA,KAAe,EAAS,CAAuB"}

package/dist/budgets/components/bubblechart/Bubble.es.js

@@ -26,14 +26,17 @@ function U({ bubble: t, isDraggable: v, onClick: f = () => {
   ]);
   if (!t) return;
   const { budgetColors: { background: k, text: l }, category: { icon: C, name: m }, guid: i, description: n, radius: o, x: E, y: M } = t, g = p < 400 ? -8 : -12;
-  let y = g, a = g;
-  o > r ? (y = -14, a = -45) : o > u && (a = -32);
-  let h = 32;
-  o <= r && (h = p < 400 ? 16 : 24);
-  const S = `${t.category.name}: ${n}`, _ = { modifiers: [{
-    name: "offset",
-    options: { offset: [0, 15] }
-  }] }, w = (c) => {
+  let h = g, a = g;
+  o > r ? (h = -14, a = -45) : o > u && (a = -32);
+  let y = 32;
+  o <= r && (y = p < 400 ? 16 : 24);
+  const S = `${t.category.name}: ${n}`, _ = {
+    "aria-hidden": !0,
+    modifiers: [{
+      name: "offset",
+      options: { offset: [0, 15] }
+    }]
+  }, w = (c) => {
     (c.key === "Enter" || c.key === " ") && (c.preventDefault(), f(t));
   }, B = () => {
     s(!0);
@@ -83,11 +86,11 @@ function U({ bubble: t, isDraggable: v, onClick: f = () => {
         })
       }),
       /* @__PURE__ */ e("svg", {
-        x: y,
+        x: h,
         y: a,
         children: /* @__PURE__ */ e(A, {
           name: C,
-          size: h,
+          size: y,
           sx: { fill: l }
         })
       }),

package/dist/budgets/components/bubblechart/Bubble.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.es.js","names":[],"sources":["../../../../src/budgets/components/bubblechart/Bubble.tsx"],"sourcesContent":["import React from 'react'\n\nimport Tooltip from '@mui/material/Tooltip'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport Mercury from './Mercury'\n\nimport { useWidgetContainerProvider } from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport type { BubbleData } from '../BubbleChart'\n\nconst LARGE_THRESHOLD = 75\nconst MEDIUM_THRESHOLD = 50\n\ninterface BubbleProps {\n  bubble: BubbleData\n  isDraggable: boolean\n  onClick?: (budget: DetailedBudget) => void\n}\n\nexport function Bubble({ bubble, isDraggable, onClick = () => {} }: BubbleProps) {\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const theme = useTheme()\n\n  const { availableWidth } = useWidgetContainerProvider()\n\n  const budgetBubble = React.useMemo(() => {\n    if (!bubble) return undefined\n    return {\n      amount: bubble.amount,\n      budgetColors: bubble.budgetColors,\n      guid: bubble.guid,\n      radius: bubble.radius,\n      transaction_total: bubble.transaction_total,\n    }\n  }, [bubble.amount, bubble.budgetColors, bubble.guid, bubble.radius, bubble.transaction_total])\n\n  if (!bubble) return undefined\n\n  const {\n    budgetColors: { background, text: textColor },\n    category: { icon, name },\n    guid,\n    description,\n    radius,\n    x,\n    y,\n  } = bubble\n\n  const defaultSvgOffset = availableWidth < 400 ? -8 : -12\n\n  let iconX = defaultSvgOffset\n  let iconY = defaultSvgOffset\n\n  if (radius > LARGE_THRESHOLD) {\n    iconX = -14\n    iconY = -45\n  } else if (radius > MEDIUM_THRESHOLD) {\n    iconY = -32\n  }\n\n  let iconDimension = 32\n\n  if (radius <= LARGE_THRESHOLD) {\n    iconDimension = availableWidth < 400 ? 16 : 24\n  }\n\n  const tooltipText = `${bubble.category.name}: ${description}`\n  const tooltipPopperSlot = {\n    modifiers: [\n      {\n        name: 'offset',\n        options: { offset: [0, 15] },\n      },\n    ],\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onClick(bubble)\n    }\n  }\n\n  const handleFocus = () => {\n    setShowTooltip(true)\n  }\n\n  const handleBlur = () => {\n    setShowTooltip(false)\n  }\n\n  return (\n    <g\n      aria-label={`${name} - ${description}`}\n      className=\"bubble\"\n      id={`bubble-${guid}`}\n      key={guid}\n      onBlur={handleBlur}\n      onClick={() => onClick(bubble)}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onMouseEnter={() => setShowTooltip(true)}\n      onMouseLeave={() => setShowTooltip(false)}\n      role=\"button\"\n      style={{ cursor: isDraggable ? 'pointer' : 'default', touchAction: 'manipulation' }}\n      tabIndex={0}\n      textAnchor=\"middle\"\n      x={x}\n      y={y}\n    >\n      <style>\n        {`\n          .bubble:focus,\n          .bubble:focus-visible {\n            outline: none;\n          }\n          .bubble:focus circle,\n          .bubble:focus-visible circle {\n            stroke: ${theme.palette.primary.main};\n            stroke-width: 3;\n            stroke-opacity: 0.8;\n          }\n        `}\n      </style>\n      <Tooltip open={showTooltip} slotProps={{ popper: tooltipPopperSlot }} title={tooltipText}>\n        <circle fill={background} id={`circle-${guid}`} r={radius} />\n      </Tooltip>\n\n      <svg x={iconX} y={iconY}>\n        <Icon name={icon} size={iconDimension} sx={{ fill: textColor }} />\n      </svg>\n\n      {radius > LARGE_THRESHOLD && (\n        <Text\n          bold={true}\n          component=\"text\"\n          id={`budget-category-${guid}`}\n          sx={{ fill: textColor }}\n          variant=\"body2\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={4}\n        >\n          {name}\n        </Text>\n      )}\n\n      {radius > MEDIUM_THRESHOLD && (\n        <Text\n          bold={true}\n          component=\"text\"\n          id={`budget-description-${guid}-1`}\n          sx={{ fill: textColor }}\n          variant=\"body1\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={radius <= LARGE_THRESHOLD ? 12 : 24}\n        >\n          {radius <= LARGE_THRESHOLD ? description.split(' ')[0] : description}\n        </Text>\n      )}\n\n      {radius <= LARGE_THRESHOLD && radius > MEDIUM_THRESHOLD && (\n        <Text\n          component=\"text\"\n          id={`budget-description-${guid}-2`}\n          sx={{ fill: textColor }}\n          variant=\"caption\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={28}\n        >\n          {description.split(' ')[1]}\n        </Text>\n      )}\n\n      <Mercury bubble={budgetBubble as BubbleData} />\n    </g>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Bubble.es.js","names":[],"sources":["../../../../src/budgets/components/bubblechart/Bubble.tsx"],"sourcesContent":["import React from 'react'\n\nimport Tooltip from '@mui/material/Tooltip'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport Mercury from './Mercury'\n\nimport { useWidgetContainerProvider } from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport type { BubbleData } from '../BubbleChart'\n\nconst LARGE_THRESHOLD = 75\nconst MEDIUM_THRESHOLD = 50\n\ninterface BubbleProps {\n  bubble: BubbleData\n  isDraggable: boolean\n  onClick?: (budget: DetailedBudget) => void\n}\n\nexport function Bubble({ bubble, isDraggable, onClick = () => {} }: BubbleProps) {\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const theme = useTheme()\n\n  const { availableWidth } = useWidgetContainerProvider()\n\n  const budgetBubble = React.useMemo(() => {\n    if (!bubble) return undefined\n    return {\n      amount: bubble.amount,\n      budgetColors: bubble.budgetColors,\n      guid: bubble.guid,\n      radius: bubble.radius,\n      transaction_total: bubble.transaction_total,\n    }\n  }, [bubble.amount, bubble.budgetColors, bubble.guid, bubble.radius, bubble.transaction_total])\n\n  if (!bubble) return undefined\n\n  const {\n    budgetColors: { background, text: textColor },\n    category: { icon, name },\n    guid,\n    description,\n    radius,\n    x,\n    y,\n  } = bubble\n\n  const defaultSvgOffset = availableWidth < 400 ? -8 : -12\n\n  let iconX = defaultSvgOffset\n  let iconY = defaultSvgOffset\n\n  if (radius > LARGE_THRESHOLD) {\n    iconX = -14\n    iconY = -45\n  } else if (radius > MEDIUM_THRESHOLD) {\n    iconY = -32\n  }\n\n  let iconDimension = 32\n\n  if (radius <= LARGE_THRESHOLD) {\n    iconDimension = availableWidth < 400 ? 16 : 24\n  }\n\n  const tooltipText = `${bubble.category.name}: ${description}`\n  const tooltipPopperSlot = {\n    // Screen readers already get this content in focus order from the <g>\n    // aria-label. The tooltip is purely visual, so hide its portaled node from\n    // assistive tech to keep it from being announced detached from its trigger\n    // (and with nothing for mobile screenreader users to dismiss).\n    'aria-hidden': true,\n    modifiers: [\n      {\n        name: 'offset',\n        options: { offset: [0, 15] },\n      },\n    ],\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onClick(bubble)\n    }\n  }\n\n  const handleFocus = () => {\n    setShowTooltip(true)\n  }\n\n  const handleBlur = () => {\n    setShowTooltip(false)\n  }\n\n  return (\n    <g\n      aria-label={`${name} - ${description}`}\n      className=\"bubble\"\n      id={`bubble-${guid}`}\n      key={guid}\n      onBlur={handleBlur}\n      onClick={() => onClick(bubble)}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onMouseEnter={() => setShowTooltip(true)}\n      onMouseLeave={() => setShowTooltip(false)}\n      role=\"button\"\n      style={{ cursor: isDraggable ? 'pointer' : 'default', touchAction: 'manipulation' }}\n      tabIndex={0}\n      textAnchor=\"middle\"\n      x={x}\n      y={y}\n    >\n      <style>\n        {`\n          .bubble:focus,\n          .bubble:focus-visible {\n            outline: none;\n          }\n          .bubble:focus circle,\n          .bubble:focus-visible circle {\n            stroke: ${theme.palette.primary.main};\n            stroke-width: 3;\n            stroke-opacity: 0.8;\n          }\n        `}\n      </style>\n      <Tooltip open={showTooltip} slotProps={{ popper: tooltipPopperSlot }} title={tooltipText}>\n        <circle fill={background} id={`circle-${guid}`} r={radius} />\n      </Tooltip>\n\n      <svg x={iconX} y={iconY}>\n        <Icon name={icon} size={iconDimension} sx={{ fill: textColor }} />\n      </svg>\n\n      {radius > LARGE_THRESHOLD && (\n        <Text\n          bold={true}\n          component=\"text\"\n          id={`budget-category-${guid}`}\n          sx={{ fill: textColor }}\n          variant=\"body2\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={4}\n        >\n          {name}\n        </Text>\n      )}\n\n      {radius > MEDIUM_THRESHOLD && (\n        <Text\n          bold={true}\n          component=\"text\"\n          id={`budget-description-${guid}-1`}\n          sx={{ fill: textColor }}\n          variant=\"body1\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={radius <= LARGE_THRESHOLD ? 12 : 24}\n        >\n          {radius <= LARGE_THRESHOLD ? description.split(' ')[0] : description}\n        </Text>\n      )}\n\n      {radius <= LARGE_THRESHOLD && radius > MEDIUM_THRESHOLD && (\n        <Text\n          component=\"text\"\n          id={`budget-description-${guid}-2`}\n          sx={{ fill: textColor }}\n          variant=\"caption\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={28}\n        >\n          {description.split(' ')[1]}\n        </Text>\n      )}\n\n      <Mercury bubble={budgetBubble as BubbleData} />\n    </g>\n  )\n}\n"],"mappings":";;;;;;;AAaA,IAAM,IAAkB,IAClB,IAAmB;AAQzB,SAAgB,EAAO,EAAE,QAAA,GAAQ,aAAA,GAAa,SAAA,IAAA,MAAgB;AAAC,EAAA,GAAkB;AAC/E,QAAM,CAAC,GAAa,CAAA,IAAkB,EAAM,SAAS,EAAK,GACpD,IAAQ,EAAS,GAEjB,EAAE,gBAAA,EAAA,IAAmB,EAA2B,GAEhD,IAAe,EAAM,QAAA,MAAc;AACvC,QAAK;AACL,aAAO;AAAA,QACL,QAAQ,EAAO;AAAA,QACf,cAAc,EAAO;AAAA,QACrB,MAAM,EAAO;AAAA,QACb,QAAQ,EAAO;AAAA,QACf,mBAAmB,EAAO;AAAA,MAC5B;AAAA,EACF,GAAG;AAAA,IAAC,EAAO;AAAA,IAAQ,EAAO;AAAA,IAAc,EAAO;AAAA,IAAM,EAAO;AAAA,IAAQ,EAAO;AAAA,EAAiB,CAAC;AAE7F,MAAI,CAAC,EAAQ;AAEb,QAAM,EACJ,cAAc,EAAE,YAAA,GAAY,MAAM,EAAA,GAClC,UAAU,EAAE,MAAA,GAAM,MAAA,EAAA,GAClB,MAAA,GACA,aAAA,GACA,QAAA,GACA,GAAA,GACA,GAAA,EAAA,IACE,GAEE,IAAmB,IAAiB,MAAM,KAAK;AAErD,MAAI,IAAQ,GACR,IAAQ;AAEZ,EAAI,IAAS,KACX,IAAQ,KACR,IAAQ,OACC,IAAS,MAClB,IAAQ;AAGV,MAAI,IAAgB;AAEpB,EAAI,KAAU,MACZ,IAAgB,IAAiB,MAAM,KAAK;AAG9C,QAAM,IAAc,GAAG,EAAO,SAAS,IAAA,KAAS,CAAA,IAC1C,IAAoB;AAAA,IAKxB,eAAe;AAAA,IACf,WAAW,CACT;AAAA,MACE,MAAM;AAAA,MACN,SAAS,EAAE,QAAQ,CAAC,GAAG,EAAE,EAAE;AAAA,IAC7B,CACF;AAAA,EACF,GAEM,IAAA,CAAiB,MAA+B;AACpD,KAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,EAAQ,CAAM;AAAA,EAElB,GAEM,IAAA,MAAoB;AACxB,IAAA,EAAe,EAAI;AAAA,EACrB,GAEM,IAAA,MAAmB;AACvB,IAAA,EAAe,EAAK;AAAA,EACtB;AAEA,SACE,gBAAA,EAAC,KAAD;AAAA,IACE,cAAY,GAAG,CAAA,MAAU,CAAA;AAAA,IACzB,WAAU;AAAA,IACV,IAAI,UAAU,CAAA;AAAA,IAEd,QAAQ;AAAA,IACR,SAAA,MAAe,EAAQ,CAAM;AAAA,IAC7B,SAAS;AAAA,IACT,WAAW;AAAA,IACX,cAAA,MAAoB,EAAe,EAAI;AAAA,IACvC,cAAA,MAAoB,EAAe,EAAK;AAAA,IACxC,MAAK;AAAA,IACL,OAAO;AAAA,MAAE,QAAQ,IAAc,YAAY;AAAA,MAAW,aAAa;AAAA,IAAe;AAAA,IAClF,UAAU;AAAA,IACV,YAAW;AAAA,IACR,GAAA;AAAA,IACA,GAAA;AAAA,IAhBL,UAAA;AAAA,MAkBE,gBAAA,EAAC,SAAD,EAAA,UACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOa,EAAM,QAAQ,QAAQ,IAAA;AAAA;AAAA;AAAA;AAAA,UAK/B,CAAA;AAAA,MACP,gBAAA,EAAC,GAAD;AAAA,QAAS,MAAM;AAAA,QAAa,WAAW,EAAE,QAAQ,EAAkB;AAAA,QAAG,OAAO;AAAA,QAC3E,UAAA,gBAAA,EAAC,UAAD;AAAA,UAAQ,MAAM;AAAA,UAAY,IAAI,UAAU,CAAA;AAAA,UAAQ,GAAG;AAAA,QAAS,CAAA;AAAA,MACrD,CAAA;AAAA,MAET,gBAAA,EAAC,OAAD;AAAA,QAAK,GAAG;AAAA,QAAO,GAAG;AAAA,QAChB,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,MAAM;AAAA,UAAe,IAAI,EAAE,MAAM,EAAU;AAAA,QAAI,CAAA;AAAA,MAC9D,CAAA;AAAA,MAEJ,IAAS,KACR,gBAAA,EAAC,GAAD;AAAA,QACE,MAAM;AAAA,QACN,WAAU;AAAA,QACV,IAAI,mBAAmB,CAAA;AAAA,QACvB,IAAI,EAAE,MAAM,EAAU;AAAA,QACtB,SAAQ;AAAA,QAER,GAAG;AAAA,QAEF,UAAA;AAAA,MACG,CAAA;AAAA,MAGP,IAAS,KACR,gBAAA,EAAC,GAAD;AAAA,QACE,MAAM;AAAA,QACN,WAAU;AAAA,QACV,IAAI,sBAAsB,CAAA;AAAA,QAC1B,IAAI,EAAE,MAAM,EAAU;AAAA,QACtB,SAAQ;AAAA,QAER,GAAG,KAAU,IAAkB,KAAK;AAAA,QAEnC,UAAA,KAAU,IAAkB,EAAY,MAAM,GAAG,EAAE,CAAA,IAAK;AAAA,MACrD,CAAA;AAAA,MAGP,KAAU,KAAmB,IAAS,KACrC,gBAAA,EAAC,GAAD;AAAA,QACE,WAAU;AAAA,QACV,IAAI,sBAAsB,CAAA;AAAA,QAC1B,IAAI,EAAE,MAAM,EAAU;AAAA,QACtB,SAAQ;AAAA,QAER,GAAG;AAAA,QAEF,UAAA,EAAY,MAAM,GAAG,EAAE,CAAA;AAAA,MACpB,CAAA;AAAA,MAGR,gBAAA,EAAC,GAAD,EAAS,QAAQ,EAA6B,CAAA;AAAA,IAC7C;AAAA,EA9EI,GAAA,CA8EJ;AAEP"}

package/dist/common/components/MiniWidgetContainer.d.ts

@@ -11,6 +11,17 @@ interface CardContainerProps {
     subTitle?: string;
     sx?: SxProps;
     title?: string;
+    /**
+     * Accessible name for the widget region when no visible `title` is rendered.
+     * When `title` is present, the region is labelled by the title text instead.
+     */
+    titleAria?: string;
+    /**
+     * Extra summary read after the title when the screen-reader cursor lands on
+     * the region (e.g. "$240 left in budgets"). Appended to the region's
+     * accessible name via a visually-hidden node so it is announced but not shown.
+     */
+    summaryAria?: string;
 }
 declare const MiniWidgetContainer: React.FC<React.PropsWithChildren<CardContainerProps>>;
 export default MiniWidgetContainer;

package/dist/common/components/MiniWidgetContainer.es.js

@@ -1,77 +1,103 @@
-import { WidgetContainerProvider as x } from "../context/WidgetContainerProvider.es.js";
-import { useDimensions as u } from "../hooks/useDimensions.es.js";
-import "react";
-import { H3 as b, P as v, Text as C } from "@mxenabled/mxui";
-import I from "@mui/material/Button";
-import { ChevronRight as z, Icon as H } from "@mxenabled/mx-icons";
-import { Fragment as y, jsx as r, jsxs as i } from "react/jsx-runtime";
-import B from "@mui/material/Box";
-import R from "@mui/material/IconButton";
-import W from "@mui/material/Card";
-import j from "@mui/material/CardContent";
-import w from "@mui/material/CardHeader";
-var K = ({ children: a, className: m = "mx-cmn-mini-widget", closeLabel: l, contentStyles: d, onClose: e, onPrimaryCtaClick: o, primaryCtaLabel: c = "", primaryCtaLabelAria: s = "", subTitle: t = "", sx: p = {}, title: n = "" }) => {
-  const [h, { height: f, width: g }] = u();
-  return /* @__PURE__ */ i(W, {
-    className: m,
+import { WidgetContainerProvider as j } from "../context/WidgetContainerProvider.es.js";
+import { useDimensions as z } from "../hooks/useDimensions.es.js";
+import m from "react";
+import { H3 as H, P as y, Text as R } from "@mxenabled/mxui";
+import W from "@mui/material/Button";
+import { ChevronRight as F, Icon as P } from "@mxenabled/mx-icons";
+import { Fragment as S, jsx as i, jsxs as r } from "react/jsx-runtime";
+import s from "@mui/material/Box";
+import T from "@mui/material/IconButton";
+import $ from "@mui/material/Card";
+import k from "@mui/material/CardContent";
+import D from "@mui/material/CardHeader";
+var X = ({ children: p, className: h = "mx-cmn-mini-widget", closeLabel: f, contentStyles: x, onClose: t, onPrimaryCtaClick: n, primaryCtaLabel: g = "", primaryCtaLabelAria: b = "", subTitle: a = "", sx: u = {}, title: o = "", titleAria: v, summaryAria: e }) => {
+  const [I, { height: B, width: C }] = z(), l = m.useId(), d = m.useId(), c = !!o, w = c ? [l, e && d].filter(Boolean).join(" ") : void 0;
+  return /* @__PURE__ */ r($, {
+    "aria-label": c ? void 0 : [v, e].filter(Boolean).join(", ") || void 0,
+    "aria-labelledby": w,
+    className: h,
+    component: "section",
     sx: {
       touchAction: "manipulation",
-      ...p
+      ...u
     },
-    children: [/* @__PURE__ */ r(w, {
-      sx: { pb: 8 },
-      title: /* @__PURE__ */ i(y, { children: [/* @__PURE__ */ i(B, {
+    children: [
+      e && /* @__PURE__ */ i(s, {
+        "aria-hidden": "true",
+        id: d,
         sx: {
-          alignItems: "center",
-          display: "grid",
-          gap: 2,
-          gridTemplateColumns: "1fr auto",
-          pb: 4
+          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: [n && /* @__PURE__ */ r(b, { children: n }), e ? /* @__PURE__ */ r(R, {
-          "aria-label": l,
-          onClick: e,
-          size: "small",
-          children: /* @__PURE__ */ r(H, {
-            name: "close",
-            size: 24
-          })
-        }) : o && /* @__PURE__ */ r(I, {
-          "aria-label": s,
-          endIcon: /* @__PURE__ */ r(z, {}),
-          onClick: o,
-          size: "small",
-          children: /* @__PURE__ */ r(C, {
-            bold: !0,
-            variant: "body2",
-            children: c
-          })
-        })]
-      }), t && /* @__PURE__ */ r(v, {
-        color: "text.secondary",
+        children: e
+      }),
+      /* @__PURE__ */ i(D, {
+        sx: { pb: 8 },
+        title: /* @__PURE__ */ r(S, { children: [/* @__PURE__ */ r(s, {
+          sx: {
+            alignItems: "center",
+            display: "grid",
+            gap: 2,
+            gridTemplateColumns: "1fr auto",
+            pb: 4
+          },
+          children: [o && /* @__PURE__ */ i(H, {
+            id: l,
+            children: o
+          }), t ? /* @__PURE__ */ i(T, {
+            "aria-label": f,
+            onClick: t,
+            size: "small",
+            children: /* @__PURE__ */ i(P, {
+              name: "close",
+              size: 24
+            })
+          }) : n && /* @__PURE__ */ i(W, {
+            "aria-label": b,
+            endIcon: /* @__PURE__ */ i(F, {}),
+            onClick: n,
+            size: "small",
+            children: /* @__PURE__ */ i(R, {
+              bold: !0,
+              variant: "body2",
+              children: g
+            })
+          })]
+        }), a && /* @__PURE__ */ i(y, {
+          color: "text.secondary",
+          sx: {
+            fontSize: 15,
+            lineHeight: "20px"
+          },
+          variant: "body2",
+          children: a
+        })] })
+      }),
+      /* @__PURE__ */ i(k, {
+        ref: I,
         sx: {
-          fontSize: 15,
-          lineHeight: "20px"
+          p: 0,
+          ...x
         },
-        variant: "body2",
-        children: t
-      })] })
-    }), /* @__PURE__ */ r(j, {
-      ref: h,
-      sx: {
-        p: 0,
-        ...d
-      },
-      children: /* @__PURE__ */ r(x, {
-        availableHeight: f,
-        availableWidth: g,
-        children: a
+        children: /* @__PURE__ */ i(j, {
+          availableHeight: B,
+          availableWidth: C,
+          children: p
+        })
       })
-    })]
+    ]
   });
 };
 export {
-  K as default
+  X as default
 };
 
 //# sourceMappingURL=MiniWidgetContainer.es.js.map

package/dist/common/components/MiniWidgetContainer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniWidgetContainer.es.js","names":[],"sources":["../../../src/common/components/MiniWidgetContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport CardHeader from '@mui/material/CardHeader'\nimport CardContent from '@mui/material/CardContent'\nimport IconButton from '@mui/material/IconButton'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { H3, P, Text } from '@mxenabled/mxui'\n\nimport { WidgetContainerProvider } from '../context'\nimport { useDimensions } from '../hooks/useDimensions'\n\ninterface CardContainerProps {\n  className?: string\n  closeLabel?: string\n  contentStyles?: SxProps\n  onClose?: () => void\n  onPrimaryCtaClick?: () => void\n  primaryCtaLabel?: string\n  primaryCtaLabelAria?: string\n  subTitle?: string\n  sx?: SxProps\n  title?: string\n}\n\nconst MiniWidgetContainer: React.FC<React.PropsWithChildren<CardContainerProps>> = ({\n  children,\n  className = 'mx-cmn-mini-widget',\n  closeLabel,\n  contentStyles,\n  onClose,\n  onPrimaryCtaClick,\n  primaryCtaLabel = '',\n  primaryCtaLabelAria = '',\n  subTitle = '',\n  sx = {},\n  title = '',\n}) => {\n  const [containerRef, { height, width }] = useDimensions()\n\n  return (\n    <Card className={className} sx={{ touchAction: 'manipulation', ...sx }}>\n      <CardHeader\n        sx={{ pb: 8 }}\n        title={\n          <>\n            <Box\n              sx={{\n                alignItems: 'center',\n                display: 'grid',\n                gap: 2,\n                gridTemplateColumns: '1fr auto',\n                pb: 4,\n              }}\n            >\n              {title && <H3>{title}</H3>}\n\n              {onClose ? (\n                <IconButton aria-label={closeLabel} onClick={onClose} size=\"small\">\n                  <Icon name=\"close\" size={24} />\n                </IconButton>\n              ) : (\n                onPrimaryCtaClick && (\n                  <Button\n                    aria-label={primaryCtaLabelAria}\n                    endIcon={<ChevronRight />}\n                    onClick={onPrimaryCtaClick}\n                    size=\"small\"\n                  >\n                    <Text bold={true} variant=\"body2\">\n                      {primaryCtaLabel}\n                    </Text>\n                  </Button>\n                )\n              )}\n            </Box>\n\n            {subTitle && (\n              <P color=\"text.secondary\" sx={{ fontSize: 15, lineHeight: '20px' }} variant=\"body2\">\n                {subTitle}\n              </P>\n            )}\n          </>\n        }\n      />\n\n      <CardContent ref={containerRef} sx={{ p: 0, ...contentStyles }}>\n        <WidgetContainerProvider availableHeight={height} availableWidth={width}>\n          {children}\n        </WidgetContainerProvider>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport default MiniWidgetContainer\n"],"mappings":";;;;;;;;;;;;AA+BA,IAAM,IAAA,CAA8E,EAClF,UAAA,GACA,WAAA,IAAY,sBACZ,YAAA,GACA,eAAA,GACA,SAAA,GACA,mBAAA,GACA,iBAAA,IAAkB,IAClB,qBAAA,IAAsB,IACtB,UAAA,IAAW,IACX,IAAA,IAAK,CAAC,GACN,OAAA,IAAQ,GAAA,MACJ;AACJ,QAAM,CAAC,GAAc,EAAE,QAAA,GAAQ,OAAA,EAAA,CAAA,IAAW,EAAc;AAExD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAiB,WAAA;AAAA,IAAW,IAAI;AAAA,MAAE,aAAa;AAAA,MAAgB,GAAG;AAAA,IAAG;AAAA,IAArE,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI,EAAE,IAAI,EAAE;AAAA,MACZ,OACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,KAAK;AAAA,UACL,qBAAqB;AAAA,UACrB,IAAI;AAAA,QACN;AAAA,QAPF,UAAA,CASG,KAAS,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAU,CAAA,GAExB,IACC,gBAAA,EAAC,GAAD;AAAA,UAAY,cAAY;AAAA,UAAY,SAAS;AAAA,UAAS,MAAK;AAAA,UACzD,UAAA,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAK;AAAA,YAAQ,MAAM;AAAA,UAAK,CAAA;AAAA,QACpB,CAAA,IAEZ,KACE,gBAAA,EAAC,GAAD;AAAA,UACE,cAAY;AAAA,UACZ,SAAS,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,UACxB,SAAS;AAAA,UACT,MAAK;AAAA,UAEL,UAAA,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,SAAQ;AAAA,YACvB,UAAA;AAAA,UACG,CAAA;AAAA,QACA,CAAA,CAGT;AAAA,MAEJ,CAAA,GAAA,KACC,gBAAA,EAAC,GAAD;AAAA,QAAG,OAAM;AAAA,QAAiB,IAAI;AAAA,UAAE,UAAU;AAAA,UAAI,YAAY;AAAA,QAAO;AAAA,QAAG,SAAQ;AAAA,QACzE,UAAA;AAAA,MACA,CAAA,CAEL,EAAA,CAAA;AAAA,IAEL,CAAA,GAED,gBAAA,EAAC,GAAD;AAAA,MAAa,KAAK;AAAA,MAAc,IAAI;AAAA,QAAE,GAAG;AAAA,QAAG,GAAG;AAAA,MAAc;AAAA,MAC3D,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAyB,iBAAiB;AAAA,QAAQ,gBAAgB;AAAA,QAC/D,UAAA;AAAA,MACsB,CAAA;AAAA,IACd,CAAA,CACT;AAAA;AAEV"}
+{"version":3,"file":"MiniWidgetContainer.es.js","names":[],"sources":["../../../src/common/components/MiniWidgetContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport CardHeader from '@mui/material/CardHeader'\nimport CardContent from '@mui/material/CardContent'\nimport IconButton from '@mui/material/IconButton'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { H3, P, Text } from '@mxenabled/mxui'\n\nimport { WidgetContainerProvider } from '../context'\nimport { useDimensions } from '../hooks/useDimensions'\n\ninterface CardContainerProps {\n  className?: string\n  closeLabel?: string\n  contentStyles?: SxProps\n  onClose?: () => void\n  onPrimaryCtaClick?: () => void\n  primaryCtaLabel?: string\n  primaryCtaLabelAria?: string\n  subTitle?: string\n  sx?: SxProps\n  title?: string\n  /**\n   * Accessible name for the widget region when no visible `title` is rendered.\n   * When `title` is present, the region is labelled by the title text instead.\n   */\n  titleAria?: string\n  /**\n   * Extra summary read after the title when the screen-reader cursor lands on\n   * the region (e.g. \"$240 left in budgets\"). Appended to the region's\n   * accessible name via a visually-hidden node so it is announced but not shown.\n   */\n  summaryAria?: string\n}\n\nconst MiniWidgetContainer: React.FC<React.PropsWithChildren<CardContainerProps>> = ({\n  children,\n  className = 'mx-cmn-mini-widget',\n  closeLabel,\n  contentStyles,\n  onClose,\n  onPrimaryCtaClick,\n  primaryCtaLabel = '',\n  primaryCtaLabelAria = '',\n  subTitle = '',\n  sx = {},\n  title = '',\n  titleAria,\n  summaryAria,\n}) => {\n  const [containerRef, { height, width }] = useDimensions()\n  const titleId = React.useId()\n  const summaryId = React.useId()\n  const hasVisibleTitle = Boolean(title)\n\n  // aria-labelledby wins when a title is visible (name = title [+ summary]);\n  // otherwise fall back to a plain aria-label.\n  const labelledBy = hasVisibleTitle\n    ? [titleId, summaryAria && summaryId].filter(Boolean).join(' ')\n    : undefined\n\n  return (\n    <Card\n      aria-label={\n        hasVisibleTitle\n          ? undefined\n          : [titleAria, summaryAria].filter(Boolean).join(', ') || undefined\n      }\n      aria-labelledby={labelledBy}\n      className={className}\n      component=\"section\"\n      sx={{ touchAction: 'manipulation', ...sx }}\n    >\n      {summaryAria && (\n        // aria-hidden keeps this out of the browse cursor as a standalone stop;\n        // aria-labelledby still pulls the text into the region's accessible name.\n        <Box\n          aria-hidden=\"true\"\n          id={summaryId}\n          sx={{\n            position: 'absolute',\n            width: '1px',\n            height: '1px',\n            padding: 0,\n            margin: '-1px',\n            overflow: 'hidden',\n            clip: 'rect(0 0 0 0)',\n            clipPath: 'inset(50%)',\n            whiteSpace: 'nowrap',\n            border: 0,\n          }}\n        >\n          {summaryAria}\n        </Box>\n      )}\n      <CardHeader\n        sx={{ pb: 8 }}\n        title={\n          <>\n            <Box\n              sx={{\n                alignItems: 'center',\n                display: 'grid',\n                gap: 2,\n                gridTemplateColumns: '1fr auto',\n                pb: 4,\n              }}\n            >\n              {title && <H3 id={titleId}>{title}</H3>}\n\n              {onClose ? (\n                <IconButton aria-label={closeLabel} onClick={onClose} size=\"small\">\n                  <Icon name=\"close\" size={24} />\n                </IconButton>\n              ) : (\n                onPrimaryCtaClick && (\n                  <Button\n                    aria-label={primaryCtaLabelAria}\n                    endIcon={<ChevronRight />}\n                    onClick={onPrimaryCtaClick}\n                    size=\"small\"\n                  >\n                    <Text bold={true} variant=\"body2\">\n                      {primaryCtaLabel}\n                    </Text>\n                  </Button>\n                )\n              )}\n            </Box>\n\n            {subTitle && (\n              <P color=\"text.secondary\" sx={{ fontSize: 15, lineHeight: '20px' }} variant=\"body2\">\n                {subTitle}\n              </P>\n            )}\n          </>\n        }\n      />\n\n      <CardContent ref={containerRef} sx={{ p: 0, ...contentStyles }}>\n        <WidgetContainerProvider availableHeight={height} availableWidth={width}>\n          {children}\n        </WidgetContainerProvider>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport default MiniWidgetContainer\n"],"mappings":"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"}

package/package.json

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