@steroidsjs/core 3.0.0-beta.116 → 3.0.0-beta.118

package/actions/notifications.js

@@ -26,7 +26,13 @@ var showNotification = function (message, level, params) {
     return function (dispatch) {
         var _a = params, position = _a.position, timeOut = _a.timeOut;
         var id = (0, uniqueId_1["default"])();
-        dispatch({ type: exports.NOTIFICATIONS_SHOW, id: id, message: message, level: level || 'success', position: position });
+        dispatch({
+            type: exports.NOTIFICATIONS_SHOW,
+            id: id,
+            message: message,
+            level: level || 'success',
+            position: position
+        });
         if (timeOut > 0) {
             setTimeout(function () { return dispatch((0, exports.closeNotification)(id)); }, timeOut);
         }

package/components/MetricsComponent.js

@@ -84,7 +84,8 @@ var MetricsComponent = /** @class */ (function () {
         (function (w, d, s, l, i) {
             w[l] = w[l] || [];
             w[l].push({
-                'gtm.start': new Date().getTime(), event: 'gtm.js'
+                'gtm.start': new Date().getTime(),
+                event: 'gtm.js'
             });
             var f = d.getElementsByTagName(s)[0];
             var j = d.createElement(s);

package/docs-autogen-result.json

@@ -16622,6 +16622,15 @@
                     "example": "'Visible'",
                     "defaultValue": null
                 },
+                {
+                    "name": "maskOptions",
+                    "decorators": [],
+                    "description": "Опции маски для полей",
+                    "required": false,
+                    "type": "{from: MaskitoOptions, to: MaskitoOptions}",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "model",
                     "decorators": [],
@@ -16871,6 +16880,22 @@
                     "type": "boolean",
                     "example": null
                 },
+                {
+                    "name": "maskInputFromRef",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "{}",
+                    "example": null
+                },
+                {
+                    "name": "maskInputFromTo",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "{}",
+                    "example": null
+                },
                 {
                     "name": "showRemove",
                     "decorators": [],
@@ -17082,6 +17107,15 @@
                     "example": "'Visible'",
                     "defaultValue": null
                 },
+                {
+                    "name": "maskOptions",
+                    "decorators": [],
+                    "description": "Опции маски для поля ввода",
+                    "required": false,
+                    "type": "MaskitoOptions",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "model",
                     "decorators": [],
@@ -17265,6 +17299,14 @@
                     "type": "boolean",
                     "example": null
                 },
+                {
+                    "name": "maskInputRef",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "{}",
+                    "example": null
+                },
                 {
                     "name": "showRemove",
                     "decorators": [],
@@ -17398,6 +17440,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "maskOptions",
+                    "decorators": [],
+                    "description": "Опции маски для полей",
+                    "required": false,
+                    "type": "{from: MaskitoOptions, to: MaskitoOptions}",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "pickerProps",
                     "decorators": [],

package/en.json

@@ -962,5 +962,6 @@
     "Кастомный placeholder для инпута": "",
     "Кастомная иконка, заменяющая иконку раскрытия по умолчанию": "",
     "Показать иконку c лева от элемента": "",
+    "Опции маски для полей": "",
     "Флаг, который позволяет использовать вложенные роуты c указанием вложенного пути": ""
 }

package/hooks/useApplication.js

@@ -158,6 +158,9 @@ function useApplication(config) {
         }
         return (React.createElement(react_redux_1.Provider, { store: components.store.store }, content));
     }, [components, config, useGlobal]);
-    return { renderApplication: renderApplication, components: components };
+    return {
+        renderApplication: renderApplication,
+        components: components
+    };
 }
 exports["default"] = useApplication;

package/hooks/useFetch.js

@@ -160,6 +160,11 @@ function useFetch(rawConfig) {
     (0, react_use_1.useUpdateEffect)(function () {
         fetch();
     }, [fetch]);
-    return { data: data, isLoading: isLoading, fetch: fetch, axiosError: axiosError };
+    return {
+        data: data,
+        isLoading: isLoading,
+        fetch: fetch,
+        axiosError: axiosError
+    };
 }
 exports["default"] = useFetch;

package/hooks/useList.js

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 exports.createInitialValues = exports.getDefaultSearchModel = exports.normalizeSortProps = exports.defaultConfig = void 0;
+/* eslint-disable @typescript-eslint/no-use-before-define */
 var react_1 = __importStar(require("react"));
 var get_1 = __importDefault(require("lodash-es/get"));
 var union_1 = __importDefault(require("lodash-es/union"));
@@ -156,10 +157,16 @@ function useList(config) {
     var searchFormFields = (_b = config.searchForm) === null || _b === void 0 ? void 0 : _b.fields;
     var SearchForm = require('../ui/list/SearchForm')["default"];
     var initialValuesSearchForm = (0, react_1.useMemo)(function () { return (searchFormFields || []).reduce(function (acc, field) {
+        var _a;
         var attribute = typeof field === 'string' ? field : field.attribute;
-        acc[attribute] = initialQuery === null || initialQuery === void 0 ? void 0 : initialQuery[attribute];
+        if ((_a = config.searchForm) === null || _a === void 0 ? void 0 : _a.initialValues) {
+            acc[attribute] = config.searchForm.initialValues[attribute];
+        }
+        else {
+            acc[attribute] = initialQuery === null || initialQuery === void 0 ? void 0 : initialQuery[attribute];
+        }
         return acc;
-    }, {}); }, [searchFormFields, initialQuery]);
+    }, {}); }, [searchFormFields, config.searchForm, initialQuery]);
     var searchFormProps = __assign(__assign({ listId: config.listId }, config.searchForm), { model: searchModel, initialValues: initialValuesSearchForm });
     var renderSearchForm = function () { return react_1["default"].createElement(SearchForm, __assign({}, searchFormProps)); };
     // Form id

package/index.d.ts

@@ -95,16 +95,16 @@ declare interface IUiComponent {
      * Переопределение view React компонента для кастомизации отображения
      * @example MyCustomView
      */
-    view?: CustomView;
+    view?: CustomView,
 
     /**
      * Дополнительный CSS-класс для элемента отображения
      */
-    className?: CssClassName;
+    className?: CssClassName,
 
     /**
      * Объект CSS стилей
      * @example {width: '45%'}
      */
-    style?: CustomStyle;
+    style?: CustomStyle,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/core",
-    "version": "3.0.0-beta.116",
+    "version": "3.0.0-beta.118",
     "description": "",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
     "repository": {
@@ -65,7 +65,7 @@
         "@babel/preset-env": "^7.13.15",
         "@babel/preset-react": "^7.13.13",
         "@babel/preset-typescript": "^7.13.0",
-        "@steroidsjs/eslint-config": "^2.1.4",
+        "@steroidsjs/eslint-config": "^2.1.6",
         "@testing-library/dom": "^8.20.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",

package/ui/content/CalendarSystem/hooks/useMonthGrid.js

@@ -39,7 +39,10 @@ var useMonthGrid = function (currentMonthFirstDayDate, setCurrentMonthFirstDayDa
         // Пройдемся по всем дням месяца и добавим их в массив
         for (var dayNumber = 1; dayNumber <= lastDayOfCurrentMonth; dayNumber++) {
             var date = new Date(Date.UTC(currentYear, month, dayNumber));
-            daysInCurrentMonth.push({ date: date, dayNumber: dayNumber });
+            daysInCurrentMonth.push({
+                date: date,
+                dayNumber: dayNumber
+            });
         }
         return {
             currentMonth: month,

package/ui/form/Button/Button.js

@@ -52,9 +52,15 @@ function Button(props) {
         ? props.url
         : (routePath ? (0, router_2.buildUrl)(routePath, props.toRouteParams) : null);
     // Flags: isLoading, isFailed
-    var _a = (0, react_1.useState)({ isLoading: false, isFailed: false }), _b = _a[0], isLoading = _b.isLoading, isFailed = _b.isFailed, setStateFlags = _a[1];
+    var _a = (0, react_1.useState)({
+        isLoading: false,
+        isFailed: false
+    }), _b = _a[0], isLoading = _b.isLoading, isFailed = _b.isFailed, setStateFlags = _a[1];
     React.useEffect(function () {
-        setStateFlags({ isLoading: props.isLoading, isFailed: props.isFailed });
+        setStateFlags({
+            isLoading: props.isLoading,
+            isFailed: props.isFailed
+        });
     }, [props.isLoading, props.isFailed]);
     // Form submitting
     var context = (0, react_1.useContext)(Form_1.FormContext);

package/ui/form/DateField/DateField.js

@@ -48,7 +48,10 @@ DateField.defaultProps = {
     required: false,
     showRemove: true,
     valueFormat: 'YYYY-MM-DD',
-    maskOptions: (0, kit_1.maskitoDateOptionsGenerator)({ mode: 'dd/mm/yyyy', separator: '.' }),
+    maskOptions: (0, kit_1.maskitoDateOptionsGenerator)({
+        mode: 'dd/mm/yyyy',
+        separator: '.'
+    }),
     size: 'md'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateField', DateField);

package/ui/form/DateField/useDateRange.js

@@ -23,7 +23,7 @@ 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
+    // Refs to handle auto-focus
     var valueFromRef = (0, react_1.useRef)('');
     var valueToRef = (0, react_1.useRef)('');
     // Close handler

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

@@ -1,3 +1,5 @@
+import React from 'react';
+import { MaskitoOptions } from '@maskito/core';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateInputStateInput, IDateInputStateOutput } from '../DateField/useDateInputState';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../../form/Field/fieldWrapper';
@@ -72,6 +74,19 @@ export interface IDateRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
      * @example true
      */
     hasInitialFocus?: boolean;
+    /**
+    * Опции маски для полей
+    */
+    maskOptions?: {
+        /**
+        * Опции маски для поля from
+        */
+        from: MaskitoOptions;
+        /**
+        * Опции маски для поля to
+        */
+        to: MaskitoOptions;
+    };
     [key: string]: any;
 }
 export interface IDateRangeFieldViewProps extends IDateInputStateOutput, Omit<IFieldWrapperOutputProps, 'input'>, Pick<IDateRangeFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'disabled' | 'noBorder' | 'style'> {
@@ -79,6 +94,14 @@ export interface IDateRangeFieldViewProps extends IDateInputStateOutput, Omit<IF
     inputPropsTo?: any;
     errorsFrom?: string[];
     errorsTo?: string[];
+    /**
+     * Ref для input элемента, который накладывает маску на поле from
+     */
+    maskInputFromRef?: React.RefCallback<HTMLElement>;
+    /**
+     * Ref для input элемента, который накладывает маску на поле to
+     */
+    maskInputFromTo?: React.RefCallback<HTMLElement>;
 }
 declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDateRangeFieldProps>;
 export default _default;

package/ui/form/DateRangeField/DateRangeField.js

@@ -10,17 +10,45 @@ 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_1 = require("react");
+var react_1 = __importStar(require("react"));
+var kit_1 = require("@maskito/kit");
+var react_2 = require("@maskito/react");
 var useDateRange_1 = __importDefault(require("../../form/DateField/useDateRange"));
 var hooks_1 = require("../../../hooks");
 var useDateInputState_1 = __importDefault(require("../DateField/useDateInputState"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 function DateRangeField(props) {
+    var _a, _b;
     var components = (0, hooks_1.useComponents)();
+    var maskInputFromRef = (0, react_2.useMaskito)({ options: (_a = props.maskOptions) === null || _a === void 0 ? void 0 : _a.from });
+    var maskInputToRef = (0, react_2.useMaskito)({ options: (_b = props.maskOptions) === null || _b === void 0 ? void 0 : _b.to });
     // Global onChange (from props)
     var onChange = (0, react_1.useCallback)(function () {
         var _a;
@@ -32,7 +60,7 @@ function DateRangeField(props) {
         }
     }, [props.attributeFrom, props.attributeTo, props.inputFrom.value, props.inputTo.value, props.onChange]);
     // Input 'from'
-    var _a = (0, useDateInputState_1["default"])({
+    var _c = (0, useDateInputState_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         input: props.inputFrom,
@@ -41,9 +69,9 @@ function DateRangeField(props) {
         required: props.required,
         inputProps: props.inputPropsFrom,
         onChange: onChange
-    }), isOpenedFrom = _a.isOpened, onCloseFrom = _a.onClose, inputPropsFrom = _a.inputProps, onClearFrom = _a.onClear;
+    }), isOpenedFrom = _c.isOpened, onCloseFrom = _c.onClose, inputPropsFrom = _c.inputProps, onClearFrom = _c.onClear;
     // Input 'to'
-    var _b = (0, useDateInputState_1["default"])({
+    var _d = (0, useDateInputState_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         input: props.inputTo,
@@ -52,8 +80,8 @@ function DateRangeField(props) {
         required: props.required,
         inputProps: props.inputPropsTo,
         onChange: onChange
-    }), isOpenedTo = _b.isOpened, onCloseTo = _b.onClose, inputPropsTo = _b.inputProps, onClearTo = _b.onClear;
-    var _c = (0, useDateRange_1["default"])({
+    }), isOpenedTo = _d.isOpened, onCloseTo = _d.onClose, inputPropsTo = _d.inputProps, onClearTo = _d.onClear;
+    var _e = (0, useDateRange_1["default"])({
         onClearFrom: onClearFrom,
         onCloseTo: onCloseTo,
         onCloseFrom: onCloseFrom,
@@ -66,7 +94,18 @@ function DateRangeField(props) {
         hasInitialFocus: props.hasInitialFocus,
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat
-    }), focus = _c.focus, onClose = _c.onClose, onClear = _c.onClear, extendedInputPropsFrom = _c.extendedInputPropsFrom, extendedInputPropsTo = _c.extendedInputPropsTo;
+    }), focus = _e.focus, onClose = _e.onClose, onClear = _e.onClear, extendedInputPropsFrom = _e.extendedInputPropsFrom, extendedInputPropsTo = _e.extendedInputPropsTo;
+    react_1["default"].useEffect(function () {
+        if (extendedInputPropsFrom.ref && extendedInputPropsTo.ref) {
+            maskInputFromRef(extendedInputPropsFrom.ref.current);
+            maskInputToRef(extendedInputPropsTo.ref.current);
+        }
+    }, [
+        extendedInputPropsFrom.ref,
+        extendedInputPropsTo.ref,
+        maskInputFromRef,
+        maskInputToRef,
+    ]);
     // Calendar props
     var calendarProps = (0, react_1.useMemo)(function () { return ({
         value: [props.inputFrom.value, props.inputTo.value],
@@ -88,6 +127,16 @@ DateRangeField.defaultProps = {
     hasInitialFocus: false,
     icon: true,
     noBorder: false,
-    size: 'md'
+    size: 'md',
+    maskOptions: {
+        from: (0, kit_1.maskitoDateOptionsGenerator)({
+            mode: 'dd/mm/yyyy',
+            separator: '.'
+        }),
+        to: (0, kit_1.maskitoDateOptionsGenerator)({
+            mode: 'dd/mm/yyyy',
+            separator: '.'
+        })
+    }
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateRangeField', DateRangeField, { attributeSuffixes: ['from', 'to'] });

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

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import { MaskitoOptions } from '@maskito/core';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateInputStateInput, IDateInputStateOutput } from '../../form/DateField/useDateInputState';
 /**
@@ -17,9 +19,17 @@ export interface IDateTimeFieldProps extends IDateInputStateInput, IUiComponent
      * Свойства для компонента панели времени
      */
     timePanelViewProps?: any;
+    /**
+     * Опции маски для поля ввода
+     */
+    maskOptions?: MaskitoOptions;
     [key: string]: any;
 }
 export interface IDateTimeFieldViewProps extends IDateInputStateOutput, Pick<IDateTimeFieldProps, 'size' | 'errors' | 'showRemove' | 'calendarProps' | 'className' | 'timePanelViewProps'> {
+    /**
+     * Ref для input элемента, который накладывает маску
+     */
+    maskInputRef?: React.RefCallback<HTMLElement>;
     [key: string]: any;
 }
 declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDateTimeFieldProps>;

package/ui/form/DateTimeField/DateTimeField.js

@@ -15,17 +15,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var react_1 = require("react");
+var kit_1 = require("@maskito/kit");
+var react_2 = require("@maskito/react");
 var useDateTime_1 = __importDefault(require("../DateField/useDateTime"));
 var useDateInputState_1 = __importDefault(require("../../form/DateField/useDateInputState"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
-var DATE_TIME_SEPARATOR = ' ';
+var DATE_TIME_SEPARATOR = ', ';
 /**
  * DateTimeField
  * Поля ввода с выпадающими списками для выбора даты и времени
  */
 function DateTimeField(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,
@@ -56,7 +59,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, style: props.style }));
+    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, maskInputRef: maskInputRef }));
 }
 DateTimeField.defaultProps = {
     disabled: false,
@@ -67,6 +70,11 @@ DateTimeField.defaultProps = {
     useUTC: false,
     dateInUTC: false,
     size: 'md',
-    icon: true
+    icon: true,
+    maskOptions: (0, kit_1.maskitoDateTimeOptionsGenerator)({
+        dateMode: 'dd/mm/yyyy',
+        timeMode: 'HH:MM',
+        dateSeparator: '.'
+    })
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateTimeField', DateTimeField);

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

@@ -1,3 +1,4 @@
+import { MaskitoOptions } from '@maskito/core';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateRangeFieldProps } from '../../form/DateRangeField/DateRangeField';
 import { IDateInputStateInput, IDateInputStateOutput } from '../../form/DateField/useDateInputState';
@@ -53,6 +54,19 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
      * @example true
      */
     hasInitialFocus?: boolean;
+    /**
+    * Опции маски для полей
+    */
+    maskOptions?: {
+        /**
+        * Опции маски для поля from
+        */
+        from: MaskitoOptions;
+        /**
+        * Опции маски для поля to
+        */
+        to: MaskitoOptions;
+    };
     [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

@@ -10,19 +10,47 @@ 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_1 = require("react");
+var react_1 = __importStar(require("react"));
+var kit_1 = require("@maskito/kit");
+var react_2 = require("@maskito/react");
 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 DATE_TIME_SEPARATOR = ' ';
+var DATE_TIME_SEPARATOR = ', ';
 function DateTimeRangeField(props) {
+    var _a, _b;
     var components = (0, hooks_1.useComponents)();
+    var maskInputFromRef = (0, react_2.useMaskito)({ options: (_a = props.maskOptions) === null || _a === void 0 ? void 0 : _a.from });
+    var maskInputToRef = (0, react_2.useMaskito)({ options: (_b = props.maskOptions) === null || _b === void 0 ? void 0 : _b.to });
     // Global onChange (from props)
     var onChange = (0, react_1.useCallback)(function () {
         var _a;
@@ -34,7 +62,7 @@ function DateTimeRangeField(props) {
         }
     }, [props.attributeFrom, props.attributeTo, props.inputFrom.value, props.inputTo.value, props.onChange]);
     // Input 'from'
-    var _a = (0, useDateInputState_1["default"])({
+    var _c = (0, useDateInputState_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         input: props.inputFrom,
@@ -45,9 +73,9 @@ function DateTimeRangeField(props) {
         useUTC: props.useUTC,
         dateInUTC: props.dateInUTC,
         onChange: onChange
-    }), isOpenedFrom = _a.isOpened, onCloseFrom = _a.onClose, inputPropsFrom = _a.inputProps, onClearFrom = _a.onClear, onNow = _a.onNow;
+    }), isOpenedFrom = _c.isOpened, onCloseFrom = _c.onClose, inputPropsFrom = _c.inputProps, onClearFrom = _c.onClear, onNow = _c.onNow;
     // Input 'to'
-    var _b = (0, useDateInputState_1["default"])({
+    var _d = (0, useDateInputState_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         input: props.inputTo,
@@ -58,24 +86,24 @@ function DateTimeRangeField(props) {
         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"])({
+    }), isOpenedTo = _d.isOpened, onCloseTo = _d.onClose, inputPropsTo = _d.inputProps, onClearTo = _d.onClear;
+    var _e = (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"])({
+    }), dateValueFormat = _e.dateValueFormat, dateValueFrom = _e.dateValue, timeValueFrom = _e.timeValue, onDateFromSelect = _e.onDateSelect, onTimeFromSelect = _e.onTimeSelect;
+    var _f = (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"])({
+    }), dateValueTo = _f.dateValue, timeValueTo = _f.timeValue, onDateToSelect = _f.onDateSelect, onTimeToSelect = _f.onTimeSelect;
+    var _g = (0, useDateRange_1["default"])({
         onClearFrom: onClearFrom,
         onCloseTo: onCloseTo,
         onCloseFrom: onCloseFrom,
@@ -88,7 +116,18 @@ function DateTimeRangeField(props) {
         hasInitialFocus: props.hasInitialFocus,
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat
-    }), focus = _e.focus, onClose = _e.onClose, onClear = _e.onClear, extendedInputPropsFrom = _e.extendedInputPropsFrom, extendedInputPropsTo = _e.extendedInputPropsTo;
+    }), focus = _g.focus, onClose = _g.onClose, onClear = _g.onClear, extendedInputPropsFrom = _g.extendedInputPropsFrom, extendedInputPropsTo = _g.extendedInputPropsTo;
+    react_1["default"].useEffect(function () {
+        if (extendedInputPropsFrom.ref && extendedInputPropsTo.ref) {
+            maskInputFromRef(extendedInputPropsFrom.ref.current);
+            maskInputToRef(extendedInputPropsTo.ref.current);
+        }
+    }, [
+        extendedInputPropsFrom.ref,
+        extendedInputPropsTo.ref,
+        maskInputFromRef,
+        maskInputToRef,
+    ]);
     // 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]);
     // TimePanel props
@@ -115,6 +154,18 @@ DateTimeRangeField.defaultProps = {
     useUTC: false,
     dateInUTC: false,
     icon: true,
-    size: 'md'
+    size: 'md',
+    maskOptions: {
+        from: (0, kit_1.maskitoDateTimeOptionsGenerator)({
+            dateMode: 'dd/mm/yyyy',
+            timeMode: 'HH:MM',
+            dateSeparator: '.'
+        }),
+        to: (0, kit_1.maskitoDateTimeOptionsGenerator)({
+            dateMode: 'dd/mm/yyyy',
+            timeMode: 'HH:MM',
+            dateSeparator: '.'
+        })
+    }
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateTimeRangeField', DateTimeRangeField, { attributeSuffixes: ['from', 'to'] });

package/ui/form/InputField/hooks/useInputFieldWarningByType.js

@@ -1,6 +1,7 @@
 "use strict";
 exports.__esModule = true;
 exports.useInputFieldWarningByType = exports.INPUT_TYPES_SUPPORTED_SELECTION = void 0;
+/* eslint-disable no-console */
 /* eslint-disable max-len */
 /* eslint-disable no-unused-expressions */
 var react_use_1 = require("react-use");

package/ui/layout/ProgressBar/ProgressBar.js

@@ -47,9 +47,15 @@ function ProgressBar(props) {
         return props.label(props.percent);
     });
     if (props.type === 'line') {
-        return components.ui.renderView('layout.LineProgressBarView', { percent: props.percent, status: props.status, size: props.size, label: getLabel() });
+        return components.ui.renderView('layout.LineProgressBarView', { percent: props.percent,
+            status: props.status,
+            size: props.size,
+            label: getLabel() });
     }
-    return components.ui.renderView('layout.CircleProgressBarView', { percent: props.percent, status: props.status, size: props.size, label: getLabel() });
+    return components.ui.renderView('layout.CircleProgressBarView', { percent: props.percent,
+        status: props.status,
+        size: props.size,
+        label: getLabel() });
 }
 ProgressBar.defaultProps = {
     status: 'normal',

package/utils/calculateComponentAbsolutePosition.js

@@ -20,10 +20,20 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
     if (process.env.IS_SSR) {
         return null;
     }
-    var style = { left: null, right: null, top: null };
+    var style = {
+        left: null,
+        right: null,
+        top: null
+    };
     var arrowPosition = null;
     var _a = parentRef.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, width = _a.width, height = _a.height;
-    var parentDimensions = { top: top, right: right, left: left, width: width, height: height };
+    var parentDimensions = {
+        top: top,
+        right: right,
+        left: left,
+        width: width,
+        height: height
+    };
     parentDimensions.top += window.scrollY;
     // eslint-disable-next-line default-case
     switch (position) {
@@ -202,6 +212,10 @@ function calculateComponentAbsolutePosition(gap, position, parentRef, componentS
             style.top = parentDimensions.top + parentDimensions.height - componentSize.height;
         }
     }
-    return { style: style, position: position, arrowPosition: arrowPosition };
+    return {
+        style: style,
+        position: position,
+        arrowPosition: arrowPosition
+    };
 }
 exports["default"] = calculateComponentAbsolutePosition;

package/utils/data.js

@@ -144,6 +144,7 @@ var shouldUpdate = function (objA, objB, deepPaths) {
                 ? (0, exports.shouldUpdate)(objA[key], objB[key], deepPath)
                 : (0, exports.shouldUpdateSingle)(objA[key], objB[key]);
             if (hasChanges) {
+                // eslint-disable-next-line no-console
                 console.log(0, 'shouldUpdate changed key:', key, objA[key], objB[key]);
                 return { value: true };
             }