@react-aria/menu - npm Package Compare versions

Comparing version 3.0.0-nightly-7aa6265a2-241112 to 3.0.0-nightly-7eae25e12-241205

dist/types.d.ts

@@ -82,3 +82,3 @@ import { AriaMenuProps, MenuTriggerType } from "@react-types/menu";
     /** The unique key for the menu item. */
-    key?: Key;
+    key: Key;
     /**
@@ -157,3 +157,3 @@ * Handler that is called when the menu should close after selecting an item.
 }
-interface SubmenuTriggerProps extends AriaMenuItemProps {
+interface SubmenuTriggerProps extends Omit<AriaMenuItemProps, 'key'> {
     /** Whether the submenu trigger is in an expanded state. */
@@ -160,0 +160,0 @@ isOpen: boolean;

dist/useMenu.main.js

@@ -51,4 +51,5 @@ var $6CumN$reactariautils = require("@react-aria/utils");
             onKeyDown: (e)=>{
+                var _listProps_onKeyDown;
                 // don't clear the menu selected keys if the user is presses escape since escape closes the menu
-                if (e.key !== 'Escape') listProps.onKeyDown(e);
+                if (e.key !== 'Escape') (_listProps_onKeyDown = listProps.onKeyDown) === null || _listProps_onKeyDown === void 0 ? void 0 : _listProps_onKeyDown.call(listProps, e);
             }
@@ -55,0 +56,0 @@ })

dist/useMenu.module.js

@@ -44,4 +44,5 @@ import {filterDOMProps as $ieN2F$filterDOMProps, mergeProps as $ieN2F$mergeProps} from "@react-aria/utils";
             onKeyDown: (e)=>{
+                var _listProps_onKeyDown;
                 // don't clear the menu selected keys if the user is presses escape since escape closes the menu
-                if (e.key !== 'Escape') listProps.onKeyDown(e);
+                if (e.key !== 'Escape') (_listProps_onKeyDown = listProps.onKeyDown) === null || _listProps_onKeyDown === void 0 ? void 0 : _listProps_onKeyDown.call(listProps, e);
             }
@@ -48,0 +49,0 @@ })

dist/useMenuItem.main.js

@@ -29,4 +29,5 @@ var $a3815f0132802737$exports = require("./useMenu.main.js");
 function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
-    let { id: id, key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress: onPress, onPressChange: onPressChange, onPressEnd: onPressEnd, onHoverStart: hoverStartProp, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onFocusChange: onFocusChange, onBlur: onBlur, selectionManager: selectionManager = state.selectionManager } = props;
+    let { id: id, key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress: pressProp, onPressChange: onPressChange, onPressEnd: onPressEnd, onHoverStart: hoverStartProp, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onFocusChange: onFocusChange, onBlur: onBlur, selectionManager: selectionManager = state.selectionManager } = props;
     let isTrigger = !!hasPopup;
+    let isTriggerExpanded = isTrigger && props['aria-expanded'] === 'true';
     var _props_isDisabled;
@@ -50,3 +51,3 @@ let isDisabled = (_props_isDisabled = props.isDisabled) !== null && _props_isDisabled !== void 0 ? _props_isDisabled : selectionManager.isDisabled(key);
         }
-        if (e.target instanceof HTMLAnchorElement) router.open(e.target, e, item.props.href, item.props.routerOptions);
+        if (e.target instanceof HTMLAnchorElement && item) router.open(e.target, e, item.props.href, item.props.routerOptions);
     };
@@ -84,11 +85,23 @@ let role = 'menuitem';
     };
+    let maybeClose = ()=>{
+        // 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 !== null && closeOnSelect !== void 0 ? closeOnSelect : selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key))) onClose();
+    };
     let onPressUp = (e)=>{
-        if (e.pointerType !== 'keyboard') {
+        // If interacting with mouse, allow the user to mouse down on the trigger button,
+        // drag, and release over an item (matching native behavior).
+        if (e.pointerType === 'mouse') {
             performAction(e);
-            // 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 !== null && closeOnSelect !== void 0 ? closeOnSelect : selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key))) onClose();
+            maybeClose();
         }
         pressUpProp === null || pressUpProp === void 0 ? void 0 : pressUpProp(e);
     };
+    let onPress = (e)=>{
+        if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse') {
+            performAction(e);
+            maybeClose();
+        }
+        pressProp === null || pressProp === void 0 ? void 0 : pressProp(e);
+    };
     let { itemProps: itemProps, isFocused: isFocused } = (0, $byVdR$reactariaselection.useSelectableItem)({
@@ -117,3 +130,4 @@ selectionManager: selectionManager,
         onHoverStart (e) {
-            if (!(0, $byVdR$reactariainteractions.isFocusVisible)()) {
+            // Hovering over an already expanded sub dialog trigger should keep focus in the dialog.
+            if (!(0, $byVdR$reactariainteractions.isFocusVisible)() && !(isTriggerExpanded && hasPopup === 'dialog')) {
                 selectionManager.setFocused(true);
@@ -156,5 +170,5 @@ selectionManager.setFocusedKey(key);
     });
-    let domProps = (0, $byVdR$reactariautils.filterDOMProps)(item.props);
+    let domProps = (0, $byVdR$reactariautils.filterDOMProps)(item === null || item === void 0 ? void 0 : item.props);
     delete domProps.id;
-    let linkProps = (0, $byVdR$reactariautils.useLinkProps)(item.props);
+    let linkProps = (0, $byVdR$reactariautils.useLinkProps)(item === null || item === void 0 ? void 0 : item.props);
     return {
@@ -167,3 +181,4 @@ menuItemProps: {
             } : 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
         },
@@ -170,0 +185,0 @@ labelProps: {

dist/useMenuItem.module.js

@@ -23,4 +23,5 @@ import {menuData as $d5336fe17ce95402$export$6f49b4016bfc8d56} from "./useMenu.module.js";
 function $a2e5df62f93c7633$export$9d32628fc2aea7da(props, state, ref) {
-    let { id: id, key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress: onPress, onPressChange: onPressChange, onPressEnd: onPressEnd, onHoverStart: hoverStartProp, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onFocusChange: onFocusChange, onBlur: onBlur, selectionManager: selectionManager = state.selectionManager } = props;
+    let { id: id, key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress: pressProp, onPressChange: onPressChange, onPressEnd: onPressEnd, onHoverStart: hoverStartProp, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onFocusChange: onFocusChange, onBlur: onBlur, selectionManager: selectionManager = state.selectionManager } = props;
     let isTrigger = !!hasPopup;
+    let isTriggerExpanded = isTrigger && props['aria-expanded'] === 'true';
     var _props_isDisabled;
@@ -44,3 +45,3 @@ let isDisabled = (_props_isDisabled = props.isDisabled) !== null && _props_isDisabled !== void 0 ? _props_isDisabled : selectionManager.isDisabled(key);
         }
-        if (e.target instanceof HTMLAnchorElement) router.open(e.target, e, item.props.href, item.props.routerOptions);
+        if (e.target instanceof HTMLAnchorElement && item) router.open(e.target, e, item.props.href, item.props.routerOptions);
     };
@@ -78,11 +79,23 @@ let role = 'menuitem';
     };
+    let maybeClose = ()=>{
+        // 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 !== null && closeOnSelect !== void 0 ? closeOnSelect : selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key))) onClose();
+    };
     let onPressUp = (e)=>{
-        if (e.pointerType !== 'keyboard') {
+        // If interacting with mouse, allow the user to mouse down on the trigger button,
+        // drag, and release over an item (matching native behavior).
+        if (e.pointerType === 'mouse') {
             performAction(e);
-            // 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 !== null && closeOnSelect !== void 0 ? closeOnSelect : selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key))) onClose();
+            maybeClose();
         }
         pressUpProp === null || pressUpProp === void 0 ? void 0 : pressUpProp(e);
     };
+    let onPress = (e)=>{
+        if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse') {
+            performAction(e);
+            maybeClose();
+        }
+        pressProp === null || pressProp === void 0 ? void 0 : pressProp(e);
+    };
     let { itemProps: itemProps, isFocused: isFocused } = (0, $7Kjv5$useSelectableItem)({
@@ -111,3 +124,4 @@ selectionManager: selectionManager,
         onHoverStart (e) {
-            if (!(0, $7Kjv5$isFocusVisible)()) {
+            // Hovering over an already expanded sub dialog trigger should keep focus in the dialog.
+            if (!(0, $7Kjv5$isFocusVisible)() && !(isTriggerExpanded && hasPopup === 'dialog')) {
                 selectionManager.setFocused(true);
@@ -150,5 +164,5 @@ selectionManager.setFocusedKey(key);
     });
-    let domProps = (0, $7Kjv5$filterDOMProps)(item.props);
+    let domProps = (0, $7Kjv5$filterDOMProps)(item === null || item === void 0 ? void 0 : item.props);
     delete domProps.id;
-    let linkProps = (0, $7Kjv5$useLinkProps)(item.props);
+    let linkProps = (0, $7Kjv5$useLinkProps)(item === null || item === void 0 ? void 0 : item.props);
     return {
@@ -161,3 +175,4 @@ menuItemProps: {
             } : 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
         },
@@ -164,0 +179,0 @@ labelProps: {

dist/useMenuTrigger.main.js

@@ -87,2 +87,3 @@ var $d1742ec2644a0949$exports = require("./intlStrings.main.js");
     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: {
@@ -89,0 +90,0 @@ ...triggerProps,

dist/useMenuTrigger.module.js

@@ -81,2 +81,3 @@ import $czs6v$intlStringsmodulejs from "./intlStrings.module.js";
     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: {
@@ -83,0 +84,0 @@ ...triggerProps,

dist/useSafelyMouseToSubmenu.main.js

@@ -54,3 +54,3 @@ var $g3RPq$react = require("react");
         let menu = menuRef.current;
-        if (isDisabled || !submenu || !isOpen || modality !== 'pointer') {
+        if (isDisabled || !submenu || !isOpen || modality !== 'pointer' || !menu) {
             reset();
@@ -57,0 +57,0 @@ return;

dist/useSafelyMouseToSubmenu.module.js

@@ -48,3 +48,3 @@ import {useRef as $fUfeP$useRef, useState as $fUfeP$useState, useEffect as $fUfeP$useEffect} from "react";
         let menu = menuRef.current;
-        if (isDisabled || !submenu || !isOpen || modality !== 'pointer') {
+        if (isDisabled || !submenu || !isOpen || modality !== 'pointer' || !menu) {
             reset();
@@ -51,0 +51,0 @@ return;

dist/useSubmenuTrigger.main.js

@@ -59,5 +59,6 @@ var $62347d8c4183e713$exports = require("./useSafelyMouseToSubmenu.main.js");
                 if (direction === 'ltr' && e.currentTarget.contains(e.target)) {
+                    var _ref_current;
                     e.stopPropagation();
                     onSubmenuClose();
-                    ref.current.focus();
+                    (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
                 }
@@ -67,5 +68,6 @@ break;
                 if (direction === 'rtl' && e.currentTarget.contains(e.target)) {
+                    var _ref_current1;
                     e.stopPropagation();
                     onSubmenuClose();
-                    ref.current.focus();
+                    (_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.focus();
                 }
@@ -79,2 +81,3 @@ break;
     };
+    var _state_focusStrategy;
     let submenuProps = {
@@ -86,3 +89,3 @@ id: overlayId,
             onClose: state.closeAll,
-            autoFocus: state.focusStrategy,
+            autoFocus: (_state_focusStrategy = state.focusStrategy) !== null && _state_focusStrategy !== void 0 ? _state_focusStrategy : undefined,
             onKeyDown: submenuKeyDown
@@ -138,3 +141,4 @@ }
     let onBlur = (e)=>{
-        if (state.isOpen && parentMenuRef.current.contains(e.relatedTarget)) onSubmenuClose();
+        var _parentMenuRef_current;
+        if (state.isOpen && ((_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.contains(e.relatedTarget))) onSubmenuClose();
     };
@@ -141,0 +145,0 @@ let shouldCloseOnInteractOutside = (target)=>{

dist/useSubmenuTrigger.module.js

@@ -53,5 +53,6 @@ import {useSafelyMouseToSubmenu as $d275435c250248f8$export$85ec83e04c95f50a} from "./useSafelyMouseToSubmenu.module.js";
                 if (direction === 'ltr' && e.currentTarget.contains(e.target)) {
+                    var _ref_current;
                     e.stopPropagation();
                     onSubmenuClose();
-                    ref.current.focus();
+                    (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
                 }
@@ -61,5 +62,6 @@ break;
                 if (direction === 'rtl' && e.currentTarget.contains(e.target)) {
+                    var _ref_current1;
                     e.stopPropagation();
                     onSubmenuClose();
-                    ref.current.focus();
+                    (_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.focus();
                 }
@@ -73,2 +75,3 @@ break;
     };
+    var _state_focusStrategy;
     let submenuProps = {
@@ -80,3 +83,3 @@ id: overlayId,
             onClose: state.closeAll,
-            autoFocus: state.focusStrategy,
+            autoFocus: (_state_focusStrategy = state.focusStrategy) !== null && _state_focusStrategy !== void 0 ? _state_focusStrategy : undefined,
             onKeyDown: submenuKeyDown
@@ -132,3 +135,4 @@ }
     let onBlur = (e)=>{
-        if (state.isOpen && parentMenuRef.current.contains(e.relatedTarget)) onSubmenuClose();
+        var _parentMenuRef_current;
+        if (state.isOpen && ((_parentMenuRef_current = parentMenuRef.current) === null || _parentMenuRef_current === void 0 ? void 0 : _parentMenuRef_current.contains(e.relatedTarget))) onSubmenuClose();
     };
@@ -135,0 +139,0 @@ let shouldCloseOnInteractOutside = (target)=>{

package.json

 {
   "name": "@react-aria/menu",
-  "version": "3.0.0-nightly-7aa6265a2-241112",
+  "version": "3.0.0-nightly-7eae25e12-241205",
   "description": "Spectrum UI components in React",
@@ -25,20 +25,20 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/focus": "^3.0.0-nightly-7aa6265a2-241112",
-    "@react-aria/i18n": "^3.0.0-nightly-7aa6265a2-241112",
-    "@react-aria/interactions": "^3.0.0-nightly-7aa6265a2-241112",
-    "@react-aria/overlays": "^3.0.0-nightly-7aa6265a2-241112",
-    "@react-aria/selection": "^3.0.0-nightly-7aa6265a2-241112",
-    "@react-aria/utils": "^3.0.0-nightly-7aa6265a2-241112",
-    "@react-stately/collections": "^3.0.0-nightly-7aa6265a2-241112",
-    "@react-stately/menu": "^3.0.0-nightly-7aa6265a2-241112",
-    "@react-stately/selection": "^3.0.0-nightly-7aa6265a2-241112",
-    "@react-stately/tree": "^3.0.0-nightly-7aa6265a2-241112",
-    "@react-types/button": "^3.0.0-nightly-7aa6265a2-241112",
-    "@react-types/menu": "^3.0.0-nightly-7aa6265a2-241112",
-    "@react-types/shared": "^3.0.0-nightly-7aa6265a2-241112",
+    "@react-aria/focus": "^3.0.0-nightly-7eae25e12-241205",
+    "@react-aria/i18n": "^3.0.0-nightly-7eae25e12-241205",
+    "@react-aria/interactions": "^3.0.0-nightly-7eae25e12-241205",
+    "@react-aria/overlays": "^3.0.0-nightly-7eae25e12-241205",
+    "@react-aria/selection": "^3.0.0-nightly-7eae25e12-241205",
+    "@react-aria/utils": "^3.0.0-nightly-7eae25e12-241205",
+    "@react-stately/collections": "^3.0.0-nightly-7eae25e12-241205",
+    "@react-stately/menu": "^3.0.0-nightly-7eae25e12-241205",
+    "@react-stately/selection": "^3.0.0-nightly-7eae25e12-241205",
+    "@react-stately/tree": "^3.0.0-nightly-7eae25e12-241205",
+    "@react-types/button": "^3.0.0-nightly-7eae25e12-241205",
+    "@react-types/menu": "^3.0.0-nightly-7eae25e12-241205",
+    "@react-types/shared": "^3.0.0-nightly-7eae25e12-241205",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
@@ -48,3 +48,3 @@ "publishConfig": {
   },
-  "stableVersion": "3.15.5"
+  "stableVersion": "3.16.0"
 }

src/useMenu.ts

@@ -83,3 +83,3 @@ /*
         if (e.key !== 'Escape') {
-          listProps.onKeyDown(e);
+          listProps.onKeyDown?.(e);
         }
@@ -86,0 +86,0 @@ }

src/useMenuItem.ts

@@ -62,3 +62,3 @@ /*
   /** The unique key for the menu item. */
-  key?: Key,
+  key: Key,
 
@@ -114,3 +114,3 @@ /**
     onPressUp: pressUpProp,
-    onPress,
+    onPress: pressProp,
     onPressChange,
@@ -130,5 +130,6 @@ onPressEnd,
   let isTrigger = !!hasPopup;
+  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 data = menuData.get(state)!;
   let item = state.collection.getItem(key);
@@ -154,3 +155,3 @@ let onClose = props.onClose || data.onClose;
 
-    if (e.target instanceof HTMLAnchorElement) {
+    if (e.target instanceof HTMLAnchorElement && item) {
       router.open(e.target, e, item.props.href, item.props.routerOptions as RouterOptions);
@@ -202,11 +203,16 @@ }
 
+  let maybeClose = () => {
+    // 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 ?? (selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key)))) {
+      onClose();
+    }
+  };
+
   let onPressUp = (e: PressEvent) => {
-    if (e.pointerType !== 'keyboard') {
+    // If interacting with mouse, allow the user to mouse down on the trigger button,
+    // drag, and release over an item (matching native behavior).
+    if (e.pointerType === 'mouse') {
       performAction(e);
-
-      // 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 ?? (selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key)))) {
-        onClose();
-      }
+      maybeClose();
     }
@@ -217,2 +223,11 @@
 
+  let onPress = (e: PressEvent) => {
+    if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse') {
+      performAction(e);
+      maybeClose();
+    }
+
+    pressProp?.(e);
+  };
+
   let {itemProps, isFocused} = useSelectableItem({
@@ -242,3 +257,4 @@ selectionManager: selectionManager,
     onHoverStart(e) {
-      if (!isFocusVisible()) {
+      // Hovering over an already expanded sub dialog trigger should keep focus in the dialog.
+      if (!isFocusVisible() && !(isTriggerExpanded && hasPopup === 'dialog')) {
         selectionManager.setFocused(true);
@@ -287,5 +303,5 @@ selectionManager.setFocusedKey(key);
   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);
 
@@ -296,3 +312,4 @@ return {
       ...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
     },
@@ -299,0 +316,0 @@ labelProps: {

src/useMenuTrigger.ts

@@ -50,3 +50,3 @@ /*
   let {
-    type = 'menu' as AriaMenuTriggerProps['type'],
+    type = 'menu',
     isDisabled,
@@ -132,2 +132,3 @@ trigger = 'press'
   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: {
@@ -134,0 +135,0 @@ ...triggerProps,

src/useSafelyMouseToSubmenu.ts

@@ -66,3 +66,3 @@
 
-    if (isDisabled || !submenu || !isOpen || modality !== 'pointer') {
+    if (isDisabled || !submenu || !isOpen || modality !== 'pointer' || !menu) {
       reset();
@@ -69,0 +69,0 @@ return;

src/useSubmenuTrigger.ts

@@ -44,3 +44,3 @@ /*
 
-interface SubmenuTriggerProps extends AriaMenuItemProps {
+interface SubmenuTriggerProps extends Omit<AriaMenuItemProps, 'key'> {
   /** Whether the submenu trigger is in an expanded state. */
@@ -105,3 +105,3 @@ isOpen: boolean
           onSubmenuClose();
-          ref.current.focus();
+          ref.current?.focus();
         }
@@ -113,3 +113,3 @@ break;
           onSubmenuClose();
-          ref.current.focus();
+          ref.current?.focus();
         }
@@ -130,3 +130,3 @@ break;
       onClose: state.closeAll,
-      autoFocus: state.focusStrategy,
+      autoFocus: state.focusStrategy ?? undefined,
       onKeyDown: submenuKeyDown
@@ -212,3 +212,3 @@ })
   let onBlur = (e) => {
-    if (state.isOpen && parentMenuRef.current.contains(e.relatedTarget)) {
+    if (state.isOpen && parentMenuRef.current?.contains(e.relatedTarget)) {
       onSubmenuClose();
@@ -215,0 +215,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

316494

increased by3.17%

Lines of code

3898

increased by2.07%

Dependency changes

• Updated@react-aria/focus@^3.0.0-nightly-7eae25e12-241205

• Updated@react-aria/i18n@^3.0.0-nightly-7eae25e12-241205

• Updated@react-aria/interactions@^3.0.0-nightly-7eae25e12-241205

• Updated@react-aria/overlays@^3.0.0-nightly-7eae25e12-241205

• Updated@react-aria/selection@^3.0.0-nightly-7eae25e12-241205

• Updated@react-aria/utils@^3.0.0-nightly-7eae25e12-241205

• Updated@react-stately/collections@^3.0.0-nightly-7eae25e12-241205

• Updated@react-stately/menu@^3.0.0-nightly-7eae25e12-241205

• Updated@react-stately/selection@^3.0.0-nightly-7eae25e12-241205

• Updated@react-stately/tree@^3.0.0-nightly-7eae25e12-241205

• Updated@react-types/button@^3.0.0-nightly-7eae25e12-241205

• Updated@react-types/menu@^3.0.0-nightly-7eae25e12-241205

• Updated@react-types/shared@^3.0.0-nightly-7eae25e12-241205