@mx-cartographer/experiences 7.2.3 → 7.2.5-alpha.mm0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [7.2.4] - 11-14-2025
+
+- **UPDATED** - Storybook docs for `InsightsMicroWidget`
+
 ## [7.2.3] - 11-13-2025
 
 - **ADDED** - `onLoad` to `GlobalDataProvider` and to track widget load timing in MD

package/dist/{ViewMoreMicroCard-C5yQiaed.mjs → ViewMoreMicroCard-BxRNJMMm.mjs}

@@ -137,7 +137,7 @@ const he = {
   MICRO_WIDGET_CAROUSEL: "Micro Widget Carousel",
   MICRO_WIDGET_CAROUSEL_ZERO_STATE: "Micro Widget Carousel Zero State",
   MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS: "Micro Widget Carousel No Relevant Insights"
-}, Re = {
+}, ge = {
   [H.MICRO_WIDGET_CAROUSEL]: {
     label: T.MICRO_WIDGET,
     name: H.MICRO_WIDGET_CAROUSEL,
@@ -158,7 +158,7 @@ const he = {
     path: "/micro-widget",
     value: S
   }
-}, ge = {
+}, Re = {
   // carousel control interaction events - clicks and swipes
   [M.ON_CAROUSEL_BACK_CLICK]: {
     action: w.CONTROL_BACKWARD,
@@ -200,9 +200,9 @@ const he = {
   ...at(),
   ...ct(),
   ...st()
-}, Ie = async (i, o) => !o || !ge[i] ? null : o.sendAnalyticEvent(ge[i]).then((t) => t).catch((t) => {
+}, Ie = async (i, o) => !o || !Re[i] ? null : o.sendAnalyticEvent(Re[i]).then((t) => t).catch((t) => {
   throw t;
-}), ye = async (i, o) => !o || !Re[i] ? null : o.sendAnalyticsPageview(Re[i]).then((t) => t).catch((t) => {
+}), ye = async (i, o) => !o || !ge[i] ? null : o.sendAnalyticsPageview(ge[i]).then((t) => t).catch((t) => {
   throw t;
 });
 class dt {
@@ -271,8 +271,8 @@ const $ = u.createContext(null), Et = ({
     title: m,
     variant: c,
     widthOverrides: E
-  }, R) {
-    const I = se(), [D, O] = u.useState(!1), { cardStyle: y, linkTextStyle: F } = f, z = c ? y : { border: "none", boxShadow: "none", ...y }, g = /* @__PURE__ */ e(
+  }, g) {
+    const I = se(), [D, O] = u.useState(!1), { cardStyle: y, linkTextStyle: F } = f, z = c ? y : { border: "none", boxShadow: "none", ...y }, R = /* @__PURE__ */ e(
       Ke,
       {
         className: "mx-micro-card-description",
@@ -305,7 +305,7 @@ const $ = u.createContext(null), Et = ({
         "aria-label": t,
         "aria-labelledby": "divButton",
         "aria-roledescription": "slide",
-        ref: R,
+        ref: g,
         role: "group",
         sx: {
           height: "100%",
@@ -321,7 +321,7 @@ const $ = u.createContext(null), Et = ({
             onClick: () => _(),
             onKeyDown: () => O(!1),
             onKeyUp: () => O(!0),
-            ref: R,
+            ref: g,
             role: "button",
             sx: {
               border: D ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
@@ -359,13 +359,13 @@ const $ = u.createContext(null), Et = ({
                         lt,
                         {
                           avatar: C && a,
-                          subheader: p && g,
+                          subheader: p && R,
                           sx: { color: h.headerColor, p: 0 },
                           title: m,
                           titleTypographyProps: { fontSize: 15, fontWeight: 600, variant: "h3" }
                         }
                       ),
-                      /* @__PURE__ */ e(rt, { sx: { p: 0 }, children: !p && g }),
+                      /* @__PURE__ */ e(rt, { sx: { p: 0 }, children: !p && R }),
                       !!o && /* @__PURE__ */ e(
                         ot,
                         {
@@ -451,11 +451,11 @@ const $ = u.createContext(null), Et = ({
   return i.names?.map((r, n) => {
     t[r] = o[n];
   }), t;
-}) : [] : [], Rt = (i, o) => {
+}) : [] : [], gt = (i, o) => {
   const t = mt(i), r = t.length / 2, n = t.slice(0, r), l = t.slice(r);
   return !n.length || !l.length ? o.Color.Primary300 : n[0].amount > l[0].amount ? o.Color.Error300 : n[0].amount < l[0].amount ? o.Color.Success300 : o.Color.Primary300;
-}, gt = ({ beat: i }) => {
-  const o = Ae(), t = Rt(i.data_series, o);
+}, Rt = ({ beat: i }) => {
+  const o = Ae(), t = gt(i.data_series, o);
   return /* @__PURE__ */ e(ie, { name: "bar_chart", sx: { color: t } });
 }, xe = () => /* @__PURE__ */ v("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ e(
@@ -1240,7 +1240,7 @@ const $ = u.createContext(null), Et = ({
   ] })
 ] }), ve = ({ beat: i, clientColorScheme: o, color: t, type: r }) => {
   const n = se(), l = o?.primary_300 ? o.primary_300 : n.palette.primary.main;
-  return r === 0 ? /* @__PURE__ */ e(ie, { fill: !0, name: "error", sx: { color: t || l } }) : r === 1 && i ? /* @__PURE__ */ e(ut, { beat: i }) : r === 2 && i ? /* @__PURE__ */ e(Ct, { beat: i }) : r === 3 && i ? /* @__PURE__ */ e(gt, { beat: i }) : r === 5 && i ? /* @__PURE__ */ e(ie, { name: "campaign" }) : /* @__PURE__ */ e(
+  return r === 0 ? /* @__PURE__ */ e(ie, { fill: !0, name: "error", sx: { color: t || l } }) : r === 1 && i ? /* @__PURE__ */ e(ut, { beat: i }) : r === 2 && i ? /* @__PURE__ */ e(Ct, { beat: i }) : r === 3 && i ? /* @__PURE__ */ e(Rt, { beat: i }) : r === 5 && i ? /* @__PURE__ */ e(ie, { name: "campaign" }) : /* @__PURE__ */ e(
     ie,
     {
       fill: !0,
@@ -1294,15 +1294,15 @@ const $ = u.createContext(null), Et = ({
 }) => {
   const { ref: m, inView: c } = Me({
     threshold: Ve
-  }), { cardsCopy: E } = k(), { onEvent: R } = Y(), { updateBeat: I, updateOffer: D } = It();
+  }), { cardsCopy: E } = k(), { onEvent: g } = Y(), { updateBeat: I, updateOffer: D } = It();
   oe(() => {
-    c && (t.has_been_displayed ? R(We(t.template)) : (t.guid.startsWith("OFR") ? D({
+    c && (t.has_been_displayed ? g(We(t.template)) : (t.guid.startsWith("OFR") ? D({
       ...t,
       has_been_displayed: !0
     }) : I({
       ...t,
       has_been_displayed: !0
-    }), R(we(t.template))));
+    }), g(we(t.template))));
   }, [c]), oe(() => {
     if (c && t)
       if (t.template === "MarketingOffer") {
@@ -1320,7 +1320,7 @@ const $ = u.createContext(null), Et = ({
         });
   }, [t, a, c]);
   const O = () => {
-    if (p && p(t), R(Te(t.template)), t.template === "MarketingOffer") {
+    if (p && p(t), g(Te(t.template)), t.template === "MarketingOffer") {
       const y = t;
       _?.capture("clicked_messaging_insight", {
         template: t.template,
@@ -1407,8 +1407,8 @@ const $ = u.createContext(null), Et = ({
             )
           }
         ),
-        Array.from({ length: t }).map((E, R) => {
-          const I = R === o;
+        Array.from({ length: t }).map((E, g) => {
+          const I = g === o;
           return /* @__PURE__ */ e(
             b,
             {
@@ -1430,7 +1430,7 @@ const $ = u.createContext(null), Et = ({
                 width: I && d ? 24 : 8
               }
             },
-            `carousel-button-${R}`
+            `carousel-button-${g}`
           );
         }),
         /* @__PURE__ */ e(
@@ -1471,7 +1471,8 @@ const $ = u.createContext(null), Et = ({
   visibleCardsCount: c = 1
   // Default to 1 card visible
 }) => {
-  const E = u.useRef(null), R = u.useRef(null), [I, D] = u.useState(0), [O, y] = u.useState(null), [F, z] = u.useState(null), [g, x] = u.useState(null), [U, B] = u.useState(p), { carouselCopy: j } = k(), { onEvent: Z } = Y();
+  console.log("MicroBeatCarousel", { heightOverrides: l });
+  const E = u.useRef(null), g = u.useRef(null), [I, D] = u.useState(0), [O, y] = u.useState(null), [F, z] = u.useState(null), [R, x] = u.useState(null), [U, B] = u.useState(p), { carouselCopy: j } = k(), { onEvent: Z } = Y();
   u.useEffect(() => {
     if (E.current && !o) {
       const s = E.current.offsetWidth, A = 8;
@@ -1484,7 +1485,7 @@ const $ = u.createContext(null), Et = ({
       x(N);
     }
   }, [c, E.current?.offsetWidth]), u.useEffect(() => {
-    const s = R.current?.offsetWidth;
+    const s = g.current?.offsetWidth;
     if (typeof s == "number" && o) {
       const A = (P) => {
         B(!0);
@@ -1499,23 +1500,23 @@ const $ = u.createContext(null), Et = ({
       };
       x(A(s));
       const N = () => {
-        const P = R.current?.offsetWidth;
+        const P = g.current?.offsetWidth;
         typeof P == "number" && x(A(P));
       };
       return window.addEventListener("resize", N), () => {
         window.removeEventListener("resize", N);
       };
     }
-  }, [o, R]);
+  }, [o, g]);
   const X = () => {
-    Z(M.ON_CAROUSEL_FORWARD_CLICK, i), E.current && g && E.current.scrollTo({
-      left: I + g + 8,
+    Z(M.ON_CAROUSEL_FORWARD_CLICK, i), E.current && R && E.current.scrollTo({
+      left: I + R + 8,
       top: 0,
       behavior: "smooth"
     });
   }, le = () => {
-    Z(M.ON_CAROUSEL_BACK_CLICK, i), E.current && g && E.current.scrollTo({
-      left: Math.max(0, I - (g + 8)),
+    Z(M.ON_CAROUSEL_BACK_CLICK, i), E.current && R && E.current.scrollTo({
+      left: Math.max(0, I - (R + 8)),
       top: 0,
       behavior: "smooth"
     });
@@ -1535,13 +1536,13 @@ const $ = u.createContext(null), Et = ({
     posthog: d,
     showIcon: C,
     variant: h
-  }, ae = g ? Math.round(I / (g + 8)) : 0, Fe = E.current ? E.current.scrollWidth - E.current.offsetWidth : 0;
+  }, ae = R ? Math.round(I / (R + 8)) : 0, Fe = E.current ? E.current.scrollWidth - E.current.offsetWidth : 0;
   return /* @__PURE__ */ v(
     K,
     {
       "aria-label": j.carousel_title,
       "aria-roledescription": "carousel",
-      ref: R,
+      ref: g,
       role: "group/region",
       sx: {
         alignItems: "center",
@@ -1591,7 +1592,7 @@ const $ = u.createContext(null), Et = ({
                     index: A,
                     isActiveCard: A === ae,
                     onCardClick: a,
-                    widthOverrides: g || void 0,
+                    widthOverrides: R || void 0,
                     ...ue
                   },
                   `${s.guid} ${A}`
@@ -1602,7 +1603,7 @@ const $ = u.createContext(null), Et = ({
                 {
                   isActiveCard: ae === t.length,
                   onCardClick: a,
-                  widthOverrides: g || void 0,
+                  widthOverrides: R || void 0,
                   ...ue
                 }
               )
@@ -1682,6 +1683,7 @@ const $ = u.createContext(null), Et = ({
   widthOverrides: o,
   children: t
 }) => {
+  console.log("MicroWidgetContainer", { heightOverrides: i });
   const { carouselCopy: r } = k();
   return /* @__PURE__ */ e(
     b,
@@ -1828,15 +1830,16 @@ const $ = u.createContext(null), Et = ({
   showBorder: m = !0,
   showCarouselControls: c,
   showHeader: E,
-  showIcon: R,
+  showIcon: g,
   showWithMargin: I = !0,
   token: D = "",
   useDarkMode: O,
   userHasFullInsightFeedBeats: y,
   variant: F,
   visibleCardsCount: z = 1,
-  widthOverrides: g
+  widthOverrides: R
 }) => {
+  console.log("InsightsMicroWidget", { heightOverrides: a });
   const [x, U] = te("STANDARD"), [B, j] = te(!1), [Z, X] = te(!1), le = et([_], V), ne = tt([C], V);
   u.useEffect(() => {
     !V.isInitialized && !Z && (V.initialize(l, D, d).catch(() => X(!1)), X(!0));
@@ -1851,16 +1854,16 @@ const $ = u.createContext(null), Et = ({
     heightOverrides: a,
     onCardClick: p,
     posthog: f,
-    showIcon: R,
+    showIcon: g,
     showWithMargin: I,
     useDarkMode: O,
-    widthOverrides: g
+    widthOverrides: R
   }, q = {
     carouselSize: x,
     variant: F,
     ...Q
   };
-  return /* @__PURE__ */ e(Et, { onEvent: le, onPageview: ne, store: V, children: /* @__PURE__ */ v(Wt, { heightOverrides: a, widthOverrides: g, children: [
+  return /* @__PURE__ */ e(Et, { onEvent: le, onPageview: ne, store: V, children: /* @__PURE__ */ v(Wt, { heightOverrides: a, widthOverrides: R, children: [
     !B && /* @__PURE__ */ e(wt, {}),
     B && E && /* @__PURE__ */ e(
       Tt,
@@ -1869,7 +1872,7 @@ const $ = u.createContext(null), Et = ({
         clientColorScheme: r,
         onCardClick: p,
         posthog: f,
-        widthOverrides: g
+        widthOverrides: R
       }
     ),
     B && !!t.length && /* @__PURE__ */ e(
@@ -1946,6 +1949,6 @@ export {
   re as a,
   ai as b,
   ft as c,
-  gt as d,
+  Rt as d,
   xe as e
 };

package/dist/microinsights/index.es.js

@@ -1,4 +1,4 @@
-import { A as s, B as e, C as o, c as t, b as i, I as d, M as n, a as C, d as c, N as I, V as M, Z as g, e as h } from "../ViewMoreMicroCard-C5yQiaed.mjs";
+import { A as s, B as e, C as o, c as t, b as i, I as d, M as n, a as C, d as c, N as I, V as M, Z as g, e as h } from "../ViewMoreMicroCard-BxRNJMMm.mjs";
 export {
   s as AppStore,
   e as BeatCard,

package/dist/trends/index.es.js

@@ -19,7 +19,7 @@ import { DataGridPro as mt } from "@mui/x-data-grid-pro";
 import { C as pt } from "../CurrencyText-kyC1aseI.mjs";
 import { b as Ct } from "../Localization-2MODESHW.mjs";
 import { H as Ie } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as M, b as ft } from "../ViewMoreMicroCard-C5yQiaed.mjs";
+import { T as M, b as ft } from "../ViewMoreMicroCard-BxRNJMMm.mjs";
 import { A as _, W as ke } from "../WidgetContainer-C88Ecu2W.mjs";
 import { c as Tt } from "../Category-CevNQ03n.mjs";
 import { a as Ne, T as He } from "../TransactionDetails-BWffqew4.mjs";
@@ -663,7 +663,7 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   const n = Ht(), { onEvent: s } = H(), { isMobile: r, isDesktop: l, isLargeDesktop: d } = $(), { beatStore: h, endpoint: c, sessionToken: u } = Te(), f = n.palette.mode === "dark", g = l || d, T = g || r ? 1 : 2, m = () => null, a = (R) => {
     o?.(R), s(_.TRENDS_CLICK_INSIGHT, M);
   }, y = g ? 200 : 170, p = g ? 170 : 124, E = g ? 56 : 0, w = t.length > 0 ? y + E : p, D = g && t.length > 0 ? y : void 0;
-  return /* @__PURE__ */ e(Wt, { sx: { height: w }, children: /* @__PURE__ */ e(
+  return console.log("TrendsInsights", { containerHeight: w, heightOverrides: D }), /* @__PURE__ */ e(Wt, { sx: { height: w }, children: /* @__PURE__ */ e(
     ft,
     {
       areBeatsLoading: h.isLoading,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.2.3",
+  "version": "7.2.5-alpha.mm0",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",