UNPKG

@ui5/webcomponents-react

Version:

React Wrapper for UI5 Web Components and additional components

112 lines (111 loc) 6.01 kB
import '@ui5/webcomponents/dist/ListItemCustom.js'; import type { ListItemAccessibilityAttributes } from '@ui5/webcomponents/dist/ListItem.js'; import type Highlight from '@ui5/webcomponents/dist/types/Highlight.js'; import type ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; import type { ReactNode } from 'react'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface ListItemCustomAttributes { /** * Defines the additional accessibility attributes that will be applied to the component. * The following fields are supported: * * - **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM. * **Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`. * * - **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM. * **Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. * * **Note:** Available since [v1.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.15.0) of **@ui5/webcomponents**. * @default {} */ accessibilityAttributes?: ListItemAccessibilityAttributes; /** * Defines the text alternative of the component. * * **Note**: If not provided a default text alternative will be set, if present. * @default undefined */ accessibleName?: string | undefined; /** * Defines the highlight state of the list items. * Available options are: `"None"` (by default), `"Positive"`, `"Critical"`, `"Information"` and `"Negative"`. * * **Note:** Available since [v1.24](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.24) of **@ui5/webcomponents**. * @default "None" */ highlight?: Highlight | keyof typeof Highlight; /** * Defines whether the item is movable. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. * @default false */ movable?: boolean; /** * The navigated state of the list item. * If set to `true`, a navigation indicator is displayed at the end of the list item. * * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents**. * @default false */ navigated?: boolean; /** * Defines the selected state of the component. * @default false */ selected?: boolean; /** * Defines the text of the tooltip that would be displayed for the list item. * * **Note:** Available since [v1.23.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.23.0) of **@ui5/webcomponents**. * @default undefined */ tooltip?: string | undefined; /** * Defines the visual indication and behavior of the list items. * Available options are `Active` (by default), `Inactive`, `Detail` and `Navigation`. * * **Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover, * while with type `Inactive` and `Detail` - will not. * @default "Active" */ type?: ListItemType | keyof typeof ListItemType; } interface ListItemCustomDomRef extends Required<ListItemCustomAttributes>, Ui5DomRef { } interface ListItemCustomPropTypes extends ListItemCustomAttributes, Omit<CommonProps, keyof ListItemCustomAttributes | 'children' | 'deleteButton' | 'onDetailClick'> { /** * Defines the content of the component. */ children?: ReactNode | ReactNode[]; /** * Defines the delete button, displayed in "Delete" mode. * **Note:** While the slot allows custom buttons, to match * design guidelines, please use the `Button` component. * **Note:** When the slot is not present, a built-in delete button will be displayed. * * __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](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="deleteButton"`). * 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://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). * * **Note:** Available since [v1.9.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.9.0) of **@ui5/webcomponents**. */ deleteButton?: UI5WCSlotsNode; /** * Fired when the user clicks on the detail button when type is `Detail`. */ onDetailClick?: (event: Ui5CustomEvent<ListItemCustomDomRef>) => void; } /** * A component to be used as custom list item within the `List` * the same way as the standard `ListItemStandard`. * * The component accepts arbitrary HTML content to allow full customization. * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) */ declare const ListItemCustom: import("react").ForwardRefExoticComponent<ListItemCustomPropTypes & import("../../internal/withWebComponent.js").WithWebComponentPropTypes & import("react").RefAttributes<ListItemCustomDomRef>>; export { ListItemCustom }; export type { ListItemCustomDomRef, ListItemCustomPropTypes };