@atlaskit/editor-plugin-table 5.3.29 → 5.3.31

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

@@ -11,6 +11,9 @@ import { analyticsEventKey, browser, isValidPosition } from '@atlaskit/editor-co
 import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { autoScrollForElements, autoScrollWindowForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { unsafeOverflowAutoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element';
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
@@ -19,10 +22,11 @@ import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scal
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import { tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
+import { dropTargetExtendedWidth, tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
+import { ExternalDropTargets } from './ExternalDropTargets';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
 import { TableStickyScrollbar } from './TableStickyScrollbar';
@@ -304,7 +308,9 @@ class TableComponent extends React.Component {
     const {
       allowColumnResizing,
       eventDispatcher,
-      options
+      options,
+      isDragAndDropEnabled,
+      getNode
     } = this.props;
     if (allowColumnResizing && this.wrapper && !isIE11) {
       this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
@@ -315,6 +321,60 @@ class TableComponent extends React.Component {
           this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
         }
       }
+      if (isDragAndDropEnabled) {
+        this.dragAndDropCleanupFn = combine(autoScrollForElements({
+          element: this.wrapper,
+          canScroll: ({
+            source
+          }) => {
+            const {
+              localId,
+              type
+            } = source.data;
+            const node = getNode();
+            return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
+          }
+        }), autoScrollWindowForElements({
+          canScroll: ({
+            source
+          }) => {
+            const {
+              localId,
+              type
+            } = source.data;
+            const node = getNode();
+            return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-row';
+          }
+        }), unsafeOverflowAutoScrollForElements({
+          element: this.wrapper,
+          canScroll: ({
+            source
+          }) => {
+            const {
+              localId
+            } = source.data;
+            const node = getNode();
+            return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId);
+          },
+          getOverflow: () => ({
+            fromTopEdge: {
+              top: dropTargetExtendedWidth,
+              right: dropTargetExtendedWidth,
+              left: dropTargetExtendedWidth
+            },
+            fromRightEdge: {
+              right: dropTargetExtendedWidth,
+              top: dropTargetExtendedWidth,
+              bottom: dropTargetExtendedWidth
+            },
+            fromLeftEdge: {
+              top: dropTargetExtendedWidth,
+              left: dropTargetExtendedWidth,
+              bottom: dropTargetExtendedWidth
+            }
+          })
+        }));
+      }
     }
     if (allowColumnResizing) {
       /**
@@ -340,11 +400,15 @@ class TableComponent extends React.Component {
     const {
       allowColumnResizing,
       eventDispatcher,
-      options
+      options,
+      isDragAndDropEnabled
     } = this.props;
     if (this.wrapper && !isIE11) {
       this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
     }
+    if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
+      this.dragAndDropCleanupFn();
+    }
     if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
       if (this.stickyScrollbar) {
         this.stickyScrollbar.dispose();
@@ -553,7 +617,18 @@ class TableComponent extends React.Component {
     }), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
       "data-testid": "sticky-scrollbar-sentinel-top"
-    }), allowControls && rowControls, isDragAndDropEnabled && allowControls && colControls, /*#__PURE__*/React.createElement("div", {
+    }), allowControls && rowControls, isDragAndDropEnabled && /*#__PURE__*/React.createElement(ExternalDropTargets, {
+      editorView: view,
+      node: node,
+      getScrollOffset: () => {
+        var _this$wrapper2;
+        return ((_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.scrollLeft) || 0;
+      },
+      getTableWrapperWidth: () => {
+        var _this$wrapper3;
+        return ((_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.clientWidth) || 760;
+      }
+    }), /*#__PURE__*/React.createElement("div", {
       style: shadowStyle(showBeforeShadow),
       className: ClassName.TABLE_LEFT_SHADOW
     }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
@@ -575,7 +650,7 @@ class TableComponent extends React.Component {
           }
         }
       }
-    }), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
+    }, allowControls && colControls), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
       style: {
         height: MAX_BROWSER_SCROLLBAR_HEIGHT,

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

@@ -3,8 +3,6 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
-import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
-import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -31,6 +29,9 @@ export default class TableRow extends TableNodeView {
     _defineProperty(this, "listening", false);
     _defineProperty(this, "padding", 0);
     _defineProperty(this, "top", 0);
+    /**
+     * Methods
+     */
     _defineProperty(this, "headerRowMouseScrollEnd", debounce(() => {
       this.dom.classList.remove('no-pointer-events');
     }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
@@ -46,28 +47,21 @@ export default class TableRow extends TableNodeView {
     this.isHeaderRow = supportedHeaderRow(node);
     this.isSticky = false;
     const {
-      pluginConfig,
-      isDragAndDropEnabled
+      pluginConfig
     } = getPluginState(view.state);
     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);
-    }
   }
 
   /**
    * Variables
    */
 
-  // @ts-ignore
-
   /**
    * Methods: Nodeview Lifecycle
    */
@@ -101,7 +95,6 @@ export default class TableRow extends TableNodeView {
     return true;
   }
   destroy() {
-    var _this$dropTargetClean;
     if (this.isStickyHeaderEnabled) {
       this.unsubscribe();
       const tree = getTree(this.dom);
@@ -110,9 +103,6 @@ export default class TableRow extends TableNodeView {
       }
       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 ? void 0 : _this$dropTargetClean.call(this);
   }
   ignoreMutation(mutationRecord) {
     /* tableRows are not directly editable by the user
@@ -137,70 +127,6 @@ export default class TableRow extends TableNodeView {
     }
     return true;
   }
-
-  /**
-   * Methods
-   */
-
-  addDropTarget(element) {
-    const pos = this.getPos();
-    if (!Number.isFinite(pos)) {
-      return;
-    }
-    if (this.dropTargetCleanup) {
-      this.dropTargetCleanup();
-    }
-    this.dropTargetCleanup = dropTargetForElements({
-      element: element,
-      canDrop: ({
-        source
-      }) => {
-        var _data$indexes, _data$indexes2;
-        const data = source.data;
-        const {
-          localId,
-          targetIndex
-        } = this.getCurrentData();
-        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: () => true,
-      getData: ({
-        input,
-        element
-      }) => {
-        const {
-          localId,
-          targetIndex
-        } = this.getCurrentData();
-        const data = {
-          localId,
-          type: 'table-row',
-          targetIndex
-        };
-        return attachClosestEdge(data, {
-          input,
-          element,
-          allowedEdges: ['top', 'bottom']
-        });
-      }
-    });
-  }
-  getCurrentData() {
-    const resolvedPos = this.view.state.doc.resolve(this.getPos());
-    const targetIndex = resolvedPos.index();
-    const localId = resolvedPos.parent.attrs.localId;
-    return {
-      targetIndex,
-      localId
-    };
-  }
   subscribe() {
     this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
     if (this.editorScrollableElement) {

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

@@ -21,7 +21,7 @@ export class TableStickyScrollbar {
       this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScrollDebounced);
       this.handleScrollDebounced.cancel();
     }
-    this.deleteIntesactionObserver();
+    this.deleteIntersectionObserver();
   }
   scrollLeft(left) {
     if (this.stickyScrollbarContainerElement) {
@@ -59,10 +59,10 @@ export class TableStickyScrollbar {
           return;
         }
         if (target.classList.contains(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) {
-          this.sentenialBottomCallback(entry);
+          this.sentinelBottomCallback(entry);
         }
         if (target.classList.contains(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) {
-          this.sentenialTopCallback(entry);
+          this.sentinelTopCallback(entry);
         }
       });
     }, {
@@ -72,7 +72,7 @@ export class TableStickyScrollbar {
     this.sentinels.top = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : (_this$wrapper2$parent = _this$wrapper2.parentElement) === null || _this$wrapper2$parent === void 0 ? void 0 : (_this$wrapper2$parent2 = _this$wrapper2$parent.getElementsByClassName(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper2$parent2 === void 0 ? void 0 : _this$wrapper2$parent2.item(0);
     [this.sentinels.bottom, this.sentinels.top].forEach(el => this.intersectionObserver.observe(el));
   }
-  deleteIntesactionObserver() {
+  deleteIntersectionObserver() {
     if (this.intersectionObserver) {
       if (this.sentinels.bottom) {
         this.intersectionObserver.unobserve(this.sentinels.bottom);
@@ -80,13 +80,13 @@ export class TableStickyScrollbar {
       this.intersectionObserver.disconnect();
     }
   }
-  sentenialBottomCallback(entry) {
+  sentinelBottomCallback(entry) {
     var _entry$rootBounds2;
     const 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();
   }
-  sentenialTopCallback(entry) {
+  sentinelTopCallback(entry) {
     var _entry$rootBounds3;
     const 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/es2019/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -3,7 +3,6 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
-import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils/merged-cells';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { DragAndDropActionType } from './actions';
@@ -92,15 +91,9 @@ export const createPlugin = (dispatch, eventDispatcher) => {
           onDragStart: ({
             location
           }) => {
-            autoScroller.start({
-              input: location.current.input
-            });
             toggleDragMenu(false)(editorView.state, editorView.dispatch);
           },
           onDrag(event) {
-            autoScroller.updateInput({
-              input: event.location.current.input
-            });
             const data = getDraggableDataFromEvent(event);
             // If no data can be found then it's most like we do not want to perform any drag actions
             if (!data) {
@@ -118,7 +111,6 @@ export const createPlugin = (dispatch, eventDispatcher) => {
             setDropTarget(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
           onDrop(event) {
-            autoScroller.stop();
             const data = getDraggableDataFromEvent(event);
 
             // If no data can be found then it's most like we do not want to perform any drop action

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

@@ -53,7 +53,8 @@ export const ColumnDropTarget = ({
       width: width && `${width - 1}px`,
       height: height && `${height}px`,
       marginTop: marginTop && `${marginTop}px`,
-      pointerEvents: 'auto'
+      pointerEvents: 'auto',
+      flexShrink: 0
     },
     "data-drop-target-index": index,
     "data-drop-target-localid": localId,

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import ReactDOM from 'react-dom';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { TableCssClassName as ClassName } from '../../types';
 import { containsHeaderColumn, getColumnsWidths, getRowHeights } from '../../utils';
@@ -76,11 +75,10 @@ export const TableFloatingColumnControls = ({
   }
   const colWidths = getColumnsWidths(editorView);
   const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  const mountTo = tableRef && (tableRef === null || tableRef === void 0 ? void 0 : tableRef.parentElement) || document.body;
   if (!tableActive) {
     return null;
   }
-  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/React.createElement(ColumnControls, {
@@ -102,6 +100,6 @@ export const TableFloatingColumnControls = ({
     localId: currentNodeLocalId,
     rowHeights: rowHeights,
     colWidths: colWidths
-  })), mountTo);
+  }));
 };
 export default TableFloatingColumnControls;

package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -1,12 +1,16 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights, getRowsParams, getSelectedRowIndexes } from '../../../utils';
+import { dropTargetExtendedWidth } from '../../consts';
 import { DragHandle } from '../../DragHandle';
+import RowDropTarget from '../RowDropTarget';
 const getSelectedRows = selection => {
   if (selection instanceof CellSelection && selection.isRowSelection()) {
     const rect = getSelectionRect(selection);
@@ -20,22 +24,51 @@ const getSelectedRows = selection => {
 const DragControlsComponent = ({
   tableRef,
   tableNode,
+  tableWidth,
   hoveredCell,
   tableActive,
   editorView,
   isInDanger,
   isResizing,
-  hasHeaderRow,
   hoverRows,
   selectRow,
   updateCellHoverLocation
 }) => {
   var _tableNode$attrs$loca, _tableNode$attrs;
+  const [isDragging, setIsDragging] = useState(false);
   const rowHeights = getRowHeights(tableRef);
   const rowsParams = getRowsParams(rowHeights);
   const heights = rowHeights.map(height => `${height - 1}px`).join(' ');
   const selectedRowIndexes = getSelectedRows(editorView.state.selection);
-  const rowWidth = tableRef.offsetWidth;
+  const currentNodeLocalId = (_tableNode$attrs$loca = tableNode === null || tableNode === void 0 ? void 0 : (_tableNode$attrs = tableNode.attrs) === null || _tableNode$attrs === void 0 ? void 0 : _tableNode$attrs.localId) !== null && _tableNode$attrs$loca !== void 0 ? _tableNode$attrs$loca : '';
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor({
+        source
+      }) {
+        const {
+          type,
+          localId,
+          indexes
+        } = source.data;
+        if (!indexes || !localId || type !== 'table-row') {
+          return false;
+        }
+        const {
+          tableNode
+        } = getTablePluginState(editorView.state);
+        // If the draggable localId is the same as the current selected table localId then we will allow the monitor
+        // watch for changes
+        return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
+      },
+      onDragStart() {
+        setIsDragging(true);
+      },
+      onDrop() {
+        setIsDragging(false);
+      }
+    });
+  }, [editorView]);
   const onMouseUp = useCallback(() => {
     toggleDragMenu(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex)(editorView.state, editorView.dispatch);
   }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex]);
@@ -75,15 +108,19 @@ const DragControlsComponent = ({
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_ROW_CONTROLS,
     style: {
-      gridTemplateRows: heights
+      gridTemplateRows: heights,
+      gridTemplateColumns: isDragging ? `${dropTargetExtendedWidth}px 24px ${tableWidth}px` : `${dropTargetExtendedWidth}px 24px`
     },
     onMouseMove: handleMouseMove
   }, !isResizing && rowsParams.map(({
     startIndex,
     endIndex
-  }, index) => /*#__PURE__*/React.createElement("div", {
+  }, index) => /*#__PURE__*/React.createElement(Fragment, {
+    key: index
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      gridRow: `${index + 1} / span 1`
+      gridRow: `${index + 1} / span 1`,
+      gridColumn: '2'
     },
     "data-start-index": startIndex,
     "data-end-index": endIndex,
@@ -92,9 +129,22 @@ const DragControlsComponent = ({
     key: index
   }, /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
+  })), isDragging && /*#__PURE__*/React.createElement(RowDropTarget, {
+    key: index,
+    index: index,
+    localId: currentNodeLocalId,
+    style: {
+      gridColumn: '1 / span 3',
+      gridRow: `${index + 1} / span 1`,
+      height: '100%',
+      pointerEvents: 'auto',
+      position: 'relative',
+      left: "var(--ds-space-negative-100, -8px)"
+    }
   }))), !isResizing && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
       gridRow: gridRowPosition,
+      gridColumn: '2',
       display: 'flex',
       height: '100%',
       alignItems: 'center',
@@ -102,9 +152,9 @@ const DragControlsComponent = ({
     },
     "data-testid": "table-floating-row-drag-handle"
   }, /*#__PURE__*/React.createElement(DragHandle, {
-    tableLocalId: (_tableNode$attrs$loca = tableNode === null || tableNode === void 0 ? void 0 : (_tableNode$attrs = tableNode.attrs) === null || _tableNode$attrs === void 0 ? void 0 : _tableNode$attrs.localId) !== null && _tableNode$attrs$loca !== void 0 ? _tableNode$attrs$loca : '',
+    tableLocalId: currentNodeLocalId,
     indexes: [rowIndex],
-    previewWidth: rowWidth,
+    previewWidth: tableWidth,
     previewHeight: rowHeights[rowIndex],
     appearance: selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
     onClick: handleClick,

package/dist/es2019/plugins/table/ui/TableFloatingControls/RowDropTarget/index.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef } from 'react';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+const RowDropTarget = ({
+  index,
+  localId,
+  style
+}) => {
+  const dropTargetRef = useRef(null);
+  useEffect(() => {
+    if (!dropTargetRef.current) {
+      return;
+    }
+    return dropTargetForElements({
+      element: dropTargetRef.current,
+      canDrop({
+        source
+      }) {
+        var _data$indexes, _data$indexes2;
+        const data = source.data;
+        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(index)) === -1
+        );
+      },
+      getData({
+        input,
+        element
+      }) {
+        const data = {
+          localId,
+          type: 'table-row',
+          targetIndex: index
+        };
+        return attachClosestEdge(data, {
+          input,
+          element,
+          allowedEdges: ['top', 'bottom']
+        });
+      }
+    });
+  }, [index, localId]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dropTargetRef,
+    style: style,
+    "data-drop-target-index": index,
+    "data-drop-target-localid": localId,
+    "data-testid": "table-floating-row-controls-drop-target"
+  });
+};
+export default RowDropTarget;

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

@@ -3,13 +3,14 @@ import React, { Component } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
 import { hoverCell, hoverRows, selectRow } from '../../commands';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
+import { TableCssClassName as ClassName } from '../../types';
 import { isSelectionUpdated } from '../../utils';
 import { CornerControls, DragCornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
 import { DragControls, RowControls } from './RowControls';
 export default class TableFloatingControls extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     _defineProperty(this, "selectRow", (row, expand) => {
       const {
         editorView
@@ -48,6 +49,11 @@ export default class TableFloatingControls extends Component {
         hoverCell(rowIndex, hoveredCell.colIndex)(state, dispatch);
       }
     });
+    this.state = {
+      tableWrapperWidth: 0,
+      /** Height needs to be tracked to re-render decorations correctly, do not remove */
+      tableWrapperHeight: 0
+    };
   }
   componentDidMount() {
     this.tryInitResizeObserver();
@@ -64,19 +70,21 @@ export default class TableFloatingControls extends Component {
       tableRef
     } = this.props;
     if (tableRef && !this.resizeObserver && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
+      const tableWrapper = tableRef.closest(`.${ClassName.TABLE_NODE_WRAPPER}`);
       this.resizeObserver = new ResizeObserver(entries => {
         for (let entry of entries) {
-          const tableHeight = entry.contentRect.height;
-          this.setState({
-            tableHeight
+          this.setState(prev => {
+            return (prev === null || prev === void 0 ? void 0 : prev.tableWrapperWidth) === entry.contentRect.width && prev.tableWrapperHeight === entry.contentRect.height ? prev : {
+              tableWrapperWidth: entry.contentRect.width,
+              tableWrapperHeight: entry.contentRect.height
+            };
           });
         }
       });
-      this.resizeObserver.observe(tableRef);
+      this.resizeObserver.observe(tableWrapper);
     }
   }
   shouldComponentUpdate(nextProps, nextState) {
-    var _this$state;
     const {
       tableRef,
       isInDanger,
@@ -92,9 +100,7 @@ export default class TableFloatingControls extends Component {
       stickyHeader,
       hoveredCell
     } = this.props;
-    const tableHeight = (_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.tableHeight;
-    const nextTableHeight = nextState === null || nextState === void 0 ? void 0 : nextState.tableHeight;
-    return ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableHeight !== nextTableHeight || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell;
+    return this.state.tableWrapperWidth !== nextState.tableWrapperWidth || this.state.tableWrapperHeight !== nextState.tableWrapperHeight || ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell;
   }
   componentWillUnmount() {
     if (this.resizeObserver) {
@@ -150,7 +156,7 @@ export default class TableFloatingControls extends Component {
       tableActive: tableActive,
       isInDanger: isInDanger,
       isResizing: isResizing,
-      hasHeaderRow: hasHeaderRow,
+      tableWidth: this.state.tableWrapperWidth,
       hoverRows: this.hoverRows,
       selectRow: this.selectRow,
       updateCellHoverLocation: this.updateCellHoverLocation