@atlaskit/editor-plugin-table 1.1.5 → 1.2.1

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

@@ -172,7 +172,7 @@ export class TableRowNodeView {
         syncStickyRowToTable(tree.table);
       }, 0);
     });
-    _defineProperty(this, "onWidthPluginState", () => {
+    _defineProperty(this, "updateStickyHeaderWidth", () => {
       // table width might have changed, sync that back to sticky row
       const tree = this.tree;
       if (!tree) {
@@ -206,7 +206,7 @@ export class TableRowNodeView {
       // otherwise make it non-sticky
       return false;
     });
-    _defineProperty(this, "makeHeaderRowSticky", tree => {
+    _defineProperty(this, "makeHeaderRowSticky", (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) {
@@ -223,7 +223,10 @@ export class TableRowNodeView {
         return;
       }
       const currentTableTop = this.getCurrentTableTop(tree);
-      const domTop = currentTableTop > 0 ? this.topPosEditorElement : this.topPosEditorElement + currentTableTop;
+      if (!scrollTop) {
+        scrollTop = getTop(this.editorScrollableElement);
+      }
+      const domTop = currentTableTop > 0 ? scrollTop : scrollTop + currentTableTop;
       if (!this.isSticky) {
         syncStickyRowToTable(table);
         this.dom.classList.add('sticky');
@@ -315,7 +318,7 @@ export class TableRowNodeView {
       }
       this.topPosEditorElement = getTop(this.editorScrollableElement);
     }
-    this.eventDispatcher.on('widthPlugin', this.onWidthPluginState);
+    this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
     this.eventDispatcher.on(tablePluginKey.key, this.onTablePluginState);
     this.listening = true;
     this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this));
@@ -327,6 +330,13 @@ export class TableRowNodeView {
     }
     if (this.intersectionObserver) {
       this.intersectionObserver.disconnect();
+      // ED-16211 Once intersection observer is disconnected, we need to remove the isObserved from the sentinels
+      // Otherwise when new intersection observer is created it will not observe because it thinks its already being observed
+      [this.sentinels.top, this.sentinels.bottom].forEach(el => {
+        if (el) {
+          delete el.dataset.isObserved;
+        }
+      });
     }
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
@@ -334,7 +344,7 @@ export class TableRowNodeView {
     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(tablePluginKey.key, this.onTablePluginState);
     this.listening = false;
     this.dom.removeEventListener('wheel', this.headerRowMouseScroll);
@@ -353,6 +363,9 @@ export class TableRowNodeView {
       return;
     }
     this.resizeObserver.observe(this.dom);
+    if (this.editorScrollableElement) {
+      this.resizeObserver.observe(this.editorScrollableElement);
+    }
     window.requestAnimationFrame(() => {
       var _this$tree;
       // we expect tree to be defined after animation frame
@@ -382,14 +395,21 @@ export class TableRowNodeView {
         table
       } = this.tree;
       entries.forEach(entry => {
-        const newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
-        if (this.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 - (this.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
-          this.stickyRowHeight = newHeight;
-          this.sentinels.bottom.style.bottom = `${tableScrollbarOffset + stickyRowOffsetTop + newHeight}px`;
-          updateTableMargin(table);
+        var _this$editorScrollabl;
+        // On resize of the parent scroll element we need to adjust the width
+        // of the sticky header
+        if (entry.target.className === ((_this$editorScrollabl = this.editorScrollableElement) === null || _this$editorScrollabl === void 0 ? void 0 : _this$editorScrollabl.className)) {
+          this.updateStickyHeaderWidth();
+        } else {
+          const newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
+          if (this.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 - (this.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
+            this.stickyRowHeight = newHeight;
+            this.sentinels.bottom.style.bottom = `${tableScrollbarOffset + stickyRowOffsetTop + newHeight}px`;
+            updateTableMargin(table);
+          }
         }
       });
     });
@@ -414,18 +434,20 @@ export class TableRowNodeView {
           var _entry$rootBounds2;
           const sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.bottom;
           if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
-            this.tree && this.makeHeaderRowSticky(this.tree);
+            var _entry$rootBounds3;
+            this.tree && this.makeHeaderRowSticky(this.tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
           } else {
             table && this.makeRowHeaderNotSticky(table);
           }
         }
         if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
-          var _entry$rootBounds3;
-          const sentinelIsAboveScrollArea = entry.boundingClientRect.top - this.dom.offsetHeight < (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top) || 0);
+          var _entry$rootBounds4;
+          const sentinelIsAboveScrollArea = entry.boundingClientRect.top - this.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
           if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
             this.makeRowHeaderNotSticky(table);
           } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
-            this.tree && this.makeHeaderRowSticky(this.tree);
+            var _entry$rootBounds5;
+            this.tree && this.makeHeaderRowSticky(this.tree, entry === null || entry === void 0 ? void 0 : (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
           }
         }
       });

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

@@ -9,7 +9,6 @@ import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getLayoutSize, getResizeState, pointsAtCell, resizeColumn, updateControls } from './utils';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
-import { getParentWidthWithoutPadding } from './utils/misc';
 export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) => {
   const {
     state,
@@ -32,10 +31,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   }
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(start, state, containerWidth);
-
-  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
-  const parentActualWidth = getParentWidthWithoutPadding(parentWidth, start, state);
-  let maxSize = parentActualWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
+  let maxSize = parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
   if (originalTable.attrs.isNumberColumnEnabled) {
     maxSize -= akEditorTableNumberColumnWidth;
   }

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

@@ -3,8 +3,6 @@ import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-c
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorWideLayoutWidth, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { containsClassName } from '@atlaskit/editor-common/utils';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
-import { gridSize } from '@atlaskit/theme/constants';
-import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 export const tableLayoutToSize = {
   default: akEditorDefaultLayoutWidth,
   wide: akEditorWideLayoutWidth,
@@ -73,43 +71,9 @@ export const getTableMaxWidth = ({
 }) => {
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
-
-  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
-  const parentActualWidth = getParentWidthWithoutPadding(parentWidth, tableStart, state);
-  let maxWidth = parentActualWidth || getLayoutSize(layout, containerWidth.width, {});
+  let maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;
   }
   return maxWidth;
-};
-export const getParentWidthWithoutPadding = (parentWidth, tableStartPos, state) => {
-  const node = getNestedParentNode(tableStartPos, state);
-  if (!node) {
-    return;
-  }
-  const {
-    schema
-  } = state;
-  if (node.type === schema.nodes.expand) {
-    // padding
-    parentWidth -= gridSize() * 2;
-    // gutter offset
-    parentWidth += gridSize() * 1.5 * 2;
-    // padding right
-    parentWidth -= gridSize();
-    // padding left
-    parentWidth -= gridSize() * 4 - 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
-const getNestedParentNode = (tablePos, state) => {
-  if (tablePos === undefined) {
-    return null;
-  }
-  const $pos = state.doc.resolve(tablePos);
-  const parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
-  return parent ? parent.node : null;
 };

package/dist/es2019/plugins/table/toolbar.js

@@ -306,11 +306,12 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     // Check if we need to show confirm dialog for delete button
     let confirmDialog;
     if (isReferencedSource(state, tableObject.node)) {
+      const localSourceName = intl.formatMessage(tableMessages.unnamedSource);
       confirmDialog = () => ({
         title: intl.formatMessage(tableMessages.deleteElementTitle),
         okButtonLabel: intl.formatMessage(tableMessages.confirmDeleteLinkedModalOKButton),
         message: intl.formatMessage(tableMessages.confirmDeleteLinkedModalMessage, {
-          nodeName: getNodeName(state, tableObject.node)
+          nodeName: getNodeName(state, tableObject.node) || localSourceName
         }),
         messagePrefix: intl.formatMessage(tableMessages.confirmDeleteLinkedModalMessagePrefix),
         isReferentialityDialog: true,
@@ -335,7 +336,7 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
       title: 'Table floating controls',
       getDomRef,
       nodeType,
-      offset: [0, 3],
+      offset: [0, 18],
       zIndex: akEditorFloatingPanelZIndex + 1,
       // Place the context menu slightly above the others
       items: [menu, separator(menu.hidden), ...cellItems, ...colorPicker, {

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -5,9 +5,9 @@ import { jsx } from '@emotion/react';
 import { splitCell } from '@atlaskit/editor-tables/utils';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
-import { ColorPalette, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
+import { ColorPalette, backgroundPaletteTooltipMessages, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { cellColourPreviewStyles } from './styles';
 import { closestElement } from '@atlaskit/editor-common/utils';
@@ -94,12 +94,16 @@ export class ContextualMenu extends Component {
         intl: {
           formatMessage
         },
-        editorView
+        editorView,
+        getEditorFeatureFlags
       } = this.props;
       const items = [];
       const {
         isSubmenuOpen
       } = this.state;
+      const {
+        useSomewhatSemanticTextColorNames
+      } = getEditorFeatureFlags();
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       const {
         targetCellPosition,
@@ -126,9 +130,19 @@ export class ContextualMenu extends Component {
             ref: this.handleSubMenuRef
           }, jsx(ColorPalette, {
             cols: 7,
-            palette: cellBackgroundColorPalette,
             onClick: this.setColor,
-            selectedColor: background
+            selectedColor: background,
+            paletteOptions: {
+              palette: cellBackgroundColorPalette,
+              paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
+              // We did not want to create new FF or update
+              //  useSomewhatSemanticTextColorNames name
+              //  because it is temporary and require extra work.
+              // So even though it says text color names,
+              //  we are going to use for all color pickers
+              //  such as text, background and table charts.
+              showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
+            }
           })))
         });
       }
@@ -420,7 +434,10 @@ export class ContextualMenu extends Component {
       //This needs be removed when the a11y is completely handled
       //Disabling key navigation now as it works only partially
       ,
-      disableArrowKeyNavigation: true,
+      arrowKeyNavigationProviderOptions: {
+        type: ArrowKeyNavigationType.MENU,
+        disableArrowKeyNavigation: true
+      },
       items: items,
       isOpen: isOpen,
       onOpenChange: this.handleOpenChange,

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/index.js

@@ -34,7 +34,8 @@ const FloatingContextualMenu = ({
   isOpen,
   pluginConfig,
   editorAnalyticsAPI,
-  getEditorContainerWidth
+  getEditorContainerWidth,
+  getEditorFeatureFlags
 }) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const {
@@ -69,7 +70,8 @@ const FloatingContextualMenu = ({
     ,
     zIndex: akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    offset: [-7, 0]
+    offset: [-7, 0],
+    stick: true
   }, jsx("div", {
     css: tablePopupStyles
   }, jsx(ContextualMenu, {
@@ -83,7 +85,8 @@ const FloatingContextualMenu = ({
     selectionRect: selectionRect,
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    getEditorContainerWidth: getEditorContainerWidth
+    getEditorContainerWidth: getEditorContainerWidth,
+    getEditorFeatureFlags: getEditorFeatureFlags
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -294,6 +294,13 @@ export const tableStyles = props => {
 
       .${ClassName.ROW_CONTROLS_WRAPPER} {
         padding: 0 ${tablePadding}px;
+
+        // https://product-fabric.atlassian.net/browse/ED-16386
+        // Fixes issue where the extra padding that is added here throws off the position
+        // of the rows control dot
+        &::after {
+          right: 6px !important;
+        }
       }
 
       &.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
@@ -615,10 +622,10 @@ export const tableStyles = props => {
     .${ClassName.TABLE_NODE_WRAPPER} {
       padding-right: ${insertColumnButtonOffset}px;
       margin-right: -${insertColumnButtonOffset}px;
-      padding-bottom: ${tableScrollbarOffset}px;
-      margin-bottom: -${tableScrollbarOffset}px;
+      padding-bottom: 0px;
       /* fixes gap cursor height */
       overflow: auto;
+      overflow-y: hidden;
       position: relative;
     }
   }
@@ -634,7 +641,7 @@ export const tableStyles = props => {
     cursor: col-resize;
   }
 
-  /* 
+  /*
   ED-15882: When custom start numbers is enabled for lists, we have
   styles that handle this generally (in editor-common) so we can
   throw away the older table-specific styles here.

package/dist/es2019/plugins/table/ui/messages.js

@@ -49,5 +49,10 @@ export default defineMessages({
     id: 'fabric.editor.extension.deleteElementTitle',
     defaultMessage: 'Delete element',
     description: 'Title text for confirm modal when deleting an extension linked to a data consumer.'
+  },
+  unnamedSource: {
+    id: 'fabric.editor.extension.sourceNoTitledName',
+    defaultMessage: 'this element',
+    description: 'The current element without preset name been selected'
   }
 });

package/dist/es2019/plugins/table/ui/ui-styles.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { tableCellBorderWidth, tableMarginBottom, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
 import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A, B300, N300, R300, N20A, N60A, N0, Y50, Y200 } from '@atlaskit/theme/colors';
 import { tableToolbarColor, tableBorderColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, lineMarkerSize, columnControlsDecorationHeight, columnControlsZIndex, columnControlsSelectedZIndex, resizeHandlerAreaWidth, resizeLineWidth, resizeHandlerZIndex, tableToolbarSize, tableInsertColumnButtonSize, tableDeleteButtonSize } from './consts';
@@ -181,7 +181,7 @@ export const DeleteButton = css`
 export const OverflowShadow = props => css`
   .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
-    height: calc(100% - ${tableMarginTop + tableMarginBottom}px);
+    height: calc(100% - ${tableMarginTop}px);
     position: absolute;
     pointer-events: none;
     top: ${tableMarginTop}px;
@@ -217,10 +217,13 @@ export const OverflowShadow = props => css`
       );
     left: calc(100% + 2px);
   }
+  .${ClassName.TABLE_COLUMN_CONTROLS_DECORATIONS} {
+    z-index: 0;
+  }
   .${ClassName.WITH_CONTROLS} {
     .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-      height: calc(100% - ${tableMarginTop + tableMarginBottom}px);
-      top: ${tableMarginTop}px;
+      height: calc(100% - ${tableMarginTopWithControl}px);
+      top: ${tableMarginTopWithControl}px;
     }
     .${ClassName.TABLE_LEFT_SHADOW} {
       border-left: 1px solid ${tableBorderColor(props)};
@@ -255,6 +258,7 @@ export const columnControlsDecoration = props => css`
     left: -1px;
     top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
     height: ${columnControlsDecorationHeight}px;
+    z-index: 0;
 
     &::before {
       content: ' ';

package/dist/es2019/types/i18n.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.1.5",
+	"version": "1.2.1",
 	"sideEffects": false
 }

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

@@ -266,7 +266,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.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,

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

@@ -31,7 +31,6 @@ import { containsHeaderRow, tablesHaveDifferentColumnWidths, tablesHaveDifferent
 import { updateOverflowShadows } from './update-overflow-shadows';
 import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
-import { getParentWidthWithoutPadding } from '../pm-plugins/table-resizing/utils/misc';
 var isIE11 = browser.ie_version === 11;
 var NOOP = function NOOP() {
   return undefined;
@@ -246,7 +245,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         return;
       }
       var parentNodeWith = getParentNodeWidth(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
-      return getParentWidthWithoutPadding(parentNodeWith, pos, state);
+      return parentNodeWith;
     });
     _defineProperty(_assertThisInitialized(_this), "updateParentWidth", function (width) {
       _this.setState({

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

@@ -181,7 +181,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
         syncStickyRowToTable(tree.table);
       }, 0);
     });
-    _defineProperty(this, "onWidthPluginState", function () {
+    _defineProperty(this, "updateStickyHeaderWidth", function () {
       // table width might have changed, sync that back to sticky row
       var tree = _this.tree;
       if (!tree) {
@@ -213,7 +213,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       // otherwise make it non-sticky
       return false;
     });
-    _defineProperty(this, "makeHeaderRowSticky", function (tree) {
+    _defineProperty(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) {
@@ -228,7 +228,10 @@ export var TableRowNodeView = /*#__PURE__*/function () {
         return;
       }
       var currentTableTop = _this.getCurrentTableTop(tree);
-      var domTop = currentTableTop > 0 ? _this.topPosEditorElement : _this.topPosEditorElement + currentTableTop;
+      if (!scrollTop) {
+        scrollTop = getTop(_this.editorScrollableElement);
+      }
+      var domTop = currentTableTop > 0 ? scrollTop : scrollTop + currentTableTop;
       if (!_this.isSticky) {
         syncStickyRowToTable(table);
         _this.dom.classList.add('sticky');
@@ -335,7 +338,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
         }
         this.topPosEditorElement = getTop(this.editorScrollableElement);
       }
-      this.eventDispatcher.on('widthPlugin', this.onWidthPluginState);
+      this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
       this.eventDispatcher.on(tablePluginKey.key, this.onTablePluginState);
       this.listening = true;
       this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this));
@@ -349,6 +352,13 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       }
       if (this.intersectionObserver) {
         this.intersectionObserver.disconnect();
+        // ED-16211 Once intersection observer is disconnected, we need to remove the isObserved from the sentinels
+        // Otherwise when new intersection observer is created it will not observe because it thinks its already being observed
+        [this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
+          if (el) {
+            delete el.dataset.isObserved;
+          }
+        });
       }
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();
@@ -356,7 +366,7 @@ export 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(tablePluginKey.key, this.onTablePluginState);
       this.listening = false;
       this.dom.removeEventListener('wheel', this.headerRowMouseScroll);
@@ -378,6 +388,9 @@ export 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
@@ -408,14 +421,21 @@ export 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)) > stickyHeaderBorderBottomWidth) {
-            _this3.stickyRowHeight = newHeight;
-            _this3.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
-            updateTableMargin(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)) > stickyHeaderBorderBottomWidth) {
+              _this3.stickyRowHeight = newHeight;
+              _this3.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
+              updateTableMargin(table);
+            }
           }
         });
       });
@@ -441,18 +461,20 @@ export 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(ClassName.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/esm/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -9,7 +9,6 @@ import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getLayoutSize, getResizeState, pointsAtCell, resizeColumn, updateControls } from './utils';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
-import { getParentWidthWithoutPadding } from './utils/misc';
 export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
   var state = view.state,
     dispatch = view.dispatch;
@@ -30,10 +29,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
   }
   var containerWidth = getEditorContainerWidth();
   var parentWidth = getParentNodeWidth(start, state, containerWidth);
-
-  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
-  var parentActualWidth = getParentWidthWithoutPadding(parentWidth, start, state);
-  var maxSize = parentActualWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
+  var maxSize = parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
   if (originalTable.attrs.isNumberColumnEnabled) {
     maxSize -= akEditorTableNumberColumnWidth;
   }

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

@@ -3,8 +3,6 @@ import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-c
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorWideLayoutWidth, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { containsClassName } from '@atlaskit/editor-common/utils';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
-import { gridSize } from '@atlaskit/theme/constants';
-import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 export var tableLayoutToSize = {
   default: akEditorDefaultLayoutWidth,
   wide: akEditorWideLayoutWidth,
@@ -71,41 +69,9 @@ export var getTableMaxWidth = function getTableMaxWidth(_ref2) {
     getEditorContainerWidth = _ref2.getEditorContainerWidth;
   var containerWidth = getEditorContainerWidth();
   var parentWidth = 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 -= akEditorTableNumberColumnWidth;
   }
   return maxWidth;
-};
-export 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 -= gridSize() * 2;
-    // gutter offset
-    parentWidth += gridSize() * 1.5 * 2;
-    // padding right
-    parentWidth -= gridSize();
-    // padding left
-    parentWidth -= gridSize() * 4 - 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
-var getNestedParentNode = function getNestedParentNode(tablePos, state) {
-  if (tablePos === undefined) {
-    return null;
-  }
-  var $pos = state.doc.resolve(tablePos);
-  var parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
-  return parent ? parent.node : null;
 };