/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { MultiSelect } from './MultiSelect.js';
import { AdaptiveModeContextType, CustomComponent, FormComponentProps } from '@progress/kendo-react-common';
import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent, CancelEvent } from './../common/events.js';
import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings.js';
import { ListGroupItemProps } from '../common/ListGroupItem.js';
import { GroupStickyHeaderProps } from '../common/GroupStickyHeader.js';
import { ListItemProps } from '../common/ListItem.js';
import { TagData } from './TagList.js';
/**
 * Represents the object of the `filterChange` MultiSelect event.
 */
export interface MultiSelectFilterChangeEvent extends FilterChangeEvent<MultiSelect> {
}
/**
 * Represents the object of the `change` MultiSelect event.
 */
export interface MultiSelectChangeEvent extends ChangeEvent<MultiSelect> {
}
/**
 * Represents the object of the `onCancel` MultiSelect event.
 */
export interface MultiSelectCancelEvent extends CancelEvent<MultiSelect> {
}
/**
 * Represents the object of the `open` MultiSelect event.
 */
export interface MultiSelectOpenEvent extends OpenEvent<MultiSelect> {
}
/**
 * Represents the object of the `close` MultiSelect event.
 */
export interface MultiSelectCloseEvent extends CloseEvent<MultiSelect> {
}
/**
 * Represents the object of the `focus` MultiSelect event.
 */
export interface MultiSelectFocusEvent extends FocusEvent<MultiSelect> {
}
/**
 * Represents the object of the `blur` MultiSelect event.
 */
export interface MultiSelectBlurEvent extends BlurEvent<MultiSelect> {
}
/**
 * Represents the object of the `pageChange` MultiSelect event.
 */
export interface MultiSelectPageChangeEvent extends PageChangeEvent<MultiSelect> {
}
/**
 * Represents the props of the [KendoReact MultiSelect component](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect).
 */
export interface MultiSelectProps extends FormComponentProps {
    /**
     * Specifies whether the MultiSelect allows user-defined values that are not present in the dataset ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/custom-values)). Defaults to `false`.
     *
     * @example
     * ```jsx
     * <MultiSelect allowCustom={true} />
     * ```
     */
    allowCustom?: boolean;
    /**
     * Sets the data of the MultiSelect ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/binding)).
     *
     * @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](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/binding)). 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](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/custom-tags)).
     *
     * @example
     * ```jsx
     * <MultiSelect tags={[{ text: 'Tag1' }, { text: 'Tag2' }]} />
     * ```
     */
    tags?: Array<TagData>;
    /**
     * Sets the key for comparing the data items of the MultiSelect ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/binding#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](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/filtering)).
     *
     * @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" />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaDescribedBy?: string;
    /**
     * Specifies the accessible label of the interactive component.
     *
     * @example
     * ```jsx
     * <MultiSelect ariaLabel="MultiSelect" />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaLabel?: string;
    /**
     * Identifies the element(s) which will label the component.
     *
     * @example
     * ```jsx
     * <MultiSelect ariaLabelledBy="label" />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    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](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/filtering#toc-basic-configuration)).
     *
     * @example
     * ```jsx
     * <MultiSelect loading={true} />
     * ```
     */
    loading?: boolean;
    /**
     * Specifies the `tabIndex` of the MultiSelect.
     *
     * @example
     * ```jsx
     * <MultiSelect tabIndex={0} />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    tabIndex?: number;
    /**
     * Specifies the `accessKey` of the MultiSelect.
     *
     * @example
     * ```jsx
     * <MultiSelect accessKey="a" />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    accessKey?: string;
    /**
     * Sets the data item field that represents the item text ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/binding#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](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/virtualization)).
     *
     * @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](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/binding)).
     *
     * @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](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/adaptive-rendering)).
     *
     * @example
     * ```jsx
     * <MultiSelect onCancel={(event) => console.log(event)} />
     * ```
     */
    onCancel?: (event: MultiSelectCancelEvent) => void;
    /**
     * Fires each time the user types in the filter input ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/filtering#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](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/virtualization)).
     *
     * @example
     * ```jsx
     * <MultiSelect onPageChange={(event) => console.log(event)} />
     * ```
     */
    onPageChange?: (event: MultiSelectPageChangeEvent) => void;
    /**
     * Fires when a MultiSelect item is about to be rendered ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/custom-rendering#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](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/custom-rendering#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](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/custom-rendering#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](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/custom-rendering#toc-headers-and-footers)).
     *
     * @example
     * ```jsx
     * <MultiSelect header={<div>Header</div>} />
     * ```
     */
    header?: React.ReactNode;
    /**
     * Sets the footer component of the MultiSelect ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/custom-rendering#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
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <MultiSelect size="small" />
     * ```
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * Configures the `roundness` of the MultiSelect.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - full
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <MultiSelect rounded="large" />
     * ```
     */
    rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
    /**
     * Configures the `fillMode` of the MultiSelect.
     *
     * The available options are:
     * - solid
     * - flat
     * - outline
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <MultiSelect fillMode="flat" />
     * ```
     */
    fillMode?: '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;
    /**
     * 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;
}