@progress/kendo-react-treeview 13.3.0-develop.9 → 13.4.0-develop.1

package/index.d.ts

@@ -5,1313 +5,19 @@
  * 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
- * const App = () => {
- *    const [check, setCheck] = React.useState([]);
- *    const [items] = React.useState(tree);
- *
- *    const onCheckChange = (event) => {
- *        setCheck(handleTreeViewCheckChange(event, check, items));
- *    }
- *
- *    return (
- *        <div>
- *            <TreeView
- *                checkboxes={true} onCheckChange={onCheckChange}
- *                data={processTreeViewItems(items, { check })}
- *            />
- *            <div style={{ marginTop: 5 }}>
- *                <i>Press SPACE to check/uncheck the active item</i>
- *                <div className="example-config">
- *                    Checked Indices: {check.join(",")}
- *                </div>
- *            </div>
- *        </div>
- *    );
- * }
- *
- * 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' } ]
- * } ];
- * ```
- */
-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](https://www.telerik.com/kendo-react-ui/components/treeview/custom-rendering)).
- */
-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
- * const App = () => {
- *     const dragClueRef = React.useRef(null);
- *     const [tree, setTree] = React.useState([{
- *         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 }]
- *     }]);
- *
- *     const SEPARATOR = '_';
- *
- *     const 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 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, 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';
- *     };
- *
- *     const onItemDragOver = (event) => {
- *         dragClueRef.current.show(event.pageY + 10, event.pageX, event.item.text, getClueClassName(event));
- *     };
- *
- *     const onItemDragEnd = (event) => {
- *         dragClueRef.current.hide();
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
- *
- *         if (eventAnalyzer.isDropAllowed) {
- *             const updatedTree = moveTreeViewItem(
- *                 event.itemHierarchicalIndex,
- *                 tree,
- *                 eventAnalyzer.getDropOperation(),
- *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
- *             );
- *
- *             setTree(updatedTree);
- *         }
- *     };
- *
- *     return (
- *         <div>
- *             <TreeView data={tree} draggable={true}
- *                 onItemDragOver={onItemDragOver} onItemDragEnd={onItemDragEnd} />
- *             <TreeViewDragClue ref={dragClueRef} />
- *         </div>
- *     );
- * }
- * ```
- */
-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](https://www.telerik.com/kendo-react-ui/components/treeview/expansion/update-expanded-items#toc-using-a-helper-function)
- * * [Selecting and deselecting items](https://www.telerik.com/kendo-react-ui/components/treeview/selection/update-selected-items#toc-using-a-helper-function)
- * * [Checking and unchecking items](https://www.telerik.com/kendo-react-ui/components/treeview/checkboxes/helper-functions)
- *
- * @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
- * const App = () => {
- *     const [items] = React.useState(tree);
- *     const [expand, setExpand] = React.useState([]);
- *     const [select, setSelect] = React.useState([]);
- *     const [check, setCheck] = React.useState([]);
- *
- *     const onExpandChange = (event) => {
- *         let newExpand = expand.slice();
- *         const index = newExpand.indexOf(event.itemHierarchicalIndex);
- *         index === -1 ? newExpand.push(event.itemHierarchicalIndex) : newExpand.splice(index, 1);
- *         setExpand(newExpand);
- *     }
- *
- *     return (
- *         <TreeView
- *             data={processTreeViewItems(items, { expand, select, check })}
- *             expandIcons={true} onExpandChange={onExpandChange} checkboxes={true}
- *             onCheckChange={event => setCheck([ event.itemHierarchicalIndex ])}
- *             onItemClick={event => setSelect([ event.itemHierarchicalIndex ])}
- *         />
- *     );
- * }
- *
- * 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'
- * }];
- * ```
- */
-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](https://www.telerik.com/kendo-react-ui/components/treeview/checkboxes/helper-functions)).
- */
-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](https://www.telerik.com/kendo-react-ui/components/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' }]
- * }];
- * const App = () => {
- *     return <TreeView data={data} />;
- * }
- * ```
- */
-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" | "medium" | "large" | 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" | "medium" | "large" | null | undefined;
-    };
-    /**
-     * @hidden
-     */
-    state: {
-        focusedItemId: undefined;
-        focusedItemPublicId: undefined;
-        tabbableItemId: string;
-    };
-    private blurRequest;
-    private fieldsSvc;
-    private allowExplicitFocus;
-    private readonly showLicenseWatermark;
-    private readonly licenseMessage?;
-    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](https://www.telerik.com/kendo-react-ui/components/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
- * const App = () => {
- *     const dragClueRef = React.useRef(null);
- *     const [tree, setTree] = React.useState([{
- *         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 }]
- *     }]);
- *
- *     const SEPARATOR = '_';
- *
- *     const 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 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, 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';
- *     };
- *
- *     const onItemDragOver = (event) => {
- *         dragClueRef.current.show(event.pageY + 10, event.pageX, event.item.text, getClueClassName(event));
- *     };
- *
- *     const onItemDragEnd = (event) => {
- *         dragClueRef.current.hide();
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
- *
- *         if (eventAnalyzer.isDropAllowed) {
- *             const updatedTree = moveTreeViewItem(
- *                 event.itemHierarchicalIndex,
- *                 tree,
- *                 eventAnalyzer.getDropOperation(),
- *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
- *             );
- *
- *             setTree(updatedTree);
- *         }
- *     };
- *
- *     return (
- *         <div>
- *             <TreeView data={tree} draggable={true}
- *                 onItemDragOver={onItemDragOver} onItemDragEnd={onItemDragEnd} />
- *             <TreeViewDragClue ref={dragClueRef} />
- *         </div>
- *     );
- * }
- * ```
- */
-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
- * const App = () => {
- *     const dragClueRef = React.useRef(null);
- *     const [tree, setTree] = React.useState([{
- *         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 }]
- *     }]);
- *
- *     const SEPARATOR = '_';
- *
- *     const 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 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, 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';
- *     };
- *
- *     const onItemDragOver = (event) => {
- *         dragClueRef.current.show(event.pageY + 10, event.pageX, event.item.text, getClueClassName(event));
- *     };
- *
- *     const onItemDragEnd = (event) => {
- *         dragClueRef.current.hide();
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
- *
- *         if (eventAnalyzer.isDropAllowed) {
- *             const updatedTree = moveTreeViewItem(
- *                 event.itemHierarchicalIndex,
- *                 tree,
- *                 eventAnalyzer.getDropOperation(),
- *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
- *             );
- *
- *             setTree(updatedTree);
- *         }
- *     };
- *
- *     return (
- *         <div>
- *             <TreeView data={tree} draggable={true}
- *                 onItemDragOver={onItemDragOver} onItemDragEnd={onItemDragEnd} />
- *             <TreeViewDragClue ref={dragClueRef} />
- *         </div>
- *     );
- * }
- * ```
- */
-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](https://www.telerik.com/kendo-react-ui/components/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](https://www.telerik.com/kendo-react-ui/components/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](https://www.telerik.com/kendo-react-ui/components/treeview/drag-drop)).
- */
-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](https://www.telerik.com/kendo-react-ui/components/treeview/drag-drop)).
- */
-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](https://www.telerik.com/kendo-react-ui/components/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.
-     *
-     * @default true
-     *
-     * @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](https://www.telerik.com/kendo-react-ui/components/treeview/data-reload#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](https://www.telerik.com/kendo-react-ui/components/treeview/expansion/update-expanded-items)).
-     *
-     * 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](https://www.telerik.com/kendo-react-ui/components/treeview/selection/update-selected-items)).
-     *
-     * 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.
-     *
-     * @default "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.
-     *
-     * @default "selected"
-     *
-     * @example
-     * ```jsx
-     * <TreeView selectField="isSelected" />
-     * ```
-     */
-    selectField?: string;
-    /**
-     * Specifies the name of the field which will provide an icon for the specific TreeView item.
-     *
-     * @default "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](https://www.telerik.com/kendo-react-ui/components/treeview/data-binding#toc-loading-data-on-demand)).
-     *
-     * @default "hasChildren"
-     *
-     * @example
-     * ```jsx
-     * <TreeView hasChildrenField="hasSubItems" />
-     * ```
-     */
-    hasChildrenField?: string;
-    /**
-     * Specifies the name of the field which will provide an array representation of the item children.
-     *
-     * @default "items"
-     *
-     * @example
-     * ```jsx
-     * <TreeView childrenField="subItems" />
-     * ```
-     */
-    childrenField?: string;
-    /**
-     * Specifies the name of the field which will provide a text representation for the item.
-     *
-     * @default "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.
-     *
-     * @default "disabled"
-     *
-     * @example
-     * ```jsx
-     * <TreeView disableField="isDisabled" />
-     * ```
-     */
-    disableField?: string;
-    /**
-     * Defines the component that will be used for rendering each of the TreeView items ([see example](https://www.telerik.com/kendo-react-ui/components/treeview/custom-rendering)).
-     *
-     * 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](https://www.telerik.com/kendo-react-ui/components/treeview/accessibility/wai-aria-support)).
-     *
-     * 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](https://www.telerik.com/kendo-react-ui/components/treeview/accessibility/wai-aria-support)).
-     *
-     * 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](https://www.telerik.com/kendo-react-ui/components/treeview/accessibility/wai-aria-support)).
-     *
-     * 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.
-     *
-     * @default "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.
-     *
-     * @default "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](https://www.telerik.com/kendo-react-ui/components/treeview/drag-drop)).
-     */
-    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](https://www.telerik.com/kendo-react-ui/components/treeview/drag-drop)).
-     *
-     * Example:
-     * ```jsx
-     * <TreeView onItemDragOver={(event) => console.log(event.item)} />
-     * ```
-     */
-    onItemDragOver?: (event: events.TreeViewItemDragOverEvent) => void;
-    /**
-     * Fires when a dragged item is dropped ([see example](https://www.telerik.com/kendo-react-ui/components/treeview/drag-drop)).
-     *
-     * 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 { }
+import { TreeView as TreeViewClassComponent, TreeViewHandle } from './TreeView.js';
+import { TreeViewItemClickEvent, TreeViewExpandChangeEvent, TreeViewCheckChangeEvent, TreeViewItemDragOverEvent, TreeViewItemDragStartEvent, TreeViewItemDragEndEvent, TreeViewContextMenuEvent } from './events.js';
+import { processTreeViewItems } from './processTreeViewItems.js';
+import { moveTreeViewItem } from './moveTreeViewItem.js';
+import { handleTreeViewCheckChange, TreeViewCheckChangeSettings } from './handleTreeViewCheckChange.js';
+import { TreeViewOperationDescriptor, TreeViewOperationDescriptors, TreeViewCheckDescriptor } from './TreeViewOperationDescriptors.js';
+import { ItemRenderProps } from './ItemRenderProps.js';
+import { TreeViewProps } from './TreeViewProps.js';
+import { TreeViewDragClue } from './TreeViewDragClue.js';
+import { TreeViewDragAnalyzer } from './TreeViewDragAnalyzer.js';
+import { TreeViewItemPropsContext } from './TreeViewItem.js';
+import { default as getItemIdUponKeyboardNavigation } from './utils/getItemIdUponKeyboardNavigation.js';
+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, TreeViewContextMenuEvent, TreeViewOperationDescriptor, TreeViewOperationDescriptors, TreeViewCheckDescriptor, TreeViewProps, ItemRenderProps, TreeViewDragClue, moveTreeViewItem, TreeViewDragAnalyzer, getItemIdUponKeyboardNavigation, FieldsService };