@atlaskit/dropdown-menu 11.12.0 → 11.14.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/dropdown-menu
 
+## 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
+
+- [`4f211dbe626`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f211dbe626) - [ux] We are adopting a new Button component behind a feature flag. This is necessary for the implementation of the SplitButton component. If this adoption is successful, it will be available in a later release.
+
 ## 11.12.0
 
 ### Minor Changes
@@ -1160,7 +1176,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

@@ -13,6 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _unsafe = require("@atlaskit/button/unsafe");
 var _keycodes = require("@atlaskit/ds-lib/keycodes");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
@@ -22,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"));
@@ -31,8 +31,8 @@ var _useGeneratedId = _interopRequireWildcard(require("./internal/utils/use-gene
 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); }
 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; }
-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) { (0, _defineProperty2.default)(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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var gridSize = (0, _constants.gridSize)();
 var MAX_HEIGHT = "calc(100vh - ".concat(gridSize * 2, "px)");
 var opposites = {
@@ -101,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],
@@ -175,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,
@@ -194,14 +191,28 @@ 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")
         }));
       }
-      return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, bindFocus, {
-        ref: isNested ? (0, _mergeRefs.default)([triggerProps.ref, itemRef]) : triggerProps.ref,
+      return (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.new-button-adoption-in-dropdown_p8sn4') ? /*#__PURE__*/_react.default.createElement(_unsafe.UNSAFE_BUTTON, {
+        iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+          size: "medium",
+          label: ""
+        }),
+        onFocus: bindFocus.onFocus,
+        onBlur: bindFocus.onBlur,
+        ref: (0, _mergeRefs.default)([triggerProps.ref, itemRef]),
+        "aria-controls": triggerProps['aria-controls'],
+        "aria-expanded": triggerProps['aria-expanded'],
+        "aria-haspopup": triggerProps['aria-haspopup'],
+        isSelected: isLocalOpen,
+        onClick: handleTriggerClicked,
+        testId: testId && "".concat(testId, "--trigger")
+      }, _trigger) : /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, bindFocus, {
+        ref: (0, _mergeRefs.default)([triggerProps.ref, itemRef]),
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
@@ -217,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,
@@ -226,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/hooks/use-radio-state.js

@@ -11,8 +11,8 @@ var _react = require("react");
 var _dropdownItemRadioGroup = require("../../radio/dropdown-item-radio-group");
 var _selectionStore = require("../context/selection-store");
 var _resetOptionsInGroup = _interopRequireDefault(require("../utils/reset-options-in-group"));
-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) { (0, _defineProperty2.default)(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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function useRadioState(_ref) {
   var id = _ref.id,
     isSelected = _ref.isSelected,

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/cjs/internal/utils/reset-options-in-group.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-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) { (0, _defineProperty2.default)(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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var resetOptionsInGroup = function resetOptionsInGroup(group) {
   return Object.keys(group || {}).reduce(function (accumulator, current) {
     return _objectSpread(_objectSpread({}, accumulator), {}, (0, _defineProperty2.default)({}, current, typeof group[current] === 'undefined' ? undefined : false));

package/dist/cjs/radio/dropdown-item-radio-group.js

@@ -15,8 +15,8 @@ var _selectionStore = require("../internal/context/selection-store");
 var _resetOptionsInGroup = _interopRequireDefault(require("../internal/utils/reset-options-in-group"));
 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; }
-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) { (0, _defineProperty2.default)(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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * __Radio group context__
  * Context provider that wraps each DropdownItemRadioGroup

package/dist/es2019/dropdown-menu.js

@@ -1,7 +1,8 @@
 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';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
@@ -12,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';
@@ -75,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(
@@ -147,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,
@@ -170,14 +167,28 @@ 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`
         });
       }
-      return /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
-        ref: isNested ? mergeRefs([triggerProps.ref, itemRef]) : triggerProps.ref,
+      return getBooleanFF('platform.design-system-team.new-button-adoption-in-dropdown_p8sn4') ? /*#__PURE__*/React.createElement(UNSAFE_BUTTON, {
+        iconAfter: /*#__PURE__*/React.createElement(ExpandIcon, {
+          size: "medium",
+          label: ""
+        }),
+        onFocus: bindFocus.onFocus,
+        onBlur: bindFocus.onBlur,
+        ref: mergeRefs([triggerProps.ref, itemRef]),
+        "aria-controls": triggerProps['aria-controls'],
+        "aria-expanded": triggerProps['aria-expanded'],
+        "aria-haspopup": triggerProps['aria-haspopup'],
+        isSelected: isLocalOpen,
+        onClick: handleTriggerClicked,
+        testId: testId && `${testId}--trigger`
+      }, trigger) : /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
+        ref: mergeRefs([triggerProps.ref, itemRef]),
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
@@ -193,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

@@ -3,11 +3,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+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, 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';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
@@ -18,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';
@@ -92,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],
@@ -166,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,
@@ -185,14 +182,28 @@ 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")
         }));
       }
-      return /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
-        ref: isNested ? mergeRefs([triggerProps.ref, itemRef]) : triggerProps.ref,
+      return getBooleanFF('platform.design-system-team.new-button-adoption-in-dropdown_p8sn4') ? /*#__PURE__*/React.createElement(UNSAFE_BUTTON, {
+        iconAfter: /*#__PURE__*/React.createElement(ExpandIcon, {
+          size: "medium",
+          label: ""
+        }),
+        onFocus: bindFocus.onFocus,
+        onBlur: bindFocus.onBlur,
+        ref: mergeRefs([triggerProps.ref, itemRef]),
+        "aria-controls": triggerProps['aria-controls'],
+        "aria-expanded": triggerProps['aria-expanded'],
+        "aria-haspopup": triggerProps['aria-haspopup'],
+        isSelected: isLocalOpen,
+        onClick: handleTriggerClicked,
+        testId: testId && "".concat(testId, "--trigger")
+      }, _trigger) : /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
+        ref: mergeRefs([triggerProps.ref, itemRef]),
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
@@ -208,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,
@@ -217,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/hooks/use-radio-state.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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; }
+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 { useCallback, useContext, useEffect, useState } from 'react';
 import { RadioGroupContext } from '../../radio/dropdown-item-radio-group';
 import { SelectionStoreContext } from '../context/selection-store';

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/esm/internal/utils/reset-options-in-group.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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; }
+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; }
 var resetOptionsInGroup = function resetOptionsInGroup(group) {
   return Object.keys(group || {}).reduce(function (accumulator, current) {
     return _objectSpread(_objectSpread({}, accumulator), {}, _defineProperty({}, current, typeof group[current] === 'undefined' ? undefined : false));

package/dist/esm/radio/dropdown-item-radio-group.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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; }
+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, { createContext, useContext, useState } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import Section from '@atlaskit/menu/section';

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.12.0",
+  "version": "11.14.0",
   "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.2.0",
+    "@atlaskit/popup": "^1.10.0",
+    "@atlaskit/primitives": "^1.6.0",
     "@atlaskit/spinner": "^15.5.0",
-    "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.17.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.25.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -109,6 +110,16 @@
     },
     "platform.design-system-team.border-checkbox_nyoiu": {
       "type": "boolean"
+    },
+    "platform.design-system-team.new-button-adoption-in-dropdown_p8sn4": {
+      "type": "boolean"
+    },
+    "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/",