@atlaskit/editor-plugin-table 5.3.29 → 5.3.30

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 5.3.30
+
+### Patch Changes
+
+- [#42908](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42908) [`f1df173bd21`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f1df173bd21) - Add new drop targets to table node, add new pragmatic drag and drop autoscroller
+
 ## 5.3.29
 
 ### Patch Changes

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExternalDropTargets = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _styles = require("@atlaskit/editor-common/styles");
+var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
+var _consts = require("../ui/consts");
+var _ColumnDropTarget = require("../ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget");
+var _utils = require("../utils");
+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 ExternalDropTargets = exports.ExternalDropTargets = function ExternalDropTargets(_ref) {
+  var editorView = _ref.editorView,
+    node = _ref.node,
+    getScrollOffset = _ref.getScrollOffset,
+    getTableWrapperWidth = _ref.getTableWrapperWidth;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
+  (0, _react.useEffect)(function () {
+    return (0, _element.monitorForElements)({
+      canMonitor: function canMonitor(_ref2) {
+        var source = _ref2.source;
+        var _ref3 = source.data,
+          type = _ref3.type,
+          indexes = _ref3.indexes,
+          localId = _ref3.localId;
+        return type === 'table-column' && !!(indexes !== null && indexes !== void 0 && indexes.length) && localId === currentNodeLocalId;
+      },
+      onDragStart: function onDragStart() {
+        setIsDragging(true);
+      },
+      onDrop: function onDrop() {
+        setIsDragging(false);
+      }
+    });
+  }, [currentNodeLocalId, editorView]);
+  if (!isDragging) {
+    return null;
+  }
+  var colWidths = (0, _utils.getColumnsWidths)(editorView);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: getTableWrapperWidth(),
+      overflow: 'hidden',
+      position: 'absolute',
+      top: "-".concat(_consts.dropTargetExtendedWidth - _styles.tableMarginTop, "px"),
+      pointerEvents: 'auto',
+      zIndex: "".concat(_consts.dropTargetsZIndex)
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      // move drop targets based on table wrapper scroll
+      marginLeft: "-".concat(getScrollOffset(), "px")
+    }
+  }, colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width, index) {
+    return /*#__PURE__*/_react.default.createElement(_ColumnDropTarget.ColumnDropTarget, {
+      key: index,
+      index: index,
+      localId: currentNodeLocalId,
+      width: width,
+      height: _consts.dropTargetExtendedWidth,
+      marginTop: 0
+    });
+  })));
+};

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

@@ -24,6 +24,9 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _combine = require("@atlaskit/pragmatic-drag-and-drop/util/combine");
+var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
+var _element2 = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element");
 var _commands = require("../commands");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _stickyHeaders = require("../pm-plugins/sticky-headers");
@@ -36,6 +39,7 @@ var _consts = require("../ui/consts");
 var _TableFloatingColumnControls = _interopRequireDefault(require("../ui/TableFloatingColumnControls"));
 var _TableFloatingControls = _interopRequireDefault(require("../ui/TableFloatingControls"));
 var _utils4 = require("../utils");
+var _ExternalDropTargets = require("./ExternalDropTargets");
 var _OverflowShadowsObserver = require("./OverflowShadowsObserver");
 var _TableContainer = require("./TableContainer");
 var _TableStickyScrollbar = require("./TableStickyScrollbar");
@@ -309,7 +313,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         eventDispatcher = _this$props7.eventDispatcher,
-        options = _this$props7.options;
+        options = _this$props7.options,
+        isDragAndDropEnabled = _this$props7.isDragAndDropEnabled,
+        getNode = _this$props7.getNode;
       if (allowColumnResizing && this.wrapper && !isIE11) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
           passive: true
@@ -319,6 +325,56 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             this.stickyScrollbar = new _TableStickyScrollbar.TableStickyScrollbar(this.wrapper, this.props.view);
           }
         }
+        if (isDragAndDropEnabled) {
+          this.dragAndDropCleanupFn = (0, _combine.combine)((0, _element.autoScrollForElements)({
+            element: this.wrapper,
+            canScroll: function canScroll(_ref) {
+              var source = _ref.source;
+              var _ref2 = source.data,
+                localId = _ref2.localId,
+                type = _ref2.type;
+              var node = getNode();
+              return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
+            }
+          }), (0, _element.autoScrollWindowForElements)({
+            canScroll: function canScroll(_ref3) {
+              var source = _ref3.source;
+              var _ref4 = source.data,
+                localId = _ref4.localId,
+                type = _ref4.type;
+              var node = getNode();
+              return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-row';
+            }
+          }), (0, _element2.unsafeOverflowAutoScrollForElements)({
+            element: this.wrapper,
+            canScroll: function canScroll(_ref5) {
+              var source = _ref5.source;
+              var _ref6 = source.data,
+                localId = _ref6.localId;
+              var node = getNode();
+              return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId);
+            },
+            getOverflow: function getOverflow() {
+              return {
+                fromTopEdge: {
+                  top: _consts.dropTargetExtendedWidth,
+                  right: _consts.dropTargetExtendedWidth,
+                  left: _consts.dropTargetExtendedWidth
+                },
+                fromRightEdge: {
+                  right: _consts.dropTargetExtendedWidth,
+                  top: _consts.dropTargetExtendedWidth,
+                  bottom: _consts.dropTargetExtendedWidth
+                },
+                fromLeftEdge: {
+                  top: _consts.dropTargetExtendedWidth,
+                  left: _consts.dropTargetExtendedWidth,
+                  bottom: _consts.dropTargetExtendedWidth
+                }
+              };
+            }
+          }));
+        }
       }
       if (allowColumnResizing) {
         /**
@@ -346,10 +402,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props8 = this.props,
         allowColumnResizing = _this$props8.allowColumnResizing,
         eventDispatcher = _this$props8.eventDispatcher,
-        options = _this$props8.options;
+        options = _this$props8.options,
+        isDragAndDropEnabled = _this$props8.isDragAndDropEnabled;
       if (this.wrapper && !isIE11) {
         this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
       }
+      if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
+        this.dragAndDropCleanupFn();
+      }
       if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-sticky-scrollbar')) {
         if (this.stickyScrollbar) {
           this.stickyScrollbar.dispose();
@@ -552,7 +612,18 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
         "data-testid": "sticky-scrollbar-sentinel-top"
-      }), allowControls && rowControls, isDragAndDropEnabled && allowControls && colControls, /*#__PURE__*/_react.default.createElement("div", {
+      }), allowControls && rowControls, isDragAndDropEnabled && /*#__PURE__*/_react.default.createElement(_ExternalDropTargets.ExternalDropTargets, {
+        editorView: view,
+        node: node,
+        getScrollOffset: function getScrollOffset() {
+          var _this2$wrapper;
+          return ((_this2$wrapper = _this2.wrapper) === null || _this2$wrapper === void 0 ? void 0 : _this2$wrapper.scrollLeft) || 0;
+        },
+        getTableWrapperWidth: function getTableWrapperWidth() {
+          var _this2$wrapper2;
+          return ((_this2$wrapper2 = _this2.wrapper) === null || _this2$wrapper2 === void 0 ? void 0 : _this2$wrapper2.clientWidth) || 760;
+        }
+      }), /*#__PURE__*/_react.default.createElement("div", {
         style: shadowStyle(showBeforeShadow),
         className: _types.TableCssClassName.TABLE_LEFT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {
@@ -574,7 +645,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             }
           }
         }
-      }), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/_react.default.createElement("div", {
+      }, allowControls && colControls), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
         style: {
           height: _editorSharedStyles.MAX_BROWSER_SCROLLBAR_HEIGHT,

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

@@ -16,8 +16,6 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
-var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
-var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _commands = require("../pm-plugins/sticky-headers/commands");
@@ -49,6 +47,9 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listening", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "padding", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "top", 0);
+    /**
+     * Methods
+     */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "headerRowMouseScrollEnd", (0, _debounce.default)(function () {
       _this.dom.classList.remove('no-pointer-events');
     }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
@@ -64,27 +65,20 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
     _this.isHeaderRow = (0, _nodes.supportedHeaderRow)(node);
     _this.isSticky = false;
     var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
-      pluginConfig = _getPluginState.pluginConfig,
-      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
+      pluginConfig = _getPluginState.pluginConfig;
     _this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
-    _this.isDragAndDropEnabled = !!isDragAndDropEnabled;
     if (_this.isHeaderRow) {
       _this.dom.setAttribute('data-header-row', 'true');
       if (_this.isStickyHeaderEnabled) {
         _this.subscribe();
       }
     }
-    if (_this.isDragAndDropEnabled) {
-      _this.addDropTarget(_this.contentDOM);
-    }
     return _this;
   }
 
   /**
    * Variables
    */
-
-  // @ts-ignore
   (0, _createClass2.default)(TableRow, [{
     key: "update",
     value:
@@ -123,7 +117,6 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this$dropTargetClean;
       if (this.isStickyHeaderEnabled) {
         this.unsubscribe();
         var tree = (0, _dom2.getTree)(this.dom);
@@ -132,9 +125,6 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
         }
         this.emitOff(true);
       }
-
-      // If a drop target cleanup method has been set then we should call it.
-      (_this$dropTargetClean = this.dropTargetCleanup) === null || _this$dropTargetClean === void 0 || _this$dropTargetClean.call(this);
     }
   }, {
     key: "ignoreMutation",
@@ -161,72 +151,6 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
       }
       return true;
     }
-
-    /**
-     * Methods
-     */
-  }, {
-    key: "addDropTarget",
-    value: function addDropTarget(element) {
-      var _this2 = this;
-      var pos = this.getPos();
-      if (!Number.isFinite(pos)) {
-        return;
-      }
-      if (this.dropTargetCleanup) {
-        this.dropTargetCleanup();
-      }
-      this.dropTargetCleanup = (0, _element.dropTargetForElements)({
-        element: element,
-        canDrop: function canDrop(_ref2) {
-          var _data$indexes, _data$indexes2;
-          var source = _ref2.source;
-          var data = source.data;
-          var _this2$getCurrentData = _this2.getCurrentData(),
-            localId = _this2$getCurrentData.localId,
-            targetIndex = _this2$getCurrentData.targetIndex;
-          return (
-            // Only draggables of row type can be dropped on this target
-            data.type === 'table-row' &&
-            // Only draggables which came from the same table can be dropped on this target
-            data.localId === localId &&
-            // Only draggables which DO NOT include this drop targets index can be dropped
-            !!((_data$indexes = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(targetIndex)) === -1
-          );
-        },
-        getIsSticky: function getIsSticky() {
-          return true;
-        },
-        getData: function getData(_ref3) {
-          var input = _ref3.input,
-            element = _ref3.element;
-          var _this2$getCurrentData2 = _this2.getCurrentData(),
-            localId = _this2$getCurrentData2.localId,
-            targetIndex = _this2$getCurrentData2.targetIndex;
-          var data = {
-            localId: localId,
-            type: 'table-row',
-            targetIndex: targetIndex
-          };
-          return (0, _closestEdge.attachClosestEdge)(data, {
-            input: input,
-            element: element,
-            allowedEdges: ['top', 'bottom']
-          });
-        }
-      });
-    }
-  }, {
-    key: "getCurrentData",
-    value: function getCurrentData() {
-      var resolvedPos = this.view.state.doc.resolve(this.getPos());
-      var targetIndex = resolvedPos.index();
-      var localId = resolvedPos.parent.attrs.localId;
-      return {
-        targetIndex: targetIndex,
-        localId: localId
-      };
-    }
   }, {
     key: "subscribe",
     value: function subscribe() {
@@ -275,7 +199,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
   }, {
     key: "initObservers",
     value: function initObservers() {
-      var _this3 = this;
+      var _this2 = this;
       if (!this.dom || this.dom.dataset.isObserved) {
         return;
       }
@@ -292,15 +216,15 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
       window.requestAnimationFrame(function () {
         var _getTree;
         // we expect tree to be defined after animation frame
-        var tableContainer = (_getTree = (0, _dom2.getTree)(_this3.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
+        var tableContainer = (_getTree = (0, _dom2.getTree)(_this2.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
         if (tableContainer) {
-          _this3.sentinels.top = tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
-          _this3.sentinels.bottom = tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
-          [_this3.sentinels.top, _this3.sentinels.bottom].forEach(function (el) {
+          _this2.sentinels.top = tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
+          _this2.sentinels.bottom = tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
+          [_this2.sentinels.top, _this2.sentinels.bottom].forEach(function (el) {
             // skip if already observed for another row on this table
             if (el && !el.dataset.isObserved) {
               el.dataset.isObserved = 'true';
-              _this3.intersectionObserver.observe(el);
+              _this2.intersectionObserver.observe(el);
             }
           });
         }
@@ -312,27 +236,27 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
   }, {
     key: "createResizeObserver",
     value: function createResizeObserver() {
-      var _this4 = this;
+      var _this3 = this;
       this.resizeObserver = new ResizeObserver(function (entries) {
-        var tree = (0, _dom2.getTree)(_this4.dom);
+        var tree = (0, _dom2.getTree)(_this3.dom);
         if (!tree) {
           return;
         }
         var table = tree.table;
         entries.forEach(function (entry) {
-          var _this4$editorScrollab;
+          var _this3$editorScrollab;
           // On resize of the parent scroll element we need to adjust the width
           // of the sticky header
-          if (entry.target.className === ((_this4$editorScrollab = _this4.editorScrollableElement) === null || _this4$editorScrollab === void 0 ? void 0 : _this4$editorScrollab.className)) {
-            _this4.updateStickyHeaderWidth();
+          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 (_this4.sentinels.bottom &&
+            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 - (_this4.stickyRowHeight || 0)) > _consts.stickyHeaderBorderBottomWidth) {
-              _this4.stickyRowHeight = newHeight;
-              _this4.sentinels.bottom.style.bottom = "".concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + newHeight, "px");
+            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);
             }
           }
@@ -342,9 +266,9 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
   }, {
     key: "createIntersectionObserver",
     value: function createIntersectionObserver() {
-      var _this5 = this;
+      var _this4 = this;
       this.intersectionObserver = new IntersectionObserver(function (entries, _) {
-        var tree = (0, _dom2.getTree)(_this5.dom);
+        var tree = (0, _dom2.getTree)(_this4.dom);
         if (!tree) {
           return;
         }
@@ -367,28 +291,28 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
             var sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.bottom;
             if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
               var _entry$rootBounds3;
-              tree && _this5.makeHeaderRowSticky(tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
-              _this5.lastStickyTimestamp = Date.now();
+              tree && _this4.makeHeaderRowSticky(tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
+              _this4.lastStickyTimestamp = Date.now();
             } else {
-              table && _this5.makeRowHeaderNotSticky(table);
+              table && _this4.makeRowHeaderNotSticky(table);
             }
           }
           if (target.classList.contains(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
             var _entry$rootBounds4;
-            var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this5.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
+            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) {
               // Not a perfect solution, but need to this code specific for FireFox ED-19177
               if (_utils.browser.gecko) {
-                if (_this5.lastStickyTimestamp && Date.now() - _this5.lastStickyTimestamp > _consts.STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
-                  _this5.makeRowHeaderNotSticky(table);
+                if (_this4.lastStickyTimestamp && Date.now() - _this4.lastStickyTimestamp > _consts.STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
+                  _this4.makeRowHeaderNotSticky(table);
                 }
               } else {
-                _this5.makeRowHeaderNotSticky(table);
+                _this4.makeRowHeaderNotSticky(table);
               }
             } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
               var _entry$rootBounds5;
-              tree && _this5.makeHeaderRowSticky(tree, entry === null || entry === void 0 || (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
-              _this5.lastStickyTimestamp = Date.now();
+              tree && _this4.makeHeaderRowSticky(tree, entry === null || entry === void 0 || (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
+              _this4.lastStickyTimestamp = Date.now();
             }
           }
           return;
@@ -463,12 +387,12 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
   }, {
     key: "refireIntersectionObservers",
     value: function refireIntersectionObservers() {
-      var _this6 = this;
+      var _this5 = this;
       if (this.isSticky) {
         [this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
-          if (el && _this6.intersectionObserver) {
-            _this6.intersectionObserver.unobserve(el);
-            _this6.intersectionObserver.observe(el);
+          if (el && _this5.intersectionObserver) {
+            _this5.intersectionObserver.unobserve(el);
+            _this5.intersectionObserver.observe(el);
           }
         });
       }
@@ -477,7 +401,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
     key: "makeHeaderRowSticky",
     value: function makeHeaderRowSticky(tree, scrollTop) {
       var _tbody$firstChild,
-        _this7 = this;
+        _this6 = this;
       // If header row height is more than 50% of viewport height don't do this
       if (this.isSticky || this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) {
         return;
@@ -514,7 +438,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
         });
         var fastScrollThresholdMs = 500;
         setTimeout(function () {
-          _this7.refireIntersectionObservers();
+          _this6.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
       this.dom.style.top = "".concat(domTop, "px");

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

@@ -34,7 +34,7 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
         this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScrollDebounced);
         this.handleScrollDebounced.cancel();
       }
-      this.deleteIntesactionObserver();
+      this.deleteIntersectionObserver();
     }
   }, {
     key: "scrollLeft",
@@ -80,10 +80,10 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
             return;
           }
           if (target.classList.contains(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) {
-            _this2.sentenialBottomCallback(entry);
+            _this2.sentinelBottomCallback(entry);
           }
           if (target.classList.contains(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) {
-            _this2.sentenialTopCallback(entry);
+            _this2.sentinelTopCallback(entry);
           }
         });
       }, {
@@ -96,8 +96,8 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
       });
     }
   }, {
-    key: "deleteIntesactionObserver",
-    value: function deleteIntesactionObserver() {
+    key: "deleteIntersectionObserver",
+    value: function deleteIntersectionObserver() {
       if (this.intersectionObserver) {
         if (this.sentinels.bottom) {
           this.intersectionObserver.unobserve(this.sentinels.bottom);
@@ -106,16 +106,16 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
       }
     }
   }, {
-    key: "sentenialBottomCallback",
-    value: function sentenialBottomCallback(entry) {
+    key: "sentinelBottomCallback",
+    value: function sentinelBottomCallback(entry) {
       var _entry$rootBounds2;
       var sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.top) || 0);
       this.bottomSentinelState = sentinelIsAboveScrollArea ? 'above' : entry.isIntersecting ? 'visible' : 'below';
       this.toggle();
     }
   }, {
-    key: "sentenialTopCallback",
-    value: function sentenialTopCallback(entry) {
+    key: "sentinelTopCallback",
+    value: function sentinelTopCallback(entry) {
       var _entry$rootBounds3;
       var sentinelIsBelowScrollArea = (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.bottom) || 0) < entry.boundingClientRect.top;
       this.topSentinelState = sentinelIsBelowScrollArea ? 'below' : entry.isIntersecting ? 'visible' : 'above';

package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -11,7 +11,6 @@ var _view = require("@atlaskit/editor-prosemirror/view");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
-var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll");
 var _mergedCells = require("../../utils/merged-cells");
 var _pluginFactory = require("../plugin-factory");
 var _actions = require("./actions");
@@ -95,15 +94,9 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
           },
           onDragStart: function onDragStart(_ref3) {
             var location = _ref3.location;
-            _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.start({
-              input: location.current.input
-            });
             (0, _commands.toggleDragMenu)(false)(editorView.state, editorView.dispatch);
           },
           onDrag: function onDrag(event) {
-            _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.updateInput({
-              input: event.location.current.input
-            });
             var data = (0, _monitor.getDraggableDataFromEvent)(event);
             // If no data can be found then it's most like we do not want to perform any drag actions
             if (!data) {
@@ -119,7 +112,6 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
             (0, _commands.setDropTarget)(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
           onDrop: function onDrop(event) {
-            _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.stop();
             var data = (0, _monitor.getDraggableDataFromEvent)(event);
 
             // If no data can be found then it's most like we do not want to perform any drop action

package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js

@@ -61,7 +61,8 @@ var ColumnDropTarget = exports.ColumnDropTarget = function ColumnDropTarget(_ref
       width: width && "".concat(width - 1, "px"),
       height: height && "".concat(height, "px"),
       marginTop: marginTop && "".concat(marginTop, "px"),
-      pointerEvents: 'auto'
+      pointerEvents: 'auto',
+      flexShrink: 0
     },
     "data-drop-target-index": index,
     "data-drop-target-localid": localId,

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TableFloatingColumnControls = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _types = require("../../types");
 var _utils = require("../../utils");
@@ -105,11 +104,10 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
   }
   var colWidths = (0, _utils.getColumnsWidths)(editorView);
   var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  var mountTo = tableRef && (tableRef === null || tableRef === void 0 ? void 0 : tableRef.parentElement) || document.body;
   if (!tableActive) {
     return null;
   }
-  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_ColumnControls.ColumnControls, {
@@ -131,6 +129,6 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     localId: currentNodeLocalId,
     rowHeights: rowHeights,
     colWidths: colWidths
-  })), mountTo);
+  }));
 };
 var _default = exports.default = TableFloatingColumnControls;