@atlaskit/renderer 95.0.1 → 96.0.2

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

@@ -31,7 +31,7 @@ var _react2 = require("@emotion/react");
 
 var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
 
-var _adfUtils = require("@atlaskit/adf-utils");
+var _traverse = require("@atlaskit/adf-utils/traverse");
 
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 
@@ -224,7 +224,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
               platform: _events.PLATFORM.WEB,
               duration: duration,
               ttfb: (0, _utils.getResponseEndTime)(),
-              nodes: (0, _adfUtils.reduce)(_this2.props.document, function (acc, node) {
+              nodes: (0, _traverse.reduce)(_this2.props.document, function (acc, node) {
                 acc[node.type] = (acc[node.type] || 0) + 1;
                 return acc;
               }, {}),
@@ -266,7 +266,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         appearance: props.appearance,
         disableHeadingIDs: props.disableHeadingIDs,
         disableActions: props.disableActions,
-        allowDynamicTextSizing: props.allowDynamicTextSizing,
         allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
         allowColumnSorting: props.allowColumnSorting,
         fireAnalyticsEvent: this.fireAnalyticsEvent,
@@ -295,7 +294,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           onError = _this$props.onError,
           appearance = _this$props.appearance,
           adfStage = _this$props.adfStage,
-          allowDynamicTextSizing = _this$props.allowDynamicTextSizing,
           truncated = _this$props.truncated,
           maxHeight = _this$props.maxHeight,
           fadeOutHeight = _this$props.fadeOutHeight,
@@ -377,7 +375,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           }
         }, (0, _react2.jsx)(_SmartCardStorage.Provider, null, (0, _react2.jsx)(RendererWrapper, {
           appearance: appearance,
-          dynamicTextSizing: !!allowDynamicTextSizing,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           allowColumnSorting: allowColumnSorting,
           allowCopyToClipboard: allowCopyToClipboard,
@@ -386,9 +383,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
           onMouseDown: this.onMouseDownEditView
-        }, enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, {
-          allowDynamicTextSizing: !!allowDynamicTextSizing
-        }) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
+        }, enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, null) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
@@ -413,7 +408,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
 
         return (0, _react2.jsx)(RendererWrapper, {
           appearance: appearance,
-          dynamicTextSizing: !!allowDynamicTextSizing,
           allowCopyToClipboard: allowCopyToClipboard,
           allowPlaceholderText: allowPlaceholderText,
           allowColumnSorting: allowColumnSorting,
@@ -469,7 +463,6 @@ var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
 
 var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   var allowColumnSorting = props.allowColumnSorting,
-      dynamicTextSizing = props.dynamicTextSizing,
       allowNestedHeaderLinks = props.allowNestedHeaderLinks,
       innerRef = props.innerRef,
       appearance = props.appearance,
@@ -479,8 +472,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   return (0, _react2.jsx)(_ui.WidthProvider, {
     className: "ak-renderer-wrapper"
   }, (0, _react2.jsx)(_ui.BaseTheme, {
-    dynamicTextSizing: dynamicTextSizing,
-    baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
+    baseFontSize: appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
   }, (0, _react2.jsx)("div", {
     ref: innerRef,
     onClick: onClick,

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

@@ -96,7 +96,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
     headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
 
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      &.", "\n        .", " {\n        cursor: default;\n      }\n\n      .", " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .", " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .", " {\n          opacity: 1;\n        }\n      }\n    }\n  "])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, _styles.tableCellPadding, (0, _tokens.token)('color.border.focused', colors.B300), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-of-type + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-of-type + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      &.", "\n        .", " {\n        cursor: default;\n      }\n\n      .", " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .", " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .", " {\n          opacity: 1;\n        }\n      }\n    }\n  "])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, _styles.tableCellPadding, (0, _tokens.token)('color.border.focused', colors.B300), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER);
 };
 
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
@@ -126,7 +126,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     var themeProps = {
       theme: theme
     };
-    return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: ", "px;\n    line-height: 1.5rem;\n    color: ", ";\n\n    .", "::after {\n      // we add a clearfix after ak-renderer-document in order to\n      // contain internal floats (such as media images that are \"wrap-left\")\n      // to just the renderer (and not spill outside of it)\n      content: '';\n      visibility: hidden;\n      display: block;\n      height: 0;\n      clear: both;\n    }\n\n    ", "\n    ", "\n\n    & h1 {\n      ", "\n    }\n\n    & h2 {\n      ", "\n    }\n\n    & h3 {\n      ", "\n    }\n\n    & h4 {\n      ", "\n    }\n\n    & h5 {\n      ", "\n    }\n\n    & h6 {\n      ", "\n    }\n\n    & span.akActionMark {\n      color: ", ";\n      text-decoration: none;\n\n      &:hover {\n        color: ", ";\n        text-decoration: underline;\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    & span.akActionMark {\n      cursor: pointer;\n    }\n\n    & span[data-placeholder] {\n      color: ", ";\n    }\n\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", "\n\n    & .UnknownBlock {\n      font-family: ", ";\n      font-size: ", ";\n      font-weight: 400;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n\n    & span.date-node {\n      background: ", ";\n      border-radius: ", "px;\n      color: ", ";\n      padding: 2px 4px;\n      margin: 0 1px;\n      transition: background 0.3s;\n    }\n\n    & span.date-node-highlighted {\n      background: ", ";\n      color: ", ";\n    }\n\n    & .renderer-image {\n      max-width: 100%;\n      display: block;\n      margin: ", "px 0;\n    }\n\n    .", ".rich-media-wrapped\n      + .", ":not(.rich-media-wrapped) {\n      clear: both;\n    }\n\n    & .code-block,\n    & blockquote,\n    & hr,\n    & > div > div:not(.rich-media-wrapped),\n    .", ".rich-media-wrapped\n      + .rich-media-wrapped\n      + *:not(.rich-media-wrapped),\n    .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n    .", ".image-align-start,\n      .", ".image-center,\n      .", ".image-align-end {\n      clear: both;\n    }\n\n    & .rich-media-wrapped {\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        margin-top: 8px;\n      }\n    }\n\n    ", "\n    /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    /* Breakout for tables and extensions */\n    .", " > {\n      * .", " {\n        width: 100% !important;\n        left: 0 !important;\n      }\n\n      * .", " {\n        overflow-x: auto;\n      }\n\n      & .", ":first-child {\n        margin-top: 0;\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n      }\n\n      .", " {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n\n      .", " {\n        overflow-x: auto;\n      }\n    }\n\n    ", "\n\n    .", " .", " {\n      z-index: 0;\n      transition: all 0.1s linear;\n      display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n      /** Shadow overrides */\n      &.", "::after,\n        &.", "::before {\n        top: ", "px;\n        height: calc(100% - ", "px);\n        z-index: ", ";\n      }\n\n      /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n      table {\n        height: 1px; /* will be ignored */\n        ", ";\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      table tr:first-child {\n        height: 100%;\n\n        td,\n        th {\n          position: relative;\n        }\n      }\n\n      table[data-number-column='true'] {\n        .", " {\n          background-color: ", ";\n          border-right: 1px solid\n            ", ";\n          width: ", "px;\n          text-align: center;\n          color: ", ";\n          font-size: ", ";\n        }\n\n        .fixed .", " {\n          border-right: 0px none;\n        }\n      }\n    }\n\n    tr[data-header-row].fixed {\n      position: fixed !important;\n      display: flex;\n      overflow: hidden;\n      z-index: ", ";\n\n      border-right: 1px solid\n        ", ";\n      border-bottom: 1px solid\n        ", ";\n\n      /* this is to compensate for the table border */\n      transform: translateX(-1px);\n    }\n\n    .sticky > th {\n      z-index: ", ";\n      position: sticky !important;\n      top: 0;\n    }\n\n    /* Make the number column header sticky */\n    .sticky > td {\n      position: sticky !important;\n      top: 0;\n    }\n\n    /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n    .sticky th,\n    .sticky td {\n      box-shadow: 0px 1px\n          ", ",\n        0px -0.5px ", ",\n        inset -1px 0px ", ",\n        0px -1px ", ";\n    }\n\n    /* this will remove jumpiness caused in Chrome for sticky headers */\n    .fixed + tr {\n      min-height: 0px;\n    }\n\n    /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n    & .code-block {\n      max-width: 100%;\n      /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n      /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n      display: -ms-grid;\n      display: grid;\n      -ms-grid-columns: auto 1fr;\n      /* stylelint-enable */\n\n      grid-template-columns: minmax(0, 1fr);\n      position: relative;\n      border-radius: ", "px;\n\n      /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n      word-wrap: normal;\n\n      & > span {\n        /* stylelint-disable value-no-vendor-prefix */\n        -ms-grid-row: 1;\n        -ms-grid-column: 2;\n        /* stylelint-enable */\n        grid-column: 1;\n      }\n    }\n\n    & .MediaGroup,\n    & .code-block {\n      margin-top: ", ";\n\n      &:first-child {\n        margin-top: 0;\n      }\n\n      &:hover button.copy-to-clipboard,\n      .copy-to-clipboard:focus {\n        opacity: 1;\n        position: absolute;\n        height: 32px;\n        width: 32px;\n        right: 6px;\n        top: 4px;\n        padding: 2px;\n      }\n    }\n\n    ", ";\n    & [data-layout-section] {\n      margin-top: ", "px;\n      & > div + div {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        & > div + div {\n          margin-left: 0;\n        }\n      }\n    }\n  "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
+    return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: ", "px;\n    line-height: 1.5rem;\n    color: ", ";\n\n    .", "::after {\n      // we add a clearfix after ak-renderer-document in order to\n      // contain internal floats (such as media images that are \"wrap-left\")\n      // to just the renderer (and not spill outside of it)\n      content: '';\n      visibility: hidden;\n      display: block;\n      height: 0;\n      clear: both;\n    }\n\n    ", "\n    ", "\n\n    & h1 {\n      ", "\n    }\n\n    & h2 {\n      ", "\n    }\n\n    & h3 {\n      ", "\n    }\n\n    & h4 {\n      ", "\n    }\n\n    & h5 {\n      ", "\n    }\n\n    & h6 {\n      ", "\n    }\n\n    & span.akActionMark {\n      color: ", ";\n      text-decoration: none;\n\n      &:hover {\n        color: ", ";\n        text-decoration: underline;\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    & span.akActionMark {\n      cursor: pointer;\n    }\n\n    & span[data-placeholder] {\n      color: ", ";\n    }\n\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", "\n\n    & .UnknownBlock {\n      font-family: ", ";\n      font-size: ", ";\n      font-weight: 400;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n\n    & span.date-node {\n      background: ", ";\n      border-radius: ", "px;\n      color: ", ";\n      padding: 2px 4px;\n      margin: 0 1px;\n      transition: background 0.3s;\n    }\n\n    & span.date-node-highlighted {\n      background: ", ";\n      color: ", ";\n    }\n\n    & .renderer-image {\n      max-width: 100%;\n      display: block;\n      margin: ", "px 0;\n    }\n\n    .", ".rich-media-wrapped\n      + .", ":not(.rich-media-wrapped) {\n      clear: both;\n    }\n\n    & .code-block,\n    & blockquote,\n    & hr,\n    & > div > div:not(.rich-media-wrapped),\n    .", ".rich-media-wrapped\n      + .rich-media-wrapped\n      + *:not(.rich-media-wrapped),\n    .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n    .", ".image-align-start,\n      .", ".image-center,\n      .", ".image-align-end {\n      clear: both;\n    }\n\n    & .rich-media-wrapped {\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        margin-top: 8px;\n      }\n    }\n\n    ", "\n    /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    /* Breakout for tables and extensions */\n    .", " > {\n      * .", " {\n        width: 100% !important;\n        left: 0 !important;\n      }\n\n      * .", " {\n        overflow-x: auto;\n      }\n\n      & .", ":first-child {\n        margin-top: 0;\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n      }\n\n      .", " {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n\n      .", " {\n        overflow-x: auto;\n      }\n\n      .", "\n        .", " {\n        display: flex;\n      }\n    }\n\n    ", "\n\n    .", " .", " {\n      z-index: 0;\n      transition: all 0.1s linear;\n      display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n      /** Shadow overrides */\n      &.", "::after,\n        &.", "::before {\n        top: ", "px;\n        height: calc(100% - ", "px);\n        z-index: ", ";\n      }\n\n      &\n        .", ",\n        &\n        .", " {\n        height: calc(100% - ", "px);\n      }\n\n      /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n      table {\n        height: 1px; /* will be ignored */\n        ", ";\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      table tr:first-of-type {\n        height: 100%;\n\n        td,\n        th {\n          position: relative;\n        }\n      }\n\n      table[data-number-column='true'] {\n        .", " {\n          background-color: ", ";\n          border-right: 1px solid\n            ", ";\n          width: ", "px;\n          text-align: center;\n          color: ", ";\n          font-size: ", ";\n        }\n\n        .fixed .", " {\n          border-right: 0px none;\n        }\n      }\n    }\n\n    tr[data-header-row].fixed {\n      position: fixed !important;\n      display: flex;\n      overflow: hidden;\n      z-index: ", ";\n\n      border-right: 1px solid\n        ", ";\n      border-bottom: 1px solid\n        ", ";\n\n      /* this is to compensate for the table border */\n      transform: translateX(-1px);\n    }\n\n    .sticky > th {\n      z-index: ", ";\n      position: sticky !important;\n      top: 0;\n    }\n\n    /* Make the number column header sticky */\n    .sticky > td {\n      position: sticky !important;\n      top: 0;\n    }\n\n    /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n    .sticky th,\n    .sticky td {\n      box-shadow: 0px 1px\n          ", ",\n        0px -0.5px ", ",\n        inset -1px 0px ", ",\n        0px -1px ", ";\n    }\n\n    /* this will remove jumpiness caused in Chrome for sticky headers */\n    .fixed + tr {\n      min-height: 0px;\n    }\n\n    /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n    & .code-block {\n      max-width: 100%;\n      /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n      /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n      display: -ms-grid;\n      display: grid;\n      -ms-grid-columns: auto 1fr;\n      /* stylelint-enable */\n\n      grid-template-columns: minmax(0, 1fr);\n      position: relative;\n      border-radius: ", "px;\n\n      /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n      word-wrap: normal;\n\n      & > span {\n        /* stylelint-disable value-no-vendor-prefix */\n        -ms-grid-row: 1;\n        -ms-grid-column: 2;\n        /* stylelint-enable */\n        grid-column: 1;\n      }\n    }\n\n    & .MediaGroup,\n    & .code-block {\n      margin-top: ", ";\n\n      &:first-child {\n        margin-top: 0;\n      }\n\n      &:hover button.copy-to-clipboard,\n      .copy-to-clipboard:focus {\n        opacity: 1;\n        position: absolute;\n        height: 32px;\n        width: 32px;\n        right: 6px;\n        top: 4px;\n        padding: 2px;\n      }\n    }\n\n    ", ";\n    & [data-layout-section] {\n      margin-top: ", "px;\n      & > div + div {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        & > div + div {\n          margin-left: 0;\n        }\n      }\n    }\n  "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
       light: (0, _tokens.token)('color.text', colors.N800),
       dark: (0, _tokens.token)('color.text', '#B8C7E0')
     })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), (0, _tokens.token)('color.link', colors.B400), (0, _tokens.token)('color.link', colors.B300), (0, _tokens.token)('color.link.pressed', colors.B500), colors.placeholderText(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
@@ -135,7 +135,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), (0, _constants.borderRadius)(), (0, _components.themed)({
       light: (0, _tokens.token)('color.text', colors.N800),
       dark: (0, _tokens.token)('color.text', colors.DN600)
-    })(themeProps), (0, _tokens.token)('color.background.danger', colors.R50), (0, _tokens.token)('color.text.danger', colors.R500), (0, _constants.gridSize)() * 3, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
+    })(themeProps), (0, _tokens.token)('color.background.danger', colors.R50), (0, _tokens.token)('color.text.danger', colors.R500), (0, _constants.gridSize)() * 3, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
       light: (0, _tokens.token)('color.background.neutral', _editorSharedStyles.akEditorTableToolbar),
       dark: (0, _tokens.token)('color.background.neutral', _editorSharedStyles.akEditorTableToolbarDark)
     })(themeProps), (0, _components.themed)({

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ADFEncoder = void 0;
-exports.findHorizontalOverflowScrollParent = findHorizontalOverflowScrollParent;
 exports.findInTree = findInTree;
 exports.getText = exports.getPlatform = exports.getEventHandler = void 0;
 
@@ -41,32 +40,9 @@ var getEventHandler = function getEventHandler(eventHandlers, type) {
   var eventName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'onClick';
   return eventHandlers && type && eventHandlers[type] && eventHandlers[type][eventName];
 };
-/**
- * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
- */
-
 
 exports.getEventHandler = getEventHandler;
 
-function findHorizontalOverflowScrollParent(table) {
-  var parent = table;
-
-  if (!parent) {
-    return null;
-  }
-
-  while (parent = parent.parentElement) {
-    // IE11 on Window 8 doesn't show styles from CSS when accessing through element.style property.
-    var style = window.getComputedStyle(parent);
-
-    if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
-      return parent;
-    }
-  }
-
-  return null;
-}
-
 var getPlatform = function getPlatform(rendererAppearance) {
   if (rendererAppearance === 'mobile') {
     return 'mobile';

package/dist/cjs/version.json

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

@@ -23,22 +23,25 @@ const PanelStyled = props => {
   `;
 
   if (props['data-panel-type'] === PanelType.CUSTOM && props.backgroundColor) {
-    styles = theme => css`
-      &.${PanelSharedCssClassName.prefix} {
-        ${panelSharedStylesWithoutPrefix({
-      theme
-    })}
-      }
-
-      &[data-panel-type=${PanelType.CUSTOM}] {
-        background-color: ${props.backgroundColor};
-        ${themed({
-      dark: getPanelBackgroundDarkModeColors
-    })({
-      theme
-    })};
-      }
-    `;
+    styles = theme => {
+      const customStyle = themed({
+        dark: getPanelBackgroundDarkModeColors,
+        light: `background-color: ${props.backgroundColor};`
+      })({
+        theme
+      });
+      return css`
+        &.${PanelSharedCssClassName.prefix} {
+          ${panelSharedStylesWithoutPrefix({
+        theme
+      })}
+        }
+
+        &[data-panel-type=${PanelType.CUSTOM}] {
+          ${customStyle};
+        }
+      `;
+    };
   }
 
   return jsx("div", _extends({

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

@@ -5,13 +5,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
-
-const {
-  N40A
-} = colors;
+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 const tableStickyPadding = 8;
@@ -86,7 +81,6 @@ export const StickyTable = ({
   children,
   columnWidths,
   renderWidth,
-  allowDynamicTextSizing,
   rowHeight
 }) => {
   return jsx("div", {
@@ -100,7 +94,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
@@ -115,8 +109,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
@@ -128,6 +121,29 @@ export const StickyTable = ({
     invisible: true
   }))))));
 };
+/**
+ * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
+ */
+
+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 class OverflowParent {
   constructor(ref) {
     this.ref = ref;

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