@progress/kendo-react-orgchart 7.2.4-develop.3 → 7.3.0-develop.1

package/index.d.ts

@@ -1,12 +1,520 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-export { ServerOrgChart } from './server/ServerOrgChart';
-export { type ServerOrgChartProps } from './interfaces/SeverOrgChartProps';
-export * from './OrgChart';
-export { type OrgChartExpandChangeEvent } from './interfaces/OrgChartExpandChangeEvent';
-export { type OrgChartActionEvent } from './interfaces/OrgChartActionEvent';
-export * from './processOrgChartItems';
-export * from './server/ServerOrgChartNode';
-export * from './server/ServerOrgChartGroup';
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+
+/**
+ * Represents the OrgChart component.
+ */
+export declare const OrgChart: React_2.FunctionComponent<OrgChartProps>;
+
+/**
+ * Represents the OrgChartActionEvent event argument.
+ */
+export declare interface OrgChartActionEvent {
+    /**
+     * Represents the triggered React event.
+     */
+    event: React.KeyboardEvent | React.MouseEvent | React.FocusEvent;
+    /**
+     * Item that triggers the event.
+     */
+    item?: any;
+    /**
+     * Items that belong to the group that triggers the event.
+     */
+    items?: any;
+    /**
+     * @hidden
+     */
+    containerRef?: React.RefObject<HTMLDivElement>;
+}
+
+/**
+ * The descriptor which is used for checking.
+ */
+declare interface OrgChartCheckDescriptor extends OrgChartOperationDescriptor {
+    /**
+     * Determines if a parent item will have an indeterminate state when not all its children are checked.
+     */
+    applyCheckIndeterminate?: boolean;
+    /**
+     * The name of the field which will provide a Boolean representation for the indeterminate state of a parent item.
+     * Defaults to `checkIndeterminate`.
+     */
+    checkIndeterminateField?: string;
+}
+
+/**
+ * Represents the OrgChartExpandChangeEvent event argument.
+ */
+export declare interface OrgChartExpandChangeEvent {
+    /**
+     * Represents the triggered React event.
+     */
+    event: React.MouseEvent | React.KeyboardEvent;
+    /**
+     * Represents expand value of the item or group.
+     */
+    expand: boolean;
+    /**
+     * Item that triggers the event.
+     */
+    item?: any;
+    /**
+     * Items that belong to the group that triggers the event.
+     */
+    items?: any[];
+}
+
+/**
+ * @hidden
+ */
+export declare interface OrgChartGroupSubtitleProps {
+    /**
+     * The styles that are applied to the OrgChart.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * The default class that is applied to the OrgChart group title.
+     */
+    className?: string;
+    /**
+     * The default subtitle that are passed to the OrgChart group.
+     */
+    subtitle?: string;
+    /**
+     * The collection of inner items of the group.
+     */
+    items?: any[];
+    /**
+     * The level of the group.
+     */
+    level?: number;
+    /**
+     * The expanded state of the group.
+     */
+    expanded?: boolean;
+}
+
+/**
+ * @hidden
+ */
+export declare interface OrgChartGroupTitleProps {
+    /**
+     * The styles that are applied to the OrgChart group title.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * The default class that is applied to the OrgChart group title.
+     */
+    className?: string;
+    /**
+     * The default title that are passed to the OrgChart group.
+     */
+    title?: string;
+    /**
+     * The collection of inner items of the group.
+     */
+    items?: any[];
+    /**
+     * The level of the group.
+     */
+    level?: number;
+    /**
+     * The expanded state of the group.
+     */
+    expanded?: boolean;
+}
+
+/**
+ * The props that are passed to the itemRender component.
+ */
+export declare interface OrgChartItemRenderProps {
+    /**
+     * The item passed to the ItemRender.
+     */
+    item?: any;
+    /**
+     * The title of the item.
+     */
+    title?: string;
+    /**
+     * The subtitle of the item.
+     */
+    subtitle?: string;
+    /**
+     * The level of the item.
+     */
+    level?: number;
+    /**
+     * The expanded state of the item.
+     */
+    expanded?: boolean;
+    /**
+     * The color of the item.
+     */
+    color?: string;
+}
+
+/**
+ * The descriptor which is used for expanding, selecting, and checking.
+ */
+declare interface OrgChartOperationDescriptor {
+    /**
+     * The IDs of the items to which the operation will be applied. By default, the OrgChart applies the hierarchical indices of the items. These indices are zero-based. The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
+     */
+    ids?: any[];
+    /**
+     * The name of the field which will provide a Boolean representation for the operation state of the item.
+     *
+     * The default fields are:
+     * * `expanded`&mdash;Indicates that an item is expanded.
+     * * `selected`&mdash;Indicates that an item is selected.
+     * * `checked`&mdash;Indicates that an item is checked.
+     */
+    operationField?: string;
+    /**
+     * The name of the field which will uniquely describe an item as an alternative to its hierarchical index.
+     */
+    idField?: string;
+}
+
+/**
+ * The descriptors of the data operations which are applied to the OrgChart component.
+ */
+declare interface OrgChartOperationDescriptors {
+    /**
+     * The hierarchical indices of the items to which the expand operation will be applied, or the descriptor of the operation.
+     */
+    expand?: string[] | OrgChartOperationDescriptor;
+    /**
+     * The hierarchical indices of the items to which the select operation will be applied, or the descriptor of the operation.
+     */
+    select?: string[] | OrgChartOperationDescriptor;
+    /**
+     * The hierarchical indices of the items to which the check operation will be applied, or the descriptor of the operation.
+     */
+    check?: string[] | OrgChartCheckDescriptor;
+    /**
+     * When the operations are applied, the corresponding items and their parents are cloned.
+     * For performance reasons, OrgChart items are cloned only once.
+     * The name of the field which provides a Boolean representation of whether an item is already cloned.
+     * Defaults to `cloned`.
+     */
+    cloneField?: string;
+    /**
+     * The expand field of the item.
+     */
+    expandField?: string;
+    /**
+     * The select field of the item.
+     */
+    selectField?: string;
+    /**
+     * The check field of the item.
+     */
+    checkField?: string;
+    /**
+     * The children field of the item.
+     */
+    childrenField?: string;
+}
+
+/**
+ * Represents the props of the [KendoReact OrgChart component]({% slug overview_orgchart %}).
+ */
+declare interface OrgChartProps extends ServerOrgChartProps {
+    /**
+     * Specifies if the OrgChart can be navigatable with keyboard.
+     * Defaults to `true`.
+     */
+    navigatable?: boolean;
+    /**
+     * Fires when a node or group is expanded.
+     */
+    onExpandChange?: (ev: OrgChartExpandChangeEvent) => void;
+    /**
+     * @hidden
+     */
+    onKeyDown?: (ev: OrgChartActionEvent) => void;
+    /**
+     * Triggers the item action event.
+     */
+    onItemAction?: (ev: OrgChartActionEvent) => void;
+    /**
+     * Triggers the item double click action event.
+     */
+    onItemDoubleClick?: (ev: OrgChartActionEvent) => void;
+    /**
+     * Triggers the item contextmenu action event.
+     */
+    onItemContextMenu?: (ev: OrgChartActionEvent) => void;
+    /**
+     * Triggers the group action event.
+     */
+    onGroupAction?: (ev: OrgChartActionEvent) => void;
+    /**
+     * @hidden
+     */
+    onGroupBlur?: (ev: OrgChartActionEvent) => void;
+    /**
+     * @hidden
+     */
+    onGroupFocus?: (ev: OrgChartActionEvent) => void;
+}
+
+/**
+ * A helper function which applies the specified operation descriptors to the data.
+ * * [Expanding and collapsing items]({% slug expansion_ways_treeview %}#toc-using-a-helper-function)
+ * * [Selecting and deselecting items]({% slug selection_ways_treeview %}#toc-using-a-helper-function)
+ * * [Checking and unchecking items]({% slug check_helper_funcs_treeview %})
+ *
+ * @param data - The data that will be processed.
+ * @param operations - The operation descriptors that will be applied to the data.
+ * @returns - The processed copy of the input data.
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *     state = { items: tree, expand: [], select: [], check: [] };
+ *     render() {
+ *         const { expand, select, check } = this.state;
+ *         return (
+ *             <OrgChart
+ *                 data={processOrgChartItems(this.state.items, { expand, select, check })}
+ *                 expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
+ *                 onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
+ *                 onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
+ *             />
+ *         );
+ *     }
+ *     onExpandChange = (event) => {
+ *         let expand = this.state.expand.slice();
+ *         const index = expand.indexOf(event.itemHierarchicalIndex);
+ *         index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
+ *         this.setState({ expand });
+ *     }
+ * }
+ *
+ * const tree = [{
+ *     text: 'Item1',
+ *     items: [
+ *         { text: 'Item1.1' },
+ *         { text: 'Item1.2' },
+ *         { text: 'Item1.3', items: [{ text: 'Item1.3.1' }] }]
+ * }, {
+ *     text: 'Item2', disabled: true,
+ *     items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
+ * }, {
+ *     text: 'Item3'
+ * }];
+ *
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare function processOrgChartItems(data: any[] | null | undefined, operations: OrgChartOperationDescriptors): any[];
+
+/**
+ * @hidden
+ */
+export declare const ServerOrgChart: {
+    (props: ServerOrgChartProps): JSX_2.Element;
+    displayName: string;
+};
+
+/**
+ * @hidden
+ */
+export declare const ServerOrgChartGroup: React_2.FunctionComponent<ServerOrgChartGroupProps>;
+
+/**
+ * @hidden
+ */
+export declare interface ServerOrgChartGroupProps {
+    /**
+     * @hidden
+     */
+    children?: React_2.ReactNode;
+    /**
+     * Sets additional classes to the OrgChart.
+     */
+    className?: string;
+    id?: string;
+    /**
+     * The styles that are applied to the OrgChart.
+     */
+    style?: React_2.CSSProperties;
+    title?: string;
+    subtitle?: string;
+    line?: boolean;
+    plus?: boolean;
+    focus?: boolean;
+    expanded?: boolean;
+    nodes?: any[];
+    level: number;
+    groupTitleHeight?: number;
+    groupSubtitleHeight?: number;
+    childLineWidth?: number;
+    verticalLine?: number;
+    orientation?: 'horizontal' | 'vertical';
+    groupTitleRender?: React_2.ComponentType<OrgChartGroupTitleProps>;
+    groupSubtitleRender?: React_2.ComponentType<OrgChartGroupSubtitleProps>;
+}
+
+/**
+ * @hidden
+ */
+export declare const ServerOrgChartNode: React_2.FunctionComponent<ServerOrgChartNodeProps>;
+
+/**
+ * @hidden
+ */
+export declare interface ServerOrgChartNodeProps {
+    /**
+     * @hidden
+     */
+    children?: React_2.ReactNode;
+    /**
+     * Sets additional classes to the OrgChart.
+     */
+    className?: string;
+    /**
+     * Passes the OrgChart id to the node.
+     */
+    id?: string;
+    /**
+     * The styles that are applied to the OrgChart.
+     */
+    style?: React_2.CSSProperties;
+    level: number;
+    childLineWidth?: number;
+    title?: string;
+    subtitle?: string;
+    details?: boolean;
+    color?: string;
+    line?: boolean;
+    plus?: boolean;
+    expanded?: boolean;
+    avatar?: string;
+    avatarType?: string;
+    cardHeight?: number;
+    cardWidth?: number;
+    verticalLine?: number;
+    itemRender?: React_2.ComponentType<OrgChartItemRenderProps>;
+    onExpandChange?: (ev: OrgChartExpandChangeEvent) => void;
+    onItemAction?: (ev: OrgChartActionEvent) => void;
+    onItemKeyDown?: (ev: OrgChartActionEvent) => void;
+    node?: any;
+}
+
+/**
+ * @hidden
+ */
+export declare interface ServerOrgChartProps {
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional classes to the OrgChart.
+     */
+    className?: string;
+    /**
+     * Sets custom id to the OrgChart.
+     */
+    id?: string;
+    /**
+     * Sets custom aria-label to the OrgChart. The default value is "Org Chart"
+     */
+    ariaLabel?: string;
+    /**
+     * Specifies the name of the field which will provide a id for the item. Defaults to `id`.
+     */
+    idField?: string;
+    /**
+     * Specifies the name of the field which will provide an array representation of the item children.
+     */
+    childrenField?: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation for the expanded state of the item. Defaults to `expanded`.
+     */
+    expandField?: string;
+    /**
+     * Specifies the name of the field which will provide a title representation for the item. Defaults to `text`.
+     */
+    titleField?: string;
+    /**
+     * Specifies the name of the field which indicates to the OrgChart that an item has
+     * children even if the children are not initially passed. Used for implementing the load-on-demand feature.
+     * Defaults to `undefined`.
+     */
+    hasChildrenField?: string;
+    /**
+     * Specifies the name of the field which will provide a subtitle representation for the item. Defaults to `text`.
+     */
+    subtitleField?: string;
+    /**
+     * Specifies the avatar of the field which will provide a avatar representation for the item. Defaults to `text`.
+     */
+    avatarField?: string;
+    /**
+     * Specifies a string array with the colors applied to the items. By default the colors come from the Kendo Theme that is used.
+     */
+    cardsColors?: string[];
+    /**
+     * The styles that are applied to the OrgChart.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the data of the OrgChart.
+     */
+    data?: any[];
+    /**
+     * Specifies the field by which the OrgChart data is grouped.
+     */
+    groupField?: string;
+    /**
+     * Specifies the height of the card of the OrgChart.
+     */
+    cardHeight?: number;
+    /**
+     * Specifies the width of the card of the OrgChart.
+     */
+    cardWidth?: number;
+    /**
+     * Specifies the height of the title of the grouped OrgChart.
+     */
+    groupTitleHeight?: number;
+    /**
+     * Specifies the height of the subtitle of the grouped OrgChart.
+     */
+    groupSubtitleHeight?: number;
+    /**
+     * Defines the component that will be used for rendering each of the OrgChart items.
+     */
+    itemRender?: React.ComponentType<OrgChartItemRenderProps>;
+    /**
+     * Defines the component that will be used for rendering each of the grouped OrgChart title.
+     */
+    groupTitleRender?: React.ComponentType<OrgChartGroupTitleProps>;
+    /**
+     * Defines the component that will be used for rendering each of the grouped OrgChart subtitle.
+     */
+    groupSubtitleRender?: React.ComponentType<OrgChartGroupSubtitleProps>;
+    /**
+     * Specifies the height of the vertical line of the OrgChart.
+     */
+    verticalLine?: number;
+    /**
+     * Specifies the width the OrgChart.
+     */
+    height?: string | number;
+}
+
+export { }

package/index.js

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