@ringcentral/spring-ui 1.12.0 → 1.13.0

package/chunks/ShowHideEye.js

@@ -1,56 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useClasses } from '@ringcentral/spring-base';
-import { motionTransition } from '@ringcentral/spring-theme';
-import { motion } from 'framer-motion';
-import { I as Icon } from './Icon.js';
-import 'react';
-import { u as useMotionSafeTransition } from './useMotionSafeTransition.js';
-
-const topEyelidVariants = {
-    show: {
-        d: 'M 17.5 12.25 C 16.75 10.25 13.8 7 10 7 C 6.2 7 3.25 10.25 2.5 12.25',
-    },
-    hide: {
-        d: 'M 17.5 6.75 C 16.75 8.75 14 12.2 10 12.2 C 6 12.2 3.25 8.75 2.5 6.75',
-    },
-};
-const bottomEyelidVariants = {
-    show: {
-        d: 'M 17.5 11.75 C 16.75 13.75 13.8 17 10 17 C 6.2 17 3.25 13.75 2.5 11.75',
-    },
-    hide: {
-        d: 'M 17.5 6.75 C 16.75 8.75 14 12.2 10 12.2 C 6 12.2 3.25 8.75 2.5 6.75',
-    },
-};
-const eyelashVariants = {
-    show: {
-        d: 'M 10 4.5 L 10 1.5 M 4 6.35 L 2.5 3.7 M 16 6.35 L 17.5 3.7',
-    },
-    hide: {
-        d: 'M 10 15.5 L 10 18.5 M 16 13.75 L 17.5 16.4 M 4 13.75 L 2.5 16.4',
-    },
-};
-const ShowHideEye = (props) => {
-    const { classes, size = 'medium', hide = false, className, ...rest } = props;
-    const cls = useClasses('show-hide-eye', classes, className);
-    const transition = useMotionSafeTransition(motionTransition['spring-01-fast']);
-    const pupilShowTransition = useMotionSafeTransition({
-        delay: 0.05,
-    });
-    const pupilHideTransition = useMotionSafeTransition({
-        duration: 0.1,
-    });
-    const pupilVariants = {
-        show: {
-            ry: 3.75,
-            transition: pupilShowTransition,
-        },
-        hide: {
-            ry: 0,
-            transition: pupilHideTransition,
-        },
-    };
-    return (jsx(Icon, { ...rest, size: size, className: cls('root'), children: jsxs(motion.svg, { xmlns: "http://www.w3.org/2000/svg", viewBox: '0 0 20 20', animate: hide ? 'hide' : 'show', transition: transition, children: [jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', strokeLinecap: 'butt', variants: topEyelidVariants, transition: transition, fill: "transparent" }), jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', strokeLinecap: 'butt', variants: bottomEyelidVariants, transition: transition, fill: "transparent" }), jsx(motion.ellipse, { initial: false, cx: 10, cy: 10.5, rx: 3.75, fill: "currentColor", variants: pupilVariants }), jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', strokeLinecap: 'butt', variants: eyelashVariants, transition: transition, fill: "transparent" })] }) }));
-};
-
-export { ShowHideEye as S };

package/chunks/SlideIn.js

@@ -1,20 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { motion } from 'framer-motion';
-import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
-import '@ringcentral/spring-theme';
-import { g as getSlideIn } from './getSlideIn.js';
-
-const SlideIn = (props) => {
-    const { toggle, toggleOnTransition, toggleOffTransition, transition, children, from = 'right', ...rest } = props;
-    const prefersReducedMotion = usePrefersReducedMotion();
-    return (jsx(motion.div, { ...getSlideIn({
-            toggle,
-            from,
-            prefersReducedMotion,
-            toggleOnTransition,
-            toggleOffTransition,
-            transition,
-        }), ...rest, children: children }));
-};
-
-export { SlideIn as S };

package/chunks/SortableArrow.js

@@ -1,73 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useClasses } from '@ringcentral/spring-base';
-import { motion } from 'framer-motion';
-import { motionTransition } from '@ringcentral/spring-theme';
-import { I as Icon } from './Icon.js';
-import 'react';
-import { u as useMotionSafeTransition } from './useMotionSafeTransition.js';
-
-const topCaretVariants = {
-    initial: {
-        d: 'M 5 7.5 L 10 2.5 L 15 7.5',
-        opacity: 1,
-    },
-    asc: {
-        d: 'M 4.75 9.5 L 10 4 L 15.25 9.5',
-        opacity: 1,
-    },
-    desc: {
-        d: 'M 10 9.5 L 10 4.5 L 10 9.5',
-        opacity: 0,
-        transition: {
-            ease: 'easeOut',
-            duration: 0.15,
-        },
-    },
-};
-const topLineVariants = {
-    initial: {
-        d: 'M 10 2.5 L 10 2.5',
-        opacity: 0,
-    },
-    asc: {
-        d: 'M 10 4.5 L 10 15.5',
-        opacity: 1,
-    },
-};
-const bottomLineVariants = {
-    initial: {
-        d: 'M 10 17.5 L 10 17.5',
-        opacity: 0,
-    },
-    desc: {
-        d: 'M 10 15.5 L 10 4.5',
-        opacity: 1,
-    },
-};
-const bottomCaretVariants = {
-    initial: {
-        d: 'M 5 12.5 L 10 17.5 L 15 12.5',
-        opacity: 1,
-    },
-    asc: {
-        d: 'M 10 10.5 L 10 15.5 L 10 10.5',
-        opacity: 0,
-        transition: {
-            ease: 'easeOut',
-            duration: 0.15,
-        },
-    },
-    desc: {
-        d: 'M 4.75 10.5 L 10 16 L 15.25 10.5',
-        opacity: 1,
-    },
-};
-const SortableArrow = (props) => {
-    const { classes, size = 'medium', direction = false, className, ...rest } = props;
-    const cls = useClasses('sortable-arrow', classes, className);
-    const caretTransition = useMotionSafeTransition(motionTransition['spring-01-fast']);
-    const lineTransition = useMotionSafeTransition(motionTransition['neutral-01-fast']);
-    return (jsx(Icon, { ...rest, size: size, className: cls('root'), children: jsxs(motion.svg, { xmlns: "http://www.w3.org/2000/svg", viewBox: '0 0 20 20', animate: direction || 'initial', children: [jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', variants: topCaretVariants, transition: caretTransition, fill: "transparent" }), direction !== 'desc' && (jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: 'square', variants: topLineVariants, transition: lineTransition, fill: "transparent" })), direction !== 'asc' && (jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: 'square', variants: bottomLineVariants, transition: lineTransition, fill: "transparent" })), jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', variants: bottomCaretVariants, transition: caretTransition, fill: "transparent" })] }) }));
-};
-
-export { SortableArrow as S };

package/chunks/Squircle.js

@@ -1,31 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { forwardRef, isValidElement, cloneElement } from 'react';
-import { useClasses, useId } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-
-const SQUIRCLE_PATH = 'M 0.5 0 C 0.879 0 1 0.121 1 0.5 C 1 0.879 0.879 1 0.5 1 C 0.121 1 0 0.879 0 0.5 C 0 0.121 0.121 0 0.5 0 Z';
-const Squircle = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Squircle' });
-    const { component = 'div', focusVisible, active, children: childrenProp, className, classes, interactive = true, fillShape: fillShapeProp = false, ...rest } = props;
-    const children = React.Children.toArray(childrenProp);
-    const firstChild = children[0];
-    const fillShape = fillShapeProp &&
-        firstChild &&
-        isValidElement(firstChild);
-    const cls = useClasses('squircle', classes, className);
-    const clipId = useId('sui-squircle-clip', true);
-    const showFocusRing = interactive && focusVisible;
-    const Root = component;
-    return (jsxs(Root, { className: cls('root', { active, interactive }), ...rest, ref: ref, children: [jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0", viewBox: "0 0 1 1", style: { position: 'absolute' }, "aria-hidden": true, children: jsx("defs", { children: jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: jsx("path", { d: SQUIRCLE_PATH }) }) }) }), !fillShape && (jsx("svg", { className: cls('content'), xmlns: "http://www.w3.org/2000/svg", viewBox: '0 0 1 1', children: jsx("path", { clipPath: `url(#${clipId})`, d: SQUIRCLE_PATH, vectorEffect: "non-scaling-stroke" }) })), showFocusRing && (jsx("svg", { className: cls('ring'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1 1", overflow: "visible", children: jsx("path", { d: SQUIRCLE_PATH, fillOpacity: 0, vectorEffect: "non-scaling-stroke" }) })), fillShape
-                ? cloneElement(firstChild, {
-                    style: {
-                        ...firstChild.props.style,
-                        width: '100%',
-                        height: '100%',
-                        clipPath: `url(#${clipId})`,
-                    },
-                })
-                : children] }));
-});
-
-export { Squircle as S };

package/chunks/StatusIndicator.js

@@ -1,20 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useClasses } from '@ringcentral/spring-base';
-import { MinusBoldMd, CheckBoldSm } from '@ringcentral/spring-icon';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { I as Icon } from './Icon.js';
-
-const IconSizeMap = {
-    large: 'small',
-    medium: 'xsmall',
-    small: 'xsmall',
-};
-const StatusIndicator = (inProps) => {
-    const props = useThemeProps({ props: inProps, name: 'StatusIndicator' });
-    const { classes, className, size = 'medium', variant = 'available', ...rest } = props;
-    const cls = useClasses('status-indicator', classes, className);
-    return (jsxs("div", { className: cls('root', size, variant), ...rest, children: [variant === 'dnd' && (jsx(Icon, { symbol: MinusBoldMd, size: IconSizeMap[size] })), variant === 'available' && (jsx(Icon, { symbol: CheckBoldSm, size: IconSizeMap[size] }))] }));
-};
-StatusIndicator.displayName = 'SuiStatusIndicator';
-
-export { StatusIndicator as S };

package/chunks/StepConnector.js

@@ -1,21 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { b as useStepperContext, u as useStepContext } from './StepperContext.js';
-
-const StepConnector = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'StepConnector' });
-    const { classes, className, children, ...rest } = props;
-    const cls = useClasses('step-connector', classes, className);
-    const { orientation = 'horizontal' } = useStepperContext();
-    const { active, disabled, completed } = useStepContext();
-    return (jsx("div", { "aria-hidden": true, className: cls('root', orientation, {
-            active,
-            completed,
-            disabled,
-        }), ...rest, ref: ref, children: jsx("span", { className: cls('line', `line-${orientation}`) }) }));
-});
-StepConnector.displayName = 'SuiStepConnector';
-
-export { StepConnector as S };

package/chunks/StepIcon.js

@@ -1,43 +0,0 @@
-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 { I as Icon } from './Icon.js';
-
-const StepIcon = forwardRef((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 (jsx("span", { className: cls('root', variant, error && `${variant}-error`, active && `${variant}-current`, {
-                current: active,
-                completed,
-                error,
-                disabled,
-            }), ...rest, ref: ref, children: jsx(Icon, { className: cls('icon'), size: "xsmall", symbol: symbol }) }));
-    }
-    if (typeof icon === 'number' || typeof icon === 'string') {
-        let content;
-        if (error) {
-            content = (jsx(Icon, { className: cls('icon'), size: "large", symbol: variant === 'contained' ? AlertFilledMd : AlertMd }));
-        }
-        else if (completed) {
-            content =
-                variant === 'contained' ? (jsx(Icon, { className: cls('icon'), size: "xsmall", symbol: CheckBoldMd })) : (jsx(Icon, { className: cls('icon'), size: "large", symbol: CheckMd }));
-        }
-        else {
-            content = (jsx("span", { className: cls('text', active && 'text-current'), children: icon }));
-        }
-        return (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.displayName = 'SuiStepIcon';
-
-export { StepIcon as S };

package/chunks/StepLabel.js

@@ -1,29 +0,0 @@
-import { jsxs, jsx } 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 { b as useStepperContext, u as useStepContext } from './StepperContext.js';
-import { S as StepIcon } from './StepIcon.js';
-
-const StepLabel = 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;
-    }
-    return (jsxs("span", { id: id, className: cls('root', orientation, {
-            current: active,
-            completed,
-            disabled,
-            error,
-        }), ...rest, ref: ref, children: [index !== 0 ? connector : null, StepIconComponent ? (jsx("span", { className: cls('icon-container', `${orientation}-icon-container`), children: jsx(StepIconComponent, { completed: completed, active: active, error: error, disabled: disabled, icon: icon, variant: variant, ...StepIconProps }) })) : null, jsxs("span", { className: cls('label-container', `${orientation}-label-container`, error && 'error-label-container', { disabled }), children: [children ? (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.displayName = 'SuiStepLabel';
-
-export { StepLabel as S };

package/chunks/StepperContext.js

@@ -1,9 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const StepContext = createContext({});
-const useStepContext = () => useContext(StepContext);
-
-const StepperContext = createContext({});
-const useStepperContext = () => useContext(StepperContext);
-
-export { StepContext as S, StepperContext as a, useStepperContext as b, useStepContext as u };

package/chunks/TableContext.js

@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const TableContext = createContext({});
-const useTableContext = () => useContext(TableContext);
-
-export { TableContext as T, useTableContext as u };

package/chunks/Tablelvl2Context.js

@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const Tablelvl2Context = createContext({});
-const useTablelvl2Context = () => useContext(Tablelvl2Context);
-
-export { Tablelvl2Context as T, useTablelvl2Context as u };

package/chunks/TabsContext.js

@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const TabsContext = createContext({});
-const useTabsContext = () => useContext(TabsContext);
-
-export { TabsContext as T, useTabsContext as u };

package/chunks/TextField.js

@@ -1,110 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { useInput } from '@mui/base';
-import { useId, useClasses, useControlled, useEventCallback, combineProps, useForkRef } from '@ringcentral/spring-base';
-import { Xmd } from '@ringcentral/spring-icon';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import 'framer-motion';
-import './Icon.js';
-import { S as ShowHideEye } from './ShowHideEye.js';
-import { u as useHelperTextId, F as FormField } from './useHelperTextId.js';
-import { I as IconButton } from './IconButtonLabel.js';
-
-const TextFieldComponent = (inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'TextField' });
-    const { classes, className, clearBtn = true, clearText = 'clear', showCharacterCount = false, useNativeClearBtn = false, size, endAdornment, fullWidth, helperText: helperTextProp, inputProps, label, onClear, placeholder: placeholderProp, RootProps, startAdornment, type, variant = 'outlined', inputComponent: InputComponent = 'input', autoFocus, ClearButtonProps, id: idProp, onKeyDown, onKeyUp, readOnly, onClick, focused, FormHelperTextProps, showMaskValueToggleButton = type === 'password', maskValue: maskValueProps, MaskValueButtonProps, ShowHideEyeIconProps, } = props;
-    const placeholder = placeholderProp || ' ';
-    const defaultId = useId();
-    const id = idProp ?? inputProps?.id ?? defaultId;
-    const cls = useClasses('text-field', classes, className);
-    const { disabled, required, error, getInputProps } = useInput(props);
-    const states = { disabled, required, error, focused };
-    const idForHelperText = useHelperTextId({
-        helperText: helperTextProp,
-        id,
-        FormHelperTextProps,
-    });
-    const widgetProps = getInputProps({
-        'aria-describedby': idForHelperText,
-        ...inputProps,
-        placeholder,
-        id,
-        type,
-    });
-    const inputRef = useRef();
-    const handlerClear = (e) => {
-        if (disabled)
-            return;
-        const el = inputRef.current;
-        if (el) {
-            onClear?.(e);
-            const host = Object.getPrototypeOf(el);
-            Object.getOwnPropertyDescriptor(host, 'value')?.set?.call(el, '');
-            el.focus();
-            el.dispatchEvent(new InputEvent('input', { bubbles: true }));
-        }
-    };
-    let helperText = helperTextProp;
-    if (showCharacterCount &&
-        inputProps?.maxLength !== undefined &&
-        props.value !== undefined) {
-        helperText = (jsxs("div", { className: cls('helper-text'), children: [jsx("span", { children: helperText }), jsxs("span", { children: [props.value?.length ?? 0, "/", inputProps.maxLength] })] }));
-    }
-    const [maskValue, setMaskValue] = useControlled({
-        controlled: maskValueProps,
-        default: false,
-        name: 'TextField',
-        state: 'showPassword',
-    });
-    let inputType = type;
-    const shouldShowMaskToggleButton = showMaskValueToggleButton && type === 'password';
-    const isSearchInput = type === 'search';
-    const shouldHideNativeClear = isSearchInput && !useNativeClearBtn;
-    if (shouldShowMaskToggleButton) {
-        if (maskValue) {
-            inputType = 'text';
-        }
-        else {
-            inputType = 'password';
-        }
-    }
-    const handleMaskValueChange = useEventCallback(() => {
-        setMaskValue(!maskValue);
-        if (props.onMaskValueChange) {
-            props.onMaskValueChange(!maskValue);
-        }
-    });
-    return (jsxs(FormField, { ...combineProps({
-            classes: {
-                root: cls('root', {
-                    'full-width': fullWidth,
-                    'hide-native-clear': shouldHideNativeClear,
-                }),
-                content: cls('form-field-content'),
-                outlined: cls('outlined'),
-                standard: cls('standard'),
-                quiet: cls('quiet'),
-            },
-            contentProps: {
-                onClick: (e) => {
-                    onClick?.(e);
-                    if (e.target === e.currentTarget && !disabled) {
-                        inputRef.current?.focus();
-                    }
-                },
-            },
-        }, RootProps), ...states, htmlFor: id, label: label, ref: ref, helperText: helperText, variant: variant, size: size, FormHelperTextProps: { id: idForHelperText, ...FormHelperTextProps }, children: [startAdornment && (jsx("div", { className: cls('start-adornment'), children: startAdornment })), jsx(InputComponent, { readOnly: readOnly, autoComplete: "off", autoFocus: autoFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ...widgetProps, className: cls('input'), ref: useForkRef(widgetProps.ref, inputRef), type: inputType }), clearBtn && (jsx(IconButton, { symbol: Xmd, shape: 'squircle', background: false, color: 'secondary', variant: "contained", size: "small", title: clearText, "aria-label": clearText, disabled: disabled, ...combineProps({
-                    className: cls('clear'),
-                    onClick: handlerClear,
-                }, ClearButtonProps) })), shouldShowMaskToggleButton && (jsx(IconButton, { disabled: disabled, shape: 'squircle', background: false, color: 'neutral', variant: "icon", size: "small", ...combineProps({
-                    className: cls('mask-value-button'),
-                    onClick: handleMaskValueChange,
-                    'aria-label': maskValue ? 'eye-visible' : 'eye',
-                }, MaskValueButtonProps), children: jsx(ShowHideEye, { hide: !maskValue, size: ShowHideEyeIconProps?.size ??
-                        MaskValueButtonProps?.iconSize ??
-                        'small', ...ShowHideEyeIconProps }) })), endAdornment && (jsx("div", { className: cls('end-adornment'), children: endAdornment }))] }));
-};
-const TextField = forwardRef(TextFieldComponent);
-TextField.displayName = 'SuiTextField';
-
-export { TextField as T };