@atlaskit/editor-plugin-table 5.3.10 → 5.3.12

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 5.3.12
+
+### Patch Changes
+
+- [#42109](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42109) [`d25ae495fed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d25ae495fed) - [ux] Adds a fix to keep selection on a dropped row or column.
+
+## 5.3.11
+
+### Patch Changes
+
+- [#41823](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41823) [`60dab8657e1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/60dab8657e1) - Add row and column select functionality for table drag controls
+
 ## 5.3.10
 
 ### Patch Changes

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

@@ -496,11 +496,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader
       }));
-      var colControls = /*#__PURE__*/_react.default.createElement(_TableFloatingColumnControls.default, {
+      var colControls = isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_TableFloatingColumnControls.default, {
         editorView: view,
         tableRef: tableRef,
         getNode: getNode,
         tableActive: tableActive,
+        isInDanger: isInDanger,
         hoveredRows: hoveredRows,
         hoveredCell: hoveredCell,
         isResizing: isResizing,
@@ -512,7 +513,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader,
         getEditorFeatureFlags: this.props.getEditorFeatureFlags
-      });
+      }) : null;
       var shadowPadding = allowControls && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
       var shadowStyle = (0, _memoizeOne.default)(function (visible) {
         return {

package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/commands.js

@@ -76,7 +76,10 @@ var moveSource = exports.moveSource = function moveSource(sourceType, sourceInde
     if (sourceIndex === targetIndex) {
       return tr.setMeta('addToHistory', false);
     }
-    var move = sourceType === 'table-row' ? _utils.moveRow : _utils.moveColumn;
-    return move(sourceIndex, targetIndex)(tr);
+    var isTableRow = sourceType === 'table-row';
+    var move = isTableRow ? _utils.moveRow : _utils.moveColumn;
+    var newTr = move(sourceIndex, targetIndex)(tr);
+    var select = isTableRow ? _utils.selectRow : _utils.selectColumn;
+    return select(targetIndex)(newTr);
   });
 };

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

@@ -8,42 +8,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.DragHandle = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 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 _colors = require("@atlaskit/theme/colors");
 var _types = require("../../types");
 var _DragPreview = require("../DragPreview");
 var _icons = require("../icons");
 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; }
-var mapStateToProps = function mapStateToProps(state) {
-  switch (state) {
-    case 'danger':
-    case 'disabled':
-    case 'selected':
-    case 'default':
-    default:
-      return {
-        backgroundColor: "var(--ds-background-accent-gray-subtlest, ".concat(_colors.N200, ")"),
-        foregroundColor: "var(--ds-icon-subtle, ".concat(_colors.N700, ")")
-      };
-  }
-};
 var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var tableLocalId = _ref.tableLocalId,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
-    _ref$state = _ref.state,
-    state = _ref$state === void 0 ? 'default' : _ref$state,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     indexes = _ref.indexes,
     previewWidth = _ref.previewWidth,
     previewHeight = _ref.previewHeight,
-    onClick = _ref.onClick,
     onMouseOver = _ref.onMouseOver,
-    onMouseOut = _ref.onMouseOut;
+    onMouseOut = _ref.onMouseOut,
+    onClick = _ref.onClick;
   var dragHandleDivRef = (0, _react.useRef)(null);
-  var iconProps = mapStateToProps(state);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     previewContainer = _useState2[0],
@@ -92,17 +78,17 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }
   }, [tableLocalId, direction, indexes]);
   return /*#__PURE__*/_react.default.createElement("button", {
-    className: _types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER,
+    className: (0, _classnames.default)(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance),
     ref: dragHandleDivRef,
     style: {
-      backgroundColor: "var(--ds-surface, white)",
-      borderRadius: '4px',
-      border: "2px solid ".concat("var(--ds-surface, white)"),
       transform: direction === 'column' ? 'none' : 'rotate(90deg)',
       pointerEvents: 'auto'
     },
-    "data-testid": "table-floating-column-controls-drag-handle"
-  }, /*#__PURE__*/_react.default.createElement(_icons.DragHandleIcon, iconProps), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_DragPreview.DragPreview, {
+    "data-testid": "table-floating-column-controls-drag-handle",
+    onMouseOver: onMouseOver,
+    onMouseOut: onMouseOut,
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_icons.DragHandleIcon, null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_DragPreview.DragPreview, {
     direction: direction,
     width: previewWidth,
     height: previewHeight

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

@@ -1,15 +1,31 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ColumnControls = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _editorTables = require("@atlaskit/editor-tables");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _commands = require("../../../commands");
 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; }
+var getSelectedColumns = function getSelectedColumns(selection) {
+  if (selection instanceof _editorTables.CellSelection && selection.isColSelection()) {
+    var rect = (0, _utils.getSelectionRect)(selection);
+    if (!rect) {
+      return [];
+    }
+    return (0, _utils2.getSelectedColumnIndexes)(rect);
+  }
+  return [];
+};
 var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
-  var _rowHeights$, _colWidths$map$join;
+  var _colWidths$map$join, _rowHeights$;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -17,20 +33,41 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     isResizing = _ref.isResizing,
     stickyTop = _ref.stickyTop,
     localId = _ref.localId,
+    isInDanger = _ref.isInDanger,
     rowHeights = _ref.rowHeights,
     colWidths = _ref.colWidths;
-  if (!tableRef) {
-    return null;
-  }
-  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;
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return width ? "".concat(width - 1, "px") : '0px';
   }).join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
-  var _onClick = function onClick(index, event) {};
-  var onMouseOver = function onMouseOver() {};
-  var onMouseOut = function onMouseOut() {};
+  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;
+  var handleClick = (0, _react.useCallback)(function (event) {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    (0, _commands.selectColumn)(colIndex, event.shiftKey)(state, dispatch);
+  }, [colIndex, editorView]);
+  var handleMouseOver = (0, _react.useCallback)(function () {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    (0, _commands.hoverColumns)([colIndex])(state, dispatch);
+  }, [colIndex, editorView]);
+  var handleMouseOut = (0, _react.useCallback)(function () {
+    if (tableActive) {
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      (0, _commands.clearHoverSelection)()(state, dispatch);
+    }
+  }, [editorView, tableActive]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.COLUMN_CONTROLS_WITH_DRAG
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -42,22 +79,21 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     }
   }, tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      gridColumn: "".concat(hoveredCell.colIndex + 1, " / span 1"),
+      gridColumn: gridColumnPosition,
       marginTop: "-15px"
     },
     "data-column-control-index": hoveredCell.colIndex,
     "data-testid": "table-floating-column-control"
   }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
     direction: "column",
-    indexes: [hoveredCell.colIndex],
-    onClick: function onClick(event) {
-      return _onClick(hoveredCell.colIndex, event);
-    },
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut,
     tableLocalId: localId || '',
+    indexes: [hoveredCell.colIndex],
     previewWidth: hoveredCell.colWidth,
-    previewHeight: hoveredCell.colHeight
+    previewHeight: hoveredCell.colHeight,
+    appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
+    onClick: handleClick,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut
   }))));
 };
 var _default = exports.default = ColumnControls;

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

@@ -28,7 +28,8 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     hoveredCell = _ref.hoveredCell,
     isResizing = _ref.isResizing,
     stickyHeader = _ref.stickyHeader,
-    selection = _ref.selection;
+    selection = _ref.selection,
+    isInDanger = _ref.isInDanger;
   var _useState = (0, _react.useState)({
       width: 0,
       height: 0
@@ -118,6 +119,7 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     tableActive: tableActive,
     stickyTop: tableActive ? stickyTop : undefined,
     localId: currentNodeLocalId,
+    isInDanger: isInDanger,
     rowHeights: rowHeights,
     colWidths: colWidths
   }), hasDropTargets && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {

package/dist/cjs/plugins/table/ui/TableFloatingControls/NumberColumn/index.js

@@ -18,7 +18,6 @@ var _classnames2 = _interopRequireDefault(require("classnames"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _commands = require("../../../commands");
-var _pluginFactory = require("../../../pm-plugins/plugin-factory");
 var _types = require("../../../types");
 var _utils2 = require("../../../utils");
 var _consts = require("../../consts");
@@ -72,22 +71,10 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
         (0, _commands.clearHoverSelection)()(state, dispatch);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateDragHandleLocation", function (rowIndex) {
-      var _this$props3 = _this.props,
-        editorView = _this$props3.editorView,
-        tableActive = _this$props3.tableActive;
-      var state = editorView.state,
-        dispatch = editorView.dispatch;
-      var _getPluginState = (0, _pluginFactory.getPluginState)(state),
-        hoveredCell = _getPluginState.hoveredCell;
-      if (tableActive && hoveredCell.rowIndex !== rowIndex) {
-        (0, _commands.hoverCell)(rowIndex, hoveredCell.colIndex)(state, dispatch);
-      }
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCellStyles", function (index, rowHeight) {
-      var _this$props4 = _this.props,
-        stickyTop = _this$props4.stickyTop,
-        hasHeaderRow = _this$props4.hasHeaderRow;
+      var _this$props3 = _this.props,
+        stickyTop = _this$props3.stickyTop,
+        hasHeaderRow = _this$props3.hasHeaderRow;
       if (stickyTop && hasHeaderRow && index === 0) {
         return {
           height: rowHeight,
@@ -101,11 +88,11 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getClassNames", function (index) {
       var _classnames;
       var isButtonDisabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      var _this$props5 = _this.props,
-        hoveredRows = _this$props5.hoveredRows,
-        editorView = _this$props5.editorView,
-        isInDanger = _this$props5.isInDanger,
-        isResizing = _this$props5.isResizing;
+      var _this$props4 = _this.props,
+        hoveredRows = _this$props4.hoveredRows,
+        editorView = _this$props4.editorView,
+        isInDanger = _this$props4.isInDanger,
+        isResizing = _this$props4.isResizing;
       var isActive = (0, _utils.isRowSelected)(index)(editorView.state.selection) || (hoveredRows || []).indexOf(index) !== -1 && !isResizing;
       return (0, _classnames2.default)(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (_classnames = {}, (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, isButtonDisabled), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, isActive && isInDanger), (0, _defineProperty2.default)(_classnames, _types.TableCssClassName.HOVERED_CELL_ACTIVE, isActive), _classnames));
     });
@@ -115,11 +102,12 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props6 = this.props,
-        tableRef = _this$props6.tableRef,
-        hasHeaderRow = _this$props6.hasHeaderRow,
-        isDragAndDropEnabled = _this$props6.isDragAndDropEnabled,
-        tableActive = _this$props6.tableActive;
+      var _this$props5 = this.props,
+        tableRef = _this$props5.tableRef,
+        hasHeaderRow = _this$props5.hasHeaderRow,
+        isDragAndDropEnabled = _this$props5.isDragAndDropEnabled,
+        tableActive = _this$props5.tableActive,
+        updateCellHoverLocation = _this$props5.updateCellHoverLocation;
       var rowHeights = (0, _utils2.getRowHeights)(tableRef);
       return /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.NUMBERED_COLUMN,
@@ -135,7 +123,7 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
           "data-index": index,
           style: _this2.getCellStyles(index, rowHeight),
           onMouseOver: function onMouseOver() {
-            return _this2.updateDragHandleLocation(index);
+            return updateCellHoverLocation(index);
           }
         }, hasHeaderRow ? index > 0 ? index : null : index + 1) : /*#__PURE__*/_react.default.createElement("div", {
           key: "wrapper-".concat(index),

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

@@ -1,57 +1,107 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DragControls = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _commands = require("../../../commands");
 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; }
+var getSelectedRows = function getSelectedRows(selection) {
+  if (selection instanceof _editorTables.CellSelection && selection.isRowSelection()) {
+    var rect = (0, _utils.getSelectionRect)(selection);
+    if (!rect) {
+      return [];
+    }
+    return (0, _utils2.getSelectedRowIndexes)(rect);
+  }
+  return [];
+};
 var DragControlsComponent = function DragControlsComponent(_ref) {
   var tableRef = _ref.tableRef,
     hoveredCell = _ref.hoveredCell,
+    tableActive = _ref.tableActive,
+    editorView = _ref.editorView,
+    isInDanger = _ref.isInDanger,
     hoverRows = _ref.hoverRows,
     selectRow = _ref.selectRow,
-    tableActive = _ref.tableActive,
-    editorView = _ref.editorView;
+    updateCellHoverLocation = _ref.updateCellHoverLocation;
   var rowHeights = (0, _utils2.getRowHeights)(tableRef);
-  var heights = rowHeights.map(function (height, index) {
+  var heights = rowHeights.map(function (height) {
     return "".concat(height - 1, "px");
   }).join(' ');
+  var selectedRowIndexes = getSelectedRows(editorView.state.selection);
   var rowWidth = tableRef.offsetWidth;
-  var _onClick = function onClick(index, event) {};
-  var onMouseOver = function onMouseOver() {};
-  var onMouseOut = function onMouseOut() {};
   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 getLocalId = function getLocalId() {
     var _tableNode$node;
     var tableNode = (0, _utils.findTable)(editorView.state.selection);
     return (tableNode === null || tableNode === void 0 || (_tableNode$node = tableNode.node) === null || _tableNode$node === void 0 || (_tableNode$node = _tableNode$node.attrs) === null || _tableNode$node === void 0 ? void 0 : _tableNode$node.localId) || '';
   };
+  var handleMouseOut = (0, _react.useCallback)(function () {
+    if (tableActive) {
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      (0, _commands.clearHoverSelection)()(state, dispatch);
+    }
+  }, [editorView, tableActive]);
+  var handleMouseMove = (0, _react.useCallback)(function (e) {
+    // avoid updating if event target is drag handle
+    if (!e.nativeEvent.target.classList.contains(_types.TableCssClassName.ROW_CONTROLS_WITH_DRAG)) {
+      return;
+    }
+    var hoverHeight = e.nativeEvent.offsetY;
+    var totalHeight = 0;
+    var rowIndex = rowHeights.findIndex(function (row) {
+      totalHeight += row;
+      return hoverHeight <= totalHeight;
+    });
+    updateCellHoverLocation(rowIndex);
+  }, [updateCellHoverLocation, rowHeights]);
+  var handleMouseOver = (0, _react.useCallback)(function () {
+    hoverRows([rowIndex]);
+  }, [hoverRows, rowIndex]);
+  var handleClick = (0, _react.useCallback)(function (e) {
+    selectRow(rowIndex, e === null || e === void 0 ? void 0 : e.shiftKey);
+  }, [rowIndex, selectRow]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.ROW_CONTROLS_WITH_DRAG,
     style: {
       gridTemplateRows: heights
-    }
-  }, rowIndex !== undefined && Number.isFinite(rowIndex) && /*#__PURE__*/_react.default.createElement("div", {
+    },
+    onMouseMove: handleMouseMove
+  }, Number.isFinite(rowIndex) && /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      gridRow: "".concat(rowIndex + 1, " / span 1"),
-      display: 'flex'
+      gridRow: gridRowPosition,
+      display: 'flex',
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center'
     }
   }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
-    onClick: function onClick(event) {
-      return _onClick(rowIndex, event);
-    },
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut,
     tableLocalId: getLocalId(),
     indexes: [rowIndex],
     previewWidth: rowWidth,
-    previewHeight: rowHeights[rowIndex]
+    previewHeight: rowHeights[rowIndex],
+    appearance: selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
+    onClick: handleClick,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut
   })));
 };
 var DragControls = exports.DragControls = (0, _reactIntlNext.injectIntl)(DragControlsComponent);

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

@@ -16,6 +16,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _commands = require("../../commands");
+var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _utils2 = require("../../utils");
 var _CornerControls = require("./CornerControls");
 var _NumberColumn = _interopRequireDefault(require("./NumberColumn"));
@@ -53,6 +54,19 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         dispatch = _this$props$editorVie.dispatch;
       (0, _commands.hoverRows)(rows, danger)(state, dispatch);
     });
+    // re-use across numbered columns and row controls
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateCellHoverLocation", function (rowIndex) {
+      var _this$props = _this.props,
+        editorView = _this$props.editorView,
+        tableActive = _this$props.tableActive;
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+        hoveredCell = _getPluginState.hoveredCell;
+      if (tableActive && hoveredCell.rowIndex !== rowIndex) {
+        (0, _commands.hoverCell)(rowIndex, hoveredCell.colIndex)(state, dispatch);
+      }
+    });
     return _this;
   }
   (0, _createClass2.default)(TableFloatingControls, [{
@@ -99,20 +113,20 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps, nextState) {
       var _this$state;
-      var _this$props = this.props,
-        tableRef = _this$props.tableRef,
-        isInDanger = _this$props.isInDanger,
-        isResizing = _this$props.isResizing,
-        isHeaderRowEnabled = _this$props.isHeaderRowEnabled,
-        isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
-        hoveredRows = _this$props.hoveredRows,
-        selection = _this$props.selection,
-        tableActive = _this$props.tableActive,
-        isHeaderColumnEnabled = _this$props.isHeaderColumnEnabled,
-        ordering = _this$props.ordering,
-        headerRowHeight = _this$props.headerRowHeight,
-        stickyHeader = _this$props.stickyHeader,
-        hoveredCell = _this$props.hoveredCell;
+      var _this$props2 = this.props,
+        tableRef = _this$props2.tableRef,
+        isInDanger = _this$props2.isInDanger,
+        isResizing = _this$props2.isResizing,
+        isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
+        isNumberColumnEnabled = _this$props2.isNumberColumnEnabled,
+        hoveredRows = _this$props2.hoveredRows,
+        selection = _this$props2.selection,
+        tableActive = _this$props2.tableActive,
+        isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
+        ordering = _this$props2.ordering,
+        headerRowHeight = _this$props2.headerRowHeight,
+        stickyHeader = _this$props2.stickyHeader,
+        hoveredCell = _this$props2.hoveredCell;
       var tableHeight = (_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.tableHeight;
       var nextTableHeight = nextState === null || nextState === void 0 ? void 0 : nextState.tableHeight;
       return ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableHeight !== nextTableHeight || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || (0, _utils2.isSelectionUpdated)(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell;
@@ -127,20 +141,20 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        editorView = _this$props2.editorView,
-        tableRef = _this$props2.tableRef,
-        isInDanger = _this$props2.isInDanger,
-        isResizing = _this$props2.isResizing,
-        isNumberColumnEnabled = _this$props2.isNumberColumnEnabled,
-        isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
-        isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
-        tableActive = _this$props2.tableActive,
-        hasHeaderRow = _this$props2.hasHeaderRow,
-        hoveredRows = _this$props2.hoveredRows,
-        stickyHeader = _this$props2.stickyHeader,
-        isDragAndDropEnabled = _this$props2.isDragAndDropEnabled,
-        hoveredCell = _this$props2.hoveredCell;
+      var _this$props3 = this.props,
+        editorView = _this$props3.editorView,
+        tableRef = _this$props3.tableRef,
+        isInDanger = _this$props3.isInDanger,
+        isResizing = _this$props3.isResizing,
+        isNumberColumnEnabled = _this$props3.isNumberColumnEnabled,
+        isHeaderRowEnabled = _this$props3.isHeaderRowEnabled,
+        isHeaderColumnEnabled = _this$props3.isHeaderColumnEnabled,
+        tableActive = _this$props3.tableActive,
+        hasHeaderRow = _this$props3.hasHeaderRow,
+        hoveredRows = _this$props3.hoveredRows,
+        stickyHeader = _this$props3.stickyHeader,
+        isDragAndDropEnabled = _this$props3.isDragAndDropEnabled,
+        hoveredCell = _this$props3.hoveredCell;
       if (!tableRef) {
         return null;
       }
@@ -159,14 +173,18 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         isInDanger: isInDanger,
         isResizing: isResizing,
         selectRow: this.selectRow,
+        updateCellHoverLocation: this.updateCellHoverLocation,
         stickyTop: stickyTop,
         isDragAndDropEnabled: isDragAndDropEnabled
       }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_RowControls.DragControls, {
         tableRef: tableRef,
         hoveredCell: hoveredCell,
         editorView: editorView,
+        tableActive: tableActive,
+        isInDanger: isInDanger,
         hoverRows: this.hoverRows,
-        selectRow: this.selectRow
+        selectRow: this.selectRow,
+        updateCellHoverLocation: this.updateCellHoverLocation
       }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CornerControls.CornerControls, {
         editorView: editorView,
         tableRef: tableRef,