@progress/kendo-react-treeview/index.d.ts

React TreeView displays hierarchical data in a traditional tree structure, supports user interaction. KendoReact TreeView package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { BaseEvent } from '@progress/kendo-react-common';
import { ComponentType } from 'react';
import { CSSProperties } from 'react';
import { default as default_2 } from 'prop-types';
import { TreeFieldsService as FieldsService } from '@progress/kendo-react-common';
import { ForwardRefExoticComponent } from 'react';
import { JSX } from 'react/jsx-runtime';
import * as React_2 from 'react';
import { RefAttributes } from 'react';

declare namespace events {
    export {
        TreeViewExpandChangeEvent,
        TreeViewItemClickEvent,
        TreeViewCheckChangeEvent,
        TreeViewContextMenuEvent,
        TreeViewItemDragStartEvent,
        TreeViewItemDragOverEvent,
        TreeViewItemDragEndEvent
    }
}

export { FieldsService }

/**
 * @hidden
 */
export declare function getItemIdUponKeyboardNavigation(item: any, itemId: string, items: any[], keyCode: number, fieldsSvc: FieldsService): any;

/**
 * A helper function which updates the check descriptor.
 *
 * @param event - The event that triggered the change.
 * @param check - The check descriptor that will be updated.
 * @param data - The TreeView items.
 * @param settings - The additional settings that configure the update of the check descriptor.
 * @param childrenField - The field that points to the dataItem sub items. Defaults to `items`.
 * The default behavior allows the selection of multiple items.
 * @returns - The updated copy of the input check descriptor.
 *
 * @example
 * ```jsx
 * class App extends React.Component {
 *    state = { check: [], items: tree };
 *    render() {
 *        return (
 *            <div>
 *                <TreeView
 *                    checkboxes={true} onCheckChange={this.onCheckChange}
 *                    data={processTreeViewItems(this.state.items, { check: this.state.check })}
 *                />
 *                <div style={{ marginTop: 5 }}>
 *                    <i>Press SPACE to check/uncheck the active item</i>
 *                    <div className="example-config">
 *                        Checked Indices: {this.state.check.join(",")}
 *                    </div>
 *                </div>
 *            </div>
 *        );
 *    }
 *    onCheckChange = (event) => {
 *        this.setState({ check: handleTreeViewCheckChange(event, this.state.check, this.state.items) });
 *    }
 * }
 *
 * const tree = [ {
 *    text: 'Furniture', expanded: true, items: [
 *        { text: 'Tables & Chairs' }, { text: 'Sofas' }, { text: 'Occasional Furniture' } ]
 * }, {
 *    text: 'Decor', expanded: true, items: [
 *        { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' } ]
 * } ];
 *
 * ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare function handleTreeViewCheckChange(event: TreeViewExpandChangeEvent, check: string[] | TreeViewCheckDescriptor, data?: any[] | null, settings?: TreeViewCheckChangeSettings, childrenField?: string): any[] | (TreeViewCheckDescriptor & {
    ids: any[];
});

/**
 * The props of the ItemRender component ([see example]({% slug rendering_treeview %})).
 */
export declare interface ItemRenderProps {
    /**
     * The item that is rendered.
     */
    item: any;
    /**
     * The hierarchical index of the item. The indices are zero-based. The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
     */
    itemHierarchicalIndex: string;
}

/**
 *  A helper function which moves a TreeView item in an immutable way.
 *
 * @param sourceItemHierarchicalIndex - The hierarchical index of the item that will be moved.
 * @param sourceData - The tree which contains the item that will be moved.
 * @param operation - The specific move operation.
 *
 * The available options are:
 *  * `before`&mdash;Indicates that the source item will become the previous sibling of the target item.
 *  * `after`&mdash;Indicates that the source item will become the next sibling of the target item.
 *  * `child`&mdash;Indicates that the source item will become a child of the target item.
 * @param targetItemHierarchicalIndex - The hierarchical index of the item next to which the source item will be moved.
 * @param targetData - The tree which contains the target item.
 * If the argument is skipped, then the move operation will be executed within the same tree.
 * Setting the `sourceData` and `targetData` arguments to the same tree is also supported.
 * @param childrenField - The field that points to the dataItem sub items. Defaults to `items`.
 * @returns - The updated copies of the `sourceData` and `targetData` input arguments.
 * If `targetData` is not passed, then only the updated copy of the `sourceData` will be returned.
 *
 * @example
 * ```jsx
 * class App extends React.Component {
 *     dragClue;
 *     state = { tree };
 *
 *     render() {
 *         return (
 *             <div>
 *                 <TreeView data={this.state.tree} draggable={true}
 *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
 *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
 *             </div>
 *         );
 *     }
 *
 *     onItemDragOver = (event) => {
 *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
 *     }
 *     onItemDragEnd = (event) => {
 *         this.dragClue.hide();
 *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
 *
 *         if (eventAnalyzer.isDropAllowed) {
 *             const updatedTree = moveTreeViewItem(
 *                 event.itemHierarchicalIndex,
 *                 this.state.tree,
 *                 eventAnalyzer.getDropOperation(),
 *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
 *             );
 *
 *             this.setState({ tree: updatedTree });
 *         }
 *     }
 *     getClueClassName(event) {
 *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
 *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
 *
 *         if (eventAnalyzer.isDropAllowed) {
 *             switch (eventAnalyzer.getDropOperation()) {
 *                 case 'child':
 *                     return 'k-i-plus';
 *                 case 'before':
 *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
 *                         'k-i-insert-up' : 'k-i-insert-middle';
 *                 case 'after':
 *                     const siblings = getSiblings(itemIndex, this.state.tree);
 *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
 *
 *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
 *                 default:
 *                     break;
 *             }
 *         }
 *
 *         return 'k-i-cancel';
 *     }
 * }
 *
 * function getSiblings(itemIndex, data) {
 *     let result = data;
 *
 *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
 *     for (let i = 0; i < indices.length - 1; i++) {
 *         result = result[indices[i]].items;
 *     }
 *
 *     return result;
 * }
 *
 * const SEPARATOR = '_';
 * const tree = [{
 *     text: 'Furniture', expanded: true, items: [
 *         { text: 'Tables & Chairs', expanded: true },
 *         { text: 'Sofas', expanded: true },
 *         { text: 'Occasional Furniture', expanded: true }]
 * }, {
 *     text: 'Decor', expanded: true, items: [
 *         { text: 'Bed Linen', expanded: true },
 *         { text: 'Curtains & Blinds', expanded: true },
 *         { text: 'Carpets', expanded: true }]
 * }];
 *
 * ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare function moveTreeViewItem(sourceItemHierarchicalIndex: string, sourceData: any[] | null | undefined, operation: 'before' | 'after' | 'child', targetItemHierarchicalIndex: string, targetData?: any[] | null, childrenField?: string): any[] | {
    sourceData: any[] | null | undefined;
    targetData: any[];
} | null | undefined;

/**
 * A helper function which applies the specified operation descriptors to the data.
 * * [Expanding and collapsing items]({% slug expansion_ways_treeview %}#toc-using-a-helper-function)
 * * [Selecting and deselecting items]({% slug selection_ways_treeview %}#toc-using-a-helper-function)
 * * [Checking and unchecking items]({% slug check_helper_funcs_treeview %})
 *
 * @param data - The data that will be processed.
 * @param operations - The operation descriptors that will be applied to the data.
 * @returns - The processed copy of the input data.
 *
 * @example
 * ```jsx
 * class App extends React.Component {
 *     state = { items: tree, expand: [], select: [], check: [] };
 *     render() {
 *         const { expand, select, check } = this.state;
 *         return (
 *             <TreeView
 *                 data={processTreeViewItems(this.state.items, { expand, select, check })}
 *                 expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
 *                 onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
 *                 onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
 *             />
 *         );
 *     }
 *     onExpandChange = (event) => {
 *         let expand = this.state.expand.slice();
 *         const index = expand.indexOf(event.itemHierarchicalIndex);
 *         index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
 *         this.setState({ expand });
 *     }
 * }
 *
 * const tree = [{
 *     text: 'Item1',
 *     items: [
 *         { text: 'Item1.1' },
 *         { text: 'Item1.2' },
 *         { text: 'Item1.3', items: [{ text: 'Item1.3.1' }] }]
 * }, {
 *     text: 'Item2', disabled: true,
 *     items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
 * }, {
 *     text: 'Item3'
 * }];
 *
 * ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare function processTreeViewItems(data: any[] | null | undefined, operations: TreeViewOperationDescriptors): any[];

/** @hidden */
export declare const TreeView: ForwardRefExoticComponent<TreeViewProps & RefAttributes<any>>;

/**
 * Represents the object of the `onCheckChange` event ([see example]({% slug check_helper_funcs_treeview %})).
 */
export declare interface TreeViewCheckChangeEvent extends BaseEvent<TreeViewClassComponent> {
    /**
     * The item that is selected or deselected.
     */
    item: any;
    /**
     * The hierarchical index of the item. The indices are zero-based.
     * The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
     */
    itemHierarchicalIndex: string;
}

/**
 * The settings that configure the update of the check descriptor.
 */
export declare interface TreeViewCheckChangeSettings {
    /**
     * Determines a selection of a single node at a time.
     */
    singleMode?: boolean;
    /**
     * Determines if the children checkboxes will be selected when the user selects the parent checkbox.
     */
    checkChildren?: boolean;
    /**
     * Determines if the parent checkbox will be selected when the user selects all its children checkboxes.
     */
    checkParents?: boolean;
}

/**
 * The descriptor which is used for checking.
 */
export declare interface TreeViewCheckDescriptor extends TreeViewOperationDescriptor {
    /**
     * Determines if a parent item will have an indeterminate state when not all its children are checked.
     */
    applyCheckIndeterminate?: boolean;
    /**
     * The name of the field which will provide a Boolean representation for the indeterminate state of a parent item.
     * Defaults to `checkIndeterminate`.
     */
    checkIndeterminateField?: string;
}

/**
 * Represents the [KendoReact TreeView component]({% slug overview_treeview %}).
 *
 * @example
 * ```jsx
 * const data = [{
 *     text: 'Furniture', expanded: true, items: [
 *         { text: 'Tables & Chairs' }, { text: 'Sofas' }, { text: 'Occasional Furniture' }]
 * }, {
 *     text: 'Decor', expanded: true, items: [
 *         { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' }]
 * }];
 * class App extends React.Component {
 *     render() {
 *         return <TreeView data={data} />;
 *     }
 * }
 * ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare class TreeViewClassComponent extends React_2.Component<TreeViewProps, TreeViewState> {
    /**
     * @hidden
     */
    static propTypes: {
        data: default_2.Requireable<any[]>;
        animate: default_2.Requireable<boolean>;
        tabIndex: default_2.Requireable<number>;
        focusIdField: default_2.Requireable<string>;
        getHierarchicalIndexById: default_2.Requireable<(...args: any[]) => any>;
        onExpandChange: default_2.Requireable<(...args: any[]) => any>;
        onItemClick: default_2.Requireable<(...args: any[]) => any>;
        expandField: default_2.Requireable<string>;
        selectField: default_2.Requireable<string>;
        iconField: default_2.Requireable<string>;
        childrenField: default_2.Requireable<string>;
        hasChildrenField: default_2.Requireable<string>;
        textField: default_2.Requireable<string>;
        disableField: default_2.Requireable<string>;
        item: default_2.Requireable<any>;
        'aria-multiselectable': (props: any, propName: string, componentName: string) => Error | null;
        'aria-label': default_2.Requireable<string>;
        'aria-labelledby': default_2.Requireable<string>;
        size: default_2.Requireable<"small" | "large" | "medium" | null | undefined>;
        dir: default_2.Requireable<string>;
    };
    /**
     * @hidden
     */
    static defaultProps: {
        animate: boolean;
        expandField: string;
        selectField: string;
        iconField: string;
        hasChildrenField: string;
        childrenField: string;
        textField: string;
        disableField: string;
        checkField: string;
        checkIndeterminateField: string;
        size: "small" | "large" | "medium" | null | undefined;
    };
    /**
     * @hidden
     */
    state: {
        focusedItemId: undefined;
        focusedItemPublicId: undefined;
        tabbableItemId: string;
    };
    private blurRequest;
    private fieldsSvc;
    private allowExplicitFocus;
    private readonly showLicenseWatermark;
    private get treeGuid();
    private _element;
    /**
     * @hidden
     */
    get element(): HTMLDivElement | null;
    constructor(props: TreeViewProps);
    /**
     * @hidden
     */
    render(): JSX.Element;
    /**
     * @hidden
     */
    componentDidUpdate(): void;
    private onFocusDomElNeeded;
    private onCheckChange;
    private onExpandChange;
    private onPress;
    private onDrag;
    private onRelease;
    private onItemClick;
    private onFocus;
    private onBlur;
    private onKeyDown;
    private dispatchEventsOnKeyDown;
    private setFocus;
    private onContextMenu;
    private getFocusedItem;
    private getItemById;
    private dispatchCheckChange;
    private dispatchExpandChange;
    private dispatchItemClick;
    private refocusDueToFocusIdField;
    private get ariaMultiSelectable();
    private get data();
    private focusDomItem;
    /**
     * Returns the `guid` which is associated with the TreeView.
     */
    get guid(): string;
}

/**
 * Represents the object of the `onContextMenu` event ([see example]({% slug overview_treeview %})).
 */
export declare interface TreeViewContextMenuEvent extends BaseEvent<TreeViewClassComponent> {
    /**
     * An event target.
     */
    target: TreeViewClassComponent;
    /**
     * The data object that represents the current item.
     */
    item: any;
    /**
     * The ID of the current item.
     */
    itemID: string;
    /**
     * A React Synthetic Event.
     */
    syntheticEvent: React.MouseEvent<any>;
}

/**
 * A class which provides an API for analyzing the `drag` events
 * of the TreeView.
 *
 * @example
 * ```jsx
 * class App extends React.Component {
 *     dragClue;
 *     state = { tree };
 *
 *     render() {
 *         return (
 *             <div>
 *                 <TreeView data={this.state.tree} draggable={true}
 *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
 *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
 *             </div>
 *         );
 *     }
 *
 *     onItemDragOver = (event) => {
 *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
 *     }
 *     onItemDragEnd = (event) => {
 *         this.dragClue.hide();
 *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
 *
 *         if (eventAnalyzer.isDropAllowed) {
 *             const updatedTree = moveTreeViewItem(
 *                 event.itemHierarchicalIndex,
 *                 this.state.tree,
 *                 eventAnalyzer.getDropOperation(),
 *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
 *             );
 *
 *             this.setState({ tree: updatedTree });
 *         }
 *     }
 *     getClueClassName(event) {
 *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
 *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
 *
 *         if (eventAnalyzer.isDropAllowed) {
 *             switch (eventAnalyzer.getDropOperation()) {
 *                 case 'child':
 *                     return 'k-i-plus';
 *                 case 'before':
 *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
 *                         'k-i-insert-up' : 'k-i-insert-middle';
 *                 case 'after':
 *                     const siblings = getSiblings(itemIndex, this.state.tree);
 *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
 *
 *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
 *                 default:
 *                     break;
 *             }
 *         }
 *
 *         return 'k-i-cancel';
 *     }
 * }
 *
 * function getSiblings(itemIndex, data) {
 *     let result = data;
 *
 *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
 *     for (let i = 0; i < indices.length - 1; i++) {
 *         result = result[indices[i]].items;
 *     }
 *
 *     return result;
 * }
 *
 * const SEPARATOR = '_';
 * const tree = [{
 *     text: 'Furniture', expanded: true, items: [
 *         { text: 'Tables & Chairs', expanded: true },
 *         { text: 'Sofas', expanded: true },
 *         { text: 'Occasional Furniture', expanded: true }]
 * }, {
 *     text: 'Decor', expanded: true, items: [
 *         { text: 'Bed Linen', expanded: true },
 *         { text: 'Curtains & Blinds', expanded: true },
 *         { text: 'Carpets', expanded: true }]
 * }];
 *
 * ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare class TreeViewDragAnalyzer {
    private event;
    private itemId;
    private treeViewGuid;
    private initialized;
    private destDomNodeWithMeta;
    private destItemId;
    private destTreeViewGuid;
    /**
     * @param event - The event that will be analyzed.
     */
    constructor(event: TreeViewItemDragOverEvent | TreeViewItemDragEndEvent);
    /**
     * The method which initializes the analyzer.
     * Invoke the method before you call any other methods.
     *
     * @returns - The analyzer object of the `drag` event.
     */
    init(): this;
    /**
     * Returns `true` if dropping is allowed. Otherwise, returns `false`.
     */
    get isDropAllowed(): boolean;
    /**
     * Returns an object which contains:
     * * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
     * * The `guid` of the destination TreeView (the TreeView which renders the destination item).
     */
    get destinationMeta(): {
        itemHierarchicalIndex: string;
        treeViewGuid: string;
    };
    /**
     * Returns the specific drop operation.
     *
     * @returns - The following values are returned:
     * * `before`&mdash;Indicates that the dragged item is positioned at the beginning of the destination item.
     * * `after`&mdash;Indicates that the dragged item is positioned at the end of the destination item.
     * * `child`&mdash;Indicates that the dragged item is positioned in the middle of the destination item.
     * * `undefined`&mdash;Indicates that dropping is not allowed.
     */
    getDropOperation(): "child" | "after" | "before" | undefined;
    private setDestimationMeta;
}

/**
 * Represents the KendoReact TreeViewDragClue component which renders a clue when an item is dragged.
 *
 * @example
 * ```jsx
 * class App extends React.Component {
 *     dragClue;
 *     state = { tree };
 *
 *     render() {
 *         return (
 *             <div>
 *                 <TreeView data={this.state.tree} draggable={true}
 *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
 *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
 *             </div>
 *         );
 *     }
 *
 *     onItemDragOver = (event) => {
 *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
 *     }
 *     onItemDragEnd = (event) => {
 *         this.dragClue.hide();
 *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
 *
 *         if (eventAnalyzer.isDropAllowed) {
 *             const updatedTree = moveTreeViewItem(
 *                 event.itemHierarchicalIndex,
 *                 this.state.tree,
 *                 eventAnalyzer.getDropOperation(),
 *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
 *             );
 *
 *             this.setState({ tree: updatedTree });
 *         }
 *     }
 *     getClueClassName(event) {
 *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
 *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
 *
 *         if (eventAnalyzer.isDropAllowed) {
 *             switch (eventAnalyzer.getDropOperation()) {
 *                 case 'child':
 *                     return 'k-i-plus';
 *                 case 'before':
 *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
 *                         'k-i-insert-up' : 'k-i-insert-middle';
 *                 case 'after':
 *                     const siblings = getSiblings(itemIndex, this.state.tree);
 *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
 *
 *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
 *                 default:
 *                     break;
 *             }
 *         }
 *
 *         return 'k-i-cancel';
 *     }
 * }
 *
 * function getSiblings(itemIndex, data) {
 *     let result = data;
 *
 *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
 *     for (let i = 0; i < indices.length - 1; i++) {
 *         result = result[indices[i]].items;
 *     }
 *
 *     return result;
 * }
 *
 * const SEPARATOR = '_';
 * const tree = [{
 *     text: 'Furniture', expanded: true, items: [
 *         { text: 'Tables & Chairs', expanded: true },
 *         { text: 'Sofas', expanded: true },
 *         { text: 'Occasional Furniture', expanded: true }]
 * }, {
 *     text: 'Decor', expanded: true, items: [
 *         { text: 'Bed Linen', expanded: true },
 *         { text: 'Curtains & Blinds', expanded: true },
 *         { text: 'Carpets', expanded: true }]
 * }];
 *
 * ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare class TreeViewDragClue extends React_2.PureComponent<TreeViewDragClueProps, TreeViewDragClueState> {
    /**
     * @hidden
     */
    static defaultProps: {
        style: {
            display: string;
            position: string;
            zIndex: number;
            padding: string;
        };
    };
    /**
     * @hidden
     */
    readonly state: TreeViewDragClueState;
    /**
     * @hidden
     */
    render(): false | JSX.Element | undefined;
    /**
     * Displays the TreeViewDragClue component.
     *
     * @param top - The `top` CSS position of the component.
     * @param left - The `left` CSS position of the component.
     * @param text - The text of the component.
     * @param operationClassName - The CSS class name which is related to the specific drop operation.
     */
    show(top: number, left: number, text: string, operationClassName: string): void;
    /**
     * Hides the TreeViewDragClue component.
     */
    hide(): void;
}

/**
 * Represents the props of the KendoReact TreeViewDragClue component.
 */
declare interface TreeViewDragClueProps {
    /**
     * Sets custom CSS styles to the component.
     * When specified, the default CSS styles are removed.
     */
    style?: React_2.CSSProperties;
}

/**
 * @hidden
 */
declare interface TreeViewDragClueState {
    visible?: boolean;
    top?: number;
    left?: number;
    text?: string;
    operationClassName?: string;
}

/**
 * Represents the object of the `onExpandChange` event ([see example]({% slug overview_treeview %})).
 */
export declare interface TreeViewExpandChangeEvent extends BaseEvent<TreeViewClassComponent> {
    /**
     * The item that is expanded or collapsed.
     */
    item: any;
    /**
     * The hierarchical index of the item. The indices are zero-based. The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
     */
    itemHierarchicalIndex: string;
}

/**
 * Represent the `ref` of the TreeView component.
 */
export declare interface TreeViewHandle extends Pick<TreeViewClassComponent, keyof TreeViewClassComponent> {
}

/**
 * Represents the object of the `onItemClick` event ([see example]({% slug overview_treeview %})).
 */
export declare interface TreeViewItemClickEvent extends BaseEvent<TreeViewClassComponent> {
    /**
     * The item that is clicked.
     */
    item: any;
    /**
     * The hierarchical index of the item. The indices are zero-based.
     * The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
     */
    itemHierarchicalIndex: string;
}

/**
 * Represents the object of the `onItemDragEnd` event ([see example]({% slug dragdrop_treeview %})).
 */
export declare interface TreeViewItemDragEndEvent {
    /**
     * The target that is associated with the dragged item.
     */
    target: TreeViewClassComponent;
    /**
     * The item that is dragged.
     */
    item: any;
    /**
     * The hierarchical index of the dragged item. The indices are zero-based.
     * The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
     */
    itemHierarchicalIndex: string;
    /**
     * The X (horizontal) coordinate (in pixels) at which the event occured that is relative to the left edge of the entire document.
     * `pageX` includes any portion of the document that is not currently visible.
     */
    pageX: number;
    /**
     * The Y (vertical) coordinate (in pixels) at which the event occured that is relative to the whole document.
     * `pageY` observes any vertical scrolling of the page.
     */
    pageY: number;
    /**
     * Provides the horizontal coordinate within the client area of the application at which the event occurred
     * (as opposed to the coordinate within the page).
     */
    clientX: number;
    /**
     * Provides the vertical coordinate within the client area of the application at which the event occurred
     * (as opposed to the coordinate within the page).
     */
    clientY: number;
}

/**
 * Represents the object of the `onItemDragOver` event ([see example]({% slug dragdrop_treeview %})).
 */
export declare interface TreeViewItemDragOverEvent {
    /**
     * The target that is associated with the dragged item.
     */
    target: TreeViewClassComponent;
    /**
     * The item that is dragged.
     */
    item: any;
    /**
     * The hierarchical index of the dragged item. The indices are zero-based.
     * The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
     */
    itemHierarchicalIndex: string;
    /**
     * The X (horizontal) coordinate (in pixels) at which the event occurred that is relative to the left edge of the entire document.
     * Includes any portion of the document which is not currently visible.
     */
    pageX: number;
    /**
     * The Y (vertical) coordinate (in pixels) at which the event occurred that is relative to the whole document.
     * `pageY` observes any vertical scrolling of the page.
     */
    pageY: number;
    /**
     * Provides the horizontal coordinate within the client area of the application at which the event occurred
     * (as opposed to the coordinate within the page).
     */
    clientX: number;
    /**
     * Provides the vertical coordinate within the client area of the application at which the event occurred
     * (as opposed to the coordinate within the page).
     */
    clientY: number;
}

/**
 * Represents the object of the `onItemDragStart` event.
 */
export declare interface TreeViewItemDragStartEvent {
    /**
     * An event target.
     */
    target: TreeViewClassComponent;
    /**
     * The item that is dragged.
     */
    item: any;
    /**
     * The hierarchical index of the dragged item. The indices are zero-based.
     * The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
     */
    itemHierarchicalIndex: string;
}

/**
 * @hidden
 */
declare interface TreeViewItemProps {
    item: any;
    itemId: string;
    treeGuid: string;
    animate: boolean;
    focusedItemId?: string;
    tabbableItemId: string;
    fieldsService: FieldsService;
    itemUI?: React_2.ComponentType<{
        item: any;
        itemHierarchicalIndex: string;
    }>;
    ariaMultiSelectable: boolean;
    onItemClick: any;
    expandIcons?: boolean;
    iconField?: string;
    onExpandChange: any;
    onCheckChange: any;
    checkboxes?: boolean;
    onFocusDomElNeeded: any;
    draggable?: boolean;
    onPress: any;
    onDrag: any;
    onRelease: any;
    size?: null | 'small' | 'medium' | 'large';
    /**
     * @hidden
     *
     * Internal usage!!!
     */
    position?: 'top' | 'mid' | 'bot';
    /**
     * Currently for internal usage only! Replicates the current behavior which disables all children
     * if the parent is disabled, which was previously achieved only though the kendo-themes,
     * but due to rendering changes had to be replicated programmatically!
     *
     * @hidden
     */
    disabled?: boolean;
    /**
     * @hidden
     */
    isRtl?: boolean;
    /**
     * @hidden
     */
    onContextMenu: (event: React_2.MouseEvent<HTMLElement>, item: any, itemId: string) => void;
    /**
     * @hidden
     * This prop comes from the `TreeView`component.
     * It replaces the previously used guid() function and is used to generate unique `id` for
     * the checkbox and label in the TreeViewItem.
     */
    id?: string;
}

/**
 * @hidden
 */
export declare const TreeViewItemPropsContext: React_2.Context<(props: TreeViewItemProps) => TreeViewItemProps>;

/**
 * The descriptor which is used for expanding, selecting, and checking.
 */
export declare interface TreeViewOperationDescriptor {
    /**
     * The IDs of the items to which the operation will be applied. By default, the TreeView applies the hierarchical indices of the items. These indices are zero-based. The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
     */
    ids?: any[];
    /**
     * The name of the field which will provide a Boolean representation for the operation state of the item.
     *
     * The default fields are:
     * * `expanded`&mdash;Indicates that an item is expanded.
     * * `selected`&mdash;Indicates that an item is selected.
     * * `checked`&mdash;Indicates that an item is checked.
     */
    operationField?: string;
    /**
     * The name of the field which will uniquely describe an item as an alternative to its hierarchical index.
     */
    idField?: string;
}

/**
 * The descriptors of the data operations which are applied to the TreeView component.
 */
export declare interface TreeViewOperationDescriptors {
    /**
     * The hierarchical indices of the items to which the expand operation will be applied, or the descriptor of the operation.
     */
    expand?: string[] | TreeViewOperationDescriptor;
    /**
     * The hierarchical indices of the items to which the select operation will be applied, or the descriptor of the operation.
     */
    select?: string[] | TreeViewOperationDescriptor;
    /**
     * The hierarchical indices of the items to which the check operation will be applied, or the descriptor of the operation.
     */
    check?: string[] | TreeViewCheckDescriptor;
    /**
     * When the operations are applied, the corresponding items and their parents are cloned.
     * For performance reasons, TreeView items are cloned only once.
     * The name of the field which provides a Boolean representation of whether an item is already cloned.
     * Defaults to `cloned`.
     */
    cloneField?: string;
    /**
     * The expand field of the item.
     */
    expandField?: string;
    /**
     * The select field of the item.
     */
    selectField?: string;
    /**
     * The check field of the item.
     */
    checkField?: string;
    /**
     * The children field of the item.
     */
    childrenField?: string;
}

/**
 * Represents the props of the [KendoReact TreeView component]({% slug overview_treeview %}).
 */
export declare interface TreeViewProps {
    /**
     * Adds a custom CSS class to the TreeView container element.
     *
     * Example:
     * ```jsx
     * <TreeView className="custom-treeview-class" />
     * ```
     */
    className?: string;
    /**
     * Specifies the `id` attribute of the TreeView container element.
     *
     * Example:
     * ```jsx
     * <TreeView id="treeview-component" />
     * ```
     */
    id?: string;
    /**
     * Sets the inline styles for the TreeView container element.
     *
     * Example:
     * ```jsx
     * <TreeView style={{ width: '300px', height: '400px' }} />
     * ```
     */
    style?: CSSProperties;
    /**
     * Provides the hierarchical data to be displayed in the TreeView.
     *
     * Example:
     * ```jsx
     * <TreeView data={[{ text: 'Item 1', items: [{ text: 'Sub-item 1' }] }]} />
     * ```
     */
    data?: any[] | null;
    /**
     * Enables or disables the expand and collapse animations.
     *
     * Example:
     * ```jsx
     * <TreeView animate={false} />
     * ```
     */
    animate?: boolean;
    /**
     * Specifies the `tabIndex` attribute of the TreeView container element.
     *
     * Example:
     * ```jsx
     * <TreeView tabIndex={0} />
     * ```
     */
    tabIndex?: number;
    /**
     * The TreeView has a built-in implementation of focusing and keyboard navigation. By default, the component uses
     * hierarchical indices to uniquely match the focused item. You can use the `focusIdField` prop for specifying the
     *  name of the field which will uniquely describe an
     *  item as an alternative to its hierarchical index ([see example]({% slug datareload_treeview %}#toc-using-item-ids)).
     *
     * Example:
     * ```jsx
     * <TreeView focusIdField="id" />
     * ```
     */
    focusIdField?: string;
    /**
     * When `focusIdField` is set, the TreeView executes a depth-first search on the data to find the currently focused item.
     *  The `getFocusHierarchicalIndex` prop specifies the function that will be used as an alternative to the default search algorithm.
     *
     * Example:
     * ```jsx
     * <TreeView getFocusHierarchicalIndex={(id) => `custom-index-${id}`} />
     * ```
     */
    getFocusHierarchicalIndex?: (itemId: any) => string | undefined;
    /**
     * Controls the rendering of the expand (collapse) icons. By default, the icons are not rendered ([see example]({% slug expansion_ways_treeview %})).
     *
     * Example:
     * ```jsx
     * <TreeView expandIcons={true} />
     * ```
     */
    expandIcons?: boolean;
    /**
     * Triggered when an item is expanded or collapsed.
     *
     * Example:
     * ```jsx
     * <TreeView onExpandChange={(event) => console.log(event.item)} />
     * ```
     */
    onExpandChange?: (event: events.TreeViewExpandChangeEvent) => void;
    /**
     * Fires when an item is clicked or when `Enter` is pressed on a focused item ([see example]({% slug selection_ways_treeview %})).
     *
     * Example:
     * ```jsx
     * <TreeView onItemClick={(event) => console.log(event.item)} />
     * ```
     */
    onItemClick?: (event: events.TreeViewItemClickEvent) => void;
    /**
     * Specifies the name of the field which will provide a Boolean representation for the expanded state of the item. Defaults to `expanded`.
     *
     * Example:
     * ```jsx
     * <TreeView expandField="isExpanded" />
     * ```
     */
    expandField?: string;
    /**
     * Specifies the name of the field which will provide a Boolean representation for the selected state of the item. Defaults to `selected`.
     *
     * Example:
     * ```jsx
     * <TreeView selectField="isSelected" />
     * ```
     */
    selectField?: string;
    /**
     * Specifies the name of the field which will provide an icon for the specific TreeView item. Defaults to `svgIcon`.
     *
     * Example:
     * ```jsx
     * <TreeView iconField="icon" />
     * ```
     */
    iconField?: string;
    /**
     * Specifies the name of the field which indicates to the TreeView that an item has children even if the children are not initially passed. Used for implementing the load-on-demand feature ([see example]({% slug databinding_treeview %}#toc-loading-data-on-demand)). Defaults to `hasChildren`.
     *
     * Example:
     * ```jsx
     * <TreeView hasChildrenField="hasSubItems" />
     * ```
     */
    hasChildrenField?: string;
    /**
     * Specifies the name of the field which will provide an array representation of the item children.
     *
     * Example:
     * ```jsx
     * <TreeView childrenField="subItems" />
     * ```
     */
    childrenField?: string;
    /**
     * Specifies the name of the field which will provide a text representation for the item. Defaults to `text`.
     *
     * Example:
     * ```jsx
     * <TreeView textField="label" />
     * ```
     */
    textField?: string;
    /**
     * Specifies the name of the field which will provide a Boolean representation for the disabled state of the item. Defaults to `disabled`.
     *
     * Example:
     * ```jsx
     * <TreeView disableField="isDisabled" />
     * ```
     */
    disableField?: string;
    /**
     * Defines the component that will be used for rendering each of the TreeView items ([see example]({% slug rendering_treeview %})).
     *
     * Example:
     * ```jsx
     * <TreeView item={(props) => <CustomTreeViewItem {...props} />} />
     * ```
     */
    item?: ComponentType<ItemRenderProps>;
    /**
     * Indicates that the user can select more than one TreeView items.
     * If the TreeView is in a multiple selection mode, set the `aria-multiselectable`
     * prop to `true` ([more on accessibility by the TreeView]({% slug accessibility_treeview %})).
     *
     * Example:
     * ```jsx
     * <TreeView aria-multiselectable={true} />
     * ```
     */
    'aria-multiselectable'?: boolean | 'false' | 'true';
    /**
     * Defines a string value that labels the TreeView ([more on accessibility by the TreeView]({% slug accessibility_treeview %})).
     *
     * Example:
     * ```jsx
     * <TreeView aria-label="TreeView Label" />
     * ```
     */
    'aria-label'?: string;
    /**
     * Identifies the element or elements which will label the TreeView ([more on accessibility by the TreeView]({% slug accessibility_treeview %})).
     *
     * Example:
     * ```jsx
     * <TreeView aria-labelledby="treeview-label" />
     * ```
     */
    'aria-labelledby'?: string;
    /**
     * Controls the rendering of checkboxes. By default, the checkboxes are not rendered.
     *
     * Example:
     * ```jsx
     * <TreeView checkboxes={true} />
     * ```
     */
    checkboxes?: boolean;
    /**
     * Specifies the name of the field which will provide a Boolean representation for the checked state of the item. Defaults to `checked`.
     *
     * Example:
     * ```jsx
     * <TreeView checkField="isChecked" />
     * ```
     */
    checkField?: string;
    /**
     * Specifies the name of the field which will provide a Boolean representation for the check indeterminate state of the item. Defaults to `checkIndeterminate`.
     *
     * Example:
     * ```jsx
     * <TreeView checkIndeterminateField="isPartiallyChecked" />
     * ```
     */
    checkIndeterminateField?: string;
    /**
     * Fires when a checkbox is clicked or when `Space` is pressed on a focused item.
     *
     * Example:
     * ```jsx
     * <TreeView onCheckChange={(event) => console.log(event.item)} />
     * ```
     */
    onCheckChange?: (event: events.TreeViewCheckChangeEvent) => void;
    /**
     * Controls the dispatching of the `drag` events. By default, the `drag` events are not dispatched ([see example]({% slug dragdrop_treeview %})).
     */
    draggable?: boolean;
    /**
     * Fires when the dragging of an item has started.
     *
     * Example:
     * ```jsx
     * <TreeView onItemDragStart={(event) => console.log(event.item)} />
     * ```
     */
    onItemDragStart?: (event: events.TreeViewItemDragStartEvent) => void;
    /**
     * Fires when a dragged item changes its position ([see example]({% slug dragdrop_treeview %})).
     *
     * Example:
     * ```jsx
     * <TreeView onItemDragOver={(event) => console.log(event.item)} />
     * ```
     */
    onItemDragOver?: (event: events.TreeViewItemDragOverEvent) => void;
    /**
     * Fires when a dragged item is dropped ([see example]({% slug dragdrop_treeview %})).
     *
     * Example:
     * ```jsx
     * <TreeView onItemDragEnd={(event) => console.log(event.item)} />
     * ```
     */
    onItemDragEnd?: (event: events.TreeViewItemDragEndEvent) => void;
    /**
     * Configures the `size` of the TreeView.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - null&mdash;Does not set a size `className`.
     *
     * @default `medium`
     *
     * Example:
     * ```jsx
     * <TreeView size="large" />
     * ```
     */
    size?: null | 'small' | 'medium' | 'large';
    /**
     * Sets the direction of the component.
     *
     * Example:
     * ```jsx
     * <TreeView dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * The event that is fired when the ContextMenu is activated.
     *
     * Example:
     * ```jsx
     * <TreeView onContextMenu={(event) => console.log(event.item)} />
     * ```
     */
    onContextMenu?: (event: TreeViewContextMenuEvent) => void;
}

/**
 * @hidden
 */
declare interface TreeViewState {
    focusedItemId?: string;
    focusedItemPublicId?: any;
    tabbableItemId?: string;
}

export { }