@atlaskit/editor-plugin-table 5.4.14 → 5.4.15

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

@@ -1,4 +1,3 @@
-/* index.tsx generated by @compiled/babel-plugin v0.26.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DragPreview = void 0;
-var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _primitives = require("@atlaskit/primitives");
 var _DragInMotionIcon = require("../icons/DragInMotionIcon");

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = _default;
 var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
@@ -19,6 +20,8 @@ var _commands = require("../../commands");
 var _types = require("../../types");
 var _FixedButton = _interopRequireDefault(require("./FixedButton"));
 var _styles = require("./styles");
+/** @jsx jsx */
+
 var BUTTON_OFFSET = 3;
 var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (props) {
   var editorView = props.editorView,
@@ -49,7 +52,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
     return null;
   }
   var labelCellOptions = formatMessage(_messages.tableMessages.cellOptions);
-  var button = /*#__PURE__*/_react.default.createElement("div", {
+  var button = (0, _react2.jsx)("div", {
     css: function css(theme) {
       return [(0, _styles.tableFloatingCellButtonStyles)({
         theme: theme
@@ -57,19 +60,19 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
         theme: theme
       })];
     }
-  }, /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
+  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
     className: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON,
     selected: isContextualMenuOpen,
     title: labelCellOptions,
     onClick: handleClick,
-    iconBefore: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+    iconBefore: (0, _react2.jsx)(_chevronDown.default, {
       label: ""
     }),
     "aria-label": labelCellOptions
   }));
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   if (stickyHeader && parentSticky && tableWrapper) {
-    return /*#__PURE__*/_react.default.createElement(_FixedButton.default, {
+    return (0, _react2.jsx)(_FixedButton.default, {
       offset: BUTTON_OFFSET,
       stickyHeader: stickyHeader,
       tableWrapper: tableWrapper,
@@ -79,7 +82,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
       isContextualMenuOpen: isContextualMenuOpen
     }, button);
   }
-  return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+  return (0, _react2.jsx)(_ui.Popup, {
     alignX: "right",
     alignY: "start",
     target: targetCellRef,
@@ -94,9 +97,9 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
 });
 var FloatingContextualButton = (0, _reactIntlNext.injectIntl)(FloatingContextualButtonInner);
 function _default(props) {
-  return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
+  return (0, _react2.jsx)(_errorBoundary.ErrorBoundary, {
     component: _analytics.ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     fallbackComponent: null
-  }, /*#__PURE__*/_react.default.createElement(FloatingContextualButton, props));
+  }, (0, _react2.jsx)(FloatingContextualButton, props));
 }

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

@@ -13,6 +13,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
+var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _customSteps = require("@atlaskit/custom-steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -37,7 +38,7 @@ var _styles2 = require("./styles");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { (0, _defineProperty2.default)(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 = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+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 */
 var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ContextualMenu, _Component);
   var _super = _createSuper(ContextualMenu);
@@ -87,15 +88,15 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           value: {
             name: 'background'
           },
-          elemAfter: /*#__PURE__*/React.createElement("div", {
+          elemAfter: (0, _react2.jsx)("div", {
             className: _styles.DropdownMenuSharedCssClassName.SUBMENU
-          }, /*#__PURE__*/React.createElement("div", {
+          }, (0, _react2.jsx)("div", {
             css: (0, _styles2.cellColourPreviewStyles)(background),
             className: _types.TableCssClassName.CONTEXTUAL_MENU_ICON
-          }), isSubmenuOpen && /*#__PURE__*/React.createElement("div", {
+          }), isSubmenuOpen && (0, _react2.jsx)("div", {
             className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
-          }, /*#__PURE__*/React.createElement(_uiColor.ColorPalette, {
+          }, (0, _react2.jsx)(_uiColor.ColorPalette, {
             cols: 7,
             onClick: _this.setColor,
             selectedColor: background,
@@ -112,7 +113,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'insert_column'
         },
-        elemAfter: /*#__PURE__*/React.createElement("div", {
+        elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter))
       });
@@ -121,7 +122,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'insert_row'
         },
-        elemAfter: /*#__PURE__*/React.createElement("div", {
+        elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addRowAfter))
       });
@@ -201,7 +202,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'clear'
         },
-        elemAfter: /*#__PURE__*/React.createElement("div", {
+        elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.backspace))
       });
@@ -363,10 +364,10 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       if (!items) {
         return null;
       }
-      return /*#__PURE__*/React.createElement("div", {
+      return (0, _react2.jsx)("div", {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
-      }, /*#__PURE__*/React.createElement(_uiMenu.DropdownMenu, {
+      }, (0, _react2.jsx)(_uiMenu.DropdownMenu, {
         mountTo: mountPoint
         //This needs be removed when the a11y is completely handled
         //Disabling key navigation now as it works only partially

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -13,6 +14,8 @@ var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _consts = require("../consts");
 var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
 var _styles = require("./styles");
+/** @jsx jsx */
+
 var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
   var mountPoint = _ref.mountPoint,
     boundariesElement = _ref.boundariesElement,
@@ -39,7 +42,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     return null;
   }
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
-  return /*#__PURE__*/React.createElement(_ui.Popup, {
+  return (0, _react.jsx)(_ui.Popup, {
     alignX: "right",
     alignY: "top",
     target: targetCellRef,
@@ -55,9 +58,9 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     forcePlacement: true,
     offset: [-7, 0],
     stick: true
-  }, /*#__PURE__*/React.createElement("div", {
+  }, (0, _react.jsx)("div", {
     css: _styles.tablePopupStyles
-  }, /*#__PURE__*/React.createElement(_ContextualMenu.default, {
+  }, (0, _react.jsx)(_ContextualMenu.default, {
     editorView: editorView,
     offset: [_consts.contextualMenuTriggerSize / 2, -_consts.contextualMenuTriggerSize],
     isOpen: isOpen,

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DragMenu = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("@emotion/react");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
@@ -16,6 +17,8 @@ var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
 var _utils2 = require("../../utils");
 var _dragMenu = require("../../utils/drag-menu");
 var _consts = require("../consts");
+/** @jsx jsx */
+
 var groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down'], ['sort_column_asc', 'sort_column_desc']];
 var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
   var menuItemsArr = (0, _toConsumableArray2.default)(Array(groupedDragMenuConfig.length)).map(function () {
@@ -36,15 +39,15 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? /*#__PURE__*/React.createElement("div", {
+      elemBefore: item.icon ? (0, _react.jsx)("div", {
         style: {
           marginRight: "var(--ds-space-negative-075, -6px)",
           display: 'flex'
         }
-      }, /*#__PURE__*/React.createElement(item.icon, {
+      }, (0, _react.jsx)(item.icon, {
         label: item.title
       })) : undefined,
-      elemAfter: item.keymap ? /*#__PURE__*/React.createElement("div", {
+      elemAfter: item.keymap ? (0, _react.jsx)("div", {
         css: _shortcut.shortcutStyle
       }, item.keymap) : undefined
     });
@@ -136,7 +139,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   if (!menuItems) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(_uiMenu.DropdownMenu, {
+  return (0, _react.jsx)(_uiMenu.DropdownMenu, {
     mountTo: mountPoint
     //This needs be removed when the a11y is completely handled
     //Disabling key navigation now as it works only partially

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

@@ -26,7 +26,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join, _rowHeights$;
+  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce, _colWidths;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -37,7 +37,8 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     isInDanger = _ref.isInDanger,
     rowHeights = _ref.rowHeights,
     colWidths = _ref.colWidths,
-    hasHeaderColumn = _ref.hasHeaderColumn;
+    hasHeaderColumn = _ref.hasHeaderColumn,
+    isTableHovered = _ref.isTableHovered;
   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';
@@ -77,10 +78,14 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     // update hovered cell location
     var state = editorView.state,
       dispatch = editorView.dispatch;
-    if (tableActive && (hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) !== Number(colIndex)) {
-      (0, _commands.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.
+      (0, _commands.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]);
   var handleMouseOut = (0, _react.useCallback)(function () {
     if (tableActive) {
       var state = editorView.state,
@@ -96,6 +101,9 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   var colIndexes = (0, _react.useMemo)(function () {
     return [colIndex];
   }, [colIndex]);
+  var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
+    return sum + cur;
+  }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
@@ -124,7 +132,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
         right: '0'
       } : {}
     }));
-  }), tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/_react.default.createElement("div", {
+  }), tableActive && !isResizing && isTableHovered && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       gridColumn: gridColumnPosition,
       display: 'flex',
@@ -140,8 +148,8 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     direction: "column",
     tableLocalId: localId || '',
     indexes: colIndexes,
-    previewWidth: hoveredCell.colWidth,
-    previewHeight: hoveredCell.colHeight,
+    previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 48,
+    previewHeight: previewHeight,
     appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
     onClick: handleClick,
     onMouseOver: handleMouseOver,

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

@@ -28,7 +28,8 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     isResizing = _ref.isResizing,
     stickyHeader = _ref.stickyHeader,
     selection = _ref.selection,
-    isInDanger = _ref.isInDanger;
+    isInDanger = _ref.isInDanger,
+    isTableHovered = _ref.isTableHovered;
   var _useState = (0, _react.useState)({
       width: 0,
       height: 0
@@ -113,6 +114,7 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     tableRef: tableRef,
     isResizing: isResizing,
     tableActive: tableActive,
+    isTableHovered: isTableHovered,
     stickyTop: tableActive ? stickyTop : undefined,
     localId: currentNodeLocalId,
     isInDanger: isInDanger,

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

@@ -42,6 +42,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     editorView = _ref.editorView,
     isInDanger = _ref.isInDanger,
     isResizing = _ref.isResizing,
+    isTableHovered = _ref.isTableHovered,
     hoverRows = _ref.hoverRows,
     selectRow = _ref.selectRow,
     updateCellHoverLocation = _ref.updateCellHoverLocation;
@@ -157,7 +158,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         left: "var(--ds-space-negative-100, -8px)"
       }
     }));
-  }), !isResizing && Number.isFinite(rowIndex) && /*#__PURE__*/_react.default.createElement("div", {
+  }), !isResizing && isTableHovered && Number.isFinite(rowIndex) && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       gridRow: gridRowPosition,
       gridColumn: '2',

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

@@ -16,7 +16,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _commands = require("../../commands");
-var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _types = require("../../types");
 var _utils2 = require("../../utils");
 var _CornerControls = require("./CornerControls");
@@ -59,10 +58,12 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         tableActive = _this$props.tableActive;
       var state = editorView.state,
         dispatch = editorView.dispatch;
-      var _getPluginState = (0, _pluginFactory.getPluginState)(state),
-        hoveredCell = _getPluginState.hoveredCell;
-      if (tableActive && hoveredCell.rowIndex !== rowIndex) {
-        (0, _commands.hoverCell)(rowIndex, hoveredCell.colIndex)(state, dispatch);
+      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.
+        (0, _commands.hoverCell)(rowIndex, 0)(state, dispatch);
       }
     });
     _this.state = {
@@ -134,8 +135,9 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         ordering = _this$props2.ordering,
         headerRowHeight = _this$props2.headerRowHeight,
         stickyHeader = _this$props2.stickyHeader,
-        hoveredCell = _this$props2.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 || (0, _utils2.isSelectionUpdated)(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell;
+        hoveredCell = _this$props2.hoveredCell,
+        isTableHovered = _this$props2.isTableHovered;
+      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 || (0, _utils2.isSelectionUpdated)(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell || isTableHovered !== nextProps.isTableHovered;
     }
   }, {
     key: "componentWillUnmount",
@@ -161,7 +163,8 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         hoveredRows = _this$props3.hoveredRows,
         stickyHeader = _this$props3.stickyHeader,
         isDragAndDropEnabled = _this$props3.isDragAndDropEnabled,
-        hoveredCell = _this$props3.hoveredCell;
+        hoveredCell = _this$props3.hoveredCell,
+        isTableHovered = _this$props3.isTableHovered;
       if (!tableRef) {
         return null;
       }
@@ -195,6 +198,7 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         tableRef: tableRef,
         tableNode: tableNode,
         hoveredCell: hoveredCell,
+        isTableHovered: isTableHovered,
         editorView: editorView,
         tableActive: tableActive,
         isInDanger: isInDanger,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isDragRowFloatingInsertDot = exports.isDragRowControlsButton = exports.isDragCornerButton = exports.isDragColumnFloatingInsertDot = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = void 0;
+exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isDragRowFloatingInsertDot = exports.isDragRowControlsButton = exports.isDragCornerButton = exports.isDragColumnFloatingInsertDot = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = exports.findNearestCellIndexToPoint = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("../types");
 var _consts = require("../ui/consts");
@@ -206,4 +206,19 @@ var getTop = exports.getTop = function getTop(element) {
     return 0;
   }
   return (_element$getBoundingC = element === null || element === void 0 || (_element$getBoundingC2 = element.getBoundingClientRect) === null || _element$getBoundingC2 === void 0 || (_element$getBoundingC2 = _element$getBoundingC2.call(element)) === null || _element$getBoundingC2 === void 0 ? void 0 : _element$getBoundingC2.top) !== null && _element$getBoundingC !== void 0 ? _element$getBoundingC : 0;
+};
+var findNearestCellIndexToPoint = exports.findNearestCellIndexToPoint = function findNearestCellIndexToPoint(x, y) {
+  var _cell$parentElement;
+  var elements = document.elementsFromPoint(x, y);
+  var cell = elements.find(function (el) {
+    return el.nodeName.toUpperCase() === 'TD' || el.nodeName.toUpperCase() === 'TH';
+  });
+  var 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/cjs/plugins/table/utils/index.js

@@ -105,6 +105,12 @@ Object.defineProperty(exports, "findControlsHoverDecoration", {
     return _decoration.findControlsHoverDecoration;
   }
 });
+Object.defineProperty(exports, "findNearestCellIndexToPoint", {
+  enumerable: true,
+  get: function get() {
+    return _dom.findNearestCellIndexToPoint;
+  }
+});
 Object.defineProperty(exports, "getColumnClassNames", {
   enumerable: true,
   get: function get() {

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

@@ -108,15 +108,32 @@ export const hideResizeHandleLine = () => createCommand(state => ({
     decorationSet: updatePluginStateDecorations(state, [], TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
   }
 }));
-export const hoverCell = (rowIndex, colIndex, colWidth, colHeight) => createCommand(() => {
+export const setTableHovered = hovered => createCommand(() => {
+  return {
+    type: 'TABLE_HOVERED',
+    data: {
+      isTableHovered: hovered
+    }
+  };
+}, tr => tr.setMeta('addToHistory', false));
+export const hoverCell = (rowIndex, colIndex) => createCommand(state => {
+  const {
+    hoveredCell: prevHoveredCell
+  } = getPluginState(state);
+
+  // If no arguments have been passed then the intention it to reset the hover cell data
+  const clear = rowIndex === undefined && colIndex === undefined;
+  const nextRowIndex = clear ? undefined : rowIndex !== null && rowIndex !== void 0 ? rowIndex : prevHoveredCell.rowIndex;
+  const 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,
-        colIndex,
-        colWidth,
-        colHeight
+        rowIndex: nextRowIndex,
+        colIndex: nextColIndex
       }
     }
   };

package/dist/es2019/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/es2019/plugins/table/commands/misc.js

@@ -209,11 +209,16 @@ export const getTableElementMoveTypeBySlice = (slice, state) => {
 export const isInsideFirstCellOfRowOrColumn = (selection, type) => {
   const table = findTable(selection);
   if (!table || !type) {
-    return;
+    return false;
   }
   const map = TableMap.get(table.node);
-  const cell = selectionCell(selection);
-  const index = map.map.findIndex(value => value === cell.pos - 1);
+  const cell = findCellClosestToPos(selection.$anchor);
+  if (!cell) {
+    return false;
+  }
+  const pos = cell.pos - table.pos - 1;
+  // cell positions in table map always start at 1, as they're offsets not positions
+  const index = map.map.findIndex(value => value === pos);
   return type === 'row' ? index % map.width === 0 : index < map.width;
 };
 export const deleteTable = (state, dispatch) => {

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

@@ -4,7 +4,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';
@@ -102,7 +102,8 @@ export const handleMouseOver = (view, mouseEvent) => {
   const target = mouseEvent.target;
   const {
     insertColumnButtonIndex,
-    insertRowButtonIndex
+    insertRowButtonIndex,
+    isTableHovered
   } = getPluginState(state);
   if (isInsertRowButton(target)) {
     const [startIndex, endIndex] = getColumnOrRowIndex(target);
@@ -127,6 +128,9 @@ export const handleMouseOver = (view, mouseEvent) => {
       right: endIndex
     })(state, dispatch);
   }
+  if (!isTableHovered) {
+    return setTableHovered(true)(state, dispatch);
+  }
   return false;
 };
 
@@ -163,6 +167,19 @@ export const handleMouseOut = (view, mouseEvent) => {
   }
   return false;
 };
+export const handleMouseEnter = (view, mouseEvent) => {
+  const {
+    state,
+    dispatch
+  } = view;
+  const {
+    isTableHovered
+  } = getPluginState(state);
+  if (!isTableHovered) {
+    return setTableHovered(true)(state, dispatch);
+  }
+  return false;
+};
 export const handleMouseLeave = (view, event) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
@@ -174,19 +191,29 @@ export const handleMouseLeave = (view, event) => {
   const {
     insertColumnButtonIndex,
     insertRowButtonIndex,
-    isDragAndDropEnabled
+    isDragAndDropEnabled,
+    isTableHovered
   } = getPluginState(state);
+  if (isTableHovered) {
+    if (isDragAndDropEnabled) {
+      const {
+        isDragMenuOpen
+      } = getDragDropPluginState(state);
+      !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;
+  }
   const target = event.target;
   if (isTableControlsButton(target)) {
     return true;
   }
-  if (isDragAndDropEnabled) {
-    const {
-      isDragMenuOpen
-    } = getDragDropPluginState(state);
-    // 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;
   }
@@ -331,9 +358,12 @@ export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorV
   }
   return tr;
 };
-export const whenTableInFocus = (eventHandler, elementContentRects) => (view, mouseEvent) => {
+export const isTableInFocus = view => {
   var _getPluginState, _getResizePluginState;
-  if (!((_getPluginState = getPluginState(view.state)) !== null && _getPluginState !== void 0 && _getPluginState.tableNode) || !!((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging)) {
+  return !!((_getPluginState = getPluginState(view.state)) !== null && _getPluginState !== void 0 && _getPluginState.tableNode) && !((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
+};
+export const whenTableInFocus = (eventHandler, elementContentRects) => (view, mouseEvent) => {
+  if (!isTableInFocus(view)) {
     return false;
   }
   return eventHandler(view, mouseEvent, elementContentRects);
@@ -342,10 +372,9 @@ const trackCellLocation = (view, mouseEvent) => {
   var _tableElement$dataset;
   const target = mouseEvent.target;
   const maybeTableCell = isElementInTableCell(target);
-  const tableRef = getPluginState(view.state).tableRef;
   const {
-    hoveredCell,
-    tableNode
+    tableNode,
+    tableRef
   } = getPluginState(view.state);
   const tableElement = closestElement(target, 'table');
 
@@ -359,17 +388,13 @@ const trackCellLocation = (view, mouseEvent) => {
   const htmlColIndex = maybeTableCell.cellIndex;
   const rowElement = closestElement(target, 'tr');
   const htmlRowIndex = rowElement && rowElement.rowIndex;
-  const colHeight = tableRef.offsetHeight;
-  const colWidth = maybeTableCell.offsetWidth;
   const tableMap = tableNode && TableMap.get(tableNode);
   let colIndex = htmlColIndex;
   if (tableMap) {
     const 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 const withCellTracking = (eventHandler, elementContentRects) => (view, mouseEvent) => {
   if (getPluginState(view.state).isDragAndDropEnabled && !getDragDropPluginState(view.state).isDragging) {