npm - @mx-cartographer/experiences - Versions diffs - 9.4.36 → 9.4.38 - Mend

@mx-cartographer/experiences 9.4.36 → 9.4.38

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.

Files changed (12) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,11 @@
+## [9.4.38] - 09-22-2026
+- **FIXED** - `LineChart` x-axis now shows every tick label instead of dropping overlapping ones, so month labels no longer disappear on small views. On the Trends 1 Year (12-month) view on small screens, labels render as single letters so all twelve fit; the full month is preserved as the accessible name so screen readers and tooltips are unchanged (MEW-4096)
+## [9.4.37] - 09-22-2026
+- **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)
 ## [9.4.36] - 09-22-2026
 - **FIXED** - Nested interactive controls in the transaction details drawer (MEW-4024)

package/dist/common/components/charts/LineChart.d.ts CHANGED Viewed

@@ -46,7 +46,9 @@ interface LineChartProps {
     };
     minRange?: number;
     maxRange?: number;
+    narrowXAxisLabels?: boolean;
     onItemClick?: () => void;
+    showAllXAxisLabels?: boolean;
     peerAverage?: number;
     showArea?: boolean;
     showAverage?: boolean;

package/dist/common/components/charts/LineChart.es.js CHANGED Viewed

@@ -1,50 +1,59 @@
-import { formatCurrency as A, generateEqualIntervals as P } from "../../../core/utils/NumberFormatting.es.js";
-import { stripChartSlotProps as lt } from "./chartSlotProps.es.js";
-import { getMarkerShape as mt } from "./linechart/utils/markerShapes.es.js";
-import pt from "./linechart/CustomLegend.es.js";
-import { CustomLine as ft } from "./linechart/CustomLine.es.js";
-import { CustomMark as ht } from "./linechart/CustomMark.es.js";
-import { CustomTooltip as ct } from "./linechart/CustomTooltip.es.js";
+import { formatCurrency as R, generateEqualIntervals as I } from "../../../core/utils/NumberFormatting.es.js";
+import { stripChartSlotProps as pt } from "./chartSlotProps.es.js";
+import { getMarkerShape as ct } from "./linechart/utils/markerShapes.es.js";
+import ht from "./linechart/CustomLegend.es.js";
+import { CustomLine as yt } from "./linechart/CustomLine.es.js";
+import { CustomMark as ut } from "./linechart/CustomMark.es.js";
+import { CustomTooltip as dt } from "./linechart/CustomTooltip.es.js";
 import "react";
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { useTheme as yt } from "@mui/material/styles";
-import dt from "@mui/material/Box";
-import { BarPlot as ut } from "@mui/x-charts/BarChart";
-import { ChartContainer as xt } from "@mui/x-charts/ChartContainer";
-import { ChartsAxisHighlight as gt } from "@mui/x-charts/ChartsAxisHighlight";
+import { useTheme as xt } from "@mui/material/styles";
+import gt from "@mui/material/Box";
+import { BarPlot as kt } from "@mui/x-charts/BarChart";
+import { ChartContainer as bt } from "@mui/x-charts/ChartContainer";
+import { ChartsAxisHighlight as Lt } from "@mui/x-charts/ChartsAxisHighlight";
+import { ChartsText as S } from "@mui/x-charts/ChartsText";
 import { ChartsReferenceLine as Mt } from "@mui/x-charts/ChartsReferenceLine";
-import { ChartsTooltipContainer as kt } from "@mui/x-charts/ChartsTooltip";
-import { ChartsXAxis as bt } from "@mui/x-charts/ChartsXAxis";
-import { ChartsYAxis as Lt } from "@mui/x-charts/ChartsYAxis";
-import { AreaPlot as Ct, LinePlot as Tt, MarkPlot as vt } from "@mui/x-charts/LineChart";
-var Bt = ({ areaColor: f, axisColor: n, baseline: R = "max", chartFor: u, chartXaxisSx: w, chartYaxisSx: D, colors: M, curveType: G = "linear", customLegendVariant: I, customLegendSx: $, customLegendBoxSx: j, customTooltipLabels: E, datasets: h, height: O, isCurrency: S, isGraphClippingXAxis: W = !1, labels: k, labelBackgroundColor: b, labelFontColor: q, labelFontSize: z, margin: H, markHandlers: N, markStyles: X, minRange: Y, maxRange: _, onItemClick: x, peerAverage: L, showArea: C = !1, showAverage: T = !1, showAxisHighlight: B = !1, showBars: g = !1, showLegend: J = !1, showMark: K = !0, showMarkLabel: Q = !1, showTooltip: U = !1, showXAxis: V = !1, showXAxisTicks: Z = !1, showYAxis: F = !1, showYAxisTicks: tt = !1, title: et, useCustomMark: at = !1, valueFormatterString: i, width: rt, xAxisScaleType: ot }) => {
-  const a = yt(), it = h.flat().map((t) => t.x), r = h.flat().map((t) => t.y), v = L || (r.length ? Math.round(r.reduce((t, s) => s + t, 0) / r.length) : 0), l = r.length ? Math.floor(Math.min(...r) / 100) * 100 : 0, m = r.length ? Math.ceil(Math.max(...r) / 100) * 100 : 0, c = h.map((t, s) => ({
-    type: g ? "bar" : "line",
-    curve: G,
-    color: g ? a.palette.chart?.chart6 : M[s] ?? a.palette.primary.main,
-    data: t.map((o) => o.y),
-    area: C,
-    baseline: R,
+import { ChartsTooltipContainer as Tt } from "@mui/x-charts/ChartsTooltip";
+import { ChartsXAxis as Ct } from "@mui/x-charts/ChartsXAxis";
+import { ChartsYAxis as vt } from "@mui/x-charts/ChartsYAxis";
+import { AreaPlot as At, LinePlot as Pt, MarkPlot as Rt } from "@mui/x-charts/LineChart";
+var It = (r) => {
+  const a = typeof r.text == "string" ? r.text : "", c = Array.from(a.trim())[0] ?? "";
+  return c ? /* @__PURE__ */ e(S, {
+    ...r,
+    "aria-label": a,
+    role: "img",
+    text: c
+  }) : /* @__PURE__ */ e(S, { ...r });
+}, St = { axisTickLabel: It }, Zt = ({ areaColor: r, axisColor: a, baseline: c = "max", chartFor: x, chartXaxisSx: w, chartYaxisSx: O, colors: b, curveType: _ = "linear", customLegendVariant: D, customLegendSx: G, customLegendBoxSx: N, customTooltipLabels: W, datasets: h, height: X, isCurrency: $, isGraphClippingXAxis: j = !1, labels: L, labelBackgroundColor: M, labelFontColor: E, labelFontSize: q, margin: z, markHandlers: H, markStyles: Y, minRange: B, maxRange: J, narrowXAxisLabels: T = !1, showAllXAxisLabels: K = !1, onItemClick: g, peerAverage: C, showArea: v = !1, showAverage: A = !1, showAxisHighlight: Q = !1, showBars: k = !1, showLegend: U = !1, showMark: V = !0, showMarkLabel: Z = !1, showTooltip: F = !1, showXAxis: tt = !1, showXAxisTicks: et = !1, showYAxis: rt = !1, showYAxisTicks: at = !1, title: it, useCustomMark: ot = !1, valueFormatterString: s, width: nt, xAxisScaleType: st }) => {
+  const i = xt(), lt = h.flat().map((t) => t.x), o = h.flat().map((t) => t.y), P = C || (o.length ? Math.round(o.reduce((t, l) => l + t, 0) / o.length) : 0), m = o.length ? Math.floor(Math.min(...o) / 100) * 100 : 0, f = o.length ? Math.ceil(Math.max(...o) / 100) * 100 : 0, y = h.map((t, l) => ({
+    type: k ? "bar" : "line",
+    curve: _,
+    color: k ? i.palette.chart?.chart6 : b[l] ?? i.palette.primary.main,
+    data: t.map((n) => n.y),
+    area: v,
+    baseline: c,
     showMark: !0,
-    shape: mt(s),
-    valueFormatter: (o) => i ? A(o || 0, i) : String(o)
-  })), nt = {
+    shape: ct(l),
+    valueFormatter: (n) => s ? R(n || 0, s) : String(n)
+  })), mt = {
     top: 60,
     right: 35,
     bottom: 25,
     left: -10,
-    ...H
+    ...z
   };
-  let p = Y ?? l, y = _ ?? m;
-  if (u === "networthChart") {
-    const t = m - l, s = t < m * 0.05 ? 0.25 : 0.2, o = Math.max(t * s, m * 0.015);
-    p = l - o < 0 ? l : l - o, y = m + o;
+  let p = B ?? m, u = J ?? f;
+  if (x === "networthChart") {
+    const t = f - m, l = t < f * 0.05 ? 0.25 : 0.2, n = Math.max(t * l, f * 0.015);
+    p = m - n < 0 ? m : m - n, u = f + n;
   }
-  const st = () => {
-    if (u === "creditOverTime") return P(p, 850, 5);
-    if (u === "networthChart") return P(p, y, 5);
+  const ft = () => {
+    if (x === "creditOverTime") return I(p, 850, 5);
+    if (x === "networthChart") return I(p, u, 5);
   };
-  return /* @__PURE__ */ d(dt, {
+  return /* @__PURE__ */ d(gt, {
     sx: {
       position: "relative",
       touchAction: "pan-y",
@@ -54,49 +63,50 @@ var Bt = ({ areaColor: f, axisColor: n, baseline: R = "max", chartFor: u, chartX
       },
       "& .recharts-wrapper": { touchAction: "pan-y" }
     },
-    children: [/* @__PURE__ */ d(xt, {
-      height: O,
-      margin: nt,
-      series: c,
+    children: [/* @__PURE__ */ d(bt, {
+      height: X,
+      margin: mt,
+      series: y,
       sx: {
         "& .MuiBarLabel-root": {
           fontSize: 10,
           fontWeight: 600
         },
         "& .MuiAreaElement-root": { opacity: 0.15 },
-        "& .MuiChartsAxis-tickLabel > tspan": { fontFamily: a.typography.body2.fontFamily },
-        "& .MuiLineChart-markLabel": { fontFamily: a.typography.body2.fontFamily }
+        "& .MuiChartsAxis-tickLabel > tspan": { fontFamily: i.typography.body2.fontFamily },
+        "& .MuiLineChart-markLabel": { fontFamily: i.typography.body2.fontFamily }
       },
-      width: rt,
+      width: nt,
       xAxis: [{
-        data: it,
-        scaleType: ot || (g ? "band" : "point")
+        data: lt,
+        scaleType: st || (k ? "band" : "point"),
+        ...(K || T) && { tickLabelInterval: () => !0 }
       }],
       yAxis: [{
-        tickInterval: st(),
-        min: W ? -22 : p,
-        max: y || 100,
-        colorMap: C && c.length < 2 ? {
+        tickInterval: ft(),
+        min: j ? -22 : p,
+        max: u || 100,
+        colorMap: v && y.length < 2 ? {
           type: "continuous",
           min: p,
-          max: y,
-          color: [a.palette.background.paper, M[0] ?? a.palette.primary.main]
+          max: u,
+          color: [i.palette.background.paper, b[0] ?? i.palette.primary.main]
         } : void 0,
-        valueFormatter: (t) => i ? A(t, i) : String(t),
+        valueFormatter: (t) => s ? R(t, s) : String(t),
         width: 62
       }],
       children: [
-        T && /* @__PURE__ */ e(Mt, {
+        A && /* @__PURE__ */ e(Mt, {
           lineStyle: {
-            stroke: b ? a.palette.neutral.main : a.palette.neutral.dark,
+            stroke: M ? i.palette.neutral.main : i.palette.neutral.dark,
             strokeDasharray: "10, 8",
             strokeWidth: 2
           },
-          y: v
+          y: P
         }),
-        /* @__PURE__ */ e(Ct, {
-          onItemClick: x,
-          ...f && { slots: { area: (t) => /* @__PURE__ */ d("g", { children: [/* @__PURE__ */ e("defs", { children: /* @__PURE__ */ d("linearGradient", {
+        /* @__PURE__ */ e(At, {
+          onItemClick: g,
+          ...r && { slots: { area: (t) => /* @__PURE__ */ d("g", { children: [/* @__PURE__ */ e("defs", { children: /* @__PURE__ */ d("linearGradient", {
             id: "customGradient",
             x1: "0",
             x2: "0",
@@ -104,92 +114,93 @@ var Bt = ({ areaColor: f, axisColor: n, baseline: R = "max", chartFor: u, chartX
             y2: "1",
             children: [/* @__PURE__ */ e("stop", {
               offset: "0%",
-              stopColor: f
+              stopColor: r
             }), /* @__PURE__ */ e("stop", {
               offset: "100%",
-              stopColor: f,
+              stopColor: r,
               stopOpacity: 0.02
             })]
           }) }), /* @__PURE__ */ e("path", {
-            ...lt(t),
+            ...pt(t),
             fill: "url(#customGradient)"
           })] }) } }
         }),
-        /* @__PURE__ */ e(Tt, {
-          onItemClick: x,
-          slots: { line: (t) => /* @__PURE__ */ e(ft, {
+        /* @__PURE__ */ e(Pt, {
+          onItemClick: g,
+          slots: { line: (t) => /* @__PURE__ */ e(yt, {
             ...t,
-            lineColor: f ?? t.ownerState.color ?? a.palette.primary.main
+            lineColor: r ?? t.ownerState.color ?? i.palette.primary.main
           }) }
         }),
-        /* @__PURE__ */ e(vt, {
-          onItemClick: x,
-          slots: at ? { mark: (t) => /* @__PURE__ */ e(ht, {
-            handlers: N,
-            labelBackgroundColor: b,
-            labelFontColor: q,
-            labelFontSize: z,
-            showLabel: Q,
-            showMark: K || t.dataIndex === h[0].length - 1,
-            style: X?.(t.dataIndex) ?? {},
-            valueFormatterString: i,
-            yData: r,
+        /* @__PURE__ */ e(Rt, {
+          onItemClick: g,
+          slots: ot ? { mark: (t) => /* @__PURE__ */ e(ut, {
+            handlers: H,
+            labelBackgroundColor: M,
+            labelFontColor: E,
+            labelFontSize: q,
+            showLabel: Z,
+            showMark: V || t.dataIndex === h[0].length - 1,
+            style: Y?.(t.dataIndex) ?? {},
+            valueFormatterString: s,
+            yData: o,
             ...t
           }) } : void 0
         }),
-        /* @__PURE__ */ e(ut, {
+        /* @__PURE__ */ e(kt, {
           barLabel: (t) => Number(t.value) > 0 ? `$${t.value}` : null,
           borderRadius: 10
         }),
-        /* @__PURE__ */ e(bt, {
-          disableLine: !V,
-          disableTicks: !Z,
-          slotProps: n ? {
-            axisLine: { style: { stroke: n } },
-            axisTick: { style: { stroke: n } }
+        /* @__PURE__ */ e(Ct, {
+          disableLine: !tt,
+          disableTicks: !et,
+          slots: T ? St : void 0,
+          slotProps: a ? {
+            axisLine: { style: { stroke: a } },
+            axisTick: { style: { stroke: a } }
           } : {},
           sx: { ...w }
         }),
-        /* @__PURE__ */ e(Lt, {
-          disableLine: !F,
-          disableTicks: !tt,
-          slotProps: n ? {
-            axisLine: { style: { stroke: n } },
-            axisTick: { style: { stroke: n } }
+        /* @__PURE__ */ e(vt, {
+          disableLine: !rt,
+          disableTicks: !at,
+          slotProps: a ? {
+            axisLine: { style: { stroke: a } },
+            axisTick: { style: { stroke: a } }
           } : {},
-          sx: { ...D }
+          sx: { ...O }
         }),
-        B && /* @__PURE__ */ e(gt, { x: "line" }),
-        U && /* @__PURE__ */ e(kt, {
+        Q && /* @__PURE__ */ e(Lt, { x: "line" }),
+        F && /* @__PURE__ */ e(Tt, {
           trigger: "axis",
-          children: /* @__PURE__ */ e(ct, {
-            customLabels: E,
-            isCurrency: S,
-            labels: k,
-            series: c,
-            valueFormatterString: i
+          children: /* @__PURE__ */ e(dt, {
+            customLabels: W,
+            isCurrency: $,
+            labels: L,
+            series: y,
+            valueFormatterString: s
           })
         })
       ]
-    }), J && /* @__PURE__ */ e(pt, {
-      average: T ? v : void 0,
-      customLegendBoxSx: j,
-      customLegendVariant: I,
-      labels: k,
-      series: c,
+    }), U && /* @__PURE__ */ e(ht, {
+      average: A ? P : void 0,
+      customLegendBoxSx: N,
+      customLegendVariant: D,
+      labels: L,
+      series: y,
       style: {
         position: "absolute",
         top: 16,
         left: 16,
-        ...$
+        ...G
       },
-      title: et,
-      valueFormatterString: i
+      title: it,
+      valueFormatterString: s
     })]
   });
 };
 export {
-  Bt as LineChart
+  Zt as LineChart
 };
 //# sourceMappingURL=LineChart.es.js.map

package/dist/common/components/charts/LineChart.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LineChart.es.js","names":[],"sources":["../../../../src/common/components/charts/LineChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport type { SxProps } from '@mui/material/styles'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { AllSeriesType } from '@mui/x-charts'\nimport { BarPlot } from '@mui/x-charts/BarChart'\nimport { ChartContainer as ResponsiveChartContainer } from '@mui/x-charts/ChartContainer'\nimport { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'\nimport { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'\nimport { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip'\nimport { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'\nimport { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'\nimport { AreaPlot, LinePlot, MarkPlot } from '@mui/x-charts/LineChart'\n\nimport { stripChartSlotProps } from './chartSlotProps'\nimport CustomLegend from './linechart/CustomLegend'\nimport { getMarkerShape } from './linechart/utils/markerShapes'\nimport { CustomLine } from './linechart/CustomLine'\nimport { CustomMark, MarkHandlers } from './linechart/CustomMark'\nimport { CustomTooltip } from './linechart/CustomTooltip'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { generateEqualIntervals } from '../../../core/utils/NumberFormatting'\n\nexport type LineChartDataset = { x: string; y: number }[]\nexport type LineChartLabel = string \| { label: string; amount: number }\nexport type TooltipLabel = LineChartLabel & { header?: string }\n\ntype LineChartCurve =\n \| 'catmullRom'\n \| 'linear'\n \| 'monotoneX'\n \| 'monotoneY'\n \| 'natural'\n \| 'step'\n \| 'stepBefore'\n \| 'stepAfter'\n \| 'bump'\n \| 'bumpX'\n \| 'bumpY'\n\ninterface LineChartProps {\n areaColor?: string\n axisColor?: string\n baseline?: string\n chartFor?: string\n chartXaxisSx?: SxProps\n chartYaxisSx?: SxProps\n // Because theme chart colors are typed string\|undefined\n colors: (string \| undefined)[]\n curveType?: LineChartCurve\n customLegendVariant?: string\n customLegendSx?: SxProps\n customLegendBoxSx?: SxProps\n customTooltipLabels?: TooltipLabel[][]\n datasets: LineChartDataset[]\n height?: number\n isCurrency?: boolean\n isGraphClippingXAxis?: boolean\n labels: LineChartLabel[]\n labelBackgroundColor?: string\n labelFontColor?: string\n labelFontSize?: number\n margin?: { top?: number; right?: number; bottom?: number; left?: number }\n markHandlers?: MarkHandlers\n markStyles?: (markIndex: number) => React.CSSProperties & {\n markLabelStyles?: React.CSSProperties\n }\n minRange?: number\n maxRange?: number\n onItemClick?: () => void\n peerAverage?: number\n showArea?: boolean\n showAverage?: boolean\n showAxisHighlight?: boolean\n showBars?: boolean\n showLegend?: boolean\n showMark?: boolean\n showMarkLabel?: boolean\n showTooltip?: boolean\n showXAxis?: boolean\n showXAxisTicks?: boolean\n showYAxis?: boolean\n showYAxisTicks?: boolean\n tickIntervals?: any[] \| 'auto' \| ((value: any, index: number) => boolean) \| undefined\n title?: string\n useCustomMark?: boolean\n valueFormatterString?: string\n width?: number\n xAxisScaleType?: 'band' \| 'point'\n}\n\n// TODO: Remove negative values and use a proper layout to support X-Charts v8\n\nexport const LineChart: React.FC<LineChartProps> = ({\n areaColor,\n axisColor,\n baseline = 'max',\n chartFor,\n chartXaxisSx,\n chartYaxisSx,\n colors,\n curveType = 'linear',\n customLegendVariant,\n customLegendSx,\n customLegendBoxSx,\n customTooltipLabels,\n datasets,\n height,\n isCurrency,\n isGraphClippingXAxis = false,\n labels,\n labelBackgroundColor,\n labelFontColor,\n labelFontSize,\n margin,\n markHandlers,\n markStyles,\n minRange,\n maxRange,\n onItemClick,\n peerAverage,\n showArea = false,\n showAverage = false,\n showAxisHighlight = false,\n showBars = false,\n showLegend = false,\n showMark = true,\n showMarkLabel = false,\n showTooltip = false,\n showXAxis = false,\n showXAxisTicks = false,\n showYAxis = false,\n showYAxisTicks = false,\n title,\n useCustomMark = false,\n valueFormatterString,\n width,\n xAxisScaleType,\n}) => {\n const theme = useTheme()\n\n // Data for the X axis\n const xData = datasets.flat().map((item) => item.x)\n const yData = datasets.flat().map((item) => item.y)\n\n // Guard the empty-data case: with no points, reduce()/Math.min()/Math.max()\n // produce NaN/±Infinity which flow into the y-axis and make x-charts warn\n // \"the value NaN does not exist in the data of y axis\". Default to 0 so an\n // empty/loading chart renders a valid (flat) axis instead.\n const average = peerAverage\n ? peerAverage\n : yData.length\n ? Math.round(yData.reduce((value, total) => total + value, 0) / yData.length)\n : 0\n\n // Used for the min and max Y axis values\n const yMin = yData.length ? Math.floor(Math.min(...yData) / 100) * 100 : 0\n const yMax = yData.length ? Math.ceil(Math.max(...yData) / 100) * 100 : 0\n\n const series = datasets.map((data, index) => {\n return {\n type: showBars ? 'bar' : 'line',\n curve: curveType,\n color: showBars ? theme.palette.chart?.chart6 : (colors[index] ?? theme.palette.primary.main),\n data: data.map((item) => item.y),\n area: showArea,\n baseline: baseline,\n showMark: true,\n shape: getMarkerShape(index),\n valueFormatter: (value: number) =>\n valueFormatterString ? formatCurrency(value \|\| 0, valueFormatterString) : String(value),\n }\n })\n\n const defaultMargin = {\n top: 60,\n right: 35,\n bottom: 25,\n left: -10,\n }\n\n // Merge default margin with any provided custom margin\n const chartMargin = {\n ...defaultMargin,\n ...margin,\n }\n\n let rangeMin = minRange ?? yMin\n let rangeMax = maxRange ?? yMax\n if (chartFor === 'networthChart') {\n const valueRange = yMax - yMin\n\n const paddingRatio = valueRange < yMax * 0.05 ? 0.25 : 0.2\n const padding = Math.max(valueRange * paddingRatio, yMax * 0.015)\n rangeMin = yMin - padding < 0 ? yMin : yMin - padding\n rangeMax = yMax + padding\n }\n\n const getTickInterval = () => {\n if (chartFor === 'creditOverTime') {\n return generateEqualIntervals(rangeMin, 850, 5)\n } else if (chartFor === 'networthChart') {\n return generateEqualIntervals(rangeMin, rangeMax, 5)\n }\n return undefined\n }\n return (\n <Box\n sx={{\n position: 'relative',\n touchAction: 'pan-y', // Allow vertical scrolling\n '& svg': {\n touchAction: 'pan-y', // Allow vertical scrolling on SVG\n userSelect: 'none', // Prevent text selection\n },\n '& .recharts-wrapper': {\n touchAction: 'pan-y', // For Recharts library specifically\n },\n }}\n >\n <ResponsiveChartContainer\n height={height}\n margin={chartMargin}\n series={series as AllSeriesType[]}\n sx={{\n '& .MuiBarLabel-root': {\n fontSize: 10,\n fontWeight: 600,\n },\n '& .MuiAreaElement-root': {\n opacity: 0.15,\n },\n '& .MuiChartsAxis-tickLabel > tspan': {\n fontFamily: theme.typography.body2.fontFamily,\n },\n '& .MuiLineChart-markLabel': {\n fontFamily: theme.typography.body2.fontFamily,\n },\n }}\n width={width}\n xAxis={[{ data: xData, scaleType: xAxisScaleType \|\| (showBars ? 'band' : 'point') }]}\n yAxis={[\n {\n tickInterval: getTickInterval(),\n min: isGraphClippingXAxis ? -22 : rangeMin,\n max: rangeMax \|\| 100,\n colorMap:\n showArea && series.length < 2\n ? {\n type: 'continuous',\n min: rangeMin,\n max: rangeMax,\n color: [\n theme.palette.background.paper,\n colors[0] ?? theme.palette.primary.main,\n ],\n }\n : undefined,\n valueFormatter: (value: number) =>\n valueFormatterString ? formatCurrency(value, valueFormatterString) : String(value),\n width: 62,\n },\n ]}\n >\n {/ Provides the average line - positioned first to be behind other elements /}\n {showAverage && (\n <ChartsReferenceLine\n lineStyle={{\n stroke: labelBackgroundColor\n ? theme.palette.neutral.main\n : theme.palette.neutral.dark,\n strokeDasharray: '10, 8',\n strokeWidth: 2,\n }}\n y={average}\n />\n )}\n\n {/ Area plot provides gradiant below the line /}\n {/* Note: Must be above the LinePlot for some style rules to work /}\n <AreaPlot\n onItemClick={onItemClick}\n {...(areaColor && {\n slots: {\n area: (props) => {\n return (\n <g>\n <defs>\n <linearGradient id=\"customGradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor={areaColor} />\n <stop offset=\"100%\" stopColor={areaColor} stopOpacity={0.02} />\n </linearGradient>\n </defs>\n <path {...stripChartSlotProps(props)} fill={`url(#customGradient)`} />\n </g>\n )\n },\n },\n })}\n />\n\n {/* Line plot provides the data line /}\n <LinePlot\n onItemClick={onItemClick}\n slots={{\n line: (props) => (\n <CustomLine\n {...props}\n lineColor={areaColor ?? props.ownerState.color ?? theme.palette.primary.main}\n />\n ),\n }}\n />\n\n {/ Mark plot provides the circles /}\n <MarkPlot\n onItemClick={onItemClick}\n slots={\n useCustomMark\n ? {\n mark: (props) => {\n return (\n <CustomMark\n handlers={markHandlers}\n labelBackgroundColor={labelBackgroundColor}\n labelFontColor={labelFontColor}\n labelFontSize={labelFontSize}\n showLabel={showMarkLabel}\n showMark={showMark \|\| props.dataIndex === datasets[0].length - 1}\n style={markStyles?.(props.dataIndex) ?? {}}\n valueFormatterString={valueFormatterString}\n yData={yData}\n {...props}\n />\n )\n },\n }\n : undefined\n }\n />\n\n <BarPlot\n barLabel={(item) => (Number(item.value) > 0 ? `$${item.value}` : null)}\n borderRadius={10}\n />\n\n {/ Provides the X axis line and values /}\n <ChartsXAxis\n disableLine={!showXAxis}\n disableTicks={!showXAxisTicks}\n slotProps={\n axisColor\n ? {\n axisLine: {\n style: {\n stroke: axisColor,\n },\n },\n axisTick: {\n style: {\n stroke: axisColor,\n },\n },\n }\n : {}\n }\n sx={{ ...chartXaxisSx }}\n />\n\n {/ Provides the Y axis values */}\n <ChartsYAxis\n disableLine={!showYAxis}\n disableTicks={!showYAxisTicks}\n slotProps={\n axisColor\n ? {\n axisLine: {\n style: {\n stroke: axisColor,\n },\n },\n axisTick: {\n style: {\n stroke: axisColor,\n },\n },\n }\n : {}\n }\n sx={{ ...chartYaxisSx }}\n />\n\n {/ Add vertical crosshair on hover */}\n {showAxisHighlight && <ChartsAxisHighlight x=\"line\" />}\n\n {showTooltip && (\n <ChartsTooltipContainer trigger=\"axis\">\n <CustomTooltip\n customLabels={customTooltipLabels}\n isCurrency={isCurrency}\n labels={labels}\n series={series}\n valueFormatterString={valueFormatterString}\n />\n </ChartsTooltipContainer>\n )}\n </ResponsiveChartContainer>\n\n {showLegend && (\n <CustomLegend\n average={showAverage ? average : undefined}\n customLegendBoxSx={customLegendBoxSx}\n customLegendVariant={customLegendVariant}\n labels={labels}\n series={series}\n style={{\n position: 'absolute',\n top: 16,\n left: 16,\n ...customLegendSx,\n }}\n title={title}\n valueFormatterString={valueFormatterString}\n />\n )}\n </Box>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"LineChart.es.js","names":[],"sources":["../../../../src/common/components/charts/LineChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport type { SxProps } from '@mui/material/styles'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { AllSeriesType } from '@mui/x-charts'\nimport { BarPlot } from '@mui/x-charts/BarChart'\nimport { ChartContainer as ResponsiveChartContainer } from '@mui/x-charts/ChartContainer'\nimport { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'\nimport { ChartsText, type ChartsTextProps } from '@mui/x-charts/ChartsText'\nimport { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'\nimport { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip'\nimport { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'\nimport { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'\nimport { AreaPlot, LinePlot, MarkPlot } from '@mui/x-charts/LineChart'\n\nimport { stripChartSlotProps } from './chartSlotProps'\nimport CustomLegend from './linechart/CustomLegend'\nimport { getMarkerShape } from './linechart/utils/markerShapes'\nimport { CustomLine } from './linechart/CustomLine'\nimport { CustomMark, MarkHandlers } from './linechart/CustomMark'\nimport { CustomTooltip } from './linechart/CustomTooltip'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { generateEqualIntervals } from '../../../core/utils/NumberFormatting'\n\nexport type LineChartDataset = { x: string; y: number }[]\nexport type LineChartLabel = string \| { label: string; amount: number }\nexport type TooltipLabel = LineChartLabel & { header?: string }\n\n// X-axis tick that shows only the first letter of the label (e.g. \"J\" for\n// \"Jan\") so all labels fit in small/narrow views. role=\"img\" + aria-label give\n// the tick a reliable accessible name (aria-label alone on a bare SVG <text> is\n// inconsistently announced), so screen readers still get the full label.\nconst NarrowXAxisTickLabel = (props: ChartsTextProps) => {\n const fullLabel = typeof props.text === 'string' ? props.text : ''\n // Array.from keeps surrogate pairs / combining marks intact (non-Latin locales).\n const singleLetter = Array.from(fullLabel.trim())[0] ?? ''\n if (!singleLetter) return <ChartsText {...props} />\n return <ChartsText {...props} aria-label={fullLabel} role=\"img\" text={singleLetter} />\n}\n\nconst NARROW_X_AXIS_SLOTS = { axisTickLabel: NarrowXAxisTickLabel }\n\ntype LineChartCurve =\n \| 'catmullRom'\n \| 'linear'\n \| 'monotoneX'\n \| 'monotoneY'\n \| 'natural'\n \| 'step'\n \| 'stepBefore'\n \| 'stepAfter'\n \| 'bump'\n \| 'bumpX'\n \| 'bumpY'\n\ninterface LineChartProps {\n areaColor?: string\n axisColor?: string\n baseline?: string\n chartFor?: string\n chartXaxisSx?: SxProps\n chartYaxisSx?: SxProps\n // Because theme chart colors are typed string\|undefined\n colors: (string \| undefined)[]\n curveType?: LineChartCurve\n customLegendVariant?: string\n customLegendSx?: SxProps\n customLegendBoxSx?: SxProps\n customTooltipLabels?: TooltipLabel[][]\n datasets: LineChartDataset[]\n height?: number\n isCurrency?: boolean\n isGraphClippingXAxis?: boolean\n labels: LineChartLabel[]\n labelBackgroundColor?: string\n labelFontColor?: string\n labelFontSize?: number\n margin?: { top?: number; right?: number; bottom?: number; left?: number }\n markHandlers?: MarkHandlers\n markStyles?: (markIndex: number) => React.CSSProperties & {\n markLabelStyles?: React.CSSProperties\n }\n minRange?: number\n maxRange?: number\n // When true, x-axis labels render as a single letter (with the full label kept\n // as the accessible name), so months don't overlap and get dropped in\n // small/narrow views. Implies showAllXAxisLabels.\n narrowXAxisLabels?: boolean\n onItemClick?: () => void\n // When true, every x-axis tick label is shown instead of letting x-charts drop\n // overlapping ones. Opt-in so it doesn't affect other charts that rely on the\n // default thinning.\n showAllXAxisLabels?: boolean\n peerAverage?: number\n showArea?: boolean\n showAverage?: boolean\n showAxisHighlight?: boolean\n showBars?: boolean\n showLegend?: boolean\n showMark?: boolean\n showMarkLabel?: boolean\n showTooltip?: boolean\n showXAxis?: boolean\n showXAxisTicks?: boolean\n showYAxis?: boolean\n showYAxisTicks?: boolean\n tickIntervals?: any[] \| 'auto' \| ((value: any, index: number) => boolean) \| undefined\n title?: string\n useCustomMark?: boolean\n valueFormatterString?: string\n width?: number\n xAxisScaleType?: 'band' \| 'point'\n}\n\n// TODO: Remove negative values and use a proper layout to support X-Charts v8\n\nexport const LineChart: React.FC<LineChartProps> = ({\n areaColor,\n axisColor,\n baseline = 'max',\n chartFor,\n chartXaxisSx,\n chartYaxisSx,\n colors,\n curveType = 'linear',\n customLegendVariant,\n customLegendSx,\n customLegendBoxSx,\n customTooltipLabels,\n datasets,\n height,\n isCurrency,\n isGraphClippingXAxis = false,\n labels,\n labelBackgroundColor,\n labelFontColor,\n labelFontSize,\n margin,\n markHandlers,\n markStyles,\n minRange,\n maxRange,\n narrowXAxisLabels = false,\n showAllXAxisLabels = false,\n onItemClick,\n peerAverage,\n showArea = false,\n showAverage = false,\n showAxisHighlight = false,\n showBars = false,\n showLegend = false,\n showMark = true,\n showMarkLabel = false,\n showTooltip = false,\n showXAxis = false,\n showXAxisTicks = false,\n showYAxis = false,\n showYAxisTicks = false,\n title,\n useCustomMark = false,\n valueFormatterString,\n width,\n xAxisScaleType,\n}) => {\n const theme = useTheme()\n\n // Data for the X axis\n const xData = datasets.flat().map((item) => item.x)\n const yData = datasets.flat().map((item) => item.y)\n\n // Guard the empty-data case: with no points, reduce()/Math.min()/Math.max()\n // produce NaN/±Infinity which flow into the y-axis and make x-charts warn\n // \"the value NaN does not exist in the data of y axis\". Default to 0 so an\n // empty/loading chart renders a valid (flat) axis instead.\n const average = peerAverage\n ? peerAverage\n : yData.length\n ? Math.round(yData.reduce((value, total) => total + value, 0) / yData.length)\n : 0\n\n // Used for the min and max Y axis values\n const yMin = yData.length ? Math.floor(Math.min(...yData) / 100) * 100 : 0\n const yMax = yData.length ? Math.ceil(Math.max(...yData) / 100) * 100 : 0\n\n const series = datasets.map((data, index) => {\n return {\n type: showBars ? 'bar' : 'line',\n curve: curveType,\n color: showBars ? theme.palette.chart?.chart6 : (colors[index] ?? theme.palette.primary.main),\n data: data.map((item) => item.y),\n area: showArea,\n baseline: baseline,\n showMark: true,\n shape: getMarkerShape(index),\n valueFormatter: (value: number) =>\n valueFormatterString ? formatCurrency(value \|\| 0, valueFormatterString) : String(value),\n }\n })\n\n const defaultMargin = {\n top: 60,\n right: 35,\n bottom: 25,\n left: -10,\n }\n\n // Merge default margin with any provided custom margin\n const chartMargin = {\n ...defaultMargin,\n ...margin,\n }\n\n let rangeMin = minRange ?? yMin\n let rangeMax = maxRange ?? yMax\n if (chartFor === 'networthChart') {\n const valueRange = yMax - yMin\n\n const paddingRatio = valueRange < yMax * 0.05 ? 0.25 : 0.2\n const padding = Math.max(valueRange * paddingRatio, yMax * 0.015)\n rangeMin = yMin - padding < 0 ? yMin : yMin - padding\n rangeMax = yMax + padding\n }\n\n const getTickInterval = () => {\n if (chartFor === 'creditOverTime') {\n return generateEqualIntervals(rangeMin, 850, 5)\n } else if (chartFor === 'networthChart') {\n return generateEqualIntervals(rangeMin, rangeMax, 5)\n }\n return undefined\n }\n return (\n <Box\n sx={{\n position: 'relative',\n touchAction: 'pan-y', // Allow vertical scrolling\n '& svg': {\n touchAction: 'pan-y', // Allow vertical scrolling on SVG\n userSelect: 'none', // Prevent text selection\n },\n '& .recharts-wrapper': {\n touchAction: 'pan-y', // For Recharts library specifically\n },\n }}\n >\n <ResponsiveChartContainer\n height={height}\n margin={chartMargin}\n series={series as AllSeriesType[]}\n sx={{\n '& .MuiBarLabel-root': {\n fontSize: 10,\n fontWeight: 600,\n },\n '& .MuiAreaElement-root': {\n opacity: 0.15,\n },\n '& .MuiChartsAxis-tickLabel > tspan': {\n fontFamily: theme.typography.body2.fontFamily,\n },\n '& .MuiLineChart-markLabel': {\n fontFamily: theme.typography.body2.fontFamily,\n },\n }}\n width={width}\n xAxis={[\n {\n data: xData,\n scaleType: xAxisScaleType \|\| (showBars ? 'band' : 'point'),\n // Show every tick instead of letting x-charts drop overlapping ones.\n ...((showAllXAxisLabels \|\| narrowXAxisLabels) && { tickLabelInterval: () => true }),\n },\n ]}\n yAxis={[\n {\n tickInterval: getTickInterval(),\n min: isGraphClippingXAxis ? -22 : rangeMin,\n max: rangeMax \|\| 100,\n colorMap:\n showArea && series.length < 2\n ? {\n type: 'continuous',\n min: rangeMin,\n max: rangeMax,\n color: [\n theme.palette.background.paper,\n colors[0] ?? theme.palette.primary.main,\n ],\n }\n : undefined,\n valueFormatter: (value: number) =>\n valueFormatterString ? formatCurrency(value, valueFormatterString) : String(value),\n width: 62,\n },\n ]}\n >\n {/ Provides the average line - positioned first to be behind other elements /}\n {showAverage && (\n <ChartsReferenceLine\n lineStyle={{\n stroke: labelBackgroundColor\n ? theme.palette.neutral.main\n : theme.palette.neutral.dark,\n strokeDasharray: '10, 8',\n strokeWidth: 2,\n }}\n y={average}\n />\n )}\n\n {/ Area plot provides gradiant below the line /}\n {/* Note: Must be above the LinePlot for some style rules to work /}\n <AreaPlot\n onItemClick={onItemClick}\n {...(areaColor && {\n slots: {\n area: (props) => {\n return (\n <g>\n <defs>\n <linearGradient id=\"customGradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor={areaColor} />\n <stop offset=\"100%\" stopColor={areaColor} stopOpacity={0.02} />\n </linearGradient>\n </defs>\n <path {...stripChartSlotProps(props)} fill={`url(#customGradient)`} />\n </g>\n )\n },\n },\n })}\n />\n\n {/* Line plot provides the data line /}\n <LinePlot\n onItemClick={onItemClick}\n slots={{\n line: (props) => (\n <CustomLine\n {...props}\n lineColor={areaColor ?? props.ownerState.color ?? theme.palette.primary.main}\n />\n ),\n }}\n />\n\n {/ Mark plot provides the circles /}\n <MarkPlot\n onItemClick={onItemClick}\n slots={\n useCustomMark\n ? {\n mark: (props) => {\n return (\n <CustomMark\n handlers={markHandlers}\n labelBackgroundColor={labelBackgroundColor}\n labelFontColor={labelFontColor}\n labelFontSize={labelFontSize}\n showLabel={showMarkLabel}\n showMark={showMark \|\| props.dataIndex === datasets[0].length - 1}\n style={markStyles?.(props.dataIndex) ?? {}}\n valueFormatterString={valueFormatterString}\n yData={yData}\n {...props}\n />\n )\n },\n }\n : undefined\n }\n />\n\n <BarPlot\n barLabel={(item) => (Number(item.value) > 0 ? `$${item.value}` : null)}\n borderRadius={10}\n />\n\n {/ Provides the X axis line and values /}\n <ChartsXAxis\n disableLine={!showXAxis}\n disableTicks={!showXAxisTicks}\n slots={narrowXAxisLabels ? NARROW_X_AXIS_SLOTS : undefined}\n slotProps={\n axisColor\n ? {\n axisLine: {\n style: {\n stroke: axisColor,\n },\n },\n axisTick: {\n style: {\n stroke: axisColor,\n },\n },\n }\n : {}\n }\n sx={{ ...chartXaxisSx }}\n />\n\n {/ Provides the Y axis values */}\n <ChartsYAxis\n disableLine={!showYAxis}\n disableTicks={!showYAxisTicks}\n slotProps={\n axisColor\n ? {\n axisLine: {\n style: {\n stroke: axisColor,\n },\n },\n axisTick: {\n style: {\n stroke: axisColor,\n },\n },\n }\n : {}\n }\n sx={{ ...chartYaxisSx }}\n />\n\n {/ Add vertical crosshair on hover */}\n {showAxisHighlight && <ChartsAxisHighlight x=\"line\" />}\n\n {showTooltip && (\n <ChartsTooltipContainer trigger=\"axis\">\n <CustomTooltip\n customLabels={customTooltipLabels}\n isCurrency={isCurrency}\n labels={labels}\n series={series}\n valueFormatterString={valueFormatterString}\n />\n </ChartsTooltipContainer>\n )}\n </ResponsiveChartContainer>\n\n {showLegend && (\n <CustomLegend\n average={showAverage ? average : undefined}\n customLegendBoxSx={customLegendBoxSx}\n customLegendVariant={customLegendVariant}\n labels={labels}\n series={series}\n style={{\n position: 'absolute',\n top: 16,\n left: 16,\n ...customLegendSx,\n }}\n title={title}\n valueFormatterString={valueFormatterString}\n />\n )}\n </Box>\n )\n}\n"],"mappings":"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"}

package/dist/common/components/listitems/CollapseExpandListItem.d.ts CHANGED Viewed

@@ -3,5 +3,5 @@ interface CollapseExpandListItemProps {
     isExpanded: boolean;
     onClick: () => void;
 }
-export declare const CollapseExpandListItem: React.FC<CollapseExpandListItemProps>;
+export declare const CollapseExpandListItem: React.FunctionComponent<CollapseExpandListItemProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/common/components/listitems/CollapseExpandListItem.es.js CHANGED Viewed

@@ -1,39 +1,40 @@
-import "react";
-import { observer as m } from "mobx-react-lite";
-import i from "@mui/material/Stack";
-import { Text as n } from "@mxenabled/mxui";
-import { ExpandLess as s, ExpandMore as a } from "@mxenabled/mx-icons";
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import { useTheme as l } from "@mui/material/styles";
-import c from "@mui/material/ListItem";
-import f from "@mui/material/ListItemButton";
-import x from "@mui/material/ListItemIcon";
-import d from "@mui/material/ListItemText";
-var V = m(({ isExpanded: t, onClick: o }) => {
-  const e = l();
-  return /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(f, {
+import i from "react";
+import { observer as n } from "mobx-react-lite";
+import s from "@mui/material/Stack";
+import { Text as a } from "@mxenabled/mxui";
+import { ExpandLess as p, ExpandMore as f } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { useTheme as c } from "@mui/material/styles";
+import x from "@mui/material/ListItem";
+import d from "@mui/material/ListItemButton";
+import h from "@mui/material/ListItemIcon";
+import I from "@mui/material/ListItemText";
+var V = n(i.forwardRef(({ isExpanded: t, onClick: o }, m) => {
+  const e = c();
+  return /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(d, {
+    ref: m,
     onClick: o,
     sx: { justifyContent: "center" },
-    children: /* @__PURE__ */ p(i, {
+    children: /* @__PURE__ */ l(s, {
       sx: {
         color: e.palette.primary.main,
         flexDirection: "row",
         alignItems: "center"
       },
-      children: [/* @__PURE__ */ r(d, { children: /* @__PURE__ */ r(n, {
+      children: [/* @__PURE__ */ r(I, { children: /* @__PURE__ */ r(a, {
         bold: !0,
         variant: "body2",
         children: t ? "View less" : "View more"
-      }) }), /* @__PURE__ */ r(x, {
+      }) }), /* @__PURE__ */ r(h, {
         sx: { color: e.palette.primary.main },
-        children: t ? /* @__PURE__ */ r(s, {}) : /* @__PURE__ */ r(a, { sx: {
+        children: t ? /* @__PURE__ */ r(p, {}) : /* @__PURE__ */ r(f, { sx: {
           transition: "transform 0.3s ease-in-out",
           transform: t ? "rotate(180deg)" : "rotate(0deg)"
         } })
       })]
     })
   }) });
-});
+}));
 export {
   V as CollapseExpandListItem
 };

package/dist/common/components/listitems/CollapseExpandListItem.es.js.map CHANGED Viewed

	@@ -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"}

package/dist/trends/components/CategoriesList.es.js CHANGED Viewed

@@ -1,64 +1,72 @@
-import { useEvent as v, useGlobalCopyStore as T, useTrendsStore as A } from "../../common/context/hooks.es.js";
-import { useScreenSize as D } from "../../common/hooks/useScreenSize.es.js";
-import { ANALYTICS_EVENTS as M } from "../../common/constants/Analytics.es.js";
-import { TRENDS_ANALYTICS_METADATA as _ } from "../constants/TrendsWidget.es.js";
-import { CollapseExpandListItem as b } from "../../common/components/listitems/CollapseExpandListItem.es.js";
-import a from "./CategoriesListItem.es.js";
-import d from "react";
-import { observer as k } from "mobx-react-lite";
-import c from "@mui/material/Stack";
+import { useEvent as b, useGlobalCopyStore as A, useTrendsStore as D } from "../../common/context/hooks.es.js";
+import { useScreenSize as R } from "../../common/hooks/useScreenSize.es.js";
+import { ANALYTICS_EVENTS as k } from "../../common/constants/Analytics.es.js";
+import { TRENDS_ANALYTICS_METADATA as M } from "../constants/TrendsWidget.es.js";
+import { CollapseExpandListItem as _ } from "../../common/components/listitems/CollapseExpandListItem.es.js";
+import f from "./CategoriesListItem.es.js";
+import i from "react";
+import { observer as w } from "mobx-react-lite";
+import u from "@mui/material/Stack";
 import { H3 as N } from "@mxenabled/mxui";
 import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import f from "@mui/material/List";
-import w from "@mui/material/Collapse";
-var J = k(({ availableHeight: n = 0, onCategoryClick: l }) => {
-  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;
-  d.useEffect(() => {
-    const t = Math.floor(n / 64) - 1, s = o.length + i.length;
-    t !== o.length && (L(x ? Math.max(t, 5) : 5), m(t >= s));
-  }, [n]);
-  const I = () => {
-    m(!r), E(M.TRENDS_CLICK_VIEW_MORE, { ..._ });
-  }, p = o.length + (r ? i.length : 0);
-  return /* @__PURE__ */ h(c, {
+import L from "@mui/material/List";
+import V from "@mui/material/Collapse";
+var P = w(({ availableHeight: a = 0, onCategoryClick: m }) => {
+  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;
+  i.useEffect(() => {
+    const t = Math.floor(a / 64) - 1, s = o.length + n.length;
+    t !== o.length && (g(S ? Math.max(t, 5) : 5), p(t >= s));
+  }, [a]);
+  const v = () => {
+    const t = !r;
+    l.current = t, p(t), I(k.TRENDS_CLICK_VIEW_MORE, { ...M });
+  }, c = o.length + (r ? n.length : 0);
+  return /* @__PURE__ */ h(u, {
     sx: { width: "100%" },
-    children: [/* @__PURE__ */ e(c, {
+    children: [/* @__PURE__ */ e(u, {
       sx: {
         pb: 4,
         pt: 16,
         px: 16
       },
-      children: /* @__PURE__ */ e(N, { children: g.categories })
-    }), /* @__PURE__ */ h(f, { children: [
-      o.map((t, s) => /* @__PURE__ */ e(a, {
+      children: /* @__PURE__ */ e(N, { children: C.categories })
+    }), /* @__PURE__ */ h(L, { children: [
+      o.map((t, s) => /* @__PURE__ */ e(f, {
         ...t,
-        isLastItem: s === p - 1,
-        onClick: t.transactions.length > 0 ? () => l(t) : void 0,
+        isLastItem: s === c - 1,
+        onClick: t.transactions.length > 0 ? () => m(t) : void 0,
         showDivider: !0
       }, t.guid)),
-      /* @__PURE__ */ e(w, {
+      /* @__PURE__ */ e(V, {
         component: "li",
         in: r,
+        onEntered: () => {
+          l.current && (l.current = !1, d.current?.scrollIntoView({
+            block: "nearest",
+            behavior: "smooth"
+          }));
+        },
         sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
-        children: /* @__PURE__ */ e(f, { children: i.map((t, s) => {
-          const S = o.length + s;
-          return /* @__PURE__ */ e(a, {
+        children: /* @__PURE__ */ e(L, { children: n.map((t, s) => {
+          const T = o.length + s;
+          return /* @__PURE__ */ e(f, {
             ...t,
-            isLastItem: S === p - 1,
-            onClick: t.transactions.length > 0 ? () => l(t) : void 0,
+            isLastItem: T === c - 1,
+            onClick: t.transactions.length > 0 ? () => m(t) : void 0,
             showDivider: !0
           }, t.guid);
         }) })
       }),
-      i.length > 0 && /* @__PURE__ */ e(b, {
+      n.length > 0 && /* @__PURE__ */ e(_, {
+        ref: d,
         isExpanded: r,
-        onClick: I
+        onClick: v
       })
     ] })]
   });
 });
 export {
-  J as default
+  P as default
 };
 //# sourceMappingURL=CategoriesList.es.js.map

package/dist/trends/components/CategoriesList.es.js.map CHANGED Viewed

	@@ -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/dist/trends/components/TrendsChartTotals.es.js CHANGED Viewed

@@ -1,14 +1,16 @@
-import { useEvent as w, useGlobalCopyStore as v } from "../../common/context/hooks.es.js";
-import { useScreenSize as x } from "../../common/hooks/useScreenSize.es.js";
-import { ANALYTICS_EVENTS as E } from "../../common/constants/Analytics.es.js";
-import { LineChart as H } from "../../common/components/charts/LineChart.es.js";
-import { getIncomeTotals as I, getSpendingTotals as _ } from "../utils/SpendingData.es.js";
-import { TRENDS_ANALYTICS_METADATA as k } from "../constants/TrendsWidget.es.js";
-import m from "react";
-import { observer as D } from "mobx-react-lite";
-import { jsx as L } from "react/jsx-runtime";
-import { useTheme as M } from "@mui/material/styles";
-var N = (t, e) => [I(t, e), _(t, e)].filter((o) => o.length > 0), y = (t, e) => {
+import { useEvent as E, useGlobalCopyStore as H } from "../../common/context/hooks.es.js";
+import { useScreenSize as I } from "../../common/hooks/useScreenSize.es.js";
+import { ANALYTICS_EVENTS as N } from "../../common/constants/Analytics.es.js";
+import { useDimensions as D } from "../../common/hooks/useDimensions.es.js";
+import { LineChart as M } from "../../common/components/charts/LineChart.es.js";
+import { getIncomeTotals as k, getSpendingTotals as R } from "../utils/SpendingData.es.js";
+import { TRENDS_ANALYTICS_METADATA as X } from "../constants/TrendsWidget.es.js";
+import p from "react";
+import { observer as Y } from "mobx-react-lite";
+import { jsx as T } from "react/jsx-runtime";
+import { useTheme as y } from "@mui/material/styles";
+import B from "@mui/material/Box";
+var W = 12, O = 380, j = (t, e) => [k(t, e), R(t, e)].filter((o) => o.length > 0), z = (t, e) => {
   const [o, c] = t, s = o, l = c ?? o, r = [];
   if (s) {
     const a = s.reduce((n, i) => n + i.y, 0);
@@ -25,34 +27,40 @@ var N = (t, e) => [I(t, e), _(t, e)].filter((o) => o.length > 0), y = (t, e) =>
     });
   }
   return r;
-}, Y = ({ availableHeight: t = 0, minHeight: e = 500, selectedDateRange: o, totals: c }) => {
-  const s = M(), { onEvent: l } = w(), { trends: r } = v(), { isSmallMobile: a, isMobile: n, isSmallTablet: i, isTablet: u } = x(), p = [s.palette.chart?.chart1, s.palette.chart?.chart2], h = N(c, o), T = y(h, r), [d, g] = m.useState(0), b = 458, f = 195, A = 56, C = n || a ? f : i || u ? b : d;
-  return m.useEffect(() => {
-    const S = Math.max(t - A, e);
-    g(S);
-  }, [t]), /* @__PURE__ */ L(H, {
-    baseline: "min",
-    colors: p,
-    curveType: "bump",
-    datasets: h,
-    height: C,
-    labels: T,
-    onItemClick: () => {
-      l(E.TRENDS_CLICK_CHART, k);
-    },
-    showArea: !0,
-    showAxisHighlight: !0,
-    showLegend: !0,
-    showTooltip: !0,
-    showXAxis: !0,
-    showXAxisTicks: !0,
-    showYAxis: !0,
-    showYAxisTicks: !0,
-    valueFormatterString: "0.0a"
+}, F = ({ availableHeight: t = 0, minHeight: e = 500, selectedDateRange: o, totals: c }) => {
+  const s = y(), { onEvent: l } = E(), { trends: r } = H(), { isSmallMobile: a, isMobile: n, isSmallTablet: i, isTablet: d } = I(), [A, { width: u }] = D(), f = [s.palette.chart?.chart1, s.palette.chart?.chart2], h = j(c, o), b = z(h, r), g = Math.max(0, ...h.map((m) => m.length)), C = u > 0 && u <= O && g >= W, [S, w] = p.useState(0), x = 458, _ = 195, L = 56, v = n || a ? _ : i || d ? x : S;
+  return p.useEffect(() => {
+    const m = Math.max(t - L, e);
+    w(m);
+  }, [t]), /* @__PURE__ */ T(B, {
+    ref: A,
+    sx: { width: "100%" },
+    children: /* @__PURE__ */ T(M, {
+      baseline: "min",
+      colors: f,
+      curveType: "bump",
+      datasets: h,
+      height: v,
+      labels: b,
+      narrowXAxisLabels: C,
+      onItemClick: () => {
+        l(N.TRENDS_CLICK_CHART, X);
+      },
+      showAllXAxisLabels: !0,
+      showArea: !0,
+      showAxisHighlight: !0,
+      showLegend: !0,
+      showTooltip: !0,
+      showXAxis: !0,
+      showXAxisTicks: !0,
+      showYAxis: !0,
+      showYAxisTicks: !0,
+      valueFormatterString: "0.0a"
+    })
   });
-}, O = D(Y);
+}, st = Y(F);
 export {
-  O as default
+  st as default
 };
 //# sourceMappingURL=TrendsChartTotals.es.js.map

package/dist/trends/components/TrendsChartTotals.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TrendsChartTotals.es.js","names":[],"sources":["../../../src/trends/components/TrendsChartTotals.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport { ANALYTICS_EVENTS, useEvent, useGlobalCopyStore, useScreenSize } from '../../common'\nimport { DateRange, MonthlyCategoryTotals, TrendsCopy } from '../../core'\nimport { LineChart } from '../../common/components/charts/LineChart'\nimport type { LineChartDataset, LineChartLabel } from '../../common/components/charts/LineChart'\n\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\nimport { getIncomeTotals, getSpendingTotals } from '../utils/SpendingData'\n\nconst getDatasets = (totals: MonthlyCategoryTotals[], dateRange: DateRange): LineChartDataset[] => {\n const incomeData = getIncomeTotals(totals, dateRange)\n const spendingData = getSpendingTotals(totals, dateRange)\n return [incomeData, spendingData].filter((data) => data.length > 0)\n}\n\nconst getLabels = (datasets: LineChartDataset[], copy: TrendsCopy) => {\n const [dataA, dataB] = datasets\n const credits = dataA\n const debits = dataB ?? dataA\n const labels: LineChartLabel[] = []\n\n if (credits) {\n const totalIncome = credits.reduce((sum, item) => sum + item.y, 0)\n labels.push({ label: copy.income_label, amount: totalIncome })\n }\n\n if (debits) {\n const totalSpending = debits.reduce((sum, item) => sum + item.y, 0)\n labels.push({ label: copy.spending_label, amount: totalSpending })\n }\n\n return labels\n}\n\ninterface TrendsChartTotalsProps {\n availableHeight?: number\n minHeight?: number\n selectedDateRange: DateRange\n totals: MonthlyCategoryTotals[]\n}\n\nconst TrendsChartTotals: React.FC<TrendsChartTotalsProps> = ({\n availableHeight = 0,\n minHeight = 500,\n selectedDateRange,\n totals,\n}) => {\n const theme = useTheme()\n const { onEvent } = useEvent()\n const { trends: trendsCopy } = useGlobalCopyStore()\n const { isSmallMobile, isMobile, isSmallTablet, isTablet } = useScreenSize()\n\n const colors = [theme.palette.chart?.chart1, theme.palette.chart?.chart2]\n const datasets = getDatasets(totals, selectedDateRange)\n const labels = getLabels(datasets, trendsCopy)\n\n const [chartDesktopHeight, setChartDesktopHeight] = React.useState<number>(0)\n const chartTabletHeight = 458\n const chartMobileHeight = 195\n const legendHeight = 56\n\n // prettier-ignore\n // eslint-disable-next-line no-nested-ternary\n const chartHeight = (isMobile \|\| isSmallMobile) ? chartMobileHeight :\n (isSmallTablet \|\| isTablet) ? chartTabletHeight : chartDesktopHeight;\n\n // Control responsive chart height based on available height\n React.useEffect(() => {\n const newChartHeight = Math.max(availableHeight - legendHeight, minHeight)\n setChartDesktopHeight(newChartHeight)\n }, [availableHeight])\n\n const handleItemClick = () => {\n onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_CHART, TRENDS_ANALYTICS_METADATA)\n }\n\n return (\n <LineChart\n baseline=\"min\"\n colors={colors}\n curveType=\"bump\"\n datasets={datasets}\n height={chartHeight}\n labels={labels}\n onItemClick={handleItemClick}\n showArea={true}\n showAxisHighlight={true}\n showLegend={true}\n showTooltip={true}\n showXAxis={true}\n showXAxisTicks={true}\n showYAxis={true}\n showYAxisTicks={true}\n valueFormatterString=\"0.0a\"\n />\n )\n}\n\nexport default observer(TrendsChartTotals)\n"],"mappings":"~~;;;;;;;;;;AAaA~~,IAAM,IAAA,CAAe,GAAiC,MAG7C,CAFY,EAAgB,GAAQ,CAEnC,GADa,EAAkB,GAAQ,CAC3B,CAAY,EAAE,OAAA,CAAQ,MAAS,EAAK,SAAS,CAAC,GAG9D,IAAA,CAAa,GAA8B,MAAqB;AACpE,QAAM,CAAC,GAAO,CAAA,IAAS,GACjB,IAAU,GACV,IAAS,KAAS,GAClB,IAA2B,CAAC;AAElC,MAAI,GAAS;AACX,UAAM,IAAc,EAAQ,OAAA,CAAQ,GAAK,MAAS,IAAM,EAAK,GAAG,CAAC;AACjE,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAc,QAAQ;AAAA,IAAY,CAAC;AAAA,EAC/D;AAEA,MAAI,GAAQ;AACV,UAAM,IAAgB,EAAO,OAAA,CAAQ,GAAK,MAAS,IAAM,EAAK,GAAG,CAAC;AAClE,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAgB,QAAQ;AAAA,IAAc,CAAC;AAAA,EACnE;AAEA,SAAO;AACT,GASM,IAAA,CAAuD,EAC3D,iBAAA,IAAkB,GAClB,WAAA,IAAY,KACZ,mBAAA,GACA,QAAA,EAAA,MACI;AACJ,QAAM,IAAQ,EAAS,GACjB,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,EAAE,eAAA,GAAe,UAAA,GAAU,eAAA,GAAe,UAAA,EAAA,IAAa,EAAc,~~GAErE~~,IAAS,CAAC,EAAM,QAAQ,OAAO,QAAQ,EAAM,QAAQ,OAAO,MAAM,GAClE,IAAW,EAAY,GAAQ,CAAiB,GAChD,IAAS,EAAU,GAAU,CAAU,~~GAEvC~~,CAAC,GAAoB,CAAA,IAAyB,EAAM,SAAiB,CAAC,GACtE,IAAoB,KACpB,IAAoB,KACpB,IAAe,IAIf,IAAe,KAAY,IAAiB,IACjD,KAAiB,IAAY,IAAoB;AAGlD,SAAA,EAAM,UAAA,MAAgB;AACpB,UAAM,IAAiB,KAAK,IAAI,IAAkB,GAAc,CAAS;AACzE,IAAA,EAAsB,CAAc;AAAA,EACtC,GAAG,CAAC,CAAe,CAAC,GAOlB,gBAAA,EAAC,GAAD;AAAA,~~IACE~~,UAAS;AAAA,~~IACD~~,QAAA;AAAA,~~IACR~~,WAAU;AAAA,~~IACA~~,UAAA;AAAA,~~IACV~~,QAAQ;AAAA,~~IACA~~,QAAA;AAAA,~~IACR~~,~~aAZE~~,MAAwB;AAC5B,~~MAAA~~,EAAQ,EAAiB,oBAAoB,CAAyB;AAAA,~~IACxE~~;AAAA,~~IAWI~~,UAAU;AAAA,~~IACV~~,mBAAmB;AAAA,~~IACnB~~,YAAY;AAAA,~~IACZ~~,aAAa;AAAA,~~IACb~~,WAAW;AAAA,~~IACX~~,gBAAgB;AAAA,~~IAChB~~,WAAW;AAAA,~~IACX~~,gBAAgB;AAAA,~~IAChB~~,sBAAqB;AAAA,~~EACtB~~,CAAA;~~AAEL~~,GAEA,~~IAAe~~,EAAS,CAAiB"}
1	+ {"version":3,"file":"TrendsChartTotals.es.js","names":[],"sources":["../../../src/trends/components/TrendsChartTotals.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport { useTheme } from '@mui/material/styles'\n\nimport { ANALYTICS_EVENTS, useEvent, useGlobalCopyStore, useScreenSize } from '../../common'\nimport { DateRange, MonthlyCategoryTotals, TrendsCopy } from '../../core'\nimport { useDimensions } from '../../common/hooks/useDimensions'\nimport { LineChart } from '../../common/components/charts/LineChart'\nimport type { LineChartDataset, LineChartLabel } from '../../common/components/charts/LineChart'\n\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\nimport { getIncomeTotals, getSpendingTotals } from '../utils/SpendingData'\n\n// Single-letter month labels only kick in for the 12-month (1 Year) view once\n// the chart container is this narrow; wider containers keep full labels.\nconst MONTHS_IN_YEAR = 12\nconst NARROW_LABELS_MAX_WIDTH_PX = 380\n\nconst getDatasets = (totals: MonthlyCategoryTotals[], dateRange: DateRange): LineChartDataset[] => {\n const incomeData = getIncomeTotals(totals, dateRange)\n const spendingData = getSpendingTotals(totals, dateRange)\n return [incomeData, spendingData].filter((data) => data.length > 0)\n}\n\nconst getLabels = (datasets: LineChartDataset[], copy: TrendsCopy) => {\n const [dataA, dataB] = datasets\n const credits = dataA\n const debits = dataB ?? dataA\n const labels: LineChartLabel[] = []\n\n if (credits) {\n const totalIncome = credits.reduce((sum, item) => sum + item.y, 0)\n labels.push({ label: copy.income_label, amount: totalIncome })\n }\n\n if (debits) {\n const totalSpending = debits.reduce((sum, item) => sum + item.y, 0)\n labels.push({ label: copy.spending_label, amount: totalSpending })\n }\n\n return labels\n}\n\ninterface TrendsChartTotalsProps {\n availableHeight?: number\n minHeight?: number\n selectedDateRange: DateRange\n totals: MonthlyCategoryTotals[]\n}\n\nconst TrendsChartTotals: React.FC<TrendsChartTotalsProps> = ({\n availableHeight = 0,\n minHeight = 500,\n selectedDateRange,\n totals,\n}) => {\n const theme = useTheme()\n const { onEvent } = useEvent()\n const { trends: trendsCopy } = useGlobalCopyStore()\n const { isSmallMobile, isMobile, isSmallTablet, isTablet } = useScreenSize()\n const [chartRef, { width: chartWidth }] = useDimensions()\n\n const colors = [theme.palette.chart?.chart1, theme.palette.chart?.chart2]\n const datasets = getDatasets(totals, selectedDateRange)\n const labels = getLabels(datasets, trendsCopy)\n\n // Measured from the chart container, not the device, so it also handles the\n // widget embedded in a small iframe on a larger screen.\n const monthCount = Math.max(0, ...datasets.map((data) => data.length))\n const useNarrowXAxisLabels =\n chartWidth > 0 && chartWidth <= NARROW_LABELS_MAX_WIDTH_PX && monthCount >= MONTHS_IN_YEAR\n\n const [chartDesktopHeight, setChartDesktopHeight] = React.useState<number>(0)\n const chartTabletHeight = 458\n const chartMobileHeight = 195\n const legendHeight = 56\n\n // prettier-ignore\n // eslint-disable-next-line no-nested-ternary\n const chartHeight = (isMobile \|\| isSmallMobile) ? chartMobileHeight :\n (isSmallTablet \|\| isTablet) ? chartTabletHeight : chartDesktopHeight;\n\n // Control responsive chart height based on available height\n React.useEffect(() => {\n const newChartHeight = Math.max(availableHeight - legendHeight, minHeight)\n setChartDesktopHeight(newChartHeight)\n }, [availableHeight])\n\n const handleItemClick = () => {\n onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_CHART, TRENDS_ANALYTICS_METADATA)\n }\n\n return (\n <Box ref={chartRef} sx={{ width: '100%' }}>\n <LineChart\n baseline=\"min\"\n colors={colors}\n curveType=\"bump\"\n datasets={datasets}\n height={chartHeight}\n labels={labels}\n narrowXAxisLabels={useNarrowXAxisLabels}\n onItemClick={handleItemClick}\n showAllXAxisLabels={true}\n showArea={true}\n showAxisHighlight={true}\n showLegend={true}\n showTooltip={true}\n showXAxis={true}\n showXAxisTicks={true}\n showYAxis={true}\n showYAxisTicks={true}\n valueFormatterString=\"0.0a\"\n />\n </Box>\n )\n}\n\nexport default observer(TrendsChartTotals)\n"],"mappings":";;;;;;;;;;;;AAiBA,IAAM,IAAiB,IACjB,IAA6B,KAE7B,IAAA,CAAe,GAAiC,MAG7C,CAFY,EAAgB,GAAQ,CAEnC,GADa,EAAkB,GAAQ,CAC3B,CAAY,EAAE,OAAA,CAAQ,MAAS,EAAK,SAAS,CAAC,GAG9D,IAAA,CAAa,GAA8B,MAAqB;AACpE,QAAM,CAAC,GAAO,CAAA,IAAS,GACjB,IAAU,GACV,IAAS,KAAS,GAClB,IAA2B,CAAC;AAElC,MAAI,GAAS;AACX,UAAM,IAAc,EAAQ,OAAA,CAAQ,GAAK,MAAS,IAAM,EAAK,GAAG,CAAC;AACjE,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAc,QAAQ;AAAA,IAAY,CAAC;AAAA,EAC/D;AAEA,MAAI,GAAQ;AACV,UAAM,IAAgB,EAAO,OAAA,CAAQ,GAAK,MAAS,IAAM,EAAK,GAAG,CAAC;AAClE,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAgB,QAAQ;AAAA,IAAc,CAAC;AAAA,EACnE;AAEA,SAAO;AACT,GASM,IAAA,CAAuD,EAC3D,iBAAA,IAAkB,GAClB,WAAA,IAAY,KACZ,mBAAA,GACA,QAAA,EAAA,MACI;AACJ,QAAM,IAAQ,EAAS,GACjB,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,EAAE,eAAA,GAAe,UAAA,GAAU,eAAA,GAAe,UAAA,EAAA,IAAa,EAAc,GACrE,CAAC,GAAU,EAAE,OAAO,EAAA,CAAA,IAAgB,EAAc,GAElD,IAAS,CAAC,EAAM,QAAQ,OAAO,QAAQ,EAAM,QAAQ,OAAO,MAAM,GAClE,IAAW,EAAY,GAAQ,CAAiB,GAChD,IAAS,EAAU,GAAU,CAAU,GAIvC,IAAa,KAAK,IAAI,GAAG,GAAG,EAAS,IAAA,CAAK,MAAS,EAAK,MAAM,CAAC,GAC/D,IACJ,IAAa,KAAK,KAAc,KAA8B,KAAc,GAExE,CAAC,GAAoB,CAAA,IAAyB,EAAM,SAAiB,CAAC,GACtE,IAAoB,KACpB,IAAoB,KACpB,IAAe,IAIf,IAAe,KAAY,IAAiB,IACjD,KAAiB,IAAY,IAAoB;AAGlD,SAAA,EAAM,UAAA,MAAgB;AACpB,UAAM,IAAiB,KAAK,IAAI,IAAkB,GAAc,CAAS;AACzE,IAAA,EAAsB,CAAc;AAAA,EACtC,GAAG,CAAC,CAAe,CAAC,GAOlB,gBAAA,EAAC,GAAD;AAAA,IAAK,KAAK;AAAA,IAAU,IAAI,EAAE,OAAO,OAAO;AAAA,IACtC,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,UAAS;AAAA,MACD,QAAA;AAAA,MACR,WAAU;AAAA,MACA,UAAA;AAAA,MACV,QAAQ;AAAA,MACA,QAAA;AAAA,MACR,mBAAmB;AAAA,MACnB,aAdA,MAAwB;AAC5B,QAAA,EAAQ,EAAiB,oBAAoB,CAAyB;AAAA,MACxE;AAAA,MAaM,oBAAoB;AAAA,MACpB,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,sBAAqB;AAAA,IACtB,CAAA;AAAA,EACE,CAAA;AAET,GAEA,KAAe,EAAS,CAAiB"}

package/package.json CHANGED Viewed

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