@procore/core-react/dist/AvatarStack/AvatarStack.d.ts

React library of Procore Design Guidelines

import React from 'react';
import type { Color } from '../_styles/colors';
import type { AvatarStackItem, AvatarStackItemId, AvatarStackItemType, AvatarStackProps, AvatarStackSize, FoldedAvatarStackProps, ViewAllModalProps } from './AvatarStack.types';
export declare function getOverflowValues<Item extends AvatarStackItem>(items: Item[]): {
    visibleItems: Item[];
    foldedItems: Item[];
    restCountLabel: string | null;
    isViewAllNeeded: boolean;
};
export declare function getIcon(type: AvatarStackItemType, size: 'md' | 'sm'): React.JSX.Element | null;
export declare function getAvatarIcon(type: AvatarStackItemType, size: AvatarStackSize): React.JSX.Element | null;
export declare function getColorOrder(avatarItems: AvatarStackItem[]): Map<AvatarStackItemId, Color>;
export declare function AvatarStackContactItem({ id, type, imageUrl, initials, inactive, name, linkUrl, description, }: AvatarStackItem): React.JSX.Element;
export declare function AvatarContent({ imageUrl, initials, type, size, ...props }: {
    imageUrl?: AvatarStackItem['imageUrl'];
    initials: AvatarStackItem['initials'];
    type: AvatarStackItem['type'];
    size: AvatarStackSize;
}): React.JSX.Element | null;
export declare function FoldedAvatarStack<Item extends AvatarStackItem>({ items, onClickViewAll, size, restCountLabel, isViewAllNeeded, title, viewMoreTriggerRef, }: FoldedAvatarStackProps<Item>): React.JSX.Element;
export declare function ViewAllModal<Item extends AvatarStackItem>({ isOpen, onClose, title, items, }: ViewAllModalProps<Item>): React.JSX.Element;
export declare function defaultInitials<Item extends AvatarStackItem>(item: Item): string;
export declare function defaultGetImageUrl<Item extends AvatarStackItem>(item: Item): string;
export declare function getTransformedItems<Item extends AvatarStackItem>({ items, getInitials, getImageUrl, }: {
    items: Item[];
    getInitials: AvatarStackProps<Item>['getInitials'];
    getImageUrl: AvatarStackProps<Item>['getImageUrl'];
}): (Item & {
    initials: string;
    imageUrl: string;
})[];
declare const _AvatarStack: <Item extends AvatarStackItem>({ items: _items, title, size, getInitials, getImageUrl, onClickViewAll, ...props }: AvatarStackProps<Item>, ref: React.ForwardedRef<HTMLDivElement>) => React.JSX.Element;
/**

 We use avatars to visually represent our users, places, and things in the app.
 These can be in the form of rich media or representative illustrations.

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-avatarstack--demo)

 @see [Design Guidelines](https://design.procore.com/avatar-stack)
 */
export declare const AvatarStack: <Item extends AvatarStackItem>(props: AvatarStackProps<Item> & {
    ref?: React.ForwardedRef<HTMLDivElement> | undefined;
}) => ReturnType<typeof _AvatarStack>;
export {};