@steroidsjs/core 3.0.0-beta.7 → 3.0.0-beta.71

package/ui/form/InputField/InputField.js

@@ -33,43 +33,78 @@ 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;
 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");
+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 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));
+        return (__assign({ type: props.type, name: props.input.name, defaultValue: (_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]);
     // 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, maskedInputRef: maskedInputRef }));
 }
 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/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 { 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
@@ -21,13 +22,12 @@ export interface INumberFieldProps extends IInputFieldProps, IFieldWrapperInputP
      * @example 5
      */
     step?: string | number;
-    [key: string]: any;
 }
 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;

package/ui/form/NumberField/NumberField.js

@@ -21,18 +21,13 @@ function NumberField(props) {
     var components = (0, hooks_1.useComponents)();
     props.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: 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));
+        return (__assign({ name: props.input.name, defaultValue: (_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);
 }
 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/PasswordField/PasswordField.d.ts

@@ -1,30 +1,33 @@
-import * as React from 'react';
-import { IInputFieldProps } from '../InputField/InputField';
+import { ChangeEvent } from 'react';
+import { IBaseFieldProps } from '../InputField/InputField';
 import { IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * PasswordField
- * Поле ввода пароля
- */
-export interface IPasswordFieldProps extends IInputFieldProps {
+ *
+ * Поле ввода пароля. Этот компонент представляет собой поле ввода для паролей.
+ *
+ **/
+export interface IPasswordFieldProps extends IBaseFieldProps {
     /**
-     * Если true, то отображается шкала сложности пароля и иконка 'отображения' пароля
+     * Если true, то отображается шкала сложности пароля
      * @example true
      */
-    security?: boolean;
-    [key: string]: any;
+    showSecurityBar?: boolean;
+    /**
+     * Если true, то отображается иконка скрытия/показа пароля
+     */
+    showSecurityIcon?: boolean;
 }
 export interface IPasswordFieldViewProps extends IPasswordFieldProps, IFieldWrapperOutputProps {
     inputProps: {
         type: string;
         name: string;
-        onChange: (value: Event | React.ChangeEvent) => void;
+        onChange: (value: Event | ChangeEvent) => void;
         value: string | number;
         placeholder: string;
         disabled: boolean;
     };
-    security?: boolean;
-    errors?: string[];
-    className?: CssClassName;
+    onClear?: () => void;
     securityLevel?: 'success' | 'warning' | 'danger';
     onShowPassword: () => void;
     onHidePassword: () => void;

package/ui/form/PasswordField/PasswordField.js

@@ -49,18 +49,22 @@ exports.checkPassword = checkPassword;
 function PasswordField(props) {
     var _a = (0, react_1.useState)('password'), type = _a[0], setType = _a[1];
     var components = (0, hooks_1.useComponents)();
-    props.inputProps = (0, react_1.useMemo)(function () { return (__assign({ name: props.input.name, value: props.input.value || '', onChange: function (e) { return props.input.onChange(e.target ? e.target.value : e.nativeEvent.text); }, type: type, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps)); }, [props.disabled, props.input, props.inputProps, props.placeholder, type]);
-    props.securityLevel = props.security ? (0, exports.checkPassword)(props.input.value) : null;
+    var onClear = (0, react_1.useCallback)(function () { return props.input.onChange(''); }, [props.input]);
+    props.inputProps = (0, react_1.useMemo)(function () {
+        var _a;
+        return (__assign({ name: props.input.name, defaultValue: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: function (value) { return props.input.onChange(value); }, type: type, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
+    }, [props.disabled, props.input, props.inputProps, props.placeholder, type]);
+    props.securityLevel = props.showSecurityBar ? (0, exports.checkPassword)(props.input.value) : null;
     props.onShowPassword = function () { return setType('text'); };
     props.onHidePassword = function () { return setType('password'); };
+    props.onClear = onClear;
     return components.ui.renderView(props.view || 'form.PasswordFieldView' || 'form.InputFieldView', props);
 }
 PasswordField.defaultProps = {
     disabled: false,
-    security: false,
+    showSecurityBar: false,
+    showSecurityIcon: true,
     required: false,
-    className: '',
-    placeholder: '',
-    errors: null
+    size: 'md'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('PasswordField', PasswordField);

package/ui/form/RadioField/RadioField.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
+/**
+ * RadioField
+ *
+ * Компонент RadioField представляет собой элемент выбора типа "radio". Он позволяет пользователю выбрать один вариант из нескольких предложенных.
+ **/
+export interface IRadioFieldProps extends IFieldWrapperInputProps, IUiComponent {
+    /**
+     * Свойства для элемента input
+     * @example {onKeyDown: ...}
+     */
+    inputProps?: any;
+    /**
+     * Флаг определяющий включен ли элемент
+     * @example {'true'}
+     */
+    checked?: boolean;
+    [key: string]: any;
+}
+export interface IRadioFieldViewProps extends IRadioFieldProps, IFieldWrapperOutputProps {
+    inputProps: {
+        name: string;
+        type: string;
+        checked: boolean;
+        onChange: (value: string | React.ChangeEvent) => void;
+        disabled: boolean;
+    };
+}
+declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IRadioFieldProps>;
+export default _default;

package/{hoc/http.js → ui/form/RadioField/RadioField.js}

@@ -38,16 +38,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var react_1 = require("react");
-var useFetch_1 = __importDefault(require("../hooks/useFetch"));
-/**
- * Http HOC
- * Обертка для асинхронного получения данных с бекенда. В отличии от `Fetch HOC`, он не хранит данные в Redux Store
- * и не добавляет "Загрузка..." при запросе.
- */
-exports["default"] = (function (requestFunc) { return function (WrappedComponent) { return function HttpHoc(props) {
-    var onFetch = (0, react_1.useCallback)(function () { return requestFunc(props); }, [props]);
-    var _a = (0, useFetch_1["default"])({ onFetch: onFetch }), data = _a.data, isLoading = _a.isLoading, fetch = _a.fetch;
-    var fetchUpdate = (0, react_1.useCallback)(function (newParams) { return fetch({ params: newParams }); }, [fetch]);
-    return (React.createElement(WrappedComponent, __assign({}, props, data, { isLoading: isLoading, fetch: fetchUpdate })));
-}; }; });
+var hooks_1 = require("../../../hooks");
+var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
+function RadioField(props) {
+    var components = (0, hooks_1.useComponents)();
+    var onChangeHandler = React.useCallback(function () {
+        props.input.onChange(!props.input.value);
+        if (props.onChange) {
+            props.onChange();
+        }
+    }, [props]);
+    var inputProps = React.useMemo(function () { return (__assign({ name: props.input.name, type: 'radio', checked: !!props.input.value, onChange: onChangeHandler, disabled: props.disabled }, props.inputProps)); }, [onChangeHandler, props.disabled, props.input.name, props.input.value, props.inputProps]);
+    return components.ui.renderView(props.view || 'form.RadioFieldView', __assign(__assign({}, props), { inputProps: inputProps }));
+}
+RadioField.defaultProps = {
+    disabled: false,
+    required: false,
+    className: '',
+    size: 'md',
+    inputProps: {}
+};
+exports["default"] = (0, fieldWrapper_1["default"])('RadioField', RadioField);

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

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

package/ui/form/RadioField/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 RadioField_1 = __importDefault(require("./RadioField"));
+exports["default"] = RadioField_1["default"];

package/ui/form/RadioListField/RadioListField.d.ts

@@ -2,25 +2,21 @@ import * as React from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
+import { IRadioFieldViewProps } from '../RadioField/RadioField';
 /**
  * RadioListField
  * Список с радиокнопками. Используется в формах для выбора одного значения.
  */
-export interface IRadioListFieldProps extends IFieldWrapperInputProps, IDataProviderConfig, Omit<IDataSelectConfig, 'items'> {
+export interface IRadioListFieldProps extends IFieldWrapperInputProps, IDataProviderConfig, Omit<IDataSelectConfig, 'items'>, IUiComponent {
     /**
-     * Свойства для элемента \<input /\>
+     * Свойства для элемента input
      * @example {onKeyDown: ...}
      */
     inputProps?: any;
     /**
-     * Дополнительный CSS-класс для элемента отображения
+     * Ориентация списка
      */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
+    orientation?: Orientation;
 }
 export interface IRadioListFieldViewProps extends IFieldWrapperOutputProps {
     inputProps: {
@@ -37,7 +33,12 @@ export interface IRadioListFieldViewProps extends IFieldWrapperOutputProps {
         isHovered: boolean;
     }[];
     selectedIds: (PrimaryKey | any)[];
+    className?: CssClassName;
+    orientation?: Orientation;
+    disabled?: boolean;
+    size?: Size;
     onItemSelect: (id: PrimaryKey | any) => void;
+    renderRadio: (radioProps: IRadioFieldViewProps) => JSX.Element;
 }
 declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IRadioListFieldProps>;
 export default _default;

package/ui/form/RadioListField/RadioListField.js

@@ -10,10 +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;
+var React = __importStar(require("react"));
 var react_1 = require("react");
 var react_use_1 = require("react-use");
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
@@ -28,6 +52,7 @@ function RadioListField(props) {
     }).items;
     // Data select
     var _a = (0, hooks_1.useDataSelect)({
+        multiple: props.multiple,
         selectedIds: inputSelectedIds,
         selectFirst: props.selectFirst,
         primaryKey: props.primaryKey,
@@ -49,12 +74,17 @@ function RadioListField(props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.input.onChange, selectedIds]);
-    return components.ui.renderView(props.view || 'form.RadioListFieldView', __assign(__assign({}, props), { items: items, inputProps: inputProps, onItemSelect: onItemSelect, selectedIds: selectedIds }));
+    var RadioFieldView = components.ui.getView('form.RadioFieldView');
+    var renderRadio = function (radioProps) { return React.createElement(RadioFieldView, __assign({}, radioProps)); };
+    return components.ui.renderView(props.view || 'form.RadioListFieldView', __assign(__assign({}, props), { items: items, inputProps: inputProps, onItemSelect: onItemSelect, selectedIds: selectedIds, renderRadio: renderRadio }));
 }
 RadioListField.defaultProps = {
     disabled: false,
     required: false,
     className: '',
-    errors: null
+    multiple: false,
+    errors: null,
+    size: 'md',
+    orientation: 'vertical'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('RadioListField', RadioListField);

package/ui/form/RateField/RateField.d.ts

@@ -1,13 +1,14 @@
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
-/**
- * RateField
- * Поле для проставления рейтинга
- */
 export interface IRateFieldItem {
     id: number;
     value: number;
 }
-export interface IRateFieldProps extends IFieldWrapperInputProps {
+/**
+ * RateField
+ *
+ * Поле для проставления рейтинга
+ */
+export interface IRateFieldProps extends IFieldWrapperInputProps, IUiComponent {
     /**
      * Максимальное количество звезд
      * @example 5
@@ -24,14 +25,11 @@ export interface IRateFieldProps extends IFieldWrapperInputProps {
      */
     allowClear?: boolean;
     /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
+    * Значок (бэйдж) с заголовком.
+    */
+    badge?: {
+        title: string;
+    };
     inputProps?: {
         [key: string]: any;
     };

package/ui/form/RateField/RateField.js

@@ -47,6 +47,7 @@ function RateField(props) {
 RateField.defaultProps = {
     allowClear: false,
     itemsCount: 5,
-    disabled: false
+    disabled: false,
+    size: 'md'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('RateField', RateField);

package/ui/form/RateField/demo/errors.js

@@ -34,4 +34,4 @@ var RateField_1 = __importDefault(require("../RateField"));
  * @col 6
  */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(RateField_1["default"], { errors: ['Error 1 text', 'Error 2 text'], layout: true }))); });
+    React.createElement(RateField_1["default"], { errors: ['Error 1 text', 'Error 2 text'] }))); });

package/ui/form/ReCaptchaField/ReCaptchaField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * ReCaptchaField
@@ -10,15 +11,75 @@ import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fiel
  * получения токена. Далее этот токен с остальными данными формы отправится на бэкенд.
  * Сам компонент отображает ссылки на политику конфиденциальности и условия использования сервисов Google.
  */
-export interface IReCaptchaFieldProps extends IFieldWrapperInputProps {
+export interface IReCaptchaFieldProps extends IFieldWrapperInputProps, IUiComponent {
     /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
+     * Обработчик события изменения ReCaptcha.
+     */
+    onChange?: VoidFunction;
+    /**
+     * Функция, вызываемая после загрузки асинхронного скрипта.
+     */
+    asyncScriptOnLoad?: () => void;
+    /**
+     * Положение значка ReCaptcha. Может быть 'bottomright' (внизу справа), 'bottomleft' (внизу слева) или 'inline' (встроенный).
+     */
+    badge?: 'bottomright' | 'bottomleft' | 'inline';
+    /**
+     * Тип ReCaptcha. Может быть 'image' (изображение) или 'audio' (аудио).
+     */
+    type?: 'image' | 'audio';
+    /**
+     * Значение tabindex для ReCaptcha.
+     */
+    tabindex?: number;
+    /**
+     * Защищенный токен для ReCaptcha.
+     */
+    stoken?: string;
+    /**
+     * Обработчик события истечения срока действия ReCaptcha.
+     */
+    onExpired?: VoidFunction;
+    /**
+     * Обработчик события ошибки ReCaptcha.
+     */
+    onErrored?: VoidFunction;
+    /**
+     * Флаг, указывающий на изоляцию ReCaptcha.
+     */
+    isolated?: boolean;
+    /**
+     * Языковой код для ReCaptcha.
+     */
+    hl?: string;
+    /**
+     * Ссылка на ref-объект React для ReCaptcha.
+     */
+    ref?: React.RefObject<any>;
+    /**
+     * Ключ сайта ReCaptcha. По умолчанию process.env.APP_RECAPTCHA_SITE_KEY
+     */
+    sitekey?: string;
+    /**
+     * Дополнительные свойства, которые могут быть указаны.
      */
-    view?: CustomView;
     [key: string]: any;
 }
 export interface IReCaptchaFieldViewProps extends IReCaptchaFieldProps, IFieldWrapperOutputProps {
+    sitekey: string;
+    recaptchaOptions: {
+        onChange: VoidFunction;
+        asyncScriptOnLoad: () => void;
+        badge: 'bottomright' | 'bottomleft' | 'inline';
+        type: 'image' | 'audio';
+        tabindex: number;
+        stoken: string;
+        onExpired: VoidFunction;
+        onErrored: VoidFunction;
+        isolated: boolean;
+        hl: string;
+        ref: React.RefObject<any>;
+    };
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IReCaptchaFieldProps>;
 export default _default;