@atlaskit/smart-card 16.3.0 → 17.2.0

package/dist/es2019/extractors/flexible/icon/extract-jira-task-icon.js

@@ -0,0 +1,35 @@
+import { IconType } from '../../../constants';
+
+const extractJiraTaskIcon = (taskType, label = 'Task') => {
+  switch (taskType) {
+    case 'JiraBug':
+      return [IconType.Bug, label];
+
+    case 'JiraChange':
+      return [IconType.Change, label];
+
+    case 'JiraEpic':
+      return [IconType.Epic, label];
+
+    case 'JiraIncident':
+      return [IconType.Incident, label];
+
+    case 'JiraProblem':
+      return [IconType.Problem, label];
+
+    case 'JiraServiceRequest':
+      return [IconType.ServiceRequest, label];
+
+    case 'JiraStory':
+      return [IconType.Story, label];
+
+    case 'JiraSubTask':
+      return [IconType.SubTask, label];
+
+    case 'JiraTask':
+    default:
+      return [IconType.Task, label];
+  }
+};
+
+export default extractJiraTaskIcon;

package/dist/es2019/extractors/flexible/icon/extract-jsonld-data-icon.js

@@ -0,0 +1,96 @@
+import { CONFLUENCE_GENERATOR_ID, JIRA_GENERATOR_ID } from '../../constants';
+import extractDocumentTypeIcon from './extract-document-type-icon';
+import extractFileFormatIcon from './extract-file-formatIcon';
+import extractJiraTaskIcon from './extract-jira-task-icon';
+import extractProviderIcon from './extract-provider-icon';
+import extractUrlIcon from './extract-url-icon';
+import { extractTaskType } from '../../common/lozenge';
+import { extractTitle } from '../../common/primitives';
+import { extractorPriorityMap as priorityMap } from '../../common/icon/priority';
+import { IconType } from '../../../constants';
+
+const extractTask = (data, label) => {
+  const {
+    id,
+    icon: url
+  } = extractTaskType(data) || {};
+  const taskType = id === null || id === void 0 ? void 0 : id.split('#').pop();
+  const taskIcon = url ? [undefined, label, url] : undefined;
+  return {
+    taskType,
+    taskIcon
+  };
+};
+
+const extractType = jsonLd => {
+  const type = jsonLd['@type'];
+  return Array.isArray(type) ? type.sort((a, b) => priorityMap[b] - priorityMap[a])[0] : type;
+};
+
+const isConfluenceProvider = provider => provider === CONFLUENCE_GENERATOR_ID;
+
+const isJiraProvider = provider => provider === JIRA_GENERATOR_ID;
+
+const isNativeProvider = provider => isConfluenceProvider(provider) || isJiraProvider(provider);
+
+const extractJsonldDataIcon = data => {
+  const generator = data.generator;
+  const label = extractTitle(data);
+  const type = extractType(data);
+  const urlIcon = extractUrlIcon(data.icon, label);
+  const provider = generator === null || generator === void 0 ? void 0 : generator['@id'];
+  const providerIcon = extractProviderIcon(provider, generator === null || generator === void 0 ? void 0 : generator.icon, label);
+
+  switch (type) {
+    case 'Document':
+    case 'schema:BlogPosting':
+    case 'schema:DigitalDocument':
+    case 'schema:TextDigitalDocument':
+    case 'schema:PresentationDigitalDocument':
+    case 'schema:SpreadsheetDigitalDocument':
+    case 'atlassian:Template':
+    case 'atlassian:UndefinedLink':
+      // If we encounter a native provider, we privilege the
+      // icon generated by its mime type and document type.
+      // Otherwise, we privilege the provider icon,
+      // followed by mime type and document type icon.
+      const documentData = data;
+      const fileFormat = documentData === null || documentData === void 0 ? void 0 : documentData['schema:fileFormat'];
+      const fileFormatIcon = extractFileFormatIcon(fileFormat);
+      const documentTypeIcon = extractDocumentTypeIcon(type, label);
+      return isNativeProvider(provider) ? fileFormatIcon || documentTypeIcon || providerIcon : providerIcon || fileFormatIcon || documentTypeIcon;
+
+    case 'atlassian:Task':
+      const taskLabel = label || 'Task';
+
+      if (isJiraProvider(provider)) {
+        const {
+          taskType,
+          taskIcon
+        } = extractTask(data);
+        return taskType === 'JiraCustomTaskType' ? taskIcon || urlIcon || providerIcon || [IconType.Task, taskLabel] : extractJiraTaskIcon(taskType, taskLabel);
+      }
+
+      return [IconType.Task, taskLabel];
+
+    case 'atlassian:Project':
+      return urlIcon || [IconType.Project, label || 'Project'];
+
+    case 'atlassian:SourceCodeCommit':
+      return [IconType.Commit, label || 'Commit'];
+
+    case 'atlassian:SourceCodePullRequest':
+      return [IconType.PullRequest, label || 'Pull request'];
+
+    case 'atlassian:SourceCodeReference':
+      return [IconType.Branch, label || 'Reference'];
+
+    case 'atlassian:SourceCodeRepository':
+      return [IconType.Repo, label || 'Repository'];
+
+    default:
+      return providerIcon;
+  }
+};
+
+export default extractJsonldDataIcon;

package/dist/es2019/extractors/flexible/icon/extract-provider-icon.js

@@ -0,0 +1,17 @@
+import { CONFLUENCE_GENERATOR_ID, JIRA_GENERATOR_ID } from '../../constants';
+import { IconType } from '../../../constants';
+import extractUrlIcon from './extract-url-icon';
+
+const extractProviderIcon = (provider, icon, label) => {
+  if (provider === CONFLUENCE_GENERATOR_ID) {
+    return [IconType.Confluence, label || 'Confluence'];
+  }
+
+  if (provider === JIRA_GENERATOR_ID) {
+    return [IconType.Jira, label || 'Jira'];
+  }
+
+  return extractUrlIcon(icon, label);
+};
+
+export default extractProviderIcon;

package/dist/es2019/extractors/flexible/icon/extract-url-icon.js

@@ -0,0 +1,8 @@
+import { extractUrlFromIconJsonLd } from '../../common/utils';
+
+const extractUrlIcon = (icon, label) => {
+  const url = icon && extractUrlFromIconJsonLd(icon);
+  return url ? [undefined, label, url] : undefined;
+};
+
+export default extractUrlIcon;

package/dist/es2019/extractors/flexible/icon/index.js

@@ -0,0 +1,52 @@
+import extractJsonldDataIcon from './extract-jsonld-data-icon';
+import extractProviderIcon from './extract-provider-icon';
+import { IconType, SmartLinkStatus } from '../../../constants';
+import extractIconRenderer from './extract-icon-renderer';
+export const extractLinkIcon = (response, renderers) => {
+  const data = response.data;
+  const [icon, label, url] = extractJsonldDataIcon(data) || [];
+  const render = extractIconRenderer(data, renderers);
+  return {
+    icon,
+    label,
+    render,
+    url
+  };
+};
+export const extractErrorIcon = (response, status) => {
+  // Try to get provider icon first.
+  if (response) {
+    const data = response.data;
+    const generator = data.generator;
+    const provider = generator === null || generator === void 0 ? void 0 : generator['@id'];
+    const [icon,, url] = extractProviderIcon(provider, generator === null || generator === void 0 ? void 0 : generator.icon) || [];
+
+    if (icon || url) {
+      return {
+        icon,
+        url
+      };
+    }
+  } // Otherwise, use fallback icon for each status.
+
+
+  switch (status) {
+    case SmartLinkStatus.Forbidden:
+    case SmartLinkStatus.Unauthorized:
+      return {
+        icon: IconType.Forbidden
+      };
+
+    case SmartLinkStatus.NotFound:
+      return {
+        icon: IconType.Error
+      };
+
+    case SmartLinkStatus.Errored:
+    case SmartLinkStatus.Fallback:
+    default:
+      return {
+        icon: IconType.Default
+      };
+  }
+};

package/dist/es2019/extractors/flexible/icon/types.js

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

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

@@ -0,0 +1,36 @@
+import { extractLink, extractTitle } from '../common/primitives';
+import { extractLozenge } from '../common/lozenge';
+import { extractLinkIcon } from './icon';
+import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount } from './utils';
+import { extractPersonCreatedBy } from '../common/person';
+import { extractPersonsUpdatedBy } from './collaboratorGroup';
+import { extractDateUpdated } from '../common/date/extractDateUpdated';
+import { extractDateCreated } from '../common/date/extractDateCreated';
+import extractPriority from './extract-priority';
+
+const extractFlexibleUiContext = (response, renderers) => {
+  if (!response) {
+    return undefined;
+  }
+
+  const data = response.data;
+  const url = extractLink(data);
+  return {
+    authorGroup: extractPersonCreatedBy(data),
+    collaboratorGroup: extractPersonsUpdatedBy(data),
+    commentCount: extractCommentCount(data),
+    createdBy: extractCreatedBy(data),
+    createdOn: extractDateCreated(data),
+    linkIcon: extractLinkIcon(response, renderers),
+    modifiedBy: extractModifiedBy(data),
+    modifiedOn: extractDateUpdated(data),
+    priority: extractPriority(data),
+    programmingLanguage: extractProgrammingLanguage(data),
+    state: extractLozenge(data),
+    subscriberCount: extractSubscriberCount(data),
+    title: extractTitle(data) || url,
+    url
+  };
+};
+
+export default extractFlexibleUiContext;

package/dist/es2019/extractors/flexible/utils.js

@@ -0,0 +1,23 @@
+import { extractPersonCreatedBy, extractPersonUpdatedBy } from '../common/person';
+
+const extractValue = (data, key) => {
+  return data === null || data === void 0 ? void 0 : data[key];
+};
+
+export const extractCommentCount = data => extractValue(data, 'schema:commentCount');
+export const extractCreatedBy = data => {
+  const persons = extractPersonCreatedBy(data);
+
+  if (persons && persons.length) {
+    return persons[0].name;
+  }
+};
+export const extractModifiedBy = data => {
+  const person = extractPersonUpdatedBy(data);
+
+  if (person) {
+    return person.name;
+  }
+};
+export const extractProgrammingLanguage = data => extractValue(data, 'schema:programmingLanguage');
+export const extractSubscriberCount = data => extractValue(data, 'atlassian:subscriberCount');

package/dist/es2019/index.js

@@ -5,9 +5,12 @@ export { APIError } from './client/errors';
 export { Card } from './view/Card';
 export { default as Context } from './state/context';
 export { EmbedResizeMessageListener } from './view/EmbedCard/EmbedResizeMessageListener';
-export { embedHeaderHeight } from '@atlaskit/media-ui/embeds';
+export { embedHeaderHeight } from './view/EmbedCard/components/styled';
 export { SmartLinkEvents } from './utils/analytics/analytics';
 export { useSmartLinkEvents } from './view/SmartLinkEvents/useSmartLinkEvents'; // Classnames for integrators
 
-export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName } from '@atlaskit/media-ui/classNames';
-export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback';
+export { contentFooterClassName, metadataListClassName, blockCardResolvingViewClassName, blockCardResolvedViewClassName, blockCardForbiddenViewClassName, blockCardIconImageClassName, blockCardResolvedViewByClassName, blockCardForbiddenViewLinkClassName, blockCardContentClassName, blockCardContentHeaderClassName, blockCardContentHeaderNameClassName, blockCardNotFoundViewClassName, blockCardErroredViewClassName } from './classNames';
+export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback'; // Flexible UI
+
+export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
+export { MetadataBlock, TitleBlock } from './view/FlexibleCard/components/blocks';

package/dist/es2019/messages.js

@@ -0,0 +1,128 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  cannot_connect: {
+    id: 'fabric.linking.cannot_connect',
+    defaultMessage: "Can't connect, try again",
+    description: 'Error for when a provided link is not found.'
+  },
+  cannot_find_link: {
+    id: 'fabric.linking.cannot_find_link',
+    defaultMessage: "Can't find link",
+    description: 'Error for when a provided link is not found.'
+  },
+  click_to_join: {
+    id: 'fabric.linking.click_to_join',
+    defaultMessage: 'Join {context} to view this issue',
+    description: 'Allows the user join the product or service immediately'
+  },
+  connect_link_account: {
+    id: 'fabric.linking.connect_link_account',
+    defaultMessage: 'Connect to preview',
+    description: 'Shown when a user does not have access to a link, but can connect their external account to view the link.'
+  },
+  created_by: {
+    id: 'fabric.linking.created_by',
+    defaultMessage: 'Created by {context}',
+    description: 'Indicates the person or entity that created the resource.'
+  },
+  created_on: {
+    id: 'fabric.linking.create_on',
+    defaultMessage: 'Created {context}',
+    description: 'Indicated when entity was created'
+  },
+  delete: {
+    id: 'fabric.linking.delete',
+    defaultMessage: 'Delete',
+    description: 'Allow a user to delete a link'
+  },
+  modified_by: {
+    id: 'fabric.linking.updated_by',
+    defaultMessage: 'Modified by {context}',
+    description: 'Indicates the person or entity that modified the resource.'
+  },
+  modified_on: {
+    id: 'fabric.linking.modified_on',
+    defaultMessage: 'Updated {context}',
+    description: 'Indicated when entity was modified'
+  },
+  priority_blocker: {
+    id: 'fabric.linking.priority_blocker',
+    defaultMessage: 'Blocker',
+    description: 'Indicated priority as blocker'
+  },
+  priority_critical: {
+    id: 'fabric.linking.priority_critical',
+    defaultMessage: 'Critical',
+    description: 'Indicated priority as critical'
+  },
+  priority_high: {
+    id: 'fabric.linking.priority_high',
+    defaultMessage: 'High',
+    description: 'Indicated priority as high'
+  },
+  priority_highest: {
+    id: 'fabric.linking.priority_highest',
+    defaultMessage: 'Highest',
+    description: 'Indicated priority as highest'
+  },
+  priority_low: {
+    id: 'fabric.linking.priority_low',
+    defaultMessage: 'Low',
+    description: 'Indicated priority as low'
+  },
+  priority_lowest: {
+    id: 'fabric.linking.priority_lowest',
+    defaultMessage: 'Lowest',
+    description: 'Indicated priority as lowest'
+  },
+  priority_major: {
+    id: 'fabric.linking.priority_major',
+    defaultMessage: 'Major',
+    description: 'Indicated priority as major'
+  },
+  priority_medium: {
+    id: 'fabric.linking.priority_medium',
+    defaultMessage: 'Medium',
+    description: 'Indicated priority as medium'
+  },
+  priority_minor: {
+    id: 'fabric.linking.priority_minor',
+    defaultMessage: 'Minor',
+    description: 'Indicated priority as minor'
+  },
+  priority_trivial: {
+    id: 'fabric.linking.priority_trivial',
+    defaultMessage: 'Trivial',
+    description: 'Indicated priority as trivial'
+  },
+  priority_undefined: {
+    id: 'fabric.linking.priority_undefined',
+    defaultMessage: 'Undefined',
+    description: 'Indicated priority as unknown'
+  },
+  forbidden_access: {
+    id: 'fabric.linking.forbidden_access',
+    defaultMessage: 'Your access is forbidden',
+    description: 'Shown when a user does not have access to a resource behind the link.'
+  },
+  pending_request: {
+    id: 'fabric.linking.pending_request',
+    defaultMessage: 'Your access request is pending',
+    description: 'Shown when a user has requested an access but status is pending.'
+  },
+  restricted_link: {
+    id: 'fabric.linking.invalid_permissions',
+    defaultMessage: 'Restricted link, try another account',
+    description: 'Message shown when a user does not have permissions to view an item'
+  },
+  request_access: {
+    id: 'fabric.linking.request_access',
+    defaultMessage: 'Request access to {context} to view this issue',
+    description: 'Allows the user to request access to a product or service'
+  },
+  request_denied: {
+    id: 'fabric.linking.request_denied',
+    defaultMessage: 'Your access request was denied',
+    description: 'The user had request access but the request was denied by a product or service'
+  }
+});

package/dist/es2019/providers/editor/transformer.js

@@ -2,7 +2,7 @@ const isJiraRoadMap = url => url.match(/^https:\/\/.*?\/jira\/software\/(c\/)?pr
 
 const isPolarisView = url => url.match(/^https:\/\/.*?\/jira\/polaris\/projects\/[^\/]+?\/ideas\/view\/\d+$|^https:\/\/.*?\/secure\/JiraProductDiscoveryAnonymous\.jspa\?hash=\w+|^https:\/\/.*?\/jira\/polaris\/share\/\w+/);
 
-const isJwmView = url => url.match(/^https:\/\/.*?\/jira\/core\/projects\/[^\/]+?\/(timeline|calendar)\/?/);
+const isJwmView = url => url.match(/^https:\/\/.*?\/jira\/core\/projects\/[^\/]+?\/(timeline|calendar|list|board)\/?/);
 
 const isSlackMessage = url => url.match(/^https:\/\/.+?\.slack\.com\/archives\/[CG][A-Z0-9]+\/p[0-9]+(\?.*)?$/);
 

package/dist/es2019/ssr.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { useState } from 'react';
+import uuid from 'uuid';
+import { CardWithUrlContent } from './view/CardWithUrl/component';
+// SSR friendly version of smart-card
+// simplifies the logic around rendering and loading placeholders and
+// only contains whats necessary to render the card on SSR mode
+export const CardSSR = props => {
+  const [id] = useState(() => uuid());
+
+  const dispatchAnalytics = () => {}; // we can't dispatch events on SSR, after hydration the we will provide the real callback
+
+
+  return /*#__PURE__*/React.createElement(CardWithUrlContent, _extends({}, props, {
+    id: id,
+    dispatchAnalytics: dispatchAnalytics
+  }));
+};

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

@@ -0,0 +1,3 @@
+import { useContext, createContext } from 'react';
+export const FlexibleUiContext = /*#__PURE__*/createContext(undefined);
+export const useFlexibleUiContext = () => useContext(FlexibleUiContext);

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

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

package/dist/es2019/utils/flexible.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import * as Blocks from '../view/FlexibleCard/components/blocks';
+import { TitleBlock } from '../view/FlexibleCard/components/blocks';
+import * as Elements from '../view/FlexibleCard/components/elements';
+export const isFlexibleUiCard = (appearance, children) => {
+  if ((appearance === 'inline' || appearance === 'block') && children && React.Children.toArray(children).some(child => isFlexibleUiBlock(child))) {
+    return true;
+  }
+
+  return false;
+};
+export const isFlexibleUiBlock = node => /*#__PURE__*/React.isValidElement(node) && Object.values(Blocks).some(type => type === node.type);
+export const isFlexibleUiElement = node => /*#__PURE__*/React.isValidElement(node) && Object.values(Elements).some(type => type === node.type);
+export const isFlexibleUiTitleBlock = node => /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;

package/dist/es2019/utils/index.js

@@ -93,4 +93,10 @@ const typeToIcon = {
   // TODO: Figure a way to detect those
   'application/sketch': ['Sketch', () => import('@atlaskit/icon-file-type/glyph/sketch/16')],
   folder: ['Folder', () => import('@atlaskit/icon-file-type/glyph/folder/16')]
+};
+export const getIframeSandboxAttribute = isTrusted => isTrusted ? undefined : 'allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts';
+export const handleOnClick = handler => e => {
+  e.preventDefault();
+  e.stopPropagation();
+  handler();
 };

package/dist/es2019/utils/token.js

@@ -0,0 +1,23 @@
+import { token } from '@atlaskit/tokens'; // Temporary safeguard while @atlaskit/tokens is being developed
+
+export const safeToken = (path, fallback) => {
+  try {
+    return token(path, fallback);
+  } catch (e) {
+    return fallback;
+  }
+};
+export const tokens = {
+  actionIcon: safeToken('color.icon', '#44546F'),
+  background: safeToken('elevation.surface', '#FFFFFF'),
+  badgeIcon: safeToken('color.icon.subtle', '#626F86'),
+  badgeText: safeToken('color.text.subtlest', '#626F86'),
+  blackLink: safeToken('color.text.subtle', '#44546F'),
+  blackLinkPressed: safeToken('color.text', '#172B4D'),
+  blueLink: safeToken('color.link', '#0C66E4'),
+  blueLinkPressed: safeToken('color.link.pressed', '#0055CC'),
+  elevation: safeToken('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
+  errorMessage: safeToken('color.text.disabled', '#6B778C'),
+  errorMessageHover: safeToken('color.text.subtle', '#8993A4'),
+  text: safeToken('color.text.subtlest', '#626F86')
+};

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/actions/AuthorizeAction.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export const AuthorizeAction = handler => ({
+  id: 'connect-account',
+  text: /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_card),
+  promise: () => new Promise(resolve => resolve(handler())),
+  buttonAppearance: 'default'
+});

package/dist/es2019/view/BlockCard/actions/DownloadAction.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { downloadUrl } from '@atlaskit/media-common';
+import { messages } from '@atlaskit/media-ui/messages';
+export async function downloadFunction({
+  url
+}) {
+  if (!url) {
+    return;
+  }
+
+  downloadUrl(url);
+}
+export const DownloadAction = ({
+  url
+}) => ({
+  id: 'download-content',
+  text: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
+  promise: () => downloadFunction({
+    url
+  })
+});

package/dist/es2019/view/BlockCard/actions/ForbiddenAction.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export const ForbiddenAction = (handler, id = 'connect-other-account', message = messages.try_another_account, context = '') => ({
+  id,
+  text: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, message, {
+    values: {
+      context
+    }
+  })),
+  promise: () => new Promise(resolve => resolve(handler())),
+  buttonAppearance: 'default'
+});

package/dist/es2019/view/BlockCard/actions/PreviewAction.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { IntlProvider, FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+
+/*
+  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 async function previewFunction({
+  popupMountPointId,
+  onClose,
+  ...rest
+}) {
+  let popupMountPoint;
+  popupMountPoint = document.getElementById(popupMountPointId);
+
+  if (!popupMountPoint) {
+    popupMountPoint = document.createElement('div');
+    popupMountPoint.id = popupMountPointId;
+    popupMountPoint.setAttribute('data-testid', 'preview-modal');
+    document.body.appendChild(popupMountPoint);
+  }
+
+  let Modal = await import('../components/Modal');
+  ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: "en"
+  }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
+    onClose: () => {
+      if (popupMountPoint) {
+        onClose();
+        ReactDOM.unmountComponentAtNode(popupMountPoint);
+      }
+    }
+  }))), popupMountPoint);
+}
+/*
+Most of these are optional as we are being fault-tolerant
+However src, details, icon, title, and providerName are STRONGLY encouraged
+*/
+
+export default (({
+  details,
+  ...rest
+}) => ({
+  id: 'preview-content',
+  text: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview),
+  promise: () => previewFunction({
+    popupMountPointId: 'twp-editor-preview-iframe',
+    providerName: 'Preview',
+    closeLabel: 'Close Preview',
+    showModal: true,
+    iframeName: 'twp-editor-preview-iframe',
+    onClose: () => {},
+    metadata: {
+      items: details || []
+    },
+    ...rest
+  })
+}));

package/dist/es2019/view/BlockCard/actions/RetryAction.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export const RetryAction = handler => ({
+  id: 'try-again',
+  promise: async () => handler(),
+  text: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)
+});