Merge pull request #1535 from szhsin/feat/mouse-over

Set hover state on menu items when the mouse moves over them

Author: szhsin

README.md

@@ -1,24 +1,23 @@
 # React-Menu
 
-> An accessible and keyboard-friendly React menu library.
+> An accessible, keyboard-friendly React menu library
 
 **[Live examples and docs](https://szhsin.github.io/react-menu/)**
 
 [![NPM](https://img.shields.io/npm/v/@szhsin/react-menu.svg)](https://www.npmjs.com/package/@szhsin/react-menu)
 [![NPM](https://img.shields.io/npm/dm/@szhsin/react-menu)](https://www.npmjs.com/package/@szhsin/react-menu)
-[![TypeScript](https://img.shields.io/badge/TypeScript-.d.ts-blue.svg)](https://github.com/szhsin/react-menu/blob/master/types/index.d.ts)
+[![bundlephobia](https://img.shields.io/bundlephobia/minzip/@szhsin/react-menu)](https://bundlephobia.com/package/@szhsin/react-menu)
 [![Known Vulnerabilities](https://snyk.io/test/github/szhsin/react-menu/badge.svg)](https://snyk.io/test/github/szhsin/react-menu)
 
 ## Features
 
-- Unstyled and lightweight [(8kB)](https://bundlephobia.com/package/@szhsin/react-menu) React menu components
-- Unlimited levels of submenu
-- Supports dropdown, hover, and context menu
-- Supports radio and checkbox menu items
-- Flexible menu positioning
-- Comprehensive keyboard interactions
-- Customisable [styling](https://szhsin.github.io/react-menu/#styling)
-- [Level 3 support](https://github.com/reactwg/react-18/discussions/70) of React 18 concurrent rendering
+- [Lightweight](https://bundlephobia.com/package/@szhsin/react-menu), unstyled React menu components
+- Unlimited submenu nesting
+- Supports dropdown, hover, and context menus
+- Radio and checkbox menu items
+- Flexible positioning options
+- Full keyboard interaction support
+- Compatible with React 18+ concurrent rendering
 - Supports server-side rendering
 - Implements [WAI-ARIA menu](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) pattern
 

dist/cjs/components/FocusableItem.cjs

@@ -21,6 +21,7 @@ const FocusableItem = /*#__PURE__*/withHovering.withHovering('FocusableItem', fu
   const isDisabled = !!disabled;
   const ref = react.useRef(null);
   const {
+    mouseOver,
     setHover,
     onPointerLeave,
     ...restStateProps
@@ -30,9 +31,9 @@ const FocusableItem = /*#__PURE__*/withHovering.withHovering('FocusableItem', fu
   } = react.useContext(constants.EventHandlersContext);
   const modifiers = react.useMemo(() => ({
     disabled: isDisabled,
-    hover: isHovering,
+    hover: mouseOver || isHovering,
     focusable: true
-  }), [isDisabled, isHovering]);
+  }), [isDisabled, isHovering, mouseOver]);
   const renderChildren = react.useMemo(() => utils.safeCall(children, {
     ...modifiers,
     ref,

dist/cjs/components/MenuItem.cjs

@@ -25,6 +25,7 @@ const MenuItem = /*#__PURE__*/withHovering.withHovering('MenuItem', function Men
 }) {
   const isDisabled = !!disabled;
   const {
+    mouseOver,
     setHover,
     ...restStateProps
   } = useItemState.useItemState(itemRef, itemRef, isHovering, isDisabled);
@@ -63,10 +64,10 @@ const MenuItem = /*#__PURE__*/withHovering.withHovering('MenuItem', function Men
   const modifiers = react.useMemo(() => ({
     type,
     disabled: isDisabled,
-    hover: isHovering,
+    hover: mouseOver || isHovering,
     checked: isChecked,
     anchor: isAnchor
-  }), [type, isDisabled, isHovering, isChecked, isAnchor]);
+  }), [type, isDisabled, mouseOver, isHovering, isChecked, isAnchor]);
   const mergedProps = utils.mergeProps({
     ...restStateProps,
     onPointerDown: setHover,

dist/cjs/components/SubMenu.cjs

@@ -6,6 +6,7 @@ var MenuList = require('./MenuList.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var withHovering = require('../utils/withHovering.cjs');
 var useMenuStateAndFocus = require('../hooks/useMenuStateAndFocus.cjs');
+var useMouseOver = require('../hooks/useMouseOver.cjs');
 var useItemEffect = require('../hooks/useItemEffect.cjs');
 var constants = require('../utils/constants.cjs');
 var useBEM = require('../hooks/useBEM.cjs');
@@ -50,6 +51,7 @@ const SubMenu = /*#__PURE__*/withHovering.withHovering('SubMenu', function SubMe
     ...settings,
     onMenuChange
   });
+  const [mouseOver, mouseOverStart, mouseOverEnd] = useMouseOver.useMouseOver(isHovering);
   const {
     state
   } = stateProps;
@@ -79,10 +81,12 @@ const SubMenu = /*#__PURE__*/withHovering.withHovering('SubMenu', function SubMe
   const onPointerMove = e => {
     if (isDisabled) return;
     e.stopPropagation();
+    mouseOverStart();
     if (timerId.v || isOpen) return;
     submenuCtx.on(submenuCloseDelay, () => delayOpen(submenuOpenDelay - submenuCloseDelay), () => delayOpen(submenuOpenDelay));
   };
   const onPointerLeave = () => {
+    mouseOverEnd();
     stopTimer();
     if (!isOpen) dispatch(constants.HoverActionTypes.UNSET, itemRef.current);
   };
@@ -141,10 +145,10 @@ const SubMenu = /*#__PURE__*/withHovering.withHovering('SubMenu', function SubMe
   }));
   const modifiers = react.useMemo(() => ({
     open: isOpen,
-    hover: isHovering,
+    hover: mouseOver || isHovering,
     disabled: isDisabled,
     submenu: true
-  }), [isOpen, isHovering, isDisabled]);
+  }), [isOpen, isHovering, isDisabled, mouseOver]);
   const {
     ref: externalItemRef,
     className: itemClassName,

dist/cjs/hooks/useItemState.cjs

@@ -2,9 +2,11 @@
 
 var react = require('react');
 var useItemEffect = require('./useItemEffect.cjs');
+var useMouseOver = require('./useMouseOver.cjs');
 var constants = require('../utils/constants.cjs');
 
 const useItemState = (itemRef, focusRef, isHovering, isDisabled) => {
+  const [mouseOver, mouseOverStart, mouseOverEnd] = useMouseOver.useMouseOver(isHovering);
   const {
     submenuCloseDelay
   } = react.useContext(constants.SettingsContext);
@@ -26,10 +28,12 @@ const useItemState = (itemRef, focusRef, isHovering, isDisabled) => {
   const onPointerMove = e => {
     if (!isDisabled) {
       e.stopPropagation();
+      mouseOverStart();
       submenuCtx.on(submenuCloseDelay, setHover, setHover);
     }
   };
   const onPointerLeave = (_, keepHover) => {
+    mouseOverEnd();
     submenuCtx.off();
     !keepHover && unsetHover();
   };
@@ -40,6 +44,7 @@ const useItemState = (itemRef, focusRef, isHovering, isDisabled) => {
     }
   }, [focusRef, isHovering, isParentOpen]);
   return {
+    mouseOver,
     setHover,
     onBlur,
     onPointerMove,

dist/cjs/hooks/useMouseOver.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var react = require('react');
+
+const useMouseOver = isHovering => {
+  const [mouseOver, setMouseOver] = react.useState(false);
+  react.useEffect(() => {
+    !isHovering && setMouseOver(false);
+  }, [isHovering]);
+  return [mouseOver, () => !mouseOver && setMouseOver(true), () => setMouseOver(false)];
+};
+
+exports.useMouseOver = useMouseOver;

dist/esm/components/FocusableItem.mjs

@@ -19,6 +19,7 @@ const FocusableItem = /*#__PURE__*/withHovering('FocusableItem', function Focusa
   const isDisabled = !!disabled;
   const ref = useRef(null);
   const {
+    mouseOver,
     setHover,
     onPointerLeave,
     ...restStateProps
@@ -28,9 +29,9 @@ const FocusableItem = /*#__PURE__*/withHovering('FocusableItem', function Focusa
   } = useContext(EventHandlersContext);
   const modifiers = useMemo(() => ({
     disabled: isDisabled,
-    hover: isHovering,
+    hover: mouseOver || isHovering,
     focusable: true
-  }), [isDisabled, isHovering]);
+  }), [isDisabled, isHovering, mouseOver]);
   const renderChildren = useMemo(() => safeCall(children, {
     ...modifiers,
     ref,

dist/esm/components/MenuItem.mjs

@@ -23,6 +23,7 @@ const MenuItem = /*#__PURE__*/withHovering('MenuItem', function MenuItem({
 }) {
   const isDisabled = !!disabled;
   const {
+    mouseOver,
     setHover,
     ...restStateProps
   } = useItemState(itemRef, itemRef, isHovering, isDisabled);
@@ -61,10 +62,10 @@ const MenuItem = /*#__PURE__*/withHovering('MenuItem', function MenuItem({
   const modifiers = useMemo(() => ({
     type,
     disabled: isDisabled,
-    hover: isHovering,
+    hover: mouseOver || isHovering,
     checked: isChecked,
     anchor: isAnchor
-  }), [type, isDisabled, isHovering, isChecked, isAnchor]);
+  }), [type, isDisabled, mouseOver, isHovering, isChecked, isAnchor]);
   const mergedProps = mergeProps({
     ...restStateProps,
     onPointerDown: setHover,

dist/esm/components/SubMenu.mjs

@@ -4,6 +4,7 @@ import { MenuList } from './MenuList.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { withHovering } from '../utils/withHovering.mjs';
 import { useMenuStateAndFocus } from '../hooks/useMenuStateAndFocus.mjs';
+import { useMouseOver } from '../hooks/useMouseOver.mjs';
 import { useItemEffect } from '../hooks/useItemEffect.mjs';
 import { SettingsContext, MenuListContext, MenuListItemContext, roleNone, roleMenuitem, menuClass, menuItemClass, subMenuClass, HoverActionTypes, Keys, FocusPositions } from '../utils/constants.mjs';
 import { useBEM } from '../hooks/useBEM.mjs';
@@ -48,6 +49,7 @@ const SubMenu = /*#__PURE__*/withHovering('SubMenu', function SubMenu({
     ...settings,
     onMenuChange
   });
+  const [mouseOver, mouseOverStart, mouseOverEnd] = useMouseOver(isHovering);
   const {
     state
   } = stateProps;
@@ -77,10 +79,12 @@ const SubMenu = /*#__PURE__*/withHovering('SubMenu', function SubMenu({
   const onPointerMove = e => {
     if (isDisabled) return;
     e.stopPropagation();
+    mouseOverStart();
     if (timerId.v || isOpen) return;
     submenuCtx.on(submenuCloseDelay, () => delayOpen(submenuOpenDelay - submenuCloseDelay), () => delayOpen(submenuOpenDelay));
   };
   const onPointerLeave = () => {
+    mouseOverEnd();
     stopTimer();
     if (!isOpen) dispatch(HoverActionTypes.UNSET, itemRef.current);
   };
@@ -139,10 +143,10 @@ const SubMenu = /*#__PURE__*/withHovering('SubMenu', function SubMenu({
   }));
   const modifiers = useMemo(() => ({
     open: isOpen,
-    hover: isHovering,
+    hover: mouseOver || isHovering,
     disabled: isDisabled,
     submenu: true
-  }), [isOpen, isHovering, isDisabled]);
+  }), [isOpen, isHovering, isDisabled, mouseOver]);
   const {
     ref: externalItemRef,
     className: itemClassName,

dist/esm/hooks/useItemState.mjs

@@ -1,8 +1,10 @@
 import { useContext, useEffect } from 'react';
 import { useItemEffect } from './useItemEffect.mjs';
+import { useMouseOver } from './useMouseOver.mjs';
 import { SettingsContext, MenuListItemContext, HoverActionTypes } from '../utils/constants.mjs';
 
 const useItemState = (itemRef, focusRef, isHovering, isDisabled) => {
+  const [mouseOver, mouseOverStart, mouseOverEnd] = useMouseOver(isHovering);
   const {
     submenuCloseDelay
   } = useContext(SettingsContext);
@@ -24,10 +26,12 @@ const useItemState = (itemRef, focusRef, isHovering, isDisabled) => {
   const onPointerMove = e => {
     if (!isDisabled) {
       e.stopPropagation();
+      mouseOverStart();
       submenuCtx.on(submenuCloseDelay, setHover, setHover);
     }
   };
   const onPointerLeave = (_, keepHover) => {
+    mouseOverEnd();
     submenuCtx.off();
     !keepHover && unsetHover();
   };
@@ -38,6 +42,7 @@ const useItemState = (itemRef, focusRef, isHovering, isDisabled) => {
     }
   }, [focusRef, isHovering, isParentOpen]);
   return {
+    mouseOver,
     setHover,
     onBlur,
     onPointerMove,