50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T337d,"use client"; import * as React from "react"; import { useState, useCallback, useRef, useEffect } from "react"; import * as PopoverPrimitive from "@radix-ui/react-popover"; import { cn } from "@/lib/utils"; // ============================================================================ // Types // ============================================================================ export interface NestedMenuItem { /** Unique key for the item */ key: string; /** Display label */ label: string; /** Icon component */ icon?: React.ComponentType<{ className?: string }>; /** Click handler */ onSelect?: () => void; /** Whether this item has a submenu */ hasSubmenu?: boolean; /** Submenu items (if hasSubmenu is true) */ submenuItems?: NestedMenuItem[]; /** Color variant */ variant?: "default" | "danger"; /** Additional className for custom styling */ className?: string; /** Icon color (CSS color value) */ iconColor?: string; /** Separator after this item */ separator?: boolean; } export interface NestedMenuSectionProps { /** Section title */ title?: string; /** Items in this section */ items: NestedMenuItem[]; /** Show divider after section */ showDivider?: boolean; } // ============================================================================ // Hook: useNestedMenu // ============================================================================ export function useNestedMenu() { const [isOpen, setIsOpen] = useState(false); const [itemRef, setItemRef] = useState(null); const timeoutRef = useRef(null); const handleMouseEnter = useCallback((e: React.MouseEvent) => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); timeoutRef.current = null; } setItemRef(e.currentTarget as HTMLElement); setIsOpen(true); }, []); const handleMouseLeave = useCallback(() => { // Longer delay to allow moving to submenu timeoutRef.current = setTimeout(() => { setIsOpen(false); }, 300); }, []); const cancelClose = useCallback(() => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); timeoutRef.current = null; } }, []); useEffect(() => { return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } }; }, []); return { isOpen, setIsOpen, itemRef, handleMouseEnter, handleMouseLeave, cancelClose, }; } // ============================================================================ // NestedMenuTooltip Component // ============================================================================ export interface NestedMenuTooltipProps { /** Whether the tooltip is open */ isOpen: boolean; /** Callback when open state changes */ onOpenChange: (open: boolean) => void; /** Reference element to anchor the tooltip */ itemRef: HTMLElement | null; /** Menu items to display */ menuItems: NestedMenuItem[]; /** Icon className */ iconClassName?: string; /** Container className */ className?: string; /** Called when mouse enters the tooltip */ onMouseEnter?: () => void; /** Called when mouse leaves the tooltip */ onMouseLeave?: () => void; } export function NestedMenuTooltip({ isOpen, onOpenChange, itemRef, menuItems, iconClassName = "h-4 w-4", className, onMouseEnter, onMouseLeave, }: NestedMenuTooltipProps) { if (!itemRef || !isOpen) return null; const rect = itemRef.getBoundingClientRect(); return ( e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()} > {menuItems.map((item) => { const Icon = item.icon; return ( ); })} ); } // ============================================================================ // NestedMenuItem Component // ============================================================================ export interface NestedMenuItemComponentProps { /** Menu item data */ item: NestedMenuItem; /** Icon className */ iconClassName?: string; /** Whether to show arrow for submenu */ showSubmenuArrow?: boolean; /** Arrow icon component */ arrowIcon?: React.ComponentType<{ className?: string }>; /** Mouse enter handler (for submenu trigger) */ onMouseEnter?: (e: React.MouseEvent) => void; /** Mouse leave handler */ onMouseLeave?: () => void; } export function NestedMenuItemComponent({ item, iconClassName = "h-6 w-6", showSubmenuArrow = true, arrowIcon: ArrowIcon, onMouseEnter, onMouseLeave, }: NestedMenuItemComponentProps) { const Icon = item.icon; return ( ); } // ============================================================================ // NestedMenuSection Component // ============================================================================ export interface NestedMenuSectionComponentProps extends NestedMenuSectionProps { /** Icon className */ iconClassName?: string; /** Arrow icon for submenu items */ arrowIcon?: React.ComponentType<{ className?: string }>; /** Callback when item with submenu is hovered */ onSubmenuHover?: ( item: NestedMenuItem, e: React.MouseEvent, ) => void; /** Callback when mouse leaves submenu trigger */ onSubmenuLeave?: () => void; } export function NestedMenuSection({ title, items, showDivider = false, iconClassName = "h-4 w-4", arrowIcon, onSubmenuHover, onSubmenuLeave, }: NestedMenuSectionComponentProps) { return (

{title && (

{title}

)} {items.map((item) => ( onSubmenuHover?.(item, e) : undefined } onMouseLeave={item.hasSubmenu ? onSubmenuLeave : undefined} /> {item.separator &&

} ))} {showDivider &&

}

); } // ============================================================================ // NestedMenu Component (Full Menu with built-in submenu handling) // ============================================================================ export interface NestedMenuProps { /** Menu sections */ sections: NestedMenuSectionProps[]; /** Trigger element */ trigger: React.ReactNode; /** Icon className */ iconClassName?: string; /** Arrow icon for submenu items */ arrowIcon?: React.ComponentType<{ className?: string }>; /** Menu placement */ side?: "top" | "right" | "bottom" | "left"; /** Alignment relative to trigger */ align?: "start" | "center" | "end"; /** Offset from trigger */ sideOffset?: number; /** Container className */ className?: string; /** Controlled open state */ open?: boolean; /** Callback when open state changes */ onOpenChange?: (open: boolean) => void; } export function NestedMenu({ sections, trigger, iconClassName = "h-4 w-4", arrowIcon, side = "right", align = "start", sideOffset = 8, className, open: controlledOpen, onOpenChange, }: NestedMenuProps) { const [internalOpen, setInternalOpen] = useState(false); const isControlled = controlledOpen !== undefined; const open = isControlled ? controlledOpen : internalOpen; const handleOpenChange = useCallback( (newOpen: boolean) => { if (!isControlled) { setInternalOpen(newOpen); } onOpenChange?.(newOpen); }, [isControlled, onOpenChange], ); // Submenu state const [activeSubmenu, setActiveSubmenu] = useState( null, ); const [submenuAnchor, setSubmenuAnchor] = useState(null); const submenuTimeoutRef = useRef(null); const handleSubmenuHover = useCallback( (item: NestedMenuItem, e: React.MouseEvent) => { if (submenuTimeoutRef.current) { clearTimeout(submenuTimeoutRef.current); submenuTimeoutRef.current = null; } setActiveSubmenu(item); setSubmenuAnchor(e.currentTarget); }, [], ); const handleSubmenuLeave = useCallback(() => { submenuTimeoutRef.current = setTimeout(() => { setActiveSubmenu(null); setSubmenuAnchor(null); }, 300); }, []); const handleSubmenuEnter = useCallback(() => { if (submenuTimeoutRef.current) { clearTimeout(submenuTimeoutRef.current); submenuTimeoutRef.current = null; } }, []); useEffect(() => { return () => { if (submenuTimeoutRef.current) { clearTimeout(submenuTimeoutRef.current); } }; }, []); // Close submenu when main menu closes useEffect(() => { if (!open) { setActiveSubmenu(null); setSubmenuAnchor(null); } }, [open]); return ( <> {trigger} e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()} onInteractOutside={(e) => { // Prevent closing when interacting with submenu const target = e.target as HTMLElement; if (target?.closest("[data-radix-popper-content-wrapper]")) { e.preventDefault(); } }} > {sections.map((section, index) => ( ))} {/* Submenu */} {activeSubmenu?.submenuItems && ( { if (!isOpen) { setActiveSubmenu(null); setSubmenuAnchor(null); } }} itemRef={submenuAnchor} menuItems={activeSubmenu.submenuItems} iconClassName={iconClassName} onMouseEnter={handleSubmenuEnter} onMouseLeave={handleSubmenuLeave} /> )} ); } export default NestedMenu; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-popover",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-popover","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-popover"}]]}]}]]}],["$","$L50",null,{"namespace":"@gaia","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/new-york/ui/nested-menu.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]