@ringcentral/spring-ui 1.12.0 → 1.13.0

package/SubMenu.js

@@ -1,128 +1,159 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useState, useCallback, useEffect, useRef } from 'react';
-import { useClasses, useWindowContext, useForkRef, useId, useFocusVisible, useEventCallback } from '@ringcentral/spring-base';
-import { a as useNestedParentMenu, N as NestedMenuContext } from './chunks/useNestedParentMenu.js';
-import { Popper } from './Popper.js';
-import { CaretRightMd } from '@ringcentral/spring-icon';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { I as Icon } from './chunks/Icon.js';
-import { S as SubMenuTriggerNestedIdContext, M as MenuItem } from './chunks/useMenuItemSelect.js';
-import '@mui/utils';
-import 'tabbable';
-import './chunks/useListNavigation.js';
-import { b as useMenuOverlayGroupContext } from './chunks/Menu.js';
-import './VirtualizedList.js';
-import { useNestedChildMenu } from './NestedMenuContext.js';
-import { u as useNestedMenuItem } from './chunks/useNestedMenuItem.js';
-import { M as MenuItemText } from './chunks/MenuItemText.js';
-import '@floating-ui/react-dom';
-import './chunks/Modal.js';
-import '@mui/base';
-import 'framer-motion';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getFade.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './chunks/useAnimationFrame.js';
-import './chunks/composeEventHandlers.js';
-import './ListNavigation.js';
-import './chunks/Popover.js';
-import './chunks/getGrow.js';
-import './chunks/PopperPaper.js';
-import 'react-virtuoso';
-import './chunks/List.js';
-import './chunks/hasContent.js';
-
-var PopperMenu$1 = {"sui-popper-menu-root":"sui-popper-menu-root","sui-popper-menu-paper":"sui-popper-menu-paper"};
-
-const PopperMenu = forwardRef((props, ref) => {
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { useClasses, useEventCallback, useFocusVisible, useForkRef, useId, useWindowContext } from "@ringcentral/spring-base";
+import { CaretRightMd } from "@ringcentral/spring-icon";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { useNestedParentMenu, useNestedChildMenu, useNestedMenuItem, NestedMenuContext } from "./NestedMenuContext.js";
+import { Popper } from "./Popper.js";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
+import { SubMenuTriggerNestedIdContext, MenuItem as MenuItem_MenuItem } from "./MenuItem.js";
+import { useMenuOverlayGroupContext } from "./Menu.js";
+import { MenuItemText as MenuItemText_MenuItemText } from "./MenuItemText.js";
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var PopperMenu = ({"sui-popper-menu-root":"sui-popper-menu-root","sui-popper-menu-paper":"sui-popper-menu-paper"});
+
+
+
+
+
+
+const PopperMenu_PopperMenu = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { classes, children, actions, className, onClickCapture, onPointerMove, ...rest } = props;
     const cls = useClasses('popper-menu', classes, className);
     const { contentClickHandlers, contentPointerHandlers, contextValue } = useNestedParentMenu({
-        open: true,
+        open: true
     });
-    return (jsx(Popper, { className: cls('root'), ...rest, onClickCapture: (event) => {
+    return /*#__PURE__*/ jsx(Popper, {
+        className: cls('root'),
+        ...rest,
+        onClickCapture: (event)=>{
             onClickCapture?.(event);
             contentClickHandlers.onClickCapture(event);
-        }, onPointerMove: (event) => {
+        },
+        onPointerMove: (event)=>{
             onPointerMove?.(event);
             contentPointerHandlers.onPointerMove(event);
-        }, ref: ref, children: jsx("div", { className: cls('paper'), children: jsx(NestedMenuContext.Provider, { value: contextValue, children: children }) }) }));
+        },
+        ref: ref,
+        children: /*#__PURE__*/ jsx("div", {
+            className: cls('paper'),
+            children: /*#__PURE__*/ jsx(NestedMenuContext.Provider, {
+                value: contextValue,
+                children: children
+            })
+        })
+    });
 });
-PopperMenu.displayName = 'SuiPopperMenu';
+PopperMenu_PopperMenu.displayName = 'SuiPopperMenu';
+
+
+
+
+
 
-const useSubMenuInteractionState = ({ open, focusVisibleWithin, isPointerGraceActive, clearPointerGrace, }) => {
+
+
+
+const useSubMenuInteractionState = ({ open, focusVisibleWithin, isPointerGraceActive, clearPointerGrace })=>{
     const [hasEnteredMenuContent, setHasEnteredMenuContent] = useState(false);
     const [isPointerInsideTrigger, setIsPointerInsideTrigger] = useState(false);
-    const resetInteractionState = useCallback(() => {
+    const resetInteractionState = useCallback(()=>{
         setHasEnteredMenuContent(false);
         setIsPointerInsideTrigger(false);
     }, []);
-    const markTriggerPointerMoved = useCallback(() => {
+    const markTriggerPointerMoved = useCallback(()=>{
         setIsPointerInsideTrigger(true);
         setHasEnteredMenuContent(false);
     }, []);
-    const markTriggerPointerLeft = useCallback(() => {
+    const markTriggerPointerLeft = useCallback(()=>{
         setIsPointerInsideTrigger(false);
         setHasEnteredMenuContent(false);
     }, []);
-    const markMenuContentEntered = useCallback(() => {
+    const markMenuContentEntered = useCallback(()=>{
         setHasEnteredMenuContent(true);
         clearPointerGrace();
-    }, [clearPointerGrace]);
-    const shouldKeepSubMenuOpen = isPointerInsideTrigger ||
-        hasEnteredMenuContent ||
-        focusVisibleWithin ||
-        isPointerGraceActive;
-    useEffect(() => {
+    }, [
+        clearPointerGrace
+    ]);
+    const shouldKeepSubMenuOpen = isPointerInsideTrigger || hasEnteredMenuContent || focusVisibleWithin || isPointerGraceActive;
+    useEffect(()=>{
         if (!open) {
             resetInteractionState();
         }
-    }, [open, resetInteractionState]);
+    }, [
+        open,
+        resetInteractionState
+    ]);
     return {
         markTriggerPointerLeft,
         markTriggerPointerMoved,
         markMenuContentEntered,
         resetInteractionState,
-        shouldKeepSubMenuOpen,
+        shouldKeepSubMenuOpen
     };
 };
 
+
+
+
+
 const POINTER_GRACE_TIMEOUT = 300;
 const POINTER_GRACE_BLEED = 5;
-const getSubMenuSide = (anchorRect, menuRect) => {
+const getSubMenuSide = (anchorRect, menuRect)=>{
     const anchorCenterX = anchorRect.left + anchorRect.width / 2;
     const menuCenterX = menuRect.left + menuRect.width / 2;
     return menuCenterX >= anchorCenterX ? 'right' : 'left';
 };
-const getPointerGraceIntent = (event, menuRect, side) => {
+const getPointerGraceIntent = (event, menuRect, side)=>{
     const bleed = side === 'right' ? -POINTER_GRACE_BLEED : POINTER_GRACE_BLEED;
     const contentNearEdge = menuRect[side === 'right' ? 'left' : 'right'];
     const contentFarEdge = menuRect[side === 'right' ? 'right' : 'left'];
     return {
         area: [
-            { x: event.clientX + bleed, y: event.clientY },
-            { x: contentNearEdge, y: menuRect.top },
-            { x: contentFarEdge, y: menuRect.top },
-            { x: contentFarEdge, y: menuRect.bottom },
-            { x: contentNearEdge, y: menuRect.bottom },
+            {
+                x: event.clientX + bleed,
+                y: event.clientY
+            },
+            {
+                x: contentNearEdge,
+                y: menuRect.top
+            },
+            {
+                x: contentFarEdge,
+                y: menuRect.top
+            },
+            {
+                x: contentFarEdge,
+                y: menuRect.bottom
+            },
+            {
+                x: contentNearEdge,
+                y: menuRect.bottom
+            }
         ],
-        side,
+        side
     };
 };
-const useSubMenuPointerGrace = (props) => {
+const useSubMenuPointerGrace = (props)=>{
     const { isPointerMovingToSubMenu, onPointerGraceIntentChange } = props;
     const { externalWindow, globalThis: contextGlobal } = useWindowContext();
     const contextWindow = externalWindow ?? contextGlobal;
     const [isPointerGraceActive, setIsPointerGraceActive] = useState(false);
     const timerRef = useRef();
-    const clearPointerGrace = useCallback(() => {
+    const clearPointerGrace = useCallback(()=>{
         contextWindow.clearTimeout(timerRef.current);
         timerRef.current = undefined;
         setIsPointerGraceActive(false);
         onPointerGraceIntentChange?.(null);
-    }, [contextWindow, onPointerGraceIntentChange]);
-    const startPointerGrace = useCallback((event, anchorElement, menuElement) => {
+    }, [
+        contextWindow,
+        onPointerGraceIntentChange
+    ]);
+    const startPointerGrace = useCallback((event, anchorElement, menuElement)=>{
         if (!anchorElement || !menuElement) {
             clearPointerGrace();
             return;
@@ -148,23 +179,43 @@ const useSubMenuPointerGrace = (props) => {
         clearPointerGrace,
         contextWindow,
         isPointerMovingToSubMenu,
-        onPointerGraceIntentChange,
+        onPointerGraceIntentChange
     ]);
-    useEffect(() => {
+    useEffect(()=>{
         return clearPointerGrace;
-    }, [clearPointerGrace]);
+    }, [
+        clearPointerGrace
+    ]);
     return {
         isPointerGraceActive,
         clearPointerGrace,
-        startPointerGrace,
+        startPointerGrace
     };
 };
 
-const isSubMenuNavigationOpenEvent = (event) => ['ArrowRight'].includes(event.key);
-const isSubMenuKeyboardActivationEvent = (event) => (event.type === 'keydown' && event.key === 'Enter') ||
-    (event.type === 'keyup' && event.key === ' ');
-const SubMenu = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'SubMenu' });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const isSubMenuNavigationOpenEvent = (event)=>[
+        'ArrowRight'
+    ].includes(event.key);
+const isSubMenuKeyboardActivationEvent = (event)=>event.type === 'keydown' && event.key === 'Enter' || event.type === 'keyup' && event.key === ' ';
+const SubMenu = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'SubMenu'
+    });
     const { classes, children, itemContent, onClick: onClickProp, onKeyDown: onKeyDownProp, onPointerLeave: onPointerLeaveProp, onPointerMove: onPointerMoveProp, disabled, ...rest } = props;
     const [anchor, setAnchor] = useState(null);
     const itemRef = useRef(null);
@@ -172,21 +223,23 @@ const SubMenu = forwardRef((inProps, ref) => {
     const menuRef = useRef(null);
     const open = Boolean(anchor);
     const id = useId();
-    const { isPointerMovingToSubMenu, onPointerGraceIntentChange } = useNestedMenuItem({ id });
+    const { isPointerMovingToSubMenu, onPointerGraceIntentChange } = useNestedMenuItem({
+        id
+    });
     const { isPointerGraceActive, clearPointerGrace, startPointerGrace } = useSubMenuPointerGrace({
         isPointerMovingToSubMenu,
-        onPointerGraceIntentChange,
+        onPointerGraceIntentChange
     });
     const { focusVisibleWithin, focusVisibleHandlers } = useFocusVisible({
-        within: true,
+        within: true
     });
-    const { markTriggerPointerLeft, markTriggerPointerMoved, markMenuContentEntered, resetInteractionState, shouldKeepSubMenuOpen, } = useSubMenuInteractionState({
+    const { markTriggerPointerLeft, markTriggerPointerMoved, markMenuContentEntered, resetInteractionState, shouldKeepSubMenuOpen } = useSubMenuInteractionState({
         open,
         focusVisibleWithin,
         isPointerGraceActive,
-        clearPointerGrace,
+        clearPointerGrace
     });
-    const closeSubMenu = useEventCallback((options) => {
+    const closeSubMenu = useEventCallback((options)=>{
         if (options?.restoreFocus) {
             itemRef.current?.focus();
         }
@@ -196,7 +249,7 @@ const SubMenu = forwardRef((inProps, ref) => {
     });
     const overlayGroupContext = useMenuOverlayGroupContext();
     const overlayContainer = overlayGroupContext?.container;
-    const handleTriggerPointerMove = (event) => {
+    const handleTriggerPointerMove = (event)=>{
         onPointerMoveProp?.(event);
         if (event.pointerType !== 'mouse' || event.defaultPrevented || disabled) {
             return;
@@ -209,32 +262,45 @@ const SubMenu = forwardRef((inProps, ref) => {
         clearPointerGrace();
         setAnchor(event.currentTarget);
     };
-    const handleTriggerPointerLeave = (event) => {
+    const handleTriggerPointerLeave = (event)=>{
         onPointerLeaveProp?.(event);
         if (event.pointerType === 'mouse') {
             markTriggerPointerLeft();
             startPointerGrace(event, itemRef.current, menuRef.current);
         }
     };
-    const openSubMenuFromTrigger = (trigger) => {
+    const openSubMenuFromTrigger = (trigger)=>{
         markMenuContentEntered();
         setAnchor(trigger);
     };
-    const getAnchorElement = useCallback(() => itemRef.current, []);
+    const getAnchorElement = useCallback(()=>itemRef.current, []);
     useNestedChildMenu({
         open,
         closeMenu: closeSubMenu,
         getAnchorElement,
-        id,
+        id
     });
-    useEffect(() => {
-        if (!open)
-            return;
+    useEffect(()=>{
+        if (!open) return;
         if (!shouldKeepSubMenuOpen) {
             closeSubMenu();
         }
-    }, [closeSubMenu, open, shouldKeepSubMenuOpen]);
-    return (jsxs(Fragment, { children: [jsx(SubMenuTriggerNestedIdContext.Provider, { value: id, children: jsxs(MenuItem, { "aria-haspopup": "menu", ...rest, "aria-expanded": open, autoClose: false, disabled: disabled, onKeyDown: (e) => {
+    }, [
+        closeSubMenu,
+        open,
+        shouldKeepSubMenuOpen
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(SubMenuTriggerNestedIdContext.Provider, {
+                value: id,
+                children: /*#__PURE__*/ jsxs(MenuItem_MenuItem, {
+                    "aria-haspopup": "menu",
+                    ...rest,
+                    "aria-expanded": open,
+                    autoClose: false,
+                    disabled: disabled,
+                    onKeyDown: (e)=>{
                         if (disabled) {
                             return;
                         }
@@ -245,7 +311,8 @@ const SubMenu = forwardRef((inProps, ref) => {
                         if (isSubMenuNavigationOpenEvent(e)) {
                             openSubMenuFromTrigger(e.currentTarget);
                         }
-                    }, onClick: (e) => {
+                    },
+                    onClick: (e)=>{
                         if (disabled) {
                             return;
                         }
@@ -256,18 +323,53 @@ const SubMenu = forwardRef((inProps, ref) => {
                         if (isSubMenuKeyboardActivationEvent(e)) {
                             openSubMenuFromTrigger(e.currentTarget);
                         }
-                    }, onPointerMove: handleTriggerPointerMove, onPointerLeave: handleTriggerPointerLeave, ref: handleRef, children: [typeof itemContent === 'string' ? (jsx(MenuItemText, { children: itemContent })) : (itemContent), jsx(Icon, { symbol: CaretRightMd })] }) }), open && (jsx(PopperMenu, { anchorEl: anchor, container: overlayContainer ?? undefined, disablePortal: overlayContainer ? false : undefined, placement: "right-start", offset: -4, ref: menuRef, onKeyDown: (e) => {
-                    if ((e.key === 'ArrowLeft' || e.key === 'Escape') &&
-                        e.currentTarget.contains(e.target)) {
+                    },
+                    onPointerMove: handleTriggerPointerMove,
+                    onPointerLeave: handleTriggerPointerLeave,
+                    ref: handleRef,
+                    children: [
+                        typeof itemContent === 'string' ? /*#__PURE__*/ jsx(MenuItemText_MenuItemText, {
+                            children: itemContent
+                        }) : itemContent,
+                        /*#__PURE__*/ jsx(Icon_Icon, {
+                            symbol: CaretRightMd
+                        })
+                    ]
+                })
+            }),
+            open && /*#__PURE__*/ jsx(PopperMenu_PopperMenu, {
+                anchorEl: anchor,
+                container: overlayContainer ?? undefined,
+                disablePortal: overlayContainer ? false : undefined,
+                placement: "right-start",
+                offset: -4,
+                ref: menuRef,
+                onKeyDown: (e)=>{
+                    if ((e.key === 'ArrowLeft' || e.key === 'Escape') && e.currentTarget.contains(e.target)) {
                         e.stopPropagation();
-                        closeSubMenu({ restoreFocus: true });
+                        closeSubMenu({
+                            restoreFocus: true
+                        });
                     }
-                }, onPointerMove: (event) => {
+                },
+                onPointerMove: (event)=>{
                     if (event.pointerType === 'mouse') {
                         markMenuContentEntered();
                     }
-                }, ...focusVisibleHandlers, children: children }))] }));
+                },
+                ...focusVisibleHandlers,
+                children: children
+            })
+        ]
+    });
 });
 SubMenu.displayName = 'SuiSubMenu';
 
-export { PopperMenu, SubMenu, PopperMenu$1 as popperMenuStyle };
+
+
+
+
+
+
+
+export { PopperMenu as popperMenuStyle, PopperMenu_PopperMenu as PopperMenu, SubMenu };