@atlaskit/editor-plugin-table 5.4.13 → 5.4.15

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/DragHandle/index.js

@@ -31,7 +31,6 @@ export var DragHandle = function DragHandle(_ref) {
     previewContainer = _useState2[0],
     setPreviewContainer = _useState2[1];
   var _getPluginState = getPluginState(editorView.state),
-    isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled,
     hoveredColumns = _getPluginState.hoveredColumns,
     hoveredRows = _getPluginState.hoveredRows,
     hoveredCell = _getPluginState.hoveredCell;
@@ -104,11 +103,10 @@ export var DragHandle = function DragHandle(_ref) {
     }
   }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
-    className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, ClassName.CONTROLS_BUTTON, appearance, _defineProperty({}, ClassName.DRAG_HANDLE_DISABLED, isDragAndDropEnabled && hasMergedCells)),
+    className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, _defineProperty({}, ClassName.DRAG_HANDLE_DISABLED, hasMergedCells)),
     ref: dragHandleDivRef,
     style: {
-      transform: direction === 'column' ? 'none' : 'rotate(90deg)',
-      pointerEvents: 'auto'
+      transform: direction === 'column' ? 'none' : 'rotate(90deg)'
     },
     "data-testid": "table-floating-column-controls-drag-handle",
     onMouseOver: onMouseOver,
@@ -120,7 +118,11 @@ export var DragHandle = function DragHandle(_ref) {
       _onMouseUp && _onMouseUp(e);
     },
     onClick: onClick
-  }, /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps)), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      pointerEvents: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps))), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
     direction: direction,
     width: previewWidth,
     height: previewHeight

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

package/dist/esm/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';
@@ -32,7 +34,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     return null;
   }
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     alignX: "right",
     alignY: "top",
     target: targetCellRef,
@@ -48,9 +50,9 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     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/esm/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -1,4 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/** @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';
@@ -29,15 +31,15 @@ var convertToDropdownItems = function 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
     });
@@ -129,7 +131,7 @@ export var DragMenu = function DragMenu(_ref) {
   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/esm/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -17,7 +17,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 export var 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,
@@ -28,7 +28,8 @@ export var 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';
@@ -68,10 +69,14 @@ export var 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)) {
-      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]);
   var handleMouseOut = useCallback(function () {
     if (tableActive) {
       var state = editorView.state,
@@ -87,6 +92,9 @@ export var ColumnControls = function ColumnControls(_ref) {
   var colIndexes = 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.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
@@ -115,12 +123,14 @@ export var ColumnControls = function ColumnControls(_ref) {
         right: '0'
       } : {}
     }));
-  }), tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
+  }), tableActive && !isResizing && isTableHovered && !!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,
@@ -129,8 +139,8 @@ export var 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/esm/plugins/table/ui/TableFloatingColumnControls/index.js

@@ -18,7 +18,8 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     isResizing = _ref.isResizing,
     stickyHeader = _ref.stickyHeader,
     selection = _ref.selection,
-    isInDanger = _ref.isInDanger;
+    isInDanger = _ref.isInDanger,
+    isTableHovered = _ref.isTableHovered;
   var _useState = useState({
       width: 0,
       height: 0
@@ -103,6 +104,7 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     tableRef: tableRef,
     isResizing: isResizing,
     tableActive: tableActive,
+    isTableHovered: isTableHovered,
     stickyTop: tableActive ? stickyTop : undefined,
     localId: currentNodeLocalId,
     isInDanger: isInDanger,

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

@@ -32,6 +32,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;
@@ -147,7 +148,7 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         left: "var(--ds-space-negative-100, -8px)"
       }
     }));
-  }), !isResizing && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
+  }), !isResizing && isTableHovered && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
       gridRow: gridRowPosition,
       gridColumn: '2',

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

@@ -13,7 +13,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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';
@@ -49,10 +48,12 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         tableActive = _this$props.tableActive;
       var state = editorView.state,
         dispatch = editorView.dispatch;
-      var _getPluginState = getPluginState(state),
-        hoveredCell = _getPluginState.hoveredCell;
-      if (tableActive && hoveredCell.rowIndex !== rowIndex) {
-        hoverCell(rowIndex, hoveredCell.colIndex)(state, dispatch);
+      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 = {
@@ -124,8 +125,9 @@ var TableFloatingControls = /*#__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 || 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 || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell || isTableHovered !== nextProps.isTableHovered;
     }
   }, {
     key: "componentWillUnmount",
@@ -151,7 +153,8 @@ var TableFloatingControls = /*#__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;
       }
@@ -185,6 +188,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         tableRef: tableRef,
         tableNode: tableNode,
         hoveredCell: hoveredCell,
+        isTableHovered: isTableHovered,
         editorView: editorView,
         tableActive: tableActive,
         isInDanger: isInDanger,