// src/components/ui/DropdownMenu.tsx "use client"; import { useEffect, useRef, useState, type ReactNode, type KeyboardEvent } from "react"; import { MoreHorizontal } from "lucide-react"; import { cx } from "@/lib/cx"; export interface MenuItem { id: string; label: string; danger?: boolean; disabled?: boolean; onSelect: () => void; } export interface DropdownMenuProps { /** Trigger content; ignored when iconTrigger is set. */ label?: ReactNode; /** Square ghost ⋯ button — the row-actions trigger. */ iconTrigger?: boolean; items: (MenuItem | "separator")[]; "aria-label": string; } export default function DropdownMenu({ label, iconTrigger, items, ...rest }: DropdownMenuProps) { const [open, setOpen] = useState(false); const wrapRef = useRef(null); const menuRef = useRef(null); useEffect(() => { if (!open) return; const onDocDown = (e: MouseEvent) => { if (!wrapRef.current?.contains(e.target as Node)) setOpen(false); }; document.addEventListener("mousedown", onDocDown); menuRef.current?.querySelector(".menu-item:not(:disabled)")?.focus(); return () => document.removeEventListener("mousedown", onDocDown); }, [open]); const onMenuKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape") { setOpen(false); return; } if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return; e.preventDefault(); const buttons = Array.from( menuRef.current?.querySelectorAll(".menu-item:not(:disabled)") ?? [] ); const idx = buttons.indexOf(document.activeElement as HTMLButtonElement); const next = e.key === "ArrowDown" ? buttons[(idx + 1) % buttons.length] : buttons[(idx - 1 + buttons.length) % buttons.length]; next?.focus(); }; return (

{open && ( )}

); }