@steroidsjs/core 3.0.0-beta.8 → 3.0.0-beta.81

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,7 +1,8 @@
+/// <reference types="react" />
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * ReCaptchaField
- * Компонент для использования ReCAPTCHA v3 от Google: https://developers.google.com/recaptcha/docs/v3.
+ * Компонент для использования ReCAPTCHA v3 от Google.
  * Чтобы добавить ReCAPTCHA в форму необходимо:
  * 1) Передать siteKey в ResourceComponent.
  * 2) Поместить на сайт скрипт от Google с помощью метода экземпляра ResourceComponent
@@ -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;

package/ui/form/ReCaptchaField/ReCaptchaField.js

@@ -14,10 +14,31 @@ 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"));
 function ReCaptchaField(props) {
     var components = (0, hooks_1.useComponents)();
-    return components.ui.renderView(props.view || 'form.ReCaptchaFieldView', __assign({}, props));
+    var onChange = (0, react_1.useCallback)(function () {
+        if (props.onChange) {
+            props.onChange();
+        }
+    }, [props]);
+    var recaptchaOptions = (0, react_1.useMemo)(function () { return ({
+        onChange: onChange,
+        asyncScriptOnLoad: props.asyncScriptOnLoad,
+        badge: props.badge,
+        type: props.type,
+        tabindex: props.tabindex,
+        stoken: props.stoken,
+        onExpired: props.onExpired,
+        onErrored: props.onErrored,
+        isolated: props.isolated,
+        hl: props.hl,
+        ref: props.ref,
+        sitekey: props.sitekey || components.resource.googleCaptchaSiteKey
+    }); }, [components.resource.googleCaptchaSiteKey, onChange, props.asyncScriptOnLoad, props.badge, props.hl, props.isolated, props.onErrored, props.onExpired, props.ref, props.sitekey, props.stoken, props.tabindex, props.type]);
+    return components.ui.renderView(props.view || 'form.ReCaptchaFieldView', __assign(__assign({}, props), { recaptchaOptions: recaptchaOptions }));
 }
 exports["default"] = (0, fieldWrapper_1["default"])('ReCaptchaField', ReCaptchaField);

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

@@ -4,20 +4,11 @@ import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fiel
  * SliderField
  * Компонент с ползунком для выбора числового значения в пределах указанного промежутка
  */
-export interface ISliderFieldProps extends IFieldWrapperInputProps {
+export interface ISliderFieldProps extends IFieldWrapperInputProps, IUiComponent {
     /**
      * Свойства для компонента слайдера
      */
     sliderProps?: any;
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * Минимальное значение в слайдере
      * @example 0
@@ -39,12 +30,12 @@ export interface ISliderFieldProps extends IFieldWrapperInputProps {
      */
     step?: null | number;
     /**
-     * Значение по-умолчанию при первом рендере. Для isRange=false исполуется number, для isRange=true - number[]
+     * Значение по-умолчанию при первом рендере. Для isRange=false используется number, для isRange=true - number[]
      * @example 1
      */
     defaultValue?: number | number[];
     /**
-     * Любое строкове значение после значения состояния слайдера в всплывающем окошке.
+     * Любое строковое значение после значения состояния слайдера в всплывающем окошке.
      * @example '%'
      */
     valuePostfix?: string;

package/ui/form/SliderField/SliderField.js

@@ -39,7 +39,7 @@ function SliderField(props) {
             props.input.onChange.call(null, value);
         }
     }); }, [props.min, props.max, props.step, props.marks, props.isRange, props.disabled, props.isVertical, props.input.value, props.input.onChange, props.valuePostfix, props.defaultValue, props.tooltipIsVisible]);
-    return components.ui.renderView('form.SliderFieldView', __assign(__assign({}, props), { sliderProps: sliderProps }));
+    return components.ui.renderView(props.view || 'form.SliderFieldView', __assign(__assign({}, props), { sliderProps: sliderProps }));
 }
 SliderField.defaultProps = {
     step: 1,

package/ui/form/SwitcherField/SwitcherField.d.ts

@@ -1,33 +1,39 @@
+import * as React from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
+export interface ISwitcherItem {
+    id: number | string | boolean;
+    label?: string | {
+        checked: string;
+        unchecked: string;
+    };
+    [key: string]: any;
+}
 /**
  * SwitcherField
  * Список с кнопками. Используется для выбора одного значения.
  */
-export interface ISwitcherFieldProps extends IFieldWrapperInputProps, IDataProviderConfig, Omit<IDataSelectConfig, 'items'> {
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
+export interface ISwitcherFieldProps extends IFieldWrapperInputProps, IDataProviderConfig, Omit<IDataSelectConfig, 'items'>, IUiComponent {
     /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-    /**
-     * Свойства для компонента Button
-     */
-    buttonProps?: any;
-    [key: string]: any;
+    * Свойства для элемента input
+    * @example {onKeyDown: ...}
+    */
+    inputProps?: any;
 }
 export interface ISwitcherFieldViewProps extends IFieldWrapperOutputProps, Omit<ISwitcherFieldProps, 'items'> {
-    items: Record<string, unknown>[];
+    items: ISwitcherItem[];
     hoveredId: PrimaryKey | any;
     selectedIds: (PrimaryKey | any)[];
     onItemSelect: (id: PrimaryKey | any) => void;
     onItemHover: (id: PrimaryKey | any) => void;
     buttonProps?: any;
+    inputProps: {
+        name: string;
+        type: string;
+        disabled?: boolean;
+        onChange: (value: string | React.ChangeEvent) => void;
+    };
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<ISwitcherFieldProps>;
 export default _default;

package/ui/form/SwitcherField/SwitcherField.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"));
@@ -31,7 +55,8 @@ function SwitcherField(props) {
         selectedIds: props.selectedIds,
         primaryKey: props.primaryKey,
         items: items,
-        inputValue: props.input.value
+        inputValue: props.input.value,
+        multiple: props.multiple
     }), hoveredId = _a.hoveredId, setHoveredId = _a.setHoveredId, selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
     var onItemHover = (0, react_1.useCallback)(function (id) {
         setHoveredId(id);
@@ -39,21 +64,26 @@ function SwitcherField(props) {
     var onItemSelect = (0, react_1.useCallback)(function (id) {
         setSelectedIds(id);
     }, [setSelectedIds]);
+    var inputProps = React.useMemo(function () { return (__assign(__assign({}, props.inputProps), { type: 'checkbox', name: props.input.name, disabled: props.disabled })); }, [props.disabled, props.input.name, props.inputProps]);
     // Sync with form
     var prevSelectedIds = (0, react_use_1.usePrevious)(selectedIds);
     (0, react_1.useEffect)(function () {
         var _a;
         if (!(0, isEqual_1["default"])(prevSelectedIds, selectedIds)) {
             props.input.onChange.call(null, (_a = selectedIds[0]) !== null && _a !== void 0 ? _a : null);
+            if (props.onChange) {
+                props.onChange(selectedIds);
+            }
         }
-    }, [selectedIds, props.input.onChange, prevSelectedIds]);
-    return components.ui.renderView(props.view || 'form.SwitcherFieldView', __assign(__assign({}, props), { items: items, hoveredId: hoveredId, selectedIds: selectedIds, onItemHover: onItemHover, onItemSelect: onItemSelect }));
+    }, [selectedIds, props.input.onChange, prevSelectedIds, props, items]);
+    return components.ui.renderView(props.view || 'form.SwitcherFieldView', __assign(__assign({}, props), { items: items, inputProps: inputProps, hoveredId: hoveredId, selectedIds: selectedIds, onItemHover: onItemHover, onItemSelect: onItemSelect }));
 }
 SwitcherField.defaultProps = {
     primaryKey: 'id',
     disabled: false,
     required: false,
     className: '',
-    errors: null
+    errors: null,
+    size: 'md'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('SwitcherField', SwitcherField);

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

@@ -35,4 +35,4 @@ var basic_1 = require("./basic");
  * @col 6
  */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(SwitcherField_1["default"], { label: 'Errors', items: basic_1.items, errors: ['Error 1 text', 'Error 2 text'], layout: true }))); });
+    React.createElement(SwitcherField_1["default"], { label: 'Errors', items: basic_1.items, errors: ['Error 1 text', 'Error 2 text'] }))); });

package/ui/form/TextField/TextField.d.ts

@@ -1,46 +1,27 @@
-import * as React from 'react';
-import { KeyboardEventHandler } from 'react';
-import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
+import { ChangeEvent, KeyboardEventHandler } from 'react';
+import { IFieldWrapperOutputProps } from '../Field/fieldWrapper';
+import { IBaseFieldProps } from '../InputField/InputField';
 /**
  * TextField
- * Поле для ввода нескольких строк теста
+ * Поле для ввода нескольких строк текста
  */
-export interface ITextFieldProps extends IFieldWrapperInputProps {
-    /**
-     * Placeholder подсказка
-     * @example Your text...
-     */
-    placeholder?: string;
+export interface ITextFieldProps extends IBaseFieldProps {
     /**
      * Отправлять форму при нажатии на кнопку `enter`
      * @example true
      */
     submitOnEnter?: boolean;
-    /**
-     * Свойства для элемента \<input /\>
-     * @example {onKeyDown: ...}
-     */
-    inputProps?: any;
-    /**
-     * Дополнительный CSS-класс для тега \<textarea\>
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-    [key: string]: any;
 }
 export interface ITextFieldViewProps extends ITextFieldProps, IFieldWrapperOutputProps {
     inputProps: {
         name: string;
-        onChange: (value: string | React.ChangeEvent) => void;
-        onKeyUp: KeyboardEventHandler<HTMLTextAreaElement>;
+        onChange: (value: string | ChangeEvent) => void;
+        onKeyUp: KeyboardEventHandler;
         value: string | number;
         placeholder: string;
         disabled: boolean;
     };
+    onClear: VoidFunction;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<ITextFieldProps>;
 export default _default;

package/ui/form/TextField/TextField.js

@@ -15,11 +15,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var react_1 = require("react");
-var react_redux_1 = require("react-redux");
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 function TextField(props) {
-    var dispatch = (0, react_redux_1.useDispatch)();
+    // const dispatch = useDispatch();
     var components = (0, hooks_1.useComponents)();
     var onKeyUp = (0, react_1.useCallback)(function (e) {
         if (props.submitOnEnter
@@ -32,15 +31,16 @@ function TextField(props) {
         }
     }, [props.formId, props.submitOnEnter]);
     var onChange = (0, react_1.useCallback)(function (e) { return props.input.onChange.call(null, e.target ? e.target.value : e.nativeEvent.text); }, [props.input.onChange]);
-    var inputProps = (0, react_1.useMemo)(function () { return (__assign({ name: props.input.name, value: props.input.value || '', onChange: onChange, onKeyUp: onKeyUp, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps)); }, [onKeyUp, onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder]);
-    return components.ui.renderView(props.view || 'form.TextFieldView', __assign(__assign({}, props), { inputProps: inputProps }));
+    var onClear = (0, react_1.useCallback)(function () { return props.input.onChange(''); }, [props.input]);
+    var 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: onChange, onKeyUp: onKeyUp, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
+    }, [onKeyUp, onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder]);
+    return components.ui.renderView(props.view || 'form.TextFieldView', __assign(__assign({}, props), { inputProps: inputProps, onClear: onClear }));
 }
 TextField.defaultProps = {
     disabled: false,
     required: false,
-    className: '',
-    placeholder: '',
-    submitOnEnter: false,
-    errors: null
+    submitOnEnter: false
 };
 exports["default"] = (0, fieldWrapper_1["default"])('TextField', TextField);

package/ui/form/TimeField/TimeField.d.ts

@@ -7,26 +7,12 @@ export interface ITimePanelViewProps extends Pick<ITimeFieldViewProps, 'value' |
  * TimeField
  * Поле для выбора времени
  */
-export interface ITimeFieldProps extends IDateInputStateInput {
+export interface ITimeFieldProps extends IDateInputStateInput, IUiComponent {
     /**
      * Отключить border вокруг элемента
      * @example 'true'
      */
     noBorder?: boolean;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
     /**
      * Свойства для view компонента
      */
@@ -37,7 +23,7 @@ export interface ITimeFieldProps extends IDateInputStateInput {
     timePanelViewProps?: any;
     [key: string]: any;
 }
-export interface ITimeFieldViewProps extends IDateInputStateOutput, Pick<ITimeFieldProps, 'size' | 'errors' | 'showRemove' | 'noBorder' | 'className' | 'timePanelViewProps'> {
+export interface ITimeFieldViewProps extends IDateInputStateOutput, Pick<ITimeFieldProps, 'size' | 'errors' | 'showRemove' | 'noBorder' | 'className' | 'timePanelViewProps' | 'style'> {
     [key: string]: any;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<ITimeFieldProps>;

package/ui/form/TimeField/TimeField.js

@@ -40,11 +40,12 @@ TimeField.defaultProps = {
     displayFormat: 'HH:mm',
     required: false,
     placeholder: 'Select time',
-    noBorder: false,
     showRemove: true,
     type: 'text',
     valueFormat: 'HH:mm',
     useUTC: true,
-    dateInUTC: false
+    dateInUTC: false,
+    size: 'md',
+    icon: true
 };
 exports["default"] = (0, fieldWrapper_1["default"])('TimeField', TimeField);

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

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

package/ui/form/TimeRangeField/TimeRangeField.d.ts

@@ -0,0 +1,58 @@
+import { IDateInputStateInput, IDateInputStateOutput } from '../DateField/useDateInputState';
+import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
+import { ITimePanelViewProps } from '../TimeField/TimeField';
+/**
+ * TimeRangeField
+ *
+ * Компонент TimeRangeField представляет собой поле выбора временного диапазона, состоящего из двух элементов ввода времени (from и to).
+ **/
+export interface ITimeRangeFieldProps extends IDateInputStateInput, Omit<IFieldWrapperInputProps, 'attribute'>, IUiComponent {
+    /**
+     * Аттрибут (название) поля в форме
+     * @example 'fromTime'
+     */
+    attributeFrom?: string;
+    /**
+     * Аттрибут (название) поля в форме
+     * @example 'toTime'
+     */
+    attributeTo?: string;
+    /**
+    * Свойства для view компонента
+    */
+    viewProps?: Record<string, unknown>;
+    /**
+     * Свойства для компонента панели времени
+     */
+    timePanelViewProps?: any;
+    /**
+    * Свойства для input элемента from
+    */
+    inputPropsFrom?: any;
+    /**
+    * Свойства для input элемента to
+    */
+    inputPropsTo?: any;
+    /**
+    * Placeholder подсказка
+    * @example Your text...
+    */
+    placeholder?: any;
+    /**
+     * Свойства для компонента DayPickerInput
+     * @example {dayPickerProps: {showWeekNumbers: true}}
+     */
+    pickerProps?: any;
+    [key: string]: any;
+}
+export interface ITimeRangeFieldViewProps extends IDateInputStateOutput, Pick<ITimeRangeFieldProps, 'size' | 'errors' | 'showRemove' | 'className' | 'timePanelViewProps' | 'disabled' | 'style' | 'icon'>, Omit<IFieldWrapperOutputProps, 'input'> {
+    inputFrom?: any;
+    inputTo?: any;
+    errorsFrom?: string[];
+    errorsTo?: string[];
+    timePanelFromViewProps: ITimePanelViewProps;
+    timePanelToViewProps: ITimePanelViewProps;
+    [key: string]: any;
+}
+declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<ITimeRangeFieldProps>;
+export default _default;