@atlaskit/editor-plugin-table 7.2.3 → 7.3.1

package/dist/esm/pm-plugins/main.js

@@ -7,7 +7,11 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenLayoutNodes, transformSliceToRemoveOpenMultiBodiedExtension } from '@atlaskit/editor-common/transforms';
 import { browser, closestElement } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { TableMap } from '@atlaskit/editor-tables';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
+import { stopKeyboardColumnResizing } from '../commands/column-resize';
 import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
 import { createTableView } from '../nodeviews/table';
@@ -99,7 +103,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
       var domAtPos = editorView.domAtPos.bind(editorView);
       editorViewRef = editorView;
       return {
-        update: function update(view) {
+        update: function update(view, prevState) {
           var state = view.state,
             dispatch = view.dispatch;
           var selection = state.selection;
@@ -110,6 +114,28 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
             if (parent) {
               tableRef = parent.querySelector('table') || undefined;
             }
+            var tableNode = findTable(state.selection);
+            if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+              // when cursor leaves the table we need to stop column resizing
+              var pluginPrevState = getPluginState(prevState);
+              var isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
+              if (isStopKeyboardColumResizing) {
+                var isTableNodesDifferent = (pluginPrevState === null || pluginPrevState === void 0 ? void 0 : pluginPrevState.tableNode) !== (tableNode === null || tableNode === void 0 ? void 0 : tableNode.node);
+                if (pluginPrevState !== null && pluginPrevState !== void 0 && pluginPrevState.tableNode && tableNode && isTableNodesDifferent) {
+                  var oldRowsNumber = TableMap.get(pluginPrevState.tableNode).height;
+                  var newRowsNumber = TableMap.get(tableNode.node).height;
+                  if (oldRowsNumber !== newRowsNumber ||
+                  // Add/delete row
+                  tableNode.node.attrs.localId !== pluginPrevState.tableNode.attrs.localId) {
+                    // Jump to another table
+                    stopKeyboardColumnResizing()(state, dispatch);
+                  }
+                } else if (!tableNode) {
+                  // selection outside of table
+                  stopKeyboardColumnResizing()(state, dispatch);
+                }
+              }
+            }
           }
           if (pluginState.tableRef !== tableRef) {
             setTableRef(tableRef)(state, dispatch);
@@ -206,9 +232,17 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         var maybeTr = closestElement(domRef, 'tr');
         return maybeTr ? maybeTr.classList.contains('sticky') : false;
       },
-      handleTextInput: function handleTextInput(_ref3, _from, _to, text) {
-        var state = _ref3.state,
-          dispatch = _ref3.dispatch;
+      handleTextInput: function handleTextInput(view, _from, _to, text) {
+        var state = view.state,
+          dispatch = view.dispatch;
+        if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+          var _getPluginState = getPluginState(state),
+            isKeyboardResize = _getPluginState.isKeyboardResize;
+          if (isKeyboardResize) {
+            stopKeyboardColumnResizing()(state, dispatch);
+            return false;
+          }
+        }
         var tr = replaceSelectedTable(state, text, INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
         if (tr.selectionSet) {
           dispatch(tr);

package/dist/esm/pm-plugins/table-resizing/event-handlers.js

@@ -5,9 +5,11 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { stopKeyboardColumnResizing } from '../../commands/column-resize';
 import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes } from '../../utils';
+import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
@@ -20,6 +22,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
   if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
+  var _getTablePluginState = getTablePluginState(state),
+    isKeyboardResize = _getTablePluginState.isKeyboardResize;
   event.preventDefault();
   var tr = view.state.tr;
   tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
@@ -89,6 +93,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     var _getPluginState = getPluginState(state),
       dragging = _getPluginState.dragging,
       resizeHandlePos = _getPluginState.resizeHandlePos;
+    var _getTablePluginState2 = getTablePluginState(state),
+      isTableHovered = _getTablePluginState2.isTableHovered;
     if (resizeHandlePos === null) {
       return stopResizing()(state, dispatch);
     }
@@ -101,9 +107,20 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     var start = $cell.start(-1);
     var table = $cell.node(-1);
 
-    // If we let go in the same place we started, dont need to do anything.
+    // If we let go in the same place we started, don't need to do anything.
     if (dragging && clientX === dragging.startX) {
-      return stopResizing()(state, dispatch);
+      if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+        if (isKeyboardResize || !isTableHovered) {
+          /** if column resize had started via keyboard but continued by mouse
+           *  or mouse pointer leaves the table but mouse button still pressed
+           */
+          return stopKeyboardColumnResizing()(state, dispatch, view);
+        } else {
+          return stopResizing()(state, dispatch);
+        }
+      } else {
+        return stopResizing()(state, dispatch);
+      }
     }
     var tr = state.tr;
     if (dragging) {
@@ -137,7 +154,18 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
           })(tr);
         }
       }
-      return stopResizing(tr)(state, dispatch);
+      if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+        if (isKeyboardResize || !isTableHovered) {
+          /** if column resize had started via keyboard but continued by mouse
+           *  or mouse pointer leaves the table but mouse button still pressed
+           */
+          return stopKeyboardColumnResizing(tr)(state, dispatch, view);
+        } else {
+          return stopResizing(tr)(state, dispatch);
+        }
+      } else {
+        return stopResizing(tr)(state, dispatch);
+      }
     }
   }
   function move(event) {
@@ -147,7 +175,9 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     var _getPluginState2 = getPluginState(state),
       dragging = _getPluginState2.dragging,
       resizeHandlePos = _getPluginState2.resizeHandlePos;
-    if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos))) {
+    var _getTablePluginState3 = getTablePluginState(state),
+      isTableHovered = _getTablePluginState3.isTableHovered;
+    if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || !isTableHovered && getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return finish(event);
     }
     var $cell = state.doc.resolve(resizeHandlePos);

package/dist/esm/pm-plugins/table-resizing/plugin.js

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import classnames from 'classnames';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName } from '../../types';
+import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { setResizeHandlePos } from './commands';
 import { handleMouseDown } from './event-handlers';
 import { createPluginState, getPluginState } from './plugin-factory';
@@ -34,7 +36,19 @@ export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorF
           getPluginState(state).resizeHandlePos || getResizeCellPos(view, event);
           var _getPluginState = getPluginState(state),
             dragging = _getPluginState.dragging;
-          if (resizeHandlePos !== null && !dragging) {
+          var isColumnKeyboardResizeStarted = false;
+          if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+            /*
+              We need to start listening mouse events if column resize started from keyboard.
+              This will allow continue resizing via mouse
+            */
+            var _getTablePluginState = getTablePluginState(state),
+              isKeyboardResize = _getTablePluginState.isKeyboardResize;
+            if (isKeyboardResize) {
+              isColumnKeyboardResizeStarted = isKeyboardResize;
+            }
+          }
+          if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
             if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI)) {
               var _state = view.state,
                 _dispatch = view.dispatch;

package/dist/esm/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/esm/reducer.js

@@ -57,8 +57,9 @@ export default (function (pluginState, action) {
         resizeHandleColumnIndex: undefined,
         resizeHandleRowIndex: undefined
       });
+    case 'START_KEYBOARD_COLUMN_RESIZE':
     case 'ADD_RESIZE_HANDLE_DECORATIONS':
-      if (action.data.resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex && action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex && action.data.resizeHandleIncludeTooltip === pluginState.resizeHandleIncludeTooltip) {
+      if (action.data.resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex && action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex && action.data.resizeHandleIncludeTooltip === pluginState.resizeHandleIncludeTooltip && action.data.isKeyboardResize === pluginState.isKeyboardResize) {
         return pluginState;
       }
       return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
@@ -77,6 +78,7 @@ export default (function (pluginState, action) {
         resizeHandleRowIndex: resizeHandleRowIndex !== null && resizeHandleRowIndex !== void 0 ? resizeHandleRowIndex : pluginState.resizeHandleRowIndex,
         resizeHandleIncludeTooltip: resizeHandleIncludeTooltip !== null && resizeHandleIncludeTooltip !== void 0 ? resizeHandleIncludeTooltip : pluginState.resizeHandleIncludeTooltip
       });
+    case 'STOP_KEYBOARD_COLUMN_RESIZE':
     case 'REMOVE_RESIZE_HANDLE_DECORATIONS':
       if (!pluginState.isResizeHandleWidgetAdded) {
         return pluginState;
@@ -84,7 +86,8 @@ export default (function (pluginState, action) {
       return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
         resizeHandleColumnIndex: undefined,
         resizeHandleRowIndex: undefined,
-        isResizeHandleWidgetAdded: false
+        isResizeHandleWidgetAdded: false,
+        isKeyboardResize: undefined
       });
     case 'SET_TABLE_REF':
     case 'HOVER_ROWS':

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

@@ -2,10 +2,8 @@ import React from 'react';
 import { DragHandleDisabledIcon, DragHandleIcon, MinimisedHandleIcon } from '../icons';
 export var HandleIconComponent = function HandleIconComponent(props) {
   var forceDefaultHandle = props.forceDefaultHandle,
-    isRowHandleHovered = props.isRowHandleHovered,
-    isColumnHandleHovered = props.isColumnHandleHovered,
+    isHandleHovered = props.isHandleHovered,
     hasMergedCells = props.hasMergedCells;
-  var isHandleHovered = isRowHandleHovered || isColumnHandleHovered;
   if (isHandleHovered || forceDefaultHandle) {
     return hasMergedCells ? /*#__PURE__*/React.createElement(DragHandleDisabledIcon, null) : /*#__PURE__*/React.createElement(DragHandleIcon, null);
   }

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

@@ -8,6 +8,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';
@@ -28,7 +29,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     previewHeight = _ref.previewHeight,
     onMouseOver = _ref.onMouseOver,
     onMouseOut = _ref.onMouseOut,
-    _onMouseUp = _ref.onMouseUp,
+    toggleDragMenu = _ref.toggleDragMenu,
     onClick = _ref.onClick,
     editorView = _ref.editorView,
     formatMessage = _ref.intl.formatMessage;
@@ -37,10 +38,13 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     previewContainer = _useState2[0],
     setPreviewContainer = _useState2[1];
-  var _getPluginState = getPluginState(editorView.state),
+  var state = editorView.state,
+    selection = editorView.state.selection;
+  var _getPluginState = getPluginState(state),
     hoveredColumns = _getPluginState.hoveredColumns,
     hoveredRows = _getPluginState.hoveredRows;
-  var selection = editorView.state.selection;
+  var _getDnDPluginState = getDnDPluginState(state),
+    isDragMenuOpen = _getDnDPluginState.isDragMenuOpen;
   var isRow = direction === 'row';
   var isColumn = direction === 'column';
   var isRowHandleHovered = isRow && hoveredRows.length > 0;
@@ -50,8 +54,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   }, [indexes, isRow, selection]);
   var handleIconProps = {
     forceDefaultHandle: forceDefaultHandle,
-    isColumnHandleHovered: isColumnHandleHovered,
-    isRowHandleHovered: isRowHandleHovered,
+    isHandleHovered: isColumnHandleHovered || isRowHandleHovered,
     hasMergedCells: hasMergedCells
   };
   useEffect(function () {
@@ -134,20 +137,29 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     },
     "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: function 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: function 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/esm/ui/FloatingDragMenu/DragMenu.js

@@ -2,14 +2,16 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /* 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';
@@ -26,7 +28,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';
 var MapDragMenuOptionIdToMessage = {
   add_row_above: {
@@ -157,17 +160,16 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
     menuCallback: menuCallback
   };
 };
-export var DragMenu = function DragMenu(_ref) {
+var ColorPaletteWithListeners = withOuterListeners(ColorPalette);
+export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
   var _pluginConfig$allowBa;
   var _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
     index = _ref.index,
+    target = _ref.target,
     isOpen = _ref.isOpen,
     editorView = _ref.editorView,
     tableNode = _ref.tableNode,
-    mountPoint = _ref.mountPoint,
-    boundariesElement = _ref.boundariesElement,
-    scrollableElement = _ref.scrollableElement,
     targetCellPosition = _ref.targetCellPosition,
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
@@ -181,6 +183,8 @@ export var DragMenu = function DragMenu(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isSubmenuOpen = _useState2[0],
     setIsSubmenuOpen = _useState2[1];
+  var _getPluginState = getPluginState(state),
+    isKeyboardModeActive = _getPluginState.isKeyboardModeActive;
   var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   var hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
   var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
@@ -216,7 +220,11 @@ export var DragMenu = function DragMenu(_ref) {
       targetCellPosition = _getTablePluginState2.targetCellPosition;
     var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
     var background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+    var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(cellBackgroundColorPalette, background, colorPalletteColumns),
+      selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
+      selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
     return {
+      key: 'background',
       content: formatMessage(messages.backgroundColor),
       value: {
         name: 'background'
@@ -236,16 +244,33 @@ export var DragMenu = function DragMenu(_ref) {
       }), 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: function handleClose() {
+          var keyboardEvent = new KeyboardEvent('keydown', {
+            key: 'ArrowDown',
+            bubbles: true
+          });
+          setIsSubmenuOpen(false);
+          target === null || target === void 0 || target.focus();
+          target === null || target === void 0 || target.dispatchEvent(keyboardEvent);
+        },
+        isPopupPositioned: true,
+        isOpenedByKeyboard: isKeyboardModeActive
+      }, jsx(ColorPaletteWithListeners, {
+        cols: colorPalletteColumns,
+        onClick: function onClick(color) {
+          setColor(color);
+        },
         selectedColor: background,
         paletteOptions: {
           palette: cellBackgroundColorPalette,
           paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
           hexToPaletteColor: hexToEditorBackgroundPaletteColor
         }
-      })))
+      }))))
     };
   };
   var toggleHeaderColumn = function toggleHeaderColumn() {
@@ -257,8 +282,9 @@ export var DragMenu = function DragMenu(_ref) {
   var toggleRowNumbers = function toggleRowNumbers() {
     toggleNumberColumnWithAnalytics(editorAnalyticsAPI)(state, dispatch);
   };
-  var createhHeaderRowColumnMenuItem = function createhHeaderRowColumnMenuItem(direction) {
+  var createHeaderRowColumnMenuItem = function createHeaderRowColumnMenuItem(direction) {
     return direction === 'column' ? {
+      key: 'header_column',
       content: formatMessage(messages.headerColumn),
       value: {
         name: 'header_column'
@@ -271,6 +297,7 @@ export var DragMenu = function DragMenu(_ref) {
         isChecked: checkIfHeaderColumnEnabled(selection)
       }))
     } : {
+      key: 'header_row',
       content: formatMessage(messages.headerRow),
       value: {
         name: 'header_row'
@@ -286,6 +313,7 @@ export var DragMenu = function DragMenu(_ref) {
   };
   var createRowNumbersMenuItem = function createRowNumbersMenuItem() {
     return {
+      key: 'row_numbers',
       content: formatMessage(messages.rowNumbers),
       value: {
         name: 'row_numbers'
@@ -307,10 +335,10 @@ export var DragMenu = function DragMenu(_ref) {
    * @returns true when the menu should be closed, false otherwise
    */
   var shouldCloseMenu = function shouldCloseMenu(state) {
-    var _getPluginState = getPluginState(state),
-      previousOpenState = _getPluginState.isDragMenuOpen,
-      previousDragMenuDirection = _getPluginState.dragMenuDirection,
-      previousDragMenuIndex = _getPluginState.dragMenuIndex;
+    var _getPluginState2 = getPluginState(state),
+      previousOpenState = _getPluginState2.isDragMenuOpen,
+      previousDragMenuDirection = _getPluginState2.dragMenuDirection,
+      previousDragMenuIndex = _getPluginState2.dragMenuIndex;
 
     // menu open but menu direction changed, means user clicked on drag handle of different row/column
     // menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
@@ -322,9 +350,15 @@ export var DragMenu = function DragMenu(_ref) {
     }
   };
   var closeMenu = function closeMenu() {
+    var focusTarget = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'handle';
     var state = editorView.state,
       dispatch = editorView.dispatch;
     if (shouldCloseMenu(state)) {
+      if (target && focusTarget === 'handle') {
+        target === null || target === void 0 || target.focus();
+      } else {
+        editorView.dom.focus();
+      }
       toggleDragMenu(false, direction, index)(state, dispatch);
     }
   };
@@ -333,6 +367,9 @@ export var DragMenu = function DragMenu(_ref) {
     var item = _ref2.item;
     (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 || _menuCallback$item$va.call(menuCallback, state, dispatch);
     switch (item.value.name) {
+      case 'background':
+        setIsSubmenuOpen(!isSubmenuOpen);
+        break;
       case 'header_column':
         toggleHeaderColumn();
         break;
@@ -346,7 +383,7 @@ export var DragMenu = function DragMenu(_ref) {
         break;
     }
     if (['header_column', 'header_row', 'row_numbers', 'background'].indexOf(item.value.name) <= -1) {
-      closeMenu();
+      closeMenu('editor');
     }
   };
   var handleItemMouseEnter = function handleItemMouseEnter(_ref3) {
@@ -372,6 +409,17 @@ export var DragMenu = function DragMenu(_ref) {
       clearHoverSelection()(state, dispatch);
     }
   };
+  useEffect(function () {
+    // focus on first menu item automatically when menu renders
+    // and user is using keyboard
+    if (isOpen && target && isKeyboardModeActive) {
+      var keyboardEvent = new KeyboardEvent('keydown', {
+        key: 'ArrowDown',
+        bubbles: true
+      });
+      target.dispatchEvent(keyboardEvent);
+    }
+  }, [isOpen, target, isKeyboardModeActive]);
   if (!menuItems) {
     return null;
   }
@@ -379,11 +427,11 @@ export var DragMenu = function DragMenu(_ref) {
     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)]
     });
   }
 
@@ -394,25 +442,16 @@ export var DragMenu = function DragMenu(_ref) {
     });
   }
   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);