@progress/kendo-react-orgchart/index.d.mts

React OrgChart renders a message to the user with information about the status of an app process. KendoReact OrgChart package

/**
 * @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`&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 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;
    /**
     * Sets the hierarchical indices of the items to which the check operation applies, 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 %}).
 */
export declare interface OrgChartProps {
    /**
     * @hidden
     */
    children?: React_2.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;
    /**
     * Sets the name of the field which provides an id for the item.
     *
     * @default "id"
     */
    idField?: string;
    /**
     * Sets the name of the field which provides an array representation of the item children.
     */
    childrenField?: string;
    /**
     * Sets the name of the field which provides a Boolean representation for the expanded state of the item.
     *
     * @default "expanded"
     */
    expandField?: string;
    /**
     * Sets the name of the field which provides a title representation for the item.
     *
     * @default "text"
     */
    titleField?: string;
    /**
     * Sets 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.
     *
     * @default undefined
     */
    hasChildrenField?: string;
    /**
     * Sets the name of the field which provides a subtitle representation for the item.
     *
     * @default "subtitle"
     */
    subtitleField?: string;
    /**
     * Sets the field which provides an avatar representation for the item.
     *
     * @default "avatar"
     */
    avatarField?: string;
    /**
     * Sets the type of the Avatar that renders for the OrgChart item.
     *
     * @default "image"
     */
    avatarType?: string;
    /**
     * Sets if the Avatar inside the OrgChart's cards is displayed.
     *
     * @default true
     */
    showAvatar?: boolean;
    /**
     * Sets a string array with the colors for the items. By default the colors come from the current Kendo Theme.
     */
    cardsColors?: string[];
    /**
     * Sets additional CSS styles to the OrgChart.
     */
    style?: React_2.CSSProperties;
    /**
     * Sets the data of the OrgChart.
     */
    data?: any[];
    /**
     * Sets the field by which the OrgChart data is grouped.
     */
    groupField?: string;
    /**
     * Sets the height of the card of the OrgChart.
     */
    cardHeight?: number;
    /**
     * Sets the width of the card of the OrgChart.
     */
    cardWidth?: number;
    /**
     * Sets the height of the title of the grouped OrgChart.
     */
    groupTitleHeight?: number;
    /**
     * Sets the height of the subtitle of the grouped OrgChart.
     */
    groupSubtitleHeight?: number;
    /**
     * Sets the component that renders each of the OrgChart items.
     */
    itemRender?: React_2.ComponentType<OrgChartItemRenderProps>;
    /**
     * Sets the component that renders each of the grouped OrgChart title.
     */
    groupTitleRender?: React_2.ComponentType<OrgChartGroupTitleProps>;
    /**
     * Sets the component that renders each of the grouped OrgChart subtitle.
     */
    groupSubtitleRender?: React_2.ComponentType<OrgChartGroupSubtitleProps>;
    /**
     * Sets the height of the vertical line of the OrgChart.
     */
    verticalLine?: number;
    /**
     * Sets the height of the OrgChart.
     */
    height?: string | number;
    /**
     * Sets if the OrgChart can be navigated with the keyboard.
     *
     * @default 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
 * const App = () => {
 *     const [items, setItems] = 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 (
 *         <OrgChart
 *             data={processOrgChartItems(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 processOrgChartItems(data: any[] | null | undefined, operations: OrgChartOperationDescriptors): any[];

/**
 * @hidden
 */
export declare const ServerOrgChart: {
    (props: OrgChartProps): 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;
}

export { }