@progress/kendo-react-treeview 7.2.4-develop.2 → 7.2.4-develop.4

package/index.d.ts

@@ -1,20 +1,1141 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-import { TreeView as TreeViewClassComponent, type TreeViewHandle } from './TreeView';
-import type { TreeViewItemClickEvent, TreeViewExpandChangeEvent, TreeViewCheckChangeEvent, TreeViewItemDragOverEvent, TreeViewItemDragStartEvent, TreeViewItemDragEndEvent } from './events';
-import { processTreeViewItems } from './processTreeViewItems';
-import { moveTreeViewItem } from './moveTreeViewItem';
-import { handleTreeViewCheckChange, type TreeViewCheckChangeSettings } from './handleTreeViewCheckChange';
-import type { TreeViewOperationDescriptor, TreeViewOperationDescriptors, TreeViewCheckDescriptor } from './TreeViewOperationDescriptors';
-import { type ItemRenderProps } from './ItemRenderProps';
-import { type TreeViewProps } from './TreeViewProps';
-import { TreeViewDragClue } from './TreeViewDragClue';
-import { TreeViewDragAnalyzer } from './TreeViewDragAnalyzer';
-import { TreeViewItemPropsContext } from './TreeViewItem';
-import getItemIdUponKeyboardNavigation from './utils/getItemIdUponKeyboardNavigation';
-import { TreeFieldsService as FieldsService } from '@progress/kendo-react-common';
-/** @hidden */
-declare const TreeView: import("react").ForwardRefExoticComponent<TreeViewProps & import("react").RefAttributes<any>>;
-export { TreeViewItemPropsContext, TreeViewClassComponent, TreeView, TreeViewHandle, processTreeViewItems, handleTreeViewCheckChange, TreeViewCheckChangeSettings, TreeViewItemClickEvent, TreeViewExpandChangeEvent, TreeViewCheckChangeEvent, TreeViewItemDragOverEvent, TreeViewItemDragStartEvent, TreeViewItemDragEndEvent, TreeViewOperationDescriptor, TreeViewOperationDescriptors, TreeViewCheckDescriptor, TreeViewProps, ItemRenderProps, TreeViewDragClue, moveTreeViewItem, TreeViewDragAnalyzer, getItemIdUponKeyboardNavigation, FieldsService };
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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 { TreeFieldsService as FieldsService } from '@progress/kendo-react-common';
+import { ForwardRefExoticComponent } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import PropTypes from 'prop-types';
+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: PropTypes.Requireable<any[]>;
+        animate: PropTypes.Requireable<boolean>;
+        tabIndex: PropTypes.Requireable<number>;
+        focusIdField: PropTypes.Requireable<string>;
+        getHierarchicalIndexById: PropTypes.Requireable<(...args: any[]) => any>;
+        onExpandChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
+        expandField: PropTypes.Requireable<string>;
+        selectField: PropTypes.Requireable<string>;
+        childrenField: PropTypes.Requireable<string>;
+        hasChildrenField: PropTypes.Requireable<string>;
+        textField: PropTypes.Requireable<string>;
+        disableField: PropTypes.Requireable<string>;
+        item: PropTypes.Requireable<any>;
+        'aria-multiselectable': (props: any, propName: string, componentName: string) => Error | null;
+        'aria-label': PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<"small" | "large" | "medium" | null | undefined>;
+        dir: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        animate: boolean;
+        expandField: string;
+        selectField: 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 get treeGuid();
+    private _element;
+    /**
+     * @hidden
+     */
+    get element(): HTMLDivElement | null;
+    constructor(props: TreeViewProps);
+    /**
+     * @hidden
+     */
+    render(): JSX_2.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 %}#toc-basic-usage)).
+ */
+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_2.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 %}#toc-basic-usage)).
+ */
+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 %}#toc-basic-usage)).
+ */
+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;
+    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 {
+    /**
+     * Sets a class of the TreeView DOM element.
+     */
+    className?: string;
+    /**
+     * Sets an `id` of the TreeView DOM element.
+     */
+    id?: string;
+    /**
+     * Sets the `style`attribute of the TreeView DOM element.
+     */
+    style?: CSSProperties;
+    /**
+     * Sets the data of the TreeView ([more information and examples]({% slug databinding_treeview %})).
+     */
+    data?: any[] | null;
+    /**
+     * Controls the animation. By default, the expand and collapse animations are enabled.
+     */
+    animate?: boolean;
+    /**
+     * Sets a tabIndex of the TreeView DOM element.
+     */
+    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)).
+     */
+    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.
+     */
+    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 %})).
+     */
+    expandIcons?: boolean;
+    /**
+     * Fires when the expanding or collapsing of an item is requested ([see example]({% slug expansion_ways_treeview %})).
+     */
+    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 %})).
+     */
+    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`.
+     */
+    expandField?: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation for the selected state of the item. Defaults to `selected`.
+     */
+    selectField?: 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`.
+     */
+    hasChildrenField?: string;
+    /**
+     * Specifies the name of the field which will provide an array representation of the item children.
+     */
+    childrenField?: string;
+    /**
+     * Specifies the name of the field which will provide a text representation for the item. Defaults to `text`.
+     */
+    textField?: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation for the disabled state of the item. Defaults to `disabled`.
+     */
+    disableField?: string;
+    /**
+     * Defines the component that will be used for rendering each of the TreeView items ([see example]({% slug rendering_treeview %})).
+     */
+    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 %})).
+     */
+    'aria-multiselectable'?: boolean | 'false' | 'true';
+    /**
+     * Defines a string value that labels the TreeView ([more on accessibility by the TreeView]({% slug accessibility_treeview %})).
+     */
+    'aria-label'?: string;
+    /**
+     * Identifies the element or elements which will label the TreeView ([more on accessibility by the TreeView]({% slug accessibility_treeview %})).
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Controls the rendering of checkboxes. By default, the checkboxes are not rendered ([see example]({% slug check_items_directly_treeview %})).
+     */
+    checkboxes?: boolean;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation for the checked state of the item. Defaults to `checked`.
+     */
+    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`.
+     */
+    checkIndeterminateField?: string;
+    /**
+     * Fires when a checkbox is clicked or when `Space` is pressed on a focused item ([see example]({% slug check_items_directly_treeview %})).
+     */
+    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.
+     */
+    onItemDragStart?: (event: events.TreeViewItemDragStartEvent) => void;
+    /**
+     * Fires when a dragged item changes its position ([see example]({% slug dragdrop_treeview %})).
+     */
+    onItemDragOver?: (event: events.TreeViewItemDragOverEvent) => void;
+    /**
+     * Fires when a dragged item is dropped ([see example]({% slug dragdrop_treeview %})).
+     */
+    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`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Sets the direction of the component.
+     */
+    dir?: string;
+    /**
+     * The event that is fired when the ContextMenu is activated.
+     */
+    onContextMenu?: (event: TreeViewContextMenuEvent) => void;
+}
+
+/**
+ * @hidden
+ */
+declare interface TreeViewState {
+    focusedItemId?: string;
+    focusedItemPublicId?: any;
+    tabbableItemId?: string;
+}
+
+export { }