@payfit/unity-components
Version:
61 lines (60 loc) • 2.86 kB
TypeScript
import * as React from 'react';
/** Controls whether avatars are separated or overlap one another. */
export type AvatarGroupVariant = 'pile' | 'stack';
/** Renders one avatar from an item in the AvatarGroup render-prop API. */
export type AvatarGroupRenderItem<TItem> = (item: TItem, index: number) => React.ReactNode;
/** Renders the truncation indicator for a data-driven AvatarGroup. */
export type AvatarGroupRenderCount<TItem> = (count: number, truncatedItems: TItem[]) => React.ReactNode;
type AvatarGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'> & {
/**
* Controls the relationship between adjacent avatars.
* @default 'stack'
* @remarks `stack` overlaps avatars and adds a separating outline; `pile`
* keeps avatars separated with the design-system gap.
*/
variant?: AvatarGroupVariant;
/**
* Maximum number of visible slots, including the truncation count.
* @default 4
* @remarks Set this to `-1` to disable truncation, or to an integer of at
* least 2. When `items` exceeds the limit, the group renders `maxItems - 1`
* avatars and one non-interactive `AvatarGroupCount` status.
*/
maxItems?: number;
};
type AvatarGroupStaticProps = AvatarGroupBaseProps & {
items?: never;
getItemKey?: never;
renderCount?: never;
/**
* Static Avatar children for the Avatar Group. You must pass a minimum of 2 Avatars
*/
children: React.ReactNode;
};
type AvatarGroupDynamicProps<TItem> = AvatarGroupBaseProps & {
/**
* Data used by the render-prop API.
* @remarks Provide at least two items and pair this prop with a render
* function as `children`. The group validates the minimum and truncates
* items beyond `maxItems`.
*/
items: readonly TItem[];
/** Returns a stable React key for a rendered item. */
getItemKey: (item: TItem, index: number) => React.Key;
/**
* Renders the truncation indicator for the data-driven API.
* @remarks The callback receives the number of hidden items and the exact
* truncated item subset. Return an `AvatarGroupCount` with `isInteractive`
* when the count should trigger a Popover or another disclosure.
*/
renderCount?: AvatarGroupRenderCount<TItem>;
/**
* Renders one Avatar for each item in the data-driven API.
* @remarks The callback receives `(item, index)` and must return the Avatar
* content for that item.
*/
children: AvatarGroupRenderItem<TItem>;
};
export type AvatarGroupProps<TItem = unknown> = AvatarGroupStaticProps | AvatarGroupDynamicProps<TItem>;
declare const AvatarGroupWithGenerics: <TItem = unknown>(props: AvatarGroupProps<TItem> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
export { AvatarGroupWithGenerics as AvatarGroup };