@ringcentral/spring-ui 1.12.0 → 1.13.0

package/chunks/4535.js

@@ -0,0 +1,364 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { AnimatePresence } from "framer-motion";
+import { cloneElement, forwardRef, useEffect, useRef } from "react";
+import { combineProps, logInDev, useClasses, useControlled, useEventListener, useForkRef, useId, useIsFocusVisible, useWindowContext } from "@ringcentral/spring-base";
+import clsx from "clsx";
+import { getFade } from "./4476.js";
+import { Icon as Icon_Icon } from "./8307.js";
+import { Popper } from "../Popper.js";
+import { PopperPaper as PopperPaper_PopperPaper } from "../PopperPaper.js";
+import { usePrefersReducedMotion } from "./1294.js";
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * Accessibility naming strategy:
+ * - Default (label mode): `title` is treated as an accessible label
+ *   - string `title` → `aria-label`
+ *   - React element `title` → `aria-labelledby` while the tooltip is open
+ * - Description mode (`describeChild = true`): `title` is treated as an accessible description
+ *   - when closed → native `title` attribute
+ *   - when open   → `aria-describedby` pointing to the tooltip id
+ */ const ARIA_DESCRIBEDBY = 'aria-describedby';
+const ARIA_LABEL = 'aria-label';
+const ARIA_LABELLEDBY = 'aria-labelledby';
+const HTML_TITLE = 'title';
+let hasWarnedTriggerWhenDisabledNonStringTitle = false;
+function computeTooltipA11y({ title, describeChild, triggerWhenDisabled, open, tooltipId, child }) {
+    const nameOrDescProps = {};
+    const disabledOverrides = {};
+    const titleIsString = typeof title === 'string';
+    const childProps = child.props;
+    const hasAriaDescribedBy = ARIA_DESCRIBEDBY in childProps;
+    const hasAriaLabel = ARIA_LABEL in childProps;
+    const hasAriaLabelledBy = ARIA_LABELLEDBY in childProps;
+    const hasUserTitle = HTML_TITLE in childProps;
+    if (process.env.NODE_ENV !== 'production' && triggerWhenDisabled && !titleIsString && title != null && !hasUserTitle && !hasWarnedTriggerWhenDisabledNonStringTitle) {
+        hasWarnedTriggerWhenDisabledNonStringTitle = true;
+        logInDev({
+            scope: 'Tooltip',
+            level: 'warn',
+            message: 'Using Tooltip with `triggerWhenDisabled` and a non-string `title` is not fully accessible. Use a string `title` when explaining why a control is disabled.'
+        });
+    }
+    if (describeChild) {
+        // Description mode: tooltip acts as an accessible description
+        // When closed: add title attribute (unless user provided their own)
+        // When open: swap to aria-describedby
+        if (!hasAriaDescribedBy) {
+            if (!hasUserTitle) {
+                // Only set tooltip title if user hasn't provided one
+                nameOrDescProps.title = !open && titleIsString ? title : null;
+            } else if (open) {
+                // If user provided a title and tooltip is open, remove native title to prevent duplicate
+                nameOrDescProps.title = null;
+            }
+            nameOrDescProps[ARIA_DESCRIBEDBY] = open ? tooltipId : null;
+        }
+    } else {
+        // Label mode (default): tooltip acts as an accessible label
+        // Use aria-label for strings, aria-labelledby for React elements
+        if (titleIsString && !hasAriaLabel) {
+            nameOrDescProps[ARIA_LABEL] = title;
+            // For string titles, Tooltip fully owns the label; always remove native title
+            nameOrDescProps.title = null;
+        } else if (!titleIsString && !hasAriaLabelledBy && title) {
+            // Only set aria-labelledby if title is truthy (React element exists)
+            nameOrDescProps[ARIA_LABELLEDBY] = open ? tooltipId : null;
+            // Only remove native title when tooltip is open to prevent duplicate tooltips.
+            // When closed, leave existing title as a fallback accessible name.
+            if (open) {
+                nameOrDescProps.title = null;
+            }
+        } else if (open) {
+            // Tooltip is open but we're not providing a label (e.g. child already has aria-label);
+            // still remove native title to avoid double tooltips.
+            nameOrDescProps.title = null;
+        }
+    }
+    if (triggerWhenDisabled) {
+        // When open and child does not already have aria-describedby: use tooltip id,
+        // and always remove native title on the disabled control to avoid double tooltips.
+        // When closed and title is a string: use native title as a fallback for SR on disabled.
+        if (open) {
+            if (!hasAriaDescribedBy) {
+                disabledOverrides[ARIA_DESCRIBEDBY] = tooltipId;
+            }
+            disabledOverrides.title = null;
+        } else if (titleIsString) {
+            disabledOverrides.title = title;
+        }
+    }
+    return {
+        nameOrDescProps,
+        disabledOverrides
+    };
+}
+
+
+
+
+
+
+const getDelayTime = (delay)=>{
+    if (!delay) return null;
+    if (delay === true) return 1500;
+    return delay;
+};
+const TooltipTrigger = (props, ref)=>{
+    const { renderTooltip, children, open: openProp, delay = false, onOpenStateChange, triggerWhenDisabled, triggerWrapperProps, disableFocusListener, tooltipId: tooltipIdProp, title, describeChild = false } = props;
+    const anchorRef = useRef(null);
+    const didInitiateWithTouch = useRef(false);
+    const { document } = useWindowContext();
+    const generatedId = useId();
+    const tooltipId = tooltipIdProp ?? generatedId;
+    const [open, setOpen] = useControlled({
+        controlled: openProp,
+        default: false,
+        name: 'Tooltip',
+        state: 'open'
+    });
+    const { isFocusVisibleRef, onFocus: handleFocusVisible, onBlur: handleBlurVisible, ref: focusVisibleRef } = useIsFocusVisible();
+    const handleAnchorRef = useForkRef(anchorRef, focusVisibleRef, children.ref);
+    const delayTimerRef = useRef();
+    useEffect(()=>()=>{
+            clearTimeout(delayTimerRef.current);
+        }, []);
+    const handleOpen = (e)=>{
+        const delayTime = getDelayTime(delay);
+        if (delayTime) {
+            delayTimerRef.current = setTimeout(()=>{
+                setOpen(true);
+                onOpenStateChange?.(e, true);
+            }, delayTime);
+        } else {
+            setOpen(true);
+            onOpenStateChange?.(e, true);
+        }
+    };
+    const handleClose = (e)=>{
+        clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = undefined;
+        setOpen(false);
+        onOpenStateChange?.(e, false);
+    };
+    useEventListener(anchorRef, 'mouseenter', (e)=>{
+        // Ensures touch devices do not trigger the tooltip, mouseleave will never be fired and the tooltip will be stuck open
+        if (didInitiateWithTouch.current) {
+            // Immediately reset the flag, touchstart will fire again on the next tap and will set the flag back to true
+            didInitiateWithTouch.current = false;
+            return;
+        }
+        // Remove the title ahead of time from the trigger.
+        // We don't want to wait for the next render commit.
+        // We would risk displaying two tooltips at the same time (native + this one).
+        if (anchorRef.current) {
+            anchorRef.current.removeAttribute('title');
+        }
+        handleOpen(e);
+    });
+    useEventListener(anchorRef, 'mouseleave', (e)=>{
+        handleClose(e);
+    });
+    useEventListener(anchorRef, 'touchstart', (e)=>{
+        didInitiateWithTouch.current = true;
+    }, {
+        passive: true
+    });
+    useEventListener(anchorRef, 'focus', (e)=>{
+        if (disableFocusListener) return;
+        // handleFocusVisible only support react event type, but it only need target event
+        // oxlint-disable-next-line @typescript-eslint/no-explicit-any
+        handleFocusVisible(e);
+        if (isFocusVisibleRef.current === true) {
+            handleOpen(e);
+        }
+    });
+    useEventListener(anchorRef, 'blur', (e)=>{
+        // handleBlurVisible only support react event type, but this param is useless
+        // oxlint-disable-next-line @typescript-eslint/no-explicit-any
+        handleBlurVisible(e);
+        if (isFocusVisibleRef.current === false) {
+            handleClose(e);
+        }
+    });
+    // Handle Escape key to close tooltip
+    useEventListener(open ? document : null, 'keydown', (e)=>{
+        if (e.key === 'Escape') {
+            handleClose(e);
+        }
+    });
+    const { nameOrDescProps, disabledOverrides } = computeTooltipA11y({
+        title,
+        describeChild,
+        triggerWhenDisabled,
+        open,
+        tooltipId,
+        child: children
+    });
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            triggerWhenDisabled ? /*#__PURE__*/ jsx("span", {
+                ...triggerWrapperProps,
+                className: clsx('sui-tooltip-trigger-wrapper', triggerWrapperProps?.className),
+                ref: handleAnchorRef,
+                children: /*#__PURE__*/ cloneElement(children, disabledOverrides)
+            }) : /*#__PURE__*/ cloneElement(children, {
+                ref: handleAnchorRef,
+                ...nameOrDescProps
+            }),
+            renderTooltip(open, ()=>anchorRef.current, tooltipId)
+        ]
+    });
+};
+TooltipTrigger.displayName = 'SuiTooltipTrigger';
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var TooltipView = ({"sui-tooltip-view-root":"sui-tooltip-view-root","sui-tooltip-view-disable-interactions":"sui-tooltip-view-disable-interactions","sui-tooltip-trigger-wrapper":"sui-tooltip-trigger-wrapper","sui-tooltip-view-paper":"sui-tooltip-view-paper","sui-tooltip-view-paper-content":"sui-tooltip-view-paper-content","sui-tooltip-view-paper-content-medium":"sui-tooltip-view-paper-content-medium","sui-tooltip-view-icon":"sui-tooltip-view-icon","sui-tooltip-view-content":"sui-tooltip-view-content","sui-tooltip-view-neutral":"sui-tooltip-view-neutral","sui-tooltip-view-success":"sui-tooltip-view-success","sui-tooltip-view-danger":"sui-tooltip-view-danger","sui-tooltip-view-inverted":"sui-tooltip-view-inverted","sui-tooltip-view-force-hide":"sui-tooltip-view-force-hide"});
+
+
+
+
+
+
+
+
+const TooltipView_TooltipView = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { className, icon, size = 'small', classes, children, placement = 'bottom', PopperProps, color = 'neutral', anchorEl, motionProps, tooltipForceHide = false, disableInteractions = true, PopperPaperProps: popperPaperPropsProp } = props;
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const cls = useClasses('tooltip-view', classes, className);
+    const padding = PopperProps?.padding;
+    const popperPadding = typeof padding === 'object' ? {
+        top: padding.top ?? 16,
+        right: padding.right ?? 16,
+        bottom: padding.bottom ?? 16,
+        left: padding.left ?? 16
+    } : padding ?? 16;
+    return /*#__PURE__*/ jsx(Popper, {
+        role: "tooltip",
+        placement: placement,
+        offset: 4,
+        ...PopperProps,
+        padding: popperPadding,
+        className: cls('root', {
+            'force-hide': tooltipForceHide,
+            'disable-interactions': disableInteractions
+        }),
+        anchorEl: anchorEl,
+        arrowHeight: 6,
+        arrowPadding: 8,
+        ref: ref,
+        children: ({ arrowRef, arrowStyle })=>/*#__PURE__*/ jsxs(PopperPaper_PopperPaper, {
+                ...motionProps ?? getFade({
+                    prefersReducedMotion
+                }),
+                ...combineProps({
+                    arrowRef,
+                    arrowStyle,
+                    classes: {
+                        root: cls('paper', color),
+                        content: cls('paper-content', `paper-content-${size}`)
+                    }
+                }, popperPaperPropsProp),
+                children: [
+                    icon && /*#__PURE__*/ jsx(Icon_Icon, {
+                        symbol: icon,
+                        size: "small",
+                        className: cls('icon')
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: cls('content', `content-${size}`),
+                        children: children
+                    })
+                ]
+            })
+    });
+});
+TooltipView_TooltipView.displayName = 'SuiTooltipView';
+
+
+
+
+
+
+
+
+const Tooltip = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Tooltip'
+    });
+    const { children, open: openProp, delay, onOpenStateChange, title, disableFocusListener, disableBackdropAnimation, triggerWhenDisabled, triggerWrapperProps, PopperProps, describeChild = false, ...rest } = props;
+    const renderTooltip = (open, getAnchorEl, tooltipId)=>{
+        // hides '', null/undefined, false, NaN)
+        const effectiveOpen = open && !(!title && title !== 0);
+        const content = effectiveOpen ? /*#__PURE__*/ jsx(TooltipView_TooltipView, {
+            disableInteractions: openProp === undefined,
+            ...rest,
+            PopperProps: {
+                ...PopperProps,
+                id: tooltipId
+            },
+            anchorEl: getAnchorEl,
+            ref: ref,
+            children: title
+        }) : null;
+        return disableBackdropAnimation ? /*#__PURE__*/ jsx(Fragment, {
+            children: content
+        }) : /*#__PURE__*/ jsx(AnimatePresence, {
+            children: content
+        });
+    };
+    return /*#__PURE__*/ jsx(TooltipTrigger, {
+        disableFocusListener: disableFocusListener,
+        open: openProp,
+        delay: delay,
+        onOpenStateChange: onOpenStateChange,
+        renderTooltip: renderTooltip,
+        triggerWhenDisabled: triggerWhenDisabled,
+        triggerWrapperProps: triggerWrapperProps,
+        tooltipId: PopperProps?.id,
+        title: title,
+        describeChild: describeChild,
+        children: children
+    });
+});
+Tooltip.displayName = 'SuiTooltip';
+
+
+
+
+
+
+
+function withTooltip(Component) {
+    return /*#__PURE__*/ forwardRef((props, ref)=>{
+        const { TooltipProps, ...rest } = props;
+        const content = /*#__PURE__*/ jsx(Component, {
+            ...rest,
+            ref: ref
+        });
+        if (!TooltipProps) return content;
+        return /*#__PURE__*/ jsx(Tooltip, {
+            ...TooltipProps,
+            children: content
+        });
+    });
+}
+
+
+
+export { Tooltip, TooltipTrigger, TooltipView as tooltipViewStyle, TooltipView_TooltipView as TooltipView, withTooltip };

package/chunks/5047.js

@@ -0,0 +1,3 @@
+const hasContent = (content)=>Boolean(content) || content === 0;
+
+export { hasContent };

package/chunks/6335.js

@@ -0,0 +1,24 @@
+import { useMemo } from "react";
+import { useWindowContext } from "@ringcentral/spring-base";
+
+
+
+
+
+function useAnimationFrame() {
+    const { externalWindow, globalThis: contextGlobal } = useWindowContext();
+    return useMemo(()=>{
+        const contextWindow = externalWindow ?? contextGlobal;
+        return {
+            requestAnimationFrame: (callback)=>contextWindow.requestAnimationFrame(callback),
+            cancelAnimationFrame: (handle)=>contextWindow.cancelAnimationFrame(handle)
+        };
+    }, [
+        externalWindow,
+        contextGlobal
+    ]);
+}
+
+
+
+export { useAnimationFrame };

package/chunks/7279.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+
+
+
+const TableContext = createContext({
+    rowDivider: true
+});
+const useTableContext = ()=>useContext(TableContext);
+
+export { TableContext, useTableContext };

package/chunks/8011.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+
+
+
+const Tablelvl2Context = createContext({});
+const useTablelvl2Context = ()=>useContext(Tablelvl2Context);
+
+export { Tablelvl2Context, useTablelvl2Context };

package/chunks/8307.js

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import { cloneElement, forwardRef, useMemo } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Icon = ({"sui-icon-root":"sui-icon-root","sui-icon-svg":"sui-icon-svg","sui-icon-xsmall":"sui-icon-xsmall","sui-icon-small":"sui-icon-small","sui-icon-medium":"sui-icon-medium","sui-icon-large":"sui-icon-large","sui-icon-xlarge":"sui-icon-xlarge","sui-icon-xxlarge":"sui-icon-xxlarge","sui-icon-xxxlarge":"sui-icon-xxxlarge"});
+
+
+
+
+
+const Icon_Icon = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Icon'
+    });
+    const { size = 'medium', symbol, children: childrenProp, className, classes, ...rest } = props;
+    const cls = useClasses('icon', classes, className);
+    const svgClassName = cls('svg');
+    const children = useMemo(()=>{
+        if (symbol) {
+            const Comp = symbol;
+            return /*#__PURE__*/ jsx(Comp, {
+                className: svgClassName
+            });
+        } else if (childrenProp) {
+            return /*#__PURE__*/ cloneElement(childrenProp, {
+                className: svgClassName
+            });
+        }
+        return null;
+    }, [
+        childrenProp,
+        svgClassName,
+        symbol
+    ]);
+    return /*#__PURE__*/ jsx("span", {
+        className: cls('root', size),
+        ...rest,
+        ref: ref,
+        children: children
+    });
+});
+Icon_Icon.displayName = 'SuiIcon';
+
+
+
+
+
+
+export { Icon as iconStyle, Icon_Icon as Icon };

package/chunks/8467.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+
+
+
+const AccordionContext = createContext({});
+const useAccordionContext = ()=>useContext(AccordionContext);
+
+export { AccordionContext, useAccordionContext };

package/chunks/8809.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+
+
+
+const TabsContext = /*#__PURE__*/ createContext({});
+const useTabsContext = ()=>useContext(TabsContext);
+
+export { TabsContext, useTabsContext };

package/chunks/{RadioGroup.context.js → 9551.js}

@@ -1,19 +1,25 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext } from "react";
+
+
 
 const RadioGroupContext = createContext({});
 function callbacksInSeries(...callbacks) {
-    return function (...params) {
-        callbacks.forEach((cb) => cb?.(...params));
+    return function(...params) {
+        callbacks.forEach((cb)=>cb?.(...params));
     };
 }
-function useRadioGroup({ name, value, checked, onChange, }) {
+function useRadioGroup({ name, value, checked, onChange }) {
     const context = useContext(RadioGroupContext);
     if (context.onChange) {
         name = context.name ?? name;
         checked = value === context.value;
         onChange = callbacksInSeries(onChange, context.onChange);
     }
-    return { name, checked, onChange };
+    return {
+        name,
+        checked,
+        onChange
+    };
 }
 
-export { RadioGroupContext as R, callbacksInSeries as c, useRadioGroup as u };
+export { RadioGroupContext, callbacksInSeries, useRadioGroup };

package/chunks/987.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+
+
+
+const TableRowContext = createContext({});
+const useTableRowContext = ()=>useContext(TableRowContext);
+
+export { TableRowContext, useTableRowContext };