@progress/kendo-react-orgchart 13.3.0-develop.6 → 13.3.0-develop.7

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

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

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1768476963,version:"13.3.0-develop.6",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"});exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1768482323,version:"13.3.0-develop.7",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"});exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = Object.freeze({
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1768476963,
-  version: "13.3.0-develop.6",
+  publishDate: 1768482323,
+  version: "13.3.0-develop.7",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
 });
 export {

package/package.json

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