@progress/kendo-react-orgchart 5.20.0-dev.202310061256

package/dist/es/client/OrgChartCardBody.js

@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+import { OrgChartEventsContextContext } from './ClientOrgChart';
+import { CardBody } from '@progress/kendo-react-layout';
+/**
+ * @hidden
+ */
+export var OrgChartCardBody = function (props) {
+    var level = props.level, children = props.children;
+    var context = React.useContext(OrgChartEventsContextContext);
+    var cardColor = context.cardColors ? context.cardColors[level] || 'green' : 'green';
+    return (React.createElement(CardBody, { className: "k-hstack", style: { borderTopColor: cardColor } }, children));
+};

package/dist/es/client/OrgChartGroupContainer.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface OrgChartGroupContainerProps {
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * The styles that are applied to the OrgChart.
+     */
+    style?: React.CSSProperties;
+    nodes?: any[];
+}
+/**
+ * @hidden
+ */
+export declare const OrgChartGroupContainer: React.FunctionComponent<OrgChartGroupContainerProps>;

package/dist/es/client/OrgChartGroupContainer.js

@@ -0,0 +1,71 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { classNames } from '@progress/kendo-react-common';
+import { OrgChartEventsContextContext } from './ClientOrgChart';
+/**
+ * @hidden
+ */
+export var OrgChartGroupContainer = function (props) {
+    var nodes = props.nodes, children = props.children, style = props.style, others = __rest(props, ["nodes", "children", "style"]);
+    var _a = React.useState(false), selected = _a[0], setSelected = _a[1];
+    var context = React.useContext(OrgChartEventsContextContext);
+    var containerRef = React.useRef(null);
+    var handleKeyDown = function (event) {
+        if (context.onKeyDown) {
+            context.onKeyDown({
+                event: event,
+                items: nodes
+            });
+        }
+    };
+    var handleClick = function (event) {
+        if (context.onGroupAction) {
+            context.onGroupAction({
+                event: event,
+                items: nodes
+            });
+        }
+    };
+    var handleFocus = function (event) {
+        setSelected(true);
+        if (context.onGroupFocus) {
+            context.onGroupFocus({
+                event: event,
+                items: nodes,
+                containerRef: containerRef
+            });
+        }
+    };
+    var handleBlur = function (event) {
+        setSelected(false);
+        if (context.onGroupBlur) {
+            context.onGroupBlur({
+                event: event,
+                items: nodes
+            });
+        }
+    };
+    return (React.createElement("div", __assign({ role: "treeitem", "aria-selected": selected, ref: containerRef, className: classNames('k-orgchart-node-group-container', 'k-vstack', { 'k-focus': selected }), style: style, onKeyDown: handleKeyDown, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur }, others), children));
+};

package/dist/es/interfaces/ChildGroup.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @hidden
+ */
+export interface ChildGroup {
+    items: any[];
+    groupedItems: any[];
+    level: number;
+    ids: number[];
+    parentId: number;
+    hasChildren: boolean;
+    orientation: 'horizontal' | 'vertical';
+    width: number | null;
+    childLineWidths?: number[];
+    left?: number;
+    top?: number;
+}

package/dist/es/interfaces/ChildGroup.js

@@ -0,0 +1 @@
+export {};

package/dist/es/interfaces/OrgChartActionEvent.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+/**
+ * Represents the OrgChartActionEvent event argument.
+ */
+export 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>;
+}

package/dist/es/interfaces/OrgChartActionEvent.js

@@ -0,0 +1 @@
+export {};

package/dist/es/interfaces/OrgChartExpandChangeEvent.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+/**
+ * Represents the OrgChartExpandChangeEvent event argument.
+ */
+export 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[];
+}

package/dist/es/interfaces/OrgChartExpandChangeEvent.js

@@ -0,0 +1 @@
+export {};

package/dist/es/interfaces/SeverOrgChartProps.d.ts

@@ -0,0 +1,106 @@
+/// <reference types="react" />
+import { OrgChartGroupSubtitleProps, OrgChartGroupTitleProps } from '../server/ServerOrgChartGroup';
+import { OrgChartItemRenderProps } from '../server/ServerOrgChartNode';
+/**
+ * @hidden
+ */
+export 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;
+}

package/dist/es/interfaces/SeverOrgChartProps.js

@@ -0,0 +1 @@
+export {};

package/dist/es/main.d.ts

@@ -0,0 +1,6 @@
+export { ServerOrgChart } from './server/ServerOrgChart';
+export { ServerOrgChartProps } from './interfaces/SeverOrgChartProps';
+export * from './OrgChart';
+export { OrgChartExpandChangeEvent } from './interfaces/OrgChartExpandChangeEvent';
+export { OrgChartActionEvent } from './interfaces/OrgChartActionEvent';
+export * from './processOrgChartItems';

package/dist/es/main.js

@@ -0,0 +1,3 @@
+export { ServerOrgChart } from './server/ServerOrgChart';
+export * from './OrgChart';
+export * from './processOrgChartItems';

package/dist/es/package-metadata.d.ts

@@ -0,0 +1,5 @@
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package/dist/es/package-metadata.js

@@ -0,0 +1,11 @@
+/**
+ * @hidden
+ */
+export var packageMetadata = {
+    name: '@progress/kendo-react-orgchart',
+    productName: 'KendoReact',
+    productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
+    publishDate: 1696596140,
+    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'
+};

package/dist/es/processOrgChartItems.d.ts

@@ -0,0 +1,51 @@
+import { OrgChartOperationDescriptors } from './OrgChartOperationDescriptors';
+/**
+ * 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[];

package/dist/es/processOrgChartItems.js

@@ -0,0 +1,163 @@
+/* eslint-disable max-len */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { updateItem, resolveItemsIds, getNestedValue, isArray } from '@progress/kendo-react-common';
+import { EXPAND_FIELD, SELECT_FIELD, CHECK_FIELD, CHECK_INDETERMINATE_FIELD, CHILDREN_FIELD } from './utils/consts';
+/**
+ * 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 function processOrgChartItems(data, operations) {
+    if (!data || !data.length) {
+        return [];
+    }
+    var result = data;
+    var cloneField = operations.cloneField || 'cloned';
+    var expandField = operations.expandField || EXPAND_FIELD;
+    var selectField = operations.selectField || SELECT_FIELD;
+    var checkField = operations.checkField || CHECK_FIELD;
+    var childrenField = operations.childrenField || CHILDREN_FIELD;
+    result = handleOperation(result, expandField, operations.expand, cloneField, childrenField);
+    result = handleOperation(result, selectField, operations.select, cloneField, childrenField);
+    result = handleOperation(result, checkField, operations.check, cloneField, childrenField);
+    applyCheckIndeterminate(result, childrenField, operations.check);
+    return result;
+}
+function handleOperation(items, defaultField, operation, cloneField, childrenField) {
+    if (operation) {
+        var _a = parseOperation(operation, defaultField), ids = _a.ids, field = _a.field;
+        var indices = !isArray(operation) && operation.idField ? resolveItemsIds(ids, operation.idField, items, childrenField) : ids;
+        return raiseFlags(items, indices, field, cloneField, childrenField);
+    }
+    else {
+        return items;
+    }
+}
+function parseOperation(operation, defaultField) {
+    var ids;
+    var field;
+    if (isArray(operation)) {
+        ids = operation;
+        field = defaultField;
+    }
+    else {
+        ids = operation.ids || [];
+        field = operation.operationField || defaultField;
+    }
+    return { ids: ids, field: field };
+}
+function raiseFlags(items, indices, field, cloneField, childrenField) {
+    var result = items;
+    indices.forEach(function (itemIndex) {
+        result = updateItem(result, itemIndex, function (item) { return raiseNestedFlag(field, item); }, cloneField, childrenField);
+    });
+    return result;
+}
+function raiseNestedFlag(fieldName, dataItem) {
+    var fields = (fieldName || '').split('.');
+    var item = dataItem;
+    for (var index = 0; index < fields.length; index++) {
+        var field = fields[index];
+        if (index === fields.length - 1) {
+            item[field] = true;
+        }
+        else if (item[field] !== undefined) {
+            item[field] = __assign({}, item[field]);
+            item = item[field];
+        }
+        else {
+            return;
+        }
+    }
+}
+function applyCheckIndeterminate(items, childrenField, check) {
+    if (check && !isArray(check) && check.applyCheckIndeterminate) {
+        var checkField = parseOperation(check, CHECK_FIELD).field;
+        var checkIndeterminateField = check.checkIndeterminateField || CHECK_INDETERMINATE_FIELD;
+        for (var i = 0; i < items.length; i++) {
+            var item = items[i];
+            var subItems = item[childrenField];
+            if (subItems) {
+                applyCheckIndeterminateHelper(subItems, getNestedValue(checkField, item) ? [] : [item], childrenField, checkField, checkIndeterminateField);
+            }
+        }
+    }
+}
+function applyCheckIndeterminateHelper(data, parents, childrenField, checkField, checkIndeterminateField) {
+    // The updates will be direct because the corresponding items
+    // are already cloned because of their checked children.
+    var parentsAlreadyUpdated = false;
+    for (var i = 0; i < data.length; i++) {
+        var item = data[i];
+        if (getNestedValue(checkField, item)) {
+            if (!parentsAlreadyUpdated) {
+                for (var j = 0; j < parents.length; j++) {
+                    raiseNestedFlag(checkIndeterminateField, parents[j]);
+                }
+            }
+            parentsAlreadyUpdated = true;
+            if (item[childrenField]) {
+                applyCheckIndeterminateHelper(item[childrenField], [], childrenField, checkField, checkIndeterminateField);
+            }
+        }
+        else {
+            if (item[childrenField]) {
+                applyCheckIndeterminateHelper(item[childrenField], parentsAlreadyUpdated ? [item] : parents.concat([item]), childrenField, checkField, checkIndeterminateField);
+            }
+        }
+    }
+}

package/dist/es/server/ServerGroupedOrgChart.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ServerOrgChartProps } from '../interfaces/SeverOrgChartProps';
+/**
+ * @hidden
+ */
+export declare const ServerGroupedOrgChart: {
+    (props: ServerOrgChartProps): JSX.Element;
+    displayName: string;
+};