@progress/kendo-react-orgchart 7.4.0 → 7.5.0-develop.2

package/OrgChart.js

@@ -5,4 +5,4 @@
  * 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 s=require("react"),e=require("prop-types"),g=require("./package-metadata.js"),p=require("./server/ServerOrgChart.js"),u=require("@progress/kendo-react-common"),h=require("./server/ServerGroupedOrgChart.js"),b=require("./client/ClientOrgChart.js");function m(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const n in r)if(n!=="default"){const i=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:()=>r[n]})}}return t.default=r,Object.freeze(t)}const a=m(s),o=r=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...r},{cardsColors:n,onExpandChange:i,onKeyDown:C,onItemAction:O,onGroupAction:F,onGroupBlur:f,onGroupFocus:y,id:c,...d}=t,l=a.useRef(u.useId());return u.validatePackage(g.packageMetadata),a.createElement(b.ClientOrgChart,{...t},r.groupField?a.createElement(h.ServerGroupedOrgChart,{id:c||l.current,...d},r.children):a.createElement(p.ServerOrgChart,{id:c||l.current,...d},r.children))};o.propTypes={className:e.string,style:e.object,id:e.string,ariaLabel:e.string,idField:e.string,childrenField:e.string,expandField:e.string,titleField:e.string,hasChildrenField:e.string,subtitleField:e.string,avatarField:e.string,cardsColors:e.array,data:e.array,groupField:e.string,cardHeight:e.number,cardWidth:e.number,groupTitleHeight:e.number,groupSubtitleHeight:e.number,verticalLine:e.number,height:e.oneOfType([e.string,e.number]),onExpandChange:e.func,onItemAction:e.func,onGroupAction:e.func};o.displayName="KendoOrgChart";exports.OrgChart=o;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),e=require("prop-types"),g=require("./package-metadata.js"),p=require("./server/ServerOrgChart.js"),u=require("@progress/kendo-react-common"),h=require("./server/ServerGroupedOrgChart.js"),b=require("./client/ClientOrgChart.js");function m(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const n in r)if(n!=="default"){const i=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:()=>r[n]})}}return t.default=r,Object.freeze(t)}const a=m(s),o=r=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",avatarType:"image",titleField:"title",subtitleField:"subtitle",...r},{cardsColors:n,onExpandChange:i,onKeyDown:C,onItemAction:O,onGroupAction:F,onGroupBlur:f,onGroupFocus:y,id:c,...d}=t,l=a.useRef(u.useId());return u.validatePackage(g.packageMetadata),a.createElement(b.ClientOrgChart,{...t},r.groupField?a.createElement(h.ServerGroupedOrgChart,{id:c||l.current,...d},r.children):a.createElement(p.ServerOrgChart,{id:c||l.current,...d},r.children))};o.propTypes={className:e.string,style:e.object,id:e.string,ariaLabel:e.string,idField:e.string,childrenField:e.string,expandField:e.string,titleField:e.string,hasChildrenField:e.string,subtitleField:e.string,avatarField:e.string,cardsColors:e.array,data:e.array,groupField:e.string,cardHeight:e.number,cardWidth:e.number,groupTitleHeight:e.number,groupSubtitleHeight:e.number,verticalLine:e.number,height:e.oneOfType([e.string,e.number]),onExpandChange:e.func,onItemAction:e.func,onGroupAction:e.func};o.displayName="KendoOrgChart";exports.OrgChart=o;

package/OrgChart.mjs

@@ -22,6 +22,7 @@ const d = (r) => {
     idField: "id",
     childrenField: "items",
     avatarField: "avatar",
+    avatarType: "image",
     titleField: "title",
     subtitleField: "subtitle",
     ...r
@@ -33,21 +34,21 @@ const d = (r) => {
     onGroupAction: f,
     onGroupBlur: C,
     onGroupFocus: v,
-    id: n,
-    ...a
+    id: a,
+    ...n
   } = i, o = t.useRef(c());
   return g(l), /* @__PURE__ */ t.createElement(m, { ...i }, r.groupField ? /* @__PURE__ */ t.createElement(
     u,
     {
-      id: n || o.current,
-      ...a
+      id: a || o.current,
+      ...n
     },
     r.children
   ) : /* @__PURE__ */ t.createElement(
     s,
     {
-      id: n || o.current,
-      ...a
+      id: a || o.current,
+      ...n
     },
     r.children
   ));

package/client/OrgChartCard.js

@@ -5,4 +5,4 @@
  * 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("react"),b=require("@progress/kendo-react-layout"),g=require("@progress/kendo-react-common"),h=require("./ClientOrgChart.js");function k(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const c in n)if(c!=="default"){const r=Object.getOwnPropertyDescriptor(n,c);Object.defineProperty(e,c,r.get?r:{enumerable:!0,get:()=>n[c]})}}return e.default=n,Object.freeze(e)}const l=k(f),y=n=>{const{node:e,children:c,style:r,...s}=n,[a,i]=l.useState(!1),t=l.useContext(h.OrgChartEventsContextContext),u=o=>{t.onKeyDown&&t.onKeyDown.call(void 0,{event:o,item:e})},d=o=>{t.onItemAction&&t.onItemAction.call(void 0,{event:o,item:e})},C=o=>{t.onItemContextMenu&&t.onItemContextMenu.call(void 0,{event:o,item:e})},m=o=>{t.onItemDoubleClick&&t.onItemDoubleClick.call(void 0,{event:o,item:e})};return l.createElement(b.Card,{role:"treeitem",className:g.classNames("k-orgchart-card",{"k-focus":a}),onClick:d,onKeyDown:u,onContextMenu:C,onDoubleClick:m,style:r,"aria-selected":a,"aria-keyshortcuts":"Enter",onFocus:()=>i(!0),onBlur:()=>i(!1),...s},c)};exports.OrgChartCard=y;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),b=require("@progress/kendo-react-layout"),g=require("@progress/kendo-react-common"),h=require("./ClientOrgChart.js");function k(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const c in n)if(c!=="default"){const r=Object.getOwnPropertyDescriptor(n,c);Object.defineProperty(e,c,r.get?r:{enumerable:!0,get:()=>n[c]})}}return e.default=n,Object.freeze(e)}const l=k(f),y=n=>{const{node:e,children:c,style:r,...s}=n,[a,i]=l.useState(!1),t=l.useContext(h.OrgChartEventsContextContext),u=o=>{t.onKeyDown&&t.onKeyDown.call(void 0,{event:o,item:e})},d=o=>{t.onItemAction&&t.onItemAction.call(void 0,{event:o,item:e})},C=o=>{t.onItemContextMenu&&t.onItemContextMenu.call(void 0,{event:o,item:e})},m=o=>{t.onItemDoubleClick&&t.onItemDoubleClick.call(void 0,{event:o,item:e})};return l.createElement(b.Card,{orientation:null,role:"treeitem",className:g.classNames("k-orgchart-card",{"k-focus":a}),onClick:d,onKeyDown:u,onContextMenu:C,onDoubleClick:m,style:r,"aria-selected":a,"aria-keyshortcuts":"Enter",onFocus:()=>i(!0),onBlur:()=>i(!1),...s},c)};exports.OrgChartCard=y;

package/client/OrgChartCard.mjs

@@ -11,7 +11,7 @@ import { Card as f } from "@progress/kendo-react-layout";
 import { classNames as h } from "@progress/kendo-react-common";
 import { OrgChartEventsContextContext as k } from "./ClientOrgChart.mjs";
 const I = (r) => {
-  const { node: o, children: i, style: s, ...a } = r, [c, l] = n.useState(!1), e = n.useContext(k), m = (t) => {
+  const { node: o, children: i, style: a, ...s } = r, [l, c] = n.useState(!1), e = n.useContext(k), m = (t) => {
     e.onKeyDown && e.onKeyDown.call(void 0, {
       event: t,
       item: o
@@ -35,21 +35,22 @@ const I = (r) => {
   return /* @__PURE__ */ n.createElement(
     f,
     {
+      orientation: null,
       role: "treeitem",
       className: h(
         "k-orgchart-card",
-        { "k-focus": c }
+        { "k-focus": l }
       ),
       onClick: u,
       onKeyDown: m,
       onContextMenu: C,
       onDoubleClick: d,
-      style: s,
-      "aria-selected": c,
+      style: a,
+      "aria-selected": l,
       "aria-keyshortcuts": "Enter",
-      onFocus: () => l(!0),
-      onBlur: () => l(!1),
-      ...a
+      onFocus: () => c(!0),
+      onBlur: () => c(!1),
+      ...s
     },
     i
   );

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

@@ -5,4 +5,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:b,expandField:y,hasChildrenField:x,avatarField:C,titleField:E,subtitleField:w,onExpandChange:I,onItemAction:N,onItemDoubleClick:L,onItemContextMenu:A,onKeyDown:D,onGroupAction:R,onGroupBlur:T,onGroupFocus:O,cardsColors:S,ariaLabel:G,itemRender:M,groupTitleRender:W,groupSubtitleRender:K,height:H,children:B,...z}=t,j=s.useRef(null),q=s.useRef(new n.Navigation({tabIndex:a,root:j,selectors:[t.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[P,$]=s.useState([]),_=s.useRef(null);s.useEffect((()=>{if(i&&q.current.first&&q.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)}),j.current.ownerDocument||document)}}),[i,a]);return s.createElement("div",{style:o,ref:j,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||q.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&&q.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&&q.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(R&&R.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-node-group-container");t&&q.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 b=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})}})},y=e=>{const{node:t,children:r,style:a,...l}=e,[o,d]=s.useState(!1),c=s.useContext(k);return s.createElement(i.Card,{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,...C}={...e,avatarType:"image"},E=F;return s.createElement("div",{...C,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(y,{node:v,style:{width:d,height:c},"aria-level":l+1,"aria-expanded":!!g,"aria-owns":t},s.createElement(x,{level:l},E?s.createElement(E,{item:v,title:r,subtitle:a,level:l,expanded:g,color:h}):s.createElement(s.Fragment,null,s.createElement(i.Avatar,{type:k,themeColor:"secondary"},"image"===k?s.createElement("img",{src:f,alt:"KendoReact Avatar Customer Image"}):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(b,{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,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)}))},N=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:v,subtitleField:k,ariaLabel:F,itemRender:b,height:y}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",...e},x=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];E({dataByGroups:x,data:r,cardWidth:l,expandField:p,hasChildrenField:h,childrenField:u,idField:c,groupField:a}),w(x,l),I(x,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}))})(x,o,d);const N=((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))})))})(x,o,d);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:y||N}},x.map((e=>{const i=e.level,r=e.items,a=0===i?"center":"around",g=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?g:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[g]}`]:g,[`k-justify-content-${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],F=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],title:n[v],subtitle:n[k],line:F,expanded:E,node:n,childLineWidth:g&&E&&"horizontal"===e.orientation?e.childLineWidths[a]:0,plus:g},n.text)}))))})))};N.displayName="KendoServerOrgChart";const L={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"},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)},D="k-orgchart-node-group-title",R="k-orgchart-node-group-subtitle",T=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},y=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},y?s.createElement(y,{style:C,className:D,title:i,items:m,level:d,expanded:p}):s.createElement("div",{className:D,style:C},i),x?s.createElement(x,{style:E,className:R,subtitle:r,items:m,level:d,expanded:p}):s.createElement("div",{className:R,style:E},r),s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${n.kendoThemeMaps.orientationMap[h]||h}`]:h})},e.children)),a&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),l&&s.createElement(b,{expanded:p,nodes:m}),l&&!!u&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:u,marginTop:-15}}))},O=({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}),O({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}}))},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)+(r||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)})))},M=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:b,titleField:y,subtitleField:x,cardsColors:E,ariaLabel:w,itemRender:I,groupTitleRender:N,groupSubtitleRender:L,height:A}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",...e},D=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];O({dataByGroups:D,data:r,cardWidth:l,expandField:k,hasChildrenField:F,childrenField:m,idField:p,groupField:a}),D.map((e=>{e.groupedItems=o.groupBy(e.items,[{field:a}])})),((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}}}))})(D,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]}}))})(D,p),S(D,d||g,c||20,u||20,h);const R=G(D,d||g,c||20,u||20);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:A||R}},D.map((i=>{const o=i.level,g=i.groupedItems.map((e=>{const t=e.items.some((e=>e[k]));return{...e,expanded:t}})),A=g.filter((e=>e.expanded)),D=0===o?"center":"around",R="horizontal",O=E&&E[o]||"green";return s.createElement("div",{role:0===o?"tree":"group",id:t+"-"+o+"-"+i.ids[0],"aria-label":0===o?w:void 0,"aria-orientation":0===o?R:void 0,key:i.ids[0]+"_"+o,className:n.classNames("k-orgchart-group",`k-orgchart-level-${o}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[R]}`]:R,[`k-justify-content-${D}`]:D,"k-orgchart-group-h":e.groupField}),style:{width:i.width||"100%",left:i.left,top:i.top}},r.length>0&&g.map(((e,n)=>{const r=e.items.some((e=>e[m]&&e[m].length||F&&e[F])),k=i.width?(i.width-(g.length-1)*v)/g.length:void 0,E=A.findIndex((t=>t===e));return s.createElement(T,{id:t+"-"+(o+1)+"-"+e.items[0][p],style:{width:k},groupTitleHeight:c,groupSubtitleHeight:u,groupTitleRender:N,groupSubtitleRender:L,key:n,level:o,verticalLine:h||f,title:e.items[0][a||y],subtitle:a,orientation:i.orientation,childLineWidth:r&&e.expanded&&"horizontal"===i.orientation?i.childLineWidths[E]:0,line:r,nodes:e.items,expanded:e.expanded,plus:r},e.items.map(((e,t)=>s.createElement(C,{cardHeight:d,cardWidth:l,itemRender:I,color:O,key:t,level:o,avatar:e[b],title:e[y],subtitle:e[x],verticalLine:0,line:!1,node:e,childLineWidth:0,plus:!1},e.text))))})))})))};M.displayName="KendoServerGroupedOrgChart";const W=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",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());return n.validatePackage(L),s.createElement(F,{...t},e.groupField?s.createElement(M,{id:u||p.current,...h},e.children):s.createElement(N,{id:u||p.current,...h},e.children))};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&&j(o,n.getNestedValue(r,l)?[]:[l],t,r,a)}}}function j(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]&&j(d[i],[],i,r,a)}else d[i]&&j(d[i],l?[d]:t.concat([d]),i,r,a)}}W.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},W.displayName="KendoOrgChart",e.OrgChart=W,e.ServerOrgChart=N,e.ServerOrgChartGroup=T,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="checkIndeterminate",g=80,v=25,f=40,F=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}),k=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:k,childrenField:y,expandField:b,hasChildrenField:x,avatarField:C,titleField:E,subtitleField:w,onExpandChange:I,onItemAction:N,onItemDoubleClick:A,onItemContextMenu:L,onKeyDown:T,onGroupAction:D,onGroupBlur:R,onGroupFocus:O,cardsColors:S,ariaLabel:G,itemRender:M,groupTitleRender:W,groupSubtitleRender:K,height:H,children:B,...z}=t,q=s.useRef(null),P=s.useRef(new n.Navigation({tabIndex:a,root:q,selectors:[t.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[j,$]=s.useState([]),_=s.useRef(null);s.useEffect((()=>{if(i&&P.current.first&&P.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(F.Provider,{value:{cardColors:S||j,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||P.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&&P.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&&P.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(D&&D.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-node-group-container");t&&P.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))};k.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},k.displayName="KendoClientOrgChart";const y=e=>{const{expanded:t,node:n,nodes:i}=e,l=s.useContext(F);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(F);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(F),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:F,itemRender:k,showAvatar:C,...E}={avatarType:"image",...e},w=k;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:F,themeColor:"secondary"},"image"===F?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=>{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:F,subtitleField:k,ariaLabel:y,itemRender:b,height:x,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}];E({dataByGroups:N,data:r,cardWidth:l,expandField:p,hasChildrenField:h,childrenField:u,idField:c,groupField:a}),((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}}))})(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)*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)}))})(N,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}))})(N,o,d);const A=((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))})))})(N,o,d);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:x||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?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:w,showAvatar:I,title:n[F],subtitle:n[k],line:v,expanded:E,node:n,childLineWidth:g&&E&&"horizontal"===e.orientation?e.childLineWidths[a]:0,plus:g},n.text)}))))})))};w.displayName="KendoServerOrgChart";const I={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"},N=e=>{const{nodes:t,children:i,style:r,...a}=e,[l,o]=s.useState(!1),d=s.useContext(F),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)},A="k-orgchart-node-group-title",L="k-orgchart-node-group-subtitle",T=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,...k}={orientation:"horizontal",...e},b=f,x=F,C={height:g||20},E={height:v||20};return s.createElement("div",{...k,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(N,{nodes:m,"aria-expanded":!!p,"aria-keyshortcuts":"Enter","aria-level":d+1,"aria-owns":t},b?s.createElement(b,{style:C,className:A,title:i,items:m,level:d,expanded:p}):s.createElement("div",{className:A,style:C},i),x?s.createElement(x,{style:E,className:L,subtitle:r,items:m,level:d,expanded:p}):s.createElement("div",{className:L,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}}))},D=({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}),D({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}}))},R=(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}))},O=(e,t,n,i,r)=>{const a=t||g,l=n||f,o=(i||20)+(r||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)})))},S=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:F,hasChildrenField:k,avatarField:y,titleField:b,subtitleField:x,cardsColors:E,ariaLabel:w,itemRender:I,groupTitleRender:N,groupSubtitleRender:A,height:L,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},M=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];D({dataByGroups:M,data:r,cardWidth:l,expandField:F,hasChildrenField:k,childrenField:m,idField:p,groupField:a}),M.map((e=>{e.groupedItems=o.groupBy(e.items,[{field:a}])})),((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}}}))})(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),R(M,d||g,c||20,u||20,h);const W=O(M,d||g,c||20,u||20);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:L||W}},M.map((e=>{const i=e.level,o=e.groupedItems.map((e=>{const t=e.items.some((e=>e[F]));return{...e,expanded:t}})),g=o.filter((e=>e.expanded)),L="horizontal",D=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 F=n.items.some((e=>e[m]&&e[m].length||k&&e[k])),E=e.width?(e.width-(o.length-1)*v)/o.length:void 0,w=g.findIndex((e=>e===n));return s.createElement(T,{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:F&&n.expanded&&"horizontal"===e.orientation?e.childLineWidths[w]:0,line:F,nodes:n.items,expanded:n.expanded,plus:F},n.items.map(((e,t)=>s.createElement(C,{cardHeight:d,cardWidth:l,itemRender:I,color:D,key:t,level:i,avatar:e[y],avatarType:S,showAvatar:G,title:e[b],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());return n.validatePackage(I),s.createElement(k,{...t},e.groupField?s.createElement(S,{id:u||p.current,...h},e.children):s.createElement(w,{id:u||p.current,...h},e.children))};function M(e,t,i,r,a){if(i){const{ids:l,field:o}=W(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 W(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}=W(i,p),a=i.checkIndeterminateField||m;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=w,e.ServerOrgChartGroup=T,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=M(n,r,t.expand,i,o),n=M(n,a,t.select,i,o),n=M(n,l,t.check,i,o),H(n,o,t.check),n}}));

package/index.d.mts

@@ -403,6 +403,7 @@ export declare interface ServerOrgChartNodeProps {
     expanded?: boolean;
     avatar?: string;
     avatarType?: string;
+    showAvatar?: boolean;
     cardHeight?: number;
     cardWidth?: number;
     verticalLine?: number;
@@ -456,13 +457,22 @@ export declare interface ServerOrgChartProps {
      */
     hasChildrenField?: string;
     /**
-     * Specifies the name of the field which will provide a subtitle representation for the item. Defaults to `text`.
+     * Specifies the name of the field which will provide a subtitle representation for the item. Defaults to `subtitle`.
      */
     subtitleField?: string;
     /**
-     * Specifies the avatar of the field which will provide a avatar representation for the item. Defaults to `text`.
+     * Specifies the field which will provide an avatar representation for the item. Defaults to `avatar`.
      */
     avatarField?: string;
+    /**
+     * Specifies the type of the Avatar that will be rendered for the OrgChart item. Defaults to `image`.
+     */
+    avatarType?: string;
+    /**
+     * @default true
+     * Specifies if the Avatar inside the OrgChart's cards will be displayed or not.
+     */
+    showAvatar?: boolean;
     /**
      * Specifies a string array with the colors applied to the items. By default the colors come from the Kendo Theme that is used.
      */

package/index.d.ts

@@ -403,6 +403,7 @@ export declare interface ServerOrgChartNodeProps {
     expanded?: boolean;
     avatar?: string;
     avatarType?: string;
+    showAvatar?: boolean;
     cardHeight?: number;
     cardWidth?: number;
     verticalLine?: number;
@@ -456,13 +457,22 @@ export declare interface ServerOrgChartProps {
      */
     hasChildrenField?: string;
     /**
-     * Specifies the name of the field which will provide a subtitle representation for the item. Defaults to `text`.
+     * Specifies the name of the field which will provide a subtitle representation for the item. Defaults to `subtitle`.
      */
     subtitleField?: string;
     /**
-     * Specifies the avatar of the field which will provide a avatar representation for the item. Defaults to `text`.
+     * Specifies the field which will provide an avatar representation for the item. Defaults to `avatar`.
      */
     avatarField?: string;
+    /**
+     * Specifies the type of the Avatar that will be rendered for the OrgChart item. Defaults to `image`.
+     */
+    avatarType?: string;
+    /**
+     * @default true
+     * Specifies if the Avatar inside the OrgChart's cards will be displayed or not.
+     */
+    showAvatar?: boolean;
     /**
      * Specifies a string array with the colors applied to the items. By default the colors come from the Kendo Theme that is used.
      */

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-orgchart",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1712847176,
+  publishDate: 1712928876,
   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"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-orgchart",
-  "version": "7.4.0",
+  "version": "7.5.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",
@@ -24,9 +24,9 @@
   "peerDependencies": {
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-buttons": "7.4.0",
-    "@progress/kendo-react-common": "7.4.0",
-    "@progress/kendo-react-layout": "7.4.0",
+    "@progress/kendo-react-buttons": "7.5.0-develop.2",
+    "@progress/kendo-react-common": "7.5.0-develop.2",
+    "@progress/kendo-react-layout": "7.5.0-develop.2",
     "@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/server/ServerGroupedOrgChart.js

@@ -5,4 +5,4 @@
  * 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;
+"use client";"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 x=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",_=O?null:a+2*n.HORIZONTAL_GAP,E=o.find(T=>T.parentId===l),R=o.find(T=>T.ids.includes(l));let p=!1;if(E){const T=E.ids[0],b=R.items.find(G=>G[t]===T),N=R.items.find(G=>G[t]===s[t]);p=b[h]===N[h]}E&&p?(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:_}),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)+(t||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)),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:_,titleField:E,subtitleField:R,cardsColors:p,ariaLabel:T,itemRender:b,groupTitleRender:N,groupSubtitleRender:G,height:D,avatarType:k,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:O,hasChildrenField:f,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 U=tt(v,h||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||U}},v.map(u=>{const g=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=p&&p[g]||"green";return x.createElement("div",{role:g===0?"tree":"group",id:a+"-"+g+"-"+u.ids[0],"aria-label":g===0?T:void 0,"aria-orientation":g===0?P:void 0,key:u.ids[0]+"_"+g,className:S.classNames("k-orgchart-group",`k-orgchart-level-${g}`,"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(H=>H[m]&&H[m].length||f&&H[f]),q=u.width?(u.width-(w.length-1)*n.HORIZONTAL_GAP)/w.length:void 0,V=Z.findIndex(H=>H===L);return x.createElement(F.ServerOrgChartGroup,{id:a+"-"+(g+1)+"-"+L.items[0][c],style:{width:q},groupTitleHeight:d,groupSubtitleHeight:l,groupTitleRender:N,groupSubtitleRender:G,key:C,level:g,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((H,j)=>x.createElement($.ServerOrgChartNode,{cardHeight:h,cardWidth:i,itemRender:b,color:z,key:j,level:g,avatar:H[_],avatarType:k,showAvatar:M,title:H[E],subtitle:H[R],verticalLine:0,line:!1,node:H,childLineWidth:0,plus:!1},H.text)))}))}))};y.displayName="KendoServerGroupedOrgChart";exports.ServerGroupedOrgChart=y;