@szhsin/react-menu - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

dist/es/components/MenuGroup.js

@@ -5,2 +5,3 @@ import { forwardRef, useRef, useState, useContext } from 'react';
 import { useLayoutEffect as useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect.js';
+import { getNormalizedClientRect } from '../positionUtils/getNormalizedClientRect.js';
 import { useCombinedRef } from '../hooks/useCombinedRef.js';
@@ -26,3 +27,3 @@ import { useBEM } from '../hooks/useBEM.js';
     if (takeOverflow && overflowAmt >= 0) {
-      maxHeight = ref.current.getBoundingClientRect().height - overflowAmt;
+      maxHeight = getNormalizedClientRect(ref.current).height - overflowAmt;
       if (maxHeight < 0) maxHeight = 0;
@@ -29,0 +30,0 @@ }

dist/es/components/MenuList.js

@@ -12,2 +12,3 @@ import { useState, useReducer, useContext, useRef, useCallback, useEffect, useMemo } from 'react';
 import { useLayoutEffect as useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect.js';
+import { getNormalizedClientRect } from '../positionUtils/getNormalizedClientRect.js';
 import { useBEM } from '../hooks/useBEM.js';
@@ -280,3 +281,3 @@ import { useCombinedRef } from '../hooks/useCombinedRef.js';
       } else {
-        const borderRect = target.getBoundingClientRect();
+        const borderRect = getNormalizedClientRect(target);
         width = borderRect.width;
@@ -354,4 +355,5 @@ height = borderRect.height;
     state,
+    align,
     dir: expandedDirection
-  }), [state, expandedDirection]);
+  }), [state, align, expandedDirection]);
   const arrowModifiers = useMemo(() => ({
@@ -358,0 +360,0 @@ dir: expandedDirection

dist/es/positionUtils/getPositionHelpers.js

@@ -0,5 +1,6 @@
+import { getNormalizedClientRect } from './getNormalizedClientRect.js';
 import { parsePadding } from '../utils/utils.js';
 
 const getPositionHelpers = (containerRef, menuRef, menuScroll, boundingBoxPadding) => {
-  const menuRect = menuRef.current.getBoundingClientRect();
+  const menuRect = getNormalizedClientRect(menuRef.current);
   const containerRect = containerRef.current.getBoundingClientRect();
@@ -6,0 +7,0 @@ const boundingRect = menuScroll === window ? {

dist/index.js

@@ -587,4 +587,12 @@ 'use strict';
 
+const getNativeDimension = (transformed, untransformed) => Math.round(transformed) === untransformed ? transformed : untransformed;
+const getNormalizedClientRect = element => {
+  const rect = element.getBoundingClientRect();
+  rect.width = getNativeDimension(rect.width, element.offsetWidth);
+  rect.height = getNativeDimension(rect.height, element.offsetHeight);
+  return rect;
+};
+
 const getPositionHelpers = (containerRef, menuRef, menuScroll, boundingBoxPadding) => {
-  const menuRect = menuRef.current.getBoundingClientRect();
+  const menuRect = getNormalizedClientRect(menuRef.current);
   const containerRect = containerRef.current.getBoundingClientRect();
@@ -1136,3 +1144,3 @@ const boundingRect = menuScroll === window ? {
       } else {
-        const borderRect = target.getBoundingClientRect();
+        const borderRect = getNormalizedClientRect(target);
         width = borderRect.width;
@@ -1210,4 +1218,5 @@ height = borderRect.height;
     state,
+    align,
     dir: expandedDirection
-  }), [state, expandedDirection]);
+  }), [state, align, expandedDirection]);
   const arrowModifiers = react.useMemo(() => ({
@@ -1867,3 +1876,3 @@ dir: expandedDirection
     if (takeOverflow && overflowAmt >= 0) {
-      maxHeight = ref.current.getBoundingClientRect().height - overflowAmt;
+      maxHeight = getNormalizedClientRect(ref.current).height - overflowAmt;
       if (maxHeight < 0) maxHeight = 0;
@@ -1870,0 +1879,0 @@ }

dist/style-utils/index.cjs.js

@@ -35,5 +35,6 @@ 'use strict';
 };
-const directions = ['dir-left', 'dir-right', 'dir-top', 'dir-bottom'];
+const createModifiers = (name, values) => values.map(value => `${name}-${value}`);
+const directions = /*#__PURE__*/createModifiers('dir', ['left', 'right', 'top', 'bottom']);
 const menuBlock = /*#__PURE__*/bem(menuClass);
-const menuSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(), ['state-opening', 'state-open', 'state-closing', 'state-closed', ...directions]);
+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);
@@ -40,0 +41,0 @@ const menuItemSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuItemClass), ['hover', 'disabled', 'anchor', 'checked', 'open', 'submenu', 'focusable', 'type-radio', 'type-checkbox']);

dist/style-utils/index.js

@@ -33,5 +33,6 @@ const menuContainerClass = 'szh-menu-container';
 };
-const directions = ['dir-left', 'dir-right', 'dir-top', 'dir-bottom'];
+const createModifiers = (name, values) => values.map(value => `${name}-${value}`);
+const directions = /*#__PURE__*/createModifiers('dir', ['left', 'right', 'top', 'bottom']);
 const menuBlock = /*#__PURE__*/bem(menuClass);
-const menuSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(), ['state-opening', 'state-open', 'state-closing', 'state-closed', ...directions]);
+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);
@@ -38,0 +39,0 @@ const menuItemSelector = /*#__PURE__*/createSelector( /*#__PURE__*/menuBlock(menuItemClass), ['hover', 'disabled', 'anchor', 'checked', 'open', 'submenu', 'focusable', 'type-radio', 'type-checkbox']);

package.json

 {
   "name": "@szhsin/react-menu",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "React component for building accessible menu, dropdown, submenu, context menu and more.",
@@ -29,3 +29,3 @@ "author": "Zheng Song",
     "start": "run-p \"css -- --watch\" watch",
-    "build": "run-s clean pret lint types css bundle",
+    "build": "run-s clean pret lint css bundle",
     "test": "jest",
@@ -51,19 +51,19 @@ "test:watch": "jest --watch --verbose",
   "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-react": "^7.22.15",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.5",
-    "@types/react": "^18.2.21",
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.3",
     "babel-plugin-pure-annotations": "^0.1.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "dtslint": "^4.2.1",
-    "eslint": "^8.50.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-jest": "^27.2.3",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-hooks-addons": "^0.3.1",
@@ -73,8 +73,8 @@ "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^3.29.2",
-    "sass": "^1.66.1",
-    "typescript": "^5.2.2"
+    "prettier": "^3.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.18.0",
+    "sass": "^1.77.6",
+    "typescript": "^5.5.3"
   },
@@ -81,0 +81,0 @@ "keywords": [

types/index.d.ts

@@ -112,2 +112,6 @@ import React = require('react');
   /**
+   * Alignment of menu with anchor element.
+   */
+  align: MenuAlign;
+  /**
    * Computed direction in which the menu expands.
@@ -114,0 +118,0 @@ */

types/style-utils.d.ts

@@ -46,2 +46,15 @@ interface Base {
       stateClosed: string;
+
+      /**
+       * Aligning start with anchor element
+       */
+      alignStart: string;
+      /**
+       * Aligning center with anchor element
+       */
+      alignCenter: string;
+      /**
+       * Aligning end with anchor element
+       */
+      alignEnd: string;
     }
@@ -48,0 +61,0 @@ >;

No alert changes

Improved metrics

Total package byte prevSize

164830

increased by1.9%

Number of package files

50

increased by4.17%

Lines of code

5266

increased by1.78%

No dependency changes