@atlaskit/editor-plugin-table 5.4.14 → 5.4.15

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

@@ -137,16 +137,36 @@ export var hideResizeHandleLine = function hideResizeHandleLine() {
     };
   });
 };
-export var hoverCell = function hoverCell(rowIndex, colIndex, colWidth, colHeight) {
+export var setTableHovered = function setTableHovered(hovered) {
   return createCommand(function () {
+    return {
+      type: 'TABLE_HOVERED',
+      data: {
+        isTableHovered: hovered
+      }
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};
+export var hoverCell = function hoverCell(rowIndex, colIndex) {
+  return createCommand(function (state) {
+    var _getPluginState4 = getPluginState(state),
+      prevHoveredCell = _getPluginState4.hoveredCell;
+
+    // If no arguments have been passed then the intention it to reset the hover cell data
+    var clear = rowIndex === undefined && colIndex === undefined;
+    var nextRowIndex = clear ? undefined : rowIndex !== null && rowIndex !== void 0 ? rowIndex : prevHoveredCell.rowIndex;
+    var nextColIndex = clear ? undefined : colIndex !== null && colIndex !== void 0 ? colIndex : prevHoveredCell.colIndex;
+    if (nextRowIndex === prevHoveredCell.rowIndex && nextColIndex === prevHoveredCell.colIndex) {
+      return false;
+    }
     return {
       type: 'HOVER_CELL',
       data: {
         hoveredCell: {
-          rowIndex: rowIndex,
-          colIndex: colIndex,
-          colWidth: colWidth,
-          colHeight: colHeight
+          rowIndex: nextRowIndex,
+          colIndex: nextColIndex
         }
       }
     };

package/dist/esm/plugins/table/commands/index.js

@@ -1,4 +1,4 @@
-export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine } from './hover';
+export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine, setTableHovered } from './hover';
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './toggle';
 export { clearMultipleCells } from './clear';

package/dist/esm/plugins/table/commands/misc.js

@@ -195,12 +195,17 @@ export var getTableElementMoveTypeBySlice = function getTableElementMoveTypeBySl
 export var isInsideFirstCellOfRowOrColumn = function isInsideFirstCellOfRowOrColumn(selection, type) {
   var table = findTable(selection);
   if (!table || !type) {
-    return;
+    return false;
   }
   var map = TableMap.get(table.node);
-  var cell = selectionCell(selection);
+  var cell = findCellClosestToPos(selection.$anchor);
+  if (!cell) {
+    return false;
+  }
+  var pos = cell.pos - table.pos - 1;
+  // cell positions in table map always start at 1, as they're offsets not positions
   var index = map.map.findIndex(function (value) {
-    return value === cell.pos - 1;
+    return value === pos;
   });
   return type === 'row' ? index % map.width === 0 : index < map.width;
 };

package/dist/esm/plugins/table/event-handlers.js

@@ -5,7 +5,7 @@ import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
-import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';
+import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, setTableHovered, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';
 import { getPluginState as getDragDropPluginState } from './pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
@@ -98,7 +98,8 @@ export var handleMouseOver = function handleMouseOver(view, mouseEvent) {
   var target = mouseEvent.target;
   var _getPluginState = getPluginState(state),
     insertColumnButtonIndex = _getPluginState.insertColumnButtonIndex,
-    insertRowButtonIndex = _getPluginState.insertRowButtonIndex;
+    insertRowButtonIndex = _getPluginState.insertRowButtonIndex,
+    isTableHovered = _getPluginState.isTableHovered;
   if (isInsertRowButton(target)) {
     var _getColumnOrRowIndex3 = getColumnOrRowIndex(target),
       _getColumnOrRowIndex4 = _slicedToArray(_getColumnOrRowIndex3, 2),
@@ -128,6 +129,9 @@ export var handleMouseOver = function handleMouseOver(view, mouseEvent) {
       right: _endIndex
     })(state, dispatch);
   }
+  if (!isTableHovered) {
+    return setTableHovered(true)(state, dispatch);
+  }
   return false;
 };
 
@@ -160,26 +164,46 @@ export var handleMouseOut = function handleMouseOut(view, mouseEvent) {
   }
   return false;
 };
+export var handleMouseEnter = function handleMouseEnter(view, mouseEvent) {
+  var state = view.state,
+    dispatch = view.dispatch;
+  var _getPluginState2 = getPluginState(state),
+    isTableHovered = _getPluginState2.isTableHovered;
+  if (!isTableHovered) {
+    return setTableHovered(true)(state, dispatch);
+  }
+  return false;
+};
 export var handleMouseLeave = function handleMouseLeave(view, event) {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
   var state = view.state,
     dispatch = view.dispatch;
-  var _getPluginState2 = getPluginState(state),
-    insertColumnButtonIndex = _getPluginState2.insertColumnButtonIndex,
-    insertRowButtonIndex = _getPluginState2.insertRowButtonIndex,
-    isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled;
+  var _getPluginState3 = getPluginState(state),
+    insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex,
+    insertRowButtonIndex = _getPluginState3.insertRowButtonIndex,
+    isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled,
+    isTableHovered = _getPluginState3.isTableHovered;
+  if (isTableHovered) {
+    if (isDragAndDropEnabled) {
+      var _getDragDropPluginSta = getDragDropPluginState(state),
+        isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen;
+      !isDragMenuOpen && setTableHovered(false)(state, dispatch);
+    } else {
+      setTableHovered(false)(state, dispatch);
+    }
+    return true;
+  }
+
+  // If this table doesn't have focus then we want to skip everything after this.
+  if (!isTableInFocus(view)) {
+    return false;
+  }
   var target = event.target;
   if (isTableControlsButton(target)) {
     return true;
   }
-  if (isDragAndDropEnabled) {
-    var _getDragDropPluginSta = getDragDropPluginState(state),
-      isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen;
-    // Only set hoveredCell colIndex and rowIndex to undefined if the drag menu is not open
-    !isDragMenuOpen && hoverCell()(state, dispatch);
-  }
   if ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && hideInsertColumnOrRowButton()(state, dispatch)) {
     return true;
   }
@@ -193,9 +217,9 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
   if (isColumnControlsDecorations(element) || isDragColumnFloatingInsertDot(element)) {
     var state = view.state,
       dispatch = view.dispatch;
-    var _getPluginState3 = getPluginState(state),
-      insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex,
-      isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
+    var _getPluginState4 = getPluginState(state),
+      insertColumnButtonIndex = _getPluginState4.insertColumnButtonIndex,
+      isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
     var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
       _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
       startIndex = _getColumnOrRowIndex10[0],
@@ -208,8 +232,8 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
   if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
     var _state3 = view.state,
       _dispatch4 = view.dispatch;
-    var _getPluginState4 = getPluginState(_state3),
-      insertRowButtonIndex = _getPluginState4.insertRowButtonIndex;
+    var _getPluginState5 = getPluginState(_state3),
+      insertRowButtonIndex = _getPluginState5.insertRowButtonIndex;
     var _getColumnOrRowIndex11 = getColumnOrRowIndex(element),
       _getColumnOrRowIndex12 = _slicedToArray(_getColumnOrRowIndex11, 2),
       _startIndex3 = _getColumnOrRowIndex12[0],
@@ -224,9 +248,9 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
     if (_positionColumn !== null) {
       var _state4 = view.state,
         _dispatch5 = view.dispatch;
-      var _getPluginState5 = getPluginState(_state4),
-        resizeHandleColumnIndex = _getPluginState5.resizeHandleColumnIndex,
-        resizeHandleRowIndex = _getPluginState5.resizeHandleRowIndex;
+      var _getPluginState6 = getPluginState(_state4),
+        resizeHandleColumnIndex = _getPluginState6.resizeHandleColumnIndex,
+        resizeHandleRowIndex = _getPluginState6.resizeHandleRowIndex;
       var tableCell = closestElement(element, 'td, th');
       var cellStartPosition = view.posAtDOM(tableCell, 0);
       var rect = findCellRectClosestToPos(_state4.doc.resolve(cellStartPosition));
@@ -301,8 +325,8 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
           if (isTableSelected) {
             tr = removeTable(tr);
           } else if (tr.selection.isRowSelection()) {
-            var _getPluginState6 = getPluginState(newState),
-              isHeaderRowRequired = _getPluginState6.pluginConfig.isHeaderRowRequired;
+            var _getPluginState7 = getPluginState(newState),
+              isHeaderRowRequired = _getPluginState7.pluginConfig.isHeaderRowRequired;
             tr = deleteRows(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
             tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView)(tr);
@@ -313,10 +337,13 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
   }
   return tr;
 };
+export var isTableInFocus = function isTableInFocus(view) {
+  var _getPluginState8, _getResizePluginState;
+  return !!((_getPluginState8 = getPluginState(view.state)) !== null && _getPluginState8 !== void 0 && _getPluginState8.tableNode) && !((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
+};
 export var whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
-    var _getPluginState7, _getResizePluginState;
-    if (!((_getPluginState7 = getPluginState(view.state)) !== null && _getPluginState7 !== void 0 && _getPluginState7.tableNode) || !!((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging)) {
+    if (!isTableInFocus(view)) {
       return false;
     }
     return eventHandler(view, mouseEvent, elementContentRects);
@@ -326,10 +353,9 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var _tableElement$dataset;
   var target = mouseEvent.target;
   var maybeTableCell = isElementInTableCell(target);
-  var tableRef = getPluginState(view.state).tableRef;
-  var _getPluginState8 = getPluginState(view.state),
-    hoveredCell = _getPluginState8.hoveredCell,
-    tableNode = _getPluginState8.tableNode;
+  var _getPluginState9 = getPluginState(view.state),
+    tableNode = _getPluginState9.tableNode,
+    tableRef = _getPluginState9.tableRef;
   var tableElement = closestElement(target, 'table');
 
   // hover will only trigger if target localId is the same with selected localId
@@ -342,17 +368,13 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var htmlColIndex = maybeTableCell.cellIndex;
   var rowElement = closestElement(target, 'tr');
   var htmlRowIndex = rowElement && rowElement.rowIndex;
-  var colHeight = tableRef.offsetHeight;
-  var colWidth = maybeTableCell.offsetWidth;
   var tableMap = tableNode && TableMap.get(tableNode);
   var colIndex = htmlColIndex;
   if (tableMap) {
     var convertedColIndex = convertHTMLCellIndexToColumnIndex(htmlColIndex, htmlRowIndex, tableMap);
     colIndex = getColumnIndexMappedToColumnIndexInFirstRow(convertedColIndex, htmlRowIndex, tableMap);
   }
-  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== htmlRowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
-    hoverCell(htmlRowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
-  }
+  hoverCell(htmlRowIndex, colIndex)(view.state, view.dispatch);
 };
 export var withCellTracking = function withCellTracking(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {

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

@@ -520,7 +520,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _getPluginState2 = getPluginState(view.state),
         isInDanger = _getPluginState2.isInDanger,
         hoveredRows = _getPluginState2.hoveredRows,
-        hoveredCell = _getPluginState2.hoveredCell;
+        hoveredCell = _getPluginState2.hoveredCell,
+        isTableHovered = _getPluginState2.isTableHovered;
       var tableRef = this.table || undefined;
       var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
       var hasHeaderRow = containsHeaderRow(node);
@@ -531,6 +532,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableActive: tableActive,
         hoveredRows: hoveredRows,
         hoveredCell: hoveredCell,
+        isTableHovered: isTableHovered,
         isInDanger: isInDanger,
         isResizing: isResizing,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
@@ -553,6 +555,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isInDanger: isInDanger,
         hoveredRows: hoveredRows,
         hoveredCell: hoveredCell,
+        isTableHovered: isTableHovered,
         isResizing: isResizing,
         ordering: ordering,
         hasHeaderRow: hasHeaderRow

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

@@ -61,7 +61,7 @@ export var clearDropTarget = function clearDropTarget(tr) {
     return (tr || originalTr).setMeta('addToHistory', false);
   });
 };
-export var moveSource = function moveSource(sourceType, sourceIndex, targetIndex) {
+export var moveSource = function moveSource(sourceType, sourceIndex, targetIndex, tr) {
   return createCommand(function (state) {
     return {
       type: DragAndDropActionType.CLEAR_DROP_TARGET,
@@ -69,19 +69,20 @@ export var moveSource = function moveSource(sourceType, sourceIndex, targetIndex
         decorationSet: DecorationSet.empty
       }
     };
-  }, function (tr) {
+  }, function (originalTr) {
+    var nextTr = tr || originalTr;
     if (sourceIndex === targetIndex) {
-      return tr.setMeta('addToHistory', false);
+      return nextTr.setMeta('addToHistory', false);
     }
-    var anchor = tr.selection.anchor;
+    var anchor = nextTr.selection.anchor;
     var selectStartOfTable = function selectStartOfTable(newTr) {
       return newTr.setSelection(TextSelection.create(newTr.doc, anchor));
     };
     var isTableRow = sourceType === 'table-row';
     if (isTableRow) {
-      return combineTransforms([moveRow(sourceIndex, targetIndex), selectStartOfTable, selectRow(targetIndex)], tr);
+      return combineTransforms([moveRow(sourceIndex, targetIndex), selectStartOfTable, selectRow(targetIndex)], nextTr);
     }
-    return combineTransforms([moveColumn(sourceIndex, targetIndex), selectStartOfTable, selectColumn(targetIndex)], tr);
+    return combineTransforms([moveColumn(sourceIndex, targetIndex), selectStartOfTable, selectColumn(targetIndex)], nextTr);
   });
 };
 export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {

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

@@ -4,8 +4,10 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { findNearestCellIndexToPoint } from '../../utils';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils/merged-cells';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
+import { pluginKey as tablePluginKey } from '../plugin-key';
 import { DragAndDropActionType } from './actions';
 import { clearDropTarget, moveSource, setDropTarget, toggleDragMenu } from './commands';
 import { DropTargetType } from './consts';
@@ -106,28 +108,58 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
             setDropTarget(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
           onDrop: function onDrop(event) {
+            var _cell$row, _cell$col;
             var data = getDraggableDataFromEvent(event);
 
+            // On Drop we need to update the table main plugin hoveredCell value with the current row/col that the mouse is
+            // over. This is so the drag handles update their positions to correctly align with the users mouse. Unfortunately
+            // at this point in time and during the drag opertation, the drop targets are eating all the mouse events so
+            // it's not possible to know what row/col the mouse is over (via mouse events). This attempts to locate the nearest cell and
+            // then tries to update the main table hoveredCell value by piggy-backing the transaction onto the command
+            // triggered by this on drop event.
+            var _getTablePluginState4 = getTablePluginState(editorView.state),
+              hoveredCell = _getTablePluginState4.hoveredCell;
+            var cell = findNearestCellIndexToPoint(event.location.current.input.clientX, event.location.current.input.clientY);
+            var tr = editorView.state.tr;
+            var action = {
+              type: 'HOVER_CELL',
+              data: {
+                hoveredCell: {
+                  rowIndex: (_cell$row = cell === null || cell === void 0 ? void 0 : cell.row) !== null && _cell$row !== void 0 ? _cell$row : hoveredCell.rowIndex,
+                  colIndex: (_cell$col = cell === null || cell === void 0 ? void 0 : cell.col) !== null && _cell$col !== void 0 ? _cell$col : hoveredCell.colIndex
+                }
+              }
+            };
+            tr.setMeta(tablePluginKey, action);
+
             // If no data can be found then it's most like we do not want to perform any drop action
             if (!data) {
-              clearDropTarget()(editorView.state, editorView.dispatch);
+              clearDropTarget(tr)(editorView.state, editorView.dispatch);
               return;
             }
             var sourceType = data.sourceType,
               sourceIndexes = data.sourceIndexes,
+              targetIndex = data.targetIndex,
               targetAdjustedIndex = data.targetAdjustedIndex,
               direction = data.direction;
 
+            // When we drop on a target we will know the targets row/col index for certain,
+            if (sourceType === 'table-row') {
+              action.data.hoveredCell.rowIndex = targetIndex;
+            } else {
+              action.data.hoveredCell.colIndex = targetIndex;
+            }
+
             // If the drop target index contains merged cells then we should not allow the drop to occur.
             var hasMergedCells = sourceType === 'table-row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
             if (hasMergedCells(targetAdjustedIndex)(editorView.state.selection)) {
-              clearDropTarget()(editorView.state, editorView.dispatch);
+              clearDropTarget(tr)(editorView.state, editorView.dispatch);
               return;
             }
             var _sourceIndexes = _slicedToArray(sourceIndexes, 1),
               sourceIndex = _sourceIndexes[0];
             requestAnimationFrame(function () {
-              moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1))(editorView.state, editorView.dispatch);
+              moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
             });
           }
         })

package/dist/esm/plugins/table/pm-plugins/main.js

@@ -11,7 +11,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
 import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
-import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
+import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
 import { createTableView } from '../nodeviews/table';
 import TableCell from '../nodeviews/TableCell';
 import TableRow from '../nodeviews/TableRow';
@@ -27,6 +27,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
   var _window;
   var state = createPluginState(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
+    isTableHovered: false,
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
     isFullWidthModeEnabled: fullWidthModeEnabled,
@@ -241,11 +242,12 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         focus: handleFocus,
         blur: handleBlur,
         mousedown: withCellTracking(handleMouseDown),
-        mouseover: whenTableInFocus(withCellTracking(handleMouseOver)),
-        mouseleave: whenTableInFocus(handleMouseLeave),
+        mouseover: withCellTracking(whenTableInFocus(handleMouseOver)),
+        mouseleave: handleMouseLeave,
         mouseout: whenTableInFocus(handleMouseOut),
         mousemove: whenTableInFocus(handleMouseMove, elementContentRects),
-        click: whenTableInFocus(handleClick)
+        mouseenter: handleMouseEnter,
+        click: withCellTracking(whenTableInFocus(handleClick))
       },
       handleTripleClick: handleTripleClick
     }

package/dist/esm/plugins/table/reducer.js

@@ -90,6 +90,7 @@ export default (function (pluginState, action) {
     case 'HOVER_ROWS':
     case 'HOVER_COLUMNS':
     case 'HOVER_TABLE':
+    case 'TABLE_HOVERED':
     case 'HOVER_MERGED_CELLS':
     case 'HOVER_CELL':
     case 'SHOW_RESIZE_HANDLE_LINE':

package/dist/esm/plugins/table/toolbar.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
@@ -85,7 +87,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     },
     selected: false,
     disabled: false,
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: jsx("div", {
       css: shortcutStyle
     }, tooltip(addColumnAfter))
   }, {
@@ -104,7 +106,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     },
     selected: false,
     disabled: false,
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: jsx("div", {
       css: shortcutStyle
     }, tooltip(addRowAfter))
   }, {
@@ -236,7 +238,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     },
     selected: false,
     disabled: false,
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: jsx("div", {
       css: shortcutStyle
     }, tooltip(backspace))
   });

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

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import Tooltip from '@atlaskit/tooltip';
@@ -11,20 +13,20 @@ export var ColumnResizeWidget = function ColumnResizeWidget(_ref) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   if (!includeTooltip) {
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       className: TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex
     });
   }
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     content: formatMessage(messages.adjustColumns),
     hideTooltipOnClick: true,
     hideTooltipOnMouseDown: true,
     position: "mouse",
     mousePosition: "auto-start"
   }, function (tooltipProps) {
-    return /*#__PURE__*/React.createElement("div", _extends({
+    return jsx("div", _extends({
       className: TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex

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

@@ -1,5 +1,3 @@
-/* index.tsx generated by @compiled/babel-plugin v0.26.1 */
-import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { Box, xcss } from '@atlaskit/primitives';
 import { DragInMotionIcon } from '../icons/DragInMotionIcon';

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

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
@@ -42,7 +44,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     return null;
   }
   var labelCellOptions = formatMessage(messages.cellOptions);
-  var button = /*#__PURE__*/React.createElement("div", {
+  var button = jsx("div", {
     css: function css(theme) {
       return [tableFloatingCellButtonStyles({
         theme: theme
@@ -50,19 +52,19 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
         theme: theme
       })];
     }
-  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+  }, jsx(ToolbarButton, {
     className: ClassName.CONTEXTUAL_MENU_BUTTON,
     selected: isContextualMenuOpen,
     title: labelCellOptions,
     onClick: handleClick,
-    iconBefore: /*#__PURE__*/React.createElement(ExpandIcon, {
+    iconBefore: jsx(ExpandIcon, {
       label: ""
     }),
     "aria-label": labelCellOptions
   }));
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   if (stickyHeader && parentSticky && tableWrapper) {
-    return /*#__PURE__*/React.createElement(FixedButton, {
+    return jsx(FixedButton, {
       offset: BUTTON_OFFSET,
       stickyHeader: stickyHeader,
       tableWrapper: tableWrapper,
@@ -72,7 +74,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
       isContextualMenuOpen: isContextualMenuOpen
     }, button);
   }
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     alignX: "right",
     alignY: "start",
     target: targetCellRef,
@@ -87,9 +89,9 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
 });
 var FloatingContextualButton = injectIntl(FloatingContextualButtonInner);
 export default function (props) {
-  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+  return jsx(ErrorBoundary, {
     component: ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     fallbackComponent: null
-  }, /*#__PURE__*/React.createElement(FloatingContextualButton, props));
+  }, jsx(FloatingContextualButton, props));
 }

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

@@ -9,7 +9,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/** @jsx jsx */
 import { Component } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -80,15 +82,15 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           value: {
             name: 'background'
           },
-          elemAfter: /*#__PURE__*/React.createElement("div", {
+          elemAfter: jsx("div", {
             className: DropdownMenuSharedCssClassName.SUBMENU
-          }, /*#__PURE__*/React.createElement("div", {
+          }, jsx("div", {
             css: cellColourPreviewStyles(background),
             className: ClassName.CONTEXTUAL_MENU_ICON
-          }), isSubmenuOpen && /*#__PURE__*/React.createElement("div", {
+          }), isSubmenuOpen && jsx("div", {
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
-          }, /*#__PURE__*/React.createElement(ColorPalette, {
+          }, jsx(ColorPalette, {
             cols: 7,
             onClick: _this.setColor,
             selectedColor: background,
@@ -105,7 +107,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'insert_column'
         },
-        elemAfter: /*#__PURE__*/React.createElement("div", {
+        elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter))
       });
@@ -114,7 +116,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'insert_row'
         },
-        elemAfter: /*#__PURE__*/React.createElement("div", {
+        elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter))
       });
@@ -194,7 +196,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'clear'
         },
-        elemAfter: /*#__PURE__*/React.createElement("div", {
+        elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(backspace))
       });
@@ -356,10 +358,10 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       if (!items) {
         return null;
       }
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
-      }, /*#__PURE__*/React.createElement(DropdownMenu, {
+      }, jsx(DropdownMenu, {
         mountTo: mountPoint
         //This needs be removed when the a11y is completely handled
         //Disabling key navigation now as it works only partially