@steroidsjs/core 2.1.0-beta.3 → 2.1.0-beta.33

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

@@ -6,69 +6,89 @@ import { IControlItem } from '../../nav/Controls/Controls';
  */
 export interface IModalProps {
     /**
-     * Порядковый номер модального окна
-     * @example 0
+     * Кастомный CSS-класс
+     * @example 'CustomCssClassName'
      */
-    index?: number;
+    className?: CssClassName;
     /**
-     * Обработчик для закрытия модального окна
-     * @param args
+     * Компонент, который отрендерится внутри Modal
+     * @example () => <InnerModalComponent />
      */
-    onClose?: (...args: any[]) => any;
+    component?: () => JSX.Element;
     /**
-     * Заголовок модального окна
-     * @example 'Заявка отправлена на модерацию'
+     * Свойства для внутреннего компонента
      */
-    title?: string;
+    componentProps?: any;
     /**
-     * Размер
+     * Коллекция контролов, которая отобразится в Modal
+     * @example [{label: __(('Закрыть')), onClick: () => props.onClose()}]
      */
-    size?: Size;
+    controls?: IControlItem[];
     /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
+     * Время, через которое произойдет закрытие Modal.
+     * В этот отрезок времени должны происходить все анимации закрытия компонента.
+     * Переопределяет отрезок времени, заданный в ModalPortal
+     * @example 300
      */
-    view?: any;
+    closeTimeoutMs?: number;
     /**
-     * CSS-класс для элемента отображения
+     * Группа Modal
+     * @example 'modal'
      */
-    className?: CssClassName;
+    group?: string;
+    /**
+     * Порядковый номер Modal
+     * @example 0
+     */
+    index?: number;
     /**
+     * Значение свойства отслеживается для показа/закрытия Modal.
      * Если для компонента ModalPortal установлено значение задержки (animationDelayMc), то после закрытия
-     * пользователем модального окна, оно исчезнет не сразу, а через указанный в animationDelayMc промежуток времени.
+     * пользователем Modal, оно исчезнет не сразу, а через указанный в animationDelayMc промежуток времени.
      * В течение этого времени флаг isClosing будет равен true.
-     * Если задержка не установлена, модальное окно закроется сразу же и флаг isClosing всегда будет равен false.
+     * Если задержка не установлена, Modal закроется сразу же и флаг isClosing всегда будет равен false.
      * @example true
      */
     isClosing?: boolean;
     /**
-     * Группа модального окна
-     * @example 'modal'
+     * Обработчик срабатывает при закрытии Modal
+     * @param args
      */
-    group?: string;
+    onClose?: (...args: any[]) => void;
     /**
-     * Компонент, который отрендерится внутри модального окна
-     * @example InnerModalComponent
+     * Размер Modal
+     * @example 'middle'
      */
-    component?: any;
+    size?: Size;
     /**
-     * Свойства для внутреннего компонента
+     * Заголовок Modal
+     * @example 'Заявка отправлена на модерацию'
      */
-    componentProps?: any;
+    title?: string;
+    /**
+     * Закрытие Modal при нажатии на клавишу 'ESC'
+     * @example true
+     */
+    shouldCloseOnEsc?: boolean;
     /**
-     * Коллекция контролов, которая отобразится в модальном окне
-     * @example [{label: __(('Отлично')), onClick: () => props.onClose()}]
+     * Закрытие Modal при клике на компонент overlay внутри Modal (темный фон, отделяющий контент страницы от Modal)
+     * @example true
      */
-    controls?: IControlItem[];
+    shouldCloseOnOverlayClick?: boolean;
+    /**
+     * Переопределение React-компонента для кастомизации view-отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
     [key: string]: any;
 }
-export interface IModalViewProps extends IModalProps {
-    isClosing?: boolean;
-}
+export declare type IModalViewProps = IModalProps;
 declare function Modal(props: IModalProps): JSX.Element;
 declare namespace Modal {
     var defaultProps: {
         size: string;
+        shouldCloseOnEsc: boolean;
+        shouldCloseOnOverlayClick: boolean;
     };
 }
 export default Modal;

package/ui/modal/Modal/Modal.js

@@ -39,6 +39,8 @@ function Modal(props) {
     return (React.createElement(ModalView, __assign({}, props), (ContentComponent && (React.createElement(ContentComponent, __assign({}, props, props.componentProps)))) || (props.children)));
 }
 Modal.defaultProps = {
-    size: 'md'
+    size: 'middle',
+    shouldCloseOnEsc: true,
+    shouldCloseOnOverlayClick: true
 };
 exports["default"] = Modal;

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

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

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

@@ -5,19 +5,25 @@ import { IRoute } from '../../../reducers/router';
  * Хлебные крошки
  */
 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 можно передать идентификатор текущего роута, от которого компонент самостоятельно построит
+     * Вместо 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
  */