@ringcentral/spring-ui 1.12.0 → 1.13.0

package/Dropdown.js

@@ -1,129 +1,206 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useEffect } from 'react';
-import { useControlled, useClasses, useEventCallback, combineProps, useFocusVisible, useForkRef } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { E as ExpandCollapseCaret } from './chunks/ExpandCollapseCaret.js';
-import 'framer-motion';
-import './chunks/Icon.js';
-import { M as Menu } from './chunks/Menu.js';
-import { c as useMenuItemSelect, a as MenuItemSelectContext } from './chunks/useMenuItemSelect.js';
-import '@mui/utils';
-import 'tabbable';
-import './chunks/useListNavigation.js';
-import './VirtualizedList.js';
-import { M as MenuList } from './chunks/MenuList.js';
-import { S as Squircle } from './chunks/Squircle.js';
-import { a as VirtualizedMenu } from './chunks/VirtualizedMenu.js';
-import './chunks/useMotionSafeTransition.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/useNestedParentMenu.js';
-import './chunks/Popover.js';
-import '@floating-ui/react-dom';
-import './chunks/getGrow.js';
-import './chunks/Modal.js';
-import '@mui/base';
-import './chunks/getFade.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './Popper.js';
-import './chunks/PopperPaper.js';
-import '@ringcentral/spring-icon';
-import './chunks/useAnimationFrame.js';
-import './chunks/useNestedMenuItem.js';
-import './chunks/composeEventHandlers.js';
-import './ListNavigation.js';
-import 'react-virtuoso';
-import './chunks/List.js';
-import 'clsx';
-
-var Dropdown$1 = {"sui-dropdown-value":"sui-dropdown-value","sui-dropdown-chevron":"sui-dropdown-chevron","sui-dropdown-button":"sui-dropdown-button","sui-focus-visible":"sui-focus-visible","sui-dropdown-label":"sui-dropdown-label","sui-dropdown-colon":"sui-dropdown-colon","sui-dropdown-activated":"sui-dropdown-activated","sui-dropdown-root":"sui-dropdown-root","sui-disabled":"sui-disabled"};
-
-const Dropdown = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Dropdown' });
-    const { classes, className, children, defaultOpen, open: openProp, onOpenChange, autoFocus = false, disabled, virtualize = true, MenuProps, rootProps, buttonProps: buttonPropsProp = {}, value: valueProp, defaultValue = null, onChange: onChangeProp, renderValue = String, placeholder, label, buttonRef, getSelectedIndex = (value) => {
-        return data.findIndex((v) => v === value);
-    }, data, } = props;
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { combineProps, useClasses, useControlled, useEventCallback, useFocusVisible, useForkRef } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import "./chunks/4476.js";
+import { Menu as Menu_Menu } from "./Menu.js";
+import { MenuItemSelectContext, useMenuItemSelect, MenuListContext } from "./MenuItem.js";
+import { MenuList as MenuList_MenuList } from "./MenuList.js";
+import "./Squircle.js";
+import { VirtualizedMenu as VirtualizedMenu_VirtualizedMenu } from "./VirtualizedMenu.js";
+import { Squircle as Squircle_Squircle } from "./chunks/1250.js";
+import { ExpandCollapseCaret as ExpandCollapseCaret_ExpandCollapseCaret } from "./chunks/1294.js";
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Dropdown = ({"sui-dropdown-value":"sui-dropdown-value","sui-dropdown-chevron":"sui-dropdown-chevron","sui-dropdown-button":"sui-dropdown-button","sui-focus-visible":"sui-focus-visible","sui-dropdown-label":"sui-dropdown-label","sui-dropdown-colon":"sui-dropdown-colon","sui-dropdown-activated":"sui-dropdown-activated","sui-dropdown-root":"sui-dropdown-root","sui-disabled":"sui-disabled"});
+
+
+
+
+
+
+
+
+
+
+
+const Dropdown_Dropdown = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Dropdown'
+    });
+    const { classes, className, children, defaultOpen, open: openProp, onOpenChange, autoFocus = false, disabled, virtualize = true, MenuProps, rootProps, buttonProps: buttonPropsProp = {}, value: valueProp, defaultValue = null, onChange: onChangeProp, renderValue = String, placeholder, label, buttonRef, getSelectedIndex = (value)=>{
+        return data.findIndex((v)=>v === value);
+    }, data } = props;
     const [anchorEl, setAnchorEl] = useState(null);
     const [open, setOpen] = useControlled({
         controlled: openProp,
         default: defaultOpen,
         name: 'SuiSelect',
-        state: 'open',
+        state: 'open'
     });
     const chevronRef = useRef(null);
-    useEffect(() => {
+    useEffect(()=>{
         setAnchorEl(chevronRef.current);
     }, []);
     const cls = useClasses('dropdown', classes, className);
-    const handleOpen = useEventCallback((isOpen) => {
+    const handleOpen = useEventCallback((isOpen)=>{
+        // prevent trigger onOpenChange when open state is not change
         if (open !== isOpen) {
+            // for uncontrolled mode
             setOpen(isOpen);
+            // for controlled mode
             onOpenChange?.(isOpen);
         }
     });
-    const handleClose = useEventCallback(() => {
+    const handleClose = useEventCallback(()=>{
         handleOpen(false);
     });
     const [value, setValue] = useControlled({
         controlled: valueProp,
         default: defaultValue,
         name: 'SuiDropdown',
-        state: 'value',
+        state: 'value'
     });
-    const handleMenuListChange = useEventCallback((newValue) => {
+    const handleMenuListChange = useEventCallback((newValue)=>{
+        // for uncontrolled mode
         setValue(newValue);
+        // for controlled mode
         onChangeProp?.(newValue);
         handleOpen(false);
     });
     const { contextValue: virtualizedMenuContextValue } = useMenuItemSelect({
         value,
         onChange: handleMenuListChange,
-        onClose: handleClose,
+        onClose: handleClose
     });
+    const menuListContextValue = useMemo(()=>({
+            nowrap: true
+        }), []);
     const buttonProps = combineProps({
-        onClick: () => {
-            if (!disabled && !open)
-                handleOpen(true);
+        onClick: ()=>{
+            if (!disabled && !open) handleOpen(true);
         },
-        onKeyDown: (e) => {
+        onKeyDown: (e)=>{
             if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                // prevent scroll
                 e.preventDefault();
-                if (!disabled)
-                    handleOpen(true);
+                if (!disabled) handleOpen(true);
             }
-        },
+        }
     }, buttonPropsProp);
     const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(buttonProps);
     const handleButtonRef = useForkRef(buttonRef, focusVisibleRef);
-    useEffect(() => {
+    useEffect(()=>{
+        // close menu when disabled
         if (disabled) {
             handleOpen(false);
         }
-    }, [disabled, handleOpen]);
+    }, [
+        disabled,
+        handleOpen
+    ]);
     const baseMenuProps = {
-        placement: 'top',
+        placement: 'bottom',
         open,
         anchorEl,
-        onClose: handleClose,
+        onClose: handleClose
     };
     let menu = null;
     if (!virtualize) {
-        menu = (jsx(Menu, { ...baseMenuProps, ...MenuProps, children: jsx(MenuList, { value: value, onChange: handleMenuListChange, nowrap: false, widget: "menu", children: children }) }));
-    }
-    else {
-        menu = (jsx(MenuItemSelectContext.Provider, { value: virtualizedMenuContextValue, children: jsx(VirtualizedMenu, { ...baseMenuProps, ...MenuProps, initialFocus: () => {
-                    if (value !== null)
-                        return getSelectedIndex(value);
+        menu = /*#__PURE__*/ jsx(Menu_Menu, {
+            ...baseMenuProps,
+            ...MenuProps,
+            children: /*#__PURE__*/ jsx(MenuList_MenuList, {
+                value: value,
+                onChange: handleMenuListChange,
+                nowrap: menuListContextValue.nowrap,
+                widget: "menu",
+                children: children
+            })
+        });
+    } else {
+        menu = /*#__PURE__*/ jsx(MenuItemSelectContext.Provider, {
+            value: virtualizedMenuContextValue,
+            children: /*#__PURE__*/ jsx(VirtualizedMenu_VirtualizedMenu, {
+                ...baseMenuProps,
+                ...MenuProps,
+                initialFocus: ()=>{
+                    if (value !== null) return getSelectedIndex(value);
                     return true;
-                }, data: data, children: children }) }));
+                },
+                data: data,
+                children: children
+            })
+        });
     }
-    return (jsxs(Fragment, { children: [jsxs("div", { "aria-disabled": disabled, ...rootProps, className: cls('root', {
-                    disabled,
-                }), ref: ref, children: [label && (jsxs(Fragment, { children: [jsx("span", { className: cls('label'), children: label }), jsx("span", { className: cls('colon'), children: ":" })] })), jsxs("button", { className: cls('button', {
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                "aria-disabled": disabled,
+                ...rootProps,
+                className: cls('root', {
+                    disabled
+                }),
+                ref: ref,
+                children: [
+                    label && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: cls('label'),
+                                children: label
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: cls('colon'),
+                                children: ":"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("button", {
+                        className: cls('button', {
                             activated: open,
-                            focusVisible,
-                        }), ...buttonProps, ...focusVisibleHandlers, type: "button", autoFocus: autoFocus && !disabled, disabled: disabled, ref: handleButtonRef, children: [jsx("span", { className: cls('value'), children: value === null ? placeholder : renderValue(value) }), jsx(Squircle, { className: cls('chevron'), interactive: false, ref: chevronRef, children: jsx(ExpandCollapseCaret, { size: 'small', expanded: open }) })] })] }), anchorEl && menu] }));
+                            focusVisible
+                        }),
+                        ...buttonProps,
+                        ...focusVisibleHandlers,
+                        type: "button",
+                        autoFocus: autoFocus && !disabled,
+                        disabled: disabled,
+                        ref: handleButtonRef,
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: cls('value'),
+                                children: value === null ? placeholder : renderValue(value)
+                            }),
+                            /*#__PURE__*/ jsx(Squircle_Squircle, {
+                                className: cls('chevron'),
+                                interactive: false,
+                                ref: chevronRef,
+                                children: /*#__PURE__*/ jsx(ExpandCollapseCaret_ExpandCollapseCaret, {
+                                    size: 'small',
+                                    expanded: open
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(MenuListContext.Provider, {
+                value: menuListContextValue,
+                children: anchorEl && menu
+            })
+        ]
+    });
 });
-Dropdown.displayName = 'SuiDropdown';
+Dropdown_Dropdown.displayName = 'SuiDropdown';
+
+
+
+
+
 
-export { Dropdown, Dropdown$1 as dropdownStyle };
+export { Dropdown as dropdownStyle, Dropdown_Dropdown as Dropdown };

package/EmptyState.js

@@ -1,19 +1,69 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses, getTitle } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { h as hasContent } from './chunks/hasContent.js';
-import '@mui/utils';
-import { I as Icon } from './chunks/Icon.js';
-
-var EmptyState$1 = {"sui-empty-state-root":"sui-empty-state-root","sui-empty-state-icon":"sui-empty-state-icon","sui-empty-state-text-container":"sui-empty-state-text-container","sui-empty-state-title":"sui-empty-state-title","sui-empty-state-description":"sui-empty-state-description","sui-empty-state-actions":"sui-empty-state-actions"};
-
-const EmptyState = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'EmptyState' });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getTitle, useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
+import { hasContent } from "./chunks/5047.js";
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var EmptyState = ({"sui-empty-state-root":"sui-empty-state-root","sui-empty-state-icon":"sui-empty-state-icon","sui-empty-state-text-container":"sui-empty-state-text-container","sui-empty-state-title":"sui-empty-state-title","sui-empty-state-description":"sui-empty-state-description","sui-empty-state-actions":"sui-empty-state-actions"});
+
+
+
+
+
+
+
+const EmptyState_EmptyState = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'EmptyState'
+    });
     const { classes, className, title, description, icon, actions, ...rest } = props;
     const cls = useClasses('empty-state', classes, className);
-    return (jsxs("div", { ...rest, ref: ref, className: cls('root'), children: [icon && (jsx("div", { className: cls('icon'), children: jsx(Icon, { size: "xxxlarge", symbol: icon }) })), (hasContent(title) || hasContent(description)) && (jsxs("div", { className: cls('text-container'), children: [hasContent(title) && (jsx("span", { className: cls('title'), title: getTitle(title), children: title })), hasContent(description) && (jsx("span", { className: cls('description'), title: getTitle(description), children: description }))] })), actions && actions.length > 0 && (jsx("div", { className: cls('actions'), children: actions }))] }));
+    return /*#__PURE__*/ jsxs("div", {
+        ...rest,
+        ref: ref,
+        className: cls('root'),
+        children: [
+            icon && /*#__PURE__*/ jsx("div", {
+                className: cls('icon'),
+                children: /*#__PURE__*/ jsx(Icon_Icon, {
+                    size: "xxxlarge",
+                    symbol: icon
+                })
+            }),
+            (hasContent(title) || hasContent(description)) && /*#__PURE__*/ jsxs("div", {
+                className: cls('text-container'),
+                children: [
+                    hasContent(title) && /*#__PURE__*/ jsx("span", {
+                        className: cls('title'),
+                        title: getTitle(title),
+                        children: title
+                    }),
+                    hasContent(description) && /*#__PURE__*/ jsx("span", {
+                        className: cls('description'),
+                        title: getTitle(description),
+                        children: description
+                    })
+                ]
+            }),
+            actions && actions.length > 0 && /*#__PURE__*/ jsx("div", {
+                className: cls('actions'),
+                children: actions
+            })
+        ]
+    });
 });
-EmptyState.displayName = 'SuiEmptyState';
+EmptyState_EmptyState.displayName = 'SuiEmptyState';
+
+
+
+
+
 
-export { EmptyState, EmptyState$1 as emptyStateStyle };
+export { EmptyState as emptyStateStyle, EmptyState_EmptyState as EmptyState };

package/FabButton.js

@@ -1,32 +1,66 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
-import { useButton } from '@mui/base';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { I as Icon } from './chunks/Icon.js';
-import { S as Squircle } from './chunks/Squircle.js';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { useButton } from "@mui/base";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
+import { Squircle as Squircle_Squircle } from "./chunks/1250.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var FabButton = ({"sui-fab-button-root":"sui-fab-button-root","sui-fab-button-large":"sui-fab-button-large","sui-fab-button-small":"sui-fab-button-small","sui-fab-button-activated":"sui-fab-button-activated","sui-active":"sui-active"});
+
+
+
+
+
+
 
-var FabButton$1 = {"sui-fab-button-root":"sui-fab-button-root","sui-fab-button-large":"sui-fab-button-large","sui-fab-button-small":"sui-fab-button-small","sui-fab-button-activated":"sui-fab-button-activated","sui-active":"sui-active"};
 
 const IconSizeMap = {
     large: 'medium',
-    small: 'small',
+    small: 'small'
 };
-const FabButton = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'FabButton' });
+const FabButton_FabButton = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'FabButton'
+    });
     const { classes, className, symbol, size = 'large', onClick, ...rest } = props;
     const [activated, setActivated] = useState(false);
     const cls = useClasses('fab-button', classes, className);
-    const clickHandler = (e) => {
-        setActivated((pre) => !pre);
+    const clickHandler = (e)=>{
+        setActivated((pre)=>!pre);
         onClick && onClick(e);
     };
     const { getRootProps, focusVisible } = useButton({
         ...props,
-        rootRef: ref,
+        rootRef: ref
+    });
+    return /*#__PURE__*/ jsx(Squircle_Squircle, {
+        component: "button",
+        className: cls('root', size, {
+            activated
+        }),
+        focusVisible: focusVisible,
+        ...rest,
+        ...getRootProps(),
+        onClick: clickHandler,
+        children: /*#__PURE__*/ jsx(Icon_Icon, {
+            size: IconSizeMap[size],
+            symbol: symbol
+        })
     });
-    return (jsx(Squircle, { component: "button", className: cls('root', size, { activated }), focusVisible: focusVisible, ...rest, ...getRootProps(), onClick: clickHandler, children: jsx(Icon, { size: IconSizeMap[size], symbol: symbol }) }));
 });
-FabButton.displayName = 'SuiFabButton';
+FabButton_FabButton.displayName = 'SuiFabButton';
+
+
+
+
+
 
-export { FabButton, FabButton$1 as fabButtonStyle };
+export { FabButton as fabButtonStyle, FabButton_FabButton as FabButton };

package/FocusTrap.js

@@ -1,16 +1,113 @@
-import { jsx } from 'react/jsx-runtime';
-import { FocusTrap as FocusTrap$1 } from '@mui/base';
-import { useImperativeHandle } from 'react';
-import { u as useFocusTrapStack } from './chunks/useFocusTrapStack.js';
-import '@ringcentral/spring-base';
+import { jsx } from "react/jsx-runtime";
+import { FocusTrap } from "@mui/base";
+import { useEffect, useImperativeHandle } from "react";
+import { useEventCallback, useId, useWindowContext } from "@ringcentral/spring-base";
 
-const FocusTrap = (props) => {
+
+
+
+
+
+
+
+const FOCUS_TRAP_STACK = '__SUI_FOCUS_TRAP_STACK__';
+// use global to ensure the work in the same window
+const getFocusTrapStack = (global)=>{
+    // @ts-ignore
+    if (!global[FOCUS_TRAP_STACK]) {
+        // @ts-ignore
+        global[FOCUS_TRAP_STACK] = [];
+    }
+    // @ts-ignore
+    return global[FOCUS_TRAP_STACK];
+};
+/**
+ * Hook to manage focus trap stack for proper layering and focus management
+ */ const useFocusTrapStack = ({ open })=>{
+    const { globalThis } = useWindowContext();
+    const id = useId();
+    useEffect(()=>{
+        if (open) {
+            const stack = getFocusTrapStack(globalThis);
+            if (stack.indexOf(id) < 0) {
+                stack.push(id);
+            }
+        }
+        return ()=>{
+            const stack = getFocusTrapStack(globalThis);
+            const index = stack.indexOf(id);
+            if (index >= 0) {
+                stack.splice(index, 1);
+            }
+        };
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        open
+    ]);
+    const isEnabled = useEventCallback(()=>{
+        const stack = getFocusTrapStack(globalThis);
+        return stack.at(-1) === id;
+    });
+    return {
+        isEnabled
+    };
+};
+
+
+
+
+
+/**
+ * Utility component that locks focus inside the component.
+ *
+ * @deprecated This component is deprecated. Use `useFocusTrapStack` hook directly with MUI's FocusTrap instead.
+ *
+ * @example
+ * ```tsx
+ * import { FocusTrap } from '@mui/base';
+ * import { useFocusTrapStack } from '@ringcentral/spring-ui';
+ *
+ * function MyModal({ open, children }) {
+ *   // Call useFocusTrapStack where the `open` prop changes first (typically in Modal/Dialog)
+ *   // This prevents race conditions between stack registration and autofocus behavior
+ *   const { isEnabled } = useFocusTrapStack({ open });
+ *
+ *   return open ? (
+ *     <Portal>
+ *       <div className="modal-backdrop">
+ *         <FocusTrap
+ *           open={open}
+ *           isEnabled={isEnabled}
+ *         >
+ *           <div className="modal-content" tabIndex={-1}>
+ *             {children}
+ *           </div>
+ *         </FocusTrap>
+ *       </div>
+ *     </Portal>
+ *   ) : null;
+ * }
+ * ```
+ */ const FocusTrap_FocusTrap = (props)=>{
     const { open, children, action, ...rest } = props;
-    const { isEnabled } = useFocusTrapStack({ open });
-    useImperativeHandle(action, () => ({
-        isEnabled,
-    }), [isEnabled]);
-    return (jsx(FocusTrap$1, { ...rest, open: open, isEnabled: isEnabled, children: children }));
+    const { isEnabled } = useFocusTrapStack({
+        open
+    });
+    useImperativeHandle(action, ()=>({
+            isEnabled
+        }), [
+        isEnabled
+    ]);
+    return /*#__PURE__*/ jsx(FocusTrap, {
+        ...rest,
+        open: open,
+        isEnabled: isEnabled,
+        children: children
+    });
 };
 
-export { FocusTrap, useFocusTrapStack };
+
+
+
+
+export { FocusTrap_FocusTrap as FocusTrap, useFocusTrapStack };