@ringcentral/spring-ui 1.8.0 → 1.9.1

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/Avatar.js

@@ -32,7 +32,7 @@ const StatusIndicatorSizeMap = {
 };
 const Avatar = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Avatar' });
-    const { component, classes, className, children: childrenProp, imgProps, alt, src, srcSet, size: sizeProp, color = 'default', variant = 'circle', clickable: clickableProp, symbol, avatarShapeRef, showStatusIndicator, IndicatorProps, rootProps, disabled, ...rest } = props;
+    const { component, classes, className, children: childrenProp, imgProps, alt, src, srcSet, size: sizeProp, color = 'default', variant = 'circle', clickable: clickableProp, symbol, avatarShapeRef, showStatusIndicator, IndicatorProps, rootProps, disabled, onClick, ...rest } = props;
     let children = null;
     const loaded = useImgLoaded({
         ...imgProps,
@@ -73,7 +73,7 @@ const Avatar = forwardRef((inProps, ref) => {
     }
     const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(props);
     const avatarRef = useForkRef(avatarShapeRef, focusVisibleRef);
-    const clickable = clickableProp !== false && rest.onClick ? true : clickableProp ?? false;
+    const clickable = clickableProp !== false && onClick ? true : clickableProp ?? false;
     const interactive = clickable && !disabled;
     const supportsStatusIndicator = size !== 'xxsmall' && size !== 'xsmall';
     let AvatarShape = component ?? 'div';
@@ -106,13 +106,22 @@ const Avatar = forwardRef((inProps, ref) => {
             tabIndex: -1,
         }
         : {};
+    const rootClickHandler = onClick;
+    const handleClick = (event) => {
+        if (disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        rootClickHandler?.(event);
+    };
     return (jsx(Overlap, { position: {
             bottom: '-1px',
             right: '-1px',
         }, floater: supportsStatusIndicator && showStatusIndicator ? (jsx(StatusIndicator, { size: StatusIndicatorSizeMap[size], ...IndicatorProps })) : undefined, className: clsx(className, groupClassName), classes: {
             root: cls('root', size, { disabled }),
             floater: cls('indicator', interactive && 'clickable-indicator'),
-        }, ...rootProps, ref: ref, children: jsxs(AvatarShape, { className: cls('shape', variant, color, { clickable }, interactive && 'clickable-shape', interactive && `clickable-${variant}`), ...focusVisibleHandlers, ...shapeProps, ...ariaProps, ...nonInteractiveShapeProps, ...rest, ref: avatarRef, children: [jsx("div", { className: cls('content', `${variant}-content`, `${size}-content`, `${variant}-${color}`), children: children }), variant === 'circle' && (jsx("div", { className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) })), variant === 'squircle' && interactive && (jsx(Squircle, { interactive: false, className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) }))] }) }));
+        }, ...rootProps, ref: ref, children: jsxs(AvatarShape, { className: cls('shape', variant, color, { clickable }, interactive && 'clickable-shape', interactive && `clickable-${variant}`), ...focusVisibleHandlers, ...shapeProps, ...ariaProps, ...nonInteractiveShapeProps, ...rest, onClick: onClick ? handleClick : undefined, ref: avatarRef, children: [jsx("div", { className: cls('content', `${variant}-content`, `${size}-content`, `${variant}-${color}`), children: children }), variant === 'circle' && (jsx("div", { className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) })), variant === 'squircle' && interactive && (jsx(Squircle, { interactive: false, className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) }))] }) }));
 });
 Avatar.displayName = 'SuiAvatar';
 

package/CircularProgressIndicator.js

@@ -1,6 +1,7 @@
 export { C as CircularProgressIndicator } from './chunks/CircularProgressIndicator.js';
 import 'react/jsx-runtime';
 import 'react';
+import 'clsx';
 import 'framer-motion';
 import '@ringcentral/spring-base';
 import '@ringcentral/spring-theme';

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/LinearProgressIndicator.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import clsx from 'clsx';
 import { useClasses, useId } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 
@@ -14,13 +15,14 @@ const LinearProgressIndicator = forwardRef((inProps, ref) => {
     const cls = useClasses('linear-progress-indicator', classes, className);
     const labelId = useId();
     const progressBarProps = progressBarPropsProp || {};
+    const progressBarLabelledBy = progressBarProps['aria-labelledby'];
     if (max === undefined || value === undefined)
         return null;
-    const labelledBy = progressBarProps['aria-labelledby'] || labelId;
     progressBarProps['aria-valuenow'] = value;
     let labelNode = label;
     if (typeof props.label === 'string') {
-        labelNode = (jsx("span", { id: labelledBy, className: cls('label', `${variant}-label`), children: props.label }));
+        labelNode = (jsx("span", { id: progressBarLabelledBy || labelId, className: cls('label', `${variant}-label`), children: props.label }));
+        progressBarProps['aria-labelledby'] = progressBarLabelledBy || labelId;
     }
     let detailsNode = details;
     if (typeof details === 'string') {
@@ -30,12 +32,11 @@ const LinearProgressIndicator = forwardRef((inProps, ref) => {
         progressBarProps['aria-valuemin'] = min;
     if (max !== 100)
         progressBarProps['aria-valuemax'] = max;
-    if (labelNode)
-        progressBarProps['aria-labelledby'] = labelledBy;
     const percentage = Math.round((100 / max) * value);
+    const { className: progressBarClassName, ...restProgressBarProps } = progressBarProps;
     return (jsxs("span", { className: cls('root', variant, {
             slim,
-        }), ...rest, ref: ref, children: [labelNode, jsx("span", { className: cls('track', `${variant}-track`, slim && `${variant}-track-slim`), role: "progressbar", ...progressBarProps, children: jsx("span", { className: cls('bar', `${variant}-bar`), style: {
+        }), ...rest, ref: ref, children: [labelNode, jsx("span", { className: clsx(cls('track', `${variant}-track`, slim && `${variant}-track-slim`), progressBarClassName), role: "progressbar", ...restProgressBarProps, children: jsx("span", { className: cls('bar', `${variant}-bar`), style: {
                         width: `${percentage}%`,
                     } }) }), (!!detailsNode || showPercentage) && (jsxs("span", { className: cls('details-container', `${variant}-details-container`), children: [detailsNode, showPercentage && (jsxs("span", { className: cls('details-label', `${variant}-details-label`), children: [percentage, "%"] }))] }))] }));
 });

package/Link.js

@@ -7,9 +7,9 @@ var Link$1 = {"sui-link-root":"sui-link-root","sui-focus-visible":"sui-focus-vis
 
 const Link = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Link' });
-    const { classes, component: Component = 'a', className, underline = 'hover', children, variant = 'primary', ...rest } = props;
+    const { classes, component: Component = 'a', className, underline = 'hover', children, variant = 'primary', onBlur, onFocus, onFocusVisible, ...rest } = props;
     const cls = useClasses('link', classes, className);
-    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(props);
+    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible({ onFocusVisible, onFocus, onBlur });
     const linkRef = useForkRef(ref, focusVisibleRef);
     return (jsx(Component, { className: cls('root', variant, underline, { focusVisible }), ...rest, ...focusVisibleHandlers, ref: linkRef, children: children }));
 });

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/Radio.js

@@ -10,14 +10,17 @@ var Radio$1 = {"sui-radio-root":"sui-radio-root","sui-focus-visible":"sui-focus-
 
 const Radio = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Radio' });
-    const { name = '', classes, inputRef, rootProps, inputProps, className: rootClass, ...rest } = props;
+    const { name = '', classes, inputRef, rootProps, inputProps, disabled: disabledProp, className: rootClass, ...rest } = props;
     const cls = useClasses('radio', classes, rootClass);
     const { disabled, id, value } = useFormLabel({
         value: rest.value,
         id: inputProps?.id,
-        disabled: rest.disabled,
+        disabled: disabledProp,
+    });
+    const { focusVisible, getInputProps, checked } = useSwitch({
+        ...rest,
+        disabled,
     });
-    const { focusVisible, getInputProps, checked } = useSwitch(rest);
     const { onChange, ...inputRest } = getInputProps({
         role: undefined,
         ...inputProps,

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/Switch.js

@@ -9,7 +9,7 @@ var Switch$1 = {"sui-switch-root":"sui-switch-root","sui-focus-visible":"sui-foc
 
 const Switch = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Switch' });
-    const { classes, className, inputRef: inputRefProp, inputProps: inputPropsProp, checked: checkedProp, defaultChecked, disabled: disabledProp, autoFocus = false, onBlur, onChange, onFocus, onFocusVisible, required, ...rest } = props;
+    const { classes, className, inputRef: inputRefProp, inputProps: inputPropsProp, rootProps, checked: checkedProp, defaultChecked, disabled: disabledProp, autoFocus = false, onBlur, onChange, onFocus, onFocusVisible, required, ...rest } = props;
     const cls = useClasses('switch', classes, className);
     const { disabled, id } = useFormLabel({
         disabled: disabledProp,
@@ -33,7 +33,7 @@ const Switch = forwardRef((inProps, ref) => {
             inputRef.current?.focus();
         }
     }, []);
-    return (jsxs("span", { className: cls('root', { focusVisible }), ...rest, ref: ref, children: [jsx("input", { ...inputProps, id: id, className: cls('input', { checked }), ref: forkRef }), jsx("span", { className: cls('track') }), jsx("span", { className: cls('dot') })] }));
+    return (jsxs("span", { ...rootProps, ...rest, className: cls('root', { focusVisible }), ref: ref, children: [jsx("input", { ...inputProps, id: id, className: cls('input', { checked }), ref: forkRef }), jsx("span", { className: cls('track') }), jsx("span", { className: cls('dot') })] }));
 });
 Switch.displayName = 'SuiSwitch';
 

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/Tooltip.js

@@ -18,6 +18,6 @@ import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 import './chunks/PopperPaper.js';
 
-var TooltipView = {"sui-tooltip-view-root":"sui-tooltip-view-root","sui-tooltip-view-disable-interactions":"sui-tooltip-view-disable-interactions","sui-tooltip-trigger-wrapper":"sui-tooltip-trigger-wrapper","sui-tooltip-view-paper":"sui-tooltip-view-paper","sui-tooltip-view-paper-content":"sui-tooltip-view-paper-content","sui-tooltip-view-paper-content-medium":"sui-tooltip-view-paper-content-medium","sui-tooltip-view-icon":"sui-tooltip-view-icon","sui-tooltip-view-content":"sui-tooltip-view-content","sui-tooltip-view-content-medium":"sui-tooltip-view-content-medium","sui-tooltip-view-neutral":"sui-tooltip-view-neutral","sui-tooltip-view-success":"sui-tooltip-view-success","sui-tooltip-view-danger":"sui-tooltip-view-danger","sui-tooltip-view-inverted":"sui-tooltip-view-inverted","sui-tooltip-view-force-hide":"sui-tooltip-view-force-hide"};
+var TooltipView = {"sui-tooltip-view-root":"sui-tooltip-view-root","sui-tooltip-view-disable-interactions":"sui-tooltip-view-disable-interactions","sui-tooltip-trigger-wrapper":"sui-tooltip-trigger-wrapper","sui-tooltip-view-paper":"sui-tooltip-view-paper","sui-tooltip-view-paper-content":"sui-tooltip-view-paper-content","sui-tooltip-view-paper-content-medium":"sui-tooltip-view-paper-content-medium","sui-tooltip-view-icon":"sui-tooltip-view-icon","sui-tooltip-view-content":"sui-tooltip-view-content","sui-tooltip-view-neutral":"sui-tooltip-view-neutral","sui-tooltip-view-success":"sui-tooltip-view-success","sui-tooltip-view-danger":"sui-tooltip-view-danger","sui-tooltip-view-inverted":"sui-tooltip-view-inverted","sui-tooltip-view-force-hide":"sui-tooltip-view-force-hide"};
 
 export { TooltipView as tooltipViewStyle };

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/Button.js

@@ -81,7 +81,7 @@ const Button = withTooltip(forwardRef((inProps, ref) => {
             disabled: disabledProp,
             focusVisible,
             loading,
-        }), title: title, ...rest, ...getRootProps(), "aria-disabled": disableInteractions, children: [startSlot, isTextContent ? (jsx("span", { className: cls('content'), children: children })) : (children), endSlot] }));
+        }), title: title, ...rest, ...getRootProps(), children: [startSlot, isTextContent ? (jsx("span", { className: cls('content'), children: children })) : (children), endSlot] }));
 }));
 Button.displayName = 'SuiButton';