@ringcentral/spring-ui 1.7.0

package/chunks/Chip.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useButton } from '@mui/base';
+import { useClasses, useId, getTitle, isDeleteKeyboardEvent } from '@ringcentral/spring-base';
+import { Xmd } from '@ringcentral/spring-icon';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { I as IconButton } from './IconButtonLabel.js';
+
+const Chip = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Chip' });
+    const { component: ChipRoot = 'div', classes, className, children, label, startSlot, size = 'large', clickable: clickableProp, truncate = true, color = 'default', DeleteIconProps = {}, disabled, onClick, onDelete, onKeyDown, onKeyUp, ...rest } = props;
+    const cls = useClasses('chip', classes, className);
+    const handleDeleteIconClick = (event) => {
+        // Stop the event from bubbling up to the `Chip`
+        event.stopPropagation();
+        if (onDelete) {
+            onDelete(event);
+        }
+    };
+    const handleKeyDown = (event) => {
+        // Ignore events from children of `Chip`.
+        if (event.currentTarget === event.target &&
+            isDeleteKeyboardEvent(event)) {
+            // Will be handled in keyUp, otherwise some browsers
+            // might init navigation
+            event.preventDefault();
+        }
+        if (onKeyDown) {
+            onKeyDown(event);
+        }
+    };
+    const handleKeyUp = (event) => {
+        // Ignore events from children of `Chip`.
+        if (event.currentTarget === event.target &&
+            onDelete &&
+            isDeleteKeyboardEvent(event)) {
+            onDelete(event);
+        }
+        if (onKeyUp) {
+            onKeyUp(event);
+        }
+    };
+    const clickable = clickableProp !== false && onClick ? true : clickableProp;
+    const deleteIconButtonVariant = !clickable && color === 'default' ? 'contained' : 'inverted';
+    const deleteIconButtonColor = !clickable && color === 'error' ? 'danger' : 'secondary';
+    const deleteIconButtonSize = size === 'small' ? 'xsmall' : 'small';
+    const { onDelete: _, ...buttonProps } = props;
+    const { getRootProps } = useButton({
+        ...buttonProps,
+        rootRef: ref,
+    });
+    const rootProps = clickable
+        ? {
+            className: cls('root', color, size, {
+                clickable,
+                disabled,
+                truncate,
+            }),
+            ...rest,
+            ...getRootProps({ onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }),
+        }
+        : {
+            className: cls('root', color, size, { disabled, truncate }),
+            ...rest,
+            ref,
+        };
+    const labelId = useId();
+    const nonInteractiveDeleteProps = {
+        tabIndex: -1,
+        component: 'span',
+        role: 'presentation',
+    };
+    const deleteIcon = onDelete ? (jsx(IconButton, { background: false, className: cls('delete-icon'), variant: deleteIconButtonVariant, color: deleteIconButtonColor, size: deleteIconButtonSize, symbol: Xmd, onClick: handleDeleteIconClick, "aria-describedby": labelId, ...(clickable ? nonInteractiveDeleteProps : {}), ...DeleteIconProps })) : null;
+    return (jsxs(ChipRoot, { ...rootProps, children: [startSlot, jsx("span", { id: labelId, className: cls('label'), title: getTitle(label), children: label }), deleteIcon] }));
+});
+Chip.displayName = 'SuiChip';
+
+export { Chip as C };

package/chunks/CircularProgressIndicator.js

@@ -0,0 +1,62 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { MotionConfig, motion } from 'framer-motion';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+const indeterminateTransition = {
+    type: 'tween',
+    duration: 1,
+    ease: 'easeInOut',
+};
+const radialGradientScaleMultiplier = {
+    xlarge: [2.7, 3],
+    large: [3, 3.5],
+    medium: [2.7, 3],
+    small: [3.5, 3],
+    xsmall: [3.5, 3],
+};
+const CircularProgressIndicator = forwardRef((inProps, ref) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'CircularProgressIndicator',
+    });
+    const { classes, className, children, variant = 'indeterminate', size = 'large', color = 'primary', value, progressBarProps: progressBarPropsProp, ...rest } = props;
+    const cls = useClasses('circular-progress-indicator', classes, className);
+    const progressBarProps = progressBarPropsProp || {};
+    let content = null;
+    if (variant === 'indeterminate') {
+        const [scale, scaleMultiplier] = radialGradientScaleMultiplier[size];
+        content = (jsx(MotionConfig, { reducedMotion: "never", children: jsx(motion.span, { className: cls('outer-circle', `${variant}-outer-circle`), animate: {
+                    rotate: 360,
+                    transition: {
+                        repeat: Infinity,
+                        ...indeterminateTransition,
+                    },
+                }, children: jsx(motion.span, { className: cls('inner-circle', `${variant}-inner-circle`), animate: {
+                        scale: [scale, scale * scaleMultiplier, scale],
+                        opacity: [0.5, 1, 0.5],
+                        transition: {
+                            repeat: Infinity,
+                            repeatType: 'loop',
+                            ...indeterminateTransition,
+                        },
+                    } }) }) }));
+    }
+    else if (variant === 'determinate') {
+        if (value === undefined) {
+            throw new Error('The value prop is required for a determinate CircularProgressIndicator');
+        }
+        progressBarProps['aria-valuenow'] = value;
+        progressBarProps['aria-valuemin'] = 0;
+        progressBarProps['aria-valuemax'] = 100;
+        const radius = 28;
+        const circumference = 2 * Math.PI * radius;
+        const offset = circumference - (value / 100) * circumference;
+        content = (jsx("svg", { width: '100%', height: '100%', viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("circle", { className: cls('progress-circle', `${variant}-progress-circle`), cx: "28", cy: "28", r: radius, fill: "none", strokeWidth: 18, strokeDasharray: circumference, strokeDashoffset: offset, transform: "rotate(-90 28 28)" }) }));
+    }
+    return (jsx("span", { className: cls('root', variant, size, color, `${variant}-${size}`, `${variant}-${color}`), ...rest, ...progressBarProps, role: "progressbar", ref: ref, children: content }));
+});
+CircularProgressIndicator.displayName = 'SuiProgressIndicator';
+
+export { CircularProgressIndicator as C };

package/chunks/Divider.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+const Divider = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Divider' });
+    const { component: DividerRoot = 'hr', variant = 'full', orientation = 'horizontal', classes, className, children, flexItem = false, title, ...rest } = props;
+    const cls = useClasses('divider', classes, className);
+    const role = DividerRoot !== 'hr' ? 'separator' : undefined;
+    const hasTitle = title !== undefined;
+    return (jsx(DividerRoot, { role: role, className: cls('root', variant, orientation, {
+            'flex-item': flexItem,
+            'has-title': hasTitle,
+        }, `${variant}-${orientation}`, hasTitle && `${orientation}-has-title`), "data-title": title, ref: ref, ...rest, children: children }));
+});
+Divider.displayName = 'SuiDivider';
+
+export { Divider as D };

package/chunks/DragHandle.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+
+const DragHandle = forwardRef((props, ref) => {
+    const { component: DragHandleRoot = 'div', anchor = 'top', classes, className, ...rest } = props;
+    const cls = useClasses('drag-handle', classes, className);
+    return (jsx(DragHandleRoot, { ref: ref, className: cls('root', anchor), role: "presentation", "aria-hidden": "true", ...rest, children: jsx("div", { className: cls('bar') }) }));
+});
+
+export { DragHandle as D };

package/chunks/Drawer.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { motion } from 'framer-motion';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps, motionTransition } from '@ringcentral/spring-theme';
+import clsx from 'clsx';
+import './Icon.js';
+import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
+import { g as getSlideIn } from './getSlideIn.js';
+import { M as Modal } from './Modal.js';
+
+/**
+ * Drawer Component - Base drawer without gesture support
+ *
+ * A clean, lightweight drawer component that provides basic modal/slide functionality.
+ * For gesture support, use SwipeableDrawer which builds on top of this component.
+ *
+ * @example
+ * ```tsx
+ * // Simple navigation drawer
+ * <Drawer
+ *   open={open}
+ *   onClose={onClose}
+ *   anchor="left"
+ *   variant="temporary"
+ * >
+ *   <Navigation />
+ * </Drawer>
+ *
+ * // Bottom sheet without gestures
+ * <Drawer
+ *   open={open}
+ *   onClose={onClose}
+ *   anchor="bottom"
+ * >
+ *   <Content />
+ * </Drawer>
+ * ```
+ */
+const Drawer = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Drawer' });
+    const { anchor = 'left', bodyProps, classes, className, children, header, footer, open, onClose, variant = 'temporary', // eslint-disable-line @typescript-eslint/no-unused-vars
+    blocking = true, measurementRefs, headerProps, ...rest } = props;
+    const headerRef = measurementRefs?.header;
+    const footerRef = measurementRefs?.footer;
+    const contentRef = measurementRefs?.content;
+    const cls = useClasses('drawer', classes, className);
+    const slideInProps = getSlideIn({
+        toggle: open,
+        from: anchor,
+        prefersReducedMotion: usePrefersReducedMotion(),
+        toggleOnTransition: motionTransition['neutral-01-fast'],
+        toggleOffTransition: motionTransition['neutral-01-fast'],
+    });
+    return (jsx(Modal, { open: open, onClose: onClose, blocking: blocking, disableScrollLock: !blocking, disableBackdropClick: !blocking, disableEscapeKeyDown: !blocking, hideBackdrop: !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 }))] }) }));
+});
+Drawer.displayName = 'SuiDrawer';
+
+export { Drawer as D };

package/chunks/ExpandCollapseCaret.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { useClasses } from '@ringcentral/spring-base';
+import { motionTransition } from '@ringcentral/spring-theme';
+import { I as Icon } from './Icon.js';
+import 'react';
+import { u as useMotionSafeTransition } from './useMotionSafeTransition.js';
+
+const motionVariants = {
+    expanded: {
+        d: 'M 4.5 12.8 L 9.85 7.525 L 15.1 12.8',
+    },
+    collapsed: {
+        d: 'M 4.5 7.5 L 9.85 12.9 L 15.15 7.55',
+    },
+};
+const ExpandCollapseCaret = (props) => {
+    const { size = 'small', orientation = 'vertical', expanded, classes, className, ...rest } = props;
+    const cls = useClasses('expand-collapse-caret', classes, className);
+    const transition = useMotionSafeTransition(motionTransition['spring-01-fast']);
+    return (jsx(Icon, { ...rest, size: size, className: cls('root', orientation), children: jsx(motion.svg, { xmlns: "http://www.w3.org/2000/svg", viewBox: '0 0 20 20', children: jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, variants: motionVariants, animate: expanded ? 'expanded' : 'collapsed', transition: transition, fill: "transparent" }) }) }));
+};
+
+export { ExpandCollapseCaret as E };

package/chunks/FormLabel.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useContext, forwardRef, useMemo } from 'react';
+import { useClasses, useId } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+const FormLabelContext = createContext({});
+const useFormLabel = (props) => {
+    const { disabled: disabledProp, id: idProp, value: valueProp } = props;
+    const { disabled: innerDisabled, id: innerId, value: innerValue, } = useContext(FormLabelContext);
+    const disabled = disabledProp ?? innerDisabled;
+    const id = idProp ?? innerId;
+    const value = valueProp ?? innerValue;
+    return { id, disabled, value };
+};
+
+const FormLabel = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'FormLabel' });
+    const { classes, className, children, label, value, labelRef, id: idProp, disabled = false, fullWidth = false, placement = 'end', rootProps, ...rest } = props;
+    const cls = useClasses('form-label', classes, className);
+    const innerId = useId();
+    const id = idProp || innerId;
+    const formLabelContextValue = useMemo(() => ({ id, disabled, value }), [disabled, id, value]);
+    return (jsxs("div", { className: cls('root', placement, { 'full-width': fullWidth }), ref: ref, ...rootProps, children: [jsx(FormLabelContext.Provider, { value: formLabelContextValue, children: children }), jsx("label", { className: cls('label', `${placement}-label`, { disabled }), ...rest, ref: labelRef, htmlFor: id, children: label })] }));
+});
+FormLabel.displayName = 'SuiFormLabel';
+
+export { FormLabel as F, FormLabelContext as a, useFormLabel as u };

package/chunks/Icon.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo, cloneElement } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+const Icon = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Icon' });
+    const { size = 'medium', symbol, children: childrenProp, className, classes, ...rest } = props;
+    const cls = useClasses('icon', classes, className);
+    const svgClassName = cls('svg');
+    const children = useMemo(() => {
+        if (symbol) {
+            const Comp = symbol;
+            return jsx(Comp, { className: svgClassName });
+        }
+        else if (childrenProp) {
+            return cloneElement(childrenProp, { className: svgClassName });
+        }
+        return null;
+    }, [childrenProp, svgClassName, symbol]);
+    return (jsx("span", { className: cls('root', size), ...rest, ref: ref, children: children }));
+});
+Icon.displayName = 'SuiIcon';
+
+export { Icon as I };

package/chunks/IconButtonLabel.js

@@ -0,0 +1,69 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, cloneElement } from 'react';
+import { useButton } from '@mui/base';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { I as Icon } from './Icon.js';
+import { S as Squircle } from './Squircle.js';
+import { w as withTooltip } from './withTooltip.js';
+
+const IconSizeMap = {
+    xxxlarge: 'medium',
+    xxlarge: 'medium',
+    xlarge: 'large',
+    large: 'medium',
+    medium: 'small',
+    small: 'small',
+    xsmall: 'xsmall',
+};
+function sizeSupportsLabel(size) {
+    switch (size) {
+        case 'xxxlarge':
+        case 'xxlarge':
+            return true;
+        default:
+            return false;
+    }
+}
+const IconButton = withTooltip(forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'IconButton' });
+    const { component = 'button', color = 'primary', shape = 'circular', size = 'large', background = true, variant = 'outlined', label, symbol, classes, iconSize, className, children, disabled, ...rest } = props;
+    const cls = useClasses('icon-button', classes, className);
+    const { getRootProps, focusVisible } = useButton({
+        ...props,
+        rootRef: ref,
+    });
+    const rootProps = {
+        className: cls('root', size, variant, color, shape, `${size}-${shape}`, `${size}-${variant}`, `${variant}-${color}`, `${variant}-${shape}`, ...(!background
+            ? [
+                'hide-background',
+                `${variant}-hide-background`,
+                `${shape}-hide-background`,
+            ]
+            : []), {
+            disabled,
+            focusVisible,
+        }),
+        'aria-label': label,
+        ...getRootProps(),
+        ...rest,
+    };
+    const content = (jsxs(Fragment, { children: [children || (jsx(Icon, { symbol: symbol, size: iconSize ?? IconSizeMap[size] })), sizeSupportsLabel(size) && label && (jsx("span", { className: cls('label', `${size}-label`, shape === 'squircle' && `${shape}-label`, `${size}-${shape}-label`), children: label }))] }));
+    if (shape === 'squircle') {
+        return (jsx(Squircle, { ...rootProps, component: component, interactive: !disabled, focusVisible: focusVisible, children: content }));
+    }
+    const IconButtonRoot = component;
+    return jsx(IconButtonRoot, { ...rootProps, children: content });
+}));
+IconButton.displayName = 'SuiIconButton';
+
+const IconButtonLabel = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'IconButtonLabel' });
+    const { label, className, classes, children, ...rest } = props;
+    const cls = useClasses('icon-button-outer-label', classes, className);
+    const ariaLabel = children.props['aria-label'] || children.props.label || label;
+    return (jsxs("div", { className: cls('root'), ...rest, ref: ref, children: [cloneElement(children, { 'aria-label': ariaLabel }), label && jsx("span", { className: cls('text'), children: label })] }));
+});
+IconButtonLabel.displayName = 'SuiIconButtonLabel';
+
+export { IconButton as I, IconButtonLabel as a };

package/chunks/List.js

@@ -0,0 +1,22 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses, useForkRef } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { a as useListNavigation } from './useListNavigation.js';
+import 'tabbable';
+
+const List = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'List' });
+    const { classes, className, children, onKeyDown, onFocus, preventContainerScroll, searchAndFocusItemHandler, actions, ...rest } = props;
+    const cls = useClasses('list', classes, className);
+    const { renderItems, renderTabBoundary, getListProps, listRef } = useListNavigation({
+        preventContainerScroll,
+        searchAndFocusItemHandler,
+        actions,
+    });
+    const handleRef = useForkRef(ref, listRef);
+    return (jsxs(Fragment, { children: [jsx("div", { role: "list", className: cls('root'), ...rest, ...getListProps({ onFocus, onKeyDown }), ref: handleRef, children: renderItems(children) }), renderTabBoundary()] }));
+});
+List.displayName = 'SuiList';
+
+export { List as L };

package/chunks/ListItem.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useEffect } from 'react';
+import { useClasses, useFocusVisible, useActive, useHover, combineProps, useForkRef } from '@ringcentral/spring-base';
+import { motionTransition, useThemeProps } from '@ringcentral/spring-theme';
+import { D as Divider } from './Divider.js';
+import { useItemNavigation } from '../ListNavigation.js';
+import { useVirtualizedItemPropsContext } from '../VirtualizedList.js';
+import { AnimatePresence } from 'framer-motion';
+import './Icon.js';
+import { u as useMotionSafeTransition } from './useMotionSafeTransition.js';
+import { S as SlideIn } from './SlideIn.js';
+
+const HoverActions = (props) => {
+    const { show, children, className, instantTransition } = props;
+    const toggleOnTransition = useMotionSafeTransition(motionTransition['spring-01-fast']);
+    const toggleOffTransition = useMotionSafeTransition(motionTransition['neutral-01-fast']);
+    const slideInProps = {
+        toggle: show,
+        children,
+        className,
+        toggleOffTransition: instantTransition
+            ? motionTransition['instant']
+            : toggleOffTransition,
+        toggleOnTransition: instantTransition
+            ? motionTransition['instant']
+            : toggleOnTransition,
+        onClick: (e) => {
+            e.stopPropagation();
+        },
+    };
+    return (jsx(AnimatePresence, { children: show && jsx(SlideIn, { ...slideInProps, children: children }) }));
+};
+
+const ListItem = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'ListItem' });
+    const { classes, className, children, hoverActions, size = 'small', tabIndex = -1, role = 'listitem', divider = true, onClick, clickable = Boolean(onClick), hoverable = true, focused = false, highlighted = false, autoFocus, selected, dragged, alwaysShowHoverActions = false, instantHoverActions = false, style: styleProp, ...rest } = props;
+    const cls = useClasses('list-item', classes, className);
+    const { itemRef, keyboardNavHandlers } = useItemNavigation() ?? {};
+    const virtualizedItemProps = useVirtualizedItemPropsContext();
+    const { focusVisible, focusVisibleWithin, focusVisibleRef, focusVisibleHandlers, } = useFocusVisible({ ...props, within: true });
+    const { active, activeHandlers } = useActive({
+        ...props,
+        disabled: !clickable,
+    });
+    const { hover, hoverHandlers } = useHover({
+        ...props,
+        // useHover only used for hover actions,
+        // so disabled when no hover actions or always show
+        disabled: !hoverable || !hoverActions,
+    });
+    const enhancedEventHandlers = (() => {
+        const handlers = {
+            ...focusVisibleHandlers,
+            ...activeHandlers,
+            ...hoverHandlers,
+        };
+        if (keyboardNavHandlers) {
+            return combineProps(handlers, keyboardNavHandlers);
+        }
+        return handlers;
+    })();
+    const rootRef = useForkRef(itemRef, ref, focusVisibleRef);
+    useEffect(() => {
+        if (autoFocus) {
+            itemRef?.current?.focus();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const isShowHoverAction = hover || focusVisibleWithin || alwaysShowHoverActions;
+    return (jsxs("div", { className: cls('root', size, {
+            focusVisibleWithin,
+            focusVisible,
+            active,
+            clickable,
+            hoverable,
+            selected,
+            dragged,
+            focused,
+            highlighted,
+        }), tabIndex: tabIndex, ...rest, ...enhancedEventHandlers, ...virtualizedItemProps, style: virtualizedItemProps
+            ? { ...styleProp, ...virtualizedItemProps.style }
+            : styleProp, role: role, ref: rootRef, children: [jsxs("div", { className: cls('container'), children: [jsx("div", { className: cls('content'), children: children }), hoverActions && (jsx(HoverActions, { show: isShowHoverAction, className: cls('hover-actions'), instantTransition: instantHoverActions, children: hoverActions }))] }), divider && (jsx(Divider, { className: cls('divider'), orientation: "horizontal", flexItem: true }))] }));
+});
+ListItem.displayName = 'SuiListItem';
+
+export { HoverActions as H, ListItem as L };

package/chunks/Menu.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, forwardRef, useMemo } from 'react';
+import { useClasses, useEventCallback } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { a as useNestedParentMenu, N as NestedMenuContext } from './useNestedParentMenu.js';
+import { P as Popover } from './Popover.js';
+
+const MenuContext = createContext(null);
+const useMenuContext = () => {
+    return useContext(MenuContext);
+};
+
+const Menu = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Menu' });
+    const { classes, children, open = false, onClose, autoFocus = true, className, PopperProps, ...rest } = props;
+    const cls = useClasses('menu', classes, className);
+    const padding = PopperProps?.padding;
+    const popperPadding = typeof padding === 'object'
+        ? {
+            top: padding.top ?? 16,
+            right: padding.right ?? 16,
+            bottom: padding.bottom ?? 16,
+            left: padding.left ?? 16,
+        }
+        : padding ?? 16;
+    const { contextValue } = useNestedParentMenu({
+        open,
+    });
+    const closeHandler = useEventCallback(() => {
+        onClose?.(undefined, 'Other');
+    });
+    const menuContextValue = useMemo(() => {
+        return { close: closeHandler, autoFocus };
+    }, [autoFocus, closeHandler]);
+    return (jsx(Popover, { bordered: true, className: cls('root'), PopperProps: { ...PopperProps, padding: popperPadding }, ...rest, open: open, onClose: (e, reason) => {
+            onClose?.(e, reason);
+        }, ref: ref, children: jsx("div", { className: cls('paper'), children: jsx(MenuContext.Provider, { value: menuContextValue, children: jsx(NestedMenuContext.Provider, { value: contextValue, children: children }) }) }) }));
+});
+Menu.displayName = 'SuiMenu';
+
+export { Menu as M, MenuContext as a, useMenuContext as u };

package/chunks/MenuDivider.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { D as Divider } from './Divider.js';
+
+const MenuDivider = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'MenuDivider' });
+    const { classes, className, ...rest } = props;
+    const cls = useClasses('menu-divider', classes, className);
+    return jsx(Divider, { className: cls('root'), ...rest, ref: ref });
+});
+MenuDivider.displayName = 'SuiMenuDivider';
+
+export { MenuDivider as M };

package/chunks/MenuItemText.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses, getTitle } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+const MenuItemText = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'MenuItemText' });
+    const { classes, className, primary, primaryText, infoText, info, children, ...rest } = props;
+    const cls = useClasses('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 }))] }));
+});
+MenuItemText.displayName = 'SuiMenuItemText';
+
+export { MenuItemText as M };

package/chunks/MenuList.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo, useRef, useEffect } from 'react';
+import { useClasses, useForkRef, useWindowContext } from '@ringcentral/spring-base';
+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 'tabbable';
+import './useListNavigation.js';
+import '../VirtualizedList.js';
+
+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 cls = useClasses('menu-list', classes, className);
+    const menuListContextValue = useMemo(() => ({
+        nowrap,
+    }), [nowrap]);
+    const { contextValue } = useMenuItemSelect({
+        widget,
+        selectMode,
+        value: valueProp,
+        onChange,
+        autoFocus,
+    });
+    const actions = useRef(null);
+    const listRef = useRef(null);
+    const handleListRef = useForkRef(listRef, ref);
+    const { document } = useWindowContext();
+    useEffect(() => {
+        if (autoFocus &&
+            // ensure item can auto focus correctly
+            !listRef.current?.contains(document?.activeElement ?? null)) {
+            actions.current?.focus();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Use appropriate role and ARIA attributes based on widget type
+    const listRole = widget === 'select' ? 'listbox' : 'menu';
+    const listboxProps = widget === 'select'
+        ? { 'aria-multiselectable': selectMode === 'multiple' }
+        : {};
+    return (jsx(List, { className: cls('root'), role: listRole, ...listboxProps, ...rest, ref: handleListRef, actions: actions, children: jsx(MenuListContext.Provider, { value: menuListContextValue, children: jsx(MenuItemSelectContext.Provider, { value: contextValue, children: children }) }) }));
+});
+MenuList.displayName = 'SuiMenuList';
+
+export { MenuList as M };