seti-ramesesv1/dist/components/common/DatalistMoreMenu.js

Reusable components and context for Next.js apps

import { jsxs, jsx } from 'react/jsx-runtime';
import { MoreHorizontal } from 'lucide-react';
import { useState, useRef, useEffect } from 'react';
import '../../styles/DatalistMoreMenu.css.js';
import { IconButton } from './IconButton.js';

const MoreMenu = ({ actions, item }) => {
    const [open, setOpen] = useState(false);
    const menuRef = useRef(null);
    useEffect(() => {
        const handleClickOutside = (e) => {
            if (menuRef.current && !menuRef.current.contains(e.target)) {
                setOpen(false);
            }
        };
        if (open) {
            document.addEventListener("mousedown", handleClickOutside);
        }
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, [open]);
    return (jsxs("div", { className: "moremenu-container", ref: menuRef, children: [jsx(IconButton, { icon: jsx(MoreHorizontal, { size: 16 }), onClick: (e) => {
                    e.stopPropagation();
                    setOpen((prev) => !prev);
                } }), open && (jsx("div", { className: "moremenu-dropdown", children: actions.map((action) => (jsxs("div", { onClick: (e) => {
                        e.stopPropagation();
                        action.onClick(item);
                        setOpen(false);
                    }, className: "moremenu-item", children: [action.icon, jsx("span", { children: action.name })] }, action.name))) }))] }));
};

export { MoreMenu as default };
//# sourceMappingURL=DatalistMoreMenu.js.map