@atlaskit/dropdown-menu 12.23.2 → 12.23.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/dropdown-menu
 
+## 12.23.3
+
+### Patch Changes
+
+- [#179984](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/179984)
+  [`08accf7fa1041`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/08accf7fa1041) -
+  Fix keyboard navigation not working when using dropdown menu item as the nested trigger
+
 ## 12.23.2
 
 ### Patch Changes

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

@@ -48,7 +48,9 @@ var DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     returnFocusRef = _ref.returnFocusRef,
     interactionName = _ref.interactionName,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var itemRef = (0, _useRegisterItemWithFocusManager.default)();
+  // if the dropdown item has aria-haspopup, we won't register with focus manager
+  // since it is a nested trigger, we have registered inside dropdown-menu
+  var itemRef = (0, _useRegisterItemWithFocusManager.default)(!!rest['aria-haspopup']);
   var handleItemClick = (0, _react.useCallback)(function (event) {
     if (returnFocusRef !== null && returnFocusRef !== void 0 && returnFocusRef.current) {
       returnFocusRef.current.focus();

package/dist/cjs/internal/hooks/use-register-item-with-focus-manager.js

@@ -5,17 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _focusManager = require("../components/focus-manager");
 // This function is called whenever a MenuItem mounts.
 // The refs stored in the context are used to programmatically
 // control focus on a user navigates using the keyboard.
 function useRegisterItemWithFocusManager() {
+  var hasPopup = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
     registerRef = _useContext.registerRef;
   var itemRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    return registerRef(itemRef);
-  }, [registerRef]);
+    if (hasPopup && (0, _platformFeatureFlags.fg)('select-avoid-duplicated-registered-ref')) {
+      return;
+    }
+    registerRef(itemRef);
+  }, [registerRef, hasPopup]);
   return itemRef;
 }
 var _default = exports.default = useRegisterItemWithFocusManager;

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

@@ -9,8 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _keycodes = require("@atlaskit/ds-lib/keycodes");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useGeneratedId = require("./use-generated-id");
-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);
+var actionMap = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _keycodes.KEY_DOWN, 'next'), _keycodes.KEY_UP, 'prev'), _keycodes.KEY_HOME, 'first'), _keycodes.KEY_END, 'last');
 
 /**
  * `currentFocusedIdx + 1` will not work if the next focusable element

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

@@ -35,7 +35,9 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef(({
   interactionName,
   ...rest
 }, ref) => {
-  const itemRef = useRegisterItemWithFocusManager();
+  // if the dropdown item has aria-haspopup, we won't register with focus manager
+  // since it is a nested trigger, we have registered inside dropdown-menu
+  const itemRef = useRegisterItemWithFocusManager(!!rest['aria-haspopup']);
   const handleItemClick = useCallback(event => {
     if (returnFocusRef !== null && returnFocusRef !== void 0 && returnFocusRef.current) {
       returnFocusRef.current.focus();

package/dist/es2019/internal/hooks/use-register-item-with-focus-manager.js

@@ -1,14 +1,20 @@
 import { useContext, useEffect, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { FocusManagerContext } from '../components/focus-manager';
 // This function is called whenever a MenuItem mounts.
 // The refs stored in the context are used to programmatically
 // control focus on a user navigates using the keyboard.
-function useRegisterItemWithFocusManager() {
+function useRegisterItemWithFocusManager(hasPopup = false) {
   const {
     registerRef
   } = useContext(FocusManagerContext);
   const itemRef = useRef(null);
-  useEffect(() => registerRef(itemRef), [registerRef]);
+  useEffect(() => {
+    if (hasPopup && fg('select-avoid-duplicated-registered-ref')) {
+      return;
+    }
+    registerRef(itemRef);
+  }, [registerRef, hasPopup]);
   return itemRef;
 }
 export default useRegisterItemWithFocusManager;

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

@@ -38,7 +38,9 @@ var DropdownMenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     returnFocusRef = _ref.returnFocusRef,
     interactionName = _ref.interactionName,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var itemRef = useRegisterItemWithFocusManager();
+  // if the dropdown item has aria-haspopup, we won't register with focus manager
+  // since it is a nested trigger, we have registered inside dropdown-menu
+  var itemRef = useRegisterItemWithFocusManager(!!rest['aria-haspopup']);
   var handleItemClick = useCallback(function (event) {
     if (returnFocusRef !== null && returnFocusRef !== void 0 && returnFocusRef.current) {
       returnFocusRef.current.focus();

package/dist/esm/internal/hooks/use-register-item-with-focus-manager.js

@@ -1,15 +1,20 @@
 import { useContext, useEffect, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { FocusManagerContext } from '../components/focus-manager';
 // This function is called whenever a MenuItem mounts.
 // The refs stored in the context are used to programmatically
 // control focus on a user navigates using the keyboard.
 function useRegisterItemWithFocusManager() {
+  var hasPopup = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var _useContext = useContext(FocusManagerContext),
     registerRef = _useContext.registerRef;
   var itemRef = useRef(null);
   useEffect(function () {
-    return registerRef(itemRef);
-  }, [registerRef]);
+    if (hasPopup && fg('select-avoid-duplicated-registered-ref')) {
+      return;
+    }
+    registerRef(itemRef);
+  }, [registerRef, hasPopup]);
   return itemRef;
 }
 export default useRegisterItemWithFocusManager;

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

@@ -1,9 +1,8 @@
 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 { fg } from '@atlaskit/platform-feature-flags';
 import { PREFIX } from './use-generated-id';
-var actionMap = (_actionMap = {}, _defineProperty(_actionMap, KEY_DOWN, 'next'), _defineProperty(_actionMap, KEY_UP, 'prev'), _defineProperty(_actionMap, KEY_HOME, 'first'), _defineProperty(_actionMap, KEY_END, 'last'), _actionMap);
+var actionMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, KEY_DOWN, 'next'), KEY_UP, 'prev'), KEY_HOME, 'first'), KEY_END, 'last');
 
 /**
  * `currentFocusedIdx + 1` will not work if the next focusable element

package/dist/types/internal/hooks/use-register-item-with-focus-manager.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare function useRegisterItemWithFocusManager(): import("react").MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
+declare function useRegisterItemWithFocusManager(hasPopup?: boolean): import("react").MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
 export default useRegisterItemWithFocusManager;

package/dist/types/types.d.ts

@@ -258,6 +258,10 @@ export interface DropdownItemProps {
      * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
     interactionName?: string;
+    /**
+     * An optional boolean value used to indicate if the dropdown item has popup or not.
+     */
+    'aria-haspopup'?: boolean | 'dialog';
 }
 export interface DropdownItemCheckboxProps {
     /**

package/dist/types-ts4.5/internal/hooks/use-register-item-with-focus-manager.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare function useRegisterItemWithFocusManager(): import("react").MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
+declare function useRegisterItemWithFocusManager(hasPopup?: boolean): import("react").MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
 export default useRegisterItemWithFocusManager;

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

@@ -258,6 +258,10 @@ export interface DropdownItemProps {
      * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
     interactionName?: string;
+    /**
+     * An optional boolean value used to indicate if the dropdown item has popup or not.
+     */
+    'aria-haspopup'?: boolean | 'dialog';
 }
 export interface DropdownItemCheckboxProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "12.23.2",
+	"version": "12.23.3",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.4.0",
+		"@atlaskit/tokens": "^2.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0"
@@ -51,7 +51,7 @@
 		"@af/visual-regression": "*",
 		"@atlaskit/app-provider": "^1.4.0",
 		"@atlaskit/modal-dialog": "^12.18.0",
-		"@atlaskit/toggle": "^13.4.0",
+		"@atlaskit/toggle": "^14.0.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@testing-library/dom": "^10.1.0",
@@ -83,6 +83,17 @@
 		},
 		"platform-icon-control-migration": {
 			"type": "boolean"
+		},
+		"select-avoid-duplicated-registered-ref": {
+			"type": "boolean"
+		},
+		"sibling-dropdown-close-issue": {
+			"type": "boolean",
+			"referenceOnly": true
+		},
+		"design-system-closed-all-when-click-outside": {
+			"type": "boolean",
+			"referenceOnly": true
 		}
 	},
 	"techstack": {