@atlaskit/dropdown-menu 12.14.2 → 12.16.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/dropdown-menu
 
+## 12.16.0
+
+### Minor Changes
+
+- [`8b8090800a35d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b8090800a35d) -
+  Bump peer dependency for react-dom to include version 17 and 18.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.15.0
+
+### Minor Changes
+
+- [#126129](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126129)
+  [`75d153a575b4d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/75d153a575b4d) -
+  Accessibility changes. Add a new optional prop `returnFocusRef` for cases when we need to focus an
+  interactive element after closing DropdownMenu.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.14.2
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -91,6 +91,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
     shouldFlip = _ref$shouldFlip === void 0 ? true : _ref$shouldFlip,
     _ref$shouldRenderToPa = _ref.shouldRenderToParent,
     shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
+    returnFocusRef = _ref.returnFocusRef,
     spacing = _ref.spacing,
     statusLabel = _ref.statusLabel,
     testId = _ref.testId,
@@ -154,7 +155,16 @@ var DropdownMenu = function DropdownMenu(_ref) {
       // Dropdown can be closed by pressing Escape, Tab or Shift + Tab
       return;
     }
-    if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
+
+    // transfer focus to the element specified by ref
+    // if ref is not provided, use old behavior:
+    // focus on trigger when <Esc> or <Shift+Tab> is pressed
+    if (returnFocusRef) {
+      requestAnimationFrame(function () {
+        var _returnFocusRef$curre;
+        (_returnFocusRef$curre = returnFocusRef.current) === null || _returnFocusRef$curre === void 0 || _returnFocusRef$curre.focus();
+      });
+    } 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();
@@ -166,7 +176,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
       isOpen: newValue,
       event: event
     });
-  }, [onOpenChange, setLocalIsOpen, itemRef]);
+  }, [itemRef, onOpenChange, returnFocusRef, setLocalIsOpen]);
   var _useFocus = (0, _useFocusEvent.default)(),
     isFocused = _useFocus.isFocused,
     bindFocus = _useFocus.bindFocus;

package/dist/cjs/internal/components/group-title.js

@@ -9,8 +9,8 @@ var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -15,8 +15,8 @@ var _isCheckboxItem = _interopRequireDefault(require("../utils/is-checkbox-item"
 var _isRadioItem = _interopRequireDefault(require("../utils/is-radio-item"));
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/es2019/dropdown-menu.js

@@ -67,6 +67,7 @@ const DropdownMenu = ({
   shouldFitContainer = false,
   shouldFlip = true,
   shouldRenderToParent = false,
+  returnFocusRef,
   spacing,
   statusLabel,
   testId,
@@ -122,7 +123,16 @@ const DropdownMenu = ({
       // Dropdown can be closed by pressing Escape, Tab or Shift + Tab
       return;
     }
-    if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
+
+    // transfer focus to the element specified by ref
+    // if ref is not provided, use old behavior:
+    // focus on trigger when <Esc> or <Shift+Tab> is pressed
+    if (returnFocusRef) {
+      requestAnimationFrame(() => {
+        var _returnFocusRef$curre;
+        (_returnFocusRef$curre = returnFocusRef.current) === null || _returnFocusRef$curre === void 0 ? void 0 : _returnFocusRef$curre.focus();
+      });
+    } 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();
@@ -134,7 +144,7 @@ const DropdownMenu = ({
       isOpen: newValue,
       event
     });
-  }, [onOpenChange, setLocalIsOpen, itemRef]);
+  }, [itemRef, onOpenChange, returnFocusRef, setLocalIsOpen]);
   const {
     isFocused,
     bindFocus

package/dist/es2019/internal/components/group-title.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { useContext, useEffect, useLayoutEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/esm/dropdown-menu.js

@@ -81,6 +81,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
     shouldFlip = _ref$shouldFlip === void 0 ? true : _ref$shouldFlip,
     _ref$shouldRenderToPa = _ref.shouldRenderToParent,
     shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
+    returnFocusRef = _ref.returnFocusRef,
     spacing = _ref.spacing,
     statusLabel = _ref.statusLabel,
     testId = _ref.testId,
@@ -144,7 +145,16 @@ var DropdownMenu = function DropdownMenu(_ref) {
       // Dropdown can be closed by pressing Escape, Tab or Shift + Tab
       return;
     }
-    if (event.key === 'Tab' && event.shiftKey || event.key === 'Escape') {
+
+    // transfer focus to the element specified by ref
+    // if ref is not provided, use old behavior:
+    // focus on trigger when <Esc> or <Shift+Tab> is pressed
+    if (returnFocusRef) {
+      requestAnimationFrame(function () {
+        var _returnFocusRef$curre;
+        (_returnFocusRef$curre = returnFocusRef.current) === null || _returnFocusRef$curre === void 0 || _returnFocusRef$curre.focus();
+      });
+    } 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();
@@ -156,7 +166,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
       isOpen: newValue,
       event: event
     });
-  }, [onOpenChange, setLocalIsOpen, itemRef]);
+  }, [itemRef, onOpenChange, returnFocusRef, setLocalIsOpen]);
   var _useFocus = useFocus(),
     isFocused = _useFocus.isFocused,
     bindFocus = _useFocus.bindFocus;

package/dist/esm/internal/components/group-title.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { useContext, useEffect, useLayoutEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

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

@@ -9,5 +9,5 @@ import type { DropdownMenuProps } from './types';
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
  */
-declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, spacing, statusLabel, testId, trigger, zIndex, label, }: DropdownMenuProps<T>) => JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, }: DropdownMenuProps<T>) => JSX.Element;
 export default DropdownMenu;

package/dist/types/internal/components/group-title.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 /**
  * __Group title__

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import { type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode, type Ref } from 'react';
+import { type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode, type Ref, type RefObject } from 'react';
 import type { CustomItemComponentProps, CustomItemProps, MenuGroupProps, SectionProps } from '@atlaskit/menu/types';
 import type { ContentProps, TriggerProps } from '@atlaskit/popup/types';
 export type FocusableElement = HTMLAnchorElement | HTMLButtonElement;
@@ -150,6 +150,10 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
      * Provide an accessible label via `aria-label` for assistive technology.
      */
     label?: string;
+    /**
+     * If ref is passed, focus returns to that specific ref element after dropdown dismissed.
+     */
+    returnFocusRef?: RefObject<HTMLElement>;
 }
 type StandardDropdownMenuProps<TriggerElement extends HTMLElement = any> = InternalDropdownMenuProps<TriggerElement> & {
     shouldFitContainer?: false;

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

@@ -9,5 +9,5 @@ import type { DropdownMenuProps } from './types';
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
  */
-declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, spacing, statusLabel, testId, trigger, zIndex, label, }: DropdownMenuProps<T>) => JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, }: DropdownMenuProps<T>) => JSX.Element;
 export default DropdownMenu;

package/dist/types-ts4.5/internal/components/group-title.d.ts

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 /**
  * __Group title__

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

@@ -1,4 +1,4 @@
-import { type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode, type Ref } from 'react';
+import { type KeyboardEvent, type MouseEvent, type ReactElement, type ReactNode, type Ref, type RefObject } from 'react';
 import type { CustomItemComponentProps, CustomItemProps, MenuGroupProps, SectionProps } from '@atlaskit/menu/types';
 import type { ContentProps, TriggerProps } from '@atlaskit/popup/types';
 export type FocusableElement = HTMLAnchorElement | HTMLButtonElement;
@@ -150,6 +150,10 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
      * Provide an accessible label via `aria-label` for assistive technology.
      */
     label?: string;
+    /**
+     * If ref is passed, focus returns to that specific ref element after dropdown dismissed.
+     */
+    returnFocusRef?: RefObject<HTMLElement>;
 }
 type StandardDropdownMenuProps<TriggerElement extends HTMLElement = any> = InternalDropdownMenuProps<TriggerElement> & {
     shouldFitContainer?: false;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "12.14.2",
+	"version": "12.16.0",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -27,17 +27,17 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/button": "^19.0.0",
+		"@atlaskit/button": "^19.1.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/ds-lib": "^2.3.0",
-		"@atlaskit/icon": "^22.6.0",
+		"@atlaskit/icon": "^22.10.0",
 		"@atlaskit/layering": "^0.3.0",
-		"@atlaskit/menu": "^2.8.0",
-		"@atlaskit/popup": "^1.20.0",
-		"@atlaskit/primitives": "^11.0.0",
+		"@atlaskit/menu": "^2.10.0",
+		"@atlaskit/popup": "^1.21.0",
+		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/spinner": "^16.2.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^1.57.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -45,7 +45,7 @@
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ~18.2.0",
-		"react-dom": "^16.8.0"
+		"react-dom": "^16.8.0 || ^17.0.0 || ~18.2.0"
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",