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

React Wrapper for UI5 Web Components and additional components

'use client';

import { withWebComponent } from '@ui5/webcomponents-react-base';
/**
 * A `Tokenizer` is an invisible container for `Token`s that supports keyboard navigation and token selection.
 *
 * The `Tokenizer` consists of two parts:
 * - Tokens - displays the available tokens.
 * - N-more indicator - contains the number of the remaining tokens that cannot be displayed due to the limited space.
 *
 * ### Keyboard Handling
 *
 * #### Basic Navigation
 * The `Tokenizer` provides advanced keyboard handling.
 * When a token is focused the user can use the following keyboard
 * shortcuts in order to perform a navigation:
 *
 * - [Left] or [Right] / [Up] or [Down] - Navigates left and right through the tokens.
 * - [Home] - Navigates to the first token.
 * - [End] - Navigates to the last token.
 *
 * The user can use the following keyboard shortcuts to perform actions (such as select, delete):
 *
 * - [Space] - Selects a token.
 * - [Backspace] / [Delete] - Deletes a token.
 * **Note:** The deletion of a token is handled by the application with the use of the `token-delete` event.
 *
 *
 *
 * __Note:__ This is a UI5 Web Component! [Tokenizer UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/Tokenizer) | [Repository](https://github.com/UI5/webcomponents)
 *
 * @since [2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__.
 * @experimental This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change.
 */
const Tokenizer = withWebComponent('ui5-tokenizer', ['accessibleName', 'accessibleNameRef', 'name'], ['disabled', 'multiLine', 'readonly', 'showClearAll'], [], ['selection-change', 'token-delete']);
Tokenizer.displayName = 'Tokenizer';
export { Tokenizer };