@ui5/webcomponents-react

import '@ui5/webcomponents/dist/MultiComboBox.js'; import type { MultiComboBoxSelectionChangeEventDetail, MultiComboBoxValueStateChangeEventDetail } from '@ui5/webcomponents/dist/MultiComboBox.js'; import type ComboBoxFilter from '@ui5/webcomponents/dist/types/ComboBoxFilter.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface MultiComboBoxAttributes { /** * Defines the accessible ARIA name of the component. * * **Note:** Available since [v1.4.0](https://github.com/UI5/webcomponents/releases/tag/v1.4.0) of **@ui5/webcomponents**. * @default undefined */ accessibleName?: string | undefined; /** * Receives id(or many ids) of the elements that label the component. * * **Note:** Available since [v1.4.0](https://github.com/UI5/webcomponents/releases/tag/v1.4.0) of **@ui5/webcomponents**. * @default undefined */ accessibleNameRef?: string | undefined; /** * Defines whether the component is in disabled state. * * **Note:** A disabled component is completely noninteractive. * @default false */ disabled?: boolean; /** * Defines the filter type of the component. * @default "StartsWithPerTerm" */ filter?: ComboBoxFilter | keyof typeof ComboBoxFilter; /** * Indicates whether a loading indicator should be shown in the picker. * @default false */ loading?: boolean; /** * Determines the name by which the component will be identified upon submission in an HTML form. * * **Note:** This property is only applicable within the context of an HTML Form element. * **Note:** When the component is used inside a form element, * the value is sent as the first element in the form data, even if it's empty. * * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. * @default undefined */ name?: string | undefined; /** * Defines whether the value will be autcompleted to match an item * * **Note:** Available since [v1.4.0](https://github.com/UI5/webcomponents/releases/tag/v1.4.0) of **@ui5/webcomponents**. * @default false */ noTypeahead?: boolean; /** * Defines if the user input will be prevented, if no matching item has been found * @default false */ noValidation?: boolean; /** * Indicates whether the items picker is open. * * **Note:** Available since [v2.9.0](https://github.com/UI5/webcomponents/releases/tag/v2.9.0) of **@ui5/webcomponents**. * @default false */ open?: boolean; /** * Defines a short hint intended to aid the user with data entry when the * component has no value. * @default undefined */ placeholder?: string | undefined; /** * Defines whether the component is read-only. * * **Note:** A read-only component is not editable, * but still provides visual feedback upon user interaction. * @default false */ readonly?: boolean; /** * Defines whether the component is required. * @default false */ required?: boolean; /** * Defines the values of the selected items. * * Use this property to programmatically select items by their `value` property. * Each string in the array should match the `value` attribute of a `MultiComboBoxItem`. * * **Note:** If an item doesn't have a `value` attribute set, it cannot be selected via this property. * * **Note:** The recommended approach is to set the `value` property on each `MultiComboBoxItem` * and use `selectedValues` for programmatic selection. The `selected` property on items is * deprecated and should not be used together with `selectedValues`. * * **Note:** Available since [v2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of **@ui5/webcomponents**. * @default [] */ selectedValues?: Array<string>; /** * Defines whether the clear icon of the multi-combobox will be shown. * * **Note:** Available since [v1.20.1](https://github.com/UI5/webcomponents/releases/tag/v1.20.1) of **@ui5/webcomponents**. * @default false */ showClearIcon?: boolean; /** * Determines if the select all checkbox is visible on top of suggestions. * @default false */ showSelectAll?: boolean; /** * Defines the value of the component. * * **Note:** The property is updated upon typing. */ value?: string; /** * Defines the value state of the component. * @default "None" */ valueState?: ValueState | keyof typeof ValueState; } interface MultiComboBoxDomRef extends Required<MultiComboBoxAttributes>, Ui5DomRef { } interface MultiComboBoxPropTypes extends MultiComboBoxAttributes, Omit<CommonProps, keyof MultiComboBoxAttributes | 'children' | 'icon' | 'valueStateMessage' | 'onChange' | 'onClose' | 'onInput' | 'onOpen' | 'onSelectionChange' | 'onValueStateChange'> { /** * Defines the component items. * * __Supported Node Type/s:__ `Array<IMultiComboBoxItem>` */ children?: ReactNode | ReactNode[]; /** * Defines the icon to be displayed in the component. * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="icon"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. * * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). * * __Supported Node Type/s:__ `Array<IIcon>` */ icon?: UI5WCSlotsNode; /** * Defines the value state message that will be displayed as pop up under the component. * The value state message slot should contain only one root element. * * **Note:** If not specified, a default text (in the respective language) will be displayed. * * **Note:** The `valueStateMessage` would be displayed, * when the component is in `Information`, `Critical` or `Negative` value state. * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="valueStateMessage"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. * * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). * * __Supported Node Type/s:__ `Array<HTMLElement>` */ valueStateMessage?: UI5WCSlotsNode; /** * Fired when the input operation has finished by pressing Enter or on focusout. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onChange?: (event: Ui5CustomEvent<MultiComboBoxDomRef>) => void; /** * Fired when the dropdown is closed. * * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|❌| */ onClose?: (event: Ui5CustomEvent<MultiComboBoxDomRef>) => void; /** * Fired when the value of the component changes at each keystroke or clear icon is pressed. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onInput?: (event: Ui5CustomEvent<MultiComboBoxDomRef>) => void; /** * Fired when the dropdown is opened. * * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|❌| */ onOpen?: (event: Ui5CustomEvent<MultiComboBoxDomRef>) => void; /** * Fired when selection is changed by user interaction. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. * * | cancelable | bubbles | * | :--------: | :-----: | * | ✅|✅| */ onSelectionChange?: (event: Ui5CustomEvent<MultiComboBoxDomRef, MultiComboBoxSelectionChangeEventDetail>) => void; /** * Fired before the value state of the component is updated internally. * The event is preventable, meaning that if it's default action is * prevented, the component will not update the value state. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. * * **Note:** Available since [v2.19.0](https://github.com/UI5/webcomponents/releases/tag/v2.19.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | * | ✅|✅| */ onValueStateChange?: (event: Ui5CustomEvent<MultiComboBoxDomRef, MultiComboBoxValueStateChangeEventDetail>) => void; } /** * 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) */ declare const MultiComboBox: import("react").ForwardRefExoticComponent<MultiComboBoxPropTypes & import("@ui5/webcomponents-react-base").WithWebComponentPropTypes & import("react").RefAttributes<MultiComboBoxDomRef>>; export { MultiComboBox }; export type { MultiComboBoxDomRef, MultiComboBoxPropTypes };