@atlaskit/renderer 81.0.0 → 82.1.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @atlaskit/renderer
 
+## 82.1.0
+
+### Minor Changes
+
+- [`c80c71b537d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c80c71b537d) - [ux] ED-13860 add bidi warning decorations to code components
+
+### Patch Changes
+
+- Updated dependencies
+
+## 82.0.0
+
+### Major Changes
+
+- [`3c5548e50da`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3c5548e50da) - [ux] Introducing new Media Inline component to renderer
+
+### Minor Changes
+
+- [`971845eac0d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/971845eac0d) - CETI-96 Added new rule to emoji to solve the duplicate icon issue when we copy from renderer
+
+### Patch Changes
+
+- [`f897443ad45`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f897443ad45) - Revert AK-279
+- [`87865d3284f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87865d3284f) - CETI-122 Fix Rendering of hybrid renderer when the prop UNSAFE_allowCustomPanels changed.
+- [`a554946e674`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a554946e674) - Skipping flakey tests to unblock the weasal release
+- [`33bca2a18bb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/33bca2a18bb) - Skipping a flaky test to unblock the weasal release
+- Updated dependencies
+
+## 81.1.1
+
+### Patch Changes
+
+- [`b85e7ce12cd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b85e7ce12cd) - Internal upgrade of memoize-one to 6.0.0
+
+## 81.1.0
+
+### Minor Changes
+
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - CETI-72 Web: Copy from renderer loses custom panel attributes
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - AK-279 Moved copy button outside of heading, that made heading accessible
+- [`6840e64d105`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6840e64d105) - CETI-124: Revert panel content wrapper from span to div
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 81.0.0
 
 ### Minor Changes

package/dist/cjs/react/index.js

@@ -220,6 +220,9 @@ var ReactSerializer = /*#__PURE__*/function () {
         case 'mediaGroup':
           return this.getMediaGroupProps(node);
 
+        case 'mediaInline':
+          return this.getMediaInlineProps(node);
+
         case 'mediaSingle':
           return this.getMediaSingleProps(node, path);
 
@@ -478,6 +481,11 @@ var ReactSerializer = /*#__PURE__*/function () {
         enableDownloadButton: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.enableDownloadButton
       });
     }
+  }, {
+    key: "getMediaInlineProps",
+    value: function getMediaInlineProps(node) {
+      return _objectSpread({}, this.getProps(node));
+    }
   }, {
     key: "getTaskItemProps",
     value: function getTaskItemProps(node) {

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

@@ -5,16 +5,31 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Code;
+exports.CodeWithIntl = CodeWithIntl;
+exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactIntl = require("react-intl");
+
 var _inline = _interopRequireDefault(require("@atlaskit/code/inline"));
 
-function Code(props) {
+var _messages = require("@atlaskit/editor-common/messages");
+
+var _useFeatureFlags = require("../../use-feature-flags");
+
+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"
+    className: "code",
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel
   }, props.dataAttributes), props.children);
-}
+}
+
+var _default = (0, _reactIntl.injectIntl)(CodeWithIntl);
+
+exports.default = _default;

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

@@ -11,6 +11,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactIntl = require("react-intl");
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _code = require("@atlaskit/code");
@@ -23,6 +25,10 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _messages = require("@atlaskit/editor-common/messages");
+
+var _useFeatureFlags = require("../../use-feature-flags");
+
 var _codeBlockCopyButton = _interopRequireDefault(require("./codeBlockCopyButton"));
 
 var _templateObject;
@@ -32,6 +38,8 @@ function CodeBlock(props) {
       language = props.language,
       _props$allowCopyToCli = props.allowCopyToClipboard,
       allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli;
+  var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
+  var codeBidiWarningLabel = props.intl.formatMessage(_messages.codeBidiWarningMessages.label);
   var className = ['code-block', props.className].join(' ');
   return /*#__PURE__*/_react.default.createElement("div", {
     className: className
@@ -39,11 +47,15 @@ function CodeBlock(props) {
     content: text
   }) : null, /*#__PURE__*/_react.default.createElement(_code.CodeBlock, {
     language: language,
-    text: text
+    text: text,
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel
   }));
 }
 
-var _default = (0, _styledComponents.default)(CodeBlock)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  tab-size: 4;\n  [data-ds--code--code-block] {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, scroll, scroll;\n    background-position: 100% 0, 100% 0, 0 0;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
+var IntlCodeBlock = (0, _reactIntl.injectIntl)(CodeBlock);
+
+var _default = (0, _styledComponents.default)(IntlCodeBlock)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  tab-size: 4;\n  [data-ds--code--code-block] {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, scroll, scroll;\n    background-position: 100% 0, 100% 0, 0 0;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
   background: (0, _components.themed)({
     light: _colors.N20,
     dark: _colors.DN50

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

@@ -162,7 +162,7 @@ Object.defineProperty(exports, "EmbedCard", {
     return _embedCard.default;
   }
 });
-exports.TaskItem = exports.Status = exports.Mention = exports.MediaGroup = exports.Media = exports.InlineCard = exports.Expand = exports.Emoji = exports.DecisionItem = exports.Date = exports.CodeBlock = exports.BlockCard = exports.isEmojiDoc = exports.isTextWrapper = exports.isText = exports.mergeTextNodes = exports.toReact = exports.nodeToReact = void 0;
+exports.TaskItem = exports.Status = exports.Mention = exports.MediaInline = exports.MediaGroup = exports.Media = exports.InlineCard = exports.Expand = exports.Emoji = exports.DecisionItem = exports.Date = exports.CodeBlock = exports.BlockCard = exports.isEmojiDoc = exports.isTextWrapper = exports.isText = exports.mergeTextNodes = exports.toReact = exports.nodeToReact = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -354,6 +354,19 @@ var MediaGroup = (0, _reactLoadable.default)({
   }
 });
 exports.MediaGroup = MediaGroup;
+var MediaInline = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./mediaInline'));
+    }).then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
+exports.MediaInline = MediaInline;
 var Mention = (0, _reactLoadable.default)({
   loader: function loader() {
     return Promise.resolve().then(function () {
@@ -402,6 +415,7 @@ var nodeToReact = {
   listItem: _listItem.default,
   media: Media,
   mediaGroup: MediaGroup,
+  mediaInline: MediaInline,
   mediaSingle: _mediaSingle.default,
   mention: Mention,
   orderedList: _orderedList.default,

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

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RenderMediaInline = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mediaCard = require("@atlaskit/media-card");
+
+var _editorCommon = require("@atlaskit/editor-common");
+
+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; }
+
+var RenderMediaInline = function RenderMediaInline(props) {
+  var mediaProvider = props.mediaProvider;
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      viewMediaClientConfigState = _useState2[0],
+      setViewMediaClientConfigState = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    updateViewMediaClientConfigState(mediaProvider);
+  }, [mediaProvider]);
+
+  var updateViewMediaClientConfigState = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaProvider) {
+      var mediaClientConfig;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!mediaProvider) {
+                _context.next = 5;
+                break;
+              }
+
+              _context.next = 3;
+              return mediaProvider;
+
+            case 3:
+              mediaClientConfig = _context.sent;
+              setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function updateViewMediaClientConfigState(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
+    identifier: props.identifier,
+    shouldOpenMediaViewer: true,
+    mediaClientConfig: viewMediaClientConfigState
+  });
+};
+
+exports.RenderMediaInline = RenderMediaInline;
+
+var MediaInline = function MediaInline(props) {
+  var collection = props.collection,
+      id = props.id,
+      providers = props.providers;
+  var identifier = {
+    id: id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
+    providers: ['mediaProvider'],
+    providerFactory: providers,
+    renderNode: function renderNode(providers) {
+      var mediaProvider = providers.mediaProvider;
+      return /*#__PURE__*/_react.default.createElement(RenderMediaInline, {
+        identifier: identifier,
+        mediaProvider: mediaProvider
+      });
+    }
+  }));
+};
+
+var _default = MediaInline;
+exports.default = _default;

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

@@ -93,7 +93,7 @@ var Panel = function Panel(props) {
     var icon = getIcon();
 
     if (icon) {
-      return /*#__PURE__*/_react.default.createElement("span", {
+      return /*#__PURE__*/_react.default.createElement("div", {
         className: _editorCommon.PanelSharedCssClassName.icon
       }, icon);
     }
@@ -102,6 +102,8 @@ var Panel = function Panel(props) {
   return /*#__PURE__*/_react.default.createElement(PanelStyled, {
     className: _editorCommon.PanelSharedCssClassName.prefix,
     "data-panel-type": panelType,
+    "data-panel-color": panelColor,
+    "data-panel-icon": panelIcon,
     backgroundColor: panelColor
   }, renderIcon(), /*#__PURE__*/_react.default.createElement("div", {
     className: _editorCommon.PanelSharedCssClassName.content

package/dist/cjs/react/nodes/table/colgroup.js

@@ -113,12 +113,12 @@ var Colgroup = function Colgroup(props) {
     }
   } // scaling down
   else if (renderWidth < tableWidth) {
-      scaleDownPercent = calcScalePercent({
-        renderWidth: renderWidth,
-        tableWidth: tableWidth,
-        maxScale: MAX_SCALING_PERCENT
-      });
-    }
+    scaleDownPercent = calcScalePercent({
+      renderWidth: renderWidth,
+      tableWidth: tableWidth,
+      maxScale: MAX_SCALING_PERCENT
+    });
+  }
 
   return /*#__PURE__*/_react.default.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/_react.default.createElement("col", {
     style: {

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

@@ -223,7 +223,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       var nextMedia = nextProps.media || {};
       var media = this.props.media || {};
 
-      if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
+      if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.UNSAFE_allowCustomPanels !== this.props.UNSAFE_allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
         this.serializer = new _.ReactSerializer(this.deriveSerializerProps(nextProps));
       }
     }

package/dist/cjs/version.json

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

package/dist/es2019/react/index.js

@@ -192,6 +192,9 @@ export default class ReactSerializer {
       case 'mediaGroup':
         return this.getMediaGroupProps(node);
 
+      case 'mediaInline':
+        return this.getMediaInlineProps(node);
+
       case 'mediaSingle':
         return this.getMediaSingleProps(node, path);
 
@@ -410,6 +413,11 @@ export default class ReactSerializer {
     };
   }
 
+  getMediaInlineProps(node) {
+    return { ...this.getProps(node)
+    };
+  }
+
   getTaskItemProps(node, path = []) {
     return { ...this.getProps(node, path),
       disabled: this.disableActions

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

@@ -1,8 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { injectIntl } from 'react-intl';
 import AkCode from '@atlaskit/code/inline';
-export default function Code(props) {
+import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
+import { useFeatureFlags } from '../../use-feature-flags';
+export function CodeWithIntl(props) {
+  const featureFlags = useFeatureFlags();
+  const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   return /*#__PURE__*/React.createElement(AkCode, _extends({
-    className: "code"
+    className: "code",
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel
   }, props.dataAttributes), props.children);
-}
+}
+export default injectIntl(CodeWithIntl);

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

@@ -1,10 +1,13 @@
 import React from 'react';
+import { injectIntl } from 'react-intl';
 import styled from 'styled-components';
 import { CodeBlock as AkCodeBlock } from '@atlaskit/code';
 import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, DN50 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
+import { useFeatureFlags } from '../../use-feature-flags';
 import CopyButton from './codeBlockCopyButton';
 
 function CodeBlock(props) {
@@ -13,6 +16,8 @@ function CodeBlock(props) {
     language,
     allowCopyToClipboard = false
   } = props;
+  const featureFlags = useFeatureFlags();
+  const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   const className = ['code-block', props.className].join(' ');
   return /*#__PURE__*/React.createElement("div", {
     className: className
@@ -20,11 +25,14 @@ function CodeBlock(props) {
     content: text
   }) : null, /*#__PURE__*/React.createElement(AkCodeBlock, {
     language: language,
-    text: text
+    text: text,
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel
   }));
 }
 
-export default styled(CodeBlock)`
+const IntlCodeBlock = injectIntl(CodeBlock);
+export default styled(IntlCodeBlock)`
   tab-size: 4;
   [data-ds--code--code-block] {
     font-size: ${relativeFontSizeToBase16(fontSize())};

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

@@ -85,6 +85,12 @@ const MediaGroup = Loadable({
   './mediaGroup').then(mod => mod.default),
   loading: () => null
 });
+const MediaInline = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_renderer-node_MediaInline" */
+  './mediaInline').then(mod => mod.default),
+  loading: () => null
+});
 const Mention = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_renderer-node_Mention" */
@@ -119,6 +125,7 @@ export const nodeToReact = {
   listItem: ListItem,
   media: Media,
   mediaGroup: MediaGroup,
+  mediaInline: MediaInline,
   mediaSingle: MediaSingle,
   mention: Mention,
   orderedList: OrderedList,
@@ -278,4 +285,4 @@ const isEmojiBlock = pnode => {
   return emojiCount > 0;
 };
 
-export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };
+export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };

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

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { MediaInlineCard } from '@atlaskit/media-card';
+import { WithProviders } from '@atlaskit/editor-common';
+export const RenderMediaInline = props => {
+  const {
+    mediaProvider
+  } = props;
+  const [viewMediaClientConfigState, setViewMediaClientConfigState] = useState({});
+  useEffect(() => {
+    updateViewMediaClientConfigState(mediaProvider);
+  }, [mediaProvider]);
+
+  const updateViewMediaClientConfigState = async mediaProvider => {
+    if (mediaProvider) {
+      const mediaClientConfig = await mediaProvider;
+      setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(MediaInlineCard, {
+    identifier: props.identifier,
+    shouldOpenMediaViewer: true,
+    mediaClientConfig: viewMediaClientConfigState
+  });
+};
+
+const MediaInline = props => {
+  const {
+    collection,
+    id,
+    providers
+  } = props;
+  const identifier = {
+    id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(WithProviders, {
+    providers: ['mediaProvider'],
+    providerFactory: providers,
+    renderNode: providers => {
+      const {
+        mediaProvider
+      } = providers;
+      return /*#__PURE__*/React.createElement(RenderMediaInline, {
+        identifier: identifier,
+        mediaProvider: mediaProvider
+      });
+    }
+  }));
+};
+
+export default MediaInline;

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

@@ -77,7 +77,7 @@ const Panel = props => {
     const icon = getIcon();
 
     if (icon) {
-      return /*#__PURE__*/React.createElement("span", {
+      return /*#__PURE__*/React.createElement("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }
@@ -86,6 +86,8 @@ const Panel = props => {
   return /*#__PURE__*/React.createElement(PanelStyled, {
     className: PanelSharedCssClassName.prefix,
     "data-panel-type": panelType,
+    "data-panel-color": panelColor,
+    "data-panel-icon": panelIcon,
     backgroundColor: panelColor
   }, renderIcon(), /*#__PURE__*/React.createElement("div", {
     className: PanelSharedCssClassName.content

package/dist/es2019/react/nodes/table/colgroup.js

@@ -98,12 +98,12 @@ export const Colgroup = props => {
     }
   } // scaling down
   else if (renderWidth < tableWidth) {
-      scaleDownPercent = calcScalePercent({
-        renderWidth,
-        tableWidth,
-        maxScale: MAX_SCALING_PERCENT
-      });
-    }
+    scaleDownPercent = calcScalePercent({
+      renderWidth,
+      tableWidth,
+      maxScale: MAX_SCALING_PERCENT
+    });
+  }
 
   return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
     style: {

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

@@ -147,7 +147,7 @@ export class Renderer extends PureComponent {
     const nextMedia = nextProps.media || {};
     const media = this.props.media || {};
 
-    if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
+    if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.UNSAFE_allowCustomPanels !== this.props.UNSAFE_allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
       this.serializer = new ReactSerializer(this.deriveSerializerProps(nextProps));
     }
   }

package/dist/es2019/version.json

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

package/dist/esm/react/index.js

@@ -212,6 +212,9 @@ var ReactSerializer = /*#__PURE__*/function () {
         case 'mediaGroup':
           return this.getMediaGroupProps(node);
 
+        case 'mediaInline':
+          return this.getMediaInlineProps(node);
+
         case 'mediaSingle':
           return this.getMediaSingleProps(node, path);
 
@@ -470,6 +473,11 @@ var ReactSerializer = /*#__PURE__*/function () {
         enableDownloadButton: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.enableDownloadButton
       });
     }
+  }, {
+    key: "getMediaInlineProps",
+    value: function getMediaInlineProps(node) {
+      return _objectSpread({}, this.getProps(node));
+    }
   }, {
     key: "getTaskItemProps",
     value: function getTaskItemProps(node) {

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

@@ -1,8 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { injectIntl } from 'react-intl';
 import AkCode from '@atlaskit/code/inline';
-export default function Code(props) {
+import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
+import { useFeatureFlags } from '../../use-feature-flags';
+export function CodeWithIntl(props) {
+  var featureFlags = useFeatureFlags();
+  var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   return /*#__PURE__*/React.createElement(AkCode, _extends({
-    className: "code"
+    className: "code",
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel
   }, props.dataAttributes), props.children);
-}
+}
+export default injectIntl(CodeWithIntl);

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

@@ -3,12 +3,15 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import React from 'react';
+import { injectIntl } from 'react-intl';
 import styled from 'styled-components';
 import { CodeBlock as AkCodeBlock } from '@atlaskit/code';
 import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, DN50 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
+import { useFeatureFlags } from '../../use-feature-flags';
 import CopyButton from './codeBlockCopyButton';
 
 function CodeBlock(props) {
@@ -16,6 +19,8 @@ function CodeBlock(props) {
       language = props.language,
       _props$allowCopyToCli = props.allowCopyToClipboard,
       allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli;
+  var featureFlags = useFeatureFlags();
+  var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   var className = ['code-block', props.className].join(' ');
   return /*#__PURE__*/React.createElement("div", {
     className: className
@@ -23,11 +28,14 @@ function CodeBlock(props) {
     content: text
   }) : null, /*#__PURE__*/React.createElement(AkCodeBlock, {
     language: language,
-    text: text
+    text: text,
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel
   }));
 }
 
-export default styled(CodeBlock)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  tab-size: 4;\n  [data-ds--code--code-block] {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, scroll, scroll;\n    background-position: 100% 0, 100% 0, 0 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), overflowShadow({
+var IntlCodeBlock = injectIntl(CodeBlock);
+export default styled(IntlCodeBlock)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  tab-size: 4;\n  [data-ds--code--code-block] {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, scroll, scroll;\n    background-position: 100% 0, 100% 0, 0 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), overflowShadow({
   background: themed({
     light: N20,
     dark: DN50

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

@@ -145,6 +145,18 @@ var MediaGroup = Loadable({
     return null;
   }
 });
+var MediaInline = Loadable({
+  loader: function loader() {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_renderer-node_MediaInline" */
+    './mediaInline').then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
 var Mention = Loadable({
   loader: function loader() {
     return import(
@@ -191,6 +203,7 @@ export var nodeToReact = {
   listItem: ListItem,
   media: Media,
   mediaGroup: MediaGroup,
+  mediaInline: MediaInline,
   mediaSingle: MediaSingle,
   mention: Mention,
   orderedList: OrderedList,
@@ -354,4 +367,4 @@ var isEmojiBlock = function isEmojiBlock(pnode) {
   return emojiCount > 0;
 };
 
-export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };
+export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };

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

@@ -0,0 +1,80 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import { MediaInlineCard } from '@atlaskit/media-card';
+import { WithProviders } from '@atlaskit/editor-common';
+export var RenderMediaInline = function RenderMediaInline(props) {
+  var mediaProvider = props.mediaProvider;
+
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      viewMediaClientConfigState = _useState2[0],
+      setViewMediaClientConfigState = _useState2[1];
+
+  useEffect(function () {
+    updateViewMediaClientConfigState(mediaProvider);
+  }, [mediaProvider]);
+
+  var updateViewMediaClientConfigState = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaProvider) {
+      var mediaClientConfig;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!mediaProvider) {
+                _context.next = 5;
+                break;
+              }
+
+              _context.next = 3;
+              return mediaProvider;
+
+            case 3:
+              mediaClientConfig = _context.sent;
+              setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function updateViewMediaClientConfigState(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement(MediaInlineCard, {
+    identifier: props.identifier,
+    shouldOpenMediaViewer: true,
+    mediaClientConfig: viewMediaClientConfigState
+  });
+};
+
+var MediaInline = function MediaInline(props) {
+  var collection = props.collection,
+      id = props.id,
+      providers = props.providers;
+  var identifier = {
+    id: id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(WithProviders, {
+    providers: ['mediaProvider'],
+    providerFactory: providers,
+    renderNode: function renderNode(providers) {
+      var mediaProvider = providers.mediaProvider;
+      return /*#__PURE__*/React.createElement(RenderMediaInline, {
+        identifier: identifier,
+        mediaProvider: mediaProvider
+      });
+    }
+  }));
+};
+
+export default MediaInline;

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

@@ -72,7 +72,7 @@ var Panel = function Panel(props) {
     var icon = getIcon();
 
     if (icon) {
-      return /*#__PURE__*/React.createElement("span", {
+      return /*#__PURE__*/React.createElement("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }
@@ -81,6 +81,8 @@ var Panel = function Panel(props) {
   return /*#__PURE__*/React.createElement(PanelStyled, {
     className: PanelSharedCssClassName.prefix,
     "data-panel-type": panelType,
+    "data-panel-color": panelColor,
+    "data-panel-icon": panelIcon,
     backgroundColor: panelColor
   }, renderIcon(), /*#__PURE__*/React.createElement("div", {
     className: PanelSharedCssClassName.content

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

@@ -97,12 +97,12 @@ export var Colgroup = function Colgroup(props) {
     }
   } // scaling down
   else if (renderWidth < tableWidth) {
-      scaleDownPercent = calcScalePercent({
-        renderWidth: renderWidth,
-        tableWidth: tableWidth,
-        maxScale: MAX_SCALING_PERCENT
-      });
-    }
+    scaleDownPercent = calcScalePercent({
+      renderWidth: renderWidth,
+      tableWidth: tableWidth,
+      maxScale: MAX_SCALING_PERCENT
+    });
+  }
 
   return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
     style: {

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

@@ -174,7 +174,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
       var nextMedia = nextProps.media || {};
       var media = this.props.media || {};
 
-      if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
+      if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.UNSAFE_allowCustomPanels !== this.props.UNSAFE_allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
         this.serializer = new ReactSerializer(this.deriveSerializerProps(nextProps));
       }
     }

package/dist/esm/version.json

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

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

@@ -88,6 +88,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private getMediaProps;
     private getEmbedCardProps;
     private getMediaGroupProps;
+    private getMediaInlineProps;
     private getTaskItemProps;
     private getHardBreakProps;
     private getCodeBlockProps;

package/dist/types/react/marks/code.d.ts

@@ -1,2 +1,8 @@
+import React from 'react';
+import { InjectedIntlProps } from 'react-intl';
 import type { MarkProps } from '../types';
-export default function Code(props: MarkProps): JSX.Element;
+export declare function CodeWithIntl(props: MarkProps & InjectedIntlProps): JSX.Element;
+declare const _default: React.ComponentClass<import("../types").MarkMeta, any> & {
+    WrappedComponent: ReactIntl.ComponentConstructor<import("../types").MarkMeta & InjectedIntlProps>;
+};
+export default _default;

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

@@ -60,6 +60,7 @@ declare const BlockCard: (React.ComponentClass<{
 }> & Loadable.LoadableComponent);
 declare const Media: (React.ComponentClass<import("./media").MediaProps, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./media").MediaProps> & Loadable.LoadableComponent);
 declare const MediaGroup: (React.ComponentClass<import("./mediaGroup").MediaGroupProps, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent);
+declare const MediaInline: (React.ComponentClass<import("./mediaInline").MediaInlineProps, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./mediaInline").MediaInlineProps> & Loadable.LoadableComponent);
 declare const Mention: (React.ComponentClass<import("./mention").Props, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./mention").Props> & Loadable.LoadableComponent);
 declare const Expand: (React.ComponentClass<import("../../ui/Expand").ExpandProps, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("../../ui/Expand").ExpandProps> & Loadable.LoadableComponent);
 export declare const nodeToReact: {
@@ -93,5 +94,5 @@ export declare function isTextNode(node: Node | Mark): node is Node;
  * whose content satisfies the condition for an emoji block
  */
 export declare const isEmojiDoc: (doc: Fragment) => boolean;
-export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard, };
+export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard, };
 export type { BodiedExtensionProps, ExtensionProps, InlineExtensionProps };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ProviderFactory } from '@atlaskit/editor-common';
+import { FileIdentifier } from '@atlaskit/media-client';
+import { MediaProvider } from '../../ui/MediaCard';
+export declare type RenderMediaInlineProps = {
+    identifier: FileIdentifier;
+    mediaProvider?: Promise<MediaProvider>;
+    children?: React.ReactNode;
+};
+export declare type MediaInlineProps = {
+    id: string;
+    collection?: string;
+    providers: ProviderFactory;
+};
+export declare const RenderMediaInline: React.FC<RenderMediaInlineProps>;
+declare const MediaInline: React.FC<MediaInlineProps>;
+export default MediaInline;

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

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

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

@@ -29,7 +29,7 @@ export default class ExtensionRenderer extends React.Component<Props, State> {
     UNSAFE_componentWillMount(): void;
     componentWillUnmount(): void;
     handleProvider: (name: keyof State, providerPromise?: Promise<any> | undefined) => void;
-    getNodeRenderer: typeof getNodeRenderer;
+    getNodeRenderer: import("memoize-one").MemoizedFn<typeof getNodeRenderer>;
     renderExtensionNode: (extensionProvider?: ExtensionProvider<any> | null | undefined) => JSX.Element;
     setupAndRenderExtensionNode: (providers: {
         extensionProvider?: Promise<ExtensionProvider<any>> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "81.0.0",
+  "version": "82.1.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,30 +24,30 @@
     }
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^19.1.0",
-    "@atlaskit/adf-utils": "^14.2.0",
+    "@atlaskit/adf-schema": "^19.3.0",
+    "@atlaskit/adf-utils": "^14.3.0",
     "@atlaskit/analytics-listeners": "^8.0.0",
     "@atlaskit/analytics-namespaced-context": "^6.3.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.1.0",
-    "@atlaskit/code": "^14.1.0",
-    "@atlaskit/editor-common": "^60.0.0",
+    "@atlaskit/code": "^14.2.0",
+    "@atlaskit/editor-common": "^60.3.0",
     "@atlaskit/editor-json-transformer": "^8.6.0",
-    "@atlaskit/editor-shared-styles": "^1.5.0",
-    "@atlaskit/icon": "^21.8.0",
-    "@atlaskit/media-card": "^70.11.0",
-    "@atlaskit/media-client": "^14.2.0",
+    "@atlaskit/editor-shared-styles": "^1.6.0",
+    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/media-card": "^72.0.0",
+    "@atlaskit/media-client": "^14.3.0",
     "@atlaskit/media-common": "^2.9.0",
     "@atlaskit/media-filmstrip": "^42.1.0",
     "@atlaskit/media-viewer": "^45.8.0",
     "@atlaskit/status": "^0.11.0",
     "@atlaskit/task-decision": "^17.2.0",
-    "@atlaskit/theme": "^11.5.0",
-    "@atlaskit/tooltip": "^17.4.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/width-detector": "^3.0.0",
     "@babel/runtime": "^7.0.0",
     "lodash": "^4.17.15",
-    "memoize-one": "^5.1.0",
+    "memoize-one": "^6.0.0",
     "prosemirror-model": "1.11.0",
     "prosemirror-transform": "1.2.8",
     "prosemirror-utils": "^1.0.0-0",
@@ -58,31 +58,31 @@
   },
   "peerDependencies": {
     "@atlaskit/media-core": "^32.2.0",
-    "@atlaskit/smart-card": "^16.1.0",
+    "@atlaskit/smart-card": "^16.2.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
     "@atlaskit/analytics-gas-types": "^5.0.5",
-    "@atlaskit/avatar": "^20.4.0",
+    "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/build-utils": "^2.6.2",
-    "@atlaskit/css-reset": "^6.1.0",
+    "@atlaskit/css-reset": "^6.2.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^149.0.0",
-    "@atlaskit/editor-test-helpers": "^15.4.0",
+    "@atlaskit/editor-core": "^151.1.0",
+    "@atlaskit/editor-test-helpers": "^15.5.0",
     "@atlaskit/field-range": "^9.0.0",
     "@atlaskit/logo": "^13.5.0",
     "@atlaskit/media-core": "^32.2.0",
     "@atlaskit/media-integration-test-helpers": "^2.5.0",
-    "@atlaskit/media-test-helpers": "^28.7.0",
+    "@atlaskit/media-test-helpers": "^28.8.0",
     "@atlaskit/mention": "^19.7.0",
     "@atlaskit/navigation-next": "^9.0.0",
-    "@atlaskit/profilecard": "^15.0.0",
+    "@atlaskit/profilecard": "^15.8.0",
     "@atlaskit/radio": "^5.3.0",
-    "@atlaskit/smart-card": "^16.1.0",
+    "@atlaskit/smart-card": "^16.2.0",
     "@atlaskit/ssr": "^0.2.0",
-    "@atlaskit/util-data-test": "^15.0.0",
+    "@atlaskit/util-data-test": "^16.0.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",