/**
 * @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-react-common';
import { ItemRenderProps } from '@progress/kendo-react-treeview';
import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent } from '../common/events.js';
import { DropDownsPopupSettings } from '../common/settings.js';
/**
 * 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 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 `onFilterChange` DropDownTree event.
 */
export interface DropDownTreeFilterChangeEvent extends FilterChangeEvent<DropDownTreeHandle> {
}
/**
 * Represents the object of the `onChange` DropDownTree event.
 */
export interface DropDownTreeChangeEvent extends ChangeEvent<DropDownTreeHandle> {
    /**
     * The hierarchical index path to the selected item.
     */
    level: number[];
}
/**
 * Represents the object of the `onOpen` DropDownTree event.
 */
export interface DropDownTreeOpenEvent extends OpenEvent<DropDownTreeHandle> {
}
/**
 * Represents the object of the `onClose` DropDownTree event.
 */
export interface DropDownTreeCloseEvent extends CloseEvent<DropDownTreeHandle> {
}
/**
 * Represents the object of the `onFocus` DropDownTree event.
 */
export interface DropDownTreeFocusEvent extends FocusEvent<DropDownTreeHandle> {
}
/**
 * Represents the object of the `onBlur` DropDownTree event.
 */
export interface DropDownTreeBlurEvent extends BlurEvent<DropDownTreeHandle> {
}
/**
 * Represents the object of the `onExpandChange` DropDownTree event.
 */
export interface DropDownTreeExpandEvent extends DropdownEvent<DropDownTreeHandle> {
    /**
     * The data item that was expanded or collapsed.
     */
    item: any;
    /**
     * The hierarchical index path to the item.
     */
    level: number[];
}
/**
 * The props of component that will be used for rendering each of the DropDownTree items
 * ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree/custom-rendering#toc-items-and-value-element)).
 */
export interface ItemProps extends ItemRenderProps {
}
/**
 * The props of the `ListNoData` component ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree/custom-rendering#toc-no-data)).
 */
export interface ListNoDataProps {
    /**
     * The child components to render when no data is available.
     */
    children?: React.ReactNode;
}
/**
 * The props of the `ValueHolder` component ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree/custom-rendering#toc-items-and-value-element)).
 */
export interface ValueHolderProps {
    /**
     * The child components of the ValueHolder.
     */
    children?: React.ReactNode;
    /**
     * The data item that represents the selected value.
     */
    item?: any;
}
/**
 * Represents the props of the [KendoReact DropDownTree component](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree).
 */
export interface DropDownTreeProps extends FormComponentProps {
    /**
     * Sets the data of the DropDownTree ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/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](https://www.telerik.com/kendo-react-ui/components/dropdowns/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](https://www.telerik.com/kendo-react-ui/components/dropdowns/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" />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaDescribedBy?: string;
    /**
     * Identifies the element(s) which will label the component.
     *
     * @example
     * ```jsx
     * <DropDownTree ariaLabelledBy="label" />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaLabelledBy?: string;
    /**
     * Enables the filtering functionality of the DropDownTree ([more information and examples](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree/filtering)).
     *
     * @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](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree/filtering#toc-visualize-filtering)).
     *
     * @example
     * ```jsx
     * <DropDownTree loading={true} />
     * ```
     */
    loading?: boolean;
    /**
     * Specifies the `tabIndex` of the DropDownTree.
     *
     * @example
     * ```jsx
     * <DropDownTree tabIndex={0} />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    tabIndex?: number;
    /**
     * Specifies the `accessKey` of the DropDownTree.
     *
     * @example
     * ```jsx
     * <DropDownTree accessKey="k" />
     * ```
     *
     * @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/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](https://www.telerik.com/kendo-react-ui/components/dropdowns/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](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree/filtering#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](https://www.telerik.com/kendo-react-ui/components/dropdowns/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](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree/custom-rendering#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](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree/custom-rendering#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](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree/custom-rendering#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
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <DropDownTree size="large" />
     * ```
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * Configures the `roundness` of the DropDownTree.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - full
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <DropDownTree rounded="full" />
     * ```
     */
    rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
    /**
     * Configures the `fillMode` of the DropDownTree.
     *
     * The available options are:
     * - solid
     * - flat
     * - outline
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <DropDownTree fillMode="flat" />
     * ```
     */
    fillMode?: '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;
}