@steroidsjs/core 3.0.0-beta.82 → 3.0.0-beta.83

package/en.json

@@ -783,26 +783,26 @@
     "При указании данного свойства, после нажатия на кнопку и до выполнения действия будет отображено нативное\nокно с текстом подтверждения - `window.confirm('Ваш текст')`.": "When this property is specified, after clicking the button and before performing the action, a native \nwindow with the confirmation text will be displayed - `window.confirm('Your text')`.",
     "Контент, который отобразиться, если элемент навигации будет активен": "The content that will be displayed if the navigation element is active",
     " Используется для управления раскрытием всех элементов в дереве": " Used to control the expansion of all items in the tree",
-    "\nСписок с чекбоксами. Используется в формах для выбора нескольких значений.\n": "",
-    "Разница времени с бекендом (в микросекундах)": "",
-    "Временная зона бекенда": "",
-    "Исходный язык": "",
-    "Переводы сообщений": "",
-    "Показывать ли компонент сразу после рендера страницы": "",
-    "Объект стилей для позиционирования стрелки": "",
-    "Позиция компонента слева": "",
-    "Позиция компонента справа": "",
-    "Позиция компонента сверху": "",
-    "Обработчик события загрузки файлов": "",
-    "Если в форме есть элементы \\<input\\>, то произойдет автоматическая фокусировка на первом из них": "",
-    "Варианты абсолютного позиционирования": "",
-    "Получение экземпляра `dayjs` с учетом временной зоны бекенда": "",
-    "Алиас для метода `translate`": "",
-    "Перевод сообщения": "",
-    "Компонент графика из библиотеки nivo": "",
-    "Конфигурация, настройки отображения графика": "",
-    "Данные для графика": "",
-    "Фиксированная высота графика в пикселях": "",
-    "Использовать ли дефолтную конфигурацию для графика типа line": "",
-    "Этот компонент позволяет создавать в проекте графики разных типов. Под капотом для графиков используется библиотека nivo.\nДля работы этого компонента необходимо установить в проекте зависимости @nivo/core и пакет конкретного графика nivo, например @nivo/line.\nКомпонент графика nivo нужно передать в пропс chartComponent": ""
-}
+    "\nСписок с чекбоксами. Используется в формах для выбора нескольких значений.\n": "\nCheckbox list. Used in forms to select multiple values.\n",
+    "Разница времени с бекендом (в микросекундах)": "Time difference with the backend (in microseconds)",
+    "Временная зона бекенда": "Backend time zone",
+    "Исходный язык": "Source language",
+    "Переводы сообщений": "Message translations",
+    "Показывать ли компонент сразу после рендера страницы": "Show the component immediately after page rendering",
+    "Объект стилей для позиционирования стрелки": "Style object for arrow positioning",
+    "Позиция компонента слева": "Component position on the left",
+    "Позиция компонента справа": "Component position on the right",
+    "Позиция компонента сверху": "Component position on top",
+    "Обработчик события загрузки файлов": "File upload event handler",
+    "Если в форме есть элементы \\<input\\>, то произойдет автоматическая фокусировка на первом из них": "If there are \\<input\\> elements in the form, automatic focus will be on the first one",
+    "Варианты абсолютного позиционирования": "Absolute positioning options",
+    "Получение экземпляра `dayjs` с учетом временной зоны бекенда": "Getting an instance of `dayjs` considering the backend time zone",
+    "Алиас для метода `translate`": "Alias for the `translate` method",
+    "Перевод сообщения": "Message translation",
+    "Компонент графика из библиотеки nivo": "Chart component from the nivo library",
+    "Конфигурация, настройки отображения графика": "Chart display configuration and settings",
+    "Данные для графика": "Data for the chart",
+    "Фиксированная высота графика в пикселях": "Fixed chart height in pixels",
+    "Использовать ли дефолтную конфигурацию для графика типа line": "Use default configuration for the line chart",
+    "Этот компонент позволяет создавать в проекте графики разных типов. Под капотом для графиков используется библиотека nivo.\nДля работы этого компонента необходимо установить в проекте зависимости @nivo/core и пакет конкретного графика nivo, например @nivo/line.\nКомпонент графика nivo нужно передать в пропс chartComponent": "This component allows you to create various types of graphics in your project. Under the hood, the nivo library is used for charts. \nTo use this component, you need to install dependencies @nivo/core and a specific nivo chart package, for example, @nivo/line. \nPass the nivo chart component as the chartComponent prop"
+}

package/hooks/index.d.ts

@@ -18,4 +18,5 @@ import useSelector from './useSelector';
 import useSsr from './useSsr';
 import useUniqueId from './useUniqueId';
 import useTheme from './useTheme';
-export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, useTheme, };
+import useSaveCursorPosition from './useSaveCursorPosition';
+export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, useTheme, useSaveCursorPosition, };

package/hooks/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.useTheme = exports.useUniqueId = exports.useSsr = exports.useSelector = exports.useScreen = exports.useModel = exports.useList = exports.useLayout = exports.useInitial = exports.useForm = exports.useFile = exports.useFetch = exports.useDispatch = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = exports.useApplication = exports.useAddressBar = exports.useAbsolutePositioning = void 0;
+exports.useSaveCursorPosition = exports.useTheme = exports.useUniqueId = exports.useSsr = exports.useSelector = exports.useScreen = exports.useModel = exports.useList = exports.useLayout = exports.useInitial = exports.useForm = exports.useFile = exports.useFetch = exports.useDispatch = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = exports.useApplication = exports.useAddressBar = exports.useAbsolutePositioning = void 0;
 var useAbsolutePositioning_1 = __importDefault(require("./useAbsolutePositioning"));
 exports.useAbsolutePositioning = useAbsolutePositioning_1["default"];
 var useAddressBar_1 = __importDefault(require("./useAddressBar"));
@@ -44,3 +44,5 @@ var useUniqueId_1 = __importDefault(require("./useUniqueId"));
 exports.useUniqueId = useUniqueId_1["default"];
 var useTheme_1 = __importDefault(require("./useTheme"));
 exports.useTheme = useTheme_1["default"];
+var useSaveCursorPosition_1 = __importDefault(require("./useSaveCursorPosition"));
+exports.useSaveCursorPosition = useSaveCursorPosition_1["default"];

package/hooks/useList.d.ts

@@ -1,3 +1,4 @@
+import { ITreeTableItem } from '../ui/list/TreeTable/TreeTable';
 import { IAddressBarConfig } from '../hooks/useAddressBar';
 import { IList } from '../actions/list';
 import { ILayoutNamesProps } from '../ui/list/LayoutNames/LayoutNames';
@@ -118,8 +119,8 @@ export interface IListConfig {
      */
     addressBar?: boolean | IAddressBarConfig;
     /**
-    * Параметр для загрузки данных списка с сервера
-    */
+     * Параметр для загрузки данных списка с сервера
+     */
     scope?: string[];
     /**
      * Дополнительные параметры, значения которых нужно передавать в запросе для получения данных
@@ -127,8 +128,8 @@ export interface IListConfig {
      */
     query?: Record<string, unknown>;
     /**
-    * Модель
-    */
+     * Модель
+     */
     model?: string;
     /**
      * Модель для синхронизации значений формы с адресной строкой
@@ -148,6 +149,10 @@ export interface IListConfig {
      * Количество элементов всего в списке (для отрисовки пагинации), заданное вручную
      */
     initialTotal?: number;
+    /**
+     * Включает обработку вложенных данных из items вида [{id: 1, name: 'John', items: [...]}]
+     */
+    hasTreeItems?: boolean;
 }
 export interface IListOutput {
     list: IList;
@@ -206,6 +211,7 @@ export declare const createInitialValues: ({ paginationProps, paginationSizeProp
     initialQuery: any;
     configQuery: any;
 }) => any;
+export declare const prepareItemsToTree: (sourceItems: ITreeTableItem[], openedTreeItems: Record<string, boolean>, currentPage: number | null, itemsOnPage: number | null, onTreeItemClick: (uniqueId: string, item: Record<string, any>) => void, parentId?: string, currentLevel?: number) => any[];
 /**
  * useList
  * Добавляет массу возможностей для взаимодействия с коллекциями. Коллекции можно получать как с бекенда,

package/hooks/useList.js

@@ -37,18 +37,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.createInitialValues = exports.getDefaultSearchModel = exports.normalizeSortProps = exports.defaultConfig = void 0;
+exports.prepareItemsToTree = exports.createInitialValues = exports.getDefaultSearchModel = exports.normalizeSortProps = exports.defaultConfig = void 0;
 var react_1 = require("react");
 var get_1 = __importDefault(require("lodash-es/get"));
 var union_1 = __importDefault(require("lodash-es/union"));
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var React = __importStar(require("react"));
 var react_use_1 = require("react-use");
+var list_1 = require("../utils/list");
 var useSelector_1 = __importDefault(require("../hooks/useSelector"));
-var list_1 = require("../reducers/list");
+var list_2 = require("../reducers/list");
 var useModel_1 = __importDefault(require("../hooks/useModel"));
 var useAddressBar_1 = __importDefault(require("../hooks/useAddressBar"));
-var list_2 = require("../actions/list");
+var list_3 = require("../actions/list");
 var useDispatch_1 = __importDefault(require("../hooks/useDispatch"));
 var form_1 = require("../actions/form");
 var form_2 = require("../reducers/form");
@@ -104,6 +105,27 @@ var createInitialValues = function (_a) {
     return (__assign(__assign((_b = {}, _b[paginationProps.attribute] = paginationProps.defaultValue, _b[paginationSizeProps.attribute] = paginationSizeProps.defaultValue, _b[sort.attribute] = sort.defaultValue, _b[layoutNamesProps.attribute] = layoutNamesProps.defaultValue, _b), initialQuery), configQuery));
 };
 exports.createInitialValues = createInitialValues;
+var TOP_TREE_LEVEL_VALUE = 0;
+var prepareItemsToTree = function (sourceItems, openedTreeItems, currentPage, itemsOnPage, onTreeItemClick, parentId, currentLevel) {
+    if (parentId === void 0) { parentId = ''; }
+    if (currentLevel === void 0) { currentLevel = TOP_TREE_LEVEL_VALUE; }
+    var treeItems = [];
+    if (currentPage && itemsOnPage && currentLevel === TOP_TREE_LEVEL_VALUE) {
+        var startIndex = (currentPage - 1) * itemsOnPage;
+        sourceItems = sourceItems.slice(startIndex, startIndex + itemsOnPage);
+    }
+    (sourceItems || []).forEach(function (item, index) {
+        var uniqueId = (0, list_1.getTreeItemUniqId)(item, index, parentId);
+        var isOpened = !!openedTreeItems[uniqueId];
+        var hasItems = !!(item.items && item.items.length > 0);
+        treeItems.push(__assign(__assign({}, item), { uniqueId: uniqueId, level: currentLevel, isOpened: isOpened, hasItems: hasItems, onTreeItemClick: onTreeItemClick }));
+        if (isOpened) {
+            treeItems = treeItems.concat((0, exports.prepareItemsToTree)(item.items, openedTreeItems, currentPage, itemsOnPage, onTreeItemClick, uniqueId, currentLevel + 1)).filter(Boolean);
+        }
+    });
+    return treeItems;
+};
+exports.prepareItemsToTree = prepareItemsToTree;
 /**
  * useList
  * Добавляет массу возможностей для взаимодействия с коллекциями. Коллекции можно получать как с бекенда,
@@ -113,7 +135,18 @@ exports.createInitialValues = createInitialValues;
 function useList(config) {
     var _a, _b;
     // Get list from redux state
-    var list = (0, useSelector_1["default"])(function (state) { return (0, list_1.getList)(state, config.listId); });
+    var list = (0, useSelector_1["default"])(function (state) { return (0, list_2.getList)(state, config.listId); });
+    var _c = (0, react_1.useState)({}), openedTreeItems = _c[0], setOpenedTreeItems = _c[1];
+    var onTreeItemClick = (0, react_1.useCallback)(function (uniqueId, item) {
+        var _a;
+        if (((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            setOpenedTreeItems(function (prevItems) {
+                var _a;
+                return (__assign(__assign({}, prevItems), (_a = {}, _a[uniqueId] = !prevItems[uniqueId], _a)));
+            });
+        }
+    }, []);
+    var getTreeItems = (0, react_1.useCallback)(function (sourceItems) { return (0, exports.prepareItemsToTree)(sourceItems, openedTreeItems, list === null || list === void 0 ? void 0 : list.page, list === null || list === void 0 ? void 0 : list.pageSize, onTreeItemClick); }, [onTreeItemClick, openedTreeItems, list]);
     // Normalize sort config
     var sort = (0, exports.normalizeSortProps)(config.sort);
     // Empty
@@ -152,7 +185,7 @@ function useList(config) {
     var model = (0, useModel_1["default"])(config.model);
     var searchModel = (0, useModel_1["default"])(config.searchModel || ((_a = config.searchForm) === null || _a === void 0 ? void 0 : _a.model), defaultSearchModel);
     // Address bar synchronization
-    var _c = (0, useAddressBar_1["default"])(__assign({ enable: !!config.addressBar, model: searchModel }, (typeof config.addressBar === 'boolean' ? { enable: config.addressBar } : config.addressBar))), initialQuery = _c.initialQuery, updateQuery = _c.updateQuery;
+    var _d = (0, useAddressBar_1["default"])(__assign({ enable: !!config.addressBar, model: searchModel }, (typeof config.addressBar === 'boolean' ? { enable: config.addressBar } : config.addressBar))), initialQuery = _d.initialQuery, updateQuery = _d.updateQuery;
     // Outside search form
     var searchFormFields = (_b = config.searchForm) === null || _b === void 0 ? void 0 : _b.fields;
     var SearchForm = require('../ui/list/SearchForm')["default"];
@@ -183,8 +216,9 @@ function useList(config) {
     // Init list in redux store
     (0, react_use_1.useMount)(function () {
         if (!list) {
+            var items = config.hasTreeItems ? getTreeItems(config.items) : config.items;
             var toDispatch = [
-                (0, list_2.listInit)(config.listId, {
+                (0, list_3.listInit)(config.listId, {
                     listId: config.listId,
                     action: config.action || config.action === '' ? config.action : null,
                     actionMethod: config.actionMethod || exports.defaultConfig.actionMethod,
@@ -193,7 +227,7 @@ function useList(config) {
                     condition: config.condition,
                     scope: config.scope,
                     items: null,
-                    sourceItems: config.items || null,
+                    sourceItems: items || null,
                     total: config.initialTotal,
                     isRemote: !config.items,
                     primaryKey: config.primaryKey || exports.defaultConfig.primaryKey,
@@ -205,11 +239,15 @@ function useList(config) {
                     layoutAttribute: layoutNamesProps.attribute || null
                 }),
             ];
-            if (config.initialItems || config.items) {
-                toDispatch.push((0, list_2.listSetItems)(config.listId, config.initialItems || config.items));
+            if (config.initialItems) {
+                var initialItems = config.hasTreeItems ? getTreeItems(config.initialItems) : config.initialItems;
+                toDispatch.push((0, list_3.listSetItems)(config.listId, initialItems));
+            }
+            else if (config.items) {
+                toDispatch.push((0, list_3.listSetItems)(config.listId, items));
             }
             if (!config.initialItems) {
-                toDispatch.push((0, list_2.listLazyFetch)(config.listId));
+                toDispatch.push((0, list_3.listLazyFetch)(config.listId));
             }
             dispatch(toDispatch);
         }
@@ -232,7 +270,7 @@ function useList(config) {
             updateQuery(formValues);
             // Send request
             if (config.autoFetchOnFormChanges !== false) {
-                dispatch((0, list_2.listLazyFetch)(config.listId));
+                dispatch((0, list_3.listLazyFetch)(config.listId));
             }
         }
     }, [config.autoFetchOnFormChanges, config.listId, dispatch, formId, formValues,
@@ -250,22 +288,29 @@ function useList(config) {
     // Check change items
     (0, react_use_1.useUpdateEffect)(function () {
         dispatch([
-            (0, list_2.listSetItems)(config.listId, config.items),
+            (0, list_3.listSetItems)(config.listId, config.items),
         ]);
     }, [dispatch, config.items, config.listId]);
+    (0, react_use_1.useUpdateEffect)(function () {
+        if (config.hasTreeItems) {
+            dispatch([
+                (0, list_3.listSetItems)(config.listId, getTreeItems(config.items)),
+            ]);
+        }
+    }, [dispatch, config.items, config.listId, openedTreeItems, list === null || list === void 0 ? void 0 : list.pageSize, list === null || list === void 0 ? void 0 : list.page]);
     // Destroy
     (0, react_use_1.useUnmount)(function () {
         var autoDestroy = typeof config.autoDestroy === 'boolean' ? config.autoDestroy : exports.defaultConfig.autoDestroy;
         if (autoDestroy) {
             dispatch([
-                (0, list_2.listDestroy)(config.listId),
+                (0, list_3.listDestroy)(config.listId),
                 (0, form_1.formDestroy)(config.listId),
             ]);
         }
     });
     var onFetch = (0, react_1.useCallback)(function (params) {
         if (params === void 0) { params = {}; }
-        dispatch((0, list_2.listFetch)(config.listId, params));
+        dispatch((0, list_3.listFetch)(config.listId, params));
     }, [config.listId, dispatch]);
     var onSort = (0, react_1.useCallback)(function (value) {
         dispatch((0, form_1.formChange)(formId, sort.attribute, value));

package/hooks/useSaveCursorPosition.d.ts

@@ -0,0 +1,6 @@
+import React, { ChangeEvent } from 'react';
+import { IInputParams } from 'src/ui/form/Field/fieldWrapper';
+export default function useSaveCursorPosition(inputParams: IInputParams): {
+    inputRef: React.MutableRefObject<any>;
+    onChange: (event: ChangeEvent<HTMLInputElement>, value?: any) => void;
+};

package/hooks/useSaveCursorPosition.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable no-return-assign */
+/* eslint-disable no-unused-expressions */
+var react_1 = __importDefault(require("react"));
+function useSaveCursorPosition(inputParams) {
+    var _a = react_1["default"].useState(null), cursor = _a[0], setCursor = _a[1];
+    var inputRef = react_1["default"].useRef(null);
+    react_1["default"].useEffect(function () {
+        var inputElement = inputRef.current;
+        if (inputElement) {
+            inputElement.setSelectionRange(cursor, cursor);
+        }
+    }, [cursor, inputParams.value]);
+    var onChange = react_1["default"].useCallback(function (event, value) {
+        var _a, _b;
+        if (value === void 0) { value = null; }
+        setCursor((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.selectionStart);
+        inputParams.onChange(value || ((_b = event.target) === null || _b === void 0 ? void 0 : _b.value));
+    }, [inputParams]);
+    return {
+        inputRef: inputRef,
+        onChange: onChange
+    };
+}
+exports["default"] = useSaveCursorPosition;

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.82",
+ "version": "3.0.0-beta.83",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {

package/ui/form/Field/fieldWrapper.d.ts

@@ -72,6 +72,11 @@ export interface IFieldWrapperInputProps {
     isRenderWithoutFieldLayout?: boolean;
     [key: string]: any;
 }
+export interface IInputParams {
+    name?: string;
+    value?: any;
+    onChange: (value: any) => void;
+}
 export interface IFieldWrapperOutputProps {
     /**
     * Id формы
@@ -88,11 +93,7 @@ export interface IFieldWrapperOutputProps {
     /**
     * Параметры для input элемента
     */
-    input?: {
-        name?: string;
-        value?: any;
-        onChange: (value: any) => void;
-    };
+    input?: IInputParams;
 }
 interface IFieldWrapperOptions {
     label?: boolean;

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

@@ -85,7 +85,7 @@ export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOut
     inputProps: {
         type: string;
         name: string;
-        onChange: (value: any) => void;
+        onInput: (event: any, value?: string) => void;
         value: string | number;
         placeholder: string;
         disabled: boolean;
@@ -94,7 +94,6 @@ export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOut
     onFocus?: (e: Event | React.FocusEvent) => void;
     onBlur?: (e: Event | React.FocusEvent) => void;
     onMouseDown?: (e: Event | React.MouseEvent) => void;
-    maskedInputRef?: React.RefCallback<HTMLElement>;
     defaultValue?: string;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IInputFieldProps>;

package/ui/form/InputField/InputField.js

@@ -87,17 +87,22 @@ function InputField(props) {
     var maskedInputRef = (0, react_2.useMaskito)({
         options: props.maskOptions
     });
+    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), inputRef = _a.inputRef, onChange = _a.onChange;
+    React.useEffect(function () {
+        if (inputRef.current) {
+            maskedInputRef(inputRef.current);
+        }
+    }, [inputRef, maskedInputRef]);
     var onClear = React.useCallback(function () { return props.input.onChange(''); }, [props.input]);
-    props.onClear = onClear;
     var inputProps = (0, react_1.useMemo)(function () {
         var _a;
-        return (__assign({ type: props.type, name: props.input.name, defaultValue: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: function (value) { return props.input.onChange(value); }, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
-    }, [props.disabled, props.input, props.inputProps, props.placeholder, props.type]);
+        return (__assign({ type: props.type, name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onInput: onChange, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
+    }, [onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder, props.type]);
     // No render for hidden input
     if (props.type === 'hidden') {
         return null;
     }
-    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, maskedInputRef: maskedInputRef }));
+    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, inputRef: inputRef, onClear: onClear }));
 }
 InputField.defaultProps = {
     type: 'text',

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

@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import React, { ChangeEvent } from 'react';
 import { IBaseFieldProps } from '../InputField/InputField';
 import { IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
@@ -21,7 +21,7 @@ export interface INumberFieldProps extends IBaseFieldProps {
      * Шаг увеличения/уменьшения значения
      * @example 5
      */
-    step?: string | number;
+    step?: number;
 }
 export interface INumberFieldViewProps extends INumberFieldProps, IFieldWrapperOutputProps {
     inputProps: {
@@ -35,6 +35,10 @@ export interface INumberFieldViewProps extends INumberFieldProps, IFieldWrapperO
         max: number;
         step: string | number;
     };
+    inputRef: React.MutableRefObject<any>;
+    onStepUp: VoidFunction;
+    onStepDown: VoidFunction;
+    onKeyDown: VoidFunction;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<INumberFieldProps>;
 export default _default;

package/ui/form/NumberField/NumberField.js

@@ -14,16 +14,44 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable max-len */
 var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
+var useInputTypeNumber_1 = __importDefault(require("./hooks/useInputTypeNumber"));
+var DEFAULT_STEP = 1;
 function NumberField(props) {
     var components = (0, hooks_1.useComponents)();
-    props.inputProps = (0, react_1.useMemo)(function () {
+    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), currentInputRef = _a.inputRef, onChange = _a.onChange;
+    var onInputChange = (0, useInputTypeNumber_1["default"])(currentInputRef, {
+        max: props.max,
+        min: props.min,
+        value: props.input.value
+    }, onChange).onInputChange;
+    var onStep = (0, react_1.useCallback)(function (isIncrement) {
         var _a;
-        return (__assign({ name: props.input.name, defaultValue: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: function (value) { return props.input.onChange(value); }, type: 'number', min: props.min, max: props.max, step: props.step, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
-    }, [props.disabled, props.input, props.inputProps, props.placeholder, props.min, props.max, props.step]);
-    return components.ui.renderView(props.view || 'form.NumberFieldView', props);
+        var step = props.step || DEFAULT_STEP;
+        onChange(null, String(Number((_a = currentInputRef === null || currentInputRef === void 0 ? void 0 : currentInputRef.current) === null || _a === void 0 ? void 0 : _a.value) + (isIncrement ? step : -step)));
+    }, [currentInputRef, onChange, props.step]);
+    var onStepUp = (0, react_1.useCallback)(function () {
+        onStep(true);
+    }, [onStep]);
+    var onStepDown = (0, react_1.useCallback)(function () {
+        onStep(false);
+    }, [onStep]);
+    var onKeyDown = (0, react_1.useCallback)(function (event) {
+        if (event.key === 'ArrowUp') {
+            onStepUp();
+        }
+        else if (event.key === 'ArrowDown') {
+            onStepDown();
+        }
+    }, [onStepDown, onStepUp]);
+    var inputProps = (0, react_1.useMemo)(function () {
+        var _a;
+        return (__assign({ name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onInputChange, type: 'text', min: props.min, max: props.max, step: props.step, placeholder: props.placeholder, disabled: props.disabled, autoComplete: 'off', onKeyDown: onKeyDown }, props.inputProps));
+    }, [props.input.name, props.input.value, props.min, props.max, props.step, props.placeholder, props.disabled, props.inputProps, onInputChange, onKeyDown]);
+    return components.ui.renderView(props.view || 'form.NumberFieldView', __assign(__assign({}, props), { inputProps: inputProps, onStepUp: onStepUp, onStepDown: onStepDown, inputRef: currentInputRef }));
 }
 NumberField.defaultProps = {
     disabled: false,

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface IInputTypeNumberProps {
+    max: any;
+    min: any;
+    value: any;
+}
+declare const useInputTypeNumber: (currentInputRef: React.MutableRefObject<HTMLInputElement>, inputTypeNumberProps: IInputTypeNumberProps, onChange: (event: React.ChangeEvent<HTMLInputElement>, value?: any) => void) => {
+    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export default useInputTypeNumber;

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

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useInputTypeNumber = function (currentInputRef, inputTypeNumberProps, onChange) {
+    var setValidity = react_1["default"].useCallback(function (message) {
+        var _a;
+        (_a = currentInputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(message);
+    }, [currentInputRef]);
+    var checkIsValueFalsy = function (value) { return value === '' || value === null || value === undefined; };
+    react_1["default"].useEffect(function () {
+        var defaultValidity = 'The number is not included in the range';
+        // eslint-disable-next-line no-unused-expressions
+        inputTypeNumberProps.value > inputTypeNumberProps.max
+            || inputTypeNumberProps.value < inputTypeNumberProps.min
+            || checkIsValueFalsy(inputTypeNumberProps.value)
+            ? setValidity(__(defaultValidity) + " ".concat(inputTypeNumberProps.min, " \u2014 ").concat(inputTypeNumberProps.max))
+            : setValidity('');
+    }, [currentInputRef, inputTypeNumberProps.value, inputTypeNumberProps.max, inputTypeNumberProps.min, setValidity]);
+    var isValueNumeric = function (value) {
+        if (checkIsValueFalsy(value)) {
+            return true;
+        }
+        /**
+        * Подходят как отрицательные так и положительные числа
+        * @example -1
+        * @example 1
+        */
+        var numericRegex = /^-?\d*\.?\d+$/;
+        return numericRegex.test(value);
+    };
+    var onInputChange = function (event) {
+        var _a;
+        var value = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
+        if (isValueNumeric(value)) {
+            onChange(event);
+        }
+    };
+    return {
+        onInputChange: onInputChange
+    };
+};
+exports["default"] = useInputTypeNumber;

package/ui/form/PasswordField/PasswordField.js

@@ -55,14 +55,15 @@ exports.checkPassword = checkPassword;
 function PasswordField(props) {
     var _a = (0, react_1.useState)(InputType.PASSWORD), type = _a[0], setType = _a[1];
     var components = (0, hooks_1.useComponents)();
+    var _b = (0, hooks_1.useSaveCursorPosition)(props.input), inputRef = _b.inputRef, onChange = _b.onChange;
     var onClear = (0, react_1.useCallback)(function () { return props.input.onChange(''); }, [props.input]);
     var onShowButtonClick = (0, react_1.useCallback)(function () {
         type === InputType.PASSWORD ? setType(InputType.TEXT) : setType(InputType.PASSWORD);
     }, [type]);
     var inputProps = (0, react_1.useMemo)(function () {
         var _a;
-        return (__assign({ name: props.input.name, defaultValue: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: function (value) { return props.input.onChange(value); }, type: type, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
-    }, [props.disabled, props.input, props.inputProps, props.placeholder, type]);
+        return (__assign({ name: props.input.name, defaultValue: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onChange, type: type, placeholder: props.placeholder, disabled: props.disabled, ref: inputRef }, props.inputProps));
+    }, [inputRef, onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder, type]);
     return components.ui.renderView(props.view || 'form.PasswordFieldView' || 'form.InputFieldView', __assign(__assign({}, props), { inputProps: inputProps, securityLevel: props.showSecurityBar ? (0, exports.checkPassword)(props.input.value) : null, onClear: onClear, onShowButtonClick: onShowButtonClick }));
 }
 PasswordField.defaultProps = {

package/ui/form/TextField/TextField.js

@@ -20,6 +20,7 @@ var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 function TextField(props) {
     // const dispatch = useDispatch();
     var components = (0, hooks_1.useComponents)();
+    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), inputRef = _a.inputRef, onChange = _a.onChange;
     var onKeyUp = (0, react_1.useCallback)(function (e) {
         if (props.submitOnEnter
             && props.formId
@@ -30,12 +31,12 @@ function TextField(props) {
             // dispatch(submit(props.formId));
         }
     }, [props.formId, props.submitOnEnter]);
-    var onChange = (0, react_1.useCallback)(function (e) { return props.input.onChange.call(null, e.target ? e.target.value : e.nativeEvent.text); }, [props.input.onChange]);
+    var handleChange = (0, react_1.useCallback)(function (event) { return onChange(event, event.target ? event.target.value : event.nativeEvent.text); }, [onChange]);
     var onClear = (0, react_1.useCallback)(function () { return props.input.onChange(''); }, [props.input]);
     var inputProps = (0, react_1.useMemo)(function () {
         var _a;
-        return (__assign({ name: props.input.name, defaultValue: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onChange, onKeyUp: onKeyUp, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
-    }, [onKeyUp, onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder]);
+        return (__assign({ name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: handleChange, onKeyUp: onKeyUp, placeholder: props.placeholder, disabled: props.disabled, ref: inputRef }, props.inputProps));
+    }, [props.input.name, props.input.value, props.placeholder, props.disabled, props.inputProps, handleChange, onKeyUp, inputRef]);
     return components.ui.renderView(props.view || 'form.TextFieldView', __assign(__assign({}, props), { inputProps: inputProps, onClear: onClear }));
 }
 TextField.defaultProps = {

package/ui/layout/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Position } from '../../../hooks/useAbsolutePositioning';
+import { PositionType } from '../../../hooks/useAbsolutePositioning';
 export interface ITooltipArrowPosition {
     /**
     * Позиция стрелки слева
@@ -50,7 +50,7 @@ export interface ITooltipProps {
     /**
      * Позиционирование подсказки, относительно целевого элемента
      */
-    position?: Position;
+    position?: PositionType;
     /**
      * Показывать ли подсказку сразу после рендера страницы
      * @example true
@@ -84,7 +84,7 @@ export interface ITooltipProps {
 export interface ITooltipViewProps extends ITooltipProps {
     isTooltipVisible: boolean;
     content: string | any;
-    position: Position;
+    position: PositionType;
     style: ITooltipStylePosition;
 }
 declare function Tooltip(props: ITooltipProps): JSX.Element;

package/ui/list/Grid/Grid.js

@@ -69,7 +69,8 @@ function Grid(props) {
         items: props.items,
         initialItems: props.initialItems,
         initialTotal: props.initialTotal,
-        autoFetchOnFormChanges: props.autoFetchOnFormChanges
+        autoFetchOnFormChanges: props.autoFetchOnFormChanges,
+        hasTreeItems: props.hasTreeItems
     }), list = _a.list, model = _a.model, searchModel = _a.searchModel, paginationPosition = _a.paginationPosition, paginationSizePosition = _a.paginationSizePosition, layoutNamesPosition = _a.layoutNamesPosition, renderList = _a.renderList, renderEmpty = _a.renderEmpty, renderPagination = _a.renderPagination, renderPaginationSize = _a.renderPaginationSize, renderLayoutNames = _a.renderLayoutNames, renderSearchForm = _a.renderSearchForm, onFetch = _a.onFetch, onSort = _a.onSort;
     var renderLabel = (0, react_1.useCallback)(function (column) {
         if (column.headerView) {

package/ui/list/TreeTable/TreeTable.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { IColumnViewProps, IGridColumn, IGridProps } from '../Grid/Grid';
+export interface ITreeColumnViewProps extends IColumnViewProps {
+    item: {
+        onTreeItemClick?: (uniqueId: string, item: {
+            [key: string]: any;
+        }) => void;
+        [key: string]: any;
+    };
+}
+export interface ITreeTableItem {
+    /**
+     * Идентификатор узла
+     */
+    id?: string | number;
+    /**
+     * Вложенные элементы
+     * @example items: [{id: 3, name: 'Ivan'}]
+     */
+    items?: any[];
+    /**
+     * Уникальный идентификатор,
+     * используется для сохранения состояния открыта или закрыта ячейка
+     */
+    uniqueId?: string;
+}
+export interface ITreeTableProps extends Omit<IGridProps, 'items'> {
+    /**
+     * Элементы коллекции
+     * @example [{id: 1, name: 'Jane'}, {id: 2, name: 'John', items: [...]}]
+     */
+    items?: ITreeTableItem[];
+}
+export declare const addTreeColumnFieldsToFirstColumn: (columns: IGridColumn[]) => IGridColumn[];
+export default function TreeTable(props: ITreeTableProps): JSX.Element;

package/ui/list/TreeTable/TreeTable.js

@@ -0,0 +1,69 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.addTreeColumnFieldsToFirstColumn = void 0;
+var React = __importStar(require("react"));
+var react_1 = require("react");
+var merge_1 = __importDefault(require("lodash-es/merge"));
+var Grid_1 = __importDefault(require("../Grid"));
+var TREE_COLUMN_VIEW_FIELDS = {
+    valueView: 'TreeColumnView',
+    headerClassName: 'TreeColumnHeader'
+};
+var addTreeColumnFieldsToFirstColumn = function (columns) {
+    var newColumns = __spreadArray([], columns, true);
+    // Add tree view to the first column
+    (0, merge_1["default"])(newColumns[0], TREE_COLUMN_VIEW_FIELDS);
+    return newColumns;
+};
+exports.addTreeColumnFieldsToFirstColumn = addTreeColumnFieldsToFirstColumn;
+function TreeTable(props) {
+    var columns = (0, react_1.useMemo)(function () { return (0, exports.addTreeColumnFieldsToFirstColumn)(props.columns); }, [props.columns]);
+    return (React.createElement(Grid_1["default"], __assign({}, props, { columns: columns, items: props.items, itemsIndexing: false, hasTreeItems: true })));
+}
+exports["default"] = TreeTable;

package/ui/list/TreeTable/index.d.ts

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

package/ui/list/TreeTable/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var TreeTable_1 = __importDefault(require("./TreeTable"));
+exports["default"] = TreeTable_1["default"];

package/ui/nav/Tree/Tree.js

@@ -43,9 +43,9 @@ var omit_1 = __importDefault(require("lodash-es/omit"));
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var keys_1 = __importDefault(require("lodash-es/keys"));
 var react_1 = require("react");
+var list_1 = require("../../../utils/list");
 var hooks_1 = require("../../../hooks");
 var router_1 = require("../../../reducers/router");
-var resolveId = function (item, index, parentId) { return (parentId ? parentId + '.' : '') + String(item.id || index); };
 function Tree(props) {
     var components = (0, hooks_1.useComponents)();
     var STORAGE_KEY_PREFIX = 'tree_';
@@ -90,7 +90,7 @@ function Tree(props) {
             return null;
         }
         (sourceItems || []).forEach(function (item, index) {
-            var uniqId = resolveId(item, index, parentId);
+            var uniqId = (0, list_1.getTreeItemUniqId)(item, index, parentId);
             if (!foundItem && (item.id === itemId || uniqId === itemId)) {
                 foundItem = __assign(__assign({}, item), { uniqId: uniqId, level: level });
             }
@@ -105,7 +105,7 @@ function Tree(props) {
         if (level === void 0) { level = 1; }
         var opened = {};
         (sourceItems || []).forEach(function (item, index) {
-            var uniqId = resolveId(item, index, parentId);
+            var uniqId = (0, list_1.getTreeItemUniqId)(item, index, parentId);
             if (props.autoOpenLevels >= level) {
                 opened[uniqId] = true;
             }
@@ -159,7 +159,7 @@ function Tree(props) {
                 return [];
             }
             (sourceItems || []).forEach(function (item, index) {
-                var uniqId = resolveId(item, index, parentId);
+                var uniqId = (0, list_1.getTreeItemUniqId)(item, index, parentId);
                 var isOpened = props.alwaysOpened || !!openedItems[uniqId];
                 var hasItems = item[props.itemsKey] && item[props.itemsKey].length > 0;
                 if (props.level && (level === props.level - 1)) {

package/utils/list.d.ts

@@ -0,0 +1 @@
+export declare const getTreeItemUniqId: (item: any, index: any, parentId: any) => string;

package/utils/list.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+exports.getTreeItemUniqId = void 0;
+var getTreeItemUniqId = function (item, index, parentId) { return (parentId || '0') + '.' + String(item.id || index); };
+exports.getTreeItemUniqId = getTreeItemUniqId;