@atlaskit/renderer 94.0.0 → 96.0.0

package/dist/es2019/ui/annotations/hooks/use-events.js

@@ -19,7 +19,7 @@ export const useAnnotationStateByTypeEvent = ({
       }
 
       const nextStates = Object.values(payload).reduce((acc, curr) => {
-        if (curr.annotationType === type) {
+        if (curr.id && curr.annotationType === type) {
           // Check for empty state to prevent additional renders
           const isEmpty = curr.state === null || curr.state === undefined;
           return { ...acc,
@@ -83,7 +83,7 @@ export const useAnnotationClickEvent = props => {
       annotationIds,
       eventTarget
     }) => {
-      const annotationsByType = annotationIds.map(id => ({
+      const annotationsByType = annotationIds.filter(id => !!id).map(id => ({
         id,
         type: AnnotationTypes.INLINE_COMMENT
       }));

package/dist/es2019/version.json

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

package/dist/esm/react/index.js

@@ -179,7 +179,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;
@@ -550,7 +549,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/esm/react/marks/link.js

@@ -6,11 +6,12 @@ var _templateObject;
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
-import { B400, B300 } from '@atlaskit/theme/colors';
+import { B400, B300, B500 } from '@atlaskit/theme/colors';
 import { getEventHandler } from '../../utils';
 import { PLATFORM, MODE } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics/enums';
-var anchorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), B400, B300);
+import { token } from '@atlaskit/tokens';
+var anchorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), token('color.link', B400), token('color.link', B300), token('color.link.pressed', B500));
 export default function Link(props) {
   var href = props.href,
       target = props.target,

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

@@ -14,6 +14,9 @@ import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { useFeatureFlags } from '../../use-feature-flags';
 import CopyButton from './codeBlockCopyButton';
 
+// 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 css(_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({
@@ -23,6 +26,8 @@ var codeBlockStyle = function codeBlockStyle(props) {
     width: "".concat(gridSize(), "px")
   }));
 };
+/* eslint-enable */
+
 
 function CodeBlock(props) {
   var text = props.text,

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

@@ -13,7 +13,8 @@ import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { N20, N30, N700 } from '@atlaskit/theme/colors';
 import { CopyTextConsumer } from './copy-text-provider';
 import { codeBlockCopyButtonMessages } from '../../messages';
-var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), N20, N30, N700);
+import { token } from '@atlaskit/tokens';
+var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), token('color.border.inverse', '#fff'), token('color.background.neutral.subtle', N20), token('color.icon', 'rgb(66, 82, 110)'), token('color.background.neutral.hovered', N30), token('color.background.neutral.bold.pressed', N700), token('color.icon.inverse', '#fff'));
 
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,

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

@@ -8,8 +8,8 @@ var _templateObject, _templateObject2;
 import { css, jsx } from '@emotion/react';
 import { useMemo, useContext, useState, useRef } from 'react';
 import { Card, Context as CardContext, EmbedResizeMessageListener } from '@atlaskit/smart-card';
-import { WidthConsumer, mapBreakpointToLayoutMaxWidth, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, getAkEditorFullPageMaxWidth } from '@atlaskit/editor-shared-styles';
+import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { getPlatform } from '../../utils';
 import { CardErrorBoundary } from './fallback';
 import { FullPagePadding } from '../../ui/Renderer/style';
@@ -24,7 +24,6 @@ export default function EmbedCard(props) {
       layout = props.layout,
       width = props.width,
       isInsideOfBlockNode = props.isInsideOfBlockNode,
-      allowDynamicTextSizing = props.allowDynamicTextSizing,
       rendererAppearance = props.rendererAppearance;
   var embedIframeRef = useRef(null);
   var onClick = getCardClickHandler(eventHandlers, url);
@@ -103,10 +102,8 @@ export default function EmbedCard(props) {
     if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
       var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= akEditorDefaultLayoutWidth;
 
-      if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
-        nonFullWidthSize = mapBreakpointToLayoutMaxWidth(breakpoint);
-      } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
-        nonFullWidthSize = getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
+      if (isContainerSizeGreaterThanMaxFullPageWidth) {
+        nonFullWidthSize = akEditorDefaultLayoutWidth;
       } else {
         nonFullWidthSize = containerWidth - padding;
       }

package/dist/esm/react/nodes/heading-anchor.js

@@ -27,6 +27,7 @@ import LinkIcon from '@atlaskit/icon/glyph/link';
 import Tooltip from '@atlaskit/tooltip';
 import { injectIntl } from 'react-intl-next';
 import { headingAnchorLinkMessages } from '../../messages';
+import { token } from '@atlaskit/tokens';
 export var HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -37,7 +38,7 @@ var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, re
     ref: ref
   }), children);
 });
-var copyAnchorButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), N500);
+var copyAnchorButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), token('color.icon', N500));
 
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(HeadingAnchor, _React$PureComponent);
@@ -126,7 +127,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
       }, jsx(LinkIcon, {
         label: _this.getCopyAriaLabel(),
         size: _this.props.level > 3 ? 'small' : 'medium',
-        primaryColor: _this.state.isClicked ? B400 : N200
+        primaryColor: _this.state.isClicked ? token('color.icon.selected', B400) : token('color.icon.subtle', N200)
       }));
     });
 

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

@@ -6,6 +6,7 @@ import { UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
+import { useFeatureFlags } from '../../use-feature-flags';
 
 var InlineCard = function InlineCard(props) {
   var url = props.url,
@@ -20,6 +21,7 @@ var InlineCard = function InlineCard(props) {
     onClick: onClick,
     container: portal
   };
+  var featureFlags = useFeatureFlags();
 
   if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url) {
     return /*#__PURE__*/React.createElement(CardSSR, {
@@ -35,7 +37,8 @@ var InlineCard = function InlineCard(props) {
   }, /*#__PURE__*/React.createElement(CardErrorBoundary, _extends({
     unsupportedComponent: UnsupportedInline
   }, cardProps), /*#__PURE__*/React.createElement(Card, _extends({
-    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/esm/react/nodes/mediaInline.js

@@ -1,13 +1,17 @@
+import _extends from "@babel/runtime/helpers/extends";
 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 { MediaInlineCardErroredView, MediaInlineCardLoadingView, messages } from '@atlaskit/media-ui';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { getClipboardAttrs } from '../../ui/MediaCard';
+import { createIntl, injectIntl } from 'react-intl-next';
 export var RenderMediaInline = function RenderMediaInline(props) {
   var mediaProvider = props.mediaProvider;
 
-  var _useState = useState({}),
+  var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
       viewMediaClientConfigState = _useState2[0],
       setViewMediaClientConfigState = _useState2[1];
@@ -47,6 +51,18 @@ export 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.createElement(MediaInlineCardLoadingView, {
+      message: "",
+      isSelected: false
+    });
+  }
 
   return /*#__PURE__*/React.createElement(MediaInlineCard, {
     identifier: props.identifier,
@@ -58,17 +74,33 @@ export var RenderMediaInline = function RenderMediaInline(props) {
 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.createElement("span", null, /*#__PURE__*/React.createElement(WithProviders, {
+  var defaultIntl = createIntl({
+    locale: 'en'
+  });
+  return /*#__PURE__*/React.createElement("span", _extends({}, getClipboardAttrs({
+    id: id,
+    collection: collection
+  }), {
+    "data-node-type": "mediaInline"
+  }), /*#__PURE__*/React.createElement(WithProviders, {
     providers: ['mediaProvider'],
     providerFactory: providers,
     renderNode: function renderNode(providers) {
       var mediaProvider = providers.mediaProvider;
+
+      if (!mediaProvider) {
+        return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
+          message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file)
+        });
+      }
+
       return /*#__PURE__*/React.createElement(RenderMediaInline, {
         identifier: identifier,
         mediaProvider: mediaProvider
@@ -77,4 +109,4 @@ var MediaInline = function MediaInline(props) {
   }));
 };
 
-export default MediaInline;
+export default injectIntl(MediaInline);

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

@@ -5,8 +5,8 @@ import { default as React, Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { mapBreakpointToLayoutMaxWidth, getBreakpoint, MediaSingle as UIMediaSingle, WidthConsumer } from '@atlaskit/editor-common/ui';
-import { akEditorFullWidthLayoutWidth, getAkEditorFullPageMaxWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { MediaSingle as UIMediaSingle, WidthConsumer } from '@atlaskit/editor-common/ui';
+import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { useObservedWidth } from '../../hooks/use-observed-width';
 import { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
@@ -51,7 +51,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;
@@ -129,7 +128,6 @@ var MediaSingle = function MediaSingle(props) {
 
   var calcDimensions = function calcDimensions(mediaContainerWidth, mediaBreakpoint) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    var breakpoint = mediaBreakpoint || getBreakpoint(containerWidth);
     var maxWidth = containerWidth;
     var maxHeight = height / width * maxWidth;
     var cardDimensions = {
@@ -139,12 +137,10 @@ var MediaSingle = function MediaSingle(props) {
     var nonFullWidthSize = containerWidth;
 
     if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
-      var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
+      var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= akEditorDefaultLayoutWidth;
 
-      if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
-        nonFullWidthSize = mapBreakpointToLayoutMaxWidth(breakpoint);
-      } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
-        nonFullWidthSize = getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
+      if (isContainerSizeGreaterThanMaxFullPageWidth) {
+        nonFullWidthSize = akEditorDefaultLayoutWidth;
       } else {
         nonFullWidthSize = containerWidth - padding;
       }

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

@@ -14,11 +14,7 @@ var getTableLayoutWidth = function getTableLayoutWidth(layout, opts) {
       return akEditorWideLayoutWidth;
 
     default:
-      var _ref = opts || {},
-          containerWidth = _ref.containerWidth,
-          isDynamicTextSizingEnabled = _ref.isDynamicTextSizingEnabled;
-
-      return calcLineLength(containerWidth, isDynamicTextSizingEnabled);
+      return calcLineLength();
   }
 };
 
@@ -44,10 +40,10 @@ var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWi
   columnWidth - tableCellBorderWidth, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
 };
 
-export var calcScalePercent = function calcScalePercent(_ref2) {
-  var renderWidth = _ref2.renderWidth,
-      tableWidth = _ref2.tableWidth,
-      maxScale = _ref2.maxScale;
+export 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;
 };
@@ -55,8 +51,7 @@ export 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;
@@ -64,7 +59,6 @@ export 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/esm/react/nodes/table/sticky.js

@@ -1,45 +1,45 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
-import * as colors from '@atlaskit/theme/colors';
+import * as colors from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+
 var N40A = colors.N40A;
+import { token } from '@atlaskit/tokens';
 import { findHorizontalOverflowScrollParent } from '../../../utils';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export var tableStickyPadding = 8;
-var fixedTableDivModeToPosition = {
-  stick: 'fixed',
-  'pin-bottom': 'absolute'
-};
-
-var getModeSpecificStyles = function getModeSpecificStyles(mode) {
-  if (mode === 'none') {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: none;\n    "])));
-  } else {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: ", ";\n    "])), fixedTableDivModeToPosition[mode]);
-  }
-};
+var modeSpecficStyles = {
+  none: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))),
+  stick: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: fixed;\n  "]))),
+  'pin-bottom': css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n  "])))
+}; // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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, akEditorStickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, N40A, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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, akEditorStickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, token('elevation.surface', 'white'), token('elevation.surface.overlay', 'white'), token('elevation.shadow.overflow', "0 6px 4px -4px ".concat(N40A)), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
 };
 
 export var FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
       wrapperWidth = props.wrapperWidth,
       mode = props.mode;
-  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), getModeSpecificStyles(mode)];
-  return jsx("div", {
+  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
+  var attrs = {
+    mode: mode
+  };
+  return jsx("div", _extends({}, attrs, {
+    "data-testid": "sticky-table-fixed",
     css: fixedTableCss
-  }, props.children);
+  }), props.children);
 };
 export var StickyTable = function StickyTable(_ref) {
   var top = _ref.top,
@@ -54,7 +54,6 @@ export var StickyTable = function StickyTable(_ref) {
       children = _ref.children,
       columnWidths = _ref.columnWidths,
       renderWidth = _ref.renderWidth,
-      allowDynamicTextSizing = _ref.allowDynamicTextSizing,
       rowHeight = _ref.rowHeight;
   return jsx("div", {
     css: {
@@ -67,7 +66,7 @@ export var StickyTable = function StickyTable(_ref) {
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth
   }, jsx("div", {
-    className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames),
+    className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames || ''),
     "data-layout": layout,
     style: {
       width: tableWidth
@@ -82,8 +81,7 @@ export 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/esm/react/nodes/table/table.js

@@ -6,7 +6,6 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
       columnWidths = _ref.columnWidths,
       layout = _ref.layout,
       renderWidth = _ref.renderWidth,
-      allowDynamicTextSizing = _ref.allowDynamicTextSizing,
       children = _ref.children;
   return /*#__PURE__*/React.createElement("table", {
     "data-number-column": isNumberColumnEnabled,
@@ -15,7 +14,6 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    renderWidth: renderWidth,
-    allowDynamicTextSizing: allowDynamicTextSizing
+    renderWidth: renderWidth
   }), /*#__PURE__*/React.createElement("tbody", null, children));
 });

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

@@ -293,13 +293,12 @@ export 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 = calcTableWidth(layout, renderWidth, false);
-      var lineLength = calcLineLength(renderWidth, allowDynamicTextSizing);
+      var lineLength = calcLineLength();
       var left;
 
       if (canUseLinelength(this.props.rendererAppearance) && tableWidth !== 'inherit') {
@@ -322,10 +321,9 @@ export 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.createElement("div", {
-        className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames),
+        className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
         "data-layout": layout,
         ref: this.props.handleRef,
         style: {
@@ -341,8 +339,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         columnWidths: columnWidths,
         layout: layout,
         isNumberColumnEnabled: isNumberColumnEnabled,
-        renderWidth: renderWidth,
-        allowDynamicTextSizing: allowDynamicTextSizing
+        renderWidth: renderWidth
       }, this.grabFirstRowRef(children)))));
     }
   }]);
@@ -425,14 +422,28 @@ export var TableProcessor = /*#__PURE__*/function (_React$Component2) {
   return TableProcessor;
 }(React.Component);
 var TableWithShadows = overflowShadow(TableProcessor, {
-  overflowSelector: ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER)
+  overflowSelector: ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER),
+  useShadowObserver: true
 });
 
 var TableWithWidth = function TableWithWidth(props) {
   return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
+    var _props$columnWidths;
+
     var width = _ref2.width;
     var renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
-    return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
+    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.createElement(TableWithShadows, _extends({
+        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.createElement(TableProcessor, _extends({
       renderWidth: renderWidth
     }, props));
   });

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

@@ -146,8 +146,10 @@ export var withSortableColumn = function withSortableColumn(WrapperComponent) {
 
       _defineProperty(_assertThisInitialized(_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);
@@ -156,8 +158,8 @@ export var withSortableColumn = function withSortableColumn(WrapperComponent) {
 
       _defineProperty(_assertThisInitialized(_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;