119 lines
3.7 KiB
TypeScript
119 lines
3.7 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;
|
|
};
|
|
|
|
|
|
// Menu geometry, for keeping it on screen: w-44, rows of py-2 text-sm.
|
|
const MENU_WIDTH = 176;
|
|
const MENU_ROW = 36;
|
|
const MENU_GAP = 8;
|
|
|
|
/**
|
|
* 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();
|
|
const vw = window.innerWidth;
|
|
const vh = window.innerHeight;
|
|
// Right-aligned to the button, but kept on screen: on a phone the
|
|
// button can sit at the left of a card, where a right-aligned menu
|
|
// would hang off the edge. Near the bottom it opens upwards instead.
|
|
const right = Math.max(
|
|
MENU_GAP,
|
|
Math.min(vw - r.right, vw - MENU_WIDTH - MENU_GAP),
|
|
);
|
|
const height = items.length * MENU_ROW + 8;
|
|
const top =
|
|
r.bottom + 4 + height > vh - MENU_GAP
|
|
? Math.max(MENU_GAP, r.top - 4 - height)
|
|
: r.bottom + 4;
|
|
setPos({ top, 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}
|
|
</>
|
|
);
|
|
}
|