@atlaskit/smart-card 21.2.0 → 22.1.0

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

@@ -0,0 +1,53 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject;
+
+import React, { useCallback, useState, useRef } from 'react';
+import { css } from '@emotion/core';
+import extractPreview from '../../../extractors/flexible/extract-preview';
+import { PreviewBlock, SnippetBlock } from '../../FlexibleCard/components/blocks';
+import { getTransitionStyles } from '../styled';
+
+var SnippetOrPreview = function SnippetOrPreview(_ref) {
+  var data = _ref.data,
+      snippetHeight = _ref.snippetHeight;
+  var transitionStarted = useRef(false);
+  var previewBlockRef = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showSnippet = _useState2[0],
+      setShowSnippet = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      previewCss = _useState4[0],
+      setPreviewCss = _useState4[1]; // Set Preview to a fixed height to enable transitions
+
+
+  var onPreviewRender = useCallback(function () {
+    var _previewBlockRef$curr;
+
+    previewBlockRef.current && setPreviewCss(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        height: ", "px;\n      "])), (_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
+  }, []); // On error set Preview to Snippet height with transition
+
+  var onPreviewError = useCallback(function () {
+    if (transitionStarted.current === false) {
+      setPreviewCss(getTransitionStyles(snippetHeight));
+      transitionStarted.current = true;
+    }
+  }, [snippetHeight]);
+  var onPreviewTransitionEnd = useCallback(function () {
+    setShowSnippet(true);
+  }, []);
+  return !showSnippet && data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, {
+    onError: onPreviewError,
+    overrideCss: previewCss,
+    onTransitionEnd: onPreviewTransitionEnd,
+    blockRef: previewBlockRef,
+    onRender: onPreviewRender
+  }) : /*#__PURE__*/React.createElement(SnippetBlock, null);
+};
+
+export default SnippetOrPreview;

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

@@ -20,7 +20,12 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   }, [createAnalyticsEvent]);
   var analytics = useSmartLinkAnalytics(url, analyticsHandler, id);
   var onError = useCallback(function (error, info) {
-    analytics.ui.renderFailedEvent(SMART_CARD_ANALYTICS_DISPLAY, id, error, info);
+    analytics.ui.renderFailedEvent({
+      display: SMART_CARD_ANALYTICS_DISPLAY,
+      id: id,
+      error: error,
+      errorInfo: info
+    });
   }, [analytics.ui, id]);
   return jsx(ErrorBoundary, {
     fallback: children,

package/dist/esm/view/HoverCard/styled.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 import { css } from '@emotion/core';
 import { loadingPlaceholderClassName } from '../../index';
@@ -23,4 +23,8 @@ export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTe
 export var metadataBlockCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n"])), separatorCss, elementGap, elementGap);
 export var footerBlockCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-top: 0.25rem;\n"])));
 export var loadingViewContainer = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-export var skeletonContainer = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
+export var skeletonContainer = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
+export var hiddenSnippetStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  visibility: hidden;\n  position: absolute;\n"])));
+export var getTransitionStyles = function getTransitionStyles(snippetHeight) {
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
+};

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/types.d.ts

@@ -0,0 +1,9 @@
+import { DestinationSubproduct, DestinationProduct } from '../../utils/analytics/types';
+export interface CommonEventProps {
+    definitionId?: string;
+    extensionKey?: string;
+    resourceType?: string;
+    destinationSubproduct?: DestinationSubproduct | string;
+    destinationProduct?: DestinationProduct | string;
+    location?: string;
+}

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

@@ -1,10 +1,5 @@
-import { ErrorInfo } from 'react';
-import { CardType, APIError } from '@atlaskit/linking-common';
-import { AnalyticsHandler } from '../../utils/types';
-import { CardInnerAppearance } from '../../view/Card/types';
-import { PreviewDisplay, PreviewInvokeMethod } from '../../view/HoverCard/types';
-import { InvokeType } from '../../model/invoke-opts';
-import { DestinationProduct, DestinationSubproduct } from '../../utils/analytics/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.
  * Can be provided to Card via the analyticsEvents prop to change the analytics events.
@@ -24,7 +19,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param extensionKey The extensionKey of the Smart Link resovler invoked.
          * @returns
          */
-        authEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+        authEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: UiAuthEventProps) => void;
         /**
          * This fires an event that represents when a user clicks on the authentication
          * call to action with a forbidden authenticated account. (i.e. Try another account).
@@ -33,7 +28,15 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param extensionKey The extensionKey of the Smart Link resovler invoked.
          * @returns
          */
-        authAlternateAccountEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+        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.
@@ -46,7 +49,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param destinationProduct The product the Smart Link is linked to.
          * @returns
          */
-        cardClickedEvent: (id: string | undefined, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: DestinationProduct | string | undefined, destinationSubproduct?: DestinationSubproduct | string | undefined, actionSubjectId?: string | undefined) => void;
+        cardClickedEvent: ({ id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId, }: UiCardClickedEventProps) => 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.
@@ -57,7 +60,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param invokeType Whether the action invoked made a call to a server.
          * @returns
          */
-        actionClickedEvent: (id: string | undefined, extensionKey: string | undefined, actionType: string, display: CardInnerAppearance, invokeType: InvokeType) => void;
+        actionClickedEvent: ({ id, actionType, display, invokeType, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: UiActionClickedEventProps) => void;
         /**
          * This fires an event that represents when a user clicks on a hover preview's "navigate to link" button.
          * https://product-fabric.atlassian.net/wiki/spaces/EM/pages/3206743323/Analytics+Metrics+-+Hover+Previews
@@ -66,7 +69,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param extensionKey The extensionKey of the Smart Link resovler invoked.
          * @param previewInvokeMethod How the preview was triggered.
          */
-        hoverCardOpenLinkClickedEvent: (previewDisplay: PreviewDisplay, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: PreviewInvokeMethod | undefined) => void;
+        hoverCardOpenLinkClickedEvent: ({ previewDisplay, definitionId, extensionKey, destinationProduct, destinationSubproduct, location, previewInvokeMethod, }: UiHoverCardOpenLinkClickedEventProps) => void;
         /**
          * This fires an event that represents when a user closed the authentication window without authenticating after opening it.
          * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
@@ -74,7 +77,14 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param extensionKey The extensionKey of the Smart Link resovler invoked.
          * @returns
          */
-        closedAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+        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.
@@ -83,7 +93,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param definitionId The definitionId of the Smart Link resolver invoked.
          * @param extensionKey The extensionKey of the Smart Link resovler invoked.
          */
-        renderSuccessEvent: (display: CardInnerAppearance, status: CardType, id?: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+        renderSuccessEvent: ({ display, status, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: UiRenderSuccessEventProps) => void;
         /**
          * This fires an event that represents when a Smart Link renders unsuccessfuly.
          * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
@@ -91,7 +101,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param error: An error representing why the Smart Link render failed.
          * @param errorInfo: Additional details about the error including the stack trace.
          */
-        renderFailedEvent: (display: CardInnerAppearance, id: string | undefined, error: Error, errorInfo: ErrorInfo) => void;
+        renderFailedEvent: ({ display, id, error, errorInfo, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: UiRenderFailedEventProps) => void;
         /**
          * This fires an event that represents a hover preview being opened.
          * @param hoverDisplay Whether the hover preview was displayed as a card or embed.
@@ -100,7 +110,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param previewInvokeMethod How the preview was triggered.
          * @returns
          */
-        hoverCardViewedEvent: (previewDisplay: PreviewDisplay, previewInvokeMethod?: PreviewInvokeMethod | undefined, id?: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+        hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: UiHoverCardViewedEventProps) => void;
         /**
          * This fires an event that represents a hover preview being dismissed.
          * @param hoverDisplay Whether the hover preview was displayed as a card or embed.
@@ -110,7 +120,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param previewInvokeMethod How the preview was triggered.
          * @returns
          */
-        hoverCardDismissedEvent: (previewDisplay: PreviewDisplay, hoverTime: number, previewInvokeMethod?: PreviewInvokeMethod | undefined, id?: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+        hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: UiHoverCardDismissedEventProps) => void;
     };
     operational: {
         /**
@@ -120,7 +130,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param actionType The type of action invoked, e.g. PreviewAction
          * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
          */
-        invokeSucceededEvent: (id: string | undefined, extensionKey: string | undefined, actionType: string, display: CardInnerAppearance) => void;
+        invokeSucceededEvent: ({ id, actionType, display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: InvokeSucceededEventProps) => void;
         /**
          * This fires an event that represents an action being unsuccessfully invoked.
          * @param id The unique ID for this Smart Link.
@@ -129,14 +139,14 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
          * @param reason The reason the invocation failed.
          */
-        invokeFailedEvent: (id: string | undefined, providerKey: string | undefined, actionType: string, display: CardInnerAppearance, reason: string) => void;
+        invokeFailedEvent: ({ id, actionType, display, reason, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: InvokeFailedEventProps) => void;
         /**
          * This fires an event that represents an account successfully being connected via a Smart Link.
          * @param id The unique ID for this Smart Link.
          * @param definitionId The definitionId of the Smart Link resolver invoked.
          * @param extensionKey The extensionKey of the Smart Link resovler invoked.
          */
-        connectSucceededEvent: (id?: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+        connectSucceededEvent: ({ id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: ConnectSucceededEventProps) => void;
         /**
          * This fires an event that represents an account unsuccessfully being connected.
          * @param id The unique ID for this Smart Link.
@@ -144,7 +154,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param extensionKey The extensionKey of the Smart Link resovler invoked.
          * @param reason The reason why the Smart Link connect account failed.
          */
-        connectFailedEvent: (id?: string, definitionId?: string | undefined, extensionKey?: string | undefined, reason?: string | undefined) => void;
+        connectFailedEvent: ({ id, reason, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: ConnectFailedEventProps) => void;
         /**
          * This fires an event which represents a Smart Link request succeeding or failing based on the status.
          * @param id The unique ID for this Smart Link.
@@ -154,7 +164,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param resourceType The type of resource that was invoked. This is provider specific (e.g. File, PullRequest).
          * @param error An error representing why the Smart Link request failed.
          */
-        instrument: (id: string | undefined, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, resourceType?: string | undefined, error?: APIError | undefined) => void;
+        instrument: ({ id, status, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, error, }: InstrumentEventProps) => void;
     };
     track: {
         /**
@@ -163,7 +173,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param extensionKey The extensionKey of the Smart Link resovler invoked.
          * @returns
          */
-        appAccountConnected: (definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+        appAccountConnected: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: TrackAppAccountConnectedProps) => void;
     };
     screen: {
         /**
@@ -172,7 +182,14 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
          * @param extensionKey The extensionKey of the Smart Link resovler invoked.
          * @returns
          */
-        authPopupEvent: (definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+        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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AnalyticsHandler } from '../../utils/types';
 export declare function useSmartLink(id: string, url: string, dispatchAnalytics: AnalyticsHandler): {
     state: import("@atlaskit/linking-common").CardState;
@@ -12,29 +11,38 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
     config: (import("@atlaskit/link-provider").CardProviderCacheOpts & import("@atlaskit/link-provider").CardAuthFlowOpts) | undefined;
     analytics: {
         ui: {
-            authEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
-            authAlternateAccountEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
-            cardClickedEvent: (id: string | undefined, display: import("../../view/Card/types").CardInnerAppearance, status: import("@atlaskit/linking-common/types").CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined, destinationSubproduct?: string | undefined, actionSubjectId?: string | undefined) => void;
-            actionClickedEvent: (id: string | undefined, extensionKey: string | undefined, actionType: string, display: import("../../view/Card/types").CardInnerAppearance, invokeType: import("../../model/invoke-opts").InvokeType) => void;
-            hoverCardOpenLinkClickedEvent: (previewDisplay: import("../../view/HoverCard/types").PreviewDisplay, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: import("../../view/HoverCard/types").PreviewInvokeMethod | undefined) => void;
-            closedAuthEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
-            renderSuccessEvent: (display: import("../../view/Card/types").CardInnerAppearance, status: import("@atlaskit/linking-common/types").CardType, id?: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
-            renderFailedEvent: (display: import("../../view/Card/types").CardInnerAppearance, id: string | undefined, error: Error, errorInfo: import("react").ErrorInfo) => void;
-            hoverCardViewedEvent: (previewDisplay: import("../../view/HoverCard/types").PreviewDisplay, previewInvokeMethod?: import("../../view/HoverCard/types").PreviewInvokeMethod | undefined, id?: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
-            hoverCardDismissedEvent: (previewDisplay: import("../../view/HoverCard/types").PreviewDisplay, hoverTime: number, previewInvokeMethod?: import("../../view/HoverCard/types").PreviewInvokeMethod | undefined, id?: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+            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;
+            hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").UiHoverCardDismissedEventProps) => void;
         };
         operational: {
-            invokeSucceededEvent: (id: string | undefined, extensionKey: string | undefined, actionType: string, display: import("../../view/Card/types").CardInnerAppearance) => void;
-            invokeFailedEvent: (id: string | undefined, providerKey: string | undefined, actionType: string, display: import("../../view/Card/types").CardInnerAppearance, reason: string) => void;
-            connectSucceededEvent: (id?: string, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
-            connectFailedEvent: (id?: string, definitionId?: string | undefined, extensionKey?: string | undefined, reason?: string | undefined) => void;
-            instrument: (id: string | undefined, status: import("@atlaskit/linking-common/types").CardType, definitionId?: string | undefined, extensionKey?: string | undefined, resourceType?: string | undefined, error?: import("@atlaskit/linking-common").APIError | undefined) => void;
+            invokeSucceededEvent: ({ id, actionType, display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").InvokeSucceededEventProps) => void;
+            invokeFailedEvent: ({ id, actionType, display, reason, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").InvokeFailedEventProps) => void;
+            connectSucceededEvent: ({ id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").ConnectSucceededEventProps) => void;
+            connectFailedEvent: ({ id, reason, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").ConnectFailedEventProps) => void;
+            instrument: ({ id, status, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, error, }: import("../../utils/analytics/types").InstrumentEventProps) => void;
         };
         track: {
-            appAccountConnected: (definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+            appAccountConnected: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../utils/analytics/types").CommonEventProps) => void;
         };
         screen: {
-            authPopupEvent: (definitionId?: string | undefined, extensionKey?: string | undefined) => void;
+            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/analytics/analytics.d.ts

@@ -1,9 +1,7 @@
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { APIError, CardType } from '@atlaskit/linking-common';
 import { AnalyticsPayload } from '../types';
-import { ErrorInfo } from 'react';
 import { CardInnerAppearance } from '../../view/Card/types';
-import { PreviewDisplay, PreviewInvokeMethod } from '../../view/HoverCard/types';
+import { ConnectFailedEventProps, ConnectSucceededEventProps, InvokeFailedEventProps, InvokeSucceededEventProps, ResolvedEventProps, ScreenAuthPopupEventProps, TrackAppAccountConnectedProps, UiActionClickedEventProps, UiAuthAlternateAccountEventProps, UiAuthEventProps, UiCardClickedEventProps, UiClosedAuthEventProps, UiHoverCardDismissedEventProps, UiHoverCardOpenLinkClickedEventProps, UiHoverCardViewedEventProps, UiRenderFailedEventProps, UiRenderSuccessEventProps, UnresolvedEventProps } from './types';
 export declare const ANALYTICS_CHANNEL = "media";
 export declare const context: {
     componentName: string;
@@ -14,21 +12,21 @@ export declare class SmartLinkEvents {
     insertSmartLink(url: string, type: CardInnerAppearance, createAnalyticsEvent?: CreateUIAnalyticsEvent): void;
 }
 export declare const fireSmartLinkEvent: (payload: AnalyticsPayload, createAnalyticsEvent?: CreateUIAnalyticsEvent | undefined) => void;
-export declare const resolvedEvent: (id: string, definitionId?: string | undefined, extensionKey?: string | undefined, resourceType?: string | undefined) => AnalyticsPayload;
-export declare const unresolvedEvent: (id: string, status: string, definitionId?: string | undefined, extensionKey?: string | undefined, resourceType?: string | undefined, error?: APIError | undefined) => AnalyticsPayload;
-export declare const invokeSucceededEvent: (id: string, actionType: string, display: CardInnerAppearance, extensionKey?: string | undefined) => AnalyticsPayload;
-export declare const invokeFailedEvent: (id: string, actionType: string, display: CardInnerAppearance, reason: string, extensionKey?: string | undefined) => AnalyticsPayload;
-export declare const connectSucceededEvent: (definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
-export declare const connectFailedEvent: (definitionId?: string | undefined, extensionKey?: string | undefined, reason?: string | undefined) => AnalyticsPayload;
-export declare const trackAppAccountConnected: (definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
-export declare const uiAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
-export declare const uiAuthAlternateAccountEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
-export declare const uiCardClickedEvent: (id: string, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined, destinationSubproduct?: string | undefined, actionSubjectId?: string | undefined) => AnalyticsPayload;
-export declare const uiActionClickedEvent: (id: string, actionType: string, extensionKey?: string | undefined, display?: CardInnerAppearance | undefined) => AnalyticsPayload;
-export declare const uiClosedAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
-export declare const screenAuthPopupEvent: (definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
-export declare const uiRenderSuccessEvent: (display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
-export declare const uiRenderFailedEvent: (display: CardInnerAppearance, error: Error, errorInfo: ErrorInfo) => AnalyticsPayload;
-export declare const uiHoverCardViewedEvent: (id: string, previewDisplay: PreviewDisplay, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: PreviewInvokeMethod | undefined) => AnalyticsPayload;
-export declare const uiHoverCardDismissedEvent: (id: string, previewDisplay: PreviewDisplay, hoverTime: number, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: PreviewInvokeMethod | undefined) => AnalyticsPayload;
-export declare const uiHoverCardOpenLinkClickedEvent: (id: string, previewDisplay: string, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: PreviewInvokeMethod | undefined) => AnalyticsPayload;
+export declare const resolvedEvent: (props: ResolvedEventProps) => AnalyticsPayload;
+export declare const unresolvedEvent: ({ id, definitionId, extensionKey, resourceType, destinationSubproduct, destinationProduct, error, status, location, }: UnresolvedEventProps) => AnalyticsPayload;
+export declare const invokeSucceededEvent: ({ id, actionType, display, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, }: InvokeSucceededEventProps) => AnalyticsPayload;
+export declare const invokeFailedEvent: ({ id, actionType, display, reason, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, }: InvokeFailedEventProps) => AnalyticsPayload;
+export declare const connectSucceededEvent: ({ definitionId, extensionKey, destinationProduct, destinationSubproduct, location, }: ConnectSucceededEventProps) => AnalyticsPayload;
+export declare const connectFailedEvent: ({ definitionId, extensionKey, destinationProduct, destinationSubproduct, location, reason, }: ConnectFailedEventProps) => AnalyticsPayload;
+export declare const trackAppAccountConnected: ({ definitionId, extensionKey, destinationProduct, destinationSubproduct, location, }: TrackAppAccountConnectedProps) => AnalyticsPayload;
+export declare const uiAuthEvent: ({ definitionId, extensionKey, destinationProduct, destinationSubproduct, location, display, }: UiAuthEventProps) => AnalyticsPayload;
+export declare const uiAuthAlternateAccountEvent: ({ definitionId, extensionKey, destinationProduct, destinationSubproduct, location, display, }: UiAuthAlternateAccountEventProps) => AnalyticsPayload;
+export declare const uiCardClickedEvent: ({ id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId, }: UiCardClickedEventProps) => AnalyticsPayload;
+export declare const uiActionClickedEvent: ({ id, actionType, extensionKey, display, definitionId, destinationProduct, destinationSubproduct, location, }: UiActionClickedEventProps) => AnalyticsPayload;
+export declare const uiClosedAuthEvent: ({ display, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, }: UiClosedAuthEventProps) => AnalyticsPayload;
+export declare const screenAuthPopupEvent: ({ extensionKey, definitionId, destinationProduct, destinationSubproduct, location, }: ScreenAuthPopupEventProps) => AnalyticsPayload;
+export declare const uiRenderSuccessEvent: ({ display, status, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, }: UiRenderSuccessEventProps) => AnalyticsPayload;
+export declare const uiRenderFailedEvent: ({ display, error, errorInfo, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, }: UiRenderFailedEventProps) => AnalyticsPayload;
+export declare const uiHoverCardViewedEvent: ({ id, previewDisplay, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, previewInvokeMethod, }: UiHoverCardViewedEventProps) => AnalyticsPayload;
+export declare const uiHoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, previewInvokeMethod, }: UiHoverCardDismissedEventProps) => AnalyticsPayload;
+export declare const uiHoverCardOpenLinkClickedEvent: ({ id, previewDisplay, extensionKey, definitionId, destinationProduct, destinationSubproduct, location, previewInvokeMethod, }: UiHoverCardOpenLinkClickedEventProps) => AnalyticsPayload;

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

@@ -1,4 +1,4 @@
-import { APIError, CardType } from '@atlaskit/linking-common';
 import { AnalyticsPayload } from '../types';
+import { InstrumentEventProps } from './types';
 export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, } from './analytics';
-export declare const instrumentEvent: (id: string, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, resourceType?: string | undefined, error?: APIError | undefined) => AnalyticsPayload | undefined;
+export declare const instrumentEvent: ({ id, status, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, error, }: InstrumentEventProps) => AnalyticsPayload | undefined;