@progress/kendo-react-orgchart 7.2.4-develop.3 → 7.2.4-develop.4

package/package-metadata.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",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"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+const e = {
+  name: "@progress/kendo-react-orgchart",
+  productName: "KendoReact",
+  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
+  publishDate: 1709714553,
+  version: "",
+  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"
+};
+export {
+  e as packageMetadata
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-orgchart",
-  "version": "7.2.4-develop.3",
+  "version": "7.2.4-develop.4",
   "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",
@@ -24,9 +24,9 @@
   "peerDependencies": {
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-buttons": "7.2.4-develop.3",
-    "@progress/kendo-react-common": "7.2.4-develop.3",
-    "@progress/kendo-react-layout": "7.2.4-develop.3",
+    "@progress/kendo-react-buttons": "7.2.4-develop.4",
+    "@progress/kendo-react-common": "7.2.4-develop.4",
+    "@progress/kendo-react-layout": "7.2.4-develop.4",
     "@progress/kendo-svg-icons": "^2.1.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"

package/processOrgChartItems.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("@progress/kendo-react-common"),d=require("./utils/consts.js");function C(n,t){if(!n||!n.length)return[];let e=n;const l=t.cloneField||"cloned",i=t.expandField||d.EXPAND_FIELD,s=t.selectField||d.SELECT_FIELD,r=t.checkField||d.CHECK_FIELD,c=t.childrenField||d.CHILDREN_FIELD;return e=o(e,i,t.expand,l,c),e=o(e,s,t.select,l,c),e=o(e,r,t.check,l,c),a(e,c,t.check),e}function o(n,t,e,l,i){if(e){const{ids:s,field:r}=E(e,t),c=!f.isArray(e)&&e.idField?f.resolveItemsIds(s,e.idField,n,i):s;return F(n,c,r,l,i)}else return n}function E(n,t){let e,l;return f.isArray(n)?(e=n,l=t):(e=n.ids||[],l=n.operationField||t),{ids:e,field:l}}function F(n,t,e,l,i){let s=n;return t.forEach(r=>{s=f.updateItem(s,r,c=>g(e,c),l,i)}),s}function g(n,t){const e=(n||"").split(".");let l=t;for(let i=0;i<e.length;i++){const s=e[i];if(i===e.length-1)l[s]=!0;else if(l[s]!==void 0)l[s]={...l[s]},l=l[s];else return}}function a(n,t,e){if(e&&!f.isArray(e)&&e.applyCheckIndeterminate){const{field:l}=E(e,d.CHECK_FIELD),i=e.checkIndeterminateField||d.CHECK_INDETERMINATE_FIELD;for(let s=0;s<n.length;s++){const r=n[s],c=r[t];c&&I(c,f.getNestedValue(l,r)?[]:[r],t,l,i)}}}function I(n,t,e,l,i){let s=!1;for(let r=0;r<n.length;r++){const c=n[r];if(f.getNestedValue(l,c)){if(!s)for(let u=0;u<t.length;u++)g(i,t[u]);s=!0,c[e]&&I(c[e],[],e,l,i)}else c[e]&&I(c[e],s?[c]:t.concat([c]),e,l,i)}}exports.processOrgChartItems=C;

package/processOrgChartItems.mjs

@@ -0,0 +1,84 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import { isArray as I, resolveItemsIds as g, updateItem as C, getNestedValue as E } 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)
+    return [];
+  let e = n;
+  const l = t.cloneField || "cloned", f = t.expandField || D, s = t.selectField || L, c = t.checkField || o, i = t.childrenField || h;
+  return e = d(e, f, t.expand, l, i), e = d(e, s, t.select, l, i), e = d(e, c, t.check, l, i), p(e, i, t.check), e;
+}
+function d(n, t, e, l, f) {
+  if (e) {
+    const { ids: s, field: c } = m(e, t), i = !I(e) && e.idField ? g(s, e.idField, n, f) : s;
+    return _(n, i, c, l, f);
+  } else
+    return n;
+}
+function m(n, t) {
+  let e, l;
+  return I(n) ? (e = n, l = t) : (e = n.ids || [], l = n.operationField || t), { ids: e, field: l };
+}
+function _(n, t, e, l, f) {
+  let s = n;
+  return t.forEach((c) => {
+    s = C(s, c, (i) => F(e, i), l, f);
+  }), s;
+}
+function F(n, t) {
+  const e = (n || "").split(".");
+  let l = t;
+  for (let f = 0; f < e.length; f++) {
+    const s = e[f];
+    if (f === e.length - 1)
+      l[s] = !0;
+    else if (l[s] !== void 0)
+      l[s] = { ...l[s] }, l = l[s];
+    else
+      return;
+  }
+}
+function p(n, t, e) {
+  if (e && !I(e) && e.applyCheckIndeterminate) {
+    const { field: l } = m(e, o), f = e.checkIndeterminateField || N;
+    for (let s = 0; s < n.length; s++) {
+      const c = n[s], i = c[t];
+      i && u(
+        i,
+        E(l, c) ? [] : [c],
+        t,
+        l,
+        f
+      );
+    }
+  }
+}
+function u(n, t, e, l, f) {
+  let s = !1;
+  for (let c = 0; c < n.length; c++) {
+    const i = n[c];
+    if (E(l, i)) {
+      if (!s)
+        for (let r = 0; r < t.length; r++)
+          F(f, t[r]);
+      s = !0, i[e] && u(i[e], [], e, l, f);
+    } else
+      i[e] && u(
+        i[e],
+        s ? [i] : t.concat([i]),
+        e,
+        l,
+        f
+      );
+  }
+}
+export {
+  a as processOrgChartItems
+};

package/server/ServerGroupedOrgChart.js

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

package/server/ServerGroupedOrgChart.mjs

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

package/server/ServerOrgChart.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),T=require("@progress/kendo-react-common"),D=require("./ServerOrgChartNode.js"),m=require("../utils/consts.js");function z(o){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const s in o)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(o,s);Object.defineProperty(c,s,n.get?n:{enumerable:!0,get:()=>o[s]})}}return c.default=o,Object.freeze(c)}const H=z(j),W=({dataByGroups:o,data:c=[],cardWidth:s,childrenField:n,idField:e,expandField:t,hasChildrenField:i,groupField:l,level:v=1,parentId:d=0})=>{c.forEach(h=>{const L=h[n];if(h[t]&&L&&L.length){const a=L.some(O=>O[n]&&O[n].length||i&&O[i]),I=a?"horizontal":"vertical",f=a?null:s;o.push({ids:[h[e]],items:L,level:v,parentId:d,hasChildren:a,orientation:I,width:f}),W({dataByGroups:o,data:h[n],childrenField:n,cardWidth:s,idField:e,expandField:t,hasChildrenField:i,groupField:l,level:v+1,parentId:h[e]})}})},G=(o,c)=>{const s=c||m.NODE_WIDTH,n=o.sort((e,t)=>t.level-e.level);n.forEach(e=>{if(!e.width){const t=n.filter(d=>e.ids.includes(d.parentId)),i=t.length?Math.max(...t.map(d=>d.width||0)):s,l=e.orientation==="horizontal"?e.items.length:1,v=i*l+m.HORIZONTAL_GAP*(l-1);e.width=v}})},V=(o,c,s)=>{const n=o.sort((e,t)=>e.level-t.level);n.forEach(e=>{if(e.level===0)return;const t=n.find(a=>a.ids.includes(e.parentId)),i=(t==null?void 0:t.items.findIndex(a=>e.ids.includes(a[s])))||0,l=(t==null?void 0:t.items)||[],v=t.width?(t.width-(l.length-1)*m.HORIZONTAL_GAP)/l.length:0;if(!e.left){let a=(t==null?void 0:t.left)||0;l.forEach((I,f)=>{f<i&&(a+=v+m.HORIZONTAL_GAP)}),e.left=a}const d=(t==null?void 0:t.width)||0,h=(t==null?void 0:t.items.length)||1,L=(d-(h-1)*m.HORIZONTAL_GAP)/h;e.width=L;const E=t==null?void 0:t.items.map(a=>{const I=a[c]?a[c].length:0,f=n.find(_=>_.ids.includes(a[s])),O=(f==null?void 0:f.width)||0;return(f==null?void 0:f.orientation)==="vertical"||I===0||!a.expanded?0:O-(O-(I-1)*m.HORIZONTAL_GAP)/I});t&&(t.childLineWidths=E)})},F=(o,c,s)=>{const n=c||m.NODE_HEIGHT,e=s||m.VERTICAL_LINE;o.forEach(t=>{const i=t.level,l=(n+e)*i+m.VERTICAL_LINE*(i?i-1:0)-(e-m.VERTICAL_LINE)*(i?1:0);t.top=l})},Z=(o,c,s)=>{const n=c||m.NODE_HEIGHT,e=s||m.VERTICAL_LINE;return Math.max(...o.map(i=>{const l=i.top||0,v=i.items.length,d=i.orientation==="horizontal"?n+e+e:v*(n+e);return l+d}))},A=o=>{const c={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded"},{id:s,width:n,data:e,groupField:t,cardWidth:i,cardHeight:l,verticalLine:v,idField:d,childrenField:h,hasChildrenField:L,expandField:E,avatarField:a,titleField:I,subtitleField:f,ariaLabel:O,itemRender:_,height:x}={...c,...o},w=[{items:e,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];W({dataByGroups:w,data:e,cardWidth:i,expandField:E,hasChildrenField:L,childrenField:h,idField:d,groupField:t}),G(w,i),V(w,h,d),F(w,l,v);const p=Z(w,l,v);return H.createElement("div",{className:"k-orgchart-container",style:{width:n,height:x||p}},w.map(r=>{const g=r.level,k=r.items,y=g===0?"center":"around",C=r.orientation;return H.createElement("div",{role:g===0?"tree":"group",id:s+"-"+g+"-"+r.ids[0],"aria-label":g===0?O:void 0,"aria-orientation":g===0?C:void 0,key:r.ids[0]+"_"+g,className:T.classNames("k-orgchart-group",`k-orgchart-level-${g}`,"k-pos-absolute",{[`k-${T.kendoThemeMaps.orientationMap[C]}`]:C,[`k-justify-content-${y}`]:y}),style:{width:r.width||"100%",left:r.left,top:r.top}},k.length>0&&H.createElement("div",{role:"group",style:{width:"100%"},className:T.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${T.kendoThemeMaps.orientationMap[r.orientation]}`]:r.orientation})},k.map((u,N)=>{const b=u[h]&&u[h].length||L&&u[L],S=b||r.orientation==="vertical"&&N!==k.length-1,M=r.orientation==="vertical"&&N!==0?0:v||m.VERTICAL_LINE,P=r.childLineWidths?Math.max(...r.childLineWidths):void 0,R=u[E];return H.createElement(D.ServerOrgChartNode,{id:s+"-"+(g+1)+"-"+u[d],style:{width:P},itemRender:_,cardHeight:l,cardWidth:i,verticalLine:M,key:N,level:g,avatar:u[a],title:u[I],subtitle:u[f],line:S,expanded:R,node:u,childLineWidth:b&&R&&r.orientation==="horizontal"?r.childLineWidths[N]:0,plus:b},u.text)})))}))};A.displayName="KendoServerOrgChart";exports.ServerOrgChart=A;

package/server/ServerOrgChart.mjs

@@ -0,0 +1,210 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as I from "react";
+import { classNames as p, kendoThemeMaps as M } from "@progress/kendo-react-common";
+import { ServerOrgChartNode as j } from "./ServerOrgChartNode.mjs";
+import { VERTICAL_LINE as x, HORIZONTAL_GAP as u, NODE_WIDTH as A, NODE_HEIGHT as R } from "../utils/consts.mjs";
+const _ = ({
+  dataByGroups: d,
+  data: r = [],
+  cardWidth: l,
+  childrenField: n,
+  idField: e,
+  expandField: t,
+  hasChildrenField: i,
+  groupField: o,
+  level: m = 1,
+  parentId: h = 0
+}) => {
+  r.forEach((c) => {
+    const f = c[n];
+    if (c[t] && f && f.length) {
+      const s = f.some((W) => W[n] && W[n].length || i && W[i]), g = s ? "horizontal" : "vertical", v = s ? null : l;
+      d.push({
+        ids: [c[e]],
+        items: f,
+        level: m,
+        parentId: h,
+        hasChildren: s,
+        orientation: g,
+        width: v
+      }), _({
+        dataByGroups: d,
+        data: c[n],
+        childrenField: n,
+        cardWidth: l,
+        idField: e,
+        expandField: t,
+        hasChildrenField: i,
+        groupField: o,
+        level: m + 1,
+        parentId: c[e]
+      });
+    }
+  });
+}, P = (d, r) => {
+  const l = r || A, n = d.sort((e, t) => t.level - e.level);
+  n.forEach((e) => {
+    if (!e.width) {
+      const t = n.filter((h) => e.ids.includes(h.parentId)), i = t.length ? Math.max(...t.map((h) => h.width || 0)) : l, o = e.orientation === "horizontal" ? e.items.length : 1, m = i * o + u * (o - 1);
+      e.width = m;
+    }
+  });
+}, V = (d, r, l) => {
+  const n = d.sort((e, t) => e.level - t.level);
+  n.forEach((e) => {
+    if (e.level === 0)
+      return;
+    const t = n.find((s) => s.ids.includes(e.parentId)), i = (t == null ? void 0 : t.items.findIndex((s) => e.ids.includes(s[l]))) || 0, o = (t == null ? void 0 : t.items) || [], m = t.width ? (t.width - (o.length - 1) * u) / o.length : 0;
+    if (!e.left) {
+      let s = (t == null ? void 0 : t.left) || 0;
+      o.forEach((g, v) => {
+        v < i && (s += m + u);
+      }), e.left = s;
+    }
+    const h = (t == null ? void 0 : t.width) || 0, c = (t == null ? void 0 : t.items.length) || 1, f = (h - (c - 1) * u) / c;
+    e.width = f;
+    const E = t == null ? void 0 : t.items.map((s) => {
+      const g = s[r] ? s[r].length : 0, v = n.find((N) => N.ids.includes(s[l])), W = (v == null ? void 0 : v.width) || 0;
+      return (v == null ? void 0 : v.orientation) === "vertical" || g === 0 || !s.expanded ? 0 : W - (W - (g - 1) * u) / g;
+    });
+    t && (t.childLineWidths = E);
+  });
+}, B = (d, r, l) => {
+  const n = r || R, e = l || x;
+  d.forEach((t) => {
+    const i = t.level, o = (n + e) * i + x * (i ? i - 1 : 0) - (e - x) * (i ? 1 : 0);
+    t.top = o;
+  });
+}, G = (d, r, l) => {
+  const n = r || R, e = l || x;
+  return Math.max(...d.map((i) => {
+    const o = i.top || 0, m = i.items.length, h = i.orientation === "horizontal" ? n + e + e : m * (n + e);
+    return o + h;
+  }));
+}, K = (d) => {
+  const r = {
+    width: "100%",
+    data: [],
+    ariaLabel: "Org Chart",
+    idField: "id",
+    childrenField: "items",
+    avatarField: "avatar",
+    titleField: "title",
+    subtitleField: "subtitle",
+    expandField: "expanded"
+  }, {
+    id: l,
+    width: n,
+    data: e,
+    groupField: t,
+    cardWidth: i,
+    cardHeight: o,
+    verticalLine: m,
+    idField: h,
+    childrenField: c,
+    hasChildrenField: f,
+    expandField: E,
+    avatarField: s,
+    titleField: g,
+    subtitleField: v,
+    ariaLabel: W,
+    itemRender: N,
+    height: z
+  } = { ...r, ...d }, k = [{
+    items: e,
+    level: 0,
+    hasChildren: !0,
+    orientation: "horizontal",
+    ids: [0],
+    parentId: null,
+    width: null
+  }];
+  _({
+    dataByGroups: k,
+    data: e,
+    cardWidth: i,
+    expandField: E,
+    hasChildrenField: f,
+    childrenField: c,
+    idField: h,
+    groupField: t
+  }), P(k, i), V(k, c, h), B(k, o, m);
+  const D = G(k, o, m);
+  return /* @__PURE__ */ I.createElement("div", { className: "k-orgchart-container", style: { width: n, height: z || D } }, k.map((a) => {
+    const w = a.level, y = a.items, T = w === 0 ? "center" : "around", C = a.orientation;
+    return /* @__PURE__ */ I.createElement(
+      "div",
+      {
+        role: w === 0 ? "tree" : "group",
+        id: l + "-" + w + "-" + a.ids[0],
+        "aria-label": w === 0 ? W : void 0,
+        "aria-orientation": w === 0 ? C : void 0,
+        key: a.ids[0] + "_" + w,
+        className: p(
+          "k-orgchart-group",
+          `k-orgchart-level-${w}`,
+          "k-pos-absolute",
+          {
+            [`k-${M.orientationMap[C]}`]: C,
+            [`k-justify-content-${T}`]: T
+          }
+        ),
+        style: {
+          width: a.width || "100%",
+          left: a.left,
+          top: a.top
+        }
+      },
+      y.length > 0 && /* @__PURE__ */ I.createElement(
+        "div",
+        {
+          role: "group",
+          style: { width: "100%" },
+          className: p(
+            "k-orgchart-node-container",
+            "k-justify-content-around",
+            {
+              [`k-${M.orientationMap[a.orientation]}`]: a.orientation
+            }
+          )
+        },
+        y.map((L, H) => {
+          const O = L[c] && L[c].length || f && L[f], F = O || a.orientation === "vertical" && H !== y.length - 1, S = a.orientation === "vertical" && H !== 0 ? 0 : m || x, $ = a.childLineWidths ? Math.max(...a.childLineWidths) : void 0, b = L[E];
+          return /* @__PURE__ */ I.createElement(
+            j,
+            {
+              id: l + "-" + (w + 1) + "-" + L[h],
+              style: { width: $ },
+              itemRender: N,
+              cardHeight: o,
+              cardWidth: i,
+              verticalLine: S,
+              key: H,
+              level: w,
+              avatar: L[s],
+              title: L[g],
+              subtitle: L[v],
+              line: F,
+              expanded: b,
+              node: L,
+              childLineWidth: O && b && a.orientation === "horizontal" ? a.childLineWidths[H] : 0,
+              plus: O
+            },
+            L.text
+          );
+        })
+      )
+    );
+  }));
+};
+K.displayName = "KendoServerOrgChart";
+export {
+  K as ServerOrgChart
+};

package/server/ServerOrgChartGroup.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),s=require("@progress/kendo-react-common"),f=require("../client/ExpandButton.js"),C=require("../client/OrgChartGroupContainer.js"),k=require("../utils/consts.js");function A(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(n,r,a.get?a:{enumerable:!0,get:()=>t[r]})}}return n.default=t,Object.freeze(n)}const e=A(G),H="k-orgchart-node-group",O="k-orgchart-node-group-title",T="k-orgchart-node-group-subtitle",L=t=>{const n={orientation:"horizontal"},{id:r,title:a,subtitle:u,line:S,plus:d,focus:P,level:o,verticalLine:v,childLineWidth:g,orientation:l,expanded:c,nodes:i,groupTitleHeight:N,groupSubtitleHeight:R,groupTitleRender:y,groupSubtitleRender:_,...b}={...n,...t},m=y,h=_,p={height:N||k.GROUP_TITLE_HEIGHT},E={height:R||k.GROUP_SUBTITLE_HEIGHT};return e.createElement("div",{...b,className:s.classNames(t.className,H,"k-vstack","k-align-items-center")},o!==0&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:v}}),e.createElement(C.OrgChartGroupContainer,{nodes:i,"aria-expanded":!!c,"aria-keyshortcuts":"Enter","aria-level":o+1,"aria-owns":r},m?e.createElement(m,{style:p,className:O,title:a,items:i,level:o,expanded:c}):e.createElement("div",{className:O,style:p},a),h?e.createElement(h,{style:E,className:T,subtitle:u,items:i,level:o,expanded:c}):e.createElement("div",{className:T,style:E},u),e.createElement("div",{role:"group",style:{width:"100%"},className:s.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${s.kendoThemeMaps.orientationMap[l]||l}`]:l})},t.children)),S&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),d&&e.createElement(f.ExpandButton,{expanded:c,nodes:i}),d&&!!g&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:g,marginTop:-15}}))};exports.ServerOrgChartGroup=L;