@atlaskit/editor-plugin-table 5.3.10 → 5.3.12

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

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
-import { hoverRows, selectRow } from '../../commands';
+import { hoverCell, hoverRows, selectRow } from '../../commands';
+import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { isSelectionUpdated } from '../../utils';
 import { CornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
@@ -30,6 +31,23 @@ export default class TableFloatingControls extends Component {
       } = this.props.editorView;
       hoverRows(rows, danger)(state, dispatch);
     });
+    // re-use across numbered columns and row controls
+    _defineProperty(this, "updateCellHoverLocation", rowIndex => {
+      const {
+        editorView,
+        tableActive
+      } = this.props;
+      const {
+        state,
+        dispatch
+      } = editorView;
+      const {
+        hoveredCell
+      } = getPluginState(state);
+      if (tableActive && hoveredCell.rowIndex !== rowIndex) {
+        hoverCell(rowIndex, hoveredCell.colIndex)(state, dispatch);
+      }
+    });
   }
   componentDidMount() {
     this.tryInitResizeObserver();
@@ -115,14 +133,18 @@ export default class TableFloatingControls extends Component {
       isInDanger: isInDanger,
       isResizing: isResizing,
       selectRow: this.selectRow,
+      updateCellHoverLocation: this.updateCellHoverLocation,
       stickyTop: stickyTop,
       isDragAndDropEnabled: isDragAndDropEnabled
     }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
       editorView: editorView,
       tableRef: tableRef,

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

@@ -164,7 +164,7 @@ const tableRowControlStyles = () => {
           position: absolute;
           margin-top: ${tableMarginTop}px;
           left: -${tableToolbarSize + 1}px;
-          z-index: ${rowControlsZIndex};
+          z-index: ${rowControlsZIndex + 4};
         }
       ` : css`
         .${ClassName.ROW_CONTROLS_WRAPPER} {
@@ -607,14 +607,74 @@ export const tableStyles = props => {
       align-items: center;
       position: absolute;
       left: -4px;
+      z-index: ${akEditorUnitZIndex};
     }
 
     .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
       cursor: grab;
-      width: max-content;
       padding: 0;
-      border: none;
-      background: none;
+
+      border-radius: 6px;
+      width: max-content;
+      height: max-content;
+      border: 2px solid ${`var(--ds-surface, ${N0})`};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      svg {
+        rect {
+          //
+          fill: ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"};
+        }
+        g {
+          fill: ${"var(--ds-icon-subtle, #626F86)"};
+        }
+      }
+
+      &:hover {
+        svg {
+          rect {
+            fill: ${"var(--ds-background-accent-blue-subtle, #579DFF)"};
+          }
+          g {
+            fill: ${"var(--ds-icon-inverse, #FFF)"};
+          }
+        }
+      }
+
+      &.selected {
+        svg {
+          rect {
+            fill: ${"var(--ds-background-accent-blue-subtle, #579DFF)"};
+          }
+          g {
+            fill: ${"var(--ds-icon-inverse, #FFF)"};
+          }
+        }
+      }
+
+      &.danger {
+        svg {
+          rect {
+            fill: ${"var(--ds-background-accent-red-subtler-pressed, #F87462)"};
+          }
+          g {
+            fill: ${"var(--ds-border-inverse, #FFF)"};
+          }
+        }
+      }
+
+      &.disabled {
+        svg {
+          rect {
+            fill: ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"};
+          }
+          g {
+            fill: ${"var(--ds-border-inverse, #FFF)"};
+          }
+        }
+      }
     }
 
     ${floatingColumnControls(props)}

package/dist/es2019/plugins/table/ui/icons/DragHandleIcon.js

@@ -1,54 +1,13 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
-export const DragHandleIcon = ({
-  backgroundColor,
-  foregroundColor
-}) => /*#__PURE__*/React.createElement("svg", {
-  width: "28",
-  height: "20",
-  viewBox: "0 0 28 20",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
+export const DragHandleIcon = () => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "16",
+  fill: "none"
 }, /*#__PURE__*/React.createElement("rect", {
-  x: "1",
-  y: "1",
-  width: "26",
-  height: "18",
-  rx: "5",
-  fill: backgroundColor || '#F1F2F4'
-}), /*#__PURE__*/React.createElement("g", {
-  clipPath: "url(#clip0_125_45007)"
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M11 12C11 11.4477 10.5523 11 10 11C9.44772 11 9 11.4477 9 12C9 12.5523 9.44772 13 10 13C10.5523 13 11 12.5523 11 12Z",
-  fill: foregroundColor || '#626F86'
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M11 8C11 7.44772 10.5523 7 10 7C9.44772 7 9 7.44772 9 8C9 8.55228 9.44772 9 10 9C10.5523 9 11 8.55228 11 8Z",
-  fill: foregroundColor || '#626F86'
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M19 12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12C17 12.5523 17.4477 13 18 13C18.5523 13 19 12.5523 19 12Z",
-  fill: foregroundColor || '#626F86'
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M19 8C19 7.44772 18.5523 7 18 7C17.4477 7 17 7.44772 17 8C17 8.55228 17.4477 9 18 9C18.5523 9 19 8.55228 19 8Z",
-  fill: foregroundColor || '#626F86'
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12C13 12.5523 13.4477 13 14 13C14.5523 13 15 12.5523 15 12Z",
-  fill: foregroundColor || '#626F86'
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M15 8C15 7.44772 14.5523 7 14 7C13.4477 7 13 7.44772 13 8C13 8.55228 13.4477 9 14 9C14.5523 9 15 8.55228 15 8Z",
-  fill: foregroundColor || '#626F86'
-})), /*#__PURE__*/React.createElement("rect", {
-  x: "1",
-  y: "1",
-  width: "26",
-  height: "18",
-  rx: "5",
-  stroke: "white",
-  strokeWidth: "2"
-}), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-  id: "clip0_125_45007"
-}, /*#__PURE__*/React.createElement("rect", {
-  width: "16",
-  height: "24",
-  fill: "white",
-  transform: "matrix(0 -1 1 0 2 18)"
-}))));
+  width: "24",
+  height: "16",
+  rx: "4"
+}), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  d: "M9 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM9 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM17 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM17 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"
+})));

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

@@ -489,11 +489,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader
       }));
-      var colControls = /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
+      var colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
         editorView: view,
         tableRef: tableRef,
         getNode: getNode,
         tableActive: tableActive,
+        isInDanger: isInDanger,
         hoveredRows: hoveredRows,
         hoveredCell: hoveredCell,
         isResizing: isResizing,
@@ -505,7 +506,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 ? -tableToolbarSize : tableMarginSides;
       var shadowStyle = memoizeOne(function (visible) {
         return {

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

@@ -1,5 +1,5 @@
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
+import { moveColumn, moveRow, selectColumn, selectRow } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../types';
 import { createColumnInsertLine, createRowInsertLine, updateDecorations } from '../../utils';
 import { DragAndDropActionType } from './actions';
@@ -71,7 +71,10 @@ export var moveSource = function moveSource(sourceType, sourceIndex, targetIndex
     if (sourceIndex === targetIndex) {
       return tr.setMeta('addToHistory', false);
     }
-    var move = sourceType === 'table-row' ? moveRow : moveColumn;
-    return move(sourceIndex, targetIndex)(tr);
+    var isTableRow = sourceType === 'table-row';
+    var move = isTableRow ? moveRow : moveColumn;
+    var newTr = move(sourceIndex, targetIndex)(tr);
+    var select = isTableRow ? selectRow : selectColumn;
+    return select(targetIndex)(newTr);
   });
 };

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

@@ -1,39 +1,25 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useRef, useState } from 'react';
+import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 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 { N200, N700 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../../types';
 import { DragPreview } from '../DragPreview';
 import { DragHandleIcon } from '../icons';
-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(N200, ")"),
-        foregroundColor: "var(--ds-icon-subtle, ".concat(N700, ")")
-      };
-  }
-};
 export var 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 = useRef(null);
-  var iconProps = mapStateToProps(state);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     previewContainer = _useState2[0],
@@ -82,17 +68,17 @@ export var DragHandle = function DragHandle(_ref) {
     }
   }, [tableLocalId, direction, indexes]);
   return /*#__PURE__*/React.createElement("button", {
-    className: ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
+    className: classnames(ClassName.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.createElement(DragHandleIcon, iconProps), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
+    "data-testid": "table-floating-column-controls-drag-handle",
+    onMouseOver: onMouseOver,
+    onMouseOut: onMouseOut,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(DragHandleIcon, null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
     direction: direction,
     width: previewWidth,
     height: previewHeight

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

@@ -1,8 +1,22 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { CellSelection } from '@atlaskit/editor-tables';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection, hoverColumns, selectColumn } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
+import { getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
+var getSelectedColumns = function getSelectedColumns(selection) {
+  if (selection instanceof CellSelection && selection.isColSelection()) {
+    var rect = getSelectionRect(selection);
+    if (!rect) {
+      return [];
+    }
+    return getSelectedColumnIndexes(rect);
+  }
+  return [];
+};
 export var ColumnControls = function ColumnControls(_ref) {
-  var _rowHeights$, _colWidths$map$join;
+  var _colWidths$map$join, _rowHeights$;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -10,20 +24,41 @@ export var 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 = 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 = useCallback(function (event) {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    selectColumn(colIndex, event.shiftKey)(state, dispatch);
+  }, [colIndex, editorView]);
+  var handleMouseOver = useCallback(function () {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    hoverColumns([colIndex])(state, dispatch);
+  }, [colIndex, editorView]);
+  var handleMouseOut = useCallback(function () {
+    if (tableActive) {
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      clearHoverSelection()(state, dispatch);
+    }
+  }, [editorView, tableActive]);
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.COLUMN_CONTROLS_WITH_DRAG
   }, /*#__PURE__*/React.createElement("div", {
@@ -35,22 +70,21 @@ export var ColumnControls = function ColumnControls(_ref) {
     }
   }, tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.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.createElement(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
   }))));
 };
 export default ColumnControls;

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

@@ -18,7 +18,8 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     hoveredCell = _ref.hoveredCell,
     isResizing = _ref.isResizing,
     stickyHeader = _ref.stickyHeader,
-    selection = _ref.selection;
+    selection = _ref.selection,
+    isInDanger = _ref.isInDanger;
   var _useState = useState({
       width: 0,
       height: 0
@@ -108,6 +109,7 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     tableActive: tableActive,
     stickyTop: tableActive ? stickyTop : undefined,
     localId: currentNodeLocalId,
+    isInDanger: isInDanger,
     rowHeights: rowHeights,
     colWidths: colWidths
   }), hasDropTargets && /*#__PURE__*/React.createElement(ColumnDropTargets, {

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

@@ -11,8 +11,7 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
-import { clearHoverSelection, hoverCell } from '../../../commands';
-import { getPluginState } from '../../../pm-plugins/plugin-factory';
+import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights } from '../../../utils';
 import { tableBorderColor } from '../../consts';
@@ -62,22 +61,10 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
         clearHoverSelection()(state, dispatch);
       }
     });
-    _defineProperty(_assertThisInitialized(_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 = getPluginState(state),
-        hoveredCell = _getPluginState.hoveredCell;
-      if (tableActive && hoveredCell.rowIndex !== rowIndex) {
-        hoverCell(rowIndex, hoveredCell.colIndex)(state, dispatch);
-      }
-    });
     _defineProperty(_assertThisInitialized(_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,
@@ -91,11 +78,11 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_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 = isRowSelected(index)(editorView.state.selection) || (hoveredRows || []).indexOf(index) !== -1 && !isResizing;
       return classnames(ClassName.NUMBERED_COLUMN_BUTTON, (_classnames = {}, _defineProperty(_classnames, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, isButtonDisabled), _defineProperty(_classnames, ClassName.HOVERED_CELL_IN_DANGER, isActive && isInDanger), _defineProperty(_classnames, ClassName.HOVERED_CELL_ACTIVE, isActive), _classnames));
     });
@@ -105,11 +92,12 @@ var NumberColumn = /*#__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 = getRowHeights(tableRef);
       return /*#__PURE__*/React.createElement("div", {
         className: ClassName.NUMBERED_COLUMN,
@@ -125,7 +113,7 @@ var NumberColumn = /*#__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.createElement("div", {
           key: "wrapper-".concat(index),

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

@@ -1,50 +1,98 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { injectIntl } from 'react-intl-next';
-import { findTable } from '@atlaskit/editor-tables/utils';
+import { CellSelection } from '@atlaskit/editor-tables';
+import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
-import { getRowHeights } from '../../../utils';
+import { getRowHeights, getSelectedRowIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
+var getSelectedRows = function getSelectedRows(selection) {
+  if (selection instanceof CellSelection && selection.isRowSelection()) {
+    var rect = getSelectionRect(selection);
+    if (!rect) {
+      return [];
+    }
+    return 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 = 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 = 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 = 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 = useCallback(function () {
+    if (tableActive) {
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      clearHoverSelection()(state, dispatch);
+    }
+  }, [editorView, tableActive]);
+  var handleMouseMove = useCallback(function (e) {
+    // avoid updating if event target is drag handle
+    if (!e.nativeEvent.target.classList.contains(ClassName.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 = useCallback(function () {
+    hoverRows([rowIndex]);
+  }, [hoverRows, rowIndex]);
+  var handleClick = useCallback(function (e) {
+    selectRow(rowIndex, e === null || e === void 0 ? void 0 : e.shiftKey);
+  }, [rowIndex, selectRow]);
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.ROW_CONTROLS_WITH_DRAG,
     style: {
       gridTemplateRows: heights
-    }
-  }, rowIndex !== undefined && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
+    },
+    onMouseMove: handleMouseMove
+  }, Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
-      gridRow: "".concat(rowIndex + 1, " / span 1"),
-      display: 'flex'
+      gridRow: gridRowPosition,
+      display: 'flex',
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center'
     }
   }, /*#__PURE__*/React.createElement(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
   })));
 };
 export var DragControls = injectIntl(DragControlsComponent);