@ringcentral/spring-ui 1.12.0 → 1.13.0

package/MenuFooter.js

@@ -1,18 +1,42 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
-import { M as MenuDivider } from './chunks/MenuDivider.js';
-import './chunks/Divider.js';
-import '@ringcentral/spring-base';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClassesWithMode, useThemeProps } from "@ringcentral/spring-theme";
+import { MenuDivider as MenuDivider_MenuDivider } from "./MenuDivider.js";
 
-var MenuFooter$1 = {"sui-menu-footer-root":"sui-menu-footer-root","sui-compact":"sui-compact"};
 
-const MenuFooter = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'MenuFooter' });
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var MenuFooter = ({"sui-menu-footer-root":"sui-menu-footer-root","sui-compact":"sui-compact"});
+
+
+
+
+
+const MenuFooter_MenuFooter = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'MenuFooter'
+    });
     const { classes, className, children, divider = true, ...rest } = props;
     const cls = useClassesWithMode('menu-footer', classes, className);
-    return (jsxs(Fragment, { children: [divider && jsx(MenuDivider, {}), jsx("div", { className: cls('root'), ...rest, ref: ref, children: children })] }));
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            divider && /*#__PURE__*/ jsx(MenuDivider_MenuDivider, {}),
+            /*#__PURE__*/ jsx("div", {
+                className: cls('root'),
+                ...rest,
+                ref: ref,
+                children: children
+            })
+        ]
+    });
 });
-MenuFooter.displayName = 'SuiMenuFooter';
+MenuFooter_MenuFooter.displayName = 'SuiMenuFooter';
+
+
+
+
+
 
-export { MenuFooter, MenuFooter$1 as menuFooterStyle };
+export { MenuFooter as menuFooterStyle, MenuFooter_MenuFooter as MenuFooter };

package/MenuHeader.js

@@ -1,22 +1,60 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
-import { h as hasContent } from './chunks/hasContent.js';
-import '@mui/utils';
-import { M as MenuDivider } from './chunks/MenuDivider.js';
-import './chunks/Divider.js';
-import '@ringcentral/spring-base';
-
-var MenuHeader$1 = {"sui-menu-header-root":"sui-menu-header-root","sui-menu-header-title":"sui-menu-header-title","sui-menu-header-start":"sui-menu-header-start","sui-menu-header-end":"sui-menu-header-end","sui-compact":"sui-compact"};
-
-const MenuHeader = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'MenuHeader' });
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClassesWithMode, useThemeProps } from "@ringcentral/spring-theme";
+import { MenuDivider as MenuDivider_MenuDivider } from "./MenuDivider.js";
+import { hasContent } from "./chunks/5047.js";
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var MenuHeader = ({"sui-menu-header-root":"sui-menu-header-root","sui-menu-header-title":"sui-menu-header-title","sui-menu-header-start":"sui-menu-header-start","sui-menu-header-end":"sui-menu-header-end","sui-compact":"sui-compact"});
+
+
+
+
+
+
+const MenuHeader_MenuHeader = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'MenuHeader'
+    });
     const { classes, className, children, start, end, divider = true, ...rest } = props;
     const cls = useClassesWithMode('menu-header', classes, className);
     const hasStart = hasContent(start);
     const hasEnd = hasContent(end);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: cls('root'), ...rest, ref: ref, children: [hasStart && jsx("div", { className: cls('start'), children: start }), hasEnd && jsx("div", { className: cls('end'), children: end }), typeof children === 'string' ? (jsx("span", { className: cls('title'), title: children, children: children })) : (children)] }), divider && jsx(MenuDivider, {})] }));
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: cls('root'),
+                ...rest,
+                ref: ref,
+                children: [
+                    hasStart && /*#__PURE__*/ jsx("div", {
+                        className: cls('start'),
+                        children: start
+                    }),
+                    hasEnd && /*#__PURE__*/ jsx("div", {
+                        className: cls('end'),
+                        children: end
+                    }),
+                    typeof children === 'string' ? /*#__PURE__*/ jsx("span", {
+                        className: cls('title'),
+                        title: children,
+                        children: children
+                    }) : children
+                ]
+            }),
+            divider && /*#__PURE__*/ jsx(MenuDivider_MenuDivider, {})
+        ]
+    });
 });
-MenuHeader.displayName = 'SuiMenuHeader';
+MenuHeader_MenuHeader.displayName = 'SuiMenuHeader';
+
+
+
+
+
 
-export { MenuHeader, MenuHeader$1 as menuHeaderStyle };
+export { MenuHeader as menuHeaderStyle, MenuHeader_MenuHeader as MenuHeader };

package/MenuItem.js

@@ -1,35 +1,402 @@
-export { A as Action, M as MenuItem, a as MenuItemSelectContext, b as useMenuItem, c as useMenuItemSelect, u as useMenuItemSelectContext, d as useVirtualizedMenuItem } from './chunks/useMenuItemSelect.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-icon';
-import '@ringcentral/spring-theme';
-import './chunks/Icon.js';
-import './chunks/useAnimationFrame.js';
-import './chunks/useNestedParentMenu.js';
-import './chunks/useNestedMenuItem.js';
-import './VirtualizedList.js';
-import 'react-virtuoso';
-import './chunks/List.js';
-import './chunks/useListNavigation.js';
-import 'tabbable';
-import './chunks/composeEventHandlers.js';
-import '@mui/utils';
-import './ListNavigation.js';
-import './chunks/Menu.js';
-import './chunks/Popover.js';
-import '@floating-ui/react-dom';
-import 'framer-motion';
-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 MenuItem = {"sui-menu-item-container":"sui-menu-item-container","sui-menu-item-select-indicator":"sui-menu-item-select-indicator","sui-menu-item-select-dot":"sui-menu-item-select-dot","sui-menu-item-root":"sui-menu-item-root","sui-selected":"sui-selected","sui-disabled":"sui-disabled","sui-spruno":"sui-spruno","sui-list-item-text":"sui-list-item-text","sui-focus-visible":"sui-focus-visible","sui-focused":"sui-focused","sui-active":"sui-active","sui-menu-item-nowrap":"sui-menu-item-nowrap","sui-menu-item-text":"sui-menu-item-text","sui-menu-item-selectable":"sui-menu-item-selectable","sui-menu-item-highlighted":"sui-menu-item-highlighted","sui-compact":"sui-compact","sui-menu-item":"sui-menu-item"};
-
-export { MenuItem as menuItemStyle };
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useCallback, useContext, useLayoutEffect, useMemo, useRef } from "react";
+import { combineProps, useActive, useEventCallback, useFocusVisible, useForkRef, useHover, useId } from "@ringcentral/spring-base";
+import { CheckBoldMd } from "@ringcentral/spring-icon";
+import { useClassesWithMode, useThemeProps } from "@ringcentral/spring-theme";
+import { useItemNavigation } from "./ListNavigation.js";
+import { useMenuContext } from "./Menu.js";
+import { composeEventHandlers } from "./chunks/4491.js";
+import { useVirtualizedItemPropsContext } from "./VirtualizedList.js";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
+import { useAnimationFrame } from "./chunks/6335.js";
+import { useNestedMenuItem } from "./NestedMenuContext.js";
+
+
+
+
+
+
+
+
+/**
+ * Note: intentionally do NOT set a default value in this context.
+ * MenuItem wraps when this is omitted.
+ */ const MenuListContext = createContext({});
+const useMenuListContext = ()=>useContext(MenuListContext);
+
+
+
+/**
+ * When a `MenuItem` is used as a `SubMenu` trigger, `SubMenu` provides the same
+ * id here so `useNestedMenuItem` registers the same identity as the parent hook.
+ *
+ * Not re-exported from the package barrel — import only from this module inside spring-ui.
+ */ const SubMenuTriggerNestedIdContext = /*#__PURE__*/ createContext(null);
+
+
+
+const MenuItemSelectContext = // oxlint-disable-next-line @typescript-eslint/no-explicit-any
+createContext(null);
+const useMenuItemSelectContext = ()=>useContext(MenuItemSelectContext);
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var MenuItem = ({"sui-menu-item-container":"sui-menu-item-container","sui-menu-item-select-indicator":"sui-menu-item-select-indicator","sui-menu-item-select-dot":"sui-menu-item-select-dot","sui-menu-item-root":"sui-menu-item-root","sui-selected":"sui-selected","sui-disabled":"sui-disabled","sui-spruno":"sui-spruno","sui-list-item-text":"sui-list-item-text","sui-focus-visible":"sui-focus-visible","sui-focused":"sui-focused","sui-active":"sui-active","sui-menu-item-nowrap":"sui-menu-item-nowrap","sui-menu-item-text":"sui-menu-item-text","sui-menu-item-selectable":"sui-menu-item-selectable","sui-menu-item-highlighted":"sui-menu-item-highlighted","sui-compact":"sui-compact","sui-menu-item":"sui-menu-item"});
+
+/**
+ * Passes `value` to `ref`.
+ *
+ * WARNING: Only call this inside a callback that is passed as a ref.
+ * Otherwise, clean up the previous `ref` if it changes.
+ *
+ * @param ref A ref callback or ref object. If falsy, this is a no-op.
+ */ function setRef(ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+    } else if (ref) {
+        ref.current = value;
+    }
+}
+
+
+
+
+
+const useMenuItem = (props)=>{
+    const { onBlur, onFocus, onKeyDown, onKeyUp, onClick, ref, disabled, autoClose } = props;
+    const { keyboardNavHandlers, itemRef } = useItemNavigation() ?? {};
+    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible({
+        onFocus: (e)=>{
+            keyboardNavHandlers?.onFocus(e);
+            onFocus?.(e);
+        },
+        onBlur: (e)=>{
+            keyboardNavHandlers?.onBlur(e);
+            onBlur?.(e);
+        }
+    });
+    const { close: closeMenu } = useMenuContext() ?? {};
+    const handleClick = disabled ? undefined : composeEventHandlers(onClick, ()=>{
+        if (autoClose) closeMenu?.();
+    });
+    const { active, activeHandlers } = useActive({
+        disabled,
+        onKeyDown: (e)=>{
+            onKeyDown?.(e);
+            keyboardNavHandlers?.onKeyDown(e);
+        },
+        onKeyUp,
+        onClick: handleClick
+    });
+    const handleItemRef = useForkRef(ref, focusVisibleRef, itemRef);
+    // oxlint-disable-next-line @typescript-eslint/no-explicit-any
+    const getRootProps = (otherProps = {})=>{
+        const { ref: otherRef, ...restOtherProps } = otherProps;
+        return {
+            role: 'menuitem',
+            tabIndex: '-1',
+            ...disabled ? {
+                'aria-disabled': true
+            } : null,
+            ...combineProps(restOtherProps, {
+                ...focusVisibleHandlers,
+                ...activeHandlers
+            }),
+            ref: (instance)=>{
+                setRef(otherRef, instance);
+                setRef(handleItemRef, instance);
+            }
+        };
+    };
+    return {
+        getRootProps,
+        focusVisible,
+        active
+    };
+};
+
+
+
+
+
+
+
+const useVirtualizedMenuItem = (props)=>{
+    const { onBlur, onFocus, onKeyDown, onKeyUp, onClick, disabled, autoClose, ref } = props;
+    const { keyboardNavHandlers, itemRef } = useItemNavigation() ?? {};
+    const vlItemProps = useVirtualizedItemPropsContext();
+    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = // oxlint-disable-next-line react-hooks/rules-of-hooks
+    useFocusVisible({
+        onFocus: (e)=>{
+            keyboardNavHandlers?.onFocus(e);
+            onFocus?.(e);
+        },
+        onBlur: (e)=>{
+            keyboardNavHandlers?.onBlur(e);
+            onBlur?.(e);
+        }
+    });
+    const { close: closeMenu } = useMenuContext() ?? {};
+    const handleClick = disabled ? undefined : composeEventHandlers(onClick, ()=>{
+        if (autoClose) closeMenu?.();
+    });
+    const { active, activeHandlers } = useActive({
+        disabled,
+        onKeyDown: (e)=>{
+            onKeyDown?.(e);
+            keyboardNavHandlers?.onKeyDown(e);
+        },
+        onKeyUp,
+        onClick: handleClick
+    });
+    const handleItemRef = useForkRef(ref, focusVisibleRef, itemRef);
+    // oxlint-disable-next-line @typescript-eslint/no-explicit-any
+    const getRootProps = (otherProps = {})=>{
+        const { ref: otherRef, ...restOtherProps } = otherProps;
+        return {
+            role: 'menuitem',
+            tabIndex: -1,
+            ...disabled ? {
+                'aria-disabled': true
+            } : null,
+            ...combineProps(restOtherProps, {
+                ...focusVisibleHandlers,
+                ...activeHandlers,
+                ...vlItemProps
+            }),
+            ref: (instance)=>{
+                setRef(otherRef, instance);
+                setRef(handleItemRef, instance);
+            }
+        };
+    };
+    return {
+        getRootProps,
+        focusVisible,
+        active
+    };
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const MenuItem_MenuItem = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'MenuItem'
+    });
+    const { classes, className, children, selected, disabled, onMouseEnter, onMouseLeave, onPointerMove, onBlur, onFocus, onKeyDown, onKeyUp, onClick, highlighted = false, focused = false, autoClose = true, autoFocus, nowrap, ...rest } = props;
+    const cls = useClassesWithMode('menu-item', classes, className);
+    const vlItemProps = useVirtualizedItemPropsContext();
+    const isInVlRef = useRef(Boolean(vlItemProps));
+    const { requestAnimationFrame } = useAnimationFrame();
+    const useMenuItemHook = (()=>{
+        if (isInVlRef.current) {
+            return useVirtualizedMenuItem;
+        } else {
+            return useMenuItem;
+        }
+    })();
+    const itemRef = useRef(null);
+    const handleRef = useForkRef(itemRef, ref);
+    const { getRootProps, focusVisible, active } = useMenuItemHook({
+        autoClose,
+        disabled,
+        onBlur,
+        onClick,
+        onFocus,
+        onKeyDown,
+        onKeyUp,
+        ref: handleRef
+    });
+    const selectable = !(selected === undefined);
+    const selectContextValue = useMenuItemSelectContext();
+    const menuListContextValue = useMenuListContext();
+    const resolvedNowrap = nowrap ?? menuListContextValue.nowrap ?? false;
+    const selectMode = selectContextValue ? selectContextValue.selectMode : 'single';
+    const subMenuTriggerNestedId = useContext(SubMenuTriggerNestedIdContext);
+    const generatedId = useId();
+    const id = subMenuTriggerNestedId ?? generatedId;
+    const isSubMenuTrigger = Boolean(subMenuTriggerNestedId);
+    const { requestItemHover } = useNestedMenuItem({
+        id
+    });
+    const { hoverHandlers } = useHover({
+        onMouseEnter,
+        onMouseLeave
+    });
+    const handlePointerMove = (event)=>{
+        if (event.pointerType === 'mouse' && !requestItemHover(event, {
+            closeOpenedSubMenu: !isSubMenuTrigger
+        })) {
+            event.preventDefault();
+        }
+        onPointerMove?.(event);
+    };
+    useLayoutEffect(()=>{
+        if (autoFocus) {
+            itemRef.current?.focus();
+            requestAnimationFrame(()=>{
+                if (// jsdom doesn't support scrollIntoView, this avoids users needing to bring their own mock
+                process.env.NODE_ENV === 'test' && typeof itemRef.current?.scrollIntoView !== 'function') {
+                    return;
+                }
+                itemRef.current?.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'nearest'
+                });
+            });
+        }
+    }, [
+        autoFocus,
+        requestAnimationFrame
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: cls('root', {
+            selectable,
+            selected,
+            focusVisible,
+            disabled,
+            active,
+            highlighted,
+            focused,
+            nowrap: resolvedNowrap
+        }),
+        ...getRootProps(rest),
+        ...hoverHandlers,
+        onPointerMove: handlePointerMove,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: cls('container'),
+            children: [
+                selectable && /*#__PURE__*/ jsx("div", {
+                    className: cls('select-indicator'),
+                    children: selectMode === 'single' ? /*#__PURE__*/ jsx("span", {
+                        className: cls('select-dot')
+                    }) : /*#__PURE__*/ jsx(Icon_Icon, {
+                        symbol: CheckBoldMd,
+                        size: "small"
+                    })
+                }),
+                children
+            ]
+        })
+    });
+});
+MenuItem_MenuItem.displayName = 'SuiMenuItem';
+
+
+
+
+
+
+var useMenuItemSelect_Action = /*#__PURE__*/ function(Action) {
+    Action["SELECT"] = "select";
+    Action["DESELECT"] = "deselect";
+    return Action;
+}({});
+const useMenuItemSelect = (props)=>{
+    const { widget = 'menu', selectMode = 'single', value: valueProp = selectMode === 'single' ? null : [], onChange, onClose, autoFocus: autoFocusProp = true } = props;
+    const isSingleMode = selectMode === 'single';
+    if (process.env.NODE_ENV !== 'production' && !isSingleMode && !Array.isArray(valueProp)) {
+        throw Error('SPRING [useMenuItemSelect]: value must be an array if selectMode is multiple');
+    }
+    const value = valueProp;
+    const getMenuItemProps = useCallback((itemValue)=>{
+        let selected;
+        let autoFocus;
+        if (isSingleMode) {
+            selected = value === itemValue;
+            autoFocus = selected;
+        } else {
+            selected = value.includes(itemValue);
+            autoFocus = value[0] === itemValue;
+        }
+        const menuItemRole = selectMode === 'single' ? 'menuitemradio' : 'menuitemcheckbox';
+        // Use appropriate ARIA attributes based on widget type and role:
+        // - For listbox/option pattern: use aria-selected
+        // - For menu with selectable items: use menuitemradio/menuitemcheckbox with aria-checked
+        const ariaProps = widget === 'menu' ? {
+            'aria-checked': selected
+        } : {
+            'aria-selected': selected
+        };
+        return {
+            role: widget === 'menu' ? menuItemRole : 'option',
+            ...ariaProps,
+            selected,
+            autoFocus: autoFocusProp && autoFocus
+        };
+    }, [
+        isSingleMode,
+        selectMode,
+        widget,
+        autoFocusProp,
+        value
+    ]);
+    const handleSelect = useEventCallback((itemValue)=>{
+        let action = "select";
+        if (isSingleMode) {
+            // User clicked on an already selected item
+            if (value === itemValue) {
+                onClose?.();
+            } else {
+                onChange?.(itemValue);
+            }
+        } else {
+            const index = value.indexOf(itemValue);
+            let newValue;
+            if (index >= 0) {
+                action = "deselect";
+                newValue = [
+                    ...value.slice(0, index),
+                    ...value.slice(index + 1)
+                ];
+            } else {
+                newValue = [
+                    ...value,
+                    itemValue
+                ];
+            }
+            onChange?.(newValue, {
+                value: itemValue,
+                action
+            });
+        }
+    });
+    const contextValue = useMemo(()=>({
+            selectMode,
+            value,
+            handleSelect,
+            getMenuItemProps
+        }), [
+        getMenuItemProps,
+        handleSelect,
+        selectMode,
+        value
+    ]);
+    return {
+        value,
+        contextValue
+    };
+};
+
+
+
+
+
+
+
+
+
+export { MenuItem as menuItemStyle, MenuItemSelectContext, MenuItem_MenuItem as MenuItem, MenuListContext, SubMenuTriggerNestedIdContext, useMenuItem, useMenuItemSelect, useMenuItemSelectContext, useMenuItemSelect_Action as Action, useMenuListContext, useVirtualizedMenuItem };

package/MenuItemText.js

@@ -1,11 +1,53 @@
-export { M as MenuItemText } from './chunks/MenuItemText.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
-import './chunks/hasContent.js';
-import '@mui/utils';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getTitle } from "@ringcentral/spring-base";
+import { useClassesWithMode, useThemeProps } from "@ringcentral/spring-theme";
+import { hasContent } from "./chunks/5047.js";
 
-var MenuItemText = {"sui-menu-item-text-root":"sui-menu-item-text-root","sui-menu-item-text-primary-text":"sui-menu-item-text-primary-text","sui-menu-item-text-info-text":"sui-menu-item-text-info-text","sui-compact":"sui-compact"};
 
-export { MenuItemText as menuItemTextStyle };
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var MenuItemText = ({"sui-menu-item-text-root":"sui-menu-item-text-root","sui-menu-item-text-primary-text":"sui-menu-item-text-primary-text","sui-menu-item-text-info-text":"sui-menu-item-text-info-text","sui-compact":"sui-compact"});
+
+
+
+
+
+
+const MenuItemText_MenuItemText = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'MenuItemText'
+    });
+    const { classes, className, primary, primaryText, infoText, info, children, ...rest } = props;
+    const cls = useClassesWithMode('menu-item-text', classes, className);
+    const primaryContent = primary ?? primaryText ?? children;
+    const secondaryContent = info ?? infoText;
+    return /*#__PURE__*/ jsxs("div", {
+        className: cls('root'),
+        ...rest,
+        ref: ref,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: cls('primary-text'),
+                title: getTitle(primaryContent),
+                children: primaryContent
+            }),
+            hasContent(secondaryContent) && /*#__PURE__*/ jsx("span", {
+                className: cls('info-text'),
+                title: getTitle(secondaryContent),
+                children: secondaryContent
+            })
+        ]
+    });
+});
+MenuItemText_MenuItemText.displayName = 'SuiMenuItemText';
+
+
+
+
+
+
+export { MenuItemText as menuItemTextStyle, MenuItemText_MenuItemText as MenuItemText };