@mx-cartographer/experiences 9.4.15 → 9.4.17

package/dist/insights-v2/components/InsightOptionsMenu.es.js

@@ -0,0 +1,54 @@
+import { useGlobalCopyStore as m } from "../../common/context/hooks.es.js";
+import { useBeatActions as a } from "../beatActions.es.js";
+import { OverflowMenu as p } from "./OverflowMenu.es.js";
+import { observer as f } from "mobx-react-lite";
+import { Icon as l } from "@mxenabled/mx-icons";
+import { jsx as o } from "react/jsx-runtime";
+var d = f(() => {
+  const { onMenuAction: n } = a(), e = m().insights_feed?.overflow_menu;
+  if (!n || !e) return null;
+  const { onAction: t, onOpen: i, disabled: r } = n, s = [
+    {
+      key: "helpful",
+      icon: /* @__PURE__ */ o(l, {
+        name: "thumb_up",
+        size: 24,
+        sx: { color: "text.primary" }
+      }),
+      label: e.helpful,
+      onSelect: () => t("helpful")
+    },
+    {
+      key: "not_helpful",
+      icon: /* @__PURE__ */ o(l, {
+        name: "thumb_down",
+        size: 24,
+        sx: { color: "text.primary" }
+      }),
+      label: e.not_helpful,
+      onSelect: () => t("not_helpful")
+    },
+    {
+      key: "hide",
+      icon: /* @__PURE__ */ o(l, {
+        name: "visibility_off",
+        size: 24,
+        sx: { color: "text.primary" }
+      }),
+      label: e.hide,
+      onSelect: () => t("hide")
+    }
+  ];
+  return /* @__PURE__ */ o(p, {
+    ariaLabel: e.aria_label,
+    disabled: r,
+    items: s,
+    onOpen: i
+  });
+});
+export {
+  d as InsightOptionsMenu,
+  d as default
+};
+
+//# sourceMappingURL=InsightOptionsMenu.es.js.map

package/dist/insights-v2/components/InsightOptionsMenu.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsightOptionsMenu.es.js","names":[],"sources":["../../../src/insights-v2/components/InsightOptionsMenu.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { useGlobalCopyStore } from '../../common'\n\nimport { useBeatActions } from '../beatActions'\n\nimport { OverflowMenu, type OverflowMenuItem } from './OverflowMenu'\n\n/**\n * The insight card's \"…\" overflow menu. This repo owns the item set — order,\n * icons, and labels (from `insights_feed.overflow_menu` copy) — while the host\n * supplies the action handler via `beatActions.onMenuAction` (read from\n * context). Renders nothing without a handler or before copy resolves.\n */\nexport const InsightOptionsMenu = observer(() => {\n  const { onMenuAction } = useBeatActions()\n  const copy = useGlobalCopyStore().insights_feed?.overflow_menu\n\n  if (!onMenuAction || !copy) return null\n\n  const { onAction, onOpen, disabled } = onMenuAction\n\n  const items: OverflowMenuItem[] = [\n    {\n      key: 'helpful',\n      icon: <Icon name=\"thumb_up\" size={24} sx={{ color: 'text.primary' }} />,\n      label: copy.helpful,\n      onSelect: () => onAction('helpful'),\n    },\n    {\n      key: 'not_helpful',\n      icon: <Icon name=\"thumb_down\" size={24} sx={{ color: 'text.primary' }} />,\n      label: copy.not_helpful,\n      onSelect: () => onAction('not_helpful'),\n    },\n    {\n      key: 'hide',\n      icon: <Icon name=\"visibility_off\" size={24} sx={{ color: 'text.primary' }} />,\n      label: copy.hide,\n      onSelect: () => onAction('hide'),\n    },\n  ]\n\n  return (\n    <OverflowMenu ariaLabel={copy.aria_label} disabled={disabled} items={items} onOpen={onOpen} />\n  )\n})\n\nexport default InsightOptionsMenu\n"],"mappings":";;;;;;AAgBA,IAAa,IAAqB,EAAA,MAAe;AAC/C,QAAM,EAAE,cAAA,EAAA,IAAiB,EAAe,GAClC,IAAO,EAAmB,EAAE,eAAe;AAEjD,MAAI,CAAC,KAAgB,CAAC,EAAM,QAAO;AAEnC,QAAM,EAAE,UAAA,GAAU,QAAA,GAAQ,UAAA,EAAA,IAAa,GAEjC,IAA4B;AAAA,IAChC;AAAA,MACE,KAAK;AAAA,MACL,MAAM,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAK;AAAA,QAAW,MAAM;AAAA,QAAI,IAAI,EAAE,OAAO,eAAe;AAAA,MAAI,CAAA;AAAA,MACtE,OAAO,EAAK;AAAA,MACZ,UAAA,MAAgB,EAAS,SAAS;AAAA,IACpC;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,MAAM,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAK;AAAA,QAAa,MAAM;AAAA,QAAI,IAAI,EAAE,OAAO,eAAe;AAAA,MAAI,CAAA;AAAA,MACxE,OAAO,EAAK;AAAA,MACZ,UAAA,MAAgB,EAAS,aAAa;AAAA,IACxC;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,MAAM,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAK;AAAA,QAAiB,MAAM;AAAA,QAAI,IAAI,EAAE,OAAO,eAAe;AAAA,MAAI,CAAA;AAAA,MAC5E,OAAO,EAAK;AAAA,MACZ,UAAA,MAAgB,EAAS,MAAM;AAAA,IACjC;AAAA,EACF;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAc,WAAW,EAAK;AAAA,IAAsB,UAAA;AAAA,IAAiB,OAAA;AAAA,IAAe,QAAA;AAAA,EAAS,CAAA;AAEjG,CAAC"}

package/dist/insights-v2/components/OverflowMenu.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+export interface OverflowMenuItem {
+    /** Stable identity for the item (also its React key). */
+    key: string;
+    /** Leading icon node. */
+    icon: ReactNode;
+    /** Visible label. */
+    label: string;
+    /** Invoked when the item is chosen (after the menu closes). */
+    onSelect: () => void;
+    /** Optional per-item disabled state. */
+    disabled?: boolean;
+}
+export interface OverflowMenuProps {
+    /** Items to render, top to bottom. */
+    items: OverflowMenuItem[];
+    /** Accessible label for the trigger button. */
+    ariaLabel: string;
+    /** Called when the menu opens (e.g. to fire analytics). */
+    onOpen?: () => void;
+    /** Disables the trigger entirely (e.g. an obsolete beat). */
+    disabled?: boolean;
+}
+/**
+ * A "…" (MoreHoriz) overflow menu: an icon trigger that opens a list of actions.
+ *
+ * Presentational only — it owns nothing but the open/close anchor state. The item
+ * set and what each item does are supplied by the caller via `items[].onSelect`,
+ * so all data/side-effects (analytics, feedback, hide, …) live outside this file.
+ */
+export declare const OverflowMenu: ({ items, ariaLabel, onOpen, disabled }: OverflowMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default OverflowMenu;

package/dist/insights-v2/components/OverflowMenu.es.js

@@ -0,0 +1,73 @@
+import { useId as v, useState as z } from "react";
+import { MoreHoriz as M } from "@mxenabled/mx-icons";
+import { Fragment as O, jsx as r, jsxs as m } from "react/jsx-runtime";
+import k from "@mui/material/IconButton";
+import C from "@mui/material/ListItemText";
+import L from "@mui/material/ListItemIcon";
+import S from "@mui/material/MenuItem";
+import y from "@mui/material/Menu";
+var P = ({ items: d, ariaLabel: c, onOpen: p, disabled: h = !1 }) => {
+  const [e, n] = z(null), t = !!e, i = v(), a = `${i}-button`, l = `${i}-menu`, u = (o) => {
+    n(o.currentTarget), p?.();
+  }, s = () => n(null), f = (o) => {
+    s(), o();
+  };
+  return /* @__PURE__ */ m(O, { children: [/* @__PURE__ */ r(k, {
+    "aria-controls": t ? l : void 0,
+    "aria-expanded": t || void 0,
+    "aria-haspopup": "true",
+    "aria-label": c,
+    disabled: h,
+    id: a,
+    onClick: u,
+    sx: {
+      minHeight: 24,
+      minWidth: 24,
+      p: 0
+    },
+    children: /* @__PURE__ */ r(M, {
+      size: 24,
+      sx: { color: "neutral.dark" }
+    })
+  }), /* @__PURE__ */ r(y, {
+    MenuListProps: {
+      "aria-labelledby": a,
+      sx: { width: 212 }
+    },
+    anchorEl: e,
+    anchorOrigin: {
+      horizontal: "right",
+      vertical: "top"
+    },
+    disableScrollLock: !0,
+    id: l,
+    onClose: s,
+    open: t,
+    transformOrigin: {
+      horizontal: "right",
+      vertical: "top"
+    },
+    children: d.map(({ key: o, icon: x, label: g, onSelect: b, disabled: I }) => /* @__PURE__ */ m(S, {
+      disabled: I,
+      onClick: () => f(b),
+      sx: { p: 12 },
+      children: [/* @__PURE__ */ r(L, {
+        sx: { minWidth: "32px !important" },
+        children: x
+      }), /* @__PURE__ */ r(C, {
+        primary: g,
+        slotProps: { primary: {
+          fontSize: 15,
+          fontWeight: "normal",
+          lineHeight: "20px"
+        } }
+      })]
+    }, o))
+  })] });
+};
+export {
+  P as OverflowMenu,
+  P as default
+};
+
+//# sourceMappingURL=OverflowMenu.es.js.map

package/dist/insights-v2/components/OverflowMenu.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowMenu.es.js","names":[],"sources":["../../../src/insights-v2/components/OverflowMenu.tsx"],"sourcesContent":["import { useId, useState, type MouseEvent, type ReactNode } from 'react'\n\nimport IconButton from '@mui/material/IconButton'\nimport ListItemIcon from '@mui/material/ListItemIcon'\nimport ListItemText from '@mui/material/ListItemText'\nimport Menu from '@mui/material/Menu'\nimport MenuItem from '@mui/material/MenuItem'\n\nimport { MoreHoriz } from '@mxenabled/mx-icons'\n\nexport interface OverflowMenuItem {\n  /** Stable identity for the item (also its React key). */\n  key: string\n  /** Leading icon node. */\n  icon: ReactNode\n  /** Visible label. */\n  label: string\n  /** Invoked when the item is chosen (after the menu closes). */\n  onSelect: () => void\n  /** Optional per-item disabled state. */\n  disabled?: boolean\n}\n\nexport interface OverflowMenuProps {\n  /** Items to render, top to bottom. */\n  items: OverflowMenuItem[]\n  /** Accessible label for the trigger button. */\n  ariaLabel: string\n  /** Called when the menu opens (e.g. to fire analytics). */\n  onOpen?: () => void\n  /** Disables the trigger entirely (e.g. an obsolete beat). */\n  disabled?: boolean\n}\n\n/**\n * A \"…\" (MoreHoriz) overflow menu: an icon trigger that opens a list of actions.\n *\n * Presentational only — it owns nothing but the open/close anchor state. The item\n * set and what each item does are supplied by the caller via `items[].onSelect`,\n * so all data/side-effects (analytics, feedback, hide, …) live outside this file.\n */\nexport const OverflowMenu = ({ items, ariaLabel, onOpen, disabled = false }: OverflowMenuProps) => {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const isOpen = Boolean(anchorEl)\n\n  // Unique per instance so multiple menus on a page (one per card) don't share\n  // DOM ids or cross-wire their aria relationships.\n  const baseId = useId()\n  const buttonId = `${baseId}-button`\n  const menuId = `${baseId}-menu`\n\n  const handleOpen = (event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget)\n    onOpen?.()\n  }\n\n  const handleClose = () => setAnchorEl(null)\n\n  // Close before running the caller's handler so the menu never lingers over a\n  // dialog/drawer the handler may open.\n  const handleSelect = (onSelect: () => void) => {\n    handleClose()\n    onSelect()\n  }\n\n  return (\n    <>\n      <IconButton\n        aria-controls={isOpen ? menuId : undefined}\n        aria-expanded={isOpen || undefined}\n        aria-haspopup=\"true\"\n        aria-label={ariaLabel}\n        disabled={disabled}\n        id={buttonId}\n        onClick={handleOpen}\n        sx={{ minHeight: 24, minWidth: 24, p: 0 }}\n      >\n        <MoreHoriz size={24} sx={{ color: 'neutral.dark' }} />\n      </IconButton>\n      <Menu\n        MenuListProps={{ 'aria-labelledby': buttonId, sx: { width: 212 } }}\n        anchorEl={anchorEl}\n        anchorOrigin={{ horizontal: 'right', vertical: 'top' }}\n        disableScrollLock={true}\n        id={menuId}\n        onClose={handleClose}\n        open={isOpen}\n        transformOrigin={{ horizontal: 'right', vertical: 'top' }}\n      >\n        {items.map(({ key, icon, label, onSelect, disabled: itemDisabled }) => (\n          <MenuItem\n            disabled={itemDisabled}\n            key={key}\n            onClick={() => handleSelect(onSelect)}\n            sx={{ p: 12 }}\n          >\n            <ListItemIcon sx={{ minWidth: '32px !important' }}>{icon}</ListItemIcon>\n            <ListItemText\n              primary={label}\n              slotProps={{ primary: { fontSize: 15, fontWeight: 'normal', lineHeight: '20px' } }}\n            />\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  )\n}\n\nexport default OverflowMenu\n"],"mappings":";;;;;;;;AAyCA,IAAa,IAAA,CAAgB,EAAE,OAAA,GAAO,WAAA,GAAW,QAAA,GAAQ,UAAA,IAAW,GAAA,MAA+B;AACjG,QAAM,CAAC,GAAU,CAAA,IAAe,EAA6B,IAAI,GAC3D,IAAS,EAAQ,GAIjB,IAAS,EAAM,GACf,IAAW,GAAG,CAAA,WACd,IAAS,GAAG,CAAA,SAEZ,IAAA,CAAc,MAAyC;AAC3D,IAAA,EAAY,EAAM,aAAa,GAC/B,IAAS;AAAA,EACX,GAEM,IAAA,MAAoB,EAAY,IAAI,GAIpC,IAAA,CAAgB,MAAyB;AAC7C,IAAA,EAAY,GACZ,EAAS;AAAA,EACX;AAEA,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACE,iBAAe,IAAS,IAAS;AAAA,IACjC,iBAAe,KAAU;AAAA,IACzB,iBAAc;AAAA,IACd,cAAY;AAAA,IACF,UAAA;AAAA,IACV,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,MAAE,WAAW;AAAA,MAAI,UAAU;AAAA,MAAI,GAAG;AAAA,IAAE;AAAA,IAExC,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAW,MAAM;AAAA,MAAI,IAAI,EAAE,OAAO,eAAe;AAAA,IAAI,CAAA;AAAA,EAC3C,CAAA,GACZ,gBAAA,EAAC,GAAD;AAAA,IACE,eAAe;AAAA,MAAE,mBAAmB;AAAA,MAAU,IAAI,EAAE,OAAO,IAAI;AAAA,IAAE;AAAA,IACvD,UAAA;AAAA,IACV,cAAc;AAAA,MAAE,YAAY;AAAA,MAAS,UAAU;AAAA,IAAM;AAAA,IACrD,mBAAmB;AAAA,IACnB,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,MAAM;AAAA,IACN,iBAAiB;AAAA,MAAE,YAAY;AAAA,MAAS,UAAU;AAAA,IAAM;AAAA,IAEvD,UAAA,EAAM,IAAA,CAAK,EAAE,KAAA,GAAK,MAAA,GAAM,OAAA,GAAO,UAAA,GAAU,UAAU,EAAA,MAClD,gBAAA,EAAC,GAAD;AAAA,MACE,UAAU;AAAA,MAEV,SAAA,MAAe,EAAa,CAAQ;AAAA,MACpC,IAAI,EAAE,GAAG,GAAG;AAAA,MAJd,UAAA,CAME,gBAAA,EAAC,GAAD;AAAA,QAAc,IAAI,EAAE,UAAU,kBAAkB;AAAA,QAAI,UAAA;AAAA,MAAmB,CAAA,GACvE,gBAAA,EAAC,GAAD;AAAA,QACE,SAAS;AAAA,QACT,WAAW,EAAE,SAAS;AAAA,UAAE,UAAU;AAAA,UAAI,YAAY;AAAA,UAAU,YAAY;AAAA,QAAO,EAAE;AAAA,MAClF,CAAA,CACO;AAAA,IATH,GAAA,CASG,CACX;AAAA,EACG,CAAA,CACN,EAAA,CAAA;AAEN"}

package/dist/insights-v2/hooks/useBeatFeedbackFlow.d.ts

@@ -0,0 +1,44 @@
+import { Beat } from '../../core';
+import { BeatActions, InsightRating } from '../beatActions';
+import { DismissType } from '../components/DismissInsightDialog';
+/** Which flow opened the survey dialog (null = closed): a rating or the hide flow. */
+export type FeedbackVariant = InsightRating | 'hide';
+/**
+ * What the card slot shows:
+ * - `visible`    the original beat card
+ * - `confirming` the hidden-confirmation card (grace period after a hide)
+ * - `dismissed`  nothing (beat stays hidden; the host removes it on refresh)
+ */
+export type CardState = 'visible' | 'confirming' | 'dismissed';
+/**
+ * Owns the post-action UI state machine for a beat card: the feedback bar shown
+ * after a rating, the "hide this insight" dismiss dialog, the hidden-confirmation
+ * card, and the shared feedback survey dialog.
+ *
+ * Experiences owns this UI; the host only receives callbacks (rate / dismiss /
+ * undo / submit-feedback) via `beatActions`. Keeping the machine here leaves
+ * BaseLayout as pure layout.
+ */
+export declare const useBeatFeedbackFlow: (beat: Beat, beatActions: BeatActions) => {
+    cardState: CardState;
+    isDismissOpen: boolean;
+    isSurveyOpen: boolean;
+    isFeedbackBarShown: boolean;
+    survey: {
+        characterLimitLabel: string;
+        closeAriaLabel: string;
+        submitText: string;
+        backText: string;
+        title: string;
+        options: string[];
+    };
+    wrappedActions: BeatActions;
+    openRatingSurvey: () => void;
+    openHideSurvey: () => void;
+    closeSurvey: () => void;
+    submitSurvey: (option: string, detail?: string) => void;
+    confirmDismiss: (type: DismissType) => void;
+    undoDismiss: () => void;
+    collapseConfirmation: () => void;
+    closeDismissDialog: () => void;
+};

package/dist/insights-v2/hooks/useBeatFeedbackFlow.es.js

@@ -0,0 +1,73 @@
+import { useGlobalCopyStore as S } from "../../common/context/hooks.es.js";
+import { useMemo as y, useState as u } from "react";
+var x = (r, o) => {
+  const a = S(), [c, n] = u(null), [i, t] = u(null), [f, d] = u(!1), [p, l] = u("visible"), h = (() => {
+    const e = a.insights_feed?.feedback, s = a.insights_feed?.hide_feedback, m = {
+      characterLimitLabel: (i === "hide" ? s : e)?.character_limit,
+      closeAriaLabel: (i === "hide" ? s : e)?.close_aria ?? "Close",
+      submitText: (i === "hide" ? s : e)?.submit ?? "Submit",
+      backText: (i === "hide" ? s : e)?.back ?? "Back"
+    };
+    if (i === "hide" && s) return {
+      title: s.title,
+      options: Object.values(s.options),
+      ...m
+    };
+    const v = Object.values(i === "not_helpful" ? e?.not_helpful_options ?? {} : e?.helpful_options ?? {});
+    return {
+      title: e?.tell_us_more_title ?? "Tell us more",
+      options: v,
+      ...m
+    };
+  })(), b = y(() => {
+    const e = o.onMenuAction;
+    return e ? {
+      ...o,
+      onMenuAction: {
+        ...e,
+        onAction: (s) => {
+          s === "helpful" || s === "not_helpful" ? n(s) : s === "hide" && d(!0), e.onAction(s);
+        }
+      }
+    } : o;
+  }, [o]);
+  return {
+    cardState: p,
+    isDismissOpen: f,
+    isSurveyOpen: i !== null,
+    isFeedbackBarShown: c !== null,
+    survey: h,
+    wrappedActions: b,
+    openRatingSurvey: () => {
+      c && t(c);
+    },
+    openHideSurvey: () => t("hide"),
+    closeSurvey: () => {
+      i !== "hide" && n(null), t(null);
+    },
+    submitSurvey: (e, s) => {
+      i && (o.onSubmitFeedback?.({
+        beatGuid: r.guid,
+        source: i,
+        option: e,
+        detail: s
+      }), t(null), i === "hide" ? l("dismissed") : n(null));
+    },
+    confirmDismiss: (e) => {
+      o.onDismissInsight?.({
+        beatGuid: r.guid,
+        type: e
+      }), l("confirming");
+    },
+    undoDismiss: () => {
+      o.onUndoDismiss?.({ beatGuid: r.guid }), n(null), l("visible");
+    },
+    collapseConfirmation: () => l("dismissed"),
+    closeDismissDialog: () => d(!1)
+  };
+};
+export {
+  x as useBeatFeedbackFlow
+};
+
+//# sourceMappingURL=useBeatFeedbackFlow.es.js.map

package/dist/insights-v2/hooks/useBeatFeedbackFlow.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBeatFeedbackFlow.es.js","names":[],"sources":["../../../src/insights-v2/hooks/useBeatFeedbackFlow.ts"],"sourcesContent":["import { useMemo, useState } from 'react'\n\nimport { useGlobalCopyStore } from '../../common'\nimport type { Beat } from '../../core'\nimport type { BeatActions, InsightRating } from '../beatActions'\nimport type { DismissType } from '../components/DismissInsightDialog'\n\n/** Which flow opened the survey dialog (null = closed): a rating or the hide flow. */\nexport type FeedbackVariant = InsightRating | 'hide'\n\n/**\n * What the card slot shows:\n * - `visible`    the original beat card\n * - `confirming` the hidden-confirmation card (grace period after a hide)\n * - `dismissed`  nothing (beat stays hidden; the host removes it on refresh)\n */\nexport type CardState = 'visible' | 'confirming' | 'dismissed'\n\n/**\n * Owns the post-action UI state machine for a beat card: the feedback bar shown\n * after a rating, the \"hide this insight\" dismiss dialog, the hidden-confirmation\n * card, and the shared feedback survey dialog.\n *\n * Experiences owns this UI; the host only receives callbacks (rate / dismiss /\n * undo / submit-feedback) via `beatActions`. Keeping the machine here leaves\n * BaseLayout as pure layout.\n */\nexport const useBeatFeedbackFlow = (beat: Beat, beatActions: BeatActions) => {\n  const copyStore = useGlobalCopyStore()\n\n  // Rating that surfaced the feedback bar (null = hidden). The bar confirms the\n  // vote and offers a follow-up survey.\n  const [feedbackRating, setFeedbackRating] = useState<InsightRating | null>(null)\n  // Which flow opened the survey dialog (null = closed).\n  const [feedbackVariant, setFeedbackVariant] = useState<FeedbackVariant | null>(null)\n  // The \"hide this insight\" confirmation dialog (pick once / always).\n  const [isDismissOpen, setIsDismissOpen] = useState(false)\n  // Drives the card slot through the hide flow (see CardState).\n  const [cardState, setCardState] = useState<CardState>('visible')\n\n  // Survey title + reasons for the active variant. FeedbackDialog is generic, so\n  // the variant-to-copy mapping lives here: hide uses the dismiss reasons; a\n  // rating uses its matching helpful / not-helpful reasons.\n  //\n  // Not memoized on purpose: it reads observable copy fields, and the consumer\n  // (BaseLayout) is an observer, so deriving on each render keeps it in sync when\n  // copy reloads (a useMemo keyed on the stable store ref would go stale). The\n  // work is a few lookups + Object.values on small arrays — cheap.\n  const resolveSurvey = () => {\n    const feedbackCopy = copyStore.insights_feed?.feedback\n    const hideCopy = copyStore.insights_feed?.hide_feedback\n\n    // Buttons + labels come from the same block as the reasons, so the hide and\n    // rating surveys stay independently localizable (no cross-variant leakage).\n    const chrome = {\n      characterLimitLabel: (feedbackVariant === 'hide' ? hideCopy : feedbackCopy)?.character_limit,\n      closeAriaLabel: (feedbackVariant === 'hide' ? hideCopy : feedbackCopy)?.close_aria ?? 'Close',\n      submitText: (feedbackVariant === 'hide' ? hideCopy : feedbackCopy)?.submit ?? 'Submit',\n      backText: (feedbackVariant === 'hide' ? hideCopy : feedbackCopy)?.back ?? 'Back',\n    }\n\n    if (feedbackVariant === 'hide' && hideCopy) {\n      return { title: hideCopy.title, options: Object.values(hideCopy.options), ...chrome }\n    }\n\n    const options =\n      feedbackVariant === 'not_helpful'\n        ? Object.values(feedbackCopy?.not_helpful_options ?? {})\n        : Object.values(feedbackCopy?.helpful_options ?? {})\n\n    return { title: feedbackCopy?.tell_us_more_title ?? 'Tell us more', options, ...chrome }\n  }\n\n  const survey = resolveSurvey()\n\n  // Wrap the host's menu handler so experiences owns the post-action UI (feedback\n  // bar for a vote, dismiss dialog for hide) while the host still sees the action.\n  const wrappedActions = useMemo<BeatActions>(() => {\n    const menu = beatActions.onMenuAction\n    if (!menu) return beatActions\n    return {\n      ...beatActions,\n      onMenuAction: {\n        ...menu,\n        onAction: (action) => {\n          if (action === 'helpful' || action === 'not_helpful') {\n            setFeedbackRating(action)\n          } else if (action === 'hide') {\n            setIsDismissOpen(true)\n          }\n          menu.onAction(action)\n        },\n      },\n    }\n  }, [beatActions])\n\n  // --- Feedback survey ------------------------------------------------------\n\n  /** Open the survey from the feedback bar's \"Tell us more\" (rating flow only). */\n  const openRatingSurvey = () => {\n    if (feedbackRating) setFeedbackVariant(feedbackRating)\n  }\n\n  /** Open the hide survey from the confirmation card's \"Leave Feedback\". */\n  const openHideSurvey = () => setFeedbackVariant('hide')\n\n  /** Close the survey (X / Back). A rating survey also clears the feedback bar. */\n  const closeSurvey = () => {\n    // Intentional asymmetry (matches the host): closing a rating survey also\n    // clears the \"Feedback sent\" bar, while the hide flow keeps its confirmation\n    // card up (Undo stays reachable). The card guards a destructive hide; the\n    // rating bar is just a non-destructive vote confirmation.\n    if (feedbackVariant !== 'hide') setFeedbackRating(null)\n    setFeedbackVariant(null)\n  }\n\n  const submitSurvey = (option: string, detail?: string) => {\n    if (!feedbackVariant) return\n    beatActions.onSubmitFeedback?.({ beatGuid: beat.guid, source: feedbackVariant, option, detail })\n    setFeedbackVariant(null)\n    // Rating surveys clear the confirmation bar; the hide survey collapses the\n    // confirmation card. The beat stays hidden either way — the host removes it.\n    if (feedbackVariant === 'hide') {\n      setCardState('dismissed')\n    } else {\n      setFeedbackRating(null)\n    }\n  }\n\n  // --- Hide flow ------------------------------------------------------------\n\n  /** Confirm a hide from the dismiss dialog; swaps in the confirmation card. */\n  const confirmDismiss = (type: DismissType) => {\n    beatActions.onDismissInsight?.({ beatGuid: beat.guid, type })\n    setCardState('confirming')\n  }\n\n  /** Undo a hide from the confirmation card; restores the original card. */\n  const undoDismiss = () => {\n    beatActions.onUndoDismiss?.({ beatGuid: beat.guid })\n    setFeedbackRating(null) // Clear any stale rating-bar state from before the hide\n    setCardState('visible')\n  }\n\n  /** Close the confirmation card without undoing; the beat stays hidden. */\n  const collapseConfirmation = () => setCardState('dismissed')\n\n  const closeDismissDialog = () => setIsDismissOpen(false)\n\n  return {\n    cardState,\n    isDismissOpen,\n    isSurveyOpen: feedbackVariant !== null,\n    isFeedbackBarShown: feedbackRating !== null,\n    survey,\n    wrappedActions,\n    // survey actions\n    openRatingSurvey,\n    openHideSurvey,\n    closeSurvey,\n    submitSurvey,\n    // hide-flow actions\n    confirmDismiss,\n    undoDismiss,\n    collapseConfirmation,\n    closeDismissDialog,\n  }\n}\n"],"mappings":";;AA2BA,IAAa,IAAA,CAAuB,GAAY,MAA6B;AAC3E,QAAM,IAAY,EAAmB,GAI/B,CAAC,GAAgB,CAAA,IAAqB,EAA+B,IAAI,GAEzE,CAAC,GAAiB,CAAA,IAAsB,EAAiC,IAAI,GAE7E,CAAC,GAAe,CAAA,IAAoB,EAAS,EAAK,GAElD,CAAC,GAAW,CAAA,IAAgB,EAAoB,SAAS,GAmCzD,KAzBA,MAAsB;AAC1B,UAAM,IAAe,EAAU,eAAe,UACxC,IAAW,EAAU,eAAe,eAIpC,IAAS;AAAA,MACb,sBAAsB,MAAoB,SAAS,IAAW,IAAe;AAAA,MAC7E,iBAAiB,MAAoB,SAAS,IAAW,IAAe,cAAc;AAAA,MACtF,aAAa,MAAoB,SAAS,IAAW,IAAe,UAAU;AAAA,MAC9E,WAAW,MAAoB,SAAS,IAAW,IAAe,QAAQ;AAAA,IAC5E;AAEA,QAAI,MAAoB,UAAU,EAChC,QAAO;AAAA,MAAE,OAAO,EAAS;AAAA,MAAO,SAAS,OAAO,OAAO,EAAS,OAAO;AAAA,MAAG,GAAG;AAAA,IAAO;AAGtF,UAAM,IAEA,OAAO,OADX,MAAoB,gBACF,GAAc,uBAAuB,CAAC,IACtC,GAAc,mBAAmB,CAAC,CADK;AAG3D,WAAO;AAAA,MAAE,OAAO,GAAc,sBAAsB;AAAA,MAAgB,SAAA;AAAA,MAAS,GAAG;AAAA,IAAO;AAAA,EACzF,GAE6B,GAIvB,IAAiB,EAAA,MAA2B;AAChD,UAAM,IAAO,EAAY;AACzB,WAAK,IACE;AAAA,MACL,GAAG;AAAA,MACH,cAAc;AAAA,QACZ,GAAG;AAAA,QACH,UAAA,CAAW,MAAW;AACpB,UAAI,MAAW,aAAa,MAAW,gBACrC,EAAkB,CAAM,IACf,MAAW,UACpB,EAAiB,EAAI,GAEvB,EAAK,SAAS,CAAM;AAAA,QACtB;AAAA,MACF;AAAA,IACF,IAdkB;AAAA,EAepB,GAAG,CAAC,CAAW,CAAC;AAuDhB,SAAO;AAAA,IACL,WAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAc,MAAoB;AAAA,IAClC,oBAAoB,MAAmB;AAAA,IACvC,QAAA;AAAA,IACA,gBAAA;AAAA,IAEA,kBA1DI,MAAyB;AAC7B,MAAI,KAAgB,EAAmB,CAAc;AAAA,IACvD;AAAA,IAyDE,gBAtDI,MAAuB,EAAmB,MAAM;AAAA,IAuDpD,aApDI,MAAoB;AAKxB,MAAI,MAAoB,UAAQ,EAAkB,IAAI,GACtD,EAAmB,IAAI;AAAA,IACzB;AAAA,IA8CE,cA5CI,CAAgB,GAAgB,MAAoB;AACxD,MAAK,MACL,EAAY,mBAAmB;AAAA,QAAE,UAAU,EAAK;AAAA,QAAM,QAAQ;AAAA,QAAiB,QAAA;AAAA,QAAQ,QAAA;AAAA,MAAO,CAAC,GAC/F,EAAmB,IAAI,GAGnB,MAAoB,SACtB,EAAa,WAAW,IAExB,EAAkB,IAAI;AAAA,IAE1B;AAAA,IAmCE,gBA9BI,CAAkB,MAAsB;AAC5C,MAAA,EAAY,mBAAmB;AAAA,QAAE,UAAU,EAAK;AAAA,QAAM,MAAA;AAAA,MAAK,CAAC,GAC5D,EAAa,YAAY;AAAA,IAC3B;AAAA,IA4BE,aAzBI,MAAoB;AACxB,MAAA,EAAY,gBAAgB,EAAE,UAAU,EAAK,KAAK,CAAC,GACnD,EAAkB,IAAI,GACtB,EAAa,SAAS;AAAA,IACxB;AAAA,IAsBE,sBAnBI,MAA6B,EAAa,WAAW;AAAA,IAoBzD,oBAlBI,MAA2B,EAAiB,EAAK;AAAA,EAmBvD;AACF"}

package/dist/insights-v2/index.d.ts

@@ -7,6 +7,13 @@ export { default as StatusMessageCard } from './components/StatusMessageCard';
 export { default as TransactionListCard, type FooterRow } from './components/TransactionListCard';
 export { default as InsightTransactionRow, type InsightTransactionRowProps, } from './components/InsightTransactionRow';
 export { default as LogoClusterCard } from './components/LogoClusterCard';
+export { default as OverflowMenu, type OverflowMenuItem, type OverflowMenuProps, } from './components/OverflowMenu';
+export { default as InsightOptionsMenu } from './components/InsightOptionsMenu';
+export { default as DismissInsightDialog, type DismissInsightDialogProps, type DismissType, } from './components/DismissInsightDialog';
+export { default as HiddenConfirmationCard, type HiddenConfirmationCardProps, } from './components/HiddenConfirmationCard';
+export { default as FeedbackDialog, type FeedbackDialogProps } from './components/FeedbackDialog';
+export { default as FeedbackBar, type FeedbackBarProps } from './components/FeedbackBar';
+export { useBeatActions, type BeatActions, type MenuActionHandlers, type UpdateParams, type FeedbackParams, type DismissParams, type InsightMenuAction, type InsightRating, } from './beatActions';
 export { default as LogoTile } from './components/LogoTile';
 export { default as MerchantHighlightCard } from './components/MerchantHighlightCard';
 export { default as P2PLogoStack } from './components/P2PLogoStack';

package/dist/insights-v2/index.es.js

@@ -1,63 +1,77 @@
-import { BAR_CHART_VARIANTS as o, barChartVariant as t, buildChartData as m, buildDataSeries as i } from "./blocks/ChartBlocks/BarchartBlock/utils.es.js";
+import { BAR_CHART_VARIANTS as r, barChartVariant as t, buildChartData as m, buildDataSeries as i } from "./blocks/ChartBlocks/BarchartBlock/utils.es.js";
 import { BarchartBlock as p } from "./blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
-import { DoubleBarChartBlock as c } from "./blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
-import l from "./blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
-import s from "./blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
-import B from "./blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
-import u from "./blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
-import S from "./components/TransferLogoCard.es.js";
-import h from "./blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.es.js";
-import { BudgetBlock as T } from "./blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
-import D from "./components/SaveAnExtraCard.es.js";
-import P from "./blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
-import y from "./components/InsightTransactionRow.es.js";
-import R from "./components/TransactionListCard.es.js";
-import { CategoryTransactionsBlock as E } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
-import { SVGImageBlock as V } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
-import M from "./components/AccountHeroCard.es.js";
-import G from "./components/AmountPill.es.js";
-import O from "./components/DesignateEmergencySavingsCard.es.js";
-import j from "./components/BaseLayout.es.js";
-import z from "./components/StatusMessageCard.es.js";
-import J from "./components/LogoTile.es.js";
-import Q from "./components/LogoClusterCard.es.js";
-import X from "./components/MerchantHighlightCard.es.js";
-import Z from "./components/P2PLogoStack.es.js";
-import rr from "./components/SavingsOpportunityCard.es.js";
-import tr from "./components/StatusPill.es.js";
-import ir from "./components/SubscriptionHeroCard.es.js";
-import pr from "./components/UpcomingBillCard.es.js";
+import { DoubleBarChartBlock as e } from "./blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
+import c from "./blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
+import l from "./blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
+import C from "./blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
+import d from "./blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
+import k from "./components/TransferLogoCard.es.js";
+import S from "./blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.es.js";
+import { BudgetBlock as D } from "./blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
+import T from "./components/SaveAnExtraCard.es.js";
+import v from "./blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
+import I from "./components/InsightTransactionRow.es.js";
+import y from "./components/TransactionListCard.es.js";
+import { CategoryTransactionsBlock as R } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
+import { SVGImageBlock as x } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
+import O from "./components/AccountHeroCard.es.js";
+import F from "./components/AmountPill.es.js";
+import G from "./components/DesignateEmergencySavingsCard.es.js";
+import { useBeatActions as U } from "./beatActions.es.js";
+import { OverflowMenu as q } from "./components/OverflowMenu.es.js";
+import { InsightOptionsMenu as J } from "./components/InsightOptionsMenu.es.js";
+import { FeedbackBar as Q } from "./components/FeedbackBar.es.js";
+import X from "./components/FeedbackDialog.es.js";
+import { DismissInsightDialog as Z } from "./components/DismissInsightDialog.es.js";
+import { HiddenConfirmationCard as oo } from "./components/HiddenConfirmationCard.es.js";
+import to from "./components/BaseLayout.es.js";
+import io from "./components/StatusMessageCard.es.js";
+import po from "./components/LogoTile.es.js";
+import eo from "./components/LogoClusterCard.es.js";
+import co from "./components/MerchantHighlightCard.es.js";
+import lo from "./components/P2PLogoStack.es.js";
+import Co from "./components/SavingsOpportunityCard.es.js";
+import uo from "./components/StatusPill.es.js";
+import ho from "./components/SubscriptionHeroCard.es.js";
+import Ao from "./components/UpcomingBillCard.es.js";
 export {
-  u as AccountBlock,
-  M as AccountHeroCard,
-  h as AccountSwitchBlock,
-  G as AmountPill,
-  o as BAR_CHART_VARIANTS,
+  d as AccountBlock,
+  O as AccountHeroCard,
+  S as AccountSwitchBlock,
+  F as AmountPill,
+  r as BAR_CHART_VARIANTS,
   p as BarchartBlock,
-  j as BaseLayout,
-  T as BudgetBlock,
-  E as CategoryTransactionsBlock,
-  O as DesignateEmergencySavingsCard,
-  s as DonutChartBlock,
-  c as DoubleBarChartBlock,
-  B as DoubleProgressBarBlock,
-  y as InsightTransactionRow,
-  Q as LogoClusterCard,
-  J as LogoTile,
-  X as MerchantHighlightCard,
-  Z as P2PLogoStack,
-  V as SVGImageBlock,
-  D as SaveAnExtraCard,
-  P as SaveExtraBlock,
-  rr as SavingsOpportunityCard,
-  z as StatusMessageCard,
-  tr as StatusPill,
-  l as StepChartBlock,
-  ir as SubscriptionHeroCard,
-  R as TransactionListCard,
-  S as TransferLogoCard,
-  pr as UpcomingBillCard,
+  to as BaseLayout,
+  D as BudgetBlock,
+  R as CategoryTransactionsBlock,
+  G as DesignateEmergencySavingsCard,
+  Z as DismissInsightDialog,
+  l as DonutChartBlock,
+  e as DoubleBarChartBlock,
+  C as DoubleProgressBarBlock,
+  Q as FeedbackBar,
+  X as FeedbackDialog,
+  oo as HiddenConfirmationCard,
+  J as InsightOptionsMenu,
+  I as InsightTransactionRow,
+  eo as LogoClusterCard,
+  po as LogoTile,
+  co as MerchantHighlightCard,
+  q as OverflowMenu,
+  lo as P2PLogoStack,
+  x as SVGImageBlock,
+  T as SaveAnExtraCard,
+  v as SaveExtraBlock,
+  Co as SavingsOpportunityCard,
+  io as StatusMessageCard,
+  uo as StatusPill,
+  c as StepChartBlock,
+  ho as SubscriptionHeroCard,
+  y as TransactionListCard,
+  k as TransferLogoCard,
+  Ao as UpcomingBillCard,
   t as barChartVariant,
   m as buildChartData,
-  i as buildDataSeries
+  i as buildDataSeries,
+  U as useBeatActions
 };

package/package.json

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