@react-aria/menu - npm Package Compare versions

Comparing version 3.0.0-nightly-10a43de88-241127 to 3.0.0-nightly-1286a652e-250116

dist/types.d.ts

@@ -21,2 +21,6 @@ import { AriaMenuProps, MenuTriggerType } from "@react-types/menu";
     keyboardDelegate?: KeyboardDelegate;
+    /**
+     * Whether the menu items should use virtual focus instead of being focused directly.
+     */
+    shouldUseVirtualFocus?: boolean;
 }
@@ -23,0 +27,0 @@ /**

dist/useMenu.main.js

@@ -0,1 +1,2 @@
+var $815e346b11b84016$exports = require("./utils.main.js");
 var $6CumN$reactariautils = require("@react-aria/utils");
@@ -9,3 +10,2 @@ var $6CumN$reactariaselection = require("@react-aria/selection");
 
-$parcel$export(module.exports, "menuData", () => $a3815f0132802737$export$6f49b4016bfc8d56);
 $parcel$export(module.exports, "useMenu", () => $a3815f0132802737$export$38eaa17faae8f579);
@@ -24,3 +24,3 @@ /*
 
-const $a3815f0132802737$export$6f49b4016bfc8d56 = new WeakMap();
+
 function $a3815f0132802737$export$38eaa17faae8f579(props, state, ref) {
@@ -41,5 +41,6 @@ let { shouldFocusWrap: shouldFocusWrap = true, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ...otherProps } = props;
     });
-    $a3815f0132802737$export$6f49b4016bfc8d56.set(state, {
+    (0, $815e346b11b84016$exports.menuData).set(state, {
         onClose: props.onClose,
-        onAction: props.onAction
+        onAction: props.onAction,
+        shouldUseVirtualFocus: props.shouldUseVirtualFocus
     });
@@ -56,3 +57,3 @@ return {
                 // don't clear the menu selected keys if the user is presses escape since escape closes the menu
-                if (e.key !== 'Escape') (_listProps_onKeyDown = listProps.onKeyDown) === null || _listProps_onKeyDown === void 0 ? void 0 : _listProps_onKeyDown.call(listProps, e);
+                if (e.key !== 'Escape' || props.shouldUseVirtualFocus) (_listProps_onKeyDown = listProps.onKeyDown) === null || _listProps_onKeyDown === void 0 ? void 0 : _listProps_onKeyDown.call(listProps, e);
             }
@@ -59,0 +60,0 @@ })

dist/useMenu.module.js

@@ -0,1 +1,2 @@
+import {menuData as $fc79756100351201$export$6f49b4016bfc8d56} from "./utils.module.js";
 import {filterDOMProps as $ieN2F$filterDOMProps, mergeProps as $ieN2F$mergeProps} from "@react-aria/utils";
@@ -16,3 +17,3 @@ import {useSelectableList as $ieN2F$useSelectableList} from "@react-aria/selection";
 
-const $d5336fe17ce95402$export$6f49b4016bfc8d56 = new WeakMap();
+
 function $d5336fe17ce95402$export$38eaa17faae8f579(props, state, ref) {
@@ -33,5 +34,6 @@ let { shouldFocusWrap: shouldFocusWrap = true, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ...otherProps } = props;
     });
-    $d5336fe17ce95402$export$6f49b4016bfc8d56.set(state, {
+    (0, $fc79756100351201$export$6f49b4016bfc8d56).set(state, {
         onClose: props.onClose,
-        onAction: props.onAction
+        onAction: props.onAction,
+        shouldUseVirtualFocus: props.shouldUseVirtualFocus
     });
@@ -48,3 +50,3 @@ return {
                 // don't clear the menu selected keys if the user is presses escape since escape closes the menu
-                if (e.key !== 'Escape') (_listProps_onKeyDown = listProps.onKeyDown) === null || _listProps_onKeyDown === void 0 ? void 0 : _listProps_onKeyDown.call(listProps, e);
+                if (e.key !== 'Escape' || props.shouldUseVirtualFocus) (_listProps_onKeyDown = listProps.onKeyDown) === null || _listProps_onKeyDown === void 0 ? void 0 : _listProps_onKeyDown.call(listProps, e);
             }
@@ -56,3 +58,3 @@ })
 
-export {$d5336fe17ce95402$export$6f49b4016bfc8d56 as menuData, $d5336fe17ce95402$export$38eaa17faae8f579 as useMenu};
+export {$d5336fe17ce95402$export$38eaa17faae8f579 as useMenu};
 //# sourceMappingURL=useMenu.module.js.map

dist/useMenuItem.main.js

@@ -1,2 +0,2 @@
-var $a3815f0132802737$exports = require("./useMenu.main.js");
+var $815e346b11b84016$exports = require("./utils.main.js");
 var $byVdR$reactariautils = require("@react-aria/utils");
@@ -29,3 +29,3 @@ var $byVdR$reactstatelycollections = require("@react-stately/collections");
 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;
@@ -37,3 +37,3 @@ let isTriggerExpanded = isTrigger && props['aria-expanded'] === 'true';
     let isSelected = (_props_isSelected = props.isSelected) !== null && _props_isSelected !== void 0 ? _props_isSelected : selectionManager.isSelected(key);
-    let data = (0, $a3815f0132802737$exports.menuData).get(state);
+    let data = (0, $815e346b11b84016$exports.menuData).get(state);
     let item = state.collection.getItem(key);
@@ -85,12 +85,25 @@ let onClose = props.onClose || data.onClose;
     };
+    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)({
+        id: id,
         selectionManager: selectionManager,
@@ -105,3 +118,4 @@ key: key,
         // actions are performed on key down rather than key up.
-        linkBehavior: 'none'
+        linkBehavior: 'none',
+        shouldUseVirtualFocus: data.shouldUseVirtualFocus
     });
@@ -108,0 +122,0 @@ let { pressProps: pressProps, isPressed: isPressed } = (0, $byVdR$reactariainteractions.usePress)({

dist/useMenuItem.module.js

@@ -1,2 +0,2 @@
-import {menuData as $d5336fe17ce95402$export$6f49b4016bfc8d56} from "./useMenu.module.js";
+import {menuData as $fc79756100351201$export$6f49b4016bfc8d56} from "./utils.module.js";
 import {useRouter as $7Kjv5$useRouter, useSlotId as $7Kjv5$useSlotId, filterDOMProps as $7Kjv5$filterDOMProps, useLinkProps as $7Kjv5$useLinkProps, mergeProps as $7Kjv5$mergeProps} from "@react-aria/utils";
@@ -23,3 +23,3 @@ import {getItemCount as $7Kjv5$getItemCount} from "@react-stately/collections";
 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;
@@ -31,3 +31,3 @@ let isTriggerExpanded = isTrigger && props['aria-expanded'] === 'true';
     let isSelected = (_props_isSelected = props.isSelected) !== null && _props_isSelected !== void 0 ? _props_isSelected : selectionManager.isSelected(key);
-    let data = (0, $d5336fe17ce95402$export$6f49b4016bfc8d56).get(state);
+    let data = (0, $fc79756100351201$export$6f49b4016bfc8d56).get(state);
     let item = state.collection.getItem(key);
@@ -79,12 +79,25 @@ let onClose = props.onClose || data.onClose;
     };
+    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)({
+        id: id,
         selectionManager: selectionManager,
@@ -99,3 +112,4 @@ key: key,
         // actions are performed on key down rather than key up.
-        linkBehavior: 'none'
+        linkBehavior: 'none',
+        shouldUseVirtualFocus: data.shouldUseVirtualFocus
     });
@@ -102,0 +116,0 @@ let { pressProps: pressProps, isPressed: isPressed } = (0, $7Kjv5$usePress)({

package.json

 {
   "name": "@react-aria/menu",
-  "version": "3.0.0-nightly-10a43de88-241127",
+  "version": "3.0.0-nightly-1286a652e-250116",
   "description": "Spectrum UI components in React",
@@ -25,15 +25,15 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/focus": "^3.0.0-nightly-10a43de88-241127",
-    "@react-aria/i18n": "^3.0.0-nightly-10a43de88-241127",
-    "@react-aria/interactions": "^3.0.0-nightly-10a43de88-241127",
-    "@react-aria/overlays": "^3.0.0-nightly-10a43de88-241127",
-    "@react-aria/selection": "^3.0.0-nightly-10a43de88-241127",
-    "@react-aria/utils": "^3.0.0-nightly-10a43de88-241127",
-    "@react-stately/collections": "^3.0.0-nightly-10a43de88-241127",
-    "@react-stately/menu": "^3.0.0-nightly-10a43de88-241127",
-    "@react-stately/selection": "^3.0.0-nightly-10a43de88-241127",
-    "@react-stately/tree": "^3.0.0-nightly-10a43de88-241127",
-    "@react-types/button": "^3.0.0-nightly-10a43de88-241127",
-    "@react-types/menu": "^3.0.0-nightly-10a43de88-241127",
-    "@react-types/shared": "^3.0.0-nightly-10a43de88-241127",
+    "@react-aria/focus": "3.0.0-nightly-1286a652e-250116",
+    "@react-aria/i18n": "3.0.0-nightly-1286a652e-250116",
+    "@react-aria/interactions": "3.0.0-nightly-1286a652e-250116",
+    "@react-aria/overlays": "3.0.0-nightly-1286a652e-250116",
+    "@react-aria/selection": "3.0.0-nightly-1286a652e-250116",
+    "@react-aria/utils": "3.0.0-nightly-1286a652e-250116",
+    "@react-stately/collections": "3.0.0-nightly-1286a652e-250116",
+    "@react-stately/menu": "3.0.0-nightly-1286a652e-250116",
+    "@react-stately/selection": "3.0.0-nightly-1286a652e-250116",
+    "@react-stately/tree": "3.0.0-nightly-1286a652e-250116",
+    "@react-types/button": "3.0.0-nightly-1286a652e-250116",
+    "@react-types/menu": "3.0.0-nightly-1286a652e-250116",
+    "@react-types/shared": "3.0.0-nightly-1286a652e-250116",
     "@swc/helpers": "^0.5.0"
@@ -47,4 +47,3 @@ },
     "access": "public"
-  },
-  "stableVersion": "3.16.0"
+  }
 }

src/useMenu.ts

@@ -14,4 +14,5 @@ /*
 import {AriaMenuProps} from '@react-types/menu';
-import {DOMAttributes, Key, KeyboardDelegate, KeyboardEvents, RefObject} from '@react-types/shared';
+import {DOMAttributes, KeyboardDelegate, KeyboardEvents, RefObject} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {menuData} from './utils';
 import {TreeState} from '@react-stately/tree';
@@ -28,3 +29,2 @@ import {useSelectableList} from '@react-aria/selection';
   isVirtualized?: boolean,
-
   /**
@@ -34,12 +34,9 @@ * An optional keyboard delegate implementation for type to select,
    */
-  keyboardDelegate?: KeyboardDelegate
+  keyboardDelegate?: KeyboardDelegate,
+  /**
+   * Whether the menu items should use virtual focus instead of being focused directly.
+   */
+  shouldUseVirtualFocus?: boolean
 }
 
-interface MenuData {
-  onClose?: () => void,
-  onAction?: (key: Key) => void
-}
-
-export const menuData = new WeakMap<TreeState<unknown>, MenuData>();
-
 /**
@@ -76,3 +73,4 @@ * Provides the behavior and accessibility implementation for a menu component.
     onClose: props.onClose,
-    onAction: props.onAction
+    onAction: props.onAction,
+    shouldUseVirtualFocus: props.shouldUseVirtualFocus
   });
@@ -86,3 +84,3 @@
         // don't clear the menu selected keys if the user is presses escape since escape closes the menu
-        if (e.key !== 'Escape') {
+        if (e.key !== 'Escape' || props.shouldUseVirtualFocus) {
           listProps.onKeyDown?.(e);
@@ -89,0 +87,0 @@ }

src/useMenuItem.ts

@@ -17,3 +17,3 @@ /*
 import {isFocusVisible, useFocus, useHover, useKeyboard, usePress} from '@react-aria/interactions';
-import {menuData} from './useMenu';
+import {menuData} from './utils';
 import {SelectionManager} from '@react-stately/selection';
@@ -114,3 +114,3 @@ import {TreeState} from '@react-stately/tree';
     onPressUp: pressUpProp,
-    onPress,
+    onPress: pressProp,
     onPressChange,
@@ -201,11 +201,16 @@ onPressEnd,
 
+  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();
     }
@@ -216,3 +221,13 @@
 
+  let onPress = (e: PressEvent) => {
+    if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse') {
+      performAction(e);
+      maybeClose();
+    }
+
+    pressProp?.(e);
+  };
+
   let {itemProps, isFocused} = useSelectableItem({
+    id,
     selectionManager: selectionManager,
@@ -227,3 +242,4 @@ key,
     // actions are performed on key down rather than key up.
-    linkBehavior: 'none'
+    linkBehavior: 'none',
+    shouldUseVirtualFocus: data.shouldUseVirtualFocus
   });
@@ -230,0 +246,0 @@

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

323300

increased by3.09%

Number of package files

227

increased by2.71%

Lines of code

3974

increased by3.22%

Worsened metrics

Number of low license alerts

8

increased by33.33%

Dependency changes

• + Added@internationalized/date@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@internationalized/message@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@internationalized/number@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@internationalized/string@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-aria/focus@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-aria/i18n@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-aria/interactions@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-aria/overlays@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-aria/selection@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-aria/ssr@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-aria/utils@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-aria/visually-hidden@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-stately/collections@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-stately/menu@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-stately/overlays@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-stately/selection@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-stately/tree@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-stately/utils@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-types/button@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-types/menu@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-types/overlays@3.0.0-nightly-1286a652e-250116(transitive)

• + Added@react-types/shared@3.0.0-nightly-1286a652e-250116(transitive)

• - Removed@internationalized/date@3.7.0(transitive)

• - Removed@internationalized/message@3.1.6(transitive)

• - Removed@internationalized/number@3.6.0(transitive)

• - Removed@internationalized/string@3.2.5(transitive)

• - Removed@react-aria/focus@3.19.1(transitive)

• - Removed@react-aria/i18n@3.12.5(transitive)

• - Removed@react-aria/interactions@3.23.0(transitive)

• - Removed@react-aria/overlays@3.25.0(transitive)

• - Removed@react-aria/selection@3.22.0(transitive)

• - Removed@react-aria/ssr@3.9.7(transitive)

• - Removed@react-aria/utils@3.27.0(transitive)

• - Removed@react-aria/visually-hidden@3.8.19(transitive)

• - Removed@react-stately/collections@3.12.1(transitive)

• - Removed@react-stately/menu@3.9.1(transitive)

• - Removed@react-stately/overlays@3.6.13(transitive)

• - Removed@react-stately/selection@3.19.0(transitive)

• - Removed@react-stately/tree@3.8.7(transitive)

• - Removed@react-stately/utils@3.10.5(transitive)

• - Removed@react-types/button@3.10.2(transitive)

• - Removed@react-types/menu@3.9.14(transitive)

• - Removed@react-types/overlays@3.8.12(transitive)

• - Removed@react-types/shared@3.27.0(transitive)

• Updated@react-aria/focus@3.0.0-nightly-1286a652e-250116

• Updated@react-aria/i18n@3.0.0-nightly-1286a652e-250116

• Updated@react-aria/interactions@3.0.0-nightly-1286a652e-250116

• Updated@react-aria/overlays@3.0.0-nightly-1286a652e-250116

• Updated@react-aria/selection@3.0.0-nightly-1286a652e-250116

• Updated@react-aria/utils@3.0.0-nightly-1286a652e-250116

• Updated@react-stately/collections@3.0.0-nightly-1286a652e-250116

• Updated@react-stately/menu@3.0.0-nightly-1286a652e-250116

• Updated@react-stately/selection@3.0.0-nightly-1286a652e-250116

• Updated@react-stately/tree@3.0.0-nightly-1286a652e-250116

• Updated@react-types/button@3.0.0-nightly-1286a652e-250116

• Updated@react-types/menu@3.0.0-nightly-1286a652e-250116

• Updated@react-types/shared@3.0.0-nightly-1286a652e-250116