@atlaskit/renderer 94.0.0 → 96.0.0

package/dist/cjs/ui/SortingIcon.js

@@ -23,15 +23,19 @@ var _messages = require("../messages");
 
 var _reactIntlNext = require("react-intl-next");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2;
 
 // We use data url here because of this issue:
 // https://product-fabric.atlassian.net/browse/ED-8001
 // Remove this workaround if Firefox has fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
+// TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4136
 var TableSortIconDataUrl = "data:image/svg+xml;utf8,".concat(encodeURIComponent("<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M-8-6h24v24H-8z\"></path><path d=\"M3 8.509V1c0-.552.449-1 1-1 .552 0 1 .448 1 1V8.51l1.217-1.206a1.05 1.05 0 011.477 0 1.03 1.03 0 01.004 1.463l-.003.002-2.956 2.93a1.053 1.053 0 01-1.478 0L.305 8.767a1.03 1.03 0 01.001-1.464 1.05 1.05 0 011.477 0L3 8.508z\" fill=\"#42526E\"></path></g></svg>"));
 exports.TableSortIconDataUrl = TableSortIconDataUrl;
 var TABLE_SORTING_ICON_CLASS = 'table-sorting-icon';
-var StatusClassNames;
+var StatusClassNames; // TODO: get design to check border
+
 exports.StatusClassNames = StatusClassNames;
 
 (function (StatusClassNames) {
@@ -41,7 +45,7 @@ exports.StatusClassNames = StatusClassNames;
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
 })(StatusClassNames || (exports.StatusClassNames = StatusClassNames = {}));
 
-var wrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid #fff;\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.", " {\n    cursor: not-allowed;\n  }\n"])), (0, _constants.gridSize)() / 2, _colors.N20, _colors.N30, StatusClassNames.SORTING_NOT_ALLOWED);
+var wrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.", " {\n    cursor: not-allowed;\n  }\n"])), (0, _tokens.token)('color.border.inverse', '#fff'), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.background.neutral.subtle', _colors.N20), (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N30), StatusClassNames.SORTING_NOT_ALLOWED);
 var tableSortingIconStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  background-image: url(", ");\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), TableSortIconDataUrl, StatusClassNames.DESC, TABLE_SORTING_ICON_CLASS);
 
 var getClassName = function getClassName(status) {

package/dist/cjs/ui/annotations/draft/component.js

@@ -36,7 +36,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 markStyles = function markStyles(props) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  ", ";\n"])), (0, _styles.AnnotationSharedCSSByState)(props).focus);
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  ", ";\n"])), (0, _styles.AnnotationSharedCSSByState)(props).focus);
 };
 
 var AnnotationDraft = function AnnotationDraft(_ref) {

package/dist/cjs/ui/annotations/element/mark.js

@@ -36,7 +36,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var markStyles = function markStyles(props) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)({
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)({
     theme: props
   }).blur, (0, _styles.AnnotationSharedCSSByState)({
     theme: props

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

@@ -45,7 +45,7 @@ var useAnnotationStateByTypeEvent = function useAnnotationStateByTypeEvent(_ref)
       }
 
       var nextStates = Object.values(payload).reduce(function (acc, curr) {
-        if (curr.annotationType === type) {
+        if (curr.id && curr.annotationType === type) {
           // Check for empty state to prevent additional renders
           var isEmpty = curr.state === null || curr.state === undefined;
           return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, curr.id, !isEmpty ? curr.state : states[curr.id]));
@@ -116,7 +116,9 @@ var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
     var cb = function cb(_ref3) {
       var annotationIds = _ref3.annotationIds,
           eventTarget = _ref3.eventTarget;
-      var annotationsByType = annotationIds.map(function (id) {
+      var annotationsByType = annotationIds.filter(function (id) {
+        return !!id;
+      }).map(function (id) {
         return {
           id: id,
           type: _adfSchema.AnnotationTypes.INLINE_COMMENT

package/dist/cjs/version.json

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

package/dist/es2019/react/index.js

@@ -162,7 +162,6 @@ export default class ReactSerializer {
     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;
@@ -482,7 +481,6 @@ export default class ReactSerializer {
       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/es2019/react/marks/link.js

@@ -3,17 +3,22 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @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';
+import { token } from '@atlaskit/tokens';
 const anchorStyles = css`
-  color: ${B400};
+  color: ${token('color.link', B400)};
 
   &:hover {
-    color: ${B300};
+    color: ${token('color.link', B300)};
     text-decoration: underline;
   }
+
+  &:active {
+    color: ${token('color.link.pressed', B500)};
+  }
 `;
 export default function Link(props) {
   const {

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

@@ -10,6 +10,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 */
 const codeBlockStyle = props => css`
     tab-size: 4;
     [data-ds--code--code-block] {
@@ -26,6 +29,8 @@ const codeBlockStyle = props => css`
       background-position: 100% 0, 100% 0, 0 0;
     }
   `;
+/* eslint-enable */
+
 
 function CodeBlock(props) {
   const {

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

@@ -8,6 +8,7 @@ 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';
+import { token } from '@atlaskit/tokens';
 const copyButtonWrapperStyles = css`
   display: flex;
   position: sticky;
@@ -25,19 +26,19 @@ const copyButtonWrapperStyles = css`
     padding: 2px;
     opacity: 0;
     transition: opacity 0.2s ease 0s;
-    border: 2px solid #fff;
+    border: 2px solid ${token('color.border.inverse', '#fff')};
     border-radius: 4px;
-    background-color: ${N20};
-    color: rgb(66, 82, 110);
+    background-color: ${token('color.background.neutral.subtle', N20)};
+    color: ${token('color.icon', 'rgb(66, 82, 110)')};
   }
 
   button:hover {
-    background-color: ${N30};
+    background-color: ${token('color.background.neutral.hovered', N30)};
   }
 
   button.clicked {
-    background-color: ${N700};
-    color: #fff !important;
+    background-color: ${token('color.background.neutral.bold.pressed', N700)};
+    color: ${token('color.icon.inverse', '#fff')} !important;
   }
 `;
 

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

@@ -4,8 +4,8 @@ import _extends from "@babel/runtime/helpers/extends";
 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';
@@ -37,7 +37,6 @@ export default function EmbedCard(props) {
     layout,
     width,
     isInsideOfBlockNode,
-    allowDynamicTextSizing,
     rendererAppearance
   } = props;
   const embedIframeRef = useRef(null);
@@ -103,10 +102,8 @@ export default function EmbedCard(props) {
     if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
       const 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/es2019/react/nodes/heading-anchor.js

@@ -9,6 +9,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 const HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -25,7 +26,7 @@ const copyAnchorButtonStyles = css`
   outline: none;
   background-color: transparent;
   border: none;
-  color: ${N500};
+  color: ${token('color.icon', N500)};
   cursor: pointer;
   right: 0;
 `;
@@ -82,7 +83,7 @@ class HeadingAnchor extends 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/es2019/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';
 
 const InlineCard = props => {
   const {
@@ -22,6 +23,7 @@ const InlineCard = props => {
     onClick,
     container: portal
   };
+  const featureFlags = useFeatureFlags();
 
   if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url) {
     return /*#__PURE__*/React.createElement(CardSSR, {
@@ -37,7 +39,8 @@ const 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: data => {
       if (!data.url || !data.title) {

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

@@ -1,11 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
 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 const RenderMediaInline = props => {
   const {
     mediaProvider
   } = props;
-  const [viewMediaClientConfigState, setViewMediaClientConfigState] = useState({});
+  const [viewMediaClientConfigState, setViewMediaClientConfigState] = useState();
   useEffect(() => {
     updateViewMediaClientConfigState(mediaProvider);
   }, [mediaProvider]);
@@ -16,6 +20,18 @@ export const RenderMediaInline = props => {
       setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
     }
   };
+  /*
+   * 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,
@@ -28,20 +44,36 @@ const MediaInline = props => {
   const {
     collection,
     id,
-    providers
+    providers,
+    intl
   } = props;
   const identifier = {
     id,
     mediaItemType: 'file',
     collectionName: collection
   };
-  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(WithProviders, {
+  const defaultIntl = createIntl({
+    locale: 'en'
+  });
+  return /*#__PURE__*/React.createElement("span", _extends({}, getClipboardAttrs({
+    id,
+    collection
+  }), {
+    "data-node-type": "mediaInline"
+  }), /*#__PURE__*/React.createElement(WithProviders, {
     providers: ['mediaProvider'],
     providerFactory: providers,
     renderNode: providers => {
       const {
         mediaProvider
       } = providers;
+
+      if (!mediaProvider) {
+        return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
+          message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file)
+        });
+      }
+
       return /*#__PURE__*/React.createElement(RenderMediaInline, {
         identifier: identifier,
         mediaProvider: mediaProvider
@@ -50,4 +82,4 @@ const MediaInline = props => {
   }));
 };
 
-export default MediaInline;
+export default injectIntl(MediaInline);

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

@@ -3,8 +3,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';
@@ -48,7 +48,6 @@ const MediaSingle = props => {
     rendererAppearance,
     featureFlags,
     isInsideOfBlockNode,
-    allowDynamicTextSizing,
     layout,
     children,
     width: pctWidth
@@ -119,7 +118,6 @@ const MediaSingle = props => {
 
   const calcDimensions = (mediaContainerWidth, mediaBreakpoint) => {
     const containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    const breakpoint = mediaBreakpoint || getBreakpoint(containerWidth);
     const maxWidth = containerWidth;
     const maxHeight = height / width * maxWidth;
     const cardDimensions = {
@@ -129,12 +127,10 @@ const MediaSingle = props => {
     let nonFullWidthSize = containerWidth;
 
     if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
-      const isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
+      const 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/es2019/react/nodes/table/colgroup.js

@@ -14,11 +14,7 @@ const getTableLayoutWidth = (layout, opts) => {
       return akEditorWideLayoutWidth;
 
     default:
-      const {
-        containerWidth,
-        isDynamicTextSizingEnabled
-      } = opts || {};
-      return calcLineLength(containerWidth, isDynamicTextSizingEnabled);
+      return calcLineLength();
   }
 };
 
@@ -55,8 +51,7 @@ export const Colgroup = props => {
     columnWidths,
     layout,
     isNumberColumnEnabled,
-    renderWidth,
-    allowDynamicTextSizing
+    renderWidth
   } = props;
 
   if (!columnWidths || !isTableResized(columnWidths)) {
@@ -65,7 +60,6 @@ export const Colgroup = props => {
 
 
   const layoutWidth = getTableLayoutWidth(layout, {
-    isDynamicTextSizingEnabled: allowDynamicTextSizing,
     containerWidth: renderWidth
   });
   const maxTableWidth = renderWidth < layoutWidth ? renderWidth : layoutWidth; // If table has a layout of default, it is confined by the defined column width.

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

@@ -1,35 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+
 /** @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
+
 const {
   N40A
 } = colors;
+import { token } from '@atlaskit/tokens';
 import { findHorizontalOverflowScrollParent } from '../../../utils';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export const tableStickyPadding = 8;
-const fixedTableDivModeToPosition = {
-  stick: 'fixed',
-  'pin-bottom': 'absolute'
-};
-
-const getModeSpecificStyles = mode => {
-  if (mode === 'none') {
-    return css`
-      display: none;
-    `;
-  } else {
-    return css`
-      position: ${fixedTableDivModeToPosition[mode]};
-    `;
-  }
-};
+const modeSpecficStyles = {
+  none: css`
+    display: none;
+  `,
+  stick: css`
+    position: fixed;
+  `,
+  'pin-bottom': css`
+    position: absolute;
+  `
+}; // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 
 const fixedTableDivStaticStyles = (top, width) => css`
-  top: ${top}px;
+  ${typeof top === 'number' && `top: ${top}px;`}
   width: ${width}px;
   z-index: ${akEditorStickyHeaderZIndex};
   &
@@ -41,9 +40,10 @@ const fixedTableDivStaticStyles = (top, width) => css`
     margin-bottom: 0;
   }
 
-  border-top: ${tableStickyPadding}px solid white;
-  background: white;
-  box-shadow: 0 6px 4px -4px ${N40A};
+  border-top: ${tableStickyPadding}px solid
+    ${token('elevation.surface', 'white')};
+  background: ${token('elevation.surface.overlay', 'white')};
+  box-shadow: ${token('elevation.shadow.overflow', `0 6px 4px -4px ${N40A}`)};
 
   div[data-expanded='false'] & {
     display: none;
@@ -64,10 +64,14 @@ export const FixedTableDiv = props => {
     wrapperWidth,
     mode
   } = props;
-  const fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), getModeSpecificStyles(mode)];
-  return jsx("div", {
+  const fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
+  const attrs = {
+    mode
+  };
+  return jsx("div", _extends({}, attrs, {
+    "data-testid": "sticky-table-fixed",
     css: fixedTableCss
-  }, props.children);
+  }), props.children);
 };
 export const StickyTable = ({
   top,
@@ -82,7 +86,6 @@ export const StickyTable = ({
   children,
   columnWidths,
   renderWidth,
-  allowDynamicTextSizing,
   rowHeight
 }) => {
   return jsx("div", {
@@ -96,7 +99,7 @@ export const StickyTable = ({
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth
   }, jsx("div", {
-    className: `${TableSharedCssClassName.TABLE_CONTAINER} ${shadowClassNames}`,
+    className: `${TableSharedCssClassName.TABLE_CONTAINER} ${shadowClassNames || ''}`,
     "data-layout": layout,
     style: {
       width: tableWidth
@@ -111,8 +114,7 @@ export const StickyTable = ({
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    renderWidth: renderWidth,
-    allowDynamicTextSizing: allowDynamicTextSizing
+    renderWidth: renderWidth
   },
   /**
    * @see https://product-fabric.atlassian.net/browse/ED-10235

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

@@ -6,7 +6,6 @@ export const Table = /*#__PURE__*/React.memo(({
   columnWidths,
   layout,
   renderWidth,
-  allowDynamicTextSizing,
   children
 }) => {
   return /*#__PURE__*/React.createElement("table", {
@@ -16,7 +15,6 @@ export const Table = /*#__PURE__*/React.memo(({
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    renderWidth: renderWidth,
-    allowDynamicTextSizing: allowDynamicTextSizing
+    renderWidth: renderWidth
   }), /*#__PURE__*/React.createElement("tbody", null, children));
 });

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

@@ -253,7 +253,6 @@ export class TableContainer extends React.Component {
       isNumberColumnEnabled,
       layout,
       renderWidth,
-      allowDynamicTextSizing,
       columnWidths,
       stickyHeaders,
       tableNode
@@ -262,7 +261,7 @@ export class TableContainer extends React.Component {
       stickyMode
     } = this.state;
     let tableWidth = calcTableWidth(layout, renderWidth, false);
-    const lineLength = calcLineLength(renderWidth, allowDynamicTextSizing);
+    const lineLength = calcLineLength();
     let left;
 
     if (canUseLinelength(this.props.rendererAppearance) && tableWidth !== 'inherit') {
@@ -285,10 +284,9 @@ export class TableContainer extends 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: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames}`,
+      className: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames || ''}`,
       "data-layout": layout,
       ref: this.props.handleRef,
       style: {
@@ -304,8 +302,7 @@ export class TableContainer extends React.Component {
       columnWidths: columnWidths,
       layout: layout,
       isNumberColumnEnabled: isNumberColumnEnabled,
-      renderWidth: renderWidth,
-      allowDynamicTextSizing: allowDynamicTextSizing
+      renderWidth: renderWidth
     }, this.grabFirstRowRef(children)))));
   }
 
@@ -375,14 +372,26 @@ export class TableProcessor extends React.Component {
 
 }
 const TableWithShadows = overflowShadow(TableProcessor, {
-  overflowSelector: `.${TableSharedCssClassName.TABLE_NODE_WRAPPER}`
+  overflowSelector: `.${TableSharedCssClassName.TABLE_NODE_WRAPPER}`,
+  useShadowObserver: true
 });
 
 const TableWithWidth = props => /*#__PURE__*/React.createElement(WidthConsumer, null, ({
   width
 }) => {
+  var _props$columnWidths;
+
   const renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
-  return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
+  const colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce((total, val) => 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/es2019/react/nodes/tableCell.js

@@ -116,8 +116,11 @@ export const withSortableColumn = WrapperComponent => {
 
       _defineProperty(this, "onKeyPress", event => {
         const keys = [' ', 'Enter', 'Spacebar'];
+        const {
+          tagName
+        } = event.target; // 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);
         }