@atlaskit/editor-plugin-table 5.4.15 → 5.4.16

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 5.4.16
+
+### Patch Changes
+
+- [#58843](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58843) [`630177f9bf2e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/630177f9bf2e) - [ux] add selected handle and also keep hover handle
+
 ## 5.4.15
 
 ### Patch Changes

package/dist/cjs/plugins/table/ui/DragHandle/HandleIconComponent.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _icons = require("../icons");
 var HandleIconComponent = exports.HandleIconComponent = function HandleIconComponent(props) {
   var direction = props.direction,
+    forceDefaultHandle = props.forceDefaultHandle,
     isDragMenuOpen = props.isDragMenuOpen,
     isRowHandleHovered = props.isRowHandleHovered,
     isColumnHandleHovered = props.isColumnHandleHovered,
@@ -19,11 +20,8 @@ var HandleIconComponent = exports.HandleIconComponent = function HandleIconCompo
   var isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
   var isCurrentRowOrColumnSelected = isCurrentRowSelected || isCurrentColumnSelected;
   var isDragMenuOpenOnCurrentRowOrColumn = isDragMenuOpen && dragMenuDirection === direction && isCurrentRowOrColumnSelected;
-  var showNormalHandle = hasMergedCells ? /*#__PURE__*/_react.default.createElement(_icons.DragHandleDisabledIcon, null) : /*#__PURE__*/_react.default.createElement(_icons.DragHandleIcon, null);
-
-  // hoverred handle or open drag menu
-  if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
-    return showNormalHandle;
+  if (forceDefaultHandle || isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
+    return hasMergedCells ? /*#__PURE__*/_react.default.createElement(_icons.DragHandleDisabledIcon, null) : /*#__PURE__*/_react.default.createElement(_icons.DragHandleIcon, null);
   }
   return /*#__PURE__*/_react.default.createElement(_icons.MinimisedHandleIcon, null);
 };

package/dist/cjs/plugins/table/ui/DragHandle/index.js

@@ -28,6 +28,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     indexes = _ref.indexes,
+    _ref$forceDefaultHand = _ref.forceDefaultHandle,
+    forceDefaultHandle = _ref$forceDefaultHand === void 0 ? false : _ref$forceDefaultHand,
     previewWidth = _ref.previewWidth,
     previewHeight = _ref.previewHeight,
     onMouseOver = _ref.onMouseOver,
@@ -59,6 +61,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var handleIconProps = {
     hasMergedCells: hasMergedCells,
     direction: direction,
+    forceDefaultHandle: forceDefaultHandle,
     isDragMenuOpen: isDragMenuOpen,
     isRowHandleHovered: isRowHandleHovered,
     isColumnHandleHovered: isColumnHandleHovered,

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

@@ -10,11 +10,14 @@ var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _commands = require("../../../commands");
 var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
+var _pluginFactory = require("../../../pm-plugins/drag-and-drop/plugin-factory");
 var _types = require("../../../types");
 var _utils2 = require("../../../utils");
 var _DragHandle = require("../../DragHandle");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 var getSelectedColumns = function getSelectedColumns(selection) {
   if (selection instanceof _editorTables.CellSelection && selection.isColSelection()) {
     var rect = (0, _utils.getSelectionRect)(selection);
@@ -26,7 +29,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce, _colWidths;
+  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -46,13 +49,6 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   var columnParams = (0, _utils2.getRowsParams)(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   var selectedColIndexes = getSelectedColumns(editorView.state.selection);
-  var gridColumnPosition = (0, _react.useMemo)(function () {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedColIndexes.includes(colIndex)) {
-      return "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length);
-    }
-    return "".concat(colIndex + 1, " / span 1");
-  }, [colIndex, selectedColIndexes]);
   var firstRow = tableRef.querySelector('tr');
   var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   var marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
@@ -104,6 +100,63 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
     return sum + cur;
   }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
+  var generateHandleByType = (0, _react.useCallback)(function (type) {
+    var _colWidths;
+    if (!hoveredCell) {
+      return null;
+    }
+    var _getDragDropPluginSta = (0, _pluginFactory.getPluginState)(editorView.state),
+      isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen,
+      dragMenuIndex = _getDragDropPluginSta.dragMenuIndex,
+      dragMenuDirection = _getDragDropPluginSta.dragMenuDirection;
+    var isHover = type === 'hover';
+    var isHoveredOnSelectedColumn = isDragMenuOpen && dragMenuDirection === 'column' && dragMenuIndex === colIndex;
+    var showCondition = isHover ? !isHoveredOnSelectedColumn && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : isDragMenuOpen && dragMenuDirection === 'column';
+    if (!showCondition) {
+      return null;
+    }
+    var selectedColumnPosition = "".concat(dragMenuIndex + 1, " / span ").concat(selectedColIndexes.length);
+    var gridColumnPosition = selectedColIndexes.includes(colIndex) ? "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length) : "".concat(colIndex + 1, " / span 1");
+    var selectedApprearance = isInDanger ? 'danger' : 'selected';
+    var hoveredAppearance = selectedColIndexes.includes(colIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
+    return showCondition && /*#__PURE__*/_react.default.createElement("div", {
+      key: type,
+      style: {
+        gridColumn: isHover ? gridColumnPosition : selectedColumnPosition,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 'fit-content',
+        placeSelf: 'center',
+        zIndex: 99
+      },
+      "data-column-control-index": hoveredCell.colIndex,
+      "data-testid": isHover ? 'table-floating-column-control' : 'table-floating-column-control-selected'
+    }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+      direction: "column",
+      tableLocalId: localId || '',
+      indexes: isHover ? colIndexes : selectedColIndexes,
+      forceDefaultHandle: !isHover,
+      previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 48,
+      previewHeight: previewHeight,
+      appearance: isHover ? hoveredAppearance : selectedApprearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      onMouseUp: handleMouseUp,
+      editorView: editorView
+    }));
+  }, [colIndex, previewHeight, colWidths, colIndexes, editorView, handleClick, handleMouseOut, handleMouseOver, handleMouseUp, hoveredCell, isInDanger, localId, selectedColIndexes]);
+  var columnHandles = (0, _react.useCallback)(function (hoveredCell) {
+    if (!hoveredCell) {
+      return null;
+    }
+    if (hoveredCell.colIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+    var sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
+    return hoveredCell.colIndex < selectedColIndexes[0] ? sortedHandles : sortedHandles.reverse();
+  }, [generateHandleByType, selectedColIndexes]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
@@ -132,30 +185,6 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
         right: '0'
       } : {}
     }));
-  }), tableActive && !isResizing && isTableHovered && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      gridColumn: gridColumnPosition,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: 'fit-content',
-      placeSelf: 'center',
-      zIndex: 99
-    },
-    "data-column-control-index": hoveredCell.colIndex,
-    "data-testid": "table-floating-column-control"
-  }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
-    direction: "column",
-    tableLocalId: localId || '',
-    indexes: colIndexes,
-    previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 48,
-    previewHeight: previewHeight,
-    appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
-    onClick: handleClick,
-    onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut,
-    onMouseUp: handleMouseUp,
-    editorView: editorView
-  }))));
+  }), tableActive && !isResizing && columnHandles(hoveredCell)));
 };
 var _default = exports.default = ColumnControls;

package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -14,7 +14,8 @@ var _utils = require("@atlaskit/editor-tables/utils");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _commands = require("../../../commands");
 var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
-var _pluginFactory = require("../../../pm-plugins/plugin-factory");
+var _pluginFactory = require("../../../pm-plugins/drag-and-drop/plugin-factory");
+var _pluginFactory2 = require("../../../pm-plugins/plugin-factory");
 var _types = require("../../../types");
 var _utils2 = require("../../../utils");
 var _consts = require("../../consts");
@@ -22,6 +23,8 @@ var _DragHandle = require("../../DragHandle");
 var _RowDropTarget = _interopRequireDefault(require("../RowDropTarget"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 var getSelectedRows = function getSelectedRows(selection) {
   if (selection instanceof _editorTables.CellSelection && selection.isRowSelection()) {
     var rect = (0, _utils.getSelectionRect)(selection);
@@ -68,7 +71,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         if (!indexes || !localId || type !== 'table-row') {
           return false;
         }
-        var _getTablePluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+        var _getTablePluginState = (0, _pluginFactory2.getPluginState)(editorView.state),
           tableNode = _getTablePluginState.tableNode;
         // If the draggable localId is the same as the current selected table localId then we will allow the monitor
         // watch for changes
@@ -86,13 +89,6 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     (0, _commands2.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]);
   var rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
-  var gridRowPosition = (0, _react.useMemo)(function () {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedRowIndexes.includes(rowIndex)) {
-      return "".concat(selectedRowIndexes[0] + 1, " / span ").concat(selectedRowIndexes.length);
-    }
-    return "".concat(rowIndex + 1, " / span 1");
-  }, [rowIndex, selectedRowIndexes]);
   var handleMouseOut = (0, _react.useCallback)(function () {
     if (tableActive) {
       var state = editorView.state,
@@ -119,6 +115,62 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
   var handleClick = (0, _react.useCallback)(function (e) {
     selectRow(rowIndex, e === null || e === void 0 ? void 0 : e.shiftKey);
   }, [rowIndex, selectRow]);
+  var generateHandleByType = (0, _react.useCallback)(function (type) {
+    if (!hoveredCell) {
+      return null;
+    }
+    var _getDragDropPluginSta = (0, _pluginFactory.getPluginState)(editorView.state),
+      isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen,
+      dragMenuIndex = _getDragDropPluginSta.dragMenuIndex,
+      dragMenuDirection = _getDragDropPluginSta.dragMenuDirection;
+    var isHover = type === 'hover';
+    var isHoveredOnSelectedRow = isDragMenuOpen && dragMenuDirection === 'row' && dragMenuIndex === rowIndex;
+    var showCondition = isHover ? !isHoveredOnSelectedRow && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : isDragMenuOpen && dragMenuDirection === 'row' && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
+    if (!showCondition) {
+      return null;
+    }
+    var gridRowPosition =
+    // if more than one row is selected, ensure the handle spans over the selected range
+    selectedRowIndexes.includes(rowIndex) ? "".concat(selectedRowIndexes[0] + 1, " / span ").concat(selectedRowIndexes.length) : "".concat(rowIndex + 1, " / span 1");
+    var selectedRowPosition = "".concat(dragMenuIndex + 1, " / span ").concat(selectedRowIndexes.length);
+    var selectedApprearance = isInDanger ? 'danger' : 'selected';
+    var hoveredAppearance = selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
+    return showCondition && /*#__PURE__*/_react.default.createElement("div", {
+      key: type,
+      style: {
+        gridRow: isHover ? gridRowPosition : selectedRowPosition,
+        gridColumn: '2',
+        display: 'flex',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      "data-testid": isHover ? 'table-floating-row-drag-handle' : 'table-floating-row-control-selected'
+    }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+      direction: "row",
+      tableLocalId: currentNodeLocalId,
+      indexes: isHover ? rowIndexes : selectedRowIndexes,
+      forceDefaultHandle: !isHover,
+      previewWidth: tableWidth,
+      previewHeight: rowHeights[rowIndex],
+      appearance: isHover ? hoveredAppearance : selectedApprearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      onMouseUp: onMouseUp,
+      editorView: editorView
+    }));
+  }, [currentNodeLocalId, editorView, handleClick, handleMouseOut, handleMouseOver, hoveredCell, isInDanger, onMouseUp, rowHeights, rowIndex, rowIndexes, selectedRowIndexes, tableWidth]);
+  var rowHandles = (0, _react.useCallback)(function (hoveredCell) {
+    if (!hoveredCell) {
+      return null;
+    }
+    if (hoveredCell.rowIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+    var sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
+    return hoveredCell.rowIndex < selectedRowIndexes[0] ? sortedHandles : sortedHandles.reverse();
+  }, [generateHandleByType, selectedRowIndexes]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.DRAG_ROW_CONTROLS,
     style: {
@@ -158,27 +210,6 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         left: "var(--ds-space-negative-100, -8px)"
       }
     }));
-  }), !isResizing && isTableHovered && Number.isFinite(rowIndex) && /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      gridRow: gridRowPosition,
-      gridColumn: '2',
-      display: 'flex',
-      height: '100%',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    "data-testid": "table-floating-row-drag-handle"
-  }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
-    tableLocalId: currentNodeLocalId,
-    indexes: rowIndexes,
-    previewWidth: tableWidth,
-    previewHeight: rowHeights[rowIndex],
-    appearance: selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
-    onClick: handleClick,
-    onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut,
-    onMouseUp: onMouseUp,
-    editorView: editorView
-  })));
+  }), !isResizing && Number.isFinite(rowIndex) && rowHandles(hoveredCell));
 };
 var DragControls = exports.DragControls = (0, _reactIntlNext.injectIntl)(DragControlsComponent);

package/dist/es2019/plugins/table/ui/DragHandle/HandleIconComponent.js

@@ -3,6 +3,7 @@ import { DragHandleDisabledIcon, DragHandleIcon, MinimisedHandleIcon } from '../
 export const HandleIconComponent = props => {
   const {
     direction,
+    forceDefaultHandle,
     isDragMenuOpen,
     isRowHandleHovered,
     isColumnHandleHovered,
@@ -14,11 +15,8 @@ export const HandleIconComponent = props => {
   const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
   const isCurrentRowOrColumnSelected = isCurrentRowSelected || isCurrentColumnSelected;
   const isDragMenuOpenOnCurrentRowOrColumn = isDragMenuOpen && dragMenuDirection === direction && isCurrentRowOrColumnSelected;
-  const showNormalHandle = hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
-
-  // hoverred handle or open drag menu
-  if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
-    return showNormalHandle;
+  if (forceDefaultHandle || isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
+    return hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
   }
   return /*#__PURE__*/React.createElement(MinimisedHandleIcon, null);
 };

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

@@ -14,6 +14,7 @@ export const DragHandle = ({
   direction = 'row',
   appearance = 'default',
   indexes,
+  forceDefaultHandle = false,
   previewWidth,
   previewHeight,
   onMouseOver,
@@ -45,6 +46,7 @@ export const DragHandle = ({
   const handleIconProps = {
     hasMergedCells,
     direction,
+    forceDefaultHandle,
     isDragMenuOpen,
     isRowHandleHovered,
     isColumnHandleHovered,

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

@@ -1,8 +1,11 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 import React, { useCallback, useMemo } from 'react';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -30,19 +33,12 @@ export const ColumnControls = ({
   hasHeaderColumn,
   isTableHovered
 }) => {
-  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce, _colWidths;
+  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce;
   const widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(width => width ? `${width - 1}px` : '0px').join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
   // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
   const columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   const colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   const selectedColIndexes = getSelectedColumns(editorView.state.selection);
-  const gridColumnPosition = useMemo(() => {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedColIndexes.includes(colIndex)) {
-      return `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`;
-    }
-    return `${colIndex + 1} / span 1`;
-  }, [colIndex, selectedColIndexes]);
   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;
@@ -102,6 +98,64 @@ export const ColumnControls = ({
     return [colIndex];
   }, [colIndex]);
   const previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce((sum, cur) => sum + cur, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
+  const generateHandleByType = useCallback(type => {
+    var _colWidths;
+    if (!hoveredCell) {
+      return null;
+    }
+    const {
+      isDragMenuOpen,
+      dragMenuIndex,
+      dragMenuDirection
+    } = getDragDropPluginState(editorView.state);
+    const isHover = type === 'hover';
+    const isHoveredOnSelectedColumn = isDragMenuOpen && dragMenuDirection === 'column' && dragMenuIndex === colIndex;
+    const showCondition = isHover ? !isHoveredOnSelectedColumn && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : isDragMenuOpen && dragMenuDirection === 'column';
+    if (!showCondition) {
+      return null;
+    }
+    const selectedColumnPosition = `${dragMenuIndex + 1} / span ${selectedColIndexes.length}`;
+    const gridColumnPosition = selectedColIndexes.includes(colIndex) ? `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}` : `${colIndex + 1} / span 1`;
+    const selectedApprearance = isInDanger ? 'danger' : 'selected';
+    const hoveredAppearance = selectedColIndexes.includes(colIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
+    return showCondition && /*#__PURE__*/React.createElement("div", {
+      key: type,
+      style: {
+        gridColumn: isHover ? gridColumnPosition : selectedColumnPosition,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 'fit-content',
+        placeSelf: 'center',
+        zIndex: 99
+      },
+      "data-column-control-index": hoveredCell.colIndex,
+      "data-testid": isHover ? 'table-floating-column-control' : 'table-floating-column-control-selected'
+    }, /*#__PURE__*/React.createElement(DragHandle, {
+      direction: "column",
+      tableLocalId: localId || '',
+      indexes: isHover ? colIndexes : selectedColIndexes,
+      forceDefaultHandle: !isHover,
+      previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 48,
+      previewHeight: previewHeight,
+      appearance: isHover ? hoveredAppearance : selectedApprearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      onMouseUp: handleMouseUp,
+      editorView: editorView
+    }));
+  }, [colIndex, previewHeight, colWidths, colIndexes, editorView, handleClick, handleMouseOut, handleMouseOver, handleMouseUp, hoveredCell, isInDanger, localId, selectedColIndexes]);
+  const columnHandles = useCallback(hoveredCell => {
+    if (!hoveredCell) {
+      return null;
+    }
+    if (hoveredCell.colIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+    const sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
+    return hoveredCell.colIndex < selectedColIndexes[0] ? sortedHandles : sortedHandles.reverse();
+  }, [generateHandleByType, selectedColIndexes]);
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
@@ -129,30 +183,6 @@ export const ColumnControls = ({
     style: columnParams.length - 1 === index ? {
       right: '0'
     } : {}
-  }))), tableActive && !isResizing && isTableHovered && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
-    style: {
-      gridColumn: gridColumnPosition,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: 'fit-content',
-      placeSelf: 'center',
-      zIndex: 99
-    },
-    "data-column-control-index": hoveredCell.colIndex,
-    "data-testid": "table-floating-column-control"
-  }, /*#__PURE__*/React.createElement(DragHandle, {
-    direction: "column",
-    tableLocalId: localId || '',
-    indexes: colIndexes,
-    previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 48,
-    previewHeight: previewHeight,
-    appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
-    onClick: handleClick,
-    onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut,
-    onMouseUp: handleMouseUp,
-    editorView: editorView
-  }))));
+  }))), tableActive && !isResizing && columnHandles(hoveredCell)));
 };
 export default ColumnControls;

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

@@ -1,3 +1,5 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { CellSelection } from '@atlaskit/editor-tables';
@@ -5,6 +7,7 @@ import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights, getRowsParams, getSelectedRowIndexes } from '../../../utils';
@@ -74,13 +77,6 @@ const DragControlsComponent = ({
     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;
-  const gridRowPosition = useMemo(() => {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedRowIndexes.includes(rowIndex)) {
-      return `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}`;
-    }
-    return `${rowIndex + 1} / span 1`;
-  }, [rowIndex, selectedRowIndexes]);
   const handleMouseOut = useCallback(() => {
     if (tableActive) {
       const {
@@ -109,6 +105,63 @@ const DragControlsComponent = ({
   const handleClick = useCallback(e => {
     selectRow(rowIndex, e === null || e === void 0 ? void 0 : e.shiftKey);
   }, [rowIndex, selectRow]);
+  const generateHandleByType = useCallback(type => {
+    if (!hoveredCell) {
+      return null;
+    }
+    const {
+      isDragMenuOpen,
+      dragMenuIndex,
+      dragMenuDirection
+    } = getDragDropPluginState(editorView.state);
+    const isHover = type === 'hover';
+    const isHoveredOnSelectedRow = isDragMenuOpen && dragMenuDirection === 'row' && dragMenuIndex === rowIndex;
+    const showCondition = isHover ? !isHoveredOnSelectedRow && !selectedRowIndexes.includes(rowIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : isDragMenuOpen && dragMenuDirection === 'row' && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
+    if (!showCondition) {
+      return null;
+    }
+    const gridRowPosition =
+    // if more than one row is selected, ensure the handle spans over the selected range
+    selectedRowIndexes.includes(rowIndex) ? `${selectedRowIndexes[0] + 1} / span ${selectedRowIndexes.length}` : `${rowIndex + 1} / span 1`;
+    const selectedRowPosition = `${dragMenuIndex + 1} / span ${selectedRowIndexes.length}`;
+    const selectedApprearance = isInDanger ? 'danger' : 'selected';
+    const hoveredAppearance = selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
+    return showCondition && /*#__PURE__*/React.createElement("div", {
+      key: type,
+      style: {
+        gridRow: isHover ? gridRowPosition : selectedRowPosition,
+        gridColumn: '2',
+        display: 'flex',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      "data-testid": isHover ? 'table-floating-row-drag-handle' : 'table-floating-row-control-selected'
+    }, /*#__PURE__*/React.createElement(DragHandle, {
+      direction: "row",
+      tableLocalId: currentNodeLocalId,
+      indexes: isHover ? rowIndexes : selectedRowIndexes,
+      forceDefaultHandle: !isHover,
+      previewWidth: tableWidth,
+      previewHeight: rowHeights[rowIndex],
+      appearance: isHover ? hoveredAppearance : selectedApprearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      onMouseUp: onMouseUp,
+      editorView: editorView
+    }));
+  }, [currentNodeLocalId, editorView, handleClick, handleMouseOut, handleMouseOver, hoveredCell, isInDanger, onMouseUp, rowHeights, rowIndex, rowIndexes, selectedRowIndexes, tableWidth]);
+  const rowHandles = useCallback(hoveredCell => {
+    if (!hoveredCell) {
+      return null;
+    }
+    if (hoveredCell.rowIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+    const sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
+    return hoveredCell.rowIndex < selectedRowIndexes[0] ? sortedHandles : sortedHandles.reverse();
+  }, [generateHandleByType, selectedRowIndexes]);
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_ROW_CONTROLS,
     style: {
@@ -147,27 +200,6 @@ const DragControlsComponent = ({
       position: 'relative',
       left: "var(--ds-space-negative-100, -8px)"
     }
-  }))), !isResizing && isTableHovered && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
-    style: {
-      gridRow: gridRowPosition,
-      gridColumn: '2',
-      display: 'flex',
-      height: '100%',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    "data-testid": "table-floating-row-drag-handle"
-  }, /*#__PURE__*/React.createElement(DragHandle, {
-    tableLocalId: currentNodeLocalId,
-    indexes: rowIndexes,
-    previewWidth: tableWidth,
-    previewHeight: rowHeights[rowIndex],
-    appearance: selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
-    onClick: handleClick,
-    onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut,
-    onMouseUp: onMouseUp,
-    editorView: editorView
-  })));
+  }))), !isResizing && Number.isFinite(rowIndex) && rowHandles(hoveredCell));
 };
 export const DragControls = injectIntl(DragControlsComponent);

package/dist/esm/plugins/table/ui/DragHandle/HandleIconComponent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { DragHandleDisabledIcon, DragHandleIcon, MinimisedHandleIcon } from '../icons';
 export var HandleIconComponent = function HandleIconComponent(props) {
   var direction = props.direction,
+    forceDefaultHandle = props.forceDefaultHandle,
     isDragMenuOpen = props.isDragMenuOpen,
     isRowHandleHovered = props.isRowHandleHovered,
     isColumnHandleHovered = props.isColumnHandleHovered,
@@ -12,11 +13,8 @@ export var HandleIconComponent = function HandleIconComponent(props) {
   var isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
   var isCurrentRowOrColumnSelected = isCurrentRowSelected || isCurrentColumnSelected;
   var isDragMenuOpenOnCurrentRowOrColumn = isDragMenuOpen && dragMenuDirection === direction && isCurrentRowOrColumnSelected;
-  var showNormalHandle = hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
-
-  // hoverred handle or open drag menu
-  if (isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
-    return showNormalHandle;
+  if (forceDefaultHandle || isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
+    return hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
   }
   return /*#__PURE__*/React.createElement(MinimisedHandleIcon, null);
 };

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

@@ -18,6 +18,8 @@ export var DragHandle = function DragHandle(_ref) {
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     indexes = _ref.indexes,
+    _ref$forceDefaultHand = _ref.forceDefaultHandle,
+    forceDefaultHandle = _ref$forceDefaultHand === void 0 ? false : _ref$forceDefaultHand,
     previewWidth = _ref.previewWidth,
     previewHeight = _ref.previewHeight,
     onMouseOver = _ref.onMouseOver,
@@ -49,6 +51,7 @@ export var DragHandle = function DragHandle(_ref) {
   var handleIconProps = {
     hasMergedCells: hasMergedCells,
     direction: direction,
+    forceDefaultHandle: forceDefaultHandle,
     isDragMenuOpen: isDragMenuOpen,
     isRowHandleHovered: isRowHandleHovered,
     isColumnHandleHovered: isColumnHandleHovered,