@ringcentral/spring-ui 1.11.2 → 1.13.0

package/MenuList.js

@@ -1,34 +1,87 @@
-export { M as MenuList } from './chunks/MenuList.js';
-export { e as MenuListContext, f as useMenuListContext } from './chunks/useMenuItemSelect.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
-import './chunks/List.js';
-import './chunks/useListNavigation.js';
-import 'tabbable';
-import './chunks/Menu.js';
-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';
-import './VirtualizedList.js';
-import 'react-virtuoso';
-import './chunks/useAnimationFrame.js';
-import '@ringcentral/spring-icon';
-import './chunks/useNestedMenuItem.js';
-import './ListNavigation.js';
-
-var MenuList = {"sui-menu-list-root":"sui-menu-list-root"};
-
-export { MenuList as menuListStyle };
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useLayoutEffect, useMemo, useRef } from "react";
+import { useClasses, useForkRef, useWindowContext } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { List as List_List } from "./List.js";
+import { useMenuContext } from "./Menu.js";
+import { MenuItemSelectContext, MenuListContext, useMenuItemSelect } from "./MenuItem.js";
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var MenuList = ({"sui-menu-list-root":"sui-menu-list-root"});
+
+
+
+
+
+
+
+
+
+const MenuList_MenuList = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'MenuList'
+    });
+    const { classes, className, children, widget, selectMode = 'single', nowrap, value: valueProp, onChange, autoFocus: autoFocusProp, ...rest } = props;
+    const menuContext = useMenuContext();
+    const autoFocus = Boolean(autoFocusProp ?? menuContext?.autoFocus);
+    const cls = useClasses('menu-list', classes, className);
+    const menuListContextValue = useMemo(()=>({
+            nowrap
+        }), [
+        nowrap
+    ]);
+    const { contextValue } = useMenuItemSelect({
+        widget,
+        selectMode,
+        value: valueProp,
+        onChange,
+        autoFocus
+    });
+    const actions = useRef(null);
+    const listRef = useRef(null);
+    const handleListRef = useForkRef(listRef, ref);
+    const { document } = useWindowContext();
+    useLayoutEffect(()=>{
+        if (autoFocus && // ensure item can auto focus correctly
+        !listRef.current?.contains(document?.activeElement ?? null)) {
+            actions.current?.focus();
+        }
+    }, [
+        autoFocus
+    ]);
+    // Use appropriate role and ARIA attributes based on widget type
+    const listRole = widget === 'select' ? 'listbox' : 'menu';
+    const listboxProps = widget === 'select' ? {
+        'aria-multiselectable': selectMode === 'multiple'
+    } : {};
+    return /*#__PURE__*/ jsx(List_List, {
+        className: cls('root'),
+        role: listRole,
+        ...listboxProps,
+        ...rest,
+        ref: handleListRef,
+        actions: actions,
+        children: /*#__PURE__*/ jsx(MenuListContext.Provider, {
+            value: menuListContextValue,
+            children: /*#__PURE__*/ jsx(MenuItemSelectContext.Provider, {
+                value: contextValue,
+                children: children
+            })
+        })
+    });
+});
+MenuList_MenuList.displayName = 'SuiMenuList';
+
+
+
+
+
+
+
+export { MenuList as menuListStyle, MenuList_MenuList as MenuList };
+export { MenuListContext, useMenuListContext } from "./MenuItem.js";

package/Modal.js

@@ -1,16 +1,345 @@
-export { I as InnerModal, M as Modal, a as ModalContext, u as useModalContext } from './chunks/Modal.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
-import '@mui/base';
-import 'framer-motion';
-import './chunks/Icon.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getFade.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-
-var Modal = {"sui-modal-root":"sui-modal-root","sui-modal-non-blocking":"sui-modal-non-blocking","sui-backdrop-root":"sui-backdrop-root"};
-
-export { Modal as modalStyles };
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { motion } from "framer-motion";
+import { useAriaHideOutside, useBodyScrollLock, useClasses, useEventCallback, useForkRef, useWindowContext } from "@ringcentral/spring-base";
+import { FocusTrap } from "@mui/base";
+import { useTheme, useThemeProps } from "@ringcentral/spring-theme";
+import { Backdrop as Backdrop_Backdrop } from "./Backdrop.js";
+import { Portal } from "./Portal.js";
+import { getFade } from "./chunks/4476.js";
+import { useFocusTrapStack } from "./FocusTrap.js";
+import { usePrefersReducedMotion } from "./chunks/1294.js";
+
+
+
+
+
+
+
+
+const ModalContext = createContext(null);
+const useModalContext = ()=>useContext(ModalContext);
+
+
+
+const createOverlayBranchRegistry = ()=>{
+    const branchRefCounts = new Map();
+    const listeners = new Set();
+    const notify = (node, isRegistered)=>{
+        for (const listener of [
+            ...listeners
+        ]){
+            listener(node, isRegistered);
+        }
+    };
+    return {
+        getBranches: ()=>new Set(branchRefCounts.keys()),
+        register: (node)=>{
+            const currentCount = branchRefCounts.get(node) ?? 0;
+            branchRefCounts.set(node, currentCount + 1);
+            if (currentCount === 0) {
+                notify(node, true);
+            }
+            let isCleanedUp = false;
+            return ()=>{
+                if (isCleanedUp) {
+                    return;
+                }
+                isCleanedUp = true;
+                const currentCount = branchRefCounts.get(node);
+                if (!currentCount) {
+                    return;
+                }
+                if (currentCount > 1) {
+                    branchRefCounts.set(node, currentCount - 1);
+                    return;
+                }
+                branchRefCounts.delete(node);
+                notify(node, false);
+            };
+        },
+        subscribe: (listener)=>{
+            listeners.add(listener);
+            return ()=>{
+                listeners.delete(listener);
+            };
+        }
+    };
+};
+const useOverlayBranchRegistry = ()=>{
+    const registryRef = useRef();
+    if (!registryRef.current) {
+        registryRef.current = createOverlayBranchRegistry();
+    }
+    return registryRef.current;
+};
+
+
+
+/**
+ * Registers a logical overlay branch with its owner, including owner changes,
+ * portal node replacement, deactivation, and unmount cleanup.
+ */ const useOverlayBranch = ({ active, registry })=>{
+    const nodeRef = useRef(null);
+    const registrationRef = useRef(null);
+    const syncRegistration = useCallback((node)=>{
+        const registration = registrationRef.current;
+        const shouldKeepRegistration = registration && active && registration.node === node && registration.registry === registry;
+        if (shouldKeepRegistration) {
+            return;
+        }
+        registration?.unregister();
+        registrationRef.current = null;
+        if (active && node && registry) {
+            registrationRef.current = {
+                node,
+                registry,
+                unregister: registry.register(node)
+            };
+        }
+    }, [
+        active,
+        registry
+    ]);
+    const setBranchRef = useCallback((node)=>{
+        nodeRef.current = node;
+        syncRegistration(node);
+    }, [
+        syncRegistration
+    ]);
+    useLayoutEffect(()=>{
+        syncRegistration(nodeRef.current);
+    }, [
+        syncRegistration
+    ]);
+    useLayoutEffect(()=>()=>{
+            registrationRef.current?.unregister();
+            registrationRef.current = null;
+        }, []);
+    return setBranchRef;
+};
+/**
+ * Connects one policy consumer to a registry. It subscribes before replaying a
+ * snapshot of existing branches so reentrant registrations are not missed.
+ * Cleanup removes every currently registered branch from the consumer.
+ */ const useOverlayBranchConsumer = (registry, listener)=>{
+    useLayoutEffect(()=>{
+        const unsubscribe = registry.subscribe(listener);
+        for (const node of registry.getBranches()){
+            listener(node, true);
+        }
+        return ()=>{
+            unsubscribe();
+            for (const node of registry.getBranches()){
+                listener(node, false);
+            }
+        };
+    }, [
+        listener,
+        registry
+    ]);
+};
+
+
+
+
+
+
+
+
+
+
+const InnerModal = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { hideBackdrop: hideBackdropProp, children, motionProps, disableBackdropClick: disableBackdropClickProp, onBackdropClick, disableEscapeKeyDown: disableEscapeKeyDownProp, onEscapeKeyDown, onClose, onKeyDown, disableAutoFocus, disableEnforceFocus, disableRestoreFocus, classes, className, backdropProps, open, isEnabled, blocking = true, shouldUseInert: shouldUseInertProp, ...rest } = props;
+    const parentModalContext = useModalContext();
+    const ownOverlayBranchRegistry = useOverlayBranchRegistry();
+    const shouldUseInert = shouldUseInertProp ?? parentModalContext?.shouldUseInert ?? false;
+    // Centralized `blocking` defaults: when callers omit these, derive from
+    // `blocking`. Explicit values (including `false`) always win.
+    const hideBackdrop = hideBackdropProp ?? !blocking;
+    const disableBackdropClick = disableBackdropClickProp ?? !blocking;
+    const disableEscapeKeyDown = disableEscapeKeyDownProp ?? !blocking;
+    const { ariaHideOutsideRef, ariaHideEnabled, setAriaHideOutsideTarget } = useAriaHideOutside({
+        enable: blocking && open,
+        shouldUseInert
+    });
+    useOverlayBranchConsumer(ownOverlayBranchRegistry, setAriaHideOutsideTarget);
+    // Forward the nearest active blocking owner through non-blocking layers.
+    const parentOverlayBranchRegistry = parentModalContext?.overlayBranchRegistry;
+    const overlayBranchRegistry = ariaHideEnabled ? ownOverlayBranchRegistry : parentOverlayBranchRegistry;
+    // Propagate outside hiding so nested Poppers stay in the available branch.
+    const ariaHideEnabledForChildren = ariaHideEnabled || parentModalContext?.ariaHideEnabled === true;
+    // Register an open non-blocking overlay with its nearest blocking owner.
+    const overlayBranchRef = useOverlayBranch({
+        active: !blocking && open,
+        registry: parentOverlayBranchRegistry
+    });
+    const handleRef = useForkRef(ref, ariaHideOutsideRef, overlayBranchRef);
+    const cls = useClasses('modal', classes, className);
+    const { onClick: externalOnClick, ...restBackdropProps } = backdropProps || {};
+    const handleBackdropClick = useEventCallback((event)=>{
+        if (disableBackdropClick) return;
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        externalOnClick?.(event);
+        onBackdropClick?.(event);
+        onClose?.(event, 'backdropClick');
+    });
+    return /*#__PURE__*/ jsx(ModalContext.Provider, {
+        value: {
+            ariaHideEnabled: ariaHideEnabledForChildren,
+            overlayBranchRegistry,
+            shouldUseInert
+        },
+        children: /*#__PURE__*/ jsxs(motion.div, {
+            ...rest,
+            ...motionProps,
+            role: "presentation",
+            className: cls('root', {
+                'non-blocking': !blocking
+            }),
+            onKeyDown: (e)=>{
+                onKeyDown?.(e);
+                if (!disableEscapeKeyDown && e.key === 'Escape' && (isEnabled?.() ?? true)) {
+                    onEscapeKeyDown?.(e);
+                    onClose?.(e, 'escapeKeyDown');
+                }
+            },
+            ref: handleRef,
+            children: [
+                /*#__PURE__*/ jsx(Backdrop_Backdrop, {
+                    ...restBackdropProps,
+                    isTransparent: hideBackdrop,
+                    onClick: handleBackdropClick
+                }),
+                /*#__PURE__*/ jsx(FocusTrap, {
+                    open: open,
+                    isEnabled: isEnabled,
+                    disableAutoFocus: disableAutoFocus || !blocking,
+                    disableEnforceFocus: disableEnforceFocus || !blocking,
+                    disableRestoreFocus: disableRestoreFocus || !blocking,
+                    children: children
+                })
+            ]
+        })
+    });
+});
+InnerModal.displayName = 'SuiInnerModal';
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Modal = ({"sui-modal-root":"sui-modal-root","sui-modal-non-blocking":"sui-modal-non-blocking","sui-backdrop-root":"sui-backdrop-root"});
+
+
+
+
+
+
+
+
+
+
+const Modal_Modal = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Modal'
+    });
+    const { children, open, container: containerProp, disablePortal, onExitComplete, onAfterClose, disableBackdropAnimation, motionProps, disableScrollLock: disableScrollLockProp, blocking = true, shouldUseInert: themeFallbackShouldUseInert, ...rest } = props;
+    const parentModalContext = useModalContext();
+    const shouldUseInert = inProps.shouldUseInert ?? parentModalContext?.shouldUseInert ?? themeFallbackShouldUseInert ?? false;
+    // When `disableScrollLock` is not provided, derive it from `blocking`:
+    // non-blocking overlays should not contribute to body scroll lock by default.
+    // Explicit values always win to preserve back-compat.
+    const disableScrollLock = disableScrollLockProp ?? !blocking;
+    const [shouldRender, setShouldRender] = useState(open);
+    const [modalElement, setModalElement] = useState(null);
+    const handleRef = useForkRef(setModalElement, ref);
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const { isEnabled } = useFocusTrapStack({
+        open
+    });
+    useBodyScrollLock(open, modalElement, {
+        disabled: disableScrollLock
+    });
+    useEffect(()=>{
+        if (open) {
+            setShouldRender(true);
+        } else {
+            if (disableBackdropAnimation) {
+                setShouldRender(false);
+            }
+        }
+    }, [
+        open,
+        disableBackdropAnimation
+    ]);
+    const hasRenderedContentRef = useRef(open);
+    const handleAfterClose = useEventCallback(()=>{
+        onAfterClose?.();
+    });
+    useEffect(()=>{
+        if (shouldRender) {
+            hasRenderedContentRef.current = true;
+            return;
+        }
+        // Runs after the commit that removed the content, so consumers can rely on
+        // the modal subtree being gone. Guarded so an initially closed modal and
+        // repeated effect runs do not report a close that never happened.
+        if (hasRenderedContentRef.current) {
+            hasRenderedContentRef.current = false;
+            handleAfterClose();
+        }
+    }, [
+        shouldRender,
+        handleAfterClose
+    ]);
+    const { document } = useWindowContext();
+    const container = containerProp ?? document?.body;
+    const { scopeProps } = useTheme();
+    const onAnimationComplete = (e)=>{
+        motionProps?.onAnimationComplete?.(e);
+        if (!open) {
+            onExitComplete?.();
+            setShouldRender(false);
+        }
+    };
+    return shouldRender ? /*#__PURE__*/ jsx(Portal, {
+        disablePortal: disablePortal,
+        container: container,
+        children: /*#__PURE__*/ jsx("div", {
+            ...scopeProps,
+            children: /*#__PURE__*/ jsx(InnerModal, {
+                ...rest,
+                ref: handleRef,
+                open: open,
+                blocking: blocking,
+                shouldUseInert: shouldUseInert,
+                isEnabled: isEnabled,
+                motionProps: {
+                    ...motionProps ?? getFade({
+                        prefersReducedMotion,
+                        toggle: open
+                    }),
+                    onAnimationComplete
+                },
+                children: children
+            })
+        })
+    }) : null;
+});
+Modal_Modal.displayName = 'SuiModal';
+
+
+
+
+
+
+
+
+
+export { InnerModal, Modal as modalStyles, ModalContext, Modal_Modal as Modal, useModalContext, useOverlayBranch };

package/NestedMenuContext.js

@@ -1,24 +1,196 @@
-import { u as useNestedMenuContext } from './chunks/useNestedParentMenu.js';
-export { N as NestedMenuContext, a as useNestedParentMenu } from './chunks/useNestedParentMenu.js';
-import { useEventCallback } from '@ringcentral/spring-base';
-import { useEffect } from 'react';
-export { u as useNestedMenuItem } from './chunks/useNestedMenuItem.js';
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { useEventCallback } from "@ringcentral/spring-base";
 
-const useNestedChildMenu = (props) => {
+
+
+const NestedMenuContext = /*#__PURE__*/ createContext(null);
+const useNestedMenuContext = ()=>{
+    return useContext(NestedMenuContext);
+};
+
+
+
+
+
+
+const useNestedChildMenu = (props)=>{
     const { open, closeMenu, getAnchorElement, id } = props;
     const context = useNestedMenuContext();
     const { registOpenedSubMenu } = context ?? {};
-    const closeMenuMemo = useEventCallback((options) => closeMenu(options));
-    useEffect(() => {
+    const closeMenuMemo = useEventCallback((options)=>closeMenu(options));
+    useEffect(()=>{
         if (open) {
             return registOpenedSubMenu?.({
                 anchorId: id,
                 getAnchorElement,
-                closeSubMenu: closeMenuMemo,
+                closeSubMenu: closeMenuMemo
             });
         }
         return undefined;
-    }, [closeMenuMemo, getAnchorElement, id, open, registOpenedSubMenu]);
+    }, [
+        closeMenuMemo,
+        getAnchorElement,
+        id,
+        open,
+        registOpenedSubMenu
+    ]);
+};
+
+
+
+
+const useNestedMenuItem = (props)=>{
+    const context = useNestedMenuContext();
+    const { hovered, id } = props;
+    const { isPointerMovingToSubMenu: isPointerMovingToSubMenuContext, onPointerGraceIntentChange, registHoveredItem } = context ?? {};
+    const requestItemHover = useCallback((event, options)=>{
+        const canApplyHover = registHoveredItem?.(id, event, options);
+        return canApplyHover ?? true;
+    }, [
+        id,
+        registHoveredItem
+    ]);
+    useEffect(()=>{
+        if (hovered) {
+            requestItemHover();
+        }
+    }, [
+        hovered,
+        requestItemHover
+    ]);
+    const isPointerMovingToSubMenu = useCallback((event, intent)=>{
+        return isPointerMovingToSubMenuContext?.(event, intent) ?? false;
+    }, [
+        isPointerMovingToSubMenuContext
+    ]);
+    return {
+        isPointerMovingToSubMenu,
+        onPointerGraceIntentChange,
+        requestItemHover
+    };
+};
+
+
+const getPointFromPointerEvent = (event)=>({
+        x: event.clientX,
+        y: event.clientY
+    });
+const isPointInPolygon = (point, polygon)=>{
+    let inside = false;
+    for(let i = 0, j = polygon.length - 1; i < polygon.length; j = i++){
+        const pointI = polygon[i];
+        const pointJ = polygon[j];
+        const intersects = pointI.y > point.y !== pointJ.y > point.y && point.x < (pointJ.x - pointI.x) * (point.y - pointI.y) / (pointJ.y - pointI.y) + pointI.x;
+        if (intersects) {
+            inside = !inside;
+        }
+    }
+    return inside;
 };
+const isPointerInGraceArea = (event, area)=>{
+    if (!area) return false;
+    return isPointInPolygon(getPointFromPointerEvent(event), area);
+};
+
+
+
+const useNestedParentMenu = (props)=>{
+    const openedSubMenuSymbolRef = useRef(null);
+    const pointerGraceIntentRef = useRef(null);
+    const pointerDirRef = useRef('right');
+    const lastPointerXRef = useRef(0);
+    const { open } = props;
+    const onPointerGraceIntentChange = useCallback((intent)=>{
+        pointerGraceIntentRef.current = intent;
+    }, []);
+    const isPointerMovingToSubMenu = useCallback((event, intentArg)=>{
+        const intent = intentArg === undefined ? pointerGraceIntentRef.current : intentArg;
+        const isMovingTowards = pointerDirRef.current === intent?.side;
+        return isMovingTowards && isPointerInGraceArea(event, intent?.area);
+    }, []);
+    const onContentPointerMove = useCallback((event)=>{
+        const pointerXHasChanged = lastPointerXRef.current !== event.clientX;
+        if (pointerXHasChanged) {
+            pointerDirRef.current = event.clientX > lastPointerXRef.current ? 'right' : 'left';
+            lastPointerXRef.current = event.clientX;
+        }
+    }, []);
+    const onContentClickCapture = useCallback((event)=>{
+        const target = event.target;
+        const openedSubMenu = openedSubMenuSymbolRef.current;
+        if (!target || !event.currentTarget.contains(target)) {
+            return;
+        }
+        if (openedSubMenu?.getAnchorElement?.()?.contains(target)) {
+            return;
+        }
+        openedSubMenu?.closeSubMenu();
+    }, []);
+    const contextValue = useMemo(()=>{
+        return {
+            registHoveredItem: (id, event, options)=>{
+                // Close opened SubMenu if hovering on a different item
+                const symbol = openedSubMenuSymbolRef.current;
+                if (!symbol || id === symbol.anchorId) {
+                    return true;
+                }
+                if (event && isPointerMovingToSubMenu(event)) {
+                    return false;
+                }
+                if (options?.closeOpenedSubMenu ?? true) {
+                    symbol.closeSubMenu();
+                }
+                return true;
+            },
+            registOpenedSubMenu: (menuItemSymbol)=>{
+                openedSubMenuSymbolRef.current?.closeSubMenu();
+                openedSubMenuSymbolRef.current = menuItemSymbol;
+                // This cleanup is returned to useNestedChildMenu's useEffect.
+                // It runs when:
+                //   (a) the effect re-runs (open goes false -> true), or
+                //   (b) the component unmounts.
+                // `menuItemSymbol` here is the value captured by closure at registration time -
+                // it never changes. `openedSubMenuSymbolRef.current` is the live ref value at
+                // cleanup time, which may have been replaced by a newer symbol.
+                return ()=>{
+                    if (openedSubMenuSymbolRef.current === menuItemSymbol) {
+                        openedSubMenuSymbolRef.current = null;
+                    }
+                };
+            },
+            isPointerMovingToSubMenu,
+            onPointerGraceIntentChange
+        };
+    }, [
+        isPointerMovingToSubMenu,
+        onPointerGraceIntentChange
+    ]);
+    // Ensure that all menus can be visually closed at the same time
+    useLayoutEffect(()=>{
+        if (!open) {
+            openedSubMenuSymbolRef.current?.closeSubMenu();
+            openedSubMenuSymbolRef.current = null;
+            onPointerGraceIntentChange(null);
+        }
+    }, [
+        onPointerGraceIntentChange,
+        open
+    ]);
+    return {
+        contentClickHandlers: {
+            onClickCapture: onContentClickCapture
+        },
+        contentPointerHandlers: {
+            onPointerMove: onContentPointerMove
+        },
+        contextValue,
+        getHaveOpenedSubMenu: ()=>Boolean(openedSubMenuSymbolRef.current)
+    };
+};
+
+
+
+
+
 
-export { useNestedChildMenu, useNestedMenuContext };
+export { NestedMenuContext, useNestedChildMenu, useNestedMenuContext, useNestedMenuItem, useNestedParentMenu };