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

package/dist/es/OrgChart.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { OrgChartProps } from './client/ClientOrgChart';
+/**
+ * Represents the OrgChart component.
+ */
+export declare const OrgChart: React.FunctionComponent<OrgChartProps>;

package/dist/es/OrgChart.js

@@ -0,0 +1,67 @@
+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 * as PropTypes from 'prop-types';
+import { packageMetadata } from './package-metadata';
+import { ServerOrgChart } from './server/ServerOrgChart';
+import { guid, validatePackage } from '@progress/kendo-react-common';
+import { ServerGroupedOrgChart } from './server/ServerGroupedOrgChart';
+import { ClientOrgChart } from './client/ClientOrgChart';
+/**
+ * Represents the OrgChart component.
+ */
+export var OrgChart = function (props) {
+    var combinedProps = __assign({ tabIndex: 0, navigatable: true, expandField: 'expanded', ariaLabel: 'Org Chart', idField: 'id', childrenField: 'items', avatarField: 'avatar', titleField: 'title', subTitleField: 'subtitle' }, props);
+    var cardsColors = combinedProps.cardsColors, onExpandChange = combinedProps.onExpandChange, onKeyDown = combinedProps.onKeyDown, onItemAction = combinedProps.onItemAction, onGroupAction = combinedProps.onGroupAction, onGroupBlur = combinedProps.onGroupBlur, onGroupFocus = combinedProps.onGroupFocus, id = combinedProps.id, other = __rest(combinedProps, ["cardsColors", "onExpandChange", "onKeyDown", "onItemAction", "onGroupAction", "onGroupBlur", "onGroupFocus", "id"]);
+    var generateId = React.useRef(guid());
+    validatePackage(packageMetadata);
+    return (React.createElement(ClientOrgChart, __assign({}, combinedProps), props.groupField
+        ? React.createElement(ServerGroupedOrgChart, __assign({ id: id || generateId.current }, other), props.children)
+        : React.createElement(ServerOrgChart, __assign({ id: id || generateId.current }, other), props.children)));
+};
+OrgChart.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    id: PropTypes.string,
+    ariaLabel: PropTypes.string,
+    idField: PropTypes.string,
+    childrenField: PropTypes.string,
+    expandField: PropTypes.string,
+    titleField: PropTypes.string,
+    hasChildrenField: PropTypes.string,
+    subTitleField: PropTypes.string,
+    avatarField: PropTypes.string,
+    cardsColors: PropTypes.array,
+    data: PropTypes.array,
+    groupField: PropTypes.string,
+    cardHeight: PropTypes.number,
+    cardWidth: PropTypes.number,
+    groupTitleHeight: PropTypes.number,
+    groupSubtitleHeight: PropTypes.number,
+    verticalLine: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    onExpandChange: PropTypes.func,
+    onItemAction: PropTypes.func,
+    onGroupAction: PropTypes.func
+};
+OrgChart.displayName = 'KendoOrgChart';

package/dist/es/OrgChartOperationDescriptors.d.ts

@@ -0,0 +1,76 @@
+/**
+ * The descriptors of the data operations which are applied to the OrgChart component.
+ */
+export 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;
+}
+/**
+ * The descriptor which is used for expanding, selecting, and checking.
+ */
+export 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`—Indicates that an item is expanded.
+     * * `selected`—Indicates that an item is selected.
+     * * `checked`—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 descriptor which is used for checking.
+ */
+export 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;
+}

package/dist/es/OrgChartOperationDescriptors.js

@@ -0,0 +1,2 @@
+/* eslint-disable max-len */
+export {};

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

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { ServerOrgChartProps } from '../interfaces/SeverOrgChartProps';
+import { OrgChartActionEvent } from '../interfaces/OrgChartActionEvent';
+import { OrgChartExpandChangeEvent } from '../main';
+/**
+ * Represents the props of the [KendoReact OrgChart component]({% slug overview_orgchart %}).
+ */
+export 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;
+}
+declare type OrgChartEventsContextType = {
+    cardColors?: string[];
+    onExpandChange?: (ev: OrgChartExpandChangeEvent) => void;
+    onKeyDown?: (ev: OrgChartActionEvent) => void;
+    onItemAction?: (ev: OrgChartActionEvent) => void;
+    onItemContextMenu?: (ev: OrgChartActionEvent) => void;
+    onItemDoubleClick?: (ev: OrgChartActionEvent) => void;
+    onGroupAction?: (ev: OrgChartActionEvent) => void;
+    onGroupBlur?: (ev: OrgChartActionEvent) => void;
+    onGroupFocus?: (ev: OrgChartActionEvent) => void;
+};
+export declare const OrgChartEventsContextContext: React.Context<OrgChartEventsContextType>;
+/**
+ * @hidden
+ */
+export declare const ClientOrgChart: {
+    (props: OrgChartProps): JSX.Element;
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        id: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
+        idField: PropTypes.Requireable<string>;
+        childrenField: PropTypes.Requireable<string>;
+        expandField: PropTypes.Requireable<string>;
+        titleField: PropTypes.Requireable<string>;
+        hasChildrenField: PropTypes.Requireable<string>;
+        subTitleField: PropTypes.Requireable<string>;
+        avatarField: PropTypes.Requireable<string>;
+        cardsColors: PropTypes.Requireable<any[]>;
+        data: PropTypes.Requireable<any[]>;
+        groupField: PropTypes.Requireable<string>;
+        cardHeight: PropTypes.Requireable<number>;
+        cardWidth: PropTypes.Requireable<number>;
+        groupTitleHeight: PropTypes.Requireable<number>;
+        groupSubtitleHeight: PropTypes.Requireable<number>;
+        verticalLine: PropTypes.Requireable<number>;
+        height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        onExpandChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemAction: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemDoubleClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemContextMenu: PropTypes.Requireable<(...args: any[]) => any>;
+        onGroupAction: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    displayName: string;
+};
+export {};

package/dist/es/client/ClientOrgChart.js

@@ -0,0 +1,287 @@
+'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 * as PropTypes from 'prop-types';
+import { Navigation, classNames } from '@progress/kendo-react-common';
+import { loadTheme } from '../theming/theme-service';
+import { ORGCHART_CLASSNAME } from '../utils/consts';
+export var OrgChartEventsContextContext = React.createContext({
+    cardColors: undefined,
+    onExpandChange: undefined,
+    onKeyDown: undefined,
+    onItemAction: undefined,
+    onItemContextMenu: undefined,
+    onItemDoubleClick: undefined,
+    onGroupAction: undefined,
+    onGroupBlur: undefined,
+    onGroupFocus: undefined
+});
+/**
+ * @hidden
+ */
+export var ClientOrgChart = function (props) {
+    var combinedProps = __assign({ tabIndex: 0, navigatable: true, expandField: 'expanded', ariaLabel: 'Org Chart', idField: 'id', childrenField: 'items', avatarField: 'avatar', titleField: 'title', subTitleField: 'subtitle' }, props);
+    var navigatable = combinedProps.navigatable, id = combinedProps.id, tabIndex = combinedProps.tabIndex, className = combinedProps.className, style = combinedProps.style, data = combinedProps.data, groupField = combinedProps.groupField, cardWidth = combinedProps.cardWidth, cardHeight = combinedProps.cardHeight, groupTitleHeight = combinedProps.groupTitleHeight, groupSubtitleHeight = combinedProps.groupSubtitleHeight, verticalLine = combinedProps.verticalLine, idField = combinedProps.idField, childrenField = combinedProps.childrenField, expandField = combinedProps.expandField, hasChildrenField = combinedProps.hasChildrenField, avatarField = combinedProps.avatarField, titleField = combinedProps.titleField, subTitleField = combinedProps.subTitleField, onExpandChange = combinedProps.onExpandChange, onItemAction = combinedProps.onItemAction, onItemDoubleClick = combinedProps.onItemDoubleClick, onItemContextMenu = combinedProps.onItemContextMenu, onKeyDown = combinedProps.onKeyDown, onGroupAction = combinedProps.onGroupAction, onGroupBlur = combinedProps.onGroupBlur, onGroupFocus = combinedProps.onGroupFocus, cardsColors = combinedProps.cardsColors, ariaLabel = combinedProps.ariaLabel, itemRender = combinedProps.itemRender, groupTitleRender = combinedProps.groupTitleRender, groupSubtitleRender = combinedProps.groupSubtitleRender, height = combinedProps.height, children = combinedProps.children, other = __rest(combinedProps, ["navigatable", "id", "tabIndex", "className", "style", "data", "groupField", "cardWidth", "cardHeight", "groupTitleHeight", "groupSubtitleHeight", "verticalLine", "idField", "childrenField", "expandField", "hasChildrenField", "avatarField", "titleField", "subTitleField", "onExpandChange", "onItemAction", "onItemDoubleClick", "onItemContextMenu", "onKeyDown", "onGroupAction", "onGroupBlur", "onGroupFocus", "cardsColors", "ariaLabel", "itemRender", "groupTitleRender", "groupSubtitleRender", "height", "children"]);
+    var orgChartRef = React.useRef(null);
+    var navigation = React.useRef(new Navigation({
+        tabIndex: tabIndex,
+        root: orgChartRef,
+        selectors: [combinedProps.groupField ? '.k-orgchart-node-group-container' : '.k-orgchart-card'],
+        focusOptions: {}
+    }));
+    var _a = React.useState([]), cardColorsFromTheme = _a[0], setCardColorsFromTheme = _a[1];
+    var innerNavigation = React.useRef(null);
+    var onRight = function (target, nav, ev) {
+        ev.preventDefault();
+        nav.focusNext(target);
+    };
+    var onLeft = function (target, nav, ev) {
+        ev.preventDefault();
+        nav.focusPrevious(target);
+    };
+    var onUp = function (target, nav, ev, options) {
+        var _a;
+        ev.preventDefault();
+        var expanded = combinedProps.groupField
+            ? options.items.some(function (i) { return i[combinedProps.expandField]; })
+            : options.item[combinedProps.expandField];
+        if (expanded && combinedProps.onExpandChange) {
+            combinedProps.onExpandChange.call(undefined, options);
+        }
+        else {
+            var parentSelector = '.k-orgchart-group';
+            var current = (_a = target.closest(parentSelector)) === null || _a === void 0 ? void 0 : _a.getAttribute('id');
+            var next = document.querySelector("[aria-owns=\"".concat(current, "\"]"));
+            if (next) {
+                nav.focusElement(next, target);
+            }
+            else {
+                nav.focusPrevious(target);
+            }
+        }
+    };
+    var onDown = function (target, nav, ev, options) {
+        var _a;
+        ev.preventDefault();
+        var expanded = combinedProps.groupField
+            ? options.items.some(function (i) { return i[combinedProps.expandField]; })
+            : options.item[combinedProps.expandField];
+        var subItems = combinedProps.groupField
+            ? options.items.find(function (i) { return i[combinedProps.childrenField]; })
+            : options.item[combinedProps.childrenField];
+        var hasChildren = combinedProps.groupField
+            ? options.items.some(function (i) { return combinedProps.hasChildrenField && i[combinedProps.hasChildrenField]; })
+            : combinedProps.hasChildrenField && options.item[combinedProps.hasChildrenField];
+        var hasSubItems = combinedProps.groupField
+            ? subItems && subItems[combinedProps.childrenField] && subItems[combinedProps.childrenField].length
+            : subItems && subItems.length;
+        if ((hasChildren || hasSubItems) && !expanded && combinedProps.onExpandChange) {
+            combinedProps.onExpandChange.call(undefined, options);
+        }
+        else {
+            var selector = combinedProps.groupField ? '.k-orgchart-node-group-container' : '.k-orgchart-card';
+            var current = target.getAttribute('aria-owns');
+            var next = (_a = document.getElementById(current)) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
+            if (next) {
+                nav.focusElement(next, target);
+            }
+            else {
+                nav.focusNext(target);
+            }
+        }
+    };
+    var onHome = function (_target, nav, ev) {
+        ev.preventDefault();
+        nav.focusElement(nav.first, null);
+    };
+    var onEnd = function (_target, nav, ev) {
+        ev.preventDefault();
+        nav.focusElement(nav.last, null);
+    };
+    var onEnter = function (target, _nav, ev, options) {
+        ev.stopPropagation();
+        var isGroupFocused = target.className.indexOf('k-orgchart-node-group-container') !== -1;
+        if (props.groupField && isGroupFocused) {
+            if (innerNavigation.current && innerNavigation.current.first) {
+                innerNavigation.current.focusElement(innerNavigation.current.first, null);
+            }
+            return;
+        }
+        if (combinedProps.onItemAction) {
+            combinedProps.onItemAction({
+                event: ev,
+                item: options.item
+            });
+        }
+    };
+    var onEscape = function (target) {
+        if (props.groupField) {
+            var parentGroup = target.closest('.k-orgchart-node-group-container');
+            if (parentGroup) {
+                navigation.current.focusElement(parentGroup, null);
+            }
+        }
+    };
+    React.useEffect(function () {
+        if (navigatable) {
+            if (navigation.current.first) {
+                navigation.current.first.setAttribute('tabindex', String(tabIndex));
+            }
+        }
+        if (!cardsColors) {
+            var doc = orgChartRef.current.ownerDocument || document;
+            loadTheme(function (groupsColors) {
+                setCardColorsFromTheme(groupsColors);
+            }, doc);
+        }
+    }, [navigatable, tabIndex]);
+    var handleKeyDown = function (e) {
+        if (combinedProps.navigatable) {
+            // defaulted to this one but oddly didn't work in some cases
+            // navigation.current.triggerKeyboardEvent(e.event, e);
+            var event_1 = e.event;
+            var key = event_1.key === ' ' ? 'Space' : event_1.key;
+            var currentNavigation = props.groupField
+                ? event_1.target.className.indexOf('k-orgchart-card') !== -1
+                    ? innerNavigation.current || navigation.current
+                    : navigation.current
+                : navigation.current;
+            var target = event_1.target.closest(currentNavigation.selectors.join(','));
+            switch (key) {
+                case 'ArrowUp':
+                    onUp(target, currentNavigation, event_1, e);
+                    break;
+                case 'ArrowDown':
+                    onDown(target, currentNavigation, event_1, e);
+                    break;
+                case 'ArrowLeft':
+                    onLeft(target, currentNavigation, event_1);
+                    break;
+                case 'ArrowRight':
+                    onRight(target, currentNavigation, event_1);
+                    break;
+                case 'End':
+                    onEnd(target, currentNavigation, event_1);
+                    break;
+                case 'Home':
+                    onHome(target, currentNavigation, event_1);
+                    break;
+                case 'Enter':
+                    onEnter(target, currentNavigation, event_1, e);
+                    break;
+                case 'Escape':
+                    onEscape(target);
+                    break;
+                default:
+                    break;
+            }
+        }
+    };
+    var handleItemAction = function (e) {
+        e.event.stopPropagation();
+        if (onItemAction) {
+            onItemAction.call(undefined, e);
+        }
+        if (combinedProps.navigatable) {
+            var closestOrgChartCard = e.event.target.closest('.k-orgchart-card');
+            if (closestOrgChartCard) {
+                navigation.current.focusElement(closestOrgChartCard, null);
+            }
+        }
+    };
+    var handleContextMenu = function (e) {
+        e.event.stopPropagation();
+        if (onItemAction) {
+            onItemAction.call(undefined, e);
+        }
+    };
+    var handleDoubleClick = function (e) {
+        e.event.stopPropagation();
+        if (onItemAction) {
+            onItemAction.call(undefined, e);
+        }
+    };
+    var handleGroupAction = function (e) {
+        if (onGroupAction) {
+            onGroupAction.call(undefined, e);
+        }
+        if (combinedProps.navigatable) {
+            var closestOrgChartCard = e.event.target.closest('.k-orgchart-node-group-container');
+            if (closestOrgChartCard) {
+                navigation.current.focusElement(closestOrgChartCard, null);
+            }
+        }
+    };
+    var handleGroupBlur = function (_e) {
+        innerNavigation.current = null;
+    };
+    var handleGroupFocus = function (e) {
+        innerNavigation.current = new Navigation({
+            tabIndex: 0,
+            root: e.containerRef,
+            selectors: ['.k-orgchart-card'],
+            focusOptions: {}
+        });
+    };
+    return (React.createElement("div", { style: style, ref: orgChartRef, className: classNames(className, ORGCHART_CLASSNAME) },
+        React.createElement(OrgChartEventsContextContext.Provider, __assign({ value: {
+                cardColors: cardsColors || cardColorsFromTheme,
+                onExpandChange: props.onExpandChange,
+                onKeyDown: handleKeyDown,
+                onItemAction: handleItemAction,
+                onItemDoubleClick: handleDoubleClick,
+                onItemContextMenu: handleContextMenu,
+                onGroupAction: handleGroupAction,
+                onGroupBlur: handleGroupBlur,
+                onGroupFocus: handleGroupFocus
+            } }, other), props.children)));
+};
+ClientOrgChart.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    id: PropTypes.string,
+    ariaLabel: PropTypes.string,
+    idField: PropTypes.string,
+    childrenField: PropTypes.string,
+    expandField: PropTypes.string,
+    titleField: PropTypes.string,
+    hasChildrenField: PropTypes.string,
+    subTitleField: PropTypes.string,
+    avatarField: PropTypes.string,
+    cardsColors: PropTypes.array,
+    data: PropTypes.array,
+    groupField: PropTypes.string,
+    cardHeight: PropTypes.number,
+    cardWidth: PropTypes.number,
+    groupTitleHeight: PropTypes.number,
+    groupSubtitleHeight: PropTypes.number,
+    verticalLine: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    onExpandChange: PropTypes.func,
+    onItemAction: PropTypes.func,
+    onItemDoubleClick: PropTypes.func,
+    onItemContextMenu: PropTypes.func,
+    onGroupAction: PropTypes.func
+};
+ClientOrgChart.displayName = 'KendoClientOrgChart';

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface ExpandButtonProps {
+    node?: any;
+    nodes?: any[];
+    expanded?: boolean;
+}
+/**
+ * @hidden
+ */
+export declare const ExpandButton: React.FunctionComponent<ExpandButtonProps>;

package/dist/es/client/ExpandButton.js

@@ -0,0 +1,23 @@
+'use client';
+import * as React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
+import { minusIcon, plusIcon } from '@progress/kendo-svg-icons';
+import { OrgChartEventsContextContext } from './ClientOrgChart';
+/**
+ * @hidden
+ */
+export var ExpandButton = function (props) {
+    var expanded = props.expanded, node = props.node, nodes = props.nodes;
+    var context = React.useContext(OrgChartEventsContextContext);
+    var onClick = function (event) {
+        if (context.onExpandChange) {
+            context.onExpandChange.call(undefined, {
+                event: event,
+                expand: !expanded,
+                item: node,
+                items: nodes
+            });
+        }
+    };
+    return (React.createElement(Button, { className: "k-orgchart-button", icon: expanded ? 'minus' : 'plus', tabIndex: -1, svgIcon: expanded ? minusIcon : plusIcon, "aria-label": expanded ? 'collapse' : 'expand', onClick: onClick }));
+};

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

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

package/dist/es/client/OrgChartCard.js

@@ -0,0 +1,68 @@
+'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 { Card } from '@progress/kendo-react-layout';
+import { classNames } from '@progress/kendo-react-common';
+import { OrgChartEventsContextContext } from './ClientOrgChart';
+/**
+ * @hidden
+ */
+export var OrgChartCard = function (props) {
+    var node = props.node, children = props.children, style = props.style, others = __rest(props, ["node", "children", "style"]);
+    var _a = React.useState(false), selected = _a[0], setSelected = _a[1];
+    var context = React.useContext(OrgChartEventsContextContext);
+    var handleKeyDown = function (event) {
+        if (context.onKeyDown) {
+            context.onKeyDown.call(undefined, {
+                event: event,
+                item: node
+            });
+        }
+    };
+    var handleClick = function (event) {
+        if (context.onItemAction) {
+            context.onItemAction.call(undefined, {
+                event: event,
+                item: node
+            });
+        }
+    };
+    var handleContextMenu = function (event) {
+        if (context.onItemContextMenu) {
+            context.onItemContextMenu.call(undefined, {
+                event: event,
+                item: node
+            });
+        }
+    };
+    var handleDoubleClick = function (event) {
+        if (context.onItemDoubleClick) {
+            context.onItemDoubleClick.call(undefined, {
+                event: event,
+                item: node
+            });
+        }
+    };
+    return (React.createElement(Card, __assign({ role: "treeitem", className: classNames('k-orgchart-card', { 'k-focus': selected }), onClick: handleClick, onKeyDown: handleKeyDown, onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, style: style, "aria-selected": selected, "aria-keyshortcuts": "Enter", onFocus: function () { return setSelected(true); }, onBlur: function () { return setSelected(false); } }, others), children));
+};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export interface OrgChartCardBodyProps {
+    level: number;
+    children?: React.ReactNode;
+}
+/**
+ * @hidden
+ */
+export declare const OrgChartCardBody: React.FunctionComponent<OrgChartCardBodyProps>;