@atlaskit/renderer 94.0.0 → 96.0.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @atlaskit/renderer
 
+## 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
+
+- Updated dependencies
+
+## 95.0.0
+
+### Minor Changes
+
+- [`bd24b9d71d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bd24b9d71d2) - [ux] Instrumented `@atlaskit/renderer` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### 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
+- [`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
+
 ## 94.0.0
 
 ### Patch Changes

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/marks/link.js

@@ -25,13 +25,15 @@ var _events = require("../../analytics/events");
 
 var _enums = require("../../analytics/enums");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 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 anchorStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), _colors.B400, _colors.B300);
+var anchorStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), (0, _tokens.token)('color.link', _colors.B400), (0, _tokens.token)('color.link', _colors.B300), (0, _tokens.token)('color.link.pressed', _colors.B500));
 
 function Link(props) {
   var href = props.href,

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

@@ -31,6 +31,9 @@ var _codeBlockCopyButton = _interopRequireDefault(require("./codeBlockCopyButton
 
 var _templateObject;
 
+// TODO: Quality ticket https://product-fabric.atlassian.net/browse/DSP-4118
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var codeBlockStyle = function codeBlockStyle(props) {
   return (0, _react.css)(_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)({
@@ -40,6 +43,8 @@ var codeBlockStyle = function codeBlockStyle(props) {
     width: "".concat((0, _constants.gridSize)(), "px")
   }));
 };
+/* eslint-enable */
+
 
 function CodeBlock(props) {
   var text = props.text,

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

@@ -31,13 +31,15 @@ var _copyTextProvider = require("./copy-text-provider");
 
 var _messages = require("../../messages");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 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 copyButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid #fff;\n    border-radius: 4px;\n    background-color: ", ";\n    color: rgb(66, 82, 110);\n  }\n\n  button:hover {\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: #fff !important;\n  }\n"])), _colors.N20, _colors.N30, _colors.N700);
+var copyButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  button:hover {\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n"])), (0, _tokens.token)('color.border.inverse', '#fff'), (0, _tokens.token)('color.background.neutral.subtle', _colors.N20), (0, _tokens.token)('color.icon', 'rgb(66, 82, 110)'), (0, _tokens.token)('color.background.neutral.hovered', _colors.N30), (0, _tokens.token)('color.background.neutral.bold.pressed', _colors.N700), (0, _tokens.token)('color.icon.inverse', '#fff'));
 
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,

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/heading-anchor.js

@@ -45,6 +45,8 @@ var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("../../messages");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 var _excluded = ["children"];
@@ -65,7 +67,7 @@ var CopyAnchorWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function (
   }), children);
 });
 
-var copyAnchorButtonStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), _colors.N500);
+var copyAnchorButtonStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), (0, _tokens.token)('color.icon', _colors.N500));
 
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HeadingAnchor, _React$PureComponent);
@@ -148,7 +150,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
       }, (0, _react2.jsx)(_link.default, {
         label: _this.getCopyAriaLabel(),
         size: _this.props.level > 3 ? 'small' : 'medium',
-        primaryColor: _this.state.isClicked ? _colors.B400 : _colors.N200
+        primaryColor: _this.state.isClicked ? (0, _tokens.token)('color.icon.selected', _colors.B400) : (0, _tokens.token)('color.icon.subtle', _colors.N200)
       }));
     });
     return _this;

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.RenderMediaInline = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -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/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

@@ -13,6 +13,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -25,46 +27,46 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var colors = _interopRequireWildcard(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;
+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 fixedTableDivModeToPosition = {
-  stick: 'fixed',
-  'pin-bottom': 'absolute'
-};
-
-var getModeSpecificStyles = function getModeSpecificStyles(mode) {
-  if (mode === 'none') {
-    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      display: none;\n    "])));
-  } else {
-    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      position: ", ";\n    "])), fixedTableDivModeToPosition[mode]);
-  }
-};
+var modeSpecficStyles = {
+  none: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: none;\n  "]))),
+  stick: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    position: fixed;\n  "]))),
+  'pin-bottom': (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n  "])))
+}; // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  top: ", "px;\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 white;\n  background: white;\n  box-shadow: 0 6px 4px -4px ", ";\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"])), top, width, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, 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(N40A)), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
 };
 
 var FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
       wrapperWidth = props.wrapperWidth,
       mode = props.mode;
-  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), getModeSpecificStyles(mode)];
-  return (0, _react2.jsx)("div", {
+  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
+  var attrs = {
+    mode: mode
+  };
+  return (0, _react2.jsx)("div", (0, _extends2.default)({}, attrs, {
+    "data-testid": "sticky-table-fixed",
     css: fixedTableCss
-  }, props.children);
+  }), props.children);
 };
 
 exports.FixedTableDiv = FixedTableDiv;
@@ -82,7 +84,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: {
@@ -95,7 +96,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
@@ -110,8 +111,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

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;