@atlaskit/smart-card 32.7.0 → 32.7.2

package/dist/es2019/view/BlockCard/views/flexible/unresolved-view/index.js

@@ -26,6 +26,7 @@ const UnresolvedView = ({
   onAuthorize: onAuthorize,
   onClick: onClick,
   onError: onError,
+  origin: "smartLinkCard",
   testId: testId,
   ui: FlexibleCardUiOptions,
   url: url

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

@@ -196,6 +196,7 @@ function Component({
       cardState: cardState,
       onAuthorize: services.length && handleAuthorize || undefined,
       onClick: handleClickWrapper,
+      origin: "smartLinkCard",
       renderers: renderers,
       ui: ui,
       showHoverPreview: showHoverPreview,
@@ -246,17 +247,13 @@ function Component({
         authFlow: config && config.authFlow,
         cardState: state,
         handleAuthorize: services.length && handleAuthorize || undefined,
-        handleErrorRetry: handleRetry,
-        handleInvoke: handleInvoke,
         handleFrameClick: handleClickWrapper,
         analytics: analytics,
         isSelected: isSelected,
         onResolve: onResolve,
         onError: onError,
         testId: testId,
-        actionOptions: actionOptions,
-        platform: platform,
-        enableFlexibleBlockCard: true
+        actionOptions: actionOptions
       });
     case 'embed':
       return /*#__PURE__*/React.createElement(EmbedCard, {

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

@@ -1,9 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useRef, useState } from 'react';
 import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useThemeObserver } from '@atlaskit/tokens';
-import { ActionName, CardDisplay } from '../../constants';
+import { ActionName, CardDisplay, SmartLinkSize } from '../../constants';
 import useInvokeClientAction from '../../state/hooks/use-invoke-client-action';
 import { downloadUrl, getPreviewUrlWithTheme, openUrl } from '../../utils';
+import Icon from '../FlexibleCard/components/elements/icon';
 import withAnalytics from './components/analytics';
 import EmbedContent from './components/embed-content';
 import withErrorBoundary from './components/error-boundary';
@@ -15,11 +18,14 @@ const toWidth = size => size === EmbedModalSize.Large ? MAX_MODAL_SIZE : MIN_MOD
 const EmbedModal = ({
   analytics,
   download,
+  invokeDownloadAction,
   extensionKey,
+  fireEvent,
   icon,
   iframeName,
   isSupportTheming,
   isTrusted = false,
+  linkIcon,
   onClose,
   onOpen,
   onResize,
@@ -29,14 +35,16 @@ const EmbedModal = ({
   src,
   testId = 'smart-embed-preview-modal',
   title,
-  url
+  url,
+  invokeViewAction
 }) => {
   const defaultWidth = toWidth(size);
   const [isOpen, setIsOpen] = useState(showModal);
   const [width, setWidth] = useState(defaultWidth);
   const openAt = useRef();
   const invoke = useInvokeClientAction({
-    analytics
+    analytics,
+    fireEvent
   });
   const handleOnOpenComplete = useCallback(() => {
     openAt.current = Date.now();
@@ -68,21 +76,29 @@ const EmbedModal = ({
   const themeState = useThemeObserver();
   let previewUrl = src;
   const handleOnViewActionClick = useCallback(() => {
-    invoke({
-      actionType: 'ViewAction',
-      actionFn: async () => openUrl(url),
-      display: CardDisplay.EmbedPreview,
-      extensionKey
-    });
-  }, [extensionKey, invoke, url]);
+    if (fg('platform-smart-card-migrate-embed-modal-analytics')) {
+      invokeViewAction && invoke(invokeViewAction);
+    } else {
+      invoke({
+        actionType: 'ViewAction',
+        actionFn: async () => openUrl(url),
+        display: CardDisplay.EmbedPreview,
+        extensionKey
+      });
+    }
+  }, [extensionKey, invoke, url, invokeViewAction]);
   const handleOnDownloadActionClick = useCallback(() => {
-    invoke({
-      actionType: ActionName.DownloadAction,
-      actionFn: async () => downloadUrl(download),
-      display: CardDisplay.EmbedPreview,
-      extensionKey
-    });
-  }, [download, extensionKey, invoke]);
+    if (fg('platform-smart-card-migrate-embed-modal-analytics')) {
+      invokeDownloadAction && invoke(invokeDownloadAction);
+    } else {
+      invoke({
+        actionType: ActionName.DownloadAction,
+        actionFn: async () => downloadUrl(download),
+        display: CardDisplay.EmbedPreview,
+        extensionKey
+      });
+    }
+  }, [download, invokeDownloadAction, extensionKey, invoke]);
   if (previewUrl && isSupportTheming) {
     previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
   }
@@ -94,10 +110,15 @@ const EmbedModal = ({
     testId: testId,
     width: width
   }, /*#__PURE__*/React.createElement(LinkInfo, {
-    icon: icon,
+    icon: fg('platform-smart-card-migrate-embed-modal-analytics') ? linkIcon ? {
+      icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
+        size: SmartLinkSize.Large
+      })),
+      isFlexibleUi: true
+    } : undefined : icon,
     providerName: providerName,
-    onViewButtonClick: url ? handleOnViewActionClick : undefined,
-    onDownloadButtonClick: download ? handleOnDownloadActionClick : undefined,
+    onViewButtonClick: fg('platform-smart-card-migrate-embed-modal-analytics') ? invokeViewAction ? handleOnViewActionClick : undefined : url ? handleOnViewActionClick : undefined,
+    onDownloadButtonClick: fg('platform-smart-card-migrate-embed-modal-analytics') ? invokeDownloadAction ? handleOnDownloadActionClick : undefined : download ? handleOnDownloadActionClick : undefined,
     onResizeButtonClick: handleOnResizeClick,
     size: width,
     title: title,

package/dist/es2019/view/FlexibleCard/components/actions/copy-link-action/index.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ActionName } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import { useFlexibleUiAnalyticsContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
@@ -20,22 +21,36 @@ const CopyLinkAction = ({
   const data = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.CopyLinkAction];
   const [tooltipMessage, setTooltipMessage] = useState(messages.copy_url_to_clipboard);
   const onClick = useCallback(() => {
-    if (data && data.url) {
-      invoke({
-        actionType: ActionName.CopyLinkAction,
-        actionFn: async () => {
-          var _data$url;
-          await navigator.clipboard.writeText((_data$url = data.url) !== null && _data$url !== void 0 ? _data$url : '');
-          setTooltipMessage(messages.copied_url_to_clipboard);
-        },
-        // These values have already been set in analytics context.
-        // We only pass these here for ufo experience.
-        display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
-        extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
-      });
-    }
-    if (onClickCallback) {
-      onClickCallback();
+    if (fg('platform-smart-card-migrate-embed-modal-analytics')) {
+      if (data !== null && data !== void 0 && data.invokeAction) {
+        invoke({
+          ...data.invokeAction,
+          actionFn: async () => {
+            var _data$invokeAction;
+            await ((_data$invokeAction = data.invokeAction) === null || _data$invokeAction === void 0 ? void 0 : _data$invokeAction.actionFn());
+            setTooltipMessage(messages.copied_url_to_clipboard);
+          }
+        });
+        onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback();
+      }
+    } else {
+      if (data && data.url) {
+        invoke({
+          actionType: ActionName.CopyLinkAction,
+          actionFn: async () => {
+            var _data$url;
+            await navigator.clipboard.writeText((_data$url = data.url) !== null && _data$url !== void 0 ? _data$url : '');
+            setTooltipMessage(messages.copied_url_to_clipboard);
+          },
+          // These values have already been set in analytics context.
+          // We only pass these here for ufo experience.
+          display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+          extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+        });
+      }
+      if (onClickCallback) {
+        onClickCallback();
+      }
     }
   }, [analytics, data, invoke, onClickCallback]);
   return data ? /*#__PURE__*/React.createElement(Action, _extends({

package/dist/es2019/view/FlexibleCard/components/actions/download-action/index.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ActionName } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import { useFlexibleUiAnalyticsContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
@@ -20,20 +21,27 @@ const DownloadAction = ({
   });
   const data = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.DownloadAction];
   const onClick = useCallback(() => {
-    if (data !== null && data !== void 0 && data.downloadUrl) {
-      invoke({
-        actionType: ActionName.DownloadAction,
-        actionFn: async () => download(data === null || data === void 0 ? void 0 : data.downloadUrl),
-        // These values have already been set in analytics context.
-        // We only pass these here for ufo experience.
-        display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
-        extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
-      });
-      if (onClickCallback) {
-        onClickCallback();
+    if (fg('platform-smart-card-migrate-embed-modal-analytics')) {
+      if (data !== null && data !== void 0 && data.invokeAction) {
+        invoke(data.invokeAction);
+        onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback();
+      }
+    } else {
+      if (data !== null && data !== void 0 && data.downloadUrl) {
+        invoke({
+          actionType: ActionName.DownloadAction,
+          actionFn: async () => download(data === null || data === void 0 ? void 0 : data.downloadUrl),
+          // These values have already been set in analytics context.
+          // We only pass these here for ufo experience.
+          display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+          extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+        });
+        if (onClickCallback) {
+          onClickCallback();
+        }
       }
     }
-  }, [analytics, data === null || data === void 0 ? void 0 : data.downloadUrl, invoke, onClickCallback]);
+  }, [analytics, data, invoke, onClickCallback]);
   const isStackItem = props.as === 'stack-item';
   const label = isStackItem ? messages.download_file : messages.download;
   const tooltipMessage = isStackItem ? messages.download_description : messages.download;

package/dist/es2019/view/FlexibleCard/components/actions/preview-action/index.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import MediaServicesActualSizeIcon from '@atlaskit/icon/core/migration/grow-diagonal--media-services-actual-size';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ActionName } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import { useFlexibleUiAnalyticsContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
@@ -20,23 +21,30 @@ const PreviewAction = ({
   });
   const data = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.PreviewAction];
   const onClick = useCallback(() => {
-    if (data) {
-      invoke({
-        actionType: ActionName.PreviewAction,
-        actionFn: async () => openEmbedModalWithFlexibleUiIcon({
-          download: data === null || data === void 0 ? void 0 : data.downloadUrl,
-          extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey,
-          analytics,
-          ...data
-        }),
-        // These values have already been set in analytics context.
-        // We only pass these here for ufo experience.
-        display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
-        extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
-      });
-    }
-    if (onClickCallback) {
-      onClickCallback();
+    if (fg('platform-smart-card-migrate-embed-modal-analytics')) {
+      if (data !== null && data !== void 0 && data.invokeAction) {
+        invoke(data.invokeAction);
+        onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback();
+      }
+    } else {
+      if (data) {
+        invoke({
+          actionType: ActionName.PreviewAction,
+          actionFn: async () => openEmbedModalWithFlexibleUiIcon({
+            download: data === null || data === void 0 ? void 0 : data.downloadUrl,
+            extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey,
+            analytics,
+            ...data
+          }),
+          // These values have already been set in analytics context.
+          // We only pass these here for ufo experience.
+          display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+          extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+        });
+      }
+      if (onClickCallback) {
+        onClickCallback();
+      }
     }
   }, [analytics, data, invoke, onClickCallback]);
   const isStackItem = props.as === 'stack-item';

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/index.js

@@ -14,6 +14,7 @@ import { R50, R500 } from '@atlaskit/theme/colors';
 import { useAnalyticsEvents } from '../../../../../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../../../../../messages';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../../state/flexible-ui-context';
+import useInvokeClientAction from '../../../../../../../state/hooks/use-invoke-client-action';
 import useResolve from '../../../../../../../state/hooks/use-resolve';
 import { getFormattedMessage, openEmbedModalWithFlexibleUiIcon } from '../../../../utils';
 import { contentStyles, dropdownItemGroupStyles, linkStyles, textStyles } from './styled';
@@ -22,6 +23,7 @@ const LozengeActionError = ({
   errorMessage,
   testId,
   maxLineNumber = MAX_LINE_NUMBER,
+  invokePreviewAction,
   url,
   previewData
 }) => {
@@ -30,7 +32,8 @@ const LozengeActionError = ({
   } = useAnalyticsEvents();
   const reload = useResolve();
   const analytics = useFlexibleUiAnalyticsContext();
-  const isPreviewAvailable = previewData && previewData.src !== undefined;
+  const invoke = useInvokeClientAction({});
+  const isPreviewAvailable = fg('platform-smart-card-migrate-embed-modal-analytics') ? invokePreviewAction !== undefined : previewData && previewData.src !== undefined;
   const handlePreviewClose = useCallback(() => {
     if (url) {
       reload(url, true);
@@ -43,13 +46,17 @@ const LozengeActionError = ({
       } else {
         analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionErrorOpenPreviewClickedEvent();
       }
-      return openEmbedModalWithFlexibleUiIcon({
-        ...previewData,
-        analytics,
-        onClose: handlePreviewClose
-      });
+      if (fg('platform-smart-card-migrate-embed-modal-analytics')) {
+        invokePreviewAction && invoke(invokePreviewAction);
+      } else {
+        return openEmbedModalWithFlexibleUiIcon({
+          ...previewData,
+          analytics,
+          onClose: handlePreviewClose
+        });
+      }
     }
-  }, [analytics, handlePreviewClose, isPreviewAvailable, previewData, fireEvent]);
+  }, [analytics, handlePreviewClose, isPreviewAvailable, invoke, invokePreviewAction, previewData, fireEvent]);
   const content = useMemo(() => {
     return jsx(Fragment, null, jsx("div", {
       css: contentStyles

package/dist/es2019/view/FlexibleCard/components/utils.js

@@ -198,6 +198,10 @@ export const getTruncateStyles = (maxLines, lineHeight = '1rem', wordBreak = 'br
 export const hasWhiteSpace = str => {
   return str.search(/\s/) >= 0;
 };
+
+/**
+ * TODO: Remove on cleanup of platform-smart-card-migrate-embed-modal-analytics
+ */
 export const openEmbedModalWithFlexibleUiIcon = ({
   linkIcon,
   ...props

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

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useMemo } from 'react';
+import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { SmartLinkStatus } from '../../constants';
 import { FlexibleUiAnalyticsContext, FlexibleUiContext, FlexibleUiOptionContext } from '../../state/flexible-ui-context';
 import { useAISummaryConfig } from '../../state/hooks/use-ai-summary-config';
+import useResolve from '../../state/hooks/use-resolve';
 import Container from './components/container';
 import { getContextByStatus, getRetryOptions } from './utils';
 
@@ -22,6 +24,7 @@ const FlexibleCard = ({
   onClick,
   onError,
   onResolve,
+  origin,
   renderers,
   showAuthTooltip,
   showHoverPreview,
@@ -33,6 +36,10 @@ const FlexibleCard = ({
 }) => {
   var _details$meta2;
   const aiSummaryConfig = useAISummaryConfig();
+  const resolve = useResolve();
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
   const {
     status: cardType,
     details
@@ -40,13 +47,17 @@ const FlexibleCard = ({
   const status = cardType;
   const context = useMemo(() => getContextByStatus({
     aiSummaryConfig,
+    appearance,
+    fireEvent,
     response: details,
     id,
+    origin,
     renderers,
+    resolve,
     actionOptions,
     status,
     url
-  }), [aiSummaryConfig, details, id, renderers, actionOptions, status, url]);
+  }), [aiSummaryConfig, appearance, details, fireEvent, id, origin, renderers, actionOptions, resolve, status, url]);
   const retry = getRetryOptions(url, status, details, onAuthorize);
   const {
     title

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

@@ -153,6 +153,7 @@ const HoverCardContent = ({
     cardState: cardState,
     onClick: onClick,
     onResolve: onResolve,
+    origin: 'smartLinkPreviewHoverCard',
     renderers: renderers,
     actionOptions,
     ui: flexibleUiOptions,

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

@@ -10,7 +10,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "32.7.0",
+  packageVersion: "32.7.2",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/esm/classNames.js

@@ -1,11 +1,13 @@
-export { contentFooterClassName } from './view/BlockCard/components/ContentFooter';
-export { metadataListClassName } from './view/common/MetadataList';
-export { blockCardResolvingViewClassName } from './view/BlockCard/views/ResolvingView';
-export { blockCardResolvedViewClassName, blockCardResolvedViewByClassName } from './view/BlockCard/views/ResolvedView';
-export { blockCardForbiddenViewClassName, blockCardForbiddenViewLinkClassName } from './view/BlockCard/views/ForbiddenView';
+export var contentFooterClassName = 'smart-link-content-footer';
+export var metadataListClassName = 'smart-link-metadata-list';
+export var blockCardResolvingViewClassName = 'block-card-resolving-view';
+export var blockCardResolvedViewClassName = 'block-card-resolved-view';
+export var blockCardResolvedViewByClassName = 'block-card-resolved-view-by';
+export var blockCardForbiddenViewClassName = 'block-card-forbidden-view';
+export var blockCardForbiddenViewLinkClassName = 'block-card-forbidden-view-link';
 export { blockCardIconImageClassName } from './view/common/Icon';
-export { blockCardContentClassName } from './view/BlockCard/components/Content';
-export { blockCardContentHeaderClassName } from './view/BlockCard/components/ContentHeader';
-export { blockCardContentHeaderNameClassName } from './view/BlockCard/components/Name';
-export { blockCardNotFoundViewClassName } from './view/BlockCard/views/NotFoundView';
-export { blockCardErroredViewClassName } from './view/BlockCard/views/ErroredView';
+export var blockCardContentClassName = 'block-card-content';
+export var blockCardContentHeaderClassName = 'block-card-content-header';
+export var blockCardContentHeaderNameClassName = 'block-card-content-header-name';
+export var blockCardNotFoundViewClassName = 'block-card-not-found-view';
+export var blockCardErroredViewClassName = 'block-card-errored-view';

package/dist/esm/extractors/action/extract-invoke-copy-link-action.js

@@ -0,0 +1,46 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { extractLink } from '@atlaskit/link-extractors';
+import { ActionName, CardAction } from '../../index';
+import { getDefinitionId, getExtensionKey, getResourceType } from '../../state/helpers';
+import { canShowAction } from '../../utils/actions/can-show-action';
+export var extractInvokeCopyLinkAction = function extractInvokeCopyLinkAction(_ref) {
+  var actionOptions = _ref.actionOptions,
+    appearance = _ref.appearance,
+    id = _ref.id,
+    response = _ref.response;
+  if (!canShowAction(CardAction.CopyLinkAction, actionOptions)) {
+    return;
+  }
+  var data = response.data;
+  var url = extractLink(data);
+  if (!url) {
+    return;
+  }
+  return {
+    actionFn: function () {
+      var _actionFn = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              return _context.abrupt("return", navigator.clipboard.writeText(url));
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function actionFn() {
+        return _actionFn.apply(this, arguments);
+      }
+      return actionFn;
+    }(),
+    actionSubjectId: 'copyLink',
+    actionType: ActionName.CopyLinkAction,
+    definitionId: getDefinitionId(response),
+    display: appearance,
+    extensionKey: getExtensionKey(response),
+    id: id,
+    resourceType: getResourceType(response)
+  };
+};

package/dist/esm/extractors/action/extract-invoke-download-action.js

@@ -0,0 +1,50 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { ActionName, CardAction } from '../../index';
+import { getDefinitionId, getExtensionKey, getResourceType } from '../../state/helpers';
+import { downloadUrl as download } from '../../utils';
+import { canShowAction } from '../../utils/actions/can-show-action';
+import { getActionsFromJsonLd } from '../common/actions/extractActions';
+import { extractDownloadUrl } from '../common/detail';
+export var extractInvokeDownloadAction = function extractInvokeDownloadAction(_ref) {
+  var actionOptions = _ref.actionOptions,
+    appearance = _ref.appearance,
+    id = _ref.id,
+    response = _ref.response;
+  if (!canShowAction(CardAction.DownloadAction, actionOptions)) {
+    return;
+  }
+  var data = response.data;
+  var downloadActionExists = getActionsFromJsonLd(data).find(function (action) {
+    return action['@type'] === 'DownloadAction';
+  });
+  if (downloadActionExists) {
+    var downloadUrl = extractDownloadUrl(data);
+    return {
+      actionFn: function () {
+        var _actionFn = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", download(downloadUrl));
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function actionFn() {
+          return _actionFn.apply(this, arguments);
+        }
+        return actionFn;
+      }(),
+      actionSubjectId: 'downloadDocument',
+      actionType: ActionName.DownloadAction,
+      definitionId: getDefinitionId(response),
+      display: appearance,
+      extensionKey: getExtensionKey(response),
+      id: id,
+      resourceType: getResourceType(response)
+    };
+  }
+};

package/dist/esm/extractors/action/extract-invoke-preview-action.js

@@ -0,0 +1,71 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { extractLink, extractPreview as extractPreviewData, extractProvider, extractTitle } from '@atlaskit/link-extractors';
+import { ActionName, CardAction } from '../../index';
+import { getDefinitionId, getExtensionKey, getResourceType } from '../../state/helpers';
+import { canShowAction } from '../../utils/actions/can-show-action';
+import { openEmbedModal } from '../../view/EmbedModal/utils';
+import { extractIsSupportTheming } from '../common/meta/extractIsSupportTheming';
+import { extractIsTrusted } from '../common/meta/extractIsTrusted';
+import { extractLinkIcon } from '../flexible/icon';
+import { extractInvokeDownloadAction } from './extract-invoke-download-action';
+import { extractInvokeViewAction } from './extract-invoke-view-action';
+export var extractInvokePreviewAction = function extractInvokePreviewAction(param) {
+  var _extractPreviewData;
+  var actionOptions = param.actionOptions,
+    display = param.appearance,
+    fireEvent = param.fireEvent,
+    onClose = param.onClose,
+    id = param.id,
+    origin = param.origin,
+    response = param.response;
+  if (!canShowAction(CardAction.PreviewAction, actionOptions)) {
+    return;
+  }
+  var data = response.data;
+  var meta = response.meta;
+  var src = (_extractPreviewData = extractPreviewData(data, 'web')) === null || _extractPreviewData === void 0 ? void 0 : _extractPreviewData.src;
+  if (src) {
+    var url = extractLink(data);
+    return {
+      actionFn: function () {
+        var _actionFn = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+          var _extractProvider;
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", openEmbedModal({
+                  fireEvent: fireEvent,
+                  invokeDownloadAction: extractInvokeDownloadAction(param),
+                  isSupportTheming: extractIsSupportTheming(meta),
+                  isTrusted: extractIsTrusted(meta),
+                  linkIcon: extractLinkIcon(response),
+                  providerName: (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text,
+                  onClose: onClose,
+                  origin: origin,
+                  src: src,
+                  title: extractTitle(data),
+                  url: url,
+                  invokeViewAction: extractInvokeViewAction(param, true)
+                }));
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function actionFn() {
+          return _actionFn.apply(this, arguments);
+        }
+        return actionFn;
+      }(),
+      actionSubjectId: 'invokePreviewScreen',
+      actionType: ActionName.PreviewAction,
+      definitionId: getDefinitionId(response),
+      display: display,
+      extensionKey: getExtensionKey(response),
+      id: id,
+      resourceType: getResourceType(response)
+    };
+  }
+};