@payfit/unity-components
Version:
55 lines (54 loc) • 2.4 kB
TypeScript
import { ActionableProps } from '../../actionable/Actionable.js';
import * as React from 'react';
export interface AvatarGroupCountProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, keyof React.DOMAttributes<HTMLSpanElement>> {
/** Number of avatars hidden by truncation. */
count: number;
/** Overrides the localized accessible label announced for the count. */
'aria-label'?: string;
/**
* Renders the count as a keyboard-accessible button.
* @default false
*/
isInteractive?: boolean;
/** Action invoked when an interactive count is pressed. */
onPress?: ActionableProps['onPress'];
onPressStart?: ActionableProps['onPressStart'];
onPressEnd?: ActionableProps['onPressEnd'];
onPressChange?: ActionableProps['onPressChange'];
children?: React.ReactNode;
}
/**
* Displays the localized count of avatars hidden by an AvatarGroup.
* Use the default status presentation for automatic truncation. Set
* `isInteractive` to `true` when composing the count with `PopoverTrigger` or
* another disclosure that reveals the hidden avatars.
* @param props - Count content, interaction state, and press callbacks.
* @param props.count - Number of hidden avatars.
* @param props.aria-label - Optional accessible-label override. When omitted,
* the component uses the localized hidden-member count.
* @param props.isInteractive - Renders a button instead of a status.
* @param props.children - Optional visible content; defaults to `+{count}`.
* @param props.onPress - Callback invoked when an interactive count is pressed.
* @see {@link AvatarGroupCountProps} for all available props.
* @example
* ```tsx
* import {
* AvatarGroupCount,
* Popover,
* PopoverTrigger,
* } from '@payfit/unity-components'
*
* <PopoverTrigger>
* <AvatarGroupCount count={3} isInteractive />
* <Popover title="Other members" isTitleSrOnly>
* <p>Three hidden members</p>
* </Popover>
* </PopoverTrigger>
* ```
* @remarks
* The default branch renders `role="status"` with a localized label such as
* “3 more members”. The interactive branch renders a real button with the
* same accessible label and supports React Aria press callbacks.
*/
declare const AvatarGroupCount: React.ForwardRefExoticComponent<AvatarGroupCountProps & React.RefAttributes<HTMLSpanElement | HTMLButtonElement>>;
export { AvatarGroupCount };