* );
* }
* 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(, 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`—Indicates that the source item will become the previous sibling of the target item.
* * `after`—Indicates that the source item will become the next sibling of the target item.
* * `child`—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 (
*
*
* this.dragClue = dragClue} />
*
* );
* }
*
* 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(, 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 (
* 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(, document.querySelector('my-app'));
* ```
*/
export declare function processTreeViewItems(data: any[] | null | undefined, operations: TreeViewOperationDescriptors): any[];
/** @hidden */
export declare const TreeView: ForwardRefExoticComponent>;
/**
* Represents the object of the `onCheckChange` event ([see example]({% slug check_helper_funcs_treeview %})).
*/
export declare interface TreeViewCheckChangeEvent extends BaseEvent {
/**
* 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 ;
* }
* }
* ReactDOM.render(, document.querySelector('my-app'));
* ```
*/
export declare class TreeViewClassComponent extends React_2.Component {
/**
* @hidden
*/
static propTypes: {
data: default_2.Requireable;
animate: default_2.Requireable;
tabIndex: default_2.Requireable;
focusIdField: default_2.Requireable;
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;
selectField: default_2.Requireable;
iconField: default_2.Requireable;
childrenField: default_2.Requireable;
hasChildrenField: default_2.Requireable;
textField: default_2.Requireable;
disableField: default_2.Requireable;
item: default_2.Requireable;
'aria-multiselectable': (props: any, propName: string, componentName: string) => Error | null;
'aria-label': default_2.Requireable;
'aria-labelledby': default_2.Requireable;
size: default_2.Requireable<"small" | "large" | "medium" | null | undefined>;
dir: default_2.Requireable;
};
/**
* @hidden
*/
static defaultProps: {
animate: boolean;
expandField: string;
selectField: string;
iconField: string;
hasChildrenField: string;
childrenField: string;
textField: string;
disableField: string;
checkField: string;
checkIndeterminateField: string;
size: "small" | "large" | "medium" | null | undefined;
};
/**
* @hidden
*/
state: {
focusedItemId: undefined;
focusedItemPublicId: undefined;
tabbableItemId: string;
};
private blurRequest;
private fieldsSvc;
private allowExplicitFocus;
private readonly showLicenseWatermark;
private get treeGuid();
private _element;
/**
* @hidden
*/
get element(): HTMLDivElement | null;
constructor(props: TreeViewProps);
/**
* @hidden
*/
render(): JSX.Element;
/**
* @hidden
*/
componentDidUpdate(): void;
private onFocusDomElNeeded;
private onCheckChange;
private onExpandChange;
private onPress;
private onDrag;
private onRelease;
private onItemClick;
private onFocus;
private onBlur;
private onKeyDown;
private dispatchEventsOnKeyDown;
private setFocus;
private onContextMenu;
private getFocusedItem;
private getItemById;
private dispatchCheckChange;
private dispatchExpandChange;
private dispatchItemClick;
private refocusDueToFocusIdField;
private get ariaMultiSelectable();
private get data();
private focusDomItem;
/**
* Returns the `guid` which is associated with the TreeView.
*/
get guid(): string;
}
/**
* Represents the object of the `onContextMenu` event ([see example]({% slug overview_treeview %})).
*/
export declare interface TreeViewContextMenuEvent extends BaseEvent {
/**
* 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;
}
/**
* 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 (
*
*
* this.dragClue = dragClue} />
*
* );
* }
*
* 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(, 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`—Indicates that the dragged item is positioned at the beginning of the destination item.
* * `after`—Indicates that the dragged item is positioned at the end of the destination item.
* * `child`—Indicates that the dragged item is positioned in the middle of the destination item.
* * `undefined`—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 (
*
*
* this.dragClue = dragClue} />
*
* );
* }
*
* 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(, document.querySelector('my-app'));
* ```
*/
export declare class TreeViewDragClue extends React_2.PureComponent {
/**
* @hidden
*/
static defaultProps: {
style: {
display: string;
position: string;
zIndex: number;
padding: string;
};
};
/**
* @hidden
*/
readonly state: TreeViewDragClueState;
/**
* @hidden
*/
render(): false | JSX.Element | undefined;
/**
* Displays the TreeViewDragClue component.
*
* @param top - The `top` CSS position of the component.
* @param left - The `left` CSS position of the component.
* @param text - The text of the component.
* @param operationClassName - The CSS class name which is related to the specific drop operation.
*/
show(top: number, left: number, text: string, operationClassName: string): void;
/**
* Hides the TreeViewDragClue component.
*/
hide(): void;
}
/**
* Represents the props of the KendoReact TreeViewDragClue component.
*/
declare interface TreeViewDragClueProps {
/**
* Sets custom CSS styles to the component.
* When specified, the default CSS styles are removed.
*/
style?: React_2.CSSProperties;
}
/**
* @hidden
*/
declare interface TreeViewDragClueState {
visible?: boolean;
top?: number;
left?: number;
text?: string;
operationClassName?: string;
}
/**
* Represents the object of the `onExpandChange` event ([see example]({% slug overview_treeview %})).
*/
export declare interface TreeViewExpandChangeEvent extends BaseEvent {
/**
* 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 {
}
/**
* Represents the object of the `onItemClick` event ([see example]({% slug overview_treeview %})).
*/
export declare interface TreeViewItemClickEvent extends BaseEvent {
/**
* The item that is clicked.
*/
item: any;
/**
* The hierarchical index of the item. The indices are zero-based.
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
*/
itemHierarchicalIndex: string;
}
/**
* Represents the object of the `onItemDragEnd` event ([see example]({% slug dragdrop_treeview %})).
*/
export declare interface TreeViewItemDragEndEvent {
/**
* The target that is associated with the dragged item.
*/
target: TreeViewClassComponent;
/**
* The item that is dragged.
*/
item: any;
/**
* The hierarchical index of the dragged item. The indices are zero-based.
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
*/
itemHierarchicalIndex: string;
/**
* The X (horizontal) coordinate (in pixels) at which the event occured that is relative to the left edge of the entire document.
* `pageX` includes any portion of the document that is not currently visible.
*/
pageX: number;
/**
* The Y (vertical) coordinate (in pixels) at which the event occured that is relative to the whole document.
* `pageY` observes any vertical scrolling of the page.
*/
pageY: number;
/**
* Provides the horizontal coordinate within the client area of the application at which the event occurred
* (as opposed to the coordinate within the page).
*/
clientX: number;
/**
* Provides the vertical coordinate within the client area of the application at which the event occurred
* (as opposed to the coordinate within the page).
*/
clientY: number;
}
/**
* Represents the object of the `onItemDragOver` event ([see example]({% slug dragdrop_treeview %})).
*/
export declare interface TreeViewItemDragOverEvent {
/**
* The target that is associated with the dragged item.
*/
target: TreeViewClassComponent;
/**
* The item that is dragged.
*/
item: any;
/**
* The hierarchical index of the dragged item. The indices are zero-based.
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
*/
itemHierarchicalIndex: string;
/**
* The X (horizontal) coordinate (in pixels) at which the event occurred that is relative to the left edge of the entire document.
* Includes any portion of the document which is not currently visible.
*/
pageX: number;
/**
* The Y (vertical) coordinate (in pixels) at which the event occurred that is relative to the whole document.
* `pageY` observes any vertical scrolling of the page.
*/
pageY: number;
/**
* Provides the horizontal coordinate within the client area of the application at which the event occurred
* (as opposed to the coordinate within the page).
*/
clientX: number;
/**
* Provides the vertical coordinate within the client area of the application at which the event occurred
* (as opposed to the coordinate within the page).
*/
clientY: number;
}
/**
* Represents the object of the `onItemDragStart` event.
*/
export declare interface TreeViewItemDragStartEvent {
/**
* An event target.
*/
target: TreeViewClassComponent;
/**
* The item that is dragged.
*/
item: any;
/**
* The hierarchical index of the dragged item. The indices are zero-based.
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
*/
itemHierarchicalIndex: string;
}
/**
* @hidden
*/
declare interface TreeViewItemProps {
item: any;
itemId: string;
treeGuid: string;
animate: boolean;
focusedItemId?: string;
tabbableItemId: string;
fieldsService: FieldsService;
itemUI?: React_2.ComponentType<{
item: any;
itemHierarchicalIndex: string;
}>;
ariaMultiSelectable: boolean;
onItemClick: any;
expandIcons?: boolean;
iconField?: string;
onExpandChange: any;
onCheckChange: any;
checkboxes?: boolean;
onFocusDomElNeeded: any;
draggable?: boolean;
onPress: any;
onDrag: any;
onRelease: any;
size?: null | 'small' | 'medium' | 'large';
/**
* @hidden
*
* Internal usage!!!
*/
position?: 'top' | 'mid' | 'bot';
/**
* Currently for internal usage only! Replicates the current behavior which disables all children
* if the parent is disabled, which was previously achieved only though the kendo-themes,
* but due to rendering changes had to be replicated programmatically!
*
* @hidden
*/
disabled?: boolean;
/**
* @hidden
*/
isRtl?: boolean;
/**
* @hidden
*/
onContextMenu: (event: React_2.MouseEvent, 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`—Indicates that an item is expanded.
* * `selected`—Indicates that an item is selected.
* * `checked`—Indicates that an item is checked.
*/
operationField?: string;
/**
* The name of the field which will uniquely describe an item as an alternative to its hierarchical index.
*/
idField?: string;
}
/**
* The descriptors of the data operations which are applied to the TreeView component.
*/
export declare interface TreeViewOperationDescriptors {
/**
* The hierarchical indices of the items to which the expand operation will be applied, or the descriptor of the operation.
*/
expand?: string[] | TreeViewOperationDescriptor;
/**
* The hierarchical indices of the items to which the select operation will be applied, or the descriptor of the operation.
*/
select?: string[] | TreeViewOperationDescriptor;
/**
* The hierarchical indices of the items to which the check operation will be applied, or the descriptor of the operation.
*/
check?: string[] | TreeViewCheckDescriptor;
/**
* When the operations are applied, the corresponding items and their parents are cloned.
* For performance reasons, TreeView items are cloned only once.
* The name of the field which provides a Boolean representation of whether an item is already cloned.
* Defaults to `cloned`.
*/
cloneField?: string;
/**
* The expand field of the item.
*/
expandField?: string;
/**
* The select field of the item.
*/
selectField?: string;
/**
* The check field of the item.
*/
checkField?: string;
/**
* The children field of the item.
*/
childrenField?: string;
}
/**
* Represents the props of the [KendoReact TreeView component]({% slug overview_treeview %}).
*/
export declare interface TreeViewProps {
/**
* Adds a custom CSS class to the TreeView container element.
*
* Example:
* ```jsx
*
* ```
*/
className?: string;
/**
* Specifies the `id` attribute of the TreeView container element.
*
* Example:
* ```jsx
*
* ```
*/
id?: string;
/**
* Sets the inline styles for the TreeView container element.
*
* Example:
* ```jsx
*
* ```
*/
style?: CSSProperties;
/**
* Provides the hierarchical data to be displayed in the TreeView.
*
* Example:
* ```jsx
*
* ```
*/
data?: any[] | null;
/**
* Enables or disables the expand and collapse animations.
*
* Example:
* ```jsx
*
* ```
*/
animate?: boolean;
/**
* Specifies the `tabIndex` attribute of the TreeView container element.
*
* Example:
* ```jsx
*
* ```
*/
tabIndex?: number;
/**
* The TreeView has a built-in implementation of focusing and keyboard navigation. By default, the component uses
* hierarchical indices to uniquely match the focused item. You can use the `focusIdField` prop for specifying the
* name of the field which will uniquely describe an
* item as an alternative to its hierarchical index ([see example]({% slug datareload_treeview %}#toc-using-item-ids)).
*
* Example:
* ```jsx
*
* ```
*/
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
* `custom-index-${id}`} />
* ```
*/
getFocusHierarchicalIndex?: (itemId: any) => string | undefined;
/**
* Controls the rendering of the expand (collapse) icons. By default, the icons are not rendered ([see example]({% slug expansion_ways_treeview %})).
*
* Example:
* ```jsx
*
* ```
*/
expandIcons?: boolean;
/**
* Triggered when an item is expanded or collapsed.
*
* Example:
* ```jsx
* console.log(event.item)} />
* ```
*/
onExpandChange?: (event: events.TreeViewExpandChangeEvent) => void;
/**
* Fires when an item is clicked or when `Enter` is pressed on a focused item ([see example]({% slug selection_ways_treeview %})).
*
* Example:
* ```jsx
* console.log(event.item)} />
* ```
*/
onItemClick?: (event: events.TreeViewItemClickEvent) => void;
/**
* Specifies the name of the field which will provide a Boolean representation for the expanded state of the item. Defaults to `expanded`.
*
* Example:
* ```jsx
*
* ```
*/
expandField?: string;
/**
* Specifies the name of the field which will provide a Boolean representation for the selected state of the item. Defaults to `selected`.
*
* Example:
* ```jsx
*
* ```
*/
selectField?: string;
/**
* Specifies the name of the field which will provide an icon for the specific TreeView item. Defaults to `svgIcon`.
*
* Example:
* ```jsx
*
* ```
*/
iconField?: string;
/**
* Specifies the name of the field which indicates to the TreeView that an item has children even if the children are not initially passed. Used for implementing the load-on-demand feature ([see example]({% slug databinding_treeview %}#toc-loading-data-on-demand)). Defaults to `hasChildren`.
*
* Example:
* ```jsx
*
* ```
*/
hasChildrenField?: string;
/**
* Specifies the name of the field which will provide an array representation of the item children.
*
* Example:
* ```jsx
*
* ```
*/
childrenField?: string;
/**
* Specifies the name of the field which will provide a text representation for the item. Defaults to `text`.
*
* Example:
* ```jsx
*
* ```
*/
textField?: string;
/**
* Specifies the name of the field which will provide a Boolean representation for the disabled state of the item. Defaults to `disabled`.
*
* Example:
* ```jsx
*
* ```
*/
disableField?: string;
/**
* Defines the component that will be used for rendering each of the TreeView items ([see example]({% slug rendering_treeview %})).
*
* Example:
* ```jsx
* } />
* ```
*/
item?: ComponentType;
/**
* Indicates that the user can select more than one TreeView items.
* If the TreeView is in a multiple selection mode, set the `aria-multiselectable`
* prop to `true` ([more on accessibility by the TreeView]({% slug accessibility_treeview %})).
*
* Example:
* ```jsx
*
* ```
*/
'aria-multiselectable'?: boolean | 'false' | 'true';
/**
* Defines a string value that labels the TreeView ([more on accessibility by the TreeView]({% slug accessibility_treeview %})).
*
* Example:
* ```jsx
*
* ```
*/
'aria-label'?: string;
/**
* Identifies the element or elements which will label the TreeView ([more on accessibility by the TreeView]({% slug accessibility_treeview %})).
*
* Example:
* ```jsx
*
* ```
*/
'aria-labelledby'?: string;
/**
* Controls the rendering of checkboxes. By default, the checkboxes are not rendered.
*
* Example:
* ```jsx
*
* ```
*/
checkboxes?: boolean;
/**
* Specifies the name of the field which will provide a Boolean representation for the checked state of the item. Defaults to `checked`.
*
* Example:
* ```jsx
*
* ```
*/
checkField?: string;
/**
* Specifies the name of the field which will provide a Boolean representation for the check indeterminate state of the item. Defaults to `checkIndeterminate`.
*
* Example:
* ```jsx
*
* ```
*/
checkIndeterminateField?: string;
/**
* Fires when a checkbox is clicked or when `Space` is pressed on a focused item.
*
* Example:
* ```jsx
* console.log(event.item)} />
* ```
*/
onCheckChange?: (event: events.TreeViewCheckChangeEvent) => void;
/**
* Controls the dispatching of the `drag` events. By default, the `drag` events are not dispatched ([see example]({% slug dragdrop_treeview %})).
*/
draggable?: boolean;
/**
* Fires when the dragging of an item has started.
*
* Example:
* ```jsx
* console.log(event.item)} />
* ```
*/
onItemDragStart?: (event: events.TreeViewItemDragStartEvent) => void;
/**
* Fires when a dragged item changes its position ([see example]({% slug dragdrop_treeview %})).
*
* Example:
* ```jsx
* console.log(event.item)} />
* ```
*/
onItemDragOver?: (event: events.TreeViewItemDragOverEvent) => void;
/**
* Fires when a dragged item is dropped ([see example]({% slug dragdrop_treeview %})).
*
* Example:
* ```jsx
* console.log(event.item)} />
* ```
*/
onItemDragEnd?: (event: events.TreeViewItemDragEndEvent) => void;
/**
* Configures the `size` of the TreeView.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*
* Example:
* ```jsx
*
* ```
*/
size?: null | 'small' | 'medium' | 'large';
/**
* Sets the direction of the component.
*
* Example:
* ```jsx
*
* ```
*/
dir?: string;
/**
* The event that is fired when the ContextMenu is activated.
*
* Example:
* ```jsx
* console.log(event.item)} />
* ```
*/
onContextMenu?: (event: TreeViewContextMenuEvent) => void;
}
/**
* @hidden
*/
declare interface TreeViewState {
focusedItemId?: string;
focusedItemPublicId?: any;
tabbableItemId?: string;
}
export { }