@atlaskit/editor-plugin-table 5.4.14 → 5.4.15

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

@@ -528,7 +528,8 @@ class TableComponent extends React.Component {
     const {
       isInDanger,
       hoveredRows,
-      hoveredCell
+      hoveredCell,
+      isTableHovered
     } = getPluginState(view.state);
     const tableRef = this.table || undefined;
     const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
@@ -540,6 +541,7 @@ class TableComponent extends React.Component {
       tableActive: tableActive,
       hoveredRows: hoveredRows,
       hoveredCell: hoveredCell,
+      isTableHovered: isTableHovered,
       isInDanger: isInDanger,
       isResizing: isResizing,
       isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
@@ -562,6 +564,7 @@ class TableComponent extends React.Component {
       isInDanger: isInDanger,
       hoveredRows: hoveredRows,
       hoveredCell: hoveredCell,
+      isTableHovered: isTableHovered,
       isResizing: isResizing,
       ordering: ordering,
       hasHeaderRow: hasHeaderRow

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

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

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

@@ -3,8 +3,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';
@@ -112,29 +114,60 @@ export const createPlugin = (dispatch, eventDispatcher) => {
             setDropTarget(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
           onDrop(event) {
+            var _cell$row, _cell$col;
             const 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.
+            const {
+              hoveredCell
+            } = getTablePluginState(editorView.state);
+            const cell = findNearestCellIndexToPoint(event.location.current.input.clientX, event.location.current.input.clientY);
+            const tr = editorView.state.tr;
+            const 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;
             }
             const {
               sourceType,
               sourceIndexes,
+              targetIndex,
               targetAdjustedIndex,
               direction
             } = data;
 
+            // 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.
             const hasMergedCells = sourceType === 'table-row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
             if (hasMergedCells(targetAdjustedIndex)(editorView.state.selection)) {
-              clearDropTarget()(editorView.state, editorView.dispatch);
+              clearDropTarget(tr)(editorView.state, editorView.dispatch);
               return;
             }
             const [sourceIndex] = sourceIndexes;
             requestAnimationFrame(() => {
-              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/es2019/plugins/table/pm-plugins/main.js

@@ -8,7 +8,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';
@@ -24,6 +24,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
   var _window;
   const state = createPluginState(dispatch, {
     pluginConfig,
+    isTableHovered: false,
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
     isFullWidthModeEnabled: fullWidthModeEnabled,
@@ -236,11 +237,12 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         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
     }

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

@@ -114,6 +114,7 @@ export default ((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/es2019/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';
@@ -87,7 +89,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     },
     selected: false,
     disabled: false,
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: jsx("div", {
       css: shortcutStyle
     }, tooltip(addColumnAfter))
   }, {
@@ -106,7 +108,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     },
     selected: false,
     disabled: false,
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: jsx("div", {
       css: shortcutStyle
     }, tooltip(addRowAfter))
   }, {
@@ -239,7 +241,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     },
     selected: false,
     disabled: false,
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: jsx("div", {
       css: shortcutStyle
     }, tooltip(backspace))
   });

package/dist/es2019/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';
@@ -13,19 +15,19 @@ export const ColumnResizeWidget = ({
     formatMessage
   } = useIntl();
   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"
-  }, tooltipProps => /*#__PURE__*/React.createElement("div", _extends({
+  }, tooltipProps => jsx("div", _extends({
     className: TableCssClassName.RESIZE_HANDLE_DECORATION,
     "data-start-index": startIndex,
     "data-end-index": endIndex

package/dist/es2019/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/es2019/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';
@@ -48,25 +50,25 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
     return null;
   }
   const labelCellOptions = formatMessage(messages.cellOptions);
-  const button = /*#__PURE__*/React.createElement("div", {
+  const button = jsx("div", {
     css: theme => [tableFloatingCellButtonStyles({
       theme
     }), isContextualMenuOpen && tableFloatingCellButtonSelectedStyles({
       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
   }));
   const 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,
@@ -76,7 +78,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
       isContextualMenuOpen: isContextualMenuOpen
     }, button);
   }
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     alignX: "right",
     alignY: "start",
     target: targetCellRef,
@@ -91,9 +93,9 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
 });
 const 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/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

@@ -27,9 +27,10 @@ export const ColumnControls = ({
   isInDanger,
   rowHeights,
   colWidths,
-  hasHeaderColumn
+  hasHeaderColumn,
+  isTableHovered
 }) => {
-  var _colWidths$map$join, _rowHeights$;
+  var _colWidths$map$join, _rowHeights$, _rowHeights$reduce, _colWidths;
   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 : []);
@@ -73,10 +74,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 +101,7 @@ 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;
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
@@ -123,7 +129,7 @@ export const ColumnControls = ({
     style: columnParams.length - 1 === index ? {
       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',
@@ -139,8 +145,8 @@ export const ColumnControls = ({
     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/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

@@ -30,6 +30,7 @@ const DragControlsComponent = ({
   editorView,
   isInDanger,
   isResizing,
+  isTableHovered,
   hoverRows,
   selectRow,
   updateCellHoverLocation
@@ -146,7 +147,7 @@ const DragControlsComponent = ({
       position: 'relative',
       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/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';