@ringcentral/spring-ui 1.11.1 → 1.12.0

package/chunks/useMenuItemSelect.js

@@ -1,12 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { createContext, useContext, forwardRef, useRef, useLayoutEffect, useCallback, useMemo } from 'react';
-import { useFocusVisible, useActive, useForkRef, useId, useHover, useEventCallback } from '@ringcentral/spring-base';
+import { useFocusVisible, useActive, useForkRef, combineProps, useId, useHover, useEventCallback } from '@ringcentral/spring-base';
 import { CheckBoldMd } from '@ringcentral/spring-icon';
 import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { I as Icon } from './Icon.js';
+import { u as useAnimationFrame } from './useAnimationFrame.js';
 import './useNestedParentMenu.js';
 import { u as useNestedMenuItem } from './useNestedMenuItem.js';
 import { useVirtualizedItemPropsContext } from '../VirtualizedList.js';
+import { c as composeEventHandlers } from './composeEventHandlers.js';
+import { unstable_setRef } from '@mui/utils';
 import { useItemNavigation } from '../ListNavigation.js';
 import { u as useMenuContext } from './Menu.js';
 
@@ -20,15 +23,6 @@ const SubMenuTriggerNestedIdContext = createContext(null);
 const MenuItemSelectContext = createContext(null);
 const useMenuItemSelectContext = () => useContext(MenuItemSelectContext);
 
-const composeEventHandlers = (externalEventHandler, internalEventHandler, options = {}) => (event, ...args) => {
-    const { checkForDefaultPrevented = true } = options;
-    externalEventHandler?.(event, ...args);
-    if (checkForDefaultPrevented && event.defaultPrevented) {
-        return;
-    }
-    internalEventHandler?.(event, ...args);
-};
-
 const useMenuItem = (props) => {
     const { onBlur, onFocus, onKeyDown, onKeyUp, onClick, ref, disabled, autoClose, } = props;
     const { keyboardNavHandlers, itemRef } = useItemNavigation() ?? {};
@@ -59,15 +53,20 @@ const useMenuItem = (props) => {
         onClick: handleClick,
     });
     const handleItemRef = useForkRef(ref, focusVisibleRef, itemRef);
-    const getRootProps = (otherProps) => {
+    const getRootProps = (otherProps = {}) => {
+        const { ref: otherRef, ...restOtherProps } = otherProps;
         return {
             role: 'menuitem',
             tabIndex: '-1',
-            disabled,
-            ...otherProps,
-            ...focusVisibleHandlers,
-            ...activeHandlers,
-            ref: handleItemRef,
+            ...(disabled ? { 'aria-disabled': true } : null),
+            ...combineProps(restOtherProps, {
+                ...focusVisibleHandlers,
+                ...activeHandlers,
+            }),
+            ref: (instance) => {
+                unstable_setRef(otherRef, instance);
+                unstable_setRef(handleItemRef, instance);
+            },
         };
     };
     return { getRootProps, focusVisible, active };
@@ -104,15 +103,21 @@ const useVirtualizedMenuItem = (props) => {
         onClick: handleClick,
     });
     const handleItemRef = useForkRef(ref, focusVisibleRef, itemRef);
-    const getRootProps = (otherProps) => {
+    const getRootProps = (otherProps = {}) => {
+        const { ref: otherRef, ...restOtherProps } = otherProps;
         return {
             role: 'menuitem',
             tabIndex: -1,
-            ...otherProps,
-            ...focusVisibleHandlers,
-            ...activeHandlers,
-            ...vlItemProps,
-            ref: handleItemRef,
+            ...(disabled ? { 'aria-disabled': true } : null),
+            ...combineProps(restOtherProps, {
+                ...focusVisibleHandlers,
+                ...activeHandlers,
+                ...vlItemProps,
+            }),
+            ref: (instance) => {
+                unstable_setRef(otherRef, instance);
+                unstable_setRef(handleItemRef, instance);
+            },
         };
     };
     return { getRootProps, focusVisible, active };
@@ -120,10 +125,11 @@ const useVirtualizedMenuItem = (props) => {
 
 const MenuItem = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'MenuItem' });
-    const { classes, className, children, selected, disabled, onMouseEnter, onMouseLeave, onPointerMove, highlighted = false, focused = false, autoClose = true, autoFocus, ...rest } = props;
+    const { classes, className, children, selected, disabled, onMouseEnter, onMouseLeave, onPointerMove, onBlur, onFocus, onKeyDown, onKeyUp, onClick, highlighted = false, focused = false, autoClose = true, autoFocus, ...rest } = props;
     const cls = useClassesWithMode('menu-item', classes, className);
     const vlItemProps = useVirtualizedItemPropsContext();
     const isInVlRef = useRef(Boolean(vlItemProps));
+    const { requestAnimationFrame } = useAnimationFrame();
     const useMenuItemHook = (() => {
         if (isInVlRef.current) {
             return useVirtualizedMenuItem;
@@ -135,8 +141,13 @@ const MenuItem = forwardRef((inProps, ref) => {
     const itemRef = useRef(null);
     const handleRef = useForkRef(itemRef, ref);
     const { getRootProps, focusVisible, active } = useMenuItemHook({
-        ...props,
         autoClose,
+        disabled,
+        onBlur,
+        onClick,
+        onFocus,
+        onKeyDown,
+        onKeyUp,
         ref: handleRef,
     });
     const selectable = !(selected === undefined);
@@ -177,7 +188,7 @@ const MenuItem = forwardRef((inProps, ref) => {
                 });
             });
         }
-    }, [autoFocus]);
+    }, [autoFocus, requestAnimationFrame]);
     return (jsx("div", { className: cls('root', {
             selectable,
             selected,
@@ -268,4 +279,4 @@ const useMenuItemSelect = (props) => {
     };
 };
 
-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, composeEventHandlers as g, 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 };