@atlaskit/editor-core 187.44.6 → 187.44.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-core
 
+## 187.44.7
+
+### Patch Changes
+
+- [`beb32df5147`](https://bitbucket.org/atlassian/atlassian-frontend/commits/beb32df5147) - [ECA11Y-45] [ECA11Y-22] Change the tab key handling the status popup to improve accessibility.
+- Updated dependencies
+
 ## 187.44.6
 
 ### Patch Changes

package/dist/cjs/plugins/status/actions.js

@@ -114,12 +114,23 @@ var removeStatus = function removeStatus(showStatusPickerAt) {
   };
 };
 exports.removeStatus = removeStatus;
-var commitStatusPicker = function commitStatusPicker() {
+var handleClosingByArrows = function handleClosingByArrows(closingMethod, state, showStatusPickerAt, tr) {
+  if (closingMethod === 'arrowLeft') {
+    // put cursor right before status Lozenge
+    tr = tr.setSelection(_state.Selection.near(state.tr.doc.resolve(showStatusPickerAt), -1));
+  } else if (closingMethod === 'arrowRight') {
+    // put cursor right after status Lozenge
+    tr = tr.setSelection(_state.Selection.near(state.tr.doc.resolve(showStatusPickerAt + 1)));
+  }
+};
+var commitStatusPicker = function commitStatusPicker(closingPayload) {
   return function (editorView) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
     var _ref2 = _pluginKey.pluginKey.getState(state) || {},
       showStatusPickerAt = _ref2.showStatusPickerAt;
+    var _ref3 = closingPayload || {},
+      closingMethod = _ref3.closingMethod;
     if (!showStatusPickerAt) {
       return;
     }
@@ -132,7 +143,9 @@ var commitStatusPicker = function commitStatusPicker() {
       showStatusPickerAt: null,
       isNew: false
     });
-    if (statusNode.attrs.text) {
+    if (closingMethod) {
+      handleClosingByArrows(closingMethod, state, showStatusPickerAt, tr);
+    } else if (statusNode.attrs.text) {
       // still has content - keep content
       // move selection after status if selection did not change
       if (tr.selection.from === showStatusPickerAt) {

package/dist/cjs/plugins/status/index.js

@@ -79,8 +79,8 @@ var baseStatusPlugin = function baseStatusPlugin(_ref) {
             onTextChanged: function onTextChanged(status) {
               (0, _actions.updateStatus)(status)(editorView.state, editorView.dispatch);
             },
-            closeStatusPicker: function closeStatusPicker() {
-              (0, _actions.commitStatusPicker)()(editorView);
+            closeStatusPicker: function closeStatusPicker(closingPayload) {
+              (0, _actions.commitStatusPicker)(closingPayload)(editorView);
             },
             onEnter: function onEnter() {
               (0, _actions.commitStatusPicker)()(editorView);

package/dist/cjs/plugins/status/ui/statusPicker.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StatusPickerWithoutAnalytcs = exports.InputMethod = void 0;
+exports.default = exports.closingMethods = exports.StatusPickerWithoutAnalytcs = exports.InputMethod = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -36,7 +36,13 @@ var InputMethod = /*#__PURE__*/function (InputMethod) {
   return InputMethod;
 }({});
 exports.InputMethod = InputMethod;
-var pickerContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  padding: ", " 0;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), "var(--ds-space-100, 8px)", (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))");
+var closingMethods = /*#__PURE__*/function (closingMethods) {
+  closingMethods["ArrowLeft"] = "arrowLeft";
+  closingMethods["ArrowRight"] = "arrowRight";
+  return closingMethods;
+}({});
+exports.closingMethods = closingMethods;
+var pickerContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  padding: ", " 0;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  :focus {\n    outline: none;\n  }\n  input {\n    text-transform: uppercase;\n  }\n"])), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), "var(--ds-space-100, 8px)", (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))");
 var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(StatusPickerWithoutAnalytcs, _React$Component);
   var _super = _createSuper(StatusPickerWithoutAnalytcs);
@@ -57,6 +63,55 @@ var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
       _this.inputMethod = InputMethod.escKey;
       _this.props.onEnter(_this.state);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTabPress", function (event) {
+      var colorButtons = event.currentTarget.querySelectorAll('button');
+      var inputField = event.currentTarget.querySelector('input');
+      var isInputFocussed = document.activeElement === inputField;
+      var isButtonFocussed = Array.from(colorButtons).some(function (buttonElement) {
+        var _document;
+        return ((_document = document) === null || _document === void 0 ? void 0 : _document.activeElement) === buttonElement;
+      });
+      if (event !== null && event !== void 0 && event.shiftKey) {
+        /* shift + tab */
+        if (isInputFocussed) {
+          colorButtons[0].focus();
+          event.preventDefault();
+        }
+        /* After the user presses shift + tab the color-palette component updates tab index for the first color to be 0.
+            To correctly set focus to the input field instead of the first color button we need to set focus manually
+            */
+        if (isButtonFocussed) {
+          inputField === null || inputField === void 0 ? void 0 : inputField.focus();
+          event.preventDefault();
+        }
+      } else {
+        /* tab */
+        if (isButtonFocussed) {
+          inputField === null || inputField === void 0 ? void 0 : inputField.focus();
+          event.preventDefault();
+        }
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleArrow", function (event, closingMethod) {
+      var _document2;
+      if (((_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement) === _this.popupBodyWrapper.current) {
+        var _this$popupBodyWrappe, _this$popupBodyWrappe2;
+        event.preventDefault();
+        (_this$popupBodyWrappe = _this.popupBodyWrapper) === null || _this$popupBodyWrappe === void 0 ? void 0 : (_this$popupBodyWrappe2 = _this$popupBodyWrappe.current) === null || _this$popupBodyWrappe2 === void 0 ? void 0 : _this$popupBodyWrappe2.blur();
+        _this.props.closeStatusPicker({
+          closingMethod: closingMethod
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (event) {
+      var isTabPressed = event.key === 'Tab';
+      if (isTabPressed) {
+        return _this.handleTabPress(event);
+      }
+      if (event.key in closingMethods) {
+        return _this.handleArrow(event, closingMethods[event.key]);
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onColorHover", function (color) {
       _this.createStatusAnalyticsAndFireFunc({
         action: 'hovered',
@@ -120,6 +175,7 @@ var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
     });
     _this.state = _this.extractStateFromProps(props);
     _this.createStatusAnalyticsAndFireFunc = (0, _analytics.createStatusAnalyticsAndFire)(props.createAnalyticsEvent);
+    _this.popupBodyWrapper = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   (0, _createClass2.default)(StatusPickerWithoutAnalytcs, [{
@@ -172,6 +228,11 @@ var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       this.reset();
       this.fireStatusPopupOpenedAnalytics(this.state);
+      if (typeof this.props.isNew === 'boolean' && this.props.isNew === false) {
+        var _this$popupBodyWrappe3, _this$popupBodyWrappe4;
+        // Wrapper should be focused only if status already exists otherwise input field will receive focus
+        (_this$popupBodyWrappe3 = this.popupBodyWrapper) === null || _this$popupBodyWrappe3 === void 0 ? void 0 : (_this$popupBodyWrappe4 = _this$popupBodyWrappe3.current) === null || _this$popupBodyWrappe4 === void 0 ? void 0 : _this$popupBodyWrappe4.focus();
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -226,10 +287,14 @@ var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
         fitHeight: 40,
         mountTo: mountTo,
         boundariesElement: boundariesElement,
-        scrollableElement: scrollableElement
+        scrollableElement: scrollableElement,
+        closeOnTab: false
       }, (0, _react2.jsx)("div", {
         css: pickerContainer,
-        onClick: this.handlePopupClick
+        tabIndex: -1,
+        ref: this.popupBodyWrapper,
+        onClick: this.handlePopupClick,
+        onKeyDown: this.onKeyDown
       }, (0, _react2.jsx)(_picker.StatusPicker, {
         autoFocus: isNew,
         selectedColor: color,

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.44.6";
+var version = "187.44.7";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/plugins/status/actions.js

@@ -94,7 +94,16 @@ export const removeStatus = showStatusPickerAt => (state, dispatch) => {
   }
   return true;
 };
-export const commitStatusPicker = () => editorView => {
+const handleClosingByArrows = (closingMethod, state, showStatusPickerAt, tr) => {
+  if (closingMethod === 'arrowLeft') {
+    // put cursor right before status Lozenge
+    tr = tr.setSelection(Selection.near(state.tr.doc.resolve(showStatusPickerAt), -1));
+  } else if (closingMethod === 'arrowRight') {
+    // put cursor right after status Lozenge
+    tr = tr.setSelection(Selection.near(state.tr.doc.resolve(showStatusPickerAt + 1)));
+  }
+};
+export const commitStatusPicker = closingPayload => editorView => {
   const {
     state,
     dispatch
@@ -102,6 +111,9 @@ export const commitStatusPicker = () => editorView => {
   const {
     showStatusPickerAt
   } = pluginKey.getState(state) || {};
+  const {
+    closingMethod
+  } = closingPayload || {};
   if (!showStatusPickerAt) {
     return;
   }
@@ -114,7 +126,9 @@ export const commitStatusPicker = () => editorView => {
     showStatusPickerAt: null,
     isNew: false
   });
-  if (statusNode.attrs.text) {
+  if (closingMethod) {
+    handleClosingByArrows(closingMethod, state, showStatusPickerAt, tr);
+  } else if (statusNode.attrs.text) {
     // still has content - keep content
     // move selection after status if selection did not change
     if (tr.selection.from === showStatusPickerAt) {

package/dist/es2019/plugins/status/index.js

@@ -74,8 +74,8 @@ const baseStatusPlugin = ({
           onTextChanged: status => {
             updateStatus(status)(editorView.state, editorView.dispatch);
           },
-          closeStatusPicker: () => {
-            commitStatusPicker()(editorView);
+          closeStatusPicker: closingPayload => {
+            commitStatusPicker(closingPayload)(editorView);
           },
           onEnter: () => {
             commitStatusPicker()(editorView);

package/dist/es2019/plugins/status/ui/statusPicker.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
+
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -18,11 +19,19 @@ export let InputMethod = /*#__PURE__*/function (InputMethod) {
   InputMethod["enterKey"] = "enterKey";
   return InputMethod;
 }({});
+export let closingMethods = /*#__PURE__*/function (closingMethods) {
+  closingMethods["ArrowLeft"] = "arrowLeft";
+  closingMethods["ArrowRight"] = "arrowRight";
+  return closingMethods;
+}({});
 const pickerContainer = css`
   background: ${`var(--ds-surface-overlay, ${N0})`};
   padding: ${"var(--ds-space-100, 8px)"} 0;
   border-radius: ${borderRadius()}px;
   box-shadow: ${"var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))"};
+  :focus {
+    outline: none;
+  }
   input {
     text-transform: uppercase;
   }
@@ -43,6 +52,55 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       this.inputMethod = InputMethod.escKey;
       this.props.onEnter(this.state);
     });
+    _defineProperty(this, "handleTabPress", event => {
+      const colorButtons = event.currentTarget.querySelectorAll('button');
+      const inputField = event.currentTarget.querySelector('input');
+      const isInputFocussed = document.activeElement === inputField;
+      const isButtonFocussed = Array.from(colorButtons).some(buttonElement => {
+        var _document;
+        return ((_document = document) === null || _document === void 0 ? void 0 : _document.activeElement) === buttonElement;
+      });
+      if (event !== null && event !== void 0 && event.shiftKey) {
+        /* shift + tab */
+        if (isInputFocussed) {
+          colorButtons[0].focus();
+          event.preventDefault();
+        }
+        /* After the user presses shift + tab the color-palette component updates tab index for the first color to be 0.
+            To correctly set focus to the input field instead of the first color button we need to set focus manually
+            */
+        if (isButtonFocussed) {
+          inputField === null || inputField === void 0 ? void 0 : inputField.focus();
+          event.preventDefault();
+        }
+      } else {
+        /* tab */
+        if (isButtonFocussed) {
+          inputField === null || inputField === void 0 ? void 0 : inputField.focus();
+          event.preventDefault();
+        }
+      }
+    });
+    _defineProperty(this, "handleArrow", (event, closingMethod) => {
+      var _document2;
+      if (((_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement) === this.popupBodyWrapper.current) {
+        var _this$popupBodyWrappe, _this$popupBodyWrappe2;
+        event.preventDefault();
+        (_this$popupBodyWrappe = this.popupBodyWrapper) === null || _this$popupBodyWrappe === void 0 ? void 0 : (_this$popupBodyWrappe2 = _this$popupBodyWrappe.current) === null || _this$popupBodyWrappe2 === void 0 ? void 0 : _this$popupBodyWrappe2.blur();
+        this.props.closeStatusPicker({
+          closingMethod
+        });
+      }
+    });
+    _defineProperty(this, "onKeyDown", event => {
+      const isTabPressed = event.key === 'Tab';
+      if (isTabPressed) {
+        return this.handleTabPress(event);
+      }
+      if (event.key in closingMethods) {
+        return this.handleArrow(event, closingMethods[event.key]);
+      }
+    });
     _defineProperty(this, "onColorHover", color => {
       this.createStatusAnalyticsAndFireFunc({
         action: 'hovered',
@@ -106,6 +164,7 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
     _defineProperty(this, "handlePopupClick", event => event.nativeEvent.stopImmediatePropagation());
     this.state = this.extractStateFromProps(props);
     this.createStatusAnalyticsAndFireFunc = createStatusAnalyticsAndFire(props.createAnalyticsEvent);
+    this.popupBodyWrapper = /*#__PURE__*/React.createRef();
   }
   fireStatusPopupOpenedAnalytics(state) {
     const {
@@ -153,6 +212,11 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
   componentDidMount() {
     this.reset();
     this.fireStatusPopupOpenedAnalytics(this.state);
+    if (typeof this.props.isNew === 'boolean' && this.props.isNew === false) {
+      var _this$popupBodyWrappe3, _this$popupBodyWrappe4;
+      // Wrapper should be focused only if status already exists otherwise input field will receive focus
+      (_this$popupBodyWrappe3 = this.popupBodyWrapper) === null || _this$popupBodyWrappe3 === void 0 ? void 0 : (_this$popupBodyWrappe4 = _this$popupBodyWrappe3.current) === null || _this$popupBodyWrappe4 === void 0 ? void 0 : _this$popupBodyWrappe4.focus();
+    }
   }
   componentWillUnmount() {
     this.fireStatusPopupClosedAnalytics(this.state);
@@ -203,10 +267,14 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       fitHeight: 40,
       mountTo: mountTo,
       boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement
+      scrollableElement: scrollableElement,
+      closeOnTab: false
     }, jsx("div", {
       css: pickerContainer,
-      onClick: this.handlePopupClick
+      tabIndex: -1,
+      ref: this.popupBodyWrapper,
+      onClick: this.handlePopupClick,
+      onKeyDown: this.onKeyDown
     }, jsx(AkStatusPicker, {
       autoFocus: isNew,
       selectedColor: color,

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.44.6";
+export const version = "187.44.7";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/plugins/status/actions.js

@@ -101,12 +101,23 @@ export var removeStatus = function removeStatus(showStatusPickerAt) {
     return true;
   };
 };
-export var commitStatusPicker = function commitStatusPicker() {
+var handleClosingByArrows = function handleClosingByArrows(closingMethod, state, showStatusPickerAt, tr) {
+  if (closingMethod === 'arrowLeft') {
+    // put cursor right before status Lozenge
+    tr = tr.setSelection(Selection.near(state.tr.doc.resolve(showStatusPickerAt), -1));
+  } else if (closingMethod === 'arrowRight') {
+    // put cursor right after status Lozenge
+    tr = tr.setSelection(Selection.near(state.tr.doc.resolve(showStatusPickerAt + 1)));
+  }
+};
+export var commitStatusPicker = function commitStatusPicker(closingPayload) {
   return function (editorView) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
     var _ref2 = pluginKey.getState(state) || {},
       showStatusPickerAt = _ref2.showStatusPickerAt;
+    var _ref3 = closingPayload || {},
+      closingMethod = _ref3.closingMethod;
     if (!showStatusPickerAt) {
       return;
     }
@@ -119,7 +130,9 @@ export var commitStatusPicker = function commitStatusPicker() {
       showStatusPickerAt: null,
       isNew: false
     });
-    if (statusNode.attrs.text) {
+    if (closingMethod) {
+      handleClosingByArrows(closingMethod, state, showStatusPickerAt, tr);
+    } else if (statusNode.attrs.text) {
       // still has content - keep content
       // move selection after status if selection did not change
       if (tr.selection.from === showStatusPickerAt) {

package/dist/esm/plugins/status/index.js

@@ -72,8 +72,8 @@ var baseStatusPlugin = function baseStatusPlugin(_ref) {
             onTextChanged: function onTextChanged(status) {
               updateStatus(status)(editorView.state, editorView.dispatch);
             },
-            closeStatusPicker: function closeStatusPicker() {
-              commitStatusPicker()(editorView);
+            closeStatusPicker: function closeStatusPicker(closingPayload) {
+              commitStatusPicker(closingPayload)(editorView);
             },
             onEnter: function onEnter() {
               commitStatusPicker()(editorView);

package/dist/esm/plugins/status/ui/statusPicker.js

@@ -10,6 +10,7 @@ var _templateObject;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @jsx jsx */
+
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -28,7 +29,12 @@ export var InputMethod = /*#__PURE__*/function (InputMethod) {
   InputMethod["enterKey"] = "enterKey";
   return InputMethod;
 }({});
-var pickerContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: ", " 0;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), "var(--ds-surface-overlay, ".concat(N0, ")"), "var(--ds-space-100, 8px)", borderRadius(), "var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))");
+export var closingMethods = /*#__PURE__*/function (closingMethods) {
+  closingMethods["ArrowLeft"] = "arrowLeft";
+  closingMethods["ArrowRight"] = "arrowRight";
+  return closingMethods;
+}({});
+var pickerContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: ", " 0;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  :focus {\n    outline: none;\n  }\n  input {\n    text-transform: uppercase;\n  }\n"])), "var(--ds-surface-overlay, ".concat(N0, ")"), "var(--ds-space-100, 8px)", borderRadius(), "var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))");
 export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
   _inherits(StatusPickerWithoutAnalytcs, _React$Component);
   var _super = _createSuper(StatusPickerWithoutAnalytcs);
@@ -49,6 +55,55 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
       _this.inputMethod = InputMethod.escKey;
       _this.props.onEnter(_this.state);
     });
+    _defineProperty(_assertThisInitialized(_this), "handleTabPress", function (event) {
+      var colorButtons = event.currentTarget.querySelectorAll('button');
+      var inputField = event.currentTarget.querySelector('input');
+      var isInputFocussed = document.activeElement === inputField;
+      var isButtonFocussed = Array.from(colorButtons).some(function (buttonElement) {
+        var _document;
+        return ((_document = document) === null || _document === void 0 ? void 0 : _document.activeElement) === buttonElement;
+      });
+      if (event !== null && event !== void 0 && event.shiftKey) {
+        /* shift + tab */
+        if (isInputFocussed) {
+          colorButtons[0].focus();
+          event.preventDefault();
+        }
+        /* After the user presses shift + tab the color-palette component updates tab index for the first color to be 0.
+            To correctly set focus to the input field instead of the first color button we need to set focus manually
+            */
+        if (isButtonFocussed) {
+          inputField === null || inputField === void 0 ? void 0 : inputField.focus();
+          event.preventDefault();
+        }
+      } else {
+        /* tab */
+        if (isButtonFocussed) {
+          inputField === null || inputField === void 0 ? void 0 : inputField.focus();
+          event.preventDefault();
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleArrow", function (event, closingMethod) {
+      var _document2;
+      if (((_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement) === _this.popupBodyWrapper.current) {
+        var _this$popupBodyWrappe, _this$popupBodyWrappe2;
+        event.preventDefault();
+        (_this$popupBodyWrappe = _this.popupBodyWrapper) === null || _this$popupBodyWrappe === void 0 ? void 0 : (_this$popupBodyWrappe2 = _this$popupBodyWrappe.current) === null || _this$popupBodyWrappe2 === void 0 ? void 0 : _this$popupBodyWrappe2.blur();
+        _this.props.closeStatusPicker({
+          closingMethod: closingMethod
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
+      var isTabPressed = event.key === 'Tab';
+      if (isTabPressed) {
+        return _this.handleTabPress(event);
+      }
+      if (event.key in closingMethods) {
+        return _this.handleArrow(event, closingMethods[event.key]);
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "onColorHover", function (color) {
       _this.createStatusAnalyticsAndFireFunc({
         action: 'hovered',
@@ -112,6 +167,7 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
     });
     _this.state = _this.extractStateFromProps(props);
     _this.createStatusAnalyticsAndFireFunc = createStatusAnalyticsAndFire(props.createAnalyticsEvent);
+    _this.popupBodyWrapper = /*#__PURE__*/React.createRef();
     return _this;
   }
   _createClass(StatusPickerWithoutAnalytcs, [{
@@ -164,6 +220,11 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
     value: function componentDidMount() {
       this.reset();
       this.fireStatusPopupOpenedAnalytics(this.state);
+      if (typeof this.props.isNew === 'boolean' && this.props.isNew === false) {
+        var _this$popupBodyWrappe3, _this$popupBodyWrappe4;
+        // Wrapper should be focused only if status already exists otherwise input field will receive focus
+        (_this$popupBodyWrappe3 = this.popupBodyWrapper) === null || _this$popupBodyWrappe3 === void 0 ? void 0 : (_this$popupBodyWrappe4 = _this$popupBodyWrappe3.current) === null || _this$popupBodyWrappe4 === void 0 ? void 0 : _this$popupBodyWrappe4.focus();
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -218,10 +279,14 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
         fitHeight: 40,
         mountTo: mountTo,
         boundariesElement: boundariesElement,
-        scrollableElement: scrollableElement
+        scrollableElement: scrollableElement,
+        closeOnTab: false
       }, jsx("div", {
         css: pickerContainer,
-        onClick: this.handlePopupClick
+        tabIndex: -1,
+        ref: this.popupBodyWrapper,
+        onClick: this.handlePopupClick,
+        onKeyDown: this.onKeyDown
       }, jsx(AkStatusPicker, {
         autoFocus: isNew,
         selectedColor: color,

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.44.6";
+export var version = "187.44.7";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/types/plugins/status/actions.d.ts

@@ -2,7 +2,7 @@ import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/stat
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Command } from '../../types';
 import type { TOOLBAR_MENU_TYPE } from '../insert-block/ui/ToolbarInsertBlock/types';
-import type { StatusType } from './types';
+import type { StatusType, ClosingPayload } from './types';
 export declare const DEFAULT_STATUS: StatusType;
 export declare const createStatus: (showStatusPickerAtOffset?: number) => (insert: (node: Node | Object | string, opts: {
     selectInlineNode: boolean;
@@ -11,4 +11,4 @@ export declare const updateStatus: (status?: StatusType) => Command;
 export declare const updateStatusWithAnalytics: (inputMethod: TOOLBAR_MENU_TYPE, status?: StatusType) => Command;
 export declare const setStatusPickerAt: (showStatusPickerAt: number | null) => (state: EditorState, dispatch: (tr: Transaction) => void) => boolean;
 export declare const removeStatus: (showStatusPickerAt: number) => Command;
-export declare const commitStatusPicker: () => (editorView: EditorView) => void;
+export declare const commitStatusPicker: (closingPayload?: ClosingPayload) => (editorView: EditorView) => void;

package/dist/types/plugins/status/plugin.d.ts

@@ -2,6 +2,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { PMPluginFactoryParams } from '../../types';
 import type { StatusPluginOptions } from './types';
 export { pluginKey, pluginKeyName } from './plugin-key';
-export type { StatusState, StatusType } from './types';
+export type { StatusState, StatusType, ClosingPayload } from './types';
 declare const createPlugin: (pmPluginFactoryParams: PMPluginFactoryParams, options?: StatusPluginOptions) => SafePlugin<any>;
 export default createPlugin;

package/dist/types/plugins/status/types.d.ts

@@ -1,4 +1,5 @@
-import { Color as ColorType } from '@atlaskit/status/element';
+import type { Color as ColorType } from '@atlaskit/status/element';
+import type { closingMethods } from './ui/statusPicker';
 export type StatusType = {
     color: ColorType;
     text: string;
@@ -12,3 +13,6 @@ export interface StatusPluginOptions {
     menuDisabled: boolean;
     allowZeroWidthSpaceAfter?: boolean;
 }
+export type ClosingPayload = {
+    closingMethod: closingMethods;
+};

package/dist/types/plugins/status/ui/statusPicker.d.ts

@@ -1,17 +1,20 @@
-/** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { ColorType as Color } from '@atlaskit/status/picker';
-import { StatusType } from '../plugin';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { ColorType as Color } from '@atlaskit/status/picker';
+import type { StatusType, ClosingPayload } from '../plugin';
 export declare enum InputMethod {
     blur = "blur",
     escKey = "escKey",
     enterKey = "enterKey"
 }
+export declare enum closingMethods {
+    ArrowLeft = "arrowLeft",
+    ArrowRight = "arrowRight"
+}
 export interface Props {
     target: HTMLElement | null;
-    closeStatusPicker: () => void;
+    closeStatusPicker: (closingPayload?: ClosingPayload) => void;
     onSelect: (status: StatusType) => void;
     onTextChanged: (status: StatusType, isNew: boolean) => void;
     onEnter: (status: StatusType) => void;
@@ -34,6 +37,7 @@ export declare class StatusPickerWithoutAnalytcs extends React.Component<Props,
     private startTime;
     private inputMethod?;
     private createStatusAnalyticsAndFireFunc;
+    private popupBodyWrapper;
     constructor(props: Props);
     private fireStatusPopupOpenedAnalytics;
     private fireStatusPopupClosedAnalytics;
@@ -44,6 +48,9 @@ export declare class StatusPickerWithoutAnalytcs extends React.Component<Props,
     private extractStateFromProps;
     handleClickOutside: (event: Event) => void;
     private handleEscapeKeydown;
+    private handleTabPress;
+    private handleArrow;
+    private onKeyDown;
     render(): jsx.JSX.Element | null;
     private onColorHover;
     private onColorClick;

package/dist/types-ts4.5/plugins/status/actions.d.ts

@@ -2,7 +2,7 @@ import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/stat
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Command } from '../../types';
 import type { TOOLBAR_MENU_TYPE } from '../insert-block/ui/ToolbarInsertBlock/types';
-import type { StatusType } from './types';
+import type { StatusType, ClosingPayload } from './types';
 export declare const DEFAULT_STATUS: StatusType;
 export declare const createStatus: (showStatusPickerAtOffset?: number) => (insert: (node: Node | Object | string, opts: {
     selectInlineNode: boolean;
@@ -11,4 +11,4 @@ export declare const updateStatus: (status?: StatusType) => Command;
 export declare const updateStatusWithAnalytics: (inputMethod: TOOLBAR_MENU_TYPE, status?: StatusType) => Command;
 export declare const setStatusPickerAt: (showStatusPickerAt: number | null) => (state: EditorState, dispatch: (tr: Transaction) => void) => boolean;
 export declare const removeStatus: (showStatusPickerAt: number) => Command;
-export declare const commitStatusPicker: () => (editorView: EditorView) => void;
+export declare const commitStatusPicker: (closingPayload?: ClosingPayload) => (editorView: EditorView) => void;

package/dist/types-ts4.5/plugins/status/plugin.d.ts

@@ -2,6 +2,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { PMPluginFactoryParams } from '../../types';
 import type { StatusPluginOptions } from './types';
 export { pluginKey, pluginKeyName } from './plugin-key';
-export type { StatusState, StatusType } from './types';
+export type { StatusState, StatusType, ClosingPayload } from './types';
 declare const createPlugin: (pmPluginFactoryParams: PMPluginFactoryParams, options?: StatusPluginOptions) => SafePlugin<any>;
 export default createPlugin;

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

@@ -1,4 +1,5 @@
-import { Color as ColorType } from '@atlaskit/status/element';
+import type { Color as ColorType } from '@atlaskit/status/element';
+import type { closingMethods } from './ui/statusPicker';
 export type StatusType = {
     color: ColorType;
     text: string;
@@ -12,3 +13,6 @@ export interface StatusPluginOptions {
     menuDisabled: boolean;
     allowZeroWidthSpaceAfter?: boolean;
 }
+export type ClosingPayload = {
+    closingMethod: closingMethods;
+};

package/dist/types-ts4.5/plugins/status/ui/statusPicker.d.ts

@@ -1,17 +1,20 @@
-/** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { ColorType as Color } from '@atlaskit/status/picker';
-import { StatusType } from '../plugin';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { ColorType as Color } from '@atlaskit/status/picker';
+import type { StatusType, ClosingPayload } from '../plugin';
 export declare enum InputMethod {
     blur = "blur",
     escKey = "escKey",
     enterKey = "enterKey"
 }
+export declare enum closingMethods {
+    ArrowLeft = "arrowLeft",
+    ArrowRight = "arrowRight"
+}
 export interface Props {
     target: HTMLElement | null;
-    closeStatusPicker: () => void;
+    closeStatusPicker: (closingPayload?: ClosingPayload) => void;
     onSelect: (status: StatusType) => void;
     onTextChanged: (status: StatusType, isNew: boolean) => void;
     onEnter: (status: StatusType) => void;
@@ -34,6 +37,7 @@ export declare class StatusPickerWithoutAnalytcs extends React.Component<Props,
     private startTime;
     private inputMethod?;
     private createStatusAnalyticsAndFireFunc;
+    private popupBodyWrapper;
     constructor(props: Props);
     private fireStatusPopupOpenedAnalytics;
     private fireStatusPopupClosedAnalytics;
@@ -44,6 +48,9 @@ export declare class StatusPickerWithoutAnalytcs extends React.Component<Props,
     private extractStateFromProps;
     handleClickOutside: (event: Event) => void;
     private handleEscapeKeydown;
+    private handleTabPress;
+    private handleArrow;
+    private onKeyDown;
     render(): jsx.JSX.Element | null;
     private onColorHover;
     private onColorClick;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.44.6",
+  "version": "187.44.7",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/date": "^0.10.0",
     "@atlaskit/datetime-picker": "^12.10.0",
-    "@atlaskit/editor-common": "^75.4.0",
+    "@atlaskit/editor-common": "^75.5.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-markdown-transformer": "^5.2.5",
     "@atlaskit/editor-palette": "1.5.1",
@@ -81,7 +81,7 @@
     "@atlaskit/editor-plugin-placeholder": "^0.1.0",
     "@atlaskit/editor-plugin-quick-insert": "^0.1.0",
     "@atlaskit/editor-plugin-rule": "^0.1.0",
-    "@atlaskit/editor-plugin-table": "^3.0.0",
+    "@atlaskit/editor-plugin-table": "^3.1.0",
     "@atlaskit/editor-plugin-text-formatting": "^0.4.0",
     "@atlaskit/editor-plugin-type-ahead": "^0.3.0",
     "@atlaskit/editor-plugin-unsupported-content": "^0.2.0",
@@ -156,7 +156,7 @@
     "@atlaskit/collab-provider": "9.12.3",
     "@atlaskit/dropdown-menu": "^11.14.0",
     "@atlaskit/editor-extension-dropbox": "^0.4.0",
-    "@atlaskit/editor-plugin-table": "^3.0.0",
+    "@atlaskit/editor-plugin-table": "^3.1.0",
     "@atlaskit/flag": "^15.2.0",
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/inline-dialog": "^13.6.0",
@@ -283,6 +283,10 @@
     "platform.media-experience.cardv2_7zann": {
       "type": "boolean",
       "referenceOnly": "true"
+    },
+    "platform.editor.table.overflow-state-analytics": {
+      "type": "boolean",
+      "referenceOnly": "true"
     }
   }
 }

package/report.api.md

@@ -35,7 +35,7 @@ import type { CardOptions } from '@atlaskit/editor-common/card';
 import { CardProvider } from '@atlaskit/editor-common/provider-factory';
 import { clearEditorContent } from '@atlaskit/editor-common/commands';
 import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
-import { Color } from '@atlaskit/status/element';
+import type { Color } from '@atlaskit/status/element';
 import { Command as Command_2 } from '@atlaskit/editor-common/types';
 import { ComponentType } from 'react';
 import type { compositionPlugin } from '@atlaskit/editor-plugin-composition';
@@ -303,6 +303,19 @@ type CloseOptions = {
   attachCommand?: Command_2;
 };
 
+// @public (undocumented)
+enum closingMethods {
+  // (undocumented)
+  ArrowLeft = 'arrowLeft',
+  // (undocumented)
+  ArrowRight = 'arrowRight',
+}
+
+// @public (undocumented)
+type ClosingPayload = {
+  closingMethod: closingMethods;
+};
+
 // @public (undocumented)
 interface CodeBlockOptions extends LongPressSelectionPluginOptions {
   // (undocumented)
@@ -359,7 +372,9 @@ export type Command = (
 export type CommandDispatch = (tr: Transaction) => void;
 
 // @public (undocumented)
-export const commitStatusPicker: () => (editorView: EditorView) => void;
+export const commitStatusPicker: (
+  closingPayload?: ClosingPayload,
+) => (editorView: EditorView) => void;
 
 // @public (undocumented)
 export function ContextPanel(props: Props_4): jsx.JSX.Element;

package/tmp/api-report-tmp.d.ts

@@ -24,7 +24,7 @@ import type { CardOptions } from '@atlaskit/editor-common/card';
 import { CardProvider } from '@atlaskit/editor-common/provider-factory';
 import { clearEditorContent } from '@atlaskit/editor-common/commands';
 import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
-import { Color } from '@atlaskit/status/element';
+import type { Color } from '@atlaskit/status/element';
 import { Command as Command_2 } from '@atlaskit/editor-common/types';
 import { ComponentType } from 'react';
 import type { compositionPlugin } from '@atlaskit/editor-plugin-composition';
@@ -289,6 +289,19 @@ type CloseOptions = {
     attachCommand?: Command_2;
 };
 
+// @public (undocumented)
+enum closingMethods {
+    // (undocumented)
+    ArrowLeft = "arrowLeft",
+    // (undocumented)
+    ArrowRight = "arrowRight"
+}
+
+// @public (undocumented)
+type ClosingPayload = {
+    closingMethod: closingMethods;
+};
+
 // @public (undocumented)
 interface CodeBlockOptions extends LongPressSelectionPluginOptions {
     // (undocumented)
@@ -338,7 +351,7 @@ export type Command = (state: EditorState, dispatch?: CommandDispatch, view?: Ed
 export type CommandDispatch = (tr: Transaction) => void;
 
 // @public (undocumented)
-export const commitStatusPicker: () => (editorView: EditorView) => void;
+export const commitStatusPicker: (closingPayload?: ClosingPayload) => (editorView: EditorView) => void;
 
 // @public (undocumented)
 export function ContextPanel(props: Props_4): jsx.JSX.Element;