@steroidsjs/core 3.0.0-beta.99 → 3.0.0

package/ui/form/DateTimeRangeField/DateTimeRangeField.js

@@ -10,19 +10,47 @@ 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;
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
+var kit_1 = require("@maskito/kit");
+var react_2 = require("@maskito/react");
 var useDateRange_1 = __importDefault(require("../../form/DateField/useDateRange"));
 var useDateTime_1 = __importDefault(require("../../form/DateField/useDateTime"));
 var useDateInputState_1 = __importDefault(require("../../form/DateField/useDateInputState"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
-var DATE_TIME_SEPARATOR = ' ';
+var DATE_TIME_SEPARATOR = ', ';
 function DateTimeRangeField(props) {
+    var _a, _b;
     var components = (0, hooks_1.useComponents)();
+    var maskInputFromRef = (0, react_2.useMaskito)({ options: (_a = props.maskOptions) === null || _a === void 0 ? void 0 : _a.from });
+    var maskInputToRef = (0, react_2.useMaskito)({ options: (_b = props.maskOptions) === null || _b === void 0 ? void 0 : _b.to });
     // Global onChange (from props)
     var onChange = (0, react_1.useCallback)(function () {
         var _a;
@@ -34,7 +62,7 @@ function DateTimeRangeField(props) {
         }
     }, [props.attributeFrom, props.attributeTo, props.inputFrom.value, props.inputTo.value, props.onChange]);
     // Input 'from'
-    var _a = (0, useDateInputState_1["default"])({
+    var _c = (0, useDateInputState_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         input: props.inputFrom,
@@ -45,9 +73,9 @@ function DateTimeRangeField(props) {
         useUTC: props.useUTC,
         dateInUTC: props.dateInUTC,
         onChange: onChange
-    }), isOpenedFrom = _a.isOpened, onCloseFrom = _a.onClose, inputPropsFrom = _a.inputProps, onClearFrom = _a.onClear, onNow = _a.onNow;
+    }), isOpenedFrom = _c.isOpened, onCloseFrom = _c.onClose, inputPropsFrom = _c.inputProps, onClearFrom = _c.onClear, onNow = _c.onNow;
     // Input 'to'
-    var _b = (0, useDateInputState_1["default"])({
+    var _d = (0, useDateInputState_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         input: props.inputTo,
@@ -58,24 +86,24 @@ function DateTimeRangeField(props) {
         useUTC: props.useUTC,
         dateInUTC: props.dateInUTC,
         onChange: onChange
-    }), isOpenedTo = _b.isOpened, onCloseTo = _b.onClose, inputPropsTo = _b.inputProps, onClearTo = _b.onClear;
-    var _c = (0, useDateTime_1["default"])({
+    }), isOpenedTo = _d.isOpened, onCloseTo = _d.onClose, inputPropsTo = _d.inputProps, onClearTo = _d.onClear;
+    var _e = (0, useDateTime_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         dateTimeSeparator: DATE_TIME_SEPARATOR,
         useUTC: props.useUTC,
         dateInUTC: props.dateInUTC,
         input: props.inputFrom
-    }), dateValueFormat = _c.dateValueFormat, dateValueFrom = _c.dateValue, timeValueFrom = _c.timeValue, onDateFromSelect = _c.onDateSelect, onTimeFromSelect = _c.onTimeSelect;
-    var _d = (0, useDateTime_1["default"])({
+    }), dateValueFormat = _e.dateValueFormat, dateValueFrom = _e.dateValue, timeValueFrom = _e.timeValue, onDateFromSelect = _e.onDateSelect, onTimeFromSelect = _e.onTimeSelect;
+    var _f = (0, useDateTime_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         dateTimeSeparator: DATE_TIME_SEPARATOR,
         useUTC: props.useUTC,
         dateInUTC: props.dateInUTC,
         input: props.inputTo
-    }), dateValueTo = _d.dateValue, timeValueTo = _d.timeValue, onDateToSelect = _d.onDateSelect, onTimeToSelect = _d.onTimeSelect;
-    var _e = (0, useDateRange_1["default"])({
+    }), dateValueTo = _f.dateValue, timeValueTo = _f.timeValue, onDateToSelect = _f.onDateSelect, onTimeToSelect = _f.onTimeSelect;
+    var _g = (0, useDateRange_1["default"])({
         onClearFrom: onClearFrom,
         onCloseTo: onCloseTo,
         onCloseFrom: onCloseFrom,
@@ -85,9 +113,21 @@ function DateTimeRangeField(props) {
         inputFrom: props.inputFrom,
         inputTo: props.inputTo,
         useSmartFocus: false,
+        hasInitialFocus: props.hasInitialFocus,
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat
-    }), focus = _e.focus, onClose = _e.onClose, onClear = _e.onClear, extendedInputPropsFrom = _e.extendedInputPropsFrom, extendedInputPropsTo = _e.extendedInputPropsTo;
+    }), focus = _g.focus, onClose = _g.onClose, onClear = _g.onClear, extendedInputPropsFrom = _g.extendedInputPropsFrom, extendedInputPropsTo = _g.extendedInputPropsTo;
+    react_1["default"].useEffect(function () {
+        if (extendedInputPropsFrom.ref && extendedInputPropsTo.ref) {
+            maskInputFromRef(extendedInputPropsFrom.ref.current);
+            maskInputToRef(extendedInputPropsTo.ref.current);
+        }
+    }, [
+        extendedInputPropsFrom.ref,
+        extendedInputPropsTo.ref,
+        maskInputFromRef,
+        maskInputToRef,
+    ]);
     // Calendar props
     var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: [dateValueFrom, dateValueTo], onChange: focus === 'from' ? onDateFromSelect : onDateToSelect, valueFormat: dateValueFormat }, props.calendarProps)); }, [dateValueFormat, dateValueFrom, dateValueTo, focus, onDateFromSelect, onDateToSelect, props.calendarProps]);
     // TimePanel props
@@ -110,9 +150,22 @@ DateTimeRangeField.defaultProps = {
     displayFormat: 'DD.MM.YYYY' + DATE_TIME_SEPARATOR + 'HH:mm',
     valueFormat: 'YYYY-MM-DD' + DATE_TIME_SEPARATOR + 'HH:mm',
     showRemove: true,
+    hasInitialFocus: false,
     useUTC: false,
     dateInUTC: false,
     icon: true,
-    size: 'md'
+    size: 'md',
+    maskOptions: {
+        from: (0, kit_1.maskitoDateTimeOptionsGenerator)({
+            dateMode: 'dd/mm/yyyy',
+            timeMode: 'HH:MM',
+            dateSeparator: '.'
+        }),
+        to: (0, kit_1.maskitoDateTimeOptionsGenerator)({
+            dateMode: 'dd/mm/yyyy',
+            timeMode: 'HH:MM',
+            dateSeparator: '.'
+        })
+    }
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateTimeRangeField', DateTimeRangeField, { attributeSuffixes: ['from', 'to'] });

package/ui/form/DropDownField/DropDownField.d.ts

@@ -86,7 +86,11 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
     groupAttribute?: string;
     /**
      * Свойство, которое устанавливает один type и src контента для всех пунктов
-     * @example {type: 'icon', src: 'user'}
+     * @example
+     * {
+     *  type: 'icon',
+     *  src: 'user'
+     * }
      */
     itemsContent?: {
         type: ContentType | string;
@@ -94,7 +98,15 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
     };
     /**
      * Элементы вложенные внутрь DropDownField
-     * @example [{id: 1, label: 'Ivan Ivanov', type: 'icon', typeSrc: 'user'}]
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   label: 'Ivan Ivanov',
+     *   type: 'icon',
+     *   typeSrc: 'user'
+     *  }
+     * ]
      */
     items?: IDropDownFieldItem[] | DataProviderItems;
     /**
@@ -104,12 +116,20 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, Omit<IData
     showEllipses?: boolean;
     /**
     * Добавляет кнопку при нажатии на которую выбираются все элементы, работает только при multiple: true
-    * @example {label: 'All', id: 'all'}
+    * @example
+     * {
+     *  label: 'All',
+     *  id: 'all'
+     * }
     */
     itemToSelectAll?: boolean | {
         label: string;
         id: string;
     };
+    /**
+     * Кастомная вьюшка для элемента
+     */
+    itemView?: CustomView;
     [key: string]: any;
 }
 export interface IDropDownFieldViewProps extends IDropDownFieldProps {

package/ui/form/DropDownField/DropDownField.js

@@ -170,7 +170,7 @@ function DropDownField(props) {
             onReset();
         }
     }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
-    var renderItemView = function (item, type, src) { return components.ui.renderView('form.DropDownFieldItemView', {
+    var renderItemView = function (item, type, src) { return components.ui.renderView(props.itemView || 'form.DropDownFieldItemView', {
         item: __assign(__assign({}, item), { contentSrc: src, contentType: type }),
         selectedIds: selectedIds,
         size: props.size,

package/ui/form/EmailField/EmailField.d.ts

@@ -1,5 +1,11 @@
 import { IBaseFieldProps } from '../InputField/InputField';
 import { IFieldWrapperInputProps } from '../Field/fieldWrapper';
+/**
+ * EmailField
+ *
+ * Поле ввода почты. Этот компонент представляет собой поле ввода почты.
+ *
+ **/
 export interface IEmailFieldProps extends IBaseFieldProps, IFieldWrapperInputProps {
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IEmailFieldProps>;

package/ui/form/EmailField/EmailField.js

@@ -19,10 +19,6 @@ var react_1 = __importDefault(require("react"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var useInputTypeEmail_1 = __importDefault(require("./hooks/useInputTypeEmail"));
-/**
- * EmailField
- * Поле для ввода почты
- */
 function EmailField(props) {
     var components = (0, hooks_1.useComponents)();
     var _a = (0, hooks_1.useSaveCursorPosition)(props.input), currentInputRef = _a.inputRef, onChange = _a.onChange;

package/ui/form/Field/Field.d.ts

@@ -16,7 +16,15 @@ export interface IFieldProps extends IFieldWrapperInputProps {
     attribute?: any;
     /**
      * Модель с полями формы
-     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
+     * @example
+     * {
+     *  attributes: [
+     *   {
+     *    attribute: 'category',
+     *    field: 'DropDownField'
+     *   }
+     *  ]
+     * }
      */
     model?: Model;
     /**

package/ui/form/Field/Field.js

@@ -50,7 +50,7 @@ function Field(props) {
     var fieldModel = (0, react_1.useMemo)(function () {
         var _a;
         var model = props.model || context.model;
-        var modelAttributes = (((_a = components.meta.getModel(model)) === null || _a === void 0 ? void 0 : _a.attributes) || []);
+        var modelAttributes = (((_a = components.meta.getModel(model)) === null || _a === void 0 ? void 0 : _a.attributes) || (model === null || model === void 0 ? void 0 : model.attributes) || []);
         var result = modelAttributes
             .find(function (field) { return field.attribute === props.attribute; });
         return result || {};

package/ui/form/Field/fieldWrapper.d.ts

@@ -16,7 +16,15 @@ export interface IFieldWrapperInputProps {
     attribute?: string;
     /**
      * Модель с полями формы
-     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
+     * @example
+     * {
+     *  attributes: [
+     *   {
+     *    attribute: 'category',
+     *    field: 'DropDownField'
+     *   }
+     *  ]
+     * }
      */
     model?: string | ((...args: any[]) => any) | any;
     /**

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

@@ -1,12 +1,8 @@
 import * as React from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
-/**
- * FieldList
- * Создает список из сгруппированных полей формы
- */
 export interface IFieldListItem extends IFieldWrapperInputProps, IUiComponent {
     /**
-     * Будет ли отображён item ?
+     * Будет ли отображён item?
      * @example true
      */
     visible?: boolean;
@@ -25,15 +21,25 @@ export interface IFieldListItem extends IFieldWrapperInputProps, IUiComponent {
      */
     headerClassName?: CssClassName;
     /**
-     * Заголовок для колонки таблицы.
+     * Заголовок для колонки таблицы
      */
     title?: string;
     [key: string]: any;
 }
+/**
+ * FieldList
+ *
+ * Создает список из сгруппированных полей формы.
+ * Для загрузки файлов с помощью `FileField` внутри строк `FieldList`, нужно использовать форму с флагом `useRedux`.
+ */
 export interface IFieldListProps extends IFieldWrapperInputProps, IUiComponent {
     /**
      * Начальные значения в полях
-     * @example {name: 'Ivan', amount: 5}
+     * @example
+     * {
+     *  name: 'Ivan',
+     *  amount: 5
+     * }
      */
     initialValues?: {
         [key: string]: any;

package/ui/form/FieldList/FieldList.js

@@ -33,6 +33,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -40,6 +49,10 @@ exports.__esModule = true;
 var React = __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"));
+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");
@@ -53,15 +66,29 @@ function FieldList(props) {
     var context = (0, react_1.useContext)(Form_1.FormContext);
     // Resolve model
     var modelAttributes = (_a = components.meta.getModel(props.model)) === null || _a === void 0 ? void 0 : _a.attributes;
+    var isWithReduxForm = (0, hooks_1.useSelector)(function (state) { return (0, get_1["default"])(state, ['form', context.formId]) || null; });
     var dispatch = context.provider.useDispatch();
+    // Mapper for preserving the correct sequence of rows on the UI
+    var _b = (0, react_1.useState)((0, range_1["default"])(props.input.value) || []), storeToRowIndexMap = _b[0], setStoreToRowIndexMap = _b[1];
+    var addRowIndexes = (0, react_1.useCallback)(function (rowsCount) {
+        setStoreToRowIndexMap(function (prevMap) {
+            var lastIndex = !(0, isEmpty_1["default"])(prevMap) ? (0, last_1["default"])(prevMap) + 1 : 0;
+            return (0, concat_1["default"])(prevMap, (0, range_1["default"])(lastIndex, lastIndex + rowsCount));
+        });
+    }, []);
+    var removeRowIndex = (0, react_1.useCallback)(function (rowIndex) {
+        setStoreToRowIndexMap(function (prevMap) { return __spreadArray(__spreadArray([], prevMap.slice(0, rowIndex), true), prevMap.slice(rowIndex + 1), true); });
+    }, []);
     // Add and Remove handlers
     var onAdd = (0, react_1.useCallback)(function (rowsCount) {
         if (rowsCount === void 0) { rowsCount = 1; }
+        addRowIndexes(rowsCount);
         dispatch((0, form_1.formArrayAdd)(context.formId, props.input.name, rowsCount, props.initialValues));
-    }, [context.formId, dispatch, props.initialValues, props.input.name]);
+    }, [context.formId, dispatch, props.initialValues, props.input.name, addRowIndexes]);
     var onRemove = (0, react_1.useCallback)(function (rowIndex) {
+        removeRowIndex(rowIndex);
         dispatch((0, form_1.formArrayRemove)(context.formId, props.input.name, rowIndex));
-    }, [context.formId, dispatch, props.input.name]);
+    }, [context.formId, dispatch, props.input.name, removeRowIndex]);
     // Add initial rows
     (0, react_use_1.useMount)(function () {
         if (!props.input.value) {
@@ -106,8 +133,7 @@ function FieldList(props) {
     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, range_1["default"])(props.input.value || 0)
-            .map(function (index) { return (React.createElement(FieldListItemView, __assign({}, props.itemViewProps, commonProps, { key: index, onRemove: onRemove, prefix: props.input.name + '.' + index, rowIndex: index }))); }))));
+        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 }))); }))));
 }
 FieldList.defaultProps = {
     initialValues: null,

package/ui/form/FileField/FileField.js

@@ -66,6 +66,11 @@ function FileFieldComponent(props) {
             props.onLoad();
         }
     }, [isFilesLoaded, props]);
+    (0, react_1.useEffect)(function () {
+        if (props.onChange) {
+            props.onChange(files);
+        }
+    }, [files, props]);
     return (React.createElement(FileFieldView, __assign({}, props, { 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) {

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

@@ -19,7 +19,15 @@ export interface IFormProps extends IUiComponent {
     prefix?: string;
     /**
      * Модель с полями формы
-     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
+     * @example
+     * {
+     *  attributes: [
+     *   {
+     *    attribute: 'category',
+     *    field: 'DropDownField'
+     *   }
+     *  ]
+     * }
      */
     model?: string | ((...args: any[]) => any) | any;
     /**
@@ -45,7 +53,11 @@ export interface IFormProps extends IUiComponent {
     /**
      * Набор с правилами для проверки соответствия значений полей формы определенному формату.
      * Проверка запускается в момент отправки формы (в обработчике onSubmit).
-     * @example [['name', 'required'], ['age', 'integer']]
+     * @example
+     * [
+     *  ['name', 'required'],
+     *  ['age', 'integer']
+     * ]
      */
     validators?: any[];
     /**
@@ -97,7 +109,13 @@ export interface IFormProps extends IUiComponent {
     viewProps?: any;
     /**
      * Поля, которые необходимо поместить в форму
-     * @example [{attribute: 'category', component: 'DropDownField'}]
+     * @example
+     * [
+     *  {
+     *   attribute: 'category',
+     *   component: 'DropDownField'
+     *  }
+     * ]
      */
     fields?: (string | IFieldProps)[];
     /**
@@ -131,6 +149,10 @@ export interface IFormProps extends IUiComponent {
      * @example false
      */
     autoDestroy?: boolean;
+    /**
+     * Дополнительные кнопки
+     */
+    buttons?: React.ReactNode;
     [key: string]: any;
 }
 export interface IFormViewProps {
@@ -141,6 +163,7 @@ export interface IFormViewProps {
     autoFocus?: boolean;
     style?: CustomStyle;
     children?: React.ReactNode;
+    buttons?: React.ReactNode;
 }
 export interface IFormReducerState {
     values: any;

package/ui/form/Form/Form.js

@@ -129,7 +129,7 @@ function Form(props) {
     }
     // 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, setErrors = _b.setErrors, reducer = _b.reducer, dispatch = _b.dispatch;
+    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;
     // Sync with address bar
     (0, react_use_1.useUpdateEffect)(function () {
         updateQuery(values);
@@ -147,6 +147,9 @@ function Form(props) {
             dispatch((0, form_2.formDestroy)(props.formId));
         }
     });
+    // Clear Errors
+    var prevValues = (0, react_use_1.usePrevious)(values);
+    (0, react_use_1.useUpdateEffect)(function () { return (0, form_1.clearErrors)(values, prevValues, errors, setErrors); }, [errors, prevValues, setErrors, values]);
     // OnChange handler
     (0, react_use_1.useUpdateEffect)(function () {
         if (props.onChange) {
@@ -164,7 +167,6 @@ function Form(props) {
                 switch (_b.label) {
                     case 0:
                         dispatch((0, form_2.formSetSubmitting)(props.formId, true));
-                        // TODO
                         if (e) {
                             e.preventDefault();
                         }
@@ -329,7 +331,7 @@ function Form(props) {
     }
     // 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, className: props.className, style: props.style, autoFocus: props.autoFocus }))
+        ? 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 }))
         : props.children));
 }
 Form.defaultProps = {

package/ui/form/ImageField/ImageField.d.ts

@@ -6,7 +6,15 @@ import { IButtonProps } from '../Button/Button';
 export interface ICropConfig {
     /**
      * Изначальные параметры обрезки изображения
-     * @example {unit: 'px', aspect: 1, x: 0, y: 0, width: 200, height: 200}
+     * @example
+     * {
+     *  unit: 'px',
+     *  aspect: 1,
+     *  x: 0,
+     *  y: 0,
+     *  width: 200,
+     *  height: 200
+     * }
      */
     initialValues?: Crop;
     /**

package/ui/form/InputField/InputField.d.ts

@@ -15,7 +15,7 @@ export type IElementInputType = 'button' | 'checkbox' | 'color' | 'date' | 'date
 export interface IBaseFieldProps extends IFieldWrapperInputProps, IUiComponent {
     /**
      * Свойства для элемента input
-     * @example {onKeyDown: ...}
+     * @example { onKeyDown: ... }
      */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     /**
@@ -25,7 +25,10 @@ export interface IBaseFieldProps extends IFieldWrapperInputProps, IUiComponent {
     showClear?: boolean;
     /**
      * Свойства для компонента отображения
-     * @example {customHandler: () => {...}}
+     * @example
+     * {
+     *  customHandler: () => {...}
+     * }
      */
     viewProps?: {
         [key: string]: any;

package/ui/form/InputField/hooks/useInputFieldWarningByType.js

@@ -1,6 +1,7 @@
 "use strict";
 exports.__esModule = true;
 exports.useInputFieldWarningByType = exports.INPUT_TYPES_SUPPORTED_SELECTION = void 0;
+/* eslint-disable no-console */
 /* eslint-disable max-len */
 /* eslint-disable no-unused-expressions */
 var react_use_1 = require("react-use");

package/ui/form/NumberField/NumberField.js

@@ -10,12 +10,35 @@ 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 = require("react");
+var react_1 = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var useInputTypeNumber_1 = __importDefault(require("./hooks/useInputTypeNumber"));
@@ -23,6 +46,7 @@ var DEFAULT_STEP = 1;
 function NumberField(props) {
     var components = (0, hooks_1.useComponents)();
     var _a = (0, hooks_1.useSaveCursorPosition)(props.input), currentInputRef = _a.inputRef, onChange = _a.onChange;
+    var step = react_1["default"].useMemo(function () { var _a; return (_a = props.step) !== null && _a !== void 0 ? _a : DEFAULT_STEP; }, [props.step]);
     var onInputChange = (0, useInputTypeNumber_1["default"])(currentInputRef, {
         max: props.max,
         min: props.min,
@@ -30,15 +54,18 @@ function NumberField(props) {
     }, onChange).onInputChange;
     var onStep = (0, react_1.useCallback)(function (isIncrement) {
         var _a;
-        var step = props.step || DEFAULT_STEP;
         onChange(null, String(Number((_a = currentInputRef === null || currentInputRef === void 0 ? void 0 : currentInputRef.current) === null || _a === void 0 ? void 0 : _a.value) + (isIncrement ? step : -step)));
-    }, [currentInputRef, onChange, props.step]);
+    }, [currentInputRef, onChange, step]);
     var onStepUp = (0, react_1.useCallback)(function () {
-        onStep(true);
-    }, [onStep]);
+        if (!(Number(currentInputRef.current.value) + step > props.max)) {
+            onStep(true);
+        }
+    }, [currentInputRef, onStep, props.max, step]);
     var onStepDown = (0, react_1.useCallback)(function () {
-        onStep(false);
-    }, [onStep]);
+        if (!(Number(currentInputRef.current.value) - step < props.min)) {
+            onStep(false);
+        }
+    }, [currentInputRef, onStep, props.min, step]);
     var onKeyDown = (0, react_1.useCallback)(function (event) {
         if (event.key === 'ArrowUp') {
             onStepUp();

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

@@ -43,7 +43,12 @@ export interface ISliderFieldProps extends IFieldWrapperInputProps, IUiComponent
      * Метки на ползунке. В объекте '{'key: value'}' key определяет положение, а value определяет, что будет отображаться.
      * Если вы хотите задать стиль определенной точки метки, значением должен быть объект,
      * содержащий свойства style и label.
-     * @example { min: 20, 40: 40, max: 100 }
+     * @example
+     * {
+     *  min: 20,
+     *  40: 40,
+     *  max: 100
+     * }
      */
     marks?: Record<string, {
         style: {
@@ -54,7 +59,10 @@ export interface ISliderFieldProps extends IFieldWrapperInputProps, IUiComponent
     /**
      * Функция, вызываемая после отпускания tip'а у слайдера (при событии onmouseup)
      * @see https://github.com/schrodinger/rc-slider
-     * @example {() => console.log('Slider handler is released')}
+     * @example
+     * {
+     *  () => console.log('Slider handler is released')
+     * }
      */
     onAfterChange?: (value: any) => void;
     [key: string]: any;