@ni7r0g3n/react-context-menu/dist/index.d.ts

React custom context menu

/// <reference types="react" />
import { CSSProperties } from 'react';

interface ContextMenuProps extends ContextMenuEvents {
    items: ContextMenuItem[];
    children: React.ReactNode;
    adaptive?: boolean;
    animated?: {
        duration?: CSSProperties['animationDuration'];
        animation?: "zoom" | "fade" | "slideUp" | "slideDown" | "slideLeft" | "slideRight";
    } | boolean;
    menuStyle?: {
        container?: React.CSSProperties;
        row?: {
            normal: React.CSSProperties;
            hover?: React.CSSProperties;
        };
    };
    menuClassName?: {
        container?: string;
        row?: string;
    };
    variant?: Variant;
}
interface ContextMenuEvents {
    onOpen?: () => void;
    onAfterOpen?: () => void;
    onClose?: () => void;
    onItemHoverIn?: (item: ContextMenuItem) => void;
    onItemHoverOut?: (item: ContextMenuItem) => void;
    onInAnimationEnd?: () => void;
    onOutAnimationEnd?: () => void;
}
interface ContextMenuItem {
    label: string | React.ReactNode;
    onClick: () => void;
    style?: React.CSSProperties;
    hoverStyle?: React.CSSProperties;
    className?: string;
    disabled?: boolean;
    disabledClassName?: string;
}
interface Variant {
    opacity?: "solid" | "transparent";
    theme?: "light" | "dark";
    elevation?: "raised" | "flat";
}

interface ContextMenuWindowProps extends Omit<ContextMenuProps, 'children'> {
    position: {
        x: number;
        y: number;
        origin: {
            x: 0 | 100;
            y: 0 | 100;
        };
    };
    onTransitionEnd?: () => void;
    containerRef?: React.RefObject<HTMLDivElement>;
}

declare function ContextMenu(props: ContextMenuProps): JSX.Element;

declare function ContextMenuWindow(props: ContextMenuWindowProps): JSX.Element;

export { ContextMenu, ContextMenuItem, ContextMenuProps, ContextMenuWindow, ContextMenuWindowProps };