@ringcentral/spring-ui 1.12.0 → 1.13.0

package/ListItemText.js

@@ -1,24 +1,51 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { h as hasContent } from './chunks/hasContent.js';
-import '@mui/utils';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { hasContent } from "./chunks/5047.js";
 
-var ListItemText$1 = {"sui-list-item-text-root":"sui-list-item-text-root","sui-list-item-text-primary-text":"sui-list-item-text-primary-text","sui-list-item-text-secondary-text":"sui-list-item-text-secondary-text","sui-list-item-text-primary":"sui-list-item-text-primary","sui-list-item-text-primary-primary-text":"sui-list-item-text-primary-primary-text","sui-list-item-text-secondary":"sui-list-item-text-secondary","sui-list-item-text-secondary-primary-text":"sui-list-item-text-secondary-primary-text"};
 
-const ListItemText = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'ListItemText' });
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var ListItemText = ({"sui-list-item-text-root":"sui-list-item-text-root","sui-list-item-text-primary-text":"sui-list-item-text-primary-text","sui-list-item-text-secondary-text":"sui-list-item-text-secondary-text","sui-list-item-text-primary":"sui-list-item-text-primary","sui-list-item-text-primary-primary-text":"sui-list-item-text-primary-primary-text","sui-list-item-text-secondary":"sui-list-item-text-secondary","sui-list-item-text-secondary-primary-text":"sui-list-item-text-secondary-primary-text"});
+
+
+
+
+
+
+const ListItemText_ListItemText = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'ListItemText'
+    });
     const { classes, className, primary, secondary, primaryText, secondaryText, variant = 'primary', children, ...rest } = props;
     const cls = useClasses('list-item-text', classes, className);
-    const primaryContent = hasContent(primary)
-        ? primary
-        : hasContent(primaryText)
-            ? primaryText
-            : children;
+    const primaryContent = hasContent(primary) ? primary : hasContent(primaryText) ? primaryText : children;
     const secondaryContent = hasContent(secondary) ? secondary : secondaryText;
-    return (jsxs("div", { className: cls('root', variant), ...rest, ref: ref, children: [jsx("span", { className: cls('primary-text', `${variant}-primary-text`), children: primaryContent }), hasContent(secondaryContent) && (jsx("span", { className: cls('secondary-text', `${variant}-secondary-text`), children: secondaryContent }))] }));
+    return /*#__PURE__*/ jsxs("div", {
+        className: cls('root', variant),
+        ...rest,
+        ref: ref,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: cls('primary-text', `${variant}-primary-text`),
+                children: primaryContent
+            }),
+            hasContent(secondaryContent) && /*#__PURE__*/ jsx("span", {
+                className: cls('secondary-text', `${variant}-secondary-text`),
+                children: secondaryContent
+            })
+        ]
+    });
 });
-ListItemText.displayName = 'SuiListItemText';
+ListItemText_ListItemText.displayName = 'SuiListItemText';
+
+
+
+
+
 
-export { ListItemText, ListItemText$1 as listItemTextStyle };
+export { ListItemText as listItemTextStyle, ListItemText_ListItemText as ListItemText };

package/ListNavigation.js

@@ -1,51 +1,303 @@
-import { u as useListNavigationContext } from './chunks/useListNavigation.js';
-export { L as ListNavigationContext, a as useListNavigation } from './chunks/useListNavigation.js';
-import { useRef } from 'react';
-import { tabbable } from 'tabbable';
-import 'react/jsx-runtime';
-import '@ringcentral/spring-base';
-
-const useItemNavigation = () => {
+import { createContext, useContext, useImperativeHandle, useMemo, useRef } from "react";
+import { tabbable } from "tabbable";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEventCallback } from "@ringcentral/spring-base";
+
+
+
+const ListNavigationContext = createContext(null);
+const useListNavigationContext = ()=>useContext(ListNavigationContext);
+
+
+
+
+
+
+// oxlint-disable-next-line sonarjs/cognitive-complexity
+const useItemNavigation = ()=>{
     const itemRef = useRef(null);
     const navContextValue = useListNavigationContext();
     if (navContextValue) {
         return {
             keyboardNavHandlers: {
-                onKeyDown: (e) => {
+                onKeyDown: (e)=>{
+                    // There some problems if `itemRef.current` is null.
+                    // oxlint-disable-next-line @typescript-eslint/no-non-null-assertion
                     const itemEl = itemRef.current;
+                    // All tabbable element in item. No include item self.
                     const allTabbable = tabbable(itemEl);
                     const { key, shiftKey, target, currentTarget } = e;
                     if (key === 'Tab') {
                         if (shiftKey) {
                             if (currentTarget === target) {
                                 navContextValue.onShiftTab();
-                            }
-                            else if (allTabbable.at(0) === target) {
+                            } else if (allTabbable.at(0) === target) {
+                                // prevent default focus logic
                                 e.preventDefault();
+                                // focus item manual, because tabindex of item is -1
                                 itemEl.focus();
                             }
-                        }
-                        else {
+                        } else {
                             if (allTabbable.at(-1) === target || !allTabbable.length) {
                                 navContextValue.onTab();
                             }
                         }
                     }
                 },
-                onFocus: (e) => {
+                onFocus: (e)=>{
                     navContextValue.updateFocusedItem(e.currentTarget);
                 },
-                onBlur: (e) => {
-                    if (e.relatedTarget &&
-                        !e.currentTarget.contains(e.relatedTarget)) {
+                onBlur: (e)=>{
+                    if (e.relatedTarget && !e.currentTarget.contains(e.relatedTarget)) {
                         navContextValue.updateFocusedItem(null);
                     }
-                },
+                }
             },
-            itemRef,
+            itemRef
         };
     }
     return null;
 };
 
-export { useItemNavigation, useListNavigationContext };
+
+
+
+
+
+
+
+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;
+        // oxlint-disable-next-line @typescript-eslint/no-non-null-assertion
+        listRef.current.focus();
+    };
+    const focusTabBoundary = ()=>{
+        skipEnforceFocusRef.current = true;
+        // oxlint-disable-next-line @typescript-eslint/no-non-null-assertion
+        sentinelTabBoundaryRef.current.focus();
+    };
+    const itemActions = useMemo(()=>({
+            // Prevent cache invalidation
+            // oxlint-disable-next-line sonarjs/no-identical-functions
+            onTab: ()=>{
+                skipEnforceFocusRef.current = true;
+                // oxlint-disable-next-line @typescript-eslint/no-non-null-assertion
+                sentinelTabBoundaryRef.current.focus();
+            },
+            // oxlint-disable-next-line sonarjs/no-identical-functions
+            onShiftTab: ()=>{
+                skipEnforceFocusRef.current = true;
+                // oxlint-disable-next-line @typescript-eslint/no-non-null-assertion
+                listRef.current.focus();
+            },
+            updateFocusedItem: (el)=>{
+                currentFocusedItemRef.current = el;
+            }
+        }), []);
+    const focusFirstItem = useEventCallback(()=>{
+        const { focused } = searchAndFocusItemHandler('first');
+        if (!focused) {
+            focusList();
+        }
+    });
+    useImperativeHandle(actions, ()=>({
+            focus: focusFirstItem
+        }), // oxlint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    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, {
+            // oxlint-disable-next-line @typescript-eslint/no-non-null-assertion
+            sentinelEnd: sentinelArrowNavRef.current,
+            // oxlint-disable-next-line @typescript-eslint/no-non-null-assertion
+            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 {
+            // cover case about all item are disabled
+            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 /*#__PURE__*/ jsxs(ListNavigationContext.Provider, {
+            value: itemActions,
+            children: [
+                items,
+                /*#__PURE__*/ jsx("div", {
+                    "aria-hidden": "true",
+                    ref: sentinelArrowNavRef
+                })
+            ]
+        });
+    };
+    const renderTabBoundary = ()=>{
+        return /*#__PURE__*/ jsx("div", {
+            // make sentinel end always render in scroller viewport center to
+            // prevent scroll when focus to sentinel end
+            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;
+    // Handle empty list - no items to focus, return focused: false so caller falls back to focusList()
+    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, useItemNavigation, useListNavigation, useListNavigationContext };

package/Menu.js

@@ -1,23 +1,139 @@
-export { M as Menu, a as MenuContext, u as useMenuContext } from './chunks/Menu.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
-import './chunks/useNestedParentMenu.js';
-import './chunks/Popover.js';
-import '@floating-ui/react-dom';
-import 'framer-motion';
-import './chunks/Icon.js';
-import './chunks/usePrefersReducedMotion.js';
-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';
-
-var Menu = {"sui-menu-paper":"sui-menu-paper","sui-menu-root":"sui-menu-root","sui-compact":"sui-compact"};
-
-export { Menu as menuStyle };
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo, useState } from "react";
+import { useEventCallback } from "@ringcentral/spring-base";
+import { useClassesWithMode, useThemeProps } from "@ringcentral/spring-theme";
+import { NestedMenuContext, useNestedParentMenu } from "./NestedMenuContext.js";
+import { Popover as Popover_Popover } from "./Popover.js";
+
+
+
+
+
+
+
+
+
+const overlayContainerStyle = {
+    display: 'contents'
+};
+// Internal-only context for nested submenu portal containers. Keep this
+// separate from NestedMenuContext, which only coordinates hover/open/close state.
+const MenuOverlayGroupContext = /*#__PURE__*/ createContext(null);
+const useMenuOverlayGroupContext = ()=>useContext(MenuOverlayGroupContext);
+const useMenuOverlayGroupValue = ()=>{
+    const [container, setContainer] = useState(null);
+    const value = useMemo(()=>({
+            container
+        }), [
+        container
+    ]);
+    return {
+        setContainer,
+        value
+    };
+};
+const MenuOverlayGroupContainer = (props)=>{
+    const { setContainer } = props;
+    return /*#__PURE__*/ jsx("div", {
+        "data-sui-menu-overlay-container": "",
+        ref: setContainer,
+        style: overlayContainerStyle
+    });
+};
+
+
+
+
+const MenuContext = createContext(null);
+const useMenuContext = ()=>{
+    return useContext(MenuContext);
+};
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Menu = ({"sui-menu-paper":"sui-menu-paper","sui-menu-root":"sui-menu-root","sui-compact":"sui-compact"});
+
+
+
+
+
+
+
+
+
+const Menu_Menu = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Menu'
+    });
+    const { classes, children, open = false, onClose, autoFocus = true, className, PopperProps, ...rest } = props;
+    const cls = useClassesWithMode('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 { contentClickHandlers, contentPointerHandlers, contextValue } = useNestedParentMenu({
+        open
+    });
+    const { setContainer: setOverlayContainer, value: overlayGroupValue } = useMenuOverlayGroupValue();
+    const closeHandler = useEventCallback(()=>{
+        onClose?.(undefined, 'Other');
+    });
+    const menuContextValue = useMemo(()=>{
+        // Reset autoFocus when menu closes to ensure focus logic re-runs on reopen.
+        const effectiveAutoFocus = open ? autoFocus : false;
+        return {
+            close: closeHandler,
+            autoFocus: effectiveAutoFocus
+        };
+    }, [
+        autoFocus,
+        closeHandler,
+        open
+    ]);
+    return /*#__PURE__*/ jsx(Popover_Popover, {
+        bordered: true,
+        className: cls('root'),
+        PopperProps: {
+            ...PopperProps,
+            padding: popperPadding
+        },
+        ...rest,
+        open: open,
+        onClose: (e, reason)=>{
+            onClose?.(e, reason);
+        },
+        ref: ref,
+        children: /*#__PURE__*/ jsxs(MenuOverlayGroupContext.Provider, {
+            value: overlayGroupValue,
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: cls('paper'),
+                    onClickCapture: contentClickHandlers.onClickCapture,
+                    onPointerMove: contentPointerHandlers.onPointerMove,
+                    children: /*#__PURE__*/ jsx(MenuContext.Provider, {
+                        value: menuContextValue,
+                        children: /*#__PURE__*/ jsx(NestedMenuContext.Provider, {
+                            value: contextValue,
+                            children: children
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx(MenuOverlayGroupContainer, {
+                    setContainer: setOverlayContainer
+                })
+            ]
+        })
+    });
+});
+Menu_Menu.displayName = 'SuiMenu';
+
+
+
+
+
+
+
+export { Menu as menuStyle, MenuContext, Menu_Menu as Menu, useMenuContext, useMenuOverlayGroupContext };

package/MenuActions.js

@@ -1,21 +1,46 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
 
-var MenuActions$1 = {"sui-menu-actions-root":"sui-menu-actions-root","sui-menu-actions-group-root":"sui-menu-actions-group-root"};
 
-const MenuActions = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'MenuActions' });
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var MenuActions = ({"sui-menu-actions-root":"sui-menu-actions-root","sui-menu-actions-group-root":"sui-menu-actions-group-root"});
+
+
+
+
+
+const MenuActions_MenuActions = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'MenuActions'
+    });
     const { classes, className, children, ...rest } = props;
     const cls = useClasses('menu-actions', classes, className);
-    return (jsx("div", { className: cls('root'), ...rest, ref: ref, children: children }));
+    return /*#__PURE__*/ jsx("div", {
+        className: cls('root'),
+        ...rest,
+        ref: ref,
+        children: children
+    });
 });
-MenuActions.displayName = 'SuiMenuActions';
-const MenuActionsGroup = ({ className, ...rest }) => {
+MenuActions_MenuActions.displayName = 'SuiMenuActions';
+const MenuActionsGroup = ({ className, ...rest })=>{
     const cls = useClasses('menu-actions-group', undefined, className);
-    return jsx("div", { className: cls('root'), ...rest });
+    return /*#__PURE__*/ jsx("div", {
+        className: cls('root'),
+        ...rest
+    });
 };
 MenuActionsGroup.displayName = 'SuiMenuActionsGroup';
 
-export { MenuActions, MenuActionsGroup, MenuActions$1 as menuActionsStyle };
+
+
+
+
+
+export { MenuActions as menuActionsStyle, MenuActionsGroup, MenuActions_MenuActions as MenuActions };

package/MenuDivider.js

@@ -1,10 +1,36 @@
-export { M as MenuDivider } from './chunks/MenuDivider.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-theme';
-import './chunks/Divider.js';
-import '@ringcentral/spring-base';
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClassesWithMode, useThemeProps } from "@ringcentral/spring-theme";
+import { Divider as Divider_Divider } from "./Divider.js";
 
-var MenuDivider = {"sui-menu-divider-root":"sui-menu-divider-root","sui-compact":"sui-compact"};
 
-export { MenuDivider as menuDividerStyle };
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var MenuDivider = ({"sui-menu-divider-root":"sui-menu-divider-root","sui-compact":"sui-compact"});
+
+
+
+
+
+const MenuDivider_MenuDivider = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'MenuDivider'
+    });
+    const { classes, className, ...rest } = props;
+    const cls = useClassesWithMode('menu-divider', classes, className);
+    return /*#__PURE__*/ jsx(Divider_Divider, {
+        className: cls('root'),
+        ...rest,
+        ref: ref
+    });
+});
+MenuDivider_MenuDivider.displayName = 'SuiMenuDivider';
+
+
+
+
+
+
+export { MenuDivider as menuDividerStyle, MenuDivider_MenuDivider as MenuDivider };