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

React Wrapper for UI5 Web Components and additional components

'use client';

import { withWebComponent } from '@ui5/webcomponents-react-base';
/**
 * The `Tree` component provides a tree structure for displaying data in a hierarchy.
 *
 * ### Usage
 *
 * #### When to use:
 *
 * - To display hierarchically structured items.
 * - To select one or more items out of a set of hierarchically structured items.
 *
 * #### When not to use:
 *
 * - To display items not hierarchically structured. In this case, use the List component.
 * - To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.
 * - The hierarchy turns out to have only two levels. In this case, use List with group items.
 *
 * ### Keyboard Handling
 *
 * The `Tree` provides advanced keyboard handling.
 * The user can use the following keyboard shortcuts in order to navigate trough the tree:
 *
 * - [Up] or [Down] - Navigates up and down the tree items that are currently visible.
 * - [Right] - Drills down the tree by expanding the tree nodes.
 * - [Left] - Goes up the tree and collapses the tree nodes.
 *
 * The user can use the following keyboard shortcuts to perform selection,
 * when the `selectionMode` property is in use:
 *
 * - [Space] - Selects the currently focused item upon keyup.
 * - [Enter]  - Selects the currently focused item upon keydown.
 *
 *
 *
 * `import "@ui5/webcomponents/dist/TreeItem.js";`
 *
 * __Note:__ This is a UI5 Web Component! [Tree UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/Tree) | [Repository](https://github.com/UI5/webcomponents)
 */
const Tree = withWebComponent('ui5-tree', ['accessibleDescription', 'accessibleDescriptionRef', 'accessibleName', 'accessibleNameRef', 'footerText', 'headerText', 'noDataText', 'selectionMode'], [], ['header'], ['item-click', 'item-delete', 'item-mouseout', 'item-mouseover', 'item-toggle', 'move-over', 'move', 'selection-change']);
Tree.displayName = 'Tree';
export { Tree };