@atlaskit/editor-plugin-table 7.18.2 → 7.18.4

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,7 +14,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _customSteps = require("@atlaskit/custom-steps");
@@ -34,6 +35,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../commands");
 var _commandsWithAnalytics = require("../../commands-with-analytics");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
+var _pluginKey = require("../../pm-plugins/plugin-key");
 var _resizeState = require("../../pm-plugins/table-resizing/utils/resize-state");
 var _transforms = require("../../transforms");
 var _types = require("../../types");
@@ -41,10 +43,13 @@ var _utils3 = require("../../utils");
 var _consts = require("../consts");
 var _icons = require("../icons");
 var _styles2 = require("./styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 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 */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var arrowsList = new Set(['ArrowRight', 'ArrowLeft']);
 var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ContextualMenu, _Component);
   var _super = _createSuper(ContextualMenu);
@@ -56,8 +61,10 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      isSubmenuOpen: false
+      isSubmenuOpen: false,
+      isOpenAllowed: false
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dropdownMenuRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSubMenuRef", function (ref) {
       var parent = (0, _utils.closestElement)(_this.props.editorView.dom, '.fabric-editor-popup-scroll-parent');
       if (!(parent && ref)) {
@@ -75,15 +82,23 @@ var ContextualMenu = exports.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 = (0, _pluginFactory.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 = (0, _editorPalette.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 ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c')) {
+          var selectedRowAndColumnFromPalette = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.cellBackgroundColorPalette, background, _consts.colorPalletteColumns);
+          selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
+          selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
+        }
         return {
           content: isDragAndDropEnabled ? formatMessage(_messages.tableMessages.backgroundColor) : formatMessage(_messages.tableMessages.cellBackground),
           value: {
@@ -107,10 +122,27 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             ,
             className: isDragAndDropEnabled ? _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL : _types.TableCssClassName.CONTEXTUAL_MENU_ICON
-          }), isSubmenuOpen && (0, _react2.jsx)("div", {
+          }), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') ? isSubmenuOpen && (0, _react2.jsx)("div", {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
+          }, (0, _react2.jsx)(_uiMenu.ArrowKeyNavigationProvider, {
+            type: _uiMenu.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
           }, (0, _react2.jsx)(_uiColor.ColorPalette, {
             cols: 7,
             onClick: _this.setColor,
@@ -120,7 +152,22 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
               paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
               hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
             }
-          })))
+          }))) : isSubmenuOpen &&
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          (0, _react2.jsx)("div", {
+            className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
+            ref: _this.handleSubMenuRef
+          }, (0, _react2.jsx)(_uiColor.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: _uiColor.cellBackgroundColorPalette,
+              paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
+              hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
+            }
+          }))),
+          'aria-expanded': (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') ? isSubmenuOpen : undefined
         };
       }
     });
@@ -406,7 +453,8 @@ var ContextualMenu = exports.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;
@@ -419,6 +467,19 @@ var ContextualMenu = exports.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 ((0, _platformFeatureFlags.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(_pluginKey.pluginKey, {
+          type: 'SET_CELL_MENU_OPEN',
+          data: {
+            isCellMenuOpenByKeyboard: false
+          }
+        });
+        dispatch(tr);
+        editorView.dom.focus(); // otherwise cursor disappears from cell
+      }
       var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent');
       switch (item.value.name) {
         case 'sort_column_desc':
@@ -469,6 +530,19 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           (0, _commandsWithAnalytics.deleteRowsWithAnalytics)(editorAnalyticsAPI)(_analytics.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 ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') && isCellMenuOpenByKeyboard && !_this.state.isSubmenuOpen) {
+              _this.setState({
+                isSubmenuOpen: true
+              });
+            }
+            break;
+          }
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpen", function () {
@@ -484,22 +558,55 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenChange", function () {
-      var _this$props$editorVie = _this.props.editorView,
-        state = _this$props$editorVie.state,
-        dispatch = _this$props$editorVie.dispatch;
-      (0, _commands.toggleContextualMenu)()(state, dispatch);
-      _this.setState({
-        isSubmenuOpen: false
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (_ref5) {
-      var item = _ref5.item;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 ((0, _platformFeatureFlags.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();
+              }
+              (0, _commands.toggleContextualMenu)()(state, dispatch);
+              _this.setState({
+                isSubmenuOpen: false
+              });
+              (0, _commands.setFocusToCellMenu)(false)(state, dispatch);
+              dom.focus();
+            }
+          } else {
+            // mouse click outside
+            (0, _commands.toggleContextualMenu)()(state, dispatch);
+            _this.setState({
+              isSubmenuOpen: false
+            });
+            if (isCellMenuOpenByKeyboard) {
+              (0, _commands.setFocusToCellMenu)(false)(state, dispatch);
+            }
+          }
+        }
+      } else {
+        (0, _commands.toggleContextualMenu)()(state, dispatch);
+        _this.setState({
+          isSubmenuOpen: false
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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({
@@ -519,9 +626,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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();
       }
@@ -537,9 +644,9 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 = (0, _pluginFactory.getPluginState)(editorView.state),
         targetCellPosition = _getPluginState13.targetCellPosition;
@@ -551,20 +658,44 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
     return _this;
   }
   (0, _createClass2.default)(ContextualMenu, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if ((0, _platformFeatureFlags.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 = (0, _pluginFactory.getPluginState)(editorView.state),
         isDragAndDropEnabled = _getPluginState14.isDragAndDropEnabled;
       var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
+      var isOpenAllowed = false;
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c')) {
+        isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
+      } else {
+        isOpenAllowed = isOpen;
+      }
       return (0, _react2.jsx)("div", {
         "data-testid": "table-cell-contextual-menu",
-        onMouseLeave: this.closeSubmenu
+        onMouseLeave: this.closeSubmenu,
+        ref: this.dropdownMenuRef
       }, (0, _react2.jsx)(_uiMenu.DropdownMenu, {
         mountTo: mountPoint
         //This needs be removed when the a11y is completely handled
@@ -572,21 +703,25 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         ,
         arrowKeyNavigationProviderOptions: {
           type: _uiMenu.ArrowKeyNavigationType.MENU,
-          disableArrowKeyNavigation: true
+          disableArrowKeyNavigation: (0, _platformFeatureFlags.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 ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth,
+        shouldFocusFirstItem: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') ? function () {
+          return Boolean(isCellMenuOpenByKeyboard);
+        } : undefined,
         boundariesElement: boundariesElement,
         offset: offset,
         section: isDragAndDropEnabled ? {
           hasSeparator: true
-        } : undefined
+        } : undefined,
+        isAllowEnterDefaultBehavior: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
       }));
     }
   }]);

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

@@ -26,7 +26,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 = (0, _pluginFactory.getPluginState)(editorView.state),
     targetCellPosition = _getPluginState.targetCellPosition,
@@ -75,7 +76,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     boundariesElement: boundariesElement,
     editorAnalyticsAPI: editorAnalyticsAPI,
     getEditorContainerWidth: getEditorContainerWidth,
-    getEditorFeatureFlags: getEditorFeatureFlags
+    getEditorFeatureFlags: getEditorFeatureFlags,
+    isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

package/dist/es2019/commands/column-resize.js

@@ -62,9 +62,6 @@ export const initiateKeyboardColumnResizing = ({
   ariaNotify,
   getIntl
 }) => (state, dispatch, view) => {
-  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-    return false;
-  }
   const {
     selection
   } = state;
@@ -85,9 +82,6 @@ export const activateNextResizeArea = ({
   ariaNotify,
   getIntl
 }) => (state, dispatch, view) => {
-  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-    return false;
-  }
   const {
     resizeHandlePos
   } = getTableResizingPluginState(state) || {};
@@ -162,9 +156,6 @@ export const changeColumnWidthByStep = ({
   const fakeDispatch = tr => {
     customTr = tr;
   };
-  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-    return false;
-  }
   const {
     resizeHandlePos
   } = getTableResizingPluginState(state);
@@ -252,9 +243,6 @@ export const stopKeyboardColumnResizing = ({
   getIntl,
   originalTr
 }) => (state, dispatch) => {
-  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-    return false;
-  }
   let customTr = originalTr || state.tr;
   const fakeDispatch = tr => {
     customTr = tr;

package/dist/es2019/commands/go-to-next-cell.js

@@ -4,27 +4,24 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { goToNextCell as baseGotoNextCell, findTable } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { insertRowWithAnalytics } from '../commands-with-analytics';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { stopKeyboardColumnResizing } from './column-resize';
 const TAB_FORWARD_DIRECTION = 1;
 const TAB_BACKWARD_DIRECTION = -1;
 export const goToNextCell = (editorAnalyticsAPI, ariaNotify, getIntl) => direction => (state, dispatch, view) => {
+  var _getPluginState;
   const table = findTable(state.selection);
   if (!table) {
     return false;
   }
-  if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-    var _getPluginState;
-    const isColumnResizing = (_getPluginState = getPluginState(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.isKeyboardResize;
-    if (isColumnResizing) {
-      stopKeyboardColumnResizing({
-        ariaNotify: ariaNotify,
-        getIntl: getIntl
-      })(state, dispatch, view);
-      return true;
-    }
+  const isColumnResizing = (_getPluginState = getPluginState(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.isKeyboardResize;
+  if (isColumnResizing) {
+    stopKeyboardColumnResizing({
+      ariaNotify: ariaNotify,
+      getIntl: getIntl
+    })(state, dispatch, view);
+    return true;
   }
   const map = TableMap.get(table.node);
   const {

package/dist/es2019/commands/index.js

@@ -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/es2019/commands/misc.js

@@ -589,4 +589,12 @@ export const setTableAlignmentWithTableContentWithPos = (newAlignment, tableNode
   }
   tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
   return tr;
-};
+};
+export const setFocusToCellMenu = (isCellMenuOpenByKeyboard = true, originalTr) => createCommand(() => {
+  return {
+    type: 'SET_CELL_MENU_OPEN',
+    data: {
+      isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
+    }
+  };
+}, tr => (originalTr || tr).setMeta('addToHistory', false));

package/dist/es2019/commands/selection.js

@@ -3,7 +3,6 @@ import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isColumnSelected, isRowSelected, isTableSelected, selectedRect } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { selectColumn, selectRow } from '../commands/misc';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { getClosestSelectionRect } from '../toolbar';
@@ -177,11 +176,8 @@ const arrowLeftFromText = editorSelectionAPI => selection => (state, dispatch) =
     const {
       $from
     } = selection;
-    let isColumnResizing = false;
-    if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-      const columResizePluginState = getPluginState(state) || {};
-      isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.isKeyboardResize);
-    }
+    const columResizePluginState = getPluginState(state) || {};
+    const isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.isKeyboardResize);
     if (isSelectionAtStartOfTable($from, selection) && $from.parent.type.name === 'paragraph' && $from.depth === table.depth + 3 &&
     // + 3 for: row, cell & paragraph nodes
     editorSelectionAPI && !isColumnResizing) {
@@ -209,11 +205,8 @@ const arrowRightFromText = editorSelectionAPI => selection => (state, dispatch)
     const {
       $to
     } = selection;
-    let isColumnResizing = false;
-    if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-      const columResizePluginState = getPluginState(state) || {};
-      isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.isKeyboardResize);
-    }
+    const columResizePluginState = getPluginState(state) || {};
+    const isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.isKeyboardResize);
     if (isSelectionAtEndOfTable($to, selection) && $to.parent.type.name === 'paragraph' && $to.depth === table.depth + 3 &&
     // + 3 for: row, cell & paragraph nodes
     !isColumnResizing) {

package/dist/es2019/event-handlers.js

@@ -195,18 +195,14 @@ export const handleMouseOut = (view, mouseEvent) => {
       state,
       dispatch
     } = view;
-    if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-      const {
-        isKeyboardResize
-      } = getPluginState(state);
-      if (isKeyboardResize) {
-        // no need to hide decoration if column resizing started by keyboard
-        return false;
-      }
-      return hideResizeHandleLine()(state, dispatch);
-    } else {
-      return hideResizeHandleLine()(state, dispatch);
+    const {
+      isKeyboardResize
+    } = getPluginState(state);
+    if (isKeyboardResize) {
+      // no need to hide decoration if column resizing started by keyboard
+      return false;
     }
+    return hideResizeHandleLine()(state, dispatch);
   }
   return false;
 };
@@ -309,7 +305,7 @@ const handleMouseMoveDebounce = rafSchedule((view, event, offsetX) => {
         resizeHandleColumnIndex,
         resizeHandleRowIndex
       } = getPluginState(state);
-      const isKeyboardResize = getBooleanFF('platform.editor.a11y-column-resizing_emcvz') ? getPluginState(state).isKeyboardResize : false;
+      const isKeyboardResize = getPluginState(state).isKeyboardResize;
       const tableCell = closestElement(element, 'td, th');
       const cellStartPosition = view.posAtDOM(tableCell, 0);
       const rect = findCellRectClosestToPos(state.doc.resolve(cellStartPosition));

package/dist/es2019/plugin.js

@@ -347,13 +347,14 @@ const tablesPlugin = ({
             isHeaderColumnEnabled,
             isHeaderRowEnabled,
             isDragAndDropEnabled,
-            tableWrapperTarget
+            tableWrapperTarget,
+            isCellMenuOpenByKeyboard
           } = tablePluginState;
           const {
             allowControls
           } = pluginConfig;
           const stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
-          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && tableRef && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') && isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorView: editorView,
             tableNode: tableNode,
@@ -363,7 +364,8 @@ const tablesPlugin = ({
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             isContextualMenuOpen: isContextualMenuOpen,
             stickyHeader: stickyHeader,
-            tableWrapper: tableWrapperTarget
+            tableWrapper: tableWrapperTarget,
+            isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
           }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
             tableNode: tableNode,
             tableRef: tableRef,
@@ -391,7 +393,8 @@ const tablesPlugin = ({
             pluginConfig: pluginConfig,
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
-            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
+            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
+            isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
           }), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
             editorView: editorView,
             mountPoint: popupsMountPoint,