@mx-cartographer/experiences 9.4.36 → 9.4.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,7 @@
1
+ ## [9.4.37] - 09-22-2026
2
+
3
+ - **FIXED** - Trends Categories "View more"/"View less" toggle now scrolls back into the viewport after the list expands, so keyboard users keep the focused control in view instead of losing track of focus below the fold (MEW-3587)
4
+
1
5
  ## [9.4.36] - 09-22-2026
2
6
 
3
7
  - **FIXED** - Nested interactive controls in the transaction details drawer (MEW-4024)
@@ -3,5 +3,5 @@ interface CollapseExpandListItemProps {
3
3
  isExpanded: boolean;
4
4
  onClick: () => void;
5
5
  }
6
- export declare const CollapseExpandListItem: React.FC<CollapseExpandListItemProps>;
6
+ export declare const CollapseExpandListItem: React.FunctionComponent<CollapseExpandListItemProps & React.RefAttributes<HTMLDivElement>>;
7
7
  export {};
@@ -1,39 +1,40 @@
1
- import "react";
2
- import { observer as m } from "mobx-react-lite";
3
- import i from "@mui/material/Stack";
4
- import { Text as n } from "@mxenabled/mxui";
5
- import { ExpandLess as s, ExpandMore as a } from "@mxenabled/mx-icons";
6
- import { jsx as r, jsxs as p } from "react/jsx-runtime";
7
- import { useTheme as l } from "@mui/material/styles";
8
- import c from "@mui/material/ListItem";
9
- import f from "@mui/material/ListItemButton";
10
- import x from "@mui/material/ListItemIcon";
11
- import d from "@mui/material/ListItemText";
12
- var V = m(({ isExpanded: t, onClick: o }) => {
13
- const e = l();
14
- return /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(f, {
1
+ import i from "react";
2
+ import { observer as n } from "mobx-react-lite";
3
+ import s from "@mui/material/Stack";
4
+ import { Text as a } from "@mxenabled/mxui";
5
+ import { ExpandLess as p, ExpandMore as f } from "@mxenabled/mx-icons";
6
+ import { jsx as r, jsxs as l } from "react/jsx-runtime";
7
+ import { useTheme as c } from "@mui/material/styles";
8
+ import x from "@mui/material/ListItem";
9
+ import d from "@mui/material/ListItemButton";
10
+ import h from "@mui/material/ListItemIcon";
11
+ import I from "@mui/material/ListItemText";
12
+ var V = n(i.forwardRef(({ isExpanded: t, onClick: o }, m) => {
13
+ const e = c();
14
+ return /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(d, {
15
+ ref: m,
15
16
  onClick: o,
16
17
  sx: { justifyContent: "center" },
17
- children: /* @__PURE__ */ p(i, {
18
+ children: /* @__PURE__ */ l(s, {
18
19
  sx: {
19
20
  color: e.palette.primary.main,
20
21
  flexDirection: "row",
21
22
  alignItems: "center"
22
23
  },
23
- children: [/* @__PURE__ */ r(d, { children: /* @__PURE__ */ r(n, {
24
+ children: [/* @__PURE__ */ r(I, { children: /* @__PURE__ */ r(a, {
24
25
  bold: !0,
25
26
  variant: "body2",
26
27
  children: t ? "View less" : "View more"
27
- }) }), /* @__PURE__ */ r(x, {
28
+ }) }), /* @__PURE__ */ r(h, {
28
29
  sx: { color: e.palette.primary.main },
29
- children: t ? /* @__PURE__ */ r(s, {}) : /* @__PURE__ */ r(a, { sx: {
30
+ children: t ? /* @__PURE__ */ r(p, {}) : /* @__PURE__ */ r(f, { sx: {
30
31
  transition: "transform 0.3s ease-in-out",
31
32
  transform: t ? "rotate(180deg)" : "rotate(0deg)"
32
33
  } })
33
34
  })]
34
35
  })
35
36
  }) });
36
- });
37
+ }));
37
38
  export {
38
39
  V as CollapseExpandListItem
39
40
  };
@@ -1 +1 @@
1
- {"version":3,"file":"CollapseExpandListItem.es.js","names":[],"sources":["../../../../src/common/components/listitems/CollapseExpandListItem.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport React from 'react'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemIcon from '@mui/material/ListItemIcon'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { ExpandLess, ExpandMore } from '@mxenabled/mx-icons'\nimport { Text } from '@mxenabled/mxui'\n\ninterface CollapseExpandListItemProps {\n isExpanded: boolean\n onClick: () => void\n}\n\nexport const CollapseExpandListItem: React.FC<CollapseExpandListItemProps> = observer(\n ({ isExpanded, onClick }) => {\n const theme = useTheme()\n return (\n <ListItem>\n <ListItemButton onClick={onClick} sx={{ justifyContent: 'center' }}>\n <Stack\n sx={{ color: theme.palette.primary.main, flexDirection: 'row', alignItems: 'center' }}\n >\n <ListItemText>\n <Text bold={true} variant=\"body2\">\n {isExpanded ? `View less` : `View more`}\n </Text>\n </ListItemText>\n <ListItemIcon sx={{ color: theme.palette.primary.main }}>\n {isExpanded ? (\n <ExpandLess />\n ) : (\n <ExpandMore\n sx={{\n transition: 'transform 0.3s ease-in-out',\n transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',\n }}\n />\n )}\n </ListItemIcon>\n </Stack>\n </ListItemButton>\n </ListItem>\n )\n },\n)\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,IAAgE,EAAA,CAC1E,EAAE,YAAA,GAAY,SAAA,EAAA,MAAc;AAC3B,QAAM,IAAQ,EAAS;AACvB,SACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IAAyB,SAAA;AAAA,IAAS,IAAI,EAAE,gBAAgB,SAAS;AAAA,IAC/D,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QAAE,OAAO,EAAM,QAAQ,QAAQ;AAAA,QAAM,eAAe;AAAA,QAAO,YAAY;AAAA,MAAS;AAAA,MADtF,UAAA,CAGE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,SAAQ;AAAA,QACvB,UAAA,IAAa,cAAc;AAAA,MACxB,CAAA,EACM,CAAA,GACd,gBAAA,EAAC,GAAD;AAAA,QAAc,IAAI,EAAE,OAAO,EAAM,QAAQ,QAAQ,KAAK;AAAA,QACnD,UAAA,IACC,gBAAA,EAAC,GAAD,CAAa,CAAA,IAEb,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,WAAW,IAAa,mBAAmB;AAAA,QAC7C,EACD,CAAA;AAAA,MAES,CAAA,CACT;AAAA;EACO,CAAA,EACR,CAAA;AAEd,CACF"}
1
+ {"version":3,"file":"CollapseExpandListItem.es.js","names":[],"sources":["../../../../src/common/components/listitems/CollapseExpandListItem.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport React from 'react'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemIcon from '@mui/material/ListItemIcon'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { ExpandLess, ExpandMore } from '@mxenabled/mx-icons'\nimport { Text } from '@mxenabled/mxui'\n\ninterface CollapseExpandListItemProps {\n isExpanded: boolean\n onClick: () => void\n}\n\nexport const CollapseExpandListItem = observer(\n React.forwardRef<HTMLDivElement, CollapseExpandListItemProps>(({ isExpanded, onClick }, ref) => {\n const theme = useTheme()\n return (\n <ListItem>\n <ListItemButton ref={ref} onClick={onClick} sx={{ justifyContent: 'center' }}>\n <Stack\n sx={{ color: theme.palette.primary.main, flexDirection: 'row', alignItems: 'center' }}\n >\n <ListItemText>\n <Text bold={true} variant=\"body2\">\n {isExpanded ? `View less` : `View more`}\n </Text>\n </ListItemText>\n <ListItemIcon sx={{ color: theme.palette.primary.main }}>\n {isExpanded ? (\n <ExpandLess />\n ) : (\n <ExpandMore\n sx={{\n transition: 'transform 0.3s ease-in-out',\n transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',\n }}\n />\n )}\n </ListItemIcon>\n </Stack>\n </ListItemButton>\n </ListItem>\n )\n }),\n)\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,IAAyB,EACpC,EAAM,WAAA,CAAyD,EAAE,YAAA,GAAY,SAAA,EAAA,GAAW,MAAQ;AAC9F,QAAM,IAAQ,EAAS;AACvB,SACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IAAqB,KAAA;AAAA,IAAc,SAAA;AAAA,IAAS,IAAI,EAAE,gBAAgB,SAAS;AAAA,IACzE,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QAAE,OAAO,EAAM,QAAQ,QAAQ;AAAA,QAAM,eAAe;AAAA,QAAO,YAAY;AAAA,MAAS;AAAA,MADtF,UAAA,CAGE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,SAAQ;AAAA,QACvB,UAAA,IAAa,cAAc;AAAA,MACxB,CAAA,EACM,CAAA,GACd,gBAAA,EAAC,GAAD;AAAA,QAAc,IAAI,EAAE,OAAO,EAAM,QAAQ,QAAQ,KAAK;AAAA,QACnD,UAAA,IACC,gBAAA,EAAC,GAAD,CAAa,CAAA,IAEb,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,WAAW,IAAa,mBAAmB;AAAA,QAC7C,EACD,CAAA;AAAA,MAES,CAAA,CACT;AAAA;EACO,CAAA,EACR,CAAA;AAEd,CAAC,CACH"}
@@ -1,64 +1,72 @@
1
- import { useEvent as v, useGlobalCopyStore as T, useTrendsStore as A } from "../../common/context/hooks.es.js";
2
- import { useScreenSize as D } from "../../common/hooks/useScreenSize.es.js";
3
- import { ANALYTICS_EVENTS as M } from "../../common/constants/Analytics.es.js";
4
- import { TRENDS_ANALYTICS_METADATA as _ } from "../constants/TrendsWidget.es.js";
5
- import { CollapseExpandListItem as b } from "../../common/components/listitems/CollapseExpandListItem.es.js";
6
- import a from "./CategoriesListItem.es.js";
7
- import d from "react";
8
- import { observer as k } from "mobx-react-lite";
9
- import c from "@mui/material/Stack";
1
+ import { useEvent as b, useGlobalCopyStore as A, useTrendsStore as D } from "../../common/context/hooks.es.js";
2
+ import { useScreenSize as R } from "../../common/hooks/useScreenSize.es.js";
3
+ import { ANALYTICS_EVENTS as k } from "../../common/constants/Analytics.es.js";
4
+ import { TRENDS_ANALYTICS_METADATA as M } from "../constants/TrendsWidget.es.js";
5
+ import { CollapseExpandListItem as _ } from "../../common/components/listitems/CollapseExpandListItem.es.js";
6
+ import f from "./CategoriesListItem.es.js";
7
+ import i from "react";
8
+ import { observer as w } from "mobx-react-lite";
9
+ import u from "@mui/material/Stack";
10
10
  import { H3 as N } from "@mxenabled/mxui";
11
11
  import { jsx as e, jsxs as h } from "react/jsx-runtime";
12
- import f from "@mui/material/List";
13
- import w from "@mui/material/Collapse";
14
- var J = k(({ availableHeight: n = 0, onCategoryClick: l }) => {
15
- const { collapsedCategories: i, visibleCategories: o, setVisibleListLength: L } = A(), { isLargeDesktop: u, isDesktop: C } = D(), { trends: g } = T(), { onEvent: E } = v(), [r, m] = d.useState(!1), x = C || u;
16
- d.useEffect(() => {
17
- const t = Math.floor(n / 64) - 1, s = o.length + i.length;
18
- t !== o.length && (L(x ? Math.max(t, 5) : 5), m(t >= s));
19
- }, [n]);
20
- const I = () => {
21
- m(!r), E(M.TRENDS_CLICK_VIEW_MORE, { ..._ });
22
- }, p = o.length + (r ? i.length : 0);
23
- return /* @__PURE__ */ h(c, {
12
+ import L from "@mui/material/List";
13
+ import V from "@mui/material/Collapse";
14
+ var P = w(({ availableHeight: a = 0, onCategoryClick: m }) => {
15
+ const { collapsedCategories: n, visibleCategories: o, setVisibleListLength: g } = D(), { isLargeDesktop: E, isDesktop: x } = R(), { trends: C } = A(), { onEvent: I } = b(), [r, p] = i.useState(!1), d = i.useRef(null), l = i.useRef(!1), S = x || E;
16
+ i.useEffect(() => {
17
+ const t = Math.floor(a / 64) - 1, s = o.length + n.length;
18
+ t !== o.length && (g(S ? Math.max(t, 5) : 5), p(t >= s));
19
+ }, [a]);
20
+ const v = () => {
21
+ const t = !r;
22
+ l.current = t, p(t), I(k.TRENDS_CLICK_VIEW_MORE, { ...M });
23
+ }, c = o.length + (r ? n.length : 0);
24
+ return /* @__PURE__ */ h(u, {
24
25
  sx: { width: "100%" },
25
- children: [/* @__PURE__ */ e(c, {
26
+ children: [/* @__PURE__ */ e(u, {
26
27
  sx: {
27
28
  pb: 4,
28
29
  pt: 16,
29
30
  px: 16
30
31
  },
31
- children: /* @__PURE__ */ e(N, { children: g.categories })
32
- }), /* @__PURE__ */ h(f, { children: [
33
- o.map((t, s) => /* @__PURE__ */ e(a, {
32
+ children: /* @__PURE__ */ e(N, { children: C.categories })
33
+ }), /* @__PURE__ */ h(L, { children: [
34
+ o.map((t, s) => /* @__PURE__ */ e(f, {
34
35
  ...t,
35
- isLastItem: s === p - 1,
36
- onClick: t.transactions.length > 0 ? () => l(t) : void 0,
36
+ isLastItem: s === c - 1,
37
+ onClick: t.transactions.length > 0 ? () => m(t) : void 0,
37
38
  showDivider: !0
38
39
  }, t.guid)),
39
- /* @__PURE__ */ e(w, {
40
+ /* @__PURE__ */ e(V, {
40
41
  component: "li",
41
42
  in: r,
43
+ onEntered: () => {
44
+ l.current && (l.current = !1, d.current?.scrollIntoView({
45
+ block: "nearest",
46
+ behavior: "smooth"
47
+ }));
48
+ },
42
49
  sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
43
- children: /* @__PURE__ */ e(f, { children: i.map((t, s) => {
44
- const S = o.length + s;
45
- return /* @__PURE__ */ e(a, {
50
+ children: /* @__PURE__ */ e(L, { children: n.map((t, s) => {
51
+ const T = o.length + s;
52
+ return /* @__PURE__ */ e(f, {
46
53
  ...t,
47
- isLastItem: S === p - 1,
48
- onClick: t.transactions.length > 0 ? () => l(t) : void 0,
54
+ isLastItem: T === c - 1,
55
+ onClick: t.transactions.length > 0 ? () => m(t) : void 0,
49
56
  showDivider: !0
50
57
  }, t.guid);
51
58
  }) })
52
59
  }),
53
- i.length > 0 && /* @__PURE__ */ e(b, {
60
+ n.length > 0 && /* @__PURE__ */ e(_, {
61
+ ref: d,
54
62
  isExpanded: r,
55
- onClick: I
63
+ onClick: v
56
64
  })
57
65
  ] })]
58
66
  });
59
67
  });
60
68
  export {
61
- J as default
69
+ P as default
62
70
  };
63
71
 
64
72
  //# sourceMappingURL=CategoriesList.es.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CategoriesList.es.js","names":[],"sources":["../../../src/trends/components/CategoriesList.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport React from 'react'\n\nimport Collapse from '@mui/material/Collapse'\n\nimport List from '@mui/material/List'\nimport Stack from '@mui/material/Stack'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport {\n ANALYTICS_EVENTS,\n useEvent,\n useGlobalCopyStore,\n useScreenSize,\n useTrendsStore,\n} from '../../common'\nimport { type DetailedCategoryWithTransactions } from '../../core'\nimport { CollapseExpandListItem } from '../../common/components/listitems/CollapseExpandListItem'\nimport CategoriesListItem from './CategoriesListItem'\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\n\ninterface CategoriesListProps {\n availableHeight?: number\n minHeight?: number\n onCategoryClick: (data: DetailedCategoryWithTransactions) => void\n}\n\nconst CategoriesList: React.FC<CategoriesListProps> = observer(\n ({ availableHeight = 0, onCategoryClick }) => {\n const { collapsedCategories, visibleCategories, setVisibleListLength } = useTrendsStore()\n const { isLargeDesktop, isDesktop } = useScreenSize()\n const { trends: copy } = useGlobalCopyStore()\n const { onEvent } = useEvent()\n const [isExpanded, setIsExpanded] = React.useState(false)\n\n const isLargeLayout = isDesktop || isLargeDesktop\n\n React.useEffect(() => {\n // Divide available height by item height (64px), minus 1 for more/less button\n const newVisibleListLength = Math.floor(availableHeight / 64) - 1\n const totalListItems = visibleCategories.length + collapsedCategories.length\n\n if (newVisibleListLength !== visibleCategories.length) {\n // Always show at least 5 items on large layout, and 5 items on small layout\n // Also ignores when availableHeight < 0 on initial render\n setVisibleListLength(isLargeLayout ? Math.max(newVisibleListLength, 5) : 5)\n setIsExpanded(newVisibleListLength >= totalListItems)\n }\n }, [availableHeight])\n\n const handleCollapseExpand = () => {\n setIsExpanded(!isExpanded)\n onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_VIEW_MORE, {\n ...TRENDS_ANALYTICS_METADATA,\n })\n }\n\n const totalCategories = visibleCategories.length + (isExpanded ? collapsedCategories.length : 0)\n return (\n <Stack sx={{ width: '100%' }}>\n <Stack sx={{ pb: 4, pt: 16, px: 16 }}>\n <H3>{copy.categories}</H3>\n </Stack>\n <List>\n {visibleCategories.map((category, index) => (\n <CategoriesListItem\n key={category.guid}\n {...category}\n isLastItem={index === totalCategories - 1}\n onClick={\n category.transactions.length > 0 ? () => onCategoryClick(category) : undefined\n }\n showDivider={true}\n />\n ))}\n <Collapse\n component=\"li\"\n in={isExpanded}\n sx={{ '&.MuiCollapse-root .MuiListItemButton-root': { paddingLeft: 24 } }}\n >\n <List>\n {collapsedCategories.map((category, index) => {\n const adjustedIndex = visibleCategories.length + index\n return (\n <CategoriesListItem\n key={category.guid}\n {...category}\n isLastItem={adjustedIndex === totalCategories - 1}\n onClick={\n category.transactions.length > 0 ? () => onCategoryClick(category) : undefined\n }\n showDivider={true}\n />\n )\n })}\n </List>\n </Collapse>\n {collapsedCategories.length > 0 && (\n <CollapseExpandListItem isExpanded={isExpanded} onClick={handleCollapseExpand} />\n )}\n </List>\n </Stack>\n )\n },\n)\n\nexport default CategoriesList\n"],"mappings":";;;;;;;;;;;;;AA4BA,IAAM,IAAgD,EAAA,CACnD,EAAE,iBAAA,IAAkB,GAAG,iBAAA,EAAA,MAAsB;AAC5C,QAAM,EAAE,qBAAA,GAAqB,mBAAA,GAAmB,sBAAA,EAAA,IAAyB,EAAe,GAClF,EAAE,gBAAA,GAAgB,WAAA,EAAA,IAAc,EAAc,GAC9C,EAAE,QAAQ,EAAA,IAAS,EAAmB,GACtC,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,CAAC,GAAY,CAAA,IAAiB,EAAM,SAAS,EAAK,GAElD,IAAgB,KAAa;AAEnC,EAAA,EAAM,UAAA,MAAgB;AAEpB,UAAM,IAAuB,KAAK,MAAM,IAAkB,EAAE,IAAI,GAC1D,IAAiB,EAAkB,SAAS,EAAoB;AAEtE,IAAI,MAAyB,EAAkB,WAG7C,EAAqB,IAAgB,KAAK,IAAI,GAAsB,CAAC,IAAI,CAAC,GAC1E,EAAc,KAAwB,CAAc;AAAA,EAExD,GAAG,CAAC,CAAe,CAAC;AAEpB,QAAM,IAAA,MAA6B;AACjC,IAAA,EAAc,CAAC,CAAU,GACzB,EAAQ,EAAiB,wBAAwB,EAC/C,GAAG,EACL,CAAC;AAAA,EACH,GAEM,IAAkB,EAAkB,UAAU,IAAa,EAAoB,SAAS;AAC9F,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,OAAO,OAAO;AAAA,IAA3B,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,IAAI;AAAA,QAAG,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,MACjC,UAAA,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAK,WAAe,CAAA;AAAA,IACpB,CAAA,GACP,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,MACG,EAAkB,IAAA,CAAK,GAAU,MAChC,gBAAA,EAAC,GAAD;AAAA,QAEE,GAAI;AAAA,QACJ,YAAY,MAAU,IAAkB;AAAA,QACxC,SACE,EAAS,aAAa,SAAS,IAAA,MAAU,EAAgB,CAAQ,IAAI;AAAA,QAEvE,aAAa;AAAA,MACd,GAPM,EAAS,IAOf,CACF;AAAA,MACD,gBAAA,EAAC,GAAD;AAAA,QACE,WAAU;AAAA,QACV,IAAI;AAAA,QACJ,IAAI,EAAE,8CAA8C,EAAE,aAAa,GAAG,EAAE;AAAA,QAExE,UAAA,gBAAA,EAAC,GAAD,EAAA,UACG,EAAoB,IAAA,CAAK,GAAU,MAAU;AAC5C,gBAAM,IAAgB,EAAkB,SAAS;AACjD,iBACE,gBAAA,EAAC,GAAD;AAAA,YAEE,GAAI;AAAA,YACJ,YAAY,MAAkB,IAAkB;AAAA,YAChD,SACE,EAAS,aAAa,SAAS,IAAA,MAAU,EAAgB,CAAQ,IAAI;AAAA,YAEvE,aAAa;AAAA,UACd,GAPM,EAAS,IAOf;AAAA,QAEL,CAAC,EACG,CAAA;AAAA,MACE,CAAA;AAAA,MACT,EAAoB,SAAS,KAC5B,gBAAA,EAAC,GAAD;AAAA,QAAoC,YAAA;AAAA,QAAY,SAAS;AAAA,MAAuB,CAAA;AAAA,IAE9E,EAAA,CAAA,CACD;AAAA;AAEX,CACF"}
1
+ {"version":3,"file":"CategoriesList.es.js","names":[],"sources":["../../../src/trends/components/CategoriesList.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport React from 'react'\n\nimport Collapse from '@mui/material/Collapse'\n\nimport List from '@mui/material/List'\nimport Stack from '@mui/material/Stack'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport {\n ANALYTICS_EVENTS,\n useEvent,\n useGlobalCopyStore,\n useScreenSize,\n useTrendsStore,\n} from '../../common'\nimport { type DetailedCategoryWithTransactions } from '../../core'\nimport { CollapseExpandListItem } from '../../common/components/listitems/CollapseExpandListItem'\nimport CategoriesListItem from './CategoriesListItem'\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\n\ninterface CategoriesListProps {\n availableHeight?: number\n minHeight?: number\n onCategoryClick: (data: DetailedCategoryWithTransactions) => void\n}\n\nconst CategoriesList: React.FC<CategoriesListProps> = observer(\n ({ availableHeight = 0, onCategoryClick }) => {\n const { collapsedCategories, visibleCategories, setVisibleListLength } = useTrendsStore()\n const { isLargeDesktop, isDesktop } = useScreenSize()\n const { trends: copy } = useGlobalCopyStore()\n const { onEvent } = useEvent()\n const [isExpanded, setIsExpanded] = React.useState(false)\n const collapseExpandButtonRef = React.useRef<HTMLDivElement>(null)\n // Only scroll on a user-initiated expand; layout-driven auto-expands (mobile\n // forces 5 visible, so a tall viewport can auto-expand) shouldn't move focus.\n const didUserToggle = React.useRef(false)\n\n const isLargeLayout = isDesktop || isLargeDesktop\n\n React.useEffect(() => {\n // Divide available height by item height (64px), minus 1 for more/less button\n const newVisibleListLength = Math.floor(availableHeight / 64) - 1\n const totalListItems = visibleCategories.length + collapsedCategories.length\n\n if (newVisibleListLength !== visibleCategories.length) {\n // Always show at least 5 items on large layout, and 5 items on small layout\n // Also ignores when availableHeight < 0 on initial render\n setVisibleListLength(isLargeLayout ? Math.max(newVisibleListLength, 5) : 5)\n setIsExpanded(newVisibleListLength >= totalListItems)\n }\n }, [availableHeight])\n\n const handleCollapseExpand = () => {\n const expanding = !isExpanded\n // Arm on expand, disarm on collapse — so an interrupted expand (collapsed\n // before onEntered fires) can't leave the flag set for a later\n // auto-expand (e.g. resize) to consume.\n didUserToggle.current = expanding\n setIsExpanded(expanding)\n onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_VIEW_MORE, {\n ...TRENDS_ANALYTICS_METADATA,\n })\n }\n\n const totalCategories = visibleCategories.length + (isExpanded ? collapsedCategories.length : 0)\n return (\n <Stack sx={{ width: '100%' }}>\n <Stack sx={{ pb: 4, pt: 16, px: 16 }}>\n <H3>{copy.categories}</H3>\n </Stack>\n <List>\n {visibleCategories.map((category, index) => (\n <CategoriesListItem\n key={category.guid}\n {...category}\n isLastItem={index === totalCategories - 1}\n onClick={\n category.transactions.length > 0 ? () => onCategoryClick(category) : undefined\n }\n showDivider={true}\n />\n ))}\n <Collapse\n component=\"li\"\n in={isExpanded}\n onEntered={() => {\n // Keep keyboard focus visible: after a user expands, the toggle\n // (now \"View less\") retains focus but is pushed below the fold.\n if (!didUserToggle.current) return\n didUserToggle.current = false\n collapseExpandButtonRef.current?.scrollIntoView({\n block: 'nearest',\n behavior: 'smooth',\n })\n }}\n sx={{ '&.MuiCollapse-root .MuiListItemButton-root': { paddingLeft: 24 } }}\n >\n <List>\n {collapsedCategories.map((category, index) => {\n const adjustedIndex = visibleCategories.length + index\n return (\n <CategoriesListItem\n key={category.guid}\n {...category}\n isLastItem={adjustedIndex === totalCategories - 1}\n onClick={\n category.transactions.length > 0 ? () => onCategoryClick(category) : undefined\n }\n showDivider={true}\n />\n )\n })}\n </List>\n </Collapse>\n {collapsedCategories.length > 0 && (\n <CollapseExpandListItem\n ref={collapseExpandButtonRef}\n isExpanded={isExpanded}\n onClick={handleCollapseExpand}\n />\n )}\n </List>\n </Stack>\n )\n },\n)\n\nexport default CategoriesList\n"],"mappings":";;;;;;;;;;;;;AA4BA,IAAM,IAAgD,EAAA,CACnD,EAAE,iBAAA,IAAkB,GAAG,iBAAA,EAAA,MAAsB;AAC5C,QAAM,EAAE,qBAAA,GAAqB,mBAAA,GAAmB,sBAAA,EAAA,IAAyB,EAAe,GAClF,EAAE,gBAAA,GAAgB,WAAA,EAAA,IAAc,EAAc,GAC9C,EAAE,QAAQ,EAAA,IAAS,EAAmB,GACtC,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,CAAC,GAAY,CAAA,IAAiB,EAAM,SAAS,EAAK,GAClD,IAA0B,EAAM,OAAuB,IAAI,GAG3D,IAAgB,EAAM,OAAO,EAAK,GAElC,IAAgB,KAAa;AAEnC,EAAA,EAAM,UAAA,MAAgB;AAEpB,UAAM,IAAuB,KAAK,MAAM,IAAkB,EAAE,IAAI,GAC1D,IAAiB,EAAkB,SAAS,EAAoB;AAEtE,IAAI,MAAyB,EAAkB,WAG7C,EAAqB,IAAgB,KAAK,IAAI,GAAsB,CAAC,IAAI,CAAC,GAC1E,EAAc,KAAwB,CAAc;AAAA,EAExD,GAAG,CAAC,CAAe,CAAC;AAEpB,QAAM,IAAA,MAA6B;AACjC,UAAM,IAAY,CAAC;AAInB,IAAA,EAAc,UAAU,GACxB,EAAc,CAAS,GACvB,EAAQ,EAAiB,wBAAwB,EAC/C,GAAG,EACL,CAAC;AAAA,EACH,GAEM,IAAkB,EAAkB,UAAU,IAAa,EAAoB,SAAS;AAC9F,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,OAAO,OAAO;AAAA,IAA3B,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,IAAI;AAAA,QAAG,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,MACjC,UAAA,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAK,WAAe,CAAA;AAAA,IACpB,CAAA,GACP,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,MACG,EAAkB,IAAA,CAAK,GAAU,MAChC,gBAAA,EAAC,GAAD;AAAA,QAEE,GAAI;AAAA,QACJ,YAAY,MAAU,IAAkB;AAAA,QACxC,SACE,EAAS,aAAa,SAAS,IAAA,MAAU,EAAgB,CAAQ,IAAI;AAAA,QAEvE,aAAa;AAAA,MACd,GAPM,EAAS,IAOf,CACF;AAAA,MACD,gBAAA,EAAC,GAAD;AAAA,QACE,WAAU;AAAA,QACV,IAAI;AAAA,QACJ,WAAA,MAAiB;AAGf,UAAK,EAAc,YACnB,EAAc,UAAU,IACxB,EAAwB,SAAS,eAAe;AAAA,YAC9C,OAAO;AAAA,YACP,UAAU;AAAA,UACZ,CAAC;AAAA,QACH;AAAA,QACA,IAAI,EAAE,8CAA8C,EAAE,aAAa,GAAG,EAAE;AAAA,QAExE,UAAA,gBAAA,EAAC,GAAD,EAAA,UACG,EAAoB,IAAA,CAAK,GAAU,MAAU;AAC5C,gBAAM,IAAgB,EAAkB,SAAS;AACjD,iBACE,gBAAA,EAAC,GAAD;AAAA,YAEE,GAAI;AAAA,YACJ,YAAY,MAAkB,IAAkB;AAAA,YAChD,SACE,EAAS,aAAa,SAAS,IAAA,MAAU,EAAgB,CAAQ,IAAI;AAAA,YAEvE,aAAa;AAAA,UACd,GAPM,EAAS,IAOf;AAAA,QAEL,CAAC,EACG,CAAA;AAAA,MACE,CAAA;AAAA,MACT,EAAoB,SAAS,KAC5B,gBAAA,EAAC,GAAD;AAAA,QACE,KAAK;AAAA,QACO,YAAA;AAAA,QACZ,SAAS;AAAA,MACV,CAAA;AAAA,IAEC,EAAA,CAAA,CACD;AAAA;AAEX,CACF"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mx-cartographer/experiences",
3
- "version": "9.4.36",
3
+ "version": "9.4.37",
4
4
  "description": "Library containing experience widgets",
5
5
  "author": "MX",
6
6
  "license": "MIT",