@atlaskit/editor-plugin-table 7.3.0 → 7.3.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 7.3.2
+
+### Patch Changes
+
+- [#72081](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72081) [`4487160917d2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4487160917d2) - [ux] ED-22052: adds button type attribute to non atlaskit button instances
+
+## 7.3.1
+
+### Patch Changes
+
+- [#69911](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69911) [`50161fb5966e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/50161fb5966e) - [ux] Added keyboard shortcut to drag handle and keyboard navigation for drag menu
+- Updated dependencies
+
 ## 7.3.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -51,6 +51,9 @@
         {
             "path": "../../../design-system/icon/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/menu/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
         },

package/dist/cjs/commands/misc.js

@@ -328,6 +328,7 @@ var setMultipleCellAttrs = exports.setMultipleCellAttrs = function setMultipleCe
   };
 };
 var selectColumn = exports.selectColumn = function selectColumn(column, expand) {
+  var triggeredByKeyboard = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return (0, _pluginFactory.createCommand)(function (state) {
     var cells = (0, _utils2.getCellsInColumn)(column)(state.tr.selection);
     if (!cells || !cells.length || typeof cells[0].pos !== 'number') {
@@ -344,7 +345,7 @@ var selectColumn = exports.selectColumn = function selectColumn(column, expand)
       }
     };
   }, function (tr) {
-    return (0, _utils2.selectColumn)(column, expand)(tr).setMeta('addToHistory', false);
+    return (0, _utils2.selectColumn)(column, expand)(tr).setMeta('addToHistory', false).setMeta('selectedColumnViaKeyboard', triggeredByKeyboard);
   });
 };
 var selectColumns = exports.selectColumns = function selectColumns(columnIndexes) {
@@ -379,6 +380,7 @@ var selectColumns = exports.selectColumns = function selectColumns(columnIndexes
   });
 };
 var selectRow = exports.selectRow = function selectRow(row, expand) {
+  var triggeredByKeyboard = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return (0, _pluginFactory.createCommand)(function (state) {
     var targetCellPosition;
     var cells = (0, _utils2.getCellsInRow)(row)(state.tr.selection);
@@ -392,7 +394,7 @@ var selectRow = exports.selectRow = function selectRow(row, expand) {
       }
     };
   }, function (tr) {
-    return (0, _utils2.selectRow)(row, expand)(tr).setMeta('addToHistory', false);
+    return (0, _utils2.selectRow)(row, expand)(tr).setMeta('addToHistory', false).setMeta('selectedRowViaKeyboard', triggeredByKeyboard);
   });
 };
 var selectRows = exports.selectRows = function selectRows(rowIndexes) {

package/dist/cjs/commands/selection.js

@@ -88,6 +88,7 @@ var arrowRightFromCellSelection = function arrowRightFromCellSelection(editorSel
 };
 var selectColumns = exports.selectColumns = function selectColumns(editorSelectionAPI) {
   return function () {
+    var triggeredByKeyboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     return function (state, dispatch) {
       var selection = state.selection;
       var table = (0, _utils.findTable)(selection);
@@ -100,7 +101,7 @@ var selectColumns = exports.selectColumns = function selectColumns(editorSelecti
         })(state, dispatch);
       }
       if (table && rect) {
-        return (0, _misc.selectColumn)(rect.left)(state, dispatch);
+        return (0, _misc.selectColumn)(rect.left, undefined, triggeredByKeyboard)(state, dispatch);
       }
       return false;
     };
@@ -108,6 +109,7 @@ var selectColumns = exports.selectColumns = function selectColumns(editorSelecti
 };
 var selectRows = exports.selectRows = function selectRows(editorSelectionAPI) {
   return function () {
+    var triggeredByKeyboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     return function (state, dispatch) {
       var selection = state.selection;
       var table = (0, _utils.findTable)(selection);
@@ -120,7 +122,7 @@ var selectRows = exports.selectRows = function selectRows(editorSelectionAPI) {
         })(state, dispatch);
       }
       if (table && rect) {
-        return (0, _misc.selectRow)(rect.top)(state, dispatch);
+        return (0, _misc.selectRow)(rect.top, undefined, triggeredByKeyboard)(state, dispatch);
       }
       return false;
     };

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

@@ -84,6 +84,7 @@ var moveSource = exports.moveSource = function moveSource(sourceType, sourceInde
   });
 };
 var toggleDragMenu = exports.toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {
+  var trigger = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'mouse';
   return (0, _pluginFactory.createCommand)(function (state) {
     var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
       previousOpenState = _getPluginState3.isDragMenuOpen,
@@ -110,7 +111,8 @@ var toggleDragMenu = exports.toggleDragMenu = function toggleDragMenu(isDragMenu
       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'
       }
     };
   }, function (tr) {

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

@@ -170,7 +170,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
         dropTargetIndex: 0,
         isDragMenuOpen: false,
         dragMenuIndex: 0,
-        isDragging: false
+        isDragging: false,
+        isKeyboardModeActive: false
       };
     }),
     key: _pluginKey2.pluginKey,
@@ -182,6 +183,20 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
       var _getPluginState = (0, _pluginFactory2.getPluginState)(newState),
         isDragMenuOpen = _getPluginState.isDragMenuOpen,
         dragMenuIndex = _getPluginState.dragMenuIndex;
+      transactions.forEach(function (transaction) {
+        if (transaction.getMeta('selectedRowViaKeyboard')) {
+          var button = document.querySelector('#drag-handle-button-row');
+          if (button) {
+            button.focus();
+          }
+        }
+        if (transaction.getMeta('selectedColumnViaKeyboard')) {
+          var _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.
@@ -222,6 +237,23 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
         var _getPluginState2 = (0, _pluginFactory2.getPluginState)(state),
           decorationSet = _getPluginState2.decorationSet;
         return decorationSet;
+      },
+      handleKeyDown: function handleKeyDown(view, event) {
+        var _ref8;
+        var isDragHandleFocused = ['drag-handle-button-row', 'drag-handle-button-column'].includes((_ref8 = event.target || null) === null || _ref8 === void 0 ? void 0 : _ref8.id);
+        var keysToTrap = ['Enter', ' '];
+        var keysToTrapWhen = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+        var _getPluginState3 = (0, _pluginFactory2.getPluginState)(view.state),
+          isDragMenuOpen = _getPluginState3.isDragMenuOpen;
+
+        // 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/cjs/pm-plugins/drag-and-drop/reducer.js

@@ -30,7 +30,8 @@ var _default = exports.default = function _default(pluginState, action) {
       return _objectSpread(_objectSpread({}, 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/cjs/pm-plugins/table-selection-keymap.js

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

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

@@ -9,10 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 var _icons = require("../icons");
 var HandleIconComponent = exports.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.default.createElement(_icons.DragHandleDisabledIcon, null) : /*#__PURE__*/_react.default.createElement(_icons.DragHandleIcon, null);
   }

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

@@ -16,7 +16,8 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-common/utils");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview");
-var _pluginFactory = require("../../pm-plugins/plugin-factory");
+var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
+var _pluginFactory2 = require("../../pm-plugins/plugin-factory");
 var _types = require("../../types");
 var _utils2 = require("../../utils");
 var _consts = require("../consts");
@@ -38,7 +39,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;
@@ -47,10 +48,13 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     previewContainer = _useState2[0],
     setPreviewContainer = _useState2[1];
-  var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+  var state = editorView.state,
+    selection = editorView.state.selection;
+  var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
     hoveredColumns = _getPluginState.hoveredColumns,
     hoveredRows = _getPluginState.hoveredRows;
-  var selection = editorView.state.selection;
+  var _getDnDPluginState = (0, _pluginFactory.getPluginState)(state),
+    isDragMenuOpen = _getDnDPluginState.isDragMenuOpen;
   var isRow = direction === 'row';
   var isColumn = direction === 'column';
   var isRowHandleHovered = isRow && hoveredRows.length > 0;
@@ -60,8 +64,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   }, [indexes, isRow, selection]);
   var handleIconProps = {
     forceDefaultHandle: forceDefaultHandle,
-    isColumnHandleHovered: isColumnHandleHovered,
-    isRowHandleHovered: isRowHandleHovered,
+    isHandleHovered: isColumnHandleHovered || isRowHandleHovered,
     hasMergedCells: hasMergedCells
   };
   (0, _react.useEffect)(function () {
@@ -121,6 +124,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
   var showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
     className: _types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE,
     "data-testid": "table-drag-handle-clickable-zone-button",
     style: {
@@ -135,6 +139,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     },
     onClick: onClick
   }), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
     id: isDragMenuTarget ? showDragMenuAnchorId : undefined,
     className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, (0, _defineProperty2.default)({}, _types.TableCssClassName.DRAG_HANDLE_DISABLED, hasMergedCells)),
     ref: dragHandleDivRef,
@@ -144,20 +149,29 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     },
     "data-testid": "table-drag-handle-button",
     "aria-label": formatMessage(isRow ? _messages.tableMessages.rowDragHandle : _messages.tableMessages.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
-  }, _utils.browser.gecko ? /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps) : /*#__PURE__*/_react.default.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
+  _utils.browser.gecko ? /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps) : /*#__PURE__*/_react.default.createElement("span", {
     style: {
       pointerEvents: 'none'
     }
-  }, /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps))), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_DragPreview.DragPreview, {
+  }, /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps)) : null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_DragPreview.DragPreview, {
     direction: direction,
     width: previewWidth,
     height: previewHeight

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

@@ -1,18 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DragMenu = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _styles = require("@atlaskit/editor-common/styles");
+var _ui = require("@atlaskit/editor-common/ui");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -32,9 +34,13 @@ var _types = require("../../types");
 var _utils3 = require("../../utils");
 var _dragMenu = require("../../utils/drag-menu");
 var _consts = require("../consts");
+var _DropdownMenu = require("./DropdownMenu");
 var _styles2 = require("./styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
+/** @jsxFrag */
 
 var MapDragMenuOptionIdToMessage = {
   add_row_above: {
@@ -165,17 +171,16 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
     menuCallback: menuCallback
   };
 };
-var DragMenu = exports.DragMenu = function DragMenu(_ref) {
+var ColorPaletteWithListeners = (0, _ui.withOuterListeners)(_uiColor.ColorPalette);
+var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.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,
@@ -189,6 +194,8 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSubmenuOpen = _useState2[0],
     setIsSubmenuOpen = _useState2[1];
+  var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+    isKeyboardModeActive = _getPluginState.isKeyboardModeActive;
   var selectionRect = (0, _utils2.isSelectionType)(selection, 'cell') ? (0, _utils2.getSelectionRect)(selection) : (0, _utils2.findCellRectClosestToPos)(selection.$from);
   var hasMergedCells = direction === 'row' ? _utils3.hasMergedCellsInRow : _utils3.hasMergedCellsInColumn;
   var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
@@ -224,7 +231,11 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
       targetCellPosition = _getTablePluginState2.targetCellPosition;
     var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
     var background = (0, _editorPalette.hexToEditorBackgroundPaletteColor)((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+    var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.cellBackgroundColorPalette, background, _consts.colorPalletteColumns),
+      selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
+      selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
     return {
+      key: 'background',
       content: formatMessage(_messages.tableMessages.backgroundColor),
       value: {
         name: 'background'
@@ -244,16 +255,33 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
       }), isSubmenuOpen && (0, _react2.jsx)("div", {
         className: _types.TableCssClassName.DRAG_SUBMENU,
         ref: handleSubMenuRef
-      }, (0, _react2.jsx)(_uiColor.ColorPalette, {
-        cols: 7,
-        onClick: setColor,
+      }, (0, _react2.jsx)(_uiMenu.ArrowKeyNavigationProvider, {
+        type: _uiMenu.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
+      }, (0, _react2.jsx)(ColorPaletteWithListeners, {
+        cols: _consts.colorPalletteColumns,
+        onClick: function onClick(color) {
+          setColor(color);
+        },
         selectedColor: background,
         paletteOptions: {
           palette: _uiColor.cellBackgroundColorPalette,
           paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
           hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
         }
-      })))
+      }))))
     };
   };
   var toggleHeaderColumn = function toggleHeaderColumn() {
@@ -265,8 +293,9 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   var toggleRowNumbers = function toggleRowNumbers() {
     (0, _commandsWithAnalytics.toggleNumberColumnWithAnalytics)(editorAnalyticsAPI)(state, dispatch);
   };
-  var createhHeaderRowColumnMenuItem = function createhHeaderRowColumnMenuItem(direction) {
+  var createHeaderRowColumnMenuItem = function createHeaderRowColumnMenuItem(direction) {
     return direction === 'column' ? {
+      key: 'header_column',
       content: formatMessage(_messages.tableMessages.headerColumn),
       value: {
         name: 'header_column'
@@ -279,6 +308,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
         isChecked: (0, _utils3.checkIfHeaderColumnEnabled)(selection)
       }))
     } : {
+      key: 'header_row',
       content: formatMessage(_messages.tableMessages.headerRow),
       value: {
         name: 'header_row'
@@ -294,6 +324,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   };
   var createRowNumbersMenuItem = function createRowNumbersMenuItem() {
     return {
+      key: 'row_numbers',
       content: formatMessage(_messages.tableMessages.rowNumbers),
       value: {
         name: 'row_numbers'
@@ -315,10 +346,10 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
    * @returns true when the menu should be closed, false otherwise
    */
   var shouldCloseMenu = function shouldCloseMenu(state) {
-    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
-      previousOpenState = _getPluginState.isDragMenuOpen,
-      previousDragMenuDirection = _getPluginState.dragMenuDirection,
-      previousDragMenuIndex = _getPluginState.dragMenuIndex;
+    var _getPluginState2 = (0, _pluginFactory.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.
@@ -330,9 +361,15 @@ var DragMenu = exports.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();
+      }
       (0, _commands2.toggleDragMenu)(false, direction, index)(state, dispatch);
     }
   };
@@ -341,6 +378,9 @@ var DragMenu = exports.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;
@@ -354,7 +394,7 @@ var DragMenu = exports.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) {
@@ -380,6 +420,17 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
       (0, _commands.clearHoverSelection)()(state, dispatch);
     }
   };
+  (0, _react.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;
   }
@@ -387,11 +438,11 @@ var DragMenu = exports.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 ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') && index === 0) {
     menuItems.push({
-      items: [createhHeaderRowColumnMenuItem(direction)]
+      items: [createHeaderRowColumnMenuItem(direction)]
     });
   }
 
@@ -401,26 +452,17 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
       items: [createRowNumbersMenuItem()]
     });
   }
-  return (0, _react2.jsx)(_uiMenu.DropdownMenu, {
-    mountTo: mountPoint
-    //This needs be removed when the a11y is completely handled
-    //Disabling key navigation now as it works only partially
-    ,
-    arrowKeyNavigationProviderOptions: {
-      type: _uiMenu.ArrowKeyNavigationType.MENU,
-      disableArrowKeyNavigation: true
+  return (0, _react2.jsx)(_DropdownMenu.DropdownMenu, {
+    disableKeyboardHandling: isSubmenuOpen,
+    section: {
+      hasSeparator: true
     },
+    target: target,
     items: menuItems,
-    isOpen: isOpen,
-    onOpenChange: closeMenu,
     onItemActivated: handleMenuItemActivated,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
-    fitWidth: _consts.dragMenuDropdownWidth,
-    boundariesElement: boundariesElement,
-    section: {
-      hasSeparator: true
-    }
+    handleClose: closeMenu
   });
-};
+});
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(DragMenu);