@atlaskit/media-card 77.0.2 → 77.1.0

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

@@ -22,7 +22,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
     _classCallCheck(this, WrappedMediaCardAnalyticsErrorBoundary);
     _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "fireOperationalEvent", function (error, info) {
-      var _window, _window$navigator;
+      var _window;
       var _this$props = _this.props,
         _this$props$data = _this$props.data,
         data = _this$props$data === void 0 ? {} : _this$props$data,
@@ -32,7 +32,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
         action: 'failed',
         actionSubject: 'mediaCardRender',
         attributes: _objectSpread({
-          browserInfo: (_window = window) !== null && _window !== void 0 && (_window$navigator = _window.navigator) !== null && _window$navigator !== void 0 && _window$navigator.userAgent ? window.navigator.userAgent : 'unknown',
+          browserInfo: (_window = window) !== null && _window !== void 0 && (_window = _window.navigator) !== null && _window !== void 0 && _window.userAgent ? window.navigator.userAgent : 'unknown',
           error: error,
           info: info,
           failReason: 'unexpected-error'
@@ -43,7 +43,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
     _defineProperty(_assertThisInitialized(_this), "handleOnClick", function (event) {
       try {
         var _this$props$onClick, _this$props2;
-        (_this$props$onClick = (_this$props2 = _this.props).onClick) === null || _this$props$onClick === void 0 ? void 0 : _this$props$onClick.call(_this$props2, {
+        (_this$props$onClick = (_this$props2 = _this.props).onClick) === null || _this$props$onClick === void 0 || _this$props$onClick.call(_this$props2, {
           event: event
         });
       } catch (e) {}
@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.0.2";
+var packageVersion = "77.1.0";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -5,6 +5,7 @@ export var Blanket = function Blanket(props) {
   var isFixed = props.isFixed;
   return jsx("div", {
     css: blanketStyles(isFixed),
-    className: blanketClassName
+    className: blanketClassName,
+    "data-testid": "media-card-blanket"
   });
 };

package/dist/esm/card/ui/progressBar/styledBar.js

@@ -8,7 +8,8 @@ export var StyledBar = function StyledBar(props) {
     showOnTop = props.showOnTop;
   return jsx("div", {
     id: "styledBar",
-    "data-testid": "media-progress-bar",
+    role: "progressbar",
+    "aria-valuenow": progress,
     css: styledBarStyles({
       progress: progress,
       breakpoint: breakpoint,

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

@@ -11,6 +11,6 @@ export var getSelectedStyles = function getSelectedStyles(selected) {
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var wrapperStyles = function wrapperStyles(selected) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  font-size: 14px;\n  width: 14px;\n  height: 14px;\n  position: absolute;\n  top: 7px;\n  left: 7px;\n  border-radius: 20px;\n  color: transparent;\n  /* Enforce dimensions and position of \"tick\" icon */\n  span {\n    display: block;\n    svg {\n      height: 14px;\n    }\n  }\n  ", "\n"])), transition(), getSelectedStyles(selected));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  font-size: 14px;\n  width: 14px;\n  height: 14px;\n  position: absolute;\n  top: 7px;\n  left: 7px;\n  border-radius: 20px;\n  color: transparent;\n  /* Enforce dimensions and position of \"tick\" icon */\n  span {\n    display: block;\n    svg {\n      height: 14px;\n    }\n  }\n  ", "\n"])), transition && transition(), getSelectedStyles(selected));
 };
 wrapperStyles.displayName = 'TickBoxWrapper';

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

@@ -22,7 +22,7 @@ import { getRandomHex } from '@atlaskit/media-common';
 import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier, imageResizeModeToFileImageMode } from '@atlaskit/media-client';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { injectIntl, IntlProvider } from 'react-intl-next';
-import { CardView } from '../cardView';
+import { CardViewV2 } from './cardViewV2';
 import { ViewportDetector } from '../../utils/viewportDetector';
 import { videoIsPlayable } from '../../utils/videoIsPlayable';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
@@ -41,7 +41,7 @@ import { completeUfoExperience, startUfoExperience } from '../../utils/ufoExperi
 import { generateUniqueId } from '../../utils/generateUniqueId';
 import { useFileState } from '@atlaskit/media-client-react';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.0.2";
+var packageVersion = "77.1.0";
 export var CardV2Base = /*#__PURE__*/function (_Component) {
   _inherits(CardV2Base, _Component);
   var _super = _createSuper(CardV2Base);
@@ -564,7 +564,7 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
       // Force Media Image to always display img for SSR
       var forceSyncDisplay = !!ssr;
       var mediaCardCursor = getMediaCardCursor(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!_this.state.cardPreview, metadata.mediaType);
-      var card = /*#__PURE__*/React.createElement(CardView, {
+      var card = /*#__PURE__*/React.createElement(CardViewV2, {
         status: cardStatusOverride || status,
         error: error,
         mediaItemType: mediaItemType,
@@ -749,7 +749,7 @@ export 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 = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', this.fireCopiedEvent);
+      (_getDocument = getDocument()) === null || _getDocument === void 0 || _getDocument.addEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "componentDidUpdate",
@@ -876,7 +876,7 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
     value: function componentWillUnmount() {
       var _getDocument2;
       this.hasBeenMounted = false;
-      (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
+      (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 || _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "updateStateForIdentifier",
@@ -919,8 +919,8 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
   }, {
     key: "fileAttributes",
     get: function get() {
-      var _this$state6, _this$state6$fileStat;
-      return 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 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",

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

@@ -0,0 +1,299 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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) { _defineProperty(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 */
+import { jsx } from '@emotion/react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
+import SpinnerIcon from '@atlaskit/spinner';
+import Tooltip from '@atlaskit/tooltip';
+import { messages } from '@atlaskit/media-ui';
+import { defaultImageCardDimensions } from '../../utils/cardDimensions';
+import { isValidPercentageUnit } from '../../utils/isValidPercentageUnit';
+import { getElementDimension } from '../../utils/getElementDimension';
+import { createAndFireMediaCardEvent } from '../../utils/analytics';
+import { attachDetailsToActions } from '../actions';
+import { cardImageContainerStyles, calcBreakpointSize } from '../ui/styles';
+import { ImageRenderer } from '../ui/imageRenderer/imageRenderer';
+import { TitleBox } from '../ui/titleBox/titleBox';
+import { FailedTitleBox } from '../ui/titleBox/failedTitleBox';
+import { ProgressBar } from '../ui/progressBar/progressBar';
+import { PlayButton } from '../ui/playButton/playButton';
+import { TickBox } from '../ui/tickBox/tickBox';
+import { Blanket } from '../ui/blanket/blanket';
+import { ActionsBar } from '../ui/actionsBar/actionsBar';
+import { IconWrapper } from '../ui/iconWrapper/iconWrapper';
+import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from '../ui/iconMessage';
+import { isUploadError, isRateLimitedError, isPollingError } from '../../errors';
+import { Wrapper } from '../ui/wrapper';
+import { fileCardImageViewSelector } from '../classnames';
+export var 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 = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    elementWidth = _useState2[0],
+    setElementWidth = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    didImageRender = _useState4[0],
+    setDidImageRender = _useState4[1];
+  var divRef = useRef(null);
+  var prevCardPreviewRef = useRef();
+  var width = (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || 0;
+  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 && isValidPercentageUnit(width) && !!divRef.current) {
+      var _elementWidth = getElementDimension(divRef.current, 'width');
+      setElementWidth(_elementWidth);
+    }
+  }, [width]);
+  useEffect(function () {
+    innerRef && !!divRef.current && innerRef(divRef.current);
+  }, [innerRef]);
+  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 = useMemo(function () {
+    var width = elementWidth || (dimensions ? dimensions.width : '') || defaultImageCardDimensions.width;
+    return 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 ? jsx(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 (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
+          _iconMessage = jsx(PreviewCurrentlyUnavailable, null);
+        } else if (isUploadError(error)) {
+          _iconMessage = jsx(FailedToUpload, null);
+          _customTitleMessage = messages.failed_to_upload;
+        } else if (!metadata) {
+          _iconMessage = jsx(FailedToLoad, null);
+        } else {
+          _iconMessage = jsx(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 ? attachDetailsToActions(actions, metadata) : [];
+  var content = jsx(React.Fragment, null, jsx("div", {
+    css: cardImageContainerStyles,
+    className: fileCardImageViewSelector,
+    "data-testid": fileCardImageViewSelector,
+    "data-test-media-name": name,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    "data-test-selected": selected
+  }, renderTypeIcon && jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(MimeTypeIcon, {
+    testId: "media-card-file-type-icon",
+    mediaType: mediaType,
+    mimeType: mimeType,
+    name: name
+  }), iconMessage), renderSpinner && jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(SpinnerIcon, {
+    testId: "media-card-loading"
+  })), renderImageRenderer && !!cardPreview && jsx(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 && jsx(IconWrapper, {
+    breakpoint: breakpoint,
+    hasTitleBox: hasTitleBox
+  }, jsx(PlayButton, null)), renderBlanket && jsx(Blanket, {
+    isFixed: isFixedBlanket
+  }), renderTitleBox && name && jsx(TitleBox, {
+    name: name,
+    createdAt: createdAt,
+    breakpoint: breakpoint,
+    titleBoxIcon: titleBoxIcon,
+    titleBoxBgColor: titleBoxBgColor
+  }), renderFailedTitleBox && jsx(FailedTitleBox, {
+    breakpoint: breakpoint,
+    customMessage: customTitleMessage
+  }), renderProgressBar && jsx(ProgressBar, {
+    progress: progress,
+    breakpoint: breakpoint,
+    positionBottom: !hasTitleBox
+  }), renderTickBox && jsx(TickBox, {
+    selected: selected
+  })), disableOverlay || !actions || actions.length === 0 ? null : jsx(ActionsBar, {
+    actions: actionsWithDetails
+  }));
+  return jsx(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 ? jsx(Tooltip, {
+    content: name,
+    position: "bottom",
+    tag: "div"
+  }, content) : content);
+};
+export var CardViewV2 = withAnalyticsEvents({
+  onClick: createAndFireMediaCardEvent({
+    eventType: 'ui',
+    action: 'clicked',
+    actionSubject: 'mediaCard',
+    attributes: {}
+  })
+})(CardViewV2Base);

package/dist/esm/inline/loader.js

@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.0.2",
+        packageName: "77.1.0",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -69,7 +69,7 @@ var WrappedMediaInlineAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Com
     _classCallCheck(this, WrappedMediaInlineAnalyticsErrorBoundary);
     _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "fireOperationalEvent", function (error, info) {
-      var _window, _window$navigator;
+      var _window;
       var _this$props = _this.props,
         _this$props$data = _this$props.data,
         data = _this$props$data === void 0 ? {} : _this$props$data,
@@ -79,7 +79,7 @@ var WrappedMediaInlineAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Com
         action: 'failed',
         actionSubject: 'mediaInlineRender',
         attributes: _objectSpread({
-          browserInfo: (_window = window) !== null && _window !== void 0 && (_window$navigator = _window.navigator) !== null && _window$navigator !== void 0 && _window$navigator.userAgent ? window.navigator.userAgent : 'unknown',
+          browserInfo: (_window = window) !== null && _window !== void 0 && (_window = _window.navigator) !== null && _window !== void 0 && _window.userAgent ? window.navigator.userAgent : 'unknown',
           error: error,
           failReason: 'unexpected-error',
           info: info

package/dist/esm/utils/analytics.js

@@ -117,8 +117,8 @@ export var getErrorTraceContext = function getErrorTraceContext(error) {
       var _error$secondaryError;
       return (_error$secondaryError = error.secondaryError.metadata) === null || _error$secondaryError === void 0 ? void 0 : _error$secondaryError.traceContext;
     } else if (isMediaFileStateError(error.secondaryError)) {
-      var _error$secondaryError2, _error$secondaryError3;
-      return (_error$secondaryError2 = error.secondaryError.details) === null || _error$secondaryError2 === void 0 ? void 0 : (_error$secondaryError3 = _error$secondaryError2.metadata) === null || _error$secondaryError3 === void 0 ? void 0 : _error$secondaryError3.traceContext;
+      var _error$secondaryError2;
+      return (_error$secondaryError2 = error.secondaryError.details) === null || _error$secondaryError2 === void 0 || (_error$secondaryError2 = _error$secondaryError2.metadata) === null || _error$secondaryError2 === void 0 ? void 0 : _error$secondaryError2.traceContext;
     }
   }
 };
@@ -127,8 +127,8 @@ export var getRenderErrorRequestMetadata = function getRenderErrorRequestMetadat
     if (isRequestError(error.secondaryError)) {
       return error.secondaryError.metadata;
     } else if (isMediaFileStateError(error.secondaryError)) {
-      var _error$secondaryError4;
-      return (_error$secondaryError4 = error.secondaryError.details) === null || _error$secondaryError4 === void 0 ? void 0 : _error$secondaryError4.metadata;
+      var _error$secondaryError3;
+      return (_error$secondaryError3 = error.secondaryError.details) === null || _error$secondaryError3 === void 0 ? void 0 : _error$secondaryError3.metadata;
     }
   }
 };

package/dist/esm/utils/mockIntersectionObserver.js

@@ -15,15 +15,15 @@ export var MockIntersectionObserver = /*#__PURE__*/function () {
       // eslint-disable-next-line @typescript-eslint/no-this-alias
       var outerThis = this;
       this.mockObserver = /*#__PURE__*/function () {
-        function _class2(callback) {
-          _classCallCheck(this, _class2);
+        function _class3(callback) {
+          _classCallCheck(this, _class3);
           _defineProperty(this, "observe", observe !== null && observe !== void 0 ? observe : noop);
           _defineProperty(this, "unobserve", noop);
           _defineProperty(this, "disconnect", disconnect !== null && disconnect !== void 0 ? disconnect : noop);
           outerThis.callback = callback;
           outerThis.mockObserverInstance = this;
         }
-        return _createClass(_class2);
+        return _createClass(_class3);
       }();
     }
   }, {

package/dist/esm/utils/ufoExperiences.js

@@ -7,7 +7,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.0.2";
+var packageVersion = "77.1.0";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/types/card/v2/cardViewV2.d.ts

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React, { MouseEvent } from 'react';
+import { MessageDescriptor } from 'react-intl-next';
+import { MediaItemType, FileDetails } from '@atlaskit/media-client';
+import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { SharedCardProps, CardStatus, CardPreview, MediaCardCursor } from '../../types';
+import { MediaCardError } from '../../errors';
+export interface CardViewV2OwnProps extends SharedCardProps {
+    readonly status: CardStatus;
+    readonly mediaItemType: MediaItemType;
+    readonly mediaCardCursor?: MediaCardCursor;
+    readonly metadata?: FileDetails;
+    readonly error?: MediaCardError;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+    readonly onDisplayImage?: () => void;
+    readonly cardPreview?: CardPreview;
+    readonly progress?: number;
+    readonly innerRef?: (instance: HTMLDivElement | null) => void;
+    readonly onImageLoad?: (cardPreview: CardPreview) => void;
+    readonly onImageError?: (cardPreview: CardPreview) => void;
+    readonly nativeLazyLoad?: boolean;
+    readonly forceSyncDisplay?: boolean;
+    disableAnimation?: boolean;
+    shouldHideTooltip?: boolean;
+}
+export type CardViewV2Props = CardViewV2OwnProps & WithAnalyticsEventsProps;
+export interface RenderConfigByStatusV2 {
+    renderTypeIcon?: boolean;
+    iconMessage?: JSX.Element;
+    renderImageRenderer?: boolean;
+    renderPlayButton?: boolean;
+    renderTitleBox?: boolean;
+    renderBlanket?: boolean;
+    isFixedBlanket?: boolean;
+    renderProgressBar?: boolean;
+    renderSpinner?: boolean;
+    renderFailedTitleBox?: boolean;
+    renderTickBox?: boolean;
+    customTitleMessage?: MessageDescriptor;
+}
+export declare const CardViewV2Base: ({ innerRef, onImageLoad, onImageError, dimensions, appearance, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, }: CardViewV2Props) => jsx.JSX.Element;
+export declare const CardViewV2: React.ForwardRefExoticComponent<Omit<CardViewV2Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types-ts4.5/card/v2/cardViewV2.d.ts

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React, { MouseEvent } from 'react';
+import { MessageDescriptor } from 'react-intl-next';
+import { MediaItemType, FileDetails } from '@atlaskit/media-client';
+import { WithAnalyticsEventsProps, UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { SharedCardProps, CardStatus, CardPreview, MediaCardCursor } from '../../types';
+import { MediaCardError } from '../../errors';
+export interface CardViewV2OwnProps extends SharedCardProps {
+    readonly status: CardStatus;
+    readonly mediaItemType: MediaItemType;
+    readonly mediaCardCursor?: MediaCardCursor;
+    readonly metadata?: FileDetails;
+    readonly error?: MediaCardError;
+    readonly onClick?: (event: React.MouseEvent<HTMLDivElement>, analyticsEvent?: UIAnalyticsEvent) => void;
+    readonly onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+    readonly onDisplayImage?: () => void;
+    readonly cardPreview?: CardPreview;
+    readonly progress?: number;
+    readonly innerRef?: (instance: HTMLDivElement | null) => void;
+    readonly onImageLoad?: (cardPreview: CardPreview) => void;
+    readonly onImageError?: (cardPreview: CardPreview) => void;
+    readonly nativeLazyLoad?: boolean;
+    readonly forceSyncDisplay?: boolean;
+    disableAnimation?: boolean;
+    shouldHideTooltip?: boolean;
+}
+export type CardViewV2Props = CardViewV2OwnProps & WithAnalyticsEventsProps;
+export interface RenderConfigByStatusV2 {
+    renderTypeIcon?: boolean;
+    iconMessage?: JSX.Element;
+    renderImageRenderer?: boolean;
+    renderPlayButton?: boolean;
+    renderTitleBox?: boolean;
+    renderBlanket?: boolean;
+    isFixedBlanket?: boolean;
+    renderProgressBar?: boolean;
+    renderSpinner?: boolean;
+    renderFailedTitleBox?: boolean;
+    renderTickBox?: boolean;
+    customTitleMessage?: MessageDescriptor;
+}
+export declare const CardViewV2Base: ({ innerRef, onImageLoad, onImageError, dimensions, appearance, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, }: CardViewV2Props) => jsx.JSX.Element;
+export declare const CardViewV2: React.ForwardRefExoticComponent<Omit<CardViewV2Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "77.0.2",
+  "version": "77.1.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/dropdown-menu": "^11.14.0",
-    "@atlaskit/editor-shared-styles": "^2.7.0",
+    "@atlaskit/editor-shared-styles": "^2.8.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/media-client": "^24.0.0",
     "@atlaskit/media-client-react": "^1.0.0",
@@ -46,7 +46,7 @@
     "@atlaskit/media-ui": "^25.0.0",
     "@atlaskit/media-viewer": "^48.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
-    "@atlaskit/spinner": "^15.5.0",
+    "@atlaskit/spinner": "^15.6.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.25.0",
     "@atlaskit/tooltip": "^17.8.0",