@szhsin/react-menu - npm Package Compare versions

Comparing version 3.3.1 to 3.4.0

dist/es/components/MenuList.js

@@ -8,3 +8,3 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useItems } from '../hooks/useItems.js';
-import { getScrollAncestor, floatEqual, mergeProps, commonProps, isMenuOpen, getTransition, safeCall, batchedUpdates } from '../utils/utils.js';
+import { getScrollAncestor, floatEqual, commonProps, mergeProps, isMenuOpen, getTransition, safeCall, batchedUpdates } from '../utils/utils.js';
 import { getPositionHelpers } from '../positionUtils/getPositionHelpers.js';
@@ -16,3 +16,3 @@ import { positionMenu } from '../positionUtils/positionMenu.js';
 
-var _excluded = ["ariaLabel", "menuClassName", "menuStyle", "arrowClassName", "arrowStyle", "anchorPoint", "anchorRef", "containerRef", "containerProps", "externalRef", "parentScrollingRef", "arrow", "align", "direction", "position", "overflow", "setDownOverflow", "repositionFlag", "captureFocus", "state", "endTransition", "isDisabled", "menuItemFocus", "offsetX", "offsetY", "children", "onClose"];
+var _excluded = ["ariaLabel", "menuClassName", "menuStyle", "arrowClassName", "arrowStyle", "anchorPoint", "anchorRef", "containerRef", "containerProps", "focusProps", "externalRef", "parentScrollingRef", "arrow", "align", "direction", "position", "overflow", "setDownOverflow", "repositionFlag", "captureFocus", "state", "endTransition", "isDisabled", "menuItemFocus", "offsetX", "offsetY", "children", "onClose"];
 var MenuList = function MenuList(_ref) {
@@ -28,2 +28,3 @@ var ariaLabel = _ref.ariaLabel,
     containerProps = _ref.containerProps,
+    focusProps = _ref.focusProps,
     externalRef = _ref.externalRef,
@@ -389,6 +390,6 @@ parentScrollingRef = _ref.parentScrollingRef,
     "aria-label": ariaLabel
-  }, mergeProps({
+  }, commonProps(isDisabled), mergeProps({
     onKeyDown: onKeyDown,
     onAnimationEnd: onAnimationEnd
-  }, restProps), commonProps(isDisabled), {
+  }, restProps), {
     ref: useCombinedRef(externalRef, menuRef),
@@ -407,4 +408,3 @@ className: useBEM({
     }),
-    children: [/*#__PURE__*/jsx("div", {
-      ref: focusRef,
+    children: [/*#__PURE__*/jsx("div", _extends({
       tabIndex: -1,
@@ -416,3 +416,5 @@ style: {
       }
-    }), arrow && /*#__PURE__*/jsx("div", {
+    }, focusProps, {
+      ref: focusRef
+    })), arrow && /*#__PURE__*/jsx("div", {
       className: _arrowClass,
@@ -419,0 +421,0 @@ style: _extends({}, arrowStyle, {

dist/es/utils/propTypes.js

@@ -11,2 +11,3 @@ import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 }, /*#__PURE__*/stylePropTypes('menu'), /*#__PURE__*/stylePropTypes('arrow'), {
+  focusProps: object,
   menuStyle: object,
@@ -13,0 +14,0 @@ arrowStyle: object,

package.json

 {
   "name": "@szhsin/react-menu",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "React component for building accessible menu, dropdown, submenu, context menu and more.",
@@ -50,3 +50,3 @@ "author": "Zheng Song",
   "devDependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
@@ -58,21 +58,21 @@ "@babel/preset-react": "^7.18.6",
     "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.4",
-    "@types/react": "^18.0.26",
+    "@types/jest": "^29.2.5",
+    "@types/react": "^18.0.27",
     "babel-plugin-pure-annotations": "^0.1.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "dtslint": "^4.2.1",
-    "eslint": "^8.29.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.7",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint": "^8.32.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-react": "^7.32.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-hooks-addons": "^0.3.1",
     "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest-environment-jsdom": "^29.4.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.1",
+    "prettier": "^2.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.7.4",
-    "sass": "^1.56.2",
+    "rollup": "^3.10.1",
+    "sass": "^1.57.1",
     "typescript": "^4.9.4"
@@ -79,0 +79,0 @@ },

types/index.d.ts

@@ -201,2 +201,6 @@ import React = require('react');
   /**
+   * Properties of this object are spread to a DOM element which captures focus for the menu.
+   */
+  focusProps?: React.HTMLAttributes<HTMLElement>;
+  /**
    * Set the horizontal distance (in pixels) between menu and its anchor element.
@@ -203,0 +207,0 @@ * The value can be negative.

No alert changes

Improved metrics

Total package byte prevSize

187249

0.2%

Lines of code

5216

0.19%

No dependency changes