@atlaskit/editor-plugin-table 7.2.1 → 7.2.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 7.2.2
+
+### Patch Changes
+
+- [#70342](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70342) [`6862cba17f31`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6862cba17f31) - Fix drop functionality when dragging in overflown table
+
 ## 7.2.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -471,8 +471,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _classnames,
-        _this3 = this;
+      var _this3 = this,
+        _classnames;
       var _this$props10 = this.props,
         view = _this$props10.view,
         getNode = _this$props10.getNode,
@@ -544,7 +544,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyHeader: this.state.stickyHeader,
         getEditorFeatureFlags: getEditorFeatureFlags,
         tableContainerWidth: tableContainerWidth,
-        isNumberColumnEnabled: node.attrs.isNumberColumnEnabled
+        isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
+        getScrollOffset: function getScrollOffset() {
+          var _this3$wrapper;
+          return ((_this3$wrapper = _this3.wrapper) === null || _this3$wrapper === void 0 ? void 0 : _this3$wrapper.scrollLeft) || 0;
+        }
       }) : null;
       var shadowPadding = allowControls && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
       var shadowStyle = (0, _memoizeOne.default)(function (visible) {
@@ -592,12 +596,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         editorView: view,
         node: node,
         getScrollOffset: function getScrollOffset() {
-          var _this3$wrapper;
-          return ((_this3$wrapper = _this3.wrapper) === null || _this3$wrapper === void 0 ? void 0 : _this3$wrapper.scrollLeft) || 0;
+          var _this3$wrapper2;
+          return ((_this3$wrapper2 = _this3.wrapper) === null || _this3$wrapper2 === void 0 ? void 0 : _this3$wrapper2.scrollLeft) || 0;
         },
         getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this3$wrapper2;
-          return ((_this3$wrapper2 = _this3.wrapper) === null || _this3$wrapper2 === void 0 ? void 0 : _this3$wrapper2.clientWidth) || 760;
+          var _this3$wrapper3;
+          return ((_this3$wrapper3 = _this3.wrapper) === null || _this3$wrapper3 === void 0 ? void 0 : _this3$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
         style: shadowStyle(showBeforeShadow),

package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -7,14 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ColumnControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
-var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorTables = require("@atlaskit/editor-tables");
-var _utils2 = require("@atlaskit/editor-tables/utils");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _commands = require("../../../commands");
 var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
 var _types = require("../../../types");
-var _utils3 = require("../../../utils");
+var _utils2 = require("../../../utils");
 var _DragHandle = require("../../DragHandle");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -22,11 +21,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var getSelectedColumns = function getSelectedColumns(selection) {
   if (selection instanceof _editorTables.CellSelection && selection.isColSelection()) {
-    var rect = (0, _utils2.getSelectionRect)(selection);
+    var rect = (0, _utils.getSelectionRect)(selection);
     if (!rect) {
       return [];
     }
-    return (0, _utils3.getSelectedColumnIndexes)(rect);
+    return (0, _utils2.getSelectedColumnIndexes)(rect);
   }
   return [];
 };
@@ -46,7 +45,8 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     isTableHovered = _ref.isTableHovered,
     tableContainerWidth = _ref.tableContainerWidth,
     isNumberColumnEnabled = _ref.isNumberColumnEnabled,
-    isDragging = _ref.isDragging;
+    isDragging = _ref.isDragging,
+    getScrollOffset = _ref.getScrollOffset;
   var columnControlsRef = (0, _react.useRef)(null);
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return (
@@ -56,7 +56,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     );
   }).join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
   // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
-  var columnParams = (0, _utils3.getRowsParams)(colWidths !== null && colWidths !== void 0 ? colWidths : []);
+  var columnParams = (0, _utils2.getRowsParams)(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   var selectedColIndexes = getSelectedColumns(editorView.state.selection);
   var firstRow = tableRef.querySelector('tr');
@@ -116,24 +116,10 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   var colIndexes = (0, _react.useMemo)(function () {
     return [colIndex];
   }, [colIndex]);
-  var tableWrapper = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
-  var handleScroll = (0, _react.useCallback)(function (event) {
-    if (stickyTop) {
-      if (columnControlsRef && columnControlsRef.current) {
-        var _tableWrapper$scrollL;
-        columnControlsRef.current.scrollLeft = (_tableWrapper$scrollL = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.scrollLeft) !== null && _tableWrapper$scrollL !== void 0 ? _tableWrapper$scrollL : 0;
-      }
-    }
-  }, [stickyTop, tableWrapper]);
-  (0, _react.useEffect)(function () {
-    handleScroll();
-  }, [handleScroll]);
-  (0, _react.useEffect)(function () {
-    tableWrapper === null || tableWrapper === void 0 || tableWrapper.addEventListener('scroll', handleScroll);
-    return function () {
-      tableWrapper === null || tableWrapper === void 0 || tableWrapper.removeEventListener('scroll', handleScroll);
-    };
-  }, [tableWrapper, handleScroll]);
+  if (stickyTop && columnControlsRef.current) {
+    var _getScrollOffset;
+    columnControlsRef.current.scrollLeft = (_getScrollOffset = getScrollOffset === null || getScrollOffset === void 0 ? void 0 : getScrollOffset()) !== null && _getScrollOffset !== void 0 ? _getScrollOffset : 0;
+  }
   var generateHandleByType = function generateHandleByType(type) {
     var _rowHeights$reduce, _colWidths$reduce;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {

package/dist/cjs/ui/TableFloatingColumnControls/ColumnDropTargets/index.js

@@ -1,22 +1,32 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ColumnDropTargets = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _types = require("../../../types");
 var _ColumnDropTarget = require("./ColumnDropTarget");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var ColumnDropTargets = exports.ColumnDropTargets = function ColumnDropTargets(_ref) {
   var tableRef = _ref.tableRef,
     tableHeight = _ref.tableHeight,
     localId = _ref.localId,
-    colWidths = _ref.colWidths;
+    colWidths = _ref.colWidths,
+    isHeaderSticky = _ref.isHeaderSticky,
+    getScrollOffset = _ref.getScrollOffset;
+  var dropTargetRef = (0, _react.useRef)(null);
   if (!tableRef) {
     return null;
   }
+  if (isHeaderSticky && dropTargetRef.current) {
+    var _getScrollOffset;
+    dropTargetRef.current.style.marginLeft = "-".concat((_getScrollOffset = getScrollOffset === null || getScrollOffset === void 0 ? void 0 : getScrollOffset()) !== null && _getScrollOffset !== void 0 ? _getScrollOffset : 0, "px");
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
+    ref: dropTargetRef,
     className: _types.TableCssClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS,
     contentEditable: false
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -31,7 +31,8 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     isInDanger = _ref.isInDanger,
     isTableHovered = _ref.isTableHovered,
     tableContainerWidth = _ref.tableContainerWidth,
-    isNumberColumnEnabled = _ref.isNumberColumnEnabled;
+    isNumberColumnEnabled = _ref.isNumberColumnEnabled,
+    getScrollOffset = _ref.getScrollOffset;
   var _useState = (0, _react.useState)({
       width: 0,
       height: 0
@@ -136,12 +137,15 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     hasHeaderColumn: hasHeaderColumn,
     tableContainerWidth: tableContainerWidth,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    isDragging: isDragging
+    isDragging: isDragging,
+    getScrollOffset: getScrollOffset
   }), isDragging && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
     tableRef: tableRef,
+    isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,
     tableHeight: tableRect.height,
     localId: currentNodeLocalId,
-    colWidths: colWidths
+    colWidths: colWidths,
+    getScrollOffset: getScrollOffset
   }));
 };
 var _default = exports.default = TableFloatingColumnControls;

package/dist/es2019/nodeviews/TableComponent.js

@@ -543,7 +543,11 @@ class TableComponent extends React.Component {
       stickyHeader: this.state.stickyHeader,
       getEditorFeatureFlags: getEditorFeatureFlags,
       tableContainerWidth: tableContainerWidth,
-      isNumberColumnEnabled: node.attrs.isNumberColumnEnabled
+      isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
+      getScrollOffset: () => {
+        var _this$wrapper2;
+        return ((_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.scrollLeft) || 0;
+      }
     }) : null;
     const shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
     const shadowStyle = memoizeOne(visible => ({
@@ -595,12 +599,12 @@ class TableComponent extends React.Component {
       editorView: view,
       node: node,
       getScrollOffset: () => {
-        var _this$wrapper2;
-        return ((_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.scrollLeft) || 0;
+        var _this$wrapper3;
+        return ((_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.scrollLeft) || 0;
       },
       getTableWrapperWidth: () => {
-        var _this$wrapper3;
-        return ((_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.clientWidth) || 760;
+        var _this$wrapper4;
+        return ((_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.clientWidth) || 760;
       }
     }), /*#__PURE__*/React.createElement("div", {
       style: shadowStyle(showBeforeShadow),

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -1,8 +1,7 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import { closestElement } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
@@ -36,7 +35,8 @@ export const ColumnControls = ({
   isTableHovered,
   tableContainerWidth,
   isNumberColumnEnabled,
-  isDragging
+  isDragging,
+  getScrollOffset
 }) => {
   var _colWidths$map$join, _rowHeights$;
   const columnControlsRef = useRef(null);
@@ -115,24 +115,10 @@ export const ColumnControls = ({
   const colIndexes = useMemo(() => {
     return [colIndex];
   }, [colIndex]);
-  const tableWrapper = closestElement(tableRef, `.${ClassName.TABLE_NODE_WRAPPER}`);
-  const handleScroll = useCallback(event => {
-    if (stickyTop) {
-      if (columnControlsRef && columnControlsRef.current) {
-        var _tableWrapper$scrollL;
-        columnControlsRef.current.scrollLeft = (_tableWrapper$scrollL = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.scrollLeft) !== null && _tableWrapper$scrollL !== void 0 ? _tableWrapper$scrollL : 0;
-      }
-    }
-  }, [stickyTop, tableWrapper]);
-  useEffect(() => {
-    handleScroll();
-  }, [handleScroll]);
-  useEffect(() => {
-    tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.addEventListener('scroll', handleScroll);
-    return () => {
-      tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.removeEventListener('scroll', handleScroll);
-    };
-  }, [tableWrapper, handleScroll]);
+  if (stickyTop && columnControlsRef.current) {
+    var _getScrollOffset;
+    columnControlsRef.current.scrollLeft = (_getScrollOffset = getScrollOffset === null || getScrollOffset === void 0 ? void 0 : getScrollOffset()) !== null && _getScrollOffset !== void 0 ? _getScrollOffset : 0;
+  }
   const generateHandleByType = type => {
     var _rowHeights$reduce, _colWidths$reduce;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {

package/dist/es2019/ui/TableFloatingColumnControls/ColumnDropTargets/index.js

@@ -1,16 +1,24 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { TableCssClassName as ClassName } from '../../../types';
 import { ColumnDropTarget } from './ColumnDropTarget';
 export const ColumnDropTargets = ({
   tableRef,
   tableHeight,
   localId,
-  colWidths
+  colWidths,
+  isHeaderSticky,
+  getScrollOffset
 }) => {
+  const dropTargetRef = useRef(null);
   if (!tableRef) {
     return null;
   }
+  if (isHeaderSticky && dropTargetRef.current) {
+    var _getScrollOffset;
+    dropTargetRef.current.style.marginLeft = `-${(_getScrollOffset = getScrollOffset === null || getScrollOffset === void 0 ? void 0 : getScrollOffset()) !== null && _getScrollOffset !== void 0 ? _getScrollOffset : 0}px`;
+  }
   return /*#__PURE__*/React.createElement("div", {
+    ref: dropTargetRef,
     className: ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS,
     contentEditable: false
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -17,7 +17,8 @@ export const TableFloatingColumnControls = ({
   isInDanger,
   isTableHovered,
   tableContainerWidth,
-  isNumberColumnEnabled
+  isNumberColumnEnabled,
+  getScrollOffset
 }) => {
   const [tableRect, setTableRect] = useState({
     width: 0,
@@ -107,12 +108,15 @@ export const TableFloatingColumnControls = ({
     hasHeaderColumn: hasHeaderColumn,
     tableContainerWidth: tableContainerWidth,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    isDragging: isDragging
+    isDragging: isDragging,
+    getScrollOffset: getScrollOffset
   }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
+    isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,
     tableHeight: tableRect.height,
     localId: currentNodeLocalId,
-    colWidths: colWidths
+    colWidths: colWidths,
+    getScrollOffset: getScrollOffset
   }));
 };
 export default TableFloatingColumnControls;

package/dist/esm/nodeviews/TableComponent.js

@@ -464,8 +464,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _classnames,
-        _this3 = this;
+      var _this3 = this,
+        _classnames;
       var _this$props10 = this.props,
         view = _this$props10.view,
         getNode = _this$props10.getNode,
@@ -537,7 +537,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyHeader: this.state.stickyHeader,
         getEditorFeatureFlags: getEditorFeatureFlags,
         tableContainerWidth: tableContainerWidth,
-        isNumberColumnEnabled: node.attrs.isNumberColumnEnabled
+        isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
+        getScrollOffset: function getScrollOffset() {
+          var _this3$wrapper;
+          return ((_this3$wrapper = _this3.wrapper) === null || _this3$wrapper === void 0 ? void 0 : _this3$wrapper.scrollLeft) || 0;
+        }
       }) : null;
       var shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
       var shadowStyle = memoizeOne(function (visible) {
@@ -585,12 +589,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         editorView: view,
         node: node,
         getScrollOffset: function getScrollOffset() {
-          var _this3$wrapper;
-          return ((_this3$wrapper = _this3.wrapper) === null || _this3$wrapper === void 0 ? void 0 : _this3$wrapper.scrollLeft) || 0;
+          var _this3$wrapper2;
+          return ((_this3$wrapper2 = _this3.wrapper) === null || _this3$wrapper2 === void 0 ? void 0 : _this3$wrapper2.scrollLeft) || 0;
         },
         getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this3$wrapper2;
-          return ((_this3$wrapper2 = _this3.wrapper) === null || _this3$wrapper2 === void 0 ? void 0 : _this3$wrapper2.clientWidth) || 760;
+          var _this3$wrapper3;
+          return ((_this3$wrapper3 = _this3.wrapper) === null || _this3$wrapper3 === void 0 ? void 0 : _this3$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/React.createElement("div", {
         style: shadowStyle(showBeforeShadow),

package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -1,8 +1,7 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import { closestElement } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
@@ -37,7 +36,8 @@ export var ColumnControls = function ColumnControls(_ref) {
     isTableHovered = _ref.isTableHovered,
     tableContainerWidth = _ref.tableContainerWidth,
     isNumberColumnEnabled = _ref.isNumberColumnEnabled,
-    isDragging = _ref.isDragging;
+    isDragging = _ref.isDragging,
+    getScrollOffset = _ref.getScrollOffset;
   var columnControlsRef = useRef(null);
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return (
@@ -107,24 +107,10 @@ export var ColumnControls = function ColumnControls(_ref) {
   var colIndexes = useMemo(function () {
     return [colIndex];
   }, [colIndex]);
-  var tableWrapper = closestElement(tableRef, ".".concat(ClassName.TABLE_NODE_WRAPPER));
-  var handleScroll = useCallback(function (event) {
-    if (stickyTop) {
-      if (columnControlsRef && columnControlsRef.current) {
-        var _tableWrapper$scrollL;
-        columnControlsRef.current.scrollLeft = (_tableWrapper$scrollL = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.scrollLeft) !== null && _tableWrapper$scrollL !== void 0 ? _tableWrapper$scrollL : 0;
-      }
-    }
-  }, [stickyTop, tableWrapper]);
-  useEffect(function () {
-    handleScroll();
-  }, [handleScroll]);
-  useEffect(function () {
-    tableWrapper === null || tableWrapper === void 0 || tableWrapper.addEventListener('scroll', handleScroll);
-    return function () {
-      tableWrapper === null || tableWrapper === void 0 || tableWrapper.removeEventListener('scroll', handleScroll);
-    };
-  }, [tableWrapper, handleScroll]);
+  if (stickyTop && columnControlsRef.current) {
+    var _getScrollOffset;
+    columnControlsRef.current.scrollLeft = (_getScrollOffset = getScrollOffset === null || getScrollOffset === void 0 ? void 0 : getScrollOffset()) !== null && _getScrollOffset !== void 0 ? _getScrollOffset : 0;
+  }
   var generateHandleByType = function generateHandleByType(type) {
     var _rowHeights$reduce, _colWidths$reduce;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {

package/dist/esm/ui/TableFloatingColumnControls/ColumnDropTargets/index.js

@@ -1,15 +1,23 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { TableCssClassName as ClassName } from '../../../types';
 import { ColumnDropTarget } from './ColumnDropTarget';
 export var ColumnDropTargets = function ColumnDropTargets(_ref) {
   var tableRef = _ref.tableRef,
     tableHeight = _ref.tableHeight,
     localId = _ref.localId,
-    colWidths = _ref.colWidths;
+    colWidths = _ref.colWidths,
+    isHeaderSticky = _ref.isHeaderSticky,
+    getScrollOffset = _ref.getScrollOffset;
+  var dropTargetRef = useRef(null);
   if (!tableRef) {
     return null;
   }
+  if (isHeaderSticky && dropTargetRef.current) {
+    var _getScrollOffset;
+    dropTargetRef.current.style.marginLeft = "-".concat((_getScrollOffset = getScrollOffset === null || getScrollOffset === void 0 ? void 0 : getScrollOffset()) !== null && _getScrollOffset !== void 0 ? _getScrollOffset : 0, "px");
+  }
   return /*#__PURE__*/React.createElement("div", {
+    ref: dropTargetRef,
     className: ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS,
     contentEditable: false
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -21,7 +21,8 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     isInDanger = _ref.isInDanger,
     isTableHovered = _ref.isTableHovered,
     tableContainerWidth = _ref.tableContainerWidth,
-    isNumberColumnEnabled = _ref.isNumberColumnEnabled;
+    isNumberColumnEnabled = _ref.isNumberColumnEnabled,
+    getScrollOffset = _ref.getScrollOffset;
   var _useState = useState({
       width: 0,
       height: 0
@@ -126,12 +127,15 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     hasHeaderColumn: hasHeaderColumn,
     tableContainerWidth: tableContainerWidth,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    isDragging: isDragging
+    isDragging: isDragging,
+    getScrollOffset: getScrollOffset
   }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
+    isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,
     tableHeight: tableRect.height,
     localId: currentNodeLocalId,
-    colWidths: colWidths
+    colWidths: colWidths,
+    getScrollOffset: getScrollOffset
   }));
 };
 export default TableFloatingColumnControls;

package/dist/types/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -17,6 +17,7 @@ export interface ColumnControlsProps {
     tableContainerWidth?: number;
     isNumberColumnEnabled?: boolean;
     isDragging?: boolean;
+    getScrollOffset?: () => number;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, }: ColumnControlsProps) => JSX.Element;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, getScrollOffset, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

package/dist/types/ui/TableFloatingColumnControls/ColumnDropTargets/index.d.ts

@@ -4,5 +4,7 @@ export interface Props {
     tableHeight?: number;
     localId?: string;
     colWidths?: (number | undefined)[];
+    isHeaderSticky?: boolean;
+    getScrollOffset?: () => number;
 }
 export declare const ColumnDropTargets: React.FC<Props>;

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

@@ -24,6 +24,7 @@ export interface Props {
     isTableHovered?: boolean;
     tableContainerWidth?: number;
     isNumberColumnEnabled?: boolean;
+    getScrollOffset?: () => number;
 }
 export declare const TableFloatingColumnControls: React.FC<Props>;
 export default TableFloatingColumnControls;

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

@@ -17,6 +17,7 @@ export interface ColumnControlsProps {
     tableContainerWidth?: number;
     isNumberColumnEnabled?: boolean;
     isDragging?: boolean;
+    getScrollOffset?: () => number;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, }: ColumnControlsProps) => JSX.Element;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, getScrollOffset, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

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

@@ -4,5 +4,7 @@ export interface Props {
     tableHeight?: number;
     localId?: string;
     colWidths?: (number | undefined)[];
+    isHeaderSticky?: boolean;
+    getScrollOffset?: () => number;
 }
 export declare const ColumnDropTargets: React.FC<Props>;

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

@@ -24,6 +24,7 @@ export interface Props {
     isTableHovered?: boolean;
     tableContainerWidth?: number;
     isNumberColumnEnabled?: boolean;
+    getScrollOffset?: () => number;
 }
 export declare const TableFloatingColumnControls: React.FC<Props>;
 export default TableFloatingColumnControls;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.2.1",
+  "version": "7.2.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -69,7 +69,7 @@
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
     "@atlaskit/editor-plugin-grid": "^0.3.0",
     "@atlaskit/editor-plugin-hyperlink": "^0.8.0",
-    "@atlaskit/editor-test-helpers": "^18.15.0",
+    "@atlaskit/editor-test-helpers": "^18.16.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "^0.2.0",

package/src/nodeviews/TableComponent.tsx

@@ -500,6 +500,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         getEditorFeatureFlags={getEditorFeatureFlags}
         tableContainerWidth={tableContainerWidth}
         isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
+        getScrollOffset={() => this.wrapper?.scrollLeft || 0}
       />
     ) : null;
 

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 import type { MouseEvent } from 'react';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import { closestElement } from '@atlaskit/editor-common/utils';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
@@ -39,6 +38,7 @@ export interface ColumnControlsProps {
   tableContainerWidth?: number;
   isNumberColumnEnabled?: boolean;
   isDragging?: boolean;
+  getScrollOffset?: () => number;
 }
 
 const getSelectedColumns = (selection: Selection) => {
@@ -68,6 +68,7 @@ export const ColumnControls = ({
   tableContainerWidth,
   isNumberColumnEnabled,
   isDragging,
+  getScrollOffset,
 }: ColumnControlsProps) => {
   const columnControlsRef = useRef<HTMLDivElement>(null);
   const widths =
@@ -172,32 +173,10 @@ export const ColumnControls = ({
   const colIndexes = useMemo(() => {
     return [colIndex!];
   }, [colIndex]);
-  const tableWrapper = closestElement(
-    tableRef,
-    `.${ClassName.TABLE_NODE_WRAPPER}`,
-  );
-  const handleScroll = useCallback(
-    (event?: Event) => {
-      if (stickyTop) {
-        if (columnControlsRef && columnControlsRef.current) {
-          columnControlsRef.current.scrollLeft = tableWrapper?.scrollLeft ?? 0;
-        }
-      }
-    },
-    [stickyTop, tableWrapper],
-  );
 
-  useEffect(() => {
-    handleScroll();
-  }, [handleScroll]);
-
-  useEffect(() => {
-    tableWrapper?.addEventListener('scroll', handleScroll);
-
-    return () => {
-      tableWrapper?.removeEventListener('scroll', handleScroll);
-    };
-  }, [tableWrapper, handleScroll]);
+  if (stickyTop && columnControlsRef.current) {
+    columnControlsRef.current.scrollLeft = getScrollOffset?.() ?? 0;
+  }
 
   const generateHandleByType = (type: HandleTypes): JSX.Element | null => {
     if (!hoveredCell || !colWidths?.length) {

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 
 import { TableCssClassName as ClassName } from '../../../types';
 
@@ -9,6 +9,8 @@ export interface Props {
   tableHeight?: number;
   localId?: string;
   colWidths?: (number | undefined)[];
+  isHeaderSticky?: boolean;
+  getScrollOffset?: () => number;
 }
 
 export const ColumnDropTargets: React.FC<Props> = ({
@@ -16,13 +18,22 @@ export const ColumnDropTargets: React.FC<Props> = ({
   tableHeight,
   localId,
   colWidths,
+  isHeaderSticky,
+  getScrollOffset,
 }) => {
+  const dropTargetRef = useRef<HTMLDivElement>(null);
+
   if (!tableRef) {
     return null;
   }
 
+  if (isHeaderSticky && dropTargetRef.current) {
+    dropTargetRef.current.style.marginLeft = `-${getScrollOffset?.() ?? 0}px`;
+  }
+
   return (
     <div
+      ref={dropTargetRef}
       className={ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS}
       contentEditable={false}
     >

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -37,6 +37,7 @@ export interface Props {
   isTableHovered?: boolean;
   tableContainerWidth?: number;
   isNumberColumnEnabled?: boolean;
+  getScrollOffset?: () => number;
 }
 
 export const TableFloatingColumnControls: React.FC<Props> = ({
@@ -53,6 +54,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   isTableHovered,
   tableContainerWidth,
   isNumberColumnEnabled,
+  getScrollOffset,
 }) => {
   const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
     { width: 0, height: 0 },
@@ -158,13 +160,16 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         tableContainerWidth={tableContainerWidth}
         isNumberColumnEnabled={isNumberColumnEnabled}
         isDragging={isDragging}
+        getScrollOffset={getScrollOffset}
       />
       {isDragging && (
         <ColumnDropTargets
           tableRef={tableRef}
+          isHeaderSticky={stickyHeader?.sticky && hasHeaderRow}
           tableHeight={tableRect.height}
           localId={currentNodeLocalId}
           colWidths={colWidths}
+          getScrollOffset={getScrollOffset}
         />
       )}
     </div>

package/tsconfig.json

@@ -851,6 +851,12 @@
       "@atlaskit/editor-test-helpers/annotation": [
         "../editor-test-helpers/src/annotation.ts"
       ],
+      "@atlaskit/editor-test-helpers/integration/components/99-testing": [
+        "../editor-test-helpers/src/integration/components/99-testing.tsx"
+      ],
+      "@atlaskit/editor-test-helpers/example-helpers": [
+        "../editor-test-helpers/src/integration/components/example-helpers/index.ts"
+      ],
       "@atlaskit/editor-test-helpers": [
         "../editor-test-helpers/src"
       ],