@atlaskit/media-card 77.11.3 → 77.12.0

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.11.3";
+const packageVersion = "77.12.0";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/ui/styles.js

@@ -1,5 +1,3 @@
-import { css } from '@emotion/react';
-import { borderRadius } from '@atlaskit/media-ui';
 import { N60A } from '@atlaskit/theme/colors';
 import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
 import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
@@ -65,15 +63,6 @@ export const getSelectableTickBoxStyles = isTickBoxSelectable => {
     }
   `;
 };
-export const cardImageContainerStyles = css({
-  display: 'flex',
-  position: 'relative',
-  maxWidth: '100%',
-  width: '100%',
-  height: '100%',
-  maxHeight: '100%',
-  overflow: 'hidden'
-}, borderRadius);
 const defaultTransitionDuration = '.3s';
 export const transition = (propertyName = 'all') => `
   transition: ${propertyName} ${defaultTransitionDuration};

package/dist/es2019/card/ui/wrapper/imageContainer.js

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
+import { fileCardImageViewSelector } from '../../classnames';
+const imageContainerStyles = css({
+  display: 'flex',
+  position: 'relative',
+  maxWidth: '100%',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden',
+  borderRadius: "var(--ds-border-radius, 3px)"
+});
+const imageContainerCenterStyles = css({
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+export const ImageContainer = ({
+  children,
+  testId,
+  mediaName,
+  status,
+  progress,
+  selected,
+  source,
+  centerElements
+}) => jsx("div", {
+  css: [imageContainerStyles, centerElements && imageContainerCenterStyles],
+  "data-testid": fileCardImageViewSelector
+  /**
+   * This wrapper MUST add the classname in order to allow the editor to prevent bubbling up the click event.
+   * See the method isInteractiveElement in source platform/packages/editor/renderer/src/ui/Renderer/click-to-edit.ts
+   * Also, many other consumer tests rely on this selector.
+   */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  ,
+  className: fileCardImageViewSelector,
+  "data-test-media-name": mediaName,
+  "data-test-status": status,
+  "data-test-progress": progress,
+  "data-test-selected": selected,
+  "data-test-source": source
+}, children);

package/dist/es2019/card/ui/wrapper/index.js

@@ -1 +1,2 @@
-export { Wrapper } from './wrapper';
+export { Wrapper } from './wrapper';
+export { ImageContainer } from './imageContainer';

package/dist/es2019/card/v2/cardV2.js

@@ -7,7 +7,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.11.3";
+const packageVersion = "77.12.0";
 export const CardV2Base = ({
   identifier,
   ...otherProps

package/dist/es2019/card/v2/cardViewV2.js

@@ -8,7 +8,6 @@ import Tooltip from '@atlaskit/tooltip';
 import { messages } from '@atlaskit/media-ui';
 import { createAndFireMediaCardEvent } from '../../utils/analytics';
 import { attachDetailsToActions } from '../actions';
-import { cardImageContainerStyles } from '../ui/styles';
 import { ImageRenderer } from '../ui/imageRenderer/imageRenderer';
 import { TitleBox } from '../ui/titleBox/titleBox';
 import { FailedTitleBox } from '../ui/titleBox/failedTitleBox';
@@ -20,7 +19,7 @@ import { ActionsBar } from '../ui/actionsBar/actionsBar';
 import { IconWrapper } from '../ui/iconWrapper/iconWrapper';
 import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from '../ui/iconMessage';
 import { isUploadError, isRateLimitedError, isPollingError } from '../../errors';
-import { Wrapper } from '../ui/wrapper';
+import { Wrapper, ImageContainer } from '../ui/wrapper';
 import { fileCardImageViewSelector } from '../classnames';
 import { useBreakpoint } from '../useBreakpoint';
 import OpenMediaViewerButton from '../ui/openMediaViewerButton/openMediaViewerButton';
@@ -74,11 +73,11 @@ export const CardViewV2Base = ({
       return;
     }
     /*
-      We render the icon & icon message always, even if there is cardPreview available.
-      If the image fails to load/render, the icon will remain, i.e. the user won't see a change until the root card decides to chage status to error.
-      If the image renders successfully, we switch this variable to hide the icon & icon message behind the thumbnail in case the image has transparency.
-      It is less likely that root component replaces a suceeded cardPreview for a failed one than the opposite case. Therefore we prefer to hide the icon instead show when the image fails, for a smoother transition
-    */
+        We render the icon & icon message always, even if there is cardPreview available.
+        If the image fails to load/render, the icon will remain, i.e. the user won't see a change until the root card decides to chage status to error.
+        If the image renders successfully, we switch this variable to hide the icon & icon message behind the thumbnail in case the image has transparency.
+        It is less likely that root component replaces a suceeded cardPreview for a failed one than the opposite case. Therefore we prefer to hide the icon instead show when the image fails, for a smoother transition
+      */
     setDidImageRender(true);
     onImageLoad === null || onImageLoad === void 0 ? void 0 : onImageLoad(cardPreview);
   };
@@ -205,17 +204,13 @@ export const CardViewV2Base = ({
     createdAt
   } = metadata || {};
   const actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
-  const contents = jsx(React.Fragment, null, jsx("div", {
-    css: cardImageContainerStyles
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: fileCardImageViewSelector,
-    "data-testid": fileCardImageViewSelector,
-    "data-test-media-name": name,
-    "data-test-status": status,
-    "data-test-progress": progress,
-    "data-test-selected": selected,
-    "data-test-source": cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
+  const contents = jsx(React.Fragment, null, jsx(ImageContainer, {
+    testId: fileCardImageViewSelector,
+    mediaName: name,
+    status: status,
+    progress: progress,
+    selected: selected,
+    source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
   }, renderTypeIcon && jsx(IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasTitleBox

package/dist/es2019/card/v2/cardviews/cardViewWrapper.js

@@ -3,9 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import React from 'react';
 import Tooltip from '@atlaskit/tooltip';
-import { Wrapper } from '../../ui/wrapper';
+import { ImageContainer, Wrapper } from '../../ui/wrapper';
 import { attachDetailsToActions } from '../../actions';
-import { cardImageContainerStyles } from '../../ui/styles';
 import { TitleBox } from '../../ui/titleBox/titleBox';
 import { TickBox } from '../../ui/tickBox/tickBox';
 import { Blanket } from '../../ui/blanket/blanket';
@@ -52,14 +51,11 @@ export const CardViewWrapper = /*#__PURE__*/React.forwardRef(({
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor
   });
-  const contents = jsx(React.Fragment, null, jsx("div", _extends({
-    css: cardImageContainerStyles
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: fileCardImageViewSelector,
-    "data-testid": fileCardImageViewSelector,
-    "data-test-media-name": name,
-    "data-test-selected": selected ? true : undefined
+  const contents = jsx(React.Fragment, null, jsx(ImageContainer, _extends({
+    testId: fileCardImageViewSelector,
+    mediaName: name,
+    status: status,
+    selected: selected ? true : undefined
   }, props), children, customBlanket ? customBlanket() : defaultBlanket, customTitleBox ? customTitleBox() : defaultTitleBox, !disableOverlay && !!selectable && jsx(TickBox, {
     selected: selected
   }), progressBar && progressBar()), !disableOverlay && actions && actions.length !== 0 && jsx(ActionsBar, {

package/dist/es2019/card/v2/fileCard.js

@@ -26,6 +26,7 @@ import { useFilePreview } from '@atlaskit/media-file-preview';
 import { performanceNow } from './performance';
 import { useContext } from 'react';
 import { DateOverrideContext } from '../../dateOverrideContext';
+import { SvgView } from './svgView';
 const LoadedCardView = getBooleanFF('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardViewV2;
 export const FileCard = ({
   appearance = 'auto',
@@ -110,6 +111,7 @@ export const FileCard = ({
   }), []);
   const [status, setStatus] = useState('loading');
   const [isPlayingFile, setIsPlayingFile] = useState(false);
+  const [shouldRenderSVG, setShouldRenderSVG] = useState(false);
   const [shouldAutoplay, setShouldAutoplay] = useState(false);
   const [previewDidRender, setPreviewDidRender] = useState(false);
   const mediaBlobUrlAttrs = useMemo(() => {
@@ -393,6 +395,23 @@ export const FileCard = ({
     }
   }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isPlayingFile, finalStatus, useInlinePlayer]);
 
+  //----------------------------------------------------------------//
+  // Switch to SVG
+  //----------------------------------------------------------------//
+
+  useEffect(() => {
+    if (getBooleanFF('platform.media-svg-rendering') &&
+    /**
+     * We need to check that the card is visible before switching to SVG
+     * in order to avoid race conditions of the ViewportDector being unmounted before
+     * it is able to set isCardVisible to true.
+     */
+    isCardVisible && metadata.mimeType === 'image/svg+xml' && disableOverlay // SVG won't be supported when overlay is on
+    ) {
+      setShouldRenderSVG(true);
+    }
+  }, [isCardVisible, disableOverlay, metadata]);
+
   //----------------------------------------------------------------//
   //----------------- fireScreenEvent ------------------------------//
   //----------------------------------------------------------------//
@@ -460,6 +479,18 @@ export const FileCard = ({
     updateFileStateRef.current();
   }, [fileState, preview, previewStatus, updateFileStateRef]);
 
+  //----------------------------------------------------------------//
+  // Shared Card View & SVG View resources
+  //----------------------------------------------------------------//
+
+  const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!preview, metadata.mediaType);
+  const onImageMouseEnter = event => {
+    onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter({
+      event,
+      mediaItemDetails: metadata
+    });
+  };
+
   //----------------------------------------------------------------//
   //---------------------- Render Card Function --------------------//
   //----------------------------------------------------------------//
@@ -478,7 +509,6 @@ export const FileCard = ({
     const nativeLazyLoad = isLazyWithOverride && !isCardVisible && preview && isSSRPreview(preview);
     // Force Media Image to always display img for SSR
     const forceSyncDisplay = !!ssr;
-    const mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!preview, metadata.mediaType);
     const card = /*#__PURE__*/React.createElement(LoadedCardView, {
       status: cardStatusOverride || finalStatus,
       error: finalError,
@@ -494,12 +524,7 @@ export const FileCard = ({
       shouldOpenMediaViewer: shouldOpenMediaViewer,
       openMediaViewerButtonRef: mediaViewerButtonRef,
       onClick: withCallbacks ? onCardViewClick : undefined,
-      onMouseEnter: withCallbacks ? event => {
-        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter({
-          event,
-          mediaItemDetails: metadata
-        });
-      } : undefined,
+      onMouseEnter: withCallbacks ? onImageMouseEnter : undefined,
       disableOverlay: disableOverlay,
       progress: uploadProgressRef.current,
       onDisplayImage: withCallbacks ? () => {
@@ -557,7 +582,25 @@ export const FileCard = ({
     testId: testId,
     cardPreview: preview,
     videoControlsWrapperRef: videoControlsWrapperRef
-  })) : renderCard(), mediaViewerSelectedItem ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+  })) : shouldRenderSVG ? /*#__PURE__*/React.createElement(SvgView, {
+    testId: testId,
+    identifier: identifier,
+    status: finalStatus,
+    fileName: metadata.name,
+    cardPreview: preview,
+    alt: alt,
+    resizeMode: resizeMode,
+    dimensions: cardDimensions,
+    selected: selected,
+    onClick: onCardViewClick,
+    onMouseEnter: onImageMouseEnter,
+    progress: uploadProgressRef.current,
+    onImageError: onImageError,
+    onImageLoad: onImageLoad,
+    mediaCardCursor: mediaCardCursor,
+    shouldOpenMediaViewer: shouldOpenMediaViewer,
+    openMediaViewerButtonRef: mediaViewerButtonRef
+  }) : renderCard(), mediaViewerSelectedItem ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
     collectionName: collectionName,
     items: mediaViewerItems || [],
     mediaClientConfig: mediaClient.config,

package/dist/es2019/card/v2/svgView/helpers.js

@@ -0,0 +1,12 @@
+export const calculateSvgDimensions = (img, resizeMode) => {
+  const {
+    naturalWidth,
+    naturalHeight
+  } = img;
+  const isLadscape = naturalWidth / naturalHeight > 1;
+  return resizeMode === 'crop' ? isLadscape ? {
+    height: '100%'
+  } : {
+    width: '100%'
+  } : {};
+};

package/dist/es2019/card/v2/svgView/index.js

@@ -0,0 +1 @@
+export { SvgView } from './svgView';

package/dist/es2019/card/v2/svgView/svgView.js

@@ -0,0 +1,113 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React, { useState, useRef } from 'react';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireMediaCardEvent } from '../../../utils/analytics';
+import { ImageRenderer } from '../../ui/imageRenderer/imageRenderer';
+import { ProgressBar } from '../../ui/progressBar/progressBar';
+import { Blanket } from '../../ui/blanket/blanket';
+import { Wrapper, ImageContainer } from '../../ui/wrapper';
+import { fileCardImageViewSelector } from '../../classnames';
+import { useBreakpoint } from '../../useBreakpoint';
+import MediaSvg from '@atlaskit/media-svg';
+import { calculateSvgDimensions } from './helpers';
+import OpenMediaViewerButton from '../../ui/openMediaViewerButton/openMediaViewerButton';
+export const convertResizeMode = resizeMode => {
+  switch (resizeMode) {
+    case 'crop':
+      return 'cover';
+    case 'fit':
+    case 'full-fit':
+      return 'scale-down';
+    case 'stretchy-fit':
+      return 'contain';
+    default:
+      return;
+  }
+};
+export const SvgViewBase = ({
+  identifier,
+  dimensions,
+  onClick,
+  onMouseEnter,
+  testId,
+  status,
+  selected,
+  fileName,
+  cardPreview,
+  mediaCardCursor,
+  progress,
+  alt,
+  resizeMode,
+  shouldOpenMediaViewer,
+  openMediaViewerButtonRef = null
+}) => {
+  const [didSvgRender, setDidSvgRender] = useState(false);
+  const [didPreviewRender, setDidPreviewRender] = useState(false);
+  const [svgDimensions, setSvgDimensions] = useState();
+  const divRef = useRef(null);
+  const breakpoint = useBreakpoint(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  const onSvgLoad = evt => {
+    setSvgDimensions(calculateSvgDimensions(evt.currentTarget, resizeMode));
+    setDidSvgRender(true);
+  };
+  const onPreviewLoad = () => {
+    setDidPreviewRender(true);
+  };
+  return jsx(React.Fragment, null, shouldOpenMediaViewer && jsx(OpenMediaViewerButton, {
+    fileName: fileName !== null && fileName !== void 0 ? fileName : '',
+    innerRef: openMediaViewerButtonRef,
+    onClick: onClick
+  }), jsx(Wrapper, {
+    testId: testId || 'media-card-svg-wrapper',
+    dimensions: dimensions,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    innerRef: divRef,
+    mediaCardCursor: mediaCardCursor,
+    selected: !!selected,
+    breakpoint: breakpoint,
+    disableOverlay: true,
+    displayBackground: !didSvgRender && !didPreviewRender,
+    isTickBoxSelectable: false,
+    shouldDisplayTooltip: false,
+    isPlayButtonClickable: false
+  }, jsx(ImageContainer, {
+    centerElements: true,
+    testId: fileCardImageViewSelector,
+    mediaName: fileName,
+    status: status,
+    progress: progress,
+    selected: selected,
+    source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
+  }, jsx(MediaSvg, {
+    testId: "media-card-svg",
+    identifier: identifier,
+    dimensions: svgDimensions,
+    onLoad: onSvgLoad,
+    style: {
+      visibility: didSvgRender ? 'visible' : 'hidden',
+      objectFit: convertResizeMode(resizeMode)
+    }
+  }), !!cardPreview && !didSvgRender && jsx(ImageRenderer, {
+    cardPreview: cardPreview,
+    onImageLoad: onPreviewLoad,
+    mediaType: 'image',
+    alt: alt,
+    resizeMode: resizeMode
+  }), status === 'uploading' && jsx(Blanket, {
+    isFixed: true
+  }), status === 'uploading' && jsx(ProgressBar, {
+    progress: progress,
+    breakpoint: breakpoint,
+    positionBottom: true
+  }))));
+};
+export const SvgView = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(SvgViewBase);

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "77.11.3",
+      packageName: "77.12.0",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.11.3";
+const packageVersion = "77.12.0";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -41,7 +41,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.3";
+var packageVersion = "77.12.0";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/esm/card/cardView.js

@@ -22,7 +22,7 @@ import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
 import { getElementDimension } from '../utils/getElementDimension';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from './actions';
-import { cardImageContainerStyles, calcBreakpointSize } from './ui/styles';
+import { calcBreakpointSize } from './ui/styles';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
@@ -34,7 +34,7 @@ import { ActionsBar } from './ui/actionsBar/actionsBar';
 import { IconWrapper } from './ui/iconWrapper/iconWrapper';
 import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from './ui/iconMessage';
 import { isUploadError, isRateLimitedError, isPollingError } from '../errors';
-import { Wrapper } from './ui/wrapper';
+import { ImageContainer, Wrapper } from './ui/wrapper';
 import { fileCardImageViewSelector } from './classnames';
 import OpenMediaViewerButton from './ui/openMediaViewerButton/openMediaViewerButton';
 /**
@@ -200,16 +200,12 @@ export var CardViewBase = /*#__PURE__*/function (_React$Component) {
       var _ref3 = metadata || {},
         name = _ref3.name;
       var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
-      return jsx(React.Fragment, null, jsx("div", {
-        css: cardImageContainerStyles
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        ,
-        className: fileCardImageViewSelector,
-        "data-testid": fileCardImageViewSelector,
-        "data-test-media-name": name,
-        "data-test-status": status,
-        "data-test-progress": progress,
-        "data-test-selected": selected ? true : undefined
+      return jsx(React.Fragment, null, jsx(ImageContainer, {
+        testId: fileCardImageViewSelector,
+        mediaName: name,
+        status: status,
+        progress: progress,
+        selected: selected ? true : undefined
       }, renderTypeIcon && _this.renderMediaTypeIcon(hasTitleBox, iconMessage), renderSpinner && _this.renderSpinner(hasTitleBox), renderImageRenderer && _this.renderImageRenderer(), renderPlayButton && _this.renderPlayButton(hasTitleBox), renderBlanket && _this.renderBlanket(!!isFixedBlanket), renderTitleBox && _this.renderTitleBox(), renderFailedTitleBox && _this.renderFailedTitleBox(customTitleMessage), renderProgressBar && _this.renderProgressBar(!hasTitleBox), renderTickBox && _this.renderTickBox()), _this.renderActionsBar());
     });
     return _this;

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.3";
+var packageVersion = "77.12.0";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/card/ui/styles.js

@@ -1,6 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { css } from '@emotion/react';
-import { borderRadius } from '@atlaskit/media-ui';
 import { N60A } from '@atlaskit/theme/colors';
 import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
 import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
@@ -59,15 +57,6 @@ export var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTi
   }
   return "\n    &:hover .".concat(tickBoxClassName, " {\n      ").concat(tickboxFixedStyles, "\n    }\n  ");
 };
-export var cardImageContainerStyles = css({
-  display: 'flex',
-  position: 'relative',
-  maxWidth: '100%',
-  width: '100%',
-  height: '100%',
-  maxHeight: '100%',
-  overflow: 'hidden'
-}, borderRadius);
 var defaultTransitionDuration = '.3s';
 export var transition = function transition() {
   var propertyName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';

package/dist/esm/card/ui/wrapper/imageContainer.js

@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
+import { fileCardImageViewSelector } from '../../classnames';
+var imageContainerStyles = css({
+  display: 'flex',
+  position: 'relative',
+  maxWidth: '100%',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden',
+  borderRadius: "var(--ds-border-radius, 3px)"
+});
+var imageContainerCenterStyles = css({
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+export var ImageContainer = function ImageContainer(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    mediaName = _ref.mediaName,
+    status = _ref.status,
+    progress = _ref.progress,
+    selected = _ref.selected,
+    source = _ref.source,
+    centerElements = _ref.centerElements;
+  return jsx("div", {
+    css: [imageContainerStyles, centerElements && imageContainerCenterStyles],
+    "data-testid": fileCardImageViewSelector
+    /**
+     * This wrapper MUST add the classname in order to allow the editor to prevent bubbling up the click event.
+     * See the method isInteractiveElement in source platform/packages/editor/renderer/src/ui/Renderer/click-to-edit.ts
+     * Also, many other consumer tests rely on this selector.
+     */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: fileCardImageViewSelector,
+    "data-test-media-name": mediaName,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    "data-test-selected": selected,
+    "data-test-source": source
+  }, children);
+};

package/dist/esm/card/ui/wrapper/index.js

@@ -1 +1,2 @@
-export { Wrapper } from './wrapper';
+export { Wrapper } from './wrapper';
+export { ImageContainer } from './imageContainer';

package/dist/esm/card/v2/cardV2.js

@@ -9,7 +9,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.3";
+var packageVersion = "77.12.0";
 export var CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/v2/cardViewV2.js

@@ -12,7 +12,6 @@ import Tooltip from '@atlaskit/tooltip';
 import { messages } from '@atlaskit/media-ui';
 import { createAndFireMediaCardEvent } from '../../utils/analytics';
 import { attachDetailsToActions } from '../actions';
-import { cardImageContainerStyles } from '../ui/styles';
 import { ImageRenderer } from '../ui/imageRenderer/imageRenderer';
 import { TitleBox } from '../ui/titleBox/titleBox';
 import { FailedTitleBox } from '../ui/titleBox/failedTitleBox';
@@ -24,7 +23,7 @@ import { ActionsBar } from '../ui/actionsBar/actionsBar';
 import { IconWrapper } from '../ui/iconWrapper/iconWrapper';
 import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from '../ui/iconMessage';
 import { isUploadError, isRateLimitedError, isPollingError } from '../../errors';
-import { Wrapper } from '../ui/wrapper';
+import { Wrapper, ImageContainer } from '../ui/wrapper';
 import { fileCardImageViewSelector } from '../classnames';
 import { useBreakpoint } from '../useBreakpoint';
 import OpenMediaViewerButton from '../ui/openMediaViewerButton/openMediaViewerButton';
@@ -81,11 +80,11 @@ export var CardViewV2Base = function CardViewV2Base(_ref) {
       return;
     }
     /*
-      We render the icon & icon message always, even if there is cardPreview available.
-      If the image fails to load/render, the icon will remain, i.e. the user won't see a change until the root card decides to chage status to error.
-      If the image renders successfully, we switch this variable to hide the icon & icon message behind the thumbnail in case the image has transparency.
-      It is less likely that root component replaces a suceeded cardPreview for a failed one than the opposite case. Therefore we prefer to hide the icon instead show when the image fails, for a smoother transition
-    */
+        We render the icon & icon message always, even if there is cardPreview available.
+        If the image fails to load/render, the icon will remain, i.e. the user won't see a change until the root card decides to chage status to error.
+        If the image renders successfully, we switch this variable to hide the icon & icon message behind the thumbnail in case the image has transparency.
+        It is less likely that root component replaces a suceeded cardPreview for a failed one than the opposite case. Therefore we prefer to hide the icon instead show when the image fails, for a smoother transition
+      */
     setDidImageRender(true);
     onImageLoad === null || onImageLoad === void 0 || onImageLoad(cardPreview);
   };
@@ -201,17 +200,13 @@ export var CardViewV2Base = function CardViewV2Base(_ref) {
     name = _ref5.name,
     createdAt = _ref5.createdAt;
   var actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
-  var contents = jsx(React.Fragment, null, jsx("div", {
-    css: cardImageContainerStyles
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: fileCardImageViewSelector,
-    "data-testid": fileCardImageViewSelector,
-    "data-test-media-name": name,
-    "data-test-status": status,
-    "data-test-progress": progress,
-    "data-test-selected": selected,
-    "data-test-source": cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
+  var contents = jsx(React.Fragment, null, jsx(ImageContainer, {
+    testId: fileCardImageViewSelector,
+    mediaName: name,
+    status: status,
+    progress: progress,
+    selected: selected,
+    source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
   }, renderTypeIcon && jsx(IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasTitleBox