@steroidsjs/core 3.0.0-beta.10 → 3.0.0-beta.101

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

@@ -1,17 +1,13 @@
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * HtmlField
- * Компонент для создания HTML-разметки, использующий WYSIWYG-реадактор
+ * Компонент для создания HTML-разметки, использующий WYSIWYG редактор
  */
-export interface IHtmlFieldProps extends IFieldWrapperInputProps, IFieldWrapperOutputProps {
+export interface IHtmlFieldProps extends IFieldWrapperInputProps, IFieldWrapperOutputProps, IUiComponent {
     /**
      * Конфигурация wysiwyg реадактора
      */
     editorProps?: any;
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
     /**
      * Url на который будет отправлена форма загрузки файла
      * @example /api/v1/upload-files
@@ -23,11 +19,6 @@ export interface IHtmlFieldProps extends IFieldWrapperInputProps, IFieldWrapperO
      * @example origin
      */
     uploadImagesProcessor?: string;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * Обработчик события при фокусе на редактора
      * @param event

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

@@ -1,8 +1,9 @@
 import ReactCropProps, { Crop } from 'react-image-crop';
 import { IModalProps } from '../../modal/Modal/Modal';
+import { IFileInput } from '../../../hooks/useFile';
 import { IFieldWrapperInputProps } from '../Field/fieldWrapper';
-import { IFileHocInput, IFileHocOutput } from '../../../hoc/file';
-export interface ICropInputProps {
+import { IButtonProps } from '../Button/Button';
+export interface ICropConfig {
     /**
      * Изначальные параметры обрезки изображения
      * @example {unit: 'px', aspect: 1, x: 0, y: 0, width: 200, height: 200}
@@ -19,16 +20,12 @@ export interface ICropInputProps {
      */
     reactImageCropProps?: ReactCropProps;
 }
-export interface IImageFieldProps extends IFieldWrapperInputProps, Omit<IFileHocInput, 'multiple' | 'imagesOnly'>, IFileHocOutput {
-    /**
-     * Дополнительный CSS-класс для компонента
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение внешнего вида компонента
-     * @example MyCustomView
-     */
-    view?: CustomView;
+/**
+ * ImageField
+ *
+ * Компонент для загрузки изображений с возможностью обрезки и предпросмотра.
+ **/
+export interface IImageFieldProps extends IFieldWrapperInputProps, Omit<IFileInput, 'multiple' | 'imagesOnly'>, IUiComponent {
     /**
      * Переопределение внешнего вида модального окна
      * @example MyCustomModalView
@@ -41,15 +38,19 @@ export interface IImageFieldProps extends IFieldWrapperInputProps, Omit<IFileHoc
     /**
      * Параметры обрезки
      */
-    crop?: ICropInputProps;
+    crop?: ICropConfig;
     /**
      * Название кнопки
      * @example 'Загрузить'
      */
     label?: string;
+    /**
+     * Пропсы для кнопки
+     */
+    buttonProps?: IButtonProps;
     [key: string]: any;
 }
-export interface ICropOutputProps extends ICropInputProps {
+export interface ICropOutputProps extends ICropConfig {
     onSubmit: (crop: Crop, imageId: any) => void;
 }
 export interface IImageFieldModalViewProps extends IModalProps {

package/ui/form/ImageField/ImageField.js

@@ -144,6 +144,10 @@ ImageField.defaultProps = {
         initialValues: {
             aspect: 1
         }
+    },
+    buttonProps: {
+        color: 'basic',
+        outline: true
     }
 };
 exports["default"] = (0, fieldWrapper_1["default"])('ImageField', ImageField);

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

@@ -1,49 +1,46 @@
 import * as React from 'react';
-import { ChangeEventHandler, ReactNode } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { MaskitoOptions } from '@maskito/core';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
-type IElementInputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | string;
+export declare const MASK_PRESETS: {
+    date: Required<MaskitoOptions>;
+    phone: {
+        mask: any[];
+    };
+    card: {
+        mask: any[];
+    };
+};
+export type IElementInputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | string;
+export interface IBaseFieldProps extends IFieldWrapperInputProps, IUiComponent {
+    /**
+     * Свойства для элемента input
+     * @example {onKeyDown: ...}
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Показывать иконку очищения поля
+     * @example true
+    */
+    showClear?: boolean;
+    /**
+     * Свойства для компонента отображения
+     * @example {customHandler: () => {...}}
+     */
+    viewProps?: {
+        [key: string]: any;
+    };
+}
 /**
  * InputField
  * Поле ввода текста
  */
-export interface IInputFieldProps extends IFieldWrapperInputProps {
+export interface IInputFieldProps extends IBaseFieldProps {
     /**
      * HTML Тип
      * @example email
      */
     type?: IElementInputType;
-    /**
-     * Placeholder подсказка
-     * @example Your text...
-     */
-    placeholder?: string;
-    /**
-     * Свойства для элемента \<input /\>
-     * @example {onKeyDown: ...}
-     */
-    inputProps?: any;
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: any;
-    /**
-     */
-    viewProps?: any;
-    /**
-     * Размер Input
-     * @example 'large'
-     */
-    size?: Size;
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
     /**
      * Изображение или React-нода, которая будет отрендерена слева от поля.
      * @example require('icon.png') | <component/>
@@ -51,7 +48,7 @@ export interface IInputFieldProps extends IFieldWrapperInputProps {
     textBefore?: number | ReactNode | string;
     /**
      * Изображение или React-нода, которая будет отрендерена справа от поля.
-     * @example require('icon.png') | <component/>
+     * @example require('icon.png') | '<component/>'
      */
     textAfter?: number | ReactNode | string;
     /**
@@ -66,34 +63,38 @@ export interface IInputFieldProps extends IFieldWrapperInputProps {
     addonAfter?: ReactNode | string;
     /**
      * Конфигурация маски
-     * @example { mask: '+7 (999) 999-99-99' }
+     * @example: {
+         mask: [
+             ...Array(4).fill(/\d/),
+             '-',
+             ...Array(4).fill(/\d/),
+             '-',
+             ...Array(4).fill(/\d/),
+             '-',
+             ...Array(4).fill(/\d/),
+         ],
+        }
+     */
+    maskOptions?: MaskitoOptions;
+    /**
+     * Пользовательская иконка svg или название иконки
      */
-    maskProps?: any;
-    success?: boolean;
-    failed?: boolean;
-    [key: string]: any;
+    leadIcon?: React.ReactElement | string;
 }
 export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOutputProps {
-    style?: any;
-    errors?: string[];
-    placeholder?: string;
-    type?: string;
     inputProps: {
         type: string;
         name: string;
-        onChange: ChangeEventHandler<Element>;
+        onInput: (event: any, value?: string) => void;
         value: string | number;
         placeholder: string;
-        disabled: string;
+        disabled: boolean;
     };
-    textBefore?: number | ReactNode | string;
-    textAfter?: number | ReactNode | string;
-    addonBefore?: ReactNode | string;
-    addonAfter?: ReactNode | string;
-    maskProps?: any;
+    onClear?: () => void;
     onFocus?: (e: Event | React.FocusEvent) => void;
     onBlur?: (e: Event | React.FocusEvent) => void;
     onMouseDown?: (e: Event | React.MouseEvent) => void;
+    defaultValue?: string;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IInputFieldProps>;
 export default _default;

package/ui/form/InputField/InputField.js

@@ -33,43 +33,89 @@ 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 };
 };
 exports.__esModule = true;
+exports.MASK_PRESETS = void 0;
+/* eslint-disable no-unused-expressions */
+/* eslint-disable max-len */
 var React = __importStar(require("react"));
-var react_input_mask_1 = __importDefault(require("react-input-mask"));
 var react_1 = require("react");
+var react_2 = require("@maskito/react");
+var kit_1 = require("@maskito/kit");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
+var useInputFieldWarningByType_1 = require("./hooks/useInputFieldWarningByType");
+exports.MASK_PRESETS = {
+    date: (0, kit_1.maskitoDateOptionsGenerator)({
+        mode: 'dd/mm/yyyy'
+    }),
+    phone: {
+        mask: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([
+            '+',
+            '7',
+            ' ',
+            '('
+        ], Array(3).fill(/\d/), true), [
+            ')',
+            ' '
+        ], false), Array(3).fill(/\d/), true), [
+            '-'
+        ], false), Array(2).fill(/\d/), true), [
+            ' '
+        ], false), Array(2).fill(/\d/), true)
+    },
+    card: {
+        mask: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], Array(4).fill(/\d/), true), [
+            '-'
+        ], false), Array(4).fill(/\d/), true), [
+            '-'
+        ], false), Array(4).fill(/\d/), true), [
+            '-'
+        ], false), Array(4).fill(/\d/), true)
+    }
+};
 function InputField(props) {
     var components = (0, hooks_1.useComponents)();
+    var maskedInputRef = (0, react_2.useMaskito)({
+        options: props.maskOptions
+    });
+    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), inputRef = _a.inputRef, onChange = _a.onChange;
+    React.useEffect(function () {
+        if (inputRef.current) {
+            maskedInputRef(inputRef.current);
+        }
+    }, [inputRef, maskedInputRef]);
+    (0, useInputFieldWarningByType_1.useInputFieldWarningByType)(props.type);
+    var onClear = React.useCallback(function () { return props.input.onChange(''); }, [props.input]);
     var inputProps = (0, react_1.useMemo)(function () {
         var _a;
-        return (__assign({ type: props.type, name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: function (value) { return props.input.onChange(value); }, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
-    }, [props.disabled, props.input, props.inputProps, props.placeholder, props.type]);
+        return (__assign({ type: props.type, name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onInput: onChange, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
+    }, [onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder, props.type]);
     // No render for hidden input
     if (props.type === 'hidden') {
         return null;
     }
-    // react-input-mask HOC for mask
-    if (props.maskProps) {
-        var maskOnChange = function (e) { return props.input.onChange(e.target.value); };
-        return (React.createElement(react_input_mask_1["default"], __assign({}, inputProps, props.maskProps, { onChange: maskOnChange }), components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, onChange: maskOnChange }))));
-    }
-    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps }));
+    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, 
+        // If type was recognized as unsupported in InputField, then we do not pass ref.
+        inputRef: useInputFieldWarningByType_1.INPUT_TYPES_SUPPORTED_SELECTION.includes(props.type) ? inputRef : null, onClear: onClear }));
 }
 InputField.defaultProps = {
     type: 'text',
-    size: 'medium',
+    size: 'md',
     disabled: false,
     required: false,
-    className: '',
-    placeholder: '',
-    errors: null,
-    textBefore: null,
-    textAfter: null,
-    addonBefore: null,
-    addonAfter: null
+    showClear: false,
+    maskOptions: null
 };
 exports["default"] = (0, fieldWrapper_1["default"])('InputField', InputField);

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

@@ -0,0 +1,3 @@
+import { IElementInputType } from '../InputField';
+export declare const INPUT_TYPES_SUPPORTED_SELECTION: string[];
+export declare const useInputFieldWarningByType: (type: IElementInputType) => void;

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

@@ -0,0 +1,35 @@
+"use strict";
+exports.__esModule = true;
+exports.useInputFieldWarningByType = exports.INPUT_TYPES_SUPPORTED_SELECTION = void 0;
+/* eslint-disable max-len */
+/* eslint-disable no-unused-expressions */
+var react_use_1 = require("react-use");
+exports.INPUT_TYPES_SUPPORTED_SELECTION = ['text', 'search', 'tel', 'url', 'password'];
+var INPUT_TYPES_REPLACEMENT_HASH = {
+    email: 'EmailField',
+    date: 'DateField',
+    month: 'DateField',
+    week: 'CalendarSystem',
+    time: 'DateTimeField',
+    'datetime-local': 'DateField',
+    number: 'NumberField',
+    range: 'SliderField',
+    checkbox: 'CheckboxField',
+    radio: 'RadioField',
+    button: 'Button',
+    file: 'FileField',
+    submit: 'Button',
+    image: 'Button',
+    reset: 'Button'
+};
+var useInputFieldWarningByType = function (type) {
+    (0, react_use_1.useMount)(function () {
+        if (!exports.INPUT_TYPES_SUPPORTED_SELECTION.includes(type)) {
+            var recommendedUiComponent = "<".concat(INPUT_TYPES_REPLACEMENT_HASH[type], " />");
+            INPUT_TYPES_REPLACEMENT_HASH[type]
+                ? console.warn("<InputField /> with \"".concat(type, "\" type does not support setSelectionRange() method. Try to use ").concat(recommendedUiComponent, " instead."))
+                : console.warn("< InputField /> with \"".concat(type, "\" type does not support setSelectionRange() method.Try to use native <input /> tag."));
+        }
+    });
+};
+exports.useInputFieldWarningByType = useInputFieldWarningByType;

package/ui/form/MaskField/MaskField.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IInputFieldProps } from '../InputField/InputField';
+/**
+ * MaskField
+ *
+ * Компонент поля ввода текста с маской.
+ **/
+export type IMaskFieldProps = IInputFieldProps;
+declare function MaskField(props: IMaskFieldProps): JSX.Element;
+export default MaskField;

package/ui/form/MaskField/MaskField.js

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

package/ui/form/MaskField/index.d.ts

@@ -0,0 +1,2 @@
+import MaskField from './MaskField';
+export default MaskField;

package/ui/form/MaskField/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var MaskField_1 = __importDefault(require("./MaskField"));
+exports["default"] = MaskField_1["default"];

package/ui/form/NavField/NavField.d.ts

@@ -3,9 +3,12 @@ import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Fi
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
 /**
  * NavField
- * Навигация как часть формы
- */
-export interface INavFieldProps extends IFieldWrapperInputProps, IFieldWrapperOutputProps, IDataProviderConfig {
+ * Компонент навигации как часть формы.
+ *
+ * Этот компонент представляет собой навигационное меню, которое можно использовать
+ * как часть формы для выбора различных элементов или вкладок.
+ **/
+export interface INavFieldProps extends IFieldWrapperInputProps, IFieldWrapperOutputProps, IDataProviderConfig, IUiComponent {
     /**
      * Свойства для компонента Nav
      */

package/ui/form/NumberField/NumberField.d.ts

@@ -1,11 +1,12 @@
-import * as React from 'react';
-import { IInputFieldProps } from '../InputField/InputField';
-import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
+import React, { ChangeEvent } from 'react';
+import { IBaseFieldProps } from '../InputField/InputField';
+import { IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * NumberField
- * Числовое поле ввода
- */
-export interface INumberFieldProps extends IInputFieldProps, IFieldWrapperInputProps {
+ *
+ * Числовое поле ввода. Этот компонент представляет собой поле ввода для числовых значений.
+ **/
+export interface INumberFieldProps extends IBaseFieldProps {
     /**
      * Минимальное значение
      * @example 1
@@ -20,21 +21,24 @@ export interface INumberFieldProps extends IInputFieldProps, IFieldWrapperInputP
      * Шаг увеличения/уменьшения значения
      * @example 5
      */
-    step?: string | number;
-    [key: string]: any;
+    step?: number;
 }
 export interface INumberFieldViewProps extends INumberFieldProps, IFieldWrapperOutputProps {
     inputProps: {
         type: string;
         name: string;
-        onChange: (value: Event | React.ChangeEvent) => void;
+        onChange: (value: ChangeEvent<HTMLInputElement> | string) => void;
         value: number;
         placeholder: string;
         disabled: boolean;
-        min: string | number;
-        max: string | number;
+        min: number;
+        max: number;
         step: string | number;
     };
+    inputRef: React.MutableRefObject<any>;
+    onStepUp: VoidFunction;
+    onStepDown: VoidFunction;
+    onKeyDown: VoidFunction;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<INumberFieldProps>;
 export default _default;

package/ui/form/NumberField/NumberField.js

@@ -14,25 +14,48 @@ 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 hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
+var useInputTypeNumber_1 = __importDefault(require("./hooks/useInputTypeNumber"));
+var DEFAULT_STEP = 1;
 function NumberField(props) {
     var components = (0, hooks_1.useComponents)();
-    props.inputProps = (0, react_1.useMemo)(function () {
+    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), currentInputRef = _a.inputRef, onChange = _a.onChange;
+    var onInputChange = (0, useInputTypeNumber_1["default"])(currentInputRef, {
+        max: props.max,
+        min: props.min,
+        value: props.input.value
+    }, onChange).onInputChange;
+    var onStep = (0, react_1.useCallback)(function (isIncrement) {
         var _a;
-        return (__assign({ name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: function (value) { return props.input.onChange(value); }, type: 'number', min: props.min, max: props.max, step: props.step, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
-    }, [props.disabled, props.input, props.inputProps, props.placeholder, props.min, props.max, props.step]);
-    return components.ui.renderView(props.view || 'form.NumberFieldView', props);
+        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]);
+    var onStepUp = (0, react_1.useCallback)(function () {
+        onStep(true);
+    }, [onStep]);
+    var onStepDown = (0, react_1.useCallback)(function () {
+        onStep(false);
+    }, [onStep]);
+    var onKeyDown = (0, react_1.useCallback)(function (event) {
+        if (event.key === 'ArrowUp') {
+            onStepUp();
+        }
+        else if (event.key === 'ArrowDown') {
+            onStepDown();
+        }
+    }, [onStepDown, onStepUp]);
+    var inputProps = (0, react_1.useMemo)(function () {
+        var _a;
+        return (__assign({ name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onInputChange, type: 'text', min: props.min, max: props.max, step: props.step, placeholder: props.placeholder, disabled: props.disabled, autoComplete: 'off', onKeyDown: onKeyDown }, props.inputProps));
+    }, [props.input.name, props.input.value, props.min, props.max, props.step, props.placeholder, props.disabled, props.inputProps, onInputChange, onKeyDown]);
+    return components.ui.renderView(props.view || 'form.NumberFieldView', __assign(__assign({}, props), { inputProps: inputProps, onStepUp: onStepUp, onStepDown: onStepDown, inputRef: currentInputRef }));
 }
 NumberField.defaultProps = {
     disabled: false,
     required: false,
-    className: '',
-    placeholder: '',
-    min: null,
-    max: null,
-    step: null,
-    errors: null
+    size: 'md'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('NumberField', NumberField);

package/ui/form/NumberField/hooks/useInputTypeNumber.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface IInputTypeNumberProps {
+    max: any;
+    min: any;
+    value: string | undefined | null;
+}
+declare const useInputTypeNumber: (currentInputRef: React.MutableRefObject<HTMLInputElement>, inputTypeNumberProps: IInputTypeNumberProps, onChange: (event: React.ChangeEvent<HTMLInputElement>, value?: any) => void) => {
+    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export default useInputTypeNumber;

package/ui/form/NumberField/hooks/useInputTypeNumber.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useInputTypeNumber = function (currentInputRef, inputTypeNumberProps, onChange) {
+    react_1["default"].useEffect(function () {
+        var _a;
+        var defaultValidity = 'The number is not valid.';
+        var errorMessage = inputTypeNumberProps.value > inputTypeNumberProps.max
+            || inputTypeNumberProps.value < inputTypeNumberProps.min
+            || !inputTypeNumberProps.value
+            ? __(defaultValidity)
+            : '';
+        (_a = currentInputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(errorMessage);
+    }, [currentInputRef, inputTypeNumberProps.value, inputTypeNumberProps.max, inputTypeNumberProps.min]);
+    var isValueNumeric = function (value) {
+        if (!value) {
+            return true;
+        }
+        /**
+        * Подходят как отрицательные так и положительные числа
+        * @example -1
+        * @example 1
+        */
+        var numericRegex = /^-?\d*\.?\d+$/;
+        return numericRegex.test(value);
+    };
+    var onInputChange = function (event) {
+        var _a;
+        var value = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
+        if (isValueNumeric(value)) {
+            onChange(event);
+        }
+    };
+    return {
+        onInputChange: onInputChange
+    };
+};
+exports["default"] = useInputTypeNumber;