@atlaskit/renderer 137.1.9 → 137.1.11

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

@@ -4,9 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableCanBeSticky = exports.shouldHeaderStick = exports.shouldHeaderPinBottom = exports.orderChildren = exports.isTableResizingEnabled = exports.isStickyScrollbarEnabled = exports.isHeaderRowEnabled = exports.hasRowspan = exports.getRefTop = exports.default = exports.addSortableColumn = exports.TableProcessor = exports.TableContainer = void 0;
+exports.tableCanBeSticky = exports.shouldHeaderStick = exports.shouldHeaderPinBottom = exports.orderChildren = exports.isTableResizingEnabled = exports.isStickyScrollbarEnabled = exports.isHeaderRowEnabled = exports.hasRowspan = exports.getRefTop = exports.default = exports.addSortableColumn = exports.TableProcessorWithContainerStyles = exports.TableContainer = exports.RefSyncBlockFakeBorders = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -14,17 +14,16 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _reactIntl = require("react-intl");
 var _styles = require("@atlaskit/editor-common/styles");
-var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
+var _style = require("../../ui/Renderer/style");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _consts = require("../../consts");
 var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("@atlaskit/editor-common/types");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _nodeWidth = require("@atlaskit/editor-common/node-width");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _style = require("../../ui/Renderer/style");
+var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _tableCell = require("./tableCell");
 var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _sticky = require("./table/sticky");
@@ -32,7 +31,6 @@ var _table = require("./table/table");
 var _appearance = require("../utils/appearance");
 var _TableStickyScrollbar = require("./TableStickyScrollbar");
 var _rendererContext = require("../../renderer-context");
-var _tableNew = require("./tableNew");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _table2 = require("@atlaskit/editor-common/table");
 var _contentMode = require("./table/content-mode");
@@ -42,12 +40,29 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/enforce-style-prop, @repo/internal/react/no-class-components */
+var stickyContainerBaseStyles = {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  height: "var(--ds-space-250, 20px)",
+  // MAX_BROWSER_SCROLLBAR_HEIGHT
+  // Follow editor to hide by default so it does not show empty gap in SSR
+  // https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/editor/editor-plugin-table/src/nodeviews/TableComponent.tsx#957
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  display: 'block',
+  width: '100%'
+};
+var stickyContainerAdditionalStyles = {
+  visibility: 'hidden',
+  overflowX: 'auto',
+  position: 'sticky',
+  bottom: "var(--ds-space-0, 0px)",
+  zIndex: 1
+};
 var isTableResizingEnabled = exports.isTableResizingEnabled = function isTableResizingEnabled(appearance) {
   return (0, _appearance.isFullWidthOrFullPageAppearance)(appearance) || (0, _appearance.isCommentAppearance)(appearance);
 };
 var isStickyScrollbarEnabled = exports.isStickyScrollbarEnabled = function isStickyScrollbarEnabled(appearance) {
-  return (0, _appearance.isFullWidthOrFullPageAppearance)(appearance) && (0, _experiments.editorExperiment)('platform_renderer_table_sticky_scrollbar', true, {
+  return (0, _appearance.isFullWidthOrFullPageAppearance)(appearance) && (0, _editorExperiment.editorExperiment)('platform_renderer_table_sticky_scrollbar', true, {
     exposure: true
   });
 };
@@ -102,7 +117,7 @@ var shouldHeaderPinBottom = exports.shouldHeaderPinBottom = function shouldHeade
   return tableBottom - rowHeight <= scrollTop && !(tableBottom < scrollTop);
 };
 var addSortableColumn = exports.addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSorting
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 ) {
   return _react.default.Children.map(rows, function (row, index) {
     if (index === 0) {
@@ -133,44 +148,53 @@ var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnable
     return node.type === _tableCell.TableHeader;
   });
 };
-/**
- * This TableWrapper component was created to make sure that the aria-label can be
- * internationalized without needing to add `intl` to the TableContainer.
- *
- * <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
- *   <Table>...</Table>
- * </TableWrapper>
- */
-var TableWrapper = function TableWrapper(_ref2) {
-  var children = _ref2.children,
-    wrapperRef = _ref2.wrapperRef,
-    onScroll = _ref2.onScroll,
-    stickyHeaders = _ref2.stickyHeaders,
-    tabIndex = _ref2.tabIndex;
-  var _useIntl = (0, _reactIntl.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
-  var isScrollableRegion = tabIndex !== undefined;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
-    ref: wrapperRef,
-    onScroll: stickyHeaders ? onScroll : undefined
-    // Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
-    // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
-    ,
-    tabIndex: tabIndex,
-    role: isScrollableRegion ? 'region' : undefined,
-    "aria-label": isScrollableRegion ? formatMessage(_messages.tableMessages.tableScrollRegion) : undefined
-  }, children);
-};
 var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node, children
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 /**
-*
-*/
+ * Fake left/right borders rendered as direct children of TABLE_CONTAINER
+ * (the non-scrolling parent of the horizontally scrolling TABLE_NODE_WRAPPER).
+ *
+ * The visible styling for these divs lives in `tableFakeBorderStyles`
+ * (`renderer/src/ui/Renderer/RendererStyleContainer.tsx`), which is applied
+ * when `isInsideSyncBlock` is true.
+ */
+var TableFakeBorders = function TableFakeBorders(_ref2) {
+  var isNumberColumnEnabled = _ref2.isNumberColumnEnabled;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _styles.TableSharedCssClassName.TABLE_LEFT_BORDER,
+    "data-with-numbered-table": isNumberColumnEnabled ? 'true' : undefined,
+    "data-testid": "table-left-border"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _styles.TableSharedCssClassName.TABLE_RIGHT_BORDER,
+    "data-with-numbered-table": isNumberColumnEnabled ? 'true' : undefined,
+    "data-testid": "table-right-border"
+  }));
+};
+
+/**
+ * Reads `nestedRendererType` from RendererContext and renders the fake left/right
+ * borders only when the current renderer is the nested renderer for a reference
+ * synced block.
+ */
+var RefSyncBlockFakeBorders = exports.RefSyncBlockFakeBorders = function RefSyncBlockFakeBorders(_ref3) {
+  var isNumberColumnEnabled = _ref3.isNumberColumnEnabled;
+  var _useRendererContext = (0, _rendererContext.useRendererContext)(),
+    nestedRendererType = _useRendererContext.nestedRendererType;
+  var isInsideOfRefSyncBlock = nestedRendererType === 'syncedBlock';
+  if (!isInsideOfRefSyncBlock) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(TableFakeBorders, {
+    isNumberColumnEnabled: isNumberColumnEnabled
+  });
+};
+
+/**
+ * TableContainer renders tables using only CSS-based rules
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Component) {
@@ -193,6 +217,12 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     (0, _defineProperty2.default)(_this, "stickyWrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)(_this, "wrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)(_this, "overflowParent", null);
+    (0, _defineProperty2.default)(_this, "containerRef", null);
+    (0, _defineProperty2.default)(_this, "_isInsideNestedRenderer", null);
+    (0, _defineProperty2.default)(_this, "_isInsideTableCell", null);
+    // Stores the last computed style values from render() for use by applyNestedRendererTableFix().
+    // This avoids reading from the DOM which can be stale when React removes properties between renders.
+    (0, _defineProperty2.default)(_this, "lastComputedStyle", {});
     (0, _defineProperty2.default)(_this, "resizeObserver", null);
     (0, _defineProperty2.default)(_this, "applyResizerChange", function (entries) {
       var wrapperWidth = _this.state.wrapperWidth;
@@ -220,6 +250,25 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         });
       }
     });
+    /**
+     * Callback ref that captures the container DOM element and also forwards
+     * to the handleRef prop from the overflow shadow HOC.
+     */
+    (0, _defineProperty2.default)(_this, "setContainerRef", function (el) {
+      if (_this.containerRef !== el) {
+        _this._isInsideNestedRenderer = null;
+        _this._isInsideTableCell = null;
+      }
+      _this.containerRef = el;
+      var handleRef = _this.props.handleRef;
+      if (typeof handleRef === 'function') {
+        handleRef(el);
+      } else if (handleRef && (0, _typeof2.default)(handleRef) === 'object') {
+        // Ignored via go/ees005
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        handleRef.current = el;
+      }
+    });
     (0, _defineProperty2.default)(_this, "componentWillUnmount", function () {
       if (_this.overflowParent) {
         // Ignored via go/ees005
@@ -295,9 +344,148 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
   }
   (0, _inherits2.default)(TableContainer, _React$Component);
   return (0, _createClass2.default)(TableContainer, [{
+    key: "isInsideNestedRenderer",
+    value:
+    /**
+     * Checks if this table is inside a nested renderer (e.g. Include Page macro)
+     * by looking for multiple .ak-renderer-document ancestors in the DOM.
+     * The result is cached since a table's position in the DOM tree is stable after mount.
+     */
+    function isInsideNestedRenderer() {
+      if (this._isInsideNestedRenderer !== null) {
+        return this._isInsideNestedRenderer;
+      }
+      if (!this.containerRef) {
+        return false;
+      }
+      var docAncestorCount = 0;
+      var el = this.containerRef.parentElement;
+      while (el) {
+        if (el.classList.contains(_consts.RendererCssClassName.DOCUMENT)) {
+          docAncestorCount++;
+          if (docAncestorCount >= 2) {
+            this._isInsideNestedRenderer = true;
+            return true;
+          }
+        }
+        el = el.parentElement;
+      }
+      this._isInsideNestedRenderer = false;
+      return false;
+    }
+
+    /**
+     * Checks if this table is inside a table cell in the DOM. The result is cached
+     * since a table's position in the DOM tree is stable after mount.
+     */
+  }, {
+    key: "isInsideTableCell",
+    value: function isInsideTableCell() {
+      if (this._isInsideTableCell !== null) {
+        return this._isInsideTableCell;
+      }
+      if (!this.containerRef) {
+        return false;
+      }
+      this._isInsideTableCell = Boolean(this.containerRef.closest('td, th'));
+      return this._isInsideTableCell;
+    }
+  }, {
+    key: "isInsideTableContext",
+    value: function isInsideTableContext() {
+      return Boolean(this.props.isInsideOfTable || this.isInsideTableCell());
+    }
+
+    /**
+     * For tables inside nested renderers (e.g. Include Page macro), the parent
+     * renderer's CSS override forces width:100%!important and left:0!important
+     * which overrides the inline styles set by this component. Using
+     * style.setProperty with 'important' priority on inline styles beats
+     * stylesheet !important rules per the CSS cascade.
+     *
+     * Tables that are nested inside another table need to remain constrained by
+     * their table-cell context. Do not promote their width to inline !important,
+     * otherwise nested tables rendered through macros such as Excerpt Include can
+     * overflow and overlap adjacent cells.
+     *
+     * Top-level tables in nested renderers still preserve their saved width, but
+     * are capped to their containing block so wide tables do not escape constrained
+     * macro bodies such as Excerpt Include panels.
+     *
+     * Uses lastComputedStyle (populated during render) rather than reading from
+     * element.style, because React may remove properties from the DOM when their
+     * values transition to undefined between renders.
+     *
+     * `platform_nested_table_style_override_2` fixes a follow-up regression where a
+     * NON-resized table inside an Excerpt macro (not Excerpt Include) on a
+     * wide/full-width page shrinks to only show its first columns in the renderer.
+     * Inside a nested renderer (a macro body) a non-resized table's computed width
+     * is a default layout cap (760px/1800px, or a `cqw` length for full-page
+     * appearances) taken from the outer renderer's width context. That value does
+     * not match the macro's own box, so promoting it to inline `!important` makes
+     * the table collapse. Such tables have no author-chosen size to preserve, so
+     * under this gate we re-assert the parent stylesheet's intent (fill the box:
+     * `width: 100%; left: 0`) with inline `!important`.
+     *
+     * Explicitly resized tables (`tableNode.attrs.width` set) are excluded and keep
+     * the original PGXT-10226 behavior: their author-chosen width/left is promoted
+     * verbatim so the Include Page macro does not stretch or indent them. The
+     * table-cell short-circuit (PGXT-10294) above also still applies.
+     */
+  }, {
+    key: "applyNestedRendererTableFix",
+    value: function applyNestedRendererTableFix() {
+      var _this$props$tableNode;
+      if (!this.containerRef || !(0, _fg.fg)('platform_nested_table_style_override')) {
+        return;
+      }
+      if (!this.isInsideNestedRenderer() || this.isInsideTableContext()) {
+        return;
+      }
+      var _this$lastComputedSty = this.lastComputedStyle,
+        width = _this$lastComputedSty.width,
+        left = _this$lastComputedSty.left,
+        marginLeft = _this$lastComputedSty.marginLeft;
+      var style = this.containerRef.style;
+
+      // A table is "explicitly resized" when the author set a width on the node.
+      // Non-resized tables instead take a default layout cap (e.g. 760px/1800px)
+      // derived from the outer renderer's appearance.
+      var isExplicitlyResized = Boolean((_this$props$tableNode = this.props.tableNode) === null || _this$props$tableNode === void 0 ? void 0 : _this$props$tableNode.attrs.width);
+      if (!isExplicitlyResized && (0, _fg.fg)('platform_nested_table_style_override_2')) {
+        // PGXT-10421: For a NON-resized table inside a nested renderer (e.g. an
+        // Excerpt macro body), the computed width is a default layout cap
+        // (760px/1800px, or a `cqw` length for full-page appearances) taken from
+        // the *outer* renderer's width context. That value does not match the
+        // macro's own box, so promoting it to inline `!important` makes the table
+        // ignore the available space and collapse to its first columns.
+        //
+        // These tables have no author-chosen size to preserve, so re-assert the
+        // parent stylesheet's intent — fill the available box (`width: 100%`) —
+        // with inline `!important` priority so it survives React re-renders and
+        // wins over the stylesheet rule that leaks into nested renderers.
+        style.setProperty('width', '100%', 'important');
+        style.setProperty('max-width', '100%', 'important');
+        style.setProperty('left', '0', 'important');
+        style.setProperty('margin-left', '0', 'important');
+        return;
+      }
+
+      // PGXT-10226: An explicitly resized table inside a nested renderer (e.g.
+      // Include Page macro) must keep its author-chosen width and position. The
+      // parent stylesheet forces `width: 100% !important; left: 0 !important`,
+      // which would stretch and indent it, so we promote the component's own
+      // computed width/left with inline `!important` to win the cascade.
+      style.setProperty('width', width || 'auto', 'important');
+      style.setProperty('max-width', '100%', 'important');
+      style.setProperty('left', left || 'auto', 'important');
+      style.setProperty('margin-left', marginLeft || '0', 'important');
+    }
+  }, {
     key: "componentDidMount",
     value:
     /**
+     * Starts observing table dimensions and wires sticky header/scrollbar behavior after mount.
      *
      * @example
      */
@@ -319,9 +507,11 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
         this.stickyScrollbar = new _TableStickyScrollbar.TableStickyScrollbar(this.wrapperRef.current);
       }
+      this.applyNestedRendererTableFix();
     }
 
     /**
+     * Updates sticky header wiring and scroll synchronization after prop or state changes.
      *
      * @param prevProps
      * @param prevState
@@ -350,12 +540,16 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       if (prevState.stickyMode !== this.state.stickyMode) {
         this.onWrapperScrolled();
       }
+
+      // React re-applies the style prop on every render, which overwrites the
+      // !important priorities set at mount time. Re-apply after each update.
+      this.applyNestedRendererTableFix();
     }
   }, {
     key: "pinTop",
     get:
     /**
-     *
+     * Calculates the top offset used when the sticky header is pinned to the table bottom.
      */
     function get() {
       if (!this.tableRef.current || !this.stickyHeaderRef.current) {
@@ -365,7 +559,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     }
 
     /**
-     *
+     * Determines whether sticky header positioning should include the default scroll root offset.
      */
   }, {
     key: "shouldAddOverflowParentOffsetTop_DO_NOT_USE",
@@ -378,7 +572,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     }
 
     /**
-     *
+     * Resolves the top position for the sticky header based on the current sticky mode.
      */
   }, {
     key: "stickyTop",
@@ -400,6 +594,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     }
 
     /**
+     * Renders the table container, sticky header, table content, sticky scrollbar, and synced block borders.
      *
      * @example
      */
@@ -410,7 +605,6 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       var _this$props = this.props,
         isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
         layout = _this$props.layout,
-        renderWidth = _this$props.renderWidth,
         columnWidths = _this$props.columnWidths,
         stickyHeaders = _this$props.stickyHeaders,
         tableNode = _this$props.tableNode,
@@ -425,67 +619,43 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         allowFixedColumnWidthOption = _this$props.allowFixedColumnWidthOption;
       var stickyMode = this.state.stickyMode;
       var lineLengthFixedWidth = _editorSharedStyles.akEditorDefaultLayoutWidth;
-      var left;
       var updatedLayout;
-
-      // The tableWidth and left offset logic below must stay aligned with the `breakout-ssr.tsx` logic
-      // Please consider changes below carefully to not negatively impact SSR
-      // `renderWidth` cannot be depended on during SSR
-      var isRenderWidthValid = !!renderWidth && renderWidth > 0;
-      var fullPageRendererWidthCSS = (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
+      var fullPageRendererWidthCSS = (0, _editorExperiment.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
         exposure: true
       }) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(_style.FullPagePadding, "px * 2");
       var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
-        if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
-          return [isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth, "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];
-        } else if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
-          return [isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorMaxWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorMaxWidthLayoutWidth, "min(".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")")];
+        if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) {
+          return "min(".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
+        } else if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
+          return "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
         } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
-          var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
-          return [isRenderWidthValid ? renderWidth : tableContainerWidth, renderWidthCSS];
+          return renderWidthCSS;
         } else {
           // custom width, or width mapped to breakpoint
-          var _tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
-          return [isRenderWidthValid ? Math.min(_tableContainerWidth, renderWidth) : _tableContainerWidth, "min(".concat(_tableContainerWidth, "px, ").concat(renderWidthCSS, ")")];
+          var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
+          return "min(".concat(tableContainerWidth, "px, ").concat(renderWidthCSS, ")");
         }
       };
-      var _calcDefaultLayoutWid = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode),
-        _calcDefaultLayoutWid2 = (0, _slicedToArray2.default)(_calcDefaultLayoutWid, 2),
-        tableWidth = _calcDefaultLayoutWid2[0],
-        tableWidthCSS = _calcDefaultLayoutWid2[1];
+      var tableWidthCSS = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
 
       // Logic for table alignment in renderer
       var isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
-      var fullWidthLineLength = isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
       var fullWidthLineLengthCSS = "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
-      var maxWidthLineLength = isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorMaxWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorMaxWidthLayoutWidth;
       var maxWidthLineLengthCSS = "min(".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
-      var commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
       var isCommentAppearanceAndTableAlignmentEnabled = (0, _appearance.isCommentAppearance)(rendererAppearance) && allowTableAlignment;
-      var lineLength = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLength : (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) ? maxWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
       var lineLengthCSS = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLengthCSS : (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
-
-      // Setting fixTableSSRResizing to false while FG logic is true in tableNew
-      var fixTableSSRResizing = false;
-      var tableWidthNew = fixTableSSRResizing ? (0, _nodeWidth.getTableContainerWidth)(tableNode) : tableWidth;
-      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && (0, _appearance.isMaxWidthAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+      var tableWidthNew = (0, _nodeWidth.getTableContainerWidth)(tableNode);
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) || isCommentAppearanceAndTableAlignmentEnabled);
       var leftCSS;
       if (shouldCalculateLeftForAlignment) {
-        left = (tableWidth - lineLength) / 2;
         leftCSS = "(".concat(tableWidthCSS, " - ").concat(lineLengthCSS, ") / 2");
       }
-      if (fixTableSSRResizing) {
-        if (!shouldCalculateLeftForAlignment && (0, _appearance.isFullPageAppearance)(rendererAppearance)) {
-          // Note tableWidthCSS here is the renderer width
-          // When the screen is super wide we want table to break out.
-          // However if screen is smaller than 760px. We want table align to left.
-          leftCSS = "min(0px, ".concat(lineLengthCSS, " - ").concat(tableWidthCSS, ") / 2");
-        }
-      } else {
-        if (!shouldCalculateLeftForAlignment && (0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew > lineLengthFixedWidth) {
-          left = lineLengthFixedWidth / 2 - tableWidth / 2;
-        }
+      if (!shouldCalculateLeftForAlignment && (0, _appearance.isFullPageAppearance)(rendererAppearance)) {
+        // Note tableWidthCSS here is the renderer width
+        // When the screen is super wide we want table to break out.
+        // However if screen is smaller than 760px. We want table align to left.
+        leftCSS = "min(0px, ".concat(lineLengthCSS, " - ").concat(tableWidthCSS, ") / 2");
       }
       var children = _react.default.Children.toArray(this.props.children);
 
@@ -505,7 +675,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       // We can only use CSS to determine the width when we have a known width in container.
       // When appearance is full-page, full-width or comment we use CSS based width calculation.
       // Otherwise it's fixed table width (customized width) or inherit.
-      if ((rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max') && fixTableSSRResizing) {
+      if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) {
         finalTableContainerWidth = allowTableResizing ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
       }
       if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {
@@ -516,13 +686,13 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
 
         // !NOTE: it a table resized to 760 is copied from 'full-page' editor and pasted in comment editor
         // where (allowTableResizing && !allowTableAlignment), the table will loose 760px width.
-        finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== _editorSharedStyles.akEditorDefaultLayoutWidth ? fixTableSSRResizing ? "calc(".concat(tableWidthCSS, ")") : tableWidth : 'inherit';
+        finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== _editorSharedStyles.akEditorDefaultLayoutWidth ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
       }
       if (rendererAppearance === 'comment' && allowTableResizing && allowTableAlignment) {
         // If table alignment is enabled and layout is not 'align-start' or 'center', we are loading a table that was
         // created before "Support Table in Comments" FF was enabled. So the table should have the same width as renderer container
         // instead of 760 that was set on tableNode when the table had been published.
-        finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? fixTableSSRResizing ? "calc(".concat(tableWidthCSS, ")") : tableWidth : 'inherit';
+        finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
       }
       var isContentModeTable = (0, _table2.isTableInContentMode)({
         tableNode: tableNode,
@@ -532,41 +702,39 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         }),
         isTableNested: isInsideOfBlockNode || isInsideOfNestedRenderer || isInsideOfTable
       }) && (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
-      var style;
-      if (fixTableSSRResizing) {
-        style = _objectSpread(_objectSpread({}, isContentModeTable && {
-          '--renderer-table-max-width': renderWidthCSS
-        }), {}, {
-          width: finalTableContainerWidth,
-          left: leftCSS ? "calc(".concat(leftCSS, ")") : undefined,
-          marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? "calc(-1 * (".concat(leftCSS, "))") : undefined
-        });
-      } else {
-        style = _objectSpread(_objectSpread({}, isContentModeTable && {
-          '--renderer-table-max-width': "".concat(renderWidth, "px")
-        }), {}, {
-          width: finalTableContainerWidth,
-          left: left,
-          marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
-        });
-      }
+      var style = _objectSpread(_objectSpread({}, isContentModeTable && {
+        '--renderer-table-max-width': renderWidthCSS
+      }), {}, {
+        width: finalTableContainerWidth,
+        left: leftCSS ? "calc(".concat(leftCSS, ")") : undefined,
+        marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? "calc(-1 * (".concat(leftCSS, "))") : undefined
+      });
+
+      // Store computed style values for applyNestedRendererTableFix() to use.
+      // Reading from props rather than the DOM ensures correctness when React
+      // removes properties (transitions from set to undefined) between renders.
+      this.lastComputedStyle = {
+        width: typeof style.width === 'number' ? "".concat(style.width, "px") : style.width,
+        left: style.left,
+        marginLeft: style.marginLeft
+      };
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
         "data-layout": updatedLayout,
-        ref: this.props.handleRef
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        ,
+        "data-testid": "table-container",
+        ref: this.setContainerRef,
         style: style
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       }, isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
         "data-testid": "sticky-scrollbar-sentinel-top"
-      }), stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
+      }), stickyHeaders && tableNode && !isContentModeTable && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
-        tableWidth: tableWidth,
+        tableWidth: "inherit",
+        renderWidth: 0,
         layout: layout,
-        renderWidth: renderWidth,
         handleRef: this.props.handleRef,
         shadowClassNames: this.props.shadowClassNames,
         top: this.stickyTop,
@@ -579,17 +747,23 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         rendererAppearance: rendererAppearance,
         allowTableResizing: allowTableResizing,
         allowFixedColumnWidthOption: allowFixedColumnWidthOption
-      }, [children && children[0]]), /*#__PURE__*/_react.default.createElement(TableWrapper, {
-        wrapperRef: this.wrapperRef,
-        onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
-        stickyHeaders: stickyHeaders,
-        tabIndex: this.props.tabIndex
+      }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
+        ref: this.wrapperRef,
+        "data-number-column": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.isNumberColumnEnabled,
+        "data-layout": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout,
+        "data-autosize": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.__autoSize,
+        "data-table-local-id": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId,
+        "data-table-width": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width,
+        "data-vc": "table-node-wrapper",
+        onScroll: this.props.stickyHeaders && this.onWrapperScrolled
       }, /*#__PURE__*/_react.default.createElement(_table.Table, {
         innerRef: this.tableRef,
         columnWidths: columnWidths,
         layout: layout,
+        renderWidth: 0,
         isNumberColumnEnabled: isNumberColumnEnabled,
-        renderWidth: renderWidth,
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         isInsideOfBlockNode: isInsideOfBlockNode,
@@ -601,22 +775,13 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         allowFixedColumnWidthOption: allowFixedColumnWidthOption
       }, this.grabFirstRowRef(children))), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
+        className: "".concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER).concat((0, _fg.fg)('confluence_frontend_table_scrollbar_ttvc_fix') ? '-view-page' : ''),
         ref: this.stickyScrollbarRef,
-        style: {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          height: "var(--ds-space-250, 20px)",
-          // MAX_BROWSER_SCROLLBAR_HEIGHT
-          // Follow editor to hide by default so it does not show empty gap in SSR
-          // https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/editor/editor-plugin-table/src/nodeviews/TableComponent.tsx#957
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          display: fixTableSSRResizing ? 'none' : 'block',
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-          width: '100%'
-        }
+        "data-vc": "table-sticky-scrollbar-container",
+        style: (0, _fg.fg)('confluence_frontend_table_scrollbar_ttvc_fix') ? _objectSpread(_objectSpread({}, stickyContainerBaseStyles), stickyContainerAdditionalStyles) : stickyContainerBaseStyles
       }, /*#__PURE__*/_react.default.createElement("div", {
         style: {
-          width: (_this$tableRef$curren = this.tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.clientWidth,
+          width: (0, _fg.fg)('confluence_frontend_table_scrollbar_ttvc_fix') ? '100%' : (_this$tableRef$curren = this.tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.clientWidth,
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           height: '100%'
         }
@@ -624,25 +789,123 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"
-      }), /*#__PURE__*/_react.default.createElement(_tableNew.RefSyncBlockFakeBorders, {
+      }), /*#__PURE__*/_react.default.createElement(RefSyncBlockFakeBorders, {
         isNumberColumnEnabled: isNumberColumnEnabled
       })));
     }
   }]);
 }(_react.default.Component);
+var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNode, isNumberColumnEnabled) {
+  var cellEdgePropsByCellOffset = new Map();
+  var cellRightByCellOffset = new Map();
+  var occupiedGrid = [];
+  var tableWidth = 0;
+  var cellOffset = 0;
+  tableNode.forEach(function (rowNode, _rowOffset, rowIndex) {
+    var _occupiedGrid$rowInde;
+    occupiedGrid[rowIndex] = (_occupiedGrid$rowInde = occupiedGrid[rowIndex]) !== null && _occupiedGrid$rowInde !== void 0 ? _occupiedGrid$rowInde : [];
+    var columnIndex = 0;
+    cellOffset += 1;
+    rowNode.forEach(function (cellNode) {
+      while (occupiedGrid[rowIndex][columnIndex]) {
+        columnIndex += 1;
+      }
+      var colspan = cellNode.attrs.colspan || 1;
+      var rowspan = cellNode.attrs.rowspan || 1;
+      var cellLeft = columnIndex;
+      var cellRight = cellLeft + colspan;
+      var cellTop = rowIndex;
+      var cellBottom = cellTop + rowspan;
+      for (var row = cellTop; row < cellBottom; row += 1) {
+        var _occupiedGrid$row;
+        occupiedGrid[row] = (_occupiedGrid$row = occupiedGrid[row]) !== null && _occupiedGrid$row !== void 0 ? _occupiedGrid$row : [];
+        for (var column = cellLeft; column < cellRight; column += 1) {
+          occupiedGrid[row][column] = true;
+        }
+      }
+      tableWidth = Math.max(tableWidth, cellRight);
+      cellRightByCellOffset.set(cellOffset, cellRight);
+      cellEdgePropsByCellOffset.set(cellOffset, {
+        reachesBottom: cellBottom >= tableNode.childCount,
+        // With number column enabled, PM column 0 is not visually leftmost and must not get `data-reaches-left`.
+        reachesLeft: cellLeft === 0 && !isNumberColumnEnabled,
+        reachesRight: false,
+        reachesTop: cellTop === 0
+      });
+      columnIndex = cellRight;
+      cellOffset += cellNode.nodeSize;
+    });
+    cellOffset += 1;
+  });
+  cellRightByCellOffset.forEach(function (cellRight, currentCellOffset) {
+    var edgeProps = cellEdgePropsByCellOffset.get(currentCellOffset);
+    if (edgeProps) {
+      edgeProps.reachesRight = cellRight >= tableWidth;
+    }
+  });
+  return cellEdgePropsByCellOffset;
+};
+var isRenderedTableCell = function isRenderedTableCell(element) {
+  var _ref4 = element.props,
+    nodeType = _ref4.nodeType;
+  return nodeType === 'tableCell' || nodeType === 'tableHeader' || element.type === _tableCell.TableCell || element.type === _tableCell.TableHeader;
+};
+var addTableCellEdgePropsThroughWrappers = function addTableCellEdgePropsThroughWrappers(rows, tableNode, isNumberColumnEnabled) {
+  try {
+    if (!tableNode) {
+      return rows;
+    }
+    var cellEdgePropsByCellOffset = getCellEdgePropsByCellOffset(tableNode, isNumberColumnEnabled);
+    var cellOffset = 0;
+    return _react.default.Children.map(rows, function (row, rowIndex) {
+      var rowNode = tableNode.child(rowIndex);
+      cellOffset += 1;
+      var cellIndex = 0;
+      var _addEdgePropsToRenderedCells = function addEdgePropsToRenderedCells(element) {
+        if (isRenderedTableCell(element)) {
+          var cellNode = rowNode.child(cellIndex);
+          var edgeProps = cellEdgePropsByCellOffset.get(cellOffset);
+          cellIndex += 1;
+          cellOffset += cellNode.nodeSize;
+          return edgeProps ? /*#__PURE__*/_react.default.cloneElement(element, edgeProps) : element;
+        }
+        var _ref5 = element.props,
+          children = _ref5.children;
+        if (children === undefined) {
+          return element;
+        }
+        var childrenWithEdgeProps = _react.default.Children.map(children, function (child) {
+          return /*#__PURE__*/_react.default.isValidElement(child) ? _addEdgePropsToRenderedCells(child) : child;
+        });
+        return /*#__PURE__*/_react.default.cloneElement(element, undefined, childrenWithEdgeProps);
+      };
+      var rowWithEdgeProps = _addEdgePropsToRenderedCells(row);
+      if (cellIndex !== rowNode.childCount) {
+        throw new Error('Rendered table row does not match its document node');
+      }
+      cellOffset += 1;
+      return rowWithEdgeProps;
+    });
+  } catch (_unused) {
+    // Renderer can receive malformed historical ADF. If the table shape cannot
+    // be described safely, keep rendering without rounded edge metadata.
+    return rows;
+  }
+};
+
 /**
- *
+ * Processes table children before passing them to the styled table container.
  */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
-var TableProcessor = exports.TableProcessor = /*#__PURE__*/function (_React$Component2) {
-  function TableProcessor() {
+var TableProcessorWithContainerStyles = exports.TableProcessorWithContainerStyles = /*#__PURE__*/function (_React$Component2) {
+  function TableProcessorWithContainerStyles() {
     var _this2;
-    (0, _classCallCheck2.default)(this, TableProcessor);
+    (0, _classCallCheck2.default)(this, TableProcessorWithContainerStyles);
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    _this2 = _callSuper(this, TableProcessor, [].concat(args));
+    _this2 = _callSuper(this, TableProcessorWithContainerStyles, [].concat(args));
     (0, _defineProperty2.default)(_this2, "state", {
       tableOrderStatus: undefined
     });
@@ -671,51 +934,86 @@ var TableProcessor = exports.TableProcessor = /*#__PURE__*/function (_React$Comp
     (0, _defineProperty2.default)(_this2, "addNumberColumnIndexes", function (rows) {
       var isNumberColumnEnabled = _this2.props.isNumberColumnEnabled;
       var headerRowEnabled = isHeaderRowEnabled(rows);
+      var lastRowIndex = _react.default.Children.count(rows) - 1;
       return _react.default.Children.map(rows, function (row, index) {
         return /*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(row), {
           isNumberColumnEnabled: isNumberColumnEnabled,
-          index: headerRowEnabled ? index === 0 ? '' : index : index + 1
+          index: headerRowEnabled ? index === 0 ? '' : index : index + 1,
+          isFirstRow: index === 0,
+          isLastRow: index === lastRowIndex
         });
       });
     });
     return _this2;
   }
-  (0, _inherits2.default)(TableProcessor, _React$Component2);
-  return (0, _createClass2.default)(TableProcessor, [{
+  (0, _inherits2.default)(TableProcessorWithContainerStyles, _React$Component2);
+  return (0, _createClass2.default)(TableProcessorWithContainerStyles, [{
     key: "render",
     value:
     /**
+     * Renders processed table children inside the table container.
      *
      * @example
      */
     function render() {
-      var children = this.props.children;
+      var _this$props2 = this.props,
+        allowColumnSorting = _this$props2.allowColumnSorting,
+        allowFixedColumnWidthOption = _this$props2.allowFixedColumnWidthOption,
+        allowTableAlignment = _this$props2.allowTableAlignment,
+        allowTableResizing = _this$props2.allowTableResizing,
+        children = _this$props2.children,
+        columnWidths = _this$props2.columnWidths,
+        disableTableOverflowShadow = _this$props2.disableTableOverflowShadow,
+        handleRef = _this$props2.handleRef,
+        isinsideMultiBodiedExtension = _this$props2.isinsideMultiBodiedExtension,
+        isInsideOfBlockNode = _this$props2.isInsideOfBlockNode,
+        isInsideOfNestedRenderer = _this$props2.isInsideOfNestedRenderer,
+        isInsideOfTable = _this$props2.isInsideOfTable,
+        isNumberColumnEnabled = _this$props2.isNumberColumnEnabled,
+        isPresentational = _this$props2.isPresentational,
+        layout = _this$props2.layout,
+        rendererAppearance = _this$props2.rendererAppearance,
+        renderWidth = _this$props2.renderWidth,
+        shadowClassNames = _this$props2.shadowClassNames,
+        smartCardStorage = _this$props2.smartCardStorage,
+        stickyHeaders = _this$props2.stickyHeaders,
+        tabIndex = _this$props2.tabIndex,
+        tableNode = _this$props2.tableNode;
       if (!children) {
         return null;
       }
       var childrenArray = _react.default.Children.toArray(children);
+      var childrenWithTableEdgeProps = (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? addTableCellEdgePropsThroughWrappers(childrenArray, tableNode, isNumberColumnEnabled) : childrenArray;
       var orderedChildren = (0, _utils.compose)(this.addNumberColumnIndexes, this.addSortableColumn
       // @ts-expect-error TS2345: Argument of type '(ReactChild | ReactFragment | ReactPortal)[]' is not assignable to parameter of type 'ReactElement<any, string | JSXElementConstructor<any>>[]'
-      )(childrenArray);
-
-      // Ignored via go/ees005
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      return /*#__PURE__*/_react.default.createElement(TableContainer, this.props, orderedChildren);
+      )(childrenWithTableEdgeProps);
+      return /*#__PURE__*/_react.default.createElement(TableContainer, {
+        allowColumnSorting: allowColumnSorting,
+        allowFixedColumnWidthOption: allowFixedColumnWidthOption,
+        allowTableAlignment: allowTableAlignment,
+        allowTableResizing: allowTableResizing,
+        columnWidths: columnWidths,
+        disableTableOverflowShadow: disableTableOverflowShadow,
+        handleRef: handleRef,
+        isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+        isInsideOfBlockNode: isInsideOfBlockNode,
+        isInsideOfNestedRenderer: isInsideOfNestedRenderer,
+        isInsideOfTable: isInsideOfTable,
+        isNumberColumnEnabled: isNumberColumnEnabled,
+        isPresentational: isPresentational,
+        layout: layout,
+        rendererAppearance: rendererAppearance,
+        renderWidth: renderWidth,
+        shadowClassNames: shadowClassNames,
+        smartCardStorage: smartCardStorage,
+        stickyHeaders: stickyHeaders,
+        tabIndex: tabIndex,
+        tableNode: tableNode
+      }, orderedChildren);
     }
   }]);
 }(_react.default.Component); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-var TableWithShadowsAndContainerStyles = (0, _ui.overflowShadow)(_tableNew.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(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER),
-  useShadowObserver: true
-});
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
+var TableWithShadowsAndContainerStyles = (0, _ui.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
@@ -725,59 +1023,29 @@ var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
   useShadowObserver: true
 });
 var TableWithWidth = function TableWithWidth(props) {
-  var _useRendererContext = (0, _rendererContext.useRendererContext)(),
-    isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
+  var _props$columnWidths;
+  var _useRendererContext2 = (0, _rendererContext.useRendererContext)(),
+    isTopLevelRenderer = _useRendererContext2.isTopLevelRenderer;
   var isInsideOfNestedRenderer = isTopLevelRenderer === false && (0, _expValEquals.expValEquals)('platform_editor_table_nested_content_mode_fix', 'isEnabled', true);
-  if ((0, _fg.fg)('platform-ssr-table-resize')) {
-    var _props$columnWidths;
-    var colWidthsSum =
-    // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
-    ((_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) {
-      return /*#__PURE__*/_react.default.createElement(TableWithShadowsAndContainerStyles
-      // Ignored via go/ees005
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      , (0, _extends2.default)({}, props, {
-        isInsideOfNestedRenderer: isInsideOfNestedRenderer
-      }));
-    }
-    return /*#__PURE__*/_react.default.createElement(_tableNew.TableProcessorWithContainerStyles
+  var colWidthsSum =
+  // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
+  ((_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) {
+    return /*#__PURE__*/_react.default.createElement(TableWithShadowsAndContainerStyles
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
     , (0, _extends2.default)({}, props, {
       isInsideOfNestedRenderer: isInsideOfNestedRenderer
     }));
-  } else {
-    return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref3) {
-      var _props$columnWidths2;
-      var width = _ref3.width;
-      var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
-      var colWidthsSum =
-      // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
-      ((_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) {
-        return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
-          renderWidth: renderWidth
-          // Ignored via go/ees005
-          // eslint-disable-next-line react/jsx-props-no-spreading
-        }, props, {
-          isInsideOfNestedRenderer: isInsideOfNestedRenderer
-        }));
-      }
-      // 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.default.createElement(TableProcessor, (0, _extends2.default)({
-        renderWidth: renderWidth
-        // Ignored via go/ees005
-        // eslint-disable-next-line react/jsx-props-no-spreading
-      }, props, {
-        isInsideOfNestedRenderer: isInsideOfNestedRenderer
-      }));
-    });
   }
+  return /*#__PURE__*/_react.default.createElement(TableProcessorWithContainerStyles
+  // Ignored via go/ees005
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  , (0, _extends2.default)({}, props, {
+    isInsideOfNestedRenderer: isInsideOfNestedRenderer
+  }));
 };
 var _default_1 = (0, _SmartCardStorage.withSmartCardStorage)(TableWithWidth);
 var _default = exports.default = _default_1;