@react-aria/menu 3.15.5 → 3.16.0

package/src/useMenuItem.ts

@@ -15,6 +15,7 @@ import {filterDOMProps, mergeProps, useLinkProps, useRouter, useSlotId} from '@r
 import {getItemCount} from '@react-stately/collections';
 import {isFocusVisible, useFocus, useHover, useKeyboard, usePress} from '@react-aria/interactions';
 import {menuData} from './useMenu';
+import {SelectionManager} from '@react-stately/selection';
 import {TreeState} from '@react-stately/tree';
 import {useSelectableItem} from '@react-aria/selection';
 
@@ -58,7 +59,7 @@ export interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, K
   'aria-label'?: string,
 
   /** The unique key for the menu item. */
-  key?: Key,
+  key: Key,
 
   /**
    * Handler that is called when the menu should close after selecting an item.
@@ -88,7 +89,10 @@ export interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, K
   'aria-expanded'?: boolean | 'true' | 'false',
 
   /** Identifies the menu item's popup element whose contents or presence is controlled by the menu item. */
-  'aria-controls'?: string
+  'aria-controls'?: string,
+
+  /** Override of the selection manager. By default, `state.selectionManager` is used. */
+  selectionManager?: SelectionManager
 }
 
 /**
@@ -116,13 +120,15 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
     onKeyUp,
     onFocus,
     onFocusChange,
-    onBlur
+    onBlur,
+    selectionManager = state.selectionManager
   } = props;
 
   let isTrigger = !!hasPopup;
-  let isDisabled = props.isDisabled ?? state.selectionManager.isDisabled(key);
-  let isSelected = props.isSelected ?? state.selectionManager.isSelected(key);
-  let data = menuData.get(state);
+  let isTriggerExpanded = isTrigger && props['aria-expanded'] === 'true';
+  let isDisabled = props.isDisabled ?? selectionManager.isDisabled(key);
+  let isSelected = props.isSelected ?? selectionManager.isSelected(key);
+  let data = menuData.get(state)!;
   let item = state.collection.getItem(key);
   let onClose = props.onClose || data.onClose;
   let router = useRouter();
@@ -143,16 +149,16 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
       onAction(key);
     }
 
-    if (e.target instanceof HTMLAnchorElement) {
+    if (e.target instanceof HTMLAnchorElement && item) {
       router.open(e.target, e, item.props.href, item.props.routerOptions as RouterOptions);
     }
   };
 
   let role = 'menuitem';
   if (!isTrigger) {
-    if (state.selectionManager.selectionMode === 'single') {
+    if (selectionManager.selectionMode === 'single') {
       role = 'menuitemradio';
-    } else if (state.selectionManager.selectionMode === 'multiple') {
+    } else if (selectionManager.selectionMode === 'multiple') {
       role = 'menuitemcheckbox';
     }
   }
@@ -173,7 +179,7 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
     'aria-expanded': props['aria-expanded']
   };
 
-  if (state.selectionManager.selectionMode !== 'none' && !isTrigger) {
+  if (selectionManager.selectionMode !== 'none' && !isTrigger) {
     ariaProps['aria-checked'] = isSelected;
   }
 
@@ -196,7 +202,7 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
 
       // Pressing a menu item should close by default in single selection mode but not multiple
       // selection mode, except if overridden by the closeOnSelect prop.
-      if (!isTrigger && onClose && (closeOnSelect ?? (state.selectionManager.selectionMode !== 'multiple' || state.selectionManager.isLink(key)))) {
+      if (!isTrigger && onClose && (closeOnSelect ?? (selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key)))) {
         onClose();
       }
     }
@@ -205,7 +211,7 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
   };
 
   let {itemProps, isFocused} = useSelectableItem({
-    selectionManager: state.selectionManager,
+    selectionManager: selectionManager,
     key,
     ref,
     shouldSelectOnPressUp: true,
@@ -228,9 +234,10 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
   let {hoverProps} = useHover({
     isDisabled,
     onHoverStart(e) {
-      if (!isFocusVisible()) {
-        state.selectionManager.setFocused(true);
-        state.selectionManager.setFocusedKey(key);
+      // Hovering over an already expanded sub dialog trigger should keep focus in the dialog.
+      if (!isFocusVisible() && !(isTriggerExpanded && hasPopup === 'dialog')) {
+        selectionManager.setFocused(true);
+        selectionManager.setFocusedKey(key);
       }
       hoverStartProp?.(e);
     },
@@ -249,7 +256,7 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
 
       switch (e.key) {
         case ' ':
-          if (!isDisabled && state.selectionManager.selectionMode === 'none' && !isTrigger && closeOnSelect !== false && onClose) {
+          if (!isDisabled && selectionManager.selectionMode === 'none' && !isTrigger && closeOnSelect !== false && onClose) {
             onClose();
           }
           break;
@@ -272,15 +279,16 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
   });
 
   let {focusProps} = useFocus({onBlur, onFocus, onFocusChange});
-  let domProps = filterDOMProps(item.props);
+  let domProps = filterDOMProps(item?.props);
   delete domProps.id;
-  let linkProps = useLinkProps(item.props);
+  let linkProps = useLinkProps(item?.props);
 
   return {
     menuItemProps: {
       ...ariaProps,
       ...mergeProps(domProps, linkProps, isTrigger ? {onFocus: itemProps.onFocus, 'data-key': itemProps['data-key']} : itemProps, pressProps, hoverProps, keyboardProps, focusProps),
-      tabIndex: itemProps.tabIndex != null ? -1 : undefined
+      // If a submenu is expanded, set the tabIndex to -1 so that shift tabbing goes out of the menu instead of the parent menu item.
+      tabIndex: itemProps.tabIndex != null && isTriggerExpanded ? -1 : itemProps.tabIndex
     },
     labelProps: {
       id: labelId

package/src/useMenuTrigger.ts

@@ -47,7 +47,7 @@ export interface MenuTriggerAria<T> {
  */
 export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTriggerState, ref: RefObject<Element | null>): MenuTriggerAria<T> {
   let {
-    type = 'menu' as AriaMenuTriggerProps['type'],
+    type = 'menu',
     isDisabled,
     trigger = 'press'
   } = props;
@@ -128,6 +128,7 @@ export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTrigge
   delete triggerProps.onPress;
 
   return {
+    // @ts-ignore - TODO we pass out both DOMAttributes AND AriaButtonProps, but useButton will discard the longPress event handlers, it's only through PressResponder magic that this works for RSP and RAC. it does not work in aria examples
     menuTriggerProps: {
       ...triggerProps,
       ...(trigger === 'press' ? pressProps : longPressProps),

package/src/useSafelyMouseToSubmenu.ts

@@ -63,7 +63,7 @@ export function useSafelyMouseToSubmenu(options: SafelyMouseToSubmenuOptions) {
     let submenu = submenuRef.current;
     let menu = menuRef.current;
 
-    if (isDisabled || !submenu || !isOpen || modality !== 'pointer') {
+    if (isDisabled || !submenu || !isOpen || modality !== 'pointer' || !menu) {
       reset();
       return;
     }

package/src/useSubmenuTrigger.ts

@@ -41,7 +41,7 @@ export interface AriaSubmenuTriggerProps {
   delay?: number
 }
 
-interface SubmenuTriggerProps extends AriaMenuItemProps {
+interface SubmenuTriggerProps extends Omit<AriaMenuItemProps, 'key'> {
   /** Whether the submenu trigger is in an expanded state. */
   isOpen: boolean
 }
@@ -101,14 +101,14 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
         if (direction === 'ltr' && e.currentTarget.contains(e.target as Element)) {
           e.stopPropagation();
           onSubmenuClose();
-          ref.current.focus();
+          ref.current?.focus();
         }
         break;
       case 'ArrowRight':
         if (direction === 'rtl' && e.currentTarget.contains(e.target as Element)) {
           e.stopPropagation();
           onSubmenuClose();
-          ref.current.focus();
+          ref.current?.focus();
         }
         break;
       case 'Escape':
@@ -124,7 +124,7 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
     submenuLevel: state.submenuLevel,
     ...(type === 'menu' && {
       onClose: state.closeAll,
-      autoFocus: state.focusStrategy,
+      autoFocus: state.focusStrategy ?? undefined,
       onKeyDown: submenuKeyDown
     })
   };
@@ -205,7 +205,7 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
   };
 
   let onBlur = (e) => {
-    if (state.isOpen && parentMenuRef.current.contains(e.relatedTarget)) {
+    if (state.isOpen && parentMenuRef.current?.contains(e.relatedTarget)) {
       onSubmenuClose();
     }
   };