@ringcentral/spring-ui 1.11.1 → 1.12.0

package/chunks/Badge.js

@@ -20,7 +20,7 @@ const Badge = (inProps) => {
             : count
         : undefined;
     const toOrigin = useMemo(() => kebabCase(anchorOrigin), [anchorOrigin]);
-    const overlapMode = children || forceOverlap;
+    const overlapMode = Boolean(children || forceOverlap);
     return (jsxs("span", { className: cls('root', {
             absolute: !children && forceOverlap,
         }), ...rest, children: [children, jsx(AnimatePresence, { initial: false, children: invisible ||

package/chunks/Drawer.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { motion } from 'framer-motion';
-import { useClasses } from '@ringcentral/spring-base';
+import { useClasses, useForkRef } from '@ringcentral/spring-base';
 import { useThemeProps, motionTransition } from '@ringcentral/spring-theme';
 import clsx from 'clsx';
 import './Icon.js';
@@ -23,9 +23,10 @@ const Drawer = forwardRef((inProps, ref) => {
         toggleOnTransition: motionTransition['neutral-01-fast'],
         toggleOffTransition: motionTransition['neutral-01-fast'],
     });
+    const handleBodyRef = useForkRef(ref, bodyProps?.ref);
     return (jsx(Modal, { open: open, onClose: onClose, blocking: blocking, className: clsx(cls('root', `anchor-${anchor}`, {
             'non-blocking': !blocking,
-        })), ...rest, children: jsxs(motion.div, { role: "dialog", "aria-modal": blocking, ...slideInProps, ...bodyProps, ref: ref, className: clsx(cls('body', `body-${anchor}`), bodyProps?.className), tabIndex: blocking ? -1 : undefined, children: [header && (jsx("div", { ref: headerRef, ...headerProps, className: clsx(cls('header'), headerProps?.className), children: header })), jsx("div", { ref: contentRef, className: cls('content'), children: children }), footer && (jsx("div", { ref: footerRef, className: cls('footer'), children: footer }))] }) }));
+        })), ...rest, children: jsxs(motion.div, { role: "dialog", "aria-modal": blocking, ...slideInProps, ...bodyProps, ref: handleBodyRef, className: clsx(cls('body', `body-${anchor}`), bodyProps?.className), tabIndex: bodyProps?.tabIndex ?? (blocking ? -1 : undefined), children: [header && (jsx("div", { ref: headerRef, ...headerProps, className: clsx(cls('header'), headerProps?.className), children: header })), jsx("div", { ref: contentRef, className: cls('content'), children: children }), footer && (jsx("div", { ref: footerRef, className: cls('footer'), children: footer }))] }) }));
 });
 Drawer.displayName = 'SuiDrawer';
 

package/chunks/MenuItemText.js

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

package/chunks/MenuList.js

@@ -5,6 +5,7 @@ import { useThemeProps } from '@ringcentral/spring-theme';
 import { L as List } from './List.js';
 import { u as useMenuContext } from './Menu.js';
 import { c as useMenuItemSelect, e as MenuListContext, a as MenuItemSelectContext } from './useMenuItemSelect.js';
+import '@mui/utils';
 import 'tabbable';
 import './useListNavigation.js';
 import '../VirtualizedList.js';
@@ -13,7 +14,7 @@ const MenuList = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'MenuList' });
     const { classes, className, children, widget, selectMode = 'single', nowrap, value: valueProp, onChange, autoFocus: autoFocusProp, ...rest } = props;
     const menuContext = useMenuContext();
-    const autoFocus = Boolean(autoFocusProp || menuContext?.autoFocus);
+    const autoFocus = Boolean(autoFocusProp ?? menuContext?.autoFocus);
     const cls = useClasses('menu-list', classes, className);
     const menuListContextValue = useMemo(() => ({
         nowrap,

package/chunks/Modal.js

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

package/chunks/Popover.js

@@ -19,15 +19,23 @@ const Popover = forwardRef((inProps, ref) => {
     const handlePaperContentRef = useForkRef(popperPaperPropsProp?.contentRef, paperContentRef);
     const prefersReducedMotion = usePrefersReducedMotion();
     return (jsx(Modal, { ...rest, className: cls('root', 'popper'), ref: ref, motionProps: null, hideBackdrop: true, children: jsx(Popper, { arrowHeight: variant === 'standard' ? 0 : 10, arrowPadding: 12, offset: variant === 'standard' ? 2 : 4, ...combineProps({
+                tether: false,
                 middlewares: [
                     size({
                         padding: PopperProps?.padding,
-                        apply({ availableHeight, availableWidth, }) {
+                        apply({ availableHeight, availableWidth, elements, }) {
                             onAvailableHeightChange?.(availableHeight);
-                            if (paperContentRef.current) {
-                                paperContentRef.current.style.maxHeight = `${availableHeight}px`;
-                                paperContentRef.current.style.maxWidth = `${availableWidth}px`;
+                            const content = paperContentRef.current;
+                            if (!content) {
+                                return;
                             }
+                            const decorationHeight = elements.floating.offsetHeight - content.offsetHeight;
+                            const decorationWidth = elements.floating.offsetWidth - content.offsetWidth;
+                            const maxHeight = Math.max(0, availableHeight - decorationHeight);
+                            content.style.maxWidth = `${Math.max(0, availableWidth - decorationWidth)}px`;
+                            content.style.maxHeight = '';
+                            content.style.maxHeight =
+                                maxHeight < content.scrollHeight ? `${maxHeight}px` : '';
                         },
                     }),
                 ],
@@ -45,7 +53,7 @@ const Popover = forwardRef((inProps, ref) => {
                         }),
                     };
                 }
-                return (jsx(PopperPaper, { contentRef: handlePaperContentRef, arrowRef: arrowRef, arrowStyle: arrowStyle, ...combineProps(combineProps(motionProps, popperPaperProps), popperPaperPropsProp), children: children }));
+                return (jsx(PopperPaper, { arrowRef: arrowRef, arrowStyle: arrowStyle, ...combineProps(combineProps(motionProps, popperPaperProps), popperPaperPropsProp), contentRef: handlePaperContentRef, children: children }));
             } }) }));
 });
 Popover.displayName = 'SuiPopover';

package/chunks/Select.js

@@ -7,6 +7,8 @@ import 'framer-motion';
 import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
 import { g as getGrow } from './getGrow.js';
 import './Icon.js';
+import { h as hasContent } from './hasContent.js';
+import '@mui/utils';
 import { u as useHelperTextId, F as FormField } from './useHelperTextId.js';
 import { M as Menu, a as MenuContext } from './Menu.js';
 import { c as useMenuItemSelect, a as MenuItemSelectContext } from './useMenuItemSelect.js';
@@ -148,37 +150,40 @@ const Select = forwardRef((inProps, ref) => {
         close: handleClose,
         autoFocus: true,
     }), [handleClose]);
-    const selectorProps = getButtonProps(selectorPropsProp);
+    const selectorProps = getButtonProps(combineProps({
+        onMouseDown: (event) => {
+            if (disabled || event.button !== 0)
+                return;
+            event.preventDefault();
+            event.currentTarget.focus();
+        },
+    }, selectorPropsProp));
     const selectedValue = value !== null || displayEmpty ? renderValue(value) : null;
     const valueId = `${id}-value`;
     const labelId = `${id}-label`;
     let menu = null;
+    const baseMenuClasses = { paper: cls('menu') };
+    const basePopperProps = { offset: 4, matchAnchorWidth: true };
+    const popperProps = combineProps(basePopperProps, !virtualize
+        ? MenuProps?.PopperProps
+        : virtualizedMenuPropsProp?.PopperProps);
+    const menuClasses = popperProps.matchAnchorWidth
+        ? combineClasses(baseMenuClasses, { paper: 'min-w-0' })
+        : baseMenuClasses;
+    const onExitComplete = () => {
+        setDidMenuExit(true);
+    };
     const baseMenuProps = {
-        onExitComplete: () => {
-            setDidMenuExit(true);
-        },
+        onExitComplete,
         placement: DEFAULT_PLACEMENT,
         open,
         anchorEl,
-        PopperProps: {
-            offset: 4,
-            matchAnchorWidth: true,
-        },
-        classes: {
-            paper: cls('menu'),
-        },
+        PopperProps: basePopperProps,
+        classes: menuClasses,
         onClose: handleClose,
     };
-    const popperProps = combineProps(baseMenuProps.PopperProps, !virtualize
-        ? MenuProps?.PopperProps
-        : virtualizedMenuPropsProp?.PopperProps);
-    if (popperProps.matchAnchorWidth) {
-        baseMenuProps.classes = combineClasses(baseMenuProps.classes, {
-            paper: 'min-w-0',
-        });
-    }
     if (!virtualize) {
-        menu = (jsx(Menu, { ...baseMenuProps, ...MenuProps, PopperProps: popperProps, classes: combineClasses(baseMenuProps.classes, MenuProps?.classes), motionProps: getYAxisGrowMotion({
+        menu = (jsx(Menu, { ...baseMenuProps, ...MenuProps, PopperProps: popperProps, classes: combineClasses(menuClasses, MenuProps?.classes), motionProps: getYAxisGrowMotion({
                 placement: MenuProps?.placement,
                 prefersReducedMotion: prefersReducedMotion,
             }), children: jsx(MenuList, { value: value, onChange: handleMenuListChange, nowrap: false, widget: "select", selectMode: selectMode, ...getListboxProps(), children: children }) }));
@@ -198,7 +203,7 @@ const Select = forwardRef((inProps, ref) => {
                     content: cls('content'),
                 }, size: size, ...rest, children: [jsxs("button", { className: cls('selector', `${variant}-selector`, `${variant}-selector-${size}`, {
                             expanded: open,
-                        }), type: 'button', disabled: disabled, "aria-labelledby": label ? `${labelId} ${valueId}` : valueId, "aria-describedby": helperTextId, ...selectorProps, id: id, children: [selectedValue ? (jsx("span", { id: valueId, "aria-live": "polite", className: cls('value'), title: getTitle(selectedValue), children: selectedValue })) : (jsx("span", { id: valueId, className: cls('placeholder'), title: getTitle(placeholder), children: placeholder })), jsx(Squircle, { className: cls('chevron'), interactive: false, children: jsx(ExpandCollapseCaret, { size: 'small', expanded: open }) })] }), jsx("input", { ref: inputRef, name: name, value: `${value}`, disabled: disabled, className: cls('native-input'), tabIndex: -1, "aria-hidden": true, "aria-invalid": error, onChange: handleInputChange, ...inputProps })] }), anchorEl && menu] }));
+                        }), disabled: disabled, "aria-labelledby": label ? `${labelId} ${valueId}` : valueId, "aria-describedby": helperTextId, ...selectorProps, id: id, type: "button", children: [hasContent(selectedValue) ? (jsx("span", { id: valueId, "aria-live": "polite", className: cls('value'), title: getTitle(selectedValue), children: selectedValue })) : (jsx("span", { id: valueId, className: cls('placeholder'), title: getTitle(placeholder), children: placeholder })), jsx(Squircle, { className: cls('chevron'), interactive: false, children: jsx(ExpandCollapseCaret, { size: 'small', expanded: open }) })] }), jsx("input", { ref: inputRef, name: name, value: `${value}`, disabled: disabled, className: cls('native-input'), tabIndex: -1, "aria-hidden": true, "aria-invalid": error, onChange: handleInputChange, ...inputProps })] }), anchorEl && menu] }));
 });
 Select.displayName = 'SuiSelect';
 function getYAxisGrowMotion(params) {

package/chunks/SlideIn.js

@@ -5,7 +5,7 @@ import '@ringcentral/spring-theme';
 import { g as getSlideIn } from './getSlideIn.js';
 
 const SlideIn = (props) => {
-    const { toggle, toggleOnTransition, toggleOffTransition, children, from = 'right', ...rest } = props;
+    const { toggle, toggleOnTransition, toggleOffTransition, transition, children, from = 'right', ...rest } = props;
     const prefersReducedMotion = usePrefersReducedMotion();
     return (jsx(motion.div, { ...getSlideIn({
             toggle,
@@ -13,6 +13,7 @@ const SlideIn = (props) => {
             prefersReducedMotion,
             toggleOnTransition,
             toggleOffTransition,
+            transition,
         }), ...rest, children: children }));
 };
 

package/chunks/Squircle.js

@@ -16,11 +16,11 @@ const Squircle = forwardRef((inProps, ref) => {
     const clipId = useId('sui-squircle-clip', true);
     const showFocusRing = interactive && focusVisible;
     const Root = component;
-    return (jsxs(Root, { className: cls('root', { active, interactive }), ...rest, ref: ref, children: [jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0", viewBox: "0 0 1 1", children: jsx("defs", { children: jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: jsx("path", { d: SQUIRCLE_PATH }) }) }) }), !fillShape && (jsx("svg", { className: cls('content'), xmlns: "http://www.w3.org/2000/svg", viewBox: '0 0 1 1', children: jsx("path", { clipPath: `url(#${clipId})`, d: SQUIRCLE_PATH, vectorEffect: "non-scaling-stroke" }) })), showFocusRing && (jsx("svg", { className: cls('ring'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1 1", overflow: "visible", children: jsx("path", { d: SQUIRCLE_PATH, fillOpacity: 0, vectorEffect: "non-scaling-stroke" }) })), fillShape
+    return (jsxs(Root, { className: cls('root', { active, interactive }), ...rest, ref: ref, children: [jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0", viewBox: "0 0 1 1", style: { position: 'absolute' }, "aria-hidden": true, children: jsx("defs", { children: jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: jsx("path", { d: SQUIRCLE_PATH }) }) }) }), !fillShape && (jsx("svg", { className: cls('content'), xmlns: "http://www.w3.org/2000/svg", viewBox: '0 0 1 1', children: jsx("path", { clipPath: `url(#${clipId})`, d: SQUIRCLE_PATH, vectorEffect: "non-scaling-stroke" }) })), showFocusRing && (jsx("svg", { className: cls('ring'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1 1", overflow: "visible", children: jsx("path", { d: SQUIRCLE_PATH, fillOpacity: 0, vectorEffect: "non-scaling-stroke" }) })), fillShape
                 ? cloneElement(firstChild, {
                     style: {
                         ...firstChild.props.style,
-                        with: '100%',
+                        width: '100%',
                         height: '100%',
                         clipPath: `url(#${clipId})`,
                     },

package/chunks/VirtualizedMenu.js

@@ -3,6 +3,7 @@ import { createContext, useContext, useRef, useLayoutEffect, forwardRef, useStat
 import { useForkRef, combineProps, useClasses, useEventCallback } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import clsx from 'clsx';
+import { u as useAnimationFrame } from './useAnimationFrame.js';
 import { P as Popover } from './Popover.js';
 import { VirtualizedList } from '../VirtualizedList.js';
 
@@ -37,7 +38,7 @@ const VirtualizedMenuList = (props) => {
 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 { classes, className, children, open, onClose, data, totalCount, isItemDisabled, actions, VirtualizedListProps, popperActions: popperActionsProp, initialFocus = true, maxHeight, PopperProps, ...rest } = props;
     const popperPaperContentRef = useRef(null);
     const paperContentContainerRef = useRef(null);
     const hasItemsRenderedRef = useRef(false);
@@ -58,6 +59,7 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
         : (padding ?? 16);
     const popperActions = useRef(null);
     const handlePopperActions = useForkRef(popperActions, popperActionsProp);
+    const { requestAnimationFrame } = useAnimationFrame();
     const menuContextValue = useMemo(() => {
         return { open };
     }, [open]);
@@ -72,9 +74,6 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
         setMenuHeight(computedMenuHeight);
     });
     const updatePopoverHeight = useEventCallback(() => {
-        if (!popperPaperContentRef.current)
-            return;
-        popperPaperContentRef.current.style.maxHeight = `${availableHeight.current}px`;
         if (paperContentContainerRef.current) {
             paperContentContainerRef.current.style.height = `auto`;
         }
@@ -131,7 +130,8 @@ const VirtualizedMenu = forwardRef((inProps, ref) => {
     }, [open]);
     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, {
+        }, 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, actions: actions, ...combineProps(VirtualizedListProps, {
+                            style: { height: menuHeight },
                             ListProps: combineProps(VirtualizedListProps?.ListProps, {
                                 className: cls('list'),
                                 style: {

package/chunks/composeEventHandlers.js

@@ -0,0 +1,10 @@
+const composeEventHandlers = (externalEventHandler, internalEventHandler, options = {}) => (event, ...args) => {
+    const { checkForDefaultPrevented = true } = options;
+    externalEventHandler?.(event, ...args);
+    if (checkForDefaultPrevented && event.defaultPrevented) {
+        return;
+    }
+    internalEventHandler?.(event, ...args);
+};
+
+export { composeEventHandlers as c };

package/chunks/getSlideIn.js

@@ -2,7 +2,7 @@ import { motionTransition } from '@ringcentral/spring-theme';
 
 const horizontal = ['right', 'left'];
 const plus = ['right', 'bottom'];
-const getSlideIn = ({ toggle = true, from = 'right', prefersReducedMotion = false, toggleOnTransition, toggleOffTransition, } = {}) => {
+const getSlideIn = ({ toggle = true, from = 'right', prefersReducedMotion = false, toggleOnTransition, toggleOffTransition, transition, } = {}) => {
     const axis = horizontal.includes(from) ? 'x' : 'y';
     const invisibleValue = plus.includes(from) ? '100%' : '-100%';
     return {
@@ -23,7 +23,7 @@ const getSlideIn = ({ toggle = true, from = 'right', prefersReducedMotion = fals
         },
         transition: prefersReducedMotion
             ? motionTransition.instant
-            : motionTransition['spring-01-fast'],
+            : (transition ?? motionTransition['spring-01-fast']),
     };
 };
 

package/chunks/hasContent.js

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

package/chunks/useAnimationFrame.js

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

package/chunks/useFocusTrapStack.js

@@ -14,7 +14,9 @@ const useFocusTrapStack = ({ open, }) => {
     useEffect(() => {
         if (open) {
             const stack = getFocusTrapStack(globalThis);
-            stack.push(id);
+            if (stack.indexOf(id) < 0) {
+                stack.push(id);
+            }
         }
         return () => {
             const stack = getFocusTrapStack(globalThis);

package/chunks/useHelperTextId.js

@@ -3,17 +3,19 @@ import { forwardRef } from 'react';
 import clsx from 'clsx';
 import { useClasses } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
+import { h as hasContent } from './hasContent.js';
+import '@mui/utils';
 
 const FormField = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'FormField' });
     const { classes, className, children, htmlFor, label, labelProps, helperText, required, disabled, error, variant = 'standard', size = 'xlarge', contentRef, contentProps, focused, FormHelperTextProps, ...rest } = props;
     const cls = useClasses('form-field', classes, className);
-    return (jsxs("div", { ...rest, ref: ref, className: cls('root', variant, { disabled, error, focused }), "aria-disabled": disabled, children: [label && (jsxs("label", { htmlFor: htmlFor, ...labelProps, className: clsx(cls('label', `${variant}-label`, error && 'error-label'), labelProps?.className), children: [label, required ? ' *' : ''] })), jsxs("div", { className: cls('container', error && 'error-container'), children: [jsx("div", { className: cls('content', size, `${size}-content`, `${variant}-${size}`, `${variant}-content`, error && 'error-content', error && `error-${variant}-content`), ref: contentRef, ...contentProps, children: children }), jsx("div", { className: cls('focus-effect', `${variant}-focus-effect`, error && 'error-focus-effect') })] }), helperText && (jsx("div", { ...FormHelperTextProps, className: clsx(cls('helper-text', error && 'error-helper-text'), FormHelperTextProps?.className), children: helperText }))] }));
+    return (jsxs("div", { ...rest, ref: ref, className: cls('root', variant, { disabled, error, focused }), "aria-disabled": disabled, children: [hasContent(label) && (jsxs("label", { htmlFor: htmlFor, ...labelProps, className: clsx(cls('label', `${variant}-label`, error && 'error-label'), labelProps?.className), children: [label, required ? ' *' : ''] })), jsxs("div", { className: cls('container', error && 'error-container'), children: [jsx("div", { className: cls('content', size, `${size}-content`, `${variant}-${size}`, `${variant}-content`, error && 'error-content', error && `error-${variant}-content`), ref: contentRef, ...contentProps, children: children }), jsx("div", { className: cls('focus-effect', `${variant}-focus-effect`, error && 'error-focus-effect') })] }), hasContent(helperText) && (jsx("div", { ...FormHelperTextProps, className: clsx(cls('helper-text', error && 'error-helper-text'), FormHelperTextProps?.className), children: helperText }))] }));
 });
 FormField.displayName = 'SuiFormField';
 
 const useHelperTextId = ({ helperText, id, FormHelperTextProps, }) => {
-    if (!helperText) {
+    if (!hasContent(helperText)) {
         return undefined;
     }
     return FormHelperTextProps?.id || `${id}-helper-text`;