@atlaskit/editor-plugin-table 5.3.15 → 5.3.17

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

@@ -35,6 +35,11 @@ export class FloatingInsertButton extends React.Component {
       isDragAndDropEnabled,
       dispatchAnalyticsEvent
     } = this.props;
+
+    // TODO: temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
+    if (isDragAndDropEnabled && (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0)) {
+      return null;
+    }
     const type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
     if (!tableNode || !tableRef || !type) {
       return null;

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

@@ -78,7 +78,7 @@ export const ColumnControls = ({
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS
   }, /*#__PURE__*/React.createElement("div", {
-    className: ClassName.COLUMN_CONTROLS_INNER,
+    className: ClassName.DRAG_COLUMN_CONTROLS_INNER,
     "data-testid": "table-floating-column-controls",
     style: {
       gridTemplateColumns: widths,
@@ -96,13 +96,7 @@ export const ColumnControls = ({
     className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER,
     contentEditable: false,
     key: index
-  }, !hasHeaderColumn && index === 0 && /*#__PURE__*/React.createElement("div", {
-    style: {
-      left: '0px',
-      right: 'unset'
-    },
-    className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT,
     style: columnParams.length - 1 === index ? {
       right: '0'
@@ -110,12 +104,10 @@ export const ColumnControls = ({
   }))), tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
       gridColumn: gridColumnPosition,
-      zIndex: 99,
       display: 'flex',
-      width: '100%',
       justifyContent: 'center',
       alignItems: 'center',
-      marginTop: "var(--ds-space-negative-025, -2px)"
+      zIndex: 99
     },
     "data-column-control-index": hoveredCell.colIndex,
     "data-testid": "table-floating-column-control"

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

@@ -17,10 +17,10 @@ export const ColumnDropTargets = ({
   const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   const marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
   return /*#__PURE__*/React.createElement("div", {
-    className: ClassName.COLUMN_DROP_TARGET_CONTROLS,
+    className: ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS,
     contentEditable: false
   }, /*#__PURE__*/React.createElement("div", {
-    className: ClassName.COLUMN_CONTROLS_INNER,
+    className: ClassName.DRAG_COLUMN_CONTROLS_INNER,
     "data-testid": "table-floating-column-controls-drop-targets"
   }, colWidths === null || colWidths === void 0 ? void 0 : colWidths.map((width, index) => {
     return /*#__PURE__*/React.createElement(ColumnDropTarget, {

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

@@ -81,7 +81,7 @@ export const TableFloatingColumnControls = ({
     return null;
   }
   return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
-    className: ClassName.COLUMN_CONTROLS_WRAPPER,
+    className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/React.createElement(ColumnControls, {
     editorView: editorView,

package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -0,0 +1,93 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { injectIntl } from 'react-intl-next';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection, hoverTable } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+import messages from '../../messages';
+class CornerControlComponent extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "isActive", () => {
+      const {
+        editorView,
+        hoveredRows,
+        isResizing
+      } = this.props;
+      const {
+        selection
+      } = editorView.state;
+      const table = findTable(selection);
+      if (!table) {
+        return false;
+      }
+      return isTableSelected(selection) || hoveredRows && hoveredRows.length === TableMap.get(table.node).height && !isResizing;
+    });
+    _defineProperty(this, "clearHoverSelection", () => {
+      const {
+        state,
+        dispatch
+      } = this.props.editorView;
+      clearHoverSelection()(state, dispatch);
+    });
+    _defineProperty(this, "selectTable", () => {
+      const {
+        state,
+        dispatch
+      } = this.props.editorView;
+      dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+    });
+    _defineProperty(this, "hoverTable", () => {
+      const {
+        state,
+        dispatch
+      } = this.props.editorView;
+      hoverTable()(state, dispatch);
+    });
+  }
+  render() {
+    const {
+      isInDanger,
+      tableRef,
+      isHeaderColumnEnabled,
+      isHeaderRowEnabled,
+      intl: {
+        formatMessage
+      }
+    } = this.props;
+    if (!tableRef) {
+      return null;
+    }
+    const isActive = this.isActive();
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(ClassName.CORNER_CONTROLS, {
+        active: isActive,
+        sticky: this.props.stickyTop !== undefined
+      }),
+      style: {
+        top: this.props.stickyTop !== undefined ? `${this.props.stickyTop}px` : undefined
+      },
+      contentEditable: false
+    }, /*#__PURE__*/React.createElement("button", {
+      "aria-label": formatMessage(messages.cornerControl),
+      type: "button",
+      className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
+        danger: isActive && isInDanger
+      }),
+      onClick: this.selectTable,
+      onMouseOver: this.hoverTable,
+      onMouseOut: this.clearHoverSelection
+    }), !isHeaderRowEnabled && /*#__PURE__*/React.createElement("div", {
+      className: ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ClassName.CONTROLS_INSERT_MARKER
+    })), !isHeaderColumnEnabled && /*#__PURE__*/React.createElement("div", {
+      className: ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ClassName.CONTROLS_INSERT_MARKER
+    })));
+  }
+}
+export const CornerControls = injectIntl(CornerControlComponent);

package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import classnames from 'classnames';
+import { injectIntl } from 'react-intl-next';
+import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection, hoverTable } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+import messages from '../../messages';
+const DragCornerControlsComponent = ({
+  editorView,
+  isInDanger,
+  intl: {
+    formatMessage
+  }
+}) => {
+  const handleOnClick = () => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+  };
+  const handleMouseOver = () => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    hoverTable()(state, dispatch);
+  };
+  const handleMouseOut = () => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    clearHoverSelection()(state, dispatch);
+  };
+  const isActive = useMemo(() => {
+    const {
+      selection
+    } = editorView.state;
+    const table = findTable(selection);
+    if (!table) {
+      return false;
+    }
+    return isTableSelected(selection);
+  }, [editorView.state]);
+  return /*#__PURE__*/React.createElement("button", {
+    className: classnames(ClassName.DRAG_CORNER_BUTTON, {
+      active: isActive,
+      danger: isActive && isInDanger
+    }),
+    "aria-label": formatMessage(messages.cornerControl),
+    type: "button",
+    onClick: handleOnClick,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    contentEditable: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ClassName.DRAG_CORNER_BUTTON_INNER
+  }));
+};
+export const DragCornerControls = injectIntl(DragCornerControlsComponent);

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

@@ -1,99 +1,2 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
-import classnames from 'classnames';
-import { defineMessages, injectIntl } from 'react-intl-next';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
-import { clearHoverSelection, hoverTable } from '../../../commands';
-import { TableCssClassName as ClassName } from '../../../types';
-const messages = defineMessages({
-  cornerControl: {
-    id: 'fabric.editor.cornerControl',
-    defaultMessage: 'Highlight table',
-    description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
-  }
-});
-class CornerControlComponent extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "isActive", () => {
-      const {
-        editorView,
-        hoveredRows,
-        isResizing
-      } = this.props;
-      const {
-        selection
-      } = editorView.state;
-      const table = findTable(selection);
-      if (!table) {
-        return false;
-      }
-      return isTableSelected(selection) || hoveredRows && hoveredRows.length === TableMap.get(table.node).height && !isResizing;
-    });
-    _defineProperty(this, "clearHoverSelection", () => {
-      const {
-        state,
-        dispatch
-      } = this.props.editorView;
-      clearHoverSelection()(state, dispatch);
-    });
-    _defineProperty(this, "selectTable", () => {
-      const {
-        state,
-        dispatch
-      } = this.props.editorView;
-      dispatch(selectTable(state.tr).setMeta('addToHistory', false));
-    });
-    _defineProperty(this, "hoverTable", () => {
-      const {
-        state,
-        dispatch
-      } = this.props.editorView;
-      hoverTable()(state, dispatch);
-    });
-  }
-  render() {
-    const {
-      isInDanger,
-      tableRef,
-      isHeaderColumnEnabled,
-      isHeaderRowEnabled,
-      intl: {
-        formatMessage
-      }
-    } = this.props;
-    if (!tableRef) {
-      return null;
-    }
-    const isActive = this.isActive();
-    return /*#__PURE__*/React.createElement("div", {
-      className: classnames(ClassName.CORNER_CONTROLS, {
-        active: isActive,
-        sticky: this.props.stickyTop !== undefined
-      }),
-      style: {
-        top: this.props.stickyTop !== undefined ? `${this.props.stickyTop}px` : undefined
-      },
-      contentEditable: false
-    }, /*#__PURE__*/React.createElement("button", {
-      "aria-label": formatMessage(messages.cornerControl),
-      type: "button",
-      className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
-        danger: isActive && isInDanger
-      }),
-      onClick: this.selectTable,
-      onMouseOver: this.hoverTable,
-      onMouseOut: this.clearHoverSelection
-    }), !isHeaderRowEnabled && /*#__PURE__*/React.createElement("div", {
-      className: ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER
-    }, /*#__PURE__*/React.createElement("div", {
-      className: ClassName.CONTROLS_INSERT_MARKER
-    })), !isHeaderColumnEnabled && /*#__PURE__*/React.createElement("div", {
-      className: ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER
-    }, /*#__PURE__*/React.createElement("div", {
-      className: ClassName.CONTROLS_INSERT_MARKER
-    })));
-  }
-}
-export const CornerControls = injectIntl(CornerControlComponent);
+export { CornerControls } from './ClassicCornerControls';
+export { DragCornerControls } from './DragCornerControls';

package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/types.js

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

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

@@ -90,13 +90,7 @@ const DragControlsComponent = ({
     className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
     contentEditable: false,
     key: index
-  }, !hasHeaderRow && index === 0 && /*#__PURE__*/React.createElement("div", {
-    style: {
-      top: '0px',
-      left: "var(--ds-space-075, 6px)"
-    },
-    className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
   }))), !isResizing && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
     style: {

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

@@ -4,7 +4,7 @@ import { browser } from '@atlaskit/editor-common/utils';
 import { hoverCell, hoverRows, selectRow } from '../../commands';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { isSelectionUpdated } from '../../utils';
-import { CornerControls } from './CornerControls';
+import { CornerControls, DragCornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
 import { DragControls, RowControls } from './RowControls';
 export default class TableFloatingControls extends Component {
@@ -137,7 +137,12 @@ export default class TableFloatingControls extends Component {
       updateCellHoverLocation: this.updateCellHoverLocation,
       stickyTop: stickyTop,
       isDragAndDropEnabled: isDragAndDropEnabled
-    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(DragControls, {
+    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragCornerControls, {
+      editorView: editorView,
+      tableRef: tableRef,
+      isInDanger: isInDanger,
+      isResizing: isResizing
+    }), /*#__PURE__*/React.createElement(DragControls, {
       tableRef: tableRef,
       tableNode: tableNode,
       hoveredCell: hoveredCell,
@@ -149,7 +154,7 @@ export default class TableFloatingControls extends Component {
       hoverRows: this.hoverRows,
       selectRow: this.selectRow,
       updateCellHoverLocation: this.updateCellHoverLocation
-    }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
+    })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,

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

@@ -7,7 +7,7 @@ import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, resizeHandlerAreaWidth, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableControlsSpacing, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
-import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
+import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, dragCornerControlButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
 const cornerControlHeight = tableToolbarSize + 1;
 
 /*
@@ -272,6 +272,8 @@ export const tableStyles = props => {
 
     ${dragInsertButtonWrapper(props)}
 
+    ${dragCornerControlButton(props)}
+
     /* Delete button */
     ${DeleteButton(props)}
     /* Ends Delete button */
@@ -455,7 +457,7 @@ export const tableStyles = props => {
         }
       }
 
-      .${ClassName.COLUMN_CONTROLS_WRAPPER} {
+      .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
         padding: 0 ${tablePadding}px;
       }
 
@@ -630,11 +632,11 @@ export const tableStyles = props => {
     }
 
     .${ClassName.DRAG_COLUMN_CONTROLS} {
-      .${ClassName.COLUMN_CONTROLS_INNER} {
+      .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
         height: 24px;
         position: absolute;
         top: ${"var(--ds-space-negative-150, -12px)"};
-        z-index: ${akEditorUnitZIndex};
+        z-index: ${akEditorUnitZIndex * 13};
       }
 
       .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER} {
@@ -917,9 +919,9 @@ export const tableStyles = props => {
       z-index: ${akEditorUnitZIndex};
     }
 
-    .${ClassName.COLUMN_CONTROLS_WRAPPER} {
+    .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
       position: absolute;
-      top: ${tableMarginTop + 1}px;
+      top: ${tableMarginTop}px;
     }
 
     ${tableWrapperStyles()}

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

@@ -59,5 +59,10 @@ export default defineMessages({
     id: 'fabric.editor.tables.adjustColumn',
     defaultMessage: 'Adjust column',
     description: 'Tooltip displayed on table column resize handle'
+  },
+  cornerControl: {
+    id: 'fabric.editor.cornerControl',
+    defaultMessage: 'Highlight table',
+    description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
   }
 });

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

@@ -136,6 +136,7 @@ export const dragInsertButtonWrapper = props => css`
     bottom: -5px;
     left: 3px;
   }
+
   .${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
     ${Button(`
     background: ${"var(--ds-surface-overlay, white)"};
@@ -144,6 +145,7 @@ export const dragInsertButtonWrapper = props => css`
     border-radius: 50%;
   `)}
   }
+
   .${ClassName.DRAG_CONTROLS_INSERT_BUTTON}:hover {
     background: ${`var(--ds-background-brand-bold, ${B300})`};
     border: 1px solid ${`var(--ds-background-brand-bold, ${B300})`};
@@ -151,6 +153,45 @@ export const dragInsertButtonWrapper = props => css`
     cursor: pointer;
   }
 `;
+export const dragCornerControlButton = props => css`
+  .${ClassName.DRAG_CORNER_BUTTON} {
+    width: 12px;
+    height: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: ${"var(--ds-space-negative-075, -6px)"};
+    left: ${"var(--ds-space-075, 6px)"};
+    background-color: ${"var(--ds-surface, #FFF)"};
+    border-radius: 50%;
+    border: none;
+    padding: 0;
+    outline: none;
+    z-index: ${akEditorUnitZIndex * 99};
+
+    &.active .${ClassName.DRAG_CORNER_BUTTON_INNER} {
+      background-color: ${"var(--ds-border-selected, #0C66E4)"};
+      border-color: ${"var(--ds-border-selected, #0C66E4)"};
+    }
+
+    &:hover {
+      cursor: pointer;
+
+      .${ClassName.DRAG_CORNER_BUTTON_INNER} {
+        border-color: ${"var(--ds-border-selected, #0C66E4)"};
+      }
+    }
+  }
+
+  .${ClassName.DRAG_CORNER_BUTTON_INNER} {
+    border: 1px solid
+      ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
+    border-radius: 50%;
+    width: 6px;
+    height: 6px;
+  }
+`;
 export const insertColumnButtonWrapper = props => css`
   ${InsertButton()}
   ${InsertButtonHover()}
@@ -310,12 +351,12 @@ const getFloatingDotOverrides = props => {
 };
 export const floatingColumnControls = props => {
   return css`
-    .${ClassName.COLUMN_DROP_TARGET_CONTROLS} {
+    .${ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS} {
       box-sizing: border-box;
       position: absolute;
       top: 0;
 
-      .${ClassName.COLUMN_CONTROLS_INNER} {
+      .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
         display: flex;
         flex-direction: row;
       }
@@ -324,7 +365,7 @@ export const floatingColumnControls = props => {
     .${ClassName.DRAG_COLUMN_CONTROLS} {
       box-sizing: border-box;
 
-      .${ClassName.COLUMN_CONTROLS_INNER} {
+      .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
         display: grid;
         justify-items: center;
       }

package/dist/es2019/plugins/table/utils/dom.js

@@ -15,9 +15,10 @@ export const isTableControlsButton = node => containsClassName(node, ClassName.C
 export const isTableContainerOrWrapper = node => containsClassName(node, ClassName.TABLE_CONTAINER) || containsClassName(node, ClassName.TABLE_NODE_WRAPPER);
 
 /** drag-and-drop classes */
-export const isRowDragControlsButton = node => containsClassName(node, ClassName.DRAG_ROW_CONTROLS) || closestElement(node, `.${ClassName.DRAG_ROW_CONTROLS}`);
+export const isDragRowControlsButton = node => containsClassName(node, ClassName.DRAG_ROW_CONTROLS) || closestElement(node, `.${ClassName.DRAG_ROW_CONTROLS}`);
 export const isDragRowFloatingInsertDot = node => containsClassName(node, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER);
 export const isDragColumnFloatingInsertDot = node => containsClassName(node, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
+export const isDragCornerButton = node => containsClassName(node, ClassName.DRAG_CORNER_BUTTON) || containsClassName(node, ClassName.DRAG_CORNER_BUTTON_INNER);
 
 /*
  * This function returns which side of a given element the mouse cursor is,
@@ -73,14 +74,20 @@ export const isDragColumnFloatingInsertDot = node => containsClassName(node, Cla
  * the same is valid to the right side.
  */
 
-export const getMousePositionHorizontalRelativeByElement = (mouseEvent, elementContentRects, gapInPixels) => {
+export const getMousePositionHorizontalRelativeByElement = (mouseEvent, elementContentRects, gapInPixels, isDragAndDropEnabled) => {
   const element = mouseEvent.target;
   if (element instanceof HTMLElement) {
-    var _closestCell$id, _elementContentRects$, _elementContentRects$2;
     let width, x;
-    const closestCell = element.closest(SELECTOR_TABLE_LEAFS);
-    const id = (_closestCell$id = closestCell === null || closestCell === void 0 ? void 0 : closestCell.id) !== null && _closestCell$id !== void 0 ? _closestCell$id : '';
-    width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 ? void 0 : (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
+    if (isDragAndDropEnabled) {
+      // mouse event fires for new overlapping column controls, so the cell can not get detected. Get width
+      // directly from element that will be .pm-table-drag-columns-floating-insert-dot-wrapper
+      width = element.clientWidth;
+    } else {
+      var _closestCell$id, _elementContentRects$, _elementContentRects$2;
+      const closestCell = element.closest(SELECTOR_TABLE_LEAFS);
+      const id = (_closestCell$id = closestCell === null || closestCell === void 0 ? void 0 : closestCell.id) !== null && _closestCell$id !== void 0 ? _closestCell$id : '';
+      width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 ? void 0 : (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
+    }
     x = mouseEvent.offsetX;
     if (width <= 0) {
       return null;

package/dist/es2019/plugins/table/utils/index.js

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
 export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';

package/dist/esm/plugins/table/event-handlers.js

@@ -10,7 +10,7 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
-import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
+import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 var isFocusingCalendar = function isFocusingCalendar(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
@@ -133,7 +133,7 @@ export var handleMouseOver = function handleMouseOver(view, mouseEvent) {
 // Ignore any `mousedown` `event` from control and numbered column buttons
 // PM end up changing selection during shift selection if not prevented
 export var handleMouseDown = function handleMouseDown(_, event) {
-  var isControl = !!(event.target && event.target instanceof HTMLElement && (isTableContainerOrWrapper(event.target) || isColumnControlsDecorations(event.target) || isRowControlsButton(event.target)));
+  var isControl = !!(event.target && event.target instanceof HTMLElement && (isTableContainerOrWrapper(event.target) || isColumnControlsDecorations(event.target) || isRowControlsButton(event.target) || isDragCornerButton(event.target)));
   if (isControl) {
     event.preventDefault();
   }
@@ -190,12 +190,13 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
     var state = view.state,
       dispatch = view.dispatch;
     var _getPluginState3 = getPluginState(state),
-      insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex;
+      insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex,
+      isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
     var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
       _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
       startIndex = _getColumnOrRowIndex10[0],
       endIndex = _getColumnOrRowIndex10[1];
-    var positionColumn = getMousePositionHorizontalRelativeByElement(event, elementContentRects) === 'right' ? endIndex : startIndex;
+    var positionColumn = getMousePositionHorizontalRelativeByElement(event, elementContentRects, undefined, isDragAndDropEnabled) === 'right' ? endIndex : startIndex;
     if (positionColumn !== insertColumnButtonIndex) {
       return showInsertColumnButton(positionColumn)(state, dispatch);
     }

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

@@ -7,7 +7,7 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils/merged-cells';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { DragAndDropActionType } from './actions';
-import { clearDropTarget, moveSource, setDropTarget } from './commands';
+import { clearDropTarget, moveSource, setDropTarget, toggleDragMenu } from './commands';
 import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
@@ -86,6 +86,7 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
             autoScroller.start({
               input: location.current.input
             });
+            toggleDragMenu(false)(editorView.state, editorView.dispatch);
           },
           onDrag: function onDrag(event) {
             autoScroller.updateInput({