@atlaskit/media-card 77.0.1 → 77.0.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-card
 
+## 77.0.3
+
+### Patch Changes
+
+- [`25252788c18`](https://bitbucket.org/atlassian/atlassian-frontend/commits/25252788c18) - Give the progress bar in media card a "progressbar" role.
+
+## 77.0.2
+
+### Patch Changes
+
+- [`78b51d6134c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78b51d6134c) - Fixed issue with media card lazy loading not working during SSR hydration
+
 ## 77.0.1
 
 ### 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.0.1";
+var packageVersion = "77.0.3";
 var CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -744,6 +744,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
         if ((0, _getCardPreview.isSSRDataPreview)(cardPreview) && (0, _dimensionComparer.isBigger)((_this$ssrData3 = this.ssrData) === null || _this$ssrData3 === void 0 ? void 0 : _this$ssrData3.dimensions, dimensions)) {
           // If dimensions from Server have changed and are bigger,
           // we need to refetch
+          // This is repeated in componentDidUpdate because in the case of lazy loading true
+          // the card will be invisible by default.
           this.refetchSSRPreview(identifier);
         }
       }
@@ -756,6 +758,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
+      var _this$ssrData4;
       var prevMediaClient = prevProps.mediaClient,
         prevIdentifier = prevProps.identifier,
         prevDimensions = prevProps.dimensions;
@@ -810,6 +813,11 @@ var CardBase = /*#__PURE__*/function (_Component) {
           isCardVisible: true
         });
       }
+      if (cardPreview && turnedVisible && (0, _mediaClient2.isFileIdentifier)(identifier) && (0, _getCardPreview.isSSRDataPreview)(cardPreview) && (0, _dimensionComparer.isBigger)((_this$ssrData4 = this.ssrData) === null || _this$ssrData4 === void 0 ? void 0 : _this$ssrData4.dimensions, dimensions)) {
+        // If dimensions from Server have changed and are bigger,
+        // we need to refetch
+        this.refetchSSRPreview(identifier);
+      }
       if ((0, _mediaClient2.isFileIdentifier)(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDiffIdentifier))) {
         this.updateStateForIdentifier(identifier);
       }

package/dist/cjs/card/getCardPreview/index.js

@@ -217,7 +217,7 @@ var isLocalPreview = function isLocalPreview(preview) {
 };
 exports.isLocalPreview = isLocalPreview;
 var isSSRPreview = function isSSRPreview(preview) {
-  return isSSRClientPreview(preview) || isSSRServerPreview(preview);
+  return isSSRClientPreview(preview) || isSSRServerPreview(preview) || isSSRDataPreview(preview);
 };
 exports.isSSRPreview = isSSRPreview;
 var isSSRServerPreview = function isSSRServerPreview(preview) {

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.0.1";
+var packageVersion = "77.0.3";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

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

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

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

@@ -50,7 +50,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { 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.1";
+var packageVersion = "77.0.3";
 var CardV2Base = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardV2Base, _Component);
   var _super = _createSuper(CardV2Base);
@@ -763,6 +763,7 @@ var CardV2Base = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
+      var _this$ssrData4;
       var prevMediaClient = prevProps.mediaClient,
         prevIdentifier = prevProps.identifier,
         prevDimensions = prevProps.dimensions;
@@ -817,6 +818,11 @@ var CardV2Base = /*#__PURE__*/function (_Component) {
           isCardVisible: true
         });
       }
+      if (cardPreview && turnedVisible && (0, _mediaClient2.isFileIdentifier)(identifier) && (0, _getCardPreview.isSSRDataPreview)(cardPreview) && (0, _dimensionComparer.isBigger)((_this$ssrData4 = this.ssrData) === null || _this$ssrData4 === void 0 ? void 0 : _this$ssrData4.dimensions, dimensions)) {
+        // If dimensions from Server have changed and are bigger,
+        // we need to refetch
+        this.refetchSSRPreview(identifier);
+      }
       if ((0, _mediaClient2.isFileIdentifier)(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDiffIdentifier))) {
         this.updateStateForIdentifier(identifier);
       }

package/dist/cjs/inline/loader.js

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

package/dist/cjs/utils/mockIntersectionObserver.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MockIntersectionObserver = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var noop = function noop() {};
+var MockIntersectionObserver = /*#__PURE__*/function () {
+  function MockIntersectionObserver() {
+    (0, _classCallCheck2.default)(this, MockIntersectionObserver);
+    (0, _defineProperty2.default)(this, "callback", noop);
+  }
+  (0, _createClass2.default)(MockIntersectionObserver, [{
+    key: "storeMockObserver",
+    value: function storeMockObserver(_ref) {
+      var observe = _ref.observe,
+        disconnect = _ref.disconnect;
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      var outerThis = this;
+      this.mockObserver = /*#__PURE__*/function () {
+        function _class2(callback) {
+          (0, _classCallCheck2.default)(this, _class2);
+          (0, _defineProperty2.default)(this, "observe", observe !== null && observe !== void 0 ? observe : noop);
+          (0, _defineProperty2.default)(this, "unobserve", noop);
+          (0, _defineProperty2.default)(this, "disconnect", disconnect !== null && disconnect !== void 0 ? disconnect : noop);
+          outerThis.callback = callback;
+          outerThis.mockObserverInstance = this;
+        }
+        return (0, _createClass2.default)(_class2);
+      }();
+    }
+  }, {
+    key: "addMockObserverToWindow",
+    value: function addMockObserverToWindow() {
+      this.originalObserver = window.IntersectionObserver;
+      window.IntersectionObserver = this.mockObserver;
+    }
+  }, {
+    key: "removeMockObserverFromWindow",
+    value: function removeMockObserverFromWindow() {
+      window.IntersectionObserver = this.originalObserver;
+    }
+  }, {
+    key: "setup",
+    value: function setup() {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      this.storeMockObserver(options);
+      this.addMockObserverToWindow();
+    }
+  }, {
+    key: "cleanup",
+    value: function cleanup() {
+      this.removeMockObserverFromWindow();
+    }
+  }, {
+    key: "triggerIntersect",
+    value: function triggerIntersect(entry) {
+      var entries = [entry];
+      this.callback(entries, this.mockObserverInstance);
+    }
+  }]);
+  return MockIntersectionObserver;
+}();
+exports.MockIntersectionObserver = MockIntersectionObserver;

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.0.1";
+var packageVersion = "77.0.3";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -27,7 +27,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.0.1";
+const packageVersion = "77.0.3";
 export class CardBase extends Component {
   constructor(props) {
     super(props);
@@ -717,6 +717,8 @@ export class CardBase extends Component {
       if (isSSRDataPreview(cardPreview) && isBigger((_this$ssrData3 = this.ssrData) === null || _this$ssrData3 === void 0 ? void 0 : _this$ssrData3.dimensions, dimensions)) {
         // If dimensions from Server have changed and are bigger,
         // we need to refetch
+        // This is repeated in componentDidUpdate because in the case of lazy loading true
+        // the card will be invisible by default.
         this.refetchSSRPreview(identifier);
       }
     }
@@ -727,6 +729,7 @@ export class CardBase extends Component {
     (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', this.fireCopiedEvent);
   }
   componentDidUpdate(prevProps, prevState) {
+    var _this$ssrData4;
     const {
       mediaClient: prevMediaClient,
       identifier: prevIdentifier,
@@ -789,6 +792,11 @@ export class CardBase extends Component {
         isCardVisible: true
       });
     }
+    if (cardPreview && turnedVisible && isFileIdentifier(identifier) && isSSRDataPreview(cardPreview) && isBigger((_this$ssrData4 = this.ssrData) === null || _this$ssrData4 === void 0 ? void 0 : _this$ssrData4.dimensions, dimensions)) {
+      // If dimensions from Server have changed and are bigger,
+      // we need to refetch
+      this.refetchSSRPreview(identifier);
+    }
     if (isFileIdentifier(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDiffIdentifier))) {
       this.updateStateForIdentifier(identifier);
     }

package/dist/es2019/card/getCardPreview/index.js

@@ -156,7 +156,7 @@ export const isLocalPreview = preview => {
   const localSources = ['local', 'cache-local'];
   return localSources.includes(preview.source);
 };
-export const isSSRPreview = preview => isSSRClientPreview(preview) || isSSRServerPreview(preview);
+export const isSSRPreview = preview => isSSRClientPreview(preview) || isSSRServerPreview(preview) || isSSRDataPreview(preview);
 export const isSSRServerPreview = preview => {
   const ssrClientSources = ['ssr-server', 'cache-ssr-server'];
   return ssrClientSources.includes(preview.source);

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

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.0.1";
+const packageVersion = "77.0.3";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

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

@@ -10,7 +10,8 @@ export const StyledBar = props => {
   } = props;
   return jsx("div", {
     id: "styledBar",
-    "data-testid": "media-progress-bar",
+    role: "progressbar",
+    "aria-valuenow": progress,
     css: styledBarStyles({
       progress,
       breakpoint,

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

@@ -28,7 +28,7 @@ import { completeUfoExperience, startUfoExperience } from '../../utils/ufoExperi
 import { generateUniqueId } from '../../utils/generateUniqueId';
 import { useFileState } from '@atlaskit/media-client-react';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.0.1";
+const packageVersion = "77.0.3";
 export class CardV2Base extends Component {
   constructor(props) {
     super(props);
@@ -738,6 +738,7 @@ export class CardV2Base extends Component {
     (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', this.fireCopiedEvent);
   }
   componentDidUpdate(prevProps, prevState) {
+    var _this$ssrData4;
     const {
       mediaClient: prevMediaClient,
       identifier: prevIdentifier,
@@ -800,6 +801,11 @@ export class CardV2Base extends Component {
         isCardVisible: true
       });
     }
+    if (cardPreview && turnedVisible && isFileIdentifier(identifier) && isSSRDataPreview(cardPreview) && isBigger((_this$ssrData4 = this.ssrData) === null || _this$ssrData4 === void 0 ? void 0 : _this$ssrData4.dimensions, dimensions)) {
+      // If dimensions from Server have changed and are bigger,
+      // we need to refetch
+      this.refetchSSRPreview(identifier);
+    }
     if (isFileIdentifier(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDiffIdentifier))) {
       this.updateStateForIdentifier(identifier);
     }

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "77.0.1",
+      packageName: "77.0.3",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/mockIntersectionObserver.js

@@ -0,0 +1,41 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const noop = () => {};
+export class MockIntersectionObserver {
+  constructor() {
+    _defineProperty(this, "callback", noop);
+  }
+  storeMockObserver({
+    observe,
+    disconnect
+  }) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const outerThis = this;
+    this.mockObserver = class {
+      constructor(callback) {
+        _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;
+      }
+    };
+  }
+  addMockObserverToWindow() {
+    this.originalObserver = window.IntersectionObserver;
+    window.IntersectionObserver = this.mockObserver;
+  }
+  removeMockObserverFromWindow() {
+    window.IntersectionObserver = this.originalObserver;
+  }
+  setup(options = {}) {
+    this.storeMockObserver(options);
+    this.addMockObserverToWindow();
+  }
+  cleanup() {
+    this.removeMockObserverFromWindow();
+  }
+  triggerIntersect(entry) {
+    const entries = [entry];
+    this.callback(entries, this.mockObserverInstance);
+  }
+}

package/dist/es2019/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.0.1";
+const packageVersion = "77.0.3";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -40,7 +40,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.0.1";
+var packageVersion = "77.0.3";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -735,6 +735,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         if (isSSRDataPreview(cardPreview) && isBigger((_this$ssrData3 = this.ssrData) === null || _this$ssrData3 === void 0 ? void 0 : _this$ssrData3.dimensions, dimensions)) {
           // If dimensions from Server have changed and are bigger,
           // we need to refetch
+          // This is repeated in componentDidUpdate because in the case of lazy loading true
+          // the card will be invisible by default.
           this.refetchSSRPreview(identifier);
         }
       }
@@ -747,6 +749,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
+      var _this$ssrData4;
       var prevMediaClient = prevProps.mediaClient,
         prevIdentifier = prevProps.identifier,
         prevDimensions = prevProps.dimensions;
@@ -801,6 +804,11 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           isCardVisible: true
         });
       }
+      if (cardPreview && turnedVisible && isFileIdentifier(identifier) && isSSRDataPreview(cardPreview) && isBigger((_this$ssrData4 = this.ssrData) === null || _this$ssrData4 === void 0 ? void 0 : _this$ssrData4.dimensions, dimensions)) {
+        // If dimensions from Server have changed and are bigger,
+        // we need to refetch
+        this.refetchSSRPreview(identifier);
+      }
       if (isFileIdentifier(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDiffIdentifier))) {
         this.updateStateForIdentifier(identifier);
       }

package/dist/esm/card/getCardPreview/index.js

@@ -178,7 +178,7 @@ export var isLocalPreview = function isLocalPreview(preview) {
   return localSources.includes(preview.source);
 };
 export var isSSRPreview = function isSSRPreview(preview) {
-  return isSSRClientPreview(preview) || isSSRServerPreview(preview);
+  return isSSRClientPreview(preview) || isSSRServerPreview(preview) || isSSRDataPreview(preview);
 };
 export var isSSRServerPreview = function isSSRServerPreview(preview) {
   var ssrClientSources = ['ssr-server', 'cache-ssr-server'];

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

@@ -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.1";
+var packageVersion = "77.0.3";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

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/v2/cardV2.js

@@ -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.1";
+var packageVersion = "77.0.3";
 export var CardV2Base = /*#__PURE__*/function (_Component) {
   _inherits(CardV2Base, _Component);
   var _super = _createSuper(CardV2Base);
@@ -754,6 +754,7 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
+      var _this$ssrData4;
       var prevMediaClient = prevProps.mediaClient,
         prevIdentifier = prevProps.identifier,
         prevDimensions = prevProps.dimensions;
@@ -808,6 +809,11 @@ export var CardV2Base = /*#__PURE__*/function (_Component) {
           isCardVisible: true
         });
       }
+      if (cardPreview && turnedVisible && isFileIdentifier(identifier) && isSSRDataPreview(cardPreview) && isBigger((_this$ssrData4 = this.ssrData) === null || _this$ssrData4 === void 0 ? void 0 : _this$ssrData4.dimensions, dimensions)) {
+        // If dimensions from Server have changed and are bigger,
+        // we need to refetch
+        this.refetchSSRPreview(identifier);
+      }
       if (isFileIdentifier(identifier) && (turnedVisible || !!this.subscription && (isNewMediaClient || isDiffIdentifier))) {
         this.updateStateForIdentifier(identifier);
       }

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.1",
+        packageName: "77.0.3",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/utils/mockIntersectionObserver.js

@@ -0,0 +1,60 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var noop = function noop() {};
+export var MockIntersectionObserver = /*#__PURE__*/function () {
+  function MockIntersectionObserver() {
+    _classCallCheck(this, MockIntersectionObserver);
+    _defineProperty(this, "callback", noop);
+  }
+  _createClass(MockIntersectionObserver, [{
+    key: "storeMockObserver",
+    value: function storeMockObserver(_ref) {
+      var observe = _ref.observe,
+        disconnect = _ref.disconnect;
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      var outerThis = this;
+      this.mockObserver = /*#__PURE__*/function () {
+        function _class2(callback) {
+          _classCallCheck(this, _class2);
+          _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);
+      }();
+    }
+  }, {
+    key: "addMockObserverToWindow",
+    value: function addMockObserverToWindow() {
+      this.originalObserver = window.IntersectionObserver;
+      window.IntersectionObserver = this.mockObserver;
+    }
+  }, {
+    key: "removeMockObserverFromWindow",
+    value: function removeMockObserverFromWindow() {
+      window.IntersectionObserver = this.originalObserver;
+    }
+  }, {
+    key: "setup",
+    value: function setup() {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      this.storeMockObserver(options);
+      this.addMockObserverToWindow();
+    }
+  }, {
+    key: "cleanup",
+    value: function cleanup() {
+      this.removeMockObserverFromWindow();
+    }
+  }, {
+    key: "triggerIntersect",
+    value: function triggerIntersect(entry) {
+      var entries = [entry];
+      this.callback(entries, this.mockObserverInstance);
+    }
+  }]);
+  return MockIntersectionObserver;
+}();

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.1";
+var packageVersion = "77.0.3";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/types/utils/mockIntersectionObserver.d.ts

@@ -0,0 +1,20 @@
+type NestedPartial<T> = {
+    [K in keyof T]?: Partial<T[K]>;
+};
+type SetupOptions = {
+    observe?: () => void;
+    disconnect?: () => void;
+};
+export declare class MockIntersectionObserver {
+    private callback;
+    private originalObserver?;
+    private mockObserver?;
+    private mockObserverInstance?;
+    private storeMockObserver;
+    private addMockObserverToWindow;
+    private removeMockObserverFromWindow;
+    setup(options?: SetupOptions): void;
+    cleanup(): void;
+    triggerIntersect(entry: NestedPartial<IntersectionObserverEntry>): void;
+}
+export {};

package/dist/types-ts4.5/utils/mockIntersectionObserver.d.ts

@@ -0,0 +1,20 @@
+type NestedPartial<T> = {
+    [K in keyof T]?: Partial<T[K]>;
+};
+type SetupOptions = {
+    observe?: () => void;
+    disconnect?: () => void;
+};
+export declare class MockIntersectionObserver {
+    private callback;
+    private originalObserver?;
+    private mockObserver?;
+    private mockObserverInstance?;
+    private storeMockObserver;
+    private addMockObserverToWindow;
+    private removeMockObserverFromWindow;
+    setup(options?: SetupOptions): void;
+    cleanup(): void;
+    triggerIntersect(entry: NestedPartial<IntersectionObserverEntry>): void;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "77.0.1",
+  "version": "77.0.3",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,18 +37,18 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/dropdown-menu": "^11.13.0",
-    "@atlaskit/editor-shared-styles": "^2.6.0",
+    "@atlaskit/dropdown-menu": "^11.14.0",
+    "@atlaskit/editor-shared-styles": "^2.7.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/media-client": "^24.0.0",
     "@atlaskit/media-client-react": "^1.0.0",
     "@atlaskit/media-common": "^9.0.0",
     "@atlaskit/media-ui": "^25.0.0",
-    "@atlaskit/media-viewer": "^48.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.22.0",
+    "@atlaskit/tokens": "^1.25.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",