@atlaskit/smart-card 43.11.3 → 43.12.0

package/dist/es2019/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';
 const thirdPartyARIPrefix = 'ari:third-party';
+const EmbedCardComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardUpdated, EmbedCard);
 function Component({
   id,
   url,
@@ -322,11 +324,331 @@ function Component({
       });
   }
 }
+function ComponentUpdated({
+  id,
+  url,
+  isSelected,
+  isHovered,
+  frameStyle,
+  platform,
+  onClick,
+  appearance,
+  onResolve,
+  onError,
+  testId,
+  actionOptions: actionOptionsProp,
+  inheritDimensions,
+  embedIframeRef,
+  embedIframeUrlType,
+  inlinePreloaderStyle,
+  ui,
+  children,
+  showHoverPreview,
+  hoverPreviewOptions,
+  removeTextHighlightingFromTitle,
+  resolvingPlaceholder,
+  truncateInline,
+  CompetitorPrompt,
+  hideIconLoadingSkeleton,
+  disablePreviewPanel,
+  placeholderData
+}) {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEventsNext();
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
+  let isFlexibleUi = useMemo(() => isFlexibleUiCard(children, ui), [children, ui]);
+
+  // Get state, actions for this card.
+  const {
+    state,
+    actions,
+    config,
+    renderers,
+    error,
+    isPreviewPanelAvailable,
+    openPreviewPanel
+  } = useSmartLink(id, url);
+  const ari = getObjectAri(state.details);
+  const name = getObjectName(state.details);
+  const definitionId = getDefinitionId(state.details);
+  const extensionKey = getExtensionKey(state.details);
+  const resourceType = getResourceType(state.details);
+  const services = getServices(state.details);
+  const thirdPartyARI = getThirdPartyARI(state.details);
+  const firstPartyIdentifier = getFirstPartyIdentifier();
+  const actionOptions = combineActionOptions({
+    actionOptions: actionOptionsProp,
+    platform
+  });
+  const fire3PClickEvent = fg('platform_smartlink_3pclick_analytics') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFire3PWorkflowsClickEvent(firstPartyIdentifier, thirdPartyARI) : undefined;
+
+  // Setup UI handlers.
+  const handleClickWrapper = useCallback(event => {
+    const isModifierKeyPressed = isSpecialKey(event) || isSpecialClick(event);
+    fireEvent('ui.smartLink.clicked', {
+      id,
+      display: isFlexibleUi ? CardDisplay.Flexible : appearance,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      isModifierKeyPressed
+    });
+    if (fg('platform_smartlink_3pclick_analytics')) {
+      if (thirdPartyARI && thirdPartyARI.startsWith(thirdPartyARIPrefix)) {
+        const 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();
+        }
+      }
+    }
+    const 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
+    }) && !isDisablePreviewPanel) {
+      var _extractSmartLinkEmbe2;
+      event.preventDefault();
+      event.stopPropagation();
+      openPreviewPanel({
+        url,
+        ari,
+        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) {
+      const 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.
+      const 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]);
+  const handleAuthorize = useCallback(() => actions.authorize(appearance), [actions, appearance]);
+  const handleRetry = useCallback(() => {
+    actions.reload();
+  }, [actions]);
+  const handleInvoke = useCallback(opts => 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(() => {
+    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(() => {
+    if (isFinalState(state.status)) {
+      succeedUfoExperience('smart-link-rendered', id || 'NULL', {
+        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]);
+  const onIframeDwell = useCallback((dwellTime, dwellPercentVisible) => {
+    fireEvent('ui.smartLinkIframe.dwelled', {
+      id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      dwellPercentVisible,
+      dwellTime
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
+  const onIframeFocus = useCallback(() => {
+    fireEvent('ui.smartLinkIframe.focused', {
+      id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      interactionType: 'focus'
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
+  const onIframeMouseEnter = useCallback(() => {
+    fireEvent('ui.smartLinkIframe.focused', {
+      id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      interactionType: 'mouseenter'
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
+  const onIframeMouseLeave = useCallback(() => {
+    fireEvent('ui.smartLinkIframe.focused', {
+      id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      interactionType: 'mouseleave'
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
+  if (isFlexibleUi) {
+    let 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
+      });
+  }
+}
+const CardWithUrlContentComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', ComponentUpdated, Component);
 export const CardWithUrlContent = props => {
   const 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/es2019/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 const ExpandedFrame = ({
+const ExpandedFrame = ({
   isPlaceholder = false,
   children,
   onClick,
@@ -96,4 +99,86 @@ const styles = {
   contentStyle: "_19itdlqj _2rko12b0 _1reo15vq _18m915vq _v56414au _bfhkhp5a _16jlkb7n _4t3i1osq _1pbykb7n",
   contentInteractiveActiveBorder: "_1jhm1tt7",
   contentOverflowAuto: "_1reo1wug _18m91wug"
-};
+};
+const ExpandedFrameUpdated = ({
+  isPlaceholder = false,
+  children,
+  onClick,
+  icon,
+  text,
+  isSelected,
+  frameStyle = 'showOnHover',
+  href,
+  minWidth,
+  maxWidth,
+  testId = 'expanded-frame',
+  inheritDimensions,
+  allowScrollBar = false,
+  setOverflow = true,
+  CompetitorPrompt,
+  onContentMouseEnter,
+  onContentMouseLeave
+}) => {
+  const isInteractive = () => !isPlaceholder && (Boolean(href) || Boolean(onClick));
+  const handleClick = event => handleClickCommon(event, onClick);
+  const handleMouseDown = useMouseDownEvent();
+
+  // Note: cleanup fg based on results of prompt_whiteboard_competitor_link experiment
+  const CompetitorPromptComponent = CompetitorPrompt && href && fg('prompt_whiteboard_competitor_link_gate') ? /*#__PURE__*/React.createElement(CompetitorPrompt, {
+    sourceUrl: href,
+    linkType: "embed"
+  }) : null;
+  const 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);
+  };
+  const interactive = isInteractive();
+  const showBackgroundAlways = frameStyle === 'show' || isSelected && frameStyle !== 'hide';
+  const showBackgroundOnHover = interactive && frameStyle !== 'hide';
+  const 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 ? `${minWidth}px` : '',
+      maxWidth: maxWidth ? `${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());
+};
+const ExpandedFrameWithFG = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', ExpandedFrameUpdated, ExpandedFrame);
+export { ExpandedFrameWithFG as ExpandedFrame };

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

@@ -2,6 +2,9 @@
 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';
@@ -87,8 +90,115 @@ export const Frame = /*#__PURE__*/React.forwardRef(({
     src: url,
     "data-testid": `${testId}-frame`,
     "data-iframe-loaded": isIframeLoaded,
-    onMouseEnter: () => setMouseOver(true),
-    onMouseLeave: () => setMouseOver(false),
+    onMouseEnter: () => {
+      setMouseOver(true);
+    },
+    onMouseLeave: () => {
+      setMouseOver(false);
+    },
+    allowFullScreen: true,
+    scrolling: "yes",
+    allow: "autoplay; encrypted-media; clipboard-write",
+    onLoad: () => {
+      setIframeLoaded(true);
+    },
+    sandbox: getIframeSandboxAttribute(isTrusted),
+    title: title,
+    extensionKey: extensionKey,
+    className: ax(["_19itidpf _1reo15vq _18m915vq _2rkofajl _154iidpf _1ltvidpf _1bsb1osq _4t3i1osq _kqswh2mm"])
+  }));
+});
+export const FrameUpdated = /*#__PURE__*/React.forwardRef(({
+  url,
+  isTrusted = false,
+  testId,
+  onIframeDwell,
+  onIframeFocus,
+  onIframeMouseEnter,
+  onIframeMouseLeave,
+  isMouseOver: isMouseOverProp,
+  title,
+  extensionKey
+}, iframeRef) => {
+  const [isIframeLoaded, setIframeLoaded] = useState(false);
+  const [isMouseOver, setMouseOver] = useState(false);
+  const [isWindowFocused, setWindowFocused] = useState(document.hasFocus());
+
+  // Use prop if provided (from wrapper), otherwise use local state (for backward compatibility)
+  const effectiveMouseOver = isMouseOverProp !== undefined ? isMouseOverProp : isMouseOver;
+  const ref = useRef();
+  const mergedRef = mergeRefs([iframeRef, ref]);
+  const [percentVisible, setPercentVisible] = useState(0);
+
+  /**
+   * 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
+   */
+  const [threshold] = useState([0.75, 0.8, 0.85, 0.9, 0.95, 1]);
+  useEffect(() => {
+    if (!ref || !ref.current) {
+      return;
+    }
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        setPercentVisible(entry === null || entry === void 0 ? void 0 : entry.intersectionRatio);
+      });
+    }, {
+      threshold
+    });
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [threshold, mergedRef]);
+  useEffect(() => {
+    // Initialize with current focus state
+    setWindowFocused(document.hasFocus());
+    const onBlur = () => {
+      setWindowFocused(false);
+      if (document.activeElement === ref.current) {
+        onIframeFocus && onIframeFocus();
+      }
+    };
+    const onFocus = () => {
+      setWindowFocused(true);
+    };
+    window.addEventListener('blur', onBlur);
+    window.addEventListener('focus', onFocus);
+    return () => {
+      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": `${testId}-frame`,
+    "data-iframe-loaded": isIframeLoaded,
+    onMouseEnter: () => {
+      onIframeMouseEnter === null || onIframeMouseEnter === void 0 ? void 0 : onIframeMouseEnter();
+      // Use local state if prop not provided, otherwise prop takes precedence
+      if (isMouseOverProp === undefined) {
+        setMouseOver(true);
+      }
+    },
+    onMouseLeave: () => {
+      onIframeMouseLeave === null || onIframeMouseLeave === void 0 ? void 0 : onIframeMouseLeave();
+      // Use local state if prop not provided, otherwise prop takes precedence
+      if (isMouseOverProp === undefined) {
+        setMouseOver(false);
+      }
+    },
     allowFullScreen: true,
     scrolling: "yes",
     allow: "autoplay; encrypted-media; clipboard-write",

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

@@ -3,6 +3,7 @@
  * @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.
@@ -42,11 +43,31 @@ export const IframeDwellTracker = ({
         };
       });
     };
-    if (isIframeLoaded && isMouseOver && isWindowFocused && iframePercentVisible > 0.75) {
-      if (dwellTimeoutId.current) {
-        clearInterval(dwellTimeoutId.current);
+
+    // Require: iframe loaded, mouse over, and >75% visible
+    const 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
+      const 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 () => {
       if (dwellTimeoutId.current) {