@atlaskit/smart-card 23.11.3 → 23.12.0

package/dist/esm/utils/analytics/analytics.js

@@ -315,15 +315,69 @@ export var uiCardClickedEvent = function uiCardClickedEvent(_ref11) {
     })
   };
 };
-export var uiActionClickedEvent = function uiActionClickedEvent(_ref12) {
+export var uiIframeDwelledEvent = function uiIframeDwelledEvent(_ref12) {
   var id = _ref12.id,
-      actionType = _ref12.actionType,
-      extensionKey = _ref12.extensionKey,
       display = _ref12.display,
+      status = _ref12.status,
       definitionId = _ref12.definitionId,
+      extensionKey = _ref12.extensionKey,
+      location = _ref12.location,
       destinationProduct = _ref12.destinationProduct,
       destinationSubproduct = _ref12.destinationSubproduct,
-      location = _ref12.location;
+      dwellTime = _ref12.dwellTime,
+      dwellPercentVisible = _ref12.dwellPercentVisible;
+  return {
+    action: 'dwelled',
+    actionSubject: 'smartLinkIframe',
+    eventType: 'ui',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      id: id,
+      status: status,
+      definitionId: definitionId,
+      extensionKey: extensionKey,
+      display: display,
+      location: location,
+      destinationProduct: destinationProduct,
+      destinationSubproduct: destinationSubproduct,
+      dwellTime: dwellTime,
+      dwellPercentVisible: dwellPercentVisible
+    })
+  };
+};
+export var uiIframeFocusedEvent = function uiIframeFocusedEvent(_ref13) {
+  var id = _ref13.id,
+      display = _ref13.display,
+      status = _ref13.status,
+      definitionId = _ref13.definitionId,
+      extensionKey = _ref13.extensionKey,
+      location = _ref13.location,
+      destinationProduct = _ref13.destinationProduct,
+      destinationSubproduct = _ref13.destinationSubproduct;
+  return {
+    action: 'focused',
+    actionSubject: 'smartLinkIframe',
+    eventType: 'ui',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      id: id,
+      status: status,
+      definitionId: definitionId,
+      extensionKey: extensionKey,
+      display: display,
+      location: location,
+      destinationProduct: destinationProduct,
+      destinationSubproduct: destinationSubproduct
+    })
+  };
+};
+export var uiActionClickedEvent = function uiActionClickedEvent(_ref14) {
+  var id = _ref14.id,
+      actionType = _ref14.actionType,
+      extensionKey = _ref14.extensionKey,
+      display = _ref14.display,
+      definitionId = _ref14.definitionId,
+      destinationProduct = _ref14.destinationProduct,
+      destinationSubproduct = _ref14.destinationSubproduct,
+      location = _ref14.location;
   return {
     action: 'clicked',
     actionSubject: 'button',
@@ -341,13 +395,13 @@ export var uiActionClickedEvent = function uiActionClickedEvent(_ref12) {
     })
   };
 };
-export var uiClosedAuthEvent = function uiClosedAuthEvent(_ref13) {
-  var display = _ref13.display,
-      extensionKey = _ref13.extensionKey,
-      definitionId = _ref13.definitionId,
-      destinationProduct = _ref13.destinationProduct,
-      destinationSubproduct = _ref13.destinationSubproduct,
-      location = _ref13.location;
+export var uiClosedAuthEvent = function uiClosedAuthEvent(_ref15) {
+  var display = _ref15.display,
+      extensionKey = _ref15.extensionKey,
+      definitionId = _ref15.definitionId,
+      destinationProduct = _ref15.destinationProduct,
+      destinationSubproduct = _ref15.destinationSubproduct,
+      location = _ref15.location;
   return {
     action: 'closed',
     actionSubject: 'consentModal',
@@ -362,12 +416,12 @@ export var uiClosedAuthEvent = function uiClosedAuthEvent(_ref13) {
     })
   };
 };
-export var screenAuthPopupEvent = function screenAuthPopupEvent(_ref14) {
-  var extensionKey = _ref14.extensionKey,
-      definitionId = _ref14.definitionId,
-      destinationProduct = _ref14.destinationProduct,
-      destinationSubproduct = _ref14.destinationSubproduct,
-      location = _ref14.location;
+export var screenAuthPopupEvent = function screenAuthPopupEvent(_ref16) {
+  var extensionKey = _ref16.extensionKey,
+      definitionId = _ref16.definitionId,
+      destinationProduct = _ref16.destinationProduct,
+      destinationSubproduct = _ref16.destinationSubproduct,
+      location = _ref16.location;
   return {
     actionSubject: 'consentModal',
     eventType: 'screen',
@@ -380,14 +434,14 @@ export var screenAuthPopupEvent = function screenAuthPopupEvent(_ref14) {
     })
   };
 };
-export var uiRenderSuccessEvent = function uiRenderSuccessEvent(_ref15) {
-  var display = _ref15.display,
-      status = _ref15.status,
-      extensionKey = _ref15.extensionKey,
-      definitionId = _ref15.definitionId,
-      destinationProduct = _ref15.destinationProduct,
-      destinationSubproduct = _ref15.destinationSubproduct,
-      location = _ref15.location;
+export var uiRenderSuccessEvent = function uiRenderSuccessEvent(_ref17) {
+  var display = _ref17.display,
+      status = _ref17.status,
+      extensionKey = _ref17.extensionKey,
+      definitionId = _ref17.definitionId,
+      destinationProduct = _ref17.destinationProduct,
+      destinationSubproduct = _ref17.destinationSubproduct,
+      location = _ref17.location;
   return {
     action: 'renderSuccess',
     actionSubject: 'smartLink',
@@ -403,15 +457,15 @@ export var uiRenderSuccessEvent = function uiRenderSuccessEvent(_ref15) {
     })
   };
 };
-export var uiRenderFailedEvent = function uiRenderFailedEvent(_ref16) {
-  var display = _ref16.display,
-      error = _ref16.error,
-      errorInfo = _ref16.errorInfo,
-      extensionKey = _ref16.extensionKey,
-      definitionId = _ref16.definitionId,
-      destinationProduct = _ref16.destinationProduct,
-      destinationSubproduct = _ref16.destinationSubproduct,
-      location = _ref16.location;
+export var uiRenderFailedEvent = function uiRenderFailedEvent(_ref18) {
+  var display = _ref18.display,
+      error = _ref18.error,
+      errorInfo = _ref18.errorInfo,
+      extensionKey = _ref18.extensionKey,
+      definitionId = _ref18.definitionId,
+      destinationProduct = _ref18.destinationProduct,
+      destinationSubproduct = _ref18.destinationSubproduct,
+      location = _ref18.location;
   return {
     actionSubject: 'smartLink',
     action: 'renderFailed',
@@ -428,16 +482,16 @@ export var uiRenderFailedEvent = function uiRenderFailedEvent(_ref16) {
     })
   };
 };
-export var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(_ref17) {
-  var id = _ref17.id,
-      previewDisplay = _ref17.previewDisplay,
-      extensionKey = _ref17.extensionKey,
-      definitionId = _ref17.definitionId,
-      destinationProduct = _ref17.destinationProduct,
-      destinationSubproduct = _ref17.destinationSubproduct,
-      location = _ref17.location,
-      previewInvokeMethod = _ref17.previewInvokeMethod,
-      status = _ref17.status;
+export var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(_ref19) {
+  var id = _ref19.id,
+      previewDisplay = _ref19.previewDisplay,
+      extensionKey = _ref19.extensionKey,
+      definitionId = _ref19.definitionId,
+      destinationProduct = _ref19.destinationProduct,
+      destinationSubproduct = _ref19.destinationSubproduct,
+      location = _ref19.location,
+      previewInvokeMethod = _ref19.previewInvokeMethod,
+      status = _ref19.status;
   return {
     action: 'viewed',
     actionSubject: 'hoverCard',
@@ -455,17 +509,17 @@ export var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(_ref17) {
     })
   };
 };
-export var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(_ref18) {
-  var id = _ref18.id,
-      previewDisplay = _ref18.previewDisplay,
-      hoverTime = _ref18.hoverTime,
-      extensionKey = _ref18.extensionKey,
-      definitionId = _ref18.definitionId,
-      destinationProduct = _ref18.destinationProduct,
-      destinationSubproduct = _ref18.destinationSubproduct,
-      location = _ref18.location,
-      previewInvokeMethod = _ref18.previewInvokeMethod,
-      status = _ref18.status;
+export var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(_ref20) {
+  var id = _ref20.id,
+      previewDisplay = _ref20.previewDisplay,
+      hoverTime = _ref20.hoverTime,
+      extensionKey = _ref20.extensionKey,
+      definitionId = _ref20.definitionId,
+      destinationProduct = _ref20.destinationProduct,
+      destinationSubproduct = _ref20.destinationSubproduct,
+      location = _ref20.location,
+      previewInvokeMethod = _ref20.previewInvokeMethod,
+      status = _ref20.status;
   return {
     action: 'dismissed',
     actionSubject: 'hoverCard',
@@ -484,15 +538,15 @@ export var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(_ref18
     })
   };
 };
-export var uiHoverCardOpenLinkClickedEvent = function uiHoverCardOpenLinkClickedEvent(_ref19) {
-  var id = _ref19.id,
-      previewDisplay = _ref19.previewDisplay,
-      extensionKey = _ref19.extensionKey,
-      definitionId = _ref19.definitionId,
-      destinationProduct = _ref19.destinationProduct,
-      destinationSubproduct = _ref19.destinationSubproduct,
-      location = _ref19.location,
-      previewInvokeMethod = _ref19.previewInvokeMethod;
+export var uiHoverCardOpenLinkClickedEvent = function uiHoverCardOpenLinkClickedEvent(_ref21) {
+  var id = _ref21.id,
+      previewDisplay = _ref21.previewDisplay,
+      extensionKey = _ref21.extensionKey,
+      definitionId = _ref21.definitionId,
+      destinationProduct = _ref21.destinationProduct,
+      destinationSubproduct = _ref21.destinationSubproduct,
+      location = _ref21.location,
+      previewInvokeMethod = _ref21.previewInvokeMethod;
   return {
     action: 'clicked',
     actionSubject: 'button',
@@ -519,15 +573,15 @@ export var uiLearnMoreLinkClickedEvent = function uiLearnMoreLinkClickedEvent()
     attributes: _objectSpread({}, context)
   };
 };
-export var chunkloadFailedEvent = function chunkloadFailedEvent(_ref20) {
-  var display = _ref20.display,
-      error = _ref20.error,
-      errorInfo = _ref20.errorInfo,
-      extensionKey = _ref20.extensionKey,
-      definitionId = _ref20.definitionId,
-      destinationProduct = _ref20.destinationProduct,
-      destinationSubproduct = _ref20.destinationSubproduct,
-      location = _ref20.location;
+export var chunkloadFailedEvent = function chunkloadFailedEvent(_ref22) {
+  var display = _ref22.display,
+      error = _ref22.error,
+      errorInfo = _ref22.errorInfo,
+      extensionKey = _ref22.extensionKey,
+      definitionId = _ref22.definitionId,
+      destinationProduct = _ref22.destinationProduct,
+      destinationSubproduct = _ref22.destinationSubproduct,
+      location = _ref22.location;
   return {
     action: 'chunkLoadFailed',
     actionSubject: 'smartLink',

package/dist/esm/utils/analytics/index.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { getMeasure } from '../performance';
 import { resolvedEvent, unresolvedEvent } from './analytics';
-export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, chunkloadFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiLearnMoreLinkClickedEvent } from './analytics';
+export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, chunkloadFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiLearnMoreLinkClickedEvent, uiIframeDwelledEvent } from './analytics';
 export var instrumentEvent = function instrumentEvent(_ref) {
   var id = _ref.id,
       status = _ref.status,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.11.3",
+	"version": "23.12.0",
 	"sideEffects": false
 }

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

@@ -119,6 +119,30 @@ export function CardWithUrlContent(_ref) {
       });
     }
   }, [appearance, state.status, url, definitionId, extensionKey, analytics.ui, id]);
+  var onIframeDwell = useCallback(function (dwellTime, dwellPercentVisible) {
+    analytics.ui.iframeDwelledEvent({
+      id: id,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      status: state.status,
+      definitionId: definitionId,
+      extensionKey: extensionKey,
+      destinationProduct: product,
+      destinationSubproduct: subproduct,
+      dwellTime: dwellTime,
+      dwellPercentVisible: dwellPercentVisible
+    });
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct]);
+  var onIframeFocus = useCallback(function () {
+    analytics.ui.iframeFocusedEvent({
+      id: id,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      status: state.status,
+      definitionId: definitionId,
+      extensionKey: extensionKey,
+      destinationProduct: product,
+      destinationSubproduct: subproduct
+    });
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct]);
 
   if (isFlexibleUi) {
     var cardState = state;
@@ -210,7 +234,9 @@ export function CardWithUrlContent(_ref) {
         testId: testId,
         inheritDimensions: inheritDimensions,
         showActions: showActions,
-        ref: embedIframeRef
+        ref: embedIframeRef,
+        onIframeDwell: onIframeDwell,
+        onIframeFocus: onIframeFocus
       });
   }
 }

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

@@ -2,25 +2,123 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React, { useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { getIframeSandboxAttribute } from '../../../utils';
+import { IframeDwellTracker } from './IframeDwellTracker';
+import { useFeatureFlag } from '@atlaskit/link-provider';
+
+function mergeRefs(refs) {
+  return function (value) {
+    refs.forEach(function (ref) {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref !== null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
 export var Frame = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
   var url = _ref.url,
       _ref$isTrusted = _ref.isTrusted,
       isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      onIframeDwell = _ref.onIframeDwell,
+      onIframeFocus = _ref.onIframeFocus;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isIframeLoaded = _useState2[0],
       setIframeLoaded = _useState2[1];
 
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isMouseOver = _useState4[0],
+      setMouseOver = _useState4[1];
+
+  var _useState5 = useState(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isWindowFocused = _useState6[0],
+      setWindowFocused = _useState6[1];
+
+  var ref = useRef();
+  var mergedRef = mergeRefs([iframeRef, ref]);
+  var trackIframeDwellEvents = useFeatureFlag('trackIframeDwellEvents');
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      percentVisible = _useState8[0],
+      setPercentVisible = _useState8[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 _useState9 = useState([0.75, 0.8, 0.85, 0.9, 0.95, 1]),
+      _useState10 = _slicedToArray(_useState9, 1),
+      threshold = _useState10[0];
+
+  useEffect(function () {
+    if (!trackIframeDwellEvents) {
+      return;
+    }
+
+    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();
+    };
+  }, [trackIframeDwellEvents, threshold, mergedRef]);
+  useEffect(function () {
+    if (!trackIframeDwellEvents) {
+      return;
+    }
+
+    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);
+    };
+  }, [trackIframeDwellEvents, ref, onIframeFocus]);
+
   if (!url) {
     return null;
   }
 
-  return jsx("iframe", {
-    ref: iframeRef,
+  return jsx(React.Fragment, null, trackIframeDwellEvents ? jsx(IframeDwellTracker, {
+    isIframeLoaded: isIframeLoaded,
+    isMouseOver: isMouseOver,
+    isWindowFocused: isWindowFocused,
+    iframePercentVisible: percentVisible,
+    onIframeDwell: onIframeDwell
+  }) : null, jsx("iframe", {
+    ref: mergedRef,
     src: url,
     "data-testid": "".concat(testId, "-frame"),
     "data-iframe-loaded": isIframeLoaded,
@@ -34,12 +132,18 @@ export var Frame = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
       overflow: 'hidden',
       borderRadius: '3px'
     },
+    onMouseEnter: trackIframeDwellEvents ? function () {
+      return setMouseOver(true);
+    } : undefined,
+    onMouseLeave: trackIframeDwellEvents ? function () {
+      return setMouseOver(false);
+    } : undefined,
     allowFullScreen: true,
     scrolling: "yes",
     allow: "autoplay; encrypted-media; clipboard-write",
     onLoad: function onLoad() {
-      return setIframeLoaded(true);
+      setIframeLoaded(true);
     },
     sandbox: getIframeSandboxAttribute(isTrusted)
-  });
+  }));
 });

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

@@ -0,0 +1,62 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * A kind of cheap logarithmic backoff. Fire analytics after the user has
+ * dwelled for 5 seconds, then 10 seconds, and so on.
+ */
+var INTERVALS_TO_LOG = [5, 10, 15, 20, 25, 30, 45, 60, 90, 120, 180];
+export var IframeDwellTracker = function IframeDwellTracker(_ref) {
+  var isIframeLoaded = _ref.isIframeLoaded,
+      isMouseOver = _ref.isMouseOver,
+      isWindowFocused = _ref.isWindowFocused,
+      iframePercentVisible = _ref.iframePercentVisible,
+      onIframeDwell = _ref.onIframeDwell;
+
+  var _useState = useState({
+    time: 0,
+    percentVisible: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      dwell = _useState2[0],
+      setDwell = _useState2[1];
+
+  var dwellTimeoutId = useRef(); // fire analytics when the dwell timer reaches 5 seconds
+
+  useEffect(function () {
+    if (dwell.time > 0 && INTERVALS_TO_LOG.includes(dwell.time)) {
+      onIframeDwell && onIframeDwell(dwell.time, dwell.percentVisible);
+    }
+  }, [dwell, onIframeDwell]); // start and stop tracking dwell time
+
+  useEffect(function () {
+    var incrementDwellTime = function incrementDwellTime() {
+      // callback is called on dwell state changes, so change percentVisible and time together
+      setDwell(function (_ref2) {
+        var time = _ref2.time;
+        return {
+          time: time + 1,
+          // snapshot of percent visible, rounded down to nearest 5%
+          percentVisible: Math.floor((iframePercentVisible || 0) * 20) * 5
+        };
+      });
+    };
+
+    if (isIframeLoaded && isMouseOver && isWindowFocused && iframePercentVisible > 0.75) {
+      if (dwellTimeoutId.current) {
+        clearInterval(dwellTimeoutId.current);
+      }
+
+      dwellTimeoutId.current = setInterval(incrementDwellTime, 1000);
+    }
+
+    return function () {
+      if (dwellTimeoutId.current) {
+        clearInterval(dwellTimeoutId.current);
+      }
+    };
+  }, [setDwell, isMouseOver, isWindowFocused, isIframeLoaded, iframePercentVisible]);
+  return null;
+};

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

@@ -32,7 +32,9 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       onResolve = _ref.onResolve,
       onError = _ref.onError,
       testId = _ref.testId,
-      inheritDimensions = _ref.inheritDimensions;
+      inheritDimensions = _ref.inheritDimensions,
+      onIframeDwell = _ref.onIframeDwell,
+      onIframeFocus = _ref.onIframeFocus;
   var data = details && details.data || getEmptyJsonLd();
   var meta = details && details.meta;
   var extensionKey = getExtensionKey(details);
@@ -65,7 +67,9 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
           isFrameVisible: isFrameVisible,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
-          ref: iframeRef
+          ref: iframeRef,
+          onIframeDwell: onIframeDwell,
+          onIframeFocus: onIframeFocus
         }));
       } else {
         if (platform === 'mobile') {

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

@@ -16,7 +16,9 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
       isTrusted = _ref.isTrusted,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'embed-card-resolved-view' : _ref$testId,
-      inheritDimensions = _ref.inheritDimensions;
+      inheritDimensions = _ref.inheritDimensions,
+      onIframeDwell = _ref.onIframeDwell,
+      onIframeFocus = _ref.onIframeFocus;
   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);
@@ -50,6 +52,8 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     url: preview === null || preview === void 0 ? void 0 : preview.src,
     isTrusted: isTrusted,
     testId: testId,
-    ref: embedIframeRef
+    ref: embedIframeRef,
+    onIframeDwell: onIframeDwell,
+    onIframeFocus: onIframeFocus
   }));
 });

package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts

@@ -1,5 +1,5 @@
 import { AnalyticsHandler, AnalyticsName, AnalyticsPayload } from '../../utils/types';
-import { CommonEventProps, ConnectFailedEventProps, ConnectSucceededEventProps, InstrumentEventProps, InvokeFailedEventProps, InvokeSucceededEventProps, ScreenAuthPopupEventProps, TrackAppAccountConnectedProps, UiActionClickedEventProps, UiAuthAlternateAccountEventProps, UiAuthEventProps, UiCardClickedEventProps, UiClosedAuthEventProps, UiHoverCardDismissedEventProps, UiHoverCardOpenLinkClickedEventProps, UiHoverCardViewedEventProps, UiRenderFailedEventProps, UiRenderSuccessEventProps } from '../../utils/analytics/types';
+import { CommonEventProps, ConnectFailedEventProps, ConnectSucceededEventProps, InstrumentEventProps, InvokeFailedEventProps, InvokeSucceededEventProps, ScreenAuthPopupEventProps, TrackAppAccountConnectedProps, UiActionClickedEventProps, UiAuthAlternateAccountEventProps, UiAuthEventProps, UiCardClickedEventProps, UiClosedAuthEventProps, UiHoverCardDismissedEventProps, UiHoverCardOpenLinkClickedEventProps, UiHoverCardViewedEventProps, UiIframeDwelledEventProps, UiIframeFocusedEventProps, UiRenderFailedEventProps, UiRenderSuccessEventProps } from '../../utils/analytics/types';
 /**
  * This hook provides usage of Smart Link analytics outside of the Card component.
  * Can be provided to Card via the analyticsEvents prop to change the analytics events.
@@ -50,6 +50,32 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @returns
          */
         cardClickedEvent: ({ id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId, }: UiCardClickedEventProps) => void;
+        /**
+         * This fires an event that represents when a user dwells their cursor on a Smart Link's iframe.
+         * @param id The unique ID for this Smart Link.
+         * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+         * @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
+         * @param definitionId The definitionId of the Smart Link resolver invoked.
+         * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+         * @param location Where the Smart Link is currently rendered.
+         * @param destinationProduct The product the Smart Link is linked to.
+         * @param dwellTime Total seconds that the user has dwelled on this iframe
+         * @param dwellPercentVisible Percentage element was visible at end of dwell
+         * @returns
+         */
+        iframeDwelledEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, dwellTime, dwellPercentVisible, }: UiIframeDwelledEventProps) => void;
+        /**
+         * This fires an event that represents when a user clicks or tabs into a Smart Link's iframe.
+         * @param id The unique ID for this Smart Link.
+         * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+         * @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
+         * @param definitionId The definitionId of the Smart Link resolver invoked.
+         * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+         * @param location Where the Smart Link is currently rendered.
+         * @param destinationProduct The product the Smart Link is linked to.
+         * @returns
+         */
+        iframeFocusedEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, }: UiIframeFocusedEventProps) => void;
         /**
          * This fires an event that represents when a user clicks on a Smart Link action.
          * Note: This also starts the UFO smart-link-action-invocation experience.

package/dist/types/state/flexible-ui-context/index.d.ts

@@ -18,6 +18,8 @@ export declare const FlexibleUiAnalyticsContext: import("react").Context<{
             actionSubjectId: string;
         }) => void;
         cardClickedEvent: ({ id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId, }: import("../../utils/analytics/types").UiCardClickedEventProps) => void;
+        iframeDwelledEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, dwellTime, dwellPercentVisible, }: import("../../utils/analytics/types").UiIframeDwelledEventProps) => void;
+        iframeFocusedEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, }: import("../../utils/analytics/types").UiIframeFocusedEventProps) => void;
         actionClickedEvent: ({ id, actionType, display, invokeType, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiActionClickedEventProps) => void;
         hoverCardOpenLinkClickedEvent: ({ previewDisplay, definitionId, extensionKey, destinationProduct, destinationSubproduct, location, previewInvokeMethod, }: import("../../utils/analytics/types").UiHoverCardOpenLinkClickedEventProps) => void;
         closedAuthEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiClosedAuthEventProps) => void;
@@ -60,6 +62,8 @@ export declare const useFlexibleUiAnalyticsContext: () => {
             actionSubjectId: string;
         }) => void;
         cardClickedEvent: ({ id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId, }: import("../../utils/analytics/types").UiCardClickedEventProps) => void;
+        iframeDwelledEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, dwellTime, dwellPercentVisible, }: import("../../utils/analytics/types").UiIframeDwelledEventProps) => void;
+        iframeFocusedEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, }: import("../../utils/analytics/types").UiIframeFocusedEventProps) => void;
         actionClickedEvent: ({ id, actionType, display, invokeType, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiActionClickedEventProps) => void;
         hoverCardOpenLinkClickedEvent: ({ previewDisplay, definitionId, extensionKey, destinationProduct, destinationSubproduct, location, previewInvokeMethod, }: import("../../utils/analytics/types").UiHoverCardOpenLinkClickedEventProps) => void;
         closedAuthEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiClosedAuthEventProps) => void;

package/dist/types/state/hooks/useSmartLink.d.ts

@@ -17,6 +17,8 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
                 actionSubjectId: string;
             }) => void;
             cardClickedEvent: ({ id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId, }: import("../../utils/analytics/types").UiCardClickedEventProps) => void;
+            iframeDwelledEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, dwellTime, dwellPercentVisible, }: import("../../utils/analytics/types").UiIframeDwelledEventProps) => void;
+            iframeFocusedEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, }: import("../../utils/analytics/types").UiIframeFocusedEventProps) => void;
             actionClickedEvent: ({ id, actionType, display, invokeType, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiActionClickedEventProps) => void;
             hoverCardOpenLinkClickedEvent: ({ previewDisplay, definitionId, extensionKey, destinationProduct, destinationSubproduct, location, previewInvokeMethod, }: import("../../utils/analytics/types").UiHoverCardOpenLinkClickedEventProps) => void;
             closedAuthEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiClosedAuthEventProps) => void;