@atlaskit/editor-plugin-table 7.18.2 → 7.18.4

package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js

@@ -12,8 +12,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
-import { Component } from 'react';
-
+import React, { Component } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
@@ -22,8 +21,8 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 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 { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
+import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu } 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';
@@ -32,16 +31,18 @@ import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, toggleContextualMenu } from '../../commands';
+import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, setFocusToCellMenu, toggleContextualMenu } from '../../commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics } from '../../commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
+import { pluginKey as tablePluginKey } from '../../pm-plugins/plugin-key';
 import { getNewResizeStateFromSelectedColumns } from '../../pm-plugins/table-resizing/utils/resize-state';
 import { canMergeCells } from '../../transforms';
 import { TableCssClassName as ClassName } from '../../types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
-import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
+import { colorPalletteColumns, contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
 import { AddColRightIcon, AddRowBelowIcon, MergeCellsIcon, SplitCellIcon } from '../icons';
 import { cellColourPreviewStyles, elementBeforeIconStyles } from './styles';
+var arrowsList = new Set(['ArrowRight', 'ArrowLeft']);
 export var ContextualMenu = /*#__PURE__*/function (_Component) {
   _inherits(ContextualMenu, _Component);
   var _super = _createSuper(ContextualMenu);
@@ -53,8 +54,10 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isSubmenuOpen: false
+      isSubmenuOpen: false,
+      isOpenAllowed: false
     });
+    _defineProperty(_assertThisInitialized(_this), "dropdownMenuRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "handleSubMenuRef", function (ref) {
       var parent = closestElement(_this.props.editorView.dom, '.fabric-editor-popup-scroll-parent');
       if (!(parent && ref)) {
@@ -72,15 +75,23 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         state = _this$props.editorView.state,
         isOpen = _this$props.isOpen,
         formatMessage = _this$props.intl.formatMessage,
-        editorView = _this$props.editorView;
+        editorView = _this$props.editorView,
+        isCellMenuOpenByKeyboard = _this$props.isCellMenuOpenByKeyboard;
       var isSubmenuOpen = _this.state.isSubmenuOpen;
       var _getPluginState = getPluginState(editorView.state),
         targetCellPosition = _getPluginState.targetCellPosition,
         isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
       if (allowBackgroundColor) {
-        var _node$attrs, _node$attrs2;
+        var _node$attrs, _node$attrs2, _node$attrs3;
         var node = isOpen && 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 selectedRowIndex;
+        var selectedColumnIndex;
+        if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+          var selectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette(cellBackgroundColorPalette, background, colorPalletteColumns);
+          selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
+          selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
+        }
         return {
           content: isDragAndDropEnabled ? formatMessage(messages.backgroundColor) : formatMessage(messages.cellBackground),
           value: {
@@ -104,10 +115,27 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             ,
             className: isDragAndDropEnabled ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
-          }), isSubmenuOpen && jsx("div", {
+          }), getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') ? isSubmenuOpen && jsx("div", {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
+          }, jsx(ArrowKeyNavigationProvider, {
+            type: ArrowKeyNavigationType.COLOR,
+            selectedRowIndex: selectedRowIndex || 0,
+            selectedColumnIndex: selectedColumnIndex || 0,
+            handleClose: function handleClose() {
+              _this.setState({
+                isSubmenuOpen: false
+              });
+              if (_this.dropdownMenuRef && _this.dropdownMenuRef.current) {
+                var focusableItems = _this.dropdownMenuRef.current.querySelectorAll('div[tabindex="-1"]:not([disabled])');
+                if (focusableItems && focusableItems.length) {
+                  focusableItems[0].focus();
+                }
+              }
+            },
+            isPopupPositioned: true,
+            isOpenedByKeyboard: isCellMenuOpenByKeyboard
           }, jsx(ColorPalette, {
             cols: 7,
             onClick: _this.setColor,
@@ -117,7 +145,22 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
               paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
               hexToPaletteColor: hexToEditorBackgroundPaletteColor
             }
-          })))
+          }))) : isSubmenuOpen &&
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          jsx("div", {
+            className: ClassName.CONTEXTUAL_SUBMENU,
+            ref: _this.handleSubMenuRef
+          }, jsx(ColorPalette, {
+            cols: 7,
+            onClick: _this.setColor,
+            selectedColor: (node === null || node === void 0 || (_node$attrs3 = node.attrs) === null || _node$attrs3 === void 0 ? void 0 : _node$attrs3.background) || '#ffffff',
+            paletteOptions: {
+              palette: cellBackgroundColorPalette,
+              paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
+              hexToPaletteColor: hexToEditorBackgroundPaletteColor
+            }
+          }))),
+          'aria-expanded': getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') ? isSubmenuOpen : undefined
         };
       }
     });
@@ -403,7 +446,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         selectionRect = _this$props10.selectionRect,
         editorAnalyticsAPI = _this$props10.editorAnalyticsAPI,
         getEditorContainerWidth = _this$props10.getEditorContainerWidth,
-        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
+        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags,
+        isCellMenuOpenByKeyboard = _this$props10.isCellMenuOpenByKeyboard;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       var state = editorView.state,
         dispatch = editorView.dispatch;
@@ -416,6 +460,19 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         tableDuplicateCellColouring = _ref4$tableDuplicateC === void 0 ? false : _ref4$tableDuplicateC,
         _ref4$tableWithFixedC = _ref4.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _ref4$tableWithFixedC === void 0 ? false : _ref4$tableWithFixedC;
+      // context menu opened by keyboard and any item except 'background' activated
+      // or color has been chosen from color palette
+      if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') && isCellMenuOpenByKeyboard && (item.value.name !== 'background' || item.value.name === 'background' && _this.state.isSubmenuOpen)) {
+        var tr = state.tr;
+        tr.setMeta(tablePluginKey, {
+          type: 'SET_CELL_MENU_OPEN',
+          data: {
+            isCellMenuOpenByKeyboard: false
+          }
+        });
+        dispatch(tr);
+        editorView.dom.focus(); // otherwise cursor disappears from cell
+      }
       var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
       switch (item.value.name) {
         case 'sort_column_desc':
@@ -466,6 +523,19 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(state, dispatch);
           _this.toggleOpen();
           break;
+        case 'background':
+          {
+            // This is called twice.
+            // 1st time when user chooses the background color item.
+            // 2nd when color has been chosen from color palette.
+            // here we are handling the 1st call relying on the isSubmenuOpen state value
+            if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') && isCellMenuOpenByKeyboard && !_this.state.isSubmenuOpen) {
+              _this.setState({
+                isSubmenuOpen: true
+              });
+            }
+            break;
+          }
       }
     });
     _defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
@@ -481,22 +551,55 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         });
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleOpenChange", function () {
-      var _this$props$editorVie = _this.props.editorView,
-        state = _this$props$editorVie.state,
-        dispatch = _this$props$editorVie.dispatch;
-      toggleContextualMenu()(state, dispatch);
-      _this.setState({
-        isSubmenuOpen: false
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleItemMouseEnter", function (_ref5) {
-      var item = _ref5.item;
+    _defineProperty(_assertThisInitialized(_this), "handleOpenChange", function (payload) {
       var _this$props12 = _this.props,
         _this$props12$editorV = _this$props12.editorView,
         state = _this$props12$editorV.state,
         dispatch = _this$props12$editorV.dispatch,
-        selectionRect = _this$props12.selectionRect;
+        dom = _this$props12$editorV.dom,
+        isCellMenuOpenByKeyboard = _this$props12.isCellMenuOpenByKeyboard;
+      if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+        if (payload) {
+          var event = payload.event;
+          if (event && event instanceof KeyboardEvent) {
+            if (!_this.state.isSubmenuOpen) {
+              if (arrowsList.has(event.key)) {
+                // preventing default behavior for avoiding cursor jump to next/previous table column
+                // when left/right arrow pressed.
+                event.preventDefault();
+              }
+              toggleContextualMenu()(state, dispatch);
+              _this.setState({
+                isSubmenuOpen: false
+              });
+              setFocusToCellMenu(false)(state, dispatch);
+              dom.focus();
+            }
+          } else {
+            // mouse click outside
+            toggleContextualMenu()(state, dispatch);
+            _this.setState({
+              isSubmenuOpen: false
+            });
+            if (isCellMenuOpenByKeyboard) {
+              setFocusToCellMenu(false)(state, dispatch);
+            }
+          }
+        }
+      } else {
+        toggleContextualMenu()(state, dispatch);
+        _this.setState({
+          isSubmenuOpen: false
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleItemMouseEnter", function (_ref5) {
+      var item = _ref5.item;
+      var _this$props13 = _this.props,
+        _this$props13$editorV = _this$props13.editorView,
+        state = _this$props13$editorV.state,
+        dispatch = _this$props13$editorV.dispatch,
+        selectionRect = _this$props13.selectionRect;
       if (item.value.name === 'background') {
         if (!_this.state.isSubmenuOpen) {
           _this.setState({
@@ -516,9 +619,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "handleItemMouseLeave", function (_ref6) {
       var item = _ref6.item;
-      var _this$props$editorVie2 = _this.props.editorView,
-        state = _this$props$editorVie2.state,
-        dispatch = _this$props$editorVie2.dispatch;
+      var _this$props$editorVie = _this.props.editorView,
+        state = _this$props$editorVie.state,
+        dispatch = _this$props$editorVie.dispatch;
       if (item.value.name === 'background') {
         _this.closeSubmenu();
       }
@@ -534,9 +637,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "setColor", function (color) {
-      var _this$props13 = _this.props,
-        editorView = _this$props13.editorView,
-        editorAnalyticsAPI = _this$props13.editorAnalyticsAPI;
+      var _this$props14 = _this.props,
+        editorView = _this$props14.editorView,
+        editorAnalyticsAPI = _this$props14.editorAnalyticsAPI;
       // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
       var _getPluginState13 = getPluginState(editorView.state),
         targetCellPosition = _getPluginState13.targetCellPosition;
@@ -548,20 +651,44 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
     return _this;
   }
   _createClass(ContextualMenu, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+        // ArrowKeyNavigationProvider in DropdownMenu expects that menu handle will stay focused
+        // until user pressed ArrowDown.
+        // Behavior above fails the A11Y requirement about first item in menu should be focused immediately.
+        // so here is triggering componentDidUpdate inside dropdown to set focus on first element
+        var isCellMenuOpenByKeyboard = this.props.isCellMenuOpenByKeyboard;
+        if (isCellMenuOpenByKeyboard) {
+          this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
+            isOpenAllowed: isCellMenuOpenByKeyboard
+          }));
+        }
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
-      var _this$props14 = this.props,
-        isOpen = _this$props14.isOpen,
-        mountPoint = _this$props14.mountPoint,
-        offset = _this$props14.offset,
-        boundariesElement = _this$props14.boundariesElement,
-        editorView = _this$props14.editorView;
+      var _this$props15 = this.props,
+        isOpen = _this$props15.isOpen,
+        mountPoint = _this$props15.mountPoint,
+        offset = _this$props15.offset,
+        boundariesElement = _this$props15.boundariesElement,
+        editorView = _this$props15.editorView,
+        isCellMenuOpenByKeyboard = _this$props15.isCellMenuOpenByKeyboard;
       var _getPluginState14 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState14.isDragAndDropEnabled;
       var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
+      var isOpenAllowed = false;
+      if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+        isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
+      } else {
+        isOpenAllowed = isOpen;
+      }
       return jsx("div", {
         "data-testid": "table-cell-contextual-menu",
-        onMouseLeave: this.closeSubmenu
+        onMouseLeave: this.closeSubmenu,
+        ref: this.dropdownMenuRef
       }, jsx(DropdownMenu, {
         mountTo: mountPoint
         //This needs be removed when the a11y is completely handled
@@ -569,21 +696,25 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         ,
         arrowKeyNavigationProviderOptions: {
           type: ArrowKeyNavigationType.MENU,
-          disableArrowKeyNavigation: true
+          disableArrowKeyNavigation: getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') && isCellMenuOpenByKeyboard && !this.state.isSubmenuOpen ? false : true
         },
         items: items,
-        isOpen: isOpen,
+        isOpen: isOpenAllowed,
         onOpenChange: this.handleOpenChange,
         onItemActivated: this.onMenuItemActivated,
         onMouseEnter: this.handleItemMouseEnter,
         onMouseLeave: this.handleItemMouseLeave,
         fitHeight: 188,
         fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
+        shouldFocusFirstItem: getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') ? function () {
+          return Boolean(isCellMenuOpenByKeyboard);
+        } : undefined,
         boundariesElement: boundariesElement,
         offset: offset,
         section: isDragAndDropEnabled ? {
           hasSeparator: true
-        } : undefined
+        } : undefined,
+        isAllowEnterDefaultBehavior: getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
       }));
     }
   }]);

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

@@ -18,7 +18,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     pluginConfig = _ref.pluginConfig,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     getEditorContainerWidth = _ref.getEditorContainerWidth,
-    getEditorFeatureFlags = _ref.getEditorFeatureFlags;
+    getEditorFeatureFlags = _ref.getEditorFeatureFlags,
+    isCellMenuOpenByKeyboard = _ref.isCellMenuOpenByKeyboard;
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   var _getPluginState = getPluginState(editorView.state),
     targetCellPosition = _getPluginState.targetCellPosition,
@@ -67,7 +68,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
     getEditorContainerWidth: getEditorContainerWidth,
-    getEditorFeatureFlags: getEditorFeatureFlags
+    getEditorFeatureFlags: getEditorFeatureFlags,
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

package/dist/types/commands/index.d.ts

@@ -2,7 +2,7 @@ export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clear
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout, } from './toggle';
 export { clearMultipleCells } from './clear';
-export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest, } from './misc';
+export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest, setFocusToCellMenu, } from './misc';
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
 export { removeDescendantNodes } from './referentiality';

package/dist/types/commands/misc.d.ts

@@ -38,3 +38,4 @@ export declare const addBoldInEmptyHeaderCells: (tableCellHeader: ContentNodeWit
 export declare const updateWidthToWidest: (widthToWidest: WidthToWidest) => Command;
 export declare const setTableAlignment: (newAlignment: TableLayout) => EditorCommand;
 export declare const setTableAlignmentWithTableContentWithPos: (newAlignment: TableLayout, tableNodeWithPos: NodeWithPos) => EditorCommand;
+export declare const setFocusToCellMenu: (isCellMenuOpenByKeyboard?: boolean, originalTr?: Transaction) => Command;

package/dist/types/types.d.ts

@@ -106,6 +106,7 @@ export interface TablePluginState {
     isDragAndDropEnabled?: boolean;
     isTableHovered?: boolean;
     isTableScalingEnabled?: boolean;
+    isCellMenuOpenByKeyboard?: boolean;
 }
 export type TablePluginAction = {
     type: 'SET_EDITOR_FOCUS';
@@ -248,6 +249,11 @@ export type TablePluginAction = {
     type: 'HIDE_INSERT_COLUMN_OR_ROW_BUTTON';
 } | {
     type: 'TOGGLE_CONTEXTUAL_MENU';
+} | {
+    type: 'SET_CELL_MENU_OPEN';
+    data: {
+        isCellMenuOpenByKeyboard: boolean;
+    };
 };
 export type ColumnResizingPluginAction = {
     type: 'SET_RESIZE_HANDLE_POSITION';

package/dist/types/ui/FloatingContextualButton/index.d.ts

@@ -15,5 +15,6 @@ export interface Props {
     isNumberColumnEnabled?: boolean;
     stickyHeader?: RowStickyState;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+    isCellMenuOpenByKeyboard?: boolean;
 }
 export default function (props: Props): jsx.JSX.Element;

package/dist/types/ui/FloatingContextualMenu/ContextualMenu.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
@@ -20,15 +20,19 @@ export interface Props {
     editorAnalyticsAPI?: EditorAnalyticsAPI;
     getEditorContainerWidth: GetEditorContainerWidth;
     getEditorFeatureFlags?: GetEditorFeatureFlags;
+    isCellMenuOpenByKeyboard?: boolean;
 }
 export interface State {
     isSubmenuOpen: boolean;
+    isOpenAllowed: boolean;
 }
 export declare class ContextualMenu extends Component<Props & WrappedComponentProps, State> {
     state: State;
     static defaultProps: {
         boundariesElement: HTMLElement | undefined;
     };
+    private dropdownMenuRef;
+    componentDidMount(): void;
     render(): jsx.JSX.Element;
     private handleSubMenuRef;
     private createBackgroundColorItem;
@@ -50,7 +54,7 @@ export declare class ContextualMenu extends Component<Props & WrappedComponentPr
     private closeSubmenu;
     private setColor;
 }
-declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
-    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
 };
 export default _default;

package/dist/types/ui/FloatingContextualMenu/index.d.ts

@@ -15,9 +15,10 @@ export interface Props {
     scrollableElement?: HTMLElement;
     pluginConfig?: PluginConfig;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
+    isCellMenuOpenByKeyboard?: boolean;
 }
 declare const FloatingContextualMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, }: Props): jsx.JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, isCellMenuOpenByKeyboard, }: Props): jsx.JSX.Element | null;
     displayName: string;
 };
 export default FloatingContextualMenu;

package/dist/types-ts4.5/commands/index.d.ts

@@ -2,7 +2,7 @@ export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clear
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout, } from './toggle';
 export { clearMultipleCells } from './clear';
-export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest, } from './misc';
+export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest, setFocusToCellMenu, } from './misc';
 export { sortByColumn } from './sort';
 export { goToNextCell } from './go-to-next-cell';
 export { removeDescendantNodes } from './referentiality';

package/dist/types-ts4.5/commands/misc.d.ts

@@ -38,3 +38,4 @@ export declare const addBoldInEmptyHeaderCells: (tableCellHeader: ContentNodeWit
 export declare const updateWidthToWidest: (widthToWidest: WidthToWidest) => Command;
 export declare const setTableAlignment: (newAlignment: TableLayout) => EditorCommand;
 export declare const setTableAlignmentWithTableContentWithPos: (newAlignment: TableLayout, tableNodeWithPos: NodeWithPos) => EditorCommand;
+export declare const setFocusToCellMenu: (isCellMenuOpenByKeyboard?: boolean, originalTr?: Transaction) => Command;

package/dist/types-ts4.5/types.d.ts

@@ -106,6 +106,7 @@ export interface TablePluginState {
     isDragAndDropEnabled?: boolean;
     isTableHovered?: boolean;
     isTableScalingEnabled?: boolean;
+    isCellMenuOpenByKeyboard?: boolean;
 }
 export type TablePluginAction = {
     type: 'SET_EDITOR_FOCUS';
@@ -248,6 +249,11 @@ export type TablePluginAction = {
     type: 'HIDE_INSERT_COLUMN_OR_ROW_BUTTON';
 } | {
     type: 'TOGGLE_CONTEXTUAL_MENU';
+} | {
+    type: 'SET_CELL_MENU_OPEN';
+    data: {
+        isCellMenuOpenByKeyboard: boolean;
+    };
 };
 export type ColumnResizingPluginAction = {
     type: 'SET_RESIZE_HANDLE_POSITION';

package/dist/types-ts4.5/ui/FloatingContextualButton/index.d.ts

@@ -15,5 +15,6 @@ export interface Props {
     isNumberColumnEnabled?: boolean;
     stickyHeader?: RowStickyState;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+    isCellMenuOpenByKeyboard?: boolean;
 }
 export default function (props: Props): jsx.JSX.Element;

package/dist/types-ts4.5/ui/FloatingContextualMenu/ContextualMenu.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
@@ -20,15 +20,19 @@ export interface Props {
     editorAnalyticsAPI?: EditorAnalyticsAPI;
     getEditorContainerWidth: GetEditorContainerWidth;
     getEditorFeatureFlags?: GetEditorFeatureFlags;
+    isCellMenuOpenByKeyboard?: boolean;
 }
 export interface State {
     isSubmenuOpen: boolean;
+    isOpenAllowed: boolean;
 }
 export declare class ContextualMenu extends Component<Props & WrappedComponentProps, State> {
     state: State;
     static defaultProps: {
         boundariesElement: HTMLElement | undefined;
     };
+    private dropdownMenuRef;
+    componentDidMount(): void;
     render(): jsx.JSX.Element;
     private handleSubMenuRef;
     private createBackgroundColorItem;
@@ -50,7 +54,7 @@ export declare class ContextualMenu extends Component<Props & WrappedComponentPr
     private closeSubmenu;
     private setColor;
 }
-declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
-    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
 };
 export default _default;

package/dist/types-ts4.5/ui/FloatingContextualMenu/index.d.ts

@@ -15,9 +15,10 @@ export interface Props {
     scrollableElement?: HTMLElement;
     pluginConfig?: PluginConfig;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
+    isCellMenuOpenByKeyboard?: boolean;
 }
 declare const FloatingContextualMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, }: Props): jsx.JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, pluginConfig, editorAnalyticsAPI, getEditorContainerWidth, getEditorFeatureFlags, isCellMenuOpenByKeyboard, }: Props): jsx.JSX.Element | null;
     displayName: string;
 };
 export default FloatingContextualMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.18.2",
+	"version": "7.18.4",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -111,9 +111,6 @@
 		"platform.editor.a11y-table-resizing_uapcv": {
 			"type": "boolean"
 		},
-		"platform.editor.a11y-column-resizing_emcvz": {
-			"type": "boolean"
-		},
 		"platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg": {
 			"type": "boolean"
 		},
@@ -134,6 +131,9 @@
 		},
 		"platform.editor.table.editor-num-col-style-changes": {
 			"type": "boolean"
+		},
+		"platform.editor.a11y-table-context-menu_y4c9c": {
+			"type": "boolean"
 		}
 	}
 }

package/src/commands/column-resize.ts

@@ -123,10 +123,6 @@ export const initiateKeyboardColumnResizing =
 		getIntl?: () => IntlShape;
 	}): Command =>
 	(state, dispatch, view) => {
-		if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-			return false;
-		}
-
 		const { selection } = state;
 		const selectionRect = isSelectionType(selection, 'cell')
 			? getSelectionRect(selection)!
@@ -160,10 +156,6 @@ export const activateNextResizeArea =
 		getIntl?: () => IntlShape;
 	}): Command =>
 	(state, dispatch, view) => {
-		if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-			return false;
-		}
-
 		const { resizeHandlePos } = getTableResizingPluginState(state) || {};
 		// If No resizing has initiated, skip to regular handler
 		if (!resizeHandlePos) {
@@ -274,9 +266,6 @@ export const changeColumnWidthByStep =
 		const fakeDispatch = (tr: Transaction) => {
 			customTr = tr;
 		};
-		if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-			return false;
-		}
 		const { resizeHandlePos } = getTableResizingPluginState(state);
 		const cell = findCellClosestToPos(state.selection.$from);
 		if (!view || !resizeHandlePos || !cell) {
@@ -403,9 +392,6 @@ export const stopKeyboardColumnResizing =
 		originalTr?: Transaction;
 	}): Command =>
 	(state, dispatch) => {
-		if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-			return false;
-		}
 		let customTr = originalTr || state.tr;
 		const fakeDispatch = (tr: Transaction) => {
 			customTr = tr;