@steroidsjs/core 2.1.0-beta.9 → 2.1.1

package/ui/{form/DateTimeField/demo/sizes.js → layout/ProgressBar/demo/status.js}

@@ -23,17 +23,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var DateTimeField_1 = __importDefault(require("../DateTimeField"));
-var sizes = {
-    sm: 'Small',
-    md: 'Middle',
-    lg: 'Large'
-};
+var ProgressBar_1 = __importDefault(require("../ProgressBar"));
 /**
- * Sizes
- * @order 7
- * @col 12
+ * Компонент имеет 3 базовых вида статуса.
+ * @order 1
+ * @col 6
  */
-exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement("div", { className: 'row mb-4' }, Object.keys(sizes).map(function (size) { return (React.createElement("div", { className: 'col', key: size },
-        React.createElement(DateTimeField_1["default"], { label: size, size: size }))); })))); });
+exports["default"] = (function () { return (React.createElement("div", null,
+    React.createElement(ProgressBar_1["default"], { percent: 10, size: 'small' }),
+    React.createElement(ProgressBar_1["default"], { percent: 50, size: 'small', status: 'exception' }),
+    React.createElement(ProgressBar_1["default"], { percent: 100, size: 'small', status: 'success' }))); });

package/ui/layout/ProgressBar/demo/type.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Имеется два типа: 'circle', 'line'. По-умолчанию задается 'line'.
+ * @order 3
+ * @col 6
+ */
+export default _default;

package/ui/layout/ProgressBar/demo/type.js

@@ -0,0 +1,40 @@
+"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 ProgressBar_1 = __importDefault(require("../ProgressBar"));
+/**
+ * Имеется два типа: 'circle', 'line'. По-умолчанию задается 'line'.
+ * @order 3
+ * @col 6
+ */
+exports["default"] = (function () { return (React.createElement("div", { style: { display: 'grid', gridGap: '10px', paddingRight: '10px' } },
+    React.createElement("div", { style: { display: 'flex', gridGap: '10px' } },
+        React.createElement(ProgressBar_1["default"], { percent: 10, size: 'small', type: 'circle' }),
+        React.createElement(ProgressBar_1["default"], { percent: 50, size: 'small', status: 'exception', type: 'circle' }),
+        React.createElement(ProgressBar_1["default"], { percent: 100, size: 'small', status: 'success', type: 'circle' })),
+    React.createElement("div", { style: { maxWidth: '90%' } },
+        React.createElement(ProgressBar_1["default"], { percent: 10, size: 'small' }),
+        React.createElement(ProgressBar_1["default"], { percent: 50, size: 'small', status: 'exception' }),
+        React.createElement(ProgressBar_1["default"], { percent: 100, size: 'small', status: 'success' })))); });

package/ui/layout/ProgressBar/index.d.ts

@@ -0,0 +1,2 @@
+import ProgressBar from "./ProgressBar";
+export default ProgressBar;

package/ui/layout/ProgressBar/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var ProgressBar_1 = __importDefault(require("./ProgressBar"));
+exports["default"] = ProgressBar_1["default"];

package/ui/layout/Skeleton/Skeleton.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export interface ISkeletonViewProps {
+    className?: string;
+    children?: React.ReactNode;
+    animation?: 'pulse' | 'wave';
+    type?: 'text' | 'rect' | 'circle';
+    height?: string | number;
+    width?: string | number;
+}
+export interface ISkeletonProps {
+    className?: string;
+    children?: React.ReactNode;
+    animation?: 'pulse' | 'wave';
+    type?: 'text' | 'rect' | 'circle';
+    height?: string | number;
+    width?: string | number;
+}
+declare function Skeleton(props: ISkeletonProps): JSX.Element;
+declare namespace Skeleton {
+    var defaultProps: {
+        animation: string;
+        type: string;
+    };
+}
+export default Skeleton;

package/ui/layout/Skeleton/Skeleton.js

@@ -0,0 +1,11 @@
+"use strict";
+exports.__esModule = true;
+var hooks_1 = require("../../../hooks");
+function Skeleton(props) {
+    return hooks_1.useComponents().ui.renderView('layout.SkeletonView', props);
+}
+Skeleton.defaultProps = {
+    animation: 'pulse',
+    type: 'text'
+};
+exports["default"] = Skeleton;

package/ui/layout/Skeleton/demo/animations.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Демонстрация двух видов анимации и трёх типов Skeleton.
+ * @order 1
+ * @col 3
+ */
+export default _default;

package/ui/layout/Skeleton/demo/animations.js

@@ -0,0 +1,49 @@
+"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 Skeleton_1 = __importDefault(require("../Skeleton"));
+/**
+ * Демонстрация двух видов анимации и трёх типов Skeleton.
+ * @order 1
+ * @col 3
+ */
+exports["default"] = (function () { return (React.createElement("div", { style: {
+        display: 'flex',
+        gridGap: '20px'
+    } },
+    React.createElement("div", { style: { display: 'grid', gridGap: '10px' } },
+        React.createElement("div", { style: { width: 100, height: 30 } },
+            React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'text' })),
+        React.createElement("div", { style: { width: 100, height: 100 } },
+            React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'rect' })),
+        React.createElement("div", { style: { width: 100, height: 100 } },
+            React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'circle' }))),
+    React.createElement("div", { style: { display: 'grid', gridGap: '10px' } },
+        React.createElement("div", { style: { width: 100, height: 30 } },
+            React.createElement(Skeleton_1["default"], { animation: 'pulse', type: 'text' })),
+        React.createElement("div", { style: { width: 100, height: 100 } },
+            React.createElement(Skeleton_1["default"], { animation: 'pulse', type: 'rect' })),
+        React.createElement("div", { style: { width: 100, height: 100 } },
+            React.createElement(Skeleton_1["default"], { animation: 'pulse', type: 'circle' }))))); });

package/ui/layout/Skeleton/demo/width height.d.ts

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

package/ui/layout/Skeleton/demo/width height.js

@@ -0,0 +1,38 @@
+"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 Skeleton_1 = __importDefault(require("../Skeleton"));
+/**
+ * Демонстрация задания кастомной ширины и высоты.
+ * @order 2
+ * @col 5
+ */
+exports["default"] = (function () { return (React.createElement("div", { style: {
+        display: 'flex',
+        gridGap: '20px'
+    } },
+    React.createElement("div", { style: { display: 'flex', gridGap: '10px' } },
+        React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'text', width: 50, height: 200 }),
+        React.createElement(Skeleton_1["default"], { animation: 'wave', type: 'circle', width: 300, height: 200 })))); });

package/ui/layout/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import Skeleton from "./Skeleton";
+export default Skeleton;

package/ui/layout/Skeleton/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Skeleton_1 = __importDefault(require("./Skeleton"));
+exports["default"] = Skeleton_1["default"];

package/ui/layout/Tooltip/demo/basic.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
+/**
+ * Обычное использование Tooltip c 4-мя разными позициями и по-умолчанию включена видимость.
+ * @order 1
+ * @col 6
+ */
 export default _default;

package/ui/layout/Tooltip/demo/basic.js

@@ -25,17 +25,28 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var form_1 = require("../../../../ui/form");
 var Tooltip_1 = __importDefault(require("../Tooltip"));
+/**
+ * Обычное использование Tooltip c 4-мя разными позициями и по-умолчанию включена видимость.
+ * @order 1
+ * @col 6
+ */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
-        React.createElement(Tooltip_1["default"], { position: 'left', content: '\u0412\u0441\u043F\u043B\u044B\u0432\u0430\u044E\u0449\u0430\u044F \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430.' },
-            React.createElement("div", { className: 'mx-3', style: { width: 'max-content' } },
-                React.createElement(form_1.Button, { label: 'Show Tooltip Left' }))),
-        React.createElement(Tooltip_1["default"], { defaultVisible: true, position: 'top', content: '\u0412\u0441\u043F\u043B\u044B\u0432\u0430\u044E\u0449\u0430\u044F \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430.' },
+    React.createElement("div", { style: {
+            display: 'flex',
+            flexFlow: 'column',
+            alignItems: 'center',
+            gridGap: '15px',
+            padding: '50px'
+        } },
+        React.createElement(Tooltip_1["default"], { defaultVisible: true, position: 'top', content: '\u0412\u0441\u043F\u043B\u044B\u0432\u0430\u044E\u0449\u0430\u044F \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430 \u0441\u0432\u0435\u0440\u0445\u0443.' },
             React.createElement("div", { className: 'mx-3', style: { width: 'max-content' } },
                 React.createElement(form_1.Button, { className: 'mx-3', label: 'Show Tooltip on Top' }))),
-        React.createElement(Tooltip_1["default"], { defaultVisible: true, position: 'bottom', content: '\u0412\u0441\u043F\u043B\u044B\u0432\u0430\u044E\u0449\u0430\u044F \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430.' },
+        React.createElement(Tooltip_1["default"], { defaultVisible: true, position: 'right', content: '\u0412\u0441\u043F\u043B\u044B\u0432\u0430\u044E\u0449\u0430\u044F \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430 \u0441\u043F\u0440\u0430\u0432\u0430.' },
             React.createElement("div", { className: 'mx-3', style: { width: 'max-content' } },
-                React.createElement(form_1.Button, { label: 'Show Tooltip Bottom' }))),
-        React.createElement(Tooltip_1["default"], { position: 'right', content: '\u0412\u0441\u043F\u043B\u044B\u0432\u0430\u044E\u0449\u0430\u044F \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430.' },
+                React.createElement(form_1.Button, { className: 'mx-3', label: 'Show Tooltip Right' }))),
+        React.createElement(Tooltip_1["default"], { defaultVisible: true, position: 'left', content: '\u0412\u0441\u043F\u043B\u044B\u0432\u0430\u044E\u0449\u0430\u044F \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430 \u0441\u043B\u0435\u0432\u0430.' },
+            React.createElement("div", { className: 'mx-3', style: { width: 'max-content' } },
+                React.createElement(form_1.Button, { label: 'Show Tooltip Left' }))),
+        React.createElement(Tooltip_1["default"], { defaultVisible: true, position: 'bottom', content: '\u0412\u0441\u043F\u043B\u044B\u0432\u0430\u044E\u0449\u0430\u044F \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430 \u0441\u043D\u0438\u0437\u0443.' },
             React.createElement("div", { className: 'mx-3', style: { width: 'max-content' } },
-                React.createElement(form_1.Button, { className: 'mx-3', label: 'Show Tooltip Right' })))))); });
+                React.createElement(form_1.Button, { label: 'Show Tooltip Bottom' })))))); });

package/ui/list/Grid/Grid.js

@@ -62,7 +62,9 @@ function Grid(props) {
         query: props.query,
         model: props.model,
         searchModel: props.searchModel,
-        items: props.items
+        items: props.items,
+        initialItems: props.initialItems,
+        initialTotal: props.initialTotal
     }), 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 = react_1.useCallback(function (column) {
         if (column.headerView) {

package/ui/list/Grid/demo/inner-search-form.d.ts

@@ -4,12 +4,7 @@ export declare const searchForm: {
     fields: {
         label: string;
         attribute: string;
-        component: {
-            (props: import("../../../form/Field/fieldWrapper").IFieldWrapperInputProps): JSX.Element;
-            WrappedComponent: any;
-            displayName: any;
-            defaultProps: any;
-        };
+        component: import("../../../form/Field/fieldWrapper").FieldWrapperComponent<import("../../../form/InputField/InputField").IInputFieldProps>;
     }[];
 };
 declare const _default: () => JSX.Element;

package/ui/list/LayoutNames/LayoutNames.js

@@ -43,17 +43,18 @@ var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
 function LayoutNames(props) {
     var components = hooks_1.useComponents();
     var dispatch = useDispatch_1["default"]();
+    var list = props.list || {};
     var onChange = react_1.useCallback(function (value) {
         components.clientStorage.set(props.attribute, value);
-        dispatch(list_1.listSetLayout(props.list.listId, value));
-    }, [components.clientStorage, dispatch, props.attribute, props.list.listId]);
+        dispatch(list_1.listSetLayout(list.listId, value));
+    }, [components.clientStorage, dispatch, list.listId, props.attribute]);
     if (props.enable === false) {
         return null;
     }
     var defaultComponent = require('../../nav/Nav')["default"];
     return components.ui.renderView(props.view || defaultComponent, {
         items: props.items,
-        activeTab: props.list.layoutName || null,
+        activeTab: list.layoutName || null,
         onChange: onChange
     }, true);
 }

package/ui/list/List/List.js

@@ -57,14 +57,12 @@ function List(props) {
         query: props.query,
         model: props.model,
         searchModel: props.searchModel,
-        items: props.items
+        items: props.items,
+        initialItems: props.initialItems,
+        initialTotal: props.initialTotal
     }), 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;
-    // Wait initialization
-    if (!list) {
-        return null;
-    }
     var ItemView = props.itemView || components.ui.getView('list.ListItemView');
-    var content = (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 }))); });
+    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,

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

@@ -30,9 +30,9 @@ export interface IPaginationSizeProps {
      */
     className?: CssClassName;
     /**
-     * Размер
+     * Значение по-умолчанию
      */
-    size?: Size;
+    defaultValue?: number;
     /**
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView

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

@@ -0,0 +1,32 @@
+import React from "react";
+interface IStepsProps {
+    stepItems: IStepItem[];
+    currentStep: number;
+    isChangeable?: boolean;
+    className?: string;
+    onChange?: (index: number) => void;
+}
+export interface IStepsViewProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface IStepItemViewProps {
+    stepItem: IStepItem;
+    className?: string;
+    index: number;
+    status: string;
+    disabled: boolean;
+    onChange: () => void;
+}
+export interface IStepItem {
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    icon?: string | React.ReactNode;
+    isError?: boolean;
+}
+declare function Steps(props: IStepsProps): JSX.Element;
+declare namespace Steps {
+    var defaultProps: {};
+}
+export default Steps;

package/ui/list/Steps/Steps.js

@@ -0,0 +1,23 @@
+"use strict";
+exports.__esModule = true;
+var hooks_1 = require("../../../hooks");
+var react_1 = require("react");
+function Steps(props) {
+    var _a = react_1.useState(false), isChangeable = _a[0], setIsChangeable = _a[1];
+    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';
+        return 'finish';
+    }
+    return hooks_1.useComponents().ui.renderView("list.StepsView", { className: props.className, children: props.stepItems.map(function (stepItem, index) {
+            return 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); } });
+        }) });
+}
+Steps.defaultProps = {};
+exports["default"] = Steps;

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

@@ -0,0 +1,2 @@
+import Steps from "./Steps";
+export default Steps;

package/ui/list/Steps/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Steps_1 = __importDefault(require("./Steps"));
+exports["default"] = Steps_1["default"];

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
  */