@atlaskit/editor-plugin-table 5.4.16 → 5.4.18

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 5.4.18
+
+### Patch Changes
+
+- [#59374](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59374) [`7c5ff172f275`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7c5ff172f275) - Fix firefox issue with dragging when child element has pointer elements blocked
+- [#59400](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59400) [`92bff40b42a1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/92bff40b42a1) - revert changes to make drag handle visible when menu is open
+
+## 5.4.17
+
+### Patch Changes
+
+- [#59009](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59009) [`f7e9d874ff37`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f7e9d874ff37) - Fix table expand selection when `platform.editor.table-shift-click-selection-backward` FF is enabled
+- [#58768](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58768) [`a300aa54a8e9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a300aa54a8e9) - [ux] Fixes resize handle state when column is in danger
+
 ## 5.4.16
 
 ### Patch Changes

package/dist/cjs/plugins/table/commands/hover.js

@@ -106,7 +106,8 @@ var hoverTable = exports.hoverTable = function hoverTable(isInDanger, isSelected
         decorationSet: (0, _utils2.updatePluginStateDecorations)(state, decorations, _types.TableDecorations.TABLE_CONTROLS_HOVER),
         hoveredColumns: hoveredColumns,
         hoveredRows: hoveredRows,
-        isInDanger: isInDanger
+        isInDanger: isInDanger,
+        isWholeTableInDanger: isInDanger
       }
     };
   }, function (tr) {
@@ -119,7 +120,8 @@ var clearHoverSelection = exports.clearHoverSelection = function clearHoverSelec
       type: 'CLEAR_HOVER_SELECTION',
       data: {
         decorationSet: (0, _utils2.updatePluginStateDecorations)(state, [], _types.TableDecorations.ALL_CONTROLS_HOVER),
-        isInDanger: false
+        isInDanger: false,
+        isWholeTableInDanger: false
       }
     };
   });

package/dist/cjs/plugins/table/nodeviews/TableComponent.js

@@ -286,7 +286,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     _this.containerWidth = _containerWidth;
     _this.isInitialOverflowSent = false;
 
-    // store table size using previous full-width mode so can detect if it has changed
+    // store table size using previous full-width mode so can detect if it has changed.
     var isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
     _this.layoutSize = _this.tableNodeLayoutSize(_this.node, _containerWidth.width, {
       isFullWidthModeEnabled: isFullWidthModeEnabled

package/dist/cjs/plugins/table/nodeviews/TableResizer.js

@@ -105,7 +105,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
   var resizerMinWidth = getResizerMinWidth(node);
   var handleSize = getResizerHandleHeight(tableRef);
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
-    isInDanger = _getPluginState.isInDanger;
+    isWholeTableInDanger = _getPluginState.isWholeTableInDanger;
   var _useMeasureFramerate = (0, _analytics2.useMeasureFramerate)(),
     startMeasure = _useMeasureFramerate.startMeasure,
     endMeasure = _useMeasureFramerate.endMeasure,
@@ -252,7 +252,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
     isHandleVisible: isTableSelected,
-    appearance: isInDanger && isTableSelected ? 'danger' : undefined,
+    appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
     handleHighlight: "shadow",
     handleTooltipContent: formatMessage(_messages.tableMessages.resizeTable)
   }, children);

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

@@ -9,7 +9,6 @@ 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,
@@ -20,8 +19,11 @@ var HandleIconComponent = exports.HandleIconComponent = function HandleIconCompo
   var isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
   var isCurrentRowOrColumnSelected = isCurrentRowSelected || isCurrentColumnSelected;
   var isDragMenuOpenOnCurrentRowOrColumn = isDragMenuOpen && dragMenuDirection === direction && isCurrentRowOrColumnSelected;
-  if (forceDefaultHandle || isHandleHovered || isDragMenuOpenOnCurrentRowOrColumn) {
-    return hasMergedCells ? /*#__PURE__*/_react.default.createElement(_icons.DragHandleDisabledIcon, null) : /*#__PURE__*/_react.default.createElement(_icons.DragHandleIcon, null);
+  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;
   }
   return /*#__PURE__*/_react.default.createElement(_icons.MinimisedHandleIcon, null);
 };

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

@@ -11,12 +11,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _utils = require("@atlaskit/editor-common/utils");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview");
 var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
 var _pluginFactory2 = require("../../pm-plugins/plugin-factory");
 var _types = require("../../types");
-var _utils = require("../../utils");
+var _utils2 = require("../../utils");
 var _DragPreview = require("../DragPreview");
 var _HandleIconComponent = require("./HandleIconComponent");
 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); }
@@ -28,8 +29,6 @@ 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,
@@ -56,12 +55,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var isRowHandleHovered = direction === 'row' && hoveredRows.length > 0;
   var isColumnHandleHovered = direction === 'column' && hoveredColumns.length > 0;
   var hasMergedCells = (0, _react.useMemo)(function () {
-    return direction === 'row' ? (0, _utils.hasMergedCellsInRow)(indexes[0])(selection) : (0, _utils.hasMergedCellsInColumn)(indexes[0])(selection);
+    return direction === 'row' ? (0, _utils2.hasMergedCellsInRow)(indexes[0])(selection) : (0, _utils2.hasMergedCellsInColumn)(indexes[0])(selection);
   }, [indexes, direction, selection]);
   var handleIconProps = {
     hasMergedCells: hasMergedCells,
     direction: direction,
-    forceDefaultHandle: forceDefaultHandle,
     isDragMenuOpen: isDragMenuOpen,
     isRowHandleHovered: isRowHandleHovered,
     isColumnHandleHovered: isColumnHandleHovered,
@@ -131,7 +129,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       _onMouseUp && _onMouseUp(e);
     },
     onClick: onClick
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, _utils.browser.gecko ? /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps) : /*#__PURE__*/_react.default.createElement("span", {
     style: {
       pointerEvents: 'none'
     }

package/dist/cjs/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -82,8 +82,8 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   var selection = state.selection;
   var selectionRect = (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
   var hasMergedCells = direction === 'row' ? _utils2.hasMergedCellsInRow : _utils2.hasMergedCellsInColumn;
-  var mergedCells = index !== undefined && hasMergedCells(index)(selection);
-  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, mergedCells, tableMap, index, targetCellPosition, selectionRect);
+  var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
+  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

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

@@ -10,14 +10,11 @@ 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);
@@ -29,7 +26,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce;
+  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce, _colWidths;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -49,6 +46,13 @@ 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;
@@ -100,63 +104,6 @@ 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
@@ -185,6 +132,30 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
         right: '0'
       } : {}
     }));
-  }), tableActive && !isResizing && columnHandles(hoveredCell)));
+  }), 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
+  }))));
 };
 var _default = exports.default = ColumnControls;

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

@@ -14,8 +14,7 @@ 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/drag-and-drop/plugin-factory");
-var _pluginFactory2 = require("../../../pm-plugins/plugin-factory");
+var _pluginFactory = require("../../../pm-plugins/plugin-factory");
 var _types = require("../../../types");
 var _utils2 = require("../../../utils");
 var _consts = require("../../consts");
@@ -23,8 +22,6 @@ 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);
@@ -71,7 +68,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         if (!indexes || !localId || type !== 'table-row') {
           return false;
         }
-        var _getTablePluginState = (0, _pluginFactory2.getPluginState)(editorView.state),
+        var _getTablePluginState = (0, _pluginFactory.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
@@ -89,6 +86,13 @@ 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,
@@ -115,62 +119,6 @@ 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: {
@@ -210,6 +158,27 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         left: "var(--ds-space-negative-100, -8px)"
       }
     }));
-  }), !isResizing && Number.isFinite(rowIndex) && rowHandles(hoveredCell));
+  }), !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
+  })));
 };
 var DragControls = exports.DragControls = (0, _reactIntlNext.injectIntl)(DragControlsComponent);

package/dist/es2019/plugins/table/commands/hover.js

@@ -85,7 +85,8 @@ export const hoverTable = (isInDanger, isSelected) => createCommand(state => {
       decorationSet: updatePluginStateDecorations(state, decorations, TableDecorations.TABLE_CONTROLS_HOVER),
       hoveredColumns,
       hoveredRows,
-      isInDanger
+      isInDanger,
+      isWholeTableInDanger: isInDanger
     }
   };
 }, tr => tr.setMeta('addToHistory', false));
@@ -93,7 +94,8 @@ export const clearHoverSelection = () => createCommand(state => ({
   type: 'CLEAR_HOVER_SELECTION',
   data: {
     decorationSet: updatePluginStateDecorations(state, [], TableDecorations.ALL_CONTROLS_HOVER),
-    isInDanger: false
+    isInDanger: false,
+    isWholeTableInDanger: false
   }
 }));
 export const showResizeHandleLine = cellColumnPositioning => createCommand(state => ({

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -284,7 +284,7 @@ class TableComponent extends React.Component {
     this.containerWidth = _containerWidth;
     this.isInitialOverflowSent = false;
 
-    // store table size using previous full-width mode so can detect if it has changed
+    // store table size using previous full-width mode so can detect if it has changed.
     const isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
     this.layoutSize = this.tableNodeLayoutSize(this.node, _containerWidth.width, {
       isFullWidthModeEnabled

package/dist/es2019/plugins/table/nodeviews/TableResizer.js

@@ -90,7 +90,7 @@ export const TableResizer = ({
   const resizerMinWidth = getResizerMinWidth(node);
   const handleSize = getResizerHandleHeight(tableRef);
   const {
-    isInDanger
+    isWholeTableInDanger
   } = getPluginState(editorView.state);
   const {
     startMeasure,
@@ -247,7 +247,7 @@ export const TableResizer = ({
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
     isHandleVisible: isTableSelected,
-    appearance: isInDanger && isTableSelected ? 'danger' : undefined,
+    appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
     handleHighlight: "shadow",
     handleTooltipContent: formatMessage(messages.resizeTable)
   }, children);

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

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

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
+import { browser } from '@atlaskit/editor-common/utils';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 import { getPluginState as getDragDropPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
@@ -14,7 +15,6 @@ export const DragHandle = ({
   direction = 'row',
   appearance = 'default',
   indexes,
-  forceDefaultHandle = false,
   previewWidth,
   previewHeight,
   onMouseOver,
@@ -46,7 +46,6 @@ export const DragHandle = ({
   const handleIconProps = {
     hasMergedCells,
     direction,
-    forceDefaultHandle,
     isDragMenuOpen,
     isRowHandleHovered,
     isColumnHandleHovered,
@@ -119,7 +118,7 @@ export const DragHandle = ({
       onMouseUp && onMouseUp(e);
     },
     onClick: onClick
-  }, /*#__PURE__*/React.createElement("span", {
+  }, browser.gecko ? /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps) : /*#__PURE__*/React.createElement("span", {
     style: {
       pointerEvents: 'none'
     }

package/dist/es2019/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -73,8 +73,8 @@ export const DragMenu = ({
   } = state;
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
-  const mergedCells = index !== undefined && hasMergedCells(index)(selection);
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, mergedCells, tableMap, index, targetCellPosition, selectionRect);
+  const shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, shouldMoveDisabled, tableMap, index, targetCellPosition, selectionRect);
   const {
     menuItems,
     menuCallback