@steroidsjs/core 3.0.1 → 3.0.3

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ILinkProps } from '../../nav/Link/Link';
 import { IListConfig, ListControlPosition } from '../../../hooks/useList';
 import { IControlItem } from '../../nav/Controls/Controls';

package/ui/list/Grid/Grid.js

@@ -37,10 +37,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var React = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
 var upperFirst_1 = __importDefault(require("lodash-es/upperFirst"));
 var isString_1 = __importDefault(require("lodash-es/isString"));
-var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var useList_1 = __importDefault(require("../../../hooks/useList"));
 var ControlsColumn_1 = __importDefault(require("../ControlsColumn"));
@@ -74,7 +73,7 @@ function Grid(props) {
     var renderLabel = (0, react_1.useCallback)(function (column) {
         if (column.headerView) {
             var HeaderView = column.headerView;
-            return (React.createElement(HeaderView, __assign({}, column, column.headerProps, { listId: props.listId })));
+            return (react_1["default"].createElement(HeaderView, __assign({}, column, column.headerProps, { listId: props.listId })));
         }
         if (column.label || column.label === '') {
             return column.label;
@@ -90,13 +89,13 @@ function Grid(props) {
         if (column.valueView) {
             var isValueViewString = typeof column.valueView === 'string';
             var ValueView = isValueViewString ? components.ui.getView("list.".concat(column.valueView)) : column.valueView;
-            var viewProps = __assign(__assign(__assign({}, column), column.valueProps), { listId: props.listId, primaryKey: props.primaryKey, item: item, size: props.size });
+            var viewProps_1 = __assign(__assign(__assign({}, column), column.valueProps), { listId: props.listId, primaryKey: props.primaryKey, item: item, size: props.size });
             if (isValueViewString) {
-                return components.ui.renderView(ValueView, viewProps);
+                return components.ui.renderView(ValueView, viewProps_1);
             }
-            return (React.createElement(ValueView, __assign({}, viewProps)));
+            return (react_1["default"].createElement(ValueView, __assign({}, viewProps_1)));
         }
-        return (React.createElement(Format_1["default"], __assign({ item: item, model: props.model }, column, (column.formatter || {}))));
+        return (react_1["default"].createElement(Format_1["default"], __assign({ item: item, model: props.model }, column, (column.formatter || {}))));
     }, [props.listId, props.model, props.primaryKey]);
     // Columns
     var columns = (0, react_1.useMemo)(function () { return []
@@ -119,7 +118,33 @@ function Grid(props) {
         .map(function (column) { return ((0, isString_1["default"])(column) ? { attribute: column } : column); })
         .filter(function (column) { return column.visible !== false; })
         .map(function (column) { return (__assign(__assign({}, column), { label: renderLabel(column) })); }); }, [props.columns, props.controls, props.itemsIndexing, renderLabel]);
-    return components.ui.renderView(props.view || 'list.GridView', __assign(__assign({}, props), { list: list, paginationPosition: paginationPosition, paginationSizePosition: paginationSizePosition, layoutNamesPosition: layoutNamesPosition, renderList: renderList, renderEmpty: renderEmpty, renderPagination: renderPagination, renderPaginationSize: renderPaginationSize, renderLayoutNames: renderLayoutNames, renderSearchForm: renderSearchForm, renderValue: renderValue, columns: columns, onFetch: onFetch, onSort: onSort, items: (list === null || list === void 0 ? void 0 : list.items) || [] }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        list: list,
+        paginationPosition: paginationPosition,
+        paginationSizePosition: paginationSizePosition,
+        layoutNamesPosition: layoutNamesPosition,
+        renderList: renderList,
+        renderEmpty: renderEmpty,
+        renderPagination: renderPagination,
+        renderPaginationSize: renderPaginationSize,
+        renderLayoutNames: renderLayoutNames,
+        renderSearchForm: renderSearchForm,
+        renderValue: renderValue,
+        columns: columns,
+        onFetch: onFetch,
+        onSort: onSort,
+        items: (list === null || list === void 0 ? void 0 : list.items) || [],
+        searchForm: props.searchForm,
+        listId: props.listId,
+        isLoading: props.isLoading,
+        size: props.size,
+        hasAlternatingColors: props.hasAlternatingColors,
+        className: props.className,
+        primaryKey: props.primaryKey
+    }); }, [columns, layoutNamesPosition, list, onFetch, onSort, paginationPosition, paginationSizePosition, props.className,
+        props.hasAlternatingColors, props.isLoading, props.listId, props.primaryKey, props.searchForm, props.size, renderEmpty,
+        renderLayoutNames, renderList, renderPagination, renderPaginationSize, renderSearchForm, renderValue]);
+    return components.ui.renderView(props.view || 'list.GridView', viewProps);
 }
 exports["default"] = Grid;
 Grid.defaultProps = {

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { INavItem } from '../../nav/Nav/Nav';
 import { ListControlPosition } from '../../../hooks/useList';
 import { IList } from '../../../actions/list';

package/ui/list/LayoutNames/LayoutNames.js

@@ -38,9 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 exports.normalizeLayoutNamesProps = void 0;
-var React = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
 var get_1 = __importDefault(require("lodash-es/get"));
-var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var list_1 = require("../../../actions/list");
 var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
@@ -70,4 +69,4 @@ LayoutNames.defaultProps = {
 };
 var normalizeLayoutNamesProps = function (props) { return (__assign(__assign(__assign({}, LayoutNames.defaultProps), { enable: !!props, defaultValue: (0, get_1["default"])(props, 'items.0.id') || LayoutNames.defaultProps.defaultValue }), (typeof props === 'boolean' ? { enable: props } : props))); };
 exports.normalizeLayoutNamesProps = normalizeLayoutNamesProps;
-exports["default"] = React.memo(LayoutNames);
+exports["default"] = react_1["default"].memo(LayoutNames);

package/ui/list/List/List.js

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
+var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var useList_1 = __importDefault(require("../../../hooks/useList"));
 function List(props) {
@@ -69,9 +70,23 @@ function List(props) {
     }), list = _a.list, 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;
     var ItemView = props.itemView || components.ui.getView('list.ListItemView');
     var content = ((list === null || list === void 0 ? void 0 : list.items) || []).map(function (item, index) { return (React.createElement(ItemView, __assign({}, props.itemProps, { key: item[props.primaryKey] || index, primaryKey: props.primaryKey, item: item, index: index, layoutSelected: list.layoutName }))); });
-    return components.ui.renderView(props.view || 'list.ListView', __assign(__assign({}, props), { list: list, paginationPosition: paginationPosition, paginationSizePosition: paginationSizePosition, layoutNamesPosition: layoutNamesPosition, renderList: renderList, renderEmpty: renderEmpty, renderPagination: renderPagination, renderPaginationSize: renderPaginationSize, renderLayoutNames: renderLayoutNames, renderSearchForm: renderSearchForm, 
-        //onFetch,
-        //onSort,
-        content: content }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        list: list,
+        paginationPosition: paginationPosition,
+        paginationSizePosition: paginationSizePosition,
+        layoutNamesPosition: layoutNamesPosition,
+        renderList: renderList,
+        renderEmpty: renderEmpty,
+        renderPagination: renderPagination,
+        renderPaginationSize: renderPaginationSize,
+        renderLayoutNames: renderLayoutNames,
+        renderSearchForm: renderSearchForm,
+        content: content,
+        isLoading: props.isLoading,
+        className: props.className,
+        contentClassName: props.contentClassName
+    }); }, [content, layoutNamesPosition, list, paginationPosition, paginationSizePosition, props.className, props.contentClassName,
+        props.isLoading, renderEmpty, renderLayoutNames, renderList, renderPagination, renderPaginationSize, renderSearchForm]);
+    return components.ui.renderView(props.view || 'list.ListView', viewProps);
 }
 exports["default"] = List;

package/ui/list/Pagination/Pagination.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { IButtonProps } from '../../form/Button/Button';
 /**
  * Pagination

package/ui/list/Pagination/Pagination.js

@@ -39,8 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 exports.normalizePaginationProps = exports.generatePages = void 0;
 var get_1 = __importDefault(require("lodash-es/get"));
-var react_1 = require("react");
-var React = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var useForm_1 = __importDefault(require("../../../hooks/useForm"));
 var form_1 = require("../../../actions/form");
@@ -79,8 +78,8 @@ function Pagination(props) {
         });
     }) || initialValues, page = _e.page, pageSize = _e.pageSize;
     var totalPages = Math.ceil((((_c = props.list) === null || _c === void 0 ? void 0 : _c.total) || 0) / (pageSize || 1));
-    var isFirstPage = React.useMemo(function () { return page === FIRST_PAGE; }, [page]);
-    var isLastPage = React.useMemo(function () { return page === totalPages; }, [page, totalPages]);
+    var isFirstPage = react_1["default"].useMemo(function () { return page === FIRST_PAGE; }, [page]);
+    var isLastPage = react_1["default"].useMemo(function () { return page === totalPages; }, [page, totalPages]);
     var pages = (0, react_1.useMemo)(function () { return (0, exports.generatePages)(page, totalPages, props.aroundCount)
         .map(function (pageItem, index, pagesArray) {
         // Номер страницы для '...' кнопки (выбирает страницу между двумя соседними пронумерованными)
@@ -111,6 +110,23 @@ function Pagination(props) {
     var onSelectFirst = (0, react_1.useCallback)(function () {
         onSelect(FIRST_PAGE);
     }, [onSelect]);
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        totalPages: totalPages,
+        pages: pages,
+        onSelect: onSelect,
+        onSelectNext: onSelectNext,
+        onSelectPrev: onSelectPrev,
+        onSelectLast: onSelectLast,
+        onSelectFirst: onSelectFirst,
+        isFirstPage: isFirstPage,
+        isLastPage: isLastPage,
+        size: props.size,
+        className: props.className,
+        showEdgeSteps: props.showEdgeSteps,
+        showSteps: props.showSteps,
+        buttonProps: props.buttonProps
+    }); }, [isFirstPage, isLastPage, onSelect, onSelectFirst, onSelectLast, onSelectNext, onSelectPrev, pages, props.buttonProps,
+        props.className, props.showEdgeSteps, props.showSteps, props.size, totalPages]);
     if (!props.list || !page || !pageSize || props.list.total <= pageSize) {
         return null;
     }
@@ -119,7 +135,7 @@ function Pagination(props) {
         return null;
     }
     var defaultView = (props.loadMore ? 'list.PaginationMoreView' : 'list.PaginationButtonView');
-    return components.ui.renderView(props.view || defaultView, __assign(__assign({}, props), { totalPages: totalPages, pages: pages, onSelect: onSelect, onSelectNext: onSelectNext, onSelectPrev: onSelectPrev, onSelectLast: onSelectLast, onSelectFirst: onSelectFirst, isFirstPage: isFirstPage, isLastPage: isLastPage }));
+    return components.ui.renderView(props.view || defaultView, viewProps);
 }
 Pagination.defaultProps = {
     enable: true,
@@ -133,4 +149,4 @@ Pagination.defaultProps = {
 };
 var normalizePaginationProps = function (props) { return (__assign(__assign({}, Pagination.defaultProps), (typeof props === 'boolean' ? { enable: props } : props))); };
 exports.normalizePaginationProps = normalizePaginationProps;
-exports["default"] = React.memo(Pagination);
+exports["default"] = react_1["default"].memo(Pagination);

package/ui/list/PaginationSize/PaginationSize.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { IButtonProps } from '../../form/Button/Button';
 import { ListControlPosition } from '../../../hooks/useList';
 /**

package/ui/list/PaginationSize/PaginationSize.js

@@ -38,9 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 exports.normalizePaginationSizeProps = void 0;
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var get_1 = __importDefault(require("lodash-es/get"));
-var React = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var useForm_1 = __importDefault(require("../../../hooks/useForm"));
 var form_1 = require("../../../actions/form");
@@ -60,10 +59,17 @@ function PaginationSize(props) {
             props.onChange.call(null, newPage);
         }
     }, [formDispatch, formId, props.attribute, props.onChange]);
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        items: items,
+        onSelect: onSelect,
+        className: props.className,
+        defaultValue: props.defaultValue,
+        buttonProps: props.buttonProps
+    }); }, [items, onSelect, props.buttonProps, props.className, props.defaultValue]);
     if (!((_b = (_a = props.list) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length)) {
         return null;
     }
-    return components.ui.renderView(props.view || 'list.PaginationSizeView', __assign(__assign({}, props), { items: items, onSelect: onSelect }));
+    return components.ui.renderView(props.view || 'list.PaginationSizeView', viewProps);
 }
 PaginationSize.defaultProps = {
     enable: false,
@@ -77,4 +83,4 @@ PaginationSize.defaultProps = {
 };
 var normalizePaginationSizeProps = function (props) { return (__assign(__assign(__assign({}, PaginationSize.defaultProps), { enable: !!props, defaultValue: (0, get_1["default"])(props, 'sizes.0') || PaginationSize.defaultProps.defaultValue }), (typeof props === 'boolean' ? { enable: props } : props))); };
 exports.normalizePaginationSizeProps = normalizePaginationSizeProps;
-exports["default"] = React.memo(PaginationSize);
+exports["default"] = react_1["default"].memo(PaginationSize);

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { ComponentProps } from 'react';
 import { IButtonProps } from '../../form/Button/Button';
 /**
  * Modal
@@ -14,7 +14,7 @@ export interface IModalProps {
      * Компонент, который отрендерится внутри Modal
      * @example () => <InnerModalComponent />
      */
-    component?: (props: React.ComponentProps<any>) => JSX.Element;
+    component?: (props: ComponentProps<any>) => JSX.Element;
     /**
      * Свойства для внутреннего компонента
      */

package/ui/modal/Modal/Modal.js

@@ -34,19 +34,32 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 exports.__esModule = true;
-var React = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 function Modal(props) {
     var components = (0, hooks_1.useComponents)();
     var ModalView = props.view || components.ui.getView('modal.ModalView');
     var ContentComponent = props.component;
-    React.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (props.closeAfterMs) {
             setTimeout(function () { return props.onClose(); }, props.closeAfterMs);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (React.createElement(ModalView, __assign({}, props), (ContentComponent && (React.createElement(ContentComponent, __assign({}, props, props.componentProps)))) || (props.children)));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        size: props.size,
+        className: props.className,
+        closeTimeoutMs: props.closeTimeoutMs,
+        isClosing: props.isClosing,
+        onClose: props.onClose,
+        shouldCloseOnEsc: props.shouldCloseOnEsc,
+        shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick,
+        title: props.title,
+        children: props.children,
+        buttons: props.buttons
+    }); }, [props.buttons, props.children, props.className, props.closeTimeoutMs, props.isClosing, props.onClose, props.shouldCloseOnEsc,
+        props.shouldCloseOnOverlayClick, props.size, props.title]);
+    return (react_1["default"].createElement(ModalView, __assign({}, viewProps), (ContentComponent && (react_1["default"].createElement(ContentComponent, __assign({}, props, props.componentProps)))) || (props.children)));
 }
 Modal.defaultProps = {
     size: 'md',

package/ui/modal/ModalPortal/ModalPortal.js

@@ -37,9 +37,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var React = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
 var orderBy_1 = __importDefault(require("lodash-es/orderBy"));
-var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
 var modal_1 = require("../../../actions/modal");
@@ -68,7 +67,7 @@ function ModalPortal(props) {
     return (0, orderBy_1["default"])(opened, 'id').map(function (item, index) {
         var ModalComponent = item.modal;
         var modalProps = __assign(__assign({}, item.props), { index: index, group: group, isClosing: item.isClosing, onClose: function () { return onClose(item); }, closeTimeoutMs: item.props.closeTimeoutMs || props.animationDelayMc });
-        return (React.createElement(ModalComponent, __assign({ key: item.id }, modalProps)));
+        return (react_1["default"].createElement(ModalComponent, __assign({ key: item.id }, modalProps)));
     });
 }
 ModalPortal.defaultProps = {

package/ui/nav/Breadcrumbs/Breadcrumbs.js

@@ -1,16 +1,6 @@
 "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);
-};
 exports.__esModule = true;
+var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var router_1 = require("../../../reducers/router");
 function Breadcrumbs(props) {
@@ -18,6 +8,14 @@ function Breadcrumbs(props) {
     var routeItems = (0, hooks_1.useSelector)(function (state) { return (0, router_1.getRouteBreadcrumbs)(state, props.pageId); });
     var routeParams = (0, hooks_1.useSelector)(function (state) { return (0, router_1.getRouteParams)(state); });
     var items = props.items || routeItems;
-    return components.ui.renderView(props.view || 'nav.BreadcrumbsView', __assign(__assign({}, props), { items: items, routeParams: routeParams }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        items: items,
+        routeParams: routeParams,
+        customIcon: props.customIcon,
+        showIcon: props.showIcon,
+        className: props.className,
+        pageTitle: props.pageTitle
+    }); }, [items, props.className, props.customIcon, props.pageTitle, props.showIcon, routeParams]);
+    return components.ui.renderView(props.view || 'nav.BreadcrumbsView', viewProps);
 }
 exports["default"] = Breadcrumbs;

package/ui/nav/ButtonGroup/ButtonGroup.js

@@ -1,59 +1,40 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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_1 = __importStar(require("react"));
+var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var useDataProvider_1 = __importDefault(require("../../../hooks/useDataProvider"));
 var DEFAULT_BUTTON_GROUP_SIZE = 'md';
 function ButtonGroup(props) {
-    var _a, _b;
+    var _a;
     var components = (0, hooks_1.useComponents)();
     var items = (0, useDataProvider_1["default"])({
         items: props.items
     }).items;
-    var _c = (0, react_1.useState)(props.activeButton || props.defaultActiveButton || ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.id)), activeButton = _c[0], setActiveButton = _c[1];
-    react_1["default"].useEffect(function () {
+    var _b = (0, react_1.useState)(props.activeButton || props.defaultActiveButton || ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.id)), activeButton = _b[0], setActiveButton = _b[1];
+    (0, react_1.useEffect)(function () {
         if (props.activeButton) {
             setActiveButton(props.activeButton);
         }
     }, [props.activeButton]);
-    var onClick = function (buttonId) {
+    var onClick = (0, react_1.useCallback)(function (buttonId) {
         setActiveButton(buttonId);
         props.onClick(buttonId);
-    };
-    return components.ui.renderView(props.view || 'nav.ButtonGroupView', {
-        className: props.className,
-        style: props.style,
-        buttonProps: props.buttonProps,
-        size: ((_b = props.buttonProps) === null || _b === void 0 ? void 0 : _b.size) || DEFAULT_BUTTON_GROUP_SIZE,
-        activeButton: activeButton,
-        items: items,
-        onClick: onClick
-    });
+    }, [props]);
+    var viewProps = (0, react_1.useMemo)(function () {
+        var _a;
+        return ({
+            className: props.className,
+            style: props.style,
+            buttonProps: props.buttonProps,
+            size: ((_a = props.buttonProps) === null || _a === void 0 ? void 0 : _a.size) || DEFAULT_BUTTON_GROUP_SIZE,
+            activeButton: activeButton,
+            items: items,
+            onClick: onClick
+        });
+    }, [activeButton, items, onClick, props.buttonProps, props.className, props.style]);
+    return components.ui.renderView(props.view || 'nav.ButtonGroupView', viewProps);
 }
 exports["default"] = ButtonGroup;

package/ui/nav/Controls/Controls.js

@@ -51,6 +51,11 @@ function Controls(props) {
     };
     var components = (0, hooks_1.useComponents)();
     var items = (0, react_1.useMemo)(function () { return props.items.map(function (item) { return (__assign(__assign({}, defaultItems[item.id]), item)); }); }, [defaultItems, props.items]);
-    return components.ui.renderView(props.view || 'nav.ControlsView', __assign(__assign({}, props), { items: items }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        items: items,
+        className: props.className,
+        navProps: props.navProps
+    }); }, [items, props.className, props.navProps]);
+    return components.ui.renderView(props.view || 'nav.ControlsView', viewProps);
 }
 exports["default"] = Controls;

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

@@ -108,6 +108,15 @@ export interface INavProps {
      * Размер
      */
     size?: Size;
+    /**
+     * CSS-класс для элемента навигации.
+     */
+    navClassName?: CssClassName;
+    /**
+     * Переводит кнопку в состояние "не активна"
+     * @example true
+     */
+    disabled?: boolean;
     [key: string]: any;
 }
 export interface INavViewProps extends INavProps {
@@ -116,7 +125,6 @@ export interface INavViewProps extends INavProps {
         isActive: boolean;
         isActiveNested: boolean;
     })[];
-    navClassName?: CssClassName;
 }
 declare function Nav(props: INavProps): JSX.Element;
 declare namespace Nav {

package/ui/nav/Nav/Nav.js

@@ -37,12 +37,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var React = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
 var get_1 = __importDefault(require("lodash-es/get"));
 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");
@@ -67,7 +66,7 @@ function Nav(props) {
             setActiveTab(props.activeTab);
         }
     }, [props.activeTab]);
-    var renderContent = function () {
+    var renderContent = (0, react_1.useCallback)(function () {
         var items = Array.isArray(props.items) ? props.items : [];
         var activeItem = items.find(function (item, index) { return activeTab === ((0, has_1["default"])(item, 'id') ? item.id : index); });
         if (!activeItem || !activeItem.content) {
@@ -75,10 +74,10 @@ function Nav(props) {
         }
         if ((0, isFunction_1["default"])(activeItem.content) || (0, isObject_1["default"])(activeItem.content)) {
             var ContentComponent = activeItem.content;
-            return (React.createElement(ContentComponent, __assign({}, activeItem, activeItem.contentProps)));
+            return (react_1["default"].createElement(ContentComponent, __assign({}, activeItem, activeItem.contentProps)));
         }
         return activeItem.content;
-    };
+    }, [activeTab, props.items]);
     var onClick = (0, react_1.useCallback)(function (item, index) {
         var newActiveTab = (0, has_1["default"])(item, 'id') ? item.id : index;
         setActiveTab(newActiveTab);
@@ -86,7 +85,7 @@ function Nav(props) {
             props.onChange.call(null, newActiveTab);
         }
     }, [props.onChange]);
-    var formatItems = React.useCallback(function (items) {
+    var formatItems = (0, react_1.useCallback)(function (items) {
         if (items === void 0) { items = props.items; }
         if (Array.isArray(items)) {
             return items.map(function (item, index) {
@@ -111,7 +110,17 @@ function Nav(props) {
             .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() }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        items: items,
+        onClick: onClick,
+        disabled: props.disabled,
+        size: props.size,
+        icon: props.icon,
+        className: props.className,
+        navClassName: props.navClassName,
+        children: renderContent()
+    }); }, [items, onClick, props.className, props.disabled, props.icon, props.navClassName, props.size, renderContent]);
+    return components.ui.renderView(props.view || defaultViewMap[props.layout], viewProps);
 }
 Nav.defaultProps = {
     layout: 'button',

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { IFetchConfig } from '../../../hooks/useFetch';
 import { IListProps } from '../../list/List/List';
 export declare const ROUTER_ROLE_LOGIN = "login";
@@ -128,7 +128,7 @@ export interface IRouterProps {
      * Дерево роутов
      * @example {id: 'root', path: '/', component: IndexPage, items: [...]}
      */
-    routes: IRouteItem[] | {
+    routes: IRouteItem[] | IRouteItem | {
         [key: string]: IRouteItem;
     };
     /**