@atlaskit/smart-card 23.11.2 → 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.2",
+	"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/esm/view/HoverCard/components/HoverCardContent.js

@@ -1,6 +1,10 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { extractType } from '@atlaskit/linking-common/extractors';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
@@ -38,6 +42,44 @@ export var getOpenAction = function getOpenAction(url, analytics, onActionClick)
     testId: 'hover-card-open-button'
   };
 };
+export var getCopyAction = function getCopyAction(url) {
+  return {
+    name: ActionName.CustomAction,
+    icon: jsx(CopyIcon, {
+      label: "copy url",
+      size: "medium"
+    }),
+    iconPosition: 'before',
+    onClick: function () {
+      var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return navigator.clipboard.writeText(url);
+
+              case 2:
+                return _context.abrupt("return", _context.sent);
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function onClick() {
+        return _onClick.apply(this, arguments);
+      }
+
+      return onClick;
+    }(),
+    tooltipMessage: jsx(FormattedMessage, messages.copy_url_to_clipboard),
+    testId: 'hover-card-copy-button'
+  };
+};
 
 var HoverCardContent = function HoverCardContent(_ref) {
   var _cardState$details;
@@ -72,7 +114,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     });
   }, [cardState.status, analytics.ui, id]);
   var titleActions = useMemo(function () {
-    return [getOpenAction(url, analytics, onActionClick)];
+    return [getCopyAction(url), getOpenAction(url, analytics, onActionClick)];
   }, [url, analytics, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var types = data ? extractType(data) : undefined;

package/dist/types/messages.d.ts

@@ -1,6 +1,6 @@
 import { MessageDescriptor } from 'react-intl-next';
 export declare type RequestAccessMessageKey = 'click_to_join' | 'click_to_join_description' | 'forbidden_description' | 'request_access' | 'request_access_description' | 'request_access_pending' | 'request_access_pending_description' | 'request_denied_description';
-export declare type MessageKey = 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'could_not_load_link' | 'download' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'loading' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_link_in_a_new_tab' | 'preview' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'try_again' | 'try_another_account' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
+export declare type MessageKey = 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'copy_url_to_clipboard' | 'could_not_load_link' | 'download' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'loading' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_link_in_a_new_tab' | 'preview' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'try_again' | 'try_another_account' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
 declare type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };