@mx-cartographer/insights-ui 1.4.8 → 1.4.9-alpha.mega1

package/dist/components/shared/InsightsCard/CardHeader.d.ts

@@ -3,6 +3,7 @@ import { MenuItemProps } from './CardMenuItem';
 export interface CardHeaderProps {
     ariaLabel?: string;
     menuItems?: MenuItemProps[];
+    onOpen?: () => void;
     onClick?: (index: number, key: string) => void;
     shouldShowMenu?: boolean;
     subHeader?: React.ReactNode;

package/dist/components/shared/InsightsCard/__tests__/CardButtonSection.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/shared/InsightsCard/__tests__/InsightButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.es.js

@@ -1,12 +1,12 @@
-import { jsx as t, jsxs as s, Fragment as w } from "react/jsx-runtime";
+import { jsx as t, jsxs as s, Fragment as M } from "react/jsx-runtime";
 import * as e from "react";
 import A, { useRef as F, useLayoutEffect as re, useMemo as G, useCallback as ne, useState as U, useEffect as Q, forwardRef as I, memo as ae } from "react";
 import oe from "@mui/material/Dialog";
 import { BottomSheetTransition as de, Icon as y, P as C, Text as b, InstitutionLogo as k, H3 as _, Drawer as se, createMXTheme as ce } from "@kyper/mui";
 import he from "react-confetti";
 import p from "@mui/material/Box";
-import v from "@mui/material/Card";
-import { useTheme as M, styled as J, ThemeProvider as me } from "@mui/material/styles";
+import H from "@mui/material/Card";
+import { useTheme as w, styled as J, ThemeProvider as me } from "@mui/material/styles";
 import { useInView as pe } from "react-intersection-observer";
 import ue from "@mui/material/CardHeader";
 import $ from "@mui/material/CardContent";
@@ -115,7 +115,7 @@ const Re = ({
   return A.useEffect(() => {
     a && c(`${h}%`);
   }, [a, h]), /* @__PURE__ */ t(A.Fragment, { children: /* @__PURE__ */ s(
-    v,
+    H,
     {
       "data-ui-test": "progress-bar",
       ref: o,
@@ -162,7 +162,7 @@ const Re = ({
   percentageCompleteText: r,
   progressColorOverride: o
 }) => {
-  const a = M();
+  const a = w();
   return /* @__PURE__ */ s(
     p,
     {
@@ -171,7 +171,7 @@ const Re = ({
       sx: { marginBottom: 16 },
       children: [
         /* @__PURE__ */ s(
-          v,
+          H,
           {
             sx: {
               display: "flex",
@@ -212,7 +212,7 @@ const Re = ({
   gradientOverride: l,
   title: n
 }) => {
-  const r = M();
+  const r = w();
   return /* @__PURE__ */ s(
     p,
     {
@@ -223,7 +223,7 @@ const Re = ({
         p: 16
       },
       children: [
-        /* @__PURE__ */ t(v, { sx: { background: "transparent", boxShadow: "none", marginBottom: 16 }, children: n && /* @__PURE__ */ t(
+        /* @__PURE__ */ t(H, { sx: { background: "transparent", boxShadow: "none", marginBottom: 16 }, children: n && /* @__PURE__ */ t(
           C,
           {
             className: "mx-insights-gradient-box-title",
@@ -262,7 +262,7 @@ const Re = ({
     h(Math.floor(E / 20));
   };
   return A.useEffect(() => (m(), window.addEventListener("resize", m), () => window.removeEventListener("resize", m)), []), /* @__PURE__ */ t(
-    v,
+    H,
     {
       "aria-labelledby": i.guid,
       className: "mx-mini-insight-card",
@@ -333,7 +333,7 @@ const Re = ({
       width: "100%"
     },
     children: [
-      r && /* @__PURE__ */ s(w, { children: [
+      r && /* @__PURE__ */ s(M, { children: [
         /* @__PURE__ */ t(
           "svg",
           {
@@ -348,7 +348,7 @@ const Re = ({
         ),
         /* @__PURE__ */ t(b, { id: "chartLegendLabel", sx: { fontSize: 11, fontWeight: 400 }, variant: "XSmall", children: r })
       ] }),
-      i && n && /* @__PURE__ */ s(w, { children: [
+      i && n && /* @__PURE__ */ s(M, { children: [
         /* @__PURE__ */ t(
           x,
           {
@@ -386,7 +386,7 @@ const Re = ({
   style: r,
   ...o
 }) => {
-  const a = M(), d = F(null);
+  const a = w(), d = F(null);
   re(() => {
     const m = new ResizeObserver(() => {
       if (d.current) {
@@ -423,13 +423,13 @@ const Re = ({
   selectedTabIndex: a,
   onBarClick: d
 }) => {
-  const c = M(), { containerRef: h, height: m, width: u } = Ce(), f = G(() => {
+  const c = w(), { containerRef: h, height: m, width: u } = Ce(), f = G(() => {
     const g = `${l}80`;
     return a === void 0 ? [...new Array(n.length - 1).fill(g), l] : n.map((q, Z) => Z === a ? l : g);
   }, [l, n, a]), E = ne(
     (g, { dataIndex: q }) => d && d(q),
     [d]
-  ), H = G(
+  ), v = G(
     () => ({
       series: [
         {
@@ -454,9 +454,9 @@ const Re = ({
       {
         height: m,
         margin: { left: 16, right: 16, top: 38, bottom: 30 },
-        series: H.series,
+        series: v.series,
         width: u,
-        xAxis: H.xAxis,
+        xAxis: v.xAxis,
         children: [
           i?.average && /* @__PURE__ */ t(
             Ee,
@@ -566,24 +566,24 @@ const Re = ({
       display: "flex",
       justifyContent: "center",
       ref: u,
-      sx: (H) => ({
-        backgroundColor: H.palette.grey[200],
+      sx: (v) => ({
+        backgroundColor: v.palette.grey[200],
         padding: 16
       }),
       width: "100%",
       children: [
         /* @__PURE__ */ t(ee, { height: f, shouldRun: l.shouldRun, width: E }),
         /* @__PURE__ */ s(
-          v,
+          H,
           {
             elevation: 1,
-            sx: (H) => ({
+            sx: (v) => ({
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
               justifyContent: "center",
               flexWrap: "wrap",
-              backgroundColor: H.palette.background.paper,
+              backgroundColor: v.palette.background.paper,
               borderRadius: "8px",
               overflow: "visible",
               minHeight: 120,
@@ -619,10 +619,10 @@ const Re = ({
   size: a,
   subHeaderString: d,
   textSX: c
-}) => /* @__PURE__ */ s(w, { children: [
+}) => /* @__PURE__ */ s(M, { children: [
   o && /* @__PURE__ */ t(y, { color: l, fill: n, name: o, size: a, sx: r }),
   /* @__PURE__ */ t(b, { bold: i, sx: c, children: d })
-] }), S = 48, Je = ({ account: i, headerString: l }) => /* @__PURE__ */ s(w, { children: [
+] }), S = 48, Je = ({ account: i, headerString: l }) => /* @__PURE__ */ s(M, { children: [
   /* @__PURE__ */ t(
     ye,
     {
@@ -648,9 +648,9 @@ const Re = ({
   ),
   /* @__PURE__ */ t(C, { bold: !0, sx: { width: "100%", textAlign: "center" }, children: l })
 ] }), Te = ({ leftLowerText: i, leftUpperText: l }) => {
-  const n = M();
+  const n = w();
   return /* @__PURE__ */ s(
-    v,
+    H,
     {
       sx: {
         backgroundColor: n.palette.background.default,
@@ -698,9 +698,9 @@ const Re = ({
   rightLowerText: l,
   rightUpperText: n
 }) => {
-  const r = M();
+  const r = w();
   return /* @__PURE__ */ t(
-    v,
+    H,
     {
       elevation: 0,
       sx: {
@@ -823,7 +823,8 @@ const Re = ({
         name: "more_horiz",
         size: 24,
         sx: {
-          color: "text.primary"
+          color: "text.primary",
+          fontVariationSettings: "initial"
         }
       }
     )
@@ -861,31 +862,32 @@ const Re = ({
 ), t1 = ({
   ariaLabel: i,
   menuItems: l = [],
-  onClick: n,
-  shouldShowMenu: r = !1,
-  subHeader: o,
-  title: a
+  onOpen: n,
+  onClick: r,
+  shouldShowMenu: o = !1,
+  subHeader: a,
+  title: d
 }) => {
-  const [d, c] = U(null);
-  return /* @__PURE__ */ s(w, { children: [
+  const [c, h] = U(null);
+  return /* @__PURE__ */ s(M, { children: [
     /* @__PURE__ */ t(
       Ae,
       {
-        action: r && i ? /* @__PURE__ */ t($e, { ariaLabel: i, onClick: (u) => {
-          c(u.currentTarget);
+        action: o && i ? /* @__PURE__ */ t($e, { ariaLabel: i, onClick: (f) => {
+          h(f.currentTarget), n?.();
         } }) : null,
-        subheader: o ?? null,
+        subheader: a ?? null,
         sx: { alignItems: "flex-start", p: 0, mb: 16 },
-        title: /* @__PURE__ */ t(_, { children: a })
+        title: /* @__PURE__ */ t(_, { children: d })
       }
     ),
-    d && /* @__PURE__ */ t(
+    c && /* @__PURE__ */ t(
       e1,
       {
-        anchorEl: d,
-        handleClose: () => c(null),
-        handleMenuItem: (u, f) => {
-          n?.(u, f);
+        anchorEl: c,
+        handleClose: () => h(null),
+        handleMenuItem: (f, E) => {
+          h(null), r?.(f, E);
         },
         menuItems: l
       }
@@ -958,9 +960,9 @@ const Re = ({
   isLoading: a = !1,
   errorText: d = "",
   feedback: c
-}) => /* @__PURE__ */ s(v, { sx: { p: 16 }, children: [
+}) => /* @__PURE__ */ s(M, { children: [
   /* @__PURE__ */ t(t1, { ...r }),
-  o ? /* @__PURE__ */ t(_e, { erroredText: d }) : /* @__PURE__ */ s(w, { children: [
+  o ? /* @__PURE__ */ t(_e, { erroredText: d }) : /* @__PURE__ */ s(M, { children: [
     /* @__PURE__ */ t(r1, { ...n, hasFooterButton: !!i, children: a ? /* @__PURE__ */ t(l1, {}) : l }),
     i && /* @__PURE__ */ t(Ye, { button: i }),
     c
@@ -1115,7 +1117,7 @@ const Re = ({
   onClose: o,
   selectedRadio: a
 }) => {
-  const d = M(), { cancelText: c, submitText: h } = i, m = J(L)({
+  const d = w(), { cancelText: c, submitText: h } = i, m = J(L)({
     backgroundColor: "transparent",
     color: d.palette.primary.light,
     fontSize: 15,
@@ -1469,7 +1471,7 @@ const Re = ({
         /* @__PURE__ */ t(_, { sx: { p: "16px 24px 8px 24px", whiteSpace: "wrap" }, children: l }),
         /* @__PURE__ */ s(x, { sx: { gap: 12, px: 24 }, children: [
           /* @__PURE__ */ t(C, { color: "secondary", fontSize: 13, children: m }),
-          /* @__PURE__ */ t(P, { children: u.map((E, H) => /* @__PURE__ */ s(
+          /* @__PURE__ */ t(P, { children: u.map((E, v) => /* @__PURE__ */ s(
             j,
             {
               sx: {
@@ -1499,14 +1501,14 @@ const Re = ({
                 )
               ]
             },
-            `list-item-${H}`
+            `list-item-${v}`
           )) })
         ] })
       ] }),
       /* @__PURE__ */ s(p, { children: [
         /* @__PURE__ */ t(b, { bold: !0, fontSize: 15, sx: { p: "16px 24px 8px 24px" }, children: o }),
         /* @__PURE__ */ t(C, { color: "secondary", fontSize: 13, sx: { mb: 16, mx: 24 }, children: r }),
-        /* @__PURE__ */ t(P, { sx: { p: "16px 24px" }, children: a.map((E, H) => /* @__PURE__ */ s(
+        /* @__PURE__ */ t(P, { sx: { p: "16px 24px" }, children: a.map((E, v) => /* @__PURE__ */ s(
           j,
           {
             sx: (g) => ({
@@ -1538,7 +1540,7 @@ const Re = ({
               )
             ]
           },
-          `lower-list-${H}`
+          `lower-list-${v}`
         )) })
       ] }),
       /* @__PURE__ */ s(x, { sx: { alignItems: "center", display: "flex", justifyContent: "center", pb: 16 }, children: [
@@ -1630,7 +1632,7 @@ const Re = ({
     )
   ] }) }) });
 }, p1 = ({ goalContribution: i }) => /* @__PURE__ */ s(
-  v,
+  H,
   {
     "data-ui-test": "mefr-body-contributed",
     sx: {
@@ -1653,7 +1655,7 @@ const Re = ({
     ]
   }
 ), u1 = ({ goalCompletionDate: i }) => /* @__PURE__ */ s(
-  v,
+  H,
   {
     "data-ui-test": "mefr-body-projected",
     sx: {
@@ -1679,7 +1681,7 @@ const Re = ({
   showGoalContributedLastMonth: i,
   totalSavedText: l
 }) => /* @__PURE__ */ s(
-  v,
+  H,
   {
     "data-ui-test": "mefr-body-saved",
     sx: {