@atlaskit/dropdown-menu 12.8.4 → 12.9.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/dropdown-menu
 
+## 12.9.0
+
+### Minor Changes
+
+- [#91117](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91117) [`06ed35f020fb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/06ed35f020fb) - Add support for React 18.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.8.5
+
+### Patch Changes
+
+- [#84970](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84970) [`ad0e069e2829`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ad0e069e2829) - This removes the `platform.design-system-team.disable-focus-lock-in-popup_7kb4d` feature flag. The dropdown menu can be closed by pressing Tab or Shift + Tab if `shouldRenderToParent` is true.
+
 ## 12.8.4
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -19,7 +19,6 @@ 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"));
@@ -146,25 +145,17 @@ var DropdownMenu = function DropdownMenu(_ref) {
     });
   }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
   var handleOnClose = (0, _react.useCallback)(function (event) {
-    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;
-      }
+    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();
+      });
     }
     var newValue = false;
     setLocalIsOpen(newValue);
@@ -193,31 +184,20 @@ var DropdownMenu = function DropdownMenu(_ref) {
     return (0, _bindEventListener.bind)(window, {
       type: 'keydown',
       listener: function openOnKeyDown(e) {
-        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);
-          }
+        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);
         }
       }
     });
@@ -233,7 +213,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,
+    shouldDisableFocusLock: true,
     trigger: function trigger(_ref2) {
       var ref = _ref2.ref,
         ariaControls = _ref2['aria-controls'],

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

@@ -8,7 +8,6 @@ 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");
@@ -83,10 +82,8 @@ 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();
-      }
+    if (shouldRenderToParent && (isTriggeredUsingKeyboard || autoFocus)) {
+      firstFocusableRef === null || firstFocusableRef === void 0 || firstFocusableRef.focus();
     }
     setInitialFocusRef === null || setInitialFocusRef === void 0 || setInitialFocusRef(firstFocusableRef);
   }, [menuItemRefs, setInitialFocusRef, autoFocus, shouldRenderToParent, isTriggeredUsingKeyboard]);

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

@@ -7,7 +7,6 @@ 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);
 
@@ -49,11 +48,9 @@ function handleFocus(refs, isLayerDisabled, onClose) {
       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 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,
@@ -69,10 +66,8 @@ function handleFocus(refs, isLayerDisabled, onClose) {
           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();
-          }
+          var firstFocusableElement = getNextFocusableElement(refs, -1);
+          firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
         }
         break;
       case 'prev':
@@ -82,10 +77,8 @@ function handleFocus(refs, isLayerDisabled, onClose) {
           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();
-          }
+          var lastFocusableElement = getPrevFocusableElement(refs, refs.length);
+          lastFocusableElement === null || lastFocusableElement === void 0 || lastFocusableElement.focus();
         }
         break;
       case 'first':

package/dist/es2019/dropdown-menu.js

@@ -9,7 +9,6 @@ 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';
@@ -115,25 +114,17 @@ const DropdownMenu = ({
     });
   }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
   const handleOnClose = useCallback(event => {
-    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;
-      }
+    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();
+      });
     }
     const newValue = false;
     setLocalIsOpen(newValue);
@@ -163,31 +154,20 @@ const DropdownMenu = ({
     return bind(window, {
       type: 'keydown',
       listener: function openOnKeyDown(e) {
-        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);
-          }
+        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);
         }
       }
     });
@@ -203,7 +183,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,
+    shouldDisableFocusLock: true,
     trigger: ({
       ref,
       'aria-controls': ariaControls,

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

@@ -2,7 +2,6 @@
 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';
@@ -73,10 +72,8 @@ 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();
-      }
+    if (shouldRenderToParent && (isTriggeredUsingKeyboard || autoFocus)) {
+      firstFocusableRef === null || firstFocusableRef === void 0 ? void 0 : firstFocusableRef.focus();
     }
     setInitialFocusRef === null || setInitialFocusRef === void 0 ? void 0 : setInitialFocusRef(firstFocusableRef);
   }, [menuItemRefs, setInitialFocusRef, autoFocus, shouldRenderToParent, isTriggeredUsingKeyboard]);

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

@@ -1,5 +1,4 @@
 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',
@@ -45,11 +44,9 @@ export default function handleFocus(refs, isLayerDisabled, onClose) {
       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 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,
@@ -65,10 +62,8 @@ export default function handleFocus(refs, isLayerDisabled, onClose) {
           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();
-          }
+          const firstFocusableElement = getNextFocusableElement(refs, -1);
+          firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
         }
         break;
       case 'prev':
@@ -78,10 +73,8 @@ export default function handleFocus(refs, isLayerDisabled, onClose) {
           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();
-          }
+          const lastFocusableElement = getPrevFocusableElement(refs, refs.length);
+          lastFocusableElement === null || lastFocusableElement === void 0 ? void 0 : lastFocusableElement.focus();
         }
         break;
       case 'first':

package/dist/esm/dropdown-menu.js

@@ -15,7 +15,6 @@ 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';
@@ -136,25 +135,17 @@ var DropdownMenu = function DropdownMenu(_ref) {
     });
   }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
   var handleOnClose = useCallback(function (event) {
-    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;
-      }
+    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();
+      });
     }
     var newValue = false;
     setLocalIsOpen(newValue);
@@ -183,31 +174,20 @@ var DropdownMenu = function DropdownMenu(_ref) {
     return bind(window, {
       type: 'keydown',
       listener: function openOnKeyDown(e) {
-        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);
-          }
+        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);
         }
       }
     });
@@ -223,7 +203,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,
+    shouldDisableFocusLock: true,
     trigger: function trigger(_ref2) {
       var ref = _ref2.ref,
         ariaControls = _ref2['aria-controls'],

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

@@ -2,7 +2,6 @@
 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';
@@ -75,10 +74,8 @@ 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();
-      }
+    if (shouldRenderToParent && (isTriggeredUsingKeyboard || autoFocus)) {
+      firstFocusableRef === null || firstFocusableRef === void 0 || firstFocusableRef.focus();
     }
     setInitialFocusRef === null || setInitialFocusRef === void 0 || setInitialFocusRef(firstFocusableRef);
   }, [menuItemRefs, setInitialFocusRef, autoFocus, shouldRenderToParent, isTriggeredUsingKeyboard]);

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

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _actionMap;
 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);
 
 /**
@@ -42,11 +41,9 @@ export default function handleFocus(refs, isLayerDisabled, onClose) {
       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 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,
@@ -62,10 +59,8 @@ export default function handleFocus(refs, isLayerDisabled, onClose) {
           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();
-          }
+          var firstFocusableElement = getNextFocusableElement(refs, -1);
+          firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
         }
         break;
       case 'prev':
@@ -75,10 +70,8 @@ export default function handleFocus(refs, isLayerDisabled, onClose) {
           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();
-          }
+          var lastFocusableElement = getPrevFocusableElement(refs, refs.length);
+          lastFocusableElement === null || lastFocusableElement === void 0 || lastFocusableElement.focus();
         }
         break;
       case 'first':

package/dist/types/types.d.ts

@@ -96,8 +96,9 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      */
     shouldFlip?: boolean;
     /**
-     * The root element where the DropdownMenu content should be rendered.
-     * `true` - rendering in the DOM node closest to the trigger. `false` - rendering in React.Portal.
+     * The root element where the dropdown menu content should be rendered.
+     * `true` renders the dropdown menu in the DOM node closest to the trigger and avoids focus trap with tab keys.
+     * `false` renders the dropdown menu in React.Portal.
      * Defaults to `false`.
      */
     shouldRenderToParent?: boolean;

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

@@ -96,8 +96,9 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      */
     shouldFlip?: boolean;
     /**
-     * The root element where the DropdownMenu content should be rendered.
-     * `true` - rendering in the DOM node closest to the trigger. `false` - rendering in React.Portal.
+     * The root element where the dropdown menu content should be rendered.
+     * `true` renders the dropdown menu in the DOM node closest to the trigger and avoids focus trap with tab keys.
+     * `false` renders the dropdown menu in React.Portal.
      * Defaults to `false`.
      */
     shouldRenderToParent?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "12.8.4",
+  "version": "12.9.0",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,33 +23,35 @@
     "website": {
       "name": "Dropdown menu",
       "category": "Components"
-    }
+    },
+    "runReact18": true
   },
   "dependencies": {
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.12.0",
     "@atlaskit/codemod-utils": "^4.2.0",
-    "@atlaskit/ds-lib": "^2.2.4",
+    "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/layering": "^0.2.0",
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
-    "@atlaskit/popup": "^1.13.0",
-    "@atlaskit/primitives": "^5.1.0",
+    "@atlaskit/popup": "^1.14.0",
+    "@atlaskit/primitives": "^5.5.0",
     "@atlaskit/spinner": "^16.0.0",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0",
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
+    "@atlaskit/modal-dialog": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",
@@ -111,9 +113,6 @@
     },
     "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/",