@atlaskit/editor-plugin-table 5.4.14 → 5.4.16

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

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @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';
@@ -73,15 +75,15 @@ export class ContextualMenu extends 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,
@@ -98,7 +100,7 @@ export class ContextualMenu extends Component {
         value: {
           name: 'insert_column'
         },
-        elemAfter: /*#__PURE__*/React.createElement("div", {
+        elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter))
       });
@@ -107,7 +109,7 @@ export class ContextualMenu extends Component {
         value: {
           name: 'insert_row'
         },
-        elemAfter: /*#__PURE__*/React.createElement("div", {
+        elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter))
       });
@@ -191,7 +193,7 @@ export class ContextualMenu extends Component {
         value: {
           name: 'clear'
         },
-        elemAfter: /*#__PURE__*/React.createElement("div", {
+        elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(backspace))
       });
@@ -373,10 +375,10 @@ export class ContextualMenu extends 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

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -36,7 +38,7 @@ const FloatingContextualMenu = ({
     return null;
   }
   const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     alignX: "right",
     alignY: "top",
     target: targetCellRef,
@@ -52,9 +54,9 @@ const FloatingContextualMenu = ({
     forcePlacement: true,
     offset: [-7, 0],
     stick: true
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: tablePopupStyles
-  }, /*#__PURE__*/React.createElement(ContextualMenu, {
+  }, jsx(ContextualMenu, {
     editorView: editorView,
     offset: [contextualMenuTriggerSize / 2, -contextualMenuTriggerSize],
     isOpen: isOpen,

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -24,15 +26,15 @@ const convertToDropdownItems = dragMenuConfig => {
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? /*#__PURE__*/React.createElement("div", {
+      elemBefore: item.icon ? jsx("div", {
         style: {
           marginRight: "var(--ds-space-negative-075, -6px)",
           display: 'flex'
         }
-      }, /*#__PURE__*/React.createElement(item.icon, {
+      }, jsx(item.icon, {
         label: item.title
       })) : undefined,
-      elemAfter: item.keymap ? /*#__PURE__*/React.createElement("div", {
+      elemAfter: item.keymap ? jsx("div", {
         css: shortcutStyle
       }, item.keymap) : undefined
     });
@@ -135,7 +137,7 @@ export const DragMenu = ({
   if (!menuItems) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
+  return jsx(DropdownMenu, {
     mountTo: mountPoint
     //This needs be removed when the a11y is completely handled
     //Disabling key navigation now as it works only partially

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

@@ -1,8 +1,11 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 import React, { useCallback, useMemo } from 'react';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -27,21 +30,15 @@ export const ColumnControls = ({
   isInDanger,
   rowHeights,
   colWidths,
-  hasHeaderColumn
+  hasHeaderColumn,
+  isTableHovered
 }) => {
-  var _colWidths$map$join, _rowHeights$;
+  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce;
   const widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(width => width ? `${width - 1}px` : '0px').join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
   // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
   const columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   const colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   const selectedColIndexes = getSelectedColumns(editorView.state.selection);
-  const gridColumnPosition = useMemo(() => {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedColIndexes.includes(colIndex)) {
-      return `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`;
-    }
-    return `${colIndex + 1} / span 1`;
-  }, [colIndex, selectedColIndexes]);
   const firstRow = tableRef.querySelector('tr');
   const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   const marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
@@ -73,10 +70,14 @@ export const ColumnControls = ({
       state,
       dispatch
     } = editorView;
-    if (tableActive && (hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) !== Number(colIndex)) {
-      hoverCell(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, Number(colIndex))(state, dispatch);
+    if (tableActive) {
+      // For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
+      // of the opposite dimension. For example; here when we mouse over the column drag handle then we're technically
+      // also hovering over row 0 index. And vice-versa with rows. This means we don't need to worry about knowing the
+      // current row index. We can just force it to 0.
+      hoverCell(0, Number(colIndex))(state, dispatch);
     }
-  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex, tableActive]);
+  }, [editorView, tableActive]);
   const handleMouseOut = useCallback(() => {
     if (tableActive) {
       const {
@@ -96,6 +97,65 @@ export const ColumnControls = ({
   const colIndexes = useMemo(() => {
     return [colIndex];
   }, [colIndex]);
+  const previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce((sum, cur) => sum + cur, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
+  const generateHandleByType = useCallback(type => {
+    var _colWidths;
+    if (!hoveredCell) {
+      return null;
+    }
+    const {
+      isDragMenuOpen,
+      dragMenuIndex,
+      dragMenuDirection
+    } = getDragDropPluginState(editorView.state);
+    const isHover = type === 'hover';
+    const isHoveredOnSelectedColumn = isDragMenuOpen && dragMenuDirection === 'column' && dragMenuIndex === colIndex;
+    const showCondition = isHover ? !isHoveredOnSelectedColumn && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : isDragMenuOpen && dragMenuDirection === 'column';
+    if (!showCondition) {
+      return null;
+    }
+    const selectedColumnPosition = `${dragMenuIndex + 1} / span ${selectedColIndexes.length}`;
+    const gridColumnPosition = selectedColIndexes.includes(colIndex) ? `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}` : `${colIndex + 1} / span 1`;
+    const selectedApprearance = isInDanger ? 'danger' : 'selected';
+    const hoveredAppearance = selectedColIndexes.includes(colIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
+    return showCondition && /*#__PURE__*/React.createElement("div", {
+      key: type,
+      style: {
+        gridColumn: isHover ? gridColumnPosition : selectedColumnPosition,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 'fit-content',
+        placeSelf: 'center',
+        zIndex: 99
+      },
+      "data-column-control-index": hoveredCell.colIndex,
+      "data-testid": isHover ? 'table-floating-column-control' : 'table-floating-column-control-selected'
+    }, /*#__PURE__*/React.createElement(DragHandle, {
+      direction: "column",
+      tableLocalId: localId || '',
+      indexes: isHover ? colIndexes : selectedColIndexes,
+      forceDefaultHandle: !isHover,
+      previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 48,
+      previewHeight: previewHeight,
+      appearance: isHover ? hoveredAppearance : selectedApprearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      onMouseUp: handleMouseUp,
+      editorView: editorView
+    }));
+  }, [colIndex, previewHeight, colWidths, colIndexes, editorView, handleClick, handleMouseOut, handleMouseOver, handleMouseUp, hoveredCell, isInDanger, localId, selectedColIndexes]);
+  const columnHandles = useCallback(hoveredCell => {
+    if (!hoveredCell) {
+      return null;
+    }
+    if (hoveredCell.colIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+    const sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
+    return hoveredCell.colIndex < selectedColIndexes[0] ? sortedHandles : sortedHandles.reverse();
+  }, [generateHandleByType, selectedColIndexes]);
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
@@ -123,30 +183,6 @@ export const ColumnControls = ({
     style: columnParams.length - 1 === index ? {
       right: '0'
     } : {}
-  }))), tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
-    style: {
-      gridColumn: gridColumnPosition,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: 'fit-content',
-      placeSelf: 'center',
-      zIndex: 99
-    },
-    "data-column-control-index": hoveredCell.colIndex,
-    "data-testid": "table-floating-column-control"
-  }, /*#__PURE__*/React.createElement(DragHandle, {
-    direction: "column",
-    tableLocalId: localId || '',
-    indexes: colIndexes,
-    previewWidth: hoveredCell.colWidth,
-    previewHeight: hoveredCell.colHeight,
-    appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
-    onClick: handleClick,
-    onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut,
-    onMouseUp: handleMouseUp,
-    editorView: editorView
-  }))));
+  }))), tableActive && !isResizing && columnHandles(hoveredCell)));
 };
 export default ColumnControls;

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

@@ -14,7 +14,8 @@ export const TableFloatingColumnControls = ({
   isResizing,
   stickyHeader,
   selection,
-  isInDanger
+  isInDanger,
+  isTableHovered
 }) => {
   const [tableRect, setTableRect] = useState({
     width: 0,
@@ -84,6 +85,7 @@ export const TableFloatingColumnControls = ({
     tableRef: tableRef,
     isResizing: isResizing,
     tableActive: tableActive,
+    isTableHovered: isTableHovered,
     stickyTop: tableActive ? stickyTop : undefined,
     localId: currentNodeLocalId,
     isInDanger: isInDanger,

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

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

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

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
 import { hoverCell, hoverRows, selectRow } from '../../commands';
-import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
 import { isSelectionUpdated } from '../../utils';
 import { CornerControls, DragCornerControls } from './CornerControls';
@@ -42,11 +41,12 @@ export default class TableFloatingControls extends Component {
         state,
         dispatch
       } = editorView;
-      const {
-        hoveredCell
-      } = getPluginState(state);
-      if (tableActive && hoveredCell.rowIndex !== rowIndex) {
-        hoverCell(rowIndex, hoveredCell.colIndex)(state, dispatch);
+      if (tableActive) {
+        // For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
+        // of the opposite dimension. For example; here when we mouse over the row drag handle then we're technically
+        // also hovering over column 0 index. And vice-versa with columns. This means we don't need to worry about knowing the
+        // current column index. We can just force it to 0.
+        hoverCell(rowIndex, 0)(state, dispatch);
       }
     });
     this.state = {
@@ -98,9 +98,10 @@ export default class TableFloatingControls extends Component {
       ordering,
       headerRowHeight,
       stickyHeader,
-      hoveredCell
+      hoveredCell,
+      isTableHovered
     } = this.props;
-    return this.state.tableWrapperWidth !== nextState.tableWrapperWidth || this.state.tableWrapperHeight !== nextState.tableWrapperHeight || ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell;
+    return this.state.tableWrapperWidth !== nextState.tableWrapperWidth || this.state.tableWrapperHeight !== nextState.tableWrapperHeight || ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell || isTableHovered !== nextProps.isTableHovered;
   }
   componentWillUnmount() {
     if (this.resizeObserver) {
@@ -122,7 +123,8 @@ export default class TableFloatingControls extends Component {
       hoveredRows,
       stickyHeader,
       isDragAndDropEnabled,
-      hoveredCell
+      hoveredCell,
+      isTableHovered
     } = this.props;
     if (!tableRef) {
       return null;
@@ -155,6 +157,7 @@ export default class TableFloatingControls extends Component {
       tableRef: tableRef,
       tableNode: tableNode,
       hoveredCell: hoveredCell,
+      isTableHovered: isTableHovered,
       editorView: editorView,
       tableActive: tableActive,
       isInDanger: isInDanger,

package/dist/es2019/plugins/table/utils/dom.js

@@ -177,4 +177,17 @@ export const getTop = element => {
     return 0;
   }
   return (_element$getBoundingC = element === null || element === void 0 ? void 0 : (_element$getBoundingC2 = element.getBoundingClientRect) === null || _element$getBoundingC2 === void 0 ? void 0 : (_element$getBoundingC3 = _element$getBoundingC2.call(element)) === null || _element$getBoundingC3 === void 0 ? void 0 : _element$getBoundingC3.top) !== null && _element$getBoundingC !== void 0 ? _element$getBoundingC : 0;
+};
+export const findNearestCellIndexToPoint = (x, y) => {
+  var _cell$parentElement;
+  const elements = document.elementsFromPoint(x, y);
+  const cell = elements.find(el => el.nodeName.toUpperCase() === 'TD' || el.nodeName.toUpperCase() === 'TH');
+  const row = (_cell$parentElement = cell === null || cell === void 0 ? void 0 : cell.parentElement) !== null && _cell$parentElement !== void 0 ? _cell$parentElement : undefined;
+  if (!Number.isFinite(row === null || row === void 0 ? void 0 : row.rowIndex) || !Number.isFinite(cell === null || cell === void 0 ? void 0 : cell.cellIndex)) {
+    return undefined;
+  }
+  return {
+    row: row.rowIndex,
+    col: cell.cellIndex
+  };
 };

package/dist/es2019/plugins/table/utils/index.js

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint } from './dom';
 export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, getColumnIndexMappedToColumnIndexInFirstRow } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';

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;
 };