@atlaskit/renderer 95.0.0 → 96.0.1

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);
         }

package/dist/es2019/render-document.js

@@ -5,7 +5,7 @@ import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaski
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from './analytics/enums';
 import { PLATFORM } from './analytics/events';
 import { trackUnsupportedContentLevels } from './analytics/unsupported-content';
-import { transformMediaLinkMarks } from '@atlaskit/adf-utils';
+import { transformMediaLinkMarks } from '@atlaskit/adf-utils/transforms';
 const SUPPORTS_HIRES_TIMER_API = !!(window.performance && performance.now);
 
 const withStopwatch = cb => {

package/dist/es2019/ui/MediaCard.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
-import { filter } from '@atlaskit/adf-utils';
+import { filter } from '@atlaskit/adf-utils/traverse';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client';
 import { withImageLoader } from '@atlaskit/editor-common/utils';

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

@@ -7,9 +7,7 @@ import { breakoutConsts } from '@atlaskit/editor-common/utils';
  * More info: https://product-fabric.atlassian.net/wiki/spaces/E/pages/1216218119/Renderer+SSR+for+Breakout+Nodes
  */
 
-export function BreakoutSSRInlineScript({
-  allowDynamicTextSizing
-}) {
+export function BreakoutSSRInlineScript() {
   /**
    * Should only inline this script while SSR,
    * not needed on the client side.
@@ -19,7 +17,7 @@ export function BreakoutSSRInlineScript({
   }
 
   const id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
-  const context = createBreakoutInlineScript(id, allowDynamicTextSizing);
+  const context = createBreakoutInlineScript(id);
   return /*#__PURE__*/React.createElement("script", {
     "data-breakout-script-id": id,
     dangerouslySetInnerHTML: {
@@ -27,11 +25,11 @@ export function BreakoutSSRInlineScript({
     }
   });
 }
-export function createBreakoutInlineScript(id, allowDynamicTextSizing) {
+export function createBreakoutInlineScript(id) {
   return `
   (function(window){
     ${breakoutInlineScriptContext};
-    (${applyBreakoutAfterSSR.toString()})("${id}", ${allowDynamicTextSizing}, breakoutConsts);
+    (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts);
   })(window);
 `;
 }
@@ -44,7 +42,7 @@ export const breakoutInlineScriptContext = `
   breakoutConsts.calcWideWidth = ${breakoutConsts.calcWideWidth.toString()};
 `;
 
-function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
+function applyBreakoutAfterSSR(id, breakoutConsts) {
   const MEDIA_NODE_TYPE = 'mediaSingle';
   const WIDE_LAYOUT_MODES = ['full-width', 'wide'];
 
@@ -98,7 +96,7 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
           // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
 
           if (node.classList.contains('pm-table-container')) {
-            const lineLength = breakoutConsts.calcLineLength(renderer.offsetWidth, allowDynamicTextSizing);
+            const lineLength = breakoutConsts.calcLineLength();
             const left = lineLength / 2 - parseInt(width) / 2;
 
             if (left < 0) {

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

@@ -6,7 +6,7 @@ import React, { Fragment, useContext, useLayoutEffect, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
-import { reduce } from '@atlaskit/adf-utils';
+import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI } from '@atlaskit/editor-common/utils';
@@ -192,7 +192,6 @@ export class Renderer extends PureComponent {
       appearance: props.appearance,
       disableHeadingIDs: props.disableHeadingIDs,
       disableActions: props.disableActions,
-      allowDynamicTextSizing: props.allowDynamicTextSizing,
       allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
       allowColumnSorting: props.allowColumnSorting,
       fireAnalyticsEvent: this.fireAnalyticsEvent,
@@ -218,7 +217,6 @@ export class Renderer extends PureComponent {
       onError,
       appearance,
       adfStage,
-      allowDynamicTextSizing,
       truncated,
       maxHeight,
       fadeOutHeight,
@@ -299,7 +297,6 @@ export class Renderer extends PureComponent {
         }
       }, jsx(SmartCardStorageProvider, null, jsx(RendererWrapper, {
         appearance: appearance,
-        dynamicTextSizing: !!allowDynamicTextSizing,
         allowNestedHeaderLinks: allowNestedHeaderLinks,
         allowColumnSorting: allowColumnSorting,
         allowCopyToClipboard: allowCopyToClipboard,
@@ -308,9 +305,7 @@ export class Renderer extends PureComponent {
         innerRef: this.editorRef,
         onClick: handleWrapperOnClick,
         onMouseDown: this.onMouseDownEditView
-      }, enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, {
-        allowDynamicTextSizing: !!allowDynamicTextSizing
-      }) : null, jsx(RendererActionsInternalUpdater, {
+      }, enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, null) : null, jsx(RendererActionsInternalUpdater, {
         doc: pmDoc,
         schema: schema,
         onAnalyticsEvent: this.fireAnalyticsEvent
@@ -335,7 +330,6 @@ export class Renderer extends PureComponent {
 
       return jsx(RendererWrapper, {
         appearance: appearance,
-        dynamicTextSizing: !!allowDynamicTextSizing,
         allowCopyToClipboard: allowCopyToClipboard,
         allowPlaceholderText: allowPlaceholderText,
         allowColumnSorting: allowColumnSorting,
@@ -386,7 +380,6 @@ const RendererWithAnalytics = /*#__PURE__*/React.memo(props => jsx(FabricEditorA
 const RendererWrapper = /*#__PURE__*/React.memo(props => {
   const {
     allowColumnSorting,
-    dynamicTextSizing,
     allowNestedHeaderLinks,
     innerRef,
     appearance,
@@ -397,8 +390,7 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
   return jsx(WidthProvider, {
     className: "ak-renderer-wrapper"
   }, jsx(BaseTheme, {
-    dynamicTextSizing: dynamicTextSizing,
-    baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
+    baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
   }, jsx("div", {
     ref: innerRef,
     onClick: onClick,

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

@@ -9,6 +9,7 @@ import { shadowClassNames } from '@atlaskit/editor-common/ui';
 import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
+import { shadowObserverClassNames } from '@atlaskit/editor-common/ui';
 export const FullPagePadding = 32;
 
 const getLineHeight = fontCode => headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
@@ -201,11 +202,11 @@ const tableSortableColumnStyle = ({
           margin-top: 0;
         }
 
-        > .ProseMirror-gapcursor.-right:first-child + * {
+        > .ProseMirror-gapcursor.-right:first-of-type + * {
           margin-top: 0;
         }
 
-        > .ProseMirror-gapcursor:first-child + span + * {
+        > .ProseMirror-gapcursor:first-of-type + span + * {
           margin-top: 0;
         }
 
@@ -469,6 +470,11 @@ export const rendererStyles = wrapperProps => theme => {
       .${TableSharedCssClassName.TABLE_NODE_WRAPPER} {
         overflow-x: auto;
       }
+
+      .${shadowObserverClassNames.SHADOW_CONTAINER}
+        .${TableSharedCssClassName.TABLE_NODE_WRAPPER} {
+        display: flex;
+      }
     }
 
     ${tableSharedStyle(themeProps)}
@@ -486,6 +492,13 @@ export const rendererStyles = wrapperProps => theme => {
         z-index: ${akEditorStickyHeaderZIndex};
       }
 
+      &
+        .${shadowObserverClassNames.SENTINEL_LEFT},
+        &
+        .${shadowObserverClassNames.SENTINEL_RIGHT} {
+        height: calc(100% - ${tableMarginTop}px);
+      }
+
       /**
      * A hack for making all the <th /> heights equal in case some have shorter
      * content than others.
@@ -499,7 +512,7 @@ export const rendererStyles = wrapperProps => theme => {
         margin-right: 0;
       }
 
-      table tr:first-child {
+      table tr:first-of-type {
         height: 100%;
 
         td,

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/utils.js

@@ -18,28 +18,6 @@ export const getText = node => {
 export const getEventHandler = (eventHandlers, type, eventName = 'onClick') => {
   return eventHandlers && type && eventHandlers[type] && eventHandlers[type][eventName];
 };
-/**
- * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
- */
-
-export function findHorizontalOverflowScrollParent(table) {
-  let parent = table;
-
-  if (!parent) {
-    return null;
-  }
-
-  while (parent = parent.parentElement) {
-    // IE11 on Window 8 doesn't show styles from CSS when accessing through element.style property.
-    const style = window.getComputedStyle(parent);
-
-    if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
-      return parent;
-    }
-  }
-
-  return null;
-}
 export const getPlatform = rendererAppearance => {
   if (rendererAppearance === 'mobile') {
     return 'mobile';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "95.0.0",
+	"version": "96.0.1",
 	"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/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/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/panel.js

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

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

@@ -10,11 +10,8 @@ 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'; // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-
-var N40A = colors.N40A;
+import { N40A } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { findHorizontalOverflowScrollParent } from '../../../utils';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export var tableStickyPadding = 8;
@@ -54,7 +51,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 +63,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 +78,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
@@ -95,6 +90,29 @@ export var StickyTable = function StickyTable(_ref) {
     invisible: true
   }))))));
 };
+/**
+ * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
+ */
+
+function findHorizontalOverflowScrollParent(table) {
+  var parent = table;
+
+  if (!parent) {
+    return null;
+  }
+
+  while (parent = parent.parentElement) {
+    // IE11 on Window 8 doesn't show styles from CSS when accessing through element.style property.
+    var style = window.getComputedStyle(parent);
+
+    if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
+      return parent;
+    }
+  }
+
+  return null;
+}
+
 export var OverflowParent = /*#__PURE__*/function () {
   function OverflowParent(ref) {
     _classCallCheck(this, OverflowParent);

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));
 });