@atlaskit/smart-card 43.11.3 → 43.12.0

package/dist/esm/view/EmbedCard/components/ExpandedFrame.js

@@ -3,12 +3,15 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./ExpandedFrame.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+// eslint-disable-next-line no-unused-vars
+
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import Tooltip from '@atlaskit/tooltip';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 import { handleClickCommon } from '../../common/utils';
 import { className } from './styled';
-export var ExpandedFrame = function ExpandedFrame(_ref) {
+var ExpandedFrame = function ExpandedFrame(_ref) {
   var _ref$isPlaceholder = _ref.isPlaceholder,
     isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
     children = _ref.children,
@@ -104,4 +107,94 @@ var styles = {
   contentStyle: "_19itdlqj _2rko12b0 _1reo15vq _18m915vq _v56414au _bfhkhp5a _16jlkb7n _4t3i1osq _1pbykb7n",
   contentInteractiveActiveBorder: "_1jhm1tt7",
   contentOverflowAuto: "_1reo1wug _18m91wug"
-};
+};
+var ExpandedFrameUpdated = function ExpandedFrameUpdated(_ref2) {
+  var _ref2$isPlaceholder = _ref2.isPlaceholder,
+    isPlaceholder = _ref2$isPlaceholder === void 0 ? false : _ref2$isPlaceholder,
+    children = _ref2.children,
+    onClick = _ref2.onClick,
+    icon = _ref2.icon,
+    text = _ref2.text,
+    isSelected = _ref2.isSelected,
+    _ref2$frameStyle = _ref2.frameStyle,
+    frameStyle = _ref2$frameStyle === void 0 ? 'showOnHover' : _ref2$frameStyle,
+    href = _ref2.href,
+    minWidth = _ref2.minWidth,
+    maxWidth = _ref2.maxWidth,
+    _ref2$testId = _ref2.testId,
+    testId = _ref2$testId === void 0 ? 'expanded-frame' : _ref2$testId,
+    inheritDimensions = _ref2.inheritDimensions,
+    _ref2$allowScrollBar = _ref2.allowScrollBar,
+    allowScrollBar = _ref2$allowScrollBar === void 0 ? false : _ref2$allowScrollBar,
+    _ref2$setOverflow = _ref2.setOverflow,
+    setOverflow = _ref2$setOverflow === void 0 ? true : _ref2$setOverflow,
+    CompetitorPrompt = _ref2.CompetitorPrompt,
+    onContentMouseEnter = _ref2.onContentMouseEnter,
+    onContentMouseLeave = _ref2.onContentMouseLeave;
+  var isInteractive = function isInteractive() {
+    return !isPlaceholder && (Boolean(href) || Boolean(onClick));
+  };
+  var handleClick = function handleClick(event) {
+    return handleClickCommon(event, onClick);
+  };
+  var handleMouseDown = useMouseDownEvent();
+
+  // Note: cleanup fg based on results of prompt_whiteboard_competitor_link experiment
+  var CompetitorPromptComponent = CompetitorPrompt && href && fg('prompt_whiteboard_competitor_link_gate') ? /*#__PURE__*/React.createElement(CompetitorPrompt, {
+    sourceUrl: href,
+    linkType: "embed"
+  }) : null;
+  var renderHeader = function renderHeader() {
+    return frameStyle !== 'hide' && /*#__PURE__*/React.createElement("div", {
+      className: ax([styles.header, "embed-header"])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax([styles.leftSection])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax([styles.headerIcon])
+    }, icon), /*#__PURE__*/React.createElement("div", {
+      className: ax([styles.tooltipWrapper])
+    }, !isPlaceholder && /*#__PURE__*/React.createElement(Tooltip, {
+      content: text,
+      hideTooltipOnMouseDown: true
+    }, /*#__PURE__*/React.createElement("a", {
+      href: href,
+      onClick: handleClick,
+      onMouseDown: handleMouseDown,
+      className: ax([styles.headerAnchor])
+    }, text)))), CompetitorPromptComponent);
+  };
+  var interactive = isInteractive();
+  var showBackgroundAlways = frameStyle === 'show' || isSelected && frameStyle !== 'hide';
+  var showBackgroundOnHover = interactive && frameStyle !== 'hide';
+  var renderContent = function renderContent() {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "embed-content-wrapper",
+      // This fixes an issue with input fields in cross domain iframes (ie. databases and jira fields from different domains)
+      // See: HOT-107830
+      contentEditable: false,
+      onMouseEnter: onContentMouseEnter,
+      onMouseLeave: onContentMouseLeave,
+      onFocus: onContentMouseEnter,
+      onBlur: onContentMouseLeave,
+      className: ax([styles.contentStyle, setOverflow && allowScrollBar && styles.contentOverflowAuto, interactive && !showBackgroundAlways && !showBackgroundOnHover && styles.contentInteractiveActiveBorder])
+    }, children);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax([styles.linkWrapper, inheritDimensions && styles.linkWrapperInheritDimensions, isSelected && frameStyle !== 'hide' && styles.linkWrapperSelected, showBackgroundAlways && styles.linkWrapperBorderAndBackground, showBackgroundOnHover && !showBackgroundAlways && styles.linkWrapperInteractiveNotHidden, className]),
+    style: {
+      minWidth: minWidth ? "".concat(minWidth, "px") : '',
+      maxWidth: maxWidth ? "".concat(maxWidth, "px") : ''
+    },
+    "data-testid": testId,
+    "data-trello-do-not-use-override": testId
+    // Due to limitations of testing library, we can't assert ::after
+    ,
+    "data-is-selected": isSelected
+  }, (isPlaceholder || !href) && {
+    'data-wrapper-type': 'default',
+    'data-is-interactive': isInteractive()
+  }), renderHeader(), renderContent());
+};
+var ExpandedFrameWithFG = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', ExpandedFrameUpdated, ExpandedFrame);
+export { ExpandedFrameWithFG as ExpandedFrame };

package/dist/esm/view/EmbedCard/components/Frame.js

@@ -3,6 +3,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./Frame.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line no-unused-vars
+
 import { di } from 'react-magnetic-di';
 import { getIframeSandboxAttribute } from '../../../utils';
 import { IFrame } from './IFrame';
@@ -103,10 +106,127 @@ export var Frame = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
     "data-testid": "".concat(testId, "-frame"),
     "data-iframe-loaded": isIframeLoaded,
     onMouseEnter: function onMouseEnter() {
-      return setMouseOver(true);
+      setMouseOver(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setMouseOver(false);
+    },
+    allowFullScreen: true,
+    scrolling: "yes",
+    allow: "autoplay; encrypted-media; clipboard-write",
+    onLoad: function onLoad() {
+      setIframeLoaded(true);
+    },
+    sandbox: getIframeSandboxAttribute(isTrusted),
+    title: title,
+    extensionKey: extensionKey,
+    className: ax(["_19itidpf _1reo15vq _18m915vq _2rkofajl _154iidpf _1ltvidpf _1bsb1osq _4t3i1osq _kqswh2mm"])
+  }));
+});
+export var FrameUpdated = /*#__PURE__*/React.forwardRef(function (_ref2, iframeRef) {
+  var url = _ref2.url,
+    _ref2$isTrusted = _ref2.isTrusted,
+    isTrusted = _ref2$isTrusted === void 0 ? false : _ref2$isTrusted,
+    testId = _ref2.testId,
+    onIframeDwell = _ref2.onIframeDwell,
+    onIframeFocus = _ref2.onIframeFocus,
+    onIframeMouseEnter = _ref2.onIframeMouseEnter,
+    onIframeMouseLeave = _ref2.onIframeMouseLeave,
+    isMouseOverProp = _ref2.isMouseOver,
+    title = _ref2.title,
+    extensionKey = _ref2.extensionKey;
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    isIframeLoaded = _useState10[0],
+    setIframeLoaded = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isMouseOver = _useState12[0],
+    setMouseOver = _useState12[1];
+  var _useState13 = useState(document.hasFocus()),
+    _useState14 = _slicedToArray(_useState13, 2),
+    isWindowFocused = _useState14[0],
+    setWindowFocused = _useState14[1];
+
+  // Use prop if provided (from wrapper), otherwise use local state (for backward compatibility)
+  var effectiveMouseOver = isMouseOverProp !== undefined ? isMouseOverProp : isMouseOver;
+  var ref = useRef();
+  var mergedRef = mergeRefs([iframeRef, ref]);
+  var _useState15 = useState(0),
+    _useState16 = _slicedToArray(_useState15, 2),
+    percentVisible = _useState16[0],
+    setPercentVisible = _useState16[1];
+
+  /**
+   * These are the 'percent visible' thresholds at which the intersectionObserver will
+   * trigger a state change. Eg. when the user scrolls and moves from 74% to 76%, or
+   * vice versa. It's in a state object so that its static for the useEffect
+   */
+  var _useState17 = useState([0.75, 0.8, 0.85, 0.9, 0.95, 1]),
+    _useState18 = _slicedToArray(_useState17, 1),
+    threshold = _useState18[0];
+  useEffect(function () {
+    if (!ref || !ref.current) {
+      return;
+    }
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        setPercentVisible(entry === null || entry === void 0 ? void 0 : entry.intersectionRatio);
+      });
+    }, {
+      threshold: threshold
+    });
+    observer.observe(ref.current);
+    return function () {
+      observer.disconnect();
+    };
+  }, [threshold, mergedRef]);
+  useEffect(function () {
+    // Initialize with current focus state
+    setWindowFocused(document.hasFocus());
+    var onBlur = function onBlur() {
+      setWindowFocused(false);
+      if (document.activeElement === ref.current) {
+        onIframeFocus && onIframeFocus();
+      }
+    };
+    var onFocus = function onFocus() {
+      setWindowFocused(true);
+    };
+    window.addEventListener('blur', onBlur);
+    window.addEventListener('focus', onFocus);
+    return function () {
+      window.removeEventListener('blur', onBlur);
+      window.removeEventListener('focus', onFocus);
+    };
+  }, [ref, onIframeFocus]);
+  if (!url) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IframeDwellTracker, {
+    isIframeLoaded: isIframeLoaded,
+    isMouseOver: effectiveMouseOver,
+    isWindowFocused: isWindowFocused,
+    iframePercentVisible: percentVisible,
+    onIframeDwell: onIframeDwell
+  }), /*#__PURE__*/React.createElement(IFrame, {
+    childRef: mergedRef,
+    src: url,
+    "data-testid": "".concat(testId, "-frame"),
+    "data-iframe-loaded": isIframeLoaded,
+    onMouseEnter: function onMouseEnter() {
+      onIframeMouseEnter === null || onIframeMouseEnter === void 0 || onIframeMouseEnter();
+      // Use local state if prop not provided, otherwise prop takes precedence
+      if (isMouseOverProp === undefined) {
+        setMouseOver(true);
+      }
     },
     onMouseLeave: function onMouseLeave() {
-      return setMouseOver(false);
+      onIframeMouseLeave === null || onIframeMouseLeave === void 0 || onIframeMouseLeave();
+      // Use local state if prop not provided, otherwise prop takes precedence
+      if (isMouseOverProp === undefined) {
+        setMouseOver(false);
+      }
     },
     allowFullScreen: true,
     scrolling: "yes",

package/dist/esm/view/EmbedCard/components/IframeDwellTracker.js

@@ -4,6 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsx jsx
  */
 import { useEffect, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 /**
  * A kind of cheap logarithmic backoff. Fire analytics after the user has
  * dwelled for 5 seconds, then 10 seconds, and so on.
@@ -44,11 +45,31 @@ export var IframeDwellTracker = function IframeDwellTracker(_ref) {
         };
       });
     };
-    if (isIframeLoaded && isMouseOver && isWindowFocused && iframePercentVisible > 0.75) {
-      if (dwellTimeoutId.current) {
-        clearInterval(dwellTimeoutId.current);
+
+    // Require: iframe loaded, mouse over, and >75% visible
+    var isDwellAndHoverMetricsEnabled = fg('rovo_chat_embed_card_dwell_and_hover_metrics');
+    if (isDwellAndHoverMetricsEnabled) {
+      // Note: Removed isWindowFocused requirement as it's unreliable and prevents tracking
+      // The mouse over check is sufficient to indicate user engagement
+      var shouldTrack = isIframeLoaded && isMouseOver && iframePercentVisible > 0.75;
+      if (shouldTrack) {
+        if (dwellTimeoutId.current) {
+          clearInterval(dwellTimeoutId.current);
+        }
+        dwellTimeoutId.current = setInterval(incrementDwellTime, 1000);
+      } else {
+        if (dwellTimeoutId.current) {
+          clearInterval(dwellTimeoutId.current);
+          dwellTimeoutId.current = undefined;
+        }
+      }
+    } else {
+      if (isIframeLoaded && isMouseOver && isWindowFocused && iframePercentVisible > 0.75) {
+        if (dwellTimeoutId.current) {
+          clearInterval(dwellTimeoutId.current);
+        }
+        dwellTimeoutId.current = setInterval(incrementDwellTime, 1000);
       }
-      dwellTimeoutId.current = setInterval(incrementDwellTime, 1000);
     }
     return function () {
       if (dwellTimeoutId.current) {

package/dist/esm/view/EmbedCard/index.js

@@ -226,4 +226,207 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref2, iframeRef)
         isSelected: isSelected
       });
   }
+});
+export var EmbedCardUpdated = /*#__PURE__*/React.forwardRef(function (_ref3, iframeRef) {
+  var _details$meta4, _forbiddenViewProps$c3, _forbiddenViewProps$c4, _notFoundViewProps$co3, _notFoundViewProps$co4;
+  var url = _ref3.url,
+    cardState = _ref3.cardState,
+    handleAuthorize = _ref3.handleAuthorize,
+    handleErrorRetry = _ref3.handleErrorRetry,
+    handleFrameClick = _ref3.handleFrameClick,
+    isSelected = _ref3.isSelected,
+    frameStyle = _ref3.frameStyle,
+    platform = _ref3.platform,
+    onResolve = _ref3.onResolve,
+    onError = _ref3.onError,
+    testId = _ref3.testId,
+    inheritDimensions = _ref3.inheritDimensions,
+    onIframeDwell = _ref3.onIframeDwell,
+    onIframeFocus = _ref3.onIframeFocus,
+    onIframeMouseEnter = _ref3.onIframeMouseEnter,
+    onIframeMouseLeave = _ref3.onIframeMouseLeave,
+    iframeUrlType = _ref3.iframeUrlType,
+    actionOptions = _ref3.actionOptions,
+    renderers = _ref3.renderers,
+    CompetitorPrompt = _ref3.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref3.hideIconLoadingSkeleton;
+  var _useAnalyticsEvents2 = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents2.createAnalyticsEvent;
+  var status = cardState.status,
+    details = cardState.details;
+  var extensionKey = getExtensionKey(details);
+  var isProductIntegrationSupported = hasAuthScopeOverrides(details);
+  var _useControlDataExport3 = useControlDataExportConfig(),
+    _useControlDataExport4 = _useControlDataExport3.shouldControlDataExport,
+    shouldControlDataExport = _useControlDataExport4 === void 0 ? false : _useControlDataExport4;
+  switch (status) {
+    case 'pending':
+    case 'resolving':
+      return /*#__PURE__*/React.createElement(UFOLoadHoldWrapper, null, /*#__PURE__*/React.createElement(BlockCardResolvedView, {
+        url: url,
+        cardState: cardState,
+        onClick: handleFrameClick,
+        onError: onError,
+        onResolve: onResolve,
+        renderers: renderers,
+        actionOptions: actionOptions,
+        testId: testId ? "".concat(testId, "-resolving-view") : 'embed-card-resolving-view'
+      }));
+    case 'resolved':
+      var resolvedViewProps = extractEmbedProps(details, platform, iframeUrlType);
+      if (onResolve) {
+        var _resolvedViewProps$pr2, _details$meta3;
+        onResolve(_objectSpread({
+          title: resolvedViewProps.title,
+          url: url,
+          aspectRatio: (_resolvedViewProps$pr2 = resolvedViewProps.preview) === null || _resolvedViewProps$pr2 === void 0 ? void 0 : _resolvedViewProps$pr2.aspectRatio
+        }, fg('expose-product-details-from-smart-card') && {
+          extensionKey: details === null || details === void 0 || (_details$meta3 = details.meta) === null || _details$meta3 === void 0 ? void 0 : _details$meta3.key
+        }));
+      }
+      if (getIsDataExportEnabled(shouldControlDataExport, cardState.details)) {
+        var unauthViewProps = extractEmbedProps(details, platform);
+        return /*#__PURE__*/React.createElement(UnauthorizedView, {
+          context: unauthViewProps.context,
+          extensionKey: extensionKey,
+          frameStyle: frameStyle,
+          isProductIntegrationSupported: isProductIntegrationSupported,
+          inheritDimensions: inheritDimensions,
+          isSelected: isSelected,
+          onAuthorize: handleAuthorize,
+          onClick: handleFrameClick,
+          testId: testId,
+          url: unauthViewProps.link
+        });
+      }
+      if (resolvedViewProps.preview) {
+        return /*#__PURE__*/React.createElement(EmbedCardResolvedView, _extends({}, resolvedViewProps, {
+          isSelected: isSelected,
+          frameStyle: frameStyle,
+          inheritDimensions: inheritDimensions,
+          onClick: handleFrameClick,
+          ref: iframeRef,
+          onIframeDwell: onIframeDwell,
+          onIframeFocus: onIframeFocus,
+          onIframeMouseEnter: onIframeMouseEnter,
+          onIframeMouseLeave: onIframeMouseLeave,
+          testId: testId,
+          CompetitorPrompt: CompetitorPrompt,
+          hideIconLoadingSkeleton: hideIconLoadingSkeleton,
+          extensionKey: extensionKey
+        }));
+      } else {
+        if (platform === 'mobile') {
+          var resolvedInlineViewProps = extractInlineProps(details);
+          return /*#__PURE__*/React.createElement(InlineCardResolvedView, _extends({}, resolvedInlineViewProps, {
+            isSelected: isSelected,
+            testId: testId,
+            onClick: handleFrameClick
+          }));
+        }
+        return /*#__PURE__*/React.createElement(BlockCardResolvedView, {
+          url: url,
+          cardState: cardState,
+          onClick: handleFrameClick,
+          onError: onError,
+          onResolve: onResolve,
+          renderers: renderers,
+          actionOptions: actionOptions,
+          testId: testId
+        });
+      }
+    case 'unauthorized':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+      var unauthorisedViewProps = extractEmbedProps(details, platform);
+      return /*#__PURE__*/React.createElement(UnauthorizedView, {
+        context: unauthorisedViewProps.context,
+        extensionKey: extensionKey,
+        frameStyle: frameStyle,
+        isProductIntegrationSupported: isProductIntegrationSupported,
+        inheritDimensions: inheritDimensions,
+        isSelected: isSelected,
+        onAuthorize: handleAuthorize,
+        onClick: handleFrameClick,
+        testId: testId,
+        url: unauthorisedViewProps.link
+      });
+    case 'forbidden':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+      var forbiddenViewProps = extractEmbedProps(details, platform);
+      var cardMetadata = (_details$meta4 = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta4 !== void 0 ? _details$meta4 : getForbiddenJsonLd().meta;
+      if (forbiddenViewProps.preview) {
+        return /*#__PURE__*/React.createElement(EmbedCardResolvedView, _extends({}, forbiddenViewProps, {
+          title: forbiddenViewProps.link,
+          frameStyle: frameStyle,
+          isSelected: isSelected,
+          inheritDimensions: inheritDimensions,
+          onClick: handleFrameClick,
+          ref: iframeRef,
+          extensionKey: extensionKey
+        }));
+      }
+      var forbiddenAccessContext = extractRequestAccessContextImproved({
+        jsonLd: cardMetadata,
+        url: url,
+        product: (_forbiddenViewProps$c3 = (_forbiddenViewProps$c4 = forbiddenViewProps.context) === null || _forbiddenViewProps$c4 === void 0 ? void 0 : _forbiddenViewProps$c4.text) !== null && _forbiddenViewProps$c3 !== void 0 ? _forbiddenViewProps$c3 : '',
+        createAnalyticsEvent: createAnalyticsEvent
+      });
+      return /*#__PURE__*/React.createElement(ForbiddenView, {
+        context: forbiddenViewProps.context,
+        frameStyle: frameStyle,
+        inheritDimensions: inheritDimensions,
+        isSelected: isSelected,
+        onAuthorize: handleAuthorize,
+        onClick: handleFrameClick,
+        accessContext: forbiddenAccessContext,
+        url: forbiddenViewProps.link
+      });
+    case 'not_found':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+      var notFoundViewProps = extractEmbedProps(details, platform);
+      var notFoundAccessContext = details !== null && details !== void 0 && details.meta ? extractRequestAccessContextImproved({
+        jsonLd: details === null || details === void 0 ? void 0 : details.meta,
+        url: url,
+        product: (_notFoundViewProps$co3 = (_notFoundViewProps$co4 = notFoundViewProps.context) === null || _notFoundViewProps$co4 === void 0 ? void 0 : _notFoundViewProps$co4.text) !== null && _notFoundViewProps$co3 !== void 0 ? _notFoundViewProps$co3 : '',
+        createAnalyticsEvent: createAnalyticsEvent
+      }) : undefined;
+      return /*#__PURE__*/React.createElement(NotFoundView, {
+        context: notFoundViewProps.context,
+        frameStyle: frameStyle,
+        inheritDimensions: inheritDimensions,
+        isSelected: isSelected,
+        onClick: handleFrameClick,
+        accessContext: notFoundAccessContext,
+        url: notFoundViewProps.link
+      });
+    case 'fallback':
+    case 'errored':
+    default:
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+      return /*#__PURE__*/React.createElement(EmbedCardErroredView, {
+        onRetry: handleErrorRetry,
+        inheritDimensions: inheritDimensions,
+        isSelected: isSelected
+      });
+  }
 });

package/dist/esm/view/EmbedCard/views/ResolvedView.js

@@ -1,12 +1,15 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 import LinkGlyph from '@atlaskit/icon/core/migration/link';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { getPreviewUrlWithTheme, isProfileType } from '../../../utils';
 import { ExpandedFrame } from '../components/ExpandedFrame';
-import { Frame } from '../components/Frame';
+import { Frame, FrameUpdated } from '../components/Frame';
 import { ImageIcon } from '../components/ImageIcon';
 import { useEmbedResolvePostMessageListener } from '../useEmbedResolvePostMessageListener';
-export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref, embedIframeRef) {
+var FrameComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', FrameUpdated, Frame);
+var EmbedCardResolvedViewOld = /*#__PURE__*/React.forwardRef(function (_ref, embedIframeRef) {
   var link = _ref.link,
     context = _ref.context,
     onClick = _ref.onClick,
@@ -77,4 +80,95 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     title: text,
     extensionKey: extensionKey
   }));
-});
+});
+var EmbedCardResolvedViewUpdated = /*#__PURE__*/React.forwardRef(function (_ref2, embedIframeRef) {
+  var link = _ref2.link,
+    context = _ref2.context,
+    onClick = _ref2.onClick,
+    isSelected = _ref2.isSelected,
+    frameStyle = _ref2.frameStyle,
+    preview = _ref2.preview,
+    title = _ref2.title,
+    isTrusted = _ref2.isTrusted,
+    _ref2$testId = _ref2.testId,
+    testId = _ref2$testId === void 0 ? 'embed-card-resolved-view' : _ref2$testId,
+    inheritDimensions = _ref2.inheritDimensions,
+    onIframeDwell = _ref2.onIframeDwell,
+    onIframeFocus = _ref2.onIframeFocus,
+    onIframeMouseEnter = _ref2.onIframeMouseEnter,
+    onIframeMouseLeave = _ref2.onIframeMouseLeave,
+    isSupportTheming = _ref2.isSupportTheming,
+    type = _ref2.type,
+    CompetitorPrompt = _ref2.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref2.hideIconLoadingSkeleton,
+    extensionKey = _ref2.extensionKey;
+  var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
+  var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
+  var text = title || (context === null || context === void 0 ? void 0 : context.text);
+  var linkGlyph = React.useMemo(function () {
+    return /*#__PURE__*/React.createElement(LinkGlyph, {
+      label: "icon",
+      LEGACY_size: "small",
+      testId: "embed-card-fallback-icon",
+      color: "currentColor"
+    });
+  }, []);
+  var icon = React.useMemo(function () {
+    if ( /*#__PURE__*/React.isValidElement(iconFromContext)) {
+      return iconFromContext;
+    }
+    return /*#__PURE__*/React.createElement(ImageIcon, {
+      src: src,
+      default: linkGlyph,
+      appearance: isProfileType(type) ? 'round' : 'square',
+      hideLoadingSkeleton: hideIconLoadingSkeleton
+    });
+  }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton]);
+  useEmbedResolvePostMessageListener({
+    url: link,
+    embedIframeRef: embedIframeRef
+  });
+  var themeState = useThemeObserver();
+  var previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
+  if (previewUrl && isSupportTheming) {
+    previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
+  }
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isMouseOver = _React$useState2[0],
+    setMouseOver = _React$useState2[1];
+  return /*#__PURE__*/React.createElement(ExpandedFrame, {
+    isSelected: isSelected,
+    frameStyle: frameStyle,
+    href: link,
+    testId: testId,
+    icon: icon,
+    text: text,
+    onClick: onClick,
+    inheritDimensions: inheritDimensions,
+    setOverflow: false,
+    CompetitorPrompt: CompetitorPrompt,
+    onContentMouseEnter: function onContentMouseEnter() {
+      setMouseOver(true);
+      onIframeMouseEnter === null || onIframeMouseEnter === void 0 || onIframeMouseEnter();
+    },
+    onContentMouseLeave: function onContentMouseLeave() {
+      setMouseOver(false);
+      onIframeMouseLeave === null || onIframeMouseLeave === void 0 || onIframeMouseLeave();
+    }
+  }, /*#__PURE__*/React.createElement(FrameComponent, {
+    url: previewUrl,
+    isTrusted: isTrusted,
+    testId: testId,
+    ref: embedIframeRef,
+    onIframeDwell: onIframeDwell,
+    onIframeFocus: onIframeFocus,
+    onIframeMouseEnter: onIframeMouseEnter,
+    onIframeMouseLeave: onIframeMouseLeave,
+    isMouseOver: isMouseOver,
+    title: text,
+    extensionKey: extensionKey
+  }));
+});
+var EmbedCardResolvedViewWithFG = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardResolvedViewUpdated, EmbedCardResolvedViewOld);
+export { EmbedCardResolvedViewWithFG as EmbedCardResolvedView };

package/dist/types/common/analytics/generated/analytics.types.d.ts

@@ -108,6 +108,7 @@ export type SmartLinkIframeFocusedAttributesType = {
     id: string;
     display: 'inline' | 'block' | 'embed' | 'embedPreview' | 'flexible' | 'hoverCardPreview' | 'url';
     definitionId: string | null;
+    interactionType?: 'mouseenter' | 'mouseleave' | 'focus';
 };
 export type ApplicationAccountConnectedAttributesType = {
     definitionId: string | null;

package/dist/types/view/EmbedCard/components/ExpandedFrame.d.ts

@@ -41,4 +41,11 @@ export interface ExpandedFrameProps {
     testId?: string;
     text?: React.ReactNode;
 }
-export declare const ExpandedFrame: ({ isPlaceholder, children, onClick, icon, text, isSelected, frameStyle, href, minWidth, maxWidth, testId, inheritDimensions, allowScrollBar, setOverflow, CompetitorPrompt, }: ExpandedFrameProps) => JSX.Element;
+export interface ExpandedFrameUpdatedProps extends ExpandedFrameProps {
+    /** Callback for when mouse enters the content wrapper - for dwell tracking */
+    onContentMouseEnter?: () => void;
+    /** Callback for when mouse leaves the content wrapper - for dwell tracking */
+    onContentMouseLeave?: () => void;
+}
+declare const ExpandedFrameWithFG: import("react").FC<ExpandedFrameUpdatedProps & ExpandedFrameProps>;
+export { ExpandedFrameWithFG as ExpandedFrame };

package/dist/types/view/EmbedCard/components/Frame.d.ts

@@ -12,4 +12,10 @@ export interface FrameProps {
     title?: string;
     url?: string;
 }
+export interface FrameUpdatedProps extends FrameProps {
+    isMouseOver?: boolean;
+    onIframeMouseEnter?: () => void;
+    onIframeMouseLeave?: () => void;
+}
 export declare const Frame: React.ForwardRefExoticComponent<FrameProps & React.RefAttributes<HTMLIFrameElement>>;
+export declare const FrameUpdated: React.ForwardRefExoticComponent<FrameUpdatedProps & React.RefAttributes<HTMLIFrameElement>>;

package/dist/types/view/EmbedCard/index.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
 import { type EmbedCardProps } from './types';
 export declare const EmbedCard: React.ForwardRefExoticComponent<EmbedCardProps & React.RefAttributes<HTMLIFrameElement>>;
+export declare const EmbedCardUpdated: React.ForwardRefExoticComponent<EmbedCardProps & {
+    onIframeMouseEnter?: () => void;
+    onIframeMouseLeave?: () => void;
+} & React.RefAttributes<HTMLIFrameElement>>;

package/dist/types/view/EmbedCard/types.d.ts

@@ -30,6 +30,10 @@ export type EmbedCardProps = {
     testId?: string;
     url: string;
 };
+export type EmbedCardUpdatedProps = EmbedCardProps & {
+    onIframeMouseEnter?: () => void;
+    onIframeMouseLeave?: () => void;
+};
 export interface WithShowControlMethodProp {
     showControls?: () => void;
 }