@ui5/webcomponents-react/dist/webComponents/MultiComboBox/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import '@ui5/webcomponents/dist/MultiComboBox.js';
import { withWebComponent } from '@ui5/webcomponents-react-base';
/**
 * The `MultiComboBox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.
 *
 * The drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.
 * The options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.
 * ### Structure
 * The `MultiComboBox` consists of the following elements:
 *
 * -  Tokenizer - a list of tokens with selected options.
 * -  Input field - displays the selected option/s as token/s. Users can type to filter the list.
 * -  Drop-down arrow - expands\collapses the option list.
 * -  Option list - the list of available options.
 *
 * ### Keyboard Handling
 *
 * The `MultiComboBox` provides advanced keyboard handling.
 *
 * #### Picker
 * If the `MultiComboBox` is focused,
 * you can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.
 * Once the drop-down is opened, you can use the `UP` and `DOWN` arrow keys
 * to navigate through the available options and select one by pressing the `Space` or `Enter` keys.
 * [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.
 *
 * #### Tokens
 *
 * -  Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).
 * -  Delete -  deletes the token and focuses the previous token.
 * -  Backspace -  deletes the token and focus the next token.
 *
 *
 *
 * __Note:__ This is a UI5 Web Component! [MultiComboBox UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/MultiComboBox) | [Repository](https://github.com/UI5/webcomponents)
 */
const MultiComboBox = withWebComponent('ui5-multi-combobox', ['accessibleName', 'accessibleNameRef', 'filter', 'name', 'placeholder', 'selectedValues', 'value', 'valueState'], ['disabled', 'loading', 'noTypeahead', 'noValidation', 'open', 'readonly', 'required', 'showClearIcon', 'showSelectAll'], ['icon', 'valueStateMessage'], ['change', 'close', 'input', 'open', 'selection-change', 'value-state-change']);
MultiComboBox.displayName = 'MultiComboBox';
export { MultiComboBox };