@mx-cartographer/experiences 9.4.35 → 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 +8 -0
- package/dist/common/components/listitems/CollapseExpandListItem.d.ts +1 -1
- package/dist/common/components/listitems/CollapseExpandListItem.es.js +20 -19
- package/dist/common/components/listitems/CollapseExpandListItem.es.js.map +1 -1
- package/dist/transactions/components/shared/transactiondetails/actions/ExcludeAction.es.js +47 -39
- package/dist/transactions/components/shared/transactiondetails/actions/ExcludeAction.es.js.map +1 -1
- package/dist/trends/components/CategoriesList.es.js +44 -36
- package/dist/trends/components/CategoriesList.es.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
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
|
+
|
|
5
|
+
## [9.4.36] - 09-22-2026
|
|
6
|
+
|
|
7
|
+
- **FIXED** - Nested interactive controls in the transaction details drawer (MEW-4024)
|
|
8
|
+
|
|
1
9
|
## [9.4.35] - 09-21-2026
|
|
2
10
|
|
|
3
11
|
- **FIXED** - Trends keyboard focus no longer skips interactive elements below the fold during forward Tab navigation; focused controls are now scrolled into view, keeping the focus order perceivable for keyboard users (MEW-3593)
|
|
@@ -3,5 +3,5 @@ interface CollapseExpandListItemProps {
|
|
|
3
3
|
isExpanded: boolean;
|
|
4
4
|
onClick: () => void;
|
|
5
5
|
}
|
|
6
|
-
export declare const CollapseExpandListItem: React.
|
|
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
|
|
3
|
-
import
|
|
4
|
-
import { Text as
|
|
5
|
-
import { ExpandLess as
|
|
6
|
-
import { jsx as r, jsxs as
|
|
7
|
-
import { useTheme as
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
var V =
|
|
13
|
-
const e =
|
|
14
|
-
return /* @__PURE__ */ r(
|
|
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__ */
|
|
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(
|
|
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(
|
|
28
|
+
}) }), /* @__PURE__ */ r(h, {
|
|
28
29
|
sx: { color: e.palette.primary.main },
|
|
29
|
-
children: t ? /* @__PURE__ */ r(
|
|
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
|
|
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,22 +1,21 @@
|
|
|
1
|
-
import { useEvent as f, useGlobalCopyStore as
|
|
1
|
+
import { useEvent as f, useGlobalCopyStore as y, useTransactionStore as I } from "../../../../../common/context/hooks.es.js";
|
|
2
2
|
import A from "../../../../../common/components/dialog/Dialog.es.js";
|
|
3
3
|
import { useTransactionsUiStore as T } from "../../../../context/hooks.es.js";
|
|
4
4
|
import { ON_CLICK_EVENTS as i } from "../../../../constants/OnClickEvents.es.js";
|
|
5
5
|
import s from "react";
|
|
6
|
-
import { observer as
|
|
7
|
-
import { Text as
|
|
6
|
+
import { observer as g } from "mobx-react-lite";
|
|
7
|
+
import { Text as b } from "@mxenabled/mxui";
|
|
8
8
|
import { Icon as d } from "@mxenabled/mx-icons";
|
|
9
9
|
import { jsx as o, jsxs as l } from "react/jsx-runtime";
|
|
10
|
-
import { useTheme as
|
|
11
|
-
import O from "@mui/material/
|
|
12
|
-
import S from "@mui/material/
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import L from "@mui/material/
|
|
16
|
-
import
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
const { onEvent: n } = f(), { setAlert: a, updateTransaction: m } = C(), { setShouldDisableDrawerScroll: _ } = T(), { common: u, transactions: t } = h(), p = b(), [x, c] = s.useState(!1), e = r.is_hidden, I = async () => {
|
|
10
|
+
import { useTheme as E } from "@mui/material/styles";
|
|
11
|
+
import O from "@mui/material/Box";
|
|
12
|
+
import S from "@mui/material/ListItem";
|
|
13
|
+
import v from "@mui/material/Avatar";
|
|
14
|
+
import D from "@mui/material/ListItemAvatar";
|
|
15
|
+
import L from "@mui/material/ListItemText";
|
|
16
|
+
import H from "@mui/material/Switch";
|
|
17
|
+
var R = ({ transaction: r }) => {
|
|
18
|
+
const { onEvent: n } = f(), { setAlert: a, updateTransaction: m } = I(), { setShouldDisableDrawerScroll: _ } = T(), { common: p, transactions: t } = y(), u = E(), [x, c] = s.useState(!1), e = r.is_hidden, h = async () => {
|
|
20
19
|
try {
|
|
21
20
|
await m({
|
|
22
21
|
...r,
|
|
@@ -25,21 +24,27 @@ var k = ({ transaction: r }) => {
|
|
|
25
24
|
} catch {
|
|
26
25
|
a(e ? t.transaction_not_included : t.transaction_not_excluded);
|
|
27
26
|
}
|
|
28
|
-
}, N =
|
|
29
|
-
|
|
27
|
+
}, N = u.palette.mode === "dark" ? "grey.800" : "grey.100", C = () => {
|
|
28
|
+
n(e ? i.ON_TRANSACTION_UNHIDE_CLICK : i.ON_TRANSACTION_HIDE_CLICK), n(e ? "transaction_details_click_unhide_transaction" : "transaction_details_click_hide_transaction", { transaction_guid: r.guid }), c(!0);
|
|
29
|
+
};
|
|
30
|
+
return /* @__PURE__ */ o(s.Fragment, { children: r && /* @__PURE__ */ l(S, {
|
|
30
31
|
className: "mx-txn-hide-transaction",
|
|
31
32
|
disableGutters: !0,
|
|
32
33
|
disablePadding: !0,
|
|
33
|
-
children: [/* @__PURE__ */ l(
|
|
34
|
-
"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
children: [/* @__PURE__ */ l(O, {
|
|
35
|
+
component: "label",
|
|
36
|
+
sx: {
|
|
37
|
+
alignItems: "center",
|
|
38
|
+
cursor: "pointer",
|
|
39
|
+
display: "flex",
|
|
40
|
+
minHeight: 64,
|
|
41
|
+
px: 24,
|
|
42
|
+
py: 12,
|
|
43
|
+
width: "100%",
|
|
44
|
+
"&:hover": { bgcolor: "action.hover" }
|
|
38
45
|
},
|
|
39
|
-
role: "switch",
|
|
40
|
-
tabIndex: 0,
|
|
41
46
|
children: [
|
|
42
|
-
/* @__PURE__ */ o(
|
|
47
|
+
/* @__PURE__ */ o(D, { children: /* @__PURE__ */ o(v, {
|
|
43
48
|
sx: { bgcolor: N },
|
|
44
49
|
variant: "rounded",
|
|
45
50
|
children: e ? /* @__PURE__ */ o(d, {
|
|
@@ -50,19 +55,22 @@ var k = ({ transaction: r }) => {
|
|
|
50
55
|
sx: { color: "text.primary" }
|
|
51
56
|
})
|
|
52
57
|
}) }),
|
|
53
|
-
/* @__PURE__ */ o(
|
|
54
|
-
id: "hide-transaction-text",
|
|
58
|
+
/* @__PURE__ */ o(L, {
|
|
55
59
|
primary: t.exclude_transaction,
|
|
56
|
-
secondary: t.excluding_transaction
|
|
60
|
+
secondary: t.excluding_transaction,
|
|
61
|
+
slotProps: {
|
|
62
|
+
primary: { id: "hide-transaction-text" },
|
|
63
|
+
secondary: { id: "hide-transaction-description" }
|
|
64
|
+
}
|
|
57
65
|
}),
|
|
58
|
-
/* @__PURE__ */ o(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
+
/* @__PURE__ */ o(H, {
|
|
67
|
+
checked: e,
|
|
68
|
+
edge: "end",
|
|
69
|
+
onChange: C,
|
|
70
|
+
slotProps: { input: {
|
|
71
|
+
"aria-describedby": "hide-transaction-description",
|
|
72
|
+
"aria-labelledby": "hide-transaction-text"
|
|
73
|
+
} }
|
|
66
74
|
})
|
|
67
75
|
]
|
|
68
76
|
}), /* @__PURE__ */ o(A, {
|
|
@@ -71,20 +79,20 @@ var k = ({ transaction: r }) => {
|
|
|
71
79
|
onClose: () => {
|
|
72
80
|
_(!1), c(!1);
|
|
73
81
|
},
|
|
74
|
-
onPrimaryAction:
|
|
82
|
+
onPrimaryAction: h,
|
|
75
83
|
onSecondaryAction: () => n(e ? i.ON_TRANSACTION_UNHIDE_CANCEL_CLICK : i.ON_TRANSACTION_HIDE_CANCEL_CLICK),
|
|
76
84
|
primaryText: e ? t.include : t.exclude,
|
|
77
|
-
secondaryText:
|
|
78
|
-
children: /* @__PURE__ */ o(
|
|
85
|
+
secondaryText: p.cancel_button,
|
|
86
|
+
children: /* @__PURE__ */ o(b, {
|
|
79
87
|
truncate: !1,
|
|
80
88
|
variant: "subtitle1",
|
|
81
89
|
children: e ? t.including_transaction : t.excluding_transaction
|
|
82
90
|
})
|
|
83
91
|
})]
|
|
84
92
|
}) });
|
|
85
|
-
},
|
|
93
|
+
}, W = g(R);
|
|
86
94
|
export {
|
|
87
|
-
|
|
95
|
+
W as default
|
|
88
96
|
};
|
|
89
97
|
|
|
90
98
|
//# sourceMappingURL=ExcludeAction.es.js.map
|
package/dist/transactions/components/shared/transactiondetails/actions/ExcludeAction.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExcludeAction.es.js","names":[],"sources":["../../../../../../src/transactions/components/shared/transactiondetails/actions/ExcludeAction.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Avatar from '@mui/material/Avatar'\nimport
|
|
1
|
+
{"version":3,"file":"ExcludeAction.es.js","names":[],"sources":["../../../../../../src/transactions/components/shared/transactiondetails/actions/ExcludeAction.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Avatar from '@mui/material/Avatar'\nimport Box from '@mui/material/Box'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemText from '@mui/material/ListItemText'\nimport Switch from '@mui/material/Switch'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { Dialog, useEvent, useGlobalCopyStore, useTransactionStore } from '../../../../../common'\n\nimport type { Transaction } from '../../../../../core'\n\nimport { useTransactionsUiStore } from '../../../../context/hooks'\nimport { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'\n\ninterface ExcludeActionProps {\n transaction: Transaction\n}\n\nconst ExcludeAction: React.FC<ExcludeActionProps> = ({ transaction }) => {\n const { onEvent } = useEvent()\n const { setAlert, updateTransaction } = useTransactionStore()\n const { setShouldDisableDrawerScroll } = useTransactionsUiStore()\n const { common: commonCopy, transactions: copy } = useGlobalCopyStore()\n const theme = useTheme()\n const [open, setOpen] = React.useState(false)\n\n const isExcluded = transaction.is_hidden\n\n const toggleExclude = async () => {\n try {\n await updateTransaction({ ...transaction, is_hidden: !transaction.is_hidden })\n onEvent(\n isExcluded\n ? ON_CLICK_EVENTS.ON_TRANSACTION_UNHIDDEN\n : ON_CLICK_EVENTS.ON_TRANSACTION_HIDDEN,\n )\n setAlert(isExcluded ? copy.transaction_included : copy.transaction_excluded)\n } catch {\n setAlert(isExcluded ? copy.transaction_not_included : copy.transaction_not_excluded)\n }\n }\n\n const bgColor = theme.palette.mode === 'dark' ? 'grey.800' : 'grey.100'\n\n const handleChange = () => {\n onEvent(\n isExcluded\n ? ON_CLICK_EVENTS.ON_TRANSACTION_UNHIDE_CLICK\n : ON_CLICK_EVENTS.ON_TRANSACTION_HIDE_CLICK,\n )\n onEvent(\n isExcluded\n ? 'transaction_details_click_unhide_transaction'\n : 'transaction_details_click_hide_transaction',\n {\n transaction_guid: transaction.guid,\n },\n )\n setOpen(true)\n }\n\n return (\n <React.Fragment>\n {transaction && (\n <ListItem className=\"mx-txn-hide-transaction\" disableGutters={true} disablePadding={true}>\n <Box\n component=\"label\"\n sx={{\n alignItems: 'center',\n cursor: 'pointer',\n display: 'flex',\n minHeight: 64,\n px: 24,\n py: 12,\n width: '100%',\n '&:hover': { bgcolor: 'action.hover' },\n }}\n >\n <ListItemAvatar>\n <Avatar sx={{ bgcolor: bgColor }} variant=\"rounded\">\n {isExcluded ? (\n <Icon name=\"visibility_off\" sx={{ color: 'text.primary' }} />\n ) : (\n <Icon name=\"visibility\" sx={{ color: 'text.primary' }} />\n )}\n </Avatar>\n </ListItemAvatar>\n <ListItemText\n primary={copy.exclude_transaction}\n secondary={copy.excluding_transaction}\n slotProps={{\n primary: { id: 'hide-transaction-text' },\n secondary: { id: 'hide-transaction-description' },\n }}\n />\n <Switch\n checked={isExcluded}\n edge=\"end\"\n onChange={handleChange}\n slotProps={{\n input: {\n 'aria-describedby': 'hide-transaction-description',\n 'aria-labelledby': 'hide-transaction-text',\n },\n }}\n />\n </Box>\n\n <Dialog\n copy={{\n title: isExcluded ? copy.include_transaction : copy.exclude_transaction,\n }}\n isOpen={open}\n onClose={() => {\n setShouldDisableDrawerScroll(false)\n setOpen(false)\n }}\n onPrimaryAction={toggleExclude}\n onSecondaryAction={() =>\n onEvent(\n isExcluded\n ? ON_CLICK_EVENTS.ON_TRANSACTION_UNHIDE_CANCEL_CLICK\n : ON_CLICK_EVENTS.ON_TRANSACTION_HIDE_CANCEL_CLICK,\n )\n }\n primaryText={isExcluded ? copy.include : copy.exclude}\n secondaryText={commonCopy.cancel_button}\n >\n <Text truncate={false} variant=\"subtitle1\">\n {isExcluded ? copy.including_transaction : copy.excluding_transaction}\n </Text>\n </Dialog>\n </ListItem>\n )}\n </React.Fragment>\n )\n}\n\nexport default observer(ExcludeAction)\n"],"mappings":"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"}
|
|
@@ -1,64 +1,72 @@
|
|
|
1
|
-
import { useEvent as
|
|
2
|
-
import { useScreenSize as
|
|
3
|
-
import { ANALYTICS_EVENTS as
|
|
4
|
-
import { TRENDS_ANALYTICS_METADATA as
|
|
5
|
-
import { CollapseExpandListItem as
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import { observer as
|
|
9
|
-
import
|
|
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
|
|
13
|
-
import
|
|
14
|
-
var
|
|
15
|
-
const { collapsedCategories:
|
|
16
|
-
|
|
17
|
-
const t = Math.floor(
|
|
18
|
-
t !== o.length && (
|
|
19
|
-
}, [
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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(
|
|
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:
|
|
32
|
-
}), /* @__PURE__ */ h(
|
|
33
|
-
o.map((t, s) => /* @__PURE__ */ e(
|
|
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 ===
|
|
36
|
-
onClick: t.transactions.length > 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(
|
|
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(
|
|
44
|
-
const
|
|
45
|
-
return /* @__PURE__ */ e(
|
|
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:
|
|
48
|
-
onClick: t.transactions.length > 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
|
-
|
|
60
|
+
n.length > 0 && /* @__PURE__ */ e(_, {
|
|
61
|
+
ref: d,
|
|
54
62
|
isExpanded: r,
|
|
55
|
-
onClick:
|
|
63
|
+
onClick: v
|
|
56
64
|
})
|
|
57
65
|
] })]
|
|
58
66
|
});
|
|
59
67
|
});
|
|
60
68
|
export {
|
|
61
|
-
|
|
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
|
|
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"}
|