@atlaskit/editor-plugin-table 1.2.0 → 1.2.2

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-table
 
+## 1.2.2
+
+### Patch Changes
+
+- [`ef830fdabfa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ef830fdabfa) - [ED-17294] Enable type checking for Preset plugins on unit tests
+- [`b7f9b82ecd8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b7f9b82ecd8) - [ED-16109] Fix deleting rows with row above and below having merged cells
+- [`7946da1848a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7946da1848a) - [ux] [ED-16668] Update table shadow intersection table to observe new shadow sentinels instead of first and last cell
+- Updated dependencies
+
+## 1.2.1
+
+### Patch Changes
+
+- [`f07824eeccc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f07824eeccc) - ED-15647 fix undo when pasting table with resized column in expand
+- [`924e8493f96`](https://bitbucket.org/atlassian/atlassian-frontend/commits/924e8493f96) - [ux] [ED-16418] Fixed issue where on resize the topPosEditorElement top position which determines the height of the sticky header would not update on window resize or other actions that may affect its height
+- [`2f7fff7239d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2f7fff7239d) - [ux] [ED-17271] Sticky headers now listen for width changes in the parent scroll container
+- [`2367ba14aa0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2367ba14aa0) - [ux] ED-16758 Added support for theme tokens in table cell background color.
+- [`1f10173bdad`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1f10173bdad) - [ux] [ED-15686] Added sticky to floating contextual menu dropdown
+- [`a5d7c8d0f1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a5d7c8d0f1e) - [ux] Fix of the regression caused due to https://product-fabric.atlassian.net/browse/DTR-1313
+- [`deef98920f4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/deef98920f4) - [ux] ED-16718 Table scroll troll - refactor nested expand logic back into editor-common
+- [`1720ddc8076`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1720ddc8076) - [ux] ED-16725 Added support for semantic tooltip names for background color palette.
+- [`454e652b2ed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/454e652b2ed) - [ux] This change (TSLA-488) addresses a bug that occurs when changing the browser window size causes the
+  table margin to not be immediately updated for tables with active sticky headers. This change adds an
+  event listener for window resizing that updates the table margins.
+- Updated dependencies
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/cjs/i18n/en.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//
+var _default = {
+  'fabric.editor.canNotSortTable': "⚠️ You can't sort a table with merged cells",
+  'fabric.editor.cellBackground': 'Cell background',
+  'fabric.editor.cellOptions': 'Cell options',
+  'fabric.editor.clearCells': 'Clear {0, plural, one {cell} other {cells}}',
+  'fabric.editor.collapseTable': 'Collapse table',
+  'fabric.editor.cornerControl': 'Highlight table',
+  'fabric.editor.distributeColumns': 'Distribute columns',
+  'fabric.editor.extension.confirmDeleteLinkedModalMessagePrefix': 'Deleting',
+  'fabric.editor.extension.deleteElementTitle': 'Delete element',
+  'fabric.editor.extension.sourceNoTitledName': 'this element',
+  'fabric.editor.floatingToolbar.confirmModalCheckboxLabel': 'Also delete connected elements',
+  'fabric.editor.headerColumn': 'Header column',
+  'fabric.editor.headerRow': 'Header row',
+  'fabric.editor.insertColumn': 'Insert column right',
+  'fabric.editor.insertRow': 'Insert row below',
+  'fabric.editor.mergeCells': 'Merge cells',
+  'fabric.editor.numberedColumn': 'Numbered column',
+  'fabric.editor.removeColumns': 'Delete {0, plural, one {column} other {columns}}',
+  'fabric.editor.removeRows': 'Delete {0, plural, one {row} other {rows}}',
+  'fabric.editor.rowControl': 'Highlight row',
+  'fabric.editor.sortColumnASC': 'Sort column A → Z',
+  'fabric.editor.sortColumnDESC': 'Sort column Z → A',
+  'fabric.editor.splitCell': 'Split cell',
+  'fabric.editor.tableOptions': 'Table options',
+  'fabric.editor.tables.confirmDeleteLinkedModalMessage': 'Deleting {nodeName} will break anything connected to it.',
+  'fabric.editor.tables.confirmDeleteLinkedModalOKButton': 'Delete'
+};
+exports.default = _default;

package/dist/cjs/i18n/en_GB.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//English (United Kingdom)
+var _default = {
+  'fabric.editor.canNotSortTable': "⚠️ You can't sort a table with merged cells",
+  'fabric.editor.cellBackground': 'Cell background',
+  'fabric.editor.cellOptions': 'Cell options',
+  'fabric.editor.clearCells': 'Clear {0, plural, one {cell} other {cells}}',
+  'fabric.editor.collapseTable': 'Collapse table',
+  'fabric.editor.cornerControl': 'Highlight table',
+  'fabric.editor.distributeColumns': 'Distribute columns',
+  'fabric.editor.extension.confirmDeleteLinkedModalMessagePrefix': 'Deleting',
+  'fabric.editor.extension.deleteElementTitle': 'Delete element',
+  'fabric.editor.extension.sourceNoTitledName': 'this element',
+  'fabric.editor.floatingToolbar.confirmModalCheckboxLabel': 'Also delete connected elements',
+  'fabric.editor.headerColumn': 'Header column',
+  'fabric.editor.headerRow': 'Header row',
+  'fabric.editor.insertColumn': 'Insert column right',
+  'fabric.editor.insertRow': 'Insert row below',
+  'fabric.editor.mergeCells': 'Merge cells',
+  'fabric.editor.numberedColumn': 'Numbered column',
+  'fabric.editor.removeColumns': 'Delete {0, plural, one {column} other {columns}}',
+  'fabric.editor.removeRows': 'Delete {0, plural, one {row} other {rows}}',
+  'fabric.editor.rowControl': 'Highlight row',
+  'fabric.editor.sortColumnASC': 'Sort column A → Z',
+  'fabric.editor.sortColumnDESC': 'Sort column Z → A',
+  'fabric.editor.splitCell': 'Split cell',
+  'fabric.editor.tableOptions': 'Table options',
+  'fabric.editor.tables.confirmDeleteLinkedModalMessage': 'Deleting {nodeName} will break anything connected to it.',
+  'fabric.editor.tables.confirmDeleteLinkedModalOKButton': 'Delete'
+};
+exports.default = _default;

package/dist/cjs/plugins/table/index.js

@@ -273,7 +273,8 @@ var tablesPlugin = function tablesPlugin(options) {
             isOpen: Boolean(isContextualMenuOpen),
             pluginConfig: pluginConfig,
             editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI,
-            getEditorContainerWidth: defaultGetEditorContainerWidth
+            getEditorContainerWidth: defaultGetEditorContainerWidth,
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
           }), allowControls && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
             editorView: editorView,
             selection: editorView.state.selection,

package/dist/cjs/plugins/table/nodeviews/OverflowShadowsObserver.js

@@ -16,16 +16,9 @@ var OverflowShadowsObserver = /*#__PURE__*/function () {
   function OverflowShadowsObserver(updateShadowState, _table, wrapper) {
     var _this = this;
     (0, _classCallCheck2.default)(this, OverflowShadowsObserver);
-    (0, _defineProperty2.default)(this, "firstCell", null);
-    (0, _defineProperty2.default)(this, "lastCell", null);
-    (0, _defineProperty2.default)(this, "getFirstCell", function (isSticky, hasHeaderRow) {
-      var _this$table;
-      return (_this$table = _this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(isSticky || !hasHeaderRow ? 'table tbody tr td' : 'table tbody tr th');
-    });
-    (0, _defineProperty2.default)(this, "getLastCell", function (isSticky, hasHeaderRow) {
-      var _this$table2;
-      return (_this$table2 = _this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(isSticky || !hasHeaderRow ? 'table tbody tr td:last-child' : 'table tbody tr th:last-child');
-    });
+    (0, _defineProperty2.default)(this, "leftShadowSentinel", null);
+    (0, _defineProperty2.default)(this, "rightShadowSentinel", null);
+    (0, _defineProperty2.default)(this, "shadowsObserved", false);
     (0, _defineProperty2.default)(this, "isSticky", false);
     (0, _defineProperty2.default)(this, "stickyRowHeight", 0);
     (0, _defineProperty2.default)(this, "init", function () {
@@ -39,11 +32,11 @@ var OverflowShadowsObserver = /*#__PURE__*/function () {
           if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.width)) {
             return;
           }
-          if (entry.target !== _this.firstCell && entry.target !== _this.lastCell) {
+          if (entry.target !== _this.leftShadowSentinel && entry.target !== _this.rightShadowSentinel) {
             return;
           }
           _this.updateStickyShadowsHeightIfChanged();
-          _this.checkIntersectionEvent(entry, _this.firstCell === entry.target ? _types.ShadowEvent.SHOW_BEFORE_SHADOW : _types.ShadowEvent.SHOW_AFTER_SHADOW);
+          _this.checkIntersectionEvent(entry, _this.leftShadowSentinel === entry.target ? _types.ShadowEvent.SHOW_BEFORE_SHADOW : _types.ShadowEvent.SHOW_AFTER_SHADOW);
         };
         _this.tableIntersectionObserver = new IntersectionObserver(function (entries, _) {
           entries.forEach(function (entry) {
@@ -68,25 +61,19 @@ var OverflowShadowsObserver = /*#__PURE__*/function () {
         _this.updateShadowState(shadowKey, true);
       }
     });
-    (0, _defineProperty2.default)(this, "observeCells", function (isSticky, hasHeaderRow) {
-      var stickyChanged = !!isSticky !== _this.isSticky;
+    (0, _defineProperty2.default)(this, "observeShadowSentinels", function (isSticky) {
+      var _this$table, _this$table2;
       _this.isSticky = !!isSticky;
 
       // update sticky shadows
       _this.updateStickyShadowsHeightIfChanged();
-      if (!stickyChanged) {
-        var firstCell = _this.getFirstCell(isSticky, hasHeaderRow);
-        var lastCell = _this.getLastCell(isSticky, hasHeaderRow);
-        if (!firstCell || !lastCell || firstCell === _this.firstCell && lastCell === _this.lastCell) {
-          return;
-        }
-      }
-      _this.firstCell = _this.getFirstCell(isSticky, hasHeaderRow);
-      _this.lastCell = _this.getLastCell(isSticky, hasHeaderRow);
-      if (_this.tableIntersectionObserver && _this.firstCell && _this.lastCell) {
+      _this.leftShadowSentinel = (_this$table = _this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(".".concat(_types.TableCssClassName.TABLE_SHADOW_SENTINEL_LEFT));
+      _this.rightShadowSentinel = (_this$table2 = _this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(".".concat(_types.TableCssClassName.TABLE_SHADOW_SENTINEL_RIGHT));
+      if (_this.tableIntersectionObserver && _this.leftShadowSentinel && _this.rightShadowSentinel && !_this.shadowsObserved) {
         _this.tableIntersectionObserver.disconnect();
-        _this.tableIntersectionObserver.observe(_this.firstCell);
-        _this.tableIntersectionObserver.observe(_this.lastCell);
+        _this.tableIntersectionObserver.observe(_this.leftShadowSentinel);
+        _this.tableIntersectionObserver.observe(_this.rightShadowSentinel);
+        _this.shadowsObserved = true;
       }
     });
     (0, _defineProperty2.default)(this, "updateStickyShadows", function (stickyRowHeight) {

package/dist/cjs/plugins/table/nodeviews/TableComponent.js

@@ -32,7 +32,6 @@ var _utils4 = require("../utils");
 var _updateOverflowShadows = require("./update-overflow-shadows");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _OverflowShadowsObserver = require("./OverflowShadowsObserver");
-var _misc = require("../pm-plugins/table-resizing/utils/misc");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty3.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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); }; }
@@ -65,6 +64,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
       _this.setState((0, _defineProperty3.default)({}, shadowKey, value));
     });
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "createShadowSentinels", function (table) {
+      if (table) {
+        var shadowSentinelLeft = document.createElement('span');
+        shadowSentinelLeft.className = _types.TableCssClassName.TABLE_SHADOW_SENTINEL_LEFT;
+        var shadowSentinelRight = document.createElement('span');
+        shadowSentinelRight.className = _types.TableCssClassName.TABLE_SHADOW_SENTINEL_RIGHT;
+        table.prepend(shadowSentinelLeft);
+        table.prepend(shadowSentinelRight);
+      }
+    });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "onStickyState", function (state) {
       var _this$props$getEditor = _this.props.getEditorFeatureFlags(),
         tableOverflowShadowsOptimization = _this$props$getEditor.tableOverflowShadowsOptimization;
@@ -113,6 +122,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (!tableOverflowShadowsOptimization) {
         _this.updateShadows();
       }
+      if (_this.wrapper.scrollLeft === 0) {
+        _this.setState((0, _defineProperty3.default)({}, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false));
+      } else {
+        _this.setState((0, _defineProperty3.default)({}, _types.ShadowEvent.SHOW_BEFORE_SHADOW, true));
+      }
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleTableResizing", function () {
       var _this$props = _this.props,
@@ -251,7 +265,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         return;
       }
       var parentNodeWith = (0, _nodeWidth.getParentNodeWidth)(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
-      return (0, _misc.getParentWidthWithoutPadding)(parentNodeWith, pos, state);
+      return parentNodeWith;
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateParentWidth", function (width) {
       _this.setState({
@@ -368,7 +382,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
         if (this.overflowShadowsObserver) {
           var _this$state$stickyHea;
-          this.overflowShadowsObserver.observeCells((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky, (0, _utils4.containsHeaderRow)(getNode()));
+          this.overflowShadowsObserver.observeShadowSentinels((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky);
         }
       }
       var currentTable = getNode();
@@ -496,6 +510,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             var tableElement = elem.querySelector('table');
             if (tableElement !== _this2.table) {
               _this2.table = tableElement;
+              _this2.createShadowSentinels(_this2.table);
             }
           }
         }

package/dist/cjs/plugins/table/nodeviews/table.js

@@ -179,6 +179,13 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
       if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
         return false;
       }
+
+      // ED-16668
+      // Do not remove this fixes an issue with windows firefox that relates to
+      // the addition of the shadow sentinels
+      if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'TABLE' && ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'COLGROUP' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'SPAN')) {
+        return false;
+      }
       return true;
     }
   }, {

package/dist/cjs/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -188,7 +188,7 @@ var TableRowNodeView = /*#__PURE__*/function () {
         (0, _dom.syncStickyRowToTable)(tree.table);
       }, 0);
     });
-    (0, _defineProperty2.default)(this, "onWidthPluginState", function () {
+    (0, _defineProperty2.default)(this, "updateStickyHeaderWidth", function () {
       // table width might have changed, sync that back to sticky row
       var tree = _this.tree;
       if (!tree) {
@@ -220,7 +220,7 @@ var TableRowNodeView = /*#__PURE__*/function () {
       // otherwise make it non-sticky
       return false;
     });
-    (0, _defineProperty2.default)(this, "makeHeaderRowSticky", function (tree) {
+    (0, _defineProperty2.default)(this, "makeHeaderRowSticky", function (tree, scrollTop) {
       var _tbody$firstChild;
       // If header row height is more than 50% of viewport height don't do this
       if (_this.stickyRowHeight && _this.stickyRowHeight > window.innerHeight / 2) {
@@ -235,7 +235,10 @@ var TableRowNodeView = /*#__PURE__*/function () {
         return;
       }
       var currentTableTop = _this.getCurrentTableTop(tree);
-      var domTop = currentTableTop > 0 ? _this.topPosEditorElement : _this.topPosEditorElement + currentTableTop;
+      if (!scrollTop) {
+        scrollTop = (0, _dom2.getTop)(_this.editorScrollableElement);
+      }
+      var domTop = currentTableTop > 0 ? scrollTop : scrollTop + currentTableTop;
       if (!_this.isSticky) {
         (0, _dom.syncStickyRowToTable)(table);
         _this.dom.classList.add('sticky');
@@ -342,7 +345,7 @@ var TableRowNodeView = /*#__PURE__*/function () {
         }
         this.topPosEditorElement = (0, _dom2.getTop)(this.editorScrollableElement);
       }
-      this.eventDispatcher.on('widthPlugin', this.onWidthPluginState);
+      this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
       this.eventDispatcher.on(_pluginKey.pluginKey.key, this.onTablePluginState);
       this.listening = true;
       this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this));
@@ -370,7 +373,7 @@ var TableRowNodeView = /*#__PURE__*/function () {
       if (this.editorScrollableElement && !this.stickyHeadersOptimization) {
         this.editorScrollableElement.removeEventListener('scroll', this.onScroll);
       }
-      this.eventDispatcher.off('widthPlugin', this.onWidthPluginState);
+      this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
       this.eventDispatcher.off(_pluginKey.pluginKey.key, this.onTablePluginState);
       this.listening = false;
       this.dom.removeEventListener('wheel', this.headerRowMouseScroll);
@@ -392,6 +395,9 @@ var TableRowNodeView = /*#__PURE__*/function () {
         return;
       }
       this.resizeObserver.observe(this.dom);
+      if (this.editorScrollableElement) {
+        this.resizeObserver.observe(this.editorScrollableElement);
+      }
       window.requestAnimationFrame(function () {
         var _this2$tree;
         // we expect tree to be defined after animation frame
@@ -422,14 +428,21 @@ var TableRowNodeView = /*#__PURE__*/function () {
         }
         var table = _this3.tree.table;
         entries.forEach(function (entry) {
-          var newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
-          if (_this3.sentinels.bottom &&
-          // When the table header is sticky, it would be taller by a 1px (border-bottom),
-          // So we adding this check to allow a 1px difference.
-          Math.abs(newHeight - (_this3.stickyRowHeight || 0)) > _consts.stickyHeaderBorderBottomWidth) {
-            _this3.stickyRowHeight = newHeight;
-            _this3.sentinels.bottom.style.bottom = "".concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + newHeight, "px");
-            (0, _dom.updateStickyMargins)(table);
+          var _this3$editorScrollab;
+          // On resize of the parent scroll element we need to adjust the width
+          // of the sticky header
+          if (entry.target.className === ((_this3$editorScrollab = _this3.editorScrollableElement) === null || _this3$editorScrollab === void 0 ? void 0 : _this3$editorScrollab.className)) {
+            _this3.updateStickyHeaderWidth();
+          } else {
+            var newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
+            if (_this3.sentinels.bottom &&
+            // When the table header is sticky, it would be taller by a 1px (border-bottom),
+            // So we adding this check to allow a 1px difference.
+            Math.abs(newHeight - (_this3.stickyRowHeight || 0)) > _consts.stickyHeaderBorderBottomWidth) {
+              _this3.stickyRowHeight = newHeight;
+              _this3.sentinels.bottom.style.bottom = "".concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + newHeight, "px");
+              (0, _dom.updateStickyMargins)(table);
+            }
           }
         });
       });
@@ -455,18 +468,20 @@ var TableRowNodeView = /*#__PURE__*/function () {
             var _entry$rootBounds2;
             var sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.bottom;
             if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
-              _this4.tree && _this4.makeHeaderRowSticky(_this4.tree);
+              var _entry$rootBounds3;
+              _this4.tree && _this4.makeHeaderRowSticky(_this4.tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
             } else {
               table && _this4.makeRowHeaderNotSticky(table);
             }
           }
           if (target.classList.contains(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
-            var _entry$rootBounds3;
-            var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this4.dom.offsetHeight < (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top) || 0);
+            var _entry$rootBounds4;
+            var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this4.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
             if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
               _this4.makeRowHeaderNotSticky(table);
             } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
-              _this4.tree && _this4.makeHeaderRowSticky(_this4.tree);
+              var _entry$rootBounds5;
+              _this4.tree && _this4.makeHeaderRowSticky(_this4.tree, entry === null || entry === void 0 ? void 0 : (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
             }
           }
         });

package/dist/cjs/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -15,7 +15,6 @@ var _commands = require("./commands");
 var _pluginFactory = require("./plugin-factory");
 var _utils3 = require("./utils");
 var _analytics = require("@atlaskit/editor-common/analytics");
-var _misc = require("./utils/misc");
 var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
   var state = view.state,
     dispatch = view.dispatch;
@@ -36,10 +35,7 @@ var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos
   }
   var containerWidth = getEditorContainerWidth();
   var parentWidth = (0, _nodeWidth.getParentNodeWidth)(start, state, containerWidth);
-
-  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
-  var parentActualWidth = (0, _misc.getParentWidthWithoutPadding)(parentWidth, start, state);
-  var maxSize = parentActualWidth || (0, _utils3.getLayoutSize)(dom.getAttribute('data-layout'), containerWidth.width, {});
+  var maxSize = parentWidth || (0, _utils3.getLayoutSize)(dom.getAttribute('data-layout'), containerWidth.width, {});
   if (originalTable.attrs.isNumberColumnEnabled) {
     maxSize -= _editorSharedStyles.akEditorTableNumberColumnWidth;
   }

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/misc.js

@@ -7,7 +7,7 @@ exports.currentColWidth = currentColWidth;
 exports.domCellAround = domCellAround;
 exports.getDefaultLayoutMaxWidth = getDefaultLayoutMaxWidth;
 exports.getLayoutSize = getLayoutSize;
-exports.getTableMaxWidth = exports.getParentWidthWithoutPadding = void 0;
+exports.getTableMaxWidth = void 0;
 exports.pointsAtCell = pointsAtCell;
 exports.tableLayoutToSize = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
@@ -15,8 +15,6 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
-var _constants = require("@atlaskit/theme/constants");
-var _prosemirrorUtils = require("prosemirror-utils");
 var tableLayoutToSize = {
   default: _editorSharedStyles.akEditorDefaultLayoutWidth,
   wide: _editorSharedStyles.akEditorWideLayoutWidth,
@@ -84,43 +82,10 @@ var getTableMaxWidth = function getTableMaxWidth(_ref2) {
     getEditorContainerWidth = _ref2.getEditorContainerWidth;
   var containerWidth = getEditorContainerWidth();
   var parentWidth = (0, _nodeWidth.getParentNodeWidth)(tableStart, state, containerWidth);
-
-  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
-  var parentActualWidth = getParentWidthWithoutPadding(parentWidth, tableStart, state);
-  var maxWidth = parentActualWidth || getLayoutSize(layout, containerWidth.width, {});
+  var maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= _editorSharedStyles.akEditorTableNumberColumnWidth;
   }
   return maxWidth;
 };
-exports.getTableMaxWidth = getTableMaxWidth;
-var getParentWidthWithoutPadding = function getParentWidthWithoutPadding(parentWidth, tableStartPos, state) {
-  var node = getNestedParentNode(tableStartPos, state);
-  if (!node) {
-    return;
-  }
-  var schema = state.schema;
-  if (node.type === schema.nodes.expand) {
-    // padding
-    parentWidth -= (0, _constants.gridSize)() * 2;
-    // gutter offset
-    parentWidth += (0, _constants.gridSize)() * 1.5 * 2;
-    // padding right
-    parentWidth -= (0, _constants.gridSize)();
-    // padding left
-    parentWidth -= (0, _constants.gridSize)() * 4 - (0, _constants.gridSize)() / 2;
-  }
-  return parentWidth;
-};
-
-// copy of getNestedParentNode() from packages/editor/editor-common/src/node-width/index.ts
-// to be removed later when we will move getParentWidthWithoutPadding() logic to editor-common
-exports.getParentWidthWithoutPadding = getParentWidthWithoutPadding;
-var getNestedParentNode = function getNestedParentNode(tablePos, state) {
-  if (tablePos === undefined) {
-    return null;
-  }
-  var $pos = state.doc.resolve(tablePos);
-  var parent = (0, _prosemirrorUtils.findParentNodeOfTypeClosestToPos)($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
-  return parent ? parent.node : null;
-};
+exports.getTableMaxWidth = getTableMaxWidth;

package/dist/cjs/plugins/table/transforms/delete-rows.js

@@ -114,7 +114,7 @@ var deleteRows = function deleteRows(rect) {
       })(tr);
     }
     var newTable = table.node.type.createChecked(table.node.attrs, rows, table.node.marks);
-    var fixedTable = (0, _merge.removeEmptyColumns)(newTable);
+    var fixedTable = (0, _merge.mergeEmptyColumns)(newTable);
     if (fixedTable === null) {
       return (0, _metadata.setMeta)({
         type: 'DELETE_ROWS',

package/dist/cjs/plugins/table/transforms/index.js

@@ -45,10 +45,10 @@ Object.defineProperty(exports, "mergeCells", {
     return _merge.mergeCells;
   }
 });
-Object.defineProperty(exports, "removeEmptyColumns", {
+Object.defineProperty(exports, "mergeEmptyColumns", {
   enumerable: true,
   get: function get() {
-    return _merge.removeEmptyColumns;
+    return _merge.mergeEmptyColumns;
   }
 });
 Object.defineProperty(exports, "replaceSelectedTable", {
@@ -69,8 +69,8 @@ Object.defineProperty(exports, "updateColumnWidths", {
     return _columnWidth.updateColumnWidths;
   }
 });
-var _merge = require("./merge");
 var _fixTables = require("./fix-tables");
+var _merge = require("./merge");
 var _deleteColumns = require("./delete-columns");
 var _deleteRows = require("./delete-rows");
 var _columnWidth = require("./column-width");