@react-aria/menu 3.19.4 → 3.21.0

package/src/useMenuItem.ts

@@ -11,9 +11,9 @@
  */
 
 import {DOMAttributes, DOMProps, FocusableElement, FocusEvents, HoverEvents, Key, KeyboardEvents, PressEvent, PressEvents, RefObject} from '@react-types/shared';
-import {filterDOMProps, handleLinkClick, mergeProps, useLinkProps, useRouter, useSlotId} from '@react-aria/utils';
+import {filterDOMProps, getEventTarget, handleLinkClick, mergeProps, useLinkProps, useRouter, useSlotId} from '@react-aria/utils';
 import {getItemCount} from '@react-stately/collections';
-import {isFocusVisible, useFocus, useHover, useKeyboard, usePress} from '@react-aria/interactions';
+import {isFocusVisible, setInteractionModality, useFocusable, useHover, useKeyboard, usePress} from '@react-aria/interactions';
 import {menuData} from './utils';
 import {MouseEvent, useRef} from 'react';
 import {SelectionManager} from '@react-stately/selection';
@@ -72,10 +72,13 @@ export interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, K
 
   /**
    * Whether the menu should close when the menu item is selected.
-   * @default true
+   * @deprecated - use shouldCloseOnSelect instead.
    */
   closeOnSelect?: boolean,
 
+  /** Whether the menu should close when the menu item is selected. */
+  shouldCloseOnSelect?: boolean,
+
   /** Whether the menu item is contained in a virtual scrolling menu. */
   isVirtualized?: boolean,
 
@@ -94,6 +97,9 @@ export interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, K
   /** Identifies the menu item's popup element whose contents or presence is controlled by the menu item. */
   'aria-controls'?: string,
 
+  /** Identifies the element(s) that describe the menu item. */
+  'aria-describedby'?: string,
+
   /** Override of the selection manager. By default, `state.selectionManager` is used. */
   selectionManager?: SelectionManager
 }
@@ -109,6 +115,7 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
     id,
     key,
     closeOnSelect,
+    shouldCloseOnSelect,
     isVirtualized,
     'aria-haspopup': hasPopup,
     onPressStart,
@@ -173,7 +180,7 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
     role,
     'aria-label': props['aria-label'],
     'aria-labelledby': labelId,
-    'aria-describedby': [descriptionId, keyboardId].filter(Boolean).join(' ') || undefined,
+    'aria-describedby': [props['aria-describedby'], descriptionId, keyboardId].filter(Boolean).join(' ') || undefined,
     'aria-controls': props['aria-controls'],
     'aria-haspopup': hasPopup,
     'aria-expanded': props['aria-expanded']
@@ -184,7 +191,8 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
   }
 
   if (isVirtualized) {
-    ariaProps['aria-posinset'] = item?.index;
+    let index = Number(item?.index);
+    ariaProps['aria-posinset'] = Number.isNaN(index) ? undefined : index + 1;
     ariaProps['aria-setsize'] = getItemCount(state.collection);
   }
 
@@ -221,8 +229,10 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
       ? interaction.current?.key === 'Enter' || selectionManager.selectionMode === 'none' || selectionManager.isLink(key)
       // Close except if multi-select is enabled.
       : selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key);
-    
-    shouldClose = closeOnSelect ?? shouldClose;
+
+
+    shouldClose = shouldCloseOnSelect ?? closeOnSelect ?? shouldClose;
+
     if (onClose && !isTrigger && shouldClose) {
       onClose();
     }
@@ -279,15 +289,23 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
       switch (e.key) {
         case ' ':
           interaction.current = {pointerType: 'keyboard', key: ' '};
-          (e.target as HTMLElement).click();
+          (getEventTarget(e) as HTMLElement).click();
+
+          // click above sets modality to "virtual", need to set interaction modality back to 'keyboard' so focusSafely calls properly move focus
+          // to the newly opened submenu's first item.
+          setInteractionModality('keyboard');
           break;
         case 'Enter':
           interaction.current = {pointerType: 'keyboard', key: 'Enter'};
 
           // Trigger click unless this is a link. Links trigger click natively.
-          if ((e.target as HTMLElement).tagName !== 'A') {
-            (e.target as HTMLElement).click();
+          if ((getEventTarget(e) as HTMLElement).tagName !== 'A') {
+            (getEventTarget(e) as HTMLElement).click();
           }
+
+          // click above sets modality to "virtual", need to set interaction modality back to 'keyboard' so focusSafely calls properly move focus
+          // to the newly opened submenu's first item.
+          setInteractionModality('keyboard');
           break;
         default:
           if (!isTrigger) {
@@ -301,7 +319,7 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
     onKeyUp
   });
 
-  let {focusProps} = useFocus({onBlur, onFocus, onFocusChange});
+  let {focusableProps} = useFocusable({onBlur, onFocus, onFocusChange}, ref);
   let domProps = filterDOMProps(item?.props);
   delete domProps.id;
   let linkProps = useLinkProps(item?.props);
@@ -312,13 +330,13 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
       ...mergeProps(
         domProps,
         linkProps,
-        isTrigger 
-          ? {onFocus: itemProps.onFocus, 'data-collection': itemProps['data-collection'], 'data-key': itemProps['data-key']} 
+        isTrigger
+          ? {onFocus: itemProps.onFocus, 'data-collection': itemProps['data-collection'], 'data-key': itemProps['data-key']}
           : itemProps,
         pressProps,
         hoverProps,
         keyboardProps,
-        focusProps,
+        focusableProps,
         // Prevent DOM focus from moving on mouse down when using virtual focus or this is a submenu/subdialog trigger.
         data.shouldUseVirtualFocus || isTrigger ? {onMouseDown: e => e.preventDefault()} : undefined,
         isDisabled ? undefined : {onClick}

package/src/useSafelyMouseToSubmenu.ts

@@ -1,7 +1,7 @@
 
+import {nodeContains, useEffectEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {RefObject} from '@react-types/shared';
 import {useEffect, useRef, useState} from 'react';
-import {useEffectEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useInteractionModality} from '@react-aria/interactions';
 
 interface SafelyMouseToSubmenuOptions {
@@ -41,7 +41,7 @@ export function useSafelyMouseToSubmenu(options: SafelyMouseToSubmenuOptions): v
       submenuSide.current = undefined;
     }
   };
-  useResizeObserver({ref: submenuRef, onResize: updateSubmenuRect});
+  useResizeObserver({ref: isOpen ? submenuRef : undefined, onResize: updateSubmenuRect});
 
   let reset = () => {
     setPreventPointerEvents(false);
@@ -148,7 +148,7 @@ export function useSafelyMouseToSubmenu(options: SafelyMouseToSubmenuOptions): v
             // Fire a pointerover event to trigger the menu to close.
             // Wait until pointer-events:none is no longer applied
             let target = document.elementFromPoint(mouseX, mouseY);
-            if (target && menu.contains(target)) {
+            if (target && nodeContains(menu, target)) {
               target.dispatchEvent(new PointerEvent('pointerover', {bubbles: true, cancelable: true}));
             }
           }, 100);

package/src/useSubmenuTrigger.ts

@@ -14,7 +14,7 @@ import {AriaMenuItemProps} from './useMenuItem';
 import {AriaMenuOptions} from './useMenu';
 import type {AriaPopoverProps, OverlayProps} from '@react-aria/overlays';
 import {FocusableElement, FocusStrategy, KeyboardEvent, Node, PressEvent, RefObject} from '@react-types/shared';
-import {focusWithoutScrolling, useEvent, useId, useLayoutEffect} from '@react-aria/utils';
+import {focusWithoutScrolling, getActiveElement, getEventTarget, isFocusWithin, nodeContains, useEvent, useId, useLayoutEffect} from '@react-aria/utils';
 import type {SubmenuTriggerState} from '@react-stately/menu';
 import {useCallback, useRef} from 'react';
 import {useLocale} from '@react-aria/i18n';
@@ -43,7 +43,7 @@ export interface AriaSubmenuTriggerProps {
   shouldUseVirtualFocus?: boolean
 }
 
-interface SubmenuTriggerProps extends Omit<AriaMenuItemProps, 'key'> {
+interface SubmenuTriggerProps extends Omit<AriaMenuItemProps, 'key' | 'onAction'> {
   /** Whether the submenu trigger is in an expanded state. */
   isOpen: boolean
 }
@@ -100,13 +100,13 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
   let submenuKeyDown = (e: KeyboardEvent) => {
     // If focus is not within the menu, assume virtual focus is being used.
     // This means some other input element is also within the popover, so we shouldn't close the menu.
-    if (!e.currentTarget.contains(document.activeElement)) {
+    if (!isFocusWithin(e.currentTarget)) {
       return;
     }
 
     switch (e.key) {
       case 'ArrowLeft':
-        if (direction === 'ltr' && e.currentTarget.contains(e.target as Element)) {
+        if (direction === 'ltr' && nodeContains(e.currentTarget, getEventTarget(e) as Element)) {
           e.preventDefault();
           e.stopPropagation();
           onSubmenuClose();
@@ -116,7 +116,7 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
         }
         break;
       case 'ArrowRight':
-        if (direction === 'rtl' && e.currentTarget.contains(e.target as Element)) {
+        if (direction === 'rtl' && nodeContains(e.currentTarget, getEventTarget(e) as Element)) {
           e.preventDefault();
           e.stopPropagation();
           onSubmenuClose();
@@ -127,7 +127,7 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
         break;
       case 'Escape':
         // TODO: can remove this when we fix collection event leaks
-        if (submenuRef.current?.contains(e.target as Element)) {
+        if (nodeContains(submenuRef.current, getEventTarget(e) as Element)) {
           e.stopPropagation();
           onSubmenuClose();
           if (!shouldUseVirtualFocus && ref.current) {
@@ -159,7 +159,7 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
               onSubmenuOpen('first');
             }
 
-            if (type === 'menu' && !!submenuRef?.current && document.activeElement === ref?.current) {
+            if (type === 'menu' && !!submenuRef?.current && getActiveElement() === ref?.current) {
               focusWithoutScrolling(submenuRef.current);
             }
           } else if (state.isOpen) {
@@ -178,7 +178,7 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
               onSubmenuOpen('first');
             }
 
-            if (type === 'menu' && !!submenuRef?.current && document.activeElement === ref?.current) {
+            if (type === 'menu' && !!submenuRef?.current && getActiveElement() === ref?.current) {
               focusWithoutScrolling(submenuRef.current);
             }
           } else if (state.isOpen) {
@@ -226,7 +226,7 @@ export function useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: Subm
   useEvent(parentMenuRef, 'focusin', (e) => {
     // If we detect focus moved to a different item in the same menu that the currently open submenu trigger is in
     // then close the submenu. This is for a case where the user hovers a root menu item when multiple submenus are open
-    if (state.isOpen && (parentMenuRef.current?.contains(e.target as HTMLElement) && e.target !== ref.current)) {
+    if (state.isOpen && (nodeContains(parentMenuRef.current, getEventTarget(e) as HTMLElement) && getEventTarget(e) !== ref.current)) {
       onSubmenuClose();
     }
   });