@atlaskit/editor-common 72.1.1 → 72.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-common
 
+## 72.2.0
+
+### Minor Changes
+
+- [`a0a35fe7fb1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a0a35fe7fb1) - Renaming contentComponent event subject to contentComponentv2. Move errorStack attribute to nonPrivacySafeAttributes
+
+### Patch Changes
+
+- [`513cb2010b7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/513cb2010b7) - Users are able to select dropdown menu item using keyboard via the Enter key
+- [`aaa6509f036`](https://bitbucket.org/atlassian/atlassian-frontend/commits/aaa6509f036) - ED-16198 Update & restore dedupeMarksTransformed analytics event. Also addresses
+  a bug when `discardedMarks` would only return the latest discarded mark
+- [`314777fbb20`](https://bitbucket.org/atlassian/atlassian-frontend/commits/314777fbb20) - [ux] ED-16490 fixed bug so big margin will not occur before a Decision node on iOS
+- [`a5dcaef4136`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a5dcaef4136) - [ux] Fixed keyboard navigation issues relating to the main editor toolbar and floating toolbars.
+- Updated dependencies
+
+## 72.1.2
+
+### Patch Changes
+
+- [`2ff1c66a6ab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ff1c66a6ab) - [ux] ED-16490 fixed bug so big margin will not occur before a Decision node in Renderer on iOS
+
 ## 72.1.1
 
 ### Patch Changes

package/dist/cjs/analytics/types/enums.js

@@ -97,7 +97,7 @@ exports.ACTION = ACTION;
   ACTION["SYNCHRONY_ENTITY_ERROR"] = "synchronyEntityError";
   ACTION["SYNCHRONY_ERROR"] = "synchronyError";
   ACTION["TEXT_LINK_MARK_TRANSFORMED"] = "textLinkMarkTransformed";
-  ACTION["DEDUPE_MARKS_TRANSFORMED"] = "dedupeMarksTransformed";
+  ACTION["DEDUPE_MARKS_TRANSFORMED_V2"] = "dedupeMarksTransformedV2";
   ACTION["NODES_MISSING_CONTENT_TRANSFORMED"] = "nodesMissingContentTransformed";
   ACTION["INDENTATION_MARKS_TRANSFORMED"] = "indentationMarksTransformed";
   ACTION["INVALID_MEDIA_CONTENT_TRANSFORMED"] = "invalidMediaContentTransformed";

package/dist/cjs/styles/shared/code-block.js

@@ -19,8 +19,6 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _taskDecision = require("./task-decision");
-
 var _templateObject, _templateObject2;
 
 var CodeBlockSharedCssClassName = {
@@ -57,5 +55,5 @@ var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
 };
 
 exports.codeBlockSharedStyles = codeBlockSharedStyles;
-var codeBlockInListSafariFix = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &:not(.", ") {\n    ::before {\n      content: ' ';\n      line-height: ", ";\n    }\n  }\n\n  > p:first-child,\n  > .code-block:first-child,\n  > .ProseMirror-gapcursor:first-child + .code-block {\n    margin-top: -", "em !important;\n  }\n"])), _taskDecision.TaskDecisionSharedCssClassName.DECISION_CONTAINER, _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorLineHeight);
+var codeBlockInListSafariFix = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ::before {\n    content: ' ';\n    line-height: ", ";\n  }\n\n  > p:first-child,\n  > .code-block:first-child,\n  > .ProseMirror-gapcursor:first-child + .code-block {\n    margin-top: -", "em !important;\n  }\n"])), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorLineHeight);
 exports.codeBlockInListSafariFix = codeBlockInListSafariFix;

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

@@ -44,7 +44,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "72.1.1";
+var packageVersion = "72.2.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat((0, _constants.gridSize)(), "px");
 

package/dist/cjs/ui-menu/Dropdown/index.js

@@ -102,7 +102,7 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/_react.default.createElement(_MenuArrowKeyNavigationProvider.MenuArrowKeyNavigationProvider, {
         disableArrowKeyNavigation: disableArrowKeyNavigation,
         keyDownHandlerContext: keyDownHandlerContext,
-        closeonTab: true,
+        closeOnTab: true,
         handleClose: function handleClose(event) {
           return onOpenChange && onOpenChange({
             isOpen: false,

package/dist/cjs/ui-menu/DropdownMenu/index.js

@@ -115,7 +115,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      popupPlacement: ['bottom', 'left']
+      popupPlacement: ['bottom', 'left'],
+      selectionIndex: -1
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRef", function (target) {
       _this.setState({
@@ -131,7 +132,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCloseandFocus", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCloseAndFocus", function () {
       var _this$state$target, _this$state$target$qu;
 
       _this.handleClose();
@@ -168,7 +169,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
           zIndex = _this$props.zIndex,
           shouldUseDefaultRole = _this$props.shouldUseDefaultRole,
           disableArrowKeyNavigation = _this$props.disableArrowKeyNavigation,
-          keyDownHandlerContext = _this$props.keyDownHandlerContext;
+          keyDownHandlerContext = _this$props.keyDownHandlerContext,
+          onItemActivated = _this$props.onItemActivated;
       return (0, _react2.jsx)(_Popup.default, {
         target: isOpen ? target : undefined,
         mountTo: mountTo,
@@ -181,9 +183,22 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         offset: offset
       }, (0, _react2.jsx)(_MenuArrowKeyNavigationProvider.MenuArrowKeyNavigationProvider, {
         disableArrowKeyNavigation: disableArrowKeyNavigation,
-        handleClose: this.handleCloseandFocus,
+        handleClose: this.handleCloseAndFocus,
         keyDownHandlerContext: keyDownHandlerContext,
-        closeonTab: true
+        onSelection: function onSelection(index) {
+          var result = [];
+
+          if (typeof onItemActivated === 'function') {
+            result = items.reduce(function (result, group) {
+              return result.concat(group.items);
+            }, result);
+            onItemActivated({
+              item: result[index],
+              shouldCloseMenu: false
+            });
+          }
+        },
+        closeOnTab: true
       }, (0, _react2.jsx)(DropListWithOutsideListeners, {
         isOpen: true,
         appearance: "tall",
@@ -192,7 +207,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         shouldFitContainer: true,
         isTriggerNotTabbable: true,
         handleClickOutside: this.handleClose,
-        handleEscapeKeydown: this.handleCloseandFocus,
+        handleEscapeKeydown: this.handleCloseAndFocus,
         targetRef: this.state.target
       }, (0, _react2.jsx)("div", {
         style: {
@@ -266,7 +281,8 @@ function DropdownMenuItem(_ref) {
         theme: theme
       });
     },
-    tabIndex: -1
+    tabIndex: -1,
+    "aria-disabled": item.isDisabled ? 'true' : 'false'
   }, (0, _react2.jsx)(_menu.CustomItem, {
     item: item,
     key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),

package/dist/cjs/ui-menu/MenuArrowKeyNavigationProvider/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MenuArrowKeyNavigationProvider = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -22,26 +26,38 @@ var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_re
       handleClose = _ref.handleClose,
       disableArrowKeyNavigation = _ref.disableArrowKeyNavigation,
       keyDownHandlerContext = _ref.keyDownHandlerContext,
-      closeonTab = _ref.closeonTab;
+      closeOnTab = _ref.closeOnTab,
+      onSelection = _ref.onSelection;
   var wrapperRef = (0, _react.useRef)(null);
-  var currentSelectedItemIndex = (0, _react.useRef)(-1);
 
-  var incrementIndex = function incrementIndex(list) {
-    if (currentSelectedItemIndex.current === list.length - 1 || currentSelectedItemIndex.current === -1) {
-      currentSelectedItemIndex.current = 0;
-    } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current + 1;
+  var _useState = (0, _react.useState)(-1),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      currentSelectedItemIndex = _useState2[0],
+      setCurrentSelectedItemIndex = _useState2[1];
+
+  var incrementIndex = (0, _react.useCallback)(function (list) {
+    var currentIndex = currentSelectedItemIndex;
+    var nextIndex = (currentIndex + 1) % list.length; // Skips disabled items. Previously this function relied on a list of enabled elements which caused a
+    // difference between currentIndex and the item index in the menu.
+
+    while (nextIndex !== currentIndex && list[nextIndex].getAttribute('aria-disabled') === 'true') {
+      nextIndex = (nextIndex + 1) % list.length;
     }
-  };
 
-  var decrementIndex = function decrementIndex(list) {
-    if (currentSelectedItemIndex.current === 0 || currentSelectedItemIndex.current === -1) {
-      currentSelectedItemIndex.current = list.length - 1;
-    } else {
-      currentSelectedItemIndex.current = currentSelectedItemIndex.current - 1;
+    setCurrentSelectedItemIndex(nextIndex);
+    return nextIndex;
+  }, [currentSelectedItemIndex]);
+  var decrementIndex = (0, _react.useCallback)(function (list) {
+    var currentIndex = currentSelectedItemIndex;
+    var nextIndex = (list.length + currentIndex - 1) % list.length;
+
+    while (nextIndex !== currentIndex && list[nextIndex].getAttribute('aria-disabled') === 'true') {
+      nextIndex = (list.length + nextIndex - 1) % list.length;
     }
-  };
 
+    setCurrentSelectedItemIndex(nextIndex);
+    return nextIndex;
+  }, [currentSelectedItemIndex]);
   (0, _react.useLayoutEffect)(function () {
     if (disableArrowKeyNavigation) {
       return;
@@ -53,49 +69,48 @@ var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_re
 
 
     var handleKeyDown = function handleKeyDown(event) {
-      var _wrapperRef$current, _focusableElements$cu, _focusableElements$cu2;
+      var _wrapperRef$current;
 
       var targetElement = event.target; //Tab key on menu items can be handled in the parent components of dropdown menus with KeydownHandlerContext
 
-      if (event.key === 'Tab' && closeonTab) {
+      if (event.key === 'Tab' && closeOnTab) {
         handleClose(event);
         keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleTab();
         return;
       } //To trap the focus inside the toolbar using left and right arrow keys
 
 
-      var focusableElements = getEnabledElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+      var focusableElements = getFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
 
       if (!focusableElements || (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) {
         return;
       }
 
       if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
-        currentSelectedItemIndex.current = -1;
+        setCurrentSelectedItemIndex(-1);
       }
 
       switch (event.key) {
         case 'ArrowDown':
-          //If ArrowDown pressed
-          //If on last item
-          // Focus last item
-          //Else
-          // Focus next item
-          incrementIndex(focusableElements);
-          (_focusableElements$cu = focusableElements[currentSelectedItemIndex.current]) === null || _focusableElements$cu === void 0 ? void 0 : _focusableElements$cu.focus();
-          event.preventDefault();
-          break;
+          {
+            var _focusableElements$fo;
+
+            var focusIndex = incrementIndex(focusableElements);
+            (_focusableElements$fo = focusableElements[focusIndex]) === null || _focusableElements$fo === void 0 ? void 0 : _focusableElements$fo.focus();
+            event.preventDefault();
+            break;
+          }
 
         case 'ArrowUp':
-          //ArrowUP pressed
-          //If on First item
-          // Focus last item
-          //Else
-          // Focus previous item
-          decrementIndex(focusableElements);
-          (_focusableElements$cu2 = focusableElements[currentSelectedItemIndex.current]) === null || _focusableElements$cu2 === void 0 ? void 0 : _focusableElements$cu2.focus();
-          event.preventDefault();
-          break;
+          {
+            var _focusableElements$_f;
+
+            var _focusIndex = decrementIndex(focusableElements);
+
+            (_focusableElements$_f = focusableElements[_focusIndex]) === null || _focusableElements$_f === void 0 ? void 0 : _focusableElements$_f.focus();
+            event.preventDefault();
+            break;
+          }
         //ArrowLeft/Right on the menu should close the menus
         //then logic to retain the focus can be handled in the parent components with KeydownHandlerContext
 
@@ -105,8 +120,11 @@ var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_re
             return;
           }
 
+          if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
+            keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
+          }
+
           handleClose(event);
-          keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
           break;
 
         case 'ArrowRight':
@@ -115,14 +133,24 @@ var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_re
             return;
           }
 
+          if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
+            keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
+          }
+
           handleClose(event);
-          keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
           break;
 
         case 'Escape':
           handleClose(event);
           break;
 
+        case 'Enter':
+          if (typeof onSelection === 'function') {
+            onSelection(currentSelectedItemIndex);
+          }
+
+          break;
+
         default:
           return;
       }
@@ -132,9 +160,9 @@ var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_re
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeonTab]);
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "custom-key-handler-wrapper",
+    className: "menu-key-handler-wrapper custom-key-handler-wrapper",
     ref: wrapperRef
   }, children);
 };
@@ -148,15 +176,4 @@ function getFocusableElements(rootNode) {
 
   var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, div[tabindex="-1"]') || [];
   return Array.from(focusableModalElements);
-}
-/**
- * This method filters out all the disabled menu items
- */
-
-
-function getEnabledElements(rootNode) {
-  var focusableElements = getFocusableElements(rootNode);
-  return focusableElements.filter(function (element) {
-    return !element.querySelector('[role="button"][aria-disabled="true"]') && !element.querySelector('[role="menuitem"][aria-disabled="true"]');
-  });
 }

package/dist/cjs/ui-react/with-react-editor-view-outer-listeners.js

@@ -31,7 +31,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _ReactEditorViewContext = _interopRequireDefault(require("./ReactEditorViewContext"));
 
-var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown", "closeonTab"];
+var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown", "closeOnTab"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -94,7 +94,7 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
         return false;
       } else if (evt.code === 'Enter' && _this.props.handleEnterKeydown) {
         _this.props.handleEnterKeydown(evt);
-      } else if (evt.code === 'Tab' && _this.props.handleEscapeKeydown && _this.props.closeonTab) {
+      } else if (evt.code === 'Tab' && _this.props.handleEscapeKeydown && _this.props.closeOnTab) {
         //The menus should be closed when the tab is pressed as it takes the focus out of the menu
         _this.props.handleEscapeKeydown(evt);
       }
@@ -147,7 +147,7 @@ function withReactEditorViewOuterListeners(Component) {
     var handleClickOutside = _ref.handleClickOutside,
         handleEnterKeydown = _ref.handleEnterKeydown,
         handleEscapeKeydown = _ref.handleEscapeKeydown,
-        closeonTab = _ref.closeonTab,
+        closeOnTab = _ref.closeOnTab,
         props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
     var isActiveComponent = hasIsOpen(props) ? props.isOpen : true;
     return /*#__PURE__*/_react.default.createElement(_ReactEditorViewContext.default.Consumer, null, function (_ref2) {
@@ -161,7 +161,7 @@ function withReactEditorViewOuterListeners(Component) {
         handleClickOutside: handleClickOutside,
         handleEnterKeydown: handleEnterKeydown,
         handleEscapeKeydown: handleEscapeKeydown,
-        closeonTab: closeonTab
+        closeOnTab: closeOnTab
       }, /*#__PURE__*/_react.default.createElement(Component, props));
     });
   };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "72.1.1",
+	"version": "72.2.0",
 	"sideEffects": false
 }

package/dist/es2019/analytics/types/enums.js

@@ -89,7 +89,7 @@ export let ACTION;
   ACTION["SYNCHRONY_ENTITY_ERROR"] = "synchronyEntityError";
   ACTION["SYNCHRONY_ERROR"] = "synchronyError";
   ACTION["TEXT_LINK_MARK_TRANSFORMED"] = "textLinkMarkTransformed";
-  ACTION["DEDUPE_MARKS_TRANSFORMED"] = "dedupeMarksTransformed";
+  ACTION["DEDUPE_MARKS_TRANSFORMED_V2"] = "dedupeMarksTransformedV2";
   ACTION["NODES_MISSING_CONTENT_TRANSFORMED"] = "nodesMissingContentTransformed";
   ACTION["INDENTATION_MARKS_TRANSFORMED"] = "indentationMarksTransformed";
   ACTION["INVALID_MEDIA_CONTENT_TRANSFORMED"] = "invalidMediaContentTransformed";

package/dist/es2019/styles/shared/code-block.js

@@ -3,7 +3,6 @@ import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth,
 import { DN20, DN400, DN50, DN800, N20, N30, N400, N800 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
-import { TaskDecisionSharedCssClassName } from './task-decision';
 export const CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
@@ -126,11 +125,9 @@ export const codeBlockSharedStyles = props => css`
   }
 `;
 export const codeBlockInListSafariFix = css`
-  &:not(.${TaskDecisionSharedCssClassName.DECISION_CONTAINER}) {
-    ::before {
-      content: ' ';
-      line-height: ${akEditorLineHeight};
-    }
+  ::before {
+    content: ' ';
+    line-height: ${akEditorLineHeight};
   }
 
   > p:first-child,

package/dist/es2019/ui/DropList/index.js

@@ -9,7 +9,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "72.1.1";
+const packageVersion = "72.2.0";
 const halfFocusRing = 1;
 const dropOffset = `0, ${gridSize()}px`;
 

package/dist/es2019/ui-menu/Dropdown/index.js

@@ -61,7 +61,7 @@ export class Dropdown extends PureComponent {
     }, /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, {
       disableArrowKeyNavigation: disableArrowKeyNavigation,
       keyDownHandlerContext: keyDownHandlerContext,
-      closeonTab: true,
+      closeOnTab: true,
       handleClose: event => onOpenChange && onOpenChange({
         isOpen: false,
         event

package/dist/es2019/ui-menu/DropdownMenu/index.js

@@ -92,7 +92,8 @@ export default class DropdownMenuWrapper extends PureComponent {
     super(...args);
 
     _defineProperty(this, "state", {
-      popupPlacement: ['bottom', 'left']
+      popupPlacement: ['bottom', 'left'],
+      selectionIndex: -1
     });
 
     _defineProperty(this, "handleRef", target => {
@@ -113,7 +114,7 @@ export default class DropdownMenuWrapper extends PureComponent {
       }
     });
 
-    _defineProperty(this, "handleCloseandFocus", () => {
+    _defineProperty(this, "handleCloseAndFocus", () => {
       var _this$state$target, _this$state$target$qu;
 
       this.handleClose();
@@ -146,7 +147,8 @@ export default class DropdownMenuWrapper extends PureComponent {
       zIndex,
       shouldUseDefaultRole,
       disableArrowKeyNavigation,
-      keyDownHandlerContext
+      keyDownHandlerContext,
+      onItemActivated
     } = this.props;
     return jsx(Popup, {
       target: isOpen ? target : undefined,
@@ -160,9 +162,22 @@ export default class DropdownMenuWrapper extends PureComponent {
       offset: offset
     }, jsx(MenuArrowKeyNavigationProvider, {
       disableArrowKeyNavigation: disableArrowKeyNavigation,
-      handleClose: this.handleCloseandFocus,
+      handleClose: this.handleCloseAndFocus,
       keyDownHandlerContext: keyDownHandlerContext,
-      closeonTab: true
+      onSelection: index => {
+        let result = [];
+
+        if (typeof onItemActivated === 'function') {
+          result = items.reduce((result, group) => {
+            return result.concat(group.items);
+          }, result);
+          onItemActivated({
+            item: result[index],
+            shouldCloseMenu: false
+          });
+        }
+      },
+      closeOnTab: true
     }, jsx(DropListWithOutsideListeners, {
       isOpen: true,
       appearance: "tall",
@@ -171,7 +186,7 @@ export default class DropdownMenuWrapper extends PureComponent {
       shouldFitContainer: true,
       isTriggerNotTabbable: true,
       handleClickOutside: this.handleClose,
-      handleEscapeKeydown: this.handleCloseandFocus,
+      handleEscapeKeydown: this.handleCloseAndFocus,
       targetRef: this.state.target
     }, jsx("div", {
       style: {
@@ -239,7 +254,8 @@ function DropdownMenuItem({
     css: theme => buttonStyles(item.isActive)({
       theme
     }),
-    tabIndex: -1
+    tabIndex: -1,
+    "aria-disabled": item.isDisabled ? 'true' : 'false'
   }, jsx(CustomItem, {
     item: item,
     key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),