@atlaskit/dropdown-menu 12.17.2 → 12.18.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/dropdown-menu
 
+## 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
+
+- [#133182](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/133182)
+  [`063ecc7968c68`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/063ecc7968c68) -
+  We are testing an internal change to use an ID generator compatible with both React 16 and
+  React 18. If these changes are successful, it will be rolled out in a later release.
+
 ## 12.17.2
 
 ### Patch Changes

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

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _reactUid = require("react-uid");
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _section = _interopRequireDefault(require("@atlaskit/menu/section"));
 var _groupTitle = _interopRequireDefault(require("../internal/components/group-title"));
 var _checkboxGroupContext = require("../internal/context/checkbox-group-context");
@@ -29,7 +29,7 @@ var DropdownItemCheckboxGroup = function DropdownItemCheckboxGroup(_ref) {
     testId = _ref.testId,
     title = _ref.title,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var uid = (0, _reactUid.useUID)();
+  var uid = (0, _reactUid.useId)();
   var titleId = "dropdown-menu-item-checkbox-group-title-".concat(uid);
   return /*#__PURE__*/_react.default.createElement(_checkboxGroupContext.CheckboxGroupContext.Provider, {
     value: id

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

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactUid = require("react-uid");
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _menu = require("@atlaskit/menu");
 var _groupTitle = _interopRequireDefault(require("./internal/components/group-title"));
 var _excluded = ["children", "id", "isList", "isScrollable", "title", "testId", "hasSeparator", "overrides"];
@@ -31,7 +31,7 @@ var DropdownMenuItemGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     hasSeparator = _ref.hasSeparator,
     overrides = _ref.overrides,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var uid = (0, _reactUid.useUID)();
+  var uid = (0, _reactUid.useId)();
   var titleId = "dropdown-menu-item-group-title-".concat(uid);
   return /*#__PURE__*/_react.default.createElement(_menu.Section, (0, _extends2.default)({
     id: id,

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],
@@ -169,6 +169,11 @@ var DropdownMenu = function DropdownMenu(_ref) {
         var _itemRef$current2;
         (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 || _itemRef$current2.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;
     setLocalIsOpen(newValue);
@@ -233,7 +238,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 +266,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 +304,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/cjs/radio/dropdown-item-radio-group.js

@@ -11,8 +11,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactUid = require("react-uid");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _menu = require("@atlaskit/menu");
 var _groupTitle = _interopRequireDefault(require("../internal/components/group-title"));
 var _selectionStore = require("../internal/context/selection-store");
@@ -51,7 +51,7 @@ var DropdownItemRadioGroup = function DropdownItemRadioGroup(_ref) {
   var _useContext = (0, _react.useContext)(_selectionStore.SelectionStoreContext),
     setGroupState = _useContext.setGroupState,
     getGroupState = _useContext.getGroupState;
-  var uid = (0, _reactUid.useUID)();
+  var uid = (0, _reactUid.useId)();
   var titleId = "dropdown-menu-item-radio-group-title-".concat(uid);
 
   /**

package/dist/es2019/checkbox/dropdown-item-checkbox-group.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { useUID } from 'react-uid';
+import { useId } from '@atlaskit/ds-lib/react-uid';
 import Section from '@atlaskit/menu/section';
 import GroupTitle from '../internal/components/group-title';
 import { CheckboxGroupContext } from '../internal/context/checkbox-group-context';
@@ -22,7 +22,7 @@ const DropdownItemCheckboxGroup = ({
   // DSP-13312 TODO: remove spread props in future major release
   ...rest
 }) => {
-  const uid = useUID();
+  const uid = useId();
   const titleId = `dropdown-menu-item-checkbox-group-title-${uid}`;
   return /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: id

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-import { useUID } from 'react-uid';
+import { useId } from '@atlaskit/ds-lib/react-uid';
 import { Section } from '@atlaskit/menu';
 import GroupTitle from './internal/components/group-title';
 
@@ -21,7 +21,7 @@ const DropdownMenuItemGroup = /*#__PURE__*/forwardRef(({
   overrides,
   ...rest
 }, ref) => {
-  const uid = useUID();
+  const uid = useId();
   const titleId = `dropdown-menu-item-group-title-${uid}`;
   return /*#__PURE__*/React.createElement(Section, _extends({
     id: id,

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();
@@ -137,6 +138,11 @@ const DropdownMenu = ({
         var _itemRef$current2;
         (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 ? void 0 : _itemRef$current2.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;
     setLocalIsOpen(newValue);
@@ -202,7 +208,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 +239,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 +276,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/es2019/radio/dropdown-item-radio-group.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { createContext, useContext, useState } from 'react';
-import { useUID } from 'react-uid';
 import noop from '@atlaskit/ds-lib/noop';
+import { useId } from '@atlaskit/ds-lib/react-uid';
 import { Section } from '@atlaskit/menu';
 import GroupTitle from '../internal/components/group-title';
 import { SelectionStoreContext } from '../internal/context/selection-store';
@@ -38,7 +38,7 @@ const DropdownItemRadioGroup = ({
     setGroupState,
     getGroupState
   } = useContext(SelectionStoreContext);
-  const uid = useUID();
+  const uid = useId();
   const titleId = `dropdown-menu-item-radio-group-title-${uid}`;
 
   /**

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "hasSeparator", "id", "isList", "isScrollable", "overrides", "testId", "title"];
 import React from 'react';
-import { useUID } from 'react-uid';
+import { useId } from '@atlaskit/ds-lib/react-uid';
 import Section from '@atlaskit/menu/section';
 import GroupTitle from '../internal/components/group-title';
 import { CheckboxGroupContext } from '../internal/context/checkbox-group-context';
@@ -22,7 +22,7 @@ var DropdownItemCheckboxGroup = function DropdownItemCheckboxGroup(_ref) {
     testId = _ref.testId,
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var uid = useUID();
+  var uid = useId();
   var titleId = "dropdown-menu-item-checkbox-group-title-".concat(uid);
   return /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: id

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "id", "isList", "isScrollable", "title", "testId", "hasSeparator", "overrides"];
 import React, { forwardRef } from 'react';
-import { useUID } from 'react-uid';
+import { useId } from '@atlaskit/ds-lib/react-uid';
 import { Section } from '@atlaskit/menu';
 import GroupTitle from './internal/components/group-title';
 
@@ -22,7 +22,7 @@ var DropdownMenuItemGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     hasSeparator = _ref.hasSeparator,
     overrides = _ref.overrides,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var uid = useUID();
+  var uid = useId();
   var titleId = "dropdown-menu-item-group-title-".concat(uid);
   return /*#__PURE__*/React.createElement(Section, _extends({
     id: id,

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],
@@ -159,6 +160,11 @@ var DropdownMenu = function DropdownMenu(_ref) {
         var _itemRef$current2;
         (_itemRef$current2 = itemRef.current) === null || _itemRef$current2 === void 0 || _itemRef$current2.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;
     setLocalIsOpen(newValue);
@@ -223,7 +229,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 +257,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 +295,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/esm/radio/dropdown-item-radio-group.js

@@ -6,8 +6,8 @@ var _excluded = ["children", "hasSeparator", "id", "isList", "isScrollable", "ov
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { createContext, useContext, useState } from 'react';
-import { useUID } from 'react-uid';
 import noop from '@atlaskit/ds-lib/noop';
+import { useId } from '@atlaskit/ds-lib/react-uid';
 import { Section } from '@atlaskit/menu';
 import GroupTitle from '../internal/components/group-title';
 import { SelectionStoreContext } from '../internal/context/selection-store';
@@ -41,7 +41,7 @@ var DropdownItemRadioGroup = function DropdownItemRadioGroup(_ref) {
   var _useContext = useContext(SelectionStoreContext),
     setGroupState = _useContext.setGroupState,
     getGroupState = _useContext.getGroupState;
-  var uid = useUID();
+  var uid = useId();
   var titleId = "dropdown-menu-item-radio-group-title-".concat(uid);
 
   /**

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.2",
+	"version": "12.18.0",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -27,21 +27,20 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/button": "^20.0.0",
+		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/ds-lib": "^2.4.0",
-		"@atlaskit/icon": "^22.13.0",
+		"@atlaskit/ds-lib": "^2.5.0",
+		"@atlaskit/icon": "^22.15.0",
 		"@atlaskit/layering": "^0.4.0",
 		"@atlaskit/menu": "^2.12.0",
-		"@atlaskit/popup": "^1.22.0",
+		"@atlaskit/popup": "^1.23.0",
 		"@atlaskit/primitives": "^12.0.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
-		"bind-event-listener": "^3.0.0",
-		"react-uid": "^2.2.0"
+		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ^18.0.0",