@atlaskit/dropdown-menu 12.5.3 → 12.6.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/dropdown-menu
 
+## 12.6.0
+
+### Minor Changes
+
+- [#70573](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70573) [`ee7c6dd6b8b2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ee7c6dd6b8b2) - [ux] Accessibility changes. We are testing the ability to close the dropdown menu by pressing the Tab key when `shouldRenderToParent` is `true` behind a feature flag. If this fix is successful it will be available in a later release.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.5.3
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.KEY_SPACE = exports.KEY_ENTER = void 0;
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -19,6 +19,7 @@ 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"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _constants = require("@atlaskit/theme/constants");
 var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
@@ -26,7 +27,9 @@ var _menuWrapper = _interopRequireDefault(require("./internal/components/menu-wr
 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", "aria-controls", "aria-expanded", "aria-haspopup"]; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+var _excluded = ["ref", "aria-controls", "aria-expanded", "aria-haspopup"];
+/* eslint-disable import/order */
+// 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(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; }
@@ -42,8 +45,6 @@ var opposites = {
   auto: 'auto',
   end: 'start'
 };
-var KEY_SPACE = exports.KEY_SPACE = ' ';
-var KEY_ENTER = exports.KEY_ENTER = 'Enter';
 var getFallbackPlacements = function getFallbackPlacements(placement) {
   var placementPieces = placement.split('-');
   var mainAxis = placementPieces[0];
@@ -136,6 +137,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
       var _itemRef$current;
       // The trigger element must be focused to avoid problems with an incorrectly focused element after closing DropdownMenu
       itemRef === null || itemRef === void 0 || (_itemRef$current = itemRef.current) === null || _itemRef$current === void 0 || _itemRef$current.focus();
+      setTriggeredUsingKeyboard(false);
     }
     setLocalIsOpen(newValue);
     onOpenChange({
@@ -144,10 +146,25 @@ var DropdownMenu = function DropdownMenu(_ref) {
     });
   }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
   var handleOnClose = (0, _react.useCallback)(function (event) {
-    if (event.key !== 'Escape' && event.target.closest("[id^=".concat(_useGeneratedId.PREFIX, "] [aria-haspopup]"))) {
-      // Check if it is within dropdown and it is a trigger button
-      // if it is a nested dropdown, clicking trigger won't close the dropdown
-      return;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+      if (event.key !== 'Escape' && event.key !== 'Tab' && event.target.closest("[id^=".concat(_useGeneratedId.PREFIX, "] [aria-haspopup]"))) {
+        // Check if it is within dropdown and it is a trigger button
+        // if it is a nested dropdown, clicking trigger won't close the dropdown
+        // Dropdown can be closed by pressing Escape, Tab or Shift + Tab
+        return;
+      }
+      if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
+        requestAnimationFrame(function () {
+          var _itemRef$current2;
+          (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 || _itemRef$current2.focus();
+        });
+      }
+    } else {
+      if (event.key !== 'Escape' && event.target.closest("[id^=".concat(_useGeneratedId.PREFIX, "] [aria-haspopup]"))) {
+        // Check if it is within dropdown and it is a trigger button
+        // if it is a nested dropdown, clicking trigger won't close the dropdown
+        return;
+      }
     }
     var newValue = false;
     setLocalIsOpen(newValue);
@@ -155,7 +172,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
       isOpen: newValue,
       event: event
     });
-  }, [onOpenChange, setLocalIsOpen]);
+  }, [onOpenChange, setLocalIsOpen, itemRef]);
   var _useFocus = (0, _useFocusEvent.default)(),
     isFocused = _useFocus.isFocused,
     bindFocus = _useFocus.bindFocus;
@@ -176,17 +193,35 @@ var DropdownMenu = function DropdownMenu(_ref) {
     return (0, _bindEventListener.bind)(window, {
       type: 'keydown',
       listener: function openOnKeyDown(e) {
-        if (e.key === _keycodes.KEY_DOWN) {
-          // prevent page scroll
-          e.preventDefault();
-          handleTriggerClicked(e);
-        } else if ((e.key === KEY_SPACE || e.key === KEY_ENTER) && e.detail === 0) {
-          // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
-          setTriggeredUsingKeyboard(true);
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+          var isNestedTriggerButton;
+          if (e.target instanceof HTMLElement) {
+            isNestedTriggerButton = e.target.closest("[id^=".concat(_useGeneratedId.PREFIX, "] [aria-haspopup]"));
+          }
+          if (e.key === _keycodes.KEY_DOWN && !isNestedTriggerButton) {
+            // prevent page scroll
+            e.preventDefault();
+            handleTriggerClicked(e);
+          } else if ((e.code === _keycodes.KEY_SPACE || e.key === _keycodes.KEY_ENTER) && e.detail === 0) {
+            // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
+            setTriggeredUsingKeyboard(true);
+          } else if (e.key === _keycodes.KEY_TAB && isNestedTriggerButton) {
+            // This closes dropdown if it is a nested dropdown
+            handleOnClose(e);
+          }
+        } else {
+          if (e.key === _keycodes.KEY_DOWN) {
+            // prevent page scroll
+            e.preventDefault();
+            handleTriggerClicked(e);
+          } else if ((e.code === _keycodes.KEY_SPACE || e.key === _keycodes.KEY_ENTER) && e.detail === 0) {
+            // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
+            setTriggeredUsingKeyboard(true);
+          }
         }
       }
     });
-  }, [isFocused, isLocalOpen, handleTriggerClicked]);
+  }, [isFocused, isLocalOpen, handleTriggerClicked, handleOnClose]);
   return /*#__PURE__*/_react.default.createElement(_selectionStore.default, null, /*#__PURE__*/_react.default.createElement(_popup.default, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
@@ -198,6 +233,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
     testId: testId && "".concat(testId, "--content"),
     shouldUseCaptureOnOutsideClick: true,
     shouldRenderToParent: shouldRenderToParent,
+    shouldDisableFocusLock: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.disable-focus-lock-in-popup_7kb4d') ? true : false,
     trigger: function trigger(_ref2) {
       var ref = _ref2.ref,
         ariaControls = _ref2['aria-controls'],
@@ -231,7 +267,9 @@ var DropdownMenu = function DropdownMenu(_ref) {
     content: function content(_ref3) {
       var setInitialFocusRef = _ref3.setInitialFocusRef,
         update = _ref3.update;
-      return /*#__PURE__*/_react.default.createElement(_focusManager.default, null, /*#__PURE__*/_react.default.createElement(_menuWrapper.default, {
+      return /*#__PURE__*/_react.default.createElement(_focusManager.default, {
+        onClose: handleOnClose
+      }, /*#__PURE__*/_react.default.createElement(_menuWrapper.default, {
         spacing: spacing,
         maxHeight: MAX_HEIGHT,
         maxWidth: 800,
@@ -240,6 +278,9 @@ var DropdownMenu = function DropdownMenu(_ref) {
         isLoading: isLoading,
         statusLabel: statusLabel,
         setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined,
+        shouldRenderToParent: shouldRenderToParent,
+        isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
+        autoFocus: autoFocus,
         testId: testId && "".concat(testId, "--menu-wrapper")
       }, children));
     }

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

@@ -27,10 +27,11 @@ var FocusManagerContext = exports.FocusManagerContext = /*#__PURE__*/(0, _react.
 });
 
 /**
- * Focus manager logic
+ * Focus manager logic.
  */
 var FocusManager = function FocusManager(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    onClose = _ref.onClose;
   var menuItemRefs = (0, _react.useRef)([]);
   var registerRef = (0, _react.useCallback)(function (ref) {
     if (ref && !menuItemRefs.current.includes(ref)) {
@@ -43,7 +44,7 @@ var FocusManager = function FocusManager(_ref) {
   (0, _react.useEffect)(function () {
     return (0, _bindEventListener.bind)(window, {
       type: 'keydown',
-      listener: (0, _handleFocus.default)(menuItemRefs.current, isLayerDisabled)
+      listener: (0, _handleFocus.default)(menuItemRefs.current, isLayerDisabled, onClose)
     });
   });
   var contextValue = {

package/dist/cjs/internal/components/menu-wrapper.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _menuGroup = _interopRequireDefault(require("@atlaskit/menu/menu-group"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _focusManager = require("../components/focus-manager");
@@ -49,8 +50,11 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     onUpdate = _ref2.onUpdate,
     statusLabel = _ref2.statusLabel,
     setInitialFocusRef = _ref2.setInitialFocusRef,
+    shouldRenderToParent = _ref2.shouldRenderToParent,
     spacing = _ref2.spacing,
-    testId = _ref2.testId;
+    testId = _ref2.testId,
+    isTriggeredUsingKeyboard = _ref2.isTriggeredUsingKeyboard,
+    autoFocus = _ref2.autoFocus;
   var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
     menuItemRefs = _useContext.menuItemRefs;
   var closeOnMenuItemClick = function closeOnMenuItemClick(e) {
@@ -79,8 +83,13 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     var firstFocusableRef = (_menuItemRefs$find = menuItemRefs.find(function (ref) {
       return !ref.hasAttribute('disabled');
     })) !== null && _menuItemRefs$find !== void 0 ? _menuItemRefs$find : null;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+      if (shouldRenderToParent && (isTriggeredUsingKeyboard || autoFocus)) {
+        firstFocusableRef === null || firstFocusableRef === void 0 || firstFocusableRef.focus();
+      }
+    }
     setInitialFocusRef === null || setInitialFocusRef === void 0 || setInitialFocusRef(firstFocusableRef);
-  }, [menuItemRefs, setInitialFocusRef]);
+  }, [menuItemRefs, setInitialFocusRef, autoFocus, shouldRenderToParent, isTriggeredUsingKeyboard]);
   return (0, _react2.jsx)(_menuGroup.default, {
     isLoading: isLoading,
     maxHeight: maxHeight,

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

@@ -7,11 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = handleFocus;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _keycodes = require("@atlaskit/ds-lib/keycodes");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actionMap;
 var actionMap = (_actionMap = {}, (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_DOWN, 'next'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_UP, 'prev'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_HOME, 'first'), (0, _defineProperty2.default)(_actionMap, _keycodes.KEY_END, 'last'), _actionMap);
 
 /**
- * currentFocusedIdx + 1 will not work if the next focusable element
+ * `currentFocusedIdx + 1` will not work if the next focusable element
  * is disabled. So, we need to iterate through the following menu items
  * to find one that isn't disabled. If all following elements are disabled,
  * return undefined.
@@ -27,7 +28,7 @@ var getNextFocusableElement = function getNextFocusableElement(refs, currentFocu
 };
 
 /**
- * currentFocusedIdx - 1 will not work if the prev focusable element
+ * `currentFocusedIdx - 1` will not work if the prev focusable element
  * is disabled. So, we need to iterate through the previous menu items
  * to find one that isn't disabled. If all previous elements are disabled,
  * return undefined.
@@ -41,13 +42,20 @@ var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocu
     currentFocusedIdx--;
   }
 };
-function handleFocus(refs, isLayerDisabled) {
+function handleFocus(refs, isLayerDisabled, onClose) {
   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 (isLayerDisabled()) {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+        // if nested dropdown isOpen we need to close on Tab key press
+        if (e.key === _keycodes.KEY_TAB && !e.shiftKey) {
+          onClose(e);
+        }
+      }
+
       // 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;
@@ -60,6 +68,11 @@ function handleFocus(refs, isLayerDisabled) {
         if (currentFocusedIdx < refs.length - 1) {
           var _nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
           _nextFocusableElement === null || _nextFocusableElement === void 0 || _nextFocusableElement.focus();
+        } else {
+          if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+            var firstFocusableElement = getNextFocusableElement(refs, -1);
+            firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
+          }
         }
         break;
       case 'prev':
@@ -68,6 +81,11 @@ function handleFocus(refs, isLayerDisabled) {
         if (currentFocusedIdx > 0) {
           var _prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
           _prevFocusableElement === null || _prevFocusableElement === void 0 || _prevFocusableElement.focus();
+        } else {
+          if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+            var lastFocusableElement = getPrevFocusableElement(refs, refs.length);
+            lastFocusableElement === null || lastFocusableElement === void 0 || lastFocusableElement.focus();
+          }
         }
         break;
       case 'first':

package/dist/es2019/dropdown-menu.js

@@ -1,13 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable import/order */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/new';
-import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
+import { KEY_DOWN, KEY_ENTER, KEY_SPACE, KEY_TAB } 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';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+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';
@@ -27,8 +29,6 @@ const opposites = {
   auto: 'auto',
   end: 'start'
 };
-export const KEY_SPACE = ' ';
-export const KEY_ENTER = 'Enter';
 const getFallbackPlacements = placement => {
   const placementPieces = placement.split('-');
   const mainAxis = placementPieces[0];
@@ -106,6 +106,7 @@ const DropdownMenu = ({
       var _itemRef$current;
       // The trigger element must be focused to avoid problems with an incorrectly focused element after closing DropdownMenu
       itemRef === null || itemRef === void 0 ? void 0 : (_itemRef$current = itemRef.current) === null || _itemRef$current === void 0 ? void 0 : _itemRef$current.focus();
+      setTriggeredUsingKeyboard(false);
     }
     setLocalIsOpen(newValue);
     onOpenChange({
@@ -114,10 +115,25 @@ const DropdownMenu = ({
     });
   }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
   const handleOnClose = useCallback(event => {
-    if (event.key !== 'Escape' && event.target.closest(`[id^=${PREFIX}] [aria-haspopup]`)) {
-      // Check if it is within dropdown and it is a trigger button
-      // if it is a nested dropdown, clicking trigger won't close the dropdown
-      return;
+    if (getBooleanFF('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+      if (event.key !== 'Escape' && event.key !== 'Tab' && event.target.closest(`[id^=${PREFIX}] [aria-haspopup]`)) {
+        // Check if it is within dropdown and it is a trigger button
+        // if it is a nested dropdown, clicking trigger won't close the dropdown
+        // Dropdown can be closed by pressing Escape, Tab or Shift + Tab
+        return;
+      }
+      if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
+        requestAnimationFrame(() => {
+          var _itemRef$current2;
+          (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 ? void 0 : _itemRef$current2.focus();
+        });
+      }
+    } else {
+      if (event.key !== 'Escape' && event.target.closest(`[id^=${PREFIX}] [aria-haspopup]`)) {
+        // Check if it is within dropdown and it is a trigger button
+        // if it is a nested dropdown, clicking trigger won't close the dropdown
+        return;
+      }
     }
     const newValue = false;
     setLocalIsOpen(newValue);
@@ -125,7 +141,7 @@ const DropdownMenu = ({
       isOpen: newValue,
       event
     });
-  }, [onOpenChange, setLocalIsOpen]);
+  }, [onOpenChange, setLocalIsOpen, itemRef]);
   const {
     isFocused,
     bindFocus
@@ -147,17 +163,35 @@ const DropdownMenu = ({
     return bind(window, {
       type: 'keydown',
       listener: function openOnKeyDown(e) {
-        if (e.key === KEY_DOWN) {
-          // prevent page scroll
-          e.preventDefault();
-          handleTriggerClicked(e);
-        } else if ((e.key === KEY_SPACE || e.key === KEY_ENTER) && e.detail === 0) {
-          // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
-          setTriggeredUsingKeyboard(true);
+        if (getBooleanFF('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+          let isNestedTriggerButton;
+          if (e.target instanceof HTMLElement) {
+            isNestedTriggerButton = e.target.closest(`[id^=${PREFIX}] [aria-haspopup]`);
+          }
+          if (e.key === KEY_DOWN && !isNestedTriggerButton) {
+            // prevent page scroll
+            e.preventDefault();
+            handleTriggerClicked(e);
+          } else if ((e.code === KEY_SPACE || e.key === KEY_ENTER) && e.detail === 0) {
+            // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
+            setTriggeredUsingKeyboard(true);
+          } else if (e.key === KEY_TAB && isNestedTriggerButton) {
+            // This closes dropdown if it is a nested dropdown
+            handleOnClose(e);
+          }
+        } else {
+          if (e.key === KEY_DOWN) {
+            // prevent page scroll
+            e.preventDefault();
+            handleTriggerClicked(e);
+          } else if ((e.code === KEY_SPACE || e.key === KEY_ENTER) && e.detail === 0) {
+            // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
+            setTriggeredUsingKeyboard(true);
+          }
         }
       }
     });
-  }, [isFocused, isLocalOpen, handleTriggerClicked]);
+  }, [isFocused, isLocalOpen, handleTriggerClicked, handleOnClose]);
   return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
@@ -169,6 +203,7 @@ const DropdownMenu = ({
     testId: testId && `${testId}--content`,
     shouldUseCaptureOnOutsideClick: true,
     shouldRenderToParent: shouldRenderToParent,
+    shouldDisableFocusLock: getBooleanFF('platform.design-system-team.disable-focus-lock-in-popup_7kb4d') ? true : false,
     trigger: ({
       ref,
       'aria-controls': ariaControls,
@@ -205,7 +240,9 @@ const DropdownMenu = ({
     content: ({
       setInitialFocusRef,
       update
-    }) => /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(MenuWrapper, {
+    }) => /*#__PURE__*/React.createElement(FocusManager, {
+      onClose: handleOnClose
+    }, /*#__PURE__*/React.createElement(MenuWrapper, {
       spacing: spacing,
       maxHeight: MAX_HEIGHT,
       maxWidth: 800,
@@ -214,6 +251,9 @@ const DropdownMenu = ({
       isLoading: isLoading,
       statusLabel: statusLabel,
       setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined,
+      shouldRenderToParent: shouldRenderToParent,
+      isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
+      autoFocus: autoFocus,
       testId: testId && `${testId}--menu-wrapper`
     }, children))
   }));

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

@@ -18,10 +18,11 @@ export const FocusManagerContext = /*#__PURE__*/createContext({
 });
 
 /**
- * Focus manager logic
+ * Focus manager logic.
  */
 const FocusManager = ({
-  children
+  children,
+  onClose
 }) => {
   const menuItemRefs = useRef([]);
   const registerRef = useCallback(ref => {
@@ -36,7 +37,7 @@ const FocusManager = ({
   useEffect(() => {
     return bind(window, {
       type: 'keydown',
-      listener: handleFocus(menuItemRefs.current, isLayerDisabled)
+      listener: handleFocus(menuItemRefs.current, isLayerDisabled, onClose)
     });
   });
   const contextValue = {

package/dist/es2019/internal/components/menu-wrapper.js

@@ -2,6 +2,7 @@
 import { useContext, useEffect, useLayoutEffect } from 'react';
 import { jsx } from '@emotion/react';
 import MenuGroup from '@atlaskit/menu/menu-group';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
 import { FocusManagerContext } from '../components/focus-manager';
@@ -39,8 +40,11 @@ const MenuWrapper = ({
   onUpdate,
   statusLabel,
   setInitialFocusRef,
+  shouldRenderToParent,
   spacing,
-  testId
+  testId,
+  isTriggeredUsingKeyboard,
+  autoFocus
 }) => {
   const {
     menuItemRefs
@@ -69,8 +73,13 @@ const MenuWrapper = ({
   useEffect(() => {
     var _menuItemRefs$find;
     const firstFocusableRef = (_menuItemRefs$find = menuItemRefs.find(ref => !ref.hasAttribute('disabled'))) !== null && _menuItemRefs$find !== void 0 ? _menuItemRefs$find : null;
+    if (getBooleanFF('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+      if (shouldRenderToParent && (isTriggeredUsingKeyboard || autoFocus)) {
+        firstFocusableRef === null || firstFocusableRef === void 0 ? void 0 : firstFocusableRef.focus();
+      }
+    }
     setInitialFocusRef === null || setInitialFocusRef === void 0 ? void 0 : setInitialFocusRef(firstFocusableRef);
-  }, [menuItemRefs, setInitialFocusRef]);
+  }, [menuItemRefs, setInitialFocusRef, autoFocus, shouldRenderToParent, isTriggeredUsingKeyboard]);
   return jsx(MenuGroup, {
     isLoading: isLoading,
     maxHeight: maxHeight,

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

@@ -1,4 +1,5 @@
-import { KEY_DOWN, KEY_END, KEY_HOME, KEY_UP } from '@atlaskit/ds-lib/keycodes';
+import { KEY_DOWN, KEY_END, KEY_HOME, KEY_TAB, KEY_UP } from '@atlaskit/ds-lib/keycodes';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const actionMap = {
   [KEY_DOWN]: 'next',
   [KEY_UP]: 'prev',
@@ -7,7 +8,7 @@ const actionMap = {
 };
 
 /**
- * currentFocusedIdx + 1 will not work if the next focusable element
+ * `currentFocusedIdx + 1` will not work if the next focusable element
  * is disabled. So, we need to iterate through the following menu items
  * to find one that isn't disabled. If all following elements are disabled,
  * return undefined.
@@ -23,7 +24,7 @@ const getNextFocusableElement = (refs, currentFocusedIdx) => {
 };
 
 /**
- * currentFocusedIdx - 1 will not work if the prev focusable element
+ * `currentFocusedIdx - 1` will not work if the prev focusable element
  * is disabled. So, we need to iterate through the previous menu items
  * to find one that isn't disabled. If all previous elements are disabled,
  * return undefined.
@@ -37,13 +38,20 @@ const getPrevFocusableElement = (refs, currentFocusedIdx) => {
     currentFocusedIdx--;
   }
 };
-export default function handleFocus(refs, isLayerDisabled) {
+export default function handleFocus(refs, isLayerDisabled, onClose) {
   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 (isLayerDisabled()) {
+      if (getBooleanFF('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+        // if nested dropdown isOpen we need to close on Tab key press
+        if (e.key === KEY_TAB && !e.shiftKey) {
+          onClose(e);
+        }
+      }
+
       // 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;
@@ -56,6 +64,11 @@ export default function handleFocus(refs, isLayerDisabled) {
         if (currentFocusedIdx < refs.length - 1) {
           const nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
           nextFocusableElement === null || nextFocusableElement === void 0 ? void 0 : nextFocusableElement.focus();
+        } else {
+          if (getBooleanFF('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+            const firstFocusableElement = getNextFocusableElement(refs, -1);
+            firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
+          }
         }
         break;
       case 'prev':
@@ -64,6 +77,11 @@ export default function handleFocus(refs, isLayerDisabled) {
         if (currentFocusedIdx > 0) {
           const prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
           prevFocusableElement === null || prevFocusableElement === void 0 ? void 0 : prevFocusableElement.focus();
+        } else {
+          if (getBooleanFF('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+            const lastFocusableElement = getPrevFocusableElement(refs, refs.length);
+            lastFocusableElement === null || lastFocusableElement === void 0 ? void 0 : lastFocusableElement.focus();
+          }
         }
         break;
       case 'first':

package/dist/esm/dropdown-menu.js

@@ -5,15 +5,17 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["ref", "aria-controls", "aria-expanded", "aria-haspopup"];
 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; }
+/* eslint-disable import/order */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/new';
-import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
+import { KEY_DOWN, KEY_ENTER, KEY_SPACE, KEY_TAB } 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';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+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';
@@ -33,8 +35,6 @@ var opposites = {
   auto: 'auto',
   end: 'start'
 };
-export var KEY_SPACE = ' ';
-export var KEY_ENTER = 'Enter';
 var getFallbackPlacements = function getFallbackPlacements(placement) {
   var placementPieces = placement.split('-');
   var mainAxis = placementPieces[0];
@@ -127,6 +127,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
       var _itemRef$current;
       // The trigger element must be focused to avoid problems with an incorrectly focused element after closing DropdownMenu
       itemRef === null || itemRef === void 0 || (_itemRef$current = itemRef.current) === null || _itemRef$current === void 0 || _itemRef$current.focus();
+      setTriggeredUsingKeyboard(false);
     }
     setLocalIsOpen(newValue);
     onOpenChange({
@@ -135,10 +136,25 @@ var DropdownMenu = function DropdownMenu(_ref) {
     });
   }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
   var handleOnClose = useCallback(function (event) {
-    if (event.key !== 'Escape' && event.target.closest("[id^=".concat(PREFIX, "] [aria-haspopup]"))) {
-      // Check if it is within dropdown and it is a trigger button
-      // if it is a nested dropdown, clicking trigger won't close the dropdown
-      return;
+    if (getBooleanFF('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+      if (event.key !== 'Escape' && event.key !== 'Tab' && event.target.closest("[id^=".concat(PREFIX, "] [aria-haspopup]"))) {
+        // Check if it is within dropdown and it is a trigger button
+        // if it is a nested dropdown, clicking trigger won't close the dropdown
+        // Dropdown can be closed by pressing Escape, Tab or Shift + Tab
+        return;
+      }
+      if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
+        requestAnimationFrame(function () {
+          var _itemRef$current2;
+          (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 || _itemRef$current2.focus();
+        });
+      }
+    } else {
+      if (event.key !== 'Escape' && event.target.closest("[id^=".concat(PREFIX, "] [aria-haspopup]"))) {
+        // Check if it is within dropdown and it is a trigger button
+        // if it is a nested dropdown, clicking trigger won't close the dropdown
+        return;
+      }
     }
     var newValue = false;
     setLocalIsOpen(newValue);
@@ -146,7 +162,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
       isOpen: newValue,
       event: event
     });
-  }, [onOpenChange, setLocalIsOpen]);
+  }, [onOpenChange, setLocalIsOpen, itemRef]);
   var _useFocus = useFocus(),
     isFocused = _useFocus.isFocused,
     bindFocus = _useFocus.bindFocus;
@@ -167,17 +183,35 @@ var DropdownMenu = function DropdownMenu(_ref) {
     return bind(window, {
       type: 'keydown',
       listener: function openOnKeyDown(e) {
-        if (e.key === KEY_DOWN) {
-          // prevent page scroll
-          e.preventDefault();
-          handleTriggerClicked(e);
-        } else if ((e.key === KEY_SPACE || e.key === KEY_ENTER) && e.detail === 0) {
-          // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
-          setTriggeredUsingKeyboard(true);
+        if (getBooleanFF('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+          var isNestedTriggerButton;
+          if (e.target instanceof HTMLElement) {
+            isNestedTriggerButton = e.target.closest("[id^=".concat(PREFIX, "] [aria-haspopup]"));
+          }
+          if (e.key === KEY_DOWN && !isNestedTriggerButton) {
+            // prevent page scroll
+            e.preventDefault();
+            handleTriggerClicked(e);
+          } else if ((e.code === KEY_SPACE || e.key === KEY_ENTER) && e.detail === 0) {
+            // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
+            setTriggeredUsingKeyboard(true);
+          } else if (e.key === KEY_TAB && isNestedTriggerButton) {
+            // This closes dropdown if it is a nested dropdown
+            handleOnClose(e);
+          }
+        } else {
+          if (e.key === KEY_DOWN) {
+            // prevent page scroll
+            e.preventDefault();
+            handleTriggerClicked(e);
+          } else if ((e.code === KEY_SPACE || e.key === KEY_ENTER) && e.detail === 0) {
+            // This allows us to focus on the first element if the dropdown was triggered by a custom trigger with a custom onClick
+            setTriggeredUsingKeyboard(true);
+          }
         }
       }
     });
-  }, [isFocused, isLocalOpen, handleTriggerClicked]);
+  }, [isFocused, isLocalOpen, handleTriggerClicked, handleOnClose]);
   return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
@@ -189,6 +223,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
     testId: testId && "".concat(testId, "--content"),
     shouldUseCaptureOnOutsideClick: true,
     shouldRenderToParent: shouldRenderToParent,
+    shouldDisableFocusLock: getBooleanFF('platform.design-system-team.disable-focus-lock-in-popup_7kb4d') ? true : false,
     trigger: function trigger(_ref2) {
       var ref = _ref2.ref,
         ariaControls = _ref2['aria-controls'],
@@ -222,7 +257,9 @@ var DropdownMenu = function DropdownMenu(_ref) {
     content: function content(_ref3) {
       var setInitialFocusRef = _ref3.setInitialFocusRef,
         update = _ref3.update;
-      return /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(MenuWrapper, {
+      return /*#__PURE__*/React.createElement(FocusManager, {
+        onClose: handleOnClose
+      }, /*#__PURE__*/React.createElement(MenuWrapper, {
         spacing: spacing,
         maxHeight: MAX_HEIGHT,
         maxWidth: 800,
@@ -231,6 +268,9 @@ var DropdownMenu = function DropdownMenu(_ref) {
         isLoading: isLoading,
         statusLabel: statusLabel,
         setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined,
+        shouldRenderToParent: shouldRenderToParent,
+        isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
+        autoFocus: autoFocus,
         testId: testId && "".concat(testId, "--menu-wrapper")
       }, children));
     }

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

@@ -18,10 +18,11 @@ export var FocusManagerContext = /*#__PURE__*/createContext({
 });
 
 /**
- * Focus manager logic
+ * Focus manager logic.
  */
 var FocusManager = function FocusManager(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    onClose = _ref.onClose;
   var menuItemRefs = useRef([]);
   var registerRef = useCallback(function (ref) {
     if (ref && !menuItemRefs.current.includes(ref)) {
@@ -34,7 +35,7 @@ var FocusManager = function FocusManager(_ref) {
   useEffect(function () {
     return bind(window, {
       type: 'keydown',
-      listener: handleFocus(menuItemRefs.current, isLayerDisabled)
+      listener: handleFocus(menuItemRefs.current, isLayerDisabled, onClose)
     });
   });
   var contextValue = {

package/dist/esm/internal/components/menu-wrapper.js

@@ -2,6 +2,7 @@
 import { useContext, useEffect, useLayoutEffect } from 'react';
 import { jsx } from '@emotion/react';
 import MenuGroup from '@atlaskit/menu/menu-group';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
 import { FocusManagerContext } from '../components/focus-manager';
@@ -41,8 +42,11 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     onUpdate = _ref2.onUpdate,
     statusLabel = _ref2.statusLabel,
     setInitialFocusRef = _ref2.setInitialFocusRef,
+    shouldRenderToParent = _ref2.shouldRenderToParent,
     spacing = _ref2.spacing,
-    testId = _ref2.testId;
+    testId = _ref2.testId,
+    isTriggeredUsingKeyboard = _ref2.isTriggeredUsingKeyboard,
+    autoFocus = _ref2.autoFocus;
   var _useContext = useContext(FocusManagerContext),
     menuItemRefs = _useContext.menuItemRefs;
   var closeOnMenuItemClick = function closeOnMenuItemClick(e) {
@@ -71,8 +75,13 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     var firstFocusableRef = (_menuItemRefs$find = menuItemRefs.find(function (ref) {
       return !ref.hasAttribute('disabled');
     })) !== null && _menuItemRefs$find !== void 0 ? _menuItemRefs$find : null;
+    if (getBooleanFF('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+      if (shouldRenderToParent && (isTriggeredUsingKeyboard || autoFocus)) {
+        firstFocusableRef === null || firstFocusableRef === void 0 || firstFocusableRef.focus();
+      }
+    }
     setInitialFocusRef === null || setInitialFocusRef === void 0 || setInitialFocusRef(firstFocusableRef);
-  }, [menuItemRefs, setInitialFocusRef]);
+  }, [menuItemRefs, setInitialFocusRef, autoFocus, shouldRenderToParent, isTriggeredUsingKeyboard]);
   return jsx(MenuGroup, {
     isLoading: isLoading,
     maxHeight: maxHeight,

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

@@ -1,10 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _actionMap;
-import { KEY_DOWN, KEY_END, KEY_HOME, KEY_UP } from '@atlaskit/ds-lib/keycodes';
+import { KEY_DOWN, KEY_END, KEY_HOME, KEY_TAB, KEY_UP } from '@atlaskit/ds-lib/keycodes';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var actionMap = (_actionMap = {}, _defineProperty(_actionMap, KEY_DOWN, 'next'), _defineProperty(_actionMap, KEY_UP, 'prev'), _defineProperty(_actionMap, KEY_HOME, 'first'), _defineProperty(_actionMap, KEY_END, 'last'), _actionMap);
 
 /**
- * currentFocusedIdx + 1 will not work if the next focusable element
+ * `currentFocusedIdx + 1` will not work if the next focusable element
  * is disabled. So, we need to iterate through the following menu items
  * to find one that isn't disabled. If all following elements are disabled,
  * return undefined.
@@ -20,7 +21,7 @@ var getNextFocusableElement = function getNextFocusableElement(refs, currentFocu
 };
 
 /**
- * currentFocusedIdx - 1 will not work if the prev focusable element
+ * `currentFocusedIdx - 1` will not work if the prev focusable element
  * is disabled. So, we need to iterate through the previous menu items
  * to find one that isn't disabled. If all previous elements are disabled,
  * return undefined.
@@ -34,13 +35,20 @@ var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocu
     currentFocusedIdx--;
   }
 };
-export default function handleFocus(refs, isLayerDisabled) {
+export default function handleFocus(refs, isLayerDisabled, onClose) {
   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 (isLayerDisabled()) {
+      if (getBooleanFF('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+        // if nested dropdown isOpen we need to close on Tab key press
+        if (e.key === KEY_TAB && !e.shiftKey) {
+          onClose(e);
+        }
+      }
+
       // 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;
@@ -53,6 +61,11 @@ export default function handleFocus(refs, isLayerDisabled) {
         if (currentFocusedIdx < refs.length - 1) {
           var _nextFocusableElement = getNextFocusableElement(refs, currentFocusedIdx);
           _nextFocusableElement === null || _nextFocusableElement === void 0 || _nextFocusableElement.focus();
+        } else {
+          if (getBooleanFF('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+            var firstFocusableElement = getNextFocusableElement(refs, -1);
+            firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
+          }
         }
         break;
       case 'prev':
@@ -61,6 +74,11 @@ export default function handleFocus(refs, isLayerDisabled) {
         if (currentFocusedIdx > 0) {
           var _prevFocusableElement = getPrevFocusableElement(refs, currentFocusedIdx);
           _prevFocusableElement === null || _prevFocusableElement === void 0 || _prevFocusableElement.focus();
+        } else {
+          if (getBooleanFF('platform.design-system-team.disable-focus-lock-in-popup_7kb4d')) {
+            var lastFocusableElement = getPrevFocusableElement(refs, refs.length);
+            lastFocusableElement === null || lastFocusableElement === void 0 || lastFocusableElement.focus();
+          }
         }
         break;
       case 'first':

package/dist/types/dropdown-menu.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 import type { DropdownMenuProps } from './types';
-export declare const KEY_SPACE = " ";
-export declare const KEY_ENTER = "Enter";
 /**
  * __Dropdown menu__
  *

package/dist/types/internal/components/focus-manager.d.ts

@@ -13,9 +13,10 @@ export declare const FocusManagerContext: React.Context<{
     registerRef: (ref: FocusableElement) => void;
 }>;
 /**
- * Focus manager logic
+ * Focus manager logic.
  */
 declare const FocusManager: FC<{
     children: ReactNode;
+    onClose: (e: KeyboardEvent) => void;
 }>;
 export default FocusManager;

package/dist/types/internal/components/menu-wrapper.d.ts

@@ -7,5 +7,5 @@ import { MenuWrapperProps } from '../../types';
  * if a CheckboxItem or RadioItem is clicked.
  * It also sets focus to the first menu item when opened.
  */
-declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, spacing, testId, }: MenuWrapperProps) => jsx.JSX.Element;
+declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, shouldRenderToParent, spacing, testId, isTriggeredUsingKeyboard, autoFocus, }: MenuWrapperProps) => jsx.JSX.Element;
 export default MenuWrapper;

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

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

package/dist/types/types.d.ts

@@ -2,7 +2,7 @@ import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
 import type { CustomItemComponentProps, CustomItemProps, MenuGroupProps, SectionProps } from '@atlaskit/menu/types';
 import type { ContentProps, TriggerProps } from '@atlaskit/popup/types';
 export type FocusableElement = HTMLAnchorElement | HTMLButtonElement;
-export type Action = 'next' | 'prev' | 'first' | 'last';
+export type Action = 'next' | 'prev' | 'first' | 'last' | 'tab';
 export type Placement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
 export type ItemId = string;
 export type GroupId = string;
@@ -49,6 +49,9 @@ export interface MenuWrapperProps extends MenuGroupProps {
     onUpdate: ContentProps['update'];
     isLoading?: DropdownMenuProps['isLoading'];
     statusLabel?: DropdownMenuProps['statusLabel'];
+    shouldRenderToParent?: boolean;
+    isTriggeredUsingKeyboard?: boolean;
+    autoFocus?: boolean;
 }
 export interface DropdownMenuGroupProps extends SectionProps {
 }

package/dist/types-ts4.5/dropdown-menu.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 import type { DropdownMenuProps } from './types';
-export declare const KEY_SPACE = " ";
-export declare const KEY_ENTER = "Enter";
 /**
  * __Dropdown menu__
  *

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

@@ -13,9 +13,10 @@ export declare const FocusManagerContext: React.Context<{
     registerRef: (ref: FocusableElement) => void;
 }>;
 /**
- * Focus manager logic
+ * Focus manager logic.
  */
 declare const FocusManager: FC<{
     children: ReactNode;
+    onClose: (e: KeyboardEvent) => void;
 }>;
 export default FocusManager;

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

@@ -7,5 +7,5 @@ import { MenuWrapperProps } from '../../types';
  * if a CheckboxItem or RadioItem is clicked.
  * It also sets focus to the first menu item when opened.
  */
-declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, spacing, testId, }: MenuWrapperProps) => jsx.JSX.Element;
+declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, shouldRenderToParent, spacing, testId, isTriggeredUsingKeyboard, autoFocus, }: MenuWrapperProps) => jsx.JSX.Element;
 export default MenuWrapper;

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

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

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

@@ -2,7 +2,7 @@ import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
 import type { CustomItemComponentProps, CustomItemProps, MenuGroupProps, SectionProps } from '@atlaskit/menu/types';
 import type { ContentProps, TriggerProps } from '@atlaskit/popup/types';
 export type FocusableElement = HTMLAnchorElement | HTMLButtonElement;
-export type Action = 'next' | 'prev' | 'first' | 'last';
+export type Action = 'next' | 'prev' | 'first' | 'last' | 'tab';
 export type Placement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
 export type ItemId = string;
 export type GroupId = string;
@@ -49,6 +49,9 @@ export interface MenuWrapperProps extends MenuGroupProps {
     onUpdate: ContentProps['update'];
     isLoading?: DropdownMenuProps['isLoading'];
     statusLabel?: DropdownMenuProps['statusLabel'];
+    shouldRenderToParent?: boolean;
+    isTriggeredUsingKeyboard?: boolean;
+    autoFocus?: boolean;
 }
 export interface DropdownMenuGroupProps extends SectionProps {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "12.5.3",
+  "version": "12.6.0",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,8 +33,8 @@
     "@atlaskit/layering": "^0.2.0",
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
-    "@atlaskit/popup": "^1.12.0",
-    "@atlaskit/primitives": "^3.0.0",
+    "@atlaskit/popup": "^1.13.0",
+    "@atlaskit/primitives": "^3.1.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.38.0",
@@ -56,6 +56,7 @@
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.4.3",
     "jest-in-case": "^1.0.2",
     "jscodeshift": "^0.13.0",
     "raf-stub": "^2.0.1",
@@ -110,6 +111,9 @@
     },
     "platform.design-system-team.update-input-border-wdith_5abwv": {
       "type": "boolean"
+    },
+    "platform.design-system-team.disable-focus-lock-in-popup_7kb4d": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/dropdown-menu/",