/** * @jsxRuntime classic * @jsx jsx */ import { type ReactNode } from 'react'; import { type AppearanceType, type AvatarClickEventHandler, type Presence, type SizeType, type Status } from './types'; export interface AvatarPropTypes { /** * Indicates the shape of the avatar. Most avatars are circular, but square avatars * can be used for 'container' objects. */ appearance?: AppearanceType; /** * Used to provide custom content to screen readers. * Status or presence is not added to the label by default if it passed as nodes. * If status or presence is passed as a string, the default content format is "John Smith (online)". */ label?: string; /** * Used to override the default border color around the avatar body. * Accepts any color argument that the border-color CSS property accepts. */ borderColor?: string; /** * Supply a custom avatar component instead of the default. */ children?: ReactNode; /** * Provides a url for avatars being used as a link. */ href?: string; /** * Change the style to indicate the avatar is disabled. */ isDisabled?: boolean; /** * Provides alt text for the avatar image. */ name?: string; /** * Indicates a user's online status by showing a small icon on the avatar. * Refer to presence values on the presence component. * Alternatively accepts any React element. For best results, it is recommended to * use square content with height and width of 100%. */ presence?: Presence | Omit | (string & {}) | null; /** * Defines the size of the avatar. Default value is `medium`. * * This can also be controlled by the `size` property of the * `AvatarContext` export from this package. If no prop is given when the * `size` is set via this context, the context's value will be used. */ size?: SizeType; /** * A url to load an image from (this can also be a base64 encoded image). */ src?: string; /** * Indicates contextual information by showing a small icon on the avatar. * Refer to status values on the Status component. */ status?: Status | Omit | (string & {}) | null; /** * The index of where this avatar is in the group `stack`. */ stackIndex?: number; /** * Assign specific tabIndex order to the underlying node. */ tabIndex?: number; /** * Pass target down to the anchor, if href is provided. */ target?: '_blank' | '_self' | '_top' | '_parent'; /** * Handler to be called on click. */ onClick?: AvatarClickEventHandler; /** * 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. */ testId?: string; /** * Analytics context meta data. */ analyticsContext?: Record; /** * Replace the wrapping element. This accepts the name of a html tag which will * be used to wrap the element. */ as?: keyof JSX.IntrinsicElements | React.ComponentType>; /** * whether disable aria-labelledby for avatar img */ isDecorative?: boolean; /** * Defines the loading behaviour of the avatar image. Default value is eager. */ imgLoading?: 'lazy' | 'eager'; /** * Identifies the popup element that the avatar controls. * Used when Avatar is a trigger for a popup. */ 'aria-controls'?: string; /** * Announces to assistive technology whether the controlled popup is currently open or closed. */ 'aria-expanded'?: boolean; /** * Informs assistive technology that this element triggers a popup. * When set, Avatar will render as a `