@ringcentral/spring-ui 1.11.2 → 1.13.0

package/StepContent.js

@@ -1,30 +1,46 @@
-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' });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { logInDev, useClasses, useEver } from "@ringcentral/spring-base";
+import { motionTransition, useThemeProps } from "@ringcentral/spring-theme";
+import "./chunks/4476.js";
+import { useStepContext, useStepperContext } from "./chunks/2956.js";
+import { useMotionSafeTransition } from "./chunks/1294.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var StepContent = ({"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_StepContent = /*#__PURE__*/ 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 transition = useMotionSafeTransition(motionTransition['haste-01-fast']);
+    const { disabled, active, last, expanded: expandedProp, connector, id } = useStepContext();
+    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.',
+            message: '<StepContent /> is only designed for use with the vertical stepper.'
         });
     }
-    const expanded = expandedProp || (active && !disabled);
+    const expanded = expandedProp || active && !disabled;
     const isEverShown = useEver(expanded);
     const keepAlive = keepMounted && isEverShown;
     const motionVariants = {
@@ -32,17 +48,44 @@ const StepContent = forwardRef((inProps, ref) => {
             transition,
             opacity: 1,
             height: 'auto',
-            paddingTop: 12,
+            paddingTop: 12
         },
         collapsed: {
             transition,
             opacity: 0,
             height: 0,
-            paddingTop: 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] })) }) }));
+    return /*#__PURE__*/ jsx("div", {
+        className: cls('root', {
+            expanded,
+            last
+        }),
+        ...rest,
+        ref: ref,
+        children: /*#__PURE__*/ jsx(AnimatePresence, {
+            initial: false,
+            children: (expanded || keepAlive) && /*#__PURE__*/ 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';
+StepContent_StepContent.displayName = 'SuiStepContent';
+
+
+
+
+
 
-export { StepContent, StepContent$1 as stepContentStyle };
+export { StepContent as stepContentStyle, StepContent_StepContent as StepContent };

package/StepIcon.js

@@ -1,11 +1,92 @@
-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';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { AlertFilledMd, AlertMd, CheckBoldMd, CheckMd } from "@ringcentral/spring-icon";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { Icon as Icon_Icon } from "./chunks/8307.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 };
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ 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"});
+
+
+
+
+
+
+
+const StepIcon_StepIcon = /*#__PURE__*/ forwardRef(// @ts-ignore
+(inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'StepIcon'
+    });
+    const { classes, className, children, active = false, completed = false, error = false, disabled = false, variant = 'contained', icon, symbol, ...rest } = props;
+    const cls = useClasses('step-icon', classes, className);
+    if (symbol) {
+        return /*#__PURE__*/ jsx("span", {
+            className: cls('root', variant, error && `${variant}-error`, active && `${variant}-current`, {
+                current: active,
+                completed,
+                error,
+                disabled
+            }),
+            ...rest,
+            ref: ref,
+            children: /*#__PURE__*/ jsx(Icon_Icon, {
+                className: cls('icon'),
+                size: "xsmall",
+                symbol: symbol
+            })
+        });
+    }
+    if (typeof icon === 'number' || typeof icon === 'string') {
+        let content;
+        if (error) {
+            content = /*#__PURE__*/ jsx(Icon_Icon, {
+                className: cls('icon'),
+                size: "large",
+                symbol: variant === 'contained' ? AlertFilledMd : AlertMd
+            });
+        } else if (completed) {
+            content = variant === 'contained' ? /*#__PURE__*/ jsx(Icon_Icon, {
+                className: cls('icon'),
+                size: "xsmall",
+                symbol: CheckBoldMd
+            }) : /*#__PURE__*/ jsx(Icon_Icon, {
+                className: cls('icon'),
+                size: "large",
+                symbol: CheckMd
+            });
+        } else {
+            content = /*#__PURE__*/ jsx("span", {
+                className: cls('text', active && 'text-current'),
+                children: icon
+            });
+        }
+        return /*#__PURE__*/ jsx("span", {
+            className: cls('root', variant, error && `${variant}-error`, active && `${variant}-current`, {
+                current: active,
+                completed,
+                error,
+                disabled
+            }),
+            ...rest,
+            ref: ref,
+            children: content
+        });
+    }
+    return icon;
+});
+StepIcon_StepIcon.displayName = 'SuiStepIcon';
+
+
+
+
+
+
+export { StepIcon as stepIconStyle, StepIcon_StepIcon as StepIcon };

package/StepLabel.js

@@ -1,14 +1,90 @@
-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 };
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import clsx from "clsx";
+import { useStepContext, useStepperContext } from "./chunks/2956.js";
+import { StepIcon as StepIcon_StepIcon } from "./StepIcon.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ 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"});
+
+
+
+
+
+
+
+
+
+const StepLabel_StepLabel = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'StepLabel'
+    });
+    const { classes, className, children, error = false, icon: iconProp, optional, labelProps = {}, StepIconComponent: StepIconComponentProp, StepIconProps, ...rest } = props;
+    const cls = useClasses('step-label', classes, className);
+    const { orientation = 'horizontal' } = useStepperContext();
+    const { active, disabled, completed, icon: iconContext, id, connector, index, last, variant } = useStepContext();
+    const icon = iconProp || iconContext;
+    let StepIconComponent = StepIconComponentProp;
+    if (icon && !StepIconComponent) {
+        StepIconComponent = StepIcon_StepIcon;
+    }
+    return /*#__PURE__*/ jsxs("span", {
+        id: id,
+        className: cls('root', orientation, {
+            current: active,
+            completed,
+            disabled,
+            error
+        }),
+        ...rest,
+        ref: ref,
+        children: [
+            index !== 0 ? connector : null,
+            StepIconComponent ? /*#__PURE__*/ jsx("span", {
+                className: cls('icon-container', `${orientation}-icon-container`),
+                children: /*#__PURE__*/ jsx(StepIconComponent, {
+                    completed: completed,
+                    active: active,
+                    error: error,
+                    disabled: disabled,
+                    icon: icon,
+                    variant: variant,
+                    ...StepIconProps
+                })
+            }) : null,
+            /*#__PURE__*/ jsxs("span", {
+                className: cls('label-container', `${orientation}-label-container`, error && 'error-label-container', {
+                    disabled
+                }),
+                children: [
+                    children ? /*#__PURE__*/ jsx("span", {
+                        ...labelProps,
+                        className: clsx(cls('label', `${orientation}-label`, active && 'current-label', error && 'error-label', {
+                            disabled,
+                            completed
+                        }), labelProps?.className),
+                        children: children
+                    }) : null,
+                    optional
+                ]
+            }),
+            !last ? connector : null
+        ]
+    });
+});
+StepLabel_StepLabel.displayName = 'SuiStepLabel';
+
+
+
+
+
+
+export { StepLabel as stepLabelStyle, StepLabel_StepLabel as StepLabel };

package/Stepper.js

@@ -1,37 +1,79 @@
-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' });
+import { jsx } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, useMemo } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { StepConnector as StepConnector_StepConnector } from "./StepConnector.js";
+import { StepperContext } from "./chunks/2956.js";
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Stepper = ({"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 = /*#__PURE__*/ jsx(StepConnector_StepConnector, {});
+const Stepper_Stepper = /*#__PURE__*/ 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 [StepperRoot = defaultComponent] = [
+        component
+    ];
     const childrenArray = Children.toArray(children).filter(Boolean);
-    const steps = childrenArray.map((step, index) => {
+    const steps = childrenArray.map((step, index)=>{
         if (typeof step === 'string') {
             return step;
         }
         const stepElement = step;
-        return cloneElement(stepElement, {
+        return /*#__PURE__*/ cloneElement(stepElement, {
             index,
             last: index + 1 === childrenArray.length,
-            ...stepElement.props,
+            ...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 }) }));
+    const contextValue = useMemo(()=>({
+            activeStep,
+            connector,
+            nonLinear,
+            orientation,
+            fixedStepWidth
+        }), [
+        activeStep,
+        connector,
+        fixedStepWidth,
+        nonLinear,
+        orientation
+    ]);
+    return /*#__PURE__*/ jsx(StepperContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(StepperRoot, {
+            className: cls('root', orientation, {
+                'fixed-step-width': fixedStepWidth
+            }),
+            ...rest,
+            ref: ref,
+            children: steps
+        })
+    });
 });
-Stepper.displayName = 'SuiStepper';
+Stepper_Stepper.displayName = 'SuiStepper';
+
+
+
+
+
+
 
-export { Stepper, StepperContext, Stepper$1 as stepperStyle };
+export { Stepper as stepperStyle, Stepper_Stepper as Stepper };
+export { StepperContext, useStepperContext } from "./chunks/2956.js";