@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.6

package/ui/nav/Router/Router.js

@@ -0,0 +1,267 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.treeToList = exports.walkRoutesRecursive = exports.ROUTER_ROLE_404 = exports.ROUTER_ROLE_MODAL = exports.ROUTER_ROLE_LOGIN = void 0;
+var React = __importStar(require("react"));
+var react_router_1 = require("react-router");
+var react_router_dom_1 = require("react-router-dom");
+var connected_react_router_1 = require("connected-react-router");
+var get_1 = __importDefault(require("lodash-es/get"));
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var isArray_1 = __importDefault(require("lodash-es/isArray"));
+var isObject_1 = __importDefault(require("lodash-es/isObject"));
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var modal_1 = require("../../../actions/modal");
+var modal_2 = require("../../../reducers/modal");
+var hooks_1 = require("../../../hooks");
+var hoc_1 = require("../../../hoc");
+var router_1 = require("../../../actions/router");
+var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
+var router_2 = require("../../../reducers/router");
+var SsrProvider_1 = require("../../../providers/SsrProvider");
+exports.ROUTER_ROLE_LOGIN = 'login';
+exports.ROUTER_ROLE_MODAL = 'modal';
+exports.ROUTER_ROLE_404 = '404';
+var findRedirectPathRecursive = function (route) {
+    if (!route) {
+        return null;
+    }
+    if (typeof route.redirectTo === 'boolean') {
+        var key = isObject_1["default"](route.items) && !isArray_1["default"](route.items) ? Object.keys(route.items)[0] : '0';
+        return findRedirectPathRecursive(get_1["default"](route, ['items', key]));
+    }
+    if (typeof route.redirectTo === 'string') {
+        return route.redirectTo;
+    }
+    return route.path || route.path === ''
+        ? route.path
+        : null;
+};
+var walkRoutesRecursive = function (item, defaultItem, parentItem) {
+    if (defaultItem === void 0) { defaultItem = {}; }
+    if (parentItem === void 0) { parentItem = {}; }
+    var normalizedItem = __assign(__assign(__assign({}, defaultItem), item), { id: item.id, exact: item.exact, path: item.path && (item.path.indexOf('/') !== 0 && parentItem.path ? parentItem.path + '/' : '') + item.path, label: item.label, title: item.title, isVisible: typeof item.isVisible !== 'undefined'
+            ? item.isVisible
+            : (typeof parentItem.isVisible !== 'undefined'
+                ? parentItem.isVisible
+                : defaultItem.isVisible), isNavVisible: typeof item.isNavVisible !== 'undefined'
+            ? item.isNavVisible
+            : (typeof parentItem.isNavVisible !== 'undefined'
+                ? parentItem.isNavVisible
+                : defaultItem.isNavVisible), layout: item.layout || parentItem.layout || defaultItem.layout || null, roles: item.roles || parentItem.roles || defaultItem.roles || null, component: null, componentProps: null });
+    var items = null;
+    if (isArray_1["default"](item.items)) {
+        items = item.items.map(function (i) { return exports.walkRoutesRecursive(i, defaultItem, normalizedItem); });
+    }
+    else if (isObject_1["default"](item.items)) {
+        items = Object.keys(item.items)
+            .map(function (id) { return exports.walkRoutesRecursive(__assign(__assign({}, item.items[id]), { id: id }), defaultItem, normalizedItem); });
+    }
+    return __assign(__assign({}, normalizedItem), { items: items });
+};
+exports.walkRoutesRecursive = walkRoutesRecursive;
+var treeToList = function (item, isRoot) {
+    if (isRoot === void 0) { isRoot = true; }
+    if (isArray_1["default"](item)) {
+        return item;
+    }
+    if (isRoot && !item.id) {
+        item.id = 'root';
+    }
+    var items = item.path ? [item] : [];
+    if (isArray_1["default"](item.items)) {
+        item.items.forEach(function (sub) {
+            items = items.concat(exports.treeToList(sub, false));
+        });
+    }
+    else if (isObject_1["default"](item.items)) {
+        Object.keys(item.items).forEach(function (id) {
+            items = items.concat(exports.treeToList(__assign(__assign({}, item.items[id]), { id: id }), false));
+        });
+    }
+    return items;
+};
+exports.treeToList = treeToList;
+var renderComponent = function (route, activePath, routeProps) {
+    var _a, _b;
+    var routePath = router_2.buildUrl(route.path, (_a = routeProps === null || routeProps === void 0 ? void 0 : routeProps.match) === null || _a === void 0 ? void 0 : _a.params);
+    if (route.redirectTo && routePath === activePath) {
+        var to = findRedirectPathRecursive(route);
+        if (to === null) {
+            // eslint-disable-next-line no-console
+            console.error('Not found path for redirect in route:', route);
+            return null;
+        }
+        // Check already redirected
+        var toPath = router_2.buildUrl(to, (_b = routeProps === null || routeProps === void 0 ? void 0 : routeProps.match) === null || _b === void 0 ? void 0 : _b.params);
+        if (activePath !== toPath) {
+            return (React.createElement(react_router_1.Redirect, __assign({}, routeProps, { to: toPath }, route.componentProps)));
+        }
+    }
+    if (!route.component) {
+        return null;
+    }
+    var Component = route.component;
+    if (route.fetch) {
+        Component = hoc_1.fetch(route.fetch)(Component);
+    }
+    return (React.createElement(Component, __assign({}, routeProps, route.componentProps)));
+};
+function Router(props) {
+    var components = hooks_1.useComponents();
+    var _a = hooks_1.useSelector(function (state) {
+        var _a, _b;
+        return ({
+            isInitialized: router_2.isRouterInitialized(state),
+            pathname: get_1["default"](state, 'router.location.pathname'),
+            route: router_2.getRoute(state),
+            routeParams: state.router.params,
+            activePath: (_b = (_a = state.router) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.pathname,
+            activeRouteIds: router_2.getActiveRouteIds(state)
+        });
+    }), isInitialized = _a.isInitialized, pathname = _a.pathname, route = _a.route, routeParams = _a.routeParams, activePath = _a.activePath, activeRouteIds = _a.activeRouteIds;
+    var routeId = (route === null || route === void 0 ? void 0 : route.id) || null;
+    // Init routes in redux
+    var dispatch = useDispatch_1["default"]();
+    react_use_1.useEffectOnce(function () {
+        if (props.routes) {
+            dispatch(router_1.initRoutes(exports.walkRoutesRecursive(__assign({ id: 'root' }, props.routes), props.defaultRoles ? { roles: props.defaultRoles } : undefined)));
+        }
+    });
+    // Sync route params with redux
+    var prevRouteParams = react_use_1.usePrevious(routeParams);
+    react_1.useEffect(function () {
+        if (!isEqual_1["default"](prevRouteParams, routeParams)) {
+            dispatch(router_1.initParams(routeParams));
+        }
+    }, [dispatch, prevRouteParams, routeParams]);
+    // Routes state
+    var _b = react_1.useState(exports.treeToList(props.routes)), routes = _b[0], setRoutes = _b[1];
+    react_use_1.useUpdateEffect(function () {
+        setRoutes(props.routes);
+    }, [props.routes]);
+    // Fix end slash on switch to base route
+    react_use_1.useUpdateEffect(function () {
+        if (window.history && pathname === '/' && window.location.pathname.match(/\/$/)) {
+            window.history.replaceState({}, '', components.store.history.basename);
+        }
+    }, [components.store.history.basename, pathname]);
+    // Auto scroll to top
+    react_use_1.useUpdateEffect(function () {
+        if (props.autoScrollTop && routeId) {
+            window.scrollTo(0, 0);
+        }
+    }, [props.autoScrollTop, routeId]);
+    // Check to open/close modals
+    var prevRoute = react_use_1.usePrevious(route);
+    react_use_1.useUpdateEffect(function () {
+        var _a;
+        if ((prevRoute === null || prevRoute === void 0 ? void 0 : prevRoute.id) !== (route === null || route === void 0 ? void 0 : route.id)) {
+            if (prevRoute && prevRoute.role === exports.ROUTER_ROLE_MODAL) {
+                dispatch(modal_1.closeModal(prevRoute.id));
+            }
+            if (route && route.role === exports.ROUTER_ROLE_MODAL) {
+                var Component = (_a = routes.find(function (item) { return item.id === route.id; })) === null || _a === void 0 ? void 0 : _a.component;
+                if (Component) {
+                    dispatch(modal_1.openModal(Component, __assign({ modalId: route.id }, routeParams)));
+                }
+            }
+        }
+    }, [dispatch, prevRoute, route, routeParams, routes]);
+    // Check close modal - go to parent page
+    var openedModals = hooks_1.useSelector(function (state) { return modal_2.getOpened(state); });
+    var openedModalIds = react_1.useMemo(function () { return (openedModals || []).map(function (modal) { return modal.id; }); }, [openedModals]);
+    var prevOpenedModalIds = react_use_1.usePrevious(openedModalIds);
+    react_1.useEffect(function () {
+        if (prevOpenedModalIds !== openedModalIds && route && !openedModalIds.includes(route.id)
+            && route.role === exports.ROUTER_ROLE_MODAL) {
+            var parentRouteId = activeRouteIds.find(function (activeRouteId) {
+                var activeRoute = routes.find(function (routeItem) { return routeItem.id === activeRouteId; });
+                return activeRoute && activeRoute.role !== exports.ROUTER_ROLE_MODAL;
+            });
+            if (parentRouteId) {
+                // TODO route params?..
+                dispatch(router_1.goToRoute(parentRouteId));
+            }
+        }
+    });
+    var renderItem = function (routeItem, routeProps) {
+        var children = null;
+        activeRouteIds.find(function (activeRouteId) {
+            if (activeRouteId === routeItem.id) {
+                // Stop
+                return true;
+            }
+            var activeRoute = routes.find(function (r) { return r.id === activeRouteId; });
+            children = renderComponent(activeRoute, activePath, __assign(__assign({}, routeProps), { children: children })) || children;
+            // Stop, if route is exact
+            if (activeRoute.exact) {
+                return true;
+            }
+            return false;
+        });
+        var result = renderComponent(routeItem, activePath, __assign(__assign({}, routeProps), { children: children }));
+        if (!result) {
+            // eslint-disable-next-line no-console
+            console.error('Not found component for route:', routeItem);
+        }
+        return result;
+    };
+    var renderContent = function () {
+        var WrapperComponent = props.wrapperView;
+        var routeNodes = (React.createElement(react_router_1.Switch, null,
+            routes.map(function (routeItem, index) { return (React.createElement(react_router_1.Route, __assign({ key: index, render: function (routeProps) { return renderItem(routeItem, routeProps); } }, routeItem, { component: null }))); }),
+            props.children));
+        if (WrapperComponent) {
+            return (React.createElement(WrapperComponent, __assign({}, props.wrapperProps), routeNodes));
+        }
+        return routeNodes;
+    };
+    if (!isInitialized) {
+        return null;
+    }
+    if (process.env.IS_SSR) {
+        return (React.createElement(SsrProvider_1.SsrProviderContext.Consumer, null, function (context) { return (React.createElement(react_router_1.StaticRouter, { location: components.store.history.location, context: context.staticContext }, renderContent())); }));
+    }
+    if (window.location.protocol === 'file:') {
+        return (React.createElement(react_router_dom_1.HashRouter, null, renderContent()));
+    }
+    return (React.createElement(connected_react_router_1.ConnectedRouter, { history: components.store.history }, renderContent()));
+}
+Router.defaultProps = {
+    autoScrollTop: true
+};
+exports["default"] = Router;

package/ui/nav/Router/index.d.ts

@@ -0,0 +1,2 @@
+import Router from './Router';
+export default Router;

package/ui/nav/Router/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Router_1 = __importDefault(require("./Router"));
+exports["default"] = Router_1["default"];

package/ui/nav/Tree/Tree.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { IButtonProps } from '../../form/Button/Button';
+export interface ITreeItem extends IButtonProps {
+    /**
+     * Идентификатор узла
+     */
+    id?: string | number;
+    /**
+     * Вложенные элементы
+     * [{id: 2, label: 'Nested element', items: [...]}]
+     */
+    items?: any[];
+    /**
+     * Скрыть или показать узел
+     * @example true
+     */
+    visible?: boolean;
+}
+/**
+ * Tree
+ * Компонент, который представляет в виде дерева список с иерархической структурой данных
+ */
+export interface ITreeProps {
+    /**
+     * Идентификатор (ключ) для сохранения в LocalStorage коллекции с раскрытыми узлами
+     * @example 'exampleTree'
+     */
+    id?: string;
+    /**
+     * Коллекция с узлами. Также можно передать идентификатор роута, тогда компонент найдет все
+     * вложенные роуты и отобразит их в виде дерева.
+     * @example [{id: 1, label: 'Root', items: [...]}] | 'root'
+     */
+    items?: ITreeItem[] | string;
+    /**
+     * Ограничивает максимальный уровень вложенности дерева
+     * @example 2
+     */
+    level?: number;
+    /**
+     * Ключ для доступа к вложенным элементам узла
+     * @example 'items'
+     */
+    itemsKey?: string;
+    /**
+     * Идентификатор узла, которой нужно отобразить в раскрытом виде
+     * @example 2
+     */
+    selectedItemId?: string | number;
+    /**
+     * CSS-класс для элемента отображения
+     */
+    className?: CssClassName;
+    /**
+     * Переопределение view React компонента для кастомизации отображения элемента
+     * @example MyCustomView
+     */
+    view?: any;
+    /**
+     * Максимальный уровень вложенности, до которого все узлы будут отображаться в развёрнутом виде
+     * @example 1
+     */
+    autoOpenLevels?: number;
+    /**
+     * Обработчик на клик по узлу
+     * @param args
+     */
+    onItemClick?: (...args: any[]) => any;
+    /**
+     * Отображать раскрытыми узлы из LocalStorage
+     * @example true
+     */
+    autoSave?: boolean;
+    [key: string]: any;
+}
+export interface ITreeViewProps extends ITreeProps {
+    items: (ITreeItem & {
+        uniqId: string;
+        className: CssClassName;
+        index: number;
+        level: number;
+        isOpened: boolean;
+        isSelected: boolean;
+        hasItems: boolean;
+        onClick: (e: Event | React.MouseEvent | any) => void;
+    })[];
+    levelPadding?: number;
+}
+declare function Tree(props: ITreeProps): any;
+declare namespace Tree {
+    var defaultProps: {
+        itemsKey: string;
+        autoOpenLevels: number;
+        autoSave: boolean;
+        level: number;
+    };
+}
+export default Tree;

package/ui/nav/Tree/Tree.js

@@ -0,0 +1,168 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var isString_1 = __importDefault(require("lodash-es/isString"));
+var omit_1 = __importDefault(require("lodash-es/omit"));
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var keys_1 = __importDefault(require("lodash-es/keys"));
+var react_use_1 = require("react-use");
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
+var router_1 = require("../../../reducers/router");
+var resolveId = function (item, index, parentId) { return (parentId ? parentId + '.' : '') + String(item.id || index); };
+function Tree(props) {
+    var components = hooks_1.useComponents();
+    var STORAGE_KEY_PREFIX = 'tree_';
+    //State
+    var _a = react_1.useState(null), selectedUniqId = _a[0], setSelectedUniqId = _a[1];
+    var _b = react_1.useState({}), openedItems = _b[0], setOpenedItems = _b[1];
+    //Redux connection
+    var _c = hooks_1.useSelector(function (state) { return ({
+        routes: isString_1["default"](props.items) ? router_1.getNavItems(state, props.items) : null,
+        selectedItemId: isString_1["default"](props.items) ? router_1.getRouteId(state) : props.selectedItemId,
+        activeRouteIds: router_1.getActiveRouteIds(state),
+        routerParams: router_1.getRouterParams(state)
+    }); }), routes = _c.routes, selectedItemId = _c.selectedItemId, activeRouteIds = _c.activeRouteIds, routerParams = _c.routerParams;
+    var items = react_1.useMemo(function () {
+        if (routes) {
+            var routeToItem_1 = function (route) {
+                var routeItems = (Array.isArray(route.items)
+                    ? route.items.map(function (r) { return routeToItem_1(r); })
+                    : Object.keys(route.items || {}).map(function (id) { return routeToItem_1(route.items[id]); })).filter(function (r) { return r.visible; });
+                return {
+                    id: route.id,
+                    label: route.label || route.title,
+                    visible: route.isNavVisible !== false,
+                    toRoute: routeItems.length === 0 ? route.id : null,
+                    toRouteParams: routeItems.length === 0 ? props.routerParams : null,
+                    items: routeItems,
+                    icon: route.icon
+                };
+            };
+            return routes.map(function (route) { return routeToItem_1(route); }).filter(function (r) { return r.visible; });
+        }
+        if (Array.isArray(props.items)) {
+            return props.items;
+        }
+        return [];
+    }, [props.items, props.routerParams, routes]);
+    var findChildById = function (sourceItems, itemId, parentId, level) {
+        if (parentId === void 0) { parentId = ''; }
+        if (level === void 0) { level = 1; }
+        var finedItem = null;
+        if (isString_1["default"](sourceItems)) {
+            return null;
+        }
+        (sourceItems || []).forEach(function (item, index) {
+            var uniqId = resolveId(item, index, parentId);
+            if (!finedItem && (item.id === itemId || uniqId === itemId)) {
+                finedItem = __assign(__assign({}, item), { uniqId: uniqId,
+                    level: level });
+            }
+            if (!finedItem) {
+                finedItem = findChildById(item[props.itemsKey], itemId, uniqId, level + 1);
+            }
+        });
+        return finedItem;
+    };
+    var autoOpen = function (sourceItems, parentId, level) {
+        if (parentId === void 0) { parentId = ''; }
+        if (level === void 0) { level = 1; }
+        var opened = {};
+        (sourceItems || []).forEach(function (item, index) {
+            var uniqId = resolveId(item, index, parentId);
+            if (props.autoOpenLevels >= level) {
+                opened[uniqId] = true;
+            }
+            if (selectedItemId === item.id) {
+                opened[uniqId] = true;
+            }
+            if (selectedItemId) {
+                var finedItem = findChildById(item[props.itemsKey], selectedItemId);
+                if (finedItem) {
+                    opened[uniqId] = true;
+                }
+            }
+            opened = __assign(__assign({}, opened), autoOpen(item[props.itemsKey], uniqId, level + 1));
+        });
+        return opened;
+    };
+    // Initial opened items
+    react_use_1.useEffectOnce(function () {
+        // TODO add  clientStorage
+        // const key = STORAGE_KEY_PREFIX + props.id;
+        // const opened = !this.state && this.props.clientStorage.get(key) && this.props.autoSave
+        //     ? JSON.parse(this.props.clientStorage.get(key))
+        //     : this._autoOpen(this.props._items);
+        var opened = autoOpen(items);
+        var selectedItem = findChildById(items, selectedItemId);
+        setOpenedItems(opened);
+        setSelectedUniqId(selectedItem ? selectedItemId.uniqId : null);
+    });
+    var onItemClick = react_1.useCallback(function (e, uniqId, item) {
+        var _a;
+        var _b;
+        e.preventDefault();
+        if (props.onItemClick) {
+            props.onItemClick.call(null, e, item);
+        }
+        setSelectedUniqId(selectedUniqId === uniqId ? null : uniqId);
+        if (((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            var newItems = __assign(__assign({}, openedItems), (_a = {}, _a[uniqId] = !openedItems[uniqId], _a));
+            setOpenedItems(newItems);
+            // TODO add  clientStorage
+            // const key = STORAGE_KEY_PREFIX + this.props.id;
+            // this.props.clientStorage.set(key, JSON.stringify(this.state.opened));
+        }
+    }, [openedItems, props.onItemClick, selectedUniqId]);
+    var resultItems = react_1.useMemo(function () {
+        var getItems = function (sourceItems, parentId, level) {
+            if (parentId === void 0) { parentId = ''; }
+            if (level === void 0) { level = 0; }
+            var result = [];
+            if (props.level && level === props.level) {
+                return [];
+            }
+            (sourceItems || []).forEach(function (item, index) {
+                var uniqId = resolveId(item, index, parentId);
+                var isOpened = !!openedItems[uniqId];
+                var hasItems = item[props.itemsKey] && item[props.itemsKey].length > 0;
+                if (props.level && (level === props.level - 1)) {
+                    hasItems = false;
+                }
+                result.push(__assign(__assign({}, item), { uniqId: uniqId,
+                    index: index,
+                    level: level,
+                    isOpened: isOpened, isSelected: selectedUniqId === uniqId
+                        || (activeRouteIds.includes(item.toRoute)
+                            && isEqual_1["default"](item.toRouteParams || {}, omit_1["default"](routerParams, keys_1["default"](item.toRouteParams)))), hasItems: hasItems, onClick: function (e) { return onItemClick(e, uniqId, item); } }));
+                if (isOpened) {
+                    result = result.concat(getItems(item[props.itemsKey], uniqId, level + 1)).filter(Boolean);
+                }
+            });
+            return result;
+        };
+        return getItems(items);
+    }, [activeRouteIds, items, onItemClick, openedItems, props.itemsKey, props.level, routerParams, selectedUniqId]);
+    return components.ui.renderView(props.view || 'nav.TreeView', __assign(__assign({}, props), { items: resultItems }));
+}
+Tree.defaultProps = {
+    itemsKey: 'items',
+    autoOpenLevels: 1,
+    autoSave: false,
+    level: 0
+};
+exports["default"] = Tree;

package/ui/nav/Tree/demo/auto-open-levels.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * The max opened nesting level is 3
+ * @order 3
+ * @col 8
+ */
+export default _default;

package/ui/nav/Tree/demo/auto-open-levels.js

@@ -0,0 +1,34 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Tree_1 = __importDefault(require("../Tree"));
+var basic_1 = require("./basic");
+/**
+ * The max opened nesting level is 3
+ * @order 3
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Tree_1["default"], { items: basic_1.items, autoOpenLevels: 3 }))); });

package/ui/nav/Tree/demo/basic.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export declare const items: {
+    id: number;
+    label: string;
+    items: ({
+        id: number;
+        label: string;
+        items: {
+            id: number;
+            label: string;
+            items: {
+                id: number;
+                label: string;
+                items: {
+                    id: number;
+                    label: string;
+                }[];
+            }[];
+        }[];
+    } | {
+        id: number;
+        label: string;
+        items?: undefined;
+    })[];
+}[];
+declare const _default: () => JSX.Element;
+/**
+ * Basic
+ * @order 1
+ * @col 8
+ */
+export default _default;