@progress/kendo-react-dropdowns 7.2.4-develop.3 → 7.3.0-develop.1

package/index.d.mts

@@ -1,5 +1,4098 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-export * from './index';
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { CustomComponent } from '@progress/kendo-react-common';
+import { FormComponent } from '@progress/kendo-react-common';
+import { FormComponentProps } from '@progress/kendo-react-common';
+import { FormComponentValidity } from '@progress/kendo-react-common';
+import { ItemRenderProps } from '@progress/kendo-react-treeview';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { LocalizationService } from '@progress/kendo-react-intl';
+import { PopupProps } from '@progress/kendo-react-popup';
+import PropTypes from 'prop-types';
+import * as React_2 from 'react';
+import { SVGIcon } from '@progress/kendo-react-common';
+import { TextBoxChangeEvent } from '@progress/kendo-react-inputs';
+import { TextBoxHandle } from '@progress/kendo-react-inputs';
+
+/**
+ * @hidden
+ */
+declare enum ActiveDescendant {
+    PopupList = 0,
+    TagsList = 1
+}
+
+/** @hidden */
+export declare type AutoComplete = AutoCompleteHandle;
+
+/**
+ * Represents the [KendoReact AutoComplete component]({% slug overview_autocomplete %}).
+ *
+ * Accepts properties of type [AutoCompleteProps]({% slug api_dropdowns_autocompleteprops %}).
+ * Obtaining the `ref` returns an object of type [AutoCompleteHandle]({% slug api_dropdowns_autocompletehandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    autocomplete = null;
+ *    render() {
+ *       return (
+ *          <div>
+ *              <AutoComplete
+ *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
+ *                  ref={component => this.autocomplete = component}
+ *              />
+ *              <button onClick={() => alert(this.autocomplete.value)}>alert value</button>
+ *          </div>
+ *       );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const AutoComplete: React_2.ForwardRefExoticComponent<AutoCompleteProps & React_2.RefAttributes<any>>;
+
+/**
+ * Represents the object of the `blur` AutoComplete event.
+ */
+export declare interface AutoCompleteBlurEvent extends BlurEvent<AutoComplete> {
+}
+
+/**
+ * Represents the object of the `change` AutoComplete event.
+ */
+export declare interface AutoCompleteChangeEvent extends ChangeEvent<AutoComplete> {
+    suggestion?: Suggestion;
+}
+
+/**
+ * Represents the object of the `close` AutoComplete event.
+ */
+export declare interface AutoCompleteCloseEvent extends CloseEvent_2<AutoComplete> {
+}
+
+/**
+ * Represents the object of the `focus` AutoComplete event.
+ */
+export declare interface AutoCompleteFocusEvent extends FocusEvent_2<AutoComplete> {
+}
+
+/**
+ * Represent the `ref` of the AutoComplete component.
+ */
+export declare interface AutoCompleteHandle extends Pick<AutoCompleteWithoutContext, keyof AutoCompleteWithoutContext> {
+    /**
+     * Gets the `name` property of the AutoComplete.
+     */
+    name: string | undefined;
+    /**
+     * Represents the validity state into which the AutoComplete is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * The value of the AutoComplete.
+     */
+    value: string;
+}
+
+/**
+ * @hidden
+ */
+declare interface AutoCompleteInternalState extends InternalState {
+    data: AutoCompleteState;
+}
+
+/**
+ * Represents the object of the `open` AutoComplete event.
+ */
+export declare interface AutoCompleteOpenEvent extends OpenEvent<AutoComplete> {
+}
+
+/**
+ * Represents the props of the [KendoReact AutoComplete component]({% slug overview_autocomplete %}).
+ */
+export declare interface AutoCompleteProps extends FormComponentProps {
+    /**
+     * Sets the data of the AutoComplete ([more information and example]({% slug binding_autocomplete %})).
+     */
+    data?: any[];
+    /**
+     * Sets the opened and closed state of the AutoComplete.
+     */
+    opened?: boolean;
+    /**
+     * The styles that are applied to the AutoComplete.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the value of the AutoComplete ([more information and example]({% slug binding_autocomplete %})).
+     */
+    value?: string;
+    /**
+     * Sets the default value of the AutoComplete. Similar to the native `input` HTML element.
+     */
+    defaultValue?: string;
+    /**
+     * Sets additional classes to the AutoComplete.
+     */
+    className?: string;
+    /**
+     * By default, the AutoComplete renders a button on hovering over the component, which resets the value.
+     * If `clearButton` is set to `false`, the button will not be rendered.
+     */
+    clearButton?: boolean;
+    /**
+     * The hint that is displayed when the AutoComplete is empty.
+     */
+    placeholder?: string;
+    /**
+     * Sets the read-only state of the AutoComplete.
+     */
+    readonly?: boolean;
+    /**
+     * Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_autocomplete %})).
+     */
+    suggest?: boolean | string;
+    /**
+     * Sets the disabled state of the AutoComplete.
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Sets the loading state of the AutoComplete ([see example]({% slug filtering_autocomplete %}#toc-basic-configuration)).
+     */
+    loading?: boolean;
+    /**
+     * Specifies the `tabIndex` of the AutoComplete.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the AutoComplete.
+     */
+    accessKey?: string;
+    /**
+     * Sets the data item field that represents the item text ([see example]({% slug binding_autocomplete %}#toc-datasets-of-objects)). If the data contains only primitive values, do not define it.
+     */
+    textField?: string;
+    /**
+     * Renders a floating label for the AutoComplete.
+     */
+    label?: string;
+    /**
+     * Configures the popup of the AutoComplete.
+     */
+    popupSettings?: DropDownsPopupSettings;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * If set, the AutoComplete will use it to get the focused item index.
+     *
+     * Default functionality returns the first item which starts with the input text.
+     *
+     * @example
+     * ```jsx-no-run
+     * const focusedItemIndex = (data, inputText, textField) => {
+     *     let text = inputText.toLowerCase();
+     *     return data.findIndex(item =>
+     *         String(textField ? item[textField] : item).toLowerCase().includes(text));
+     * };
+     *
+     * <AutoComplete focusedItemIndex={focusedItemIndex} />
+     * ```
+     */
+    focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
+    /**
+     * Fires each time the popup of the AutoComplete is about to open.
+     */
+    onOpen?: (event: AutoCompleteOpenEvent) => void;
+    /**
+     * Fires each time the popup of the AutoComplete is about to close.
+     */
+    onClose?: (event: AutoCompleteCloseEvent) => void;
+    /**
+     * Fires each time the user focuses the AutoComplete.
+     */
+    onFocus?: (event: AutoCompleteFocusEvent) => void;
+    /**
+     * Fires each time the AutoComplete gets blurred.
+     */
+    onBlur?: (event: AutoCompleteBlurEvent) => void;
+    /**
+     * Fires each time the value of the AutoComplete is about to change ([more information and example]({% slug binding_autocomplete %})).
+     */
+    onChange?: (event: AutoCompleteChangeEvent) => void;
+    /**
+     * Fires when the AutoComplete input element is about to be rendered. Use it to override the default appearance of the component.
+     */
+    valueRender?: (rendering: React.ReactElement<HTMLSpanElement>) => React.ReactNode;
+    /**
+     * Fires when an AutoComplete list item is about to be rendered ([see example]({% slug customrendering_autocomplete %}#toc-items)). Used to override the default appearance of the list items.
+     */
+    itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
+    /**
+     * Fires when the element which indicates no data in the popup is about to be rendered ([see example]({% slug customrendering_autocomplete %}#toc-no-data)). Used to override the default appearance of the element.
+     */
+    listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
+    /**
+     * Sets the header component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)).
+     */
+    header?: React.ReactNode;
+    /**
+     * Sets the footer component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)).
+     */
+    footer?: React.ReactNode;
+    /**
+     * Configures the `size` of the AutoComplete.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the AutoComplete.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the AutoComplete.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Sets the data item field that represents the start of a group. Applicable to objects data.
+     */
+    groupField?: string;
+    /**
+     * Fires when a AutoComplete group header item is about to be rendered. Used to override the default appearance of the group's headers.
+     */
+    groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
+    /**
+     * Fires when a AutoComplete sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     */
+    groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
+    /**
+     * @hidden
+     */
+    list?: any;
+    /**
+     * Sets the key for comparing the data items of the AutoComplete. If `dataItemKey` is not set, the AutoComplete compares the items by reference.
+     */
+    dataItemKey?: string;
+    /**
+     * Defines if AutoComplete's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
+     */
+    skipDisabledItems?: boolean;
+    /**
+     * Sets a custom prefix to the AutoComplete component.
+     */
+    prefix?: CustomComponent<any>;
+    /**
+     * Sets a custom suffix to the AutoComplete component.
+     */
+    suffix?: CustomComponent<any>;
+}
+
+/**
+ * Represents the PropsContext of the `AutoComplete` component.
+ * Used for global configuration of all `AutoComplete` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export declare const AutoCompletePropsContext: React_2.Context<(p: AutoCompleteProps) => AutoCompleteProps>;
+
+/**
+ * @hidden
+ */
+declare interface AutoCompleteState extends DropDownStateBase {
+    focusedItem?: any;
+    value?: string;
+}
+
+/** @hidden */
+export declare class AutoCompleteWithoutContext extends React_2.Component<AutoCompleteProps, AutoCompleteState> implements FormComponent {
+    static displayName: string;
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        size: PropTypes.Requireable<"small" | "large" | "medium" | null | undefined>;
+        rounded: PropTypes.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
+        fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | null | undefined>;
+        groupField: PropTypes.Requireable<string>;
+        suggest: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
+        placeholder: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+        defaultValue: PropTypes.Requireable<string>;
+        validationMessage: PropTypes.Requireable<string>;
+        required: PropTypes.Requireable<boolean>;
+        readonly: PropTypes.Requireable<boolean>;
+        clearButton: PropTypes.Requireable<boolean>;
+        valueRender: PropTypes.Requireable<(...args: any[]) => any>;
+        id: PropTypes.Requireable<string>;
+        ariaLabelledBy: PropTypes.Requireable<string>;
+        ariaDescribedBy: PropTypes.Requireable<string>;
+        list: PropTypes.Requireable<any>;
+        skipDisabledItems: PropTypes.Requireable<boolean>;
+        opened: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        dir: PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
+        accessKey: PropTypes.Requireable<string>;
+        data: PropTypes.Requireable<any[]>;
+        textField: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        loading: PropTypes.Requireable<boolean>;
+        popupSettings: PropTypes.Requireable<PropTypes.InferProps<{
+            animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+                openDuration: PropTypes.Requireable<number>;
+                closeDuration: PropTypes.Requireable<number>;
+            }> | null | undefined>>;
+            popupClass: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+            appendTo: PropTypes.Requireable<any>;
+            width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+            height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        }>>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        itemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
+        focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>;
+        header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        size: "small" | "large" | "medium" | null | undefined;
+        rounded: "small" | "large" | "medium" | "full" | null | undefined;
+        fillMode: "flat" | "solid" | "outline" | null | undefined;
+        skipDisabledItems: boolean;
+        prefix: undefined;
+        suffix: undefined;
+        popupSettings: {
+            height: string;
+        };
+        required: boolean;
+        validityStyles: boolean;
+    };
+    /**
+     * @hidden
+     */
+    readonly state: AutoCompleteState;
+    protected readonly base: DropDownBase;
+    private _element;
+    private get _inputId();
+    private _suggested;
+    private _input;
+    private _valueDuringOnChange?;
+    private _isScrolling;
+    private itemHeight;
+    constructor(props: AutoCompleteProps);
+    /**
+     * @hidden
+     */
+    focus: () => void;
+    /**
+     * @hidden
+     */
+    get element(): HTMLSpanElement | null;
+    /**
+     * The value of the AutoComplete.
+     */
+    get value(): string;
+    /**
+     * Gets the `name` property of the AutoComplete.
+     */
+    get name(): string | undefined;
+    /**
+     * Represents the validity state into which the AutoComplete is set.
+     */
+    get validity(): FormComponentValidity;
+    /**
+     * @hidden
+     */
+    protected get validityStyles(): boolean;
+    /**
+     * @hidden
+     */
+    protected get required(): boolean;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(prevProps: AutoCompleteProps, prevState: AutoCompleteState): void;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    /**
+     * @hidden
+     */
+    handleItemSelect: (index: number, state: AutoCompleteInternalState) => void;
+    /**
+     * @hidden
+     */
+    itemFocus: (index: number, state: AutoCompleteInternalState) => void;
+    /**
+     * @hidden
+     */
+    togglePopup: (state: InternalState) => void;
+    /**
+     * @hidden
+     */
+    onNavigate(state: AutoCompleteInternalState, keyCode: number, skipItems?: number): void;
+    /**
+     * @hidden
+     */
+    applyInputValue(value: string, state: AutoCompleteInternalState, eventKey?: number): void;
+    private setValidity;
+    private renderSearchBar;
+    private renderListContainer;
+    private renderList;
+    private onScroll;
+    private handleItemClick;
+    private onChangeHandler;
+    private clearButtonClick;
+    private onInputKeyDown;
+    private handleBlur;
+    private triggerOnChange;
+    private applyState;
+    private suggestValue;
+    private focusedIndex;
+}
+
+/**
+ * @hidden
+ */
+declare interface BlurEvent<T> extends DropdownEvent<T> {
+}
+
+/**
+ * @hidden
+ */
+declare interface CancelEvent<T> extends DropdownEvent<T> {
+}
+
+/**
+ * @hidden
+ */
+declare interface ChangeEvent<T> extends DropdownEvent<T> {
+    /**
+     * The current value of the component.
+     */
+    value: any;
+}
+
+/**
+ * @hidden
+ */
+declare interface CloseEvent_2<T> extends DropdownEvent<T> {
+}
+
+/** @hidden */
+export declare type ComboBox = ComboBoxHandle;
+
+/**
+ * Represents the [KendoReact ComboBox component]({% slug overview_combobox %}).
+ *
+ * Accepts properties of type [ComboBoxProps]({% slug api_dropdowns_comboboxprops %}).
+ * Obtaining the `ref` returns an object of type [ComboBoxHandle]({% slug api_dropdowns_comboboxhandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    combobox = null;
+ *    render() {
+ *       return (
+ *          <div>
+ *              <ComboBox
+ *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
+ *                  ref={component => this.combobox = component}
+ *              />
+ *              <button onClick={() => alert(this.combobox.value)}>alert value</button>
+ *          </div>
+ *       );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const ComboBox: React_2.ForwardRefExoticComponent<ComboBoxProps & React_2.RefAttributes<any>>;
+
+/**
+ * Represents the object of the `blur` ComboBox event.
+ */
+export declare interface ComboBoxBlurEvent extends BlurEvent<ComboBox> {
+}
+
+/**
+ * Represents the object of the `change` ComboBox event.
+ */
+export declare interface ComboBoxChangeEvent extends ChangeEvent<ComboBox> {
+}
+
+/**
+ * Represents the object of the `close` ComboBox event.
+ */
+export declare interface ComboBoxCloseEvent extends CloseEvent_2<ComboBox> {
+}
+
+/**
+ * Represents the object of the `FilterChange` ComboBox event.
+ */
+export declare interface ComboBoxFilterChangeEvent extends FilterChangeEvent<ComboBox> {
+}
+
+/**
+ * Represents the object of the `focus` ComboBox event.
+ */
+export declare interface ComboBoxFocusEvent extends FocusEvent_2<ComboBox> {
+}
+
+/**
+ * Represent the `ref` of the ComboBox component.
+ */
+export declare interface ComboBoxHandle extends Pick<ComboBoxWithoutContext, keyof ComboBoxWithoutContext> {
+    /**
+     * The index of the selected item.
+     */
+    index: number;
+    /**
+     * Gets the `name` property of the ComboBox.
+     */
+    name: string | undefined;
+    /**
+     * Represents the validity state into which the component is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * The value of the ComboBox.
+     */
+    value: any;
+}
+
+/**
+ * Represents the object of the `open` ComboBox event.
+ */
+export declare interface ComboBoxOpenEvent extends OpenEvent<ComboBox> {
+}
+
+/**
+ * Represents the object of the `PageChange` ComboBox event.
+ */
+export declare interface ComboBoxPageChangeEvent extends PageChangeEvent<ComboBox> {
+}
+
+/**
+ * Represents the props of the [KendoReact ComboBox component]({% slug overview_combobox %}).
+ */
+export declare interface ComboBoxProps extends FormComponentProps {
+    /**
+     * Sets the data of the ComboBox ([more information and examples]({% slug binding_combobox %})).
+     */
+    data?: any[];
+    /**
+     * Sets the opened and closed state of the ComboBox.
+     */
+    opened?: boolean;
+    /**
+     * The styles that are applied to the ComboBox.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the value of the ComboBox ([more information and examples]({% slug binding_combobox %})). It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     */
+    value?: any;
+    /**
+     * Sets the default value of the ComboBox. Similar to the native `select` HTML element.
+     */
+    defaultValue?: any;
+    /**
+     * Sets additional classes to the ComboBox.
+     */
+    className?: string;
+    /**
+     * Sets CSS classes to the expand `icon` DOM element.
+     */
+    iconClassName?: string;
+    /**
+     * Sets the specified SVG icon.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * If `clearButton` is set to `true`, the ComboBox renders a button on hovering over the component. Clicking this button resets the value of the ComboBox to `undefined` and triggers the `change` event.
+     */
+    clearButton?: boolean;
+    /**
+     * The hint that is displayed when the ComboBox is empty.
+     */
+    placeholder?: string;
+    /**
+     * Sets the title attribute to the underlying input element of the ComboBox.
+     */
+    title?: string;
+    /**
+     * Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_combobox %})).
+     */
+    suggest?: boolean;
+    /**
+     * Specifies whether the ComboBox allows user-defined values that are not present in the dataset ([see example]({% slug custom_values_combobox %})). Defaults to `false`.
+     */
+    allowCustom?: boolean;
+    /**
+     * Sets the disabled state of the ComboBox.
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Enables the filtering functionality of the ComboBox ([more information and examples]({% slug filtering_combobox %})).
+     */
+    filterable?: boolean;
+    /**
+     * Sets the value of ComboBox input. Useful for making the ComboBox input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     */
+    filter?: string | null;
+    /**
+     * Sets the value of the adaptive filtering input of the of ComboBox.
+     */
+    adaptiveFilter?: string;
+    /**
+     * Sets the loading state of the ComboBox ([see example]({% slug filtering_combobox %}#toc-basic-configuration)).
+     */
+    loading?: boolean;
+    /**
+     * Specifies the `tabIndex` of the ComboBox.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the ComboBox.
+     */
+    accessKey?: string;
+    /**
+     * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
+     */
+    textField?: string;
+    /**
+     * Sets the data item field that represents the start of a group. Applicable to objects data.
+     */
+    groupField?: string;
+    /**
+     * Defines the `classic` or `modern` type of the grouping's visualization. Defaults to `modern`.
+     */
+    groupMode?: string;
+    /**
+     * @hidden Used to indicate if the ComboBox is with multiple columns
+     */
+    isMultiColumn?: boolean;
+    /**
+     * Sets the key for comparing the data items of the ComboBox. If `dataItemKey` is not set, the ComboBox compares the items by reference ([see example]({% slug binding_combobox %}#toc-datasets-of-objects)).
+     */
+    dataItemKey?: string;
+    /**
+     * Renders a floating label for the ComboBox.
+     */
+    label?: string;
+    /**
+     * Configures the popup of the ComboBox.
+     */
+    popupSettings?: DropDownsPopupSettings;
+    /**
+     * Configures the virtual scrolling of the ComboBox ([more information and examples]({% slug virtualization_combobox %})).
+     */
+    virtual?: VirtualizationSettings;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * If set, the ComboBox will use it to get the focused item index.
+     *
+     * Default functionality returns the first item which starts with the input text.
+     *
+     * @example
+     * ```jsx-no-run
+     * const focusedItemIndex = (data, inputText, textField) => {
+     *     let text = inputText.toLowerCase();
+     *     return data.findIndex(item =>
+     *         String(textField ? item[textField] : item).toLowerCase().includes(text));
+     * };
+     *
+     * <ComboBox focusedItemIndex={focusedItemIndex} />
+     * ```
+     */
+    focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
+    /**
+     * Fires each time the popup of the ComboBox is about to open.
+     */
+    onOpen?: (event: ComboBoxOpenEvent) => void;
+    /**
+     * Fires each time the popup of the ComboBox is about to close.
+     */
+    onClose?: (event: ComboBoxCloseEvent) => void;
+    /**
+     * Fires each time the user focuses the ComboBox.
+     */
+    onFocus?: (event: ComboBoxFocusEvent) => void;
+    /**
+     * Fires each time the ComboBox gets blurred.
+     */
+    onBlur?: (event: ComboBoxBlurEvent) => void;
+    /**
+     * Fires each time the value of the ComboBox is about to change ([see examples]({% slug binding_combobox %})).
+     */
+    onChange?: (event: ComboBoxChangeEvent) => void;
+    /**
+     * Fires each time the user types in the filter input ([see examples]({% slug filtering_combobox %}#toc-basic-configuration)). You can filter the source based on the passed filtration value.
+     */
+    onFilterChange?: (event: ComboBoxFilterChangeEvent) => void;
+    /**
+     * Fires when both the virtual scrolling of the ComboBox is enabled and the component requires data for another page ([more information and examples]({% slug virtualization_combobox %})).
+     */
+    onPageChange?: (event: ComboBoxPageChangeEvent) => void;
+    /**
+     * Fires when the ComboBox input element is about to be rendered. Use it to override the default appearance of the component.
+     */
+    valueRender?: (rendering: React.ReactElement<HTMLSpanElement>) => React.ReactNode;
+    /**
+     * Fires when a ComboBox list item is about to be rendered ([see example]({% slug customrendering_combobox %}#toc-items)). Used to override the default appearance of the list items.
+     */
+    itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
+    /**
+     * Fires when a ComboBox group header item is about to be rendered. Used to override the default appearance of the group's headers when the component is configured in `modern` group mode.
+     */
+    groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
+    /**
+     * Fires when a ComboBox sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     */
+    groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
+    /**
+     * Fires when the element which indicates no data in the popup is about to be rendered. Used to override the default appearance of the element.
+     */
+    listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
+    /**
+     * @hidden
+     */
+    onGroupScroll?: (event: {
+        group?: string;
+    }) => void;
+    /**
+     * Sets the header component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
+     */
+    header?: React.ReactNode;
+    /**
+     * Sets the footer component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
+     */
+    footer?: React.ReactNode;
+    /**
+     * @hidden
+     */
+    footerClassName?: string;
+    /**
+     * @hidden
+     */
+    list?: any;
+    /**
+     * Configures the `size` of the ComboBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the ComboBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the ComboBox.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
+    /**
+     * Defines if ComboBox's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
+     */
+    skipDisabledItems?: boolean;
+    /**
+     * Sets a custom prefix to the ComboBox component.
+     */
+    prefix?: CustomComponent<any>;
+    /**
+     * Sets a custom suffix to the ComboBox component.
+     */
+    suffix?: CustomComponent<any>;
+}
+
+/**
+ * Represents the PropsContext of the `ComboBox` component.
+ * Used for global configuration of all `ComboBox` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export declare const ComboBoxPropsContext: React_2.Context<(p: ComboBoxProps) => ComboBoxProps>;
+
+/** @hidden */
+declare interface ComboBoxState extends DropDownStateBase {
+    filterText?: string;
+    suggestedText?: string;
+    focusedItem?: any;
+    windowWidth?: number;
+}
+
+/** @hidden */
+export declare class ComboBoxWithoutContext extends React_2.Component<ComboBoxProps, ComboBoxState> implements FormComponent {
+    static displayName: string;
+    /** @hidden */
+    static propTypes: {
+        size: PropTypes.Requireable<"small" | "large" | "medium" | null | undefined>;
+        rounded: PropTypes.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
+        fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | null | undefined>;
+        dataItemKey: PropTypes.Requireable<string>;
+        groupField: PropTypes.Requireable<string>;
+        groupMode: PropTypes.Requireable<string | undefined>;
+        isMultiColumn: PropTypes.Requireable<boolean>;
+        suggest: PropTypes.Requireable<boolean>;
+        placeholder: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        allowCustom: PropTypes.Requireable<boolean>;
+        clearButton: PropTypes.Requireable<boolean>;
+        iconClassName: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
+        validationMessage: PropTypes.Requireable<string>;
+        required: PropTypes.Requireable<boolean>;
+        id: PropTypes.Requireable<string>;
+        ariaLabelledBy: PropTypes.Requireable<string>;
+        ariaDescribedBy: PropTypes.Requireable<string>;
+        list: PropTypes.Requireable<any>;
+        valueRender: PropTypes.Requireable<(...args: any[]) => any>;
+        skipDisabledItems: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<any>;
+        defaultValue: PropTypes.Requireable<any>;
+        filterable: PropTypes.Requireable<boolean>;
+        filter: PropTypes.Requireable<string>;
+        virtual: PropTypes.Requireable<PropTypes.InferProps<{
+            pageSize: PropTypes.Validator<number>;
+            skip: PropTypes.Validator<number>;
+            total: PropTypes.Validator<number>;
+        }>>;
+        onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
+        opened: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        dir: PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
+        accessKey: PropTypes.Requireable<string>;
+        data: PropTypes.Requireable<any[]>;
+        textField: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        loading: PropTypes.Requireable<boolean>;
+        popupSettings: PropTypes.Requireable<PropTypes.InferProps<{
+            animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+                openDuration: PropTypes.Requireable<number>;
+                closeDuration: PropTypes.Requireable<number>;
+            }> | null | undefined>>;
+            popupClass: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+            appendTo: PropTypes.Requireable<any>;
+            width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+            height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        }>>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        itemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
+        focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>;
+        header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    /** @hidden */
+    static defaultProps: {
+        size: "small" | "large" | "medium" | null | undefined;
+        rounded: "small" | "large" | "medium" | "full" | null | undefined;
+        fillMode: "flat" | "solid" | "outline" | null | undefined;
+        allowCustom: boolean;
+        clearButton: boolean;
+        required: boolean;
+        groupMode: string | undefined;
+        isMultiColumn: boolean;
+        skipDisabledItems: boolean;
+        prefix: undefined;
+        suffix: undefined;
+        popupSettings: {
+            height: string;
+        };
+        validityStyles: boolean;
+    };
+    /** @hidden */
+    readonly state: ComboBoxState;
+    protected readonly base: DropDownBase;
+    private _element;
+    private get _inputId();
+    private _valueDuringOnChange;
+    private _valueOnDidUpdate;
+    private _suggested;
+    private _skipBlur;
+    private _input;
+    private _adaptiveFilterInput;
+    private itemHeight;
+    private observerResize?;
+    private get document();
+    constructor(props: ComboBoxProps);
+    /** @hidden */
+    focus: () => void;
+    /** @hidden */
+    get element(): HTMLSpanElement | null;
+    /**
+     * The mobile mode of the ComboBox.
+     */
+    get mobileMode(): boolean;
+    /**
+     * The value of the ComboBox.
+     */
+    get value(): any;
+    /**
+     * The index of the selected item.
+     */
+    get index(): number;
+    /**
+     * Gets the `name` property of the ComboBox.
+     */
+    get name(): string | undefined;
+    /**
+     * Represents the validity state into which the component is set.
+     */
+    get validity(): FormComponentValidity;
+    protected get validityStyles(): boolean;
+    /** @hidden */
+    protected get required(): boolean;
+    /** @hidden */
+    componentDidUpdate(prevProps: ComboBoxProps, prevState: ComboBoxState): void;
+    /** @hidden */
+    componentDidMount(): void;
+    /** @hidden */
+    componentWillUnmount(): void;
+    /** @hidden */
+    render(): JSX_2.Element;
+    /** @hidden */
+    handleItemSelect: (index: number, state: ComboInternalState) => void;
+    /** @hidden */
+    onNavigate(state: InternalState, keyCode: number, skipItems?: number): void;
+    private onPopupOpened;
+    private componentRef;
+    private getCurrentValueDisabledStatus;
+    private toggleBtnClick;
+    private applyValueOnEnter;
+    private applyValueOnRejectSuggestions;
+    private selectFocusedItem;
+    private renderAdaptiveListContainer;
+    private renderMobileListFilter;
+    private renderListContainer;
+    private renderList;
+    private handleMobileFilterChange;
+    private renderSearchBar;
+    private onScroll;
+    private handleItemClick;
+    private handleBlur;
+    private onInputClick;
+    private onInputKeyDown;
+    private inputOnChange;
+    private clearValue;
+    private clearButtonClick;
+    private clearValueOnEnterOrEsc;
+    private clearValueOnBlur;
+    private clearValueOnToggleBtnClick;
+    private triggerOnChange;
+    private getFocusedIndex;
+    private suggestValue;
+    private applyState;
+    private setValidity;
+    private calculateMedia;
+}
+
+/** @hidden */
+declare interface ComboInternalState extends InternalState {
+    data: ComboBoxState;
+}
+
+/**
+ * @hidden
+ */
+declare class DropDownBase {
+    static basicPropTypes: {
+        opened: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        dir: PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
+        accessKey: PropTypes.Requireable<string>;
+        data: PropTypes.Requireable<any[]>;
+        textField: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        loading: PropTypes.Requireable<boolean>;
+        popupSettings: PropTypes.Requireable<PropTypes.InferProps<{
+            animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+                openDuration: PropTypes.Requireable<number>;
+                closeDuration: PropTypes.Requireable<number>;
+            }> | null | undefined>>;
+            popupClass: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+            appendTo: PropTypes.Requireable<any>;
+            width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+            height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        }>>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        itemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
+        focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>;
+        header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    static propTypes: {
+        value: PropTypes.Requireable<any>;
+        defaultValue: PropTypes.Requireable<any>;
+        filterable: PropTypes.Requireable<boolean>;
+        filter: PropTypes.Requireable<string>;
+        virtual: PropTypes.Requireable<PropTypes.InferProps<{
+            pageSize: PropTypes.Validator<number>;
+            skip: PropTypes.Validator<number>;
+            total: PropTypes.Validator<number>;
+        }>>;
+        onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
+        opened: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        dir: PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
+        accessKey: PropTypes.Requireable<string>;
+        data: PropTypes.Requireable<any[]>;
+        textField: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        loading: PropTypes.Requireable<boolean>;
+        popupSettings: PropTypes.Requireable<PropTypes.InferProps<{
+            animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+                openDuration: PropTypes.Requireable<number>;
+                closeDuration: PropTypes.Requireable<number>;
+            }> | null | undefined>>;
+            popupClass: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+            appendTo: PropTypes.Requireable<any>;
+            width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+            height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        }>>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        itemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
+        focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>;
+        header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    static defaultProps: {
+        popupSettings: {
+            height: string;
+        };
+        required: boolean;
+        validityStyles: boolean;
+    };
+    popupWidth?: string;
+    wrapper: HTMLSpanElement | null;
+    list: HTMLUListElement | null;
+    dirCalculated?: string;
+    readonly vs: VirtualScroll;
+    readonly navigation: Navigation;
+    readonly listBoxId: string;
+    readonly guid: string;
+    readonly component: DropDownComponent;
+    constructor(component: DropDownComponent);
+    didMount(): void;
+    calculateDir(): void;
+    calculatePopupWidth(): void;
+    scrollToItem(itemIndex: number, vsEnabled?: boolean, once?: boolean): void;
+    handleItemClick: (index: number, event: React_2.MouseEvent<HTMLLIElement> | React_2.KeyboardEvent<HTMLInputElement>) => void;
+    handleFocus: React_2.FocusEventHandler<HTMLSpanElement>;
+    filterChanged: (text: string | null, state: InternalState) => void;
+    initState(): InternalState;
+    applyState(state: InternalState): void;
+    togglePopup: (state: InternalState) => void;
+    pageChange: (page: Page, syntheticEvent: React_2.SyntheticEvent<any>) => void;
+    triggerOnPageChange(state: InternalState, skip: number, take: number): void;
+    triggerPageChangeCornerItems(item: any, state: InternalState): void;
+    scrollToVirtualItem: (virtual: VirtualizationSettings, selectedItemIndex: number) => void;
+    /**
+     * @hidden
+     * Scrolls the data inside the popup of a selected DropDown by `one page`. The page size
+     * depends on the height of the popup.
+     *
+     * @param {number} direction Defines the direction(Up/Down) in which the page will be moved
+     * @param {number} filterHeight Defines the heigh of the filter element that appears in the DropDownList and DropDownTree.
+     * This property is added for handling the filtering scenarios of the mentioned components.
+     */
+    scrollPopupByPageSize: (direction: number) => void;
+    renderScrollElement: () => false | JSX_2.Element;
+    getPopupSettings(): DropDownsPopupSettings;
+    getGroupedDataModernMode(data: any[], groupField: string): any[];
+    resetGroupStickyHeader: (groupName: string, that: any) => void;
+}
+
+/**
+ * @hidden
+ */
+declare interface DropDownComponent {
+    props: DropDownComponentProps;
+    setState: Function;
+    forceUpdate: Function;
+    state: DropDownStateBase;
+    element: HTMLSpanElement | null;
+    handleItemSelect: Function;
+    value: any;
+}
+
+/**
+ * @hidden
+ */
+declare interface DropDownComponentProps {
+    data?: any[];
+    opened?: boolean;
+    value?: any;
+    disabled?: boolean;
+    tabIndex?: number;
+    dir?: string;
+    defaultItem?: any;
+    filterable?: boolean;
+    filter?: string | null;
+    textField?: string;
+    dataItemKey?: string;
+    popupSettings?: DropDownsPopupSettings;
+    style?: React_2.CSSProperties;
+    virtual?: VirtualizationSettings;
+    onOpen?: (event: any) => void;
+    onClose?: (event: any) => void;
+    onFocus?: (event: any) => void;
+    onBlur?: (event: any) => void;
+    onChange?: (event: any) => void;
+    onFilterChange?: (event: any) => void;
+    onPageChange?: (event: any) => void;
+    itemRender?: (li: React_2.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React_2.ReactNode;
+    listNoDataRender?: (element: React_2.ReactElement<HTMLDivElement>) => React_2.ReactNode;
+    header?: React_2.ReactNode;
+    footer?: React_2.ReactNode;
+    id?: string;
+}
+
+/**
+ * @hidden
+ */
+declare interface DropdownEvent<T> {
+    /**
+     * A native DOM event.
+     */
+    nativeEvent: Event;
+    /**
+     * A React [`SyntheticEvent`](https://reactjs.org/docs/events.html).
+     */
+    syntheticEvent: React.SyntheticEvent<HTMLElement>;
+    /**
+     * An event target.
+     */
+    target: T;
+}
+
+/** @hidden */
+export declare type DropDownList = DropDownListHandle;
+
+/**
+ * Represents the [KendoReact DropDownList component]({% slug overview_dropdownlist %}).
+ *
+ * Accepts properties of type [DropDownListProps]({% slug api_dropdowns_dropdownlistprops %}).
+ * Obtaining the `ref` returns an object of type [DropDownListHandle]({% slug api_dropdowns_dropdownlisthandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    dropdownlist = null;
+ *    render() {
+ *       return (
+ *          <div>
+ *              <DropDownList
+ *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
+ *                  ref={component => this.dropdownlist = component}
+ *              />
+ *              <button onClick={() => alert(this.dropdownlist.value)}>alert value</button>
+ *          </div>
+ *       );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const DropDownList: React_2.ForwardRefExoticComponent<DropDownListProps & React_2.RefAttributes<any>>;
+
+/**
+ * Represents the object of the `blur` DropDownList event.
+ */
+export declare interface DropDownListBlurEvent extends BlurEvent<DropDownList> {
+}
+
+/**
+ * Represents the object of the `change` DropDownList event.
+ */
+export declare interface DropDownListChangeEvent extends ChangeEvent<DropDownList> {
+}
+
+/**
+ * Represents the object of the `close` DropDownList event.
+ */
+export declare interface DropDownListCloseEvent extends CloseEvent_2<DropDownList> {
+}
+
+/**
+ * Represents the object of the `filterChange` DropDownList event.
+ */
+export declare interface DropDownListFilterChangeEvent extends FilterChangeEvent<DropDownList> {
+}
+
+/**
+ * Represents the object of the `focus` DropDownList event.
+ */
+export declare interface DropDownListFocusEvent extends FocusEvent_2<DropDownList> {
+}
+
+/**
+ * Represent the `ref` of the DropDownList component.
+ */
+export declare interface DropDownListHandle extends Pick<DropDownListWithoutContext, keyof DropDownListWithoutContext> {
+    /**
+     * The index of the selected item.
+     */
+    index: number;
+    /**
+     * Gets the `name` property of the DropDownList.
+     */
+    name: string | undefined;
+    /**
+     * Represents the validity state into which the DropDownList is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * The value of the DropDownList.
+     */
+    value: any;
+}
+
+/**
+ * Represents the object of the `open` DropDownList event.
+ */
+export declare interface DropDownListOpenEvent extends OpenEvent<DropDownList> {
+}
+
+/**
+ * Represents the object of the `pageChange` DropDownList event.
+ */
+export declare interface DropDownListPageChangeEvent extends PageChangeEvent<DropDownList> {
+}
+
+/**
+ * Represents the props of the [KendoReact DropDownList component]({% slug overview_dropdownlist %}).
+ */
+export declare interface DropDownListProps extends FormComponentProps {
+    /**
+     * Sets the data of the DropDownList ([see example]({% slug binding_dropdownlist %})).
+     */
+    data?: any[];
+    /**
+     * Sets the text of the default empty item. The type of the defined value has to match the data type.
+     */
+    defaultItem?: any;
+    /**
+     * Sets the delay before an item search is performed. When filtration is disabled, use this option.
+     */
+    delay?: number;
+    /**
+     * Enables a case-insensitive search. When filtering is disabled, use this option.
+     */
+    ignoreCase?: boolean;
+    /**
+     * Sets the opened and closed state of the DropDownList.
+     */
+    opened?: boolean;
+    /**
+     * The styles that are applied to the DropDownList.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the value of the DropDownList ([see example]({% slug binding_dropdownlist %})). It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     */
+    value?: any;
+    /**
+     * Sets the default value of the DropDownList ([see example]({% slug defaultitem_dropdownlist %})). Similar to the native `select` HTML element.
+     */
+    defaultValue?: any;
+    /**
+     * Sets additional classes to the DropDownList.
+     */
+    className?: string;
+    /**
+     * Sets CSS classes to the expand `icon` DOM element.
+     */
+    iconClassName?: string;
+    /**
+     * Sets the specified SVG icon.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Sets the title attribute to the DropDownList DOM element.
+     */
+    title?: string;
+    /**
+     * Sets the disabled state of the DropDownList.
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Enables the filtering functionality of the DropDownList ([more information and examples]({% slug filtering_dropdownlist %})).
+     */
+    filterable?: boolean;
+    /**
+     * Sets the value of filtering input. Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     */
+    filter?: string;
+    /**
+     * Sets the loading state of the DropDownList.
+     */
+    loading?: boolean;
+    /**
+     * Specifies the `tabIndex` of the DropDownList.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the DropDownList.
+     */
+    accessKey?: string;
+    /**
+     * Sets the data item field that represents the item text ([see example]({% slug defaultitem_dropdownlist %})). If the data contains only primitive values, do not define it.
+     */
+    textField?: string;
+    /**
+     * Sets the key for comparing the data items of the DropDownList. If `dataItemKey` is not set, the DropDownList compares the items by reference ([see example]({% slug binding_dropdownlist %}#toc-datasets-of-objects)).
+     */
+    dataItemKey?: string;
+    /**
+     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
+     *
+     * @example
+     * ```jsx-no-run
+     * class App extends React.Component {
+     *    render() {
+     *       return (
+     *          <form>
+     *              <DropDownList
+     *                  data={[ { text: "Austria", id: 1 } , { text: "Belarus", id: 2 } ]}
+     *                  valueMap={value => value && value.id}
+     *              />
+     *              <button type="submit">Submit</button>
+     *          </form>
+     *       );
+     *    }
+     * }
+     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * ```
+     */
+    valueMap?: (value: any) => any;
+    /**
+     * Renders a floating label for the DropDownList.
+     */
+    label?: string;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * The accessible label of the component. By default is set to value of `label` prop.
+     */
+    ariaLabel?: string;
+    /**
+     * Configures the popup of the DropDownList.
+     */
+    popupSettings?: DropDownsPopupSettings;
+    /**
+     * Configures the virtual scrolling of the DropDownList ([see example]({% slug virtualization_dropdownlist %})).
+     */
+    virtual?: VirtualizationSettings;
+    /**
+     * If set, the DropDownList will use it to get the focused item index.
+     *
+     * Default functionality returns the first item which starts with the input text.
+     *
+     * @example
+     * ```jsx-no-run
+     * const focusedItemIndex = (data, inputText, textField) => {
+     *     let text = inputText.toLowerCase();
+     *     return data.findIndex(item =>
+     *         String(textField ? item[textField] : item).toLowerCase().includes(text));
+     * };
+     *
+     * <DropDownList focusedItemIndex={focusedItemIndex} />
+     * ```
+     */
+    focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
+    /**
+     * Fires each time the popup of the DropDownList is about to open.
+     */
+    onOpen?: (event: DropDownListOpenEvent) => void;
+    /**
+     * Fires each time the popup of the DropDownList is about to close.
+     */
+    onClose?: (event: DropDownListCloseEvent) => void;
+    /**
+     * Fires each time the user focuses the DropDownList.
+     */
+    onFocus?: (event: DropDownListFocusEvent) => void;
+    /**
+     * Fires each time the DropDownList gets blurred.
+     */
+    onBlur?: (event: DropDownListBlurEvent) => void;
+    /**
+     * Fires each time the value of the DropDownList is about to change ([see examples]({% slug binding_dropdownlist %})).
+     */
+    onChange?: (event: DropDownListChangeEvent) => void;
+    /**
+     * Fires each time the user types in the filter input. You can filter the source based on the passed filtration value.
+     */
+    onFilterChange?: (event: DropDownListFilterChangeEvent) => void;
+    /**
+     * Fires when both the virtual scrolling of the DropDownList is enabled and the component requires data for another page ([see example]({% slug virtualization_dropdownlist %})).
+     */
+    onPageChange?: (event: DropDownListPageChangeEvent) => void;
+    /**
+     * Fires when a DropDownList item is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-items)). Used to override the default appearance of the list items.
+     */
+    itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
+    /**
+     * Fires when the element which renders the value is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-values)). Used to override the default appearance of the element.
+     */
+    valueRender?: (element: React.ReactElement<HTMLSpanElement>, value: any) => React.ReactNode;
+    /**
+     * Fires when the element which indicates no data in the popup is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-no-data)). Used to override the default appearance of the element.
+     */
+    listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
+    /**
+     * Sets the header component of the DropDownList ([see example]({% slug customrendering_dropdownlist %}#toc-headers-and-footers)).
+     */
+    header?: React.ReactNode;
+    /**
+     * Sets the footer component of the DropDownList ([see example]({% slug customrendering_dropdownlist %}#toc-headers-and-footers)).
+     */
+    footer?: React.ReactNode;
+    /**
+     * Specifies the `name` property of the `select` DOM element.
+     */
+    name?: string;
+    /**
+     * If set to `false`, the DropDownList will not navigate over its data through left and right keys.
+     * Useful when the DropDownList is placed inside a toolbar which needs to handle left and right keys.
+     */
+    leftRightKeysNavigation?: boolean;
+    /**
+     * Configures the `size` of the DropDownList.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the DropDownList.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the DropDownList.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
+    /**
+     * Sets the data item field that represents the start of a group. Applicable to objects data.
+     */
+    groupField?: string;
+    /**
+     * Fires when a DropDownList's group header item is about to be rendered. Used to override the default appearance of the group's headers.
+     */
+    groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
+    /**
+     * Fires when a DropDownList's sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     */
+    groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
+    /**
+     * @hidden
+     */
+    list?: any;
+    /**
+     * @hidden
+     */
+    groupMode?: string;
+    /**
+     * Defines if DropDownList's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
+     */
+    skipDisabledItems?: boolean;
+}
+
+/**
+ * Represents the PropsContext of the `DropDownList` component.
+ * Used for global configuration of all `DropDownList` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export declare const DropDownListPropsContext: React_2.Context<(p: DropDownListProps) => DropDownListProps>;
+
+/**
+ * @hidden
+ */
+declare interface DropDownListState extends DropDownStateBase {
+    windowWidth?: number;
+}
+
+/**
+ * @hidden
+ */
+declare class DropDownListWithoutContext extends React_2.Component<DropDownListProps, DropDownListState> implements FormComponent {
+    static displayName: string;
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        value: PropTypes.Requireable<any>;
+        defaultValue: PropTypes.Requireable<any>;
+        filterable: PropTypes.Requireable<boolean>;
+        filter: PropTypes.Requireable<string>;
+        virtual: PropTypes.Requireable<PropTypes.InferProps<{
+            pageSize: PropTypes.Validator<number>;
+            skip: PropTypes.Validator<number>;
+            total: PropTypes.Validator<number>;
+        }>>;
+        onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
+        opened: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        dir: PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
+        accessKey: PropTypes.Requireable<string>;
+        data: PropTypes.Requireable<any[]>;
+        textField: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        loading: PropTypes.Requireable<boolean>;
+        popupSettings: PropTypes.Requireable<PropTypes.InferProps<{
+            animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+                openDuration: PropTypes.Requireable<number>;
+                closeDuration: PropTypes.Requireable<number>;
+            }> | null | undefined>>;
+            popupClass: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+            appendTo: PropTypes.Requireable<any>;
+            width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+            height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        }>>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        itemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
+        focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>;
+        header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        delay: PropTypes.Requireable<number>;
+        ignoreCase: PropTypes.Requireable<boolean>;
+        iconClassName: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
+        defaultItem: PropTypes.Requireable<any>;
+        valueRender: PropTypes.Requireable<(...args: any[]) => any>;
+        valueMap: PropTypes.Requireable<(...args: any[]) => any>;
+        validationMessage: PropTypes.Requireable<string>;
+        required: PropTypes.Requireable<boolean>;
+        id: PropTypes.Requireable<string>;
+        ariaLabelledBy: PropTypes.Requireable<string>;
+        ariaDescribedBy: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
+        leftRightKeysNavigation: PropTypes.Requireable<boolean>;
+        title: PropTypes.Requireable<string>;
+        groupField: PropTypes.Requireable<string>;
+        list: PropTypes.Requireable<any>;
+        skipDisabledItems: PropTypes.Requireable<boolean>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        required: boolean;
+        size: "small" | "large" | "medium" | null | undefined;
+        rounded: "small" | "large" | "medium" | "full" | null | undefined;
+        fillMode: "flat" | "solid" | "outline" | null | undefined;
+        groupMode: string | undefined;
+        popupSettings: {
+            height: string;
+        };
+        validityStyles: boolean;
+        delay: number;
+        tabIndex: number;
+        ignoreCase: boolean;
+    };
+    /**
+     * @hidden
+     */
+    readonly state: DropDownListState;
+    private _element;
+    private _typingTimeout;
+    protected readonly base: DropDownBase;
+    private searchState;
+    private _select;
+    private _skipFocusEvent;
+    private _filterInput;
+    private _valueDuringOnChange;
+    private _navigated;
+    private _lastKeypressIsFilter;
+    private get _inputId();
+    private get _listboxId();
+    private get _guid();
+    private itemHeight;
+    private observerResize?;
+    private get document();
+    constructor(props: DropDownListProps);
+    /**
+     * @hidden
+     */
+    focus: () => void;
+    /**
+     * @hidden
+     */
+    get element(): HTMLSpanElement | null;
+    /**
+     * The value of the DropDownList.
+     */
+    get value(): any;
+    /**
+     * The index of the selected item.
+     */
+    get index(): number;
+    /**
+     * Gets the `name` property of the DropDownList.
+     */
+    get name(): string | undefined;
+    /**
+     * Represents the validity state into which the DropDownList is set.
+     */
+    get validity(): FormComponentValidity;
+    protected get validityStyles(): boolean;
+    /**
+     * @hidden
+     */
+    protected get required(): boolean;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(prevProps: DropDownListProps, prevState: DropDownListState): void;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /** @hidden */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    /**
+     * @hidden
+     */
+    handleItemSelect: (index: number, state: InternalState) => void;
+    /**
+     * @hidden
+     */
+    onNavigate(state: InternalState, keyCode: number, skipItems?: number): void;
+    private componentRef;
+    private dummySelect;
+    private renderAdaptiveListContainer;
+    private renderListContainer;
+    private renderList;
+    private onScroll;
+    private renderListFilter;
+    private renderDefaultItem;
+    private search;
+    private selectNext;
+    private handleKeyDown;
+    private handleItemClick;
+    private handleFocus;
+    private handleBlur;
+    private handleDefaultItemClick;
+    private handleWrapperClick;
+    private handleKeyPress;
+    private handleListFilterChange;
+    private onPopupOpened;
+    private onPopupClosed;
+    private getFocusedIndex;
+    private focusElement;
+    private setValidity;
+    private triggerOnChange;
+    private applyState;
+    private calculateMedia;
+    private resetValueIfDisabledItem;
+    private haveFocusedItemAndDataNotEmpty;
+}
+export { DropDownListWithoutContext as DropDownListClassComponent }
+export { DropDownListWithoutContext }
+
+/**
+ * @hidden
+ */
+export declare const dropdownsMessages: {
+    "dropdowns.clear": string;
+    "dropdowns.nodata": string;
+    "dropdowns.comboArrowBtnAriaLabelExpand": string;
+    "dropdowns.comboArrowBtnAriaLabelCollapse": string;
+    "dropdowns.dropDownListArrowBtnAriaLabel": string;
+    "dropdowns.apply": string;
+    "dropdowns.cancel": string;
+};
+
+/**
+ * The settings of the popup container.
+ */
+export declare interface DropDownsPopupSettings extends PopupProps {
+    /**
+     * Specifies a list of CSS classes that are used for styling the popup inner element.
+     */
+    popupClass?: string;
+    /**
+     * Sets the width of the popup container. By default, the width of the host element is used.
+     */
+    width?: string | number;
+    /**
+     * Sets the height of the DOM element inside the DropDowns' popup that contains the data items of each component. This height doesn't include the header and footer.
+     */
+    height?: string | number;
+    /**
+     * Defines the container to which the Popup will be appended.
+     * Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
+     * * If set to `null` the Popup will be rendered without React Portal.
+     */
+    appendTo?: HTMLElement | null;
+}
+
+/**
+ * @hidden
+ */
+declare interface DropDownStateBase {
+    /**
+     * Input element text of the Component.
+     */
+    text?: string;
+    value?: any;
+    focused?: boolean;
+    opened?: boolean;
+    group?: string;
+}
+
+/**
+ * Represents the DropDownTree component.
+ *
+ * Accepts properties of type [DropDownTreeProps]({% slug api_dropdowns_dropdowntreeprops %}).
+ * Obtaining the `ref` returns an object of type [DropDownTreeHandle]({% slug api_dropdowns_dropdowntreehandle %}).
+ *
+ * @example
+ * ```jsx
+ * const selectField = "selected";
+ * const expandField = "expanded";
+ * const dataItemKey = "id";
+ * const textField = "text";
+ * const subItemsField = "items";
+ * const fields = {
+ *  selectField,
+ *  expandField,
+ *  dataItemKey,
+ *  subItemsField,
+ * };
+ *  const App = () => {
+ *  const [value, setValue] = React.useState(null);
+ *  const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
+ *  const onChange = (event) => setValue(event.value);
+ *  const onExpandChange = React.useCallback(
+ *    (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
+ *    [expanded]
+ *  );
+ *  const treeData = React.useMemo(
+ *    () =>
+ *      processTreeData(
+ *        data,
+ *        {
+ *          expanded,
+ *          value,
+ *        },
+ *        fields
+ *      ),
+ *    [expanded, value]
+ *  );
+ *
+ *  return (
+ *      <DropDownTree
+ *        style={{
+ *          width: '300px',
+ *        }}
+ *        placeholder="Please select ..."
+ *        data={treeData}
+ *        value={value}
+ *        onChange={onChange}
+ *        textField={textField}
+ *        dataItemKey={dataItemKey}
+ *        selectField={selectField}
+ *        expandField={expandField}
+ *        onExpandChange={onExpandChange}
+ *      />
+ *  );
+ * };
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const DropDownTree: React_2.ForwardRefExoticComponent<DropDownTreeProps & React_2.RefAttributes<DropDownTreeHandle | null>>;
+
+/**
+ * Represents the object of the `onBlur` DropDownTree event.
+ */
+export declare interface DropDownTreeBlurEvent extends BlurEvent<DropDownTreeHandle> {
+}
+
+/**
+ * Represents the object of the `onChange` DropDownTree event.
+ */
+export declare interface DropDownTreeChangeEvent extends ChangeEvent<DropDownTreeHandle> {
+    level: number[];
+}
+
+/**
+ * Represents the object of the `onClose` DropDownTree event.
+ */
+export declare interface DropDownTreeCloseEvent extends CloseEvent_2<DropDownTreeHandle> {
+}
+
+/**
+ * Represents the object of the `onExpandChange` DropDownTree event.
+ */
+export declare interface DropDownTreeExpandEvent extends DropdownEvent<DropDownTreeHandle> {
+    item: any;
+    level: number[];
+}
+
+/**
+ * Represents the object of the `onFilterChange` DropDownTree event.
+ */
+export declare interface DropDownTreeFilterChangeEvent extends FilterChangeEvent<DropDownTreeHandle> {
+}
+
+/**
+ * Represents the object of the `onFocus` DropDownTree event.
+ */
+export declare interface DropDownTreeFocusEvent extends FocusEvent_2<DropDownTreeHandle> {
+}
+
+/**
+ * Represents the Object which is passed to the
+ * [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) callback of the DropDownTree component.
+ */
+export declare interface DropDownTreeHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLElement | null;
+    /**
+     * The props of the DropDownTree component.
+     */
+    props: DropDownTreeProps;
+    /**
+     * The focus function.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represents the object of the `onOpen` DropDownTree event.
+ */
+export declare interface DropDownTreeOpenEvent extends OpenEvent<DropDownTreeHandle> {
+}
+
+/**
+ * Represents the props of the [KendoReact DropDownTree component]({% slug overview_dropdowntree %}).
+ */
+export declare interface DropDownTreeProps extends FormComponentProps {
+    /**
+     * Sets the data of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
+     */
+    data?: any[];
+    /**
+     * Sets the opened state of the DropDownTree.
+     */
+    opened?: boolean;
+    /**
+     * The styles that are applied to the DropDownTree.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the value of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
+     * It can be an object from the data-tree.
+     */
+    value?: any;
+    /**
+     * The hint that is displayed when the DropDownTree is empty.
+     */
+    placeholder?: string;
+    /**
+     * Sets the key for comparing the data items of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
+     * If `dataItemKey` is not set, the DropDownTree compares the items by reference.
+     */
+    dataItemKey: string;
+    /**
+     * Sets additional classes to the DropDownTree.
+     */
+    className?: string;
+    /**
+     * Sets the disabled state of the DropDownTree.
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Renders a floating label for the DropDownTree.
+     */
+    label?: string;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Enables the filtering functionality of the DropDownTree ([more information and examples]({% slug filtering_dropdowntree %})).
+     */
+    filterable?: boolean;
+    /**
+     * Sets the value of filtering input.
+     * Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     */
+    filter?: string;
+    /**
+     * Sets the loading state of the DropDownTree ([see example]({% slug filtering_dropdowntree %}#toc-visualize-filtering)).
+     */
+    loading?: boolean;
+    /**
+     * Specifies the `tabIndex` of the DropDownTree.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the DropDownTree.
+     */
+    accessKey?: string;
+    /**
+     * Sets the data item field that represents the item text ([see example]({% slug overview_dropdowntree %})).
+     */
+    textField: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the selected state of the item.
+     */
+    selectField?: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
+     */
+    expandField?: string;
+    /**
+     * Specifies the name of the field which will provide an array representation of the item subitems.
+     * Defaults to 'items'.
+     */
+    subItemsField?: string;
+    /**
+     * Configures the popup of the DropDownTree.
+     */
+    popupSettings?: DropDownsPopupSettings;
+    /**
+     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
+     *
+     * @example
+     * ```jsx-no-run
+     * class App extends React.Component {
+     *    render() {
+     *       return (
+     *          <form>
+     *              <DropDownTree
+     *                  data={[ { text: "Austria", id: 1 } , { text: "Belarus", id: 2 } ]}
+     *                  valueMap={value => value && value.id}
+     *              />
+     *              <button type="submit">Submit</button>
+     *          </form>
+     *       );
+     *    }
+     * }
+     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * ```
+     */
+    valueMap?: (value: any) => any;
+    /**
+     * Fires each time the popup of the DropDownTree is about to open.
+     */
+    onOpen?: (event: DropDownTreeOpenEvent) => void;
+    /**
+     * Fires each time the popup of the DropDownTree is about to close.
+     */
+    onClose?: (event: DropDownTreeCloseEvent) => void;
+    /**
+     * Fires each time the user focuses the DropDownTree.
+     */
+    onFocus?: (event: DropDownTreeFocusEvent) => void;
+    /**
+     * Fires each time the DropDownTree gets blurred.
+     */
+    onBlur?: (event: DropDownTreeBlurEvent) => void;
+    /**
+     * Fires each time the value of the DropDownTree is about to change ([see examples]({% slug overview_dropdowntree %})).
+     */
+    onChange?: (event: DropDownTreeChangeEvent) => void;
+    /**
+     * Fires each time the user types in the filter input
+     * ([see example]({% slug filtering_dropdowntree %}#toc-basic-configuration)).
+     * You can filter the source based on the passed filtration value.
+     */
+    onFilterChange?: (event: DropDownTreeFilterChangeEvent) => void;
+    /**
+     * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_dropdowntree %})).
+     */
+    onExpandChange?: (event: any) => void;
+    /**
+     * Defines the component that will be used for rendering each of the DropDownTree items
+     * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+     */
+    item?: React.ComponentType<ItemProps>;
+    /**
+     * Defines the component that will be used for rendering the selected value
+     * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+     */
+    valueHolder?: React.ComponentType<ValueHolderProps>;
+    /**
+     * Defines the component that will be rendered in the DropDownTree popup when no data is available
+     * ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)).
+     */
+    listNoData?: React.ComponentType<ListNoDataProps>;
+    /**
+     * Configures the `size` of the DropDownTree.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the DropDownTree.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the DropDownTree.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
+}
+
+/**
+ * Represents the PropsContext of the `DropDownTree` component.
+ * Used for global configuration of all `DropDownTree` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export declare const DropDownTreePropsContext: React_2.Context<(p: DropDownTreeProps) => DropDownTreeProps>;
+
+/**
+ * @hidden
+ */
+declare interface EventData {
+    type?: string;
+    filter?: FilterDescriptor;
+    page?: Page;
+    suggestion?: Suggestion;
+}
+
+/**
+ * @hidden
+ */
+declare interface FilterChangeEvent<T> extends DropdownEvent<T> {
+    /**
+     * A React [`SyntheticEvent`](https://reactjs.org/docs/events.html).
+     */
+    syntheticEvent: React.ChangeEvent<HTMLInputElement>;
+    /**
+     * The default `FilterDescriptor` object.
+     */
+    filter: FilterDescriptor;
+}
+
+/**
+ * A basic filter expression. Usually a part of [`CompositeFilterDescriptor`]({% slug api_kendo-data-query_compositefilterdescriptor %}).
+ *
+ * For more information, refer to the [`filterBy`]({% slug api_kendo-data-query_filterby %}) method.
+ */
+declare interface FilterDescriptor {
+    /**
+     * The field of the data item to which the filter operator is applied.
+     */
+    field?: string | Function;
+    /**
+     * The filter operator (comparison).
+     *
+     * The supported operators are:
+     * * `"eq"` (equal to)
+     * * `"neq"` (not equal to)
+     * * `"isnull"` (is equal to null)
+     * * `"isnotnull"` (is not equal to null)
+     * * `"lt"` (less than)
+     * * `"lte"` (less than or equal to)
+     * * `"gt"` (greater than)
+     * * `"gte"` (greater than or equal to)
+     *
+     * The following operators are supported for string fields only:
+     * * `"startswith"`
+     * * `"endswith"`
+     * * `"contains"`
+     * * `"doesnotcontain"`
+     * * `"isempty"`
+     * * `"isnotempty"`
+     */
+    operator: string | Function;
+    /**
+     * The value to which the field is compared. Has to be of the same type as the field.
+     */
+    value?: any;
+    /**
+     * Determines if the string comparison is case-insensitive.
+     */
+    ignoreCase?: boolean;
+}
+
+/**
+ * Find item in the data by field and value.
+ */
+export declare const findByFieldValue: (data: any[], field: string, value: string | number | null) => any;
+
+/**
+ * @hidden
+ */
+declare interface FocusEvent_2<T> extends DropdownEvent<T> {
+}
+
+export { FormComponentValidity }
+
+/**
+ * Get the value of the item by its field.
+ */
+export declare const getItemValue: (item: any, field?: string) => any;
+
+/**
+ * Get MultiSelectTree new value from the component `onChange` event.
+ *
+ * @param {any[]} data
+ * @param {object} options
+ * @returns {any[]}
+ */
+export declare const getMultiSelectTreeValue: (data: any[], options: {
+    subItemsField?: string;
+    dataItemKey: string;
+    items: any;
+    value: Array<any>;
+    operation: MultiSelectTreeChangeEventOperation;
+}) => any[];
+
+/** @hidden */
+export declare const getValueMap: (value: any[], idGetter: any) => any;
+
+/**
+ * Represents the props of the GroupStickyHeader component.
+ */
+export declare interface GroupStickyHeaderProps {
+    /**
+     * The group that will be rendered.
+     */
+    group?: string;
+    /**
+     * @hidden
+     */
+    groupMode?: string;
+    /**
+     * Fires when a ComboBox sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     */
+    render?: (div: React_2.ReactElement<HTMLDivElement>, itemProps: GroupStickyHeaderProps) => React_2.ReactNode;
+}
+
+/**
+ * @hidden
+ */
+declare interface InternalState {
+    data: DropDownStateBase;
+    events: Array<EventData>;
+    syntheticEvent: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | React.FormEvent<HTMLInputElement> | React.KeyboardEvent<HTMLElement> | undefined;
+}
+
+/**
+ * The props of component that will be used for rendering each of the DropDownTree items
+ * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+ */
+export declare interface ItemProps extends ItemRenderProps {
+}
+
+/**
+ * @hidden
+ */
+export declare class List extends React_2.Component<ListProps> {
+    renderItems(): (false | JSX_2.Element)[][];
+    renderNoValueElement(localizationService: LocalizationService): string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
+    render(): string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
+}
+
+/**
+ * @hidden
+ */
+export declare class ListContainer extends React_2.Component<ListContainerProps, {}> {
+    render(): JSX_2.Element;
+}
+
+/**
+ * @hidden
+ */
+declare interface ListContainerProps {
+    width?: string | number;
+    dir?: string;
+    popupSettings?: PopupProps;
+    itemsCount?: number[];
+    children?: React_2.ReactNode;
+}
+
+/**
+ * @hidden
+ */
+export declare const ListFilter: React_2.ForwardRefExoticComponent<ListFilterProps & React_2.RefAttributes<TextBoxHandle | null>>;
+
+/**
+ * @hidden
+ */
+declare interface ListFilterProps {
+    value?: string | number | readonly string[] | undefined;
+    tabIndex?: number;
+    onChange?: (event: TextBoxChangeEvent) => void;
+    onKeyDown?: React_2.KeyboardEventHandler<HTMLInputElement>;
+    size?: null | 'small' | 'medium' | 'large';
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    fillMode?: null | 'solid' | 'flat' | 'outline';
+}
+
+/**
+ * Represents the props of the ListGroupItem component.
+ */
+export declare interface ListGroupItemProps {
+    /**
+     * Specifies the id that will be added to the group header item element.
+     */
+    id?: string;
+    /**
+     * The group that will be rendered.
+     */
+    group?: string;
+    /**
+     * @hidden
+     */
+    virtual?: boolean;
+    /**
+     * @hidden
+     * Provides information if the rendered list is a multicolumn popup
+     */
+    isMultiColumn?: boolean;
+    /**
+     * Fires when the group header item is about to be rendered. Used to override the default appearance of the group header item.
+     */
+    render?: (li: React_2.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React_2.ReactNode;
+}
+
+/**
+ * @hidden
+ */
+export declare class ListItem extends React_2.Component<ListItemProps, {}> {
+    handleClick: React_2.MouseEventHandler<HTMLLIElement>;
+    render(): string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
+}
+
+/**
+ * Represents the props of the ListItem component.
+ */
+export declare interface ListItemProps {
+    /**
+     * Specifies the id that will be added to the list item element.
+     */
+    id?: string;
+    /**
+     * Represents the index of the list item element.
+     */
+    index: number;
+    /**
+     * Represents the data item of the list item element.
+     */
+    dataItem: any;
+    /**
+     * Represents the `classic` or `modern` grouping mode of the DropDowns. Defaults to `classic`.
+     */
+    groupMode: any;
+    /**
+     * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
+     */
+    textField?: string;
+    /**
+     * The group that will be rendered.
+     */
+    group?: string;
+    /**
+     * Indicates the focused state of the list item element.
+     */
+    focused: boolean;
+    /**
+     * Indicates the selected state of the list item element.
+     */
+    selected: boolean;
+    /**
+     * Indicates the disabled/enabled state of the list item element.
+     */
+    disabled?: boolean;
+    /**
+     * @hidden
+     */
+    virtual?: boolean;
+    /**
+     * Fires when the list item is about to be rendered. Used to override the default appearance of the list item.
+     */
+    render?: (li: React_2.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React_2.ReactNode;
+    /**
+     * The `onClick` event handler of the list item element.
+     */
+    onClick: (index: number, event: React_2.MouseEvent<HTMLLIElement>) => void;
+}
+
+/**
+ * The props of the `ListNoData` component ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)).
+ */
+export declare interface ListNoDataProps {
+    children?: React.ReactNode;
+}
+
+/**
+ * @hidden
+ */
+declare interface ListProps {
+    id?: string;
+    virtual?: boolean;
+    show?: boolean;
+    data: any[];
+    value?: any;
+    textField?: string;
+    valueField?: string;
+    groupField?: string;
+    groupMode?: string;
+    isMultiColumn?: boolean;
+    optionsGuid?: string;
+    listRef?: React_2.Ref<HTMLUListElement>;
+    wrapperRef?: React_2.Ref<HTMLDivElement>;
+    wrapperCssClass?: string;
+    wrapperStyle?: React_2.CSSProperties;
+    listStyle?: React_2.CSSProperties;
+    listClassName?: string;
+    skip?: number;
+    focusedIndex?: number;
+    highlightSelected?: boolean;
+    ariaSetSize?: number;
+    onClick: (index: number, event: React_2.MouseEvent<HTMLLIElement>) => void;
+    itemRender?: (li: React_2.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React_2.ReactNode;
+    groupHeaderItemRender?: (li: React_2.ReactElement<HTMLLIElement>, groupItemProps: ListGroupItemProps) => React_2.ReactNode;
+    noDataRender?: (element: React_2.ReactElement<HTMLDivElement>) => React_2.ReactNode;
+    onMouseDown?: (event: React_2.MouseEvent<HTMLDivElement>) => void;
+    onBlur?: (event: React_2.FocusEvent<HTMLDivElement>) => void;
+    onScroll?: (event: React_2.UIEvent<HTMLDivElement>) => void;
+    scroller?: any;
+}
+
+/**
+ * Represents the MultiColumnComboBox component.
+ *
+ * Accepts properties of type [MultiColumnComboBoxProps]({% slug api_dropdowns_multicolumncomboboxprops %}).
+ * Obtaining the `ref` returns an object of type [MultiColumnComboBoxHandle]({% slug api_dropdowns_multicolumncomboboxhandle %}).
+ *
+ * @example
+ * ```jsx
+ * const columns = [
+ *  {
+ *    field: "id",
+ *    header: "ID",
+ *    width: "100px",
+ *  },
+ *  {
+ *    field: "name",
+ *    header: "Name",
+ *    width: "300px",
+ *  },
+ *  {
+ *    field: "position",
+ *    header: "Position",
+ *    width: "300px",
+ *   },
+ * ];
+ * const App = () => {
+ *   return (
+ *     <div>
+ *       <div>Employees:</div>
+ *       <MultiColumnComboBox
+ *         data={employees}
+ *         columns={columns}
+ *         textField={"name"}
+ *         style={{
+ *           width: "300px",
+ *         }}
+ *         placeholder="Please select ..."
+ *       />
+ *     </div>
+ *   );
+ * };
+ * ReactDOM.render(<App />, document.querySelector("my-app"));
+ * ```
+ */
+export declare const MultiColumnComboBox: React_2.ForwardRefExoticComponent<MultiColumnComboBoxProps & React_2.RefAttributes<MultiColumnComboBoxHandle | null>>;
+
+/**
+ * Represents the type of the MultiColumnComboBoxChangeEvent.
+ */
+export declare interface MultiColumnComboBoxChangeEvent {
+    /**
+     * The value of the MultiColumnComboBoxChangeEvent.
+     */
+    value: any;
+    /**
+     * The target of the MultiColumnComboBoxChangeEvent from MultiColumnComboBoxHandle.
+     */
+    target: MultiColumnComboBoxHandle;
+    /**
+     * The event of the MultiColumnComboBoxChangeEvent.
+     */
+    syntheticEvent: React_2.SyntheticEvent<any>;
+}
+
+/**
+ * The represents the interface of the MultiColumnComboBox columns.
+ */
+export declare interface MultiColumnComboBoxColumn {
+    /**
+     * The unique id of the column.
+     */
+    uniqueKey?: string;
+    /**
+     * The field of the column.
+     */
+    field?: string;
+    /**
+     * The header of the column.
+     */
+    header?: React_2.ReactNode;
+    /**
+     * Represents the width of the column. If the width is not specified it is applied the default width of `200px`.
+     */
+    width?: string | number;
+}
+
+/**
+ * Represents the target(element and props) of the MultiColumnComboBoxChangeEvent.
+ */
+export declare interface MultiColumnComboBoxHandle {
+    /**
+     * The current element or `null` of there is no one.
+     */
+    element: HTMLSpanElement | null;
+    /**
+     * The value of the MultiColumnComboBox.
+     */
+    value: any;
+    /**
+     * The props values of the MultiColumnComboBox.
+     */
+    props: MultiColumnComboBoxProps;
+    /**
+     * The focus event callback.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represents the properties of the [MultiColumnComboBox]({% slug api_dropdowns_multicolumncombobox %}) component.
+ */
+export declare interface MultiColumnComboBoxProps extends ComboBoxProps {
+    /**
+     * Determines the columns array of the MultiColumnComboBox.
+     */
+    columns: MultiColumnComboBoxColumn[];
+    /**
+     * Sets the data of the MultiColumnComboBox.
+     */
+    data?: any[];
+    /**
+     * Sets the opened and closed state of the MultiColumnComboBox.
+     */
+    opened?: boolean;
+    /**
+     * The styles that are applied to the MultiColumnComboBox.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets the value of the MultiColumnComboBox. It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     */
+    value?: any;
+    /**
+     * Sets the default value of the MultiColumnComboBox. Similar to the native `select` HTML element.
+     */
+    defaultValue?: any;
+    /**
+     * Sets additional classes to the MultiColumnComboBox.
+     */
+    className?: string;
+    /**
+     * If `clearButton` is set to `true`, the MultiColumnComboBox renders a button on hovering over the component. Clicking this button resets the value of the MultiColumnComboBox to `undefined` and triggers the `change` event.
+     */
+    clearButton?: boolean;
+    /**
+     * The hint that is displayed when the MultiColumnComboBox is empty.
+     */
+    placeholder?: string;
+    /**
+     * Specifies whether the MultiColumnComboBox allows user-defined values that are not present in the dataset. Defaults to `false`.
+     */
+    allowCustom?: boolean;
+    /**
+     * Sets the disabled state of the MultiColumnComboBox.
+     */
+    disabled?: boolean;
+    /**
+     * Enables the filtering functionality of the MultiColumnComboBox.
+     */
+    filterable?: boolean;
+    /**
+     * Sets the value of MultiColumnComboBox input. Useful for making the MultiColumnComboBox input a controlled component.
+     */
+    filter?: string | null;
+    /**
+     * Sets the loading state of the MultiColumnComboBox.
+     */
+    loading?: boolean;
+    /**
+     * Specifies the `tabIndex` of the MultiColumnComboBox.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the MultiColumnComboBox.
+     */
+    accessKey?: string;
+    /**
+     * Sets the key for comparing the data items of the MultiColumnComboBox. If `dataItemKey` is not set, the MultiColumnComboBox compares the items by reference.
+     */
+    dataItemKey?: string;
+    /**
+     * Renders a floating label for the MultiColumnComboBox.
+     */
+    label?: string;
+    /**
+     * Configures the popup of the MultiColumnComboBox.
+     */
+    popupSettings?: DropDownsPopupSettings;
+    /**
+     * Configures the virtual scrolling of the MultiColumnComboBox.
+     */
+    virtual?: VirtualizationSettings;
+    /**
+     * If set, the MultiColumnComboBox will use it to get the focused item index. Default functionality returns the first item which starts with the input text.
+     */
+    focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
+    /**
+     * Fires each time the popup of the MultiColumnComboBox is about to open.
+     */
+    onOpen?: (event: ComboBoxOpenEvent) => void;
+    /**
+     * Fires each time the popup of the MultiColumnComboBox is about to close.
+     */
+    onClose?: (event: ComboBoxCloseEvent) => void;
+    /**
+     * Fires each time the user focuses the MultiColumnComboBox.
+     */
+    onFocus?: (event: ComboBoxFocusEvent) => void;
+    /**
+     * Fires each time the MultiColumnComboBox gets blurred.
+     */
+    onBlur?: (event: ComboBoxBlurEvent) => void;
+    /**
+     * Fires each time the value of the MultiColumnComboBox is about to change.
+     */
+    onChange?: (event: ComboBoxChangeEvent) => void;
+    /**
+     * Fires each time the user types in the filter input. You can filter the source based on the passed filtration value.
+     */
+    onFilterChange?: (event: ComboBoxFilterChangeEvent) => void;
+    /**
+     * Fires when both the virtual scrolling of the MultiColumnComboBox is enabled and the component requires data for another page.
+     */
+    onPageChange?: (event: ComboBoxPageChangeEvent) => void;
+    /**
+     * @hidden
+     */
+    onGroupScroll?: (event: {
+        group?: string;
+    }) => void;
+    /**
+     * Fires when a MultiColumnComboBox list item is about to be rendered. Used to override the default appearance of the list items.
+     */
+    itemRender?: (li: React_2.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React_2.ReactNode;
+    /**
+     * Sets the header component of the MultiColumnComboBox.
+     */
+    header?: React_2.ReactNode;
+    /**
+     * Sets the footer component of the MultiColumnComboBox.
+     */
+    footer?: React_2.ReactNode;
+    /**
+     * Configures the `size` of the MultiColumnComboBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the MultiColumnComboBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the MultiColumnComboBox.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Sets a custom prefix to the MultiColumnComboBox component.
+     */
+    prefix?: CustomComponent<any> | undefined;
+    /**
+     * Sets a custom suffix to the MultiColumnComboBox component.
+     */
+    suffix?: CustomComponent<any> | undefined;
+}
+
+/**
+ * Represents the PropsContext of the `MultiColumnComboBox` component.
+ * Used for global configuration of all `MultiColumnComboBox` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export declare const MultiColumnComboBoxPropsContext: React_2.Context<(p: MultiColumnComboBoxProps) => MultiColumnComboBoxProps>;
+
+/** @hidden */
+export declare type MultiSelect = MultiSelectHandle;
+
+/**
+ * Represents the [KendoReact MultiSelect component]({% slug overview_multiselect %}).
+ *
+ * Accepts properties of type [MultiSelectProps]({% slug api_dropdowns_multiselectprops %}).
+ * Obtaining the `ref` returns an object of type [MultiSelectHandle]({% slug api_dropdowns_multiselecthandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    multiselect = null;
+ *    render() {
+ *       return (
+ *          <div>
+ *              <MultiSelect
+ *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
+ *                  ref={component => this.multiselect = component}
+ *              />
+ *              <button onClick={() => alert(this.multiselect.value)}>alert value</button>
+ *          </div>
+ *       );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const MultiSelect: React_2.ForwardRefExoticComponent<MultiSelectProps & React_2.RefAttributes<any>>;
+
+/**
+ * Represents the object of the `blur` MultiSelect event.
+ */
+export declare interface MultiSelectBlurEvent extends BlurEvent<MultiSelect> {
+}
+
+/**
+ * Represents the object of the `onCancel` MultiSelect event.
+ */
+declare interface MultiSelectCancelEvent extends CancelEvent<MultiSelect> {
+}
+
+/**
+ * Represents the object of the `change` MultiSelect event.
+ */
+export declare interface MultiSelectChangeEvent extends ChangeEvent<MultiSelect> {
+}
+
+/**
+ * Represents the object of the `close` MultiSelect event.
+ */
+export declare interface MultiSelectCloseEvent extends CloseEvent_2<MultiSelect> {
+}
+
+/**
+ * Represents the object of the `filterChange` MultiSelect event.
+ */
+export declare interface MultiSelectFilterChangeEvent extends FilterChangeEvent<MultiSelect> {
+}
+
+/**
+ * Represents the object of the `focus` MultiSelect event.
+ */
+export declare interface MultiSelectFocusEvent extends FocusEvent_2<MultiSelect> {
+}
+
+/**
+ * Represent the `ref` of the MultiSelect component.
+ */
+export declare interface MultiSelectHandle extends Pick<MultiSelectWithoutContext, keyof MultiSelectWithoutContext> {
+    /**
+     * Gets the `name` property of the MultiSelect.
+     */
+    name: string | undefined;
+    /**
+     * Represents the validity state into which the MultiSelect is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * Represents the value of the MultiSelect.
+     */
+    value: Array<any>;
+}
+
+/** @hidden */
+declare interface MultiSelectInternalState extends InternalState {
+    data: MultiSelectState;
+}
+
+/**
+ * Represents the object of the `open` MultiSelect event.
+ */
+export declare interface MultiSelectOpenEvent extends OpenEvent<MultiSelect> {
+}
+
+/**
+ * Represents the object of the `pageChange` MultiSelect event.
+ */
+export declare interface MultiSelectPageChangeEvent extends PageChangeEvent<MultiSelect> {
+}
+
+/**
+ * Represents the props of the [KendoReact MultiSelect component]({% slug overview_multiselect %}).
+ */
+export declare interface MultiSelectProps extends FormComponentProps {
+    /**
+     * Specifies whether the MultiSelect allows user-defined values that are not present in the dataset ([see example]({% slug custom_values_multiselect %})). Defaults to `false`.
+     */
+    allowCustom?: boolean;
+    /**
+     * Sets the data of the MultiSelect ([see example]({% slug binding_multiselect %})).
+     */
+    data?: any[];
+    /**
+     * Sets the opened and closed state of the MultiSelect.
+     */
+    opened?: boolean;
+    /**
+     * Determines whether to close the options list of the MultiSelect after the item selection is finished.
+     *
+     * @example
+     * ```jsx
+     * class App extends React.Component {
+     *    render() {
+     *       return (
+     *              <MultiSelect
+     *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
+     *                  autoClose={false}
+     *              />
+     *       );
+     *    }
+     * }
+     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * ```
+     *
+     * @default true
+     */
+    autoClose?: boolean;
+    /**
+     * The styles that are applied to the MultiSelect.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the value of the MultiSelect ([see example]({% slug binding_multiselect %})). It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     */
+    value?: Array<any>;
+    /**
+     * The hint that is displayed when the MultiSelect is empty.
+     */
+    placeholder?: string;
+    /**
+     * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
+     */
+    tags?: Array<TagData>;
+    /**
+     * Sets the key for comparing the data items of the MultiSelect ([see example]({% slug binding_multiselect %}#toc-datasets-of-objects)). If `dataItemKey` is not set, the MultiSelect compares the items by reference.
+     */
+    dataItemKey?: string;
+    /**
+     * Sets the default value of the MultiSelect. Similar to the native `select` HTML element.
+     */
+    defaultValue?: Array<any>;
+    /**
+     * Sets additional classes to the MultiSelect.
+     */
+    className?: string;
+    /**
+     * Sets the disabled state of the MultiSelect.
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Enables the filtering functionality of the MultiSelect ([more information and examples]({% slug filtering_multiselect %})).
+     */
+    filterable?: boolean;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * If set, the MultiSelect will use it to get the focused item index.
+     *
+     * Default functionality returns the first item which starts with the input text.
+     *
+     * @example
+     * ```jsx-no-run
+     * const focusedItemIndex = (data, inputText, textField) => {
+     *     let text = inputText.toLowerCase();
+     *     return data.findIndex(item =>
+     *         String(textField ? item[textField] : item).toLowerCase().includes(text));
+     * };
+     *
+     * <MultiSelect focusedItemIndex={focusedItemIndex} />
+     * ```
+     */
+    focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
+    /**
+     * Sets the value of filtering input. Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     */
+    filter?: string;
+    /**
+     * Sets the value of the adaptive filtering input of the of MultiSelect.
+     */
+    adaptiveFilter?: string;
+    /**
+     * Sets the loading state of the MultiSelect ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)).
+     */
+    loading?: boolean;
+    /**
+     * Specifies the `tabIndex` of the MultiSelect.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the MultiSelect.
+     */
+    accessKey?: string;
+    /**
+     * Sets the data item field that represents the item text ([see example]({% slug binding_multiselect %}#toc-datasets-of-objects)). If the data contains only primitive values, do not define it.
+     */
+    textField?: string;
+    /**
+     * Renders a floating label for the MultiSelect.
+     */
+    label?: string;
+    /**
+     * Configures the popup of the MultiSelect.
+     */
+    popupSettings?: DropDownsPopupSettings;
+    /**
+     * Configures the virtual scrolling of the MultiSelect ([see example]({% slug virtualization_multiselect %})).
+     */
+    virtual?: VirtualizationSettings;
+    /**
+     * Fires each time the popup of the MultiSelect is about to open.
+     */
+    onOpen?: (event: MultiSelectOpenEvent) => void;
+    /**
+     * Fires each time the popup of the MultiSelect is about to close.
+     */
+    onClose?: (event: MultiSelectCloseEvent) => void;
+    /**
+     * Fires each time the user focuses the MultiSelect.
+     */
+    onFocus?: (event: MultiSelectFocusEvent) => void;
+    /**
+     * Fires each time the MultiSelect gets blurred.
+     */
+    onBlur?: (event: MultiSelectBlurEvent) => void;
+    /**
+     * Fires each time the value of the MultiSelect is about to change ([see examples]({% slug binding_multiselect %})).
+     */
+    onChange?: (event: MultiSelectChangeEvent) => void;
+    /**
+     * Fires each time the popup of the MultiSelect is about to cancel in ([adaptive mode]({% slug adaptive_rendering_multiselect %})).
+     */
+    onCancel?: (event: MultiSelectCancelEvent) => void;
+    /**
+     * Fires each time the user types in the filter input ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)). You can filter the source based on the passed filtration value.
+     */
+    onFilterChange?: (event: MultiSelectFilterChangeEvent) => void;
+    /**
+     * Fires when both the virtual scrolling of the MultiSelect is enabled and when the component requires data for another page ([see example]({% slug virtualization_multiselect %})).
+     */
+    onPageChange?: (event: MultiSelectPageChangeEvent) => void;
+    /**
+     * Fires when a MultiSelect item is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-items)). Used to override the default appearance of the list items.
+     */
+    itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
+    /**
+     * Fires when the element which indicates no data in the popup is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-no-data)). Used to override the default appearance of the element.
+     */
+    listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
+    /**
+     * Fires when a tag element is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-tags)). Used to override the default appearance of the element.
+     */
+    tagRender?: (tagData: TagData, tag: React.ReactElement) => React.ReactElement;
+    /**
+     * Sets the header component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
+     */
+    header?: React.ReactNode;
+    /**
+     * Sets the footer component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
+     */
+    footer?: React.ReactNode;
+    /**
+     * Configures the `size` of the MultiSelect.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the MultiSelect.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the MultiSelect.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Sets the data item field that represents the start of a group. Applicable to objects data.
+     */
+    groupField?: string;
+    /**
+     * Fires when a DropDownList's group header item is about to be rendered. Used to override the default appearance of the group's headers.
+     */
+    groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
+    /**
+     * Fires when a DropDownList's sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     */
+    groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
+    /**
+     * @hidden
+     */
+    list?: any;
+    /**
+     * @hidden
+     */
+    groupMode?: string;
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
+    /**
+     * Defines if MultiSelect's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
+     */
+    skipDisabledItems?: boolean;
+    /**
+     * Sets a custom prefix to the MultiSelect component.
+     */
+    prefix?: CustomComponent<any>;
+    /**
+     * Sets a custom suffix to the MultiSelect component.
+     */
+    suffix?: CustomComponent<any>;
+}
+
+/**
+ * Represents the PropsContext of the `MultiSelect` component.
+ * Used for global configuration of all `MultiSelect` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export declare const MultiSelectPropsContext: React_2.Context<(p: MultiSelectProps) => MultiSelectProps>;
+
+/** @hidden */
+declare interface MultiSelectState extends DropDownStateBase {
+    selectedItems?: Array<any>;
+    focusedIndex?: number;
+    focusedTag?: TagData;
+    activedescendant?: ActiveDescendant;
+    value?: Array<any>;
+    currentValue?: Array<any>;
+    windowWidth?: number;
+}
+
+/**
+ * Represents the MultiSelectTree component.
+ *
+ * Accepts properties of type [MultiSelectTreeProps]({% slug api_dropdowns_multiselecttreeprops %}).
+ * Obtaining the `ref` returns an object of type [MultiSelectTreeHandle]({% slug api_dropdowns_multiselecttreehandle %}).
+ *
+ * @example
+ * ```jsx
+ *   const dataItemKey = 'id';
+ *   const checkField = 'checkField';
+ *   const checkIndeterminateField = 'checkIndeterminateField';
+ *   const subItemsField = 'items';
+ *   const expandField = 'expanded';
+ *   const textField = 'text';
+ *   const fields = {
+ *    dataItemKey,
+ *    checkField,
+ *    checkIndeterminateField,
+ *    expandField,
+ *    subItemsField,
+ *   };
+ *   const App = () => {
+ *    const [value, setValue] = React.useState([]);
+ *    const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
+ *    const onChange = (event) =>
+ *       setValue(
+ *       getMultiSelectTreeValue(data, {
+ *           ...fields,
+ *           ...event,
+ *           value,
+ *       })
+ *       );
+ *   const onExpandChange = React.useCallback(
+ *       (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
+ *       [expanded]
+ *   );
+ *   const treeData = React.useMemo(
+ *       () =>
+ *       processMultiSelectTreeData(data, {
+ *           expanded,
+ *           value,
+ *           ...fields,
+ *       }),
+ *       [expanded, value]
+ *   );
+ *
+ *   return (
+ *       <div>
+ *       <div>Categories:</div>
+ *       <MultiSelectTree
+ *           style={{
+ *           width: '300px',
+ *           }}
+ *           data={treeData}
+ *           value={value}
+ *           onChange={onChange}
+ *           placeholder="Please select ..."
+ *           textField={textField}
+ *           dataItemKey={dataItemKey}
+ *           checkField={checkField}
+ *           checkIndeterminateField={checkIndeterminateField}
+ *           expandField={expandField}
+ *           subItemsField={subItemsField}
+ *           onExpandChange={onExpandChange}
+ *       />
+ *       </div>
+ *   );
+ *   };
+ *   ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const MultiSelectTree: React_2.ForwardRefExoticComponent<MultiSelectTreeProps & React_2.RefAttributes<MultiSelectTreeHandle | null>>;
+
+/**
+ * Represents the object of the `onBlur` MultiSelectTree event.
+ */
+export declare interface MultiSelectTreeBlurEvent extends BlurEvent<MultiSelectTreeHandle> {
+}
+
+/**
+ * Represents the object of the `onCancel` MultiSelectTree event.
+ */
+export declare interface MultiSelectTreeCancelEvent extends CancelEvent<MultiSelectTreeHandle> {
+}
+
+/**
+ * Represents the object of the `onChange` MultiSelectTree event.
+ */
+export declare interface MultiSelectTreeChangeEvent extends DropdownEvent<MultiSelectTreeHandle> {
+    /**
+     * The items related to current operation.
+     */
+    items: any[];
+    /**
+     * Describes the current operation:
+     * * `clear` - clear button is clicked and value is cleared. Null value is retured.
+     * * `delete` - tag is deleted using keyboard or mouse. The items contained in current tag are returned.
+     * * `toggle` - item in TreeView is toggled. Single item is returned.
+     */
+    operation: MultiSelectTreeChangeEventOperation;
+}
+
+export declare type MultiSelectTreeChangeEventOperation = 'clear' | 'delete' | 'toggle';
+
+/**
+ * Represents the object of the `onClose` MultiSelectTree event.
+ */
+export declare interface MultiSelectTreeCloseEvent extends CloseEvent_2<MultiSelectTreeHandle> {
+}
+
+/**
+ * Represents the object of the `onExpandChange` MultiSelectTree event.
+ */
+export declare interface MultiSelectTreeExpandEvent extends DropdownEvent<MultiSelectTreeHandle> {
+    item: any;
+    level: number[];
+}
+
+/**
+ * Represents the object of the `onFilterChange` MultiSelectTree event.
+ */
+export declare interface MultiSelectTreeFilterChangeEvent extends FilterChangeEvent<MultiSelectTreeHandle> {
+}
+
+/**
+ * Represents the object of the `onFocus` MultiSelectTree event.
+ */
+export declare interface MultiSelectTreeFocusEvent extends FocusEvent_2<MultiSelectTreeHandle> {
+}
+
+/**
+ * Represents the Object which is passed to the
+ * [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) callback of the MultiSelectTree component.
+ */
+export declare interface MultiSelectTreeHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLElement | null;
+    /**
+     * The props of the MultiSelectTree component.
+     */
+    props: MultiSelectTreeProps;
+    /**
+     * The focus function.
+     */
+    focus: () => void;
+}
+
+/**
+ * The props of component that will be used for rendering each of the MultiSelectTree items
+ * ([see example]({% slug customrendering_multiselecttree %}#toc-items-and-value-element)).
+ */
+export declare interface MultiSelectTreeItemProps extends ItemRenderProps {
+}
+
+/**
+ * The props of the `ListNoData` component ([see example]({% slug customrendering_multiselecttree %}#toc-no-data)).
+ */
+export declare interface MultiSelectTreeListNoDataProps {
+    children?: React_2.ReactNode;
+}
+
+/**
+ * Represents the object of the `onOpen` MultiSelectTree event.
+ */
+export declare interface MultiSelectTreeOpenEvent extends OpenEvent<MultiSelectTreeHandle> {
+}
+
+/**
+ * Represents the props of the [KendoReact MultiSelectTree component]({% slug overview_multiselecttree %}).
+ */
+export declare interface MultiSelectTreeProps extends FormComponentProps {
+    /**
+     * Sets the data of the MultiSelectTree ([see example]({% slug overview_multiselecttree %})).
+     */
+    data?: any[];
+    /**
+     * Sets the opened state of the MultiSelectTree.
+     */
+    opened?: boolean;
+    /**
+     * The styles that are applied to the MultiSelectTree.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets the value of the MultiSelectTree. It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     */
+    value?: Array<any>;
+    /**
+     * The hint that is displayed when the MultiSelectTree is empty.
+     */
+    placeholder?: string;
+    /**
+     * Sets the key for comparing the data items of the MultiSelectTree ([see example]({% slug overview_multiselecttree %})).
+     * If `dataItemKey` is not set, the MultiSelectTree compares the items by reference.
+     */
+    dataItemKey: string;
+    /**
+     * Sets additional classes to the MultiSelectTree.
+     */
+    className?: string;
+    /**
+     * Sets the disabled state of the MultiSelectTree.
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Renders a floating label for the MultiSelectTree.
+     */
+    label?: string;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
+     */
+    tags?: Array<TagData>;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Enables the filtering functionality of the MultiSelectTree ([more information and examples]({% slug filtering_multiselecttree %})).
+     */
+    filterable?: boolean;
+    /**
+     * Sets the value of filtering input.
+     * Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     */
+    filter?: string;
+    /**
+     * Sets the loading state of the MultiSelectTree ([see example]({% slug filtering_multiselecttree %}#toc-visualize-filtering)).
+     */
+    loading?: boolean;
+    /**
+     * Specifies the `tabIndex` of the MultiSelectTree.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the MultiSelectTree.
+     */
+    accessKey?: string;
+    /**
+     * Sets the data item field that represents the item text ([see example]({% slug overview_multiselecttree %})).
+     */
+    textField: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the checked state of the item.
+     */
+    checkField?: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the checked indeterminaet state of the item.
+     */
+    checkIndeterminateField?: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
+     */
+    expandField?: string;
+    /**
+     * Specifies the name of the field which will provide an array representation of the item subitems.
+     * Defaults to 'items'.
+     */
+    subItemsField?: string;
+    /**
+     * Configures the popup of the MultiSelectTree.
+     */
+    popupSettings?: DropDownsPopupSettings;
+    /**
+     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
+     *
+     * @example
+     * ```jsx-no-run
+     * class App extends React.Component {
+     *    render() {
+     *       return (
+     *          <form>
+     *              <MultiSelectTree
+     *                  data={[ { text: "Austria", id: 1 } , { text: "Belarus", id: 2 } ]}
+     *                  valueMap={value => value && value.id}
+     *              />
+     *              <button type="submit">Submit</button>
+     *          </form>
+     *       );
+     *    }
+     * }
+     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * ```
+     */
+    valueMap?: (value: Array<any>) => any;
+    /**
+     * Fires each time the popup of the MultiSelectTree is about to open.
+     */
+    onOpen?: (event: MultiSelectTreeOpenEvent) => void;
+    /**
+     * Fires each time the popup of the MultiSelectTree is about to close.
+     */
+    onClose?: (event: MultiSelectTreeCloseEvent) => void;
+    /**
+     * Fires each time the user focuses the MultiSelectTree.
+     */
+    onFocus?: (event: MultiSelectTreeFocusEvent) => void;
+    /**
+     * Fires each time the MultiSelectTree gets blurred.
+     */
+    onBlur?: (event: MultiSelectTreeBlurEvent) => void;
+    /**
+     * Fires each time the value of the MultiSelectTree is about to change ([see examples]({% slug overview_multiselecttree %})).
+     */
+    onChange?: (event: MultiSelectTreeChangeEvent) => void;
+    /**
+     * Fires each time the popup of the MultiSelectTree is about to cancel in ([adaptive mode]({% slug adaptive_rendering_multiselecttree %})).
+     */
+    onCancel?: (event: MultiSelectTreeCancelEvent) => void;
+    /**
+     * Fires each time the user types in the filter input
+     * ([see example]({% slug filtering_multiselecttree %}#toc-basic-configuration)).
+     * You can filter the source based on the passed filtration value.
+     */
+    onFilterChange?: (event: MultiSelectTreeFilterChangeEvent) => void;
+    /**
+     * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_multiselecttree %})).
+     */
+    onExpandChange?: (event: any) => void;
+    /**
+     * Defines the component that will be used for rendering each of the MultiSelectTree items
+     * ([see example]({% slug customrendering_multiselecttree %}#toc-items-and-value-element)).
+     */
+    item?: React_2.ComponentType<MultiSelectTreeItemProps>;
+    /**
+     * Defines the component that will be rendered in the MultiSelectTree popup when no data is available
+     * ([see example]({% slug customrendering_multiselecttree %}#toc-no-data)).
+     */
+    listNoData?: React_2.ComponentType<MultiSelectTreeListNoDataProps>;
+    tag?: React_2.ComponentType<MultiSelectTreeTagProps>;
+    /**
+     * Configures the `size` of the MultiSelectTree.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the MultiSelectTree.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the MultiSelectTree.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string | React_2.ReactNode;
+}
+
+/**
+ * Represents the PropsContext of the `MultiSelectTree` component.
+ * Used for global configuration of all `MultiSelectTree` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
+ */
+export declare const MultiSelectTreePropsContext: React_2.Context<(p: MultiSelectTreeProps) => MultiSelectTreeProps>;
+
+/**
+ * The props of component that will be used for rendering each of the MultiSelectTree tags
+ */
+export declare interface MultiSelectTreeTagProps {
+    tagData: TagData;
+    guid: string;
+    focusedTag?: TagData;
+    onTagDelete: (items: Array<any>, event: React_2.MouseEvent<HTMLSpanElement>) => void;
+}
+
+/** @hidden */
+export declare class MultiSelectWithoutContext extends React_2.Component<MultiSelectProps, MultiSelectState> implements FormComponent {
+    static displayName: string;
+    /** @hidden */
+    static propTypes: {
+        autoClose: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<any[]>;
+        defaultValue: PropTypes.Requireable<any[]>;
+        dataItemKey: PropTypes.Requireable<string>;
+        placeholder: PropTypes.Requireable<string>;
+        tags: PropTypes.Requireable<(PropTypes.InferProps<{
+            text: PropTypes.Requireable<string>;
+            data: PropTypes.Requireable<any[]>;
+        }> | null | undefined)[]>;
+        tagRender: PropTypes.Requireable<(...args: any[]) => any>;
+        id: PropTypes.Requireable<string>;
+        ariaLabelledBy: PropTypes.Requireable<string>;
+        ariaDescribedBy: PropTypes.Requireable<string>;
+        groupField: PropTypes.Requireable<string>;
+        list: PropTypes.Requireable<any>;
+        adaptive: PropTypes.Requireable<boolean>;
+        adaptiveTitle: PropTypes.Requireable<string>;
+        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        skipDisabledItems: PropTypes.Requireable<boolean>;
+        filterable: PropTypes.Requireable<boolean>;
+        filter: PropTypes.Requireable<string>;
+        virtual: PropTypes.Requireable<PropTypes.InferProps<{
+            pageSize: PropTypes.Validator<number>;
+            skip: PropTypes.Validator<number>;
+            total: PropTypes.Validator<number>;
+        }>>;
+        onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
+        opened: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        dir: PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
+        accessKey: PropTypes.Requireable<string>;
+        data: PropTypes.Requireable<any[]>;
+        textField: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        loading: PropTypes.Requireable<boolean>;
+        popupSettings: PropTypes.Requireable<PropTypes.InferProps<{
+            animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
+                openDuration: PropTypes.Requireable<number>;
+                closeDuration: PropTypes.Requireable<number>;
+            }> | null | undefined>>;
+            popupClass: PropTypes.Requireable<string>;
+            className: PropTypes.Requireable<string>;
+            appendTo: PropTypes.Requireable<any>;
+            width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+            height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        }>>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        itemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
+        focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>;
+        header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    /** @hidden */
+    static defaultProps: {
+        autoClose: boolean;
+        required: boolean;
+        size: "small" | "large" | "medium" | null | undefined;
+        rounded: "small" | "large" | "medium" | "full" | null | undefined;
+        fillMode: "flat" | "solid" | "outline" | null | undefined;
+        groupMode: string | undefined;
+        skipDisabledItems: boolean;
+        prefix: undefined;
+        suffix: undefined;
+        popupSettings: {
+            height: string;
+        };
+        validityStyles: boolean;
+    };
+    /** @hidden */
+    readonly state: MultiSelectState;
+    private _element;
+    private _valueItemsDuringOnChange;
+    private get _inputId();
+    protected readonly base: DropDownBase;
+    private readonly _tags;
+    private _input;
+    private _adaptiveInput;
+    private _skipFocusEvent;
+    private _lastSelectedOrDeslectedItemIndex;
+    private itemHeight;
+    protected scrollToFocused: boolean;
+    private localization;
+    private observerResize?;
+    private get document();
+    constructor(props: MultiSelectProps);
+    /** @hidden */
+    focus: () => void;
+    /** @hidden */
+    get element(): HTMLSpanElement | null;
+    /** @hidden */
+    get opened(): boolean;
+    /** @hidden */
+    get tagsToRender(): Array<TagData>;
+    /**
+     * The mobile mode of the ComboBox.
+     */
+    get mobileMode(): boolean;
+    /**
+     * Represents the value of the MultiSelect.
+     */
+    get value(): Array<any>;
+    /**
+     * Gets the `name` property of the MultiSelect.
+     */
+    get name(): string | undefined;
+    /**
+     * Represents the validity state into which the MultiSelect is set.
+     */
+    get validity(): FormComponentValidity;
+    /** @hidden */
+    protected get required(): boolean;
+    protected get validityStyles(): boolean;
+    /** @hidden */
+    componentDidUpdate(prevProps: MultiSelectProps, prevState: MultiSelectState): void;
+    /** @hidden */
+    componentDidMount(): void;
+    /** @hidden */
+    componentWillUnmount(): void;
+    /** @hidden */
+    handleItemSelect: (index: number, state: MultiSelectInternalState) => void;
+    /** @hidden */
+    onTagDelete: (itemsToRemove: Array<any>, event: React_2.MouseEvent<HTMLSpanElement>) => void;
+    /** @hidden */
+    onNavigate(state: MultiSelectInternalState, keyCode: number, skipItems?: number): void;
+    /** @hidden */
+    itemFocus: (index: number, state: MultiSelectInternalState) => void;
+    /** @hidden */
+    render(): JSX_2.Element;
+    private componentRef;
+    private renderSearchBar;
+    private searchbarRef;
+    private onChangeHandler;
+    private clearButtonClick;
+    private onInputKeyDown;
+    private onTagsNavigate;
+    private triggerOnChange;
+    private selectFocusedItem;
+    private setItems;
+    private getFocusedState;
+    private listContainerContent;
+    private renderListContainer;
+    private renderAdaptiveListContainer;
+    private closePopup;
+    private onCancel;
+    private renderList;
+    private onScroll;
+    private customItemSelect;
+    private handleWrapperClick;
+    private handleItemClick;
+    private handleBlur;
+    private handleFocus;
+    private onPopupOpened;
+    private onPopupClosed;
+    private focusElement;
+    private applyState;
+    private setValidity;
+    private calculateMedia;
+    /**
+     * Updates the state of the MultiSelect when the complex keyboard navigation that
+     * includes key combinations with the Ctrl/Command, Shift, Home and End keys
+     *
+     * @param {Array<string | Object>} dataToSet Defines the array of new values that will be applied to the MultiSelect
+     * @param {MultiSelectInternalState} state The current state of the MultiSelect
+     */
+    private updateStateOnKeyboardNavigation;
+    /**
+     * Returns the last element that was selected or deselected. Needed for the keyboard navigation specifications
+     *
+     * @param {number} correction A correction is needed depending on if UP or DOWN key is pressed
+     */
+    private getLastSelectedOrDeselectedIndex;
+}
+
+/**
+ * @hidden
+ */
+declare class Navigation {
+    navigate(args: {
+        keyCode: number;
+        current: number;
+        max: number;
+        min: number;
+        skipItems?: number;
+    }): number | undefined;
+    private next;
+}
+
+/**
+ * @hidden
+ */
+export declare const nodata = "dropdowns.nodata";
+
+/**
+ * @hidden
+ */
+declare interface OpenEvent<T> extends DropdownEvent<T> {
+}
+
+/**
+ * Represents the `skip` and `take` configurations which are wrapped in the `page` object.
+ */
+export declare interface Page {
+    /**
+     * The number of records to skip.
+     */
+    skip: number;
+    /**
+     * The number of records to take.
+     */
+    take: number;
+}
+
+/**
+ * @hidden
+ */
+declare interface PageChangeEvent<T> extends DropdownEvent<T> {
+    page: Page;
+}
+
+/**
+ * @hidden
+ */
+export declare const scrollToItem: (scrollElem: HTMLDivElement, list: HTMLUListElement, itemIndex: number, translate: number, virtualScroll: boolean) => void;
+
+/**
+ * @hidden
+ */
+export declare class SearchBar extends React_2.Component<SearchBarProps> {
+    private _input;
+    /**
+     * @hidden
+     */
+    get input(): HTMLInputElement | null;
+    componentDidUpdate(prevProps: SearchBarProps): void;
+    render(): string | number | boolean | Iterable<React_2.ReactNode> | JSX_2.Element | null | undefined;
+}
+
+/**
+ * @hidden
+ */
+declare interface SearchBarProps {
+    value: string;
+    onChange: React_2.FormEventHandler<HTMLInputElement>;
+    render?: (rendering: React_2.ReactElement<HTMLSpanElement>) => React_2.ReactNode;
+    id?: string;
+    placeholder?: string;
+    title?: string;
+    tabIndex?: number;
+    size?: number;
+    suggestedText?: string;
+    focused?: boolean;
+    onKeyDown?: React_2.KeyboardEventHandler<HTMLInputElement>;
+    onFocus?: React_2.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React_2.FocusEventHandler<HTMLInputElement>;
+    onClick?: React_2.MouseEventHandler<HTMLInputElement>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    expanded?: boolean;
+    owns?: string;
+    role?: string;
+    name?: string;
+    activedescendant?: string;
+    accessKey?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    ariaRequired?: boolean;
+}
+
+/**
+ * Represents the `Suggestion` object of the AutoComplete.
+ */
+export declare interface Suggestion {
+    /**
+     * Represents the typed text of the user.
+     */
+    readonly userInput: string;
+    /**
+     * Represents the suggested text without the user input.
+     */
+    readonly value: string;
+}
+
+/**
+ * Represents the tag data.
+ */
+declare interface TagData {
+    /**
+     * Represents the text of the tag.
+     */
+    text: string;
+    /**
+     * Represents the data items which correspond to the tag.
+     */
+    data: Array<any>;
+}
+export { TagData as MultiSelectTagData }
+export { TagData }
+
+/**
+ * @hidden
+ */
+export declare class TagList extends React_2.Component<TagListProps, {}> {
+    render(): JSX_2.Element;
+}
+
+/**
+ * @hidden
+ */
+declare interface TagListProps {
+    children?: React_2.ReactNode;
+    data: Array<TagData>;
+    guid: string;
+    focused?: TagData;
+    onTagDelete: (items: Array<any>, event: React_2.MouseEvent<HTMLSpanElement>) => void;
+    tagRender?: (tagData: TagData, tag: React_2.ReactElement) => React_2.ReactElement;
+    tag?: React_2.ComponentType<{
+        tagData: TagData;
+        guid: string;
+        focusedTag?: TagData;
+        onTagDelete: (items: Array<any>, event: React_2.MouseEvent<HTMLSpanElement>) => void;
+    }>;
+    size?: null | 'small' | 'medium' | 'large';
+}
+
+/**
+ * The props of the `ValueHolder` component ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+ */
+export declare interface ValueHolderProps {
+    children?: React.ReactNode;
+    item?: any;
+}
+
+/**
+ * The virtualization settings.
+ */
+export declare interface VirtualizationSettings {
+    /**
+     * The number of the requested records.
+     */
+    pageSize: number;
+    /**
+     * The number of records to skip.
+     */
+    skip: number;
+    /**
+     * The number of all records.
+     */
+    total: number;
+}
+
+/**
+ * @hidden
+ */
+declare class VirtualScroll {
+    container: HTMLDivElement | null;
+    scrollElement: HTMLDivElement | null;
+    list: HTMLUListElement | null;
+    containerHeight: number;
+    skip: number;
+    total: number;
+    enabled: boolean;
+    pageSize: number;
+    itemHeight: number;
+    PageChange: ((event: Page, syntheticEvent: React.SyntheticEvent<any>) => void) | null;
+    private prevScrollPos;
+    private listTranslate;
+    private scrollSyncing;
+    constructor();
+    get translate(): number;
+    scrollerRef: (element: HTMLDivElement | null) => void;
+    calcScrollElementHeight: () => boolean;
+    changePage(skip: number, e: React.SyntheticEvent<HTMLElement>): void;
+    translateTo(dY: number): void;
+    reset(): void;
+    scrollToEnd(): void;
+    localScrollUp(e: React.SyntheticEvent<HTMLElement>): void;
+    localScrollDown(e: React.SyntheticEvent<HTMLElement>): void;
+    scrollNonStrict(e: React.SyntheticEvent<HTMLElement>): void;
+    scrollHandler(e: React.SyntheticEvent<HTMLElement>): void;
+    validateTranslate(translate: number): number;
+}
+
+export { }