@atlaskit/smart-card 22.0.0 → 22.1.2

package/dist/esm/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 var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
@@ -27,7 +27,6 @@ export var BlockCard = function BlockCard(_ref) {
       handleAuthorize = _ref.handleAuthorize,
       handleErrorRetry = _ref.handleErrorRetry,
       handleFrameClick = _ref.handleFrameClick,
-      handleAnalytics = _ref.handleAnalytics,
       handleInvoke = _ref.handleInvoke,
       renderers = _ref.renderers,
       isSelected = _ref.isSelected,
@@ -35,7 +34,8 @@ export var BlockCard = function BlockCard(_ref) {
       onError = _ref.onError,
       testId = _ref.testId,
       showActions = _ref.showActions,
-      platform = _ref.platform;
+      platform = _ref.platform,
+      analytics = _ref.analytics;
   // Actions do not have access to the react tree, so we need to obtain
   // feature flags here where we still can access SmartLinkContext context
   // and pass the flags down to the extractor. See PreviewAction.tsx for details.
@@ -46,8 +46,9 @@ export var BlockCard = function BlockCard(_ref) {
   var data = details && details.data || getEmptyJsonLd();
   var meta = details && details.meta;
   var extractorOpts = {
+    analytics: analytics,
+    origin: 'smartLinkCard',
     featureFlags: featureFlags,
-    handleAnalytics: handleAnalytics,
     handleInvoke: handleInvoke,
     extensionKey: getExtensionKey(details)
   };

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

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

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

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

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

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback } from 'react';
+import { EmbedModalSize } from '../../types';
+
+var getResizeFrom = function getResizeFrom(size) {
+  return size === EmbedModalSize.Small ? EmbedModalSize.Large : EmbedModalSize.Small;
+};
+
+var withAnalytics = function withAnalytics(Component) {
+  return function (props) {
+    var analytics = props.analytics,
+        onClose = props.onClose,
+        onOpen = props.onOpen,
+        onOpenFailed = props.onOpenFailed,
+        onResize = props.onResize,
+        origin = props.origin;
+    var handleOnOpen = useCallback(function (context) {
+      analytics.screen.modalViewedEvent({
+        name: 'embedPreviewModal',
+        attributes: {
+          origin: origin,
+          size: context.size
+        }
+      });
+      analytics.ui.renderSuccessEvent({
+        status: 'resolved',
+        display: 'preview'
+      });
+
+      if (onOpen) {
+        onOpen(context);
+      }
+    }, [analytics.screen, analytics.ui, onOpen, origin]);
+    var handleOnOpenFailed = useCallback(function (error, errorInfo) {
+      analytics.ui.renderFailedEvent({
+        display: 'preview',
+        error: error,
+        errorInfo: errorInfo
+      });
+
+      if (onOpenFailed) {
+        onOpenFailed(error, errorInfo);
+      }
+    }, [analytics.ui, onOpenFailed]);
+    var handleOnClose = useCallback(function (context) {
+      analytics.ui.modalClosedEvent({
+        actionSubjectId: 'embedPreview',
+        attributes: {
+          origin: origin,
+          previewTime: context.duration,
+          size: context.size
+        }
+      });
+
+      if (onClose) {
+        onClose(context);
+      }
+    }, [analytics.ui, onClose, origin]);
+    var handleOnResize = useCallback(function (context) {
+      analytics.ui.buttonClickedEvent({
+        actionSubjectId: 'embedPreviewResize',
+        attributes: {
+          newSize: context.size,
+          origin: 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/esm/view/EmbedModal/components/analytics/types.js

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

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

@@ -1,27 +1,22 @@
 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';
 
 var withSizeExperiment = function withSizeExperiment(Component) {
   return function (props) {
     var _props$featureFlags = props.featureFlags,
-        featureFlags = _props$featureFlags === void 0 ? {} : _props$featureFlags,
-        _props$closeLabel = props.closeLabel,
-        closeLabel = _props$closeLabel === void 0 ? 'Close Preview' : _props$closeLabel;
-    var embedModalSize = featureFlags.embedModalSize; // Experiment
+        featureFlags = _props$featureFlags === void 0 ? {} : _props$featureFlags;
+    var size = featureFlags.embedModalSize; // Experiment
 
-    if (embedModalSize === 'large' || embedModalSize === 'small') {
-      var 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);
   };
 };
 

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

@@ -1,11 +1,21 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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';
+
+var toSize = function toSize(width) {
+  return width === MAX_MODAL_SIZE ? EmbedModalSize.Large : EmbedModalSize.Small;
+};
+
+var toWidth = function toWidth(size) {
+  return size === EmbedModalSize.Large ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
+};
 
 var EmbedModal = function EmbedModal(_ref) {
   var downloadUrl = _ref.download,
@@ -16,49 +26,76 @@ var EmbedModal = function EmbedModal(_ref) {
       onClose = _ref.onClose,
       onDownloadActionClick = _ref.onDownloadActionClick,
       onOpen = _ref.onOpen,
+      onResize = _ref.onResize,
       onViewActionClick = _ref.onViewActionClick,
       providerName = _ref.providerName,
       showModal = _ref.showModal,
       _ref$size = _ref.size,
-      defaultSize = _ref$size === void 0 ? MIN_MODAL_SIZE : _ref$size,
+      size = _ref$size === void 0 ? EmbedModalSize.Small : _ref$size,
       src = _ref.src,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'smart-embed-preview-modal' : _ref$testId,
       title = _ref.title,
       url = _ref.url;
+  var defaultWidth = toWidth(size);
 
   var _useState = useState(showModal),
       _useState2 = _slicedToArray(_useState, 2),
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
-  var _useState3 = useState(defaultSize),
+  var _useState3 = useState(defaultWidth),
       _useState4 = _slicedToArray(_useState3, 2),
-      size = _useState4[0],
-      setSize = _useState4[1];
+      width = _useState4[0],
+      setWidth = _useState4[1];
+
+  var openAt = useRef();
+  var handleOnOpenComplete = useCallback(function () {
+    openAt.current = Date.now();
 
+    if (onOpen) {
+      onOpen({
+        size: size
+      });
+    }
+  }, [onOpen, size]);
   var handleOnClose = useCallback(function () {
     return setIsOpen(false);
   }, []);
-  var handleOnSizeClick = useCallback(function () {
-    var newSize = size === MIN_MODAL_SIZE ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
-    setSize(newSize);
-  }, [size]);
+  var handleOnCloseComplete = useCallback(function () {
+    if (onClose) {
+      var duration = openAt.current ? Date.now() - openAt.current : undefined;
+      onClose({
+        duration: duration,
+        size: toSize(width)
+      });
+    }
+  }, [onClose, width]);
+  var handleOnResizeClick = useCallback(function () {
+    var 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
@@ -70,4 +107,4 @@ var EmbedModal = function EmbedModal(_ref) {
   }))));
 };
 
-export default withSizeExperiment(withErrorBoundary(EmbedModal));
+export default withSizeExperiment(withAnalytics(withErrorBoundary(EmbedModal)));

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

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

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

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

package/dist/esm/view/InlineCard/IconAndTitleLayout/styled.js

@@ -21,9 +21,9 @@ export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _t
 
 export var IconTitleWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: pre-wrap;\n  word-break: break-all;\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
 
-export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
+export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: 4px;\n  }\n"]))); // TODO: Replace overrides with proper AtlasKit solution.
 
-export var LozengeBlockWrapper = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"])));
+export var LozengeBlockWrapper = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > span {\n    margin-left: 4px;\n  }\n"])));
 export var RightIconPositionWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: 2px;\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"]))); // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.

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

@@ -25,10 +25,12 @@ manually passed to your custom components.
 
 For a complete guide on customization using the new compositional API, refer to the docs at
 https://atlassian.design/components/modal-dialog/examples#customizing-modal-dialog. */
-import React, { useState } from 'react';
-import ModalDialog, { ModalTransition, ModalBody } from '@atlaskit/modal-dialog';
+import React, { useCallback, useRef, useState } from 'react';
+import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
 import { Header } from './ModalHeader';
 import { getIframeSandboxAttribute } from '../../utils';
+import withAnalytics from '../EmbedModal/components/analytics';
+import { EmbedModalSize } from '../EmbedModal/types';
 var iframeStyles = {
   width: "100%",
   height: 'calc(100vh - 248px)'
@@ -72,7 +74,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,
@@ -88,16 +91,35 @@ var Modal = function Modal(_ref) {
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
+  var openAt = useRef();
+  var handleOnOpenComplete = useCallback(function () {
+    openAt.current = Date.now();
+
+    if (onOpen) {
+      onOpen({
+        size: EmbedModalSize.Small
+      });
+    }
+  }, [onOpen]);
+  var handleOnCloseComplete = useCallback(function () {
+    if (onClose) {
+      var duration = openAt.current ? Date.now() - openAt.current : undefined;
+      onClose({
+        duration: duration,
+        size: EmbedModalSize.Small
+      });
+    }
+  }, [onClose]);
   var sandbox = getIframeSandboxAttribute(isTrusted);
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
     height: "100%",
     width: "large",
     testId: testId,
-    onOpenComplete: onOpen,
+    onOpenComplete: handleOnOpenComplete,
     onClose: function onClose() {
       setIsOpen(false);
     },
-    onCloseComplete: onClose
+    onCloseComplete: handleOnCloseComplete
   }, /*#__PURE__*/React.createElement(Header, {
     providerName: providerName,
     icon: icon,
@@ -123,4 +145,4 @@ var Modal = function Modal(_ref) {
   }))));
 };
 
-export default ModalWithErrorBoundary;
+export default withAnalytics(ModalWithErrorBoundary);

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

@@ -75,7 +75,7 @@ export var Header = function Header(_ref) {
     testId: "preview-view-action",
     iconAfter: jsx(ShortcutIcon, {
       size: "small",
-      label: "go to source"
+      label: ""
     }),
     onClick: onViewActionClick
   }, providerName ? jsx(F, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal)), jsx(Button, {
@@ -83,6 +83,7 @@ export var Header = function Header(_ref) {
     iconBefore: jsx(EditorCloseIcon, {
       label: label
     }),
-    onClick: onClose
+    onClick: onClose,
+    testId: "preview-close-button"
   }))));
 };

package/dist/types/extractors/block/types.d.ts

@@ -1,10 +1,12 @@
 import { LinkingPlatformFeatureFlags } from '@atlaskit/linking-common';
 import { InvokeHandler } from '../../model/invoke-handler';
-import { AnalyticsHandler } from '../../utils/types';
+import { AnalyticsFacade } from '../../state/analytics';
 import { CardInnerAppearance } from '../../view/Card/types';
+import { AnalyticsOrigin } from '../../utils/types';
 export interface ExtractBlockOpts {
     handleInvoke: InvokeHandler;
-    handleAnalytics: AnalyticsHandler;
+    analytics: AnalyticsFacade;
+    origin?: AnalyticsOrigin;
     extensionKey?: string;
     featureFlags?: Partial<LinkingPlatformFeatureFlags>;
     source?: CardInnerAppearance;

package/dist/types/extractors/common/actions/extractPreviewAction.d.ts

@@ -1,7 +1,9 @@
 import { JsonLd } from 'json-ld-types';
-import { LinkingPlatformFeatureFlags } from '@atlaskit/linking-common';
-import { InvokeHandler } from '../../../model/invoke-handler';
-import { CardInnerAppearance } from '../../../view/Card/types';
-import { AnalyticsHandler } from '../../../utils/types';
+import { CardPlatform } from '../../../view/Card/types';
 import { BlockCardResolvedViewProps } from '../../../view/BlockCard';
-export declare const extractPreviewAction: (extensionKey: string | undefined, viewProps: BlockCardResolvedViewProps, jsonLd: JsonLd.Data.BaseData, handleInvoke: InvokeHandler, handleAnalytics: AnalyticsHandler, testId?: string | undefined, platform?: JsonLd.Primitives.Platforms | undefined, source?: CardInnerAppearance | undefined, featureFlags?: Partial<LinkingPlatformFeatureFlags> | undefined) => import("../../../view/BlockCard/components/Action").ActionProps | undefined;
+import { ExtractBlockOpts } from '../../block/types';
+export declare const extractPreviewAction: ({ extensionKey, viewProps, jsonLd, handleInvoke, testId, platform, origin, source, featureFlags, analytics, }: ExtractBlockOpts & {
+    viewProps: BlockCardResolvedViewProps;
+    jsonLd: JsonLd.Data.BaseData;
+    platform?: JsonLd.Primitives.Platforms | undefined;
+}) => import("../../../view/BlockCard/components/Action").ActionProps | undefined;

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

@@ -1,4 +1,4 @@
-import { AnalyticsHandler } from '../../utils/types';
+import { AnalyticsHandler, AnalyticsName, AnalyticsPayload } from '../../utils/types';
 import { ConnectFailedEventProps, ConnectSucceededEventProps, InstrumentEventProps, InvokeFailedEventProps, InvokeSucceededEventProps, ScreenAuthPopupEventProps, TrackAppAccountConnectedProps, UiActionClickedEventProps, UiAuthAlternateAccountEventProps, UiAuthEventProps, UiCardClickedEventProps, UiClosedAuthEventProps, UiHoverCardDismissedEventProps, UiHoverCardOpenLinkClickedEventProps, UiHoverCardViewedEventProps, UiRenderFailedEventProps, UiRenderSuccessEventProps } from '../../utils/analytics/types';
 /**
  * This hook provides usage of Smart Link analytics outside of the Card component.
@@ -29,6 +29,14 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @returns
          */
         authAlternateAccountEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: UiAuthAlternateAccountEventProps) => void;
+        /**
+         * This fires an event that represents when a user
+         * click a button.
+         * @param data A partial analytics event payload
+         */
+        buttonClickedEvent: (data: Partial<AnalyticsPayload> & {
+            actionSubjectId: Required<string>;
+        }) => void;
         /**
          * This fires an event that represents when a user clicks on a Smart Link.
          * @param id The unique ID for this Smart Link.
@@ -70,6 +78,13 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @returns
          */
         closedAuthEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: UiClosedAuthEventProps) => void;
+        /**
+         * This fires an event that represents when a user close a modal.
+         * @param data A partial analytics event payload
+         */
+        modalClosedEvent: (data: Partial<AnalyticsPayload> & {
+            actionSubjectId: Required<string>;
+        }) => void;
         /**
          * This fires an event that represents when a Smart Link was rendered successfully.
          * Note: this fires even if the Smart Link request errored out.
@@ -168,6 +183,13 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @returns
          */
         authPopupEvent: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: ScreenAuthPopupEventProps) => void;
+        /**
+         * This fires an event that represents when a user view a modal.
+         * @param data A partial analytics event payload
+         */
+        modalViewedEvent: (data: Partial<AnalyticsPayload> & {
+            name: Extract<AnalyticsName, 'embedPreviewModal'>;
+        }) => void;
     };
 };
 export declare type AnalyticsFacade = ReturnType<typeof useSmartLinkAnalytics>;

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

@@ -13,10 +13,16 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
         ui: {
             authEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiAuthEventProps) => void;
             authAlternateAccountEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiAuthAlternateAccountEventProps) => void;
+            buttonClickedEvent: (data: Partial<import("../../utils/types").AnalyticsPayload> & {
+                actionSubjectId: string;
+            }) => void;
             cardClickedEvent: ({ id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId, }: import("../../utils/analytics/types").UiCardClickedEventProps) => 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;
+            modalClosedEvent: (data: Partial<import("../../utils/types").AnalyticsPayload> & {
+                actionSubjectId: string;
+            }) => void;
             renderSuccessEvent: ({ display, status, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiRenderSuccessEventProps) => void;
             renderFailedEvent: ({ display, id, error, errorInfo, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiRenderFailedEventProps) => void;
             hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiHoverCardViewedEventProps) => void;
@@ -34,6 +40,9 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
         };
         screen: {
             authPopupEvent: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").CommonEventProps) => void;
+            modalViewedEvent: (data: Partial<import("../../utils/types").AnalyticsPayload> & {
+                name: "embedPreviewModal";
+            }) => void;
         };
     };
     renderers: import("@atlaskit/link-provider").CardProviderRenderers | undefined;

package/dist/types/state/hooks-external/useSmartLinkActions.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { JsonLd } from 'json-ld-types';
-import type { AnalyticsHandler } from '../../utils/types';
+import type { AnalyticsHandler, AnalyticsOrigin } from '../../utils/types';
 import type { CardInnerAppearance } from '../../view/Card/types';
 export interface LinkAction {
     /**
@@ -41,5 +41,9 @@ export interface UseSmartLinkActionsOpts {
      * @default 'web'
      */
     platform?: JsonLd.Primitives.Platforms;
+    /**
+     * Smart link origin that the action being invoked from.
+     */
+    origin?: AnalyticsOrigin;
 }
-export declare function useSmartLinkActions({ url, appearance, analyticsHandler, platform, }: UseSmartLinkActionsOpts): LinkAction[];
+export declare function useSmartLinkActions({ url, appearance, analyticsHandler, platform, origin, }: UseSmartLinkActionsOpts): LinkAction[];

package/dist/types/utils/mocks.d.ts

@@ -20,7 +20,55 @@ export declare const mocks: {
             status: string;
         };
     };
+    analytics: {
+        status: string;
+        details: {
+            meta: {
+                definitionId: string;
+                key: string;
+                resourceType: string;
+                subproduct: string;
+                product: string;
+            };
+        };
+    };
 };
 export declare const fakeResponse: () => Promise<JsonLd.Response<JsonLd.Data.BaseData>>;
 export declare const fakeFactory: any;
 export declare const waitFor: (time?: number) => Promise<unknown>;
+export declare const mockAnalytics: {
+    ui: {
+        authEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").UiAuthEventProps) => void;
+        authAlternateAccountEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").UiAuthAlternateAccountEventProps) => void;
+        buttonClickedEvent: (data: Partial<import("./types").AnalyticsPayload> & {
+            actionSubjectId: string;
+        }) => void;
+        cardClickedEvent: ({ id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId, }: import("./analytics/types").UiCardClickedEventProps) => void;
+        actionClickedEvent: ({ id, actionType, display, invokeType, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").UiActionClickedEventProps) => void;
+        hoverCardOpenLinkClickedEvent: ({ previewDisplay, definitionId, extensionKey, destinationProduct, destinationSubproduct, location, previewInvokeMethod, }: import("./analytics/types").UiHoverCardOpenLinkClickedEventProps) => void;
+        closedAuthEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").UiClosedAuthEventProps) => void;
+        modalClosedEvent: (data: Partial<import("./types").AnalyticsPayload> & {
+            actionSubjectId: string;
+        }) => void;
+        renderSuccessEvent: ({ display, status, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").UiRenderSuccessEventProps) => void;
+        renderFailedEvent: ({ display, id, error, errorInfo, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").UiRenderFailedEventProps) => void;
+        hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").UiHoverCardViewedEventProps) => void;
+        hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").UiHoverCardDismissedEventProps) => void;
+    };
+    operational: {
+        invokeSucceededEvent: ({ id, actionType, display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").InvokeSucceededEventProps) => void;
+        invokeFailedEvent: ({ id, actionType, display, reason, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").InvokeFailedEventProps) => void;
+        connectSucceededEvent: ({ id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").ConnectSucceededEventProps) => void;
+        connectFailedEvent: ({ id, reason, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").ConnectFailedEventProps) => void;
+        instrument: ({ id, status, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, error, }: import("./analytics/types").InstrumentEventProps) => void;
+    };
+    track: {
+        appAccountConnected: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").CommonEventProps) => void;
+    };
+    screen: {
+        authPopupEvent: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("./analytics/types").CommonEventProps) => void;
+        modalViewedEvent: (data: Partial<import("./types").AnalyticsPayload> & {
+            name: "embedPreviewModal";
+        }) => void;
+    };
+};

package/dist/types/utils/types.d.ts

@@ -1,7 +1,9 @@
 import { GasPayload } from '@atlaskit/analytics-gas-types';
 import { CardInnerAppearance } from '../view/Card/types';
 export declare type AnalyticsAction = 'resolved' | 'unresolved' | 'connectSucceeded' | 'connectFailed' | 'connected' | 'clicked' | 'closed' | 'renderFailed' | 'renderWithStatus' | 'renderSuccess' | 'inserted' | 'viewed' | 'dismissed' | 'created';
-export declare type AnalyticsActionSubject = 'smartLink' | 'smartLinkAction' | 'applicationAccount' | 'button' | 'consentModal' | 'hoverCard';
+export declare type AnalyticsActionSubject = 'smartLink' | 'smartLinkAction' | 'applicationAccount' | 'button' | 'consentModal' | 'hoverCard' | 'modal' | 'embedPreviewModal';
+export declare type AnalyticsName = 'embedPreviewModal';
+export declare type AnalyticsOrigin = 'smartLinkCard' | 'smartLinkEmbed' | 'smartLinkInline' | 'smartLinkPreviewHoverCard';
 export declare type AnalyticsPayload = GasPayload & {
     action?: AnalyticsAction;
     actionSubject: AnalyticsActionSubject;