@atlaskit/renderer 95.0.1 → 96.0.2

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @atlaskit/renderer
 
+## 96.0.2
+
+### Patch Changes
+
+- [`d5ebbd97b8c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d5ebbd97b8c) - ED-15264 add styled-components dependency
+
+## 96.0.1
+
+### Patch Changes
+
+- [`9dc961ea69e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9dc961ea69e) - ED-14610: reduce code bundled with table sticky headers
+- [`d6b54a2fd48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6b54a2fd48) - [ux] Fix custom panel dark mode colour regression
+- Updated dependencies
+
+## 96.0.0
+
+### Major Changes
+
+- [`d8b3bc73330`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d8b3bc73330) - [ED-14507] Deprecate the allowDynamicTextSizing editor prop and remove all code related to it. This feature has been unused since 2020.
+
+### Minor Changes
+
+- [`8949731bc6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8949731bc6a) - ED-14608: Migrate adf-utils imports in atlassian-frontend to new child entry points to improve treeshaking
+- [`b7b72b61dca`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b7b72b61dca) - ED-10337 Refactor overflow shadows using intersection observer to improve renderer performance on initial load and when scrolling contents of the tables and extensions horizontally.
+  This is affecting vertical shadows inside tables and extensions in renderer.
+  On the OverflowShadowOptions interface of the shadows component exported from editor-common we are also removing scrollableSelector option which is no longer used.
+
+### Patch Changes
+
+- [`edc63f42fbb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/edc63f42fbb) - Fix: Media inline renderer sometimes stuck in loading view state
+- [`b68e80d658f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b68e80d658f) - add hover previews feature flag
+- [`d15a5a556af`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d15a5a556af) - ED-15037 fixed issue with extensions not showing correctly inside tables nested in expands
+- [`27b079fa0a5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27b079fa0a5) - [ED-14111] Allow spaces in input field in renderer table cell header
+- [`789b211a5e5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/789b211a5e5) - Removed the use of :first-child and nth-child selectors in CSS
+- [`420808687d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/420808687d2) - EDM-3072: fix copy-paste of media inline stuck on loading and renderer copy-paste copying only text
+- [`c5ef8dd9621`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c5ef8dd9621) - [ux] ED-14913 Fix expand text in renderer dark mode
+- [`c4829f17445`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c4829f17445) - [ux] ED-10642 Fix null annotation ids in renderer
+- Updated dependencies
+
 ## 95.0.1
 
 ### Patch Changes
@@ -18,7 +57,7 @@
 ### Patch Changes
 
 - [`ccde3d9eb43`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ccde3d9eb43) - [ux] ED-10335: memoize schema, validation and serialization for Renderer
-- [`59e17ae76c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/59e17ae76c1) - [ux] ED-14961-table-sticky-header-overlap-popup
+- [`59e17ae76c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/59e17ae76c1) - [ux] ED-14961: fix table sticky header in renderer overlapping typeahead popup in comment section
 - [`47a59c220af`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47a59c220af) - [ux] ED-10334: memoised schema.nodeFromJSON() and node.check() in Renderer.renderDocument()
 - [`08edcd36c6f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/08edcd36c6f) - [ux] Convert RGB color usage to Design Tokens. This change is backwards compatible with existing theming
 - Updated dependencies

package/dist/cjs/react/index.js

@@ -190,7 +190,6 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.appearance = init.appearance;
     this.disableHeadingIDs = init.disableHeadingIDs;
     this.disableActions = init.disableActions;
-    this.allowDynamicTextSizing = init.allowDynamicTextSizing;
     this.allowHeadingAnchorLinks = init.allowHeadingAnchorLinks;
     this.allowCopyToClipboard = init.allowCopyToClipboard;
     this.allowPlaceholderText = init.allowPlaceholderText;
@@ -561,7 +560,6 @@ var ReactSerializer = /*#__PURE__*/function () {
         rendererContext: this.rendererContext,
         serializer: this,
         content: node.content ? node.content.toJSON() : undefined,
-        allowDynamicTextSizing: this.allowDynamicTextSizing,
         allowHeadingAnchorLinks: this.allowHeadingAnchorLinks,
         allowCopyToClipboard: this.allowCopyToClipboard,
         allowPlaceholderText: this.allowPlaceholderText,

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

@@ -44,7 +44,6 @@ function EmbedCard(props) {
       layout = props.layout,
       width = props.width,
       isInsideOfBlockNode = props.isInsideOfBlockNode,
-      allowDynamicTextSizing = props.allowDynamicTextSizing,
       rendererAppearance = props.rendererAppearance;
   var embedIframeRef = (0, _react2.useRef)(null);
   var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
@@ -123,10 +122,8 @@ function EmbedCard(props) {
     if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
       var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= _editorSharedStyles.akEditorDefaultLayoutWidth;
 
-      if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
-        nonFullWidthSize = (0, _ui.mapBreakpointToLayoutMaxWidth)(breakpoint);
-      } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
-        nonFullWidthSize = (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
+      if (isContainerSizeGreaterThanMaxFullPageWidth) {
+        nonFullWidthSize = _editorSharedStyles.akEditorDefaultLayoutWidth;
       } else {
         nonFullWidthSize = containerWidth - padding;
       }

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

@@ -23,6 +23,8 @@ var _SmartCardStorage = require("../../ui/SmartCardStorage");
 
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 
+var _useFeatureFlags = require("../../use-feature-flags");
+
 var InlineCard = function InlineCard(props) {
   var url = props.url,
       data = props.data,
@@ -36,6 +38,7 @@ var InlineCard = function InlineCard(props) {
     onClick: onClick,
     container: portal
   };
+  var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
 
   if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url) {
     return /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
@@ -51,7 +54,8 @@ var InlineCard = function InlineCard(props) {
   }, /*#__PURE__*/_react.default.createElement(_fallback.CardErrorBoundary, (0, _extends2.default)({
     unsupportedComponent: _ui.UnsupportedInline
   }, cardProps), /*#__PURE__*/_react.default.createElement(_smartCard.Card, (0, _extends2.default)({
-    appearance: "inline"
+    appearance: "inline",
+    showHoverPreview: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.showHoverPreview
   }, cardProps, {
     onResolve: function onResolve(data) {
       if (!data.url || !data.title) {

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

@@ -11,6 +11,8 @@ exports.default = exports.RenderMediaInline = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -19,8 +21,14 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _mediaCard = require("@atlaskit/media-card");
 
+var _mediaUi = require("@atlaskit/media-ui");
+
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 
+var _MediaCard = require("../../ui/MediaCard");
+
+var _reactIntlNext = require("react-intl-next");
+
 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; }
@@ -28,7 +36,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var RenderMediaInline = function RenderMediaInline(props) {
   var mediaProvider = props.mediaProvider;
 
-  var _useState = (0, _react.useState)({}),
+  var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       viewMediaClientConfigState = _useState2[0],
       setViewMediaClientConfigState = _useState2[1];
@@ -68,6 +76,18 @@ var RenderMediaInline = function RenderMediaInline(props) {
       return _ref.apply(this, arguments);
     };
   }();
+  /*
+   * Only show the loading view if the media provider is not ready
+   * prevents calling the media API before the provider is ready
+   */
+
+
+  if (!viewMediaClientConfigState) {
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
+      message: "",
+      isSelected: false
+    });
+  }
 
   return /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
     identifier: props.identifier,
@@ -81,17 +101,33 @@ exports.RenderMediaInline = RenderMediaInline;
 var MediaInline = function MediaInline(props) {
   var collection = props.collection,
       id = props.id,
-      providers = props.providers;
+      providers = props.providers,
+      intl = props.intl;
   var identifier = {
     id: id,
     mediaItemType: 'file',
     collectionName: collection
   };
-  return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+  var defaultIntl = (0, _reactIntlNext.createIntl)({
+    locale: 'en'
+  });
+  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, (0, _MediaCard.getClipboardAttrs)({
+    id: id,
+    collection: collection
+  }), {
+    "data-node-type": "mediaInline"
+  }), /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
     providers: ['mediaProvider'],
     providerFactory: providers,
     renderNode: function renderNode(providers) {
       var mediaProvider = providers.mediaProvider;
+
+      if (!mediaProvider) {
+        return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
+          message: (intl || defaultIntl).formatMessage(_mediaUi.messages.couldnt_load_file)
+        });
+      }
+
       return /*#__PURE__*/_react.default.createElement(RenderMediaInline, {
         identifier: identifier,
         mediaProvider: mediaProvider
@@ -100,5 +136,6 @@ var MediaInline = function MediaInline(props) {
   }));
 };
 
-var _default = MediaInline;
+var _default = (0, _reactIntlNext.injectIntl)(MediaInline);
+
 exports.default = _default;

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

@@ -77,7 +77,6 @@ var MediaSingle = function MediaSingle(props) {
   var rendererAppearance = props.rendererAppearance,
       featureFlags = props.featureFlags,
       isInsideOfBlockNode = props.isInsideOfBlockNode,
-      allowDynamicTextSizing = props.allowDynamicTextSizing,
       layout = props.layout,
       children = props.children,
       pctWidth = props.width;
@@ -157,7 +156,6 @@ var MediaSingle = function MediaSingle(props) {
 
   var calcDimensions = function calcDimensions(mediaContainerWidth, mediaBreakpoint) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    var breakpoint = mediaBreakpoint || (0, _ui.getBreakpoint)(containerWidth);
     var maxWidth = containerWidth;
     var maxHeight = height / width * maxWidth;
     var cardDimensions = {
@@ -167,12 +165,10 @@ var MediaSingle = function MediaSingle(props) {
     var nonFullWidthSize = containerWidth;
 
     if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
-      var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
+      var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= _editorSharedStyles.akEditorDefaultLayoutWidth;
 
-      if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
-        nonFullWidthSize = (0, _ui.mapBreakpointToLayoutMaxWidth)(breakpoint);
-      } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
-        nonFullWidthSize = (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
+      if (isContainerSizeGreaterThanMaxFullPageWidth) {
+        nonFullWidthSize = _editorSharedStyles.akEditorDefaultLayoutWidth;
       } else {
         nonFullWidthSize = containerWidth - padding;
       }

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

@@ -40,13 +40,15 @@ var PanelStyled = function PanelStyled(props) {
 
   if (props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && props.backgroundColor) {
     styles = function styles(theme) {
-      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      &.", " {\n        ", "\n      }\n\n      &[data-panel-type=", "] {\n        background-color: ", ";\n        ", ";\n      }\n    "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
-        theme: theme
-      }), _adfSchema.PanelType.CUSTOM, props.backgroundColor, (0, _theme.themed)({
-        dark: _panel.getPanelBackgroundDarkModeColors
+      var customStyle = (0, _theme.themed)({
+        dark: _panel.getPanelBackgroundDarkModeColors,
+        light: "background-color: ".concat(props.backgroundColor, ";")
       })({
         theme: theme
-      }));
+      });
+      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n        }\n      "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
+        theme: theme
+      }), _adfSchema.PanelType.CUSTOM, customStyle);
     };
   }
 

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

@@ -27,11 +27,7 @@ var getTableLayoutWidth = function getTableLayoutWidth(layout, opts) {
       return _editorSharedStyles.akEditorWideLayoutWidth;
 
     default:
-      var _ref = opts || {},
-          containerWidth = _ref.containerWidth,
-          isDynamicTextSizingEnabled = _ref.isDynamicTextSizingEnabled;
-
-      return (0, _breakoutSsr.calcLineLength)(containerWidth, isDynamicTextSizingEnabled);
+      return (0, _breakoutSsr.calcLineLength)();
   }
 };
 
@@ -57,10 +53,10 @@ var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWi
   columnWidth - _styles.tableCellBorderWidth, zeroWidthColumnsCount ? _editorSharedStyles.akEditorTableLegacyCellMinWidth : _styles.tableCellMinWidth);
 };
 
-var calcScalePercent = function calcScalePercent(_ref2) {
-  var renderWidth = _ref2.renderWidth,
-      tableWidth = _ref2.tableWidth,
-      maxScale = _ref2.maxScale;
+var calcScalePercent = function calcScalePercent(_ref) {
+  var renderWidth = _ref.renderWidth,
+      tableWidth = _ref.tableWidth,
+      maxScale = _ref.maxScale;
   var diffPercent = 1 - renderWidth / tableWidth;
   return diffPercent < maxScale ? diffPercent : maxScale;
 };
@@ -71,8 +67,7 @@ var Colgroup = function Colgroup(props) {
   var columnWidths = props.columnWidths,
       layout = props.layout,
       isNumberColumnEnabled = props.isNumberColumnEnabled,
-      renderWidth = props.renderWidth,
-      allowDynamicTextSizing = props.allowDynamicTextSizing;
+      renderWidth = props.renderWidth;
 
   if (!columnWidths || !isTableResized(columnWidths)) {
     return null;
@@ -80,7 +75,6 @@ var Colgroup = function Colgroup(props) {
 
 
   var layoutWidth = getTableLayoutWidth(layout, {
-    isDynamicTextSizingEnabled: allowDynamicTextSizing,
     containerWidth: renderWidth
   });
   var maxTableWidth = renderWidth < layoutWidth ? renderWidth : layoutWidth; // If table has a layout of default, it is confined by the defined column width.

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,24 +23,16 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _utils = require("../../../utils");
-
 var _table = require("./table");
 
 var _injectProps = require("../../utils/inject-props");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-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; }
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-var N40A = colors.N40A;
 var tableStickyPadding = 8;
 exports.tableStickyPadding = tableStickyPadding;
 var modeSpecficStyles = {
@@ -52,7 +42,7 @@ var modeSpecficStyles = {
 }; // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
-  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, (0, _tokens.token)('elevation.surface', 'white'), (0, _tokens.token)('elevation.surface.overlay', 'white'), (0, _tokens.token)('elevation.shadow.overflow', "0 6px 4px -4px ".concat(N40A)), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, (0, _tokens.token)('elevation.surface', 'white'), (0, _tokens.token)('elevation.surface.overlay', 'white'), (0, _tokens.token)('elevation.shadow.overflow', "0 6px 4px -4px ".concat(_colors.N40A)), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
 };
 
 var FixedTableDiv = function FixedTableDiv(props) {
@@ -84,7 +74,6 @@ var StickyTable = function StickyTable(_ref) {
       children = _ref.children,
       columnWidths = _ref.columnWidths,
       renderWidth = _ref.renderWidth,
-      allowDynamicTextSizing = _ref.allowDynamicTextSizing,
       rowHeight = _ref.rowHeight;
   return (0, _react2.jsx)("div", {
     css: {
@@ -97,7 +86,7 @@ var StickyTable = function StickyTable(_ref) {
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth
   }, (0, _react2.jsx)("div", {
-    className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames),
+    className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames || ''),
     "data-layout": layout,
     style: {
       width: tableWidth
@@ -112,8 +101,7 @@ var StickyTable = function StickyTable(_ref) {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    renderWidth: renderWidth,
-    allowDynamicTextSizing: allowDynamicTextSizing
+    renderWidth: renderWidth
   },
   /**
    * @see https://product-fabric.atlassian.net/browse/ED-10235
@@ -125,9 +113,32 @@ var StickyTable = function StickyTable(_ref) {
     invisible: true
   }))))));
 };
+/**
+ * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
+ */
+
 
 exports.StickyTable = StickyTable;
 
+function findHorizontalOverflowScrollParent(table) {
+  var parent = table;
+
+  if (!parent) {
+    return null;
+  }
+
+  while (parent = parent.parentElement) {
+    // IE11 on Window 8 doesn't show styles from CSS when accessing through element.style property.
+    var style = window.getComputedStyle(parent);
+
+    if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
+      return parent;
+    }
+  }
+
+  return null;
+}
+
 var OverflowParent = /*#__PURE__*/function () {
   function OverflowParent(ref) {
     (0, _classCallCheck2.default)(this, OverflowParent);
@@ -174,7 +185,7 @@ var OverflowParent = /*#__PURE__*/function () {
   }], [{
     key: "fromElement",
     value: function fromElement(el) {
-      return new OverflowParent((0, _utils.findHorizontalOverflowScrollParent)(el) || window);
+      return new OverflowParent(findHorizontalOverflowScrollParent(el) || window);
     }
   }]);
   return OverflowParent;

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

@@ -17,7 +17,6 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
       columnWidths = _ref.columnWidths,
       layout = _ref.layout,
       renderWidth = _ref.renderWidth,
-      allowDynamicTextSizing = _ref.allowDynamicTextSizing,
       children = _ref.children;
   return /*#__PURE__*/_react.default.createElement("table", {
     "data-number-column": isNumberColumnEnabled,
@@ -26,8 +25,7 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    renderWidth: renderWidth,
-    allowDynamicTextSizing: allowDynamicTextSizing
+    renderWidth: renderWidth
   }), /*#__PURE__*/_react.default.createElement("tbody", null, children));
 });
 

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

@@ -307,13 +307,12 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
           isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
           layout = _this$props.layout,
           renderWidth = _this$props.renderWidth,
-          allowDynamicTextSizing = _this$props.allowDynamicTextSizing,
           columnWidths = _this$props.columnWidths,
           stickyHeaders = _this$props.stickyHeaders,
           tableNode = _this$props.tableNode;
       var stickyMode = this.state.stickyMode;
       var tableWidth = (0, _styles.calcTableWidth)(layout, renderWidth, false);
-      var lineLength = (0, _breakoutSsr.calcLineLength)(renderWidth, allowDynamicTextSizing);
+      var lineLength = (0, _breakoutSsr.calcLineLength)();
       var left;
 
       if (canUseLinelength(this.props.rendererAppearance) && tableWidth !== 'inherit') {
@@ -338,10 +337,9 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         innerRef: this.stickyWrapperRef,
         wrapperWidth: wrapperWidth,
         columnWidths: columnWidths,
-        rowHeight: this.headerRowHeight,
-        allowDynamicTextSizing: allowDynamicTextSizing
+        rowHeight: this.headerRowHeight
       }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames),
+        className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
         "data-layout": layout,
         ref: this.props.handleRef,
         style: {
@@ -357,8 +355,7 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         columnWidths: columnWidths,
         layout: layout,
         isNumberColumnEnabled: isNumberColumnEnabled,
-        renderWidth: renderWidth,
-        allowDynamicTextSizing: allowDynamicTextSizing
+        renderWidth: renderWidth
       }, this.grabFirstRowRef(children)))));
     }
   }]);
@@ -440,14 +437,28 @@ var TableProcessor = /*#__PURE__*/function (_React$Component2) {
 
 exports.TableProcessor = TableProcessor;
 var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
-  overflowSelector: ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER)
+  overflowSelector: ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER),
+  useShadowObserver: true
 });
 
 var TableWithWidth = function TableWithWidth(props) {
   return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
+    var _props$columnWidths;
+
     var width = _ref2.width;
     var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
-    return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
+    var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
+      return total + val;
+    }, 0)) || 0;
+
+    if (colWidthsSum) {
+      return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
+        renderWidth: renderWidth
+      }, props));
+    } // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
+
+
+    return /*#__PURE__*/_react.default.createElement(TableProcessor, (0, _extends2.default)({
       renderWidth: renderWidth
     }, props));
   });

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

@@ -168,8 +168,10 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
       _this = _super2.call(this, props);
       (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyPress", function (event) {
         var keys = [' ', 'Enter', 'Spacebar'];
+        var _ref = event.target,
+            tagName = _ref.tagName; // trigger sorting if space or enter are clicked but not when in an input field (template variables)
 
-        if (keys.includes(event.key)) {
+        if (keys.includes(event.key) && !IgnoreSorting.includes(tagName)) {
           event.preventDefault();
 
           _this.onClick(event);
@@ -177,8 +179,8 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
       });
       (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function (event) {
         // ignore sorting when specific elements are clicked
-        var _ref = event.target,
-            tagName = _ref.tagName;
+        var _ref2 = event.target,
+            tagName = _ref2.tagName;
 
         if (IgnoreSorting.includes(tagName)) {
           return;

package/dist/cjs/render-document.js

@@ -23,7 +23,7 @@ var _events = require("./analytics/events");
 
 var _unsupportedContent = require("./analytics/unsupported-content");
 
-var _adfUtils = require("@atlaskit/adf-utils");
+var _transforms = require("@atlaskit/adf-utils/transforms");
 
 var SUPPORTS_HIRES_TIMER_API = !!(window.performance && performance.now);
 
@@ -44,7 +44,7 @@ var _validation = function _validation(doc, schema, adfStage, useSpecBasedValida
   if (useSpecBasedValidator) {
     // link mark on mediaSingle is deprecated, need to move link mark to child media node
     // https://product-fabric.atlassian.net/browse/ED-14043
-    var _transformMediaLinkMa = (0, _adfUtils.transformMediaLinkMarks)(doc),
+    var _transformMediaLinkMa = (0, _transforms.transformMediaLinkMarks)(doc),
         transformedAdf = _transformMediaLinkMa.transformedAdf,
         isTransformed = _transformMediaLinkMa.isTransformed;
 

package/dist/cjs/ui/MediaCard.js

@@ -29,7 +29,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _adfUtils = require("@atlaskit/adf-utils");
+var _traverse = require("@atlaskit/adf-utils/traverse");
 
 var _mediaCard = require("@atlaskit/media-card");
 
@@ -56,7 +56,7 @@ var getListOfIdentifiersFromDoc = function getListOfIdentifiersFromDoc(doc) {
     return [];
   }
 
-  return (0, _adfUtils.filter)(doc, function (node) {
+  return (0, _traverse.filter)(doc, function (node) {
     return node.type === 'media';
   }).reduce(function (identifierList, mediaNode) {
     if (mediaNode.attrs) {

package/dist/cjs/ui/Renderer/breakout-ssr.js

@@ -19,9 +19,7 @@ var _utils = require("@atlaskit/editor-common/utils");
  *
  * More info: https://product-fabric.atlassian.net/wiki/spaces/E/pages/1216218119/Renderer+SSR+for+Breakout+Nodes
  */
-function BreakoutSSRInlineScript(_ref) {
-  var allowDynamicTextSizing = _ref.allowDynamicTextSizing;
-
+function BreakoutSSRInlineScript() {
   /**
    * Should only inline this script while SSR,
    * not needed on the client side.
@@ -31,7 +29,7 @@ function BreakoutSSRInlineScript(_ref) {
   }
 
   var id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
-  var context = createBreakoutInlineScript(id, allowDynamicTextSizing);
+  var context = createBreakoutInlineScript(id);
   return /*#__PURE__*/_react.default.createElement("script", {
     "data-breakout-script-id": id,
     dangerouslySetInnerHTML: {
@@ -40,14 +38,14 @@ function BreakoutSSRInlineScript(_ref) {
   });
 }
 
-function createBreakoutInlineScript(id, allowDynamicTextSizing) {
-  return "\n  (function(window){\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", ").concat(allowDynamicTextSizing, ", breakoutConsts);\n  })(window);\n");
+function createBreakoutInlineScript(id) {
+  return "\n  (function(window){\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts);\n  })(window);\n");
 }
 
 var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n");
 exports.breakoutInlineScriptContext = breakoutInlineScriptContext;
 
-function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
+function applyBreakoutAfterSSR(id, breakoutConsts) {
   var MEDIA_NODE_TYPE = 'mediaSingle';
   var WIDE_LAYOUT_MODES = ['full-width', 'wide'];
 
@@ -101,7 +99,7 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
           // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
 
           if (node.classList.contains('pm-table-container')) {
-            var lineLength = breakoutConsts.calcLineLength(renderer.offsetWidth, allowDynamicTextSizing);
+            var lineLength = breakoutConsts.calcLineLength();
             var left = lineLength / 2 - parseInt(width) / 2;
 
             if (left < 0) {