@steroidsjs/core 3.0.0-beta.99 → 3.0.0

package/ui/list/Grid/Grid.d.ts

@@ -18,7 +18,11 @@ export interface IGridColumn {
     attribute?: string;
     /**
      * Свойства для компонента форматирования
-     * @example {component: DateFormatter, format: 'DD MMMM'}
+     * @example
+     * {
+     *  component: DateFormatter,
+     *  format: 'DD MMMM'
+     * }
      */
     formatter?: Record<string, any>;
     /**
@@ -74,7 +78,12 @@ export interface IGridColumn {
     subtitleAttribute?: string;
     /**
      * Параметры для ссылки в колонке
-    * @example {attribute: 'name', linkProps: {target: 'blank'}, url: 'https://kozhindev.com'}
+    * @example
+     * {
+     *  attribute: 'name',
+     *  linkProps: {target: 'blank'},
+     *  url: 'https://kozhindev.com'
+     * }
     */
     link?: {
         attribute: string;
@@ -83,7 +92,11 @@ export interface IGridColumn {
     };
     /**
     * Параметры для иконки в колонке
-    * @example {attribute: 'icon', isLeft: true}
+    * @example
+     * {
+     *  attribute: 'icon',
+     *  isLeft: true
+     * }
     */
     icon?: {
         attribute: string;
@@ -91,7 +104,11 @@ export interface IGridColumn {
     };
     /**
     *  Параметры для картинки в колонке
-    * @example {attribute: 'icon', isLeft: true}
+    * @example
+     * {
+     *  attribute: 'icon',
+     *  isLeft: true
+     * }
     */
     picture?: {
         attribute: string;
@@ -122,13 +139,32 @@ export interface IGridProps extends IListConfig {
     view?: CustomView;
     /**
      * Коллекция с наименованиями и свойствами колонок в таблице
-     * @example [{label: 'Name', attribute: 'name'}, {label: 'Work', attribute: 'work'}]
+     * @example
+     * [
+     *  {
+     *   label: 'Name',
+     *   attribute: 'name'
+     *  },
+     *  {
+     *   label: 'Work',
+     *   attribute: 'work'
+     *  }
+     * ]
      */
     columns: (string | IGridColumn)[];
     /**
      * Коллекция с элементами управления. Данная коллекция отобразится в колонке рядом с каждой записью в таблице.
      * Например, кнопки для удаления и детального просмотра записи.
-     * @example [{id: 'delete'}, {id: 'view', position: 'left'}]
+     * @example
+     * [
+     *  {
+     *   id: 'delete'
+     *  },
+     *  {
+     *   id: 'view',
+     *   position: 'left'
+     *  }
+     * ]
      */
     controls?: IControlItem[] | ((item: any, primaryKey: string) => IControlItem[]);
     /**

package/ui/list/Grid/Grid.js

@@ -69,8 +69,7 @@ function Grid(props) {
         items: props.items,
         initialItems: props.initialItems,
         initialTotal: props.initialTotal,
-        autoFetchOnFormChanges: props.autoFetchOnFormChanges,
-        hasTreeItems: props.hasTreeItems
+        autoFetchOnFormChanges: props.autoFetchOnFormChanges
     }), list = _a.list, model = _a.model, searchModel = _a.searchModel, paginationPosition = _a.paginationPosition, paginationSizePosition = _a.paginationSizePosition, layoutNamesPosition = _a.layoutNamesPosition, renderList = _a.renderList, renderEmpty = _a.renderEmpty, renderPagination = _a.renderPagination, renderPaginationSize = _a.renderPaginationSize, renderLayoutNames = _a.renderLayoutNames, renderSearchForm = _a.renderSearchForm, onFetch = _a.onFetch, onSort = _a.onSort;
     var renderLabel = (0, react_1.useCallback)(function (column) {
         if (column.headerView) {

package/ui/list/LayoutNames/LayoutNames.d.ts

@@ -34,7 +34,17 @@ export interface ILayoutNamesProps {
     position?: ListControlPosition;
     /**
      * Коллекция с шаблонами
-     * @example [{id: 'list', label: 'List'}, {id: 'grid', label: 'Grid'}]
+     * @example
+     * [
+     *  {
+     *   id: 'list',
+     *   label: 'List'
+     *  },
+     *  {
+     *   id: 'grid',
+     *   label: 'Grid'
+     *  }
+     * ]
      */
     items?: INavItem[];
     /**

package/ui/list/Steps/Steps.d.ts

@@ -2,34 +2,46 @@ import React from 'react';
 /**
  * Компонент Steps предоставляет шаги для выполнения определенного процесса.
  **/
-interface IStepsProps {
-    stepItems: IStepItem[];
+export interface IStepsProps extends IUiComponent {
+    stepItems: number | IStepItem[];
     currentStep: number;
     isChangeable?: boolean;
-    className?: CssClassName;
     onChange?: (index: number) => void;
+    showDivider?: boolean;
+    stepTitleOrientation?: Orientation;
+    stepItemView?: React.ReactNode;
 }
 export interface IStepsViewProps {
     className?: CssClassName;
     children?: React.ReactNode;
 }
-export interface IStepItemViewProps {
+export interface IStepItemViewProps extends Pick<IStepsProps, 'showDivider' | 'stepTitleOrientation' | 'onChange'>, IUiComponent {
     stepItem: IStepItem;
-    className?: CssClassName;
     index: number;
     status: string;
     disabled: boolean;
-    onChange: () => void;
+    showDivider?: boolean;
 }
 export interface IStepItem {
+    id: number;
     title?: string;
     subtitle?: string;
     description?: string;
+    status?: string;
     icon?: string | React.ReactNode;
     isError?: boolean;
 }
+export declare const ERROR_STATUS = "error";
+export declare const WAIT_STATUS = "wait";
+export declare const ACTIVE_STATUS = "active";
+export declare const FINISH_STATUS = "finish";
+export declare const HORIZONTAL_STEP_LAYOUT = "horizontal";
+export declare const VERTICAL_STEP_LAYOUT = "vertical";
 declare function Steps(props: IStepsProps): JSX.Element;
 declare namespace Steps {
-    var defaultProps: {};
+    var defaultProps: {
+        showDivider: boolean;
+        stepTitleOrientation: string;
+    };
 }
 export default Steps;

package/ui/list/Steps/Steps.js

@@ -1,38 +1,58 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
+exports.VERTICAL_STEP_LAYOUT = exports.HORIZONTAL_STEP_LAYOUT = exports.FINISH_STATUS = exports.ACTIVE_STATUS = exports.WAIT_STATUS = exports.ERROR_STATUS = void 0;
 var react_1 = require("react");
+var range_1 = __importDefault(require("lodash-es/range"));
 var hooks_1 = require("../../../hooks");
+exports.ERROR_STATUS = 'error';
+exports.WAIT_STATUS = 'wait';
+exports.ACTIVE_STATUS = 'active';
+exports.FINISH_STATUS = 'finish';
+exports.HORIZONTAL_STEP_LAYOUT = 'horizontal';
+exports.VERTICAL_STEP_LAYOUT = 'vertical';
+var getStepStatus = function (index, stepItem, currentStep) {
+    if (stepItem.isError) {
+        return exports.ERROR_STATUS;
+    }
+    if (currentStep < index) {
+        return exports.WAIT_STATUS;
+    }
+    if (currentStep === index) {
+        return exports.ACTIVE_STATUS;
+    }
+    return exports.FINISH_STATUS;
+};
 function Steps(props) {
+    var components = (0, hooks_1.useComponents)();
     var _a = (0, react_1.useState)(false), isChangeable = _a[0], setIsChangeable = _a[1];
     (0, react_1.useEffect)(function () { return setIsChangeable(props.isChangeable); }, [props.isChangeable]);
-    function getStepStatus(index, stepItem) {
-        if (stepItem.isError) {
-            return 'error';
-        }
-        if (props.currentStep < index) {
-            return 'wait';
-        }
-        if (props.currentStep === index) {
-            return 'active';
+    var toStep = (0, react_1.useCallback)(function (stepItem, index) { return components.ui.renderView(props.stepItemView || 'list.StepItemView', {
+        key: stepItem.id,
+        stepItem: stepItem,
+        index: index + 1,
+        status: (stepItem === null || stepItem === void 0 ? void 0 : stepItem.status) || getStepStatus(index, stepItem, props.currentStep),
+        disabled: !isChangeable,
+        showDivider: props.showDivider,
+        stepTitleOrientation: props.stepTitleOrientation,
+        onChange: function () {
+            if (isChangeable) {
+                props.onChange(index);
+            }
         }
-        return 'finish';
-    }
-    return (0, hooks_1.useComponents)().ui.renderView('list.StepsView', {
+    }); }, [components.ui, isChangeable, props]);
+    return components.ui.renderView(props.view || 'list.StepsView', {
         className: props.className,
-        children: props.stepItems.map(
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        function (stepItem, index) { return (0, hooks_1.useComponents)().ui.renderView('list.StepItemView', {
-            stepItem: stepItem,
-            index: index + 1,
-            status: getStepStatus(index, stepItem),
-            disabled: !isChangeable,
-            onChange: function () {
-                if (isChangeable) {
-                    props.onChange(index);
-                }
-            }
-        }); })
+        children: (Array.isArray(props.stepItems)
+            ? props.stepItems
+            : (0, range_1["default"])(props.stepItems || 0))
+            .map(toStep)
     });
 }
-Steps.defaultProps = {};
 exports["default"] = Steps;
+Steps.defaultProps = {
+    showDivider: true,
+    stepTitleOrientation: 'vertical'
+};

package/ui/list/TreeTable/TreeTable.d.ts

@@ -1,39 +1,40 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { ITreeProps } from '@steroidsjs/core/ui/nav/Tree/Tree';
+import { IPreparedTreeItem, ITreeItem } from '../../../hooks/useTree';
 import { IColumnViewProps, IGridColumn, IGridProps } from '../Grid/Grid';
-export interface ITreeColumnViewProps extends IColumnViewProps {
-    item: {
-        onTreeItemClick?: (uniqueId: string, item: {
-            [key: string]: any;
-        }) => void;
-        [key: string]: any;
-    };
-}
-export interface ITreeTableItem {
-    /**
-     * Идентификатор узла
-     */
-    id?: string | number;
-    /**
-     * Вложенные элементы
-     * @example items: [{id: 3, name: 'Ivan'}]
-     */
-    items?: any[];
-    /**
-     * Уникальный идентификатор,
-     * используется для сохранения состояния открыта или закрыта ячейка
-     */
-    uniqueId?: string;
-}
-export interface ITreeTableProps extends Omit<IGridProps, 'items'> {
-    /**
-     * Элементы коллекции
-     * @example [{id: 1, name: 'Jane'}, {id: 2, name: 'John', items: [...]}]
-     */
-    items?: ITreeTableItem[];
+export interface ITreeColumnViewProps extends IColumnViewProps, Pick<ITreeTableProps, 'levelPadding' | 'customIcon'> {
+    item: IPreparedTreeItem;
 }
-export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[]) => IGridColumn[];
 /**
  * TreeTable
+ *
  * Компонент для представления данных коллекции в виде иерархической структуры.
  */
-export default function TreeTable(props: ITreeTableProps): JSX.Element;
+export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreeProps, 'alwaysOpened' | 'levelPadding' | 'customIcon'> {
+    /**
+     * Элементы коллекции
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   name: 'Jane'
+     *  },
+     *  {
+     *   id: 2,
+     *   name: 'John',
+     *   items: [...]
+     *  }
+     * ]
+     */
+    items?: ITreeItem[];
+    customIcon?: string | React.ReactElement;
+}
+export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[], levelPadding: string | number, customIcon?: string | React.ReactElement) => IGridColumn[];
+declare function TreeTable(props: ITreeTableProps): JSX.Element;
+declare namespace TreeTable {
+    var defaultProps: {
+        levelPadding: number;
+        alwaysOpened: boolean;
+    };
+}
+export default TreeTable;

package/ui/list/TreeTable/TreeTable.js

@@ -50,24 +50,35 @@ exports.addTreeColumnFieldsToFirstColumn = void 0;
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var merge_1 = __importDefault(require("lodash-es/merge"));
+var list_1 = require("@steroidsjs/core/reducers/list");
+var useTree_1 = __importDefault(require("../../../hooks/useTree"));
 var Grid_1 = __importDefault(require("../Grid"));
+var useSelector_1 = __importDefault(require("../../../hooks/useSelector"));
 var TREE_COLUMN_VIEW_FIELDS = {
     valueView: 'TreeColumnView',
     headerClassName: 'TreeColumnHeader'
 };
-var addTreeColumnFieldsToFirstColumn = function (columns) {
+var addTreeColumnFieldsToFirstColumn = function (columns, levelPadding, customIcon) {
     var newColumns = __spreadArray([], columns, true);
     // Add tree view to the first column
-    (0, merge_1["default"])(newColumns[0], TREE_COLUMN_VIEW_FIELDS);
+    (0, merge_1["default"])(newColumns[0], __assign(__assign({}, TREE_COLUMN_VIEW_FIELDS), { levelPadding: levelPadding, customIcon: customIcon }));
     return newColumns;
 };
 exports.addTreeColumnFieldsToFirstColumn = addTreeColumnFieldsToFirstColumn;
-/**
- * TreeTable
- * Компонент для представления данных коллекции в виде иерархической структуры.
- */
 function TreeTable(props) {
-    var columns = (0, react_1.useMemo)(function () { return (0, exports.addTreeColumnFieldsToFirstColumn)(props.columns); }, [props.columns]);
-    return (React.createElement(Grid_1["default"], __assign({}, props, { columns: columns, items: props.items, itemsIndexing: false, hasTreeItems: true })));
+    var columns = (0, react_1.useMemo)(function () { return (0, exports.addTreeColumnFieldsToFirstColumn)(props.columns, props.levelPadding, props.customIcon); }, [props.columns, props.customIcon, props.levelPadding]);
+    var list = (0, useSelector_1["default"])(function (state) { return (0, list_1.getList)(state, props.listId); });
+    var treeItems = (0, useTree_1["default"])({
+        items: props.items,
+        autoOpenLevels: 0,
+        alwaysOpened: props.alwaysOpened,
+        currentPage: list === null || list === void 0 ? void 0 : list.page,
+        itemsOnPage: list === null || list === void 0 ? void 0 : list.pageSize
+    }).treeItems;
+    return (React.createElement(Grid_1["default"], __assign({}, props, { columns: columns, items: treeItems, itemsIndexing: false })));
 }
 exports["default"] = TreeTable;
+TreeTable.defaultProps = {
+    levelPadding: 32,
+    alwaysOpened: false
+};

package/ui/modal/Modal/Modal.d.ts

@@ -21,7 +21,13 @@ export interface IModalProps {
     componentProps?: any;
     /**
      * Коллекция кнопок, которая отобразится в нижней секции Modal
-     * @example [{label: __(('Закрыть')), onClick: () => props.onClose()}]
+     * @example
+     * [
+     *  {
+     *   label: __(('Закрыть')),
+     *   onClick: () => props.onClose()
+     *  }
+     * ]
      */
     buttons?: IButtonProps[];
     /**

package/ui/nav/Breadcrumbs/Breadcrumbs.d.ts

@@ -13,7 +13,17 @@ export interface IBreadcrumbsProps {
     className?: CssClassName;
     /**
      * Коллекция элементов навигационной цепочки
-     * @example [{id: 'root', title: 'Home'}, {id: 'catalog', title: 'Catalog'}]
+     * @example
+     * [
+     *  {
+     *   id: 'root',
+     *   title: 'Home'
+     *  },
+     *  {
+     *   id: 'catalog',
+     *   title: 'Catalog'
+     *  }
+     * ]
      */
     items?: IRouteItem[];
     /**

package/ui/nav/ButtonGroup/ButtonGroup.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { Dispatch, SetStateAction } from 'react';
 import { IButtonProps } from '../../form/Button/Button';
 import { DataProviderItems } from '../../../hooks/useDataProvider';
 /**
@@ -9,14 +9,19 @@ import { DataProviderItems } from '../../../hooks/useDataProvider';
 export interface IButtonGroupProps extends IUiComponent {
     /**
      * Элементы для группы кнопок
-     * @example ['button1', 'button2', 'button3']
+     * @example
+     * [
+     *  'button1',
+     *  'button2',
+     *  'button3'
+     * ]
      */
     items: DataProviderItems;
     /**
      * Функция, которая будет вызываться при клике по кнопке
      * @example setActiveTab
      */
-    onClick: (value: number | string | boolean) => void;
+    onClick: ((value: number | string | boolean) => void) | Dispatch<SetStateAction<string | number | boolean>>;
     /**
      * При указании в связке с onClick предоставляет возможность реализовать two-way binding
      * @example 'button1'
@@ -28,7 +33,11 @@ export interface IButtonGroupProps extends IUiComponent {
     defaultActiveButton?: number | string;
     /**
      * Общие свойства для всех кнопок группы
-     * @example {outline: true, color: 'secondary'}
+     * @example
+     * {
+     *  outline: true,
+     *  color: 'secondary'
+     * }
      */
     buttonProps?: IButtonProps;
 }

package/ui/nav/Controls/Controls.d.ts

@@ -27,7 +27,13 @@ export interface IControlItem extends IButtonProps {
 export interface IControlsProps {
     /**
      * Коллекция контролов
-     * @example [{id: 'delete', onClick: () => alert("It's deleted")}]
+     * @example
+     * [
+     *  {
+     *   id: 'delete',
+     *   onClick: () => alert("It's deleted")
+     *  }
+     * ]
      */
     items?: IControlItem[];
     /**

package/ui/nav/Link/Link.d.ts

@@ -3,7 +3,7 @@ import { IButtonProps, IButtonViewProps } from '../../form/Button/Button';
 /**
  * Link
  *
- * Ссылка
+ * С помощью компонента `Link` вы можете легко настраивать цветовую схему элементов ссылок.
  */
 export interface ILinkProps extends IButtonProps {
     [key: string]: any;

package/ui/nav/Nav/Nav.d.ts

@@ -35,13 +35,16 @@ export interface INavItem extends IButtonProps {
      */
     visible?: boolean;
     /**
-     * Контент, который отобразиться, если элемент навигации будет активен
+     * Контент, который отобразится, если элемент навигации будет активен
      * @example ContentComponent
      */
     content?: any;
     /**
      * Свойства для компонента с контентом
-     * @example {content: 'Some text'}
+     * @example
+     * {
+     *  content: 'Some text'
+     * }
      */
     contentProps?: any;
     /**
@@ -56,7 +59,9 @@ export interface INavItem extends IButtonProps {
 }
 /**
  * Nav
- * Компонент навигации
+ *
+ * Компонент навигации позволяет переключаться между группами связанного контента.
+ *
  */
 export interface INavProps {
     /**
@@ -67,7 +72,17 @@ export interface INavProps {
     /**
      * Коллекция с элементами навигации. Также можно передать идентификатор роута, тогда компонент найдет все
      * вложенные роуты и отобразит их в навигации.
-     * @example [{id: 1, label: 'One'}, {id: 2, label: 'Two'}] | 'root'
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   label: 'One'
+     *  },
+     *  {
+     *   id: 2,
+     *   label: 'Two'
+     *  }
+     * ] | 'root'
      */
     items?: string | INavItem[];
     /**

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

@@ -31,12 +31,18 @@ export interface IRouteItem {
      * Путь до роута
      * @example '/catalog'
      */
-    path?: string;
+    path: string;
     /**
      * Если true, то путь должен точно соответствовать location.pathname
      * @example '/catalog'
      */
     exact?: boolean;
+    /**
+     * Если true, то location.pathname будет совпадать с теми путями, которые содержат слеш в конце.
+     * Например, если указать путь '/catalog/', тогда совпадение будет с '/catalog/' и '/catalog/chapter', но не '/catalog'.
+     * @example '/catalog'
+     */
+    strict?: boolean;
     /**
      * В свойстве можно передать как путь, на который осуществится редирект, так и булево значение.
      * Если свойство равно true - то редирект произойдет на первый из вложенных роутов.
@@ -102,7 +108,11 @@ export interface IRouteItem {
      * @return {Array} Например, [{url: '/api/v1/some-data'}, {listId: 'someList', action: '/api/v1/some-list'}]
      */
     preloadData?: (match: Record<string, any>) => (IFetchConfig | IListProps)[];
-    [key: string]: any;
+    /**
+     * Пользовательская иконка svg или название иконки
+     * @example 'circle'
+     */
+    icon?: React.ReactElement | string;
 }
 export interface IRouterProps {
     /**
@@ -118,7 +128,7 @@ export interface IRouterProps {
      * Дерево роутов
      * @example {id: 'root', path: '/', component: IndexPage, items: [...]}
      */
-    routes?: IRouteItem[] | {
+    routes: IRouteItem[] | {
         [key: string]: IRouteItem;
     };
     /**
@@ -137,11 +147,17 @@ export interface IRouterProps {
      * @example SomeComponent
      */
     children?: React.ReactNode;
+    /**
+     * Флаг, который позволяет использовать вложенные роуты c указанием вложенного пути
+     * @example true
+     */
+    alwaysAppendParentRoutePath?: boolean;
 }
 declare function Router(props: IRouterProps): JSX.Element;
 declare namespace Router {
     var defaultProps: {
         autoScrollTop: boolean;
+        alwaysAppendParentRoutePath: boolean;
     };
 }
 export default Router;

package/ui/nav/Router/Router.js

@@ -80,9 +80,10 @@ var renderComponent = function (route, activePath, routeProps) {
     return (React.createElement(Component, __assign({}, routeProps, route.componentProps)));
 };
 function Router(props) {
+    var _a;
     var components = (0, hooks_1.useComponents)();
     var routeParams = (0, hooks_1.useSelector)(router_2.getRouteParams);
-    var _a = (0, hooks_1.useSelector)(function (state) {
+    var _b = (0, hooks_1.useSelector)(function (state) {
         var _a, _b;
         return ({
             isInitialized: (0, router_2.isRouterInitialized)(state),
@@ -91,24 +92,24 @@ function Router(props) {
             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, activePath = _a.activePath, activeRouteIds = _a.activeRouteIds;
+    }), isInitialized = _b.isInitialized, pathname = _b.pathname, route = _b.route, activePath = _b.activePath, activeRouteIds = _b.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, helpers_1.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, {}, props.alwaysAppendParentRoutePath)));
         }
     });
     // Sync route params with redux
-    var prevRouteParams = (0, react_use_1.usePreviousDistinct)(routeParams);
+    var prevRouteParams = (_a = (0, react_use_1.usePreviousDistinct)(routeParams)) !== null && _a !== void 0 ? _a : 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, helpers_1.treeToList)(props.routes)), routes = _b[0], setRoutes = _b[1];
+    var _c = (0, react_1.useState)((0, helpers_1.treeToList)(props.routes, true, null, props.alwaysAppendParentRoutePath)), routes = _c[0], setRoutes = _c[1];
     (0, react_use_1.useUpdateEffect)(function () {
         setRoutes(props.routes);
     }, [props.routes]);
@@ -175,6 +176,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);
         }
@@ -202,6 +206,7 @@ function Router(props) {
     return (React.createElement(connected_react_router_1.ConnectedRouter, { history: components.store.history }, renderContent()));
 }
 Router.defaultProps = {
-    autoScrollTop: true
+    autoScrollTop: true,
+    alwaysAppendParentRoutePath: true
 };
 exports["default"] = Router;

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

@@ -1,4 +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>;
+export declare const walkRoutesRecursive: (item: IRouteItem | Record<string, any>, defaultItem?: any, parentItem?: any, alwaysAppendParentRoutePath?: boolean) => any;
+export declare const treeToList: (item: IRouteItem | Record<string, any>, isRoot?: boolean, parentItem?: any, alwaysAppendParentRoutePath?: boolean) => Record<string, any>;