@atlaskit/avatar-group/dist/types/components/avatar-group.d.ts

An avatar group displays a number of avatars grouped together in a stack or grid.

import React, { type ElementType, type MouseEventHandler } from 'react';
import Avatar, { type AppearanceType } from '@atlaskit/avatar';
import { type PositionType } from '@atlaskit/tooltip';
import { type AvatarGroupOverrides, type AvatarGroupSize, type AvatarProps, type onAvatarClickHandler } from './types';
export interface AvatarGroupProps {
    /**
     * Indicates the layout of the avatar group.
     * Avatars will either be overlapped in a stack, or
     * laid out in an even grid formation.
     * Defaults to "stack".
     */
    appearance?: 'grid' | 'stack';
    /**
     * Indicates the shape of the more indicator. Most more indicators are circular, but square more indicators
     * can be used for 'container' objects.
     */
    moreIndicatorAppearance?: AppearanceType;
    /**
     * Component used to render each avatar.
     */
    avatar?: typeof Avatar | ElementType<AvatarProps>;
    /**
     * The maximum number of avatars allowed in the list.
     * Defaults to 5 when displayed as a stack,
     * and 11 when displayed as a grid.
     */
    maxCount?: number;
    /**
     * Defines the size of the avatar.
     * Defaults to "medium".
     *
     * Note: The "xsmall" size that exists on Avatar is not supported here because elements such as the more indicator cannot be displayed in an accessible manner at that size.
     */
    size?: AvatarGroupSize;
    /**
     * Typically the background color that the avatar is presented on.
     * Accepts any color argument that the CSS border-color property accepts.
     */
    borderColor?: string;
    /**
     * An array of avatar prop data, that are spread onto each `avatar` component.
     *
     * For further usage information on AvatarPropTypes, the supported props for `avatar`, refer to [Avatar's prop documentation](https://atlassian.design/components/avatar/code).
     */
    data: Array<AvatarProps>;
    /**
     * Handle the click event on the avatar item.
     * Note that if an onClick prop is provided as part of avatar data, it will take precedence over onAvatarClick.
     */
    onAvatarClick?: onAvatarClickHandler;
    /**
     * Take control of the click event on the more indicator.
     * This will cancel the default dropdown behavior.
     */
    onMoreClick?: MouseEventHandler;
    /**
     * Provide additional props to the MoreButton.
     * Example use cases: altering tab order by providing tabIndex;
     * adding onClick behaviour without losing the default dropdown
     */
    showMoreButtonProps?: Partial<React.HTMLAttributes<HTMLElement>>;
    /**
     * Element the overflow popup should be attached to.
     * Defaults to "viewport".
     */
    boundariesElement?: 'viewport' | 'window' | 'scrollParent';
    /**
     * A `testId` prop is provided for specified elements,
     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
     * serving as a hook for automated tests.
     */
    /**
     * Will set these elements when defined:
     * - Container element - `{testId}--avatar-group`
     * - Avatar items - `{testId}--avatar-{index}`
     * - Overflow menu button - `{testId}--overflow-menu--trigger`
     * - Overflow menu content - `{testId}--overflow-menu--content`
     */
    testId?: string;
    /**
     * Custom overrides for the composed components.
     */
    overrides?: AvatarGroupOverrides;
    /**
     *
     * Where the tooltip should appear relative to its target.
     * Defaults to tooltip position "bottom".
     */
    tooltipPosition?: Extract<PositionType, 'bottom' | 'top'>;
    /**
     * Disables tooltips.
     */
    isTooltipDisabled?: boolean;
    /**
     * Text to be used as aria-label for the list of avatars.
     * Screen reader announcement with default label, which is `avatar group`, is `list, avatar group, X items`.
     *
     * The label should describe the `AvatarGroup`'s entities, for instance:
     * - `label="team members"`, screen reader announcement would be `list team members, X items`
     * - `label="reviewers"` screen reader announcement would be `list reviewers, X items`
     *
     * When there are several AvatarGroups on the page you should use a unique label to let users distinguish different lists.
     */
    label?: string;
    /**
     * Determines whether the 'show more' popup has `shouldRenderToParent` applied.
     */
    shouldPopupRenderToParent?: boolean;
    /**
     * Text to be used as aria-label for the more indicator.
     * If provided, this will be used exactly as-is for the aria-label.
     * If not provided, but an `aria-label` is provided via `showMoreButtonProps`, that will be used instead.
     * If neither is provided, the aria-label will default to "N more people" where N is the number of people that are not visible (e.g. "5 more people").
     */
    moreIndicatorLabel?: string;
}
/**
 * __Avatar group__
 *
 * An avatar group displays a number of avatars grouped together in a stack or grid.
 *
 * - [Examples](https://atlassian.design/components/avatar-group/examples)
 * - [Code](https://atlassian.design/components/avatar-group/code)
 * - [Usage](https://atlassian.design/components/avatar-group/usage)
 */
declare const AvatarGroup: ({ appearance, moreIndicatorAppearance, avatar, borderColor, boundariesElement, data, isTooltipDisabled, maxCount, onAvatarClick, onMoreClick, overrides, showMoreButtonProps, size, testId, label, moreIndicatorLabel, tooltipPosition, shouldPopupRenderToParent, }: AvatarGroupProps) => React.JSX.Element;
export default AvatarGroup;