@atlaskit/renderer 117.0.1 → 118.0.0

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { browser } from '@atlaskit/editor-common/browser';
 import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -17,7 +16,6 @@ import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky'
 import { Table } from './table/table';
 import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
-import { TableProcessorWithContainerStyles } from './tableNew';
 export const isTableResizingEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
   exposure: true
 });
@@ -96,6 +94,9 @@ export const isHeaderRowEnabled = rows => {
 export const tableCanBeSticky = (node, children) => {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
+/**
+ * Class for Tables in Renderer
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class TableContainer extends React.Component {
@@ -205,6 +206,10 @@ export class TableContainer extends React.Component {
       });
     });
   }
+  /**
+   *
+   * @example
+   */
   componentDidMount() {
     this.resizeObserver = new ResizeObserver(this.applyResizerChange);
     if (this.wrapperRef.current) {
@@ -224,6 +229,13 @@ export class TableContainer extends React.Component {
       this.stickyScrollbar = new TableStickyScrollbar(this.wrapperRef.current);
     }
   }
+
+  /**
+   *
+   * @param prevProps
+   * @param prevState
+   * @example
+   */
   componentDidUpdate(prevProps, prevState) {
     // toggling sticky headers visiblity
     if (this.props.stickyHeaders && !this.overflowParent) {
@@ -246,12 +258,19 @@ export class TableContainer extends React.Component {
       this.onWrapperScrolled();
     }
   }
+  /**
+   *
+   */
   get pinTop() {
     if (!this.tableRef.current || !this.stickyHeaderRef.current) {
       return;
     }
     return this.tableRef.current.offsetHeight - this.stickyHeaderRef.current.offsetHeight + tableMarginTop - tableStickyPadding;
   }
+
+  /**
+   *
+   */
   get shouldAddOverflowParentOffsetTop_DO_NOT_USE() {
     // IF the StickyHeaderConfig specifies that the default scroll root offsetTop should be added
     // AND the StickyHeaderConfig specifies a default scroll root id
@@ -259,6 +278,10 @@ export class TableContainer extends React.Component {
     // THEN we should add the OverflowParent offset top (RETURN TRUE)
     return this.props.stickyHeaders && !!this.props.stickyHeaders.shouldAddDefaultScrollRootOffsetTop_DO_NOT_USE && !!this.props.stickyHeaders.defaultScrollRootId_DO_NOT_USE && this.overflowParent && this.overflowParent.id === this.props.stickyHeaders.defaultScrollRootId_DO_NOT_USE;
   }
+
+  /**
+   *
+   */
   get stickyTop() {
     switch (this.state.stickyMode) {
       case 'pin-bottom':
@@ -275,6 +298,11 @@ export class TableContainer extends React.Component {
         return undefined;
     }
   }
+
+  /**
+   *
+   * @example
+   */
   render() {
     var _this$tableRef$curren;
     const {
@@ -326,7 +354,7 @@ export class TableContainer extends React.Component {
     const isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
     const lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
     const lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : `${lineLengthFixedWidth}px`;
-    const fixTableSSRResizing = fg('platform-fix-table-ssr-resizing');
+    const fixTableSSRResizing = fg('platform-ssr-table-resize');
     const tableWidthNew = fixTableSSRResizing ? getTableContainerWidth(tableNode) : tableWidth;
     const shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
     let leftCSS;
@@ -424,7 +452,8 @@ export class TableContainer extends React.Component {
       rowHeight: this.state.headerRowHeight,
       tableNode: tableNode,
       rendererAppearance: rendererAppearance,
-      allowTableResizing: allowTableResizing
+      allowTableResizing: allowTableResizing,
+      fixTableSSRResizing: fixTableSSRResizing
     }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
@@ -471,6 +500,9 @@ export class TableContainer extends React.Component {
     })));
   }
 }
+/**
+ *
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class TableProcessor extends React.Component {
@@ -517,6 +549,10 @@ export class TableProcessor extends React.Component {
       });
     });
   }
+  /**
+   *
+   * @example
+   */
   render() {
     const {
       children
@@ -535,17 +571,6 @@ export class TableProcessor extends React.Component {
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TableWithShadowsAndContainerStyles = overflowShadow(TableProcessorWithContainerStyles, {
-  /**
-   * The :scope is in reference to table container and we are selecting only
-   * direct children that match the table node wrapper selector, not their
-   * descendants.
-   */
-  overflowSelector: `:scope > .${TableSharedCssClassName.TABLE_NODE_WRAPPER}`,
-  useShadowObserver: true
-});
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const TableWithShadows = overflowShadow(TableProcessor, {
   /**
@@ -556,57 +581,26 @@ const TableWithShadows = overflowShadow(TableProcessor, {
   overflowSelector: `:scope > .${TableSharedCssClassName.TABLE_NODE_WRAPPER}`,
   useShadowObserver: true
 });
-
-// Legacy tables have only one of the three layouts and do not have a width attribute
-const isLegacyTable = layout => {
-  return Boolean(['default', 'wide', 'full-width'].includes(layout));
-};
-const shouldRenderTableWithCSSWidth = (layout, width) => {
-  // The CSS width optimization is currently only in place when the table node
-  // has a defined width and is not a legacy table
-
-  // the optimization is also skipped for Safari due to browser limitations with container styles
-  if (browser.safari || !width || isLegacyTable(layout)) {
-    return false;
-  }
-  return true;
-};
 const TableWithWidth = props => {
-  var _props$tableNode$attr, _props$tableNode, _props$tableNode$attr2, _props$tableNode2, _props$tableNode2$att;
-  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  if ((shouldRenderTableWithCSSWidth((_props$tableNode$attr = (_props$tableNode = props.tableNode) === null || _props$tableNode === void 0 ? void 0 : (_props$tableNode$attr2 = _props$tableNode.attrs) === null || _props$tableNode$attr2 === void 0 ? void 0 : _props$tableNode$attr2.layout) !== null && _props$tableNode$attr !== void 0 ? _props$tableNode$attr : '', (_props$tableNode2 = props.tableNode) === null || _props$tableNode2 === void 0 ? void 0 : (_props$tableNode2$att = _props$tableNode2.attrs) === null || _props$tableNode2$att === void 0 ? void 0 : _props$tableNode2$att.width) || props.rendererAppearance === 'comment') && fg('platform-ssr-table-resize')) {
+  return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+    width
+  }) => {
     var _props$columnWidths;
+    const renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
     const colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce((total, val) => total + val, 0)) || 0;
     if (colWidthsSum || props.allowTableResizing) {
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-      return /*#__PURE__*/React.createElement(TableWithShadowsAndContainerStyles, props);
-    }
-    return /*#__PURE__*/React.createElement(TableProcessorWithContainerStyles
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    , props);
-  } else {
-    return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
-      width
-    }) => {
-      var _props$columnWidths2;
-      const renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
-      const colWidthsSum = ((_props$columnWidths2 = props.columnWidths) === null || _props$columnWidths2 === void 0 ? void 0 : _props$columnWidths2.reduce((total, val) => total + val, 0)) || 0;
-      if (colWidthsSum || props.allowTableResizing) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        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({
+      return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
         renderWidth: renderWidth
-        // Ignored via go/ees005
-        // eslint-disable-next-line react/jsx-props-no-spreading
       }, 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
+      // Ignored via go/ees005
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    }, props));
+  });
 };
 export default withSmartCardStorage(TableWithWidth);

package/dist/es2019/render-document.js

@@ -171,6 +171,11 @@ export const renderDocument = (doc, serializer, schema = defaultSchema, adfStage
   const stat = {
     sanitizeTime: 0
   };
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if (fg('platform_editor_renderer_rm_usespecbasedvalidator')) {
+    useSpecBasedValidator = true;
+  }
   const {
     output: validDoc,
     time: sanitizeTime

package/dist/es2019/ui/Expand.js

@@ -13,6 +13,7 @@ import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset } fr
 import { default as ChevronRightIconLegacy } from '@atlaskit/icon/glyph/chevron-right';
 import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import _uniqueId from 'lodash/uniqueId';
 import { injectIntl } from 'react-intl-next';
 import { MODE, PLATFORM } from '../analytics/events';
@@ -240,6 +241,8 @@ function Expand({
     className: `${nodeType}-content-wrapper`
   }, jsx(WidthProvider, null, jsx("div", {
     css: clearNextSiblingMarginTopStyle
-  }), children))));
+  }), editorExperiment('confluence_p2m_style_recalc_and_expand_joint_exp', true, {
+    exposure: true
+  }) ? expanded && children : children))));
 }
 export default injectIntl(Expand);

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

@@ -48,7 +48,7 @@ import { PortalContext } from './PortalContext';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "117.0.1";
+const packageVersion = "118.0.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -118,6 +118,9 @@ const handleMouseTripleClickInTables = event => {
  * link, call the onUnhandledClick eventHandler (which in Jira for example, may switch the
  * renderer out for the editor).
  * @param event Click event anywhere inside renderer
+ * @param props
+ * @param mouseDownSelection
+ * @example
  */
 const handleWrapperOnClick = (event, props, mouseDownSelection) => {
   var _props$eventHandlers;
@@ -463,6 +466,12 @@ const getRendererComponent = nodeComponents => {
   }
   return RendererFunctionalComponent;
 };
+
+/**
+ *
+ * @param props
+ * @example
+ */
 export function Renderer(props) {
   const {
     startPos
@@ -609,7 +618,7 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
   // Only apply container-type = inline-size when having a known width in full-page/full-width/comment mode.
   // Otherwise when appearance is unspecified the renderer size is decided by the content.
   // In this case we can't set the container-type = inline-size as it will collapse width to 0.
-  return appearance === 'comment' &&
+  return (appearance === 'full-page' || appearance === 'full-width' || appearance === 'comment') &&
   // In case of having excerpt-include on page there are multiple renderers nested.
   // Make sure only the root renderer is set to be query container.
   isTopLevelRenderer && fg('platform-ssr-table-resize') ? jsx("div", {

package/dist/esm/react/index.js

@@ -15,7 +15,7 @@ import { Doc, DocWithSelectAllTrap, mergeTextNodes, isTextWrapper, isTextNode, t
 import TextWrapperComponent from './nodes/text-wrapper';
 import { toReact as markToReact, isAnnotationMark } from './marks';
 import { getMarksByOrder, isSameMark } from '@atlaskit/editor-common/validator';
-import { calcTableColumnWidths, getColumnWidths } from '@atlaskit/editor-common/utils';
+import { getColumnWidths } from '@atlaskit/editor-common/utils';
 import { getText } from '../utils';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -400,11 +400,7 @@ var ReactSerializer = /*#__PURE__*/function () {
       var stickyHeaders = !isInsideOfTable && !insideBreakoutLayout(path) ? this.stickyHeaders : undefined;
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         allowColumnSorting: this.allowColumnSorting,
-        columnWidths:
-        // When allowTableResizing is enabled, the number of columns is required to render
-        // the same scaling logic as editor. Some tables can have unequal rows, so the entire
-        // table needs to be scanned.
-        this.allowTableResizing && fg('platform_editor_table_col_calculation_fix') ? getColumnWidths(node) : calcTableColumnWidths(node),
+        columnWidths: getColumnWidths(node),
         tableNode: node,
         stickyHeaders: stickyHeaders,
         isInsideOfBlockNode: isInsideOfBlockNode,

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

@@ -93,7 +93,9 @@ export var StickyTable = function StickyTable(_ref) {
     rowHeight = _ref.rowHeight,
     tableNode = _ref.tableNode,
     rendererAppearance = _ref.rendererAppearance,
-    allowTableResizing = _ref.allowTableResizing;
+    allowTableResizing = _ref.allowTableResizing,
+    _ref$fixTableSSRResiz = _ref.fixTableSSRResizing,
+    fixTableSSRResizing = _ref$fixTableSSRResiz === void 0 ? false : _ref$fixTableSSRResiz;
   var styles;
   /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
   if (allowTableResizing) {
@@ -126,7 +128,9 @@ export var StickyTable = function StickyTable(_ref) {
       className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " is-sticky ").concat(shadowClassNames || ''),
       "data-layout": layout,
       style: {
-        width: tableWidth
+        width: tableWidth,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        marginBottom: fixTableSSRResizing ? 0 : ''
       }
     }, jsx("div", {
       ref: innerRef
@@ -159,6 +163,9 @@ export var StickyTable = function StickyTable(_ref) {
 
 /**
  * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
+ * @param table
+ * @param defaultScrollRootId
+ * @example
  */
 function findHorizontalOverflowScrollParent(table, defaultScrollRootId) {
   var parent = table;
@@ -182,17 +189,36 @@ function findHorizontalOverflowScrollParent(table, defaultScrollRootId) {
   }
   return null;
 }
+
+/**
+ *
+ */
 export var OverflowParent = /*#__PURE__*/function () {
   function OverflowParent(ref) {
     _classCallCheck(this, OverflowParent);
     this.ref = ref;
     this.ref = ref;
   }
+
+  /**
+   *
+   * @param el
+   * @param defaultScrollRootId
+   * @example
+   */
   return _createClass(OverflowParent, [{
     key: "isElement",
-    get: function get() {
+    get:
+    /**
+     *
+     */
+    function get() {
       return this.ref instanceof HTMLElement;
     }
+
+    /**
+     *
+     */
   }, {
     key: "id",
     get: function get() {
@@ -201,6 +227,10 @@ export var OverflowParent = /*#__PURE__*/function () {
       }
       return '';
     }
+
+    /**
+     *
+     */
   }, {
     key: "top",
     get: function get() {
@@ -210,6 +240,13 @@ export var OverflowParent = /*#__PURE__*/function () {
       return 0;
     }
 
+    /**
+     *
+     * @param type
+     * @param cb
+     * @param {...any} args
+     * @example
+     */
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   }, {
@@ -224,6 +261,13 @@ export var OverflowParent = /*#__PURE__*/function () {
       (_this$ref = this.ref).addEventListener.apply(_this$ref, [type, cb].concat(args));
     }
 
+    /**
+     *
+     * @param type
+     * @param cb
+     * @param {...any} args
+     * @example
+     */
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   }, {

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

@@ -12,7 +12,6 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
-import { browser } from '@atlaskit/editor-common/browser';
 import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -28,7 +27,6 @@ import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky'
 import { Table } from './table/table';
 import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
-import { TableProcessorWithContainerStyles } from './tableNew';
 export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
   return isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && editorExperiment('support_table_in_comment', true, {
     exposure: true
@@ -120,6 +118,9 @@ export var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
 export var tableCanBeSticky = function tableCanBeSticky(node, children) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
+/**
+ * Class for Tables in Renderer
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var TableContainer = /*#__PURE__*/function (_React$Component) {
@@ -245,7 +246,12 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
   _inherits(TableContainer, _React$Component);
   return _createClass(TableContainer, [{
     key: "componentDidMount",
-    value: function componentDidMount() {
+    value:
+    /**
+     *
+     * @example
+     */
+    function componentDidMount() {
       this.resizeObserver = new ResizeObserver(this.applyResizerChange);
       if (this.wrapperRef.current) {
         this.resizeObserver.observe(this.wrapperRef.current);
@@ -264,6 +270,13 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         this.stickyScrollbar = new TableStickyScrollbar(this.wrapperRef.current);
       }
     }
+
+    /**
+     *
+     * @param prevProps
+     * @param prevState
+     * @example
+     */
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
@@ -290,12 +303,20 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "pinTop",
-    get: function get() {
+    get:
+    /**
+     *
+     */
+    function get() {
       if (!this.tableRef.current || !this.stickyHeaderRef.current) {
         return;
       }
       return this.tableRef.current.offsetHeight - this.stickyHeaderRef.current.offsetHeight + tableMarginTop - tableStickyPadding;
     }
+
+    /**
+     *
+     */
   }, {
     key: "shouldAddOverflowParentOffsetTop_DO_NOT_USE",
     get: function get() {
@@ -305,6 +326,10 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       // THEN we should add the OverflowParent offset top (RETURN TRUE)
       return this.props.stickyHeaders && !!this.props.stickyHeaders.shouldAddDefaultScrollRootOffsetTop_DO_NOT_USE && !!this.props.stickyHeaders.defaultScrollRootId_DO_NOT_USE && this.overflowParent && this.overflowParent.id === this.props.stickyHeaders.defaultScrollRootId_DO_NOT_USE;
     }
+
+    /**
+     *
+     */
   }, {
     key: "stickyTop",
     get: function get() {
@@ -323,6 +348,11 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
           return undefined;
       }
     }
+
+    /**
+     *
+     * @example
+     */
   }, {
     key: "render",
     value: function render() {
@@ -376,7 +406,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       var isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
       var lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
       var lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
-      var fixTableSSRResizing = fg('platform-fix-table-ssr-resizing');
+      var fixTableSSRResizing = fg('platform-ssr-table-resize');
       var tableWidthNew = fixTableSSRResizing ? getTableContainerWidth(tableNode) : tableWidth;
       var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
       var leftCSS;
@@ -474,7 +504,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         rowHeight: this.state.headerRowHeight,
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
-        allowTableResizing: allowTableResizing
+        allowTableResizing: allowTableResizing,
+        fixTableSSRResizing: fixTableSSRResizing
       }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
@@ -522,6 +553,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 }(React.Component);
+/**
+ *
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var TableProcessor = /*#__PURE__*/function (_React$Component2) {
@@ -572,7 +606,12 @@ export var TableProcessor = /*#__PURE__*/function (_React$Component2) {
   _inherits(TableProcessor, _React$Component2);
   return _createClass(TableProcessor, [{
     key: "render",
-    value: function render() {
+    value:
+    /**
+     *
+     * @example
+     */
+    function render() {
       var children = this.props.children;
       if (!children) {
         return null;
@@ -589,17 +628,6 @@ export var TableProcessor = /*#__PURE__*/function (_React$Component2) {
   }]);
 }(React.Component);
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-var TableWithShadowsAndContainerStyles = overflowShadow(TableProcessorWithContainerStyles, {
-  /**
-   * The :scope is in reference to table container and we are selecting only
-   * direct children that match the table node wrapper selector, not their
-   * descendants.
-   */
-  overflowSelector: ":scope > .".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER),
-  useShadowObserver: true
-});
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var TableWithShadows = overflowShadow(TableProcessor, {
   /**
@@ -610,60 +638,27 @@ var TableWithShadows = overflowShadow(TableProcessor, {
   overflowSelector: ":scope > .".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER),
   useShadowObserver: true
 });
-
-// Legacy tables have only one of the three layouts and do not have a width attribute
-var isLegacyTable = function isLegacyTable(layout) {
-  return Boolean(['default', 'wide', 'full-width'].includes(layout));
-};
-var shouldRenderTableWithCSSWidth = function shouldRenderTableWithCSSWidth(layout, width) {
-  // The CSS width optimization is currently only in place when the table node
-  // has a defined width and is not a legacy table
-
-  // the optimization is also skipped for Safari due to browser limitations with container styles
-  if (browser.safari || !width || isLegacyTable(layout)) {
-    return false;
-  }
-  return true;
-};
 var TableWithWidth = function TableWithWidth(props) {
-  var _props$tableNode$attr, _props$tableNode, _props$tableNode2;
-  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  if ((shouldRenderTableWithCSSWidth((_props$tableNode$attr = (_props$tableNode = props.tableNode) === null || _props$tableNode === void 0 || (_props$tableNode = _props$tableNode.attrs) === null || _props$tableNode === void 0 ? void 0 : _props$tableNode.layout) !== null && _props$tableNode$attr !== void 0 ? _props$tableNode$attr : '', (_props$tableNode2 = props.tableNode) === null || _props$tableNode2 === void 0 || (_props$tableNode2 = _props$tableNode2.attrs) === null || _props$tableNode2 === void 0 ? void 0 : _props$tableNode2.width) || props.rendererAppearance === 'comment') && fg('platform-ssr-table-resize')) {
+  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
     var _props$columnWidths;
+    var width = _ref2.width;
+    var renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
     var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
       return total + val;
     }, 0)) || 0;
     if (colWidthsSum || props.allowTableResizing) {
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-      return /*#__PURE__*/React.createElement(TableWithShadowsAndContainerStyles, props);
-    }
-    return /*#__PURE__*/React.createElement(TableProcessorWithContainerStyles
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    , props);
-  } else {
-    return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
-      var _props$columnWidths2;
-      var width = _ref2.width;
-      var renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
-      var colWidthsSum = ((_props$columnWidths2 = props.columnWidths) === null || _props$columnWidths2 === void 0 ? void 0 : _props$columnWidths2.reduce(function (total, val) {
-        return total + val;
-      }, 0)) || 0;
-      if (colWidthsSum || props.allowTableResizing) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        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({
+      return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
         renderWidth: renderWidth
-        // Ignored via go/ees005
-        // eslint-disable-next-line react/jsx-props-no-spreading
       }, 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
+      // Ignored via go/ees005
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    }, props));
+  });
 };
 export default withSmartCardStorage(TableWithWidth);

package/dist/esm/render-document.js

@@ -205,6 +205,11 @@ export var renderDocument = function renderDocument(doc, serializer) {
   var stat = {
     sanitizeTime: 0
   };
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if (fg('platform_editor_renderer_rm_usespecbasedvalidator')) {
+    useSpecBasedValidator = true;
+  }
   var _withStopwatch = withStopwatch(function () {
       return memoValidation(doc, schema, adfStage, useSpecBasedValidator, dispatchAnalyticsEvent, skipValidation);
     }),