@steroidsjs/core 3.0.1 → 3.0.2

package/ui/form/DateField/DateField.js

@@ -39,7 +39,9 @@ function DateField(props) {
     }), onClear = _a.onClear, onClose = _a.onClose, isOpened = _a.isOpened, inputProps = _a.inputProps;
     // Calendar props
     var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: props.input.value, onChange: props.input.onChange, valueFormat: props.valueFormat }, props.calendarProps)); }, [props.calendarProps, props.input.onChange, props.input.value, props.valueFormat]);
-    return components.ui.renderView(props.view || 'form.DateFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, calendarProps: calendarProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove, style: props.style, autoPositioning: props.autoPositioning, maskInputRef: maskInputRef }));
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { calendarProps: calendarProps, onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove, style: props.style, autoPositioning: props.autoPositioning, maskInputRef: maskInputRef })); }, [calendarProps, inputProps, isOpened, maskInputRef, onClear, onClose, props.className,
+        props.disabled, props.errors, props.icon, props.label, props.showRemove, props.size, props.style, props.viewProps]);
+    return components.ui.renderView(props.view || 'form.DateFieldView', viewProps);
 }
 DateField.defaultProps = {
     disabled: false,

package/ui/form/DateRangeField/DateRangeField.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);
@@ -115,7 +104,24 @@ function DateRangeField(props) {
         showFooter: false
     }); }, [focus, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange,
         props.inputTo.value, props.valueFormat]);
-    return components.ui.renderView(props.view || 'form.DateRangeFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, calendarProps: calendarProps, icon: props.icon, size: props.size, errorsTo: props.errorsTo, disabled: props.disabled, noBorder: props.noBorder, className: props.className, showRemove: props.showRemove, errorsFrom: props.errorsFrom, inputPropsTo: extendedInputPropsTo, inputPropsFrom: extendedInputPropsFrom, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, style: props.style }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        onClear: onClear,
+        onClose: onClose,
+        calendarProps: calendarProps,
+        icon: props.icon,
+        size: props.size,
+        disabled: props.disabled,
+        className: props.className,
+        showRemove: props.showRemove,
+        errorsFrom: props.errorsFrom,
+        errorsTo: props.errorsTo,
+        inputPropsTo: extendedInputPropsTo,
+        inputPropsFrom: extendedInputPropsFrom,
+        isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo,
+        style: props.style
+    }); }, [calendarProps, extendedInputPropsFrom, extendedInputPropsTo, focus, isOpenedFrom, isOpenedTo, onClear,
+        onClose, props.className, props.disabled, props.errorsFrom, props.errorsTo, props.icon, props.showRemove, props.size, props.style]);
+    return components.ui.renderView(props.view || 'form.DateRangeFieldView', viewProps);
 }
 DateRangeField.defaultProps = {
     disabled: false,
@@ -126,7 +132,6 @@ DateRangeField.defaultProps = {
     showRemove: true,
     hasInitialFocus: false,
     icon: true,
-    noBorder: false,
     size: 'md',
     maskOptions: {
         from: (0, kit_1.maskitoDateOptionsGenerator)({

package/ui/form/DateTimeField/DateTimeField.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { MaskitoOptions } from '@maskito/core';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateInputStateInput, IDateInputStateOutput } from '../../form/DateField/useDateInputState';

package/ui/form/DateTimeField/DateTimeField.js

@@ -59,7 +59,25 @@ function DateTimeField(props) {
         value: timeValue,
         onSelect: onTimeSelect
     }); }, [onClose, onTimeSelect, timeValue]);
-    return components.ui.renderView(props.view || 'form.DateTimeFieldView', __assign(__assign({}, props.viewProps), { isOpened: isOpened, onClear: onClear, onClose: onClose, inputProps: inputProps, calendarProps: calendarProps, timePanelViewProps: timePanelViewProps, size: props.size, icon: props.icon, label: props.label, errors: props.errors, className: props.className, showRemove: props.showRemove, isInvalid: props.isInvalid, disabled: props.disabled, style: props.style, maskInputRef: maskInputRef }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        isOpened: isOpened,
+        onClear: onClear,
+        onClose: onClose,
+        maskInputRef: maskInputRef,
+        inputProps: inputProps,
+        calendarProps: calendarProps,
+        timePanelViewProps: timePanelViewProps,
+        placeholder: props.placeholder,
+        size: props.size,
+        icon: props.icon,
+        errors: props.errors,
+        className: props.className,
+        showRemove: props.showRemove,
+        disabled: props.disabled,
+        style: props.style
+    }); }, [calendarProps, inputProps, isOpened, maskInputRef, onClear, onClose, props.className, props.disabled, props.errors, props.icon,
+        props.placeholder, props.showRemove, props.size, props.style, timePanelViewProps]);
+    return components.ui.renderView(props.view || 'form.DateTimeFieldView', viewProps);
 }
 DateTimeField.defaultProps = {
     disabled: false,

package/ui/form/DateTimeRangeField/DateTimeRangeField.js

@@ -141,7 +141,26 @@ function DateTimeRangeField(props) {
         timeValueFrom,
         timeValueTo,
     ]);
-    return components.ui.renderView(props.view || 'form.DateTimeRangeFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, calendarProps: calendarProps, timePanelViewProps: timePanelViewProps, icon: props.icon, size: props.size, errorsTo: props.errorsTo, className: props.className, showRemove: props.showRemove, errorsFrom: props.errorsFrom, inputPropsTo: extendedInputPropsTo, inputPropsFrom: extendedInputPropsFrom, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, disabled: props.disabled, noBorder: props.noBorder, style: props.style }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        onClear: onClear,
+        onClose: onClose,
+        calendarProps: calendarProps,
+        timePanelViewProps: timePanelViewProps,
+        icon: props.icon,
+        size: props.size,
+        errorsFrom: props.errorsFrom,
+        errorsTo: props.errorsTo,
+        className: props.className,
+        showRemove: props.showRemove,
+        inputPropsTo: extendedInputPropsTo,
+        inputPropsFrom: extendedInputPropsFrom,
+        isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo,
+        disabled: props.disabled,
+        style: props.style
+    }); }, [calendarProps, extendedInputPropsFrom, extendedInputPropsTo, focus, isOpenedFrom, isOpenedTo, onClear, onClose,
+        props.className, props.disabled, props.errorsFrom, props.errorsTo, props.icon, props.showRemove, props.size,
+        props.style, timePanelViewProps]);
+    return components.ui.renderView(props.view || 'form.DateTimeRangeFieldView', viewProps);
 }
 DateTimeRangeField.defaultProps = {
     disabled: false,

package/ui/form/DropDownField/DropDownField.js

@@ -199,10 +199,42 @@ function DropDownField(props) {
         }
         return renderItemView(item, 'default', null);
     };
-    return components.ui.renderView(props.view || 'form.DropDownFieldView', __assign(__assign({}, props), { isAutoComplete: isAutoComplete, items: items, hoveredId: hoveredId, selectedIds: selectedIds, forwardedRef: forwardedRef, searchInputProps: searchInputProps, isOpened: isOpened, isLoading: isLoading, onOpen: onOpen, selectedItems: selectedItems, 
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        isAutoComplete: isAutoComplete,
+        items: items,
+        hoveredId: hoveredId,
+        selectedIds: selectedIds,
+        forwardedRef: forwardedRef,
+        searchInputProps: searchInputProps,
+        isOpened: isOpened,
+        isLoading: isLoading,
+        onOpen: onOpen,
+        selectedItems: selectedItems,
         // TODO onFocus
         // TODO onBlur
-        onReset: onReset, onClose: onClose, renderItem: renderItem, onItemRemove: onItemRemove, hasGroup: hasGroup, itemToSelectAll: normalizedItemToSelectAll }));
+        onReset: onReset,
+        onClose: onClose,
+        renderItem: renderItem,
+        onItemRemove: onItemRemove,
+        hasGroup: hasGroup,
+        multiple: props.multiple,
+        isSearchAutoFocus: props.isSearchAutoFocus,
+        itemToSelectAll: normalizedItemToSelectAll,
+        className: props.className,
+        style: props.style,
+        size: props.size,
+        color: props.color,
+        outline: props.outline,
+        placeholder: props.placeholder,
+        showReset: props.showReset,
+        showEllipses: props.showEllipses,
+        errors: props.errors,
+        disabled: props.disabled
+    }); }, [isAutoComplete, items, hoveredId, selectedIds, searchInputProps, isOpened, isLoading, onOpen,
+        selectedItems, onReset, onClose, renderItem, onItemRemove, hasGroup, props.multiple, props.isSearchAutoFocus,
+        props.className, props.style, props.size, props.color, props.outline, props.placeholder, props.showReset, props.showEllipses,
+        props.errors, props.disabled, normalizedItemToSelectAll]);
+    return components.ui.renderView(props.view || 'form.DropDownFieldView', viewProps);
 }
 DropDownField.defaultProps = {
     primaryKey: 'id',

package/ui/form/EmailField/EmailField.js

@@ -10,12 +10,34 @@ var __assign = (this && this.__assign) || function () {
     };
     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);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-/* eslint-disable max-len */
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var useInputTypeEmail_1 = __importDefault(require("./hooks/useInputTypeEmail"));
@@ -28,7 +50,35 @@ function EmailField(props) {
         var _a;
         return (__assign({ name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onInputChange, type: 'text', placeholder: props.placeholder, disabled: props.disabled, required: props.required }, props.inputProps));
     }, [onInputChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder, props.required]);
-    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign({}, props), { inputProps: inputProps, inputRef: currentInputRef, onClear: onClear }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        inputProps: inputProps,
+        inputRef: currentInputRef,
+        onClear: onClear,
+        size: props.size,
+        errors: props.errors,
+        leadIcon: props.leadIcon,
+        showClear: props.showClear,
+        disabled: props.disabled,
+        input: props.input,
+        addonAfter: props.addonAfter,
+        addonBefore: props.addonBefore,
+        textAfter: props.textAfter,
+        textBefore: props.textBefore,
+        placeholder: props.placeholder,
+        required: props.required,
+        id: props.id,
+        maskOptions: props.maskOptions,
+        maskProps: props.maskProps,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        onMouseDown: props.onMouseDown,
+        className: props.className,
+        style: props.style
+    }); }, [inputProps, currentInputRef, onClear, props.size, props.errors, props.leadIcon, props.showClear,
+        props.disabled, props.input, props.addonAfter, props.addonBefore, props.textAfter, props.textBefore,
+        props.placeholder, props.required, props.id, props.maskOptions, props.maskProps, props.onBlur, props.onFocus,
+        props.onMouseDown, props.className, props.style]);
+    return components.ui.renderView(props.view || 'form.InputFieldView', viewProps);
 }
 EmailField.defaultProps = {
     size: 'md',

package/ui/form/Field/Field.js

@@ -62,10 +62,10 @@ function Field(props) {
     var ComponentField = (0, isString_1["default"])(component)
         ? components.ui.getField("form.".concat(component))
         : component;
-    var componentProps = __assign(__assign(__assign(__assign({}, fieldModel), props), fieldModel.fieldProps), fieldModel.searchFieldProps);
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign(__assign(__assign({}, fieldModel), props), fieldModel.fieldProps), fieldModel.searchFieldProps)); }, [fieldModel, props]);
     // Render
     return (0, isFunction_1["default"])(ComponentField)
-        ? ComponentField(componentProps)
-        : React.createElement(ComponentField, __assign({}, componentProps));
+        ? ComponentField(viewProps)
+        : React.createElement(ComponentField, __assign({}, viewProps));
 }
 exports["default"] = React.memo(Field);

package/ui/form/FieldLayout/FieldLayout.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);
@@ -39,11 +28,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var get_1 = __importDefault(require("lodash-es/get"));
+var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 function FieldLayout(props) {
     var components = (0, hooks_1.useComponents)();
     // Error from state
     var errors = (0, hooks_1.useForm)().formSelector(function (state) { return (0, get_1["default"])(state, 'errors.' + props.attribute); });
-    return components.ui.renderView(props.view || 'form.FieldLayoutView', __assign(__assign({}, props), { errors: props.errors || errors }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        errors: props.errors || errors,
+        className: props.className,
+        label: props.label,
+        id: props.id,
+        required: props.required,
+        size: props.size,
+        children: props.children,
+        hint: props.hint
+    }); }, [errors, props.children, props.className, props.errors, props.hint, props.id, props.label, props.required, props.size]);
+    return components.ui.renderView(props.view || 'form.FieldLayoutView', viewProps);
 }
 exports["default"] = React.memo(FieldLayout);

package/ui/form/FieldList/FieldList.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
 export interface IFieldListItem extends IFieldWrapperInputProps, IUiComponent {
     /**

package/ui/form/FieldList/FieldList.js

@@ -46,7 +46,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 isBoolean_1 = __importDefault(require("lodash-es/isBoolean"));
 var range_1 = __importDefault(require("lodash-es/range"));
 var concat_1 = __importDefault(require("lodash-es/concat"));
@@ -54,7 +54,6 @@ var last_1 = __importDefault(require("lodash-es/last"));
 var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 var get_1 = __importDefault(require("lodash-es/get"));
 var react_use_1 = require("react-use");
-var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var Form_1 = require("../../form/Form/Form");
 var form_1 = require("../../../actions/form");
@@ -120,7 +119,7 @@ function FieldList(props) {
         provider: context.provider,
         reducer: context.reducer
     }); }, [context.provider, context.reducer, props.formId, props.model, props.prefix, props.size]);
-    var commonProps = {
+    var commonProps = (0, react_1.useMemo)(function () { return ({
         showAdd: props.showAdd,
         showRemove: props.showRemove,
         size: props.size,
@@ -129,11 +128,13 @@ function FieldList(props) {
         className: props.className,
         tableClassName: props.tableClassName,
         items: items
-    };
+    }); }, [items, props.className, props.disabled, props.required, props.showAdd, props.showRemove, props.size, props.tableClassName]);
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign(__assign({}, commonProps), props.viewProps), { forwardedRef: nodeRef, onAdd: onAdd, hasAlternatingColors: props.hasAlternatingColors, style: props.style, children: props.children })); }, [commonProps, onAdd, props.children, props.hasAlternatingColors, props.style, props.viewProps]);
+    var itemViewProps = (0, react_1.useMemo)(function () { return (__assign(__assign(__assign({}, commonProps), props.itemViewProps), { onRemove: onRemove })); }, [commonProps, onRemove, props.itemViewProps]);
     var FieldListView = props.view || components.ui.getView('form.FieldListView');
     var FieldListItemView = props.itemView || components.ui.getView('form.FieldListItemView');
-    return (React.createElement(Form_1.FormContext.Provider, { value: contextValue },
-        React.createElement(FieldListView, __assign({}, props.viewProps, commonProps, { forwardedRef: nodeRef, onAdd: onAdd, hasAlternatingColors: props.hasAlternatingColors }), !(0, isEmpty_1["default"])(storeToRowIndexMap) && (0, range_1["default"])(props.input.value || 0).map(function (index) { return (React.createElement(FieldListItemView, __assign({}, props.itemViewProps, commonProps, { key: isWithReduxForm ? storeToRowIndexMap[index] : index, onRemove: onRemove, prefix: props.input.name + '.' + index, rowIndex: index }))); }))));
+    return (react_1["default"].createElement(Form_1.FormContext.Provider, { value: contextValue },
+        react_1["default"].createElement(FieldListView, __assign({}, viewProps), !(0, isEmpty_1["default"])(storeToRowIndexMap) && (0, range_1["default"])(props.input.value || 0).map(function (index) { return (react_1["default"].createElement(FieldListItemView, __assign({}, itemViewProps, { key: isWithReduxForm ? storeToRowIndexMap[index] : index, prefix: props.input.name + '.' + index, rowIndex: index }))); }))));
 }
 FieldList.defaultProps = {
     initialValues: null,

package/ui/form/FieldSet/FieldSet.js

@@ -56,9 +56,14 @@ function FieldSet(props) {
         reducer: context.reducer
     }); }, [context.formId, context.model, context.prefix, context.provider, context.reducer,
         context.size, props.formId, props.model, props.prefix, props.size]);
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        className: props.className,
+        label: props.label,
+        children: props.children
+    }); }, [props]);
     var FieldSetView = props.view || components.ui.getView('form.FieldSetView');
     return (react_1["default"].createElement(Form_1.FormContext.Provider, { value: contextValue },
-        react_1["default"].createElement(FieldSetView, __assign({ className: props.className, label: props.label }, props),
+        react_1["default"].createElement(FieldSetView, __assign({}, viewProps),
             props.children,
             (props.fields || []).map(function (field, index) { return (react_1["default"].createElement(Field_1["default"], __assign({ key: index }, ((0, isString_1["default"])(field) ? { attribute: field } : field), { prefix: contextValue.prefix }))); }))));
 }

package/ui/form/FileField/FileField.js

@@ -71,9 +71,16 @@ function FileFieldComponent(props) {
             props.onChange(files);
         }
     }, [files, props]);
-    return (React.createElement(FileFieldView, __assign({}, props, { buttonView: props.buttonView, buttonProps: __assign({ label: props.filesLayout === FilesLayout.wall
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        buttonView: props.buttonView,
+        buttonProps: __assign({ label: props.filesLayout === FilesLayout.wall
                 ? __('Upload')
-                : __('Click to Upload'), size: props.size, disabled: props.disabled, onClick: onBrowse }, props.buttonProps), itemView: FileFieldItemView, items: files.map(function (file) {
+                : __('Click to Upload'), size: props.size, disabled: props.disabled, onClick: onBrowse }, props.buttonProps),
+        itemView: FileFieldItemView,
+        filesLayout: props.filesLayout,
+        className: props.className,
+        itemProps: props.itemProps,
+        items: files.map(function (file) {
             var data = file.getResultHttpMessage() || {};
             var item = {
                 uid: file.getUid(),
@@ -115,7 +122,10 @@ function FileFieldComponent(props) {
                 };
             }
             return item;
-        }) })));
+        })
+    }); }, [FileFieldItemView, files, onBrowse, onRemove, props.buttonProps, props.buttonView, props.className, props.disabled,
+        props.filesLayout, props.imagesOnly, props.imagesProcessor, props.itemProps, props.showRemove, props.size]);
+    return (React.createElement(FileFieldView, __assign({}, viewProps)));
 }
 function FileField(props) {
     if (process.env.IS_SSR) {

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { IAddressBarConfig } from '../../../hooks/useAddressBar';
 import { IFieldProps } from '../Field/Field';
 /**

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