@atlaskit/editor-plugin-table 5.8.5 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 6.0.0
+
+### Major Changes
+
+- [#67764](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67764) [`392964912fad`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/392964912fad) - Fixed incorrectly imported dependencies from src in the editor-plugin-table
+
+### Patch Changes
+
+- [#67255](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67255) [`f73d19be272d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f73d19be272d) - Set pointer events to none on column controls while dragging. Fixes issue where column controls prevent drop targets from showing.
+
+## 5.8.6
+
+### Patch Changes
+
+- [#67239](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67239) [`4b543688dfcb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4b543688dfcb) - [ux] ED-21242: Fixed some menu item not full visible on drag menu"
+- Updated dependencies
+
 ## 5.8.5
 
 ### Patch Changes

package/dist/cjs/commands/column-resize.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.initiateKeyboardColumnResizing = exports.changeColumnWidthByStep = exports.activateNextResizeArea = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorTables = require("@atlaskit/editor-tables");
-var _utils = require("@atlaskit/editor-tables/src/utils");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginFactory = require("../pm-plugins/table-resizing/plugin-factory");
 var _utils2 = require("../pm-plugins/table-resizing/utils");

package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js

@@ -89,10 +89,12 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_backgroundColor.default, {
+          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+            css: _styles2.elementBeforeIconStyles
+          }, (0, _react2.jsx)(_backgroundColor.default, {
             label: formatMessage(_messages.tableMessages.backgroundColor),
             size: "medium"
-          }) : undefined,
+          })) : undefined,
           elemAfter: (0, _react2.jsx)("div", {
             className: _styles.DropdownMenuSharedCssClassName.SUBMENU
           }, (0, _react2.jsx)("div", {
@@ -129,14 +131,18 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             name: 'merge'
           },
           isDisabled: !(0, _transforms.canMergeCells)(state.tr),
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_icons.MergeCellsIcon, null) : undefined
+          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+            css: _styles2.elementBeforeIconStyles
+          }, (0, _react2.jsx)(_icons.MergeCellsIcon, null)) : undefined
         }, {
           content: formatMessage(_messages.tableMessages.splitCell),
           value: {
             name: 'split'
           },
           isDisabled: !(0, _utils2.splitCell)(state),
-          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_icons.SplitCellIcon, null) : undefined
+          elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+            css: _styles2.elementBeforeIconStyles
+          }, (0, _react2.jsx)(_icons.SplitCellIcon, null)) : undefined
         }];
       }
       return [];
@@ -155,7 +161,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_icons.AddColRightIcon, null) : undefined
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          css: _styles2.elementBeforeIconStyles
+        }, (0, _react2.jsx)(_icons.AddColRightIcon, null)) : undefined
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createInsertRowItem", function () {
@@ -172,7 +180,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addRowAfter)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_icons.AddRowBelowIcon, null) : undefined
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          css: _styles2.elementBeforeIconStyles
+        }, (0, _react2.jsx)(_icons.AddRowBelowIcon, null)) : undefined
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createClearCellsItem", function () {
@@ -198,11 +208,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.backspace)),
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_crossCircle.default, {
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          css: _styles2.elementBeforeIconStyles
+        }, (0, _react2.jsx)(_crossCircle.default, {
           label: formatMessage(_messages.tableMessages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
           })
-        }) : undefined
+        })) : undefined
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createDeleteColumnItem", function () {
@@ -222,11 +234,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_remove.default, {
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          css: _styles2.elementBeforeIconStyles
+        }, (0, _react2.jsx)(_remove.default, {
           label: formatMessage(_messages.tableMessages.removeColumns, {
             0: noOfColumns
           })
-        }) : undefined
+        })) : undefined
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createDeleteRowItem", function () {
@@ -246,11 +260,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)(_remove.default, {
+        elemBefore: isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? (0, _react2.jsx)("span", {
+          css: _styles2.elementBeforeIconStyles
+        }, (0, _react2.jsx)(_remove.default, {
           label: formatMessage(_messages.tableMessages.removeRows, {
             0: noOfRows
           })
-        }) : undefined
+        })) : undefined
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createDistributeColumnsItem", function () {

package/dist/cjs/ui/FloatingContextualMenu/styles.js

@@ -4,18 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tablePopupStyles = exports.cellColourPreviewStyles = void 0;
+exports.tablePopupStyles = exports.elementBeforeIconStyles = exports.cellColourPreviewStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _colors = require("@atlaskit/theme/colors");
 var _types = require("../../types");
 var _consts = require("../consts");
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
 };
+var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  display: flex;\n"])), "var(--ds-space-negative-075, -6px)");
 
 // TODO Delete this comment after verifying space token -> previous value `padding: 8px`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
-var tablePopupStyles = exports.tablePopupStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"), _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+var tablePopupStyles = exports.tablePopupStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"), _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));

package/dist/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -143,10 +143,8 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? (0, _react2.jsx)("div", {
-        style: {
-          display: 'flex'
-        }
+      elemBefore: item.icon ? (0, _react2.jsx)("span", {
+        css: _styles2.elementBeforeIconStyles
       }, (0, _react2.jsx)(item.icon, {
         label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)
       })) : undefined,
@@ -232,10 +230,12 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
       value: {
         name: 'background'
       },
-      elemBefore: (0, _react2.jsx)(_backgroundColor.default, {
+      elemBefore: (0, _react2.jsx)("span", {
+        css: _styles2.elementBeforeIconStyles
+      }, (0, _react2.jsx)(_backgroundColor.default, {
         label: formatMessage(_messages.tableMessages.backgroundColor),
         size: "medium"
-      }),
+      })),
       elemAfter: (0, _react2.jsx)("div", {
         className: _styles.DropdownMenuSharedCssClassName.SUBMENU,
         css: _styles2.dragMenuBackgroundColorStyles

package/dist/cjs/ui/FloatingDragMenu/styles.js

@@ -4,16 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleStyles = exports.dragMenuBackgroundColorStyles = exports.cellColourPreviewStyles = void 0;
+exports.toggleStyles = exports.elementBeforeIconStyles = exports.dragMenuBackgroundColorStyles = exports.cellColourPreviewStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _colors = require("@atlaskit/theme/colors");
 var _types = require("../../types");
 var _consts = require("../consts");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
 };
-var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
-var toggleStyles = exports.toggleStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  input[type='checkbox'] {\n    width: 30px;\n    height: 14px;\n    pointer-events: initial;\n    cursor: pointer;\n  }\n  > label {\n    margin: 0px;\n    pointer-events: none;\n    > span {\n      pointer-events: none;\n    }\n  }\n"])));
+var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  display: flex;\n"])), "var(--ds-space-negative-075, -6px)");
+var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+var toggleStyles = exports.toggleStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  input[type='checkbox'] {\n    width: 30px;\n    height: 14px;\n    pointer-events: initial;\n    cursor: pointer;\n  }\n  > label {\n    margin: 0px;\n    pointer-events: none;\n    > span {\n      pointer-events: none;\n    }\n  }\n"])));

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

@@ -46,7 +46,8 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     isTableHovered = _ref.isTableHovered,
     canDrag = _ref.canDrag,
     tableContainerWidth = _ref.tableContainerWidth,
-    isNumberColumnEnabled = _ref.isNumberColumnEnabled;
+    isNumberColumnEnabled = _ref.isNumberColumnEnabled,
+    isDragging = _ref.isDragging;
   var columnControlsRef = (0, _react.useRef)(null);
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return (
@@ -205,7 +206,8 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       gridTemplateColumns: widths,
       marginTop: marginTop,
       width: stickyTop ? containerWidth : undefined,
-      overflowX: stickyTop ? 'hidden' : 'visible'
+      overflowX: stickyTop ? 'hidden' : 'visible',
+      pointerEvents: isDragging ? 'none' : undefined
     }
   }, !isResizing && columnParams.map(function (_ref2, index) {
     var startIndex = _ref2.startIndex,

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

@@ -42,8 +42,8 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     setTableRect = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    hasDropTargets = _useState4[0],
-    setHasDropTargets = _useState4[1];
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
   var containerRef = (0, _react.useRef)(null);
   var node = getNode();
   var currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
@@ -91,10 +91,10 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
         return type === 'table-column' && !!(indexes !== null && indexes !== void 0 && indexes.length) && localId === currentNodeLocalId;
       },
       onDragStart: function onDragStart() {
-        setHasDropTargets(true);
+        setIsDragging(true);
       },
       onDrop: function onDrop() {
-        setHasDropTargets(false);
+        setIsDragging(false);
       }
     });
   }, [editorView, currentNodeLocalId]);
@@ -137,8 +137,9 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     hasHeaderColumn: hasHeaderColumn,
     canDrag: canDrag,
     tableContainerWidth: tableContainerWidth,
-    isNumberColumnEnabled: isNumberColumnEnabled
-  }), hasDropTargets && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
+    isNumberColumnEnabled: isNumberColumnEnabled,
+    isDragging: isDragging
+  }), isDragging && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,
     tableHeight: tableRect.height,

package/dist/es2019/commands/column-resize.js

@@ -1,6 +1,6 @@
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables';
-import { findCellClosestToPos, findCellRectClosestToPos, findTableClosestToPos, getSelectionRect, isSelectionType, nextCell } from '@atlaskit/editor-tables/src/utils';
+import { findCellClosestToPos, findCellRectClosestToPos, findTableClosestToPos, getSelectionRect, isSelectionType, nextCell } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPluginState as getTableResizingPluginState, createCommand as tableResizingPluginCreateCommand } from '../pm-plugins/table-resizing/plugin-factory';
 import { currentColWidth, getResizeState, getTableMaxWidth, resizeColumn, updateControls } from '../pm-plugins/table-resizing/utils';

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

@@ -28,7 +28,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { contextualMenuDropdownWidth } from '../consts';
 import { AddColRightIcon, AddRowBelowIcon, MergeCellsIcon, SplitCellIcon } from '../icons';
-import { cellColourPreviewStyles } from './styles';
+import { cellColourPreviewStyles, elementBeforeIconStyles } from './styles';
 export class ContextualMenu extends Component {
   constructor(...args) {
     super(...args);
@@ -74,10 +74,12 @@ export class ContextualMenu extends Component {
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(EditorBackgroundColorIcon, {
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+            css: elementBeforeIconStyles
+          }, jsx(EditorBackgroundColorIcon, {
             label: formatMessage(messages.backgroundColor),
             size: "medium"
-          }) : undefined,
+          })) : undefined,
           elemAfter: jsx("div", {
             className: DropdownMenuSharedCssClassName.SUBMENU
           }, jsx("div", {
@@ -120,14 +122,18 @@ export class ContextualMenu extends Component {
             name: 'merge'
           },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(MergeCellsIcon, null) : undefined
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+            css: elementBeforeIconStyles
+          }, jsx(MergeCellsIcon, null)) : undefined
         }, {
           content: formatMessage(messages.splitCell),
           value: {
             name: 'split'
           },
           isDisabled: !splitCell(state),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(SplitCellIcon, null) : undefined
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+            css: elementBeforeIconStyles
+          }, jsx(SplitCellIcon, null)) : undefined
         }];
       }
       return [];
@@ -150,7 +156,9 @@ export class ContextualMenu extends Component {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(AddColRightIcon, null) : undefined
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(AddColRightIcon, null)) : undefined
       };
     });
     _defineProperty(this, "createInsertRowItem", () => {
@@ -171,7 +179,9 @@ export class ContextualMenu extends Component {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(AddRowBelowIcon, null) : undefined
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(AddRowBelowIcon, null)) : undefined
       };
     });
     _defineProperty(this, "createClearCellsItem", () => {
@@ -203,11 +213,13 @@ export class ContextualMenu extends Component {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(backspace)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(CrossCircleIcon, {
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(CrossCircleIcon, {
           label: formatMessage(messages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
           })
-        }) : undefined
+        })) : undefined
       };
     });
     _defineProperty(this, "createDeleteColumnItem", () => {
@@ -233,11 +245,13 @@ export class ContextualMenu extends Component {
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(RemoveIcon, {
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeColumns, {
             0: noOfColumns
           })
-        }) : undefined
+        })) : undefined
       };
     });
     _defineProperty(this, "createDeleteRowItem", () => {
@@ -263,11 +277,13 @@ export class ContextualMenu extends Component {
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(RemoveIcon, {
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeRows, {
             0: noOfRows
           })
-        }) : undefined
+        })) : undefined
       };
     });
     _defineProperty(this, "createDistributeColumnsItem", () => {

package/dist/es2019/ui/FloatingContextualMenu/styles.js

@@ -8,6 +8,10 @@ export const cellColourPreviewStyles = selectedColor => css`
     background: ${selectedColor};
   }
 `;
+export const elementBeforeIconStyles = css`
+  margin-right: ${"var(--ds-space-negative-075, -6px)"};
+  display: flex;
+`;
 
 // TODO Delete this comment after verifying space token -> previous value `padding: 8px`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -25,7 +25,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes, hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
-import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, toggleStyles } from './styles';
+import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, elementBeforeIconStyles, toggleStyles } from './styles';
 const MapDragMenuOptionIdToMessage = {
   add_row_above: {
     message: messages.addRowAbove,
@@ -131,10 +131,8 @@ const convertToDropdownItems = (dragMenuConfig, formatMessage, selectionRect) =>
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? jsx("div", {
-        style: {
-          display: 'flex'
-        }
+      elemBefore: item.icon ? jsx("span", {
+        css: elementBeforeIconStyles
       }, jsx(item.icon, {
         label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)
       })) : undefined,
@@ -228,10 +226,12 @@ export const DragMenu = ({
       value: {
         name: 'background'
       },
-      elemBefore: jsx(EditorBackgroundColorIcon, {
+      elemBefore: jsx("span", {
+        css: elementBeforeIconStyles
+      }, jsx(EditorBackgroundColorIcon, {
         label: formatMessage(messages.backgroundColor),
         size: "medium"
-      }),
+      })),
       elemAfter: jsx("div", {
         className: DropdownMenuSharedCssClassName.SUBMENU,
         css: dragMenuBackgroundColorStyles

package/dist/es2019/ui/FloatingDragMenu/styles.js

@@ -8,6 +8,10 @@ export const cellColourPreviewStyles = selectedColor => css`
     background: ${selectedColor};
   }
 `;
+export const elementBeforeIconStyles = css`
+  margin-right: ${"var(--ds-space-negative-075, -6px)"};
+  display: flex;
+`;
 export const dragMenuBackgroundColorStyles = css`
   .${ClassName.DRAG_SUBMENU} {
     border-radius: ${"var(--ds-border-radius, 3px)"};

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

@@ -36,7 +36,8 @@ export const ColumnControls = ({
   isTableHovered,
   canDrag,
   tableContainerWidth,
-  isNumberColumnEnabled
+  isNumberColumnEnabled,
+  isDragging
 }) => {
   var _colWidths$map$join, _rowHeights$;
   const columnControlsRef = useRef(null);
@@ -202,7 +203,8 @@ export const ColumnControls = ({
       gridTemplateColumns: widths,
       marginTop,
       width: stickyTop ? containerWidth : undefined,
-      overflowX: stickyTop ? 'hidden' : 'visible'
+      overflowX: stickyTop ? 'hidden' : 'visible',
+      pointerEvents: isDragging ? 'none' : undefined
     }
   }, !isResizing && columnParams.map(({
     startIndex,

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

@@ -24,7 +24,7 @@ export const TableFloatingColumnControls = ({
     width: 0,
     height: 0
   });
-  const [hasDropTargets, setHasDropTargets] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef(null);
   const node = getNode();
   const currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
@@ -62,10 +62,10 @@ export const TableFloatingColumnControls = ({
         return type === 'table-column' && !!(indexes !== null && indexes !== void 0 && indexes.length) && localId === currentNodeLocalId;
       },
       onDragStart() {
-        setHasDropTargets(true);
+        setIsDragging(true);
       },
       onDrop() {
-        setHasDropTargets(false);
+        setIsDragging(false);
       }
     });
   }, [editorView, currentNodeLocalId]);
@@ -108,8 +108,9 @@ export const TableFloatingColumnControls = ({
     hasHeaderColumn: hasHeaderColumn,
     canDrag: canDrag,
     tableContainerWidth: tableContainerWidth,
-    isNumberColumnEnabled: isNumberColumnEnabled
-  }), hasDropTargets && /*#__PURE__*/React.createElement(ColumnDropTargets, {
+    isNumberColumnEnabled: isNumberColumnEnabled,
+    isDragging: isDragging
+  }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,
     tableHeight: tableRect.height,

package/dist/esm/commands/column-resize.js

@@ -1,6 +1,6 @@
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables';
-import { findCellClosestToPos, findCellRectClosestToPos, findTableClosestToPos, getSelectionRect, isSelectionType, nextCell } from '@atlaskit/editor-tables/src/utils';
+import { findCellClosestToPos, findCellRectClosestToPos, findTableClosestToPos, getSelectionRect, isSelectionType, nextCell } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPluginState as getTableResizingPluginState, createCommand as tableResizingPluginCreateCommand } from '../pm-plugins/table-resizing/plugin-factory';
 import { currentColWidth, getResizeState, getTableMaxWidth, resizeColumn, updateControls } from '../pm-plugins/table-resizing/utils';

package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js

@@ -39,7 +39,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { contextualMenuDropdownWidth } from '../consts';
 import { AddColRightIcon, AddRowBelowIcon, MergeCellsIcon, SplitCellIcon } from '../icons';
-import { cellColourPreviewStyles } from './styles';
+import { cellColourPreviewStyles, elementBeforeIconStyles } from './styles';
 export var ContextualMenu = /*#__PURE__*/function (_Component) {
   _inherits(ContextualMenu, _Component);
   var _super = _createSuper(ContextualMenu);
@@ -84,10 +84,12 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(EditorBackgroundColorIcon, {
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+            css: elementBeforeIconStyles
+          }, jsx(EditorBackgroundColorIcon, {
             label: formatMessage(messages.backgroundColor),
             size: "medium"
-          }) : undefined,
+          })) : undefined,
           elemAfter: jsx("div", {
             className: DropdownMenuSharedCssClassName.SUBMENU
           }, jsx("div", {
@@ -124,14 +126,18 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             name: 'merge'
           },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(MergeCellsIcon, null) : undefined
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+            css: elementBeforeIconStyles
+          }, jsx(MergeCellsIcon, null)) : undefined
         }, {
           content: formatMessage(messages.splitCell),
           value: {
             name: 'split'
           },
           isDisabled: !splitCell(state),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(SplitCellIcon, null) : undefined
+          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+            css: elementBeforeIconStyles
+          }, jsx(SplitCellIcon, null)) : undefined
         }];
       }
       return [];
@@ -150,7 +156,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(AddColRightIcon, null) : undefined
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(AddColRightIcon, null)) : undefined
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createInsertRowItem", function () {
@@ -167,7 +175,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(AddRowBelowIcon, null) : undefined
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(AddRowBelowIcon, null)) : undefined
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createClearCellsItem", function () {
@@ -193,11 +203,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(backspace)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(CrossCircleIcon, {
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(CrossCircleIcon, {
           label: formatMessage(messages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
           })
-        }) : undefined
+        })) : undefined
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createDeleteColumnItem", function () {
@@ -217,11 +229,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(RemoveIcon, {
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeColumns, {
             0: noOfColumns
           })
-        }) : undefined
+        })) : undefined
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createDeleteRowItem", function () {
@@ -241,11 +255,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx(RemoveIcon, {
+        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          css: elementBeforeIconStyles
+        }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeRows, {
             0: noOfRows
           })
-        }) : undefined
+        })) : undefined
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createDistributeColumnsItem", function () {

package/dist/esm/ui/FloatingContextualMenu/styles.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
@@ -8,7 +8,8 @@ import { contextualMenuDropdownWidth } from '../consts';
 export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
 };
+export var elementBeforeIconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  display: flex;\n"])), "var(--ds-space-negative-075, -6px)");
 
 // TODO Delete this comment after verifying space token -> previous value `padding: 8px`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
-export var tablePopupStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var tablePopupStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));

package/dist/esm/ui/FloatingDragMenu/DragMenu.js

@@ -27,7 +27,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes, hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
-import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, toggleStyles } from './styles';
+import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, elementBeforeIconStyles, toggleStyles } from './styles';
 var MapDragMenuOptionIdToMessage = {
   add_row_above: {
     message: messages.addRowAbove,
@@ -135,10 +135,8 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? jsx("div", {
-        style: {
-          display: 'flex'
-        }
+      elemBefore: item.icon ? jsx("span", {
+        css: elementBeforeIconStyles
       }, jsx(item.icon, {
         label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)
       })) : undefined,
@@ -224,10 +222,12 @@ export var DragMenu = function DragMenu(_ref) {
       value: {
         name: 'background'
       },
-      elemBefore: jsx(EditorBackgroundColorIcon, {
+      elemBefore: jsx("span", {
+        css: elementBeforeIconStyles
+      }, jsx(EditorBackgroundColorIcon, {
         label: formatMessage(messages.backgroundColor),
         size: "medium"
-      }),
+      })),
       elemAfter: jsx("div", {
         className: DropdownMenuSharedCssClassName.SUBMENU,
         css: dragMenuBackgroundColorStyles

package/dist/esm/ui/FloatingDragMenu/styles.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
@@ -8,5 +8,6 @@ import { dragMenuDropdownWidth } from '../consts';
 export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
 };
-export var dragMenuBackgroundColorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
-export var toggleStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  input[type='checkbox'] {\n    width: 30px;\n    height: 14px;\n    pointer-events: initial;\n    cursor: pointer;\n  }\n  > label {\n    margin: 0px;\n    pointer-events: none;\n    > span {\n      pointer-events: none;\n    }\n  }\n"])));
+export var elementBeforeIconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  display: flex;\n"])), "var(--ds-space-negative-075, -6px)");
+export var dragMenuBackgroundColorStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var toggleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  input[type='checkbox'] {\n    width: 30px;\n    height: 14px;\n    pointer-events: initial;\n    cursor: pointer;\n  }\n  > label {\n    margin: 0px;\n    pointer-events: none;\n    > span {\n      pointer-events: none;\n    }\n  }\n"])));

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

@@ -37,7 +37,8 @@ export var ColumnControls = function ColumnControls(_ref) {
     isTableHovered = _ref.isTableHovered,
     canDrag = _ref.canDrag,
     tableContainerWidth = _ref.tableContainerWidth,
-    isNumberColumnEnabled = _ref.isNumberColumnEnabled;
+    isNumberColumnEnabled = _ref.isNumberColumnEnabled,
+    isDragging = _ref.isDragging;
   var columnControlsRef = useRef(null);
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return (
@@ -196,7 +197,8 @@ export var ColumnControls = function ColumnControls(_ref) {
       gridTemplateColumns: widths,
       marginTop: marginTop,
       width: stickyTop ? containerWidth : undefined,
-      overflowX: stickyTop ? 'hidden' : 'visible'
+      overflowX: stickyTop ? 'hidden' : 'visible',
+      pointerEvents: isDragging ? 'none' : undefined
     }
   }, !isResizing && columnParams.map(function (_ref2, index) {
     var startIndex = _ref2.startIndex,

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

@@ -32,8 +32,8 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     setTableRect = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    hasDropTargets = _useState4[0],
-    setHasDropTargets = _useState4[1];
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
   var containerRef = useRef(null);
   var node = getNode();
   var currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
@@ -81,10 +81,10 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
         return type === 'table-column' && !!(indexes !== null && indexes !== void 0 && indexes.length) && localId === currentNodeLocalId;
       },
       onDragStart: function onDragStart() {
-        setHasDropTargets(true);
+        setIsDragging(true);
       },
       onDrop: function onDrop() {
-        setHasDropTargets(false);
+        setIsDragging(false);
       }
     });
   }, [editorView, currentNodeLocalId]);
@@ -127,8 +127,9 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     hasHeaderColumn: hasHeaderColumn,
     canDrag: canDrag,
     tableContainerWidth: tableContainerWidth,
-    isNumberColumnEnabled: isNumberColumnEnabled
-  }), hasDropTargets && /*#__PURE__*/React.createElement(ColumnDropTargets, {
+    isNumberColumnEnabled: isNumberColumnEnabled,
+    isDragging: isDragging
+  }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,
     tableHeight: tableRect.height,

package/dist/types/commands/column-resize.d.ts

@@ -1,5 +1,5 @@
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import type { Direction } from '@atlaskit/editor-tables/src/types';
+import type { Direction } from '@atlaskit/editor-tables/types';
 export declare const initiateKeyboardColumnResizing: Command;
 export declare const activateNextResizeArea: (direction: Direction) => Command;
 export declare const changeColumnWidthByStep: (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth) => Command;

package/dist/types/ui/FloatingContextualMenu/styles.d.ts

@@ -1,2 +1,3 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
+export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
 export declare const tablePopupStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/FloatingDragMenu/styles.d.ts

@@ -1,3 +1,4 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
+export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
 export declare const dragMenuBackgroundColorStyles: import("@emotion/react").SerializedStyles;
 export declare const toggleStyles: import("@emotion/react").SerializedStyles;

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

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

package/dist/types-ts4.5/commands/column-resize.d.ts

@@ -1,5 +1,5 @@
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import type { Direction } from '@atlaskit/editor-tables/src/types';
+import type { Direction } from '@atlaskit/editor-tables/types';
 export declare const initiateKeyboardColumnResizing: Command;
 export declare const activateNextResizeArea: (direction: Direction) => Command;
 export declare const changeColumnWidthByStep: (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth) => Command;

package/dist/types-ts4.5/ui/FloatingContextualMenu/styles.d.ts

@@ -1,2 +1,3 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
+export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
 export declare const tablePopupStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/FloatingDragMenu/styles.d.ts

@@ -1,3 +1,4 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
+export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
 export declare const dragMenuBackgroundColorStyles: import("@emotion/react").SerializedStyles;
 export declare const toggleStyles: import("@emotion/react").SerializedStyles;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.8.5",
+  "version": "6.0.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.3.0",
     "@atlaskit/custom-steps": "^0.0.11",
-    "@atlaskit/editor-common": "^76.39.0",
+    "@atlaskit/editor-common": "^76.40.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",

package/src/commands/column-resize.ts

@@ -4,10 +4,7 @@ import type {
   GetEditorContainerWidth,
 } from '@atlaskit/editor-common/types';
 import { TableMap } from '@atlaskit/editor-tables';
-import type {
-  CellAttributes,
-  Direction,
-} from '@atlaskit/editor-tables/src/types';
+import type { CellAttributes, Direction } from '@atlaskit/editor-tables/types';
 import {
   findCellClosestToPos,
   findCellRectClosestToPos,
@@ -15,7 +12,7 @@ import {
   getSelectionRect,
   isSelectionType,
   nextCell,
-} from '@atlaskit/editor-tables/src/utils';
+} from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -81,7 +81,7 @@ import {
   SplitCellIcon,
 } from '../icons';
 
-import { cellColourPreviewStyles } from './styles';
+import { cellColourPreviewStyles, elementBeforeIconStyles } from './styles';
 
 export interface Props {
   editorView: EditorView;
@@ -210,10 +210,12 @@ export class ContextualMenu extends Component<
           getBooleanFF(
             'platform.editor.table.new-cell-context-menu-styling',
           ) ? (
-            <EditorBackgroundColorIcon
-              label={formatMessage(messages.backgroundColor)}
-              size="medium"
-            />
+            <span css={elementBeforeIconStyles}>
+              <EditorBackgroundColorIcon
+                label={formatMessage(messages.backgroundColor)}
+                size="medium"
+              />
+            </span>
           ) : undefined,
         elemAfter: (
           <div className={DropdownMenuSharedCssClassName.SUBMENU}>
@@ -272,7 +274,9 @@ export class ContextualMenu extends Component<
             getBooleanFF(
               'platform.editor.table.new-cell-context-menu-styling',
             ) ? (
-              <MergeCellsIcon />
+              <span css={elementBeforeIconStyles}>
+                <MergeCellsIcon />
+              </span>
             ) : undefined,
         },
         {
@@ -284,7 +288,9 @@ export class ContextualMenu extends Component<
             getBooleanFF(
               'platform.editor.table.new-cell-context-menu-styling',
             ) ? (
-              <SplitCellIcon />
+              <span css={elementBeforeIconStyles}>
+                <SplitCellIcon />
+              </span>
             ) : undefined,
         },
       ] as MenuItem[];
@@ -311,7 +317,9 @@ export class ContextualMenu extends Component<
       elemBefore:
         isDragAndDropEnabled &&
         getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <AddColRightIcon />
+          <span css={elementBeforeIconStyles}>
+            <AddColRightIcon />
+          </span>
         ) : undefined,
     } as MenuItem;
   };
@@ -335,7 +343,9 @@ export class ContextualMenu extends Component<
       elemBefore:
         isDragAndDropEnabled &&
         getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <AddRowBelowIcon />
+          <span css={elementBeforeIconStyles}>
+            <AddRowBelowIcon />
+          </span>
         ) : undefined,
     } as MenuItem;
   };
@@ -360,11 +370,13 @@ export class ContextualMenu extends Component<
       elemBefore:
         isDragAndDropEnabled &&
         getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <CrossCircleIcon
-            label={formatMessage(messages.clearCells, {
-              0: Math.max(noOfColumns, noOfRows),
-            })}
-          />
+          <span css={elementBeforeIconStyles}>
+            <CrossCircleIcon
+              label={formatMessage(messages.clearCells, {
+                0: Math.max(noOfColumns, noOfRows),
+              })}
+            />
+          </span>
         ) : undefined,
     } as MenuItem;
   };
@@ -388,11 +400,13 @@ export class ContextualMenu extends Component<
       elemBefore:
         isDragAndDropEnabled &&
         getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <RemoveIcon
-            label={formatMessage(messages.removeColumns, {
-              0: noOfColumns,
-            })}
-          />
+          <span css={elementBeforeIconStyles}>
+            <RemoveIcon
+              label={formatMessage(messages.removeColumns, {
+                0: noOfColumns,
+              })}
+            />
+          </span>
         ) : undefined,
     } as MenuItem;
   };
@@ -416,11 +430,13 @@ export class ContextualMenu extends Component<
       elemBefore:
         isDragAndDropEnabled &&
         getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <RemoveIcon
-            label={formatMessage(messages.removeRows, {
-              0: noOfRows,
-            })}
-          />
+          <span css={elementBeforeIconStyles}>
+            <RemoveIcon
+              label={formatMessage(messages.removeRows, {
+                0: noOfRows,
+              })}
+            />
+          </span>
         ) : undefined,
     } as MenuItem;
   };

package/src/ui/FloatingContextualMenu/styles.ts

@@ -13,6 +13,11 @@ export const cellColourPreviewStyles = (selectedColor: string) => css`
   }
 `;
 
+export const elementBeforeIconStyles = css`
+  margin-right: ${token('space.negative.075', '-6px')};
+  display: flex;
+`;
+
 // TODO Delete this comment after verifying space token -> previous value `padding: 8px`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
 export const tablePopupStyles = css`

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -77,6 +77,7 @@ import { dragMenuDropdownWidth } from '../consts';
 import {
   cellColourPreviewStyles,
   dragMenuBackgroundColorStyles,
+  elementBeforeIconStyles,
   toggleStyles,
 } from './styles';
 
@@ -230,18 +231,14 @@ const convertToDropdownItems = (
       value: { name: item.id },
       isDisabled: item.disabled,
       elemBefore: item.icon ? (
-        <div
-          style={{
-            display: 'flex',
-          }}
-        >
+        <span css={elementBeforeIconStyles}>
           <item.icon
             label={formatMessage(
               MapDragMenuOptionIdToMessage[item.id].message,
               options,
             )}
           />
-        </div>
+        </span>
       ) : undefined,
       elemAfter: item.keymap ? (
         <div css={shortcutStyle}>{item.keymap}</div>
@@ -349,10 +346,12 @@ export const DragMenu = ({
       content: formatMessage(messages.backgroundColor),
       value: { name: 'background' },
       elemBefore: (
-        <EditorBackgroundColorIcon
-          label={formatMessage(messages.backgroundColor)}
-          size="medium"
-        />
+        <span css={elementBeforeIconStyles}>
+          <EditorBackgroundColorIcon
+            label={formatMessage(messages.backgroundColor)}
+            size="medium"
+          />
+        </span>
       ),
       elemAfter: (
         <div

package/src/ui/FloatingDragMenu/styles.ts

@@ -13,6 +13,11 @@ export const cellColourPreviewStyles = (selectedColor: string) => css`
   }
 `;
 
+export const elementBeforeIconStyles = css`
+  margin-right: ${token('space.negative.075', '-6px')};
+  display: flex;
+`;
+
 export const dragMenuBackgroundColorStyles = css`
   .${ClassName.DRAG_SUBMENU} {
     border-radius: ${token('border.radius', '3px')};

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

@@ -39,6 +39,7 @@ export interface ColumnControlsProps {
   canDrag?: boolean;
   tableContainerWidth?: number;
   isNumberColumnEnabled?: boolean;
+  isDragging?: boolean;
 }
 
 const getSelectedColumns = (selection: Selection) => {
@@ -68,6 +69,7 @@ export const ColumnControls = ({
   canDrag,
   tableContainerWidth,
   isNumberColumnEnabled,
+  isDragging,
 }: ColumnControlsProps) => {
   const columnControlsRef = useRef<HTMLDivElement>(null);
   const widths =
@@ -300,6 +302,7 @@ export const ColumnControls = ({
     isNumberColumnEnabled && tableContainerWidth
       ? tableContainerWidth - akEditorTableNumberColumnWidth
       : tableContainerWidth;
+
   return (
     <div
       className={ClassName.DRAG_COLUMN_CONTROLS}
@@ -314,6 +317,7 @@ export const ColumnControls = ({
           marginTop,
           width: stickyTop ? containerWidth : undefined,
           overflowX: stickyTop ? 'hidden' : 'visible',
+          pointerEvents: isDragging ? 'none' : undefined,
         }}
       >
         {!isResizing &&

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -59,7 +59,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
     { width: 0, height: 0 },
   );
-  const [hasDropTargets, setHasDropTargets] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
   const node = getNode();
@@ -105,10 +105,10 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         );
       },
       onDragStart() {
-        setHasDropTargets(true);
+        setIsDragging(true);
       },
       onDrop() {
-        setHasDropTargets(false);
+        setIsDragging(false);
       },
     });
   }, [editorView, currentNodeLocalId]);
@@ -160,8 +160,9 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         canDrag={canDrag}
         tableContainerWidth={tableContainerWidth}
         isNumberColumnEnabled={isNumberColumnEnabled}
+        isDragging={isDragging}
       />
-      {hasDropTargets && (
+      {isDragging && (
         <ColumnDropTargets
           tableRef={tableRef}
           stickyTop={tableActive ? stickyTop : undefined}