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

package/en.json

@@ -782,5 +782,27 @@
     "  Элементы меню": " Menu Items",
     "При указании данного свойства, после нажатия на кнопку и до выполнения действия будет отображено нативное\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"
-}
+    " Используется для управления раскрытием всех элементов в дереве": " Used to control the expansion of all items in the tree",
+    "\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/useAbsolutePositioning.d.ts

@@ -1,14 +1,55 @@
 import * as React from 'react';
-interface IStyleObj {
+export interface IComponentStylePosition {
+    /**
+     * Позиция компонента слева
+     */
     left: 'unset' | number;
+    /**
+     * Позиция компонента справа
+     */
     right: 'unset' | number;
+    /**
+     * Позиция компонента сверху
+     */
     top: 'unset' | number;
 }
+export interface IComponentArrowPosition {
+    /**
+     * Позиция стрелки слева
+     */
+    left?: number | string;
+    /**
+     * Позиция стрелки справа
+     */
+    right?: number | string;
+    /**
+     * Позиция стрелки сверху
+     */
+    top?: number | string;
+    /**
+     * Позиция стрелки снизу
+     */
+    bottom?: number | string;
+}
+export declare const enum Position {
+    TOP = "top",
+    TOP_LEFT = "topLeft",
+    TOP_RIGHT = "topRight",
+    BOTTOM = "bottom",
+    BOTTOM_LEFT = "bottomLeft",
+    BOTTOM_RIGHT = "bottomRight",
+    LEFT = "left",
+    LEFT_TOP = "leftTop",
+    LEFT_BOTTOM = "leftBottom",
+    RIGHT = "right",
+    RIGHT_TOP = "rightTop",
+    RIGHT_BOTTOM = "rightBottom"
+}
 /**
  * Варианты абсолютного позиционирования
  * @example 'top'
  */
-type Position = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
+export type PositionType = keyof typeof Position | string;
 export interface IAbsolutePositioningInputProps {
     /**
      * Включает "умное" позиционирование - если компонент не может быть помещен в промежуток между целевым компонентом
@@ -32,13 +73,17 @@ export interface IAbsolutePositioningInputProps {
     /**
      * Позиционирование компонента, относительно целевого элемента
      */
-    position: Position;
+    position: PositionType;
     /**
      * Отобразить или скрыть компонент.
      * Включает "ручной режим", при котором можно задать логику отображения компонента извне,
      * через измененение данного свойства.
      */
     visible?: boolean;
+    /**
+     * Показывать ли компонент сразу после рендера страницы
+     */
+    defaultVisible?: boolean;
     /**
      * Обработчик изменения свойства isComponentVisible (отображение на странице).
      * Возвращает значение isComponentVisible.
@@ -62,15 +107,19 @@ export interface IAbsolutePositioningOutputProps {
     /**
      * Объект стилей для абсолютного позиционирования
      */
-    style: IStyleObj;
+    style: IComponentStylePosition;
+    /**
+     * Объект стилей для позиционирования стрелки
+     */
+    arrowPosition?: IComponentArrowPosition;
 }
 export default function useAbsolutePositioning(props: IAbsolutePositioningInputProps): {
     isComponentExist: boolean;
     isComponentVisible: boolean;
-    style: IStyleObj;
+    style: IComponentStylePosition;
     position: string;
-    calculateAbsolutePosition: (newPosition: Position, childRef: any, componentSize: any) => void;
+    arrowPosition: IComponentArrowPosition;
+    calculateAbsolutePosition: (newPosition: PositionType, parentRef: any, componentSize: any, arrowSize?: any) => void;
     onShow: () => void;
     onHide: () => void;
 };
-export {};

package/hooks/useAbsolutePositioning.js

@@ -1,146 +1,53 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 exports.__esModule = true;
+exports.Position = void 0;
 var react_1 = require("react");
+var calculateComponentAbsolutePosition_1 = __importDefault(require("../utils/calculateComponentAbsolutePosition"));
+var Position;
+(function (Position) {
+    Position["TOP"] = "top";
+    Position["TOP_LEFT"] = "topLeft";
+    Position["TOP_RIGHT"] = "topRight";
+    Position["BOTTOM"] = "bottom";
+    Position["BOTTOM_LEFT"] = "bottomLeft";
+    Position["BOTTOM_RIGHT"] = "bottomRight";
+    Position["LEFT"] = "left";
+    Position["LEFT_TOP"] = "leftTop";
+    Position["LEFT_BOTTOM"] = "leftBottom";
+    Position["RIGHT"] = "right";
+    Position["RIGHT_TOP"] = "rightTop";
+    Position["RIGHT_BOTTOM"] = "rightBottom";
+})(Position = exports.Position || (exports.Position = {}));
+var DEFAULT_AUTO_POSITIONING_VALUE = true;
 function useAbsolutePositioning(props) {
     var _a = (0, react_1.useState)(props.visible), isComponentExist = _a[0], setIsComponentExist = _a[1];
-    var _b = (0, react_1.useState)(props.visible), isComponentVisible = _b[0], setIsComponentVisible = _b[1];
+    var _b = (0, react_1.useState)(props.visible || props.defaultVisible), isComponentVisible = _b[0], setIsComponentVisible = _b[1];
     var _c = (0, react_1.useState)(props.position), position = _c[0], setPosition = _c[1];
     var _d = (0, react_1.useState)({
+        left: null,
+        right: null,
+        top: null,
+        bottom: null
+    }), arrowPosition = _d[0], setArrowPosition = _d[1];
+    var _e = (0, react_1.useState)({
         left: null,
         right: null,
         top: null
-    }), style = _d[0], setStyle = _d[1];
+    }), style = _e[0], setStyle = _e[1];
+    var hasAutoPositioning = (0, react_1.useMemo)(function () { var _a; return (_a = props.autoPositioning) !== null && _a !== void 0 ? _a : DEFAULT_AUTO_POSITIONING_VALUE; }, [props.autoPositioning]);
     var timerRef = (0, react_1.useRef)(null);
-    var calculateAbsolutePosition = (0, react_1.useCallback)(function (newPosition, childRef, componentSize) {
-        var newStyle = { left: null, right: null, top: null };
-        var _a = childRef.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 };
-        parentDimensions.top += window.scrollY;
-        var useAutoPositioning = props.autoPositioning;
-        // eslint-disable-next-line default-case
-        switch (newPosition) {
-            case 'top':
-            case 'topLeft':
-            case 'topRight':
-                // Проверка - выходит ли tooltip за верхний край страницы?
-                // Если да - меняем позицию на bottom
-                if (useAutoPositioning
-                    && ((parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + props.gap))) {
-                    newStyle.top = parentDimensions.top + parentDimensions.height;
-                    newPosition = newPosition.replace('top', 'bottom');
-                }
-                else {
-                    newStyle.top = parentDimensions.top - componentSize.height;
-                }
-                break;
-            case 'bottom':
-            case 'bottomLeft':
-            case 'bottomRight':
-                // Проверка - выходит ли tooltip за нижний край страницы?
-                // Если да - меняем позицию на top
-                if (useAutoPositioning
-                    && ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY))) <= Math.round(componentSize.height + props.gap)) {
-                    newStyle.top = parentDimensions.top - componentSize.height;
-                    newPosition = newPosition.replace('bottom', 'top');
-                }
-                else {
-                    newStyle.top = parentDimensions.top + parentDimensions.height;
-                }
-                break;
-            case 'left':
-            case 'leftTop':
-            case 'leftBottom':
-                // Проверка - выходит ли tooltip за левый край страницы?
-                // Если да - меняем позицию на right
-                if (useAutoPositioning && (parentDimensions.left <= Math.round(componentSize.width + props.gap))) {
-                    newStyle.left = parentDimensions.right;
-                    newPosition = newPosition.replace('left', 'right');
-                }
-                else {
-                    newStyle.left = parentDimensions.left - componentSize.width;
-                }
-                break;
-            case 'right':
-            case 'rightTop':
-            case 'rightBottom':
-                // Проверка - выходит ли tooltip за правый край страницы?
-                // Если да - меняем позицию на left
-                if (useAutoPositioning
-                    && (document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + props.gap))) {
-                    newStyle.left = parentDimensions.left - componentSize.width;
-                    newPosition = newPosition.replace('right', 'left');
-                }
-                else {
-                    newStyle.left = parentDimensions.right;
-                }
-                break;
-        }
-        // eslint-disable-next-line default-case
-        switch (newPosition) {
-            case 'top':
-            case 'bottom':
-                // Выравнивание по середине
-                newStyle.left = (parentDimensions.left + (parentDimensions.width / 2)) - (componentSize.width / 2);
-                break;
-            case 'topLeft':
-            case 'bottomLeft':
-                // Ширина tooltip больше родителя - стрелка на середину родителя
-                newStyle.left = parentDimensions.left;
-                break;
-            case 'topRight':
-            case 'bottomRight':
-                // Ширина tooltip больше родителя - стрелка на середину родителя
-                newStyle.right = document.body.clientWidth - parentDimensions.right;
-                break;
-            case 'left':
-            case 'right':
-                newStyle.top = (parentDimensions.top + (parentDimensions.height / 2)) - (componentSize.height / 2);
-                break;
-            case 'leftTop':
-            case 'rightTop':
-                newStyle.top = parentDimensions.top;
-                break;
-            case 'leftBottom':
-            case 'rightBottom':
-                newStyle.top = parentDimensions.top + parentDimensions.height - componentSize.height;
-                break;
-        }
-        // Проверка - при позиционировании top/bottom tooltip не выходит за пределы страницы по горизонтали
-        if (newPosition.includes('top') || newPosition.includes('bottom')) {
-            if (!newPosition.includes('Left')
-                && (newStyle.left < 0 || parentDimensions.left
-                    <= Math.round((componentSize.width - parentDimensions.width) + props.gap))) {
-                newStyle.right = null;
-                newPosition = newPosition.replace('Right', 'Left');
-                newStyle.left = parentDimensions.left;
-            }
-            if (!newPosition.includes('Right')
-                && (document.body.clientWidth - parentDimensions.right
-                    <= Math.round((componentSize.width - parentDimensions.width) + props.gap))) {
-                newPosition = newPosition.replace('Left', 'Right');
-                newStyle.left = null;
-                newStyle.right = document.body.clientWidth - parentDimensions.right;
-            }
-        }
-        // Проверка - при позиционировании left/right tooltip не выходит за пределы страницы по вертикали
-        if (newPosition.includes('left') || newPosition.includes('right')) {
-            if (!newPosition.includes('Top')
-                && parentDimensions.top - window.scrollY
-                    <= Math.round((componentSize.height - parentDimensions.height) + props.gap)) {
-                newPosition = newPosition.replace('Bottom', 'Top');
-                newStyle.top = parentDimensions.top;
-            }
-            if (!newPosition.includes('Bottom')
-                && (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)
-                    <= Math.round((componentSize.height - parentDimensions.height) + props.gap))) {
-                newPosition = newPosition.replace('Top', 'Bottom');
-                newStyle.top = parentDimensions.top + parentDimensions.height - componentSize.height;
-            }
-        }
+    var calculateAbsolutePosition = (0, react_1.useCallback)(function (newPosition, parentRef, componentSize, arrowSize) {
+        if (arrowSize === void 0) { arrowSize = null; }
+        var _a = (0, calculateComponentAbsolutePosition_1["default"])(props.gap, newPosition, parentRef, componentSize, arrowSize, hasAutoPositioning), newStyle = _a.style, calculatedPosition = _a.position, calculatedArrowPosition = _a.arrowPosition;
         setStyle(newStyle);
-        setPosition(newPosition);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.gap]);
+        setPosition(calculatedPosition);
+        if (calculatedArrowPosition) {
+            setArrowPosition(calculatedArrowPosition);
+        }
+    }, [hasAutoPositioning, props.gap]);
     var onShow = (0, react_1.useCallback)(function () {
         if (timerRef.current) {
             clearTimeout(timerRef.current);
@@ -180,6 +87,7 @@ function useAbsolutePositioning(props) {
         isComponentVisible: isComponentVisible,
         style: style,
         position: position,
+        arrowPosition: arrowPosition,
         calculateAbsolutePosition: calculateAbsolutePosition,
         onShow: onShow,
         onHide: onHide

package/hooks/useApplication.js

@@ -55,6 +55,7 @@ var merge_1 = __importDefault(require("lodash-es/merge"));
 var react_1 = require("react");
 var relativeTime_1 = __importDefault(require("dayjs/plugin/relativeTime"));
 var localizedFormat_1 = __importDefault(require("dayjs/plugin/localizedFormat"));
+var customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 var dayjs_1 = __importDefault(require("dayjs"));
 var utc_1 = __importDefault(require("dayjs/plugin/utc"));
 var ThemeProvider_1 = __importDefault(require("../providers/ThemeProvider"));
@@ -99,6 +100,7 @@ function useApplication(config) {
     var useGlobal = config.useGlobal !== false;
     //Extending dayjs / day.js with modules that used in steroids
     dayjs_1["default"].extend(relativeTime_1["default"]);
+    dayjs_1["default"].extend(customParseFormat_1["default"]);
     dayjs_1["default"].extend(localizedFormat_1["default"]);
     dayjs_1["default"].extend(utc_1["default"]);
     var components = (0, useComponents_1["default"])();

package/hooks/useDataSelect.js

@@ -102,6 +102,9 @@ function useDataSelect(config) {
                 if (selectedIds.length !== 1 || selectedIds[0] !== id_1) {
                     setSelectedIdsInternal([id_1]);
                 }
+                else if (selectedIds.length === 1 && selectedIds[0] === id_1) {
+                    setSelectedIdsInternal([]);
+                }
                 setIsOpened(false);
             }
         }

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.81",
+ "version": "3.0.0-beta.83",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {