Close menu when window is resized

Author: szhsin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@szhsin/react-menu",
-  "version": "0.10.6",
+  "version": "0.10.7",
   "description": "React menu components",
   "author": "Zheng Song",
   "license": "MIT",

src/components/MenuList.js

@@ -18,6 +18,7 @@ import {
     SettingsContext,
     MenuListContext,
     initialHoverIndex,
+    CloseReason,
     Keys,
     FocusPositions,
     HoverIndexActionTypes
@@ -45,6 +46,7 @@ export const MenuList = defineName(React.memo(function MenuList({
     children,
     onKeyDown,
     onAnimationEnd,
+    onClose,
     ...restProps }) {
 
     const [position, setPosition] = useState({ x: 0, y: 0 });
@@ -518,6 +520,14 @@ export const MenuList = defineName(React.memo(function MenuList({
         if (isOpen) handlePosition();
     }, [isOpen, handlePosition]);
 
+    useEffect(() => {
+        if (!isOpen || !onClose) return;
+
+        const handleResize = () => onClose({ reason: CloseReason.RESIZE });
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [isOpen, onClose]);
+
     useLayoutEffect(() => {
         if (animation && isMounted) {
             if (isOpen) {

src/components/useMenuList.js

@@ -1,4 +1,4 @@
-import React, { useRef, useMemo } from 'react';
+import React, { useRef, useMemo, useCallback } from 'react';
 import {
     safeCall,
     bem,
@@ -71,6 +71,10 @@ export const useMenuList = (
         }
     };
 
+    const handleMenuClose = useCallback(e => {
+        safeCall(onClose, e);
+    }, [onClose])
+
     return (
         <div id={id}
             className={bem(menuContainerClass)()}
@@ -81,7 +85,9 @@ export const useMenuList = (
 
             <SettingsContext.Provider value={settings}>
                 <EventHandlersContext.Provider value={eventHandlers}>
-                    <MenuList {...menuListProps} containerRef={containerRef}>
+                    <MenuList {...menuListProps}
+                        containerRef={containerRef}
+                        onClose={handleMenuClose}>
                         {children}
                     </MenuList>
                 </EventHandlersContext.Provider>

src/utils/constants.js

@@ -41,5 +41,6 @@ export const HoverIndexActionTypes = Object.freeze({
 export const CloseReason = Object.freeze({
     'CLICK': 'click',
     'CANCEL': 'cancel',
-    'BLUR': 'blur'
+    'BLUR': 'blur',
+    'RESIZE': 'resize'
 });