'use client'; import * as React from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; import { Check, ChevronRight, Circle } from 'lucide-react'; import { AnimatePresence, motion, type Transition } from 'motion/react'; import { cn } from '@/lib/utils'; const EXIT_DELAY = 0.3; interface DropdownMenuContextType { isOpen: boolean; activeValue: string | null; setActiveValue: (value: string | null) => void; scheduleReset: () => void; clearReset: () => void; } const DropdownMenuContext = React.createContext({ isOpen: false, activeValue: null, setActiveValue: () => {}, scheduleReset: () => {}, clearReset: () => {}, }); const useDropdownMenu = (): DropdownMenuContextType => { const context = React.useContext(DropdownMenuContext); if (!context) { throw new Error('useDropdownMenu must be used within a DropdownMenu'); } return context; }; type DropdownMenuProps = React.ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.Root >; const DropdownMenu: React.FC = ({ children, ...props }) => { const [isOpen, setIsOpen] = React.useState( props?.open ?? props?.defaultOpen ?? false, ); const [activeValue, setActiveValueState] = React.useState( null, ); const exitTimeoutRef = React.useRef | null>( null, ); const scheduleReset = React.useCallback(() => { if (exitTimeoutRef.current) { clearTimeout(exitTimeoutRef.current); } exitTimeoutRef.current = setTimeout(() => { setActiveValueState(null); exitTimeoutRef.current = null; }, EXIT_DELAY * 1000); }, []); const clearReset = React.useCallback(() => { if (exitTimeoutRef.current) { clearTimeout(exitTimeoutRef.current); exitTimeoutRef.current = null; } }, []); React.useEffect(() => { return () => { if (exitTimeoutRef.current) { clearTimeout(exitTimeoutRef.current); } }; }, []); const setActiveValue = (val: string | null) => { clearReset(); setActiveValueState(val); }; const handleOpenChange = React.useCallback( (open: boolean) => { setIsOpen(open); props.onOpenChange?.(open); }, [props], ); return ( {children} ); }; type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.Trigger >; const DropdownMenuTrigger = React.forwardRef< React.ElementRef, DropdownMenuTriggerProps >(({ className, ...props }, ref) => ( )); DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName; type DropdownMenuGroupProps = React.ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.Group >; const DropdownMenuGroup = DropdownMenuPrimitive.Group; type DropdownMenuPortalProps = React.ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.Portal >; const DropdownMenuPortal = DropdownMenuPrimitive.Portal; type DropdownMenuSubProps = React.ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.Sub >; const DropdownMenuSub = DropdownMenuPrimitive.Sub; type DropdownMenuRadioGroupProps = React.ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.RadioGroup >; const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; type DropdownMenuSubTriggerProps = React.ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.SubTrigger > & { inset?: boolean; transition?: Transition; }; const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, DropdownMenuSubTriggerProps >( ( { className, children, inset, disabled, transition = { type: 'spring', stiffness: 200, damping: 20 }, ...props }, ref, ) => { const { activeValue, setActiveValue, scheduleReset, clearReset } = useDropdownMenu(); const id = React.useId(); const handleMouseEnter = (e: React.MouseEvent) => { clearReset(); setActiveValue(id); props.onMouseEnter?.(e); }; const handleMouseLeave = (e: React.MouseEvent) => { scheduleReset(); props.onMouseLeave?.(e); }; return ( { handleMouseEnter(e); props.onMouseEnter?.(e); }} onMouseLeave={(e) => { handleMouseLeave(e); props.onMouseLeave?.(e); }} > {activeValue === id && !disabled && ( )} {children} ); }, ); DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName; type DropdownMenuSubContentProps = React.ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.SubContent >; const DropdownMenuSubContent = React.forwardRef< React.ElementRef, DropdownMenuSubContentProps >(({ className, ...props }, ref) => ( )); DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName; type DropdownMenuContentProps = React.ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.Content > & { transition?: Transition; }; const DropdownMenuContent = React.forwardRef< React.ElementRef, DropdownMenuContentProps >( ( { className, children, sideOffset = 4, transition = { duration: 0.2 }, ...props }, ref, ) => { const { isOpen } = useDropdownMenu(); return ( {isOpen && ( {children} )} ); }, ); DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName; type DropdownMenuItemProps = React.ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.Item > & { inset?: boolean; transition?: Transition; }; const DropdownMenuItem = React.forwardRef< React.ElementRef, DropdownMenuItemProps >( ( { className, children, inset, disabled, transition = { type: 'spring', stiffness: 200, damping: 20 }, ...props }, ref, ) => { const { activeValue, setActiveValue, scheduleReset, clearReset } = useDropdownMenu(); const id = React.useId(); const handleMouseEnter = (e: React.MouseEvent) => { clearReset(); setActiveValue(id); props.onMouseEnter?.(e); }; const handleMouseLeave = (e: React.MouseEvent) => { scheduleReset(); props.onMouseLeave?.(e); }; return ( { handleMouseEnter(e); props.onMouseEnter?.(e); }} onMouseLeave={(e) => { handleMouseLeave(e); props.onMouseLeave?.(e); }} > {activeValue === id && !disabled && ( )} {children} ); }, ); DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName; type DropdownMenuCheckboxItemProps = React.ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.CheckboxItem > & { transition?: Transition; }; const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, DropdownMenuCheckboxItemProps >( ( { className, children, checked, disabled, transition = { type: 'spring', stiffness: 200, damping: 20 }, ...props }, ref, ) => { const { activeValue, setActiveValue, scheduleReset, clearReset } = useDropdownMenu(); const id = React.useId(); const handleMouseEnter = (e: React.MouseEvent) => { clearReset(); setActiveValue(id); props.onMouseEnter?.(e); }; const handleMouseLeave = (e: React.MouseEvent) => { scheduleReset(); props.onMouseLeave?.(e); }; return ( { handleMouseEnter(e); props.onMouseEnter?.(e); }} onMouseLeave={(e) => { handleMouseLeave(e); props.onMouseLeave?.(e); }} > {activeValue === id && !disabled && ( )} {children} ); }, ); DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName; type DropdownMenuRadioItemProps = React.ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.RadioItem > & { transition?: Transition; }; const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, DropdownMenuRadioItemProps >( ( { className, children, disabled, transition = { type: 'spring', stiffness: 200, damping: 20 }, ...props }, ref, ) => { const { activeValue, setActiveValue, scheduleReset, clearReset } = useDropdownMenu(); const id = React.useId(); const handleMouseEnter = (e: React.MouseEvent) => { clearReset(); setActiveValue(id); props.onMouseEnter?.(e); }; const handleMouseLeave = (e: React.MouseEvent) => { scheduleReset(); props.onMouseLeave?.(e); }; return ( { handleMouseEnter(e); props.onMouseEnter?.(e); }} onMouseLeave={(e) => { handleMouseLeave(e); props.onMouseLeave?.(e); }} > {activeValue === id && !disabled && ( )} {children} ); }, ); DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName; type DropdownMenuLabelProps = React.ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.Label > & { inset?: boolean; }; const DropdownMenuLabel = React.forwardRef< React.ElementRef, DropdownMenuLabelProps >(({ className, inset, ...props }, ref) => ( )); DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName; type DropdownMenuSeparatorProps = React.ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.Separator >; const DropdownMenuSeparator = React.forwardRef< React.ElementRef, DropdownMenuSeparatorProps >(({ className, ...props }, ref) => ( )); DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName; type DropdownMenuShortcutProps = React.HTMLAttributes; const DropdownMenuShortcut = React.forwardRef< HTMLSpanElement, DropdownMenuShortcutProps >(({ className, ...props }, ref) => { return ( ); }); DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'; export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, type DropdownMenuProps, type DropdownMenuTriggerProps, type DropdownMenuContentProps, type DropdownMenuItemProps, type DropdownMenuCheckboxItemProps, type DropdownMenuRadioItemProps, type DropdownMenuLabelProps, type DropdownMenuSeparatorProps, type DropdownMenuShortcutProps, type DropdownMenuGroupProps, type DropdownMenuPortalProps, type DropdownMenuSubProps, type DropdownMenuSubContentProps, type DropdownMenuSubTriggerProps, type DropdownMenuRadioGroupProps, };