@ringcentral/spring-ui 1.12.0 → 1.13.0

package/chunks/Button.js

@@ -1,88 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { forwardRef } from 'react';
-import clsx from 'clsx';
-import { useButton } from '@mui/base';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { C as CircularProgressIndicator } from './CircularProgressIndicator.js';
-import { I as Icon } from './Icon.js';
-import './Tooltip.js';
-import { w as withTooltip } from './withTooltip.js';
-
-const buttonIconSizeMap = {
-    xlarge: 'large',
-    large: 'medium',
-    medium: 'small',
-    small: 'small',
-    xsmall: 'xsmall',
-};
-const CircularProgressIndicatorSizeMap = {
-    xlarge: 'medium',
-    large: 'medium',
-    medium: 'small',
-    small: 'small',
-    xsmall: 'xsmall',
-};
-const CircularProgressIndicatorColorMap = {
-    primary: 'primary',
-    secondary: 'primary',
-    danger: 'danger',
-    warning: 'warning',
-    success: 'success',
-    neutral: 'primary',
-};
-const START_SLOT = 'start-slot';
-const END_SLOT = 'end-slot';
-const Button = withTooltip(forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Button' });
-    const { component = 'button', children, size = 'medium', variant = 'contained', color = 'primary', background = true, fullWidth = false, loading = false, title: titleProp, CircularProgressIndicatorProps, startIcon, endIcon, classes, className, disabled: disabledProp, focusableWhenDisabled, ...rest } = props;
-    const cls = useClasses('button', classes, className);
-    const disableInteractions = disabledProp || loading;
-    const { getRootProps, focusVisible } = useButton({
-        ...props,
-        focusableWhenDisabled,
-        disabled: disableInteractions,
-        rootRef: ref,
-    });
-    const ButtonRoot = component;
-    const isTextContent = typeof children === 'string';
-    const title = (() => {
-        if (titleProp === undefined && isTextContent) {
-            return children;
-        }
-        return titleProp;
-    })();
-    let startSlot = null;
-    let endSlot = null;
-    const startSlotClassName = cls(START_SLOT, `${size}-start-slot`, `${variant}-${size}-start-slot`);
-    const endSlotClassName = cls(END_SLOT, `${size}-end-slot`, `${variant}-${size}-end-slot`);
-    if (loading) {
-        startSlot = (jsx(CircularProgressIndicator, { className: clsx(startSlotClassName, cls('loading-indicator')), variant: "indeterminate", size: CircularProgressIndicatorSizeMap[size], color: CircularProgressIndicatorColorMap[color], ...CircularProgressIndicatorProps }));
-    }
-    else if (startIcon) {
-        if (React.isValidElement(startIcon)) {
-            startSlot = React.cloneElement(startIcon, {
-                className: clsx(startSlotClassName, startIcon.props.className),
-            });
-        }
-        else {
-            startSlot = (jsx(Icon, { className: startSlotClassName, symbol: startIcon, size: buttonIconSizeMap[size] }));
-        }
-    }
-    if (React.isValidElement(endIcon)) {
-        endSlot = React.cloneElement(endIcon, {
-            className: clsx(endSlotClassName, endIcon.props.className),
-        });
-    }
-    else if (endIcon) {
-        endSlot = (jsx(Icon, { className: endSlotClassName, symbol: endIcon, size: buttonIconSizeMap[size] }));
-    }
-    return (jsxs(ButtonRoot, { className: cls('root', variant, color, size, `${variant}-${color}`, `${variant}-${size}`, !background && 'hide-background', !background && `${variant}-hide-background`, startSlot && 'has-start-slot', endSlot && 'has-end-slot', fullWidth && 'full-width', {
-            disabled: disabledProp,
-            focusVisible,
-            loading,
-        }), title: title, ...rest, ...getRootProps(), children: [startSlot, isTextContent ? (jsx("span", { className: cls('content'), children: children })) : (children), endSlot] }));
-}));
-Button.displayName = 'SuiButton';
-
-export { Button as B, buttonIconSizeMap as b };

package/chunks/Chip.js

@@ -1,73 +0,0 @@
-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) => {
-        event.stopPropagation();
-        if (onDelete) {
-            onDelete(event);
-        }
-    };
-    const handleKeyDown = (event) => {
-        if (event.currentTarget === event.target &&
-            isDeleteKeyboardEvent(event)) {
-            event.preventDefault();
-        }
-        if (onKeyDown) {
-            onKeyDown(event);
-        }
-    };
-    const handleKeyUp = (event) => {
-        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

@@ -1,36 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-
-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') {
-        content = (jsx("span", { className: cls('outer-circle', `${variant}-outer-circle`), children: jsx("span", { className: cls('inner-circle', `${variant}-inner-circle`) }) }));
-    }
-    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)" }) }));
-    }
-    const { className: progressBarClassName, ...restProgressBarProps } = progressBarProps;
-    return (jsx("span", { className: clsx(cls('root', variant, size, color, `${variant}-${size}`, `${variant}-${color}`), progressBarClassName), ...rest, ...restProgressBarProps, role: "progressbar", ref: ref, children: content }));
-});
-CircularProgressIndicator.displayName = 'SuiProgressIndicator';
-
-export { CircularProgressIndicator as C };

package/chunks/Divider.js

@@ -1,19 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,33 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { motion } from 'framer-motion';
-import { useClasses, useForkRef } 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';
-
-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', 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'],
-    });
-    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: 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';
-
-export { Drawer as D };

package/chunks/ExpandCollapseCaret.js

@@ -1,24 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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 = getRootProps({
-        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,
-        ...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

@@ -1,22 +0,0 @@
-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

@@ -1,83 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useEffect } from 'react';
-import { useFocusVisible, useActive, useHover, combineProps, useForkRef } from '@ringcentral/spring-base';
-import { motionTransition, useThemeProps, useClassesWithMode } 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 = useClassesWithMode('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,
-        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();
-        }
-    }, []);
-    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

@@ -1,61 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useMemo, forwardRef } from 'react';
-import { useEventCallback } from '@ringcentral/spring-base';
-import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
-import { a as useNestedParentMenu, N as NestedMenuContext } from './useNestedParentMenu.js';
-import { P as Popover } from './Popover.js';
-
-const overlayContainerStyle = {
-    display: 'contents',
-};
-const MenuOverlayGroupContext = createContext(null);
-const useMenuOverlayGroupContext = () => useContext(MenuOverlayGroupContext);
-const useMenuOverlayGroupValue = () => {
-    const [container, setContainer] = useState(null);
-    const value = useMemo(() => ({ container }), [container]);
-    return {
-        setContainer,
-        value,
-    };
-};
-const MenuOverlayGroupContainer = (props) => {
-    const { setContainer } = props;
-    return (jsx("div", { "data-sui-menu-overlay-container": "", ref: setContainer, style: overlayContainerStyle }));
-};
-
-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 = useClassesWithMode('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 { contentClickHandlers, contentPointerHandlers, contextValue } = useNestedParentMenu({
-        open,
-    });
-    const { setContainer: setOverlayContainer, value: overlayGroupValue } = useMenuOverlayGroupValue();
-    const closeHandler = useEventCallback(() => {
-        onClose?.(undefined, 'Other');
-    });
-    const menuContextValue = useMemo(() => {
-        const effectiveAutoFocus = open ? autoFocus : false;
-        return { close: closeHandler, autoFocus: effectiveAutoFocus };
-    }, [autoFocus, closeHandler, open]);
-    return (jsx(Popover, { bordered: true, className: cls('root'), PopperProps: { ...PopperProps, padding: popperPadding }, ...rest, open: open, onClose: (e, reason) => {
-            onClose?.(e, reason);
-        }, ref: ref, children: jsxs(MenuOverlayGroupContext.Provider, { value: overlayGroupValue, children: [jsx("div", { className: cls('paper'), onClickCapture: contentClickHandlers.onClickCapture, onPointerMove: contentPointerHandlers.onPointerMove, children: jsx(MenuContext.Provider, { value: menuContextValue, children: jsx(NestedMenuContext.Provider, { value: contextValue, children: children }) }) }), jsx(MenuOverlayGroupContainer, { setContainer: setOverlayContainer })] }) }));
-});
-Menu.displayName = 'SuiMenu';
-
-export { Menu as M, MenuContext as a, useMenuOverlayGroupContext as b, useMenuContext as u };

package/chunks/MenuDivider.js

@@ -1,14 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useThemeProps, useClassesWithMode } 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 = useClassesWithMode('menu-divider', classes, className);
-    return jsx(Divider, { className: cls('root'), ...rest, ref: ref });
-});
-MenuDivider.displayName = 'SuiMenuDivider';
-
-export { MenuDivider as M };

package/chunks/MenuItemText.js

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