@steroidsjs/core 2.1.0-beta.6 → 2.1.1

package/ui/modal/Modal/demo/basic.js

@@ -1,4 +1,15 @@
 "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]; } });
@@ -23,24 +34,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var useDispatch_1 = __importDefault(require("../../../../hooks/useDispatch"));
+var Modal_1 = __importDefault(require("../Modal"));
 var Button_1 = __importDefault(require("../../../form/Button"));
-var ModalPortal_1 = __importDefault(require("../../ModalPortal"));
 var modal_1 = require("../../../../actions/modal");
-var Modal_1 = __importDefault(require("../Modal"));
+var useDispatch_1 = __importDefault(require("../../../../hooks/useDispatch"));
 function DemoModal(props) {
-    return (React.createElement(Modal_1["default"], { title: 'Title', onClose: props.onClose, controls: [{ label: __(('Control')), onClick: function () { return props.onClose(); } }] },
-        React.createElement("div", { className: 'mb-3' }, "This is your modal window.")));
+    return (React.createElement(Modal_1["default"], __assign({ title: 'Basic Modal', onClose: props.onClose }, props),
+        React.createElement("div", { style: { marginBottom: '20px' } }, "This is your modal content.")));
 }
 /**
- * Basic
+ * Простой пример Modal, с заданным заголовком и контентом.
  * @order 1
  * @col 6
  */
 exports["default"] = (function () {
     var dispatch = useDispatch_1["default"]();
     return (React.createElement(React.Fragment, null,
-        React.createElement(ModalPortal_1["default"], null),
         React.createElement(Button_1["default"], { label: 'Open modal', onClick: function (e) {
                 e.preventDefault();
                 dispatch(modal_1.openModal(DemoModal, {

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Настройка времени, через которое произойдет закрытие Modal.
+ * @order 5
+ * @col 6
+ */
+export default _default;

package/ui/modal/Modal/demo/closeTimeout.js

@@ -0,0 +1,60 @@
+"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;
+var React = __importStar(require("react"));
+var Modal_1 = __importDefault(require("../Modal"));
+var Button_1 = __importDefault(require("../../../form/Button"));
+var modal_1 = require("../../../../actions/modal");
+var useDispatch_1 = __importDefault(require("../../../../hooks/useDispatch"));
+function DemoModal(props) {
+    return (React.createElement(Modal_1["default"], __assign({ title: 'Custom closing time', onClose: props.onClose }, props),
+        React.createElement("div", { style: { marginBottom: '20px' } }, "This is your modal content.")));
+}
+/**
+ * Настройка времени, через которое произойдет закрытие Modal.
+ * @order 5
+ * @col 6
+ */
+exports["default"] = (function () {
+    var dispatch = useDispatch_1["default"]();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button_1["default"], { label: 'Open modal', onClick: function (e) {
+                e.preventDefault();
+                dispatch(modal_1.openModal(DemoModal, {
+                    modalId: 'demo',
+                    closeTimeoutMs: 1000
+                }));
+            } })));
+});

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Обработка закрытия Modal при помощи onClose.
+ * Также это модальное окно не закроется при нажатии на клавишу 'ESC' или клике на overlay.
+ * @order 4
+ * @col 6
+ */
+export default _default;

package/ui/modal/Modal/demo/closing.js

@@ -0,0 +1,63 @@
+"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;
+var React = __importStar(require("react"));
+var Modal_1 = __importDefault(require("../Modal"));
+var Button_1 = __importDefault(require("../../../form/Button"));
+var modal_1 = require("../../../../actions/modal");
+var useDispatch_1 = __importDefault(require("../../../../hooks/useDispatch"));
+function DemoModal(props) {
+    return (React.createElement(Modal_1["default"], __assign({ title: 'Modal with custom closing', onClose: props.onClose }, props),
+        React.createElement("div", { style: { marginBottom: '20px' } }, "This is your modal content.")));
+}
+/**
+ * Обработка закрытия Modal при помощи onClose.
+ * Также это модальное окно не закроется при нажатии на клавишу 'ESC' или клике на overlay.
+ * @order 4
+ * @col 6
+ */
+exports["default"] = (function () {
+    var dispatch = useDispatch_1["default"]();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button_1["default"], { label: 'Open modal', onClick: function (e) {
+                e.preventDefault();
+                dispatch(modal_1.openModal(DemoModal, {
+                    modalId: 'demo',
+                    onClose: function () { return alert('Modal will be closed!'); },
+                    shouldCloseOnOverlayClick: false,
+                    shouldCloseOnEsc: false
+                }));
+            } })));
+});

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Контент для Modal также можно задать через свойство component.
+ * При этом, в action openModal необязательно передавать отдельный компонент, построенный на базе Modal.
+ * Можно передать сам Modal, контент настроить уже через свойства Modal.
+ * @order 6
+ * @col 6
+ */
+export default _default;

package/ui/modal/Modal/demo/component.js

@@ -0,0 +1,51 @@
+"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 Modal_1 = __importDefault(require("../Modal"));
+var Button_1 = __importDefault(require("../../../form/Button"));
+var modal_1 = require("../../../../actions/modal");
+var useDispatch_1 = __importDefault(require("../../../../hooks/useDispatch"));
+/**
+ * Контент для Modal также можно задать через свойство component.
+ * При этом, в action openModal необязательно передавать отдельный компонент, построенный на базе Modal.
+ * Можно передать сам Modal, контент настроить уже через свойства Modal.
+ * @order 6
+ * @col 6
+ */
+exports["default"] = (function () {
+    var dispatch = useDispatch_1["default"]();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button_1["default"], { label: 'Open modal', onClick: function (e) {
+                e.preventDefault();
+                dispatch(modal_1.openModal(Modal_1["default"], {
+                    modalId: 'demo',
+                    title: 'Modal based only on props',
+                    component: function () { return (React.createElement("div", { style: { marginBottom: '20px' } }, "This is your modal content.")); },
+                    controls: [
+                        { label: 'Show Alert', onClick: function () { return alert('This is alert!'); } },
+                    ]
+                }));
+            } })));
+});

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Modal содержит набор контролов с привязанными обработчиками.
+ * @order 2
+ * @col 6
+ */
+export default _default;

package/ui/modal/Modal/demo/controls.js

@@ -0,0 +1,62 @@
+"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;
+var React = __importStar(require("react"));
+var Modal_1 = __importDefault(require("../Modal"));
+var Button_1 = __importDefault(require("../../../form/Button"));
+var modal_1 = require("../../../../actions/modal");
+var useDispatch_1 = __importDefault(require("../../../../hooks/useDispatch"));
+function DemoModal(props) {
+    return (React.createElement(Modal_1["default"], __assign({ title: 'Modal with controls', onClose: props.onClose, controls: [
+            { label: 'Show Alert', onClick: function () { return alert('This is alert!'); } },
+            { label: 'Close', onClick: function () { return props.onClose(); } },
+        ] }, props),
+        React.createElement("div", { style: { marginBottom: '20px' } }, "This is your modal content.")));
+}
+/**
+ * Modal содержит набор контролов с привязанными обработчиками.
+ * @order 2
+ * @col 6
+ */
+exports["default"] = (function () {
+    var dispatch = useDispatch_1["default"]();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button_1["default"], { label: 'Open modal', onClick: function (e) {
+                e.preventDefault();
+                dispatch(modal_1.openModal(DemoModal, {
+                    modalId: 'demo'
+                }));
+            } })));
+});

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * По-умолчанию, Modal имеет 3 заданных размера.
+ * @order 3
+ * @col 12
+ */
+export default _default;

package/ui/modal/Modal/demo/size.js

@@ -0,0 +1,66 @@
+"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;
+var React = __importStar(require("react"));
+var Modal_1 = __importDefault(require("../Modal"));
+var Button_1 = __importDefault(require("../../../form/Button"));
+var modal_1 = require("../../../../actions/modal");
+var useDispatch_1 = __importDefault(require("../../../../hooks/useDispatch"));
+var sizesArray = ['small', 'middle', 'large'];
+function DemoModal(props) {
+    return (React.createElement(Modal_1["default"], __assign({ title: props.size + " modal", onClose: props.onClose }, props),
+        React.createElement("div", { style: { marginBottom: '20px' } },
+            "This is your content for",
+            React.createElement("strong", null,
+                ' ',
+                props.size,
+                ' '),
+            "modal.")));
+}
+/**
+ * По-умолчанию, Modal имеет 3 заданных размера.
+ * @order 3
+ * @col 12
+ */
+exports["default"] = (function () {
+    var dispatch = useDispatch_1["default"]();
+    return (React.createElement("div", { style: { display: 'flex' } }, sizesArray.map(function (size) { return (React.createElement(Button_1["default"], { key: size, label: "Open " + size + " modal", onClick: function (e) {
+            e.preventDefault();
+            dispatch(modal_1.openModal(DemoModal, {
+                modalId: 'demo',
+                size: size
+            }));
+        }, style: { marginRight: '20px' } })); })));
+});

package/ui/modal/ModalPortal/ModalPortal.d.ts

@@ -1,6 +1,14 @@
 /// <reference types="react" />
 export interface IModalPortalProps {
+    /**
+     * Время, через которое произойдет закрытие Modal
+     * @example 300
+     */
     animationDelayMc?: number;
+    /**
+     * Группа Modal
+     * @example 'modal'
+     */
     group?: string;
 }
 declare function ModalPortal(props: IModalPortalProps): JSX.Element;

package/ui/modal/ModalPortal/ModalPortal.js

@@ -51,9 +51,11 @@ function ModalPortal(props) {
         dispatch(modal_1.closeModal(item.id, props.group));
     }, [dispatch, props.group]);
     var onClose = react_1.useCallback(function (item) {
-        if (props.animationDelayMc || props.animationDelayMc === 0) {
+        var _a, _b;
+        var animationDelayMc = (_b = (_a = item.props) === null || _a === void 0 ? void 0 : _a.closeTimeoutMs) !== null && _b !== void 0 ? _b : props.animationDelayMc;
+        if (animationDelayMc > 0) {
             dispatch(modal_1.modalMarkClosing(item.id, props.group));
-            setTimeout(function () { return closeInternal(item); }, props.animationDelayMc);
+            setTimeout(function () { return closeInternal(item); }, animationDelayMc);
         }
         else {
             closeInternal(item);
@@ -61,13 +63,9 @@ function ModalPortal(props) {
     }, [closeInternal, dispatch, props.animationDelayMc, props.group]);
     return orderBy_1["default"](opened, 'id').map(function (item, index) {
         var ModalComponent = item.modal;
-        var modalProps = {
-            index: index,
-            group: group,
-            isClosing: item.isClosing,
-            onClose: function () { return onClose(item); }
-        };
-        return (React.createElement(ModalComponent, __assign({ key: item.id }, item.props, modalProps)));
+        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)));
     });
 }
 ModalPortal.defaultProps = {

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

@@ -1,23 +1,29 @@
 /// <reference types="react" />
-import { IRoute } from '../../../reducers/router';
+import { IRouteItem } from '../Router/Router';
 /**
  * Breadcrumbs
  * Хлебные крошки
  */
 export interface IBreadcrumbsProps {
+    /**
+     * Кастомный CSS-класс
+     * @example 'CustomCssClassName'
+     */
+    className?: CssClassName;
     /**
      * Коллекция элементов навигационной цепочки
-     * @example [{id: 'root', title: 'Home'}, {id: 'catalog', title: 'Catalog'}
+     * @example [{id: 'root', title: 'Home'}, {id: 'catalog', title: 'Catalog'}]
      */
-    items?: IRoute[];
+    items?: IRouteItem[];
     /**
-     * Вместо items можно передать идентификатор текущего роута, от которого компонент самостоятельно построит
+     * Вместо items можно передать идентификатор роута, от которого компонент самостоятельно построит
      * навигационную цепочку
      * @example 'catalog'
      */
     pageId?: string;
     /**
-     * Заголовок текущей страницы. Если заголовок не задан, то подставится item.title
+     * Заголовок последней в списке страницы (обычно, это текущая страница, на которой находится пользователь).
+     * Если заголовок не задан, то подставится item.title
      * @example 'Каталог'
      */
     pageTitle?: string;
@@ -25,7 +31,7 @@ export interface IBreadcrumbsProps {
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     [key: string]: any;
 }
 export declare type IBreadcrumbsViewProps = IBreadcrumbsProps;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Basic
+ * Самый простой способ построить цепочку Breadcrumbs - передать id целевого роута.
  * @order 1
  * @col 6
  */

package/ui/nav/Breadcrumbs/demo/basic.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Breadcrumbs_1 = __importDefault(require("../Breadcrumbs"));
 /**
- * Basic
+ * Самый простой способ построить цепочку Breadcrumbs - передать id целевого роута.
  * @order 1
  * @col 6
  */

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Передаем заданный массив роутов.
+ * @order 3
+ * @col 12
+ */
+export default _default;

package/ui/{form/TimeField/demo/sizes.js → nav/Breadcrumbs/demo/items.js}

@@ -23,17 +23,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var TimeField_1 = __importDefault(require("../TimeField"));
-var sizes = {
-    sm: 'Small',
-    md: 'Middle',
-    lg: 'Large'
-};
+var Breadcrumbs_1 = __importDefault(require("../Breadcrumbs"));
 /**
- * Sizes
- * @order 5
+ * Передаем заданный массив роутов.
+ * @order 3
  * @col 12
  */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement("div", { className: 'row' }, Object.keys(sizes).map(function (size) { return (React.createElement("div", { className: 'col', key: size },
-        React.createElement(TimeField_1["default"], { label: sizes[size], size: size }))); })))); });
+    React.createElement(Breadcrumbs_1["default"], { items: [
+            { id: 'root', title: 'Home' },
+            { id: 'react', title: 'Frontend React' },
+            { id: 'ui', title: 'Ui' },
+            { id: 'Breadcrumbs', title: 'Breadcrumbs' },
+        ] }))); });

package/ui/nav/Breadcrumbs/demo/page-title.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Basic
+ * Изменяем заголовок последней в списке страницы.
  * @order 2
  * @col 6
  */

package/ui/nav/Breadcrumbs/demo/page-title.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var Breadcrumbs_1 = __importDefault(require("../Breadcrumbs"));
 /**
- * Basic
+ * Изменяем заголовок последней в списке страницы.
  * @order 2
  * @col 6
  */

package/ui/nav/Nav/Nav.js

@@ -96,7 +96,7 @@ function Nav(props) {
         }); })
             .filter(function (item) { return item.visible !== false; })); }, [activeRouteIds, activeTab, props.items, routerParams, routes]);
     return components.ui.renderView(props.view || defaultViewMap[props.layout], __assign(__assign({}, props), { items: items,
-        onClick: onClick, children: renderContent() }));
+        onClick: onClick, disabled: props.disabled, children: renderContent() }));
 }
 Nav.defaultProps = {
     layout: 'button'

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

@@ -1,5 +1,10 @@
 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";
 /**
  * Router
  * Маршрутизатор.
@@ -71,6 +76,11 @@ export interface IRouteItem {
      * Название или список с названиями перечислений, полученных с бэкенда
      */
     enums?: string | string[];
+    /**
+     * Назначение страницы, указывается, чтобы приложение автоматически могло найти страницу авторизации или 404-ю..
+     * @example 'login'
+     */
+    role?: 'login' | 'modal' | '404' | string;
     /**
      * Список с ролями, который показывает, кому из пользователей будет доступен просмотр страницы
      * @example ['user', 'admin']
@@ -89,6 +99,17 @@ export interface IRouteItem {
     items?: IRouteItem[] | {
         [key: string]: IRouteItem;
     };
+    /**
+     * Обработчик, который принимает параметры URL и возвращает массив с пропсами для хука useFetch и компонента
+     * List.
+     * Функция запускается перед рендерингом приложения в режиме SSR и используется для предварительной
+     * загрузки данных, необходимых на текущей странице.
+     * Хук useFetch и компонент List не будут повторно инициализироваться и делать запросы на клиенте,
+     * если подгруженные данные существуют.
+     * @param {Object} match
+     * @return {Array} Например, [{url: '/api/v1/some-data'}, {listId: 'someList', action: '/api/v1/some-list'}]
+     */
+    preloadData?: (match: Record<string, any>) => (IFetchConfig | IListProps)[];
     [key: string]: any;
 }
 export interface IRouterProps {