@atlaskit/media-card 77.4.6 → 77.4.8

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/media-card
 
+## 77.4.8
+
+### Patch Changes
+
+- [#59147](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59147) [`f12e489f23b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f12e489f23b0) - Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).
+- [#58813](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58813) [`28b2b3f41843`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/28b2b3f41843) - Internal components use useMediaClient hook
+- [#56822](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/56822) [`77f4fbf44e93`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77f4fbf44e93) - ECA11Y-78: Added announce for the selected file
+- [#58473](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58473) [`7c4103bcdc2c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7c4103bcdc2c) - refactored use of card dimensions and requested dimensions in card V2
+
+## 77.4.7
+
+### Patch Changes
+
+- [#57119](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57119) [`c64d6ef23ba4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c64d6ef23ba4) - Replaces the return type of internal preview hook to include the attributes for the ssr script
+- Updated dependencies
+
 ## 77.4.6
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -49,7 +49,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { 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.4.6";
+var packageVersion = "77.4.8";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -611,12 +611,9 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
       var _this$state$cardPrevi = _this.state.cardPreview,
         _this$state$cardPrevi2 = _this$state$cardPrevi === void 0 ? {} : _this$state$cardPrevi,
         dataURI = _this$state$cardPrevi2.dataURI;
-      return (0, _mediaClient2.isFileIdentifier)(identifier) && ssr === 'server' && /*#__PURE__*/_react.default.createElement(_globalScope.StoreSSRDataScript, {
-        identifier: identifier,
-        dataURI: dataURI,
-        dimensions: _this.requestedDimensions,
-        error: ((_this$ssrReliability$ = _this.ssrReliability.server) === null || _this$ssrReliability$ === void 0 ? void 0 : _this$ssrReliability$.status) === 'fail' ? _this.ssrReliability.server : undefined
-      });
+      return (0, _mediaClient2.isFileIdentifier)(identifier) &&
+      // Print the SSR result to be used during hydration
+      ssr === 'server' && /*#__PURE__*/_react.default.createElement("script", (0, _globalScope.generateScriptProps)(identifier, dataURI, _this.requestedDimensions, ((_this$ssrReliability$ = _this.ssrReliability.server) === null || _this$ssrReliability$ === void 0 ? void 0 : _this$ssrReliability$.status) === 'fail' ? _this.ssrReliability.server : undefined));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCardInViewport", function () {
       _this.setState({

package/dist/cjs/card/cardView.js

@@ -38,6 +38,7 @@ var _iconMessage = require("./ui/iconMessage");
 var _errors = require("../errors");
 var _wrapper = require("./ui/wrapper");
 var _classnames = require("./classnames");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 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); }; }
@@ -334,10 +335,13 @@ var CardViewBase = exports.CardViewBase = /*#__PURE__*/function (_React$Componen
         onDisplayImage = _this$props6.onDisplayImage,
         nativeLazyLoad = _this$props6.nativeLazyLoad,
         forceSyncDisplay = _this$props6.forceSyncDisplay;
+      var _ref7 = this.props.metadata || {},
+        name = _ref7.name;
+      var altText = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-media_er96o') ? alt || name : alt;
       return !!cardPreview && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
         cardPreview: cardPreview,
         mediaType: mediaType,
-        alt: alt,
+        alt: altText,
         resizeMode: resizeMode,
         onDisplayImage: onDisplayImage,
         onImageLoad: this.onImageLoad,
@@ -358,10 +362,10 @@ var CardViewBase = exports.CardViewBase = /*#__PURE__*/function (_React$Componen
     key: "renderMediaTypeIcon",
     value: function renderMediaTypeIcon(hasTitleBox, iconMessage) {
       var metadata = this.props.metadata;
-      var _ref7 = metadata || {},
-        mediaType = _ref7.mediaType,
-        mimeType = _ref7.mimeType,
-        name = _ref7.name;
+      var _ref8 = metadata || {},
+        mediaType = _ref8.mediaType,
+        mimeType = _ref8.mimeType,
+        name = _ref8.name;
       return (0, _react.jsx)(_iconWrapper.IconWrapper, {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
@@ -404,8 +408,8 @@ var CardViewBase = exports.CardViewBase = /*#__PURE__*/function (_React$Componen
         cardPreview = _this$props8.cardPreview,
         mediaCardCursor = _this$props8.mediaCardCursor,
         shouldHideTooltip = _this$props8.shouldHideTooltip;
-      var _ref8 = metadata || {},
-        name = _ref8.name;
+      var _ref9 = metadata || {},
+        name = _ref9.name;
       var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
       var isPlayButtonClickable = !!(this.shouldRenderPlayButton() && disableOverlay);
       var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;

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

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

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

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

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

@@ -41,8 +41,6 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
     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,
@@ -263,7 +261,6 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
   return (0, _react.jsx)(_wrapper.Wrapper, {
     testId: testId || 'media-card-view',
     dimensions: dimensions,
-    appearance: appearance,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
     innerRef: divRef,

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

@@ -19,6 +19,7 @@ var _generateUniqueId = require("../../utils/generateUniqueId");
 var _getMediaCardCursor = require("../../utils/getMediaCardCursor");
 var _ufoExperiences = require("../../utils/ufoExperiences");
 var _useCurrentValueRef = require("../../utils/useCurrentValueRef");
+var _cardDimensions = require("../../utils/cardDimensions");
 var _usePrevious = require("../../utils/usePrevious");
 var _cardAnalytics = require("../cardAnalytics");
 var _cardViewV = require("./cardViewV2");
@@ -52,6 +53,7 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
     _onClick = _ref.onClick,
     _onMouseEnter = _ref.onMouseEnter,
     createAnalyticsEvent = _ref.createAnalyticsEvent;
+  var cardDimensions = dimensions || (0, _cardDimensions.getDefaultCardDimensions)(appearance);
   var internalOccurrenceKey = (0, _react.useMemo)(function () {
     return (0, _generateUniqueId.generateUniqueId)();
   }, []);
@@ -233,9 +235,8 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
     metadata: metadata,
     cardPreview: cardPreview,
     alt: alt,
-    appearance: appearance,
     resizeMode: resizeMode,
-    dimensions: dimensions,
+    dimensions: cardDimensions,
     actions: actions,
     selectable: selectable,
     selected: selected,
@@ -273,7 +274,6 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
     },
     innerRef: setCardElement,
     testId: testId,
-    featureFlags: featureFlags,
     titleBoxBgColor: titleBoxBgColor,
     titleBoxIcon: titleBoxIcon,
     onImageError: function onImageError(newCardPreview) {

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

@@ -27,6 +27,7 @@ var _useCurrentValueRef = require("../../utils/useCurrentValueRef");
 var _usePrevious = require("../../utils/usePrevious");
 var _videoIsPlayable = require("../../utils/videoIsPlayable");
 var _viewportDetector = require("../../utils/viewportDetector");
+var _cardDimensions = require("../../utils/cardDimensions");
 var _cardAnalytics = require("../cardAnalytics");
 var _getCardPreview = require("../getCardPreview");
 var _cardViewV = require("./cardViewV2");
@@ -49,7 +50,6 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     featureFlags = _ref$featureFlags === void 0 ? {} : _ref$featureFlags,
     identifier = _ref.identifier,
     ssr = _ref.ssr,
-    mediaClient = _ref.mediaClient,
     dimensions = _ref.dimensions,
     originalDimensions = _ref.originalDimensions,
     contextId = _ref.contextId,
@@ -73,19 +73,24 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   //------------ State, Refs & Initial Values ----------------------//
   //----------------------------------------------------------------//
 
+  var mediaClient = (0, _mediaClientReact.useMediaClient)();
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     cardElement = _useState2[0],
     setCardElement = _useState2[1];
-  var requestedDimensions = (0, _react.useMemo)(function () {
+  var cardDimensions = dimensions || (0, _cardDimensions.getDefaultCardDimensions)(appearance);
+
+  // Calculate the preview dimensions if card dimensions are "percentage" based
+  var previewDimensions = (0, _react.useMemo)(function () {
     return (
-      // requested dimensions is eventually an expensive operation if the dimensions are a percentage
-      (0, _getDataURIDimension.getRequestedDimensions)({
-        dimensions: dimensions,
+      // resolving dimensions is eventually an expensive operation if the dimensions are a percentage
+      // thus needs to be memoized
+      (0, _getDataURIDimension.resolveCardPreviewDimensions)({
+        dimensions: cardDimensions,
         element: cardElement
       })
     );
-  }, [dimensions, cardElement]);
+  }, [cardDimensions, cardElement]);
   var _useState3 = (0, _react.useState)(!isLazy),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     isCardVisible = _useState4[0],
@@ -164,18 +169,16 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       mimeType: mimeType,
       name: name,
       size: size
-    }, originalDimensions || requestedDimensions), {}, {
+    }, originalDimensions || previewDimensions), {}, {
       alt: alt
     }) : undefined;
-  }, [alt, requestedDimensions, contextId, fileStateValue, identifier, originalDimensions]);
+  }, [alt, previewDimensions, contextId, fileStateValue, identifier, originalDimensions]);
   var _useFilePreview = (0, _useFilePreview2.useFilePreview)({
       mediaBlobUrlAttrs: mediaBlobUrlAttrs,
       resizeMode: resizeMode,
       identifier: identifier,
       ssr: ssr,
-      mediaClient: mediaClient,
-      dimensions: dimensions,
-      requestedDimensions: requestedDimensions,
+      dimensions: previewDimensions,
       traceContext: traceContext,
       previewDidRender: previewDidRender,
       skipRemote: !isCardVisible
@@ -186,7 +189,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     ssrReliabilityRef = _useFilePreview.ssrReliabilityRef,
     onImageErrorBase = _useFilePreview.onImageError,
     onImageLoadBase = _useFilePreview.onImageLoad,
-    StoreSSRDataScript = _useFilePreview.StoreSSRDataScript;
+    getScriptProps = _useFilePreview.getScriptProps;
   var _useState15 = (0, _react.useState)(),
     _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
     error = _useState16[0],
@@ -523,9 +526,8 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       metadata: metadata,
       cardPreview: cardPreview,
       alt: alt,
-      appearance: appearance,
       resizeMode: resizeMode,
-      dimensions: dimensions,
+      dimensions: cardDimensions,
       actions: computedActions,
       selectable: selectable,
       selected: selected,
@@ -549,7 +551,6 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       } : undefined,
       innerRef: setCardElement,
       testId: testId,
-      featureFlags: featureFlags,
       titleBoxBgColor: titleBoxBgColor,
       titleBoxIcon: titleBoxIcon,
       onImageError: withCallbacks ? onImageError : undefined,
@@ -576,7 +577,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPlayingFile ? /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: inlinePlayerFallback
   }, /*#__PURE__*/_react.default.createElement(_inlinePlayerLazyV.InlinePlayerLazyV2, {
-    dimensions: dimensions,
+    dimensions: cardDimensions,
     originalDimensions: originalDimensions,
     identifier: identifier,
     autoplay: !!shouldAutoplay,
@@ -601,5 +602,5 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     },
     contextId: contextId,
     featureFlags: featureFlags
-  }), document.body) : null, ssr === 'server' && /*#__PURE__*/_react.default.createElement(StoreSSRDataScript, null));
+  }), document.body) : null, ssr === 'server' && /*#__PURE__*/_react.default.createElement("script", getScriptProps()));
 };

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,22 +9,21 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaCommon = require("@atlaskit/media-common");
 var _mediaUi = require("@atlaskit/media-ui");
+var _react = require("react");
 var _errors = require("../../errors");
 var _analytics = require("../../utils/analytics");
 var _dimensionComparer = require("../../utils/dimensionComparer");
+var _isRetina = require("../../utils/isRetina");
 var _globalScope = require("../../utils/globalScope");
 var _useCurrentValueRef = require("../../utils/useCurrentValueRef");
 var _usePrevious = require("../../utils/usePrevious");
 var _videoSnapshot = require("../../utils/videoSnapshot");
 var _getCardPreview = require("../getCardPreview");
 var _cache = _interopRequireDefault(require("../getCardPreview/cache"));
-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; }
 var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
@@ -33,13 +31,12 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     resizeMode = _ref$resizeMode === void 0 ? 'crop' : _ref$resizeMode,
     identifier = _ref.identifier,
     ssr = _ref.ssr,
-    mediaClient = _ref.mediaClient,
     dimensions = _ref.dimensions,
-    requestedDimensions = _ref.requestedDimensions,
     traceContext = _ref.traceContext,
     previewDidRender = _ref.previewDidRender,
     skipRemote = _ref.skipRemote,
     mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
+  var mediaClient = (0, _mediaClientReact.useMediaClient)();
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     error = _useState2[0],
@@ -48,6 +45,10 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     nonCriticalError = _useState4[0],
     setNonCriticalError = _useState4[1];
+  var requestDimensions = (0, _react.useMemo)(function () {
+    return dimensions ? createRequestDimensions(dimensions) : undefined;
+  }, [dimensions]);
+
   //----------------------------------------------------------------//
   //---------------- State Initializer Functions -------------------//
   //----------------------------------------------------------------//
@@ -65,10 +66,10 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     return _objectSpread(_objectSpread({
       collection: identifier.collectionName,
       mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode
-    }, requestedDimensions), {}, {
+    }, requestDimensions), {}, {
       allowAnimated: true
     });
-  }, [requestedDimensions, identifier.collectionName, resizeMode]);
+  }, [requestDimensions, identifier.collectionName, resizeMode]);
   var getSSRPreview = function getSSRPreview(ssr, identifier, mediaClient) {
     var _ssrDataRef$current, _ssrDataRef$current2;
     ssrDataRef.current = (0, _globalScope.getSSRData)(identifier);
@@ -86,8 +87,12 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
         }, (0, _analytics.extractErrorInfo)(e));
       }
     } else {
+      var _ssrDataRef$current3 = ssrDataRef.current,
+        _dimensions = _ssrDataRef$current3.dimensions,
+        dataURI = _ssrDataRef$current3.dataURI;
       return {
-        dataURI: ssrDataRef.current.dataURI,
+        dataURI: dataURI,
+        dimensions: _dimensions,
         source: 'ssr-data'
       };
     }
@@ -135,7 +140,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
   //----------------------------------------------------------------//
 
   var fetchRemotePreviewRef = (0, _useCurrentValueRef.useCurrentValueRef)(function (identifier) {
-    return (0, _getCardPreview.fetchAndCacheRemotePreview)(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs);
+    return (0, _getCardPreview.fetchAndCacheRemotePreview)(mediaClient, identifier.id, requestDimensions || {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
   });
   var resolvePreviewRef = (0, _useCurrentValueRef.useCurrentValueRef)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(identifier, fileState) {
@@ -148,7 +153,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
             _context.prev = 2;
             mode = imageURLParams.mode;
             cachedPreview = _cache.default.get(identifier.id, mode);
-            dimensionsAreBigger = (0, _dimensionComparer.isBigger)(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
+            dimensionsAreBigger = (0, _dimensionComparer.isBigger)(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions);
             if (!(cachedPreview && !dimensionsAreBigger)) {
               _context.next = 8;
               break;
@@ -242,7 +247,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
             throw new _errors.LocalPreviewError('local-preview-unsupported');
           case 57:
             preview = _objectSpread(_objectSpread({}, localPreview), {}, {
-              dimensions: dimensions
+              dimensions: requestDimensions
             });
             _context.t4 = preview.source;
             _context.next = _context.t4 === 'local' ? 61 : _context.t4 === 'remote' ? 63 : _context.t4 === 'ssr-server' ? 65 : _context.t4 === 'ssr-client' ? 67 : 69;
@@ -309,7 +314,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
             throw new _errors.MediaCardError('remote-preview-not-ready');
           case 83:
             _context.next = 85;
-            return (0, _getCardPreview.fetchAndCacheRemotePreview)(mediaClient, identifier.id, dimensions !== null && dimensions !== void 0 ? dimensions : {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
+            return fetchRemotePreviewRef.current(identifier);
           case 85:
             remotePreview = _context.sent;
             setCardPreview(remotePreview);
@@ -345,7 +350,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
   //------------ resolveUpfrontPreview useEffect -------------------//
   //----------------------------------------------------------------//
   var prevCardPreview = (0, _usePrevious.usePrevious)(cardPreview);
-  var dimensionsRef = (0, _useCurrentValueRef.useCurrentValueRef)(dimensions);
+  var requestDimensionsRef = (0, _useCurrentValueRef.useCurrentValueRef)(requestDimensions);
   (0, _react.useEffect)(function () {
     var resolveUpfrontPreview = /*#__PURE__*/function () {
       var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(identifier) {
@@ -357,12 +362,12 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
               // If it fails, the normal preview fetch should occur after the file state is fetched anyways
               wasResolvedUpfrontPreviewRef.current = true;
               _context2.prev = 1;
-              fetchedDimensions = _objectSpread({}, dimensions);
+              fetchedDimensions = _objectSpread({}, requestDimensions);
               _context2.next = 5;
               return fetchRemotePreviewRef.current(identifier);
             case 5:
               newCardPreview = _context2.sent;
-              areValidFetchedDimensions = !(0, _dimensionComparer.isBigger)(fetchedDimensions, dimensionsRef.current); // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
+              areValidFetchedDimensions = !(0, _dimensionComparer.isBigger)(fetchedDimensions, requestDimensionsRef.current); // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
               // the fetched preview is no longer valid, and thus, we dismiss it
               if (areValidFetchedDimensions) {
                 setCardPreview(newCardPreview);
@@ -388,16 +393,16 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     if (!wasResolvedUpfrontPreviewRef.current && (!skipRemote || hadSSRCardPreview) && !cardPreview) {
       resolveUpfrontPreview(identifier);
     }
-  }, [cardPreview, dimensions, dimensionsRef, fetchRemotePreviewRef, identifier, skipRemote, prevCardPreview, ssr]);
+  }, [cardPreview, requestDimensions, requestDimensionsRef, fetchRemotePreviewRef, identifier, skipRemote, prevCardPreview, ssr]);
 
   //----------------------------------------------------------------//
   //---------------- fetch and resolve card preview ----------------//
   //----------------------------------------------------------------//
 
-  var prevDimensions = (0, _usePrevious.usePrevious)(dimensions);
+  var prevRequestDimensions = (0, _usePrevious.usePrevious)(requestDimensions);
   (0, _react.useEffect)(function () {
-    var _ssrDataRef$current3;
-    if (cardPreview && !skipRemote && (0, _getCardPreview.isSSRDataPreview)(cardPreview) && (0, _dimensionComparer.isBigger)((_ssrDataRef$current3 = ssrDataRef.current) === null || _ssrDataRef$current3 === void 0 ? void 0 : _ssrDataRef$current3.dimensions, dimensions)) {
+    // CXP-2813 TODO: This is called too many times if the refetch failed. Should be called only once
+    if (cardPreview && !skipRemote && (0, _getCardPreview.isSSRDataPreview)(cardPreview) && (0, _dimensionComparer.isBigger)(cardPreview.dimensions, requestDimensions)) {
       // refetchSRRPreview: If dimensions from Server have changed and are bigger,
       // we need to refetch
       fetchRemotePreviewRef.current(identifier).then(setCardPreview).catch(function (e) {
@@ -412,8 +417,8 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     if (fileState && (0, _getCardPreview.shouldResolvePreview)({
       status: status,
       fileState: fileState,
-      prevDimensions: prevDimensions,
-      dimensions: dimensions,
+      prevDimensions: prevRequestDimensions,
+      dimensions: requestDimensions,
       hasCardPreview: !!cardPreview,
       isBannedLocalPreview: isBannedLocalPreview,
       wasResolvedUpfrontPreview: wasResolvedUpfrontPreviewRef.current
@@ -430,7 +435,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
         // https://product-fabric.atlassian.net/browse/MEX-1071
       });
     }
-  }, [cardPreview, dimensions, fetchRemotePreviewRef, fileState, identifier, isBannedLocalPreview, prevDimensions, resolvePreviewRef, skipRemote, ssr, status]);
+  }, [cardPreview, requestDimensions, fetchRemotePreviewRef, fileState, identifier, isBannedLocalPreview, prevRequestDimensions, resolvePreviewRef, skipRemote, ssr, status]);
 
   //----------------------------------------------------------------//
   //----------------- set complete status --------------------------//
@@ -568,14 +573,10 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
   // RETURN
   //----------------------------------------------------------------//
 
-  var StoreSSRDataScriptComponent = function StoreSSRDataScriptComponent() {
+  // FOR SSR
+  var getScriptProps = function getScriptProps() {
     var _ssrReliabilityRef$cu;
-    return /*#__PURE__*/_react.default.createElement(_globalScope.StoreSSRDataScript, {
-      identifier: identifier,
-      dataURI: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI,
-      dimensions: requestedDimensions,
-      error: ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined
-    });
+    return (0, _globalScope.generateScriptProps)(identifier, cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI, requestDimensions, ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined);
   };
 
   // CXP-2723 TODO: should consider simplifying our analytics, and how
@@ -587,6 +588,22 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     ssrReliabilityRef: ssrReliabilityRef,
     onImageError: onImageError,
     onImageLoad: onImageLoad,
-    StoreSSRDataScript: StoreSSRDataScriptComponent
+    getScriptProps: getScriptProps
   };
+};
+var createRequestDimensions = function createRequestDimensions(dimensions) {
+  if (!dimensions) {
+    return;
+  }
+  var retinaFactor = (0, _isRetina.isRetina)() ? 2 : 1;
+  var width = dimensions.width,
+    height = dimensions.height;
+  var result = {};
+  if (width) {
+    result.width = width * retinaFactor;
+  }
+  if (height) {
+    result.height = height * retinaFactor;
+  }
+  return result;
 };

package/dist/cjs/inline/loader.js

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

package/dist/cjs/utils/getDataURIDimension.js

@@ -3,12 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getRequestedDimensions = exports.getDataURIDimension = void 0;
+exports.resolveCardPreviewDimensions = exports.resolveCardPreviewDimension = exports.getRequestedDimensions = exports.getDataURIDimension = void 0;
 var _isRetina = require("./isRetina");
 var _getElementDimension = require("./getElementDimension");
 var _cardDimensions = require("./cardDimensions");
 var _isValidPercentageUnit = require("./isValidPercentageUnit");
 var _containsPixelUnit = require("./containsPixelUnit");
+/**
+ * ************************************************
+ * For Card v1
+ * ************************************************
+ */
+
 var getDataURIDimension = exports.getDataURIDimension = function getDataURIDimension(dimension, options) {
   var retinaFactor = (0, _isRetina.isRetina)() ? 2 : 1;
   var dimensionValue = options.dimensions && options.dimensions[dimension] || '';
@@ -30,4 +36,35 @@ var getRequestedDimensions = exports.getRequestedDimensions = function getReques
     width: width,
     height: height
   };
+};
+
+/**
+ * ************************************************
+ * For Card v2
+ * ************************************************
+ */
+
+// Same as getDataURIDimension but without Retina factor
+var resolveCardPreviewDimension = exports.resolveCardPreviewDimension = function resolveCardPreviewDimension(dimensionName, _ref) {
+  var dimensions = _ref.dimensions,
+    element = _ref.element;
+  var dimensionValue = (dimensions === null || dimensions === void 0 ? void 0 : dimensions[dimensionName]) || '';
+  if ((0, _isValidPercentageUnit.isValidPercentageUnit)(dimensionValue) && element) {
+    return (0, _getElementDimension.getElementDimension)(element, dimensionName);
+  }
+  if (typeof dimensionValue === 'number') {
+    return dimensionValue;
+  }
+  if ((0, _containsPixelUnit.containsPixelUnit)("".concat(dimensionValue))) {
+    return parseInt("".concat(dimensionValue), 10);
+  }
+  return _cardDimensions.defaultImageCardDimensions[dimensionName];
+};
+var resolveCardPreviewDimensions = exports.resolveCardPreviewDimensions = function resolveCardPreviewDimensions(options) {
+  var width = resolveCardPreviewDimension('width', options);
+  var height = resolveCardPreviewDimension('height', options);
+  return {
+    width: width,
+    height: height
+  };
 };

package/dist/cjs/utils/globalScope/globalScope.js

@@ -1,14 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getKey = exports.StoreSSRDataScript = exports.GLOBAL_MEDIA_NAMESPACE = exports.GLOBAL_MEDIA_CARD_SSR = void 0;
+exports.getKey = exports.generateScriptProps = exports.GLOBAL_MEDIA_NAMESPACE = exports.GLOBAL_MEDIA_CARD_SSR = void 0;
 exports.getMediaCardSSR = getMediaCardSSR;
 exports.getMediaGlobalScope = getMediaGlobalScope;
 exports.storeDataURI = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _printScript = require("../printScript");
 // ----- WARNING -----
 // This is a very sensitive fraction of code.
@@ -59,14 +57,10 @@ var generateScript = function generateScript(identifier, dataURI, dimensions, er
   var functionCall = (0, _printScript.printFunctionCall)(storeDataURI, getKey(identifier), dataURI, dimensions, error);
   return (0, _printScript.printScript)([getMediaCardSSR.toString(), getMediaGlobalScope.toString(), functionCall]);
 };
-var StoreSSRDataScript = exports.StoreSSRDataScript = function StoreSSRDataScript(_ref2) {
-  var dataURI = _ref2.dataURI,
-    identifier = _ref2.identifier,
-    dimensions = _ref2.dimensions,
-    error = _ref2.error;
-  return /*#__PURE__*/_react.default.createElement("script", {
+var generateScriptProps = exports.generateScriptProps = function generateScriptProps(identifier, dataURI, dimensions, error) {
+  return {
     dangerouslySetInnerHTML: {
       __html: generateScript(identifier, dataURI, dimensions, error)
     }
-  });
+  };
 };

package/dist/cjs/utils/globalScope/index.js

@@ -15,10 +15,10 @@ Object.defineProperty(exports, "GLOBAL_MEDIA_NAMESPACE", {
     return _globalScope.GLOBAL_MEDIA_NAMESPACE;
   }
 });
-Object.defineProperty(exports, "StoreSSRDataScript", {
+Object.defineProperty(exports, "generateScriptProps", {
   enumerable: true,
   get: function get() {
-    return _globalScope.StoreSSRDataScript;
+    return _globalScope.generateScriptProps;
   }
 });
 Object.defineProperty(exports, "getKey", {

package/dist/cjs/utils/ufoExperiences.js

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