@atlaskit/dropdown-menu 12.17.3 → 12.18.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/dropdown-menu
 
+## 12.18.1
+
+### Patch Changes
+
+- [#138585](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138585)
+  [`b72c2c7f9a2fd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b72c2c7f9a2fd) -
+  Support to close sibling dropdown menu under feature flag
+- Updated dependencies
+
+## 12.18.0
+
+### Minor Changes
+
+- [#133919](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/133919)
+  [`8b25fdc44ca38`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b25fdc44ca38) -
+  Added return focus to trigger after item selection
+
 ## 12.17.3
 
 ### Patch Changes

package/dist/cjs/dropdown-menu-item.js

@@ -14,7 +14,7 @@ var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
 var _customItem = _interopRequireDefault(require("@atlaskit/menu/custom-item"));
 var _linkItem = _interopRequireDefault(require("@atlaskit/menu/link-item"));
 var _useRegisterItemWithFocusManager = _interopRequireDefault(require("./internal/hooks/use-register-item-with-focus-manager"));
-var _excluded = ["children", "component", "description", "elemAfter", "elemBefore", "href", "isDisabled", "isSelected", "onClick", "rel", "shouldDescriptionWrap", "shouldTitleWrap", "target", "testId", "UNSAFE_shouldDisableRouterLink"];
+var _excluded = ["children", "component", "description", "elemAfter", "elemBefore", "href", "isDisabled", "isSelected", "onClick", "rel", "shouldDescriptionWrap", "shouldTitleWrap", "target", "testId", "UNSAFE_shouldDisableRouterLink", "returnFocusRef"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -44,8 +44,17 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     target = _ref.target,
     testId = _ref.testId,
     UNSAFE_shouldDisableRouterLink = _ref.UNSAFE_shouldDisableRouterLink,
+    returnFocusRef = _ref.returnFocusRef,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var itemRef = (0, _useRegisterItemWithFocusManager.default)();
+  var handleItemClick = (0, _react.useCallback)(function (event) {
+    if (returnFocusRef !== null && returnFocusRef !== void 0 && returnFocusRef.current) {
+      returnFocusRef.current.focus();
+    }
+    if (onClick) {
+      onClick(event);
+    }
+  }, [onClick, returnFocusRef]);
   if (component) {
     return /*#__PURE__*/_react.default.createElement(_customItem.default, (0, _extends2.default)({
       component: component,
@@ -54,7 +63,7 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       iconBefore: elemBefore,
       isDisabled: isDisabled,
       isSelected: isSelected,
-      onClick: onClick,
+      onClick: handleItemClick,
       ref: (0, _mergeRefs.default)([ref, itemRef]),
       shouldDescriptionWrap: shouldDescriptionWrap,
       shouldTitleWrap: shouldTitleWrap,
@@ -76,7 +85,7 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       iconBefore: elemBefore,
       isDisabled: isDisabled,
       isSelected: isSelected,
-      onClick: onClick,
+      onClick: handleItemClick,
       ref: (0, _mergeRefs.default)([ref, itemRef]),
       rel: rel,
       role: "menuitem",
@@ -94,7 +103,7 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       iconBefore: elemBefore,
       isDisabled: isDisabled,
       isSelected: isSelected,
-      onClick: onClick,
+      onClick: handleItemClick,
       ref: (0, _mergeRefs.default)([ref, itemRef]),
       role: "menuitem",
       shouldDescriptionWrap: shouldDescriptionWrap,

package/dist/cjs/dropdown-menu.js

@@ -23,12 +23,11 @@ var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _constants = require("@atlaskit/theme/constants");
 var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
 var _menuWrapper = _interopRequireDefault(require("./internal/components/menu-wrapper"));
+var _dropdownMenuContext = require("./internal/context/dropdown-menu-context");
 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 import/order */
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+var _excluded = ["ref", "aria-controls", "aria-expanded", "aria-haspopup"]; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -105,6 +104,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
     _useControlledState2 = (0, _slicedToArray2.default)(_useControlledState, 2),
     isLocalOpen = _useControlledState2[0],
     setLocalIsOpen = _useControlledState2[1];
+  var triggerRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isTriggeredUsingKeyboard = _useState2[0],
@@ -147,13 +147,22 @@ var DropdownMenu = function DropdownMenu(_ref) {
       event: event
     });
   }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
-  var handleOnClose = (0, _react.useCallback)(function (event) {
+  var handleOnClose = (0, _react.useCallback)(function (event, currentLevel) {
     var _event$target, _event$target$closest;
     if (event.key !== 'Escape' && event.key !== 'Tab' && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, "[id^=".concat(_useGeneratedId.PREFIX, "] [aria-haspopup]"))) {
+      var _itemRef$current2;
       // 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 (!currentLevel) {
+        return;
+      }
+      // if currentLevel is provided, we will compare with the given item's level
+      // when it is available and larger than currentLevel, we will proceed the close behavior
+      var toCloseLevel = (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 ? void 0 : _itemRef$current2.dataset['ds-Level'];
+      if (toCloseLevel && Number(toCloseLevel) < currentLevel) {
+        return;
+      }
     }
 
     // transfer focus to the element specified by ref
@@ -166,8 +175,13 @@ var DropdownMenu = function DropdownMenu(_ref) {
       });
     } else 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 _itemRef$current3;
+        (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 || _itemRef$current3.focus();
+      });
+    } else if (triggerRef.current) {
+      requestAnimationFrame(function () {
+        var _triggerRef$current;
+        (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
       });
     }
     var newValue = false;
@@ -233,7 +247,11 @@ var DropdownMenu = function DropdownMenu(_ref) {
   } : {
     shouldRenderToParent: shouldRenderToParent
   };
-  return /*#__PURE__*/_react.default.createElement(_selectionStore.default, null, /*#__PURE__*/_react.default.createElement(_popup.default, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_selectionStore.default, null, /*#__PURE__*/_react.default.createElement(_dropdownMenuContext.DropdownMenuProvider, {
+    value: {
+      returnFocusRef: triggerRef
+    }
+  }, /*#__PURE__*/_react.default.createElement(_popup.default, (0, _extends2.default)({
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
@@ -257,14 +275,14 @@ var DropdownMenu = function DropdownMenu(_ref) {
           'aria-expanded': ariaExpanded,
           'aria-haspopup': ariaHasPopup
         }, rest), bindFocus), {}, {
-          triggerRef: (0, _mergeRefs.default)([ref, itemRef]),
+          triggerRef: (0, _mergeRefs.default)([ref, triggerRef, itemRef]),
           isSelected: isLocalOpen,
           onClick: handleTriggerClicked,
           testId: testId && "".concat(testId, "--trigger")
         }));
       }
       return /*#__PURE__*/_react.default.createElement(_new.default, (0, _extends2.default)({}, bindFocus, {
-        ref: (0, _mergeRefs.default)([ref, itemRef]),
+        ref: (0, _mergeRefs.default)([ref, triggerRef, itemRef]),
         "aria-controls": ariaControls,
         "aria-expanded": ariaExpanded,
         "aria-haspopup": ariaHasPopup,
@@ -295,6 +313,6 @@ var DropdownMenu = function DropdownMenu(_ref) {
         testId: testId && "".concat(testId, "--menu-wrapper")
       }, children));
     }
-  })));
+  }))));
 };
 var _default = exports.default = DropdownMenu;

package/dist/cjs/internal/context/dropdown-menu-context.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownMenuProvider = void 0;
+var _react = require("react");
+var DropdownMenuContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Dropdown menu provider__
+ *
+ * A dropdown menu provider {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+var DropdownMenuProvider = exports.DropdownMenuProvider = DropdownMenuContext.Provider;

package/dist/es2019/dropdown-menu-item.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import ButtonItem from '@atlaskit/menu/button-item';
 import CustomItem from '@atlaskit/menu/custom-item';
@@ -30,9 +30,18 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
   target,
   testId,
   UNSAFE_shouldDisableRouterLink,
+  returnFocusRef,
   ...rest
 }, ref) => {
   const itemRef = useRegisterItemWithFocusManager();
+  const handleItemClick = useCallback(event => {
+    if (returnFocusRef !== null && returnFocusRef !== void 0 && returnFocusRef.current) {
+      returnFocusRef.current.focus();
+    }
+    if (onClick) {
+      onClick(event);
+    }
+  }, [onClick, returnFocusRef]);
   if (component) {
     return /*#__PURE__*/React.createElement(CustomItem, _extends({
       component: component,
@@ -41,7 +50,7 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
       iconBefore: elemBefore,
       isDisabled: isDisabled,
       isSelected: isSelected,
-      onClick: onClick,
+      onClick: handleItemClick,
       ref: mergeRefs([ref, itemRef]),
       shouldDescriptionWrap: shouldDescriptionWrap,
       shouldTitleWrap: shouldTitleWrap,
@@ -63,7 +72,7 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
       iconBefore: elemBefore,
       isDisabled: isDisabled,
       isSelected: isSelected,
-      onClick: onClick,
+      onClick: handleItemClick,
       ref: mergeRefs([ref, itemRef]),
       rel: rel,
       role: "menuitem",
@@ -81,7 +90,7 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
       iconBefore: elemBefore,
       isDisabled: isDisabled,
       isSelected: isSelected,
-      onClick: onClick,
+      onClick: handleItemClick,
       ref: mergeRefs([ref, itemRef]),
       role: "menuitem",
       shouldDescriptionWrap: shouldDescriptionWrap,

package/dist/es2019/dropdown-menu.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/* eslint-disable import/order */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/new';
 import { KEY_DOWN, KEY_ENTER, KEY_SPACE, KEY_TAB } from '@atlaskit/ds-lib/keycodes';
@@ -14,6 +13,7 @@ import Popup from '@atlaskit/popup';
 import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
 import FocusManager from './internal/components/focus-manager';
 import MenuWrapper from './internal/components/menu-wrapper';
+import { DropdownMenuProvider } from './internal/context/dropdown-menu-context';
 import SelectionStore from './internal/context/selection-store';
 import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
 import useGeneratedId, { PREFIX } from './internal/utils/use-generated-id';
@@ -76,6 +76,7 @@ const DropdownMenu = ({
   label
 }) => {
   const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpen, () => defaultOpen);
+  const triggerRef = useRef(null);
   const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
   const id = useGeneratedId();
   const itemRef = useRegisterItemWithFocusManager();
@@ -115,13 +116,22 @@ const DropdownMenu = ({
       event
     });
   }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
-  const handleOnClose = useCallback(event => {
+  const handleOnClose = useCallback((event, currentLevel) => {
     var _event$target, _event$target$closest;
     if (event.key !== 'Escape' && event.key !== 'Tab' && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, `[id^=${PREFIX}] [aria-haspopup]`)) {
+      var _itemRef$current2;
       // 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 (!currentLevel) {
+        return;
+      }
+      // if currentLevel is provided, we will compare with the given item's level
+      // when it is available and larger than currentLevel, we will proceed the close behavior
+      const toCloseLevel = (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 ? void 0 : _itemRef$current2.dataset['ds-Level'];
+      if (toCloseLevel && Number(toCloseLevel) < currentLevel) {
+        return;
+      }
     }
 
     // transfer focus to the element specified by ref
@@ -134,8 +144,13 @@ const DropdownMenu = ({
       });
     } else 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();
+        var _itemRef$current3;
+        (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 ? void 0 : _itemRef$current3.focus();
+      });
+    } else if (triggerRef.current) {
+      requestAnimationFrame(() => {
+        var _triggerRef$current;
+        (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
       });
     }
     const newValue = false;
@@ -202,7 +217,11 @@ const DropdownMenu = ({
   } : {
     shouldRenderToParent
   };
-  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, _extends({
+  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(DropdownMenuProvider, {
+    value: {
+      returnFocusRef: triggerRef
+    }
+  }, /*#__PURE__*/React.createElement(Popup, _extends({
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
@@ -229,14 +248,14 @@ const DropdownMenu = ({
           'aria-haspopup': ariaHasPopup,
           ...rest,
           ...bindFocus,
-          triggerRef: mergeRefs([ref, itemRef]),
+          triggerRef: mergeRefs([ref, triggerRef, itemRef]),
           isSelected: isLocalOpen,
           onClick: handleTriggerClicked,
           testId: testId && `${testId}--trigger`
         });
       }
       return /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
-        ref: mergeRefs([ref, itemRef]),
+        ref: mergeRefs([ref, triggerRef, itemRef]),
         "aria-controls": ariaControls,
         "aria-expanded": ariaExpanded,
         "aria-haspopup": ariaHasPopup,
@@ -266,6 +285,6 @@ const DropdownMenu = ({
       autoFocus: autoFocus,
       testId: testId && `${testId}--menu-wrapper`
     }, children))
-  })));
+  }))));
 };
 export default DropdownMenu;

package/dist/es2019/internal/context/dropdown-menu-context.js

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+const DropdownMenuContext = /*#__PURE__*/createContext(undefined);
+
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Dropdown menu provider__
+ *
+ * A dropdown menu provider {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+export const DropdownMenuProvider = DropdownMenuContext.Provider;

package/dist/esm/dropdown-menu-item.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "component", "description", "elemAfter", "elemBefore", "href", "isDisabled", "isSelected", "onClick", "rel", "shouldDescriptionWrap", "shouldTitleWrap", "target", "testId", "UNSAFE_shouldDisableRouterLink"];
-import React, { forwardRef } from 'react';
+var _excluded = ["children", "component", "description", "elemAfter", "elemBefore", "href", "isDisabled", "isSelected", "onClick", "rel", "shouldDescriptionWrap", "shouldTitleWrap", "target", "testId", "UNSAFE_shouldDisableRouterLink", "returnFocusRef"];
+import React, { forwardRef, useCallback } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import ButtonItem from '@atlaskit/menu/button-item';
 import CustomItem from '@atlaskit/menu/custom-item';
@@ -34,8 +34,17 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     target = _ref.target,
     testId = _ref.testId,
     UNSAFE_shouldDisableRouterLink = _ref.UNSAFE_shouldDisableRouterLink,
+    returnFocusRef = _ref.returnFocusRef,
     rest = _objectWithoutProperties(_ref, _excluded);
   var itemRef = useRegisterItemWithFocusManager();
+  var handleItemClick = useCallback(function (event) {
+    if (returnFocusRef !== null && returnFocusRef !== void 0 && returnFocusRef.current) {
+      returnFocusRef.current.focus();
+    }
+    if (onClick) {
+      onClick(event);
+    }
+  }, [onClick, returnFocusRef]);
   if (component) {
     return /*#__PURE__*/React.createElement(CustomItem, _extends({
       component: component,
@@ -44,7 +53,7 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       iconBefore: elemBefore,
       isDisabled: isDisabled,
       isSelected: isSelected,
-      onClick: onClick,
+      onClick: handleItemClick,
       ref: mergeRefs([ref, itemRef]),
       shouldDescriptionWrap: shouldDescriptionWrap,
       shouldTitleWrap: shouldTitleWrap,
@@ -66,7 +75,7 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       iconBefore: elemBefore,
       isDisabled: isDisabled,
       isSelected: isSelected,
-      onClick: onClick,
+      onClick: handleItemClick,
       ref: mergeRefs([ref, itemRef]),
       rel: rel,
       role: "menuitem",
@@ -84,7 +93,7 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       iconBefore: elemBefore,
       isDisabled: isDisabled,
       isSelected: isSelected,
-      onClick: onClick,
+      onClick: handleItemClick,
       ref: mergeRefs([ref, itemRef]),
       role: "menuitem",
       shouldDescriptionWrap: shouldDescriptionWrap,

package/dist/esm/dropdown-menu.js

@@ -5,8 +5,7 @@ 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 React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/new';
 import { KEY_DOWN, KEY_ENTER, KEY_SPACE, KEY_TAB } from '@atlaskit/ds-lib/keycodes';
@@ -20,6 +19,7 @@ import Popup from '@atlaskit/popup';
 import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
 import FocusManager from './internal/components/focus-manager';
 import MenuWrapper from './internal/components/menu-wrapper';
+import { DropdownMenuProvider } from './internal/context/dropdown-menu-context';
 import SelectionStore from './internal/context/selection-store';
 import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
 import useGeneratedId, { PREFIX } from './internal/utils/use-generated-id';
@@ -95,6 +95,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     isLocalOpen = _useControlledState2[0],
     setLocalIsOpen = _useControlledState2[1];
+  var triggerRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isTriggeredUsingKeyboard = _useState2[0],
@@ -137,13 +138,22 @@ var DropdownMenu = function DropdownMenu(_ref) {
       event: event
     });
   }, [itemRef, onOpenChange, isLocalOpen, setLocalIsOpen]);
-  var handleOnClose = useCallback(function (event) {
+  var handleOnClose = useCallback(function (event, currentLevel) {
     var _event$target, _event$target$closest;
     if (event.key !== 'Escape' && event.key !== 'Tab' && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, "[id^=".concat(PREFIX, "] [aria-haspopup]"))) {
+      var _itemRef$current2;
       // 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 (!currentLevel) {
+        return;
+      }
+      // if currentLevel is provided, we will compare with the given item's level
+      // when it is available and larger than currentLevel, we will proceed the close behavior
+      var toCloseLevel = (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 ? void 0 : _itemRef$current2.dataset['ds-Level'];
+      if (toCloseLevel && Number(toCloseLevel) < currentLevel) {
+        return;
+      }
     }
 
     // transfer focus to the element specified by ref
@@ -156,8 +166,13 @@ var DropdownMenu = function DropdownMenu(_ref) {
       });
     } else 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 _itemRef$current3;
+        (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 || _itemRef$current3.focus();
+      });
+    } else if (triggerRef.current) {
+      requestAnimationFrame(function () {
+        var _triggerRef$current;
+        (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
       });
     }
     var newValue = false;
@@ -223,7 +238,11 @@ var DropdownMenu = function DropdownMenu(_ref) {
   } : {
     shouldRenderToParent: shouldRenderToParent
   };
-  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, _extends({
+  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(DropdownMenuProvider, {
+    value: {
+      returnFocusRef: triggerRef
+    }
+  }, /*#__PURE__*/React.createElement(Popup, _extends({
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
@@ -247,14 +266,14 @@ var DropdownMenu = function DropdownMenu(_ref) {
           'aria-expanded': ariaExpanded,
           'aria-haspopup': ariaHasPopup
         }, rest), bindFocus), {}, {
-          triggerRef: mergeRefs([ref, itemRef]),
+          triggerRef: mergeRefs([ref, triggerRef, itemRef]),
           isSelected: isLocalOpen,
           onClick: handleTriggerClicked,
           testId: testId && "".concat(testId, "--trigger")
         }));
       }
       return /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
-        ref: mergeRefs([ref, itemRef]),
+        ref: mergeRefs([ref, triggerRef, itemRef]),
         "aria-controls": ariaControls,
         "aria-expanded": ariaExpanded,
         "aria-haspopup": ariaHasPopup,
@@ -285,6 +304,6 @@ var DropdownMenu = function DropdownMenu(_ref) {
         testId: testId && "".concat(testId, "--menu-wrapper")
       }, children));
     }
-  })));
+  }))));
 };
 export default DropdownMenu;

package/dist/esm/internal/context/dropdown-menu-context.js

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+var DropdownMenuContext = /*#__PURE__*/createContext(undefined);
+
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Dropdown menu provider__
+ *
+ * A dropdown menu provider {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+export var DropdownMenuProvider = DropdownMenuContext.Provider;

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

@@ -0,0 +1,16 @@
+import { type RefObject } from 'react';
+interface DropdownMenuContext {
+    returnFocusRef: RefObject<HTMLElement> | null;
+}
+declare const DropdownMenuContext: import("react").Context<DropdownMenuContext | undefined>;
+/**
+ * __Dropdown menu provider__
+ *
+ * A dropdown menu provider {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+export declare const DropdownMenuProvider: import("react").Provider<DropdownMenuContext | undefined>;
+export {};

package/dist/types/types.d.ts

@@ -238,6 +238,10 @@ export interface DropdownItemProps {
      * Marked as "unsafe" because ideally, router links should be used for all internal links.
      */
     UNSAFE_shouldDisableRouterLink?: boolean;
+    /**
+     * If ref is passed, focus returns to that specific ref element after dropdown item clicked.
+     */
+    returnFocusRef?: RefObject<HTMLElement>;
 }
 export interface DropdownItemCheckboxProps {
     /**

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

@@ -0,0 +1,16 @@
+import { type RefObject } from 'react';
+interface DropdownMenuContext {
+    returnFocusRef: RefObject<HTMLElement> | null;
+}
+declare const DropdownMenuContext: import("react").Context<DropdownMenuContext | undefined>;
+/**
+ * __Dropdown menu provider__
+ *
+ * A dropdown menu provider {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+export declare const DropdownMenuProvider: import("react").Provider<DropdownMenuContext | undefined>;
+export {};

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

@@ -238,6 +238,10 @@ export interface DropdownItemProps {
      * Marked as "unsafe" because ideally, router links should be used for all internal links.
      */
     UNSAFE_shouldDisableRouterLink?: boolean;
+    /**
+     * If ref is passed, focus returns to that specific ref element after dropdown item clicked.
+     */
+    returnFocusRef?: RefObject<HTMLElement>;
 }
 export interface DropdownItemCheckboxProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "12.17.3",
+	"version": "12.18.1",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -16,10 +16,6 @@
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"team": "Design System Team",
-		"releaseModel": "continuous",
-		"productPushConsumption": [
-			"jira"
-		],
 		"website": {
 			"name": "Dropdown menu",
 			"category": "Components"
@@ -30,11 +26,11 @@
 		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/ds-lib": "^2.5.0",
-		"@atlaskit/icon": "^22.14.0",
+		"@atlaskit/icon": "^22.16.0",
 		"@atlaskit/layering": "^0.4.0",
 		"@atlaskit/menu": "^2.12.0",
-		"@atlaskit/popup": "^1.23.0",
-		"@atlaskit/primitives": "^12.0.0",
+		"@atlaskit/popup": "^1.25.0",
+		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^1.59.0",
@@ -52,7 +48,7 @@
 		"@af/visual-regression": "*",
 		"@atlaskit/app-provider": "^1.4.0",
 		"@atlaskit/modal-dialog": "^12.15.0",
-		"@atlaskit/toggle": "^13.3.0",
+		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@testing-library/dom": "^10.1.0",
@@ -72,6 +68,20 @@
 		"react",
 		"ui"
 	],
+	"platform-feature-flags": {
+		"platform_dst_popup-disable-focuslock": {
+			"type": "boolean",
+			"referenceOnly": true
+		},
+		"sibling-dropdown-close-issue": {
+			"type": "boolean",
+			"referenceOnly": true
+		},
+		"design-system-closed-all-when-click-outside": {
+			"type": "boolean",
+			"referenceOnly": true
+		}
+	},
 	"techstack": {
 		"@atlassian/frontend": {
 			"import-structure": "atlassian-conventions"