@steroidsjs/core 3.0.92 → 3.0.94

package/ui/crud/Crud/CrudContent.js

@@ -42,8 +42,8 @@ var react_1 = require("react");
 var utils_1 = require("./utils");
 var notifications_1 = require("../../../actions/notifications");
 var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
-var Grid_1 = __importDefault(require("../../../ui/list/Grid"));
 var Form_1 = __importDefault(require("../../../ui/form/Form"));
+var Grid_1 = __importDefault(require("../../../ui/list/Grid"));
 function CrudContent(props) {
     var dispatch = (0, useDispatch_1["default"])();
     // Resolve ids
@@ -71,8 +71,11 @@ function CrudContent(props) {
             if (!ItemComponent) {
                 ItemComponent = Grid_1["default"];
             }
-            return (React.createElement(ItemComponent // Grid
-            , __assign({ key: props.crudId, listId: props.crudId, action: props.restApi ? props.restApi.index : props.restUrl, scope: ['model', 'permission'], primaryKey: props.primaryKey, model: props.model, 
+            return (React.createElement(ItemComponent
+            // Grid
+            , __assign({ 
+                // Grid
+                key: props.crudId, listId: props.crudId, action: props.restApi ? props.restApi.index : props.restUrl, scope: ['model', 'permission'], primaryKey: props.primaryKey, model: props.model, 
                 //searchModel={props.searchModel}
                 controls: controlsGetter, columns: [props.primaryKey], pagination: {
                     loadMore: false
@@ -85,8 +88,11 @@ function CrudContent(props) {
             if (props.action === utils_1.CRUD_ACTION_UPDATE && (props.restUrl || props.restApi) && !props.record) {
                 return null;
             }
-            return (React.createElement(ItemComponent // Form
-            , __assign({ key: formId, formId: formId, action: props.restApi
+            return (React.createElement(ItemComponent
+            // Form
+            , __assign({ 
+                // Form
+                key: formId, formId: formId, action: props.restApi
                     ? (props.recordId ? props.restApi.update : props.restApi.create)
                     : [props.restUrl, props.recordId].filter(Boolean).join('/'), model: props.model, autoFocus: true, submitLabel: props.recordId ? __('Сохранить') : __('Добавить'), layout: 'horizontal', onComplete: onFormComplete }, props.form, { initialValues: formInitialValues })));
         default:

package/ui/crud/Crud/CrudModal.js

@@ -39,9 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var react_1 = require("react");
+var CrudContent_1 = __importDefault(require("./CrudContent"));
 var utils_1 = require("../../../ui/crud/Crud/utils");
 var Modal_1 = __importDefault(require("../../modal/Modal"));
-var CrudContent_1 = __importDefault(require("./CrudContent"));
 function CrudModal(props) {
     // Get current item
     var crudItem = props.items.find(function (item) { return item.actionName === props.action; });

package/ui/crud/Crud/utils.js

@@ -54,9 +54,9 @@ exports.__esModule = true;
 exports.routeInfoSelector = exports.normalizeItems = exports.pageControlsMap = exports.CRUD_ACTION_DELETE = exports.CRUD_ACTION_VIEW = exports.CRUD_ACTION_UPDATE = exports.CRUD_ACTION_CREATE = exports.CRUD_ACTION_INDEX = exports.DEFAULT_QUERY_KEY = exports.DEFAULT_PRIMARY_KEY = void 0;
 var get_1 = __importDefault(require("lodash-es/get"));
 var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
-var CrudDetail_1 = __importDefault(require("../../../ui/crud/Crud/CrudDetail"));
-var router_1 = require("../../../reducers/router");
 var modal_1 = require("../../../reducers/modal");
+var router_1 = require("../../../reducers/router");
+var CrudDetail_1 = __importDefault(require("../../../ui/crud/Crud/CrudDetail"));
 exports.DEFAULT_PRIMARY_KEY = 'id';
 exports.DEFAULT_QUERY_KEY = 'id';
 exports.CRUD_ACTION_INDEX = 'index';
@@ -91,7 +91,9 @@ var normalizeItems = function (sourceItems, fromProps) {
         },
         "delete": {
             position: 'right',
-            confirm: function (e, props) { return __('Удалить запись {id}?', { id: props.recordId }); },
+            confirm: function (e, props) { return __('Удалить запись {id}?', {
+                id: props.recordId
+            }); },
             onClick: function (e, props) { return __awaiter(void 0, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {

package/ui/crud/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import Crud from './Crud';
-import { IRouteItem } from '../nav/Router/Router';
 import { ICrudProps } from './Crud/Crud';
+import { IRouteItem } from '../nav/Router/Router';
 export interface ICrudGeneratorProps extends ICrudProps {
     path?: string;
     label?: string;

package/ui/form/AutoCompleteField/AutoCompleteField.js

@@ -16,10 +16,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var react_1 = require("react");
 var react_use_1 = require("react-use");
+var enums_1 = require("../../../enums");
+var hooks_1 = require("../../../hooks");
 var useComponents_1 = __importDefault(require("../../../hooks/useComponents"));
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
-var hooks_1 = require("../../../hooks");
-var enums_1 = require("../../../enums");
 var getCategories = function (items) {
     if (!items) {
         return [];

package/ui/form/BlankField/BlankField.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var enums_1 = require("../../../enums");
+var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 function BlankField(props) {
     var _a;
     return React.createElement("span", null, props.text || props.children || ((_a = props.input) === null || _a === void 0 ? void 0 : _a.value));

package/ui/form/Button/Button.d.ts

@@ -14,7 +14,7 @@ export interface IButtonBadge {
     * Цвет
     * @example 'secondary'
     */
-    color?: ColorName;
+    color?: BadgeColorName;
     /**
     * Дополнительный CSS-класс для элемента отображения
     * @example bem.element('additional-class')
@@ -46,7 +46,7 @@ export interface IButtonProps extends IUiComponent {
      * Цвет состояния
      * @example success
      */
-    color?: ColorName;
+    color?: ButtonColorName;
     /**
      * Отображать как ссылку?
      * @example true

package/ui/form/Button/Button.js

@@ -37,14 +37,16 @@ exports.__esModule = true;
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var router_1 = require("../../../actions/router");
-var router_2 = require("../../../reducers/router");
 var hooks_1 = require("../../../hooks");
+var router_2 = require("../../../reducers/router");
 var Form_1 = require("../Form/Form");
 function Button(props) {
     var components = (0, hooks_1.useComponents)();
     var dispatch = (0, react_redux_1.useDispatch)();
     // Badge
-    var badge = (0, react_1.useMemo)(function () { return (__assign(__assign(__assign({}, Button.defaultProps.badge), { enable: !!props.badge || props.badge === 0 }), (typeof props.badge === 'object' ? props.badge : { value: props.badge }))); }, [props.badge]);
+    var badge = (0, react_1.useMemo)(function () { return (__assign(__assign(__assign({}, Button.defaultProps.badge), { enable: !!props.badge || props.badge === 0 }), (typeof props.badge === 'object' ? props.badge : {
+        value: props.badge
+    }))); }, [props.badge]);
     // Route -> url
     var routePath = (0, react_redux_1.useSelector)(function (state) { return props.toRoute ? (0, router_2.getRouteProp)(state, props.toRoute, 'path') : null; });
     var url = typeof props.url !== 'undefined'

package/ui/form/Button/index.js

@@ -12,5 +12,6 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 }));
 exports.__esModule = true;
 exports["default"] = void 0;
+// eslint-disable-next-line no-restricted-exports
 var Button_1 = require("./Button");
 __createBinding(exports, Button_1, "default");

package/ui/form/CheckboxField/CheckboxField.js

@@ -38,9 +38,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var react_1 = __importStar(require("react"));
-var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
-var hooks_1 = require("../../../hooks");
 var enums_1 = require("../../../enums");
+var hooks_1 = require("../../../hooks");
+var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 function CheckboxField(props) {
     var _a, _b;
     var components = (0, hooks_1.useComponents)();
@@ -79,4 +79,6 @@ CheckboxField.defaultProps = {
     inputProps: {},
     multiply: true
 };
-exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.CHECKBOX_FIELD, CheckboxField, { label: false });
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.CHECKBOX_FIELD, CheckboxField, {
+    label: false
+});

package/ui/form/CheckboxListField/CheckboxListField.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import Enum from '../../../base/Enum';
-import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../../ui/form/Field/fieldWrapper';
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
+import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../../ui/form/Field/fieldWrapper';
 import { ICheckboxFieldViewProps } from '../CheckboxField/CheckboxField';
 type CheckboxFieldListItems = string | ({
     new (): Enum;

package/ui/form/CheckboxListField/CheckboxListField.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var react_1 = require("react");
+var enums_1 = require("../../../enums");
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
-var enums_1 = require("../../../enums");
 function CheckboxListField(props) {
     var components = (0, hooks_1.useComponents)();
     var _a = (0, hooks_1.useListField)({

package/ui/form/CheckboxTreeField/CheckboxTreeField.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { IPreparedTreeItem } from '../../../hooks/useTree';
 import Enum from '../../../base/Enum';
-import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../../ui/form/Field/fieldWrapper';
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
-import { ICheckboxFieldViewProps } from '../CheckboxField/CheckboxField';
+import { IPreparedTreeItem } from '../../../hooks/useTree';
+import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../../ui/form/Field/fieldWrapper';
 import { ITreeProps } from '../../nav/Tree/Tree';
+import { ICheckboxFieldViewProps } from '../CheckboxField/CheckboxField';
 type CheckboxTreeItems = string | ({
     new (): Enum;
 }) | (string | number | {

package/ui/form/CheckboxTreeField/CheckboxTreeField.js

@@ -38,13 +38,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 exports.getNestedItemsIds = void 0;
-var react_1 = __importStar(require("react"));
-var react_use_1 = require("react-use");
 var isArray_1 = __importDefault(require("lodash-es/isArray"));
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var react_1 = __importStar(require("react"));
+var react_use_1 = require("react-use");
+var enums_1 = require("../../../enums");
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
-var enums_1 = require("../../../enums");
 var getNestedItemsIds = function (item, groupAttribute, hasOnlyLeafCheckboxes) {
     if (hasOnlyLeafCheckboxes === void 0) { hasOnlyLeafCheckboxes = false; }
     if (item.disabled) {

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

@@ -1,8 +1,8 @@
-import React from 'react';
 import { MaskitoOptions } from '@maskito/core';
 import { IAbsolutePositioningInputProps } from '@steroidsjs/core/hooks/useAbsolutePositioning';
-import { ICalendarProps } from '../../content/Calendar/Calendar';
+import React from 'react';
 import { IDateInputStateInput, IDateInputStateOutput } from './useDateInputState';
+import { ICalendarProps } from '../../content/Calendar/Calendar';
 /**
  * DateField
  *

package/ui/form/DateField/DateField.js

@@ -14,13 +14,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": 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 react_1 = require("@maskito/react");
+var react_2 = require("react");
 var useDateInputState_1 = __importDefault(require("./useDateInputState"));
-var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 var enums_1 = require("../../../enums");
+var hooks_1 = require("../../../hooks");
+var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 /**
  * DateField
  * Поле ввода с выпадающим календарём для выбора даты
@@ -28,7 +28,7 @@ var enums_1 = require("../../../enums");
 function DateField(props) {
     var _a, _b, _c;
     var components = (0, hooks_1.useComponents)();
-    var maskInputRef = (0, react_2.useMaskito)({
+    var maskInputRef = (0, react_1.useMaskito)({
         options: (_a = props.maskOptions) !== null && _a !== void 0 ? _a : (0, kit_1.maskitoDateOptionsGenerator)({
             mode: 'dd/mm/yyyy',
             separator: '.',
@@ -46,12 +46,12 @@ function DateField(props) {
         displayFormat: props.displayFormat
     }), onClear = _d.onClear, onClose = _d.onClose, isOpened = _d.isOpened, inputProps = _d.inputProps;
     // Calendar props
-    var calendarProps = (0, react_1.useMemo)(function () {
+    var calendarProps = (0, react_2.useMemo)(function () {
         var _a;
         return (__assign({ value: props.input.value, onChange: props.input.onChange, valueFormat: props.valueFormat }, ((props === null || props === void 0 ? void 0 : props.disabledDays)
             ? __assign(__assign({}, props.calendarProps), { pickerProps: __assign(__assign({}, (_a = props.calendarProps) === null || _a === void 0 ? void 0 : _a.pickerProps), { disabledDays: props.disabledDays }) }) : props.calendarProps)));
     }, [props.calendarProps, props.disabledDays, props.input.onChange, props.input.value, props.valueFormat]);
-    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { calendarProps: calendarProps, onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove, style: props.style, autoPositioning: props.autoPositioning, maskInputRef: maskInputRef, id: props.id })); }, [
+    var viewProps = (0, react_2.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { calendarProps: calendarProps, onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove, style: props.style, autoPositioning: props.autoPositioning, maskInputRef: maskInputRef, id: props.id })); }, [
         props.viewProps, props.size, props.icon, props.errors, props.label, props.disabled,
         props.className, props.showRemove, props.style, props.autoPositioning, props.id, calendarProps,
         onClear, onClose, isOpened, inputProps, maskInputRef,

package/ui/form/DateField/useDateInputState.js

@@ -15,9 +15,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 /* eslint-disable import/no-extraneous-dependencies */
+var dayjs_1 = __importDefault(require("dayjs"));
 var react_1 = require("react");
 var react_use_1 = require("react-use");
-var dayjs_1 = __importDefault(require("dayjs"));
 var calendar_1 = require("../../../utils/calendar");
 function useDateInputState(props) {
     // Get props value

package/ui/form/DateField/useDateRange.js

@@ -14,11 +14,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+var calendar_1 = require("@steroidsjs/core/utils/calendar");
+var dayjs_1 = __importDefault(require("dayjs"));
+var isNil_1 = __importDefault(require("lodash-es/isNil"));
 var react_1 = require("react");
 var react_use_1 = require("react-use");
-var isNil_1 = __importDefault(require("lodash-es/isNil"));
-var dayjs_1 = __importDefault(require("dayjs"));
-var calendar_1 = require("@steroidsjs/core/utils/calendar");
 var isOneRangeValueEmpty = function (valueFrom, valueTo) { return !valueFrom || !valueTo; };
 function useDateRange(props) {
     // Tracking focus for input being edited

package/ui/form/DateField/useDateTime.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 /* eslint-disable import/no-extraneous-dependencies */
-var react_1 = require("react");
 var dayjs_1 = __importDefault(require("dayjs"));
+var react_1 = require("react");
 var calendar_1 = require("../../../utils/calendar");
 /**
  * useDateTime

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

@@ -1,9 +1,9 @@
-import React from 'react';
 import { MaskitoOptions } from '@maskito/core';
+import React from 'react';
 import { ILocaleComponent } from '../../../components/LocaleComponent';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
-import { IDateInputStateInput, IDateInputStateOutput } from '../DateField/useDateInputState';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
+import { IDateInputStateInput, IDateInputStateOutput } from '../DateField/useDateInputState';
 export interface IDateRangeButton {
     label: string;
     onClick: (locale: ILocaleComponent, changeFrom: (value: string) => void, changeTo: (value: string) => void) => void;

package/ui/form/DateRangeField/DateRangeField.js

@@ -14,26 +14,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var react_1 = require("react");
 var kit_1 = require("@maskito/kit");
-var react_2 = require("@maskito/react");
-var useDateRange_1 = __importDefault(require("../../form/DateField/useDateRange"));
+var react_1 = require("@maskito/react");
+var react_2 = require("react");
+var useOnDayClick_1 = __importDefault(require("./useOnDayClick"));
+var enums_1 = require("../../../enums");
 var hooks_1 = require("../../../hooks");
-var useDateInputState_1 = __importDefault(require("../DateField/useDateInputState"));
+var useDateRange_1 = __importDefault(require("../../form/DateField/useDateRange"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
-var enums_1 = require("../../../enums");
-var useOnDayClick_1 = __importDefault(require("./useOnDayClick"));
+var useDateInputState_1 = __importDefault(require("../DateField/useDateInputState"));
 function DateRangeField(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     var components = (0, hooks_1.useComponents)();
-    var maskInputFromRef = (0, react_2.useMaskito)({
+    var maskInputFromRef = (0, react_1.useMaskito)({
         options: (_b = (_a = props.maskOptions) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : (0, kit_1.maskitoDateOptionsGenerator)({
             mode: 'dd/mm/yyyy',
             separator: '.',
             min: (_d = (_c = props.disabledDays) === null || _c === void 0 ? void 0 : _c.before) !== null && _d !== void 0 ? _d : null
         })
     });
-    var maskInputToRef = (0, react_2.useMaskito)({
+    var maskInputToRef = (0, react_1.useMaskito)({
         options: (_f = (_e = props.maskOptions) === null || _e === void 0 ? void 0 : _e.to) !== null && _f !== void 0 ? _f : (0, kit_1.maskitoDateOptionsGenerator)({
             mode: 'dd/mm/yyyy',
             separator: '.',
@@ -41,7 +41,7 @@ function DateRangeField(props) {
         })
     });
     // Global onChange (from props)
-    var onChange = (0, react_1.useCallback)(function () {
+    var onChange = (0, react_2.useCallback)(function () {
         var _a;
         if (props.onChange) {
             props.onChange.call(null, (_a = {},
@@ -86,7 +86,7 @@ function DateRangeField(props) {
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat
     }), focus = _l.focus, onClose = _l.onClose, onClear = _l.onClear, extendedInputPropsFrom = _l.extendedInputPropsFrom, extendedInputPropsTo = _l.extendedInputPropsTo;
-    (0, react_1.useEffect)(function () {
+    (0, react_2.useEffect)(function () {
         if (extendedInputPropsFrom.ref && extendedInputPropsTo.ref) {
             maskInputFromRef(extendedInputPropsFrom.ref.current);
             maskInputToRef(extendedInputPropsTo.ref.current);
@@ -106,12 +106,12 @@ function DateRangeField(props) {
         onToChange: props.inputTo.onChange
     });
     // Calendar props
-    var calendarProps = (0, react_1.useMemo)(function () {
+    var calendarProps = (0, react_2.useMemo)(function () {
         var _a;
         return (__assign({ value: [props.inputFrom.value, props.inputTo.value], onChange: onDayClick, valueFormat: props.valueFormat, numberOfMonths: 2, showFooter: false }, ((props === null || props === void 0 ? void 0 : props.disabledDays)
             ? __assign(__assign({}, props.calendarProps), { pickerProps: __assign(__assign({}, (_a = props.calendarProps) === null || _a === void 0 ? void 0 : _a.pickerProps), { disabledDays: props.disabledDays }) }) : props.calendarProps)));
     }, [onDayClick, props.calendarProps, props.disabledDays, props.inputFrom.value, props.inputTo.value, props.valueFormat]);
-    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, calendarProps: calendarProps, icon: props.icon, size: props.size, disabled: props.disabled, className: props.className, showRemove: props.showRemove, errorsFrom: props.errorsFrom, errorsTo: props.errorsTo, errors: props.errors, inputPropsTo: extendedInputPropsTo, inputPropsFrom: extendedInputPropsFrom, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, style: props.style, id: props.id, withRangeButtons: props.withRangeButtons, rangeButtonsPosition: props.rangeButtonsPosition, displayFormat: props.displayFormat })); }, [props.viewProps, props.icon, props.size, props.disabled, props.className, props.showRemove, props.errorsFrom,
+    var viewProps = (0, react_2.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, calendarProps: calendarProps, icon: props.icon, size: props.size, disabled: props.disabled, className: props.className, showRemove: props.showRemove, errorsFrom: props.errorsFrom, errorsTo: props.errorsTo, errors: props.errors, inputPropsTo: extendedInputPropsTo, inputPropsFrom: extendedInputPropsFrom, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, style: props.style, id: props.id, withRangeButtons: props.withRangeButtons, rangeButtonsPosition: props.rangeButtonsPosition, displayFormat: props.displayFormat })); }, [props.viewProps, props.icon, props.size, props.disabled, props.className, props.showRemove, props.errorsFrom,
         props.errorsTo, props.errors, props.style, props.id, props.withRangeButtons, props.rangeButtonsPosition,
         props.displayFormat, onClear, onClose, calendarProps, extendedInputPropsTo, extendedInputPropsFrom, focus, isOpenedFrom, isOpenedTo]);
     return components.ui.renderView(props.view || 'form.DateRangeFieldView', viewProps);
@@ -129,4 +129,6 @@ DateRangeField.defaultProps = {
     useSmartRangeReset: true,
     rangeButtonsPosition: 'left-bottom'
 };
-exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.DATE_RANGE_FIELD, DateRangeField, { attributeSuffixes: ['from', 'to'] });
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.DATE_RANGE_FIELD, DateRangeField, {
+    attributeSuffixes: ['from', 'to']
+});

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

@@ -1,5 +1,5 @@
-import React from 'react';
 import { MaskitoOptions } from '@maskito/core';
+import React from 'react';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateInputStateInput, IDateInputStateOutput } from '../../form/DateField/useDateInputState';
 /**

package/ui/form/DateTimeField/DateTimeField.js

@@ -14,14 +14,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var react_1 = require("react");
-var react_2 = require("@maskito/react");
+var react_1 = require("@maskito/react");
+var react_2 = require("react");
 var utils_1 = require("./utils");
-var useDateTime_1 = __importDefault(require("../DateField/useDateTime"));
+var enums_1 = require("../../../enums");
+var hooks_1 = require("../../../hooks");
 var useDateInputState_1 = __importDefault(require("../../form/DateField/useDateInputState"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
-var hooks_1 = require("../../../hooks");
-var enums_1 = require("../../../enums");
+var useDateTime_1 = __importDefault(require("../DateField/useDateTime"));
 var DATE_TIME_SEPARATOR = ', ';
 /**
  * DateTimeField
@@ -30,7 +30,7 @@ var DATE_TIME_SEPARATOR = ', ';
 function DateTimeField(props) {
     var _a, _b, _c, _d, _e, _f;
     var components = (0, hooks_1.useComponents)();
-    var maskInputRef = (0, react_2.useMaskito)({
+    var maskInputRef = (0, react_1.useMaskito)({
         options: (0, utils_1.createDateTimeMask)({
             from: (_a = props.availableTime) === null || _a === void 0 ? void 0 : _a.from,
             to: (_b = props.availableTime) === null || _b === void 0 ? void 0 : _b.to,
@@ -60,13 +60,13 @@ function DateTimeField(props) {
         dateInUTC: props.dateInUTC
     }), dateValueFormat = _h.dateValueFormat, dateValue = _h.dateValue, timeValue = _h.timeValue, onDateSelect = _h.onDateSelect, onTimeSelect = _h.onTimeSelect;
     // Calendar props
-    var calendarProps = (0, react_1.useMemo)(function () {
+    var calendarProps = (0, react_2.useMemo)(function () {
         var _a;
         return (__assign({ value: dateValue, onChange: onDateSelect, valueFormat: dateValueFormat }, ((props === null || props === void 0 ? void 0 : props.disabledDays)
             ? __assign(__assign({}, props.calendarProps), { pickerProps: __assign(__assign({}, (_a = props.calendarProps) === null || _a === void 0 ? void 0 : _a.pickerProps), { disabledDays: props.disabledDays }) }) : props.calendarProps)));
     }, [dateValue, dateValueFormat, onDateSelect, props.calendarProps, props.disabledDays]);
     // TimePanel props
-    var timePanelViewProps = (0, react_1.useMemo)(function () { return ({
+    var timePanelViewProps = (0, react_2.useMemo)(function () { return ({
         onClose: onClose,
         showHeader: true,
         showNow: false,
@@ -75,7 +75,7 @@ function DateTimeField(props) {
         availableTime: props.availableTime,
         minuteStep: props.minuteStep
     }); }, [onClose, onTimeSelect, props.availableTime, props.minuteStep, timeValue]);
-    var viewProps = (0, react_1.useMemo)(function () { return ({
+    var viewProps = (0, react_2.useMemo)(function () { return ({
         isOpened: isOpened,
         onClear: onClear,
         onClose: onClose,

package/ui/form/DateTimeField/utils.js

@@ -52,11 +52,17 @@ var createDateTimeMask = function (options) {
             function (_a) {
                 var value = _a.value, selection = _a.selection;
                 if (!value) {
-                    return { value: value, selection: selection };
+                    return {
+                        value: value,
+                        selection: selection
+                    };
                 }
                 var match = value.match(TIME_REGEXP);
                 if (!match) {
-                    return { value: value, selection: selection };
+                    return {
+                        value: value,
+                        selection: selection
+                    };
                 }
                 var time = match[1];
                 var minutes = (0, utils_1.timeToMinutes)(time);
@@ -69,7 +75,10 @@ var createDateTimeMask = function (options) {
                 var clamped = clampTime(minutes, fromMin, toMin, options === null || options === void 0 ? void 0 : options.minuteStep);
                 var normalizedTime = (0, utils_1.minutesToTime)(clamped);
                 if (normalizedTime === time) {
-                    return { value: value, selection: selection };
+                    return {
+                        value: value,
+                        selection: selection
+                    };
                 }
                 return {
                     value: value.replace(TIME_REGEXP, normalizedTime),

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

@@ -1,7 +1,7 @@
 import { MaskitoOptions } from '@maskito/core';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
-import { IDateRangeButton, IDateRangeFieldProps } from '../../form/DateRangeField/DateRangeField';
 import { IDateInputStateInput, IDateInputStateOutput } from '../../form/DateField/useDateInputState';
+import { IDateRangeButton, IDateRangeFieldProps } from '../../form/DateRangeField/DateRangeField';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
 /**
  * DateTimeRangeField

package/ui/form/DateTimeRangeField/DateTimeRangeField.js

@@ -14,20 +14,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var react_1 = require("react");
-var react_2 = require("@maskito/react");
+var react_1 = require("@maskito/react");
 var utils_1 = require("@steroidsjs/core/ui/form/DateTimeField/utils");
+var react_2 = require("react");
+var enums_1 = require("../../../enums");
+var hooks_1 = require("../../../hooks");
+var useDateInputState_1 = __importDefault(require("../../form/DateField/useDateInputState"));
 var useDateRange_1 = __importDefault(require("../../form/DateField/useDateRange"));
 var useDateTime_1 = __importDefault(require("../../form/DateField/useDateTime"));
-var useDateInputState_1 = __importDefault(require("../../form/DateField/useDateInputState"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
-var hooks_1 = require("../../../hooks");
-var enums_1 = require("../../../enums");
 var DATE_TIME_SEPARATOR = ', ';
 function DateTimeRangeField(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     var components = (0, hooks_1.useComponents)();
-    var maskInputFromRef = (0, react_2.useMaskito)({
+    var maskInputFromRef = (0, react_1.useMaskito)({
         options: (_b = (_a = props.maskOptions) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : (0, utils_1.createDateTimeMask)({
             from: (_c = props.availableTime) === null || _c === void 0 ? void 0 : _c.from,
             to: (_d = props.availableTime) === null || _d === void 0 ? void 0 : _d.to,
@@ -36,7 +36,7 @@ function DateTimeRangeField(props) {
             dateTimeSeparator: (_g = props.dateTimeSeparator) !== null && _g !== void 0 ? _g : DATE_TIME_SEPARATOR
         })
     });
-    var maskInputToRef = (0, react_2.useMaskito)({
+    var maskInputToRef = (0, react_1.useMaskito)({
         options: (_j = (_h = props.maskOptions) === null || _h === void 0 ? void 0 : _h.to) !== null && _j !== void 0 ? _j : (0, utils_1.createDateTimeMask)({
             from: (_k = props.availableTime) === null || _k === void 0 ? void 0 : _k.from,
             to: (_l = props.availableTime) === null || _l === void 0 ? void 0 : _l.to,
@@ -46,7 +46,7 @@ function DateTimeRangeField(props) {
         })
     });
     // Global onChange (from props)
-    var onChange = (0, react_1.useCallback)(function () {
+    var onChange = (0, react_2.useCallback)(function () {
         var _a;
         if (props.onChange) {
             props.onChange.call(null, (_a = {},
@@ -111,7 +111,7 @@ function DateTimeRangeField(props) {
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat
     }), focus = _u.focus, onClose = _u.onClose, onClear = _u.onClear, extendedInputPropsFrom = _u.extendedInputPropsFrom, extendedInputPropsTo = _u.extendedInputPropsTo;
-    (0, react_1.useEffect)(function () {
+    (0, react_2.useEffect)(function () {
         if (extendedInputPropsFrom.ref && extendedInputPropsTo.ref) {
             maskInputFromRef(extendedInputPropsFrom.ref.current);
             maskInputToRef(extendedInputPropsTo.ref.current);
@@ -123,14 +123,14 @@ function DateTimeRangeField(props) {
         maskInputToRef,
     ]);
     // Calendar props
-    var calendarProps = (0, react_1.useMemo)(function () {
+    var calendarProps = (0, react_2.useMemo)(function () {
         var _a;
         return (__assign({ value: [dateValueFrom, dateValueTo], onChange: focus === 'from' ? onDateFromSelect : onDateToSelect, valueFormat: dateValueFormat }, ((props === null || props === void 0 ? void 0 : props.disabledDays)
             ? __assign(__assign({}, props.calendarProps), { pickerProps: __assign(__assign({}, (_a = props.calendarProps) === null || _a === void 0 ? void 0 : _a.pickerProps), { disabledDays: props.disabledDays }) }) : props.calendarProps)));
     }, [dateValueFormat, dateValueFrom, dateValueTo, focus, onDateFromSelect, onDateToSelect, props.calendarProps, props.disabledDays]);
     // TimePanel props
-    var timePanelViewProps = (0, react_1.useMemo)(function () { return (__assign({ value: focus === 'from' ? timeValueFrom : timeValueTo, onSelect: focus === 'from' ? onTimeFromSelect : onTimeToSelect, onNow: onNow, onClose: onClose, showNow: false, showHeader: true, availableTime: props.availableTime, minuteStep: props.minuteStep }, props.timePanelViewProps)); }, [focus, onClose, onNow, onTimeFromSelect, onTimeToSelect, props.availableTime, props.minuteStep, props.timePanelViewProps, timeValueFrom, timeValueTo]);
-    var viewProps = (0, react_1.useMemo)(function () { return ({
+    var timePanelViewProps = (0, react_2.useMemo)(function () { return (__assign({ value: focus === 'from' ? timeValueFrom : timeValueTo, onSelect: focus === 'from' ? onTimeFromSelect : onTimeToSelect, onNow: onNow, onClose: onClose, showNow: false, showHeader: true, availableTime: props.availableTime, minuteStep: props.minuteStep }, props.timePanelViewProps)); }, [focus, onClose, onNow, onTimeFromSelect, onTimeToSelect, props.availableTime, props.minuteStep, props.timePanelViewProps, timeValueFrom, timeValueTo]);
+    var viewProps = (0, react_2.useMemo)(function () { return ({
         onClear: onClear,
         onClose: onClose,
         calendarProps: calendarProps,
@@ -169,4 +169,6 @@ DateTimeRangeField.defaultProps = {
     rangeButtonsPosition: 'left-bottom',
     minuteStep: 1
 };
-exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.DATE_TIME_RANGE_FIELD, DateTimeRangeField, { attributeSuffixes: ['from', 'to'] });
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.DATE_TIME_RANGE_FIELD, DateTimeRangeField, {
+    attributeSuffixes: ['from', 'to']
+});