@atlaskit/editor-plugin-table 5.4.14 → 5.4.16

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

@@ -1,8 +1,11 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 import React, { useCallback, useMemo } from 'react';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
+import { getPluginState as getDragDropPluginState } from '../../../pm-plugins/drag-and-drop/plugin-factory';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -17,7 +20,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;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -28,7 +31,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';
@@ -36,13 +40,6 @@ export var ColumnControls = function ColumnControls(_ref) {
   var columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   var selectedColIndexes = getSelectedColumns(editorView.state.selection);
-  var gridColumnPosition = useMemo(function () {
-    // if more than one row is selected, ensure the handle spans over the selected range
-    if (selectedColIndexes.includes(colIndex)) {
-      return "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length);
-    }
-    return "".concat(colIndex + 1, " / span 1");
-  }, [colIndex, selectedColIndexes]);
   var firstRow = tableRef.querySelector('tr');
   var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   var marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
@@ -68,10 +65,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 +88,66 @@ 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;
+  var generateHandleByType = useCallback(function (type) {
+    var _colWidths;
+    if (!hoveredCell) {
+      return null;
+    }
+    var _getDragDropPluginSta = getDragDropPluginState(editorView.state),
+      isDragMenuOpen = _getDragDropPluginSta.isDragMenuOpen,
+      dragMenuIndex = _getDragDropPluginSta.dragMenuIndex,
+      dragMenuDirection = _getDragDropPluginSta.dragMenuDirection;
+    var isHover = type === 'hover';
+    var isHoveredOnSelectedColumn = isDragMenuOpen && dragMenuDirection === 'column' && dragMenuIndex === colIndex;
+    var showCondition = isHover ? !isHoveredOnSelectedColumn && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : isDragMenuOpen && dragMenuDirection === 'column';
+    if (!showCondition) {
+      return null;
+    }
+    var selectedColumnPosition = "".concat(dragMenuIndex + 1, " / span ").concat(selectedColIndexes.length);
+    var gridColumnPosition = selectedColIndexes.includes(colIndex) ? "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length) : "".concat(colIndex + 1, " / span 1");
+    var selectedApprearance = isInDanger ? 'danger' : 'selected';
+    var hoveredAppearance = selectedColIndexes.includes(colIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
+    return showCondition && /*#__PURE__*/React.createElement("div", {
+      key: type,
+      style: {
+        gridColumn: isHover ? gridColumnPosition : selectedColumnPosition,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 'fit-content',
+        placeSelf: 'center',
+        zIndex: 99
+      },
+      "data-column-control-index": hoveredCell.colIndex,
+      "data-testid": isHover ? 'table-floating-column-control' : 'table-floating-column-control-selected'
+    }, /*#__PURE__*/React.createElement(DragHandle, {
+      direction: "column",
+      tableLocalId: localId || '',
+      indexes: isHover ? colIndexes : selectedColIndexes,
+      forceDefaultHandle: !isHover,
+      previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : 48,
+      previewHeight: previewHeight,
+      appearance: isHover ? hoveredAppearance : selectedApprearance,
+      onClick: handleClick,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      onMouseUp: handleMouseUp,
+      editorView: editorView
+    }));
+  }, [colIndex, previewHeight, colWidths, colIndexes, editorView, handleClick, handleMouseOut, handleMouseOver, handleMouseUp, hoveredCell, isInDanger, localId, selectedColIndexes]);
+  var columnHandles = useCallback(function (hoveredCell) {
+    if (!hoveredCell) {
+      return null;
+    }
+    if (hoveredCell.colIndex === undefined) {
+      return generateHandleByType('selected');
+    }
+    var sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
+    return hoveredCell.colIndex < selectedColIndexes[0] ? sortedHandles : sortedHandles.reverse();
+  }, [generateHandleByType, selectedColIndexes]);
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
@@ -115,30 +176,6 @@ export var ColumnControls = function ColumnControls(_ref) {
         right: '0'
       } : {}
     }));
-  }), tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
-    style: {
-      gridColumn: gridColumnPosition,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: 'fit-content',
-      placeSelf: 'center',
-      zIndex: 99
-    },
-    "data-column-control-index": hoveredCell.colIndex,
-    "data-testid": "table-floating-column-control"
-  }, /*#__PURE__*/React.createElement(DragHandle, {
-    direction: "column",
-    tableLocalId: localId || '',
-    indexes: colIndexes,
-    previewWidth: hoveredCell.colWidth,
-    previewHeight: hoveredCell.colHeight,
-    appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
-    onClick: handleClick,
-    onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut,
-    onMouseUp: handleMouseUp,
-    editorView: editorView
-  }))));
+  }), tableActive && !isResizing && columnHandles(hoveredCell)));
 };
 export default ColumnControls;

package/dist/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

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

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,

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

@@ -200,4 +200,19 @@ export var 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;
+};
+export var 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/esm/plugins/table/utils/index.js

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

package/dist/types/plugins/table/commands/hover.d.ts

@@ -6,4 +6,5 @@ export declare const hoverTable: (isInDanger?: boolean, isSelected?: boolean) =>
 export declare const clearHoverSelection: () => import("@atlaskit/editor-common/types").Command;
 export declare const showResizeHandleLine: (cellColumnPositioning: CellColumnPositioning) => import("@atlaskit/editor-common/types").Command;
 export declare const hideResizeHandleLine: () => import("@atlaskit/editor-common/types").Command;
-export declare const hoverCell: (rowIndex?: number, colIndex?: number, colWidth?: number, colHeight?: number) => import("@atlaskit/editor-common/types").Command;
+export declare const setTableHovered: (hovered: boolean) => import("@atlaskit/editor-common/types").Command;
+export declare const hoverCell: (rowIndex?: number, colIndex?: number) => import("@atlaskit/editor-common/types").Command;

package/dist/types/plugins/table/commands/index.d.ts

@@ -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/types/plugins/table/commands/misc.d.ts

@@ -13,7 +13,7 @@ export declare const transformSliceToRemoveColumnsWidths: (slice: Slice, schema:
 export declare const countCellsInSlice: (slice: Slice, schema: Schema, type?: 'row' | 'column') => number;
 export declare const getTableSelectionType: (selection: Selection) => "row" | "column" | undefined;
 export declare const getTableElementMoveTypeBySlice: (slice: Slice, state: EditorState) => "row" | "column" | undefined;
-export declare const isInsideFirstCellOfRowOrColumn: (selection: Selection, type?: 'row' | 'column') => boolean | undefined;
+export declare const isInsideFirstCellOfRowOrColumn: (selection: Selection, type?: 'row' | 'column') => boolean;
 export declare const deleteTable: Command;
 export declare const deleteTableIfSelected: Command;
 export declare const convertFirstRowToHeader: (schema: Schema) => (tr: Transaction) => Transaction;

package/dist/types/plugins/table/event-handlers.d.ts

@@ -8,9 +8,11 @@ export declare const handleClick: (view: EditorView, event: Event) => boolean;
 export declare const handleMouseOver: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseDown: (_: EditorView, event: Event) => boolean;
 export declare const handleMouseOut: (view: EditorView, mouseEvent: Event) => boolean;
+export declare const handleMouseEnter: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseLeave: (view: EditorView, event: Event) => boolean;
 export declare const handleMouseMove: (view: EditorView, event: Event, elementContentRects?: ElementContentRects) => boolean;
 export declare function handleTripleClick(view: EditorView, pos: number): boolean;
 export declare const handleCut: (oldTr: Transaction, oldState: EditorState, newState: EditorState, editorAnalyticsAPI?: EditorAnalyticsAPI, editorView?: EditorView) => Transaction;
+export declare const isTableInFocus: (view: EditorView) => boolean;
 export declare const whenTableInFocus: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;
 export declare const withCellTracking: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;

package/dist/types/plugins/table/pm-plugins/drag-and-drop/commands.d.ts

@@ -8,5 +8,5 @@ export declare const getDecorations: (state: EditorState) => DecorationSet;
 export declare const updatePluginStateDecorations: (state: EditorState, decorations: Decoration[], key: TableDecorations) => DecorationSet;
 export declare const setDropTarget: (type: DropTargetType, index: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
-export declare const moveSource: (sourceType: DraggableType, sourceIndex: number, targetIndex: number) => import("@atlaskit/editor-common/types").Command;
+export declare const moveSource: (sourceType: DraggableType, sourceIndex: number, targetIndex: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const toggleDragMenu: (isDragMenuOpen: boolean | undefined, direction?: TableDirection, index?: number) => import("@atlaskit/editor-common/types").Command;

package/dist/types/plugins/table/types.d.ts

@@ -47,8 +47,6 @@ export type CellColumnPositioning = Pick<Rect, 'right' | 'left'>;
 export interface CellHoverMeta {
     colIndex?: number;
     rowIndex?: number;
-    colWidth?: number;
-    colHeight?: number;
 }
 export interface TablePluginState {
     editorHasFocus?: boolean;
@@ -82,6 +80,7 @@ export interface TablePluginState {
     wasFullWidthModeEnabled?: boolean;
     isTableResizingEnabled?: boolean;
     isDragAndDropEnabled?: boolean;
+    isTableHovered?: boolean;
 }
 export type TablePluginAction = {
     type: 'SET_EDITOR_FOCUS';
@@ -175,6 +174,11 @@ export type TablePluginAction = {
     data: {
         hoveredCell: CellHoverMeta;
     };
+} | {
+    type: 'TABLE_HOVERED';
+    data: {
+        isTableHovered: boolean;
+    };
 } | {
     type: 'SET_TARGET_CELL_POSITION';
     data: {
@@ -416,3 +420,4 @@ export interface DraggableData {
     targetClosestEdge: Edge;
     direction: 1 | -1;
 }
+export type HandleTypes = 'hover' | 'selected';

package/dist/types/plugins/table/ui/DragHandle/HandleIconComponent.d.ts

@@ -2,6 +2,7 @@
 type HandleIconProps = {
     hasMergedCells: boolean;
     direction: 'row' | 'column';
+    forceDefaultHandle: boolean;
     isDragMenuOpen: boolean | undefined;
     isRowHandleHovered: boolean;
     isColumnHandleHovered: boolean;

package/dist/types/plugins/table/ui/DragHandle/index.d.ts

@@ -5,6 +5,7 @@ type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger';
 type DragHandleProps = {
     tableLocalId: string;
     indexes: number[];
+    forceDefaultHandle?: boolean;
     previewWidth?: number;
     previewHeight?: number;
     direction?: TableDirection;
@@ -15,5 +16,5 @@ type DragHandleProps = {
     onMouseUp?: MouseEventHandler;
     editorView: EditorView;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, }: DragHandleProps) => JSX.Element;
 export {};

package/dist/types/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -13,6 +13,7 @@ export interface ColumnControlsProps {
     rowHeights?: number[];
     colWidths?: (number | undefined)[];
     hasHeaderColumn?: boolean;
+    isTableHovered?: boolean;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, }: ColumnControlsProps) => JSX.Element;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

package/dist/types/plugins/table/ui/TableFloatingColumnControls/index.d.ts

@@ -21,6 +21,7 @@ export interface Props {
     isResizing?: boolean;
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
+    isTableHovered?: boolean;
 }
 export declare const TableFloatingColumnControls: React.FC<Props>;
 export default TableFloatingColumnControls;

package/dist/types/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -12,6 +12,7 @@ type DragControlsProps = {
     hoveredCell?: CellHoverMeta;
     isInDanger?: boolean;
     isResizing?: boolean;
+    isTableHovered?: boolean;
     hoverRows: (rows: number[], danger?: boolean) => void;
     selectRow: (row: number, expand: boolean) => void;
     updateCellHoverLocation: (rowIndex: number) => void;

package/dist/types/plugins/table/ui/TableFloatingControls/index.d.ts

@@ -12,6 +12,7 @@ export interface Props {
     tableNode?: PmNode;
     tableActive?: boolean;
     isInDanger?: boolean;
+    isTableHovered?: boolean;
     isResizing?: boolean;
     isHeaderRowEnabled?: boolean;
     isHeaderColumnEnabled?: boolean;

package/dist/types/plugins/table/utils/dom.d.ts

@@ -26,3 +26,7 @@ export type TableDOMElements = {
 };
 export declare const getTree: (tr: HTMLTableRowElement) => TableDOMElements | null;
 export declare const getTop: (element: HTMLElement | Window | undefined) => number;
+export declare const findNearestCellIndexToPoint: (x: number, y: number) => {
+    row: number;
+    col: number;
+} | undefined;

package/dist/types/plugins/table/utils/index.d.ts

@@ -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 type { RowParams } from './row-controls';

package/dist/types-ts4.5/plugins/table/commands/hover.d.ts

@@ -6,4 +6,5 @@ export declare const hoverTable: (isInDanger?: boolean, isSelected?: boolean) =>
 export declare const clearHoverSelection: () => import("@atlaskit/editor-common/types").Command;
 export declare const showResizeHandleLine: (cellColumnPositioning: CellColumnPositioning) => import("@atlaskit/editor-common/types").Command;
 export declare const hideResizeHandleLine: () => import("@atlaskit/editor-common/types").Command;
-export declare const hoverCell: (rowIndex?: number, colIndex?: number, colWidth?: number, colHeight?: number) => import("@atlaskit/editor-common/types").Command;
+export declare const setTableHovered: (hovered: boolean) => import("@atlaskit/editor-common/types").Command;
+export declare const hoverCell: (rowIndex?: number, colIndex?: number) => import("@atlaskit/editor-common/types").Command;

package/dist/types-ts4.5/plugins/table/commands/index.d.ts

@@ -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/types-ts4.5/plugins/table/commands/misc.d.ts

@@ -13,7 +13,7 @@ export declare const transformSliceToRemoveColumnsWidths: (slice: Slice, schema:
 export declare const countCellsInSlice: (slice: Slice, schema: Schema, type?: 'row' | 'column') => number;
 export declare const getTableSelectionType: (selection: Selection) => "row" | "column" | undefined;
 export declare const getTableElementMoveTypeBySlice: (slice: Slice, state: EditorState) => "row" | "column" | undefined;
-export declare const isInsideFirstCellOfRowOrColumn: (selection: Selection, type?: 'row' | 'column') => boolean | undefined;
+export declare const isInsideFirstCellOfRowOrColumn: (selection: Selection, type?: 'row' | 'column') => boolean;
 export declare const deleteTable: Command;
 export declare const deleteTableIfSelected: Command;
 export declare const convertFirstRowToHeader: (schema: Schema) => (tr: Transaction) => Transaction;