@atlaskit/dropdown-menu 11.13.0 → 11.14.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/dropdown-menu
 
+## 11.14.1
+
+### Patch Changes
+
+- [`53444bfd55a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/53444bfd55a) - Use 0 timeout to delay clean up after layering unmounted
+
+## 11.14.0
+
+### Minor Changes
+
+- [`f355884a4aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f355884a4aa) - [ux] Support to press escape key and only close the top layer
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.13.0
 
 ### Minor Changes
@@ -1166,7 +1182,7 @@
 
 ## 6.1.20
 
-- [patch][fe943bb" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/fe943bb"
+- [patch][fe943bb](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/fe943bb"
   d):
 
   - Make sure we check userAgent only if we have a DOM

package/dist/cjs/dropdown-menu.js

@@ -23,7 +23,6 @@ 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"));
@@ -102,7 +101,6 @@ var DropdownMenu = function DropdownMenu(props) {
     _useControlledState2 = (0, _slicedToArray2.default)(_useControlledState, 2),
     isLocalOpen = _useControlledState2[0],
     setLocalIsOpen = _useControlledState2[1];
-  var nestedLevel = (0, _react.useContext)(_context.NestedLevelContext);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isTriggeredUsingKeyboard = _useState2[0],
@@ -176,14 +174,12 @@ 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,
     isOpen: isLocalOpen,
-    onClose: isNested ? undefined : handleOnClose // only outmost parent needs onCloseHandler
-    ,
+    onClose: handleOnClose,
     zIndex: zIndex,
     placement: placement,
     fallbackPlacements: fallbackPlacements,
@@ -195,7 +191,7 @@ var DropdownMenu = function DropdownMenu(props) {
         var ref = triggerProps.ref,
           providedProps = (0, _objectWithoutProperties2.default)(triggerProps, _excluded);
         return _trigger(_objectSpread(_objectSpread(_objectSpread({}, providedProps), bindFocus), {}, {
-          triggerRef: isNested ? (0, _mergeRefs.default)([ref, itemRef]) : ref,
+          triggerRef: (0, _mergeRefs.default)([ref, itemRef]),
           isSelected: isLocalOpen,
           onClick: handleTriggerClicked,
           testId: testId && "".concat(testId, "--trigger")
@@ -208,7 +204,7 @@ var DropdownMenu = function DropdownMenu(props) {
         }),
         onFocus: bindFocus.onFocus,
         onBlur: bindFocus.onBlur,
-        ref: isNested ? (0, _mergeRefs.default)([triggerProps.ref, itemRef]) : triggerProps.ref,
+        ref: (0, _mergeRefs.default)([triggerProps.ref, itemRef]),
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
@@ -216,7 +212,7 @@ var DropdownMenu = function DropdownMenu(props) {
         onClick: handleTriggerClicked,
         testId: testId && "".concat(testId, "--trigger")
       }, _trigger) : /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, bindFocus, {
-        ref: isNested ? (0, _mergeRefs.default)([triggerProps.ref, itemRef]) : triggerProps.ref,
+        ref: (0, _mergeRefs.default)([triggerProps.ref, itemRef]),
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
@@ -232,7 +228,7 @@ var DropdownMenu = function DropdownMenu(props) {
     content: function content(_ref) {
       var setInitialFocusRef = _ref.setInitialFocusRef,
         update = _ref.update;
-      var content = /*#__PURE__*/_react.default.createElement(_focusManager.default, null, /*#__PURE__*/_react.default.createElement(_menuWrapper.default, {
+      return /*#__PURE__*/_react.default.createElement(_focusManager.default, null, /*#__PURE__*/_react.default.createElement(_menuWrapper.default, {
         spacing: spacing,
         maxHeight: MAX_HEIGHT,
         maxWidth: 800,
@@ -241,10 +237,7 @@ var DropdownMenu = function DropdownMenu(props) {
         isLoading: isLoading,
         statusLabel: statusLabel,
         setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
-      }, /*#__PURE__*/_react.default.createElement(_context.NestedLevelContext.Provider, {
-        value: nestedLevel + 1
-      }, children)));
-      return isNested ? content : /*#__PURE__*/_react.default.createElement(_context.TrackLevelProvider, null, content);
+      }, children));
     }
   }));
 };

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

@@ -9,8 +9,8 @@ exports.default = exports.FocusManagerContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _layering = require("@atlaskit/layering");
 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; }
 /**
@@ -38,24 +38,14 @@ 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;
+  var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
+    isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
   // Intentionally rebinding on each render
   (0, _react.useEffect)(function () {
-    var prevLevel = nestedLevel - 1;
-    setMaxLevel(nestedLevel);
-    var unbind = (0, _bindEventListener.bind)(window, {
+    return (0, _bindEventListener.bind)(window, {
       type: 'keydown',
-      listener: (0, _handleFocus.default)(menuItemRefs.current, nestedLevel, maxLevelRef)
+      listener: (0, _handleFocus.default)(menuItemRefs.current, isLayerDisabled)
     });
-    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

@@ -41,13 +41,13 @@ var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocu
     currentFocusedIdx--;
   }
 };
-function handleFocus(refs, nestedLevel, maxLevelRef) {
+function handleFocus(refs, isLayerDisabled) {
   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 (isLayerDisabled()) {
       // 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;

package/dist/es2019/dropdown-menu.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/standard-button';
 import { UNSAFE_BUTTON } from '@atlaskit/button/unsafe';
@@ -13,7 +13,6 @@ 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';
@@ -76,7 +75,6 @@ const DropdownMenu = props => {
     zIndex = layers.modal()
   } = props;
   const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpen, () => defaultOpen);
-  const nestedLevel = useContext(NestedLevelContext);
   const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
   const fallbackPlacements = useMemo(() => getFallbackPlacements(placement), [placement]);
   const handleTriggerClicked = useCallback(
@@ -148,14 +146,12 @@ 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,
     isOpen: isLocalOpen,
-    onClose: isNested ? undefined : handleOnClose // only outmost parent needs onCloseHandler
-    ,
+    onClose: handleOnClose,
     zIndex: zIndex,
     placement: placement,
     fallbackPlacements: fallbackPlacements,
@@ -171,7 +167,7 @@ const DropdownMenu = props => {
         return trigger({
           ...providedProps,
           ...bindFocus,
-          triggerRef: isNested ? mergeRefs([ref, itemRef]) : ref,
+          triggerRef: mergeRefs([ref, itemRef]),
           isSelected: isLocalOpen,
           onClick: handleTriggerClicked,
           testId: testId && `${testId}--trigger`
@@ -184,7 +180,7 @@ const DropdownMenu = props => {
         }),
         onFocus: bindFocus.onFocus,
         onBlur: bindFocus.onBlur,
-        ref: isNested ? mergeRefs([triggerProps.ref, itemRef]) : triggerProps.ref,
+        ref: mergeRefs([triggerProps.ref, itemRef]),
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
@@ -192,7 +188,7 @@ const DropdownMenu = props => {
         onClick: handleTriggerClicked,
         testId: testId && `${testId}--trigger`
       }, trigger) : /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
-        ref: isNested ? mergeRefs([triggerProps.ref, itemRef]) : triggerProps.ref,
+        ref: mergeRefs([triggerProps.ref, itemRef]),
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
@@ -208,21 +204,16 @@ const DropdownMenu = props => {
     content: ({
       setInitialFocusRef,
       update
-    }) => {
-      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);
-    }
+    }) => /*#__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
+    }, children))
   }));
 };
 export default DropdownMenu;

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

@@ -1,8 +1,8 @@
-import React, { createContext, useCallback, useContext, useEffect, useRef } from 'react';
+import React, { createContext, useCallback, useEffect, useRef } from 'react';
 import { bind } from 'bind-event-listener';
 import __noop from '@atlaskit/ds-lib/noop';
+import { UNSAFE_useLayering } from '@atlaskit/layering';
 import handleFocus from '../utils/handle-focus';
-import { NestedLevelContext, TrackMaxLevelContext } from './context';
 
 /**
  *
@@ -29,25 +29,15 @@ const FocusManager = ({
       menuItemRefs.current.push(ref);
     }
   }, []);
-  const nestedLevel = useContext(NestedLevelContext);
   const {
-    maxLevelRef,
-    setMaxLevel
-  } = useContext(TrackMaxLevelContext);
+    isLayerDisabled
+  } = UNSAFE_useLayering();
   // Intentionally rebinding on each render
   useEffect(() => {
-    const prevLevel = nestedLevel - 1;
-    setMaxLevel(nestedLevel);
-    const unbind = bind(window, {
+    return bind(window, {
       type: 'keydown',
-      listener: handleFocus(menuItemRefs.current, nestedLevel, maxLevelRef)
+      listener: handleFocus(menuItemRefs.current, isLayerDisabled)
     });
-    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

@@ -37,13 +37,13 @@ const getPrevFocusableElement = (refs, currentFocusedIdx) => {
     currentFocusedIdx--;
   }
 };
-export default function handleFocus(refs, nestedLevel, maxLevelRef) {
+export default function handleFocus(refs, isLayerDisabled) {
   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 (isLayerDisabled()) {
       // 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;

package/dist/esm/dropdown-menu.js

@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["ref"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/standard-button';
 import { UNSAFE_BUTTON } from '@atlaskit/button/unsafe';
@@ -19,7 +19,6 @@ 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';
@@ -93,7 +92,6 @@ var DropdownMenu = function DropdownMenu(props) {
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     isLocalOpen = _useControlledState2[0],
     setLocalIsOpen = _useControlledState2[1];
-  var nestedLevel = useContext(NestedLevelContext);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isTriggeredUsingKeyboard = _useState2[0],
@@ -167,14 +165,12 @@ 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,
     isOpen: isLocalOpen,
-    onClose: isNested ? undefined : handleOnClose // only outmost parent needs onCloseHandler
-    ,
+    onClose: handleOnClose,
     zIndex: zIndex,
     placement: placement,
     fallbackPlacements: fallbackPlacements,
@@ -186,7 +182,7 @@ var DropdownMenu = function DropdownMenu(props) {
         var ref = triggerProps.ref,
           providedProps = _objectWithoutProperties(triggerProps, _excluded);
         return _trigger(_objectSpread(_objectSpread(_objectSpread({}, providedProps), bindFocus), {}, {
-          triggerRef: isNested ? mergeRefs([ref, itemRef]) : ref,
+          triggerRef: mergeRefs([ref, itemRef]),
           isSelected: isLocalOpen,
           onClick: handleTriggerClicked,
           testId: testId && "".concat(testId, "--trigger")
@@ -199,7 +195,7 @@ var DropdownMenu = function DropdownMenu(props) {
         }),
         onFocus: bindFocus.onFocus,
         onBlur: bindFocus.onBlur,
-        ref: isNested ? mergeRefs([triggerProps.ref, itemRef]) : triggerProps.ref,
+        ref: mergeRefs([triggerProps.ref, itemRef]),
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
@@ -207,7 +203,7 @@ var DropdownMenu = function DropdownMenu(props) {
         onClick: handleTriggerClicked,
         testId: testId && "".concat(testId, "--trigger")
       }, _trigger) : /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
-        ref: isNested ? mergeRefs([triggerProps.ref, itemRef]) : triggerProps.ref,
+        ref: mergeRefs([triggerProps.ref, itemRef]),
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
@@ -223,7 +219,7 @@ var DropdownMenu = function DropdownMenu(props) {
     content: function content(_ref) {
       var setInitialFocusRef = _ref.setInitialFocusRef,
         update = _ref.update;
-      var content = /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(MenuWrapper, {
+      return /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(MenuWrapper, {
         spacing: spacing,
         maxHeight: MAX_HEIGHT,
         maxWidth: 800,
@@ -232,10 +228,7 @@ var DropdownMenu = function DropdownMenu(props) {
         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);
+      }, children));
     }
   }));
 };

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

@@ -1,8 +1,8 @@
-import React, { createContext, useCallback, useContext, useEffect, useRef } from 'react';
+import React, { createContext, useCallback, useEffect, useRef } from 'react';
 import { bind } from 'bind-event-listener';
 import __noop from '@atlaskit/ds-lib/noop';
+import { UNSAFE_useLayering } from '@atlaskit/layering';
 import handleFocus from '../utils/handle-focus';
-import { NestedLevelContext, TrackMaxLevelContext } from './context';
 
 /**
  *
@@ -28,24 +28,14 @@ var FocusManager = function FocusManager(_ref) {
       menuItemRefs.current.push(ref);
     }
   }, []);
-  var nestedLevel = useContext(NestedLevelContext);
-  var _useContext = useContext(TrackMaxLevelContext),
-    maxLevelRef = _useContext.maxLevelRef,
-    setMaxLevel = _useContext.setMaxLevel;
+  var _UNSAFE_useLayering = UNSAFE_useLayering(),
+    isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
   // Intentionally rebinding on each render
   useEffect(function () {
-    var prevLevel = nestedLevel - 1;
-    setMaxLevel(nestedLevel);
-    var unbind = bind(window, {
+    return bind(window, {
       type: 'keydown',
-      listener: handleFocus(menuItemRefs.current, nestedLevel, maxLevelRef)
+      listener: handleFocus(menuItemRefs.current, isLayerDisabled)
     });
-    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

@@ -34,13 +34,13 @@ var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocu
     currentFocusedIdx--;
   }
 };
-export default function handleFocus(refs, nestedLevel, maxLevelRef) {
+export default function handleFocus(refs, isLayerDisabled) {
   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 (isLayerDisabled()) {
       // 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;

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "11.13.0",
+  "version": "11.14.1",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,17 +31,18 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^16.9.0",
+    "@atlaskit/button": "^16.10.0",
     "@atlaskit/codemod-utils": "^4.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/layering": "^0.2.0",
     "@atlaskit/menu": "^1.10.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
-    "@atlaskit/popup": "^1.9.0",
-    "@atlaskit/primitives": "^1.3.0",
+    "@atlaskit/popup": "^1.10.0",
+    "@atlaskit/primitives": "^1.6.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.20.0",
+    "@atlaskit/tokens": "^1.25.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -116,6 +117,9 @@
     "platform.design-system-team.icon-button-spacing-fix_o1zc5": {
       "type": "boolean",
       "referenceOnly": "true"
+    },
+    "platform.design-system-team.layering_qmiw3": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/dropdown-menu/",