@atlaskit/media-card 74.5.1 → 74.5.2

package/dist/esm/card/cardAnalytics.js

@@ -4,20 +4,16 @@ export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsE
   var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new MediaCardError('missing-error-data');
   var traceContext = arguments.length > 6 ? arguments[6] : undefined;
   var metadataTraceContext = arguments.length > 7 ? arguments[7] : undefined;
-
   var fireEvent = function fireEvent(payload) {
     return fireMediaCardEvent(payload, createAnalyticsEvent);
   };
-
   switch (status) {
     case 'complete':
       fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext));
       break;
-
     case 'failed-processing':
       fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext));
       break;
-
     case 'error':
       fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext, metadataTraceContext));
       break;
@@ -29,9 +25,7 @@ export var fireCommencedEvent = function fireCommencedEvent(createAnalyticsEvent
 export var fireCopiedEvent = function fireCopiedEvent(createAnalyticsEvent, fileId, cardRef) {
   if (typeof window.getSelection === 'function') {
     var _selection$containsNo;
-
     var selection = window.getSelection();
-
     if (selection !== null && selection !== void 0 && (_selection$containsNo = selection.containsNode) !== null && _selection$containsNo !== void 0 && _selection$containsNo.call(selection, cardRef, true)) {
       fireMediaCardEvent(getCopiedFilePayload(fileId), createAnalyticsEvent);
     }

package/dist/esm/card/cardImageView/cardImageViewWrapper.js

@@ -5,12 +5,12 @@ import { fileCardImageViewSelectedSelector, fileCardImageViewSelector } from './
 import { playIconWrapperStyles, progressBarWrapperStyles, wrapperStyles } from './styles';
 export var CardImageViewWrapper = function CardImageViewWrapper(props) {
   var disableOverlay = props.disableOverlay,
-      selectable = props.selectable,
-      selected = props.selected,
-      mediaType = props.mediaType,
-      mediaName = props.mediaName,
-      status = props.status,
-      progress = props.progress;
+    selectable = props.selectable,
+    selected = props.selected,
+    mediaType = props.mediaType,
+    mediaName = props.mediaName,
+    status = props.status,
+    progress = props.progress;
   var theme = useGlobalTheme();
   return jsx("div", {
     id: "cardImageViewWrapper",

package/dist/esm/card/cardImageView/cardOverlay/cardOverlayComponents.js

@@ -4,8 +4,8 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
 import { altWrapperStyles, errorMessageStyles, metadataStyles, overlayStyles, titleWrapperStyles } from './styles';
 export var Overlay = function Overlay(props) {
   var hasError = props.hasError,
-      noHover = props.noHover,
-      className = props.className;
+    noHover = props.noHover,
+    className = props.className;
   return jsx("div", {
     css: overlayStyles({
       hasError: hasError,

package/dist/esm/card/cardImageView/cardOverlay/index.js

@@ -5,69 +5,57 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
 import React from 'react';
 import { Component } from 'react';
 import cx from 'classnames';
 import TickIcon from '@atlaskit/icon/glyph/check';
-import { Ellipsify } from '@atlaskit/media-ui'; // We dont require things directly from "utils" to avoid circular dependencies
+import { Ellipsify } from '@atlaskit/media-ui';
 
+// We dont require things directly from "utils" to avoid circular dependencies
 import { FileIcon } from '../../../utils/fileIcon';
 import { ErrorIcon } from '../../../utils/errorIcon';
 import CardActions from '../../../utils/cardActions';
 import { tickBoxStyles, errorLineStyles, leftColumnStyles, topRowStyles, bottomRowStyles, rightColumnStyles, subtitleStyles } from './styles';
 import { Metadata, AltWrapper, ErrorMessage, TitleWrapper, Overlay } from './cardOverlayComponents';
-
 var resolveTitleText = function resolveTitleText(cardStatus, mediaName, error, selected) {
   // don't show title if error
   // also when card is uploading + selected, title is already showing outside of the overlay
   if (error || !mediaName || cardStatus === 'uploading' && !selected) {
     return '';
   }
-
   return mediaName;
 };
-
 export var CardOverlay = /*#__PURE__*/function (_Component) {
   _inherits(CardOverlay, _Component);
-
   var _super = _createSuper(CardOverlay);
-
   function CardOverlay(props) {
     var _this;
-
     _classCallCheck(this, CardOverlay);
-
     _this = _super.call(this, props);
-
     _defineProperty(_assertThisInitialized(_this), "onMenuToggle", function (attrs) {
       _this.setState({
         isMenuExpanded: attrs.isOpen
       });
     });
-
     _this.state = {
       isMenuExpanded: false
     };
     return _this;
   }
-
   _createClass(CardOverlay, [{
     key: "wrapperClassNames",
     get: function get() {
       var _this$props = this.props,
-          error = _this$props.error,
-          noHover = _this$props.noHover,
-          selectable = _this$props.selectable,
-          selected = _this$props.selected,
-          mediaType = _this$props.mediaType,
-          persistent = _this$props.persistent;
+        error = _this$props.error,
+        noHover = _this$props.noHover,
+        selectable = _this$props.selectable,
+        selected = _this$props.selected,
+        mediaType = _this$props.mediaType,
+        persistent = _this$props.persistent;
       var isMenuExpanded = this.state.isMenuExpanded;
       return error ? cx('overlay', {
         error: error,
@@ -85,13 +73,13 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
-          cardStatus = _this$props2.cardStatus,
-          error = _this$props2.error,
-          noHover = _this$props2.noHover,
-          mediaName = _this$props2.mediaName,
-          persistent = _this$props2.persistent,
-          selected = _this$props2.selected,
-          actions = _this$props2.actions;
+        cardStatus = _this$props2.cardStatus,
+        error = _this$props2.error,
+        noHover = _this$props2.noHover,
+        mediaName = _this$props2.mediaName,
+        persistent = _this$props2.persistent,
+        selected = _this$props2.selected,
+        actions = _this$props2.actions;
       var titleText = resolveTitleText(cardStatus, mediaName, error, selected);
       var menuTriggerColor = !persistent ? "var(--ds-icon-inverse, white)" : undefined;
       return jsx(Overlay, {
@@ -122,8 +110,8 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
     key: "errorLine",
     value: function errorLine() {
       var _this$props3 = this.props,
-          error = _this$props3.error,
-          alt = _this$props3.alt;
+        error = _this$props3.error,
+        alt = _this$props3.alt;
       return error && jsx(React.Fragment, null, jsx("div", {
         css: errorLineStyles
       }, jsx(ErrorIcon, null), jsx(ErrorMessage, null, error)), alt && jsx("div", {
@@ -134,8 +122,8 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
     key: "tickBox",
     value: function tickBox() {
       var _this$props4 = this.props,
-          selected = _this$props4.selected,
-          selectable = _this$props4.selectable;
+        selected = _this$props4.selected,
+        selectable = _this$props4.selectable;
       var tick = jsx(TickIcon, {
         label: "tick"
       });
@@ -151,12 +139,11 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
     key: "bottomLeftColumn",
     value: function bottomLeftColumn() {
       var error = this.props.error;
-
       if (!error) {
         var _this$props5 = this.props,
-            mediaType = _this$props5.mediaType,
-            subtitle = _this$props5.subtitle,
-            icon = _this$props5.icon;
+          mediaType = _this$props5.mediaType,
+          subtitle = _this$props5.subtitle,
+          icon = _this$props5.icon;
         var classNames = cx('metadata');
         var fileIcon = mediaType || icon ? jsx(FileIcon, {
           mediaType: mediaType,
@@ -181,10 +168,8 @@ export var CardOverlay = /*#__PURE__*/function (_Component) {
       };
     }
   }]);
-
   return CardOverlay;
 }(Component);
-
 _defineProperty(CardOverlay, "defaultProps", {
   actions: [],
   mediaName: ''

package/dist/esm/card/cardImageView/cardOverlay/styles.js

@@ -1,29 +1,25 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-
 /**
  * Everything about this file change is just wrong.
  * Mostly because we do bad things with classes.
  * This is all wrong and hopefully will be removed from existence with card v3,
  * so please don’t be too sad about all this!
  */
+
 import { css } from '@emotion/react';
 import { borderRadius, size, ellipsis, absolute } from '@atlaskit/media-ui';
 import { themed } from '@atlaskit/theme/components';
 import * as colors from '@atlaskit/theme/colors';
 import { rgba, easeOutCubic, transition, antialiased } from '../../styles';
 export var tickBoxStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  border-radius: 20px;\n  color: ", "; /* CLEANUP - TODO FIL-3884: Align color with new design */\n  display: flex;\n  opacity: 0;\n\n  &.selected {\n    opacity: 1;\n    color: ", ";\n    background-color: ", "; /* CLEANUP - TODO FIL-3884: Align with tickbox icons */\n  }\n\n  /* Enforce dimensions of \"tick\" icon */\n  svg {\n    position: absolute;\n    width: 14px;\n  }\n"])), size(14), transition(), "var(--ds-surface-overlay, ".concat(rgba('#ffffff', 0.5), ")"), "var(--ds-icon-subtle, #798599)", "var(--ds-icon-inverse, white)", "var(--ds-icon-selected, #0052cc)");
-
 var getOverlayStyles = function getOverlayStyles(_ref) {
   var hasError = _ref.hasError,
-      noHover = _ref.noHover;
-
+    noHover = _ref.noHover;
   if (hasError || noHover) {
     return "\n        cursor: default;\n\n        &:hover {\n          background: transparent;\n        }\n      ";
   }
 };
-
 export var overlayStyles = function overlayStyles(props) {
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", " display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  background: transparent;\n  transition: 0.3s background ", ", 0.3s border-color;\n  padding: 16px;\n\n  ", "\n  &:not(.persistent):hover, &.active {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  &.noHover:hover {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  .file-type-icon {\n    display: block;\n  }\n\n  &:not(.persistent) {\n    &:not(.error, .noHover):hover {\n      background-color: ", ";\n    }\n\n    &.selectable {\n      &.selected {\n        background-color: ", ";\n\n        &:hover {\n          /* CLEANUP - TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */\n          background-color: ", ";\n        }\n\n        .title,\n        .bottom-row,\n        .file-size {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.persistent {\n    &:not(.active) {\n      overflow: hidden;\n    }\n\n    .top-row {\n      .title {\n        transition: opacity 0.3s;\n        opacity: 0;\n        color: ", ";\n        visibility: hidden;\n      }\n    }\n\n    .bottom-row {\n      opacity: 0;\n      transition: transform 0.2s, opacity 0.5s;\n      /* This is the height of the overlay footer, needs to be present now since the parent uses flex and 100% doesn't look right anymore */\n      transform: translateY(35px);\n\n      .file-type-icon {\n        display: none;\n      }\n\n      .file-size {\n        color: ", ";\n        display: none;\n      }\n    }\n\n    &:hover,\n    &.active {\n      background-color: ", ";\n\n      .title {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      .file-type-icon,\n      .file-size {\n        display: block;\n      }\n\n      .bottom-row {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    /* Selectable */\n    &.selectable {\n      &:hover {\n        .tickbox {\n          opacity: 1;\n        }\n      }\n\n      &.selected {\n        .tickbox {\n          background-color: ", " !important;\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.error {\n    .top-row {\n      overflow: visible;\n    }\n    &:hover,\n    &.active {\n      .top-row {\n        .title {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), size(), absolute(), borderRadius, easeOutCubic, getOverlayStyles(props), "var(--ds-text-information, ".concat(colors.B400, ")"), "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-background-neutral-hovered, ".concat(rgba(colors.N900, 0.06), ")"), "var(--ds-background-selected, ".concat(colors.B200, ")"), "var(--ds-background-selected-hovered, ".concat(rgba(colors.N900, 0.16), ")"), "var(--ds-text, ".concat(colors.N900, ")"), "var(--ds-text, white)", "var(--ds-text, white)", "var(--ds-interaction-hovered, ".concat(rgba(colors.N900, 0.5), ")"), "var(--ds-background-selected-bold, ".concat(colors.B200, ")"), "var(--ds-icon-inverse, white)", "var(--ds-text, ".concat(colors.N800, ")"));
 };

package/dist/esm/card/cardImageView/cardViewWrapper.js

@@ -3,12 +3,12 @@ import { jsx } from '@emotion/react';
 import { wrapperStyles } from '../styles/styles';
 export var Wrapper = function Wrapper(props) {
   var testId = props.testId,
-      shouldUsePointerCursor = props.shouldUsePointerCursor,
-      breakpointSize = props.breakpointSize,
-      dimensions = props.dimensions,
-      onClick = props.onClick,
-      onMouseEnter = props.onMouseEnter,
-      innerRef = props.innerRef;
+    shouldUsePointerCursor = props.shouldUsePointerCursor,
+    breakpointSize = props.breakpointSize,
+    dimensions = props.dimensions,
+    onClick = props.onClick,
+    onMouseEnter = props.onMouseEnter,
+    innerRef = props.innerRef;
   return jsx("div", {
     id: "cardViewWrapper",
     "data-testid": testId,

package/dist/esm/card/cardImageView/fileCardImageView.js

@@ -5,11 +5,8 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
@@ -24,45 +21,34 @@ import CardActions from '../../utils/cardActions';
 import { CardImageViewWrapper, PlayIconWrapper, ProgressBarWrapper } from './cardImageViewWrapper';
 export var FileCardImageView = /*#__PURE__*/function (_Component) {
   _inherits(FileCardImageView, _Component);
-
   var _super = _createSuper(FileCardImageView);
-
   function FileCardImageView() {
     var _this;
-
     _classCallCheck(this, FileCardImageView);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "wasThumbnailDisplayed", false);
-
     _defineProperty(_assertThisInitialized(_this), "renderCardContents", function () {
       var _this$props = _this.props,
-          status = _this$props.status,
-          mediaType = _this$props.mediaType,
-          fileSize = _this$props.fileSize;
-
+        status = _this$props.status,
+        mediaType = _this$props.mediaType,
+        fileSize = _this$props.fileSize;
       if (status === 'error') {
         return _this.renderErrorContents();
       } else if (status === 'failed-processing') {
         return _this.renderFailedContents();
-      } // If a video has no errors/failed processing, we want to be able to play it
-      // immediately, even if there's no image preview
-
+      }
 
+      // If a video has no errors/failed processing, we want to be able to play it
+      // immediately, even if there's no image preview
       var isZeroSize = fileSize === '' && ['processing', 'loading-preview'].includes(status);
-
       if (mediaType !== 'video' && !_this.isFileCardImageReadyForDisplay && !isZeroSize) {
         return _this.renderLoadingContents();
       }
-
       return _this.renderSuccessCardContents();
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderLoadingContents", function () {
       return jsx("div", {
         className: "wrapper"
@@ -70,16 +56,15 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         className: "img-wrapper"
       }, jsx(CardLoading, null)));
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderErrorContents", function () {
       var _this$props2 = _this.props,
-          status = _this$props2.status,
-          error = _this$props2.error,
-          alt = _this$props2.alt,
-          mediaName = _this$props2.mediaName,
-          mediaType = _this$props2.mediaType,
-          actions = _this$props2.actions,
-          fileSize = _this$props2.fileSize;
+        status = _this$props2.status,
+        error = _this$props2.error,
+        alt = _this$props2.alt,
+        mediaName = _this$props2.mediaName,
+        mediaType = _this$props2.mediaType,
+        actions = _this$props2.actions,
+        fileSize = _this$props2.fileSize;
       return jsx(React.Fragment, null, jsx("div", {
         className: "wrapper"
       }), jsx(CardOverlay, {
@@ -93,14 +78,13 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         actions: actions
       }));
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderFailedContents", function () {
       var _this$props3 = _this.props,
-          status = _this$props3.status,
-          mediaName = _this$props3.mediaName,
-          mediaType = _this$props3.mediaType,
-          actions = _this$props3.actions,
-          fileSize = _this$props3.fileSize;
+        status = _this$props3.status,
+        mediaName = _this$props3.mediaName,
+        mediaType = _this$props3.mediaType,
+        actions = _this$props3.actions,
+        fileSize = _this$props3.fileSize;
       return jsx(React.Fragment, null, jsx("div", {
         className: "wrapper"
       }), jsx(CardOverlay, {
@@ -113,15 +97,14 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         actions: actions
       }));
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderUploadingCardOverlay", function () {
       var _this$props4 = _this.props,
-          status = _this$props4.status,
-          mediaName = _this$props4.mediaName,
-          mediaType = _this$props4.mediaType,
-          dataURI = _this$props4.dataURI,
-          selectable = _this$props4.selectable,
-          selected = _this$props4.selected;
+        status = _this$props4.status,
+        mediaName = _this$props4.mediaName,
+        mediaType = _this$props4.mediaType,
+        dataURI = _this$props4.dataURI,
+        selectable = _this$props4.selectable,
+        selected = _this$props4.selected;
       var isPersistent = mediaType === 'doc' || !dataURI;
       return jsx(CardOverlay, {
         cardStatus: status,
@@ -131,24 +114,20 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         selected: selected
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderPlayButton", function () {
       var _this$props5 = _this.props,
-          status = _this$props5.status,
-          mediaItemType = _this$props5.mediaItemType,
-          mediaType = _this$props5.mediaType,
-          mimeType = _this$props5.mimeType,
-          selectable = _this$props5.selectable,
-          dataURI = _this$props5.dataURI;
-
+        status = _this$props5.status,
+        mediaItemType = _this$props5.mediaItemType,
+        mediaType = _this$props5.mediaType,
+        mimeType = _this$props5.mimeType,
+        selectable = _this$props5.selectable,
+        dataURI = _this$props5.dataURI;
       if (mediaType !== 'video') {
         return null;
       }
-
       if (selectable && !shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
         return null;
       }
-
       return jsx(PlayIconWrapper, null, jsx("div", {
         css: playIconBackgroundStyles
       }, jsx(VidPlayIcon, {
@@ -157,41 +136,35 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         size: "large"
       })));
     });
-
     _defineProperty(_assertThisInitialized(_this), "onImageLoad", function () {
       var _this$props6 = _this.props,
-          onImageLoad = _this$props6.onImageLoad,
-          cardPreview = _this$props6.cardPreview;
+        onImageLoad = _this$props6.onImageLoad,
+        cardPreview = _this$props6.cardPreview;
       onImageLoad && onImageLoad(cardPreview);
     });
-
     _defineProperty(_assertThisInitialized(_this), "onImageError", function () {
       var _this$props7 = _this.props,
-          onImageError = _this$props7.onImageError,
-          cardPreview = _this$props7.cardPreview;
+        onImageError = _this$props7.onImageError,
+        cardPreview = _this$props7.cardPreview;
       onImageError && onImageError(cardPreview);
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderMediaImage", function () {
       var _this$props8 = _this.props,
-          status = _this$props8.status,
-          mediaItemType = _this$props8.mediaItemType,
-          dataURI = _this$props8.dataURI,
-          mediaType = _this$props8.mediaType,
-          mimeType = _this$props8.mimeType,
-          previewOrientation = _this$props8.previewOrientation,
-          onDisplayImage = _this$props8.onDisplayImage,
-          alt = _this$props8.alt;
-
+        status = _this$props8.status,
+        mediaItemType = _this$props8.mediaItemType,
+        dataURI = _this$props8.dataURI,
+        mediaType = _this$props8.mediaType,
+        mimeType = _this$props8.mimeType,
+        previewOrientation = _this$props8.previewOrientation,
+        onDisplayImage = _this$props8.onDisplayImage,
+        alt = _this$props8.alt;
       if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
         return null;
       }
-
       if (!_this.wasThumbnailDisplayed && onDisplayImage && mediaType === 'image') {
         onDisplayImage();
         _this.wasThumbnailDisplayed = true;
       }
-
       return jsx(MediaImage, {
         dataURI: dataURI,
         alt: alt,
@@ -202,18 +175,15 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         onImageError: _this.onImageError
       });
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderProgressBar", function () {
       var _this$props9 = _this.props,
-          mediaName = _this$props9.mediaName,
-          progress = _this$props9.progress,
-          actions = _this$props9.actions,
-          status = _this$props9.status;
-
+        mediaName = _this$props9.mediaName,
+        progress = _this$props9.progress,
+        actions = _this$props9.actions,
+        status = _this$props9.status;
       if (status !== 'uploading') {
         return null;
       }
-
       return jsx(ProgressBarWrapper, null, jsx("div", {
         css: overlayStyles
       }, jsx("div", {
@@ -235,14 +205,12 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         triggerColor: "var(--ds-icon-inverse, white)"
       }) : null))));
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderSuccessCardContents", function () {
       var _this$props10 = _this.props,
-          disableOverlay = _this$props10.disableOverlay,
-          selectable = _this$props10.selectable,
-          status = _this$props10.status;
+        disableOverlay = _this$props10.disableOverlay,
+        selectable = _this$props10.selectable,
+        status = _this$props10.status;
       var overlay = null;
-
       if (!disableOverlay) {
         if (status === 'uploading') {
           if (selectable) {
@@ -252,24 +220,22 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
           overlay = _this.renderSuccessCardOverlay();
         }
       }
-
       return jsx("div", {
         className: "wrapper"
       }, jsx("div", {
         className: "img-wrapper"
       }, _this.renderMediaImage(), _this.renderProgressBar(), _this.renderPlayButton()), overlay);
     });
-
     _defineProperty(_assertThisInitialized(_this), "renderSuccessCardOverlay", function () {
       var _this$props11 = _this.props,
-          status = _this$props11.status,
-          mediaName = _this$props11.mediaName,
-          mediaType = _this$props11.mediaType,
-          fileSize = _this$props11.fileSize,
-          dataURI = _this$props11.dataURI,
-          selectable = _this$props11.selectable,
-          selected = _this$props11.selected,
-          actions = _this$props11.actions;
+        status = _this$props11.status,
+        mediaName = _this$props11.mediaName,
+        mediaType = _this$props11.mediaType,
+        fileSize = _this$props11.fileSize,
+        dataURI = _this$props11.dataURI,
+        selectable = _this$props11.selectable,
+        selected = _this$props11.selected,
+        actions = _this$props11.actions;
       var isPersistent = mediaType === 'doc' || !dataURI;
       return jsx(CardOverlay, {
         cardStatus: status,
@@ -282,21 +248,19 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
         actions: actions
       });
     });
-
     return _this;
   }
-
   _createClass(FileCardImageView, [{
     key: "render",
     value: function render() {
       var _this$props12 = this.props,
-          disableOverlay = _this$props12.disableOverlay,
-          selectable = _this$props12.selectable,
-          selected = _this$props12.selected,
-          mediaType = _this$props12.mediaType,
-          progress = _this$props12.progress,
-          status = _this$props12.status,
-          mediaName = _this$props12.mediaName;
+        disableOverlay = _this$props12.disableOverlay,
+        selectable = _this$props12.selectable,
+        selected = _this$props12.selected,
+        mediaType = _this$props12.mediaType,
+        progress = _this$props12.progress,
+        status = _this$props12.status,
+        mediaName = _this$props12.mediaName;
       return jsx(CardImageViewWrapper, {
         mediaName: mediaName,
         status: status,
@@ -311,8 +275,8 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
     key: "isFileCardImageReadyForDisplay",
     get: function get() {
       var _this$props13 = this.props,
-          dataURI = _this$props13.dataURI,
-          status = _this$props13.status;
+        dataURI = _this$props13.dataURI,
+        status = _this$props13.status;
       return !!dataURI || !['loading', 'processing', 'loading-preview'].includes(status);
     }
   }, {
@@ -328,10 +292,8 @@ export var FileCardImageView = /*#__PURE__*/function (_Component) {
       return resizeMode === 'stretchy-fit';
     }
   }]);
-
   return FileCardImageView;
 }(Component);
-
 _defineProperty(FileCardImageView, "defaultProps", {
   resizeMode: 'crop',
   disableOverlay: false

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

@@ -1,19 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
 import { css } from '@emotion/react';
 import { absolute, borderRadius, size } from '@atlaskit/media-ui';
 import { themed } from '@atlaskit/theme/components';
 import { N20, DN50, N0 } from '@atlaskit/theme/colors';
 import { rootStyles, cardShadow } from '../styles';
 import { getSelectedBorderStyle } from '../styles/getSelectedBorderStyle';
-
 var getShadowAttribute = function getShadowAttribute(props) {
   var disableOverlay = props.disableOverlay;
   return disableOverlay ? '' : cardShadow;
 };
-
 var getBackgroundColor = function getBackgroundColor(props) {
   var mediaType = props.mediaType;
   return "background: ".concat(mediaType === 'image' ? 'transparent' : themed({
@@ -21,7 +17,6 @@ var getBackgroundColor = function getBackgroundColor(props) {
     dark: "var(--ds-background-neutral, ".concat(DN50, ")")
   })(props), ";");
 };
-
 export var wrapperStyles = function wrapperStyles(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n  ", "\n\n  line-height: normal;\n  position: relative;\n\n  ", "\n\n  ", " .wrapper {\n    ", ";\n    display: block;\n    height: inherit;\n    position: relative;\n\n    .img-wrapper {\n      position: relative;\n      width: inherit;\n      height: inherit;\n      overflow: hidden;\n      display: block;\n      ", "\n    }\n  }\n"])), rootStyles(), getShadowAttribute(props), borderRadius, getBackgroundColor(props), getSelectedBorderStyle(props), size(), borderRadius, borderRadius);
 };