New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@szhsin/react-menu

Package Overview
Dependencies
Maintainers
1
Versions
84
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@szhsin/react-menu - npm Package Compare versions

Comparing version 3.5.2 to 3.5.3

dist/es/utils/submenuCtx.js

43

dist/es/components/ControlledMenu.js

@@ -7,3 +7,3 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';

import { jsx } from 'react/jsx-runtime';
import { SettingsContext, ItemSettingsContext, EventHandlersContext, MenuStateMap, Keys, CloseReason } from '../utils/constants.js';
import { SettingsContext, EventHandlersContext, MenuStateMap, Keys, CloseReason } from '../utils/constants.js';
import { rootMenuPropTypes } from '../utils/propTypes.js';

@@ -53,11 +53,7 @@ import { safeCall, values } from '../utils/utils.js';

reposition: reposition,
viewScroll: viewScroll
};
}, [initialMounted, unmountOnClose, transition, transitionTimeout, anchorRef, boundingBoxRef, boundingBoxPadding, reposition, viewScroll]);
var itemSettings = useMemo(function () {
return {
viewScroll: viewScroll,
submenuOpenDelay: submenuOpenDelay,
submenuCloseDelay: submenuCloseDelay
};
}, [submenuOpenDelay, submenuCloseDelay]);
}, [initialMounted, unmountOnClose, transition, transitionTimeout, anchorRef, boundingBoxRef, boundingBoxPadding, reposition, viewScroll, submenuOpenDelay, submenuCloseDelay]);
var eventHandlers = useMemo(function () {

@@ -90,21 +86,18 @@ return {

value: settings,
children: /*#__PURE__*/jsx(ItemSettingsContext.Provider, {
value: itemSettings,
children: /*#__PURE__*/jsx(EventHandlersContext.Provider, {
value: eventHandlers,
children: /*#__PURE__*/jsx(MenuList, _extends({}, restProps, {
ariaLabel: ariaLabel || 'Menu',
externalRef: externalRef,
children: /*#__PURE__*/jsx(EventHandlersContext.Provider, {
value: eventHandlers,
children: /*#__PURE__*/jsx(MenuList, _extends({}, restProps, {
ariaLabel: ariaLabel || 'Menu',
externalRef: externalRef,
containerRef: containerRef,
containerProps: {
className: className,
containerRef: containerRef,
containerProps: {
className: className,
containerRef: containerRef,
containerProps: containerProps,
skipOpen: skipOpen,
theming: theming,
transition: transition,
onClose: onClose
}
}))
})
containerProps: containerProps,
skipOpen: skipOpen,
theming: theming,
transition: transition,
onClose: onClose
}
}))
})

@@ -111,0 +104,0 @@ });

2

dist/es/components/FocusableItem.js

@@ -5,6 +5,6 @@ import { extends as _extends, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../_virtual/_rollupPluginBabelHelpers.js';

import { jsx } from 'react/jsx-runtime';
import { withHovering } from '../utils/withHovering.js';
import { useItemState } from '../hooks/useItemState.js';
import { useCombinedRef } from '../hooks/useCombinedRef.js';
import { useBEM } from '../hooks/useBEM.js';
import { withHovering } from '../utils/withHovering.js';
import { stylePropTypes } from '../utils/propTypes.js';

@@ -11,0 +11,0 @@ import { EventHandlersContext, roleMenuitem, menuClass, menuItemClass } from '../utils/constants.js';

2

dist/es/components/MenuItem.js

@@ -5,3 +5,2 @@ import { extends as _extends, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../_virtual/_rollupPluginBabelHelpers.js';

import { jsx } from 'react/jsx-runtime';
import { withHovering } from '../utils/withHovering.js';
import { useItemState } from '../hooks/useItemState.js';

@@ -11,2 +10,3 @@ import { EventHandlersContext, RadioGroupContext, roleMenuitem, menuClass, menuItemClass, roleNone, Keys } from '../utils/constants.js';

import { useBEM } from '../hooks/useBEM.js';
import { withHovering } from '../utils/withHovering.js';
import { stylePropTypes } from '../utils/propTypes.js';

@@ -13,0 +13,0 @@ import { mergeProps, commonProps, safeCall } from '../utils/utils.js';

36

dist/es/components/MenuList.js

@@ -6,2 +6,3 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';

import { jsxs, jsx } from 'react/jsx-runtime';
import { createSubmenuCtx } from '../utils/submenuCtx.js';
import { SettingsContext, MenuListContext, HoverActionTypes, positionAbsolute, dummyItemProps, MenuListItemContext, HoverItemContext, Keys, menuClass, CloseReason, FocusPositions, menuArrowClass } from '../utils/constants.js';

@@ -69,5 +70,4 @@ import { useItems } from '../hooks/useItems.js';

setExpandedDirection = _useState4[1];
var _useState5 = useState(0),
openSubmenuCount = _useState5[0],
setOpenSubmenuCount = _useState5[1];
var _useState5 = useState(createSubmenuCtx),
submenuCtx = _useState5[0];
var _useReducer = useReducer(function (c) {

@@ -86,4 +86,8 @@ return c + 1;

reposition = _useContext.reposition,
viewScroll = _useContext.viewScroll;
var reposFlag = useContext(MenuListContext).reposSubmenu || repositionFlag;
viewScroll = _useContext.viewScroll,
submenuCloseDelay = _useContext.submenuCloseDelay;
var _useContext2 = useContext(MenuListContext),
parentSubmenuCtx = _useContext2.submenuCtx,
_useContext2$reposSub = _useContext2.reposSubmenu,
reposFlag = _useContext2$reposSub === void 0 ? repositionFlag : _useContext2$reposSub;
var menuRef = useRef(null);

@@ -137,2 +141,12 @@ var focusRef = useRef();

};
var onPointerMove = function onPointerMove(e) {
e.stopPropagation();
submenuCtx.on(submenuCloseDelay, function () {
dispatch(HoverActionTypes.RESET);
focusRef.current.focus();
});
};
var onPointerLeave = function onPointerLeave(e) {
if (e.target === e.currentTarget) submenuCtx.off();
};
var handlePosition = useCallback(function (noOverflowCheck) {

@@ -344,12 +358,10 @@ var _anchorRef$current;

}, [isOpen, openTransition, closeTransition, captureFocus, menuItemFocus, dispatch]);
var isSubmenuOpen = openSubmenuCount > 0;
var itemContext = useMemo(function () {
return {
isParentOpen: isOpen,
isSubmenuOpen: isSubmenuOpen,
setOpenSubmenuCount: setOpenSubmenuCount,
submenuCtx: submenuCtx,
dispatch: dispatch,
updateItems: updateItems
};
}, [isOpen, isSubmenuOpen, dispatch, updateItems]);
}, [isOpen, submenuCtx, dispatch, updateItems]);
var maxHeight, overflowAmt;

@@ -362,2 +374,3 @@ if (overflowData) {

reposSubmenu: reposSubmenu,
submenuCtx: submenuCtx,
overflow: overflow,

@@ -368,3 +381,3 @@ overflowAmt: overflowAmt,

};
}, [reposSubmenu, overflow, overflowAmt, expandedDirection]);
}, [reposSubmenu, submenuCtx, overflow, overflowAmt, expandedDirection]);
var overflowStyle = maxHeight >= 0 ? {

@@ -395,2 +408,5 @@ maxHeight: maxHeight,

}, commonProps(isDisabled), mergeProps({
onPointerEnter: parentSubmenuCtx == null ? void 0 : parentSubmenuCtx.off,
onPointerMove: onPointerMove,
onPointerLeave: onPointerLeave,
onKeyDown: onKeyDown,

@@ -397,0 +413,0 @@ onAnimationEnd: onAnimationEnd

107

dist/es/components/SubMenu.js
import { extends as _extends, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../_virtual/_rollupPluginBabelHelpers.js';
import { useContext, useRef, useEffect, useImperativeHandle, useMemo } from 'react';
import { useContext, useRef, useState, useEffect, useImperativeHandle, useMemo } from 'react';
import { createPortal } from 'react-dom';

@@ -13,3 +13,3 @@ import { bool, oneOf, oneOfType, node, func, shape } from 'prop-types';

import { useBEM } from '../hooks/useBEM.js';
import { SettingsContext, ItemSettingsContext, MenuListContext, MenuListItemContext, menuClass, subMenuClass, roleNone, roleMenuitem, menuItemClass, HoverActionTypes, Keys, FocusPositions } from '../utils/constants.js';
import { SettingsContext, MenuListContext, MenuListItemContext, menuClass, subMenuClass, roleNone, roleMenuitem, menuItemClass, HoverActionTypes, Keys, FocusPositions } from '../utils/constants.js';
import { useCombinedRef } from '../hooks/useCombinedRef.js';

@@ -35,16 +35,14 @@ import { mergeProps, commonProps, safeCall, isMenuOpen, batchedUpdates } from '../utils/utils.js';

var settings = useContext(SettingsContext);
var rootMenuRef = settings.rootMenuRef;
var _useContext = useContext(ItemSettingsContext),
submenuOpenDelay = _useContext.submenuOpenDelay,
submenuCloseDelay = _useContext.submenuCloseDelay;
var _useContext2 = useContext(MenuListContext),
parentMenuRef = _useContext2.parentMenuRef,
parentDir = _useContext2.parentDir,
parentOverflow = _useContext2.overflow;
var _useContext3 = useContext(MenuListItemContext),
isParentOpen = _useContext3.isParentOpen,
isSubmenuOpen = _useContext3.isSubmenuOpen,
setOpenSubmenuCount = _useContext3.setOpenSubmenuCount,
dispatch = _useContext3.dispatch,
updateItems = _useContext3.updateItems;
var rootMenuRef = settings.rootMenuRef,
submenuOpenDelay = settings.submenuOpenDelay,
submenuCloseDelay = settings.submenuCloseDelay;
var _useContext = useContext(MenuListContext),
parentMenuRef = _useContext.parentMenuRef,
parentDir = _useContext.parentDir,
parentOverflow = _useContext.overflow;
var _useContext2 = useContext(MenuListItemContext),
isParentOpen = _useContext2.isParentOpen,
submenuCtx = _useContext2.submenuCtx,
dispatch = _useContext2.dispatch,
updateItems = _useContext2.updateItems;
var isPortal = parentOverflow !== 'visible';

@@ -59,7 +57,11 @@ var _useMenuStateAndFocus = useMenuStateAndFocus(settings),

var containerRef = useRef(null);
var timeoutId = useRef(0);
var _useState = useState({
v: 0
}),
timerId = _useState[0];
var stopTimer = function stopTimer() {
if (timeoutId.current) {
clearTimeout(timeoutId.current);
timeoutId.current = 0;
submenuCtx.off();
if (timerId.v) {
clearTimeout(timerId.v);
timerId.v = 0;
}

@@ -77,21 +79,31 @@ };

setHover();
if (!openTrigger) timeoutId.current = setTimeout(function () {
if (!openTrigger) timerId.v = setTimeout(function () {
return batchedUpdates(_openMenu2);
}, Math.max(delay, 0));
};
var handlePointerMove = function handlePointerMove() {
if (timeoutId.current || isOpen || isDisabled) return;
if (isSubmenuOpen) {
timeoutId.current = setTimeout(function () {
return delayOpen(submenuOpenDelay - submenuCloseDelay);
}, submenuCloseDelay);
} else {
delayOpen(submenuOpenDelay);
}
var onPointerMove = function onPointerMove(e) {
if (isDisabled) return;
e.stopPropagation();
if (timerId.v || isOpen) return;
submenuCtx.on(submenuCloseDelay, function () {
return delayOpen(submenuOpenDelay - submenuCloseDelay);
}, function () {
return delayOpen(submenuOpenDelay);
});
};
var handlePointerLeave = function handlePointerLeave() {
var onPointerLeave = function onPointerLeave() {
stopTimer();
if (!isOpen) dispatch(HoverActionTypes.UNSET, itemRef.current);
};
var handleKeyDown = function handleKeyDown(e) {
var onKeyDown = function onKeyDown(e) {
if (!isHovering) return;
switch (e.key) {
case Keys.ENTER:
case Keys.SPACE:
case Keys.RIGHT:
openTrigger !== 'none' && _openMenu2(FocusPositions.FIRST);
break;
}
};
var onKeyDownOfRoot = function onKeyDownOfRoot(e) {
var handled = false;

@@ -115,19 +127,12 @@ switch (e.key) {

};
var handleItemKeyDown = function handleItemKeyDown(e) {
if (!isHovering) return;
switch (e.key) {
case Keys.ENTER:
case Keys.SPACE:
case Keys.RIGHT:
openTrigger !== 'none' && _openMenu2(FocusPositions.FIRST);
break;
}
};
useItemEffect(isDisabled, itemRef, updateItems);
useMenuChange(onMenuChange, isOpen);
useEffect(function () {
return submenuCtx.toggle(isOpen);
}, [submenuCtx, isOpen]);
useEffect(function () {
return function () {
return clearTimeout(timeoutId.current);
return clearTimeout(timerId.v);
};
}, []);
}, [timerId]);
useEffect(function () {

@@ -140,7 +145,2 @@ if (isHovering && isParentOpen) {

}, [isHovering, isParentOpen, toggleMenu, itemRef]);
useEffect(function () {
setOpenSubmenuCount(function (count) {
return isOpen ? count + 1 : Math.max(count - 1, 0);
});
}, [setOpenSubmenuCount, isOpen]);
useImperativeHandle(instanceRef, function () {

@@ -171,5 +171,6 @@ return {

var mergedItemProps = mergeProps({
onPointerMove: handlePointerMove,
onPointerLeave: handlePointerLeave,
onKeyDown: handleItemKeyDown,
onPointerEnter: submenuCtx.off,
onPointerMove: onPointerMove,
onPointerLeave: onPointerLeave,
onKeyDown: onKeyDown,
onClick: function onClick() {

@@ -202,3 +203,3 @@ return openTrigger !== 'none' && _openMenu2();

ref: containerRef,
onKeyDown: handleKeyDown,
onKeyDown: onKeyDownOfRoot,
children: [/*#__PURE__*/jsx("div", _extends({

@@ -205,0 +206,0 @@ role: roleMenuitem,

31

dist/es/hooks/useItemState.js

@@ -1,14 +0,13 @@

import { useContext, useRef, useEffect } from 'react';
import { useContext, useEffect } from 'react';
import { useItemEffect } from './useItemEffect.js';
import { ItemSettingsContext, MenuListItemContext, HoverActionTypes } from '../utils/constants.js';
import { SettingsContext, MenuListItemContext, HoverActionTypes } from '../utils/constants.js';
var useItemState = function useItemState(itemRef, focusRef, isHovering, isDisabled) {
var _useContext = useContext(ItemSettingsContext),
var _useContext = useContext(SettingsContext),
submenuCloseDelay = _useContext.submenuCloseDelay;
var _useContext2 = useContext(MenuListItemContext),
isParentOpen = _useContext2.isParentOpen,
isSubmenuOpen = _useContext2.isSubmenuOpen,
submenuCtx = _useContext2.submenuCtx,
dispatch = _useContext2.dispatch,
updateItems = _useContext2.updateItems;
var timeoutId = useRef(0);
var setHover = function setHover() {

@@ -23,17 +22,10 @@ !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, itemRef.current);

};
var onPointerMove = function onPointerMove() {
if (isSubmenuOpen) {
if (!timeoutId.current) timeoutId.current = setTimeout(function () {
timeoutId.current = 0;
setHover();
}, submenuCloseDelay);
} else {
setHover();
var onPointerMove = function onPointerMove(e) {
if (!isDisabled) {
e.stopPropagation();
submenuCtx.on(submenuCloseDelay, setHover, setHover);
}
};
var onPointerLeave = function onPointerLeave(_, keepHover) {
if (timeoutId.current) {
clearTimeout(timeoutId.current);
timeoutId.current = 0;
}
submenuCtx.off();
!keepHover && unsetHover();

@@ -43,7 +35,2 @@ };

useEffect(function () {
return function () {
return clearTimeout(timeoutId.current);
};
}, []);
useEffect(function () {
if (isHovering && isParentOpen) {

@@ -50,0 +37,0 @@ focusRef.current && focusRef.current.focus();

3

dist/es/utils/constants.js

@@ -19,3 +19,2 @@ import { createContext } from 'react';

var SettingsContext = /*#__PURE__*/createContext({});
var ItemSettingsContext = /*#__PURE__*/createContext({});
var Keys = /*#__PURE__*/Object.freeze({

@@ -66,2 +65,2 @@ ENTER: 'Enter',

export { CloseReason, EventHandlersContext, FocusPositions, HoverActionTypes, HoverItemContext, ItemSettingsContext, Keys, MenuListContext, MenuListItemContext, MenuStateMap, RadioGroupContext, SettingsContext, dummyItemProps, 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, dummyItemProps, menuArrowClass, menuButtonClass, menuClass, menuContainerClass, menuDividerClass, menuGroupClass, menuHeaderClass, menuItemClass, positionAbsolute, radioGroupClass, roleMenuitem, roleNone, subMenuClass };

2

dist/es/utils/utils.js

@@ -70,3 +70,3 @@ import { unstable_batchedUpdates } from 'react-dom';

node = node.parentNode;
if (!node || node === document.body) return;
if (!node || node === document.body || !node.parentNode) return;
var _getComputedStyle = getComputedStyle(node),

@@ -73,0 +73,0 @@ overflow = _getComputedStyle.overflow,

26

package.json
{
"name": "@szhsin/react-menu",
"version": "3.5.2",
"version": "3.5.3",
"description": "React component for building accessible menu, dropdown, submenu, context menu and more.",

@@ -50,16 +50,16 @@ "author": "Zheng Song",

"devDependencies": {
"@babel/core": "^7.21.0",
"@babel/preset-env": "^7.20.2",
"@babel/core": "^7.21.4",
"@babel/preset-env": "^7.21.4",
"@babel/preset-react": "^7.18.6",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-node-resolve": "^15.0.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@types/jest": "^29.4.0",
"@types/react": "^18.0.28",
"@types/jest": "^29.5.1",
"@types/react": "^18.0.37",
"babel-plugin-pure-annotations": "^0.1.2",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"dtslint": "^4.2.1",
"eslint": "^8.35.0",
"eslint-config-prettier": "^8.6.0",
"eslint": "^8.38.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-jest": "^27.2.1",

@@ -69,10 +69,10 @@ "eslint-plugin-react": "^7.32.2",

"eslint-plugin-react-hooks-addons": "^0.3.1",
"jest": "^29.4.3",
"jest-environment-jsdom": "^29.4.3",
"jest": "^29.5.0",
"jest-environment-jsdom": "^29.5.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.8.4",
"prettier": "^2.8.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rollup": "^3.17.3",
"sass": "^1.58.3",
"rollup": "^3.20.6",
"sass": "^1.62.0",
"typescript": "^4.9.5"

@@ -79,0 +79,0 @@ },

dist/index.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc