@ui5/webcomponents-react/wrappers/webComponents/List/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import { withWebComponent } from '../../internal/withWebComponent.js';
/**
 * The `List` component allows displaying a list of items, advanced keyboard
 * handling support for navigating between items, and predefined modes to improve the development efficiency.
 *
 * The `List` is a container for the available list items:
 *
 * - `ListItemStandard`
 * - `ListItemCustom`
 * - `ListItemGroup`
 *
 * To benefit from the built-in selection mechanism, you can use the available
 * selection modes, such as
 * `Single`, `Multiple` and `Delete`.
 *
 * Additionally, the `List` provides header, footer, and customization for the list item separators.
 *
 * ### Keyboard Handling
 *
 * #### Basic Navigation
 * The `List` provides advanced keyboard handling.
 * When a list is focused the user can use the following keyboard
 * shortcuts in order to perform a navigation:
 *
 * - [Up] or [Down] - Navigates up and down the items
 * - [Home] - Navigates to first item
 * - [End] - Navigates to the last item
 *
 * The user can use the following keyboard shortcuts to perform actions (such as select, delete),
 * when the `selectionMode` property is in use:
 *
 * - [Space] - Select an item (if `type` is 'Active') when `selectionMode` is selection
 * - [Delete] - Delete an item if `selectionMode` property is `Delete`
 *
 * #### Fast Navigation
 * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
 * In order to use this functionality, you need to import the following module:
 * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
 *
 *
 *
 * `import "@ui5/webcomponents/dist/ListItemStandard.js";` (for `ListItemStandard`)
 *
 * `import "@ui5/webcomponents/dist/ListItemCustom.js";` (for `ListItemCustom`)
 *
 * `import "@ui5/webcomponents/dist/ListItemGroup.js";` (for `ListItemGroup`)
 *
 * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
 */
const List = withWebComponent('ui5-list', ['accessibleName', 'accessibleNameRef', 'accessibleRole', 'footerText', 'growing', 'growingButtonText', 'headerText', 'loadingDelay', 'noDataText', 'selectionMode', 'separators'], ['indent', 'loading'], ['header'], ['item-click', 'item-close', 'item-delete', 'item-toggle', 'load-more', 'move-over', 'move', 'selection-change']);
List.displayName = 'List';
export { List };