@atlaskit/editor-plugin-table 7.0.3 → 7.1.1

package/dist/cjs/ui/icons/AddRowAboveIcon.js

@@ -18,24 +18,20 @@ var AddRowAboveIcon = exports.AddRowAboveIcon = function AddRowAboveIcon() {
     height: "24",
     fill: "var(--ds-border-inverse, #FFFFFF)",
     fillOpacity: "0.01"
-  }), /*#__PURE__*/_react.default.createElement("mask", {
-    id: "path-1-inside-1_896_17822",
-    fill: "var(--ds-border-inverse, #FFFFFF)"
-  }, /*#__PURE__*/_react.default.createElement("rect", {
+  }), /*#__PURE__*/_react.default.createElement("rect", {
     x: "6",
     y: "12",
     width: "12",
-    height: "8",
-    rx: "0.5"
-  })), /*#__PURE__*/_react.default.createElement("rect", {
+    height: "3",
+    rx: "0.5",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
     x: "6",
-    y: "12",
+    y: "16",
     width: "12",
-    height: "8",
+    height: "3",
     rx: "0.5",
-    stroke: "currentColor",
-    strokeWidth: "4",
-    mask: "url(#path-1-inside-1_896_17822)"
+    fill: "currentColor"
   }), /*#__PURE__*/_react.default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",

package/dist/cjs/ui/icons/AddRowBelowIcon.js

@@ -13,28 +13,32 @@ var AddRowBelowIcon = exports.AddRowBelowIcon = function AddRowBelowIcon() {
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react.default.createElement("mask", {
-    id: "path-1-inside-1_920_47112",
-    fill: "var(--ds-border-inverse, #FFFFFF)"
   }, /*#__PURE__*/_react.default.createElement("rect", {
-    x: "6",
-    y: "4",
+    width: "24",
+    height: "24",
+    transform: "matrix(-1 0 0 -1 24 24)",
+    fill: "var(--ds-border-inverse, #FFFFFF)",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "18",
+    y: "12",
     width: "12",
-    height: "8",
-    rx: "0.5"
-  })), /*#__PURE__*/_react.default.createElement("rect", {
-    x: "6",
-    y: "4",
+    height: "3",
+    rx: "0.5",
+    transform: "rotate(-180 18 12)",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "18",
+    y: "8",
     width: "12",
-    height: "8",
+    height: "3",
     rx: "0.5",
-    stroke: "currentColor",
-    strokeWidth: "4",
-    mask: "url(#path-1-inside-1_920_47112)"
+    transform: "rotate(-180 18 8)",
+    fill: "currentColor"
   }), /*#__PURE__*/_react.default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M13 15V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13Z",
+    d: "M11 17V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11Z",
     fill: "currentColor"
   }));
 };

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

@@ -62,11 +62,11 @@ var columnControlsLineMarker = exports.columnControlsLineMarker = function colum
 var DeleteButton = exports.DeleteButton = function DeleteButton() {
   return (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    .", " {\n      ", "\n    }\n  }\n\n  .", ":hover {\n    background: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat(_consts.tableCellSelectedDeleteIconBackground, ";\n        color: ").concat(_consts.tableCellSelectedDeleteIconColor, ";\n      ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableCellHoverDeleteIconBackground, _consts.tableCellHoverDeleteIconColor);
 };
-var OverflowShadow = exports.OverflowShadow = function OverflowShadow() {
-  return (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: ", ";\n  }\n  .", " {\n    ", "\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide : _consts.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "calc(100% - ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide : _consts.tableOverflowShadowWidth, "px)") : "calc(100% - ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide - 10 : -2, "px)"), _types.TableCssClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(), _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableBorderColor);
+var OverflowShadow = exports.OverflowShadow = function OverflowShadow(isDragAndDropEnabled) {
+  return (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", "\n          ", "%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: ", ";\n  }\n  .", " {\n    ", "\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide : _consts.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100, "var(--ds-shadow-overflow-perimeter, transparent)", (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "calc(100% - ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide : _consts.tableOverflowShadowWidth, "px)") : "calc(100% - ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide - 10 : -2, "px)"), _types.TableCssClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableBorderColor);
 };
-var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD() {
-  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
+var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD(isDragAndDropEnabled) {
+  if (!isDragAndDropEnabled) {
     return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n      .", ", .", " {\n        height: calc(100% - ", "px);\n        top: ", "px;\n      }\n    "])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTopWithControl, _styles.tableMarginTopWithControl);
   }
 };
@@ -108,14 +108,14 @@ var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateO
 var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
   return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2.default)(["\n        tr\n          th:last-child\n          .", ",\n          tr\n          td:last-child\n          .", " {\n          background-color: transparent;\n          position: absolute;\n          width: ", "px;\n          height: 100%;\n          top: 0;\n          right: 0;\n          cursor: col-resize;\n          z-index: ", ";\n        }\n      "])), _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex) : '';
 };
-var resizeHandleOverrides = function resizeHandleOverrides() {
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
+var resizeHandleOverrides = function resizeHandleOverrides(isDragAndDropEnabled) {
+  if (isDragAndDropEnabled) {
     return (0, _react.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2.default)(["\n      th.", "::before,\n        td.", "::before {\n        content: ' ';\n        position: absolute;\n        left: ", ";\n        top: -1px;\n        width: ", "px;\n        height: calc(100% + 2px);\n        background-color: ", ";\n        z-index: ", ";\n      }\n\n      th.", "::before,\n        td.", "::before {\n        content: ' ';\n        position: absolute;\n        right: -1px;\n        top: -1px;\n        width: ", "px;\n        height: calc(100% + 2px);\n        background-color: ", ";\n        z-index: ", ";\n      }\n    "])), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2);
   }
   return (0, _react.css)(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2.default)(["\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n  "])), _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
 };
-var resizeHandle = exports.resizeHandle = function resizeHandle() {
-  return (0, _react.css)(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    ", "\n\n    ", "\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
+var resizeHandle = exports.resizeHandle = function resizeHandle(isDragAndDropEnabled) {
+  return (0, _react.css)(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    ", "\n\n    ", "\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(isDragAndDropEnabled), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
 };
 
 // Drag and Drop: drop target insert line

package/dist/cjs/utils/drag-menu.js

@@ -26,7 +26,7 @@ var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
 var _toolbar = require("../toolbar");
 var _transforms = require("../transforms");
 var _icons = require("../ui/icons");
-var _index = require("./index");
+var _selection = require("./selection");
 var canDecrease = function canDecrease(index) {
   var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return index !== undefined && index > min;
@@ -38,7 +38,7 @@ var canIncrease = function canIncrease(index) {
 var isDistributeColumnsEnabled = function isDistributeColumnsEnabled(state) {
   var rect = (0, _toolbar.getClosestSelectionRect)(state);
   if (rect) {
-    var selectedColIndexes = (0, _index.getSelectedColumnIndexes)(rect);
+    var selectedColIndexes = (0, _selection.getSelectedColumnIndexes)(rect);
     return selectedColIndexes.length > 1;
   }
   return false;
@@ -67,38 +67,50 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
   }];
   var moveOptions = direction === 'row' ? [{
     label: 'up',
-    offset: -1,
-    canMove: function canMove(index) {
-      return canDrag && canDecrease(index);
-    },
     icon: _arrowUp.default,
-    keymap: _keymaps.moveRowUp
+    keymap: _keymaps.moveRowUp,
+    canMove: function canMove(selectionRect) {
+      return canDrag && canDecrease(selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top);
+    },
+    getOriginIndexes: _selection.getSelectedRowIndexes,
+    getTargetIndex: function getTargetIndex(selectionRect) {
+      return selectionRect.top - 1;
+    }
   }, {
     label: 'down',
-    offset: 1,
-    canMove: function canMove(index) {
-      var _tableMap$height;
-      return canDrag && canIncrease(index, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
-    },
     icon: _arrowDown.default,
-    keymap: _keymaps.moveRowDown
+    keymap: _keymaps.moveRowDown,
+    canMove: function canMove(selectionRect) {
+      var _selectionRect$bottom, _tableMap$height;
+      return canDrag && canIncrease(((_selectionRect$bottom = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom) !== null && _selectionRect$bottom !== void 0 ? _selectionRect$bottom : 0) - 1, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
+    },
+    getOriginIndexes: _selection.getSelectedRowIndexes,
+    getTargetIndex: function getTargetIndex(selectionRect) {
+      return selectionRect.bottom;
+    }
   }] : [{
     label: 'left',
-    offset: -1,
-    canMove: function canMove(index) {
-      return canDrag && canDecrease(index);
-    },
     icon: _arrowLeft.default,
-    keymap: _keymaps.moveColumnLeft
+    keymap: _keymaps.moveColumnLeft,
+    canMove: function canMove(selectionRect) {
+      return canDrag && canDecrease(selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left);
+    },
+    getOriginIndexes: _selection.getSelectedColumnIndexes,
+    getTargetIndex: function getTargetIndex(selectionRect) {
+      return selectionRect.left - 1;
+    }
   }, {
     label: 'right',
-    offset: 1,
-    canMove: function canMove(index) {
-      var _tableMap$width;
-      return canDrag && canIncrease(index, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
-    },
     icon: _arrowRight.default,
-    keymap: _keymaps.moveColumnRight
+    keymap: _keymaps.moveColumnRight,
+    canMove: function canMove(selectionRect) {
+      var _selectionRect$right, _tableMap$width;
+      return canDrag && canIncrease(((_selectionRect$right = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right) !== null && _selectionRect$right !== void 0 ? _selectionRect$right : 0) - 1, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
+    },
+    getOriginIndexes: _selection.getSelectedColumnIndexes,
+    getTargetIndex: function getTargetIndex(selectionRect) {
+      return selectionRect.right;
+    }
   }];
   var sortOptions = direction === 'column' ? [{
     label: 'increasing',
@@ -171,19 +183,20 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     keymap: direction === 'row' ? (0, _keymaps.tooltip)(_keymaps.deleteRow) : (0, _keymaps.tooltip)(_keymaps.deleteColumn)
   }], (0, _toConsumableArray2.default)(moveOptions.map(function (_ref2) {
     var label = _ref2.label,
-      offset = _ref2.offset,
       canMove = _ref2.canMove,
       icon = _ref2.icon,
-      keymap = _ref2.keymap;
+      keymap = _ref2.keymap,
+      getOriginIndexes = _ref2.getOriginIndexes,
+      getTargetIndex = _ref2.getTargetIndex;
     return {
       id: "move_".concat(direction, "_").concat(label),
       title: "Move ".concat(direction, " ").concat(label),
-      disabled: !canMove(index),
+      disabled: !canMove(selectionRect),
       icon: icon,
       onClick: function onClick(state, dispatch) {
-        if (canMove(index)) {
+        if (canMove(selectionRect)) {
           requestAnimationFrame(function () {
-            (0, _commandsWithAnalytics.moveSourceWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, "table-".concat(direction), [index], index + offset)(editorView.state, editorView.dispatch);
+            (0, _commandsWithAnalytics.moveSourceWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, "table-".concat(direction), getOriginIndexes(selectionRect), getTargetIndex(selectionRect))(editorView.state, editorView.dispatch);
           });
           return true;
         }

package/dist/es2019/event-handlers.js

@@ -9,13 +9,14 @@ import { getPluginState as getDragDropPluginState } from './pm-plugins/drag-and-
 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 { TableCssClassName as ClassName, RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
 import { convertHTMLCellIndexToColumnIndex, getColumnIndexMappedToColumnIndexInFirstRow, 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';
 const isFocusingCalendar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
 const isFocusingModal = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="dialog"]');
 const isFocusingFloatingToolbar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="toolbar"]');
 const isFocusingDragHandles = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button') && event.relatedTarget.getAttribute('draggable') === 'true';
+const isFocusingDragHandlesClickableZone = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button') && event.relatedTarget.classList.contains(ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE);
 export const handleBlur = (view, event) => {
   const {
     state,
@@ -23,7 +24,7 @@ export const handleBlur = (view, event) => {
   } = view;
   // IE version check for ED-4665
   // Calendar focus check for ED-10466
-  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event)) {
+  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event) && !isFocusingDragHandlesClickableZone(event)) {
     setEditorFocus(false)(state, dispatch);
   }
   event.preventDefault();

package/dist/es2019/pm-plugins/drag-and-drop/commands-with-analytics.js

@@ -38,6 +38,7 @@ export const moveSourceWithAnalytics = editorAnalyticsAPI => (inputMethod, sourc
   return withEditorAnalyticsAPI(({
     selection
   }) => {
+    const direction = sourceIndexes[0] > targetIndex ? -1 : 1;
     const {
       totalRowCount,
       totalColumnCount
@@ -51,7 +52,7 @@ export const moveSourceWithAnalytics = editorAnalyticsAPI => (inputMethod, sourc
         count: sourceIndexes.length,
         // This identifies the total amount of row/cols the move operation covered. The distance covered should be a representaion
         // of the minimum distance. This will account for large selection being moved causing a large distance travelled value.
-        distance: Math.min(...sourceIndexes.map(v => targetIndex - v)),
+        distance: Math.min(...sourceIndexes.map(v => Math.abs(targetIndex - v))) * direction,
         // If a drop doesn't actually change anything then we're going to mark the event as cancelled.
         status: sourceIndexes.includes(targetIndex) ? TABLE_STATUS.CANCELLED : TABLE_STATUS.SUCCESS,
         totalRowCount,
@@ -77,15 +78,14 @@ export const moveSourceWithAnalyticsViaShortcut = editorAnalyticsAPI => (sourceT
   }
   const isRow = sourceType === 'table-row';
   const selectedIndexes = isRow ? getSelectedRowIndexes(selectionRect) : getSelectedColumnIndexes(selectionRect);
-
-  // FIXME: We can move if only one row/column selected
-  if (selectedIndexes.length === 0 || selectedIndexes.length > 1) {
+  if (selectedIndexes.length === 0) {
     return false;
   }
-  const sourceIndex = selectedIndexes[0];
+
+  // const sourceIndex = selectedIndexes[0];
   // we can move only by one row/column
   // 'direction' can only be 1 (for right or down) or -1 (for left or up)
-  const targetIndex = sourceIndex + direction;
+  const targetIndex = Math[direction < 0 ? 'min' : 'max'](...selectedIndexes) + direction;
 
   // We can move only if targetIndex is a positive number and is not higher than the total number of rows/columns.
   const {
@@ -98,7 +98,7 @@ export const moveSourceWithAnalyticsViaShortcut = editorAnalyticsAPI => (sourceT
   }
 
   // We can move only if there are no merged cells in the source or target row/column
-  const hasMergedCellsInSource = isRow ? hasMergedCellsInRow(sourceIndex)(selection) : hasMergedCellsInColumn(sourceIndex)(selection);
+  const hasMergedCellsInSource = isRow ? hasMergedCellsInRow(selectedIndexes)(selection) : hasMergedCellsInColumn(selectedIndexes)(selection);
   if (hasMergedCellsInSource) {
     return false;
   }
@@ -106,5 +106,5 @@ export const moveSourceWithAnalyticsViaShortcut = editorAnalyticsAPI => (sourceT
   if (hasMergedCellsInTarget) {
     return false;
   }
-  return moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, sourceType, [sourceIndex], targetIndex)(state, dispatch);
+  return moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, sourceType, selectedIndexes, targetIndex)(state, dispatch);
 };

package/dist/es2019/pm-plugins/drag-and-drop/commands.js

@@ -1,9 +1,7 @@
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { moveColumn, moveRow, selectColumn, selectRow } from '@atlaskit/editor-tables/utils';
+import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../types';
 import { createColumnInsertLine, createRowInsertLine, updateDecorations } from '../../utils';
-import { combineTransforms } from '../../utils/transforms';
 import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
 import { createCommand, getPluginState } from './plugin-factory';
@@ -65,13 +63,10 @@ export const moveSource = (sourceType, sourceIndexes, targetIndex, tr) => create
   if (sourceIndexes.includes(targetIndex)) {
     return nextTr.setMeta('addToHistory', false);
   }
-  const anchor = nextTr.selection.anchor;
-  const selectStartOfTable = newTr => newTr.setSelection(TextSelection.create(newTr.doc, anchor));
-  const isTableRow = sourceType === 'table-row';
-  if (isTableRow) {
-    return combineTransforms([moveRow(state, sourceIndexes, targetIndex), selectStartOfTable, selectRow(targetIndex)], nextTr);
-  }
-  return combineTransforms([moveColumn(sourceIndexes, targetIndex), selectStartOfTable, selectColumn(targetIndex)], nextTr);
+  const move = sourceType === 'table-row' ? moveRow : moveColumn;
+  return move(state, sourceIndexes, targetIndex, {
+    selectAfterMove: true
+  })(nextTr);
 });
 export const toggleDragMenu = (isDragMenuOpen, direction, index) => createCommand(state => {
   let {

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

@@ -58,10 +58,7 @@ const destroyFn = (editorView, editorAnalyticsAPI) => {
       } = source.data;
 
       // First; Perform any quick checks so we can abort early.
-      if (!indexes || !localId ||
-      // FIXME: We currently don't support DragNDrop of multiple elements. For now we will not bother to monitor drags
-      // of more then 1 item.
-      indexes.length !== 1 || !(type === 'table-row' || type === 'table-column')) {
+      if (!indexes || !localId || !(type === 'table-row' || type === 'table-column')) {
         return false;
       }
       const {

package/dist/es2019/pm-plugins/drag-and-drop/utils/monitor.js

@@ -33,11 +33,6 @@ export const getDraggableDataFromEvent = ({
   sourceLocalId !== targetLocalId) {
     return undefined;
   }
-
-  // FIXME: currently we only support a single row/col index being moved, remove this clause when this is no longer the case.
-  if (sourceIndexes.length > 1) {
-    return undefined;
-  }
   const targetClosestEdge = (_extractClosestEdge = extractClosestEdge(destination.data)) !== null && _extractClosestEdge !== void 0 ? _extractClosestEdge : targetType === 'table-row' ? 'top' : 'left';
   // NOTE: By default we always insert row/cols at the target index to the top/left (retrospectively of row/cols).
   // This introduces an offset in the event the drop occured closer to the bottom/right of the target. We want

package/dist/es2019/pm-plugins/keymap.js

@@ -3,7 +3,7 @@ import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace,
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { createTable, goToNextCell, moveCursorBackward, triggerUnlessTableHeader } from '../commands';
+import { createTable, goToNextCell, moveCursorBackward } from '../commands';
 import { addRowAroundSelection, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from '../commands-with-analytics';
 import { activateNextResizeArea, changeColumnWidthByStep, initiateKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand } from '../commands/insert';
@@ -29,7 +29,7 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
   // Add row/column shortcuts
   bindKeymapWithCommand(addRowBefore.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
   bindKeymapWithCommand(addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
-  bindKeymapWithCommand(addColumnBefore.common, triggerUnlessTableHeader(addColumnBeforeCommand(getEditorContainerWidth)), list);
+  bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(getEditorContainerWidth), list);
   bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(getEditorContainerWidth), list);
   if (dragAndDropEnabled) {
     // Move row/column shortcuts

package/dist/es2019/types.js

@@ -91,6 +91,7 @@ export const TableCssClassName = {
   DRAG_COLUMN_DROP_TARGET_CONTROLS: `${tablePrefixSelector}-col-drop-target-controls`,
   DRAG_COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
   DRAG_HANDLE_BUTTON_CONTAINER: `${tablePrefixSelector}-drag-handle-button-container`,
+  DRAG_HANDLE_BUTTON_CLICKABLE_ZONE: `${tablePrefixSelector}-drag-handle-button-clickable-zone`,
   DRAG_CORNER_BUTTON: `${tablePrefixSelector}-drag-corner-button`,
   DRAG_CORNER_BUTTON_INNER: `${tablePrefixSelector}-drag-corner-button-inner`,
   /** disabled classes */

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

@@ -9,6 +9,7 @@ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/ut
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
+import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
 import { HandleIconComponent } from './HandleIconComponent';
 const DragHandleComponent = ({
@@ -39,9 +40,11 @@ const DragHandleComponent = ({
   const {
     selection
   } = editorView.state;
-  const isRowHandleHovered = direction === 'row' && hoveredRows.length > 0;
-  const isColumnHandleHovered = direction === 'column' && hoveredColumns.length > 0;
-  const hasMergedCells = useMemo(() => direction === 'row' ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection), [indexes, direction, selection]);
+  const isRow = direction === 'row';
+  const isColumn = direction === 'column';
+  const isRowHandleHovered = isRow && hoveredRows.length > 0;
+  const isColumnHandleHovered = isColumn && hoveredColumns.length > 0;
+  const hasMergedCells = useMemo(() => isRow ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection), [indexes, isRow, selection]);
   const handleIconProps = {
     forceDefaultHandle,
     isColumnHandleHovered,
@@ -80,7 +83,7 @@ const DragHandleComponent = ({
                 // be generated.
                 container.style.left = `-${rect.width - 0.0001}px`;
               }
-              if (direction === 'row') {
+              if (isRow) {
                 return {
                   x: 12,
                   y: rect.height / 2
@@ -103,19 +106,34 @@ const DragHandleComponent = ({
         }
       });
     }
-  }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells, canDrag]);
-  const showDragMenuAnchorId = direction === 'row' ? 'drag-handle-button-row' : 'drag-handle-button-column';
+  }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells, canDrag]);
+  const showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    className: ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE,
+    "data-testid": "table-drag-handle-clickable-zone-button",
+    style: {
+      height: isRow ? `calc(100% - ${dragTableInsertColumnButtonSize}px)` : `${"var(--ds-space-200, 16px)"}`,
+      // 16px here because it's the size of drag handle button's large side
+      width: isRow ? `${"var(--ds-space-200, 16px)"}` // 16px here because it's the size of drag handle button's large side
+      : `calc(100% - ${dragTableInsertColumnButtonSize}px)`,
+      left: isRow ? '3px' : undefined,
+      bottom: isColumn ? '0' : undefined,
+      alignSelf: isColumn ? 'none' : 'center',
+      zIndex: isColumn ? '-1' : 'auto'
+    },
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement("button", {
     id: isDragMenuTarget ? showDragMenuAnchorId : undefined,
     className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, {
       [ClassName.DRAG_HANDLE_DISABLED]: !canDrag || hasMergedCells
     }),
     ref: dragHandleDivRef,
     style: {
-      transform: direction === 'column' ? 'none' : 'rotate(90deg)'
+      transform: isColumn ? 'none' : 'rotate(90deg)',
+      alignSelf: isColumn ? 'none' : 'center'
     },
     "data-testid": "table-drag-handle-button",
-    "aria-label": formatMessage(direction === 'row' ? messages.rowDragHandle : messages.columnDragHandle),
+    "aria-label": formatMessage(isRow ? messages.rowDragHandle : messages.columnDragHandle),
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onMouseUp: e => {

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

@@ -26,7 +26,7 @@ import { getNewResizeStateFromSelectedColumns } from '../../pm-plugins/table-res
 import { canMergeCells } from '../../transforms';
 import { TableCssClassName as ClassName } from '../../types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
-import { contextualMenuDropdownWidth } from '../consts';
+import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
 import { AddColRightIcon, AddRowBelowIcon, MergeCellsIcon, SplitCellIcon } from '../icons';
 import { cellColourPreviewStyles, elementBeforeIconStyles } from './styles';
 export class ContextualMenu extends Component {
@@ -584,7 +584,7 @@ export class ContextualMenu extends Component {
       onMouseEnter: this.handleItemMouseEnter,
       onMouseLeave: this.handleItemMouseLeave,
       fitHeight: 188,
-      fitWidth: contextualMenuDropdownWidth,
+      fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
       boundariesElement: boundariesElement,
       offset: offset,
       section: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && getBooleanFF('platform.editor.menu.group-items') ? {

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

@@ -5,7 +5,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
-import { contextualMenuDropdownWidth, contextualMenuTriggerSize } from '../consts';
+import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize } from '../consts';
 import ContextualMenu from './ContextualMenu';
 import { tablePopupStyles } from './styles';
 const FloatingContextualMenu = ({
@@ -20,7 +20,8 @@ const FloatingContextualMenu = ({
 }) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const {
-    targetCellPosition
+    targetCellPosition,
+    isDragAndDropEnabled
   } = getPluginState(editorView.state);
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
@@ -46,7 +47,7 @@ const FloatingContextualMenu = ({
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     fitHeight: 188,
-    fitWidth: contextualMenuDropdownWidth
+    fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.
     ,
@@ -55,7 +56,7 @@ const FloatingContextualMenu = ({
     offset: [-7, 0],
     stick: true
   }, jsx("div", {
-    css: tablePopupStyles
+    css: tablePopupStyles(isDragAndDropEnabled)
   }, jsx(ContextualMenu, {
     editorView: editorView,
     offset: [contextualMenuTriggerSize / 2, -contextualMenuTriggerSize],

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

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../../types';
-import { contextualMenuDropdownWidth } from '../consts';
+import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
 export const cellColourPreviewStyles = selectedColor => css`
   &::before {
     background: ${selectedColor};
@@ -15,7 +15,7 @@ export const elementBeforeIconStyles = css`
 
 // 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`
+export const tablePopupStyles = isDragAndDropEnabled => css`
   .${ClassName.CONTEXTUAL_SUBMENU} {
     border-radius: ${"var(--ds-border-radius, 3px)"};
     background: ${"var(--ds-surface-overlay, white)"};
@@ -23,7 +23,7 @@ export const tablePopupStyles = css`
     display: block;
     position: absolute;
     top: 0;
-    left: ${contextualMenuDropdownWidth}px;
+    left: ${isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth}px;
     padding: ${"var(--ds-space-100, 8px)"};
 
     > div {

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

@@ -103,11 +103,14 @@ export const ColumnControls = ({
       clearHoverSelection()(state, dispatch);
     }
   }, [editorView, tableActive]);
-  const handleMouseUp = useCallback(() => {
+  const handleMouseUp = useCallback(event => {
     const {
       state,
       dispatch
     } = editorView;
+    if (event.shiftKey) {
+      return;
+    }
     toggleDragMenu(undefined, 'column', colIndex)(state, dispatch);
   }, [editorView, colIndex]);
   const colIndexes = useMemo(() => {
@@ -160,7 +163,9 @@ export const ColumnControls = ({
         alignItems: 'center',
         height: 'fit-content',
         placeSelf: 'center',
-        zIndex: 99
+        zIndex: 99,
+        width: '100%',
+        position: 'relative'
       },
       "data-column-control-index": hoveredCell.colIndex,
       "data-testid": `table-floating-column-${isSelecting ? selectedColIndexes[0] : colIndex}-drag-handle`