@ringcentral/spring-ui 1.9.2 → 1.9.3

package/NestedMenuContext.js

@@ -8,7 +8,7 @@ const useNestedChildMenu = (props) => {
     const { open, closeMenu, id } = props;
     const context = useNestedMenuContext();
     const { registOpenedSubMenu } = context ?? {};
-    const closeMenuMemo = useEventCallback(() => closeMenu());
+    const closeMenuMemo = useEventCallback((options) => closeMenu(options));
     useEffect(() => {
         if (open) {
             return registOpenedSubMenu?.({

package/SubMenu.js

@@ -6,7 +6,7 @@ import { Popper } from './Popper.js';
 import { CaretRightMd } from '@ringcentral/spring-icon';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { I as Icon } from './chunks/Icon.js';
-import { M as MenuItem } from './chunks/useMenuItemSelect.js';
+import { S as SubMenuTriggerNestedIdContext, M as MenuItem } from './chunks/useMenuItemSelect.js';
 import 'tabbable';
 import './chunks/useListNavigation.js';
 import './chunks/Menu.js';
@@ -49,7 +49,9 @@ const SubMenu = forwardRef((inProps, ref) => {
     const itemRef = useRef(null);
     const handleRef = useForkRef(itemRef, ref);
     const open = Boolean(anchor);
-    const closeSubMenu = () => {
+    const restoreFocusOnCloseRef = useRef(false);
+    const closeSubMenu = (options) => {
+        restoreFocusOnCloseRef.current = options?.restoreFocus === true;
         setAnchor(null);
     };
     const { hover: anchorHover, hoverHandlers: anchorHoverHandlers } = useHover({
@@ -74,38 +76,28 @@ const SubMenu = forwardRef((inProps, ref) => {
     useNestedMenuItem({ hovered: anchorHover, id });
     useNestedChildMenu({
         open,
-        closeMenu: () => {
-            closeSubMenu();
-        },
+        closeMenu: (options) => closeSubMenu(options),
         id,
     });
     const shouldKeepMenu = (() => {
         if (!open)
             return false;
-        if (open && !menuMounted)
+        if (!menuMounted)
             return true;
-        let shouldKeepMenu = false;
-        if (focusVisibleWithin) {
-            shouldKeepMenu = true;
-        }
-        if ((!menuHover && menuHoverEverRef.current) ||
-            (!anchorHover && anchorHoverEverRef.current)) {
-            shouldKeepMenu = false;
-        }
-        if (menuHover || anchorHover) {
-            shouldKeepMenu = true;
-        }
-        return shouldKeepMenu;
+        if (focusVisibleWithin)
+            return true;
+        return menuHover || anchorHover;
     })();
     useEffect(() => {
         if (!shouldKeepMenu) {
             closeSubMenu();
         }
-        return undefined;
     }, [shouldKeepMenu]);
     useOnLayoutReRender(() => {
+        const restoreFocus = restoreFocusOnCloseRef.current;
         if (!open) {
-            itemRef.current?.focus();
+            restoreFocus && itemRef.current?.focus();
+            restoreFocusOnCloseRef.current = false;
         }
     }, [open]);
     useEffect(() => {
@@ -115,21 +107,19 @@ const SubMenu = forwardRef((inProps, ref) => {
             anchorHoverEverRef.current = false;
         }
     }, [open]);
-    return (jsxs(Fragment, { children: [jsxs(MenuItem, { autoClose: false, ...rest, onKeyDown: (e) => {
-                    onKeyDownProp?.(e);
-                    if (e.key === 'ArrowRight') {
-                        setAnchor(e.currentTarget);
-                    }
-                }, ...anchorHoverHandlers, ref: handleRef, children: [typeof itemContent === 'string' ? (jsx(MenuItemText, { children: itemContent })) : (itemContent), jsx(Icon, { symbol: CaretRightMd })] }), open && (jsx(PopperMenu, { anchorEl: anchor, placement: "right-start", offset: -4, whileElementsMounted: () => {
+    return (jsxs(Fragment, { children: [jsx(SubMenuTriggerNestedIdContext.Provider, { value: id, children: jsxs(MenuItem, { autoClose: false, ...rest, onKeyDown: (e) => {
+                        onKeyDownProp?.(e);
+                        if (e.key === 'ArrowRight') {
+                            setAnchor(e.currentTarget);
+                        }
+                    }, ...anchorHoverHandlers, ref: handleRef, children: [typeof itemContent === 'string' ? (jsx(MenuItemText, { children: itemContent })) : (itemContent), jsx(Icon, { symbol: CaretRightMd })] }) }), open && (jsx(PopperMenu, { anchorEl: anchor, placement: "right-start", offset: -4, whileElementsMounted: () => {
                     setMenuMounted(true);
                     return () => { };
                 }, onKeyDown: (e) => {
                     if ((e.key === 'ArrowLeft' || e.key === 'Escape') &&
                         e.currentTarget.contains(e.target)) {
-                        if (e.key === 'Escape') {
-                            e.stopPropagation();
-                        }
-                        closeSubMenu();
+                        e.stopPropagation();
+                        closeSubMenu({ restoreFocus: true });
                     }
                 }, ...menuHoverHandlers, ...focusVisibleHandlers, children: children }))] }));
 });

package/chunks/useMenuItemSelect.js

@@ -15,6 +15,8 @@ const MenuListContext = createContext({
 });
 const useMenuListContext = () => useContext(MenuListContext);
 
+const SubMenuTriggerNestedIdContext = createContext(null);
+
 const MenuItemSelectContext = createContext(null);
 const useMenuItemSelectContext = () => useContext(MenuItemSelectContext);
 
@@ -128,7 +130,9 @@ const MenuItem = forwardRef((inProps, ref) => {
     const selectMode = selectContextValue
         ? selectContextValue.selectMode
         : 'single';
-    const id = useId();
+    const subMenuTriggerNestedId = useContext(SubMenuTriggerNestedIdContext);
+    const generatedId = useId();
+    const id = subMenuTriggerNestedId ?? generatedId;
     const { hover, hoverHandlers } = useHover({ onMouseEnter, onMouseLeave });
     useNestedMenuItem({ hovered: hover, id });
     useLayoutEffect(() => {
@@ -236,4 +240,4 @@ const useMenuItemSelect = (props) => {
     };
 };
 
-export { Action as A, MenuItem as M, MenuItemSelectContext as a, useMenuItem as b, useMenuItemSelect as c, useVirtualizedMenuItem as d, MenuListContext as e, useMenuListContext as f, useMenuItemSelectContext as u };
+export { Action as A, MenuItem as M, SubMenuTriggerNestedIdContext as S, MenuItemSelectContext as a, useMenuItem as b, useMenuItemSelect as c, useVirtualizedMenuItem as d, MenuListContext as e, useMenuListContext as f, useMenuItemSelectContext as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/spring-ui",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "author": "RingCentral",
   "description": "A comprehensive React component library built with Tailwind CSS, featuring production-ready components",
   "main": "./index.js",
@@ -15,9 +15,9 @@
     "@floating-ui/react-dom": "2.1.1",
     "@juggle/resize-observer": "3.4.0",
     "@mui/base": "5.0.0-beta.40",
-    "@ringcentral/spring-base": "^1.9.2",
-    "@ringcentral/spring-icon": "^1.9.2",
-    "@ringcentral/spring-theme": "^1.9.2",
+    "@ringcentral/spring-base": "^1.9.3",
+    "@ringcentral/spring-icon": "^1.9.3",
+    "@ringcentral/spring-theme": "^1.9.3",
     "@types/lodash": "^4.14.182",
     "@use-gesture/react": "10.3.1",
     "clsx": "^1.2.1",

package/src/NestedMenuContext/NestedMenuContext.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
+export declare type CloseSubMenuOptions = {
+    restoreFocus?: boolean;
+};
 export declare type SubMenuItemSymbol = {
     anchorId: string;
-    closeSubMenu: () => void;
+    closeSubMenu: (options?: CloseSubMenuOptions) => void;
 };
 export declare type NestedMenuContextValue = {
     registHoveredItem: (menuItemId: string) => void;

package/src/NestedMenuContext/SubMenuTriggerNestedIdContext.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SubMenuTriggerNestedIdContext: import("react").Context<string | null>;

package/src/NestedMenuContext/useNestedChildMenu.d.ts

@@ -1,6 +1,7 @@
+import { CloseSubMenuOptions } from './NestedMenuContext';
 export declare type UseNestedChildMenuProps = {
     open: boolean;
     id: string;
-    closeMenu: () => void;
+    closeMenu: (options?: CloseSubMenuOptions) => void;
 };
 export declare const useNestedChildMenu: (props: UseNestedChildMenuProps) => void;