/// <reference types="react" />
import { IContextualMenuItem, IStyle, PersonaPresence } from '@fluentui/react';
import { BaseCustomStyles, OnRenderAvatarCallback } from '../types';
import { ParticipantState } from '../types';
/**
 * Fluent styles for {@link ParticipantItem}.
 *
 * @public
 */
export interface ParticipantItemStyles extends BaseCustomStyles {
    /** Styles for the avatar. */
    avatar?: IStyle;
    /** Styles for the (You) string. */
    me?: IStyle;
    /** Styles for the container of the icon. */
    iconContainer?: IStyle;
    /** Styles for the menu. */
    menu?: IStyle;
}
/**
 * Strings of {@link ParticipantItem} that can be overridden.
 *
 * @public
 */
export interface ParticipantItemStrings {
    /** String shown when participant is me */
    isMeText: string;
    /** String shown when hovering over menu button */
    menuTitle: string;
    /** Label for the remove button in participant menu  */
    removeButtonLabel: string;
    /** Label for the sharing icon in participant state stack  */
    sharingIconLabel: string;
    /** Label for the muted icon in participant state stack  */
    mutedIconLabel: string;
    /** Label for the raised hand icon in participant state stack  */
    handRaisedIconLabel?: string;
    /** placeholder text for participants who does not have a display name*/
    displayNamePlaceholder?: string;
    /** String shown when `participantState` is `Ringing` */
    participantStateRinging?: string;
    /** String shown when `participantState` is `Hold` */
    participantStateHold?: string;
    /** Aria Label applied to the base element of the `participantItem` */
    participantItemAriaLabel?: string;
    /** Aria Label applied to the base element of the `participantItem` when there are more options present */
    participantItemWithMoreOptionsAriaLabel?: string;
    /** String for the attendee role */
    attendeeRole: string;
    /** Label for the disabled microphone icon in participant state stack  */
    micDisabledIconLabel: string;
    /** Label for the disabled camera icon in participant state stack  */
    cameraDisabledIconLabel: string;
}
/**
 * Props for {@link ParticipantItem}.
 *
 * @public
 */
export interface ParticipantItemProps {
    /** Unique User ID of the participant. This `userId` is available in the `onRenderAvatar` callback function */
    userId?: string;
    /** Name of participant. */
    displayName?: string;
    /** Optional indicator to show participant is the user. */
    me?: boolean;
    /** Optional callback returning a JSX element to override avatar. */
    onRenderAvatar?: OnRenderAvatarCallback;
    /** Optional array of IContextualMenuItem for contextual menu. */
    menuItems?: IContextualMenuItem[];
    /** Optional callback returning a JSX element rendered on the right portion of the ParticipantItem. Intended for adding icons. */
    onRenderIcon?: (props?: ParticipantItemProps) => JSX.Element | null;
    /** Optional PersonaPresence to show participant presence. This will not have an effect if property avatar is assigned. */
    presence?: PersonaPresence;
    /**
     * Allows users to pass in an object contains custom CSS styles.
     * @Example
     * ```
     * <ParticipantItem styles={{ root: { background: 'blue' } }} />
     * ```
     */
    styles?: ParticipantItemStyles;
    /**
     * Optional strings to override in component
     */
    strings?: Partial<ParticipantItemStrings>;
    /**
     * Optional callback when component is clicked
     */
    onClick?: (props?: ParticipantItemProps) => void;
    /** Optional value to determine if the tooltip should be shown for participants or not */
    showParticipantOverflowTooltip?: boolean;
    /**
     * Optional value to determine and display a participants connection status.
     * For example, `Connecting`, `Ringing` etc.
     * The actual text that is displayed is determined by the localized string
     * corresponding to the provided participant state.
     * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.
     */
    participantState?: ParticipantState;
    /**
     * Optional aria property that prefixes the ParticipantItems aria content
     * Takes in a unique id value of the element you would like to be read before the ParticipantItem.
     */
    ariaLabelledBy?: string;
}
/**
 * Component to render a calling or chat participant.
 *
 * Displays the participant's avatar, displayName and status as well as optional icons and context menu.
 *
 * @public
 */
export declare const ParticipantItem: (props: ParticipantItemProps) => JSX.Element;
/** @private */
export declare const formatParticipantStateString: (props: ParticipantItemProps, strings: ParticipantItemStrings) => string | undefined;
//# sourceMappingURL=ParticipantItem.d.ts.map