99 lines
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { MoreVertical } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export type MenuItem = {
|
|
label: string;
|
|
onClick: () => void;
|
|
destructive?: boolean;
|
|
};
|
|
|
|
/**
|
|
* A kebab (⋯) trigger with a small dropdown of actions — keeps secondary /
|
|
* destructive row actions hidden until opened. The menu is fixed-positioned
|
|
* from the trigger so the table's overflow container can't clip it; it closes
|
|
* on outside-click, Escape, or scroll.
|
|
*/
|
|
export function RowMenu({ items }: { items: MenuItem[] }) {
|
|
const [open, setOpen] = React.useState(false);
|
|
const [pos, setPos] = React.useState<{ top: number; right: number } | null>(
|
|
null,
|
|
);
|
|
const btnRef = React.useRef<HTMLButtonElement>(null);
|
|
const menuRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
React.useEffect(() => {
|
|
if (!open) return;
|
|
function onDown(e: MouseEvent) {
|
|
const t = e.target as Node;
|
|
if (btnRef.current?.contains(t) || menuRef.current?.contains(t)) return;
|
|
setOpen(false);
|
|
}
|
|
function onKey(e: KeyboardEvent) {
|
|
if (e.key === "Escape") setOpen(false);
|
|
}
|
|
function onScroll() {
|
|
setOpen(false);
|
|
}
|
|
document.addEventListener("mousedown", onDown);
|
|
document.addEventListener("keydown", onKey);
|
|
window.addEventListener("scroll", onScroll, true);
|
|
return () => {
|
|
document.removeEventListener("mousedown", onDown);
|
|
document.removeEventListener("keydown", onKey);
|
|
window.removeEventListener("scroll", onScroll, true);
|
|
};
|
|
}, [open]);
|
|
|
|
function toggle() {
|
|
if (!open && btnRef.current) {
|
|
const r = btnRef.current.getBoundingClientRect();
|
|
setPos({ top: r.bottom + 4, right: window.innerWidth - r.right });
|
|
}
|
|
setOpen((v) => !v);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
ref={btnRef}
|
|
type="button"
|
|
onClick={toggle}
|
|
aria-label="Actions"
|
|
aria-haspopup="menu"
|
|
className="inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
<MoreVertical className="size-4" />
|
|
</button>
|
|
{open && pos ? (
|
|
<div
|
|
ref={menuRef}
|
|
role="menu"
|
|
style={{ position: "fixed", top: pos.top, right: pos.right, zIndex: 50 }}
|
|
className="w-44 rounded-lg border border-border bg-card py-1 text-left shadow-lg"
|
|
>
|
|
{items.map((it, i) => (
|
|
<button
|
|
key={i}
|
|
type="button"
|
|
role="menuitem"
|
|
onClick={() => {
|
|
setOpen(false);
|
|
it.onClick();
|
|
}}
|
|
className={cn(
|
|
"block w-full px-3 py-2 text-left text-sm transition-colors hover:bg-muted",
|
|
it.destructive ? "text-destructive" : "text-foreground",
|
|
)}
|
|
>
|
|
{it.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|