@atlaskit/renderer 131.1.3 → 131.1.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 131.1.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 131.1.4
+
+### Patch Changes
+
+- [`b40f46a41421d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b40f46a41421d) -
+  Fix table indentation and forced 100% width when rendered inside the Include Page macro. Tables
+  with custom widths now render at their original resized size without unexpected indentation in
+  nested renderers.
+- Updated dependencies
+
 ## 131.1.3
 
 ### Patch Changes

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

@@ -5,6 +5,7 @@ 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.addSortableColumn = exports.TableProcessorWithContainerStyles = exports.TableContainer = exports.RefSyncBlockFakeBorders = void 0;
+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"));
@@ -16,6 +17,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _style = require("../../ui/Renderer/style");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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");
@@ -220,6 +222,11 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     (0, _defineProperty2.default)(_this, "wrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)(_this, "overflowParent", null);
     (0, _defineProperty2.default)(_this, "updatedLayout", 'custom');
+    (0, _defineProperty2.default)(_this, "containerRef", null);
+    (0, _defineProperty2.default)(_this, "_isInsideNestedRenderer", 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;
@@ -247,6 +254,21 @@ 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) {
+      _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
@@ -322,6 +344,66 @@ 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;
+    }
+
+    /**
+     * 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.
+     *
+     * 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.
+     */
+  }, {
+    key: "applyNestedRendererTableFix",
+    value: function applyNestedRendererTableFix() {
+      if (!this.containerRef || !(0, _platformFeatureFlags.fg)('platform_nested_table_style_override')) {
+        return;
+      }
+      if (!this.isInsideNestedRenderer()) {
+        return;
+      }
+      var _this$lastComputedSty = this.lastComputedStyle,
+        width = _this$lastComputedSty.width,
+        left = _this$lastComputedSty.left,
+        marginLeft = _this$lastComputedSty.marginLeft;
+      var style = this.containerRef.style;
+      style.setProperty('width', width || 'auto', 'important');
+      style.setProperty('left', left || 'auto', 'important');
+      style.setProperty('margin-left', marginLeft || '0', 'important');
+    }
+  }, {
     key: "componentDidMount",
     value:
     /**
@@ -347,6 +429,7 @@ 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();
     }
 
     /**
@@ -379,6 +462,10 @@ 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",
@@ -543,12 +630,21 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         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,
         "data-testid": "table-container",
-        ref: this.props.handleRef,
+        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", {

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

@@ -71,7 +71,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "131.1.2";
+var packageVersion = "131.1.4";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -5,6 +5,7 @@ import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { RendererCssClassName } from '../../consts';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -185,6 +186,11 @@ export class TableContainer extends React.Component {
     _defineProperty(this, "wrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "overflowParent", null);
     _defineProperty(this, "updatedLayout", 'custom');
+    _defineProperty(this, "containerRef", null);
+    _defineProperty(this, "_isInsideNestedRenderer", 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.
+    _defineProperty(this, "lastComputedStyle", {});
     _defineProperty(this, "resizeObserver", null);
     _defineProperty(this, "applyResizerChange", entries => {
       let wrapperWidth = this.state.wrapperWidth;
@@ -203,6 +209,23 @@ export class TableContainer extends React.Component {
         });
       }
     });
+    /**
+     * Callback ref that captures the container DOM element and also forwards
+     * to the handleRef prop from the overflow shadow HOC.
+     */
+    _defineProperty(this, "setContainerRef", el => {
+      this.containerRef = el;
+      const {
+        handleRef
+      } = this.props;
+      if (typeof handleRef === 'function') {
+        handleRef(el);
+      } else if (handleRef && typeof handleRef === 'object') {
+        // Ignored via go/ees005
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        handleRef.current = el;
+      }
+    });
     _defineProperty(this, "componentWillUnmount", () => {
       if (this.overflowParent) {
         // Ignored via go/ees005
@@ -277,6 +300,62 @@ export class TableContainer extends React.Component {
       });
     });
   }
+  /**
+   * 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.
+   */
+  isInsideNestedRenderer() {
+    if (this._isInsideNestedRenderer !== null) {
+      return this._isInsideNestedRenderer;
+    }
+    if (!this.containerRef) {
+      return false;
+    }
+    let docAncestorCount = 0;
+    let el = this.containerRef.parentElement;
+    while (el) {
+      if (el.classList.contains(RendererCssClassName.DOCUMENT)) {
+        docAncestorCount++;
+        if (docAncestorCount >= 2) {
+          this._isInsideNestedRenderer = true;
+          return true;
+        }
+      }
+      el = el.parentElement;
+    }
+    this._isInsideNestedRenderer = false;
+    return false;
+  }
+
+  /**
+   * 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.
+   *
+   * 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.
+   */
+  applyNestedRendererTableFix() {
+    if (!this.containerRef || !fg('platform_nested_table_style_override')) {
+      return;
+    }
+    if (!this.isInsideNestedRenderer()) {
+      return;
+    }
+    const {
+      width,
+      left,
+      marginLeft
+    } = this.lastComputedStyle;
+    const style = this.containerRef.style;
+    style.setProperty('width', width || 'auto', 'important');
+    style.setProperty('left', left || 'auto', 'important');
+    style.setProperty('margin-left', marginLeft || '0', 'important');
+  }
   /**
    * Starts observing table dimensions and wires sticky header/scrollbar behavior after mount.
    *
@@ -300,6 +379,7 @@ export class TableContainer extends React.Component {
     if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
       this.stickyScrollbar = new TableStickyScrollbar(this.wrapperRef.current);
     }
+    this.applyNestedRendererTableFix();
   }
 
   /**
@@ -330,6 +410,10 @@ export class TableContainer extends React.Component {
     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();
   }
   /**
    * Calculates the top offset used when the sticky header is pinned to the table bottom.
@@ -489,12 +573,21 @@ export class TableContainer extends React.Component {
       left: leftCSS ? `calc(${leftCSS})` : undefined,
       marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? `calc(-1 * (${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' ? `${style.width}px` : style.width,
+      left: style.left,
+      marginLeft: style.marginLeft
+    };
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames || ''}`,
       "data-layout": updatedLayout,
       "data-testid": "table-container",
-      ref: this.props.handleRef,
+      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.createElement("div", {

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

@@ -57,7 +57,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.2;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "131.1.2";
+const packageVersion = "131.1.4";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -1,3 +1,4 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -17,6 +18,7 @@ import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { RendererCssClassName } from '../../consts';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -214,6 +216,11 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "wrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(_this, "overflowParent", null);
     _defineProperty(_this, "updatedLayout", 'custom');
+    _defineProperty(_this, "containerRef", null);
+    _defineProperty(_this, "_isInsideNestedRenderer", 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.
+    _defineProperty(_this, "lastComputedStyle", {});
     _defineProperty(_this, "resizeObserver", null);
     _defineProperty(_this, "applyResizerChange", function (entries) {
       var wrapperWidth = _this.state.wrapperWidth;
@@ -241,6 +248,21 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
+    /**
+     * Callback ref that captures the container DOM element and also forwards
+     * to the handleRef prop from the overflow shadow HOC.
+     */
+    _defineProperty(_this, "setContainerRef", function (el) {
+      _this.containerRef = el;
+      var handleRef = _this.props.handleRef;
+      if (typeof handleRef === 'function') {
+        handleRef(el);
+      } else if (handleRef && _typeof(handleRef) === 'object') {
+        // Ignored via go/ees005
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        handleRef.current = el;
+      }
+    });
     _defineProperty(_this, "componentWillUnmount", function () {
       if (_this.overflowParent) {
         // Ignored via go/ees005
@@ -316,6 +338,66 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
   }
   _inherits(TableContainer, _React$Component);
   return _createClass(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(RendererCssClassName.DOCUMENT)) {
+          docAncestorCount++;
+          if (docAncestorCount >= 2) {
+            this._isInsideNestedRenderer = true;
+            return true;
+          }
+        }
+        el = el.parentElement;
+      }
+      this._isInsideNestedRenderer = false;
+      return false;
+    }
+
+    /**
+     * 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.
+     *
+     * 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.
+     */
+  }, {
+    key: "applyNestedRendererTableFix",
+    value: function applyNestedRendererTableFix() {
+      if (!this.containerRef || !fg('platform_nested_table_style_override')) {
+        return;
+      }
+      if (!this.isInsideNestedRenderer()) {
+        return;
+      }
+      var _this$lastComputedSty = this.lastComputedStyle,
+        width = _this$lastComputedSty.width,
+        left = _this$lastComputedSty.left,
+        marginLeft = _this$lastComputedSty.marginLeft;
+      var style = this.containerRef.style;
+      style.setProperty('width', width || 'auto', 'important');
+      style.setProperty('left', left || 'auto', 'important');
+      style.setProperty('margin-left', marginLeft || '0', 'important');
+    }
+  }, {
     key: "componentDidMount",
     value:
     /**
@@ -341,6 +423,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
         this.stickyScrollbar = new TableStickyScrollbar(this.wrapperRef.current);
       }
+      this.applyNestedRendererTableFix();
     }
 
     /**
@@ -373,6 +456,10 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       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",
@@ -537,12 +624,21 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
         "data-layout": updatedLayout,
         "data-testid": "table-container",
-        ref: this.props.handleRef,
+        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.createElement("div", {

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

@@ -62,7 +62,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "131.1.2";
+var packageVersion = "131.1.4";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/react/nodes/tableNew.d.ts

@@ -67,8 +67,34 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     nextFrame: number | undefined;
     overflowParent: OverflowParent | null;
     updatedLayout: TableLayout | 'custom';
+    private containerRef;
+    private _isInsideNestedRenderer;
+    private lastComputedStyle;
     private resizeObserver;
     private applyResizerChange;
+    /**
+     * 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.
+     */
+    private isInsideNestedRenderer;
+    /**
+     * 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.
+     *
+     * 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.
+     */
+    private applyNestedRendererTableFix;
+    /**
+     * Callback ref that captures the container DOM element and also forwards
+     * to the handleRef prop from the overflow shadow HOC.
+     */
+    private setContainerRef;
     /**
      * Starts observing table dimensions and wires sticky header/scrollbar behavior after mount.
      *

package/dist/types-ts4.5/react/nodes/tableNew.d.ts

@@ -67,8 +67,34 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     nextFrame: number | undefined;
     overflowParent: OverflowParent | null;
     updatedLayout: TableLayout | 'custom';
+    private containerRef;
+    private _isInsideNestedRenderer;
+    private lastComputedStyle;
     private resizeObserver;
     private applyResizerChange;
+    /**
+     * 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.
+     */
+    private isInsideNestedRenderer;
+    /**
+     * 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.
+     *
+     * 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.
+     */
+    private applyNestedRendererTableFix;
+    /**
+     * Callback ref that captures the container DOM element and also forwards
+     * to the handleRef prop from the overflow shadow HOC.
+     */
+    private setContainerRef;
     /**
      * Starts observing table dimensions and wires sticky header/scrollbar behavior after mount.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "131.1.3",
+	"version": "131.1.5",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -62,11 +62,11 @@
 		"@atlaskit/platform-feature-flags-react": "^0.5.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
 		"@atlaskit/react-ufo": "^6.0.0",
-		"@atlaskit/smart-card": "^44.13.0",
+		"@atlaskit/smart-card": "^44.14.0",
 		"@atlaskit/status": "^4.1.0",
 		"@atlaskit/task-decision": "^20.1.0",
-		"@atlaskit/theme": "^23.2.0",
-		"@atlaskit/tmp-editor-statsig": "^82.1.0",
+		"@atlaskit/theme": "^24.0.0",
+		"@atlaskit/tmp-editor-statsig": "^82.3.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^22.2.0",
 		"@atlaskit/visually-hidden": "^3.1.0",
@@ -80,7 +80,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.39.0",
+		"@atlaskit/editor-common": "^114.41.0",
 		"@atlaskit/link-provider": "^4.4.0",
 		"@atlaskit/media-core": "^37.1.0",
 		"react": "^18.2.0",
@@ -92,6 +92,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/analytics-gas-types": "^5.1.0",
 		"@atlaskit/checkbox": "^17.3.0",
+		"@atlaskit/editor-card-provider": "^6.8.0",
 		"@atlaskit/link-provider": "^4.4.0",
 		"@atlaskit/link-test-helpers": "^10.2.0",
 		"@atlaskit/media-core": "^37.1.0",
@@ -118,6 +119,8 @@
 		"jsdom": "^25.0.0",
 		"mockdate": "^3.0.5",
 		"puppeteer": "13.7.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"react-intl": "^6.6.2",
 		"react-live-clock": "^5.0.0",
 		"react-magnetic-di": "^3.1.4",
@@ -250,6 +253,9 @@
 		},
 		"platform-dst-lozenge-tag-badge-visual-uplifts": {
 			"type": "boolean"
+		},
+		"platform_nested_table_style_override": {
+			"type": "boolean"
 		}
 	}
 }