/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { CSSProperties, ComponentType } from 'react';
import { ItemRenderProps } from './ItemRenderProps.js';
import { TreeViewContextMenuEvent } from './events.js';
import * as events from './events.js';
/**
 * Represents the props of the [KendoReact TreeView component](https://www.telerik.com/kendo-react-ui/components/treeview).
 */
export 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
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <TreeView size="large" />
     * ```
     */
    size?: '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;
}