@ringcentral/spring-ui 1.9.2 → 1.11.0

package/TablePagination.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useClasses, useEventCallback, combineProps } from '@ringcentral/spring-base';
+import { combineProps, useClasses, useEventCallback } from '@ringcentral/spring-base';
 import { CaretLeftMd, CaretRightMd } from '@ringcentral/spring-icon';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { forwardRef } from 'react';
@@ -40,13 +40,17 @@ import './chunks/useHelperTextId.js';
 import './chunks/MenuList.js';
 import './chunks/VirtualizedMenu.js';
 
-var TablePagination$1 = {"sui-table-pagination-content":"sui-table-pagination-content","sui-table-pagination-rows-per-page-controls":"sui-table-pagination-rows-per-page-controls","sui-table-pagination-rows-per-page-label":"sui-table-pagination-rows-per-page-label","sui-table-pagination-current-page-controls":"sui-table-pagination-current-page-controls","sui-table-pagination-range-container":"sui-table-pagination-range-container"};
+var TablePagination$1 = {"sui-table-pagination-content":"sui-table-pagination-content","sui-table-pagination-selector":"sui-table-pagination-selector","sui-table-pagination-rows-per-page-controls":"sui-table-pagination-rows-per-page-controls","sui-table-pagination-rows-per-page-label":"sui-table-pagination-rows-per-page-label","sui-table-pagination-current-page-controls":"sui-table-pagination-current-page-controls","sui-table-pagination-range-container":"sui-table-pagination-range-container"};
 
 const TablePagination = forwardRef((inProps, ref) => {
-    const { classes, className, component: Root = 'td', colSpan = 1000, page, variant = 'range', count = -1, rowsPerPage = 10, rowsPerPageLabel = 'Rows per page', rowsPerPageOptions = [10, 25, 50, 100], onRowsPerPageChange, rangeSeparatorLabel = 'of', previousPageButtonProps, nextPageButtonProps, onPageChange, ...rest } = useThemeProps({
+    const { classes, className, component: Root = 'td', colSpan = 1000, page, variant = 'range', count = -1, rowsPerPage = 10, rowsPerPageLabel = 'Rows per page', rowsPerPageOptions = [10, 25, 50, 100], onRowsPerPageChange, rangeSeparatorLabel = 'of', previousPageButtonProps, nextPageButtonProps, selectorProps, MenuProps, onPageChange, ...rest } = useThemeProps({
         props: inProps,
         name: 'TablePagination',
     });
+    const mergedSelectMenuProps = combineProps({
+        PopperProps: { matchAnchorWidth: false },
+        classes: { paper: 'min-w-16' },
+    }, MenuProps);
     const rootProps = {
         ...rest,
     };
@@ -89,25 +93,11 @@ const TablePagination = forwardRef((inProps, ref) => {
         onRowsPerPageChange?.(e, child);
     });
     return (jsx(Root, { className: cls('root'), ...rootProps, ref: ref, children: jsxs("div", { className: cls('content'), children: [variant === 'page-size' && (jsxs("div", { className: cls('rows-per-page-controls'), children: [jsx("span", { className: cls('rows-per-page-label'), children: rowsPerPageLabel }), jsx(Select, { value: rowsPerPage, variant: "outlined", size: "medium", classes: {
-                                selector: 'min-w-16',
-                            }, MenuProps: {
-                                PopperProps: {
-                                    matchAnchorWidth: false,
-                                },
-                                classes: {
-                                    paper: 'min-w-16',
-                                },
-                            }, onChange: handleRowsPerPageChange, children: rowsPerPageOptions?.map((option) => (jsx(Option, { value: option, children: jsx(MenuItemText, { children: option }) }, option))) })] })), jsxs("div", { className: cls('range-container'), children: [variant === 'select-page' && (jsx(Select, { value: page, variant: "outlined", size: "medium", classes: {
+                                selector: cls('selector'),
+                            }, selectorProps: selectorProps, MenuProps: mergedSelectMenuProps, onChange: handleRowsPerPageChange, children: rowsPerPageOptions?.map((option) => (jsx(Option, { value: option, children: jsx(MenuItemText, { children: option }) }, option))) })] })), jsxs("div", { className: cls('range-container'), children: [variant === 'select-page' && (jsx(Select, { value: page, variant: "outlined", size: "medium", classes: {
                                 content: 'mr-0.5',
-                                selector: 'min-w-16',
-                            }, MenuProps: {
-                                PopperProps: {
-                                    matchAnchorWidth: false,
-                                },
-                                classes: {
-                                    paper: 'min-w-16',
-                                },
-                            }, renderValue: (value) => value + 1, onChange: handleSelectPageChange, children: Array(totalPages)
+                                selector: cls('selector'),
+                            }, selectorProps: selectorProps, MenuProps: mergedSelectMenuProps, renderValue: (value) => value + 1, onChange: handleSelectPageChange, children: Array(totalPages)
                                 .fill(totalPages)
                                 .map((_, i) => (jsx(Option, { value: i, children: jsx(MenuItemText, { children: i + 1 }) }, i))) })), showRowRange && jsx("span", { children: `${startOfRange}-${endOfRange}` }), jsx("span", { children: rangeSeparatorLabel }), jsx("span", { children: total })] }), jsxs("div", { className: cls('current-page-controls'), children: [jsx(IconButton, { shape: "squircle", color: "secondary", variant: "contained", size: "small", symbol: CaretLeftMd, background: false, disabled: !hasPreviousPage, ...combineProps({
                                 onClick: handlePreviousPageButtonClick,

package/TableRow.js

@@ -13,7 +13,7 @@ const TableRow = forwardRef((inProps, ref) => {
     const cls = useClasses('table-row', classes, className);
     const tablelvl2 = useTablelvl2Context();
     const variant = (tablelvl2 && tablelvl2.variant) || 'body';
-    const clickable = clickableProp !== false && rest.onClick ? true : clickableProp ?? false;
+    const clickable = clickableProp !== false && rest.onClick ? true : (clickableProp ?? false);
     const { getRootProps, focusVisible, active } = useButton({
         ...props,
         disabled: !clickable,

package/Text.js

@@ -17,7 +17,7 @@ import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 import './chunks/PopperPaper.js';
 
-var Text$1 = {"sui-text-root":"sui-text-root","sui-text-no-wrap":"sui-text-no-wrap","sui-text-flex-full":"sui-text-flex-full","sui-text-highlight-term":"sui-text-highlight-term"};
+var Text$1 = {"sui-text-root":"sui-text-root","sui-text-no-wrap":"sui-text-no-wrap","sui-text-highlight-term":"sui-text-highlight-term"};
 
 const Text = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Text' });
@@ -31,7 +31,7 @@ const Text = forwardRef((inProps, ref) => {
     const cls = useClasses('text', {}, className);
     const title = isShowTitle || useTooltip
         ?
-            _title ?? (isString(children) ? children : undefined)
+            (_title ?? (isString(children) ? children : undefined))
         : undefined;
     const showTooltip = Boolean(useTooltip) && isShowTitle && !!title && !!children;
     if (!showTooltip) {

package/Textarea.js

@@ -24,7 +24,7 @@ import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 import './chunks/PopperPaper.js';
 
-var Textarea$1 = {"sui-textarea-form-field-content":"sui-textarea-form-field-content","sui-textarea-form-field-content-xlarge":"sui-textarea-form-field-content-xlarge","sui-textarea-form-field-content-large":"sui-textarea-form-field-content-large","sui-textarea-form-field-content-medium":"sui-textarea-form-field-content-medium","sui-textarea-input":"sui-textarea-input","sui-textarea-input-xlarge":"sui-textarea-input-xlarge","sui-textarea-input-large":"sui-textarea-input-large","sui-textarea-input-medium":"sui-textarea-input-medium","sui-textarea-standard-input":"sui-textarea-standard-input","sui-textarea-clear":"sui-textarea-clear","sui-textarea-clear-xlarge":"sui-textarea-clear-xlarge","sui-textarea-clear-large":"sui-textarea-clear-large","sui-textarea-clear-medium":"sui-textarea-clear-medium","sui-textarea-clear-standard":"sui-textarea-clear-standard"};
+var Textarea$1 = {"sui-textarea-form-field-content":"sui-textarea-form-field-content","sui-textarea-form-field-content-xlarge":"sui-textarea-form-field-content-xlarge","sui-textarea-form-field-content-large":"sui-textarea-form-field-content-large","sui-textarea-form-field-content-medium":"sui-textarea-form-field-content-medium","sui-textarea-input":"sui-textarea-input","sui-textarea-clear":"sui-textarea-clear","sui-textarea-input-xlarge":"sui-textarea-input-xlarge","sui-textarea-input-large":"sui-textarea-input-large","sui-textarea-input-medium":"sui-textarea-input-medium","sui-textarea-standard-input":"sui-textarea-standard-input","sui-textarea-clear-xlarge":"sui-textarea-clear-xlarge","sui-textarea-clear-large":"sui-textarea-clear-large","sui-textarea-clear-medium":"sui-textarea-clear-medium","sui-textarea-clear-standard":"sui-textarea-clear-standard"};
 
 const Textarea = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Textarea' });

package/TimePicker.js

@@ -22,10 +22,10 @@ import './chunks/Backdrop.js';
 import './chunks/PopperPaper.js';
 import './chunks/Popover.js';
 import './chunks/getGrow.js';
+import './chunks/useHelperTextId.js';
 import './chunks/TextField.js';
 import './chunks/ShowHideEye.js';
 import './chunks/useMotionSafeTransition.js';
-import './chunks/useHelperTextId.js';
 import './chunks/VisuallyHidden.js';
 
 const TimePickerClassesContext = createContext(() => '');

package/chunks/Alert.js

@@ -45,4 +45,4 @@ const AlertTitle = ({ className, classes, ...rest }) => {
     return jsx("div", { className: cls('root'), ...rest });
 };
 
-export { Alert as A, AlertTitle as a };
+export { AlertTitle as A, Alert as a };

package/chunks/Drawer.js

@@ -23,7 +23,7 @@ const Drawer = forwardRef((inProps, ref) => {
         toggleOnTransition: motionTransition['neutral-01-fast'],
         toggleOffTransition: motionTransition['neutral-01-fast'],
     });
-    return (jsx(Modal, { open: open, onClose: onClose, blocking: blocking, disableScrollLock: !blocking, disableBackdropClick: !blocking, disableEscapeKeyDown: !blocking, hideBackdrop: !blocking, className: clsx(cls('root', `anchor-${anchor}`, {
+    return (jsx(Modal, { open: open, onClose: onClose, blocking: blocking, className: clsx(cls('root', `anchor-${anchor}`, {
             'non-blocking': !blocking,
         })), ...rest, children: jsxs(motion.div, { role: "dialog", "aria-modal": blocking, ...slideInProps, ...bodyProps, ref: ref, className: clsx(cls('body', `body-${anchor}`), bodyProps?.className), tabIndex: blocking ? -1 : undefined, children: [header && (jsx("div", { ref: headerRef, ...headerProps, className: clsx(cls('header'), headerProps?.className), children: header })), jsx("div", { ref: contentRef, className: cls('content'), children: children }), footer && (jsx("div", { ref: footerRef, className: cls('footer'), children: footer }))] }) }));
 });

package/chunks/Menu.js

@@ -1,10 +1,28 @@
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, forwardRef, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useMemo, forwardRef } from 'react';
 import { useEventCallback } from '@ringcentral/spring-base';
 import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { a as useNestedParentMenu, N as NestedMenuContext } from './useNestedParentMenu.js';
 import { P as Popover } from './Popover.js';
 
+const overlayContainerStyle = {
+    display: 'contents',
+};
+const MenuOverlayGroupContext = createContext(null);
+const useMenuOverlayGroupContext = () => useContext(MenuOverlayGroupContext);
+const useMenuOverlayGroupValue = () => {
+    const [container, setContainer] = useState(null);
+    const value = useMemo(() => ({ container }), [container]);
+    return {
+        setContainer,
+        value,
+    };
+};
+const MenuOverlayGroupContainer = (props) => {
+    const { setContainer } = props;
+    return (jsx("div", { "data-sui-menu-overlay-container": "", ref: setContainer, style: overlayContainerStyle }));
+};
+
 const MenuContext = createContext(null);
 const useMenuContext = () => {
     return useContext(MenuContext);
@@ -22,10 +40,11 @@ const Menu = forwardRef((inProps, ref) => {
             bottom: padding.bottom ?? 16,
             left: padding.left ?? 16,
         }
-        : padding ?? 16;
-    const { contextValue } = useNestedParentMenu({
+        : (padding ?? 16);
+    const { contentClickHandlers, contentPointerHandlers, contextValue } = useNestedParentMenu({
         open,
     });
+    const { setContainer: setOverlayContainer, value: overlayGroupValue } = useMenuOverlayGroupValue();
     const closeHandler = useEventCallback(() => {
         onClose?.(undefined, 'Other');
     });
@@ -35,8 +54,8 @@ const Menu = forwardRef((inProps, ref) => {
     }, [autoFocus, closeHandler, open]);
     return (jsx(Popover, { bordered: true, className: cls('root'), PopperProps: { ...PopperProps, padding: popperPadding }, ...rest, open: open, onClose: (e, reason) => {
             onClose?.(e, reason);
-        }, ref: ref, children: jsx("div", { className: cls('paper'), children: jsx(MenuContext.Provider, { value: menuContextValue, children: jsx(NestedMenuContext.Provider, { value: contextValue, children: children }) }) }) }));
+        }, ref: ref, children: jsxs(MenuOverlayGroupContext.Provider, { value: overlayGroupValue, children: [jsx("div", { className: cls('paper'), onClickCapture: contentClickHandlers.onClickCapture, onPointerMove: contentPointerHandlers.onPointerMove, children: jsx(MenuContext.Provider, { value: menuContextValue, children: jsx(NestedMenuContext.Provider, { value: contextValue, children: children }) }) }), jsx(MenuOverlayGroupContainer, { setContainer: setOverlayContainer })] }) }));
 });
 Menu.displayName = 'SuiMenu';
 
-export { Menu as M, MenuContext as a, useMenuContext as u };
+export { Menu as M, MenuContext as a, useMenuOverlayGroupContext as b, useMenuContext as u };

package/chunks/Modal.js

@@ -14,7 +14,10 @@ const ModalContext = createContext(null);
 const useModalContext = () => useContext(ModalContext);
 
 const InnerModal = forwardRef((props, ref) => {
-    const { hideBackdrop, children, motionProps, disableBackdropClick = false, onBackdropClick, disableEscapeKeyDown = false, onEscapeKeyDown, onClose, onKeyDown, disableAutoFocus, disableEnforceFocus, disableRestoreFocus, classes, className, backdropProps, open, isEnabled, blocking = true, ...rest } = props;
+    const { hideBackdrop: hideBackdropProp, children, motionProps, disableBackdropClick: disableBackdropClickProp, onBackdropClick, disableEscapeKeyDown: disableEscapeKeyDownProp, onEscapeKeyDown, onClose, onKeyDown, disableAutoFocus, disableEnforceFocus, disableRestoreFocus, classes, className, backdropProps, open, isEnabled, blocking = true, ...rest } = props;
+    const hideBackdrop = hideBackdropProp ?? !blocking;
+    const disableBackdropClick = disableBackdropClickProp ?? !blocking;
+    const disableEscapeKeyDown = disableEscapeKeyDownProp ?? !blocking;
     const { ariaHideOutsideRef, ariaHideEnabled } = useAriaHideOutside({
         enable: blocking,
     });
@@ -45,7 +48,8 @@ InnerModal.displayName = 'SuiInnerModal';
 
 const Modal = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Modal' });
-    const { children, open, container: containerProp, disablePortal, onExitComplete, disableBackdropAnimation, motionProps, disableScrollLock = false, ...rest } = props;
+    const { children, open, container: containerProp, disablePortal, onExitComplete, disableBackdropAnimation, motionProps, disableScrollLock: disableScrollLockProp, blocking = true, ...rest } = props;
+    const disableScrollLock = disableScrollLockProp ?? !blocking;
     const [shouldRender, setShouldRender] = useState(open);
     const [modalElement, setModalElement] = useState(null);
     const handleRef = useForkRef(setModalElement, ref);
@@ -74,7 +78,7 @@ const Modal = forwardRef((inProps, ref) => {
             setShouldRender(false);
         }
     };
-    return shouldRender ? (jsx(Portal, { disablePortal: disablePortal, container: container, children: jsx("div", { ...scopeProps, children: jsx(InnerModal, { ...rest, ref: handleRef, open: open, isEnabled: isEnabled, motionProps: {
+    return shouldRender ? (jsx(Portal, { disablePortal: disablePortal, container: container, children: jsx("div", { ...scopeProps, children: jsx(InnerModal, { ...rest, ref: handleRef, open: open, blocking: blocking, isEnabled: isEnabled, motionProps: {
                     ...(motionProps ?? getFade({ prefersReducedMotion, toggle: open })),
                     onAnimationComplete,
                 }, children: children }) }) })) : null;

package/chunks/PickerTextField.js

@@ -3,20 +3,31 @@ import { forwardRef, useState, useRef, useImperativeHandle, useMemo } from 'reac
 import { useId, useClasses, useForkRef, useA11yKeyEvent, useEventCallback, combineClasses } from '@ringcentral/spring-base';
 import { I as Icon } from './Icon.js';
 import { P as Popover } from './Popover.js';
+import { u as useHelperTextId } from './useHelperTextId.js';
 import { T as TextField } from './TextField.js';
 import { V as VisuallyHidden } from './VisuallyHidden.js';
 
 const PICKER_DISPLAY_NAME = 'SuiPickerTextField';
 const PickerTextField = forwardRef((props, ref) => {
-    const { disabled, value, defaultValue, onClear, action, inputProps = {}, announcementText, PopoverProps, children, endIconSymbol, clearText, clearBtn, ClearButtonProps, onKeyDown, onClick, onClose, classes, textInputClasses, className, ...rest } = props;
-    const idForInput = useId(PICKER_DISPLAY_NAME, true);
+    const { disabled, value, defaultValue, onClear, action, inputProps = {}, announcementText, PopoverProps, children, endIconSymbol, clearText, clearBtn, ClearButtonProps, onKeyDown, onClick, onClose, classes, textInputClasses, className, id: idProp, ...rest } = props;
+    const generatedId = useId(PICKER_DISPLAY_NAME, true);
+    const idForInput = idProp ?? inputProps.id ?? generatedId;
     const [open, setOpen] = useState(false);
     const [isPopoverExited, setIsPopoverExited] = useState(!open);
     const cls = useClasses('picker-text-field', classes, className);
     const anchorRef = useRef(null);
     const handleRef = useForkRef(ref, anchorRef);
-    const idForHelperText = `${idForInput}-helper-text`;
-    const idForInstruction = `${idForInput}-instruction`;
+    const idForHelperText = useHelperTextId({
+        helperText: rest.helperText,
+        id: idForInput,
+        FormHelperTextProps: rest.FormHelperTextProps,
+    });
+    const idForInstruction = announcementText
+        ? `${idForInput}-instruction`
+        : undefined;
+    const ariaDescribedBy = Array.from(new Set([inputProps['aria-describedby'], idForHelperText, idForInstruction]
+        .filter(Boolean)
+        .flatMap((value) => `${value}`.split(/\s+/).filter(Boolean)))).join(' ');
     const handleA11yKeydown = useA11yKeyEvent(() => {
         handleOpen(true);
     });
@@ -43,7 +54,7 @@ const PickerTextField = forwardRef((props, ref) => {
         }),
         input: cls('input'),
     }), [cls, textInputClasses, value]);
-    return (jsxs(Fragment, { children: [jsx(TextField, { classes: toClasses, value: value, defaultValue: defaultValue, endAdornment: endIconSymbol && (jsx(Icon, { className: cls('end-icon'), symbol: endIconSymbol })), id: idForInput, ref: handleRef, focused: open || (!open && !isPopoverExited), disabled: disabled, clearBtn: clearBtn, onClick: (e) => {
+    return (jsxs(Fragment, { children: [jsx(TextField, { classes: toClasses, value: value, defaultValue: defaultValue, endAdornment: endIconSymbol && (jsx(Icon, { className: cls('end-icon'), symbol: endIconSymbol })), id: idForInput, ref: handleRef, focused: open || (!open && !isPopoverExited), disabled: disabled, clearBtn: clearBtn, clearText: clearText, ClearButtonProps: ClearButtonProps, onClick: (e) => {
                     handleOpen(true);
                     onClick?.(e);
                 }, onKeyDown: (e) => {
@@ -52,9 +63,9 @@ const PickerTextField = forwardRef((props, ref) => {
                     handleA11yKeydown(e);
                     onKeyDown?.(e);
                 }, inputProps: {
-                    'aria-describedby': `${idForHelperText} ${idForInstruction}`,
                     'aria-haspopup': true,
                     ...inputProps,
+                    'aria-describedby': ariaDescribedBy || undefined,
                 }, ...rest, readOnly: true, onClear: (e) => {
                     onClear?.(e);
                     e.stopPropagation();
@@ -67,7 +78,7 @@ const PickerTextField = forwardRef((props, ref) => {
                 }, ...PopoverProps, onExitComplete: () => {
                     PopoverProps?.onExitComplete?.();
                     setIsPopoverExited(true);
-                }, children: children }), jsx(VisuallyHidden, { id: idForInstruction, children: announcementText })] }));
+                }, children: children }), idForInstruction && (jsx(VisuallyHidden, { id: idForInstruction, children: announcementText }))] }));
 });
 PickerTextField.displayName = PICKER_DISPLAY_NAME;
 

package/chunks/TextField.js

@@ -47,7 +47,6 @@ const TextFieldComponent = (inProps, ref) => {
     let helperText = helperTextProp;
     if (showCharacterCount &&
         inputProps?.maxLength !== undefined &&
-        props.onChange &&
         props.value !== undefined) {
         helperText = (jsxs("div", { className: cls('helper-text'), children: [jsx("span", { children: helperText }), jsxs("span", { children: [props.value?.length ?? 0, "/", inputProps.maxLength] })] }));
     }

package/chunks/Tooltip.js

@@ -187,7 +187,7 @@ const TooltipView = forwardRef((props, ref) => {
             bottom: padding.bottom ?? 16,
             left: padding.left ?? 16,
         }
-        : padding ?? 16;
+        : (padding ?? 16);
     return (jsx(Popper, { role: "tooltip", placement: placement, offset: 4, ...PopperProps, padding: popperPadding, className: cls('root', {
             'force-hide': tooltipForceHide,
             'disable-interactions': disableInteractions,

package/chunks/VirtualizedMenu.js

@@ -55,7 +55,7 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
             bottom: padding.bottom ?? 16,
             left: padding.left ?? 16,
         }
-        : padding ?? 16;
+        : (padding ?? 16);
     const popperActions = useRef(null);
     const handlePopperActions = useForkRef(popperActions, popperActionsProp);
     const menuContextValue = useMemo(() => {

package/chunks/useMenuItemSelect.js

@@ -15,9 +15,20 @@ const MenuListContext = createContext({
 });
 const useMenuListContext = () => useContext(MenuListContext);
 
+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() ?? {};
@@ -32,17 +43,20 @@ const useMenuItem = (props) => {
         },
     });
     const { close: closeMenu } = useMenuContext() ?? {};
+    const handleClick = disabled
+        ? undefined
+        : composeEventHandlers(onClick, () => {
+            if (autoClose)
+                closeMenu?.();
+        });
     const { active, activeHandlers } = useActive({
+        disabled,
         onKeyDown: (e) => {
             onKeyDown?.(e);
             keyboardNavHandlers?.onKeyDown(e);
         },
         onKeyUp,
-        onClick: (e) => {
-            onClick?.(e);
-            if (autoClose)
-                closeMenu?.();
-        },
+        onClick: handleClick,
     });
     const handleItemRef = useForkRef(ref, focusVisibleRef, itemRef);
     const getRootProps = (otherProps) => {
@@ -60,7 +74,7 @@ const useMenuItem = (props) => {
 };
 
 const useVirtualizedMenuItem = (props) => {
-    const { onBlur, onFocus, onKeyDown, onKeyUp, onClick, autoClose, ref } = props;
+    const { onBlur, onFocus, onKeyDown, onKeyUp, onClick, disabled, autoClose, ref, } = props;
     const { keyboardNavHandlers, itemRef } = useItemNavigation() ?? {};
     const vlItemProps = useVirtualizedItemPropsContext();
     const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible({
@@ -74,17 +88,20 @@ const useVirtualizedMenuItem = (props) => {
         },
     });
     const { close: closeMenu } = useMenuContext() ?? {};
+    const handleClick = disabled
+        ? undefined
+        : composeEventHandlers(onClick, () => {
+            if (autoClose)
+                closeMenu?.();
+        });
     const { active, activeHandlers } = useActive({
+        disabled,
         onKeyDown: (e) => {
             onKeyDown?.(e);
             keyboardNavHandlers?.onKeyDown(e);
         },
         onKeyUp,
-        onClick: (e) => {
-            onClick?.(e);
-            if (autoClose)
-                closeMenu?.();
-        },
+        onClick: handleClick,
     });
     const handleItemRef = useForkRef(ref, focusVisibleRef, itemRef);
     const getRootProps = (otherProps) => {
@@ -103,7 +120,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 { classes, className, children, selected, disabled, onMouseEnter, onMouseLeave, onPointerMove, highlighted = false, focused = false, autoClose = true, autoFocus, ...rest } = props;
     const cls = useClassesWithMode('menu-item', classes, className);
     const vlItemProps = useVirtualizedItemPropsContext();
     const isInVlRef = useRef(Boolean(vlItemProps));
@@ -128,9 +145,24 @@ const MenuItem = forwardRef((inProps, ref) => {
     const selectMode = selectContextValue
         ? selectContextValue.selectMode
         : 'single';
-    const id = useId();
-    const { hover, hoverHandlers } = useHover({ onMouseEnter, onMouseLeave });
-    useNestedMenuItem({ hovered: hover, id });
+    const subMenuTriggerNestedId = useContext(SubMenuTriggerNestedIdContext);
+    const generatedId = useId();
+    const id = subMenuTriggerNestedId ?? generatedId;
+    const isSubMenuTrigger = Boolean(subMenuTriggerNestedId);
+    const { requestItemHover } = useNestedMenuItem({ id });
+    const { hoverHandlers } = useHover({
+        onMouseEnter,
+        onMouseLeave,
+    });
+    const handlePointerMove = (event) => {
+        if (event.pointerType === 'mouse' &&
+            !requestItemHover(event, {
+                closeOpenedSubMenu: !isSubMenuTrigger,
+            })) {
+            event.preventDefault();
+        }
+        onPointerMove?.(event);
+    };
     useLayoutEffect(() => {
         if (autoFocus) {
             itemRef.current?.focus();
@@ -155,7 +187,7 @@ const MenuItem = forwardRef((inProps, ref) => {
             highlighted,
             focused,
             nowrap: menuListContextValue.nowrap,
-        }), ...getRootProps(rest), ...hoverHandlers, children: jsxs("div", { className: cls('container'), children: [selectable && (jsx("div", { className: cls('select-indicator'), children: selectMode === 'single' ? (jsx("span", { className: cls('select-dot') })) : (jsx(Icon, { symbol: CheckBoldMd, size: "small" })) })), children] }) }));
+        }), ...getRootProps(rest), ...hoverHandlers, onPointerMove: handlePointerMove, children: jsxs("div", { className: cls('container'), children: [selectable && (jsx("div", { className: cls('select-indicator'), children: selectMode === 'single' ? (jsx("span", { className: cls('select-dot') })) : (jsx(Icon, { symbol: CheckBoldMd, size: "small" })) })), children] }) }));
 });
 MenuItem.displayName = 'SuiMenuItem';
 
@@ -236,4 +268,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, composeEventHandlers as g, useMenuItemSelectContext as u };

package/chunks/useNestedMenuItem.js

@@ -1,16 +1,27 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { u as useNestedMenuContext } from './useNestedParentMenu.js';
 
 const useNestedMenuItem = (props) => {
     const context = useNestedMenuContext();
     const { hovered, id } = props;
-    const { registHoveredItem } = context ?? {};
+    const { isPointerMovingToSubMenu: isPointerMovingToSubMenuContext, onPointerGraceIntentChange, registHoveredItem, } = context ?? {};
+    const requestItemHover = useCallback((event, options) => {
+        const canApplyHover = registHoveredItem?.(id, event, options);
+        return canApplyHover ?? true;
+    }, [id, registHoveredItem]);
     useEffect(() => {
         if (hovered) {
-            return registHoveredItem?.(id);
+            requestItemHover();
         }
-        return undefined;
-    }, [hovered, id, registHoveredItem]);
+    }, [hovered, requestItemHover]);
+    const isPointerMovingToSubMenu = useCallback((event, intent) => {
+        return isPointerMovingToSubMenuContext?.(event, intent) ?? false;
+    }, [isPointerMovingToSubMenuContext]);
+    return {
+        isPointerMovingToSubMenu,
+        onPointerGraceIntentChange,
+        requestItemHover,
+    };
 };
 
 export { useNestedMenuItem as u };

package/chunks/useNestedParentMenu.js

@@ -1,20 +1,82 @@
-import { createContext, useContext, useRef, useMemo, useLayoutEffect } from 'react';
+import { createContext, useContext, useRef, useCallback, useMemo, useLayoutEffect } from 'react';
 
 const NestedMenuContext = createContext(null);
 const useNestedMenuContext = () => {
     return useContext(NestedMenuContext);
 };
 
+const getPointFromPointerEvent = (event) => ({
+    x: event.clientX,
+    y: event.clientY,
+});
+const isPointInPolygon = (point, polygon) => {
+    let inside = false;
+    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+        const pointI = polygon[i];
+        const pointJ = polygon[j];
+        const intersects = pointI.y > point.y !== pointJ.y > point.y &&
+            point.x <
+                ((pointJ.x - pointI.x) * (point.y - pointI.y)) / (pointJ.y - pointI.y) +
+                    pointI.x;
+        if (intersects) {
+            inside = !inside;
+        }
+    }
+    return inside;
+};
+const isPointerInGraceArea = (event, area) => {
+    if (!area)
+        return false;
+    return isPointInPolygon(getPointFromPointerEvent(event), area);
+};
+
 const useNestedParentMenu = (props) => {
     const openedSubMenuSymbolRef = useRef(null);
+    const pointerGraceIntentRef = useRef(null);
+    const pointerDirRef = useRef('right');
+    const lastPointerXRef = useRef(0);
     const { open } = props;
+    const onPointerGraceIntentChange = useCallback((intent) => {
+        pointerGraceIntentRef.current = intent;
+    }, []);
+    const isPointerMovingToSubMenu = useCallback((event, intentArg) => {
+        const intent = intentArg === undefined ? pointerGraceIntentRef.current : intentArg;
+        const isMovingTowards = pointerDirRef.current === intent?.side;
+        return isMovingTowards && isPointerInGraceArea(event, intent?.area);
+    }, []);
+    const onContentPointerMove = useCallback((event) => {
+        const pointerXHasChanged = lastPointerXRef.current !== event.clientX;
+        if (pointerXHasChanged) {
+            pointerDirRef.current =
+                event.clientX > lastPointerXRef.current ? 'right' : 'left';
+            lastPointerXRef.current = event.clientX;
+        }
+    }, []);
+    const onContentClickCapture = useCallback((event) => {
+        const target = event.target;
+        const openedSubMenu = openedSubMenuSymbolRef.current;
+        if (!target || !event.currentTarget.contains(target)) {
+            return;
+        }
+        if (openedSubMenu?.getAnchorElement?.()?.contains(target)) {
+            return;
+        }
+        openedSubMenu?.closeSubMenu();
+    }, []);
     const contextValue = useMemo(() => {
         return {
-            registHoveredItem: (id) => {
+            registHoveredItem: (id, event, options) => {
                 const symbol = openedSubMenuSymbolRef.current;
-                if (symbol && id !== symbol.anchorId) {
+                if (!symbol || id === symbol.anchorId) {
+                    return true;
+                }
+                if (event && isPointerMovingToSubMenu(event)) {
+                    return false;
+                }
+                if (options?.closeOpenedSubMenu ?? true) {
                     symbol.closeSubMenu();
                 }
+                return true;
             },
             registOpenedSubMenu: (menuItemSymbol) => {
                 openedSubMenuSymbolRef.current?.closeSubMenu();
@@ -25,14 +87,24 @@ const useNestedParentMenu = (props) => {
                     }
                 };
             },
+            isPointerMovingToSubMenu,
+            onPointerGraceIntentChange,
         };
-    }, []);
+    }, [isPointerMovingToSubMenu, onPointerGraceIntentChange]);
     useLayoutEffect(() => {
         if (!open) {
             openedSubMenuSymbolRef.current?.closeSubMenu();
+            openedSubMenuSymbolRef.current = null;
+            onPointerGraceIntentChange(null);
         }
-    }, [open]);
+    }, [onPointerGraceIntentChange, open]);
     return {
+        contentClickHandlers: {
+            onClickCapture: onContentClickCapture,
+        },
+        contentPointerHandlers: {
+            onPointerMove: onContentPointerMove,
+        },
         contextValue,
         getHaveOpenedSubMenu: () => Boolean(openedSubMenuSymbolRef.current),
     };

package/chunks/useTrayNavigate.js

@@ -23,7 +23,7 @@ const useTray = (parameters) => {
         setValue(newValue);
         onChange?.(e, newValue);
         if (stack.includes(newValue)) {
-            setStack([...stack.slice(0, stack.indexOf(newValue) + 1)]);
+            setStack(stack.slice(0, stack.indexOf(newValue) + 1));
             setDirection('left');
         }
         else {