@steroidsjs/core 3.0.3 → 3.0.5

package/components/MetaComponent.d.ts

@@ -157,6 +157,7 @@ export default class MetaComponent implements IMetaComponent {
         time: {
             jsType: string;
             field: string;
+            formatter: string;
         };
     };
 }

package/components/MetaComponent.js

@@ -166,7 +166,8 @@ var MetaComponent = /** @class */ (function () {
             },
             time: {
                 jsType: 'string',
-                field: 'TimeField'
+                field: 'TimeField',
+                formatter: 'TimeFormatter'
             }
         };
     };

package/docs-autogen-result.json

@@ -15230,7 +15230,7 @@
                     "decorators": [],
                     "description": "",
                     "required": true,
-                    "type": "{color: string, id: string | number | boolean, isHovered: boolean, isSelected: boolean, label: string, required: boolean}[]",
+                    "type": "{color: string, id: string | number | boolean, isHovered: boolean, isSelected: boolean, label: string, required: boolean, size: string}[]",
                     "example": null
                 },
                 {
@@ -15423,6 +15423,15 @@
                     "example": "items",
                     "defaultValue": null
                 },
+                {
+                    "name": "hasOnlyLeafCheckboxes",
+                    "decorators": [],
+                    "description": "Отображать чекбоксы только на узлах, не имеющих вложенных элементов",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "hint",
                     "decorators": [],
@@ -15697,6 +15706,14 @@
                     "type": "string",
                     "example": null
                 },
+                {
+                    "name": "hasOnlyLeafCheckboxes",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
                 {
                     "name": "input",
                     "decorators": [],
@@ -20607,7 +20624,7 @@
                 {
                     "name": "size",
                     "decorators": [],
-                    "description": "Размер компонента",
+                    "description": "Размер компонента и вложенных полей",
                     "required": false,
                     "type": "string",
                     "example": null,
@@ -21601,7 +21618,7 @@
                 {
                     "name": "size",
                     "decorators": [],
-                    "description": "Размер компонента",
+                    "description": "Размер компонента и вложенных полей",
                     "required": false,
                     "type": "string",
                     "example": null
@@ -21618,7 +21635,8 @@
             "defaultProps": {
                 "actionMethod": "'POST'",
                 "autoStartTwoFactor": "true",
-                "captchaActionName": "'submit'"
+                "captchaActionName": "'submit'",
+                "size": "'md'"
             },
             "extends": [
                 "IUiComponent"
@@ -21759,6 +21777,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "size",
+                    "decorators": [],
+                    "description": "Размер компонента и вложенных полей",
+                    "required": false,
+                    "type": "string",
+                    "example": null,
+                    "defaultValue": "'md'"
+                },
                 {
                     "name": "style",
                     "decorators": [],
@@ -21768,6 +21795,15 @@
                     "example": "{width: '45%'}",
                     "defaultValue": null
                 },
+                {
+                    "name": "submitButtonProps",
+                    "decorators": [],
+                    "description": "Параметры для кнопки отправки формы",
+                    "required": false,
+                    "type": "IButtonProps",
+                    "example": "{\n    block: true,\n}",
+                    "defaultValue": null
+                },
                 {
                     "name": "submitErrorMessage",
                     "decorators": [],
@@ -22069,6 +22105,14 @@
                     "type": "any",
                     "example": null
                 },
+                {
+                    "name": "size",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "string",
+                    "example": null
+                },
                 {
                     "name": "style",
                     "decorators": [],
@@ -22077,6 +22121,14 @@
                     "type": "CSSProperties",
                     "example": null
                 },
+                {
+                    "name": "submitButtonProps",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "IButtonProps",
+                    "example": null
+                },
                 {
                     "name": "submitLabel",
                     "decorators": [],
@@ -26583,7 +26635,7 @@
                     "decorators": [],
                     "description": "",
                     "required": true,
-                    "type": "{disabled: boolean, id: string | number | boolean, isHovered: boolean, isSelected: boolean, label: string, required: boolean}[]",
+                    "type": "{disabled: boolean, id: string | number | boolean, isHovered: boolean, isSelected: boolean, label: string, required: boolean, size: string}[]",
                     "example": null
                 },
                 {
@@ -31095,6 +31147,45 @@
             ],
             "methods": []
         },
+        "ITimeFormatterProps": {
+            "name": "ITimeFormatterProps",
+            "moduleName": "ui/format/TimeFormatter/TimeFormatter",
+            "title": "TimeFormatter",
+            "description": "\nКомпонент TimeFormatter предназначен для форматирования времени с использованием заданного формата.\nОн позволяет кастомизировать отображение времени, используя переданный view React компонент.\n",
+            "tags": {},
+            "defaultProps": null,
+            "extends": [],
+            "properties": [
+                {
+                    "name": "format",
+                    "decorators": [],
+                    "description": "Формат времени",
+                    "required": false,
+                    "type": "string",
+                    "example": "HH:mm",
+                    "defaultValue": null
+                },
+                {
+                    "name": "value",
+                    "decorators": [],
+                    "description": "Время",
+                    "required": false,
+                    "type": "string",
+                    "example": "16:15",
+                    "defaultValue": null
+                },
+                {
+                    "name": "view",
+                    "decorators": [],
+                    "description": "Переопределение view React компонента для кастомизации отображения колонки",
+                    "required": false,
+                    "type": "React.ReactNode | {}",
+                    "example": "MyCustomView",
+                    "defaultValue": null
+                }
+            ],
+            "methods": []
+        },
         "IHeaderProps": {
             "name": "IHeaderProps",
             "moduleName": "ui/layout/Header/Header",
@@ -35927,6 +36018,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "size",
+                    "decorators": [],
+                    "description": "Размер компонента и вложенных полей",
+                    "required": false,
+                    "type": "string",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "style",
                     "decorators": [],
@@ -35936,6 +36036,15 @@
                     "example": "{width: '45%'}",
                     "defaultValue": null
                 },
+                {
+                    "name": "submitButtonProps",
+                    "decorators": [],
+                    "description": "Параметры для кнопки отправки формы",
+                    "required": false,
+                    "type": "IButtonProps",
+                    "example": "{\n    block: true,\n}",
+                    "defaultValue": null
+                },
                 {
                     "name": "submitErrorMessage",
                     "decorators": [],
@@ -38826,6 +38935,14 @@
                     "required": false,
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
+                },
+                {
+                    "name": "withoutPointerOnLabel",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
                 }
             ],
             "methods": [
@@ -38872,6 +38989,15 @@
                             "example": null
                         }
                     ]
+                },
+                {
+                    "name": "onNestedItemClick",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "void",
+                    "example": null,
+                    "parameters": []
                 }
             ]
         },
@@ -43045,6 +43171,13 @@
             "description": "",
             "tags": {}
         },
+        "ui/format/TimeFormatter/TimeFormatter": {
+            "name": "default",
+            "moduleName": "ui/format/TimeFormatter/TimeFormatter",
+            "title": "",
+            "description": "",
+            "tags": {}
+        },
         "ui/layout/Header/Header": {
             "name": "default",
             "moduleName": "ui/layout/Header/Header",

package/en.json

@@ -955,21 +955,17 @@
     "Будет ли отображён item?": "",
     "Устанавливать ли фокус и показывать панель времени сразу после рендера страницы": "",
     "Флаг, определяющий раскрывать вложенные элементы по клику на весь элемент или только на иконку": "",
-    "\nКомпонент `Kanban` позволяет создать доску для управления задачами.\nКоличество столбцов задается с помощью пропа `columns`.\nЗадачи на доске можно создавать, редактировать и перемещать с визуальным отображением.\n\nДля работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`\nи передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`\nкомпоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.\n\nДля корректной работы функционала создания задач,\nнеобходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nИмпортированные компоненты нужно передать в проп `createTaskEditorConfig`,\nв поле `htmlComponent` передать `CKEditor`, а в `editorConstructor` передать `ClassicEditor`.\n": "",
-    "Компонент для создания HTML-разметки, использующий WYSIWYG редактор.\n\nДля использования WYSIWYG редактора, необходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nКомпонент `CKEditor` нужно передать в проп `htmlComponent`, а конструктор `ClassicEditor` в проп `editorConstructor`.\n\nПри передаче `HtmlField` с бэкенда, необходимо переопределить `view` компонента, указав локальный.\nВ локальном компоненте добавить вместо пропсов `htmlComponent` и `editorConstructor` импорты `CKEditor` и `ClassicEditor` соотвественно.\n": "",
     "\nКомпонент для создания пошаговой формы. Предоставляет управление и синхронизацию состояния формы,\nа также список шагов формы для удобной навигации.\nПоля для шагов можно передавать как в виде компонентов, так и в виде объекта с названием поля.\nПозволяет выполнять отправку данных формы на сервер с возможностью валидации и перехода к неверно заполненным полям.\n\n": "",
+    "\nКомпонент TimeFormatter предназначен для форматирования времени с использованием заданного формата.\nОн позволяет кастомизировать отображение времени, используя переданный view React компонент.\n": "",
     "При повторном нажатии на выбранный элемент из дерева, он продолжит отображаться как активный.": "",
     "Дополнительные свойства, которые передаются во view компонента": "",
     "Пропсы для инпута загрузки файлов": "",
     "Переопределение view React компонента для кастомизации отображения элемента инпута": "",
     "Кастомный placeholder для инпута": "",
-    "Компоненты для подключения wysiwyg редактора": "",
     "Если true, то location.pathname будет совпадать с теми путями, которые содержат слеш в конце.\nНапример, если указать путь '/catalog/', тогда совпадение будет с '/catalog/' и '/catalog/chapter', но не '/catalog'.": "",
     "Кастомная иконка, заменяющая иконку раскрытия по умолчанию": "",
     "Опции маски для полей": "",
     "Дополнительные кнопки": "",
-    "Конструктор редактора 'ckeditor5-react' из библиотеки @steroidsjs/ckeditor5/packages/ckeditor5-build-classic\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
-    "Компонент редактора 'ckeditor5-react' из библиотеки @ckeditor\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
     "Свойства для Form": "",
     "Свойства для кнопки продолжить/отправить": "",
     "Свойства для кнопки возврата": "",
@@ -977,7 +973,17 @@
     "Ориентация списка шагов формы": "",
     "Коллекция полей и аттрибутов для каждого шага формы. Можно передавать как компонент, так и объект с полями.\nГлавное, чтобы внутри шага использовался один из способов.": "",
     "Свойства для Steps": "",
-    "CSS-класс для элемента навигации.": "",
+    "Формат времени": "",
+    "Время": "",
     "Флаг, который позволяет использовать вложенные роуты c указанием вложенного пути": "",
-    "Скрыть иконку c лева от элемента": ""
+    "Скрыть иконку c лева от элемента": "",
+    "\nКомпонент `Kanban` позволяет создать доску для управления задачами.\nКоличество столбцов задается с помощью пропа `columns`.\nЗадачи на доске можно создавать, редактировать и перемещать с визуальным отображением.\n\nДля работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`\nи передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`\nкомпоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.\n\nДля корректной работы функционала создания задач,\nнеобходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nИмпортированные компоненты нужно передать в проп `createTaskEditorConfig`,\nв поле `htmlComponent` передать `CKEditor`, а в `editorConstructor` передать `ClassicEditor`.\n": "",
+    "Компонент для создания HTML-разметки, использующий WYSIWYG редактор.\n\nДля использования WYSIWYG редактора, необходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nКомпонент `CKEditor` нужно передать в проп `htmlComponent`, а конструктор `ClassicEditor` в проп `editorConstructor`.\n\nПри передаче `HtmlField` с бэкенда, необходимо переопределить `view` компонента, указав локальный.\nВ локальном компоненте добавить вместо пропсов `htmlComponent` и `editorConstructor` импорты `CKEditor` и `ClassicEditor` соотвественно.\n": "",
+    "Компоненты для подключения wysiwyg редактора": "",
+    "Отображать чекбоксы только на узлах, не имеющих вложенных элементов": "",
+    "Размер компонента и вложенных полей": "",
+    "Параметры для кнопки отправки формы": "",
+    "Конструктор редактора 'ckeditor5-react' из библиотеки @steroidsjs/ckeditor5/packages/ckeditor5-build-classic\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
+    "Компонент редактора 'ckeditor5-react' из библиотеки @ckeditor\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
+    "CSS-класс для элемента навигации.": ""
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/core",
-    "version": "3.0.3",
+    "version": "3.0.5",
     "description": "",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
     "repository": {

package/ui/form/AutoCompleteField/AutoCompleteField.js

@@ -120,7 +120,6 @@ AutoCompleteField.defaultProps = {
     autoComplete: true,
     multiple: false,
     disabled: false,
-    required: false,
-    size: 'md'
+    required: false
 };
 exports["default"] = (0, fieldWrapper_1["default"])('AutoCompleteField', AutoCompleteField);

package/ui/form/CheckboxField/CheckboxField.js

@@ -70,7 +70,6 @@ CheckboxField.defaultProps = {
     disabled: false,
     required: false,
     className: '',
-    size: 'md',
     inputProps: {}
 };
 exports["default"] = (0, fieldWrapper_1["default"])('CheckboxField', CheckboxField, { label: false });

package/ui/form/CheckboxListField/CheckboxListField.d.ts

@@ -64,6 +64,7 @@ export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps {
         isHovered: boolean;
         color?: string;
         required?: boolean;
+        size?: Size;
     }[];
     selectedIds: (PrimaryKey | any)[];
     onItemSelect: (id: PrimaryKey | any) => void;

package/ui/form/CheckboxTreeField/CheckboxTreeField.d.ts

@@ -46,6 +46,10 @@ export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<I
      * Первичный ключ для доступа к вложенным элементам
      */
     primaryKey?: string;
+    /**
+     * Отображать чекбоксы только на узлах, не имеющих вложенных элементов
+     */
+    hasOnlyLeafCheckboxes?: boolean;
     [key: string]: any;
 }
 export interface ICheckboxTreeFieldViewProps extends IFieldWrapperOutputProps, Pick<ITreeProps, 'levelPadding' | 'customIcon'> {
@@ -61,6 +65,7 @@ export interface ICheckboxTreeFieldViewProps extends IFieldWrapperOutputProps, P
     onItemSelect: (checkbox: IPreparedTreeItem) => void;
     renderCheckbox: (checkboxProps: ICheckboxFieldViewProps) => JSX.Element;
     size?: Size;
+    hasOnlyLeafCheckboxes?: boolean;
 }
 export declare const getNestedItemsIds: (item: any, groupAttribute: any) => any[];
 declare const _default: import("../../../ui/form/Field/fieldWrapper").FieldWrapperComponent<ICheckboxTreeFieldProps>;

package/ui/form/CheckboxTreeField/CheckboxTreeField.js

@@ -41,6 +41,7 @@ exports.getNestedItemsIds = void 0;
 var react_1 = __importStar(require("react"));
 var react_use_1 = require("react-use");
 var isArray_1 = __importDefault(require("lodash-es/isArray"));
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
 var getNestedItemsIds = function (item, groupAttribute) {
@@ -68,7 +69,9 @@ function CheckboxTreeField(props) {
     var inputSelectedIds = (0, react_1.useMemo)(function () { return props.selectedIds || [].concat(props.input.value || []); }, [props.input.value, props.selectedIds]);
     // Data Provider
     var items = (0, hooks_1.useDataProvider)({
-        items: props.items
+        items: props.items,
+        initialSelectedIds: inputSelectedIds,
+        dataProvider: props.dataProvider
     }).items;
     // Tree items
     var treeItems = (0, hooks_1.useTree)({
@@ -85,24 +88,27 @@ function CheckboxTreeField(props) {
         inputValue: props.input.value
     }), selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
     var onItemSelect = (0, react_1.useCallback)(function (checkbox) {
-        if (checkbox.hasItems) {
+        if (checkbox.hasItems && !props.hasOnlyLeafCheckboxes) {
             var selectedItemIds = (0, exports.getNestedItemsIds)(checkbox, props.primaryKey);
             setSelectedIds(selectedItemIds);
         }
-        else {
+        else if (checkbox.id && !checkbox.hasItems) {
             setSelectedIds(checkbox.id);
         }
-    }, [props.primaryKey, setSelectedIds]);
-    // Sync with form
-    (0, react_1.useEffect)(function () {
-        props.input.onChange.call(null, selectedIds);
-        if (props.onChange) {
-            props.onChange(selectedIds);
-        }
-    }, [props, props.input.onChange, selectedIds]);
+    }, [props.hasOnlyLeafCheckboxes, props.primaryKey, setSelectedIds]);
     var onReset = (0, react_1.useCallback)(function () {
         setSelectedIds([]);
     }, [setSelectedIds]);
+    // Sync with form
+    var prevSelectedIds = (0, react_use_1.usePrevious)(selectedIds);
+    (0, react_1.useEffect)(function () {
+        if (!(0, isEqual_1["default"])(prevSelectedIds || [], selectedIds)) {
+            props.input.onChange.call(null, selectedIds);
+            if (props.onChange) {
+                props.onChange.call(null, selectedIds);
+            }
+        }
+    }, [prevSelectedIds, props.input.onChange, props.multiple, props.onChange, selectedIds]);
     // Reset selected ids on form reset
     var prevInputValue = (0, react_use_1.usePrevious)(props.input.value);
     (0, react_use_1.useUpdateEffect)(function () {
@@ -119,8 +125,9 @@ function CheckboxTreeField(props) {
         selectedIds: selectedIds,
         renderCheckbox: renderCheckbox,
         size: props.size,
-        levelPadding: props.levelPadding
-    }); }, [onItemSelect, props.levelPadding, props.size, renderCheckbox, selectedIds, treeItems]);
+        levelPadding: props.levelPadding,
+        hasOnlyLeafCheckboxes: props.hasOnlyLeafCheckboxes
+    }); }, [onItemSelect, props.levelPadding, props.hasOnlyLeafCheckboxes, props.size, renderCheckbox, selectedIds, treeItems]);
     return components.ui.renderView(props.view || 'form.CheckboxTreeFieldView', viewProps);
 }
 CheckboxTreeField.defaultProps = {
@@ -129,6 +136,7 @@ CheckboxTreeField.defaultProps = {
     className: '',
     levelPadding: 32,
     alwaysOpened: false,
-    primaryKey: 'items'
+    primaryKey: 'items',
+    hasOnlyLeafCheckboxes: false
 };
 exports["default"] = (0, fieldWrapper_1["default"])('CheckboxTreeField', CheckboxTreeField);

package/ui/form/DateField/DateField.js

@@ -54,7 +54,6 @@ DateField.defaultProps = {
     maskOptions: (0, kit_1.maskitoDateOptionsGenerator)({
         mode: 'dd/mm/yyyy',
         separator: '.'
-    }),
-    size: 'md'
+    })
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateField', DateField);

package/ui/form/DateRangeField/DateRangeField.js

@@ -132,7 +132,6 @@ DateRangeField.defaultProps = {
     showRemove: true,
     hasInitialFocus: false,
     icon: true,
-    size: 'md',
     maskOptions: {
         from: (0, kit_1.maskitoDateOptionsGenerator)({
             mode: 'dd/mm/yyyy',

package/ui/form/DateTimeField/DateTimeField.js

@@ -87,7 +87,6 @@ DateTimeField.defaultProps = {
     valueFormat: 'YYYY-MM-DD' + DATE_TIME_SEPARATOR + 'HH:mm',
     useUTC: false,
     dateInUTC: false,
-    size: 'md',
     icon: true,
     maskOptions: (0, kit_1.maskitoDateTimeOptionsGenerator)({
         dateMode: 'dd/mm/yyyy',

package/ui/form/DateTimeRangeField/DateTimeRangeField.js

@@ -173,7 +173,6 @@ DateTimeRangeField.defaultProps = {
     useUTC: false,
     dateInUTC: false,
     icon: true,
-    size: 'md',
     maskOptions: {
         from: (0, kit_1.maskitoDateTimeOptionsGenerator)({
             dateMode: 'dd/mm/yyyy',

package/ui/form/DropDownField/DropDownField.js

@@ -239,7 +239,6 @@ function DropDownField(props) {
 DropDownField.defaultProps = {
     primaryKey: 'id',
     outline: false,
-    size: 'md',
     color: 'basic',
     disabled: false,
     required: false,

package/ui/form/EmailField/EmailField.js

@@ -81,7 +81,6 @@ function EmailField(props) {
     return components.ui.renderView(props.view || 'form.InputFieldView', viewProps);
 }
 EmailField.defaultProps = {
-    size: 'md',
     disabled: false,
     required: false,
     showClear: false,

package/ui/form/Field/fieldWrapper.js

@@ -45,6 +45,7 @@ var form_1 = require("../../../utils/form");
 var Form_1 = require("../Form/Form");
 var FieldLayout_1 = __importDefault(require("../FieldLayout/FieldLayout"));
 var hooks_1 = require("../../../hooks");
+var DEFAULT_SIZE = 'md';
 var getKey = function (baseName, attribute) { return baseName + (0, upperFirst_1["default"])(attribute || ''); };
 var createDynamicField = function (componentId, Component, options) {
     var DynamicField = function (props) {
@@ -132,9 +133,10 @@ function fieldWrapper(componentId, Component, optionsConfig) {
         var uniqueId = (0, hooks_1.useUniqueId)('input');
         var inputId = props.id || uniqueId;
         if (props.isRenderWithoutFieldLayout) {
-            return components.ui.renderView(Component.DynamicField, props);
+            return components.ui.renderView(Component.DynamicField, __assign(__assign({}, props), { size: props.size || DEFAULT_SIZE }));
         }
-        return components.ui.renderView(FieldLayout_1["default"], __assign(__assign({}, attributesProps), { className: props.fieldLayoutClassName, size: props.size || context.size || null, required: (0, has_1["default"])(props, 'required') ? props.required : metaProps.required, label: options.label === false ? null : ((0, has_1["default"])(props, 'label') ? props.label : metaProps.label), hint: (0, has_1["default"])(props, 'hint') ? props.hint : metaProps.hint, errors: props.errors, id: inputId, children: (React.createElement(Component.DynamicField, __assign({}, props, { id: inputId }))) }));
+        var size = props.size || context.size || DEFAULT_SIZE;
+        return components.ui.renderView(FieldLayout_1["default"], __assign(__assign({}, attributesProps), { size: size, className: props.fieldLayoutClassName, required: (0, has_1["default"])(props, 'required') ? props.required : metaProps.required, label: options.label === false ? null : ((0, has_1["default"])(props, 'label') ? props.label : metaProps.label), hint: (0, has_1["default"])(props, 'hint') ? props.hint : metaProps.hint, errors: props.errors, id: inputId, children: (React.createElement(Component.DynamicField, __assign({}, props, { id: inputId, size: size }))) }));
     };
     NewComponent.WrappedComponent = Component;
     NewComponent.displayName = componentId;

package/ui/form/Form/Form.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IButtonProps } from '@steroidsjs/core/ui/form/Button/Button';
 import { IAddressBarConfig } from '../../../hooks/useAddressBar';
 import { IFieldProps } from '../Field/Field';
 /**
@@ -128,6 +129,13 @@ export interface IFormProps extends IUiComponent {
      * @example Submit
      */
     submitLabel?: string;
+    /**
+     * Параметры для кнопки отправки формы
+     * @example {
+     *     block: true,
+     * }
+     */
+    submitButtonProps?: IButtonProps;
     /**
      * Синхронизация значений формы с адресной строкой
      * @example true
@@ -153,6 +161,10 @@ export interface IFormProps extends IUiComponent {
      * Дополнительные кнопки
      */
     buttons?: React.ReactNode;
+    /**
+     * Размер компонента и вложенных полей
+     */
+    size?: Size;
     [key: string]: any;
 }
 export interface IFormViewProps {
@@ -164,6 +176,8 @@ export interface IFormViewProps {
     style?: CustomStyle;
     children?: React.ReactNode;
     buttons?: React.ReactNode;
+    submitButtonProps?: IButtonProps;
+    size?: Size;
 }
 export interface IFormReducerState {
     values: any;
@@ -187,7 +201,7 @@ export interface IFormContext {
     */
     prefix?: string | boolean;
     /**
-    * Размер компонента
+    * Размер компонента и вложенных полей
     */
     size?: Size;
     /**
@@ -213,6 +227,7 @@ declare namespace Form {
         actionMethod: string;
         autoStartTwoFactor: boolean;
         captchaActionName: string;
+        size: string;
     };
 }
 export default Form;

package/ui/form/Form/Form.js

@@ -321,8 +321,8 @@ function Form(props) {
         reducer: reducer,
         dispatch: dispatch
     }); }, [dispatch, props.formId, props.model, props.prefix, props.size, provider, reducer]);
-    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { isSubmitting: isSubmitting, onSubmit: onSubmit, submitLabel: props.submitLabel, fields: props.fields, children: props.children, className: props.className, style: props.style, autoFocus: props.autoFocus, buttons: props.buttons })); }, [isSubmitting, onSubmit, props.autoFocus, props.buttons, props.children, props.className, props.fields, props.style,
-        props.submitLabel, props.viewProps]);
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { isSubmitting: isSubmitting, onSubmit: onSubmit, submitLabel: props.submitLabel, submitButtonProps: props.submitButtonProps, fields: props.fields, children: props.children, className: props.className, style: props.style, autoFocus: props.autoFocus, buttons: props.buttons, size: props.size })); }, [isSubmitting, onSubmit, props.autoFocus, props.buttons, props.children, props.className, props.fields,
+        props.size, props.style, props.submitButtonProps, props.submitLabel, props.viewProps]);
     // Wait initialization (only for redux)
     if (values === undefined) {
         return null;
@@ -335,6 +335,7 @@ function Form(props) {
 Form.defaultProps = {
     actionMethod: 'POST',
     autoStartTwoFactor: true,
-    captchaActionName: 'submit'
+    captchaActionName: 'submit',
+    size: 'md'
 };
 exports["default"] = Form;

package/ui/form/ImageField/ImageField.js

@@ -50,10 +50,11 @@ var useFile_1 = __importDefault(require("../../../hooks/useFile"));
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var modal_1 = require("../../../actions/modal");
 function ImageField(props) {
+    var _a;
     var components = (0, hooks_1.useComponents)();
     var dispatch = (0, useDispatch_1["default"])();
     // Add cropping option
-    var _a = (0, react_1.useState)(null), croppedImage = _a[0], setCroppedImage = _a[1];
+    var _b = (0, react_1.useState)(null), croppedImage = _b[0], setCroppedImage = _b[1];
     var modalId = (0, react_1.useMemo)(function () { var _a; return ((_a = props.modalProps) === null || _a === void 0 ? void 0 : _a.modalId) || (0, uniqueId_1["default"])('cropModal'); }, [props.modalProps.modalId]);
     var ImageFieldModalVIew = props.modalView || components.ui.getView('form.ImageFieldModalView');
     var responseParser = (0, react_1.useCallback)(function (text) {
@@ -66,11 +67,11 @@ function ImageField(props) {
         catch (e) { }
         return data;
     }, [ImageFieldModalVIew, modalId, dispatch, props.crop, props.modalProps]);
-    var _b = (0, useFile_1["default"])(__assign(__assign({}, props), { multiple: false, imagesOnly: true, uploader: __assign({ uploaderConfigs: {
+    var _c = (0, useFile_1["default"])(__assign(__assign({}, props), { multiple: false, imagesOnly: true, uploader: __assign({ uploaderConfigs: {
                 xhr: {
                     responseParser: props.crop ? responseParser : null
                 }
-            } }, props.uploader) })), files = _b.files, onBrowse = _b.onBrowse, onRemove = _b.onRemove, onAdd = _b.onAdd;
+            } }, props.uploader) })), files = _c.files, onBrowse = _c.onBrowse, onRemove = _c.onRemove, onAdd = _c.onAdd;
     var oldCroppedImage = (0, react_use_1.usePrevious)(croppedImage);
     // Fetch cropped image
     (0, react_1.useEffect)(function () {
@@ -88,7 +89,7 @@ function ImageField(props) {
                 props.input.onChange(res.id);
             });
         }
-    }, [components.http, croppedImage, onAdd, onRemove, props.crop.backendUrl, props.input, oldCroppedImage]);
+    }, [components.http, croppedImage, onAdd, onRemove, (_a = props.crop) === null || _a === void 0 ? void 0 : _a.backendUrl, props.input, oldCroppedImage]);
     var ImageFieldView = props.view || components.ui.getView('form.ImageFieldView');
     var item = (0, react_1.useMemo)(function () {
         var result = null;

package/ui/form/InputField/InputField.js

@@ -133,7 +133,6 @@ function InputField(props) {
 }
 InputField.defaultProps = {
     type: 'text',
-    size: 'md',
     disabled: false,
     required: false,
     showClear: false,

package/ui/form/NumberField/NumberField.js

@@ -95,7 +95,6 @@ function NumberField(props) {
 }
 NumberField.defaultProps = {
     disabled: false,
-    required: false,
-    size: 'md'
+    required: false
 };
 exports["default"] = (0, fieldWrapper_1["default"])('NumberField', NumberField);

package/ui/form/PasswordField/PasswordField.js

@@ -83,7 +83,6 @@ PasswordField.defaultProps = {
     disabled: false,
     showSecurityBar: false,
     showSecurityIcon: true,
-    required: false,
-    size: 'md'
+    required: false
 };
 exports["default"] = (0, fieldWrapper_1["default"])('PasswordField', PasswordField);

package/ui/form/RadioField/RadioField.js

@@ -66,7 +66,6 @@ RadioField.defaultProps = {
     disabled: false,
     required: false,
     className: '',
-    size: 'md',
     inputProps: {}
 };
 exports["default"] = (0, fieldWrapper_1["default"])('RadioField', RadioField);

package/ui/form/RadioListField/RadioListField.d.ts

@@ -32,6 +32,7 @@ export interface IRadioListFieldViewProps extends IFieldWrapperOutputProps {
         isSelected: boolean;
         isHovered: boolean;
         required?: boolean;
+        size?: Size;
     }[];
     selectedIds: (PrimaryKey | any)[];
     className?: CssClassName;

package/ui/form/RadioListField/RadioListField.js

@@ -94,7 +94,6 @@ RadioListField.defaultProps = {
     className: '',
     multiple: true,
     errors: null,
-    size: 'md',
     orientation: 'vertical'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('RadioListField', RadioListField);

package/ui/form/RateField/RateField.js

@@ -57,7 +57,6 @@ function RateField(props) {
 RateField.defaultProps = {
     allowClear: false,
     itemsCount: 5,
-    disabled: false,
-    size: 'md'
+    disabled: false
 };
 exports["default"] = (0, fieldWrapper_1["default"])('RateField', RateField);

package/ui/form/SwitcherField/SwitcherField.js

@@ -93,7 +93,6 @@ SwitcherField.defaultProps = {
     disabled: false,
     required: false,
     className: '',
-    errors: null,
-    size: 'md'
+    errors: null
 };
 exports["default"] = (0, fieldWrapper_1["default"])('SwitcherField', SwitcherField);

package/ui/form/TimeField/TimeField.js

@@ -45,9 +45,8 @@ TimeField.defaultProps = {
     showRemove: true,
     type: 'text',
     valueFormat: 'HH:mm',
-    useUTC: true,
+    useUTC: false,
     dateInUTC: false,
-    size: 'md',
     icon: true
 };
 exports["default"] = (0, fieldWrapper_1["default"])('TimeField', TimeField);

package/ui/form/TimeRangeField/TimeRangeField.js

@@ -40,7 +40,9 @@ function TimeRangeField(props) {
         inputProps: props.inputPropsFrom,
         placeholder: props.placeholder,
         valueFormat: props.valueFormat,
-        displayFormat: props.displayFormat
+        displayFormat: props.displayFormat,
+        useUTC: props.useUTC,
+        dateInUTC: props.dateInUTC
     }), onNowFrom = _a.onNow, onCloseFrom = _a.onClose, inputPropsFrom = _a.inputProps, onClearFrom = _a.onClear, isOpenedFrom = _a.isOpened;
     // Input 'to'
     var _b = (0, useDateInputState_1["default"])({
@@ -51,7 +53,9 @@ function TimeRangeField(props) {
         inputProps: props.inputPropsTo,
         placeholder: props.placeholder,
         valueFormat: props.valueFormat,
-        displayFormat: props.displayFormat
+        displayFormat: props.displayFormat,
+        useUTC: props.useUTC,
+        dateInUTC: props.dateInUTC
     }), onNowTo = _b.onNow, onCloseTo = _b.onClose, inputPropsTo = _b.inputProps, onClearTo = _b.onClear, isOpenedTo = _b.isOpened;
     var _c = (0, useDateRange_1["default"])({
         onClearFrom: onClearFrom,
@@ -80,9 +84,8 @@ TimeRangeField.defaultProps = {
     hasInitialFocus: false,
     type: 'text',
     valueFormat: 'HH:mm',
-    useUTC: true,
+    useUTC: false,
     dateInUTC: false,
-    size: 'md',
     icon: true
 };
 exports["default"] = (0, fieldWrapper_1["default"])('TimeRangeField', TimeRangeField, {

package/ui/form/index.d.ts

@@ -10,6 +10,7 @@ import DateRangeField from './DateRangeField';
 import DateTimeField from './DateTimeField';
 import DateTimeRangeField from './DateTimeRangeField';
 import DropDownField from './DropDownField';
+import EmailField from './EmailField';
 import Field from './Field';
 import FieldLayout from './FieldLayout';
 import FieldList from './FieldList';
@@ -17,21 +18,23 @@ import FieldSet from './FieldSet';
 import FileField from './FileField';
 import Form from './Form';
 import HtmlField from './HtmlField';
+import ImageField from './ImageField';
 import InputField from './InputField';
+import MaskField from './MaskField';
 import NavField from './NavField';
 import NumberField from './NumberField';
 import PasswordField from './PasswordField';
 import RadioField from './RadioField';
 import RadioListField from './RadioListField';
+import RateField from './RateField';
 import ReCaptchaField from './ReCaptchaField';
 import SliderField from './SliderField';
 import SwitcherField from './SwitcherField';
 import TextField from './TextField';
 import TimeField from './TimeField';
-import RateField from './RateField';
-import MaskField from './MaskField';
-import EmailField from './EmailField';
-export { AutoCompleteField, BlankField, Button, CheckboxField, CheckboxListField, CheckboxTreeField, DateField, DateRangeField, DateTimeField, DateTimeRangeField, DropDownField, Field, FieldLayout, FieldList, FieldSet, FileField, Form, HtmlField, InputField, NavField, NumberField, PasswordField, RadioField, RadioListField, ReCaptchaField, SliderField, SwitcherField, TextField, TimeField, RateField, MaskField, EmailField, };
+import TimeRangeField from './TimeRangeField';
+import WizardForm from './WizardForm';
+export { AutoCompleteField, BlankField, Button, CheckboxField, CheckboxListField, CheckboxTreeField, DateField, DateRangeField, DateTimeField, DateTimeRangeField, DropDownField, Field, FieldLayout, FieldList, FieldSet, FileField, Form, HtmlField, ImageField, InputField, NavField, NumberField, PasswordField, RadioField, RadioListField, ReCaptchaField, SliderField, SwitcherField, TextField, TimeField, RateField, MaskField, EmailField, TimeRangeField, WizardForm, };
 declare const _default: {
     AutoCompleteField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./AutoCompleteField/AutoCompleteField").IAutoCompleteFieldProps>;
     BlankField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./BlankField/BlankField").IBlankFieldProps>;
@@ -51,6 +54,7 @@ declare const _default: {
     FileField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./FileField/FileField").IFileFieldProps>;
     Form: typeof Form;
     HtmlField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./HtmlField/HtmlField").IHtmlFieldProps>;
+    ImageField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./ImageField/ImageField").IImageFieldProps>;
     InputField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./InputField/InputField").IInputFieldProps>;
     NavField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./NavField/NavField").INavFieldProps>;
     NumberField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./NumberField/NumberField").INumberFieldProps>;
@@ -65,5 +69,7 @@ declare const _default: {
     RateField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./RateField/RateField").IRateFieldProps>;
     MaskField: typeof MaskField;
     EmailField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./EmailField/EmailField").IEmailFieldProps>;
+    TimeRangeField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./TimeRangeField/TimeRangeField").ITimeRangeFieldProps>;
+    WizardForm: typeof WizardForm;
 };
 export default _default;

package/ui/form/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.EmailField = exports.MaskField = exports.RateField = exports.TimeField = exports.TextField = exports.SwitcherField = exports.SliderField = exports.ReCaptchaField = exports.RadioListField = exports.RadioField = exports.PasswordField = exports.NumberField = exports.NavField = exports.InputField = exports.HtmlField = exports.Form = exports.FileField = exports.FieldSet = exports.FieldList = exports.FieldLayout = exports.Field = exports.DropDownField = exports.DateTimeRangeField = exports.DateTimeField = exports.DateRangeField = exports.DateField = exports.CheckboxTreeField = exports.CheckboxListField = exports.CheckboxField = exports.Button = exports.BlankField = exports.AutoCompleteField = void 0;
+exports.WizardForm = exports.TimeRangeField = exports.EmailField = exports.MaskField = exports.RateField = exports.TimeField = exports.TextField = exports.SwitcherField = exports.SliderField = exports.ReCaptchaField = exports.RadioListField = exports.RadioField = exports.PasswordField = exports.NumberField = exports.NavField = exports.InputField = exports.ImageField = exports.HtmlField = exports.Form = exports.FileField = exports.FieldSet = exports.FieldList = exports.FieldLayout = exports.Field = exports.DropDownField = exports.DateTimeRangeField = exports.DateTimeField = exports.DateRangeField = exports.DateField = exports.CheckboxTreeField = exports.CheckboxListField = exports.CheckboxField = exports.Button = exports.BlankField = exports.AutoCompleteField = void 0;
 var AutoCompleteField_1 = __importDefault(require("./AutoCompleteField"));
 exports.AutoCompleteField = AutoCompleteField_1["default"];
 var BlankField_1 = __importDefault(require("./BlankField"));
@@ -26,6 +26,8 @@ var DateTimeRangeField_1 = __importDefault(require("./DateTimeRangeField"));
 exports.DateTimeRangeField = DateTimeRangeField_1["default"];
 var DropDownField_1 = __importDefault(require("./DropDownField"));
 exports.DropDownField = DropDownField_1["default"];
+var EmailField_1 = __importDefault(require("./EmailField"));
+exports.EmailField = EmailField_1["default"];
 var Field_1 = __importDefault(require("./Field"));
 exports.Field = Field_1["default"];
 var FieldLayout_1 = __importDefault(require("./FieldLayout"));
@@ -40,8 +42,12 @@ var Form_1 = __importDefault(require("./Form"));
 exports.Form = Form_1["default"];
 var HtmlField_1 = __importDefault(require("./HtmlField"));
 exports.HtmlField = HtmlField_1["default"];
+var ImageField_1 = __importDefault(require("./ImageField"));
+exports.ImageField = ImageField_1["default"];
 var InputField_1 = __importDefault(require("./InputField"));
 exports.InputField = InputField_1["default"];
+var MaskField_1 = __importDefault(require("./MaskField"));
+exports.MaskField = MaskField_1["default"];
 var NavField_1 = __importDefault(require("./NavField"));
 exports.NavField = NavField_1["default"];
 var NumberField_1 = __importDefault(require("./NumberField"));
@@ -52,6 +58,8 @@ var RadioField_1 = __importDefault(require("./RadioField"));
 exports.RadioField = RadioField_1["default"];
 var RadioListField_1 = __importDefault(require("./RadioListField"));
 exports.RadioListField = RadioListField_1["default"];
+var RateField_1 = __importDefault(require("./RateField"));
+exports.RateField = RateField_1["default"];
 var ReCaptchaField_1 = __importDefault(require("./ReCaptchaField"));
 exports.ReCaptchaField = ReCaptchaField_1["default"];
 var SliderField_1 = __importDefault(require("./SliderField"));
@@ -62,12 +70,10 @@ var TextField_1 = __importDefault(require("./TextField"));
 exports.TextField = TextField_1["default"];
 var TimeField_1 = __importDefault(require("./TimeField"));
 exports.TimeField = TimeField_1["default"];
-var RateField_1 = __importDefault(require("./RateField"));
-exports.RateField = RateField_1["default"];
-var MaskField_1 = __importDefault(require("./MaskField"));
-exports.MaskField = MaskField_1["default"];
-var EmailField_1 = __importDefault(require("./EmailField"));
-exports.EmailField = EmailField_1["default"];
+var TimeRangeField_1 = __importDefault(require("./TimeRangeField"));
+exports.TimeRangeField = TimeRangeField_1["default"];
+var WizardForm_1 = __importDefault(require("./WizardForm"));
+exports.WizardForm = WizardForm_1["default"];
 exports["default"] = {
     AutoCompleteField: AutoCompleteField_1["default"],
     BlankField: BlankField_1["default"],
@@ -87,6 +93,7 @@ exports["default"] = {
     FileField: FileField_1["default"],
     Form: Form_1["default"],
     HtmlField: HtmlField_1["default"],
+    ImageField: ImageField_1["default"],
     InputField: InputField_1["default"],
     NavField: NavField_1["default"],
     NumberField: NumberField_1["default"],
@@ -100,5 +107,7 @@ exports["default"] = {
     TimeField: TimeField_1["default"],
     RateField: RateField_1["default"],
     MaskField: MaskField_1["default"],
-    EmailField: EmailField_1["default"]
+    EmailField: EmailField_1["default"],
+    TimeRangeField: TimeRangeField_1["default"],
+    WizardForm: WizardForm_1["default"]
 };

package/ui/format/TimeFormatter/TimeFormatter.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+/**
+ * TimeFormatter
+ *
+ * Компонент TimeFormatter предназначен для форматирования времени с использованием заданного формата.
+ * Он позволяет кастомизировать отображение времени, используя переданный view React компонент.
+ **/
+export interface ITimeFormatterProps {
+    /**
+     * Формат времени
+     * @example HH:mm
+     */
+    format?: string;
+    /**
+     * Время
+     * @example 16:15
+     */
+    value?: string;
+    /**
+     * Переопределение view React компонента для кастомизации отображения колонки
+     * @example MyCustomView
+     */
+    view?: CustomView;
+    [key: string]: any;
+}
+export default function TimeFormatter(props: ITimeFormatterProps): JSX.Element;

package/ui/format/TimeFormatter/TimeFormatter.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var hooks_1 = require("@steroidsjs/core/hooks");
+var dayjs_1 = __importDefault(require("dayjs"));
+var defaultProps = {
+    format: 'HH:mm'
+};
+function TimeFormatter(props) {
+    var components = (0, hooks_1.useComponents)();
+    if (!props.value) {
+        return null;
+    }
+    var time = (0, dayjs_1["default"])(props.value).format(props.format || defaultProps.format);
+    return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
+        value: time
+    });
+}
+exports["default"] = TimeFormatter;

package/ui/format/TimeFormatter/index.d.ts

@@ -0,0 +1,2 @@
+import TimeFormatter from './TimeFormatter';
+export default TimeFormatter;

package/ui/format/TimeFormatter/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 TimeFormatter_1 = __importDefault(require("./TimeFormatter"));
+exports["default"] = TimeFormatter_1["default"];

package/ui/nav/Tree/Tree.d.ts

@@ -6,6 +6,8 @@ export interface ITreeViewProps extends ITreeProps {
 export interface ITreeItemViewProps extends ITreeProps {
     item: IPreparedTreeItem;
     children?: JSX.Element;
+    onNestedItemClick?: () => void;
+    withoutPointerOnLabel?: boolean;
 }
 /**
  * Tree