@steroidsjs/core 3.0.0 → 3.0.2

package/ui/form/Button/Button.js

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

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

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

package/ui/form/CheckboxField/CheckboxField.js

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

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

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

package/ui/form/CheckboxListField/CheckboxListField.js

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

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

@@ -19,7 +19,7 @@ type CheckboxTreeItems = string | ({
  *
  * Список с вложенными чекбоксами. Используется в формах для создания иерархической структуры и выбора нескольких значений.
  */
-export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent, Pick<ITreeProps, 'levelPadding' | 'alwaysOpened' | 'showIcon' | 'customIcon'> {
+export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent, Pick<ITreeProps, 'levelPadding' | 'alwaysOpened' | 'customIcon'> {
     /**
      * Свойства для элемента input
      * @example { onKeyDown: ... }

package/ui/form/CheckboxTreeField/CheckboxTreeField.js

@@ -113,7 +113,15 @@ function CheckboxTreeField(props) {
     }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
     var CheckboxFieldView = components.ui.getView('form.CheckboxFieldView');
     var renderCheckbox = function (checkboxProps) { return (react_1["default"].createElement(CheckboxFieldView, __assign({}, checkboxProps))); };
-    return components.ui.renderView(props.view || 'form.CheckboxTreeFieldView', __assign(__assign({}, props), { items: treeItems, onItemSelect: onItemSelect, selectedIds: selectedIds, renderCheckbox: renderCheckbox }));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        items: treeItems,
+        onItemSelect: onItemSelect,
+        selectedIds: selectedIds,
+        renderCheckbox: renderCheckbox,
+        size: props.size,
+        levelPadding: props.levelPadding
+    }); }, [onItemSelect, props.levelPadding, props.size, renderCheckbox, selectedIds, treeItems]);
+    return components.ui.renderView(props.view || 'form.CheckboxTreeFieldView', viewProps);
 }
 CheckboxTreeField.defaultProps = {
     disabled: false,

package/ui/form/DateField/DateField.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { MaskitoOptions } from '@maskito/core';
+import { IAbsolutePositioningInputProps } from '@steroidsjs/core/hooks/useAbsolutePositioning';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateInputStateInput, IDateInputStateOutput } from './useDateInputState';
 /**
@@ -11,7 +12,7 @@ import { IDateInputStateInput, IDateInputStateOutput } from './useDateInputState
  * Он предоставляет пользователю удобный интерфейс для выбора даты с помощью календаря,
  * а также поддерживает настройку формата отображения даты и другие параметры.
  */
-export interface IDateFieldProps extends IDateInputStateInput, IUiComponent {
+export interface IDateFieldProps extends IDateInputStateInput, IUiComponent, Pick<IAbsolutePositioningInputProps, 'autoPositioning'> {
     /**
      * Свойства для view компонента
      */
@@ -26,7 +27,7 @@ export interface IDateFieldProps extends IDateInputStateInput, IUiComponent {
     maskOptions?: MaskitoOptions;
     [key: string]: any;
 }
-export interface IDateFieldViewProps extends IDateInputStateOutput, Pick<IDateFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'className' | 'calendarProps'> {
+export interface IDateFieldViewProps extends IDateInputStateOutput, Pick<IDateFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'className' | 'calendarProps' | 'autoPositioning'> {
     /**
      * Ref для input элемента, который накладывает маску
      */

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, 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,
@@ -47,6 +49,7 @@ DateField.defaultProps = {
     icon: true,
     required: false,
     showRemove: true,
+    autoPositioning: true,
     valueFormat: 'YYYY-MM-DD',
     maskOptions: (0, kit_1.maskitoDateOptionsGenerator)({
         mode: 'dd/mm/yyyy',

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';
 /**