@atlaskit/media-card 77.11.2 → 77.12.0

package/dist/cjs/card/card.js

@@ -50,7 +50,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.2";
+var packageVersion = "77.12.0";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/cjs/card/cardView.js

@@ -206,14 +206,12 @@ var CardViewBase = exports.CardViewBase = /*#__PURE__*/function (_React$Componen
       var _ref3 = metadata || {},
         name = _ref3.name;
       var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
-      return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
-        css: _styles.cardImageContainerStyles,
-        className: _classnames.fileCardImageViewSelector,
-        "data-testid": _classnames.fileCardImageViewSelector,
-        "data-test-media-name": name,
-        "data-test-status": status,
-        "data-test-progress": progress,
-        "data-test-selected": selected ? true : undefined
+      return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(_wrapper.ImageContainer, {
+        testId: _classnames.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/cjs/card/inlinePlayerWrapper.js

@@ -16,7 +16,9 @@ var InlinePlayerWrapper = exports.InlinePlayerWrapper = function InlinePlayerWra
     innerRef = props.innerRef;
   return (0, _react.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: _inlinePlayerWrapperStyles.inlinePlayerClassName,
     css: (0, _inlinePlayerWrapperStyles.inlinePlayerWrapperStyles)({
       selected: selected,

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

@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.2";
+var packageVersion = "77.12.0";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -11,7 +11,9 @@ var _styles = require("./styles");
 var ActionsBarWrapper = exports.ActionsBarWrapper = function ActionsBarWrapper(props) {
   return (0, _react.jsx)("div", {
     id: "actionsBarWrapper",
-    css: (0, _styles.wrapperStyles)(props.isFixed),
+    css: (0, _styles.wrapperStyles)(props.isFixed)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _styles.actionsBarClassName
   }, props.children);
 };

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

@@ -16,7 +16,9 @@ var CardActionButton = exports.CardActionButton = /*#__PURE__*/(0, _react.forwar
     id: "cardActionButton",
     "data-testid": "media-card-primary-action",
     "aria-label": props.label,
-    css: (0, _styles.cardActionButtonStyles)(props),
+    css: (0, _styles.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/cjs/card/ui/actionsBar/cardActions/cardActionIconButton.js

@@ -47,7 +47,9 @@ var CardActionIconButton = exports.CardActionIconButton = /*#__PURE__*/function
         variant = _this$props.variant;
       return /*#__PURE__*/_react.default.createElement(_cardActionButton.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/cjs/card/ui/actionsBar/cardActions/cardActionsDropdownMenu.js

@@ -81,7 +81,9 @@ var CardActionsDropdownMenu = exports.CardActionsDropdownMenu = /*#__PURE__*/fun
             var triggerRef = _ref.triggerRef,
               providedProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
             return /*#__PURE__*/_react.default.createElement(CardActionButtonWithAnalytics, (0, _extends2.default)({
-              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/cjs/card/ui/blanket/blanket.js

@@ -11,7 +11,9 @@ var _styles = require("./styles");
 var Blanket = exports.Blanket = function Blanket(props) {
   var isFixed = props.isFixed;
   return (0, _react.jsx)("div", {
-    css: (0, _styles.blanketStyles)(isFixed),
+    css: (0, _styles.blanketStyles)(isFixed)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _styles.blanketClassName,
     "data-testid": "media-card-blanket"
   });

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

@@ -9,6 +9,7 @@ var _styles = require("./styles");
 /**@jsx jsx */
 
 var PlayButtonBackground = exports.PlayButtonBackground = function PlayButtonBackground() {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   return (0, _react.jsx)("div", {
     css: _styles.backgroundStyles,
     className: _styles.bkgClassName

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

@@ -9,8 +9,11 @@ var _styles = require("./styles");
 /**@jsx jsx */
 
 var PlayButtonWrapper = exports.PlayButtonWrapper = function PlayButtonWrapper(props) {
-  return (0, _react.jsx)("div", {
-    css: _styles.playButtonWrapperStyles,
-    className: _styles.playButtonClassName
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    (0, _react.jsx)("div", {
+      css: _styles.playButtonWrapperStyles,
+      className: _styles.playButtonClassName
+    }, props.children)
+  );
 };

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

@@ -4,10 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transition = exports.rgba = exports.getWrapperShadow = exports.getWrapperDimensions = exports.getSelectableTickBoxStyles = exports.getCursorStyle = exports.getClickablePlayButtonStyles = exports.generateResponsiveStyles = exports.cardImageContainerStyles = exports.calcBreakpointSize = void 0;
+exports.transition = exports.rgba = exports.getWrapperShadow = exports.getWrapperDimensions = exports.getSelectableTickBoxStyles = exports.getCursorStyle = exports.getClickablePlayButtonStyles = exports.generateResponsiveStyles = exports.calcBreakpointSize = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("@emotion/react");
-var _mediaUi = require("@atlaskit/media-ui");
 var _colors = require("@atlaskit/theme/colors");
 var _consts = require("@atlaskit/editor-shared-styles/consts");
 var _getCSSUnitValue = require("../../utils/getCSSUnitValue");
@@ -66,15 +64,6 @@ var getSelectableTickBoxStyles = exports.getSelectableTickBoxStyles = function g
   }
   return "\n    &:hover .".concat(_styles.tickBoxClassName, " {\n      ").concat(_styles.tickboxFixedStyles, "\n    }\n  ");
 };
-var cardImageContainerStyles = exports.cardImageContainerStyles = (0, _react.css)({
-  display: 'flex',
-  position: 'relative',
-  maxWidth: '100%',
-  width: '100%',
-  height: '100%',
-  maxHeight: '100%',
-  overflow: 'hidden'
-}, _mediaUi.borderRadius);
 var defaultTransitionDuration = '.3s';
 var transition = exports.transition = function transition() {
   var propertyName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';

package/dist/cjs/card/ui/tickBox/tickBoxWrapper.js

@@ -35,7 +35,9 @@ wrapperStyles.displayName = 'TickBoxWrapper';
 var TickBoxWrapper = exports.TickBoxWrapper = function TickBoxWrapper(props) {
   return (0, _react.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: _styles.tickBoxClassName
   }, props.children);
 };

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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageContainer = void 0;
+var _react = require("@emotion/react");
+var _classnames = require("../../classnames");
+/** @jsx jsx */
+
+var imageContainerStyles = (0, _react.css)({
+  display: 'flex',
+  position: 'relative',
+  maxWidth: '100%',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden',
+  borderRadius: "var(--ds-border-radius, 3px)"
+});
+var imageContainerCenterStyles = (0, _react.css)({
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var ImageContainer = exports.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 (0, _react.jsx)("div", {
+    css: [imageContainerStyles, centerElements && imageContainerCenterStyles],
+    "data-testid": _classnames.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: _classnames.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/cjs/card/ui/wrapper/index.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ImageContainer", {
+  enumerable: true,
+  get: function get() {
+    return _imageContainer.ImageContainer;
+  }
+});
 Object.defineProperty(exports, "Wrapper", {
   enumerable: true,
   get: function get() {
     return _wrapper.Wrapper;
   }
 });
-var _wrapper = require("./wrapper");
+var _wrapper = require("./wrapper");
+var _imageContainer = require("./imageContainer");

package/dist/cjs/card/ui/wrapper/wrapper.js

@@ -25,7 +25,9 @@ var Wrapper = exports.Wrapper = function Wrapper(props) {
     isTickBoxSelectable = props.isTickBoxSelectable,
     shouldDisplayTooltip = props.shouldDisplayTooltip;
   return (0, _react.jsx)("div", {
-    id: "newFileExperienceWrapper",
+    id: "newFileExperienceWrapper"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _cardConstants.newFileExperienceClassName,
     "data-testid": testId,
     css: (0, _styles.wrapperStyles)({

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

@@ -16,7 +16,7 @@ var _externalImageCard = require("./externalImageCard");
 var _fileCard = require("./fileCard");
 var _excluded = ["identifier"];
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.2";
+var packageVersion = "77.12.0";
 var CardV2Base = exports.CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

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

@@ -17,7 +17,6 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _mediaUi = require("@atlaskit/media-ui");
 var _analytics = require("../../utils/analytics");
 var _actions = require("../actions");
-var _styles = require("../ui/styles");
 var _imageRenderer = require("../ui/imageRenderer/imageRenderer");
 var _titleBox = require("../ui/titleBox/titleBox");
 var _failedTitleBox = require("../ui/titleBox/failedTitleBox");
@@ -66,7 +65,8 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
     disableAnimation = _ref.disableAnimation,
     _ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
     openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB,
-    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer;
+    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
+    overriddenCreationDate = _ref.overriddenCreationDate;
   var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     didImageRender = _useState2[0],
@@ -89,11 +89,11 @@ var CardViewV2Base = exports.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);
   };
@@ -209,15 +209,13 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
     name = _ref5.name,
     createdAt = _ref5.createdAt;
   var actionsWithDetails = metadata && actions ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
-  var contents = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
-    css: _styles.cardImageContainerStyles,
-    className: _classnames.fileCardImageViewSelector,
-    "data-testid": _classnames.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 = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(_wrapper.ImageContainer, {
+    testId: _classnames.fileCardImageViewSelector,
+    mediaName: name,
+    status: status,
+    progress: progress,
+    selected: selected,
+    source: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.source
   }, renderTypeIcon && (0, _react.jsx)(_iconWrapper.IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasTitleBox
@@ -249,7 +247,7 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
     isFixed: isFixedBlanket
   }), renderTitleBox && name && (0, _react.jsx)(_titleBox.TitleBox, {
     name: name,
-    createdAt: createdAt,
+    createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
     breakpoint: breakpoint,
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor

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

@@ -12,14 +12,13 @@ var _react2 = _interopRequireDefault(require("react"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _wrapper = require("../../ui/wrapper");
 var _actions = require("../../actions");
-var _styles = require("../../ui/styles");
 var _titleBox = require("../../ui/titleBox/titleBox");
 var _tickBox = require("../../ui/tickBox/tickBox");
 var _blanket = require("../../ui/blanket/blanket");
 var _actionsBar = require("../../ui/actionsBar/actionsBar");
 var _classnames = require("../../classnames");
 var _openMediaViewerButton = _interopRequireDefault(require("../../ui/openMediaViewerButton/openMediaViewerButton"));
-var _excluded = ["cardPreview", "testId", "dimensions", "appearance", "metadata", "selected", "selectable", "actions", "breakpoint", "disableOverlay", "titleBoxBgColor", "titleBoxIcon", "shouldHideTooltip", "children", "onClick", "onMouseEnter", "mediaCardCursor", "customBlanket", "customTitleBox", "progressBar", "shouldOpenMediaViewer", "openMediaViewerButtonRef"];
+var _excluded = ["cardPreview", "testId", "dimensions", "appearance", "metadata", "selected", "selectable", "actions", "breakpoint", "disableOverlay", "titleBoxBgColor", "titleBoxIcon", "shouldHideTooltip", "children", "onClick", "onMouseEnter", "mediaCardCursor", "customBlanket", "customTitleBox", "progressBar", "shouldOpenMediaViewer", "openMediaViewerButtonRef", "overriddenCreationDate"];
 /** @jsx jsx */
 var CardViewWrapper = exports.CardViewWrapper = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref) {
   var cardPreview = _ref.cardPreview,
@@ -46,6 +45,7 @@ var CardViewWrapper = exports.CardViewWrapper = /*#__PURE__*/_react2.default.for
     shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
     _ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
     openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB,
+    overriddenCreationDate = _ref.overriddenCreationDate,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _ref2 = metadata || {},
     name = _ref2.name,
@@ -55,17 +55,16 @@ var CardViewWrapper = exports.CardViewWrapper = /*#__PURE__*/_react2.default.for
   var defaultBlanket = !disableOverlay && (0, _react.jsx)(_blanket.Blanket, null);
   var defaultTitleBox = !disableOverlay && !!name && (0, _react.jsx)(_titleBox.TitleBox, {
     name: name,
-    createdAt: createdAt,
+    createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
     breakpoint: breakpoint,
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor
   });
-  var contents = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", (0, _extends2.default)({
-    css: _styles.cardImageContainerStyles,
-    className: _classnames.fileCardImageViewSelector,
-    "data-testid": _classnames.fileCardImageViewSelector,
-    "data-test-media-name": name,
-    "data-test-selected": selected ? true : undefined
+  var contents = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(_wrapper.ImageContainer, (0, _extends2.default)({
+    testId: _classnames.fileCardImageViewSelector,
+    mediaName: name,
+    status: status,
+    selected: selected ? true : undefined
   }, props), children, customBlanket ? customBlanket() : defaultBlanket, customTitleBox ? customTitleBox() : defaultTitleBox, !disableOverlay && !!selectable && (0, _react.jsx)(_tickBox.TickBox, {
     selected: selected
   }), progressBar && progressBar()), !disableOverlay && actions && actions.length !== 0 && (0, _react.jsx)(_actionsBar.ActionsBar, {

package/dist/cjs/card/v2/cardviews/index.js

@@ -53,7 +53,8 @@ var CardViewsBase = exports.CardViewsBase = function CardViewsBase(_ref) {
     error = _ref.error,
     disableAnimation = _ref.disableAnimation,
     shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
-    openMediaViewerButtonRef = _ref.openMediaViewerButtonRef;
+    openMediaViewerButtonRef = _ref.openMediaViewerButtonRef,
+    overriddenCreationDate = _ref.overriddenCreationDate;
   var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     didImageRender = _useState2[0],
@@ -112,7 +113,8 @@ var CardViewsBase = exports.CardViewsBase = function CardViewsBase(_ref) {
       mediaCardCursor: mediaCardCursor,
       innerRef: innerRef,
       shouldOpenMediaViewer: shouldOpenMediaViewer,
-      openMediaViewerButtonRef: openMediaViewerButtonRef
+      openMediaViewerButtonRef: openMediaViewerButtonRef,
+      overriddenCreationDate: overriddenCreationDate
     };
     switch (status) {
       case 'uploading':

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

@@ -35,6 +35,8 @@ var _cardviews = require("./cardviews");
 var _inlinePlayerLazyV = require("./inlinePlayerLazyV2");
 var _mediaFilePreview = require("@atlaskit/media-file-preview");
 var _performance = require("./performance");
+var _dateOverrideContext = require("../../dateOverrideContext");
+var _svgView = require("./svgView");
 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; }
 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; }
@@ -113,6 +115,8 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     return prevFileState;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fileState]);
+  var dateOverrides = (0, _react.useContext)(_dateOverrideContext.DateOverrideContext);
+  var overridenDate = dateOverrides === null || dateOverrides === void 0 ? void 0 : dateOverrides[identifier.id];
 
   //----------------------------------------------------------------//
   //------------ State, Refs & Initial Values ----------------------//
@@ -146,12 +150,16 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     setIsPlayingFile = _useState8[1];
   var _useState9 = (0, _react.useState)(false),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    shouldAutoplay = _useState10[0],
-    setShouldAutoplay = _useState10[1];
+    shouldRenderSVG = _useState10[0],
+    setShouldRenderSVG = _useState10[1];
   var _useState11 = (0, _react.useState)(false),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    previewDidRender = _useState12[0],
-    setPreviewDidRender = _useState12[1];
+    shouldAutoplay = _useState12[0],
+    setShouldAutoplay = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    previewDidRender = _useState14[0],
+    setPreviewDidRender = _useState14[1];
   var mediaBlobUrlAttrs = (0, _react.useMemo)(function () {
     var id = identifier.id,
       collection = identifier.collectionName;
@@ -187,18 +195,18 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     onImageErrorBase = _useFilePreview.onImageError,
     onImageLoadBase = _useFilePreview.onImageLoad,
     getSsrScriptProps = _useFilePreview.getSsrScriptProps;
-  var _useState13 = (0, _react.useState)(),
-    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    error = _useState14[0],
-    setError = _useState14[1];
+  var _useState15 = (0, _react.useState)(),
+    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+    error = _useState16[0],
+    setError = _useState16[1];
 
   // CXP-2723 TODO: TEMPORARY VARIABLES
   var finalError = error || (previewError && previewError.primaryReason !== 'failed-processing' ? previewError : undefined);
   var finalStatus = finalError ? 'error' : status;
-  var _useState15 = (0, _react.useState)(null),
-    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-    mediaViewerSelectedItem = _useState16[0],
-    setMediaViewerSelectedItem = _useState16[1];
+  var _useState17 = (0, _react.useState)(null),
+    _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+    mediaViewerSelectedItem = _useState18[0],
+    setMediaViewerSelectedItem = _useState18[1];
   var uploadProgressRef = (0, _react.useRef)();
   var metadata = (0, _react.useMemo)(function () {
     var getProcessingStatusFromFileState = function getProcessingStatusFromFileState(status) {
@@ -436,6 +444,23 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     }
   }, [isCardVisible, disableOverlay, fileAttributes.fileMediatype, fileStateValue, identifier, isPlayingFile, finalStatus, useInlinePlayer]);
 
+  //----------------------------------------------------------------//
+  // Switch to SVG
+  //----------------------------------------------------------------//
+
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.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 ------------------------------//
   //----------------------------------------------------------------//
@@ -503,6 +528,18 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     updateFileStateRef.current();
   }, [fileState, preview, previewStatus, updateFileStateRef]);
 
+  //----------------------------------------------------------------//
+  // Shared Card View & SVG View resources
+  //----------------------------------------------------------------//
+
+  var mediaCardCursor = (0, _getMediaCardCursor.getMediaCardCursor)(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!preview, metadata.mediaType);
+  var onImageMouseEnter = function onImageMouseEnter(event) {
+    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter({
+      event: event,
+      mediaItemDetails: metadata
+    });
+  };
+
   //----------------------------------------------------------------//
   //---------------------- Render Card Function --------------------//
   //----------------------------------------------------------------//
@@ -522,7 +559,6 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     var nativeLazyLoad = isLazyWithOverride && !isCardVisible && preview && (0, _getCardPreview.isSSRPreview)(preview);
     // Force Media Image to always display img for SSR
     var forceSyncDisplay = !!ssr;
-    var mediaCardCursor = (0, _getMediaCardCursor.getMediaCardCursor)(!!useInlinePlayer, !!shouldOpenMediaViewer, finalStatus === 'error' || finalStatus === 'failed-processing', !!preview, metadata.mediaType);
     var card = /*#__PURE__*/_react.default.createElement(LoadedCardView, {
       status: cardStatusOverride || finalStatus,
       error: finalError,
@@ -538,12 +574,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       shouldOpenMediaViewer: shouldOpenMediaViewer,
       openMediaViewerButtonRef: mediaViewerButtonRef,
       onClick: withCallbacks ? onCardViewClick : undefined,
-      onMouseEnter: withCallbacks ? function (event) {
-        onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter({
-          event: event,
-          mediaItemDetails: metadata
-        });
-      } : undefined,
+      onMouseEnter: withCallbacks ? onImageMouseEnter : undefined,
       disableOverlay: disableOverlay,
       progress: uploadProgressRef.current,
       onDisplayImage: withCallbacks ? function () {
@@ -564,7 +595,8 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       nativeLazyLoad: nativeLazyLoad,
       forceSyncDisplay: forceSyncDisplay,
       mediaCardCursor: mediaCardCursor,
-      shouldHideTooltip: shouldHideTooltip
+      shouldHideTooltip: shouldHideTooltip,
+      overriddenCreationDate: overridenDate
     });
     return isLazyWithOverride ? /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportDetector, {
       cardEl: cardElement,
@@ -599,7 +631,25 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     testId: testId,
     cardPreview: preview,
     videoControlsWrapperRef: videoControlsWrapperRef
-  })) : renderCard(), mediaViewerSelectedItem ? /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
+  })) : shouldRenderSVG ? /*#__PURE__*/_react.default.createElement(_svgView.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.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
     collectionName: collectionName,
     items: mediaViewerItems || [],
     mediaClientConfig: mediaClient.config,

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateSvgDimensions = void 0;
+var calculateSvgDimensions = exports.calculateSvgDimensions = function calculateSvgDimensions(img, resizeMode) {
+  var naturalWidth = img.naturalWidth,
+    naturalHeight = img.naturalHeight;
+  var isLadscape = naturalWidth / naturalHeight > 1;
+  return resizeMode === 'crop' ? isLadscape ? {
+    height: '100%'
+  } : {
+    width: '100%'
+  } : {};
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SvgView", {
+  enumerable: true,
+  get: function get() {
+    return _svgView.SvgView;
+  }
+});
+var _svgView = require("./svgView");