import React, { useState, useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
/**
* @typedef {Object} DropdownActionItem
* @property {string} label - The label for the action
* @property {React.ReactNode} [icon] - Optional icon
* @property {() => void} onClick - Click handler
* @property {boolean} [danger] - Optional: style as dangerous action
*/
/**
* DropdownActions Props
* @param {Object} props
* @param {DropdownActionItem[]} props.items - Array of action items
* @param {React.ReactNode} [props.trigger] - Optional custom trigger
* @param {string} [props.className] - Optional extra classes for dropdown
*/
const DropdownActions = ({ items, trigger, className = '' }) => {
const [open, setOpen] = useState(false);
const menuRef = useRef(null);
const buttonRef = useRef(null);
const [focusedIndex, setFocusedIndex] = useState(-1);
const [menuStyle, setMenuStyle] = useState({});
// Close dropdown on outside click
useEffect(() => {
if (!open) return;
function handleClick(e) {
if (
menuRef.current &&
!menuRef.current.contains(e.target) &&
buttonRef.current &&
!buttonRef.current.contains(e.target)
) {
setOpen(false);
}
}
function handleEscape(e) {
if (e.key === 'Escape') setOpen(false);
}
document.addEventListener('mousedown', handleClick);
document.addEventListener('keydown', handleEscape);
return () => {
document.removeEventListener('mousedown', handleClick);
document.removeEventListener('keydown', handleEscape);
};
}, [open]);
// Keyboard navigation
useEffect(() => {
if (!open) return;
function handleKey(e) {
if (e.key === 'ArrowDown') {
setFocusedIndex((i) => (i + 1) % items.length);
e.preventDefault();
} else if (e.key === 'ArrowUp') {
setFocusedIndex((i) => (i - 1 + items.length) % items.length);
e.preventDefault();
} else if (e.key === 'Enter' && focusedIndex >= 0) {
items[focusedIndex].onClick();
setOpen(false);
}
}
document.addEventListener('keydown', handleKey);
return () => document.removeEventListener('keydown', handleKey);
}, [open, focusedIndex, items]);
// Focus first item when opened
useEffect(() => {
if (open) setFocusedIndex(0);
else setFocusedIndex(-1);
}, [open]);
// Calculate menu position for portal
useEffect(() => {
if (open && buttonRef.current) {
const rect = buttonRef.current.getBoundingClientRect();
const isMobile = window.innerWidth < 640;
if (isMobile) {
setMenuStyle({
position: 'fixed',
left: 0,
right: 0,
top: rect.bottom + 8,
zIndex: 9999,
});
} else {
setMenuStyle({
position: 'fixed',
left: rect.right - 176, // 44*4 = 176px (w-44)
top: rect.bottom + 8,
zIndex: 9999,
});
}
}
}, [open]);
// Default trigger: 3 dots
const defaultTrigger = (
);
const menu = open ? (
{items.map((item, idx) => (
))}
) : null;
return (
e.stopPropagation()}>{
trigger
? React.cloneElement(trigger, {
ref: buttonRef,
onClick: (e) => {
e.stopPropagation();
setOpen((v) => !v);
trigger.props.onClick && trigger.props.onClick(e);
},
'aria-haspopup': 'menu',
'aria-expanded': open,
})
: defaultTrigger
}
{open && createPortal(menu, document.body)}
);
};
export default DropdownActions;