@ringcentral/spring-ui 1.11.1 → 1.11.2

package/Autocomplete.js

@@ -14,6 +14,7 @@ import { g as getFade } from './chunks/getFade.js';
 import { C as Chip } from './chunks/Chip.js';
 import { Popper } from './Popper.js';
 import { T as TextField } from './chunks/TextField.js';
+import { u as useAnimationFrame } from './chunks/useAnimationFrame.js';
 import uniqueId from 'lodash/uniqueId';
 import './chunks/useMotionSafeTransition.js';
 import '@mui/base';
@@ -1090,6 +1091,7 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
     const keepHighlightedIndexRef = useRef(false);
     const popperElementRef = useRef(null);
     const { sleep, getSleeping } = useSleep();
+    const { requestAnimationFrame } = useAnimationFrame();
     const multiple = isAutocomplete ? false : multipleProp;
     const inputContainerScrollToBottom = () => {
         requestAnimationFrame(() => {

package/Dropdown.js

@@ -27,6 +27,7 @@ import './chunks/Backdrop.js';
 import './Popper.js';
 import './chunks/PopperPaper.js';
 import '@ringcentral/spring-icon';
+import './chunks/useAnimationFrame.js';
 import './chunks/useNestedMenuItem.js';
 import './ListNavigation.js';
 import 'react-virtuoso';

package/ListItem.js

@@ -9,6 +9,7 @@ import './chunks/useListNavigation.js';
 import 'tabbable';
 import './VirtualizedList.js';
 import 'react-virtuoso';
+import './chunks/useAnimationFrame.js';
 import './chunks/List.js';
 import 'framer-motion';
 import './chunks/Icon.js';

package/ListItemText.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useClasses } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
+import { h as hasContent } from './chunks/hasContent.js';
 
 var ListItemText$1 = {"sui-list-item-text-root":"sui-list-item-text-root","sui-list-item-text-primary-text":"sui-list-item-text-primary-text","sui-list-item-text-secondary-text":"sui-list-item-text-secondary-text","sui-list-item-text-primary":"sui-list-item-text-primary","sui-list-item-text-primary-primary-text":"sui-list-item-text-primary-primary-text","sui-list-item-text-secondary":"sui-list-item-text-secondary","sui-list-item-text-secondary-primary-text":"sui-list-item-text-secondary-primary-text"};
 
@@ -9,9 +10,13 @@ const ListItemText = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'ListItemText' });
     const { classes, className, primary, secondary, primaryText, secondaryText, variant = 'primary', children, ...rest } = props;
     const cls = useClasses('list-item-text', classes, className);
-    const primaryContent = primary || primaryText || children;
-    const secondaryContent = secondary || secondaryText;
-    return (jsxs("div", { className: cls('root', variant), ...rest, ref: ref, children: [jsx("span", { className: cls('primary-text', `${variant}-primary-text`), children: primaryContent }), secondaryContent && (jsx("span", { className: cls('secondary-text', `${variant}-secondary-text`), children: secondaryContent }))] }));
+    const primaryContent = hasContent(primary)
+        ? primary
+        : hasContent(primaryText)
+            ? primaryText
+            : children;
+    const secondaryContent = hasContent(secondary) ? secondary : secondaryText;
+    return (jsxs("div", { className: cls('root', variant), ...rest, ref: ref, children: [jsx("span", { className: cls('primary-text', `${variant}-primary-text`), children: primaryContent }), hasContent(secondaryContent) && (jsx("span", { className: cls('secondary-text', `${variant}-secondary-text`), children: secondaryContent }))] }));
 });
 ListItemText.displayName = 'SuiListItemText';
 

package/MenuHeader.js

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
+import { h as hasContent } from './chunks/hasContent.js';
 import { M as MenuDivider } from './chunks/MenuDivider.js';
 import './chunks/Divider.js';
 import '@ringcentral/spring-base';
@@ -11,7 +12,9 @@ const MenuHeader = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'MenuHeader' });
     const { classes, className, children, start, end, divider = true, ...rest } = props;
     const cls = useClassesWithMode('menu-header', classes, className);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: cls('root'), ...rest, ref: ref, children: [start && jsx("div", { className: cls('start'), children: start }), end && jsx("div", { className: cls('end'), children: end }), typeof children === 'string' ? (jsx("span", { className: cls('title'), title: children, children: children })) : (children)] }), divider && jsx(MenuDivider, {})] }));
+    const hasStart = hasContent(start);
+    const hasEnd = hasContent(end);
+    return (jsxs(Fragment, { children: [jsxs("div", { className: cls('root'), ...rest, ref: ref, children: [hasStart && jsx("div", { className: cls('start'), children: start }), hasEnd && jsx("div", { className: cls('end'), children: end }), typeof children === 'string' ? (jsx("span", { className: cls('title'), title: children, children: children })) : (children)] }), divider && jsx(MenuDivider, {})] }));
 });
 MenuHeader.displayName = 'SuiMenuHeader';
 

package/MenuItem.js

@@ -5,6 +5,7 @@ import '@ringcentral/spring-base';
 import '@ringcentral/spring-icon';
 import '@ringcentral/spring-theme';
 import './chunks/Icon.js';
+import './chunks/useAnimationFrame.js';
 import './chunks/useNestedParentMenu.js';
 import './chunks/useNestedMenuItem.js';
 import './VirtualizedList.js';

package/MenuItemText.js

@@ -3,6 +3,7 @@ import 'react/jsx-runtime';
 import 'react';
 import '@ringcentral/spring-base';
 import '@ringcentral/spring-theme';
+import './chunks/hasContent.js';
 
 var MenuItemText = {"sui-menu-item-text-root":"sui-menu-item-text-root","sui-menu-item-text-primary-text":"sui-menu-item-text-primary-text","sui-menu-item-text-info-text":"sui-menu-item-text-info-text","sui-compact":"sui-compact"};
 

package/MenuList.js

@@ -24,6 +24,7 @@ import './Popper.js';
 import './chunks/PopperPaper.js';
 import './VirtualizedList.js';
 import 'react-virtuoso';
+import './chunks/useAnimationFrame.js';
 import '@ringcentral/spring-icon';
 import './chunks/useNestedMenuItem.js';
 import './ListNavigation.js';

package/Option.js

@@ -9,6 +9,7 @@ import './chunks/Menu.js';
 import './VirtualizedList.js';
 import '@ringcentral/spring-icon';
 import './chunks/Icon.js';
+import './chunks/useAnimationFrame.js';
 import './chunks/useNestedParentMenu.js';
 import './chunks/useNestedMenuItem.js';
 import './ListNavigation.js';

package/Select.js

@@ -24,6 +24,7 @@ import './Popper.js';
 import './chunks/PopperPaper.js';
 import './chunks/useMenuItemSelect.js';
 import '@ringcentral/spring-icon';
+import './chunks/useAnimationFrame.js';
 import './chunks/useNestedMenuItem.js';
 import './VirtualizedList.js';
 import 'react-virtuoso';

package/SingleFilter.js

@@ -31,10 +31,12 @@ import './chunks/useNestedParentMenu.js';
 import './chunks/Popover.js';
 import './chunks/getGrow.js';
 import '@ringcentral/spring-icon';
+import './chunks/useAnimationFrame.js';
 import './chunks/useNestedMenuItem.js';
 import './ListNavigation.js';
 import 'react-virtuoso';
 import './chunks/List.js';
+import './chunks/hasContent.js';
 
 var FilterButton$1 = {"sui-filter-button-root":"sui-filter-button-root","sui-focus-visible":"sui-focus-visible","sui-selected":"sui-selected","sui-disabled":"sui-disabled"};
 

package/SortableListItem.js

@@ -15,6 +15,7 @@ import './chunks/useListNavigation.js';
 import 'tabbable';
 import './VirtualizedList.js';
 import 'react-virtuoso';
+import './chunks/useAnimationFrame.js';
 import './chunks/List.js';
 import './chunks/useMotionSafeTransition.js';
 import './chunks/usePrefersReducedMotion.js';

package/SortableVirtualizedList.js

@@ -6,6 +6,7 @@ import { forwardRef, useMemo } from 'react';
 import { VirtualizedList } from './VirtualizedList.js';
 import '@ringcentral/spring-base';
 import 'react-virtuoso';
+import './chunks/useAnimationFrame.js';
 import './chunks/List.js';
 import './chunks/useListNavigation.js';
 import 'tabbable';

package/SplitButton.js

@@ -35,6 +35,7 @@ import './chunks/useListNavigation.js';
 import 'tabbable';
 import './VirtualizedList.js';
 import 'react-virtuoso';
+import './chunks/useAnimationFrame.js';
 import '@ringcentral/spring-icon';
 import './chunks/useNestedMenuItem.js';
 import './ListNavigation.js';

package/SubMenu.js

@@ -22,12 +22,14 @@ import './chunks/usePrefersReducedMotion.js';
 import './chunks/getFade.js';
 import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
+import './chunks/useAnimationFrame.js';
 import './ListNavigation.js';
 import './chunks/Popover.js';
 import './chunks/getGrow.js';
 import './chunks/PopperPaper.js';
 import 'react-virtuoso';
 import './chunks/List.js';
+import './chunks/hasContent.js';
 
 var PopperMenu$1 = {"sui-popper-menu-root":"sui-popper-menu-root","sui-popper-menu-paper":"sui-popper-menu-paper"};
 

package/SwipeableDrawer.js

@@ -7,6 +7,7 @@ import { D as Drawer } from './chunks/Drawer.js';
 import { D as DragHandle } from './chunks/DragHandle.js';
 import { useMotionValue, animate, useTransform } from 'framer-motion';
 import { rubberbandIfOutOfBounds, useDrag } from '@use-gesture/react';
+import { u as useAnimationFrame } from './chunks/useAnimationFrame.js';
 import { ResizeObserver } from '@juggle/resize-observer';
 import './chunks/Icon.js';
 import './chunks/usePrefersReducedMotion.js';
@@ -48,8 +49,7 @@ const observerOptions = {
     box: 'border-box',
 };
 function useElementSizeObserver(ref, { enabled, resizeSourceRef, }) {
-    const { externalWindow, globalThis } = useWindowContext();
-    const win = externalWindow ?? globalThis;
+    const { requestAnimationFrame, cancelAnimationFrame } = useAnimationFrame();
     const [size, setSize] = useState(0);
     const handleResize = useCallback((entries) => {
         const entry = entries?.[0];
@@ -74,8 +74,6 @@ function useElementSizeObserver(ref, { enabled, resizeSourceRef, }) {
         if (!enabled) {
             return;
         }
-        const rAF = win.requestAnimationFrame.bind(win);
-        const cAF = win.cancelAnimationFrame.bind(win);
         let resizeObserver = null;
         let rafId = 0;
         let initialMeasurementRafId = 0;
@@ -85,7 +83,7 @@ function useElementSizeObserver(ref, { enabled, resizeSourceRef, }) {
                 return;
             resizeObserver = new ResizeObserver(handleResize);
             resizeObserver.observe(el, observerOptions);
-            initialMeasurementRafId = rAF(() => {
+            initialMeasurementRafId = requestAnimationFrame(() => {
                 const initial = Math.max(el.scrollHeight, el.offsetHeight, el.getBoundingClientRect().height);
                 if (initial > 0) {
                     setSize(initial);
@@ -97,31 +95,33 @@ function useElementSizeObserver(ref, { enabled, resizeSourceRef, }) {
                 startObserving();
             }
             else {
-                rafId = rAF(waitForElement);
+                rafId = requestAnimationFrame(waitForElement);
             }
         };
         if (ref.current) {
             startObserving();
         }
         else {
-            rafId = rAF(waitForElement);
+            rafId = requestAnimationFrame(waitForElement);
         }
         return () => {
             if (rafId)
-                cAF(rafId);
-            if (initialMeasurementRafId)
-                cAF(initialMeasurementRafId);
+                cancelAnimationFrame(rafId);
+            if (initialMeasurementRafId) {
+                cancelAnimationFrame(initialMeasurementRafId);
+            }
             if (resizeObserver) {
                 resizeObserver.disconnect();
             }
         };
-    }, [ref, handleResize, enabled, win]);
+    }, [ref, handleResize, enabled, requestAnimationFrame, cancelAnimationFrame]);
     return enabled ? size : 0;
 }
 
 function useMaxHeight(registerReady) {
-    const { externalWindow, globalThis } = useWindowContext();
-    const win = externalWindow ?? globalThis;
+    const { externalWindow, globalThis: contextGlobal } = useWindowContext();
+    const win = externalWindow ?? contextGlobal;
+    const { requestAnimationFrame, cancelAnimationFrame } = useAnimationFrame();
     const setReady = useMemo(() => {
         return registerReady ? registerReady('maxHeight') : undefined;
     }, [registerReady]);
@@ -132,13 +132,11 @@ function useMaxHeight(registerReady) {
         maxReadyCalledRef.current = false;
     }, [setReady]);
     useLayoutEffect(() => {
-        const rAF = win.requestAnimationFrame.bind(win);
-        const cAF = win.cancelAnimationFrame.bind(win);
         const handleResize = () => {
             if (raf.current) {
                 return;
             }
-            raf.current = rAF(() => {
+            raf.current = requestAnimationFrame(() => {
                 if (raf.current !== 0) {
                     setMaxHeight(win.innerHeight);
                     raf.current = 0;
@@ -153,9 +151,9 @@ function useMaxHeight(registerReady) {
         }
         return () => {
             win.removeEventListener('resize', handleResize);
-            cAF(raf.current);
+            cancelAnimationFrame(raf.current);
         };
-    }, [setReady, win]);
+    }, [setReady, win, requestAnimationFrame, cancelAnimationFrame]);
     return maxHeight;
 }
 function usePreservedHeight(currentHeight) {

package/TablePagination.js

@@ -22,7 +22,9 @@ import './chunks/Modal.js';
 import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 import './chunks/PopperPaper.js';
+import './chunks/hasContent.js';
 import './chunks/useMenuItemSelect.js';
+import './chunks/useAnimationFrame.js';
 import './chunks/useNestedParentMenu.js';
 import './chunks/useNestedMenuItem.js';
 import './VirtualizedList.js';

package/Tabs.js

@@ -36,10 +36,12 @@ import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 import './Popper.js';
 import './chunks/PopperPaper.js';
+import './chunks/useAnimationFrame.js';
 import './chunks/useNestedMenuItem.js';
 import './ListNavigation.js';
 import 'react-virtuoso';
 import './chunks/List.js';
+import './chunks/hasContent.js';
 import 'clsx';
 
 const TabMenuItem = forwardRef((props, ref) => {

package/TrayMenu.js

@@ -24,6 +24,7 @@ import './Popper.js';
 import './chunks/PopperPaper.js';
 import './chunks/useMotionSafeTransition.js';
 import '@ringcentral/spring-icon';
+import './chunks/useAnimationFrame.js';
 import './chunks/useNestedMenuItem.js';
 import './ListNavigation.js';
 import 'react-virtuoso';

package/VirtualizedList.js

@@ -1,8 +1,9 @@
 import { createContext, useContext, forwardRef, isValidElement, useRef, useState, useImperativeHandle, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
-import { useForkRef, useWindowContext, useVirtuosoExternalWindow, useEventCallback, logInDev } from '@ringcentral/spring-base';
+import { useForkRef, useVirtuosoExternalWindow, useEventCallback, logInDev } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { Virtuoso } from 'react-virtuoso';
+import { u as useAnimationFrame } from './chunks/useAnimationFrame.js';
 import { L as List } from './chunks/List.js';
 import './chunks/useListNavigation.js';
 import 'tabbable';
@@ -85,7 +86,7 @@ const VirtualizedList = forwardRef((inProps, ref) => {
     const handleVirtuosoRef = useForkRef(virtuosoRef, virtuosoActions);
     const initialFocusItemByIndexPromiseRef = useRef(null);
     const itemRenderedPromiseRef = useRef(null);
-    const { globalThis: contextWindow } = useWindowContext();
+    const { requestAnimationFrame } = useAnimationFrame();
     const externalWindowProps = useVirtuosoExternalWindow();
     const isItemRendered = (index) => {
         const { startIndex, endIndex } = listRangeRef.current;
@@ -96,7 +97,7 @@ const VirtualizedList = forwardRef((inProps, ref) => {
             new Promise((resolve) => {
                 initialFocusItemByIndexPromiseRef.current = resolve;
             }).then(() => {
-                contextWindow.requestAnimationFrame(() => focusByIndexAction(index));
+                requestAnimationFrame(() => focusByIndexAction(index));
             });
         }
         else {

package/VirtualizedMenu.js

@@ -4,6 +4,7 @@ import 'react';
 import '@ringcentral/spring-base';
 import '@ringcentral/spring-theme';
 import 'clsx';
+import './chunks/useAnimationFrame.js';
 import './chunks/Popover.js';
 import '@floating-ui/react-dom';
 import 'framer-motion';

package/chunks/MenuItemText.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { getTitle } from '@ringcentral/spring-base';
 import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
+import { h as hasContent } from './hasContent.js';
 
 const MenuItemText = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'MenuItemText' });
@@ -9,7 +10,7 @@ const MenuItemText = forwardRef((inProps, ref) => {
     const cls = useClassesWithMode('menu-item-text', classes, className);
     const primaryContent = primary ?? primaryText ?? children;
     const secondaryContent = info ?? infoText;
-    return (jsxs("div", { className: cls('root'), ...rest, ref: ref, children: [jsx("span", { className: cls('primary-text'), title: getTitle(primaryContent), children: primaryContent }), secondaryContent && (jsx("span", { className: cls('info-text'), title: getTitle(secondaryContent), children: secondaryContent }))] }));
+    return (jsxs("div", { className: cls('root'), ...rest, ref: ref, children: [jsx("span", { className: cls('primary-text'), title: getTitle(primaryContent), children: primaryContent }), hasContent(secondaryContent) && (jsx("span", { className: cls('info-text'), title: getTitle(secondaryContent), children: secondaryContent }))] }));
 });
 MenuItemText.displayName = 'SuiMenuItemText';
 

package/chunks/Modal.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext, forwardRef, useState, useEffect } from 'react';
+import { createContext, useContext, useRef, useCallback, useLayoutEffect, forwardRef, useState, useEffect } from 'react';
 import { useAriaHideOutside, useForkRef, useClasses, useEventCallback, useBodyScrollLock, useWindowContext } from '@ringcentral/spring-base';
 import { useThemeProps, useTheme } from '@ringcentral/spring-theme';
 import { FocusTrap, Portal } from '@mui/base';
@@ -13,15 +13,130 @@ import { B as Backdrop } from './Backdrop.js';
 const ModalContext = createContext(null);
 const useModalContext = () => useContext(ModalContext);
 
+const createOverlayBranchRegistry = () => {
+    const branchRefCounts = new Map();
+    const listeners = new Set();
+    const notify = (node, isRegistered) => {
+        for (const listener of [...listeners]) {
+            listener(node, isRegistered);
+        }
+    };
+    return {
+        getBranches: () => new Set(branchRefCounts.keys()),
+        register: (node) => {
+            const currentCount = branchRefCounts.get(node) ?? 0;
+            branchRefCounts.set(node, currentCount + 1);
+            if (currentCount === 0) {
+                notify(node, true);
+            }
+            let isCleanedUp = false;
+            return () => {
+                if (isCleanedUp) {
+                    return;
+                }
+                isCleanedUp = true;
+                const currentCount = branchRefCounts.get(node);
+                if (!currentCount) {
+                    return;
+                }
+                if (currentCount > 1) {
+                    branchRefCounts.set(node, currentCount - 1);
+                    return;
+                }
+                branchRefCounts.delete(node);
+                notify(node, false);
+            };
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+};
+const useOverlayBranchRegistry = () => {
+    const registryRef = useRef();
+    if (!registryRef.current) {
+        registryRef.current = createOverlayBranchRegistry();
+    }
+    return registryRef.current;
+};
+
+const useOverlayBranch = ({ active, registry, }) => {
+    const nodeRef = useRef(null);
+    const registrationRef = useRef(null);
+    const syncRegistration = useCallback((node) => {
+        const registration = registrationRef.current;
+        const shouldKeepRegistration = registration &&
+            active &&
+            registration.node === node &&
+            registration.registry === registry;
+        if (shouldKeepRegistration) {
+            return;
+        }
+        registration?.unregister();
+        registrationRef.current = null;
+        if (active && node && registry) {
+            registrationRef.current = {
+                node,
+                registry,
+                unregister: registry.register(node),
+            };
+        }
+    }, [active, registry]);
+    const setBranchRef = useCallback((node) => {
+        nodeRef.current = node;
+        syncRegistration(node);
+    }, [syncRegistration]);
+    useLayoutEffect(() => {
+        syncRegistration(nodeRef.current);
+    }, [syncRegistration]);
+    useLayoutEffect(() => () => {
+        registrationRef.current?.unregister();
+        registrationRef.current = null;
+    }, []);
+    return setBranchRef;
+};
+const useOverlayBranchConsumer = (registry, listener) => {
+    useLayoutEffect(() => {
+        const unsubscribe = registry.subscribe(listener);
+        for (const node of registry.getBranches()) {
+            listener(node, true);
+        }
+        return () => {
+            unsubscribe();
+            for (const node of registry.getBranches()) {
+                listener(node, false);
+            }
+        };
+    }, [listener, registry]);
+};
+
 const InnerModal = forwardRef((props, ref) => {
-    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, children, motionProps, disableBackdropClick: disableBackdropClickProp, onBackdropClick, disableEscapeKeyDown: disableEscapeKeyDownProp, onEscapeKeyDown, onClose, onKeyDown, disableAutoFocus, disableEnforceFocus, disableRestoreFocus, classes, className, backdropProps, open, isEnabled, blocking = true, shouldUseInert: shouldUseInertProp, ...rest } = props;
+    const parentModalContext = useModalContext();
+    const ownOverlayBranchRegistry = useOverlayBranchRegistry();
+    const shouldUseInert = shouldUseInertProp ?? parentModalContext?.shouldUseInert ?? false;
     const hideBackdrop = hideBackdropProp ?? !blocking;
     const disableBackdropClick = disableBackdropClickProp ?? !blocking;
     const disableEscapeKeyDown = disableEscapeKeyDownProp ?? !blocking;
-    const { ariaHideOutsideRef, ariaHideEnabled } = useAriaHideOutside({
-        enable: blocking,
+    const { ariaHideOutsideRef, ariaHideEnabled, setAriaHideOutsideTarget } = useAriaHideOutside({
+        enable: blocking && open,
+        shouldUseInert,
+    });
+    useOverlayBranchConsumer(ownOverlayBranchRegistry, setAriaHideOutsideTarget);
+    const parentOverlayBranchRegistry = parentModalContext?.overlayBranchRegistry;
+    const overlayBranchRegistry = ariaHideEnabled
+        ? ownOverlayBranchRegistry
+        : parentOverlayBranchRegistry;
+    const isOverlayBranch = !blocking && open && parentOverlayBranchRegistry != null;
+    const ariaHideEnabledForChildren = ariaHideEnabled || parentModalContext?.ariaHideEnabled === true;
+    const overlayBranchRef = useOverlayBranch({
+        active: isOverlayBranch,
+        registry: parentOverlayBranchRegistry,
     });
-    const handleRef = useForkRef(ref, ariaHideOutsideRef);
+    const handleRef = useForkRef(ref, ariaHideOutsideRef, overlayBranchRef);
     const cls = useClasses('modal', classes, className);
     const { onClick: externalOnClick, ...restBackdropProps } = backdropProps || {};
     const handleBackdropClick = useEventCallback((event) => {
@@ -34,7 +149,11 @@ const InnerModal = forwardRef((props, ref) => {
         onBackdropClick?.(event);
         onClose?.(event, 'backdropClick');
     });
-    return (jsx(ModalContext.Provider, { value: { ariaHideEnabled }, children: jsxs(motion.div, { ...rest, ...motionProps, role: "presentation", className: cls('root', { 'non-blocking': !blocking }), onKeyDown: (e) => {
+    return (jsx(ModalContext.Provider, { value: {
+            ariaHideEnabled: ariaHideEnabledForChildren,
+            overlayBranchRegistry,
+            shouldUseInert,
+        }, children: jsxs(motion.div, { ...rest, ...motionProps, role: "presentation", className: cls('root', { 'non-blocking': !blocking }), onKeyDown: (e) => {
                 onKeyDown?.(e);
                 if (!disableEscapeKeyDown &&
                     e.key === 'Escape' &&
@@ -48,7 +167,12 @@ 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: disableScrollLockProp, blocking = true, ...rest } = props;
+    const { children, open, container: containerProp, disablePortal, onExitComplete, disableBackdropAnimation, motionProps, disableScrollLock: disableScrollLockProp, blocking = true, shouldUseInert: themeFallbackShouldUseInert, ...rest } = props;
+    const parentModalContext = useModalContext();
+    const shouldUseInert = inProps.shouldUseInert ??
+        parentModalContext?.shouldUseInert ??
+        themeFallbackShouldUseInert ??
+        false;
     const disableScrollLock = disableScrollLockProp ?? !blocking;
     const [shouldRender, setShouldRender] = useState(open);
     const [modalElement, setModalElement] = useState(null);
@@ -78,7 +202,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, blocking: blocking, 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, shouldUseInert: shouldUseInert, isEnabled: isEnabled, motionProps: {
                     ...(motionProps ?? getFade({ prefersReducedMotion, toggle: open })),
                     onAnimationComplete,
                 }, children: children }) }) })) : null;

package/chunks/VirtualizedMenu.js

@@ -3,6 +3,7 @@ import { createContext, useContext, useRef, useLayoutEffect, forwardRef, useStat
 import { useForkRef, combineProps, useClasses, useEventCallback } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import clsx from 'clsx';
+import { u as useAnimationFrame } from './useAnimationFrame.js';
 import { P as Popover } from './Popover.js';
 import { VirtualizedList } from '../VirtualizedList.js';
 
@@ -58,6 +59,7 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
         : (padding ?? 16);
     const popperActions = useRef(null);
     const handlePopperActions = useForkRef(popperActions, popperActionsProp);
+    const { requestAnimationFrame } = useAnimationFrame();
     const menuContextValue = useMemo(() => {
         return { open };
     }, [open]);

package/chunks/hasContent.js

@@ -0,0 +1,3 @@
+const hasContent = (content) => Boolean(content) || content === 0;
+
+export { hasContent as h };

package/chunks/useAnimationFrame.js

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { useWindowContext } from '@ringcentral/spring-base';
+
+function useAnimationFrame() {
+    const { externalWindow, globalThis: contextGlobal } = useWindowContext();
+    return useMemo(() => {
+        const contextWindow = externalWindow ?? contextGlobal;
+        return {
+            requestAnimationFrame: (callback) => contextWindow.requestAnimationFrame(callback),
+            cancelAnimationFrame: (handle) => contextWindow.cancelAnimationFrame(handle),
+        };
+    }, [externalWindow, contextGlobal]);
+}
+
+export { useAnimationFrame as u };

package/chunks/useMenuItemSelect.js

@@ -4,6 +4,7 @@ import { useFocusVisible, useActive, useForkRef, useId, useHover, useEventCallba
 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';
@@ -124,6 +125,7 @@ const MenuItem = forwardRef((inProps, ref) => {
     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;
@@ -177,7 +179,7 @@ const MenuItem = forwardRef((inProps, ref) => {
                 });
             });
         }
-    }, [autoFocus]);
+    }, [autoFocus, requestAnimationFrame]);
     return (jsx("div", { className: cls('root', {
             selectable,
             selected,

package/index.js

@@ -179,6 +179,8 @@ import 'lodash/isString';
 import '@floating-ui/react-dom';
 import 'tabbable';
 import 'lodash/clamp';
+import './chunks/hasContent.js';
+import './chunks/useAnimationFrame.js';
 import 'dayjs';
 import '@date-io/dayjs';
 import '@dnd-kit/utilities';

package/internal/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useAnimationFrame';

package/internal/hooks/useAnimationFrame.d.ts

@@ -0,0 +1,4 @@
+export declare function useAnimationFrame(): {
+    requestAnimationFrame: (callback: FrameRequestCallback) => number;
+    cancelAnimationFrame: (handle: number) => void;
+};

package/internal/utils/hasContent.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from 'react';
+export declare const hasContent: (content: ReactNode) => boolean;