@atlaskit/dropdown-menu 16.5.2 → 16.6.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/dropdown-menu
 
+## 16.6.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 16.6.0
+
+### Minor Changes
+
+- [`0b9ac729e9180`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0b9ac729e9180) -
+  [ux] Nested dropdown menus can now navigate throguh left and right arrow keys.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.5.2
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -158,13 +158,13 @@ var DropdownMenu = function DropdownMenu(_ref) {
   }, [isLocalOpen, setLocalIsOpen, onOpenChange, itemRef]);
   var handleOnClose = (0, _react.useCallback)(function (event, currentLevel) {
     var _event$target$closest, _event$target;
-    var isTabOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape');
+    var isTabLeftOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape' || event.key === _keycodes.KEY_LEFT);
 
-    // Stop propagation on ESCAPE key if shouldPreventEscapePropagation is true
-    if (shouldPreventEscapePropagation && isKeyboardEvent(event) && event.key === 'Escape') {
+    // Stop propagation on ESCAPE or Left arrow if shouldPreventEscapePropagation is true
+    if (shouldPreventEscapePropagation && isKeyboardEvent(event) && (event.key === 'Escape' || event.key === _keycodes.KEY_LEFT)) {
       event.stopPropagation();
     }
-    if (event !== null && !isTabOrEscapeKey && event.target instanceof HTMLElement && (_event$target$closest = (_event$target = event.target).closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, "[id^=".concat(_useGeneratedId.PREFIX, "] [aria-haspopup]"))) {
+    if (event !== null && !isTabLeftOrEscapeKey && event.target instanceof HTMLElement && (_event$target$closest = (_event$target = 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
@@ -188,7 +188,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
         var _returnFocusRef$curre;
         (_returnFocusRef$curre = returnFocusRef.current) === null || _returnFocusRef$curre === void 0 || _returnFocusRef$curre.focus();
       });
-    } else if (isKeyboardEvent(event) && (event.key === 'Tab' && event.shiftKey || event.key === 'Escape')) {
+    } else if (isKeyboardEvent(event) && (event.key === 'Tab' && event.shiftKey || event.key === 'Escape' || event.key === _keycodes.KEY_LEFT)) {
       requestAnimationFrame(function () {
         var _itemRef$current3;
         (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 || _itemRef$current3.focus();

package/dist/cjs/internal/components/focus-manager.js

@@ -64,7 +64,10 @@ var FocusManager = function FocusManager(_ref) {
   // Updating register ref on force reload will cause `useRegisterItemWithFocusManager` to re-register
   [refresh]);
   var _useLayering = (0, _layering.useLayering)(),
-    isLayerDisabled = _useLayering.isLayerDisabled;
+    isLayerDisabled = _useLayering.isLayerDisabled,
+    currentLevel = _useLayering.currentLevel;
+  // Root menu (from a button) is at level 1; first submenu is at level 2. ARIA: Left only closes submenus.
+  var isNestedMenu = currentLevel > 1;
   // Intentionally rebinding on each render
   (0, _react.useEffect)(function () {
     if (registerMode.current === 'ordered') {
@@ -75,9 +78,9 @@ var FocusManager = function FocusManager(_ref) {
   (0, _react.useEffect)(function () {
     return (0, _bindEventListener.bind)(window, {
       type: 'keydown',
-      listener: (0, _handleFocus.default)(menuItemRefs, isLayerDisabled, onClose)
+      listener: (0, _handleFocus.default)(menuItemRefs, isLayerDisabled, onClose, isNestedMenu)
     });
-  }, [isLayerDisabled, onClose]);
+  }, [isLayerDisabled, onClose, isNestedMenu]);
   var contextValue = {
     menuItemRefs: menuItemRefs.current,
     registerRef: registerRef

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

@@ -7,6 +7,8 @@ exports.default = void 0;
 var _react = require("react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _focusManager = require("../components/focus-manager");
+// eslint-disable-next-line sort-imports
+
 // 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.

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

@@ -55,6 +55,7 @@ var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocu
   return;
 };
 function handleFocus(refs, isLayerDisabled, onClose) {
+  var isNestedMenu = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   return function (e) {
     var _refs$current;
     var currentRefs = (_refs$current = refs.current) !== null && _refs$current !== void 0 ? _refs$current : [];
@@ -87,6 +88,24 @@ function handleFocus(refs, isLayerDisabled, onClose) {
         return;
       }
     }
+    // Left arrow: only in a submenu — close and return focus to parent. No navigation within menu.
+    if (e.key === _keycodes.KEY_LEFT) {
+      e.preventDefault();
+      if (isNestedMenu) {
+        onClose(e);
+      }
+      return;
+    }
+
+    // Right arrow: only when item has submenu — open it. No navigation within menu.
+    if (e.key === _keycodes.KEY_RIGHT) {
+      var activeElement = document.activeElement;
+      if (activeElement instanceof HTMLElement && (activeElement.getAttribute('aria-haspopup') === 'true' || activeElement.getAttribute('aria-haspopup') === 'menu')) {
+        e.preventDefault();
+        activeElement.click();
+      }
+      return;
+    }
     var action = actionMap[e.key];
     switch (action) {
       case 'next':

package/dist/es2019/dropdown-menu.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 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';
+import { KEY_DOWN, KEY_ENTER, KEY_LEFT, KEY_SPACE, KEY_TAB } from '@atlaskit/ds-lib/keycodes';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
 import useControlledState from '@atlaskit/ds-lib/use-controlled';
@@ -128,13 +128,13 @@ const DropdownMenu = ({
   }, [isLocalOpen, setLocalIsOpen, onOpenChange, itemRef]);
   const handleOnClose = useCallback((event, currentLevel) => {
     var _event$target$closest, _event$target;
-    const isTabOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape');
+    const isTabLeftOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape' || event.key === KEY_LEFT);
 
-    // Stop propagation on ESCAPE key if shouldPreventEscapePropagation is true
-    if (shouldPreventEscapePropagation && isKeyboardEvent(event) && event.key === 'Escape') {
+    // Stop propagation on ESCAPE or Left arrow if shouldPreventEscapePropagation is true
+    if (shouldPreventEscapePropagation && isKeyboardEvent(event) && (event.key === 'Escape' || event.key === KEY_LEFT)) {
       event.stopPropagation();
     }
-    if (event !== null && !isTabOrEscapeKey && event.target instanceof HTMLElement && (_event$target$closest = (_event$target = event.target).closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, `[id^=${PREFIX}] [aria-haspopup]`)) {
+    if (event !== null && !isTabLeftOrEscapeKey && event.target instanceof HTMLElement && (_event$target$closest = (_event$target = 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
@@ -158,7 +158,7 @@ const DropdownMenu = ({
         var _returnFocusRef$curre;
         (_returnFocusRef$curre = returnFocusRef.current) === null || _returnFocusRef$curre === void 0 ? void 0 : _returnFocusRef$curre.focus();
       });
-    } else if (isKeyboardEvent(event) && (event.key === 'Tab' && event.shiftKey || event.key === 'Escape')) {
+    } else if (isKeyboardEvent(event) && (event.key === 'Tab' && event.shiftKey || event.key === 'Escape' || event.key === KEY_LEFT)) {
       requestAnimationFrame(() => {
         var _itemRef$current3;
         (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 ? void 0 : _itemRef$current3.focus();

package/dist/es2019/internal/components/focus-manager.js

@@ -53,8 +53,11 @@ const FocusManager = ({
   // Updating register ref on force reload will cause `useRegisterItemWithFocusManager` to re-register
   [refresh]);
   const {
-    isLayerDisabled
+    isLayerDisabled,
+    currentLevel
   } = useLayering();
+  // Root menu (from a button) is at level 1; first submenu is at level 2. ARIA: Left only closes submenus.
+  const isNestedMenu = currentLevel > 1;
   // Intentionally rebinding on each render
   useEffect(() => {
     if (registerMode.current === 'ordered') {
@@ -64,8 +67,8 @@ const FocusManager = ({
   });
   useEffect(() => bind(window, {
     type: 'keydown',
-    listener: handleFocus(menuItemRefs, isLayerDisabled, onClose)
-  }), [isLayerDisabled, onClose]);
+    listener: handleFocus(menuItemRefs, isLayerDisabled, onClose, isNestedMenu)
+  }), [isLayerDisabled, onClose, isNestedMenu]);
   const contextValue = {
     menuItemRefs: menuItemRefs.current,
     registerRef

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line sort-imports
 import { useContext, useEffect, useRef } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { FocusManagerContext } from '../components/focus-manager';

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

@@ -1,4 +1,4 @@
-import { KEY_DOWN, KEY_END, KEY_HOME, KEY_TAB, KEY_UP } from '@atlaskit/ds-lib/keycodes';
+import { KEY_DOWN, KEY_END, KEY_HOME, KEY_LEFT, KEY_RIGHT, KEY_TAB, KEY_UP } from '@atlaskit/ds-lib/keycodes';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { PREFIX } from './use-generated-id';
 const actionMap = {
@@ -55,7 +55,7 @@ const getPrevFocusableElement = (refs, currentFocusedIdx) => {
   }
   return;
 };
-export default function handleFocus(refs, isLayerDisabled, onClose) {
+export default function handleFocus(refs, isLayerDisabled, onClose, isNestedMenu = false) {
   return e => {
     var _refs$current;
     const currentRefs = (_refs$current = refs.current) !== null && _refs$current !== void 0 ? _refs$current : [];
@@ -89,6 +89,24 @@ export default function handleFocus(refs, isLayerDisabled, onClose) {
         return;
       }
     }
+    // Left arrow: only in a submenu — close and return focus to parent. No navigation within menu.
+    if (e.key === KEY_LEFT) {
+      e.preventDefault();
+      if (isNestedMenu) {
+        onClose(e);
+      }
+      return;
+    }
+
+    // Right arrow: only when item has submenu — open it. No navigation within menu.
+    if (e.key === KEY_RIGHT) {
+      const activeElement = document.activeElement;
+      if (activeElement instanceof HTMLElement && (activeElement.getAttribute('aria-haspopup') === 'true' || activeElement.getAttribute('aria-haspopup') === 'menu')) {
+        e.preventDefault();
+        activeElement.click();
+      }
+      return;
+    }
     const action = actionMap[e.key];
     switch (action) {
       case 'next':

package/dist/esm/dropdown-menu.js

@@ -8,7 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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';
+import { KEY_DOWN, KEY_ENTER, KEY_LEFT, KEY_SPACE, KEY_TAB } from '@atlaskit/ds-lib/keycodes';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
 import useControlledState from '@atlaskit/ds-lib/use-controlled';
@@ -150,13 +150,13 @@ var DropdownMenu = function DropdownMenu(_ref) {
   }, [isLocalOpen, setLocalIsOpen, onOpenChange, itemRef]);
   var handleOnClose = useCallback(function (event, currentLevel) {
     var _event$target$closest, _event$target;
-    var isTabOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape');
+    var isTabLeftOrEscapeKey = isKeyboardEvent(event) && (event.key === 'Tab' || event.key === 'Escape' || event.key === KEY_LEFT);
 
-    // Stop propagation on ESCAPE key if shouldPreventEscapePropagation is true
-    if (shouldPreventEscapePropagation && isKeyboardEvent(event) && event.key === 'Escape') {
+    // Stop propagation on ESCAPE or Left arrow if shouldPreventEscapePropagation is true
+    if (shouldPreventEscapePropagation && isKeyboardEvent(event) && (event.key === 'Escape' || event.key === KEY_LEFT)) {
       event.stopPropagation();
     }
-    if (event !== null && !isTabOrEscapeKey && event.target instanceof HTMLElement && (_event$target$closest = (_event$target = event.target).closest) !== null && _event$target$closest !== void 0 && _event$target$closest.call(_event$target, "[id^=".concat(PREFIX, "] [aria-haspopup]"))) {
+    if (event !== null && !isTabLeftOrEscapeKey && event.target instanceof HTMLElement && (_event$target$closest = (_event$target = 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
@@ -180,7 +180,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
         var _returnFocusRef$curre;
         (_returnFocusRef$curre = returnFocusRef.current) === null || _returnFocusRef$curre === void 0 || _returnFocusRef$curre.focus();
       });
-    } else if (isKeyboardEvent(event) && (event.key === 'Tab' && event.shiftKey || event.key === 'Escape')) {
+    } else if (isKeyboardEvent(event) && (event.key === 'Tab' && event.shiftKey || event.key === 'Escape' || event.key === KEY_LEFT)) {
       requestAnimationFrame(function () {
         var _itemRef$current3;
         (_itemRef$current3 = itemRef.current) === null || _itemRef$current3 === void 0 || _itemRef$current3.focus();

package/dist/esm/internal/components/focus-manager.js

@@ -56,7 +56,10 @@ var FocusManager = function FocusManager(_ref) {
   // Updating register ref on force reload will cause `useRegisterItemWithFocusManager` to re-register
   [refresh]);
   var _useLayering = useLayering(),
-    isLayerDisabled = _useLayering.isLayerDisabled;
+    isLayerDisabled = _useLayering.isLayerDisabled,
+    currentLevel = _useLayering.currentLevel;
+  // Root menu (from a button) is at level 1; first submenu is at level 2. ARIA: Left only closes submenus.
+  var isNestedMenu = currentLevel > 1;
   // Intentionally rebinding on each render
   useEffect(function () {
     if (registerMode.current === 'ordered') {
@@ -67,9 +70,9 @@ var FocusManager = function FocusManager(_ref) {
   useEffect(function () {
     return bind(window, {
       type: 'keydown',
-      listener: handleFocus(menuItemRefs, isLayerDisabled, onClose)
+      listener: handleFocus(menuItemRefs, isLayerDisabled, onClose, isNestedMenu)
     });
-  }, [isLayerDisabled, onClose]);
+  }, [isLayerDisabled, onClose, isNestedMenu]);
   var contextValue = {
     menuItemRefs: menuItemRefs.current,
     registerRef: registerRef

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line sort-imports
 import { useContext, useEffect, useRef } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { FocusManagerContext } from '../components/focus-manager';

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { KEY_DOWN, KEY_END, KEY_HOME, KEY_TAB, KEY_UP } from '@atlaskit/ds-lib/keycodes';
+import { KEY_DOWN, KEY_END, KEY_HOME, KEY_LEFT, KEY_RIGHT, KEY_TAB, KEY_UP } from '@atlaskit/ds-lib/keycodes';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { PREFIX } from './use-generated-id';
 var actionMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, KEY_DOWN, 'next'), KEY_UP, 'prev'), KEY_HOME, 'first'), KEY_END, 'last');
@@ -48,6 +48,7 @@ var getPrevFocusableElement = function getPrevFocusableElement(refs, currentFocu
   return;
 };
 export default function handleFocus(refs, isLayerDisabled, onClose) {
+  var isNestedMenu = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   return function (e) {
     var _refs$current;
     var currentRefs = (_refs$current = refs.current) !== null && _refs$current !== void 0 ? _refs$current : [];
@@ -80,6 +81,24 @@ export default function handleFocus(refs, isLayerDisabled, onClose) {
         return;
       }
     }
+    // Left arrow: only in a submenu — close and return focus to parent. No navigation within menu.
+    if (e.key === KEY_LEFT) {
+      e.preventDefault();
+      if (isNestedMenu) {
+        onClose(e);
+      }
+      return;
+    }
+
+    // Right arrow: only when item has submenu — open it. No navigation within menu.
+    if (e.key === KEY_RIGHT) {
+      var activeElement = document.activeElement;
+      if (activeElement instanceof HTMLElement && (activeElement.getAttribute('aria-haspopup') === 'true' || activeElement.getAttribute('aria-haspopup') === 'menu')) {
+        e.preventDefault();
+        activeElement.click();
+      }
+      return;
+    }
     var action = actionMap[e.key];
     switch (action) {
       case 'next':

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

@@ -1,2 +1,3 @@
-declare function useRegisterItemWithFocusManager(hasPopup?: boolean): import("react").MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
+import { type MutableRefObject } from 'react';
+declare function useRegisterItemWithFocusManager(hasPopup?: boolean): MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
 export default useRegisterItemWithFocusManager;

package/dist/types/internal/utils/handle-focus.d.ts

@@ -1,3 +1,3 @@
 import { type RefObject } from 'react';
 import { type FocusableElementRef } from '../../types';
-export default function handleFocus(refs: RefObject<FocusableElementRef[]>, isLayerDisabled: () => boolean, onClose: (e: KeyboardEvent) => void): (e: KeyboardEvent) => void;
+export default function handleFocus(refs: RefObject<FocusableElementRef[]>, isLayerDisabled: () => boolean, onClose: (e: KeyboardEvent) => void, isNestedMenu?: boolean): (e: KeyboardEvent) => void;

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

@@ -1,2 +1,3 @@
-declare function useRegisterItemWithFocusManager(hasPopup?: boolean): import("react").MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
+import { type MutableRefObject } from 'react';
+declare function useRegisterItemWithFocusManager(hasPopup?: boolean): MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
 export default useRegisterItemWithFocusManager;

package/dist/types-ts4.5/internal/utils/handle-focus.d.ts

@@ -1,3 +1,3 @@
 import { type RefObject } from 'react';
 import { type FocusableElementRef } from '../../types';
-export default function handleFocus(refs: RefObject<FocusableElementRef[]>, isLayerDisabled: () => boolean, onClose: (e: KeyboardEvent) => void): (e: KeyboardEvent) => void;
+export default function handleFocus(refs: RefObject<FocusableElementRef[]>, isLayerDisabled: () => boolean, onClose: (e: KeyboardEvent) => void, isNestedMenu?: boolean): (e: KeyboardEvent) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "16.5.2",
+	"version": "16.6.1",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -26,7 +26,7 @@
 	"dependencies": {
 		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/ds-lib": "^5.3.0",
+		"@atlaskit/ds-lib": "^6.0.0",
 		"@atlaskit/icon": "^32.0.0",
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/menu": "^8.4.0",
@@ -35,7 +35,7 @@
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/tokens": "^11.1.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
@@ -56,7 +56,7 @@
 		"@atlaskit/form": "^15.4.0",
 		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/link": "^3.3.0",
-		"@atlaskit/lozenge": "^13.4.0",
+		"@atlaskit/lozenge": "^13.5.0",
 		"@atlaskit/modal-dialog": "^14.11.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/textfield": "^8.2.0",