@atlaskit/smart-card 43.11.2 → 43.12.0

package/dist/esm/view/CardWithUrl/component.js

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { extractSmartLinkEmbed } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
@@ -17,11 +18,12 @@ import { SmartLinkAnalyticsContext } from '../../utils/analytics/SmartLinkAnalyt
 import { isFlexibleUiCard } from '../../utils/flexible';
 import * as measure from '../../utils/performance';
 import { BlockCard } from '../BlockCard';
-import { EmbedCard } from '../EmbedCard';
+import { EmbedCard, EmbedCardUpdated } from '../EmbedCard';
 import FlexibleCard from '../FlexibleCard';
 import { InlineCard } from '../InlineCard';
 import { useFire3PWorkflowsClickEvent } from '../SmartLinkEvents/useSmartLinkEvents';
 var thirdPartyARIPrefix = 'ari:third-party';
+var EmbedCardComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardUpdated, EmbedCard);
 function Component(_ref) {
   var id = _ref.id,
     url = _ref.url,
@@ -324,11 +326,333 @@ function Component(_ref) {
       });
   }
 }
+function ComponentUpdated(_ref2) {
+  var id = _ref2.id,
+    url = _ref2.url,
+    isSelected = _ref2.isSelected,
+    isHovered = _ref2.isHovered,
+    frameStyle = _ref2.frameStyle,
+    platform = _ref2.platform,
+    onClick = _ref2.onClick,
+    appearance = _ref2.appearance,
+    onResolve = _ref2.onResolve,
+    onError = _ref2.onError,
+    testId = _ref2.testId,
+    actionOptionsProp = _ref2.actionOptions,
+    inheritDimensions = _ref2.inheritDimensions,
+    embedIframeRef = _ref2.embedIframeRef,
+    embedIframeUrlType = _ref2.embedIframeUrlType,
+    inlinePreloaderStyle = _ref2.inlinePreloaderStyle,
+    ui = _ref2.ui,
+    children = _ref2.children,
+    showHoverPreview = _ref2.showHoverPreview,
+    hoverPreviewOptions = _ref2.hoverPreviewOptions,
+    removeTextHighlightingFromTitle = _ref2.removeTextHighlightingFromTitle,
+    resolvingPlaceholder = _ref2.resolvingPlaceholder,
+    truncateInline = _ref2.truncateInline,
+    CompetitorPrompt = _ref2.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref2.hideIconLoadingSkeleton,
+    disablePreviewPanel = _ref2.disablePreviewPanel,
+    placeholderData = _ref2.placeholderData;
+  var _useAnalyticsEventsNe2 = useAnalyticsEventsNext(),
+    createAnalyticsEvent = _useAnalyticsEventsNe2.createAnalyticsEvent;
+  var _useAnalyticsEvents2 = useAnalyticsEvents(),
+    fireEvent = _useAnalyticsEvents2.fireEvent;
+  var isFlexibleUi = useMemo(function () {
+    return isFlexibleUiCard(children, ui);
+  }, [children, ui]);
+
+  // Get state, actions for this card.
+  var _useSmartLink2 = useSmartLink(id, url),
+    state = _useSmartLink2.state,
+    actions = _useSmartLink2.actions,
+    config = _useSmartLink2.config,
+    renderers = _useSmartLink2.renderers,
+    error = _useSmartLink2.error,
+    isPreviewPanelAvailable = _useSmartLink2.isPreviewPanelAvailable,
+    openPreviewPanel = _useSmartLink2.openPreviewPanel;
+  var ari = getObjectAri(state.details);
+  var name = getObjectName(state.details);
+  var definitionId = getDefinitionId(state.details);
+  var extensionKey = getExtensionKey(state.details);
+  var resourceType = getResourceType(state.details);
+  var services = getServices(state.details);
+  var thirdPartyARI = getThirdPartyARI(state.details);
+  var firstPartyIdentifier = getFirstPartyIdentifier();
+  var actionOptions = combineActionOptions({
+    actionOptions: actionOptionsProp,
+    platform: platform
+  });
+  var fire3PClickEvent = fg('platform_smartlink_3pclick_analytics') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFire3PWorkflowsClickEvent(firstPartyIdentifier, thirdPartyARI) : undefined;
+
+  // Setup UI handlers.
+  var handleClickWrapper = useCallback(function (event) {
+    var isModifierKeyPressed = isSpecialKey(event) || isSpecialClick(event);
+    fireEvent('ui.smartLink.clicked', {
+      id: id,
+      display: isFlexibleUi ? CardDisplay.Flexible : appearance,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      isModifierKeyPressed: isModifierKeyPressed
+    });
+    if (fg('platform_smartlink_3pclick_analytics')) {
+      if (thirdPartyARI && thirdPartyARI.startsWith(thirdPartyARIPrefix)) {
+        var clickURL = getClickUrl(url, state.details);
+        if (clickURL === url && fire3PClickEvent) {
+          // For questions or concerns about this event,
+          // please reach out to the 3P Workflows Team via Slack in #help-3p-connector-workflow
+          fire3PClickEvent();
+        }
+      }
+    }
+    var isDisablePreviewPanel = disablePreviewPanel && editorExperiment('platform_editor_preview_panel_linking_exp', true, {
+      exposure: true
+    });
+
+    // If preview panel is available and the user clicked on the link,
+    // delegate the click to the preview panel handler
+    if (!isModifierKeyPressed && ari && name && openPreviewPanel && isPreviewPanelAvailable !== null && isPreviewPanelAvailable !== void 0 && isPreviewPanelAvailable({
+      ari: ari
+    }) && !isDisablePreviewPanel) {
+      var _extractSmartLinkEmbe2;
+      event.preventDefault();
+      event.stopPropagation();
+      openPreviewPanel({
+        url: url,
+        ari: ari,
+        name: name,
+        iconUrl: getObjectIconUrl(state.details),
+        panelData: {
+          embedUrl: expValEquals('platform_hover_card_preview_panel', 'cohort', 'test') ? (_extractSmartLinkEmbe2 = extractSmartLinkEmbed(state.details)) === null || _extractSmartLinkEmbe2 === void 0 ? void 0 : _extractSmartLinkEmbe2.src : undefined
+        }
+      });
+      fireLinkClickedEvent(createAnalyticsEvent)(event, {
+        attributes: {
+          clickOutcome: 'previewPanel'
+        }
+      });
+      return;
+    } else if (!onClick && !isFlexibleUi) {
+      var clickUrl = getClickUrl(url, state.details);
+
+      // Ctrl+left click on mac typically doesn't trigger onClick
+      // The event could have potentially had `e.preventDefault()` called on it by now
+      // event by smart card internally
+      // If it has been called then only then can `isSpecialEvent` be true.
+      var target = isSpecialEvent(event) ? '_blank' : '_self';
+      window.open(clickUrl, target);
+      fireLinkClickedEvent(createAnalyticsEvent)(event, {
+        attributes: {
+          clickOutcome: target === '_blank' ? 'clickThroughNewTabOrWindow' : 'clickThrough'
+        }
+      });
+    } else {
+      if (onClick) {
+        onClick(event);
+      }
+      fireLinkClickedEvent(createAnalyticsEvent)(event);
+    }
+  }, [fireEvent, id, isFlexibleUi, appearance, definitionId, onClick, url, state.details, ari, name, fire3PClickEvent, isPreviewPanelAvailable, openPreviewPanel, createAnalyticsEvent, thirdPartyARI, disablePreviewPanel]);
+  var handleAuthorize = useCallback(function () {
+    return actions.authorize(appearance);
+  }, [actions, appearance]);
+  var handleRetry = useCallback(function () {
+    actions.reload();
+  }, [actions]);
+  var handleInvoke = useCallback(function (opts) {
+    return actions.invoke(opts, appearance);
+  }, [actions, appearance]);
+
+  // NB: for each status change in a Smart Link, a performance mark is created.
+  // Measures are sent relative to the first mark, matching what a user sees.
+  useEffect(function () {
+    measure.mark(id, state.status);
+    if (state.status !== 'pending' && state.status !== 'resolving') {
+      var _state$error3, _state$error4;
+      measure.create(id, state.status);
+      if (state.status === 'resolved') {
+        var _measure$getMeasure$d2, _measure$getMeasure2;
+        fireEvent('operational.smartLink.resolved', {
+          definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+          duration: (_measure$getMeasure$d2 = (_measure$getMeasure2 = measure.getMeasure(id, state.status)) === null || _measure$getMeasure2 === void 0 ? void 0 : _measure$getMeasure2.duration) !== null && _measure$getMeasure$d2 !== void 0 ? _measure$getMeasure$d2 : null
+        });
+      } else if (((_state$error3 = state.error) === null || _state$error3 === void 0 ? void 0 : _state$error3.type) !== 'ResolveUnsupportedError' && ((_state$error4 = state.error) === null || _state$error4 === void 0 ? void 0 : _state$error4.type) !== 'UnsupportedError') {
+        fireEvent('operational.smartLink.unresolved', {
+          definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+          reason: state.status,
+          error: state.error === undefined ? null : {
+            name: state.error.name,
+            kind: state.error.kind,
+            type: state.error.type
+          }
+        });
+      }
+    }
+  }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, fireEvent]);
+
+  // NB: once the smart-card has rendered into an end state, we capture
+  // this as a successful render. These can be one of:
+  // - the resolved state: when metadata is shown;
+  // - the unresolved states: viz. forbidden, not_found, unauthorized, errored.
+  useEffect(function () {
+    if (isFinalState(state.status)) {
+      succeedUfoExperience('smart-link-rendered', id || 'NULL', {
+        extensionKey: extensionKey,
+        display: isFlexibleUi ? 'flexible' : appearance
+      });
+
+      // UFO will disregard this if authentication experience has not yet been started
+      succeedUfoExperience('smart-link-authenticated', id || 'NULL', {
+        display: isFlexibleUi ? 'flexible' : appearance
+      });
+      fireEvent('ui.smartLink.renderSuccess', {
+        display: isFlexibleUi ? 'flexible' : appearance
+      });
+    }
+  }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, state.status]);
+  var onIframeDwell = useCallback(function (dwellTime, dwellPercentVisible) {
+    fireEvent('ui.smartLinkIframe.dwelled', {
+      id: id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      dwellPercentVisible: dwellPercentVisible,
+      dwellTime: dwellTime
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
+  var onIframeFocus = useCallback(function () {
+    fireEvent('ui.smartLinkIframe.focused', {
+      id: id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      interactionType: 'focus'
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
+  var onIframeMouseEnter = useCallback(function () {
+    fireEvent('ui.smartLinkIframe.focused', {
+      id: id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      interactionType: 'mouseenter'
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
+  var onIframeMouseLeave = useCallback(function () {
+    fireEvent('ui.smartLinkIframe.focused', {
+      id: id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      interactionType: 'mouseleave'
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
+  if (isFlexibleUi) {
+    var cardState = state;
+    if (error) {
+      if ((error === null || error === void 0 ? void 0 : error.name) === 'APIError') {
+        cardState = {
+          status: 'errored'
+        };
+      } else {
+        throw error;
+      }
+    }
+    return /*#__PURE__*/React.createElement(FlexibleCard, {
+      id: id,
+      cardState: cardState,
+      placeholderData: fg('platform_initial_data_for_smart_cards') ? placeholderData : undefined,
+      onAuthorize: services.length && handleAuthorize || undefined,
+      onClick: handleClickWrapper,
+      origin: "smartLinkCard",
+      renderers: renderers,
+      ui: ui,
+      showHoverPreview: showHoverPreview,
+      hoverPreviewOptions: hoverPreviewOptions,
+      actionOptions: actionOptions,
+      url: url,
+      testId: testId,
+      onResolve: onResolve,
+      onError: onError
+    }, children);
+  }
+
+  // We have to keep this last to prevent hook order from being violated
+  if (error) {
+    throw error;
+  }
+  switch (appearance) {
+    case 'inline':
+      return /*#__PURE__*/React.createElement(InlineCard, {
+        id: id,
+        url: url,
+        renderers: renderers,
+        cardState: state,
+        handleAuthorize: services.length && handleAuthorize || undefined,
+        handleFrameClick: handleClickWrapper,
+        isSelected: isSelected,
+        isHovered: isHovered,
+        onResolve: onResolve,
+        onError: onError,
+        testId: testId,
+        inlinePreloaderStyle: inlinePreloaderStyle,
+        showHoverPreview: showHoverPreview,
+        hoverPreviewOptions: hoverPreviewOptions,
+        actionOptions: actionOptions,
+        removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
+        resolvingPlaceholder: resolvingPlaceholder,
+        truncateInline: truncateInline,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
+      });
+    case 'block':
+      return /*#__PURE__*/React.createElement(BlockCard, {
+        id: id,
+        url: url,
+        renderers: renderers,
+        authFlow: config && config.authFlow,
+        cardState: state,
+        handleAuthorize: services.length && handleAuthorize || undefined,
+        handleFrameClick: handleClickWrapper,
+        isSelected: isSelected,
+        onResolve: onResolve,
+        onError: onError,
+        testId: testId,
+        actionOptions: actionOptions,
+        CompetitorPrompt: CompetitorPrompt,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
+      });
+    case 'embed':
+      return /*#__PURE__*/React.createElement(EmbedCardComponent, {
+        id: id,
+        url: url,
+        renderers: renderers,
+        cardState: state,
+        iframeUrlType: embedIframeUrlType,
+        handleAuthorize: services.length && handleAuthorize || undefined,
+        handleErrorRetry: handleRetry,
+        handleFrameClick: handleClickWrapper,
+        handleInvoke: handleInvoke,
+        isSelected: isSelected,
+        frameStyle: frameStyle,
+        platform: platform,
+        onResolve: onResolve,
+        onError: onError,
+        testId: testId,
+        inheritDimensions: inheritDimensions,
+        actionOptions: actionOptions,
+        ref: embedIframeRef,
+        onIframeDwell: onIframeDwell,
+        onIframeFocus: onIframeFocus,
+        onIframeMouseEnter: onIframeMouseEnter,
+        onIframeMouseLeave: onIframeMouseLeave,
+        CompetitorPrompt: CompetitorPrompt,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
+      });
+  }
+}
+var CardWithUrlContentComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', ComponentUpdated, Component);
 export var CardWithUrlContent = function CardWithUrlContent(props) {
   var display = isFlexibleUiCard(props.children, props === null || props === void 0 ? void 0 : props.ui) ? CardDisplay.Flexible : props.appearance;
   return /*#__PURE__*/React.createElement(SmartLinkModalProvider, null, /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
     url: props.url,
     id: props.id,
     display: display
-  }, /*#__PURE__*/React.createElement(Component, props)));
+  }, /*#__PURE__*/React.createElement(CardWithUrlContentComponent, props)));
 };

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) {