; }, ); DropdownMenuAnchor.displayName = "DropdownMenuAnchor"; interface MenuSurfaceProps extends MotionSafe> { reference: Element | VirtualElement | null; colorSource: Element | null; side: Side; align: Align; sideOffset: number; alignOffset: number; loop: boolean; takeFocusIntent: () => FocusIntent; onDismiss: () => void; /** Submenus close with ArrowLeft and don't watch outside clicks themselves. */ isSub: boolean; } const MenuSurface = React.forwardRef( ( { reference, colorSource, side, align, sideOffset, alignOffset, loop, takeFocusIntent, onDismiss, isSub, id, className, style, children, onKeyDown, onFocus, onBlur, onPointerMove, onPointerLeave, ...props }, forwardedRef, ) => { const root = useRoot("DropdownMenuContent"); const reduceMotion = useReducedMotion() ?? false; const isPresent = useIsPresent(); const menuId = React.useId(); const panelRef = React.useRef(null); const ref = useComposedRefs(forwardedRef, panelRef); const [activeId, setActiveId] = React.useState(null); const typeahead = React.useRef({ query: "", timer: 0 }); const grace = React.useRef<{ area: Point[]; side: Side } | null>(null); const graceTimer = React.useRef(0); const pointer = React.useRef<{ x: number; dir: Side }>({ x: 0, dir: "right" }); const [floatingEl, setFloatingEl] = React.useState(null); const placement = (align === "center" ? side : `${side}-${align}`) as Placement; const { floatingStyles, middlewareData, placement: finalPlacement } = useFloating({ placement, strategy: "fixed", open: true, elements: { reference, floating: floatingEl }, whileElementsMounted: autoUpdate, middleware: [ offset({ mainAxis: sideOffset, alignmentAxis: alignOffset }), flip({ padding: 8 }), // A side-opening submenu with no room on either side (a phone) slides back over its // parent instead of hanging off the screen edge. shift({ padding: 8, crossAxis: side === "left" || side === "right" }), size({ padding: 8, apply({ availableWidth, availableHeight, elements, rects }) { // Lets a menu match its trigger: className="w-[var(--menu-trigger-width)]". elements.floating.style.setProperty("--menu-trigger-width", `${rects.reference.width}px`); elements.floating.style.setProperty("--menu-available-width", `${Math.max(0, availableWidth)}px`); elements.floating.style.setProperty("--menu-available-height", `${Math.max(0, availableHeight)}px`); }, }), transformOrigin, ], }); const finalSide = finalPlacement.split("-")[0] as Side; const finalAlign = (finalPlacement.split("-")[1] ?? "center") as Align; const origin = (middlewareData.transformOrigin as { origin?: string } | undefined)?.origin; // A portal leaves the trigger's subtree, so carry its color over. const inherited = React.useMemo(() => (root.color ? undefined : readNeon(colorSource)), [root.color, colorSource]); const colorStyle = root.color ? neonVars(root.color) : inherited ? ({ "--neon": inherited, "--neon-accent": inherited } as React.CSSProperties) : undefined; // Read once per mount: StrictMode runs this effect twice, and taking the intent again would come // back as "menu" and pull focus off the first item onto the panel. const focusIntent = React.useRef(null); React.useEffect(() => { const panel = panelRef.current; if (!panel) return; focusIntent.current ??= takeFocusIntent(); const intent = focusIntent.current; if (intent === "none") return; const items = getItems(panel); const target = intent === "first" ? items[0] : intent === "last" ? items[items.length - 1] : undefined; if (target) focusItem(panel, target, true); else panel.focus({ preventScroll: true }); }, [takeFocusIntent]); React.useEffect(() => { const state = typeahead.current; return () => { window.clearTimeout(state.timer); window.clearTimeout(graceTimer.current); }; }, []); const { rootId, anchorPoint, triggerEl, close, restoreFocus } = root; React.useEffect(() => { if (isSub || !isPresent) return; const onPointerDownOutside = (event: PointerEvent) => { const target = event.target as Element | null; if (target?.closest?.(`[data-neonkit-menu="${rootId}"]`)) return; // The trigger toggles itself. A context-menu area is outside, so a click there closes. if (!anchorPoint && target && triggerEl?.contains(target)) return; close(false); // If the click landed on nothing focusable, put focus back on the trigger. window.requestAnimationFrame(() => { const active = document.activeElement; if (!active || active === document.body) restoreFocus(); }); }; document.addEventListener("pointerdown", onPointerDownOutside, true); return () => document.removeEventListener("pointerdown", onPointerDownOutside, true); }, [isSub, isPresent, rootId, anchorPoint, triggerEl, close, restoreFocus]); const menu = React.useMemo(() => { const isPointerMovingToSubmenu = (event: React.PointerEvent) => { const intent = grace.current; if (!intent || pointer.current.dir !== intent.side) return false; return isPointInPolygon({ x: event.clientX, y: event.clientY }, intent.area); }; return { menuId, activeId, setActiveId, loop, reduceMotion, focusMenu: () => panelRef.current?.focus({ preventScroll: true }), isTypingAhead: () => typeahead.current.query !== "", isPointerMovingToSubmenu, setGrace: (area, graceSide) => { grace.current = { area, side: graceSide }; window.clearTimeout(graceTimer.current); graceTimer.current = window.setTimeout(() => { grace.current = null; }, GRACE_TIMEOUT); }, clearGrace: () => { grace.current = null; window.clearTimeout(graceTimer.current); }, }; }, [menuId, activeId, loop, reduceMotion]); function handleKeyDown(event: React.KeyboardEvent) { onKeyDown?.(event); const panel = event.currentTarget; // Keys from a portaled submenu bubble here through React; that menu handles its own. if (event.defaultPrevented || !panel.contains(event.target as Node)) return; const items = getItems(panel); const current = items.indexOf(document.activeElement as HTMLElement); const last = items.length - 1; const { key } = event; let next = -1; switch (key) { case "ArrowDown": next = current < 0 ? 0 : current === last ? (loop ? 0 : last) : current + 1; break; case "ArrowUp": next = current < 0 ? last : current === 0 ? (loop ? last : 0) : current - 1; break; case "Home": case "PageUp": next = 0; break; case "End": case "PageDown": next = last; break; case "Escape": event.preventDefault(); event.stopPropagation(); onDismiss(); return; case "ArrowLeft": if (isSub) { event.preventDefault(); onDismiss(); } return; case "Tab": // Hand focus back to the trigger and let the browser continue the Tab from there. close(true); return; default: { const printable = key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey; if (!printable || (key === " " && !typeahead.current.query)) return; event.preventDefault(); const state = typeahead.current; window.clearTimeout(state.timer); state.timer = window.setTimeout(() => { state.query = ""; }, TYPEAHEAD_RESET); state.query += key.toLowerCase(); // Pressing the same letter repeatedly cycles through items that start with it. const repeated = state.query.split("").every((char) => char === state.query[0]); const query = repeated ? state.query[0] : state.query; const start = current < 0 ? 0 : current + (repeated ? 1 : 0); for (let n = 0; n < items.length; n++) { const index = (start + n) % items.length; if (textOf(items[index]).startsWith(query)) { next = index; break; } } } } if (next >= 0 && items[next]) { event.preventDefault(); focusItem(panel, items[next], true); } } return (

); }, ); MenuSurface.displayName = "DropdownMenuSurface"; export interface DropdownMenuContentProps extends MotionSafe> { side?: Side; align?: Align; /** Gap between the trigger and the menu, in px. */ sideOffset?: number; alignOffset?: number; /** Arrow keys wrap from the last item to the first and back. */ loop?: boolean; } const DropdownMenuContent = React.forwardRef( ({ side = "bottom", align = "start", sideOffset, alignOffset = 0, loop = true, children, ...props }, ref) => { const root = useRoot("DropdownMenuContent"); const isClient = useIsClient(); const point = root.anchorPoint; const pointX = point?.x; const pointY = point?.y; const anchorEl = root.anchorEl; const virtual = React.useMemo(() => { if (pointX === undefined || pointY === undefined) return null; return { getBoundingClientRect: () => ({ x: pointX, y: pointY, width: 0, height: 0, top: pointY, left: pointX, right: pointX, bottom: pointY, }), contextElement: anchorEl ?? undefined, }; }, [pointX, pointY, anchorEl]); if (!isClient) return null; const colorSource = root.anchorEl ?? root.triggerEl; const reference = virtual ?? colorSource; return createPortal( {root.open && ( root.close(true)} isSub={false} {...props} > {children} )} , portalContainer(colorSource), ); }, ); DropdownMenuContent.displayName = "DropdownMenuContent"; function Highlight({ menu }: { menu: MenuContextValue }) { return ( ); } interface ItemShellProps extends Omit, "onSelect" | "role"> { role: "menuitem" | "menuitemcheckbox" | "menuitemradio"; disabled?: boolean; danger?: boolean; inset?: boolean; asChild?: boolean; /** Base UI-style asChild: `render={}`. */ render?: React.ReactElement; /** Accepted for Base UI compatibility; no effect. */ nativeButton?: boolean; textValue?: string; leading?: (highlighted: boolean) => React.ReactNode; trailing?: (highlighted: boolean) => React.ReactNode; /** Sub triggers open a submenu instead of selecting. */ selectable?: boolean; onSelect?: (event: Event) => void; } const ItemShell = React.forwardRef( (raw, forwardedRef) => { const { role, disabled = false, danger = false, inset = false, asChild = false, textValue, leading, trailing, selectable = true, onSelect, id: idProp, className, style, children, onClick, onKeyDown, onFocus, onPointerMove, onPointerDown, onPointerUp, onPointerLeave, ...props } = fromRenderProp(raw); const root = useRoot("DropdownMenuItem"); const menu = useMenu("DropdownMenuItem"); const autoId = React.useId(); const id = idProp ?? autoId; const highlighted = menu.activeId === id; const pressedHere = React.useRef(false); const itemProps = { ...props, id, role, tabIndex: -1, "aria-disabled": disabled || undefined, "data-disabled": disabled ? "" : undefined, "data-highlighted": highlighted ? "" : undefined, "data-variant": danger ? "danger" : undefined, "data-text-value": textValue ?? (typeof children === "string" && !asChild ? children : undefined), style: danger ? ({ "--neon": DANGER, "--neon-accent": DANGER, ...style } as React.CSSProperties) : style, className: cn( "relative flex w-full cursor-pointer select-none items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-sm leading-5 outline-none", "transition-colors duration-150 ease-out [&_svg]:pointer-events-none [&_svg]:shrink-0", inset && "pl-[34px]", danger ? highlighted ? "text-[rgb(var(--neon))]" : "text-[rgb(var(--neon)/0.85)]" : highlighted ? "text-white" : "text-white/75", disabled && "cursor-not-allowed opacity-40", className, ), onFocus: (event: React.FocusEvent) => { onFocus?.(event); if (event.target === event.currentTarget) menu.setActiveId(id); }, onPointerMove: (event: React.PointerEvent) => { onPointerMove?.(event); if (event.defaultPrevented || event.pointerType !== "mouse") return; if (menu.isPointerMovingToSubmenu(event)) return; if (disabled) menu.focusMenu(); else if (document.activeElement !== event.currentTarget) event.currentTarget.focus({ preventScroll: true }); }, onPointerDown: (event: React.PointerEvent) => { onPointerDown?.(event); pressedHere.current = true; }, onPointerUp: (event: React.PointerEvent) => { onPointerUp?.(event); // Press on the trigger, drag onto an item, release: that selects it, like a native menu. const dragged = !pressedHere.current && event.pointerType === "mouse" && event.button === 0; pressedHere.current = false; if (dragged && !event.defaultPrevented) event.currentTarget.click(); }, onPointerLeave: (event: React.PointerEvent) => { onPointerLeave?.(event); pressedHere.current = false; }, onClick: (event: React.MouseEvent) => { onClick?.(event); if (disabled) { event.preventDefault(); return; } if (event.defaultPrevented || !selectable) return; const item = event.currentTarget; const selectEvent = new CustomEvent("neonkit.menu.select", { bubbles: true, cancelable: true }); if (onSelect) item.addEventListener(selectEvent.type, (e) => onSelect(e), { once: true }); item.dispatchEvent(selectEvent); if (!selectEvent.defaultPrevented) root.close(true); }, onKeyDown: (event: React.KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented || disabled) return; if (event.key === " " && menu.isTypingAhead()) return; if (event.key === "Enter" || event.key === " ") { event.preventDefault(); // Go through click so asChild links navigate the way they would on a mouse press. event.currentTarget.click(); } }, }; const inner = (label: React.ReactNode) => ( <> {highlighted && } {leading?.(highlighted)} {label} {trailing?.(highlighted)} ); const asChildElement = asChild ? resolveElement<{ children?: React.ReactNode }>(children) : null; if (asChildElement) { return ( } {...(itemProps as React.HTMLAttributes)}> {React.cloneElement(asChildElement, undefined, inner(asChildElement.props.children))} ); } return (

{inner(children)}

); }, ); ItemShell.displayName = "DropdownMenuItemShell"; function IconSlot({ icon, highlighted, danger }: { icon: React.ReactNode; highlighted: boolean; danger?: boolean }) { return ( {icon} ); } function Shortcut({ children, highlighted }: { children: React.ReactNode; highlighted: boolean }) { return ( {children} ); } interface ItemCommonProps extends Omit, "onSelect" | "role" | "color"> { disabled?: boolean; /** Text for typeahead when the label isn't plain text. */ textValue?: string; /** Indents the label to line up with items that have an icon. */ inset?: boolean; /** Called on click, Enter or Space. The menu closes unless you call `event.preventDefault()`. */ onSelect?: (event: Event) => void; } export interface DropdownMenuItemProps extends ItemCommonProps { icon?: React.ReactNode; /** Shown on the right, e.g. "⌘K". Display only: wire the key yourself. */ shortcut?: React.ReactNode; variant?: "default" | "danger"; /** Render the single child (e.g. a link) as the item. */ asChild?: boolean; /** Base UI-style asChild: `render={}`. */ render?: React.ReactElement; /** Accepted for Base UI compatibility; no effect. */ nativeButton?: boolean; } const DropdownMenuItem = React.forwardRef( ({ icon, shortcut, variant = "default", ...props }, ref) => { const danger = variant === "danger"; return ( : undefined} trailing={shortcut ? (highlighted) => {shortcut} : undefined} {...props} /> ); }, ); DropdownMenuItem.displayName = "DropdownMenuItem"; export interface DropdownMenuCheckboxItemProps extends ItemCommonProps { checked?: boolean; defaultChecked?: boolean; onCheckedChange?: (checked: boolean) => void; shortcut?: React.ReactNode; } const DropdownMenuCheckboxItem = React.forwardRef( ({ checked: checkedProp, defaultChecked = false, onCheckedChange, shortcut, onSelect, ...props }, ref) => { const [uncontrolled, setUncontrolled] = React.useState(defaultChecked); const checked = checkedProp !== undefined ? checkedProp : uncontrolled; return ( { if (checkedProp === undefined) setUncontrolled(!checked); onCheckedChange?.(!checked); onSelect?.(event); }} leading={() => ( )} trailing={shortcut ? (highlighted) => {shortcut} : undefined} {...props} /> ); }, ); DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem"; export interface DropdownMenuRadioGroupProps extends Omit, "defaultValue"> { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; } const DropdownMenuRadioGroup = React.forwardRef( ({ value: valueProp, defaultValue, onValueChange, ...props }, ref) => { const [uncontrolled, setUncontrolled] = React.useState(defaultValue); const value = valueProp !== undefined ? valueProp : uncontrolled; const context = React.useMemo( () => ({ value, select: (next: string) => { if (next === value) return; if (valueProp === undefined) setUncontrolled(next); onValueChange?.(next); }, }), [value, valueProp, onValueChange], ); return ( ); }, ); DropdownMenuRadioGroup.displayName = "DropdownMenuRadioGroup"; export interface DropdownMenuRadioItemProps extends ItemCommonProps { value: string; shortcut?: React.ReactNode; } const DropdownMenuRadioItem = React.forwardRef( ({ value, shortcut, onSelect, ...props }, ref) => { const group = React.useContext(RadioContext); if (!group) throw new Error(" must be rendered inside ."); const checked = group.value === value; return ( { group.select(value); onSelect?.(event); }} leading={() => ( )} trailing={shortcut ? (highlighted) => {shortcut} : undefined} {...props} /> ); }, ); DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem"; export interface DropdownMenuLabelProps extends React.HTMLAttributes { inset?: boolean; } const DropdownMenuLabel = React.forwardRef( ({ inset = false, className, id, ...props }, ref) => { const group = React.useContext(GroupContext); const setHasLabel = group?.setHasLabel; useIsomorphicLayoutEffect(() => { if (!setHasLabel) return; setHasLabel(true); return () => setHasLabel(false); }, [setHasLabel]); return (

); }, ); DropdownMenuLabel.displayName = "DropdownMenuLabel"; const DropdownMenuGroup = React.forwardRef>( (props, ref) => { const labelId = React.useId(); const [hasLabel, setHasLabel] = React.useState(false); const context = React.useMemo(() => ({ labelId, setHasLabel }), [labelId]); return (

); }, ); DropdownMenuGroup.displayName = "DropdownMenuGroup"; const DropdownMenuSeparator = React.forwardRef>( ({ className, ...props }, ref) => (

), ); DropdownMenuSeparator.displayName = "DropdownMenuSeparator"; function DropdownMenuSub({ children }: { children?: React.ReactNode }) { const parent = useMenu("DropdownMenuSub"); const id = React.useId(); const triggerId = `${id}-trigger`; const [open, setOpen] = React.useState(false); const [session, setSession] = React.useState(0); const [triggerEl, setTriggerEl] = React.useState(null); const [contentEl, setContentEl] = React.useState(null); const focusIntent = React.useRef("none"); // The submenu belongs to its trigger's highlight: when the parent moves on, it closes. if (open && parent.activeId !== triggerId) setOpen(false); const openSub = React.useCallback( (intent: FocusIntent) => { if (open) return; focusIntent.current = intent; setSession((count) => count + 1); setOpen(true); }, [open], ); const closeSub = React.useCallback(() => setOpen(false), []); const takeFocusIntent = React.useCallback(() => { const intent = focusIntent.current; focusIntent.current = "none"; return intent; }, []); const value = React.useMemo( () => ({ open, session, openSub, closeSub, triggerId, contentId: `${id}-content`, triggerEl, setTriggerEl, contentEl, setContentEl, takeFocusIntent, loop: parent.loop, }), [open, session, openSub, closeSub, triggerId, id, triggerEl, contentEl, takeFocusIntent, parent.loop], ); return {children}; } DropdownMenuSub.displayName = "DropdownMenuSub"; export interface DropdownMenuSubTriggerProps extends Omit { icon?: React.ReactNode; } const DropdownMenuSubTrigger = React.forwardRef( ({ icon, disabled, onPointerMove, onPointerLeave, onKeyDown, onClick, ...props }, forwardedRef) => { const menu = useMenu("DropdownMenuSubTrigger"); const sub = useSub("DropdownMenuSubTrigger"); const ref = useComposedRefs(forwardedRef, sub.setTriggerEl); const openTimer = React.useRef(0); React.useEffect(() => () => window.clearTimeout(openTimer.current), []); return ( : undefined} trailing={(highlighted) => ( )} onPointerMove={(event) => { onPointerMove?.(event); if (event.defaultPrevented || event.pointerType !== "mouse" || disabled) return; if (menu.isPointerMovingToSubmenu(event)) return; if (!sub.open && !openTimer.current) { menu.clearGrace(); openTimer.current = window.setTimeout(() => { openTimer.current = 0; sub.openSub("none"); }, SUB_OPEN_DELAY); } }} onPointerLeave={(event) => { onPointerLeave?.(event); window.clearTimeout(openTimer.current); openTimer.current = 0; const content = sub.contentEl; if (event.pointerType !== "mouse" || !sub.open || !content) return; // A triangle from the pointer to the submenu's near edge: diagonal moves across // neighbouring items keep the submenu open instead of highlighting them. const rect = content.getBoundingClientRect(); const side: Side = content.dataset.side === "left" ? "left" : "right"; const near = side === "right" ? rect.left : rect.right; const far = side === "right" ? rect.right : rect.left; const bleed = side === "right" ? -5 : 5; menu.setGrace( [ { x: event.clientX + bleed, y: event.clientY }, { x: near, y: rect.top }, { x: far, y: rect.top }, { x: far, y: rect.bottom }, { x: near, y: rect.bottom }, ], side, ); }} onKeyDown={(event) => { onKeyDown?.(event); if (event.defaultPrevented || disabled) return; if (event.key === "ArrowRight" || event.key === "Enter" || (event.key === " " && !menu.isTypingAhead())) { event.preventDefault(); const content = sub.contentEl; if (sub.open && content) { const first = getItems(content)[0]; if (first) focusItem(content, first, true); } else { sub.openSub("first"); } } }} onClick={(event) => { onClick?.(event); if (event.defaultPrevented || disabled) return; event.currentTarget.focus({ preventScroll: true }); if (!sub.open) sub.openSub("none"); }} {...props} /> ); }, ); DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger"; export interface DropdownMenuSubContentProps extends MotionSafe> { /** Gap between the submenu and its parent menu, in px. */ sideOffset?: number; } const DropdownMenuSubContent = React.forwardRef( ({ sideOffset = 2, children, ...props }, forwardedRef) => { const root = useRoot("DropdownMenuSubContent"); const sub = useSub("DropdownMenuSubContent"); const isClient = useIsClient(); const ref = useComposedRefs(forwardedRef, sub.setContentEl); if (!isClient) return null; return createPortal( {root.open && sub.open && ( { sub.closeSub(); sub.triggerEl?.focus({ preventScroll: true }); }} isSub {...props} > {children} )} , portalContainer(sub.triggerEl), ); }, ); DropdownMenuSubContent.displayName = "DropdownMenuSubContent"; export { DropdownMenu, DropdownMenuTrigger, DropdownMenuAnchor, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuGroup, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, }; ```