@atlaskit/editor-plugin-table 7.1.0 → 7.1.2

package/dist/cjs/ui/consts.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
+exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _types = require("../types");
 /**
@@ -55,7 +54,8 @@ var resizeHandlerAreaWidth = exports.resizeHandlerAreaWidth = _types.RESIZE_HAND
 var resizeLineWidth = exports.resizeLineWidth = 2;
 var resizeHandlerZIndex = exports.resizeHandlerZIndex = columnControlsZIndex + _editorSharedStyles.akRichMediaResizeZIndex;
 var contextualMenuTriggerSize = exports.contextualMenuTriggerSize = 16;
-var contextualMenuDropdownWidth = exports.contextualMenuDropdownWidth = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop') ? 250 : 180;
+var contextualMenuDropdownWidth = exports.contextualMenuDropdownWidth = 180;
+var contextualMenuDropdownWidthDnD = exports.contextualMenuDropdownWidthDnD = 250;
 var stickyRowZIndex = exports.stickyRowZIndex = resizeHandlerZIndex + 2;
 var stickyRowOffsetTop = exports.stickyRowOffsetTop = 8;
 var stickyHeaderBorderBottomWidth = exports.stickyHeaderBorderBottomWidth = 1;

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(state, 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/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(() => {
@@ -132,7 +135,7 @@ export const ColumnControls = ({
     };
   }, [tableWrapper, handleScroll]);
   const generateHandleByType = type => {
-    var _rowHeights$reduce, _colWidths;
+    var _rowHeights$reduce, _colWidths$reduce;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
       return null;
     }
@@ -151,6 +154,7 @@ export const ColumnControls = ({
 
     // this indexes are used to calculate the drag and drop source
     const indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
+    const previewWidth = (_colWidths$reduce = colWidths === null || colWidths === void 0 ? void 0 : colWidths.reduce((sum, v, i) => sum + (v !== null && v !== void 0 ? v : tableCellMinWidth) * (indexes.includes(i) ? 1 : 0), 0)) !== null && _colWidths$reduce !== void 0 ? _colWidths$reduce : tableCellMinWidth;
     return /*#__PURE__*/React.createElement("div", {
       key: type,
       style: {
@@ -160,7 +164,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`
@@ -170,7 +176,7 @@ export const ColumnControls = ({
       tableLocalId: localId || '',
       indexes: indexes,
       forceDefaultHandle: isHover ? false : isColumnsSelected,
-      previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : tableCellMinWidth,
+      previewWidth: previewWidth,
       previewHeight: previewHeight,
       appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
       onClick: handleClick,

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

@@ -4,18 +4,12 @@ import { ColumnDropTarget } from './ColumnDropTarget';
 export const ColumnDropTargets = ({
   tableRef,
   tableHeight,
-  stickyTop,
   localId,
-  rowHeights,
   colWidths
 }) => {
-  var _rowHeights$;
   if (!tableRef) {
     return null;
   }
-  const firstRow = tableRef.querySelector('tr');
-  const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
-  const marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS,
     contentEditable: false
@@ -29,7 +23,7 @@ export const ColumnDropTargets = ({
       localId: localId,
       width: width,
       height: tableHeight,
-      marginTop: marginTop
+      marginTop: 0
     });
   })));
 };

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

@@ -112,10 +112,8 @@ export const TableFloatingColumnControls = ({
     isDragging: isDragging
   }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
-    stickyTop: tableActive ? stickyTop : undefined,
     tableHeight: tableRect.height,
     localId: currentNodeLocalId,
-    rowHeights: rowHeights,
     colWidths: colWidths
   }));
 };