@ringcentral/spring-ui 1.11.2 → 1.12.0

package/AccordionHeader.js

@@ -2,6 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useClasses, useFocusVisible, useForkRef, getTitle } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
+import { h as hasContent } from './chunks/hasContent.js';
+import '@mui/utils';
 import { u as useAccordionContext } from './chunks/AccordionContext.js';
 import { E as ExpandCollapseCaret } from './chunks/ExpandCollapseCaret.js';
 import 'framer-motion';
@@ -13,7 +15,7 @@ var AccordionHeader$1 = {"sui-accordion-header-root":"sui-accordion-header-root"
 
 const AccordionHeader = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'AccordionHeader' });
-    const { classes, className, children, onClick, secondarySlot, disabled, expandIcon = true, ExpandCollapseCaretProps, ...rest } = props;
+    const { classes, className, children, onClick, secondarySlot, disabled, expandIcon = true, ExpandCollapseCaretProps, id: idProp, 'aria-controls': ariaControlsProp, ...rest } = props;
     const { id, ariaControls, expanded, toggle } = useAccordionContext();
     const handleChange = (event) => {
         if (toggle) {
@@ -26,7 +28,7 @@ const AccordionHeader = forwardRef((inProps, ref) => {
     const cls = useClasses('accordion-header', classes, className);
     const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(props);
     const buttonRef = useForkRef(ref, focusVisibleRef);
-    return (jsxs("button", { className: cls('root', { focusVisible, disabled }), "aria-expanded": expanded, disabled: disabled, ...rest, id: id, "aria-controls": ariaControls, ref: buttonRef, onClick: handleChange, ...focusVisibleHandlers, children: [jsxs("span", { className: cls('content'), children: [jsx("span", { className: cls('primary-text'), title: getTitle(children), children: children }), secondarySlot && (jsx("span", { className: cls('secondary-slot'), children: secondarySlot }))] }), expandIcon && (jsx(ExpandCollapseCaret, { expanded: !!expanded, orientation: 'vertical', ...ExpandCollapseCaretProps }))] }));
+    return (jsxs("button", { className: cls('root', { focusVisible, disabled }), "aria-expanded": expanded, disabled: disabled, ...rest, type: "button", id: id ?? idProp, "aria-controls": ariaControls ?? ariaControlsProp, ref: buttonRef, onClick: handleChange, ...focusVisibleHandlers, children: [jsxs("span", { className: cls('content'), children: [jsx("span", { className: cls('primary-text'), title: getTitle(children), children: children }), hasContent(secondarySlot) && (jsx("span", { className: cls('secondary-slot'), children: secondarySlot }))] }), expandIcon && (jsx(ExpandCollapseCaret, { expanded: !!expanded, orientation: 'vertical', ...ExpandCollapseCaretProps }))] }));
 });
 AccordionHeader.displayName = 'SuiAccordionHeader';
 

package/Animation.js

@@ -29,16 +29,17 @@ const Fade = (props) => {
 };
 
 const Grow = (props) => {
-    const { toggle, toggleOffTransition, toggleOnTransition, children, transformOrigin, direction = 'both', ...rest } = props;
+    const { toggle, toggleOffTransition, toggleOnTransition, children, transformOrigin, direction = 'both', style, ...rest } = props;
     const prefersReducedMotion = usePrefersReducedMotion();
-    return (jsx(motion.div, { ...getGrow({
-            toggle,
-            direction,
-            prefersReducedMotion,
-            toggleOffTransition,
-            toggleOnTransition,
-            transformOrigin,
-        }), ...rest, children: children }));
+    const growProps = getGrow({
+        toggle,
+        direction,
+        prefersReducedMotion,
+        toggleOffTransition,
+        toggleOnTransition,
+        transformOrigin,
+    });
+    return (jsx(motion.div, { ...growProps, ...rest, style: { ...growProps.style, ...style }, children: children }));
 };
 
 var ShowHideEye = {"sui-show-hide-eye-root":"sui-show-hide-eye-root"};

package/Autocomplete.js

@@ -28,6 +28,8 @@ import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 import './chunks/ShowHideEye.js';
 import './chunks/useHelperTextId.js';
+import './chunks/hasContent.js';
+import '@mui/utils';
 
 var SuggestionList$1 = {"sui-suggestion-list-root":"sui-suggestion-list-root","sui-suggestion-list-item":"sui-suggestion-list-item","sui-suggestion-list-readonly":"sui-suggestion-list-readonly","sui-disabled":"sui-disabled","sui-focus-visible":"sui-focus-visible","sui-suggestion-list-selected":"sui-suggestion-list-selected","sui-suggestion-list-highlighted":"sui-suggestion-list-highlighted","sui-suggestion-list-group-title-readonly":"sui-suggestion-list-group-title-readonly","sui-suggestion-list-expand-icon":"sui-suggestion-list-expand-icon","sui-compact":"sui-compact"};
 
@@ -1622,7 +1624,7 @@ const TextInput = forwardRef(({ renderInput, ...rest }, ref) => {
 const Autocomplete = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Autocomplete' });
     const isAutocomplete = props.variant === 'autocomplete';
-    const { inputVariant = 'standard', variant, groupExpanded, onGroupExpanded, groupDefaultExpanded, groupVariant = 'normal', getExpandIconProps, groupBy, value: valueProp, autoHighlight = true, clearBtn = false, toggleButton = false, multiple = false, ClearButtonProps, onClear, ToggleButtonProps, getToggleButtonProps: getToggleButtonPropsProp, inputValue: inputValueProp, onKeyDown: onKeyDownProp, helperText: helperTextProp, options, openOnFocus = true, toggleWithInput = true, getOptionLabel = DEFAULT_GET_OPTION_LABEL, renderInput, label, inputRef: inputRefProp, error, placeholder, showPlaceholderWithTags, freeSolo, keyToTags = DEFAULT_KEY_TO_CHIPS, maxFreeSolo, SuggestionListProps: { virtualize = true, ...SuggestionListProps } = {}, autoSelect, PopperComponent = Popper, PopperProps: { anchorElType = 'root', ...PopperProps } = {}, initialIsOpen, disabled, required: requiredProp, disableCloseOnSelect = multiple, onChange: onChangeProp, onInputChange: onInputChangeProp, onMaxFreeSolo, FormHelperTextProps, action, filterOptions, renderOption, renderTags, getOptionDisabled, renderGroup, renderNoOptions, noOptionsText = 'No matches found', inputProps, debug, disabledItemsHighlightable, open: openProp, addNoOptionItem, onOpen, onClose, focused, classes, className, fullWidth = true, size = 'xlarge', isOptionEqualToValue, ...rest } = props;
+    const { inputVariant = 'standard', variant, groupExpanded, onGroupExpanded, groupDefaultExpanded, groupVariant = 'normal', getExpandIconProps, groupBy, value: valueProp, autoHighlight = true, clearBtn = false, toggleButton = false, multiple = false, ClearButtonProps, onClear, ToggleButtonProps, getToggleButtonProps: getToggleButtonPropsProp, inputValue: inputValueProp, onKeyDown: onKeyDownProp, helperText: helperTextProp, options, openOnFocus = true, toggleWithInput = true, getOptionLabel = DEFAULT_GET_OPTION_LABEL, renderInput, label, inputRef: inputRefProp, error, placeholder, showPlaceholderWithTags, freeSolo, keyToTags = DEFAULT_KEY_TO_CHIPS, maxFreeSolo, SuggestionListProps: { virtualize = true, ...SuggestionListProps } = {}, autoSelect, PopperComponent = Popper, PopperProps: { anchorElType = 'root', children: _popperChildrenIgnored, ...PopperProps } = {}, initialIsOpen, disabled, required: requiredProp, disableCloseOnSelect = multiple, onChange: onChangeProp, onInputChange: onInputChangeProp, onMaxFreeSolo, FormHelperTextProps, action, filterOptions, renderOption, renderTags, getOptionDisabled, renderGroup, renderNoOptions, noOptionsText = 'No matches found', inputProps, debug, disabledItemsHighlightable, open: openProp, addNoOptionItem, onOpen, onClose, focused, classes, className, fullWidth = true, size = 'xlarge', isOptionEqualToValue, ...rest } = props;
     const cls = useClasses('autocomplete', classes, className);
     const innerInputRef = useRef(null);
     const textFieldRef = useRef(null);
@@ -1674,6 +1676,7 @@ const Autocomplete = forwardRef((inProps, ref) => {
         disabledItemsHighlightable,
         onGroupExpanded,
         isOptionEqualToValue,
+        onClear,
     });
     const open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
     const { onBlur, ...InputProps } = getInputProps(inputProps);
@@ -1702,7 +1705,7 @@ const Autocomplete = forwardRef((inProps, ref) => {
                 return (jsx(Chip, { "aria-label": `${itemChipProps.label}, press Backspace to remove`, color: selectedItem.error ? 'error' : undefined, ...itemChipProps }, key));
             });
     })();
-    const endAdornment = (toggleButton || clearBtn) && (jsxs(Fragment, { children: [clearBtn && (selectedItems.length > 0 || inputValue) && (jsx(IconButton, { shape: 'squircle', background: false, color: 'secondary', variant: "contained", size: "small", className: cls('clear'), symbol: Xsm, ...getClearButtonProps(ClearButtonProps) })), toggleButton && (jsx(IconButton, { "aria-hidden": true, tabIndex: -1, shape: 'squircle', color: 'secondary', background: false, variant: "contained", size: "small", className: cls('chevron', error && 'error-chevron', open && `${inputVariant}-expanded-chevron`), children: jsx(ExpandCollapseCaret, { size: 'small', expanded: open }), ...getToggleButtonProps({
+    const endAdornment = (toggleButton || clearBtn) && (jsxs(Fragment, { children: [clearBtn && (selectedItems.length > 0 || inputValue) && (jsx(IconButton, { shape: 'squircle', background: false, color: 'secondary', variant: "contained", size: "small", symbol: Xsm, ...getClearButtonProps(combineProps({ className: cls('clear') }, ClearButtonProps)) })), toggleButton && (jsx(IconButton, { "aria-hidden": true, tabIndex: -1, shape: 'squircle', color: 'secondary', background: false, variant: "contained", size: "small", className: cls('chevron', error && 'error-chevron', open && `${inputVariant}-expanded-chevron`), children: jsx(ExpandCollapseCaret, { size: 'small', expanded: open }), ...getToggleButtonProps({
                     ...ToggleButtonProps,
                     ...getToggleButtonPropsProp?.(open),
                 }) }))] }));

package/BlockHeader.js

@@ -2,6 +2,8 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useClasses } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
+import { h as hasContent } from './chunks/hasContent.js';
+import '@mui/utils';
 import { D as Divider } from './chunks/Divider.js';
 
 var BlockHeader$1 = {"sui-block-header-root":"sui-block-header-root","sui-block-header-title":"sui-block-header-title","sui-block-header-end-slot":"sui-block-header-end-slot","sui-block-header-divider":"sui-block-header-divider"};
@@ -11,7 +13,7 @@ const BlockHeader = forwardRef((inProps, ref) => {
     const { component: BlockHeaderRoot = 'div', classes, className, children, endSlot, divider = false, ...rest } = props;
     const cls = useClasses('block-header', classes, className);
     const title = typeof children === 'string' ? children : undefined;
-    return (jsxs(Fragment, { children: [jsxs(BlockHeaderRoot, { className: cls('root'), ...rest, ref: ref, children: [jsx("div", { title: title, className: cls('title'), children: children }), endSlot && jsx("div", { className: cls('end-slot'), children: endSlot })] }), divider && (jsx(Divider, { className: cls('divider'), orientation: "horizontal", flexItem: true }))] }));
+    return (jsxs(Fragment, { children: [jsxs(BlockHeaderRoot, { className: cls('root'), ...rest, ref: ref, children: [jsx("div", { title: title, className: cls('title'), children: children }), hasContent(endSlot) && (jsx("div", { className: cls('end-slot'), children: endSlot }))] }), divider && (jsx(Divider, { className: cls('divider'), orientation: "horizontal", flexItem: true }))] }));
 });
 BlockHeader.displayName = 'SuiBlockHeader';
 

package/DatePicker.js

@@ -30,6 +30,8 @@ import './chunks/Squircle.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/VisuallyHidden.js';
@@ -41,7 +43,7 @@ const HeaderAction = (props) => {
     const { className, disabled, ...rest } = props;
     const cls = useDatePickerClasses();
     const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible();
-    return (jsx("button", { className: clsx(className, cls('header-action', { focusVisible, disabled })), ref: focusVisibleRef, ...rest, ...focusVisibleHandlers }));
+    return (jsx("button", { className: clsx(className, cls('header-action', { focusVisible, disabled })), ref: focusVisibleRef, ...rest, ...focusVisibleHandlers, type: "button" }));
 };
 
 const defaultScreenReaderProps = {
@@ -172,7 +174,7 @@ const Day = forwardRef((props, ref) => {
             disabled,
             today: current,
             focused,
-        }), ...rest, ...combineProps({ onBlur, onFocus }, focusVisibleHandlers), children: children }));
+        }), ...rest, ...combineProps({ onBlur, onFocus }, focusVisibleHandlers), type: "button", children: children }));
 });
 Day.displayName = 'SuiDay';
 
@@ -187,7 +189,7 @@ const Year = forwardRef((props, ref) => {
             selected,
             disabled,
             focusVisible,
-        }), "data-sui-picker-year": value, "aria-label": getYearAriaLabel?.(value, selected), ...rest, ...combineProps({ onBlur, onFocus }, focusVisibleHandlers), children: children }));
+        }), "data-sui-picker-year": value, "aria-label": getYearAriaLabel?.(value, selected), ...rest, ...combineProps({ onBlur, onFocus }, focusVisibleHandlers), type: "button", children: children }));
 });
 Year.displayName = 'SuiYear';
 

package/Dialer.js

@@ -1,7 +1,9 @@
 import { createContext, useContext, cloneElement, useRef, useEffect, forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useMemo } from 'react';
-import { useLongPress, useForkRef, useWindowContext, useId, useClasses, useEventCallback, useAudio, logInDev, useOnlyOneFocusable, useKeyboardMoveFocus, globalStateClasses, getSelectionPosition, setSelectionPosition, useKeyDownOnce, useSleep, combineProps } from '@ringcentral/spring-base';
+import { useLongPress, useForkRef, useWindowContext, useId, useClasses, useEventCallback, useAudio, logInDev, useOnlyOneFocusable, useKeyboardMoveFocus, globalStateClasses, combineProps, getSelectionPosition, setSelectionPosition, useKeyDownOnce, useSleep } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as composeEventHandlers } from './chunks/composeEventHandlers.js';
+import '@mui/utils';
 import { V as VisuallyHidden } from './chunks/VisuallyHidden.js';
 import { I as IconButton } from './chunks/IconButtonLabel.js';
 import { DialButton1Lg, DialButton1Sm, DialButton2Lg, DialButton2Sm, DialButton3Lg, DialButton3Sm, DialButton4Lg, DialButton4Sm, DialButton5Lg, DialButton5Sm, DialButton6Lg, DialButton6Sm, DialButton7Lg, DialButton7Sm, DialButton8Lg, DialButton8Sm, DialButton9Lg, DialButton9Sm, AsteriskMd, DialButton0Lg, DialButton0Sm, HashMd } from '@ringcentral/spring-icon';
@@ -24,6 +26,7 @@ import './chunks/PopperPaper.js';
 import './chunks/ShowHideEye.js';
 import './chunks/useMotionSafeTransition.js';
 import './chunks/useHelperTextId.js';
+import './chunks/hasContent.js';
 
 const DialerContext = createContext({});
 const useDialerContext = () => useContext(DialerContext);
@@ -42,7 +45,7 @@ const DialDelete = (inProps) => {
         onDeleteRef?.current?.(e, reason);
     };
     const { ref, ...events } = useLongPress({ onTap: handleDelete, onPress: handleClear }, children.props, { delay: holdTime, externalWindow: props.externalWindow });
-    const forkEleRef = useForkRef(children.props.ref, ref);
+    const forkEleRef = useForkRef(children.ref, ref);
     return cloneElement(children, {
         ref: forkEleRef,
         ...events,
@@ -156,10 +159,13 @@ const useKeyAudio = ({ sounds, processor }) => {
     };
 };
 
+const MOVE_FOCUSED_ATTR_KEY = 'data-move-focused';
+const DIAL_BUTTON_ATTR_KEY = 'data-dial-button';
 const DialPad = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'DialPad' });
     const { size = 'large', sounds, autoSize, classes, onChange: onChangeProp, action, control, getDialPadButtonProps, sinkId, persistBgTime = 200, volume = 1, muted = false, longPressDelay = 1000, className, ...divProps } = props;
-    const { externalWindow } = useWindowContext();
+    const { externalWindow, globalThis: contextGlobal } = useWindowContext();
+    const contextWindow = externalWindow ?? contextGlobal;
     const cls = useClasses('dial-pad', classes, className);
     const containerRef = useRef(null);
     const hiddenRef = useRef(null);
@@ -171,7 +177,6 @@ const DialPad = forwardRef((inProps, ref) => {
         focusedIndexRef,
         containerRef,
     });
-    const dialButtonKey = `${moveFocusedId}-dial-button`;
     const { onKeyFocusedIndexHandle } = useKeyboardMoveFocus({
         options: DIALER_PAD_ICONS,
         focusedIndexRef,
@@ -184,12 +189,13 @@ const DialPad = forwardRef((inProps, ref) => {
         },
     });
     const audioProcessor = useCallback((audio) => {
+        const audioWithSinkId = audio;
         if (typeof volume !== 'undefined')
             audio.volume = volume;
         if (typeof muted !== 'undefined')
             audio.muted = muted;
-        if (typeof audio['setSinkId'] === 'function')
-            audio['setSinkId'](sinkId || '');
+        if (typeof audioWithSinkId.setSinkId === 'function')
+            void audioWithSinkId.setSinkId(sinkId || '');
     }, [muted, sinkId, volume]);
     const play = useKeyAudio({
         sounds,
@@ -197,13 +203,13 @@ const DialPad = forwardRef((inProps, ref) => {
     });
     const playAudio = useEventCallback((value) => {
         const key = value === DIALER_PAD_PLUS ? '0' : value;
-        const keyButtonElm = containerRef.current?.querySelector(`[${dialButtonKey}="${key}"]`);
+        const keyButtonElm = containerRef.current?.querySelector(`[${MOVE_FOCUSED_ATTR_KEY}="${moveFocusedId}"][${DIAL_BUTTON_ATTR_KEY}="${key}"]`);
         if (keyButtonElm) {
             const oldTimer = keyTimerMapRef.current[key];
             if (oldTimer)
-                clearTimeout(oldTimer);
+                contextWindow.clearTimeout(oldTimer);
             keyButtonElm.classList.add(globalStateClasses.active);
-            keyTimerMapRef.current[key] = window.setTimeout(() => {
+            keyTimerMapRef.current[key] = contextWindow.setTimeout(() => {
                 keyButtonElm.classList.remove(globalStateClasses.active);
                 delete keyTimerMapRef.current[key];
             }, persistBgTime);
@@ -220,9 +226,10 @@ const DialPad = forwardRef((inProps, ref) => {
             handleChange(value, 'customKeyboard');
             const toIndex = ACCEPTABLE_KEYS.findIndex((x) => x === value);
             focusedIndexRef.current = toIndex;
-            if (externalWindow &&
-                externalWindow.document.activeElement?.getAttribute(dialButtonKey) !==
-                    null) {
+            const activeElement = externalWindow?.document.activeElement;
+            if (activeElement?.getAttribute(MOVE_FOCUSED_ATTR_KEY) ===
+                moveFocusedId &&
+                activeElement.getAttribute(DIAL_BUTTON_ATTR_KEY) !== null) {
                 hiddenRef.current?.focus();
             }
         }
@@ -237,9 +244,9 @@ const DialPad = forwardRef((inProps, ref) => {
     ]);
     useEffect(() => () => {
         for (const timer of Object.values(keyTimerMapRef.current)) {
-            clearTimeout(timer);
+            contextWindow.clearTimeout(timer);
         }
-    }, []);
+    }, [contextWindow]);
     return (jsxs("div", { ref: forkRef, className: cls('root', { 'auto-size': autoSize }), ...divProps, children: [jsx(VisuallyHidden, { ref: hiddenRef, tabIndex: -1 }), DIALER_PAD_ICONS.map(([lgIcon, smIcon, key, additionLabel], index) => {
                 const ariaLabelArr = additionLabel
                     ? [key, additionLabel]
@@ -248,12 +255,18 @@ const DialPad = forwardRef((inProps, ref) => {
                     ? 'medium'
                     : 'large';
                 const icon = size === 'large' ? lgIcon : smIcon;
-                return (jsx(DialPadButton, { classes: classes, symbol: icon, value: key, onKeyEffect: handleKeyEffect, ...getItemProps(index), "aria-label": ariaLabelArr.join(', '), onKeyDown: onKeyFocusedIndexHandle, [dialButtonKey]: key, ...getDialPadButtonProps?.(key), ...(key === '0'
-                        ? {
-                            longPressValue: DIALER_PAD_PLUS,
-                            longPressDelay,
-                        }
-                        : {}), size: size === 'large' ? 'xxxlarge' : 'xxlarge', iconSize: iconSize }, key));
+                const itemProps = getItemProps(index);
+                const { onKeyDown: customOnKeyDown, ...customButtonProps } = getDialPadButtonProps?.(key) ?? {};
+                return (jsx(DialPadButton, { classes: classes, symbol: icon, value: key, onKeyEffect: handleKeyEffect, ...combineProps(itemProps, {
+                        'aria-label': ariaLabelArr.join(', '),
+                        ...customButtonProps,
+                        ...(key === '0'
+                            ? {
+                                longPressValue: DIALER_PAD_PLUS,
+                                longPressDelay,
+                            }
+                            : {}),
+                    }), [DIAL_BUTTON_ATTR_KEY]: key, onKeyDown: composeEventHandlers(customOnKeyDown, onKeyFocusedIndexHandle), tabIndex: itemProps.tabIndex, size: size === 'large' ? 'xxxlarge' : 'xxlarge', iconSize: iconSize }, key));
             })] }));
 });
 DialPad.displayName = 'SuiDialPad';
@@ -342,7 +355,9 @@ const DialTextField = forwardRef((inProps, ref) => {
     const forkInputRef = useForkRef(inputRefProp, forkContextRef);
     const scrollToPositionRef = useRef();
     const isNotTriggerRefocusRef = useRef(false);
-    const maxLength = keypadMode ? undefined : inputPropsProp?.maxLength || 30;
+    const maxLength = keypadMode
+        ? undefined
+        : (inputPropsProp?.maxLength ?? 30);
     const checkNotReFocus = useEventCallback((reason, isFocus) => {
         const elm = inputRef.current;
         const isInputFocus = isFocus ?? externalWindow.document.activeElement === elm;

package/Dialog.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { motion } from 'framer-motion';
+import clsx from 'clsx';
 import kebabCase from 'lodash/kebabCase';
-import { useEventCallback, combineProps, useClasses } from '@ringcentral/spring-base';
+import { useEventCallback, useForkRef, combineProps, useClasses } from '@ringcentral/spring-base';
 import { Xsm } from '@ringcentral/spring-icon';
 import { useThemeProps, useClassesWithMode, motionTransition } from '@ringcentral/spring-theme';
 import './chunks/Icon.js';
@@ -14,7 +15,6 @@ import '@mui/base';
 import './chunks/Squircle.js';
 import './chunks/withTooltip.js';
 import './chunks/Tooltip.js';
-import 'clsx';
 import './chunks/getFade.js';
 import './Popper.js';
 import '@floating-ui/react-dom';
@@ -45,7 +45,8 @@ const Dialog = forwardRef((inProps, ref) => {
     const handleCloseButtonClick = useEventCallback((e) => {
         onClose?.(e, 'closeButtonClick');
     });
-    return (jsx(Modal, { open: open, onClose: onClose, blocking: blocking, 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, closeButtonClassName && (jsx(IconButton, { size: 'large', color: 'secondary', symbol: Xsm, variant: "contained", ...combineProps({
+    const handleBodyRef = useForkRef(ref, bodyProps?.ref);
+    return (jsx(Modal, { open: open, onClose: onClose, blocking: blocking, className: cls('root', { 'non-blocking': !blocking }), ...rest, children: jsxs(motion.div, { role: "dialog", "aria-modal": blocking, ...(isFullHeight && slideInProps), ...bodyProps, ref: handleBodyRef, tabIndex: bodyProps?.tabIndex ?? (blocking ? -1 : undefined), className: clsx(cls('body', toSize, isFullHeight && placement), bodyProps?.className), children: [children, closeButtonClassName && (jsx(IconButton, { size: 'large', color: 'secondary', symbol: Xsm, variant: "contained", ...combineProps({
                         className: closeButtonClassName,
                         onClick: handleCloseButtonClick,
                         'aria-label': 'Close',

package/Dropdown.js

@@ -7,6 +7,7 @@ import 'framer-motion';
 import './chunks/Icon.js';
 import { M as Menu } from './chunks/Menu.js';
 import { c as useMenuItemSelect, a as MenuItemSelectContext } from './chunks/useMenuItemSelect.js';
+import '@mui/utils';
 import 'tabbable';
 import './chunks/useListNavigation.js';
 import './VirtualizedList.js';
@@ -29,6 +30,7 @@ import './chunks/PopperPaper.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';
@@ -38,7 +40,7 @@ var Dropdown$1 = {"sui-dropdown-value":"sui-dropdown-value","sui-dropdown-chevro
 
 const Dropdown = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Dropdown' });
-    const { classes, className, children, defaultOpen, open: openProp, onOpenChange, disabled, virtualize = true, MenuProps, rootProps, buttonProps: buttonPropsProp = {}, value: valueProp, defaultValue = null, onChange: onChangeProp, renderValue = String, placeholder, label, buttonRef, getSelectedIndex = (value) => {
+    const { classes, className, children, defaultOpen, open: openProp, onOpenChange, autoFocus = false, disabled, virtualize = true, MenuProps, rootProps, buttonProps: buttonPropsProp = {}, value: valueProp, defaultValue = null, onChange: onChangeProp, renderValue = String, placeholder, label, buttonRef, getSelectedIndex = (value) => {
         return data.findIndex((v) => v === value);
     }, data, } = props;
     const [anchorEl, setAnchorEl] = useState(null);
@@ -80,13 +82,14 @@ const Dropdown = forwardRef((inProps, ref) => {
     });
     const buttonProps = combineProps({
         onClick: () => {
-            if (!open)
+            if (!disabled && !open)
                 handleOpen(true);
         },
         onKeyDown: (e) => {
             if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
                 e.preventDefault();
-                handleOpen(true);
+                if (!disabled)
+                    handleOpen(true);
             }
         },
     }, buttonPropsProp);
@@ -119,7 +122,7 @@ const Dropdown = forwardRef((inProps, ref) => {
                 }), ref: ref, children: [label && (jsxs(Fragment, { children: [jsx("span", { className: cls('label'), children: label }), jsx("span", { className: cls('colon'), children: ":" })] })), jsxs("button", { className: cls('button', {
                             activated: open,
                             focusVisible,
-                        }), ...buttonProps, ...focusVisibleHandlers, ref: handleButtonRef, children: [jsx("span", { className: cls('value'), children: value === null ? placeholder : renderValue(value) }), jsx(Squircle, { className: cls('chevron'), interactive: false, ref: chevronRef, children: jsx(ExpandCollapseCaret, { size: 'small', expanded: open }) })] })] }), anchorEl && menu] }));
+                        }), ...buttonProps, ...focusVisibleHandlers, type: "button", autoFocus: autoFocus && !disabled, disabled: disabled, ref: handleButtonRef, children: [jsx("span", { className: cls('value'), children: value === null ? placeholder : renderValue(value) }), jsx(Squircle, { className: cls('chevron'), interactive: false, ref: chevronRef, children: jsx(ExpandCollapseCaret, { size: 'small', expanded: open }) })] })] }), anchorEl && menu] }));
 });
 Dropdown.displayName = 'SuiDropdown';
 

package/EmptyState.js

@@ -2,6 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useClasses, getTitle } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
+import { h as hasContent } from './chunks/hasContent.js';
+import '@mui/utils';
 import { I as Icon } from './chunks/Icon.js';
 
 var EmptyState$1 = {"sui-empty-state-root":"sui-empty-state-root","sui-empty-state-icon":"sui-empty-state-icon","sui-empty-state-text-container":"sui-empty-state-text-container","sui-empty-state-title":"sui-empty-state-title","sui-empty-state-description":"sui-empty-state-description","sui-empty-state-actions":"sui-empty-state-actions"};
@@ -10,7 +12,7 @@ const EmptyState = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'EmptyState' });
     const { classes, className, title, description, icon, actions, ...rest } = props;
     const cls = useClasses('empty-state', classes, className);
-    return (jsxs("div", { ...rest, className: cls('root'), children: [icon && (jsx("div", { className: cls('icon'), children: jsx(Icon, { size: "xxxlarge", symbol: icon }) })), (title || description) && (jsxs("div", { className: cls('text-container'), children: [title && (jsx("span", { className: cls('title'), title: getTitle(title), children: title })), description && (jsx("span", { className: cls('description'), title: getTitle(description), children: description }))] })), actions && actions.length > 0 && (jsx("div", { className: cls('actions'), children: actions }))] }));
+    return (jsxs("div", { ...rest, ref: ref, className: cls('root'), children: [icon && (jsx("div", { className: cls('icon'), children: jsx(Icon, { size: "xxxlarge", symbol: icon }) })), (hasContent(title) || hasContent(description)) && (jsxs("div", { className: cls('text-container'), children: [hasContent(title) && (jsx("span", { className: cls('title'), title: getTitle(title), children: title })), hasContent(description) && (jsx("span", { className: cls('description'), title: getTitle(description), children: description }))] })), actions && actions.length > 0 && (jsx("div", { className: cls('actions'), children: actions }))] }));
 });
 EmptyState.displayName = 'SuiEmptyState';
 

package/FormField.js

@@ -4,6 +4,8 @@ import 'react';
 import 'clsx';
 import '@ringcentral/spring-base';
 import '@ringcentral/spring-theme';
+import './chunks/hasContent.js';
+import '@mui/utils';
 
 var FormField = {"sui-form-field-label":"sui-form-field-label","sui-form-field-helper-text":"sui-form-field-helper-text","sui-form-field-content":"sui-form-field-content","sui-form-field-container":"sui-form-field-container","sui-form-field-focus-effect":"sui-form-field-focus-effect","sui-form-field-outlined":"sui-form-field-outlined","sui-form-field-contained":"sui-form-field-contained","sui-form-field-outlined-label":"sui-form-field-outlined-label","sui-form-field-contained-label":"sui-form-field-contained-label","sui-form-field-outlined-xlarge":"sui-form-field-outlined-xlarge","sui-form-field-contained-xlarge":"sui-form-field-contained-xlarge","sui-form-field-outlined-large":"sui-form-field-outlined-large","sui-form-field-contained-large":"sui-form-field-contained-large","sui-form-field-outlined-medium":"sui-form-field-outlined-medium","sui-form-field-contained-medium":"sui-form-field-contained-medium","sui-form-field-outlined-content":"sui-form-field-outlined-content","sui-form-field-contained-content":"sui-form-field-contained-content","sui-disabled":"sui-disabled","sui-focused":"sui-focused","sui-form-field-standard-content":"sui-form-field-standard-content","sui-form-field-standard-focus-effect":"sui-form-field-standard-focus-effect","sui-form-field-standard":"sui-form-field-standard","sui-form-field-quiet-content":"sui-form-field-quiet-content","sui-form-field-xlarge-content":"sui-form-field-xlarge-content","sui-form-field-large-content":"sui-form-field-large-content","sui-form-field-medium-content":"sui-form-field-medium-content","sui-form-field-error-helper-text":"sui-form-field-error-helper-text","sui-form-field-error-label":"sui-form-field-error-label","sui-form-field-error-focus-effect":"sui-form-field-error-focus-effect","sui-form-field-error-content":"sui-form-field-error-content","sui-form-field-error-standard-content":"sui-form-field-error-standard-content","sui-form-field-error-contained-content":"sui-form-field-error-contained-content","sui-form-field":"sui-form-field"};
 

package/ListItemText.js

@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
 import { useClasses } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 import { h as hasContent } from './chunks/hasContent.js';
+import '@mui/utils';
 
 var ListItemText$1 = {"sui-list-item-text-root":"sui-list-item-text-root","sui-list-item-text-primary-text":"sui-list-item-text-primary-text","sui-list-item-text-secondary-text":"sui-list-item-text-secondary-text","sui-list-item-text-primary":"sui-list-item-text-primary","sui-list-item-text-primary-primary-text":"sui-list-item-text-primary-primary-text","sui-list-item-text-secondary":"sui-list-item-text-secondary","sui-list-item-text-secondary-primary-text":"sui-list-item-text-secondary-primary-text"};
 

package/MenuHeader.js

@@ -2,6 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import { h as hasContent } from './chunks/hasContent.js';
+import '@mui/utils';
 import { M as MenuDivider } from './chunks/MenuDivider.js';
 import './chunks/Divider.js';
 import '@ringcentral/spring-base';

package/MenuItem.js

@@ -13,6 +13,8 @@ import 'react-virtuoso';
 import './chunks/List.js';
 import './chunks/useListNavigation.js';
 import 'tabbable';
+import './chunks/composeEventHandlers.js';
+import '@mui/utils';
 import './ListNavigation.js';
 import './chunks/Menu.js';
 import './chunks/Popover.js';

package/MenuItemText.js

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

package/MenuList.js

@@ -22,11 +22,13 @@ import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 import './Popper.js';
 import './chunks/PopperPaper.js';
+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';
 
 var MenuList = {"sui-menu-list-root":"sui-menu-list-root"};

package/Option.js

@@ -1,7 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useThemeProps } from '@ringcentral/spring-theme';
-import { u as useMenuItemSelectContext, M as MenuItem, g as composeEventHandlers } from './chunks/useMenuItemSelect.js';
+import { c as composeEventHandlers } from './chunks/composeEventHandlers.js';
+import '@mui/utils';
+import { u as useMenuItemSelectContext, M as MenuItem } from './chunks/useMenuItemSelect.js';
 import '@ringcentral/spring-base';
 import 'tabbable';
 import './chunks/useListNavigation.js';

package/PickerTextField.js

@@ -18,6 +18,8 @@ import './Popper.js';
 import './chunks/PopperPaper.js';
 import './chunks/useHelperTextId.js';
 import 'clsx';
+import './chunks/hasContent.js';
+import '@mui/utils';
 import './chunks/TextField.js';
 import '@ringcentral/spring-icon';
 import './chunks/ShowHideEye.js';

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' : ''}`;
 }