@cube-dev/ui-kit 0.114.0 → 0.115.0

package/es/components/actions/Menu/MenuTrigger.js

@@ -1,137 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { PressResponder } from '@react-aria/interactions';
-import { useDOMRef, useIsMobileDevice } from '@react-spectrum/utils';
-import { forwardRef, Fragment, useEffect, useMemo, useRef, } from 'react';
-import { DismissButton, useMenuTrigger, useOverlayPosition, } from 'react-aria';
-import { useMenuTriggerState } from 'react-stately';
-import { generateRandomId } from '../../../utils/random.js';
-import { SlotProvider } from '../../../utils/react/index.js';
-import { useEventBus } from '../../../utils/react/useEventBus.js';
-import { Popover, Tray } from '../../overlays/Modal/index.js';
-import { MenuContext } from './context.js';
-function MenuTrigger(props, ref) {
-    const menuPopoverRef = useRef(null);
-    const triggerRef = useRef(null);
-    const domRef = useDOMRef(ref);
-    const menuTriggerRef = props.targetRef || domRef || triggerRef;
-    const menuRef = useRef(null);
-    const wasOpenRef = useRef(false);
-    const { children, shouldFlip = true, closeOnSelect, trigger = 'press', isDisabled, isDummy, } = props;
-    // Generate a unique ID for this menu instance
-    const menuId = useMemo(() => generateRandomId(), []);
-    // Get event bus for menu synchronization
-    const { emit, on } = useEventBus();
-    if (!Array.isArray(children) || children.length > 2) {
-        throw new Error('MenuTrigger must have exactly 2 children');
-    }
-    let [menuTrigger, menu] = children;
-    const state = useMenuTriggerState(props);
-    // Listen for other menus opening and close this one if needed
-    useEffect(() => {
-        const unsubscribe = on('popover:open', (data) => {
-            // If another menu is opening and this menu is open, close this one
-            if (data.menuId !== menuId && state.isOpen && !isDummy) {
-                state.close();
-            }
-        });
-        return unsubscribe;
-    }, [on, menuId, state]);
-    // Emit event when this menu opens
-    useEffect(() => {
-        if (state.isOpen && !isDummy) {
-            emit('popover:open', { menuId });
-        }
-    }, [state.isOpen, emit, menuId, isDummy]);
-    // Restore focus manually when the menu closes
-    useEffect(() => {
-        if (!state.isOpen && wasOpenRef.current && !isDummy) {
-            wasOpenRef.current = false;
-            // Use setTimeout to ensure focus restoration happens after any animations
-            setTimeout(() => {
-                menuTriggerRef.current?.focus();
-            }, 0);
-        }
-        else if (state.isOpen) {
-            wasOpenRef.current = true;
-        }
-    }, [state.isOpen, menuTriggerRef, isDummy]);
-    if (typeof menuTrigger === 'function') {
-        menuTrigger = menuTrigger(state);
-    }
-    const { menuTriggerProps, menuProps } = useMenuTrigger({ isDisabled }, state, menuTriggerRef);
-    let initialPlacement = props.placement ?? 'bottom start';
-    const isMobile = useIsMobileDevice();
-    const { overlayProps: positionProps, placement } = useOverlayPosition({
-        targetRef: menuTriggerRef,
-        overlayRef: menuPopoverRef,
-        scrollRef: menuRef,
-        placement: initialPlacement,
-        shouldFlip: shouldFlip,
-        isOpen: state.isOpen && !isMobile,
-        onClose: state.close,
-        containerPadding: props.containerPadding,
-        offset: props.offset ?? 8,
-        crossOffset: props.crossOffset ?? 0,
-    });
-    const menuContext = {
-        ...menuProps,
-        ref: menuRef,
-        onClose: state.close,
-        closeOnSelect,
-        autoFocus: state.focusStrategy ?? 'first',
-        style: isMobile
-            ? {
-                width: '100%',
-                maxHeight: 'inherit',
-            }
-            : undefined,
-        mods: {
-            popover: !isMobile,
-            tray: isMobile,
-        },
-        isClosing: !state.isOpen,
-    };
-    const contents = (_jsxs(_Fragment, { children: [_jsx(DismissButton, { onDismiss: state.close }), menu, _jsx(DismissButton, { onDismiss: state.close })] }));
-    // On small screen devices, the menu is rendered in a tray, otherwise a popover.
-    let overlay;
-    if (isMobile) {
-        overlay = (_jsx(Tray, { isOpen: state.isOpen, onClose: state.close, children: contents }));
-    }
-    else {
-        overlay = (_jsx(Popover, { ref: menuPopoverRef, hideArrow: true, isNonModal: true, isOpen: state.isOpen, style: positionProps.style, placement: placement, shouldCloseOnInteractOutside: (el) => {
-                const menuTriggerEl = el.closest('[data-popover-trigger]');
-                // If no menu trigger was clicked, allow closing
-                if (!menuTriggerEl)
-                    return true;
-                // For dummy triggers (like useAnchoredMenu), check if the clicked element
-                // is the target element or its descendant
-                if (isDummy &&
-                    (menuTriggerEl === menuTriggerRef.current ||
-                        menuTriggerRef.current?.contains(el))) {
-                    return true;
-                }
-                // If the same trigger that opened this menu was clicked, allow closing
-                if (menuTriggerEl === menuTriggerRef.current)
-                    return true;
-                // Otherwise, don't close (let event mechanism handle it)
-                return false;
-            }, onClose: state.close, children: contents }));
-    }
-    return (_jsxs(Fragment, { children: [_jsx(SlotProvider, { slots: { actionButton: { holdAffordance: trigger === 'longPress' } }, children: !isDummy ? (_jsx(PressResponder, { ...menuTriggerProps, ref: menuTriggerRef, "data-popover-trigger": true, isPressed: state.isOpen, children: menuTrigger })) : null }), _jsx(MenuContext.Provider, { value: menuContext, children: overlay })] }));
-}
-/**
- * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,
- * linking the Menu's open state with the trigger's press state.
- */
-let _MenuTrigger = forwardRef(MenuTrigger);
-_MenuTrigger.displayName = 'MenuTrigger';
-export { _MenuTrigger as MenuTrigger };
-
-        

package/es/components/actions/Menu/SubMenuTrigger.js

@@ -1,288 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useSyncRef } from '@react-aria/utils';
-import React, { useEffect, useMemo, useRef, } from 'react';
-import { DismissButton, useMenuTrigger, useOverlayPosition, } from 'react-aria';
-import { useMenuTriggerState } from 'react-stately';
-import { generateRandomId } from '../../../utils/random.js';
-import { useEventBus } from '../../../utils/react/useEventBus.js';
-import { Popover } from '../../overlays/Modal/index.js';
-import { MenuContext, useMenuContext } from './context.js';
-import { SubmenuTriggerContext } from './SubmenuTriggerContext.js';
-// Default placement & offset for sub-menus (matches Spectrum / Aria)
-const DEFAULT_PLACEMENT = 'right top';
-const DEFAULT_OFFSET = 4;
-const DEFAULT_CROSS_OFFSET = -5;
-/**
- * Internal SubMenuTrigger that receives the already-rendered trigger element
- * from the collection system and wraps it with submenu behavior.
- */
-function InternalSubMenuTrigger(props) {
-    const { children, placement = DEFAULT_PLACEMENT, offset = DEFAULT_OFFSET, crossOffset = DEFAULT_CROSS_OFFSET, shouldFlip = true, isDisabled, autoFocus = 'first', onAction, targetKey, ...overlayProps } = props;
-    // Children: [menuTrigger (already rendered MenuItem), menu (Menu component)]
-    const [menuTrigger, menu] = React.Children.toArray(children);
-    const state = useMenuTriggerState(props);
-    // Generate a unique ID for this submenu instance
-    const submenuId = useMemo(() => generateRandomId(), []);
-    // Get event bus for submenu synchronization
-    const { emit, on } = useEventBus();
-    // Refs – trigger (MenuItem <li>) and overlay (<div> from Popover)
-    const domTriggerRef = useRef(null);
-    const popoverRef = useRef(null);
-    const menuRef = useRef(null);
-    // Strip keyboard/press handlers that we will implement ourselves
-    const { menuTriggerProps: rawTriggerProps, menuProps } = useMenuTrigger({ type: 'submenu', isDisabled }, state, domTriggerRef);
-    // Get parent context to check if parent menu is closing
-    const parentContext = useMenuContext();
-    // Remove default onKeyDown/onPress handlers from trigger props – we implement custom ones
-    const { onKeyDown: _mtOnKeyDown, onPress: _mtOnPress, onPressStart: _mtOnPressStart, onKeyUp: _mtOnKeyUp, ...menuTriggerProps } = rawTriggerProps;
-    const { overlayProps: positionProps } = useOverlayPosition({
-        targetRef: domTriggerRef,
-        overlayRef: popoverRef,
-        scrollRef: menuRef,
-        placement,
-        offset: offset,
-        crossOffset: crossOffset,
-        shouldFlip,
-        isOpen: state.isOpen,
-        onClose: state.close,
-    });
-    /**
-     * Build a MenuContext for the nested menu so it behaves just like a regular
-     * popover-based Menu (selection handling, focus management, etc.).
-     */
-    const nestedMenuContext = useMemo(() => {
-        const ctx = {
-            ...menuProps,
-            ref: menuRef,
-            // Pass the parent's onClose to close the entire menu hierarchy
-            onClose: () => {
-                // Close this submenu state immediately
-                state.close();
-                // Then close the parent menu
-                if (parentContext.onClose) {
-                    parentContext.onClose();
-                }
-            },
-            closeOnSelect: true,
-            autoFocus,
-            mods: {
-                popover: true,
-            },
-            // Propagate closing state from parent
-            isClosing: parentContext.isClosing || !state.isOpen,
-        };
-        return ctx;
-    }, [
-        menuProps,
-        autoFocus,
-        state,
-        parentContext.onClose,
-        parentContext.isClosing,
-    ]);
-    // Sync the parent selection manager focus with DOM ref (for virtual focus scenarios)
-    useSyncRef(parentContext, domTriggerRef);
-    // Listen for other menus opening and close this submenu if needed
-    useEffect(() => {
-        const unsubscribe = on('popover:open', (data) => {
-            // If another menu is opening and this submenu is open, close this one
-            if (data.menuId !== submenuId && state.isOpen) {
-                state.close();
-            }
-        });
-        return unsubscribe;
-    }, [on, submenuId, state]);
-    // Emit event when this submenu opens
-    useEffect(() => {
-        if (state.isOpen) {
-            emit('popover:open', { menuId: submenuId });
-        }
-    }, [state.isOpen, emit, submenuId]);
-    // Cleanup hover timers and reset refs on unmount
-    useEffect(() => {
-        return () => {
-            if (hoverOpenTimerRef.current) {
-                clearTimeout(hoverOpenTimerRef.current);
-            }
-            if (hoverCloseTimerRef.current) {
-                clearTimeout(hoverCloseTimerRef.current);
-            }
-            isHoveringRef.current = false;
-            isHoveringSubmenuRef.current = false;
-        };
-    }, []);
-    // ----- Render -----
-    // Handle keyboard navigation
-    const handleKeyDown = (e) => {
-        if (isDisabled)
-            return;
-        // Arrow right opens submenu
-        if (e.key === 'ArrowRight') {
-            e.preventDefault();
-            e.stopPropagation();
-            state.open();
-        }
-        // Enter or Space opens submenu (suppress subsequent onAction)
-        else if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            e.stopPropagation();
-            // Stop immediate propagation to prevent React Aria's handlers from running
-            e.nativeEvent.stopImmediatePropagation();
-            state.open();
-            suppressNextActionRef.current = true; // Remember it was keyboard
-        }
-        // Arrow left closes submenu if open
-        else if (e.key === 'ArrowLeft' && state.isOpen) {
-            e.preventDefault();
-            e.stopPropagation();
-            state.close();
-        }
-    };
-    // Use refs to store timer IDs
-    const hoverOpenTimerRef = useRef(null);
-    const hoverCloseTimerRef = useRef(null);
-    // Track if mouse is over trigger or submenu
-    const isHoveringRef = useRef(false);
-    const isHoveringSubmenuRef = useRef(false);
-    // Track whether the next onAction comes from a keyboard press
-    const suppressNextActionRef = useRef(false);
-    const checkShouldClose = () => {
-        // Only close if mouse is not over trigger OR submenu
-        if (!isHoveringRef.current && !isHoveringSubmenuRef.current) {
-            hoverCloseTimerRef.current = setTimeout(() => {
-                // Double check before closing
-                if (!isHoveringRef.current && !isHoveringSubmenuRef.current) {
-                    state.close();
-                }
-            }, 300);
-        }
-    };
-    // Handle mouse interactions on trigger
-    const handleMouseEnter = () => {
-        if (isDisabled)
-            return;
-        isHoveringRef.current = true;
-        // Clear any pending close timer
-        if (hoverCloseTimerRef.current) {
-            clearTimeout(hoverCloseTimerRef.current);
-            hoverCloseTimerRef.current = null;
-        }
-        // Use a small delay to prevent accidental opens
-        if (!state.isOpen) {
-            hoverOpenTimerRef.current = setTimeout(() => {
-                if (isHoveringRef.current) {
-                    state.open();
-                }
-            }, 200);
-        }
-    };
-    const handleMouseLeave = () => {
-        isHoveringRef.current = false;
-        // Clear open timer if it exists
-        if (hoverOpenTimerRef.current) {
-            clearTimeout(hoverOpenTimerRef.current);
-            hoverOpenTimerRef.current = null;
-        }
-        // Check if we should close
-        checkShouldClose();
-    };
-    // Handle mouse events on the submenu popover
-    const handlePopoverMouseEnter = () => {
-        isHoveringSubmenuRef.current = true;
-        // Clear any pending close timer when entering submenu
-        if (hoverCloseTimerRef.current) {
-            clearTimeout(hoverCloseTimerRef.current);
-            hoverCloseTimerRef.current = null;
-        }
-    };
-    const handlePopoverMouseLeave = () => {
-        isHoveringSubmenuRef.current = false;
-        // Check if we should close
-        checkShouldClose();
-    };
-    // Merge event handlers
-    const mergeHandler = (handler1, handler2) => {
-        return (...args) => {
-            handler1?.(...args);
-            handler2?.(...args);
-        };
-    };
-    // Provide context to the trigger element (already rendered MenuItem)
-    const triggerContextValue = useMemo(() => ({
-        triggerRef: domTriggerRef,
-        triggerProps: menuTriggerProps,
-        isOpen: state.isOpen,
-        isDisabled,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onKeyDown: handleKeyDown,
-        onAction: isDisabled
-            ? undefined
-            : () => {
-                // Ignore the synthetic press generated by the same Enter/Space
-                if (suppressNextActionRef.current) {
-                    suppressNextActionRef.current = false;
-                    return;
-                }
-                // This is a mouse click, open the submenu
-                state.open();
-            },
-    }), [
-        state,
-        isDisabled,
-        handleMouseEnter,
-        handleMouseLeave,
-        handleKeyDown,
-        menuTriggerProps,
-    ]);
-    return (_jsxs(_Fragment, { children: [_jsx(SubmenuTriggerContext.Provider, { value: triggerContextValue, children: menuTrigger }), state.isOpen && (_jsx(Popover, { ref: popoverRef, hideArrow: true, isNonModal: true, isOpen: !parentContext.isClosing, style: positionProps.style, placement: placement, onClose: state.close, ...overlayProps, children: _jsxs("div", { style: { display: 'contents' }, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, children: [_jsx(DismissButton, { onDismiss: state.close }), _jsx(MenuContext.Provider, { value: nestedMenuContext, children: React.cloneElement(menu, {
-                                ...menu.props,
-                                autoFocus,
-                                onAction: (key) => {
-                                    // Call original menu onAction first
-                                    menu.props.onAction?.(key);
-                                    onAction?.(key);
-                                    // Don't close here - MenuItem will handle it via context.onClose
-                                },
-                                onKeyDown: (e) => {
-                                    // Handle keyboard navigation for closing submenu
-                                    if (e.key === 'ArrowLeft' || e.key === 'Escape') {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        state.close();
-                                        // Return focus to trigger
-                                        domTriggerRef.current?.focus();
-                                    }
-                                    // Call original handler if exists
-                                    menu.props.onKeyDown?.(e);
-                                },
-                                ref: menuRef,
-                            }) }), _jsx(DismissButton, { onDismiss: state.close })] }) }))] }));
-}
-/**
- * Public SubMenuTrigger component that users interact with.
- * It just provides the getCollectionNode for the collection system.
- */
-export function SubMenuTrigger(props) {
-    // This component is never actually rendered directly.
-    // The collection system uses getCollectionNode to build the menu.
-    return null;
-}
-// Allow React Stately collection builder to treat SubMenuTrigger as an Item
-SubMenuTrigger.getCollectionNode = function* (props) {
-    const [trigger, menu] = React.Children.toArray(props.children);
-    // Yield a collection node that tells the Menu to wrap this item with InternalSubMenuTrigger
-    yield {
-        element: trigger,
-        wrapper: (element) => (_jsxs(InternalSubMenuTrigger, { targetKey: element.key || undefined, ...props, children: [element, menu] }, element.key || undefined)),
-    };
-};
-SubMenuTrigger.displayName = 'SubMenuTrigger';
-
-        

package/es/components/actions/Menu/SubmenuTriggerContext.js

@@ -1,18 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import React from 'react';
-export const SubmenuTriggerContext = React.createContext(null);
-export function useSubmenuTriggerContext() {
-    const context = React.useContext(SubmenuTriggerContext);
-    if (!context) {
-        throw new Error('useSubmenuTriggerContext must be used within a SubmenuTriggerContext.Provider');
-    }
-    return context;
-}
-
-        

package/es/components/actions/Menu/context.js

@@ -1,14 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-import React, { useContext } from 'react';
-export const MenuContext = React.createContext({});
-export function useMenuContext() {
-    return useContext(MenuContext);
-}
-
-        

package/es/components/actions/Menu/index.js

@@ -1,19 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.114.0
- * Released under the MIT license.
- */
-
-export * from './Menu.js';
-export * from './MenuTrigger.js';
-export * from './MenuItem.js';
-export * from './MenuSection.js';
-export * from './SubMenuTrigger.js';
-export * from './context.js';
-// Re-export the main components
-export { Menu } from './Menu.js';
-export { MenuTrigger } from './MenuTrigger.js';
-export { SubMenuTrigger } from './SubMenuTrigger.js';
-
-