@steroidsjs/core 3.0.0-beta.46 → 3.0.0-beta.48

package/docs-autogen-result.json

@@ -19730,6 +19730,479 @@
                 }
             ]
         },
+        "ITimeRangeFieldProps": {
+            "name": "ITimeRangeFieldProps",
+            "moduleName": "ui/form/TimeRangeField/TimeRangeField",
+            "title": "",
+            "description": "",
+            "tags": {},
+            "defaultProps": null,
+            "extends": [
+                "IDateInputStateInput",
+                "Omit<IFieldWrapperInputProps",
+                "'attribute'>",
+                "IUiComponent"
+            ],
+            "properties": [
+                {
+                    "name": "attribute",
+                    "decorators": [],
+                    "description": "Аттрибут (название) поля в форме",
+                    "required": false,
+                    "type": "string",
+                    "example": "'isVisible'"
+                },
+                {
+                    "name": "attributeFrom",
+                    "decorators": [],
+                    "description": "Аттрибут (название) поля в форме",
+                    "required": false,
+                    "type": "string",
+                    "example": "'fromTime'"
+                },
+                {
+                    "name": "attributeTo",
+                    "decorators": [],
+                    "description": "Аттрибут (название) поля в форме",
+                    "required": false,
+                    "type": "string",
+                    "example": "'toTime'"
+                },
+                {
+                    "name": "className",
+                    "decorators": [],
+                    "description": "Дополнительный CSS-класс для элемента отображения",
+                    "required": false,
+                    "type": "string",
+                    "example": null
+                },
+                {
+                    "name": "date",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "any",
+                    "example": null
+                },
+                {
+                    "name": "dateInUTC",
+                    "decorators": [],
+                    "description": "Задано ли значение даты в часовом поясе UTC\n(пример: с бэкенда приходит дата в UTC, но нужно отбразить ее в локальном времени.\nВ этом случае dateInUTC = true, а useUTC = false)",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
+                {
+                    "name": "disabled",
+                    "decorators": [],
+                    "description": "Переводит элемент в состояние \"не активен\"",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
+                {
+                    "name": "displayFormat",
+                    "decorators": [],
+                    "description": "Формат даты показываемый пользователю",
+                    "required": false,
+                    "type": "string",
+                    "example": "DD.MM.YYYY"
+                },
+                {
+                    "name": "errors",
+                    "decorators": [],
+                    "description": "Ошибки в поле",
+                    "required": false,
+                    "type": "string[]",
+                    "example": "['Error text']"
+                },
+                {
+                    "name": "fieldLayoutClassName",
+                    "decorators": [],
+                    "description": "Дополнительный CSS-класс для обертки FieldLayout",
+                    "required": false,
+                    "type": "string",
+                    "example": null
+                },
+                {
+                    "name": "hint",
+                    "decorators": [],
+                    "description": "Подсказка, которая отобразится рядом с полем",
+                    "required": false,
+                    "type": "string",
+                    "example": "'Only english letters'"
+                },
+                {
+                    "name": "icon",
+                    "decorators": [],
+                    "description": "Иконка, отображаемая в правой части поля",
+                    "required": false,
+                    "type": "string | boolean",
+                    "example": "calendar-day"
+                },
+                {
+                    "name": "id",
+                    "decorators": [],
+                    "description": "Input ID для связи поля с label",
+                    "required": false,
+                    "type": "string",
+                    "example": null
+                },
+                {
+                    "name": "input",
+                    "decorators": [],
+                    "description": "Свойства поля props.input",
+                    "required": false,
+                    "type": "{name: string, onChange: {}, value: any}",
+                    "example": null
+                },
+                {
+                    "name": "inputProps",
+                    "decorators": [],
+                    "description": "Свойства, передаваемые для поля во view",
+                    "required": false,
+                    "type": "Record",
+                    "example": null
+                },
+                {
+                    "name": "inputPropsFrom",
+                    "decorators": [],
+                    "description": "Свойства для input элемента from",
+                    "required": false,
+                    "type": "any",
+                    "example": null
+                },
+                {
+                    "name": "inputPropsTo",
+                    "decorators": [],
+                    "description": "Свойства для input элемента to",
+                    "required": false,
+                    "type": "any",
+                    "example": null
+                },
+                {
+                    "name": "isRenderWithoutFieldLayout",
+                    "decorators": [],
+                    "description": "Возможность отрендерить поле без обертки в компонент FieldLayout",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
+                {
+                    "name": "label",
+                    "decorators": [],
+                    "description": "Название поля либо отмена отображение поля (false)",
+                    "required": false,
+                    "type": "any",
+                    "example": "'Visible'"
+                },
+                {
+                    "name": "model",
+                    "decorators": [],
+                    "description": "Модель с полями формы",
+                    "required": false,
+                    "type": "any",
+                    "example": "{attributes: [{attribute: 'category', field: 'DropDownField'}]}"
+                },
+                {
+                    "name": "onChange",
+                    "decorators": [],
+                    "description": "Дополнительная функция, срабатывающая при изменении props.input",
+                    "required": false,
+                    "type": "{}",
+                    "example": null
+                },
+                {
+                    "name": "pickerProps",
+                    "decorators": [],
+                    "description": "Свойства для компонента DayPickerInput",
+                    "required": false,
+                    "type": "any",
+                    "example": "{dayPickerProps: {showWeekNumbers: true}}"
+                },
+                {
+                    "name": "placeholder",
+                    "decorators": [],
+                    "description": "Placeholder подсказка",
+                    "required": false,
+                    "type": "any",
+                    "example": "Your text..."
+                },
+                {
+                    "name": "prefix",
+                    "decorators": [],
+                    "description": "Префикс, который добавится к аттрибуту (названию) поля в форме",
+                    "required": false,
+                    "type": "string | boolean",
+                    "example": null
+                },
+                {
+                    "name": "required",
+                    "decorators": [],
+                    "description": "Обязательное ли поле? Если true, то к названию будет добавлен\nмодификатор 'required' - красная звездочка (по умолчанию)",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
+                {
+                    "name": "showRemove",
+                    "decorators": [],
+                    "description": "Показывать при наведении на поле иконку для сброса значения поля в начальное состояние",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
+                {
+                    "name": "size",
+                    "decorators": [],
+                    "description": "Размер поля",
+                    "required": false,
+                    "type": "string",
+                    "example": null
+                },
+                {
+                    "name": "style",
+                    "decorators": [],
+                    "description": "Объект CSS стилей",
+                    "required": false,
+                    "type": "CSSProperties",
+                    "example": "{width: '45%'}"
+                },
+                {
+                    "name": "timePanelViewProps",
+                    "decorators": [],
+                    "description": "Свойства для компонента панели времени",
+                    "required": false,
+                    "type": "any",
+                    "example": null
+                },
+                {
+                    "name": "useUTC",
+                    "decorators": [],
+                    "description": "Приводить значение даты к часовому поясу UTC\n(пример: с бэкенда приходит дата в какой-либо временной зоне (не UTC), но нужно отбразить ее\nв часовом поясе UTC. В этом случае dateInUTC = false, а useUTC = true)",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
+                {
+                    "name": "value",
+                    "decorators": [],
+                    "description": "Значение для поля",
+                    "required": false,
+                    "type": "any",
+                    "example": null
+                },
+                {
+                    "name": "valueFormat",
+                    "decorators": [],
+                    "description": "Формат даты отправляемый на сервер",
+                    "required": false,
+                    "type": "string",
+                    "example": "YYYY-MM-DD"
+                },
+                {
+                    "name": "view",
+                    "decorators": [],
+                    "description": "Переопределение view React компонента для кастомизации отображения",
+                    "required": false,
+                    "type": "React.ReactNode | {}",
+                    "example": "MyCustomView"
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Свойства для view компонента",
+                    "required": false,
+                    "type": "Record",
+                    "example": null
+                }
+            ]
+        },
+        "ITimeRangeFieldViewProps": {
+            "name": "ITimeRangeFieldViewProps",
+            "moduleName": "ui/form/TimeRangeField/TimeRangeField",
+            "title": "",
+            "description": "",
+            "tags": {},
+            "defaultProps": null,
+            "extends": [
+                "IDateInputStateOutput",
+                "Pick<ITimeRangeFieldProps",
+                "'size' | 'errors' | 'showRemove' | 'className' | 'timePanelViewProps' | 'disabled' | 'style' | 'icon'>",
+                "Omit<IFieldWrapperOutputProps",
+                "'input'>"
+            ],
+            "properties": [
+                {
+                    "name": "className",
+                    "decorators": [],
+                    "description": "Дополнительный CSS-класс для элемента отображения",
+                    "required": false,
+                    "type": "string",
+                    "example": null
+                },
+                {
+                    "name": "componentId",
+                    "decorators": [],
+                    "description": "Id компонента",
+                    "required": false,
+                    "type": "string",
+                    "example": null
+                },
+                {
+                    "name": "disabled",
+                    "decorators": [],
+                    "description": "Переводит элемент в состояние \"не активен\"",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
+                {
+                    "name": "errors",
+                    "decorators": [],
+                    "description": "Ошибки в поле",
+                    "required": false,
+                    "type": "string[]",
+                    "example": "['Error text']"
+                },
+                {
+                    "name": "errorsFrom",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "string[]",
+                    "example": null
+                },
+                {
+                    "name": "errorsTo",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "string[]",
+                    "example": null
+                },
+                {
+                    "name": "formId",
+                    "decorators": [],
+                    "description": "Id формы",
+                    "required": false,
+                    "type": "string",
+                    "example": null
+                },
+                {
+                    "name": "icon",
+                    "decorators": [],
+                    "description": "Иконка, отображаемая в правой части поля",
+                    "required": false,
+                    "type": "string | boolean",
+                    "example": "calendar-day"
+                },
+                {
+                    "name": "inputFrom",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "any",
+                    "example": null
+                },
+                {
+                    "name": "inputProps",
+                    "decorators": [],
+                    "description": "Свойства для поля во view",
+                    "required": true,
+                    "type": "{name: string, onChange: {}, value: any}",
+                    "example": null
+                },
+                {
+                    "name": "inputTo",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "any",
+                    "example": null
+                },
+                {
+                    "name": "isOpened",
+                    "decorators": [],
+                    "description": "Показать или скрыть выпадающую панель",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
+                {
+                    "name": "onClear",
+                    "decorators": [],
+                    "description": "Функция очищает значение поля",
+                    "required": false,
+                    "type": "{}",
+                    "example": null
+                },
+                {
+                    "name": "onClose",
+                    "decorators": [],
+                    "description": "Функция закрывает выпадающую панель",
+                    "required": false,
+                    "type": "{}",
+                    "example": null
+                },
+                {
+                    "name": "onNow",
+                    "decorators": [],
+                    "description": "Функция возвращает текущее значение времени (дата + время)",
+                    "required": false,
+                    "type": "{}",
+                    "example": null
+                },
+                {
+                    "name": "showRemove",
+                    "decorators": [],
+                    "description": "Показывать при наведении на поле иконку для сброса значения поля в начальное состояние",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
+                {
+                    "name": "size",
+                    "decorators": [],
+                    "description": "Размер поля",
+                    "required": false,
+                    "type": "string",
+                    "example": null
+                },
+                {
+                    "name": "style",
+                    "decorators": [],
+                    "description": "Объект CSS стилей",
+                    "required": false,
+                    "type": "CSSProperties",
+                    "example": "{width: '45%'}"
+                },
+                {
+                    "name": "timePanelFromViewProps",
+                    "decorators": [],
+                    "description": "",
+                    "required": true,
+                    "type": "ITimePanelViewProps",
+                    "example": null
+                },
+                {
+                    "name": "timePanelToViewProps",
+                    "decorators": [],
+                    "description": "",
+                    "required": true,
+                    "type": "ITimePanelViewProps",
+                    "example": null
+                },
+                {
+                    "name": "timePanelViewProps",
+                    "decorators": [],
+                    "description": "Свойства для компонента панели времени",
+                    "required": false,
+                    "type": "any",
+                    "example": null
+                }
+            ]
+        },
         "IBooleanFormatterProps": {
             "name": "IBooleanFormatterProps",
             "moduleName": "ui/format/BooleanFormatter/BooleanFormatter",
@@ -23227,7 +23700,9 @@
             "description": "Компонент для выбора количества элементов в списке",
             "tags": {},
             "defaultProps": null,
-            "extends": [],
+            "extends": [
+                "IUiComponent"
+            ],
             "properties": [
                 {
                     "name": "attribute",
@@ -23237,6 +23712,14 @@
                     "type": "string",
                     "example": "pageSize"
                 },
+                {
+                    "name": "buttonProps",
+                    "decorators": [],
+                    "description": "Свойства для кнопок пагинации",
+                    "required": false,
+                    "type": "IButtonProps",
+                    "example": null
+                },
                 {
                     "name": "className",
                     "decorators": [],
@@ -23293,6 +23776,14 @@
                     "type": "number[]",
                     "example": "[2, 3, 4]"
                 },
+                {
+                    "name": "style",
+                    "decorators": [],
+                    "description": "Объект CSS стилей",
+                    "required": false,
+                    "type": "CSSProperties",
+                    "example": "{width: '45%'}"
+                },
                 {
                     "name": "view",
                     "decorators": [],
@@ -23322,6 +23813,14 @@
                     "type": "string",
                     "example": "pageSize"
                 },
+                {
+                    "name": "buttonProps",
+                    "decorators": [],
+                    "description": "Свойства для кнопок пагинации",
+                    "required": false,
+                    "type": "IButtonProps",
+                    "example": null
+                },
                 {
                     "name": "className",
                     "decorators": [],
@@ -23351,7 +23850,7 @@
                     "decorators": [],
                     "description": "",
                     "required": true,
-                    "type": "{isActive: boolean, label: string | number, size: number}[]",
+                    "type": "{id: number, label: string | number}[]",
                     "example": null
                 },
                 {
@@ -23394,6 +23893,14 @@
                     "type": "number[]",
                     "example": "[2, 3, 4]"
                 },
+                {
+                    "name": "style",
+                    "decorators": [],
+                    "description": "Объект CSS стилей",
+                    "required": false,
+                    "type": "CSSProperties",
+                    "example": "{width: '45%'}"
+                },
                 {
                     "name": "view",
                     "decorators": [],
@@ -27032,6 +27539,13 @@
             "description": "",
             "tags": {}
         },
+        "ui/form/TimeRangeField/TimeRangeField": {
+            "name": "default",
+            "moduleName": "ui/form/TimeRangeField/TimeRangeField",
+            "title": "",
+            "description": "",
+            "tags": {}
+        },
         "ui/format/BooleanFormatter/BooleanFormatter": {
             "name": "default",
             "moduleName": "ui/format/BooleanFormatter/BooleanFormatter",

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.46",
+ "version": "3.0.0-beta.48",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {
@@ -25,6 +25,9 @@
   "watch": "tsc -p tsconfig-debug.json"
  },
  "dependencies": {
+  "@maskito/core": "^0.12.1",
+  "@maskito/kit": "^0.12.1",
+  "@maskito/react": "^0.12.1",
   "axios": "^0.21.1",
   "connected-react-router": "^6.9.3",
   "domready": "^1.0.8",
@@ -47,7 +50,6 @@
   "react-grid-gallery": "^0.4.8",
   "react-helmet": "^6.1.0",
   "react-image-crop": "^9.0.2",
-  "react-input-mask": "^3.0.0-alpha.2",
   "react-redux": "^8.0.5",
   "react-router": "^5.2.0",
   "react-router-dom": "^5.2.0",

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

@@ -1,6 +1,16 @@
 import * as React from 'react';
 import { ChangeEventHandler, ReactNode } from 'react';
+import { MaskitoOptions } from '@maskito/core';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
+export declare const MASK_PRESETS: {
+    date: MaskitoOptions;
+    phone: {
+        mask: (string | RegExp)[];
+    };
+    card: {
+        mask: any[];
+    };
+};
 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 {
     /**
@@ -53,13 +63,19 @@ export interface IInputFieldProps extends IBaseFieldProps {
     addonAfter?: ReactNode | string;
     /**
      * Конфигурация маски
-     * @example { mask: '+7 (999) 999-99-99' }
+     * @example: {
+         mask: [
+             ...Array(4).fill(/\d/),
+             '-',
+             ...Array(4).fill(/\d/),
+             '-',
+             ...Array(4).fill(/\d/),
+             '-',
+             ...Array(4).fill(/\d/),
+         ],
+        }
      */
-    maskProps?: {
-        mask?: string;
-        maskPlaceholder?: string;
-        alwaysShowMask?: boolean;
-    };
+    maskOptions?: MaskitoOptions;
     /**
      * Пользовательская иконка svg или название иконки
      */
@@ -78,6 +94,8 @@ export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOut
     onFocus?: (e: Event | React.FocusEvent) => void;
     onBlur?: (e: Event | React.FocusEvent) => void;
     onMouseDown?: (e: Event | React.MouseEvent) => void;
+    maskedInputRef?: React.RefCallback<HTMLElement>;
+    defaultValue?: string;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IInputFieldProps>;
 export default _default;

package/ui/form/InputField/InputField.js

@@ -33,17 +33,48 @@ 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: ['+', '7', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
+    },
+    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 () {
@@ -54,12 +85,7 @@ function InputField(props) {
     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',

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

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 import { IInputFieldProps } from '../InputField/InputField';
-export interface IMaskFieldProps extends IInputFieldProps {
-    mask?: string;
-}
+export type IMaskFieldProps = IInputFieldProps;
 declare function MaskField(props: IMaskFieldProps): JSX.Element;
 export default MaskField;

package/ui/form/MaskField/MaskField.js

@@ -29,6 +29,6 @@ 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) })));
+    return (react_1["default"].createElement(InputField_1["default"], __assign({}, inputProps, { maskOptions: props.maskOptions })));
 }
 exports["default"] = MaskField;

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

@@ -0,0 +1,53 @@
+import { IDateInputStateInput, IDateInputStateOutput } from '../DateField/useDateInputState';
+import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
+import { ITimePanelViewProps } from '../TimeField/TimeField';
+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;

package/ui/form/TimeRangeField/TimeRangeField.js

@@ -0,0 +1,85 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
+var useDateInputState_1 = __importDefault(require("../DateField/useDateInputState"));
+var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
+var useDateRange_1 = __importDefault(require("../DateField/useDateRange"));
+function TimeRangeField(props) {
+    var components = (0, hooks_1.useComponents)();
+    // Global onChange (from props)
+    var onChange = (0, react_1.useCallback)(function () {
+        var _a;
+        if (props.onChange) {
+            props.onChange.call(null, (_a = {},
+                _a[props.attributeFrom] = props.inputFrom.value,
+                _a[props.attributeTo] = props.inputTo.value,
+                _a));
+        }
+    }, [props.attributeFrom, props.attributeTo, props.inputFrom.value, props.inputTo.value, props.onChange]);
+    // Input 'from'
+    var _a = (0, useDateInputState_1["default"])({
+        input: props.inputFrom,
+        disabled: props.disabled,
+        onChange: onChange,
+        required: props.required,
+        inputProps: props.inputPropsFrom,
+        placeholder: props.placeholder,
+        valueFormat: props.valueFormat,
+        displayFormat: props.displayFormat
+    }), onNowFrom = _a.onNow, onCloseFrom = _a.onClose, inputPropsFrom = _a.inputProps, onClearFrom = _a.onClear, isOpenedFrom = _a.isOpened;
+    // Input 'to'
+    var _b = (0, useDateInputState_1["default"])({
+        input: props.inputTo,
+        disabled: props.disabled,
+        onChange: onChange,
+        required: props.required,
+        inputProps: props.inputPropsTo,
+        placeholder: props.placeholder,
+        valueFormat: props.valueFormat,
+        displayFormat: props.displayFormat
+    }), onNowTo = _b.onNow, onCloseTo = _b.onClose, inputPropsTo = _b.inputProps, onClearTo = _b.onClear, isOpenedTo = _b.isOpened;
+    var _c = (0, useDateRange_1["default"])({
+        onClearFrom: onClearFrom,
+        onCloseTo: onCloseTo,
+        onCloseFrom: onCloseFrom,
+        onClearTo: onClearTo,
+        inputPropsFrom: inputPropsFrom,
+        inputPropsTo: inputPropsTo,
+        inputFrom: props.inputFrom,
+        inputTo: props.inputTo,
+        useSmartFocus: true
+    }), focus = _c.focus, onClose = _c.onClose, onClear = _c.onClear, extendedInputPropsFrom = _c.extendedInputPropsFrom, extendedInputPropsTo = _c.extendedInputPropsTo;
+    var timePanelFromViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNowFrom, onClose: onCloseFrom, value: inputPropsFrom.value, onSelect: inputPropsFrom.onChange }, props.timePanelViewProps)); }, [inputPropsFrom.onChange, inputPropsFrom.value, onCloseFrom, onNowFrom, props.timePanelViewProps]);
+    var timePanelToViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNowTo, onClose: onCloseTo, value: inputPropsTo.value, onSelect: inputPropsTo.onChange }, props.timePanelViewProps)); }, [inputPropsTo.onChange, inputPropsTo.value, onCloseTo, onNowTo, props.timePanelViewProps]);
+    return components.ui.renderView(props.view || 'form.TimeRangeFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, inputPropsFrom: extendedInputPropsFrom, inputPropsTo: extendedInputPropsTo, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, style: props.style, errorsFrom: props.errorsFrom, errorsTo: props.errorsTo, timePanelFromViewProps: timePanelFromViewProps, timePanelToViewProps: timePanelToViewProps, size: props.size, icon: props.icon, disabled: props.disabled, showRemove: props.showRemove, className: props.className }));
+}
+TimeRangeField.defaultProps = {
+    disabled: false,
+    displayFormat: 'HH:mm',
+    required: false,
+    showRemove: true,
+    type: 'text',
+    valueFormat: 'HH:mm',
+    useUTC: true,
+    dateInUTC: false,
+    size: 'md',
+    icon: true
+};
+exports["default"] = (0, fieldWrapper_1["default"])('TimeRangeField', TimeRangeField, {
+    attributeSuffixes: ['from', 'to']
+});

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

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

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