@ringcentral/spring-ui 1.12.0 → 1.13.0

package/chunks/4476.js

@@ -0,0 +1,460 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { motionTransition } from "@ringcentral/spring-theme";
+import { useClasses } from "@ringcentral/spring-base";
+import { useMotionSafeTransition, usePrefersReducedMotion } from "./1294.js";
+import { Icon as Icon_Icon } from "./8307.js";
+
+
+
+
+
+const getFade = ({ toggle = true, prefersReducedMotion = false, toggleOnTransition, toggleOffTransition } = {})=>({
+        initial: 'hidden',
+        animate: toggle ? 'show' : 'hidden',
+        exit: 'hidden',
+        variants: {
+            show: {
+                opacity: 1,
+                transition: prefersReducedMotion ? motionTransition.instant : toggleOnTransition || motionTransition["haste-01-fast"]
+            },
+            hidden: {
+                opacity: 0,
+                transition: prefersReducedMotion ? motionTransition.instant : toggleOffTransition || motionTransition["haste-01-slow"],
+                pointerEvents: 'none',
+                // Use transitionEnd to remove inline style, allowing CSS classes to control pointer-events
+                transitionEnd: {
+                    pointerEvents: undefined
+                }
+            }
+        }
+    });
+
+
+
+
+
+const Fade = (props)=>{
+    const { toggle, toggleOffTransition, toggleOnTransition, children, ...rest } = props;
+    const prefersReducedMotion = usePrefersReducedMotion();
+    return /*#__PURE__*/ jsx(motion.div, {
+        ...getFade({
+            toggle,
+            toggleOffTransition,
+            toggleOnTransition,
+            prefersReducedMotion
+        }),
+        ...rest,
+        children: children
+    });
+};
+
+
+
+
+
+
+
+
+const getGrow = ({ toggle = true, direction = 'both', prefersReducedMotion = false, toggleOffTransition, toggleOnTransition, transformOrigin } = {})=>{
+    const directionStr = direction === 'both' ? '' : direction.toUpperCase();
+    return {
+        style: {
+            transformOrigin: transformOriginToString(transformOrigin)
+        },
+        initial: 'invisible',
+        animate: toggle ? 'visible' : 'invisible',
+        exit: 'invisible',
+        variants: {
+            invisible: {
+                transform: `scale${directionStr}(0.618)`,
+                opacity: 0,
+                ...!prefersReducedMotion && toggleOffTransition && {
+                    transition: toggleOffTransition
+                }
+            },
+            visible: {
+                transform: `scale${directionStr}(1)`,
+                opacity: 1,
+                ...!prefersReducedMotion && toggleOnTransition && {
+                    transition: toggleOnTransition
+                }
+            }
+        },
+        transition: prefersReducedMotion ? motionTransition.instant : motionTransition["spring-01-fast"]
+    };
+};
+const transformOriginToString = (transformOrigin)=>{
+    if (!transformOrigin) return undefined;
+    return `${typeof transformOrigin.vertical === 'number' ? transformOrigin.vertical + 'px' : transformOrigin.vertical} ${typeof transformOrigin.horizontal === 'number' ? transformOrigin.horizontal + 'px' : transformOrigin.horizontal}`;
+};
+const alignmentToHorizontalTransformOrigin = {
+    start: 'left',
+    end: 'right'
+};
+const alignmentToVerticalTransformOrigin = {
+    start: 'top',
+    end: 'bottom'
+};
+const getTransformOriginStringForPlacement = (params)=>{
+    const { placement } = params;
+    const [base, alignment] = placement.split('-');
+    if (base === 'top' || base === 'bottom') {
+        return transformOriginToString({
+            vertical: base === 'top' ? 'bottom' : 'top',
+            horizontal: !alignment ? 'center' : alignmentToHorizontalTransformOrigin[alignment]
+        });
+    } else if (base === 'left' || base === 'right') {
+        return transformOriginToString({
+            vertical: !alignment ? 'center' : alignmentToVerticalTransformOrigin[alignment],
+            horizontal: base === 'left' ? 'right' : 'left'
+        });
+    }
+    return undefined;
+};
+
+
+
+
+
+const Grow = (props)=>{
+    const { toggle, toggleOffTransition, toggleOnTransition, children, transformOrigin, direction = 'both', style, ...rest } = props;
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const growProps = getGrow({
+        toggle,
+        direction,
+        prefersReducedMotion,
+        toggleOffTransition,
+        toggleOnTransition,
+        transformOrigin
+    });
+    return /*#__PURE__*/ jsx(motion.div, {
+        ...growProps,
+        ...rest,
+        style: {
+            ...growProps.style,
+            ...style
+        },
+        children: children
+    });
+};
+
+
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var ShowHideEye = ({"sui-show-hide-eye-root":"sui-show-hide-eye-root"});
+
+
+
+
+
+
+
+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_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 /*#__PURE__*/ jsx(Icon_Icon, {
+        ...rest,
+        size: size,
+        className: cls('root'),
+        children: /*#__PURE__*/ jsxs(motion.svg, {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: '0 0 20 20',
+            animate: hide ? 'hide' : 'show',
+            transition: transition,
+            children: [
+                /*#__PURE__*/ jsx(motion.path, {
+                    initial: false,
+                    stroke: "currentColor",
+                    strokeWidth: 1.5,
+                    strokeMiterlimit: 1.5,
+                    strokeLinejoin: 'miter',
+                    strokeLinecap: 'butt',
+                    variants: topEyelidVariants,
+                    transition: transition,
+                    fill: "transparent"
+                }),
+                /*#__PURE__*/ jsx(motion.path, {
+                    initial: false,
+                    stroke: "currentColor",
+                    strokeWidth: 1.5,
+                    strokeMiterlimit: 1.5,
+                    strokeLinejoin: 'miter',
+                    strokeLinecap: 'butt',
+                    variants: bottomEyelidVariants,
+                    transition: transition,
+                    fill: "transparent"
+                }),
+                /*#__PURE__*/ jsx(motion.ellipse, {
+                    initial: false,
+                    cx: 10,
+                    cy: 10.5,
+                    rx: 3.75,
+                    fill: "currentColor",
+                    variants: pupilVariants
+                }),
+                /*#__PURE__*/ jsx(motion.path, {
+                    initial: false,
+                    stroke: "currentColor",
+                    strokeWidth: 1.5,
+                    strokeMiterlimit: 1.5,
+                    strokeLinejoin: 'miter',
+                    strokeLinecap: 'butt',
+                    variants: eyelashVariants,
+                    transition: transition,
+                    fill: "transparent"
+                })
+            ]
+        })
+    });
+};
+
+
+
+
+
+
+
+
+
+const horizontal = [
+    'right',
+    'left'
+];
+const plus = [
+    'right',
+    'bottom'
+];
+const getSlideIn = ({ toggle = true, from = 'right', prefersReducedMotion = false, toggleOnTransition, toggleOffTransition, transition } = {})=>{
+    const axis = horizontal.includes(from) ? 'x' : 'y';
+    const invisibleValue = plus.includes(from) ? '100%' : '-100%';
+    return {
+        initial: 'invisible',
+        animate: toggle ? 'visible' : 'invisible',
+        exit: 'invisible',
+        variants: {
+            visible: {
+                [axis]: 0,
+                ...!prefersReducedMotion && toggleOnTransition && {
+                    transition: toggleOnTransition
+                }
+            },
+            invisible: {
+                [axis]: invisibleValue,
+                ...!prefersReducedMotion && toggleOffTransition && {
+                    transition: toggleOffTransition
+                }
+            }
+        },
+        transition: prefersReducedMotion ? motionTransition.instant : transition ?? motionTransition["spring-01-fast"]
+    };
+};
+
+
+
+
+
+const SlideIn = (props)=>{
+    const { toggle, toggleOnTransition, toggleOffTransition, transition, children, from = 'right', ...rest } = props;
+    const prefersReducedMotion = usePrefersReducedMotion();
+    return /*#__PURE__*/ jsx(motion.div, {
+        ...getSlideIn({
+            toggle,
+            from,
+            prefersReducedMotion,
+            toggleOnTransition,
+            toggleOffTransition,
+            transition
+        }),
+        ...rest,
+        children: children
+    });
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+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 /*#__PURE__*/ jsx(Icon_Icon, {
+        ...rest,
+        size: size,
+        className: cls('root'),
+        children: /*#__PURE__*/ jsxs(motion.svg, {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: '0 0 20 20',
+            animate: direction || 'initial',
+            children: [
+                /*#__PURE__*/ jsx(motion.path, {
+                    initial: false,
+                    stroke: "currentColor",
+                    strokeWidth: 1.5,
+                    strokeMiterlimit: 1.5,
+                    strokeLinejoin: 'miter',
+                    variants: topCaretVariants,
+                    transition: caretTransition,
+                    fill: "transparent"
+                }),
+                direction !== 'desc' && /*#__PURE__*/ jsx(motion.path, {
+                    initial: false,
+                    stroke: "currentColor",
+                    strokeWidth: 1.5,
+                    strokeLinecap: 'square',
+                    variants: topLineVariants,
+                    transition: lineTransition,
+                    fill: "transparent"
+                }),
+                direction !== 'asc' && /*#__PURE__*/ jsx(motion.path, {
+                    initial: false,
+                    stroke: "currentColor",
+                    strokeWidth: 1.5,
+                    strokeLinecap: 'square',
+                    variants: bottomLineVariants,
+                    transition: lineTransition,
+                    fill: "transparent"
+                }),
+                /*#__PURE__*/ jsx(motion.path, {
+                    initial: false,
+                    stroke: "currentColor",
+                    strokeWidth: 1.5,
+                    strokeMiterlimit: 1.5,
+                    strokeLinejoin: 'miter',
+                    variants: bottomCaretVariants,
+                    transition: caretTransition,
+                    fill: "transparent"
+                })
+            ]
+        })
+    });
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export { Fade, Grow, ShowHideEye as showHideEyeStyles, ShowHideEye_ShowHideEye as ShowHideEye, SlideIn, SortableArrow, getFade, getGrow, getSlideIn, getTransformOriginStringForPlacement };

package/chunks/4491.js

@@ -0,0 +1,10 @@
+const composeEventHandlers = (externalEventHandler, internalEventHandler, options = {})=>(event, ...args)=>{
+        const { checkForDefaultPrevented = true } = options;
+        externalEventHandler?.(event, ...args);
+        if (checkForDefaultPrevented && event.defaultPrevented) {
+            return;
+        }
+        internalEventHandler?.(event, ...args);
+    };
+
+export { composeEventHandlers };