@progress/kendo-react-orgchart 6.1.1 → 7.0.0-develop.10

package/dist/es/client/ClientOrgChart.js

@@ -1,287 +0,0 @@
-'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

@@ -1,13 +0,0 @@
-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

@@ -1,23 +0,0 @@
-'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.js

@@ -1,68 +0,0 @@
-'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

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

package/dist/es/client/OrgChartCardBody.js

@@ -1,13 +0,0 @@
-'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

@@ -1,19 +0,0 @@
-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

@@ -1,71 +0,0 @@
-'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

@@ -1,16 +0,0 @@
-/**
- * @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

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

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

@@ -1,22 +0,0 @@
-/// <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

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

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

@@ -1,22 +0,0 @@
-/// <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

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