@steroidsjs/core 3.0.0-beta.4 → 3.0.0-beta.41

package/ui/form/Form/Form.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -44,7 +48,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -70,6 +74,7 @@ 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 get_1 = __importDefault(require("lodash-es/get"));
 var isUndefined_1 = __importDefault(require("lodash-es/isUndefined"));
@@ -97,23 +102,21 @@ function Form(props) {
     var _this = this;
     // Dev validation. You cannot change data provider (formId, useRedux)
     if (process.env.NODE_ENV !== 'production') {
-        var prevFormId = react_use_1.usePrevious(props.formId); // eslint-disable-line react-hooks/rules-of-hooks
-        var prevUseRedux = react_use_1.usePrevious(props.useRedux); // eslint-disable-line react-hooks/rules-of-hooks
+        var prevFormId = (0, react_use_1.usePrevious)(props.formId); // eslint-disable-line react-hooks/rules-of-hooks
+        var prevUseRedux = (0, react_use_1.usePrevious)(props.useRedux); // eslint-disable-line react-hooks/rules-of-hooks
         if ((prevFormId && props.formId !== prevFormId) || (prevUseRedux && props.useRedux !== prevUseRedux)) {
             throw new Error('Props formId and useRedux cannot be changed dynamically! Its related to data provider');
         }
     }
     // Get components and dispatch method
-    var components = hooks_1.useComponents();
-    var reduxDispatch = hooks_1.useDispatch();
-    // Normalize layout
-    var layout = react_1.useMemo(function () { return form_1.normalizeLayout(props.layout); }, [props.layout]);
+    var components = (0, hooks_1.useComponents)();
+    var reduxDispatch = (0, hooks_1.useDispatch)();
     // Address bar synchronization
-    var _a = useAddressBar_1["default"](__assign({ enable: !!props.addressBar, model: props.model }, (typeof props.addressBar === 'boolean' ? { enable: props.addressBar } : props.addressBar))), initialQuery = _a.initialQuery, updateQuery = _a.updateQuery;
+    var _a = (0, useAddressBar_1["default"])(__assign({ enable: !!props.addressBar, model: props.model }, (typeof props.addressBar === 'boolean' ? { enable: props.addressBar } : props.addressBar))), initialQuery = _a.initialQuery, updateQuery = _a.updateQuery;
     // Resolve initial values
     var initialValues = props.initialValues;
     // Restore initial values from address bar and local storage
-    var isFirstMount = react_use_1.useFirstMountState();
+    var isFirstMount = (0, react_use_1.useFirstMountState)();
     if (isFirstMount) {
         // Query
         if (initialQuery) {
@@ -128,30 +131,30 @@ function Form(props) {
     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;
     // Sync with address bar
-    react_use_1.useUpdateEffect(function () {
+    (0, react_use_1.useUpdateEffect)(function () {
         updateQuery(values);
     }, [updateQuery, values]);
     // Auto save
-    react_use_1.useUpdateEffect(function () {
+    (0, react_use_1.useUpdateEffect)(function () {
         if (props.autoSave && values) {
             // TODO
             //AutoSaveHelper.save(components.clientStorage, props.formId, values);
         }
     }, [props.autoSave, values]);
     // Auto destroy
-    react_use_1.useUnmount(function () {
+    (0, react_use_1.useUnmount)(function () {
         if (props.autoDestroy) {
-            dispatch(form_2.formDestroy(props.formId));
+            dispatch((0, form_2.formDestroy)(props.formId));
         }
     });
     // OnChange handler
-    react_use_1.useUpdateEffect(function () {
+    (0, react_use_1.useUpdateEffect)(function () {
         if (props.onChange) {
             props.onChange.call(null, values);
         }
     }, [props.onChange, values]);
     // OnSubmit handler
-    var onSubmit = react_1.useCallback(function (e) {
+    var onSubmit = (0, react_1.useCallback)(function (e) {
         if (e === void 0) { e = null; }
         return __awaiter(_this, void 0, void 0, function () {
             var cleanedValues, submitResult, captchaAttribute, googleCaptcha, captchaToken, options, response, _a, requestError_1, data;
@@ -160,12 +163,12 @@ function Form(props) {
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
-                        dispatch(form_2.formSetSubmitting(props.formId, true));
+                        dispatch((0, form_2.formSetSubmitting)(props.formId, true));
                         // TODO
                         if (e) {
                             e.preventDefault();
                         }
-                        cleanedValues = cloneDeep_1["default"](values);
+                        cleanedValues = (0, cloneDeep_1["default"])(values);
                         // Append non touched fields to values object
                         if (props.formId) {
                             Object.keys(components.ui.getRegisteredFields(props.formId) || {})
@@ -174,7 +177,7 @@ function Form(props) {
                                 var keyParts = [];
                                 var arrayKey;
                                 key.split('.').find(function (keyPart) {
-                                    if (keyParts.length > 0 && Array.isArray(get_1["default"](cleanedValues, keyParts))) {
+                                    if (keyParts.length > 0 && Array.isArray((0, get_1["default"])(cleanedValues, keyParts))) {
                                         keyParts.push(keyPart);
                                         arrayKey = keyParts.join('.');
                                         return true;
@@ -182,29 +185,29 @@ function Form(props) {
                                     keyParts.push(keyPart);
                                     return false;
                                 });
-                                if (arrayKey && !get_1["default"](cleanedValues, arrayKey)) {
+                                if (arrayKey && !(0, get_1["default"])(cleanedValues, arrayKey)) {
                                     return;
                                 }
-                                if (isUndefined_1["default"](get_1["default"](cleanedValues, key))) {
-                                    set_1["default"](cleanedValues, key, null);
+                                if ((0, isUndefined_1["default"])((0, get_1["default"])(cleanedValues, key))) {
+                                    (0, set_1["default"])(cleanedValues, key, null);
                                 }
                             });
                         }
                         // Clean
-                        cleanedValues = form_1.cleanEmptyObject(cleanedValues);
+                        cleanedValues = (0, form_1.cleanEmptyObject)(cleanedValues);
                         // Event onBeforeSubmit
                         if (props.onBeforeSubmit && props.onBeforeSubmit.call(null, cleanedValues) === false) {
-                            dispatch(form_2.formSetSubmitting(props.formId, false));
+                            dispatch((0, form_2.formSetSubmitting)(props.formId, false));
                             return [2 /*return*/, null];
                         }
                         if (props.validators) {
-                            validate_1["default"](cleanedValues, props.validators);
+                            (0, validate_1["default"])(cleanedValues, props.validators);
                         }
                         if (!props.onSubmit) return [3 /*break*/, 2];
                         return [4 /*yield*/, props.onSubmit.call(null, cleanedValues)];
                     case 1:
                         submitResult = _c.sent();
-                        dispatch(form_2.formSetSubmitting(props.formId, false));
+                        dispatch((0, form_2.formSetSubmitting)(props.formId, false));
                         return [2 /*return*/, submitResult];
                     case 2:
                         captchaAttribute = null;
@@ -236,7 +239,7 @@ function Form(props) {
                                         switch (_b.label) {
                                             case 0:
                                                 if (!props.autoStartTwoFactor) return [3 /*break*/, 2];
-                                                return [4 /*yield*/, components.http.post("/api/v1/auth/2fa/" + providerName + "/send")];
+                                                return [4 /*yield*/, components.http.post("/api/v1/auth/2fa/".concat(providerName, "/send"))];
                                             case 1:
                                                 _a = _b.sent();
                                                 return [3 /*break*/, 3];
@@ -270,28 +273,24 @@ function Form(props) {
                     case 11:
                         requestError_1 = _c.sent();
                         console.error(requestError_1); // eslint-disable-line no-console
-                        dispatch(form_2.formSetSubmitting(props.formId, false));
+                        dispatch((0, form_2.formSetSubmitting)(props.formId, false));
                         props.onError(requestError_1);
-                        //TODO Remove @ts-ignore
-                        //@ts-ignore
-                        reduxDispatch(
-                        //@ts-ignore
-                        notifications_1.showNotification(props.submitErrorMessage || __('Ошибка сервера'), 'danger'));
+                        reduxDispatch((0, notifications_1.showNotification)(props.submitErrorMessage || __('Ошибка сервера'), 'danger'));
                         return [2 /*return*/, null];
                     case 12:
                         // Skip on 2fa
                         if (response.twoFactor) {
-                            dispatch(form_2.formSetSubmitting(props.formId, false));
+                            dispatch((0, form_2.formSetSubmitting)(props.formId, false));
                             return [2 /*return*/, null];
                         }
                         data = response.data || {};
                         // Event onAfterSubmit
                         if (props.onAfterSubmit && props.onAfterSubmit.call(null, cleanedValues, data, response) === false) {
-                            dispatch(form_2.formSetSubmitting(props.formId, false));
+                            dispatch((0, form_2.formSetSubmitting)(props.formId, false));
                             return [2 /*return*/, null];
                         }
                         if (data.errors) {
-                            dispatch(form_2.formSetSubmitting(props.formId, false));
+                            dispatch((0, form_2.formSetSubmitting)(props.formId, false));
                             setErrors(data.errors);
                             return [2 /*return*/, null];
                         }
@@ -305,7 +304,7 @@ function Form(props) {
                             //const AutoSaveHelper = require('../ui/form/Form/AutoSaveHelper').default;
                             //AutoSaveHelper.remove(props.clientStorage, props.formId);
                         }
-                        dispatch(form_2.formSetSubmitting(props.formId, false));
+                        dispatch((0, form_2.formSetSubmitting)(props.formId, false));
                         return [2 /*return*/, null];
                 }
             });
@@ -313,38 +312,33 @@ function Form(props) {
     }, [dispatch, props, values, components.ui, components.resource,
         components.http, components.api, reduxDispatch, setErrors]);
     // Manual submit form by reducer action
-    var prevSubmitCounter = react_use_1.usePrevious(submitCounter);
-    react_use_1.useUpdateEffect(function () {
+    var prevSubmitCounter = (0, react_use_1.usePrevious)(submitCounter);
+    (0, react_use_1.useUpdateEffect)(function () {
         if (submitCounter !== prevSubmitCounter) {
             onSubmit.call(null);
         }
     }, [prevSubmitCounter, submitCounter, onSubmit]);
-    var formContextValue = react_1.useMemo(function () { return ({
+    var formContextValue = (0, react_1.useMemo)(function () { return ({
         formId: props.formId,
         model: props.model,
         prefix: props.prefix,
         size: props.size,
-        layout: props.layout,
         provider: provider,
         reducer: reducer,
         dispatch: dispatch
-    }); }, [dispatch, props.formId, props.layout, props.model, props.prefix, props.size, provider, reducer]);
+    }); }, [dispatch, props.formId, props.model, props.prefix, props.size, provider, reducer]);
     // 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), { isInvalid: isInvalid,
-            isSubmitting: isSubmitting,
-            layout: layout,
-            onSubmit: onSubmit, submitLabel: props.submitLabel, fields: props.fields, children: props.children, isBordered: props.isBordered, 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, className: props.className, style: props.style, autoFocus: props.autoFocus }))
         : props.children));
 }
 Form.defaultProps = {
     actionMethod: 'POST',
     autoStartTwoFactor: true,
-    layout: 'default',
     captchaActionName: 'submit'
 };
 exports["default"] = Form;

package/ui/form/HtmlField/HtmlField.js

@@ -19,22 +19,22 @@ var merge_1 = __importDefault(require("lodash-es/merge"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 function HtmlField(props) {
-    var components = hooks_1.useComponents();
-    var onFocus = react_1.useCallback(function (event) {
+    var components = (0, hooks_1.useComponents)();
+    var onFocus = (0, react_1.useCallback)(function (event) {
         if (props.onFocus) {
             props.onFocus(event);
         }
     }, [props]);
-    var onBlur = react_1.useCallback(function (event) {
+    var onBlur = (0, react_1.useCallback)(function (event) {
         if (props.onBlur) {
             props.onBlur(event);
         }
     }, [props]);
-    var onChange = react_1.useCallback(function (event, editor) {
+    var onChange = (0, react_1.useCallback)(function (event, editor) {
         props.input.onChange(editor.getData());
     }, [props.input]);
     var uploadUrl = props.uploadUrl, uploadImagesProcessor = props.uploadImagesProcessor;
-    var editorProps = react_1.useMemo(function () { return merge_1["default"]({
+    var editorProps = (0, react_1.useMemo)(function () { return (0, merge_1["default"])({
         image: {
             upload: {
                 types: ['jpeg', 'png', 'gif', 'jpg', 'svg']
@@ -46,12 +46,10 @@ 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 }));
+    return components.ui.renderView(props.view || 'form.HtmlFieldView', __assign(__assign({ onFocus: onFocus, onBlur: onBlur, onChange: onChange }, props), { editorProps: editorProps }));
 }
 HtmlField.defaultProps = {
     disabled: false,
     className: ''
 };
-exports["default"] = fieldWrapper_1["default"]('HtmlField', HtmlField);
+exports["default"] = (0, fieldWrapper_1["default"])('HtmlField', HtmlField);

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

@@ -1,8 +1,8 @@
 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 {
+export interface ICropConfig {
     /**
      * Изначальные параметры обрезки изображения
      * @example {unit: 'px', aspect: 1, x: 0, y: 0, width: 200, height: 200}
@@ -19,7 +19,7 @@ export interface ICropInputProps {
      */
     reactImageCropProps?: ReactCropProps;
 }
-export interface IImageFieldProps extends IFieldWrapperInputProps, Omit<IFileHocInput, 'multiple' | 'imagesOnly'>, IFileHocOutput {
+export interface IImageFieldProps extends IFieldWrapperInputProps, Omit<IFileInput, 'multiple' | 'imagesOnly'> {
     /**
      * Дополнительный CSS-класс для компонента
      */
@@ -41,7 +41,7 @@ export interface IImageFieldProps extends IFieldWrapperInputProps, Omit<IFileHoc
     /**
      * Параметры обрезки
      */
-    crop?: ICropInputProps;
+    crop?: ICropConfig;
     /**
      * Название кнопки
      * @example 'Загрузить'
@@ -49,7 +49,7 @@ export interface IImageFieldProps extends IFieldWrapperInputProps, Omit<IFileHoc
     label?: string;
     [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

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -45,29 +49,29 @@ var useFile_1 = __importDefault(require("../../../hooks/useFile"));
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var modal_1 = require("../../../actions/modal");
 function ImageField(props) {
-    var components = hooks_1.useComponents();
-    var dispatch = useDispatch_1["default"]();
+    var components = (0, hooks_1.useComponents)();
+    var dispatch = (0, useDispatch_1["default"])();
     // Add cropping option
-    var _a = react_1.useState(null), croppedImage = _a[0], setCroppedImage = _a[1];
-    var modalId = react_1.useMemo(function () { var _a; return ((_a = props.modalProps) === null || _a === void 0 ? void 0 : _a.modalId) || uniqueId_1["default"]('cropModal'); }, [props.modalProps.modalId]);
+    var _a = (0, react_1.useState)(null), croppedImage = _a[0], setCroppedImage = _a[1];
+    var modalId = (0, react_1.useMemo)(function () { var _a; return ((_a = props.modalProps) === null || _a === void 0 ? void 0 : _a.modalId) || (0, uniqueId_1["default"])('cropModal'); }, [props.modalProps.modalId]);
     var ImageFieldModalVIew = props.modalView || components.ui.getView('form.ImageFieldModalView');
-    var responseParser = react_1.useCallback(function (text) {
+    var responseParser = (0, react_1.useCallback)(function (text) {
         var data = null;
         try {
             data = JSON.parse(text);
-            dispatch(modal_1.openModal(ImageFieldModalVIew, __assign(__assign({ modalId: modalId }, props.modalProps), { crop: __assign(__assign({}, props.crop), { onSubmit: function (crop, imageId) { return setCroppedImage(__assign(__assign({}, crop), { id: imageId })); } }), image: first_1["default"](data) || data })));
+            dispatch((0, modal_1.openModal)(ImageFieldModalVIew, __assign(__assign({ modalId: modalId }, props.modalProps), { crop: __assign(__assign({}, props.crop), { onSubmit: function (crop, imageId) { return setCroppedImage(__assign(__assign({}, crop), { id: imageId })); } }), image: (0, first_1["default"])(data) || data })));
             // eslint-disable-next-line no-empty
         }
         catch (e) { }
         return data;
     }, [ImageFieldModalVIew, modalId, dispatch, props.crop, props.modalProps]);
-    var _b = useFile_1["default"](__assign(__assign({}, props), { multiple: false, imagesOnly: true, uploader: __assign({ uploaderConfigs: {
+    var _b = (0, useFile_1["default"])(__assign(__assign({}, props), { multiple: false, imagesOnly: true, uploader: __assign({ uploaderConfigs: {
                 xhr: {
                     responseParser: props.crop ? responseParser : null
                 }
             } }, props.uploader) })), files = _b.files, onBrowse = _b.onBrowse, onRemove = _b.onRemove, onAdd = _b.onAdd;
     // Fetch cropped image
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (croppedImage) {
             components.http.post(props.crop.backendUrl, croppedImage).then(function (res) {
                 setCroppedImage(null);
@@ -83,9 +87,9 @@ function ImageField(props) {
         }
     }, [components.http, croppedImage, onAdd, onRemove, props.crop.backendUrl]);
     var ImageFieldView = props.view || components.ui.getView('form.ImageFieldView');
-    var item = react_1.useMemo(function () {
+    var item = (0, react_1.useMemo)(function () {
         var result = null;
-        var _file = first_1["default"](files);
+        var _file = (0, first_1["default"])(files);
         if (_file) {
             var data = _file.getResultHttpMessage() || {};
             result = {
@@ -116,7 +120,7 @@ function ImageField(props) {
             if (data.images) {
                 // Image object has properties: url, width, height
                 result.image = data.images[props.imagesProcessor]
-                    || first_1["default"](values_1["default"](data.images));
+                    || (0, first_1["default"])((0, values_1["default"])(data.images));
             }
             // Add progress
             if (_file.getStatus() === File_1["default"].STATUS_PROCESS) {
@@ -142,4 +146,4 @@ ImageField.defaultProps = {
         }
     }
 };
-exports["default"] = fieldWrapper_1["default"]('ImageField', ImageField);
+exports["default"] = (0, fieldWrapper_1["default"])('ImageField', ImageField);

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

@@ -1,49 +1,36 @@
 import * as React from 'react';
 import { ChangeEventHandler, ReactNode } from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
-declare 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;
-/**
- * InputField
- * Поле ввода текста
- */
-export interface IInputFieldProps extends IFieldWrapperInputProps {
-    /**
-     * HTML Тип
-     * @example email
-     */
-    type?: IElementInputType;
-    /**
-     * Placeholder подсказка
-     * @example Your text...
-     */
-    placeholder?: string;
+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?: any;
     /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: any;
-    /**
-     */
-    viewProps?: any;
+     * Показывать иконку очищения поля
+     * @example {'true'}
+    */
+    showClear?: boolean;
     /**
-     * Размер Innput
-     * @example 'large'
+     * Свойства для компонента отображения
+     * @example {customHandler: () => {...}}
      */
-    size?: Size;
+    viewProps?: {
+        [key: string]: any;
+    };
+}
+/**
+ * InputField
+ * Поле ввода текста
+ */
+export interface IInputFieldProps extends IBaseFieldProps {
     /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
+     * HTML Тип
+     * @example email
      */
-    style?: any;
+    type?: IElementInputType;
     /**
      * Изображение или React-нода, которая будет отрендерена слева от поля.
      * @example require('icon.png') | <component/>
@@ -68,16 +55,17 @@ export interface IInputFieldProps extends IFieldWrapperInputProps {
      * Конфигурация маски
      * @example { mask: '+7 (999) 999-99-99' }
      */
-    maskProps?: any;
-    success?: boolean;
-    failed?: boolean;
-    [key: string]: any;
+    maskProps?: {
+        mask?: string;
+        maskPlaceholder?: string;
+        alwaysShowMask?: boolean;
+    };
+    /**
+     * Пользовательская иконка svg или название иконки
+     */
+    leadIcon?: React.ReactElement | string;
 }
 export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOutputProps {
-    style?: any;
-    errors?: string[];
-    placeholder?: string;
-    type?: string;
     inputProps: {
         type: string;
         name: string;
@@ -86,11 +74,7 @@ export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOut
         placeholder: string;
         disabled: string;
     };
-    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;

package/ui/form/InputField/InputField.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -39,8 +43,10 @@ var react_1 = require("react");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
 function InputField(props) {
-    var components = hooks_1.useComponents();
-    var inputProps = react_1.useMemo(function () {
+    var components = (0, hooks_1.useComponents)();
+    var onClear = React.useCallback(function () { return props.input.onChange(''); }, [props.input]);
+    props.onClear = onClear;
+    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]);
@@ -57,15 +63,9 @@ function InputField(props) {
 }
 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
 };
-exports["default"] = fieldWrapper_1["default"]('InputField', InputField);
+exports["default"] = (0, fieldWrapper_1["default"])('InputField', InputField);

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IInputFieldProps } from '../InputField/InputField';
+export interface IMaskFieldProps extends IInputFieldProps {
+    mask?: string;
+}
+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, { maskProps: __assign({ mask: mask }, maskProps) })));
+}
+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"];