@atlaskit/smart-card 21.1.1 → 21.1.4

package/dist/es2019/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import Button from '@atlaskit/button/custom-theme-button';
+
+const LinkInfoButton = ({
+  content,
+  href,
+  icon,
+  onClick,
+  target,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: content,
+    hideTooltipOnClick: true,
+    position: "top",
+    tag: "span",
+    testId: `${testId}-tooltip`
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    href: href,
+    iconBefore: icon,
+    onClick: onClick,
+    spacing: "none",
+    target: target,
+    testId: `${testId}-button`
+  }));
+};
+
+export default LinkInfoButton;

package/dist/es2019/view/EmbedModal/components/link-info/link-info-button/types.js

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

package/dist/es2019/view/EmbedModal/components/link-info/styled.js

@@ -0,0 +1,63 @@
+import { css } from '@emotion/core';
+export const containerStyles = css`
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  // AK ModalBody has 2px padding top and bottom.
+  // Using 14px here to create 16px gap between
+  // link info and iframe
+  padding: 24px 24px 14px 24px;
+`;
+const iconSize = '24px';
+export const iconCss = css`
+  img,
+  span,
+  svg {
+    height: ${iconSize};
+    min-height: ${iconSize};
+    max-height: ${iconSize};
+    width: ${iconSize};
+    min-width: ${iconSize};
+    max-width: ${iconSize};
+  }
+`;
+const height = '20px';
+export const titleCss = css`
+  flex: 1 1 auto;
+
+  h3 {
+    flex: 1 1 auto;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: ${height};
+
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    // Fallback options
+    @supports not (-webkit-line-clamp: 1) {
+      max-height: ${height};
+    }
+  }
+`;
+export const actionCss = css`
+  display: flex;
+  flex: 0 0 auto;
+  gap: 4px;
+  line-height: ${height};
+  span {
+    line-height: ${height};
+  }
+
+  @media only screen and (max-width: 980px) {
+    // Hide resize button if the screen is smaller than the min width
+    // or too small to have enough impact to matter.
+    .smart-link-resize-button {
+      display: none;
+    }
+  }
+`;

package/dist/es2019/view/EmbedModal/components/link-info/types.js

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

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

@@ -0,0 +1,2 @@
+export const MAX_MODAL_SIZE = '100%';
+export const MIN_MODAL_SIZE = 'large';

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

@@ -0,0 +1,57 @@
+import React, { useCallback, useState } from 'react';
+import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
+import LinkInfo from './components/link-info';
+import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from './constants';
+import EmbedContent from './components/embed-content';
+import withErrorBoundary from './components/error-boundary';
+
+const EmbedModal = ({
+  download: downloadUrl,
+  icon,
+  iframeName,
+  isTrusted = false,
+  onClose,
+  onDownloadActionClick,
+  onOpen,
+  onViewActionClick,
+  providerName,
+  showModal,
+  src,
+  testId = 'smart-links-preview-modal',
+  title,
+  url
+}) => {
+  const [isOpen, setIsOpen] = useState(showModal);
+  const [size, setSize] = useState(MIN_MODAL_SIZE);
+  const handleOnClose = useCallback(() => setIsOpen(false), []);
+  const handleOnSizeClick = useCallback(() => {
+    const newSize = size === MIN_MODAL_SIZE ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
+    setSize(newSize);
+  }, [size]);
+  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
+    height: "100%",
+    onClose: handleOnClose,
+    onCloseComplete: onClose,
+    onOpenComplete: onOpen,
+    testId: testId,
+    width: size
+  }, /*#__PURE__*/React.createElement(LinkInfo, {
+    downloadUrl: downloadUrl,
+    icon: icon,
+    providerName: providerName,
+    onViewButtonClick: onViewActionClick,
+    onDownloadButtonClick: onDownloadActionClick,
+    onResizeButtonClick: handleOnSizeClick,
+    size: size,
+    title: title,
+    testId: testId,
+    url: url
+  }), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
+    isTrusted: isTrusted,
+    name: iframeName,
+    src: src,
+    testId: testId
+  }))));
+};
+
+export default withErrorBoundary(EmbedModal);

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

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

package/dist/esm/messages.js

@@ -165,6 +165,21 @@ export var messages = defineMessages({
     defaultMessage: 'Preview',
     description: 'Click to view a richer view of your content, without needing to navigate to it.'
   },
+  preview_close: {
+    id: 'fabric.linking.preview_close',
+    defaultMessage: 'Close preview',
+    description: 'Click to close embed preview modal.'
+  },
+  preview_max_size: {
+    id: 'fabric.linking.preview_max_size',
+    defaultMessage: 'View full screen',
+    description: 'Click to increase embed preview modal size to a maximum viewing size.'
+  },
+  preview_min_size: {
+    id: 'fabric.linking.preview_min_size',
+    defaultMessage: 'Close full screen',
+    description: 'Click to decrease embed preview modal size to a minimum viewing size.'
+  },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',
     defaultMessage: 'Blocker',

package/dist/esm/version.json

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

package/dist/esm/view/EmbedModal/components/embed-content/index.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { getIframeSandboxAttribute } from '../../../../utils';
+var iframeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: calc(100vh - 208px);\n"])));
+
+var EmbedContent = function EmbedContent(_ref) {
+  var isTrusted = _ref.isTrusted,
+      name = _ref.name,
+      src = _ref.src,
+      testId = _ref.testId;
+  var sandbox = getIframeSandboxAttribute(isTrusted);
+  var props = {
+    css: iframeCss,
+    frameBorder: 0,
+    name: name,
+    sandbox: sandbox,
+    src: src,
+    'data-testid': "".concat(testId, "-embed")
+  };
+  return src ? jsx("iframe", _extends({
+    src: src
+  }, props)) : jsx("iframe", props);
+};
+
+export default EmbedContent;

package/dist/esm/view/EmbedModal/components/embed-content/types.js

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

package/dist/esm/view/EmbedModal/components/error-boundary/index.js

@@ -0,0 +1,23 @@
+import React, { useCallback } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+var FallbackComponent = function FallbackComponent() {
+  return /*#__PURE__*/React.createElement("span", null);
+};
+
+var withErrorBoundary = function withErrorBoundary(Component) {
+  return function (props) {
+    var onOpenFailed = props.onOpenFailed;
+    var onError = useCallback(function (error, errorInfo) {
+      if (onOpenFailed) {
+        onOpenFailed(error, errorInfo);
+      }
+    }, [onOpenFailed]);
+    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      FallbackComponent: FallbackComponent,
+      onError: onError
+    }, /*#__PURE__*/React.createElement(Component, props));
+  };
+};
+
+export default withErrorBoundary;

package/dist/esm/view/EmbedModal/components/link-info/index.js

@@ -0,0 +1,100 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { useModal } from '@atlaskit/modal-dialog';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import DownloadIcon from '@atlaskit/icon/glyph/download';
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import VidFullScreenOnIcon from '@atlaskit/icon/glyph/vid-full-screen-on';
+import VidFullScreenOffIcon from '@atlaskit/icon/glyph/vid-full-screen-off';
+import { Icon } from '../../../common/Icon';
+import { messages } from '../../../../messages';
+import { MAX_MODAL_SIZE } from '../../constants';
+import LinkInfoButton from './link-info-button';
+import { actionCss, containerStyles, iconCss, titleCss } from './styled';
+
+var LinkInfo = function LinkInfo(_ref) {
+  var downloadUrl = _ref.downloadUrl,
+      icon = _ref.icon,
+      providerName = _ref.providerName,
+      onDownloadButtonClick = _ref.onDownloadButtonClick,
+      onResizeButtonClick = _ref.onResizeButtonClick,
+      onViewButtonClick = _ref.onViewButtonClick,
+      size = _ref.size,
+      testId = _ref.testId,
+      title = _ref.title,
+      url = _ref.url;
+
+  var _useModal = useModal(),
+      onClose = _useModal.onClose;
+
+  var downloadButton = useMemo(function () {
+    if (downloadUrl) {
+      return jsx(LinkInfoButton, {
+        content: jsx(FormattedMessage, messages.download),
+        href: downloadUrl,
+        icon: jsx(DownloadIcon, {
+          label: messages.download.defaultMessage
+        }),
+        onClick: onDownloadButtonClick,
+        testId: "".concat(testId, "-download")
+      });
+    }
+  }, [downloadUrl, onDownloadButtonClick, testId]);
+  var urlButton = useMemo(function () {
+    if (url) {
+      var content = providerName ? jsx(React.Fragment, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal);
+      return jsx(LinkInfoButton, {
+        content: content,
+        href: url,
+        icon: jsx(ShortcutIcon, {
+          label: messages.viewOriginal.defaultMessage
+        }),
+        onClick: onViewButtonClick,
+        target: "_blank",
+        testId: "".concat(testId, "-url")
+      });
+    }
+  }, [onViewButtonClick, providerName, testId, url]);
+  var sizeButton = useMemo(function () {
+    var isFullScreen = size === MAX_MODAL_SIZE;
+    var message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;
+    var icon = isFullScreen ? jsx(VidFullScreenOffIcon, {
+      label: message.defaultMessage
+    }) : jsx(VidFullScreenOnIcon, {
+      label: message.defaultMessage
+    });
+    return jsx("span", {
+      className: "smart-link-resize-button"
+    }, jsx(LinkInfoButton, {
+      content: jsx(FormattedMessage, message),
+      icon: icon,
+      onClick: onResizeButtonClick,
+      testId: "".concat(testId, "-resize")
+    }));
+  }, [onResizeButtonClick, size, testId]);
+  return jsx("div", {
+    css: containerStyles
+  }, icon && jsx("div", {
+    css: iconCss,
+    "data-testid": "".concat(testId, "-icon")
+  }, jsx(Icon, icon)), jsx("div", {
+    css: titleCss
+  }, jsx("h3", {
+    "data-testid": "".concat(testId, "-title")
+  }, title), jsx("span", {
+    tabIndex: 0
+  })), jsx("div", {
+    css: actionCss
+  }, downloadButton, urlButton, sizeButton, jsx(LinkInfoButton, {
+    content: jsx(FormattedMessage, messages.preview_close),
+    icon: jsx(CrossIcon, {
+      label: messages.preview_close.defaultMessage
+    }),
+    onClick: onClose,
+    testId: "".concat(testId, "-close")
+  })));
+};
+
+export default LinkInfo;

package/dist/esm/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import Button from '@atlaskit/button/custom-theme-button';
+
+var LinkInfoButton = function LinkInfoButton(_ref) {
+  var content = _ref.content,
+      href = _ref.href,
+      icon = _ref.icon,
+      onClick = _ref.onClick,
+      target = _ref.target,
+      testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: content,
+    hideTooltipOnClick: true,
+    position: "top",
+    tag: "span",
+    testId: "".concat(testId, "-tooltip")
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    href: href,
+    iconBefore: icon,
+    onClick: onClick,
+    spacing: "none",
+    target: target,
+    testId: "".concat(testId, "-button")
+  }));
+};
+
+export default LinkInfoButton;

package/dist/esm/view/EmbedModal/components/link-info/link-info-button/types.js

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

package/dist/esm/view/EmbedModal/components/link-info/styled.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import { css } from '@emotion/core';
+export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: 24px 24px 14px 24px;\n"])));
+var iconSize = '24px';
+export var iconCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
+var height = '20px';
+export var titleCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: ", ";\n\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: ", ";\n    }\n  }\n"])), height, height);
+export var actionCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: 4px;\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), height, height);

package/dist/esm/view/EmbedModal/components/link-info/types.js

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

package/dist/esm/view/EmbedModal/constants.js

@@ -0,0 +1,2 @@
+export var MAX_MODAL_SIZE = '100%';
+export var MIN_MODAL_SIZE = 'large';

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

@@ -0,0 +1,70 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
+import LinkInfo from './components/link-info';
+import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from './constants';
+import EmbedContent from './components/embed-content';
+import withErrorBoundary from './components/error-boundary';
+
+var EmbedModal = function EmbedModal(_ref) {
+  var downloadUrl = _ref.download,
+      icon = _ref.icon,
+      iframeName = _ref.iframeName,
+      _ref$isTrusted = _ref.isTrusted,
+      isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
+      onClose = _ref.onClose,
+      onDownloadActionClick = _ref.onDownloadActionClick,
+      onOpen = _ref.onOpen,
+      onViewActionClick = _ref.onViewActionClick,
+      providerName = _ref.providerName,
+      showModal = _ref.showModal,
+      src = _ref.src,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-links-preview-modal' : _ref$testId,
+      title = _ref.title,
+      url = _ref.url;
+
+  var _useState = useState(showModal),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = useState(MIN_MODAL_SIZE),
+      _useState4 = _slicedToArray(_useState3, 2),
+      size = _useState4[0],
+      setSize = _useState4[1];
+
+  var handleOnClose = useCallback(function () {
+    return setIsOpen(false);
+  }, []);
+  var handleOnSizeClick = useCallback(function () {
+    var newSize = size === MIN_MODAL_SIZE ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
+    setSize(newSize);
+  }, [size]);
+  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
+    height: "100%",
+    onClose: handleOnClose,
+    onCloseComplete: onClose,
+    onOpenComplete: onOpen,
+    testId: testId,
+    width: size
+  }, /*#__PURE__*/React.createElement(LinkInfo, {
+    downloadUrl: downloadUrl,
+    icon: icon,
+    providerName: providerName,
+    onViewButtonClick: onViewActionClick,
+    onDownloadButtonClick: onDownloadActionClick,
+    onResizeButtonClick: handleOnSizeClick,
+    size: size,
+    title: title,
+    testId: testId,
+    url: url
+  }), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
+    isTrusted: isTrusted,
+    name: iframeName,
+    src: src,
+    testId: testId
+  }))));
+};
+
+export default withErrorBoundary(EmbedModal);

package/dist/esm/view/EmbedModal/types.js

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

package/dist/types/messages.d.ts

@@ -1,6 +1,6 @@
 import { MessageDescriptor } from 'react-intl-next';
 export declare type RequestAccessMessageKey = 'click_to_join' | 'click_to_join_description' | 'forbidden_description' | 'request_access' | 'request_access_description' | 'request_access_pending' | 'request_access_pending_description' | 'request_denied_description';
-export declare type MessageKey = 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'could_not_load_link' | 'download' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'loading' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'preview' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'try_again' | 'try_another_account' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
+export declare type MessageKey = 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'could_not_load_link' | 'download' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'loading' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'preview' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'try_again' | 'try_another_account' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
 declare type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/dist/types/view/EmbedModal/components/embed-content/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { EmbedProps } from './types';
+declare const EmbedContent: FC<EmbedProps>;
+export default EmbedContent;

package/dist/types/view/EmbedModal/components/embed-content/types.d.ts

@@ -0,0 +1,6 @@
+export declare type EmbedProps = {
+    isTrusted: boolean;
+    name: string;
+    src?: string;
+    testId?: string;
+};

package/dist/types/view/EmbedModal/components/error-boundary/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { EmbedModalProps } from '../../types';
+declare const withErrorBoundary: (Component: React.ComponentType<EmbedModalProps>) => React.FC<EmbedModalProps>;
+export default withErrorBoundary;

package/dist/types/view/EmbedModal/components/link-info/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LinkInfoProps } from './types';
+declare const LinkInfo: React.FC<LinkInfoProps>;
+export default LinkInfo;

package/dist/types/view/EmbedModal/components/link-info/link-info-button/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LinkInfoButtonProps } from './types';
+declare const LinkInfoButton: React.FC<LinkInfoButtonProps>;
+export default LinkInfoButton;

package/dist/types/view/EmbedModal/components/link-info/link-info-button/types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare type LinkInfoButtonProps = {
+    content: React.ReactNode;
+    icon: React.ReactChild;
+    onClick?: () => void;
+    href?: string;
+    target?: string;
+    testId?: string;
+};

package/dist/types/view/EmbedModal/components/link-info/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const containerStyles: import("@emotion/utils").SerializedStyles;
+export declare const iconCss: import("@emotion/utils").SerializedStyles;
+export declare const titleCss: import("@emotion/utils").SerializedStyles;
+export declare const actionCss: import("@emotion/utils").SerializedStyles;

package/dist/types/view/EmbedModal/components/link-info/types.d.ts

@@ -0,0 +1,13 @@
+import { IconProps } from '../../../common/Icon';
+export declare type LinkInfoProps = {
+    downloadUrl?: string;
+    icon?: IconProps;
+    providerName?: string;
+    onDownloadButtonClick?: () => void;
+    onResizeButtonClick?: () => void;
+    onViewButtonClick?: () => void;
+    size?: string;
+    testId?: string;
+    title?: string;
+    url?: string;
+};

package/dist/types/view/EmbedModal/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MAX_MODAL_SIZE = "100%";
+export declare const MIN_MODAL_SIZE = "large";

package/dist/types/view/EmbedModal/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { EmbedModalProps } from './types';
+declare const _default: React.FC<EmbedModalProps>;
+export default _default;

package/dist/types/view/EmbedModal/types.d.ts

@@ -0,0 +1,20 @@
+import { ErrorInfo } from 'react';
+import { IconProps } from '../common/Icon';
+export declare type EmbedModalProps = {
+    closeLabel?: string;
+    download?: string;
+    icon?: IconProps;
+    iframeName: string;
+    isTrusted?: boolean;
+    onClose: () => any;
+    onDownloadActionClick?: () => void;
+    onOpen?: () => void;
+    onOpenFailed?: (error: Error, errorInfo: ErrorInfo) => void;
+    onViewActionClick?: () => void;
+    providerName?: string;
+    showModal?: boolean;
+    src?: string;
+    testId?: string;
+    title?: string;
+    url?: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "21.1.1",
+  "version": "21.1.4",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -58,7 +58,7 @@
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
-    "@atlaskit/link-provider": "^1.2.0",
+    "@atlaskit/link-provider": "^1.2.4",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1"
@@ -109,8 +109,8 @@
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
     "react-test-renderer": "^16.8.0",
-    "ts-jest": "24.3.0",
-    "typescript": "4.2.4",
+    "ts-jest": "26.5.6",
+    "typescript": "4.3.5",
     "xhr-mock": "^2.4.0"
   },
   "af:exports": {