,
document.body,
);
}
// ── Desktop leaf item ────────────────────────────────────────────────────────
interface DesktopLeafItemProps {
item: ContextMenuLeafItem;
close: () => void;
}
function DesktopLeafItem({ item, close }: DesktopLeafItemProps) {
switch (item.type) {
case 'separator':
return ;
case 'custom':
return
{item.render()}
;
case 'checkbox':
return ;
case 'action': {
const className = item.disabled
? ITEM_DISABLED_CLASS
: item.danger
? ITEM_DANGER_CLASS
: ITEM_CLASS;
return (
);
}
}
}
// ── Desktop submenu trigger item ─────────────────────────────────────────────
interface DesktopSubmenuItemProps {
item: ContextMenuSubmenu;
close: () => void;
}
function DesktopSubmenuItem({ item, close }: DesktopSubmenuItemProps) {
const triggerRef = useRef(null);
const closeTimer = useRef | null>(null);
const openTimer = useRef | null>(null);
const openSubmenuKey = useContextMenuStore((s) => s.openSubmenuKey);
const setOpenSubmenu = useContextMenuStore((s) => s.setOpenSubmenu);
const isOpen = openSubmenuKey === item.key;
const cancelTimers = useCallback(() => {
if (closeTimer.current) {
clearTimeout(closeTimer.current);
closeTimer.current = null;
}
if (openTimer.current) {
clearTimeout(openTimer.current);
openTimer.current = null;
}
}, []);
const handleTriggerEnter = useCallback(() => {
cancelTimers();
openTimer.current = setTimeout(() => {
setOpenSubmenu(item.key);
}, 150);
}, [cancelTimers, setOpenSubmenu, item.key]);
const handleTriggerLeave = useCallback(() => {
cancelTimers();
closeTimer.current = setTimeout(() => {
setOpenSubmenu(null);
}, 150);
}, [cancelTimers, setOpenSubmenu]);
const handleFlyoutEnter = useCallback(() => {
cancelTimers();
}, [cancelTimers]);
const handleFlyoutLeave = useCallback(() => {
cancelTimers();
closeTimer.current = setTimeout(() => {
setOpenSubmenu(null);
}, 150);
}, [cancelTimers, setOpenSubmenu]);
useEffect(() => {
return () => {
cancelTimers();
};
}, [cancelTimers]);
return (
<>
{isOpen && (
)}
);
}
// ── Desktop menu item dispatcher ─────────────────────────────────────────────
interface DesktopMenuItemProps {
item: ContextMenuItem;
close: () => void;
}
function DesktopMenuItem({ item, close }: DesktopMenuItemProps) {
if (item.type === 'submenu') {
return ;
}
return ;
}
// ── Desktop menu panel ───────────────────────────────────────────────────────
interface DesktopMenuProps {
items: ContextMenuItem[];
position: { x: number; y: number };
close: () => void;
closeGuard: boolean;
}
function DesktopMenu({ items, position, close, closeGuard }: DesktopMenuProps) {
const menuRef = useRef(null);
// Viewport-aware positioning via direct DOM mutation
useLayoutEffect(() => {
const el = menuRef.current;
if (!el) return;
const rect = el.getBoundingClientRect();
let x = position.x;
let y = position.y;
if (x + rect.width > window.innerWidth - 8) x = window.innerWidth - rect.width - 8;
if (y + rect.height > window.innerHeight - 8) y = window.innerHeight - rect.height - 8;
if (x < 8) x = 8;
if (y < 8) y = 8;
el.style.left = `${x}px`;
el.style.top = `${y}px`;
}, [position]);
// Auto-focus on mount for keyboard nav
useEffect(() => {
menuRef.current?.focus();
}, []);
// Dismiss on scroll/resize
useEffect(() => {
const dismiss = () => close();
window.addEventListener('scroll', dismiss, true);
window.addEventListener('resize', dismiss);
return () => {
window.removeEventListener('scroll', dismiss, true);
window.removeEventListener('resize', dismiss);
};
}, [close]);
// Keyboard navigation
const handleKeyDown = useCallback(
(e: React.KeyboardEvent) => {
const container = menuRef.current;
if (!container) return;
const focusableSelector = 'button:not([disabled])';
if (e.key === 'Escape') {
e.preventDefault();
// Close submenu first if open, otherwise close the whole menu
const openSubmenuKey = useContextMenuStore.getState().openSubmenuKey;
if (openSubmenuKey) {
useContextMenuStore.getState().setOpenSubmenu(null);
} else {
close();
}
return;
}
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
e.preventDefault();
const buttons = Array.from(container.querySelectorAll(focusableSelector));
if (buttons.length === 0) return;
const currentIndex = buttons.indexOf(document.activeElement as HTMLElement);
let nextIndex: number;
if (e.key === 'ArrowDown') {
nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % buttons.length;
} else {
nextIndex = currentIndex <= 0 ? buttons.length - 1 : currentIndex - 1;
}
buttons[nextIndex]?.focus();
return;
}
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
const focused = document.activeElement;
if (focused instanceof HTMLButtonElement && container.contains(focused)) {
focused.click();
}
return;
}
if (e.key === 'ArrowRight') {
// Open submenu if focused item is a submenu trigger
e.preventDefault();
const focused = document.activeElement;
if (focused instanceof HTMLButtonElement) {
// Simulate mouse enter to open the submenu
focused.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
}
return;
}
if (e.key === 'ArrowLeft') {
e.preventDefault();
const openSubmenuKey = useContextMenuStore.getState().openSubmenuKey;
if (openSubmenuKey) {
useContextMenuStore.getState().setOpenSubmenu(null);
}
return;
}
},
[close],
);
return createPortal(
<>
{/* Backdrop */}
{
if (!closeGuard) {
close();
}
}}
onContextMenu={(e) => {
// Prevent browser context menu but do NOT stopPropagation.
// This allows right-clicks to reach underlying elements that may
// open a new context menu via their own onContextMenu handler.
e.preventDefault();
}}
/>
{/* Menu panel */}
e.stopPropagation()}
>
{items.map((item) => (
))}
,
document.body,
);
}
// ── Mobile leaf item ─────────────────────────────────────────────────────────
interface MobileLeafItemProps {
item: ContextMenuLeafItem;
close: () => void;
}
function MobileLeafItem({ item, close }: MobileLeafItemProps) {
switch (item.type) {
case 'separator':
return ;
case 'custom':
return