"use client" import * as React from "react" import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu" import { Check, ChevronRight } from "lucide-react" import { AnimatePresence, LayoutGroup, motion, useReducedMotion, } from "motion/react" import { layoutTween, menuItemVariants, menuPopupMotion, } from "@/lib/motion" import { cn } from "@/lib/utils" /** Layered pop elevation — ring-as-border + cast stack + top light. */ const overlayElevation = "ds-elev-pop" type ContextMenuOpenContextValue = { open: boolean } const ContextMenuOpenContext = React.createContext(null) type ContextMenuHighlightContextValue = { layoutId: string activeId: string | null setActiveId: (id: string | null) => void reduce: boolean | null } const ContextMenuHighlightContext = React.createContext(null) function useContextMenuOpen() { const ctx = React.useContext(ContextMenuOpenContext) if (!ctx) { throw new Error( "ContextMenu parts must be used within or " ) } return ctx.open } function ContextMenu({ open: openProp, defaultOpen = false, onOpenChange, ...props }: ContextMenuPrimitive.Root.Props) { const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen) const isControlled = openProp !== undefined const open = isControlled ? openProp : uncontrolledOpen const handleOpenChange = React.useCallback< NonNullable >( (next, eventDetails) => { if (!isControlled) setUncontrolledOpen(next) onOpenChange?.(next, eventDetails) }, [isControlled, onOpenChange] ) return ( ) } function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) { return ( ) } function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) { return ( ) } function ContextMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, render, onMouseLeave, ...props }: ContextMenuPrimitive.Popup.Props & Pick< ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" >) { const open = useContextMenuOpen() const reduce = useReducedMotion() const groupId = React.useId() const [activeId, setActiveId] = React.useState(null) const highlight = React.useMemo( () => ({ layoutId: `${groupId}-ink`, activeId, setActiveId, reduce: reduce ?? false, }), [activeId, groupId, reduce] ) return ( {open ? ( } onMouseLeave={(event) => { setActiveId(null) onMouseLeave?.(event) }} {...props} /> ) : null} ) } function ContextMenuHighlight({ itemId, tone = "default", }: { itemId: string tone?: "default" | "destructive" }) { const highlight = React.useContext(ContextMenuHighlightContext) if (!highlight || highlight.reduce || highlight.activeId !== itemId) { return null } return ( ) } const itemBase = "relative flex cursor-default items-center gap-2 rounded-[calc(var(--radius)-2px)] px-2 py-0.5 text-[0.8125rem] leading-snug outline-none select-none" function useContextMenuItemMotion(itemId: string) { const highlight = React.useContext(ContextMenuHighlightContext) const reduce = highlight?.reduce ?? false const arm = React.useCallback(() => { highlight?.setActiveId(itemId) }, [highlight, itemId]) return { reduce, arm, rowMotion: reduce ? undefined : menuItemVariants, } } function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) { return } function ContextMenuLabel({ className, inset, ...props }: ContextMenuPrimitive.GroupLabel.Props & { inset?: boolean }) { return ( ) } function ContextMenuItem({ className, inset, variant = "default", onMouseEnter, onFocus, children, ...props }: ContextMenuPrimitive.Item.Props & { inset?: boolean variant?: "default" | "destructive" }) { const itemId = React.useId() const { reduce, arm, rowMotion } = useContextMenuItemMotion(itemId) return ( : undefined} onMouseEnter={(event) => { arm() onMouseEnter?.(event) }} onFocus={(event) => { arm() onFocus?.(event) }} {...props} > {children} ) } function ContextMenuSub({ open: openProp, defaultOpen = false, onOpenChange, ...props }: ContextMenuPrimitive.SubmenuRoot.Props) { const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen) const isControlled = openProp !== undefined const open = isControlled ? openProp : uncontrolledOpen const handleOpenChange = React.useCallback< NonNullable >( (next, eventDetails) => { if (!isControlled) setUncontrolledOpen(next) onOpenChange?.(next, eventDetails) }, [isControlled, onOpenChange] ) return ( ) } function ContextMenuSubTrigger({ className, inset, children, onMouseEnter, onFocus, ...props }: ContextMenuPrimitive.SubmenuTrigger.Props & { inset?: boolean }) { const itemId = React.useId() const { reduce, arm, rowMotion } = useContextMenuItemMotion(itemId) return ( : undefined} onMouseEnter={(event) => { arm() onMouseEnter?.(event) }} onFocus={(event) => { arm() onFocus?.(event) }} {...props} > {children} ) } function ContextMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }: React.ComponentProps) { return ( ) } function ContextMenuCheckboxItem({ className, children, checked, inset, onMouseEnter, onFocus, ...props }: ContextMenuPrimitive.CheckboxItem.Props & { inset?: boolean }) { const itemId = React.useId() const { reduce, arm, rowMotion } = useContextMenuItemMotion(itemId) return ( : undefined} checked={checked} onMouseEnter={(event) => { arm() onMouseEnter?.(event) }} onFocus={(event) => { arm() onFocus?.(event) }} {...props} > {children} ) } function ContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props) { return ( ) } function ContextMenuRadioItem({ className, children, inset, onMouseEnter, onFocus, ...props }: ContextMenuPrimitive.RadioItem.Props & { inset?: boolean }) { const itemId = React.useId() const { reduce, arm, rowMotion } = useContextMenuItemMotion(itemId) return ( : undefined} onMouseEnter={(event) => { arm() onMouseEnter?.(event) }} onFocus={(event) => { arm() onFocus?.(event) }} {...props} > {children} ) } function ContextMenuSeparator({ className, ...props }: React.ComponentProps<"div">) { return (

) } function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">) { return ( ) } export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, }