@atlaskit/media-card 77.0.3 → 77.1.1

package/dist/cjs/card/ui/titleBox/titleBoxComponents.js

@@ -9,7 +9,7 @@ var _styles = require("./styles");
 var _components = require("@atlaskit/theme/components");
 /** @jsx jsx */
 
-var TitleBoxWrapper = function TitleBoxWrapper(props) {
+var TitleBoxWrapper = exports.TitleBoxWrapper = function TitleBoxWrapper(props) {
   var breakpoint = props.breakpoint,
     titleBoxBgColor = props.titleBoxBgColor;
   var theme = (0, _components.useGlobalTheme)();
@@ -23,8 +23,7 @@ var TitleBoxWrapper = function TitleBoxWrapper(props) {
     })
   }, props.children);
 };
-exports.TitleBoxWrapper = TitleBoxWrapper;
-var TitleBoxHeader = function TitleBoxHeader(props) {
+var TitleBoxHeader = exports.TitleBoxHeader = function TitleBoxHeader(props) {
   var hasIconOverlap = props.hasIconOverlap;
   return (0, _react.jsx)("div", {
     id: "titleBoxHeader",
@@ -33,8 +32,7 @@ var TitleBoxHeader = function TitleBoxHeader(props) {
     })
   }, props.children);
 };
-exports.TitleBoxHeader = TitleBoxHeader;
-var TitleBoxFooter = function TitleBoxFooter(props) {
+var TitleBoxFooter = exports.TitleBoxFooter = function TitleBoxFooter(props) {
   var hasIconOverlap = props.hasIconOverlap;
   return (0, _react.jsx)("div", {
     id: "titleBoxFooter",
@@ -43,17 +41,14 @@ var TitleBoxFooter = function TitleBoxFooter(props) {
     })
   }, props.children);
 };
-exports.TitleBoxFooter = TitleBoxFooter;
-var TitleBoxIcon = function TitleBoxIcon(props) {
+var TitleBoxIcon = exports.TitleBoxIcon = function TitleBoxIcon(props) {
   return (0, _react.jsx)("div", {
     id: "titleBoxIcon",
     css: _styles.titleBoxIconStyles
   }, props.children);
 };
-exports.TitleBoxIcon = TitleBoxIcon;
-var ErrorMessageWrapper = function ErrorMessageWrapper(props) {
+var ErrorMessageWrapper = exports.ErrorMessageWrapper = function ErrorMessageWrapper(props) {
   return (0, _react.jsx)("div", {
     css: _styles.errorMessageWrapperStyles
   }, props.children);
-};
-exports.ErrorMessageWrapper = ErrorMessageWrapper;
+};

package/dist/cjs/card/ui/unhandledErrorCard/index.js

@@ -55,7 +55,7 @@ var wrapperStyles = function wrapperStyles() {
     return null;
   }
 };
-var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
+var UnhandledErrorCard = exports.UnhandledErrorCard = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(UnhandledErrorCard, _Component);
   var _super = _createSuper(UnhandledErrorCard);
   function UnhandledErrorCard() {
@@ -79,5 +79,4 @@ var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
     }
   }]);
   return UnhandledErrorCard;
-}(_react.Component);
-exports.UnhandledErrorCard = UnhandledErrorCard;
+}(_react.Component);

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

@@ -17,7 +17,7 @@ var _styles2 = require("../blanket/styles");
 var _styles3 = require("../actionsBar/styles");
 var _templateObject;
 var BACKGROUND_COLOR_DARK = '#22272C';
-var wrapperStyles = function wrapperStyles(_ref) {
+var wrapperStyles = exports.wrapperStyles = function wrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
     dimensions = _ref.dimensions,
     appearance = _ref.appearance,
@@ -36,5 +36,4 @@ var wrapperStyles = function wrapperStyles(_ref) {
     theme: theme
   }), ";"), _mediaUi.borderRadius, (0, _styles.getCursorStyle)(mediaCardCursor), (0, _styles.getWrapperShadow)(disableOverlay, selected), (0, _styles.generateResponsiveStyles)(breakpoint), _selection.hideNativeBrowserTextSelectionStyles, (0, _styles.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }");
 };
-exports.wrapperStyles = wrapperStyles;
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

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

@@ -10,7 +10,7 @@ var _styles = require("./styles");
 var _components = require("@atlaskit/theme/components");
 /**@jsx jsx */
 
-var Wrapper = function Wrapper(props) {
+var Wrapper = exports.Wrapper = function Wrapper(props) {
   var testId = props.testId,
     dimensions = props.dimensions,
     appearance = props.appearance,
@@ -47,5 +47,4 @@ var Wrapper = function Wrapper(props) {
     onClick: onClick,
     onMouseEnter: onMouseEnter
   }, props.children);
-};
-exports.Wrapper = Wrapper;
+};

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

@@ -25,7 +25,7 @@ var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"))
 var _mediaClient2 = require("@atlaskit/media-client");
 var _mediaViewer = require("@atlaskit/media-viewer");
 var _reactIntlNext = require("react-intl-next");
-var _cardView = require("../cardView");
+var _cardViewV = require("./cardViewV2");
 var _viewportDetector = require("../../utils/viewportDetector");
 var _videoIsPlayable = require("../../utils/videoIsPlayable");
 var _getDataURIDimension = require("../../utils/getDataURIDimension");
@@ -50,8 +50,8 @@ 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() { 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; } }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.0.3";
-var CardV2Base = /*#__PURE__*/function (_Component) {
+var packageVersion = "77.1.1";
+var CardV2Base = exports.CardV2Base = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardV2Base, _Component);
   var _super = _createSuper(CardV2Base);
   function CardV2Base(props) {
@@ -573,7 +573,7 @@ var CardV2Base = /*#__PURE__*/function (_Component) {
       // Force Media Image to always display img for SSR
       var forceSyncDisplay = !!ssr;
       var mediaCardCursor = (0, _getMediaCardCursor.getMediaCardCursor)(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!_this.state.cardPreview, metadata.mediaType);
-      var card = /*#__PURE__*/_react.default.createElement(_cardView.CardView, {
+      var card = /*#__PURE__*/_react.default.createElement(_cardViewV.CardViewV2, {
         status: cardStatusOverride || status,
         error: error,
         mediaItemType: mediaItemType,
@@ -694,7 +694,7 @@ var CardV2Base = /*#__PURE__*/function (_Component) {
       previewDidRender: false,
       error: _error,
       wasResolvedUpfrontPreview: false,
-      shouldUpdateStateForIdentifier: false
+      shouldUpdateStateForIdentifier: _isCardVisible && (0, _mediaClient2.isFileIdentifier)(_identifier)
     };
     return _this;
   }
@@ -758,7 +758,7 @@ var CardV2Base = /*#__PURE__*/function (_Component) {
       // and then check if the triggered listener is from the card
       // that contains a div in current window.getSelection()
       // won't work in IE11
-      (_getDocument = (0, _document.default)()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', this.fireCopiedEvent);
+      (_getDocument = (0, _document.default)()) === null || _getDocument === void 0 || _getDocument.addEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "componentDidUpdate",
@@ -885,7 +885,7 @@ var CardV2Base = /*#__PURE__*/function (_Component) {
     value: function componentWillUnmount() {
       var _getDocument2;
       this.hasBeenMounted = false;
-      (_getDocument2 = (0, _document.default)()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
+      (_getDocument2 = (0, _document.default)()) === null || _getDocument2 === void 0 || _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "updateStateForIdentifier",
@@ -928,8 +928,8 @@ var CardV2Base = /*#__PURE__*/function (_Component) {
   }, {
     key: "fileAttributes",
     get: function get() {
-      var _this$state6, _this$state6$fileStat;
-      return (0, _analytics.getFileAttributes)(this.metadata, (_this$state6 = this.state) === null || _this$state6 === void 0 ? void 0 : (_this$state6$fileStat = _this$state6.fileState) === null || _this$state6$fileStat === void 0 ? void 0 : _this$state6$fileStat.status);
+      var _this$state6;
+      return (0, _analytics.getFileAttributes)(this.metadata, (_this$state6 = this.state) === null || _this$state6 === void 0 || (_this$state6 = _this$state6.fileState) === null || _this$state6 === void 0 ? void 0 : _this$state6.status);
     }
   }, {
     key: "fireOperationalEvent",
@@ -1008,7 +1008,6 @@ var CardV2Base = /*#__PURE__*/function (_Component) {
   }]);
   return CardV2Base;
 }(_react.Component);
-exports.CardV2Base = CardV2Base;
 (0, _defineProperty2.default)(CardV2Base, "defaultProps", {
   appearance: 'auto',
   resizeMode: 'crop',
@@ -1047,12 +1046,11 @@ var CardWithKey = function CardWithKey(props) {
     key: key
   }));
 };
-var CardV2 = (0, _mediaCommon.withMediaAnalyticsContext)({
+var CardV2 = exports.CardV2 = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,
   componentName: 'mediaCard',
   component: 'mediaCard'
 })((0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(CardWithKey, {
   enforceContext: false
-})));
-exports.CardV2 = CardV2;
+})));

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

@@ -91,5 +91,4 @@ var CardLoader = function CardLoader(props) {
     value: props
   }, /*#__PURE__*/_react.default.createElement(MediaCardWithMediaClientProvider, props));
 };
-var _default = CardLoader;
-exports.default = _default;
+var _default = exports.default = CardLoader;

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

@@ -0,0 +1,308 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardViewV2Base = exports.CardViewV2 = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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 _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _mediaUi = require("@atlaskit/media-ui");
+var _cardDimensions = require("../../utils/cardDimensions");
+var _isValidPercentageUnit = require("../../utils/isValidPercentageUnit");
+var _getElementDimension = require("../../utils/getElementDimension");
+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");
+var _progressBar = require("../ui/progressBar/progressBar");
+var _playButton = require("../ui/playButton/playButton");
+var _tickBox = require("../ui/tickBox/tickBox");
+var _blanket = require("../ui/blanket/blanket");
+var _actionsBar = require("../ui/actionsBar/actionsBar");
+var _iconWrapper = require("../ui/iconWrapper/iconWrapper");
+var _iconMessage2 = require("../ui/iconMessage");
+var _errors = require("../../errors");
+var _wrapper = require("../ui/wrapper");
+var _classnames = require("../classnames");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; } /** @jsx jsx */
+var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
+  var innerRef = _ref.innerRef,
+    onImageLoad = _ref.onImageLoad,
+    onImageError = _ref.onImageError,
+    dimensions = _ref.dimensions,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    testId = _ref.testId,
+    metadata = _ref.metadata,
+    status = _ref.status,
+    selected = _ref.selected,
+    selectable = _ref.selectable,
+    cardPreview = _ref.cardPreview,
+    mediaCardCursor = _ref.mediaCardCursor,
+    shouldHideTooltip = _ref.shouldHideTooltip,
+    progress = _ref.progress,
+    alt = _ref.alt,
+    resizeMode = _ref.resizeMode,
+    onDisplayImage = _ref.onDisplayImage,
+    nativeLazyLoad = _ref.nativeLazyLoad,
+    forceSyncDisplay = _ref.forceSyncDisplay,
+    actions = _ref.actions,
+    disableOverlay = _ref.disableOverlay,
+    titleBoxBgColor = _ref.titleBoxBgColor,
+    titleBoxIcon = _ref.titleBoxIcon,
+    error = _ref.error,
+    disableAnimation = _ref.disableAnimation;
+  var _useState = (0, _react2.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    elementWidth = _useState2[0],
+    setElementWidth = _useState2[1];
+  var _useState3 = (0, _react2.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    didImageRender = _useState4[0],
+    setDidImageRender = _useState4[1];
+  var divRef = (0, _react2.useRef)(null);
+  var prevCardPreviewRef = (0, _react2.useRef)();
+  var width = (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || 0;
+  (0, _react2.useEffect)(function () {
+    // If the dimensions.width is a percentage, we need to transform it into a pixel value in order to get the right breakpoints applied.
+    if (width && (0, _isValidPercentageUnit.isValidPercentageUnit)(width) && !!divRef.current) {
+      var _elementWidth = (0, _getElementDimension.getElementDimension)(divRef.current, 'width');
+      setElementWidth(_elementWidth);
+    }
+  }, [width]);
+  (0, _react2.useEffect)(function () {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  (0, _react2.useEffect)(function () {
+    // We should only switch didImageRender to false when cardPreview goes undefined, not when it is changed. as this method could be triggered after onImageLoad callback, falling on a race condition
+    if (prevCardPreviewRef.current && !cardPreview) {
+      setDidImageRender(false);
+    }
+    prevCardPreviewRef.current = cardPreview;
+  }, [cardPreview]);
+  var handleOnImageLoad = function handleOnImageLoad(prevCardPreview) {
+    if (prevCardPreview.dataURI !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+      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
+    */
+
+    setDidImageRender(true);
+    onImageLoad === null || onImageLoad === void 0 || onImageLoad(cardPreview);
+  };
+  var handleOnImageError = function handleOnImageError(cardPreview) {
+    setDidImageRender(false);
+    onImageError === null || onImageError === void 0 || onImageError(cardPreview);
+  };
+  var breakpoint = (0, _react2.useMemo)(function () {
+    var width = elementWidth || (dimensions ? dimensions.width : '') || _cardDimensions.defaultImageCardDimensions.width;
+    return (0, _styles.calcBreakpointSize)(parseInt("".concat(width), 10));
+  }, [elementWidth, dimensions]);
+  var shouldRenderPlayButton = function shouldRenderPlayButton() {
+    var _ref2 = metadata || {},
+      mediaType = _ref2.mediaType;
+    if (mediaType !== 'video' || !cardPreview) {
+      return false;
+    }
+    return true;
+  };
+  var getRenderConfigByStatus = function getRenderConfigByStatus() {
+    var _ref3 = metadata || {},
+      name = _ref3.name,
+      mediaType = _ref3.mediaType;
+    var isZeroSize = metadata && metadata.size === 0;
+    var defaultConfig = {
+      renderTypeIcon: !didImageRender,
+      renderImageRenderer: !!cardPreview,
+      renderPlayButton: !!cardPreview && mediaType === 'video',
+      renderBlanket: !disableOverlay,
+      renderTitleBox: !disableOverlay && !!name,
+      renderTickBox: !disableOverlay && !!selectable
+    };
+    switch (status) {
+      case 'uploading':
+        return _objectSpread(_objectSpread({}, defaultConfig), {}, {
+          renderBlanket: !disableOverlay || mediaType !== 'video',
+          isFixedBlanket: true,
+          renderProgressBar: true
+        });
+      case 'processing':
+        return _objectSpread(_objectSpread({}, defaultConfig), {}, {
+          iconMessage: !didImageRender && !isZeroSize ? (0, _react.jsx)(_iconMessage2.CreatingPreview, {
+            disableAnimation: disableAnimation
+          }) : undefined
+        });
+      case 'complete':
+        return defaultConfig;
+      case 'error':
+      case 'failed-processing':
+        var baseErrorConfig = _objectSpread(_objectSpread({}, defaultConfig), {}, {
+          renderTypeIcon: true,
+          renderImageRenderer: false,
+          renderTitleBox: false,
+          renderPlayButton: false
+        });
+        var _iconMessage;
+        var _customTitleMessage;
+        var _ref4 = error || {},
+          secondaryError = _ref4.secondaryError;
+        if ((0, _errors.isRateLimitedError)(secondaryError) || (0, _errors.isPollingError)(secondaryError)) {
+          _iconMessage = (0, _react.jsx)(_iconMessage2.PreviewCurrentlyUnavailable, null);
+        } else if ((0, _errors.isUploadError)(error)) {
+          _iconMessage = (0, _react.jsx)(_iconMessage2.FailedToUpload, null);
+          _customTitleMessage = _mediaUi.messages.failed_to_upload;
+        } else if (!metadata) {
+          _iconMessage = (0, _react.jsx)(_iconMessage2.FailedToLoad, null);
+        } else {
+          _iconMessage = (0, _react.jsx)(_iconMessage2.PreviewUnavailable, null);
+        }
+        if (!disableOverlay) {
+          var _renderFailedTitleBox = !name || !!_customTitleMessage;
+          return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
+            renderTitleBox: !!name && !_customTitleMessage,
+            renderFailedTitleBox: _renderFailedTitleBox,
+            iconMessage: !_renderFailedTitleBox ? _iconMessage : undefined,
+            customTitleMessage: _customTitleMessage
+          });
+        }
+        return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
+          iconMessage: _iconMessage
+        });
+      case 'loading-preview':
+      case 'loading':
+      default:
+        return _objectSpread(_objectSpread({}, defaultConfig), {}, {
+          renderPlayButton: false,
+          renderTypeIcon: false,
+          renderSpinner: !didImageRender
+        });
+    }
+  };
+  var _getRenderConfigBySta = getRenderConfigByStatus(),
+    renderTypeIcon = _getRenderConfigBySta.renderTypeIcon,
+    iconMessage = _getRenderConfigBySta.iconMessage,
+    renderImageRenderer = _getRenderConfigBySta.renderImageRenderer,
+    renderSpinner = _getRenderConfigBySta.renderSpinner,
+    renderPlayButton = _getRenderConfigBySta.renderPlayButton,
+    renderBlanket = _getRenderConfigBySta.renderBlanket,
+    renderProgressBar = _getRenderConfigBySta.renderProgressBar,
+    renderTitleBox = _getRenderConfigBySta.renderTitleBox,
+    renderFailedTitleBox = _getRenderConfigBySta.renderFailedTitleBox,
+    renderTickBox = _getRenderConfigBySta.renderTickBox,
+    isFixedBlanket = _getRenderConfigBySta.isFixedBlanket,
+    customTitleMessage = _getRenderConfigBySta.customTitleMessage;
+  var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
+  var isPlayButtonClickable = shouldRenderPlayButton() && !!disableOverlay;
+  var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
+  // Disable tooltip for Media Single
+  var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
+  var hasTitleBox = !!(renderTitleBox || renderFailedTitleBox);
+  var _ref5 = metadata || {},
+    mediaType = _ref5.mediaType,
+    mimeType = _ref5.mimeType,
+    name = _ref5.name,
+    createdAt = _ref5.createdAt;
+  var actionsWithDetails = metadata && actions ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
+  var content = (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
+  }, renderTypeIcon && (0, _react.jsx)(_iconWrapper.IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, (0, _react.jsx)(_mimeTypeIcon.MimeTypeIcon, {
+    testId: "media-card-file-type-icon",
+    mediaType: mediaType,
+    mimeType: mimeType,
+    name: name
+  }), iconMessage), renderSpinner && (0, _react.jsx)(_iconWrapper.IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, (0, _react.jsx)(_spinner.default, {
+    testId: "media-card-loading"
+  })), renderImageRenderer && !!cardPreview && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
+    cardPreview: cardPreview,
+    mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
+    alt: alt,
+    resizeMode: resizeMode,
+    onDisplayImage: onDisplayImage,
+    onImageLoad: handleOnImageLoad,
+    onImageError: handleOnImageError,
+    nativeLazyLoad: nativeLazyLoad,
+    forceSyncDisplay: forceSyncDisplay
+  }), renderPlayButton && (0, _react.jsx)(_iconWrapper.IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, (0, _react.jsx)(_playButton.PlayButton, null)), renderBlanket && (0, _react.jsx)(_blanket.Blanket, {
+    isFixed: isFixedBlanket
+  }), renderTitleBox && name && (0, _react.jsx)(_titleBox.TitleBox, {
+    name: name,
+    createdAt: createdAt,
+    breakpoint: breakpoint,
+    titleBoxIcon: titleBoxIcon,
+    titleBoxBgColor: titleBoxBgColor
+  }), renderFailedTitleBox && (0, _react.jsx)(_failedTitleBox.FailedTitleBox, {
+    breakpoint: breakpoint,
+    customMessage: customTitleMessage
+  }), renderProgressBar && (0, _react.jsx)(_progressBar.ProgressBar, {
+    progress: progress,
+    breakpoint: breakpoint,
+    positionBottom: !hasTitleBox
+  }), renderTickBox && (0, _react.jsx)(_tickBox.TickBox, {
+    selected: selected
+  })), disableOverlay || !actions || actions.length === 0 ? null : (0, _react.jsx)(_actionsBar.ActionsBar, {
+    actions: actionsWithDetails
+  }));
+  return (0, _react.jsx)(_wrapper.Wrapper, {
+    testId: testId || 'media-card-view',
+    dimensions: dimensions,
+    appearance: appearance,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    innerRef: divRef,
+    breakpoint: breakpoint,
+    mediaCardCursor: mediaCardCursor,
+    disableOverlay: !!disableOverlay,
+    selected: !!selected,
+    displayBackground: shouldDisplayBackground,
+    isPlayButtonClickable: isPlayButtonClickable,
+    isTickBoxSelectable: isTickBoxSelectable,
+    shouldDisplayTooltip: shouldDisplayTooltip
+  }, shouldDisplayTooltip ? (0, _react.jsx)(_tooltip.default, {
+    content: name,
+    position: "bottom",
+    tag: "div"
+  }, content) : content);
+};
+var CardViewV2 = exports.CardViewV2 = (0, _analyticsNext.withAnalyticsEvents)({
+  onClick: (0, _analytics.createAndFireMediaCardEvent)({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(CardViewV2Base);

package/dist/cjs/errors.js

@@ -28,7 +28,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * Primary reason is logged through Data Portal.
  * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
  */
-var MediaFileStateError = /*#__PURE__*/function (_Error) {
+var MediaFileStateError = exports.MediaFileStateError = /*#__PURE__*/function (_Error) {
   (0, _inherits2.default)(MediaFileStateError, _Error);
   var _super = _createSuper(MediaFileStateError);
   function MediaFileStateError(id, reason) {
@@ -52,7 +52,6 @@ var MediaFileStateError = /*#__PURE__*/function (_Error) {
   }
   return (0, _createClass2.default)(MediaFileStateError);
 }( /*#__PURE__*/(0, _wrapNativeSuper2.default)(Error));
-exports.MediaFileStateError = MediaFileStateError;
 function isMediaFileStateError(err) {
   return err instanceof MediaFileStateError;
 }
@@ -80,7 +79,7 @@ function isRateLimitedError(error) {
   }
   return false;
 }
-var MediaCardError = /*#__PURE__*/function (_Error2) {
+var MediaCardError = exports.MediaCardError = /*#__PURE__*/function (_Error2) {
   (0, _inherits2.default)(MediaCardError, _Error2);
   var _super2 = _createSuper(MediaCardError);
   function MediaCardError(primaryReason, secondaryError) {
@@ -100,8 +99,7 @@ var MediaCardError = /*#__PURE__*/function (_Error2) {
   }
   return (0, _createClass2.default)(MediaCardError);
 }( /*#__PURE__*/(0, _wrapNativeSuper2.default)(Error));
-exports.MediaCardError = MediaCardError;
-var LocalPreviewError = /*#__PURE__*/function (_MediaCardError) {
+var LocalPreviewError = exports.LocalPreviewError = /*#__PURE__*/function (_MediaCardError) {
   (0, _inherits2.default)(LocalPreviewError, _MediaCardError);
   var _super3 = _createSuper(LocalPreviewError);
   function LocalPreviewError(primaryReason, secondaryError) {
@@ -114,8 +112,7 @@ var LocalPreviewError = /*#__PURE__*/function (_MediaCardError) {
   }
   return (0, _createClass2.default)(LocalPreviewError);
 }(MediaCardError);
-exports.LocalPreviewError = LocalPreviewError;
-var RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
+var RemotePreviewError = exports.RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
   (0, _inherits2.default)(RemotePreviewError, _MediaCardError2);
   var _super4 = _createSuper(RemotePreviewError);
   function RemotePreviewError(primaryReason, secondaryError) {
@@ -128,8 +125,7 @@ var RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
   }
   return (0, _createClass2.default)(RemotePreviewError);
 }(MediaCardError);
-exports.RemotePreviewError = RemotePreviewError;
-var SsrPreviewError = /*#__PURE__*/function (_MediaCardError3) {
+var SsrPreviewError = exports.SsrPreviewError = /*#__PURE__*/function (_MediaCardError3) {
   (0, _inherits2.default)(SsrPreviewError, _MediaCardError3);
   var _super5 = _createSuper(SsrPreviewError);
   function SsrPreviewError(primaryReason, secondaryError) {
@@ -142,8 +138,7 @@ var SsrPreviewError = /*#__PURE__*/function (_MediaCardError3) {
   }
   return (0, _createClass2.default)(SsrPreviewError);
 }(MediaCardError);
-exports.SsrPreviewError = SsrPreviewError;
-var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source) {
+var getImageLoadPrimaryReason = exports.getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source) {
   switch (source) {
     case 'cache-remote':
       return 'cache-remote-uri';
@@ -160,8 +155,7 @@ var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source) {
       return "unknown-uri";
   }
 };
-exports.getImageLoadPrimaryReason = getImageLoadPrimaryReason;
-var ImageLoadError = /*#__PURE__*/function (_MediaCardError4) {
+var ImageLoadError = exports.ImageLoadError = /*#__PURE__*/function (_MediaCardError4) {
   (0, _inherits2.default)(ImageLoadError, _MediaCardError4);
   var _super6 = _createSuper(ImageLoadError);
   function ImageLoadError(source) {
@@ -170,22 +164,18 @@ var ImageLoadError = /*#__PURE__*/function (_MediaCardError4) {
   }
   return (0, _createClass2.default)(ImageLoadError);
 }(MediaCardError);
-exports.ImageLoadError = ImageLoadError;
 function isMediaCardError(err) {
   return err instanceof MediaCardError;
 }
-var isLocalPreviewError = function isLocalPreviewError(err) {
+var isLocalPreviewError = exports.isLocalPreviewError = function isLocalPreviewError(err) {
   return err instanceof LocalPreviewError;
 };
-exports.isLocalPreviewError = isLocalPreviewError;
-var isRemotePreviewError = function isRemotePreviewError(err) {
+var isRemotePreviewError = exports.isRemotePreviewError = function isRemotePreviewError(err) {
   return err instanceof RemotePreviewError;
 };
-exports.isRemotePreviewError = isRemotePreviewError;
-var isUnsupportedLocalPreviewError = function isUnsupportedLocalPreviewError(err) {
+var isUnsupportedLocalPreviewError = exports.isUnsupportedLocalPreviewError = function isUnsupportedLocalPreviewError(err) {
   return isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported';
 };
-exports.isUnsupportedLocalPreviewError = isUnsupportedLocalPreviewError;
 function isImageLoadError(err) {
   return err instanceof ImageLoadError;
 }
@@ -193,7 +183,7 @@ function isImageLoadError(err) {
 // In a try/catch statement, the error caught is the type of unknown.
 // We can use this helper to ensure that the error handled is the type of MediaCardError if unsure
 // If updatePrimaryReason is true, if it's a MediaCardError already, it will update it's primary reason
-var ensureMediaCardError = function ensureMediaCardError(primaryReason, error, updatePrimaryReason) {
+var ensureMediaCardError = exports.ensureMediaCardError = function ensureMediaCardError(primaryReason, error, updatePrimaryReason) {
   if (isMediaCardError(error)) {
     if (updatePrimaryReason && error.primaryReason !== primaryReason) {
       return new MediaCardError(primaryReason, error.secondaryError);
@@ -202,8 +192,6 @@ var ensureMediaCardError = function ensureMediaCardError(primaryReason, error, u
   }
   return new MediaCardError(primaryReason, error);
 };
-exports.ensureMediaCardError = ensureMediaCardError;
-var isUploadError = function isUploadError(error) {
+var isUploadError = exports.isUploadError = function isUploadError(error) {
   return error && error.primaryReason === 'upload';
-};
-exports.isUploadError = isUploadError;
+};

package/dist/cjs/inline/loader.js

@@ -23,7 +23,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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() { 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; } }
-var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
+var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(MediaInlineCardLoader, _React$PureComponent);
   var _super = _createSuper(MediaInlineCardLoader);
   function MediaInlineCardLoader() {
@@ -119,7 +119,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.0.3",
+        packageName: "77.1.1",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };
@@ -137,5 +137,4 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return MediaInlineCardLoader;
 }(_react.default.PureComponent);
-exports.default = MediaInlineCardLoader;
 (0, _defineProperty2.default)(MediaInlineCardLoader, "displayName", 'MediaInlineCardLoader');