communication-react-19/dist/dist-esm/react-components/src/components/MentionPopover.d.ts

React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)

import React from 'react';
/**
 * Props for {@link _MentionPopover}.
 *
 * @internal
 */
export interface _MentionPopoverProps {
    /**
     * Array of mention suggestions used to populate the suggestion list
     */
    suggestions: Mention[];
    /**
     * Index of the currently focused suggestion, if any
     */
    activeSuggestionIndex?: number;
    /**
     * Optional string used as mention popover's title.
     * @defaultValue `Suggestions`
     */
    title?: string;
    /**
     * Element to anchor the popover to.
     */
    target: React.RefObject<Element>;
    /**
     * When rendering the popover, where to position it relative to the target.
     */
    targetPositionOffset?: {
        top: number;
        left: number;
    };
    /**
     * Where to display the suggestions relative to the target.
     * @defaultValue `above`
     */
    location?: 'above' | 'below';
    /**
     * Callback called when a mention suggestion is selected.
     */
    onSuggestionSelected: (suggestion: Mention) => void;
    /**
     * Callback to invoke when the popover is dismissed
     */
    onDismiss?: () => void;
    /**
     * Optional callback to render an item of the mention suggestions list.
     */
    onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, isActive: boolean) => JSX.Element;
}
/**
 * Options to lookup suggestions in the mention scenario.
 *
 * @beta
 */
export interface MentionLookupOptions {
    /**
     * Optional string to set trigger keyword for mention a specific participant.
     *
     * @defaultValue `@`
     */
    trigger?: string;
    /**
     * Optional callback to fetch a list of mention suggestions base on the query.
     */
    onQueryUpdated: (query: string) => Promise<Mention[]>;
    /**
     * Optional callback to render an item of the mention suggestions list.
     */
    onRenderSuggestionItem?: (suggestion: Mention, onSuggestionSelected: (suggestion: Mention) => void, isActive: boolean) => JSX.Element;
}
/**
 * Options to display suggestions in the mention scenario.
 *
 * @beta
 */
export interface MentionDisplayOptions {
    /**
     * Optional callback for customizing the mention renderer in a message thread.
     */
    onRenderMention?: (mention: Mention, defaultOnRender: (mention: Mention) => JSX.Element) => JSX.Element;
}
/**
 * Options to lookup suggestions and display mentions in the mention scenario.
 *
 * @beta
 */
export type MentionOptions = {
    lookupOptions?: MentionLookupOptions;
    displayOptions?: MentionDisplayOptions;
};
/**
 * Mention's state, as reflected in the UI.
 *
 * @beta
 */
export interface Mention {
    /** ID of a mention */
    id: string;
    /** Display text of a mention */
    displayText: string;
    /** Optional React element to render an item icon of a mention suggestion */
    icon?: JSX.Element;
}
/**
 * Strings of {@link _MentionPopover} that can be overridden.
 *
 * @beta
 */
export interface MentionPopoverStrings {
    /**
     * Header text for MentionPopover
     */
    mentionPopoverHeader: string;
}
/**
 * Component to render a pop-up of mention suggestions.
 *
 * @internal
 */
export declare const _MentionPopover: (props: _MentionPopoverProps) => JSX.Element;
//# sourceMappingURL=MentionPopover.d.ts.map