@atlaskit/renderer 98.1.0 → 101.0.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/renderer
 
+## 101.0.0
+
+### Major Changes
+
+- [`83730e9b1fa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/83730e9b1fa) - replace @atlaskit/smart-card peer dependency by @atlaskit/link-provider
+- [`080e2269f18`](https://bitbucket.org/atlassian/atlassian-frontend/commits/080e2269f18) - ED-14838: Completely remove allowDynamicTextSizing prop references and deprecation warnings from editor and renderer
+
+### Patch Changes
+
+- [`721bc4d7794`](https://bitbucket.org/atlassian/atlassian-frontend/commits/721bc4d7794) - ED-14377 To remove the imports of version.json which is deprecated
+- [`a293488d55d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a293488d55d) - [ux] ED-13304 fixes inconsistent date in action item formatting between edit/render mode when checked/unchecked
+- [`16fa5a45e7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/16fa5a45e7a) - [EDM-3364] Remove @atlaskit/smart-card peer dependency which was accidentally put back during a conflict resolution. It should no longer be in the peer dependencies of editor-core or renderer packages as it has been replaced by @atlaskit/link-provider
+- [`cad3842e2d3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cad3842e2d3) - fix media viewer navigation issue when files have different collection Ids
+- [`b10472a1e57`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b10472a1e57) - ED-14471 remove codeBidiWarnings feature flag
+- Updated dependencies
+
+## 100.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
+## 99.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 98.1.0
 
 ### Minor Changes

package/dist/cjs/react/marks/code.js

@@ -18,8 +18,6 @@ var _inline = _interopRequireDefault(require("@atlaskit/code/inline"));
 
 var _messages = require("@atlaskit/editor-common/messages");
 
-var _useFeatureFlags = require("../../use-feature-flags");
-
 var isCodeMark = function isCodeMark(mark) {
   return mark && mark.type && mark.type.name === 'code';
 };
@@ -27,11 +25,9 @@ var isCodeMark = function isCodeMark(mark) {
 exports.isCodeMark = isCodeMark;
 
 function CodeWithIntl(props) {
-  var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
   var codeBidiWarningLabel = props.intl.formatMessage(_messages.codeBidiWarningMessages.label);
   return /*#__PURE__*/_react.default.createElement(_inline.default, (0, _extends2.default)({
     className: "code",
-    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: props.codeBidiWarningTooltipEnabled
   }, props.dataAttributes), props.children);

package/dist/cjs/react/nodes/codeBlock/codeBlock.js

@@ -17,8 +17,6 @@ var _code = require("@atlaskit/code");
 
 var _messages = require("@atlaskit/editor-common/messages");
 
-var _useFeatureFlags = require("../../../use-feature-flags");
-
 var _codeBlockContainer = _interopRequireDefault(require("./components/codeBlockContainer"));
 
 /** @jsx jsx */
@@ -28,7 +26,6 @@ function CodeBlock(props) {
       _props$allowCopyToCli = props.allowCopyToClipboard,
       allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli,
       codeBidiWarningTooltipEnabled = props.codeBidiWarningTooltipEnabled;
-  var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
   var codeBidiWarningLabel = props.intl.formatMessage(_messages.codeBidiWarningMessages.label);
   var className = [_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, props.className].join(' ');
   return (0, _react.jsx)(_codeBlockContainer.default, {
@@ -38,7 +35,6 @@ function CodeBlock(props) {
   }, (0, _react.jsx)(_code.CodeBlock, {
     language: language,
     text: text,
-    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
   }));

package/dist/cjs/react/nodes/codeBlock/windowedCodeBlock.js

@@ -19,8 +19,6 @@ var _react2 = require("@emotion/react");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
-var _useFeatureFlags = require("../../../use-feature-flags");
-
 var _useInViewport2 = require("../../hooks/use-in-viewport");
 
 var _useBidiWarnings2 = require("../../hooks/use-bidi-warnings");
@@ -66,7 +64,6 @@ var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
       allowCopyToClipboard = _ref2.allowCopyToClipboard,
       codeBidiWarningTooltipEnabled = _ref2.codeBidiWarningTooltipEnabled,
       rootClassName = _ref2.className;
-  var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
 
   var _useBidiWarnings = (0, _useBidiWarnings2.useBidiWarnings)({
     enableWarningTooltip: codeBidiWarningTooltipEnabled
@@ -93,7 +90,6 @@ var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
   }, (0, _react2.jsx)(LazyAkCodeBlock, {
     language: language,
     text: text,
-    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
     codeBidiWarningLabel: warningLabel,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
   })))) : memoizedLightWeightCodeBlock;

package/dist/cjs/react/nodes/date.js

@@ -7,7 +7,11 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.DateComponent = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -27,6 +31,8 @@ var _utils = require("@atlaskit/editor-common/utils");
 
 var _reactIntlNext = require("react-intl-next");
 
+var _TaskItemsFormatContext = require("../../ui/TaskItemsFormatContext");
+
 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; }
@@ -65,6 +71,24 @@ var Date = /*#__PURE__*/function (_PureComponent) {
   return Date;
 }(_react.PureComponent);
 
-var _default = (0, _reactIntlNext.injectIntl)(Date);
+var DateComponent = (0, _reactIntlNext.injectIntl)(Date);
+exports.DateComponent = DateComponent;
+
+function DateWithFormatContext(props) {
+  var _useTaskItemsFormatCo = (0, _TaskItemsFormatContext.useTaskItemsFormatContext)(),
+      _useTaskItemsFormatCo2 = (0, _slicedToArray2.default)(_useTaskItemsFormatCo, 1),
+      isChecked = _useTaskItemsFormatCo2[0];
+
+  var parentIsIncompleteTask = props.parentIsIncompleteTask;
+
+  if (typeof isChecked !== 'undefined') {
+    parentIsIncompleteTask = !isChecked;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(DateComponent, (0, _extends2.default)({}, props, {
+    parentIsIncompleteTask: parentIsIncompleteTask
+  }));
+}
 
+var _default = DateWithFormatContext;
 exports.default = _default;

package/dist/cjs/react/nodes/embedCard.js

@@ -19,6 +19,8 @@ var _react2 = require("react");
 
 var _smartCard = require("@atlaskit/smart-card");
 
+var _linkProvider = require("@atlaskit/link-provider");
+
 var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -100,7 +102,7 @@ function EmbedCard(props) {
       hasPreview = _useState6[0],
       setPreviewAvailableState = _useState6[1];
 
-  var cardContext = (0, _react2.useContext)(_smartCard.Context);
+  var cardContext = (0, _react2.useContext)(_linkProvider.SmartCardContext);
 
   var onResolve = function onResolve(_ref) {
     var resolvedAspectRatio = _ref.aspectRatio;

package/dist/cjs/react/nodes/taskItem.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -31,6 +33,8 @@ var _taskItemWithProviders = _interopRequireDefault(require("./task-item-with-pr
 
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
 
+var _TaskItemsFormatContext = require("../../ui/TaskItemsFormatContext");
+
 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; }
@@ -69,16 +73,24 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
         data: {
           userContext: 'document'
         }
-      }, /*#__PURE__*/_react.default.createElement(_taskItemWithProviders.default, {
-        objectAri: objectAri,
-        taskId: localId,
-        isDone: state === 'DONE',
-        isRenderer: true,
-        disabled: disabled,
-        taskDecisionProvider: taskDecisionProvider,
-        contextIdentifierProvider: contextIdentifierProvider,
-        dataAttributes: dataAttributes
-      }, children));
+      }, /*#__PURE__*/_react.default.createElement(_TaskItemsFormatContext.TaskItemsFormatProvider, null, /*#__PURE__*/_react.default.createElement(_TaskItemsFormatContext.TaskItemsFormatConsumer, null, function (_ref) {
+        var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+            dispatch = _ref2[1];
+
+        return /*#__PURE__*/_react.default.createElement(_taskItemWithProviders.default, {
+          objectAri: objectAri,
+          taskId: localId,
+          isDone: state === 'DONE',
+          isRenderer: true,
+          disabled: disabled,
+          taskDecisionProvider: taskDecisionProvider,
+          contextIdentifierProvider: contextIdentifierProvider,
+          dataAttributes: dataAttributes,
+          onChange: function onChange(_, isChecked) {
+            dispatch(isChecked);
+          }
+        }, children);
+      })));
     });
     _this.providerFactory = props.providers || new _providerFactory.ProviderFactory();
     return _this;

package/dist/cjs/ui/MediaCard.js

@@ -217,7 +217,7 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
 
                 if (rendererContext && rendererContext.adDoc && !nodeIsInCache) {
                   getListOfIdentifiersFromDoc(rendererContext.adDoc).forEach(function (identifier) {
-                    if (identifier.mediaItemType === 'file') {
+                    if (identifier.mediaItemType === 'file' && identifier.id === id) {
                       mediaIdentifierMap.set(identifier.id, _objectSpread(_objectSpread({}, identifier), {}, {
                         collectionName: collectionName
                       }));

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

@@ -63,8 +63,6 @@ var _analyticsContext = _interopRequireDefault(require("../../analytics/analytic
 
 var _SmartCardStorage = require("../SmartCardStorage");
 
-var _version = require("../../version.json");
-
 var _breakoutSsr = require("./breakout-ssr");
 
 var _RendererActionsContext = require("../RendererActionsContext");
@@ -103,6 +101,8 @@ var NORMAL_SEVERITY_THRESHOLD = 2000;
 exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
+var packageName = "@atlaskit/renderer";
+var packageVersion = "101.0.0";
 
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
@@ -446,8 +446,8 @@ var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
   return (0, _react2.jsx)(_analyticsNamespacedContext.FabricEditorAnalyticsContext, {
     data: {
       appearance: (0, _utils.getAnalyticsAppearance)(props.appearance),
-      packageName: _version.name,
-      packageVersion: _version.version,
+      packageName: packageName,
+      packageVersion: packageVersion,
       componentName: 'renderer',
       editorSessionId: (0, _v.default)()
     }

package/dist/cjs/ui/TaskItemsFormatContext/TaskItemsFormatContext.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TaskItemsFormatConsumer = TaskItemsFormatConsumer;
+exports.TaskItemsFormatContext = void 0;
+exports.TaskItemsFormatProvider = TaskItemsFormatProvider;
+exports.useTaskItemsFormatContext = useTaskItemsFormatContext;
+
+var _react = _interopRequireDefault(require("react"));
+
+var defaultValue = [undefined, function () {}];
+
+var TaskItemsFormatContext = /*#__PURE__*/_react.default.createContext(defaultValue);
+
+exports.TaskItemsFormatContext = TaskItemsFormatContext;
+
+var reducer = function reducer(_state, action) {
+  return action;
+};
+
+function TaskItemsFormatProvider(_ref) {
+  var children = _ref.children;
+
+  var value = _react.default.useReducer(reducer, undefined);
+
+  return /*#__PURE__*/_react.default.createElement(TaskItemsFormatContext.Provider, {
+    value: value
+  }, children);
+}
+
+function useTaskItemsFormatContext() {
+  return _react.default.useContext(TaskItemsFormatContext);
+}
+
+function TaskItemsFormatConsumer(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement(TaskItemsFormatContext.Consumer, null, children);
+}

package/dist/cjs/ui/TaskItemsFormatContext/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TaskItemsFormatConsumer", {
+  enumerable: true,
+  get: function get() {
+    return _TaskItemsFormatContext.TaskItemsFormatConsumer;
+  }
+});
+Object.defineProperty(exports, "TaskItemsFormatProvider", {
+  enumerable: true,
+  get: function get() {
+    return _TaskItemsFormatContext.TaskItemsFormatProvider;
+  }
+});
+Object.defineProperty(exports, "useTaskItemsFormatContext", {
+  enumerable: true,
+  get: function get() {
+    return _TaskItemsFormatContext.useTaskItemsFormatContext;
+  }
+});
+
+var _TaskItemsFormatContext = require("./TaskItemsFormatContext");

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "98.1.0",
+	"version": "101.0.0",
 	"sideEffects": false
 }

package/dist/es2019/react/marks/code.js

@@ -3,16 +3,13 @@ import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import AkCode from '@atlaskit/code/inline';
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
-import { useFeatureFlags } from '../../use-feature-flags';
 export const isCodeMark = mark => {
   return mark && mark.type && mark.type.name === 'code';
 };
 export function CodeWithIntl(props) {
-  const featureFlags = useFeatureFlags();
   const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   return /*#__PURE__*/React.createElement(AkCode, _extends({
     className: "code",
-    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: props.codeBidiWarningTooltipEnabled
   }, props.dataAttributes), props.children);

package/dist/es2019/react/nodes/codeBlock/codeBlock.js

@@ -4,7 +4,6 @@ import { injectIntl } from 'react-intl-next';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { CodeBlock as AkCodeBlock } from '@atlaskit/code';
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
-import { useFeatureFlags } from '../../../use-feature-flags';
 import CodeBlockContainer from './components/codeBlockContainer';
 
 function CodeBlock(props) {
@@ -14,7 +13,6 @@ function CodeBlock(props) {
     allowCopyToClipboard = false,
     codeBidiWarningTooltipEnabled
   } = props;
-  const featureFlags = useFeatureFlags();
   const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   const className = [CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, props.className].join(' ');
   return jsx(CodeBlockContainer, {
@@ -24,7 +22,6 @@ function CodeBlock(props) {
   }, jsx(AkCodeBlock, {
     language: language,
     text: text,
-    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
   }));

package/dist/es2019/react/nodes/codeBlock/windowedCodeBlock.js

@@ -3,7 +3,6 @@ import { Fragment, memo } from 'react';
 import { lazy, Suspense } from 'react';
 import { jsx } from '@emotion/react';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { useFeatureFlags } from '../../../use-feature-flags';
 import { useInViewport } from '../../hooks/use-in-viewport';
 import { useBidiWarnings } from '../../hooks/use-bidi-warnings';
 import LightWeightCodeBlock from './components/lightWeightCodeBlock';
@@ -23,7 +22,6 @@ const WindowedCodeBlock = ({
   codeBidiWarningTooltipEnabled,
   className: rootClassName
 }) => {
-  const featureFlags = useFeatureFlags();
   const {
     warningLabel
   } = useBidiWarnings({
@@ -49,7 +47,6 @@ const WindowedCodeBlock = ({
   }, jsx(LazyAkCodeBlock, {
     language: language,
     text: text,
-    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
     codeBidiWarningLabel: warningLabel,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
   })))) : memoizedLightWeightCodeBlock;

package/dist/es2019/react/nodes/date.js

@@ -1,8 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { PureComponent } from 'react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { isPastDate, timestampToString, timestampToTaskContext } from '@atlaskit/editor-common/utils';
 import { injectIntl } from 'react-intl-next';
+import { useTaskItemsFormatContext } from '../../ui/TaskItemsFormatContext';
 
 class Date extends PureComponent {
   render() {
@@ -23,4 +25,19 @@ class Date extends PureComponent {
 
 }
 
-export default injectIntl(Date);
+export const DateComponent = injectIntl(Date);
+
+function DateWithFormatContext(props) {
+  const [isChecked] = useTaskItemsFormatContext();
+  let parentIsIncompleteTask = props.parentIsIncompleteTask;
+
+  if (typeof isChecked !== 'undefined') {
+    parentIsIncompleteTask = !isChecked;
+  }
+
+  return /*#__PURE__*/React.createElement(DateComponent, _extends({}, props, {
+    parentIsIncompleteTask: parentIsIncompleteTask
+  }));
+}
+
+export default DateWithFormatContext;

package/dist/es2019/react/nodes/embedCard.js

@@ -3,7 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useMemo, useContext, useState, useRef } from 'react';
-import { Card, Context as CardContext, EmbedResizeMessageListener } from '@atlaskit/smart-card';
+import { Card, EmbedResizeMessageListener } from '@atlaskit/smart-card';
+import { SmartCardContext } from '@atlaskit/link-provider';
 import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { getPlatform } from '../../utils';
@@ -78,7 +79,7 @@ export default function EmbedCard(props) {
 
   const padding = rendererAppearance === 'full-page' ? FullPagePadding * 2 : 0;
   const [hasPreview, setPreviewAvailableState] = useState(true);
-  const cardContext = useContext(CardContext);
+  const cardContext = useContext(SmartCardContext);
 
   const onResolve = ({
     aspectRatio: resolvedAspectRatio

package/dist/es2019/react/nodes/taskItem.js

@@ -4,6 +4,7 @@ import { PureComponent } from 'react';
 import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
 import TaskItemWithProviders from './task-item-with-providers';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
+import { TaskItemsFormatProvider, TaskItemsFormatConsumer } from '../../ui/TaskItemsFormatContext';
 export default class TaskItem extends PureComponent {
   constructor(props) {
     super(props);
@@ -31,7 +32,7 @@ export default class TaskItem extends PureComponent {
         data: {
           userContext: 'document'
         }
-      }, /*#__PURE__*/React.createElement(TaskItemWithProviders, {
+      }, /*#__PURE__*/React.createElement(TaskItemsFormatProvider, null, /*#__PURE__*/React.createElement(TaskItemsFormatConsumer, null, ([, dispatch]) => /*#__PURE__*/React.createElement(TaskItemWithProviders, {
         objectAri: objectAri,
         taskId: localId,
         isDone: state === 'DONE',
@@ -39,8 +40,11 @@ export default class TaskItem extends PureComponent {
         disabled: disabled,
         taskDecisionProvider: taskDecisionProvider,
         contextIdentifierProvider: contextIdentifierProvider,
-        dataAttributes: dataAttributes
-      }, children));
+        dataAttributes: dataAttributes,
+        onChange: (_, isChecked) => {
+          dispatch(isChecked);
+        }
+      }, children))));
     });
 
     this.providerFactory = props.providers || new ProviderFactory();

package/dist/es2019/ui/MediaCard.js

@@ -115,7 +115,7 @@ export class MediaCardInternal extends Component {
 
     if (rendererContext && rendererContext.adDoc && !nodeIsInCache) {
       getListOfIdentifiersFromDoc(rendererContext.adDoc).forEach(identifier => {
-        if (identifier.mediaItemType === 'file') {
+        if (identifier.mediaItemType === 'file' && identifier.id === id) {
           mediaIdentifierMap.set(identifier.id, { ...identifier,
             collectionName
           });

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

@@ -22,7 +22,6 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics/enums';
 import { PLATFORM, MODE } from '../../analytics/events';
 import AnalyticsContext from '../../analytics/analyticsContext';
 import { Provider as SmartCardStorageProvider } from '../SmartCardStorage';
-import { name, version } from '../../version.json';
 import { BreakoutSSRInlineScript } from './breakout-ssr';
 import { RendererActionsContext, RendererContext as ActionsContext } from '../RendererActionsContext';
 import { ActiveHeaderIdProvider } from '../active-header-id-provider';
@@ -36,6 +35,8 @@ import { ErrorBoundary } from './ErrorBoundary';
 import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
+const packageName = "@atlaskit/renderer";
+const packageVersion = "101.0.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);
@@ -364,8 +365,8 @@ export class Renderer extends PureComponent {
 const RendererWithAnalytics = /*#__PURE__*/React.memo(props => jsx(FabricEditorAnalyticsContext, {
   data: {
     appearance: getAnalyticsAppearance(props.appearance),
-    packageName: name,
-    packageVersion: version,
+    packageName,
+    packageVersion,
     componentName: 'renderer',
     editorSessionId: uuid()
   }

package/dist/es2019/ui/TaskItemsFormatContext/TaskItemsFormatContext.js

@@ -0,0 +1,24 @@
+import React from 'react';
+const defaultValue = [undefined, () => {}];
+export const TaskItemsFormatContext = /*#__PURE__*/React.createContext(defaultValue);
+
+const reducer = (_state, action) => {
+  return action;
+};
+
+export function TaskItemsFormatProvider({
+  children
+}) {
+  const value = React.useReducer(reducer, undefined);
+  return /*#__PURE__*/React.createElement(TaskItemsFormatContext.Provider, {
+    value: value
+  }, children);
+}
+export function useTaskItemsFormatContext() {
+  return React.useContext(TaskItemsFormatContext);
+}
+export function TaskItemsFormatConsumer({
+  children
+}) {
+  return /*#__PURE__*/React.createElement(TaskItemsFormatContext.Consumer, null, children);
+}

package/dist/es2019/ui/TaskItemsFormatContext/index.js

@@ -0,0 +1 @@
+export { TaskItemsFormatProvider, TaskItemsFormatConsumer, useTaskItemsFormatContext } from './TaskItemsFormatContext';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "98.1.0",
+	"version": "101.0.0",
 	"sideEffects": false
 }

package/dist/esm/react/marks/code.js

@@ -3,16 +3,13 @@ import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import AkCode from '@atlaskit/code/inline';
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
-import { useFeatureFlags } from '../../use-feature-flags';
 export var isCodeMark = function isCodeMark(mark) {
   return mark && mark.type && mark.type.name === 'code';
 };
 export function CodeWithIntl(props) {
-  var featureFlags = useFeatureFlags();
   var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   return /*#__PURE__*/React.createElement(AkCode, _extends({
     className: "code",
-    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: props.codeBidiWarningTooltipEnabled
   }, props.dataAttributes), props.children);

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

@@ -4,7 +4,6 @@ import { injectIntl } from 'react-intl-next';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { CodeBlock as AkCodeBlock } from '@atlaskit/code';
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
-import { useFeatureFlags } from '../../../use-feature-flags';
 import CodeBlockContainer from './components/codeBlockContainer';
 
 function CodeBlock(props) {
@@ -13,7 +12,6 @@ function CodeBlock(props) {
       _props$allowCopyToCli = props.allowCopyToClipboard,
       allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli,
       codeBidiWarningTooltipEnabled = props.codeBidiWarningTooltipEnabled;
-  var featureFlags = useFeatureFlags();
   var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   var className = [CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, props.className].join(' ');
   return jsx(CodeBlockContainer, {
@@ -23,7 +21,6 @@ function CodeBlock(props) {
   }, jsx(AkCodeBlock, {
     language: language,
     text: text,
-    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
   }));

package/dist/esm/react/nodes/codeBlock/windowedCodeBlock.js

@@ -6,7 +6,6 @@ import { Fragment, memo } from 'react';
 import { lazy, Suspense } from 'react';
 import { jsx } from '@emotion/react';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { useFeatureFlags } from '../../../use-feature-flags';
 import { useInViewport } from '../../hooks/use-in-viewport';
 import { useBidiWarnings } from '../../hooks/use-bidi-warnings';
 import LightWeightCodeBlock from './components/lightWeightCodeBlock';
@@ -44,7 +43,6 @@ var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
       allowCopyToClipboard = _ref2.allowCopyToClipboard,
       codeBidiWarningTooltipEnabled = _ref2.codeBidiWarningTooltipEnabled,
       rootClassName = _ref2.className;
-  var featureFlags = useFeatureFlags();
 
   var _useBidiWarnings = useBidiWarnings({
     enableWarningTooltip: codeBidiWarningTooltipEnabled
@@ -71,7 +69,6 @@ var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
   }, jsx(LazyAkCodeBlock, {
     language: language,
     text: text,
-    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
     codeBidiWarningLabel: warningLabel,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
   })))) : memoizedLightWeightCodeBlock;

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

@@ -1,3 +1,5 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -13,6 +15,7 @@ import { PureComponent } from 'react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { isPastDate, timestampToString, timestampToTaskContext } from '@atlaskit/editor-common/utils';
 import { injectIntl } from 'react-intl-next';
+import { useTaskItemsFormatContext } from '../../ui/TaskItemsFormatContext';
 
 var Date = /*#__PURE__*/function (_PureComponent) {
   _inherits(Date, _PureComponent);
@@ -46,4 +49,22 @@ var Date = /*#__PURE__*/function (_PureComponent) {
   return Date;
 }(PureComponent);
 
-export default injectIntl(Date);
+export var DateComponent = injectIntl(Date);
+
+function DateWithFormatContext(props) {
+  var _useTaskItemsFormatCo = useTaskItemsFormatContext(),
+      _useTaskItemsFormatCo2 = _slicedToArray(_useTaskItemsFormatCo, 1),
+      isChecked = _useTaskItemsFormatCo2[0];
+
+  var parentIsIncompleteTask = props.parentIsIncompleteTask;
+
+  if (typeof isChecked !== 'undefined') {
+    parentIsIncompleteTask = !isChecked;
+  }
+
+  return /*#__PURE__*/React.createElement(DateComponent, _extends({}, props, {
+    parentIsIncompleteTask: parentIsIncompleteTask
+  }));
+}
+
+export default DateWithFormatContext;

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

@@ -7,7 +7,8 @@ var _templateObject, _templateObject2;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useMemo, useContext, useState, useRef } from 'react';
-import { Card, Context as CardContext, EmbedResizeMessageListener } from '@atlaskit/smart-card';
+import { Card, EmbedResizeMessageListener } from '@atlaskit/smart-card';
+import { SmartCardContext } from '@atlaskit/link-provider';
 import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { getPlatform } from '../../utils';
@@ -80,7 +81,7 @@ export default function EmbedCard(props) {
       hasPreview = _useState6[0],
       setPreviewAvailableState = _useState6[1];
 
-  var cardContext = useContext(CardContext);
+  var cardContext = useContext(SmartCardContext);
 
   var onResolve = function onResolve(_ref) {
     var resolvedAspectRatio = _ref.aspectRatio;

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

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -15,6 +16,7 @@ import { PureComponent } from 'react';
 import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
 import TaskItemWithProviders from './task-item-with-providers';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
+import { TaskItemsFormatProvider, TaskItemsFormatConsumer } from '../../ui/TaskItemsFormatContext';
 
 var TaskItem = /*#__PURE__*/function (_PureComponent) {
   _inherits(TaskItem, _PureComponent);
@@ -48,16 +50,24 @@ var TaskItem = /*#__PURE__*/function (_PureComponent) {
         data: {
           userContext: 'document'
         }
-      }, /*#__PURE__*/React.createElement(TaskItemWithProviders, {
-        objectAri: objectAri,
-        taskId: localId,
-        isDone: state === 'DONE',
-        isRenderer: true,
-        disabled: disabled,
-        taskDecisionProvider: taskDecisionProvider,
-        contextIdentifierProvider: contextIdentifierProvider,
-        dataAttributes: dataAttributes
-      }, children));
+      }, /*#__PURE__*/React.createElement(TaskItemsFormatProvider, null, /*#__PURE__*/React.createElement(TaskItemsFormatConsumer, null, function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            dispatch = _ref2[1];
+
+        return /*#__PURE__*/React.createElement(TaskItemWithProviders, {
+          objectAri: objectAri,
+          taskId: localId,
+          isDone: state === 'DONE',
+          isRenderer: true,
+          disabled: disabled,
+          taskDecisionProvider: taskDecisionProvider,
+          contextIdentifierProvider: contextIdentifierProvider,
+          dataAttributes: dataAttributes,
+          onChange: function onChange(_, isChecked) {
+            dispatch(isChecked);
+          }
+        }, children);
+      })));
     });
 
     _this.providerFactory = props.providers || new ProviderFactory();

package/dist/esm/ui/MediaCard.js

@@ -191,7 +191,7 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
 
                 if (rendererContext && rendererContext.adDoc && !nodeIsInCache) {
                   getListOfIdentifiersFromDoc(rendererContext.adDoc).forEach(function (identifier) {
-                    if (identifier.mediaItemType === 'file') {
+                    if (identifier.mediaItemType === 'file' && identifier.id === id) {
                       mediaIdentifierMap.set(identifier.id, _objectSpread(_objectSpread({}, identifier), {}, {
                         collectionName: collectionName
                       }));

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

@@ -36,7 +36,6 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics/enums';
 import { PLATFORM, MODE } from '../../analytics/events';
 import AnalyticsContext from '../../analytics/analyticsContext';
 import { Provider as SmartCardStorageProvider } from '../SmartCardStorage';
-import { name, version } from '../../version.json';
 import { BreakoutSSRInlineScript } from './breakout-ssr';
 import { RendererActionsContext, RendererContext as ActionsContext } from '../RendererActionsContext';
 import { ActiveHeaderIdProvider } from '../active-header-id-provider';
@@ -50,6 +49,8 @@ import { ErrorBoundary } from './ErrorBoundary';
 import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
+var packageName = "@atlaskit/renderer";
+var packageVersion = "101.0.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
 
@@ -396,8 +397,8 @@ var RendererWithAnalytics = /*#__PURE__*/React.memo(function (props) {
   return jsx(FabricEditorAnalyticsContext, {
     data: {
       appearance: getAnalyticsAppearance(props.appearance),
-      packageName: name,
-      packageVersion: version,
+      packageName: packageName,
+      packageVersion: packageVersion,
       componentName: 'renderer',
       editorSessionId: uuid()
     }

package/dist/esm/ui/TaskItemsFormatContext/TaskItemsFormatContext.js

@@ -0,0 +1,22 @@
+import React from 'react';
+var defaultValue = [undefined, function () {}];
+export var TaskItemsFormatContext = /*#__PURE__*/React.createContext(defaultValue);
+
+var reducer = function reducer(_state, action) {
+  return action;
+};
+
+export function TaskItemsFormatProvider(_ref) {
+  var children = _ref.children;
+  var value = React.useReducer(reducer, undefined);
+  return /*#__PURE__*/React.createElement(TaskItemsFormatContext.Provider, {
+    value: value
+  }, children);
+}
+export function useTaskItemsFormatContext() {
+  return React.useContext(TaskItemsFormatContext);
+}
+export function TaskItemsFormatConsumer(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(TaskItemsFormatContext.Consumer, null, children);
+}

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

@@ -0,0 +1 @@
+export { TaskItemsFormatProvider, TaskItemsFormatConsumer, useTaskItemsFormatContext } from './TaskItemsFormatContext';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "98.1.0",
+	"version": "101.0.0",
 	"sideEffects": false
 }

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

@@ -4,7 +4,8 @@ export interface Props {
     timestamp: string;
     parentIsIncompleteTask?: boolean;
 }
-declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+export declare const DateComponent: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
 };
-export default _default;
+declare function DateWithFormatContext(props: Props): JSX.Element;
+export default DateWithFormatContext;

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

@@ -28,7 +28,7 @@ declare const TaskList: React.ComponentType<import("./taskList").Props> & Loadab
 declare const TaskItem: React.ComponentType<import("../types").NodeProps<import("./taskItem").Props>> & Loadable.LoadableComponent;
 declare const DecisionList: React.ComponentType<import("./decisionList").Props> & Loadable.LoadableComponent;
 declare const DecisionItem: React.ComponentType<import("../types").NodeMeta> & Loadable.LoadableComponent;
-declare const Date: React.ComponentType<import("react-intl-next").WithIntlProps<import("./date").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent;
+declare const Date: React.ComponentType<import("./date").Props> & Loadable.LoadableComponent;
 declare const Status: React.ComponentType<import("./status").Props> & Loadable.LoadableComponent;
 declare const Emoji: React.ComponentType<import("./emoji").EmojiProps> & Loadable.LoadableComponent;
 declare const Panel: React.ComponentType<import("./panel").Props> & Loadable.LoadableComponent;

package/dist/types/renderer-context.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 export declare type FeatureFlags = {
-    codeBidiWarnings?: boolean;
     showHoverPreview?: boolean;
 };
 export declare type RendererContextProps = {

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

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+export declare type TaskItemsDone = boolean | undefined;
+export declare type TaskItemsStateContext = [
+    TaskItemsDone,
+    React.Dispatch<TaskItemsFormatReducerAction>
+];
+export declare const TaskItemsFormatContext: React.Context<TaskItemsStateContext>;
+export declare type TaskItemsFormatReducerAction = boolean | undefined;
+export declare function TaskItemsFormatProvider({ children }: {
+    children: ReactNode;
+}): JSX.Element;
+export declare function useTaskItemsFormatContext(): TaskItemsStateContext;
+export declare function TaskItemsFormatConsumer({ children, }: {
+    children: ([isChecked, dispatch]: TaskItemsStateContext) => ReactNode;
+}): JSX.Element;

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

@@ -0,0 +1,2 @@
+export { TaskItemsFormatProvider, TaskItemsFormatConsumer, useTaskItemsFormatContext, } from './TaskItemsFormatContext';
+export type { TaskItemsDone, TaskItemsFormatReducerAction, } from './TaskItemsFormatContext';

package/dist/types/ui/renderer-props.d.ts

@@ -39,8 +39,6 @@ export interface RendererProps {
     adfStage?: ADFStage;
     disableHeadingIDs?: boolean;
     disableActions?: boolean;
-    /** @deprecated  [ED-14507] allowDynamicTextSizing is no longer in use */
-    allowDynamicTextSizing?: boolean;
     allowHeadingAnchorLinks?: HeadingAnchorLinksProps;
     allowPlaceholderText?: boolean;
     maxHeight?: number;

package/docs/0-intro.tsx

@@ -31,6 +31,73 @@ ${(
   />
 )}
 
+## Best practices to prevent performance issues
+
+### Avoid unnecessary props changes
+
+As any React component, if props change then it will likely result in a re-render.
+
+Unnecessary props changes will trigger component reconciliation and potential re-renders. This has caused render performance degradation for Editor and Renderer components in the past.
+
+Some common examples of props causing re-renders:
+
+${code`
+
+  // ❌ function returns new object each time
+  getEventHandlers = () => ({
+      ...defaultHandlers,
+      newHander: () => { ... }
+  });
+
+  // ❌ creates new function each time
+  onRenderComplete = () => {
+    // ...
+  }
+
+  return (
+  <ReactRenderer
+    // ❌ passes new object each time
+    media={{
+      allowLinking: true,
+    }}
+    // ❌ called function returns new object each time
+    eventHandlers={this.getEventHandlers()}
+    // ❌ passes new function each time
+    onComplete={onRenderComplete}
+    // ❌ creates a new function each time
+    onError={() => { ... }}
+    //...
+  />);
+`}
+
+Most of these can be generally avoided by following these best practices:
+- extracting static objects to module level constants
+- avoid passing brand new objects and anonymous functions as props upon every render
+- memoising props via helpers like [useMemo()](https://reactjs.org/docs/hooks-reference.html#usememo)
+- use [useCallback()](https://reactjs.org/docs/hooks-reference.html#usecallback) for callbacks where applicable
+
+### Other best practices for React
+
+Consider using [windowing techniques](https://reactjs.org/docs/optimizing-performance.html#virtualize-long-lists) if possible when rendering many Renderers (eg. viewing comments).
+
+For Renderer it is important to avoid [redundant reconciliation](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) as it can involve rendering many nested React components, depending on the document structure.
+
+Check out the React docs for more examples of [optimizations](https://reactjs.org/docs/hooks-faq.html#performance-optimizations).
+
+### Avoid duplicated dependencies
+
+Ensure you have only have *one* version of Renderer sub-dependencies (adf-schema, editor-common, prosemirror-model, etc) in your output bundles.
+
+This has caused bugs and crashes on production in the past.
+
+The issue can be avoided by running de-duplication on the lock file or using resolutions for yarn/overrides for npm on the package.json.
+
+### Use correct peer dependencies
+
+Make sure to use correct peer dependencies versions!
+
+For example, using newer versions of React or react-dom can cause unexpected issues with Renderer.
+
 ## Using transformers with the renderer
 You will need to use a transformer to convert your own storage format into the ADF before you pass it to the renderer.
 We have provided helper utility to simplify this process:
@@ -64,9 +131,9 @@ ReactDOM.render(<ReactRenderer document={DOCUMENT} truncated={true} maxHeight={7
 
 ${(
   <Example
-    Component={require('../examples/15-truncated.tsx').default}
+    Component={require('../examples/15-truncated').default}
     title="Truncated"
-    source={require('!!raw-loader!../examples/15-truncated.tsx')}
+    source={require('!!raw-loader!../examples/15-truncated')}
   />
 )}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "98.1.0",
+  "version": "101.0.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,23 +24,24 @@
     }
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^23.2.0",
+    "@atlaskit/adf-schema": "^23.3.0",
     "@atlaskit/adf-utils": "^17.1.0",
     "@atlaskit/analytics-listeners": "^8.3.0",
     "@atlaskit/analytics-namespaced-context": "^6.5.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/code": "^14.3.0",
-    "@atlaskit/editor-common": "^69.0.0",
+    "@atlaskit/editor-common": "^69.1.0",
     "@atlaskit/editor-json-transformer": "^8.7.0",
     "@atlaskit/editor-shared-styles": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/media-card": "^74.0.0",
+    "@atlaskit/media-card": "^74.1.0",
     "@atlaskit/media-client": "^17.1.0",
-    "@atlaskit/media-common": "^2.15.0",
+    "@atlaskit/media-common": "^2.16.0",
     "@atlaskit/media-filmstrip": "^45.0.0",
     "@atlaskit/media-ui": "^22.1.0",
     "@atlaskit/media-viewer": "^47.0.0",
+    "@atlaskit/smart-card": "^21.0.0",
     "@atlaskit/status": "^1.1.0",
     "@atlaskit/task-decision": "^17.4.0",
     "@atlaskit/theme": "^12.1.0",
@@ -58,8 +59,8 @@
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
+    "@atlaskit/link-provider": "^1.0.0",
     "@atlaskit/media-core": "^33.0.1",
-    "@atlaskit/smart-card": "^20.0.3",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "styled-components": "^3.2.6"
@@ -69,20 +70,20 @@
     "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/css-reset": "^6.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^169.1.0",
+    "@atlaskit/editor-core": "^172.0.0",
     "@atlaskit/editor-test-helpers": "^17.1.0",
+    "@atlaskit/link-provider": "^1.0.0",
     "@atlaskit/logo": "^13.8.0",
     "@atlaskit/media-core": "^33.0.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/mention": "^21.0.0",
     "@atlaskit/navigation-next": "^9.0.0",
-    "@atlaskit/profilecard": "^16.10.0",
+    "@atlaskit/profilecard": "^16.11.0",
     "@atlaskit/radio": "^5.3.0",
     "@atlaskit/range": "^6.0.0",
-    "@atlaskit/smart-card": "^20.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/util-data-test": "^17.4.0",
+    "@atlaskit/util-data-test": "^17.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",