@steroidsjs/core 3.0.1 → 3.0.3

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 дереве следующим образом:
  * ```

package/ui/layout/Notifications/Notifications.js

@@ -37,9 +37,8 @@ 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 orderBy_1 = __importDefault(require("lodash-es/orderBy"));
-var react_1 = require("react");
 var react_use_1 = require("react-use");
 var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
 var hooks_1 = require("../../../hooks");
@@ -85,7 +84,12 @@ function Notifications(props) {
     var items = (0, react_1.useMemo)(function () { return ((0, orderBy_1["default"])([].concat(innerNotifications).concat(closing), ['id'], 'asc')
         .map(function (item) { return (__assign(__assign({}, item), { isClosing: closingIds.includes(item.id), onClose: function () { return onClose(item.id); } })); })); }, [innerNotifications, closing, closingIds, onClose]);
     var NotificationsItemView = props.itemView || components.ui.getView('layout.NotificationsItemView');
-    return components.ui.renderView(props.view || 'layout.NotificationsView', __assign(__assign({}, props), { position: position || '', children: items.map(function (item) { return (React.createElement(NotificationsItemView, __assign({ key: item.id }, item))); }) }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        className: props.className,
+        position: position || '',
+        children: items.map(function (item) { return (react_1["default"].createElement(NotificationsItemView, __assign({ key: item.id }, item))); })
+    }); }, [props.className, position, items, NotificationsItemView]);
+    return components.ui.renderView(props.view || 'layout.NotificationsView', viewProps);
 }
 Notifications.defaultProps = {
     closeTimeoutMs: 1500

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export interface IProgressBarViewProps {
     percent: number;
     status?: 'normal' | 'success' | 'exception';

package/ui/layout/ProgressBar/ProgressBar.js

@@ -26,40 +26,36 @@ 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 Icon_1 = __importDefault(require("../../content/Icon/Icon"));
 var hooks_1 = require("../../../hooks");
 function ProgressBar(props) {
     var components = (0, hooks_1.useComponents)();
-    var getLabel = (function () {
-        if (!props.showLabel) {
-            return null;
-        }
-        if (props.icon) {
-            return props.icon(props.status, props.percent);
-        }
-        if (props.status === 'success') {
-            return React.createElement(Icon_1["default"], { name: "check" });
-        }
-        if (props.status === 'exception') {
-            return React.createElement(Icon_1["default"], { name: "times" });
-        }
-        return props.label(props.percent);
-    });
-    if (props.type === 'line') {
-        return components.ui.renderView('layout.LineProgressBarView', {
+    var viewProps = (0, react_1.useMemo)(function () {
+        var getLabel = (function () {
+            if (!props.showLabel) {
+                return null;
+            }
+            if (props.icon) {
+                return props.icon(props.status, props.percent);
+            }
+            if (props.status === 'success') {
+                return react_1["default"].createElement(Icon_1["default"], { name: "check" });
+            }
+            if (props.status === 'exception') {
+                return react_1["default"].createElement(Icon_1["default"], { name: "times" });
+            }
+            return props.label(props.percent);
+        });
+        return {
             percent: props.percent,
             status: props.status,
             size: props.size,
             label: getLabel()
-        });
-    }
-    return components.ui.renderView('layout.CircleProgressBarView', {
-        percent: props.percent,
-        status: props.status,
-        size: props.size,
-        label: getLabel()
-    });
+        };
+    }, [props]);
+    var ViewComponent = props.type === 'line' ? 'layout.LineProgressBarView' : 'layout.CircleProgressBarView';
+    return components.ui.renderView(ViewComponent, viewProps);
 }
 ProgressBar.defaultProps = {
     status: 'normal',

package/ui/layout/Sidebar/Sidebar.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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -48,7 +37,22 @@ function Sidebar(props) {
             props.onClickItem(itemId);
         }
     }, [props]);
-    return components.ui.renderView(props.view || 'layout.SidebarView', __assign(__assign({}, props), { isOpened: isOpened, toggleSidebar: toggleSidebar, onClickNav: onClickNav }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        isOpened: isOpened,
+        toggleSidebar: toggleSidebar,
+        onClickNav: onClickNav,
+        hasSeparatedNavItem: props.hasSeparatedNavItem,
+        className: props.className,
+        style: props.style,
+        logo: props.logo,
+        menu: props.menu,
+        user: props.user,
+        items: props.items,
+        footerIcons: props.footerIcons,
+        isShink: props.isShink
+    }); }, [isOpened, onClickNav, props.className, props.footerIcons, props.hasSeparatedNavItem, props.isShink, props.items,
+        props.logo, props.menu, props.style, props.user, toggleSidebar]);
+    return components.ui.renderView(props.view || 'layout.SidebarView', viewProps);
 }
 exports["default"] = Sidebar;
 Sidebar.defaultProps = {

package/ui/list/ControlsColumn/ControlsColumn.js

@@ -25,6 +25,12 @@ function ControlsColumn(props) {
             : props.controls;
         return controls.map(function (control) { return (__assign(__assign({}, control), { position: 'left', visible: control.visible !== false && props.item['can' + (0, upperFirst_1["default"])(control.id)] !== false })); });
     }, [props]);
-    return components.ui.renderView(props.view || 'list.ControlsColumnView', __assign(__assign({}, props), { items: items }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        items: items,
+        view: props.view,
+        controls: props.controls,
+        primaryKey: props.primaryKey
+    }); }, [items, props.controls, props.primaryKey, props.view]);
+    return components.ui.renderView(props.view || 'list.ControlsColumnView', viewProps);
 }
 exports["default"] = ControlsColumn;