@steroidsjs/core 3.0.13 → 3.0.15

package/docs-autogen-result.json

@@ -4576,7 +4576,7 @@
                 {
                     "name": "alwaysOpened",
                     "decorators": [],
-                    "description": " Используется для управления раскрытием всех элементов в дереве",
+                    "description": "Используется для управления раскрытием всех элементов в дереве",
                     "required": false,
                     "type": "boolean",
                     "example": null
@@ -4597,10 +4597,18 @@
                     "type": "string",
                     "example": "'exampleTree'"
                 },
+                {
+                    "name": "collapseChildItems",
+                    "decorators": [],
+                    "description": "Скрывать открытые вложенные узлы, если скрыли родительский узел",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
                 {
                     "name": "currentPage",
                     "decorators": [],
-                    "description": " Текущая страница, используется для корректного отображения пагинации",
+                    "description": "Текущая страница, используется для корректного отображения пагинации",
                     "required": false,
                     "type": "number",
                     "example": null
@@ -4624,7 +4632,7 @@
                 {
                     "name": "itemsOnPage",
                     "decorators": [],
-                    "description": " Количество элементов на странице, используется для корректного отображения пагинации",
+                    "description": "Количество элементов на странице, используется для корректного отображения пагинации",
                     "required": false,
                     "type": "number",
                     "example": null
@@ -4640,7 +4648,7 @@
                 {
                     "name": "routerParams",
                     "decorators": [],
-                    "description": " Параметры роутинга",
+                    "description": "Параметры роутинга",
                     "required": false,
                     "type": "any",
                     "example": null
@@ -4990,7 +4998,26 @@
                     "example": null
                 }
             ],
-            "methods": []
+            "methods": [
+                {
+                    "name": "onItemFocus",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "void",
+                    "example": null,
+                    "parameters": [
+                        {
+                            "name": "e",
+                            "decorators": [],
+                            "description": "",
+                            "required": true,
+                            "type": "any",
+                            "example": null
+                        }
+                    ]
+                }
+            ]
         },
         "IUiComponent": {
             "name": "IUiComponent",
@@ -15395,13 +15422,13 @@
                 "'items'>",
                 "IUiComponent",
                 "Pick<ITreeProps",
-                "'levelPadding' | 'alwaysOpened' | 'hasIconExpandOnly' | 'customIcon' | 'saveInClientStorage'>"
+                "'levelPadding' | 'alwaysOpened' | 'hasIconExpandOnly' | 'customIcon' | 'saveInClientStorage' | 'collapseChildItems'>"
             ],
             "properties": [
                 {
                     "name": "alwaysOpened",
                     "decorators": [],
-                    "description": " Используется для управления раскрытием всех элементов в дереве",
+                    "description": "Используется для управления раскрытием всех элементов в дереве",
                     "required": false,
                     "type": "boolean",
                     "example": null,
@@ -15443,6 +15470,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "collapseChildItems",
+                    "decorators": [],
+                    "description": "Скрывать открытые вложенные узлы, если скрыли родительский узел",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true",
+                    "defaultValue": null
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -36915,6 +36951,7 @@
             "tags": {},
             "defaultProps": {
                 "alwaysOpened": "false",
+                "collapseChildItems": "false",
                 "levelPadding": "32",
                 "saveInClientStorage": "false"
             },
@@ -36922,18 +36959,27 @@
                 "Omit<IGridProps",
                 "'items'>",
                 "Pick<ITreeProps",
-                "'alwaysOpened' | 'levelPadding' | 'customIcon' | 'saveInClientStorage'>"
+                "'alwaysOpened' | 'levelPadding' | 'customIcon' | 'saveInClientStorage' | 'collapseChildItems'>"
             ],
             "properties": [
                 {
                     "name": "alwaysOpened",
                     "decorators": [],
-                    "description": " Используется для управления раскрытием всех элементов в дереве",
+                    "description": "Используется для управления раскрытием всех элементов в дереве",
                     "required": false,
                     "type": "boolean",
                     "example": null,
                     "defaultValue": "false"
                 },
+                {
+                    "name": "collapseChildItems",
+                    "decorators": [],
+                    "description": "Скрывать открытые вложенные узлы, если скрыли родительский узел",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true",
+                    "defaultValue": "false"
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -38989,7 +39035,7 @@
                 {
                     "name": "alwaysOpened",
                     "decorators": [],
-                    "description": " Используется для управления раскрытием всех элементов в дереве",
+                    "description": "Используется для управления раскрытием всех элементов в дереве",
                     "required": false,
                     "type": "boolean",
                     "example": null
@@ -39034,6 +39080,14 @@
                     "type": "string",
                     "example": "'exampleTree'"
                 },
+                {
+                    "name": "collapseChildItems",
+                    "decorators": [],
+                    "description": "Скрывать открытые вложенные узлы, если скрыли родительский узел",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -39109,7 +39163,7 @@
                 {
                     "name": "routerParams",
                     "decorators": [],
-                    "description": " Параметры роутинга",
+                    "description": "Параметры роутинга",
                     "required": false,
                     "type": "any",
                     "example": null
@@ -39206,11 +39260,12 @@
             "name": "ITreeProps",
             "moduleName": "ui/nav/Tree/Tree",
             "title": "Tree",
-            "description": "Компонент, который представляет в виде дерева список с иерархической структурой данных",
+            "description": "Компонент, который представляет в виде дерева список с иерархической структурой данных\n\nДополнительный функционал: в кастомном view компонента есть возможность реализовать кнопку, по клику на которую\nбудет вызываться функция props.onItemFocus. Данная функция \"находит\" текущий роут в дереве -\nраскрывает родительские уровни, делает элемент активным.\nДанная функция не включает скролл к активному компоненту внутри дерева, это также необходимо\nреализовать в кастомном view локально в проекте.\n",
             "tags": {},
             "defaultProps": {
                 "autoOpenLevels": "1",
                 "autoSave": "false",
+                "collapseChildItems": "false",
                 "hasIconExpandOnly": "false",
                 "hideIcon": "false",
                 "itemsKey": "'items'",
@@ -39227,7 +39282,7 @@
                 {
                     "name": "alwaysOpened",
                     "decorators": [],
-                    "description": " Используется для управления раскрытием всех элементов в дереве",
+                    "description": "Используется для управления раскрытием всех элементов в дереве",
                     "required": false,
                     "type": "boolean",
                     "example": null,
@@ -39269,6 +39324,15 @@
                     "example": "'exampleTree'",
                     "defaultValue": null
                 },
+                {
+                    "name": "collapseChildItems",
+                    "decorators": [],
+                    "description": "Скрывать открытые вложенные узлы, если скрыли родительский узел",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true",
+                    "defaultValue": "false"
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -39344,7 +39408,7 @@
                 {
                     "name": "routerParams",
                     "decorators": [],
-                    "description": " Параметры роутинга",
+                    "description": "Параметры роутинга",
                     "required": false,
                     "type": "any",
                     "example": null,
@@ -39448,7 +39512,7 @@
                 {
                     "name": "alwaysOpened",
                     "decorators": [],
-                    "description": " Используется для управления раскрытием всех элементов в дереве",
+                    "description": "Используется для управления раскрытием всех элементов в дереве",
                     "required": false,
                     "type": "boolean",
                     "example": null
@@ -39485,6 +39549,14 @@
                     "type": "string",
                     "example": "'exampleTree'"
                 },
+                {
+                    "name": "collapseChildItems",
+                    "decorators": [],
+                    "description": "Скрывать открытые вложенные узлы, если скрыли родительский узел",
+                    "required": false,
+                    "type": "boolean",
+                    "example": "true"
+                },
                 {
                     "name": "customIcon",
                     "decorators": [],
@@ -39552,7 +39624,7 @@
                 {
                     "name": "routerParams",
                     "decorators": [],
-                    "description": " Параметры роутинга",
+                    "description": "Параметры роутинга",
                     "required": false,
                     "type": "any",
                     "example": null
@@ -39634,6 +39706,15 @@
                             "example": null
                         }
                     ]
+                },
+                {
+                    "name": "onItemFocus",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "void",
+                    "example": null,
+                    "parameters": []
                 }
             ]
         },

package/en.json

@@ -979,8 +979,14 @@
     "Скрыть иконку c лева от элемента": "",
     "\nКомпонент `Kanban` позволяет создать доску для управления задачами.\nКоличество столбцов задается с помощью пропа `columns`.\nЗадачи на доске можно создавать, редактировать и перемещать с визуальным отображением.\n\nДля работы этого компонента необходимо установить в проекте зависимости `react-beautiful-dnd`\nи передать в пропсы `droppableComponent`, `draggableComponent` и `dndContext`\nкомпоненты `Droppable`, `Draggable` и `DragDropContext` соответственно.\n\nДля корректной работы функционала создания задач,\nнеобходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nИмпортированные компоненты нужно передать в проп `createTaskEditorConfig`,\nв поле `htmlComponent` передать `CKEditor`, а в `editorConstructor` передать `ClassicEditor`.\n": "",
     "Компонент для создания HTML-разметки, использующий WYSIWYG редактор.\n\nДля использования WYSIWYG редактора, необходимо установить в проекте зависимости `@ckeditor/ckeditor5-react` и `@steroidsjs/ckeditor5`,\nзатем импортировать `CKEditor` из `@ckeditor/ckeditor5-react` и `ClassicEditor` из `@steroidsjs/ckeditor5/packages/ckeditor5-build-classic`.\nКомпонент `CKEditor` нужно передать в проп `htmlComponent`, а конструктор `ClassicEditor` в проп `editorConstructor`.\n\nПри передаче `HtmlField` с бэкенда, необходимо переопределить `view` компонента, указав локальный.\nВ локальном компоненте добавить вместо пропсов `htmlComponent` и `editorConstructor` импорты `CKEditor` и `ClassicEditor` соотвественно.\n": "",
+    "Компонент, который представляет в виде дерева список с иерархической структурой данных\n\nДополнительный функционал: в кастомном view компонента есть возможность реализовать кнопку, по клику на которую\nбудет вызываться функция props.onItemFocus. Данная функция \"находит\" текущий роут в дереве -\nраскрывает родительские уровни, делает элемент активным.\nДанная функция не включает скролл к активному компоненту внутри дерева, это также необходимо\nреализовать в кастомном view локально в проекте.\n": "",
     "Дополнительный свойства для view части компонента": "",
+    "Используется для управления раскрытием всех элементов в дереве": "",
     "Идентификатор (ключ) для сохранения в LocalStorage коллекции.": "",
+    "Скрывать открытые вложенные узлы, если скрыли родительский узел": "",
+    "Текущая страница, используется для корректного отображения пагинации": "",
+    "Количество элементов на странице, используется для корректного отображения пагинации": "",
+    "Параметры роутинга": "",
     "Сохранение в localStorage уровней вложенности.": "",
     "Компоненты для подключения wysiwyg редактора": "",
     "Отображать чекбоксы только на узлах, не имеющих вложенных элементов": "",

package/hooks/useTree.d.ts

@@ -35,6 +35,7 @@ export interface IPreparedTreeItem extends ITreeItem {
 }
 export interface ITreeOutput {
     treeItems: IPreparedTreeItem[];
+    onItemFocus: (e: Event | React.MouseEvent | any) => void;
 }
 export interface ITreeConfig {
     /**
@@ -76,34 +77,39 @@ export interface ITreeConfig {
      */
     onExpand?: (...args: any[]) => any;
     /**
-     *  Используется для управления раскрытием всех элементов в дереве
+     * Используется для управления раскрытием всех элементов в дереве
      * @example: true
      */
     alwaysOpened?: boolean;
     /**
-     *  Текущая страница, используется для корректного отображения пагинации
+     * Текущая страница, используется для корректного отображения пагинации
      * @example: 1
      */
     currentPage?: number;
     /**
-     *  Количество элементов на странице, используется для корректного отображения пагинации
+     * Количество элементов на странице, используется для корректного отображения пагинации
      * @example: 4
      */
     itemsOnPage?: number;
     /**
-     *  Параметры роутинга
+     * Параметры роутинга
      * @example: true
      */
     routerParams?: any;
     /**
      * При повторном нажатии на выбранный элемент из дерева, он продолжит отображаться как активный.
      * @example true
-    */
+     */
     useSameSelectedItemId?: boolean;
+    /**
+     * Скрывать открытые вложенные узлы, если скрыли родительский узел
+     * @example true
+     */
+    collapseChildItems?: boolean;
     /**
      * Сохранение в localStorage уровней вложенности.
      * @example true
-    */
+     */
     saveInClientStorage?: boolean;
     /**
      * Идентификатор (ключ) для сохранения в LocalStorage коллекции.

package/hooks/useTree.js

@@ -22,6 +22,7 @@ var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var isEmpty_1 = __importDefault(require("lodash-es/isEmpty"));
 var isNil_1 = __importDefault(require("lodash-es/isNil"));
 var keys_1 = __importDefault(require("lodash-es/keys"));
+var pickBy_1 = __importDefault(require("lodash-es/pickBy"));
 var react_use_1 = require("react-use");
 var useComponents_1 = __importDefault(require("./useComponents"));
 var useSelector_1 = __importDefault(require("./useSelector"));
@@ -68,6 +69,7 @@ var findChildById = function (sourceItems, itemId, primaryKey, parentId, level)
     });
     return foundedItem;
 };
+var removeClosedChildItems = function (expandedItems, collapsedItemUniqueId) { return (0, pickBy_1["default"])(expandedItems, function (_, expandedItemUniqueId) { return !expandedItemUniqueId.startsWith(collapsedItemUniqueId); }); };
 var getAutoExpandedItems = function (sourceItems, selectedItemId, primaryKey, autoOpenLevels, parentId, level) {
     if (autoOpenLevels === void 0) { autoOpenLevels = 1; }
     if (parentId === void 0) { parentId = EMPTY_PARENT_ID; }
@@ -118,6 +120,24 @@ function useTree(config) {
         }
         return [];
     }, [config.items, config.routerParams, routes]);
+    // Выполняет поиск текущего роута в дереве: раскрывает дерево до элемента, делает элемент активным
+    var onItemFocus = (0, react_1.useCallback)(function () {
+        var currentRouteAsTreeItem = findChildById(items, selectedItemId, primaryKey);
+        var currentRouteUniqueIdParts = currentRouteAsTreeItem.uniqueId.split(DOT_SEPARATOR); // Get all parent levels of item
+        var itemsToExpand = {};
+        var itemToExpandKey;
+        currentRouteUniqueIdParts.forEach(function (item, index) {
+            if (index === 0) {
+                itemToExpandKey = item;
+            }
+            else {
+                itemToExpandKey = [itemToExpandKey, item].join(DOT_SEPARATOR);
+                itemsToExpand[itemToExpandKey] = true;
+            }
+        });
+        setSelectedUniqueId(currentRouteAsTreeItem ? currentRouteAsTreeItem.uniqueId : null);
+        setExpandedItems(function (prev) { return (__assign(__assign({}, prev), itemsToExpand)); });
+    }, [items, primaryKey, selectedItemId]);
     // Initial expanded items
     (0, react_1.useEffect)(function () {
         setExpandedItems(getAutoExpandedItems(items, selectedItemId, primaryKey, config.autoOpenLevels));
@@ -154,7 +174,6 @@ function useTree(config) {
         };
     }, [config.saveInClientStorage, saveInClientStorage]);
     var onExpand = (0, react_1.useCallback)(function (e, uniqueId, item) {
-        var _a;
         e.preventDefault();
         if (config.onExpand) {
             config.onExpand.call(null, e, item);
@@ -162,9 +181,17 @@ function useTree(config) {
         var sameUniqueIdAccordingToSettings = config.useSameSelectedItemId ? uniqueId : null;
         setSelectedUniqueId(selectedUniqueId === uniqueId ? sameUniqueIdAccordingToSettings : uniqueId);
         if (!(0, isEmpty_1["default"])(item[primaryKey])) {
-            setExpandedItems(__assign(__assign({}, expandedItems), (_a = {}, _a[uniqueId] = !expandedItems[uniqueId], _a)));
+            setExpandedItems(function (prevState) {
+                var _a;
+                // Hide child elements when closing the parent
+                if (config.collapseChildItems && prevState[uniqueId]) {
+                    return __assign({}, removeClosedChildItems(prevState, uniqueId));
+                }
+                // Hide/expand only the element that was clicked
+                return __assign(__assign({}, prevState), (_a = {}, _a[uniqueId] = !prevState[uniqueId], _a));
+            });
         }
-    }, [config.onExpand, config.useSameSelectedItemId, expandedItems, primaryKey, selectedUniqueId]);
+    }, [config.collapseChildItems, config.onExpand, config.useSameSelectedItemId, primaryKey, selectedUniqueId]);
     var resultTreeItems = (0, react_1.useMemo)(function () {
         var getItems = function (sourceItems, parentId, currentLevel) {
             if (parentId === void 0) { parentId = EMPTY_PARENT_ID; }
@@ -195,7 +222,8 @@ function useTree(config) {
         // eslint-disable-next-line max-len
     }, [activeRouteIds, config.alwaysOpened, config.currentPage, config.itemsOnPage, config.level, expandedItems, items, onExpand, primaryKey, routerParams, selectedUniqueId]);
     return {
-        treeItems: resultTreeItems
+        treeItems: resultTreeItems,
+        onItemFocus: onItemFocus
     };
 }
 exports["default"] = useTree;

package/package.json

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

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

@@ -19,7 +19,7 @@ type CheckboxTreeItems = string | ({
  *
  * Список с вложенными чекбоксами. Используется в формах для создания иерархической структуры и выбора нескольких значений.
  */
-export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent, Pick<ITreeProps, 'levelPadding' | 'alwaysOpened' | 'hasIconExpandOnly' | 'customIcon' | 'saveInClientStorage'> {
+export interface ICheckboxTreeFieldProps extends IFieldWrapperInputProps, Omit<IDataProviderConfig, 'items'>, Omit<IDataSelectConfig, 'items'>, IUiComponent, Pick<ITreeProps, 'levelPadding' | 'alwaysOpened' | 'hasIconExpandOnly' | 'customIcon' | 'saveInClientStorage' | 'collapseChildItems'> {
     /**
      * Свойства для элемента input
      * @example { onKeyDown: ... }

package/ui/form/CheckboxTreeField/CheckboxTreeField.js

@@ -78,7 +78,8 @@ function CheckboxTreeField(props) {
     var treeItems = (0, hooks_1.useTree)({
         items: items,
         autoOpenLevels: 0,
-        alwaysOpened: props.alwaysOpened
+        alwaysOpened: props.alwaysOpened,
+        collapseChildItems: props.collapseChildItems
     }).treeItems;
     // Data select
     var _a = (0, hooks_1.useDataSelect)({
@@ -141,6 +142,7 @@ CheckboxTreeField.defaultProps = {
     primaryKey: 'items',
     hasOnlyLeafCheckboxes: false,
     hasIconExpandOnly: true,
-    saveInClientStorage: false
+    saveInClientStorage: false,
+    collapseChildItems: false
 };
 exports["default"] = (0, fieldWrapper_1["default"])('CheckboxTreeField', CheckboxTreeField);

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

@@ -10,7 +10,7 @@ export interface ITreeColumnViewProps extends IColumnViewProps, Pick<ITreeTableP
  *
  * Компонент для представления данных коллекции в виде иерархической структуры.
  */
-export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreeProps, 'alwaysOpened' | 'levelPadding' | 'customIcon' | 'saveInClientStorage'> {
+export interface ITreeTableProps extends Omit<IGridProps, 'items'>, Pick<ITreeProps, 'alwaysOpened' | 'levelPadding' | 'customIcon' | 'saveInClientStorage' | 'collapseChildItems'> {
     /**
      * Элементы коллекции
      * @example
@@ -36,6 +36,7 @@ declare namespace TreeTable {
         levelPadding: number;
         alwaysOpened: boolean;
         saveInClientStorage: boolean;
+        collapseChildItems: boolean;
     };
 }
 export default TreeTable;

package/ui/list/TreeTable/TreeTable.js

@@ -74,6 +74,7 @@ function TreeTable(props) {
         alwaysOpened: props.alwaysOpened,
         currentPage: list === null || list === void 0 ? void 0 : list.page,
         itemsOnPage: list === null || list === void 0 ? void 0 : list.pageSize,
+        collapseChildItems: props.collapseChildItems,
         saveInClientStorage: props.saveInClientStorage,
         clientStorageId: props.listId
     }).treeItems;
@@ -83,5 +84,6 @@ exports["default"] = TreeTable;
 TreeTable.defaultProps = {
     levelPadding: 32,
     alwaysOpened: false,
-    saveInClientStorage: false
+    saveInClientStorage: false,
+    collapseChildItems: false
 };

package/ui/nav/Tree/Tree.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { IPreparedTreeItem, ITreeConfig, ITreeItem } from '../../../hooks/useTree';
 export interface ITreeViewProps extends ITreeProps {
     items: IPreparedTreeItem[];
+    onItemFocus?: () => void;
 }
 export interface ITreeItemViewProps extends ITreeProps {
     item: IPreparedTreeItem;
@@ -11,6 +12,12 @@ export interface ITreeItemViewProps extends ITreeProps {
 /**
  * Tree
  * Компонент, который представляет в виде дерева список с иерархической структурой данных
+ *
+ * Дополнительный функционал: в кастомном view компонента есть возможность реализовать кнопку, по клику на которую
+ * будет вызываться функция props.onItemFocus. Данная функция "находит" текущий роут в дереве -
+ * раскрывает родительские уровни, делает элемент активным.
+ * Данная функция не включает скролл к активному компоненту внутри дерева, это также необходимо
+ * реализовать в кастомном view локально в проекте.
  */
 export interface ITreeProps extends Omit<ITreeConfig, 'currentPage' | 'itemsOnPage'> {
     /**
@@ -70,6 +77,7 @@ declare namespace Tree {
         useSameSelectedItemId: boolean;
         hideIcon: boolean;
         saveInClientStorage: boolean;
+        collapseChildItems: boolean;
     };
 }
 export default Tree;

package/ui/nav/Tree/Tree.js

@@ -1,10 +1,21 @@
 "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);
+};
 exports.__esModule = true;
 var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 function Tree(props) {
     var components = (0, hooks_1.useComponents)();
-    var treeItems = (0, hooks_1.useTree)({
+    var _a = (0, hooks_1.useTree)({
         items: props.items,
         selectedItemId: props.selectedItemId,
         routerParams: props.routerParams,
@@ -14,17 +25,11 @@ function Tree(props) {
         level: props.level,
         alwaysOpened: props.alwaysOpened,
         useSameSelectedItemId: props.useSameSelectedItemId,
+        collapseChildItems: props.collapseChildItems,
         saveInClientStorage: props.autoSave,
         clientStorageId: props.id
-    }).treeItems;
-    var viewProps = (0, react_1.useMemo)(function () { return ({
-        items: treeItems,
-        levelPadding: props.levelPadding,
-        className: props.className,
-        hideIcon: props.hideIcon,
-        customIcon: props.customIcon,
-        hasIconExpandOnly: props.hasIconExpandOnly
-    }); }, [props.className, props.customIcon, props.hasIconExpandOnly, props.hideIcon, props.levelPadding, treeItems]);
+    }), treeItems = _a.treeItems, onItemFocus = _a.onItemFocus;
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props), { onItemFocus: onItemFocus, items: treeItems, levelPadding: props.levelPadding, className: props.className, hideIcon: props.hideIcon, customIcon: props.customIcon, hasIconExpandOnly: props.hasIconExpandOnly })); }, [props, treeItems, onItemFocus]);
     return components.ui.renderView(props.view || 'nav.TreeView', viewProps);
 }
 exports["default"] = Tree;
@@ -37,5 +42,6 @@ Tree.defaultProps = {
     hasIconExpandOnly: false,
     useSameSelectedItemId: true,
     hideIcon: false,
-    saveInClientStorage: false
+    saveInClientStorage: false,
+    collapseChildItems: false
 };