@progress/kendo-react-orgchart 7.0.0-develop.9 → 7.0.1-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-react-orgchart.js +2 -2
- package/index.js +2 -2
- package/index.mjs +3 -2
- package/package.json +5 -4
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
(function(N,Q){typeof exports=="object"&&typeof module<"u"?Q(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")):typeof define=="function"&&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"],Q):(N=typeof globalThis<"u"?globalThis:N||self,Q(N.KendoReactOrgchart={},N.React,N.KendoReactCommon,N.KendoReactLayout,N.KendoReactButtons,N.KendoSvgIcons,N.PropTypes,N.KendoDataQuery))})(this,function(N,Q,x,X,Se,pe,Ae,De){"use strict";function fe(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const s in r)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(r,s);Object.defineProperty(t,s,i.get?i:{enumerable:!0,get:()=>r[s]})}}return t.default=r,Object.freeze(t)}const l=fe(Q),d=fe(Ae),ve=r=>window.getComputedStyle(r).backgroundColor,He=r=>r.toLowerCase().charCodeAt(0)-"a".charCodeAt(0),Ge=r=>{const t=r.match(/series-([a-z])$/);if(t!==null)return He(t[1]);const s=r.split("--series-")[1];return parseInt(s,10)-1},_e=30,Me=`
|
|
5
|
+
(function(N,Q){typeof exports=="object"&&typeof module<"u"?Q(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")):typeof define=="function"&&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"],Q):(N=typeof globalThis<"u"?globalThis:N||self,Q(N.KendoReactOrgchart={},N.React,N.KendoReactCommon,N.KendoReactLayout,N.KendoReactButtons,N.KendoSvgIcons,N.PropTypes,N.KendoDataQuery))})(this,function(N,Q,x,X,Se,pe,Ae,De){"use strict";"use client";function fe(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const s in r)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(r,s);Object.defineProperty(t,s,i.get?i:{enumerable:!0,get:()=>r[s]})}}return t.default=r,Object.freeze(t)}const l=fe(Q),d=fe(Ae),ve=r=>window.getComputedStyle(r).backgroundColor,He=r=>r.toLowerCase().charCodeAt(0)-"a".charCodeAt(0),Ge=r=>{const t=r.match(/series-([a-z])$/);if(t!==null)return He(t[1]);const s=r.split("--series-")[1];return parseInt(s,10)-1},_e=30,Me=`
|
|
6
6
|
<div class="k-var--series-unset"></div>
|
|
7
7
|
<div class="k-var--series">
|
|
8
8
|
${(()=>{let r=`
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
`;for(let t=0;t<_e;t++)r+=`
|
|
16
16
|
<div class="k-var--series-${t+1}"></div>`;return r})()}
|
|
17
17
|
</div>
|
|
18
|
-
`;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"})});
|
|
18
|
+
`;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:I,expandField:y,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",yt=f.getAttribute("aria-owns"),Oe=(ne=document.getElementById(yt))==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},It=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:It},...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:I,avatarType:y,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:y,themeColor:"secondary"},y==="image"?l.createElement("img",{src:I,alt:"KendoReact Avatar Customer Image"}):I),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(y=>y[i]&&y[i].length||o&&y[o]),E=u?"horizontal":"vertical",I=u?null:s;r.push({ids:[h[e]],items:g,level:c,parentId:m,hasChildren:u,orientation:E,width:I}),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,I)=>{I<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,I=i.find(D=>D.ids.includes(u[s])),y=(I==null?void 0:I.width)||0;return(I==null?void 0:I.orientation)==="vertical"||E===0||!u.expanded?0:y-(y-(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:I,ariaLabel:y,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?y: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[I],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",Ie="k-orgchart-node-group-title",ye="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:I,groupTitleRender:y,groupSubtitleRender:D,...G}={...t,...r},k=y,W=D,w={height:E||ie},b={height:I||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:Ie,title:i,items:u,level:c,expanded:p}):l.createElement("div",{className:Ie,style:w},i),W?l.createElement(W,{style:b,className:ye,subtitle:e,items:u,level:c,expanded:p}):l.createElement("div",{className:ye,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",I=u?null:s+2*O,y=r.find(k=>k.parentId===m),D=r.find(k=>k.ids.includes(m));let G=!1;if(y){const k=y.ids[0],W=D.items.find(b=>b[e]===k),w=D.items.find(b=>b[e]===h[e]);G=W[a]===w[a]}y&&G?(y.ids.push(h[e]),y.items=y.items.concat(g)):r.push({ids:[h[e]],items:g,level:c,parentId:m,hasChildren:u,orientation:E,width:I}),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(I=>I.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:I,titleField:y,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||y],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[I],title:L[y],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.useId());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
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Ue=require("react"),w=require("@progress/kendo-react-common"),Y=require("@progress/kendo-react-layout"),qe=require("@progress/kendo-react-buttons"),ge=require("@progress/kendo-svg-icons"),Ve=require("prop-types"),Qe=require("@progress/kendo-data-query");function Ce(s){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const o in s)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(s,o);Object.defineProperty(t,o,i.get?i:{enumerable:!0,get:()=>s[o]})}}return t.default=s,Object.freeze(t)}const l=Ce(Ue),h=Ce(Ve),ve=s=>window.getComputedStyle(s).backgroundColor,Xe=s=>s.toLowerCase().charCodeAt(0)-"a".charCodeAt(0),Ze=s=>{const t=s.match(/series-([a-z])$/);if(t!==null)return Xe(t[1]);const o=s.split("--series-")[1];return parseInt(o,10)-1},Je=30,Ye=()=>{let s=`
|
|
5
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Ue=require("react"),w=require("@progress/kendo-react-common"),Y=require("@progress/kendo-react-layout"),qe=require("@progress/kendo-react-buttons"),ge=require("@progress/kendo-svg-icons"),Ve=require("prop-types"),Qe=require("@progress/kendo-data-query");function Ce(s){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const o in s)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(s,o);Object.defineProperty(t,o,i.get?i:{enumerable:!0,get:()=>s[o]})}}return t.default=s,Object.freeze(t)}const l=Ce(Ue),h=Ce(Ve),ve=s=>window.getComputedStyle(s).backgroundColor,Xe=s=>s.toLowerCase().charCodeAt(0)-"a".charCodeAt(0),Ze=s=>{const t=s.match(/series-([a-z])$/);if(t!==null)return Xe(t[1]);const o=s.split("--series-")[1];return parseInt(o,10)-1},Je=30,Ye=()=>{let s=`
|
|
6
6
|
<div class="k-var--series-a"></div>
|
|
7
7
|
<div class="k-var--series-b"></div>
|
|
8
8
|
<div class="k-var--series-c"></div>
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
<div class="k-var--series">
|
|
16
16
|
${Ye()}
|
|
17
17
|
</div>
|
|
18
|
-
`;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;
|
|
18
|
+
`;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.useId());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
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
"use client";
|
|
5
6
|
import * as l from "react";
|
|
6
|
-
import { Navigation as ue, classNames as _, kendoThemeMaps as te,
|
|
7
|
+
import { Navigation as ue, classNames as _, kendoThemeMaps as te, useId as je, validatePackage as qe, isArray as ce, resolveItemsIds as Ve, updateItem as Xe, getNestedValue as ve } from "@progress/kendo-react-common";
|
|
7
8
|
import { Card as Ze, CardBody as Je, Avatar as Qe, CardTitle as Ye, CardSubtitle as et } from "@progress/kendo-react-layout";
|
|
8
9
|
import { Button as tt } from "@progress/kendo-react-buttons";
|
|
9
10
|
import { minusIcon as nt, plusIcon as it } from "@progress/kendo-svg-icons";
|
|
@@ -617,7 +618,7 @@ const yt = {
|
|
|
617
618
|
name: "@progress/kendo-react-orgchart",
|
|
618
619
|
productName: "KendoReact",
|
|
619
620
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
620
|
-
publishDate:
|
|
621
|
+
publishDate: 1702314364,
|
|
621
622
|
version: "",
|
|
622
623
|
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"
|
|
623
624
|
}, Ft = (s) => {
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-orgchart",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.1-develop.1",
|
|
4
4
|
"description": "React OrgChart renders a message to the user with information about the status of an app process. KendoReact OrgChart package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
7
7
|
"homepage": "https://www.telerik.com/kendo-react-ui",
|
|
8
8
|
"main": "./index.js",
|
|
9
|
+
"module": "./index.mjs",
|
|
9
10
|
"types": "./index.d.ts",
|
|
10
11
|
"exports": {
|
|
11
12
|
".": {
|
|
@@ -17,9 +18,9 @@
|
|
|
17
18
|
"peerDependencies": {
|
|
18
19
|
"@progress/kendo-data-query": "^1.0.0",
|
|
19
20
|
"@progress/kendo-licensing": "^1.3.0",
|
|
20
|
-
"@progress/kendo-react-buttons": "7.0.
|
|
21
|
-
"@progress/kendo-react-common": "7.0.
|
|
22
|
-
"@progress/kendo-react-layout": "7.0.
|
|
21
|
+
"@progress/kendo-react-buttons": "7.0.1-develop.1",
|
|
22
|
+
"@progress/kendo-react-common": "7.0.1-develop.1",
|
|
23
|
+
"@progress/kendo-react-layout": "7.0.1-develop.1",
|
|
23
24
|
"@progress/kendo-svg-icons": "^2.0.0",
|
|
24
25
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0",
|
|
25
26
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
|