@ringcentral/spring-ui 1.11.1 → 1.12.0

package/Popper.js

@@ -3,7 +3,7 @@ import { flip, shift, limitShift, arrow, offset, size, useFloating, autoUpdate }
 import { useWindowContext, useForkRef } from '@ringcentral/spring-base';
 import { useThemeProps, useTheme } from '@ringcentral/spring-theme';
 import { forwardRef, useRef, useImperativeHandle, useLayoutEffect } from 'react';
-import { u as useModalContext } from './chunks/Modal.js';
+import { u as useModalContext, b as useOverlayBranch } from './chunks/Modal.js';
 import { Portal } from '@mui/base';
 import 'framer-motion';
 import './chunks/Icon.js';
@@ -20,17 +20,22 @@ const getArrowSide = (placement) => ({
 })[placement.split('-')[0]];
 const Popper = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Popper' });
-    const { children: childrenProp, middlewares: middlewaresProp = [], placement: placementProp, anchorEl, arrowHeight = 0, offset: offset$1 = 0, padding = 0, arrowPadding = 0, style, actions, autoUpdate: autoUpdate$1 = true, whileElementsMounted, matchAnchorWidth, container: containerProp, disablePortal, ...rest } = props;
+    const { children: childrenProp, middlewares: middlewaresProp = [], placement: placementProp, anchorEl, arrowHeight = 0, offset: offset$1 = 0, padding = 0, arrowPadding = 0, style, actions, autoUpdate: autoUpdate$1 = true, whileElementsMounted, matchAnchorWidth, tether = true, container: containerProp, disablePortal, ...rest } = props;
     const { externalWindow, document } = useWindowContext();
     const container = containerProp ?? document?.body;
     const { scopeProps } = useTheme();
     const modalContext = useModalContext();
+    const overlayBranchRegistry = modalContext?.overlayBranchRegistry;
     const finalDisablePortal = disablePortal ?? (modalContext?.ariaHideEnabled ? true : false);
+    const overlayBranchRef = useOverlayBranch({
+        active: !finalDisablePortal,
+        registry: overlayBranchRegistry,
+    });
     const arrowRef = useRef(null);
     const presetMiddlewares = [
         flip({ padding }),
         shift({
-            limiter: limitShift(),
+            ...(tether ? { limiter: limitShift() } : { crossAxis: true }),
             padding,
         }),
         arrow({
@@ -43,6 +48,7 @@ const Popper = forwardRef((inProps, ref) => {
         presetMiddlewares.push(size({
             apply({ rects, elements, }) {
                 Object.assign(elements.floating.style, {
+                    boxSizing: 'border-box',
                     width: `${rects.reference.width}px`,
                 });
             },
@@ -60,15 +66,7 @@ const Popper = forwardRef((inProps, ref) => {
                 if (autoUpdate$1 === false) {
                     return;
                 }
-                if (autoUpdate$1 === true) {
-                    return autoUpdate(reference, floating, update, {
-                        ancestorResize: true,
-                        ancestorScroll: true,
-                        animationFrame: false,
-                        elementResize: Boolean(matchAnchorWidth),
-                    });
-                }
-                return autoUpdate(reference, floating, update, autoUpdate$1);
+                return autoUpdate(reference, floating, update, autoUpdate$1 === true ? undefined : autoUpdate$1);
             })();
             return () => {
                 disposeAutoUpdate?.();
@@ -79,22 +77,25 @@ const Popper = forwardRef((inProps, ref) => {
     useImperativeHandle(actions, () => ({ update }), [update]);
     const handleRootRef = useForkRef(ref, setFloating);
     useLayoutEffect(() => {
-        if (anchorEl) {
-            const anchor = typeof anchorEl === 'function' ? anchorEl() : anchorEl;
-            setReference(anchor);
-        }
-        else {
+        if (!anchorEl) {
             setReference(null);
+            return undefined;
         }
+        const anchor = typeof anchorEl === 'function' ? anchorEl() : anchorEl;
+        setReference(anchor);
+        return () => {
+            setReference(null);
+        };
     }, [setReference, anchorEl]);
     const arrowSide = getArrowSide(placement);
-    const children = (() => {
+    const renderChildren = () => {
         if (typeof childrenProp !== 'function')
             return childrenProp;
-        if (!arrowHeight)
-            childrenProp({ placement, arrowRef, arrowStyle: {} });
+        if (!arrowHeight) {
+            return childrenProp({ placement, arrowRef, arrowStyle: {} });
+        }
         const squareSideLength = Math.round(((arrowHeight * 2) ** 2 / 2) ** (1 / 2));
-        return childrenProp({
+        const childrenRenderProps = {
             placement,
             arrowRef,
             arrowStyle: {
@@ -104,12 +105,14 @@ const Popper = forwardRef((inProps, ref) => {
                 left: arrowX,
                 [arrowSide]: -squareSideLength / 2,
             },
-        });
-    })();
+        };
+        return childrenProp(childrenRenderProps);
+    };
+    const children = renderChildren();
     const dpr = externalWindow?.devicePixelRatio ?? 1;
     const fixedX = Math.round(Number(x ?? 0) * dpr) / dpr;
     const fixedY = Math.round(Number(y ?? 0) * dpr) / dpr;
-    return (jsx(Portal, { container: container, disablePortal: finalDisablePortal, children: jsx("div", { ...scopeProps, style: { display: 'contents' }, children: jsx("div", { ...rest, "data-sui-popper-placement": placement, ref: handleRootRef, style: {
+    return (jsx(Portal, { container: container, disablePortal: finalDisablePortal, children: jsx("div", { ref: overlayBranchRef, ...scopeProps, style: { display: 'contents' }, children: jsx("div", { ...rest, "data-sui-popper-placement": placement, ref: handleRootRef, style: {
                     ...(arrowHeight
                         ? { minWidth: (arrowHeight + arrowPadding) * 2 }
                         : undefined),
@@ -118,7 +121,7 @@ const Popper = forwardRef((inProps, ref) => {
                     top: '0',
                     left: '0',
                     transform: `translate3d(${fixedX}px,${fixedY}px,0)`,
-                    width: 'max-content',
+                    ...(matchAnchorWidth ? undefined : { width: 'max-content' }),
                 }, children: children }) }) }));
 });
 Popper.displayName = 'SuiPopper';

package/Rating.js

@@ -18,8 +18,8 @@ function roundValueToPrecision(value, precision) {
     const nearest = Math.round(value / precision) * precision;
     return Number(nearest.toFixed(getDecimalPrecision(precision)));
 }
-const defaultIcon = jsx(Icon, { symbol: StarFilledMd, size: "large" });
-const defaultEmptyIcon = jsx(Icon, { symbol: StarMd, size: "large" });
+const defaultIcon = (jsx(Icon, { symbol: StarFilledMd, size: "large" }));
+const defaultEmptyIcon = (jsx(Icon, { symbol: StarMd, size: "large" }));
 function defaultLabelText(value) {
     return `${value || '0'} Star${value !== 1 ? 's' : ''}`;
 }

package/Select.js

@@ -9,6 +9,8 @@ import './chunks/Icon.js';
 import './chunks/useMotionSafeTransition.js';
 import './chunks/usePrefersReducedMotion.js';
 import './chunks/getGrow.js';
+import './chunks/hasContent.js';
+import '@mui/utils';
 import './chunks/useHelperTextId.js';
 import 'clsx';
 import './chunks/Menu.js';
@@ -24,12 +26,14 @@ 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';
 import './chunks/List.js';
 import './chunks/useListNavigation.js';
 import 'tabbable';
+import './chunks/composeEventHandlers.js';
 import './ListNavigation.js';
 import './chunks/MenuList.js';
 import './chunks/Squircle.js';

package/SingleFilter.js

@@ -9,6 +9,7 @@ import './chunks/Icon.js';
 import { I as IconButton } from './chunks/IconButtonLabel.js';
 import { M as Menu } from './chunks/Menu.js';
 import { M as MenuItem } from './chunks/useMenuItemSelect.js';
+import '@mui/utils';
 import 'tabbable';
 import './chunks/useListNavigation.js';
 import './VirtualizedList.js';
@@ -31,10 +32,13 @@ 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 './chunks/composeEventHandlers.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/Slider.js

@@ -82,12 +82,13 @@ const InnerSlider = (inProps, ref) => {
     });
     const cls = useClasses('slider', classes, className);
     const hasMarks = marks.length > 0;
+    const hasMarkLabels = marks.some((mark) => Boolean(mark.label));
     const isEmpty = values.every((value) => value === min);
     const transition = useMotionSafeTransition(dragging ? motionTransition['instant'] : motionTransition['haste-01-fast']);
     return (jsxs("span", { className: cls('root', color, orientation, {
             disabled,
             empty: isEmpty,
-            'has-marks': hasMarks,
+            'has-marks': hasMarkLabels,
             'show-color-at-rest': showColorAtRest,
         }), "aria-disabled": disabled, ...rest, ...getRootProps({
             onMouseDown,
@@ -96,7 +97,7 @@ const InnerSlider = (inProps, ref) => {
                 }), initial: false, animate: {
                     ...axisProps[axis].offset(trackOffset),
                     ...axisProps[axis].leap(trackLeap),
-                }, transition: transition }), values.map((value, index) => (jsx(SliderThumb, { value: value, index: index, min: min, max: max, axis: axis, axisProps: axisProps, focusVisible: focusedThumbIndex === index, dragging: dragging, valueLabelDisplay: valueLabelDisplay, valueLabelFormat: valueLabelFormat, valueLabelTooltipProps: valueLabelTooltipProps, orientation: orientation, scale: scale, classes: classes, transition: transition, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, getThumbProps: getThumbProps, getAriaValueText: getAriaValueText, getHiddenInputProps: getHiddenInputProps }, `value-${index}`))), hasMarks && (jsx("span", { className: cls('marks', `marks-${orientation}`), children: marks.map((mark, index) => {
+                }, transition: transition }), values.map((value, index) => (jsx(SliderThumb, { value: value, index: index, min: min, max: max, axis: axis, axisProps: axisProps, focusVisible: focusedThumbIndex === index, dragging: dragging, valueLabelDisplay: valueLabelDisplay, valueLabelFormat: valueLabelFormat, valueLabelTooltipProps: valueLabelTooltipProps, orientation: orientation, scale: scale, classes: classes, transition: transition, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuetext": ariaValuetext, getThumbProps: getThumbProps, getAriaValueText: getAriaValueText, getHiddenInputProps: getHiddenInputProps }, `value-${index}`))), hasMarks && (jsx("span", { className: cls('marks', `marks-${orientation}`), children: marks.map((mark, index) => {
                     return (jsxs("span", { "data-index": index, className: cls('mark-container', `mark-container-${orientation}`), style: axisProps[axis].offset(valueToPercent(mark.value, min, max)), children: [jsx("span", { className: cls('mark', `mark-${orientation}`) }), mark.label &&
                                 (typeof mark.label === 'string' ? (jsx("span", { className: cls('mark-label'), children: mark.label })) : (mark.label))] }, `${mark.value}`));
                 }) }))] }));

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';
@@ -18,16 +19,16 @@ const SortableVirtualizedList = forwardRef((inProps, ref) => {
     const { children, data, ...rest } = props;
     const { active } = useDndContext();
     const keepInvisibleItems = useMemo(() => {
-        return active
-            ? [
-                data.findIndex((value) => {
-                    if (typeof value === 'object') {
-                        return value.id === active.id;
-                    }
-                    return value === active.id;
-                }),
-            ]
-            : undefined;
+        if (!active) {
+            return undefined;
+        }
+        const activeIndex = data.findIndex((value) => {
+            if (typeof value === 'object') {
+                return value.id === active.id;
+            }
+            return value === active.id;
+        });
+        return activeIndex === -1 ? undefined : [activeIndex];
     }, [active, data]);
     return (jsx(SortableContext, { items: data, children: jsx(VirtualizedList, { ...rest, data: data, keepInvisibleItems: keepInvisibleItems, computeItemKey: (_, item) => typeof item === 'object' ? item.id : item, ref: ref, children: (index, data) => children(data, index) }) }));
 });

package/SplitButton.js

@@ -33,11 +33,15 @@ import './chunks/getGrow.js';
 import './chunks/List.js';
 import './chunks/useListNavigation.js';
 import 'tabbable';
+import '@mui/utils';
 import './VirtualizedList.js';
 import 'react-virtuoso';
+import './chunks/useAnimationFrame.js';
 import '@ringcentral/spring-icon';
 import './chunks/useNestedMenuItem.js';
+import './chunks/composeEventHandlers.js';
 import './ListNavigation.js';
+import './chunks/hasContent.js';
 import './chunks/useHelperTextId.js';
 import './chunks/VirtualizedMenu.js';
 

package/Squircle.js

@@ -4,6 +4,6 @@ import 'react';
 import '@ringcentral/spring-base';
 import '@ringcentral/spring-theme';
 
-var squircle = {"sui-squircle-root":"sui-squircle-root","sui-squircle-interactive":"sui-squircle-interactive","sui-active":"sui-active","sui-squircle-content":"sui-squircle-content","sui-squircle-ring":"sui-squircle-ring"};
+var Squircle = {"sui-squircle-root":"sui-squircle-root","sui-squircle-interactive":"sui-squircle-interactive","sui-active":"sui-active","sui-squircle-content":"sui-squircle-content","sui-squircle-ring":"sui-squircle-ring"};
 
-export { squircle as squircleStyle };
+export { Squircle as squircleStyle };

package/StepContent.js

@@ -19,7 +19,7 @@ const StepContent = forwardRef((inProps, ref) => {
     const transition = useMotionSafeTransition(motionTransition['haste-01-fast']);
     if (process.env.NODE_ENV !== 'production' && orientation !== 'vertical') {
         logInDev({
-            scope: 'AvatarGroup',
+            scope: 'StepContent',
             level: 'error',
             message: '<StepContent /> is only designed for use with the vertical stepper.',
         });

package/SubMenu.js

@@ -7,6 +7,7 @@ import { CaretRightMd } from '@ringcentral/spring-icon';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { I as Icon } from './chunks/Icon.js';
 import { S as SubMenuTriggerNestedIdContext, M as MenuItem } from './chunks/useMenuItemSelect.js';
+import '@mui/utils';
 import 'tabbable';
 import './chunks/useListNavigation.js';
 import { b as useMenuOverlayGroupContext } from './chunks/Menu.js';
@@ -22,12 +23,15 @@ import './chunks/usePrefersReducedMotion.js';
 import './chunks/getFade.js';
 import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
+import './chunks/useAnimationFrame.js';
+import './chunks/composeEventHandlers.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/TableCell.js

@@ -49,7 +49,7 @@ const TableCell = forwardRef((inProps, ref) => {
     if (sorted)
         ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
     if (sortable) {
-        sortIcon = (jsx(SortableArrow, { direction: sortIconDirection, size: "small", className: clsx(cls('sort-icon', sorted && 'sort-icon-sorted', showSortIndicator && 'sort-indicator'), SortIconProps?.className), ...SortIconProps }));
+        sortIcon = (jsx(SortableArrow, { direction: sortIconDirection, size: "small", ...SortIconProps, className: clsx(cls('sort-icon', sorted && 'sort-icon-sorted', showSortIndicator && 'sort-indicator'), SortIconProps?.className) }));
     }
     const ContentElement = sortable ? 'button' : 'div';
     const sortableProps = sortable

package/TablePagination.js

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

package/Tabs.js

@@ -8,6 +8,7 @@ import { B as Badge } from './chunks/Badge.js';
 import { I as IconButton } from './chunks/IconButtonLabel.js';
 import { M as Menu } from './chunks/Menu.js';
 import { M as MenuItem } from './chunks/useMenuItemSelect.js';
+import '@mui/utils';
 import 'tabbable';
 import './chunks/useListNavigation.js';
 import './VirtualizedList.js';
@@ -36,10 +37,13 @@ import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 import './Popper.js';
 import './chunks/PopperPaper.js';
+import './chunks/useAnimationFrame.js';
 import './chunks/useNestedMenuItem.js';
+import './chunks/composeEventHandlers.js';
 import './ListNavigation.js';
 import 'react-virtuoso';
 import './chunks/List.js';
+import './chunks/hasContent.js';
 import 'clsx';
 
 const TabMenuItem = forwardRef((props, ref) => {
@@ -188,9 +192,11 @@ function useComputedTabs(props) {
     }, [children, tabsInstanceId]);
     const [visibleTabs, setVisibleTabs] = useState(processedChildren);
     const visibleTabsChildren = useMemo(() => {
-        return Array.from(visibleTabs.entries()).map(([childValue, { child }]) => {
-            return { ...child, props: { ...child.props, value: childValue } };
-        });
+        return Array.from(visibleTabs.entries()).map(([childValue, { child }]) => ({
+            ...child,
+            key: child.key ?? childValue,
+            props: { ...child.props, value: childValue },
+        }));
     }, [visibleTabs]);
     const prevChildren = usePrevious(() => children);
     const cacheTabsChildren = useEventCallback(() => {
@@ -570,7 +576,7 @@ var Tabs$1 = {"sui-tabs-root":"sui-tabs-root","sui-tabs-large":"sui-tabs-large",
 const DEFAULT_PILL_GAP = 4;
 const Tabs = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Tabs' });
-    const { classes, className, children, onBlur, onFocus, variant = 'standard', onGroupInfoUpdate, MoreMenuProps, pill, pillGap: pillGapProp = DEFAULT_PILL_GAP, color = 'default', size = 'medium', ScrollButtonStartProps, ScrollButtonEndProps, enableScrollButtons = true, ...rest } = props;
+    const { classes, className, children, variant = 'standard', onGroupInfoUpdate, MoreMenuProps, pill, pillGap: pillGapProp = DEFAULT_PILL_GAP, color = 'default', size = 'medium', ScrollButtonStartProps, ScrollButtonEndProps, enableScrollButtons = true, ...rest } = props;
     const pillGap = pill ? pillGapProp : 0;
     const tabsRef = useRef(null);
     const scrollerRef = useRef(null);
@@ -717,7 +723,7 @@ const Tabs = forwardRef((inProps, ref) => {
                     'scroll-left': !!scrollButtonStart,
                     'scroll-right': !!scrollButtonEnd,
                     'scroll-both': !!(scrollButtonStart && scrollButtonEnd),
-                }, size), ...rest, ...getRootProps(), children: [scrollButtonStart, jsx("div", { className: cls('scroller'), ref: scrollerRef, children: jsxs("div", { className: cls('tab-list'), ref: tabListRef, children: [visibleTabsChildren, showMore && (jsx(TabMoreMenu, { menuItems: moreMenuItems, ...MoreMenuProps, ref: tabMoreMenuRef })), jsx("div", { className: cls('underline') }), !pill && (jsx(motion.div, { style: {
+                }, size), ...getRootProps(rest), children: [scrollButtonStart, jsx("div", { className: cls('scroller'), ref: scrollerRef, children: jsxs("div", { className: cls('tab-list'), ref: tabListRef, children: [visibleTabsChildren, showMore && (jsx(TabMoreMenu, { menuItems: moreMenuItems, ...MoreMenuProps, ref: tabMoreMenuRef })), jsx("div", { className: cls('underline') }), !pill && (jsx(motion.div, { style: {
                                         left: floatingUnderlineLeftMotionValue,
                                         width: floatingUnderlineWidthMotionValue,
                                         opacity: floatingUnderlineOpacityMotionValue,

package/TextField.js

@@ -12,6 +12,8 @@ import './chunks/useMotionSafeTransition.js';
 import './chunks/usePrefersReducedMotion.js';
 import './chunks/useHelperTextId.js';
 import 'clsx';
+import './chunks/hasContent.js';
+import '@mui/utils';
 import './chunks/IconButtonLabel.js';
 import './chunks/Squircle.js';
 import './chunks/withTooltip.js';

package/Textarea.js

@@ -12,6 +12,8 @@ import './chunks/useMotionSafeTransition.js';
 import './chunks/usePrefersReducedMotion.js';
 import './chunks/useHelperTextId.js';
 import 'clsx';
+import './chunks/hasContent.js';
+import '@mui/utils';
 import './chunks/IconButtonLabel.js';
 import './chunks/Squircle.js';
 import './chunks/withTooltip.js';

package/TimePicker.js

@@ -23,6 +23,8 @@ import './chunks/PopperPaper.js';
 import './chunks/Popover.js';
 import './chunks/getGrow.js';
 import './chunks/useHelperTextId.js';
+import './chunks/hasContent.js';
+import '@mui/utils';
 import './chunks/TextField.js';
 import './chunks/ShowHideEye.js';
 import './chunks/useMotionSafeTransition.js';
@@ -40,7 +42,7 @@ const TimeButton = forwardRef((props, ref) => {
             selected,
             disabled,
             focusVisible,
-        })), ...rest, ...combineProps({ onBlur, onFocus }, focusVisibleHandlers), children: children }));
+        })), ...rest, ...combineProps({ onBlur, onFocus }, focusVisibleHandlers), type: "button", children: children }));
 });
 TimeButton.displayName = 'SuiTimeButton';
 

package/TrayMenu.js

@@ -5,6 +5,7 @@ import { M as Menu } from './chunks/Menu.js';
 import { T as Tray, d as useTrayNavigate } from './chunks/useTrayNavigate.js';
 import '@ringcentral/spring-base';
 import { M as MenuItem } from './chunks/useMenuItemSelect.js';
+import '@mui/utils';
 import 'tabbable';
 import './chunks/useListNavigation.js';
 import './VirtualizedList.js';
@@ -24,7 +25,9 @@ import './Popper.js';
 import './chunks/PopperPaper.js';
 import './chunks/useMotionSafeTransition.js';
 import '@ringcentral/spring-icon';
+import './chunks/useAnimationFrame.js';
 import './chunks/useNestedMenuItem.js';
+import './chunks/composeEventHandlers.js';
 import './ListNavigation.js';
 import 'react-virtuoso';
 import './chunks/List.js';

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';
@@ -10,6 +11,7 @@ import 'tabbable';
 const VirtualizedItemPropsContext = createContext(null);
 const useVirtualizedItemPropsContext = () => useContext(VirtualizedItemPropsContext);
 
+const DATA_ITEM_INDEX_ATTR = 'data-item-index';
 const VirtuosoList = forwardRef((props, ref) => {
     const { children: childrenProp, context, style, ...rest } = props;
     const { searchAndFocusItemHandler, isScrolling, ListProps, listActions, listRef, itemContentRenderer, data, keepInvisibleItems, computeItemKey, } = context;
@@ -20,12 +22,12 @@ const VirtuosoList = forwardRef((props, ref) => {
     if (keepInvisibleItems && computeItemKey && Array.isArray(childrenProp)) {
         const firstChild = childrenProp[0];
         if (firstChild && isValidElement(firstChild)) {
-            const index = Number(firstChild.props?.['data-item-index']);
+            const index = Number(firstChild.props[DATA_ITEM_INDEX_ATTR]);
             rangeStart = Number.isNaN(index) ? null : index;
         }
         const lastChild = childrenProp.at(-1);
         if (lastChild && isValidElement(lastChild)) {
-            const index = Number(lastChild.props?.['data-item-index']);
+            const index = Number(lastChild.props[DATA_ITEM_INDEX_ATTR]);
             rangeEnd = Number.isNaN(index) ? null : index;
         }
         children = [
@@ -85,7 +87,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 +98,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/Alert.js

@@ -15,7 +15,7 @@ const DEFAULT_ICON_MAP = {
 };
 const Alert = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Alert' });
-    const { action, classes, className, component: AlertRoot = 'div', closeText = 'close', children, icon: iconProp, startSlot, onClose, severity = 'info', CloseButtonProps, ...rest } = props;
+    const { action, classes, className, component: AlertRoot = 'div', closeText = 'close', children, icon: iconProp, startSlot, onClose, severity = 'info', CloseButtonProps, contentProps, ...rest } = props;
     const cls = useClassesWithMode('alert', classes, className);
     const { mode } = useMode();
     const iconSize = useMemo(() => (mode === 'compact' ? 'small' : 'medium'), [mode]);
@@ -38,7 +38,7 @@ const Alert = forwardRef((inProps, ref) => {
     if (action) {
         actionSlot = jsx("div", { className: cls('action'), children: action });
     }
-    return (jsxs(AlertRoot, { ...rest, ref: ref, className: cls('root', severity), children: [startSlotContent, jsxs("div", { className: cls('body'), children: [jsx("div", { className: cls('content'), role: "alert", children: children }), actionSlot] }), closeSlot] }));
+    return (jsxs(AlertRoot, { ...rest, ref: ref, className: cls('root', severity), children: [startSlotContent, jsxs("div", { className: cls('body'), children: [jsx("div", { className: cls('content'), role: "alert", ...contentProps, children: children }), actionSlot] }), closeSlot] }));
 });
 const AlertTitle = ({ className, classes, ...rest }) => {
     const cls = useClassesWithMode('alert-title', classes, className);