@atlaskit/smart-card 23.3.0 → 23.4.0

package/dist/es2019/view/FlexibleCard/components/elements/media/index.js

@@ -69,7 +69,7 @@ const Media = ({
   return jsx("div", {
     css: [styles, overrideCss],
     "data-smart-element": name,
-    "data-smart-element-media": true,
+    "data-smart-element-media": type,
     "data-testid": testId
   }, jsx(ImageIcon, {
     testId: `${testId}-image`,

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
 import { SmartLinkStatus } from '../../constants';
 import Container from './components/container';
-import { FlexibleUiContext } from '../../state/flexible-ui-context';
+import { FlexibleUiAnalyticsContext, FlexibleUiContext } from '../../state/flexible-ui-context';
 import { getContextByStatus, getRetryOptions } from './utils';
 /**
  * This represents a Flexible Card: a link represented by a card with metadata.
@@ -21,7 +21,8 @@ const FlexibleCard = ({
   ui,
   url,
   onClick,
-  testId
+  testId,
+  analytics
 }) => {
   const {
     status: cardType,
@@ -60,7 +61,9 @@ const FlexibleCard = ({
         break;
     }
   }, [onError, onResolve, status, title, url]);
-  return /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
+  return /*#__PURE__*/React.createElement(FlexibleUiAnalyticsContext.Provider, {
+    value: analytics
+  }, /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/React.createElement(Container, _extends({
     testId: testId
@@ -68,7 +71,7 @@ const FlexibleCard = ({
     onClick: onClick,
     retry: retry,
     status: status
-  }), children));
+  }), children)));
 };
 
 export default FlexibleCard;

package/dist/es2019/view/common/Icon.js

@@ -1,15 +1,42 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import React from 'react';
 import ImageLoader from 'react-render-image';
 import LinkIcon from '@atlaskit/icon/glyph/link';
 import { gs } from './utils';
 export const blockCardIconImageClassName = 'block-card-icon-image';
+
+const getImageStyles = isFlexibleUi => {
+  if (isFlexibleUi) {
+    return;
+  }
+
+  return css`
+    height: ${gs(2)};
+    width: ${gs(2)};
+  `;
+};
+
+const getSpanStyles = isFlexibleUi => {
+  if (isFlexibleUi) {
+    return;
+  }
+
+  return css`
+    height: ${gs(2.5)};
+    width: ${gs(2)};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `;
+};
+
 export const Icon = ({
   url,
   icon,
   defaultIcon,
-  testId = 'block-card-icon'
+  testId = 'block-card-icon',
+  isFlexibleUi = false
 }) => {
   const placeholder = defaultIcon || jsx(LinkIcon, {
     label: "link",
@@ -19,23 +46,14 @@ export const Icon = ({
   const image = url && jsx(ImageLoader, {
     src: url,
     loaded: jsx("img", {
-      css: {
-        height: gs(2),
-        width: gs(2)
-      },
+      css: getImageStyles(isFlexibleUi),
       src: url,
       "data-testid": `${testId}-image`
     }),
     errored: placeholder
   });
   return jsx("span", {
-    css: {
-      height: gs(2.5),
-      width: gs(2),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
+    css: getSpanStyles(isFlexibleUi),
     "data-testid": testId,
     className: blockCardIconImageClassName
   }, icon || image || placeholder);

package/dist/esm/constants.js

@@ -1,6 +1,8 @@
+export var CONTENT_URL_SECURITY_AND_PERMISSIONS = 'https://support.atlassian.com/confluence-cloud/docs/insert-links-and-anchors/#Smart-links';
 /**
  * The alignment of Flexible UI component.
  */
+
 export var SmartLinkAlignment;
 /**
  * The direction of Flexible UI components. It establish the main-axis
@@ -140,6 +142,9 @@ export var ActionName;
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
   ActionName["EditAction"] = "EditAction";
+  ActionName["PreviewAction"] = "PreviewAction";
+  ActionName["ViewAction"] = "ViewAction";
+  ActionName["DownloadAction"] = "DownloadAction";
   ActionName["CustomAction"] = "CustomAction";
 })(ActionName || (ActionName = {}));
 

package/dist/esm/extractors/common/actions/extractActions.js

@@ -67,7 +67,7 @@ var getServerActionProps = function getServerActionProps(jsonLd, action, handler
   };
 };
 
-var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
+export var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
   var actions = jsonLd && jsonLd['schema:potentialAction'];
 
   if (!actions) {
@@ -80,7 +80,6 @@ var getActionsFromJsonLd = function getActionsFromJsonLd(jsonLd) {
 
   return actions;
 };
-
 export function extractActions(jsonLd, handler) {
   var actions = getActionsFromJsonLd(jsonLd);
   var clientActions = actions.filter(isClientAction);

package/dist/esm/extractors/flexible/actions/extract-download-action.js

@@ -0,0 +1,15 @@
+import { getActionsFromJsonLd } from '../../common/actions/extractActions';
+import { extractDownloadUrl } from '../../common/detail';
+export var extractDownloadAction = function extractDownloadAction(data) {
+  var downloadActionExists = getActionsFromJsonLd(data).find(function (action) {
+    return action['@type'] === 'DownloadAction';
+  });
+
+  if (downloadActionExists) {
+    return {
+      downloadUrl: extractDownloadUrl(data)
+    };
+  }
+
+  return undefined;
+};

package/dist/esm/extractors/flexible/actions/extract-preview-action.js

@@ -0,0 +1,23 @@
+import { extractDownloadUrl } from '../../common/detail';
+import { extractPreview as extractPreviewData } from '@atlaskit/linking-common';
+import { extractLink, extractProvider, extractTitle } from '@atlaskit/linking-common/extractors';
+import { extractLinkIcon } from '../icon';
+export var extractPreviewAction = function extractPreviewAction(response) {
+  var _extractPreviewData;
+
+  var data = response.data;
+  var src = (_extractPreviewData = extractPreviewData(data, 'web')) === null || _extractPreviewData === void 0 ? void 0 : _extractPreviewData.src;
+
+  if (src) {
+    var _extractProvider;
+
+    return {
+      downloadUrl: extractDownloadUrl(data),
+      providerName: (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text,
+      src: src,
+      title: extractTitle(data),
+      linkIcon: extractLinkIcon(response),
+      url: extractLink(data)
+    };
+  }
+};

package/dist/esm/extractors/flexible/actions/extract-view-action.js

@@ -0,0 +1,15 @@
+import { extractLink } from '@atlaskit/linking-common/extractors';
+import { getActionsFromJsonLd } from '../../common/actions/extractActions';
+export var extractViewAction = function extractViewAction(data) {
+  var viewActionExists = getActionsFromJsonLd(data).find(function (action) {
+    return action['@type'] === 'ViewAction';
+  });
+
+  if (viewActionExists) {
+    return {
+      viewUrl: extractLink(data)
+    };
+  }
+
+  return undefined;
+};

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

@@ -3,11 +3,14 @@ import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
 import { extractAttachmentCount, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
-import { extractPersonCreatedBy, extractLink, extractTitle, extractDateUpdated, extractDateCreated } from '@atlaskit/linking-common/extractors';
+import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCreated, extractLink } from '@atlaskit/linking-common/extractors';
 import extractPriority from './extract-priority';
 import extractProviderIcon from './icon/extract-provider-icon';
 import extractPreview from './extract-preview';
 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(response, renderers) {
   if (!response) {
@@ -27,6 +30,9 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     createdBy: extractCreatedBy(data),
     createdOn: extractDateCreated(data),
     dueOn: extractDueOn(data),
+    previewAction: extractPreviewAction(response),
+    viewAction: extractViewAction(data),
+    downloadAction: extractDownloadAction(data),
     latestCommit: extractLatestCommit(data),
     linkIcon: extractLinkIcon(response, renderers),
     modifiedBy: extractModifiedBy(data),

package/dist/esm/messages.js

@@ -70,6 +70,16 @@ export var messages = defineMessages({
     defaultMessage: 'To show a preview of this link, connect your {context} account.',
     description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view. Displayed in byline.'
   },
+  connect_unauthorised_account_action: {
+    id: 'fabric.linking.connect_unauthorised_account_action',
+    defaultMessage: 'Connect to {context}',
+    description: 'Shown on a button to connect user external account to their Atlassian account.'
+  },
+  connect_unauthorised_account_description: {
+    id: 'fabric.linking.connect_unauthorised_account_description',
+    defaultMessage: 'Connect {context} to Atlassian to view more details from your work and collaboration from one place.',
+    description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view.'
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",
@@ -125,6 +135,11 @@ export var messages = defineMessages({
     defaultMessage: 'Join {context} to view this issue',
     description: 'Allows the user join the product or service immediately'
   },
+  learn_more_about_smart_links_security: {
+    id: 'fabric.linking.learn_more_about_smart_links_security',
+    defaultMessage: 'Learn more about smart link security and permissions.',
+    description: 'An anchor link to redirect user to a page about smart link security and permissions.'
+  },
   loading: {
     id: 'fabric.linking.loading',
     defaultMessage: 'Loading...',

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

@@ -7,4 +7,13 @@ import { useContext, createContext } from 'react';
 export var FlexibleUiContext = /*#__PURE__*/createContext(undefined);
 export var useFlexibleUiContext = function useFlexibleUiContext() {
   return useContext(FlexibleUiContext);
+};
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */
+
+export var FlexibleUiAnalyticsContext = /*#__PURE__*/createContext(undefined);
+export var useFlexibleUiAnalyticsContext = function useFlexibleUiAnalyticsContext() {
+  return useContext(FlexibleUiAnalyticsContext);
 };

package/dist/esm/version.json

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

package/dist/esm/view/{BlockCard/utils → EmbedCard}/constants.js

@@ -1,4 +1,4 @@
 var CDN_BASE_URL = 'https://smart-links-cdn.us-east-1.prod.public.atl-paas.net';
 export var LockImage = "".concat(CDN_BASE_URL, "/lock.svg");
-export var CelebrationImage = "".concat(CDN_BASE_URL, "/celebration.svg");
-export var NotFoundImage = "".concat(CDN_BASE_URL, "/not_found.svg");
+export var NotFoundImage = "".concat(CDN_BASE_URL, "/not_found.svg");
+export var UnauthorisedImage = "".concat(CDN_BASE_URL, "/unauth.svg");

package/dist/esm/view/EmbedCard/views/ForbiddenView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
-import { LockImage } from '../../BlockCard/utils/constants';
+import { LockImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 export var EmbedCardForbiddenView = function EmbedCardForbiddenView(_ref) {

package/dist/esm/view/EmbedCard/views/NotFoundView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
-import { NotFoundImage } from '../../BlockCard/utils/constants';
+import { NotFoundImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 export var EmbedCardNotFoundView = function EmbedCardNotFoundView(_ref) {

package/dist/esm/view/EmbedCard/views/UnauthorisedView.js

@@ -1,9 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
-import { CelebrationImage } from '../../BlockCard/utils/constants';
+import { UnauthorisedImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
+import { messages } from '../../../messages';
+import { CONTENT_URL_SECURITY_AND_PERMISSIONS } from '../../../constants';
 export var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
+  var _context$image;
+
   var link = _ref.link,
       context = _ref.context,
       isSelected = _ref.isSelected,
@@ -25,16 +31,24 @@ export var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref)
     onClick: onClick,
     testId: testId
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
-    image: CelebrationImage,
+    image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : UnauthorisedImage,
     title: "connect_link_account_card_name",
-    description: "connect_link_account_card_description",
+    description: "connect_unauthorised_account_description",
     context: context && context.text,
     button: {
       appearance: 'primary',
-      text: 'connect_link_account_card',
+      text: 'connect_unauthorised_account_action',
       testId: 'connect-account'
     },
     onClick: onAuthorise,
     testId: testId
-  }));
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_description, {
+    values: {
+      context: context === null || context === void 0 ? void 0 : context.text
+    }
+  })), ' ', /*#__PURE__*/React.createElement("a", {
+    href: CONTENT_URL_SECURITY_AND_PERMISSIONS,
+    target: "_blank",
+    "data-testid": "".concat(testId, "-learn-more")
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.learn_more_about_smart_links_security))));
 };

package/dist/esm/view/EmbedCard/views/UnresolvedView.js

@@ -14,7 +14,8 @@ export var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
       button = _ref.button,
       context = _ref.context,
       onClick = _ref.onClick,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      children = _ref.children;
   return jsx("div", {
     css: {
       display: 'flex',
@@ -30,14 +31,16 @@ export var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
     css: {
       height: gridSize(14),
       marginBottom: gridSize(4)
-    }
+    },
+    "data-testid": "".concat(testId, "-unresolved-image")
   }), jsx("span", {
     css: {
       fontSize: gridSize(2.5),
       marginBottom: gridSize(1.5),
       width: gridSize(50),
       textAlign: 'center'
-    }
+    },
+    "data-testid": "".concat(testId, "-unresolved-title")
   }, jsx(FormattedMessage, _extends({}, messages[title], {
     values: {
       context: context
@@ -49,8 +52,9 @@ export var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
       textAlign: 'center',
       width: gridSize(50),
       lineHeight: gridSize(3)
-    }
-  }, jsx(FormattedMessage, _extends({}, messages[description], {
+    },
+    "data-testid": "".concat(testId, "-unresolved-description")
+  }, children !== null && children !== void 0 ? children : jsx(FormattedMessage, _extends({}, messages[description], {
     values: {
       context: context
     }

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

@@ -0,0 +1,96 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React from 'react';
+import Action from '../index';
+
+var DownloadAction = function DownloadAction(props) {
+  var appearance = props.appearance,
+      asDropDownItem = props.asDropDownItem,
+      downloadUrl = props.downloadUrl,
+      _onClick = props.onClick,
+      testId = props.testId,
+      url = props.url;
+
+  if (downloadUrl && url) {
+    var action = _objectSpread(_objectSpread({}, props), {}, {
+      onClick: function onClick() {
+        downloadFunction({
+          url: downloadUrl
+        });
+
+        if (_onClick) {
+          _onClick();
+        }
+      }
+    });
+
+    return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
+      appearance: appearance,
+      asDropDownItem: asDropDownItem,
+      testId: testId
+    }));
+  } else {
+    return null;
+  }
+};
+
+function downloadFunction(_x) {
+  return _downloadFunction.apply(this, arguments);
+}
+
+function _downloadFunction() {
+  _downloadFunction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var url, isIE11, isSafari, iframeName, link, iframe;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            url = _ref.url;
+
+            if (url) {
+              _context.next = 3;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 3:
+            isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
+            isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+            iframeName = 'media-download-iframe';
+            link = document.createElement('a');
+            iframe = document.getElementById(iframeName);
+
+            if (!iframe) {
+              iframe = document.createElement('iframe');
+              iframe.style.display = 'none';
+              iframe.id = iframeName;
+              iframe.name = iframeName;
+              document.body.appendChild(iframe);
+            }
+
+            link.href = url;
+            link.download = url;
+            link.target = isIE11 || isSafari ? '_blank' : iframeName;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _downloadFunction.apply(this, arguments);
+}
+
+export default DownloadAction;

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

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

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

@@ -0,0 +1,136 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["popupMountPointId"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React from 'react';
+import Action from '../index';
+import ReactDOM from 'react-dom';
+import { IntlProvider } from 'react-intl-next';
+import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
+import { useSmartLinkAnalytics } from '../../../../../../state';
+import Icon from '../../../elements/icon';
+
+var PreviewAction = function PreviewAction(props) {
+  var appearance = props.appearance,
+      asDropDownItem = props.asDropDownItem,
+      testId = props.testId,
+      _onClick = props.onClick,
+      linkIcon = props.linkIcon,
+      src = props.src,
+      url = props.url,
+      title = props.title,
+      providerName = props.providerName,
+      downloadUrl = props.downloadUrl;
+  var defaultAnalytics = useSmartLinkAnalytics(url, function () {});
+  var analytics = useFlexibleUiAnalyticsContext() || defaultAnalytics;
+  var EmbedIcon = {
+    icon: /*#__PURE__*/React.createElement(Icon, linkIcon),
+    isFlexibleUi: true
+  };
+
+  if (src && url) {
+    var embedModal = function embedModal() {
+      return previewFunction({
+        popupMountPointId: 'twp-editor-preview-iframe',
+        showModal: true,
+        iframeName: 'twp-editor-preview-iframe',
+        onClose: function onClose() {},
+        download: downloadUrl,
+        icon: EmbedIcon,
+        providerName: providerName || 'Preview',
+        src: src,
+        title: title,
+        url: url,
+        analytics: analytics,
+        origin: 'smartLinkCard'
+      });
+    };
+
+    var action = _objectSpread(_objectSpread({}, props), {}, {
+      onClick: function onClick() {
+        embedModal();
+
+        if (_onClick) {
+          _onClick();
+        }
+      }
+    });
+
+    return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
+      appearance: appearance,
+      asDropDownItem: asDropDownItem,
+      testId: testId
+    }));
+  } else {
+    return null;
+  }
+};
+/*
+  Explanatory note:
+  Actions don't have access to the react tree of whatever is rendered them
+  (and this concept is fraught inside editor anyway) so we want to ensure
+  it is mounting to a new unique place. This function manages that, including
+  creating an element if it doesn't exist, as well as tidying up the react tree
+  (but not the element) upon closing the modal.
+
+  This may strike you as really uncomfortable as you read it, so I wanted to note
+  that a) this was discussed and agreed upon, and b) it's definitely odd, and if
+  you find an elegant solution around this, you should definitely feel free to
+  refactor it.
+*/
+
+
+export function previewFunction(_x) {
+  return _previewFunction.apply(this, arguments);
+}
+
+function _previewFunction() {
+  _previewFunction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var popupMountPointId, rest, popupMountPoint, Modal;
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            popupMountPointId = _ref.popupMountPointId, rest = _objectWithoutProperties(_ref, _excluded);
+            popupMountPoint = document.getElementById(popupMountPointId);
+
+            if (!popupMountPoint) {
+              popupMountPoint = document.createElement('div');
+              popupMountPoint.id = popupMountPointId;
+              popupMountPoint.setAttribute('data-testid', 'preview-modal');
+              document.body.appendChild(popupMountPoint);
+            }
+
+            _context2.next = 5;
+            return import('../../../../../EmbedModal');
+
+          case 5:
+            Modal = _context2.sent;
+            ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
+              locale: "en"
+            }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
+              onClose: function onClose(_context) {
+                if (popupMountPoint) {
+                  ReactDOM.unmountComponentAtNode(popupMountPoint);
+                }
+              }
+            }))), popupMountPoint);
+
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _previewFunction.apply(this, arguments);
+}
+
+export default PreviewAction;

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

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