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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-orgchart",
-  "version": "13.3.0",
+  "version": "13.4.0-develop.2",
   "description": "React OrgChart renders a message to the user with information about the status of an app process. KendoReact OrgChart package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -27,9 +27,9 @@
   "peerDependencies": {
     "@progress/kendo-data-query": "^1.7.2",
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-react-buttons": "13.3.0",
-    "@progress/kendo-react-common": "13.3.0",
-    "@progress/kendo-react-layout": "13.3.0",
+    "@progress/kendo-react-buttons": "13.4.0-develop.2",
+    "@progress/kendo-react-common": "13.4.0-develop.2",
+    "@progress/kendo-react-layout": "13.4.0-develop.2",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
@@ -55,7 +55,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1768550525,
+      "publishDate": 1770288294,
       "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"
     }
   },

package/processOrgChartItems.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { OrgChartOperationDescriptors } from './OrgChartOperationDescriptors.js';
+/**
+ * A helper function which applies the specified operation descriptors to the data.
+ * * [Expanding and collapsing items](https://www.telerik.com/kendo-react-ui/components/treeview/expansion/update-expanded-items#toc-using-a-helper-function)
+ * * [Selecting and deselecting items](https://www.telerik.com/kendo-react-ui/components/treeview/selection/update-selected-items#toc-using-a-helper-function)
+ * * [Checking and unchecking items](https://www.telerik.com/kendo-react-ui/components/treeview/checkboxes/helper-functions)
+ *
+ * @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[];

package/processOrgChartItems.mjs

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { isArray as I, resolveItemsIds as g, updateItem as C, getNestedValue as E } from "@progress/kendo-react-common";
+import { isArray as I, resolveItemsIds as g, getNestedValue as E, updateItem as C } from "@progress/kendo-react-common";
 import { EXPAND_FIELD as D, SELECT_FIELD as L, CHECK_FIELD as o, CHILDREN_FIELD as h, CHECK_INDETERMINATE_FIELD as N } from "./utils/consts.mjs";
 function a(n, t) {
   if (!n || !n.length)

package/server/ServerGroupedOrgChart.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @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';
+/**
+ * @hidden
+ */
+export declare const ServerGroupedOrgChart: {
+    (props: OrgChartProps): React.JSX.Element;
+    displayName: string;
+};

package/server/ServerGroupedOrgChart.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),S=require("@progress/kendo-react-common"),$=require("./ServerOrgChartNode.js"),F=require("./ServerOrgChartGroup.js"),K=require("@progress/kendo-data-query"),n=require("../utils/consts.js");function Q(o){const I=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const a in o)if(a!=="default"){const e=Object.getOwnPropertyDescriptor(o,a);Object.defineProperty(I,a,e.get?e:{enumerable:!0,get:()=>o[a]})}}return I.default=o,Object.freeze(I)}const b=Q(B),W=({dataByGroups:o,data:I=[],cardWidth:a,childrenField:e,idField:t,expandField:r,hasChildrenField:i,groupField:h,level:d=1,parentId:l=0})=>{I.forEach(s=>{const c=s[e];if(s[r]&&c&&c.length){const O=c.some(T=>T[e]&&T[e].length||i&&T[i]),f=O?"horizontal":"vertical",v=O?null:a+2*n.HORIZONTAL_GAP,E=o.find(T=>T.parentId===l),R=o.find(T=>T.ids.includes(l));let _=!1;if(E){const T=E.ids[0],x=R.items.find(G=>G[t]===T),N=R.items.find(G=>G[t]===s[t]);_=x[h]===N[h]}E&&_?(E.ids.push(s[t]),E.items=E.items.concat(c)):o.push({ids:[s[t]],items:c,level:d,parentId:l,hasChildren:O,orientation:f,width:v}),W({dataByGroups:o,data:s[e],childrenField:e,cardWidth:a,idField:t,expandField:r,hasChildrenField:i,groupField:h,level:d+1,parentId:s[t]})}})},J=(o,I)=>{const a=I||n.NODE_WIDTH,e=o.sort((t,r)=>r.level-t.level);e.forEach(t=>{if(!t.width){const r=e.filter(i=>t.ids.includes(i.parentId));if(r.length){const i=Math.max(...r.map(s=>s.width||0)),h=Math.max(...r.map(s=>s.groupedItems.length||0)),d=Math.max(...t.groupedItems.map(s=>{const c=t.orientation==="horizontal"?s.items.length:1;return c*(a+2*n.HORIZONTAL_GAP)+n.HORIZONTAL_GAP*(c-1)})),l=i*h+n.HORIZONTAL_GAP*(h-1);t.width=Math.max(l,d)}else{const i=Math.max(...t.groupedItems.map(h=>{const d=t.orientation==="horizontal"?h.items.length:1;return d*(a+2*n.HORIZONTAL_GAP)+n.HORIZONTAL_GAP*(d-1)}));t.width=i}}})},X=(o,I)=>{const a=o.sort((e,t)=>e.level-t.level);a.forEach(e=>{var c;if(e.level===0)return;const t=a.find(m=>m.ids.includes(e.parentId)),r=(t==null?void 0:t.groupedItems.findIndex(m=>m.items.some(O=>e.ids.includes(O[I]))))||0,i=(t==null?void 0:t.groupedItems)||[],h=t.width?(t.width-(i.length-1)*n.HORIZONTAL_GAP)/i.length:0;if(!e.left){let m=(t==null?void 0:t.left)||0;i.forEach((O,f)=>{f<r&&(m+=h+n.HORIZONTAL_GAP)}),e.left=m}const d=(t==null?void 0:t.width)||0,l=(t==null?void 0:t.groupedItems.length)||1,s=(d-(l-1)*n.HORIZONTAL_GAP)/l;if(e.width=s,t){const m=e.width-(e.width-(e.groupedItems.length-1)*n.HORIZONTAL_GAP)/e.groupedItems.length;t.childLineWidths?(c=t.childLineWidths)==null||c.push(m):t.childLineWidths=[m]}})},Y=(o,I,a,e,t)=>{const r=I||n.NODE_HEIGHT,i=t||n.VERTICAL_LINE,h=a+e+n.GROUP_PADDINGS;o.forEach(d=>{const l=d.level,s=(r+i+h)*l+n.VERTICAL_LINE*(l?l-1:0)-(i-n.VERTICAL_LINE)*(l?1:0);d.top=s})},tt=(o,I,a,e,t)=>{const r=I||n.NODE_HEIGHT,i=a||n.VERTICAL_LINE,d=(e||n.GROUP_TITLE_HEIGHT)+n.GROUP_SUBTITLE_HEIGHT+n.GROUP_PADDINGS;return Math.max(...o.map(s=>{const c=s.top||0,m=Math.max(...s.groupedItems.map(v=>v.items.length)),O=s.hasChildren?n.VERTICAL_LINE:0,f=s.orientation==="horizontal"?r+i+d+i+O:m*(r+i)+d+i;return c+f}))},y=o=>{const I={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0},{id:a,width:e,data:t,groupField:r,cardWidth:i,cardHeight:h,groupTitleHeight:d,groupSubtitleHeight:l,verticalLine:s,idField:c,childrenField:m,expandField:O,hasChildrenField:f,avatarField:v,titleField:E,subtitleField:R,cardsColors:_,ariaLabel:T,itemRender:x,groupTitleRender:N,groupSubtitleRender:G,height:D,avatarType:k,showAvatar:M}={...I,...o},p=[{items:t,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];W({dataByGroups:p,data:t,cardWidth:i,expandField:O,hasChildrenField:f,childrenField:m,idField:c,groupField:r}),p.map(u=>{u.groupedItems=K.groupBy(u.items,[{field:r}])}),J(p,i),X(p,c),Y(p,h||n.NODE_HEIGHT,d||n.GROUP_TITLE_HEIGHT,l||n.GROUP_SUBTITLE_HEIGHT,s);const U=tt(p,h||n.NODE_HEIGHT,d||n.GROUP_TITLE_HEIGHT,l||n.GROUP_SUBTITLE_HEIGHT);return b.createElement("div",{className:"k-orgchart-container",style:{width:e,height:D||U}},p.map(u=>{const H=u.level,w=u.groupedItems.map(L=>{const C=L.items.some(A=>A[O]);return{...L,expanded:C}}),Z=w.filter(L=>L.expanded),P="horizontal",z=_&&_[H]||"green";return b.createElement("div",{role:H===0?"tree":"group",id:a+"-"+H+"-"+u.ids[0],"aria-label":H===0?T:void 0,"aria-orientation":H===0?P:void 0,key:u.ids[0]+"_"+H,className:S.classNames("k-orgchart-group",`k-orgchart-level-${H}`,"k-pos-absolute",{[`k-${S.kendoThemeMaps.orientationMap[P]}`]:P}),style:{width:u.width||"100%",left:u.left,top:u.top}},t.length>0&&w.map((L,C)=>{const A=L.items.some(g=>g[m]&&g[m].length||f&&g[f]),q=u.width?(u.width-(w.length-1)*n.HORIZONTAL_GAP)/w.length:void 0,V=Z.findIndex(g=>g===L);return b.createElement(F.ServerOrgChartGroup,{id:a+"-"+(H+1)+"-"+L.items[0][c],style:{width:q},groupTitleHeight:d,groupSubtitleHeight:l,groupTitleRender:N,groupSubtitleRender:G,key:C,level:H,verticalLine:s||n.VERTICAL_LINE,title:L.items[0][r||E],subtitle:r,orientation:u.orientation,childLineWidth:A&&L.expanded&&u.orientation==="horizontal"?u.childLineWidths[V]:0,line:A,nodes:L.items,expanded:L.expanded,plus:A},L.items.map((g,j)=>b.createElement($.ServerOrgChartNode,{cardHeight:h,cardWidth:i,itemRender:x,color:z,key:j,level:H,avatar:g[v],avatarType:k,showAvatar:M,title:g[E],subtitle:g[R],verticalLine:0,line:!1,node:g,childLineWidth:0,plus:!1},g.text)))}))}))};y.displayName="KendoServerGroupedOrgChart";exports.ServerGroupedOrgChart=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),C=require("@progress/kendo-react-common"),$=require("./ServerOrgChartNode.js"),F=require("./ServerOrgChartGroup.js"),K=require("@progress/kendo-data-query"),n=require("../utils/consts.js");function Q(o){const I=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const a in o)if(a!=="default"){const e=Object.getOwnPropertyDescriptor(o,a);Object.defineProperty(I,a,e.get?e:{enumerable:!0,get:()=>o[a]})}}return I.default=o,Object.freeze(I)}const b=Q(B),W=({dataByGroups:o,data:I=[],cardWidth:a,childrenField:e,idField:t,expandField:r,hasChildrenField:i,groupField:h,level:d=1,parentId:l=0})=>{I.forEach(s=>{const c=s[e];if(s[r]&&c&&c.length){const g=c.some(O=>O[e]&&O[e].length||i&&O[i]),H=g?"horizontal":"vertical",_=g?null:a+2*n.HORIZONTAL_GAP,p=o.find(O=>O.parentId===l),R=o.find(O=>O.ids.includes(l));let E=!1;if(p){const O=p.ids[0],x=R.items.find(G=>G[t]===O),P=R.items.find(G=>G[t]===s[t]);E=x[h]===P[h]}p&&E?(p.ids.push(s[t]),p.items=p.items.concat(c)):o.push({ids:[s[t]],items:c,level:d,parentId:l,hasChildren:g,orientation:H,width:_}),W({dataByGroups:o,data:s[e],childrenField:e,cardWidth:a,idField:t,expandField:r,hasChildrenField:i,groupField:h,level:d+1,parentId:s[t]})}})},J=(o,I)=>{const a=I||n.NODE_WIDTH,e=o.sort((t,r)=>r.level-t.level);e.forEach(t=>{if(!t.width){const r=e.filter(i=>t.ids.includes(i.parentId));if(r.length){const i=Math.max(...r.map(s=>s.width||0)),h=Math.max(...r.map(s=>s.groupedItems.length||0)),d=Math.max(...t.groupedItems.map(s=>{const c=t.orientation==="horizontal"?s.items.length:1;return c*(a+2*n.HORIZONTAL_GAP)+n.HORIZONTAL_GAP*(c-1)})),l=i*h+n.HORIZONTAL_GAP*(h-1);t.width=Math.max(l,d)}else{const i=Math.max(...t.groupedItems.map(h=>{const d=t.orientation==="horizontal"?h.items.length:1;return d*(a+2*n.HORIZONTAL_GAP)+n.HORIZONTAL_GAP*(d-1)}));t.width=i}}})},X=(o,I)=>{const a=o.sort((e,t)=>e.level-t.level);a.forEach(e=>{var c;if(e.level===0)return;const t=a.find(m=>m.ids.includes(e.parentId)),r=(t==null?void 0:t.groupedItems.findIndex(m=>m.items.some(g=>e.ids.includes(g[I]))))||0,i=(t==null?void 0:t.groupedItems)||[],h=t.width?(t.width-(i.length-1)*n.HORIZONTAL_GAP)/i.length:0;if(!e.left){let m=(t==null?void 0:t.left)||0;i.forEach((g,H)=>{H<r&&(m+=h+n.HORIZONTAL_GAP)}),e.left=m}const d=(t==null?void 0:t.width)||0,l=(t==null?void 0:t.groupedItems.length)||1,s=(d-(l-1)*n.HORIZONTAL_GAP)/l;if(e.width=s,t){const m=e.width-(e.width-(e.groupedItems.length-1)*n.HORIZONTAL_GAP)/e.groupedItems.length;t.childLineWidths?(c=t.childLineWidths)==null||c.push(m):t.childLineWidths=[m]}})},Y=(o,I,a,e,t)=>{const r=I,i=t||n.VERTICAL_LINE,h=a+e+n.GROUP_PADDINGS;o.forEach(d=>{const l=d.level,s=(r+i+h)*l+n.VERTICAL_LINE*(l?l-1:0)-(i-n.VERTICAL_LINE)*(l?1:0);d.top=s})},tt=(o,I,a,e,t)=>{const r=I,i=a,d=e+n.GROUP_SUBTITLE_HEIGHT+n.GROUP_PADDINGS;return Math.max(...o.map(s=>{const c=s.top||0,m=Math.max(...s.groupedItems.map(_=>_.items.length)),g=s.hasChildren?n.VERTICAL_LINE:0,H=s.orientation==="horizontal"?r+i+d+i+g:m*(r+i)+d+i;return c+H}))},y=o=>{const I={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0},{id:a,width:e,data:t,groupField:r,cardWidth:i,cardHeight:h,groupTitleHeight:d,groupSubtitleHeight:l,verticalLine:s,idField:c,childrenField:m,expandField:g,hasChildrenField:H,avatarField:_,titleField:p,subtitleField:R,cardsColors:E,ariaLabel:O,itemRender:x,groupTitleRender:P,groupSubtitleRender:G,height:k,avatarType:D,showAvatar:M}={...I,...o},v=[{items:t,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];W({dataByGroups:v,data:t,cardWidth:i,expandField:g,hasChildrenField:H,childrenField:m,idField:c,groupField:r}),v.map(u=>{u.groupedItems=K.groupBy(u.items,[{field:r}])}),J(v,i),X(v,c),Y(v,h||n.NODE_HEIGHT,d||n.GROUP_TITLE_HEIGHT,l||n.GROUP_SUBTITLE_HEIGHT,s);const Z=tt(v,h||n.NODE_HEIGHT,d||n.GROUP_TITLE_HEIGHT,l||n.GROUP_SUBTITLE_HEIGHT);return b.createElement("div",{className:"k-orgchart-container",style:{width:e,height:k||Z}},v.map(u=>{const T=u.level,w=u.groupedItems.map(L=>{const S=L.items.some(A=>A[g]);return{...L,expanded:S}}),U=w.filter(L=>L.expanded),N="horizontal",z=E&&E[T]||"green";return b.createElement("div",{role:T===0?"tree":"group",id:a+"-"+T+"-"+u.ids[0],"aria-label":T===0?O:void 0,"aria-orientation":T===0?N:void 0,key:u.ids[0]+"_"+T,className:C.classNames("k-orgchart-group",`k-orgchart-level-${T}`,"k-pos-absolute",{[`k-${C.kendoThemeMaps.orientationMap[N]}`]:N}),style:{width:u.width||"100%",left:u.left,top:u.top}},t.length>0&&w.map((L,S)=>{const A=L.items.some(f=>f[m]&&f[m].length||H&&f[H]),q=u.width?(u.width-(w.length-1)*n.HORIZONTAL_GAP)/w.length:void 0,j=U.findIndex(f=>f===L);return b.createElement(F.ServerOrgChartGroup,{id:a+"-"+(T+1)+"-"+L.items[0][c],style:{width:q},groupTitleHeight:d,groupSubtitleHeight:l,groupTitleRender:P,groupSubtitleRender:G,key:S,level:T,verticalLine:s||n.VERTICAL_LINE,title:L.items[0][r||p],subtitle:r,orientation:u.orientation,childLineWidth:A&&L.expanded&&u.orientation==="horizontal"?u.childLineWidths[j]:0,line:A,nodes:L.items,expanded:L.expanded,plus:A},L.items.map((f,V)=>b.createElement($.ServerOrgChartNode,{cardHeight:h,cardWidth:i,itemRender:x,color:z,key:V,level:T,avatar:f[_],avatarType:D,showAvatar:M,title:f[p],subtitle:f[R],verticalLine:0,line:!1,node:f,childLineWidth:0,plus:!1},f.text)))}))}))};y.displayName="KendoServerGroupedOrgChart";exports.ServerGroupedOrgChart=y;

package/server/ServerGroupedOrgChart.mjs

@@ -10,7 +10,7 @@ import { classNames as q, kendoThemeMaps as J } from "@progress/kendo-react-comm
 import { ServerOrgChartNode as Q } from "./ServerOrgChartNode.mjs";
 import { ServerOrgChartGroup as X } from "./ServerOrgChartGroup.mjs";
 import { groupBy as Y } from "@progress/kendo-data-query";
-import { HORIZONTAL_GAP as v, VERTICAL_LINE as b, NODE_WIDTH as tt, NODE_HEIGHT as S, GROUP_PADDINGS as D, GROUP_TITLE_HEIGHT as z, GROUP_SUBTITLE_HEIGHT as A } from "../utils/consts.mjs";
+import { HORIZONTAL_GAP as v, VERTICAL_LINE as G, NODE_WIDTH as tt, GROUP_PADDINGS as D, GROUP_SUBTITLE_HEIGHT as M, GROUP_TITLE_HEIGHT as z, NODE_HEIGHT as A } from "../utils/consts.mjs";
 const P = ({
   dataByGroups: m,
   data: u = [],
@@ -28,20 +28,20 @@ const P = ({
     if (n[s] && h && h.length) {
       const I = h.some(
         (g) => g[e] && g[e].length || i && g[i]
-      ), x = I ? "horizontal" : "vertical", E = I ? null : r + 2 * v, L = m.find((g) => g.parentId === a), C = m.find((g) => g.ids.includes(a));
-      let T = !1;
+      ), x = I ? "horizontal" : "vertical", b = I ? null : r + 2 * v, L = m.find((g) => g.parentId === a), C = m.find((g) => g.ids.includes(a));
+      let E = !1;
       if (L) {
-        const g = L.ids[0], k = C.items.find((W) => W[t] === g), _ = C.items.find((W) => W[t] === n[t]);
-        T = k[d] === _[d];
+        const g = L.ids[0], S = C.items.find((T) => T[t] === g), k = C.items.find((T) => T[t] === n[t]);
+        E = S[d] === k[d];
       }
-      L && T ? (L.ids.push(n[t]), L.items = L.items.concat(h)) : m.push({
+      L && E ? (L.ids.push(n[t]), L.items = L.items.concat(h)) : m.push({
         ids: [n[t]],
         items: h,
         level: o,
         parentId: a,
         hasChildren: I,
         orientation: x,
-        width: E
+        width: b
       }), P({
         dataByGroups: m,
         data: n[e],
@@ -108,16 +108,16 @@ const P = ({
     }
   });
 }, nt = (m, u, r, e, t) => {
-  const s = u || S, i = t || b, d = r + e + D;
+  const s = u, i = t || G, d = r + e + D;
   m.forEach((o) => {
-    const a = o.level, n = (s + i + d) * a + b * (a ? a - 1 : 0) - (i - b) * (a ? 1 : 0);
+    const a = o.level, n = (s + i + d) * a + G * (a ? a - 1 : 0) - (i - G) * (a ? 1 : 0);
     o.top = n;
   });
 }, st = (m, u, r, e, t) => {
-  const s = u || S, i = r || b, o = (e || z) + A + D;
+  const s = u, i = r, o = e + M + D;
   return Math.max(
     ...m.map((n) => {
-      const h = n.top || 0, l = Math.max(...n.groupedItems.map((E) => E.items.length)), I = n.hasChildren ? b : 0, x = n.orientation === "horizontal" ? s + i + o + i + I : l * (s + i) + o + i;
+      const h = n.top || 0, l = Math.max(...n.groupedItems.map((b) => b.items.length)), I = n.hasChildren ? G : 0, x = n.orientation === "horizontal" ? s + i + o + i + I : l * (s + i) + o + i;
       return h + x;
     })
   );
@@ -148,14 +148,14 @@ const P = ({
     childrenField: l,
     expandField: I,
     hasChildrenField: x,
-    avatarField: E,
+    avatarField: b,
     titleField: L,
     subtitleField: C,
-    cardsColors: T,
+    cardsColors: E,
     ariaLabel: g,
-    itemRender: k,
-    groupTitleRender: _,
-    groupSubtitleRender: W,
+    itemRender: S,
+    groupTitleRender: k,
+    groupSubtitleRender: T,
     height: N,
     avatarType: U,
     showAvatar: B
@@ -183,35 +183,35 @@ const P = ({
     c.groupedItems = Y(c.items, [{ field: s }]);
   }), et(H, i), it(H, h), nt(
     H,
-    d || S,
+    d || A,
     o || z,
-    a || A,
+    a || M,
     n
   );
   const $ = st(
     H,
-    d || S,
+    d || A,
     o || z,
-    a || A
+    a || M
   );
   return /* @__PURE__ */ R.createElement("div", { className: "k-orgchart-container", style: { width: e, height: N || $ } }, H.map((c) => {
     const w = c.level, O = c.groupedItems.map((f) => {
-      const M = f.items.some((G) => G[I]);
+      const y = f.items.some((W) => W[I]);
       return {
         ...f,
-        expanded: M
+        expanded: y
       };
-    }), F = O.filter((f) => f.expanded), y = "horizontal", K = T && T[w] || "green";
+    }), F = O.filter((f) => f.expanded), _ = "horizontal", K = E && E[w] || "green";
     return /* @__PURE__ */ R.createElement(
       "div",
       {
         role: w === 0 ? "tree" : "group",
         id: r + "-" + w + "-" + c.ids[0],
         "aria-label": w === 0 ? g : void 0,
-        "aria-orientation": w === 0 ? y : void 0,
+        "aria-orientation": w === 0 ? _ : void 0,
         key: c.ids[0] + "_" + w,
         className: q("k-orgchart-group", `k-orgchart-level-${w}`, "k-pos-absolute", {
-          [`k-${J.orientationMap[y]}`]: y
+          [`k-${J.orientationMap[_]}`]: _
         }),
         style: {
           width: c.width || "100%",
@@ -219,8 +219,8 @@ const P = ({
           top: c.top
         }
       },
-      t.length > 0 && O.map((f, M) => {
-        const G = f.items.some(
+      t.length > 0 && O.map((f, y) => {
+        const W = f.items.some(
           (p) => p[l] && p[l].length || x && p[x]
         ), V = c.width ? (c.width - (O.length - 1) * v) / O.length : void 0, Z = F.findIndex((p) => p === f);
         return /* @__PURE__ */ R.createElement(
@@ -230,30 +230,30 @@ const P = ({
             style: { width: V },
             groupTitleHeight: o,
             groupSubtitleHeight: a,
-            groupTitleRender: _,
-            groupSubtitleRender: W,
-            key: M,
+            groupTitleRender: k,
+            groupSubtitleRender: T,
+            key: y,
             level: w,
-            verticalLine: n || b,
+            verticalLine: n || G,
             title: f.items[0][s || L],
             subtitle: s,
             orientation: c.orientation,
-            childLineWidth: G && f.expanded && c.orientation === "horizontal" ? c.childLineWidths[Z] : 0,
-            line: G,
+            childLineWidth: W && f.expanded && c.orientation === "horizontal" ? c.childLineWidths[Z] : 0,
+            line: W,
             nodes: f.items,
             expanded: f.expanded,
-            plus: G
+            plus: W
           },
           f.items.map((p, j) => /* @__PURE__ */ R.createElement(
             Q,
             {
               cardHeight: d,
               cardWidth: i,
-              itemRender: k,
+              itemRender: S,
               color: K,
               key: j,
               level: w,
-              avatar: p[E],
+              avatar: p[b],
               avatarType: U,
               showAvatar: B,
               title: p[L],

package/server/ServerOrgChart.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @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';
+/**
+ * @hidden
+ */
+export declare const ServerOrgChart: {
+    (props: OrgChartProps): React.JSX.Element;
+    displayName: string;
+};

package/server/ServerOrgChartGroup.d.ts

@@ -0,0 +1,103 @@
+/**
+ * @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 OrgChartGroupTitleProps {
+    /**
+     * The styles that are applied to the OrgChart group title.
+     */
+    style?: React.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;
+}
+/**
+ * @hidden
+ */
+export interface OrgChartGroupSubtitleProps {
+    /**
+     * The styles that are applied to the OrgChart.
+     */
+    style?: React.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 interface ServerOrgChartGroupProps {
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional classes to the OrgChart.
+     */
+    className?: string;
+    id?: string;
+    /**
+     * The styles that are applied to the OrgChart.
+     */
+    style?: React.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.ComponentType<OrgChartGroupTitleProps>;
+    groupSubtitleRender?: React.ComponentType<OrgChartGroupSubtitleProps>;
+}
+/**
+ * @hidden
+ */
+export declare const ServerOrgChartGroup: React.FunctionComponent<ServerOrgChartGroupProps>;

package/server/ServerOrgChartNode.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
+ *-------------------------------------------------------------------------------------------
+ */
+import { OrgChartActionEvent, OrgChartExpandChangeEvent } from '../index.js';
+import * as React from 'react';
+/**
+ * The props that are passed to the itemRender component.
+ */
+export 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;
+}
+/**
+ * @hidden
+ */
+export interface ServerOrgChartNodeProps {
+    /**
+     * @hidden
+     */
+    children?: React.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.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.ComponentType<OrgChartItemRenderProps>;
+    onExpandChange?: (ev: OrgChartExpandChangeEvent) => void;
+    onItemAction?: (ev: OrgChartActionEvent) => void;
+    onItemKeyDown?: (ev: OrgChartActionEvent) => void;
+    node?: any;
+}
+/**
+ * @hidden
+ */
+export declare const ServerOrgChartNode: React.FunctionComponent<ServerOrgChartNodeProps>;

package/theming/theme-service.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+declare const loadTheme: (done: any, doc: Document) => void;
+export { loadTheme };

package/utils/consts.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const EXPAND_FIELD = "expanded";
+/**
+ * @hidden
+ */
+export declare const TEXT_FIELD = "text";
+/**
+ * @hidden
+ */
+export declare const DISABLED_FIELD = "disabled";
+/**
+ * @hidden
+ */
+export declare const CHILDREN_FIELD = "items";
+/**
+ * @hidden
+ */
+export declare const HAS_CHILDREN_FIELD = "hasChildren";
+/**
+ * @hidden
+ */
+export declare const SELECT_FIELD = "selected";
+/**
+ * @hidden
+ */
+export declare const CHECK_FIELD = "checked";
+/**
+ * @hidden
+ */
+export declare const CHECK_INDETERMINATE_FIELD = "checkIndeterminate";
+/**
+ * @hidden
+ */
+export declare const DOM_KENDO_ITEM_ID_FIELD = "_kendoItemId";
+/**
+ * @hidden
+ */
+export declare const DOM_KENDO_TREEVIEW_GUID_FIELD = "_kendoOrgChartGuid";
+/**
+ * @hidden
+ */
+export declare const ORGCHART_CLASSNAME = "k-orgchart";
+/**
+ * @hidden
+ */
+export declare const NODE_HEIGHT = 80;
+/**
+ * @hidden
+ */
+export declare const NODE_WIDTH = 300;
+/**
+ * @hidden
+ */
+export declare const HORIZONTAL_GAP = 25;
+/**
+ * @hidden
+ */
+export declare const VERTICAL_LINE = 40;
+/**
+ * @hidden
+ */
+export declare const GROUP_TITLE_HEIGHT = 20;
+/**
+ * @hidden
+ */
+export declare const GROUP_SUBTITLE_HEIGHT = 20;
+/**
+ * @hidden
+ */
+export declare const GROUP_PADDINGS = 82;