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

package/dist/npm/client/ClientOrgChart.js

@@ -0,0 +1,291 @@
+"use strict";
+'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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClientOrgChart = exports.OrgChartEventsContextContext = void 0;
+var React = require("react");
+var PropTypes = require("prop-types");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var theme_service_1 = require("../theming/theme-service");
+var consts_1 = require("../utils/consts");
+exports.OrgChartEventsContextContext = React.createContext({
+    cardColors: undefined,
+    onExpandChange: undefined,
+    onKeyDown: undefined,
+    onItemAction: undefined,
+    onItemContextMenu: undefined,
+    onItemDoubleClick: undefined,
+    onGroupAction: undefined,
+    onGroupBlur: undefined,
+    onGroupFocus: undefined
+});
+/**
+ * @hidden
+ */
+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 kendo_react_common_1.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;
+            (0, theme_service_1.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 kendo_react_common_1.Navigation({
+            tabIndex: 0,
+            root: e.containerRef,
+            selectors: ['.k-orgchart-card'],
+            focusOptions: {}
+        });
+    };
+    return (React.createElement("div", { style: style, ref: orgChartRef, className: (0, kendo_react_common_1.classNames)(className, consts_1.ORGCHART_CLASSNAME) },
+        React.createElement(exports.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)));
+};
+exports.ClientOrgChart = ClientOrgChart;
+exports.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
+};
+exports.ClientOrgChart.displayName = 'KendoClientOrgChart';

package/dist/npm/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/npm/client/ExpandButton.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandButton = void 0;
+var React = require("react");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+var ClientOrgChart_1 = require("./ClientOrgChart");
+/**
+ * @hidden
+ */
+var ExpandButton = function (props) {
+    var expanded = props.expanded, node = props.node, nodes = props.nodes;
+    var context = React.useContext(ClientOrgChart_1.OrgChartEventsContextContext);
+    var onClick = function (event) {
+        if (context.onExpandChange) {
+            context.onExpandChange.call(undefined, {
+                event: event,
+                expand: !expanded,
+                item: node,
+                items: nodes
+            });
+        }
+    };
+    return (React.createElement(kendo_react_buttons_1.Button, { className: "k-orgchart-button", icon: expanded ? 'minus' : 'plus', tabIndex: -1, svgIcon: expanded ? kendo_svg_icons_1.minusIcon : kendo_svg_icons_1.plusIcon, "aria-label": expanded ? 'collapse' : 'expand', onClick: onClick }));
+};
+exports.ExpandButton = ExpandButton;

package/dist/npm/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/npm/client/OrgChartCard.js

@@ -0,0 +1,72 @@
+"use strict";
+'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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrgChartCard = void 0;
+var React = require("react");
+var kendo_react_layout_1 = require("@progress/kendo-react-layout");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var ClientOrgChart_1 = require("./ClientOrgChart");
+/**
+ * @hidden
+ */
+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(ClientOrgChart_1.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(kendo_react_layout_1.Card, __assign({ role: "treeitem", className: (0, kendo_react_common_1.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));
+};
+exports.OrgChartCard = OrgChartCard;

package/dist/npm/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>;

package/dist/npm/client/OrgChartCardBody.js

@@ -0,0 +1,17 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrgChartCardBody = void 0;
+var React = require("react");
+var ClientOrgChart_1 = require("./ClientOrgChart");
+var kendo_react_layout_1 = require("@progress/kendo-react-layout");
+/**
+ * @hidden
+ */
+var OrgChartCardBody = function (props) {
+    var level = props.level, children = props.children;
+    var context = React.useContext(ClientOrgChart_1.OrgChartEventsContextContext);
+    var cardColor = context.cardColors ? context.cardColors[level] || 'green' : 'green';
+    return (React.createElement(kendo_react_layout_1.CardBody, { className: "k-hstack", style: { borderTopColor: cardColor } }, children));
+};
+exports.OrgChartCardBody = OrgChartCardBody;

package/dist/npm/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/npm/client/OrgChartGroupContainer.js

@@ -0,0 +1,75 @@
+"use strict";
+'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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrgChartGroupContainer = void 0;
+var React = require("react");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var ClientOrgChart_1 = require("./ClientOrgChart");
+/**
+ * @hidden
+ */
+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(ClientOrgChart_1.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: (0, kendo_react_common_1.classNames)('k-orgchart-node-group-container', 'k-vstack', { 'k-focus': selected }), style: style, onKeyDown: handleKeyDown, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur }, others), children));
+};
+exports.OrgChartGroupContainer = OrgChartGroupContainer;

package/dist/npm/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/npm/interfaces/ChildGroup.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/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/npm/interfaces/OrgChartActionEvent.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/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/npm/interfaces/OrgChartExpandChangeEvent.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });