/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { JSX } from 'react/jsx-runtime';
import * as React_2 from 'react';
/**
* Represents the OrgChart component.
*/
export declare const OrgChart: React_2.FunctionComponent<OrgChartProps>;
/**
* Represents the OrgChartActionEvent event argument.
*/
export declare interface OrgChartActionEvent {
/**
* Represents the triggered React event.
*/
event: React.KeyboardEvent | React.MouseEvent | React.FocusEvent;
/**
* Item that triggers the event.
*/
item?: any;
/**
* Items that belong to the group that triggers the event.
*/
items?: any;
/**
* @hidden
*/
containerRef?: React.RefObject<HTMLDivElement | null>;
}
/**
* The descriptor which is used for checking.
*/
declare interface OrgChartCheckDescriptor extends OrgChartOperationDescriptor {
/**
* 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 OrgChartExpandChangeEvent event argument.
*/
export declare interface OrgChartExpandChangeEvent {
/**
* Represents the triggered React event.
*/
event: React.MouseEvent | React.KeyboardEvent;
/**
* Represents expand value of the item or group.
*/
expand: boolean;
/**
* Item that triggers the event.
*/
item?: any;
/**
* Items that belong to the group that triggers the event.
*/
items?: any[];
}
/**
* @hidden
*/
export declare interface OrgChartGroupSubtitleProps {
/**
* The styles that are applied to the OrgChart.
*/
style?: React_2.CSSProperties;
/**
* The default class that is applied to the OrgChart group title.
*/
className?: string;
/**
* The default subtitle that are passed to the OrgChart group.
*/
subtitle?: string;
/**
* The collection of inner items of the group.
*/
items?: any[];
/**
* The level of the group.
*/
level?: number;
/**
* The expanded state of the group.
*/
expanded?: boolean;
}
/**
* @hidden
*/
export declare interface OrgChartGroupTitleProps {
/**
* The styles that are applied to the OrgChart group title.
*/
style?: React_2.CSSProperties;
/**
* The default class that is applied to the OrgChart group title.
*/
className?: string;
/**
* The default title that are passed to the OrgChart group.
*/
title?: string;
/**
* The collection of inner items of the group.
*/
items?: any[];
/**
* The level of the group.
*/
level?: number;
/**
* The expanded state of the group.
*/
expanded?: boolean;
}
/**
* The props that are passed to the itemRender component.
*/
export declare interface OrgChartItemRenderProps {
/**
* The item passed to the ItemRender.
*/
item?: any;
/**
* The title of the item.
*/
title?: string;
/**
* The subtitle of the item.
*/
subtitle?: string;
/**
* The level of the item.
*/
level?: number;
/**
* The expanded state of the item.
*/
expanded?: boolean;
/**
* The color of the item.
*/
color?: string;
}
/**
* The descriptor which is used for expanding, selecting, and checking.
*/
declare interface OrgChartOperationDescriptor {
/**
* The IDs of the items to which the operation will be applied. By default, the OrgChart 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 OrgChart component.
*/
declare interface OrgChartOperationDescriptors {
/**
* The hierarchical indices of the items to which the expand operation will be applied, or the descriptor of the operation.
*/
expand?: string[] | OrgChartOperationDescriptor;
/**
* The hierarchical indices of the items to which the select operation will be applied, or the descriptor of the operation.
*/
select?: string[] | OrgChartOperationDescriptor;
/**
* The hierarchical indices of the items to which the check operation will be applied, or the descriptor of the operation.
*/
check?: string[] | OrgChartCheckDescriptor;
/**
* When the operations are applied, the corresponding items and their parents are cloned.
* For performance reasons, OrgChart 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 OrgChart component]({% slug overview_orgchart %}).
*/
declare interface OrgChartProps extends ServerOrgChartProps {
/**
* Specifies if the OrgChart can be navigated with the keyboard.
* Defaults to `true`.
*
* @example
* ```jsx
* <OrgChart navigatable={false} />
* ```
*/
navigatable?: boolean;
/**
* Fires when a node or group is expanded.
*
* @example
* ```jsx
* <OrgChart onExpandChange={(ev) => console.log('Expanded:', ev)} />
* ```
*/
onExpandChange?: (ev: OrgChartExpandChangeEvent) => void;
/**
* @hidden
*/
onKeyDown?: (ev: OrgChartActionEvent) => void;
/**
* Triggers the item action event.
*
* @example
* ```jsx
* <OrgChart onItemAction={(ev) => console.log('Item action:', ev)} />
* ```
*/
onItemAction?: (ev: OrgChartActionEvent) => void;
/**
* Triggers the item double-click action event.
*
* @example
* ```jsx
* <OrgChart onItemDoubleClick={(ev) => console.log('Item double-clicked:', ev)} />
* ```
*/
onItemDoubleClick?: (ev: OrgChartActionEvent) => void;
/**
* Triggers the item context menu action event.
*
* @example
* ```jsx
* <OrgChart onItemContextMenu={(ev) => console.log('Context menu:', ev)} />
* ```
*/
onItemContextMenu?: (ev: OrgChartActionEvent) => void;
/**
* Triggers the group action event.
*
* @example
* ```jsx
* <OrgChart onGroupAction={(ev) => console.log('Group action:', ev)} />
* ```
*/
onGroupAction?: (ev: OrgChartActionEvent) => void;
/**
* @hidden
*/
onGroupBlur?: (ev: OrgChartActionEvent) => void;
/**
* @hidden
*/
onGroupFocus?: (ev: OrgChartActionEvent) => void;
}
/**
* 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 (
* <OrgChart
* data={processOrgChartItems(this.state.items, { expand, select, check })}
* expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
* onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
* onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
* />
* );
* }
* onExpandChange = (event) => {
* let expand = this.state.expand.slice();
* const index = expand.indexOf(event.itemHierarchicalIndex);
* index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
* this.setState({ expand });
* }
* }
*
* const tree = [{
* text: 'Item1',
* items: [
* { text: 'Item1.1' },
* { text: 'Item1.2' },
* { text: 'Item1.3', items: [{ text: 'Item1.3.1' }] }]
* }, {
* text: 'Item2', disabled: true,
* items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
* }, {
* text: 'Item3'
* }];
*
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
export declare function processOrgChartItems(data: any[] | null | undefined, operations: OrgChartOperationDescriptors): any[];
/**
* @hidden
*/
export declare const ServerOrgChart: {
(props: ServerOrgChartProps): JSX.Element;
displayName: string;
};
/**
* @hidden
*/
export declare const ServerOrgChartGroup: React_2.FunctionComponent<ServerOrgChartGroupProps>;
/**
* @hidden
*/
export declare interface ServerOrgChartGroupProps {
/**
* @hidden
*/
children?: React_2.ReactNode;
/**
* Sets additional classes to the OrgChart.
*/
className?: string;
id?: string;
/**
* The styles that are applied to the OrgChart.
*/
style?: React_2.CSSProperties;
title?: string;
subtitle?: string;
line?: boolean;
plus?: boolean;
focus?: boolean;
expanded?: boolean;
nodes?: any[];
level: number;
groupTitleHeight?: number;
groupSubtitleHeight?: number;
childLineWidth?: number;
verticalLine?: number;
orientation?: 'horizontal' | 'vertical';
groupTitleRender?: React_2.ComponentType<OrgChartGroupTitleProps>;
groupSubtitleRender?: React_2.ComponentType<OrgChartGroupSubtitleProps>;
}
/**
* @hidden
*/
export declare const ServerOrgChartNode: React_2.FunctionComponent<ServerOrgChartNodeProps>;
/**
* @hidden
*/
export declare interface ServerOrgChartNodeProps {
/**
* @hidden
*/
children?: React_2.ReactNode;
/**
* Sets additional classes to the OrgChart.
*/
className?: string;
/**
* Passes the OrgChart id to the node.
*/
id?: string;
/**
* The styles that are applied to the OrgChart.
*/
style?: React_2.CSSProperties;
level: number;
childLineWidth?: number;
title?: string;
subtitle?: string;
details?: boolean;
color?: string;
line?: boolean;
plus?: boolean;
expanded?: boolean;
avatar?: string;
avatarType?: string;
showAvatar?: boolean;
cardHeight?: number;
cardWidth?: number;
verticalLine?: number;
itemRender?: React_2.ComponentType<OrgChartItemRenderProps>;
onExpandChange?: (ev: OrgChartExpandChangeEvent) => void;
onItemAction?: (ev: OrgChartActionEvent) => void;
onItemKeyDown?: (ev: OrgChartActionEvent) => void;
node?: any;
}
/**
* @hidden
*/
export declare interface ServerOrgChartProps {
/**
* @hidden
*/
children?: React.ReactNode;
/**
* Sets additional classes to the OrgChart.
*/
className?: string;
/**
* Sets custom id to the OrgChart.
*/
id?: string;
/**
* Sets custom aria-label to the OrgChart. The default value is "Org Chart"
*/
ariaLabel?: string;
/**
* Specifies the name of the field which will provide a id for the item. Defaults to `id`.
*/
idField?: string;
/**
* Specifies the name of the field which will provide an array representation of the item children.
*/
childrenField?: string;
/**
* Specifies the name of the field which will provide a Boolean representation for the expanded state of the item. Defaults to `expanded`.
*/
expandField?: string;
/**
* Specifies the name of the field which will provide a title representation for the item. Defaults to `text`.
*/
titleField?: string;
/**
* Specifies the name of the field which indicates to the OrgChart that an item has
* children even if the children are not initially passed. Used for implementing the load-on-demand feature.
* Defaults to `undefined`.
*/
hasChildrenField?: string;
/**
* Specifies the name of the field which will provide a subtitle representation for the item. Defaults to `subtitle`.
*/
subtitleField?: string;
/**
* Specifies the field which will provide an avatar representation for the item. Defaults to `avatar`.
*/
avatarField?: string;
/**
* Specifies the type of the Avatar that will be rendered for the OrgChart item. Defaults to `image`.
*/
avatarType?: string;
/**
* @default true
* Specifies if the Avatar inside the OrgChart's cards will be displayed or not.
*/
showAvatar?: boolean;
/**
* Specifies a string array with the colors applied to the items. By default the colors come from the Kendo Theme that is used.
*/
cardsColors?: string[];
/**
* The styles that are applied to the OrgChart.
*/
style?: React.CSSProperties;
/**
* Sets the data of the OrgChart.
*/
data?: any[];
/**
* Specifies the field by which the OrgChart data is grouped.
*/
groupField?: string;
/**
* Specifies the height of the card of the OrgChart.
*/
cardHeight?: number;
/**
* Specifies the width of the card of the OrgChart.
*/
cardWidth?: number;
/**
* Specifies the height of the title of the grouped OrgChart.
*/
groupTitleHeight?: number;
/**
* Specifies the height of the subtitle of the grouped OrgChart.
*/
groupSubtitleHeight?: number;
/**
* Defines the component that will be used for rendering each of the OrgChart items.
*/
itemRender?: React.ComponentType<OrgChartItemRenderProps>;
/**
* Defines the component that will be used for rendering each of the grouped OrgChart title.
*/
groupTitleRender?: React.ComponentType<OrgChartGroupTitleProps>;
/**
* Defines the component that will be used for rendering each of the grouped OrgChart subtitle.
*/
groupSubtitleRender?: React.ComponentType<OrgChartGroupSubtitleProps>;
/**
* Specifies the height of the vertical line of the OrgChart.
*/
verticalLine?: number;
/**
* Specifies the width the OrgChart.
*/
height?: string | number;
}
export { }