@atlaskit/media-card 72.0.0 → 72.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/media-card
 
+## 72.1.0
+
+### Minor Changes
+
+- [`1724e1b8277`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1724e1b8277) - Added SSR capabilities to Media Card
+- [`ca519a86b1d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ca519a86b1d) - Add new prop forceSyncDisplay in MediaImage to provide an option of always showing images.
+  Enable MediaCard to turn on forceSyncDisplay when server side rendering is enabled.
+- [`ac4846d0f3f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac4846d0f3f) - Added native lazy load support
+
+### Patch Changes
+
+- [`fc70978492a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fc70978492a) - Using type for SSR prop to reduce dependency on media-common
+- [`dc1f9d42903`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dc1f9d42903) - Fixed error message logic
+- [`27c61b8cdd8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27c61b8cdd8) - revert CardSSRView component
+- [`12bfc09a21e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/12bfc09a21e) - Fixing internal prop calls for testId and removing references to the old DropdownMenuStateless export when using the new default export.
+- [`2b24fcc59f2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b24fcc59f2) - Removed Code Viewer and Zip Previews Feature Flags
+- [`bccde8a4127`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bccde8a4127) - Update dependency of dropdown menu to the lite mode version. Update all usages to cater to the new API. The padding within dropdown menu items is 8px more, which makes the menu look bigger.
+- [`3a56ce8792b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3a56ce8792b) - [ux] Show selected for mediaInline in other states
+- [`f461edcfd05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f461edcfd05) - Update CardLoader to use react-loadable
+  Add SSR feature prop to be passed in renderer and media card
+- Updated dependencies
+
 ## 72.0.0
 
 ### Major Changes

package/dist/cjs/errors.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isMediaCardError = isMediaCardError;
 exports.isImageLoadError = isImageLoadError;
-exports.isUploadError = exports.ensureMediaCardError = exports.isUnsupportedLocalPreviewError = exports.isRemotePreviewError = exports.isLocalPreviewError = exports.ImageLoadError = exports.getImageLoadPrimaryReason = exports.RemotePreviewError = exports.LocalPreviewError = exports.MediaCardError = void 0;
+exports.isUploadError = exports.ensureMediaCardError = exports.isUnsupportedLocalPreviewError = exports.isRemotePreviewError = exports.isLocalPreviewError = exports.ImageLoadError = exports.getImageLoadPrimaryReason = exports.SsrPreviewError = exports.RemotePreviewError = exports.LocalPreviewError = exports.MediaCardError = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -92,6 +92,26 @@ var RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
 
 exports.RemotePreviewError = RemotePreviewError;
 
+var SsrPreviewError = /*#__PURE__*/function (_MediaCardError3) {
+  (0, _inherits2.default)(SsrPreviewError, _MediaCardError3);
+
+  var _super4 = _createSuper(SsrPreviewError);
+
+  function SsrPreviewError(primaryReason, secondaryError) {
+    var _this4;
+
+    (0, _classCallCheck2.default)(this, SsrPreviewError);
+    _this4 = _super4.call(this, primaryReason, secondaryError);
+    _this4.primaryReason = primaryReason;
+    _this4.secondaryError = secondaryError;
+    return _this4;
+  }
+
+  return SsrPreviewError;
+}(MediaCardError);
+
+exports.SsrPreviewError = SsrPreviewError;
+
 var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source) {
   switch (source) {
     case 'cache-remote':
@@ -117,14 +137,14 @@ var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source) {
 
 exports.getImageLoadPrimaryReason = getImageLoadPrimaryReason;
 
-var ImageLoadError = /*#__PURE__*/function (_MediaCardError3) {
-  (0, _inherits2.default)(ImageLoadError, _MediaCardError3);
+var ImageLoadError = /*#__PURE__*/function (_MediaCardError4) {
+  (0, _inherits2.default)(ImageLoadError, _MediaCardError4);
 
-  var _super4 = _createSuper(ImageLoadError);
+  var _super5 = _createSuper(ImageLoadError);
 
   function ImageLoadError(source) {
     (0, _classCallCheck2.default)(this, ImageLoadError);
-    return _super4.call(this, getImageLoadPrimaryReason(source));
+    return _super5.call(this, getImageLoadPrimaryReason(source));
   }
 
   return ImageLoadError;
@@ -167,7 +187,7 @@ var ensureMediaCardError = function ensureMediaCardError(primaryReason, error) {
 exports.ensureMediaCardError = ensureMediaCardError;
 
 var isUploadError = function isUploadError(error) {
-  return error.primaryReason === 'upload';
+  return error && error.primaryReason === 'upload';
 };
 
 exports.isUploadError = isUploadError;

package/dist/cjs/root/card/cardLoader.js

@@ -2,149 +2,91 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _mediaCommon = require("@atlaskit/media-common");
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
+var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 
 var _ = require("../..");
 
 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 _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 _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(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 _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 MediaCardContext = /*#__PURE__*/_react.default.createContext({});
 
-var CardLoader = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(CardLoader, _React$PureComponent);
+var CardLoadingWithContext = function CardLoadingWithContext() {
+  var props = (0, _react.useContext)(MediaCardContext);
+  return /*#__PURE__*/_react.default.createElement(_.CardLoading, props);
+};
 
-  var _super = _createSuper(CardLoader);
+var MediaCard = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./index'));
+    }).then(function (mod) {
+      return mod.Card;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
+  }
+});
+var MediaCardErrorBoundary = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('../media-card-analytics-error-boundary'));
+    }).then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
+  }
+});
+var MediaCardWithMediaClient = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('@atlaskit/media-client'));
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
+  },
+  render: function render(loaded, props) {
+    return /*#__PURE__*/_react.default.createElement(CardWithMediaClient, (0, _extends2.default)({}, props, {
+      withMediaClient: loaded.withMediaClient
+    }));
+  }
+});
 
-  function CardLoader() {
-    var _this;
+var CardWithMediaClient = function CardWithMediaClient(props) {
+  var withMediaClient = props.withMediaClient,
+      featureFlags = props.featureFlags;
+  var memoizedFeatureFlags = (0, _mediaCommon.useMemoizeFeatureFlags)(featureFlags);
 
-    (0, _classCallCheck2.default)(this, CardLoader);
+  var Card = _react.default.useMemo(function () {
+    return withMediaClient(MediaCard, memoizedFeatureFlags);
+  }, [withMediaClient, memoizedFeatureFlags]);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  return /*#__PURE__*/_react.default.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/_react.default.createElement(Card, props));
+};
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      Card: CardLoader.Card,
-      MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-    });
-    return _this;
-  }
+var CardLoader = function CardLoader(props) {
+  return /*#__PURE__*/_react.default.createElement(MediaCardContext.Provider, {
+    value: props
+  }, /*#__PURE__*/_react.default.createElement(MediaCardWithMediaClient, props));
+};
 
-  (0, _createClass2.default)(CardLoader, [{
-    key: "componentDidMount",
-    value: function () {
-      var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var _yield$Promise$all, _yield$Promise$all2, mediaClient, cardModule, mediaCardErrorBoundaryModule;
-
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                if (this.state.Card) {
-                  _context.next = 16;
-                  break;
-                }
-
-                _context.prev = 1;
-                _context.next = 4;
-                return Promise.all([Promise.resolve().then(function () {
-                  return _interopRequireWildcard(require('@atlaskit/media-client'));
-                }), Promise.resolve().then(function () {
-                  return _interopRequireWildcard(require('./index'));
-                }), Promise.resolve().then(function () {
-                  return _interopRequireWildcard(require('../media-card-analytics-error-boundary'));
-                })]);
-
-              case 4:
-                _yield$Promise$all = _context.sent;
-                _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 3);
-                mediaClient = _yield$Promise$all2[0];
-                cardModule = _yield$Promise$all2[1];
-                mediaCardErrorBoundaryModule = _yield$Promise$all2[2];
-                CardLoader.Card = mediaClient.withMediaClient(cardModule.Card, this.props.featureFlags);
-                CardLoader.MediaCardErrorBoundary = mediaCardErrorBoundaryModule.default;
-                this.setState({
-                  Card: CardLoader.Card,
-                  MediaCardErrorBoundary: CardLoader.MediaCardErrorBoundary
-                });
-                _context.next = 16;
-                break;
-
-              case 14:
-                _context.prev = 14;
-                _context.t0 = _context["catch"](1);
-
-              case 16:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this, [[1, 14]]);
-      }));
-
-      function componentDidMount() {
-        return _componentDidMount.apply(this, arguments);
-      }
-
-      return componentDidMount;
-    }()
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          dimensions = _this$props.dimensions,
-          testId = _this$props.testId,
-          featureFlags = _this$props.featureFlags;
-      var _this$state = this.state,
-          Card = _this$state.Card,
-          MediaCardErrorBoundary = _this$state.MediaCardErrorBoundary;
-
-      if (!Card || !MediaCardErrorBoundary) {
-        return /*#__PURE__*/_react.default.createElement(_.CardLoading, {
-          testId: testId,
-          dimensions: dimensions,
-          featureFlags: featureFlags
-        });
-      }
-
-      return /*#__PURE__*/_react.default.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/_react.default.createElement(Card, this.props));
-    }
-  }]);
-  return CardLoader;
-}(_react.default.PureComponent);
-
-exports.default = CardLoader;
-(0, _defineProperty2.default)(CardLoader, "displayName", 'AsyncCard');
+var _default = CardLoader;
+exports.default = _default;

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

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "extractFilePreviewStatus", {
     return _filePreviewStatus.extractFilePreviewStatus;
   }
 });
-exports.shouldResolvePreview = exports.getCardPreview = exports.getFilePreviewFromFileState = exports.removeCardPreviewFromCache = exports.getCardPreviewFromCache = void 0;
+exports.fetchAndCacheRemotePreview = exports.isSSRClientPreview = exports.isSSRServerPreview = exports.isSSRPreview = exports.isLocalPreview = exports.getSSRCardPreview = exports.shouldResolvePreview = exports.getCardPreview = exports.getFilePreviewFromFileState = exports.removeCardPreviewFromCache = exports.getCardPreviewFromCache = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -83,6 +83,14 @@ var extendAndCachePreview = function extendAndCachePreview(id, dimensions, previ
       source = 'cache-remote';
       break;
 
+    case 'ssr-server':
+      source = 'cache-ssr-server';
+      break;
+
+    case 'ssr-client':
+      source = 'cache-ssr-client';
+      break;
+
     default:
       source = preview.source;
   } // We want to embed some meta context into dataURI for Copy/Paste to work.
@@ -113,7 +121,7 @@ var extendAndCachePreview = function extendAndCachePreview(id, dimensions, previ
 
 var getCardPreview = /*#__PURE__*/function () {
   var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
-    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, cachedPreview, localPreview, remotePreview;
+    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, cachedPreview, localPreview;
 
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) {
@@ -187,14 +195,9 @@ var getCardPreview = /*#__PURE__*/function () {
             throw new _errors.MediaCardError('remote-preview-not-ready');
 
           case 19:
-            _context.next = 21;
-            return (0, _helpers.getCardPreviewFromBackend)(mediaClient, id, imageUrlParams);
-
-          case 21:
-            remotePreview = _context.sent;
-            return _context.abrupt("return", extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs));
+            return _context.abrupt("return", fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs));
 
-          case 23:
+          case 20:
           case "end":
             return _context.stop();
         }
@@ -222,4 +225,81 @@ var shouldResolvePreview = function shouldResolvePreview(_ref3) {
   return statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
 };
 
-exports.shouldResolvePreview = shouldResolvePreview;
+exports.shouldResolvePreview = shouldResolvePreview;
+
+var getSSRCardPreview = function getSSRCardPreview(ssr, mediaClient, id, params, mediaBlobUrlAttrs) {
+  var dataURI;
+
+  try {
+    var rawDataURI = mediaClient.getImageUrlSync(id, params); // We want to embed some meta context into dataURI for Copy/Paste to work.
+
+    dataURI = mediaBlobUrlAttrs ? (0, _mediaClient.addFileAttrsToUrl)(rawDataURI, mediaBlobUrlAttrs) : rawDataURI;
+    var source = ssr === 'client' ? 'ssr-client' : 'ssr-server';
+    return {
+      dataURI: dataURI,
+      source: source,
+      orientation: 1
+    };
+  } catch (e) {
+    var reason = ssr === 'server' ? 'ssr-server-uri' : 'ssr-client-uri';
+    throw new _errors.SsrPreviewError(reason, e);
+  }
+};
+
+exports.getSSRCardPreview = getSSRCardPreview;
+
+var isLocalPreview = function isLocalPreview(preview) {
+  var localSources = ['local', 'cache-local'];
+  return localSources.includes(preview.source);
+};
+
+exports.isLocalPreview = isLocalPreview;
+
+var isSSRPreview = function isSSRPreview(preview) {
+  return isSSRClientPreview(preview) || isSSRServerPreview(preview);
+};
+
+exports.isSSRPreview = isSSRPreview;
+
+var isSSRServerPreview = function isSSRServerPreview(preview) {
+  var ssrClientSources = ['ssr-server', 'cache-ssr-server'];
+  return ssrClientSources.includes(preview.source);
+};
+
+exports.isSSRServerPreview = isSSRServerPreview;
+
+var isSSRClientPreview = function isSSRClientPreview(preview) {
+  var ssrClientSources = ['ssr-client', 'cache-ssr-client'];
+  return ssrClientSources.includes(preview.source);
+};
+
+exports.isSSRClientPreview = isSSRClientPreview;
+
+var fetchAndCacheRemotePreview = /*#__PURE__*/function () {
+  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(mediaClient, id, dimensions, params, mediaBlobUrlAttrs) {
+    var remotePreview;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return (0, _helpers.getCardPreviewFromBackend)(mediaClient, id, params);
+
+          case 2:
+            remotePreview = _context2.sent;
+            return _context2.abrupt("return", extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs));
+
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function fetchAndCacheRemotePreview(_x2, _x3, _x4, _x5, _x6) {
+    return _ref4.apply(this, arguments);
+  };
+}();
+
+exports.fetchAndCacheRemotePreview = fetchAndCacheRemotePreview;