@atlaskit/dropdown-menu 11.11.4 → 11.11.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/dropdown-menu
 
+## 11.11.5
+
+### Patch Changes
+
+- [`9e84eaacfbe`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9e84eaacfbe) - Nested dropdown menus are now accessible using arrow key navigation.
+
 ## 11.11.4
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -14,6 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _keycodes = require("@atlaskit/ds-lib/keycodes");
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useControlled = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
 var _useFocusEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-focus-event"));
@@ -21,9 +22,11 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _constants = require("@atlaskit/theme/constants");
+var _context = require("./internal/components/context");
 var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
 var _menuWrapper = _interopRequireDefault(require("./internal/components/menu-wrapper"));
 var _selectionStore = _interopRequireDefault(require("./internal/context/selection-store"));
+var _useRegisterItemWithFocusManager = _interopRequireDefault(require("./internal/hooks/use-register-item-with-focus-manager"));
 var _useGeneratedId = _interopRequireWildcard(require("./internal/utils/use-generated-id"));
 var _excluded = ["ref"]; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 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); }
@@ -59,7 +62,6 @@ var getFallbackPlacements = function getFallbackPlacements(placement) {
     return ["".concat(mainAxis, "-start"), "".concat(mainAxis, "-end"), "".concat(opposites[mainAxis]), "".concat(opposites[mainAxis], "-start"), "".concat(opposites[mainAxis], "-end"), "auto"];
   }
 };
-var NestedContext = /*#__PURE__*/(0, _react.createContext)(false);
 
 /**
  * __Dropdown menu__
@@ -97,7 +99,7 @@ var DropdownMenu = function DropdownMenu(props) {
     _useControlledState2 = (0, _slicedToArray2.default)(_useControlledState, 2),
     isLocalOpen = _useControlledState2[0],
     setLocalIsOpen = _useControlledState2[1];
-  var isNested = (0, _react.useContext)(NestedContext);
+  var nestedLevel = (0, _react.useContext)(_context.NestedLevelContext);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isTriggeredUsingKeyboard = _useState2[0],
@@ -171,6 +173,8 @@ var DropdownMenu = function DropdownMenu(props) {
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
   var id = (0, _useGeneratedId.default)();
+  var isNested = nestedLevel > 0;
+  var itemRef = (0, _useRegisterItemWithFocusManager.default)();
   return /*#__PURE__*/_react.default.createElement(_selectionStore.default, null, /*#__PURE__*/_react.default.createElement(_popup.default, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
@@ -188,14 +192,14 @@ var DropdownMenu = function DropdownMenu(props) {
         var ref = triggerProps.ref,
           providedProps = (0, _objectWithoutProperties2.default)(triggerProps, _excluded);
         return _trigger(_objectSpread(_objectSpread(_objectSpread({}, providedProps), bindFocus), {}, {
-          triggerRef: ref,
+          triggerRef: isNested ? (0, _mergeRefs.default)([ref, itemRef]) : ref,
           isSelected: isLocalOpen,
           onClick: handleTriggerClicked,
           testId: testId && "".concat(testId, "--trigger")
         }));
       }
       return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, bindFocus, {
-        ref: triggerProps.ref,
+        ref: isNested ? (0, _mergeRefs.default)([triggerProps.ref, itemRef]) : triggerProps.ref,
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
@@ -211,7 +215,7 @@ var DropdownMenu = function DropdownMenu(props) {
     content: function content(_ref) {
       var setInitialFocusRef = _ref.setInitialFocusRef,
         update = _ref.update;
-      return /*#__PURE__*/_react.default.createElement(_focusManager.default, null, /*#__PURE__*/_react.default.createElement(_menuWrapper.default, {
+      var content = /*#__PURE__*/_react.default.createElement(_focusManager.default, null, /*#__PURE__*/_react.default.createElement(_menuWrapper.default, {
         spacing: spacing,
         maxHeight: MAX_HEIGHT,
         maxWidth: 800,
@@ -220,9 +224,10 @@ var DropdownMenu = function DropdownMenu(props) {
         isLoading: isLoading,
         statusLabel: statusLabel,
         setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
-      }, isNested ? children : /*#__PURE__*/_react.default.createElement(NestedContext.Provider, {
-        value: true
+      }, /*#__PURE__*/_react.default.createElement(_context.NestedLevelContext.Provider, {
+        value: nestedLevel + 1
       }, children)));
+      return isNested ? content : /*#__PURE__*/_react.default.createElement(_context.TrackLevelProvider, null, content);
     }
   }));
 };

package/dist/cjs/internal/components/context.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TrackMaxLevelContext = exports.TrackLevelProvider = exports.NestedLevelContext = void 0;
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ *
+ *  @internal
+ * Context which maintains the current level of dropdown menu if it is nested
+ * Default is 0
+ *
+ */
+var NestedLevelContext = /*#__PURE__*/(0, _react.createContext)(0);
+
+/**
+ *
+ * @internal
+ * Context which maintains the maximun level of dropdown menu if it is nested
+ * Default is 0
+ *
+ */
+exports.NestedLevelContext = NestedLevelContext;
+var TrackMaxLevelContext = /*#__PURE__*/(0, _react.createContext)({
+  maxLevelRef: {
+    current: 0
+  },
+  setMaxLevel: function setMaxLevel() {}
+});
+
+/**
+ *
+ *  @internal
+ * Context provider which maintains the maximun level of dropdown menu if it is nested
+ *
+ */
+exports.TrackMaxLevelContext = TrackMaxLevelContext;
+var TrackLevelProvider = function TrackLevelProvider(_ref) {
+  var children = _ref.children;
+  var maxLevelRef = (0, _react.useRef)(0);
+  var value = (0, _react.useMemo)(function () {
+    return {
+      maxLevelRef: maxLevelRef,
+      setMaxLevel: function setMaxLevel(level) {
+        var isMin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        maxLevelRef.current = isMin ? Math.min(maxLevelRef.current, level) : level;
+      }
+    };
+  }, [maxLevelRef]);
+  return /*#__PURE__*/_react.default.createElement(TrackMaxLevelContext.Provider, {
+    value: value
+  }, children);
+};
+exports.TrackLevelProvider = TrackLevelProvider;

package/dist/cjs/internal/components/focus-manager.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _handleFocus = _interopRequireDefault(require("../utils/handle-focus"));
+var _context = require("./context");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -37,13 +38,24 @@ var FocusManager = function FocusManager(_ref) {
       menuItemRefs.current.push(ref);
     }
   }, []);
-
+  var nestedLevel = (0, _react.useContext)(_context.NestedLevelContext);
+  var _useContext = (0, _react.useContext)(_context.TrackMaxLevelContext),
+    maxLevelRef = _useContext.maxLevelRef,
+    setMaxLevel = _useContext.setMaxLevel;
   // Intentionally rebinding on each render
   (0, _react.useEffect)(function () {
-    return (0, _bindEventListener.bind)(window, {
+    var prevLevel = nestedLevel - 1;
+    setMaxLevel(nestedLevel);
+    var unbind = (0, _bindEventListener.bind)(window, {
       type: 'keydown',
-      listener: (0, _handleFocus.default)(menuItemRefs.current)
+      listener: (0, _handleFocus.default)(menuItemRefs.current, nestedLevel, maxLevelRef)
     });
+    return function () {
+      // Always get the minimun level when multiple levels of menu are closed
+      // If the stored level is smaller, we won't update it
+      setMaxLevel(prevLevel, true);
+      unbind();
+    };
   });
   var contextValue = {
     menuItemRefs: menuItemRefs.current,

package/dist/cjs/internal/utils/handle-focus.js

@@ -18,7 +18,7 @@ var actionMap = (_actionMap = {}, (0, _defineProperty2.default)(_actionMap, _key
  */
 var getNextFocusableElement = function getNextFocusableElement(refs, currentFocusedIdx) {
   while (currentFocusedIdx + 1 < refs.length) {
-    var isDisabled = refs[currentFocusedIdx + 1].getAttribute('disabled') !== null;
+    var isDisabled = refs[currentFocusedIdx + 1].hasAttribute('disabled');
     if (!isDisabled) {
       return refs[currentFocusedIdx + 1];
     }
@@ -34,19 +34,24 @@ var getNextFocusableElement = function getNextFocusableElement(refs, currentFocu
  */
 var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocusedIdx) {
   while (currentFocusedIdx > 0) {
-    var isDisabled = refs[currentFocusedIdx - 1].getAttribute('disabled') !== null;
+    var isDisabled = refs[currentFocusedIdx - 1].hasAttribute('disabled');
     if (!isDisabled) {
       return refs[currentFocusedIdx - 1];
     }
     currentFocusedIdx--;
   }
 };
-function handleFocus(refs) {
+function handleFocus(refs, nestedLevel, maxLevelRef) {
   return function (e) {
     var currentFocusedIdx = refs.findIndex(function (el) {
       var _document$activeEleme;
       return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
     });
+    if (nestedLevel < maxLevelRef.current) {
+      // if it is a nested dropdown and the level of the given dropdown is not the current level,
+      // we don't need to have focus on it
+      return;
+    }
     var action = actionMap[e.key];
     switch (action) {
       case 'next':
@@ -54,7 +59,7 @@ function handleFocus(refs) {
         e.preventDefault();
         if (currentFocusedIdx < refs.length - 1) {
           var _nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
-          _nextFocusableElement && _nextFocusableElement.focus();
+          _nextFocusableElement === null || _nextFocusableElement === void 0 ? void 0 : _nextFocusableElement.focus();
         }
         break;
       case 'prev':
@@ -62,20 +67,20 @@ function handleFocus(refs) {
         e.preventDefault();
         if (currentFocusedIdx > 0) {
           var _prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
-          _prevFocusableElement && _prevFocusableElement.focus();
+          _prevFocusableElement === null || _prevFocusableElement === void 0 ? void 0 : _prevFocusableElement.focus();
         }
         break;
       case 'first':
         e.preventDefault();
         // Search for first non-disabled element if first element is disabled
         var nextFocusableElement = getNextFocusableElement(refs, -1);
-        nextFocusableElement && nextFocusableElement.focus();
+        nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
         break;
       case 'last':
         e.preventDefault();
         // Search for last non-disabled element if last element is disabled
         var prevFocusableElement = getPrevFocusableElement(refs, refs.length);
-        prevFocusableElement && prevFocusableElement.focus();
+        prevFocusableElement === null || prevFocusableElement === void 0 ? void 0 : prevFocusableElement.focus();
         break;
       default:
         return;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "11.11.4",
+	"version": "11.11.5",
 	"sideEffects": false
 }

package/dist/es2019/dropdown-menu.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/standard-button';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
 import useControlledState from '@atlaskit/ds-lib/use-controlled';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
@@ -11,9 +12,11 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
+import { NestedLevelContext, TrackLevelProvider } from './internal/components/context';
 import FocusManager from './internal/components/focus-manager';
 import MenuWrapper from './internal/components/menu-wrapper';
 import SelectionStore from './internal/context/selection-store';
+import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
 import useGeneratedId, { PREFIX } from './internal/utils/use-generated-id';
 const gridSize = gridSizeFn();
 const MAX_HEIGHT = `calc(100vh - ${gridSize * 2}px)`;
@@ -44,7 +47,6 @@ const getFallbackPlacements = placement => {
     return [`${mainAxis}-start`, `${mainAxis}-end`, `${opposites[mainAxis]}`, `${opposites[mainAxis]}-start`, `${opposites[mainAxis]}-end`, `auto`];
   }
 };
-const NestedContext = /*#__PURE__*/createContext(false);
 
 /**
  * __Dropdown menu__
@@ -72,7 +74,7 @@ const DropdownMenu = props => {
     zIndex = layers.modal()
   } = props;
   const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpen, () => defaultOpen);
-  const isNested = useContext(NestedContext);
+  const nestedLevel = useContext(NestedLevelContext);
   const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
   const fallbackPlacements = useMemo(() => getFallbackPlacements(placement), [placement]);
   const handleTriggerClicked = useCallback(
@@ -144,6 +146,8 @@ const DropdownMenu = props => {
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
   const id = useGeneratedId();
+  const isNested = nestedLevel > 0;
+  const itemRef = useRegisterItemWithFocusManager();
   return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
@@ -165,14 +169,14 @@ const DropdownMenu = props => {
         return trigger({
           ...providedProps,
           ...bindFocus,
-          triggerRef: ref,
+          triggerRef: isNested ? mergeRefs([ref, itemRef]) : ref,
           isSelected: isLocalOpen,
           onClick: handleTriggerClicked,
           testId: testId && `${testId}--trigger`
         });
       }
       return /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
-        ref: triggerProps.ref,
+        ref: isNested ? mergeRefs([triggerProps.ref, itemRef]) : triggerProps.ref,
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
@@ -188,18 +192,21 @@ const DropdownMenu = props => {
     content: ({
       setInitialFocusRef,
       update
-    }) => /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(MenuWrapper, {
-      spacing: spacing,
-      maxHeight: MAX_HEIGHT,
-      maxWidth: 800,
-      onClose: handleOnClose,
-      onUpdate: update,
-      isLoading: isLoading,
-      statusLabel: statusLabel,
-      setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
-    }, isNested ? children : /*#__PURE__*/React.createElement(NestedContext.Provider, {
-      value: true
-    }, children)))
+    }) => {
+      const content = /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(MenuWrapper, {
+        spacing: spacing,
+        maxHeight: MAX_HEIGHT,
+        maxWidth: 800,
+        onClose: handleOnClose,
+        onUpdate: update,
+        isLoading: isLoading,
+        statusLabel: statusLabel,
+        setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
+      }, /*#__PURE__*/React.createElement(NestedLevelContext.Provider, {
+        value: nestedLevel + 1
+      }, children)));
+      return isNested ? content : /*#__PURE__*/React.createElement(TrackLevelProvider, null, content);
+    }
   }));
 };
 export default DropdownMenu;

package/dist/es2019/internal/components/context.js

@@ -0,0 +1,45 @@
+import React, { createContext, useMemo, useRef } from 'react';
+
+/**
+ *
+ *  @internal
+ * Context which maintains the current level of dropdown menu if it is nested
+ * Default is 0
+ *
+ */
+export const NestedLevelContext = /*#__PURE__*/createContext(0);
+
+/**
+ *
+ * @internal
+ * Context which maintains the maximun level of dropdown menu if it is nested
+ * Default is 0
+ *
+ */
+export const TrackMaxLevelContext = /*#__PURE__*/createContext({
+  maxLevelRef: {
+    current: 0
+  },
+  setMaxLevel: () => {}
+});
+
+/**
+ *
+ *  @internal
+ * Context provider which maintains the maximun level of dropdown menu if it is nested
+ *
+ */
+export const TrackLevelProvider = ({
+  children
+}) => {
+  const maxLevelRef = useRef(0);
+  const value = useMemo(() => ({
+    maxLevelRef,
+    setMaxLevel: (level, isMin = false) => {
+      maxLevelRef.current = isMin ? Math.min(maxLevelRef.current, level) : level;
+    }
+  }), [maxLevelRef]);
+  return /*#__PURE__*/React.createElement(TrackMaxLevelContext.Provider, {
+    value: value
+  }, children);
+};

package/dist/es2019/internal/components/focus-manager.js

@@ -1,7 +1,8 @@
-import React, { createContext, useCallback, useEffect, useRef } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useRef } from 'react';
 import { bind } from 'bind-event-listener';
 import __noop from '@atlaskit/ds-lib/noop';
 import handleFocus from '../utils/handle-focus';
+import { NestedLevelContext, TrackMaxLevelContext } from './context';
 
 /**
  *
@@ -28,13 +29,25 @@ const FocusManager = ({
       menuItemRefs.current.push(ref);
     }
   }, []);
-
+  const nestedLevel = useContext(NestedLevelContext);
+  const {
+    maxLevelRef,
+    setMaxLevel
+  } = useContext(TrackMaxLevelContext);
   // Intentionally rebinding on each render
   useEffect(() => {
-    return bind(window, {
+    const prevLevel = nestedLevel - 1;
+    setMaxLevel(nestedLevel);
+    const unbind = bind(window, {
       type: 'keydown',
-      listener: handleFocus(menuItemRefs.current)
+      listener: handleFocus(menuItemRefs.current, nestedLevel, maxLevelRef)
     });
+    return () => {
+      // Always get the minimun level when multiple levels of menu are closed
+      // If the stored level is smaller, we won't update it
+      setMaxLevel(prevLevel, true);
+      unbind();
+    };
   });
   const contextValue = {
     menuItemRefs: menuItemRefs.current,

package/dist/es2019/internal/utils/handle-focus.js

@@ -14,7 +14,7 @@ const actionMap = {
  */
 const getNextFocusableElement = (refs, currentFocusedIdx) => {
   while (currentFocusedIdx + 1 < refs.length) {
-    const isDisabled = refs[currentFocusedIdx + 1].getAttribute('disabled') !== null;
+    const isDisabled = refs[currentFocusedIdx + 1].hasAttribute('disabled');
     if (!isDisabled) {
       return refs[currentFocusedIdx + 1];
     }
@@ -30,19 +30,24 @@ const getNextFocusableElement = (refs, currentFocusedIdx) => {
  */
 const getPrevFocusableElement = (refs, currentFocusedIdx) => {
   while (currentFocusedIdx > 0) {
-    const isDisabled = refs[currentFocusedIdx - 1].getAttribute('disabled') !== null;
+    const isDisabled = refs[currentFocusedIdx - 1].hasAttribute('disabled');
     if (!isDisabled) {
       return refs[currentFocusedIdx - 1];
     }
     currentFocusedIdx--;
   }
 };
-export default function handleFocus(refs) {
+export default function handleFocus(refs, nestedLevel, maxLevelRef) {
   return e => {
     const currentFocusedIdx = refs.findIndex(el => {
       var _document$activeEleme;
       return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
     });
+    if (nestedLevel < maxLevelRef.current) {
+      // if it is a nested dropdown and the level of the given dropdown is not the current level,
+      // we don't need to have focus on it
+      return;
+    }
     const action = actionMap[e.key];
     switch (action) {
       case 'next':
@@ -50,7 +55,7 @@ export default function handleFocus(refs) {
         e.preventDefault();
         if (currentFocusedIdx < refs.length - 1) {
           const nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
-          nextFocusableElement && nextFocusableElement.focus();
+          nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
         }
         break;
       case 'prev':
@@ -58,20 +63,20 @@ export default function handleFocus(refs) {
         e.preventDefault();
         if (currentFocusedIdx > 0) {
           const prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
-          prevFocusableElement && prevFocusableElement.focus();
+          prevFocusableElement === null || prevFocusableElement === void 0 ? void 0 : prevFocusableElement.focus();
         }
         break;
       case 'first':
         e.preventDefault();
         // Search for first non-disabled element if first element is disabled
         const nextFocusableElement = getNextFocusableElement(refs, -1);
-        nextFocusableElement && nextFocusableElement.focus();
+        nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
         break;
       case 'last':
         e.preventDefault();
         // Search for last non-disabled element if last element is disabled
         const prevFocusableElement = getPrevFocusableElement(refs, refs.length);
-        prevFocusableElement && prevFocusableElement.focus();
+        prevFocusableElement === null || prevFocusableElement === void 0 ? void 0 : prevFocusableElement.focus();
         break;
       default:
         return;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "11.11.4",
+	"version": "11.11.5",
 	"sideEffects": false
 }

package/dist/esm/dropdown-menu.js

@@ -5,10 +5,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["ref"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/standard-button';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
 import useControlledState from '@atlaskit/ds-lib/use-controlled';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
@@ -17,9 +18,11 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
+import { NestedLevelContext, TrackLevelProvider } from './internal/components/context';
 import FocusManager from './internal/components/focus-manager';
 import MenuWrapper from './internal/components/menu-wrapper';
 import SelectionStore from './internal/context/selection-store';
+import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
 import useGeneratedId, { PREFIX } from './internal/utils/use-generated-id';
 var gridSize = gridSizeFn();
 var MAX_HEIGHT = "calc(100vh - ".concat(gridSize * 2, "px)");
@@ -50,7 +53,6 @@ var getFallbackPlacements = function getFallbackPlacements(placement) {
     return ["".concat(mainAxis, "-start"), "".concat(mainAxis, "-end"), "".concat(opposites[mainAxis]), "".concat(opposites[mainAxis], "-start"), "".concat(opposites[mainAxis], "-end"), "auto"];
   }
 };
-var NestedContext = /*#__PURE__*/createContext(false);
 
 /**
  * __Dropdown menu__
@@ -88,7 +90,7 @@ var DropdownMenu = function DropdownMenu(props) {
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     isLocalOpen = _useControlledState2[0],
     setLocalIsOpen = _useControlledState2[1];
-  var isNested = useContext(NestedContext);
+  var nestedLevel = useContext(NestedLevelContext);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isTriggeredUsingKeyboard = _useState2[0],
@@ -162,6 +164,8 @@ var DropdownMenu = function DropdownMenu(props) {
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
   var id = useGeneratedId();
+  var isNested = nestedLevel > 0;
+  var itemRef = useRegisterItemWithFocusManager();
   return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
@@ -179,14 +183,14 @@ var DropdownMenu = function DropdownMenu(props) {
         var ref = triggerProps.ref,
           providedProps = _objectWithoutProperties(triggerProps, _excluded);
         return _trigger(_objectSpread(_objectSpread(_objectSpread({}, providedProps), bindFocus), {}, {
-          triggerRef: ref,
+          triggerRef: isNested ? mergeRefs([ref, itemRef]) : ref,
           isSelected: isLocalOpen,
           onClick: handleTriggerClicked,
           testId: testId && "".concat(testId, "--trigger")
         }));
       }
       return /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
-        ref: triggerProps.ref,
+        ref: isNested ? mergeRefs([triggerProps.ref, itemRef]) : triggerProps.ref,
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
@@ -202,7 +206,7 @@ var DropdownMenu = function DropdownMenu(props) {
     content: function content(_ref) {
       var setInitialFocusRef = _ref.setInitialFocusRef,
         update = _ref.update;
-      return /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(MenuWrapper, {
+      var content = /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(MenuWrapper, {
         spacing: spacing,
         maxHeight: MAX_HEIGHT,
         maxWidth: 800,
@@ -211,9 +215,10 @@ var DropdownMenu = function DropdownMenu(props) {
         isLoading: isLoading,
         statusLabel: statusLabel,
         setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
-      }, isNested ? children : /*#__PURE__*/React.createElement(NestedContext.Provider, {
-        value: true
+      }, /*#__PURE__*/React.createElement(NestedLevelContext.Provider, {
+        value: nestedLevel + 1
       }, children)));
+      return isNested ? content : /*#__PURE__*/React.createElement(TrackLevelProvider, null, content);
     }
   }));
 };

package/dist/esm/internal/components/context.js

@@ -0,0 +1,47 @@
+import React, { createContext, useMemo, useRef } from 'react';
+
+/**
+ *
+ *  @internal
+ * Context which maintains the current level of dropdown menu if it is nested
+ * Default is 0
+ *
+ */
+export var NestedLevelContext = /*#__PURE__*/createContext(0);
+
+/**
+ *
+ * @internal
+ * Context which maintains the maximun level of dropdown menu if it is nested
+ * Default is 0
+ *
+ */
+export var TrackMaxLevelContext = /*#__PURE__*/createContext({
+  maxLevelRef: {
+    current: 0
+  },
+  setMaxLevel: function setMaxLevel() {}
+});
+
+/**
+ *
+ *  @internal
+ * Context provider which maintains the maximun level of dropdown menu if it is nested
+ *
+ */
+export var TrackLevelProvider = function TrackLevelProvider(_ref) {
+  var children = _ref.children;
+  var maxLevelRef = useRef(0);
+  var value = useMemo(function () {
+    return {
+      maxLevelRef: maxLevelRef,
+      setMaxLevel: function setMaxLevel(level) {
+        var isMin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        maxLevelRef.current = isMin ? Math.min(maxLevelRef.current, level) : level;
+      }
+    };
+  }, [maxLevelRef]);
+  return /*#__PURE__*/React.createElement(TrackMaxLevelContext.Provider, {
+    value: value
+  }, children);
+};

package/dist/esm/internal/components/focus-manager.js

@@ -1,7 +1,8 @@
-import React, { createContext, useCallback, useEffect, useRef } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useRef } from 'react';
 import { bind } from 'bind-event-listener';
 import __noop from '@atlaskit/ds-lib/noop';
 import handleFocus from '../utils/handle-focus';
+import { NestedLevelContext, TrackMaxLevelContext } from './context';
 
 /**
  *
@@ -27,13 +28,24 @@ var FocusManager = function FocusManager(_ref) {
       menuItemRefs.current.push(ref);
     }
   }, []);
-
+  var nestedLevel = useContext(NestedLevelContext);
+  var _useContext = useContext(TrackMaxLevelContext),
+    maxLevelRef = _useContext.maxLevelRef,
+    setMaxLevel = _useContext.setMaxLevel;
   // Intentionally rebinding on each render
   useEffect(function () {
-    return bind(window, {
+    var prevLevel = nestedLevel - 1;
+    setMaxLevel(nestedLevel);
+    var unbind = bind(window, {
       type: 'keydown',
-      listener: handleFocus(menuItemRefs.current)
+      listener: handleFocus(menuItemRefs.current, nestedLevel, maxLevelRef)
     });
+    return function () {
+      // Always get the minimun level when multiple levels of menu are closed
+      // If the stored level is smaller, we won't update it
+      setMaxLevel(prevLevel, true);
+      unbind();
+    };
   });
   var contextValue = {
     menuItemRefs: menuItemRefs.current,

package/dist/esm/internal/utils/handle-focus.js

@@ -11,7 +11,7 @@ var actionMap = (_actionMap = {}, _defineProperty(_actionMap, KEY_DOWN, 'next'),
  */
 var getNextFocusableElement = function getNextFocusableElement(refs, currentFocusedIdx) {
   while (currentFocusedIdx + 1 < refs.length) {
-    var isDisabled = refs[currentFocusedIdx + 1].getAttribute('disabled') !== null;
+    var isDisabled = refs[currentFocusedIdx + 1].hasAttribute('disabled');
     if (!isDisabled) {
       return refs[currentFocusedIdx + 1];
     }
@@ -27,19 +27,24 @@ var getNextFocusableElement = function getNextFocusableElement(refs, currentFocu
  */
 var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocusedIdx) {
   while (currentFocusedIdx > 0) {
-    var isDisabled = refs[currentFocusedIdx - 1].getAttribute('disabled') !== null;
+    var isDisabled = refs[currentFocusedIdx - 1].hasAttribute('disabled');
     if (!isDisabled) {
       return refs[currentFocusedIdx - 1];
     }
     currentFocusedIdx--;
   }
 };
-export default function handleFocus(refs) {
+export default function handleFocus(refs, nestedLevel, maxLevelRef) {
   return function (e) {
     var currentFocusedIdx = refs.findIndex(function (el) {
       var _document$activeEleme;
       return (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.isSameNode(el);
     });
+    if (nestedLevel < maxLevelRef.current) {
+      // if it is a nested dropdown and the level of the given dropdown is not the current level,
+      // we don't need to have focus on it
+      return;
+    }
     var action = actionMap[e.key];
     switch (action) {
       case 'next':
@@ -47,7 +52,7 @@ export default function handleFocus(refs) {
         e.preventDefault();
         if (currentFocusedIdx < refs.length - 1) {
           var _nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
-          _nextFocusableElement && _nextFocusableElement.focus();
+          _nextFocusableElement === null || _nextFocusableElement === void 0 ? void 0 : _nextFocusableElement.focus();
         }
         break;
       case 'prev':
@@ -55,20 +60,20 @@ export default function handleFocus(refs) {
         e.preventDefault();
         if (currentFocusedIdx > 0) {
           var _prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
-          _prevFocusableElement && _prevFocusableElement.focus();
+          _prevFocusableElement === null || _prevFocusableElement === void 0 ? void 0 : _prevFocusableElement.focus();
         }
         break;
       case 'first':
         e.preventDefault();
         // Search for first non-disabled element if first element is disabled
         var nextFocusableElement = getNextFocusableElement(refs, -1);
-        nextFocusableElement && nextFocusableElement.focus();
+        nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
         break;
       case 'last':
         e.preventDefault();
         // Search for last non-disabled element if last element is disabled
         var prevFocusableElement = getPrevFocusableElement(refs, refs.length);
-        prevFocusableElement && prevFocusableElement.focus();
+        prevFocusableElement === null || prevFocusableElement === void 0 ? void 0 : prevFocusableElement.focus();
         break;
       default:
         return;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "11.11.4",
+	"version": "11.11.5",
 	"sideEffects": false
 }

package/dist/types/internal/components/context.d.ts

@@ -0,0 +1,27 @@
+import React, { FC, MutableRefObject } from 'react';
+/**
+ *
+ *  @internal
+ * Context which maintains the current level of dropdown menu if it is nested
+ * Default is 0
+ *
+ */
+export declare const NestedLevelContext: React.Context<number>;
+/**
+ *
+ * @internal
+ * Context which maintains the maximun level of dropdown menu if it is nested
+ * Default is 0
+ *
+ */
+export declare const TrackMaxLevelContext: React.Context<{
+    maxLevelRef: MutableRefObject<number>;
+    setMaxLevel: (level: number, isMin?: boolean) => void;
+}>;
+/**
+ *
+ *  @internal
+ * Context provider which maintains the maximun level of dropdown menu if it is nested
+ *
+ */
+export declare const TrackLevelProvider: FC;

package/dist/types/internal/utils/handle-focus.d.ts

@@ -1,2 +1,3 @@
+import { MutableRefObject } from 'react';
 import { FocusableElement } from '../../types';
-export default function handleFocus(refs: Array<FocusableElement>): (e: KeyboardEvent) => void;
+export default function handleFocus(refs: Array<FocusableElement>, nestedLevel: Number, maxLevelRef: MutableRefObject<number>): (e: KeyboardEvent) => void;

package/dist/types-ts4.5/internal/components/context.d.ts

@@ -0,0 +1,27 @@
+import React, { FC, MutableRefObject } from 'react';
+/**
+ *
+ *  @internal
+ * Context which maintains the current level of dropdown menu if it is nested
+ * Default is 0
+ *
+ */
+export declare const NestedLevelContext: React.Context<number>;
+/**
+ *
+ * @internal
+ * Context which maintains the maximun level of dropdown menu if it is nested
+ * Default is 0
+ *
+ */
+export declare const TrackMaxLevelContext: React.Context<{
+    maxLevelRef: MutableRefObject<number>;
+    setMaxLevel: (level: number, isMin?: boolean) => void;
+}>;
+/**
+ *
+ *  @internal
+ * Context provider which maintains the maximun level of dropdown menu if it is nested
+ *
+ */
+export declare const TrackLevelProvider: FC;

package/dist/types-ts4.5/internal/utils/handle-focus.d.ts

@@ -1,2 +1,3 @@
+import { MutableRefObject } from 'react';
 import { FocusableElement } from '../../types';
-export default function handleFocus(refs: Array<FocusableElement>): (e: KeyboardEvent) => void;
+export default function handleFocus(refs: Array<FocusableElement>, nestedLevel: Number, maxLevelRef: MutableRefObject<number>): (e: KeyboardEvent) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "11.11.4",
+  "version": "11.11.5",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"