@cube-dev/ui-kit 0.0.0-canary-0b8a096 → 0.0.0-canary-ba9edaf

package/types/components/actions/Menu/Menu.d.ts

@@ -6,8 +6,6 @@ import { BasePropsWithoutChildren, ContainerStyleProps, Styles } from '../../../
 import { CubeBlockProps } from '../../Block';
 import { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';
 import { MenuSelectionType } from './MenuItem';
-import { MenuTrigger } from './MenuTrigger';
-import { SubMenuTrigger } from './SubMenuTrigger';
 export interface CubeMenuProps<T> extends BasePropsWithoutChildren, ContainerStyleProps, Omit<AriaMenuProps<T>, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange'> {
     selectionIcon?: MenuSelectionType;
     header?: ReactNode;
@@ -59,16 +57,12 @@ declare const Section: SectionComponent;
 declare const __Menu: (<T>(props: CubeMenuProps<T> & React.RefAttributes<HTMLUListElement>) => ReactElement) & {
     Item: typeof Item;
     Section: typeof Section;
-    SubMenuTrigger: typeof SubMenuTrigger;
-    Trigger: typeof MenuTrigger;
 } & {
     Item: (props: {
         description?: ReactNode;
         [key: string]: any;
     }) => ReactElement;
     Section: any;
-    SubMenuTrigger: typeof SubMenuTrigger;
-    Trigger: React.ForwardRefExoticComponent<any>;
     displayName: string;
 };
 export { __Menu as Menu };

package/types/components/actions/Menu/context.d.ts

@@ -10,7 +10,6 @@ export interface MenuContextValue extends Omit<HTMLAttributes<HTMLElement>, 'aut
         popover?: boolean;
         tray?: boolean;
     };
-    isClosing?: boolean;
 }
 export declare const MenuContext: React.Context<MenuContextValue>;
 export declare function useMenuContext(): MenuContextValue;

package/types/components/actions/Menu/index.d.ts

@@ -2,8 +2,6 @@ export * from './Menu';
 export * from './MenuTrigger';
 export * from './MenuItem';
 export * from './MenuSection';
-export * from './SubMenuTrigger';
 export * from './context';
 export { Menu } from './Menu';
 export { MenuTrigger } from './MenuTrigger';
-export { SubMenuTrigger } from './SubMenuTrigger';

package/types/index.d.ts

@@ -67,7 +67,6 @@ export { ListBox } from './components/fields/ListBox';
 export { Menu } from './components/actions/Menu/Menu';
 export type { CubeMenuProps } from './components/actions/Menu/Menu';
 export { MenuTrigger } from './components/actions/Menu/MenuTrigger';
-export { SubMenuTrigger } from './components/actions/Menu/SubMenuTrigger';
 export type { CubeMenuTriggerProps } from './components/actions/Menu/MenuTrigger';
 export { CommandMenu } from './components/actions/CommandMenu';
 export type { CubeCommandMenuProps, CommandMenuItem, } from './components/actions/CommandMenu';

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

@@ -1,255 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-0b8a096
- * 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 { Popover } from '../../overlays/Modal';
-import { MenuContext, useMenuContext } from './context';
-import { SubmenuTriggerContext } from './SubmenuTriggerContext';
-// 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, disabled, 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);
-    // 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: disabled }, 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);
-    // 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 (disabled)
-            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();
-            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 (disabled)
-            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,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onKeyDown: handleKeyDown,
-        onAction: disabled
-            ? undefined
-            : () => {
-                // Ignore the synthetic press generated by the same Enter/Space
-                if (suppressNextActionRef.current) {
-                    suppressNextActionRef.current = false;
-                    return;
-                }
-                state.open(); // mouse-click opens submenu
-            },
-    }), [state, disabled, handleMouseEnter, handleMouseLeave, handleKeyDown]);
-    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.0.0-canary-0b8a096
- * 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/types/components/actions/Menu/SubMenuTrigger.d.ts

@@ -1,34 +0,0 @@
-import { Key, ReactElement, ReactNode } from 'react';
-import { AriaMenuTriggerProps, Placement } from 'react-aria';
-export interface CubeSubMenuTriggerProps extends AriaMenuTriggerProps {
-    placement?: Placement;
-    offset?: number;
-    crossOffset?: number;
-    shouldFlip?: boolean;
-    containerPadding?: number;
-    /**
-     * Sub-menu trigger and the sub-menu itself. Must be exactly two React nodes.
-     *
-     * 1) Trigger – **must render `<li role="menuitem">`** (usually `Menu.Item`).
-     * 2) Sub-menu – a `<Menu>` element.
-     */
-    children: [ReactNode, ReactElement];
-    /** Pass-through flag to disable the trigger */
-    disabled?: boolean;
-    /**
-     * Optional callback that bubbles the `onAction` event from the sub-menu.
-     */
-    onAction?: (key: Key) => void;
-    /**
-     * Whether the sub-menu should receive focus on open. Defaults to `'first'`.
-     */
-    autoFocus?: boolean | 'first' | 'last';
-}
-/**
- * Public SubMenuTrigger component that users interact with.
- * It just provides the getCollectionNode for the collection system.
- */
-export declare function SubMenuTrigger(props: CubeSubMenuTriggerProps): null;
-export declare namespace SubMenuTrigger {
-    var displayName: string;
-}

package/types/components/actions/Menu/SubmenuTriggerContext.d.ts

@@ -1,12 +0,0 @@
-import React, { RefObject } from 'react';
-export interface SubmenuTriggerContextValue {
-    triggerRef: RefObject<HTMLElement>;
-    isOpen?: boolean;
-    onMouseEnter?: () => void;
-    onMouseLeave?: () => void;
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    onAction?: () => void;
-    triggerProps?: any;
-}
-export declare const SubmenuTriggerContext: React.Context<SubmenuTriggerContextValue | null>;
-export declare function useSubmenuTriggerContext(): SubmenuTriggerContextValue;