@searchwithaura/react-mention-textarea/dist/types.d.ts

A powerful React component for @ mentions with multi-layer navigation, search functionality, and custom action cards

export interface MentionItem {
    id: string;
    label: string;
    type?: 'user' | 'source' | 'action' | 'reference';
    icon?: string;
    avatar?: string;
    description?: string;
    children?: MentionItem[];
    component?: string;
    action?: (params?: any) => string | Promise<string>;
    metadata?: Record<string, any>;
}
export interface MentionConfig {
    trigger: string;
    data: MentionItem[];
    renderItem?: (item: MentionItem) => React.ReactNode;
    onSelect?: (item: MentionItem) => string;
    searchPlaceholder?: string;
    maxResults?: number;
}
export interface MenuState {
    isOpen: boolean;
    position: {
        x: number;
        y: number;
    };
    currentLayer: number;
    layerStack: MentionItem[][];
    searchQuery: string;
    selectedIndex: number;
    triggerChar: string;
    triggerPosition: number;
    sourcePath: string[];
    sourceIds: string[];
}
export interface MentionSelectData {
    displayText: string;
    sourcePath: string[];
    sourceIds: string[];
    item: MentionItem;
    trigger: string;
    fullPath: string[];
    fullIds: string[];
}
export interface MentionTextareaProps {
    value: string;
    onChange: (value: string) => void;
    mentions: MentionConfig[];
    placeholder?: string;
    className?: string;
    onMentionSelect?: (data: MentionSelectData) => void;
    theme?: 'light' | 'dark' | 'auto';
    maxMenuHeight?: number;
    disabled?: boolean;
    rows?: number;
    autoFocus?: boolean;
    showSource?: boolean;
    sourceFormat?: 'label' | 'id';
    sourceSeparator?: string;
    pathSeparator?: string;
}
export interface ContextMenuProps {
    isOpen: boolean;
    position: {
        x: number;
        y: number;
    };
    items: MentionItem[];
    selectedIndex: number;
    searchQuery: string;
    onSelect: (item: MentionItem) => void;
    onClose: () => void;
    onSearch: (query: string) => void;
    onNavigateBack?: () => void;
    canNavigateBack?: boolean;
    maxHeight?: number;
    theme?: 'light' | 'dark' | 'auto';
}
export interface ActionCardProps {
    item: MentionItem;
    onSubmit: (result: string) => void;
    onCancel: () => void;
}