@atlaskit/smart-card 26.50.13 → 26.50.15

package/dist/es2019/state/hooks/use-ai-summary/index.js

@@ -10,7 +10,8 @@ export const useAISummary = props => {
     url,
     baseUrl,
     headers,
-    product
+    product,
+    ari
   } = props;
   const [state, setState] = useState(((_AISummariesStore$get = AISummariesStore.get(url)) === null || _AISummariesStore$get === void 0 ? void 0 : _AISummariesStore$get.state) || {
     status: 'ready',
@@ -37,6 +38,7 @@ export const useAISummary = props => {
     if (!AISummariesStore.get(url)) {
       AISummariesStore.set(url, new AISummaryService({
         url,
+        ari,
         baseUrl,
         headers,
         onError,
@@ -48,7 +50,7 @@ export const useAISummary = props => {
 
     //returns function that calls unsubscribe method
     return (_AISummariesStore$get2 = AISummariesStore.get(url)) === null || _AISummariesStore$get2 === void 0 ? void 0 : _AISummariesStore$get2.subscribe(setState);
-  }, [url, baseUrl, headers, onError, onStart, onSuccess, product]);
+  }, [url, baseUrl, headers, onError, onStart, onSuccess, product, ari]);
   const summariseUrl = () => {
     var _AISummariesStore$get3;
     return (_AISummariesStore$get3 = AISummariesStore.get(url)) === null || _AISummariesStore$get3 === void 0 ? void 0 : _AISummariesStore$get3.summariseUrl();

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

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.50.13"
+  packageVersion: "26.50.15"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,10 +1,7 @@
 import { ActionName } from '../../../../constants';
 import { createDataAction, createUIAction } from './utils';
 export { default as FollowAction } from './follow-action';
-
-// Attention: Keep the export name and action name the same.
-// This will help reducing the code for mapping action inside
-// createAction and renderActionItems
+export { default as PreviewAction } from './preview-action';
 
 /**
  * Creates a DeleteAction component. Accepts default ActionProps, but defaults
@@ -19,13 +16,6 @@ export const DeleteAction = createUIAction(ActionName.DeleteAction);
  */
 export const EditAction = createUIAction(ActionName.EditAction);
 
-/**
- * Creates a PreviewAction component. Accepts default PreviewActionProps, and defaults
- * to the text 'Preview' inside the button.
- * @see Action
- */
-export const PreviewAction = createDataAction(ActionName.PreviewAction);
-
 /**
  * Creates a ViewAction component. Accepts default ViewActionProps, and defaults
  * to the text 'View' inside the button.

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

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import VidFullScreenOnIcon from '@atlaskit/icon/glyph/vid-full-screen-on';
+import React, { useCallback } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ActionName } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useFlexibleUiAnalyticsContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import useInvokeClientAction from '../../../../../state/hooks/use-invoke-client-action';
+import { openEmbedModalWithFlexibleUiIcon } from '../../utils';
+import Action from '../action';
+const PreviewAction = ({
+  onClick: onClickCallback,
+  ...props
+}) => {
+  var _context$actions;
+  const context = useFlexibleUiContext();
+  const analytics = useFlexibleUiAnalyticsContext();
+  const invoke = useInvokeClientAction({
+    analytics
+  });
+  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();
+    }
+  }, [analytics, data, invoke, onClickCallback]);
+  return data ? /*#__PURE__*/React.createElement(Action, _extends({
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved),
+    icon: /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
+      label: "Open preview"
+    }),
+    onClick: onClick,
+    testId: "smart-action-preview-action",
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved)
+  }, data, props)) : null;
+};
+export default PreviewAction;

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

@@ -7,8 +7,6 @@ import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../messages';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import EditIcon from '@atlaskit/icon/glyph/edit';
-import PreviewAction from './action/preview-action';
-import VidFullScreenOnIcon from '@atlaskit/icon/glyph/vid-full-screen-on';
 import ViewAction from './action/view-action';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import DownloadAction from './action/download-action';
@@ -40,17 +38,6 @@ const actionMappings = {
       tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
     }
   },
-  [ActionName.PreviewAction]: {
-    component: PreviewAction,
-    props: {
-      testId: 'smart-action-preview-action',
-      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved),
-      icon: /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
-        label: "Open preview"
-      }),
-      tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved)
-    }
-  },
   [ActionName.ViewAction]: {
     component: ViewAction,
     props: {
@@ -85,7 +72,6 @@ const getActionData = (actionName, contextKey, context) => {
   }
   const data = context[contextKey];
   switch (actionName) {
-    case ActionName.PreviewAction:
     case ActionName.ViewAction:
     case ActionName.DownloadAction:
       return data;

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/action-group-item/index.js

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import React, { useCallback } from 'react';
 import * as Actions from '../../../actions';
-import { isJSXElementNull } from '../../utils';
 const ActionGroupItem = ({
   item,
   size,
@@ -40,7 +39,14 @@ const ActionGroupItem = ({
   if (hideIcon) {
     actionProps.icon = undefined;
   }
-  const action = jsx(Action, _extends({
+  return jsx(Action
+  // Remove url once ViewAction is retired.
+  // This seems to be a typescript workaround
+  // because ViewAction marks it as required,
+  // which does not reflect actual implementation as the url
+  // came from data context and not all actions require url.
+  // https://product-fabric.atlassian.net/browse/EDM-9547
+  , _extends({
     url: "",
     asDropDownItem: asDropDownItems,
     size: size,
@@ -48,9 +54,5 @@ const ActionGroupItem = ({
     onClick: handleOnClick,
     isDisabled: isDisabled
   }, actionProps));
-  if (!isJSXElementNull(action)) {
-    return action;
-  }
-  return null;
 };
 export default ActionGroupItem;

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.js

@@ -31,6 +31,7 @@ const AISummaryBlockResolvedView = props => {
   } = useAnalyticsEvents();
   const context = useFlexibleUiContext();
   const url = (context === null || context === void 0 ? void 0 : context.url) || '';
+  const ari = (context === null || context === void 0 ? void 0 : context.ari) || '';
   const {
     summariseUrl,
     state: {
@@ -39,7 +40,8 @@ const AISummaryBlockResolvedView = props => {
       error
     }
   } = useAISummary({
-    url
+    url,
+    ari
   });
   const showAISummary = status === 'done' ||
   // We want to display the AI Summary component only when there is content available during the loading process.

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

@@ -48,16 +48,16 @@ export const ElementDisplaySchema = {
 const getDirectionStyles = direction => {
   switch (direction) {
     case SmartLinkDirection.Vertical:
-      return css`
-        flex-direction: column;
-        align-items: flex-start;
-      `;
+      return css({
+        flexDirection: 'column',
+        alignItems: 'flex-start'
+      });
     case SmartLinkDirection.Horizontal:
     default:
-      return css`
-        flex-direction: row;
-        align-items: center;
-      `;
+      return css({
+        flexDirection: 'row',
+        alignItems: 'center'
+      });
   }
 };
 export const getGapSize = size => {
@@ -73,24 +73,24 @@ export const getGapSize = size => {
       return 0.25;
   }
 };
-export const getBaseStyles = (direction, size) => css`
-  align-items: center;
-  display: flex;
-  gap: ${getGapSize(size)}rem;
-  line-height: 1rem;
-  min-width: 0;
-  overflow: hidden;
-  ${getDirectionStyles(direction)};
-  &:empty {
-    display: none;
+export const getBaseStyles = (direction, size) => css({
+  alignItems: 'center',
+  display: 'flex',
+  gap: `${getGapSize(size)}rem`,
+  lineHeight: '1rem',
+  minWidth: 0,
+  overflow: 'hidden'
+}, getDirectionStyles(direction), {
+  '&:empty': {
+    display: 'none'
+  },
+  '& > *': {
+    minWidth: 0
+  },
+  '& > [data-fit-to-content]': {
+    minWidth: 'fit-content'
   }
-  & > * {
-    min-width: 0;
-  }
-  & > [data-fit-to-content] {
-    min-width: fit-content;
-  }
-`;
+});
 export const highlightRemoveStyles = css`
   outline: none !important;
   outline-color: inherit;
@@ -116,26 +116,35 @@ export const getActionGroupStyles = size => {
     // The biggest height of the action button exceeds the max line-height
     // of the elements causing the action on the block with x-large size to
     // get cut at the bottom.
-    return css`
-      max-height: 2rem;
-    `;
+    return css({
+      maxHeight: '2rem'
+    });
   }
 };
 export const filterActionItems = (items = [], context) => {
   return items.filter(item => {
+    var _context$actions;
     switch (item.name) {
-      // Action that require data from the data context to render.
+      case ActionName.DeleteAction:
+      case ActionName.EditAction:
+      case ActionName.CustomAction:
+        // Named and custom actions that user defines.
+        return Boolean(ActionName[item.name]);
       case ActionName.DownloadAction:
+        // Remove once DownloadAction is refactored to context.action
+        // https://product-fabric.atlassian.net/browse/EDM-9545
         return Boolean(context === null || context === void 0 ? void 0 : context.downloadAction);
+      // Remove once FollowAction is refactored to context.action
+      // https://product-fabric.atlassian.net/browse/EDM-9559
       case ActionName.FollowAction:
         return Boolean(context === null || context === void 0 ? void 0 : context.followAction);
-      case ActionName.PreviewAction:
-        return Boolean(context === null || context === void 0 ? void 0 : context.previewAction);
+      // Remove once ViewAction is retired
+      // https://product-fabric.atlassian.net/browse/EDM-9547
       case ActionName.ViewAction:
         return Boolean(context === null || context === void 0 ? void 0 : context.viewAction);
       default:
-        // Named and custom actions that user defines.
-        return Boolean(ActionName[item.name]);
+        // Action that require data from the data context to render.
+        return Boolean(context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[item.name]);
     }
   });
 };

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

@@ -8,7 +8,7 @@ import AIPrism from '../../common/ai-prism';
 import { hoverCardClassName } from './HoverCardContent';
 import { useAISummary } from '../../../state/hooks/use-ai-summary';
 import { useSmartCardState } from '../../../state/store';
-import { extractLink } from '@atlaskit/link-extractors';
+import { extractAri, extractLink } from '@atlaskit/link-extractors';
 const ConnectedAIPrismContainer = ({
   children,
   isAIEnabled = false,
@@ -16,15 +16,18 @@ const ConnectedAIPrismContainer = ({
   url,
   ...props
 }) => {
-  var _extractLink, _cardState$details;
+  var _cardState$details, _extractLink, _extractAri;
   const cardState = useSmartCardState(url);
-  const dataUrl = (_extractLink = extractLink(cardState === null || cardState === void 0 ? void 0 : (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data)) !== null && _extractLink !== void 0 ? _extractLink : '';
+  const data = cardState === null || cardState === void 0 ? void 0 : (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  const dataUrl = (_extractLink = extractLink(data)) !== null && _extractLink !== void 0 ? _extractLink : '';
+  const dataAri = (_extractAri = extractAri(data)) !== null && _extractAri !== void 0 ? _extractAri : '';
   const {
     state: {
       status
     }
   } = useAISummary({
-    url: dataUrl
+    url: dataUrl,
+    ari: dataAri
   });
   const [showPrism, setShowPrism] = useState(status === 'loading');
   useEffect(() => {

package/dist/es2019/view/HoverCard/components/views/resolved/index.js

@@ -12,7 +12,7 @@ import { FormattedMessage } from 'react-intl-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getCanBeDatasource } from '../../../../../state/helpers';
 import { useAISummary } from '../../../../../state/hooks/use-ai-summary';
-import { extractLink } from '@atlaskit/link-extractors';
+import { extractAri, extractLink } from '@atlaskit/link-extractors';
 import { SmartLinkStatus } from '../../../../../constants';
 export const toFooterActions = (cardActions, onActionClick) => {
   const followAction = {
@@ -53,7 +53,8 @@ export const toFooterActions = (cardActions, onActionClick) => {
 const ConnectedAIBlock = ({
   bottomPrimary,
   imagePreview,
-  url
+  url,
+  ari
 }) => {
   const {
     state: {
@@ -61,7 +62,8 @@ const ConnectedAIBlock = ({
       content
     }
   } = useAISummary({
-    url
+    url,
+    ari
   });
   const showData = status === 'ready' || status === 'error' ||
   // Description & bottom metadata should only disappear when we start getting summary content
@@ -88,7 +90,7 @@ const HoverCardResolvedView = ({
   extensionKey,
   url
 }) => {
-  var _cardState$details, _extractLink;
+  var _cardState$details, _extractLink, _extractAri;
   const canBeDatasource = getCanBeDatasource(cardState.details);
   useEffect(() => {
     // Since this hover view is only rendered on resolved status,
@@ -102,6 +104,7 @@ const HoverCardResolvedView = ({
   const footerActions = useMemo(() => toFooterActions(cardActions, onActionClick), [cardActions, onActionClick]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const dataUrl = (_extractLink = extractLink(data)) !== null && _extractLink !== void 0 ? _extractLink : '';
+  const dataAri = (_extractAri = extractAri(data)) !== null && _extractAri !== void 0 ? _extractAri : '';
   const {
     topPrimary,
     topSecondary,
@@ -152,6 +155,7 @@ const HoverCardResolvedView = ({
   }, /*#__PURE__*/React.createElement(ConnectedAIBlock, {
     imagePreview: !!imagePreview,
     url: dataUrl,
+    ari: dataAri,
     bottomPrimary: bottomPrimary
   })), !isAISummaryEnabled && !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, {
     status: SmartLinkStatus.Resolved

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

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.50.13",
+  packageVersion: "26.50.15",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/extractors/flexible/actions/index.js

@@ -0,0 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ActionName } from '../../../constants';
+import { extractPreviewAction } from './extract-preview-action';
+var extractActions = function extractActions(response, actionOptions) {
+  var action = _defineProperty({}, ActionName.PreviewAction, extractPreviewAction(response, actionOptions));
+  return Object.values(action).some(function (value) {
+    return Boolean(value);
+  }) ? action : undefined;
+};
+export default extractActions;

package/dist/esm/extractors/flexible/index.js

@@ -1,15 +1,15 @@
 import { extractSummary } from '../common/primitives';
+import extractActions from './actions';
 import extractFollowAction from './actions/extract-follow-action';
 import { extractLinkIcon } from './icon';
 import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn, extractLocation, extractOwnedBy, extractAssignedTo, extractSubTasksProgress, extractStoryPoints, extractReadTime, extractSentOn, extractPersonAssignedToAsArray } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
-import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCreated, extractLink, extractPersonOwnedBy } from '@atlaskit/link-extractors';
+import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCreated, extractLink, extractPersonOwnedBy, extractAri } from '@atlaskit/link-extractors';
 import extractPriority from './extract-priority';
 import extractProviderIcon from './icon/extract-provider-icon';
 import extractPreview from './extract-preview';
 import extractState from './extract-state';
 import { extractLatestCommit } from './latest-commit';
-import { extractPreviewAction } from './actions/extract-preview-action';
 import { extractDownloadAction } from './actions/extract-download-action';
 import { extractViewAction } from './actions/extract-view-action';
 var extractFlexibleUiContext = function extractFlexibleUiContext() {
@@ -24,6 +24,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
   var data = response.data;
   var url = extractLink(data);
   return {
+    actions: extractActions(response, actionOptions),
     assignedToGroup: extractPersonAssignedToAsArray(data),
     attachmentCount: extractAttachmentCount(data),
     authorGroup: extractPersonCreatedBy(data),
@@ -40,7 +41,6 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     createdOn: extractDateCreated(data),
     dueOn: extractDueOn(data),
     followAction: extractFollowAction(response, actionOptions, id),
-    previewAction: extractPreviewAction(response, actionOptions),
     viewAction: extractViewAction(data, actionOptions),
     downloadAction: extractDownloadAction(data, actionOptions),
     latestCommit: extractLatestCommit(data),
@@ -63,7 +63,8 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     storyPoints: extractStoryPoints(data),
     targetBranch: extractTargetBranch(data),
     title: extractTitle(data) || url,
-    url: url
+    url: url,
+    ari: extractAri(data)
   };
 };
 export default extractFlexibleUiContext;

package/dist/esm/state/flexible-ui-context/types.js

@@ -1 +1,6 @@
-export {};
+import { ActionName } from '../../constants';
+
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */

package/dist/esm/state/hooks/use-ai-summary/ai-summary-service/index.js

@@ -30,9 +30,11 @@ export var AISummaryService = /*#__PURE__*/function () {
             case 0:
               payload = {
                 recipient_agent_named_id: 'summary_agent',
-                agent_input: {
-                  urls: [_this.url],
-                  summary_style: summaryStyle
+                agent_input_context: {
+                  content_url: _this.url,
+                  content_ari: _this.ari,
+                  summary_style: summaryStyle,
+                  summary_output_mimetype: 'text/markdown'
                 }
               };
               options = {
@@ -77,6 +79,7 @@ export var AISummaryService = /*#__PURE__*/function () {
       headers: _objectSpread({}, props.headers || defaultConfig.headers)
     };
     this.url = props.url;
+    this.ari = props.ari;
     this.onStart = props.onStart;
     this.onSuccess = props.onSuccess;
     this.onError = props.onError;

package/dist/esm/state/hooks/use-ai-summary/index.js

@@ -10,7 +10,8 @@ export var useAISummary = function useAISummary(props) {
   var url = props.url,
     baseUrl = props.baseUrl,
     headers = props.headers,
-    product = props.product;
+    product = props.product,
+    ari = props.ari;
   var _useState = useState(((_AISummariesStore$get = AISummariesStore.get(url)) === null || _AISummariesStore$get === void 0 ? void 0 : _AISummariesStore$get.state) || {
       status: 'ready',
       content: ''
@@ -38,6 +39,7 @@ export var useAISummary = function useAISummary(props) {
     if (!AISummariesStore.get(url)) {
       AISummariesStore.set(url, new AISummaryService({
         url: url,
+        ari: ari,
         baseUrl: baseUrl,
         headers: headers,
         onError: onError,
@@ -49,7 +51,7 @@ export var useAISummary = function useAISummary(props) {
 
     //returns function that calls unsubscribe method
     return (_AISummariesStore$get2 = AISummariesStore.get(url)) === null || _AISummariesStore$get2 === void 0 ? void 0 : _AISummariesStore$get2.subscribe(setState);
-  }, [url, baseUrl, headers, onError, onStart, onSuccess, product]);
+  }, [url, baseUrl, headers, onError, onStart, onSuccess, product, ari]);
   var summariseUrl = function summariseUrl() {
     var _AISummariesStore$get3;
     return (_AISummariesStore$get3 = AISummariesStore.get(url)) === null || _AISummariesStore$get3 === void 0 ? void 0 : _AISummariesStore$get3.summariseUrl();

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.50.13"
+  packageVersion: "26.50.15"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/FlexibleCard/components/actions/index.js

@@ -1,10 +1,7 @@
 import { ActionName } from '../../../../constants';
 import { createDataAction, createUIAction } from './utils';
 export { default as FollowAction } from './follow-action';
-
-// Attention: Keep the export name and action name the same.
-// This will help reducing the code for mapping action inside
-// createAction and renderActionItems
+export { default as PreviewAction } from './preview-action';
 
 /**
  * Creates a DeleteAction component. Accepts default ActionProps, but defaults
@@ -19,13 +16,6 @@ export var DeleteAction = createUIAction(ActionName.DeleteAction);
  */
 export var EditAction = createUIAction(ActionName.EditAction);
 
-/**
- * Creates a PreviewAction component. Accepts default PreviewActionProps, and defaults
- * to the text 'Preview' inside the button.
- * @see Action
- */
-export var PreviewAction = createDataAction(ActionName.PreviewAction);
-
 /**
  * Creates a ViewAction component. Accepts default ViewActionProps, and defaults
  * to the text 'View' inside the button.

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

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onClick"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import VidFullScreenOnIcon from '@atlaskit/icon/glyph/vid-full-screen-on';
+import React, { useCallback } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ActionName } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useFlexibleUiAnalyticsContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import useInvokeClientAction from '../../../../../state/hooks/use-invoke-client-action';
+import { openEmbedModalWithFlexibleUiIcon } from '../../utils';
+import Action from '../action';
+var PreviewAction = function PreviewAction(_ref) {
+  var _context$actions;
+  var onClickCallback = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var context = useFlexibleUiContext();
+  var analytics = useFlexibleUiAnalyticsContext();
+  var invoke = useInvokeClientAction({
+    analytics: analytics
+  });
+  var data = context === null || context === void 0 || (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.PreviewAction];
+  var onClick = useCallback(function () {
+    if (data) {
+      invoke({
+        actionType: ActionName.PreviewAction,
+        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", openEmbedModalWithFlexibleUiIcon(_objectSpread({
+                    download: data === null || data === void 0 ? void 0 : data.downloadUrl,
+                    extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey,
+                    analytics: analytics
+                  }, data)));
+                case 1:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          function actionFn() {
+            return _actionFn.apply(this, arguments);
+          }
+          return actionFn;
+        }(),
+        // 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({
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved),
+    icon: /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
+      label: "Open preview"
+    }),
+    onClick: onClick,
+    testId: "smart-action-preview-action",
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved)
+  }, data, props)) : null;
+};
+export default PreviewAction;

package/dist/esm/view/FlexibleCard/components/actions/preview-action/types.js

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

package/dist/esm/view/FlexibleCard/components/actions/types.js

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