@steroidsjs/core 3.0.0-beta.11 → 3.0.0-beta.111

package/ui/nav/Nav/Nav.js

@@ -43,6 +43,7 @@ var has_1 = __importDefault(require("lodash-es/has"));
 var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var isObject_1 = __importDefault(require("lodash-es/isObject"));
 var react_1 = require("react");
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 var hooks_1 = require("../../../hooks");
 var router_1 = require("../../../reducers/router");
 var defaultViewMap = {
@@ -85,21 +86,35 @@ function Nav(props) {
             props.onChange.call(null, newActiveTab);
         }
     }, [props.onChange]);
-    var items = (0, react_1.useMemo)(function () { return (Array.isArray(props.items)
-        ? props.items.map(function (item, index) { return (__assign(__assign({}, item), { isActive: activeTab === ((0, has_1["default"])(item, 'id') ? item.id : index) })); })
-            .filter(function (item) { return item.visible !== false; })
-        : (routes || []).map(function (route) { return ({
-            id: route.id,
-            label: route.label,
-            toRoute: route.id,
-            toRouteParams: routerParams,
-            visible: route.isNavVisible,
-            isActive: (activeRouteIds || []).includes(route.id)
-        }); })
-            .filter(function (item) { return item.visible !== false; })); }, [activeRouteIds, activeTab, props.items, routerParams, routes]);
+    var formatItems = React.useCallback(function (items) {
+        if (items === void 0) { items = props.items; }
+        if (Array.isArray(items)) {
+            return items.map(function (item, index) {
+                var _a;
+                return (__assign(__assign({}, item), { isActive: activeTab === ((0, has_1["default"])(item, 'id') ? item.id : index), isActiveNested: !(0, isEmpty_1["default"])((_a = item.items) === null || _a === void 0 ? void 0 : _a.filter(function (nestedItem) { return nestedItem.id === activeTab; })) || false, items: item.items ? formatItems(item.items) : null }));
+            })
+                .filter(function (item) { return item.visible !== false; });
+        }
+        return (routes || []).map(function (route) {
+            var _a;
+            return ({
+                id: route.id,
+                label: route.label,
+                toRoute: route.id,
+                toRouteParams: routerParams,
+                visible: route.isNavVisible,
+                isActive: (activeRouteIds || []).includes(route.id),
+                isActiveNested: ((_a = route.items) === null || _a === void 0 ? void 0 : _a.filter(function (nestedItem) { return activeRouteIds.includes(nestedItem.id); })),
+                items: route.items ? formatItems(route.items) : null
+            });
+        })
+            .filter(function (item) { return item.visible !== false; });
+    }, [activeRouteIds, activeTab, props.items, routerParams, routes]);
+    var items = (0, react_1.useMemo)(function () { return formatItems(); }, [formatItems]);
     return components.ui.renderView(props.view || defaultViewMap[props.layout], __assign(__assign({}, props), { items: items, onClick: onClick, disabled: props.disabled, children: renderContent() }));
 }
 Nav.defaultProps = {
-    layout: 'button'
+    layout: 'button',
+    size: 'md'
 };
 exports["default"] = Nav;

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { IFetchConfig } from '../../../hooks/useFetch';
 import { IListProps } from '../../list/List/List';
-import { IFetchHocConfigFunc } from '../../../hoc/fetch';
 export declare const ROUTER_ROLE_LOGIN = "login";
 export declare const ROUTER_ROLE_MODAL = "modal";
 export declare const ROUTER_ROLE_404 = "404";
@@ -86,13 +85,6 @@ export interface IRouteItem {
      * @example ['user', 'admin']
      */
     roles?: Array<string | null>;
-    /**
-     * Обработчик, который возвращает конфигурацию для осуществления HTTP-запроса. Запрос происходит каждый раз
-     * перед рендерингом страницы, чтобы получить для неё все необходимые данные
-     * @param {*} props
-     * @return {Object} Например, {url: '/api/v1/some-data', key: 'someData'}
-     */
-    fetch?: IFetchHocConfigFunc;
     /**
      * Вложенные роуты
      */
@@ -146,8 +138,6 @@ export interface IRouterProps {
      */
     children?: React.ReactNode;
 }
-export declare const walkRoutesRecursive: (item: any, defaultItem?: any, parentItem?: any) => any;
-export declare const treeToList: (item: any, isRoot?: boolean) => any;
 declare function Router(props: IRouterProps): JSX.Element;
 declare namespace Router {
     var defaultProps: {

package/ui/nav/Router/Router.js

@@ -37,93 +37,31 @@ 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;
+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");
+var helpers_1 = require("./helpers");
 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 = (0, isObject_1["default"])(route.items) && !(0, isArray_1["default"])(route.items) ? Object.keys(route.items)[0] : '0';
-        return findRedirectPathRecursive((0, 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 ((0, isArray_1["default"])(item.items)) {
-        items = item.items.map(function (i) { return (0, exports.walkRoutesRecursive)(i, defaultItem, normalizedItem); });
-    }
-    else if ((0, isObject_1["default"])(item.items)) {
-        items = Object.keys(item.items)
-            .map(function (id) { return (0, 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 ((0, isArray_1["default"])(item)) {
-        return item;
-    }
-    if (isRoot && !item.id) {
-        item.id = 'root';
-    }
-    var items = item.path ? [item] : [];
-    if ((0, isArray_1["default"])(item.items)) {
-        item.items.forEach(function (sub) {
-            items = items.concat((0, exports.treeToList)(sub, false));
-        });
-    }
-    else if ((0, isObject_1["default"])(item.items)) {
-        Object.keys(item.items).forEach(function (id) {
-            items = items.concat((0, 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 = (0, 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);
+        var to = (0, helpers_1.findRedirectPathRecursive)(route);
         if (to === null) {
             // eslint-disable-next-line no-console
             console.error('Not found path for redirect in route:', route);
@@ -139,41 +77,38 @@ var renderComponent = function (route, activePath, routeProps) {
         return null;
     }
     var Component = route.component;
-    if (route.fetch) {
-        Component = (0, hoc_1.fetch)(route.fetch)(Component);
-    }
     return (React.createElement(Component, __assign({}, routeProps, route.componentProps)));
 };
 function Router(props) {
     var components = (0, hooks_1.useComponents)();
+    var routeParams = (0, hooks_1.useSelector)(router_2.getRouteParams);
     var _a = (0, hooks_1.useSelector)(function (state) {
         var _a, _b;
         return ({
             isInitialized: (0, router_2.isRouterInitialized)(state),
             pathname: (0, get_1["default"])(state, 'router.location.pathname'),
             route: (0, 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: (0, router_2.getActiveRouteIds)(state)
         });
-    }), isInitialized = _a.isInitialized, pathname = _a.pathname, route = _a.route, routeParams = _a.routeParams, activePath = _a.activePath, activeRouteIds = _a.activeRouteIds;
+    }), isInitialized = _a.isInitialized, pathname = _a.pathname, route = _a.route, activePath = _a.activePath, activeRouteIds = _a.activeRouteIds;
     var routeId = (route === null || route === void 0 ? void 0 : route.id) || null;
     // Init routes in redux
     var dispatch = (0, useDispatch_1["default"])();
     (0, react_use_1.useEffectOnce)(function () {
         if (props.routes) {
-            dispatch((0, router_1.initRoutes)((0, exports.walkRoutesRecursive)(__assign({ id: 'root' }, props.routes), props.defaultRoles ? { roles: props.defaultRoles } : undefined)));
+            dispatch((0, router_1.initRoutes)((0, helpers_1.walkRoutesRecursive)(__assign({ id: 'root' }, props.routes), props.defaultRoles ? { roles: props.defaultRoles } : undefined)));
         }
     });
     // Sync route params with redux
-    var prevRouteParams = (0, react_use_1.usePrevious)(routeParams);
+    var prevRouteParams = (0, react_use_1.usePreviousDistinct)(routeParams);
     (0, react_1.useEffect)(function () {
         if (!(0, isEqual_1["default"])(prevRouteParams, routeParams)) {
             dispatch((0, router_1.initParams)(routeParams));
         }
     }, [dispatch, prevRouteParams, routeParams]);
     // Routes state
-    var _b = (0, react_1.useState)((0, exports.treeToList)(props.routes)), routes = _b[0], setRoutes = _b[1];
+    var _b = (0, react_1.useState)((0, helpers_1.treeToList)(props.routes)), routes = _b[0], setRoutes = _b[1];
     (0, react_use_1.useUpdateEffect)(function () {
         setRoutes(props.routes);
     }, [props.routes]);
@@ -210,15 +145,16 @@ function Router(props) {
     var openedModalIds = (0, react_1.useMemo)(function () { return (openedModals || []).map(function (modal) { return modal.id; }); }, [openedModals]);
     var prevOpenedModalIds = (0, react_use_1.usePrevious)(openedModalIds);
     (0, react_1.useEffect)(function () {
-        if (prevOpenedModalIds !== openedModalIds && route && !openedModalIds.includes(route.id)
-            && route.role === exports.ROUTER_ROLE_MODAL) {
+        if (prevOpenedModalIds !== openedModalIds
+            && route
+            && !openedModalIds.includes(route.id)
+            && (prevRoute === null || prevRoute === void 0 ? void 0 : prevRoute.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((0, router_1.goToRoute)(parentRouteId));
+                dispatch((0, router_1.goToRoute)(parentRouteId, prevRouteParams));
             }
         }
     });
@@ -239,6 +175,9 @@ function Router(props) {
         });
         var result = renderComponent(routeItem, activePath, __assign(__assign({}, routeProps), { children: children }));
         if (!result) {
+            if (children) {
+                return children;
+            }
             // eslint-disable-next-line no-console
             console.error('Not found component for route:', routeItem);
         }

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

@@ -0,0 +1,4 @@
+import { IRouteItem } from './Router';
+export declare const findRedirectPathRecursive: (route: IRouteItem) => any;
+export declare const walkRoutesRecursive: (item: IRouteItem | Record<string, any>, defaultItem?: any, parentItem?: any) => any;
+export declare const treeToList: (item: IRouteItem | Record<string, any>, isRoot?: boolean) => Record<string, any>;

package/ui/nav/Router/helpers.js

@@ -0,0 +1,81 @@
+"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;
+exports.treeToList = exports.walkRoutesRecursive = exports.findRedirectPathRecursive = void 0;
+var get_1 = __importDefault(require("lodash-es/get"));
+var isArray_1 = __importDefault(require("lodash-es/isArray"));
+var isObject_1 = __importDefault(require("lodash-es/isObject"));
+var findRedirectPathRecursive = function (route) {
+    if (!route) {
+        return null;
+    }
+    if (typeof route.redirectTo === 'boolean') {
+        var key = (0, isObject_1["default"])(route.items) && !(0, isArray_1["default"])(route.items) ? Object.keys(route.items)[0] : '0';
+        return (0, exports.findRedirectPathRecursive)((0, get_1["default"])(route, ['items', key]));
+    }
+    if (typeof route.redirectTo === 'string') {
+        return route.redirectTo;
+    }
+    return route.path || route.path === ''
+        ? route.path
+        : null;
+};
+exports.findRedirectPathRecursive = findRedirectPathRecursive;
+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 ((0, isArray_1["default"])(item.items)) {
+        items = item.items.map(function (subItem) { return (0, exports.walkRoutesRecursive)(subItem, defaultItem, normalizedItem); });
+    }
+    else if ((0, isObject_1["default"])(item.items)) {
+        items = Object.keys(item.items)
+            .map(function (id) { return (0, 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 ((0, isArray_1["default"])(item)) {
+        return item;
+    }
+    if (isRoot && !item.id) {
+        item.id = 'root';
+    }
+    var items = item.path ? [item] : [];
+    if ((0, isArray_1["default"])(item.items)) {
+        item.items.forEach(function (subItem) {
+            items = items.concat((0, exports.treeToList)(subItem, false));
+        });
+    }
+    else if ((0, isObject_1["default"])(item.items)) {
+        Object.keys(item.items).forEach(function (id) {
+            items = items.concat((0, exports.treeToList)(__assign(__assign({}, item.items[id]), { id: id }), false));
+        });
+    }
+    return items;
+};
+exports.treeToList = treeToList;

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

@@ -1,52 +1,22 @@
 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;
+import { IPreparedTreeItem, ITreeConfig } from '../../../hooks/useTree';
+export interface ITreeViewProps extends ITreeProps {
+    items: IPreparedTreeItem[];
+}
+export interface ITreeItemViewProps extends ITreeProps {
+    item: IPreparedTreeItem;
+    children?: JSX.Element;
 }
 /**
  * Tree
  * Компонент, который представляет в виде дерева список с иерархической структурой данных
  */
-export interface ITreeProps {
+export interface ITreeProps extends Omit<ITreeConfig, 'currentPage' | 'itemsOnPage'> {
     /**
      * Идентификатор (ключ) для сохранения в 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-класс для элемента отображения
      */
@@ -55,12 +25,7 @@ export interface ITreeProps {
      * Переопределение view React компонента для кастомизации отображения элемента
      * @example MyCustomView
      */
-    view?: any;
-    /**
-     * Максимальный уровень вложенности, до которого все узлы будут отображаться в развёрнутом виде
-     * @example 1
-     */
-    autoOpenLevels?: number;
+    view?: CustomView;
     /**
      * Обработчик на клик по узлу
      * @param args
@@ -71,28 +36,27 @@ export interface ITreeProps {
      * @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;
-    })[];
+    /**
+     * Расстояние вложенных элементов от родителя для каждого уровня
+     * @example 32
+     */
     levelPadding?: number;
+    /**
+     * Флаг, определяющий раскрывать вложенные элементы по клику на весь элемент или только на иконку
+     * @example false
+     */
+    hasIconExpandOnly?: boolean;
+    [key: string]: any;
 }
-declare function Tree(props: ITreeProps): any;
+declare function Tree(props: ITreeProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 declare namespace Tree {
     var defaultProps: {
         itemsKey: string;
         autoOpenLevels: number;
         autoSave: boolean;
         level: number;
+        levelPadding: number;
+        hasIconExpandOnly: boolean;
     };
 }
 export default Tree;

package/ui/nav/Tree/Tree.js

@@ -10,155 +10,28 @@ var __assign = (this && this.__assign) || function () {
     };
     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 = (0, hooks_1.useComponents)();
-    var STORAGE_KEY_PREFIX = 'tree_';
-    //State
-    var _a = (0, react_1.useState)(null), selectedUniqId = _a[0], setSelectedUniqId = _a[1];
-    var _b = (0, react_1.useState)({}), openedItems = _b[0], setOpenedItems = _b[1];
-    //Redux connection
-    var _c = (0, hooks_1.useSelector)(function (state) { return ({
-        routes: (0, isString_1["default"])(props.items) ? (0, router_1.getNavItems)(state, props.items) : null,
-        selectedItemId: (0, isString_1["default"])(props.items) ? (0, router_1.getRouteId)(state) : props.selectedItemId,
-        activeRouteIds: (0, router_1.getActiveRouteIds)(state),
-        routerParams: (0, router_1.getRouterParams)(state)
-    }); }), routes = _c.routes, selectedItemId = _c.selectedItemId, activeRouteIds = _c.activeRouteIds, routerParams = _c.routerParams;
-    var items = (0, 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 ((0, 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
-    (0, 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 = (0, 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 = (0, 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)
-                            && (0, isEqual_1["default"])(item.toRouteParams || {}, (0, omit_1["default"])(routerParams, (0, 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 }));
+    var treeItems = (0, hooks_1.useTree)({
+        items: props.items,
+        selectedItemId: props.selectedItemId,
+        routerParams: props.routerParams,
+        itemsKey: props.itemsKey,
+        autoOpenLevels: props.autoOpenLevels,
+        onExpand: props.onItemClick,
+        level: props.level,
+        alwaysOpened: props.alwaysOpened
+    }).treeItems;
+    return components.ui.renderView(props.view || 'nav.TreeView', __assign(__assign({}, props), { items: treeItems }));
 }
+exports["default"] = Tree;
 Tree.defaultProps = {
     itemsKey: 'items',
     autoOpenLevels: 1,
     autoSave: false,
-    level: 0
+    level: 0,
+    levelPadding: 32,
+    hasIconExpandOnly: false
 };
-exports["default"] = Tree;

package/ui/nav/index.d.ts

@@ -2,4 +2,5 @@ import Nav from './Nav';
 import Router from './Router';
 import Link from './Link';
 import Breadcrumbs from './Breadcrumbs';
-export { Nav, Router, Link, Breadcrumbs };
+import ButtonGroup from './ButtonGroup';
+export { Nav, Router, Link, Breadcrumbs, ButtonGroup };

package/ui/nav/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.Breadcrumbs = exports.Link = exports.Router = exports.Nav = void 0;
+exports.ButtonGroup = exports.Breadcrumbs = exports.Link = exports.Router = exports.Nav = void 0;
 var Nav_1 = __importDefault(require("./Nav"));
 exports.Nav = Nav_1["default"];
 var Router_1 = __importDefault(require("./Router"));
@@ -12,3 +12,5 @@ var Link_1 = __importDefault(require("./Link"));
 exports.Link = Link_1["default"];
 var Breadcrumbs_1 = __importDefault(require("./Breadcrumbs"));
 exports.Breadcrumbs = Breadcrumbs_1["default"];
+var ButtonGroup_1 = __importDefault(require("./ButtonGroup"));
+exports.ButtonGroup = ButtonGroup_1["default"];