@atlaskit/renderer 112.3.0 → 112.3.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/renderer
 
+## 112.3.2
+
+### Patch Changes
+
+- [#160291](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/160291)
+  [`223443d621e88`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/223443d621e88) -
+  [ux] Fixes default table column widths when table is nested in extension that is nested in layout
+
+## 112.3.1
+
+### Patch Changes
+
+- [#159704](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159704)
+  [`03e6dc49c3d4f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/03e6dc49c3d4f) -
+  Add temporary sticky header configuration options to allow consumer to set the default overflow
+  parent
+
 ## 112.3.0
 
 ### Minor Changes

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

@@ -11,7 +11,9 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useFeatureFlags = require("../../../use-feature-flags");
+var _rendererContext = require("../../../renderer-context");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // we allow scaling down column widths by no more than 30%
@@ -68,7 +70,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     isinsideMultiBodiedExtension = props.isinsideMultiBodiedExtension,
     isTableScalingEnabled = props.isTableScalingEnabled,
     isTableFixedColumnWidthsOptionEnabled = props.isTableFixedColumnWidthsOptionEnabled,
-    allowTableResizing = props.allowTableResizing;
+    allowTableResizing = props.allowTableResizing,
+    isTopLevelRenderer = props.isTopLevelRenderer;
   if (!columnWidths) {
     return [];
   }
@@ -76,10 +79,16 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   var noOfColumns = columnWidths.length;
   var targetWidths;
 
+  // This is a fix for ED-23259
+  // Some extensions (for ex: Page Properties or Excerpt) do not renderer tables directly inside themselves. They use ReactRenderer.
+  // So if we add a check like isInsideExtension (similar to exising isInsideBlockNode), it will fail, and to the only way to learn
+  // if the table is rendered inside another node, is to check if the Renderer itself is nested.
+  var isRendererNested = isTopLevelRenderer === false && (0, _platformFeatureFlags.fg)('platform_editor_nested_table_in_nested_parent_fix');
+
   // appearance == comment && allowTableResizing && !tableNode?.attrs.width, means it is a comment
   // appearance == comment && !allowTableResizing && !tableNode?.attrs.width, means it is a inline comment
   // When comment and inline comment table width inherits from the parent container, we want tableContainerWidth === renderWidth
-  var tableContainerWidth = rendererAppearance === 'comment' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) ? renderWidth : (0, _nodeWidth.getTableContainerWidth)(tableNode);
+  var tableContainerWidth = rendererAppearance === 'comment' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) || isRendererNested ? renderWidth : (0, _nodeWidth.getTableContainerWidth)(tableNode);
   if (allowTableResizing && !isInsideOfBlockNode && !isinsideMultiBodiedExtension && !tableColumnResized) {
     // when no columns are resized, each column should have equal width, equals to tableWidth / noOfColumns
     var _tableWidth2 = (isNumberColumnEnabled ? tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
@@ -167,6 +176,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   });
 };
 var Colgroup = exports.Colgroup = function Colgroup(props) {
+  var _useRendererContext = (0, _rendererContext.useRendererContext)(),
+    isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
   var columnWidths = props.columnWidths,
     isNumberColumnEnabled = props.isNumberColumnEnabled;
   var flags = (0, _useFeatureFlags.useFeatureFlags)();
@@ -174,6 +185,7 @@ var Colgroup = exports.Colgroup = function Colgroup(props) {
     return null;
   }
   var colStyles = renderScaleDownColgroup(_objectSpread(_objectSpread({}, props), {}, {
+    isTopLevelRenderer: isTopLevelRenderer,
     isTableScalingEnabled: !!(flags && 'tablePreserveWidth' in flags && flags.tablePreserveWidth) || props.rendererAppearance === 'comment' && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && (0, _experiments.editorExperiment)('support_table_in_comment_jira', true, {

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

@@ -173,7 +173,7 @@ var StickyTable = exports.StickyTable = function StickyTable(_ref) {
 /**
  * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
  */
-function findHorizontalOverflowScrollParent(table) {
+function findHorizontalOverflowScrollParent(table, defaultScrollRootEl) {
   var parent = table;
   if (!parent) {
     return null;
@@ -184,6 +184,11 @@ function findHorizontalOverflowScrollParent(table) {
     if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
       return parent;
     }
+    if (!!defaultScrollRootEl && defaultScrollRootEl === parent) {
+      // If a defaultScrollRootEl was specified and we reached it without finding a closer scroll parent,
+      // use the defaultScrollRootEl.
+      return parent;
+    }
   }
   return null;
 }
@@ -226,8 +231,8 @@ var OverflowParent = exports.OverflowParent = /*#__PURE__*/function () {
     }
   }], [{
     key: "fromElement",
-    value: function fromElement(el) {
-      return new OverflowParent(findHorizontalOverflowScrollParent(el) || window);
+    value: function fromElement(el, defaultScrollRootEl) {
+      return new OverflowParent(findHorizontalOverflowScrollParent(el, defaultScrollRootEl) || window);
     }
   }]);
   return OverflowParent;

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

@@ -253,7 +253,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         this.resizeObserver.observe(this.stickyHeaderRef.current);
       }
       if (this.props.stickyHeaders) {
-        this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current);
+        var _this$props$stickyHea;
+        this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea = this.props.stickyHeaders) === null || _this$props$stickyHea === void 0 ? void 0 : _this$props$stickyHea.defaultScrollRoot_DO_NOT_USE);
         this.overflowParent.addEventListener('scroll', this.onScroll);
       }
       if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
@@ -265,7 +266,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     value: function componentDidUpdate(prevProps, prevState) {
       // toggling sticky headers visiblity
       if (this.props.stickyHeaders && !this.overflowParent) {
-        this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current);
+        var _this$props$stickyHea2;
+        this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea2 = this.props.stickyHeaders) === null || _this$props$stickyHea2 === void 0 ? void 0 : _this$props$stickyHea2.defaultScrollRoot_DO_NOT_USE);
       } else if (!this.props.stickyHeaders && this.overflowParent) {
         this.overflowParent.removeEventListener('scroll', this.onScroll);
         this.overflowParent = null;
@@ -296,7 +298,14 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         case 'pin-bottom':
           return this.pinTop;
         case 'stick':
-          return this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
+          var offsetTop = this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
+          if (typeof offsetTop === 'number') {
+            var _this$props$stickyHea3, _this$props$stickyHea4;
+            var defaultScrollRootOffsetTop = (_this$props$stickyHea3 = (_this$props$stickyHea4 = this.props.stickyHeaders) === null || _this$props$stickyHea4 === void 0 ? void 0 : _this$props$stickyHea4.defaultScrollRootTop_DO_NOT_USE) !== null && _this$props$stickyHea3 !== void 0 ? _this$props$stickyHea3 : 0;
+            return offsetTop + defaultScrollRootOffsetTop;
+          } else {
+            return offsetTop;
+          }
         default:
           return undefined;
       }

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

@@ -65,7 +65,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "112.3.0";
+var packageVersion = "112.3.2";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -3,7 +3,10 @@ import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common
 import { akEditorTableNumberColumnWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useFeatureFlags } from '../../../use-feature-flags';
+import { useRendererContext } from '../../../renderer-context';
+
 // we allow scaling down column widths by no more than 30%
 // this intends to reduce unwanted scrolling in the Renderer in these scenarios:
 // User A creates a table with column widths → User B views it on a smaller screen
@@ -54,7 +57,8 @@ const renderScaleDownColgroup = props => {
     isinsideMultiBodiedExtension,
     isTableScalingEnabled,
     isTableFixedColumnWidthsOptionEnabled,
-    allowTableResizing
+    allowTableResizing,
+    isTopLevelRenderer
   } = props;
   if (!columnWidths) {
     return [];
@@ -63,10 +67,16 @@ const renderScaleDownColgroup = props => {
   const noOfColumns = columnWidths.length;
   let targetWidths;
 
+  // This is a fix for ED-23259
+  // Some extensions (for ex: Page Properties or Excerpt) do not renderer tables directly inside themselves. They use ReactRenderer.
+  // So if we add a check like isInsideExtension (similar to exising isInsideBlockNode), it will fail, and to the only way to learn
+  // if the table is rendered inside another node, is to check if the Renderer itself is nested.
+  const isRendererNested = isTopLevelRenderer === false && fg('platform_editor_nested_table_in_nested_parent_fix');
+
   // appearance == comment && allowTableResizing && !tableNode?.attrs.width, means it is a comment
   // appearance == comment && !allowTableResizing && !tableNode?.attrs.width, means it is a inline comment
   // When comment and inline comment table width inherits from the parent container, we want tableContainerWidth === renderWidth
-  const tableContainerWidth = rendererAppearance === 'comment' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) ? renderWidth : getTableContainerWidth(tableNode);
+  const tableContainerWidth = rendererAppearance === 'comment' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) || isRendererNested ? renderWidth : getTableContainerWidth(tableNode);
   if (allowTableResizing && !isInsideOfBlockNode && !isinsideMultiBodiedExtension && !tableColumnResized) {
     // when no columns are resized, each column should have equal width, equals to tableWidth / noOfColumns
     const tableWidth = (isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
@@ -154,6 +164,9 @@ const renderScaleDownColgroup = props => {
   });
 };
 export const Colgroup = props => {
+  const {
+    isTopLevelRenderer
+  } = useRendererContext();
   let {
     columnWidths,
     isNumberColumnEnabled
@@ -164,6 +177,7 @@ export const Colgroup = props => {
   }
   const colStyles = renderScaleDownColgroup({
     ...props,
+    isTopLevelRenderer,
     isTableScalingEnabled: !!(flags && 'tablePreserveWidth' in flags && flags.tablePreserveWidth) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment_jira', true, {

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

@@ -174,7 +174,7 @@ export const StickyTable = ({
 /**
  * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
  */
-function findHorizontalOverflowScrollParent(table) {
+function findHorizontalOverflowScrollParent(table, defaultScrollRootEl) {
   let parent = table;
   if (!parent) {
     return null;
@@ -185,6 +185,11 @@ function findHorizontalOverflowScrollParent(table) {
     if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
       return parent;
     }
+    if (!!defaultScrollRootEl && defaultScrollRootEl === parent) {
+      // If a defaultScrollRootEl was specified and we reached it without finding a closer scroll parent,
+      // use the defaultScrollRootEl.
+      return parent;
+    }
   }
   return null;
 }
@@ -193,8 +198,8 @@ export class OverflowParent {
     this.ref = ref;
     this.ref = ref;
   }
-  static fromElement(el) {
-    return new OverflowParent(findHorizontalOverflowScrollParent(el) || window);
+  static fromElement(el, defaultScrollRootEl) {
+    return new OverflowParent(findHorizontalOverflowScrollParent(el, defaultScrollRootEl) || window);
   }
   get isElement() {
     return this.ref instanceof HTMLElement;

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

@@ -204,7 +204,8 @@ export class TableContainer extends React.Component {
       this.resizeObserver.observe(this.stickyHeaderRef.current);
     }
     if (this.props.stickyHeaders) {
-      this.overflowParent = OverflowParent.fromElement(this.tableRef.current);
+      var _this$props$stickyHea;
+      this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea = this.props.stickyHeaders) === null || _this$props$stickyHea === void 0 ? void 0 : _this$props$stickyHea.defaultScrollRoot_DO_NOT_USE);
       this.overflowParent.addEventListener('scroll', this.onScroll);
     }
     if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
@@ -214,7 +215,8 @@ export class TableContainer extends React.Component {
   componentDidUpdate(prevProps, prevState) {
     // toggling sticky headers visiblity
     if (this.props.stickyHeaders && !this.overflowParent) {
-      this.overflowParent = OverflowParent.fromElement(this.tableRef.current);
+      var _this$props$stickyHea2;
+      this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea2 = this.props.stickyHeaders) === null || _this$props$stickyHea2 === void 0 ? void 0 : _this$props$stickyHea2.defaultScrollRoot_DO_NOT_USE);
     } else if (!this.props.stickyHeaders && this.overflowParent) {
       this.overflowParent.removeEventListener('scroll', this.onScroll);
       this.overflowParent = null;
@@ -241,7 +243,14 @@ export class TableContainer extends React.Component {
       case 'pin-bottom':
         return this.pinTop;
       case 'stick':
-        return this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
+        const offsetTop = this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
+        if (typeof offsetTop === 'number') {
+          var _this$props$stickyHea3, _this$props$stickyHea4;
+          const defaultScrollRootOffsetTop = (_this$props$stickyHea3 = (_this$props$stickyHea4 = this.props.stickyHeaders) === null || _this$props$stickyHea4 === void 0 ? void 0 : _this$props$stickyHea4.defaultScrollRootTop_DO_NOT_USE) !== null && _this$props$stickyHea3 !== void 0 ? _this$props$stickyHea3 : 0;
+          return offsetTop + defaultScrollRootOffsetTop;
+        } else {
+          return offsetTop;
+        }
       default:
         return undefined;
     }

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

@@ -45,7 +45,7 @@ import { countNodes } from './count-nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "112.3.0";
+const packageVersion = "112.3.2";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -6,7 +6,10 @@ import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common
 import { akEditorTableNumberColumnWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useFeatureFlags } from '../../../use-feature-flags';
+import { useRendererContext } from '../../../renderer-context';
+
 // we allow scaling down column widths by no more than 30%
 // this intends to reduce unwanted scrolling in the Renderer in these scenarios:
 // User A creates a table with column widths → User B views it on a smaller screen
@@ -61,7 +64,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     isinsideMultiBodiedExtension = props.isinsideMultiBodiedExtension,
     isTableScalingEnabled = props.isTableScalingEnabled,
     isTableFixedColumnWidthsOptionEnabled = props.isTableFixedColumnWidthsOptionEnabled,
-    allowTableResizing = props.allowTableResizing;
+    allowTableResizing = props.allowTableResizing,
+    isTopLevelRenderer = props.isTopLevelRenderer;
   if (!columnWidths) {
     return [];
   }
@@ -69,10 +73,16 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   var noOfColumns = columnWidths.length;
   var targetWidths;
 
+  // This is a fix for ED-23259
+  // Some extensions (for ex: Page Properties or Excerpt) do not renderer tables directly inside themselves. They use ReactRenderer.
+  // So if we add a check like isInsideExtension (similar to exising isInsideBlockNode), it will fail, and to the only way to learn
+  // if the table is rendered inside another node, is to check if the Renderer itself is nested.
+  var isRendererNested = isTopLevelRenderer === false && fg('platform_editor_nested_table_in_nested_parent_fix');
+
   // appearance == comment && allowTableResizing && !tableNode?.attrs.width, means it is a comment
   // appearance == comment && !allowTableResizing && !tableNode?.attrs.width, means it is a inline comment
   // When comment and inline comment table width inherits from the parent container, we want tableContainerWidth === renderWidth
-  var tableContainerWidth = rendererAppearance === 'comment' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) ? renderWidth : getTableContainerWidth(tableNode);
+  var tableContainerWidth = rendererAppearance === 'comment' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) || isRendererNested ? renderWidth : getTableContainerWidth(tableNode);
   if (allowTableResizing && !isInsideOfBlockNode && !isinsideMultiBodiedExtension && !tableColumnResized) {
     // when no columns are resized, each column should have equal width, equals to tableWidth / noOfColumns
     var _tableWidth2 = (isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
@@ -160,6 +170,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   });
 };
 export var Colgroup = function Colgroup(props) {
+  var _useRendererContext = useRendererContext(),
+    isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
   var columnWidths = props.columnWidths,
     isNumberColumnEnabled = props.isNumberColumnEnabled;
   var flags = useFeatureFlags();
@@ -167,6 +179,7 @@ export var Colgroup = function Colgroup(props) {
     return null;
   }
   var colStyles = renderScaleDownColgroup(_objectSpread(_objectSpread({}, props), {}, {
+    isTopLevelRenderer: isTopLevelRenderer,
     isTableScalingEnabled: !!(flags && 'tablePreserveWidth' in flags && flags.tablePreserveWidth) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment_jira', true, {

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

@@ -164,7 +164,7 @@ export var StickyTable = function StickyTable(_ref) {
 /**
  * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
  */
-function findHorizontalOverflowScrollParent(table) {
+function findHorizontalOverflowScrollParent(table, defaultScrollRootEl) {
   var parent = table;
   if (!parent) {
     return null;
@@ -175,6 +175,11 @@ function findHorizontalOverflowScrollParent(table) {
     if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
       return parent;
     }
+    if (!!defaultScrollRootEl && defaultScrollRootEl === parent) {
+      // If a defaultScrollRootEl was specified and we reached it without finding a closer scroll parent,
+      // use the defaultScrollRootEl.
+      return parent;
+    }
   }
   return null;
 }
@@ -217,8 +222,8 @@ export var OverflowParent = /*#__PURE__*/function () {
     }
   }], [{
     key: "fromElement",
-    value: function fromElement(el) {
-      return new OverflowParent(findHorizontalOverflowScrollParent(el) || window);
+    value: function fromElement(el, defaultScrollRootEl) {
+      return new OverflowParent(findHorizontalOverflowScrollParent(el, defaultScrollRootEl) || window);
     }
   }]);
   return OverflowParent;

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

@@ -246,7 +246,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         this.resizeObserver.observe(this.stickyHeaderRef.current);
       }
       if (this.props.stickyHeaders) {
-        this.overflowParent = OverflowParent.fromElement(this.tableRef.current);
+        var _this$props$stickyHea;
+        this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea = this.props.stickyHeaders) === null || _this$props$stickyHea === void 0 ? void 0 : _this$props$stickyHea.defaultScrollRoot_DO_NOT_USE);
         this.overflowParent.addEventListener('scroll', this.onScroll);
       }
       if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
@@ -258,7 +259,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       // toggling sticky headers visiblity
       if (this.props.stickyHeaders && !this.overflowParent) {
-        this.overflowParent = OverflowParent.fromElement(this.tableRef.current);
+        var _this$props$stickyHea2;
+        this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea2 = this.props.stickyHeaders) === null || _this$props$stickyHea2 === void 0 ? void 0 : _this$props$stickyHea2.defaultScrollRoot_DO_NOT_USE);
       } else if (!this.props.stickyHeaders && this.overflowParent) {
         this.overflowParent.removeEventListener('scroll', this.onScroll);
         this.overflowParent = null;
@@ -289,7 +291,14 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         case 'pin-bottom':
           return this.pinTop;
         case 'stick':
-          return this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
+          var offsetTop = this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
+          if (typeof offsetTop === 'number') {
+            var _this$props$stickyHea3, _this$props$stickyHea4;
+            var defaultScrollRootOffsetTop = (_this$props$stickyHea3 = (_this$props$stickyHea4 = this.props.stickyHeaders) === null || _this$props$stickyHea4 === void 0 ? void 0 : _this$props$stickyHea4.defaultScrollRootTop_DO_NOT_USE) !== null && _this$props$stickyHea3 !== void 0 ? _this$props$stickyHea3 : 0;
+            return offsetTop + defaultScrollRootOffsetTop;
+          } else {
+            return offsetTop;
+          }
         default:
           return undefined;
       }

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

@@ -55,7 +55,7 @@ import { countNodes } from './count-nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "112.3.0";
+var packageVersion = "112.3.2";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/dist/types/react/nodes/table/sticky.d.ts

@@ -31,7 +31,7 @@ export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef
 export declare class OverflowParent {
     private ref;
     private constructor();
-    static fromElement(el: HTMLElement | null): OverflowParent;
+    static fromElement(el: HTMLElement | null, defaultScrollRootEl?: HTMLElement): OverflowParent;
     get isElement(): boolean;
     get top(): number;
     addEventListener(type: string, cb: EventListenerOrEventListenerObject, ...args: any[]): void;

package/dist/types/ui/Renderer/types.d.ts

@@ -1,8 +1,27 @@
 /// <reference types="react" />
 export type RendererAppearance = 'comment' | 'full-page' | 'full-width' | undefined;
+/**
+ * DO NOT USE THESE OPTIONS
+ * These StickyHeaderConfig_DO_NOT_USE options are being TEMPORARILY added so Confluence can use Sticky Table Headers
+ * in Nav4.
+ *
+ * They will be cleaned up ASAP after Confluence refactors its page layout to add an explicit scroll container (DISCO-3121)
+ *
+ * `defaultScrollRoot_DO_NOT_USE` - defaults to undefined - can be used to specify the default OverflowParent if the table
+ *      doesn't have a parent that explicitly specifies `overflow: scroll` or `overflow-y: scroll`. When undefined, the
+ *      default OverflowParent will be the window
+ * `defaultScrollRootTop_DO_NOT_USE` - defaults to 0 - can be used to specify any offset that should be applied to the
+ *      sticky table header offset but does not need to be included when determining if the header should be sticky.
+ *      This is required bcause the llogic that determines if the header should be sticky takes the OverflowParent.offsetTop
+ *      into account. But the calculation to get the actual header offset does not.
+ */
+type StickyHeaderConfig_DO_NOT_USE = {
+    defaultScrollRoot_DO_NOT_USE?: HTMLElement;
+    defaultScrollRootTop_DO_NOT_USE?: number;
+};
 export type StickyHeaderConfig = {
     offsetTop?: number;
-};
+} & StickyHeaderConfig_DO_NOT_USE;
 export type StickyHeaderProps = boolean | ({
     show?: boolean;
 } & StickyHeaderConfig);
@@ -14,3 +33,4 @@ export type NodeComponentsProps = {
     [key: string]: React.ComponentType<React.PropsWithChildren<any>>;
 };
 export type HeadingAnchorLinksProps = boolean | HeadingAnchorLinksConfig;
+export {};

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

@@ -31,7 +31,7 @@ export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef
 export declare class OverflowParent {
     private ref;
     private constructor();
-    static fromElement(el: HTMLElement | null): OverflowParent;
+    static fromElement(el: HTMLElement | null, defaultScrollRootEl?: HTMLElement): OverflowParent;
     get isElement(): boolean;
     get top(): number;
     addEventListener(type: string, cb: EventListenerOrEventListenerObject, ...args: any[]): void;

package/dist/types-ts4.5/ui/Renderer/types.d.ts

@@ -1,8 +1,27 @@
 /// <reference types="react" />
 export type RendererAppearance = 'comment' | 'full-page' | 'full-width' | undefined;
+/**
+ * DO NOT USE THESE OPTIONS
+ * These StickyHeaderConfig_DO_NOT_USE options are being TEMPORARILY added so Confluence can use Sticky Table Headers
+ * in Nav4.
+ *
+ * They will be cleaned up ASAP after Confluence refactors its page layout to add an explicit scroll container (DISCO-3121)
+ *
+ * `defaultScrollRoot_DO_NOT_USE` - defaults to undefined - can be used to specify the default OverflowParent if the table
+ *      doesn't have a parent that explicitly specifies `overflow: scroll` or `overflow-y: scroll`. When undefined, the
+ *      default OverflowParent will be the window
+ * `defaultScrollRootTop_DO_NOT_USE` - defaults to 0 - can be used to specify any offset that should be applied to the
+ *      sticky table header offset but does not need to be included when determining if the header should be sticky.
+ *      This is required bcause the llogic that determines if the header should be sticky takes the OverflowParent.offsetTop
+ *      into account. But the calculation to get the actual header offset does not.
+ */
+type StickyHeaderConfig_DO_NOT_USE = {
+    defaultScrollRoot_DO_NOT_USE?: HTMLElement;
+    defaultScrollRootTop_DO_NOT_USE?: number;
+};
 export type StickyHeaderConfig = {
     offsetTop?: number;
-};
+} & StickyHeaderConfig_DO_NOT_USE;
 export type StickyHeaderProps = boolean | ({
     show?: boolean;
 } & StickyHeaderConfig);
@@ -14,3 +33,4 @@ export type NodeComponentsProps = {
     [key: string]: React.ComponentType<React.PropsWithChildren<any>>;
 };
 export type HeadingAnchorLinksProps = boolean | HeadingAnchorLinksConfig;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "112.3.0",
+	"version": "112.3.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/code": "^15.6.0",
-		"@atlaskit/editor-common": "^94.11.0",
+		"@atlaskit/editor-common": "^94.12.0",
 		"@atlaskit/editor-json-transformer": "^8.20.0",
 		"@atlaskit/editor-palette": "1.6.3",
 		"@atlaskit/editor-prosemirror": "6.0.0",
@@ -37,7 +37,7 @@
 		"@atlaskit/emoji": "^67.9.0",
 		"@atlaskit/feature-gate-js-client": "^4.22.0",
 		"@atlaskit/icon": "^22.24.0",
-		"@atlaskit/link-datasource": "^3.7.0",
+		"@atlaskit/link-datasource": "^3.8.0",
 		"@atlaskit/media-card": "^78.10.0",
 		"@atlaskit/media-client": "^28.0.0",
 		"@atlaskit/media-client-react": "^2.3.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/task-decision": "^17.11.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tmp-editor-statsig": "^2.11.0",
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tokens": "^2.1.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -143,6 +143,9 @@
 		},
 		"platform_editor_advanced_layouts_pre_release_2": {
 			"type": "boolean"
+		},
+		"platform_editor_nested_table_in_nested_parent_fix": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {