@progress/kendo-react-orgchart 13.3.0 → 13.4.0-develop.1

package/OrgChart.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { OrgChartProps } from './client/ClientOrgChart.js';
+import * as React from 'react';
+/**
+ * Represents the OrgChart component.
+ */
+declare const OrgChart: React.FunctionComponent<OrgChartProps>;
+export { OrgChart, type OrgChartProps };

package/OrgChartOperationDescriptors.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The descriptors of the data operations which are applied to the OrgChart component.
+ */
+export 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;
+}
+/**
+ * The descriptor which is used for expanding, selecting, and checking.
+ */
+export 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 descriptor which is used for checking.
+ */
+export 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;
+}

package/client/ClientOrgChart.d.ts

@@ -0,0 +1,257 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { OrgChartActionEvent } from '../interfaces/OrgChartActionEvent.js';
+import { OrgChartExpandChangeEvent } from '../interfaces/OrgChartExpandChangeEvent.js';
+import { OrgChartItemRenderProps } from '../server/ServerOrgChartNode.js';
+import { OrgChartGroupSubtitleProps, OrgChartGroupTitleProps } from '../server/ServerOrgChartGroup.js';
+import * as React from 'react';
+/**
+ * Represents the props of the [KendoReact OrgChart component](https://www.telerik.com/kendo-react-ui/components/orgchart).
+ */
+export interface OrgChartProps {
+    /**
+     * @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;
+    /**
+     * 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.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.ComponentType<OrgChartItemRenderProps>;
+    /**
+     * Sets the component that renders each of the grouped OrgChart title.
+     */
+    groupTitleRender?: React.ComponentType<OrgChartGroupTitleProps>;
+    /**
+     * Sets the component that renders each of the grouped OrgChart subtitle.
+     */
+    groupSubtitleRender?: React.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;
+}
+/**
+ * @hidden
+ */
+type OrgChartEventsContextType = {
+    cardColors?: string[];
+    onExpandChange?: (ev: OrgChartExpandChangeEvent) => void;
+    onKeyDown?: (ev: OrgChartActionEvent) => void;
+    onItemAction?: (ev: OrgChartActionEvent) => void;
+    onItemContextMenu?: (ev: OrgChartActionEvent) => void;
+    onItemDoubleClick?: (ev: OrgChartActionEvent) => void;
+    onGroupAction?: (ev: OrgChartActionEvent) => void;
+    onGroupBlur?: (ev: OrgChartActionEvent) => void;
+    onGroupFocus?: (ev: OrgChartActionEvent) => void;
+};
+export declare const OrgChartEventsContextContext: React.Context<OrgChartEventsContextType>;
+/**
+ * @hidden
+ */
+export declare const ClientOrgChart: {
+    (props: OrgChartProps): React.JSX.Element;
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        id: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
+        idField: PropTypes.Requireable<string>;
+        childrenField: PropTypes.Requireable<string>;
+        expandField: PropTypes.Requireable<string>;
+        titleField: PropTypes.Requireable<string>;
+        hasChildrenField: PropTypes.Requireable<string>;
+        subtitleField: PropTypes.Requireable<string>;
+        avatarField: PropTypes.Requireable<string>;
+        cardsColors: PropTypes.Requireable<any[]>;
+        data: PropTypes.Requireable<any[]>;
+        groupField: PropTypes.Requireable<string>;
+        cardHeight: PropTypes.Requireable<number>;
+        cardWidth: PropTypes.Requireable<number>;
+        groupTitleHeight: PropTypes.Requireable<number>;
+        groupSubtitleHeight: PropTypes.Requireable<number>;
+        verticalLine: PropTypes.Requireable<number>;
+        height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        onExpandChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemAction: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemDoubleClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemContextMenu: PropTypes.Requireable<(...args: any[]) => any>;
+        onGroupAction: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    displayName: string;
+};
+export {};

package/client/ExpandButton.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @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';
+/**
+ * @hidden
+ */
+export interface ExpandButtonProps {
+    node?: any;
+    nodes?: any[];
+    expanded?: boolean;
+}
+/**
+ * @hidden
+ */
+export declare const ExpandButton: React.FunctionComponent<ExpandButtonProps>;

package/client/OrgChartCard.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @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';
+/**
+ * @hidden
+ */
+export interface OrgChartCardProps {
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * The styles that are applied to the OrgChart.
+     */
+    style?: React.CSSProperties;
+    node?: any;
+}
+/**
+ * @hidden
+ */
+export declare const OrgChartCard: React.FunctionComponent<OrgChartCardProps>;

package/client/OrgChartCardBody.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @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';
+/**
+ * @hidden
+ */
+export interface OrgChartCardBodyProps {
+    level: number;
+    children?: React.ReactNode;
+}
+/**
+ * @hidden
+ */
+export declare const OrgChartCardBody: React.FunctionComponent<OrgChartCardBodyProps>;

package/client/OrgChartGroupContainer.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @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';
+/**
+ * @hidden
+ */
+export interface OrgChartGroupContainerProps {
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * The styles that are applied to the OrgChart.
+     */
+    style?: React.CSSProperties;
+    nodes?: any[];
+}
+/**
+ * @hidden
+ */
+export declare const OrgChartGroupContainer: React.FunctionComponent<OrgChartGroupContainerProps>;

package/dist/cdn/js/kendo-react-orgchart.js

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@progress/kendo-react-common"),require("@progress/kendo-react-layout"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("prop-types"),require("@progress/kendo-data-query")):"function"==typeof define&&define.amd?define(["exports","react","@progress/kendo-react-common","@progress/kendo-react-layout","@progress/kendo-react-buttons","@progress/kendo-svg-icons","prop-types","@progress/kendo-data-query"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactOrgchart={},e.React,e.KendoReactCommon,e.KendoReactLayout,e.KendoReactButtons,e.KendoSvgIcons,e.PropTypes,e.KendoDataQuery)}(this,(function(e,t,n,i,r,a,l,o){"use strict";function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=d(t);const c=e=>window.getComputedStyle(e).backgroundColor,u=`\n    <div class="k-var--series-unset"></div>\n    <div class="k-var--series">\n      ${(()=>{let e='\n      <div class="k-var--series-a"></div>\n      <div class="k-var--series-b"></div>\n      <div class="k-var--series-c"></div>\n      <div class="k-var--series-d"></div>\n      <div class="k-var--series-e"></div>\n      <div class="k-var--series-f"></div>\n';for(let t=0;t<30;t++)e+=`\n      <div class="k-var--series-${t+1}"></div>`;return e})()}\n    </div>\n`;let h=class{getSeriesColors(){const e=this.element,t=[].slice.call(e.querySelectorAll(".k-var--series div")),n=c(e.querySelector(".k-var--series-unset"));return t.reduce(((e,t)=>{const i=(e=>{const t=e.match(/series-([a-z])$/);if(null!==t)return(e=>e.toLowerCase().charCodeAt(0)-97)(t[1]);const n=e.split("--series-")[1];return parseInt(n,10)-1})(t.className),r=c(t);return r!==n&&(e[i]=r),e}),[])}};const p="checked",m="checkIndeterminate",g=80,v=25,f=40,k=s.createContext({cardColors:void 0,onExpandChange:void 0,onKeyDown:void 0,onItemAction:void 0,onItemContextMenu:void 0,onItemDoubleClick:void 0,onGroupAction:void 0,onGroupBlur:void 0,onGroupFocus:void 0}),F=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...e},{navigatable:i,id:r,tabIndex:a,className:l,style:o,data:d,groupField:c,cardWidth:p,cardHeight:m,groupTitleHeight:g,groupSubtitleHeight:v,verticalLine:f,idField:F,childrenField:y,expandField:b,hasChildrenField:x,avatarField:C,titleField:E,subtitleField:w,onExpandChange:I,onItemAction:N,onItemDoubleClick:A,onItemContextMenu:L,onKeyDown:T,onGroupAction:O,onGroupBlur:R,onGroupFocus:D,cardsColors:S,ariaLabel:G,itemRender:W,groupTitleRender:M,groupSubtitleRender:K,height:H,children:B,...z}=t,q=s.useRef(null),j=s.useRef(new n.Navigation({tabIndex:a,root:q,selectors:[t.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[P,$]=s.useState([]),_=s.useRef(null);s.useEffect((()=>{if(i&&j.current.first&&j.current.first.setAttribute("tabindex",String(a)),!S){((e,t)=>{const n=new h,i=n.element=t.createElement("div");let r;i.style.display="none",i.innerHTML=u,t.body.appendChild(i);try{r=n.getSeriesColors()}finally{t.body.removeChild(n.element),delete n.element,e(r)}})((e=>{$(e)}),q.current.ownerDocument||document)}}),[i,a]);return s.createElement("div",{style:o,ref:q,className:n.classNames(l,"k-orgchart")},s.createElement(k.Provider,{value:{cardColors:S||P,onExpandChange:e.onExpandChange,onKeyDown:n=>{if(t.navigatable){const i=n.event,r=" "===i.key?"Space":i.key,a=e.groupField&&-1!==i.target.className.indexOf("k-orgchart-card")&&_.current||j.current,l=i.target.closest(a.selectors.join(","));switch(r){case"ArrowUp":((e,n,i,r)=>{var a;if(i.preventDefault(),(t.groupField?r.items.some((e=>e[t.expandField])):r.item[t.expandField])&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const t=null==(a=e.closest(".k-orgchart-group"))?void 0:a.getAttribute("id"),i=document.querySelector(`[aria-owns="${t}"]`);i?n.focusElement(i,e):n.focusPrevious(e)}})(l,a,i,n);break;case"ArrowDown":((e,n,i,r)=>{var a;i.preventDefault();const l=t.groupField?r.items.some((e=>e[t.expandField])):r.item[t.expandField],o=t.groupField?r.items.find((e=>e[t.childrenField])):r.item[t.childrenField],d=t.groupField?r.items.some((e=>t.hasChildrenField&&e[t.hasChildrenField])):t.hasChildrenField&&r.item[t.hasChildrenField],s=t.groupField?o&&o[t.childrenField]&&o[t.childrenField].length:o&&o.length;if((d||s)&&!l&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const i=t.groupField?".k-orgchart-node-group-container":".k-orgchart-card",r=e.getAttribute("aria-owns"),l=null==(a=document.getElementById(r))?void 0:a.querySelector(i);l?n.focusElement(l,e):n.focusNext(e)}})(l,a,i,n);break;case"ArrowLeft":((e,t,n)=>{n.preventDefault(),t.focusPrevious(e)})(l,a,i);break;case"ArrowRight":((e,t,n)=>{n.preventDefault(),t.focusNext(e)})(l,a,i);break;case"End":((e,t,n)=>{n.preventDefault(),t.focusElement(t.last,null)})(0,a,i);break;case"Home":((e,t,n)=>{n.preventDefault(),t.focusElement(t.first,null)})(0,a,i);break;case"Enter":((n,i,r,a)=>{r.stopPropagation();const l=-1!==n.className.indexOf("k-orgchart-node-group-container");e.groupField&&l?_.current&&_.current.first&&_.current.focusElement(_.current.first,null):t.onItemAction&&t.onItemAction({event:r,item:a.item})})(l,0,i,n);break;case"Escape":(t=>{if(e.groupField){const e=t.closest(".k-orgchart-node-group-container");e&&j.current.focusElement(e,null)}})(l)}}},onItemAction:e=>{if(e.event.stopPropagation(),N&&N.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-card");t&&j.current.focusElement(t,null)}},onItemDoubleClick:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onItemContextMenu:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onGroupAction:e=>{if(O&&O.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-node-group-container");t&&j.current.focusElement(t,null)}},onGroupBlur:e=>{_.current=null},onGroupFocus:e=>{_.current=new n.Navigation({tabIndex:0,root:e.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})}},...z},e.children))};F.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onItemDoubleClick:l.func,onItemContextMenu:l.func,onGroupAction:l.func},F.displayName="KendoClientOrgChart";const y=e=>{const{expanded:t,node:n,nodes:i}=e,l=s.useContext(k);return s.createElement(r.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?a.minusIcon:a.plusIcon,"aria-label":t?"collapse":"expand",onClick:e=>{l.onExpandChange&&l.onExpandChange.call(void 0,{event:e,expand:!t,item:n,items:i})}})},b=e=>{const{node:t,children:r,style:a,...l}=e,[o,d]=s.useState(!1),c=s.useContext(k);return s.createElement(i.Card,{orientation:null,role:"treeitem",className:n.classNames("k-orgchart-card",{"k-focus":o}),onClick:e=>{c.onItemAction&&c.onItemAction.call(void 0,{event:e,item:t})},onKeyDown:e=>{c.onKeyDown&&c.onKeyDown.call(void 0,{event:e,item:t})},onContextMenu:e=>{c.onItemContextMenu&&c.onItemContextMenu.call(void 0,{event:e,item:t})},onDoubleClick:e=>{c.onItemDoubleClick&&c.onItemDoubleClick.call(void 0,{event:e,item:t})},style:a,"aria-selected":o,"aria-keyshortcuts":"Enter",onFocus:()=>d(!0),onBlur:()=>d(!1),...l},r)},x=e=>{const{level:t,children:n}=e,r=s.useContext(k),a=r.cardColors&&r.cardColors[t]||"green";return s.createElement(i.CardBody,{className:"k-hstack",style:{borderTopColor:a}},n)},C=e=>{const{id:t,title:r,subtitle:a,level:l,childLineWidth:o,cardWidth:d,cardHeight:c,verticalLine:u,color:h,line:p,plus:m,expanded:g,node:v,avatar:f,avatarType:k,itemRender:F,showAvatar:C,...E}={avatarType:"image",...e},w=F;return s.createElement("div",{...E,className:n.classNames(e.className,"k-orgchart-node","k-vstack","k-align-items-center")},0!==l&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:u}}),s.createElement(b,{node:v,style:{width:d,height:c},"aria-level":l+1,"aria-expanded":!!g,"aria-owns":t},s.createElement(x,{level:l},w?s.createElement(w,{item:v,title:r,subtitle:a,level:l,expanded:g,color:h}):s.createElement(s.Fragment,null,C&&s.createElement(i.Avatar,{type:k,themeColor:"secondary"},"image"===k?s.createElement("img",{src:f,alt:"KendoReact Avatar Customer"}):f),s.createElement("div",{className:"k-card-title-wrap k-vstack"},s.createElement(i.CardTitle,{className:"k-text-ellipsis"},r),s.createElement("span",{className:"k-spacer"}),s.createElement(i.CardSubtitle,{className:"k-text-ellipsis"},a)),s.createElement("span",{className:"k-spacer"})))),p&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),m&&s.createElement(y,{expanded:g,node:v}),m&&!!o&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:o,marginTop:-15}}))},E=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach((t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some((e=>e[i]&&e[i].length||l&&e[l])),h=u?"horizontal":"vertical",p=u?null:n;e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),E({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}}))},w=(e,t)=>{const n=t||300,i=e.sort(((e,t)=>t.level-e.level));i.forEach((e=>{if(!e.width){const t=i.filter((t=>e.ids.includes(t.parentId))),r=t.length?Math.max(...t.map((e=>e.width||0))):n,a="horizontal"===e.orientation?e.items.length:1,l=r*a+v*(a-1);e.width=l}}))},I=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:o,verticalLine:d,idField:c,childrenField:u,hasChildrenField:h,expandField:p,avatarField:m,titleField:k,subtitleField:F,ariaLabel:y,itemRender:b,height:x,avatarType:I,showAvatar:N}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",avatarType:"image",showAvatar:!0,...e},A=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];E({dataByGroups:A,data:r,cardWidth:l,expandField:p,hasChildrenField:h,childrenField:u,idField:c,groupField:a}),w(A,l),((e,t,n)=>{const i=e.sort(((e,t)=>e.level-t.level));i.forEach((e=>{if(0===e.level)return;const r=i.find((t=>t.ids.includes(e.parentId))),a=(null==r?void 0:r.items.findIndex((t=>e.ids.includes(t[n]))))||0,l=(null==r?void 0:r.items)||[],o=r.width?(r.width-(l.length-1)*v)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach(((e,n)=>{n<a&&(t+=o+v)})),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.items.length)||1,c=(d-(s-1)*v)/s;e.width=c;const u=null==r?void 0:r.items.map((e=>{const r=e[t]?e[t].length:0,a=i.find((t=>t.ids.includes(e[n]))),l=(null==a?void 0:a.width)||0;return"vertical"!==(null==a?void 0:a.orientation)&&0!==r&&e.expanded?l-(l-(r-1)*v)/r:0}));r&&(r.childLineWidths=u)}))})(A,u,c),((e,t,n)=>{const i=t||g,r=n||f;e.forEach((e=>{const t=e.level,n=(i+r)*t+f*(t?t-1:0)-(r-f)*(t?1:0);e.top=n}))})(A,o,d);const L=((e,t,n)=>{const i=t||g,r=n||f;return Math.max(...e.map((e=>{const t=e.top||0,n=e.items.length;return t+("horizontal"===e.orientation?i+r+r:n*(i+r))})))})(A,o,d);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:x||L}},A.map((e=>{const i=e.level,r=e.items,a=e.orientation;return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?y:void 0,"aria-orientation":0===i?a:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[a]}`]:a}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${n.kendoThemeMaps.orientationMap[e.orientation]}`]:e.orientation})},r.map(((n,a)=>{const g=n[u]&&n[u].length||h&&n[h],v=g||"vertical"===e.orientation&&a!==r.length-1,y="vertical"===e.orientation&&0!==a?0:d||f,x=e.childLineWidths?Math.max(...e.childLineWidths):void 0,E=n[p];return s.createElement(C,{id:t+"-"+(i+1)+"-"+n[c],style:{width:x},itemRender:b,cardHeight:o,cardWidth:l,verticalLine:y,key:a,level:i,avatar:n[m],avatarType:I,showAvatar:N,title:n[k],subtitle:n[F],line:v,expanded:E,node:n,childLineWidth:g&&E&&"horizontal"===e.orientation?e.childLineWidths[a]:0,plus:g},n.text)}))))})))};I.displayName="KendoServerOrgChart";const N=Object.freeze({name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"13.3.0",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"}),A=e=>{const{nodes:t,children:i,style:r,...a}=e,[l,o]=s.useState(!1),d=s.useContext(k),c=s.useRef(null);return s.createElement("div",{role:"treeitem","aria-selected":l,ref:c,className:n.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":l}),style:r,onKeyDown:e=>{d.onKeyDown&&d.onKeyDown({event:e,items:t})},onClick:e=>{d.onGroupAction&&d.onGroupAction({event:e,items:t})},onFocus:e=>{o(!0),d.onGroupFocus&&d.onGroupFocus({event:e,items:t,containerRef:c})},onBlur:e=>{o(!1),d.onGroupBlur&&d.onGroupBlur({event:e,items:t})},...a},i)},L="k-orgchart-node-group-title",T="k-orgchart-node-group-subtitle",O=e=>{const{id:t,title:i,subtitle:r,line:a,plus:l,focus:o,level:d,verticalLine:c,childLineWidth:u,orientation:h,expanded:p,nodes:m,groupTitleHeight:g,groupSubtitleHeight:v,groupTitleRender:f,groupSubtitleRender:k,...F}={orientation:"horizontal",...e},b=f,x=k,C={height:g||20},E={height:v||20};return s.createElement("div",{...F,className:n.classNames(e.className,"k-orgchart-node-group","k-vstack","k-align-items-center")},0!==d&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:c}}),s.createElement(A,{nodes:m,"aria-expanded":!!p,"aria-keyshortcuts":"Enter","aria-level":d+1,"aria-owns":t},b?s.createElement(b,{style:C,className:L,title:i,items:m,level:d,expanded:p}):s.createElement("div",{className:L,style:C},i),x?s.createElement(x,{style:E,className:T,subtitle:r,items:m,level:d,expanded:p}):s.createElement("div",{className:T,style:E},r),s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container",{[`k-${n.kendoThemeMaps.orientationMap[h]||h}`]:h})},e.children)),a&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),l&&s.createElement(y,{expanded:p,nodes:m}),l&&!!u&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:u,marginTop:-15}}))},R=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach((t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some((e=>e[i]&&e[i].length||l&&e[l])),h=u?"horizontal":"vertical",p=u?null:n+50,m=e.find((e=>e.parentId===s)),g=e.find((e=>e.ids.includes(s)));let v=!1;if(m){const e=m.ids[0],n=g.items.find((t=>t[r]===e)),i=g.items.find((e=>e[r]===t[r]));v=n[o]===i[o]}m&&v?(m.ids.push(t[r]),m.items=m.items.concat(c)):e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),R({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}}))},D=(e,t)=>{const n=t||300,i=e.sort(((e,t)=>t.level-e.level));i.forEach((e=>{if(!e.width){const t=i.filter((t=>e.ids.includes(t.parentId)));if(t.length){const i=Math.max(...t.map((e=>e.width||0))),r=Math.max(...t.map((e=>e.groupedItems.length||0))),a=Math.max(...e.groupedItems.map((t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+v*(i-1)}))),l=i*r+v*(r-1);e.width=Math.max(l,a)}else{const t=Math.max(...e.groupedItems.map((t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+v*(i-1)})));e.width=t}}}))},S=(e,t,n,i,r)=>{const a=t||g,l=r||f,o=n+i+82;e.forEach((e=>{const t=e.level,n=(a+l+o)*t+f*(t?t-1:0)-(l-f)*(t?1:0);e.top=n}))},G=(e,t,n,i,r)=>{const a=t||g,l=n||f,o=(i||20)+20+82;return Math.max(...e.map((e=>{const t=e.top||0,n=Math.max(...e.groupedItems.map((e=>e.items.length))),i=e.hasChildren?f:0;return t+("horizontal"===e.orientation?a+l+o+l+i:n*(a+l)+o+l)})))},W=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:d,groupTitleHeight:c,groupSubtitleHeight:u,verticalLine:h,idField:p,childrenField:m,expandField:k,hasChildrenField:F,avatarField:y,titleField:b,subtitleField:x,cardsColors:E,ariaLabel:w,itemRender:I,groupTitleRender:N,groupSubtitleRender:A,height:L,avatarType:T,showAvatar:W}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0,...e},M=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];R({dataByGroups:M,data:r,cardWidth:l,expandField:k,hasChildrenField:F,childrenField:m,idField:p,groupField:a}),M.map((e=>{e.groupedItems=o.groupBy(e.items,[{field:a}])})),D(M,l),((e,t)=>{const n=e.sort(((e,t)=>e.level-t.level));n.forEach((e=>{var i;if(0===e.level)return;const r=n.find((t=>t.ids.includes(e.parentId))),a=(null==r?void 0:r.groupedItems.findIndex((n=>n.items.some((n=>e.ids.includes(n[t]))))))||0,l=(null==r?void 0:r.groupedItems)||[],o=r.width?(r.width-(l.length-1)*v)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach(((e,n)=>{n<a&&(t+=o+v)})),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.groupedItems.length)||1,c=(d-(s-1)*v)/s;if(e.width=c,r){const t=e.width-(e.width-(e.groupedItems.length-1)*v)/e.groupedItems.length;r.childLineWidths?null==(i=r.childLineWidths)||i.push(t):r.childLineWidths=[t]}}))})(M,p),S(M,d||g,c||20,u||20,h);const K=G(M,d||g,c||20,u||20);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:L||K}},M.map((e=>{const i=e.level,o=e.groupedItems.map((e=>{const t=e.items.some((e=>e[k]));return{...e,expanded:t}})),g=o.filter((e=>e.expanded)),L="horizontal",R=E&&E[i]||"green";return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?w:void 0,"aria-orientation":0===i?L:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[L]}`]:L}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&o.map(((n,r)=>{const k=n.items.some((e=>e[m]&&e[m].length||F&&e[F])),E=e.width?(e.width-(o.length-1)*v)/o.length:void 0,w=g.findIndex((e=>e===n));return s.createElement(O,{id:t+"-"+(i+1)+"-"+n.items[0][p],style:{width:E},groupTitleHeight:c,groupSubtitleHeight:u,groupTitleRender:N,groupSubtitleRender:A,key:r,level:i,verticalLine:h||f,title:n.items[0][a||b],subtitle:a,orientation:e.orientation,childLineWidth:k&&n.expanded&&"horizontal"===e.orientation?e.childLineWidths[w]:0,line:k,nodes:n.items,expanded:n.expanded,plus:k},n.items.map(((e,t)=>s.createElement(C,{cardHeight:d,cardWidth:l,itemRender:I,color:R,key:t,level:i,avatar:e[y],avatarType:T,showAvatar:W,title:e[b],subtitle:e[x],verticalLine:0,line:!1,node:e,childLineWidth:0,plus:!1},e.text))))})))})))};W.displayName="KendoServerGroupedOrgChart";const M=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",avatarType:"image",titleField:"title",subtitleField:"subtitle",...e},{cardsColors:i,onExpandChange:r,onKeyDown:a,onItemAction:l,onGroupAction:o,onGroupBlur:d,onGroupFocus:c,id:u,...h}=t,p=s.useRef(n.useId()),m=!n.validatePackage(N,{component:"OrgChart"}),g=n.getLicenseMessage(N);return s.createElement(F,{style:{position:"relative",...e.style},...t},e.groupField?s.createElement(W,{id:u||p.current,...h},e.children):s.createElement(I,{id:u||p.current,...h},e.children),m&&s.createElement(n.WatermarkOverlay,{message:g}))};function K(e,t,i,r,a){if(i){const{ids:l,field:o}=H(i,t);return function(e,t,i,r,a){let l=e;return t.forEach((e=>{l=n.updateItem(l,e,(e=>B(i,e)),r,a)})),l}(e,!n.isArray(i)&&i.idField?n.resolveItemsIds(l,i.idField,e,a):l,o,r,a)}return e}function H(e,t){let i,r;return n.isArray(e)?(i=e,r=t):(i=e.ids||[],r=e.operationField||t),{ids:i,field:r}}function B(e,t){const n=(e||"").split(".");let i=t;for(let e=0;e<n.length;e++){const t=n[e];if(e===n.length-1)i[t]=!0;else{if(void 0===i[t])return;i[t]={...i[t]},i=i[t]}}}function z(e,t,i){if(i&&!n.isArray(i)&&i.applyCheckIndeterminate){const{field:r}=H(i,p),a=i.checkIndeterminateField||m;for(let i=0;i<e.length;i++){const l=e[i],o=l[t];o&&q(o,n.getNestedValue(r,l)?[]:[l],t,r,a)}}}function q(e,t,i,r,a){let l=!1;for(let o=0;o<e.length;o++){const d=e[o];if(n.getNestedValue(r,d)){if(!l)for(let e=0;e<t.length;e++)B(a,t[e]);l=!0,d[i]&&q(d[i],[],i,r,a)}else d[i]&&q(d[i],l?[d]:t.concat([d]),i,r,a)}}M.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onGroupAction:l.func},M.displayName="KendoOrgChart",e.OrgChart=M,e.ServerOrgChart=I,e.ServerOrgChartGroup=O,e.ServerOrgChartNode=C,e.processOrgChartItems=function(e,t){if(!e||!e.length)return[];let n=e;const i=t.cloneField||"cloned",r=t.expandField||"expanded",a=t.selectField||"selected",l=t.checkField||p,o=t.childrenField||"items";return n=K(n,r,t.expand,i,o),n=K(n,a,t.select,i,o),n=K(n,l,t.check,i,o),z(n,o,t.check),n}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@progress/kendo-react-common"),require("@progress/kendo-react-layout"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("prop-types"),require("@progress/kendo-data-query")):"function"==typeof define&&define.amd?define(["exports","react","@progress/kendo-react-common","@progress/kendo-react-layout","@progress/kendo-react-buttons","@progress/kendo-svg-icons","prop-types","@progress/kendo-data-query"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactOrgchart={},e.React,e.KendoReactCommon,e.KendoReactLayout,e.KendoReactButtons,e.KendoSvgIcons,e.PropTypes,e.KendoDataQuery)}(this,function(e,t,n,i,r,a,l,o){"use strict";function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var s=d(t);const c=e=>window.getComputedStyle(e).backgroundColor,u=`\n    <div class="k-var--series-unset"></div>\n    <div class="k-var--series">\n      ${(()=>{let e='\n      <div class="k-var--series-a"></div>\n      <div class="k-var--series-b"></div>\n      <div class="k-var--series-c"></div>\n      <div class="k-var--series-d"></div>\n      <div class="k-var--series-e"></div>\n      <div class="k-var--series-f"></div>\n';for(let t=0;t<30;t++)e+=`\n      <div class="k-var--series-${t+1}"></div>`;return e})()}\n    </div>\n`;let h=class{getSeriesColors(){const e=this.element,t=[].slice.call(e.querySelectorAll(".k-var--series div")),n=c(e.querySelector(".k-var--series-unset"));return t.reduce((e,t)=>{const i=(e=>{const t=e.match(/series-([a-z])$/);if(null!==t)return(e=>e.toLowerCase().charCodeAt(0)-97)(t[1]);const n=e.split("--series-")[1];return parseInt(n,10)-1})(t.className),r=c(t);return r!==n&&(e[i]=r),e},[])}};const p="checked",m=25,g=40,v=s.createContext({cardColors:void 0,onExpandChange:void 0,onKeyDown:void 0,onItemAction:void 0,onItemContextMenu:void 0,onItemDoubleClick:void 0,onGroupAction:void 0,onGroupBlur:void 0,onGroupFocus:void 0}),f=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...e},{navigatable:i,id:r,tabIndex:a,className:l,style:o,data:d,groupField:c,cardWidth:p,cardHeight:m,groupTitleHeight:g,groupSubtitleHeight:f,verticalLine:k,idField:F,childrenField:y,expandField:b,hasChildrenField:x,avatarField:C,titleField:E,subtitleField:w,onExpandChange:I,onItemAction:N,onItemDoubleClick:A,onItemContextMenu:L,onKeyDown:T,onGroupAction:O,onGroupBlur:R,onGroupFocus:D,cardsColors:S,ariaLabel:G,itemRender:W,groupTitleRender:M,groupSubtitleRender:K,height:H,children:B,...z}=t,q=s.useRef(null),j=s.useRef(new n.Navigation({tabIndex:a,root:q,selectors:[t.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[P,$]=s.useState([]),_=s.useRef(null);s.useEffect(()=>{if(i&&j.current.first&&j.current.first.setAttribute("tabindex",String(a)),!S){((e,t)=>{const n=new h,i=n.element=t.createElement("div");let r;i.style.display="none",i.innerHTML=u,t.body.appendChild(i);try{r=n.getSeriesColors()}finally{t.body.removeChild(n.element),delete n.element,e(r)}})(e=>{$(e)},q.current.ownerDocument||document)}},[i,a]);return s.createElement("div",{style:o,ref:q,className:n.classNames(l,"k-orgchart")},s.createElement(v.Provider,{value:{cardColors:S||P,onExpandChange:e.onExpandChange,onKeyDown:n=>{if(t.navigatable){const i=n.event,r=" "===i.key?"Space":i.key,a=e.groupField&&-1!==i.target.className.indexOf("k-orgchart-card")&&_.current||j.current,l=i.target.closest(a.selectors.join(","));switch(r){case"ArrowUp":((e,n,i,r)=>{var a;if(i.preventDefault(),(t.groupField?r.items.some(e=>e[t.expandField]):r.item[t.expandField])&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const t=null==(a=e.closest(".k-orgchart-group"))?void 0:a.getAttribute("id"),i=document.querySelector(`[aria-owns="${t}"]`);i?n.focusElement(i,e):n.focusPrevious(e)}})(l,a,i,n);break;case"ArrowDown":((e,n,i,r)=>{var a;i.preventDefault();const l=t.groupField?r.items.some(e=>e[t.expandField]):r.item[t.expandField],o=t.groupField?r.items.find(e=>e[t.childrenField]):r.item[t.childrenField],d=t.groupField?r.items.some(e=>t.hasChildrenField&&e[t.hasChildrenField]):t.hasChildrenField&&r.item[t.hasChildrenField],s=t.groupField?o&&o[t.childrenField]&&o[t.childrenField].length:o&&o.length;if((d||s)&&!l&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const i=t.groupField?".k-orgchart-node-group-container":".k-orgchart-card",r=e.getAttribute("aria-owns"),l=null==(a=document.getElementById(r))?void 0:a.querySelector(i);l?n.focusElement(l,e):n.focusNext(e)}})(l,a,i,n);break;case"ArrowLeft":((e,t,n)=>{n.preventDefault(),t.focusPrevious(e)})(l,a,i);break;case"ArrowRight":((e,t,n)=>{n.preventDefault(),t.focusNext(e)})(l,a,i);break;case"End":((e,t,n)=>{n.preventDefault(),t.focusElement(t.last,null)})(0,a,i);break;case"Home":((e,t,n)=>{n.preventDefault(),t.focusElement(t.first,null)})(0,a,i);break;case"Enter":((n,i,r,a)=>{r.stopPropagation();const l=-1!==n.className.indexOf("k-orgchart-node-group-container");e.groupField&&l?_.current&&_.current.first&&_.current.focusElement(_.current.first,null):t.onItemAction&&t.onItemAction({event:r,item:a.item})})(l,0,i,n);break;case"Escape":(t=>{if(e.groupField){const e=t.closest(".k-orgchart-node-group-container");e&&j.current.focusElement(e,null)}})(l)}}},onItemAction:e=>{if(e.event.stopPropagation(),N&&N.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-card");t&&j.current.focusElement(t,null)}},onItemDoubleClick:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onItemContextMenu:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onGroupAction:e=>{if(O&&O.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-node-group-container");t&&j.current.focusElement(t,null)}},onGroupBlur:e=>{_.current=null},onGroupFocus:e=>{_.current=new n.Navigation({tabIndex:0,root:e.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})}},...z},e.children))};f.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onItemDoubleClick:l.func,onItemContextMenu:l.func,onGroupAction:l.func},f.displayName="KendoClientOrgChart";const k=e=>{const{expanded:t,node:n,nodes:i}=e,l=s.useContext(v);return s.createElement(r.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?a.minusIcon:a.plusIcon,"aria-label":t?"collapse":"expand",onClick:e=>{l.onExpandChange&&l.onExpandChange.call(void 0,{event:e,expand:!t,item:n,items:i})}})},F=e=>{const{node:t,children:r,style:a,...l}=e,[o,d]=s.useState(!1),c=s.useContext(v);return s.createElement(i.Card,{orientation:null,role:"treeitem",className:n.classNames("k-orgchart-card",{"k-focus":o}),onClick:e=>{c.onItemAction&&c.onItemAction.call(void 0,{event:e,item:t})},onKeyDown:e=>{c.onKeyDown&&c.onKeyDown.call(void 0,{event:e,item:t})},onContextMenu:e=>{c.onItemContextMenu&&c.onItemContextMenu.call(void 0,{event:e,item:t})},onDoubleClick:e=>{c.onItemDoubleClick&&c.onItemDoubleClick.call(void 0,{event:e,item:t})},style:a,"aria-selected":o,"aria-keyshortcuts":"Enter",onFocus:()=>d(!0),onBlur:()=>d(!1),...l},r)},y=e=>{const{level:t,children:n}=e,r=s.useContext(v),a=r.cardColors&&r.cardColors[t]||"green";return s.createElement(i.CardBody,{className:"k-hstack",style:{borderTopColor:a}},n)},b=e=>{const{id:t,title:r,subtitle:a,level:l,childLineWidth:o,cardWidth:d,cardHeight:c,verticalLine:u,color:h,line:p,plus:m,expanded:g,node:v,avatar:f,avatarType:b,itemRender:x,showAvatar:C,...E}={avatarType:"image",...e},w=x;return s.createElement("div",{...E,className:n.classNames(e.className,"k-orgchart-node","k-vstack","k-align-items-center")},0!==l&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:u}}),s.createElement(F,{node:v,style:{width:d,height:c},"aria-level":l+1,"aria-expanded":!!g,"aria-owns":t},s.createElement(y,{level:l},w?s.createElement(w,{item:v,title:r,subtitle:a,level:l,expanded:g,color:h}):s.createElement(s.Fragment,null,C&&s.createElement(i.Avatar,{type:b,themeColor:"secondary"},"image"===b?s.createElement("img",{src:f,alt:"KendoReact Avatar Customer"}):f),s.createElement("div",{className:"k-card-title-wrap k-vstack"},s.createElement(i.CardTitle,{className:"k-text-ellipsis"},r),s.createElement("span",{className:"k-spacer"}),s.createElement(i.CardSubtitle,{className:"k-text-ellipsis"},a)),s.createElement("span",{className:"k-spacer"})))),p&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),m&&s.createElement(k,{expanded:g,node:v}),m&&!!o&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:o,marginTop:-15}}))},x=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach(t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some(e=>e[i]&&e[i].length||l&&e[l]),h=u?"horizontal":"vertical",p=u?null:n;e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),x({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}})},C=(e,t)=>{const n=t||300,i=e.sort((e,t)=>t.level-e.level);i.forEach(e=>{if(!e.width){const t=i.filter(t=>e.ids.includes(t.parentId)),r=t.length?Math.max(...t.map(e=>e.width||0)):n,a="horizontal"===e.orientation?e.items.length:1,l=r*a+m*(a-1);e.width=l}})},E=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:o,verticalLine:d,idField:c,childrenField:u,hasChildrenField:h,expandField:p,avatarField:v,titleField:f,subtitleField:k,ariaLabel:F,itemRender:y,height:E,avatarType:w,showAvatar:I}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",avatarType:"image",showAvatar:!0,...e},N=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];x({dataByGroups:N,data:r,cardWidth:l,expandField:p,hasChildrenField:h,childrenField:u,idField:c,groupField:a}),C(N,l),((e,t,n)=>{const i=e.sort((e,t)=>e.level-t.level);i.forEach(e=>{if(0===e.level)return;const r=i.find(t=>t.ids.includes(e.parentId)),a=(null==r?void 0:r.items.findIndex(t=>e.ids.includes(t[n])))||0,l=(null==r?void 0:r.items)||[],o=r.width?(r.width-(l.length-1)*m)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach((e,n)=>{n<a&&(t+=o+m)}),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.items.length)||1,c=(d-(s-1)*m)/s;e.width=c;const u=null==r?void 0:r.items.map(e=>{const r=e[t]?e[t].length:0,a=i.find(t=>t.ids.includes(e[n])),l=(null==a?void 0:a.width)||0;return"vertical"!==(null==a?void 0:a.orientation)&&0!==r&&e.expanded?l-(l-(r-1)*m)/r:0});r&&(r.childLineWidths=u)})})(N,u,c),((e,t,n)=>{const i=t||80,r=n||g;e.forEach(e=>{const t=e.level,n=(i+r)*t+g*(t?t-1:0)-(r-g)*(t?1:0);e.top=n})})(N,o,d);const A=((e,t,n)=>{const i=t||80,r=n||g;return Math.max(...e.map(e=>{const t=e.top||0,n=e.items.length;return t+("horizontal"===e.orientation?i+r+r:n*(i+r))}))})(N,o,d);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:E||A}},N.map(e=>{const i=e.level,r=e.items,a=e.orientation;return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?F:void 0,"aria-orientation":0===i?a:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[a]}`]:a}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${n.kendoThemeMaps.orientationMap[e.orientation]}`]:e.orientation})},r.map((n,a)=>{const m=n[u]&&n[u].length||h&&n[h],F=m||"vertical"===e.orientation&&a!==r.length-1,x="vertical"===e.orientation&&0!==a?0:d||g,C=e.childLineWidths?Math.max(...e.childLineWidths):void 0,E=n[p];return s.createElement(b,{id:t+"-"+(i+1)+"-"+n[c],style:{width:C},itemRender:y,cardHeight:o,cardWidth:l,verticalLine:x,key:a,level:i,avatar:n[v],avatarType:w,showAvatar:I,title:n[f],subtitle:n[k],line:F,expanded:E,node:n,childLineWidth:m&&E&&"horizontal"===e.orientation?e.childLineWidths[a]:0,plus:m},n.text)})))}))};E.displayName="KendoServerOrgChart";const w=Object.freeze({name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"13.4.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"}),I=e=>{const{nodes:t,children:i,style:r,...a}=e,[l,o]=s.useState(!1),d=s.useContext(v),c=s.useRef(null);return s.createElement("div",{role:"treeitem","aria-selected":l,ref:c,className:n.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":l}),style:r,onKeyDown:e=>{d.onKeyDown&&d.onKeyDown({event:e,items:t})},onClick:e=>{d.onGroupAction&&d.onGroupAction({event:e,items:t})},onFocus:e=>{o(!0),d.onGroupFocus&&d.onGroupFocus({event:e,items:t,containerRef:c})},onBlur:e=>{o(!1),d.onGroupBlur&&d.onGroupBlur({event:e,items:t})},...a},i)},N="k-orgchart-node-group-title",A="k-orgchart-node-group-subtitle",L=e=>{const{id:t,title:i,subtitle:r,line:a,plus:l,focus:o,level:d,verticalLine:c,childLineWidth:u,orientation:h,expanded:p,nodes:m,groupTitleHeight:g,groupSubtitleHeight:v,groupTitleRender:f,groupSubtitleRender:F,...y}={orientation:"horizontal",...e},b=f,x=F,C={height:g||20},E={height:v||20};return s.createElement("div",{...y,className:n.classNames(e.className,"k-orgchart-node-group","k-vstack","k-align-items-center")},0!==d&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:c}}),s.createElement(I,{nodes:m,"aria-expanded":!!p,"aria-keyshortcuts":"Enter","aria-level":d+1,"aria-owns":t},b?s.createElement(b,{style:C,className:N,title:i,items:m,level:d,expanded:p}):s.createElement("div",{className:N,style:C},i),x?s.createElement(x,{style:E,className:A,subtitle:r,items:m,level:d,expanded:p}):s.createElement("div",{className:A,style:E},r),s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container",{[`k-${n.kendoThemeMaps.orientationMap[h]||h}`]:h})},e.children)),a&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),l&&s.createElement(k,{expanded:p,nodes:m}),l&&!!u&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:u,marginTop:-15}}))},T=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach(t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some(e=>e[i]&&e[i].length||l&&e[l]),h=u?"horizontal":"vertical",p=u?null:n+50,m=e.find(e=>e.parentId===s),g=e.find(e=>e.ids.includes(s));let v=!1;if(m){const e=m.ids[0],n=g.items.find(t=>t[r]===e),i=g.items.find(e=>e[r]===t[r]);v=n[o]===i[o]}m&&v?(m.ids.push(t[r]),m.items=m.items.concat(c)):e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),T({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}})},O=(e,t)=>{const n=t||300,i=e.sort((e,t)=>t.level-e.level);i.forEach(e=>{if(!e.width){const t=i.filter(t=>e.ids.includes(t.parentId));if(t.length){const i=Math.max(...t.map(e=>e.width||0)),r=Math.max(...t.map(e=>e.groupedItems.length||0)),a=Math.max(...e.groupedItems.map(t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+m*(i-1)})),l=i*r+m*(r-1);e.width=Math.max(l,a)}else{const t=Math.max(...e.groupedItems.map(t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+m*(i-1)}));e.width=t}}})},R=(e,t,n,i,r)=>{const a=t,l=r||g,o=n+i+82;e.forEach(e=>{const t=e.level,n=(a+l+o)*t+g*(t?t-1:0)-(l-g)*(t?1:0);e.top=n})},D=(e,t,n,i,r)=>{const a=t,l=n,o=i+20+82;return Math.max(...e.map(e=>{const t=e.top||0,n=Math.max(...e.groupedItems.map(e=>e.items.length)),i=e.hasChildren?g:0;return t+("horizontal"===e.orientation?a+l+o+l+i:n*(a+l)+o+l)}))},S=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:d,groupTitleHeight:c,groupSubtitleHeight:u,verticalLine:h,idField:p,childrenField:v,expandField:f,hasChildrenField:k,avatarField:F,titleField:y,subtitleField:x,cardsColors:C,ariaLabel:E,itemRender:w,groupTitleRender:I,groupSubtitleRender:N,height:A,avatarType:S,showAvatar:G}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0,...e},W=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];T({dataByGroups:W,data:r,cardWidth:l,expandField:f,hasChildrenField:k,childrenField:v,idField:p,groupField:a}),W.map(e=>{e.groupedItems=o.groupBy(e.items,[{field:a}])}),O(W,l),((e,t)=>{const n=e.sort((e,t)=>e.level-t.level);n.forEach(e=>{var i;if(0===e.level)return;const r=n.find(t=>t.ids.includes(e.parentId)),a=(null==r?void 0:r.groupedItems.findIndex(n=>n.items.some(n=>e.ids.includes(n[t]))))||0,l=(null==r?void 0:r.groupedItems)||[],o=r.width?(r.width-(l.length-1)*m)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach((e,n)=>{n<a&&(t+=o+m)}),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.groupedItems.length)||1,c=(d-(s-1)*m)/s;if(e.width=c,r){const t=e.width-(e.width-(e.groupedItems.length-1)*m)/e.groupedItems.length;r.childLineWidths?null==(i=r.childLineWidths)||i.push(t):r.childLineWidths=[t]}})})(W,p),R(W,d||80,c||20,u||20,h);const M=D(W,d||80,c||20,u||20);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:A||M}},W.map(e=>{const i=e.level,o=e.groupedItems.map(e=>{const t=e.items.some(e=>e[f]);return{...e,expanded:t}}),A=o.filter(e=>e.expanded),T="horizontal",O=C&&C[i]||"green";return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?E:void 0,"aria-orientation":0===i?T:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[T]}`]:T}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&o.map((n,r)=>{const f=n.items.some(e=>e[v]&&e[v].length||k&&e[k]),C=e.width?(e.width-(o.length-1)*m)/o.length:void 0,E=A.findIndex(e=>e===n);return s.createElement(L,{id:t+"-"+(i+1)+"-"+n.items[0][p],style:{width:C},groupTitleHeight:c,groupSubtitleHeight:u,groupTitleRender:I,groupSubtitleRender:N,key:r,level:i,verticalLine:h||g,title:n.items[0][a||y],subtitle:a,orientation:e.orientation,childLineWidth:f&&n.expanded&&"horizontal"===e.orientation?e.childLineWidths[E]:0,line:f,nodes:n.items,expanded:n.expanded,plus:f},n.items.map((e,t)=>s.createElement(b,{cardHeight:d,cardWidth:l,itemRender:w,color:O,key:t,level:i,avatar:e[F],avatarType:S,showAvatar:G,title:e[y],subtitle:e[x],verticalLine:0,line:!1,node:e,childLineWidth:0,plus:!1},e.text)))}))}))};S.displayName="KendoServerGroupedOrgChart";const G=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",avatarType:"image",titleField:"title",subtitleField:"subtitle",...e},{cardsColors:i,onExpandChange:r,onKeyDown:a,onItemAction:l,onGroupAction:o,onGroupBlur:d,onGroupFocus:c,id:u,...h}=t,p=s.useRef(n.useId()),m=!n.validatePackage(w,{component:"OrgChart"}),g=n.getLicenseMessage(w);return s.createElement(f,{style:{position:"relative",...e.style},...t},e.groupField?s.createElement(S,{id:u||p.current,...h},e.children):s.createElement(E,{id:u||p.current,...h},e.children),m&&s.createElement(n.WatermarkOverlay,{message:g}))};function W(e,t,i,r,a){if(i){const{ids:l,field:o}=M(i,t);return function(e,t,i,r,a){let l=e;return t.forEach(e=>{l=n.updateItem(l,e,e=>K(i,e),r,a)}),l}(e,!n.isArray(i)&&i.idField?n.resolveItemsIds(l,i.idField,e,a):l,o,r,a)}return e}function M(e,t){let i,r;return n.isArray(e)?(i=e,r=t):(i=e.ids||[],r=e.operationField||t),{ids:i,field:r}}function K(e,t){const n=(e||"").split(".");let i=t;for(let e=0;e<n.length;e++){const t=n[e];if(e===n.length-1)i[t]=!0;else{if(void 0===i[t])return;i[t]={...i[t]},i=i[t]}}}function H(e,t,i){if(i&&!n.isArray(i)&&i.applyCheckIndeterminate){const{field:r}=M(i,p),a=i.checkIndeterminateField||"checkIndeterminate";for(let i=0;i<e.length;i++){const l=e[i],o=l[t];o&&B(o,n.getNestedValue(r,l)?[]:[l],t,r,a)}}}function B(e,t,i,r,a){let l=!1;for(let o=0;o<e.length;o++){const d=e[o];if(n.getNestedValue(r,d)){if(!l)for(let e=0;e<t.length;e++)K(a,t[e]);l=!0,d[i]&&B(d[i],[],i,r,a)}else d[i]&&B(d[i],l?[d]:t.concat([d]),i,r,a)}}G.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onGroupAction:l.func},G.displayName="KendoOrgChart",e.OrgChart=G,e.ServerOrgChart=E,e.ServerOrgChartGroup=L,e.ServerOrgChartNode=b,e.processOrgChartItems=function(e,t){if(!e||!e.length)return[];let n=e;const i=t.cloneField||"cloned",r=t.expandField||"expanded",a=t.selectField||"selected",l=t.checkField||p,o=t.childrenField||"items";return n=W(n,r,t.expand,i,o),n=W(n,a,t.select,i,o),n=W(n,l,t.check,i,o),H(n,o,t.check),n}});