@ringcentral/spring-ui 1.11.2 → 1.13.0

package/chunks/VirtualizedMenu.js

@@ -1,164 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useLayoutEffect, forwardRef, useState, useMemo, useEffect } from 'react';
-import { useForkRef, combineProps, useClasses, useEventCallback } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import clsx from 'clsx';
-import { u as useAnimationFrame } from './useAnimationFrame.js';
-import { P as Popover } from './Popover.js';
-import { VirtualizedList } from '../VirtualizedList.js';
-
-const VirtualizedMenuContext = createContext(null);
-const useVirtualizedMenuContext = () => useContext(VirtualizedMenuContext);
-
-const VirtualizedMenuList = (props) => {
-    const { children, actions: actionsProp, initialFocus: initialFocusProps, totalListHeightChanged: totalListHeightChangedProp, ...rest } = props;
-    const actions = useRef(null);
-    const handleListActions = useForkRef(actions, actionsProp);
-    const listRef = useRef(null);
-    const virtualizedMenuContext = useVirtualizedMenuContext();
-    useLayoutEffect(() => {
-        if (!virtualizedMenuContext?.open) {
-            return;
-        }
-        const initialFocus = typeof initialFocusProps === 'function'
-            ? initialFocusProps()
-            : initialFocusProps;
-        if (initialFocus === true) {
-            actions.current?.focus();
-        }
-        else if (typeof initialFocus === 'number') {
-            actions.current?.focusByIndex(initialFocus);
-        }
-    }, [virtualizedMenuContext?.open]);
-    return (jsx(VirtualizedList, { actions: handleListActions, ...rest, ListProps: combineProps({
-            role: 'menu',
-        }, rest.ListProps), ref: listRef, totalListHeightChanged: totalListHeightChangedProp, children: children }));
-};
-
-const MENU_VERTICAL_PADDING = 8;
-const VirtualizedMenu = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'VirtualizedMenu' });
-    const { classes, className, children, open, onClose, data, totalCount, isItemDisabled, VirtualizedListProps, popperActions: popperActionsProp, initialFocus = true, maxHeight, PopperProps, ...rest } = props;
-    const popperPaperContentRef = useRef(null);
-    const paperContentContainerRef = useRef(null);
-    const hasItemsRenderedRef = useRef(false);
-    const [waitForHeightCompute, setWaitForHeightCompute] = useState(true);
-    const [menuHeight, setMenuHeight] = useState(MENU_VERTICAL_PADDING * 2);
-    const [deferPendingVirtualizedListActions, setDeferPendingVirtualizedListActions,] = useState(true);
-    const computedListHeight = useRef(-1);
-    const availableHeight = useRef(-1);
-    const cls = useClasses('virtualized-menu', 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);
-    const popperActions = useRef(null);
-    const handlePopperActions = useForkRef(popperActions, popperActionsProp);
-    const { requestAnimationFrame } = useAnimationFrame();
-    const menuContextValue = useMemo(() => {
-        return { open };
-    }, [open]);
-    const updateMenuHeight = useEventCallback(() => {
-        let computedMenuHeight = computedListHeight.current;
-        if (computedMenuHeight > availableHeight.current) {
-            computedMenuHeight = availableHeight.current;
-        }
-        if (maxHeight !== undefined && computedMenuHeight > maxHeight) {
-            computedMenuHeight = maxHeight;
-        }
-        setMenuHeight(computedMenuHeight);
-    });
-    const updatePopoverHeight = useEventCallback(() => {
-        if (!popperPaperContentRef.current)
-            return;
-        popperPaperContentRef.current.style.maxHeight = `${availableHeight.current}px`;
-        if (paperContentContainerRef.current) {
-            paperContentContainerRef.current.style.height = `auto`;
-        }
-    });
-    const handleTotalListHeightChanged = useEventCallback((listHeight) => {
-        if (!hasItemsRenderedRef.current) {
-            return;
-        }
-        const adjustedHeight = listHeight + MENU_VERTICAL_PADDING * 2
-            ;
-        computedListHeight.current = adjustedHeight;
-        if (paperContentContainerRef.current) {
-            paperContentContainerRef.current.style.height = `${adjustedHeight}px`;
-        }
-        updateMenuHeight();
-        popperActions.current?.update();
-        if (waitForHeightCompute) {
-            requestAnimationFrame(() => {
-                setDeferPendingVirtualizedListActions(false);
-                requestAnimationFrame(() => {
-                    setWaitForHeightCompute(false);
-                });
-            });
-        }
-    });
-    const handleAvailableHeightChange = useEventCallback((value) => {
-        if (computedListHeight.current === -1 || !hasItemsRenderedRef.current) {
-            return;
-        }
-        availableHeight.current = value;
-        updateMenuHeight();
-        updatePopoverHeight();
-    });
-    useEffect(() => {
-        if (!open) {
-            hasItemsRenderedRef.current = false;
-        }
-        if (open) {
-            if (computedListHeight.current !== -1) {
-                updateMenuHeight();
-                setWaitForHeightCompute(false);
-                setDeferPendingVirtualizedListActions(false);
-                popperActions.current?.update();
-            }
-            else {
-                setMenuHeight(MENU_VERTICAL_PADDING * 2);
-                setWaitForHeightCompute(true);
-                setDeferPendingVirtualizedListActions(true);
-            }
-            if (popperPaperContentRef.current) {
-                popperPaperContentRef.current.style.maxHeight = 'none';
-            }
-        }
-    }, [open]);
-    return (jsx(Popover, { bordered: true, PopperProps: { ...PopperProps, padding: popperPadding }, ...rest, open: open, className: clsx(cls('root'), waitForHeightCompute && 'opacity-0'), PopperPaperProps: {
-            contentRef: popperPaperContentRef,
-        }, onClose: onClose, onAvailableHeightChange: handleAvailableHeightChange, ref: ref, motionProps: { variants: undefined }, actions: handlePopperActions, children: jsx("div", { className: cls('paper'), children: jsx("div", { ref: paperContentContainerRef, className: cls('paper-content-container'), children: jsx(VirtualizedMenuContext.Provider, { value: menuContextValue, children: jsx(VirtualizedMenuList, { data: data, totalCount: totalCount, isReady: !deferPendingVirtualizedListActions, isItemDisabled: isItemDisabled, initialFocus: initialFocus, style: { height: menuHeight }, ...combineProps(VirtualizedListProps, {
-                            ListProps: combineProps(VirtualizedListProps?.ListProps, {
-                                className: cls('list'),
-                                style: {
-                                    ['--sui-virtualized-menu-vertical-padding']: `${MENU_VERTICAL_PADDING}px`,
-                                },
-                            }),
-                            totalListHeightChanged: handleTotalListHeightChanged,
-                            itemsRendered: (items) => {
-                                if (totalCount === 0 ||
-                                    (totalCount === undefined &&
-                                        data !== undefined &&
-                                        data.length === 0) ||
-                                    (items && items.length > 0)) {
-                                    hasItemsRenderedRef.current = true;
-                                }
-                                VirtualizedListProps?.itemsRendered?.(items);
-                            },
-                            onKeyDown: (e) => {
-                                if (e.key === 'Tab') {
-                                    e.preventDefault();
-                                    onClose?.();
-                                }
-                            },
-                        }), children: children }) }) }) }) }));
-});
-VirtualizedMenu.displayName = 'SuiVirtualizedMenu';
-
-export { VirtualizedMenuContext as V, VirtualizedMenu as a, VirtualizedMenuList as b, useVirtualizedMenuContext as u };

package/chunks/VisuallyHidden.js

@@ -1,12 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-
-const VisuallyHidden = forwardRef((props, ref) => {
-    const { classes, className, children, ...rest } = props;
-    const cls = useClasses('visually-hidden', classes, className);
-    return (jsx("span", { className: cls('root'), ...rest, ref: ref, children: children }));
-});
-VisuallyHidden.displayName = 'SuiVisuallyHidden';
-
-export { VisuallyHidden as V };

package/chunks/getFade.js

@@ -1,27 +0,0 @@
-import { motionTransition } from '@ringcentral/spring-theme';
-
-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',
-            transitionEnd: {
-                pointerEvents: undefined,
-            },
-        },
-    },
-});
-
-export { getFade as g };

package/chunks/getGrow.js

@@ -1,70 +0,0 @@
-import { motionTransition } from '@ringcentral/spring-theme';
-
-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;
-};
-
-export { getTransformOriginStringForPlacement as a, getGrow as g };

package/chunks/getSlideIn.js

@@ -1,30 +0,0 @@
-import { motionTransition } from '@ringcentral/spring-theme';
-
-const horizontal = ['right', 'left'];
-const plus = ['right', 'bottom'];
-const getSlideIn = ({ toggle = true, from = 'right', prefersReducedMotion = false, toggleOnTransition, toggleOffTransition, } = {}) => {
-    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
-            : motionTransition['spring-01-fast'],
-    };
-};
-
-export { getSlideIn as g };

package/chunks/hasContent.js

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

package/chunks/useAnimationFrame.js

@@ -1,15 +0,0 @@
-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 as u };

package/chunks/useFocusTrapStack.js

@@ -1,36 +0,0 @@
-import { useEffect } from 'react';
-import { useWindowContext, useId, useEventCallback } from '@ringcentral/spring-base';
-
-const FOCUS_TRAP_STACK = '__SUI_FOCUS_TRAP_STACK__';
-const getFocusTrapStack = (global) => {
-    if (!global[FOCUS_TRAP_STACK]) {
-        global[FOCUS_TRAP_STACK] = [];
-    }
-    return global[FOCUS_TRAP_STACK];
-};
-const useFocusTrapStack = ({ open, }) => {
-    const { globalThis } = useWindowContext();
-    const id = useId();
-    useEffect(() => {
-        if (open) {
-            const stack = getFocusTrapStack(globalThis);
-            stack.push(id);
-        }
-        return () => {
-            const stack = getFocusTrapStack(globalThis);
-            const index = stack.indexOf(id);
-            if (index >= 0) {
-                stack.splice(index, 1);
-            }
-        };
-    }, [open]);
-    const isEnabled = useEventCallback(() => {
-        const stack = getFocusTrapStack(globalThis);
-        return stack.at(-1) === id;
-    });
-    return {
-        isEnabled,
-    };
-};
-
-export { useFocusTrapStack as u };

package/chunks/useHelperTextId.js

@@ -1,22 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-
-const FormField = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'FormField' });
-    const { classes, className, children, htmlFor, label, labelProps, helperText, required, disabled, error, variant = 'standard', size = 'xlarge', contentRef, contentProps, focused, FormHelperTextProps, ...rest } = props;
-    const cls = useClasses('form-field', classes, className);
-    return (jsxs("div", { ...rest, ref: ref, className: cls('root', variant, { disabled, error, focused }), "aria-disabled": disabled, children: [label && (jsxs("label", { htmlFor: htmlFor, ...labelProps, className: clsx(cls('label', `${variant}-label`, error && 'error-label'), labelProps?.className), children: [label, required ? ' *' : ''] })), jsxs("div", { className: cls('container', error && 'error-container'), children: [jsx("div", { className: cls('content', size, `${size}-content`, `${variant}-${size}`, `${variant}-content`, error && 'error-content', error && `error-${variant}-content`), ref: contentRef, ...contentProps, children: children }), jsx("div", { className: cls('focus-effect', `${variant}-focus-effect`, error && 'error-focus-effect') })] }), helperText && (jsx("div", { ...FormHelperTextProps, className: clsx(cls('helper-text', error && 'error-helper-text'), FormHelperTextProps?.className), children: helperText }))] }));
-});
-FormField.displayName = 'SuiFormField';
-
-const useHelperTextId = ({ helperText, id, FormHelperTextProps, }) => {
-    if (!helperText) {
-        return undefined;
-    }
-    return FormHelperTextProps?.id || `${id}-helper-text`;
-};
-
-export { FormField as F, useHelperTextId as u };

package/chunks/useListNavigation.js

@@ -1,199 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useEventCallback } from '@ringcentral/spring-base';
-import { createContext, useContext, useRef, useMemo, useImperativeHandle } from 'react';
-
-const ListNavigationContext = createContext(null);
-const useListNavigationContext = () => useContext(ListNavigationContext);
-
-const useListNavigation = (props) => {
-    const { preventContainerScroll = true, searchAndFocusItemHandler: searchAndFocusItemHandlerProp = defaultSearchAndFocusItem, actions, } = props;
-    const currentFocusedItemRef = useRef(null);
-    const listRef = useRef(null);
-    const sentinelArrowNavRef = useRef(null);
-    const sentinelTabBoundaryRef = useRef(null);
-    const skipEnforceFocusRef = useRef(false);
-    const focusList = () => {
-        skipEnforceFocusRef.current = true;
-        listRef.current.focus();
-    };
-    const focusTabBoundary = () => {
-        skipEnforceFocusRef.current = true;
-        sentinelTabBoundaryRef.current.focus();
-    };
-    const itemActions = useMemo(() => ({
-        onTab: () => {
-            skipEnforceFocusRef.current = true;
-            sentinelTabBoundaryRef.current.focus();
-        },
-        onShiftTab: () => {
-            skipEnforceFocusRef.current = true;
-            listRef.current.focus();
-        },
-        updateFocusedItem: (el) => {
-            currentFocusedItemRef.current = el;
-        },
-    }), []);
-    const focusFirstItem = useEventCallback(() => {
-        const { focused } = searchAndFocusItemHandler('first');
-        if (!focused) {
-            focusList();
-        }
-    });
-    useImperativeHandle(actions, () => ({
-        focus: focusFirstItem,
-    }), []);
-    const sentinelFocusHandler = (e) => {
-        if (e.target === e.currentTarget) {
-            const skipEnforceFocus = skipEnforceFocusRef.current;
-            if (skipEnforceFocus) {
-                skipEnforceFocusRef.current = false;
-                return;
-            }
-            focusFirstItem();
-        }
-    };
-    const searchAndFocusItemHandler = (searchElementOption) => {
-        return searchAndFocusItemHandlerProp(searchElementOption, {
-            sentinelEnd: sentinelArrowNavRef.current,
-            list: listRef.current,
-        });
-    };
-    const listKeyDownHandler = (e) => {
-        const focusedItem = currentFocusedItemRef.current;
-        const key = e.key;
-        if (focusedItem) {
-            const searchElementOption = {
-                ArrowDown: {
-                    baseElement: focusedItem,
-                    direction: 'down',
-                },
-                ArrowUp: {
-                    baseElement: focusedItem,
-                    direction: 'up',
-                },
-                Home: 'first',
-                End: 'last',
-            }[key];
-            if (searchElementOption) {
-                const { focused, isAfterBaseElement } = searchAndFocusItemHandler(searchElementOption);
-                if (!focused) {
-                    focusList();
-                }
-                if (!isAfterBaseElement || preventContainerScroll) {
-                    e.preventDefault();
-                }
-            }
-        }
-        else {
-            if (e.target === e.currentTarget && key === 'Tab' && !e.shiftKey) {
-                focusTabBoundary();
-            }
-        }
-    };
-    const getListProps = (otherHandler) => {
-        const { onKeyDown, onFocus } = otherHandler;
-        const handleKeyDown = (e) => {
-            onKeyDown?.(e);
-            if (e.defaultPrevented) {
-                return;
-            }
-            listKeyDownHandler(e);
-        };
-        const handleFocus = (e) => {
-            sentinelFocusHandler(e);
-            onFocus?.(e);
-        };
-        return {
-            tabIndex: 0,
-            onKeyDown: handleKeyDown,
-            onFocus: handleFocus,
-        };
-    };
-    const renderItems = (items) => {
-        return (jsxs(ListNavigationContext.Provider, { value: itemActions, children: [items, jsx("div", { "aria-hidden": "true", ref: sentinelArrowNavRef })] }));
-    };
-    const renderTabBoundary = () => {
-        return (jsx("div", { style: { position: 'fixed', bottom: '50%' }, ref: sentinelTabBoundaryRef, tabIndex: 0, onFocus: sentinelFocusHandler }));
-    };
-    return { renderItems, renderTabBoundary, getListProps, listRef };
-};
-const isUnfocusable = (el) => el.matches('.sui-disabled, :disabled, hr, [role="separator"], [disabled]');
-const defaultSearchAndFocusItem = (searchElementOption, helperElements) => {
-    const { list, sentinelEnd } = helperElements;
-    if (list.firstElementChild === sentinelEnd) {
-        return { focused: false };
-    }
-    const getFirstItem = () => {
-        const firstItem = list.firstElementChild;
-        if (firstItem === sentinelEnd) {
-            throw Error('SPRING [useListNavigation]: must have child element');
-        }
-        return firstItem;
-    };
-    const getLastItem = () => {
-        const lastItem = sentinelEnd.previousElementSibling;
-        if (!lastItem) {
-            throw Error('SPRING [useListNavigation]: must have child element');
-        }
-        return lastItem;
-    };
-    let direction;
-    let startElement;
-    if (typeof searchElementOption === 'string') {
-        if (searchElementOption === 'first') {
-            startElement = getFirstItem();
-            direction = 'down';
-        }
-        else {
-            startElement = getLastItem();
-            direction = 'up';
-        }
-        if (!isUnfocusable(startElement)) {
-            startElement.focus();
-            return { focused: true };
-        }
-    }
-    else {
-        startElement = searchElementOption.baseElement;
-        direction = searchElementOption.direction;
-    }
-    let pointer = startElement;
-    let isAfterBaseElement = true;
-    if (direction === 'up') {
-        do {
-            if (!pointer.previousElementSibling) {
-                pointer = getLastItem();
-                isAfterBaseElement = false;
-            }
-            else {
-                pointer = pointer.previousElementSibling;
-            }
-            if (!isUnfocusable(pointer)) {
-                break;
-            }
-        } while (pointer !== startElement);
-    }
-    else {
-        do {
-            if (pointer.nextElementSibling === sentinelEnd) {
-                pointer = getFirstItem();
-                isAfterBaseElement = false;
-            }
-            else {
-                pointer = pointer.nextElementSibling;
-            }
-            if (!isUnfocusable(pointer)) {
-                break;
-            }
-        } while (pointer !== startElement);
-    }
-    if (isUnfocusable(pointer)) {
-        return { focused: false };
-    }
-    pointer.focus();
-    return typeof searchElementOption === 'string'
-        ? { focused: true }
-        : { focused: true, isAfterBaseElement };
-};
-
-export { ListNavigationContext as L, useListNavigation as a, useListNavigationContext as u };