@atlaskit/renderer 108.19.0 → 108.20.1

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);

package/dist/esm/ui/Renderer/index.js

@@ -11,11 +11,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 /** @jsx jsx */
-import React, { Fragment, useContext, useLayoutEffect, useRef, PureComponent } from 'react';
+import React, { Fragment, useContext, useLayoutEffect, useRef } from 'react';
 import { jsx } from '@emotion/react';
+import { PureComponent } from 'react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from '@atlaskit/adf-utils/traverse';
-import { ProviderFactory, ProviderFactoryProvider } from '@atlaskit/editor-common/provider-factory';
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI, getDistortedDurationMonitor, browser } from '@atlaskit/editor-common/utils';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
@@ -41,11 +42,10 @@ import { RendererContextProvider } from '../../renderer-context';
 import memoizeOne from 'memoize-one';
 import { ErrorBoundary } from './ErrorBoundary';
 import { RenderTracking } from '../../react/utils/performance/RenderTracking';
-import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientProvider';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.19.0";
+var packageVersion = "108.20.1";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -292,8 +292,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         allowColumnSorting = _this$props.allowColumnSorting,
         allowCopyToClipboard = _this$props.allowCopyToClipboard,
         allowWrapCodeBlock = _this$props.allowWrapCodeBlock,
-        allowCustomPanels = _this$props.allowCustomPanels,
-        media = _this$props.media;
+        allowCustomPanels = _this$props.allowCustomPanels;
       var featureFlags = this.featureFlags(this.props.featureFlags);
       var allowNestedHeaderLinks = isNestedHeaderLinksEnabled(allowHeadingAnchorLinks);
       /**
@@ -361,9 +360,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
               return _this3.fireAnalyticsEvent(event);
             }
           }
-        }, jsx(SmartCardStorageProvider, null, jsx(ProviderFactoryProvider, {
-          value: this.providerFactory
-        }, jsx(RendererWrapper, {
+        }, jsx(SmartCardStorageProvider, null, jsx(RendererWrapper, {
           appearance: appearance,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           allowColumnSorting: allowColumnSorting,
@@ -375,13 +372,12 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           addTelepointer: this.props.addTelepointer,
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
-          onMouseDown: this.onMouseDownEditView,
-          ssr: media === null || media === void 0 ? void 0 : media.ssr
+          onMouseDown: this.onMouseDownEditView
         }, enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, null) : null, jsx(RendererActionsInternalUpdater, {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
-        }, result)))))));
+        }, result))))));
         var rendererResult = truncated ? jsx(TruncatedWrapper, {
           height: maxHeight,
           fadeHeight: fadeOutHeight
@@ -462,8 +458,7 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
     onClick = props.onClick,
     onMouseDown = props.onMouseDown,
     useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock,
-    addTelepointer = props.addTelepointer,
-    ssr = props.ssr;
+    addTelepointer = props.addTelepointer;
   var createTelepointer = function createTelepointer() {
     var telepointer = document.createElement('span');
     telepointer.textContent = "\u200B";
@@ -520,8 +515,6 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
     "data-appearance": appearance
   }, jsx(BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
-  }, jsx(EditorMediaClientProvider, {
-    ssr: ssr
   }, jsx("div", {
     ref: innerRef,
     onClick: onClick,
@@ -532,7 +525,7 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
       allowColumnSorting: !!allowColumnSorting,
       useBlockRenderForCodeBlock: useBlockRenderForCodeBlock
     })
-  }, children))));
+  }, children)));
 });
 function RendererActionsInternalUpdater(_ref) {
   var children = _ref.children,

package/dist/esm/ui/Renderer/style.js

@@ -62,7 +62,7 @@ export var headingSizes = {
 };
 var headingAnchorStyle = function headingAnchorStyle(headingTag) {
   return (// TODO Delete this comment after verifying space token -> previous value `margin-left: 6px`
-    css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    .", " {\n      position: absolute;\n      height: ", "em;\n\n      margin-left: ", ";\n\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n        }\n      }\n\n      &:hover {\n        .", " > button {\n          opacity: 1;\n          transform: none !important;\n        }\n      }\n    }\n  "])), HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName)
+    css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    .", " {\n      position: absolute;\n      height: ", "em;\n\n      margin-left: ", ";\n\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n        }\n      }\n\n      &:hover {\n        .", " > button {\n          opacity: 1;\n          transform: none !important;\n        }\n      }\n    }\n\n    /**\n     * Adds the visibility of the button when in focus through keyboard navigation.\n     */\n    .", " {\n      button:focus {\n        opacity: 1;\n        transform: none !important;\n      }\n    }\n  "])), HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName)
   );
 };
 var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {

package/dist/types/react/nodes/index.d.ts

@@ -58,7 +58,7 @@ declare const BlockCard: React.ComponentType<{
 }> & Loadable.LoadableComponent;
 declare const Media: React.ComponentType<import("./media").MediaProps> & Loadable.LoadableComponent;
 declare const MediaGroup: React.ComponentType<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent;
-declare const MediaInline: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaInline").MediaInlineProps & import("react-intl-next").WrappedComponentProps<"intl"> & import("@atlaskit/editor-common/media-inline").MediaInlineAttrs>> & Loadable.LoadableComponent;
+declare const MediaInline: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaInline").MediaInlineProps & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
 declare const MediaSingle: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaSingle").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
 declare const Mention: React.ComponentType<import("./mention").Props> & Loadable.LoadableComponent;
 declare const Expand: React.ComponentType<import("react-intl-next").WithIntlProps<import("../../ui/Expand").ExpandProps & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;

package/dist/types/react/nodes/media/index.d.ts

@@ -1,7 +1,8 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
+import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
-import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { MediaCardProps } from '../../../ui/MediaCard';
 import type { LinkDefinition, BorderMarkDefinition } from '@atlaskit/adf-schema';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';

package/dist/types/react/nodes/mediaInline.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { FC } from 'react';
 import type { ContextIdentifierProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { FileIdentifier } from '@atlaskit/media-client';
 import type { MediaProvider, ClipboardAttrs } from '../../ui/MediaCard';
@@ -8,7 +7,6 @@ import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { RendererAppearance } from '../../ui/Renderer/types';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
 import type { RendererContext } from '../types';
-import type { MediaInlineAttrs } from '@atlaskit/editor-common/media-inline';
 type MediaInlineProviders = {
     mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
@@ -33,8 +31,8 @@ export type MediaInlineProps = {
     rendererAppearance?: RendererAppearance;
     featureFlags?: MediaFeatureFlags;
 };
-export declare const RenderMediaInline: FC<RenderMediaInlineProps & MediaInlineAttrs>;
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {
-    WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>;
+export declare const RenderMediaInline: React.FC<RenderMediaInlineProps>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/ui/MediaCard.d.ts

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import type { CardAppearance, CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
 import type { MediaClientConfig } from '@atlaskit/media-core';
-import type { ImageResizeMode, Identifier, FileState, MediaClient } from '@atlaskit/media-client';
+import type { ImageResizeMode, Identifier, FileState } from '@atlaskit/media-client';
 import type { MediaType } from '@atlaskit/adf-schema';
 import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import type { ImageStatus } from '@atlaskit/editor-common/utils';
@@ -15,6 +15,7 @@ export type MediaProvider = {
 };
 export interface MediaCardProps {
     id?: string;
+    mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
     eventHandlers?: {
         media?: {
@@ -41,19 +42,18 @@ export interface MediaCardProps {
     ssr?: MediaSSR;
 }
 export interface State {
+    mediaClientConfig?: MediaClientConfig;
     contextIdentifierProvider?: ContextIdentifierProvider;
     fileState?: FileState;
 }
 export declare const mediaIdentifierMap: Map<string, Identifier>;
 export declare const getListOfIdentifiersFromDoc: (doc?: ADFEntity) => Identifier[];
-export declare class MediaCardView extends Component<MediaCardProps & {
-    mediaClient?: MediaClient;
-}, State> {
+export declare class MediaCardInternal extends Component<MediaCardProps, State> {
     state: State;
     componentDidMount(): Promise<void>;
     UNSAFE_componentWillReceiveProps(newProps: MediaCardProps): void;
     componentWillUnmount(): void;
-    saveFileState: (id: string) => Promise<void>;
+    saveFileState: (id: string, mediaClientConfig: MediaClientConfig) => Promise<void>;
     private renderLoadingCard;
     private renderExternal;
     /**
@@ -76,5 +76,4 @@ export type ClipboardAttrs = {
 export declare const getClipboardAttrs: ({ id, alt, collection, contextIdentifierProvider, originalDimensions, fileState, }: ClipboardAttrs) => {
     [key: string]: string | number | undefined;
 };
-export declare const MediaCardInternal: (props: MediaCardProps) => JSX.Element;
 export declare const MediaCard: React.ComponentClass<MediaCardProps & import("@atlaskit/editor-common/utils").ImageLoaderProps, any>;

package/dist/types/ui/Renderer/index.d.ts

@@ -1,6 +1,5 @@
-/** @jsx jsx */
-import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
+import { PureComponent } from 'react';
 import type { RendererProps } from '../renderer-props';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;

package/dist/types-ts4.5/react/nodes/index.d.ts

@@ -58,7 +58,7 @@ declare const BlockCard: React.ComponentType<{
 }> & Loadable.LoadableComponent;
 declare const Media: React.ComponentType<import("./media").MediaProps> & Loadable.LoadableComponent;
 declare const MediaGroup: React.ComponentType<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent;
-declare const MediaInline: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaInline").MediaInlineProps & import("react-intl-next").WrappedComponentProps<"intl"> & import("@atlaskit/editor-common/media-inline").MediaInlineAttrs>> & Loadable.LoadableComponent;
+declare const MediaInline: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaInline").MediaInlineProps & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
 declare const MediaSingle: React.ComponentType<import("react-intl-next").WithIntlProps<import("./mediaSingle").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
 declare const Mention: React.ComponentType<import("./mention").Props> & Loadable.LoadableComponent;
 declare const Expand: React.ComponentType<import("react-intl-next").WithIntlProps<import("../../ui/Expand").ExpandProps & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;

package/dist/types-ts4.5/react/nodes/media/index.d.ts

@@ -1,7 +1,8 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
+import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
-import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { MediaCardProps } from '../../../ui/MediaCard';
 import type { LinkDefinition, BorderMarkDefinition } from '@atlaskit/adf-schema';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';

package/dist/types-ts4.5/react/nodes/mediaInline.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { FC } from 'react';
 import type { ContextIdentifierProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { FileIdentifier } from '@atlaskit/media-client';
 import type { MediaProvider, ClipboardAttrs } from '../../ui/MediaCard';
@@ -8,7 +7,6 @@ import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { RendererAppearance } from '../../ui/Renderer/types';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
 import type { RendererContext } from '../types';
-import type { MediaInlineAttrs } from '@atlaskit/editor-common/media-inline';
 type MediaInlineProviders = {
     mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
@@ -33,8 +31,8 @@ export type MediaInlineProps = {
     rendererAppearance?: RendererAppearance;
     featureFlags?: MediaFeatureFlags;
 };
-export declare const RenderMediaInline: FC<RenderMediaInlineProps & MediaInlineAttrs>;
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {
-    WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>;
+export declare const RenderMediaInline: React.FC<RenderMediaInlineProps>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<MediaInlineProps & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types-ts4.5/ui/MediaCard.d.ts

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import type { CardAppearance, CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
 import type { MediaClientConfig } from '@atlaskit/media-core';
-import type { ImageResizeMode, Identifier, FileState, MediaClient } from '@atlaskit/media-client';
+import type { ImageResizeMode, Identifier, FileState } from '@atlaskit/media-client';
 import type { MediaType } from '@atlaskit/adf-schema';
 import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
 import type { ImageStatus } from '@atlaskit/editor-common/utils';
@@ -15,6 +15,7 @@ export type MediaProvider = {
 };
 export interface MediaCardProps {
     id?: string;
+    mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
     eventHandlers?: {
         media?: {
@@ -41,19 +42,18 @@ export interface MediaCardProps {
     ssr?: MediaSSR;
 }
 export interface State {
+    mediaClientConfig?: MediaClientConfig;
     contextIdentifierProvider?: ContextIdentifierProvider;
     fileState?: FileState;
 }
 export declare const mediaIdentifierMap: Map<string, Identifier>;
 export declare const getListOfIdentifiersFromDoc: (doc?: ADFEntity) => Identifier[];
-export declare class MediaCardView extends Component<MediaCardProps & {
-    mediaClient?: MediaClient;
-}, State> {
+export declare class MediaCardInternal extends Component<MediaCardProps, State> {
     state: State;
     componentDidMount(): Promise<void>;
     UNSAFE_componentWillReceiveProps(newProps: MediaCardProps): void;
     componentWillUnmount(): void;
-    saveFileState: (id: string) => Promise<void>;
+    saveFileState: (id: string, mediaClientConfig: MediaClientConfig) => Promise<void>;
     private renderLoadingCard;
     private renderExternal;
     /**
@@ -76,5 +76,4 @@ export type ClipboardAttrs = {
 export declare const getClipboardAttrs: ({ id, alt, collection, contextIdentifierProvider, originalDimensions, fileState, }: ClipboardAttrs) => {
     [key: string]: string | number | undefined;
 };
-export declare const MediaCardInternal: (props: MediaCardProps) => JSX.Element;
 export declare const MediaCard: React.ComponentClass<MediaCardProps & import("@atlaskit/editor-common/utils").ImageLoaderProps, any>;

package/dist/types-ts4.5/ui/Renderer/index.d.ts

@@ -1,6 +1,5 @@
-/** @jsx jsx */
-import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
+import { PureComponent } from 'react';
 import type { RendererProps } from '../renderer-props';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.19.0",
+  "version": "108.20.1",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.17.0",
+    "@atlaskit/button": "^16.18.0",
     "@atlaskit/code": "^15.1.0",
     "@atlaskit/editor-common": "^76.25.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",