"use client" import * as React from "react" import { Menu as MenuPrimitive } from "@base-ui/react/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 MenuOpenContextValue = { open: boolean } const MenuOpenContext = React.createContext(null) type MenuHighlightContextValue = { layoutId: string activeId: string | null setActiveId: (id: string | null) => void reduce: boolean | null } const MenuHighlightContext = React.createContext(null) function useMenuOpen() { const ctx = React.useContext(MenuOpenContext) if (!ctx) { throw new Error("Menu parts must be used within or ") } return ctx.open } function Menu({ open: openProp, defaultOpen = false, onOpenChange, ...props }: MenuPrimitive.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 MenuPortal({ ...props }: MenuPrimitive.Portal.Props) { return } function MenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) { return } function MenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 6, className, render, onMouseLeave, ...props }: MenuPrimitive.Popup.Props & Pick< MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" >) { const open = useMenuOpen() 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 MenuHighlight({ itemId, tone = "default", }: { itemId: string tone?: "default" | "destructive" }) { const highlight = React.useContext(MenuHighlightContext) 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 useMenuItemMotion(itemId: string) { const highlight = React.useContext(MenuHighlightContext) const reduce = highlight?.reduce ?? false const arm = React.useCallback(() => { highlight?.setActiveId(itemId) }, [highlight, itemId]) return { reduce, arm, rowMotion: reduce ? undefined : menuItemVariants, } } function MenuGroup({ ...props }: MenuPrimitive.Group.Props) { return } function MenuLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & { inset?: boolean }) { return ( ) } function MenuItem({ className, inset, variant = "default", onMouseEnter, onFocus, children, ...props }: MenuPrimitive.Item.Props & { inset?: boolean variant?: "default" | "destructive" }) { const itemId = React.useId() const { reduce, arm, rowMotion } = useMenuItemMotion(itemId) return ( : undefined } onMouseEnter={(event) => { arm() onMouseEnter?.(event) }} onFocus={(event) => { arm() onFocus?.(event) }} {...props} > {children} ) } function MenuSub({ open: openProp, defaultOpen = false, onOpenChange, ...props }: MenuPrimitive.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 MenuSubTrigger({ className, inset, children, onMouseEnter, onFocus, ...props }: MenuPrimitive.SubmenuTrigger.Props & { inset?: boolean }) { const itemId = React.useId() const { reduce, arm, rowMotion } = useMenuItemMotion(itemId) return ( : undefined } onMouseEnter={(event) => { arm() onMouseEnter?.(event) }} onFocus={(event) => { arm() onFocus?.(event) }} {...props} > {children} ) } function MenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }: React.ComponentProps) { return ( ) } function MenuCheckboxItem({ className, children, checked, inset, onMouseEnter, onFocus, ...props }: MenuPrimitive.CheckboxItem.Props & { inset?: boolean }) { const itemId = React.useId() const { reduce, arm, rowMotion } = useMenuItemMotion(itemId) return ( : undefined } checked={checked} onMouseEnter={(event) => { arm() onMouseEnter?.(event) }} onFocus={(event) => { arm() onFocus?.(event) }} {...props} > {children} ) } function MenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) { return } function MenuRadioItem({ className, children, inset, onMouseEnter, onFocus, ...props }: MenuPrimitive.RadioItem.Props & { inset?: boolean }) { const itemId = React.useId() const { reduce, arm, rowMotion } = useMenuItemMotion(itemId) return ( : undefined } onMouseEnter={(event) => { arm() onMouseEnter?.(event) }} onFocus={(event) => { arm() onFocus?.(event) }} {...props} > {children} ) } function MenuSeparator({ className, ...props }: React.ComponentProps<"div">) { return (

) } function MenuShortcut({ className, ...props }: React.ComponentProps<"span">) { return ( ) } export { Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, }