@atlaskit/smart-card 43.11.3 → 43.12.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/smart-card
 
+## 43.12.1
+
+### Patch Changes
+
+- [`7ae944d7f3cd6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7ae944d7f3cd6) -
+  NAVX-2825 Fixing no-literal-string-in-jsx violations in linking platform
+
+## 43.12.0
+
+### Minor Changes
+
+- [`ad5cf8dbae112`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ad5cf8dbae112) -
+  [ux] Added analytics for mouse enter and leave using existing analytics and fixing issue with
+  sending embedCard dwell analytics
+
 ## 43.11.3
 
 ### Patch Changes

package/analytics.spec.yaml

@@ -343,6 +343,11 @@ events:
           required: false
           type: string
           description: The definitionId of the Smart Link resolver invoked.
+        interactionType:
+          required: false
+          type: ['mouseenter', 'mouseleave', 'focus']
+          description:
+            The type of interaction that triggered this event - mouse enter, mouse leave, or focus.
   - applicationAccount connected:
       type: track
       description: user connecting their account to view a Smart Link.
@@ -616,7 +621,8 @@ events:
           description: Whether a modifier key was pressed when clicking the Smart Link.
   - smartLink clicked (previewHoverCard):
       type: ui
-      description: fires an event that represents when a user clicks on a Smart Link to open a preview panel.
+      description:
+        fires an event that represents when a user clicks on a Smart Link to open a preview panel.
       attributes:
         <<: [*PackageMetaDataContext, *CommonContext, *ResolvedContext]
         id:

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "0.0.0-development"
+  packageVersion: "43.12.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -10,9 +10,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkExtractors = require("@atlaskit/link-extractors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _useAnalyticsEvents2 = require("../../common/analytics/generated/use-analytics-events");
+var _useAnalyticsEvents3 = require("../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../constants");
 var _state = require("../../state");
 var _analytics = require("../../state/analytics");
@@ -31,6 +32,7 @@ var _InlineCard = require("../InlineCard");
 var _useSmartLinkEvents = require("../SmartLinkEvents/useSmartLinkEvents");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var thirdPartyARIPrefix = 'ari:third-party';
+var EmbedCardComponent = (0, _platformFeatureFlagsReact.componentWithFG)('rovo_chat_embed_card_dwell_and_hover_metrics', _EmbedCard.EmbedCardUpdated, _EmbedCard.EmbedCard);
 function Component(_ref) {
   var id = _ref.id,
     url = _ref.url,
@@ -61,7 +63,7 @@ function Component(_ref) {
     placeholderData = _ref.placeholderData;
   var _useAnalyticsEventsNe = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
-  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents3.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents.fireEvent;
   var isFlexibleUi = (0, _react.useMemo)(function () {
     return (0, _flexible.isFlexibleUiCard)(children, ui);
@@ -333,11 +335,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 = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEventsNe2.createAnalyticsEvent;
+  var _useAnalyticsEvents2 = (0, _useAnalyticsEvents3.useAnalyticsEvents)(),
+    fireEvent = _useAnalyticsEvents2.fireEvent;
+  var isFlexibleUi = (0, _react.useMemo)(function () {
+    return (0, _flexible.isFlexibleUiCard)(children, ui);
+  }, [children, ui]);
+
+  // Get state, actions for this card.
+  var _useSmartLink2 = (0, _state.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 = (0, _helpers.getObjectAri)(state.details);
+  var name = (0, _helpers.getObjectName)(state.details);
+  var definitionId = (0, _helpers.getDefinitionId)(state.details);
+  var extensionKey = (0, _helpers.getExtensionKey)(state.details);
+  var resourceType = (0, _helpers.getResourceType)(state.details);
+  var services = (0, _helpers.getServices)(state.details);
+  var thirdPartyARI = (0, _helpers.getThirdPartyARI)(state.details);
+  var firstPartyIdentifier = (0, _helpers.getFirstPartyIdentifier)();
+  var actionOptions = (0, _combineActionOptions.combineActionOptions)({
+    actionOptions: actionOptionsProp,
+    platform: platform
+  });
+  var fire3PClickEvent = (0, _platformFeatureFlags.fg)('platform_smartlink_3pclick_analytics') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _useSmartLinkEvents.useFire3PWorkflowsClickEvent)(firstPartyIdentifier, thirdPartyARI) : undefined;
+
+  // Setup UI handlers.
+  var handleClickWrapper = (0, _react.useCallback)(function (event) {
+    var isModifierKeyPressed = (0, _utils.isSpecialKey)(event) || (0, _utils.isSpecialClick)(event);
+    fireEvent('ui.smartLink.clicked', {
+      id: id,
+      display: isFlexibleUi ? _constants.CardDisplay.Flexible : appearance,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      isModifierKeyPressed: isModifierKeyPressed
+    });
+    if ((0, _platformFeatureFlags.fg)('platform_smartlink_3pclick_analytics')) {
+      if (thirdPartyARI && thirdPartyARI.startsWith(thirdPartyARIPrefix)) {
+        var clickURL = (0, _helpers.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 && (0, _experiments.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: (0, _helpers.getObjectIconUrl)(state.details),
+        panelData: {
+          embedUrl: (0, _expValEquals.expValEquals)('platform_hover_card_preview_panel', 'cohort', 'test') ? (_extractSmartLinkEmbe2 = (0, _linkExtractors.extractSmartLinkEmbed)(state.details)) === null || _extractSmartLinkEmbe2 === void 0 ? void 0 : _extractSmartLinkEmbe2.src : undefined
+        }
+      });
+      (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event, {
+        attributes: {
+          clickOutcome: 'previewPanel'
+        }
+      });
+      return;
+    } else if (!onClick && !isFlexibleUi) {
+      var clickUrl = (0, _helpers.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 = (0, _utils.isSpecialEvent)(event) ? '_blank' : '_self';
+      window.open(clickUrl, target);
+      (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event, {
+        attributes: {
+          clickOutcome: target === '_blank' ? 'clickThroughNewTabOrWindow' : 'clickThrough'
+        }
+      });
+    } else {
+      if (onClick) {
+        onClick(event);
+      }
+      (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(event);
+    }
+  }, [fireEvent, id, isFlexibleUi, appearance, definitionId, onClick, url, state.details, ari, name, fire3PClickEvent, isPreviewPanelAvailable, openPreviewPanel, createAnalyticsEvent, thirdPartyARI, disablePreviewPanel]);
+  var handleAuthorize = (0, _react.useCallback)(function () {
+    return actions.authorize(appearance);
+  }, [actions, appearance]);
+  var handleRetry = (0, _react.useCallback)(function () {
+    actions.reload();
+  }, [actions]);
+  var handleInvoke = (0, _react.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.
+  (0, _react.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.
+  (0, _react.useEffect)(function () {
+    if ((0, _helpers.isFinalState)(state.status)) {
+      (0, _analytics.succeedUfoExperience)('smart-link-rendered', id || 'NULL', {
+        extensionKey: extensionKey,
+        display: isFlexibleUi ? 'flexible' : appearance
+      });
+
+      // UFO will disregard this if authentication experience has not yet been started
+      (0, _analytics.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 = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.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.default.createElement(_FlexibleCard.default, {
+      id: id,
+      cardState: cardState,
+      placeholderData: (0, _platformFeatureFlags.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.default.createElement(_InlineCard.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.default.createElement(_BlockCard.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.default.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 = (0, _platformFeatureFlagsReact.componentWithFG)('rovo_chat_embed_card_dwell_and_hover_metrics', ComponentUpdated, Component);
 var CardWithUrlContent = exports.CardWithUrlContent = function CardWithUrlContent(props) {
   var display = (0, _flexible.isFlexibleUiCard)(props.children, props === null || props === void 0 ? void 0 : props.ui) ? _constants.CardDisplay.Flexible : props.appearance;
   return /*#__PURE__*/_react.default.createElement(_modal.SmartLinkModalProvider, null, /*#__PURE__*/_react.default.createElement(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
     url: props.url,
     id: props.id,
     display: display
-  }, /*#__PURE__*/_react.default.createElement(Component, props)));
+  }, /*#__PURE__*/_react.default.createElement(CardWithUrlContentComponent, props)));
 };

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

@@ -12,12 +12,14 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useLinkClicked = require("../../../state/analytics/useLinkClicked");
 var _utils = require("../../common/utils");
 var _styled = require("./styled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
+// eslint-disable-next-line no-unused-vars
+var ExpandedFrame = function ExpandedFrame(_ref) {
   var _ref$isPlaceholder = _ref.isPlaceholder,
     isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
     children = _ref.children,
@@ -113,4 +115,93 @@ 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 (0, _utils.handleClickCommon)(event, onClick);
+  };
+  var handleMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
+
+  // Note: cleanup fg based on results of prompt_whiteboard_competitor_link experiment
+  var CompetitorPromptComponent = CompetitorPrompt && href && (0, _platformFeatureFlags.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: (0, _runtime.ax)([styles.header, "embed-header"])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)([styles.leftSection])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)([styles.headerIcon])
+    }, icon), /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)([styles.tooltipWrapper])
+    }, !isPlaceholder && /*#__PURE__*/React.createElement(_tooltip.default, {
+      content: text,
+      hideTooltipOnMouseDown: true
+    }, /*#__PURE__*/React.createElement("a", {
+      href: href,
+      onClick: handleClick,
+      onMouseDown: handleMouseDown,
+      className: (0, _runtime.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: (0, _runtime.ax)([styles.contentStyle, setOverflow && allowScrollBar && styles.contentOverflowAuto, interactive && !showBackgroundAlways && !showBackgroundOnHover && styles.contentInteractiveActiveBorder])
+    }, children);
+  };
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: (0, _runtime.ax)([styles.linkWrapper, inheritDimensions && styles.linkWrapperInheritDimensions, isSelected && frameStyle !== 'hide' && styles.linkWrapperSelected, showBackgroundAlways && styles.linkWrapperBorderAndBackground, showBackgroundOnHover && !showBackgroundAlways && styles.linkWrapperInteractiveNotHidden, _styled.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 = exports.ExpandedFrame = (0, _platformFeatureFlagsReact.componentWithFG)('rovo_chat_embed_card_dwell_and_hover_metrics', ExpandedFrameUpdated, ExpandedFrame);

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

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Frame = void 0;
+exports.FrameUpdated = exports.Frame = void 0;
 require("./Frame.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -16,6 +16,7 @@ var _utils = require("../../../utils");
 var _IFrame = require("./IFrame");
 var _IframeDwellTracker = require("./IframeDwellTracker");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// eslint-disable-next-line no-unused-vars
 function mergeRefs(refs) {
   return function (value) {
     refs.forEach(function (ref) {
@@ -112,10 +113,127 @@ var Frame = exports.Frame = /*#__PURE__*/_react.default.forwardRef(function (_re
     "data-testid": "".concat(testId, "-frame"),
     "data-iframe-loaded": isIframeLoaded,
     onMouseEnter: function onMouseEnter() {
-      return setMouseOver(true);
+      setMouseOver(true);
     },
     onMouseLeave: function onMouseLeave() {
-      return setMouseOver(false);
+      setMouseOver(false);
+    },
+    allowFullScreen: true,
+    scrolling: "yes",
+    allow: "autoplay; encrypted-media; clipboard-write",
+    onLoad: function onLoad() {
+      setIframeLoaded(true);
+    },
+    sandbox: (0, _utils.getIframeSandboxAttribute)(isTrusted),
+    title: title,
+    extensionKey: extensionKey,
+    className: (0, _runtime.ax)(["_19itidpf _1reo15vq _18m915vq _2rkofajl _154iidpf _1ltvidpf _1bsb1osq _4t3i1osq _kqswh2mm"])
+  }));
+});
+var FrameUpdated = exports.FrameUpdated = /*#__PURE__*/_react.default.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 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    isIframeLoaded = _useState10[0],
+    setIframeLoaded = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    isMouseOver = _useState12[0],
+    setMouseOver = _useState12[1];
+  var _useState13 = (0, _react.useState)(document.hasFocus()),
+    _useState14 = (0, _slicedToArray2.default)(_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 = (0, _react.useRef)();
+  var mergedRef = mergeRefs([iframeRef, ref]);
+  var _useState15 = (0, _react.useState)(0),
+    _useState16 = (0, _slicedToArray2.default)(_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 = (0, _react.useState)([0.75, 0.8, 0.85, 0.9, 0.95, 1]),
+    _useState18 = (0, _slicedToArray2.default)(_useState17, 1),
+    threshold = _useState18[0];
+  (0, _react.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]);
+  (0, _react.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_IframeDwellTracker.IframeDwellTracker, {
+    isIframeLoaded: isIframeLoaded,
+    isMouseOver: effectiveMouseOver,
+    isWindowFocused: isWindowFocused,
+    iframePercentVisible: percentVisible,
+    onIframeDwell: onIframeDwell
+  }), /*#__PURE__*/_react.default.createElement(_IFrame.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() {
+      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",