@atlaskit/editor-plugin-table 7.3.0 → 7.3.2

package/dist/es2019/commands/misc.js

@@ -334,7 +334,7 @@ export const setMultipleCellAttrs = (attrs, targetCellPosition) => (state, dispa
   }
   return false;
 };
-export const selectColumn = (column, expand) => createCommand(state => {
+export const selectColumn = (column, expand, triggeredByKeyboard = false) => createCommand(state => {
   const cells = getCellsInColumn(column)(state.tr.selection);
   if (!cells || !cells.length || typeof cells[0].pos !== 'number') {
     return false;
@@ -349,7 +349,7 @@ export const selectColumn = (column, expand) => createCommand(state => {
       decorationSet
     }
   };
-}, tr => selectColumnTransform(column, expand)(tr).setMeta('addToHistory', false));
+}, tr => selectColumnTransform(column, expand)(tr).setMeta('addToHistory', false).setMeta('selectedColumnViaKeyboard', triggeredByKeyboard));
 export const selectColumns = columnIndexes => createCommand(state => {
   if (!columnIndexes) {
     return false;
@@ -375,7 +375,7 @@ export const selectColumns = columnIndexes => createCommand(state => {
 }, tr => {
   return selectColumnsTransform(columnIndexes)(tr).setMeta('addToHistory', false);
 });
-export const selectRow = (row, expand) => createCommand(state => {
+export const selectRow = (row, expand, triggeredByKeyboard = false) => createCommand(state => {
   let targetCellPosition;
   const cells = getCellsInRow(row)(state.tr.selection);
   if (cells && cells.length) {
@@ -387,7 +387,7 @@ export const selectRow = (row, expand) => createCommand(state => {
       targetCellPosition
     }
   };
-}, tr => selectRowTransform(row, expand)(tr).setMeta('addToHistory', false));
+}, tr => selectRowTransform(row, expand)(tr).setMeta('addToHistory', false).setMeta('selectedRowViaKeyboard', triggeredByKeyboard));
 export const selectRows = rowIndexes => createCommand(state => {
   if (rowIndexes.length === 0) {
     return false;

package/dist/es2019/commands/selection.js

@@ -69,7 +69,7 @@ const arrowRightFromCellSelection = editorSelectionAPI => selection => (state, d
   }
   return false;
 };
-export const selectColumns = editorSelectionAPI => () => (state, dispatch) => {
+export const selectColumns = editorSelectionAPI => (triggeredByKeyboard = false) => (state, dispatch) => {
   const {
     selection
   } = state;
@@ -83,11 +83,11 @@ export const selectColumns = editorSelectionAPI => () => (state, dispatch) => {
     })(state, dispatch);
   }
   if (table && rect) {
-    return selectColumn(rect.left)(state, dispatch);
+    return selectColumn(rect.left, undefined, triggeredByKeyboard)(state, dispatch);
   }
   return false;
 };
-export const selectRows = editorSelectionAPI => () => (state, dispatch) => {
+export const selectRows = editorSelectionAPI => (triggeredByKeyboard = false) => (state, dispatch) => {
   const {
     selection
   } = state;
@@ -101,7 +101,7 @@ export const selectRows = editorSelectionAPI => () => (state, dispatch) => {
     })(state, dispatch);
   }
   if (table && rect) {
-    return selectRow(rect.top)(state, dispatch);
+    return selectRow(rect.top, undefined, triggeredByKeyboard)(state, dispatch);
   }
   return false;
 };

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

@@ -6,7 +6,6 @@ import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
 import { createCommand, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-
 // TODO: This command is a placeholder example. Please replace this if required.
 export const getDecorations = state => {
   var _pluginKey$getState;
@@ -68,7 +67,7 @@ export const moveSource = (sourceType, sourceIndexes, targetIndex, tr) => create
     selectAfterMove: true
   })(nextTr);
 });
-export const toggleDragMenu = (isDragMenuOpen, direction, index) => createCommand(state => {
+export const toggleDragMenu = (isDragMenuOpen, direction, index, trigger = 'mouse') => createCommand(state => {
   let {
     isDragMenuOpen: previousOpenState,
     dragMenuDirection: previousDragMenuDirection,
@@ -95,7 +94,8 @@ export const toggleDragMenu = (isDragMenuOpen, direction, index) => createComman
     data: {
       isDragMenuOpen: updatedMenuOpenState,
       direction: direction !== null && direction !== void 0 ? direction : previousDragMenuDirection,
-      index: index !== null && index !== void 0 ? index : previousDragMenuIndex
+      index: index !== null && index !== void 0 ? index : previousDragMenuIndex,
+      isKeyboardModeActive: updatedMenuOpenState && trigger === 'keyboard'
     }
   };
 }, tr => {

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

@@ -177,7 +177,8 @@ export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
       dropTargetIndex: 0,
       isDragMenuOpen: false,
       dragMenuIndex: 0,
-      isDragging: false
+      isDragging: false,
+      isKeyboardModeActive: false
     })),
     key: pluginKey,
     appendTransaction: (transactions, oldState, newState) => {
@@ -191,6 +192,20 @@ export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
         isDragMenuOpen,
         dragMenuIndex
       } = getPluginState(newState);
+      transactions.forEach(transaction => {
+        if (transaction.getMeta('selectedRowViaKeyboard')) {
+          const button = document.querySelector('#drag-handle-button-row');
+          if (button) {
+            button.focus();
+          }
+        }
+        if (transaction.getMeta('selectedColumnViaKeyboard')) {
+          const button = document.querySelector('#drag-handle-button-column');
+          if (button) {
+            button.focus();
+          }
+        }
+      });
 
       // What's happening here? you asked... In a nutshell;
       // If the target cell position changes while the drag menu is open then we want to close the drag menu if it has been opened.
@@ -232,6 +247,24 @@ export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
           decorationSet
         } = getPluginState(state);
         return decorationSet;
+      },
+      handleKeyDown: (view, event) => {
+        var _ref;
+        const isDragHandleFocused = ['drag-handle-button-row', 'drag-handle-button-column'].includes((_ref = event.target || null) === null || _ref === void 0 ? void 0 : _ref.id);
+        const keysToTrap = ['Enter', ' '];
+        const keysToTrapWhen = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+        const {
+          isDragMenuOpen
+        } = getPluginState(view.state);
+
+        // drag handle is focused, and user presses any key return them back to editing
+        if (isDragHandleFocused && !isDragMenuOpen && !keysToTrap.includes(event.key)) {
+          view.dom.focus();
+          return true;
+        }
+        if (isDragHandleFocused && keysToTrap.includes(event.key) || isDragMenuOpen && keysToTrapWhen.includes(event.key)) {
+          return true;
+        }
       }
     }
   });

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

@@ -23,7 +23,8 @@ export default ((pluginState, action) => {
         ...pluginState,
         isDragMenuOpen: action.data.isDragMenuOpen,
         dragMenuDirection: action.data.direction,
-        dragMenuIndex: action.data.index
+        dragMenuIndex: action.data.index,
+        isKeyboardModeActive: action.data.isKeyboardModeActive
       };
     default:
       return pluginState;

package/dist/es2019/pm-plugins/table-selection-keymap.js

@@ -7,8 +7,8 @@ export function tableSelectionKeymapPlugin(editorSelectionAPI) {
   bindKeymapWithCommand(moveRight.common, arrowRightFromTable(editorSelectionAPI)(), list);
   bindKeymapWithCommand(moveLeft.common, arrowLeftFromTable(editorSelectionAPI)(), list);
   if (getBooleanFF('platform.editor.a11y.table-selection_9uv33')) {
-    bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(), list);
-    bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(), list);
+    bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(true), list);
+    bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(true), list);
   }
   if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
     bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);

package/dist/es2019/ui/DragHandle/HandleIconComponent.js

@@ -3,11 +3,9 @@ import { DragHandleDisabledIcon, DragHandleIcon, MinimisedHandleIcon } from '../
 export const HandleIconComponent = props => {
   const {
     forceDefaultHandle,
-    isRowHandleHovered,
-    isColumnHandleHovered,
+    isHandleHovered,
     hasMergedCells
   } = props;
-  const isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
   if (isHandleHovered || forceDefaultHandle) {
     return hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
   }

package/dist/es2019/ui/DragHandle/index.js

@@ -6,6 +6,7 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { browser } from '@atlaskit/editor-common/utils';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
@@ -23,7 +24,7 @@ const DragHandleComponent = ({
   previewHeight,
   onMouseOver,
   onMouseOut,
-  onMouseUp,
+  toggleDragMenu,
   onClick,
   editorView,
   intl: {
@@ -32,13 +33,19 @@ const DragHandleComponent = ({
 }) => {
   const dragHandleDivRef = useRef(null);
   const [previewContainer, setPreviewContainer] = useState(null);
+  const {
+    state,
+    state: {
+      selection
+    }
+  } = editorView;
   const {
     hoveredColumns,
     hoveredRows
-  } = getPluginState(editorView.state);
+  } = getPluginState(state);
   const {
-    selection
-  } = editorView.state;
+    isDragMenuOpen
+  } = getDnDPluginState(state);
   const isRow = direction === 'row';
   const isColumn = direction === 'column';
   const isRowHandleHovered = isRow && hoveredRows.length > 0;
@@ -46,8 +53,7 @@ const DragHandleComponent = ({
   const hasMergedCells = useMemo(() => isRow ? hasMergedCellsInRow(indexes[0])(selection) : hasMergedCellsInColumn(indexes[0])(selection), [indexes, isRow, selection]);
   const handleIconProps = {
     forceDefaultHandle,
-    isColumnHandleHovered,
-    isRowHandleHovered,
+    isHandleHovered: isColumnHandleHovered || isRowHandleHovered,
     hasMergedCells
   };
   useEffect(() => {
@@ -108,6 +114,7 @@ const DragHandleComponent = ({
   }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
   const showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
     className: ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE,
     "data-testid": "table-drag-handle-clickable-zone-button",
     style: {
@@ -122,6 +129,7 @@ const DragHandleComponent = ({
     },
     onClick: onClick
   }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
     id: isDragMenuTarget ? showDragMenuAnchorId : undefined,
     className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, {
       [ClassName.DRAG_HANDLE_DISABLED]: hasMergedCells
@@ -133,20 +141,29 @@ const DragHandleComponent = ({
     },
     "data-testid": "table-drag-handle-button",
     "aria-label": formatMessage(isRow ? messages.rowDragHandle : messages.columnDragHandle),
+    "aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
+    "aria-haspopup": "menu",
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onMouseUp: e => {
       // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
       // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
       editorView.focus();
-      onMouseUp && onMouseUp(e);
+      toggleDragMenu && toggleDragMenu('mouse', e);
     },
-    onClick: onClick
-  }, browser.gecko ? /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps) : /*#__PURE__*/React.createElement("span", {
+    onClick: onClick,
+    onKeyDown: e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        toggleDragMenu && toggleDragMenu('keyboard');
+      }
+    }
+  }, appearance !== 'placeholder' ?
+  //  cannot block pointer events in Firefox as it breaks Dragging functionality
+  browser.gecko ? /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps) : /*#__PURE__*/React.createElement("span", {
     style: {
       pointerEvents: 'none'
     }
-  }, /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps))), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
+  }, /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps)) : null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
     direction: direction,
     width: previewWidth,
     height: previewHeight

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -1,13 +1,15 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
-import { useState } from 'react';
+/** @jsxFrag */
+import React, { useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
-import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { withOuterListeners } from '@atlaskit/editor-common/ui';
+import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
+import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
@@ -24,7 +26,8 @@ import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-f
 import { TableCssClassName as ClassName } from '../../types';
 import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes, hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
-import { dragMenuDropdownWidth } from '../consts';
+import { colorPalletteColumns } from '../consts';
+import { DropdownMenu } from './DropdownMenu';
 import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, elementBeforeIconStyles, toggleStyles } from './styles';
 const MapDragMenuOptionIdToMessage = {
   add_row_above: {
@@ -153,15 +156,14 @@ const convertToDropdownItems = (dragMenuConfig, formatMessage, selectionRect) =>
     menuCallback
   };
 };
-export const DragMenu = ({
+const ColorPaletteWithListeners = withOuterListeners(ColorPalette);
+export const DragMenu = /*#__PURE__*/React.memo(({
   direction = 'row',
   index,
+  target,
   isOpen,
   editorView,
   tableNode,
-  mountPoint,
-  boundariesElement,
-  scrollableElement,
   targetCellPosition,
   getEditorContainerWidth,
   editorAnalyticsAPI,
@@ -180,6 +182,9 @@ export const DragMenu = ({
   } = state;
   const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
   const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+  const {
+    isKeyboardModeActive
+  } = getPluginState(state);
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
   const shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
@@ -220,7 +225,12 @@ export const DragMenu = ({
     } = getTablePluginState(editorView.state);
     const node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
     const background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+    const {
+      selectedRowIndex,
+      selectedColumnIndex
+    } = getSelectedRowAndColumnFromPalette(cellBackgroundColorPalette, background, colorPalletteColumns);
     return {
+      key: 'background',
       content: formatMessage(messages.backgroundColor),
       value: {
         name: 'background'
@@ -240,16 +250,33 @@ export const DragMenu = ({
       }), isSubmenuOpen && jsx("div", {
         className: ClassName.DRAG_SUBMENU,
         ref: handleSubMenuRef
-      }, jsx(ColorPalette, {
-        cols: 7,
-        onClick: setColor,
+      }, jsx(ArrowKeyNavigationProvider, {
+        type: ArrowKeyNavigationType.COLOR,
+        selectedRowIndex: selectedRowIndex,
+        selectedColumnIndex: selectedColumnIndex,
+        handleClose: () => {
+          const keyboardEvent = new KeyboardEvent('keydown', {
+            key: 'ArrowDown',
+            bubbles: true
+          });
+          setIsSubmenuOpen(false);
+          target === null || target === void 0 ? void 0 : target.focus();
+          target === null || target === void 0 ? void 0 : target.dispatchEvent(keyboardEvent);
+        },
+        isPopupPositioned: true,
+        isOpenedByKeyboard: isKeyboardModeActive
+      }, jsx(ColorPaletteWithListeners, {
+        cols: colorPalletteColumns,
+        onClick: color => {
+          setColor(color);
+        },
         selectedColor: background,
         paletteOptions: {
           palette: cellBackgroundColorPalette,
           paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
           hexToPaletteColor: hexToEditorBackgroundPaletteColor
         }
-      })))
+      }))))
     };
   };
   const toggleHeaderColumn = () => {
@@ -261,8 +288,9 @@ export const DragMenu = ({
   const toggleRowNumbers = () => {
     toggleNumberColumnWithAnalytics(editorAnalyticsAPI)(state, dispatch);
   };
-  const createhHeaderRowColumnMenuItem = direction => {
+  const createHeaderRowColumnMenuItem = direction => {
     return direction === 'column' ? {
+      key: 'header_column',
       content: formatMessage(messages.headerColumn),
       value: {
         name: 'header_column'
@@ -275,6 +303,7 @@ export const DragMenu = ({
         isChecked: checkIfHeaderColumnEnabled(selection)
       }))
     } : {
+      key: 'header_row',
       content: formatMessage(messages.headerRow),
       value: {
         name: 'header_row'
@@ -290,6 +319,7 @@ export const DragMenu = ({
   };
   const createRowNumbersMenuItem = () => {
     return {
+      key: 'row_numbers',
       content: formatMessage(messages.rowNumbers),
       value: {
         name: 'row_numbers'
@@ -326,12 +356,17 @@ export const DragMenu = ({
       return true;
     }
   };
-  const closeMenu = () => {
+  const closeMenu = (focusTarget = 'handle') => {
     const {
       state,
       dispatch
     } = editorView;
     if (shouldCloseMenu(state)) {
+      if (target && focusTarget === 'handle') {
+        target === null || target === void 0 ? void 0 : target.focus();
+      } else {
+        editorView.dom.focus();
+      }
       toggleDragMenu(false, direction, index)(state, dispatch);
     }
   };
@@ -341,6 +376,9 @@ export const DragMenu = ({
     var _menuCallback$item$va;
     (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 ? void 0 : _menuCallback$item$va.call(menuCallback, state, dispatch);
     switch (item.value.name) {
+      case 'background':
+        setIsSubmenuOpen(!isSubmenuOpen);
+        break;
       case 'header_column':
         toggleHeaderColumn();
         break;
@@ -354,7 +392,7 @@ export const DragMenu = ({
         break;
     }
     if (['header_column', 'header_row', 'row_numbers', 'background'].indexOf(item.value.name) <= -1) {
-      closeMenu();
+      closeMenu('editor');
     }
   };
   const handleItemMouseEnter = ({
@@ -382,6 +420,17 @@ export const DragMenu = ({
       clearHoverSelection()(state, dispatch);
     }
   };
+  useEffect(() => {
+    // focus on first menu item automatically when menu renders
+    // and user is using keyboard
+    if (isOpen && target && isKeyboardModeActive) {
+      const keyboardEvent = new KeyboardEvent('keydown', {
+        key: 'ArrowDown',
+        bubbles: true
+      });
+      target.dispatchEvent(keyboardEvent);
+    }
+  }, [isOpen, target, isKeyboardModeActive]);
   if (!menuItems) {
     return null;
   }
@@ -389,11 +438,11 @@ export const DragMenu = ({
     menuItems[0].items.unshift(createBackgroundColorMenuItem());
   }
 
-  // If first row, add toggle for Hearder row, default is true
+  // If first row, add toggle for Header row, default is true
   // If first column, add toggle for Header column, default is false
   if (getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && index === 0) {
     menuItems.push({
-      items: [createhHeaderRowColumnMenuItem(direction)]
+      items: [createHeaderRowColumnMenuItem(direction)]
     });
   }
 
@@ -404,25 +453,16 @@ export const DragMenu = ({
     });
   }
   return jsx(DropdownMenu, {
-    mountTo: mountPoint
-    //This needs be removed when the a11y is completely handled
-    //Disabling key navigation now as it works only partially
-    ,
-    arrowKeyNavigationProviderOptions: {
-      type: ArrowKeyNavigationType.MENU,
-      disableArrowKeyNavigation: true
+    disableKeyboardHandling: isSubmenuOpen,
+    section: {
+      hasSeparator: true
     },
+    target: target,
     items: menuItems,
-    isOpen: isOpen,
-    onOpenChange: closeMenu,
     onItemActivated: handleMenuItemActivated,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
-    fitWidth: dragMenuDropdownWidth,
-    boundariesElement: boundariesElement,
-    section: {
-      hasSeparator: true
-    }
+    handleClose: closeMenu
   });
-};
+});
 export default injectIntl(DragMenu);

package/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { DropList } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem } from '@atlaskit/editor-common/ui-menu';
+import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { MenuGroup, Section } from '@atlaskit/menu';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { dragMenuDropdownWidth } from '../consts';
+const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
+export const DropdownMenu = ({
+  target,
+  items,
+  section,
+  disableKeyboardHandling,
+  onItemActivated,
+  handleClose,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const innerMenu = () => {
+    return /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
+      isOpen: true,
+      shouldFitContainer: true,
+      position: ['bottom', 'left'].join(' '),
+      handleClickOutside: () => handleClose('editor'),
+      handleEscapeKeydown: () => {
+        if (!disableKeyboardHandling) {
+          handleClose('handle');
+        }
+      },
+      handleEnterKeydown: e => {
+        if (!disableKeyboardHandling) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      },
+      targetRef: target
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: 0,
+        minWidth: dragMenuDropdownWidth
+      }
+    }), /*#__PURE__*/React.createElement(MenuGroup, {
+      role: "menu"
+    }, items.map((group, index) => /*#__PURE__*/React.createElement(Section, {
+      hasSeparator: (section === null || section === void 0 ? void 0 : section.hasSeparator) && index > 0,
+      title: section === null || section === void 0 ? void 0 : section.title,
+      key: index
+    }, group.items.map(item => {
+      var _item$key;
+      return /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        shouldUseDefaultRole: false,
+        key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : String(item.content),
+        item: item,
+        onItemActivated: onItemActivated,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
+      });
+    })))));
+  };
+  if (disableKeyboardHandling) {
+    return innerMenu();
+  }
+  return /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+    closeOnTab: true,
+    type: ArrowKeyNavigationType.MENU,
+    onSelection: index => {
+      const results = items.flatMap(item => 'items' in item ? item.items : item);
+
+      // onSelection is called when any focusable element is 'activated'
+      // this is an issue as some menu items have toggles, which cause the index value
+      // in the callback to be outside of array length.
+      // The logic below normalises the index value based on the number
+      // of menu items with 2 focusable elements, and adjusts the index to ensure
+      // the correct menu item is sent in onItemActivated callback
+      if (getBooleanFF('platform.editor.table.new-cell-context-menu-styling')) {
+        const keys = ['row_numbers', 'header_row', 'header_column'];
+        let doubleItemCount = 0;
+        const firstIndex = results.findIndex(value => keys.includes(value.key));
+        if (firstIndex === -1 || index <= firstIndex) {
+          onItemActivated && onItemActivated({
+            item: results[index]
+          });
+          return;
+        }
+        for (let i = firstIndex; i < results.length; i += 1) {
+          if (keys.includes(results[i].key)) {
+            doubleItemCount += 1;
+          }
+          if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
+            onItemActivated && onItemActivated({
+              item: results[i]
+            });
+            return;
+          }
+          if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+            onItemActivated && onItemActivated({
+              item: results[i]
+            });
+            return;
+          }
+        }
+      } else {
+        onItemActivated && onItemActivated({
+          item: results[index]
+        });
+      }
+    }
+  }, innerMenu());
+};

package/dist/es2019/ui/FloatingDragMenu/index.js

@@ -24,10 +24,10 @@ const FloatingDragMenu = ({
   }
   const inStickyMode = stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky;
   const targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  const offset = direction === 'row' ? [-9, 6] : [0, -7];
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
-  const offset = direction === 'row' ? [-9, 6] : [0, -7];
 
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/React.createElement(Popup, {
@@ -49,10 +49,10 @@ const FloatingDragMenu = ({
   }, /*#__PURE__*/React.createElement(DragMenu, {
     editorView: editorView,
     isOpen: isOpen,
-    boundariesElement: boundariesElement,
     tableNode: tableNode,
     direction: direction,
     index: index,
+    target: targetHandleRef || undefined,
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
     editorAnalyticsAPI: editorAnalyticsAPI,