@mx-cartographer/experiences 9.4.62 → 9.4.63

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [9.4.63] - 10-07-2026
+
+- **FIXED** - Trends Tabular View child category rows now open the filtered transaction drawer, matching the chart view MEW-4020
+
 ## [9.4.62] - 10-07-2026
 
 - **ADDED** - `withdrawal_block` (Highlight Withdrawal) component block and `WithdrawalCard`: the amount (shown with a leading minus unless it is zero), an `"{amount_label} {withdrawal_date}"` date line and a grey balance footer, read from one `instance_slot.data_series` row (`amount`, `amount_label`, `withdrawal_date`, `balance`, `balance_label`). Text arrives localized from the backend; only `amount` and `balance` are formatted. (WEC-1871)

package/dist/core/stores/TrendsStore.d.ts

@@ -7,6 +7,20 @@ export declare class TrendsStore {
     visibleListLength: number;
     constructor(globalStore: GlobalStore);
     setSelectedCategoryData: (data: DetailedCategoryWithTransactions | null) => void;
+    /**
+     * Resolve a category guid — top level or sub-category — to the data the
+     * category details drawer renders.
+     *
+     * `detailedCategoriesWithTransactions` only holds top-level categories, and a
+     * sub-category carries `totalAmount: 0` / `totalMonthlyAmounts: []` so it is
+     * not double counted inside its parent. The drawer reads both fields, so a
+     * sub-category is rebuilt from its own range total and monthly series.
+     *
+     * The tabular view only routes sub-category guids here today; the top-level
+     * branch keeps this a complete resolver for any guid the drawer is given.
+     * @param guid - Guid of the category to resolve
+     */
+    getCategoryWithTransactions: (guid: string) => DetailedCategoryWithTransactions | undefined;
     setSelectedDateRange: (dateRange: DateRange) => void;
     setVisibleListLength: (length: number) => void;
     get sortedDetailedCategoriesWithTransactions(): DetailedCategoryWithTransactions[];

package/dist/core/stores/TrendsStore.es.js

@@ -1,47 +1,60 @@
-import { DATE_FORMATS_INTL as a, formatDate as s } from "../constants/DateFormats.es.js";
-import { buildCategoryDetailsChartData as i, filterAndSortCategoriesWithTransactions as o } from "../utils/TrendsUtil.es.js";
-import { endOfMonth as r } from "date-fns/endOfMonth";
-import { isBefore as n } from "date-fns/isBefore";
-import { subMonths as l } from "date-fns/subMonths";
-import { differenceInCalendarMonths as d } from "date-fns/differenceInCalendarMonths";
-import { makeAutoObservable as g } from "mobx";
-import { addSeconds as c } from "date-fns/addSeconds";
-var R = class {
+import { DATE_FORMATS_INTL as o, formatDate as r } from "../constants/DateFormats.es.js";
+import { findDetailedSubCategory as d, getDetailedCategoryTransactions as c } from "../utils/CategoryUtil.es.js";
+import { buildCategoryDetailsChartData as h, filterAndSortCategoriesWithTransactions as D } from "../utils/TrendsUtil.es.js";
+import { endOfMonth as i } from "date-fns/endOfMonth";
+import { isBefore as u } from "date-fns/isBefore";
+import { subMonths as m } from "date-fns/subMonths";
+import { differenceInCalendarMonths as C } from "date-fns/differenceInCalendarMonths";
+import { makeAutoObservable as S } from "mobx";
+import { addSeconds as b } from "date-fns/addSeconds";
+var W = class {
   globalStore;
   selectedCategoryData = null;
   selectedDateRange;
   visibleListLength = 5;
-  constructor(e) {
-    this.globalStore = e, this.selectedDateRange = {
-      start: c(r(l(/* @__PURE__ */ new Date(), 6)), 1),
-      end: r(/* @__PURE__ */ new Date())
-    }, g(this);
-  }
-  setSelectedCategoryData = (e) => {
-    this.selectedCategoryData = e;
+  constructor(t) {
+    this.globalStore = t, this.selectedDateRange = {
+      start: b(i(m(/* @__PURE__ */ new Date(), 6)), 1),
+      end: i(/* @__PURE__ */ new Date())
+    }, S(this);
+  }
+  setSelectedCategoryData = (t) => {
+    this.selectedCategoryData = t;
+  };
+  getCategoryWithTransactions = (t) => {
+    const { detailedCategories: e, detailedCategoriesWithTransactions: n } = this.globalStore.categoryStore, s = n.find((g) => g.guid === t);
+    if (s) return s;
+    const a = d(e, t);
+    if (!a) return;
+    const [l] = c([{
+      ...a,
+      totalAmount: a.currentAmount,
+      totalMonthlyAmounts: a.monthlyAmounts
+    }], this.globalStore.transactionStore.sortedTransactions);
+    return l;
   };
-  setSelectedDateRange = (e) => {
-    this.selectedDateRange = e;
+  setSelectedDateRange = (t) => {
+    this.selectedDateRange = t;
   };
-  setVisibleListLength = (e) => {
-    this.visibleListLength = e;
+  setVisibleListLength = (t) => {
+    this.visibleListLength = t;
   };
   get sortedDetailedCategoriesWithTransactions() {
-    return o(this.globalStore.categoryStore.detailedCategoriesWithTransactions);
+    return D(this.globalStore.categoryStore.detailedCategoriesWithTransactions);
   }
   get isTransactionStoreIdle() {
-    const { isTransactionDataLoaded: e, transactionsLoading: t } = this.globalStore.transactionStore;
-    return e && !t;
+    const { isTransactionDataLoaded: t, transactionsLoading: e } = this.globalStore.transactionStore;
+    return t && !e;
   }
   get isSelectedRangeLoaded() {
-    const { isTransactionDataLoaded: e, cachedStartDate: t } = this.globalStore.transactionStore;
-    return e && !n(this.selectedDateRange.start, t);
+    const { isTransactionDataLoaded: t, cachedStartDate: e } = this.globalStore.transactionStore;
+    return t && !u(this.selectedDateRange.start, e);
   }
   get selectedDateRangeMonthCount() {
-    return d(this.selectedDateRange.end, this.selectedDateRange.start) + 1;
+    return C(this.selectedDateRange.end, this.selectedDateRange.start) + 1;
   }
   get selectedDateRangeMonthRange() {
-    return `${s(this.selectedDateRange.start, a.MONTH_LONG)} - ${s(this.selectedDateRange.end, a.MONTH_LONG)}`;
+    return `${r(this.selectedDateRange.start, o.MONTH_LONG)} - ${r(this.selectedDateRange.end, o.MONTH_LONG)}`;
   }
   get visibleCategories() {
     return this.sortedDetailedCategoriesWithTransactions.slice(0, this.visibleListLength);
@@ -50,11 +63,11 @@ var R = class {
     return this.sortedDetailedCategoriesWithTransactions.slice(this.visibleListLength);
   }
   get categoryDetailsChartData() {
-    return i(this.selectedCategoryData, this.selectedDateRangeMonthCount);
+    return h(this.selectedCategoryData, this.selectedDateRangeMonthCount);
   }
 };
 export {
-  R as TrendsStore
+  W as TrendsStore
 };
 
 //# sourceMappingURL=TrendsStore.es.js.map

package/dist/core/stores/TrendsStore.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsStore.es.js","names":[],"sources":["../../../src/core/stores/TrendsStore.ts"],"sourcesContent":["import { makeAutoObservable } from 'mobx'\nimport { addSeconds } from 'date-fns/addSeconds'\nimport { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { isBefore } from 'date-fns/isBefore'\nimport { subMonths } from 'date-fns/subMonths'\n\nimport type { DateRange, DetailedCategoryWithTransactions } from '../types'\nimport { DATE_FORMATS_INTL, formatDate } from '../constants'\nimport {\n  buildCategoryDetailsChartData,\n  filterAndSortCategoriesWithTransactions,\n} from '../utils/TrendsUtil'\n\nimport { GlobalStore } from './GlobalStore'\n\nexport class TrendsStore {\n  globalStore: GlobalStore\n  selectedCategoryData: DetailedCategoryWithTransactions | null = null\n  selectedDateRange: DateRange\n  visibleListLength: number = 5\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n    this.selectedDateRange = {\n      start: addSeconds(endOfMonth(subMonths(new Date(), 6)), 1),\n      end: endOfMonth(new Date()),\n    }\n    makeAutoObservable(this)\n  }\n\n  setSelectedCategoryData = (data: DetailedCategoryWithTransactions | null) => {\n    this.selectedCategoryData = data\n  }\n\n  setSelectedDateRange = (dateRange: DateRange) => {\n    this.selectedDateRange = dateRange\n  }\n\n  setVisibleListLength = (length: number) => {\n    this.visibleListLength = length\n  }\n\n  get sortedDetailedCategoriesWithTransactions(): DetailedCategoryWithTransactions[] {\n    return filterAndSortCategoriesWithTransactions(\n      this.globalStore.categoryStore.detailedCategoriesWithTransactions,\n    )\n  }\n\n  get isTransactionStoreIdle(): boolean {\n    const { isTransactionDataLoaded, transactionsLoading } = this.globalStore.transactionStore\n    return isTransactionDataLoaded && !transactionsLoading\n  }\n\n  get isSelectedRangeLoaded(): boolean {\n    const { isTransactionDataLoaded, cachedStartDate } = this.globalStore.transactionStore\n    return isTransactionDataLoaded && !isBefore(this.selectedDateRange.start, cachedStartDate)\n  }\n\n  get selectedDateRangeMonthCount(): number {\n    return differenceInCalendarMonths(this.selectedDateRange.end, this.selectedDateRange.start) + 1\n  }\n\n  get selectedDateRangeMonthRange(): string {\n    const startMonth = formatDate(this.selectedDateRange.start, DATE_FORMATS_INTL.MONTH_LONG)\n    const endMonth = formatDate(this.selectedDateRange.end, DATE_FORMATS_INTL.MONTH_LONG)\n    return `${startMonth} - ${endMonth}`\n  }\n\n  get visibleCategories(): DetailedCategoryWithTransactions[] {\n    return this.sortedDetailedCategoriesWithTransactions.slice(0, this.visibleListLength)\n  }\n\n  get collapsedCategories(): DetailedCategoryWithTransactions[] {\n    return this.sortedDetailedCategoriesWithTransactions.slice(this.visibleListLength)\n  }\n\n  get categoryDetailsChartData() {\n    return buildCategoryDetailsChartData(\n      this.selectedCategoryData,\n      this.selectedDateRangeMonthCount,\n    )\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,IAAa,IAAb,MAAyB;AAAA,EACvB;AAAA,EACA,uBAAgE;AAAA,EAChE;AAAA,EACA,oBAA4B;AAAA,EAE5B,YAAY,GAA0B;AACpC,SAAK,cAAc,GACnB,KAAK,oBAAoB;AAAA,MACvB,OAAO,EAAW,EAAW,EAAU,oBAAI,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC;AAAA,MACzD,KAAK,EAAW,oBAAI,KAAK,CAAC;AAAA,IAC5B,GACA,EAAmB,IAAI;AAAA,EACzB;AAAA,EAEA,0BAAA,CAA2B,MAAkD;AAC3E,SAAK,uBAAuB;AAAA,EAC9B;AAAA,EAEA,uBAAA,CAAwB,MAAyB;AAC/C,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,uBAAA,CAAwB,MAAmB;AACzC,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,IAAI,2CAA+E;AACjF,WAAO,EACL,KAAK,YAAY,cAAc,kCACjC;AAAA,EACF;AAAA,EAEA,IAAI,yBAAkC;AACpC,UAAM,EAAE,yBAAA,GAAyB,qBAAA,EAAA,IAAwB,KAAK,YAAY;AAC1E,WAAO,KAA2B,CAAC;AAAA,EACrC;AAAA,EAEA,IAAI,wBAAiC;AACnC,UAAM,EAAE,yBAAA,GAAyB,iBAAA,EAAA,IAAoB,KAAK,YAAY;AACtE,WAAO,KAA2B,CAAC,EAAS,KAAK,kBAAkB,OAAO,CAAe;AAAA,EAC3F;AAAA,EAEA,IAAI,8BAAsC;AACxC,WAAO,EAA2B,KAAK,kBAAkB,KAAK,KAAK,kBAAkB,KAAK,IAAI;AAAA,EAChG;AAAA,EAEA,IAAI,8BAAsC;AAGxC,WAAO,GAFY,EAAW,KAAK,kBAAkB,OAAO,EAAkB,UAEpE,CAAA,MADO,EAAW,KAAK,kBAAkB,KAAK,EAAkB,UAChD,CAAA;AAAA,EAC5B;AAAA,EAEA,IAAI,oBAAwD;AAC1D,WAAO,KAAK,yCAAyC,MAAM,GAAG,KAAK,iBAAiB;AAAA,EACtF;AAAA,EAEA,IAAI,sBAA0D;AAC5D,WAAO,KAAK,yCAAyC,MAAM,KAAK,iBAAiB;AAAA,EACnF;AAAA,EAEA,IAAI,2BAA2B;AAC7B,WAAO,EACL,KAAK,sBACL,KAAK,2BACP;AAAA,EACF;AACF"}
+{"version":3,"file":"TrendsStore.es.js","names":[],"sources":["../../../src/core/stores/TrendsStore.ts"],"sourcesContent":["import { makeAutoObservable } from 'mobx'\nimport { addSeconds } from 'date-fns/addSeconds'\nimport { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { isBefore } from 'date-fns/isBefore'\nimport { subMonths } from 'date-fns/subMonths'\n\nimport type { DateRange, DetailedCategoryWithTransactions } from '../types'\nimport { DATE_FORMATS_INTL, formatDate } from '../constants'\nimport {\n  buildCategoryDetailsChartData,\n  filterAndSortCategoriesWithTransactions,\n} from '../utils/TrendsUtil'\nimport { findDetailedSubCategory, getDetailedCategoryTransactions } from '../utils/CategoryUtil'\n\nimport { GlobalStore } from './GlobalStore'\n\nexport class TrendsStore {\n  globalStore: GlobalStore\n  selectedCategoryData: DetailedCategoryWithTransactions | null = null\n  selectedDateRange: DateRange\n  visibleListLength: number = 5\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n    this.selectedDateRange = {\n      start: addSeconds(endOfMonth(subMonths(new Date(), 6)), 1),\n      end: endOfMonth(new Date()),\n    }\n    makeAutoObservable(this)\n  }\n\n  setSelectedCategoryData = (data: DetailedCategoryWithTransactions | null) => {\n    this.selectedCategoryData = data\n  }\n\n  /**\n   * Resolve a category guid — top level or sub-category — to the data the\n   * category details drawer renders.\n   *\n   * `detailedCategoriesWithTransactions` only holds top-level categories, and a\n   * sub-category carries `totalAmount: 0` / `totalMonthlyAmounts: []` so it is\n   * not double counted inside its parent. The drawer reads both fields, so a\n   * sub-category is rebuilt from its own range total and monthly series.\n   *\n   * The tabular view only routes sub-category guids here today; the top-level\n   * branch keeps this a complete resolver for any guid the drawer is given.\n   * @param guid - Guid of the category to resolve\n   */\n  getCategoryWithTransactions = (guid: string): DetailedCategoryWithTransactions | undefined => {\n    const { detailedCategories, detailedCategoriesWithTransactions } =\n      this.globalStore.categoryStore\n\n    const topLevelCategory = detailedCategoriesWithTransactions.find(\n      (category) => category.guid === guid,\n    )\n    if (topLevelCategory) return topLevelCategory\n\n    const subCategory = findDetailedSubCategory(detailedCategories, guid)\n    if (!subCategory) return undefined\n\n    const [subCategoryWithTransactions] = getDetailedCategoryTransactions(\n      [\n        {\n          ...subCategory,\n          totalAmount: subCategory.currentAmount,\n          totalMonthlyAmounts: subCategory.monthlyAmounts,\n        },\n      ],\n      this.globalStore.transactionStore.sortedTransactions,\n    )\n\n    return subCategoryWithTransactions\n  }\n\n  setSelectedDateRange = (dateRange: DateRange) => {\n    this.selectedDateRange = dateRange\n  }\n\n  setVisibleListLength = (length: number) => {\n    this.visibleListLength = length\n  }\n\n  get sortedDetailedCategoriesWithTransactions(): DetailedCategoryWithTransactions[] {\n    return filterAndSortCategoriesWithTransactions(\n      this.globalStore.categoryStore.detailedCategoriesWithTransactions,\n    )\n  }\n\n  get isTransactionStoreIdle(): boolean {\n    const { isTransactionDataLoaded, transactionsLoading } = this.globalStore.transactionStore\n    return isTransactionDataLoaded && !transactionsLoading\n  }\n\n  get isSelectedRangeLoaded(): boolean {\n    const { isTransactionDataLoaded, cachedStartDate } = this.globalStore.transactionStore\n    return isTransactionDataLoaded && !isBefore(this.selectedDateRange.start, cachedStartDate)\n  }\n\n  get selectedDateRangeMonthCount(): number {\n    return differenceInCalendarMonths(this.selectedDateRange.end, this.selectedDateRange.start) + 1\n  }\n\n  get selectedDateRangeMonthRange(): string {\n    const startMonth = formatDate(this.selectedDateRange.start, DATE_FORMATS_INTL.MONTH_LONG)\n    const endMonth = formatDate(this.selectedDateRange.end, DATE_FORMATS_INTL.MONTH_LONG)\n    return `${startMonth} - ${endMonth}`\n  }\n\n  get visibleCategories(): DetailedCategoryWithTransactions[] {\n    return this.sortedDetailedCategoriesWithTransactions.slice(0, this.visibleListLength)\n  }\n\n  get collapsedCategories(): DetailedCategoryWithTransactions[] {\n    return this.sortedDetailedCategoriesWithTransactions.slice(this.visibleListLength)\n  }\n\n  get categoryDetailsChartData() {\n    return buildCategoryDetailsChartData(\n      this.selectedCategoryData,\n      this.selectedDateRangeMonthCount,\n    )\n  }\n}\n"],"mappings":";;;;;;;;;AAiBA,IAAa,IAAb,MAAyB;AAAA,EACvB;AAAA,EACA,uBAAgE;AAAA,EAChE;AAAA,EACA,oBAA4B;AAAA,EAE5B,YAAY,GAA0B;AACpC,SAAK,cAAc,GACnB,KAAK,oBAAoB;AAAA,MACvB,OAAO,EAAW,EAAW,EAAU,oBAAI,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC;AAAA,MACzD,KAAK,EAAW,oBAAI,KAAK,CAAC;AAAA,IAC5B,GACA,EAAmB,IAAI;AAAA,EACzB;AAAA,EAEA,0BAAA,CAA2B,MAAkD;AAC3E,SAAK,uBAAuB;AAAA,EAC9B;AAAA,EAeA,8BAAA,CAA+B,MAA+D;AAC5F,UAAM,EAAE,oBAAA,GAAoB,oCAAA,EAAA,IAC1B,KAAK,YAAY,eAEb,IAAmB,EAAmC,KAAA,CACzD,MAAa,EAAS,SAAS,CAClC;AACA,QAAI,EAAkB,QAAO;AAE7B,UAAM,IAAc,EAAwB,GAAoB,CAAI;AACpE,QAAI,CAAC,EAAa;AAElB,UAAM,CAAC,CAAA,IAA+B,EACpC,CACE;AAAA,MACE,GAAG;AAAA,MACH,aAAa,EAAY;AAAA,MACzB,qBAAqB,EAAY;AAAA,IACnC,CACF,GACA,KAAK,YAAY,iBAAiB,kBACpC;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,uBAAA,CAAwB,MAAyB;AAC/C,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,uBAAA,CAAwB,MAAmB;AACzC,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,IAAI,2CAA+E;AACjF,WAAO,EACL,KAAK,YAAY,cAAc,kCACjC;AAAA,EACF;AAAA,EAEA,IAAI,yBAAkC;AACpC,UAAM,EAAE,yBAAA,GAAyB,qBAAA,EAAA,IAAwB,KAAK,YAAY;AAC1E,WAAO,KAA2B,CAAC;AAAA,EACrC;AAAA,EAEA,IAAI,wBAAiC;AACnC,UAAM,EAAE,yBAAA,GAAyB,iBAAA,EAAA,IAAoB,KAAK,YAAY;AACtE,WAAO,KAA2B,CAAC,EAAS,KAAK,kBAAkB,OAAO,CAAe;AAAA,EAC3F;AAAA,EAEA,IAAI,8BAAsC;AACxC,WAAO,EAA2B,KAAK,kBAAkB,KAAK,KAAK,kBAAkB,KAAK,IAAI;AAAA,EAChG;AAAA,EAEA,IAAI,8BAAsC;AAGxC,WAAO,GAFY,EAAW,KAAK,kBAAkB,OAAO,EAAkB,UAEpE,CAAA,MADO,EAAW,KAAK,kBAAkB,KAAK,EAAkB,UAChD,CAAA;AAAA,EAC5B;AAAA,EAEA,IAAI,oBAAwD;AAC1D,WAAO,KAAK,yCAAyC,MAAM,GAAG,KAAK,iBAAiB;AAAA,EACtF;AAAA,EAEA,IAAI,sBAA0D;AAC5D,WAAO,KAAK,yCAAyC,MAAM,KAAK,iBAAiB;AAAA,EACnF;AAAA,EAEA,IAAI,2BAA2B;AAC7B,WAAO,EACL,KAAK,sBACL,KAAK,2BACP;AAAA,EACF;AACF"}

package/dist/trends/TrendsWidget.es.js

@@ -1,137 +1,142 @@
-import { useAccountStore as Ee, useAppConfig as ye, useCategoryStore as we, useEvent as De, useGlobalCopyStore as Le, useGlobalStore as be, useGlobalUiStore as Ie, useTransactionStore as Ae, useTrendsStore as Re } from "../common/context/hooks.es.js";
-import { useInsightsEnabled as ve } from "../common/hooks/useInsightsEnabled.es.js";
-import { useScreenSize as xe } from "../common/hooks/useScreenSize.es.js";
-import { useWidgetLoadTimer as Ne } from "../common/hooks/useWidgetLoadTimer.es.js";
-import Be from "../common/components/drawer/Drawer.es.js";
+import { useAccountStore as we, useAppConfig as De, useCategoryStore as Le, useEvent as be, useGlobalCopyStore as Ie, useGlobalStore as Ae, useGlobalUiStore as Re, useTransactionStore as xe, useTrendsStore as ve } from "../common/context/hooks.es.js";
+import { useInsightsEnabled as Ne } from "../common/hooks/useInsightsEnabled.es.js";
+import { useScreenSize as We } from "../common/hooks/useScreenSize.es.js";
+import { useWidgetLoadTimer as Be } from "../common/hooks/useWidgetLoadTimer.es.js";
+import ke from "../common/components/drawer/Drawer.es.js";
 import { ANALYTICS_EVENTS as c } from "../common/constants/Analytics.es.js";
-import We from "../common/components/Loader.es.js";
-import { WidgetContainer as ke } from "../common/components/WidgetContainer.es.js";
-import He from "../common/components/ConnectDrawer.es.js";
-import { EmptyState as Ge } from "../common/components/EmptyState.es.js";
+import He from "../common/components/Loader.es.js";
+import { WidgetContainer as Ge } from "../common/components/WidgetContainer.es.js";
+import Fe from "../common/components/ConnectDrawer.es.js";
+import { EmptyState as Me } from "../common/components/EmptyState.es.js";
 import { TRENDS_ANALYTICS_METADATA as m } from "./constants/TrendsWidget.es.js";
-import Fe from "./components/TrendsViewToggle.es.js";
-import Me from "./components/DateRangeText.es.js";
-import Oe from "./components/TrendsTableContainer.es.js";
-import Ve from "./components/CategoriesList.es.js";
-import ze from "./components/TrendsInsights.es.js";
-import { CategoryDetails as Ke } from "./components/CategoryDetails.es.js";
-import je from "./components/TrendsChartTotals.es.js";
-import { TRENDS_BEAT_TEMPLATES as Pe } from "./constants/TrendsInsights.es.js";
-import { buildEmptyStateProps as Ue } from "./utils/TrendsWidget.es.js";
-import o from "react";
-import { observer as Ye } from "mobx-react-lite";
+import Oe from "./components/TrendsViewToggle.es.js";
+import Ve from "./components/DateRangeText.es.js";
+import ze from "./components/TrendsTableContainer.es.js";
+import Ke from "./components/CategoriesList.es.js";
+import je from "./components/TrendsInsights.es.js";
+import { CategoryDetails as Pe } from "./components/CategoryDetails.es.js";
+import $e from "./components/TrendsChartTotals.es.js";
+import { TRENDS_BEAT_TEMPLATES as Ue } from "./constants/TrendsInsights.es.js";
+import { buildEmptyStateProps as Ye } from "./utils/TrendsWidget.es.js";
+import n from "react";
+import { observer as qe } from "mobx-react-lite";
 import f from "@mui/material/Stack";
-import $e from "@mui/material/Button";
-import { ArrowBack as qe } from "@mxenabled/mx-icons";
-import { Fragment as Je, jsx as t, jsxs as l } from "react/jsx-runtime";
+import Je from "@mui/material/Button";
+import { ArrowBack as Qe } from "@mxenabled/mx-icons";
+import { Fragment as Xe, jsx as t, jsxs as l } from "react/jsx-runtime";
 import w from "@mui/material/Box";
-import { differenceInCalendarMonths as F } from "date-fns/differenceInCalendarMonths";
-import { addSeconds as Qe } from "date-fns/addSeconds";
-var Xe = ({ onBackClick: M, onMenuClick: O, onInsightCardClick: V, sx: z }) => {
-  const { onEvent: s } = De(), { config: D } = ye(), { isDesktop: K, isLargeDesktop: j, isMobile: C } = xe(), { isAccountDataLoaded: u, loadAccountData: P, visibleAccounts: U } = Ee(), { categoriesLoaded: Y, loadCategories: $, monthlyCategoryTotals: a, monthlyTotalsLoaded: q, reloadCategoryTotals: J } = we(), { isTransactionDataLoaded: Q, loadTransactionData: X, setFilter: Z } = Ae(), { isTransactionStoreIdle: L, selectedCategoryData: T, selectedDateRange: n, setSelectedCategoryData: b, setSelectedDateRange: ee } = Re(), { isInitialized: _, selectedAccounts: te, selectedAccountGuids: I } = Ie(), { trends: d, connect: oe } = Le(), { beatStore: A } = be(), R = ve() && D.show_insights_widget_in_master, g = K || j, [v, ne] = o.useState(!1), [S, ie] = o.useState(!1), [h, re] = o.useState("Chart"), [E, x] = o.useState(""), [N, se] = o.useState(window.innerHeight), ae = g ? 56 : 0, B = N - 208, ce = N - (R ? 550 + ae : 266), [le, W] = o.useState(!1), de = D.show_connections_widget_in_master, y = o.useRef(void 0), me = o.useCallback((e) => {
-    if (y.current?.(), y.current = void 0, !e) return;
-    const i = (r) => {
-      r.target instanceof HTMLElement && r.target.matches(":focus-visible") && r.target.scrollIntoView({ block: "nearest" });
+import { differenceInCalendarMonths as M } from "date-fns/differenceInCalendarMonths";
+import { addSeconds as Ze } from "date-fns/addSeconds";
+var et = ({ onBackClick: O, onMenuClick: V, onInsightCardClick: z, sx: K }) => {
+  const { onEvent: s } = be(), { config: D } = De(), { isDesktop: j, isLargeDesktop: P, isMobile: T } = We(), { isAccountDataLoaded: u, loadAccountData: $, visibleAccounts: U } = we(), { categoriesLoaded: Y, loadCategories: q, monthlyCategoryTotals: a, monthlyTotalsLoaded: J, reloadCategoryTotals: Q } = Le(), { isTransactionDataLoaded: X, loadTransactionData: Z, setFilter: ee } = xe(), { getCategoryWithTransactions: te, isTransactionStoreIdle: L, selectedCategoryData: _, selectedDateRange: r, setSelectedCategoryData: b, setSelectedDateRange: oe } = ve(), { isInitialized: S, selectedAccounts: ne, selectedAccountGuids: I } = Re(), { trends: d, connect: re } = Ie(), { beatStore: A, captureException: ie } = Ae(), R = Ne() && D.show_insights_widget_in_master, g = j || P, [x, se] = n.useState(!1), [y, ae] = n.useState(!1), [p, ce] = n.useState("Chart"), [h, v] = n.useState(""), [N, le] = n.useState(window.innerHeight), de = g ? 56 : 0, W = N - 208, me = N - (R ? 550 + de : 266), [ge, B] = n.useState(!1), fe = D.show_connections_widget_in_master, E = n.useRef(void 0), ue = n.useCallback((e) => {
+    if (E.current?.(), E.current = void 0, !e) return;
+    const o = (i) => {
+      i.target instanceof HTMLElement && i.target.matches(":focus-visible") && i.target.scrollIntoView({ block: "nearest" });
     };
-    e.addEventListener("focusin", i), y.current = () => e.removeEventListener("focusin", i);
+    e.addEventListener("focusin", o), E.current = () => e.removeEventListener("focusin", o);
   }, []);
-  Ne({
+  Be({
     widgetName: "TrendsWidget",
-    isLoaded: v
+    isLoaded: x
   });
-  const k = o.useMemo(() => S ? A.getFilteredBeats({ templates: Pe }) : [], [S]);
-  o.useEffect(() => {
-    const e = () => se(window.innerHeight);
-    return window.addEventListener("resize", e), u || P().finally(), Y || $().finally(), Q || X().finally(), () => window.removeEventListener("resize", e);
-  }, []), o.useEffect(() => {
-    _ && u && (A.loadBeats().finally(() => ie(!0)), J(te, n.start, n.end).finally(() => {
-      ne(!0), s(c.TRENDS_LOAD_WIDGET, {
+  const k = n.useMemo(() => y ? A.getFilteredBeats({ templates: Ue }) : [], [y]);
+  n.useEffect(() => {
+    const e = () => le(window.innerHeight);
+    return window.addEventListener("resize", e), u || $().finally(), Y || q().finally(), X || Z().finally(), () => window.removeEventListener("resize", e);
+  }, []), n.useEffect(() => {
+    S && u && (A.loadBeats().finally(() => ae(!0)), Q(ne, r.start, r.end).finally(() => {
+      se(!0), s(c.TRENDS_LOAD_WIDGET, {
         ...m,
-        time_period: `${F(n.end, n.start)}M`
+        time_period: `${M(r.end, r.start)}M`
       });
     }));
   }, [
-    _,
+    S,
     u,
     I.join(","),
-    n.start.getTime(),
-    n.end.getTime()
+    r.start.getTime(),
+    r.end.getTime()
   ]);
-  const H = o.useRef(null);
-  o.useEffect(() => {
+  const H = n.useRef(null);
+  n.useEffect(() => {
     if (a.length !== 0 && L && H.current !== a) {
       H.current = a;
       const e = {
         accounts: I,
         dateRange: {
-          start: n.start,
-          end: n.end
+          start: r.start,
+          end: r.end
         }
       };
-      Z({
+      ee({
         ...e,
-        custom: (i) => !!a.find((r) => r.top_level_category_guid === i.top_level_category_guid || r.category_guid === i.category_guid)
+        custom: (o) => !!a.find((i) => i.top_level_category_guid === o.top_level_category_guid || i.category_guid === o.category_guid)
       });
     }
   }, [a, L]);
-  const ge = (e) => {
+  const G = (e) => {
     b(e);
-  }, fe = () => {
+  }, pe = () => {
     b(null), s(c.TRENDS_CLICK_BACK, m);
-  }, ue = () => {
-    W(!0), s(c.TRENDS_CLICK_CONNECT_ACCOUNTS);
-  }, he = (e, i) => {
-    re(i ?? h), s(c.TRENDS_CLICK_TOGGLE_VIEW, {
+  }, he = () => {
+    B(!0), s(c.TRENDS_CLICK_CONNECT_ACCOUNTS);
+  }, Ce = (e, o) => {
+    ce(o ?? p), s(c.TRENDS_CLICK_TOGGLE_VIEW, {
       ...m,
-      toggleView: i
+      toggleView: o
     });
-  }, pe = (e) => {
-    const i = Qe(e?.[0], 1), r = e?.[1], Se = F(r, i);
-    ee({
-      start: i,
-      end: r
+  }, Te = (e) => {
+    const o = Ze(e?.[0], 1), i = e?.[1], Ee = M(i, o);
+    oe({
+      start: o,
+      end: i
     }), s(c.TRENDS_CLICK_TIME_WINDOW, {
       ...m,
-      time_period: Se + "M"
+      time_period: Ee + "M"
     });
-  }, Ce = (e) => {
+  }, _e = (e) => {
     s(c.TRENDS_CLICK_FILTER, {
       ...m,
       filterValue: e
     });
-  }, Te = (e) => {
-    x(e);
-  }, _e = () => {
-    x(""), s(c.TRENDS_CLICK_ALL_CATEGORIES, m);
+  }, Se = (e) => {
+    if (!h) {
+      v(e);
+      return;
+    }
+    const o = te(e);
+    o ? G(o) : ie(/* @__PURE__ */ new Error(`TrendsWidget: no category found for guid ${e}`));
+  }, ye = () => {
+    v(""), s(c.TRENDS_CLICK_ALL_CATEGORIES, m);
   };
-  if (!_ || !u || !v || !q) return /* @__PURE__ */ t(We, {});
-  const G = U.length === 0 || a.length === 0, p = Ue(d, de, ue);
-  return /* @__PURE__ */ l(ke, {
-    calendarActions: { onRangeChanged: pe },
-    dateRange: n,
-    dateRangeVariant: C ? "timeframetabs" : "timeframebuttons",
-    onAccountsFilterClick: Ce,
-    onBackClick: M,
-    onMenuClick: O,
-    sx: z,
+  if (!S || !u || !x || !J) return /* @__PURE__ */ t(He, {});
+  const F = U.length === 0 || a.length === 0, C = Ye(d, fe, he);
+  return /* @__PURE__ */ l(Ge, {
+    calendarActions: { onRangeChanged: Te },
+    dateRange: r,
+    dateRangeVariant: T ? "timeframetabs" : "timeframebuttons",
+    onAccountsFilterClick: _e,
+    onBackClick: O,
+    onMenuClick: V,
+    sx: K,
     title: d.title,
     children: [/* @__PURE__ */ l(f, {
-      ref: me,
-      sx: { px: C ? 0 : 48 },
+      ref: ue,
+      sx: { px: T ? 0 : 48 },
       children: [
         /* @__PURE__ */ l(f, {
           flexDirection: "row",
           justifyContent: "space-between",
           sx: {
-            px: C ? 16 : 0,
+            px: T ? 16 : 0,
             py: 16
           },
-          children: [/* @__PURE__ */ t(Me, {
-            selectedCategoryGuid: E,
-            selectedDateRange: n
-          }), /* @__PURE__ */ t(Fe, {
-            onTabChange: he,
-            selectedTab: h
+          children: [/* @__PURE__ */ t(Ve, {
+            selectedCategoryGuid: h,
+            selectedDateRange: r
+          }), /* @__PURE__ */ t(Oe, {
+            onTabChange: Ce,
+            selectedTab: p
           })]
         }),
         /* @__PURE__ */ t(f, {
@@ -141,76 +146,76 @@ var Xe = ({ onBackClick: M, onMenuClick: O, onInsightCardClick: V, sx: z }) => {
           width: "100%",
           children: /* @__PURE__ */ t(w, {
             flexGrow: 1,
-            children: E && /* @__PURE__ */ l($e, {
-              onClick: _e,
+            children: h && /* @__PURE__ */ l(Je, {
+              onClick: ye,
               sx: {
                 p: 0,
                 pr: 5
               },
-              children: [/* @__PURE__ */ t(qe, {}), d.all_categories]
+              children: [/* @__PURE__ */ t(Qe, {}), d.all_categories]
             })
           })
         }),
-        G && /* @__PURE__ */ t(Ge, {
-          header: p.header,
+        F && /* @__PURE__ */ t(Me, {
+          header: C.header,
           icon: "multiline_chart",
-          onClick: p.onClickHandler,
-          primaryButton: p.primaryButton,
-          subText: p.description,
+          onClick: C.onClickHandler,
+          primaryButton: C.primaryButton,
+          subText: C.description,
           sx: {
-            height: B,
+            height: W,
             maxWidth: 432
           }
         }),
-        !G && /* @__PURE__ */ l(f, {
+        !F && /* @__PURE__ */ l(f, {
           flexDirection: g ? "row" : "column",
           gap: g ? 48 : 16,
-          children: [h === "Chart" && /* @__PURE__ */ l(Je, { children: [/* @__PURE__ */ t(w, {
+          children: [p === "Chart" && /* @__PURE__ */ l(Xe, { children: [/* @__PURE__ */ t(w, {
             sx: { width: g ? "68%" : "100%" },
-            children: /* @__PURE__ */ t(je, {
-              availableHeight: B,
+            children: /* @__PURE__ */ t($e, {
+              availableHeight: W,
               minHeight: 450,
-              selectedDateRange: n,
+              selectedDateRange: r,
               totals: a
             })
           }), /* @__PURE__ */ l(f, {
             gap: 16,
             sx: { width: g ? "32%" : "100%" },
-            children: [R && S && k.length > 0 && /* @__PURE__ */ t(ze, {
+            children: [R && y && k.length > 0 && /* @__PURE__ */ t(je, {
               beats: k,
-              onInsightCardClick: V
-            }), /* @__PURE__ */ t(Ve, {
-              availableHeight: ce,
-              onCategoryClick: ge
+              onInsightCardClick: z
+            }), /* @__PURE__ */ t(Ke, {
+              availableHeight: me,
+              onCategoryClick: G
             })]
-          })] }), h === "Table" && /* @__PURE__ */ t(w, {
+          })] }), p === "Table" && /* @__PURE__ */ t(w, {
             sx: { width: "100%" },
-            children: /* @__PURE__ */ t(Oe, {
+            children: /* @__PURE__ */ t(ze, {
               height: "unset",
-              onClickRow: Te,
-              selectedCategory: E,
-              selectedDateRange: n
+              onClickRow: Se,
+              selectedCategory: h,
+              selectedDateRange: r
             })
           })]
         }),
-        /* @__PURE__ */ t(Be, {
+        /* @__PURE__ */ t(ke, {
           ariaLabelClose: d.close_category_details,
-          isOpen: !!T,
-          onClose: fe,
+          isOpen: !!_,
+          onClose: pe,
           shouldShowHeaderShadow: !0,
-          title: T?.is_income ? d.category_income : d.category_spending,
-          children: T && /* @__PURE__ */ t(Ke, {})
+          title: _?.is_income ? d.category_income : d.category_spending,
+          children: _ && /* @__PURE__ */ t(Pe, {})
         })
       ]
-    }), /* @__PURE__ */ t(He, {
-      onClose: () => W(!1),
-      showConnectWidget: le,
-      title: oe.mini_title
+    }), /* @__PURE__ */ t(Fe, {
+      onClose: () => B(!1),
+      showConnectWidget: ge,
+      title: re.mini_title
     })]
   });
-}, At = Ye(Xe);
+}, xt = qe(et);
 export {
-  At as default
+  xt as default
 };
 
 //# sourceMappingURL=TrendsWidget.es.js.map

package/dist/trends/TrendsWidget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsWidget.es.js","names":[],"sources":["../../src/trends/TrendsWidget.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport React from 'react'\nimport { addSeconds } from 'date-fns/addSeconds'\nimport { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'\n\nimport { DateRange } from '@mui/x-date-pickers-pro'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\n\nimport { ArrowBack } from '@mxenabled/mx-icons'\n\nimport {\n  ANALYTICS_EVENTS,\n  ConnectDrawer,\n  Drawer,\n  EmptyState,\n  Loader,\n  WidgetContainer,\n  useAccountStore,\n  useAppConfig,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalStore,\n  useGlobalUiStore,\n  useInsightsEnabled,\n  useScreenSize,\n  useTransactionStore,\n  useTrendsStore,\n  useWidgetLoadTimer,\n} from '../common'\nimport { type Beat, type DetailedCategoryWithTransactions, Transaction, WidgetProps } from '../core'\n\nimport DateRangeText from './components/DateRangeText'\nimport TrendsViewToggle, { type TrendsTabValue } from './components/TrendsViewToggle'\nimport TrendsTableContainer from './components/TrendsTableContainer'\nimport CategoriesList from './components/CategoriesList'\nimport InsightsCarousel from './components/TrendsInsights'\nimport { CategoryDetails } from './components/CategoryDetails'\nimport TrendsChartTotals from './components/TrendsChartTotals'\nimport { TRENDS_ANALYTICS_METADATA } from './constants/TrendsWidget'\nimport { TRENDS_BEAT_TEMPLATES } from './constants/TrendsInsights'\nimport { buildEmptyStateProps } from './utils/TrendsWidget'\n\ninterface TrendsWidgetProps extends WidgetProps {\n  onInsightCardClick?: (beat?: Beat) => void\n}\n\nconst TrendsWidget: React.FC<TrendsWidgetProps> = ({\n  onBackClick,\n  onMenuClick,\n  onInsightCardClick,\n  sx,\n}) => {\n  const { onEvent } = useEvent()\n  const { config } = useAppConfig()\n  const { isDesktop, isLargeDesktop, isMobile } = useScreenSize()\n  const { isAccountDataLoaded, loadAccountData, visibleAccounts: accounts } = useAccountStore()\n  const {\n    categoriesLoaded,\n    loadCategories,\n    monthlyCategoryTotals,\n    monthlyTotalsLoaded,\n    reloadCategoryTotals,\n  } = useCategoryStore()\n  const { isTransactionDataLoaded, loadTransactionData, setFilter } = useTransactionStore()\n  const {\n    isTransactionStoreIdle,\n    selectedCategoryData,\n    selectedDateRange,\n    setSelectedCategoryData,\n    setSelectedDateRange,\n  } = useTrendsStore()\n  const { isInitialized, selectedAccounts, selectedAccountGuids } = useGlobalUiStore()\n  const { trends: copy, connect: connectCopy } = useGlobalCopyStore()\n  const { beatStore } = useGlobalStore()\n  const insightsEnabled = useInsightsEnabled()\n\n  // allows clients to disable insights in trends while still enabling insights\n  const showInsights = insightsEnabled && config.show_insights_widget_in_master\n  const isLargeLayout = isDesktop || isLargeDesktop\n\n  const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)\n  const [isBeatsLoaded, setIsBeatsLoaded] = React.useState(false)\n  const [selectedTab, setSelectedTab] = React.useState<TrendsTabValue>('Chart')\n  const [selectedCategory, setSelectedCategory] = React.useState('')\n\n  // Control responsive chart height based on available widget iframe viewport height\n  const [viewportHeight, setViewportHeight] = React.useState(window.innerHeight)\n  const insightsPadding = isLargeLayout ? 56 : 0\n  const availableChartHeight = viewportHeight - 208 // unavailable height on desktop\n  const availableListHeight = viewportHeight - (showInsights ? 550 + insightsPadding : 266)\n\n  const [showConnectWidget, setShowConnectWidget] = React.useState(false)\n  const hasAggregation = config.show_connections_widget_in_master\n\n  // iOS Safari doesn't scroll off-screen elements into view on forward Tab\n  // inside this non-document scroll container. `:focus-visible` limits the\n  // scroll to keyboard focus so pointer clicks on clipped rows don't jump.\n  // `block: 'nearest'` is a no-op when already visible. Callback ref (not\n  // useEffect) because the content mounts after the loading gate.\n  const cleanupFocusScroll = React.useRef<(() => void) | undefined>(undefined)\n  const contentRef = React.useCallback((node: HTMLDivElement | null) => {\n    cleanupFocusScroll.current?.()\n    cleanupFocusScroll.current = undefined\n\n    if (!node) return\n\n    const handleFocusIn = (event: FocusEvent) => {\n      if (event.target instanceof HTMLElement && event.target.matches(':focus-visible')) {\n        event.target.scrollIntoView({ block: 'nearest' })\n      }\n    }\n\n    node.addEventListener('focusin', handleFocusIn)\n    cleanupFocusScroll.current = () => node.removeEventListener('focusin', handleFocusIn)\n  }, [])\n\n  useWidgetLoadTimer({\n    widgetName: 'TrendsWidget',\n    isLoaded: isWidgetInitialized,\n  })\n  const filteredBeats = React.useMemo(() => {\n    if (!isBeatsLoaded) return []\n    return beatStore.getFilteredBeats({ templates: TRENDS_BEAT_TEMPLATES })\n  }, [isBeatsLoaded])\n\n  React.useEffect(() => {\n    // Setup resize listener for responsive chart and list heights\n    const handleResize = () => setViewportHeight(window.innerHeight)\n    window.addEventListener('resize', handleResize)\n\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n    if (!categoriesLoaded) {\n      loadCategories().finally()\n    }\n    if (!isTransactionDataLoaded) {\n      loadTransactionData().finally()\n    }\n\n    return () => window.removeEventListener('resize', handleResize)\n  }, [])\n\n  // Initialize monthlyCategoryTotals, and reload on account or date range change.\n  // Depends on primitives rather than `selectedAccounts` / `selectedDateRange`,\n  // whose object identities change even when the values do not. (MEW-3910)\n  //\n  // Both totals are loaded in parallel rather than chaining monthly inside the\n  // date-range `.then()`. Chaining defers the monthly request until the first\n  // resolves, so a slow superseded range would claim the newest monthly request\n  // token and write stale data over the current range. (MEW-3910)\n  React.useEffect(() => {\n    if (isInitialized && isAccountDataLoaded) {\n      beatStore.loadBeats().finally(() => setIsBeatsLoaded(true))\n      reloadCategoryTotals(\n        selectedAccounts,\n        selectedDateRange.start,\n        selectedDateRange.end,\n      ).finally(() => {\n        setIsWidgetInitialized(true)\n        onEvent(ANALYTICS_EVENTS.TRENDS_LOAD_WIDGET, {\n          ...TRENDS_ANALYTICS_METADATA,\n          time_period: `${differenceInCalendarMonths(selectedDateRange.end, selectedDateRange.start)}M`,\n        })\n      })\n    }\n  }, [\n    isInitialized,\n    isAccountDataLoaded,\n    selectedAccountGuids.join(','),\n    selectedDateRange.start.getTime(),\n    selectedDateRange.end.getTime(),\n  ])\n  // Totals are refetched on every range/account change, so their identity marks a new filter.\n  // Tracking it stops a failed load from re-firing setFilter every time the store goes idle.\n  const filteredTotalsRef = React.useRef<typeof monthlyCategoryTotals | null>(null)\n\n  React.useEffect(() => {\n    // Wait for the transaction store to go idle so the selected range load isn't dropped\n    if (\n      monthlyCategoryTotals.length !== 0 &&\n      isTransactionStoreIdle &&\n      filteredTotalsRef.current !== monthlyCategoryTotals\n    ) {\n      filteredTotalsRef.current = monthlyCategoryTotals\n      const transactionFilter = {\n        accounts: selectedAccountGuids,\n        dateRange: { start: selectedDateRange.start, end: selectedDateRange.end },\n      }\n\n      // this filter sets sortedTransactions in the transaction store\n      setFilter({\n        ...transactionFilter,\n        custom: (t: Transaction) =>\n          Boolean(\n            monthlyCategoryTotals.find(\n              (cat) =>\n                cat.top_level_category_guid === t.top_level_category_guid ||\n                cat.category_guid === t.category_guid,\n            ),\n          ),\n      })\n    }\n  }, [monthlyCategoryTotals, isTransactionStoreIdle])\n\n  const handleDetailOpen = (selected: DetailedCategoryWithTransactions) => {\n    setSelectedCategoryData(selected)\n  }\n\n  const handleDetailClose = () => {\n    setSelectedCategoryData(null)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_BACK, TRENDS_ANALYTICS_METADATA)\n  }\n\n  const handleEmptyStateClick = () => {\n    setShowConnectWidget(true)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_CONNECT_ACCOUNTS)\n  }\n\n  const onTabChange = (_event: React.SyntheticEvent, newValue: TrendsTabValue) => {\n    setSelectedTab(newValue ?? selectedTab)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TOGGLE_VIEW, {\n      ...TRENDS_ANALYTICS_METADATA,\n      toggleView: newValue,\n    })\n  }\n\n  const onRangeChanged = (dateRange: DateRange<Date>) => {\n    const startDate = addSeconds(dateRange?.[0] as Date, 1)\n    const endDate = dateRange?.[1] as Date\n    const months = differenceInCalendarMonths(endDate, startDate)\n\n    setSelectedDateRange({ start: startDate, end: endDate })\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TIME_WINDOW, {\n      ...TRENDS_ANALYTICS_METADATA,\n      time_period: months + 'M',\n    })\n  }\n\n  const onAccountsFilterClick = (selectedAccountGuids?: string[]) => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_FILTER, {\n      ...TRENDS_ANALYTICS_METADATA,\n      filterValue: selectedAccountGuids,\n    })\n  }\n\n  const onClickRow = (guid: string) => {\n    setSelectedCategory(guid)\n  }\n\n  const onViewAllCategories = () => {\n    setSelectedCategory('')\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_ALL_CATEGORIES, TRENDS_ANALYTICS_METADATA)\n  }\n\n  if (!isInitialized || !isAccountDataLoaded || !isWidgetInitialized || !monthlyTotalsLoaded)\n    return <Loader />\n\n  const isEmptyTrendsState = accounts.length === 0 || monthlyCategoryTotals.length === 0\n\n  const emptyStateProps = buildEmptyStateProps(copy, hasAggregation, handleEmptyStateClick)\n\n  return (\n    <WidgetContainer\n      calendarActions={{ onRangeChanged }}\n      dateRange={selectedDateRange}\n      dateRangeVariant={isMobile ? 'timeframetabs' : 'timeframebuttons'}\n      onAccountsFilterClick={onAccountsFilterClick}\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      sx={sx}\n      title={copy.title}\n    >\n      <Stack\n        ref={contentRef}\n        sx={{\n          px: isMobile ? 0 : 48,\n        }}\n      >\n        <Stack\n          flexDirection=\"row\"\n          justifyContent=\"space-between\"\n          sx={{ px: isMobile ? 16 : 0, py: 16 }}\n        >\n          <DateRangeText\n            selectedCategoryGuid={selectedCategory}\n            selectedDateRange={selectedDateRange}\n          />\n          <TrendsViewToggle onTabChange={onTabChange} selectedTab={selectedTab} />\n        </Stack>\n        <Stack alignItems=\"center\" flexDirection=\"row\" sx={{ pb: 8 }} width=\"100%\">\n          <Box flexGrow={1}>\n            {selectedCategory && (\n              <Button onClick={onViewAllCategories} sx={{ p: 0, pr: 5 }}>\n                <ArrowBack />\n                {copy.all_categories}\n              </Button>\n            )}\n          </Box>\n        </Stack>\n\n        {isEmptyTrendsState && (\n          <EmptyState\n            header={emptyStateProps.header}\n            icon=\"multiline_chart\"\n            onClick={emptyStateProps.onClickHandler}\n            primaryButton={emptyStateProps.primaryButton}\n            subText={emptyStateProps.description}\n            sx={{ height: availableChartHeight, maxWidth: 432 }}\n          />\n        )}\n        {!isEmptyTrendsState && (\n          <Stack flexDirection={isLargeLayout ? 'row' : 'column'} gap={isLargeLayout ? 48 : 16}>\n            {selectedTab === 'Chart' && (\n              <>\n                <Box sx={{ width: isLargeLayout ? '68%' : '100%' }}>\n                  <TrendsChartTotals\n                    availableHeight={availableChartHeight}\n                    minHeight={450}\n                    selectedDateRange={selectedDateRange}\n                    totals={monthlyCategoryTotals}\n                  />\n                </Box>\n                <Stack gap={16} sx={{ width: isLargeLayout ? '32%' : '100%' }}>\n                  {/* Only show insights enabled and there are beats to show */}\n                  {showInsights && isBeatsLoaded && filteredBeats.length > 0 && (\n                    <InsightsCarousel\n                      beats={filteredBeats}\n                      onInsightCardClick={onInsightCardClick}\n                    />\n                  )}\n                  <CategoriesList\n                    availableHeight={availableListHeight}\n                    onCategoryClick={handleDetailOpen}\n                  />\n                </Stack>\n              </>\n            )}\n            {selectedTab === 'Table' && (\n              <Box sx={{ width: '100%' }}>\n                <TrendsTableContainer\n                  height=\"unset\"\n                  onClickRow={onClickRow}\n                  selectedCategory={selectedCategory}\n                  selectedDateRange={selectedDateRange}\n                />\n              </Box>\n            )}\n          </Stack>\n        )}\n        <Drawer\n          ariaLabelClose={copy.close_category_details}\n          isOpen={Boolean(selectedCategoryData)}\n          onClose={handleDetailClose}\n          shouldShowHeaderShadow={true}\n          title={selectedCategoryData?.is_income ? copy.category_income : copy.category_spending}\n        >\n          {selectedCategoryData && <CategoryDetails />}\n        </Drawer>\n      </Stack>\n\n      <ConnectDrawer\n        onClose={() => setShowConnectWidget(false)}\n        showConnectWidget={showConnectWidget}\n        title={connectCopy.mini_title}\n      />\n    </WidgetContainer>\n  )\n}\n\nexport default observer(TrendsWidget)\n"],"mappings":"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"}
+{"version":3,"file":"TrendsWidget.es.js","names":[],"sources":["../../src/trends/TrendsWidget.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport React from 'react'\nimport { addSeconds } from 'date-fns/addSeconds'\nimport { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'\n\nimport { DateRange } from '@mui/x-date-pickers-pro'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\n\nimport { ArrowBack } from '@mxenabled/mx-icons'\n\nimport {\n  ANALYTICS_EVENTS,\n  ConnectDrawer,\n  Drawer,\n  EmptyState,\n  Loader,\n  WidgetContainer,\n  useAccountStore,\n  useAppConfig,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalStore,\n  useGlobalUiStore,\n  useInsightsEnabled,\n  useScreenSize,\n  useTransactionStore,\n  useTrendsStore,\n  useWidgetLoadTimer,\n} from '../common'\nimport { type Beat, type DetailedCategoryWithTransactions, Transaction, WidgetProps } from '../core'\n\nimport DateRangeText from './components/DateRangeText'\nimport TrendsViewToggle, { type TrendsTabValue } from './components/TrendsViewToggle'\nimport TrendsTableContainer from './components/TrendsTableContainer'\nimport CategoriesList from './components/CategoriesList'\nimport InsightsCarousel from './components/TrendsInsights'\nimport { CategoryDetails } from './components/CategoryDetails'\nimport TrendsChartTotals from './components/TrendsChartTotals'\nimport { TRENDS_ANALYTICS_METADATA } from './constants/TrendsWidget'\nimport { TRENDS_BEAT_TEMPLATES } from './constants/TrendsInsights'\nimport { buildEmptyStateProps } from './utils/TrendsWidget'\n\ninterface TrendsWidgetProps extends WidgetProps {\n  onInsightCardClick?: (beat?: Beat) => void\n}\n\nconst TrendsWidget: React.FC<TrendsWidgetProps> = ({\n  onBackClick,\n  onMenuClick,\n  onInsightCardClick,\n  sx,\n}) => {\n  const { onEvent } = useEvent()\n  const { config } = useAppConfig()\n  const { isDesktop, isLargeDesktop, isMobile } = useScreenSize()\n  const { isAccountDataLoaded, loadAccountData, visibleAccounts: accounts } = useAccountStore()\n  const {\n    categoriesLoaded,\n    loadCategories,\n    monthlyCategoryTotals,\n    monthlyTotalsLoaded,\n    reloadCategoryTotals,\n  } = useCategoryStore()\n  const { isTransactionDataLoaded, loadTransactionData, setFilter } = useTransactionStore()\n  const {\n    getCategoryWithTransactions,\n    isTransactionStoreIdle,\n    selectedCategoryData,\n    selectedDateRange,\n    setSelectedCategoryData,\n    setSelectedDateRange,\n  } = useTrendsStore()\n  const { isInitialized, selectedAccounts, selectedAccountGuids } = useGlobalUiStore()\n  const { trends: copy, connect: connectCopy } = useGlobalCopyStore()\n  const { beatStore, captureException } = useGlobalStore()\n  const insightsEnabled = useInsightsEnabled()\n\n  // allows clients to disable insights in trends while still enabling insights\n  const showInsights = insightsEnabled && config.show_insights_widget_in_master\n  const isLargeLayout = isDesktop || isLargeDesktop\n\n  const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)\n  const [isBeatsLoaded, setIsBeatsLoaded] = React.useState(false)\n  const [selectedTab, setSelectedTab] = React.useState<TrendsTabValue>('Chart')\n  const [selectedCategory, setSelectedCategory] = React.useState('')\n\n  // Control responsive chart height based on available widget iframe viewport height\n  const [viewportHeight, setViewportHeight] = React.useState(window.innerHeight)\n  const insightsPadding = isLargeLayout ? 56 : 0\n  const availableChartHeight = viewportHeight - 208 // unavailable height on desktop\n  const availableListHeight = viewportHeight - (showInsights ? 550 + insightsPadding : 266)\n\n  const [showConnectWidget, setShowConnectWidget] = React.useState(false)\n  const hasAggregation = config.show_connections_widget_in_master\n\n  // iOS Safari doesn't scroll off-screen elements into view on forward Tab\n  // inside this non-document scroll container. `:focus-visible` limits the\n  // scroll to keyboard focus so pointer clicks on clipped rows don't jump.\n  // `block: 'nearest'` is a no-op when already visible. Callback ref (not\n  // useEffect) because the content mounts after the loading gate.\n  const cleanupFocusScroll = React.useRef<(() => void) | undefined>(undefined)\n  const contentRef = React.useCallback((node: HTMLDivElement | null) => {\n    cleanupFocusScroll.current?.()\n    cleanupFocusScroll.current = undefined\n\n    if (!node) return\n\n    const handleFocusIn = (event: FocusEvent) => {\n      if (event.target instanceof HTMLElement && event.target.matches(':focus-visible')) {\n        event.target.scrollIntoView({ block: 'nearest' })\n      }\n    }\n\n    node.addEventListener('focusin', handleFocusIn)\n    cleanupFocusScroll.current = () => node.removeEventListener('focusin', handleFocusIn)\n  }, [])\n\n  useWidgetLoadTimer({\n    widgetName: 'TrendsWidget',\n    isLoaded: isWidgetInitialized,\n  })\n  const filteredBeats = React.useMemo(() => {\n    if (!isBeatsLoaded) return []\n    return beatStore.getFilteredBeats({ templates: TRENDS_BEAT_TEMPLATES })\n  }, [isBeatsLoaded])\n\n  React.useEffect(() => {\n    // Setup resize listener for responsive chart and list heights\n    const handleResize = () => setViewportHeight(window.innerHeight)\n    window.addEventListener('resize', handleResize)\n\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n    if (!categoriesLoaded) {\n      loadCategories().finally()\n    }\n    if (!isTransactionDataLoaded) {\n      loadTransactionData().finally()\n    }\n\n    return () => window.removeEventListener('resize', handleResize)\n  }, [])\n\n  // Initialize monthlyCategoryTotals, and reload on account or date range change.\n  // Depends on primitives rather than `selectedAccounts` / `selectedDateRange`,\n  // whose object identities change even when the values do not. (MEW-3910)\n  //\n  // Both totals are loaded in parallel rather than chaining monthly inside the\n  // date-range `.then()`. Chaining defers the monthly request until the first\n  // resolves, so a slow superseded range would claim the newest monthly request\n  // token and write stale data over the current range. (MEW-3910)\n  React.useEffect(() => {\n    if (isInitialized && isAccountDataLoaded) {\n      beatStore.loadBeats().finally(() => setIsBeatsLoaded(true))\n      reloadCategoryTotals(\n        selectedAccounts,\n        selectedDateRange.start,\n        selectedDateRange.end,\n      ).finally(() => {\n        setIsWidgetInitialized(true)\n        onEvent(ANALYTICS_EVENTS.TRENDS_LOAD_WIDGET, {\n          ...TRENDS_ANALYTICS_METADATA,\n          time_period: `${differenceInCalendarMonths(selectedDateRange.end, selectedDateRange.start)}M`,\n        })\n      })\n    }\n  }, [\n    isInitialized,\n    isAccountDataLoaded,\n    selectedAccountGuids.join(','),\n    selectedDateRange.start.getTime(),\n    selectedDateRange.end.getTime(),\n  ])\n  // Totals are refetched on every range/account change, so their identity marks a new filter.\n  // Tracking it stops a failed load from re-firing setFilter every time the store goes idle.\n  const filteredTotalsRef = React.useRef<typeof monthlyCategoryTotals | null>(null)\n\n  React.useEffect(() => {\n    // Wait for the transaction store to go idle so the selected range load isn't dropped\n    if (\n      monthlyCategoryTotals.length !== 0 &&\n      isTransactionStoreIdle &&\n      filteredTotalsRef.current !== monthlyCategoryTotals\n    ) {\n      filteredTotalsRef.current = monthlyCategoryTotals\n      const transactionFilter = {\n        accounts: selectedAccountGuids,\n        dateRange: { start: selectedDateRange.start, end: selectedDateRange.end },\n      }\n\n      // this filter sets sortedTransactions in the transaction store\n      setFilter({\n        ...transactionFilter,\n        custom: (t: Transaction) =>\n          Boolean(\n            monthlyCategoryTotals.find(\n              (cat) =>\n                cat.top_level_category_guid === t.top_level_category_guid ||\n                cat.category_guid === t.category_guid,\n            ),\n          ),\n      })\n    }\n  }, [monthlyCategoryTotals, isTransactionStoreIdle])\n\n  const handleDetailOpen = (selected: DetailedCategoryWithTransactions) => {\n    setSelectedCategoryData(selected)\n  }\n\n  const handleDetailClose = () => {\n    setSelectedCategoryData(null)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_BACK, TRENDS_ANALYTICS_METADATA)\n  }\n\n  const handleEmptyStateClick = () => {\n    setShowConnectWidget(true)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_CONNECT_ACCOUNTS)\n  }\n\n  const onTabChange = (_event: React.SyntheticEvent, newValue: TrendsTabValue) => {\n    setSelectedTab(newValue ?? selectedTab)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TOGGLE_VIEW, {\n      ...TRENDS_ANALYTICS_METADATA,\n      toggleView: newValue,\n    })\n  }\n\n  const onRangeChanged = (dateRange: DateRange<Date>) => {\n    const startDate = addSeconds(dateRange?.[0] as Date, 1)\n    const endDate = dateRange?.[1] as Date\n    const months = differenceInCalendarMonths(endDate, startDate)\n\n    setSelectedDateRange({ start: startDate, end: endDate })\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TIME_WINDOW, {\n      ...TRENDS_ANALYTICS_METADATA,\n      time_period: months + 'M',\n    })\n  }\n\n  const onAccountsFilterClick = (selectedAccountGuids?: string[]) => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_FILTER, {\n      ...TRENDS_ANALYTICS_METADATA,\n      filterValue: selectedAccountGuids,\n    })\n  }\n\n  // Top-level table rows drill into their sub-categories; once drilled in, a\n  // sub-category row opens the same category details drawer the chart view's\n  // category list reaches (table view parity). The non-navigable total and\n  // \"General [Parent]\" rows are filtered out in TrendsTable.\n  const onClickRow = (guid: string) => {\n    if (!selectedCategory) {\n      setSelectedCategory(guid)\n      return\n    }\n    const category = getCategoryWithTransactions(guid)\n    if (category) handleDetailOpen(category)\n    // Every navigable sub-category row resolves today; log a miss so a future\n    // regression on a cursor:pointer row isn't a silent dead click.\n    else captureException(new Error(`TrendsWidget: no category found for guid ${guid}`))\n  }\n\n  const onViewAllCategories = () => {\n    setSelectedCategory('')\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_ALL_CATEGORIES, TRENDS_ANALYTICS_METADATA)\n  }\n\n  if (!isInitialized || !isAccountDataLoaded || !isWidgetInitialized || !monthlyTotalsLoaded)\n    return <Loader />\n\n  const isEmptyTrendsState = accounts.length === 0 || monthlyCategoryTotals.length === 0\n\n  const emptyStateProps = buildEmptyStateProps(copy, hasAggregation, handleEmptyStateClick)\n\n  return (\n    <WidgetContainer\n      calendarActions={{ onRangeChanged }}\n      dateRange={selectedDateRange}\n      dateRangeVariant={isMobile ? 'timeframetabs' : 'timeframebuttons'}\n      onAccountsFilterClick={onAccountsFilterClick}\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      sx={sx}\n      title={copy.title}\n    >\n      <Stack\n        ref={contentRef}\n        sx={{\n          px: isMobile ? 0 : 48,\n        }}\n      >\n        <Stack\n          flexDirection=\"row\"\n          justifyContent=\"space-between\"\n          sx={{ px: isMobile ? 16 : 0, py: 16 }}\n        >\n          <DateRangeText\n            selectedCategoryGuid={selectedCategory}\n            selectedDateRange={selectedDateRange}\n          />\n          <TrendsViewToggle onTabChange={onTabChange} selectedTab={selectedTab} />\n        </Stack>\n        <Stack alignItems=\"center\" flexDirection=\"row\" sx={{ pb: 8 }} width=\"100%\">\n          <Box flexGrow={1}>\n            {selectedCategory && (\n              <Button onClick={onViewAllCategories} sx={{ p: 0, pr: 5 }}>\n                <ArrowBack />\n                {copy.all_categories}\n              </Button>\n            )}\n          </Box>\n        </Stack>\n\n        {isEmptyTrendsState && (\n          <EmptyState\n            header={emptyStateProps.header}\n            icon=\"multiline_chart\"\n            onClick={emptyStateProps.onClickHandler}\n            primaryButton={emptyStateProps.primaryButton}\n            subText={emptyStateProps.description}\n            sx={{ height: availableChartHeight, maxWidth: 432 }}\n          />\n        )}\n        {!isEmptyTrendsState && (\n          <Stack flexDirection={isLargeLayout ? 'row' : 'column'} gap={isLargeLayout ? 48 : 16}>\n            {selectedTab === 'Chart' && (\n              <>\n                <Box sx={{ width: isLargeLayout ? '68%' : '100%' }}>\n                  <TrendsChartTotals\n                    availableHeight={availableChartHeight}\n                    minHeight={450}\n                    selectedDateRange={selectedDateRange}\n                    totals={monthlyCategoryTotals}\n                  />\n                </Box>\n                <Stack gap={16} sx={{ width: isLargeLayout ? '32%' : '100%' }}>\n                  {/* Only show insights enabled and there are beats to show */}\n                  {showInsights && isBeatsLoaded && filteredBeats.length > 0 && (\n                    <InsightsCarousel\n                      beats={filteredBeats}\n                      onInsightCardClick={onInsightCardClick}\n                    />\n                  )}\n                  <CategoriesList\n                    availableHeight={availableListHeight}\n                    onCategoryClick={handleDetailOpen}\n                  />\n                </Stack>\n              </>\n            )}\n            {selectedTab === 'Table' && (\n              <Box sx={{ width: '100%' }}>\n                <TrendsTableContainer\n                  height=\"unset\"\n                  onClickRow={onClickRow}\n                  selectedCategory={selectedCategory}\n                  selectedDateRange={selectedDateRange}\n                />\n              </Box>\n            )}\n          </Stack>\n        )}\n        <Drawer\n          ariaLabelClose={copy.close_category_details}\n          isOpen={Boolean(selectedCategoryData)}\n          onClose={handleDetailClose}\n          shouldShowHeaderShadow={true}\n          title={selectedCategoryData?.is_income ? copy.category_income : copy.category_spending}\n        >\n          {selectedCategoryData && <CategoryDetails />}\n        </Drawer>\n      </Stack>\n\n      <ConnectDrawer\n        onClose={() => setShowConnectWidget(false)}\n        showConnectWidget={showConnectWidget}\n        title={connectCopy.mini_title}\n      />\n    </WidgetContainer>\n  )\n}\n\nexport default observer(TrendsWidget)\n"],"mappings":"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"}

package/dist/trends/components/TrendsTableContainer.es.js

@@ -38,12 +38,10 @@ var G = ({ selectedDateRange: m, selectedCategory: l, onClickRow: c, height: w =
     children: [(!o || o && o.is_income) && /* @__PURE__ */ g(p, {
       columns: d,
       onRowClick: c,
-      parentCategory: o,
       rows: h
     }), (!o || o && !o.is_income) && /* @__PURE__ */ g(p, {
       columns: d,
       onRowClick: c,
-      parentCategory: o,
       rows: u,
       totalRow: y
     })]

package/dist/trends/components/TrendsTableContainer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsTableContainer.es.js","names":[],"sources":["../../../src/trends/components/TrendsTableContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { useCategoryStore, useGlobalCopyStore } from '../../common'\n\nimport {\n  generateMonthHeaders,\n  getTrendsTableColumns,\n  getTrendsTableRows,\n} from '../utils/TrendsTable'\n\nimport { TrendsTable } from './trendstable/TrendsTable'\n\ninterface TrendsTableProps {\n  sx?: any\n  height?: number | string\n  selectedDateRange: { start: Date; end: Date }\n  selectedCategory?: string\n  onClickRow?: (category: string) => void\n}\n\nconst TrendsTableContainer: React.FC<TrendsTableProps> = ({\n  selectedDateRange,\n  selectedCategory,\n  onClickRow,\n  height = '100%',\n  sx = {},\n}) => {\n  const { trends: copy } = useGlobalCopyStore()\n  const { trendsCategories } = useCategoryStore()\n\n  // Generate all headers for the selected date range\n  const monthHeaders = React.useMemo(() => {\n    return generateMonthHeaders(selectedDateRange.start, selectedDateRange.end)\n  }, [selectedDateRange])\n\n  const columns = React.useMemo(() => {\n    return getTrendsTableColumns(monthHeaders, copy)\n  }, [monthHeaders, copy])\n\n  const parentCategory = React.useMemo(() => {\n    if (selectedCategory) {\n      return trendsCategories.find((category) => category.guid === selectedCategory)\n    }\n    return undefined\n  }, [selectedCategory, trendsCategories])\n\n  const [incomeRows, spendingRows] = React.useMemo(() => {\n    let categories = trendsCategories\n    if (parentCategory) {\n      categories = parentCategory.subCategories.filter((c) =>\n        c.monthlyAmounts.some((ma) => ma.amount !== 0),\n      )\n    }\n\n    return [\n      getTrendsTableRows(categories, copy, true, monthHeaders, parentCategory),\n      getTrendsTableRows(categories, copy, false, monthHeaders, parentCategory),\n    ]\n  }, [trendsCategories, monthHeaders, parentCategory, copy])\n\n  const totalSpendingRow = {\n    id: 'total',\n    category: copy.table_column_total,\n    category_guid: 'total',\n    isParent: false,\n    top_level_category_guid: 'total',\n    total: spendingRows.reduce((sum, row) => sum + row.total, 0),\n    monthlyAmounts: spendingRows.reduce(\n      (amounts, row) => {\n        Object.entries(row.monthlyAmounts).forEach(([month, amount]) => {\n          amounts[month] = (amounts[month] || 0) + amount\n        })\n        return amounts\n      },\n      {} as Record<string, number>,\n    ),\n  }\n\n  return (\n    <Stack\n      gap={24}\n      sx={{ height: height, width: '100%', overflowX: 'auto', boxShadow: 'none', ...sx }}\n    >\n      {(!parentCategory || (parentCategory && parentCategory.is_income)) && (\n        <TrendsTable\n          columns={columns}\n          onRowClick={onClickRow}\n          parentCategory={parentCategory}\n          rows={incomeRows}\n        />\n      )}\n      {(!parentCategory || (parentCategory && !parentCategory.is_income)) && (\n        <TrendsTable\n          columns={columns}\n          onRowClick={onClickRow}\n          parentCategory={parentCategory}\n          rows={spendingRows}\n          totalRow={totalSpendingRow}\n        />\n      )}\n    </Stack>\n  )\n}\n\nexport default TrendsTableContainer\n"],"mappings":";;;;;;AAsBA,IAAM,IAAA,CAAoD,EACxD,mBAAA,GACA,kBAAA,GACA,YAAA,GACA,QAAA,IAAS,QACT,IAAA,IAAK,CAAC,EAAA,MACF;AACJ,QAAM,EAAE,QAAQ,EAAA,IAAS,EAAmB,GACtC,EAAE,kBAAA,EAAA,IAAqB,EAAiB,GAGxC,IAAe,EAAM,QAAA,MAClB,EAAqB,EAAkB,OAAO,EAAkB,GAAG,GACzE,CAAC,CAAiB,CAAC,GAEhB,IAAU,EAAM,QAAA,MACb,EAAsB,GAAc,CAAI,GAC9C,CAAC,GAAc,CAAI,CAAC,GAEjB,IAAiB,EAAM,QAAA,MAAc;AACzC,QAAI,EACF,QAAO,EAAiB,KAAA,CAAM,MAAa,EAAS,SAAS,CAAgB;AAAA,EAGjF,GAAG,CAAC,GAAkB,CAAgB,CAAC,GAEjC,CAAC,GAAY,CAAA,IAAgB,EAAM,QAAA,MAAc;AACrD,QAAI,IAAa;AACjB,WAAI,MACF,IAAa,EAAe,cAAc,OAAA,CAAQ,MAChD,EAAE,eAAe,KAAA,CAAM,MAAO,EAAG,WAAW,CAAC,CAC/C,IAGK,CACL,EAAmB,GAAY,GAAM,IAAM,GAAc,CAAc,GACvE,EAAmB,GAAY,GAAM,IAAO,GAAc,CAAc,CAC1E;AAAA,EACF,GAAG;AAAA,IAAC;AAAA,IAAkB;AAAA,IAAc;AAAA,IAAgB;AAAA,EAAI,CAAC,GAEnD,IAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,UAAU,EAAK;AAAA,IACf,eAAe;AAAA,IACf,UAAU;AAAA,IACV,yBAAyB;AAAA,IACzB,OAAO,EAAa,OAAA,CAAQ,GAAK,MAAQ,IAAM,EAAI,OAAO,CAAC;AAAA,IAC3D,gBAAgB,EAAa,OAAA,CAC1B,GAAS,OACR,OAAO,QAAQ,EAAI,cAAc,EAAE,QAAA,CAAS,CAAC,GAAO,CAAA,MAAY;AAC9D,MAAA,EAAQ,CAAA,KAAU,EAAQ,CAAA,KAAU,KAAK;AAAA,IAC3C,CAAC,GACM,IAET,CAAC,CACH;AAAA,EACF;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,KAAK;AAAA,IACL,IAAI;AAAA,MAAU,QAAA;AAAA,MAAQ,OAAO;AAAA,MAAQ,WAAW;AAAA,MAAQ,WAAW;AAAA,MAAQ,GAAG;AAAA,IAAG;AAAA,IAFnF,UAAA,EAII,CAAC,KAAmB,KAAkB,EAAe,cACrD,gBAAA,EAAC,GAAD;AAAA,MACW,SAAA;AAAA,MACT,YAAY;AAAA,MACI,gBAAA;AAAA,MAChB,MAAM;AAAA,IACP,CAAA,IAED,CAAC,KAAmB,KAAkB,CAAC,EAAe,cACtD,gBAAA,EAAC,GAAD;AAAA,MACW,SAAA;AAAA,MACT,YAAY;AAAA,MACI,gBAAA;AAAA,MAChB,MAAM;AAAA,MACN,UAAU;AAAA,IACX,CAAA,CAEE;AAAA;AAEX"}
+{"version":3,"file":"TrendsTableContainer.es.js","names":[],"sources":["../../../src/trends/components/TrendsTableContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { useCategoryStore, useGlobalCopyStore } from '../../common'\n\nimport {\n  generateMonthHeaders,\n  getTrendsTableColumns,\n  getTrendsTableRows,\n} from '../utils/TrendsTable'\n\nimport { TrendsTable } from './trendstable/TrendsTable'\n\ninterface TrendsTableProps {\n  sx?: any\n  height?: number | string\n  selectedDateRange: { start: Date; end: Date }\n  selectedCategory?: string\n  onClickRow?: (category: string) => void\n}\n\nconst TrendsTableContainer: React.FC<TrendsTableProps> = ({\n  selectedDateRange,\n  selectedCategory,\n  onClickRow,\n  height = '100%',\n  sx = {},\n}) => {\n  const { trends: copy } = useGlobalCopyStore()\n  const { trendsCategories } = useCategoryStore()\n\n  // Generate all headers for the selected date range\n  const monthHeaders = React.useMemo(() => {\n    return generateMonthHeaders(selectedDateRange.start, selectedDateRange.end)\n  }, [selectedDateRange])\n\n  const columns = React.useMemo(() => {\n    return getTrendsTableColumns(monthHeaders, copy)\n  }, [monthHeaders, copy])\n\n  const parentCategory = React.useMemo(() => {\n    if (selectedCategory) {\n      return trendsCategories.find((category) => category.guid === selectedCategory)\n    }\n    return undefined\n  }, [selectedCategory, trendsCategories])\n\n  const [incomeRows, spendingRows] = React.useMemo(() => {\n    let categories = trendsCategories\n    if (parentCategory) {\n      categories = parentCategory.subCategories.filter((c) =>\n        c.monthlyAmounts.some((ma) => ma.amount !== 0),\n      )\n    }\n\n    return [\n      getTrendsTableRows(categories, copy, true, monthHeaders, parentCategory),\n      getTrendsTableRows(categories, copy, false, monthHeaders, parentCategory),\n    ]\n  }, [trendsCategories, monthHeaders, parentCategory, copy])\n\n  const totalSpendingRow = {\n    id: 'total',\n    category: copy.table_column_total,\n    category_guid: 'total',\n    isParent: false,\n    top_level_category_guid: 'total',\n    total: spendingRows.reduce((sum, row) => sum + row.total, 0),\n    monthlyAmounts: spendingRows.reduce(\n      (amounts, row) => {\n        Object.entries(row.monthlyAmounts).forEach(([month, amount]) => {\n          amounts[month] = (amounts[month] || 0) + amount\n        })\n        return amounts\n      },\n      {} as Record<string, number>,\n    ),\n  }\n\n  return (\n    <Stack\n      gap={24}\n      sx={{ height: height, width: '100%', overflowX: 'auto', boxShadow: 'none', ...sx }}\n    >\n      {(!parentCategory || (parentCategory && parentCategory.is_income)) && (\n        <TrendsTable columns={columns} onRowClick={onClickRow} rows={incomeRows} />\n      )}\n      {(!parentCategory || (parentCategory && !parentCategory.is_income)) && (\n        <TrendsTable\n          columns={columns}\n          onRowClick={onClickRow}\n          rows={spendingRows}\n          totalRow={totalSpendingRow}\n        />\n      )}\n    </Stack>\n  )\n}\n\nexport default TrendsTableContainer\n"],"mappings":";;;;;;AAsBA,IAAM,IAAA,CAAoD,EACxD,mBAAA,GACA,kBAAA,GACA,YAAA,GACA,QAAA,IAAS,QACT,IAAA,IAAK,CAAC,EAAA,MACF;AACJ,QAAM,EAAE,QAAQ,EAAA,IAAS,EAAmB,GACtC,EAAE,kBAAA,EAAA,IAAqB,EAAiB,GAGxC,IAAe,EAAM,QAAA,MAClB,EAAqB,EAAkB,OAAO,EAAkB,GAAG,GACzE,CAAC,CAAiB,CAAC,GAEhB,IAAU,EAAM,QAAA,MACb,EAAsB,GAAc,CAAI,GAC9C,CAAC,GAAc,CAAI,CAAC,GAEjB,IAAiB,EAAM,QAAA,MAAc;AACzC,QAAI,EACF,QAAO,EAAiB,KAAA,CAAM,MAAa,EAAS,SAAS,CAAgB;AAAA,EAGjF,GAAG,CAAC,GAAkB,CAAgB,CAAC,GAEjC,CAAC,GAAY,CAAA,IAAgB,EAAM,QAAA,MAAc;AACrD,QAAI,IAAa;AACjB,WAAI,MACF,IAAa,EAAe,cAAc,OAAA,CAAQ,MAChD,EAAE,eAAe,KAAA,CAAM,MAAO,EAAG,WAAW,CAAC,CAC/C,IAGK,CACL,EAAmB,GAAY,GAAM,IAAM,GAAc,CAAc,GACvE,EAAmB,GAAY,GAAM,IAAO,GAAc,CAAc,CAC1E;AAAA,EACF,GAAG;AAAA,IAAC;AAAA,IAAkB;AAAA,IAAc;AAAA,IAAgB;AAAA,EAAI,CAAC,GAEnD,IAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,UAAU,EAAK;AAAA,IACf,eAAe;AAAA,IACf,UAAU;AAAA,IACV,yBAAyB;AAAA,IACzB,OAAO,EAAa,OAAA,CAAQ,GAAK,MAAQ,IAAM,EAAI,OAAO,CAAC;AAAA,IAC3D,gBAAgB,EAAa,OAAA,CAC1B,GAAS,OACR,OAAO,QAAQ,EAAI,cAAc,EAAE,QAAA,CAAS,CAAC,GAAO,CAAA,MAAY;AAC9D,MAAA,EAAQ,CAAA,KAAU,EAAQ,CAAA,KAAU,KAAK;AAAA,IAC3C,CAAC,GACM,IAET,CAAC,CACH;AAAA,EACF;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,KAAK;AAAA,IACL,IAAI;AAAA,MAAU,QAAA;AAAA,MAAQ,OAAO;AAAA,MAAQ,WAAW;AAAA,MAAQ,WAAW;AAAA,MAAQ,GAAG;AAAA,IAAG;AAAA,IAFnF,UAAA,EAII,CAAC,KAAmB,KAAkB,EAAe,cACrD,gBAAA,EAAC,GAAD;AAAA,MAAsB,SAAA;AAAA,MAAS,YAAY;AAAA,MAAY,MAAM;AAAA,IAAa,CAAA,IAE1E,CAAC,KAAmB,KAAkB,CAAC,EAAe,cACtD,gBAAA,EAAC,GAAD;AAAA,MACW,SAAA;AAAA,MACT,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,UAAU;AAAA,IACX,CAAA,CAEE;AAAA;AAEX"}

package/dist/trends/components/trendstable/TrendsTable.d.ts

@@ -1,12 +1,10 @@
-import { DetailedCategory } from '../../../core';
 import { GridColDef } from '@mui/x-data-grid-pro';
 import { TrendsTableRow } from '../../utils/TrendsTable';
 interface TrendsTableProps {
     columns: GridColDef[];
     onRowClick?: (category: string) => void;
-    parentCategory?: DetailedCategory;
     rows: TrendsTableRow[];
     totalRow?: TrendsTableRow;
 }
-export declare const TrendsTable: ({ columns, onRowClick, parentCategory, rows, totalRow, }: TrendsTableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TrendsTable: ({ columns, onRowClick, rows, totalRow }: TrendsTableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/trends/components/trendstable/TrendsTable.es.js

@@ -1,37 +1,42 @@
-import { CategoryGuidToName as l } from "../../../core/constants/Category.es.js";
-import { useEvent as m } from "../../../common/context/hooks.es.js";
-import { ANALYTICS_EVENTS as u } from "../../../common/constants/Analytics.es.js";
-import { TRENDS_ANALYTICS_METADATA as c } from "../../constants/TrendsWidget.es.js";
-import { AccessibleSortIcon as b } from "./AccessibleSortIcon.es.js";
-import { jsx as g } from "react/jsx-runtime";
-import { useTheme as T } from "@mui/material/styles";
-import { DataGridPro as p } from "@mui/x-data-grid-pro";
-var y = ({ columns: t, onRowClick: i, parentCategory: s, rows: d, totalRow: o }) => {
-  const n = T(), { onEvent: a } = m(), r = n.palette.mode === "light";
-  return /* @__PURE__ */ g(p, {
+import { CategoryGuidToName as m } from "../../../core/constants/Category.es.js";
+import { useEvent as g } from "../../../common/context/hooks.es.js";
+import { ANALYTICS_EVENTS as b } from "../../../common/constants/Analytics.es.js";
+import { TRENDS_ANALYTICS_METADATA as f } from "../../constants/TrendsWidget.es.js";
+import { AccessibleSortIcon as p } from "./AccessibleSortIcon.es.js";
+import { jsx as T } from "react/jsx-runtime";
+import { useTheme as _ } from "@mui/material/styles";
+import { DataGridPro as y } from "@mui/x-data-grid-pro";
+var t = (e) => e.id !== "total" && !e.isParent, D = ({ columns: e, onRowClick: i, rows: d, totalRow: a }) => {
+  const l = _(), { onEvent: u } = g(), n = l.palette.mode === "light", c = !!i, s = (r) => {
+    t(r) && (i?.(r.category_guid), u(b.TRENDS_CLICK_LIST_ITEM, {
+      ...f,
+      listItem: m[r.category_guid] ?? r.category,
+      destination: r.top_level_category_guid === r.category_guid ? "drill_down" : "drawer"
+    }));
+  };
+  return /* @__PURE__ */ T(y, {
     autoHeight: !0,
-    columns: t,
+    columns: e,
     disableColumnFilter: !0,
     disableColumnMenu: !0,
+    getRowClassName: (r) => t(r.row) ? "" : "trends-row-static",
     hideFooter: !0,
     initialState: { sorting: { sortModel: [{
       field: "category",
       sort: "asc"
     }] } },
-    onRowClick: (e) => {
-      s || i?.(e.row.category_guid), a(u.TRENDS_CLICK_LIST_ITEM, {
-        ...c,
-        listItem: l[e.row.category_guid]
-      });
+    onCellKeyDown: (r, o) => {
+      o.key !== "Enter" && o.key !== " " || t(r.row) && (o.preventDefault(), s(r.row));
     },
-    pinnedRows: { bottom: o ? [o] : [] },
+    onRowClick: (r) => s(r.row),
+    pinnedRows: { bottom: a ? [a] : [] },
     rowHeight: 64,
     rows: d,
     slotProps: { baseIconButton: {
       color: "secondary",
       sx: { ml: 8 }
     } },
-    slots: { columnHeaderSortIcon: b },
+    slots: { columnHeaderSortIcon: p },
     sortingOrder: ["asc", "desc"],
     sx: {
       borderColor: "divider",
@@ -39,15 +44,17 @@ var y = ({ columns: t, onRowClick: i, parentCategory: s, rows: d, totalRow: o })
       borderStyle: "solid",
       borderRadius: 2,
       "& .MuiDataGrid-columnHeaders": {
-        bgcolor: r ? "neutral.50" : "neutral.800",
+        bgcolor: n ? "neutral.50" : "neutral.800",
         borderBottom: "none"
       },
-      "& .trends-table-header": { bgcolor: r ? "neutral.50" : "neutral.800" }
+      "& .trends-table-header": { bgcolor: n ? "neutral.50" : "neutral.800" },
+      "& .MuiDataGrid-row": { cursor: c ? "pointer" : "default" },
+      "& .trends-row-static": { cursor: "default" }
     }
   });
 };
 export {
-  y as TrendsTable
+  D as TrendsTable
 };
 
 //# sourceMappingURL=TrendsTable.es.js.map

package/dist/trends/components/trendstable/TrendsTable.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsTable.es.js","names":[],"sources":["../../../../src/trends/components/trendstable/TrendsTable.tsx"],"sourcesContent":["import { ANALYTICS_EVENTS, useEvent } from '../../../common'\nimport { CategoryGuidToName } from '../../../core/constants'\nimport { DetailedCategory } from '../../../core'\nimport { TRENDS_ANALYTICS_METADATA } from '../../constants/TrendsWidget'\nimport { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'\nimport { useTheme } from '@mui/material/styles'\nimport { TrendsTableRow } from '../../utils/TrendsTable'\nimport { AccessibleSortIcon } from './AccessibleSortIcon'\n\ninterface TrendsTableProps {\n  columns: GridColDef[]\n  onRowClick?: (category: string) => void\n  parentCategory?: DetailedCategory\n  rows: TrendsTableRow[]\n  totalRow?: TrendsTableRow\n}\n\nexport const TrendsTable = ({\n  columns,\n  onRowClick,\n  parentCategory,\n  rows,\n  totalRow,\n}: TrendsTableProps) => {\n  const theme = useTheme()\n  const { onEvent } = useEvent()\n  const isLightMode = theme.palette.mode === 'light'\n\n  return (\n    <DataGridPro\n      // autoHeight sizes the grid to its content instead of measuring a flex\n      // parent. The parent is an overflow:auto Stack with no fixed height, so the\n      // default virtualized layout makes x-data-grid's useGridDimensions loop on\n      // its own ResizeObserver measurement (a feedback loop that spikes to React's\n      // \"Maximum update depth exceeded\" under a starved CI worker in jsdom). Content\n      // sizing removes the measurement feedback and is correct for this unbounded,\n      // page-scrolling table.\n      autoHeight={true}\n      columns={columns}\n      disableColumnFilter={true}\n      disableColumnMenu={true}\n      hideFooter={true}\n      initialState={{ sorting: { sortModel: [{ field: 'category', sort: 'asc' }] } }}\n      onRowClick={(r) => {\n        if (!parentCategory) {\n          onRowClick?.(r.row.category_guid)\n        }\n        onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_LIST_ITEM, {\n          ...TRENDS_ANALYTICS_METADATA,\n          listItem: CategoryGuidToName[r.row.category_guid],\n        })\n      }}\n      pinnedRows={{\n        bottom: totalRow ? [totalRow] : [],\n      }}\n      rowHeight={64}\n      rows={rows}\n      slotProps={{ baseIconButton: { color: 'secondary', sx: { ml: 8 } } }}\n      slots={{ columnHeaderSortIcon: AccessibleSortIcon }}\n      sortingOrder={['asc', 'desc']}\n      sx={{\n        borderColor: 'divider',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderRadius: 2,\n        '& .MuiDataGrid-columnHeaders': {\n          bgcolor: isLightMode ? 'neutral.50' : 'neutral.800',\n          borderBottom: 'none',\n        },\n        '& .trends-table-header': {\n          bgcolor: isLightMode ? 'neutral.50' : 'neutral.800',\n        },\n      }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAiBA,IAAa,IAAA,CAAe,EAC1B,SAAA,GACA,YAAA,GACA,gBAAA,GACA,MAAA,GACA,UAAA,EAAA,MACsB;AACtB,QAAM,IAAQ,EAAS,GACjB,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,IAAc,EAAM,QAAQ,SAAS;AAE3C,SACE,gBAAA,EAAC,GAAD;AAAA,IAQE,YAAY;AAAA,IACH,SAAA;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,cAAc,EAAE,SAAS,EAAE,WAAW,CAAC;AAAA,MAAE,OAAO;AAAA,MAAY,MAAM;AAAA,IAAM,CAAC,EAAE,EAAE;AAAA,IAC7E,YAAA,CAAa,MAAM;AACjB,MAAK,KACH,IAAa,EAAE,IAAI,aAAa,GAElC,EAAQ,EAAiB,wBAAwB;AAAA,QAC/C,GAAG;AAAA,QACH,UAAU,EAAmB,EAAE,IAAI,aAAA;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,IACA,YAAY,EACV,QAAQ,IAAW,CAAC,CAAQ,IAAI,CAAC,EACnC;AAAA,IACA,WAAW;AAAA,IACL,MAAA;AAAA,IACN,WAAW,EAAE,gBAAgB;AAAA,MAAE,OAAO;AAAA,MAAa,IAAI,EAAE,IAAI,EAAE;AAAA,IAAE,EAAE;AAAA,IACnE,OAAO,EAAE,sBAAsB,EAAmB;AAAA,IAClD,cAAc,CAAC,OAAO,MAAM;AAAA,IAC5B,IAAI;AAAA,MACF,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,cAAc;AAAA,MACd,gCAAgC;AAAA,QAC9B,SAAS,IAAc,eAAe;AAAA,QACtC,cAAc;AAAA,MAChB;AAAA,MACA,0BAA0B,EACxB,SAAS,IAAc,eAAe,cACxC;AAAA,IACF;AAAA,EACD,CAAA;AAEL"}
+{"version":3,"file":"TrendsTable.es.js","names":[],"sources":["../../../../src/trends/components/trendstable/TrendsTable.tsx"],"sourcesContent":["import { ANALYTICS_EVENTS, useEvent } from '../../../common'\nimport { CategoryGuidToName } from '../../../core/constants'\nimport { TRENDS_ANALYTICS_METADATA } from '../../constants/TrendsWidget'\nimport { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'\nimport { useTheme } from '@mui/material/styles'\nimport { TrendsTableRow } from '../../utils/TrendsTable'\nimport { AccessibleSortIcon } from './AccessibleSortIcon'\n\ninterface TrendsTableProps {\n  columns: GridColDef[]\n  onRowClick?: (category: string) => void\n  rows: TrendsTableRow[]\n  totalRow?: TrendsTableRow\n}\n\n// The pinned total row and the synthetic \"General [Parent]\" row (isParent: true,\n// only present in a drilled-in table) are summaries, not navigation destinations.\nconst isRowNavigable = (row: TrendsTableRow) => row.id !== 'total' && !row.isParent\n\nexport const TrendsTable = ({ columns, onRowClick, rows, totalRow }: TrendsTableProps) => {\n  const theme = useTheme()\n  const { onEvent } = useEvent()\n  const isLightMode = theme.palette.mode === 'light'\n  const isRowInteractive = Boolean(onRowClick)\n\n  // Shared by pointer and keyboard activation; non-navigable rows are dropped so\n  // neither path acts on them.\n  const activateRow = (row: TrendsTableRow) => {\n    if (!isRowNavigable(row)) return\n    onRowClick?.(row.category_guid)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_LIST_ITEM, {\n      ...TRENDS_ANALYTICS_METADATA,\n      // Fall back to the row's display name for user-created categories, which\n      // are absent from the static default-category map.\n      listItem: CategoryGuidToName[row.category_guid] ?? row.category,\n      // A top-level row (guid is its own top level) drills down; a sub-category\n      // row opens the drawer.\n      destination: row.top_level_category_guid === row.category_guid ? 'drill_down' : 'drawer',\n    })\n  }\n\n  return (\n    <DataGridPro\n      // autoHeight sizes the grid to its content instead of measuring a flex\n      // parent. The parent is an overflow:auto Stack with no fixed height, so the\n      // default virtualized layout makes x-data-grid's useGridDimensions loop on\n      // its own ResizeObserver measurement (a feedback loop that spikes to React's\n      // \"Maximum update depth exceeded\" under a starved CI worker in jsdom). Content\n      // sizing removes the measurement feedback and is correct for this unbounded,\n      // page-scrolling table.\n      autoHeight={true}\n      columns={columns}\n      disableColumnFilter={true}\n      disableColumnMenu={true}\n      getRowClassName={(params) => (isRowNavigable(params.row) ? '' : 'trends-row-static')}\n      hideFooter={true}\n      initialState={{ sorting: { sortModel: [{ field: 'category', sort: 'asc' }] } }}\n      onCellKeyDown={(params, event) => {\n        // Rows are reachable only by grid cell navigation, so Enter/Space on a\n        // cell is the keyboard equivalent of clicking the row. Guard before\n        // preventDefault so a non-navigable row keeps the grid's native key\n        // handling instead of being swallowed with no action. Space would\n        // otherwise scroll the grid.\n        if (event.key !== 'Enter' && event.key !== ' ') return\n        if (!isRowNavigable(params.row)) return\n        event.preventDefault()\n        activateRow(params.row)\n      }}\n      onRowClick={(r) => activateRow(r.row)}\n      pinnedRows={{\n        bottom: totalRow ? [totalRow] : [],\n      }}\n      rowHeight={64}\n      rows={rows}\n      slotProps={{ baseIconButton: { color: 'secondary', sx: { ml: 8 } } }}\n      slots={{ columnHeaderSortIcon: AccessibleSortIcon }}\n      sortingOrder={['asc', 'desc']}\n      sx={{\n        borderColor: 'divider',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderRadius: 2,\n        '& .MuiDataGrid-columnHeaders': {\n          bgcolor: isLightMode ? 'neutral.50' : 'neutral.800',\n          borderBottom: 'none',\n        },\n        '& .trends-table-header': {\n          bgcolor: isLightMode ? 'neutral.50' : 'neutral.800',\n        },\n        '& .MuiDataGrid-row': { cursor: isRowInteractive ? 'pointer' : 'default' },\n        // getRowClassName stamps trends-row-static on every non-navigable row,\n        // including the pinned total row.\n        '& .trends-row-static': { cursor: 'default' },\n      }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAiBA,IAAM,IAAA,CAAkB,MAAwB,EAAI,OAAO,WAAW,CAAC,EAAI,UAE9D,IAAA,CAAe,EAAE,SAAA,GAAS,YAAA,GAAY,MAAA,GAAM,UAAA,EAAA,MAAiC;AACxF,QAAM,IAAQ,EAAS,GACjB,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,IAAc,EAAM,QAAQ,SAAS,SACrC,IAAmB,EAAQ,GAI3B,IAAA,CAAe,MAAwB;AAC3C,IAAK,EAAe,CAAG,MACvB,IAAa,EAAI,aAAa,GAC9B,EAAQ,EAAiB,wBAAwB;AAAA,MAC/C,GAAG;AAAA,MAGH,UAAU,EAAmB,EAAI,aAAA,KAAkB,EAAI;AAAA,MAGvD,aAAa,EAAI,4BAA4B,EAAI,gBAAgB,eAAe;AAAA,IAClF,CAAC;AAAA,EACH;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAQE,YAAY;AAAA,IACH,SAAA;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,iBAAA,CAAkB,MAAY,EAAe,EAAO,GAAG,IAAI,KAAK;AAAA,IAChE,YAAY;AAAA,IACZ,cAAc,EAAE,SAAS,EAAE,WAAW,CAAC;AAAA,MAAE,OAAO;AAAA,MAAY,MAAM;AAAA,IAAM,CAAC,EAAE,EAAE;AAAA,IAC7E,eAAA,CAAgB,GAAQ,MAAU;AAMhC,MAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,OACtC,EAAe,EAAO,GAAG,MAC9B,EAAM,eAAe,GACrB,EAAY,EAAO,GAAG;AAAA,IACxB;AAAA,IACA,YAAA,CAAa,MAAM,EAAY,EAAE,GAAG;AAAA,IACpC,YAAY,EACV,QAAQ,IAAW,CAAC,CAAQ,IAAI,CAAC,EACnC;AAAA,IACA,WAAW;AAAA,IACL,MAAA;AAAA,IACN,WAAW,EAAE,gBAAgB;AAAA,MAAE,OAAO;AAAA,MAAa,IAAI,EAAE,IAAI,EAAE;AAAA,IAAE,EAAE;AAAA,IACnE,OAAO,EAAE,sBAAsB,EAAmB;AAAA,IAClD,cAAc,CAAC,OAAO,MAAM;AAAA,IAC5B,IAAI;AAAA,MACF,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,cAAc;AAAA,MACd,gCAAgC;AAAA,QAC9B,SAAS,IAAc,eAAe;AAAA,QACtC,cAAc;AAAA,MAChB;AAAA,MACA,0BAA0B,EACxB,SAAS,IAAc,eAAe,cACxC;AAAA,MACA,sBAAsB,EAAE,QAAQ,IAAmB,YAAY,UAAU;AAAA,MAGzE,wBAAwB,EAAE,QAAQ,UAAU;AAAA,IAC9C;AAAA,EACD,CAAA;AAEL"}

package/package.json

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