@atlaskit/renderer 108.18.0 → 108.20.0

package/dist/esm/react/nodes/mediaInline.js

@@ -9,7 +9,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { MediaInlineCardErroredView, MediaInlineCardLoadingView, messages } from '@atlaskit/media-ui';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { MediaClientContext } from '@atlaskit/media-client-react';
+import { getMediaClient } from '@atlaskit/media-client-react';
 import { getClipboardAttrs, mediaIdentifierMap } from '../../ui/MediaCard';
 import { createIntl, injectIntl } from 'react-intl-next';
 export var RenderMediaInline = function RenderMediaInline(_ref) {
@@ -18,6 +18,7 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     clipboardAttrs = _ref.clipboardAttrs,
     mediaInlineProviders = _ref.mediaInlineProviders,
     collectionName = _ref.collection,
+    featureFlags = _ref.featureFlags,
     eventHandlers = _ref.eventHandlers,
     identifier = _ref.identifier;
   var _useState = useState(),
@@ -26,9 +27,12 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     setContextIdentifierProvider = _useState2[1];
   var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
-    fileState = _useState4[0],
-    setFileState = _useState4[1];
-  var mediaClient = React.useContext(MediaClientContext);
+    viewMediaClientConfigState = _useState4[0],
+    setViewMediaClientConfigState = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    fileState = _useState6[0],
+    setFileState = _useState6[1];
   var updateContext = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(contextIdentifierProvider) {
       var resolvedContextID;
@@ -55,40 +59,36 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     };
   }();
   var updateFileState = useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(id) {
-      var options, _fileState;
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(id, mediaClientConfig) {
+      var mediaClient, options, _fileState;
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
+            mediaClient = getMediaClient(mediaClientConfig);
             options = {
               collectionName: collectionName
             };
-            _context2.prev = 1;
-            if (!mediaClient) {
-              _context2.next = 7;
-              break;
-            }
+            _context2.prev = 2;
             _context2.next = 5;
             return mediaClient.file.getCurrentState(id, options);
           case 5:
             _fileState = _context2.sent;
             setFileState(_fileState);
-          case 7:
             _context2.next = 11;
             break;
           case 9:
             _context2.prev = 9;
-            _context2.t0 = _context2["catch"](1);
+            _context2.t0 = _context2["catch"](2);
           case 11:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[1, 9]]);
+      }, _callee2, null, [[2, 9]]);
     }));
-    return function (_x2) {
+    return function (_x2, _x3) {
       return _ref3.apply(this, arguments);
     };
-  }(), [collectionName, mediaClient]);
+  }(), [collectionName]);
   useEffect(function () {
     var id = identifier.id;
     var nodeIsInCache = id && mediaIdentifierMap.has(id);
@@ -102,17 +102,44 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     };
   }, [identifier, collectionName]);
   useEffect(function () {
-    var contextIdentifierProvider = mediaInlineProviders.contextIdentifierProvider;
+    var mediaProvider = mediaInlineProviders.mediaProvider,
+      contextIdentifierProvider = mediaInlineProviders.contextIdentifierProvider;
     var id = clipboardAttrs.id;
+    updateViewMediaClientConfigState(mediaProvider);
     updateContext(contextIdentifierProvider);
-    id && updateFileState(id);
-  }, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, updateFileState]);
+    id && viewMediaClientConfigState && updateFileState(id, viewMediaClientConfigState);
+  }, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, viewMediaClientConfigState, updateFileState]);
+  var updateViewMediaClientConfigState = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(mediaProvider) {
+      var mediaClientConfig;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!mediaProvider) {
+              _context3.next = 5;
+              break;
+            }
+            _context3.next = 3;
+            return mediaProvider;
+          case 3:
+            mediaClientConfig = _context3.sent;
+            setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
+          case 5:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function updateViewMediaClientConfigState(_x4) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
 
   /*
    * Only show the loading view if the media provider is not ready
    * prevents calling the media API before the provider is ready
    */
-  if (!mediaClient) {
+  if (!viewMediaClientConfigState) {
     return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
       message: "",
       isSelected: false
@@ -142,7 +169,7 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     onClick: handleMediaInlineClick,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
     shouldDisplayToolTip: shouldDisplayToolTip,
-    mediaClientConfig: mediaClient.mediaClientConfig,
+    mediaClientConfig: viewMediaClientConfigState,
     mediaViewerItems: Array.from(mediaIdentifierMap.values())
   }) : /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
     message: (intl || createIntl({

package/dist/esm/react/nodes/mediaSingle/index.js

@@ -1,5 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+
 import { default as React, Fragment } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { MediaSingle as UIMediaSingle, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -154,7 +157,7 @@ var MediaSingle = function MediaSingle(props) {
       featureFlags: featureFlags
     });
     var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles] : [uiMediaSingleBaseStyles];
-    return /*#__PURE__*/React.createElement(UIMediaSingle, {
+    return jsx(UIMediaSingle, {
       css: uiMediaSingleStyles,
       handleMediaSingleRef: ref,
       layout: layout,
@@ -167,9 +170,9 @@ var MediaSingle = function MediaSingle(props) {
         widthType: widthType
       },
       fullWidthMode: isFullWidth
-    }, /*#__PURE__*/React.createElement(Fragment, null, mediaComponent), allowCaptions && caption);
+    }, jsx(Fragment, null, mediaComponent), allowCaptions && caption);
   };
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref3) {
+  return jsx(WidthConsumer, null, function (_ref3) {
     var width = _ref3.width;
     // Note: in SSR mode the `window` object is not defined,
     // therefore width here is 0, see:

package/dist/esm/react/nodes/mediaSingle/styles.js

@@ -1,5 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 import { css } from '@emotion/react';
 export var uiMediaSingleBaseStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  transition: all 0.1s linear;\n"])));
 export var uiMediaSingleLayoutStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));

package/dist/esm/react/nodes/panel.js

@@ -3,8 +3,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _templateObject, _templateObject2;
 var _excluded = ["backgroundColor", "hasIcon"];
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
 import { PanelType } from '@atlaskit/adf-schema';
 import { getPanelBackgroundDarkModeColors, panelSharedStylesWithoutPrefix, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
@@ -38,7 +39,7 @@ var PanelStyled = function PanelStyled(_ref) {
       }), PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding-left: 12px;');
     };
   }
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return jsx("div", _extends({
     css: styles
   }, props), props.children);
 };
@@ -67,7 +68,7 @@ var Panel = function Panel(props) {
   var getIcon = function getIcon() {
     if (panelType === PanelType.CUSTOM) {
       if (panelIcon && providers) {
-        return /*#__PURE__*/React.createElement(EmojiItem, {
+        return jsx(EmojiItem, {
           id: panelIconId,
           text: panelIconText,
           shortName: panelIcon,
@@ -77,19 +78,19 @@ var Panel = function Panel(props) {
       return null;
     }
     var Icon = panelIcons[panelType];
-    return /*#__PURE__*/React.createElement(Icon, {
+    return jsx(Icon, {
       label: "Panel ".concat(panelType)
     });
   };
   var icon = getIcon();
   var renderIcon = function renderIcon() {
     if (icon) {
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }
   };
-  return /*#__PURE__*/React.createElement(PanelStyled, {
+  return jsx(PanelStyled, {
     className: PanelSharedCssClassName.prefix,
     "data-panel-type": panelType,
     "data-panel-color": panelColor,
@@ -98,7 +99,7 @@ var Panel = function Panel(props) {
     "data-panel-icon-text": panelIconText,
     backgroundColor: panelColor,
     hasIcon: Boolean(icon)
-  }, renderIcon(), /*#__PURE__*/React.createElement("div", {
+  }, renderIcon(), jsx("div", {
     className: PanelSharedCssClassName.content
   }, children));
 };

package/dist/esm/react/nodes/table/sticky.js

@@ -3,8 +3,9 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
@@ -37,7 +38,7 @@ export var FixedTableDiv = function FixedTableDiv(props) {
   var attrs = {
     mode: mode
   };
-  return /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
+  return jsx("div", _extends({}, attrs, {
     "data-testid": "sticky-table-fixed",
     css: fixedTableCss
   }), props.children);
@@ -73,26 +74,26 @@ export var StickyTable = function StickyTable(_ref) {
     });
   }
   /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: styles
-  }, /*#__PURE__*/React.createElement(FixedTableDiv, {
+  }, jsx(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth,
     rendererAppearance: rendererAppearance
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " is-sticky ").concat(shadowClassNames || ''),
     "data-layout": layout,
     style: {
       width: tableWidth
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     ref: innerRef,
     className: "".concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER),
     style: {
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement(Table, {
+  }, jsx(Table, {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,

package/dist/esm/ui/Expand.js

@@ -2,8 +2,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
 import React, { useRef, useCallback, useMemo } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
@@ -25,7 +26,7 @@ var Container = function Container(props) {
       theme: themeProps
     }), paddingBottom);
   };
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return jsx("div", _extends({
     css: styles
   }, props), props.children);
 };
@@ -36,7 +37,7 @@ var TitleContainer = function TitleContainer(props) {
       theme: themeProps
     }), "var(--ds-space-100, 8px)", paddingBottom);
   };
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return jsx("button", _extends({
     css: styles
   }, props), props.children);
 };
@@ -49,7 +50,7 @@ var ContentContainer = function ContentContainer(props) {
       theme: themeProps
     }), "var(--ds-space-200, 16px)", gridSize() * 5 - gridSize() / 2, visibility);
   };
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return jsx("div", _extends({
     css: styles
   }, props), props.children);
 };
@@ -96,18 +97,18 @@ function Expand(_ref) {
   var handleBlur = useCallback(function () {
     return setFocused(false);
   }, []);
-  return /*#__PURE__*/React.createElement(Container, {
+  return jsx(Container, {
     "data-node-type": nodeType,
     "data-title": title,
     "data-expanded": expanded,
     expanded: expanded,
     focused: focused
-  }, nestedHeaderIds && nestedHeaderIds.length > 0 ? /*#__PURE__*/React.createElement(ActiveHeaderIdConsumer, {
+  }, nestedHeaderIds && nestedHeaderIds.length > 0 ? jsx(ActiveHeaderIdConsumer, {
     nestedHeaderIds: nestedHeaderIds,
     onNestedHeaderIdMatch: function onNestedHeaderIdMatch() {
       return setExpanded(true);
     }
-  }) : null, /*#__PURE__*/React.createElement(TitleContainer, {
+  }) : null, jsx(TitleContainer, {
     onClick: function onClick(e) {
       e.stopPropagation();
       fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
@@ -122,27 +123,27 @@ function Expand(_ref) {
     "aria-expanded": expanded,
     contentEditable: false,
     expanded: expanded
-  }, isMobile ? /*#__PURE__*/React.createElement(ExpandIconWrapper, {
+  }, isMobile ? jsx(ExpandIconWrapper, {
     expanded: expanded
-  }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+  }, jsx(ChevronRightIcon, {
     label: label
-  })) : /*#__PURE__*/React.createElement(Tooltip, {
+  })) : jsx(Tooltip, {
     content: label,
     position: "top",
     tag: ExpandLayoutWrapperWithRef,
     testId: 'tooltip'
-  }, /*#__PURE__*/React.createElement(ExpandIconWrapper, {
+  }, jsx(ExpandIconWrapper, {
     expanded: expanded
-  }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+  }, jsx(ChevronRightIcon, {
     label: label
-  }))), /*#__PURE__*/React.createElement("span", {
+  }))), jsx("span", {
     css: titleStyles,
     id: id
-  }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), /*#__PURE__*/React.createElement(ContentContainer, {
+  }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), jsx(ContentContainer, {
     expanded: expanded
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     className: "".concat(nodeType, "-content-wrapper")
-  }, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement("div", {
+  }, jsx(WidthProvider, null, jsx("div", {
     css: clearNextSiblingMarginTopStyle
   }), children))));
 }

package/dist/esm/ui/MediaCard.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -15,7 +14,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React, { Component } from 'react';
 import { filter } from '@atlaskit/adf-utils/traverse';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
-import { MediaClientContext } from '@atlaskit/media-client-react';
+import { getMediaClient } from '@atlaskit/media-client-react';
 import { withImageLoader } from '@atlaskit/editor-common/utils';
 export var mediaIdentifierMap = new Map();
 export var getListOfIdentifiersFromDoc = function getListOfIdentifiersFromDoc(doc) {
@@ -46,32 +45,29 @@ export var getListOfIdentifiersFromDoc = function getListOfIdentifiersFromDoc(do
     return identifierList;
   }, []);
 };
-export var MediaCardView = /*#__PURE__*/function (_Component) {
-  _inherits(MediaCardView, _Component);
-  var _super = _createSuper(MediaCardView);
-  function MediaCardView() {
+export var MediaCardInternal = /*#__PURE__*/function (_Component) {
+  _inherits(MediaCardInternal, _Component);
+  var _super = _createSuper(MediaCardInternal);
+  function MediaCardInternal() {
     var _this;
-    _classCallCheck(this, MediaCardView);
+    _classCallCheck(this, MediaCardInternal);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "state", {});
     _defineProperty(_assertThisInitialized(_this), "saveFileState", /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(id) {
-        var _this$props, collectionName, mediaClient, options, fileState;
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(id, mediaClientConfig) {
+        var collectionName, mediaClient, options, fileState;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              _this$props = _this.props, collectionName = _this$props.collection, mediaClient = _this$props.mediaClient;
+              collectionName = _this.props.collection;
+              mediaClient = getMediaClient(mediaClientConfig);
               options = {
                 collectionName: collectionName
               };
-              _context.prev = 2;
-              if (!mediaClient) {
-                _context.next = 8;
-                break;
-              }
+              _context.prev = 3;
               _context.next = 6;
               return mediaClient.file.getCurrentState(id, options);
             case 6:
@@ -79,19 +75,18 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
               _this.setState({
                 fileState: fileState
               });
-            case 8:
               _context.next = 12;
               break;
             case 10:
               _context.prev = 10;
-              _context.t0 = _context["catch"](2);
+              _context.t0 = _context["catch"](3);
             case 12:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[2, 10]]);
+        }, _callee, null, [[3, 10]]);
       }));
-      return function (_x) {
+      return function (_x, _x2) {
         return _ref.apply(this, arguments);
       };
     }());
@@ -122,29 +117,40 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  _createClass(MediaCardView, [{
+  _createClass(MediaCardInternal, [{
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var _this$props2, rendererContext, contextIdentifierProvider, id, url, collectionName, nodeIsInCache;
+        var _this$props, rendererContext, mediaProvider, contextIdentifierProvider, id, url, collectionName, mediaProviderObject, mediaClientConfig, nodeIsInCache;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _this$props2 = this.props, rendererContext = _this$props2.rendererContext, contextIdentifierProvider = _this$props2.contextIdentifierProvider, id = _this$props2.id, url = _this$props2.url, collectionName = _this$props2.collection;
+              _this$props = this.props, rendererContext = _this$props.rendererContext, mediaProvider = _this$props.mediaProvider, contextIdentifierProvider = _this$props.contextIdentifierProvider, id = _this$props.id, url = _this$props.url, collectionName = _this$props.collection;
+              if (mediaProvider) {
+                _context2.next = 3;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 3:
               if (!contextIdentifierProvider) {
-                _context2.next = 8;
+                _context2.next = 10;
                 break;
               }
               _context2.t0 = this;
-              _context2.next = 5;
+              _context2.next = 7;
               return contextIdentifierProvider;
-            case 5:
+            case 7:
               _context2.t1 = _context2.sent;
               _context2.t2 = {
                 contextIdentifierProvider: _context2.t1
               };
               _context2.t0.setState.call(_context2.t0, _context2.t2);
-            case 8:
+            case 10:
+              _context2.next = 12;
+              return mediaProvider;
+            case 12:
+              mediaProviderObject = _context2.sent;
+              mediaClientConfig = mediaProviderObject.viewMediaClientConfig;
               nodeIsInCache = id && mediaIdentifierMap.has(id) || url && mediaIdentifierMap.has(url);
               if (rendererContext && rendererContext.adDoc && !nodeIsInCache) {
                 getListOfIdentifiersFromDoc(rendererContext.adDoc).forEach(function (identifier) {
@@ -157,10 +163,13 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
                   }
                 });
               }
+              this.setState({
+                mediaClientConfig: mediaClientConfig
+              });
               if (id) {
-                this.saveFileState(id);
+                this.saveFileState(id, mediaClientConfig);
               }
-            case 11:
+            case 18:
             case "end":
               return _context2.stop();
           }
@@ -174,17 +183,18 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(newProps) {
+      var mediaClientConfig = this.state.mediaClientConfig;
       var newId = newProps.id;
-      if (newId && newId !== this.props.id) {
-        this.saveFileState(newId);
+      if (mediaClientConfig && newId && newId !== this.props.id) {
+        this.saveFileState(newId, mediaClientConfig);
       }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props3 = this.props,
-        id = _this$props3.id,
-        dataURI = _this$props3.url;
+      var _this$props2 = this.props,
+        id = _this$props2.id,
+        dataURI = _this$props2.url;
       if (id) {
         mediaIdentifierMap.delete(id);
       } else if (dataURI) {
@@ -194,18 +204,18 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderExternal",
     value: function renderExternal(shouldOpenMediaViewer) {
-      var _this$props$mediaClie;
-      var _this$props4 = this.props,
-        cardDimensions = _this$props4.cardDimensions,
-        resizeMode = _this$props4.resizeMode,
-        appearance = _this$props4.appearance,
-        url = _this$props4.url,
-        imageStatus = _this$props4.imageStatus,
-        disableOverlay = _this$props4.disableOverlay,
-        alt = _this$props4.alt,
-        featureFlags = _this$props4.featureFlags,
-        ssr = _this$props4.ssr,
-        rendererAppearance = _this$props4.rendererAppearance;
+      var mediaClientConfig = this.state.mediaClientConfig;
+      var _this$props3 = this.props,
+        cardDimensions = _this$props3.cardDimensions,
+        resizeMode = _this$props3.resizeMode,
+        appearance = _this$props3.appearance,
+        url = _this$props3.url,
+        imageStatus = _this$props3.imageStatus,
+        disableOverlay = _this$props3.disableOverlay,
+        alt = _this$props3.alt,
+        featureFlags = _this$props3.featureFlags,
+        ssr = _this$props3.ssr,
+        rendererAppearance = _this$props3.rendererAppearance;
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
       }
@@ -214,7 +224,6 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         name: url,
         mediaItemType: 'external-image'
       };
-      var mediaClientConfig = (_this$props$mediaClie = this.props.mediaClient) === null || _this$props$mediaClie === void 0 ? void 0 : _this$props$mediaClie.mediaClientConfig;
       return /*#__PURE__*/React.createElement(Card
       // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
       // context is not really used when the type is external and we want to render the component asap
@@ -236,26 +245,26 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props$mediaClie2;
       var _this$state = this.state,
         contextIdentifierProvider = _this$state.contextIdentifierProvider,
+        mediaClientConfigInState = _this$state.mediaClientConfig,
         fileState = _this$state.fileState;
-      var _this$props5 = this.props,
-        id = _this$props5.id,
-        alt = _this$props5.alt,
-        type = _this$props5.type,
-        collection = _this$props5.collection,
-        occurrenceKey = _this$props5.occurrenceKey,
-        cardDimensions = _this$props5.cardDimensions,
-        resizeMode = _this$props5.resizeMode,
-        rendererAppearance = _this$props5.rendererAppearance,
-        disableOverlay = _this$props5.disableOverlay,
-        useInlinePlayer = _this$props5.useInlinePlayer,
-        originalDimensions = _this$props5.originalDimensions,
-        forceOpenMediaViewer = _this$props5.shouldOpenMediaViewer,
-        featureFlags = _this$props5.featureFlags,
-        shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
-        ssr = _this$props5.ssr;
+      var _this$props4 = this.props,
+        id = _this$props4.id,
+        alt = _this$props4.alt,
+        type = _this$props4.type,
+        collection = _this$props4.collection,
+        occurrenceKey = _this$props4.occurrenceKey,
+        cardDimensions = _this$props4.cardDimensions,
+        resizeMode = _this$props4.resizeMode,
+        rendererAppearance = _this$props4.rendererAppearance,
+        disableOverlay = _this$props4.disableOverlay,
+        useInlinePlayer = _this$props4.useInlinePlayer,
+        originalDimensions = _this$props4.originalDimensions,
+        forceOpenMediaViewer = _this$props4.shouldOpenMediaViewer,
+        featureFlags = _this$props4.featureFlags,
+        shouldEnableDownloadButton = _this$props4.shouldEnableDownloadButton,
+        ssr = _this$props4.ssr;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -267,7 +276,7 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
       if (type === 'link') {
         return null;
       }
-      var mediaClientConfig = !!ssr ? ssr.config : (_this$props$mediaClie2 = this.props.mediaClient) === null || _this$props$mediaClie2 === void 0 ? void 0 : _this$props$mediaClie2.mediaClientConfig;
+      var mediaClientConfig = !!ssr ? ssr.config : mediaClientConfigInState;
       if (!mediaClientConfig || !id) {
         return this.renderLoadingCard();
       }
@@ -311,7 +320,7 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
       }));
     }
   }]);
-  return MediaCardView;
+  return MediaCardInternal;
 }(Component);
 // Needed for copy & paste
 export var getClipboardAttrs = function getClipboardAttrs(_ref2) {
@@ -346,10 +355,4 @@ export var getClipboardAttrs = function getClipboardAttrs(_ref2) {
     'data-alt': alt
   };
 };
-export var MediaCardInternal = function MediaCardInternal(props) {
-  var mediaClient = React.useContext(MediaClientContext);
-  return /*#__PURE__*/React.createElement(MediaCardView, _extends({}, props, {
-    mediaClient: mediaClient
-  }));
-};
 export var MediaCard = withImageLoader(MediaCardInternal);