@engie-group/fluid-design-system-react/lib/components/avatar/NJAvatarList.d.ts

Fluid Design System React

import { type ITooltipOptions } from '@engie-group/fluid-design-system';
import React, { ReactNode } from 'react';
import { ITooltipProps } from '../tooltip/NJTooltip';
import { IAvatarProps } from './NJAvatar';
export declare const NJAvatarList: React.ForwardRefExoticComponent<IAvatarListProps & React.RefAttributes<HTMLDivElement>>;
export interface IAvatarListProps {
    /**
     *  Max number of avatar displayed
     **/
    max?: number;
    /**
     *  Density of the avatar list
     **/
    density?: 'default' | 'compact';
    /**
     *  Avatars size
     **/
    size?: IAvatarProps['size'];
    /**
     *  Pass `NJAvatars` as children
     **/
    children: ReactNode[];
    /**
     *  Avatar's tooltip text. Will appear below the remaining count avatar
     **/
    tooltipText?: ITooltipProps['text'];
    /**
     *  Tooltip's position
     **/
    tooltipPosition?: ITooltipOptions['placement'];
    /**
     * Function called when the user clicks the remaining count Avatar
     */
    onClick?: React.MouseEventHandler<HTMLDivElement | HTMLAnchorElement>;
    /**
     * Function called when the user mouse enters the remaining count Avatar
     */
    onMouseEnter?: React.MouseEventHandler<HTMLDivElement | HTMLAnchorElement>;
    /**
     * Function called when the user mouse leaves the remaining count Avatar
     */
    onMouseLeave?: React.MouseEventHandler<HTMLDivElement | HTMLAnchorElement>;
    /**
     *  Optional additional className
     **/
    className?: string;
    /**
     * Label of the "show more" button.
     *
     * A function can be used to provide a dynamic label based on the number of remaining avatars in the list.
     */
    showMoreLabel: string | ((elementCount: number) => string);
}