@buun_group/brutalist-ui/dist/react/context-menu/ContextMenu.d.ts

A brutalist-styled component library

/**
 * @module ContextMenu
 * @description A context menu component that appears on right-click. Supports nested menus, keyboard navigation, and customizable items with icons and shortcuts.
 */
import React, { CSSProperties } from 'react';
/**
 * Props for the ContextMenu component
 */
export interface ContextMenuProps {
    /**
     * The trigger and content elements for the context menu
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the context menu
     */
    style?: CSSProperties;
    /**
     * The size variant of the context menu
     * @default 'md'
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * The visual style variant of the context menu
     * @default 'default'
     */
    variant?: 'default' | 'brutal' | 'dark';
    /**
     * Callback fired when the menu opens or closes
     */
    onOpenChange?: (open: boolean) => void;
}
/**
 * Props for the ContextMenu.Trigger component
 */
export interface ContextMenuTriggerProps {
    /**
     * The element that triggers the context menu on right-click
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the trigger
     */
    style?: CSSProperties;
    /**
     * Whether to render as a child element instead of wrapping in a div
     * @default false
     */
    asChild?: boolean;
}
/**
 * Props for the ContextMenu.Content component
 */
export interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Menu items and other content
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * How to align the menu relative to the trigger
     * @default 'start'
     */
    align?: 'start' | 'center' | 'end';
    /**
     * Distance in pixels from the trigger
     * @default 5
     */
    sideOffset?: number;
    /**
     * Offset along the alignment axis
     * @default 0
     */
    alignOffset?: number;
    /**
     * Minimum distance from viewport edges
     * @default 8
     */
    collisionPadding?: number;
    /**
     * Whether to adjust position to stay in viewport
     * @default true
     */
    avoidCollisions?: boolean;
    /**
     * Container element for the portal
     */
    container?: HTMLElement | null;
    /**
     * Override the size from the root component
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * Override the variant from the root component
     */
    variant?: 'default' | 'brutal' | 'dark';
}
/**
 * Props for the ContextMenu.Item component
 */
export interface ContextMenuItemProps {
    /**
     * The content of the menu item
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the menu item
     */
    style?: CSSProperties;
    /**
     * Whether the item is disabled and cannot be selected
     * @default false
     */
    disabled?: boolean;
    /**
     * Whether the item represents a destructive action (shown in red)
     * @default false
     */
    destructive?: boolean;
    /**
     * Callback fired when the item is selected
     */
    onSelect?: (e: React.MouseEvent) => void;
    /**
     * Whether to close the menu when this item is selected
     * @default true
     */
    closeOnSelect?: boolean;
    /**
     * Icon to display before the item text
     */
    icon?: React.ReactNode;
    /**
     * Keyboard shortcut to display
     */
    shortcut?: string;
    /**
     * Whether to show a checkmark (for checked items)
     */
    checked?: boolean;
    /**
     * Whether to show a dot indicator
     */
    dotted?: boolean;
}
/**
 * Props for the ContextMenu.Separator component
 */
export interface ContextMenuSeparatorProps {
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the separator
     */
    style?: CSSProperties;
}
/**
 * Props for the ContextMenu.Label component
 */
export interface ContextMenuLabelProps {
    /**
     * The label text content
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the label
     */
    style?: CSSProperties;
}
/**
 * Props for the ContextMenu.Sub component
 */
export interface ContextMenuSubProps {
    /**
     * The trigger and content for the submenu
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the sub menu
     */
    style?: CSSProperties;
    /**
     * Controlled open state
     */
    open?: boolean;
    /**
     * Callback fired when the submenu opens or closes
     */
    onOpenChange?: (open: boolean) => void;
}
/**
 * Props for the ContextMenu.SubTrigger component
 */
export interface ContextMenuSubTriggerProps {
    /**
     * The trigger content for the submenu
     */
    children: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom styles to apply to the sub trigger
     */
    style?: CSSProperties;
    /**
     * Whether the submenu trigger is disabled
     * @default false
     */
    disabled?: boolean;
    /**
     * Icon to display before the trigger text
     */
    icon?: React.ReactNode;
}
/**
 * Props for the ContextMenu.SubContent component
 */
export interface ContextMenuSubContentProps extends Omit<ContextMenuContentProps, 'container'> {
    /**
     * Callback when mouse enters the submenu
     */
    onMouseEnter?: () => void;
    /**
     * Callback when mouse leaves the submenu
     */
    onMouseLeave?: () => void;
}
export declare const ContextMenuNamespace: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLDivElement>> & {
    Trigger: React.ForwardRefExoticComponent<ContextMenuTriggerProps & React.RefAttributes<HTMLDivElement>>;
    Content: React.ForwardRefExoticComponent<ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
    Item: React.ForwardRefExoticComponent<ContextMenuItemProps & React.RefAttributes<HTMLDivElement>>;
    Separator: React.ForwardRefExoticComponent<ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
    Label: React.ForwardRefExoticComponent<ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
    Sub: React.ForwardRefExoticComponent<ContextMenuSubProps & React.RefAttributes<HTMLDivElement>>;
    SubTrigger: React.ForwardRefExoticComponent<ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
    SubContent: React.ForwardRefExoticComponent<ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
};
export { ContextMenuNamespace as ContextMenu };