@steroidsjs/core 3.0.0 → 3.0.2

package/ui/form/Form/Form.js

@@ -75,12 +75,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 exports.FormContext = void 0;
 /* eslint-disable react/prop-types */
-var React = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
 var get_1 = __importDefault(require("lodash-es/get"));
 var isUndefined_1 = __importDefault(require("lodash-es/isUndefined"));
 var set_1 = __importDefault(require("lodash-es/set"));
 var cloneDeep_1 = __importDefault(require("lodash-es/cloneDeep"));
-var react_1 = require("react");
 var react_use_1 = require("react-use");
 var notifications_1 = require("../../../actions/notifications");
 var useAddressBar_1 = __importDefault(require("../../../hooks/useAddressBar"));
@@ -89,7 +88,7 @@ var hooks_1 = require("../../../hooks");
 var form_1 = require("../../../utils/form");
 var validate_1 = __importDefault(require("../validate"));
 var form_2 = require("../../../actions/form");
-exports.FormContext = React.createContext({});
+exports.FormContext = react_1["default"].createContext({});
 var getCaptchaToken = function (params) {
     var googleCaptcha = params.googleCaptcha, siteKey = params.siteKey, _a = params.actionName, actionName = _a === void 0 ? 'submit' : _a;
     return new Promise(function (resolve) {
@@ -124,12 +123,12 @@ function Form(props) {
         }
         // Local storage
         if (props.autoSave) {
-            initialValues = AutoSaveHelper_1["default"].restore(props.clientStorage, props.formId, initialValues);
+            initialValues = AutoSaveHelper_1["default"].restore(components.clientStorage, props.formId, initialValues);
         }
     }
     // Init data provider
     var provider = props.useRedux ? form_1.providers.redux : form_1.providers.reducer;
-    var _b = provider.useForm(props.formId, initialValues), values = _b.values, submitCounter = _b.submitCounter, isInvalid = _b.isInvalid, isSubmitting = _b.isSubmitting, errors = _b.errors, setErrors = _b.setErrors, reducer = _b.reducer, dispatch = _b.dispatch;
+    var _b = provider.useForm(props.formId, initialValues), values = _b.values, submitCounter = _b.submitCounter, isSubmitting = _b.isSubmitting, errors = _b.errors, setErrors = _b.setErrors, reducer = _b.reducer, dispatch = _b.dispatch;
     // Sync with address bar
     (0, react_use_1.useUpdateEffect)(function () {
         updateQuery(values);
@@ -137,10 +136,9 @@ function Form(props) {
     // Auto save
     (0, react_use_1.useUpdateEffect)(function () {
         if (props.autoSave && values) {
-            // TODO
-            //AutoSaveHelper.save(components.clientStorage, props.formId, values);
+            AutoSaveHelper_1["default"].save(components.clientStorage, props.formId, values);
         }
-    }, [props.autoSave, values]);
+    }, [components.clientStorage, props.autoSave, props.formId, values]);
     // Auto destroy
     (0, react_use_1.useUnmount)(function () {
         if (props.autoDestroy) {
@@ -298,9 +296,7 @@ function Form(props) {
                             props.onComplete.call(null, cleanedValues, data, response);
                         }
                         if (props.autoSave) {
-                            // TODO
-                            //const AutoSaveHelper = require('../ui/form/Form/AutoSaveHelper').default;
-                            //AutoSaveHelper.remove(props.clientStorage, props.formId);
+                            AutoSaveHelper_1["default"].remove(components.clientStorage, props.formId);
                         }
                         dispatch((0, form_2.formSetSubmitting)(props.formId, false));
                         return [2 /*return*/, null];
@@ -308,7 +304,7 @@ function Form(props) {
             });
         });
     }, [dispatch, props, values, components.ui, components.resource,
-        components.http, reduxDispatch, setErrors]);
+        components.http, components.clientStorage, setErrors, reduxDispatch]);
     // Manual submit form by reducer action
     var prevSubmitCounter = (0, react_use_1.usePrevious)(submitCounter);
     (0, react_use_1.useUpdateEffect)(function () {
@@ -325,13 +321,15 @@ 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]);
     // Wait initialization (only for redux)
     if (values === undefined) {
         return null;
     }
     // Render context and form
-    return (React.createElement(exports.FormContext.Provider, { value: formContextValue }, props.view !== false
-        ? components.ui.renderView(props.view || 'form.FormView', __assign(__assign({}, props.viewProps), { isSubmitting: isSubmitting, onSubmit: onSubmit, submitLabel: props.submitLabel, fields: props.fields, children: props.children, buttons: props.buttons, className: props.className, style: props.style, autoFocus: props.autoFocus }))
+    return (react_1["default"].createElement(exports.FormContext.Provider, { value: formContextValue }, props.view !== false
+        ? components.ui.renderView(props.view || 'form.FormView', viewProps)
         : props.children));
 }
 Form.defaultProps = {

package/ui/form/HtmlField/HtmlField.d.ts

@@ -1,9 +1,28 @@
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * HtmlField
- * Компонент для создания HTML-разметки, использующий WYSIWYG редактор
+ * Компонент для создания HTML-разметки, использующий WYSIWYG редактор.
+ *
+ * Для использования WYSIWYG редактора, необходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,
+ * затем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.
+ * Компонент `CKEditor` нужно передать в проп `htmlComponent`, а конструктор `ClassicEditor` в проп `editorConstructor`.
+ *
+ * При передаче `HtmlField` с бэкенда, необходимо переопределить `view` компонента, указав локальный.
+ * В локальном компоненте добавить вместо пропсов `htmlComponent` и `editorConstructor` импорты `CKEditor` и `ClassicEditor` соотвественно.
  */
 export interface IHtmlFieldProps extends IFieldWrapperInputProps, IFieldWrapperOutputProps, IUiComponent {
+    /**
+     * Компонент редактора 'ckeditor5-react' из библиотеки @ckeditor
+     * Примечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан
+     * @example CKEditor
+     */
+    htmlComponent?: any;
+    /**
+     * Конструктор редактора 'ckeditor5-react' из библиотеки @steroidsjs/ckeditor5/packages/ckeditor5-build-classic
+     * Примечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан
+     * @example ClassicEditor
+     */
+    editorConstructor?: any;
     /**
      * Конфигурация wysiwyg реадактора
      */

package/ui/form/HtmlField/HtmlField.js

@@ -1,15 +1,4 @@
 "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 };
 };
@@ -46,7 +35,17 @@ function HtmlField(props) {
                 : '')
         }
     }, props.editorProps); }, [props.editorProps, uploadUrl, uploadImagesProcessor]);
-    return components.ui.renderView(props.view || 'form.HtmlFieldView', __assign(__assign({ onFocus: onFocus, onBlur: onBlur, onChange: onChange }, props), { editorProps: editorProps }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onChange: onChange,
+        editorProps: editorProps,
+        htmlComponent: props.htmlComponent,
+        editorConstructor: props.editorConstructor,
+        disabled: props.disabled,
+        input: props.input
+    }); }, [editorProps, onBlur, onChange, onFocus, props.disabled, props.editorConstructor, props.htmlComponent, props.input]);
+    return components.ui.renderView(props.view || 'form.HtmlFieldView', viewProps);
 }
 HtmlField.defaultProps = {
     disabled: false,

package/ui/form/ImageField/ImageField.js

@@ -43,6 +43,7 @@ var first_1 = __importDefault(require("lodash-es/first"));
 var values_1 = __importDefault(require("lodash-es/values"));
 var react_1 = require("react");
 var uniqueId_1 = __importDefault(require("lodash-es/uniqueId"));
+var react_use_1 = require("react-use");
 var hooks_1 = require("../../../hooks");
 var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
 var useFile_1 = __importDefault(require("../../../hooks/useFile"));
@@ -70,9 +71,10 @@ function ImageField(props) {
                     responseParser: props.crop ? responseParser : null
                 }
             } }, props.uploader) })), files = _b.files, onBrowse = _b.onBrowse, onRemove = _b.onRemove, onAdd = _b.onAdd;
+    var oldCroppedImage = (0, react_use_1.usePrevious)(croppedImage);
     // Fetch cropped image
     (0, react_1.useEffect)(function () {
-        if (croppedImage) {
+        if (croppedImage && !oldCroppedImage) {
             components.http.post(props.crop.backendUrl, croppedImage).then(function (res) {
                 setCroppedImage(null);
                 onAdd(new File_1["default"]({
@@ -83,9 +85,10 @@ function ImageField(props) {
                     resultHttpMessage: res,
                     uid: res.uid
                 }));
+                props.input.onChange(res.id);
             });
         }
-    }, [components.http, croppedImage, onAdd, onRemove, props.crop.backendUrl]);
+    }, [components.http, croppedImage, onAdd, onRemove, props.crop.backendUrl, props.input, oldCroppedImage]);
     var ImageFieldView = props.view || components.ui.getView('form.ImageFieldView');
     var item = (0, react_1.useMemo)(function () {
         var result = null;
@@ -132,7 +135,13 @@ function ImageField(props) {
         }
         return result;
     }, [files, onRemove, props.disabled, props.imagesProcessor, props.size]);
-    return (React.createElement(ImageFieldView, __assign({}, props, { item: item, onClick: onBrowse })));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        item: item,
+        onClick: onBrowse,
+        buttonProps: props.buttonProps,
+        label: props.label
+    }); }, [item, onBrowse, props.buttonProps, props.label]);
+    return (React.createElement(ImageFieldView, __assign({}, viewProps)));
 }
 ImageField.defaultProps = {
     disabled: false,
@@ -140,11 +149,6 @@ ImageField.defaultProps = {
     className: '',
     modalProps: {},
     label: 'Upload',
-    crop: {
-        initialValues: {
-            aspect: 1
-        }
-    },
     buttonProps: {
         color: 'basic',
         outline: true

package/ui/form/InputField/InputField.js

@@ -102,13 +102,34 @@ function InputField(props) {
         var _a;
         return (__assign({ type: props.type, name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onInput: onChange, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
     }, [onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder, props.type]);
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        inputRef: useInputFieldWarningByType_1.INPUT_TYPES_SUPPORTED_SELECTION.includes(props.type) ? inputRef : null,
+        onClear: onClear,
+        inputProps: inputProps,
+        size: props.size,
+        errors: props.errors,
+        leadIcon: props.leadIcon,
+        showClear: props.showClear,
+        input: props.input,
+        addonAfter: props.addonAfter,
+        addonBefore: props.addonBefore,
+        textAfter: props.textAfter,
+        textBefore: props.textBefore,
+        className: props.className,
+        style: props.style,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        onMouseDown: props.onMouseDown,
+        placeholder: props.placeholder,
+        required: props.required,
+        id: props.id,
+        viewProps: props.viewProps
+    }); }, [inputProps, inputRef, onClear, props]);
     // No render for hidden input
     if (props.type === 'hidden') {
         return null;
     }
-    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, 
-        // If type was recognized as unsupported in InputField, then we do not pass ref.
-        inputRef: useInputFieldWarningByType_1.INPUT_TYPES_SUPPORTED_SELECTION.includes(props.type) ? inputRef : null, onClear: onClear }));
+    return components.ui.renderView(props.view || 'form.InputFieldView', viewProps);
 }
 InputField.defaultProps = {
     type: 'text',

package/ui/form/MaskField/MaskField.js

@@ -10,17 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -28,7 +17,6 @@ exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var InputField_1 = __importDefault(require("../InputField/InputField"));
 function MaskField(props) {
-    var mask = props.mask, maskProps = props.maskProps, inputProps = __rest(props, ["mask", "maskProps"]);
-    return (react_1["default"].createElement(InputField_1["default"], __assign({}, inputProps, { maskOptions: props.maskOptions })));
+    return (react_1["default"].createElement(InputField_1["default"], __assign({}, props)));
 }
 exports["default"] = MaskField;

package/ui/form/NavField/NavField.js

@@ -37,7 +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 = __importStar(require("react"));
 var Nav_1 = __importDefault(require("../../nav/Nav/Nav"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
@@ -45,7 +45,17 @@ function NavField(props) {
     var items = (0, hooks_1.useDataProvider)({
         items: props.items
     }).items;
-    return (React.createElement(Nav_1["default"], __assign({}, props.navProps, { layout: props.navProps.layout, items: items, activeTab: props.input.value, onChange: props.onChange, disabled: props.disabled })));
+    var navProps = (0, react_1.useMemo)(function () { return ({
+        layout: props.navProps.layout,
+        items: items,
+        activeTab: props.input.value,
+        onChange: props.onChange,
+        disabled: props.disabled,
+        className: props.className,
+        view: props.view,
+        size: props.size
+    }); }, [items, props.className, props.disabled, props.input.value, props.navProps.layout, props.onChange, props.size, props.view]);
+    return (react_1["default"].createElement(Nav_1["default"], __assign({}, navProps)));
 }
 NavField.defaultProps = {
     navProps: {

package/ui/form/NumberField/NumberField.js

@@ -76,9 +76,22 @@ function NumberField(props) {
     }, [onStepDown, onStepUp]);
     var inputProps = (0, react_1.useMemo)(function () {
         var _a;
-        return (__assign({ name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onInputChange, type: 'text', min: props.min, max: props.max, step: props.step, placeholder: props.placeholder, disabled: props.disabled, autoComplete: 'off', onKeyDown: onKeyDown }, props.inputProps));
-    }, [props.input.name, props.input.value, props.min, props.max, props.step, props.placeholder, props.disabled, props.inputProps, onInputChange, onKeyDown]);
-    return components.ui.renderView(props.view || 'form.NumberFieldView', __assign(__assign({}, props), { inputProps: inputProps, onStepUp: onStepUp, onStepDown: onStepDown, inputRef: currentInputRef }));
+        return (__assign(__assign({}, props.inputProps), { name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onInputChange, type: 'text', min: props.min, max: props.max, step: props.step, placeholder: props.placeholder, disabled: props.disabled, autoComplete: 'off', onKeyDown: onKeyDown }));
+    }, [props.inputProps, props.input.name, props.input.value, props.min, props.max, props.step, props.placeholder, props.disabled, onInputChange, onKeyDown]);
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        viewProps: props.viewProps,
+        inputProps: inputProps,
+        onStepUp: onStepUp,
+        onStepDown: onStepDown,
+        input: props.input,
+        inputRef: currentInputRef,
+        size: props.size,
+        errors: props.errors,
+        className: props.className,
+        disabled: props.disabled,
+        id: props.id
+    }); }, [currentInputRef, inputProps, onStepDown, onStepUp, props]);
+    return components.ui.renderView(props.view || 'form.NumberFieldView', viewProps);
 }
 NumberField.defaultProps = {
     disabled: false,

package/ui/form/PasswordField/PasswordField.js

@@ -62,9 +62,22 @@ function PasswordField(props) {
     }, [type]);
     var inputProps = (0, react_1.useMemo)(function () {
         var _a;
-        return (__assign({ name: props.input.name, defaultValue: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onChange, type: type, placeholder: props.placeholder, disabled: props.disabled, ref: inputRef }, props.inputProps));
+        return (__assign({ name: props.input.name, defaultValue: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', placeholder: props.placeholder, disabled: props.disabled, ref: inputRef, onChange: onChange, type: type }, props.inputProps));
     }, [inputRef, onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder, type]);
-    return components.ui.renderView(props.view || 'form.PasswordFieldView' || 'form.InputFieldView', __assign(__assign({}, props), { inputProps: inputProps, securityLevel: props.showSecurityBar ? (0, exports.checkPassword)(props.input.value) : null, onClear: onClear, onShowButtonClick: onShowButtonClick }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        viewProps: props.viewProps,
+        inputProps: inputProps,
+        securityLevel: props.showSecurityBar ? (0, exports.checkPassword)(props.input.value) : null,
+        onClear: onClear,
+        onShowButtonClick: onShowButtonClick,
+        size: props.size,
+        input: props.input,
+        className: props.className,
+        showSecurityIcon: props.showSecurityIcon,
+        showSecurityBar: props.showSecurityBar
+    }); }, [inputProps, onClear, onShowButtonClick, props.className, props.input, props.showSecurityBar, props.showSecurityIcon,
+        props.size, props.viewProps]);
+    return components.ui.renderView(props.view || 'form.PasswordFieldView' || 'form.InputFieldView', viewProps);
 }
 PasswordField.defaultProps = {
     disabled: false,

package/ui/form/RadioField/RadioField.d.ts

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

package/ui/form/RadioField/RadioField.js

@@ -37,19 +37,30 @@ 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 = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 function RadioField(props) {
     var components = (0, hooks_1.useComponents)();
-    var onChangeHandler = React.useCallback(function () {
+    var onChangeHandler = react_1["default"].useCallback(function () {
         props.input.onChange(!props.input.value);
         if (props.onChange) {
             props.onChange();
         }
     }, [props]);
-    var inputProps = React.useMemo(function () { return (__assign({ name: props.input.name, type: 'radio', checked: !!props.input.value, onChange: onChangeHandler, disabled: props.disabled }, props.inputProps)); }, [onChangeHandler, props.disabled, props.input.name, props.input.value, props.inputProps]);
-    return components.ui.renderView(props.view || 'form.RadioFieldView', __assign(__assign({}, props), { inputProps: inputProps }));
+    var inputProps = react_1["default"].useMemo(function () { return (__assign({ name: props.input.name, type: 'radio', checked: !!props.input.value, onChange: onChangeHandler, disabled: props.disabled }, props.inputProps)); }, [onChangeHandler, props.disabled, props.input.name, props.input.value, props.inputProps]);
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        inputProps: inputProps,
+        errors: props.errors,
+        size: props.size,
+        className: props.className,
+        onChange: props.onChange,
+        checked: props.checked,
+        disabled: props.disabled,
+        required: props.required,
+        label: props.label
+    }); }, [inputProps, props.checked, props.className, props.disabled, props.errors, props.label, props.onChange, props.required, props.size]);
+    return components.ui.renderView(props.view || 'form.RadioFieldView', viewProps);
 }
 RadioField.defaultProps = {
     disabled: false,

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
@@ -31,6 +31,7 @@ export interface IRadioListFieldViewProps extends IFieldWrapperOutputProps {
         disabled?: boolean;
         isSelected: boolean;
         isHovered: boolean;
+        required?: boolean;
     }[];
     selectedIds: (PrimaryKey | any)[];
     className?: CssClassName;

package/ui/form/RadioListField/RadioListField.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 isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var hooks_1 = require("../../../hooks");
@@ -75,8 +74,19 @@ function RadioListField(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.input.onChange, selectedIds]);
     var RadioFieldView = components.ui.getView('form.RadioFieldView');
-    var renderRadio = function (radioProps) { return React.createElement(RadioFieldView, __assign({}, radioProps)); };
-    return components.ui.renderView(props.view || 'form.RadioListFieldView', __assign(__assign({}, props), { items: items, inputProps: inputProps, onItemSelect: onItemSelect, selectedIds: selectedIds, renderRadio: renderRadio }));
+    var renderRadio = function (radioProps) { return react_1["default"].createElement(RadioFieldView, __assign({}, radioProps)); };
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        items: items,
+        inputProps: inputProps,
+        onItemSelect: onItemSelect,
+        selectedIds: selectedIds,
+        renderRadio: renderRadio,
+        orientation: props.orientation,
+        className: props.className,
+        disabled: props.disabled,
+        size: props.size
+    }); }, [inputProps, items, onItemSelect, props.className, props.disabled, props.orientation, props.size, renderRadio, selectedIds]);
+    return components.ui.renderView(props.view || 'form.RadioListFieldView', viewProps);
 }
 RadioListField.defaultProps = {
     disabled: false,

package/ui/form/RateField/RateField.js

@@ -42,7 +42,17 @@ function RateField(props) {
         props.input.onChange(value);
     }, [props.allowClear, props.input]);
     var inputProps = (0, react_1.useMemo)(function () { return (__assign({ name: props.input.name, value: props.input.value, disabled: props.disabled }, props.inputProps)); }, [props.disabled, props.input, props.inputProps]);
-    return components.ui.renderView(props.view || 'form.RateFieldView', __assign(__assign({}, props), { inputProps: inputProps, onItemClick: onItemClick, items: items }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        inputProps: inputProps,
+        onItemClick: onItemClick,
+        items: items,
+        size: props.size,
+        disabled: props.disabled,
+        className: props.className,
+        style: props.style,
+        badge: props.badge
+    }); }, [inputProps, items, onItemClick, props.badge, props.className, props.disabled, props.size, props.style]);
+    return components.ui.renderView(props.view || 'form.RateFieldView', viewProps);
 }
 RateField.defaultProps = {
     allowClear: false,

package/ui/form/ReCaptchaField/ReCaptchaField.js

@@ -1,15 +1,4 @@
 "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 };
 };
@@ -39,6 +28,11 @@ function ReCaptchaField(props) {
         ref: props.ref,
         sitekey: props.sitekey || components.resource.googleCaptchaSiteKey
     }); }, [components.resource.googleCaptchaSiteKey, onChange, props.asyncScriptOnLoad, props.badge, props.hl, props.isolated, props.onErrored, props.onExpired, props.ref, props.sitekey, props.stoken, props.tabindex, props.type]);
-    return components.ui.renderView(props.view || 'form.ReCaptchaFieldView', __assign(__assign({}, props), { recaptchaOptions: recaptchaOptions }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        recaptchaOptions: recaptchaOptions,
+        className: props.className,
+        style: props.style
+    }); }, [props.className, props.style, recaptchaOptions]);
+    return components.ui.renderView(props.view || 'form.ReCaptchaFieldView', viewProps);
 }
 exports["default"] = (0, fieldWrapper_1["default"])('ReCaptchaField', ReCaptchaField);

package/ui/form/SliderField/SliderField.d.ts

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

package/ui/form/SliderField/SliderField.js

@@ -14,8 +14,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var toInteger_1 = __importDefault(require("lodash-es/toInteger"));
 var react_1 = require("react");
+var toInteger_1 = __importDefault(require("lodash-es/toInteger"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var normalizeValue = function (value) { return (0, toInteger_1["default"])(String(value).replace(/[0-9]g/, '')) || 0; };
@@ -38,8 +38,10 @@ function SliderField(props) {
             value = normalizeValue(value);
             props.input.onChange.call(null, value);
         }
-    }); }, [props.min, props.max, props.step, props.marks, props.isRange, props.disabled, props.isVertical, props.input.value, props.input.onChange, props.valuePostfix, props.defaultValue, props.tooltipIsVisible]);
-    return components.ui.renderView(props.view || 'form.SliderFieldView', __assign(__assign({}, props), { sliderProps: sliderProps }));
+    }); }, [props.min, props.max, props.step, props.marks, props.isRange, props.disabled, props.isVertical, props.input.value,
+        props.input.onChange, props.valuePostfix, props.defaultValue, props.tooltipIsVisible]);
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, sliderProps), { slider: props.slider, className: props.className, rangeDefaultValue: props.rangeDefaultValue, sliderDefaultValue: props.sliderDefaultValue, style: props.style })); }, [props.className, props.rangeDefaultValue, props.slider, props.sliderDefaultValue, props.style, sliderProps]);
+    return components.ui.renderView(props.view || 'form.SliderFieldView', viewProps);
 }
 SliderField.defaultProps = {
     step: 1,

package/ui/form/SwitcherField/SwitcherField.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';

package/ui/form/SwitcherField/SwitcherField.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 isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
@@ -64,7 +63,7 @@ function SwitcherField(props) {
     var onItemSelect = (0, react_1.useCallback)(function (id) {
         setSelectedIds(id);
     }, [setSelectedIds]);
-    var inputProps = React.useMemo(function () { return (__assign(__assign({}, props.inputProps), { type: 'checkbox', name: props.input.name, disabled: props.disabled })); }, [props.disabled, props.input.name, props.inputProps]);
+    var inputProps = react_1["default"].useMemo(function () { return (__assign(__assign({}, props.inputProps), { type: 'checkbox', name: props.input.name, disabled: props.disabled })); }, [props.disabled, props.input.name, props.inputProps]);
     // Sync with form
     var prevSelectedIds = (0, react_use_1.usePrevious)(selectedIds);
     (0, react_1.useEffect)(function () {
@@ -76,7 +75,18 @@ function SwitcherField(props) {
             }
         }
     }, [selectedIds, props.input.onChange, prevSelectedIds, props, items]);
-    return components.ui.renderView(props.view || 'form.SwitcherFieldView', __assign(__assign({}, props), { items: items, inputProps: inputProps, hoveredId: hoveredId, selectedIds: selectedIds, onItemHover: onItemHover, onItemSelect: onItemSelect }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        items: items,
+        inputProps: inputProps,
+        hoveredId: hoveredId,
+        selectedIds: selectedIds,
+        onItemHover: onItemHover,
+        onItemSelect: onItemSelect,
+        className: props.className,
+        style: props.style,
+        size: props.size
+    }); }, [hoveredId, inputProps, items, onItemHover, onItemSelect, props.className, props.size, props.style, selectedIds]);
+    return components.ui.renderView(props.view || 'form.SwitcherFieldView', viewProps);
 }
 SwitcherField.defaultProps = {
     primaryKey: 'id',

package/ui/form/TextField/TextField.js

@@ -37,7 +37,8 @@ function TextField(props) {
         var _a;
         return (__assign({ name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: handleChange, onKeyUp: onKeyUp, placeholder: props.placeholder, disabled: props.disabled, ref: inputRef }, props.inputProps));
     }, [props.input.name, props.input.value, props.placeholder, props.disabled, props.inputProps, handleChange, onKeyUp, inputRef]);
-    return components.ui.renderView(props.view || 'form.TextFieldView', __assign(__assign({}, props), { inputProps: inputProps, onClear: onClear }));
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { inputProps: inputProps, onClear: onClear, errors: props.errors, size: props.size, className: props.className, showClear: props.showClear })); }, [inputProps, onClear, props.className, props.errors, props.showClear, props.size, props.viewProps]);
+    return components.ui.renderView(props.view || 'form.TextFieldView', viewProps);
 }
 TextField.defaultProps = {
     disabled: false,

package/ui/form/TimeField/TimeField.js

@@ -33,7 +33,9 @@ function TimeField(props) {
         dateInUTC: props.dateInUTC
     }), onNow = _a.onNow, onClear = _a.onClear, onClose = _a.onClose, isOpened = _a.isOpened, inputProps = _a.inputProps;
     var timePanelViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNow, onClose: onClose, value: inputProps.value, onSelect: inputProps.onChange }, props.timePanelViewProps)); }, [inputProps.onChange, inputProps.value, onClose, onNow, props.timePanelViewProps]);
-    return components.ui.renderView(props.view || 'form.TimeFieldView', __assign(__assign({}, props.viewProps), { onNow: onNow, onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, timePanelViewProps: timePanelViewProps, size: props.size, icon: props.icon, errors: props.errors, noBorder: props.noBorder, disabled: props.disabled, className: props.className, showRemove: props.showRemove }));
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { onNow: onNow, onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, timePanelViewProps: timePanelViewProps, size: props.size, icon: props.icon, errors: props.errors, noBorder: props.noBorder, disabled: props.disabled, className: props.className, style: props.style, showRemove: props.showRemove })); }, [inputProps, isOpened, onClear, onClose, onNow, props.className, props.disabled, props.errors, props.icon, props.noBorder,
+        props.showRemove, props.size, props.style, props.viewProps, timePanelViewProps]);
+    return components.ui.renderView(props.view || 'form.TimeFieldView', viewProps);
 }
 TimeField.defaultProps = {
     disabled: false,

package/ui/form/TimeRangeField/TimeRangeField.js

@@ -67,7 +67,10 @@ function TimeRangeField(props) {
     }), focus = _c.focus, onClose = _c.onClose, onClear = _c.onClear, extendedInputPropsFrom = _c.extendedInputPropsFrom, extendedInputPropsTo = _c.extendedInputPropsTo;
     var timePanelFromViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNowFrom, onClose: onCloseFrom, value: inputPropsFrom.value, onSelect: inputPropsFrom.onChange }, props.timePanelViewProps)); }, [inputPropsFrom.onChange, inputPropsFrom.value, onCloseFrom, onNowFrom, props.timePanelViewProps]);
     var timePanelToViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNowTo, onClose: onCloseTo, value: inputPropsTo.value, onSelect: inputPropsTo.onChange }, props.timePanelViewProps)); }, [inputPropsTo.onChange, inputPropsTo.value, onCloseTo, onNowTo, props.timePanelViewProps]);
-    return components.ui.renderView(props.view || 'form.TimeRangeFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, inputPropsFrom: extendedInputPropsFrom, inputPropsTo: extendedInputPropsTo, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, style: props.style, errorsFrom: props.errorsFrom, errorsTo: props.errorsTo, timePanelFromViewProps: timePanelFromViewProps, timePanelToViewProps: timePanelToViewProps, size: props.size, icon: props.icon, disabled: props.disabled, showRemove: props.showRemove, className: props.className }));
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, inputPropsFrom: extendedInputPropsFrom, inputPropsTo: extendedInputPropsTo, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, style: props.style, errorsFrom: props.errorsFrom, errorsTo: props.errorsTo, errors: props.errors, timePanelFromViewProps: timePanelFromViewProps, timePanelToViewProps: timePanelToViewProps, size: props.size, icon: props.icon, disabled: props.disabled, showRemove: props.showRemove, className: props.className })); }, [extendedInputPropsFrom, extendedInputPropsTo, focus, isOpenedFrom, isOpenedTo, onClear, onClose, props.className,
+        props.disabled, props.errors, props.errorsFrom, props.errorsTo, props.icon, props.showRemove, props.size, props.style,
+        props.viewProps, timePanelFromViewProps, timePanelToViewProps]);
+    return components.ui.renderView(props.view || 'form.TimeRangeFieldView', viewProps);
 }
 TimeRangeField.defaultProps = {
     disabled: false,

package/ui/layout/Notifications/Notifications.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 /**
  * Перед тем как использовать компонент Notification поместите его в DOM дереве следующим образом:
  * ```