/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { AdaptiveModeContextType } from '@progress/kendo-react-common';
import { CustomComponent } from '@progress/kendo-react-common';
import { default as default_2 } from 'prop-types';
import { DropDownsClassStructure } 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 } from 'react/jsx-runtime';
import { PopupProps } from '@progress/kendo-react-popup';
import * as React_2 from 'react';
import { RowHeightService } from '@progress/kendo-react-common';
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 %})).
     *
     * @example
     * ```jsx
     * <AutoComplete data={['Apple', 'Orange', 'Banana']} />
     * ```
     */
    data?: any[];
    /**
     * Sets the opened and closed state of the AutoComplete.
     *
     * @example
     * ```jsx
     * <AutoComplete opened={true} />
     * ```
     */
    opened?: boolean;
    /**
     * The styles that are applied to the AutoComplete.
     *
     * @example
     * ```jsx
     * <AutoComplete style={{ width: '300px' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Sets the value of the AutoComplete ([more information and example]({% slug binding_autocomplete %})).
     *
     * @example
     * ```jsx
     * <AutoComplete value="Apple" />
     * ```
     */
    value?: string;
    /**
     * Sets the default value of the AutoComplete. Similar to the native `input` HTML element.
     *
     * @example
     * ```jsx
     * <AutoComplete defaultValue="Orange" />
     * ```
     */
    defaultValue?: string;
    /**
     * Sets additional classes to the AutoComplete.
     *
     * @example
     * ```jsx
     * <AutoComplete className="custom-class" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <AutoComplete clearButton={false} />
     * ```
     */
    clearButton?: boolean;
    /**
     * The hint that is displayed when the AutoComplete is empty.
     *
     * @example
     * ```jsx
     * <AutoComplete placeholder="Type here..." />
     * ```
     */
    placeholder?: string;
    /**
     * Sets the read-only state of the AutoComplete.
     *
     * @example
     * ```jsx
     * <AutoComplete readonly={true} />
     * ```
     */
    readonly?: boolean;
    /**
     * Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_autocomplete %})).
     *
     * @example
     * ```jsx
     * <AutoComplete suggest={true} />
     * ```
     */
    suggest?: boolean | string;
    /**
     * Sets the disabled state of the AutoComplete.
     *
     * @example
     * ```jsx
     * <AutoComplete disabled={true} />
     * ```
     */
    disabled?: boolean;
    /**
     * Represents the `dir` HTML attribute.
     *
     * @example
     * ```jsx
     * <AutoComplete dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Sets the loading state of the AutoComplete ([see example]({% slug filtering_autocomplete %}#toc-basic-configuration)).
     *
     * @example
     * ```jsx
     * <AutoComplete loading={true} />
     * ```
     */
    loading?: boolean;
    /**
     * Specifies the `tabIndex` of the AutoComplete.
     *
     * @example
     * ```jsx
     * <AutoComplete tabIndex={0} />
     * ```
     */
    tabIndex?: number;
    /**
     * Specifies the `accessKey` of the AutoComplete.
     *
     * @example
     * ```jsx
     * <AutoComplete accessKey="a" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <AutoComplete textField="name" />
     * ```
     */
    textField?: string;
    /**
     * Renders a floating label for the AutoComplete.
     *
     * @example
     * ```jsx
     * <AutoComplete label="Search" />
     * ```
     */
    label?: string;
    /**
     * Configures the popup of the AutoComplete.
     *
     * @example
     * ```jsx
     * <AutoComplete popupSettings={{ animate: true }} />
     * ```
     */
    popupSettings?: DropDownsPopupSettings;
    /**
     * Specifies the id of the component.
     *
     * @example
     * ```jsx
     * <AutoComplete id="autocomplete" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <AutoComplete ariaDescribedBy="description" />
     * ```
     */
    ariaDescribedBy?: string;
    /**
     * Identifies the element(s) which will label the component.
     *
     * @example
     * ```jsx
     * <AutoComplete ariaLabelledBy="label" />
     * ```
     */
    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
     * 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.
     *
     * @example
     * ```jsx
     * <AutoComplete onOpen={(event) => console.log('Popup opened', event)} />
     * ```
     */
    onOpen?: (event: AutoCompleteOpenEvent) => void;
    /**
     * Fires each time the popup of the AutoComplete is about to close.
     *
     * @example
     * ```jsx
     * <AutoComplete onClose={(event) => console.log('Popup closed', event)} />
     * ```
     */
    onClose?: (event: AutoCompleteCloseEvent) => void;
    /**
     * Fires each time the user focuses the AutoComplete.
     *
     * @example
     * ```jsx
     * <AutoComplete onFocus={(event) => console.log('Focused', event)} />
     * ```
     */
    onFocus?: (event: AutoCompleteFocusEvent) => void;
    /**
     * Fires each time the AutoComplete gets blurred.
     *
     * @example
     * ```jsx
     * <AutoComplete onBlur={(event) => console.log('Blurred', event)} />
     * ```
     */
    onBlur?: (event: AutoCompleteBlurEvent) => void;
    /**
     * Fires each time the value of the AutoComplete is about to change ([more information and example]({% slug binding_autocomplete %})).
     *
     * @example
     * ```jsx
     * <AutoComplete onChange={(event) => console.log('Value changed', event)} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <AutoComplete valueRender={(rendering) => <span>{rendering}</span>} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <AutoComplete itemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <AutoComplete listNoDataRender={(element) => <div>No data available</div>} />
     * ```
     */
    listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
    /**
     * Sets the header component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)).
     *
     * @example
     * ```jsx
     * <AutoComplete header={<div>Header</div>} />
     * ```
     */
    header?: React.ReactNode;
    /**
     * Sets the footer component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)).
     *
     * @example
     * ```jsx
     * <AutoComplete footer={<div>Footer</div>} />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <AutoComplete size="small" />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <AutoComplete rounded="large" />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <AutoComplete fillMode="flat" />
     * ```
     */
    fillMode?: null | 'solid' | 'flat' | 'outline';
    /**
     * Sets the data item field that represents the start of a group. Applicable to objects data.
     *
     * @example
     * ```jsx
     * <AutoComplete groupField="category" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <AutoComplete groupHeaderItemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <AutoComplete groupStickyHeaderItemRender={(div, stickyHeaderProps) => <div>{stickyHeaderProps.dataItem}</div>} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <AutoComplete dataItemKey="id" />
     * ```
     */
    dataItemKey?: string;
    /**
     * Providing different rendering of the popup element based on the screen dimensions.
     *
     * @default `false`
     *
     * @example
     * ```jsx
     * <AutoComplete adaptive={true} />
     * ```
     */
    adaptive?: boolean;
    /**
     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
     * Applicable only when `adaptive` is set to `true`.
     * If not provided, the title will be the same as the label.
     *
     * @example
     * ```jsx
     * <AutoComplete adaptiveTitle="Adaptive Popup Title" />
     * ```
     */
    adaptiveTitle?: string;
    /**
     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
     * Applicable only when `adaptive` is set to `true`.
     *
     * @example
     * ```jsx
     * <AutoComplete adaptiveSubtitle="Adaptive Popup Subtitle" />
     * ```
     */
    adaptiveSubtitle?: 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`.
     *
     * @example
     * ```jsx
     * <AutoComplete skipDisabledItems={false} />
     * ```
     */
    skipDisabledItems?: boolean;
    /**
     * Sets a custom prefix to the AutoComplete component.
     *
     * @example
     * ```jsx
     * <AutoComplete prefix={<span>Prefix</span>} />
     * ```
     */
    prefix?: CustomComponent<any>;
    /**
     * Sets a custom suffix to the AutoComplete component.
     *
     * @example
     * ```jsx
     * <AutoComplete suffix={<span>Suffix</span>} />
     * ```
     */
    suffix?: CustomComponent<any>;
    /**
     * Sets the HTML attributes of the inner focusable input element.
     * Attributes which are essential for certain component functionalities cannot be changed.
     *
     * @example
     * ```jsx
     * <AutoComplete inputAttributes={{ maxLength: 10 }} />
     * ```
     */
    inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
    /**
     * @hidden
     * This prop is provided by the withAdaptiveModeContext HOC to subscribe to AdaptiveModeContext.
     */
    _adaptiveMode?: AdaptiveModeContextType;
}

/**
 * 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;
    windowWidth?: number;
}

/** @hidden */
export declare class AutoCompleteWithoutContext extends React_2.Component<AutoCompleteProps, AutoCompleteState> implements FormComponent {
    static displayName: string;
    /**
     * @hidden
     */
    static propTypes: {
        size: default_2.Requireable<"small" | "large" | "medium" | null | undefined>;
        rounded: default_2.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
        fillMode: default_2.Requireable<"flat" | "solid" | "outline" | null | undefined>;
        groupField: default_2.Requireable<string>;
        suggest: default_2.Requireable<NonNullable<string | boolean | null | undefined>>;
        placeholder: default_2.Requireable<string>;
        value: default_2.Requireable<string>;
        defaultValue: default_2.Requireable<string>;
        validationMessage: default_2.Requireable<string>;
        required: default_2.Requireable<boolean>;
        readonly: default_2.Requireable<boolean>;
        clearButton: default_2.Requireable<boolean>;
        valueRender: default_2.Requireable<(...args: any[]) => any>;
        id: default_2.Requireable<string>;
        ariaLabelledBy: default_2.Requireable<string>;
        ariaDescribedBy: default_2.Requireable<string>;
        list: default_2.Requireable<any>;
        adaptive: default_2.Requireable<boolean>;
        adaptiveTitle: default_2.Requireable<string>;
        adaptiveSubtitle: default_2.Requireable<string>;
        onCancel: default_2.Requireable<(...args: any[]) => any>;
        skipDisabledItems: default_2.Requireable<boolean>;
        inputAttributes: default_2.Requireable<object>;
        opened: default_2.Requireable<boolean>;
        disabled: default_2.Requireable<boolean>;
        dir: default_2.Requireable<string>;
        tabIndex: default_2.Requireable<number>;
        accessKey: default_2.Requireable<string>;
        data: default_2.Requireable<any[]>;
        textField: default_2.Requireable<string>;
        className: default_2.Requireable<string>;
        label: default_2.Requireable<string>;
        loading: default_2.Requireable<boolean>;
        popupSettings: default_2.Requireable<default_2.InferProps<{
            animate: default_2.Requireable<NonNullable<boolean | default_2.InferProps<{
                openDuration: default_2.Requireable<number>;
                closeDuration: default_2.Requireable<number>;
            }> | null | undefined>>;
            popupClass: default_2.Requireable<string>;
            className: default_2.Requireable<string>;
            appendTo: default_2.Requireable<any>;
            width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
            height: default_2.Requireable<NonNullable<string | number | null | undefined>>;
        }>>;
        onOpen: default_2.Requireable<(...args: any[]) => any>;
        onClose: default_2.Requireable<(...args: any[]) => any>;
        onFocus: default_2.Requireable<(...args: any[]) => any>;
        onBlur: default_2.Requireable<(...args: any[]) => any>;
        onChange: default_2.Requireable<(...args: any[]) => any>;
        itemRender: default_2.Requireable<(...args: any[]) => any>;
        listNoDataRender: default_2.Requireable<(...args: any[]) => any>;
        focusedItemIndex: default_2.Requireable<(...args: any[]) => any>;
        header: default_2.Requireable<default_2.ReactNodeLike>;
        footer: default_2.Requireable<default_2.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 _adaptiveInput;
    private _skipFocusEvent;
    private _valueDuringOnChange?;
    private _isScrolling;
    private itemHeight;
    private observerResize?;
    private get document();
    /**
     * @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 */
    get opened(): boolean;
    /**
     * The mobile mode of the AutoComplete.
     */
    get mobileMode(): boolean;
    /**
     * @hidden
     */
    protected get validityStyles(): boolean;
    /**
     * @hidden
     */
    protected get required(): boolean;
    /**
     * @hidden
     */
    componentDidUpdate(prevProps: AutoCompleteProps, prevState: AutoCompleteState): void;
    /**
     * @hidden
     */
    componentDidMount(): void;
    /**
     * @hidden
     */
    componentWillUnmount(): void;
    /**
     * @hidden
     */
    render(): JSX.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 renderAdaptiveListContainer;
    private onCancel;
    private renderListContainer;
    private listContainerContent;
    private renderList;
    private onScroll;
    private handleItemClick;
    private onChangeHandler;
    private clearButtonClick;
    private onInputKeyDown;
    private handleFocus;
    private handleBlur;
    private handleWrapperClick;
    private triggerOnChange;
    private focusElement;
    private applyState;
    private suggestValue;
    private focusedIndex;
    private calculateMedia;
}

/**
 * @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 %})).
     *
     * @example
     * ```jsx
     * <ComboBox data={['Option1', 'Option2', 'Option3']} />
     * ```
     */
    data?: any[];
    /**
     * Sets the opened and closed state of the ComboBox.
     *
     * @example
     * ```jsx
     * <ComboBox opened={true} />
     * ```
     */
    opened?: boolean;
    /**
     * The styles that are applied to the ComboBox.
     *
     * @example
     * ```jsx
     * <ComboBox style={{ width: '250px' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Sets the value of the ComboBox ([more information and examples]({% slug binding_combobox %})).
     *
     * @example
     * ```jsx
     * <ComboBox value="Option1" />
     * ```
     */
    value?: any;
    /**
     * Sets the default value of the ComboBox. Similar to the native `select` HTML element.
     *
     * @example
     * ```jsx
     * <ComboBox defaultValue="Option2" />
     * ```
     */
    defaultValue?: any;
    /**
     * Sets additional classes to the ComboBox.
     *
     * @example
     * ```jsx
     * <ComboBox className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets CSS classes to the expand `icon` DOM element.
     *
     * @example
     * ```jsx
     * <ComboBox iconClassName="custom-icon-class" />
     * ```
     */
    iconClassName?: string;
    /**
     * Sets the specified SVG icon.
     *
     * @example
     * ```jsx
     * <ComboBox svgIcon={{ name: 'custom-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.
     *
     * @example
     * ```jsx
     * <ComboBox clearButton={true} />
     * ```
     */
    clearButton?: boolean;
    /**
     * The hint that is displayed when the ComboBox is empty.
     *
     * @example
     * ```jsx
     * <ComboBox placeholder="Select an option" />
     * ```
     */
    placeholder?: string;
    /**
     * Sets the title attribute to the underlying input element of the ComboBox.
     *
     * @example
     * ```jsx
     * <ComboBox title="ComboBox Title" />
     * ```
     */
    title?: string;
    /**
     * Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_combobox %})).
     *
     * @example
     * ```jsx
     * <ComboBox suggest={true} />
     * ```
     */
    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`.
     *
     * @example
     * ```jsx
     * <ComboBox allowCustom={true} />
     * ```
     */
    allowCustom?: boolean;
    /**
     * Sets the disabled state of the ComboBox.
     *
     * @example
     * ```jsx
     * <ComboBox disabled={true} />
     * ```
     */
    disabled?: boolean;
    /**
     * Represents the `dir` HTML attribute.
     *
     * @example
     * ```jsx
     * <ComboBox dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Enables the filtering functionality of the ComboBox ([more information and examples]({% slug filtering_combobox %})).
     *
     * @example
     * ```jsx
     * <ComboBox filterable={true} />
     * ```
     */
    filterable?: boolean;
    /**
     * Sets the value of ComboBox input. Useful for making the ComboBox input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
     *
     * @example
     * ```jsx
     * <ComboBox filter="Option" />
     * ```
     */
    filter?: string | null;
    /**
     * Sets the value of the adaptive filtering input of the ComboBox.
     *
     * @example
     * ```jsx
     * <ComboBox adaptiveFilter="Option" />
     * ```
     */
    adaptiveFilter?: string;
    /**
     * Sets the loading state of the ComboBox ([see example]({% slug filtering_combobox %}#toc-basic-configuration)).
     *
     * @example
     * ```jsx
     * <ComboBox loading={true} />
     * ```
     */
    loading?: boolean;
    /**
     * Specifies the `tabIndex` of the ComboBox.
     *
     * @example
     * ```jsx
     * <ComboBox tabIndex={0} />
     * ```
     */
    tabIndex?: number;
    /**
     * Specifies the `accessKey` of the ComboBox.
     *
     * @example
     * ```jsx
     * <ComboBox accessKey="k" />
     * ```
     */
    accessKey?: string;
    /**
     * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
     *
     * @example
     * ```jsx
     * <ComboBox textField="name" />
     * ```
     */
    textField?: string;
    /**
     * Sets the data item field that represents the start of a group. Applicable to objects data.
     *
     * @example
     * ```jsx
     * <ComboBox groupField="category" />
     * ```
     */
    groupField?: string;
    /**
     * Defines the `classic` or `modern` type of the grouping's visualization. Defaults to `modern`.
     *
     * @example
     * ```jsx
     * <ComboBox groupMode="classic" />
     * ```
     */
    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)).
     *
     * @example
     * ```jsx
     * <ComboBox dataItemKey="id" />
     * ```
     */
    dataItemKey?: string;
    /**
     * Renders a floating label for the ComboBox.
     *
     * @example
     * ```jsx
     * <ComboBox label="Select an option" />
     * ```
     */
    label?: string;
    /**
     * Configures the popup of the ComboBox.
     *
     * @example
     * ```jsx
     * <ComboBox popupSettings={{ animate: true }} />
     * ```
     */
    popupSettings?: DropDownsPopupSettings;
    /**
     * Configures the virtual scrolling of the ComboBox ([more information and examples]({% slug virtualization_combobox %})).
     *
     * @example
     * ```jsx
     * <ComboBox virtual={{ pageSize: 20 }} />
     * ```
     */
    virtual?: VirtualizationSettings;
    /**
     * Specifies the id of the component.
     *
     * @example
     * ```jsx
     * <ComboBox id="comboBoxId" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <ComboBox ariaDescribedBy="descriptionId" />
     * ```
     */
    ariaDescribedBy?: string;
    /**
     * Identifies the element(s) which will label the component.
     *
     * @example
     * ```jsx
     * <ComboBox ariaLabelledBy="labelId" />
     * ```
     */
    ariaLabelledBy?: string;
    /**
     * The accessible label of the component.
     *
     * @example
     * ```jsx
     * <ComboBox ariaLabel="ComboBox Label" />
     * ```
     */
    ariaLabel?: 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
     * 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.
     *
     * @example
     * ```jsx
     * <ComboBox onOpen={(event) => console.log('Popup opened', event)} />
     * ```
     */
    onOpen?: (event: ComboBoxOpenEvent) => void;
    /**
     * Fires each time the popup of the ComboBox is about to close.
     *
     * @example
     * ```jsx
     * <ComboBox onClose={(event) => console.log('Popup closed', event)} />
     * ```
     */
    onClose?: (event: ComboBoxCloseEvent) => void;
    /**
     * Fires each time the user focuses the ComboBox.
     *
     * @example
     * ```jsx
     * <ComboBox onFocus={(event) => console.log('ComboBox focused', event)} />
     * ```
     */
    onFocus?: (event: ComboBoxFocusEvent) => void;
    /**
     * Fires each time the ComboBox gets blurred.
     *
     * @example
     * ```jsx
     * <ComboBox onBlur={(event) => console.log('ComboBox blurred', event)} />
     * ```
     */
    onBlur?: (event: ComboBoxBlurEvent) => void;
    /**
     * Fires each time the value of the ComboBox is about to change ([see examples]({% slug binding_combobox %})).
     *
     * @example
     * ```jsx
     * <ComboBox onChange={(event) => console.log('Value changed', event)} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <ComboBox onFilterChange={(event) => console.log('Filter changed', event)} />
     * ```
     */
    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 %})).
     *
     * @example
     * ```jsx
     * <ComboBox onPageChange={(event) => console.log('Page changed', event)} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <ComboBox valueRender={(rendering) => <span>{rendering}</span>} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <ComboBox itemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <ComboBox groupHeaderItemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <ComboBox groupStickyHeaderItemRender={(div, stickyHeaderProps) => <div>{stickyHeaderProps.group}</div>} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <ComboBox listNoDataRender={(element) => <div>No data available</div>} />
     * ```
     */
    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)).
     *
     * @example
     * ```jsx
     * <ComboBox header={<div>Header Content</div>} />
     * ```
     */
    header?: React.ReactNode;
    /**
     * Sets the footer component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
     *
     * @example
     * ```jsx
     * <ComboBox footer={<div>Footer Content</div>} />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <ComboBox size="large" />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <ComboBox rounded="full" />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <ComboBox fillMode="flat" />
     * ```
     */
    fillMode?: null | 'solid' | 'flat' | 'outline';
    /**
     * Providing different rendering of the popup element based on the screen dimensions.
     *
     * @default `false`
     *
     * @example
     * ```jsx
     * <ComboBox adaptive={true} />
     * ```
     */
    adaptive?: boolean;
    /**
     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
     * Applicable only when `adaptive` is set to `true`.
     * If not provided, the title will be the same as the label.
     *
     * @example
     * ```jsx
     * <ComboBox adaptiveTitle="Adaptive Popup Title" />
     * ```
     */
    adaptiveTitle?: string;
    /**
     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
     * Applicable only when `adaptive` is set to `true`.
     *
     * @example
     * ```jsx
     * <ComboBox adaptiveSubtitle="Adaptive Popup Subtitle" />
     */
    adaptiveSubtitle?: 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`.
     *
     * @example
     * ```jsx
     * <ComboBox skipDisabledItems={false} />
     * ```
     */
    skipDisabledItems?: boolean;
    /**
     * Sets a custom prefix to the ComboBox component.
     *
     * @example
     * ```jsx
     * <ComboBox prefix={<span>Prefix</span>} />
     * ```
     */
    prefix?: CustomComponent<any>;
    /**
     * Sets a custom suffix to the ComboBox component.
     *
     * @example
     * ```jsx
     * <ComboBox suffix={<span>Suffix</span>} />
     * ```
     */
    suffix?: CustomComponent<any>;
    /**
     * @hidden
     */
    unstyled?: DropDownsClassStructure;
    /**
     * Sets the HTML attributes of the inner focusable input element.
     * Attributes which are essential for certain component functionalities cannot be changed.
     *
     * @example
     * ```jsx
     * <ComboBox inputAttributes={{ maxLength: 10 }} />
     * ```
     */
    inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
    /**
     * @hidden
     * This prop is provided by the withAdaptiveModeContext HOC to subscribe to AdaptiveModeContext.
     */
    _adaptiveMode?: AdaptiveModeContextType;
}

/**
 * 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: default_2.Requireable<"small" | "large" | "medium" | null | undefined>;
        rounded: default_2.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
        fillMode: default_2.Requireable<"flat" | "solid" | "outline" | null | undefined>;
        dataItemKey: default_2.Requireable<string>;
        groupField: default_2.Requireable<string>;
        groupMode: default_2.Requireable<string | undefined>;
        isMultiColumn: default_2.Requireable<boolean>;
        suggest: default_2.Requireable<boolean>;
        placeholder: default_2.Requireable<string>;
        title: default_2.Requireable<string>;
        allowCustom: default_2.Requireable<boolean>;
        clearButton: default_2.Requireable<boolean>;
        iconClassName: default_2.Requireable<string>;
        svgIcon: default_2.Requireable<default_2.InferProps<{
            name: default_2.Validator<string>;
            content: default_2.Validator<string>;
            viewBox: default_2.Validator<string>;
        }>>;
        validationMessage: default_2.Requireable<string>;
        required: default_2.Requireable<boolean>;
        id: default_2.Requireable<string>;
        ariaLabelledBy: default_2.Requireable<string>;
        ariaLabel: default_2.Requireable<string>;
        ariaDescribedBy: default_2.Requireable<string>;
        list: default_2.Requireable<any>;
        valueRender: default_2.Requireable<(...args: any[]) => any>;
        skipDisabledItems: default_2.Requireable<boolean>;
        inputAttributes: default_2.Requireable<object>;
        value: default_2.Requireable<any>;
        defaultValue: default_2.Requireable<any>;
        filterable: default_2.Requireable<boolean>;
        filter: default_2.Requireable<string>;
        virtual: default_2.Requireable<default_2.InferProps<{
            pageSize: default_2.Validator<number>;
            skip: default_2.Validator<number>;
            total: default_2.Validator<number>;
        }>>;
        onFilterChange: default_2.Requireable<(...args: any[]) => any>;
        onPageChange: default_2.Requireable<(...args: any[]) => any>;
        opened: default_2.Requireable<boolean>;
        disabled: default_2.Requireable<boolean>;
        dir: default_2.Requireable<string>;
        tabIndex: default_2.Requireable<number>;
        accessKey: default_2.Requireable<string>;
        data: default_2.Requireable<any[]>;
        textField: default_2.Requireable<string>;
        className: default_2.Requireable<string>;
        label: default_2.Requireable<string>;
        loading: default_2.Requireable<boolean>;
        popupSettings: default_2.Requireable<default_2.InferProps<{
            animate: default_2.Requireable<NonNullable<boolean | default_2.InferProps<{
                /** @hidden */
                openDuration: default_2.Requireable<number>;
                closeDuration: default_2.Requireable<number>;
            }> | null | undefined>>;
            popupClass: default_2.Requireable<string>;
            className: default_2.Requireable<string>;
            appendTo: default_2.Requireable<any>;
            width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
            height: default_2.Requireable<NonNullable<string | number | null | undefined>>;
        }>>;
        onOpen: default_2.Requireable<(...args: any[]) => any>;
        onClose: default_2.Requireable<(...args: any[]) => any>;
        onFocus: default_2.Requireable<(...args: any[]) => any>;
        onBlur: default_2.Requireable<(...args: any[]) => any>;
        onChange: default_2.Requireable<(...args: any[]) => any>;
        itemRender: default_2.Requireable<(...args: any[]) => any>;
        listNoDataRender: default_2.Requireable<(...args: any[]) => any>;
        focusedItemIndex: default_2.Requireable<(...args: any[]) => any>;
        header: default_2.Requireable<default_2.ReactNodeLike>;
        footer: default_2.Requireable<default_2.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 _skipFocus;
    private itemHeight;
    private duplicates;
    private hasDuplicates;
    private navigationIndex;
    private observerResize?;
    private readonly showLicenseWatermark;
    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
     * Executed when no dataItemKey and textField are provided
     */
    private checkForDuplicatePlainTextRecords;
    /** @hidden */
    componentDidUpdate(prevProps: ComboBoxProps, prevState: ComboBoxState): void;
    /** @hidden */
    componentDidMount(): void;
    /** @hidden */
    componentWillUnmount(): void;
    /** @hidden */
    render(): JSX.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 closeOpenedApplyStateNonMobileMode;
    private applyValueOnRejectSuggestions;
    private selectFocusedItem;
    private renderAdaptiveListContainer;
    private renderMobileListFilter;
    private renderListContainer;
    private listContainerContent;
    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;
    private handleFocus;
}

/** @hidden */
declare interface ComboInternalState extends InternalState {
    data: ComboBoxState;
}

/**
 * @hidden
 */
declare class DropDownBase {
    static basicPropTypes: {
        opened: default_2.Requireable<boolean>;
        disabled: default_2.Requireable<boolean>;
        dir: default_2.Requireable<string>;
        tabIndex: default_2.Requireable<number>;
        accessKey: default_2.Requireable<string>;
        data: default_2.Requireable<any[]>;
        textField: default_2.Requireable<string>;
        className: default_2.Requireable<string>;
        label: default_2.Requireable<string>;
        loading: default_2.Requireable<boolean>;
        popupSettings: default_2.Requireable<default_2.InferProps<{
            animate: default_2.Requireable<NonNullable<boolean | default_2.InferProps<{
                openDuration: default_2.Requireable<number>;
                closeDuration: default_2.Requireable<number>;
            }> | null | undefined>>;
            popupClass: default_2.Requireable<string>;
            className: default_2.Requireable<string>;
            appendTo: default_2.Requireable<any>;
            width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
            height: default_2.Requireable<NonNullable<string | number | null | undefined>>;
        }>>;
        onOpen: default_2.Requireable<(...args: any[]) => any>;
        onClose: default_2.Requireable<(...args: any[]) => any>;
        onFocus: default_2.Requireable<(...args: any[]) => any>;
        onBlur: default_2.Requireable<(...args: any[]) => any>;
        onChange: default_2.Requireable<(...args: any[]) => any>;
        itemRender: default_2.Requireable<(...args: any[]) => any>;
        listNoDataRender: default_2.Requireable<(...args: any[]) => any>;
        focusedItemIndex: default_2.Requireable<(...args: any[]) => any>;
        header: default_2.Requireable<default_2.ReactNodeLike>;
        footer: default_2.Requireable<default_2.ReactNodeLike>;
    };
    static propTypes: {
        value: default_2.Requireable<any>;
        defaultValue: default_2.Requireable<any>;
        filterable: default_2.Requireable<boolean>;
        filter: default_2.Requireable<string>;
        virtual: default_2.Requireable<default_2.InferProps<{
            pageSize: default_2.Validator<number>;
            skip: default_2.Validator<number>;
            total: default_2.Validator<number>;
        }>>;
        onFilterChange: default_2.Requireable<(...args: any[]) => any>;
        onPageChange: default_2.Requireable<(...args: any[]) => any>;
        opened: default_2.Requireable<boolean>;
        disabled: default_2.Requireable<boolean>;
        dir: default_2.Requireable<string>;
        tabIndex: default_2.Requireable<number>;
        accessKey: default_2.Requireable<string>;
        data: default_2.Requireable<any[]>;
        textField: default_2.Requireable<string>;
        className: default_2.Requireable<string>;
        label: default_2.Requireable<string>;
        loading: default_2.Requireable<boolean>;
        popupSettings: default_2.Requireable<default_2.InferProps<{
            animate: default_2.Requireable<NonNullable<boolean | default_2.InferProps<{
                openDuration: default_2.Requireable<number>;
                closeDuration: default_2.Requireable<number>;
            }> | null | undefined>>;
            popupClass: default_2.Requireable<string>;
            className: default_2.Requireable<string>;
            appendTo: default_2.Requireable<any>;
            width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
            height: default_2.Requireable<NonNullable<string | number | null | undefined>>;
        }>>;
        onOpen: default_2.Requireable<(...args: any[]) => any>;
        onClose: default_2.Requireable<(...args: any[]) => any>;
        onFocus: default_2.Requireable<(...args: any[]) => any>;
        onBlur: default_2.Requireable<(...args: any[]) => any>;
        onChange: default_2.Requireable<(...args: any[]) => any>;
        itemRender: default_2.Requireable<(...args: any[]) => any>;
        listNoDataRender: default_2.Requireable<(...args: any[]) => any>;
        focusedItemIndex: default_2.Requireable<(...args: any[]) => any>;
        header: default_2.Requireable<default_2.ReactNodeLike>;
        footer: default_2.Requireable<default_2.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);
    didUpdate(): void;
    didMount(): void;
    calculateDir(): void;
    calculatePopupWidth(): void;
    scrollToItem(itemIndex: number, vsEnabled?: boolean, once?: boolean): void;
    updateComponentArgs(args: any): 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.Element;
    getPopupSettings(): DropDownsPopupSettings;
    getAdaptiveAnimation(): boolean;
    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://react.dev/learn/responding-to-events).
     */
    syntheticEvent: React.SyntheticEvent<HTMLElement>;
    /**
     * An event target.
     */
    target: T;
}

/**
 * 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 %}).
 *
 */
export declare const DropDownList: React_2.ForwardRefExoticComponent<DropDownListProps & React_2.RefAttributes<DropDownListHandle>>;

/**
 * Represents the object of the `blur` DropDownList event.
 */
export declare interface DropDownListBlurEvent extends BlurEvent<DropDownListHandle> {
}

/**
 * Represents the object of the `change` DropDownList event.
 */
export declare interface DropDownListChangeEvent extends ChangeEvent<DropDownListHandle> {
}

/**
 * Represents the object of the `close` DropDownList event.
 */
export declare interface DropDownListCloseEvent extends CloseEvent_2<DropDownListHandle> {
}

/**
 * The default props of the DropDownList component.
 */
export declare const dropDownListDefaultProps: {
    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;
};

/**
 * Represents the object of the `filterChange` DropDownList event.
 */
export declare interface DropDownListFilterChangeEvent extends FilterChangeEvent<DropDownListHandle> {
}

/**
 * Represents the object of the `focus` DropDownList event.
 */
export declare interface DropDownListFocusEvent extends FocusEvent_2<DropDownListHandle> {
}

/**
 * Represent the `ref` of the DropDownList component.
 */
export declare interface DropDownListHandle {
    /**
     * The element of the DropDownList component.
     */
    element: HTMLSpanElement | null;
    /**
     * 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;
    /**
     * The focused state of the DropDownList.
     */
    focused: boolean;
    /**
     * The opened state of the DropDownList.
     */
    opened: boolean;
    /**
     * The props of the DropDownList component
     */
    props: Readonly<DropDownListProps>;
    /**
     * Focuses the wrapper of the DropDownList component.
     */
    focus: () => void;
    /**
     * Toggles the popup of the DropDownList component.
     */
    togglePopup: () => void;
}

/**
 * Represents the object of the `open` DropDownList event.
 */
export declare interface DropDownListOpenEvent extends OpenEvent<DropDownListHandle> {
}

/**
 * Represents the object of the `pageChange` DropDownList event.
 */
export declare interface DropDownListPageChangeEvent extends PageChangeEvent<DropDownListHandle> {
}

/**
 * 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 %})).
     *
     * @example
     * ```jsx
     * <DropDownList data={['Item1', 'Item2', 'Item3']} />
     * ```
     */
    data?: any[];
    /**
     * Sets the text of the default empty item. The type of the defined value has to match the data type.
     *
     * @example
     * ```jsx
     * <DropDownList defaultItem="Select an item" />
     * ```
     */
    defaultItem?: any;
    /**
     * Sets the delay before an item search is performed. When filtration is disabled, use this option.
     *
     * @example
     * ```jsx
     * <DropDownList delay={300} />
     * ```
     */
    delay?: number;
    /**
     * Enables a case-insensitive search. When filtering is disabled, use this option.
     *
     * @example
     * ```jsx
     * <DropDownList ignoreCase={true} />
     * ```
     */
    ignoreCase?: boolean;
    /**
     * Sets the opened and closed state of the DropDownList.
     *
     * @example
     * ```jsx
     * <DropDownList opened={true} />
     * ```
     */
    opened?: boolean;
    /**
     * The styles that are applied to the DropDownList.
     *
     * @example
     * ```jsx
     * <DropDownList style={{ width: '200px' }} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <DropDownList value="Item1" />
     * ```
     */
    value?: any;
    /**
     * Sets the default value of the DropDownList ([see example]({% slug defaultitem_dropdownlist %})). Similar to the native `select` HTML element.
     *
     * @example
     * ```jsx
     * <DropDownList defaultValue="Item1" />
     * ```
     */
    defaultValue?: any;
    /**
     * Sets additional classes to the DropDownList.
     *
     * @example
     * ```jsx
     * <DropDownList className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets CSS classes to the expand `icon` DOM element.
     *
     * @example
     * ```jsx
     * <DropDownList iconClassName="custom-icon-class" />
     * ```
     */
    iconClassName?: string;
    /**
     * Sets the specified SVG icon.
     *
     * @example
     * ```jsx
     * <DropDownList svgIcon={{ name: 'custom-icon' }} />
     * ```
     */
    svgIcon?: SVGIcon;
    /**
     * Sets the title attribute to the DropDownList DOM element.
     *
     * @example
     * ```jsx
     * <DropDownList title="Dropdown Title" />
     * ```
     */
    title?: string;
    /**
     * Sets the disabled state of the DropDownList.
     *
     * @example
     * ```jsx
     * <DropDownList disabled={true} />
     * ```
     */
    disabled?: boolean;
    /**
     * Represents the `dir` HTML attribute.
     *
     * @example
     * ```jsx
     * <DropDownList dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Enables the filtering functionality of the DropDownList ([more information and examples]({% slug filtering_dropdownlist %})).
     *
     * @example
     * ```jsx
     * <DropDownList filterable={true} />
     * ```
     */
    filterable?: boolean;
    /**
     * Sets the value of filtering input. Useful for making the filtering input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
     *
     * @example
     * ```jsx
     * <DropDownList filter="search text" />
     * ```
     */
    filter?: string;
    /**
     * Sets the loading state of the DropDownList.
     *
     * @example
     * ```jsx
     * <DropDownList loading={true} />
     * ```
     */
    loading?: boolean;
    /**
     * Specifies the `tabIndex` of the DropDownList.
     *
     * @example
     * ```jsx
     * <DropDownList tabIndex={0} />
     * ```
     */
    tabIndex?: number;
    /**
     * Specifies the `accessKey` of the DropDownList.
     *
     * @example
     * ```jsx
     * <DropDownList accessKey="d" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <DropDownList textField="name" />
     * ```
     */
    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)).
     *
     * @example
     * ```jsx
     * <DropDownList dataItemKey="id" />
     * ```
     */
    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://react.dev/reference/react-dom/components/select) element.
     *
     * @example
     * ```jsx
     * 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.
     *
     * @example
     * ```jsx
     * <DropDownList label="Dropdown Label" />
     * ```
     */
    label?: string;
    /**
     * Specifies the id of the component.
     *
     * @example
     * ```jsx
     * <DropDownList id="dropdown-id" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <DropDownList ariaDescribedBy="error-message-id" />
     * ```
     */
    ariaDescribedBy?: string;
    /**
     * Identifies the element(s) which will label the component.
     *
     * @example
     * ```jsx
     * <DropDownList ariaLabelledBy="label-id" />
     * ```
     */
    ariaLabelledBy?: string;
    /**
     * The accessible label of the component. By default is set to value of `label` prop.
     *
     * @example
     * ```jsx
     * <DropDownList ariaLabel="Accessible Label" />
     * ```
     */
    ariaLabel?: string;
    /**
     * Configures the popup of the DropDownList.
     *
     * @example
     * ```jsx
     * <DropDownList popupSettings={{ animate: true }} />
     * ```
     */
    popupSettings?: DropDownsPopupSettings;
    /**
     * Configures the virtual scrolling of the DropDownList ([see example]({% slug virtualization_dropdownlist %})).
     *
     * @example
     * ```jsx
     * <DropDownList virtual={{ pageSize: 20 }} />
     * ```
     */
    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
     * 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.
     *
     * @example
     * ```jsx
     * <DropDownList onOpen={(event) => console.log('Popup opened')} />
     * ```
     */
    onOpen?: (event: DropDownListOpenEvent) => void;
    /**
     * Fires each time the popup of the DropDownList is about to close.
     *
     * @example
     * ```jsx
     * <DropDownList onClose={(event) => console.log('Popup closed')} />
     * ```
     */
    onClose?: (event: DropDownListCloseEvent) => void;
    /**
     * Fires each time the user focuses the DropDownList.
     *
     * @example
     * ```jsx
     * <DropDownList onFocus={(event) => console.log('Focused')} />
     * ```
     */
    onFocus?: (event: DropDownListFocusEvent) => void;
    /**
     * Fires each time the DropDownList gets blurred.
     *
     * @example
     * ```jsx
     * <DropDownList onBlur={(event) => console.log('Blurred')} />
     * ```
     */
    onBlur?: (event: DropDownListBlurEvent) => void;
    /**
     * Fires each time the value of the DropDownList is about to change ([see examples]({% slug binding_dropdownlist %})).
     *
     * @example
     * ```jsx
     * <DropDownList onChange={(event) => console.log('Value changed')} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <DropDownList onFilterChange={(event) => console.log('Filter changed')} />
     * ```
     */
    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 %})).
     *
     * @example
     * ```jsx
     * <DropDownList onPageChange={(event) => console.log('Page changed')} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <DropDownList itemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <DropDownList valueRender={(element, value) => <span>{value}</span>} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <DropDownList listNoDataRender={(element) => <div>No data available</div>} />
     * ```
     */
    listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
    /**
     * Sets the header component of the DropDownList ([see example]({% slug customrendering_dropdownlist %}#toc-headers-and-footers)).
     *
     * @example
     * ```jsx
     * <DropDownList header={<div>Header Content</div>} />
     * ```
     */
    header?: React.ReactNode;
    /**
     * Sets the footer component of the DropDownList ([see example]({% slug customrendering_dropdownlist %}#toc-headers-and-footers)).
     *
     * @example
     * ```jsx
     * <DropDownList footer={<div>Footer Content</div>} />
     * ```
     */
    footer?: React.ReactNode;
    /**
     * Specifies the `name` property of the `select` DOM element.
     *
     * @example
     * ```jsx
     * <DropDownList name="dropdown-name" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <DropDownList leftRightKeysNavigation={false} />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <DropDownList size="small" />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <DropDownList rounded="large" />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <DropDownList fillMode="flat" />
     * ```
     */
    fillMode?: null | 'solid' | 'flat' | 'outline';
    /**
     * Providing different rendering of the popup element based on the screen dimensions.
     *
     * @default `false`
     *
     * @example
     * ```jsx
     * <DropDownList adaptive={true} />
     * ```
     */
    adaptive?: boolean;
    /**
     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
     * Applicable only when `adaptive` is set to `true`.
     * If not provided, the title will be the same as the label.
     *
     * @example
     * ```jsx
     * <DropDownList adaptiveTitle="Adaptive Popup Title" />
     * ```
     */
    adaptiveTitle?: string;
    /**
     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
     * Applicable only when `adaptive` is set to `true`.
     *
     * @example
     * ```jsx
     * <DropDownList adaptiveSubtitle="Adaptive Popup Subtitle" />
     */
    adaptiveSubtitle?: string;
    /**
     * Sets the data item field that represents the start of a group. Applicable to objects data.
     *
     * @example
     * ```jsx
     * <DropDownList groupField="category" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <DropDownList groupHeaderItemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <DropDownList groupStickyHeaderItemRender={(div, stickyHeaderProps) => <div>{stickyHeaderProps.dataItem}</div>} />
     * ```
     */
    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`.
     *
     * @example
     * ```jsx
     * <DropDownList skipDisabledItems={false} />
     * ```
     */
    skipDisabledItems?: boolean;
    /**
     * @hidden
     */
    unstyled?: DropDownsClassStructure;
}

/**
 * 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
 */
export declare const dropdownsMessages: {
    "dropdowns.clear": string;
    "dropdowns.nodata": string;
    "dropdowns.comboArrowBtnAriaLabelExpand": string;
    "dropdowns.comboArrowBtnAriaLabelCollapse": string;
    "dropdowns.dropDownListArrowBtnAriaLabel": string;
    "dropdowns.dropDownListAdaptiveFilterPlaceholder": 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://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) 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 %})).
     *
     * @example
     * ```jsx
     * <DropDownTree data={[{ text: 'Parent', items: [{ text: 'Child' }] }]} />
     * ```
     */
    data?: any[];
    /**
     * Sets the opened state of the DropDownTree.
     *
     * @example
     * ```jsx
     * <DropDownTree opened={true} />
     * ```
     */
    opened?: boolean;
    /**
     * The styles that are applied to the DropDownTree.
     *
     * @example
     * ```jsx
     * <DropDownTree style={{ width: '300px' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Sets the value of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
     * It can be an object from the data-tree.
     *
     * @example
     * ```jsx
     * <DropDownTree value={{ text: 'Parent' }} />
     * ```
     */
    value?: any;
    /**
     * The hint that is displayed when the DropDownTree is empty.
     *
     * @example
     * ```jsx
     * <DropDownTree placeholder="Select an item" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <DropDownTree dataItemKey="id" />
     * ```
     */
    dataItemKey: string;
    /**
     * Sets additional classes to the DropDownTree.
     *
     * @example
     * ```jsx
     * <DropDownTree className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets the disabled state of the DropDownTree.
     *
     * @example
     * ```jsx
     * <DropDownTree disabled={true} />
     * ```
     */
    disabled?: boolean;
    /**
     * Represents the `dir` HTML attribute.
     *
     * @example
     * ```jsx
     * <DropDownTree dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Renders a floating label for the DropDownTree.
     *
     * @example
     * ```jsx
     * <DropDownTree label="Select an item" />
     * ```
     */
    label?: string;
    /**
     * Specifies the id of the component.
     *
     * @example
     * ```jsx
     * <DropDownTree id="dropdown-tree" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <DropDownTree ariaDescribedBy="description" />
     * ```
     */
    ariaDescribedBy?: string;
    /**
     * Identifies the element(s) which will label the component.
     *
     * @example
     * ```jsx
     * <DropDownTree ariaLabelledBy="label" />
     * ```
     */
    ariaLabelledBy?: string;
    /**
     * Enables the filtering functionality of the DropDownTree ([more information and examples]({% slug filtering_dropdowntree %})).
     *
     * @example
     * ```jsx
     * <DropDownTree filterable={true} />
     * ```
     */
    filterable?: boolean;
    /**
     * Sets the value of filtering input.
     * Useful for making the filtering input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
     *
     * @example
     * ```jsx
     * <DropDownTree filter="search text" />
     * ```
     */
    filter?: string;
    /**
     * Sets the loading state of the DropDownTree ([see example]({% slug filtering_dropdowntree %}#toc-visualize-filtering)).
     *
     * @example
     * ```jsx
     * <DropDownTree loading={true} />
     * ```
     */
    loading?: boolean;
    /**
     * Specifies the `tabIndex` of the DropDownTree.
     *
     * @example
     * ```jsx
     * <DropDownTree tabIndex={0} />
     * ```
     */
    tabIndex?: number;
    /**
     * Specifies the `accessKey` of the DropDownTree.
     *
     * @example
     * ```jsx
     * <DropDownTree accessKey="k" />
     * ```
     */
    accessKey?: string;
    /**
     * Sets the data item field that represents the item text ([see example]({% slug overview_dropdowntree %})).
     *
     * @example
     * ```jsx
     * <DropDownTree textField="name" />
     * ```
     */
    textField: string;
    /**
     * Specifies the name of the field which will provide a Boolean representation of the selected state of the item.
     *
     * @example
     * ```jsx
     * <DropDownTree selectField="selected" />
     * ```
     */
    selectField?: string;
    /**
     * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
     *
     * @example
     * ```jsx
     * <DropDownTree expandField="expanded" />
     * ```
     */
    expandField?: string;
    /**
     * Specifies the name of the field which will provide an array representation of the item subitems.
     * Defaults to 'items'.
     *
     * @example
     * ```jsx
     * <DropDownTree subItemsField="children" />
     * ```
     */
    subItemsField?: string;
    /**
     * Configures the popup of the DropDownTree.
     *
     * @example
     * ```jsx
     * <DropDownTree popupSettings={{ animate: false }} />
     * ```
     */
    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://react.dev/reference/react-dom/components/select) element.
     *
     * @example
     * ```jsx
     * <DropDownTree valueMap={value => value && value.id} />
     * ```
     */
    valueMap?: (value: any) => any;
    /**
     * Fires each time the popup of the DropDownTree is about to open.
     *
     * @example
     * ```jsx
     * <DropDownTree onOpen={(event) => console.log(event)} />
     * ```
     */
    onOpen?: (event: DropDownTreeOpenEvent) => void;
    /**
     * Fires each time the popup of the DropDownTree is about to close.
     *
     * @example
     * ```jsx
     * <DropDownTree onClose={(event) => console.log(event)} />
     * ```
     */
    onClose?: (event: DropDownTreeCloseEvent) => void;
    /**
     * Fires each time the user focuses the DropDownTree.
     *
     * @example
     * ```jsx
     * <DropDownTree onFocus={(event) => console.log(event)} />
     * ```
     */
    onFocus?: (event: DropDownTreeFocusEvent) => void;
    /**
     * Fires each time the DropDownTree gets blurred.
     *
     * @example
     * ```jsx
     * <DropDownTree onBlur={(event) => console.log(event)} />
     * ```
     */
    onBlur?: (event: DropDownTreeBlurEvent) => void;
    /**
     * Fires each time the value of the DropDownTree is about to change ([see examples]({% slug overview_dropdowntree %})).
     *
     * @example
     * ```jsx
     * <DropDownTree onChange={(event) => console.log(event)} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <DropDownTree onFilterChange={(event) => console.log(event)} />
     * ```
     */
    onFilterChange?: (event: DropDownTreeFilterChangeEvent) => void;
    /**
     * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_dropdowntree %})).
     *
     * @example
     * ```jsx
     * <DropDownTree onExpandChange={(event) => console.log(event)} />
     * ```
     */
    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)).
     *
     * @example
     * ```jsx
     * <DropDownTree item={(props) => <CustomItem {...props} />} />
     * ```
     */
    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)).
     *
     * @example
     * ```jsx
     * <DropDownTree valueHolder={(props) => <CustomValueHolder {...props} />} />
     * ```
     */
    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)).
     *
     * @example
     * ```jsx
     * <DropDownTree listNoData={() => <div>No data available</div>} />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <DropDownTree size="large" />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <DropDownTree rounded="full" />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <DropDownTree fillMode="flat" />
     * ```
     */
    fillMode?: null | 'solid' | 'flat' | 'outline';
    /**
     * Providing different rendering of the popup element based on the screen dimensions.
     *
     * @default `false`
     *
     * @example
     * ```jsx
     * <DropDownTree adaptive={true} />
     * ```
     */
    adaptive?: boolean;
    /**
     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
     * Applicable only when `adaptive` is set to `true`.
     * If not provided, the title will be the same as the label.
     *
     * @example
     * ```jsx
     * <DropDownTree adaptiveTitle="Adaptive Popup Title" />
     * ```
     */
    adaptiveTitle?: string;
    /**
     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
     * Applicable only when `adaptive` is set to `true`.
     *
     * @example
     * ```jsx
     * <DropDownTree adaptiveSubtitle="Adaptive Popup Subtitle" />
     * ```
     */
    adaptiveSubtitle?: 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://react.dev/learn/responding-to-events).
     */
    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 const List: (props: ListProps) => string | number | bigint | boolean | Iterable<React_2.ReactNode> | Promise<string | number | bigint | boolean | React_2.ReactPortal | React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode> | null | undefined> | JSX.Element | null | undefined;

/**
 * @hidden
 */
export declare const ListContainer: (props: ListContainerProps) => JSX.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';
    renderListFilterWrapper?: boolean;
    renderPrefixSeparator?: boolean;
    placeholder?: string;
}

/**
 * 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 const ListItem: (props: ListItemProps) => string | number | bigint | boolean | Iterable<React_2.ReactNode> | Promise<string | number | bigint | boolean | React_2.ReactPortal | React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode> | null | undefined> | JSX.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;
    hasDuplicates?: boolean;
    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`.
     *
     * @example
     * ```jsx
     * <MultiSelect allowCustom={true} />
     * ```
     */
    allowCustom?: boolean;
    /**
     * Sets the data of the MultiSelect ([see example]({% slug binding_multiselect %})).
     *
     * @example
     * ```jsx
     * <MultiSelect data={['Option1', 'Option2', 'Option3']} />
     * ```
     */
    data?: any[];
    /**
     * Sets the opened and closed state of the MultiSelect.
     *
     * @example
     * ```jsx
     * <MultiSelect opened={true} />
     * ```
     */
    opened?: boolean;
    /**
     * Determines whether to close the options list of the MultiSelect after the item selection is finished.
     *
     * @example
     * ```jsx
     * <MultiSelect autoClose={false} />
     * ```
     */
    autoClose?: boolean;
    /**
     * The styles that are applied to the MultiSelect.
     *
     * @example
     * ```jsx
     * <MultiSelect style={{ width: '300px' }} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <MultiSelect value={['Option1', 'Option2']} />
     * ```
     */
    value?: Array<any>;
    /**
     * The hint that is displayed when the MultiSelect is empty.
     *
     * @example
     * ```jsx
     * <MultiSelect placeholder="Select an option" />
     * ```
     */
    placeholder?: string;
    /**
     * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
     *
     * @example
     * ```jsx
     * <MultiSelect tags={[{ text: 'Tag1' }, { text: 'Tag2' }]} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <MultiSelect dataItemKey="id" />
     * ```
     */
    dataItemKey?: string;
    /**
     * Sets the default value of the MultiSelect. Similar to the native `select` HTML element.
     *
     * @example
     * ```jsx
     * <MultiSelect defaultValue={['Option1']} />
     * ```
     */
    defaultValue?: Array<any>;
    /**
     * Sets additional classes to the MultiSelect.
     *
     * @example
     * ```jsx
     * <MultiSelect className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets the disabled state of the MultiSelect.
     *
     * @example
     * ```jsx
     * <MultiSelect disabled={true} />
     * ```
     */
    disabled?: boolean;
    /**
     * Represents the `dir` HTML attribute.
     *
     * @example
     * ```jsx
     * <MultiSelect dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Enables the filtering functionality of the MultiSelect ([more information and examples]({% slug filtering_multiselect %})).
     *
     * @example
     * ```jsx
     * <MultiSelect filterable={true} />
     * ```
     */
    filterable?: boolean;
    /**
     * Specifies the id of the component.
     *
     * @example
     * ```jsx
     * <MultiSelect id="multi-select" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <MultiSelect ariaDescribedBy="description" />
     * ```
     */
    ariaDescribedBy?: string;
    /**
     * Specifies the accessible label of the interactive component.
     *
     * @example
     * ```jsx
     * <MultiSelect ariaLabel="MultiSelect" />
     * ```
     */
    ariaLabel?: string;
    /**
     * Identifies the element(s) which will label the component.
     *
     * @example
     * ```jsx
     * <MultiSelect ariaLabelledBy="label" />
     * ```
     */
    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
     * 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://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
     *
     * @example
     * ```jsx
     * <MultiSelect filter="Option" />
     * ```
     */
    filter?: string;
    /**
     * Sets the value of the adaptive filtering input of the of MultiSelect.
     *
     * @example
     * ```jsx
     * <MultiSelect adaptiveFilter="Option" />
     * ```
     */
    adaptiveFilter?: string;
    /**
     * Sets the loading state of the MultiSelect ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)).
     *
     * @example
     * ```jsx
     * <MultiSelect loading={true} />
     * ```
     */
    loading?: boolean;
    /**
     * Specifies the `tabIndex` of the MultiSelect.
     *
     * @example
     * ```jsx
     * <MultiSelect tabIndex={0} />
     * ```
     */
    tabIndex?: number;
    /**
     * Specifies the `accessKey` of the MultiSelect.
     *
     * @example
     * ```jsx
     * <MultiSelect accessKey="a" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <MultiSelect textField="name" />
     * ```
     */
    textField?: string;
    /**
     * Renders a floating label for the MultiSelect.
     *
     * @example
     * ```jsx
     * <MultiSelect label="Select an option" />
     * ```
     */
    label?: string;
    /**
     * Configures the popup of the MultiSelect.
     *
     * @example
     * ```jsx
     * <MultiSelect popupSettings={{ animate: true }} />
     * ```
     */
    popupSettings?: DropDownsPopupSettings;
    /**
     * Configures the virtual scrolling of the MultiSelect ([see example]({% slug virtualization_multiselect %})).
     *
     * @example
     * ```jsx
     * <MultiSelect virtual={{ pageSize: 20 }} />
     * ```
     */
    virtual?: VirtualizationSettings;
    /**
     * Fires each time the popup of the MultiSelect is about to open.
     *
     * @example
     * ```jsx
     * <MultiSelect onOpen={(event) => console.log(event)} />
     * ```
     */
    onOpen?: (event: MultiSelectOpenEvent) => void;
    /**
     * Fires each time the popup of the MultiSelect is about to close.
     *
     * @example
     * ```jsx
     * <MultiSelect onClose={(event) => console.log(event)} />
     * ```
     */
    onClose?: (event: MultiSelectCloseEvent) => void;
    /**
     * Fires each time the user focuses the MultiSelect.
     *
     * @example
     * ```jsx
     * <MultiSelect onFocus={(event) => console.log(event)} />
     * ```
     */
    onFocus?: (event: MultiSelectFocusEvent) => void;
    /**
     * Fires each time the MultiSelect gets blurred.
     *
     * @example
     * ```jsx
     * <MultiSelect onBlur={(event) => console.log(event)} />
     * ```
     */
    onBlur?: (event: MultiSelectBlurEvent) => void;
    /**
     * Fires each time the value of the MultiSelect is about to change ([see examples]({% slug binding_multiselect %})).
     *
     * @example
     * ```jsx
     * <MultiSelect onChange={(event) => console.log(event)} />
     * ```
     */
    onChange?: (event: MultiSelectChangeEvent) => void;
    /**
     * Fires each time the popup of the MultiSelect is about to cancel in ([adaptive mode]({% slug adaptive_rendering_multiselect %})).
     *
     * @example
     * ```jsx
     * <MultiSelect onCancel={(event) => console.log(event)} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <MultiSelect onFilterChange={(event) => console.log(event)} />
     * ```
     */
    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 %})).
     *
     * @example
     * ```jsx
     * <MultiSelect onPageChange={(event) => console.log(event)} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <MultiSelect itemRender={(li, itemProps) => <div>{itemProps.dataItem}</div>} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <MultiSelect listNoDataRender={(element) => <div>No data available</div>} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <MultiSelect tagRender={(tagData, tag) => <span>{tagData.text}</span>} />
     * ```
     */
    tagRender?: (tagData: TagData, tag: React.ReactElement<any>) => React.ReactElement<any>;
    /**
     * Sets the header component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
     *
     * @example
     * ```jsx
     * <MultiSelect header={<div>Header</div>} />
     * ```
     */
    header?: React.ReactNode;
    /**
     * Sets the footer component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
     *
     * @example
     * ```jsx
     * <MultiSelect footer={<div>Footer</div>} />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <MultiSelect size="small" />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <MultiSelect rounded="large" />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <MultiSelect fillMode="flat" />
     * ```
     */
    fillMode?: null | 'solid' | 'flat' | 'outline';
    /**
     * Sets the data item field that represents the start of a group. Applicable to objects data.
     *
     * @example
     * ```jsx
     * <MultiSelect groupField="category" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <MultiSelect groupHeaderItemRender={(li, itemProps) => <div>{itemProps.dataItem}</div>} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <MultiSelect groupStickyHeaderItemRender={(div, stickyHeaderProps) => <div>{stickyHeaderProps.dataItem}</div>} />
     * ```
     */
    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.
     *
     * @default `false`
     *
     * @example
     * ```jsx
     * <MultiSelect adaptive={true} />
     * ```
     */
    adaptive?: boolean;
    /**
     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
     * Applicable only when `adaptive` is set to `true`.
     * If not provided, the title will be the same as the label.
     *
     * @example
     * ```jsx
     * <MultiSelect adaptiveTitle="Adaptive Popup Title" />
     * ```
     */
    adaptiveTitle?: string;
    /**
     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
     * Applicable only when `adaptive` is set to `true`.
     *
     * @example
     * ```jsx
     * <MultiSelect adaptiveSubtitle="Adaptive Popup Subtitle" />
     */
    adaptiveSubtitle?: 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`.
     *
     * @example
     * ```jsx
     * <MultiSelect skipDisabledItems={false} />
     * ```
     */
    skipDisabledItems?: boolean;
    /**
     * Sets a custom prefix to the MultiSelect component.
     *
     * @example
     * ```jsx
     * <MultiSelect prefix={<span>Prefix</span>} />
     * ```
     */
    prefix?: CustomComponent<any>;
    /**
     * Sets a custom suffix to the MultiSelect component.
     *
     * @example
     * ```jsx
     * <MultiSelect suffix={<span>Suffix</span>} />
     * ```
     */
    suffix?: CustomComponent<any>;
    /**
     * Sets the HTML attributes of the inner focusable input element.
     * Attributes which are essential for certain component functionalities cannot be changed.
     *
     * @example
     * ```jsx
     * <MultiSelect inputAttributes={{ maxLength: 10 }} />
     * ```
     */
    inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
    /**
     * @hidden
     * This prop is provided by the withAdaptiveModeContext HOC to subscribe to AdaptiveModeContext.
     */
    _adaptiveMode?: AdaptiveModeContextType;
}

/**
 * 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://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) 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 %})).
     *
     * @example
     * ```jsx
     * <MultiSelectTree data={[{ text: 'Node1' }, { text: 'Node2' }]} />
     * ```
     */
    data?: any[];
    /**
     * Sets the opened state of the MultiSelectTree.
     *
     * @example
     * ```jsx
     * <MultiSelectTree opened={true} />
     * ```
     */
    opened?: boolean;
    /**
     * The styles that are applied to the MultiSelectTree.
     *
     * @example
     * ```jsx
     * <MultiSelectTree style={{ width: '400px' }} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <MultiSelectTree value={['Node1']} />
     * ```
     */
    value?: Array<any>;
    /**
     * The hint that is displayed when the MultiSelectTree is empty.
     *
     * @example
     * ```jsx
     * <MultiSelectTree placeholder="Select items" />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <MultiSelectTree dataItemKey="id" />
     * ```
     */
    dataItemKey: string;
    /**
     * Sets additional classes to the MultiSelectTree.
     *
     * @example
     * ```jsx
     * <MultiSelectTree className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets the disabled state of the MultiSelectTree.
     *
     * @example
     * ```jsx
     * <MultiSelectTree disabled={true} />
     * ```
     */
    disabled?: boolean;
    /**
     * Represents the `dir` HTML attribute.
     *
     * @example
     * ```jsx
     * <MultiSelectTree dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Renders a floating label for the MultiSelectTree.
     *
     * @example
     * ```jsx
     * <MultiSelectTree label="Select items" />
     * ```
     */
    label?: string;
    /**
     * Specifies the id of the component.
     *
     * @example
     * ```jsx
     * <MultiSelectTree id="multi-select-tree" />
     * ```
     */
    id?: string;
    /**
     * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
     *
     * @example
     * ```jsx
     * <MultiSelectTree tags={[{ text: 'Tag1' }, { text: 'Tag2' }]} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <MultiSelectTree ariaDescribedBy="description" />
     * ```
     */
    ariaDescribedBy?: string;
    /**
     * Identifies the element(s) which will label the component.
     *
     * @example
     * ```jsx
     * <MultiSelectTree ariaLabelledBy="label" />
     * ```
     */
    ariaLabelledBy?: string;
    /**
     * Enables the filtering functionality of the MultiSelectTree ([more information and examples]({% slug filtering_multiselecttree %})).
     *
     * @example
     * ```jsx
     * <MultiSelectTree filterable={true} />
     * ```
     */
    filterable?: boolean;
    /**
     * Sets the value of filtering input.
     * Useful for making the filtering input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
     *
     * @example
     * ```jsx
     * <MultiSelectTree filter="search text" />
     * ```
     */
    filter?: string;
    /**
     * Sets the loading state of the MultiSelectTree ([see example]({% slug filtering_multiselecttree %}#toc-visualize-filtering)).
     *
     * @example
     * ```jsx
     * <MultiSelectTree loading={true} />
     * ```
     */
    loading?: boolean;
    /**
     * Specifies the `tabIndex` of the MultiSelectTree.
     *
     * @example
     * ```jsx
     * <MultiSelectTree tabIndex={0} />
     * ```
     */
    tabIndex?: number;
    /**
     * Specifies the `accessKey` of the MultiSelectTree.
     *
     * @example
     * ```jsx
     * <MultiSelectTree accessKey="m" />
     * ```
     */
    accessKey?: string;
    /**
     * Sets the data item field that represents the item text ([see example]({% slug overview_multiselecttree %})).
     *
     * @example
     * ```jsx
     * <MultiSelectTree textField="name" />
     * ```
     */
    textField: string;
    /**
     * Specifies the name of the field which will provide a Boolean representation of the checked state of the item.
     *
     * @example
     * ```jsx
     * <MultiSelectTree checkField="checked" />
     * ```
     */
    checkField?: string;
    /**
     * Specifies the name of the field which will provide a Boolean representation of the checked indeterminate state of the item.
     *
     * @example
     * ```jsx
     * <MultiSelectTree checkIndeterminateField="indeterminate" />
     * ```
     */
    checkIndeterminateField?: string;
    /**
     * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
     *
     * @example
     * ```jsx
     * <MultiSelectTree expandField="expanded" />
     * ```
     */
    expandField?: string;
    /**
     * Specifies the name of the field which will provide an array representation of the item subitems.
     * Defaults to 'items'.
     *
     * @example
     * ```jsx
     * <MultiSelectTree subItemsField="children" />
     * ```
     */
    subItemsField?: string;
    /**
     * Configures the popup of the MultiSelectTree.
     *
     * @example
     * ```jsx
     * <MultiSelectTree popupSettings={{ animate: true }} />
     * ```
     */
    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://react.dev/reference/react-dom/components/select) element.
     *
     * @example
     * ```jsx
     * <MultiSelectTree valueMap={value => value && value.id} />
     * ```
     */
    valueMap?: (value: Array<any>) => any;
    /**
     * Fires each time the popup of the MultiSelectTree is about to open.
     *
     * @example
     * ```jsx
     * <MultiSelectTree onOpen={(event) => console.log(event)} />
     * ```
     */
    onOpen?: (event: MultiSelectTreeOpenEvent) => void;
    /**
     * Fires each time the popup of the MultiSelectTree is about to close.
     *
     * @example
     * ```jsx
     * <MultiSelectTree onClose={(event) => console.log(event)} />
     * ```
     */
    onClose?: (event: MultiSelectTreeCloseEvent) => void;
    /**
     * Fires each time the user focuses the MultiSelectTree.
     *
     * @example
     * ```jsx
     * <MultiSelectTree onFocus={(event) => console.log(event)} />
     * ```
     */
    onFocus?: (event: MultiSelectTreeFocusEvent) => void;
    /**
     * Fires each time the MultiSelectTree gets blurred.
     *
     * @example
     * ```jsx
     * <MultiSelectTree onBlur={(event) => console.log(event)} />
     * ```
     */
    onBlur?: (event: MultiSelectTreeBlurEvent) => void;
    /**
     * Fires each time the value of the MultiSelectTree is about to change ([see examples]({% slug overview_multiselecttree %})).
     *
     * @example
     * ```jsx
     * <MultiSelectTree onChange={(event) => console.log(event)} />
     * ```
     */
    onChange?: (event: MultiSelectTreeChangeEvent) => void;
    /**
     * Fires each time the popup of the MultiSelectTree is about to cancel in ([adaptive mode]({% slug adaptive_rendering_multiselecttree %})).
     *
     * @example
     * ```jsx
     * <MultiSelectTree onCancel={(event) => console.log(event)} />
     * ```
     */
    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.
     *
     * @example
     * ```jsx
     * <MultiSelectTree onFilterChange={(event) => console.log(event)} />
     * ```
     */
    onFilterChange?: (event: MultiSelectTreeFilterChangeEvent) => void;
    /**
     * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_multiselecttree %})).
     *
     * @example
     * ```jsx
     * <MultiSelectTree onExpandChange={(event) => console.log(event)} />
     * ```
     */
    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)).
     *
     * @example
     * ```jsx
     * <MultiSelectTree item={(props) => <div>{props.item.text}</div>} />
     * ```
     */
    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)).
     *
     * @example
     * ```jsx
     * <MultiSelectTree listNoData={() => <div>No data available</div>} />
     * ```
     */
    listNoData?: React_2.ComponentType<MultiSelectTreeListNoDataProps>;
    /**
     * Defines the component that will be used for rendering each of the MultiSelectTree tags.
     *
     * @example
     * ```jsx
     * <MultiSelectTree tag={(props) => <span>{props.tagData.text}</span>} />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <MultiSelectTree size="large" />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <MultiSelectTree rounded="full" />
     * ```
     */
    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`
     *
     * @example
     * ```jsx
     * <MultiSelectTree fillMode="outline" />
     * ```
     */
    fillMode?: null | 'solid' | 'flat' | 'outline';
    /**
     * Providing different rendering of the popup element based on the screen dimensions.
     *
     * @default `false`
     *
     * @example
     * ```jsx
     * <MultiSelectTree adaptive={true} />
     * ```
     */
    adaptive?: boolean;
    /**
     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
     * Applicable only when `adaptive` is set to `true`.
     * If not provided, the title will be the same as the label.
     *
     * @example
     * ```jsx
     * <MultiSelectTree adaptiveTitle="Adaptive Popup Title" />
     * ```
     */
    adaptiveTitle?: string | React_2.ReactNode;
    /**
     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
     * Applicable only when `adaptive` is set to `true`.
     *
     * @example
     * ```jsx
     * <MultiSelectTree adaptiveSubtitle="Adaptive Popup Subtitle" />
     * ```
     */
    adaptiveSubtitle?: string;
}

/**
 * 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: default_2.Requireable<boolean>;
        value: default_2.Requireable<any[]>;
        defaultValue: default_2.Requireable<any[]>;
        dataItemKey: default_2.Requireable<string>;
        placeholder: default_2.Requireable<string>;
        tags: default_2.Requireable<(default_2.InferProps<{
            text: default_2.Requireable<string>;
            data: default_2.Requireable<any[]>;
        }> | null | undefined)[]>;
        tagRender: default_2.Requireable<(...args: any[]) => any>;
        id: default_2.Requireable<string>;
        ariaLabelledBy: default_2.Requireable<string>;
        ariaDescribedBy: default_2.Requireable<string>;
        groupField: default_2.Requireable<string>;
        list: default_2.Requireable<any>;
        adaptive: default_2.Requireable<boolean>;
        adaptiveTitle: default_2.Requireable<string>;
        adaptiveSubtitle: default_2.Requireable<string>;
        onCancel: default_2.Requireable<(...args: any[]) => any>;
        skipDisabledItems: default_2.Requireable<boolean>;
        inputAttributes: default_2.Requireable<object>;
        filterable: default_2.Requireable<boolean>;
        filter: default_2.Requireable<string>;
        virtual: default_2.Requireable<default_2.InferProps<{
            pageSize: default_2.Validator<number>;
            skip: default_2.Validator<number>;
            total: default_2.Validator<number>;
        }>>;
        onFilterChange: default_2.Requireable<(...args: any[]) => any>;
        onPageChange: default_2.Requireable<(...args: any[]) => any>;
        opened: default_2.Requireable<boolean>;
        disabled: default_2.Requireable<boolean>;
        dir: default_2.Requireable<string>;
        tabIndex: default_2.Requireable<number>;
        accessKey: default_2.Requireable<string>;
        data: default_2.Requireable<any[]>;
        textField: default_2.Requireable<string>;
        className: default_2.Requireable<string>;
        label: default_2.Requireable<string>;
        loading: default_2.Requireable<boolean>;
        popupSettings: default_2.Requireable<default_2.InferProps<{
            animate: default_2.Requireable<NonNullable<boolean | default_2.InferProps<{
                openDuration: default_2.Requireable<number>;
                closeDuration: default_2.Requireable<number>;
            }> | null | undefined>>;
            popupClass: default_2.Requireable<string>;
            className: default_2.Requireable<string>;
            appendTo: default_2.Requireable<any>;
            width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
            height: default_2.Requireable<NonNullable<string | number | null | undefined>>;
        }>>;
        onOpen: default_2.Requireable<(...args: any[]) => any>;
        onClose: default_2.Requireable<(...args: any[]) => any>;
        onFocus: default_2.Requireable<(...args: any[]) => any>;
        onBlur: default_2.Requireable<(...args: any[]) => any>;
        onChange: default_2.Requireable<(...args: any[]) => any>;
        itemRender: default_2.Requireable<(...args: any[]) => any>;
        listNoDataRender: default_2.Requireable<(...args: any[]) => any>;
        focusedItemIndex: default_2.Requireable<(...args: any[]) => any>;
        header: default_2.Requireable<default_2.ReactNodeLike>;
        footer: default_2.Requireable<default_2.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();
    private showLicenseWatermark;
    private validate;
    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 MultiSelect.
     */
    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.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 | bigint | boolean | Iterable<React_2.ReactNode> | Promise<string | number | bigint | boolean | React_2.ReactPortal | React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode> | null | undefined> | JSX.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;
    ariaLabel?: string;
    ariaDescribedBy?: string;
    ariaRequired?: boolean;
    ariaControls?: string;
    unstyled?: DropDownsClassStructure;
    inputAttributes?: React_2.InputHTMLAttributes<HTMLInputElement>;
}

/**
 * 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.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<any>) => React_2.ReactElement<any>;
    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 {
    table: HTMLTableElement | null;
    total: number;
    enabled: boolean;
    skip: number;
    pageSize: number;
    PageChange: ((event: Page, syntheticEvent: React_2.SyntheticEvent<any>) => void) | null;
    scrollElement: HTMLDivElement | null;
    listTransform: string;
    itemHeight: number;
    containerHeight: number;
    rowHeightService?: RowHeightService;
    private reactVersion;
    private scrollSyncing;
    private lastLoaded;
    private firstLoaded;
    private lastScrollTop;
    private listTranslate;
    get translate(): number;
    list: HTMLUListElement | null;
    container: HTMLDivElement | null;
    constructor();
    translateTo(dY: number, force?: boolean): void;
    changePage(skip: number, e: React_2.SyntheticEvent<HTMLDivElement>): void;
    reset(): void;
    scrollToEnd(): void;
    calcScrollElementHeight: () => boolean;
    scrollerRef: (element: HTMLDivElement | null) => void;
    scrollHandler(e: React_2.SyntheticEvent<HTMLDivElement>): void;
    private getRowHeightService;
}

export { }