@steroidsjs/core 3.0.1 → 3.0.3

package/docs-autogen-result.json

@@ -2844,7 +2844,7 @@
                     "decorators": [],
                     "description": "",
                     "required": false,
-                    "type": "IRouterProps",
+                    "type": "Omit",
                     "example": null
                 },
                 {
@@ -10364,7 +10364,9 @@
             "tags": {},
             "defaultProps": null,
             "extends": [
-                "IModalProps"
+                "IModalProps",
+                "Pick<IKanbanConfig",
+                "'createTaskEditorConfig'>"
             ],
             "properties": [
                 {
@@ -10439,6 +10441,14 @@
                     "type": "any",
                     "example": null
                 },
+                {
+                    "name": "createTaskEditorConfig",
+                    "decorators": [],
+                    "description": "Компоненты для подключения wysiwyg редактора",
+                    "required": true,
+                    "type": "Pick",
+                    "example": "CKEditor"
+                },
                 {
                     "name": "formId",
                     "decorators": [],
@@ -10630,7 +10640,7 @@
             "name": "IKanbanProps",
             "moduleName": "ui/content/Kanban/Kanban",
             "title": "Kanban",
-            "description": "\nКомпонент `Kanban` позволяет создать доску для управления задачами.\nКоличество столбцов задается с помощью пропа `columns`.\nЗадачи на доске можно создавать, редактировать и перемещать с визуальным отображением.\n\nДля работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`\nи передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`\nкомпоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.\n",
+            "description": "\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",
             "tags": {},
             "defaultProps": null,
             "extends": [
@@ -10665,6 +10675,15 @@
                     "example": "[\n {\n  id: 1,\n  title: 'column 1',\n  tasks: [\n   {\n     content: 'item 1',\n     id: 1\n   }\n   ],\n },\n {\n  id: 2,\n  title: 'column 2',\n  tasks: [],\n }\n]",
                     "defaultValue": null
                 },
+                {
+                    "name": "createTaskEditorConfig",
+                    "decorators": [],
+                    "description": "Компоненты для подключения wysiwyg редактора",
+                    "required": true,
+                    "type": "Pick",
+                    "example": "CKEditor",
+                    "defaultValue": null
+                },
                 {
                     "name": "dndContext",
                     "decorators": [],
@@ -11278,6 +11297,14 @@
                     "type": "IKanbanColumn[]",
                     "example": "[\n {\n  id: 1,\n  title: 'column 1',\n  tasks: [\n   {\n     content: 'item 1',\n     id: 1\n   }\n   ],\n },\n {\n  id: 2,\n  title: 'column 2',\n  tasks: [],\n }\n]"
                 },
+                {
+                    "name": "createTaskEditorConfig",
+                    "decorators": [],
+                    "description": "Компоненты для подключения wysiwyg редактора",
+                    "required": true,
+                    "type": "Pick",
+                    "example": "CKEditor"
+                },
                 {
                     "name": "kanbanId",
                     "decorators": [],
@@ -13428,7 +13455,7 @@
                     "decorators": [],
                     "description": "",
                     "required": true,
-                    "type": "{className: string, disabled: boolean, name: string, placeholder: string, type: string, value: string | number, onBlur: null, onChange: null, onFocus: null}",
+                    "type": "{className: string, disabled: boolean, name: string, placeholder: string, type: string, value: string | number, onBlur: null, onChange: null}",
                     "example": null
                 },
                 {
@@ -15203,7 +15230,7 @@
                     "decorators": [],
                     "description": "",
                     "required": true,
-                    "type": "{color: string, id: string | number | boolean, isHovered: boolean, isSelected: boolean, label: string}[]",
+                    "type": "{color: string, id: string | number | boolean, isHovered: boolean, isSelected: boolean, label: string, required: boolean}[]",
                     "example": null
                 },
                 {
@@ -15285,7 +15312,7 @@
                 "'items'>",
                 "IUiComponent",
                 "Pick<ITreeProps",
-                "'levelPadding' | 'alwaysOpened' | 'showIcon' | 'customIcon'>"
+                "'levelPadding' | 'alwaysOpened' | 'customIcon'>"
             ],
             "properties": [
                 {
@@ -22065,7 +22092,7 @@
             "name": "IHtmlFieldProps",
             "moduleName": "ui/form/HtmlField/HtmlField",
             "title": "HtmlField",
-            "description": "Компонент для создания HTML-разметки, использующий WYSIWYG редактор",
+            "description": "Компонент для создания 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",
             "tags": {},
             "defaultProps": null,
             "extends": [
@@ -22119,6 +22146,15 @@
                     "example": "true",
                     "defaultValue": null
                 },
+                {
+                    "name": "editorConstructor",
+                    "decorators": [],
+                    "description": "Конструктор редактора 'ckeditor5-react' из библиотеки @steroidsjs/ckeditor5/packages/ckeditor5-build-classic\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан",
+                    "required": false,
+                    "type": "any",
+                    "example": "ClassicEditor",
+                    "defaultValue": null
+                },
                 {
                     "name": "editorProps",
                     "decorators": [],
@@ -22164,6 +22200,15 @@
                     "example": "'Only english letters'",
                     "defaultValue": null
                 },
+                {
+                    "name": "htmlComponent",
+                    "decorators": [],
+                    "description": "Компонент редактора 'ckeditor5-react' из библиотеки @ckeditor\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан",
+                    "required": false,
+                    "type": "any",
+                    "example": "CKEditor",
+                    "defaultValue": null
+                },
                 {
                     "name": "id",
                     "decorators": [],
@@ -22399,6 +22444,14 @@
                     "type": "boolean",
                     "example": "true"
                 },
+                {
+                    "name": "editorConstructor",
+                    "decorators": [],
+                    "description": "Конструктор редактора 'ckeditor5-react' из библиотеки @steroidsjs/ckeditor5/packages/ckeditor5-build-classic\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан",
+                    "required": false,
+                    "type": "any",
+                    "example": "ClassicEditor"
+                },
                 {
                     "name": "editorProps",
                     "decorators": [],
@@ -22439,6 +22492,14 @@
                     "type": "string",
                     "example": "'Only english letters'"
                 },
+                {
+                    "name": "htmlComponent",
+                    "decorators": [],
+                    "description": "Компонент редактора 'ckeditor5-react' из библиотеки @ckeditor\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан",
+                    "required": false,
+                    "type": "any",
+                    "example": "CKEditor"
+                },
                 {
                     "name": "id",
                     "decorators": [],
@@ -26522,7 +26583,7 @@
                     "decorators": [],
                     "description": "",
                     "required": true,
-                    "type": "{disabled: boolean, id: string | number | boolean, isHovered: boolean, isSelected: boolean, label: string}[]",
+                    "type": "{disabled: boolean, id: string | number | boolean, isHovered: boolean, isSelected: boolean, label: string, required: boolean}[]",
                     "example": null
                 },
                 {
@@ -38159,6 +38220,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "disabled",
+                    "decorators": [],
+                    "description": "Переводит кнопку в состояние \"не активна\"",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true",
+                    "defaultValue": null
+                },
                 {
                     "name": "items",
                     "decorators": [],
@@ -38177,6 +38247,15 @@
                     "example": "'link'",
                     "defaultValue": "'button'"
                 },
+                {
+                    "name": "navClassName",
+                    "decorators": [],
+                    "description": "CSS-класс для элемента навигации.",
+                    "required": false,
+                    "type": "string",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "size",
                     "decorators": [],
@@ -38244,6 +38323,14 @@
                     "type": "string",
                     "example": null
                 },
+                {
+                    "name": "disabled",
+                    "decorators": [],
+                    "description": "Переводит кнопку в состояние \"не активна\"",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
                 {
                     "name": "items",
                     "decorators": [],
@@ -38263,7 +38350,7 @@
                 {
                     "name": "navClassName",
                     "decorators": [],
-                    "description": "",
+                    "description": "CSS-класс для элемента навигации.",
                     "required": false,
                     "type": "string",
                     "example": null
@@ -38560,7 +38647,7 @@
                     "decorators": [],
                     "description": "Дерево роутов",
                     "required": true,
-                    "type": "IRouteItem[] | {}",
+                    "type": "IRouteItem | IRouteItem[] | {}",
                     "example": "{id: 'root', path: '/', component: IndexPage, items: [...]}",
                     "defaultValue": null
                 },

package/en.json

@@ -955,16 +955,21 @@
     "Будет ли отображён 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": "",
     "При повторном нажатии на выбранный элемент из дерева, он продолжит отображаться как активный.": "",
     "Дополнительные свойства, которые передаются во 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": "",
     "Свойства для кнопки продолжить/отправить": "",
     "Свойства для кнопки возврата": "",
@@ -972,6 +977,7 @@
     "Ориентация списка шагов формы": "",
     "Коллекция полей и аттрибутов для каждого шага формы. Можно передавать как компонент, так и объект с полями.\nГлавное, чтобы внутри шага использовался один из способов.": "",
     "Свойства для Steps": "",
+    "CSS-класс для элемента навигации.": "",
     "Флаг, который позволяет использовать вложенные роуты c указанием вложенного пути": "",
     "Скрыть иконку c лева от элемента": ""
 }

package/hooks/useApplication.d.ts

@@ -46,7 +46,7 @@ export interface IApplicationHookConfig {
     layoutProps?: Record<string, unknown>;
     screen?: Omit<IScreenProviderProps, 'children'>;
     theme?: Omit<IThemeProviderProps, 'children'>;
-    routerProps?: IRouterProps;
+    routerProps?: Omit<IRouterProps, 'routes'>;
     /**
      * These fetch configurations will be used to preload and store for no matter what route matched in case of SSR
      */

package/package.json

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

package/ui/content/DropDown/DropDown.js

@@ -102,9 +102,7 @@ function DropDown(props) {
         childrenElement
             ? React.cloneElement(childrenElement, resultProps)
             : (React.createElement("span", null, props.children)),
-        isComponentExist && (
-        // TODO Change Portal to global
-        React.createElement(TooltipPortalInner_1["default"], null,
+        isComponentExist && (React.createElement(TooltipPortalInner_1["default"], null,
             React.createElement(DropDownView, __assign({}, viewProps))))));
 }
 DropDown.defaultProps = {

package/ui/content/Kanban/Kanban.d.ts

@@ -50,7 +50,7 @@ export interface IKanbanColumn {
     title: string;
     tasks: IKanbanTask[];
 }
-export interface IKanbanModalViewProps extends IModalProps {
+export interface IKanbanModalViewProps extends IModalProps, Pick<IKanbanConfig, 'createTaskEditorConfig'> {
     modalType: KanbanModalTypeEnum;
     formId: string;
     columns: IKanbanColumn[];
@@ -79,6 +79,12 @@ export interface IKanbanTaskDetailsModalViewProps extends IModalProps {
  * Для работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`
  * и передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`
  * компоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.
+ *
+ * Для корректной работы функционала создания задач,
+ * необходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,
+ * затем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.
+ * Импортированные компоненты нужно передать в проп `createTaskEditorConfig`,
+ * в поле `htmlComponent` передать `CKEditor`, а в `editorConstructor` передать `ClassicEditor`.
  */
 export interface IKanbanProps extends IKanbanConfig, IUiComponent {
     /**

package/ui/content/Kanban/Kanban.js

@@ -35,7 +35,8 @@ function Kanban(props) {
         assigners: props.assigners,
         tags: props.tags,
         lastTaskId: props.lastTaskId,
-        onDragEnd: props.onDragEnd
+        onDragEnd: props.onDragEnd,
+        createTaskEditorConfig: props.createTaskEditorConfig
     }), columns = _a.columns, onDragEnd = _a.onDragEnd, onOpenTaskDetailsModal = _a.onOpenTaskDetailsModal, onOpenCreateTaskModal = _a.onOpenCreateTaskModal;
     // Task
     var Task = components.ui.getView('content.KanbanTaskView');

package/ui/content/Kanban/hooks/useKanban.d.ts

@@ -1,3 +1,4 @@
+import { IHtmlFieldProps } from '@steroidsjs/core/ui/form/HtmlField/HtmlField';
 import { IDragEndResult, IKanbanColumn, IKanbanTask, ITaskAssigner, ITaskTag } from '../Kanban';
 export interface IKanbanConfig {
     /**
@@ -35,6 +36,11 @@ export interface IKanbanConfig {
      * Массив исполнителей, которых можно назначить для выполнения задачи
      */
     assigners?: ITaskAssigner[];
+    /**
+     * Компоненты для подключения wysiwyg редактора
+     * @example CKEditor
+     */
+    createTaskEditorConfig: Pick<IHtmlFieldProps, 'htmlComponent' | 'editorConstructor'>;
     /**
      * Обработчик события окончания перетаскивания карточки или колонки
      * В result передается объект с информацией о событии

package/ui/content/Kanban/hooks/useKanban.js

@@ -105,10 +105,11 @@ function useKanban(config) {
     // common modal
     var KanbanModalView = components.ui.getView('content.KanbanModalView');
     var createOrEditTaskCommonModalProps = react_1["default"].useMemo(function () { return ({
+        createTaskEditorConfig: config.createTaskEditorConfig,
         columns: kanban === null || kanban === void 0 ? void 0 : kanban.columns,
         assigners: normalizeAssignersForDropDownItems(config.assigners || []),
         tags: tags
-    }); }, [config.assigners, kanban === null || kanban === void 0 ? void 0 : kanban.columns, tags]);
+    }); }, [config.createTaskEditorConfig, config.assigners, kanban === null || kanban === void 0 ? void 0 : kanban.columns, tags]);
     // create task modal
     var onOpenCreateTaskModal = react_1["default"].useCallback(function (columnId) {
         if (columnId) {

package/ui/content/Slider/Slider.d.ts

@@ -25,4 +25,5 @@ export interface ISliderProps extends IUiComponent, Omit<SplideProps, 'items'> {
     [key: string]: any;
 }
 export type ISliderViewProps = ISliderProps;
-export default function Slider(props: ISliderProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<ISliderProps, "ref"> & React.RefAttributes<unknown>>;
+export default _default;

package/ui/content/Slider/Slider.js

@@ -1,8 +1,24 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
+/* eslint-disable import/no-extraneous-dependencies */
+var react_1 = __importDefault(require("react"));
 var hooks_1 = require("../../../hooks");
-function Slider(props) {
+function Slider(props, ref) {
     var components = (0, hooks_1.useComponents)();
-    return components.ui.renderView(props.view || 'content.SliderView', props);
+    return components.ui.renderView(props.view || 'content.SliderView', __assign(__assign({}, props), { ref: ref }));
 }
-exports["default"] = Slider;
+exports["default"] = react_1["default"].forwardRef(Slider);

package/ui/form/AutoCompleteField/AutoCompleteField.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
 import { IBaseFieldProps } from '../InputField/InputField';
@@ -46,7 +46,6 @@ export interface IAutoCompleteFieldViewProps extends Omit<IAutoCompleteFieldProp
         value: string | number;
         disabled: boolean;
         onChange: (value: string) => void;
-        onFocus: (e: Event | React.FocusEvent) => void;
         onBlur: (e: Event | React.FocusEvent) => void;
         className?: CssClassName;
     };

package/ui/form/AutoCompleteField/AutoCompleteField.js

@@ -72,16 +72,6 @@ function AutoCompleteField(props) {
         setQuery(value);
         props.input.onChange.call(null, value);
     }, [props.input.onChange]);
-    // TODO
-    var onFocus = function (e) {
-        props.onOpen();
-        if (props.searchOnFocus) {
-            props.onSearch(props.input.value);
-        }
-        if (props.inputProps && props.inputProps.onFocus) {
-            props.inputProps.onFocus(e);
-        }
-    };
     var onBlur = (0, react_1.useCallback)(function (e) {
         setTimeout(function () {
             if (props.isOpened) {
@@ -100,7 +90,30 @@ function AutoCompleteField(props) {
     (0, react_1.useEffect)(function () {
         props.input.onChange.call(null, selectedIds[0] || null);
     }, [props.input.onChange, selectedIds]);
-    return components.ui.renderView(props.view || 'form.AutoCompleteFieldView', __assign(__assign({}, props), { inputProps: inputProps, items: items, isLoading: isLoading, hoveredId: hoveredId, selectedIds: selectedIds, onOpen: onOpen, isOpened: isOpened, onClose: onClose, forwardedRef: forwardedRef, onItemHover: onItemHover, onItemSelect: onItemSelect, categories: getCategories(props.items) }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        inputProps: inputProps,
+        items: items,
+        isLoading: isLoading,
+        hoveredId: hoveredId,
+        selectedIds: selectedIds,
+        onOpen: onOpen,
+        isOpened: isOpened,
+        onClose: onClose,
+        forwardedRef: forwardedRef,
+        onItemHover: onItemHover,
+        onItemSelect: onItemSelect,
+        primaryKey: props.primaryKey,
+        size: props.size,
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        required: props.required,
+        categories: getCategories(props.items),
+        className: props.className,
+        style: props.style
+    }); }, [inputProps, items, isLoading, hoveredId, selectedIds, onOpen, isOpened, onClose,
+        onItemHover, onItemSelect, props.primaryKey, props.size, props.placeholder, props.disabled,
+        props.required, props.items, props.className, props.style]);
+    return components.ui.renderView(props.view || 'form.AutoCompleteFieldView', viewProps);
 }
 AutoCompleteField.defaultProps = {
     primaryKey: 'label',

package/ui/form/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export interface IButtonBadge {
     /**
     * Включить/выключить badge

package/ui/form/Button/Button.js

@@ -34,9 +34,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 exports.__esModule = true;
-var React = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
-var react_1 = require("react");
 var router_1 = require("../../../actions/router");
 var router_2 = require("../../../reducers/router");
 var hooks_1 = require("../../../hooks");
@@ -56,7 +55,7 @@ function Button(props) {
         isLoading: false,
         isFailed: false
     }), _b = _a[0], isLoading = _b.isLoading, isFailed = _b.isFailed, setStateFlags = _a[1];
-    React.useEffect(function () {
+    react_1["default"].useEffect(function () {
         setStateFlags({
             isLoading: props.isLoading,
             isFailed: props.isFailed
@@ -126,8 +125,33 @@ function Button(props) {
             }
         }
     }, [dispatch, props, tag]);
-    var button = components.ui.renderView(props.view || 'form.ButtonView', __assign(__assign({}, props), { badge: badge, isFailed: isFailed, isLoading: isLoading, disabled: disabled, submitting: submitting, tag: tag, formId: (context === null || context === void 0 ? void 0 : context.formId) || null, url: url || (tag === 'a' ? '#' : null), onClick: !disabled ? onClick : undefined, children: props.label || props.children }));
-    return button;
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        badge: badge,
+        isFailed: isFailed,
+        isLoading: isLoading,
+        disabled: disabled,
+        submitting: submitting,
+        tag: tag,
+        label: props.label,
+        hint: props.hint,
+        icon: props.icon,
+        link: props.link,
+        outline: props.outline,
+        color: props.color,
+        block: props.block,
+        target: props.target,
+        type: props.type,
+        size: props.size,
+        formId: (context === null || context === void 0 ? void 0 : context.formId) || null,
+        url: url || (tag === 'a' ? '#' : null),
+        onClick: !disabled ? onClick : undefined,
+        children: props.label || props.children,
+        className: props.className,
+        style: props.style
+    }); }, [badge, context === null || context === void 0 ? void 0 : context.formId, disabled, isFailed, isLoading, onClick, props.block,
+        props.children, props.className, props.color, props.hint, props.icon, props.label,
+        props.link, props.outline, props.size, props.style, props.target, props.type, submitting, tag, url]);
+    return components.ui.renderView(props.view || 'form.ButtonView', viewProps);
 }
 Button.defaultProps = {
     type: 'button',

package/ui/form/CheckboxField/CheckboxField.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * CheckboxField

package/ui/form/CheckboxField/CheckboxField.js

@@ -37,14 +37,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var React = __importStar(require("react"));
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
 function CheckboxField(props) {
     var _a, _b;
     var components = (0, hooks_1.useComponents)();
-    var onChangeHandler = React.useCallback(function () {
+    var onChangeHandler = react_1["default"].useCallback(function () {
         var _a;
         props.input.onChange(!((_a = props.input) === null || _a === void 0 ? void 0 : _a.value));
         if (props.onChange) {
@@ -55,7 +54,17 @@ function CheckboxField(props) {
         var _a, _b;
         return (__assign({ name: (_a = props.input) === null || _a === void 0 ? void 0 : _a.name, type: 'checkbox', checked: !!((_b = props.input) === null || _b === void 0 ? void 0 : _b.value), onChange: onChangeHandler, disabled: props.disabled, required: props.required }, props.inputProps));
     }, [onChangeHandler, props.disabled, (_a = props.input) === null || _a === void 0 ? void 0 : _a.name, (_b = props.input) === null || _b === void 0 ? void 0 : _b.value, props.inputProps, props.required]);
-    return components.ui.renderView(props.view || 'form.CheckboxFieldView', __assign(__assign({}, props), { inputProps: inputProps }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        inputProps: inputProps,
+        color: props.color,
+        size: props.size,
+        errors: props.errors,
+        className: props.className,
+        style: props.style,
+        id: props.id,
+        label: props.label
+    }); }, [inputProps, props.className, props.color, props.errors, props.id, props.label, props.size, props.style]);
+    return components.ui.renderView(props.view || 'form.CheckboxFieldView', viewProps);
 }
 CheckboxField.defaultProps = {
     disabled: false,

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import Enum from '../../../base/Enum';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../../ui/form/Field/fieldWrapper';
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
@@ -63,6 +63,7 @@ export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps {
         isSelected: boolean;
         isHovered: boolean;
         color?: string;
+        required?: boolean;
     }[];
     selectedIds: (PrimaryKey | any)[];
     onItemSelect: (id: PrimaryKey | any) => void;

package/ui/form/CheckboxListField/CheckboxListField.js

@@ -37,8 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var React = __importStar(require("react"));
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var react_use_1 = require("react-use");
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
@@ -80,8 +79,18 @@ function CheckboxListField(props) {
         }
     }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
     var CheckboxFieldView = props.itemView || components.ui.getView('form.CheckboxFieldView');
-    var renderCheckbox = function (checkboxProps) { return (React.createElement(CheckboxFieldView, __assign({}, checkboxProps))); };
-    return components.ui.renderView(props.view || 'form.CheckboxListFieldView', __assign(__assign({}, props), { items: items, inputProps: inputProps, onItemSelect: onItemSelect, selectedIds: selectedIds, renderCheckbox: renderCheckbox }));
+    var renderCheckbox = function (checkboxProps) { return (react_1["default"].createElement(CheckboxFieldView, __assign({}, checkboxProps))); };
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        items: items,
+        inputProps: inputProps,
+        onItemSelect: onItemSelect,
+        selectedIds: selectedIds,
+        renderCheckbox: renderCheckbox,
+        orientation: props.orientation,
+        size: props.size,
+        disabled: props.disabled
+    }); }, [inputProps, items, onItemSelect, props.disabled, props.orientation, props.size, renderCheckbox, selectedIds]);
+    return components.ui.renderView(props.view || 'form.CheckboxListFieldView', viewProps);
 }
 CheckboxListField.defaultProps = {
     disabled: false,