@progress/kendo-react-orgchart 14.5.0-develop.9 → 15.0.0-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.
Files changed (21) hide show
  1. package/README.md +6 -6
  2. package/client/ClientOrgChart.js +1 -1
  3. package/client/ClientOrgChart.mjs +103 -103
  4. package/client/ExpandButton.js +1 -1
  5. package/client/ExpandButton.mjs +10 -9
  6. package/client/OrgChartCard.js +1 -1
  7. package/client/OrgChartCard.mjs +22 -25
  8. package/client/OrgChartGroupContainer.js +1 -1
  9. package/client/OrgChartGroupContainer.mjs +17 -19
  10. package/dist/cdn/js/kendo-react-orgchart.js +1 -1
  11. package/package-metadata.js +1 -1
  12. package/package-metadata.mjs +2 -2
  13. package/package.json +5 -5
  14. package/server/ServerGroupedOrgChart.js +1 -1
  15. package/server/ServerGroupedOrgChart.mjs +1 -1
  16. package/server/ServerOrgChart.js +1 -1
  17. package/server/ServerOrgChart.mjs +4 -10
  18. package/server/ServerOrgChartGroup.js +1 -1
  19. package/server/ServerOrgChartGroup.mjs +56 -67
  20. package/server/ServerOrgChartNode.js +1 -1
  21. package/server/ServerOrgChartNode.mjs +38 -42
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- [![KendoReact NPM Banner](https://raw.githubusercontent.com/telerik/kendo-react/master/images/kendoreact-github-banner.png)](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-orgchart&utm_content=banner)
1
+ [![KendoReact NPM Banner](https://raw.githubusercontent.com/telerik/kendo-react/master/images/kendoreact-github-banner.png)](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-orgchart&utm_content=banner)
2
2
 
3
3
  # KendoReact OrgChart Component for React
4
4
 
@@ -12,7 +12,7 @@
12
12
  >
13
13
  > [Start using KendoReact](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-orgchart) and speed up your development process!
14
14
  >
15
- > If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free).
15
+ > If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started).
16
16
 
17
17
  The [React OrgChart](https://www.telerik.com/kendo-react-ui/orgchart), part of KendoReact, renders a brief message to the user with information about the status of an application process and enables you to animate its rendering and control its position.
18
18
 
@@ -28,7 +28,7 @@ Among the features which the KendoReact OrgChart component delivers are:
28
28
 
29
29
  The following table outlines the key resources available with KendoReact and KendoReact Free.
30
30
 
31
- | | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
31
+ | | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
32
32
  | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
33
33
  | React components | 50+ | 120+ |
34
34
  | Four professional themes | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
@@ -44,7 +44,7 @@ The following table outlines the key resources available with KendoReact and Ken
44
44
 
45
45
  The following table outlines the key resources available with KendoReact and KendoReact Free.
46
46
 
47
- | | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
47
+ | | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
48
48
  | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
49
49
  | React components | 50+ | 120+ |
50
50
  | Four professional themes | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
@@ -60,7 +60,7 @@ The following table outlines the key resources available with KendoReact and Ken
60
60
 
61
61
  The following table outlines the key resources available with KendoReact and KendoReact Free.
62
62
 
63
- | | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
63
+ | | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
64
64
  | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
65
65
  | React components | 50+ | 120+ |
66
66
  | Four professional themes | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
@@ -83,7 +83,7 @@ For any issues you might encounter while working with the KendoReact OrgChart, u
83
83
  ## Resources
84
84
 
85
85
  - [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-orgchart)
86
- - [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
86
+ - [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started)
87
87
  - [Get Started with the KendoReact OrgChart](https://www.telerik.com/kendo-react-ui/components/orgchart/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-orgchart)
88
88
  - [API Reference of the KendoReact OrgChart](https://www.telerik.com/kendo-react-ui/components/orgchart/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-orgchart)
89
89
  - [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-orgchart)
package/client/ClientOrgChart.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),o=require("prop-types"),x=require("@progress/kendo-react-common"),Q=require("../theming/theme-service.js"),V=require("../utils/consts.js");function X(c){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const u in c)if(u!=="default"){const C=Object.getOwnPropertyDescriptor(c,u);Object.defineProperty(n,u,C.get?C:{enumerable:!0,get:()=>c[u]})}}return n.default=c,Object.freeze(n)}const d=X(J),I=d.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}),E=c=>{const n={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...c},{navigatable:u,id:C,tabIndex:b,className:D,style:O,data:Y,groupField:Z,cardWidth:ee,cardHeight:te,groupTitleHeight:ne,groupSubtitleHeight:oe,verticalLine:re,idField:ie,childrenField:ae,expandField:ce,hasChildrenField:le,avatarField:se,titleField:de,subtitleField:ue,onExpandChange:ge,onItemAction:p,onItemDoubleClick:he,onItemContextMenu:pe,onKeyDown:me,onGroupAction:k,onGroupBlur:fe,onGroupFocus:Ce,cardsColors:y,ariaLabel:be,itemRender:ve,groupTitleRender:Fe,groupSubtitleRender:xe,height:Ee,children:ke,...S}=n,v=d.useRef(null),l=d.useRef(new x.Navigation({tabIndex:b,root:v,selectors:[n.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[w,G]=d.useState([]),g=d.useRef(null),N=(e,t,i)=>{i.preventDefault(),t.focusNext(e)},R=(e,t,i)=>{i.preventDefault(),t.focusPrevious(e)},P=(e,t,i,r)=>{var s;if(i.preventDefault(),(n.groupField?r.items.some(f=>f[n.expandField]):r.item[n.expandField])&&n.onExpandChange)n.onExpandChange.call(void 0,r);else{const F=(s=e.closest(".k-orgchart-group"))==null?void 0:s.getAttribute("id"),m=document.querySelector(`[aria-owns="${F}"]`);m?t.focusElement(m,e):t.focusPrevious(e)}},T=(e,t,i,r)=>{var m;i.preventDefault();const a=n.groupField?r.items.some(h=>h[n.expandField]):r.item[n.expandField],s=n.groupField?r.items.find(h=>h[n.childrenField]):r.item[n.childrenField],f=n.groupField?r.items.some(h=>n.hasChildrenField&&h[n.hasChildrenField]):n.hasChildrenField&&r.item[n.hasChildrenField],F=n.groupField?s&&s[n.childrenField]&&s[n.childrenField].length:s&&s.length;if((f||F)&&!a&&n.onExpandChange)n.onExpandChange.call(void 0,r);else{const h=n.groupField?".k-orgchart-node-group-container":".k-orgchart-card",$=e.getAttribute("aria-owns"),A=(m=document.getElementById($))==null?void 0:m.querySelector(h);A?t.focusElement(A,e):t.focusNext(e)}},H=(e,t,i)=>{i.preventDefault(),t.focusElement(t.first,null)},L=(e,t,i)=>{i.preventDefault(),t.focusElement(t.last,null)},M=(e,t,i,r)=>{i.stopPropagation();const a=e.className.indexOf("k-orgchart-node-group-container")!==-1;if(c.groupField&&a){g.current&&g.current.first&&g.current.focusElement(g.current.first,null);return}n.onItemAction&&n.onItemAction({event:i,item:r.item})},_=e=>{if(c.groupField){const t=e.closest(".k-orgchart-node-group-container");t&&l.current.focusElement(t,null)}};d.useEffect(()=>{if(u&&l.current.first&&l.current.first.setAttribute("tabindex",String(b)),!y){const e=v.current.ownerDocument||document;Q.loadTheme(t=>{G(t)},e)}},[u,b]);const j=e=>{if(n.navigatable){const t=e.event,i=t.key===" "?"Space":t.key,r=c.groupField&&t.target.className.indexOf("k-orgchart-card")!==-1&&g.current||l.current,a=t.target.closest(r.selectors.join(","));switch(i){case"ArrowUp":P(a,r,t,e);break;case"ArrowDown":T(a,r,t,e);break;case"ArrowLeft":R(a,r,t);break;case"ArrowRight":N(a,r,t);break;case"End":L(a,r,t);break;case"Home":H(a,r,t);break;case"Enter":M(a,r,t,e);break;case"Escape":_(a);break}}},q=e=>{if(e.event.stopPropagation(),p&&p.call(void 0,e),n.navigatable){const t=e.event.target.closest(".k-orgchart-card");t&&l.current.focusElement(t,null)}},B=e=>{e.event.stopPropagation(),p&&p.call(void 0,e)},K=e=>{e.event.stopPropagation(),p&&p.call(void 0,e)},U=e=>{if(k&&k.call(void 0,e),n.navigatable){const t=e.event.target.closest(".k-orgchart-node-group-container");t&&l.current.focusElement(t,null)}},W=e=>{g.current=null},z=e=>{g.current=new x.Navigation({tabIndex:0,root:e.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})};return d.createElement("div",{style:O,ref:v,className:x.classNames(D,V.ORGCHART_CLASSNAME)},d.createElement(I.Provider,{value:{cardColors:y||w,onExpandChange:c.onExpandChange,onKeyDown:j,onItemAction:q,onItemDoubleClick:K,onItemContextMenu:B,onGroupAction:U,onGroupBlur:W,onGroupFocus:z},...S},c.children))};E.propTypes={className:o.string,style:o.object,id:o.string,ariaLabel:o.string,idField:o.string,childrenField:o.string,expandField:o.string,titleField:o.string,hasChildrenField:o.string,subtitleField:o.string,avatarField:o.string,cardsColors:o.array,data:o.array,groupField:o.string,cardHeight:o.number,cardWidth:o.number,groupTitleHeight:o.number,groupSubtitleHeight:o.number,verticalLine:o.number,height:o.oneOfType([o.string,o.number]),onExpandChange:o.func,onItemAction:o.func,onItemDoubleClick:o.func,onItemContextMenu:o.func,onGroupAction:o.func};E.displayName="KendoClientOrgChart";exports.ClientOrgChart=E;exports.OrgChartEventsContextContext=I;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("react"),r=require("prop-types"),k=require("@progress/kendo-react-common"),V=require("../theming/theme-service.js"),X=require("../utils/consts.js");function Y(c){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const u in c)if(u!=="default"){const b=Object.getOwnPropertyDescriptor(c,u);Object.defineProperty(n,u,b.get?b:{enumerable:!0,get:()=>c[u]})}}return n.default=c,Object.freeze(n)}const d=Y(Q),D=d.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}),E=c=>{const n={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...c},{navigatable:u,id:b,tabIndex:v,className:O,style:S,data:Z,groupField:ee,cardWidth:te,cardHeight:ne,groupTitleHeight:re,groupSubtitleHeight:oe,verticalLine:ie,idField:ae,childrenField:ce,expandField:le,hasChildrenField:se,avatarField:de,titleField:ue,subtitleField:ge,onExpandChange:he,onItemAction:m,onItemDoubleClick:pe,onItemContextMenu:me,onKeyDown:fe,onGroupAction:y,onGroupBlur:Ce,onGroupFocus:be,cardsColors:A,ariaLabel:ve,itemRender:Fe,groupTitleRender:xe,groupSubtitleRender:ke,height:Ee,children:ye,...w}=n,F=d.useRef(null),l=d.useRef(new k.Navigation({tabIndex:v,root:F,selectors:[n.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[G,R]=d.useState([]),g=d.useRef(null),N=(e,t,i)=>{i.preventDefault(),t.focusNext(e)},P=(e,t,i)=>{i.preventDefault(),t.focusPrevious(e)},T=(e,t,i,o)=>{var s;if(i.preventDefault(),(n.groupField?o.items.some(C=>C[n.expandField]):o.item[n.expandField])&&n.onExpandChange)n.onExpandChange.call(void 0,o);else{const x=(s=e.closest(".k-orgchart-group"))==null?void 0:s.getAttribute("id"),h=document.querySelector(`[aria-owns="${x}"]`),f=(h==null?void 0:h.querySelector(".k-orgchart-card"))||h;f?t.focusElement(f,e):t.focusPrevious(e)}},H=(e,t,i,o)=>{var h,f;i.preventDefault();const a=n.groupField?o.items.some(p=>p[n.expandField]):o.item[n.expandField],s=n.groupField?o.items.find(p=>p[n.childrenField]):o.item[n.childrenField],C=n.groupField?o.items.some(p=>n.hasChildrenField&&p[n.hasChildrenField]):n.hasChildrenField&&o.item[n.hasChildrenField],x=n.groupField?s&&s[n.childrenField]&&s[n.childrenField].length:s&&s.length;if((C||x)&&!a&&n.onExpandChange)n.onExpandChange.call(void 0,o);else{const p=n.groupField?".k-orgchart-node-group-container":".k-orgchart-card",J=(h=e.closest("[aria-owns]"))==null?void 0:h.getAttribute("aria-owns"),I=(f=document.getElementById(J))==null?void 0:f.querySelector(p);I?t.focusElement(I,e):t.focusNext(e)}},q=(e,t,i)=>{i.preventDefault(),t.focusElement(t.first,null)},L=(e,t,i)=>{i.preventDefault(),t.focusElement(t.last,null)},M=(e,t,i,o)=>{i.stopPropagation();const a=e.className.indexOf("k-orgchart-node-group-container")!==-1;if(c.groupField&&a){g.current&&g.current.first&&g.current.focusElement(g.current.first,null);return}n.onItemAction&&n.onItemAction({event:i,item:o.item})},_=e=>{if(c.groupField){const t=e.closest(".k-orgchart-node-group-container");t&&l.current.focusElement(t,null)}};d.useEffect(()=>{if(u&&l.current.first&&l.current.first.setAttribute("tabindex",String(v)),!A){const e=F.current.ownerDocument||document;V.loadTheme(t=>{R(t)},e)}},[u,v]);const j=e=>{if(n.navigatable){const t=e.event,i=t.key===" "?"Space":t.key,o=c.groupField&&t.target.className.indexOf("k-orgchart-card")!==-1&&g.current||l.current,a=t.target.closest(o.selectors.join(","));switch(i){case"ArrowUp":T(a,o,t,e);break;case"ArrowDown":H(a,o,t,e);break;case"ArrowLeft":P(a,o,t);break;case"ArrowRight":N(a,o,t);break;case"End":L(a,o,t);break;case"Home":q(a,o,t);break;case"Enter":M(a,o,t,e);break;case"Escape":_(a);break}}},B=e=>{if(e.event.stopPropagation(),m&&m.call(void 0,e),n.navigatable){const t=e.event.target.closest(".k-orgchart-card");t&&l.current.focusElement(t,null)}},K=e=>{e.event.stopPropagation(),m&&m.call(void 0,e)},U=e=>{e.event.stopPropagation(),m&&m.call(void 0,e)},W=e=>{if(y&&y.call(void 0,e),n.navigatable){const t=e.event.target.closest(".k-orgchart-node-group-container");t&&l.current.focusElement(t,null)}},z=e=>{g.current=null},$=e=>{g.current=new k.Navigation({tabIndex:0,root:e.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})};return d.createElement("div",{style:S,ref:F,className:k.classNames(O,X.ORGCHART_CLASSNAME)},d.createElement(D.Provider,{value:{cardColors:A||G,onExpandChange:c.onExpandChange,onKeyDown:j,onItemAction:B,onItemDoubleClick:U,onItemContextMenu:K,onGroupAction:W,onGroupBlur:z,onGroupFocus:$},...w},c.children))};E.propTypes={className:r.string,style:r.object,id:r.string,ariaLabel:r.string,idField:r.string,childrenField:r.string,expandField:r.string,titleField:r.string,hasChildrenField:r.string,subtitleField:r.string,avatarField:r.string,cardsColors:r.array,data:r.array,groupField:r.string,cardHeight:r.number,cardWidth:r.number,groupTitleHeight:r.number,groupSubtitleHeight:r.number,verticalLine:r.number,height:r.oneOfType([r.string,r.number]),onExpandChange:r.func,onItemAction:r.func,onItemDoubleClick:r.func,onItemContextMenu:r.func,onGroupAction:r.func};E.displayName="KendoClientOrgChart";exports.ClientOrgChart=E;exports.OrgChartEventsContextContext=D;
package/client/ClientOrgChart.mjs CHANGED
@@ -7,10 +7,10 @@
7
7
  */
8
8
  import * as s from "react";
9
9
  import o from "prop-types";
10
- import { Navigation as k, classNames as $ } from "@progress/kendo-react-common";
11
- import { loadTheme as z } from "../theming/theme-service.mjs";
12
- import { ORGCHART_CLASSNAME as J } from "../utils/consts.mjs";
13
- const Q = s.createContext({
10
+ import { Navigation as A, classNames as z } from "@progress/kendo-react-common";
11
+ import { loadTheme as J } from "../theming/theme-service.mjs";
12
+ import { ORGCHART_CLASSNAME as Q } from "../utils/consts.mjs";
13
+ const V = s.createContext({
14
14
  cardColors: void 0,
15
15
  onExpandChange: void 0,
16
16
  onKeyDown: void 0,
@@ -20,7 +20,7 @@ const Q = s.createContext({
20
20
  onGroupAction: void 0,
21
21
  onGroupBlur: void 0,
22
22
  onGroupFocus: void 0
23
- }), A = (g) => {
23
+ }), I = (h) => {
24
24
  const n = {
25
25
  tabIndex: 0,
26
26
  navigatable: !0,
@@ -31,80 +31,80 @@ const Q = s.createContext({
31
31
  avatarField: "avatar",
32
32
  titleField: "title",
33
33
  subtitleField: "subtitle",
34
- ...g
34
+ ...h
35
35
  }, {
36
- navigatable: v,
37
- id: V,
38
- tabIndex: f,
39
- className: I,
40
- style: y,
41
- data: X,
42
- groupField: Y,
43
- cardWidth: Z,
44
- cardHeight: ee,
45
- groupTitleHeight: te,
46
- groupSubtitleHeight: ne,
47
- verticalLine: oe,
48
- idField: re,
49
- childrenField: ie,
50
- expandField: ae,
51
- hasChildrenField: ce,
52
- avatarField: le,
53
- titleField: se,
54
- subtitleField: de,
55
- onExpandChange: ue,
56
- onItemAction: h,
57
- onItemDoubleClick: ge,
58
- onItemContextMenu: he,
59
- onKeyDown: pe,
60
- onGroupAction: b,
61
- onGroupBlur: me,
62
- onGroupFocus: fe,
63
- cardsColors: x,
64
- ariaLabel: Fe,
65
- itemRender: Ce,
66
- groupTitleRender: ve,
67
- groupSubtitleRender: be,
68
- height: xe,
69
- children: Ee,
70
- ...D
71
- } = n, F = s.useRef(null), c = s.useRef(
72
- new k({
73
- tabIndex: f,
74
- root: F,
36
+ navigatable: b,
37
+ id: X,
38
+ tabIndex: F,
39
+ className: y,
40
+ style: D,
41
+ data: Y,
42
+ groupField: Z,
43
+ cardWidth: ee,
44
+ cardHeight: te,
45
+ groupTitleHeight: ne,
46
+ groupSubtitleHeight: oe,
47
+ verticalLine: re,
48
+ idField: ie,
49
+ childrenField: ae,
50
+ expandField: ce,
51
+ hasChildrenField: le,
52
+ avatarField: se,
53
+ titleField: de,
54
+ subtitleField: ue,
55
+ onExpandChange: ge,
56
+ onItemAction: p,
57
+ onItemDoubleClick: he,
58
+ onItemContextMenu: pe,
59
+ onKeyDown: me,
60
+ onGroupAction: x,
61
+ onGroupBlur: fe,
62
+ onGroupFocus: Fe,
63
+ cardsColors: E,
64
+ ariaLabel: Ce,
65
+ itemRender: ve,
66
+ groupTitleRender: be,
67
+ groupSubtitleRender: xe,
68
+ height: Ee,
69
+ children: ke,
70
+ ...w
71
+ } = n, C = s.useRef(null), c = s.useRef(
72
+ new A({
73
+ tabIndex: F,
74
+ root: C,
75
75
  selectors: [n.groupField ? ".k-orgchart-node-group-container" : ".k-orgchart-card"],
76
76
  focusOptions: {}
77
77
  })
78
- ), [w, G] = s.useState([]), d = s.useRef(null), N = (e, t, i) => {
78
+ ), [G, S] = s.useState([]), d = s.useRef(null), R = (e, t, i) => {
79
79
  i.preventDefault(), t.focusNext(e);
80
- }, R = (e, t, i) => {
80
+ }, N = (e, t, i) => {
81
81
  i.preventDefault(), t.focusPrevious(e);
82
- }, S = (e, t, i, r) => {
82
+ }, O = (e, t, i, r) => {
83
83
  var l;
84
- if (i.preventDefault(), (n.groupField ? r.items.some((m) => m[n.expandField]) : r.item[n.expandField]) && n.onExpandChange)
84
+ if (i.preventDefault(), (n.groupField ? r.items.some((f) => f[n.expandField]) : r.item[n.expandField]) && n.onExpandChange)
85
85
  n.onExpandChange.call(void 0, r);
86
86
  else {
87
- const C = (l = e.closest(".k-orgchart-group")) == null ? void 0 : l.getAttribute("id"), p = document.querySelector(`[aria-owns="${C}"]`);
88
- p ? t.focusElement(p, e) : t.focusPrevious(e);
87
+ const v = (l = e.closest(".k-orgchart-group")) == null ? void 0 : l.getAttribute("id"), u = document.querySelector(`[aria-owns="${v}"]`), m = (u == null ? void 0 : u.querySelector(".k-orgchart-card")) || u;
88
+ m ? t.focusElement(m, e) : t.focusPrevious(e);
89
89
  }
90
- }, O = (e, t, i, r) => {
91
- var p;
90
+ }, T = (e, t, i, r) => {
91
+ var u, m;
92
92
  i.preventDefault();
93
- const a = n.groupField ? r.items.some((u) => u[n.expandField]) : r.item[n.expandField], l = n.groupField ? r.items.find((u) => u[n.childrenField]) : r.item[n.childrenField], m = n.groupField ? r.items.some((u) => n.hasChildrenField && u[n.hasChildrenField]) : n.hasChildrenField && r.item[n.hasChildrenField], C = n.groupField ? l && l[n.childrenField] && l[n.childrenField].length : l && l.length;
94
- if ((m || C) && !a && n.onExpandChange)
93
+ const a = n.groupField ? r.items.some((g) => g[n.expandField]) : r.item[n.expandField], l = n.groupField ? r.items.find((g) => g[n.childrenField]) : r.item[n.childrenField], f = n.groupField ? r.items.some((g) => n.hasChildrenField && g[n.hasChildrenField]) : n.hasChildrenField && r.item[n.hasChildrenField], v = n.groupField ? l && l[n.childrenField] && l[n.childrenField].length : l && l.length;
94
+ if ((f || v) && !a && n.onExpandChange)
95
95
  n.onExpandChange.call(void 0, r);
96
96
  else {
97
- const u = n.groupField ? ".k-orgchart-node-group-container" : ".k-orgchart-card", W = e.getAttribute("aria-owns"), E = (p = document.getElementById(W)) == null ? void 0 : p.querySelector(u);
98
- E ? t.focusElement(E, e) : t.focusNext(e);
97
+ const g = n.groupField ? ".k-orgchart-node-group-container" : ".k-orgchart-card", $ = (u = e.closest("[aria-owns]")) == null ? void 0 : u.getAttribute("aria-owns"), k = (m = document.getElementById($)) == null ? void 0 : m.querySelector(g);
98
+ k ? t.focusElement(k, e) : t.focusNext(e);
99
99
  }
100
- }, T = (e, t, i) => {
101
- i.preventDefault(), t.focusElement(t.first, null);
102
100
  }, H = (e, t, i) => {
101
+ i.preventDefault(), t.focusElement(t.first, null);
102
+ }, P = (e, t, i) => {
103
103
  i.preventDefault(), t.focusElement(t.last, null);
104
- }, P = (e, t, i, r) => {
104
+ }, L = (e, t, i, r) => {
105
105
  i.stopPropagation();
106
106
  const a = e.className.indexOf("k-orgchart-node-group-container") !== -1;
107
- if (g.groupField && a) {
107
+ if (h.groupField && a) {
108
108
  d.current && d.current.first && d.current.focusElement(d.current.first, null);
109
109
  return;
110
110
  }
@@ -112,96 +112,96 @@ const Q = s.createContext({
112
112
  event: i,
113
113
  item: r.item
114
114
  });
115
- }, L = (e) => {
116
- if (g.groupField) {
115
+ }, M = (e) => {
116
+ if (h.groupField) {
117
117
  const t = e.closest(".k-orgchart-node-group-container");
118
118
  t && c.current.focusElement(t, null);
119
119
  }
120
120
  };
121
121
  s.useEffect(() => {
122
- if (v && c.current.first && c.current.first.setAttribute("tabindex", String(f)), !x) {
123
- const e = F.current.ownerDocument || document;
124
- z((t) => {
125
- G(t);
122
+ if (b && c.current.first && c.current.first.setAttribute("tabindex", String(F)), !E) {
123
+ const e = C.current.ownerDocument || document;
124
+ J((t) => {
125
+ S(t);
126
126
  }, e);
127
127
  }
128
- }, [v, f]);
129
- const M = (e) => {
128
+ }, [b, F]);
129
+ const B = (e) => {
130
130
  if (n.navigatable) {
131
- const t = e.event, i = t.key === " " ? "Space" : t.key, r = g.groupField && t.target.className.indexOf("k-orgchart-card") !== -1 && d.current || c.current, a = t.target.closest(
131
+ const t = e.event, i = t.key === " " ? "Space" : t.key, r = h.groupField && t.target.className.indexOf("k-orgchart-card") !== -1 && d.current || c.current, a = t.target.closest(
132
132
  r.selectors.join(",")
133
133
  );
134
134
  switch (i) {
135
135
  case "ArrowUp":
136
- S(a, r, t, e);
136
+ O(a, r, t, e);
137
137
  break;
138
138
  case "ArrowDown":
139
- O(a, r, t, e);
139
+ T(a, r, t, e);
140
140
  break;
141
141
  case "ArrowLeft":
142
- R(a, r, t);
142
+ N(a, r, t);
143
143
  break;
144
144
  case "ArrowRight":
145
- N(a, r, t);
145
+ R(a, r, t);
146
146
  break;
147
147
  case "End":
148
- H(a, r, t);
148
+ P(a, r, t);
149
149
  break;
150
150
  case "Home":
151
- T(a, r, t);
151
+ H(a, r, t);
152
152
  break;
153
153
  case "Enter":
154
- P(a, r, t, e);
154
+ L(a, r, t, e);
155
155
  break;
156
156
  case "Escape":
157
- L(a);
157
+ M(a);
158
158
  break;
159
159
  }
160
160
  }
161
- }, B = (e) => {
162
- if (e.event.stopPropagation(), h && h.call(void 0, e), n.navigatable) {
161
+ }, K = (e) => {
162
+ if (e.event.stopPropagation(), p && p.call(void 0, e), n.navigatable) {
163
163
  const t = e.event.target.closest(".k-orgchart-card");
164
164
  t && c.current.focusElement(t, null);
165
165
  }
166
- }, K = (e) => {
167
- e.event.stopPropagation(), h && h.call(void 0, e);
168
166
  }, _ = (e) => {
169
- e.event.stopPropagation(), h && h.call(void 0, e);
167
+ e.event.stopPropagation(), p && p.call(void 0, e);
168
+ }, q = (e) => {
169
+ e.event.stopPropagation(), p && p.call(void 0, e);
170
170
  }, j = (e) => {
171
- if (b && b.call(void 0, e), n.navigatable) {
171
+ if (x && x.call(void 0, e), n.navigatable) {
172
172
  const t = e.event.target.closest(".k-orgchart-node-group-container");
173
173
  t && c.current.focusElement(t, null);
174
174
  }
175
- }, q = (e) => {
176
- d.current = null;
177
175
  }, U = (e) => {
178
- d.current = new k({
176
+ d.current = null;
177
+ }, W = (e) => {
178
+ d.current = new A({
179
179
  tabIndex: 0,
180
180
  root: e.containerRef,
181
181
  selectors: [".k-orgchart-card"],
182
182
  focusOptions: {}
183
183
  });
184
184
  };
185
- return /* @__PURE__ */ s.createElement("div", { style: y, ref: F, className: $(I, J) }, /* @__PURE__ */ s.createElement(
186
- Q.Provider,
185
+ return /* @__PURE__ */ s.createElement("div", { style: D, ref: C, className: z(y, Q) }, /* @__PURE__ */ s.createElement(
186
+ V.Provider,
187
187
  {
188
188
  value: {
189
- cardColors: x || w,
190
- onExpandChange: g.onExpandChange,
191
- onKeyDown: M,
192
- onItemAction: B,
193
- onItemDoubleClick: _,
194
- onItemContextMenu: K,
189
+ cardColors: E || G,
190
+ onExpandChange: h.onExpandChange,
191
+ onKeyDown: B,
192
+ onItemAction: K,
193
+ onItemDoubleClick: q,
194
+ onItemContextMenu: _,
195
195
  onGroupAction: j,
196
- onGroupBlur: q,
197
- onGroupFocus: U
196
+ onGroupBlur: U,
197
+ onGroupFocus: W
198
198
  },
199
- ...D
199
+ ...w
200
200
  },
201
- g.children
201
+ h.children
202
202
  ));
203
203
  };
204
- A.propTypes = {
204
+ I.propTypes = {
205
205
  className: o.string,
206
206
  style: o.object,
207
207
  id: o.string,
@@ -228,8 +228,8 @@ A.propTypes = {
228
228
  onItemContextMenu: o.func,
229
229
  onGroupAction: o.func
230
230
  };
231
- A.displayName = "KendoClientOrgChart";
231
+ I.displayName = "KendoClientOrgChart";
232
232
  export {
233
- A as ClientOrgChart,
234
- Q as OrgChartEventsContextContext
233
+ I as ClientOrgChart,
234
+ V as OrgChartEventsContextContext
235
235
  };
package/client/ExpandButton.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),l=require("@progress/kendo-react-buttons"),a=require("@progress/kendo-svg-icons"),d=require("./ClientOrgChart.js");function p(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,o.get?o:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const r=p(i),g=t=>{const{expanded:e,node:n,nodes:o}=t,c=r.useContext(d.OrgChartEventsContextContext),s=u=>{c.onExpandChange&&c.onExpandChange.call(void 0,{event:u,expand:!e,item:n,items:o})};return r.createElement(l.Button,{className:"k-orgchart-button",icon:e?"minus":"plus",tabIndex:-1,svgIcon:e?a.minusIcon:a.plusIcon,"aria-label":e?"collapse":"expand",onClick:s})};exports.ExpandButton=g;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),d=require("@progress/kendo-react-buttons"),c=require("@progress/kendo-svg-icons"),l=require("./ClientOrgChart.js");function p(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const a=p(i),g=e=>{const{expanded:t,node:n,nodes:o}=e,r=a.useContext(l.OrgChartEventsContextContext),s=u=>{r.onExpandChange&&r.onExpandChange.call(void 0,{event:u,expand:!t,item:n,items:o})};return a.createElement(d.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?c.minusIcon:c.plusIcon,role:"presentation","aria-hidden":!0,onClick:s})};exports.ExpandButton=g;
package/client/ExpandButton.mjs CHANGED
@@ -6,26 +6,27 @@
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
8
  import * as o from "react";
9
- import { Button as m } from "@progress/kendo-react-buttons";
10
- import { minusIcon as p, plusIcon as i } from "@progress/kendo-svg-icons";
11
- import { OrgChartEventsContextContext as x } from "./ClientOrgChart.mjs";
9
+ import { Button as i } from "@progress/kendo-react-buttons";
10
+ import { minusIcon as m, plusIcon as p } from "@progress/kendo-svg-icons";
11
+ import { OrgChartEventsContextContext as d } from "./ClientOrgChart.mjs";
12
12
  const C = (e) => {
13
- const { expanded: n, node: a, nodes: r } = e, t = o.useContext(x), s = (c) => {
13
+ const { expanded: n, node: r, nodes: a } = e, t = o.useContext(d), s = (c) => {
14
14
  t.onExpandChange && t.onExpandChange.call(void 0, {
15
15
  event: c,
16
16
  expand: !n,
17
- item: a,
18
- items: r
17
+ item: r,
18
+ items: a
19
19
  });
20
20
  };
21
21
  return /* @__PURE__ */ o.createElement(
22
- m,
22
+ i,
23
23
  {
24
24
  className: "k-orgchart-button",
25
25
  icon: n ? "minus" : "plus",
26
26
  tabIndex: -1,
27
- svgIcon: n ? p : i,
28
- "aria-label": n ? "collapse" : "expand",
27
+ svgIcon: n ? m : p,
28
+ role: "presentation",
29
+ "aria-hidden": !0,
29
30
  onClick: s
30
31
  }
31
32
  );
package/client/OrgChartCard.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),b=require("@progress/kendo-react-layout"),g=require("@progress/kendo-react-common"),h=require("./ClientOrgChart.js");function k(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const c in n)if(c!=="default"){const r=Object.getOwnPropertyDescriptor(n,c);Object.defineProperty(e,c,r.get?r:{enumerable:!0,get:()=>n[c]})}}return e.default=n,Object.freeze(e)}const l=k(f),y=n=>{const{node:e,children:c,style:r,...s}=n,[a,i]=l.useState(!1),t=l.useContext(h.OrgChartEventsContextContext),u=o=>{t.onKeyDown&&t.onKeyDown.call(void 0,{event:o,item:e})},d=o=>{t.onItemAction&&t.onItemAction.call(void 0,{event:o,item:e})},C=o=>{t.onItemContextMenu&&t.onItemContextMenu.call(void 0,{event:o,item:e})},m=o=>{t.onItemDoubleClick&&t.onItemDoubleClick.call(void 0,{event:o,item:e})};return l.createElement(b.Card,{orientation:null,role:"treeitem",className:g.classNames("k-orgchart-card",{"k-focus":a}),onClick:d,onKeyDown:u,onContextMenu:C,onDoubleClick:m,style:r,"aria-selected":a,"aria-keyshortcuts":"Enter",onFocus:()=>i(!0),onBlur:()=>i(!1),...s},c)};exports.OrgChartCard=y;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),b=require("@progress/kendo-react-layout"),g=require("@progress/kendo-react-common"),h=require("./ClientOrgChart.js");function k(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const c in n)if(c!=="default"){const r=Object.getOwnPropertyDescriptor(n,c);Object.defineProperty(e,c,r.get?r:{enumerable:!0,get:()=>n[c]})}}return e.default=n,Object.freeze(e)}const l=k(f),y=n=>{const{node:e,children:c,style:r,...i}=n,[s,a]=l.useState(!1),t=l.useContext(h.OrgChartEventsContextContext),u=o=>{t.onKeyDown&&t.onKeyDown.call(void 0,{event:o,item:e})},d=o=>{t.onItemAction&&t.onItemAction.call(void 0,{event:o,item:e})},C=o=>{t.onItemContextMenu&&t.onItemContextMenu.call(void 0,{event:o,item:e})},m=o=>{t.onItemDoubleClick&&t.onItemDoubleClick.call(void 0,{event:o,item:e})};return l.createElement(b.Card,{orientation:null,className:g.classNames("k-orgchart-card",{"k-focus":s}),onClick:d,onKeyDown:u,onContextMenu:C,onDoubleClick:m,style:r,onFocus:()=>a(!0),onBlur:()=>a(!1),...i},c)};exports.OrgChartCard=y;
package/client/OrgChartCard.mjs CHANGED
@@ -8,49 +8,46 @@
8
8
  import * as n from "react";
9
9
  import { Card as f } from "@progress/kendo-react-layout";
10
10
  import { classNames as h } from "@progress/kendo-react-common";
11
- import { OrgChartEventsContextContext as k } from "./ClientOrgChart.mjs";
12
- const I = (r) => {
13
- const { node: o, children: i, style: a, ...s } = r, [l, c] = n.useState(!1), e = n.useContext(k), m = (t) => {
11
+ import { OrgChartEventsContextContext as x } from "./ClientOrgChart.mjs";
12
+ const p = (c) => {
13
+ const { node: t, children: i, style: r, ...a } = c, [s, l] = n.useState(!1), e = n.useContext(x), m = (o) => {
14
14
  e.onKeyDown && e.onKeyDown.call(void 0, {
15
- event: t,
16
- item: o
15
+ event: o,
16
+ item: t
17
17
  });
18
- }, u = (t) => {
18
+ }, C = (o) => {
19
19
  e.onItemAction && e.onItemAction.call(void 0, {
20
- event: t,
21
- item: o
20
+ event: o,
21
+ item: t
22
22
  });
23
- }, C = (t) => {
23
+ }, u = (o) => {
24
24
  e.onItemContextMenu && e.onItemContextMenu.call(void 0, {
25
- event: t,
26
- item: o
25
+ event: o,
26
+ item: t
27
27
  });
28
- }, d = (t) => {
28
+ }, d = (o) => {
29
29
  e.onItemDoubleClick && e.onItemDoubleClick.call(void 0, {
30
- event: t,
31
- item: o
30
+ event: o,
31
+ item: t
32
32
  });
33
33
  };
34
34
  return /* @__PURE__ */ n.createElement(
35
35
  f,
36
36
  {
37
37
  orientation: null,
38
- role: "treeitem",
39
- className: h("k-orgchart-card", { "k-focus": l }),
40
- onClick: u,
38
+ className: h("k-orgchart-card", { "k-focus": s }),
39
+ onClick: C,
41
40
  onKeyDown: m,
42
- onContextMenu: C,
41
+ onContextMenu: u,
43
42
  onDoubleClick: d,
44
- style: a,
45
- "aria-selected": l,
46
- "aria-keyshortcuts": "Enter",
47
- onFocus: () => c(!0),
48
- onBlur: () => c(!1),
49
- ...s
43
+ style: r,
44
+ onFocus: () => l(!0),
45
+ onBlur: () => l(!1),
46
+ ...a
50
47
  },
51
48
  i
52
49
  );
53
50
  };
54
51
  export {
55
- I as OrgChartCard
52
+ p as OrgChartCard
56
53
  };
package/client/OrgChartGroupContainer.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),C=require("@progress/kendo-react-common"),h=require("./ClientOrgChart.js");function y(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(e,r,c.get?c:{enumerable:!0,get:()=>o[r]})}}return e.default=o,Object.freeze(e)}const s=y(g),O=o=>{const{nodes:e,children:r,style:c,...i}=o,[a,u]=s.useState(!1),t=s.useContext(h.OrgChartEventsContextContext),l=s.useRef(null),f=n=>{t.onKeyDown&&t.onKeyDown({event:n,items:e})},d=n=>{t.onGroupAction&&t.onGroupAction({event:n,items:e})},p=n=>{u(!0),t.onGroupFocus&&t.onGroupFocus({event:n,items:e,containerRef:l})},m=n=>{u(!1),t.onGroupBlur&&t.onGroupBlur({event:n,items:e})};return s.createElement("div",{role:"treeitem","aria-selected":a,ref:l,className:C.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":a}),style:c,onKeyDown:f,onClick:d,onFocus:p,onBlur:m,...i},r)};exports.OrgChartGroupContainer=O;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),C=require("@progress/kendo-react-common"),h=require("./ClientOrgChart.js");function y(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(e,r,c.get?c:{enumerable:!0,get:()=>o[r]})}}return e.default=o,Object.freeze(e)}const s=y(g),O=o=>{const{nodes:e,children:r,style:c,...l}=o,[i,u]=s.useState(!1),t=s.useContext(h.OrgChartEventsContextContext),a=s.useRef(null),f=n=>{t.onKeyDown&&t.onKeyDown({event:n,items:e})},d=n=>{t.onGroupAction&&t.onGroupAction({event:n,items:e})},p=n=>{u(!0),t.onGroupFocus&&t.onGroupFocus({event:n,items:e,containerRef:a})},m=n=>{u(!1),t.onGroupBlur&&t.onGroupBlur({event:n,items:e})};return s.createElement("div",{ref:a,className:C.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":i}),style:c,onKeyDown:f,onClick:d,onFocus:p,onBlur:m,...l},r)};exports.OrgChartGroupContainer=O;
package/client/OrgChartGroupContainer.mjs CHANGED
@@ -5,47 +5,45 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- import * as n from "react";
8
+ import * as t from "react";
9
9
  import { classNames as h } from "@progress/kendo-react-common";
10
10
  import { OrgChartEventsContextContext as C } from "./ClientOrgChart.mjs";
11
- const x = (a) => {
12
- const { nodes: t, children: l, style: u, ...i } = a, [r, s] = n.useState(!1), o = n.useContext(C), c = n.useRef(null), m = (e) => {
11
+ const x = (c) => {
12
+ const { nodes: n, children: u, style: a, ...l } = c, [i, s] = t.useState(!1), o = t.useContext(C), r = t.useRef(null), f = (e) => {
13
13
  o.onKeyDown && o.onKeyDown({
14
14
  event: e,
15
- items: t
15
+ items: n
16
16
  });
17
- }, f = (e) => {
17
+ }, m = (e) => {
18
18
  o.onGroupAction && o.onGroupAction({
19
19
  event: e,
20
- items: t
20
+ items: n
21
21
  });
22
22
  }, p = (e) => {
23
23
  s(!0), o.onGroupFocus && o.onGroupFocus({
24
24
  event: e,
25
- items: t,
26
- containerRef: c
25
+ items: n,
26
+ containerRef: r
27
27
  });
28
28
  }, d = (e) => {
29
29
  s(!1), o.onGroupBlur && o.onGroupBlur({
30
30
  event: e,
31
- items: t
31
+ items: n
32
32
  });
33
33
  };
34
- return /* @__PURE__ */ n.createElement(
34
+ return /* @__PURE__ */ t.createElement(
35
35
  "div",
36
36
  {
37
- role: "treeitem",
38
- "aria-selected": r,
39
- ref: c,
40
- className: h("k-orgchart-node-group-container", "k-vstack", { "k-focus": r }),
41
- style: u,
42
- onKeyDown: m,
43
- onClick: f,
37
+ ref: r,
38
+ className: h("k-orgchart-node-group-container", "k-vstack", { "k-focus": i }),
39
+ style: a,
40
+ onKeyDown: f,
41
+ onClick: m,
44
42
  onFocus: p,
45
43
  onBlur: d,
46
- ...i
44
+ ...l
47
45
  },
48
- l
46
+ u
49
47
  );
50
48
  };
51
49
  export {
package/dist/cdn/js/kendo-react-orgchart.js CHANGED
@@ -12,4 +12,4 @@
12
12
  * Licensed under commercial license. See LICENSE.md in the package root for more information
13
13
  *-------------------------------------------------------------------------------------------
14
14
  */
15
- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@progress/kendo-react-common"),require("@progress/kendo-react-layout"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("prop-types"),require("@progress/kendo-data-query")):"function"==typeof define&&define.amd?define(["exports","react","@progress/kendo-react-common","@progress/kendo-react-layout","@progress/kendo-react-buttons","@progress/kendo-svg-icons","prop-types","@progress/kendo-data-query"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactOrgchart={},e.React,e.KendoReactCommon,e.KendoReactLayout,e.KendoReactButtons,e.KendoSvgIcons,e.PropTypes,e.KendoDataQuery)}(this,function(e,t,n,i,r,a,l,o){"use strict";function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var s=d(t);const c=e=>window.getComputedStyle(e).backgroundColor,u=`\n <div class="k-var--series-unset"></div>\n <div class="k-var--series">\n ${(()=>{let e='\n <div class="k-var--series-a"></div>\n <div class="k-var--series-b"></div>\n <div class="k-var--series-c"></div>\n <div class="k-var--series-d"></div>\n <div class="k-var--series-e"></div>\n <div class="k-var--series-f"></div>\n';for(let t=0;t<30;t++)e+=`\n <div class="k-var--series-${t+1}"></div>`;return e})()}\n </div>\n`;let h=class{getSeriesColors(){const e=this.element,t=[].slice.call(e.querySelectorAll(".k-var--series div")),n=c(e.querySelector(".k-var--series-unset"));return t.reduce((e,t)=>{const i=(e=>{const t=e.match(/series-([a-z])$/);if(null!==t)return(e=>e.toLowerCase().charCodeAt(0)-97)(t[1]);const n=e.split("--series-")[1];return parseInt(n,10)-1})(t.className),r=c(t);return r!==n&&(e[i]=r),e},[])}};const p="checked",m=25,g=40,v=s.createContext({cardColors:void 0,onExpandChange:void 0,onKeyDown:void 0,onItemAction:void 0,onItemContextMenu:void 0,onItemDoubleClick:void 0,onGroupAction:void 0,onGroupBlur:void 0,onGroupFocus:void 0}),f=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...e},{navigatable:i,id:r,tabIndex:a,className:l,style:o,data:d,groupField:c,cardWidth:p,cardHeight:m,groupTitleHeight:g,groupSubtitleHeight:f,verticalLine:k,idField:F,childrenField:y,expandField:b,hasChildrenField:x,avatarField:C,titleField:E,subtitleField:w,onExpandChange:I,onItemAction:N,onItemDoubleClick:A,onItemContextMenu:L,onKeyDown:T,onGroupAction:O,onGroupBlur:R,onGroupFocus:D,cardsColors:S,ariaLabel:G,itemRender:W,groupTitleRender:M,groupSubtitleRender:K,height:H,children:B,...z}=t,q=s.useRef(null),j=s.useRef(new n.Navigation({tabIndex:a,root:q,selectors:[t.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[P,$]=s.useState([]),_=s.useRef(null);s.useEffect(()=>{if(i&&j.current.first&&j.current.first.setAttribute("tabindex",String(a)),!S){((e,t)=>{const n=new h,i=n.element=t.createElement("div");let r;i.style.display="none",i.innerHTML=u,t.body.appendChild(i);try{r=n.getSeriesColors()}finally{t.body.removeChild(n.element),delete n.element,e(r)}})(e=>{$(e)},q.current.ownerDocument||document)}},[i,a]);return s.createElement("div",{style:o,ref:q,className:n.classNames(l,"k-orgchart")},s.createElement(v.Provider,{value:{cardColors:S||P,onExpandChange:e.onExpandChange,onKeyDown:n=>{if(t.navigatable){const i=n.event,r=" "===i.key?"Space":i.key,a=e.groupField&&-1!==i.target.className.indexOf("k-orgchart-card")&&_.current||j.current,l=i.target.closest(a.selectors.join(","));switch(r){case"ArrowUp":((e,n,i,r)=>{var a;if(i.preventDefault(),(t.groupField?r.items.some(e=>e[t.expandField]):r.item[t.expandField])&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const t=null==(a=e.closest(".k-orgchart-group"))?void 0:a.getAttribute("id"),i=document.querySelector(`[aria-owns="${t}"]`);i?n.focusElement(i,e):n.focusPrevious(e)}})(l,a,i,n);break;case"ArrowDown":((e,n,i,r)=>{var a;i.preventDefault();const l=t.groupField?r.items.some(e=>e[t.expandField]):r.item[t.expandField],o=t.groupField?r.items.find(e=>e[t.childrenField]):r.item[t.childrenField],d=t.groupField?r.items.some(e=>t.hasChildrenField&&e[t.hasChildrenField]):t.hasChildrenField&&r.item[t.hasChildrenField],s=t.groupField?o&&o[t.childrenField]&&o[t.childrenField].length:o&&o.length;if((d||s)&&!l&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const i=t.groupField?".k-orgchart-node-group-container":".k-orgchart-card",r=e.getAttribute("aria-owns"),l=null==(a=document.getElementById(r))?void 0:a.querySelector(i);l?n.focusElement(l,e):n.focusNext(e)}})(l,a,i,n);break;case"ArrowLeft":((e,t,n)=>{n.preventDefault(),t.focusPrevious(e)})(l,a,i);break;case"ArrowRight":((e,t,n)=>{n.preventDefault(),t.focusNext(e)})(l,a,i);break;case"End":((e,t,n)=>{n.preventDefault(),t.focusElement(t.last,null)})(0,a,i);break;case"Home":((e,t,n)=>{n.preventDefault(),t.focusElement(t.first,null)})(0,a,i);break;case"Enter":((n,i,r,a)=>{r.stopPropagation();const l=-1!==n.className.indexOf("k-orgchart-node-group-container");e.groupField&&l?_.current&&_.current.first&&_.current.focusElement(_.current.first,null):t.onItemAction&&t.onItemAction({event:r,item:a.item})})(l,0,i,n);break;case"Escape":(t=>{if(e.groupField){const e=t.closest(".k-orgchart-node-group-container");e&&j.current.focusElement(e,null)}})(l)}}},onItemAction:e=>{if(e.event.stopPropagation(),N&&N.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-card");t&&j.current.focusElement(t,null)}},onItemDoubleClick:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onItemContextMenu:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onGroupAction:e=>{if(O&&O.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-node-group-container");t&&j.current.focusElement(t,null)}},onGroupBlur:e=>{_.current=null},onGroupFocus:e=>{_.current=new n.Navigation({tabIndex:0,root:e.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})}},...z},e.children))};f.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onItemDoubleClick:l.func,onItemContextMenu:l.func,onGroupAction:l.func},f.displayName="KendoClientOrgChart";const k=e=>{const{expanded:t,node:n,nodes:i}=e,l=s.useContext(v);return s.createElement(r.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?a.minusIcon:a.plusIcon,"aria-label":t?"collapse":"expand",onClick:e=>{l.onExpandChange&&l.onExpandChange.call(void 0,{event:e,expand:!t,item:n,items:i})}})},F=e=>{const{node:t,children:r,style:a,...l}=e,[o,d]=s.useState(!1),c=s.useContext(v);return s.createElement(i.Card,{orientation:null,role:"treeitem",className:n.classNames("k-orgchart-card",{"k-focus":o}),onClick:e=>{c.onItemAction&&c.onItemAction.call(void 0,{event:e,item:t})},onKeyDown:e=>{c.onKeyDown&&c.onKeyDown.call(void 0,{event:e,item:t})},onContextMenu:e=>{c.onItemContextMenu&&c.onItemContextMenu.call(void 0,{event:e,item:t})},onDoubleClick:e=>{c.onItemDoubleClick&&c.onItemDoubleClick.call(void 0,{event:e,item:t})},style:a,"aria-selected":o,"aria-keyshortcuts":"Enter",onFocus:()=>d(!0),onBlur:()=>d(!1),...l},r)},y=e=>{const{level:t,children:n}=e,r=s.useContext(v),a=r.cardColors&&r.cardColors[t]||"green";return s.createElement(i.CardBody,{className:"k-hstack",style:{borderTopColor:a}},n)},b=e=>{const{id:t,title:r,subtitle:a,level:l,childLineWidth:o,cardWidth:d,cardHeight:c,verticalLine:u,color:h,line:p,plus:m,expanded:g,node:v,avatar:f,avatarType:b,itemRender:x,showAvatar:C,...E}={avatarType:"image",...e},w=x;return s.createElement("div",{...E,className:n.classNames(e.className,"k-orgchart-node","k-vstack","k-align-items-center")},0!==l&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:u}}),s.createElement(F,{node:v,style:{width:d,height:c},"aria-level":l+1,"aria-expanded":!!g,"aria-owns":t},s.createElement(y,{level:l},w?s.createElement(w,{item:v,title:r,subtitle:a,level:l,expanded:g,color:h}):s.createElement(s.Fragment,null,C&&s.createElement(i.Avatar,{type:b,themeColor:"secondary"},"image"===b?s.createElement("img",{src:f,alt:"KendoReact Avatar Customer"}):f),s.createElement("div",{className:"k-card-title-wrap k-vstack"},s.createElement(i.CardTitle,{className:"k-text-ellipsis"},r),s.createElement("span",{className:"k-spacer"}),s.createElement(i.CardSubtitle,{className:"k-text-ellipsis"},a)),s.createElement("span",{className:"k-spacer"})))),p&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),m&&s.createElement(k,{expanded:g,node:v}),m&&!!o&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:o,marginTop:-15}}))},x=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach(t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some(e=>e[i]&&e[i].length||l&&e[l]),h=u?"horizontal":"vertical",p=u?null:n;e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),x({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}})},C=(e,t)=>{const n=t||300,i=e.sort((e,t)=>t.level-e.level);i.forEach(e=>{if(!e.width){const t=i.filter(t=>e.ids.includes(t.parentId)),r=t.length?Math.max(...t.map(e=>e.width||0)):n,a="horizontal"===e.orientation?e.items.length:1,l=r*a+m*(a-1);e.width=l}})},E=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:o,verticalLine:d,idField:c,childrenField:u,hasChildrenField:h,expandField:p,avatarField:v,titleField:f,subtitleField:k,ariaLabel:F,itemRender:y,height:E,avatarType:w,showAvatar:I}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",avatarType:"image",showAvatar:!0,...e},N=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];x({dataByGroups:N,data:r,cardWidth:l,expandField:p,hasChildrenField:h,childrenField:u,idField:c,groupField:a}),C(N,l),((e,t,n)=>{const i=e.sort((e,t)=>e.level-t.level);i.forEach(e=>{if(0===e.level)return;const r=i.find(t=>t.ids.includes(e.parentId)),a=(null==r?void 0:r.items.findIndex(t=>e.ids.includes(t[n])))||0,l=(null==r?void 0:r.items)||[],o=r.width?(r.width-(l.length-1)*m)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach((e,n)=>{n<a&&(t+=o+m)}),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.items.length)||1,c=(d-(s-1)*m)/s;e.width=c;const u=null==r?void 0:r.items.map(e=>{const r=e[t]?e[t].length:0,a=i.find(t=>t.ids.includes(e[n])),l=(null==a?void 0:a.width)||0;return"vertical"!==(null==a?void 0:a.orientation)&&0!==r&&e.expanded?l-(l-(r-1)*m)/r:0});r&&(r.childLineWidths=u)})})(N,u,c),((e,t,n)=>{const i=t||80,r=n||g;e.forEach(e=>{const t=e.level,n=(i+r)*t+g*(t?t-1:0)-(r-g)*(t?1:0);e.top=n})})(N,o,d);const A=((e,t,n)=>{const i=t||80,r=n||g;return Math.max(...e.map(e=>{const t=e.top||0,n=e.items.length;return t+("horizontal"===e.orientation?i+r+r:n*(i+r))}))})(N,o,d);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:E||A}},N.map(e=>{const i=e.level,r=e.items,a=e.orientation;return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?F:void 0,"aria-orientation":0===i?a:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[a]}`]:a}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${n.kendoThemeMaps.orientationMap[e.orientation]}`]:e.orientation})},r.map((n,a)=>{const m=n[u]&&n[u].length||h&&n[h],F=m||"vertical"===e.orientation&&a!==r.length-1,x="vertical"===e.orientation&&0!==a?0:d||g,C=e.childLineWidths?Math.max(...e.childLineWidths):void 0,E=n[p];return s.createElement(b,{id:t+"-"+(i+1)+"-"+n[c],style:{width:C},itemRender:y,cardHeight:o,cardWidth:l,verticalLine:x,key:a,level:i,avatar:n[v],avatarType:w,showAvatar:I,title:n[f],subtitle:n[k],line:F,expanded:E,node:n,childLineWidth:m&&E&&"horizontal"===e.orientation?e.childLineWidths[a]:0,plus:m},n.text)})))}))};E.displayName="KendoServerOrgChart";const w=Object.freeze({name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"14.5.0-develop.9",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"}),I=e=>{const{nodes:t,children:i,style:r,...a}=e,[l,o]=s.useState(!1),d=s.useContext(v),c=s.useRef(null);return s.createElement("div",{role:"treeitem","aria-selected":l,ref:c,className:n.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":l}),style:r,onKeyDown:e=>{d.onKeyDown&&d.onKeyDown({event:e,items:t})},onClick:e=>{d.onGroupAction&&d.onGroupAction({event:e,items:t})},onFocus:e=>{o(!0),d.onGroupFocus&&d.onGroupFocus({event:e,items:t,containerRef:c})},onBlur:e=>{o(!1),d.onGroupBlur&&d.onGroupBlur({event:e,items:t})},...a},i)},N="k-orgchart-node-group-title",A="k-orgchart-node-group-subtitle",L=e=>{const{id:t,title:i,subtitle:r,line:a,plus:l,focus:o,level:d,verticalLine:c,childLineWidth:u,orientation:h,expanded:p,nodes:m,groupTitleHeight:g,groupSubtitleHeight:v,groupTitleRender:f,groupSubtitleRender:F,...y}={orientation:"horizontal",...e},b=f,x=F,C={height:g||20},E={height:v||20};return s.createElement("div",{...y,className:n.classNames(e.className,"k-orgchart-node-group","k-vstack","k-align-items-center")},0!==d&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:c}}),s.createElement(I,{nodes:m,"aria-expanded":!!p,"aria-keyshortcuts":"Enter","aria-level":d+1,"aria-owns":t},b?s.createElement(b,{style:C,className:N,title:i,items:m,level:d,expanded:p}):s.createElement("div",{className:N,style:C},i),x?s.createElement(x,{style:E,className:A,subtitle:r,items:m,level:d,expanded:p}):s.createElement("div",{className:A,style:E},r),s.createElement("div",{role:"group",style:{width:"100%"},className:n.classNames("k-orgchart-node-container",{[`k-${n.kendoThemeMaps.orientationMap[h]||h}`]:h})},e.children)),a&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),l&&s.createElement(k,{expanded:p,nodes:m}),l&&!!u&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:u,marginTop:-15}}))},T=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach(t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some(e=>e[i]&&e[i].length||l&&e[l]),h=u?"horizontal":"vertical",p=u?null:n+50,m=e.find(e=>e.parentId===s),g=e.find(e=>e.ids.includes(s));let v=!1;if(m){const e=m.ids[0],n=g.items.find(t=>t[r]===e),i=g.items.find(e=>e[r]===t[r]);v=n[o]===i[o]}m&&v?(m.ids.push(t[r]),m.items=m.items.concat(c)):e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),T({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}})},O=(e,t)=>{const n=t||300,i=e.sort((e,t)=>t.level-e.level);i.forEach(e=>{if(!e.width){const t=i.filter(t=>e.ids.includes(t.parentId));if(t.length){const i=Math.max(...t.map(e=>e.width||0)),r=Math.max(...t.map(e=>e.groupedItems.length||0)),a=Math.max(...e.groupedItems.map(t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+m*(i-1)})),l=i*r+m*(r-1);e.width=Math.max(l,a)}else{const t=Math.max(...e.groupedItems.map(t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+m*(i-1)}));e.width=t}}})},R=(e,t,n,i,r)=>{const a=t,l=r||g,o=n+i+82;e.forEach(e=>{const t=e.level,n=(a+l+o)*t+g*(t?t-1:0)-(l-g)*(t?1:0);e.top=n})},D=(e,t,n,i,r)=>{const a=t,l=n,o=i+20+82;return Math.max(...e.map(e=>{const t=e.top||0,n=Math.max(...e.groupedItems.map(e=>e.items.length)),i=e.hasChildren?g:0;return t+("horizontal"===e.orientation?a+l+o+l+i:n*(a+l)+o+l)}))},S=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:d,groupTitleHeight:c,groupSubtitleHeight:u,verticalLine:h,idField:p,childrenField:v,expandField:f,hasChildrenField:k,avatarField:F,titleField:y,subtitleField:x,cardsColors:C,ariaLabel:E,itemRender:w,groupTitleRender:I,groupSubtitleRender:N,height:A,avatarType:S,showAvatar:G}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0,...e},W=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];T({dataByGroups:W,data:r,cardWidth:l,expandField:f,hasChildrenField:k,childrenField:v,idField:p,groupField:a}),W.map(e=>{e.groupedItems=o.groupBy(e.items,[{field:a}])}),O(W,l),((e,t)=>{const n=e.sort((e,t)=>e.level-t.level);n.forEach(e=>{var i;if(0===e.level)return;const r=n.find(t=>t.ids.includes(e.parentId)),a=(null==r?void 0:r.groupedItems.findIndex(n=>n.items.some(n=>e.ids.includes(n[t]))))||0,l=(null==r?void 0:r.groupedItems)||[],o=r.width?(r.width-(l.length-1)*m)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach((e,n)=>{n<a&&(t+=o+m)}),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.groupedItems.length)||1,c=(d-(s-1)*m)/s;if(e.width=c,r){const t=e.width-(e.width-(e.groupedItems.length-1)*m)/e.groupedItems.length;r.childLineWidths?null==(i=r.childLineWidths)||i.push(t):r.childLineWidths=[t]}})})(W,p),R(W,d||80,c||20,u||20,h);const M=D(W,d||80,c||20,u||20);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:A||M}},W.map(e=>{const i=e.level,o=e.groupedItems.map(e=>{const t=e.items.some(e=>e[f]);return{...e,expanded:t}}),A=o.filter(e=>e.expanded),T="horizontal",O=C&&C[i]||"green";return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?E:void 0,"aria-orientation":0===i?T:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[T]}`]:T}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&o.map((n,r)=>{const f=n.items.some(e=>e[v]&&e[v].length||k&&e[k]),C=e.width?(e.width-(o.length-1)*m)/o.length:void 0,E=A.findIndex(e=>e===n);return s.createElement(L,{id:t+"-"+(i+1)+"-"+n.items[0][p],style:{width:C},groupTitleHeight:c,groupSubtitleHeight:u,groupTitleRender:I,groupSubtitleRender:N,key:r,level:i,verticalLine:h||g,title:n.items[0][a||y],subtitle:a,orientation:e.orientation,childLineWidth:f&&n.expanded&&"horizontal"===e.orientation?e.childLineWidths[E]:0,line:f,nodes:n.items,expanded:n.expanded,plus:f},n.items.map((e,t)=>s.createElement(b,{cardHeight:d,cardWidth:l,itemRender:w,color:O,key:t,level:i,avatar:e[F],avatarType:S,showAvatar:G,title:e[y],subtitle:e[x],verticalLine:0,line:!1,node:e,childLineWidth:0,plus:!1},e.text)))}))}))};S.displayName="KendoServerGroupedOrgChart";const G=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",avatarType:"image",titleField:"title",subtitleField:"subtitle",...e},{cardsColors:i,onExpandChange:r,onKeyDown:a,onItemAction:l,onGroupAction:o,onGroupBlur:d,onGroupFocus:c,id:u,...h}=t,p=s.useRef(n.useId()),m=!n.validatePackage(w,{component:"OrgChart"}),g=n.getLicenseMessage(w);return s.createElement(f,{style:{position:"relative",...e.style},...t},e.groupField?s.createElement(S,{id:u||p.current,...h},e.children):s.createElement(E,{id:u||p.current,...h},e.children),m&&s.createElement(n.WatermarkOverlay,{message:g}))};function W(e,t,i,r,a){if(i){const{ids:l,field:o}=M(i,t);return function(e,t,i,r,a){let l=e;return t.forEach(e=>{l=n.updateItem(l,e,e=>K(i,e),r,a)}),l}(e,!n.isArray(i)&&i.idField?n.resolveItemsIds(l,i.idField,e,a):l,o,r,a)}return e}function M(e,t){let i,r;return n.isArray(e)?(i=e,r=t):(i=e.ids||[],r=e.operationField||t),{ids:i,field:r}}function K(e,t){const n=(e||"").split(".");let i=t;for(let e=0;e<n.length;e++){const t=n[e];if(e===n.length-1)i[t]=!0;else{if(void 0===i[t])return;i[t]={...i[t]},i=i[t]}}}function H(e,t,i){if(i&&!n.isArray(i)&&i.applyCheckIndeterminate){const{field:r}=M(i,p),a=i.checkIndeterminateField||"checkIndeterminate";for(let i=0;i<e.length;i++){const l=e[i],o=l[t];o&&B(o,n.getNestedValue(r,l)?[]:[l],t,r,a)}}}function B(e,t,i,r,a){let l=!1;for(let o=0;o<e.length;o++){const d=e[o];if(n.getNestedValue(r,d)){if(!l)for(let e=0;e<t.length;e++)K(a,t[e]);l=!0,d[i]&&B(d[i],[],i,r,a)}else d[i]&&B(d[i],l?[d]:t.concat([d]),i,r,a)}}G.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onGroupAction:l.func},G.displayName="KendoOrgChart",e.OrgChart=G,e.ServerOrgChart=E,e.ServerOrgChartGroup=L,e.ServerOrgChartNode=b,e.processOrgChartItems=function(e,t){if(!e||!e.length)return[];let n=e;const i=t.cloneField||"cloned",r=t.expandField||"expanded",a=t.selectField||"selected",l=t.checkField||p,o=t.childrenField||"items";return n=W(n,r,t.expand,i,o),n=W(n,a,t.select,i,o),n=W(n,l,t.check,i,o),H(n,o,t.check),n}});
15
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@progress/kendo-react-common"),require("@progress/kendo-react-layout"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("prop-types"),require("@progress/kendo-data-query")):"function"==typeof define&&define.amd?define(["exports","react","@progress/kendo-react-common","@progress/kendo-react-layout","@progress/kendo-react-buttons","@progress/kendo-svg-icons","prop-types","@progress/kendo-data-query"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactOrgchart={},e.React,e.KendoReactCommon,e.KendoReactLayout,e.KendoReactButtons,e.KendoSvgIcons,e.PropTypes,e.KendoDataQuery)}(this,function(e,t,n,i,r,a,l,o){"use strict";function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var s=d(t);const c=e=>window.getComputedStyle(e).backgroundColor,u=`\n <div class="k-var--series-unset"></div>\n <div class="k-var--series">\n ${(()=>{let e='\n <div class="k-var--series-a"></div>\n <div class="k-var--series-b"></div>\n <div class="k-var--series-c"></div>\n <div class="k-var--series-d"></div>\n <div class="k-var--series-e"></div>\n <div class="k-var--series-f"></div>\n';for(let t=0;t<30;t++)e+=`\n <div class="k-var--series-${t+1}"></div>`;return e})()}\n </div>\n`;let h=class{getSeriesColors(){const e=this.element,t=[].slice.call(e.querySelectorAll(".k-var--series div")),n=c(e.querySelector(".k-var--series-unset"));return t.reduce((e,t)=>{const i=(e=>{const t=e.match(/series-([a-z])$/);if(null!==t)return(e=>e.toLowerCase().charCodeAt(0)-97)(t[1]);const n=e.split("--series-")[1];return parseInt(n,10)-1})(t.className),r=c(t);return r!==n&&(e[i]=r),e},[])}};const p="checked",m=25,g=40,v=s.createContext({cardColors:void 0,onExpandChange:void 0,onKeyDown:void 0,onItemAction:void 0,onItemContextMenu:void 0,onItemDoubleClick:void 0,onGroupAction:void 0,onGroupBlur:void 0,onGroupFocus:void 0}),f=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",...e},{navigatable:i,id:r,tabIndex:a,className:l,style:o,data:d,groupField:c,cardWidth:p,cardHeight:m,groupTitleHeight:g,groupSubtitleHeight:f,verticalLine:k,idField:F,childrenField:y,expandField:b,hasChildrenField:x,avatarField:C,titleField:E,subtitleField:w,onExpandChange:I,onItemAction:N,onItemDoubleClick:A,onItemContextMenu:L,onKeyDown:T,onGroupAction:O,onGroupBlur:R,onGroupFocus:D,cardsColors:S,ariaLabel:G,itemRender:W,groupTitleRender:M,groupSubtitleRender:K,height:H,children:B,...z}=t,q=s.useRef(null),j=s.useRef(new n.Navigation({tabIndex:a,root:q,selectors:[t.groupField?".k-orgchart-node-group-container":".k-orgchart-card"],focusOptions:{}})),[P,$]=s.useState([]),_=s.useRef(null);s.useEffect(()=>{if(i&&j.current.first&&j.current.first.setAttribute("tabindex",String(a)),!S){((e,t)=>{const n=new h,i=n.element=t.createElement("div");let r;i.style.display="none",i.innerHTML=u,t.body.appendChild(i);try{r=n.getSeriesColors()}finally{t.body.removeChild(n.element),delete n.element,e(r)}})(e=>{$(e)},q.current.ownerDocument||document)}},[i,a]);return s.createElement("div",{style:o,ref:q,className:n.classNames(l,"k-orgchart")},s.createElement(v.Provider,{value:{cardColors:S||P,onExpandChange:e.onExpandChange,onKeyDown:n=>{if(t.navigatable){const i=n.event,r=" "===i.key?"Space":i.key,a=e.groupField&&-1!==i.target.className.indexOf("k-orgchart-card")&&_.current||j.current,l=i.target.closest(a.selectors.join(","));switch(r){case"ArrowUp":((e,n,i,r)=>{var a;if(i.preventDefault(),(t.groupField?r.items.some(e=>e[t.expandField]):r.item[t.expandField])&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const t=null==(a=e.closest(".k-orgchart-group"))?void 0:a.getAttribute("id"),i=document.querySelector(`[aria-owns="${t}"]`),r=(null==i?void 0:i.querySelector(".k-orgchart-card"))||i;r?n.focusElement(r,e):n.focusPrevious(e)}})(l,a,i,n);break;case"ArrowDown":((e,n,i,r)=>{var a,l;i.preventDefault();const o=t.groupField?r.items.some(e=>e[t.expandField]):r.item[t.expandField],d=t.groupField?r.items.find(e=>e[t.childrenField]):r.item[t.childrenField],s=t.groupField?r.items.some(e=>t.hasChildrenField&&e[t.hasChildrenField]):t.hasChildrenField&&r.item[t.hasChildrenField],c=t.groupField?d&&d[t.childrenField]&&d[t.childrenField].length:d&&d.length;if((s||c)&&!o&&t.onExpandChange)t.onExpandChange.call(void 0,r);else{const i=t.groupField?".k-orgchart-node-group-container":".k-orgchart-card",r=null==(a=e.closest("[aria-owns]"))?void 0:a.getAttribute("aria-owns"),o=null==(l=document.getElementById(r))?void 0:l.querySelector(i);o?n.focusElement(o,e):n.focusNext(e)}})(l,a,i,n);break;case"ArrowLeft":((e,t,n)=>{n.preventDefault(),t.focusPrevious(e)})(l,a,i);break;case"ArrowRight":((e,t,n)=>{n.preventDefault(),t.focusNext(e)})(l,a,i);break;case"End":((e,t,n)=>{n.preventDefault(),t.focusElement(t.last,null)})(0,a,i);break;case"Home":((e,t,n)=>{n.preventDefault(),t.focusElement(t.first,null)})(0,a,i);break;case"Enter":((n,i,r,a)=>{r.stopPropagation();const l=-1!==n.className.indexOf("k-orgchart-node-group-container");e.groupField&&l?_.current&&_.current.first&&_.current.focusElement(_.current.first,null):t.onItemAction&&t.onItemAction({event:r,item:a.item})})(l,0,i,n);break;case"Escape":(t=>{if(e.groupField){const e=t.closest(".k-orgchart-node-group-container");e&&j.current.focusElement(e,null)}})(l)}}},onItemAction:e=>{if(e.event.stopPropagation(),N&&N.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-card");t&&j.current.focusElement(t,null)}},onItemDoubleClick:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onItemContextMenu:e=>{e.event.stopPropagation(),N&&N.call(void 0,e)},onGroupAction:e=>{if(O&&O.call(void 0,e),t.navigatable){const t=e.event.target.closest(".k-orgchart-node-group-container");t&&j.current.focusElement(t,null)}},onGroupBlur:e=>{_.current=null},onGroupFocus:e=>{_.current=new n.Navigation({tabIndex:0,root:e.containerRef,selectors:[".k-orgchart-card"],focusOptions:{}})}},...z},e.children))};f.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onItemDoubleClick:l.func,onItemContextMenu:l.func,onGroupAction:l.func},f.displayName="KendoClientOrgChart";const k=e=>{const{expanded:t,node:n,nodes:i}=e,l=s.useContext(v);return s.createElement(r.Button,{className:"k-orgchart-button",icon:t?"minus":"plus",tabIndex:-1,svgIcon:t?a.minusIcon:a.plusIcon,role:"presentation","aria-hidden":!0,onClick:e=>{l.onExpandChange&&l.onExpandChange.call(void 0,{event:e,expand:!t,item:n,items:i})}})},F=e=>{const{node:t,children:r,style:a,...l}=e,[o,d]=s.useState(!1),c=s.useContext(v);return s.createElement(i.Card,{orientation:null,className:n.classNames("k-orgchart-card",{"k-focus":o}),onClick:e=>{c.onItemAction&&c.onItemAction.call(void 0,{event:e,item:t})},onKeyDown:e=>{c.onKeyDown&&c.onKeyDown.call(void 0,{event:e,item:t})},onContextMenu:e=>{c.onItemContextMenu&&c.onItemContextMenu.call(void 0,{event:e,item:t})},onDoubleClick:e=>{c.onItemDoubleClick&&c.onItemDoubleClick.call(void 0,{event:e,item:t})},style:a,onFocus:()=>d(!0),onBlur:()=>d(!1),...l},r)},y=e=>{const{level:t,children:n}=e,r=s.useContext(v),a=r.cardColors&&r.cardColors[t]||"green";return s.createElement(i.CardBody,{className:"k-hstack",style:{borderTopColor:a}},n)},b=e=>{const{id:t,title:r,subtitle:a,level:l,childLineWidth:o,cardWidth:d,cardHeight:c,verticalLine:u,color:h,line:p,plus:m,expanded:g,node:v,avatar:f,avatarType:b,itemRender:x,showAvatar:C,...E}={avatarType:"image",...e},w=x;return s.createElement("div",{...E,className:n.classNames(e.className,"k-orgchart-node","k-vstack","k-align-items-center"),role:"treeitem","aria-level":l+1,"aria-keyshortcuts":"Enter","aria-expanded":null!=g?g:void 0,"aria-owns":void 0!==g?t:void 0,"aria-selected":!1},0!==l&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:u}}),s.createElement(F,{node:v,style:{width:d,height:c}},s.createElement(y,{level:l},w?s.createElement(w,{item:v,title:r,subtitle:a,level:l,expanded:g,color:h}):s.createElement(s.Fragment,null,C&&s.createElement(i.Avatar,{type:b,themeColor:"secondary"},"image"===b?s.createElement("img",{src:f,alt:"KendoReact Avatar Customer"}):f),s.createElement("div",{className:"k-card-title-wrap k-vstack"},s.createElement(i.CardTitle,{className:"k-text-ellipsis"},r),s.createElement("span",{className:"k-spacer"}),s.createElement(i.CardSubtitle,{className:"k-text-ellipsis"},a)),s.createElement("span",{className:"k-spacer"}),s.createElement("span",{className:"k-orgchart-card-menu",role:"button","aria-label":"Edit menu",tabIndex:-1})))),p&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),m&&s.createElement(k,{expanded:g,node:v}),m&&!!o&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:o,marginTop:-15}}))},x=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach(t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some(e=>e[i]&&e[i].length||l&&e[l]),h=u?"horizontal":"vertical",p=u?null:n;e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),x({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}})},C=(e,t)=>{const n=t||300,i=e.sort((e,t)=>t.level-e.level);i.forEach(e=>{if(!e.width){const t=i.filter(t=>e.ids.includes(t.parentId)),r=t.length?Math.max(...t.map(e=>e.width||0)):n,a="horizontal"===e.orientation?e.items.length:1,l=r*a+m*(a-1);e.width=l}})},E=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:o,verticalLine:d,idField:c,childrenField:u,hasChildrenField:h,expandField:p,avatarField:v,titleField:f,subtitleField:k,ariaLabel:F,itemRender:y,height:E,avatarType:w,showAvatar:I}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",avatarType:"image",showAvatar:!0,...e},N=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];x({dataByGroups:N,data:r,cardWidth:l,expandField:p,hasChildrenField:h,childrenField:u,idField:c,groupField:a}),C(N,l),((e,t,n)=>{const i=e.sort((e,t)=>e.level-t.level);i.forEach(e=>{if(0===e.level)return;const r=i.find(t=>t.ids.includes(e.parentId)),a=(null==r?void 0:r.items.findIndex(t=>e.ids.includes(t[n])))||0,l=(null==r?void 0:r.items)||[],o=r.width?(r.width-(l.length-1)*m)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach((e,n)=>{n<a&&(t+=o+m)}),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.items.length)||1,c=(d-(s-1)*m)/s;e.width=c;const u=null==r?void 0:r.items.map(e=>{const r=e[t]?e[t].length:0,a=i.find(t=>t.ids.includes(e[n])),l=(null==a?void 0:a.width)||0;return"vertical"!==(null==a?void 0:a.orientation)&&0!==r&&e.expanded?l-(l-(r-1)*m)/r:0});r&&(r.childLineWidths=u)})})(N,u,c),((e,t,n)=>{const i=t||80,r=n||g;e.forEach(e=>{const t=e.level,n=(i+r)*t+g*(t?t-1:0)-(r-g)*(t?1:0);e.top=n})})(N,o,d);const A=((e,t,n)=>{const i=t||80,r=n||g;return Math.max(...e.map(e=>{const t=e.top||0,n=e.items.length;return t+("horizontal"===e.orientation?i+r+r:n*(i+r))}))})(N,o,d);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:E||A}},N.map(e=>{const i=e.level,r=e.items,a=e.orientation;return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?F:void 0,"aria-orientation":0===i?a:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i+1}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[a]}`]:a}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&s.createElement("div",{role:"presentation",style:{width:"100%"},className:n.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${n.kendoThemeMaps.orientationMap[e.orientation]}`]:e.orientation})},r.map((n,a)=>{const m=n[u]&&n[u].length||h&&n[h],F=m||"vertical"===e.orientation&&a!==r.length-1,x="vertical"===e.orientation&&0!==a?0:d||g,C=e.childLineWidths?Math.max(...e.childLineWidths):void 0,E=n[p];return s.createElement(b,{id:t+"-"+(i+1)+"-"+n[c],style:{width:C},itemRender:y,cardHeight:o,cardWidth:l,verticalLine:x,key:a,level:i,avatar:n[v],avatarType:w,showAvatar:I,title:n[f],subtitle:n[k],line:F,expanded:E,node:n,childLineWidth:m&&E&&"horizontal"===e.orientation?e.childLineWidths[a]:0,plus:m},n.text)})))}))};E.displayName="KendoServerOrgChart";const w=Object.freeze({name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"15.0.0-develop.1",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"}),I=e=>{const{nodes:t,children:i,style:r,...a}=e,[l,o]=s.useState(!1),d=s.useContext(v),c=s.useRef(null);return s.createElement("div",{ref:c,className:n.classNames("k-orgchart-node-group-container","k-vstack",{"k-focus":l}),style:r,onKeyDown:e=>{d.onKeyDown&&d.onKeyDown({event:e,items:t})},onClick:e=>{d.onGroupAction&&d.onGroupAction({event:e,items:t})},onFocus:e=>{o(!0),d.onGroupFocus&&d.onGroupFocus({event:e,items:t,containerRef:c})},onBlur:e=>{o(!1),d.onGroupBlur&&d.onGroupBlur({event:e,items:t})},...a},i)},N="k-orgchart-node-group-title",A="k-orgchart-node-group-subtitle",L=e=>{const{id:t,title:i,subtitle:r,line:a,plus:l,focus:o,level:d,verticalLine:c,childLineWidth:u,orientation:h,expanded:p,nodes:m,groupTitleHeight:g,groupSubtitleHeight:v,groupTitleRender:f,groupSubtitleRender:F,...y}={orientation:"horizontal",...e},b=f,x=F,C={height:g||20},E={height:v||20};return s.createElement("div",{...y,className:n.classNames(e.className,"k-orgchart-node-group","k-vstack","k-align-items-center"),role:"group"},0!==d&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:c}}),s.createElement(I,{nodes:m},b?s.createElement(b,{style:C,className:N,title:i,items:m,level:d,expanded:p}):s.createElement("div",{className:N,style:C},i),x?s.createElement(x,{style:E,className:A,subtitle:r,items:m,level:d,expanded:p}):s.createElement("div",{className:A,style:E},r),s.createElement("div",{role:"presentation",style:{width:"100%"},className:n.classNames("k-orgchart-node-container",{[`k-${n.kendoThemeMaps.orientationMap[h]||h}`]:h})},e.children)),a&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),l&&s.createElement(k,{expanded:p,nodes:m}),l&&!!u&&s.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:u,marginTop:-15}}))},T=({dataByGroups:e,data:t=[],cardWidth:n,childrenField:i,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d=1,parentId:s=0})=>{t.forEach(t=>{const c=t[i];if(t[a]&&c&&c.length){const u=c.some(e=>e[i]&&e[i].length||l&&e[l]),h=u?"horizontal":"vertical",p=u?null:n+50,m=e.find(e=>e.parentId===s),g=e.find(e=>e.ids.includes(s));let v=!1;if(m){const e=m.ids[0],n=g.items.find(t=>t[r]===e),i=g.items.find(e=>e[r]===t[r]);v=n[o]===i[o]}m&&v?(m.ids.push(t[r]),m.items=m.items.concat(c)):e.push({ids:[t[r]],items:c,level:d,parentId:s,hasChildren:u,orientation:h,width:p}),T({dataByGroups:e,data:t[i],childrenField:i,cardWidth:n,idField:r,expandField:a,hasChildrenField:l,groupField:o,level:d+1,parentId:t[r]})}})},O=(e,t)=>{const n=t||300,i=e.sort((e,t)=>t.level-e.level);i.forEach(e=>{if(!e.width){const t=i.filter(t=>e.ids.includes(t.parentId));if(t.length){const i=Math.max(...t.map(e=>e.width||0)),r=Math.max(...t.map(e=>e.groupedItems.length||0)),a=Math.max(...e.groupedItems.map(t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+m*(i-1)})),l=i*r+m*(r-1);e.width=Math.max(l,a)}else{const t=Math.max(...e.groupedItems.map(t=>{const i="horizontal"===e.orientation?t.items.length:1;return i*(n+50)+m*(i-1)}));e.width=t}}})},R=(e,t,n,i,r)=>{const a=t,l=r||g,o=n+i+82;e.forEach(e=>{const t=e.level,n=(a+l+o)*t+g*(t?t-1:0)-(l-g)*(t?1:0);e.top=n})},D=(e,t,n,i,r)=>{const a=t,l=n,o=i+20+82;return Math.max(...e.map(e=>{const t=e.top||0,n=Math.max(...e.groupedItems.map(e=>e.items.length)),i=e.hasChildren?g:0;return t+("horizontal"===e.orientation?a+l+o+l+i:n*(a+l)+o+l)}))},S=e=>{const{id:t,width:i,data:r,groupField:a,cardWidth:l,cardHeight:d,groupTitleHeight:c,groupSubtitleHeight:u,verticalLine:h,idField:p,childrenField:v,expandField:f,hasChildrenField:k,avatarField:F,titleField:y,subtitleField:x,cardsColors:C,ariaLabel:E,itemRender:w,groupTitleRender:I,groupSubtitleRender:N,height:A,avatarType:S,showAvatar:G}={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0,...e},W=[{items:r,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];T({dataByGroups:W,data:r,cardWidth:l,expandField:f,hasChildrenField:k,childrenField:v,idField:p,groupField:a}),W.map(e=>{e.groupedItems=o.groupBy(e.items,[{field:a}])}),O(W,l),((e,t)=>{const n=e.sort((e,t)=>e.level-t.level);n.forEach(e=>{var i;if(0===e.level)return;const r=n.find(t=>t.ids.includes(e.parentId)),a=(null==r?void 0:r.groupedItems.findIndex(n=>n.items.some(n=>e.ids.includes(n[t]))))||0,l=(null==r?void 0:r.groupedItems)||[],o=r.width?(r.width-(l.length-1)*m)/l.length:0;if(!e.left){let t=(null==r?void 0:r.left)||0;l.forEach((e,n)=>{n<a&&(t+=o+m)}),e.left=t}const d=(null==r?void 0:r.width)||0,s=(null==r?void 0:r.groupedItems.length)||1,c=(d-(s-1)*m)/s;if(e.width=c,r){const t=e.width-(e.width-(e.groupedItems.length-1)*m)/e.groupedItems.length;r.childLineWidths?null==(i=r.childLineWidths)||i.push(t):r.childLineWidths=[t]}})})(W,p),R(W,d||80,c||20,u||20,h);const M=D(W,d||80,c||20,u||20);return s.createElement("div",{className:"k-orgchart-container",style:{width:i,height:A||M}},W.map(e=>{const i=e.level,o=e.groupedItems.map(e=>{const t=e.items.some(e=>e[f]);return{...e,expanded:t}}),A=o.filter(e=>e.expanded),T="horizontal",O=C&&C[i]||"green";return s.createElement("div",{role:0===i?"tree":"group",id:t+"-"+i+"-"+e.ids[0],"aria-label":0===i?E:void 0,"aria-orientation":0===i?T:void 0,key:e.ids[0]+"_"+i,className:n.classNames("k-orgchart-group",`k-orgchart-level-${i+1}`,"k-pos-absolute",{[`k-${n.kendoThemeMaps.orientationMap[T]}`]:T}),style:{width:e.width||"100%",left:e.left,top:e.top}},r.length>0&&o.map((n,r)=>{const f=n.items.some(e=>e[v]&&e[v].length||k&&e[k]),C=e.width?(e.width-(o.length-1)*m)/o.length:void 0,E=A.findIndex(e=>e===n);return s.createElement(L,{id:t+"-"+(i+1)+"-"+n.items[0][p],style:{width:C},groupTitleHeight:c,groupSubtitleHeight:u,groupTitleRender:I,groupSubtitleRender:N,key:r,level:i,verticalLine:h||g,title:n.items[0][a||y],subtitle:a,orientation:e.orientation,childLineWidth:f&&n.expanded&&"horizontal"===e.orientation?e.childLineWidths[E]:0,line:f,nodes:n.items,expanded:n.expanded,plus:f},n.items.map((e,t)=>s.createElement(b,{cardHeight:d,cardWidth:l,itemRender:w,color:O,key:t,level:i,avatar:e[F],avatarType:S,showAvatar:G,title:e[y],subtitle:e[x],verticalLine:0,line:!1,node:e,childLineWidth:0,plus:!1},e.text)))}))}))};S.displayName="KendoServerGroupedOrgChart";const G=e=>{const t={tabIndex:0,navigatable:!0,expandField:"expanded",ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",avatarType:"image",titleField:"title",subtitleField:"subtitle",...e},{cardsColors:i,onExpandChange:r,onKeyDown:a,onItemAction:l,onGroupAction:o,onGroupBlur:d,onGroupFocus:c,id:u,...h}=t,p=s.useRef(n.useId()),m=!n.validatePackage(w,{component:"OrgChart"}),g=n.getLicenseMessage(w);return s.createElement(f,{style:{position:"relative",...e.style},...t},e.groupField?s.createElement(S,{id:u||p.current,...h},e.children):s.createElement(E,{id:u||p.current,...h},e.children),m&&s.createElement(n.WatermarkOverlay,{message:g}))};function W(e,t,i,r,a){if(i){const{ids:l,field:o}=M(i,t);return function(e,t,i,r,a){let l=e;return t.forEach(e=>{l=n.updateItem(l,e,e=>K(i,e),r,a)}),l}(e,!n.isArray(i)&&i.idField?n.resolveItemsIds(l,i.idField,e,a):l,o,r,a)}return e}function M(e,t){let i,r;return n.isArray(e)?(i=e,r=t):(i=e.ids||[],r=e.operationField||t),{ids:i,field:r}}function K(e,t){const n=(e||"").split(".");let i=t;for(let e=0;e<n.length;e++){const t=n[e];if(e===n.length-1)i[t]=!0;else{if(void 0===i[t])return;i[t]={...i[t]},i=i[t]}}}function H(e,t,i){if(i&&!n.isArray(i)&&i.applyCheckIndeterminate){const{field:r}=M(i,p),a=i.checkIndeterminateField||"checkIndeterminate";for(let i=0;i<e.length;i++){const l=e[i],o=l[t];o&&B(o,n.getNestedValue(r,l)?[]:[l],t,r,a)}}}function B(e,t,i,r,a){let l=!1;for(let o=0;o<e.length;o++){const d=e[o];if(n.getNestedValue(r,d)){if(!l)for(let e=0;e<t.length;e++)K(a,t[e]);l=!0,d[i]&&B(d[i],[],i,r,a)}else d[i]&&B(d[i],l?[d]:t.concat([d]),i,r,a)}}G.propTypes={className:l.string,style:l.object,id:l.string,ariaLabel:l.string,idField:l.string,childrenField:l.string,expandField:l.string,titleField:l.string,hasChildrenField:l.string,subtitleField:l.string,avatarField:l.string,cardsColors:l.array,data:l.array,groupField:l.string,cardHeight:l.number,cardWidth:l.number,groupTitleHeight:l.number,groupSubtitleHeight:l.number,verticalLine:l.number,height:l.oneOfType([l.string,l.number]),onExpandChange:l.func,onItemAction:l.func,onGroupAction:l.func},G.displayName="KendoOrgChart",e.OrgChart=G,e.ServerOrgChart=E,e.ServerOrgChartGroup=L,e.ServerOrgChartNode=b,e.processOrgChartItems=function(e,t){if(!e||!e.length)return[];let n=e;const i=t.cloneField||"cloned",r=t.expandField||"expanded",a=t.selectField||"selected",l=t.checkField||p,o=t.childrenField||"items";return n=W(n,r,t.expand,i,o),n=W(n,a,t.select,i,o),n=W(n,l,t.check,i,o),H(n,o,t.check),n}});
package/package-metadata.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1778599897,version:"14.5.0-develop.9",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"});exports.packageMetadata=e;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-orgchart",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1779199990,version:"15.0.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"});exports.packageMetadata=e;
package/package-metadata.mjs CHANGED
@@ -6,8 +6,8 @@ export const packageMetadata = Object.freeze({
6
6
  productName: 'KendoReact',
7
7
  productCode: 'KENDOUIREACT',
8
8
  productCodes: ['KENDOUIREACT'],
9
- publishDate: 1778599897,
10
- version: '14.5.0-develop.9',
9
+ publishDate: 1779199990,
10
+ version: '15.0.0-develop.1',
11
11
  licensingDocsUrl:
12
12
  'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
13
13
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-react-orgchart",
3
- "version": "14.5.0-develop.9",
3
+ "version": "15.0.0-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",
@@ -27,9 +27,9 @@
27
27
  "peerDependencies": {
28
28
  "@progress/kendo-data-query": "^1.7.2",
29
29
  "@progress/kendo-licensing": "^1.7.2",
30
- "@progress/kendo-react-buttons": "14.5.0-develop.9",
31
- "@progress/kendo-react-common": "14.5.0-develop.9",
32
- "@progress/kendo-react-layout": "14.5.0-develop.9",
30
+ "@progress/kendo-react-buttons": "15.0.0-develop.1",
31
+ "@progress/kendo-react-common": "15.0.0-develop.1",
32
+ "@progress/kendo-react-layout": "15.0.0-develop.1",
33
33
  "@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
34
34
  "react": "^18.0.0 || ^19.0.0",
35
35
  "react-dom": "^18.0.0 || ^19.0.0"
@@ -55,7 +55,7 @@
55
55
  "package": {
56
56
  "productName": "KendoReact",
57
57
  "productCode": "KENDOUIREACT",
58
- "publishDate": 1778599897,
58
+ "publishDate": 1779199990,
59
59
  "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"
60
60
  }
61
61
  },
package/server/ServerGroupedOrgChart.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),C=require("@progress/kendo-react-common"),$=require("./ServerOrgChartNode.js"),F=require("./ServerOrgChartGroup.js"),K=require("@progress/kendo-data-query"),n=require("../utils/consts.js");function Q(o){const I=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const a in o)if(a!=="default"){const e=Object.getOwnPropertyDescriptor(o,a);Object.defineProperty(I,a,e.get?e:{enumerable:!0,get:()=>o[a]})}}return I.default=o,Object.freeze(I)}const b=Q(B),W=({dataByGroups:o,data:I=[],cardWidth:a,childrenField:e,idField:t,expandField:r,hasChildrenField:i,groupField:h,level:d=1,parentId:l=0})=>{I.forEach(s=>{const c=s[e];if(s[r]&&c&&c.length){const g=c.some(O=>O[e]&&O[e].length||i&&O[i]),H=g?"horizontal":"vertical",_=g?null:a+2*n.HORIZONTAL_GAP,p=o.find(O=>O.parentId===l),R=o.find(O=>O.ids.includes(l));let E=!1;if(p){const O=p.ids[0],x=R.items.find(G=>G[t]===O),P=R.items.find(G=>G[t]===s[t]);E=x[h]===P[h]}p&&E?(p.ids.push(s[t]),p.items=p.items.concat(c)):o.push({ids:[s[t]],items:c,level:d,parentId:l,hasChildren:g,orientation:H,width:_}),W({dataByGroups:o,data:s[e],childrenField:e,cardWidth:a,idField:t,expandField:r,hasChildrenField:i,groupField:h,level:d+1,parentId:s[t]})}})},J=(o,I)=>{const a=I||n.NODE_WIDTH,e=o.sort((t,r)=>r.level-t.level);e.forEach(t=>{if(!t.width){const r=e.filter(i=>t.ids.includes(i.parentId));if(r.length){const i=Math.max(...r.map(s=>s.width||0)),h=Math.max(...r.map(s=>s.groupedItems.length||0)),d=Math.max(...t.groupedItems.map(s=>{const c=t.orientation==="horizontal"?s.items.length:1;return c*(a+2*n.HORIZONTAL_GAP)+n.HORIZONTAL_GAP*(c-1)})),l=i*h+n.HORIZONTAL_GAP*(h-1);t.width=Math.max(l,d)}else{const i=Math.max(...t.groupedItems.map(h=>{const d=t.orientation==="horizontal"?h.items.length:1;return d*(a+2*n.HORIZONTAL_GAP)+n.HORIZONTAL_GAP*(d-1)}));t.width=i}}})},X=(o,I)=>{const a=o.sort((e,t)=>e.level-t.level);a.forEach(e=>{var c;if(e.level===0)return;const t=a.find(m=>m.ids.includes(e.parentId)),r=(t==null?void 0:t.groupedItems.findIndex(m=>m.items.some(g=>e.ids.includes(g[I]))))||0,i=(t==null?void 0:t.groupedItems)||[],h=t.width?(t.width-(i.length-1)*n.HORIZONTAL_GAP)/i.length:0;if(!e.left){let m=(t==null?void 0:t.left)||0;i.forEach((g,H)=>{H<r&&(m+=h+n.HORIZONTAL_GAP)}),e.left=m}const d=(t==null?void 0:t.width)||0,l=(t==null?void 0:t.groupedItems.length)||1,s=(d-(l-1)*n.HORIZONTAL_GAP)/l;if(e.width=s,t){const m=e.width-(e.width-(e.groupedItems.length-1)*n.HORIZONTAL_GAP)/e.groupedItems.length;t.childLineWidths?(c=t.childLineWidths)==null||c.push(m):t.childLineWidths=[m]}})},Y=(o,I,a,e,t)=>{const r=I,i=t||n.VERTICAL_LINE,h=a+e+n.GROUP_PADDINGS;o.forEach(d=>{const l=d.level,s=(r+i+h)*l+n.VERTICAL_LINE*(l?l-1:0)-(i-n.VERTICAL_LINE)*(l?1:0);d.top=s})},tt=(o,I,a,e,t)=>{const r=I,i=a,d=e+n.GROUP_SUBTITLE_HEIGHT+n.GROUP_PADDINGS;return Math.max(...o.map(s=>{const c=s.top||0,m=Math.max(...s.groupedItems.map(_=>_.items.length)),g=s.hasChildren?n.VERTICAL_LINE:0,H=s.orientation==="horizontal"?r+i+d+i+g:m*(r+i)+d+i;return c+H}))},y=o=>{const I={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0},{id:a,width:e,data:t,groupField:r,cardWidth:i,cardHeight:h,groupTitleHeight:d,groupSubtitleHeight:l,verticalLine:s,idField:c,childrenField:m,expandField:g,hasChildrenField:H,avatarField:_,titleField:p,subtitleField:R,cardsColors:E,ariaLabel:O,itemRender:x,groupTitleRender:P,groupSubtitleRender:G,height:k,avatarType:D,showAvatar:M}={...I,...o},v=[{items:t,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];W({dataByGroups:v,data:t,cardWidth:i,expandField:g,hasChildrenField:H,childrenField:m,idField:c,groupField:r}),v.map(u=>{u.groupedItems=K.groupBy(u.items,[{field:r}])}),J(v,i),X(v,c),Y(v,h||n.NODE_HEIGHT,d||n.GROUP_TITLE_HEIGHT,l||n.GROUP_SUBTITLE_HEIGHT,s);const Z=tt(v,h||n.NODE_HEIGHT,d||n.GROUP_TITLE_HEIGHT,l||n.GROUP_SUBTITLE_HEIGHT);return b.createElement("div",{className:"k-orgchart-container",style:{width:e,height:k||Z}},v.map(u=>{const T=u.level,w=u.groupedItems.map(L=>{const S=L.items.some(A=>A[g]);return{...L,expanded:S}}),U=w.filter(L=>L.expanded),N="horizontal",z=E&&E[T]||"green";return b.createElement("div",{role:T===0?"tree":"group",id:a+"-"+T+"-"+u.ids[0],"aria-label":T===0?O:void 0,"aria-orientation":T===0?N:void 0,key:u.ids[0]+"_"+T,className:C.classNames("k-orgchart-group",`k-orgchart-level-${T}`,"k-pos-absolute",{[`k-${C.kendoThemeMaps.orientationMap[N]}`]:N}),style:{width:u.width||"100%",left:u.left,top:u.top}},t.length>0&&w.map((L,S)=>{const A=L.items.some(f=>f[m]&&f[m].length||H&&f[H]),q=u.width?(u.width-(w.length-1)*n.HORIZONTAL_GAP)/w.length:void 0,j=U.findIndex(f=>f===L);return b.createElement(F.ServerOrgChartGroup,{id:a+"-"+(T+1)+"-"+L.items[0][c],style:{width:q},groupTitleHeight:d,groupSubtitleHeight:l,groupTitleRender:P,groupSubtitleRender:G,key:S,level:T,verticalLine:s||n.VERTICAL_LINE,title:L.items[0][r||p],subtitle:r,orientation:u.orientation,childLineWidth:A&&L.expanded&&u.orientation==="horizontal"?u.childLineWidths[j]:0,line:A,nodes:L.items,expanded:L.expanded,plus:A},L.items.map((f,V)=>b.createElement($.ServerOrgChartNode,{cardHeight:h,cardWidth:i,itemRender:x,color:z,key:V,level:T,avatar:f[_],avatarType:D,showAvatar:M,title:f[p],subtitle:f[R],verticalLine:0,line:!1,node:f,childLineWidth:0,plus:!1},f.text)))}))}))};y.displayName="KendoServerGroupedOrgChart";exports.ServerGroupedOrgChart=y;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),C=require("@progress/kendo-react-common"),$=require("./ServerOrgChartNode.js"),F=require("./ServerOrgChartGroup.js"),K=require("@progress/kendo-data-query"),n=require("../utils/consts.js");function Q(o){const I=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const a in o)if(a!=="default"){const e=Object.getOwnPropertyDescriptor(o,a);Object.defineProperty(I,a,e.get?e:{enumerable:!0,get:()=>o[a]})}}return I.default=o,Object.freeze(I)}const b=Q(B),W=({dataByGroups:o,data:I=[],cardWidth:a,childrenField:e,idField:t,expandField:r,hasChildrenField:i,groupField:h,level:d=1,parentId:l=0})=>{I.forEach(s=>{const c=s[e];if(s[r]&&c&&c.length){const g=c.some(O=>O[e]&&O[e].length||i&&O[i]),H=g?"horizontal":"vertical",_=g?null:a+2*n.HORIZONTAL_GAP,p=o.find(O=>O.parentId===l),R=o.find(O=>O.ids.includes(l));let E=!1;if(p){const O=p.ids[0],x=R.items.find(G=>G[t]===O),P=R.items.find(G=>G[t]===s[t]);E=x[h]===P[h]}p&&E?(p.ids.push(s[t]),p.items=p.items.concat(c)):o.push({ids:[s[t]],items:c,level:d,parentId:l,hasChildren:g,orientation:H,width:_}),W({dataByGroups:o,data:s[e],childrenField:e,cardWidth:a,idField:t,expandField:r,hasChildrenField:i,groupField:h,level:d+1,parentId:s[t]})}})},J=(o,I)=>{const a=I||n.NODE_WIDTH,e=o.sort((t,r)=>r.level-t.level);e.forEach(t=>{if(!t.width){const r=e.filter(i=>t.ids.includes(i.parentId));if(r.length){const i=Math.max(...r.map(s=>s.width||0)),h=Math.max(...r.map(s=>s.groupedItems.length||0)),d=Math.max(...t.groupedItems.map(s=>{const c=t.orientation==="horizontal"?s.items.length:1;return c*(a+2*n.HORIZONTAL_GAP)+n.HORIZONTAL_GAP*(c-1)})),l=i*h+n.HORIZONTAL_GAP*(h-1);t.width=Math.max(l,d)}else{const i=Math.max(...t.groupedItems.map(h=>{const d=t.orientation==="horizontal"?h.items.length:1;return d*(a+2*n.HORIZONTAL_GAP)+n.HORIZONTAL_GAP*(d-1)}));t.width=i}}})},X=(o,I)=>{const a=o.sort((e,t)=>e.level-t.level);a.forEach(e=>{var c;if(e.level===0)return;const t=a.find(m=>m.ids.includes(e.parentId)),r=(t==null?void 0:t.groupedItems.findIndex(m=>m.items.some(g=>e.ids.includes(g[I]))))||0,i=(t==null?void 0:t.groupedItems)||[],h=t.width?(t.width-(i.length-1)*n.HORIZONTAL_GAP)/i.length:0;if(!e.left){let m=(t==null?void 0:t.left)||0;i.forEach((g,H)=>{H<r&&(m+=h+n.HORIZONTAL_GAP)}),e.left=m}const d=(t==null?void 0:t.width)||0,l=(t==null?void 0:t.groupedItems.length)||1,s=(d-(l-1)*n.HORIZONTAL_GAP)/l;if(e.width=s,t){const m=e.width-(e.width-(e.groupedItems.length-1)*n.HORIZONTAL_GAP)/e.groupedItems.length;t.childLineWidths?(c=t.childLineWidths)==null||c.push(m):t.childLineWidths=[m]}})},Y=(o,I,a,e,t)=>{const r=I,i=t||n.VERTICAL_LINE,h=a+e+n.GROUP_PADDINGS;o.forEach(d=>{const l=d.level,s=(r+i+h)*l+n.VERTICAL_LINE*(l?l-1:0)-(i-n.VERTICAL_LINE)*(l?1:0);d.top=s})},tt=(o,I,a,e,t)=>{const r=I,i=a,d=e+n.GROUP_SUBTITLE_HEIGHT+n.GROUP_PADDINGS;return Math.max(...o.map(s=>{const c=s.top||0,m=Math.max(...s.groupedItems.map(_=>_.items.length)),g=s.hasChildren?n.VERTICAL_LINE:0,H=s.orientation==="horizontal"?r+i+d+i+g:m*(r+i)+d+i;return c+H}))},y=o=>{const I={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",orientation:"horizontal",showAvatar:!0},{id:a,width:e,data:t,groupField:r,cardWidth:i,cardHeight:h,groupTitleHeight:d,groupSubtitleHeight:l,verticalLine:s,idField:c,childrenField:m,expandField:g,hasChildrenField:H,avatarField:_,titleField:p,subtitleField:R,cardsColors:E,ariaLabel:O,itemRender:x,groupTitleRender:P,groupSubtitleRender:G,height:k,avatarType:D,showAvatar:M}={...I,...o},v=[{items:t,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];W({dataByGroups:v,data:t,cardWidth:i,expandField:g,hasChildrenField:H,childrenField:m,idField:c,groupField:r}),v.map(u=>{u.groupedItems=K.groupBy(u.items,[{field:r}])}),J(v,i),X(v,c),Y(v,h||n.NODE_HEIGHT,d||n.GROUP_TITLE_HEIGHT,l||n.GROUP_SUBTITLE_HEIGHT,s);const Z=tt(v,h||n.NODE_HEIGHT,d||n.GROUP_TITLE_HEIGHT,l||n.GROUP_SUBTITLE_HEIGHT);return b.createElement("div",{className:"k-orgchart-container",style:{width:e,height:k||Z}},v.map(u=>{const T=u.level,w=u.groupedItems.map(L=>{const S=L.items.some(A=>A[g]);return{...L,expanded:S}}),U=w.filter(L=>L.expanded),N="horizontal",z=E&&E[T]||"green";return b.createElement("div",{role:T===0?"tree":"group",id:a+"-"+T+"-"+u.ids[0],"aria-label":T===0?O:void 0,"aria-orientation":T===0?N:void 0,key:u.ids[0]+"_"+T,className:C.classNames("k-orgchart-group",`k-orgchart-level-${T+1}`,"k-pos-absolute",{[`k-${C.kendoThemeMaps.orientationMap[N]}`]:N}),style:{width:u.width||"100%",left:u.left,top:u.top}},t.length>0&&w.map((L,S)=>{const A=L.items.some(f=>f[m]&&f[m].length||H&&f[H]),q=u.width?(u.width-(w.length-1)*n.HORIZONTAL_GAP)/w.length:void 0,j=U.findIndex(f=>f===L);return b.createElement(F.ServerOrgChartGroup,{id:a+"-"+(T+1)+"-"+L.items[0][c],style:{width:q},groupTitleHeight:d,groupSubtitleHeight:l,groupTitleRender:P,groupSubtitleRender:G,key:S,level:T,verticalLine:s||n.VERTICAL_LINE,title:L.items[0][r||p],subtitle:r,orientation:u.orientation,childLineWidth:A&&L.expanded&&u.orientation==="horizontal"?u.childLineWidths[j]:0,line:A,nodes:L.items,expanded:L.expanded,plus:A},L.items.map((f,V)=>b.createElement($.ServerOrgChartNode,{cardHeight:h,cardWidth:i,itemRender:x,color:z,key:V,level:T,avatar:f[_],avatarType:D,showAvatar:M,title:f[p],subtitle:f[R],verticalLine:0,line:!1,node:f,childLineWidth:0,plus:!1},f.text)))}))}))};y.displayName="KendoServerGroupedOrgChart";exports.ServerGroupedOrgChart=y;
package/server/ServerGroupedOrgChart.mjs CHANGED
@@ -210,7 +210,7 @@ const P = ({
210
210
  "aria-label": w === 0 ? g : void 0,
211
211
  "aria-orientation": w === 0 ? _ : void 0,
212
212
  key: c.ids[0] + "_" + w,
213
- className: q("k-orgchart-group", `k-orgchart-level-${w}`, "k-pos-absolute", {
213
+ className: q("k-orgchart-group", `k-orgchart-level-${w + 1}`, "k-pos-absolute", {
214
214
  [`k-${J.orientationMap[_]}`]: _
215
215
  }),
216
216
  style: {
package/server/ServerOrgChart.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),T=require("@progress/kendo-react-common"),z=require("./ServerOrgChartNode.js"),v=require("../utils/consts.js");function G(a){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const s in a)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(a,s);Object.defineProperty(l,s,i.get?i:{enumerable:!0,get:()=>a[s]})}}return l.default=a,Object.freeze(l)}const H=G(j),C=({dataByGroups:a,data:l=[],cardWidth:s,childrenField:i,idField:e,expandField:t,hasChildrenField:n,groupField:r,level:m=1,parentId:d=0})=>{l.forEach(h=>{const f=h[i];if(h[t]&&f&&f.length){const o=f.some(w=>w[i]&&w[i].length||n&&w[n]),u=o?"horizontal":"vertical",L=o?null:s;a.push({ids:[h[e]],items:f,level:m,parentId:d,hasChildren:o,orientation:u,width:L}),C({dataByGroups:a,data:h[i],childrenField:i,cardWidth:s,idField:e,expandField:t,hasChildrenField:n,groupField:r,level:m+1,parentId:h[e]})}})},V=(a,l)=>{const s=l||v.NODE_WIDTH,i=a.sort((e,t)=>t.level-e.level);i.forEach(e=>{if(!e.width){const t=i.filter(d=>e.ids.includes(d.parentId)),n=t.length?Math.max(...t.map(d=>d.width||0)):s,r=e.orientation==="horizontal"?e.items.length:1,m=n*r+v.HORIZONTAL_GAP*(r-1);e.width=m}})},F=(a,l,s)=>{const i=a.sort((e,t)=>e.level-t.level);i.forEach(e=>{if(e.level===0)return;const t=i.find(o=>o.ids.includes(e.parentId)),n=(t==null?void 0:t.items.findIndex(o=>e.ids.includes(o[s])))||0,r=(t==null?void 0:t.items)||[],m=t.width?(t.width-(r.length-1)*v.HORIZONTAL_GAP)/r.length:0;if(!e.left){let o=(t==null?void 0:t.left)||0;r.forEach((u,L)=>{L<n&&(o+=m+v.HORIZONTAL_GAP)}),e.left=o}const d=(t==null?void 0:t.width)||0,h=(t==null?void 0:t.items.length)||1,f=(d-(h-1)*v.HORIZONTAL_GAP)/h;e.width=f;const E=t==null?void 0:t.items.map(o=>{const u=o[l]?o[l].length:0,L=i.find(_=>_.ids.includes(o[s])),w=(L==null?void 0:L.width)||0;return(L==null?void 0:L.orientation)==="vertical"||u===0||!o.expanded?0:w-(w-(u-1)*v.HORIZONTAL_GAP)/u});t&&(t.childLineWidths=E)})},Z=(a,l,s)=>{const i=l||v.NODE_HEIGHT,e=s||v.VERTICAL_LINE;a.forEach(t=>{const n=t.level,r=(i+e)*n+v.VERTICAL_LINE*(n?n-1:0)-(e-v.VERTICAL_LINE)*(n?1:0);t.top=r})},q=(a,l,s)=>{const i=l||v.NODE_HEIGHT,e=s||v.VERTICAL_LINE;return Math.max(...a.map(n=>{const r=n.top||0,m=n.items.length,d=n.orientation==="horizontal"?i+e+e:m*(i+e);return r+d}))},R=a=>{const l={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",avatarType:"image",showAvatar:!0},{id:s,width:i,data:e,groupField:t,cardWidth:n,cardHeight:r,verticalLine:m,idField:d,childrenField:h,hasChildrenField:f,expandField:E,avatarField:o,titleField:u,subtitleField:L,ariaLabel:w,itemRender:_,height:W,avatarType:p,showAvatar:x}={...l,...a},O=[{items:e,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];C({dataByGroups:O,data:e,cardWidth:n,expandField:E,hasChildrenField:f,childrenField:h,idField:d,groupField:t}),V(O,n),F(O,h,d),Z(O,r,m);const S=q(O,r,m);return H.createElement("div",{className:"k-orgchart-container",style:{width:i,height:W||S}},O.map(c=>{const I=c.level,A=c.items,b=c.orientation;return H.createElement("div",{role:I===0?"tree":"group",id:s+"-"+I+"-"+c.ids[0],"aria-label":I===0?w:void 0,"aria-orientation":I===0?b:void 0,key:c.ids[0]+"_"+I,className:T.classNames("k-orgchart-group",`k-orgchart-level-${I}`,"k-pos-absolute",{[`k-${T.kendoThemeMaps.orientationMap[b]}`]:b}),style:{width:c.width||"100%",left:c.left,top:c.top}},A.length>0&&H.createElement("div",{role:"group",style:{width:"100%"},className:T.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${T.kendoThemeMaps.orientationMap[c.orientation]}`]:c.orientation})},A.map((g,N)=>{const k=g[h]&&g[h].length||f&&g[f],M=k||c.orientation==="vertical"&&N!==A.length-1,P=c.orientation==="vertical"&&N!==0?0:m||v.VERTICAL_LINE,D=c.childLineWidths?Math.max(...c.childLineWidths):void 0,y=g[E];return H.createElement(z.ServerOrgChartNode,{id:s+"-"+(I+1)+"-"+g[d],style:{width:D},itemRender:_,cardHeight:r,cardWidth:n,verticalLine:P,key:N,level:I,avatar:g[o],avatarType:p,showAvatar:x,title:g[u],subtitle:g[L],line:M,expanded:y,node:g,childLineWidth:k&&y&&c.orientation==="horizontal"?c.childLineWidths[N]:0,plus:k},g.text)})))}))};R.displayName="KendoServerOrgChart";exports.ServerOrgChart=R;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),T=require("@progress/kendo-react-common"),z=require("./ServerOrgChartNode.js"),v=require("../utils/consts.js");function G(a){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const s in a)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(a,s);Object.defineProperty(l,s,i.get?i:{enumerable:!0,get:()=>a[s]})}}return l.default=a,Object.freeze(l)}const H=G(j),C=({dataByGroups:a,data:l=[],cardWidth:s,childrenField:i,idField:e,expandField:t,hasChildrenField:n,groupField:r,level:m=1,parentId:d=0})=>{l.forEach(h=>{const f=h[i];if(h[t]&&f&&f.length){const o=f.some(w=>w[i]&&w[i].length||n&&w[n]),u=o?"horizontal":"vertical",L=o?null:s;a.push({ids:[h[e]],items:f,level:m,parentId:d,hasChildren:o,orientation:u,width:L}),C({dataByGroups:a,data:h[i],childrenField:i,cardWidth:s,idField:e,expandField:t,hasChildrenField:n,groupField:r,level:m+1,parentId:h[e]})}})},V=(a,l)=>{const s=l||v.NODE_WIDTH,i=a.sort((e,t)=>t.level-e.level);i.forEach(e=>{if(!e.width){const t=i.filter(d=>e.ids.includes(d.parentId)),n=t.length?Math.max(...t.map(d=>d.width||0)):s,r=e.orientation==="horizontal"?e.items.length:1,m=n*r+v.HORIZONTAL_GAP*(r-1);e.width=m}})},F=(a,l,s)=>{const i=a.sort((e,t)=>e.level-t.level);i.forEach(e=>{if(e.level===0)return;const t=i.find(o=>o.ids.includes(e.parentId)),n=(t==null?void 0:t.items.findIndex(o=>e.ids.includes(o[s])))||0,r=(t==null?void 0:t.items)||[],m=t.width?(t.width-(r.length-1)*v.HORIZONTAL_GAP)/r.length:0;if(!e.left){let o=(t==null?void 0:t.left)||0;r.forEach((u,L)=>{L<n&&(o+=m+v.HORIZONTAL_GAP)}),e.left=o}const d=(t==null?void 0:t.width)||0,h=(t==null?void 0:t.items.length)||1,f=(d-(h-1)*v.HORIZONTAL_GAP)/h;e.width=f;const E=t==null?void 0:t.items.map(o=>{const u=o[l]?o[l].length:0,L=i.find(_=>_.ids.includes(o[s])),w=(L==null?void 0:L.width)||0;return(L==null?void 0:L.orientation)==="vertical"||u===0||!o.expanded?0:w-(w-(u-1)*v.HORIZONTAL_GAP)/u});t&&(t.childLineWidths=E)})},Z=(a,l,s)=>{const i=l||v.NODE_HEIGHT,e=s||v.VERTICAL_LINE;a.forEach(t=>{const n=t.level,r=(i+e)*n+v.VERTICAL_LINE*(n?n-1:0)-(e-v.VERTICAL_LINE)*(n?1:0);t.top=r})},q=(a,l,s)=>{const i=l||v.NODE_HEIGHT,e=s||v.VERTICAL_LINE;return Math.max(...a.map(n=>{const r=n.top||0,m=n.items.length,d=n.orientation==="horizontal"?i+e+e:m*(i+e);return r+d}))},R=a=>{const l={width:"100%",data:[],ariaLabel:"Org Chart",idField:"id",childrenField:"items",avatarField:"avatar",titleField:"title",subtitleField:"subtitle",expandField:"expanded",avatarType:"image",showAvatar:!0},{id:s,width:i,data:e,groupField:t,cardWidth:n,cardHeight:r,verticalLine:m,idField:d,childrenField:h,hasChildrenField:f,expandField:E,avatarField:o,titleField:u,subtitleField:L,ariaLabel:w,itemRender:_,height:W,avatarType:p,showAvatar:x}={...l,...a},O=[{items:e,level:0,hasChildren:!0,orientation:"horizontal",ids:[0],parentId:null,width:null}];C({dataByGroups:O,data:e,cardWidth:n,expandField:E,hasChildrenField:f,childrenField:h,idField:d,groupField:t}),V(O,n),F(O,h,d),Z(O,r,m);const S=q(O,r,m);return H.createElement("div",{className:"k-orgchart-container",style:{width:i,height:W||S}},O.map(c=>{const I=c.level,A=c.items,b=c.orientation;return H.createElement("div",{role:I===0?"tree":"group",id:s+"-"+I+"-"+c.ids[0],"aria-label":I===0?w:void 0,"aria-orientation":I===0?b:void 0,key:c.ids[0]+"_"+I,className:T.classNames("k-orgchart-group",`k-orgchart-level-${I+1}`,"k-pos-absolute",{[`k-${T.kendoThemeMaps.orientationMap[b]}`]:b}),style:{width:c.width||"100%",left:c.left,top:c.top}},A.length>0&&H.createElement("div",{role:"presentation",style:{width:"100%"},className:T.classNames("k-orgchart-node-container","k-justify-content-around",{[`k-${T.kendoThemeMaps.orientationMap[c.orientation]}`]:c.orientation})},A.map((g,N)=>{const k=g[h]&&g[h].length||f&&g[f],M=k||c.orientation==="vertical"&&N!==A.length-1,P=c.orientation==="vertical"&&N!==0?0:m||v.VERTICAL_LINE,D=c.childLineWidths?Math.max(...c.childLineWidths):void 0,y=g[E];return H.createElement(z.ServerOrgChartNode,{id:s+"-"+(I+1)+"-"+g[d],style:{width:D},itemRender:_,cardHeight:r,cardWidth:n,verticalLine:P,key:N,level:I,avatar:g[o],avatarType:p,showAvatar:x,title:g[u],subtitle:g[L],line:M,expanded:y,node:g,childLineWidth:k&&y&&c.orientation==="horizontal"?c.childLineWidths[N]:0,plus:k},g.text)})))}))};R.displayName="KendoServerOrgChart";exports.ServerOrgChart=R;
package/server/ServerOrgChart.mjs CHANGED
@@ -160,15 +160,9 @@ const R = ({
160
160
  "aria-label": W === 0 ? g : void 0,
161
161
  "aria-orientation": W === 0 ? p : void 0,
162
162
  key: o.ids[0] + "_" + W,
163
- className: O(
164
- "k-orgchart-group",
165
- // The following class is not part of the reference rendering. After a team discussion we decided to keep it as it will be useful for the end users.
166
- `k-orgchart-level-${W}`,
167
- "k-pos-absolute",
168
- {
169
- [`k-${b.orientationMap[p]}`]: p
170
- }
171
- ),
163
+ className: O("k-orgchart-group", `k-orgchart-level-${W + 1}`, "k-pos-absolute", {
164
+ [`k-${b.orientationMap[p]}`]: p
165
+ }),
172
166
  style: {
173
167
  width: o.width || "100%",
174
168
  left: o.left,
@@ -178,7 +172,7 @@ const R = ({
178
172
  T.length > 0 && /* @__PURE__ */ N.createElement(
179
173
  "div",
180
174
  {
181
- role: "group",
175
+ role: "presentation",
182
176
  style: { width: "100%" },
183
177
  className: O("k-orgchart-node-container", "k-justify-content-around", {
184
178
  [`k-${b.orientationMap[o.orientation]}`]: o.orientation
package/server/ServerOrgChartGroup.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),s=require("@progress/kendo-react-common"),C=require("../client/ExpandButton.js"),f=require("../client/OrgChartGroupContainer.js"),O=require("../utils/consts.js");function A(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(n,r,a.get?a:{enumerable:!0,get:()=>t[r]})}}return n.default=t,Object.freeze(n)}const e=A(G),H="k-orgchart-node-group",T="k-orgchart-node-group-title",k="k-orgchart-node-group-subtitle",L=t=>{const n={orientation:"horizontal"},{id:r,title:a,subtitle:u,line:S,plus:d,focus:P,level:o,verticalLine:v,childLineWidth:g,orientation:l,expanded:c,nodes:i,groupTitleHeight:N,groupSubtitleHeight:R,groupTitleRender:_,groupSubtitleRender:y,...b}={...n,...t},m=_,h=y,p={height:N||O.GROUP_TITLE_HEIGHT},E={height:R||O.GROUP_SUBTITLE_HEIGHT};return e.createElement("div",{...b,className:s.classNames(t.className,H,"k-vstack","k-align-items-center")},o!==0&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:v}}),e.createElement(f.OrgChartGroupContainer,{nodes:i,"aria-expanded":!!c,"aria-keyshortcuts":"Enter","aria-level":o+1,"aria-owns":r},m?e.createElement(m,{style:p,className:T,title:a,items:i,level:o,expanded:c}):e.createElement("div",{className:T,style:p},a),h?e.createElement(h,{style:E,className:k,subtitle:u,items:i,level:o,expanded:c}):e.createElement("div",{className:k,style:E},u),e.createElement("div",{role:"group",style:{width:"100%"},className:s.classNames("k-orgchart-node-container",{[`k-${s.kendoThemeMaps.orientationMap[l]||l}`]:l})},t.children)),S&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),d&&e.createElement(C.ExpandButton,{expanded:c,nodes:i}),d&&!!g&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:g,marginTop:-15}}))};exports.ServerOrgChartGroup=L;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),s=require("@progress/kendo-react-common"),C=require("../client/ExpandButton.js"),f=require("../client/OrgChartGroupContainer.js"),O=require("../utils/consts.js");function A(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(r,n,a.get?a:{enumerable:!0,get:()=>t[n]})}}return r.default=t,Object.freeze(r)}const e=A(G),H="k-orgchart-node-group",T="k-orgchart-node-group-title",S="k-orgchart-node-group-subtitle",L=t=>{const r={orientation:"horizontal"},{id:n,title:a,subtitle:u,line:k,plus:g,focus:P,level:c,verticalLine:N,childLineWidth:d,orientation:l,expanded:i,nodes:o,groupTitleHeight:R,groupSubtitleHeight:v,groupTitleRender:_,groupSubtitleRender:b,...y}={...r,...t},m=_,h=b,p={height:R||O.GROUP_TITLE_HEIGHT},E={height:v||O.GROUP_SUBTITLE_HEIGHT};return e.createElement("div",{...y,className:s.classNames(t.className,H,"k-vstack","k-align-items-center"),role:"group"},c!==0&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:N}}),e.createElement(f.OrgChartGroupContainer,{nodes:o},m?e.createElement(m,{style:p,className:T,title:a,items:o,level:c,expanded:i}):e.createElement("div",{className:T,style:p},a),h?e.createElement(h,{style:E,className:S,subtitle:u,items:o,level:c,expanded:i}):e.createElement("div",{className:S,style:E},u),e.createElement("div",{role:"presentation",style:{width:"100%"},className:s.classNames("k-orgchart-node-container",{[`k-${s.kendoThemeMaps.orientationMap[l]||l}`]:l})},t.children)),k&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),g&&e.createElement(C.ExpandButton,{expanded:i,nodes:o}),g&&!!d&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:d,marginTop:-15}}))};exports.ServerOrgChartGroup=L;
package/server/ServerOrgChartGroup.mjs CHANGED
@@ -6,90 +6,79 @@
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
8
  import * as e from "react";
9
- import { classNames as E, kendoThemeMaps as y } from "@progress/kendo-react-common";
10
- import { ExpandButton as A } from "../client/ExpandButton.mjs";
11
- import { OrgChartGroupContainer as C } from "../client/OrgChartGroupContainer.mjs";
12
- import { GROUP_TITLE_HEIGHT as H, GROUP_SUBTITLE_HEIGHT as L } from "../utils/consts.mjs";
13
- const f = "k-orgchart-node-group", u = "k-orgchart-node-group-title", p = "k-orgchart-node-group-subtitle", x = (o) => {
9
+ import { classNames as E, kendoThemeMaps as O } from "@progress/kendo-react-common";
10
+ import { ExpandButton as y } from "../client/ExpandButton.mjs";
11
+ import { OrgChartGroupContainer as A } from "../client/OrgChartGroupContainer.mjs";
12
+ import { GROUP_TITLE_HEIGHT as C, GROUP_SUBTITLE_HEIGHT as H } from "../utils/consts.mjs";
13
+ const L = "k-orgchart-node-group", p = "k-orgchart-node-group-title", u = "k-orgchart-node-group-subtitle", x = (r) => {
14
14
  const T = {
15
15
  orientation: "horizontal"
16
16
  }, {
17
- id: k,
18
- title: l,
19
- subtitle: n,
20
- line: N,
17
+ id: f,
18
+ title: n,
19
+ subtitle: i,
20
+ line: k,
21
21
  plus: s,
22
22
  focus: U,
23
- level: t,
24
- verticalLine: R,
23
+ level: o,
24
+ verticalLine: N,
25
25
  childLineWidth: c,
26
- orientation: i,
27
- expanded: r,
28
- nodes: a,
29
- groupTitleHeight: v,
30
- groupSubtitleHeight: S,
31
- groupTitleRender: _,
32
- groupSubtitleRender: G,
33
- ...O
34
- } = { ...T, ...o }, m = _, h = G, d = { height: v || H }, g = { height: S || L };
26
+ orientation: a,
27
+ expanded: l,
28
+ nodes: t,
29
+ groupTitleHeight: R,
30
+ groupSubtitleHeight: v,
31
+ groupTitleRender: S,
32
+ groupSubtitleRender: _,
33
+ ...G
34
+ } = { ...T, ...r }, m = S, h = _, g = { height: R || C }, d = { height: v || H };
35
35
  return /* @__PURE__ */ e.createElement(
36
36
  "div",
37
37
  {
38
- ...O,
39
- className: E(o.className, f, "k-vstack", "k-align-items-center")
38
+ ...G,
39
+ className: E(r.className, L, "k-vstack", "k-align-items-center"),
40
+ role: "group"
40
41
  },
41
- t !== 0 && /* @__PURE__ */ e.createElement(
42
+ o !== 0 && /* @__PURE__ */ e.createElement(
42
43
  "div",
43
44
  {
44
45
  className: "k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",
45
- style: { height: R }
46
+ style: { height: N }
46
47
  }
47
48
  ),
48
- /* @__PURE__ */ e.createElement(
49
- C,
49
+ /* @__PURE__ */ e.createElement(A, { nodes: t }, m ? /* @__PURE__ */ e.createElement(
50
+ m,
50
51
  {
51
- nodes: a,
52
- "aria-expanded": !!r,
53
- "aria-keyshortcuts": "Enter",
54
- "aria-level": t + 1,
55
- "aria-owns": k
52
+ style: g,
53
+ className: p,
54
+ title: n,
55
+ items: t,
56
+ level: o,
57
+ expanded: l
58
+ }
59
+ ) : /* @__PURE__ */ e.createElement("div", { className: p, style: g }, n), h ? /* @__PURE__ */ e.createElement(
60
+ h,
61
+ {
62
+ style: d,
63
+ className: u,
64
+ subtitle: i,
65
+ items: t,
66
+ level: o,
67
+ expanded: l
68
+ }
69
+ ) : /* @__PURE__ */ e.createElement("div", { className: u, style: d }, i), /* @__PURE__ */ e.createElement(
70
+ "div",
71
+ {
72
+ role: "presentation",
73
+ style: { width: "100%" },
74
+ className: E("k-orgchart-node-container", {
75
+ [`k-${O.orientationMap[a] || a}`]: a
76
+ })
56
77
  },
57
- m ? /* @__PURE__ */ e.createElement(
58
- m,
59
- {
60
- style: d,
61
- className: u,
62
- title: l,
63
- items: a,
64
- level: t,
65
- expanded: r
66
- }
67
- ) : /* @__PURE__ */ e.createElement("div", { className: u, style: d }, l),
68
- h ? /* @__PURE__ */ e.createElement(
69
- h,
70
- {
71
- style: g,
72
- className: p,
73
- subtitle: n,
74
- items: a,
75
- level: t,
76
- expanded: r
77
- }
78
- ) : /* @__PURE__ */ e.createElement("div", { className: p, style: g }, n),
79
- /* @__PURE__ */ e.createElement(
80
- "div",
81
- {
82
- role: "group",
83
- style: { width: "100%" },
84
- className: E("k-orgchart-node-container", {
85
- [`k-${y.orientationMap[i] || i}`]: i
86
- })
87
- },
88
- o.children
89
- )
90
- ),
91
- N && /* @__PURE__ */ e.createElement("div", { className: "k-orgchart-line k-orgchart-line-v" }),
92
- s && /* @__PURE__ */ e.createElement(A, { expanded: r, nodes: a }),
78
+ r.children
79
+ )),
80
+ k && /* @__PURE__ */ e.createElement("div", { className: "k-orgchart-line k-orgchart-line-v" }),
81
+ s && /* @__PURE__ */ e.createElement(y, { expanded: l, nodes: t }),
93
82
  s && !!c && /* @__PURE__ */ e.createElement("div", { className: "k-orgchart-line k-orgchart-line-h", style: { width: c, marginTop: -15 } })
94
83
  );
95
84
  };
package/server/ServerOrgChartNode.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),b=require("@progress/kendo-react-common"),i=require("@progress/kendo-react-layout"),R=require("../client/ExpandButton.js"),S=require("../client/OrgChartCard.js"),T=require("../client/OrgChartCardBody.js");function q(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(r,a,c.get?c:{enumerable:!0,get:()=>t[a]})}}return r.default=t,Object.freeze(r)}const e=q(f),w="k-orgchart-node",x=t=>{const r={avatarType:"image"},{id:a,title:c,subtitle:o,level:n,childLineWidth:d,cardWidth:p,cardHeight:v,verticalLine:k,color:E,line:C,plus:m,expanded:l,node:s,avatar:g,avatarType:u,itemRender:N,showAvatar:y,...O}={...r,...t},h=N;return e.createElement("div",{...O,className:b.classNames(t.className,w,"k-vstack","k-align-items-center")},n!==0&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:k}}),e.createElement(S.OrgChartCard,{node:s,style:{width:p,height:v},"aria-level":n+1,"aria-expanded":!!l,"aria-owns":a},e.createElement(T.OrgChartCardBody,{level:n},h?e.createElement(h,{item:s,title:c,subtitle:o,level:n,expanded:l,color:E}):e.createElement(e.Fragment,null,y&&e.createElement(i.Avatar,{type:u,themeColor:"secondary"},u==="image"?e.createElement("img",{src:g,alt:"KendoReact Avatar Customer"}):g),e.createElement("div",{className:"k-card-title-wrap k-vstack"},e.createElement(i.CardTitle,{className:"k-text-ellipsis"},c),e.createElement("span",{className:"k-spacer"}),e.createElement(i.CardSubtitle,{className:"k-text-ellipsis"},o)),e.createElement("span",{className:"k-spacer"})))),C&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),m&&e.createElement(R.ExpandButton,{expanded:l,node:s}),m&&!!d&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:d,marginTop:-15}}))};exports.ServerOrgChartNode=x;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),f=require("@progress/kendo-react-common"),i=require("@progress/kendo-react-layout"),R=require("../client/ExpandButton.js"),S=require("../client/OrgChartCard.js"),T=require("../client/OrgChartCardBody.js");function q(t){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(c,a,n.get?n:{enumerable:!0,get:()=>t[a]})}}return c.default=t,Object.freeze(c)}const e=q(b),w="k-orgchart-node",A=t=>{const c={avatarType:"image"},{id:a,title:n,subtitle:o,level:l,childLineWidth:m,cardWidth:v,cardHeight:k,verticalLine:E,color:p,line:C,plus:d,expanded:r,node:s,avatar:u,avatarType:g,itemRender:N,showAvatar:y,...O}={...c,...t},h=N;return e.createElement("div",{...O,className:f.classNames(t.className,w,"k-vstack","k-align-items-center"),role:"treeitem","aria-level":l+1,"aria-keyshortcuts":"Enter","aria-expanded":r!=null?r:void 0,"aria-owns":r!==void 0?a:void 0,"aria-selected":!1},l!==0&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:E}}),e.createElement(S.OrgChartCard,{node:s,style:{width:v,height:k}},e.createElement(T.OrgChartCardBody,{level:l},h?e.createElement(h,{item:s,title:n,subtitle:o,level:l,expanded:r,color:p}):e.createElement(e.Fragment,null,y&&e.createElement(i.Avatar,{type:g,themeColor:"secondary"},g==="image"?e.createElement("img",{src:u,alt:"KendoReact Avatar Customer"}):u),e.createElement("div",{className:"k-card-title-wrap k-vstack"},e.createElement(i.CardTitle,{className:"k-text-ellipsis"},n),e.createElement("span",{className:"k-spacer"}),e.createElement(i.CardSubtitle,{className:"k-text-ellipsis"},o)),e.createElement("span",{className:"k-spacer"}),e.createElement("span",{className:"k-orgchart-card-menu",role:"button","aria-label":"Edit menu",tabIndex:-1})))),C&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),d&&e.createElement(R.ExpandButton,{expanded:r,node:s}),d&&!!m&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:m,marginTop:-15}}))};exports.ServerOrgChartNode=A;
package/server/ServerOrgChartNode.mjs CHANGED
@@ -7,72 +7,68 @@
7
7
  */
8
8
  import * as e from "react";
9
9
  import { classNames as f } from "@progress/kendo-react-common";
10
- import { Avatar as x, CardTitle as A, CardSubtitle as R } from "@progress/kendo-react-layout";
10
+ import { Avatar as A, CardTitle as R, CardSubtitle as b } from "@progress/kendo-react-layout";
11
11
  import { ExpandButton as w } from "../client/ExpandButton.mjs";
12
- import { OrgChartCard as O } from "../client/OrgChartCard.mjs";
13
- import { OrgChartCardBody as T } from "../client/OrgChartCardBody.mjs";
14
- const S = "k-orgchart-node", D = (l) => {
12
+ import { OrgChartCard as x } from "../client/OrgChartCard.mjs";
13
+ import { OrgChartCardBody as O } from "../client/OrgChartCardBody.mjs";
14
+ const T = "k-orgchart-node", W = (l) => {
15
15
  const h = {
16
16
  avatarType: "image"
17
17
  }, {
18
- id: p,
18
+ id: v,
19
19
  title: c,
20
20
  subtitle: i,
21
- level: t,
22
- childLineWidth: m,
23
- cardWidth: g,
24
- cardHeight: v,
25
- verticalLine: E,
21
+ level: a,
22
+ childLineWidth: s,
23
+ cardWidth: E,
24
+ cardHeight: g,
25
+ verticalLine: p,
26
26
  color: k,
27
27
  line: N,
28
- plus: n,
29
- expanded: a,
28
+ plus: m,
29
+ expanded: t,
30
30
  node: r,
31
- avatar: s,
31
+ avatar: n,
32
32
  avatarType: o,
33
- itemRender: C,
34
- showAvatar: u,
33
+ itemRender: u,
34
+ showAvatar: C,
35
35
  ...y
36
- } = { ...h, ...l }, d = C;
36
+ } = { ...h, ...l }, d = u;
37
37
  return /* @__PURE__ */ e.createElement(
38
38
  "div",
39
39
  {
40
40
  ...y,
41
- className: f(l.className, S, "k-vstack", "k-align-items-center")
41
+ className: f(l.className, T, "k-vstack", "k-align-items-center"),
42
+ role: "treeitem",
43
+ "aria-level": a + 1,
44
+ "aria-keyshortcuts": "Enter",
45
+ "aria-expanded": t != null ? t : void 0,
46
+ "aria-owns": t !== void 0 ? v : void 0,
47
+ "aria-selected": !1
42
48
  },
43
- t !== 0 && /* @__PURE__ */ e.createElement(
49
+ a !== 0 && /* @__PURE__ */ e.createElement(
44
50
  "div",
45
51
  {
46
52
  className: "k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",
47
- style: { height: E }
53
+ style: { height: p }
48
54
  }
49
55
  ),
50
- /* @__PURE__ */ e.createElement(
51
- O,
56
+ /* @__PURE__ */ e.createElement(x, { node: r, style: { width: E, height: g } }, /* @__PURE__ */ e.createElement(O, { level: a }, d ? /* @__PURE__ */ e.createElement(
57
+ d,
52
58
  {
53
- node: r,
54
- style: { width: g, height: v },
55
- "aria-level": t + 1,
56
- "aria-expanded": !!a,
57
- "aria-owns": p
58
- },
59
- /* @__PURE__ */ e.createElement(T, { level: t }, d ? /* @__PURE__ */ e.createElement(
60
- d,
61
- {
62
- item: r,
63
- title: c,
64
- subtitle: i,
65
- level: t,
66
- expanded: a,
67
- color: k
68
- }
69
- ) : /* @__PURE__ */ e.createElement(e.Fragment, null, u && /* @__PURE__ */ e.createElement(x, { type: o, themeColor: "secondary" }, o === "image" ? /* @__PURE__ */ e.createElement("img", { src: s, alt: "KendoReact Avatar Customer" }) : s), /* @__PURE__ */ e.createElement("div", { className: "k-card-title-wrap k-vstack" }, /* @__PURE__ */ e.createElement(A, { className: "k-text-ellipsis" }, c), /* @__PURE__ */ e.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ e.createElement(R, { className: "k-text-ellipsis" }, i)), /* @__PURE__ */ e.createElement("span", { className: "k-spacer" })))
70
- ),
59
+ item: r,
60
+ title: c,
61
+ subtitle: i,
62
+ level: a,
63
+ expanded: t,
64
+ color: k
65
+ }
66
+ ) : /* @__PURE__ */ e.createElement(e.Fragment, null, C && /* @__PURE__ */ e.createElement(A, { type: o, themeColor: "secondary" }, o === "image" ? /* @__PURE__ */ e.createElement("img", { src: n, alt: "KendoReact Avatar Customer" }) : n), /* @__PURE__ */ e.createElement("div", { className: "k-card-title-wrap k-vstack" }, /* @__PURE__ */ e.createElement(R, { className: "k-text-ellipsis" }, c), /* @__PURE__ */ e.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ e.createElement(b, { className: "k-text-ellipsis" }, i)), /* @__PURE__ */ e.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ e.createElement("span", { className: "k-orgchart-card-menu", role: "button", "aria-label": "Edit menu", tabIndex: -1 })))),
71
67
  N && /* @__PURE__ */ e.createElement("div", { className: "k-orgchart-line k-orgchart-line-v" }),
72
- n && /* @__PURE__ */ e.createElement(w, { expanded: a, node: r }),
73
- n && !!m && /* @__PURE__ */ e.createElement("div", { className: "k-orgchart-line k-orgchart-line-h", style: { width: m, marginTop: -15 } })
68
+ m && /* @__PURE__ */ e.createElement(w, { expanded: t, node: r }),
69
+ m && !!s && /* @__PURE__ */ e.createElement("div", { className: "k-orgchart-line k-orgchart-line-h", style: { width: s, marginTop: -15 } })
74
70
  );
75
71
  };
76
72
  export {
77
- D as ServerOrgChartNode
73
+ W as ServerOrgChartNode
78
74
  };