@ringcentral/spring-ui 1.11.2 → 1.12.0

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';
@@ -31,6 +33,7 @@ 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';
@@ -33,6 +34,7 @@ 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';

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

@@ -19,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,12 +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';
@@ -23,6 +24,7 @@ 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';

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

@@ -23,6 +23,8 @@ 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';

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';
@@ -38,6 +39,7 @@ 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';
@@ -190,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(() => {
@@ -572,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);
@@ -719,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';
@@ -26,6 +27,7 @@ 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

@@ -11,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;
@@ -21,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 = [

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);

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

@@ -3,6 +3,7 @@ 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' });

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

@@ -130,10 +130,9 @@ const InnerModal = forwardRef((props, ref) => {
     const overlayBranchRegistry = ariaHideEnabled
         ? ownOverlayBranchRegistry
         : parentOverlayBranchRegistry;
-    const isOverlayBranch = !blocking && open && parentOverlayBranchRegistry != null;
     const ariaHideEnabledForChildren = ariaHideEnabled || parentModalContext?.ariaHideEnabled === true;
     const overlayBranchRef = useOverlayBranch({
-        active: isOverlayBranch,
+        active: !blocking && open,
         registry: parentOverlayBranchRegistry,
     });
     const handleRef = useForkRef(ref, ariaHideOutsideRef, overlayBranchRef);
@@ -209,4 +208,4 @@ const Modal = forwardRef((inProps, ref) => {
 });
 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

@@ -38,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);
@@ -74,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`;
         }
@@ -133,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/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);