/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import * as React from 'react';
/**
 * Represents the props of the KendoReact TreeViewDragClue component.
 */
export interface TreeViewDragClueProps {
    /**
     * Sets custom CSS styles to the component.
     * When specified, the default CSS styles are removed.
     */
    style?: React.CSSProperties;
}
/**
 * @hidden
 */
export interface TreeViewDragClueState {
    visible?: boolean;
    top?: number;
    left?: number;
    text?: string;
    operationClassName?: string;
}
/**
 * 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.PureComponent<TreeViewDragClueProps, TreeViewDragClueState> {
    /**
     * @hidden
     */
    static defaultProps: {
        style: {
            display: string;
            position: string;
            zIndex: number;
            padding: string;
        };
    };
    /**
     * @hidden
     */
    readonly state: TreeViewDragClueState;
    /**
     * @hidden
     */
    render(): false | React.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;
}