@atlaskit/editor-plugin-table 7.1.0 → 7.1.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(() => {
@@ -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`

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
   }));
 };

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

@@ -74,7 +74,10 @@ const DragControlsComponent = ({
       }
     });
   }, [editorView]);
-  const onMouseUp = useCallback(() => {
+  const onMouseUp = useCallback(event => {
+    if (event.shiftKey) {
+      return;
+    }
     toggleDragMenu(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex)(editorView.state, editorView.dispatch);
   }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex]);
   const rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
@@ -136,7 +139,9 @@ const DragControlsComponent = ({
         gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
         gridColumn: '2',
         // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
+        display: 'flex',
         width: '9px',
+        height: '100%',
         position: 'relative',
         right: '-0.5px'
       },

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

@@ -204,7 +204,9 @@ const tableWrapperStyles = () => {
 };
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
-export const tableStyles = props => css`
+export const tableStyles = props => {
+  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4;
+  return css`
   .${ClassName.LAYOUT_BUTTON} button {
     background: ${`var(--ds-background-neutral, ${N20A})`};
     color: ${`var(--ds-icon, ${N300})`};
@@ -223,8 +225,8 @@ export const tableStyles = props => css`
     ${hoveredDeleteButton()};
     ${hoveredCell()};
     ${hoveredWarningCell};
-    ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine()};
-    ${resizeHandle()};
+    ${((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && insertLine()};
+    ${resizeHandle((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop)};
     ${rangeSelectionStyles};
 
     .${ClassName.LAST_ITEM_IN_CELL} {
@@ -434,7 +436,7 @@ export const tableStyles = props => css`
     }
 
     ${sentinelStyles}
-    ${OverflowShadow()}
+    ${OverflowShadow((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop)}
     ${stickyScrollbarStyles(props.featureFlags)}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
@@ -653,6 +655,22 @@ export const tableStyles = props => css`
       }
     }
 
+    .${ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE} {
+      background: none;
+      border: none;
+      outline: none;
+      position: absolute;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      :focus {
+        outline: none;
+      }
+    }
+
     .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
       cursor: grab;
       pointer-events: auto;
@@ -739,7 +757,7 @@ export const tableStyles = props => css`
       position: relative;
       float: right;
       margin-left: ${getBooleanFF('platform.editor.custom-table-width') ? akEditorTableToolbarSize : akEditorTableToolbarSize - 1}px;
-      top: ${getBooleanFF('platform.editor.table.drag-and-drop') ? 0 : akEditorTableToolbarSize}px;
+      top: ${(_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : akEditorTableToolbarSize}px;
       width: ${akEditorTableNumberColumnWidth + 1}px;
       box-sizing: border-box;
     }
@@ -969,6 +987,7 @@ export const tableStyles = props => css`
 
   ${shadowSentinelStyles}
 `;
+};
 export const tableFullPageEditorStyles = css`
   .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
     margin-left: 0;