@progress/kendo-react-orgchart 7.0.0-develop.7 → 7.0.0-develop.9

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

@@ -15,4 +15,4 @@
 `;for(let t=0;t<_e;t++)r+=`
       <div class="k-var--series-${t+1}"></div>`;return r})()}
     </div>
-`;class We{getSeriesColors(){const t=this.element,s=[].slice.call(t.querySelectorAll(".k-var--series div")),i=ve(t.querySelector(".k-var--series-unset"));return s.reduce((n,o)=>{const a=Ge(o.className),c=ve(o);return c!==i&&(n[a]=c),n},[])}}const Re=(r,t)=>{const s=new We,i=s.element=t.createElement("div");i.style.display="none",i.innerHTML=Me,t.body.appendChild(i);let e;try{e=s.getSeriesColors()}finally{t.body.removeChild(s.element),delete s.element,r(e)}},Pe="expanded",Ke="items",Be="selected",Ce="checked",je="checkIndeterminate",ze="k-orgchart",j=80,Ee=300,O=25,_=40,ie=20,se=20,ke=82,Z=l.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}),oe=r=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...r},{navigatable:s,id:i,tabIndex:e,className:n,style:o,data:a,groupField:c,cardWidth:m,cardHeight:h,groupTitleHeight:g,groupSubtitleHeight:p,verticalLine:u,idField:E,childrenField:y,expandField:I,hasChildrenField:D,avatarField:G,titleField:k,subtitleField:W,onExpandChange:w,onItemAction:b,onItemDoubleClick:z,onItemContextMenu:M,onKeyDown:$,onGroupAction:C,onGroupBlur:T,onGroupFocus:R,cardsColors:U,ariaLabel:J,itemRender:q,groupTitleRender:Y,groupSubtitleRender:A,height:re,children:V,...ue}=t,ee=l.useRef(null),L=l.useRef(new x.Navigation({tabIndex:e,root:ee,selectors:[t.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[me,lt]=l.useState([]),K=l.useRef(null),ct=(f,v,S)=>{S.preventDefault(),v.focusNext(f)},dt=(f,v,S)=>{S.preventDefault(),v.focusPrevious(f)},ht=(f,v,S,F)=>{var P;if(S.preventDefault(),(t.groupField?F.items.some(te=>te[t.expandField]):F.item[t.expandField])&&t.onExpandChange)t.onExpandChange.call(void 0,F);else{const te=".k-orgchart-group",ge=(P=f.closest(te))==null?void 0:P.getAttribute("id"),ne=document.querySelector(`[aria-owns="${ge}"]`);ne?v.focusElement(ne,f):v.focusPrevious(f)}},ut=(f,v,S,F)=>{var ne;S.preventDefault();const H=t.groupField?F.items.some(B=>B[t.expandField]):F.item[t.expandField],P=t.groupField?F.items.find(B=>B[t.childrenField]):F.item[t.childrenField],te=t.groupField?F.items.some(B=>t.hasChildrenField&&B[t.hasChildrenField]):t.hasChildrenField&&F.item[t.hasChildrenField],ge=t.groupField?P&&P[t.childrenField]&&P[t.childrenField].length:P&&P.length;if((te||ge)&&!H&&t.onExpandChange)t.onExpandChange.call(void 0,F);else{const B=t.groupField?".k-orgchart-node-group-container":".k-orgchart-card",It=f.getAttribute("aria-owns"),Oe=(ne=document.getElementById(It))==null?void 0:ne.querySelector(B);Oe?v.focusElement(Oe,f):v.focusNext(f)}},mt=(f,v,S)=>{S.preventDefault(),v.focusElement(v.first,null)},gt=(f,v,S)=>{S.preventDefault(),v.focusElement(v.last,null)},pt=(f,v,S,F)=>{S.stopPropagation();const H=f.className.indexOf("k-orgchart-node-group-container")!==-1;if(r.groupField&&H){K.current&&K.current.first&&K.current.focusElement(K.current.first,null);return}t.onItemAction&&t.onItemAction({event:S,item:F.item})},ft=f=>{if(r.groupField){const v=f.closest(".k-orgchart-node-group-container");v&&L.current.focusElement(v,null)}};l.useEffect(()=>{if(s&&L.current.first&&L.current.first.setAttribute("tabindex",String(e)),!U){const f=ee.current.ownerDocument||document;Re(v=>{lt(v)},f)}},[s,e]);const vt=f=>{if(t.navigatable){const v=f.event,S=v.key===" "?"Space":v.key,F=r.groupField&&v.target.className.indexOf("k-orgchart-card")!==-1&&K.current||L.current,H=v.target.closest(F.selectors.join(","));switch(S){case"ArrowUp":ht(H,F,v,f);break;case"ArrowDown":ut(H,F,v,f);break;case"ArrowLeft":dt(H,F,v);break;case"ArrowRight":ct(H,F,v);break;case"End":gt(H,F,v);break;case"Home":mt(H,F,v);break;case"Enter":pt(H,F,v,f);break;case"Escape":ft(H);break}}},Ct=f=>{if(f.event.stopPropagation(),b&&b.call(void 0,f),t.navigatable){const v=f.event.target.closest(".k-orgchart-card");v&&L.current.focusElement(v,null)}},Et=f=>{f.event.stopPropagation(),b&&b.call(void 0,f)},kt=f=>{f.event.stopPropagation(),b&&b.call(void 0,f)},bt=f=>{if(C&&C.call(void 0,f),t.navigatable){const v=f.event.target.closest(".k-orgchart-node-group-container");v&&L.current.focusElement(v,null)}},xt=f=>{K.current=null},yt=f=>{K.current=new x.Navigation({tabIndex:0,root:f.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})};return l.createElement("div",{style:o,ref:ee,className:x.classNames(n,ze)},l.createElement(Z.Provider,{value:{cardColors:U||me,onExpandChange:r.onExpandChange,onKeyDown:vt,onItemAction:Ct,onItemDoubleClick:kt,onItemContextMenu:Et,onGroupAction:bt,onGroupBlur:xt,onGroupFocus:yt},...ue},r.children))};oe.propTypes={className:d.string,style:d.object,id:d.string,ariaLabel:d.string,idField:d.string,childrenField:d.string,expandField:d.string,titleField:d.string,hasChildrenField:d.string,subtitleField:d.string,avatarField:d.string,cardsColors:d.array,data:d.array,groupField:d.string,cardHeight:d.number,cardWidth:d.number,groupTitleHeight:d.number,groupSubtitleHeight:d.number,verticalLine:d.number,height:d.oneOfType([d.string,d.number]),onExpandChange:d.func,onItemAction:d.func,onItemDoubleClick:d.func,onItemContextMenu:d.func,onGroupAction:d.func},oe.displayName="KendoClientOrgChart";const be=r=>{const{expanded:t,node:s,nodes:i}=r,e=l.useContext(Z),n=o=>{e.onExpandChange&&e.onExpandChange.call(void 0,{event:o,expand:!t,item:s,items:i})};return l.createElement(Se.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?pe.minusIcon:pe.plusIcon,"aria-label":t?"collapse":"expand",onClick:n})},$e=r=>{const{node:t,children:s,style:i,...e}=r,[n,o]=l.useState(!1),a=l.useContext(Z),c=p=>{a.onKeyDown&&a.onKeyDown.call(void 0,{event:p,item:t})},m=p=>{a.onItemAction&&a.onItemAction.call(void 0,{event:p,item:t})},h=p=>{a.onItemContextMenu&&a.onItemContextMenu.call(void 0,{event:p,item:t})},g=p=>{a.onItemDoubleClick&&a.onItemDoubleClick.call(void 0,{event:p,item:t})};return l.createElement(X.Card,{role:"treeitem",className:x.classNames("k-orgchart-card",{"k-focus":n}),onClick:m,onKeyDown:c,onContextMenu:h,onDoubleClick:g,style:i,"aria-selected":n,"aria-keyshortcuts":"Enter",onFocus:()=>o(!0),onBlur:()=>o(!1),...e},s)},Ue=r=>{const{level:t,children:s}=r,i=l.useContext(Z),e=i.cardColors&&i.cardColors[t]||"green";return l.createElement(X.CardBody,{className:"k-hstack",style:{borderTopColor:e}},s)},qe="k-orgchart-node",ae=r=>{const t={avatarType:"image"},{id:s,title:i,subtitle:e,level:n,childLineWidth:o,cardWidth:a,cardHeight:c,verticalLine:m,color:h,line:g,plus:p,expanded:u,node:E,avatar:y,avatarType:I,itemRender:D,...G}={...r,...t},k=D;return l.createElement("div",{...G,className:x.classNames(r.className,qe,"k-vstack","k-align-items-center")},n!==0&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:m}}),l.createElement($e,{node:E,style:{width:a,height:c},"aria-level":n+1,"aria-expanded":!!u,"aria-owns":s},l.createElement(Ue,{level:n},k?l.createElement(k,{item:E,title:i,subtitle:e,level:n,expanded:u,color:h}):l.createElement(l.Fragment,null,l.createElement(X.Avatar,{type:I,themeColor:"secondary"},I==="image"?l.createElement("img",{src:y,alt:"KendoReact Avatar Customer Image"}):y),l.createElement("div",{className:"k-card-title-wrap k-vstack"},l.createElement(X.CardTitle,{className:"k-text-ellipsis"},i),l.createElement("span",{className:"k-spacer"}),l.createElement(X.CardSubtitle,{className:"k-text-ellipsis"},e)),l.createElement("span",{className:"k-spacer"})))),g&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),p&&l.createElement(be,{expanded:u,node:E}),p&&!!o&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:o,marginTop:-15}}))},xe=({dataByGroups:r,data:t=[],cardWidth:s,childrenField:i,idField:e,expandField:n,hasChildrenField:o,groupField:a,level:c=1,parentId:m=0})=>{t.forEach(h=>{const g=h[i];if(h[n]&&g&&g.length){const u=g.some(I=>I[i]&&I[i].length||o&&I[o]),E=u?"horizontal":"vertical",y=u?null:s;r.push({ids:[h[e]],items:g,level:c,parentId:m,hasChildren:u,orientation:E,width:y}),xe({dataByGroups:r,data:h[i],childrenField:i,cardWidth:s,idField:e,expandField:n,hasChildrenField:o,groupField:a,level:c+1,parentId:h[e]})}})},Ve=(r,t)=>{const s=t||Ee,i=r.sort((e,n)=>n.level-e.level);i.forEach(e=>{if(!e.width){const n=i.filter(m=>e.ids.includes(m.parentId)),o=n.length?Math.max(...n.map(m=>m.width||0)):s,a=e.orientation==="horizontal"?e.items.length:1,c=o*a+O*(a-1);e.width=c}})},Qe=(r,t,s)=>{const i=r.sort((e,n)=>e.level-n.level);i.forEach(e=>{if(e.level===0)return;const n=i.find(u=>u.ids.includes(e.parentId)),o=(n==null?void 0:n.items.findIndex(u=>e.ids.includes(u[s])))||0,a=(n==null?void 0:n.items)||[],c=n.width?(n.width-(a.length-1)*O)/a.length:0;if(!e.left){let u=(n==null?void 0:n.left)||0;a.forEach((E,y)=>{y<o&&(u+=c+O)}),e.left=u}const m=(n==null?void 0:n.width)||0,h=(n==null?void 0:n.items.length)||1,g=(m-(h-1)*O)/h;e.width=g;const p=n==null?void 0:n.items.map(u=>{const E=u[t]?u[t].length:0,y=i.find(D=>D.ids.includes(u[s])),I=(y==null?void 0:y.width)||0;return(y==null?void 0:y.orientation)==="vertical"||E===0||!u.expanded?0:I-(I-(E-1)*O)/E});n&&(n.childLineWidths=p)})},Xe=(r,t,s)=>{const i=t||j,e=s||_;r.forEach(n=>{const o=n.level,a=(i+e)*o+_*(o?o-1:0)-(e-_)*(o?1:0);n.top=a})},Ze=(r,t,s)=>{const i=t||j,e=s||_;return Math.max(...r.map(o=>{const a=o.top||0,c=o.items.length,m=o.orientation==="horizontal"?i+e+e:c*(i+e);return a+m}))},le=r=>{const t={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded"},{id:s,width:i,data:e,groupField:n,cardWidth:o,cardHeight:a,verticalLine:c,idField:m,childrenField:h,hasChildrenField:g,expandField:p,avatarField:u,titleField:E,subtitleField:y,ariaLabel:I,itemRender:D,height:G}={...t,...r},k=[{items:e,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];xe({dataByGroups:k,data:e,cardWidth:o,expandField:p,hasChildrenField:g,childrenField:h,idField:m,groupField:n}),Ve(k,o),Qe(k,h,m),Xe(k,a,c);const W=Ze(k,a,c);return l.createElement("div",{className:"k-orgchart-container",style:{width:i,height:G||W}},k.map(w=>{const b=w.level,z=w.items,M=b===0?"center":"around",$=w.orientation;return l.createElement("div",{role:b===0?"tree":"group",id:s+"-"+b+"-"+w.ids[0],"aria-label":b===0?I:void 0,"aria-orientation":b===0?$:void 0,key:w.ids[0]+"_"+b,className:x.classNames("k-orgchart-group",`k-orgchart-level-${b}`,"k-pos-absolute",{[`k-${x.kendoThemeMaps.orientationMap[$]}`]:$,[`k-justify-content-${M}`]:M}),style:{width:w.width||"100%",left:w.left,top:w.top}},z.length>0&&l.createElement("div",{role:"group",style:{width:"100%"},className:x.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${x.kendoThemeMaps.orientationMap[w.orientation]}`]:w.orientation})},z.map((C,T)=>{const R=C[h]&&C[h].length||g&&C[g],U=R||w.orientation==="vertical"&&T!==z.length-1,J=w.orientation==="vertical"&&T!==0?0:c||_,q=w.childLineWidths?Math.max(...w.childLineWidths):void 0,Y=C[p];return l.createElement(ae,{id:s+"-"+(b+1)+"-"+C[m],style:{width:q},itemRender:D,cardHeight:a,cardWidth:o,verticalLine:J,key:T,level:b,avatar:C[u],title:C[E],subtitle:C[y],line:U,expanded:Y,node:C,childLineWidth:R&&Y&&w.orientation==="horizontal"?w.childLineWidths[T]:0,plus:R},C.text)})))}))};le.displayName="KendoServerOrgChart";const Je={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"},Ye=r=>{const{nodes:t,children:s,style:i,...e}=r,[n,o]=l.useState(!1),a=l.useContext(Z),c=l.useRef(null),m=u=>{a.onKeyDown&&a.onKeyDown({event:u,items:t})},h=u=>{a.onGroupAction&&a.onGroupAction({event:u,items:t})},g=u=>{o(!0),a.onGroupFocus&&a.onGroupFocus({event:u,items:t,containerRef:c})},p=u=>{o(!1),a.onGroupBlur&&a.onGroupBlur({event:u,items:t})};return l.createElement("div",{role:"treeitem","aria-selected":n,ref:c,className:x.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":n}),style:i,onKeyDown:m,onClick:h,onFocus:g,onBlur:p,...e},s)},et="k-orgchart-node-group",ye="k-orgchart-node-group-title",Ie="k-orgchart-node-group-subtitle",we=r=>{const t={orientation:"horizontal"},{id:s,title:i,subtitle:e,line:n,plus:o,focus:a,level:c,verticalLine:m,childLineWidth:h,orientation:g,expanded:p,nodes:u,groupTitleHeight:E,groupSubtitleHeight:y,groupTitleRender:I,groupSubtitleRender:D,...G}={...t,...r},k=I,W=D,w={height:E||ie},b={height:y||se};return l.createElement("div",{...G,className:x.classNames(r.className,et,"k-vstack","k-align-items-center")},c!==0&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:m}}),l.createElement(Ye,{nodes:u,"aria-expanded":!!p,"aria-keyshortcuts":"Enter","aria-level":c+1,"aria-owns":s},k?l.createElement(k,{style:w,className:ye,title:i,items:u,level:c,expanded:p}):l.createElement("div",{className:ye,style:w},i),W?l.createElement(W,{style:b,className:Ie,subtitle:e,items:u,level:c,expanded:p}):l.createElement("div",{className:Ie,style:b},e),l.createElement("div",{role:"group",style:{width:"100%"},className:x.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${x.kendoThemeMaps.orientationMap[g]||g}`]:g})},r.children)),n&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),o&&l.createElement(be,{expanded:p,nodes:u}),o&&!!h&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:h,marginTop:-15}}))},Fe=({dataByGroups:r,data:t=[],cardWidth:s,childrenField:i,idField:e,expandField:n,hasChildrenField:o,groupField:a,level:c=1,parentId:m=0})=>{t.forEach(h=>{const g=h[i];if(h[n]&&g&&g.length){const u=g.some(k=>k[i]&&k[i].length||o&&k[o]),E=u?"horizontal":"vertical",y=u?null:s+2*O,I=r.find(k=>k.parentId===m),D=r.find(k=>k.ids.includes(m));let G=!1;if(I){const k=I.ids[0],W=D.items.find(b=>b[e]===k),w=D.items.find(b=>b[e]===h[e]);G=W[a]===w[a]}I&&G?(I.ids.push(h[e]),I.items=I.items.concat(g)):r.push({ids:[h[e]],items:g,level:c,parentId:m,hasChildren:u,orientation:E,width:y}),Fe({dataByGroups:r,data:h[i],childrenField:i,cardWidth:s,idField:e,expandField:n,hasChildrenField:o,groupField:a,level:c+1,parentId:h[e]})}})},tt=(r,t)=>{const s=t||Ee,i=r.sort((e,n)=>n.level-e.level);i.forEach(e=>{if(!e.width){const n=i.filter(o=>e.ids.includes(o.parentId));if(n.length){const o=Math.max(...n.map(h=>h.width||0)),a=Math.max(...n.map(h=>h.groupedItems.length||0)),c=Math.max(...e.groupedItems.map(h=>{const g=e.orientation==="horizontal"?h.items.length:1;return g*(s+2*O)+O*(g-1)})),m=o*a+O*(a-1);e.width=Math.max(m,c)}else{const o=Math.max(...e.groupedItems.map(a=>{const c=e.orientation==="horizontal"?a.items.length:1;return c*(s+2*O)+O*(c-1)}));e.width=o}}})},nt=(r,t)=>{const s=r.sort((i,e)=>i.level-e.level);s.forEach(i=>{var g;if(i.level===0)return;const e=s.find(p=>p.ids.includes(i.parentId)),n=(e==null?void 0:e.groupedItems.findIndex(p=>p.items.some(u=>i.ids.includes(u[t]))))||0,o=(e==null?void 0:e.groupedItems)||[],a=e.width?(e.width-(o.length-1)*O)/o.length:0;if(!i.left){let p=(e==null?void 0:e.left)||0;o.forEach((u,E)=>{E<n&&(p+=a+O)}),i.left=p}const c=(e==null?void 0:e.width)||0,m=(e==null?void 0:e.groupedItems.length)||1,h=(c-(m-1)*O)/m;if(i.width=h,e){const p=i.width-(i.width-(i.groupedItems.length-1)*O)/i.groupedItems.length;e.childLineWidths?(g=e.childLineWidths)==null||g.push(p):e.childLineWidths=[p]}})},it=(r,t,s,i,e)=>{const n=t||j,o=e||_,a=s+i+ke;r.forEach(c=>{const m=c.level,h=(n+o+a)*m+_*(m?m-1:0)-(o-_)*(m?1:0);c.top=h})},st=(r,t,s,i,e)=>{const n=t||j,o=s||_,c=(i||ie)+(e||se)+ke;return Math.max(...r.map(h=>{const g=h.top||0,p=Math.max(...h.groupedItems.map(y=>y.items.length)),u=h.hasChildren?_:0,E=h.orientation==="horizontal"?n+o+c+o+u:p*(n+o)+c+o;return g+E}))},Le=r=>{const t={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal"},{id:s,width:i,data:e,groupField:n,cardWidth:o,cardHeight:a,groupTitleHeight:c,groupSubtitleHeight:m,verticalLine:h,idField:g,childrenField:p,expandField:u,hasChildrenField:E,avatarField:y,titleField:I,subtitleField:D,cardsColors:G,ariaLabel:k,itemRender:W,groupTitleRender:w,groupSubtitleRender:b,height:z}={...t,...r},M=[{items:e,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];Fe({dataByGroups:M,data:e,cardWidth:o,expandField:u,hasChildrenField:E,childrenField:p,idField:g,groupField:n}),M.map(C=>{C.groupedItems=De.groupBy(C.items,[{field:n}])}),tt(M,o),nt(M,g),it(M,a||j,c||ie,m||se,h);const $=st(M,a||j,c||ie,m||se);return React.createElement("div",{className:"k-orgchart-container",style:{width:i,height:z||$}},M.map(C=>{const T=C.level,R=C.groupedItems.map(A=>{const re=A.items.some(V=>V[u]);return{...A,expanded:re}}),U=R.filter(A=>A.expanded),J=T===0?"center":"around",q="horizontal",Y=G&&G[T]||"green";return React.createElement("div",{role:T===0?"tree":"group",id:s+"-"+T+"-"+C.ids[0],"aria-label":T===0?k:void 0,"aria-orientation":T===0?q:void 0,key:C.ids[0]+"_"+T,className:x.classNames("k-orgchart-group",`k-orgchart-level-${T}`,"k-pos-absolute",{[`k-${x.kendoThemeMaps.orientationMap[q]}`]:q,[`k-justify-content-${J}`]:J,"k-orgchart-group-h":r.groupField}),style:{width:C.width||"100%",left:C.left,top:C.top}},e.length>0&&R.map((A,re)=>{const V=A.items.some(L=>L[p]&&L[p].length||E&&L[E]),ue=C.width?(C.width-(R.length-1)*O)/R.length:void 0,ee=U.findIndex(L=>L===A);return React.createElement(we,{id:s+"-"+(T+1)+"-"+A.items[0][g],style:{width:ue},groupTitleHeight:c,groupSubtitleHeight:m,groupTitleRender:w,groupSubtitleRender:b,key:re,level:T,verticalLine:h||_,title:A.items[0][n||I],subtitle:n,orientation:C.orientation,childLineWidth:V&&A.expanded&&C.orientation==="horizontal"?C.childLineWidths[ee]:0,line:V,nodes:A.items,expanded:A.expanded,plus:V},A.items.map((L,me)=>React.createElement(ae,{cardHeight:a,cardWidth:o,itemRender:W,color:Y,key:me,level:T,avatar:L[y],title:L[I],subtitle:L[D],verticalLine:0,line:!1,node:L,childLineWidth:0,plus:!1},L.text)))}))}))};Le.displayName="KendoServerGroupedOrgChart";const ce=r=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...r},{cardsColors:s,onExpandChange:i,onKeyDown:e,onItemAction:n,onGroupAction:o,onGroupBlur:a,onGroupFocus:c,id:m,...h}=t,g=l.useRef(x.guid());return x.validatePackage(Je),l.createElement(oe,{...t},r.groupField?l.createElement(Le,{id:m||g.current,...h},r.children):l.createElement(le,{id:m||g.current,...h},r.children))};ce.propTypes={className:d.string,style:d.object,id:d.string,ariaLabel:d.string,idField:d.string,childrenField:d.string,expandField:d.string,titleField:d.string,hasChildrenField:d.string,subtitleField:d.string,avatarField:d.string,cardsColors:d.array,data:d.array,groupField:d.string,cardHeight:d.number,cardWidth:d.number,groupTitleHeight:d.number,groupSubtitleHeight:d.number,verticalLine:d.number,height:d.oneOfType([d.string,d.number]),onExpandChange:d.func,onItemAction:d.func,onGroupAction:d.func},ce.displayName="KendoOrgChart";function rt(r,t){if(!r||!r.length)return[];let s=r;const i=t.cloneField||"cloned",e=t.expandField||Pe,n=t.selectField||Be,o=t.checkField||Ce,a=t.childrenField||Ke;return s=de(s,e,t.expand,i,a),s=de(s,n,t.select,i,a),s=de(s,o,t.check,i,a),at(s,a,t.check),s}function de(r,t,s,i,e){if(s){const{ids:n,field:o}=Ne(s,t),a=!x.isArray(s)&&s.idField?x.resolveItemsIds(n,s.idField,r,e):n;return ot(r,a,o,i,e)}else return r}function Ne(r,t){let s,i;return x.isArray(r)?(s=r,i=t):(s=r.ids||[],i=r.operationField||t),{ids:s,field:i}}function ot(r,t,s,i,e){let n=r;return t.forEach(o=>{n=x.updateItem(n,o,a=>Te(s,a),i,e)}),n}function Te(r,t){const s=(r||"").split(".");let i=t;for(let e=0;e<s.length;e++){const n=s[e];if(e===s.length-1)i[n]=!0;else if(i[n]!==void 0)i[n]={...i[n]},i=i[n];else return}}function at(r,t,s){if(s&&!x.isArray(s)&&s.applyCheckIndeterminate){const{field:i}=Ne(s,Ce),e=s.checkIndeterminateField||je;for(let n=0;n<r.length;n++){const o=r[n],a=o[t];a&&he(a,x.getNestedValue(i,o)?[]:[o],t,i,e)}}}function he(r,t,s,i,e){let n=!1;for(let o=0;o<r.length;o++){const a=r[o];if(x.getNestedValue(i,a)){if(!n)for(let c=0;c<t.length;c++)Te(e,t[c]);n=!0,a[s]&&he(a[s],[],s,i,e)}else a[s]&&he(a[s],n?[a]:t.concat([a]),s,i,e)}}N.OrgChart=ce,N.ServerOrgChart=le,N.ServerOrgChartGroup=we,N.ServerOrgChartNode=ae,N.processOrgChartItems=rt,Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})});
+`;class We{getSeriesColors(){const t=this.element,s=[].slice.call(t.querySelectorAll(".k-var--series div")),i=ve(t.querySelector(".k-var--series-unset"));return s.reduce((n,o)=>{const a=Ge(o.className),c=ve(o);return c!==i&&(n[a]=c),n},[])}}const Pe=(r,t)=>{const s=new We,i=s.element=t.createElement("div");i.style.display="none",i.innerHTML=Me,t.body.appendChild(i);let e;try{e=s.getSeriesColors()}finally{t.body.removeChild(s.element),delete s.element,r(e)}},Re="expanded",Ke="items",Be="selected",Ce="checked",je="checkIndeterminate",ze="k-orgchart",j=80,Ee=300,O=25,_=40,ie=20,se=20,ke=82,Z=l.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}),oe=r=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...r},{navigatable:s,id:i,tabIndex:e,className:n,style:o,data:a,groupField:c,cardWidth:m,cardHeight:h,groupTitleHeight:g,groupSubtitleHeight:p,verticalLine:u,idField:E,childrenField:y,expandField:I,hasChildrenField:D,avatarField:G,titleField:k,subtitleField:W,onExpandChange:w,onItemAction:b,onItemDoubleClick:z,onItemContextMenu:M,onKeyDown:$,onGroupAction:C,onGroupBlur:T,onGroupFocus:P,cardsColors:U,ariaLabel:J,itemRender:q,groupTitleRender:Y,groupSubtitleRender:A,height:re,children:V,...ue}=t,ee=l.useRef(null),L=l.useRef(new x.Navigation({tabIndex:e,root:ee,selectors:[t.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[me,lt]=l.useState([]),K=l.useRef(null),ct=(f,v,S)=>{S.preventDefault(),v.focusNext(f)},dt=(f,v,S)=>{S.preventDefault(),v.focusPrevious(f)},ht=(f,v,S,F)=>{var R;if(S.preventDefault(),(t.groupField?F.items.some(te=>te[t.expandField]):F.item[t.expandField])&&t.onExpandChange)t.onExpandChange.call(void 0,F);else{const te=".k-orgchart-group",ge=(R=f.closest(te))==null?void 0:R.getAttribute("id"),ne=document.querySelector(`[aria-owns="${ge}"]`);ne?v.focusElement(ne,f):v.focusPrevious(f)}},ut=(f,v,S,F)=>{var ne;S.preventDefault();const H=t.groupField?F.items.some(B=>B[t.expandField]):F.item[t.expandField],R=t.groupField?F.items.find(B=>B[t.childrenField]):F.item[t.childrenField],te=t.groupField?F.items.some(B=>t.hasChildrenField&&B[t.hasChildrenField]):t.hasChildrenField&&F.item[t.hasChildrenField],ge=t.groupField?R&&R[t.childrenField]&&R[t.childrenField].length:R&&R.length;if((te||ge)&&!H&&t.onExpandChange)t.onExpandChange.call(void 0,F);else{const B=t.groupField?".k-orgchart-node-group-container":".k-orgchart-card",It=f.getAttribute("aria-owns"),Oe=(ne=document.getElementById(It))==null?void 0:ne.querySelector(B);Oe?v.focusElement(Oe,f):v.focusNext(f)}},mt=(f,v,S)=>{S.preventDefault(),v.focusElement(v.first,null)},gt=(f,v,S)=>{S.preventDefault(),v.focusElement(v.last,null)},pt=(f,v,S,F)=>{S.stopPropagation();const H=f.className.indexOf("k-orgchart-node-group-container")!==-1;if(r.groupField&&H){K.current&&K.current.first&&K.current.focusElement(K.current.first,null);return}t.onItemAction&&t.onItemAction({event:S,item:F.item})},ft=f=>{if(r.groupField){const v=f.closest(".k-orgchart-node-group-container");v&&L.current.focusElement(v,null)}};l.useEffect(()=>{if(s&&L.current.first&&L.current.first.setAttribute("tabindex",String(e)),!U){const f=ee.current.ownerDocument||document;Pe(v=>{lt(v)},f)}},[s,e]);const vt=f=>{if(t.navigatable){const v=f.event,S=v.key===" "?"Space":v.key,F=r.groupField&&v.target.className.indexOf("k-orgchart-card")!==-1&&K.current||L.current,H=v.target.closest(F.selectors.join(","));switch(S){case"ArrowUp":ht(H,F,v,f);break;case"ArrowDown":ut(H,F,v,f);break;case"ArrowLeft":dt(H,F,v);break;case"ArrowRight":ct(H,F,v);break;case"End":gt(H,F,v);break;case"Home":mt(H,F,v);break;case"Enter":pt(H,F,v,f);break;case"Escape":ft(H);break}}},Ct=f=>{if(f.event.stopPropagation(),b&&b.call(void 0,f),t.navigatable){const v=f.event.target.closest(".k-orgchart-card");v&&L.current.focusElement(v,null)}},Et=f=>{f.event.stopPropagation(),b&&b.call(void 0,f)},kt=f=>{f.event.stopPropagation(),b&&b.call(void 0,f)},bt=f=>{if(C&&C.call(void 0,f),t.navigatable){const v=f.event.target.closest(".k-orgchart-node-group-container");v&&L.current.focusElement(v,null)}},xt=f=>{K.current=null},yt=f=>{K.current=new x.Navigation({tabIndex:0,root:f.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})};return l.createElement("div",{style:o,ref:ee,className:x.classNames(n,ze)},l.createElement(Z.Provider,{value:{cardColors:U||me,onExpandChange:r.onExpandChange,onKeyDown:vt,onItemAction:Ct,onItemDoubleClick:kt,onItemContextMenu:Et,onGroupAction:bt,onGroupBlur:xt,onGroupFocus:yt},...ue},r.children))};oe.propTypes={className:d.string,style:d.object,id:d.string,ariaLabel:d.string,idField:d.string,childrenField:d.string,expandField:d.string,titleField:d.string,hasChildrenField:d.string,subtitleField:d.string,avatarField:d.string,cardsColors:d.array,data:d.array,groupField:d.string,cardHeight:d.number,cardWidth:d.number,groupTitleHeight:d.number,groupSubtitleHeight:d.number,verticalLine:d.number,height:d.oneOfType([d.string,d.number]),onExpandChange:d.func,onItemAction:d.func,onItemDoubleClick:d.func,onItemContextMenu:d.func,onGroupAction:d.func},oe.displayName="KendoClientOrgChart";const be=r=>{const{expanded:t,node:s,nodes:i}=r,e=l.useContext(Z),n=o=>{e.onExpandChange&&e.onExpandChange.call(void 0,{event:o,expand:!t,item:s,items:i})};return l.createElement(Se.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?pe.minusIcon:pe.plusIcon,"aria-label":t?"collapse":"expand",onClick:n})},$e=r=>{const{node:t,children:s,style:i,...e}=r,[n,o]=l.useState(!1),a=l.useContext(Z),c=p=>{a.onKeyDown&&a.onKeyDown.call(void 0,{event:p,item:t})},m=p=>{a.onItemAction&&a.onItemAction.call(void 0,{event:p,item:t})},h=p=>{a.onItemContextMenu&&a.onItemContextMenu.call(void 0,{event:p,item:t})},g=p=>{a.onItemDoubleClick&&a.onItemDoubleClick.call(void 0,{event:p,item:t})};return l.createElement(X.Card,{role:"treeitem",className:x.classNames("k-orgchart-card",{"k-focus":n}),onClick:m,onKeyDown:c,onContextMenu:h,onDoubleClick:g,style:i,"aria-selected":n,"aria-keyshortcuts":"Enter",onFocus:()=>o(!0),onBlur:()=>o(!1),...e},s)},Ue=r=>{const{level:t,children:s}=r,i=l.useContext(Z),e=i.cardColors&&i.cardColors[t]||"green";return l.createElement(X.CardBody,{className:"k-hstack",style:{borderTopColor:e}},s)},qe="k-orgchart-node",ae=r=>{const t={avatarType:"image"},{id:s,title:i,subtitle:e,level:n,childLineWidth:o,cardWidth:a,cardHeight:c,verticalLine:m,color:h,line:g,plus:p,expanded:u,node:E,avatar:y,avatarType:I,itemRender:D,...G}={...r,...t},k=D;return l.createElement("div",{...G,className:x.classNames(r.className,qe,"k-vstack","k-align-items-center")},n!==0&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:m}}),l.createElement($e,{node:E,style:{width:a,height:c},"aria-level":n+1,"aria-expanded":!!u,"aria-owns":s},l.createElement(Ue,{level:n},k?l.createElement(k,{item:E,title:i,subtitle:e,level:n,expanded:u,color:h}):l.createElement(l.Fragment,null,l.createElement(X.Avatar,{type:I,themeColor:"secondary"},I==="image"?l.createElement("img",{src:y,alt:"KendoReact Avatar Customer Image"}):y),l.createElement("div",{className:"k-card-title-wrap k-vstack"},l.createElement(X.CardTitle,{className:"k-text-ellipsis"},i),l.createElement("span",{className:"k-spacer"}),l.createElement(X.CardSubtitle,{className:"k-text-ellipsis"},e)),l.createElement("span",{className:"k-spacer"})))),g&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),p&&l.createElement(be,{expanded:u,node:E}),p&&!!o&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:o,marginTop:-15}}))},xe=({dataByGroups:r,data:t=[],cardWidth:s,childrenField:i,idField:e,expandField:n,hasChildrenField:o,groupField:a,level:c=1,parentId:m=0})=>{t.forEach(h=>{const g=h[i];if(h[n]&&g&&g.length){const u=g.some(I=>I[i]&&I[i].length||o&&I[o]),E=u?"horizontal":"vertical",y=u?null:s;r.push({ids:[h[e]],items:g,level:c,parentId:m,hasChildren:u,orientation:E,width:y}),xe({dataByGroups:r,data:h[i],childrenField:i,cardWidth:s,idField:e,expandField:n,hasChildrenField:o,groupField:a,level:c+1,parentId:h[e]})}})},Ve=(r,t)=>{const s=t||Ee,i=r.sort((e,n)=>n.level-e.level);i.forEach(e=>{if(!e.width){const n=i.filter(m=>e.ids.includes(m.parentId)),o=n.length?Math.max(...n.map(m=>m.width||0)):s,a=e.orientation==="horizontal"?e.items.length:1,c=o*a+O*(a-1);e.width=c}})},Qe=(r,t,s)=>{const i=r.sort((e,n)=>e.level-n.level);i.forEach(e=>{if(e.level===0)return;const n=i.find(u=>u.ids.includes(e.parentId)),o=(n==null?void 0:n.items.findIndex(u=>e.ids.includes(u[s])))||0,a=(n==null?void 0:n.items)||[],c=n.width?(n.width-(a.length-1)*O)/a.length:0;if(!e.left){let u=(n==null?void 0:n.left)||0;a.forEach((E,y)=>{y<o&&(u+=c+O)}),e.left=u}const m=(n==null?void 0:n.width)||0,h=(n==null?void 0:n.items.length)||1,g=(m-(h-1)*O)/h;e.width=g;const p=n==null?void 0:n.items.map(u=>{const E=u[t]?u[t].length:0,y=i.find(D=>D.ids.includes(u[s])),I=(y==null?void 0:y.width)||0;return(y==null?void 0:y.orientation)==="vertical"||E===0||!u.expanded?0:I-(I-(E-1)*O)/E});n&&(n.childLineWidths=p)})},Xe=(r,t,s)=>{const i=t||j,e=s||_;r.forEach(n=>{const o=n.level,a=(i+e)*o+_*(o?o-1:0)-(e-_)*(o?1:0);n.top=a})},Ze=(r,t,s)=>{const i=t||j,e=s||_;return Math.max(...r.map(o=>{const a=o.top||0,c=o.items.length,m=o.orientation==="horizontal"?i+e+e:c*(i+e);return a+m}))},le=r=>{const t={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded"},{id:s,width:i,data:e,groupField:n,cardWidth:o,cardHeight:a,verticalLine:c,idField:m,childrenField:h,hasChildrenField:g,expandField:p,avatarField:u,titleField:E,subtitleField:y,ariaLabel:I,itemRender:D,height:G}={...t,...r},k=[{items:e,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];xe({dataByGroups:k,data:e,cardWidth:o,expandField:p,hasChildrenField:g,childrenField:h,idField:m,groupField:n}),Ve(k,o),Qe(k,h,m),Xe(k,a,c);const W=Ze(k,a,c);return l.createElement("div",{className:"k-orgchart-container",style:{width:i,height:G||W}},k.map(w=>{const b=w.level,z=w.items,M=b===0?"center":"around",$=w.orientation;return l.createElement("div",{role:b===0?"tree":"group",id:s+"-"+b+"-"+w.ids[0],"aria-label":b===0?I:void 0,"aria-orientation":b===0?$:void 0,key:w.ids[0]+"_"+b,className:x.classNames("k-orgchart-group",`k-orgchart-level-${b}`,"k-pos-absolute",{[`k-${x.kendoThemeMaps.orientationMap[$]}`]:$,[`k-justify-content-${M}`]:M}),style:{width:w.width||"100%",left:w.left,top:w.top}},z.length>0&&l.createElement("div",{role:"group",style:{width:"100%"},className:x.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${x.kendoThemeMaps.orientationMap[w.orientation]}`]:w.orientation})},z.map((C,T)=>{const P=C[h]&&C[h].length||g&&C[g],U=P||w.orientation==="vertical"&&T!==z.length-1,J=w.orientation==="vertical"&&T!==0?0:c||_,q=w.childLineWidths?Math.max(...w.childLineWidths):void 0,Y=C[p];return l.createElement(ae,{id:s+"-"+(b+1)+"-"+C[m],style:{width:q},itemRender:D,cardHeight:a,cardWidth:o,verticalLine:J,key:T,level:b,avatar:C[u],title:C[E],subtitle:C[y],line:U,expanded:Y,node:C,childLineWidth:P&&Y&&w.orientation==="horizontal"?w.childLineWidths[T]:0,plus:P},C.text)})))}))};le.displayName="KendoServerOrgChart";const Je={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"},Ye=r=>{const{nodes:t,children:s,style:i,...e}=r,[n,o]=l.useState(!1),a=l.useContext(Z),c=l.useRef(null),m=u=>{a.onKeyDown&&a.onKeyDown({event:u,items:t})},h=u=>{a.onGroupAction&&a.onGroupAction({event:u,items:t})},g=u=>{o(!0),a.onGroupFocus&&a.onGroupFocus({event:u,items:t,containerRef:c})},p=u=>{o(!1),a.onGroupBlur&&a.onGroupBlur({event:u,items:t})};return l.createElement("div",{role:"treeitem","aria-selected":n,ref:c,className:x.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":n}),style:i,onKeyDown:m,onClick:h,onFocus:g,onBlur:p,...e},s)},et="k-orgchart-node-group",ye="k-orgchart-node-group-title",Ie="k-orgchart-node-group-subtitle",we=r=>{const t={orientation:"horizontal"},{id:s,title:i,subtitle:e,line:n,plus:o,focus:a,level:c,verticalLine:m,childLineWidth:h,orientation:g,expanded:p,nodes:u,groupTitleHeight:E,groupSubtitleHeight:y,groupTitleRender:I,groupSubtitleRender:D,...G}={...t,...r},k=I,W=D,w={height:E||ie},b={height:y||se};return l.createElement("div",{...G,className:x.classNames(r.className,et,"k-vstack","k-align-items-center")},c!==0&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:m}}),l.createElement(Ye,{nodes:u,"aria-expanded":!!p,"aria-keyshortcuts":"Enter","aria-level":c+1,"aria-owns":s},k?l.createElement(k,{style:w,className:ye,title:i,items:u,level:c,expanded:p}):l.createElement("div",{className:ye,style:w},i),W?l.createElement(W,{style:b,className:Ie,subtitle:e,items:u,level:c,expanded:p}):l.createElement("div",{className:Ie,style:b},e),l.createElement("div",{role:"group",style:{width:"100%"},className:x.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${x.kendoThemeMaps.orientationMap[g]||g}`]:g})},r.children)),n&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),o&&l.createElement(be,{expanded:p,nodes:u}),o&&!!h&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:h,marginTop:-15}}))},Fe=({dataByGroups:r,data:t=[],cardWidth:s,childrenField:i,idField:e,expandField:n,hasChildrenField:o,groupField:a,level:c=1,parentId:m=0})=>{t.forEach(h=>{const g=h[i];if(h[n]&&g&&g.length){const u=g.some(k=>k[i]&&k[i].length||o&&k[o]),E=u?"horizontal":"vertical",y=u?null:s+2*O,I=r.find(k=>k.parentId===m),D=r.find(k=>k.ids.includes(m));let G=!1;if(I){const k=I.ids[0],W=D.items.find(b=>b[e]===k),w=D.items.find(b=>b[e]===h[e]);G=W[a]===w[a]}I&&G?(I.ids.push(h[e]),I.items=I.items.concat(g)):r.push({ids:[h[e]],items:g,level:c,parentId:m,hasChildren:u,orientation:E,width:y}),Fe({dataByGroups:r,data:h[i],childrenField:i,cardWidth:s,idField:e,expandField:n,hasChildrenField:o,groupField:a,level:c+1,parentId:h[e]})}})},tt=(r,t)=>{const s=t||Ee,i=r.sort((e,n)=>n.level-e.level);i.forEach(e=>{if(!e.width){const n=i.filter(o=>e.ids.includes(o.parentId));if(n.length){const o=Math.max(...n.map(h=>h.width||0)),a=Math.max(...n.map(h=>h.groupedItems.length||0)),c=Math.max(...e.groupedItems.map(h=>{const g=e.orientation==="horizontal"?h.items.length:1;return g*(s+2*O)+O*(g-1)})),m=o*a+O*(a-1);e.width=Math.max(m,c)}else{const o=Math.max(...e.groupedItems.map(a=>{const c=e.orientation==="horizontal"?a.items.length:1;return c*(s+2*O)+O*(c-1)}));e.width=o}}})},nt=(r,t)=>{const s=r.sort((i,e)=>i.level-e.level);s.forEach(i=>{var g;if(i.level===0)return;const e=s.find(p=>p.ids.includes(i.parentId)),n=(e==null?void 0:e.groupedItems.findIndex(p=>p.items.some(u=>i.ids.includes(u[t]))))||0,o=(e==null?void 0:e.groupedItems)||[],a=e.width?(e.width-(o.length-1)*O)/o.length:0;if(!i.left){let p=(e==null?void 0:e.left)||0;o.forEach((u,E)=>{E<n&&(p+=a+O)}),i.left=p}const c=(e==null?void 0:e.width)||0,m=(e==null?void 0:e.groupedItems.length)||1,h=(c-(m-1)*O)/m;if(i.width=h,e){const p=i.width-(i.width-(i.groupedItems.length-1)*O)/i.groupedItems.length;e.childLineWidths?(g=e.childLineWidths)==null||g.push(p):e.childLineWidths=[p]}})},it=(r,t,s,i,e)=>{const n=t||j,o=e||_,a=s+i+ke;r.forEach(c=>{const m=c.level,h=(n+o+a)*m+_*(m?m-1:0)-(o-_)*(m?1:0);c.top=h})},st=(r,t,s,i,e)=>{const n=t||j,o=s||_,c=(i||ie)+(e||se)+ke;return Math.max(...r.map(h=>{const g=h.top||0,p=Math.max(...h.groupedItems.map(y=>y.items.length)),u=h.hasChildren?_:0,E=h.orientation==="horizontal"?n+o+c+o+u:p*(n+o)+c+o;return g+E}))},Le=r=>{const t={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal"},{id:s,width:i,data:e,groupField:n,cardWidth:o,cardHeight:a,groupTitleHeight:c,groupSubtitleHeight:m,verticalLine:h,idField:g,childrenField:p,expandField:u,hasChildrenField:E,avatarField:y,titleField:I,subtitleField:D,cardsColors:G,ariaLabel:k,itemRender:W,groupTitleRender:w,groupSubtitleRender:b,height:z}={...t,...r},M=[{items:e,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];Fe({dataByGroups:M,data:e,cardWidth:o,expandField:u,hasChildrenField:E,childrenField:p,idField:g,groupField:n}),M.map(C=>{C.groupedItems=De.groupBy(C.items,[{field:n}])}),tt(M,o),nt(M,g),it(M,a||j,c||ie,m||se,h);const $=st(M,a||j,c||ie,m||se);return l.createElement("div",{className:"k-orgchart-container",style:{width:i,height:z||$}},M.map(C=>{const T=C.level,P=C.groupedItems.map(A=>{const re=A.items.some(V=>V[u]);return{...A,expanded:re}}),U=P.filter(A=>A.expanded),J=T===0?"center":"around",q="horizontal",Y=G&&G[T]||"green";return l.createElement("div",{role:T===0?"tree":"group",id:s+"-"+T+"-"+C.ids[0],"aria-label":T===0?k:void 0,"aria-orientation":T===0?q:void 0,key:C.ids[0]+"_"+T,className:x.classNames("k-orgchart-group",`k-orgchart-level-${T}`,"k-pos-absolute",{[`k-${x.kendoThemeMaps.orientationMap[q]}`]:q,[`k-justify-content-${J}`]:J,"k-orgchart-group-h":r.groupField}),style:{width:C.width||"100%",left:C.left,top:C.top}},e.length>0&&P.map((A,re)=>{const V=A.items.some(L=>L[p]&&L[p].length||E&&L[E]),ue=C.width?(C.width-(P.length-1)*O)/P.length:void 0,ee=U.findIndex(L=>L===A);return l.createElement(we,{id:s+"-"+(T+1)+"-"+A.items[0][g],style:{width:ue},groupTitleHeight:c,groupSubtitleHeight:m,groupTitleRender:w,groupSubtitleRender:b,key:re,level:T,verticalLine:h||_,title:A.items[0][n||I],subtitle:n,orientation:C.orientation,childLineWidth:V&&A.expanded&&C.orientation==="horizontal"?C.childLineWidths[ee]:0,line:V,nodes:A.items,expanded:A.expanded,plus:V},A.items.map((L,me)=>l.createElement(ae,{cardHeight:a,cardWidth:o,itemRender:W,color:Y,key:me,level:T,avatar:L[y],title:L[I],subtitle:L[D],verticalLine:0,line:!1,node:L,childLineWidth:0,plus:!1},L.text)))}))}))};Le.displayName="KendoServerGroupedOrgChart";const ce=r=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...r},{cardsColors:s,onExpandChange:i,onKeyDown:e,onItemAction:n,onGroupAction:o,onGroupBlur:a,onGroupFocus:c,id:m,...h}=t,g=l.useRef(x.guid());return x.validatePackage(Je),l.createElement(oe,{...t},r.groupField?l.createElement(Le,{id:m||g.current,...h},r.children):l.createElement(le,{id:m||g.current,...h},r.children))};ce.propTypes={className:d.string,style:d.object,id:d.string,ariaLabel:d.string,idField:d.string,childrenField:d.string,expandField:d.string,titleField:d.string,hasChildrenField:d.string,subtitleField:d.string,avatarField:d.string,cardsColors:d.array,data:d.array,groupField:d.string,cardHeight:d.number,cardWidth:d.number,groupTitleHeight:d.number,groupSubtitleHeight:d.number,verticalLine:d.number,height:d.oneOfType([d.string,d.number]),onExpandChange:d.func,onItemAction:d.func,onGroupAction:d.func},ce.displayName="KendoOrgChart";function rt(r,t){if(!r||!r.length)return[];let s=r;const i=t.cloneField||"cloned",e=t.expandField||Re,n=t.selectField||Be,o=t.checkField||Ce,a=t.childrenField||Ke;return s=de(s,e,t.expand,i,a),s=de(s,n,t.select,i,a),s=de(s,o,t.check,i,a),at(s,a,t.check),s}function de(r,t,s,i,e){if(s){const{ids:n,field:o}=Ne(s,t),a=!x.isArray(s)&&s.idField?x.resolveItemsIds(n,s.idField,r,e):n;return ot(r,a,o,i,e)}else return r}function Ne(r,t){let s,i;return x.isArray(r)?(s=r,i=t):(s=r.ids||[],i=r.operationField||t),{ids:s,field:i}}function ot(r,t,s,i,e){let n=r;return t.forEach(o=>{n=x.updateItem(n,o,a=>Te(s,a),i,e)}),n}function Te(r,t){const s=(r||"").split(".");let i=t;for(let e=0;e<s.length;e++){const n=s[e];if(e===s.length-1)i[n]=!0;else if(i[n]!==void 0)i[n]={...i[n]},i=i[n];else return}}function at(r,t,s){if(s&&!x.isArray(s)&&s.applyCheckIndeterminate){const{field:i}=Ne(s,Ce),e=s.checkIndeterminateField||je;for(let n=0;n<r.length;n++){const o=r[n],a=o[t];a&&he(a,x.getNestedValue(i,o)?[]:[o],t,i,e)}}}function he(r,t,s,i,e){let n=!1;for(let o=0;o<r.length;o++){const a=r[o];if(x.getNestedValue(i,a)){if(!n)for(let c=0;c<t.length;c++)Te(e,t[c]);n=!0,a[s]&&he(a[s],[],s,i,e)}else a[s]&&he(a[s],n?[a]:t.concat([a]),s,i,e)}}N.OrgChart=ce,N.ServerOrgChart=le,N.ServerOrgChartGroup=we,N.ServerOrgChartNode=ae,N.processOrgChartItems=rt,Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})});

package/index.js

@@ -15,4 +15,4 @@
     <div class="k-var--series">
       ${Ye()}
     </div>
-`;class tt{getSeriesColors(){const t=this.element,o=[].slice.call(t.querySelectorAll(".k-var--series div")),i=ve(t.querySelector(".k-var--series-unset"));return o.reduce((n,r)=>{const a=Ze(r.className),c=ve(r);return c!==i&&(n[a]=c),n},[])}}const nt=(s,t)=>{const o=new tt,i=o.element=t.createElement("div");i.style.display="none",i.innerHTML=et,t.body.appendChild(i);let e;try{e=o.getSeriesColors()}finally{t.body.removeChild(o.element),delete o.element,s(e)}},it="expanded",ot="items",st="selected",ke="checked",rt="checkIndeterminate",at="k-orgchart",q=80,Ee=300,T=25,G=40,ne=20,ie=20,be=82,ee=l.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}),ce=s=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...s},{navigatable:o,id:i,tabIndex:e,className:n,style:r,data:a,groupField:c,cardWidth:m,cardHeight:d,groupTitleHeight:g,groupSubtitleHeight:v,verticalLine:u,idField:k,childrenField:x,expandField:I,hasChildrenField:R,avatarField:D,titleField:E,subtitleField:_,onExpandChange:y,onItemAction:b,onItemDoubleClick:B,onItemContextMenu:H,onKeyDown:z,onGroupAction:C,onGroupBlur:N,onGroupFocus:M,cardsColors:$,ariaLabel:V,itemRender:j,groupTitleRender:Q,groupSubtitleRender:S,height:te,children:U,...oe}=t,X=l.useRef(null),L=l.useRef(new w.Navigation({tabIndex:e,root:X,selectors:[t.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[se,Oe]=l.useState([]),P=l.useRef(null),Te=(f,p,O)=>{O.preventDefault(),p.focusNext(f)},Se=(f,p,O)=>{O.preventDefault(),p.focusPrevious(f)},Re=(f,p,O,F)=>{var W;if(O.preventDefault(),(t.groupField?F.items.some(Z=>Z[t.expandField]):F.item[t.expandField])&&t.onExpandChange)t.onExpandChange.call(void 0,F);else{const Z=".k-orgchart-group",re=(W=f.closest(Z))==null?void 0:W.getAttribute("id"),J=document.querySelector(`[aria-owns="${re}"]`);J?p.focusElement(J,f):p.focusPrevious(f)}},Ae=(f,p,O,F)=>{var J;O.preventDefault();const A=t.groupField?F.items.some(K=>K[t.expandField]):F.item[t.expandField],W=t.groupField?F.items.find(K=>K[t.childrenField]):F.item[t.childrenField],Z=t.groupField?F.items.some(K=>t.hasChildrenField&&K[t.hasChildrenField]):t.hasChildrenField&&F.item[t.hasChildrenField],re=t.groupField?W&&W[t.childrenField]&&W[t.childrenField].length:W&&W.length;if((Z||re)&&!A&&t.onExpandChange)t.onExpandChange.call(void 0,F);else{const K=t.groupField?".k-orgchart-node-group-container":".k-orgchart-card",je=f.getAttribute("aria-owns"),me=(J=document.getElementById(je))==null?void 0:J.querySelector(K);me?p.focusElement(me,f):p.focusNext(f)}},De=(f,p,O)=>{O.preventDefault(),p.focusElement(p.first,null)},He=(f,p,O)=>{O.preventDefault(),p.focusElement(p.last,null)},Ge=(f,p,O,F)=>{O.stopPropagation();const A=f.className.indexOf("k-orgchart-node-group-container")!==-1;if(s.groupField&&A){P.current&&P.current.first&&P.current.focusElement(P.current.first,null);return}t.onItemAction&&t.onItemAction({event:O,item:F.item})},_e=f=>{if(s.groupField){const p=f.closest(".k-orgchart-node-group-container");p&&L.current.focusElement(p,null)}};l.useEffect(()=>{if(o&&L.current.first&&L.current.first.setAttribute("tabindex",String(e)),!$){const f=X.current.ownerDocument||document;nt(p=>{Oe(p)},f)}},[o,e]);const Me=f=>{if(t.navigatable){const p=f.event,O=p.key===" "?"Space":p.key,F=s.groupField&&p.target.className.indexOf("k-orgchart-card")!==-1&&P.current||L.current,A=p.target.closest(F.selectors.join(","));switch(O){case"ArrowUp":Re(A,F,p,f);break;case"ArrowDown":Ae(A,F,p,f);break;case"ArrowLeft":Se(A,F,p);break;case"ArrowRight":Te(A,F,p);break;case"End":He(A,F,p);break;case"Home":De(A,F,p);break;case"Enter":Ge(A,F,p,f);break;case"Escape":_e(A);break}}},We=f=>{if(f.event.stopPropagation(),b&&b.call(void 0,f),t.navigatable){const p=f.event.target.closest(".k-orgchart-card");p&&L.current.focusElement(p,null)}},Pe=f=>{f.event.stopPropagation(),b&&b.call(void 0,f)},Ke=f=>{f.event.stopPropagation(),b&&b.call(void 0,f)},Be=f=>{if(C&&C.call(void 0,f),t.navigatable){const p=f.event.target.closest(".k-orgchart-node-group-container");p&&L.current.focusElement(p,null)}},ze=f=>{P.current=null},$e=f=>{P.current=new w.Navigation({tabIndex:0,root:f.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})};return l.createElement("div",{style:r,ref:X,className:w.classNames(n,at)},l.createElement(ee.Provider,{value:{cardColors:$||se,onExpandChange:s.onExpandChange,onKeyDown:Me,onItemAction:We,onItemDoubleClick:Ke,onItemContextMenu:Pe,onGroupAction:Be,onGroupBlur:ze,onGroupFocus:$e},...oe},s.children))};ce.propTypes={className:h.string,style:h.object,id:h.string,ariaLabel:h.string,idField:h.string,childrenField:h.string,expandField:h.string,titleField:h.string,hasChildrenField:h.string,subtitleField:h.string,avatarField:h.string,cardsColors:h.array,data:h.array,groupField:h.string,cardHeight:h.number,cardWidth:h.number,groupTitleHeight:h.number,groupSubtitleHeight:h.number,verticalLine:h.number,height:h.oneOfType([h.string,h.number]),onExpandChange:h.func,onItemAction:h.func,onItemDoubleClick:h.func,onItemContextMenu:h.func,onGroupAction:h.func};ce.displayName="KendoClientOrgChart";const xe=s=>{const{expanded:t,node:o,nodes:i}=s,e=l.useContext(ee),n=r=>{e.onExpandChange&&e.onExpandChange.call(void 0,{event:r,expand:!t,item:o,items:i})};return l.createElement(qe.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?ge.minusIcon:ge.plusIcon,"aria-label":t?"collapse":"expand",onClick:n})},lt=s=>{const{node:t,children:o,style:i,...e}=s,[n,r]=l.useState(!1),a=l.useContext(ee),c=v=>{a.onKeyDown&&a.onKeyDown.call(void 0,{event:v,item:t})},m=v=>{a.onItemAction&&a.onItemAction.call(void 0,{event:v,item:t})},d=v=>{a.onItemContextMenu&&a.onItemContextMenu.call(void 0,{event:v,item:t})},g=v=>{a.onItemDoubleClick&&a.onItemDoubleClick.call(void 0,{event:v,item:t})};return l.createElement(Y.Card,{role:"treeitem",className:w.classNames("k-orgchart-card",{"k-focus":n}),onClick:m,onKeyDown:c,onContextMenu:d,onDoubleClick:g,style:i,"aria-selected":n,"aria-keyshortcuts":"Enter",onFocus:()=>r(!0),onBlur:()=>r(!1),...e},o)},ct=s=>{const{level:t,children:o}=s,i=l.useContext(ee),e=i.cardColors&&i.cardColors[t]||"green";return l.createElement(Y.CardBody,{className:"k-hstack",style:{borderTopColor:e}},o)},dt="k-orgchart-node",de=s=>{const t={avatarType:"image"},{id:o,title:i,subtitle:e,level:n,childLineWidth:r,cardWidth:a,cardHeight:c,verticalLine:m,color:d,line:g,plus:v,expanded:u,node:k,avatar:x,avatarType:I,itemRender:R,...D}={...s,...t},E=R;return l.createElement("div",{...D,className:w.classNames(s.className,dt,"k-vstack","k-align-items-center")},n!==0&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:m}}),l.createElement(lt,{node:k,style:{width:a,height:c},"aria-level":n+1,"aria-expanded":!!u,"aria-owns":o},l.createElement(ct,{level:n},E?l.createElement(E,{item:k,title:i,subtitle:e,level:n,expanded:u,color:d}):l.createElement(l.Fragment,null,l.createElement(Y.Avatar,{type:I,themeColor:"secondary"},I==="image"?l.createElement("img",{src:x,alt:"KendoReact Avatar Customer Image"}):x),l.createElement("div",{className:"k-card-title-wrap k-vstack"},l.createElement(Y.CardTitle,{className:"k-text-ellipsis"},i),l.createElement("span",{className:"k-spacer"}),l.createElement(Y.CardSubtitle,{className:"k-text-ellipsis"},e)),l.createElement("span",{className:"k-spacer"})))),g&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),v&&l.createElement(xe,{expanded:u,node:k}),v&&!!r&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:r,marginTop:-15}}))},Ie=({dataByGroups:s,data:t=[],cardWidth:o,childrenField:i,idField:e,expandField:n,hasChildrenField:r,groupField:a,level:c=1,parentId:m=0})=>{t.forEach(d=>{const g=d[i];if(d[n]&&g&&g.length){const u=g.some(I=>I[i]&&I[i].length||r&&I[r]),k=u?"horizontal":"vertical",x=u?null:o;s.push({ids:[d[e]],items:g,level:c,parentId:m,hasChildren:u,orientation:k,width:x}),Ie({dataByGroups:s,data:d[i],childrenField:i,cardWidth:o,idField:e,expandField:n,hasChildrenField:r,groupField:a,level:c+1,parentId:d[e]})}})},ht=(s,t)=>{const o=t||Ee,i=s.sort((e,n)=>n.level-e.level);i.forEach(e=>{if(!e.width){const n=i.filter(m=>e.ids.includes(m.parentId)),r=n.length?Math.max(...n.map(m=>m.width||0)):o,a=e.orientation==="horizontal"?e.items.length:1,c=r*a+T*(a-1);e.width=c}})},ut=(s,t,o)=>{const i=s.sort((e,n)=>e.level-n.level);i.forEach(e=>{if(e.level===0)return;const n=i.find(u=>u.ids.includes(e.parentId)),r=(n==null?void 0:n.items.findIndex(u=>e.ids.includes(u[o])))||0,a=(n==null?void 0:n.items)||[],c=n.width?(n.width-(a.length-1)*T)/a.length:0;if(!e.left){let u=(n==null?void 0:n.left)||0;a.forEach((k,x)=>{x<r&&(u+=c+T)}),e.left=u}const m=(n==null?void 0:n.width)||0,d=(n==null?void 0:n.items.length)||1,g=(m-(d-1)*T)/d;e.width=g;const v=n==null?void 0:n.items.map(u=>{const k=u[t]?u[t].length:0,x=i.find(R=>R.ids.includes(u[o])),I=(x==null?void 0:x.width)||0;return(x==null?void 0:x.orientation)==="vertical"||k===0||!u.expanded?0:I-(I-(k-1)*T)/k});n&&(n.childLineWidths=v)})},mt=(s,t,o)=>{const i=t||q,e=o||G;s.forEach(n=>{const r=n.level,a=(i+e)*r+G*(r?r-1:0)-(e-G)*(r?1:0);n.top=a})},gt=(s,t,o)=>{const i=t||q,e=o||G;return Math.max(...s.map(r=>{const a=r.top||0,c=r.items.length,m=r.orientation==="horizontal"?i+e+e:c*(i+e);return a+m}))},he=s=>{const t={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded"},{id:o,width:i,data:e,groupField:n,cardWidth:r,cardHeight:a,verticalLine:c,idField:m,childrenField:d,hasChildrenField:g,expandField:v,avatarField:u,titleField:k,subtitleField:x,ariaLabel:I,itemRender:R,height:D}={...t,...s},E=[{items:e,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];Ie({dataByGroups:E,data:e,cardWidth:r,expandField:v,hasChildrenField:g,childrenField:d,idField:m,groupField:n}),ht(E,r),ut(E,d,m),mt(E,a,c);const _=gt(E,a,c);return l.createElement("div",{className:"k-orgchart-container",style:{width:i,height:D||_}},E.map(y=>{const b=y.level,B=y.items,H=b===0?"center":"around",z=y.orientation;return l.createElement("div",{role:b===0?"tree":"group",id:o+"-"+b+"-"+y.ids[0],"aria-label":b===0?I:void 0,"aria-orientation":b===0?z:void 0,key:y.ids[0]+"_"+b,className:w.classNames("k-orgchart-group",`k-orgchart-level-${b}`,"k-pos-absolute",{[`k-${w.kendoThemeMaps.orientationMap[z]}`]:z,[`k-justify-content-${H}`]:H}),style:{width:y.width||"100%",left:y.left,top:y.top}},B.length>0&&l.createElement("div",{role:"group",style:{width:"100%"},className:w.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${w.kendoThemeMaps.orientationMap[y.orientation]}`]:y.orientation})},B.map((C,N)=>{const M=C[d]&&C[d].length||g&&C[g],$=M||y.orientation==="vertical"&&N!==B.length-1,V=y.orientation==="vertical"&&N!==0?0:c||G,j=y.childLineWidths?Math.max(...y.childLineWidths):void 0,Q=C[v];return l.createElement(de,{id:o+"-"+(b+1)+"-"+C[m],style:{width:j},itemRender:R,cardHeight:a,cardWidth:r,verticalLine:V,key:N,level:b,avatar:C[u],title:C[k],subtitle:C[x],line:$,expanded:Q,node:C,childLineWidth:M&&Q&&y.orientation==="horizontal"?y.childLineWidths[N]:0,plus:M},C.text)})))}))};he.displayName="KendoServerOrgChart";const vt={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"},ft=s=>{const{nodes:t,children:o,style:i,...e}=s,[n,r]=l.useState(!1),a=l.useContext(ee),c=l.useRef(null),m=u=>{a.onKeyDown&&a.onKeyDown({event:u,items:t})},d=u=>{a.onGroupAction&&a.onGroupAction({event:u,items:t})},g=u=>{r(!0),a.onGroupFocus&&a.onGroupFocus({event:u,items:t,containerRef:c})},v=u=>{r(!1),a.onGroupBlur&&a.onGroupBlur({event:u,items:t})};return l.createElement("div",{role:"treeitem","aria-selected":n,ref:c,className:w.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":n}),style:i,onKeyDown:m,onClick:d,onFocus:g,onBlur:v,...e},o)},pt="k-orgchart-node-group",fe="k-orgchart-node-group-title",pe="k-orgchart-node-group-subtitle",ye=s=>{const t={orientation:"horizontal"},{id:o,title:i,subtitle:e,line:n,plus:r,focus:a,level:c,verticalLine:m,childLineWidth:d,orientation:g,expanded:v,nodes:u,groupTitleHeight:k,groupSubtitleHeight:x,groupTitleRender:I,groupSubtitleRender:R,...D}={...t,...s},E=I,_=R,y={height:k||ne},b={height:x||ie};return l.createElement("div",{...D,className:w.classNames(s.className,pt,"k-vstack","k-align-items-center")},c!==0&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:m}}),l.createElement(ft,{nodes:u,"aria-expanded":!!v,"aria-keyshortcuts":"Enter","aria-level":c+1,"aria-owns":o},E?l.createElement(E,{style:y,className:fe,title:i,items:u,level:c,expanded:v}):l.createElement("div",{className:fe,style:y},i),_?l.createElement(_,{style:b,className:pe,subtitle:e,items:u,level:c,expanded:v}):l.createElement("div",{className:pe,style:b},e),l.createElement("div",{role:"group",style:{width:"100%"},className:w.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${w.kendoThemeMaps.orientationMap[g]||g}`]:g})},s.children)),n&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),r&&l.createElement(xe,{expanded:v,nodes:u}),r&&!!d&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:d,marginTop:-15}}))},we=({dataByGroups:s,data:t=[],cardWidth:o,childrenField:i,idField:e,expandField:n,hasChildrenField:r,groupField:a,level:c=1,parentId:m=0})=>{t.forEach(d=>{const g=d[i];if(d[n]&&g&&g.length){const u=g.some(E=>E[i]&&E[i].length||r&&E[r]),k=u?"horizontal":"vertical",x=u?null:o+2*T,I=s.find(E=>E.parentId===m),R=s.find(E=>E.ids.includes(m));let D=!1;if(I){const E=I.ids[0],_=R.items.find(b=>b[e]===E),y=R.items.find(b=>b[e]===d[e]);D=_[a]===y[a]}I&&D?(I.ids.push(d[e]),I.items=I.items.concat(g)):s.push({ids:[d[e]],items:g,level:c,parentId:m,hasChildren:u,orientation:k,width:x}),we({dataByGroups:s,data:d[i],childrenField:i,cardWidth:o,idField:e,expandField:n,hasChildrenField:r,groupField:a,level:c+1,parentId:d[e]})}})},Ct=(s,t)=>{const o=t||Ee,i=s.sort((e,n)=>n.level-e.level);i.forEach(e=>{if(!e.width){const n=i.filter(r=>e.ids.includes(r.parentId));if(n.length){const r=Math.max(...n.map(d=>d.width||0)),a=Math.max(...n.map(d=>d.groupedItems.length||0)),c=Math.max(...e.groupedItems.map(d=>{const g=e.orientation==="horizontal"?d.items.length:1;return g*(o+2*T)+T*(g-1)})),m=r*a+T*(a-1);e.width=Math.max(m,c)}else{const r=Math.max(...e.groupedItems.map(a=>{const c=e.orientation==="horizontal"?a.items.length:1;return c*(o+2*T)+T*(c-1)}));e.width=r}}})},kt=(s,t)=>{const o=s.sort((i,e)=>i.level-e.level);o.forEach(i=>{var g;if(i.level===0)return;const e=o.find(v=>v.ids.includes(i.parentId)),n=(e==null?void 0:e.groupedItems.findIndex(v=>v.items.some(u=>i.ids.includes(u[t]))))||0,r=(e==null?void 0:e.groupedItems)||[],a=e.width?(e.width-(r.length-1)*T)/r.length:0;if(!i.left){let v=(e==null?void 0:e.left)||0;r.forEach((u,k)=>{k<n&&(v+=a+T)}),i.left=v}const c=(e==null?void 0:e.width)||0,m=(e==null?void 0:e.groupedItems.length)||1,d=(c-(m-1)*T)/m;if(i.width=d,e){const v=i.width-(i.width-(i.groupedItems.length-1)*T)/i.groupedItems.length;e.childLineWidths?(g=e.childLineWidths)==null||g.push(v):e.childLineWidths=[v]}})},Et=(s,t,o,i,e)=>{const n=t||q,r=e||G,a=o+i+be;s.forEach(c=>{const m=c.level,d=(n+r+a)*m+G*(m?m-1:0)-(r-G)*(m?1:0);c.top=d})},bt=(s,t,o,i,e)=>{const n=t||q,r=o||G,c=(i||ne)+(e||ie)+be;return Math.max(...s.map(d=>{const g=d.top||0,v=Math.max(...d.groupedItems.map(x=>x.items.length)),u=d.hasChildren?G:0,k=d.orientation==="horizontal"?n+r+c+r+u:v*(n+r)+c+r;return g+k}))},Fe=s=>{const t={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal"},{id:o,width:i,data:e,groupField:n,cardWidth:r,cardHeight:a,groupTitleHeight:c,groupSubtitleHeight:m,verticalLine:d,idField:g,childrenField:v,expandField:u,hasChildrenField:k,avatarField:x,titleField:I,subtitleField:R,cardsColors:D,ariaLabel:E,itemRender:_,groupTitleRender:y,groupSubtitleRender:b,height:B}={...t,...s},H=[{items:e,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];we({dataByGroups:H,data:e,cardWidth:r,expandField:u,hasChildrenField:k,childrenField:v,idField:g,groupField:n}),H.map(C=>{C.groupedItems=Qe.groupBy(C.items,[{field:n}])}),Ct(H,r),kt(H,g),Et(H,a||q,c||ne,m||ie,d);const z=bt(H,a||q,c||ne,m||ie);return React.createElement("div",{className:"k-orgchart-container",style:{width:i,height:B||z}},H.map(C=>{const N=C.level,M=C.groupedItems.map(S=>{const te=S.items.some(U=>U[u]);return{...S,expanded:te}}),$=M.filter(S=>S.expanded),V=N===0?"center":"around",j="horizontal",Q=D&&D[N]||"green";return React.createElement("div",{role:N===0?"tree":"group",id:o+"-"+N+"-"+C.ids[0],"aria-label":N===0?E:void 0,"aria-orientation":N===0?j:void 0,key:C.ids[0]+"_"+N,className:w.classNames("k-orgchart-group",`k-orgchart-level-${N}`,"k-pos-absolute",{[`k-${w.kendoThemeMaps.orientationMap[j]}`]:j,[`k-justify-content-${V}`]:V,"k-orgchart-group-h":s.groupField}),style:{width:C.width||"100%",left:C.left,top:C.top}},e.length>0&&M.map((S,te)=>{const U=S.items.some(L=>L[v]&&L[v].length||k&&L[k]),oe=C.width?(C.width-(M.length-1)*T)/M.length:void 0,X=$.findIndex(L=>L===S);return React.createElement(ye,{id:o+"-"+(N+1)+"-"+S.items[0][g],style:{width:oe},groupTitleHeight:c,groupSubtitleHeight:m,groupTitleRender:y,groupSubtitleRender:b,key:te,level:N,verticalLine:d||G,title:S.items[0][n||I],subtitle:n,orientation:C.orientation,childLineWidth:U&&S.expanded&&C.orientation==="horizontal"?C.childLineWidths[X]:0,line:U,nodes:S.items,expanded:S.expanded,plus:U},S.items.map((L,se)=>React.createElement(de,{cardHeight:a,cardWidth:r,itemRender:_,color:Q,key:se,level:N,avatar:L[x],title:L[I],subtitle:L[R],verticalLine:0,line:!1,node:L,childLineWidth:0,plus:!1},L.text)))}))}))};Fe.displayName="KendoServerGroupedOrgChart";const ue=s=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...s},{cardsColors:o,onExpandChange:i,onKeyDown:e,onItemAction:n,onGroupAction:r,onGroupBlur:a,onGroupFocus:c,id:m,...d}=t,g=l.useRef(w.guid());return w.validatePackage(vt),l.createElement(ce,{...t},s.groupField?l.createElement(Fe,{id:m||g.current,...d},s.children):l.createElement(he,{id:m||g.current,...d},s.children))};ue.propTypes={className:h.string,style:h.object,id:h.string,ariaLabel:h.string,idField:h.string,childrenField:h.string,expandField:h.string,titleField:h.string,hasChildrenField:h.string,subtitleField:h.string,avatarField:h.string,cardsColors:h.array,data:h.array,groupField:h.string,cardHeight:h.number,cardWidth:h.number,groupTitleHeight:h.number,groupSubtitleHeight:h.number,verticalLine:h.number,height:h.oneOfType([h.string,h.number]),onExpandChange:h.func,onItemAction:h.func,onGroupAction:h.func};ue.displayName="KendoOrgChart";function xt(s,t){if(!s||!s.length)return[];let o=s;const i=t.cloneField||"cloned",e=t.expandField||it,n=t.selectField||st,r=t.checkField||ke,a=t.childrenField||ot;return o=ae(o,e,t.expand,i,a),o=ae(o,n,t.select,i,a),o=ae(o,r,t.check,i,a),yt(o,a,t.check),o}function ae(s,t,o,i,e){if(o){const{ids:n,field:r}=Le(o,t),a=!w.isArray(o)&&o.idField?w.resolveItemsIds(n,o.idField,s,e):n;return It(s,a,r,i,e)}else return s}function Le(s,t){let o,i;return w.isArray(s)?(o=s,i=t):(o=s.ids||[],i=s.operationField||t),{ids:o,field:i}}function It(s,t,o,i,e){let n=s;return t.forEach(r=>{n=w.updateItem(n,r,a=>Ne(o,a),i,e)}),n}function Ne(s,t){const o=(s||"").split(".");let i=t;for(let e=0;e<o.length;e++){const n=o[e];if(e===o.length-1)i[n]=!0;else if(i[n]!==void 0)i[n]={...i[n]},i=i[n];else return}}function yt(s,t,o){if(o&&!w.isArray(o)&&o.applyCheckIndeterminate){const{field:i}=Le(o,ke),e=o.checkIndeterminateField||rt;for(let n=0;n<s.length;n++){const r=s[n],a=r[t];a&&le(a,w.getNestedValue(i,r)?[]:[r],t,i,e)}}}function le(s,t,o,i,e){let n=!1;for(let r=0;r<s.length;r++){const a=s[r];if(w.getNestedValue(i,a)){if(!n)for(let c=0;c<t.length;c++)Ne(e,t[c]);n=!0,a[o]&&le(a[o],[],o,i,e)}else a[o]&&le(a[o],n?[a]:t.concat([a]),o,i,e)}}exports.OrgChart=ue;exports.ServerOrgChart=he;exports.ServerOrgChartGroup=ye;exports.ServerOrgChartNode=de;exports.processOrgChartItems=xt;
+`;class tt{getSeriesColors(){const t=this.element,o=[].slice.call(t.querySelectorAll(".k-var--series div")),i=ve(t.querySelector(".k-var--series-unset"));return o.reduce((n,r)=>{const a=Ze(r.className),c=ve(r);return c!==i&&(n[a]=c),n},[])}}const nt=(s,t)=>{const o=new tt,i=o.element=t.createElement("div");i.style.display="none",i.innerHTML=et,t.body.appendChild(i);let e;try{e=o.getSeriesColors()}finally{t.body.removeChild(o.element),delete o.element,s(e)}},it="expanded",ot="items",st="selected",ke="checked",rt="checkIndeterminate",at="k-orgchart",q=80,Ee=300,T=25,G=40,ne=20,ie=20,be=82,ee=l.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}),ce=s=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...s},{navigatable:o,id:i,tabIndex:e,className:n,style:r,data:a,groupField:c,cardWidth:m,cardHeight:d,groupTitleHeight:g,groupSubtitleHeight:v,verticalLine:u,idField:k,childrenField:x,expandField:I,hasChildrenField:A,avatarField:R,titleField:E,subtitleField:_,onExpandChange:y,onItemAction:b,onItemDoubleClick:B,onItemContextMenu:H,onKeyDown:z,onGroupAction:C,onGroupBlur:N,onGroupFocus:M,cardsColors:j,ariaLabel:V,itemRender:$,groupTitleRender:Q,groupSubtitleRender:S,height:te,children:U,...oe}=t,X=l.useRef(null),L=l.useRef(new w.Navigation({tabIndex:e,root:X,selectors:[t.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[se,Oe]=l.useState([]),P=l.useRef(null),Te=(f,p,O)=>{O.preventDefault(),p.focusNext(f)},Se=(f,p,O)=>{O.preventDefault(),p.focusPrevious(f)},Ae=(f,p,O,F)=>{var W;if(O.preventDefault(),(t.groupField?F.items.some(Z=>Z[t.expandField]):F.item[t.expandField])&&t.onExpandChange)t.onExpandChange.call(void 0,F);else{const Z=".k-orgchart-group",re=(W=f.closest(Z))==null?void 0:W.getAttribute("id"),J=document.querySelector(`[aria-owns="${re}"]`);J?p.focusElement(J,f):p.focusPrevious(f)}},De=(f,p,O,F)=>{var J;O.preventDefault();const D=t.groupField?F.items.some(K=>K[t.expandField]):F.item[t.expandField],W=t.groupField?F.items.find(K=>K[t.childrenField]):F.item[t.childrenField],Z=t.groupField?F.items.some(K=>t.hasChildrenField&&K[t.hasChildrenField]):t.hasChildrenField&&F.item[t.hasChildrenField],re=t.groupField?W&&W[t.childrenField]&&W[t.childrenField].length:W&&W.length;if((Z||re)&&!D&&t.onExpandChange)t.onExpandChange.call(void 0,F);else{const K=t.groupField?".k-orgchart-node-group-container":".k-orgchart-card",$e=f.getAttribute("aria-owns"),me=(J=document.getElementById($e))==null?void 0:J.querySelector(K);me?p.focusElement(me,f):p.focusNext(f)}},Re=(f,p,O)=>{O.preventDefault(),p.focusElement(p.first,null)},He=(f,p,O)=>{O.preventDefault(),p.focusElement(p.last,null)},Ge=(f,p,O,F)=>{O.stopPropagation();const D=f.className.indexOf("k-orgchart-node-group-container")!==-1;if(s.groupField&&D){P.current&&P.current.first&&P.current.focusElement(P.current.first,null);return}t.onItemAction&&t.onItemAction({event:O,item:F.item})},_e=f=>{if(s.groupField){const p=f.closest(".k-orgchart-node-group-container");p&&L.current.focusElement(p,null)}};l.useEffect(()=>{if(o&&L.current.first&&L.current.first.setAttribute("tabindex",String(e)),!j){const f=X.current.ownerDocument||document;nt(p=>{Oe(p)},f)}},[o,e]);const Me=f=>{if(t.navigatable){const p=f.event,O=p.key===" "?"Space":p.key,F=s.groupField&&p.target.className.indexOf("k-orgchart-card")!==-1&&P.current||L.current,D=p.target.closest(F.selectors.join(","));switch(O){case"ArrowUp":Ae(D,F,p,f);break;case"ArrowDown":De(D,F,p,f);break;case"ArrowLeft":Se(D,F,p);break;case"ArrowRight":Te(D,F,p);break;case"End":He(D,F,p);break;case"Home":Re(D,F,p);break;case"Enter":Ge(D,F,p,f);break;case"Escape":_e(D);break}}},We=f=>{if(f.event.stopPropagation(),b&&b.call(void 0,f),t.navigatable){const p=f.event.target.closest(".k-orgchart-card");p&&L.current.focusElement(p,null)}},Pe=f=>{f.event.stopPropagation(),b&&b.call(void 0,f)},Ke=f=>{f.event.stopPropagation(),b&&b.call(void 0,f)},Be=f=>{if(C&&C.call(void 0,f),t.navigatable){const p=f.event.target.closest(".k-orgchart-node-group-container");p&&L.current.focusElement(p,null)}},ze=f=>{P.current=null},je=f=>{P.current=new w.Navigation({tabIndex:0,root:f.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})};return l.createElement("div",{style:r,ref:X,className:w.classNames(n,at)},l.createElement(ee.Provider,{value:{cardColors:j||se,onExpandChange:s.onExpandChange,onKeyDown:Me,onItemAction:We,onItemDoubleClick:Ke,onItemContextMenu:Pe,onGroupAction:Be,onGroupBlur:ze,onGroupFocus:je},...oe},s.children))};ce.propTypes={className:h.string,style:h.object,id:h.string,ariaLabel:h.string,idField:h.string,childrenField:h.string,expandField:h.string,titleField:h.string,hasChildrenField:h.string,subtitleField:h.string,avatarField:h.string,cardsColors:h.array,data:h.array,groupField:h.string,cardHeight:h.number,cardWidth:h.number,groupTitleHeight:h.number,groupSubtitleHeight:h.number,verticalLine:h.number,height:h.oneOfType([h.string,h.number]),onExpandChange:h.func,onItemAction:h.func,onItemDoubleClick:h.func,onItemContextMenu:h.func,onGroupAction:h.func};ce.displayName="KendoClientOrgChart";const xe=s=>{const{expanded:t,node:o,nodes:i}=s,e=l.useContext(ee),n=r=>{e.onExpandChange&&e.onExpandChange.call(void 0,{event:r,expand:!t,item:o,items:i})};return l.createElement(qe.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?ge.minusIcon:ge.plusIcon,"aria-label":t?"collapse":"expand",onClick:n})},lt=s=>{const{node:t,children:o,style:i,...e}=s,[n,r]=l.useState(!1),a=l.useContext(ee),c=v=>{a.onKeyDown&&a.onKeyDown.call(void 0,{event:v,item:t})},m=v=>{a.onItemAction&&a.onItemAction.call(void 0,{event:v,item:t})},d=v=>{a.onItemContextMenu&&a.onItemContextMenu.call(void 0,{event:v,item:t})},g=v=>{a.onItemDoubleClick&&a.onItemDoubleClick.call(void 0,{event:v,item:t})};return l.createElement(Y.Card,{role:"treeitem",className:w.classNames("k-orgchart-card",{"k-focus":n}),onClick:m,onKeyDown:c,onContextMenu:d,onDoubleClick:g,style:i,"aria-selected":n,"aria-keyshortcuts":"Enter",onFocus:()=>r(!0),onBlur:()=>r(!1),...e},o)},ct=s=>{const{level:t,children:o}=s,i=l.useContext(ee),e=i.cardColors&&i.cardColors[t]||"green";return l.createElement(Y.CardBody,{className:"k-hstack",style:{borderTopColor:e}},o)},dt="k-orgchart-node",de=s=>{const t={avatarType:"image"},{id:o,title:i,subtitle:e,level:n,childLineWidth:r,cardWidth:a,cardHeight:c,verticalLine:m,color:d,line:g,plus:v,expanded:u,node:k,avatar:x,avatarType:I,itemRender:A,...R}={...s,...t},E=A;return l.createElement("div",{...R,className:w.classNames(s.className,dt,"k-vstack","k-align-items-center")},n!==0&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:m}}),l.createElement(lt,{node:k,style:{width:a,height:c},"aria-level":n+1,"aria-expanded":!!u,"aria-owns":o},l.createElement(ct,{level:n},E?l.createElement(E,{item:k,title:i,subtitle:e,level:n,expanded:u,color:d}):l.createElement(l.Fragment,null,l.createElement(Y.Avatar,{type:I,themeColor:"secondary"},I==="image"?l.createElement("img",{src:x,alt:"KendoReact Avatar Customer Image"}):x),l.createElement("div",{className:"k-card-title-wrap k-vstack"},l.createElement(Y.CardTitle,{className:"k-text-ellipsis"},i),l.createElement("span",{className:"k-spacer"}),l.createElement(Y.CardSubtitle,{className:"k-text-ellipsis"},e)),l.createElement("span",{className:"k-spacer"})))),g&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),v&&l.createElement(xe,{expanded:u,node:k}),v&&!!r&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:r,marginTop:-15}}))},Ie=({dataByGroups:s,data:t=[],cardWidth:o,childrenField:i,idField:e,expandField:n,hasChildrenField:r,groupField:a,level:c=1,parentId:m=0})=>{t.forEach(d=>{const g=d[i];if(d[n]&&g&&g.length){const u=g.some(I=>I[i]&&I[i].length||r&&I[r]),k=u?"horizontal":"vertical",x=u?null:o;s.push({ids:[d[e]],items:g,level:c,parentId:m,hasChildren:u,orientation:k,width:x}),Ie({dataByGroups:s,data:d[i],childrenField:i,cardWidth:o,idField:e,expandField:n,hasChildrenField:r,groupField:a,level:c+1,parentId:d[e]})}})},ht=(s,t)=>{const o=t||Ee,i=s.sort((e,n)=>n.level-e.level);i.forEach(e=>{if(!e.width){const n=i.filter(m=>e.ids.includes(m.parentId)),r=n.length?Math.max(...n.map(m=>m.width||0)):o,a=e.orientation==="horizontal"?e.items.length:1,c=r*a+T*(a-1);e.width=c}})},ut=(s,t,o)=>{const i=s.sort((e,n)=>e.level-n.level);i.forEach(e=>{if(e.level===0)return;const n=i.find(u=>u.ids.includes(e.parentId)),r=(n==null?void 0:n.items.findIndex(u=>e.ids.includes(u[o])))||0,a=(n==null?void 0:n.items)||[],c=n.width?(n.width-(a.length-1)*T)/a.length:0;if(!e.left){let u=(n==null?void 0:n.left)||0;a.forEach((k,x)=>{x<r&&(u+=c+T)}),e.left=u}const m=(n==null?void 0:n.width)||0,d=(n==null?void 0:n.items.length)||1,g=(m-(d-1)*T)/d;e.width=g;const v=n==null?void 0:n.items.map(u=>{const k=u[t]?u[t].length:0,x=i.find(A=>A.ids.includes(u[o])),I=(x==null?void 0:x.width)||0;return(x==null?void 0:x.orientation)==="vertical"||k===0||!u.expanded?0:I-(I-(k-1)*T)/k});n&&(n.childLineWidths=v)})},mt=(s,t,o)=>{const i=t||q,e=o||G;s.forEach(n=>{const r=n.level,a=(i+e)*r+G*(r?r-1:0)-(e-G)*(r?1:0);n.top=a})},gt=(s,t,o)=>{const i=t||q,e=o||G;return Math.max(...s.map(r=>{const a=r.top||0,c=r.items.length,m=r.orientation==="horizontal"?i+e+e:c*(i+e);return a+m}))},he=s=>{const t={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded"},{id:o,width:i,data:e,groupField:n,cardWidth:r,cardHeight:a,verticalLine:c,idField:m,childrenField:d,hasChildrenField:g,expandField:v,avatarField:u,titleField:k,subtitleField:x,ariaLabel:I,itemRender:A,height:R}={...t,...s},E=[{items:e,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];Ie({dataByGroups:E,data:e,cardWidth:r,expandField:v,hasChildrenField:g,childrenField:d,idField:m,groupField:n}),ht(E,r),ut(E,d,m),mt(E,a,c);const _=gt(E,a,c);return l.createElement("div",{className:"k-orgchart-container",style:{width:i,height:R||_}},E.map(y=>{const b=y.level,B=y.items,H=b===0?"center":"around",z=y.orientation;return l.createElement("div",{role:b===0?"tree":"group",id:o+"-"+b+"-"+y.ids[0],"aria-label":b===0?I:void 0,"aria-orientation":b===0?z:void 0,key:y.ids[0]+"_"+b,className:w.classNames("k-orgchart-group",`k-orgchart-level-${b}`,"k-pos-absolute",{[`k-${w.kendoThemeMaps.orientationMap[z]}`]:z,[`k-justify-content-${H}`]:H}),style:{width:y.width||"100%",left:y.left,top:y.top}},B.length>0&&l.createElement("div",{role:"group",style:{width:"100%"},className:w.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${w.kendoThemeMaps.orientationMap[y.orientation]}`]:y.orientation})},B.map((C,N)=>{const M=C[d]&&C[d].length||g&&C[g],j=M||y.orientation==="vertical"&&N!==B.length-1,V=y.orientation==="vertical"&&N!==0?0:c||G,$=y.childLineWidths?Math.max(...y.childLineWidths):void 0,Q=C[v];return l.createElement(de,{id:o+"-"+(b+1)+"-"+C[m],style:{width:$},itemRender:A,cardHeight:a,cardWidth:r,verticalLine:V,key:N,level:b,avatar:C[u],title:C[k],subtitle:C[x],line:j,expanded:Q,node:C,childLineWidth:M&&Q&&y.orientation==="horizontal"?y.childLineWidths[N]:0,plus:M},C.text)})))}))};he.displayName="KendoServerOrgChart";const vt={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"},ft=s=>{const{nodes:t,children:o,style:i,...e}=s,[n,r]=l.useState(!1),a=l.useContext(ee),c=l.useRef(null),m=u=>{a.onKeyDown&&a.onKeyDown({event:u,items:t})},d=u=>{a.onGroupAction&&a.onGroupAction({event:u,items:t})},g=u=>{r(!0),a.onGroupFocus&&a.onGroupFocus({event:u,items:t,containerRef:c})},v=u=>{r(!1),a.onGroupBlur&&a.onGroupBlur({event:u,items:t})};return l.createElement("div",{role:"treeitem","aria-selected":n,ref:c,className:w.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":n}),style:i,onKeyDown:m,onClick:d,onFocus:g,onBlur:v,...e},o)},pt="k-orgchart-node-group",fe="k-orgchart-node-group-title",pe="k-orgchart-node-group-subtitle",ye=s=>{const t={orientation:"horizontal"},{id:o,title:i,subtitle:e,line:n,plus:r,focus:a,level:c,verticalLine:m,childLineWidth:d,orientation:g,expanded:v,nodes:u,groupTitleHeight:k,groupSubtitleHeight:x,groupTitleRender:I,groupSubtitleRender:A,...R}={...t,...s},E=I,_=A,y={height:k||ne},b={height:x||ie};return l.createElement("div",{...R,className:w.classNames(s.className,pt,"k-vstack","k-align-items-center")},c!==0&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:m}}),l.createElement(ft,{nodes:u,"aria-expanded":!!v,"aria-keyshortcuts":"Enter","aria-level":c+1,"aria-owns":o},E?l.createElement(E,{style:y,className:fe,title:i,items:u,level:c,expanded:v}):l.createElement("div",{className:fe,style:y},i),_?l.createElement(_,{style:b,className:pe,subtitle:e,items:u,level:c,expanded:v}):l.createElement("div",{className:pe,style:b},e),l.createElement("div",{role:"group",style:{width:"100%"},className:w.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${w.kendoThemeMaps.orientationMap[g]||g}`]:g})},s.children)),n&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),r&&l.createElement(xe,{expanded:v,nodes:u}),r&&!!d&&l.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:d,marginTop:-15}}))},we=({dataByGroups:s,data:t=[],cardWidth:o,childrenField:i,idField:e,expandField:n,hasChildrenField:r,groupField:a,level:c=1,parentId:m=0})=>{t.forEach(d=>{const g=d[i];if(d[n]&&g&&g.length){const u=g.some(E=>E[i]&&E[i].length||r&&E[r]),k=u?"horizontal":"vertical",x=u?null:o+2*T,I=s.find(E=>E.parentId===m),A=s.find(E=>E.ids.includes(m));let R=!1;if(I){const E=I.ids[0],_=A.items.find(b=>b[e]===E),y=A.items.find(b=>b[e]===d[e]);R=_[a]===y[a]}I&&R?(I.ids.push(d[e]),I.items=I.items.concat(g)):s.push({ids:[d[e]],items:g,level:c,parentId:m,hasChildren:u,orientation:k,width:x}),we({dataByGroups:s,data:d[i],childrenField:i,cardWidth:o,idField:e,expandField:n,hasChildrenField:r,groupField:a,level:c+1,parentId:d[e]})}})},Ct=(s,t)=>{const o=t||Ee,i=s.sort((e,n)=>n.level-e.level);i.forEach(e=>{if(!e.width){const n=i.filter(r=>e.ids.includes(r.parentId));if(n.length){const r=Math.max(...n.map(d=>d.width||0)),a=Math.max(...n.map(d=>d.groupedItems.length||0)),c=Math.max(...e.groupedItems.map(d=>{const g=e.orientation==="horizontal"?d.items.length:1;return g*(o+2*T)+T*(g-1)})),m=r*a+T*(a-1);e.width=Math.max(m,c)}else{const r=Math.max(...e.groupedItems.map(a=>{const c=e.orientation==="horizontal"?a.items.length:1;return c*(o+2*T)+T*(c-1)}));e.width=r}}})},kt=(s,t)=>{const o=s.sort((i,e)=>i.level-e.level);o.forEach(i=>{var g;if(i.level===0)return;const e=o.find(v=>v.ids.includes(i.parentId)),n=(e==null?void 0:e.groupedItems.findIndex(v=>v.items.some(u=>i.ids.includes(u[t]))))||0,r=(e==null?void 0:e.groupedItems)||[],a=e.width?(e.width-(r.length-1)*T)/r.length:0;if(!i.left){let v=(e==null?void 0:e.left)||0;r.forEach((u,k)=>{k<n&&(v+=a+T)}),i.left=v}const c=(e==null?void 0:e.width)||0,m=(e==null?void 0:e.groupedItems.length)||1,d=(c-(m-1)*T)/m;if(i.width=d,e){const v=i.width-(i.width-(i.groupedItems.length-1)*T)/i.groupedItems.length;e.childLineWidths?(g=e.childLineWidths)==null||g.push(v):e.childLineWidths=[v]}})},Et=(s,t,o,i,e)=>{const n=t||q,r=e||G,a=o+i+be;s.forEach(c=>{const m=c.level,d=(n+r+a)*m+G*(m?m-1:0)-(r-G)*(m?1:0);c.top=d})},bt=(s,t,o,i,e)=>{const n=t||q,r=o||G,c=(i||ne)+(e||ie)+be;return Math.max(...s.map(d=>{const g=d.top||0,v=Math.max(...d.groupedItems.map(x=>x.items.length)),u=d.hasChildren?G:0,k=d.orientation==="horizontal"?n+r+c+r+u:v*(n+r)+c+r;return g+k}))},Fe=s=>{const t={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal"},{id:o,width:i,data:e,groupField:n,cardWidth:r,cardHeight:a,groupTitleHeight:c,groupSubtitleHeight:m,verticalLine:d,idField:g,childrenField:v,expandField:u,hasChildrenField:k,avatarField:x,titleField:I,subtitleField:A,cardsColors:R,ariaLabel:E,itemRender:_,groupTitleRender:y,groupSubtitleRender:b,height:B}={...t,...s},H=[{items:e,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];we({dataByGroups:H,data:e,cardWidth:r,expandField:u,hasChildrenField:k,childrenField:v,idField:g,groupField:n}),H.map(C=>{C.groupedItems=Qe.groupBy(C.items,[{field:n}])}),Ct(H,r),kt(H,g),Et(H,a||q,c||ne,m||ie,d);const z=bt(H,a||q,c||ne,m||ie);return l.createElement("div",{className:"k-orgchart-container",style:{width:i,height:B||z}},H.map(C=>{const N=C.level,M=C.groupedItems.map(S=>{const te=S.items.some(U=>U[u]);return{...S,expanded:te}}),j=M.filter(S=>S.expanded),V=N===0?"center":"around",$="horizontal",Q=R&&R[N]||"green";return l.createElement("div",{role:N===0?"tree":"group",id:o+"-"+N+"-"+C.ids[0],"aria-label":N===0?E:void 0,"aria-orientation":N===0?$:void 0,key:C.ids[0]+"_"+N,className:w.classNames("k-orgchart-group",`k-orgchart-level-${N}`,"k-pos-absolute",{[`k-${w.kendoThemeMaps.orientationMap[$]}`]:$,[`k-justify-content-${V}`]:V,"k-orgchart-group-h":s.groupField}),style:{width:C.width||"100%",left:C.left,top:C.top}},e.length>0&&M.map((S,te)=>{const U=S.items.some(L=>L[v]&&L[v].length||k&&L[k]),oe=C.width?(C.width-(M.length-1)*T)/M.length:void 0,X=j.findIndex(L=>L===S);return l.createElement(ye,{id:o+"-"+(N+1)+"-"+S.items[0][g],style:{width:oe},groupTitleHeight:c,groupSubtitleHeight:m,groupTitleRender:y,groupSubtitleRender:b,key:te,level:N,verticalLine:d||G,title:S.items[0][n||I],subtitle:n,orientation:C.orientation,childLineWidth:U&&S.expanded&&C.orientation==="horizontal"?C.childLineWidths[X]:0,line:U,nodes:S.items,expanded:S.expanded,plus:U},S.items.map((L,se)=>l.createElement(de,{cardHeight:a,cardWidth:r,itemRender:_,color:Q,key:se,level:N,avatar:L[x],title:L[I],subtitle:L[A],verticalLine:0,line:!1,node:L,childLineWidth:0,plus:!1},L.text)))}))}))};Fe.displayName="KendoServerGroupedOrgChart";const ue=s=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...s},{cardsColors:o,onExpandChange:i,onKeyDown:e,onItemAction:n,onGroupAction:r,onGroupBlur:a,onGroupFocus:c,id:m,...d}=t,g=l.useRef(w.guid());return w.validatePackage(vt),l.createElement(ce,{...t},s.groupField?l.createElement(Fe,{id:m||g.current,...d},s.children):l.createElement(he,{id:m||g.current,...d},s.children))};ue.propTypes={className:h.string,style:h.object,id:h.string,ariaLabel:h.string,idField:h.string,childrenField:h.string,expandField:h.string,titleField:h.string,hasChildrenField:h.string,subtitleField:h.string,avatarField:h.string,cardsColors:h.array,data:h.array,groupField:h.string,cardHeight:h.number,cardWidth:h.number,groupTitleHeight:h.number,groupSubtitleHeight:h.number,verticalLine:h.number,height:h.oneOfType([h.string,h.number]),onExpandChange:h.func,onItemAction:h.func,onGroupAction:h.func};ue.displayName="KendoOrgChart";function xt(s,t){if(!s||!s.length)return[];let o=s;const i=t.cloneField||"cloned",e=t.expandField||it,n=t.selectField||st,r=t.checkField||ke,a=t.childrenField||ot;return o=ae(o,e,t.expand,i,a),o=ae(o,n,t.select,i,a),o=ae(o,r,t.check,i,a),yt(o,a,t.check),o}function ae(s,t,o,i,e){if(o){const{ids:n,field:r}=Le(o,t),a=!w.isArray(o)&&o.idField?w.resolveItemsIds(n,o.idField,s,e):n;return It(s,a,r,i,e)}else return s}function Le(s,t){let o,i;return w.isArray(s)?(o=s,i=t):(o=s.ids||[],i=s.operationField||t),{ids:o,field:i}}function It(s,t,o,i,e){let n=s;return t.forEach(r=>{n=w.updateItem(n,r,a=>Ne(o,a),i,e)}),n}function Ne(s,t){const o=(s||"").split(".");let i=t;for(let e=0;e<o.length;e++){const n=o[e];if(e===o.length-1)i[n]=!0;else if(i[n]!==void 0)i[n]={...i[n]},i=i[n];else return}}function yt(s,t,o){if(o&&!w.isArray(o)&&o.applyCheckIndeterminate){const{field:i}=Le(o,ke),e=o.checkIndeterminateField||rt;for(let n=0;n<s.length;n++){const r=s[n],a=r[t];a&&le(a,w.getNestedValue(i,r)?[]:[r],t,i,e)}}}function le(s,t,o,i,e){let n=!1;for(let r=0;r<s.length;r++){const a=s[r];if(w.getNestedValue(i,a)){if(!n)for(let c=0;c<t.length;c++)Ne(e,t[c]);n=!0,a[o]&&le(a[o],[],o,i,e)}else a[o]&&le(a[o],n?[a]:t.concat([a]),o,i,e)}}exports.OrgChart=ue;exports.ServerOrgChart=he;exports.ServerOrgChartGroup=ye;exports.ServerOrgChartNode=de;exports.processOrgChartItems=xt;

package/index.mjs

@@ -56,7 +56,7 @@ const ht = (s, t) => {
   } finally {
     t.body.removeChild(o.element), delete o.element, s(e);
   }
-}, ut = "expanded", mt = "items", gt = "selected", pe = "checked", ft = "checkIndeterminate", vt = "k-orgchart", q = 80, Ce = 300, T = 25, O = 40, ne = 20, ie = 20, ke = 82, Y = l.createContext({
+}, ut = "expanded", mt = "items", gt = "selected", pe = "checked", ft = "checkIndeterminate", vt = "k-orgchart", q = 80, Ce = 300, T = 25, R = 40, ne = 20, ie = 20, ke = 82, Y = l.createContext({
   cardColors: void 0,
   onExpandChange: void 0,
   onKeyDown: void 0,
@@ -94,19 +94,19 @@ const ht = (s, t) => {
     idField: k,
     childrenField: b,
     expandField: I,
-    hasChildrenField: R,
-    avatarField: S,
+    hasChildrenField: H,
+    avatarField: D,
     titleField: E,
     subtitleField: G,
     onExpandChange: y,
     onItemAction: x,
     onItemDoubleClick: B,
-    onItemContextMenu: D,
-    onKeyDown: $,
+    onItemContextMenu: O,
+    onKeyDown: z,
     onGroupAction: C,
     onGroupBlur: L,
     onGroupFocus: W,
-    cardsColors: z,
+    cardsColors: $,
     ariaLabel: V,
     itemRender: U,
     groupTitleRender: X,
@@ -121,9 +121,9 @@ const ht = (s, t) => {
     focusOptions: {}
   })), [se, Te] = l.useState([]), P = l.useRef(null), Ae = (v, p, N) => {
     N.preventDefault(), p.focusNext(v);
-  }, Re = (v, p, N) => {
+  }, He = (v, p, N) => {
     N.preventDefault(), p.focusPrevious(v);
-  }, He = (v, p, N, F) => {
+  }, Se = (v, p, N, F) => {
     var M;
     if (N.preventDefault(), (t.groupField ? F.items.some((J) => J[t.expandField]) : F.item[t.expandField]) && t.onExpandChange)
       t.onExpandChange.call(void 0, F);
@@ -131,24 +131,24 @@ const ht = (s, t) => {
       const J = ".k-orgchart-group", re = (M = v.closest(J)) == null ? void 0 : M.getAttribute("id"), Q = document.querySelector(`[aria-owns="${re}"]`);
       Q ? p.focusElement(Q, v) : p.focusPrevious(v);
     }
-  }, Se = (v, p, N, F) => {
+  }, De = (v, p, N, F) => {
     var Q;
     N.preventDefault();
-    const H = t.groupField ? F.items.some((K) => K[t.expandField]) : F.item[t.expandField], M = t.groupField ? F.items.find((K) => K[t.childrenField]) : F.item[t.childrenField], J = t.groupField ? F.items.some((K) => t.hasChildrenField && K[t.hasChildrenField]) : t.hasChildrenField && F.item[t.hasChildrenField], re = t.groupField ? M && M[t.childrenField] && M[t.childrenField].length : M && M.length;
-    if ((J || re) && !H && t.onExpandChange)
+    const S = t.groupField ? F.items.some((K) => K[t.expandField]) : F.item[t.expandField], M = t.groupField ? F.items.find((K) => K[t.childrenField]) : F.item[t.childrenField], J = t.groupField ? F.items.some((K) => t.hasChildrenField && K[t.hasChildrenField]) : t.hasChildrenField && F.item[t.hasChildrenField], re = t.groupField ? M && M[t.childrenField] && M[t.childrenField].length : M && M.length;
+    if ((J || re) && !S && t.onExpandChange)
       t.onExpandChange.call(void 0, F);
     else {
       const K = t.groupField ? ".k-orgchart-node-group-container" : ".k-orgchart-card", Ue = v.getAttribute("aria-owns"), he = (Q = document.getElementById(Ue)) == null ? void 0 : Q.querySelector(K);
       he ? p.focusElement(he, v) : p.focusNext(v);
     }
-  }, De = (v, p, N) => {
-    N.preventDefault(), p.focusElement(p.first, null);
   }, Oe = (v, p, N) => {
+    N.preventDefault(), p.focusElement(p.first, null);
+  }, Re = (v, p, N) => {
     N.preventDefault(), p.focusElement(p.last, null);
   }, Ge = (v, p, N, F) => {
     N.stopPropagation();
-    const H = v.className.indexOf("k-orgchart-node-group-container") !== -1;
-    if (s.groupField && H) {
+    const S = v.className.indexOf("k-orgchart-node-group-container") !== -1;
+    if (s.groupField && S) {
       P.current && P.current.first && P.current.focusElement(P.current.first, null);
       return;
     }
@@ -163,7 +163,7 @@ const ht = (s, t) => {
     }
   };
   l.useEffect(() => {
-    if (o && w.current.first && w.current.first.setAttribute("tabindex", String(e)), !z) {
+    if (o && w.current.first && w.current.first.setAttribute("tabindex", String(e)), !$) {
       const v = Z.current.ownerDocument || document;
       ht((p) => {
         Te(p);
@@ -172,31 +172,31 @@ const ht = (s, t) => {
   }, [o, e]);
   const _e = (v) => {
     if (t.navigatable) {
-      const p = v.event, N = p.key === " " ? "Space" : p.key, F = s.groupField && p.target.className.indexOf("k-orgchart-card") !== -1 && P.current || w.current, H = p.target.closest(F.selectors.join(","));
+      const p = v.event, N = p.key === " " ? "Space" : p.key, F = s.groupField && p.target.className.indexOf("k-orgchart-card") !== -1 && P.current || w.current, S = p.target.closest(F.selectors.join(","));
       switch (N) {
         case "ArrowUp":
-          He(H, F, p, v);
+          Se(S, F, p, v);
           break;
         case "ArrowDown":
-          Se(H, F, p, v);
+          De(S, F, p, v);
           break;
         case "ArrowLeft":
-          Re(H, F, p);
+          He(S, F, p);
           break;
         case "ArrowRight":
-          Ae(H, F, p);
+          Ae(S, F, p);
           break;
         case "End":
-          Oe(H, F, p);
+          Re(S, F, p);
           break;
         case "Home":
-          De(H, F, p);
+          Oe(S, F, p);
           break;
         case "Enter":
-          Ge(H, F, p, v);
+          Ge(S, F, p, v);
           break;
         case "Escape":
-          We(H);
+          We(S);
           break;
       }
     }
@@ -214,9 +214,9 @@ const ht = (s, t) => {
       const p = v.event.target.closest(".k-orgchart-node-group-container");
       p && w.current.focusElement(p, null);
     }
-  }, $e = (v) => {
-    P.current = null;
   }, ze = (v) => {
+    P.current = null;
+  }, $e = (v) => {
     P.current = new ue({
       tabIndex: 0,
       root: v.containerRef,
@@ -235,15 +235,15 @@ const ht = (s, t) => {
       )
     },
     /* @__PURE__ */ l.createElement(Y.Provider, { value: {
-      cardColors: z || se,
+      cardColors: $ || se,
       onExpandChange: s.onExpandChange,
       onKeyDown: _e,
       onItemAction: Me,
       onItemDoubleClick: Ke,
       onItemContextMenu: Pe,
       onGroupAction: Be,
-      onGroupBlur: $e,
-      onGroupFocus: ze
+      onGroupBlur: ze,
+      onGroupFocus: $e
     }, ...oe }, s.children)
   );
 };
@@ -360,13 +360,13 @@ const Ee = (s) => {
     node: k,
     avatar: b,
     avatarType: I,
-    itemRender: R,
-    ...S
-  } = { ...s, ...t }, E = R;
+    itemRender: H,
+    ...D
+  } = { ...s, ...t }, E = H;
   return /* @__PURE__ */ l.createElement(
     "div",
     {
-      ...S,
+      ...D,
       className: _(
         s.className,
         kt,
@@ -479,19 +479,19 @@ const Ee = (s) => {
     const m = (n == null ? void 0 : n.width) || 0, d = (n == null ? void 0 : n.items.length) || 1, g = (m - (d - 1) * T) / d;
     e.width = g;
     const f = n == null ? void 0 : n.items.map((u) => {
-      const k = u[t] ? u[t].length : 0, b = i.find((R) => R.ids.includes(u[o])), I = (b == null ? void 0 : b.width) || 0;
+      const k = u[t] ? u[t].length : 0, b = i.find((H) => H.ids.includes(u[o])), I = (b == null ? void 0 : b.width) || 0;
       return (b == null ? void 0 : b.orientation) === "vertical" || k === 0 || !u.expanded ? 0 : I - (I - (k - 1) * T) / k;
     });
     n && (n.childLineWidths = f);
   });
 }, bt = (s, t, o) => {
-  const i = t || q, e = o || O;
+  const i = t || q, e = o || R;
   s.forEach((n) => {
-    const r = n.level, a = (i + e) * r + O * (r ? r - 1 : 0) - (e - O) * (r ? 1 : 0);
+    const r = n.level, a = (i + e) * r + R * (r ? r - 1 : 0) - (e - R) * (r ? 1 : 0);
     n.top = a;
   });
 }, It = (s, t, o) => {
-  const i = t || q, e = o || O;
+  const i = t || q, e = o || R;
   return Math.max(...s.map((r) => {
     const a = r.top || 0, c = r.items.length, m = r.orientation === "horizontal" ? i + e + e : c * (i + e);
     return a + m;
@@ -523,8 +523,8 @@ const Ee = (s) => {
     titleField: k,
     subtitleField: b,
     ariaLabel: I,
-    itemRender: R,
-    height: S
+    itemRender: H,
+    height: D
   } = { ...t, ...s }, E = [{
     items: e,
     level: 0,
@@ -545,23 +545,23 @@ const Ee = (s) => {
     groupField: n
   }), Et(E, r), xt(E, d, m), bt(E, a, c);
   const G = It(E, a, c);
-  return /* @__PURE__ */ l.createElement("div", { className: "k-orgchart-container", style: { width: i, height: S || G } }, E.map((y) => {
-    const x = y.level, B = y.items, D = x === 0 ? "center" : "around", $ = y.orientation;
+  return /* @__PURE__ */ l.createElement("div", { className: "k-orgchart-container", style: { width: i, height: D || G } }, E.map((y) => {
+    const x = y.level, B = y.items, O = x === 0 ? "center" : "around", z = y.orientation;
     return /* @__PURE__ */ l.createElement(
       "div",
       {
         role: x === 0 ? "tree" : "group",
         id: o + "-" + x + "-" + y.ids[0],
         "aria-label": x === 0 ? I : void 0,
-        "aria-orientation": x === 0 ? $ : void 0,
+        "aria-orientation": x === 0 ? z : void 0,
         key: y.ids[0] + "_" + x,
         className: _(
           "k-orgchart-group",
           `k-orgchart-level-${x}`,
           "k-pos-absolute",
           {
-            [`k-${te.orientationMap[$]}`]: $,
-            [`k-justify-content-${D}`]: D
+            [`k-${te.orientationMap[z]}`]: z,
+            [`k-justify-content-${O}`]: O
           }
         ),
         style: {
@@ -584,13 +584,13 @@ const Ee = (s) => {
           )
         },
         B.map((C, L) => {
-          const W = C[d] && C[d].length || g && C[g], z = W || y.orientation === "vertical" && L !== B.length - 1, V = y.orientation === "vertical" && L !== 0 ? 0 : c || O, U = y.childLineWidths ? Math.max(...y.childLineWidths) : void 0, X = C[f];
+          const W = C[d] && C[d].length || g && C[g], $ = W || y.orientation === "vertical" && L !== B.length - 1, V = y.orientation === "vertical" && L !== 0 ? 0 : c || R, U = y.childLineWidths ? Math.max(...y.childLineWidths) : void 0, X = C[f];
           return /* @__PURE__ */ l.createElement(
             xe,
             {
               id: o + "-" + (x + 1) + "-" + C[m],
               style: { width: U },
-              itemRender: R,
+              itemRender: H,
               cardHeight: a,
               cardWidth: r,
               verticalLine: V,
@@ -599,7 +599,7 @@ const Ee = (s) => {
               avatar: C[u],
               title: C[k],
               subtitle: C[b],
-              line: z,
+              line: $,
               expanded: X,
               node: C,
               childLineWidth: W && X && y.orientation === "horizontal" ? y.childLineWidths[L] : 0,
@@ -617,7 +617,7 @@ const yt = {
   name: "@progress/kendo-react-orgchart",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1700739475,
+  publishDate: 1701355244,
   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"
 }, Ft = (s) => {
@@ -682,13 +682,13 @@ const yt = {
     groupTitleHeight: k,
     groupSubtitleHeight: b,
     groupTitleRender: I,
-    groupSubtitleRender: R,
-    ...S
-  } = { ...t, ...s }, E = I, G = R, y = { height: k || ne }, x = { height: b || ie };
+    groupSubtitleRender: H,
+    ...D
+  } = { ...t, ...s }, E = I, G = H, y = { height: k || ne }, x = { height: b || ie };
   return /* @__PURE__ */ l.createElement(
     "div",
     {
-      ...S,
+      ...D,
       className: _(
         s.className,
         wt,
@@ -775,13 +775,13 @@ const yt = {
   t.forEach((d) => {
     const g = d[i];
     if (d[n] && g && g.length) {
-      const u = g.some((E) => E[i] && E[i].length || r && E[r]), k = u ? "horizontal" : "vertical", b = u ? null : o + 2 * T, I = s.find((E) => E.parentId === m), R = s.find((E) => E.ids.includes(m));
-      let S = !1;
+      const u = g.some((E) => E[i] && E[i].length || r && E[r]), k = u ? "horizontal" : "vertical", b = u ? null : o + 2 * T, I = s.find((E) => E.parentId === m), H = s.find((E) => E.ids.includes(m));
+      let D = !1;
       if (I) {
-        const E = I.ids[0], G = R.items.find((x) => x[e] === E), y = R.items.find((x) => x[e] === d[e]);
-        S = G[a] === y[a];
+        const E = I.ids[0], G = H.items.find((x) => x[e] === E), y = H.items.find((x) => x[e] === d[e]);
+        D = G[a] === y[a];
       }
-      I && S ? (I.ids.push(d[e]), I.items = I.items.concat(g)) : s.push({
+      I && D ? (I.ids.push(d[e]), I.items = I.items.concat(g)) : s.push({
         ids: [d[e]],
         items: g,
         level: c,
@@ -843,15 +843,15 @@ const yt = {
     }
   });
 }, At = (s, t, o, i, e) => {
-  const n = t || q, r = e || O, a = o + i + ke;
+  const n = t || q, r = e || R, a = o + i + ke;
   s.forEach((c) => {
-    const m = c.level, d = (n + r + a) * m + O * (m ? m - 1 : 0) - (r - O) * (m ? 1 : 0);
+    const m = c.level, d = (n + r + a) * m + R * (m ? m - 1 : 0) - (r - R) * (m ? 1 : 0);
     c.top = d;
   });
-}, Rt = (s, t, o, i, e) => {
-  const n = t || q, r = o || O, c = (i || ne) + (e || ie) + ke;
+}, Ht = (s, t, o, i, e) => {
+  const n = t || q, r = o || R, c = (i || ne) + (e || ie) + ke;
   return Math.max(...s.map((d) => {
-    const g = d.top || 0, f = Math.max(...d.groupedItems.map((b) => b.items.length)), u = d.hasChildren ? O : 0, k = d.orientation === "horizontal" ? n + r + c + r + u : f * (n + r) + c + r;
+    const g = d.top || 0, f = Math.max(...d.groupedItems.map((b) => b.items.length)), u = d.hasChildren ? R : 0, k = d.orientation === "horizontal" ? n + r + c + r + u : f * (n + r) + c + r;
     return g + k;
   }));
 }, Fe = (s) => {
@@ -882,14 +882,14 @@ const yt = {
     hasChildrenField: k,
     avatarField: b,
     titleField: I,
-    subtitleField: R,
-    cardsColors: S,
+    subtitleField: H,
+    cardsColors: D,
     ariaLabel: E,
     itemRender: G,
     groupTitleRender: y,
     groupSubtitleRender: x,
     height: B
-  } = { ...t, ...s }, D = [{
+  } = { ...t, ...s }, O = [{
     items: e,
     level: 0,
     hasChildren: !0,
@@ -899,7 +899,7 @@ const yt = {
     width: null
   }];
   ye({
-    dataByGroups: D,
+    dataByGroups: O,
     data: e,
     cardWidth: r,
     expandField: u,
@@ -907,30 +907,30 @@ const yt = {
     childrenField: f,
     idField: g,
     groupField: n
-  }), D.map((C) => {
+  }), O.map((C) => {
     C.groupedItems = ot(C.items, [{ field: n }]);
-  }), Nt(D, r), Tt(D, g), At(
-    D,
+  }), Nt(O, r), Tt(O, g), At(
+    O,
     a || q,
     c || ne,
     m || ie,
     d
   );
-  const $ = Rt(
-    D,
+  const z = Ht(
+    O,
     a || q,
     c || ne,
     m || ie
   );
-  return /* @__PURE__ */ React.createElement("div", { className: "k-orgchart-container", style: { width: i, height: B || $ } }, D.map((C) => {
+  return /* @__PURE__ */ l.createElement("div", { className: "k-orgchart-container", style: { width: i, height: B || z } }, O.map((C) => {
     const L = C.level, W = C.groupedItems.map((A) => {
       const ee = A.items.some((j) => j[u]);
       return {
         ...A,
         expanded: ee
       };
-    }), z = W.filter((A) => A.expanded), V = L === 0 ? "center" : "around", U = "horizontal", X = S && S[L] || "green";
-    return /* @__PURE__ */ React.createElement(
+    }), $ = W.filter((A) => A.expanded), V = L === 0 ? "center" : "around", U = "horizontal", X = D && D[L] || "green";
+    return /* @__PURE__ */ l.createElement(
       "div",
       {
         role: L === 0 ? "tree" : "group",
@@ -955,8 +955,8 @@ const yt = {
         }
       },
       e.length > 0 && W.map((A, ee) => {
-        const j = A.items.some((w) => w[f] && w[f].length || k && w[k]), oe = C.width ? (C.width - (W.length - 1) * T) / W.length : void 0, Z = z.findIndex((w) => w === A);
-        return /* @__PURE__ */ React.createElement(
+        const j = A.items.some((w) => w[f] && w[f].length || k && w[k]), oe = C.width ? (C.width - (W.length - 1) * T) / W.length : void 0, Z = $.findIndex((w) => w === A);
+        return /* @__PURE__ */ l.createElement(
           Lt,
           {
             id: o + "-" + (L + 1) + "-" + A.items[0][g],
@@ -967,7 +967,7 @@ const yt = {
             groupSubtitleRender: x,
             key: ee,
             level: L,
-            verticalLine: d || O,
+            verticalLine: d || R,
             title: A.items[0][n || I],
             subtitle: n,
             orientation: C.orientation,
@@ -977,7 +977,7 @@ const yt = {
             expanded: A.expanded,
             plus: j
           },
-          A.items.map((w, se) => /* @__PURE__ */ React.createElement(
+          A.items.map((w, se) => /* @__PURE__ */ l.createElement(
             xe,
             {
               cardHeight: a,
@@ -988,7 +988,7 @@ const yt = {
               level: L,
               avatar: w[b],
               title: w[I],
-              subtitle: w[R],
+              subtitle: w[H],
               verticalLine: 0,
               line: !1,
               node: w,
@@ -1073,12 +1073,12 @@ function Mt(s, t) {
     return [];
   let o = s;
   const i = t.cloneField || "cloned", e = t.expandField || ut, n = t.selectField || gt, r = t.checkField || pe, a = t.childrenField || mt;
-  return o = ae(o, e, t.expand, i, a), o = ae(o, n, t.select, i, a), o = ae(o, r, t.check, i, a), St(o, a, t.check), o;
+  return o = ae(o, e, t.expand, i, a), o = ae(o, n, t.select, i, a), o = ae(o, r, t.check, i, a), Dt(o, a, t.check), o;
 }
 function ae(s, t, o, i, e) {
   if (o) {
     const { ids: n, field: r } = Le(o, t), a = !ce(o) && o.idField ? Ve(n, o.idField, s, e) : n;
-    return Ht(s, a, r, i, e);
+    return St(s, a, r, i, e);
   } else
     return s;
 }
@@ -1086,7 +1086,7 @@ function Le(s, t) {
   let o, i;
   return ce(s) ? (o = s, i = t) : (o = s.ids || [], i = s.operationField || t), { ids: o, field: i };
 }
-function Ht(s, t, o, i, e) {
+function St(s, t, o, i, e) {
   let n = s;
   return t.forEach((r) => {
     n = Xe(n, r, (a) => Ne(o, a), i, e);
@@ -1105,7 +1105,7 @@ function Ne(s, t) {
       return;
   }
 }
-function St(s, t, o) {
+function Dt(s, t, o) {
   if (o && !ce(o) && o.applyCheckIndeterminate) {
     const { field: i } = Le(o, pe), e = o.checkIndeterminateField || ft;
     for (let n = 0; n < s.length; n++) {

package/package.json

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