/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { FormComponentProps } from '@progress/kendo-vue-common';
import { ItemRenderProps } from '@progress/kendo-vue-treeview';
import { FilterChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent } from '../common/events';
import { DropDownsPopupSettings } from '../common/settings';
import { TagData } from '../MultiSelect/TagList';
/**
 * Represents the object of the `onFilterChange` MultiSelectTree event.
 */
export interface MultiSelectTreeFilterChangeEvent extends FilterChangeEvent {
}
export type MultiSelectTreeChangeEventOperation = 'clear' | 'delete' | 'toggle';
/**
 * Represents the object of the `onChange` MultiSelectTree event.
 */
export interface MultiSelectTreeChangeEvent extends DropdownEvent {
    /**
     * The items related to current operation.
     */
    items: any[];
    /**
     * The new value.
     */
    value: any[];
    /**
     * Describes the current operation:
     * * `clear` - clear button is clicked and value is cleared. Null value is returned.
     * * `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;
}
/**
 * Represents the object of the `onOpen` MultiSelectTree event.
 */
export interface MultiSelectTreeOpenEvent extends OpenEvent {
}
/**
 * Represents the object of the `onClose` MultiSelectTree event.
 */
export interface MultiSelectTreeCloseEvent extends CloseEvent {
}
/**
 * Represents the object of the `onFocus` MultiSelectTree event.
 */
export interface MultiSelectTreeFocusEvent extends FocusEvent {
}
/**
 * Represents the object of the `onBlur` MultiSelectTree event.
 */
export interface MultiSelectTreeBlurEvent extends BlurEvent {
}
/**
 * Represents the object of the `onExpandChange` MultiSelectTree event.
 */
export interface MultiSelectTreeExpandEvent extends DropdownEvent {
    item: any;
    level: number[];
}
/**
 * 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 interface MultiSelectTreeItemProps extends ItemRenderProps {
}
/**
 * The props of component that will be used for rendering each of the MultiSelectTree tags
 */
export interface MultiSelectTreeTagProps {
    tagData: TagData;
    guid: string;
    focusedTag?: TagData;
    onTagDelete: (items: Array<any>, event: any) => void;
}
/**
 * The props of the `ListNoData` component ([see example]({% slug customrendering_multiselecttree %}#toc-no-data)).
 */
export interface MultiSelectTreeListNoDataProps {
}
/**
 * Represents the props of the [Kendo UI for Vue MultiSelectTree component]({% slug overview_multiselecttree %}).
 */
export interface MultiSelectTreeProps extends FormComponentProps {
    /**
     * Sets the data of the MultiSelectTree ([see example]({% slug overview_multiselecttree %})).
     */
    dataItems?: any[];
    /**
     * Sets the opened state of the MultiSelectTree.
     */
    opened?: boolean;
    /**
     * Sets the value of the MultiSelectTree. It can either be an array of the primitive (string, numbers) or of the complex (objects) type.
     */
    value?: Array<any>;
    /**
     * Sets the modelValue of the MultiSelectTree. It can either be an array of the primitive (string, numbers) or of the complex (objects) type.
     */
    modelValue?: Array<any>;
    /**
     * The hint that is displayed when the MultiSelectTree is empty.
     */
    placeholder?: string;
    /**
     * Sets the key for comparing the data items of the MultiSelectTree ([see example]({% slug overview_multiselecttree %})).
     * If `dataItemKey` is not set, the MultiSelectTree compares the items by reference.
     */
    dataItemKey: string;
    /**
     * Sets additional classes to the MultiSelectTree.
     */
    className?: string;
    /**
     * Sets the disabled state of the MultiSelectTree.
     */
    disabled?: boolean;
    /**
     * Represents the `dir` HTML attribute.
     */
    dir?: string;
    /**
     * Renders a floating label for the MultiSelectTree.
     */
    label?: string;
    /**
     * Specifies the id of the component.
     */
    id?: string;
    /**
     * Specifies the validationMessage of the component.
     */
    validationMessage?: string;
    /**
     * If set to `false`, no visual representation of the invalid state of the component will be applied.
     *
     */
    validityStyles?: boolean;
    /**
     * Overrides the validity state of the component.
     * If `valid` is set, the `required` property will be ignored.
     *
     */
    valid?: boolean;
    /**
     * Specifies the `name` property of the `input` DOM element.
     *
     */
    name?: string;
    /**
     * Specifies if `null` is a valid value for the component.
     *
     */
    required?: boolean;
    /**
     * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
     */
    tags?: Array<TagData>;
    /**
     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
     * For example these elements could contain error or hint message.
     */
    ariaDescribedBy?: string;
    /**
     * Identifies the element(s) which will label the component.
     */
    ariaLabelledBy?: string;
    /**
     * Enables the filtering functionality of the MultiSelectTree ([more information and examples]({% slug filtering_multiselecttree %})).
     */
    filterable?: boolean;
    /**
     * Sets the value of filtering input.
     * Useful for making the filtering input a controlled component.
     */
    filter?: string;
    /**
     * Sets the loading state of the MultiSelectTree ([see example]({% slug filtering_multiselecttree %}#toc-visualize-filtering)).
     */
    loading?: boolean;
    /**
     * Specifies the `tabIndex` of the MultiSelectTree.
     */
    tabIndex?: number;
    /**
     * Specifies the `accessKey` of the MultiSelectTree.
     */
    accessKey?: string;
    /**
     * Sets the data item field that represents the item text ([see example]({% slug overview_multiselecttree %})).
     */
    textField: string;
    /**
     * Specifies the name of the field which will provide a Boolean representation of the checked state of the item.
     */
    checkField?: string;
    /**
     * Specifies the name of the field which will provide a Boolean representation of the checked indeterminaet state of the item.
     */
    checkIndeterminateField?: string;
    /**
     * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
     */
    expandField?: string;
    /**
     * Specifies the name of the field which will provide an array representation of the item subitems.
     * Defaults to 'items'.
     */
    subItemsField?: string;
    /**
     * Configures the popup of the MultiSelectTree.
     */
    popupSettings?: DropDownsPopupSettings;
    /**
     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select` element.
     *
     * @example
     * ```jsx-no-run
     * class App extends React.Component {
     *    render() {
     *       return (
     *          <form>
     *              <MultiSelectTree
     *                  data={[ { text: "Austria", id: 1 } , { text: "Belarus", id: 2 } ]}
     *                  valueMap={value => value && value.id}
     *              />
     *              <button type="submit">Submit</button>
     *          </form>
     *       );
     *    }
     * }
     * ReactDOM.render(<App />, document.querySelector('my-app'));
     * ```
     */
    valueMap?: (value: Array<any>) => any;
    /**
     * Fires each time the popup of the MultiSelectTree is about to open.
     */
    onOpen?: (event: MultiSelectTreeOpenEvent) => void;
    /**
     * Fires each time the popup of the MultiSelectTree is about to close.
     */
    onClose?: (event: MultiSelectTreeCloseEvent) => void;
    /**
     * Fires each time the user focuses the MultiSelectTree.
     */
    onFocus?: (event: MultiSelectTreeFocusEvent) => void;
    /**
     * Fires each time the MultiSelectTree gets blurred.
     */
    onBlur?: (event: MultiSelectTreeBlurEvent) => void;
    /**
     * Fires each time the value of the MultiSelectTree is about to change ([see examples]({% slug overview_multiselecttree %})).
     */
    onChange?: (event: MultiSelectTreeChangeEvent) => void;
    /**
     * Fires each time the user types in the filter input
     * ([see example]({% slug filtering_multiselecttree %}#toc-basic-configuration)).
     * You can filter the source based on the passed filtration value.
     */
    onFilterChange?: (event: MultiSelectTreeFilterChangeEvent) => void;
    /**
     * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_multiselecttree %})).
     */
    onExpandChange?: (event: any) => void;
    /**
     * Defines the component that will be used for rendering each of the MultiSelectTree items
     * ([see example]({% slug customrendering_multiselecttree %}#toc-items-and-value-element)).
     */
    item?: any;
    /**
     * Defines the component that will be rendered in the MultiSelectTree popup when no data is available
     * ([see example]({% slug customrendering_multiselecttree %}#toc-no-data)).
     */
    listNoData?: any;
    tag?: any;
    header?: any;
    footer?: any;
    /**
     * Configures the `size` of the MultiSelectTree.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     *
     * @default undefined
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * Configures the `roundness` of the MultiSelectTree.
     *
     * The available options are:
     * - none
     * - small
     * - medium
     * - large
     * - full
     *
     * @default undefined
     */
    rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
    /**
     * Configures the `fillMode` of the MultiSelectTree.
     *
     * The available options are:
     * - solid
     * - flat
     * - outline
     *
     * @default undefined
     */
    fillMode?: 'solid' | 'flat' | 'outline';
    /**
     * Provides different rendering of the popup element based on the screen dimensions.
     */
    adaptive?: boolean;
    /**
     * Specifies the text that is rendered as title in the adaptive popup.
     */
    adaptiveTitle?: string;
}