UNPKG

@ui5/webcomponents-react

Version:

React Wrapper for UI5 Web Components and additional components

77 lines (76 loc) 3.01 kB
import '@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js'; import type { ReactNode } from 'react'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface NotificationListGroupItemAttributes { /** * Defines if the group is collapsed or expanded. * @default false */ collapsed?: boolean; /** * Defines if a busy indicator would be displayed over the item. * @default false */ loading?: boolean; /** * Defines the delay in milliseconds, after which the busy indicator will show up for this component. * @default 1000 */ loadingDelay?: number; /** * Defines if the `notification` is new or has been already read. * * **Note:** if set to `false` the `titleText` has bold font, * if set to true - it has a normal font. * @default false */ read?: boolean; /** * Defines the `titleText` of the item. * @default undefined */ titleText?: string | undefined; } interface NotificationListGroupItemDomRef extends Required<NotificationListGroupItemAttributes>, Ui5DomRef { } interface NotificationListGroupItemPropTypes extends NotificationListGroupItemAttributes, Omit<CommonProps, keyof NotificationListGroupItemAttributes | 'children' | 'onToggle'> { /** * Defines the items of the `NotificationListGroupItem`, * usually `NotificationListItem` items. */ children?: ReactNode | ReactNode[]; /** * Fired when the `NotificationListGroupItem` is expanded/collapsed by user interaction. */ onToggle?: (event: Ui5CustomEvent<NotificationListGroupItemDomRef>) => void; } /** * The `NotificationListGroupItem` is a special type of list item, * that unlike others can group items within self, usually `NotificationListItem` items. * * The component consists of: * * - `Toggle` button to expand and collapse the group * - `TitleText` to entitle the group * - Items of the group * * ### Usage * The component can be used in a standard `ui5-list`. * * ### Keyboard Handling * The `NotificationListGroupItem` provides advanced keyboard handling. * This component provides fast navigation when the header is focused using the following keyboard shortcuts: * * - [Space] - toggles expand / collapse of the group * - [Plus] - expands the group * - [Minus] - collapses the group * - [Right] - expands the group * - [Left] - collapses the group * * * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) */ declare const NotificationListGroupItem: import("react").ForwardRefExoticComponent<NotificationListGroupItemPropTypes & import("../../internal/withWebComponent.js").WithWebComponentPropTypes & import("react").RefAttributes<NotificationListGroupItemDomRef>>; export { NotificationListGroupItem }; export type { NotificationListGroupItemDomRef, NotificationListGroupItemPropTypes };