@steroidsjs/core 3.1.3 → 3.1.5

package/components/StoreComponent.d.ts

@@ -4,7 +4,7 @@ import { History, LocationState } from 'history';
 import { Store, Dispatch, Unsubscribe, Reducer, AnyAction } from 'redux';
 declare global {
     interface Window {
-        APP_REDUX_PRELOAD_STATES?: any;
+        APP_REDUX_PRELOAD_STATES?: [any];
         __REDUX_DEVTOOLS_EXTENSION__?: any;
     }
 }

package/components/UiComponent.js

@@ -42,7 +42,7 @@ var UiComponent = /** @class */ (function () {
             Component = this._getComponent('views', Component);
         }
         if (!forceNode && (0, isFunction_1["default"])(Component)) {
-            if (Component.defaultProps) {
+            if ('defaultProps' in Component && (0, isObject_1["default"])(Component.defaultProps)) {
                 return Component(__assign(__assign({}, Component.defaultProps), props));
             }
             return Component(props);
@@ -111,7 +111,7 @@ var UiComponent = /** @class */ (function () {
         var _this = this;
         if (defaultNamespace === void 0) { defaultNamespace = null; }
         // require.context()
-        if ((0, isFunction_1["default"])(items) && (0, isFunction_1["default"])(items.keys)) {
+        if ((0, isFunction_1["default"])(items) && 'keys' in items && (0, isFunction_1["default"])(items.keys)) {
             items.keys().forEach(function (fileName) {
                 var matches = fileName.match(/^\.\/(.*\/)?[^\\/]+\/([^\\/]+)\.(js|ts)x?$/);
                 if (matches) {

package/docs-autogen-result.json

@@ -2996,7 +2996,7 @@
                     "decorators": [],
                     "description": "",
                     "required": false,
-                    "type": "Record",
+                    "type": "{}",
                     "example": null
                 }
             ],
@@ -15416,6 +15416,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "indeterminate",
+                    "decorators": [],
+                    "description": "Промежуточное состояние чекбокса — часть дочерних элементов выбрана",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "inputProps",
                     "decorators": [],
@@ -15645,6 +15654,14 @@
                     "type": "string",
                     "example": null
                 },
+                {
+                    "name": "indeterminate",
+                    "decorators": [],
+                    "description": "Промежуточное состояние чекбокса — часть дочерних элементов выбрана",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
                 {
                     "name": "input",
                     "decorators": [],
@@ -16836,6 +16853,14 @@
                     "type": "number",
                     "example": "32"
                 },
+                {
+                    "name": "primaryKey",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "string",
+                    "example": null
+                },
                 {
                     "name": "selectedIds",
                     "decorators": [],
@@ -27117,6 +27142,15 @@
                     "example": "{width: '45%'}",
                     "defaultValue": null
                 },
+                {
+                    "name": "thousandSeparator",
+                    "decorators": [],
+                    "description": "Разделитель тысяч (по умолчанию пустая строка — без разделителя, например 1000).\nДля отображения \"1 000\" передать пробел: thousandSeparator=\" \"",
+                    "required": false,
+                    "type": "string",
+                    "example": "','",
+                    "defaultValue": null
+                },
                 {
                     "name": "value",
                     "decorators": [],
@@ -27305,7 +27339,7 @@
                     "decorators": [],
                     "description": "Свойства для элемента input",
                     "required": true,
-                    "type": "{disabled: boolean, max: number, min: number, name: string, placeholder: string, required: boolean, step: string | number, type: string, value: number, onChange: null}",
+                    "type": "{disabled: boolean, max: number, min: number, name: string, placeholder: string, required: boolean, step: string | number, type: string, value: string | number, onInput: null}",
                     "example": null
                 },
                 {
@@ -27444,6 +27478,14 @@
                     "type": "CSSProperties",
                     "example": "{width: '45%'}"
                 },
+                {
+                    "name": "thousandSeparator",
+                    "decorators": [],
+                    "description": "Разделитель тысяч (по умолчанию пустая строка — без разделителя, например 1000).\nДля отображения \"1 000\" передать пробел: thousandSeparator=\" \"",
+                    "required": false,
+                    "type": "string",
+                    "example": "','"
+                },
                 {
                     "name": "value",
                     "decorators": [],
@@ -28135,6 +28177,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "indeterminate",
+                    "decorators": [],
+                    "description": "Промежуточное состояние чекбокса — часть дочерних элементов выбрана",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "inputProps",
                     "decorators": [],
@@ -30465,6 +30516,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "indeterminate",
+                    "decorators": [],
+                    "description": "Промежуточное состояние чекбокса — часть дочерних элементов выбрана",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "inputProps",
                     "decorators": [],
@@ -41897,6 +41957,14 @@
             "type": "\"top\" | \"bottom\" | \"both\" | string",
             "example": null
         },
+        "ComponentConstructor": {
+            "name": "ComponentConstructor",
+            "decorators": [],
+            "description": "",
+            "required": true,
+            "type": "{}",
+            "example": null
+        },
         "DataProviderItems": {
             "name": "DataProviderItems",
             "decorators": [],
@@ -45447,7 +45515,7 @@
                     "decorators": [],
                     "description": "",
                     "required": false,
-                    "type": "any",
+                    "type": "number",
                     "example": null,
                     "parameters": []
                 },
@@ -45510,7 +45578,7 @@
                     "decorators": [],
                     "description": "",
                     "required": false,
-                    "type": "any",
+                    "type": "ITaskPriority",
                     "example": null,
                     "parameters": [
                         {

package/en.json

@@ -1057,9 +1057,11 @@
     "Применяется для SSR. Если fetch критический — SSR вернет страницу со статус кодом ошибки.": "Used for SSR. If the fetch is critical, SSR will return the page with an error status code.",
     "Дополнительное содержание сообщения.": "Additional message content.",
     "Метки на ползунке. В объекте {key: 'value'} key определяет положение, а value определяет, что будет отображаться.\nЕсли вы хотите задать стиль определенной точки метки, значением должен быть объект,\nсодержащий свойства style и label.": "Labels on the slider. In the object {key: 'value'}, the key determines the position, and the value determines what will be displayed.\nIf you want to set a style for a specific label point, the value must be an object\ncontaining the style and label properties.",
-    "Применяется для ssr. Если fetch критический — ssr вернет страницу со статус кодом ошибки.": "",
-    "Название цвета для Alert и Notification": "",
-    "Название цвета для Badge": "",
-    "Название цвета для Button": "",
-    "Название цвета для Text, Title": ""
+    "Применяется для ssr. Если fetch критический — ssr вернет страницу со статус кодом ошибки.": "Used for SSR. If the fetch is critical, the SSR will return the page with an error status code.",
+    "Разделитель тысяч (по умолчанию пустая строка — без разделителя, например 1000).\nДля отображения \"1 000\" передать пробел: thousandSeparator=\" \"": "Thousands separator (default is an empty string — no separator, e.g., 1000).\nTo display \"1 000\", pass a space: thousandSeparator=\" \"",
+    "Название цвета для Alert и Notification": "Color name for Alert and Notification",
+    "Название цвета для Badge": "Color name for Badge",
+    "Название цвета для Button": "Color name for Button",
+    "Название цвета для Text, Title": "Color name for Text, Title",
+    "Промежуточное состояние чекбокса — часть дочерних элементов выбрана": ""
 }

package/hooks/useApplication.d.ts

@@ -15,8 +15,9 @@ import { IComponents } from '../providers/ComponentsProvider';
 import { IScreenProviderProps } from '../providers/ScreenProvider';
 import { IThemeProviderProps } from '../providers/ThemeProvider';
 import { IRouteItem, IRouterProps } from '../ui/nav/Router/Router';
+export type ComponentConstructor = new (components: IComponents, config?: Record<string, any>) => any;
 export interface IComponentConfig {
-    className?: Record<string, any>;
+    className?: ComponentConstructor;
     [key: string]: any;
 }
 /**

package/hooks/useFetch.d.ts

@@ -25,7 +25,7 @@ export interface IFetchResult<T> {
     axiosError: AxiosError | null;
 }
 export declare const normalizeConfig: (config: any) => any;
-export declare const getConfigId: (config: any) => any;
+export declare const getConfigId: (config: any) => string;
 export declare const defaultFetchHandler: (config: any, components: any, addCancelToken: any) => any;
 export declare const fetchData: (config: any, components: any, addCancelToken: any) => any;
 /**

package/hooks/useFile.js

@@ -219,7 +219,7 @@ function useFile(props) {
     var prevInputValue = (0, react_use_1.usePrevious)(props.input.value);
     //todo refactoring
     (0, react_1.useEffect)(function () {
-        if (prevInputValue && !(0, isEqual_1["default"])(prevInputValue !== props.input.value)) {
+        if (prevInputValue && !(0, isEqual_1["default"])(prevInputValue, props.input.value)) {
             var toRemove_1 = (0, difference_1["default"])([].concat(prevInputValue || []), [].concat(props.input.value || []));
             if (toRemove_1.length > 0) {
                 uploader.queue.remove(uploader.queue.getFiles().filter(function (file) { return (toRemove_1.indexOf((0, get_1["default"])(file.getResultHttpMessage(), 'id')) !== -1); }));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/core",
-    "version": "3.1.3",
+    "version": "3.1.5",
     "description": "",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
     "repository": {
@@ -39,8 +39,7 @@
         "intl-messageformat": "^10.1.4",
         "js-cookie": "^2.2.1",
         "load-js": "^3.0.3",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
+        "lodash-es": "^4.17.23",
         "path-to-regexp": "1.9.0",
         "qs": "^6.15.0",
         "react": "^18.2.0",
@@ -72,6 +71,7 @@
         "@types/enzyme": "^3.10.8",
         "@types/enzyme-adapter-react-16": "^1.0.6",
         "@types/jest": "^26.0.22",
+        "@types/lodash-es": "^4.17.12",
         "@types/markdown-to-jsx": "^7.0.1",
         "@types/reach__router": "^1.3.7",
         "@types/react": "^18.0.20",

package/reducers/list.d.ts

@@ -9,4 +9,4 @@ export declare const getIds: (state: any, listId: any) => any;
 export declare const getListItems: (state: any, listId: any) => any;
 export declare const getSelectedIds: (state: any, listId: any) => any;
 export declare const isSelected: (state: any, listId: any, itemId: any) => any;
-export declare const isSelectedAll: (state: any, listId: any) => any;
+export declare const isSelectedAll: (state: any, listId: any) => boolean;

package/ui/content/CalendarSystem/hooks/useCalendarSystem.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ICalendarSystemProps, ICalendarUser, IEventGroup } from '../CalendarSystem';
 export declare const useCalendarSystem: (props: ICalendarSystemProps) => {
-    monthGridWeekDays: any;
+    monthGridWeekDays: string[];
     monthGridCalendarDays: import("../CalendarSystem").IDay[];
     weekGridTwentyFourHoursArray: string[];
     weekGridCurrentWeekDays: {
@@ -13,7 +13,7 @@ export declare const useCalendarSystem: (props: ICalendarSystemProps) => {
     }[];
     dayGridTwentyFourHoursArray: string[];
     dayGridCurrentDay: import("../CalendarSystem").IDay;
-    dateToDisplay: any;
+    dateToDisplay: Capitalize<any>;
     innerEventGroups: IEventGroup[];
     calendarType: string;
     users: ICalendarUser[];

package/ui/content/CalendarSystem/hooks/useCalendarSystemEventGroupModals.d.ts

@@ -1,5 +1,6 @@
+import { Dispatch, SetStateAction } from 'react';
 import { IModalProps } from '../../../modal/Modal/Modal';
 import { IEventGroup } from '../CalendarSystem';
-export declare const useCalendarSystemEventGroupModals: (innerEventGroups: IEventGroup[], setInnerEventGroups: React.Dispatch<React.SetStateAction<IEventGroup[]>>, eventGroupModalProps: IModalProps) => {
+export declare const useCalendarSystemEventGroupModals: (innerEventGroups: IEventGroup[], setInnerEventGroups: Dispatch<SetStateAction<IEventGroup[]>>, eventGroupModalProps: IModalProps) => {
     openCreateEventGroupModal: () => void;
 };

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

@@ -30,8 +30,11 @@ var useCalendarSystemEventGroupModals = function (innerEventGroups, setInnerEven
     var defaultEventGroupColor = (0, react_1.useMemo)(function () { return theme === 'light' ? PRIMARY_LIGHT : PRIMARY_DARK; }, [theme]);
     var onSubmit = (0, react_1.useCallback)(function (fields) {
         var _a;
+        var maxGroup = (0, maxBy_1["default"])(innerEventGroups, function (group) { return group.id; });
+        var maxId = (_a = Number(maxGroup === null || maxGroup === void 0 ? void 0 : maxGroup.id)) !== null && _a !== void 0 ? _a : DEFAULT_ID;
+        var id = maxId + 1;
         var newEventGroup = {
-            id: (((_a = (0, maxBy_1["default"])(innerEventGroups, function (eventsGroup) { return eventsGroup.id; })) === null || _a === void 0 ? void 0 : _a.id) || DEFAULT_ID) + 1,
+            id: id,
             label: fields.label,
             color: fields.color,
             events: []

package/ui/content/CalendarSystem/hooks/useDisplayDate.d.ts

@@ -1,6 +1,6 @@
 import { IDay } from '../CalendarSystem';
 declare const useDisplayDate: (generalCurrentDay: IDay) => {
-    dateToDisplay: any;
+    dateToDisplay: Capitalize<any>;
     displayFormat: string;
     changeDisplayFormat: (newFormat: string) => void;
 };

package/ui/content/CalendarSystem/hooks/useMonthGrid.d.ts

@@ -1,6 +1,6 @@
 import { IDay } from '../CalendarSystem';
 declare const useMonthGrid: (generalCurrentDay: IDay) => {
-    monthGridWeekDays: any;
+    monthGridWeekDays: string[];
     monthGridCalendarDays: IDay[];
 };
 export default useMonthGrid;

package/ui/content/CalendarSystem/utils/utils.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="lodash" />
 import { CSSProperties } from 'react';
 import { IDay, IEvent, IEventGroup } from '../CalendarSystem';
 export declare const getWeekDaysFromDate: (date: Date) => IDay[];
 export declare const isDateIsToday: (date: Date) => boolean;
-export declare const getOmittedEvent: (event: IEvent | Omit<IEvent, 'color'>) => any;
+export declare const getOmittedEvent: (event: IEvent | Omit<IEvent, 'color'>) => import("lodash").Omit<IEvent | Omit<IEvent, "color">, "color" | "eventGroupId">;
 export declare const sortEventsInGroup: (group: IEventGroup) => Omit<IEvent, "color">[];
 export declare const getSourceCalendarControl: (control: string) => HTMLElement;
 export declare const getFormattedDay: (date?: Date) => IDay;
@@ -14,7 +15,7 @@ export declare const getFormattedWeekFromDate: (fromDate?: Date) => {
     formattedDisplay?: string;
 }[];
 export declare const getTwentyFourHoursArray: () => string[];
-export declare const getWeekDays: () => any;
+export declare const getWeekDays: () => string[];
 export declare const getProportionFromEvent: (event: IEvent) => number;
 export declare const getTopMarginFromEvent: (event: IEvent) => CSSProperties;
 export declare const formatEventTime: (date: Date) => any;

package/ui/content/Detail/Detail.js

@@ -15,8 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 exports.constants = exports.DetailLayoutEnum = void 0;
-var isArray_1 = __importDefault(require("lodash/isArray"));
-var orderBy_1 = __importDefault(require("lodash/orderBy"));
+var isArray_1 = __importDefault(require("lodash-es/isArray"));
+var orderBy_1 = __importDefault(require("lodash-es/orderBy"));
 var react_1 = require("react");
 var DetailItem_1 = __importDefault(require("./DetailItem"));
 var hooks_1 = require("../../../hooks");

package/ui/content/Icon/Icon.js

@@ -19,7 +19,7 @@ function Icon(props) {
         icon = name.indexOf('<svg') === 0 || name.indexOf('http') === 0
             ? name
             : components.ui.getIcon(name);
-        if ((0, isObject_1["default"])(icon) && (0, isString_1["default"])(icon["default"])) {
+        if ((0, isObject_1["default"])(icon) && 'default' in icon && (0, isString_1["default"])(icon["default"])) {
             icon = icon["default"];
         }
         // Fix width attribute in icon

package/ui/content/Kanban/enums/KanbanPrioritiesEnum.d.ts

@@ -13,6 +13,6 @@ export default class KanbanPrioritiesEnum extends Enum {
     };
     static getColorByType(type: any): string;
     static getPrioritiesArray(): ITaskPriority[];
-    static getPriorityById(id: any): any;
-    static getDefaultSelectedPriorityId(): any;
+    static getPriorityById(id: any): ITaskPriority;
+    static getDefaultSelectedPriorityId(): number;
 }

package/ui/form/CheckboxField/CheckboxField.d.ts

@@ -20,6 +20,10 @@ export interface ICheckboxFieldProps extends IFieldWrapperInputProps, IUiCompone
     * Пользовательский цвет для чекбокса
     */
     color?: string;
+    /**
+     * Промежуточное состояние чекбокса — часть дочерних элементов выбрана
+     */
+    indeterminate?: boolean;
     [key: string]: any;
 }
 export interface ICheckboxFieldViewProps extends ICheckboxFieldProps, IFieldWrapperOutputProps {
@@ -31,6 +35,7 @@ export interface ICheckboxFieldViewProps extends ICheckboxFieldProps, IFieldWrap
         disabled?: boolean;
         required?: boolean;
     };
+    indeterminate?: boolean;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<ICheckboxFieldProps>;
 export default _default;

package/ui/form/CheckboxField/CheckboxField.js

@@ -44,9 +44,10 @@ function CheckboxField(props) {
         id: props.id,
         label: props.label,
         onChange: props.onChange,
-        required: props.required
+        required: props.required,
+        indeterminate: props.indeterminate
     }); }, [inputProps, props.checked, props.className, props.color, props.disabled,
-        props.errors, props.id, props.label, props.onChange, props.required, props.size, props.style]);
+        props.errors, props.id, props.indeterminate, props.label, props.onChange, props.required, props.size, props.style]);
     return components.ui.renderView(props.view || 'form.CheckboxFieldView', viewProps);
 }
 CheckboxField.defaultProps = {

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

@@ -66,6 +66,7 @@ export interface ICheckboxTreeFieldViewProps extends IFieldWrapperOutputProps, P
         required?: boolean;
     } & IPreparedTreeItem[];
     selectedIds: (PrimaryKey | any)[];
+    primaryKey?: string;
     onItemSelect: (checkbox: IPreparedTreeItem) => void;
     renderCheckbox: (checkboxProps: ICheckboxFieldViewProps) => JSX.Element;
     size?: Size;

package/ui/form/CheckboxTreeField/CheckboxTreeField.js

@@ -17,6 +17,7 @@ exports.__esModule = true;
 exports.getNestedItemsIds = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var isArray_1 = __importDefault(require("lodash-es/isArray"));
+var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var react_1 = require("react");
 var react_use_1 = require("react-use");
@@ -71,13 +72,19 @@ function CheckboxTreeField(props) {
     }), selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
     var onItemSelect = (0, react_1.useCallback)(function (checkbox) {
         if (checkbox.hasItems) {
-            var selectedItemIds = (0, exports.getNestedItemsIds)(checkbox, props.primaryKey, props.hasOnlyLeafCheckboxes);
-            setSelectedIds(selectedItemIds);
+            var nestedIds = (0, exports.getNestedItemsIds)(checkbox, props.primaryKey, props.hasOnlyLeafCheckboxes);
+            var childIds = nestedIds.filter(function (id) { return id !== checkbox.id; });
+            var allChildrenSelected = !(0, isEmpty_1["default"])(childIds) && childIds.every(function (id) { return selectedIds.includes(id); });
+            // Передаём только те ID, что уже в selectedIds — useDataSelect сбросит эту ветку через isEqual,
+            // не затронув остальные выбранные элементы.
+            setSelectedIds(allChildrenSelected
+                ? nestedIds.filter(function (id) { return selectedIds.includes(id); })
+                : nestedIds);
         }
-        else if (checkbox.id && !checkbox.hasItems) {
+        else if (checkbox.id && !checkbox.hasItems && typeof checkbox.id !== 'boolean') {
             setSelectedIds(checkbox.id);
         }
-    }, [props.hasOnlyLeafCheckboxes, props.primaryKey, setSelectedIds]);
+    }, [props.hasOnlyLeafCheckboxes, props.primaryKey, selectedIds, setSelectedIds]);
     var onReset = (0, react_1.useCallback)(function () {
         setSelectedIds([]);
     }, [setSelectedIds]);
@@ -105,6 +112,7 @@ function CheckboxTreeField(props) {
         items: treeItems,
         onItemSelect: onItemSelect,
         selectedIds: selectedIds,
+        primaryKey: props.primaryKey,
         renderCheckbox: renderCheckbox,
         size: props.size,
         levelPadding: props.levelPadding,
@@ -112,7 +120,7 @@ function CheckboxTreeField(props) {
         hasIconExpandOnly: props.hasIconExpandOnly,
         itemView: TreeItemView,
         itemProps: props.itemProps
-    }); }, [treeItems, onItemSelect, selectedIds, renderCheckbox, props.size, props.levelPadding,
+    }); }, [treeItems, onItemSelect, selectedIds, props.primaryKey, renderCheckbox, props.size, props.levelPadding,
         props.hasOnlyLeafCheckboxes, props.hasIconExpandOnly, props.itemProps, TreeItemView]);
     return components.ui.renderView(props.view || 'form.CheckboxTreeFieldView', viewProps);
 }

package/ui/form/NumberField/NumberField.d.ts

@@ -1,5 +1,5 @@
 import { ISaveCursorPositionDebounceConfig } from '@steroidsjs/core/hooks/useSaveCursorPosition';
-import { ChangeEvent } from 'react';
+import { ChangeEvent, MutableRefObject } from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 import { IBaseFieldProps } from '../InputField/InputField';
 /**
@@ -35,13 +35,20 @@ export interface INumberFieldProps extends IFieldWrapperInputProps, IBaseFieldPr
      * Задержка применения введённого значения
      */
     debounce?: boolean | ISaveCursorPositionDebounceConfig;
+    /**
+     * Разделитель тысяч (по умолчанию пустая строка — без разделителя, например 1000).
+     * Для отображения "1 000" передать пробел: thousandSeparator=" "
+     * @example ' '
+     * @example ','
+     */
+    thousandSeparator?: string;
 }
 export interface INumberFieldViewProps extends INumberFieldProps, IFieldWrapperOutputProps {
     inputProps: {
         type: string;
         name: string;
-        onChange: (value: ChangeEvent<HTMLInputElement> | string) => void;
-        value: number;
+        onInput: (event: ChangeEvent<HTMLInputElement>, value?: string) => void;
+        value: number | string;
         placeholder: string;
         disabled: boolean;
         min: number;
@@ -49,7 +56,7 @@ export interface INumberFieldViewProps extends INumberFieldProps, IFieldWrapperO
         step: string | number;
         required: boolean;
     };
-    inputRef: React.MutableRefObject<any>;
+    inputRef: MutableRefObject<HTMLInputElement | null>;
     onStepUp: VoidFunction;
     onStepDown: VoidFunction;
     onKeyDown: VoidFunction;

package/ui/form/NumberField/NumberField.js

@@ -14,12 +14,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var react_1 = require("react");
-var useInputTypeNumber_1 = __importDefault(require("./hooks/useInputTypeNumber"));
+/* eslint-disable max-len */
+var core_1 = require("@maskito/core");
+var kit_1 = require("@maskito/kit");
+var react_1 = require("@maskito/react");
+var isNil_1 = __importDefault(require("lodash-es/isNil"));
+var react_2 = require("react");
 var enums_1 = require("../../../enums");
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var DEFAULT_STEP = 1;
+var DECIMAL_SEPARATOR = '.';
+var MINUS_SIGN = '-';
+var isNotEmptyValue = function (rawValue) { return !(0, isNil_1["default"])(rawValue) && rawValue !== ''; };
 function NumberField(props) {
     var _a;
     var components = (0, hooks_1.useComponents)();
@@ -30,27 +37,59 @@ function NumberField(props) {
             enabled: props.debounce
         } : ((_a = props.debounce) !== null && _a !== void 0 ? _a : {})))
     }), currentInputRef = _b.inputRef, onChange = _b.onChange, value = _b.value;
-    var step = (0, react_1.useMemo)(function () { var _a; return (_a = props.step) !== null && _a !== void 0 ? _a : DEFAULT_STEP; }, [props.step]);
-    var onInputChange = (0, useInputTypeNumber_1["default"])(currentInputRef, {
-        max: props.max,
-        min: props.min,
-        value: props.input.value,
-        required: props.required
-    }, onChange, props.decimal, props.isCanBeNegative).onInputChange;
-    var onStep = (0, react_1.useCallback)(function (isIncrement) {
-        var _a;
-        var currentValue = Number((_a = currentInputRef === null || currentInputRef === void 0 ? void 0 : currentInputRef.current) === null || _a === void 0 ? void 0 : _a.value);
-        var newValue;
-        var fixToDecimal = function (rawValue) { return props.decimal ? rawValue.toFixed(props.decimal) : rawValue; };
-        if (isIncrement) {
-            newValue = fixToDecimal(currentValue + step);
+    var step = (0, react_2.useMemo)(function () { var _a; return (_a = props.step) !== null && _a !== void 0 ? _a : DEFAULT_STEP; }, [props.step]);
+    var numberMaskOptions = (0, react_2.useMemo)(function () {
+        var _a, _b, _c, _d;
+        var min = (_a = props.min) !== null && _a !== void 0 ? _a : (props.isCanBeNegative ? -Infinity : 0);
+        var max = (_b = props.max) !== null && _b !== void 0 ? _b : Infinity;
+        return (0, kit_1.maskitoNumberOptionsGenerator)({
+            min: min,
+            max: max,
+            precision: (_c = props.decimal) !== null && _c !== void 0 ? _c : 0,
+            decimalSeparator: DECIMAL_SEPARATOR,
+            minusSign: MINUS_SIGN,
+            thousandSeparator: (_d = props.thousandSeparator) !== null && _d !== void 0 ? _d : ''
+        });
+    }, [props.min, props.max, props.isCanBeNegative, props.decimal, props.thousandSeparator]);
+    var maskedInputRef = (0, react_1.useMaskito)({
+        options: numberMaskOptions
+    });
+    (0, react_2.useEffect)(function () {
+        if (currentInputRef.current) {
+            maskedInputRef(currentInputRef.current);
+        }
+    }, [currentInputRef, maskedInputRef]);
+    (0, react_2.useEffect)(function () {
+        var input = currentInputRef.current;
+        var currentValue = props.input.value;
+        var hasValue = isNotEmptyValue(currentValue);
+        var numberValue = Number(currentValue);
+        var isValid = !props.required
+            || (hasValue && numberValue >= props.min && numberValue <= props.max);
+        input.setCustomValidity(isValid ? '' : __('The number is not valid.'));
+    }, [currentInputRef, props.required, props.min, props.max, props.input.value, props]);
+    var clampToMinMax = (0, react_2.useCallback)(function (rawValue) {
+        var val = rawValue;
+        if (val < props.min) {
+            val = props.min;
         }
-        else {
-            newValue = fixToDecimal(currentValue - step);
+        if (val > props.max) {
+            val = props.max;
         }
-        onInputChange(null, String(newValue));
-    }, [currentInputRef, onInputChange, props.decimal, step]);
-    var onKeyDown = (0, react_1.useCallback)(function (event) {
+        return val;
+    }, [props.min, props.max]);
+    var onStep = (0, react_2.useCallback)(function (isIncrement) {
+        var _a;
+        var currentValue = Number((_a = currentInputRef === null || currentInputRef === void 0 ? void 0 : currentInputRef.current) === null || _a === void 0 ? void 0 : _a.value) || 0;
+        var fixToDecimal = function (raw) { return props.decimal
+            ? raw.toFixed(props.decimal)
+            : String(raw); };
+        var newValue = isIncrement
+            ? currentValue + step
+            : currentValue - step;
+        onChange(null, fixToDecimal(clampToMinMax(newValue)));
+    }, [currentInputRef, onChange, props.decimal, step, clampToMinMax]);
+    var onKeyDown = (0, react_2.useCallback)(function (event) {
         if (event.key === 'ArrowUp') {
             onStep(true);
         }
@@ -58,12 +97,27 @@ function NumberField(props) {
             onStep(false);
         }
     }, [onStep]);
-    var inputProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.inputProps), { name: props.input.name, value: value, onChange: onInputChange, type: 'text', min: props.min, max: props.max, step: props.step, placeholder: props.placeholder, disabled: props.disabled, required: props.required, autoComplete: 'off', onKeyDown: onKeyDown })); }, [props.inputProps, props.input.name, props.min, props.max, props.step, props.placeholder, props.disabled, props.required, value, onInputChange, onKeyDown]);
-    var viewProps = (0, react_1.useMemo)(function () { return ({
+    var onBlur = (0, react_2.useCallback)(function (event) {
+        var rawValue = event.target.value;
+        if (rawValue === '') {
+            return;
+        }
+        var numberValue = Number(rawValue);
+        var shouldApplyMin = !(0, isNil_1["default"])(props.min) && !Number.isNaN(numberValue) && numberValue < props.min;
+        if (shouldApplyMin) {
+            onChange(event, String(props.min));
+        }
+    }, [onChange, props]);
+    var displayValue = (0, react_2.useMemo)(function () { return isNotEmptyValue(value)
+        ? (0, core_1.maskitoTransform)(String(value), numberMaskOptions)
+        : value; }, [value, numberMaskOptions]);
+    var inputProps = (0, react_2.useMemo)(function () { return (__assign({ type: 'text', name: props.input.name, value: displayValue, onInput: onChange, placeholder: props.placeholder, min: props.min, max: props.max, step: props.step, disabled: props.disabled, required: props.required, autoComplete: 'off', onKeyDown: onKeyDown }, props.inputProps)); }, [props.inputProps, props.input.name, props.min, props.max, props.step, props.placeholder, props.disabled, props.required, displayValue, onChange, onKeyDown]);
+    var viewProps = (0, react_2.useMemo)(function () { return ({
         viewProps: props.viewProps,
         inputProps: inputProps,
         onStepUp: function () { return onStep(true); },
         onStepDown: function () { return onStep(false); },
+        onBlur: onBlur,
         input: props.input,
         inputRef: currentInputRef,
         size: props.size,
@@ -71,7 +125,7 @@ function NumberField(props) {
         className: props.className,
         disabled: props.disabled,
         id: props.id
-    }); }, [currentInputRef, inputProps, onStep, props.className, props.disabled, props.errors, props.id, props.input, props.size, props.viewProps]);
+    }); }, [currentInputRef, inputProps, onBlur, onStep, props.className, props.disabled, props.errors, props.id, props.input, props.size, props.viewProps]);
     return components.ui.renderView(props.view || 'form.NumberFieldView', viewProps);
 }
 NumberField.defaultProps = {

package/ui/format/EnumFormatter/EnumFormatter.js

@@ -20,7 +20,7 @@ var getLabel = function (items, id) {
         return foundItem ? foundItem.label : null;
     }
     // Enum
-    if ((0, isObject_1["default"])(items) && (0, isFunction_1["default"])(items.getLabel)) {
+    if ((0, isObject_1["default"])(items) && 'getLabel' in items && (0, isFunction_1["default"])(items.getLabel)) {
         return items.getLabel(id);
     }
     return null;

package/ui/modal/ModalPortal/ModalPortal.js

@@ -42,11 +42,11 @@ function ModalPortal(props) {
             closeInternal(item);
         }
     }, [closeInternal, dispatch, props.animationDelayMc, props.group]);
-    return (0, orderBy_1["default"])(opened, 'id').map(function (item, index) {
-        var ModalComponent = item.modal;
-        var modalProps = __assign(__assign({}, item.props), { index: index, group: group, isClosing: item.isClosing, onClose: function () { return onClose(item); }, closeTimeoutMs: item.props.closeTimeoutMs || props.animationDelayMc });
-        return ((0, jsx_runtime_1.jsx)(ModalComponent, __assign({}, modalProps), item.id));
-    });
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, orderBy_1["default"])(opened, 'id').map(function (item, index) {
+            var ModalComponent = item.modal;
+            var modalProps = __assign(__assign({}, item.props), { index: index, group: group, isClosing: item.isClosing, onClose: function () { return onClose(item); }, closeTimeoutMs: item.props.closeTimeoutMs || props.animationDelayMc });
+            return ((0, jsx_runtime_1.jsx)(ModalComponent, __assign({}, modalProps), item.id));
+        }) }));
 }
 ModalPortal.defaultProps = {
     group: modal_2.MODAL_DEFAULT_GROUP,

package/ui/nav/Router/Router.js

@@ -94,8 +94,8 @@ function Router(props) {
     // Routes state
     var _c = (0, react_1.useState)((0, helpers_1.treeToList)(props.routes, true, null, props.alwaysAppendParentRoutePath)), routes = _c[0], setRoutes = _c[1];
     (0, react_use_1.useUpdateEffect)(function () {
-        setRoutes(props.routes);
-    }, [props.routes]);
+        setRoutes((0, helpers_1.treeToList)(props.routes, true, null, props.alwaysAppendParentRoutePath));
+    }, [props.alwaysAppendParentRoutePath, props.routes]);
     // Fix end slash on switch to base route
     (0, react_use_1.useUpdateEffect)(function () {
         if (window.history && pathname === '/' && window.location.pathname.match(/\/$/)) {

package/ui/nav/Router/helpers.d.ts

@@ -1,4 +1,4 @@
 import { IRouteItem } from './Router';
 export declare const findRedirectPathRecursive: (route: IRouteItem, parentPath?: string) => any;
 export declare const walkRoutesRecursive: (item: IRouteItem | Record<string, any>, defaultItem?: any, parentItem?: any, alwaysAppendParentRoutePath?: boolean) => any;
-export declare const treeToList: (item: IRouteItem | Record<string, any>, isRoot?: boolean, parentItem?: any, alwaysAppendParentRoutePath?: boolean) => Record<string, any>;
+export declare const treeToList: (item: IRouteItem | Record<string, any>, isRoot?: boolean, parentItem?: any, alwaysAppendParentRoutePath?: boolean) => any[];

package/utils/data.d.ts

@@ -3,7 +3,7 @@
  * @param {array|object} items
  * @returns {*}
  */
-export declare const normalizeItems: (items: any) => any;
+export declare const normalizeItems: (items: any) => any[];
 export declare const checkCondition: (item: any, condition: any) => any;
 export declare const filterItems: (items: Array<any>, condition: any) => any[];
 export declare const shouldUpdateSingle: (a: any, b: any) => boolean;

package/utils/data.js

@@ -51,7 +51,7 @@ var normalizeItems = function (items) {
         return items;
     }
     // Enum
-    if ((0, isObject_1["default"])(items) && (0, isFunction_1["default"])(items.getLabels)) {
+    if ((0, isObject_1["default"])(items) && 'getLabels' in items && (0, isFunction_1["default"])(items.getLabels)) {
         var labels_1 = items.getLabels();
         return Object.keys(labels_1).map(function (id) { return ({
             id: id,

package/ui/form/NumberField/hooks/useInputTypeNumber.d.ts

@@ -1,11 +0,0 @@
-import { ChangeEvent, MutableRefObject } from 'react';
-interface IInputTypeNumberProps {
-    max: any;
-    min: any;
-    value: string | undefined | null;
-    required?: boolean;
-}
-declare const useInputTypeNumber: (currentInputRef: MutableRefObject<HTMLInputElement>, inputTypeNumberProps: IInputTypeNumberProps, onChange: (event: ChangeEvent<HTMLInputElement>, value?: any) => void, decimal: number, isCanBeNegative?: boolean) => {
-    onInputChange: (event: ChangeEvent<HTMLInputElement>, newValue?: string) => void;
-};
-export default useInputTypeNumber;

package/ui/form/NumberField/hooks/useInputTypeNumber.js

@@ -1,66 +0,0 @@
-"use strict";
-exports.__esModule = true;
-var react_1 = require("react");
-var useInputTypeNumber = function (currentInputRef, inputTypeNumberProps, onChange, decimal, isCanBeNegative) {
-    (0, react_1.useEffect)(function () {
-        var _a;
-        var defaultValidity = __('The number is not valid.');
-        var errorMessage = inputTypeNumberProps.required
-            && (inputTypeNumberProps.value > inputTypeNumberProps.max
-                || inputTypeNumberProps.value < inputTypeNumberProps.min
-                || !inputTypeNumberProps.value)
-            ? defaultValidity
-            : '';
-        (_a = currentInputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(errorMessage);
-    }, [currentInputRef, inputTypeNumberProps.value, inputTypeNumberProps.max, inputTypeNumberProps.min, inputTypeNumberProps.required]);
-    var isValueNumeric = function (value) {
-        if (!value) {
-            return true;
-        }
-        var numericFloatRegExp = isCanBeNegative
-            /**
-             * Подходят отрицательные и положительные числа с плавающей точкой
-             * @example -1.0
-             * @example 1.1
-             */
-            ? new RegExp("^-?\\d*\\.?\\d{0,".concat(decimal, "}$"))
-            /**
-             * Подходят положительные числа с плавающей точкой
-             * @example 1.1
-             */
-            : new RegExp("^\\d*\\.?\\d{0,".concat(decimal, "}$"));
-        var numericRegExp = isCanBeNegative
-            /**
-             * Подходят отрицательные и положительные целые числа
-             * @example 1
-             * @example -2
-             */
-            ? /^-?\d*$/
-            /**
-             * Подходят положительные целые числа
-             * @example 1
-             */
-            : /^\d+$/;
-        return decimal ? numericFloatRegExp.test(value) : numericRegExp.test(value);
-    };
-    var onInputChange = function (event, newValue) {
-        var _a;
-        var value = newValue || ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
-        if (isValueNumeric(value)) {
-            if (value !== '') {
-                var numericValue = Number(value);
-                if (numericValue > inputTypeNumberProps.max) {
-                    value = inputTypeNumberProps.max;
-                }
-                else if (numericValue < inputTypeNumberProps.min) {
-                    value = inputTypeNumberProps.min;
-                }
-            }
-            onChange(event, value);
-        }
-    };
-    return {
-        onInputChange: onInputChange
-    };
-};
-exports["default"] = useInputTypeNumber;