@atlaskit/smart-card 22.0.0 → 22.1.0

package/dist/cjs/view/common/Modal.js

@@ -29,6 +29,10 @@ var _ModalHeader = require("./ModalHeader");
 
 var _utils = require("../../utils");
 
+var _analytics = _interopRequireDefault(require("../EmbedModal/components/analytics"));
+
+var _types = require("../EmbedModal/types");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -78,7 +82,8 @@ var Modal = function Modal(_ref) {
       providerName = _ref.providerName,
       metadata = _ref.metadata,
       icon = _ref.icon,
-      closeLabel = _ref.closeLabel,
+      _ref$closeLabel = _ref.closeLabel,
+      closeLabel = _ref$closeLabel === void 0 ? 'Close Preview' : _ref$closeLabel,
       iframeName = _ref.iframeName,
       title = _ref.title,
       url = _ref.url,
@@ -94,16 +99,35 @@ var Modal = function Modal(_ref) {
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
+  var openAt = (0, _react.useRef)();
+  var handleOnOpenComplete = (0, _react.useCallback)(function () {
+    openAt.current = Date.now();
+
+    if (onOpen) {
+      onOpen({
+        size: _types.EmbedModalSize.Small
+      });
+    }
+  }, [onOpen]);
+  var handleOnCloseComplete = (0, _react.useCallback)(function () {
+    if (onClose) {
+      var duration = openAt.current ? Date.now() - openAt.current : undefined;
+      onClose({
+        duration: duration,
+        size: _types.EmbedModalSize.Small
+      });
+    }
+  }, [onClose]);
   var sandbox = (0, _utils.getIframeSandboxAttribute)(isTrusted);
   return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
     height: "100%",
     width: "large",
     testId: testId,
-    onOpenComplete: onOpen,
+    onOpenComplete: handleOnOpenComplete,
     onClose: function onClose() {
       setIsOpen(false);
     },
-    onCloseComplete: onClose
+    onCloseComplete: handleOnCloseComplete
   }, /*#__PURE__*/_react.default.createElement(_ModalHeader.Header, {
     providerName: providerName,
     icon: icon,
@@ -129,5 +153,6 @@ var Modal = function Modal(_ref) {
   }))));
 };
 
-var _default = ModalWithErrorBoundary;
+var _default = (0, _analytics.default)(ModalWithErrorBoundary);
+
 exports.default = _default;

package/dist/cjs/view/common/ModalHeader.js

@@ -98,7 +98,7 @@ var Header = function Header(_ref) {
     testId: "preview-view-action",
     iconAfter: (0, _core.jsx)(_shortcut.default, {
       size: "small",
-      label: "go to source"
+      label: ""
     }),
     onClick: onViewActionClick
   }, providerName ? (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal)), (0, _core.jsx)(_customThemeButton.default, {
@@ -106,7 +106,8 @@ var Header = function Header(_ref) {
     iconBefore: (0, _core.jsx)(_close.default, {
       label: label
     }),
-    onClick: onClose
+    onClick: onClose,
+    testId: "preview-close-button"
   }))));
 };
 

package/dist/es2019/extractors/block/index.js

@@ -28,15 +28,14 @@ const extractBlockDetails = jsonLd => [extractCommentCount(jsonLd), extractProgr
 export const extractBlockActions = (props, jsonLd, opts, platform) => {
   if (opts) {
     const {
-      featureFlags,
-      handleInvoke,
-      handleAnalytics,
-      extensionKey,
-      source,
-      testId
+      handleInvoke
     } = opts;
     const actions = extractActions(jsonLd, handleInvoke);
-    const previewAction = extractPreviewAction(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform, source, featureFlags); // The previewAction should always be the last action
+    const previewAction = extractPreviewAction({ ...opts,
+      viewProps: props,
+      jsonLd,
+      platform
+    }); // The previewAction should always be the last action
 
     if (previewAction) {
       actions.push(previewAction);

package/dist/es2019/extractors/common/actions/extractPreviewAction.js

@@ -1,6 +1,5 @@
-import { uiRenderSuccessEvent, uiRenderFailedEvent } from '../../../utils/analytics';
 import { extractDownloadUrl } from '../detail';
-import { extractProvider, extractPreview } from '@atlaskit/linking-common/extractors';
+import { extractPreview, extractProvider } from '@atlaskit/linking-common/extractors';
 import { PreviewAction } from '../../../view/BlockCard';
 
 const getMetadataFromJsonLd = (jsonLd, platform) => {
@@ -39,7 +38,18 @@ const getInvokeOpts = (key, action, source) => ({
   }
 });
 
-export const extractPreviewAction = (extensionKey = 'empty-object-provider', viewProps, jsonLd, handleInvoke, handleAnalytics, testId, platform, source, featureFlags) => {
+export const extractPreviewAction = ({
+  extensionKey = 'empty-object-provider',
+  viewProps,
+  jsonLd,
+  handleInvoke,
+  testId,
+  platform,
+  origin,
+  source = 'block',
+  featureFlags,
+  analytics
+}) => {
   // Extract metadata from view props & raw JSON-LD.
   const metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
   const metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -51,22 +61,10 @@ export const extractPreviewAction = (extensionKey = 'empty-object-provider', vie
     // Build action using instrumentation hooks.
     const key = extensionKey;
     const previewAction = PreviewAction({ ...metadata,
+      analytics,
+      origin,
       featureFlags,
       testId,
-      onOpen: () => {
-        handleAnalytics(uiRenderSuccessEvent({
-          display: 'preview',
-          status: 'resolved',
-          extensionKey: key
-        }));
-      },
-      onOpenFailed: (error, errorInfo) => {
-        handleAnalytics(uiRenderFailedEvent({
-          display: 'preview',
-          error,
-          errorInfo
-        }));
-      },
       onDownloadActionClick: () => {
         handleInvoke(getInvokeOpts(key, 'DownloadAction'));
       },
@@ -76,7 +74,7 @@ export const extractPreviewAction = (extensionKey = 'empty-object-provider', vie
     }); // Setup props to go through proper Redux 'invocation' flow
     // for analytics, further state management if required in future.
 
-    const previewActionProps = getInvokeOpts(key, 'PreviewAction', source !== null && source !== void 0 ? source : 'block'); // - Promise invoked by the action invocation handler; open preview.
+    const previewActionProps = getInvokeOpts(key, 'PreviewAction', source); // - Promise invoked by the action invocation handler; open preview.
 
     previewActionProps.action.promise = previewAction.promise; // - Promise invoked on click of `Preview` on block card; trigger above promise.
 

package/dist/es2019/state/analytics/useSmartLinkAnalytics.js

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import { getUrl } from '@atlaskit/linking-common';
-import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
+import { connectFailedEvent, connectSucceededEvent, context, instrumentEvent, invokeFailedEvent, invokeSucceededEvent, screenAuthPopupEvent, trackAppAccountConnected, uiActionClickedEvent, uiAuthAlternateAccountEvent, uiAuthEvent, uiCardClickedEvent, uiClosedAuthEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiHoverCardViewedEvent, uiRenderFailedEvent, uiRenderSuccessEvent } from '../../utils/analytics';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
-import { getDefinitionId, getExtensionKey, getResourceType, getSubproduct, getProduct } from '../helpers';
+import { getDefinitionId, getExtensionKey, getProduct, getResourceType, getSubproduct } from '../helpers';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 
 const applyCommonAttributes = (event, commonAttributes) => {
@@ -104,6 +104,21 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
       location
     }), commonAttributes)),
 
+    /**
+     * This fires an event that represents when a user
+     * click a button.
+     * @param data A partial analytics event payload
+     */
+    buttonClickedEvent: data => dispatchAnalytics(applyCommonAttributes({
+      action: 'clicked',
+      actionSubject: 'button',
+      actionSubjectId: data.actionSubjectId,
+      attributes: { ...context,
+        ...data.attributes
+      },
+      eventType: 'ui'
+    }, commonAttributes)),
+
     /**
      * This fires an event that represents when a user clicks on a Smart Link.
      * @param id The unique ID for this Smart Link.
@@ -235,6 +250,20 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
       location
     }), commonAttributes)),
 
+    /**
+     * This fires an event that represents when a user close a modal.
+     * @param data A partial analytics event payload
+     */
+    modalClosedEvent: data => dispatchAnalytics(applyCommonAttributes({
+      action: 'closed',
+      actionSubject: 'modal',
+      actionSubjectId: data.actionSubjectId,
+      attributes: { ...context,
+        ...data.attributes
+      },
+      eventType: 'ui'
+    }, commonAttributes)),
+
     /**
      * This fires an event that represents when a Smart Link was rendered successfully.
      * Note: this fires even if the Smart Link request errored out.
@@ -596,7 +625,21 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
       destinationProduct,
       destinationSubproduct,
       location
-    }), commonAttributes))
+    }), commonAttributes)),
+
+    /**
+     * This fires an event that represents when a user view a modal.
+     * @param data A partial analytics event payload
+     */
+    modalViewedEvent: data => dispatchAnalytics(applyCommonAttributes({
+      action: 'viewed',
+      actionSubject: data.name,
+      attributes: { ...context,
+        ...data.attributes
+      },
+      eventType: 'screen',
+      name: data.name
+    }, commonAttributes))
   }), [commonAttributes, dispatchAnalytics]);
   return useMemo(() => ({
     ui,

package/dist/es2019/state/hooks-external/useSmartLinkActions.js

@@ -10,7 +10,8 @@ export function useSmartLinkActions({
   url,
   appearance,
   analyticsHandler,
-  platform = 'web'
+  platform = 'web',
+  origin
 }) {
   const id = useMemo(() => uuid(), []);
   const [actions, setActions] = useState([]);
@@ -32,7 +33,8 @@ export function useSmartLinkActions({
     const cardProperties = extractCardProps(linkState.details.data, linkState.details.meta, {
       featureFlags,
       handleInvoke: opts => linkActions.invoke(opts, appearance),
-      handleAnalytics: analyticsHandler,
+      analytics: linkAnalytics,
+      origin,
       extensionKey: getExtensionKey(linkState.details),
       source: appearance
     }, undefined, platform);
@@ -47,6 +49,6 @@ export function useSmartLinkActions({
       invoke: action.promise
     }));
     setActions(cardActions);
-  }, [linkState, linkActions, analyticsHandler, appearance, platform, embedModalSize]);
+  }, [linkState, linkActions, linkAnalytics, appearance, platform, embedModalSize, origin]);
   return actions;
 }

package/dist/es2019/utils/analytics/analytics.js

@@ -369,7 +369,7 @@ export const uiRenderFailedEvent = ({
   actionSubject: 'smartLink',
   action: 'renderFailed',
   eventType: 'ui',
-  attributes: {
+  attributes: { ...context,
     error,
     errorInfo,
     display,

package/dist/es2019/utils/mocks.js

@@ -109,6 +109,18 @@ export const mocks = {
     data: {
       status: 'CompletedStatus'
     }
+  },
+  analytics: {
+    status: 'resolved',
+    details: {
+      meta: {
+        definitionId: 'spaghetti-id',
+        key: 'spaghetti-key',
+        resourceType: 'spaghetti-resource',
+        subproduct: 'spaghetti-subproduct',
+        product: 'spaghetti-product'
+      }
+    }
   }
 };
 export const fakeResponse = () => Promise.resolve(mocks.success);
@@ -126,4 +138,17 @@ export const fakeFactory = (implementation, implementationPost, implementationPr
   }
 
 };
-export const waitFor = (time = 1) => new Promise(res => setTimeout(res, time));
+export const waitFor = (time = 1) => new Promise(res => setTimeout(res, time));
+export const mockAnalytics = {
+  ui: {
+    buttonClickedEvent: () => {},
+    modalClosedEvent: () => {},
+    renderSuccessEvent: () => {},
+    renderFailedEvent: () => {}
+  },
+  operational: {},
+  track: {},
+  screen: {
+    modalViewedEvent: () => {}
+  }
+};

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/actions/PreviewAction.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { IntlProvider, FormattedMessage } from 'react-intl-next';
+import { FormattedMessage, IntlProvider } from 'react-intl-next';
 import { messages } from '../../../messages';
 
 /*
@@ -36,9 +36,9 @@ export async function previewFunction({
   ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
     locale: "en"
   }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
-    onClose: () => {
+    onClose: context => {
       if (popupMountPoint) {
-        onClose();
+        onClose(context);
         ReactDOM.unmountComponentAtNode(popupMountPoint);
       }
     }

package/dist/es2019/view/BlockCard/index.js

@@ -5,7 +5,6 @@ import { extractBlockProps } from '../../extractors/block';
 import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
 import { extractRequestAccessContext } from '../../extractors/common/context';
 import { CardLinkView } from '../LinkView';
-export { default as PreviewAction } from './actions/PreviewAction';
 import { AuthorizeAction } from './actions/AuthorizeAction';
 import { ForbiddenAction } from './actions/ForbiddenAction';
 import { ResolvedView as BlockCardResolvedView } from './views/ResolvedView';
@@ -15,6 +14,7 @@ import { UnauthorizedView as BlockCardUnauthorisedView } from './views/Unauthori
 import { ForbiddenView as BlockCardForbiddenView } from './views/ForbiddenView';
 import { ErroredView as BlockCardErroredView } from './views/ErroredView';
 import { useFeatureFlag } from '@atlaskit/link-provider';
+export { default as PreviewAction } from './actions/PreviewAction';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
 export const BlockCard = ({
   url,
@@ -26,7 +26,6 @@ export const BlockCard = ({
   handleAuthorize,
   handleErrorRetry,
   handleFrameClick,
-  handleAnalytics,
   handleInvoke,
   renderers,
   isSelected,
@@ -34,7 +33,8 @@ export const BlockCard = ({
   onError,
   testId,
   showActions,
-  platform
+  platform,
+  analytics
 }) => {
   var _details$meta, _forbiddenViewProps$c;
 
@@ -48,8 +48,9 @@ export const BlockCard = ({
   const data = details && details.data || getEmptyJsonLd();
   const meta = details && details.meta;
   const extractorOpts = {
+    analytics,
+    origin: 'smartLinkCard',
     featureFlags,
-    handleAnalytics,
     handleInvoke,
     extensionKey: getExtensionKey(details)
   };

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

@@ -176,7 +176,7 @@ export function CardWithUrlContent({
         handleErrorRetry: handleRetry,
         handleInvoke: handleInvoke,
         handleFrameClick: handleClickWrapper,
-        handleAnalytics: dispatchAnalytics,
+        analytics: analytics,
         isSelected: isSelected,
         onResolve: onResolve,
         onError: onError,
@@ -194,7 +194,7 @@ export function CardWithUrlContent({
         handleErrorRetry: handleRetry,
         handleFrameClick: handleClickWrapper,
         handleInvoke: handleInvoke,
-        handleAnalytics: dispatchAnalytics,
+        analytics: analytics,
         isSelected: isSelected,
         isFrameVisible: isFrameVisible,
         platform: platform,

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

@@ -22,7 +22,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   handleAuthorize,
   handleErrorRetry,
   handleFrameClick,
-  handleAnalytics,
+  analytics,
   handleInvoke,
   showActions,
   isSelected,
@@ -79,7 +79,8 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
         }
 
         const resolvedBlockViewProps = extractBlockProps(data, meta, {
-          handleAnalytics,
+          analytics,
+          origin: 'smartLinkEmbed',
           handleInvoke,
           extensionKey: getExtensionKey(details)
         });

package/dist/es2019/view/EmbedModal/components/analytics/index.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback } from 'react';
+import { EmbedModalSize } from '../../types';
+
+const getResizeFrom = size => size === EmbedModalSize.Small ? EmbedModalSize.Large : EmbedModalSize.Small;
+
+const withAnalytics = Component => props => {
+  const {
+    analytics,
+    onClose,
+    onOpen,
+    onOpenFailed,
+    onResize,
+    origin
+  } = props;
+  const handleOnOpen = useCallback(context => {
+    analytics.screen.modalViewedEvent({
+      name: 'embedPreviewModal',
+      attributes: {
+        origin,
+        size: context.size
+      }
+    });
+    analytics.ui.renderSuccessEvent({
+      status: 'resolved',
+      display: 'preview'
+    });
+
+    if (onOpen) {
+      onOpen(context);
+    }
+  }, [analytics.screen, analytics.ui, onOpen, origin]);
+  const handleOnOpenFailed = useCallback((error, errorInfo) => {
+    analytics.ui.renderFailedEvent({
+      display: 'preview',
+      error,
+      errorInfo
+    });
+
+    if (onOpenFailed) {
+      onOpenFailed(error, errorInfo);
+    }
+  }, [analytics.ui, onOpenFailed]);
+  const handleOnClose = useCallback(context => {
+    analytics.ui.modalClosedEvent({
+      actionSubjectId: 'embedPreview',
+      attributes: {
+        origin,
+        previewTime: context.duration,
+        size: context.size
+      }
+    });
+
+    if (onClose) {
+      onClose(context);
+    }
+  }, [analytics.ui, onClose, origin]);
+  const handleOnResize = useCallback(context => {
+    analytics.ui.buttonClickedEvent({
+      actionSubjectId: 'embedPreviewResize',
+      attributes: {
+        newSize: context.size,
+        origin,
+        previousSize: getResizeFrom(context.size)
+      }
+    });
+
+    if (onResize) {
+      onResize(context);
+    }
+  }, [analytics.ui, onResize, origin]);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    onClose: handleOnClose,
+    onOpen: handleOnOpen,
+    onOpenFailed: handleOnOpenFailed,
+    onResize: handleOnResize
+  }));
+};
+
+export default withAnalytics;

package/dist/es2019/view/EmbedModal/components/analytics/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/view/EmbedModal/components/size-experiment/index.js

@@ -1,28 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Modal from '../../../common/Modal';
-import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from '../../constants';
+import { EmbedModalSize } from '../../types';
 
 const withSizeExperiment = Component => props => {
   const {
-    featureFlags = {},
-    closeLabel = 'Close Preview'
+    featureFlags = {}
   } = props;
   const {
-    embedModalSize
+    embedModalSize: size
   } = featureFlags; // Experiment
 
-  if (embedModalSize === 'large' || embedModalSize === 'small') {
-    const size = embedModalSize === 'large' ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
+  if (size === EmbedModalSize.Large || size === EmbedModalSize.Small) {
     return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       size: size
     }));
   } // Control
 
 
-  return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
-    closeLabel: closeLabel
-  }));
+  return /*#__PURE__*/React.createElement(Modal, props);
 };
 
 export default withSizeExperiment;

package/dist/es2019/view/EmbedModal/index.js

@@ -1,10 +1,16 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
 import LinkInfo from './components/link-info';
 import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from './constants';
 import EmbedContent from './components/embed-content';
+import { EmbedModalSize } from './types';
 import withErrorBoundary from './components/error-boundary';
 import withSizeExperiment from './components/size-experiment';
+import withAnalytics from './components/analytics';
+
+const toSize = width => width === MAX_MODAL_SIZE ? EmbedModalSize.Large : EmbedModalSize.Small;
+
+const toWidth = size => size === EmbedModalSize.Large ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
 
 const EmbedModal = ({
   download: downloadUrl,
@@ -14,37 +20,64 @@ const EmbedModal = ({
   onClose,
   onDownloadActionClick,
   onOpen,
+  onResize,
   onViewActionClick,
   providerName,
   showModal,
-  size: defaultSize = MIN_MODAL_SIZE,
+  size = EmbedModalSize.Small,
   src,
   testId = 'smart-embed-preview-modal',
   title,
   url
 }) => {
+  const defaultWidth = toWidth(size);
   const [isOpen, setIsOpen] = useState(showModal);
-  const [size, setSize] = useState(defaultSize);
+  const [width, setWidth] = useState(defaultWidth);
+  const openAt = useRef();
+  const handleOnOpenComplete = useCallback(() => {
+    openAt.current = Date.now();
+
+    if (onOpen) {
+      onOpen({
+        size
+      });
+    }
+  }, [onOpen, size]);
   const handleOnClose = useCallback(() => setIsOpen(false), []);
-  const handleOnSizeClick = useCallback(() => {
-    const newSize = size === MIN_MODAL_SIZE ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
-    setSize(newSize);
-  }, [size]);
+  const handleOnCloseComplete = useCallback(() => {
+    if (onClose) {
+      const duration = openAt.current ? Date.now() - openAt.current : undefined;
+      onClose({
+        duration,
+        size: toSize(width)
+      });
+    }
+  }, [onClose, width]);
+  const handleOnResizeClick = useCallback(() => {
+    const newWidth = width === MIN_MODAL_SIZE ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
+    setWidth(newWidth);
+
+    if (onResize) {
+      onResize({
+        size: toSize(newWidth)
+      });
+    }
+  }, [onResize, width]);
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
     height: "100%",
     onClose: handleOnClose,
-    onCloseComplete: onClose,
-    onOpenComplete: onOpen,
+    onCloseComplete: handleOnCloseComplete,
+    onOpenComplete: handleOnOpenComplete,
     testId: testId,
-    width: size
+    width: width
   }, /*#__PURE__*/React.createElement(LinkInfo, {
     downloadUrl: downloadUrl,
     icon: icon,
     providerName: providerName,
     onViewButtonClick: onViewActionClick,
     onDownloadButtonClick: onDownloadActionClick,
-    onResizeButtonClick: handleOnSizeClick,
-    size: size,
+    onResizeButtonClick: handleOnResizeClick,
+    size: width,
     title: title,
     testId: testId,
     url: url
@@ -56,4 +89,4 @@ const EmbedModal = ({
   }))));
 };
 
-export default withSizeExperiment(withErrorBoundary(EmbedModal));
+export default withSizeExperiment(withAnalytics(withErrorBoundary(EmbedModal)));

package/dist/es2019/view/EmbedModal/types.js

@@ -1 +1,6 @@
-export {};
+export let EmbedModalSize;
+
+(function (EmbedModalSize) {
+  EmbedModalSize["Large"] = "large";
+  EmbedModalSize["Small"] = "small";
+})(EmbedModalSize || (EmbedModalSize = {}));

package/dist/es2019/view/HoverCard/components/HoverCardComponent.js

@@ -91,7 +91,8 @@ export const HoverCardComponent = ({
   const linkActions = useSmartLinkActions({
     url,
     appearance: SMART_CARD_ANALYTICS_DISPLAY,
-    analyticsHandler
+    analyticsHandler,
+    origin: 'smartLinkPreviewHoverCard'
   });
   const onActionClick = useCallback(actionId => {
     if (actionId === 'preview-content') {