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

React Wrapper for UI5 Web Components and additional components

'use client';

import '@ui5/webcomponents/dist/Select.js';
import { withWebComponent } from '@ui5/webcomponents-react-base';
/**
 * The `Select` component is used to create a drop-down list.
 *
 * ### Usage
 *
 * There are two main usages of the `ui5-select>`.
 *
 * - With Option (`Option`) web component:
 *
 * The available options of the Select are defined by using the Option component.
 * The Option comes with predefined design and layout, including `icon`, `text` and `additional-text`.
 *
 * - With OptionCustom (`OptionCustom`) web component.
 *
 * Options with custom content are defined by using the OptionCustom component.
 * The OptionCustom component comes with no predefined layout and it expects consumers to define it.
 *
 * ### Selection
 *
 * The options can be selected via user interaction (click or with the use of the Space and Enter keys)
 * and programmatically - the Select component supports two distinct selection APIs, though mixing them is not supported:
 * - The "value" property of the Select component
 * - The "selected" property on individual options
 *
 * **Note:** If the "value" property is set but does not match any option,
 * no option will be selected and the Select component will be displayed as empty.
 *
 * **Note:** when both "value" and "selected" are both used (although discouraged),
 * the "value" property will take precedence.
 *
 * ### Keyboard Handling
 *
 * The `Select` provides advanced keyboard handling.
 *
 * - [F4] / [Alt] + [Up] / [Alt] + [Down] / [Space] or [Enter] - Opens/closes the drop-down.
 * - [Up] or [Down] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.
 * - [Space], [Enter] - If the drop-down is opened - selects the focused option.
 * - [Escape] - Closes the drop-down without changing the selection.
 * - [Home] - Navigates to first option
 * - [End] - Navigates to the last option
 *
 *
 *
 * `import "@ui5/webcomponents/dist/Option";`
 * `import "@ui5/webcomponents/dist/OptionCustom";`
 *
 * __Note:__ This is a UI5 Web Component! [Select UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/Select) | [Repository](https://github.com/UI5/webcomponents)
 */
const Select = withWebComponent('ui5-select', ['accessibleDescription', 'accessibleDescriptionRef', 'accessibleName', 'accessibleNameRef', 'name', 'textSeparator', 'tooltip', 'value', 'valueState'], ['disabled', 'readonly', 'required'], ['label', 'valueStateMessage'], ['change', 'close', 'live-change', 'open']);
Select.displayName = 'Select';
export { Select };