@atlaskit/editor-plugin-table 7.1.0 → 7.1.2

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;
@@ -130,13 +133,16 @@ const DragControlsComponent = ({
     const currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
     const isSelecting = isRowsSelected && !isHover;
     const indexes = isRowsSelected ? isHover ? rowIndexes : selectedRowIndexes : rowIndexes;
+    const previewHeight = rowHeights.reduce((sum, v, i) => sum + v * (indexes.includes(i) ? 1 : 0), 0);
     return /*#__PURE__*/React.createElement("div", {
       key: type,
       style: {
         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'
       },
@@ -148,7 +154,7 @@ const DragControlsComponent = ({
       indexes: indexes,
       forceDefaultHandle: isHover ? false : isRowsSelected,
       previewWidth: tableWidth,
-      previewHeight: rowHeights[rowIndex],
+      previewHeight: previewHeight,
       appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
       onClick: handleClick,
       onMouseOver: handleMouseOver,

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;

package/dist/es2019/ui/consts.js

@@ -1,6 +1,5 @@
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorTableBorder, akEditorTableBorderSelected, akEditorTableCellBlanketDeleted, akEditorTableCellBlanketSelected, akEditorTableHeaderCellBackground, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B200, N0, N20, N200, N20A, N300, R300, R400, R75 } from '@atlaskit/theme/colors';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
 
@@ -50,7 +49,8 @@ export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
 export const resizeLineWidth = 2;
 export const resizeHandlerZIndex = columnControlsZIndex + akRichMediaResizeZIndex;
 export const contextualMenuTriggerSize = 16;
-export const contextualMenuDropdownWidth = getBooleanFF('platform.editor.table.drag-and-drop') ? 250 : 180;
+export const contextualMenuDropdownWidth = 180;
+export const contextualMenuDropdownWidthDnD = 250;
 export const stickyRowZIndex = resizeHandlerZIndex + 2;
 export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;

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

@@ -264,7 +264,7 @@ export const DeleteButton = () => css`
     cursor: pointer;
   }
 `;
-export const OverflowShadow = () => css`
+export const OverflowShadow = isDragAndDropEnabled => css`
   .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
     height: calc(100% - ${tableMarginTop}px);
@@ -306,14 +306,14 @@ export const OverflowShadow = () => css`
     left: ${getBooleanFF('platform.editor.custom-table-width') ? `calc(100% - ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth}px)` : `calc(100% - ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide - 10 : -2}px)`};
   }
   .${ClassName.WITH_CONTROLS} {
-    ${overflowShadowWidhoutDnD()}
+    ${overflowShadowWidhoutDnD(isDragAndDropEnabled)}
     .${ClassName.TABLE_LEFT_SHADOW} {
       border-left: 1px solid ${tableBorderColor};
     }
   }
 `;
-const overflowShadowWidhoutDnD = () => {
-  if (!getBooleanFF('platform.editor.table.drag-and-drop')) {
+const overflowShadowWidhoutDnD = isDragAndDropEnabled => {
+  if (!isDragAndDropEnabled) {
     return css`
       .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
         height: calc(100% - ${tableMarginTopWithControl}px);
@@ -680,8 +680,8 @@ const getLastColumnResizerOverrides = () => {
         }
       ` : '';
 };
-const resizeHandleOverrides = () => {
-  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
+const resizeHandleOverrides = isDragAndDropEnabled => {
+  if (isDragAndDropEnabled) {
     return css`
       th.${ClassName.WITH_RESIZE_LINE}::before,
         td.${ClassName.WITH_RESIZE_LINE}::before {
@@ -754,7 +754,7 @@ const resizeHandleOverrides = () => {
     }
   `;
 };
-export const resizeHandle = () => css`
+export const resizeHandle = isDragAndDropEnabled => css`
   .${ClassName.TABLE_CONTAINER} {
     .${ClassName.RESIZE_HANDLE_DECORATION} {
       background-color: transparent;
@@ -769,7 +769,7 @@ export const resizeHandle = () => css`
 
     ${getLastColumnResizerOverrides()}
 
-    ${resizeHandleOverrides()}
+    ${resizeHandleOverrides(isDragAndDropEnabled)}
 
     table
       tr:first-of-type

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

@@ -18,7 +18,7 @@ import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizi
 import { getClosestSelectionRect } from '../toolbar';
 import { deleteRows } from '../transforms';
 import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
-import { getSelectedColumnIndexes } from './index';
+import { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
 const canDecrease = (index, min = 0) => index !== undefined && index > min;
 const canIncrease = (index, max = 0) => index !== undefined && index < max;
 const isDistributeColumnsEnabled = state => {
@@ -53,34 +53,38 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
   }];
   const moveOptions = direction === 'row' ? [{
     label: 'up',
-    offset: -1,
-    canMove: index => canDrag && canDecrease(index),
     icon: ArrowUpIcon,
-    keymap: moveRowUp
+    keymap: moveRowUp,
+    canMove: selectionRect => canDrag && canDecrease(selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.top),
+    getOriginIndexes: getSelectedRowIndexes,
+    getTargetIndex: selectionRect => selectionRect.top - 1
   }, {
     label: 'down',
-    offset: 1,
-    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: ArrowDownIcon,
-    keymap: moveRowDown
+    keymap: moveRowDown,
+    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: getSelectedRowIndexes,
+    getTargetIndex: selectionRect => selectionRect.bottom
   }] : [{
     label: 'left',
-    offset: -1,
-    canMove: index => canDrag && canDecrease(index),
     icon: ArrowLeftIcon,
-    keymap: moveColumnLeft
+    keymap: moveColumnLeft,
+    canMove: selectionRect => canDrag && canDecrease(selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left),
+    getOriginIndexes: getSelectedColumnIndexes,
+    getTargetIndex: selectionRect => selectionRect.left - 1
   }, {
     label: 'right',
-    offset: 1,
-    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: ArrowRightIcon,
-    keymap: moveColumnRight
+    keymap: moveColumnRight,
+    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: getSelectedColumnIndexes,
+    getTargetIndex: selectionRect => selectionRect.right
   }];
   const sortOptions = direction === 'column' ? [{
     label: 'increasing',
@@ -154,19 +158,20 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
     keymap: direction === 'row' ? tooltip(deleteRow) : tooltip(deleteColumn)
   }, ...moveOptions.map(({
     label,
-    offset,
     canMove,
     icon,
-    keymap
+    keymap,
+    getOriginIndexes,
+    getTargetIndex
   }) => ({
     id: `move_${direction}_${label}`,
     title: `Move ${direction} ${label}`,
-    disabled: !canMove(index),
+    disabled: !canMove(selectionRect),
     icon,
     onClick: (state, dispatch) => {
-      if (canMove(index)) {
+      if (canMove(selectionRect)) {
         requestAnimationFrame(() => {
-          moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, `table-${direction}`, [index], index + offset)(editorView.state, editorView.dispatch);
+          moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, `table-${direction}`, getOriginIndexes(selectionRect), getTargetIndex(selectionRect))(editorView.state, editorView.dispatch);
         });
         return true;
       }

package/dist/esm/event-handlers.js

@@ -10,7 +10,7 @@ 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';
 var isFocusingCalendar = function isFocusingCalendar(event) {
@@ -25,12 +25,15 @@ var isFocusingFloatingToolbar = function isFocusingFloatingToolbar(event) {
 var isFocusingDragHandles = function isFocusingDragHandles(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button') && event.relatedTarget.getAttribute('draggable') === 'true';
 };
+var isFocusingDragHandlesClickableZone = function isFocusingDragHandlesClickableZone(event) {
+  return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button') && event.relatedTarget.classList.contains(ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE);
+};
 export var handleBlur = function handleBlur(view, event) {
   var state = view.state,
     dispatch = view.dispatch;
   // 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/esm/pm-plugins/drag-and-drop/commands-with-analytics.js

@@ -39,6 +39,7 @@ export var moveSourceWithAnalytics = function moveSourceWithAnalytics(editorAnal
   return function (inputMethod, sourceType, sourceIndexes, targetIndex, tr) {
     return withEditorAnalyticsAPI(function (_ref2) {
       var selection = _ref2.selection;
+      var direction = sourceIndexes[0] > targetIndex ? -1 : 1;
       var _getSelectedTableInfo2 = getSelectedTableInfo(selection),
         totalRowCount = _getSelectedTableInfo2.totalRowCount,
         totalColumnCount = _getSelectedTableInfo2.totalColumnCount;
@@ -52,8 +53,8 @@ export var moveSourceWithAnalytics = function moveSourceWithAnalytics(editorAnal
           // 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.apply(Math, _toConsumableArray(sourceIndexes.map(function (v) {
-            return targetIndex - v;
-          }))),
+            return 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: totalRowCount,
@@ -80,15 +81,14 @@ export var moveSourceWithAnalyticsViaShortcut = function moveSourceWithAnalytics
       }
       var isRow = sourceType === 'table-row';
       var 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;
       }
-      var 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)
-      var targetIndex = sourceIndex + direction;
+      var targetIndex = Math[direction < 0 ? 'min' : 'max'].apply(Math, _toConsumableArray(selectedIndexes)) + direction;
 
       // We can move only if targetIndex is a positive number and is not higher than the total number of rows/columns.
       var _getSelectedTableInfo3 = getSelectedTableInfo(selection),
@@ -100,7 +100,7 @@ export var moveSourceWithAnalyticsViaShortcut = function moveSourceWithAnalytics
       }
 
       // We can move only if there are no merged cells in the source or target row/column
-      var hasMergedCellsInSource = isRow ? hasMergedCellsInRow(sourceIndex)(selection) : hasMergedCellsInColumn(sourceIndex)(selection);
+      var hasMergedCellsInSource = isRow ? hasMergedCellsInRow(selectedIndexes)(selection) : hasMergedCellsInColumn(selectedIndexes)(selection);
       if (hasMergedCellsInSource) {
         return false;
       }
@@ -108,7 +108,7 @@ export var moveSourceWithAnalyticsViaShortcut = function moveSourceWithAnalytics
       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/esm/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';
@@ -74,15 +72,10 @@ export var moveSource = function moveSource(sourceType, sourceIndexes, targetInd
     if (sourceIndexes.includes(targetIndex)) {
       return nextTr.setMeta('addToHistory', false);
     }
-    var anchor = nextTr.selection.anchor;
-    var selectStartOfTable = function selectStartOfTable(newTr) {
-      return newTr.setSelection(TextSelection.create(newTr.doc, anchor));
-    };
-    var 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);
+    var move = sourceType === 'table-row' ? moveRow : moveColumn;
+    return move(state, sourceIndexes, targetIndex, {
+      selectAfterMove: true
+    })(nextTr);
   });
 };
 export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {

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

@@ -55,10 +55,7 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
         indexes = _ref6.indexes;
 
       // 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;
       }
       var _getTablePluginState = getTablePluginState(editorView.state),

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

@@ -30,11 +30,6 @@ export var getDraggableDataFromEvent = function getDraggableDataFromEvent(_ref)
   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;
-  }
   var 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/esm/types.js

@@ -93,6 +93,7 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   DRAG_COLUMN_DROP_TARGET_CONTROLS: "".concat(tablePrefixSelector, "-col-drop-target-controls"),
   DRAG_COLUMN_CONTROLS_INNER: "".concat(tablePrefixSelector, "-col-controls__inner"),
   DRAG_HANDLE_BUTTON_CONTAINER: "".concat(tablePrefixSelector, "-drag-handle-button-container"),
+  DRAG_HANDLE_BUTTON_CLICKABLE_ZONE: "".concat(tablePrefixSelector, "-drag-handle-button-clickable-zone"),
   DRAG_CORNER_BUTTON: "".concat(tablePrefixSelector, "-drag-corner-button"),
   DRAG_CORNER_BUTTON_INNER: "".concat(tablePrefixSelector, "-drag-corner-button-inner"),
   /** disabled classes */

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

@@ -11,6 +11,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';
 var DragHandleComponent = function DragHandleComponent(_ref) {
@@ -42,11 +43,13 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     hoveredColumns = _getPluginState.hoveredColumns,
     hoveredRows = _getPluginState.hoveredRows;
   var selection = editorView.state.selection;
-  var isRowHandleHovered = direction === 'row' && hoveredRows.length > 0;
-  var isColumnHandleHovered = direction === 'column' && hoveredColumns.length > 0;
+  var isRow = direction === 'row';
+  var isColumn = direction === 'column';
+  var isRowHandleHovered = isRow && hoveredRows.length > 0;
+  var isColumnHandleHovered = isColumn && hoveredColumns.length > 0;
   var hasMergedCells = useMemo(function () {
-    return direction === 'row' ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection);
-  }, [indexes, direction, selection]);
+    return isRow ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection);
+  }, [indexes, isRow, selection]);
   var handleIconProps = {
     forceDefaultHandle: forceDefaultHandle,
     isColumnHandleHovered: isColumnHandleHovered,
@@ -83,7 +86,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
                 // be generated.
                 container.style.left = "-".concat(rect.width - 0.0001, "px");
               }
-              if (direction === 'row') {
+              if (isRow) {
                 return {
                   x: 12,
                   y: rect.height / 2
@@ -107,17 +110,32 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
         }
       });
     }
-  }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells, _canDrag]);
-  var showDragMenuAnchorId = direction === 'row' ? 'drag-handle-button-row' : 'drag-handle-button-column';
+  }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells, _canDrag]);
+  var 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% - ".concat(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% - ".concat(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, _defineProperty({}, 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: function onMouseUp(e) {

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

@@ -37,7 +37,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 var ContextualMenu = /*#__PURE__*/function (_Component) {
@@ -530,7 +530,7 @@ export var ContextualMenu = /*#__PURE__*/function (_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/esm/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';
 var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
@@ -19,7 +19,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     getEditorContainerWidth = _ref.getEditorContainerWidth;
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   var _getPluginState = getPluginState(editorView.state),
-    targetCellPosition = _getPluginState.targetCellPosition;
+    targetCellPosition = _getPluginState.targetCellPosition,
+    isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
@@ -42,7 +43,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     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.
     ,
@@ -51,7 +52,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     offset: [-7, 0],
     stick: true
   }, jsx("div", {
-    css: tablePopupStyles
+    css: tablePopupStyles(isDragAndDropEnabled)
   }, jsx(ContextualMenu, {
     editorView: editorView,
     offset: [contextualMenuTriggerSize / 2, -contextualMenuTriggerSize],

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

@@ -4,7 +4,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 var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
 };
@@ -12,4 +12,6 @@ export var elementBeforeIconStyles = css(_templateObject2 || (_templateObject2 =
 
 // TODO Delete this comment after verifying space token -> previous value `padding: 8px`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
-export var tablePopupStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+};

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

@@ -97,9 +97,12 @@ export var ColumnControls = function ColumnControls(_ref) {
       clearHoverSelection()(state, dispatch);
     }
   }, [editorView, tableActive]);
-  var handleMouseUp = useCallback(function () {
+  var handleMouseUp = useCallback(function (event) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
+    if (event.shiftKey) {
+      return;
+    }
     toggleDragMenu(undefined, 'column', colIndex)(state, dispatch);
   }, [editorView, colIndex]);
   var colIndexes = useMemo(function () {
@@ -124,7 +127,7 @@ export var ColumnControls = function ColumnControls(_ref) {
     };
   }, [tableWrapper, handleScroll]);
   var generateHandleByType = function generateHandleByType(type) {
-    var _rowHeights$reduce, _colWidths;
+    var _rowHeights$reduce, _colWidths$reduce;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
       return null;
     }
@@ -145,6 +148,9 @@ export var ColumnControls = function ColumnControls(_ref) {
 
     // this indexes are used to calculate the drag and drop source
     var indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
+    var previewWidth = (_colWidths$reduce = colWidths === null || colWidths === void 0 ? void 0 : colWidths.reduce(function (sum, v, i) {
+      return 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: {
@@ -154,7 +160,9 @@ export var ColumnControls = function ColumnControls(_ref) {
         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-".concat(isSelecting ? selectedColIndexes[0] : colIndex, "-drag-handle")
@@ -164,7 +172,7 @@ export var ColumnControls = function ColumnControls(_ref) {
       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,