@atlaskit/editor-plugin-table 5.3.13 → 5.3.15

package/src/__tests__/unit/pm-plugins/decorations/plugin.ts

@@ -23,7 +23,6 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import tablePlugin from '../../../../plugins/table';
 import { selectColumn } from '../../../../plugins/table/commands';
@@ -55,141 +54,27 @@ describe('decorations plugin', () => {
   // ED-8457
   describe('when there is a selection pointer set', () => {
     describe('should remove the column selected decorations', () => {
-      ffTest(
-        'platform.editor.table.drag-and-drop',
-        () => {
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-
-          selectColumn(1)(editorView.state, editorView.dispatch);
-
-          const { tr: transaction } = editorView.state;
-
-          transaction.setMeta('pointer', true);
-          transaction.setSelection(Selection.atStart(transaction.doc));
-          editorView.dispatch(transaction);
-
-          const decorationSet = getDecorations(editorView.state);
-
-          const columnSelectedDecorations = decorationSet.find(
-            undefined,
-            undefined,
-            (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
-          );
-
-          expect(columnSelectedDecorations).toHaveLength(0);
-        },
-        () => {
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-
-          selectColumn(1)(editorView.state, editorView.dispatch);
-
-          const { tr: transaction } = editorView.state;
-
-          transaction.setMeta('pointer', true);
-          transaction.setSelection(Selection.atStart(transaction.doc));
-          editorView.dispatch(transaction);
-
-          const decorationSet = getDecorations(editorView.state);
-
-          const columnSelectedDecorations = decorationSet.find(
-            undefined,
-            undefined,
-            (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
-          );
-
-          expect(columnSelectedDecorations).toHaveLength(0);
-        },
+      const { editorView } = editor(
+        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
       );
-    });
-  });
 
-  describe('when the hovered cell state changes', () => {
-    describe('should not add column control decorations', () => {
-      ffTest(
-        'platform.editor.table.drag-and-drop',
-        () => {
-          const pluginState = DecorationSet.empty;
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
+      selectColumn(1)(editorView.state, editorView.dispatch);
 
-          const transaction = editorView.state.tr.setMeta(pluginKey, {
-            type: 'HOVER_CELL',
-            data: {
-              colIndex: 0,
-              rowIndex: 0,
-            },
-          });
-
-          const oldState = handleDocOrSelectionChanged(
-            transaction,
-            pluginState,
-            editorView.state,
-            editorView.state,
-          );
-
-          editorView.dispatch(transaction);
-          const newState = handleDocOrSelectionChanged(
-            transaction,
-            oldState,
-            editorView.state,
-            editorView.state,
-          );
+      const { tr: transaction } = editorView.state;
 
-          const columnDecorations = newState.find(
-            undefined,
-            undefined,
-            (spec) =>
-              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
-              -1,
-          );
+      transaction.setMeta('pointer', true);
+      transaction.setSelection(Selection.atStart(transaction.doc));
+      editorView.dispatch(transaction);
 
-          expect(columnDecorations).toHaveLength(0);
-        },
-        () => {
-          const pluginState = DecorationSet.empty;
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-
-          const transaction = editorView.state.tr.setMeta(pluginKey, {
-            type: 'HOVER_CELL',
-            data: {
-              colIndex: 0,
-              rowIndex: 0,
-            },
-          });
+      const decorationSet = getDecorations(editorView.state);
 
-          const oldState = handleDocOrSelectionChanged(
-            transaction,
-            pluginState,
-            editorView.state,
-            editorView.state,
-          );
-
-          editorView.dispatch(transaction);
-          const newState = handleDocOrSelectionChanged(
-            transaction,
-            oldState,
-            editorView.state,
-            editorView.state,
-          );
-
-          const columnDecorations = newState.find(
-            undefined,
-            undefined,
-            (spec) =>
-              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
-              -1,
-          );
-
-          expect(columnDecorations).toHaveLength(2);
-        },
+      const columnSelectedDecorations = decorationSet.find(
+        undefined,
+        undefined,
+        (spec) => spec.key.indexOf(TableDecorations.COLUMN_SELECTED) > -1,
       );
+
+      expect(columnSelectedDecorations).toHaveLength(0);
     });
   });
 
@@ -220,75 +105,36 @@ describe('decorations plugin', () => {
 
   describe('when the table changed', () => {
     describe('should not re-create the column controls decorations', () => {
-      ffTest(
-        'platform.editor.table.drag-and-drop',
-        () => {
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-          const { state } = editorView;
-
-          const nextPluginState = handleDocOrSelectionChanged(
-            editorView.state.tr,
-            DecorationSet.empty,
-            editorView.state,
-            state,
-          );
-
-          const { tr: transaction } = state;
-          editorView.dispatch(addColumnAt(2)(transaction));
-
-          const newState = handleDocOrSelectionChanged(
-            transaction,
-            nextPluginState,
-            editorView.state,
-            state,
-          );
-          const expectedDecorationSet = newState;
-          const decorations = expectedDecorationSet.find(
-            undefined,
-            undefined,
-            (spec) =>
-              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
-              -1,
-          );
-
-          expect(decorations).toHaveLength(0);
-        },
-        () => {
-          const { editorView } = editor(
-            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
-          );
-          const { state } = editorView;
-
-          const nextPluginState = handleDocOrSelectionChanged(
-            editorView.state.tr,
-            DecorationSet.empty,
-            editorView.state,
-            state,
-          );
+      const { editorView } = editor(
+        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+      );
+      const { state } = editorView;
 
-          const { tr: transaction } = state;
-          editorView.dispatch(addColumnAt(2)(transaction));
+      const nextPluginState = handleDocOrSelectionChanged(
+        editorView.state.tr,
+        DecorationSet.empty,
+        editorView.state,
+        state,
+      );
 
-          const newState = handleDocOrSelectionChanged(
-            transaction,
-            nextPluginState,
-            editorView.state,
-            state,
-          );
-          const expectedDecorationSet = newState;
-          const decorations = expectedDecorationSet.find(
-            undefined,
-            undefined,
-            (spec) =>
-              spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) >
-              -1,
-          );
+      const { tr: transaction } = state;
+      editorView.dispatch(addColumnAt(2)(transaction));
 
-          expect(decorations).toHaveLength(3);
-        },
+      const newState = handleDocOrSelectionChanged(
+        transaction,
+        nextPluginState,
+        editorView.state,
+        state,
       );
+      const expectedDecorationSet = newState;
+      const decorations = expectedDecorationSet.find(
+        undefined,
+        undefined,
+        (spec) =>
+          spec.key.indexOf(TableDecorations.COLUMN_CONTROLS_DECORATIONS) > -1,
+      );
+
+      expect(decorations).toHaveLength(3);
     });
   });
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl-next';
 
 import type { DocBuilder } from '@atlaskit/editor-common/types';
@@ -29,7 +29,7 @@ import {
 
 import tablePlugin from '../../../plugins/table-plugin';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import { TableCssClassName as ClassName } from '../../../plugins/table/types';
+// import { TableCssClassName as ClassName } from '../../../plugins/table/types';
 import { DragControls } from '../../../plugins/table/ui/TableFloatingControls/RowControls';
 
 describe('NumberColumn', () => {
@@ -63,7 +63,7 @@ describe('NumberColumn', () => {
     );
     const ref = editorView.dom.querySelector('table');
 
-    const { container } = render(
+    render(
       <IntlProvider locale="en">
         <DragControls
           tableRef={ref!}
@@ -77,11 +77,9 @@ describe('NumberColumn', () => {
       </IntlProvider>,
     );
 
-    const dragHandleContainer = container.querySelector(
-      `.${ClassName.ROW_CONTROLS_WITH_DRAG}`,
-    );
+    const dragHandle = screen.getAllByTestId('table-floating-row-drag-handle');
 
-    expect(dragHandleContainer?.children.length).toBe(1);
+    expect(dragHandle.length).toBe(1);
   });
 
   it('should not render any drag handle containers if hoveredCell is undefined', () => {
@@ -98,7 +96,7 @@ describe('NumberColumn', () => {
     );
     const ref = editorView.dom.querySelector('table');
 
-    const { container } = render(
+    render(
       <IntlProvider locale="en">
         <DragControls
           tableRef={ref!}
@@ -115,10 +113,10 @@ describe('NumberColumn', () => {
       </IntlProvider>,
     );
 
-    const dragHandleContainer = container.querySelector(
-      `.${ClassName.ROW_CONTROLS_WITH_DRAG}`,
+    const dragHandle = screen.queryAllByTestId(
+      'table-floating-row-drag-handle',
     );
 
-    expect(dragHandleContainer?.children.length).toBe(0);
+    expect(dragHandle.length).toBe(0);
   });
 });

package/src/plugins/table/event-handlers.ts

@@ -55,6 +55,8 @@ import {
   isCell,
   isColumnControlsDecorations,
   isCornerButton,
+  isDragColumnFloatingInsertDot,
+  isDragRowFloatingInsertDot,
   isInsertRowButton,
   isResizeHandleDecoration,
   isRowControlsButton,
@@ -78,6 +80,12 @@ const isFocusingFloatingToolbar = (event: Event) =>
   event.relatedTarget instanceof HTMLElement &&
   event.relatedTarget.closest('[role="toolbar"]');
 
+const isFocusingDragHandles = (event: Event) =>
+  event instanceof FocusEvent &&
+  event.relatedTarget instanceof HTMLElement &&
+  event.relatedTarget.closest('button') &&
+  event.relatedTarget.getAttribute('draggable') === 'true';
+
 export const handleBlur = (view: EditorView, event: Event): boolean => {
   const { state, dispatch } = view;
   // IE version check for ED-4665
@@ -86,7 +94,8 @@ export const handleBlur = (view: EditorView, event: Event): boolean => {
     browser.ie_version !== 11 &&
     !isFocusingCalendar(event) &&
     !isFocusingModal(event) &&
-    !isFocusingFloatingToolbar(event)
+    !isFocusingFloatingToolbar(event) &&
+    !isFocusingDragHandles(event)
   ) {
     setEditorFocus(false)(state, dispatch);
   }
@@ -312,7 +321,10 @@ export const handleMouseMove = (
   }
   const element = event.target;
 
-  if (isColumnControlsDecorations(element)) {
+  if (
+    isColumnControlsDecorations(element) ||
+    isDragColumnFloatingInsertDot(element)
+  ) {
     const { state, dispatch } = view;
     const { insertColumnButtonIndex } = getPluginState(state);
     const [startIndex, endIndex] = getColumnOrRowIndex(element);
@@ -330,7 +342,7 @@ export const handleMouseMove = (
     }
   }
 
-  if (isRowControlsButton(element)) {
+  if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
     const { state, dispatch } = view;
     const { insertRowButtonIndex } = getPluginState(state);
     const [startIndex, endIndex] = getColumnOrRowIndex(element);

package/src/plugins/table/index.tsx

@@ -383,8 +383,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                 insertRowButtonIndex,
                 isHeaderColumnEnabled,
                 isHeaderRowEnabled,
-                tableWrapperTarget,
                 isDragAndDropEnabled,
+                tableWrapperTarget,
               } = tablePluginState!;
 
               const { allowControls } = pluginConfig;
@@ -444,6 +444,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       insertRowButtonIndex={insertRowButtonIndex}
                       isHeaderColumnEnabled={isHeaderColumnEnabled}
                       isHeaderRowEnabled={isHeaderRowEnabled}
+                      isDragAndDropEnabled={isDragAndDropEnabled}
                       editorView={editorView}
                       mountPoint={popupsMountPoint}
                       boundariesElement={popupsBoundariesElement}
@@ -481,9 +482,10 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       direction={dragAndDropState?.dragMenuDirection}
                       index={dragAndDropState?.dragMenuIndex}
                       isOpen={!!dragAndDropState?.isDragMenuOpen && !isResizing}
+                      getEditorContainerWidth={defaultGetEditorContainerWidth}
                     />
                   )}
-                  {allowControls && !isResizing && (
+                  {allowControls && !isDragAndDropEnabled && !isResizing && (
                     <FloatingDeleteButton
                       editorView={editorView}
                       selection={editorView.state.selection}

package/src/plugins/table/pm-plugins/decorations/plugin.ts

@@ -40,8 +40,7 @@ export const handleDocOrSelectionChanged = (
   } else if (
     tr.docChanged ||
     tr.selection instanceof CellSelection ||
-    changedResizing ||
-    tr.getMeta(tablePluginKey)?.type === 'HOVER_CELL'
+    changedResizing
   ) {
     return buildColumnControlsDecorations({
       decorationSet,
@@ -72,11 +71,6 @@ export const createPlugin = () => {
       apply: (tr, decorationSet, oldState, newState) => {
         let pluginState = decorationSet;
         const meta = tr.getMeta(tablePluginKey);
-        const previousHover = tablePluginKey.getState(oldState)?.hoveredCell;
-        const newHover = tablePluginKey.getState(newState)?.hoveredCell;
-        const changedCellHover =
-          previousHover?.colIndex !== newHover?.colIndex ||
-          previousHover?.rowIndex !== newHover?.rowIndex;
 
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;
@@ -85,8 +79,7 @@ export const createPlugin = () => {
         if (
           tr.docChanged ||
           tr.selectionSet ||
-          tr.getMeta(tableWidthPluginKey) ||
-          changedCellHover
+          tr.getMeta(tableWidthPluginKey)
         ) {
           pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(

package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts

@@ -15,7 +15,6 @@ import {
   findControlsHoverDecoration,
   updateDecorations,
 } from '../../../utils/decoration';
-import { pluginKey as tablePluginKey } from '../../plugin-key';
 
 import { composeDecorations } from './compose-decorations';
 import type { DecorationTransformer } from './types';
@@ -50,10 +49,9 @@ const maybeUpdateColumnControlsDecoration: DecorationTransformer = ({
   tr,
 }): DecorationSet => {
   const table = findTable(tr.selection);
-  const meta = tr.getMeta(tablePluginKey);
 
   // avoid re-drawing state if dnd decorations don't need to be updated
-  if (!table && meta?.type !== 'HOVER_CELL') {
+  if (!table) {
     return decorationSet;
   }
 

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -6,6 +6,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
+import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 
 import type { DraggableSourceData } from '../../types';
@@ -96,7 +97,14 @@ export const createPlugin = (
             // watch for changes
             return localId === tableNode?.attrs.localId;
           },
+          onDragStart: ({ location }) => {
+            autoScroller.start({ input: location.current.input });
+          },
           onDrag(event) {
+            autoScroller.updateInput({
+              input: event.location.current.input,
+            });
+
             const data = getDraggableDataFromEvent(event);
             // If no data can be found then it's most like we do not want to perform any drag actions
             if (!data) {
@@ -118,6 +126,7 @@ export const createPlugin = (
             );
           },
           onDrop(event) {
+            autoScroller.stop();
             const data = getDraggableDataFromEvent(event);
 
             // If no data can be found then it's most like we do not want to perform any drop action

package/src/plugins/table/types.ts

@@ -293,6 +293,10 @@ export const TableCssClassName = {
   CONTROLS_BUTTON_OVERLAY: `${tablePrefixSelector}-controls__button-overlay`,
   LAYOUT_BUTTON: `${tablePrefixSelector}-layout-button`,
 
+  DRAG_CONTROLS_INSERT_BUTTON: `${tablePrefixSelector}-controls__drag-insert-button`,
+  DRAG_CONTROLS_INSERT_BUTTON_INNER: `${tablePrefixSelector}-controls__drag-insert-button-inner`,
+  DRAG_CONTROLS_INSERT_BUTTON_WRAP: `${tablePrefixSelector}-controls__drag-insert-button-wrap`,
+
   CONTROLS_INSERT_MARKER: `${tablePrefixSelector}-controls__insert-marker`,
   CONTROLS_INSERT_COLUMN: `${tablePrefixSelector}-controls__insert-column`,
   CONTROLS_INSERT_ROW: `${tablePrefixSelector}-controls__insert-row`,
@@ -308,8 +312,14 @@ export const TableCssClassName = {
   CONTROLS_CORNER_BUTTON: `${tablePrefixSelector}-corner-button`,
 
   /** Controls with drag handle */
-  COLUMN_CONTROLS_WITH_DRAG: `${tablePrefixSelector}-column-controls-with-drag`,
-  ROW_CONTROLS_WITH_DRAG: `${tablePrefixSelector}-row-controls-with-drag`,
+  DRAG_ROW_CONTROLS: `${tablePrefixSelector}-drag-row-controls`,
+  DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-row-floating-insert-dot-wrapper`,
+  DRAG_ROW_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-row-floating-insert-dot`,
+
+  DRAG_COLUMN_CONTROLS: `${tablePrefixSelector}-drag-column-controls`,
+  DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-columns-floating-insert-dot-wrapper`,
+  DRAG_COLUMN_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-columns-floating-insert-dot`,
+
   DRAG_HANDLE_BUTTON_CONTAINER: `${tablePrefixSelector}-drag-handle-button-container`,
 
   /** Other classes */

package/src/plugins/table/ui/FloatingDragMenu/DragMenu.tsx

@@ -1,6 +1,10 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 
-import type { Command } from '@atlaskit/editor-common/types';
+import type {
+  Command,
+  GetEditorContainerWidth,
+} from '@atlaskit/editor-common/types';
 import {
   ArrowKeyNavigationType,
   DropdownMenu,
@@ -8,10 +12,19 @@ import {
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import {
+  findCellRectClosestToPos,
+  getSelectionRect,
+  isSelectionType,
+} from '@atlaskit/editor-tables/utils';
+import { token } from '@atlaskit/tokens';
 
+import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
 import type { PluginConfig, TableDirection } from '../../types';
+import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import type { DragMenuConfig } from '../../utils/drag-menu';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
@@ -28,6 +41,7 @@ type DragMenuProps = {
   boundariesElement?: HTMLElement;
   scrollableElement?: HTMLElement;
   pluginConfig?: PluginConfig;
+  getEditorContainerWidth: GetEditorContainerWidth;
 };
 
 const convertToDropdownItems = (dragMenuConfig: DragMenuConfig[]) => {
@@ -39,6 +53,19 @@ const convertToDropdownItems = (dragMenuConfig: DragMenuConfig[]) => {
       content: item.title,
       value: { name: item.id },
       isDisabled: item.disabled,
+      elemBefore: item.icon ? (
+        <div
+          style={{
+            marginRight: token('space.negative.075', '-6px'),
+            display: 'flex',
+          }}
+        >
+          <item.icon label={item.title} />
+        </div>
+      ) : undefined,
+      elemAfter: item.keymap ? (
+        <div css={shortcutStyle}>{item.keymap}</div>
+      ) : undefined,
     });
     item.onClick && (menuCallback[item.id] = item.onClick);
   });
@@ -54,10 +81,25 @@ export const DragMenu = ({
   mountPoint,
   boundariesElement,
   scrollableElement,
+  targetCellPosition,
+  getEditorContainerWidth,
 }: DragMenuProps) => {
   const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
 
-  const dragMenuConfig = getDragMenuConfig(direction, tableMap, index);
+  const { state, dispatch } = editorView;
+  const { selection } = state;
+  const selectionRect = isSelectionType(selection, 'cell')
+    ? getSelectionRect(selection)!
+    : findCellRectClosestToPos(selection.$from);
+
+  const dragMenuConfig = getDragMenuConfig(
+    direction,
+    getEditorContainerWidth,
+    tableMap,
+    index,
+    targetCellPosition,
+    selectionRect,
+  );
 
   const { menuItems, menuCallback } = convertToDropdownItems(dragMenuConfig);
 
@@ -66,11 +108,34 @@ export const DragMenu = ({
     toggleDragMenu(false)(state, dispatch);
   };
 
-  const onMenuItemActivated = ({ item }: { item: MenuItem }) => {
-    menuCallback[item.value.name]?.(editorView.state, editorView.dispatch);
+  const handleMenuItemActivated = ({ item }: { item: MenuItem }) => {
+    menuCallback[item.value.name]?.(state, dispatch);
     closeMenu();
   };
 
+  const handleItemMouseEnter = ({ item }: { item: MenuItem }) => {
+    if (!selectionRect || !item.value.name?.startsWith('delete')) {
+      return;
+    }
+
+    (item.value.name === 'delete_column'
+      ? hoverColumns(getSelectedColumnIndexes(selectionRect), true)
+      : hoverRows(getSelectedRowIndexes(selectionRect), true))(state, dispatch);
+  };
+
+  const handleItemMouseLeave = ({ item }: { item: any }) => {
+    if (
+      [
+        'sort_column_asc',
+        'sort_column_desc',
+        'delete_column',
+        'delete_row',
+      ].indexOf(item.value.name) > -1
+    ) {
+      clearHoverSelection()(state, dispatch);
+    }
+  };
+
   if (!menuItems) {
     return null;
   }
@@ -91,7 +156,9 @@ export const DragMenu = ({
       ]}
       isOpen={isOpen}
       onOpenChange={closeMenu}
-      onItemActivated={onMenuItemActivated}
+      onItemActivated={handleMenuItemActivated}
+      onMouseEnter={handleItemMouseEnter}
+      onMouseLeave={handleItemMouseLeave}
       fitWidth={dragMenuDropdownWidth}
       boundariesElement={boundariesElement}
     />