@atlaskit/renderer 108.11.1 → 108.11.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 108.11.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 108.11.2
+
+### Patch Changes
+
+- [`32f9d24dcdb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/32f9d24dcdb) - Improve table renderer resizing performance.
+
 ## 108.11.1
 
 ### Patch Changes

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

@@ -17,6 +17,7 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     tableNode = _ref.tableNode,
     rendererAppearance = _ref.rendererAppearance;
   return /*#__PURE__*/_react.default.createElement("table", {
+    "data-testid": "renderer-table",
     "data-number-column": isNumberColumnEnabled,
     ref: innerRef
   }, /*#__PURE__*/_react.default.createElement(_colgroup.Colgroup, {

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

@@ -27,6 +27,9 @@ var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _sticky = require("./table/sticky");
 var _table = require("./table/table");
 var _appearance = require("../utils/appearance");
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
@@ -126,7 +129,9 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      stickyMode: 'none'
+      stickyMode: 'none',
+      wrapperWidth: 0,
+      headerRowHeight: 0
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tableRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "stickyHeaderRef", /*#__PURE__*/_react.default.createRef());
@@ -134,6 +139,33 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "stickyWrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "overflowParent", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resizeObserver", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyResizerChange", function (entries) {
+      var wrapperWidth = _this.state.wrapperWidth;
+      var headerRowHeight = _this.state.headerRowHeight;
+      var _iterator = _createForOfIteratorHelper(entries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          if (entry.target === _this.wrapperRef.current) {
+            wrapperWidth = entry.contentRect.width;
+          } else if (entry.target === _this.stickyHeaderRef.current) {
+            headerRowHeight = Math.round(entry.contentRect.height);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      if (headerRowHeight !== _this.state.headerRowHeight || wrapperWidth !== _this.state.wrapperWidth) {
+        _this.setState({
+          wrapperWidth: wrapperWidth,
+          headerRowHeight: headerRowHeight
+        });
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentWillUnmount", function () {
       if (_this.overflowParent) {
         _this.overflowParent.removeEventListener('scroll', _this.onScroll);
@@ -141,6 +173,9 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
       if (_this.nextFrame) {
         cancelAnimationFrame(_this.nextFrame);
       }
+      if (_this.resizeObserver) {
+        _this.resizeObserver.disconnect();
+      }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getScrollTop", function () {
       var stickyHeaders = _this.props.stickyHeaders;
@@ -197,6 +232,13 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(TableContainer, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.resizeObserver = new ResizeObserver(this.applyResizerChange);
+      if (this.wrapperRef.current) {
+        this.resizeObserver.observe(this.wrapperRef.current);
+      }
+      if (this.stickyHeaderRef.current) {
+        this.resizeObserver.observe(this.stickyHeaderRef.current);
+      }
       if (this.props.stickyHeaders) {
         this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current);
         this.overflowParent.addEventListener('scroll', this.onScroll);
@@ -243,11 +285,6 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
           return undefined;
       }
     }
-  }, {
-    key: "headerRowHeight",
-    get: function get() {
-      return this.stickyHeaderRef.current ? this.stickyHeaderRef.current.offsetHeight : 0;
-    }
   }, {
     key: "render",
     value: function render() {
@@ -274,7 +311,6 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
       if (canUseLinelength(rendererAppearance) && tableWidth !== 'inherit' && tableWidth > lineLength) {
         left = lineLength / 2 - tableWidth / 2;
       }
-      var wrapperWidth = this.wrapperRef.current ? this.wrapperRef.current.clientWidth : 0;
       var children = _react.default.Children.toArray(this.props.children);
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
@@ -287,9 +323,9 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         left: left,
         mode: stickyMode,
         innerRef: this.stickyWrapperRef,
-        wrapperWidth: wrapperWidth,
+        wrapperWidth: this.state.wrapperWidth,
         columnWidths: columnWidths,
-        rowHeight: this.headerRowHeight,
+        rowHeight: this.state.headerRowHeight,
         rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
@@ -309,9 +345,9 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
         top: this.stickyTop,
         mode: stickyMode,
         innerRef: this.stickyWrapperRef,
-        wrapperWidth: wrapperWidth,
+        wrapperWidth: this.state.wrapperWidth,
         columnWidths: columnWidths,
-        rowHeight: this.headerRowHeight,
+        rowHeight: this.state.headerRowHeight,
         tableNode: tableNode,
         rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {

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

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.11.1";
+var packageVersion = "108.11.3";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.11.1",
+	"version": "108.11.3",
 	"sideEffects": false
 }

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

@@ -11,6 +11,7 @@ export const Table = /*#__PURE__*/React.memo(({
   rendererAppearance
 }) => {
   return /*#__PURE__*/React.createElement("table", {
+    "data-testid": "renderer-table",
     "data-number-column": isNumberColumnEnabled,
     ref: innerRef
   }, /*#__PURE__*/React.createElement(Colgroup, {

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

@@ -91,7 +91,9 @@ export class TableContainer extends React.Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "state", {
-      stickyMode: 'none'
+      stickyMode: 'none',
+      wrapperWidth: 0,
+      headerRowHeight: 0
     });
     _defineProperty(this, "tableRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "stickyHeaderRef", /*#__PURE__*/React.createRef());
@@ -99,6 +101,24 @@ export class TableContainer extends React.Component {
     _defineProperty(this, "stickyWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "wrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "overflowParent", null);
+    _defineProperty(this, "resizeObserver", null);
+    _defineProperty(this, "applyResizerChange", entries => {
+      let wrapperWidth = this.state.wrapperWidth;
+      let headerRowHeight = this.state.headerRowHeight;
+      for (const entry of entries) {
+        if (entry.target === this.wrapperRef.current) {
+          wrapperWidth = entry.contentRect.width;
+        } else if (entry.target === this.stickyHeaderRef.current) {
+          headerRowHeight = Math.round(entry.contentRect.height);
+        }
+      }
+      if (headerRowHeight !== this.state.headerRowHeight || wrapperWidth !== this.state.wrapperWidth) {
+        this.setState({
+          wrapperWidth,
+          headerRowHeight
+        });
+      }
+    });
     _defineProperty(this, "componentWillUnmount", () => {
       if (this.overflowParent) {
         this.overflowParent.removeEventListener('scroll', this.onScroll);
@@ -106,6 +126,9 @@ export class TableContainer extends React.Component {
       if (this.nextFrame) {
         cancelAnimationFrame(this.nextFrame);
       }
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
     });
     _defineProperty(this, "getScrollTop", () => {
       const {
@@ -161,6 +184,13 @@ export class TableContainer extends React.Component {
     });
   }
   componentDidMount() {
+    this.resizeObserver = new ResizeObserver(this.applyResizerChange);
+    if (this.wrapperRef.current) {
+      this.resizeObserver.observe(this.wrapperRef.current);
+    }
+    if (this.stickyHeaderRef.current) {
+      this.resizeObserver.observe(this.stickyHeaderRef.current);
+    }
     if (this.props.stickyHeaders) {
       this.overflowParent = OverflowParent.fromElement(this.tableRef.current);
       this.overflowParent.addEventListener('scroll', this.onScroll);
@@ -201,9 +231,6 @@ export class TableContainer extends React.Component {
         return undefined;
     }
   }
-  get headerRowHeight() {
-    return this.stickyHeaderRef.current ? this.stickyHeaderRef.current.offsetHeight : 0;
-  }
   render() {
     const {
       isNumberColumnEnabled,
@@ -231,7 +258,6 @@ export class TableContainer extends React.Component {
     if (canUseLinelength(rendererAppearance) && tableWidth !== 'inherit' && tableWidth > lineLength) {
       left = lineLength / 2 - tableWidth / 2;
     }
-    const wrapperWidth = this.wrapperRef.current ? this.wrapperRef.current.clientWidth : 0;
     const children = React.Children.toArray(this.props.children);
     return /*#__PURE__*/React.createElement(React.Fragment, null, !getBooleanFF('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
       isNumberColumnEnabled: isNumberColumnEnabled,
@@ -244,9 +270,9 @@ export class TableContainer extends React.Component {
       left: left,
       mode: stickyMode,
       innerRef: this.stickyWrapperRef,
-      wrapperWidth: wrapperWidth,
+      wrapperWidth: this.state.wrapperWidth,
       columnWidths: columnWidths,
-      rowHeight: this.headerRowHeight,
+      rowHeight: this.state.headerRowHeight,
       rendererAppearance: rendererAppearance
     }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
       className: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames || ''}`,
@@ -266,9 +292,9 @@ export class TableContainer extends React.Component {
       top: this.stickyTop,
       mode: stickyMode,
       innerRef: this.stickyWrapperRef,
-      wrapperWidth: wrapperWidth,
+      wrapperWidth: this.state.wrapperWidth,
       columnWidths: columnWidths,
-      rowHeight: this.headerRowHeight,
+      rowHeight: this.state.headerRowHeight,
       tableNode: tableNode,
       rendererAppearance: rendererAppearance
     }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {

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

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.11.1";
+const packageVersion = "108.11.3";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.11.1",
+	"version": "108.11.3",
 	"sideEffects": false
 }

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

@@ -10,6 +10,7 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
     tableNode = _ref.tableNode,
     rendererAppearance = _ref.rendererAppearance;
   return /*#__PURE__*/React.createElement("table", {
+    "data-testid": "renderer-table",
     "data-number-column": isNumberColumnEnabled,
     ref: innerRef
   }, /*#__PURE__*/React.createElement(Colgroup, {

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

@@ -6,6 +6,9 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React from 'react';
@@ -119,7 +122,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "state", {
-      stickyMode: 'none'
+      stickyMode: 'none',
+      wrapperWidth: 0,
+      headerRowHeight: 0
     });
     _defineProperty(_assertThisInitialized(_this), "tableRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "stickyHeaderRef", /*#__PURE__*/React.createRef());
@@ -127,6 +132,33 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "stickyWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "wrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "overflowParent", null);
+    _defineProperty(_assertThisInitialized(_this), "resizeObserver", null);
+    _defineProperty(_assertThisInitialized(_this), "applyResizerChange", function (entries) {
+      var wrapperWidth = _this.state.wrapperWidth;
+      var headerRowHeight = _this.state.headerRowHeight;
+      var _iterator = _createForOfIteratorHelper(entries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          if (entry.target === _this.wrapperRef.current) {
+            wrapperWidth = entry.contentRect.width;
+          } else if (entry.target === _this.stickyHeaderRef.current) {
+            headerRowHeight = Math.round(entry.contentRect.height);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      if (headerRowHeight !== _this.state.headerRowHeight || wrapperWidth !== _this.state.wrapperWidth) {
+        _this.setState({
+          wrapperWidth: wrapperWidth,
+          headerRowHeight: headerRowHeight
+        });
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
       if (_this.overflowParent) {
         _this.overflowParent.removeEventListener('scroll', _this.onScroll);
@@ -134,6 +166,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       if (_this.nextFrame) {
         cancelAnimationFrame(_this.nextFrame);
       }
+      if (_this.resizeObserver) {
+        _this.resizeObserver.disconnect();
+      }
     });
     _defineProperty(_assertThisInitialized(_this), "getScrollTop", function () {
       var stickyHeaders = _this.props.stickyHeaders;
@@ -190,6 +225,13 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
   _createClass(TableContainer, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.resizeObserver = new ResizeObserver(this.applyResizerChange);
+      if (this.wrapperRef.current) {
+        this.resizeObserver.observe(this.wrapperRef.current);
+      }
+      if (this.stickyHeaderRef.current) {
+        this.resizeObserver.observe(this.stickyHeaderRef.current);
+      }
       if (this.props.stickyHeaders) {
         this.overflowParent = OverflowParent.fromElement(this.tableRef.current);
         this.overflowParent.addEventListener('scroll', this.onScroll);
@@ -236,11 +278,6 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
           return undefined;
       }
     }
-  }, {
-    key: "headerRowHeight",
-    get: function get() {
-      return this.stickyHeaderRef.current ? this.stickyHeaderRef.current.offsetHeight : 0;
-    }
   }, {
     key: "render",
     value: function render() {
@@ -267,7 +304,6 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       if (canUseLinelength(rendererAppearance) && tableWidth !== 'inherit' && tableWidth > lineLength) {
         left = lineLength / 2 - tableWidth / 2;
       }
-      var wrapperWidth = this.wrapperRef.current ? this.wrapperRef.current.clientWidth : 0;
       var children = React.Children.toArray(this.props.children);
       return /*#__PURE__*/React.createElement(React.Fragment, null, !getBooleanFF('platform.editor.custom-table-width') && stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
@@ -280,9 +316,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         left: left,
         mode: stickyMode,
         innerRef: this.stickyWrapperRef,
-        wrapperWidth: wrapperWidth,
+        wrapperWidth: this.state.wrapperWidth,
         columnWidths: columnWidths,
-        rowHeight: this.headerRowHeight,
+        rowHeight: this.state.headerRowHeight,
         rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
         className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
@@ -302,9 +338,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         top: this.stickyTop,
         mode: stickyMode,
         innerRef: this.stickyWrapperRef,
-        wrapperWidth: wrapperWidth,
+        wrapperWidth: this.state.wrapperWidth,
         columnWidths: columnWidths,
-        rowHeight: this.headerRowHeight,
+        rowHeight: this.state.headerRowHeight,
         tableNode: tableNode,
         rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {

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

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.11.1";
+var packageVersion = "108.11.3";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.11.1",
+	"version": "108.11.3",
 	"sideEffects": false
 }

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

@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
-import { TableLayout } from '@atlaskit/adf-schema';
-import { RendererAppearance } from '../../../ui/Renderer/types';
+import type { TableLayout } from '@atlaskit/adf-schema';
+import type { RendererAppearance } from '../../../ui/Renderer/types';
 export type StickyMode = 'none' | 'stick' | 'pin-bottom';
 export declare const tableStickyPadding = 8;
 interface FixedProps {

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

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { RendererAppearance, StickyHeaderConfig } from '../../ui/Renderer/types';
-import { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
-import { StickyMode, OverflowParent } from './table/sticky';
-import { SharedTableProps } from './table/types';
+import type { RendererAppearance, StickyHeaderConfig } from '../../ui/Renderer/types';
+import type { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
+import type { StickyMode } from './table/sticky';
+import { OverflowParent } from './table/sticky';
+import type { SharedTableProps } from './table/types';
 export declare const isTableResizingEnabled: (appearance: RendererAppearance) => boolean;
 export type TableProps = SharedTableProps & {
     children: React.ReactElement<any> | Array<React.ReactElement<any>>;
@@ -20,6 +21,8 @@ interface TableOrderStatus {
 }
 interface TableState {
     stickyMode: StickyMode;
+    wrapperWidth: number;
+    headerRowHeight: number;
 }
 export declare class TableContainer extends React.Component<TableProps & OverflowShadowProps & WithSmartCardStorageProps, TableState> {
     state: TableState;
@@ -29,6 +32,8 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     wrapperRef: React.RefObject<HTMLDivElement>;
     nextFrame: number | undefined;
     overflowParent: OverflowParent | null;
+    private resizeObserver;
+    private applyResizerChange;
     componentDidMount(): void;
     componentDidUpdate(prevProps: TableProps, prevState: TableState): void;
     componentWillUnmount: () => void;
@@ -38,7 +43,6 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     onWrapperScrolled: () => void;
     get pinTop(): number | undefined;
     get stickyTop(): number | undefined;
-    get headerRowHeight(): number;
     render(): JSX.Element;
     private grabFirstRowRef;
 }

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

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { RendererProps } from '../renderer-props';
+import type { RendererProps } from '../renderer-props';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
 export interface Extension<T> {

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

@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
-import { TableLayout } from '@atlaskit/adf-schema';
-import { RendererAppearance } from '../../../ui/Renderer/types';
+import type { TableLayout } from '@atlaskit/adf-schema';
+import type { RendererAppearance } from '../../../ui/Renderer/types';
 export type StickyMode = 'none' | 'stick' | 'pin-bottom';
 export declare const tableStickyPadding = 8;
 interface FixedProps {

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

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
 import { SortOrder } from '@atlaskit/editor-common/types';
-import { RendererAppearance, StickyHeaderConfig } from '../../ui/Renderer/types';
-import { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
-import { StickyMode, OverflowParent } from './table/sticky';
-import { SharedTableProps } from './table/types';
+import type { RendererAppearance, StickyHeaderConfig } from '../../ui/Renderer/types';
+import type { WithSmartCardStorageProps } from '../../ui/SmartCardStorage';
+import type { StickyMode } from './table/sticky';
+import { OverflowParent } from './table/sticky';
+import type { SharedTableProps } from './table/types';
 export declare const isTableResizingEnabled: (appearance: RendererAppearance) => boolean;
 export type TableProps = SharedTableProps & {
     children: React.ReactElement<any> | Array<React.ReactElement<any>>;
@@ -20,6 +21,8 @@ interface TableOrderStatus {
 }
 interface TableState {
     stickyMode: StickyMode;
+    wrapperWidth: number;
+    headerRowHeight: number;
 }
 export declare class TableContainer extends React.Component<TableProps & OverflowShadowProps & WithSmartCardStorageProps, TableState> {
     state: TableState;
@@ -29,6 +32,8 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     wrapperRef: React.RefObject<HTMLDivElement>;
     nextFrame: number | undefined;
     overflowParent: OverflowParent | null;
+    private resizeObserver;
+    private applyResizerChange;
     componentDidMount(): void;
     componentDidUpdate(prevProps: TableProps, prevState: TableState): void;
     componentWillUnmount: () => void;
@@ -38,7 +43,6 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
     onWrapperScrolled: () => void;
     get pinTop(): number | undefined;
     get stickyTop(): number | undefined;
-    get headerRowHeight(): number;
     render(): JSX.Element;
     private grabFirstRowRef;
 }

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

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { RendererProps } from '../renderer-props';
+import type { RendererProps } from '../renderer-props';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
 export interface Extension<T> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "108.11.1",
+  "version": "108.11.3",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,17 +24,17 @@
     }
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^28.0.0",
+    "@atlaskit/adf-schema": "^28.1.0",
     "@atlaskit/adf-utils": "^19.0.0",
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.8.0",
+    "@atlaskit/button": "^16.9.0",
     "@atlaskit/code": "^14.6.0",
-    "@atlaskit/editor-common": "^74.40.0",
+    "@atlaskit/editor-common": "^74.42.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.1",
-    "@atlaskit/editor-prosemirror": "1.0.2",
+    "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.6.0",
     "@atlaskit/emoji": "^67.4.0",
     "@atlaskit/icon": "^21.12.0",