@ringcentral/spring-ui 1.7.0 → 1.9.0

package/chunks/useMenuItemSelect.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext, forwardRef, useRef, useEffect, useCallback, useMemo } from 'react';
-import { useFocusVisible, useActive, useForkRef, useClasses, useId, useHover, useEventCallback } from '@ringcentral/spring-base';
+import { createContext, useContext, forwardRef, useRef, useLayoutEffect, useCallback, useMemo } from 'react';
+import { useFocusVisible, useActive, useForkRef, useId, useHover, useEventCallback } from '@ringcentral/spring-base';
 import { CheckBoldMd } from '@ringcentral/spring-icon';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { I as Icon } from './Icon.js';
 import './useNestedParentMenu.js';
 import { u as useNestedMenuItem } from './useNestedMenuItem.js';
@@ -15,9 +15,7 @@ const MenuListContext = createContext({
 });
 const useMenuListContext = () => useContext(MenuListContext);
 
-const MenuItemSelectContext = 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-createContext(null);
+const MenuItemSelectContext = createContext(null);
 const useMenuItemSelectContext = () => useContext(MenuItemSelectContext);
 
 const useMenuItem = (props) => {
@@ -47,7 +45,6 @@ const useMenuItem = (props) => {
         },
     });
     const handleItemRef = useForkRef(ref, focusVisibleRef, itemRef);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const getRootProps = (otherProps) => {
         return {
             role: 'menuitem',
@@ -66,9 +63,7 @@ const useVirtualizedMenuItem = (props) => {
     const { onBlur, onFocus, onKeyDown, onKeyUp, onClick, autoClose, ref } = props;
     const { keyboardNavHandlers, itemRef } = useItemNavigation() ?? {};
     const vlItemProps = useVirtualizedItemPropsContext();
-    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocusVisible({
+    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible({
         onFocus: (e) => {
             keyboardNavHandlers?.onFocus(e);
             onFocus?.(e);
@@ -92,7 +87,6 @@ const useVirtualizedMenuItem = (props) => {
         },
     });
     const handleItemRef = useForkRef(ref, focusVisibleRef, itemRef);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const getRootProps = (otherProps) => {
         return {
             role: 'menuitem',
@@ -110,7 +104,7 @@ const useVirtualizedMenuItem = (props) => {
 const MenuItem = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'MenuItem' });
     const { classes, className, children, selected, disabled, onMouseEnter, onMouseLeave, highlighted = false, focused = false, autoClose = true, autoFocus, ...rest } = props;
-    const cls = useClasses('menu-item', classes, className);
+    const cls = useClassesWithMode('menu-item', classes, className);
     const vlItemProps = useVirtualizedItemPropsContext();
     const isInVlRef = useRef(Boolean(vlItemProps));
     const useMenuItemHook = (() => {
@@ -137,13 +131,11 @@ const MenuItem = forwardRef((inProps, ref) => {
     const id = useId();
     const { hover, hoverHandlers } = useHover({ onMouseEnter, onMouseLeave });
     useNestedMenuItem({ hovered: hover, id });
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (autoFocus) {
             itemRef.current?.focus();
             requestAnimationFrame(() => {
-                if (
-                // jsdom doesn't support scrollIntoView, this avoids users needing to bring their own mock
-                process.env.NODE_ENV === 'test' &&
+                if (process.env.NODE_ENV === 'test' &&
                     typeof itemRef.current?.scrollIntoView !== 'function') {
                     return;
                 }
@@ -153,8 +145,7 @@ const MenuItem = forwardRef((inProps, ref) => {
                 });
             });
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [autoFocus]);
     return (jsx("div", { className: cls('root', {
             selectable,
             selected,
@@ -194,9 +185,6 @@ const useMenuItemSelect = (props) => {
             autoFocus = value[0] === itemValue;
         }
         const menuItemRole = selectMode === 'single' ? 'menuitemradio' : 'menuitemcheckbox';
-        // Use appropriate ARIA attributes based on widget type and role:
-        // - For listbox/option pattern: use aria-selected
-        // - For menu with selectable items: use menuitemradio/menuitemcheckbox with aria-checked
         const ariaProps = widget === 'menu'
             ? { 'aria-checked': selected }
             : { 'aria-selected': selected };
@@ -210,7 +198,6 @@ const useMenuItemSelect = (props) => {
     const handleSelect = useEventCallback((itemValue) => {
         let action = Action.SELECT;
         if (isSingleMode) {
-            // User clicked on an already selected item
             if (value === itemValue) {
                 onClose?.();
             }

package/chunks/useMotionSafeTransition.js

@@ -1,10 +1,6 @@
 import { motionTransition } from '@ringcentral/spring-theme';
 import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
 
-/**
- * A hook that returns an instant transition if the user has reduced motion enabled.
- * If reduced motion is not enabled, returns the given motion transition.
- */
 const useMotionSafeTransition = (transition) => {
     const prefersReducedMotion = usePrefersReducedMotion();
     return prefersReducedMotion ? motionTransition.instant : transition;

package/chunks/useNestedParentMenu.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useRef, useState, useMemo, useEffect, useLayoutEffect } from 'react';
+import { createContext, useContext, useRef, useMemo, useLayoutEffect } from 'react';
 
 const NestedMenuContext = createContext(null);
 const useNestedMenuContext = () => {
@@ -7,19 +7,14 @@ const useNestedMenuContext = () => {
 
 const useNestedParentMenu = (props) => {
     const openedSubMenuSymbolRef = useRef(null);
-    const [hoveredItemId, setHoveredItemId] = useState();
     const { open } = props;
     const contextValue = useMemo(() => {
         return {
             registHoveredItem: (id) => {
-                setHoveredItemId(id);
-                return () => {
-                    setHoveredItemId((pre) => {
-                        if (pre === id)
-                            return undefined;
-                        return pre;
-                    });
-                };
+                const symbol = openedSubMenuSymbolRef.current;
+                if (symbol && id !== symbol.anchorId) {
+                    symbol.closeSubMenu();
+                }
             },
             registOpenedSubMenu: (menuItemSymbol) => {
                 openedSubMenuSymbolRef.current?.closeSubMenu();
@@ -32,14 +27,6 @@ const useNestedParentMenu = (props) => {
             },
         };
     }, []);
-    useEffect(() => {
-        const symbol = openedSubMenuSymbolRef.current;
-        // symbol existed means subMenu exited
-        if (symbol && hoveredItemId && hoveredItemId !== symbol.anchorId) {
-            symbol.closeSubMenu();
-        }
-    }, [hoveredItemId]);
-    // Ensure that all menus can be visually closed at the same time
     useLayoutEffect(() => {
         if (!open) {
             openedSubMenuSymbolRef.current?.closeSubMenu();

package/chunks/usePrefersReducedMotion.js

@@ -2,14 +2,9 @@ import { useGlobalListener } from '@ringcentral/spring-base';
 import { MotionConfigContext } from 'framer-motion';
 import { useState, useContext } from 'react';
 
-/**
- * in all component that uses this hook, we always use same instance of MediaQueryList
- * so we can cache the instance here
- */
 let instance;
 const getPrefersReducedMotionMediaQuery = () => {
     if (!instance ||
-        // in test environment, we need to reassign the instance to the window object
         process.env.NODE_ENV === 'test') {
         instance = window?.matchMedia?.('(prefers-reduced-motion)');
     }
@@ -25,15 +20,14 @@ const usePrefersReducedMotion = () => {
         target: mediaQuery,
         customKey: 'prefers-reduced-motion',
     });
-    /**
-     * As we're determining the reduced motion state ourselves after the initial mount,
-     * we need to check the MotionConfigContext to see how the prefers-reduced-motion
-     * state should be handled.
-     */
-    if (context.reducedMotion === 'always') {
+    if (context.reducedMotion === 'user') {
+        return shouldReduceMotion;
+    }
+    if (context.reducedMotion === 'always' ||
+        process.env.NODE_ENV === 'test') {
         return true;
     }
-    else if (context.reducedMotion === 'never') {
+    if (context.reducedMotion === 'never') {
         return false;
     }
     return shouldReduceMotion;

package/chunks/useTooltipForceHide.js

@@ -1,9 +1,5 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 
-/**
- * store tooltip open state when forceHide is true and set tooltip open to false
- * restore open state once forceHide changed to false
- */
 const useTooltipForceHide = (forceHide) => {
     const [open, setOpen] = useState(false);
     const openStateStore = useRef();

package/chunks/useTrayNavigate.js

@@ -43,7 +43,6 @@ const useTray = (parameters) => {
             return;
         }
         if (handledValue === null) {
-            // return to previous TrayPanel when value is false
             handledValue = stack[stack.length - 2];
         }
         containerRef.current?.focus();