@szhsin/react-menu - npm Package Compare versions

Comparing version 4.2.3 to 4.2.4

dist/es/components/ControlledMenu.js

@@ -103,3 +103,3 @@ import { forwardRef, useRef, useMemo } from 'react';
   ...rootMenuPropTypes,
-  state: /*#__PURE__*/oneOf( /*#__PURE__*/values(MenuStateMap)),
+  state: /*#__PURE__*/oneOf(/*#__PURE__*/values(MenuStateMap)),
   anchorPoint: /*#__PURE__*/exact({
@@ -106,0 +106,0 @@ x: number,

dist/es/components/MenuDivider.js

@@ -7,3 +7,3 @@ import { memo, forwardRef } from 'react';
 
-const MenuDivider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function MenuDivider({
+const MenuDivider = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function MenuDivider({
   className,
@@ -10,0 +10,0 @@ ...restProps

dist/es/components/MenuHeader.js

@@ -7,3 +7,3 @@ import { memo, forwardRef } from 'react';
 
-const MenuHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function MenuHeader({
+const MenuHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function MenuHeader({
   className,
@@ -10,0 +10,0 @@ ...restProps

dist/es/components/MenuList.js

@@ -6,3 +6,3 @@ import { useState, useReducer, useContext, useRef, useCallback, useEffect, useMemo } from 'react';
 import { createSubmenuCtx } from '../utils/submenuCtx.js';
-import { SettingsContext, MenuListContext, HoverActionTypes, menuClass, menuArrowClass, positionAbsolute, roleNone, MenuListItemContext, HoverItemContext, Keys, CloseReason, FocusPositions } from '../utils/constants.js';
+import { SettingsContext, MenuListContext, HoverActionTypes, noScrollFocus, menuClass, menuArrowClass, positionAbsolute, MenuListItemContext, HoverItemContext, Keys, CloseReason, FocusPositions } from '../utils/constants.js';
 import { useItems } from '../hooks/useItems.js';
@@ -27,3 +27,2 @@ import { getScrollAncestor, commonProps, mergeProps, safeCall, isMenuOpen, getTransition, batchedUpdates } from '../utils/utils.js';
   containerProps,
-  focusProps,
   externalRef,
@@ -46,2 +45,3 @@ parentScrollingRef,
   onClose,
+  focusProps: _1,
   ...restProps
@@ -73,4 +73,3 @@ }) => {
   } = useContext(MenuListContext);
-  const menuRef = useRef(null);
-  const focusRef = useRef();
+  const menuRef = useRef();
   const arrowRef = useRef();
@@ -82,3 +81,3 @@ const prevOpen = useRef(false);
     updateItems
-  } = useItems(menuRef, focusRef);
+  } = useItems(menuRef);
   const isOpen = isMenuOpen(state);
@@ -123,3 +122,3 @@ const openTransition = getTransition(transition, 'open');
       dispatch(HoverActionTypes.RESET);
-      focusRef.current.focus();
+      menuRef.current.focus(noScrollFocus);
     });
@@ -303,3 +302,3 @@ };
         if (menuElt && !menuElt.contains(document.activeElement)) {
-          focusRef.current.focus();
+          menuElt.focus(noScrollFocus);
           setItemFocus();
@@ -373,16 +372,4 @@ }
     },
-    children: [/*#__PURE__*/jsx("li", {
-      tabIndex: -1,
-      role: roleNone,
-      style: {
-        position: positionAbsolute,
-        left: 0,
-        top: 0,
-        display: 'block',
-        outline: 'none'
-      },
-      ref: focusRef,
-      ...focusProps
-    }), arrow && /*#__PURE__*/jsx("li", {
-      role: roleNone,
+    children: [arrow && /*#__PURE__*/jsx("li", {
+      "aria-hidden": true,
       ...arrowProps,
@@ -389,0 +376,0 @@ className: _arrowClassName,

dist/es/hooks/useItems.js

 import { useState, useRef, useCallback } from 'react';
-import { HoverActionTypes } from '../utils/constants.js';
+import { noScrollFocus, HoverActionTypes } from '../utils/constants.js';
 import { indexOfNode } from '../utils/utils.js';
 
-const useItems = (menuRef, focusRef) => {
+const useItems = menuRef => {
   const [hoverItem, setHoverItem] = useState();
@@ -26,3 +26,3 @@ const stateRef = useRef({
         if (item.contains(document.activeElement)) {
-          focusRef.current.focus();
+          menuRef.current.focus(noScrollFocus);
           setHoverItem();
@@ -34,3 +34,3 @@ }
     mutableState.sorted = false;
-  }, [mutableState, focusRef]);
+  }, [mutableState, menuRef]);
   const dispatch = useCallback((actionType, item, nextIndex) => {
@@ -37,0 +37,0 @@ const {

dist/es/utils/constants.js

@@ -59,3 +59,6 @@ import { createContext } from 'react';
 const roleMenuitem = 'menuitem';
+const noScrollFocus = {
+  preventScroll: true
+};
 
-export { CloseReason, EventHandlersContext, FocusPositions, HoverActionTypes, HoverItemContext, Keys, MenuListContext, MenuListItemContext, MenuStateMap, RadioGroupContext, SettingsContext, menuArrowClass, menuButtonClass, menuClass, menuContainerClass, menuDividerClass, menuGroupClass, menuHeaderClass, menuItemClass, positionAbsolute, radioGroupClass, roleMenuitem, roleNone, subMenuClass };
+export { CloseReason, EventHandlersContext, FocusPositions, HoverActionTypes, HoverItemContext, Keys, MenuListContext, MenuListItemContext, MenuStateMap, RadioGroupContext, SettingsContext, menuArrowClass, menuButtonClass, menuClass, menuContainerClass, menuDividerClass, menuGroupClass, menuHeaderClass, menuItemClass, noScrollFocus, positionAbsolute, radioGroupClass, roleMenuitem, roleNone, subMenuClass };

dist/index.js

@@ -138,2 +138,5 @@ 'use strict';
 const roleMenuitem = 'menuitem';
+const noScrollFocus = {
+  preventScroll: true
+};
 
@@ -297,3 +300,3 @@ const isMenuOpen = state => !!state && state[0] === 'o';
 
-const useItems = (menuRef, focusRef) => {
+const useItems = menuRef => {
   const [hoverItem, setHoverItem] = react.useState();
@@ -319,3 +322,3 @@ const stateRef = react.useRef({
         if (item.contains(document.activeElement)) {
-          focusRef.current.focus();
+          menuRef.current.focus(noScrollFocus);
           setHoverItem();
@@ -327,3 +330,3 @@ }
     mutableState.sorted = false;
-  }, [mutableState, focusRef]);
+  }, [mutableState, menuRef]);
   const dispatch = react.useCallback((actionType, item, nextIndex) => {
@@ -889,3 +892,2 @@ const {
   containerProps,
-  focusProps,
   externalRef,
@@ -908,2 +910,3 @@ parentScrollingRef,
   onClose,
+  focusProps: _1,
   ...restProps
@@ -935,4 +938,3 @@ }) => {
   } = react.useContext(MenuListContext);
-  const menuRef = react.useRef(null);
-  const focusRef = react.useRef();
+  const menuRef = react.useRef();
   const arrowRef = react.useRef();
@@ -944,3 +946,3 @@ const prevOpen = react.useRef(false);
     updateItems
-  } = useItems(menuRef, focusRef);
+  } = useItems(menuRef);
   const isOpen = isMenuOpen(state);
@@ -985,3 +987,3 @@ const openTransition = getTransition(transition, 'open');
       dispatch(HoverActionTypes.RESET);
-      focusRef.current.focus();
+      menuRef.current.focus(noScrollFocus);
     });
@@ -1165,3 +1167,3 @@ };
         if (menuElt && !menuElt.contains(document.activeElement)) {
-          focusRef.current.focus();
+          menuElt.focus(noScrollFocus);
           setItemFocus();
@@ -1235,16 +1237,4 @@ }
     },
-    children: [/*#__PURE__*/jsxRuntime.jsx("li", {
-      tabIndex: -1,
-      role: roleNone,
-      style: {
-        position: positionAbsolute,
-        left: 0,
-        top: 0,
-        display: 'block',
-        outline: 'none'
-      },
-      ref: focusRef,
-      ...focusProps
-    }), arrow && /*#__PURE__*/jsxRuntime.jsx("li", {
-      role: roleNone,
+    children: [arrow && /*#__PURE__*/jsxRuntime.jsx("li", {
+      "aria-hidden": true,
       ...arrowProps,
@@ -1371,3 +1361,3 @@ className: _arrowClassName,
   ...rootMenuPropTypes,
-  state: /*#__PURE__*/propTypes.oneOf( /*#__PURE__*/values(MenuStateMap)),
+  state: /*#__PURE__*/propTypes.oneOf(/*#__PURE__*/values(MenuStateMap)),
   anchorPoint: /*#__PURE__*/propTypes.exact({
@@ -1803,3 +1793,3 @@ x: propTypes.number,
 
-const MenuDivider = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function MenuDivider({
+const MenuDivider = /*#__PURE__*/react.memo(/*#__PURE__*/react.forwardRef(function MenuDivider({
   className,
@@ -1823,3 +1813,3 @@ ...restProps
 
-const MenuHeader = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function MenuHeader({
+const MenuHeader = /*#__PURE__*/react.memo(/*#__PURE__*/react.forwardRef(function MenuHeader({
   className,
@@ -1826,0 +1816,0 @@ ...restProps

dist/style-utils/index.cjs.js

@@ -38,12 +38,12 @@ 'use strict';
 const menuBlock = /*#__PURE__*/bem(menuClass);
-const menuSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(), [...createModifiers('state', ['opening', 'open', 'closing', 'closed']), ...createModifiers('align', ['start', 'center', 'end']), ...directions]);
-const menuArrowSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuArrowClass), directions);
-const menuItemSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuItemClass), ['hover', 'disabled', 'anchor', 'checked', 'open', 'submenu', 'focusable', 'type-radio', 'type-checkbox']);
-const menuDividerSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuDividerClass));
-const menuHeaderSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuHeaderClass));
-const menuGroupSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuGroupClass));
-const radioGroupSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(radioGroupClass));
-const submenuSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(subMenuClass));
-const menuContainerSelector = /*#__PURE__*/createSelector( /*#__PURE__*/ /*#__PURE__*/bem(menuContainerClass)(), ['itemTransition']);
-const menuButtonSelector = /*#__PURE__*/createSelector( /*#__PURE__*/ /*#__PURE__*/bem(menuButtonClass)(), ['open']);
+const menuSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(), [...createModifiers('state', ['opening', 'open', 'closing', 'closed']), ...createModifiers('align', ['start', 'center', 'end']), ...directions]);
+const menuArrowSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(menuArrowClass), directions);
+const menuItemSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(menuItemClass), ['hover', 'disabled', 'anchor', 'checked', 'open', 'submenu', 'focusable', 'type-radio', 'type-checkbox']);
+const menuDividerSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(menuDividerClass));
+const menuHeaderSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(menuHeaderClass));
+const menuGroupSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(menuGroupClass));
+const radioGroupSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(radioGroupClass));
+const submenuSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(subMenuClass));
+const menuContainerSelector = /*#__PURE__*/createSelector(/*#__PURE__*/ /*#__PURE__*/bem(menuContainerClass)(), ['itemTransition']);
+const menuButtonSelector = /*#__PURE__*/createSelector(/*#__PURE__*/ /*#__PURE__*/bem(menuButtonClass)(), ['open']);
 
@@ -50,0 +50,0 @@ exports.menuArrowSelector = menuArrowSelector;

dist/style-utils/index.js

@@ -36,13 +36,13 @@ const menuContainerClass = 'szh-menu-container';
 const menuBlock = /*#__PURE__*/bem(menuClass);
-const menuSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(), [...createModifiers('state', ['opening', 'open', 'closing', 'closed']), ...createModifiers('align', ['start', 'center', 'end']), ...directions]);
-const menuArrowSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuArrowClass), directions);
-const menuItemSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuItemClass), ['hover', 'disabled', 'anchor', 'checked', 'open', 'submenu', 'focusable', 'type-radio', 'type-checkbox']);
-const menuDividerSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuDividerClass));
-const menuHeaderSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuHeaderClass));
-const menuGroupSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuGroupClass));
-const radioGroupSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(radioGroupClass));
-const submenuSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(subMenuClass));
-const menuContainerSelector = /*#__PURE__*/createSelector( /*#__PURE__*/ /*#__PURE__*/bem(menuContainerClass)(), ['itemTransition']);
-const menuButtonSelector = /*#__PURE__*/createSelector( /*#__PURE__*/ /*#__PURE__*/bem(menuButtonClass)(), ['open']);
+const menuSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(), [...createModifiers('state', ['opening', 'open', 'closing', 'closed']), ...createModifiers('align', ['start', 'center', 'end']), ...directions]);
+const menuArrowSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(menuArrowClass), directions);
+const menuItemSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(menuItemClass), ['hover', 'disabled', 'anchor', 'checked', 'open', 'submenu', 'focusable', 'type-radio', 'type-checkbox']);
+const menuDividerSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(menuDividerClass));
+const menuHeaderSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(menuHeaderClass));
+const menuGroupSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(menuGroupClass));
+const radioGroupSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(radioGroupClass));
+const submenuSelector = /*#__PURE__*/createSelector(/*#__PURE__*/menuBlock(subMenuClass));
+const menuContainerSelector = /*#__PURE__*/createSelector(/*#__PURE__*/ /*#__PURE__*/bem(menuContainerClass)(), ['itemTransition']);
+const menuButtonSelector = /*#__PURE__*/createSelector(/*#__PURE__*/ /*#__PURE__*/bem(menuButtonClass)(), ['open']);
 
 export { menuArrowSelector, menuButtonSelector, menuContainerSelector, menuDividerSelector, menuGroupSelector, menuHeaderSelector, menuItemSelector, menuSelector, radioGroupSelector, submenuSelector };

package.json

 {
   "name": "@szhsin/react-menu",
-  "version": "4.2.3",
+  "version": "4.2.4",
   "description": "React component for building accessible menu, dropdown, submenu, context menu and more.",
@@ -49,8 +49,8 @@ "author": "Zheng Song",
   "devDependencies": {
-    "@babel/core": "^7.25.8",
+    "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.25.9",
-    "@eslint/compat": "^1.1.1",
+    "@eslint/compat": "^1.2.4",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "@testing-library/jest-dom": "^6.5.0",
@@ -62,18 +62,19 @@ "@testing-library/react": "^16.0.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "eslint": "^9.12.0",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jest": "^28.8.3",
+    "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-hooks-addons": "^0.4.0",
-    "globals": "^15.9.0",
+    "eslint-plugin-react-hooks-addons": "^0.4.1",
+    "globals": "^15.13.0",
     "jest": "^29.7.0",
+    "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rollup": "^4.24.0",
+    "rollup": "^4.29.2",
     "sass": "^1.80.3",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   },
@@ -80,0 +81,0 @@ "overrides": {

types/index.d.ts

@@ -200,3 +200,3 @@ import React = require('react');
   /**
-   * Properties of this object are spread to a DOM element which captures focus for the menu.
+   * @deprecated This prop is currently ignored. It will be removed in the next major version.
    */
@@ -203,0 +203,0 @@ focusProps?: React.HTMLAttributes<HTMLElement>;

No alert changes

Worsened metrics

Total package byte prevSize

162475

decreased by-0.27%

Dev dependency count

29

increased by3.57%

Lines of code

5188

decreased by-0.38%

No dependency changes