@ui5/webcomponents-react

import '@ui5/webcomponents/dist/Avatar.js'; import type { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js'; import type AvatarColorScheme from '@ui5/webcomponents/dist/types/AvatarColorScheme.js'; import type AvatarMode from '@ui5/webcomponents/dist/types/AvatarMode.js'; import type AvatarShape from '@ui5/webcomponents/dist/types/AvatarShape.js'; import type AvatarSize from '@ui5/webcomponents/dist/types/AvatarSize.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface AvatarAttributes { /** * Defines the additional accessibility attributes that will be applied to the component. * The following field is supported: * * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`. * * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. * @default {} */ accessibilityAttributes?: AvatarAccessibilityAttributes; /** * Defines the text alternative of the component. * If not provided a default text alternative will be set, if present. * @default undefined */ accessibleName?: string | undefined; /** * Defines the background color of the desired image. * If `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color. * @default "Auto" */ colorScheme?: AvatarColorScheme | keyof typeof AvatarColorScheme; /** * Defines whether the component is disabled. * A disabled component can't be pressed or * focused, and it is not in the tab chain. * @default false */ disabled?: boolean; /** * Defines the name of the fallback icon, which should be displayed in the following cases: * * - If the initials are not valid (more than 3 letters, unsupported languages or empty initials). * - If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes). * - If the image src is wrong. * * **Note:** If not set, a default fallback icon "employee" is displayed. * * **Note:** You should import the desired icon first, then use its name as "fallback-icon". * * `import "@ui5/webcomponents-icons/dist/{icon_name}.js"` * * `<Avatar fallback-icon="alert">` * * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html). * @default "employee" */ fallbackIcon?: string; /** * Defines the name of the UI5 Icon, that will be displayed. * * **Note:** If `image` slot is provided, the property will be ignored. * * **Note:** You should import the desired icon first, then use its name as "icon". * * `import "@ui5/webcomponents-icons/dist/{icon_name}.js"` * * `<Avatar icon="employee">` * * **Note:** If no icon or an empty one is provided, by default the "employee" icon should be displayed. * * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html). * @default undefined */ icon?: string | undefined; /** * Defines the displayed initials. * * Up to three Latin letters can be displayed as initials. * @default undefined */ initials?: string | undefined; /** * Defines if the avatar is interactive (focusable and pressable). * * **Note:** When set to `true`, this property takes precedence over the `mode` property, * and the avatar will be rendered as interactive (role="button", focusable) regardless of the `mode` value. * * **Note:** This property won't have effect if the `disabled` * property is set to `true`. * @default false * @deprecated Set `mode="Interactive"` instead for the same functionality with proper accessibility. */ interactive?: boolean; /** * Defines the mode of the component. * * **Note:** * - `Image` (default) - renders with role="img" * - `Decorative` - renders with role="presentation" and aria-hidden="true", making it purely decorative * - `Interactive` - renders with role="button", focusable (tabindex="0"), and supports keyboard interaction * * **Note:** This property is ignored when the `interactive` property is set to `true`. * In that case, the avatar will always be rendered as interactive. * * **Note:** Available since [v2.20](https://github.com/UI5/webcomponents/releases/tag/v2.20) of **@ui5/webcomponents**. * @default "Image" */ mode?: AvatarMode | keyof typeof AvatarMode; /** * Defines the shape of the component. * @default "Circle" */ shape?: AvatarShape | keyof typeof AvatarShape; /** * Defines predefined size of the component. * @default "S" */ size?: AvatarSize | keyof typeof AvatarSize; } interface AvatarDomRef extends Required<AvatarAttributes>, Ui5DomRef { } interface AvatarPropTypes extends AvatarAttributes, Omit<CommonProps, keyof AvatarAttributes | 'badge' | 'children' | 'onClick'> { /** * Defines the optional badge that will be used for visual affordance. * * **Recommendation:** While badges are supported on all avatars, it is recommended * to use them with interactive avatars (via `mode="Interactive"` or `interactive` attribute) * to provide better user experience and accessibility. * * **Note:** While the slot allows for custom badges, to achieve * the Fiori design, use the `AvatarBadge` component. * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="badge"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. * * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). * * **Note:** Available since [v1.7.0](https://github.com/UI5/webcomponents/releases/tag/v1.7.0) of **@ui5/webcomponents**. * * __Supported Node Type/s:__ `Array<HTMLElement>` */ badge?: UI5WCSlotsNode; /** * Receives the desired `<img>` tag * * **Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/> * `ui5-avatar:not(:defined) {`<br/> *     `visibility: hidden;`<br/> * `}` * * __Supported Node Type/s:__ `Array<HTMLElement>` */ children?: ReactNode | ReactNode[]; /** * Fired on mouseup, space and enter if avatar is interactive * * **Note:** The event will not be fired if the `disabled` * property is set to `true`. * * **Note:** Available since [v2.11.0](https://github.com/UI5/webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onClick?: (event: Ui5CustomEvent<AvatarDomRef>) => void; } /** * An image-like component that has different display options for representing images and icons * in different shapes and sizes, depending on the use case. * * The shape can be circular or square. There are several predefined sizes, as well as an option to * set a custom size. * * ### Keyboard Handling * * - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` is set to `Interactive` or the deprecated `interactive` property is set to true. * - [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event. * * * * __Note:__ This is a UI5 Web Component! [Avatar UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/Avatar) | [Repository](https://github.com/UI5/webcomponents) */ declare const Avatar: import("react").ForwardRefExoticComponent<AvatarPropTypes & import("@ui5/webcomponents-react-base").WithWebComponentPropTypes & import("react").RefAttributes<AvatarDomRef>>; export { Avatar }; export type { AvatarDomRef, AvatarPropTypes };