@ringcentral/spring-ui 1.7.0

package/Accordion.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useCallback, useMemo } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useClasses, useControlled, useId, 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 { A as AccordionContext } from './chunks/AccordionContext.js';
+export { u as useAccordionContext } from './chunks/AccordionContext.js';
+import './chunks/usePrefersReducedMotion.js';
+
+var Accordion$1 = {"sui-accordion-root":"sui-accordion-root","sui-accordion-panel-wrapper":"sui-accordion-panel-wrapper","sui-accordion-panel-inner-wrapper":"sui-accordion-panel-inner-wrapper"};
+
+const Accordion = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Accordion' });
+    const { header, classes, className, children, defaultExpanded = false, expanded: expandedProp, onChange, keepMounted, ...rest } = props;
+    const cls = useClasses('accordion', classes, className);
+    const [expanded, setExpandedState] = useControlled({
+        controlled: expandedProp,
+        default: defaultExpanded,
+        name: 'SuiAccordion',
+        state: 'expanded',
+    });
+    const handleChange = useCallback((event) => {
+        setExpandedState((expanded) => !expanded);
+        if (onChange) {
+            onChange(event, !expanded);
+        }
+    }, [expanded, onChange, setExpandedState]);
+    const expandedTransition = useMotionSafeTransition(motionTransition['spring-01-fast']);
+    const collapsedTransition = useMotionSafeTransition(motionTransition['spring-01-slow']);
+    const collapsedHeightTransition = useMotionSafeTransition(motionTransition['haste-01-slow']);
+    const ARIA_CONTROLS = 'aria-controls';
+    const accordionHeader = header;
+    const accordionHeaderId = useId(accordionHeader.props?.id);
+    const accordionPanelId = useId(accordionHeader.props?.[ARIA_CONTROLS]);
+    const contextValue = useMemo(() => ({
+        id: accordionHeaderId,
+        ariaControls: accordionPanelId,
+        expanded,
+        toggle: handleChange,
+    }), [accordionHeaderId, accordionPanelId, expanded, handleChange]);
+    const isEverShown = useEver(expanded);
+    const keepAlive = keepMounted && isEverShown;
+    const motionVariants = {
+        expanded: {
+            transition: expandedTransition,
+            opacity: 1,
+            height: 'auto',
+        },
+        collapsed: {
+            transition: {
+                ...collapsedTransition,
+                height: collapsedHeightTransition,
+            },
+            opacity: 0,
+            height: 0,
+        },
+    };
+    return (jsxs("div", { className: cls('root'), ...rest, ref: ref, children: [jsx(AccordionContext.Provider, { value: contextValue, children: header }), jsx(AnimatePresence, { initial: false, children: (expanded || keepAlive) && (jsx(motion.div, { "aria-labelledby": accordionHeaderId, id: accordionPanelId, className: cls('panel-wrapper'), initial: "collapsed", animate: expanded ? 'expanded' : 'collapsed', exit: "collapsed", variants: motionVariants, children: jsx("div", { className: cls('panel-inner-wrapper'), children: children }) })) })] }));
+});
+Accordion.displayName = 'SuiAccordion';
+
+export { Accordion, AccordionContext, Accordion$1 as accordionStyles };

package/AccordionHeader.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses, useFocusVisible, useForkRef, getTitle } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { u as useAccordionContext } from './chunks/AccordionContext.js';
+import { E as ExpandCollapseCaret } from './chunks/ExpandCollapseCaret.js';
+import 'framer-motion';
+import './chunks/Icon.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/usePrefersReducedMotion.js';
+
+var AccordionHeader$1 = {"sui-accordion-header-root":"sui-accordion-header-root","sui-focus-visible":"sui-focus-visible","sui-disabled":"sui-disabled","sui-accordion-header-content":"sui-accordion-header-content","sui-accordion-header-primary-text":"sui-accordion-header-primary-text","sui-accordion-header-secondary-slot":"sui-accordion-header-secondary-slot","sui-accordion-header-expand-icon":"sui-accordion-header-expand-icon"};
+
+const AccordionHeader = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'AccordionHeader' });
+    const { classes, className, children, onClick, secondarySlot, disabled, expandIcon = true, ExpandCollapseCaretProps, ...rest } = props;
+    const { id, ariaControls, expanded, toggle } = useAccordionContext();
+    const handleChange = (event) => {
+        if (toggle) {
+            toggle(event);
+        }
+        if (onClick) {
+            onClick(event);
+        }
+    };
+    const cls = useClasses('accordion-header', classes, className);
+    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(props);
+    const buttonRef = useForkRef(ref, focusVisibleRef);
+    return (jsxs("button", { className: cls('root', { focusVisible, disabled }), "aria-expanded": expanded, disabled: disabled, ...rest, id: id, "aria-controls": ariaControls, ref: buttonRef, onClick: handleChange, ...focusVisibleHandlers, children: [jsxs("span", { className: cls('content'), children: [jsx("span", { className: cls('primary-text'), title: getTitle(children), children: children }), secondarySlot && (jsx("span", { className: cls('secondary-slot'), children: secondarySlot }))] }), expandIcon && (jsx(ExpandCollapseCaret, { expanded: !!expanded, orientation: 'vertical', ...ExpandCollapseCaretProps }))] }));
+});
+AccordionHeader.displayName = 'SuiAccordionHeader';
+
+export { AccordionHeader, AccordionHeader$1 as accordionHeaderStyles };

package/Alert.js

@@ -0,0 +1,28 @@
+export { A as Alert, a as AlertTitle } from './chunks/Alert.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-icon';
+import '@ringcentral/spring-theme';
+import 'clsx';
+import './chunks/Icon.js';
+import './chunks/IconButtonLabel.js';
+import '@mui/base';
+import './chunks/Squircle.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.js';
+import 'framer-motion';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getFade.js';
+import './Popper.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './chunks/PopperPaper.js';
+
+var Alert = {"sui-alert-root":"sui-alert-root","sui-alert-icon":"sui-alert-icon","sui-alert-body":"sui-alert-body","sui-alert-content":"sui-alert-content","sui-alert-action":"sui-alert-action","sui-alert-close":"sui-alert-close","sui-alert-info":"sui-alert-info","sui-alert-info-icon":"sui-alert-info-icon","sui-alert-error":"sui-alert-error","sui-alert-error-icon":"sui-alert-error-icon","sui-alert-warning":"sui-alert-warning","sui-alert-warning-icon":"sui-alert-warning-icon","sui-alert-success":"sui-alert-success","sui-alert-success-icon":"sui-alert-success-icon","sui-alert-neutral":"sui-alert-neutral","sui-alert-neutral-icon":"sui-alert-neutral-icon"};
+
+var AlertTitle = {"sui-alert-title-root":"sui-alert-title-root"};
+
+export { Alert as alertStyles, AlertTitle as alertTitleStyles };

package/Animation.js

@@ -0,0 +1,46 @@
+export { E as ExpandCollapseCaret } from './chunks/ExpandCollapseCaret.js';
+import { jsx } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { u as usePrefersReducedMotion } from './chunks/usePrefersReducedMotion.js';
+import '@ringcentral/spring-theme';
+import { g as getFade } from './chunks/getFade.js';
+import { g as getGrow } from './chunks/getGrow.js';
+export { a as getTransformOriginStringForPlacement } from './chunks/getGrow.js';
+export { S as ShowHideEye } from './chunks/ShowHideEye.js';
+export { S as SlideIn } from './chunks/SlideIn.js';
+export { g as getSlideIn } from './chunks/getSlideIn.js';
+export { S as SortableArrow } from './chunks/SortableArrow.js';
+export { u as useMotionSafeTransition } from './chunks/useMotionSafeTransition.js';
+import '@ringcentral/spring-base';
+import './chunks/Icon.js';
+import 'react';
+
+var ExpandCollapseCaret = {"sui-expand-collapse-caret-root":"sui-expand-collapse-caret-root","sui-expand-collapse-caret-vertical":"sui-expand-collapse-caret-vertical","sui-expand-collapse-caret-horizontal":"sui-expand-collapse-caret-horizontal"};
+
+const Fade = (props) => {
+    const { toggle, toggleOffTransition, toggleOnTransition, children, ...rest } = props;
+    const prefersReducedMotion = usePrefersReducedMotion();
+    return (jsx(motion.div, { ...getFade({
+            toggle,
+            toggleOffTransition,
+            toggleOnTransition,
+            prefersReducedMotion,
+        }), ...rest, children: children }));
+};
+
+const Grow = (props) => {
+    const { toggle, toggleOffTransition, toggleOnTransition, children, transformOrigin, direction = 'both', ...rest } = props;
+    const prefersReducedMotion = usePrefersReducedMotion();
+    return (jsx(motion.div, { ...getGrow({
+            toggle,
+            direction,
+            prefersReducedMotion,
+            toggleOffTransition,
+            toggleOnTransition,
+            transformOrigin,
+        }), ...rest, children: children }));
+};
+
+var ShowHideEye = {"sui-show-hide-eye-root":"sui-show-hide-eye-root"};
+
+export { Fade, Grow, ExpandCollapseCaret as expandCollapseCaretStyles, getFade, getGrow, ShowHideEye as showHideEyeStyles, usePrefersReducedMotion };

package/Announcement.js

@@ -0,0 +1,48 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { InfoMd, AlertMd, SuccessMd } from '@ringcentral/spring-icon';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { A as Alert } from './chunks/Alert.js';
+import 'clsx';
+import './chunks/Icon.js';
+import './chunks/IconButtonLabel.js';
+import '@mui/base';
+import './chunks/Squircle.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.js';
+import 'framer-motion';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getFade.js';
+import './Popper.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './chunks/PopperPaper.js';
+
+var Announcement$1 = {"sui-announcement-icon":"sui-announcement-icon","sui-announcement-close":"sui-announcement-close","sui-announcement-action":"sui-announcement-action","sui-announcement-root":"sui-announcement-root","sui-announcement-neutral":"sui-announcement-neutral","sui-announcement-info":"sui-announcement-info","sui-announcement-error":"sui-announcement-error","sui-announcement-success":"sui-announcement-success","sui-announcement-warning":"sui-announcement-warning","sui-announcement-body":"sui-announcement-body","sui-announcement-content":"sui-announcement-content"};
+
+const DEFAULT_ICON_MAP = {
+    info: InfoMd,
+    error: AlertMd,
+    success: SuccessMd,
+    warning: AlertMd,
+    neutral: InfoMd,
+};
+const Announcement = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Announcement' });
+    const { classes, className, severity = 'neutral', startSlot = DEFAULT_ICON_MAP[severity], CloseButtonProps, ...rest } = props;
+    const cls = useClasses('announcement', classes, className);
+    return (jsx(Alert, { ref: ref, ...rest, startSlot: startSlot, CloseButtonProps: { variant: 'inverted', ...CloseButtonProps }, classes: {
+            root: cls('root', severity),
+            body: cls('body'),
+            icon: cls('icon'),
+            close: cls('close'),
+            action: cls('action'),
+            content: cls('content'),
+        } }));
+});
+Announcement.displayName = 'SuiAnnouncement';
+
+export { Announcement, Announcement$1 as announcementStyles };