@steroidsjs/core 3.0.0-beta.11 → 3.0.0-beta.110

package/ui/form/CheckboxListField/CheckboxListField.js

@@ -10,39 +10,64 @@ 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 hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
 function CheckboxListField(props) {
     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 = (0, hooks_1.useDataProvider)({
         items: props.items
     }).items;
     // Data select
     var _a = (0, hooks_1.useDataSelect)({
+        selectedIds: inputSelectedIds,
         multiple: props.multiple,
-        selectedIds: props.selectedIds,
         primaryKey: props.primaryKey,
         items: items,
         inputValue: props.input.value
-    }), hoveredId = _a.hoveredId, setHoveredId = _a.setHoveredId, selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
+    }), selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
     var onItemSelect = (0, react_1.useCallback)(function (id) {
         setSelectedIds(id);
     }, [setSelectedIds]);
-    var onItemHover = (0, react_1.useCallback)(function (id) {
-        setHoveredId(id);
-    }, [setHoveredId]);
     var inputProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.inputProps), { type: 'checkbox', name: props.input.name, disabled: props.disabled })); }, [props.disabled, props.input, props.inputProps]);
     // Sync with form
     (0, react_1.useEffect)(function () {
         props.input.onChange.call(null, selectedIds);
-    }, [props.input.onChange, selectedIds]);
+        if (props.onChange) {
+            props.onChange(selectedIds);
+        }
+    }, [props, props.input.onChange, selectedIds]);
     var onReset = (0, react_1.useCallback)(function () {
         setSelectedIds([]);
     }, [setSelectedIds]);
@@ -54,12 +79,15 @@ function CheckboxListField(props) {
             onReset();
         }
     }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
-    return components.ui.renderView(props.view || 'form.CheckboxListFieldView', __assign(__assign({}, props), { items: items, inputProps: inputProps, onItemSelect: onItemSelect, selectedIds: selectedIds, onItemHover: onItemHover, hoveredId: hoveredId }));
+    var CheckboxFieldView = props.itemView || components.ui.getView('form.CheckboxFieldView');
+    var renderCheckbox = function (checkboxProps) { return (React.createElement(CheckboxFieldView, __assign({}, checkboxProps))); };
+    return components.ui.renderView(props.view || 'form.CheckboxListFieldView', __assign(__assign({}, props), { items: items, inputProps: inputProps, onItemSelect: onItemSelect, selectedIds: selectedIds, renderCheckbox: renderCheckbox }));
 }
 CheckboxListField.defaultProps = {
     disabled: false,
     required: false,
     className: '',
-    multiple: true
+    multiple: true,
+    orientation: 'vertical'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('CheckboxListField', CheckboxListField);

package/ui/form/DateField/DateField.d.ts

@@ -1,20 +1,17 @@
+/// <reference types="react" />
+import { MaskitoOptions } from '@maskito/core';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateInputStateInput, IDateInputStateOutput } from './useDateInputState';
-export interface IDateFieldProps extends IDateInputStateInput {
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
+/**
+ * DateField
+ *
+ * Поле ввода с выпадающим календарём для выбора даты.
+ *
+ * Компонент `DateField` предоставляет возможность создания поля ввода с календарём для выбора даты.
+ * Он предоставляет пользователю удобный интерфейс для выбора даты с помощью календаря,
+ * а также поддерживает настройку формата отображения даты и другие параметры.
+ */
+export interface IDateFieldProps extends IDateInputStateInput, IUiComponent {
     /**
      * Свойства для view компонента
      */
@@ -23,9 +20,17 @@ export interface IDateFieldProps extends IDateInputStateInput {
      * Свойства для компонента Calendar
      */
     calendarProps?: ICalendarProps;
+    /**
+     * Опции маски для поля ввода
+     */
+    maskOptions?: MaskitoOptions;
     [key: string]: any;
 }
 export interface IDateFieldViewProps extends IDateInputStateOutput, Pick<IDateFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'className' | 'calendarProps'> {
+    /**
+     * Ref для input элемента, который накладывает маску
+     */
+    maskInputRef?: React.RefCallback<HTMLElement>;
     [key: string]: any;
 }
 declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDateFieldProps>;

package/ui/form/DateField/DateField.js

@@ -15,6 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var react_1 = require("react");
+var react_2 = require("@maskito/react");
+var kit_1 = require("@maskito/kit");
 var hooks_1 = require("../../../hooks");
 var useDateInputState_1 = __importDefault(require("./useDateInputState"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
@@ -24,6 +26,7 @@ var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
  */
 function DateField(props) {
     var components = (0, hooks_1.useComponents)();
+    var maskInputRef = (0, react_2.useMaskito)({ options: props.maskOptions });
     var _a = (0, useDateInputState_1["default"])({
         input: props.input,
         disabled: props.disabled,
@@ -36,7 +39,7 @@ function DateField(props) {
     }), onClear = _a.onClear, onClose = _a.onClose, isOpened = _a.isOpened, inputProps = _a.inputProps;
     // Calendar props
     var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: props.input.value, onChange: props.input.onChange, valueFormat: props.valueFormat }, props.calendarProps)); }, [props.calendarProps, props.input.onChange, props.input.value, props.valueFormat]);
-    return components.ui.renderView(props.view || 'form.DateFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, calendarProps: calendarProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove }));
+    return components.ui.renderView(props.view || 'form.DateFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, calendarProps: calendarProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove, style: props.style, maskInputRef: maskInputRef }));
 }
 DateField.defaultProps = {
     disabled: false,
@@ -44,6 +47,8 @@ DateField.defaultProps = {
     icon: true,
     required: false,
     showRemove: true,
-    valueFormat: 'YYYY-MM-DD'
+    valueFormat: 'YYYY-MM-DD',
+    maskOptions: (0, kit_1.maskitoDateOptionsGenerator)({ mode: 'dd/mm/yyyy', separator: '.' }),
+    size: 'md'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateField', DateField);

package/ui/form/DateField/useDateInputState.js

@@ -14,9 +14,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable import/no-extraneous-dependencies */
 var react_1 = require("react");
 var react_use_1 = require("react-use");
-var moment_1 = __importDefault(require("moment"));
+var dayjs_1 = __importDefault(require("dayjs"));
 var calendar_1 = require("../../../utils/calendar");
 function useDateInputState(props) {
     // Get props value
@@ -78,10 +79,10 @@ function useDateInputState(props) {
         onDisplayValueChange('');
     }, [onDisplayValueChange]);
     var onNow = (0, react_1.useCallback)(function () {
-        onDisplayValueChange((0, moment_1["default"])().format(props.displayFormat));
+        onDisplayValueChange((0, dayjs_1["default"])().format(props.displayFormat));
     }, [onDisplayValueChange, props.displayFormat]);
     // Display input props
-    var inputProps = (0, react_1.useMemo)(function () { return (__assign({ value: displayValue, onChange: onDisplayValueChange, onFocus: onFocus, onBlur: onBlur, disabled: props.disabled, placeholder: props.placeholder || props.displayFormat, required: props.required, name: props.input.name, autoComplete: 'off', type: 'text' }, props.inputProps)); }, [displayValue, onBlur, onDisplayValueChange, onFocus, props.disabled, props.displayFormat,
+    var inputProps = (0, react_1.useMemo)(function () { return (__assign({ value: displayValue, onChange: onDisplayValueChange, onFocus: onFocus, onBlur: onBlur, disabled: props.disabled, placeholder: props.placeholder || props.displayFormat.toLowerCase(), required: props.required, name: props.input.name, autoComplete: 'off', type: 'text' }, props.inputProps)); }, [displayValue, onBlur, onDisplayValueChange, onFocus, props.disabled, props.displayFormat,
         props.input.name, props.inputProps, props.placeholder, props.required]);
     return {
         isOpened: isOpened,

package/ui/form/DateField/useDateRange.d.ts

@@ -1,4 +1,5 @@
-interface IUseDateRangeProps {
+import { IDateInputStateInput } from '@steroidsjs/core/ui/form/DateField/useDateInputState';
+interface IUseDateRangeProps extends Pick<IDateInputStateInput, 'displayFormat' | 'valueFormat' | 'useUTC' | 'dateInUTC'> {
     onCloseFrom: any;
     onCloseTo: any;
     onClearFrom: any;
@@ -8,6 +9,7 @@ interface IUseDateRangeProps {
     inputTo: any;
     inputFrom: any;
     useSmartFocus: boolean;
+    hasInitialFocus: boolean;
 }
 export default function useDateRange(props: IUseDateRangeProps): {
     focus: "to" | "from";

package/ui/form/DateField/useDateRange.js

@@ -10,12 +10,18 @@ var __assign = (this && this.__assign) || function () {
     };
     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 react_use_1 = require("react-use");
+var dayjs_1 = __importDefault(require("dayjs"));
+var calendar_1 = require("@steroidsjs/core/utils/calendar");
 function useDateRange(props) {
     // Tracking focus for input being edited
     var _a = (0, react_1.useState)('from'), focus = _a[0], setFocus = _a[1];
+    var isFirstMount = (0, react_use_1.useFirstMountState)();
     // Local refs to handle auto-focus
     var valueFromRef = (0, react_1.useRef)('');
     var valueToRef = (0, react_1.useRef)('');
@@ -52,6 +58,9 @@ function useDateRange(props) {
     var prevValueFrom = (0, react_use_1.usePrevious)(props.inputFrom.value);
     var prevValueTo = (0, react_use_1.usePrevious)(props.inputTo.value);
     (0, react_1.useEffect)(function () {
+        if (!props.hasInitialFocus && isFirstMount) {
+            return;
+        }
         if (props.useSmartFocus) {
             if (focus === 'from' && !valueToRef.current && prevValueFrom !== props.inputFrom.value) {
                 valueFromRef.current = props.inputFrom.value;
@@ -62,8 +71,29 @@ function useDateRange(props) {
                 inputFromRef.current.focus();
             }
         }
+        else if (props.hasInitialFocus && isFirstMount) {
+            inputFromRef.current.focus();
+        }
         // eslint-disable-next-line max-len
-    }, [focus, onClose, prevValueFrom, prevValueTo, props, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange, props.inputTo.value]);
+    }, [focus, isFirstMount, onClose, prevValueFrom, prevValueTo, props, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange, props.inputTo.value]);
+    // Swap start and end dates if start date is later than end date
+    (0, react_1.useEffect)(function () {
+        if (props.inputFrom.value
+            && props.inputTo.value
+            && ((0, dayjs_1["default"])(props.inputTo.value).isBefore((0, dayjs_1["default"])(props.inputFrom.value)))) {
+            var convertedDateFrom = (0, calendar_1.convertDate)(props.inputFrom.value, props.valueFormat, props.valueFormat, props.useUTC, props.dateInUTC);
+            var convertedDateTo = (0, calendar_1.convertDate)(props.inputTo.value, props.valueFormat, props.valueFormat, props.useUTC, props.dateInUTC);
+            props.inputFrom.onChange.call(null, convertedDateTo);
+            props.inputTo.onChange.call(null, convertedDateFrom);
+        }
+    }, [props.dateInUTC,
+        props.inputFrom.onChange,
+        props.inputFrom.value,
+        props.inputTo.onChange,
+        props.inputTo.value,
+        props.useUTC,
+        props.valueFormat,
+    ]);
     return {
         focus: focus,
         onClose: onClose,

package/ui/form/DateField/useDateTime.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable import/no-extraneous-dependencies */
 var react_1 = require("react");
-var moment_1 = __importDefault(require("moment"));
+var dayjs_1 = __importDefault(require("dayjs"));
 var calendar_1 = require("../../../utils/calendar");
 /**
  * useDateTime
@@ -26,7 +27,7 @@ function useDateTime(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.dateTimeSeparator, props.input.onChange, props.valueFormat, timeValue]);
     var onTimeSelect = (0, react_1.useCallback)(function (time) {
-        var result = (dateValue || (0, moment_1["default"])().format(dateValueFormat)) + props.dateTimeSeparator + time;
+        var result = (dateValue || (0, dayjs_1["default"])().format(dateValueFormat)) + props.dateTimeSeparator + time;
         props.input.onChange.call(null, (0, calendar_1.convertDate)(result, [props.valueFormat, 'YYYY-MM-DD HH:mm'], props.valueFormat, 
         // converting to UTC here depends on whether the date is stored in UTC
         props.dateInUTC, 

package/ui/form/DateRangeField/DateRangeField.d.ts

@@ -3,9 +3,13 @@ import { IDateInputStateInput, IDateInputStateOutput } from '../DateField/useDat
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
 /**
  * DateRangeField
- * Поле ввода дипазона двух дат с выпадающим календарём
+ *
+ * Поле ввода дипазона двух дат с выпадающим календарём.
+ *
+ * Компонент `DateRangeField` предоставляет возможность создания поля ввода диапазона двух дат с выпадающим календарём.
+ *  Он позволяет пользователю выбрать начальную и конечную даты с помощью календаря и предоставляет удобный интерфейс для работы с диапазоном дат.
  */
-export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldWrapperInputProps, 'attribute'> {
+export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldWrapperInputProps, 'attribute'>, IUiComponent {
     /**
      * Аттрибут (название) поля в форме
      * @example 'fromTime'
@@ -18,7 +22,12 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
     attributeTo?: string;
     /**
      * Свойства для компонента DayPickerInput
-     * @example {dayPickerProps: {showWeekNumbers: true}}
+     * @example
+     * {
+     *  dayPickerProps: {
+     *   showWeekNumbers: true
+     *  }
+     * }
      */
     pickerProps?: any;
     /**
@@ -31,25 +40,11 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
      * @example YYYY-MM-DD
      */
     valueFormat?: string;
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
     /**
      * Placeholder подсказка
      * @example Your text...
      */
     placeholder?: any;
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
     /**
      * Иконка
      * @example calendar-day
@@ -60,17 +55,23 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
      * @example true
      */
     showRemove?: boolean;
+    /**
+    * Свойства для input элемента from
+    */
     inputPropsFrom?: any;
+    /**
+    * Свойства для input элемента to
+    */
     inputPropsTo?: any;
     /**
      * Свойства для компонента Calendar
      */
     calendarProps?: ICalendarProps;
     /**
-     * Отключить border вокруг элемента
-     * @example 'true'
+     * Устанавливать ли фокус и показывать календарь сразу после рендера страницы
+     * @example true
      */
-    noBorder?: boolean;
+    hasInitialFocus?: boolean;
     [key: string]: any;
 }
 export interface IDateRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style'> {

package/ui/form/DateRangeField/DateRangeField.js

@@ -62,7 +62,10 @@ function DateRangeField(props) {
         inputPropsTo: inputPropsTo,
         inputFrom: props.inputFrom,
         inputTo: props.inputTo,
-        useSmartFocus: true
+        useSmartFocus: true,
+        hasInitialFocus: props.hasInitialFocus,
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat
     }), focus = _c.focus, onClose = _c.onClose, onClear = _c.onClear, extendedInputPropsFrom = _c.extendedInputPropsFrom, extendedInputPropsTo = _c.extendedInputPropsTo;
     // Calendar props
     var calendarProps = (0, react_1.useMemo)(function () { return ({
@@ -73,7 +76,7 @@ function DateRangeField(props) {
         showFooter: false
     }); }, [focus, props.inputFrom.onChange, props.inputFrom.value, props.inputTo.onChange,
         props.inputTo.value, props.valueFormat]);
-    return components.ui.renderView(props.view || 'form.DateRangeFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, calendarProps: calendarProps, icon: props.icon, size: props.size, errorsTo: props.errorsTo, disabled: props.disabled, noBorder: props.noBorder, className: props.className, showRemove: props.showRemove, errorsFrom: props.errorsFrom, inputPropsTo: extendedInputPropsTo, inputPropsFrom: extendedInputPropsFrom, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo }));
+    return components.ui.renderView(props.view || 'form.DateRangeFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, calendarProps: calendarProps, icon: props.icon, size: props.size, errorsTo: props.errorsTo, disabled: props.disabled, noBorder: props.noBorder, className: props.className, showRemove: props.showRemove, errorsFrom: props.errorsFrom, inputPropsTo: extendedInputPropsTo, inputPropsFrom: extendedInputPropsFrom, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, style: props.style }));
 }
 DateRangeField.defaultProps = {
     disabled: false,
@@ -82,7 +85,9 @@ DateRangeField.defaultProps = {
     displayFormat: 'DD.MM.YYYY',
     valueFormat: 'YYYY-MM-DD',
     showRemove: true,
+    hasInitialFocus: false,
     icon: true,
-    noBorder: false
+    noBorder: false,
+    size: 'md'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateRangeField', DateRangeField, { attributeSuffixes: ['from', 'to'] });

package/ui/form/DateTimeField/DateTimeField.d.ts

@@ -1,20 +1,14 @@
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateInputStateInput, IDateInputStateOutput } from '../../form/DateField/useDateInputState';
-export interface IDateTimeFieldProps extends IDateInputStateInput {
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
+/**
+ * DateTimeField
+ *
+ * Поля ввода с выпадающими списками для выбора даты и времени.
+ *
+ * Компонент `DateTimeField` предоставляет возможность создания полей ввода для выбора даты и времени с помощью выпадающих списков.
+ *  Он объединяет функциональность компонента `DateField` для выбора даты и компонента `TimePanel` для выбора времени.
+ */
+export interface IDateTimeFieldProps extends IDateInputStateInput, IUiComponent {
     /**
      * Свойства для компонента Calendar
      */

package/ui/form/DateTimeField/DateTimeField.js

@@ -47,11 +47,7 @@ function DateTimeField(props) {
         dateInUTC: props.dateInUTC
     }), dateValueFormat = _b.dateValueFormat, dateValue = _b.dateValue, timeValue = _b.timeValue, onDateSelect = _b.onDateSelect, onTimeSelect = _b.onTimeSelect;
     // Calendar props
-    var calendarProps = (0, react_1.useMemo)(function () { return ({
-        value: dateValue,
-        onChange: onDateSelect,
-        valueFormat: dateValueFormat
-    }); }, [dateValue, dateValueFormat, onDateSelect]);
+    var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: dateValue, onChange: onDateSelect, valueFormat: dateValueFormat }, props.calendarProps)); }, [dateValue, dateValueFormat, onDateSelect, props.calendarProps]);
     // TimePanel props
     var timePanelViewProps = (0, react_1.useMemo)(function () { return ({
         onClose: onClose,
@@ -60,7 +56,7 @@ function DateTimeField(props) {
         value: timeValue,
         onSelect: onTimeSelect
     }); }, [onClose, onTimeSelect, timeValue]);
-    return components.ui.renderView(props.view || 'form.DateTimeFieldView', __assign(__assign({}, props.viewProps), { isOpened: isOpened, onClear: onClear, onClose: onClose, inputProps: inputProps, calendarProps: calendarProps, timePanelViewProps: timePanelViewProps, size: props.size, icon: props.icon, label: props.label, errors: props.errors, className: props.className, showRemove: props.showRemove, isInvalid: props.isInvalid, disabled: props.disabled }));
+    return components.ui.renderView(props.view || 'form.DateTimeFieldView', __assign(__assign({}, props.viewProps), { isOpened: isOpened, onClear: onClear, onClose: onClose, inputProps: inputProps, calendarProps: calendarProps, timePanelViewProps: timePanelViewProps, size: props.size, icon: props.icon, label: props.label, errors: props.errors, className: props.className, showRemove: props.showRemove, isInvalid: props.isInvalid, disabled: props.disabled, style: props.style }));
 }
 DateTimeField.defaultProps = {
     disabled: false,
@@ -68,7 +64,9 @@ DateTimeField.defaultProps = {
     className: '',
     displayFormat: 'DD.MM.YYYY' + DATE_TIME_SEPARATOR + 'HH:mm',
     valueFormat: 'YYYY-MM-DD' + DATE_TIME_SEPARATOR + 'HH:mm',
-    useUTC: true,
-    dateInUTC: false
+    useUTC: false,
+    dateInUTC: false,
+    size: 'md',
+    icon: true
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateTimeField', DateTimeField);

package/ui/form/DateTimeRangeField/DateTimeRangeField.d.ts

@@ -4,9 +4,14 @@ import { IDateInputStateInput, IDateInputStateOutput } from '../../form/DateFiel
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
 /**
  * DateTimeRangeField
- * Поле ввода дипазона двух дат со временем, с выпадающим календарём
+ *
+ * Поле ввода дипазона двух дат со временем, с выпадающим календарём.
+ *
+ * Компонент `DateTimeRangeField` предоставляет возможность создания поля ввода для выбора диапазона двух дат с временем
+ * с помощью выпадающих списков и календаря.
+ * Он объединяет функциональность компонента `DateRangeField` для выбора диапазона дат и компонента `DateTimeField` для выбора времени.
  */
-export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'inputProps' | 'input'>, Omit<IFieldWrapperInputProps, 'attribute'> {
+export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'inputProps' | 'input'>, Omit<IFieldWrapperInputProps, 'attribute'>, IUiComponent {
     /**
     * Аттрибут (название) поля в форме
     * @example 'fromTime'
@@ -19,23 +24,14 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
     attributeTo?: string;
     /**
      * Свойства для компонента DayPickerInput
-     * @example {dayPickerProps: {showWeekNumbers: true}}
+     * @example
+     * {
+     *  dayPickerProps: {
+     *   showWeekNumbers: true
+     *  }
+     * }
      */
     pickerProps?: any;
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
     /**
      * Свойства для поля 'from'
      */
@@ -53,10 +49,10 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
      */
     calendarProps?: ICalendarProps;
     /**
-     * Отключить border вокруг элемента
-     * @example 'true'
+     * Устанавливать ли фокус и показывать календарь сразу после рендера страницы
+     * @example true
      */
-    noBorder?: boolean;
+    hasInitialFocus?: boolean;
     [key: string]: any;
 }
 export interface IDateTimeRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style'> {

package/ui/form/DateTimeRangeField/DateTimeRangeField.js

@@ -42,6 +42,8 @@ function DateTimeRangeField(props) {
         placeholder: props.placeholder,
         required: props.required,
         inputProps: props.inputPropsFrom,
+        useUTC: props.useUTC,
+        dateInUTC: props.dateInUTC,
         onChange: onChange
     }), isOpenedFrom = _a.isOpened, onCloseFrom = _a.onClose, inputPropsFrom = _a.inputProps, onClearFrom = _a.onClear, onNow = _a.onNow;
     // Input 'to'
@@ -53,18 +55,24 @@ function DateTimeRangeField(props) {
         placeholder: props.placeholder,
         required: props.required,
         inputProps: props.inputPropsTo,
+        useUTC: props.useUTC,
+        dateInUTC: props.dateInUTC,
         onChange: onChange
     }), isOpenedTo = _b.isOpened, onCloseTo = _b.onClose, inputPropsTo = _b.inputProps, onClearTo = _b.onClear;
     var _c = (0, useDateTime_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         dateTimeSeparator: DATE_TIME_SEPARATOR,
+        useUTC: props.useUTC,
+        dateInUTC: props.dateInUTC,
         input: props.inputFrom
     }), dateValueFormat = _c.dateValueFormat, dateValueFrom = _c.dateValue, timeValueFrom = _c.timeValue, onDateFromSelect = _c.onDateSelect, onTimeFromSelect = _c.onTimeSelect;
     var _d = (0, useDateTime_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         dateTimeSeparator: DATE_TIME_SEPARATOR,
+        useUTC: props.useUTC,
+        dateInUTC: props.dateInUTC,
         input: props.inputTo
     }), dateValueTo = _d.dateValue, timeValueTo = _d.timeValue, onDateToSelect = _d.onDateSelect, onTimeToSelect = _d.onTimeSelect;
     var _e = (0, useDateRange_1["default"])({
@@ -76,7 +84,10 @@ function DateTimeRangeField(props) {
         inputPropsTo: inputPropsTo,
         inputFrom: props.inputFrom,
         inputTo: props.inputTo,
-        useSmartFocus: false
+        useSmartFocus: false,
+        hasInitialFocus: props.hasInitialFocus,
+        displayFormat: props.displayFormat,
+        valueFormat: props.valueFormat
     }), focus = _e.focus, onClose = _e.onClose, onClear = _e.onClear, extendedInputPropsFrom = _e.extendedInputPropsFrom, extendedInputPropsTo = _e.extendedInputPropsTo;
     // Calendar props
     var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: [dateValueFrom, dateValueTo], onChange: focus === 'from' ? onDateFromSelect : onDateToSelect, valueFormat: dateValueFormat }, props.calendarProps)); }, [dateValueFormat, dateValueFrom, dateValueTo, focus, onDateFromSelect, onDateToSelect, props.calendarProps]);
@@ -91,7 +102,7 @@ function DateTimeRangeField(props) {
         timeValueFrom,
         timeValueTo,
     ]);
-    return components.ui.renderView(props.view || 'form.DateTimeRangeFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, calendarProps: calendarProps, timePanelViewProps: timePanelViewProps, icon: props.icon, size: props.size, errorsTo: props.errorsTo, className: props.className, showRemove: props.showRemove, errorsFrom: props.errorsFrom, inputPropsTo: extendedInputPropsTo, inputPropsFrom: extendedInputPropsFrom, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, disabled: props.disabled, noBorder: props.noBorder }));
+    return components.ui.renderView(props.view || 'form.DateTimeRangeFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, calendarProps: calendarProps, timePanelViewProps: timePanelViewProps, icon: props.icon, size: props.size, errorsTo: props.errorsTo, className: props.className, showRemove: props.showRemove, errorsFrom: props.errorsFrom, inputPropsTo: extendedInputPropsTo, inputPropsFrom: extendedInputPropsFrom, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, disabled: props.disabled, noBorder: props.noBorder, style: props.style }));
 }
 DateTimeRangeField.defaultProps = {
     disabled: false,
@@ -100,6 +111,10 @@ DateTimeRangeField.defaultProps = {
     displayFormat: 'DD.MM.YYYY' + DATE_TIME_SEPARATOR + 'HH:mm',
     valueFormat: 'YYYY-MM-DD' + DATE_TIME_SEPARATOR + 'HH:mm',
     showRemove: true,
-    icon: true
+    hasInitialFocus: false,
+    useUTC: false,
+    dateInUTC: false,
+    icon: true,
+    size: 'md'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateTimeRangeField', DateTimeRangeField, { attributeSuffixes: ['from', 'to'] });