@ringcentral/spring-ui 1.7.0

package/Step.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { useClasses, useId } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { b as useStepperContext, S as StepContext } from './chunks/StepperContext.js';
+export { u as useStepContext } from './chunks/StepperContext.js';
+
+var Step$1 = {"sui-step-root":"sui-step-root","sui-step-horizontal":"sui-step-horizontal","sui-step-button":"sui-step-button","sui-step-vertical":"sui-step-vertical","sui-step-vertical-hide-connector":"sui-step-vertical-hide-connector","sui-step-fixed-width":"sui-step-fixed-width"};
+
+const Step = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Step' });
+    const { component: StepRoot = 'li', classes, className, children, active: activeProp, completed: completedProp, disabled: disabledProp, variant = 'contained', expanded = false, index = 0, last, id, ...rest } = props;
+    const cls = useClasses('step', classes, className);
+    const { activeStep = 0, connector, orientation, nonLinear, fixedStepWidth, } = useStepperContext();
+    let [active = false, completed = false, disabled = false] = [
+        activeProp,
+        completedProp,
+        disabledProp,
+    ];
+    if (activeStep === index) {
+        active = activeProp !== undefined ? activeProp : true;
+    }
+    else if (!nonLinear && activeStep > index) {
+        completed = completedProp !== undefined ? completedProp : true;
+    }
+    else if (!nonLinear && activeStep < index) {
+        disabled = disabledProp !== undefined ? disabledProp : true;
+    }
+    const stepLabelId = useId(id);
+    const contextValue = useMemo(() => ({
+        index,
+        last,
+        expanded,
+        icon: index + 1,
+        active,
+        completed,
+        disabled,
+        variant,
+        id: stepLabelId,
+        connector,
+    }), [
+        index,
+        last,
+        expanded,
+        connector,
+        active,
+        completed,
+        disabled,
+        variant,
+        stepLabelId,
+    ]);
+    return (jsxs(StepContext.Provider, { value: contextValue, children: [connector &&
+                orientation === 'horizontal' &&
+                !fixedStepWidth &&
+                index !== 0
+                ? connector
+                : null, jsx(StepRoot, { className: cls('root', orientation, {
+                    completed,
+                    'fixed-width': fixedStepWidth,
+                    'vertical-hide-connector': orientation === 'vertical' && !connector,
+                }), "aria-disabled": disabled, ...rest, ref: ref, children: children })] }));
+});
+Step.displayName = 'SuiStep';
+
+export { Step, StepContext, Step$1 as stepStyle };

package/StepButton.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, cloneElement } from 'react';
+import { useButton } from '@mui/base';
+import { useClasses, isSuiElement, combineProps } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { b as useStepperContext, u as useStepContext } from './chunks/StepperContext.js';
+import { S as StepLabel } from './chunks/StepLabel.js';
+import 'clsx';
+import './chunks/StepIcon.js';
+import '@ringcentral/spring-icon';
+import './chunks/Icon.js';
+
+var StepButton$1 = {"sui-step-button-root":"sui-step-button-root","sui-active":"sui-active","sui-focus-visible":"sui-focus-visible","sui-step-button-vertical":"sui-step-button-vertical","sui-step-button-horizontal":"sui-step-button-horizontal","sui-step-button-fixed-width":"sui-step-button-fixed-width","sui-step-button-highlighted":"sui-step-button-highlighted","sui-step-button-hide-connector":"sui-step-button-hide-connector"};
+
+const StepButton = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'StepButton' });
+    const { component: StepButtonRoot = 'button', classes, className, children, icon, symbol, optional, StepLabelProps, ...rest } = props;
+    const cls = useClasses('step-button', classes, className);
+    const { getRootProps, focusVisible, active } = useButton({
+        ...props,
+        rootRef: ref,
+    });
+    const { orientation, fixedStepWidth, connector } = useStepperContext();
+    const { disabled, active: activeStep, variant } = useStepContext();
+    const childProps = {
+        icon,
+        symbol,
+        optional,
+    };
+    const child = isSuiElement(children, ['SuiStepLabel']) ? (cloneElement(children, childProps)) : (jsx(StepLabel, { ...combineProps(childProps, StepLabelProps), children: children }));
+    return (jsx(StepButtonRoot, { disabled: disabled, "aria-current": activeStep ? 'step' : undefined, className: cls('root', orientation, {
+            focusVisible,
+            'fixed-width': fixedStepWidth,
+            active,
+            highlighted: activeStep && variant === 'outlined',
+            'hide-connector': !connector,
+        }), ...getRootProps(), ...rest, ref: ref, children: child }));
+});
+StepButton.displayName = 'SuiStepButton';
+
+export { StepButton, StepButton$1 as stepButtonStyle };

package/StepConnector.js

@@ -0,0 +1,10 @@
+export { S as StepConnector } from './chunks/StepConnector.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import './chunks/StepperContext.js';
+
+var StepConnector = {"sui-step-connector-root":"sui-step-connector-root","sui-step-connector-horizontal":"sui-step-connector-horizontal","sui-step-label":"sui-step-label","sui-step-connector-vertical":"sui-step-connector-vertical","sui-step-connector-line":"sui-step-connector-line","sui-step-connector-line-horizontal":"sui-step-connector-line-horizontal","sui-step-connector-line-vertical":"sui-step-connector-line-vertical","sui-step-button":"sui-step-button"};
+
+export { StepConnector as stepConnectorStyle };

package/StepContent.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useClasses, logInDev, useEver } from '@ringcentral/spring-base';
+import { useThemeProps, motionTransition } from '@ringcentral/spring-theme';
+import './chunks/Icon.js';
+import { u as useMotionSafeTransition } from './chunks/useMotionSafeTransition.js';
+import { b as useStepperContext, u as useStepContext } from './chunks/StepperContext.js';
+import './chunks/usePrefersReducedMotion.js';
+
+var StepContent$1 = {"sui-step-content-root":"sui-step-content-root","sui-step-content-wrapper":"sui-step-content-wrapper","sui-step-connector-root":"sui-step-connector-root","sui-step-content-last":"sui-step-content-last"};
+
+const StepContent = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'StepContent' });
+    const { classes, className, children, keepMounted, ...rest } = props;
+    const cls = useClasses('step-content', classes, className);
+    const { orientation } = useStepperContext();
+    const { disabled, active, last, expanded: expandedProp, connector, id, } = useStepContext();
+    const expandedTransition = useMotionSafeTransition(motionTransition['spring-01-fast']);
+    const collapsedTransition = useMotionSafeTransition(motionTransition['spring-01-slow']);
+    const collapsedHeightTransition = useMotionSafeTransition(motionTransition['haste-01-slow']);
+    if (process.env.NODE_ENV !== 'production' && orientation !== 'vertical') {
+        logInDev({
+            scope: 'AvatarGroup',
+            level: 'error',
+            message: '<StepContent /> is only designed for use with the vertical stepper.',
+        });
+    }
+    const expanded = expandedProp || (active && !disabled);
+    const isEverShown = useEver(expanded);
+    const keepAlive = keepMounted && isEverShown;
+    const motionVariants = {
+        expanded: {
+            transition: expandedTransition,
+            opacity: 1,
+            height: 'auto',
+            paddingTop: 12,
+        },
+        collapsed: {
+            transition: {
+                ...collapsedTransition,
+                height: collapsedHeightTransition,
+            },
+            opacity: 0,
+            height: 0,
+            paddingTop: 0,
+        },
+    };
+    return (jsx("div", { className: cls('root', { expanded, last }), ...rest, ref: ref, children: jsx(AnimatePresence, { initial: false, children: (expanded || keepAlive) && (jsxs(motion.div, { className: cls('wrapper'), "aria-labelledby": id, initial: "collapsed", animate: expanded ? 'expanded' : 'collapsed', exit: "collapsed", variants: motionVariants, children: [children, connector] })) }) }));
+});
+StepContent.displayName = 'SuiStepContent';
+
+export { StepContent, StepContent$1 as stepContentStyle };

package/StepIcon.js

@@ -0,0 +1,11 @@
+export { S as StepIcon } from './chunks/StepIcon.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-icon';
+import '@ringcentral/spring-theme';
+import './chunks/Icon.js';
+
+var StepIcon = {"sui-step-icon-root":"sui-step-icon-root","sui-completed":"sui-completed","sui-step-icon-current":"sui-step-icon-current","sui-disabled":"sui-disabled","sui-step-icon-error":"sui-step-icon-error","sui-step-icon-outlined":"sui-step-icon-outlined","sui-step-icon-outlined-current":"sui-step-icon-outlined-current","sui-step-icon-outlined-error":"sui-step-icon-outlined-error","sui-step-icon-text":"sui-step-icon-text","sui-step-icon-text-current":"sui-step-icon-text-current"};
+
+export { StepIcon as stepIconStyle };

package/StepLabel.js

@@ -0,0 +1,14 @@
+export { S as StepLabel } from './chunks/StepLabel.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import 'clsx';
+import './chunks/StepperContext.js';
+import './chunks/StepIcon.js';
+import '@ringcentral/spring-icon';
+import './chunks/Icon.js';
+
+var StepLabel = {"sui-step-label-root":"sui-step-label-root","sui-step-label-label":"sui-step-label-label","sui-completed":"sui-completed","sui-disabled":"sui-disabled","sui-step-label-icon-container":"sui-step-label-icon-container","sui-step-label-label-container":"sui-step-label-label-container","sui-step-label-horizontal":"sui-step-label-horizontal","sui-step-label-horizontal-label":"sui-step-label-horizontal-label","sui-step-label-horizontal-label-container":"sui-step-label-horizontal-label-container","sui-step-label-vertical":"sui-step-label-vertical","sui-step-label-vertical-icon-container":"sui-step-label-vertical-icon-container","sui-step-label-current-label":"sui-step-label-current-label","sui-step-label-error-label":"sui-step-label-error-label","sui-step-label-error-label-container":"sui-step-label-error-label-container","sui-step-label":"sui-step-label"};
+
+export { StepLabel as stepLabelStyle };

package/Stepper.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, Children, cloneElement, useMemo } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { S as StepConnector } from './chunks/StepConnector.js';
+import { a as StepperContext } from './chunks/StepperContext.js';
+export { b as useStepperContext } from './chunks/StepperContext.js';
+
+var Stepper$1 = {"sui-stepper-root":"sui-stepper-root","sui-stepper-horizontal":"sui-stepper-horizontal","sui-stepper-vertical":"sui-stepper-vertical","sui-stepper-fixed-step-width":"sui-stepper-fixed-step-width"};
+
+const defaultConnector = jsx(StepConnector, {});
+const Stepper = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Stepper' });
+    const { component, classes, className, children, activeStep = 0, connector = defaultConnector, nonLinear = false, orientation = 'horizontal', fixedStepWidth = true, ...rest } = props;
+    const cls = useClasses('stepper', classes, className);
+    const defaultComponent = nonLinear ? 'ul' : 'ol';
+    const [StepperRoot = defaultComponent] = [component];
+    const childrenArray = Children.toArray(children).filter(Boolean);
+    const steps = childrenArray.map((step, index) => {
+        if (typeof step === 'string') {
+            return step;
+        }
+        const stepElement = step;
+        return cloneElement(stepElement, {
+            index,
+            last: index + 1 === childrenArray.length,
+            ...stepElement.props,
+        });
+    });
+    const contextValue = useMemo(() => ({ activeStep, connector, nonLinear, orientation, fixedStepWidth }), [activeStep, connector, fixedStepWidth, nonLinear, orientation]);
+    return (jsx(StepperContext.Provider, { value: contextValue, children: jsx(StepperRoot, { className: cls('root', orientation, {
+                'fixed-step-width': fixedStepWidth,
+            }), ...rest, ref: ref, children: steps }) }));
+});
+Stepper.displayName = 'SuiStepper';
+
+export { Stepper, StepperContext, Stepper$1 as stepperStyle };

package/SubMenu.js

@@ -0,0 +1,142 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { useClasses, useForkRef, useHover, useFocusVisible, useId, useOnLayoutReRender } from '@ringcentral/spring-base';
+import { a as useNestedParentMenu, N as NestedMenuContext } from './chunks/useNestedParentMenu.js';
+import { Popper } from './Popper.js';
+import { CaretRightMd } from '@ringcentral/spring-icon';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { I as Icon } from './chunks/Icon.js';
+import { M as MenuItem } from './chunks/useMenuItemSelect.js';
+import 'tabbable';
+import './chunks/useListNavigation.js';
+import './chunks/Menu.js';
+import './VirtualizedList.js';
+import { useNestedChildMenu } from './NestedMenuContext.js';
+import { u as useNestedMenuItem } from './chunks/useNestedMenuItem.js';
+import { M as MenuItemText } from './chunks/MenuItemText.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import '@mui/base';
+import 'framer-motion';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getFade.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './ListNavigation.js';
+import './chunks/Popover.js';
+import './chunks/getGrow.js';
+import './chunks/PopperPaper.js';
+import 'react-virtuoso';
+import './chunks/List.js';
+
+var PopperMenu$1 = {"sui-popper-menu-root":"sui-popper-menu-root","sui-popper-menu-paper":"sui-popper-menu-paper"};
+
+const PopperMenu = forwardRef((props, ref) => {
+    const { classes, children, actions, className, ...rest } = props;
+    const cls = useClasses('popper-menu', classes, className);
+    const { contextValue } = useNestedParentMenu({
+        open: true,
+    });
+    return (jsx(Popper, { className: cls('root'), ...rest, ref: ref, children: jsx("div", { className: cls('paper'), children: jsx(NestedMenuContext.Provider, { value: contextValue, children: children }) }) }));
+});
+PopperMenu.displayName = 'SuiPopperMenu';
+
+const SubMenu = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'SubMenu' });
+    const { classes, children, itemContent, onKeyDown: onKeyDownProp, ...rest } = props;
+    const [menuMounted, setMenuMounted] = useState(false);
+    const [anchor, setAnchor] = useState(null);
+    const itemRef = useRef(null);
+    const handleRef = useForkRef(itemRef, ref);
+    const open = Boolean(anchor);
+    const closeSubMenu = () => {
+        setAnchor(null);
+    };
+    const { hover: anchorHover, hoverHandlers: anchorHoverHandlers } = useHover({
+        disableReactTree: false,
+        onMouseEnter: (e) => {
+            setAnchor(e.currentTarget);
+        },
+    });
+    const anchorHoverEverRef = useRef(false);
+    if (anchorHoverEverRef.current !== true) {
+        anchorHoverEverRef.current = anchorHover;
+    }
+    const { hover: menuHover, hoverHandlers: menuHoverHandlers } = useHover();
+    const menuHoverEverRef = useRef(false);
+    if (menuHoverEverRef.current !== true) {
+        menuHoverEverRef.current = menuHover;
+    }
+    const { focusVisibleWithin, focusVisibleHandlers } = useFocusVisible({
+        within: true,
+    });
+    const id = useId();
+    useNestedMenuItem({ hovered: anchorHover, id });
+    useNestedChildMenu({
+        open,
+        closeMenu: () => {
+            closeSubMenu();
+        },
+        id,
+    });
+    const shouldKeepMenu = (() => {
+        if (!open)
+            return false;
+        // Check `menuMounted` to ensure the state of menu is correct
+        if (open && !menuMounted)
+            return true;
+        let shouldKeepMenu = false;
+        if (focusVisibleWithin) {
+            shouldKeepMenu = true;
+        }
+        if ((!menuHover && menuHoverEverRef.current) ||
+            (!anchorHover && anchorHoverEverRef.current)) {
+            shouldKeepMenu = false;
+        }
+        if (menuHover || anchorHover) {
+            shouldKeepMenu = true;
+        }
+        return shouldKeepMenu;
+    })();
+    useEffect(() => {
+        if (!shouldKeepMenu) {
+            closeSubMenu();
+        }
+        return undefined;
+    }, [shouldKeepMenu]);
+    useOnLayoutReRender(() => {
+        if (!open) {
+            itemRef.current?.focus();
+        }
+    }, [open]);
+    useEffect(() => {
+        if (!open) {
+            setMenuMounted(false);
+            menuHoverEverRef.current = false;
+            anchorHoverEverRef.current = false;
+        }
+    }, [open]);
+    return (jsxs(Fragment, { children: [jsxs(MenuItem, { autoClose: false, ...rest, onKeyDown: (e) => {
+                    onKeyDownProp?.(e);
+                    if (e.key === 'ArrowRight') {
+                        setAnchor(e.currentTarget);
+                    }
+                }, ...anchorHoverHandlers, ref: handleRef, children: [typeof itemContent === 'string' ? (jsx(MenuItemText, { children: itemContent })) : (itemContent), jsx(Icon, { symbol: CaretRightMd })] }), open && (jsx(PopperMenu, { anchorEl: anchor, placement: "right-start", offset: -4, whileElementsMounted: () => {
+                    setMenuMounted(true);
+                    // eslint-disable-next-line @typescript-eslint/no-empty-function
+                    return () => { };
+                }, onKeyDown: (e) => {
+                    if ((e.key === 'ArrowLeft' || e.key === 'Escape') &&
+                        // make sure target is real dom child
+                        e.currentTarget.contains(e.target)) {
+                        // If Escape key is pressed, stop propagation to prevent parent menus from closing
+                        if (e.key === 'Escape') {
+                            e.stopPropagation();
+                        }
+                        closeSubMenu();
+                    }
+                }, ...menuHoverHandlers, ...focusVisibleHandlers, children: children }))] }));
+});
+SubMenu.displayName = 'SuiSubMenu';
+
+export { PopperMenu, SubMenu, PopperMenu$1 as popperMenuStyle };