@steroidsjs/core 3.0.0-beta.2 → 3.0.0-beta.21

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

@@ -1,7 +1,7 @@
 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;
+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
  * Поле ввода текста
@@ -30,12 +30,12 @@ export interface IInputFieldProps extends IFieldWrapperInputProps {
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
      */
-    view?: any;
+    view?: CustomView;
     /**
      */
     viewProps?: any;
     /**
-     * Размер Innput
+     * Размер Input
      * @example 'large'
      */
     size?: Size;
@@ -43,7 +43,7 @@ export interface IInputFieldProps extends IFieldWrapperInputProps {
      * Объект CSS стилей
      * @example {width: '45%'}
      */
-    style?: any;
+    style?: CustomStyle;
     /**
      * Изображение или React-нода, которая будет отрендерена слева от поля.
      * @example require('icon.png') | <component/>
@@ -68,16 +68,25 @@ export interface IInputFieldProps extends IFieldWrapperInputProps {
      * Конфигурация маски
      * @example { mask: '+7 (999) 999-99-99' }
      */
-    maskProps?: any;
+    maskProps?: {
+        mask?: string;
+        maskPlaceholder?: string;
+        alwaysShowMask?: boolean;
+    };
+    /**
+     * Показывать иконку очищения поля
+     * @example {'true'}
+    */
+    showClear?: boolean;
+    /**
+     * Пользовательская иконка svg или название иконки
+     */
+    leadIcon?: React.ReactElement | string;
     success?: boolean;
     failed?: boolean;
     [key: string]: any;
 }
 export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOutputProps {
-    style?: any;
-    errors?: string[];
-    placeholder?: string;
-    type?: string;
     inputProps: {
         type: string;
         name: string;
@@ -86,11 +95,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,17 @@ function InputField(props) {
 }
 InputField.defaultProps = {
     type: 'text',
-    size: 'medium',
+    size: 'md',
     disabled: false,
     required: false,
     className: '',
     placeholder: '',
     errors: null,
+    showClear: false,
+    successful: false,
     textBefore: null,
     textAfter: null,
     addonBefore: null,
     addonAfter: null
 };
-exports["default"] = fieldWrapper_1["default"]('InputField', InputField);
+exports["default"] = (0, fieldWrapper_1["default"])('InputField', InputField);

package/ui/form/NavField/NavField.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];
@@ -38,7 +42,7 @@ var Nav_1 = __importDefault(require("../../nav/Nav/Nav"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
 function NavField(props) {
-    var items = hooks_1.useDataProvider({
+    var items = (0, hooks_1.useDataProvider)({
         items: props.items
     }).items;
     return (React.createElement(Nav_1["default"], __assign({}, props.navProps, { layout: props.navProps.layout, items: items, activeTab: props.input.value, onChange: props.onChange, disabled: props.disabled })));
@@ -48,4 +52,4 @@ NavField.defaultProps = {
         layout: 'button'
     }
 };
-exports["default"] = fieldWrapper_1["default"]('NavField', NavField);
+exports["default"] = (0, fieldWrapper_1["default"])('NavField', NavField);

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Обычный пример использования
  * @order 1

package/ui/form/NavField/demo/basic.js

@@ -1,7 +1,11 @@
 "use strict";
 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];

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

@@ -1,7 +1,8 @@
-declare const _default: () => JSX.Element;
+/// <reference types="react" />
 /**
  * Выключенный.
  * @order 2
  * @col 3
  */
+declare const _default: () => JSX.Element;
 export default _default;

package/ui/form/NavField/demo/disabled.js

@@ -1,7 +1,11 @@
 "use strict";
 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];

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

@@ -1,7 +1,8 @@
-declare const _default: () => JSX.Element;
+/// <reference types="react" />
 /**
  * Обработка ошибок.
  * @order 4
  * @col 3
  */
+declare const _default: () => JSX.Element;
 export default _default;

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

@@ -1,7 +1,11 @@
 "use strict";
 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];
@@ -31,4 +35,4 @@ var basic_1 = require("./basic");
  * @col 3
  */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(NavField_1["default"], { items: basic_1.items, label: 'Errors', errors: ['Error 1 text', 'Error 2 text'], layout: true }))); });
+    React.createElement(NavField_1["default"], { items: basic_1.items, label: 'Errors', errors: ['Error 1 text', 'Error 2 text'] }))); });

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Демонстрация всех видов использования свойства layout
  * @order 5

package/ui/form/NavField/demo/layouts.js

@@ -1,7 +1,11 @@
 "use strict";
 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];

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

@@ -1,7 +1,8 @@
-declare const _default: () => JSX.Element;
+/// <reference types="react" />
 /**
  * Обязательный для заполнения.
  * @order 3
  * @col 3
  */
+declare const _default: () => JSX.Element;
 export default _default;

package/ui/form/NavField/demo/required.js

@@ -1,7 +1,11 @@
 "use strict";
 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];

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { IInputFieldProps } from '../InputField/InputField';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
@@ -27,7 +26,7 @@ export interface INumberFieldViewProps extends INumberFieldProps, IFieldWrapperO
     inputProps: {
         type: string;
         name: string;
-        onChange: (value: Event | React.ChangeEvent) => void;
+        onChange: (value: string) => void;
         value: number;
         placeholder: string;
         disabled: boolean;

package/ui/form/NumberField/NumberField.js

@@ -18,8 +18,8 @@ var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 function NumberField(props) {
-    var components = hooks_1.useComponents();
-    props.inputProps = react_1.useMemo(function () {
+    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));
     }, [props.disabled, props.input, props.inputProps, props.placeholder, props.min, props.max, props.step]);
@@ -33,6 +33,7 @@ NumberField.defaultProps = {
     min: null,
     max: null,
     step: null,
-    errors: null
+    errors: null,
+    size: 'md'
 };
-exports["default"] = fieldWrapper_1["default"]('NumberField', NumberField);
+exports["default"] = (0, fieldWrapper_1["default"])('NumberField', NumberField);

package/ui/form/PasswordField/PasswordField.d.ts

@@ -7,10 +7,14 @@ import { IFieldWrapperOutputProps } from '../Field/fieldWrapper';
  */
 export interface IPasswordFieldProps extends IInputFieldProps {
     /**
-     * Если true, то отображается шкала сложности пароля и иконка 'отображения' пароля
+     * Если true, то отображается шкала сложности пароля
      * @example true
      */
-    security?: boolean;
+    showSecurityBar?: boolean;
+    /**
+     * Если true, то отображается иконка скрытия/показа пароля
+     */
+    showSecurityIcon?: boolean;
     [key: string]: any;
 }
 export interface IPasswordFieldViewProps extends IPasswordFieldProps, IFieldWrapperOutputProps {
@@ -22,9 +26,9 @@ export interface IPasswordFieldViewProps extends IPasswordFieldProps, IFieldWrap
         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

@@ -10,11 +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;
 exports.checkPassword = void 0;
+var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
@@ -47,20 +71,24 @@ var checkPassword = function (password) {
 };
 exports.checkPassword = checkPassword;
 function PasswordField(props) {
-    var _a = react_1.useState('password'), type = _a[0], setType = _a[1];
-    var components = hooks_1.useComponents();
-    props.inputProps = 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 ? exports.checkPassword(props.input.value) : null;
+    var _a = (0, react_1.useState)('password'), type = _a[0], setType = _a[1];
+    var components = (0, hooks_1.useComponents)();
+    var onClear = React.useCallback(function () { return props.input.onChange(''); }, [props.input]);
+    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.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
+    errors: null,
+    size: 'md'
 };
-exports["default"] = fieldWrapper_1["default"]('PasswordField', PasswordField);
+exports["default"] = (0, fieldWrapper_1["default"])('PasswordField', PasswordField);

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
+export interface IRadioFieldProps extends IFieldWrapperInputProps {
+    /**
+     * Свойства для элемента \<input /\>
+     * @example {onKeyDown: ...}
+     */
+    inputProps?: any;
+    /**
+     * Дополнительный CSS-класс для элемента \<input /\>
+     */
+    className?: CssClassName;
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+    /**
+     * Флаг определяющий включен ли элемент
+     * @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/ui/form/RadioField/RadioField.js

@@ -0,0 +1,61 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    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 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,6 +2,7 @@ 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
  * Список с радиокнопками. Используется в формах для выбора одного значения.
@@ -16,6 +17,10 @@ export interface IRadioListFieldProps extends IFieldWrapperInputProps, IDataProv
      * Дополнительный CSS-класс для элемента отображения
      */
     className?: CssClassName;
+    /**
+     * Ориентация списка
+     */
+    orientation?: 'horizontal' | 'vertical';
     /**
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
@@ -37,7 +42,9 @@ export interface IRadioListFieldViewProps extends IFieldWrapperOutputProps {
         isHovered: boolean;
     }[];
     selectedIds: (PrimaryKey | any)[];
+    className?: CssClassName;
     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,38 +10,63 @@ 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"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 function RadioListField(props) {
-    var components = hooks_1.useComponents();
-    var inputSelectedIds = react_1.useMemo(function () { return props.selectedIds || [].concat(props.input.value || []); }, [props.input.value, props.selectedIds]);
+    var components = (0, hooks_1.useComponents)();
+    var inputSelectedIds = (0, react_1.useMemo)(function () { return props.selectedIds || [].concat(props.input.value || []); }, [props.input.value, props.selectedIds]);
     // Data provider
-    var items = hooks_1.useDataProvider({
+    var items = (0, hooks_1.useDataProvider)({
         items: props.items
     }).items;
     // Data select
-    var _a = hooks_1.useDataSelect({
+    var _a = (0, hooks_1.useDataSelect)({
+        multiple: props.multiple,
         selectedIds: inputSelectedIds,
         selectFirst: props.selectFirst,
         primaryKey: props.primaryKey,
         items: items,
         inputValue: props.input.value
     }), selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
-    var onItemSelect = react_1.useCallback(function (id) {
+    var onItemSelect = (0, react_1.useCallback)(function (id) {
         setSelectedIds(id);
     }, [setSelectedIds]);
-    var inputProps = react_1.useMemo(function () { return (__assign(__assign({}, props.inputProps), { type: 'radio', name: props.input.name, disabled: props.disabled, onChange: function (value) { return props.input.onChange(value); } })); }, [props.disabled, props.input, props.inputProps]);
+    var inputProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.inputProps), { type: 'radio', name: props.input.name, disabled: props.disabled, onChange: function (value) { return props.input.onChange(value); } })); }, [props.disabled, props.input, props.inputProps]);
     // Sync with form
-    var prevSelectedIds = react_use_1.usePrevious(selectedIds);
-    react_1.useEffect(function () {
-        if (!isEqual_1["default"](prevSelectedIds || [], selectedIds)) {
+    var prevSelectedIds = (0, react_use_1.usePrevious)(selectedIds);
+    (0, react_1.useEffect)(function () {
+        if (!(0, isEqual_1["default"])(prevSelectedIds || [], selectedIds)) {
             props.input.onChange.call(null, selectedIds[0]);
             if (props.onChange) {
                 props.onChange.call(null, selectedIds[0]);
@@ -49,15 +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"] = fieldWrapper_1["default"]('RadioListField', RadioListField);
+exports["default"] = (0, fieldWrapper_1["default"])('RadioListField', RadioListField);