@atlaskit/editor-plugin-table 5.4.14 → 5.4.15

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,7 +123,7 @@ 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',
@@ -131,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,

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: {

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;

package/dist/types-ts4.5/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-ts4.5/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-ts4.5/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: {

package/dist/types-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/plugins/table/utils/dom.d.ts

@@ -29,3 +29,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-ts4.5/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.4.14",
+  "version": "5.4.15",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^35.0.0",
-    "@atlaskit/custom-steps": "^0.0.6",
+    "@atlaskit/custom-steps": "^0.0.7",
     "@atlaskit/editor-common": "^76.25.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.3.0",

package/src/__tests__/unit/event-handlers.ts

@@ -191,7 +191,7 @@ describe('table event handlers', () => {
 
   describe('#handleMouseOver', () => {
     describe('when insert col/row button is hidden', () => {
-      it('should return false', () => {
+      it('should set table as hovered', () => {
         const { editorView } = editor(
           doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
         );
@@ -205,7 +205,7 @@ describe('table event handlers', () => {
         const event = {
           target: editorView.dom.querySelector('td'),
         };
-        expect(handleMouseOver(editorView, event as MouseEvent)).toEqual(false);
+        expect(handleMouseOver(editorView, event as MouseEvent)).toEqual(true);
       });
     });
 

package/src/__tests__/unit/ui/RowDragControls.tsx

@@ -71,6 +71,7 @@ describe('NumberColumn', () => {
           tableActive
           editorView={editorView}
           hoveredCell={{ rowIndex: 1, colIndex: 1 }}
+          isTableHovered={true}
           hoverRows={jest.fn()}
           selectRow={jest.fn()}
           updateCellHoverLocation={jest.fn()}