@mongodb-js/compass-components 1.10.0 → 1.11.0

package/lib/components/placeholder.js

@@ -65,12 +65,11 @@ function getBoundRandom(min, max) {
     return Math.random() * (max - min) + min;
 }
 const Placeholder = ({ className, minChar = 5, maxChar = 15, width: propsWidth, height: propsHeight = tokens_1.spacing[3], ...props }) => {
-    var _a;
     const darkMode = (0, use_theme_1.useDarkMode)();
     const width = (0, react_1.useMemo)(() => {
         return propsWidth || `${Math.round(getBoundRandom(minChar, maxChar))}ch`;
     }, [minChar, maxChar, propsWidth]);
-    return (react_1.default.createElement("div", { ...props, role: "presentation", "data-testid": (_a = props['data-testid']) !== null && _a !== void 0 ? _a : 'placeholder', className: (0, emotion_1.cx)(placeholder, className, darkMode && placeholderDarkMode), style: { width, height: propsHeight } }));
+    return (react_1.default.createElement("div", { ...props, role: "presentation", "data-testid": props['data-testid'] ?? 'placeholder', className: (0, emotion_1.cx)(placeholder, className, darkMode && placeholderDarkMode), style: { width, height: propsHeight } }));
 };
 exports.Placeholder = Placeholder;
 //# sourceMappingURL=placeholder.js.map

package/lib/components/placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"placeholder.js","sourceRoot":"","sources":["../../src/components/placeholder.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,+CAAuC;AACvC,oDAA4D;AAC5D,kDAAgD;AAChD,oDAAiD;AACjD,kDAAiD;AAGjD,MAAM,KAAK,GAAG,CAAC,CAAC;AAEhB,MAAM,OAAO,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;AAEtE,MAAM,IAAI,GAAG,IAAA,mBAAS,EAAC;IACrB,IAAI,EAAE;QACJ,kBAAkB,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI;KAC1C;IACD,EAAE,EAAE;QACF,kBAAkB,EAAE,KAAK;KAC1B;CACF,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,IAAA,aAAG,EAAC;IACtB,kBAAkB,EAAE,iBAAO,CAAC,IAAI,CAAC,MAAM;IACvC,gBAAgB,EAAE,iBAAO,CAAC,IAAI,CAAC,MAAM;IACrC,SAAS,EAAE,QAAQ;IACnB,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,KAAK;IACf,eAAe,EAAE,uBAAuB;IACxC,eAAe,EAAE;;;8BAGW,OAAO,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;gCACpB,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC;;MAE5C;IACJ,cAAc,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO;IACxC,kBAAkB,EAAE,KAAK;IACzB,SAAS,EAAE,GAAG,IAAI,IAAI,KAAK,mBAAmB;CAC/C,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,IAAA,aAAG,EAAC;IAC9B,kBAAkB,EAAE,iBAAO,CAAC,IAAI,CAAC,KAAK;IACtC,gBAAgB,EAAE,iBAAO,CAAC,IAAI,CAAC,KAAK;CACrC,CAAC,CAAC;AAEH,SAAS,cAAc,CAAC,GAAW,EAAE,GAAW;IAC9C,OAAO,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAC3C,CAAC;AAED,MAAM,WAAW,GAWb,CAAC,EACH,SAAS,EACT,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,WAAW,GAAG,gBAAO,CAAC,CAAC,CAAC,EAChC,GAAG,KAAK,EACT,EAAE,EAAE;;IACH,MAAM,QAAQ,GAAG,IAAA,uBAAW,GAAE,CAAC;IAE/B,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzB,OAAO,UAAU,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;IAC3E,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,0CACM,KAAK,EACT,IAAI,EAAC,cAAc,iBACN,MAAA,KAAK,CAAC,aAAa,CAAC,mCAAI,aAAa,EAClD,SAAS,EAAE,IAAA,YAAE,EAAC,WAAW,EAAE,SAAS,EAAE,QAAQ,IAAI,mBAAmB,CAAC,EACtE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,GAChC,CACR,CAAC;AACJ,CAAC,CAAC;AAEO,kCAAW"}
+{"version":3,"file":"placeholder.js","sourceRoot":"","sources":["../../src/components/placeholder.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,+CAAuC;AACvC,oDAA4D;AAC5D,kDAAgD;AAChD,oDAAiD;AACjD,kDAAiD;AAGjD,MAAM,KAAK,GAAG,CAAC,CAAC;AAEhB,MAAM,OAAO,GAAG,CAAC,GAAW,EAAU,EAAE,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;AAEtE,MAAM,IAAI,GAAG,IAAA,mBAAS,EAAC;IACrB,IAAI,EAAE;QACJ,kBAAkB,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI;KAC1C;IACD,EAAE,EAAE;QACF,kBAAkB,EAAE,KAAK;KAC1B;CACF,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,IAAA,aAAG,EAAC;IACtB,kBAAkB,EAAE,iBAAO,CAAC,IAAI,CAAC,MAAM;IACvC,gBAAgB,EAAE,iBAAO,CAAC,IAAI,CAAC,MAAM;IACrC,SAAS,EAAE,QAAQ;IACnB,YAAY,EAAE,CAAC;IACf,QAAQ,EAAE,KAAK;IACf,eAAe,EAAE,uBAAuB;IACxC,eAAe,EAAE;;;8BAGW,OAAO,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;gCACpB,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC;;MAE5C;IACJ,cAAc,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO;IACxC,kBAAkB,EAAE,KAAK;IACzB,SAAS,EAAE,GAAG,IAAI,IAAI,KAAK,mBAAmB;CAC/C,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,IAAA,aAAG,EAAC;IAC9B,kBAAkB,EAAE,iBAAO,CAAC,IAAI,CAAC,KAAK;IACtC,gBAAgB,EAAE,iBAAO,CAAC,IAAI,CAAC,KAAK;CACrC,CAAC,CAAC;AAEH,SAAS,cAAc,CAAC,GAAW,EAAE,GAAW;IAC9C,OAAO,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAC3C,CAAC;AAED,MAAM,WAAW,GAWb,CAAC,EACH,SAAS,EACT,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,WAAW,GAAG,gBAAO,CAAC,CAAC,CAAC,EAChC,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,IAAA,uBAAW,GAAE,CAAC;IAE/B,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzB,OAAO,UAAU,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;IAC3E,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,0CACM,KAAK,EACT,IAAI,EAAC,cAAc,iBACN,KAAK,CAAC,aAAa,CAAC,IAAI,aAAa,EAClD,SAAS,EAAE,IAAA,YAAE,EAAC,WAAW,EAAE,SAAS,EAAE,QAAQ,IAAI,mBAAmB,CAAC,EACtE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,GAChC,CACR,CAAC;AACJ,CAAC,CAAC;AAEO,kCAAW"}

package/lib/components/signal-popover.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+type SignalTrackingHooks = {
+    onSignalMount(id: string): void;
+    onSignalOpen(id: string): void;
+    onSignalLinkClick(id: string): void;
+    onSignalPrimaryActionClick(id: string): void;
+    onSignalClose(id: string): void;
+};
+declare const SignalHooksProvider: React.FunctionComponent<Partial<SignalTrackingHooks>>;
+export type Signal = {
+    id: string;
+    title: React.ReactNode;
+    description: React.ReactNode;
+    learnMoreLink: string;
+    learnMoreLabel?: string;
+    primaryActionButtonLabel?: string;
+    primaryActionButtonIcon?: string;
+    primaryActionButtonVariant?: 'primaryOutline' | 'dangerOutline';
+    primaryActionButtonLink?: string;
+    onPrimaryActionButtonClick?: React.MouseEventHandler;
+};
+type SignalPopoverProps = {
+    signals: Signal | Signal[];
+    darkMode?: boolean;
+    onPopoverOpenChange?: (open: boolean) => void;
+    className?: string;
+};
+declare const SignalPopover: React.FunctionComponent<SignalPopoverProps>;
+export { SignalPopover, SignalHooksProvider };
+//# sourceMappingURL=signal-popover.d.ts.map

package/lib/components/signal-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signal-popover.d.ts","sourceRoot":"","sources":["../../src/components/signal-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAaf,KAAK,mBAAmB,GAAG;IACzB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,0BAA0B,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7C,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC,CAAC;AAoBF,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,CAChD,OAAO,CAAC,mBAAmB,CAAC,CA6B7B,CAAC;AAIF,MAAM,MAAM,MAAM,GAAG;IAMnB,EAAE,EAAE,MAAM,CAAC;IAEX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B,aAAa,EAAE,MAAM,CAAC;IAKtB,cAAc,CAAC,EAAE,MAAM,CAAC;IAKxB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC,0BAA0B,CAAC,EAAE,gBAAgB,GAAG,eAAe,CAAC;IAKhE,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAMjC,0BAA0B,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACtD,CAAC;AAEF,KAAK,kBAAkB,GAAG;IAExB,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAwTF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CA+N9D,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,CAAC"}

package/lib/components/signal-popover.js

@@ -0,0 +1,356 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SignalHooksProvider = exports.SignalPopover = void 0;
+const react_1 = __importStar(require("react"));
+const use_focus_hover_1 = require("../hooks/use-focus-hover");
+const leafygreen_1 = require("./leafygreen");
+const interactive_popover_1 = require("./interactive-popover");
+const merge_props_1 = require("../utils/merge-props");
+const emotion_1 = require("@leafygreen-ui/emotion");
+const palette_1 = require("@leafygreen-ui/palette");
+const use_theme_1 = require("../hooks/use-theme");
+const tokens_1 = require("@leafygreen-ui/tokens");
+const guide_cue_1 = require("./guide-cue/guide-cue");
+const use_effect_on_change_1 = require("../hooks/use-effect-on-change");
+const rafraf_1 = require("../utils/rafraf");
+const TrackingHooksContext = react_1.default.createContext({
+    onSignalMount() {
+    },
+    onSignalOpen() {
+    },
+    onSignalLinkClick() {
+    },
+    onSignalPrimaryActionClick() {
+    },
+    onSignalClose() {
+    },
+});
+const SignalHooksProvider = ({ children, ..._hooks }) => {
+    const hooksRef = (0, react_1.useRef)(_hooks);
+    hooksRef.current = _hooks;
+    const hooks = (0, react_1.useMemo)(() => {
+        return {
+            onSignalMount(id) {
+                hooksRef.current.onSignalMount?.(id);
+            },
+            onSignalOpen(id) {
+                hooksRef.current.onSignalOpen?.(id);
+            },
+            onSignalLinkClick(id) {
+                hooksRef.current.onSignalLinkClick?.(id);
+            },
+            onSignalPrimaryActionClick(id) {
+                hooksRef.current.onSignalPrimaryActionClick?.(id);
+            },
+            onSignalClose(id) {
+                hooksRef.current.onSignalClose?.(id);
+            },
+        };
+    }, []);
+    return (react_1.default.createElement(TrackingHooksContext.Provider, { value: hooks }, children));
+};
+exports.SignalHooksProvider = SignalHooksProvider;
+const TRANSITION_DURATION_MS = 150;
+const signalCardContentStyles = (0, emotion_1.css)({
+    '--signalCardBackgroundColor': palette_1.palette.white,
+    width: '100%',
+    display: 'grid',
+    gridTemplateColumns: '1fr',
+    gridTemplateRows: 'auto 1fr auto',
+    paddingTop: tokens_1.spacing[4],
+    paddingBottom: tokens_1.spacing[4],
+    paddingLeft: tokens_1.spacing[4],
+    paddingRight: tokens_1.spacing[4],
+    backgroundColor: 'var(--signalCardBackgroundColor)',
+});
+const CLOSE_BTN_TOP_WITH_MULTI_SIGNALS = 5;
+const CLOSE_BTN_RIGHT_WITH_MULTI_SIGNALS = 5;
+const CLOSE_BTN_TOP = 18;
+const CLOSE_BTN_RIGHT = 18;
+const signalCardContentDarkModeStyles = (0, emotion_1.css)({
+    '--signalCardBackgroundColor': palette_1.palette.gray.dark4,
+});
+const signalCardTitleStyles = (0, emotion_1.css)({
+    marginBottom: tokens_1.spacing[2],
+    fontSize: tokens_1.spacing[3],
+});
+const signalCardTitleStylesWithOneSignal = (0, emotion_1.css)({
+    paddingRight: CLOSE_BTN_RIGHT,
+});
+const signalCardDescriptionStyles = (0, emotion_1.css)({
+    marginBottom: tokens_1.spacing[3],
+});
+const signalCardActionGroupStyles = (0, emotion_1.css)({
+    display: 'flex',
+    justifyContent: 'space-between',
+});
+const signalCardActionButtonStyles = (0, emotion_1.css)({
+    flex: 'none',
+});
+const signalCardLearnMoreLinkStyles = (0, emotion_1.css)({
+    flex: 'none',
+});
+const SignalCard = ({ id, title, description, learnMoreLink, learnMoreLabel, primaryActionButtonLabel, primaryActionButtonIcon, primaryActionButtonVariant, primaryActionButtonLink, darkMode: _darkMode, onPrimaryActionButtonClick, hasMultiSignals, }) => {
+    const darkMode = (0, use_theme_1.useDarkMode)(_darkMode);
+    const hooks = (0, react_1.useContext)(TrackingHooksContext);
+    return (react_1.default.createElement("div", { className: (0, emotion_1.cx)(signalCardContentStyles, darkMode && signalCardContentDarkModeStyles), "data-testid": "insight-signal-card", "data-signal-id": id },
+        react_1.default.createElement("strong", { className: (0, emotion_1.cx)(signalCardTitleStyles, {
+                [signalCardTitleStylesWithOneSignal]: !hasMultiSignals,
+            }) }, title),
+        react_1.default.createElement(leafygreen_1.Body, { as: "div", baseFontSize: 13, className: signalCardDescriptionStyles }, description),
+        react_1.default.createElement("div", { className: signalCardActionGroupStyles },
+            primaryActionButtonLabel && (react_1.default.createElement(leafygreen_1.Button, { size: "small", as: primaryActionButtonLink ? 'a' : 'button', target: primaryActionButtonLink ? '_blank' : undefined, href: primaryActionButtonLink, "data-testid": "insight-signal-primary-action", variant: primaryActionButtonVariant ?? 'primaryOutline', className: signalCardActionButtonStyles, leftGlyph: primaryActionButtonIcon ? (react_1.default.createElement(leafygreen_1.Icon, { glyph: primaryActionButtonIcon })) : undefined, onClick: (evt) => {
+                    hooks.onSignalPrimaryActionClick(id);
+                    onPrimaryActionButtonClick?.(evt);
+                } }, primaryActionButtonLabel)),
+            react_1.default.createElement(leafygreen_1.Link, { "data-testid": "insight-signal-link", className: signalCardLearnMoreLinkStyles, href: learnMoreLink, target: "_blank", onClick: () => {
+                    hooks.onSignalLinkClick(id);
+                } }, learnMoreLabel ?? 'Learn more'))));
+};
+const multiSignalHeaderContainerStyles = (0, emotion_1.css)({
+    '--multiSignalHeaderBorderColor': palette_1.palette.gray.light2,
+    '--multiSignalHeaderBackgroundColor': palette_1.palette.gray.light3,
+    display: 'flex',
+    alignItems: 'center',
+    paddingTop: tokens_1.spacing[1],
+    paddingBottom: tokens_1.spacing[1],
+    paddingLeft: tokens_1.spacing[2],
+    paddingRight: tokens_1.spacing[4],
+    gap: tokens_1.spacing[1],
+    backgroundColor: 'var(--multiSignalHeaderBackgroundColor)',
+    boxShadow: `inset 0 -1px 0 var(--multiSignalHeaderBorderColor)`,
+    fontVariantNumeric: 'tabular-nums',
+});
+const multiSignalHeaderContainerDarkModeStyles = (0, emotion_1.css)({
+    '--multiSignalHeaderBorderColor': palette_1.palette.gray.dark2,
+    '--multiSignalHeaderBackgroundColor': palette_1.palette.gray.dark3,
+});
+const MultiSignalHeader = ({ currentIndex, total, onIndexChange, darkMode: _darkMode }) => {
+    const darkMode = (0, use_theme_1.useDarkMode)(_darkMode);
+    return (react_1.default.createElement("div", { className: (0, emotion_1.cx)(multiSignalHeaderContainerStyles, darkMode && multiSignalHeaderContainerDarkModeStyles) },
+        react_1.default.createElement(leafygreen_1.IconButton, { "data-testid": "insight-signal-show-prev-button", "aria-label": "Show previous insight", title: "Show previous insight", onClick: (e) => {
+                e.stopPropagation();
+                onIndexChange(currentIndex - 1);
+            }, disabled: currentIndex === 0 },
+            react_1.default.createElement(leafygreen_1.Icon, { glyph: "ChevronLeft" })),
+        react_1.default.createElement("span", null,
+            "Insight ",
+            react_1.default.createElement("strong", null, currentIndex + 1),
+            " of ",
+            react_1.default.createElement("strong", null, total)),
+        react_1.default.createElement(leafygreen_1.IconButton, { "data-testid": "insight-signal-show-next-button", "aria-label": "Show next insight", title: "Show next insight", onClick: (e) => {
+                e.stopPropagation();
+                onIndexChange(currentIndex + 1);
+            }, disabled: currentIndex === total - 1 },
+            react_1.default.createElement(leafygreen_1.Icon, { glyph: "ChevronRight" }))));
+};
+const popoverStyles = (0, emotion_1.css)({
+    width: 315,
+});
+const popoverHiddenStyles = (0, emotion_1.css)({
+    display: 'none !important',
+    opacity: '0 !important',
+    transition: 'none !important',
+});
+const popoverContentContainerStyles = (0, emotion_1.css)({
+    display: 'block',
+});
+const transitionStyles = (0, emotion_1.css)({
+    transitionProperty: 'opacity, width, border-radius, color, box-shadow, background-color',
+    transitionTimingFunction: 'linear',
+    transitionDuration: `${TRANSITION_DURATION_MS}ms`,
+});
+const badgeStyles = (0, emotion_1.css)({
+    padding: 0,
+    border: 'none',
+    background: 'none',
+}, {
+    position: 'relative',
+    display: 'block',
+    width: 18,
+    height: 18,
+    color: 'var(--badgeColor)',
+    backgroundColor: 'var(--badgeBackgroundColor)',
+    boxShadow: `inset 0 0 0 1px var(--badgeBorderColor)`,
+    borderRadius: '9px',
+    fontSize: '12px',
+    lineHeight: '14px',
+    fontWeight: 700,
+    overflow: 'hidden',
+    cursor: 'pointer',
+}, transitionStyles);
+const badgeLightModeStyles = (0, emotion_1.css)({
+    '--badgeBackgroundColor': palette_1.palette.blue.light3,
+    '--badgeBorderColor': palette_1.palette.blue.light2,
+    '--badgeColor': palette_1.palette.blue.dark1,
+});
+const badgeDarkModeStyles = (0, emotion_1.css)({
+    '--badgeBackgroundColor': palette_1.palette.blue.dark2,
+    '--badgeBorderColor': palette_1.palette.blue.dark1,
+    '--badgeColor': palette_1.palette.blue.light2,
+});
+const badgeHoveredStyles = (0, emotion_1.css)({
+    borderRadius: 5,
+});
+const badgeHoveredLightModeStyles = (0, emotion_1.css)({
+    '--badgeBackgroundColor': palette_1.palette.blue.light1,
+    '--badgeBorderColor': palette_1.palette.blue.dark1,
+    '--badgeColor': palette_1.palette.white,
+    borderRadius: 5,
+});
+const badgeHoveredDarkModeStyles = (0, emotion_1.css)({
+    '--badgeBackgroundColor': palette_1.palette.blue.dark1,
+    '--badgeBorderColor': palette_1.palette.blue.base,
+    '--badgeColor': palette_1.palette.blue.light3,
+});
+const badgeIconStyles = (0, emotion_1.css)({});
+const badgeIconCollapsedStyles = (0, emotion_1.css)({
+    position: 'absolute',
+    top: 2,
+    left: 2,
+}, transitionStyles);
+const badgeLabelStyles = (0, emotion_1.css)({
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textTransform: 'uppercase',
+    top: 2,
+}, transitionStyles);
+const singleInsightBadge = (0, emotion_1.css)({
+    justifyContent: 'flex-start',
+    paddingLeft: 2,
+});
+const closeButtonStyles = (0, emotion_1.css)({
+    top: CLOSE_BTN_TOP,
+    right: CLOSE_BTN_RIGHT,
+});
+const closeButtonMultiSignalStyles = (0, emotion_1.css)({
+    top: CLOSE_BTN_TOP_WITH_MULTI_SIGNALS,
+    right: CLOSE_BTN_RIGHT_WITH_MULTI_SIGNALS,
+});
+const SignalPopover = ({ signals: _signals, darkMode: _darkMode, onPopoverOpenChange: _onPopoverOpenChange, className, }) => {
+    const hooks = (0, react_1.useContext)(TrackingHooksContext);
+    const darkMode = (0, use_theme_1.useDarkMode)(_darkMode);
+    const [triggerVisible, setTriggerVisible] = (0, react_1.useState)(true);
+    const [popoverOpen, setPopoverOpen] = (0, react_1.useState)(false);
+    const [hoverProps, isHovered, setHovered] = (0, use_focus_hover_1.useHoverState)();
+    const [currentSignalIndex, setCurrentSignalIndex] = (0, react_1.useState)(0);
+    const signals = Array.isArray(_signals) ? _signals : [_signals];
+    const currentSignal = signals[currentSignalIndex];
+    const multiSignals = signals.length > 1;
+    const isActive = isHovered || popoverOpen;
+    const triggerRef = (0, react_1.useRef)(null);
+    const mountedSignalsRef = (0, react_1.useRef)(new Set());
+    signals.forEach(({ id }) => {
+        if (!mountedSignalsRef.current.has(id)) {
+            hooks.onSignalMount(id);
+            mountedSignalsRef.current.add(id);
+        }
+    });
+    (0, use_effect_on_change_1.useEffectOnChange)(() => {
+        if (popoverOpen) {
+            hooks.onSignalOpen(currentSignal.id);
+        }
+        else {
+            hooks.onSignalClose(currentSignal.id);
+        }
+    }, [currentSignal.id, popoverOpen]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!triggerRef.current) {
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            const isVisible = entries[0].isIntersecting;
+            setTriggerVisible(isVisible);
+            if (!isVisible) {
+                setPopoverOpen(false);
+            }
+        });
+        observer.observe(triggerRef.current);
+        return observer.disconnect.bind(observer);
+    }, []);
+    const onPopoverOpenChange = (0, react_1.useCallback)((newStatus) => {
+        setPopoverOpen(newStatus);
+        _onPopoverOpenChange?.(newStatus);
+        if (newStatus === true) {
+            setCurrentSignalIndex(0);
+        }
+    }, [_onPopoverOpenChange]);
+    const badgeLabel = multiSignals ? (react_1.default.createElement(react_1.default.Fragment, null,
+        signals.length,
+        "\u00A0insights")) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(leafygreen_1.Icon, { glyph: "Bulb", size: "small" }),
+        "\u00A0insight"));
+    const activeBadgeWidth = multiSignals
+        ?
+            `${`${signals.length} insights`.length}ch`
+        :
+            `calc(14px + ${' insight'.length}ch)`;
+    return (react_1.default.createElement(interactive_popover_1.InteractivePopover, { className: (0, emotion_1.cx)(popoverStyles, !triggerVisible && popoverHiddenStyles), containerClassName: (0, emotion_1.cx)(popoverContentContainerStyles), closeButtonClassName: multiSignals ? closeButtonMultiSignalStyles : closeButtonStyles, open: popoverOpen, setOpen: onPopoverOpenChange, spacing: tokens_1.spacing[2], trigger: ({ children, ...triggerProps }) => {
+            const onTriggerClick = (evt) => {
+                evt.stopPropagation();
+                triggerProps.onClick(evt);
+            };
+            return (react_1.default.createElement(guide_cue_1.GuideCue, { cueId: "insights", title: "Introducing insights", description: "Across Compass, you may now see icons like this to clue you in on potential areas of improvement for your data.", buttonText: "See insights in action", onPrimaryButtonClick: () => {
+                    setHovered(true);
+                    setTimeout(() => {
+                        (0, rafraf_1.rafraf)(() => {
+                            triggerRef.current?.click();
+                        });
+                    }, TRANSITION_DURATION_MS);
+                }, trigger: ({ ref: guideCueRef }) => {
+                    const props = (0, merge_props_1.mergeProps)(hoverProps, triggerProps, {
+                        className: (0, emotion_1.cx)(badgeStyles, isActive && badgeHoveredStyles, ...(darkMode
+                            ? [
+                                badgeDarkModeStyles,
+                                isActive && badgeHoveredDarkModeStyles,
+                            ]
+                            : [
+                                badgeLightModeStyles,
+                                isActive && badgeHoveredLightModeStyles,
+                            ]), className),
+                        style: { width: isActive ? activeBadgeWidth : 18 },
+                        ref: triggerRef,
+                    }, { ref: guideCueRef });
+                    return (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("button", { ...props, onClick: onTriggerClick, "data-testid": "insight-badge-button", type: "button" },
+                            react_1.default.createElement(leafygreen_1.Icon, { glyph: "Bulb", size: "small", className: (0, emotion_1.cx)(badgeIconStyles, badgeIconCollapsedStyles), style: { opacity: isActive ? 0 : 1 } }),
+                            react_1.default.createElement("strong", { className: (0, emotion_1.cx)(badgeLabelStyles, !multiSignals && singleInsightBadge), style: {
+                                    width: activeBadgeWidth,
+                                    opacity: isActive ? 1 : 0,
+                                } }, badgeLabel)),
+                        children));
+                } }));
+        } },
+        react_1.default.createElement("div", { onMouseDown: (event) => {
+                event.stopPropagation();
+            } },
+            multiSignals && (react_1.default.createElement(MultiSignalHeader, { currentIndex: currentSignalIndex, total: signals.length, onIndexChange: setCurrentSignalIndex, darkMode: darkMode })),
+            react_1.default.createElement(SignalCard, { ...currentSignal, darkMode: darkMode, hasMultiSignals: multiSignals }))));
+};
+exports.SignalPopover = SignalPopover;
+//# sourceMappingURL=signal-popover.js.map

package/lib/components/signal-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"signal-popover.js","sourceRoot":"","sources":["../../src/components/signal-popover.tsx"],"names":[],"mappings":"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"}

package/lib/components/signals.d.ts

@@ -0,0 +1,87 @@
+/// <reference types="react" />
+import type { Signal } from './signal-popover';
+declare const SIGNALS: readonly [{
+    readonly id: "aggregation-executed-without-index";
+    readonly title: "Aggregation executed without index";
+    readonly description: JSX.Element;
+    readonly learnMoreLink: "https://www.mongodb.com/docs/v6.0/core/data-model-operations/#indexes";
+    readonly primaryActionButtonLabel: "Create index";
+    readonly primaryActionButtonIcon: "Plus";
+}, {
+    readonly id: "atlas-text-regex-usage-in-view";
+    readonly title: "Alternate text search options available";
+    readonly description: "In many cases, Atlas Search is MongoDB's most efficient full text search option. Convert your view’s query to $search for a wider range of functionality.";
+    readonly learnMoreLink: "https://www.mongodb.com/docs/atlas/atlas-search/best-practices/";
+    readonly primaryActionButtonLink: "https://www.mongodb.com/cloud/atlas/lp/search-1";
+    readonly primaryActionButtonLabel: "Try Atlas Search";
+}, {
+    readonly id: "non-atlas-text-regex-usage-in-view";
+    readonly title: "Alternate text search options available";
+    readonly description: "In many cases, Atlas Search is MongoDB's most efficient full text search option. Connect with Atlas to explore the power of Atlas Search.";
+    readonly learnMoreLink: "https://www.mongodb.com/docs/atlas/atlas-search/best-practices/";
+    readonly primaryActionButtonLink: "https://www.mongodb.com/cloud/atlas/lp/search-1";
+    readonly primaryActionButtonLabel: "Try Atlas Search";
+}, {
+    readonly id: "lookup-in-view";
+    readonly title: "$lookup usage";
+    readonly description: "$lookup operations can be resource-intensive because they perform operations on two collections instead of one. In certain situations, embedding documents or arrays can enhance read performance.";
+    readonly learnMoreLink: "https://www.mongodb.com/docs/atlas/schema-suggestions/reduce-lookup-operations/#std-label-anti-pattern-denormalization";
+}, {
+    readonly id: "atlas-text-regex-usage-in-stage";
+    readonly title: "Alternate text search options available";
+    readonly description: "In many cases, Atlas Search is MongoDB's most efficient full text search option. Convert your query to $search for a wider range of functionality.";
+    readonly learnMoreLink: "https://www.mongodb.com/docs/atlas/atlas-search/best-practices/";
+    readonly primaryActionButtonLink: "https://www.mongodb.com/cloud/atlas/lp/search-1";
+    readonly primaryActionButtonLabel: "Try Atlas Search";
+}, {
+    readonly id: "non-atlas-text-regex-usage-in-stage";
+    readonly title: "Alternate text search options available";
+    readonly description: "In many cases, Atlas Search is MongoDB's most efficient full text search option. Connect with Atlas to explore the power of Atlas Search.";
+    readonly learnMoreLink: "https://www.mongodb.com/docs/atlas/atlas-search/best-practices/";
+    readonly primaryActionButtonLink: "https://www.mongodb.com/cloud/atlas/lp/search-1";
+    readonly primaryActionButtonLabel: "Try Atlas Search";
+}, {
+    readonly id: "lookup-in-stage";
+    readonly title: "$lookup usage";
+    readonly description: "$lookup operations can be resource-intensive because they perform operations on two collections instead of one. In certain situations, embedding documents or arrays can enhance read performance.";
+    readonly learnMoreLink: "https://www.mongodb.com/docs/atlas/schema-suggestions/reduce-lookup-operations/#std-label-anti-pattern-denormalization";
+}, {
+    readonly id: "query-executed-without-index";
+    readonly title: "Query executed without index";
+    readonly description: JSX.Element;
+    readonly learnMoreLink: "https://www.mongodb.com/docs/v6.0/core/data-model-operations/#indexes";
+    readonly primaryActionButtonLabel: "Create index";
+    readonly primaryActionButtonIcon: "Plus";
+}, {
+    readonly id: "bloated-document";
+    readonly title: "Possibly bloated document";
+    readonly description: "Large documents can slow down queries by decreasing the number of documents that can be stored in RAM. Consider breaking up your data into more collections with smaller documents, and using references to consolidate the data you need.";
+    readonly learnMoreLink: "https://www.mongodb.com/docs/atlas/schema-suggestions/reduce-document-size/";
+}, {
+    readonly id: "explain-plan-without-index";
+    readonly title: "Query executed without index";
+    readonly description: JSX.Element;
+    readonly learnMoreLink: "https://www.mongodb.com/docs/v6.0/core/data-model-operations/#indexes";
+    readonly primaryActionButtonLabel: "Create index";
+    readonly primaryActionButtonIcon: "Plus";
+}, {
+    readonly id: "too-many-indexes";
+    readonly title: "High number of indexes on collection";
+    readonly description: "Consider reviewing your indexes to remove any that are unnecessary. Learn more about this anti-pattern";
+    readonly learnMoreLink: "https://www.mongodb.com/docs/manual/core/data-model-operations/#indexes";
+}, {
+    readonly id: "too-many-collections";
+    readonly title: "Databases with too many collections";
+    readonly description: "An excessive number of collections and their associated indexes can drain resources and impact your database's performance. In general, try to limit your replica set to 10,000 collections.";
+    readonly learnMoreLink: "https://www.mongodb.com/docs/v6.0/core/data-model-operations/#large-number-of-collections";
+}, {
+    readonly id: "unbound-array";
+    readonly title: "Large array detected";
+    readonly description: "As arrays get larger, queries and indexes on that array field become less efficient. Ensure your arrays are bounded to maintain optimal query performance.";
+    readonly learnMoreLink: "https://www.mongodb.com/docs/atlas/schema-suggestions/avoid-unbounded-arrays/";
+}];
+export declare const PerformanceSignals: {
+    get(key: (typeof SIGNALS)[number]['id']): Pick<Signal, keyof (typeof SIGNALS)[number]>;
+};
+export {};
+//# sourceMappingURL=signals.d.ts.map

package/lib/components/signals.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signals.d.ts","sourceRoot":"","sources":["../../src/components/signals.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE/C,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsIH,CAAC;AAEX,eAAO,MAAM,kBAAkB;aAMtB,CAAA,cAAc,EAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAChC,KAAK,MAAM,EAAE,MAAM,CAAA,cAAc,EAAC,MAAM,CAAC,CAAC;CAC9C,CAAC"}