@ringcentral/spring-ui 1.8.0 → 1.9.0

package/Autocomplete.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useRef, useMemo, useCallback, useEffect, useLayoutEffect, useState, useImperativeHandle } from 'react';
 import clsx from 'clsx';
 import { Virtuoso } from 'react-virtuoso';
-import { usePrevious, useWindowContext, useRefState, useEventCallback, logInDev, combineProps, useDepsChange, useControlled, useId, useForceUpdate, useKeyboardMoveFocus, useForkRef, useSleep, useRetry, useChange, getSelectionPosition, useClasses } from '@ringcentral/spring-base';
+import { usePrevious, useRefState, useEventCallback, logInDev, combineProps, useDepsChange, useControlled, useId, useForceUpdate, useKeyboardMoveFocus, useForkRef, useVirtuosoExternalWindow, useSleep, useRetry, useChange, getSelectionPosition, useClasses } from '@ringcentral/spring-base';
 import { useClassesWithMode, useThemeProps } from '@ringcentral/spring-theme';
 import { E as ExpandCollapseCaret } from './chunks/ExpandCollapseCaret.js';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -86,25 +86,32 @@ const useDynamicHeight = ({ itemCount, maxContainerHeight, onContainerHeightChan
     };
 };
 
-function useHighlightScroll({ containerHeighRef, scrollToIndex, }) {
-    const { externalWindow } = useWindowContext();
+function useHighlightScroll({ virtualize = true, containerHeighRef, scrollToIndex, }) {
     const renderedItemsRef = useRef([]);
     const scrollerRef = useRef();
     const scrollToHighlightedIndex = (prevHighlightedIndex, currHighlightedIndex, topHighlightIndex = 0) => {
         const needsScrollReset = prevHighlightedIndex === -1;
         if (!scrollerRef.current) {
             if (currHighlightedIndex !== topHighlightIndex) {
-                const win = externalWindow || window;
-                win.requestAnimationFrame(() => {
-                    scrollToIndex({
-                        index: currHighlightedIndex,
-                        align: 'start',
-                    });
+                scrollToIndex({
+                    index: currHighlightedIndex,
+                    align: 'start',
                 });
             }
             return;
         }
         const scrollElm = scrollerRef.current;
+        if (!virtualize) {
+            if (needsScrollReset && currHighlightedIndex === topHighlightIndex) {
+                scrollElm.scrollTop = 0;
+                return;
+            }
+            scrollToIndex({
+                index: currHighlightedIndex,
+                align: 'start',
+            });
+            return;
+        }
         const renderedItems = renderedItemsRef.current;
         const lastHighlightedIndex = needsScrollReset
             ? currHighlightedIndex
@@ -643,6 +650,7 @@ const SuggestionList = forwardRef((inProps, ref) => {
     const listRef = useRef(null);
     const itemData = options;
     const itemCount = options.length;
+    const externalWindowProps = useVirtuosoExternalWindow();
     const internalPrevHighlightedIndex = usePrevious(() => highlightedIndex, true);
     const actualPrevHighlightedIndex = prevHighlightedIndex ?? internalPrevHighlightedIndex;
     const cls = useClassesWithMode('suggestion-list', classesProp, classNameProp);
@@ -679,7 +687,33 @@ const SuggestionList = forwardRef((inProps, ref) => {
                 return true;
             }
             const toElm = scroller?.querySelector(`[data-item-index="${toIndex}"]`);
-            toElm?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            if (!toElm || !scroller) {
+                return false;
+            }
+            const scrollerRect = scroller.getBoundingClientRect();
+            const elementRect = toElm.getBoundingClientRect();
+            const scrollerTop = scrollerRect.top;
+            const scrollerBottom = scrollerRect.bottom;
+            const elementTop = elementRect.top;
+            const elementBottom = elementRect.bottom;
+            const isFullyVisible = elementTop >= scrollerTop && elementBottom <= scrollerBottom;
+            if (!isFullyVisible) {
+                let scrollOffset = 0;
+                if (elementTop < scrollerTop) {
+                    scrollOffset = toElm.offsetTop - paddingValue;
+                }
+                else if (elementBottom > scrollerBottom) {
+                    scrollOffset =
+                        toElm.offsetTop -
+                            scroller.clientHeight +
+                            toElm.offsetHeight +
+                            paddingValue;
+                }
+                scroller.scrollTo({
+                    top: scrollOffset,
+                    behavior: 'auto',
+                });
+            }
             return true;
         }
         if (paddingValue > 0 &&
@@ -698,6 +732,7 @@ const SuggestionList = forwardRef((inProps, ref) => {
         intervalTime: 20,
     });
     const { scrollerRef, scrollerRefFn, itemsRendered: itemsRenderedFromHook, scrollToHighlightedIndex, } = useHighlightScroll({
+        virtualize,
         containerHeighRef,
         scrollToIndex: scrollToIndexWithRetry,
     });
@@ -786,7 +821,7 @@ const SuggestionList = forwardRef((inProps, ref) => {
     };
     const rootClass = cls('root');
     const context = { listRef, rootClass, paddingValue };
-    return virtualize ? (jsx(Virtuoso, { ref: forkVlRef, totalCount: itemCount, data: itemData, context: context, components: components, itemContent: itemContent, ...getSuggestionListProps(), ...combineProps({
+    return virtualize ? (jsx(Virtuoso, { ref: forkVlRef, totalCount: itemCount, data: itemData, context: context, components: components, itemContent: itemContent, ...externalWindowProps, ...getSuggestionListProps(), ...combineProps({
             scrollerRef: (scrollElm) => {
                 scrollerRefFn(scrollElm);
             },

package/Dialog.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { motion } from 'framer-motion';
 import kebabCase from 'lodash/kebabCase';
-import { useEventCallback, useClasses } from '@ringcentral/spring-base';
+import { useEventCallback, combineProps, useClasses } from '@ringcentral/spring-base';
 import { Xsm } from '@ringcentral/spring-icon';
 import { useThemeProps, useClassesWithMode, motionTransition } from '@ringcentral/spring-theme';
 import './chunks/Icon.js';
@@ -22,11 +22,11 @@ import './chunks/PopperPaper.js';
 import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 
-var Dialog$1 = {"sui-dialog-body":"sui-dialog-body","sui-dialog-root":"sui-dialog-root","sui-dialog-small":"sui-dialog-small","sui-dialog-medium":"sui-dialog-medium","sui-dialog-large":"sui-dialog-large","sui-dialog-title-root":"sui-dialog-title-root","sui-dialog-content-root":"sui-dialog-content-root","sui-dialog-actions-root":"sui-dialog-actions-root","sui-dialog-right":"sui-dialog-right","sui-dialog-right-close-button":"sui-dialog-right-close-button","sui-dialog-left":"sui-dialog-left","sui-dialog-left-close-button":"sui-dialog-left-close-button","sui-dialog-full-height":"sui-dialog-full-height","sui-dialog-close-button":"sui-dialog-close-button","sui-dialog-full-screen":"sui-dialog-full-screen","sui-compact":"sui-compact"};
+var Dialog$1 = {"sui-dialog-body":"sui-dialog-body","sui-dialog-root":"sui-dialog-root","sui-dialog-non-blocking":"sui-dialog-non-blocking","sui-dialog-small":"sui-dialog-small","sui-dialog-medium":"sui-dialog-medium","sui-dialog-large":"sui-dialog-large","sui-dialog-title-root":"sui-dialog-title-root","sui-dialog-content-root":"sui-dialog-content-root","sui-dialog-actions-root":"sui-dialog-actions-root","sui-dialog-right":"sui-dialog-right","sui-dialog-right-close-button":"sui-dialog-right-close-button","sui-dialog-left":"sui-dialog-left","sui-dialog-left-close-button":"sui-dialog-left-close-button","sui-dialog-full-height":"sui-dialog-full-height","sui-dialog-close-button":"sui-dialog-close-button","sui-dialog-full-screen":"sui-dialog-full-screen","sui-compact":"sui-compact"};
 
 const Dialog = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Dialog' });
-    const { bodyProps, classes, className, children, size = 'medium', placement = 'right', open, onClose, ...rest } = props;
+    const { bodyProps, classes, className, children, size = 'medium', placement = 'right', open, onClose, blocking = true, CloseButtonProps, ...rest } = props;
     const cls = useClassesWithMode('dialog', classes, className);
     const toSize = useMemo(() => kebabCase(size), [size]);
     const isFullHeight = size === 'fullHeight';
@@ -40,7 +40,19 @@ const Dialog = forwardRef((inProps, ref) => {
     const handleCloseButtonClick = useEventCallback((e) => {
         onClose?.(e, 'closeButtonClick');
     });
-    return (jsx(Modal, { open: open, className: cls('root'), ...rest, onClose: onClose, children: jsxs(motion.div, { role: "dialog", "aria-modal": true, ...(isFullHeight && slideInProps), ...bodyProps, ref: ref, tabIndex: -1, className: cls('body', toSize, isFullHeight && placement), children: [children, isFullHeight && (jsx(IconButton, { className: cls('close-button', `${placement}-close-button`), size: 'large', color: 'secondary', symbol: Xsm, variant: "contained", onClick: handleCloseButtonClick }))] }) }));
+    const nonBlockingProps = !blocking
+        ? {
+            disableScrollLock: true,
+            disableBackdropClick: true,
+            disableEscapeKeyDown: true,
+            hideBackdrop: true,
+        }
+        : {};
+    return (jsx(Modal, { open: open, onClose: onClose, blocking: blocking, ...nonBlockingProps, className: cls('root', { 'non-blocking': !blocking }), ...rest, children: jsxs(motion.div, { role: "dialog", "aria-modal": blocking, ...(isFullHeight && slideInProps), ...bodyProps, ref: ref, tabIndex: blocking ? -1 : undefined, className: cls('body', toSize, isFullHeight && placement), children: [children, isFullHeight && (jsx(IconButton, { size: 'large', color: 'secondary', symbol: Xsm, variant: "contained", ...combineProps({
+                        className: cls('close-button', `${placement}-close-button`),
+                        onClick: handleCloseButtonClick,
+                        'aria-label': 'Close',
+                    }, CloseButtonProps) }))] }) }));
 });
 Dialog.displayName = 'SuiDialog';
 const DialogTitle = forwardRef(({ className, ...rest }, ref) => {

package/Modal.js

@@ -11,6 +11,6 @@ import './chunks/getFade.js';
 import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 
-var Modal = {"sui-modal-root":"sui-modal-root"};
+var Modal = {"sui-modal-root":"sui-modal-root","sui-modal-non-blocking":"sui-modal-non-blocking","sui-backdrop-root":"sui-backdrop-root"};
 
 export { Modal as modalStyles };

package/StepButton.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, cloneElement } from 'react';
-import { useButton } from '@mui/base';
-import { useClasses, isSuiElement, combineProps } from '@ringcentral/spring-base';
+import { useClasses, useButton, isSuiElement, combineProps } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { b as useStepperContext, u as useStepContext } from './chunks/StepperContext.js';
 import { S as StepLabel } from './chunks/StepLabel.js';
@@ -34,7 +33,7 @@ const StepButton = forwardRef((inProps, ref) => {
             active,
             highlighted: activeStep && variant === 'outlined',
             'hide-connector': !connector,
-        }), ...getRootProps(), ...rest, ref: ref, children: child }));
+        }), ...getRootProps(rest), ref: ref, children: child }));
 });
 StepButton.displayName = 'SuiStepButton';
 

package/StepContent.js

@@ -16,9 +16,7 @@ const StepContent = forwardRef((inProps, ref) => {
     const cls = useClasses('step-content', classes, className);
     const { orientation } = useStepperContext();
     const { disabled, active, last, expanded: expandedProp, connector, id, } = useStepContext();
-    const expandedTransition = useMotionSafeTransition(motionTransition['spring-01-fast']);
-    const collapsedTransition = useMotionSafeTransition(motionTransition['spring-01-slow']);
-    const collapsedHeightTransition = useMotionSafeTransition(motionTransition['haste-01-slow']);
+    const transition = useMotionSafeTransition(motionTransition['haste-01-fast']);
     if (process.env.NODE_ENV !== 'production' && orientation !== 'vertical') {
         logInDev({
             scope: 'AvatarGroup',
@@ -31,16 +29,13 @@ const StepContent = forwardRef((inProps, ref) => {
     const keepAlive = keepMounted && isEverShown;
     const motionVariants = {
         expanded: {
-            transition: expandedTransition,
+            transition,
             opacity: 1,
             height: 'auto',
             paddingTop: 12,
         },
         collapsed: {
-            transition: {
-                ...collapsedTransition,
-                height: collapsedHeightTransition,
-            },
+            transition,
             opacity: 0,
             height: 0,
             paddingTop: 0,

package/SwipeableDrawer.js

@@ -48,6 +48,8 @@ const observerOptions = {
     box: 'border-box',
 };
 function useElementSizeObserver(ref, { enabled, resizeSourceRef, }) {
+    const { externalWindow, globalThis } = useWindowContext();
+    const win = externalWindow ?? globalThis;
     const [size, setSize] = useState(0);
     const handleResize = useCallback((entries) => {
         const entry = entries?.[0];
@@ -72,6 +74,8 @@ 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;
@@ -81,7 +85,7 @@ function useElementSizeObserver(ref, { enabled, resizeSourceRef, }) {
                 return;
             resizeObserver = new ResizeObserver(handleResize);
             resizeObserver.observe(el, observerOptions);
-            initialMeasurementRafId = requestAnimationFrame(() => {
+            initialMeasurementRafId = rAF(() => {
                 const initial = Math.max(el.scrollHeight, el.offsetHeight, el.getBoundingClientRect().height);
                 if (initial > 0) {
                     setSize(initial);
@@ -93,62 +97,65 @@ function useElementSizeObserver(ref, { enabled, resizeSourceRef, }) {
                 startObserving();
             }
             else {
-                rafId = requestAnimationFrame(waitForElement);
+                rafId = rAF(waitForElement);
             }
         };
         if (ref.current) {
             startObserving();
         }
         else {
-            rafId = requestAnimationFrame(waitForElement);
+            rafId = rAF(waitForElement);
         }
         return () => {
             if (rafId)
-                cancelAnimationFrame(rafId);
+                cAF(rafId);
             if (initialMeasurementRafId)
-                cancelAnimationFrame(initialMeasurementRafId);
+                cAF(initialMeasurementRafId);
             if (resizeObserver) {
                 resizeObserver.disconnect();
             }
         };
-    }, [ref, handleResize, enabled]);
+    }, [ref, handleResize, enabled, win]);
     return enabled ? size : 0;
 }
 
 function useMaxHeight(registerReady) {
-    const { globalThis } = useWindowContext();
+    const { externalWindow, globalThis } = useWindowContext();
+    const win = externalWindow ?? globalThis;
     const setReady = useMemo(() => {
         return registerReady ? registerReady('maxHeight') : undefined;
     }, [registerReady]);
-    const [maxHeight, setMaxHeight] = useState(() => globalThis.innerHeight ?? 0);
+    const [maxHeight, setMaxHeight] = useState(() => win.innerHeight ?? 0);
     const raf = useRef(0);
     const maxReadyCalledRef = useRef(false);
     useLayoutEffect(() => {
         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 = requestAnimationFrame(() => {
+            raf.current = rAF(() => {
                 if (raf.current !== 0) {
-                    setMaxHeight(globalThis.innerHeight);
+                    setMaxHeight(win.innerHeight);
                     raf.current = 0;
                 }
             });
         };
-        globalThis.addEventListener('resize', handleResize);
-        setMaxHeight(globalThis.innerHeight);
+        win.addEventListener('resize', handleResize);
+        setMaxHeight(win.innerHeight);
         if (setReady && !maxReadyCalledRef.current) {
             maxReadyCalledRef.current = true;
             setReady();
         }
         return () => {
-            globalThis.removeEventListener('resize', handleResize);
-            cancelAnimationFrame(raf.current);
+            win.removeEventListener('resize', handleResize);
+            cAF(raf.current);
         };
-    }, [setReady, globalThis]);
+    }, [setReady, win]);
     return maxHeight;
 }
 function usePreservedHeight(currentHeight) {
@@ -331,6 +338,8 @@ function defaultInitialSnap({ snapPoints, lastSnap: _lastSnap, }) {
 }
 function useDrawerGestures(options) {
     const { anchor, open, onClose, snapPoints: getSnapPoints = defaultSnapPoints, initialSnap: getInitialSnap = defaultInitialSnap, contentRef, headerRef, footerRef, headerEnabled, footerEnabled, } = options;
+    const { externalWindow } = useWindowContext();
+    const gestureWindow = externalWindow;
     const { ready, registerReady } = useReady();
     const heightRef = useRef(0);
     const lastSnapRef = useRef(null);
@@ -515,9 +524,13 @@ function useDrawerGestures(options) {
         return memo;
     });
     const isVertical = anchor === 'top' || anchor === 'bottom';
-    const bind = useDrag(handleDrag, {
+    const gestureConfig = useMemo(() => ({
         filterTaps: true,
-    });
+        ...(gestureWindow && {
+            window: gestureWindow,
+        }),
+    }), [gestureWindow]);
+    const bind = useDrag(handleDrag, gestureConfig);
     const heightStyle = useTransform(heightMotionValue, (y) => {
         const clamped = Math.max(0, Math.min(y, maxHeight));
         return `${Math.round(clamped)}px`;

package/Tab.js

@@ -21,7 +21,7 @@ import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 import './chunks/PopperPaper.js';
 
-var Tab$1 = {"sui-tab-container":"sui-tab-container","sui-tab-pill-badge":"sui-tab-pill-badge","sui-tab-badge-root":"sui-tab-badge-root","sui-tab-root":"sui-tab-root","sui-selected":"sui-selected","sui-focus-visible":"sui-focus-visible","sui-tab-badge":"sui-tab-badge","sui-active":"sui-active","sui-tab-label":"sui-tab-label","sui-tab-label-container":"sui-tab-label-container","sui-tab-label-text":"sui-tab-label-text","sui-tab-label-badge-root":"sui-tab-label-badge-root","sui-tab-icon":"sui-tab-icon","sui-tab-icon-container":"sui-tab-icon-container","sui-tab-icon-pill":"sui-tab-icon-pill","sui-tab-icon-badge-root":"sui-tab-icon-badge-root","sui-tab-large":"sui-tab-large","sui-tab-pill":"sui-tab-pill","sui-tab-pill-small":"sui-tab-pill-small","sui-tab-label-pill-cobranding":"sui-tab-label-pill-cobranding","sui-tab-icon-pill-cobranding":"sui-tab-icon-pill-cobranding","sui-compact":"sui-compact"};
+var Tab$1 = {"sui-tab-container":"sui-tab-container","sui-tab-pill-badge":"sui-tab-pill-badge","sui-tab-badge-root":"sui-tab-badge-root","sui-tab-root":"sui-tab-root","sui-selected":"sui-selected","sui-focus-visible":"sui-focus-visible","sui-tab-badge":"sui-tab-badge","sui-tab-label":"sui-tab-label","sui-tab-label-container":"sui-tab-label-container","sui-tab-label-text":"sui-tab-label-text","sui-tab-label-badge-root":"sui-tab-label-badge-root","sui-tab-icon":"sui-tab-icon","sui-tab-icon-container":"sui-tab-icon-container","sui-tab-icon-pill":"sui-tab-icon-pill","sui-tab-icon-badge-root":"sui-tab-icon-badge-root","sui-tab-large":"sui-tab-large","sui-tab-pill":"sui-tab-pill","sui-tab-pill-small":"sui-tab-pill-small","sui-tab-label-pill-cobranding":"sui-tab-label-pill-cobranding","sui-tab-icon-pill-cobranding":"sui-tab-icon-pill-cobranding","sui-compact":"sui-compact"};
 
 const Tab = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Tab' });

package/TableRow.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useButton } from '@mui/base';
-import { useClasses } from '@ringcentral/spring-base';
+import { useClasses, useButton } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { u as useTablelvl2Context } from './chunks/Tablelvl2Context.js';
 
@@ -21,7 +20,7 @@ const TableRow = forwardRef((inProps, ref) => {
         rootElementName: TableRowRoot,
         rootRef: ref,
     });
-    const rootProps = getRootProps();
+    const rootProps = getRootProps(rest);
     const role = roleProp ?? (TableRowRoot !== defaultComponent ? 'row' : undefined);
     return (jsx(TableRowRoot, { className: cls('root', variant, {
             hoverable,

package/Tabs.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, useState, useMemo, useRef, Children, isValidElement, cloneElement, useEffect, useLayoutEffect, useCallback } from 'react';
 import { useTab, useTabsList, TabsListProvider } from '@mui/base';
-import { useClasses, combineClasses, getTitle, useFontLoaded, useWindowContext, logInDev, usePrevious, useEventCallback, useOnReRender, useForkRef } from '@ringcentral/spring-base';
+import { useClasses, combineClasses, getTitle, combineProps, useFontLoaded, useWindowContext, logInDev, usePrevious, useEventCallback, useOnReRender, useForkRef } from '@ringcentral/spring-base';
 import { OverflowMd, CaretLeftMd, CaretRightMd } from '@ringcentral/spring-icon';
 import { useMode, motionTransition, useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { B as Badge } from './chunks/Badge.js';
@@ -92,12 +92,11 @@ const TabMoreMenu = forwardRef((props, ref) => {
     };
     const handleClose = (event, reason) => {
         setAnchor(null);
-        MenuProps?.onClose?.(event, reason);
     };
     const iconButton = (jsx(IconButton, { color: 'secondary', symbol: OverflowMd, ...iconButtonProps, onClick: (e) => {
             setAnchor((prev) => (prev ? null : e.currentTarget));
         }, "aria-expanded": Boolean(anchor), "aria-label": getTitle(TooltipProps?.title), ...ButtonProps, classes: iconButtonClasses }));
-    return (jsxs(Fragment, { children: [jsxs("div", { className: cls('root'), ref: ref, ...rest, children: [TooltipProps ? (jsx(Tooltip, { ...TooltipProps, children: iconButton })) : (iconButton), Number(BadgeProps?.count) > 0 ? jsx(Badge, { ...badgeProps }) : null] }), jsx(Menu, { open: Boolean(anchor), anchorEl: anchor, onClose: handleClose, children: jsx(MenuList, { children: menuItems.map(({ ref, ...props }, index) => (jsx(TabMenuItem, { ...props, ref: ref, component: MenuItemComponent }, props.value || `TabMenuItem-${index}`))) }) })] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: cls('root'), ref: ref, ...rest, children: [TooltipProps ? (jsx(Tooltip, { ...TooltipProps, children: iconButton })) : (iconButton), Number(BadgeProps?.count) > 0 ? jsx(Badge, { ...badgeProps }) : null] }), jsx(Menu, { open: Boolean(anchor), anchorEl: anchor, ...combineProps({ onClose: handleClose }, MenuProps), children: jsx(MenuList, { children: menuItems.map(({ ref, ...props }, index) => (jsx(TabMenuItem, { ...props, ref: ref, component: MenuItemComponent }, props.value || `TabMenuItem-${index}`))) }) })] }));
 });
 TabMoreMenu.displayName = 'SuiTabMoreMenu';
 

package/VirtualizedList.js

@@ -1,6 +1,6 @@
 import { createContext, useContext, forwardRef, isValidElement, useRef, useState, useImperativeHandle, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
-import { useForkRef, useEventCallback, useWindowContext, logInDev } from '@ringcentral/spring-base';
+import { useForkRef, useWindowContext, useVirtuosoExternalWindow, useEventCallback, logInDev } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { Virtuoso } from 'react-virtuoso';
 import { L as List } from './chunks/List.js';
@@ -85,6 +85,8 @@ const VirtualizedList = forwardRef((inProps, ref) => {
     const handleVirtuosoRef = useForkRef(virtuosoRef, virtuosoActions);
     const initialFocusItemByIndexPromiseRef = useRef(null);
     const itemRenderedPromiseRef = useRef(null);
+    const { globalThis: contextWindow } = useWindowContext();
+    const externalWindowProps = useVirtuosoExternalWindow();
     const isItemRendered = (index) => {
         const { startIndex, endIndex } = listRangeRef.current;
         return index <= endIndex && index >= startIndex;
@@ -94,7 +96,7 @@ const VirtualizedList = forwardRef((inProps, ref) => {
             new Promise((resolve) => {
                 initialFocusItemByIndexPromiseRef.current = resolve;
             }).then(() => {
-                requestAnimationFrame(() => focusByIndexAction(index));
+                contextWindow.requestAnimationFrame(() => focusByIndexAction(index));
             });
         }
         else {
@@ -235,14 +237,7 @@ const VirtualizedList = forwardRef((inProps, ref) => {
         itemContentRenderer: children,
         computeItemKey: computeItemKey,
     };
-    const { externalWindow } = useWindowContext();
-    const externalProps = externalWindow &&
-        externalWindow !== (window || globalThis.window)
-        ? {
-            externalWindow,
-        }
-        : undefined;
-    return (jsx(Virtuoso, { className: "sui-virtualized-list", ...externalProps, ref: handleVirtuosoRef, increaseViewportBy: 200, ...(computeItemKey ? { computeItemKey } : undefined), ...rest, context: { ...context, ...virtuosoContext }, components: { ...VirtuosoComponents, ...components }, totalCount: totalCount, data: data, rangeChanged: (range) => {
+    return (jsx(Virtuoso, { className: "sui-virtualized-list", ...externalWindowProps, ref: handleVirtuosoRef, increaseViewportBy: 200, ...(computeItemKey ? { computeItemKey } : undefined), ...rest, context: { ...context, ...virtuosoContext }, components: { ...VirtuosoComponents, ...components }, totalCount: totalCount, data: data, rangeChanged: (range) => {
             listRangeRef.current = range;
             const itemRenderedPromise = itemRenderedPromiseRef.current;
             if (itemRenderedPromise) {

package/VirtualizedMenu.js

@@ -23,6 +23,6 @@ import './chunks/List.js';
 import './chunks/useListNavigation.js';
 import 'tabbable';
 
-var VirtualizedMenu = {"sui-virtualized-menu-paper":"sui-virtualized-menu-paper","sui-virtualized-menu-paper-content-container":"sui-virtualized-menu-paper-content-container"};
+var VirtualizedMenu = {"sui-virtualized-menu-paper":"sui-virtualized-menu-paper","sui-virtualized-menu-paper-content-container":"sui-virtualized-menu-paper-content-container","sui-virtualized-menu-list":"sui-virtualized-menu-list"};
 
 export { VirtualizedMenu as virtualizedMenuStyle };

package/chunks/Menu.js

@@ -30,8 +30,9 @@ const Menu = forwardRef((inProps, ref) => {
         onClose?.(undefined, 'Other');
     });
     const menuContextValue = useMemo(() => {
-        return { close: closeHandler, autoFocus };
-    }, [autoFocus, closeHandler]);
+        const effectiveAutoFocus = open ? autoFocus : false;
+        return { close: closeHandler, autoFocus: effectiveAutoFocus };
+    }, [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 }) }) }) }));

package/chunks/MenuList.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo, useRef, useEffect } from 'react';
+import { forwardRef, useMemo, useRef, useLayoutEffect } from 'react';
 import { useClasses, useForkRef, useWindowContext } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { L as List } from './List.js';
@@ -29,12 +29,12 @@ const MenuList = forwardRef((inProps, ref) => {
     const listRef = useRef(null);
     const handleListRef = useForkRef(listRef, ref);
     const { document } = useWindowContext();
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (autoFocus &&
             !listRef.current?.contains(document?.activeElement ?? null)) {
             actions.current?.focus();
         }
-    }, []);
+    }, [autoFocus]);
     const listRole = widget === 'select' ? 'listbox' : 'menu';
     const listboxProps = widget === 'select'
         ? { 'aria-multiselectable': selectMode === 'multiple' }

package/chunks/Modal.js

@@ -31,7 +31,7 @@ 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'), onKeyDown: (e) => {
+    return (jsx(ModalContext.Provider, { value: { ariaHideEnabled }, children: jsxs(motion.div, { ...rest, ...motionProps, role: "presentation", className: cls('root', { 'non-blocking': !blocking }), onKeyDown: (e) => {
                 onKeyDown?.(e);
                 if (!disableEscapeKeyDown &&
                     e.key === 'Escape' &&

package/chunks/VirtualizedMenu.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useEffect, forwardRef, useState, useMemo } from 'react';
+import { createContext, useContext, useRef, useLayoutEffect, forwardRef, useState, useMemo, useEffect } from 'react';
 import { useForkRef, combineProps, useClasses, useEventCallback } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import clsx from 'clsx';
@@ -14,7 +14,11 @@ const VirtualizedMenuList = (props) => {
     const actions = useRef(null);
     const handleListActions = useForkRef(actions, actionsProp);
     const listRef = useRef(null);
-    useEffect(() => {
+    const virtualizedMenuContext = useVirtualizedMenuContext();
+    useLayoutEffect(() => {
+        if (!virtualizedMenuContext?.open) {
+            return;
+        }
         const initialFocus = typeof initialFocusProps === 'function'
             ? initialFocusProps()
             : initialFocusProps;
@@ -24,20 +28,21 @@ const VirtualizedMenuList = (props) => {
         else if (typeof initialFocus === 'number') {
             actions.current?.focusByIndex(initialFocus);
         }
-    }, []);
+    }, [virtualizedMenuContext?.open]);
     return (jsx(VirtualizedList, { actions: handleListActions, ...rest, ListProps: combineProps({
             role: 'menu',
         }, rest.ListProps), ref: listRef, totalListHeightChanged: totalListHeightChangedProp, children: children }));
 };
 
+const MENU_VERTICAL_PADDING = 8;
 const VirtualizedMenu = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'VirtualizedMenu' });
     const { classes, className, children, open, onClose, data, totalCount, isItemDisabled, VirtualizedListProps, popperActions: popperActionsProp, initialFocus = true, maxHeight, PopperProps, ...rest } = props;
     const popperPaperContentRef = useRef(null);
     const paperContentContainerRef = useRef(null);
-    const waitForListHeightComputeCallsCount = useRef(0);
+    const hasItemsRenderedRef = useRef(false);
     const [waitForHeightCompute, setWaitForHeightCompute] = useState(true);
-    const [menuHeight, setMenuHeight] = useState(0);
+    const [menuHeight, setMenuHeight] = useState(MENU_VERTICAL_PADDING * 2);
     const [deferPendingVirtualizedListActions, setDeferPendingVirtualizedListActions,] = useState(true);
     const computedListHeight = useRef(-1);
     const availableHeight = useRef(-1);
@@ -75,13 +80,14 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
         }
     });
     const handleTotalListHeightChanged = useEventCallback((listHeight) => {
-        if (waitForListHeightComputeCallsCount.current < 2) {
-            waitForListHeightComputeCallsCount.current += 1;
+        if (!hasItemsRenderedRef.current) {
             return;
         }
-        computedListHeight.current = listHeight;
+        const adjustedHeight = listHeight + MENU_VERTICAL_PADDING * 2
+            ;
+        computedListHeight.current = adjustedHeight;
         if (paperContentContainerRef.current) {
-            paperContentContainerRef.current.style.height = `${listHeight}px`;
+            paperContentContainerRef.current.style.height = `${adjustedHeight}px`;
         }
         updateMenuHeight();
         popperActions.current?.update();
@@ -95,7 +101,7 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
         }
     });
     const handleAvailableHeightChange = useEventCallback((value) => {
-        if (computedListHeight.current === -1) {
+        if (computedListHeight.current === -1 || !hasItemsRenderedRef.current) {
             return;
         }
         availableHeight.current = value;
@@ -104,13 +110,20 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
     });
     useEffect(() => {
         if (!open) {
-            waitForListHeightComputeCallsCount.current = 0;
-            computedListHeight.current = -1;
-            availableHeight.current = -1;
+            hasItemsRenderedRef.current = false;
         }
         if (open) {
-            setWaitForHeightCompute(true);
-            setDeferPendingVirtualizedListActions(true);
+            if (computedListHeight.current !== -1) {
+                updateMenuHeight();
+                setWaitForHeightCompute(false);
+                setDeferPendingVirtualizedListActions(false);
+                popperActions.current?.update();
+            }
+            else {
+                setMenuHeight(MENU_VERTICAL_PADDING * 2);
+                setWaitForHeightCompute(true);
+                setDeferPendingVirtualizedListActions(true);
+            }
             if (popperPaperContentRef.current) {
                 popperPaperContentRef.current.style.maxHeight = 'none';
             }
@@ -119,11 +132,23 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
     return (jsx(Popover, { bordered: true, PopperProps: { ...PopperProps, padding: popperPadding }, ...rest, open: open, className: clsx(cls('root'), waitForHeightCompute && 'opacity-0'), PopperPaperProps: {
             contentRef: popperPaperContentRef,
         }, onClose: onClose, onAvailableHeightChange: handleAvailableHeightChange, ref: ref, motionProps: { variants: undefined }, actions: handlePopperActions, children: jsx("div", { className: cls('paper'), children: jsx("div", { ref: paperContentContainerRef, className: cls('paper-content-container'), children: jsx(VirtualizedMenuContext.Provider, { value: menuContextValue, children: jsx(VirtualizedMenuList, { data: data, totalCount: totalCount, isReady: !deferPendingVirtualizedListActions, isItemDisabled: isItemDisabled, initialFocus: initialFocus, style: { height: menuHeight }, ...combineProps(VirtualizedListProps, {
-                            components: {
-                                Header: VirtualizedListVerticalPadding,
-                                Footer: VirtualizedListVerticalPadding,
-                            },
+                            ListProps: combineProps(VirtualizedListProps?.ListProps, {
+                                className: cls('list'),
+                                style: {
+                                    ['--sui-virtualized-menu-vertical-padding']: `${MENU_VERTICAL_PADDING}px`,
+                                },
+                            }),
                             totalListHeightChanged: handleTotalListHeightChanged,
+                            itemsRendered: (items) => {
+                                if (totalCount === 0 ||
+                                    (totalCount === undefined &&
+                                        data !== undefined &&
+                                        data.length === 0) ||
+                                    (items && items.length > 0)) {
+                                    hasItemsRenderedRef.current = true;
+                                }
+                                VirtualizedListProps?.itemsRendered?.(items);
+                            },
                             onKeyDown: (e) => {
                                 if (e.key === 'Tab') {
                                     e.preventDefault();
@@ -132,9 +157,6 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
                             },
                         }), children: children }) }) }) }) }));
 });
-function VirtualizedListVerticalPadding() {
-    return jsx("div", { className: "h-2" });
-}
 VirtualizedMenu.displayName = 'SuiVirtualizedMenu';
 
 export { VirtualizedMenuContext as V, VirtualizedMenu as a, VirtualizedMenuList as b, useVirtualizedMenuContext as u };