@atlaskit/media-card 77.11.2 → 77.12.0

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

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertResizeMode = exports.SvgViewBase = exports.SvgView = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _analytics = require("../../../utils/analytics");
+var _imageRenderer = require("../../ui/imageRenderer/imageRenderer");
+var _progressBar = require("../../ui/progressBar/progressBar");
+var _blanket = require("../../ui/blanket/blanket");
+var _wrapper = require("../../ui/wrapper");
+var _classnames = require("../../classnames");
+var _useBreakpoint = require("../../useBreakpoint");
+var _mediaSvg = _interopRequireDefault(require("@atlaskit/media-svg"));
+var _helpers = require("./helpers");
+var _openMediaViewerButton = _interopRequireDefault(require("../../ui/openMediaViewerButton/openMediaViewerButton"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/** @jsx jsx */
+
+var convertResizeMode = exports.convertResizeMode = function convertResizeMode(resizeMode) {
+  switch (resizeMode) {
+    case 'crop':
+      return 'cover';
+    case 'fit':
+    case 'full-fit':
+      return 'scale-down';
+    case 'stretchy-fit':
+      return 'contain';
+    default:
+      return;
+  }
+};
+var SvgViewBase = exports.SvgViewBase = function SvgViewBase(_ref) {
+  var identifier = _ref.identifier,
+    dimensions = _ref.dimensions,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    testId = _ref.testId,
+    status = _ref.status,
+    selected = _ref.selected,
+    fileName = _ref.fileName,
+    cardPreview = _ref.cardPreview,
+    mediaCardCursor = _ref.mediaCardCursor,
+    progress = _ref.progress,
+    alt = _ref.alt,
+    resizeMode = _ref.resizeMode,
+    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
+    _ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
+    openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB;
+  var _useState = (0, _react2.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    didSvgRender = _useState2[0],
+    setDidSvgRender = _useState2[1];
+  var _useState3 = (0, _react2.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    didPreviewRender = _useState4[0],
+    setDidPreviewRender = _useState4[1];
+  var _useState5 = (0, _react2.useState)(),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    svgDimensions = _useState6[0],
+    setSvgDimensions = _useState6[1];
+  var divRef = (0, _react2.useRef)(null);
+  var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  var onSvgLoad = function onSvgLoad(evt) {
+    setSvgDimensions((0, _helpers.calculateSvgDimensions)(evt.currentTarget, resizeMode));
+    setDidSvgRender(true);
+  };
+  var onPreviewLoad = function onPreviewLoad() {
+    setDidPreviewRender(true);
+  };
+  return (0, _react.jsx)(_react2.default.Fragment, null, shouldOpenMediaViewer && (0, _react.jsx)(_openMediaViewerButton.default, {
+    fileName: fileName !== null && fileName !== void 0 ? fileName : '',
+    innerRef: openMediaViewerButtonRef,
+    onClick: onClick
+  }), (0, _react.jsx)(_wrapper.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
+  }, (0, _react.jsx)(_wrapper.ImageContainer, {
+    centerElements: true,
+    testId: _classnames.fileCardImageViewSelector,
+    mediaName: fileName,
+    status: status,
+    progress: progress,
+    selected: selected,
+    source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
+  }, (0, _react.jsx)(_mediaSvg.default, {
+    testId: "media-card-svg",
+    identifier: identifier,
+    dimensions: svgDimensions,
+    onLoad: onSvgLoad,
+    style: {
+      visibility: didSvgRender ? 'visible' : 'hidden',
+      objectFit: convertResizeMode(resizeMode)
+    }
+  }), !!cardPreview && !didSvgRender && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
+    cardPreview: cardPreview,
+    onImageLoad: onPreviewLoad,
+    mediaType: 'image',
+    alt: alt,
+    resizeMode: resizeMode
+  }), status === 'uploading' && (0, _react.jsx)(_blanket.Blanket, {
+    isFixed: true
+  }), status === 'uploading' && (0, _react.jsx)(_progressBar.ProgressBar, {
+    progress: progress,
+    breakpoint: breakpoint,
+    positionBottom: true
+  }))));
+};
+var SvgView = exports.SvgView = (0, _analyticsNext.withAnalyticsEvents)({
+  onClick: (0, _analytics.createAndFireMediaCardEvent)({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(SvgViewBase);

package/dist/cjs/inline/loader.js

@@ -119,7 +119,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.11.2",
+        packageName: "77.12.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -60,13 +60,17 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
   }, isSelected ? _objectSpread({}, selectedStyle) : {
     userSelect: 'text'
   });
-  return /*#__PURE__*/_react.default.createElement("span", {
-    style: style
-  }, /*#__PURE__*/_react.default.createElement(_warning.default, {
-    label: "error",
-    size: "small",
-    primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")")
-  }), message);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    _react.default.createElement("span", {
+      style: style
+    }, /*#__PURE__*/_react.default.createElement(_warning.default, {
+      label: "error",
+      size: "small",
+      primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")")
+    }), message)
+  );
 };
 var WrappedMediaInlineAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(WrappedMediaInlineAnalyticsErrorBoundary, _React$Component);

package/dist/cjs/utils/ufoExperiences.js

@@ -14,7 +14,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.2";
+var packageVersion = "77.12.0";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -28,7 +28,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.11.2";
+const packageVersion = "77.12.0";
 export class CardBase extends Component {
   constructor(props) {
     super(props);

package/dist/es2019/card/cardView.js

@@ -12,7 +12,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';
@@ -24,7 +24,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';
 /**
@@ -204,14 +204,12 @@ export class CardViewBase extends React.Component {
         name
       } = metadata || {};
       const hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
-      return jsx(React.Fragment, null, jsx("div", {
-        css: cardImageContainerStyles,
-        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());
     });
   }

package/dist/es2019/card/inlinePlayerWrapper.js

@@ -11,7 +11,9 @@ export const InlinePlayerWrapper = props => {
   } = props;
   return jsx("div", {
     id: "inlinePlayerWrapper",
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: inlinePlayerClassName,
     css: inlinePlayerWrapperStyles({
       selected,

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.2";
+const packageVersion = "77.12.0";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/ui/actionsBar/actionsBarWrapper.js

@@ -4,7 +4,9 @@ import { wrapperStyles, actionsBarClassName } from './styles';
 export const ActionsBarWrapper = props => {
   return jsx("div", {
     id: "actionsBarWrapper",
-    css: wrapperStyles(props.isFixed),
+    css: wrapperStyles(props.isFixed)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: actionsBarClassName
   }, props.children);
 };

package/dist/es2019/card/ui/actionsBar/cardActions/cardActionButton.js

@@ -8,7 +8,9 @@ export const CardActionButton = /*#__PURE__*/forwardRef((props, ref) => {
     id: "cardActionButton",
     "data-testid": "media-card-primary-action",
     "aria-label": props.label,
-    css: cardActionButtonStyles(props),
+    css: cardActionButtonStyles(props)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: props.style,
     onClick: props.onClick,
     onMouseDown: props.onMouseDown,

package/dist/es2019/card/ui/actionsBar/cardActions/cardActionIconButton.js

@@ -21,7 +21,9 @@ export class CardActionIconButton extends Component {
     } = this.props;
     return /*#__PURE__*/React.createElement(CardActionButton, {
       onClick: onClick,
-      onMouseDown: this.onMouseDown,
+      onMouseDown: this.onMouseDown
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: {
         color: triggerColor
       },

package/dist/es2019/card/ui/actionsBar/cardActions/cardActionsDropdownMenu.js

@@ -56,7 +56,9 @@ export class CardActionsDropdownMenu extends Component {
           triggerRef,
           ...providedProps
         }) => /*#__PURE__*/React.createElement(CardActionButtonWithAnalytics, _extends({
-          variant: triggerVariant,
+          variant: triggerVariant
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          ,
           style: {
             color: triggerColor
           },

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

@@ -6,7 +6,9 @@ export const Blanket = props => {
     isFixed
   } = props;
   return jsx("div", {
-    css: blanketStyles(isFixed),
+    css: blanketStyles(isFixed)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blanketClassName,
     "data-testid": "media-card-blanket"
   });

package/dist/es2019/card/ui/playButton/playButtonBackground.js

@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/react';
 import { backgroundStyles, bkgClassName } from './styles';
 export const PlayButtonBackground = () => {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   return jsx("div", {
     css: backgroundStyles,
     className: bkgClassName

package/dist/es2019/card/ui/playButton/playButtonWrapper.js

@@ -2,8 +2,11 @@
 import { jsx } from '@emotion/react';
 import { playButtonClassName, playButtonWrapperStyles } from './styles';
 export const PlayButtonWrapper = props => {
-  return jsx("div", {
-    css: playButtonWrapperStyles,
-    className: playButtonClassName
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    jsx("div", {
+      css: playButtonWrapperStyles,
+      className: playButtonClassName
+    }, props.children)
+  );
 };

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/tickBox/tickBoxWrapper.js

@@ -26,7 +26,9 @@ wrapperStyles.displayName = 'TickBoxWrapper';
 export const TickBoxWrapper = props => {
   return jsx("div", {
     id: "tickBoxWrapper",
-    css: wrapperStyles(props.selected),
+    css: wrapperStyles(props.selected)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: tickBoxClassName
   }, props.children);
 };

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/ui/wrapper/wrapper.js

@@ -20,7 +20,9 @@ export const Wrapper = props => {
     shouldDisplayTooltip
   } = props;
   return jsx("div", {
-    id: "newFileExperienceWrapper",
+    id: "newFileExperienceWrapper"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: newFileExperienceClassName,
     "data-testid": testId,
     css: wrapperStyles({

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.2";
+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';
@@ -52,7 +51,8 @@ export const CardViewV2Base = ({
   error,
   disableAnimation,
   openMediaViewerButtonRef = null,
-  shouldOpenMediaViewer
+  shouldOpenMediaViewer,
+  overriddenCreationDate
 }) => {
   const [didImageRender, setDidImageRender] = useState(false);
   const divRef = useRef(null);
@@ -73,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);
   };
@@ -204,15 +204,13 @@ export const CardViewV2Base = ({
     createdAt
   } = metadata || {};
   const actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
-  const contents = jsx(React.Fragment, null, jsx("div", {
-    css: cardImageContainerStyles,
-    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
@@ -244,7 +242,7 @@ export const CardViewV2Base = ({
     isFixed: isFixedBlanket
   }), renderTitleBox && name && jsx(TitleBox, {
     name: name,
-    createdAt: createdAt,
+    createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
     breakpoint: breakpoint,
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor

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';
@@ -35,6 +34,7 @@ export const CardViewWrapper = /*#__PURE__*/React.forwardRef(({
   progressBar,
   shouldOpenMediaViewer,
   openMediaViewerButtonRef = null,
+  overriddenCreationDate,
   ...props
 }, ref) => {
   const {
@@ -46,17 +46,16 @@ export const CardViewWrapper = /*#__PURE__*/React.forwardRef(({
   const defaultBlanket = !disableOverlay && jsx(Blanket, null);
   const defaultTitleBox = !disableOverlay && !!name && jsx(TitleBox, {
     name: name,
-    createdAt: createdAt,
+    createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
     breakpoint: breakpoint,
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor
   });
-  const contents = jsx(React.Fragment, null, jsx("div", _extends({
-    css: cardImageContainerStyles,
-    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/cardviews/index.js

@@ -40,7 +40,8 @@ export const CardViewsBase = ({
   error,
   disableAnimation,
   shouldOpenMediaViewer,
-  openMediaViewerButtonRef
+  openMediaViewerButtonRef,
+  overriddenCreationDate
 }) => {
   const [didImageRender, setDidImageRender] = useState(false);
   const divRef = useRef(null);
@@ -98,7 +99,8 @@ export const CardViewsBase = ({
       mediaCardCursor,
       innerRef,
       shouldOpenMediaViewer,
-      openMediaViewerButtonRef
+      openMediaViewerButtonRef,
+      overriddenCreationDate
     };
     switch (status) {
       case 'uploading':