@snack-uikit/tree 0.11.0 → 0.11.1-preview-c3fee040.0

package/dist/esm/helpers/collectEmptyNestedNodesInExpanded.js

@@ -0,0 +1,11 @@
+import { traverse } from './traverse';
+export function collectEmptyNestedNodesInExpanded(nodes, expandedIds) {
+    const result = [];
+    traverse(nodes, node => {
+        const hasEmptyNested = Array.isArray(node.nested) && node.nested.length === 0;
+        if (hasEmptyNested && expandedIds.has(node.id)) {
+            result.push(node);
+        }
+    });
+    return result;
+}

package/dist/esm/helpers/index.d.ts

@@ -6,3 +6,5 @@ export * from './getSearchedTreeNodeById';
 export * from './lookupTreeForSelectedNodes';
 export * from './sortTreeItemsByTitle';
 export * from './traverse';
+export * from './setChildrenOfTreeNode';
+export * from './collectEmptyNestedNodesInExpanded';

package/dist/esm/helpers/index.js

@@ -6,3 +6,5 @@ export * from './getSearchedTreeNodeById';
 export * from './lookupTreeForSelectedNodes';
 export * from './sortTreeItemsByTitle';
 export * from './traverse';
+export * from './setChildrenOfTreeNode';
+export * from './collectEmptyNestedNodesInExpanded';

package/dist/esm/helpers/setChildrenOfTreeNode.d.ts

@@ -0,0 +1,2 @@
+import { TreeNodeProps } from '../types';
+export declare const setChildrenOfTreeNode: <TTreeNode extends TreeNodeProps>(tree: TTreeNode[], nodeId: string, children: TTreeNode[]) => TTreeNode[];

package/dist/esm/helpers/setChildrenOfTreeNode.js

@@ -0,0 +1,20 @@
+import { traverseWithTarget } from './traverse';
+export const setChildrenOfTreeNode = (tree, nodeId, children) => {
+    const result = [];
+    traverseWithTarget(tree, result, (source, _depth, targetList) => {
+        var _a;
+        const isTarget = source.id === nodeId;
+        const hasNested = Array.isArray(source.nested);
+        let newNested;
+        if (isTarget) {
+            newNested = children;
+        }
+        else if (hasNested) {
+            newNested = [];
+        }
+        const newNode = (newNested !== undefined ? Object.assign(Object.assign({}, source), { nested: newNested }) : Object.assign({}, source));
+        targetList.push(newNode);
+        return !isTarget && hasNested && ((_a = source.nested) === null || _a === void 0 ? void 0 : _a.length) ? newNested : undefined;
+    });
+    return result;
+};

package/dist/esm/helpers/sortTreeItemsByTitle.js

@@ -1,6 +1,6 @@
 import { extractTreeNodeTitle } from './extractTreeNodeTitle';
 export const sortTreeItemsByTitle = (items) => items === null || items === void 0 ? void 0 : items.toSorted((itemA, itemB) => {
-    const valueA = extractTreeNodeTitle(itemA);
-    const valueB = extractTreeNodeTitle(itemB);
+    const valueA = extractTreeNodeTitle(itemA).toLowerCase();
+    const valueB = extractTreeNodeTitle(itemB).toLowerCase();
     return valueA.localeCompare(valueB);
 });

package/dist/esm/helpers/traverse.d.ts

@@ -1,2 +1,8 @@
-import { TreeNodeProps } from '../';
+import { TreeNodeProps } from '../types';
 export declare const traverse: <T extends TreeNodeProps>(nodes: T[], callback: (node: T, depth: number) => void) => void;
+/**
+ * BFS с указанием целевого списка для каждого узла.
+ * Очередь хранит (node, depth, targetList). Callback добавляет узел в targetList
+ * и возвращает массив для детей (или undefined, чтобы не обходить детей).
+ */
+export declare const traverseWithTarget: <T extends TreeNodeProps>(nodes: T[], rootTargetList: T[], callback: (node: T, depth: number, targetList: T[]) => T[] | undefined) => void;

package/dist/esm/helpers/traverse.js

@@ -17,3 +17,27 @@ export const traverse = (nodes, callback) => {
         }
     }
 };
+/**
+ * BFS с указанием целевого списка для каждого узла.
+ * Очередь хранит (node, depth, targetList). Callback добавляет узел в targetList
+ * и возвращает массив для детей (или undefined, чтобы не обходить детей).
+ */
+export const traverseWithTarget = (nodes, rootTargetList, callback) => {
+    var _a;
+    const queue = new Queue();
+    for (const node of nodes) {
+        queue.enqueue({ node, depth: 0, targetList: rootTargetList });
+    }
+    while (!queue.isEmpty()) {
+        const item = queue.dequeue();
+        if (!item)
+            continue;
+        const { node, depth, targetList } = item;
+        const childTargetList = callback(node, depth, targetList);
+        if (childTargetList !== undefined && ((_a = node.nested) === null || _a === void 0 ? void 0 : _a.length)) {
+            for (const child of node.nested) {
+                queue.enqueue({ node: child, depth: depth + 1, targetList: childTargetList });
+            }
+        }
+    }
+};

package/dist/esm/hooks/__tests__/useSearchableTree.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/hooks/__tests__/useSearchableTree.spec.js

@@ -0,0 +1,165 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { useEffect, useRef } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { useSearchableTree } from '../useSearchableTree';
+vi.mock('@siberiacancode/reactuse', () => ({
+    useDebounceValue: (value) => value,
+    useDidUpdate: (effect, deps) => {
+        const isFirstRenderRef = useRef(true);
+        useEffect(() => {
+            if (isFirstRenderRef.current) {
+                isFirstRenderRef.current = false;
+                return;
+            }
+            effect();
+        }, [deps, effect]);
+    },
+    useRefState: (initialValue) => useRef(initialValue),
+}));
+const createLeaf = (id) => ({
+    id,
+    title: id,
+});
+const createParent = (id, nested) => ({
+    id,
+    title: id,
+    nested,
+});
+const mapNodeToRecordItem = (node) => ({
+    label: String(node.title),
+});
+describe('useSearchableTree', () => {
+    it('should initialize tree and treeItemsRecord from initTree', () => {
+        const initTree = [createLeaf('node-1'), createParent('node-2', [createLeaf('node-2-1')])];
+        const { result } = renderHook(() => useSearchableTree({
+            initTree,
+            onPreloadNode: vi.fn(),
+            onPreloadNodes: vi.fn(),
+            onSearch: vi.fn(),
+            mapNodeToRecordItem,
+        }));
+        expect(result.current.tree.current).toEqual(initTree);
+        expect(result.current.treeItemsRecord.current).toEqual({
+            'node-1': { label: 'node-1' },
+            'node-2': { label: 'node-2' },
+            'node-2-1': { label: 'node-2-1' },
+        });
+    });
+    it('should update expandedNodes on onExpand call', () => {
+        const { result } = renderHook(() => useSearchableTree({
+            initTree: [createLeaf('root')],
+            onPreloadNode: vi.fn(),
+            onPreloadNodes: vi.fn(),
+            onSearch: vi.fn(),
+            mapNodeToRecordItem,
+        }));
+        act(() => {
+            result.current.onExpand(['root', 'child']);
+        });
+        expect(result.current.expandedNodes.current).toEqual(['root', 'child']);
+    });
+    it('should preload node children and update tree and record on onDataLoad', () => __awaiter(void 0, void 0, void 0, function* () {
+        const initTree = [createParent('root', [])];
+        const preloadedChildren = [createLeaf('child-1'), createLeaf('child-2')];
+        const onPreloadNode = vi.fn().mockResolvedValue(preloadedChildren);
+        const { result } = renderHook(() => useSearchableTree({
+            initTree,
+            onPreloadNode,
+            onPreloadNodes: vi.fn(),
+            onSearch: vi.fn(),
+            mapNodeToRecordItem,
+        }));
+        let loadResult;
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            loadResult = yield result.current.onDataLoad(createParent('root', []));
+        }));
+        expect(onPreloadNode).toHaveBeenCalledWith(createParent('root', []));
+        expect(loadResult).toEqual({
+            preloadedChildren,
+            updatedTree: [createParent('root', preloadedChildren)],
+            newTreeItemsRecord: {
+                root: { label: 'root' },
+                'child-1': { label: 'child-1' },
+                'child-2': { label: 'child-2' },
+            },
+        });
+        expect(result.current.tree.current).toEqual([createParent('root', preloadedChildren)]);
+        expect(result.current.treeItemsRecord.current).toEqual({
+            root: { label: 'root' },
+            'child-1': { label: 'child-1' },
+            'child-2': { label: 'child-2' },
+        });
+    }));
+    it('should run search and preload required nodes', () => __awaiter(void 0, void 0, void 0, function* () {
+        const searchedTree = [createParent('expandable-root', []), createLeaf('leaf')];
+        const onSearch = vi.fn(() => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                tree: searchedTree,
+                needPreloadNodes: ['expandable-root', 'external-root'],
+            });
+        }));
+        const onPreloadNodes = vi.fn((nodeIds) => __awaiter(void 0, void 0, void 0, function* () {
+            return (Object.assign({ 'expandable-root': [createLeaf('expandable-child')], 'external-root': [createLeaf('external-child')] }, Object.fromEntries(nodeIds.filter(id => id !== 'expandable-root' && id !== 'external-root').map(id => [id, []]))));
+        }));
+        const { result } = renderHook(() => useSearchableTree({
+            initTree: [createParent('init-root', [])],
+            onPreloadNode: vi.fn(),
+            onPreloadNodes,
+            onSearch,
+            mapNodeToRecordItem,
+        }));
+        act(() => {
+            result.current.onExpand(['expandable-root']);
+            result.current.search.onChange('query');
+        });
+        yield waitFor(() => {
+            expect(onSearch).toHaveBeenCalledWith({ search: 'query' }, expect.any(AbortSignal));
+            expect(onPreloadNodes).toHaveBeenCalledWith(['expandable-root', 'external-root'], expect.any(AbortSignal));
+        });
+        expect(result.current.tree.current).toEqual([
+            createParent('expandable-root', [createLeaf('expandable-child')]),
+            createLeaf('leaf'),
+        ]);
+        expect(result.current.treeItemsRecord.current).toEqual({
+            'expandable-root': { label: 'expandable-root' },
+            'expandable-child': { label: 'expandable-child' },
+            leaf: { label: 'leaf' },
+        });
+    }));
+    it('should update tree and record from search result without preloading', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onSearch = vi.fn(() => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                tree: [createParent('root-node', [createLeaf('child-node')])],
+                needPreloadNodes: [],
+            });
+        }));
+        const { result } = renderHook(() => useSearchableTree({
+            initTree: [createLeaf('initial')],
+            onPreloadNode: vi.fn(),
+            onPreloadNodes: vi.fn(),
+            onSearch,
+            mapNodeToRecordItem,
+        }));
+        act(() => {
+            result.current.search.onChange('query');
+        });
+        yield waitFor(() => {
+            expect(onSearch).toHaveBeenCalledWith({ search: 'query' }, expect.any(AbortSignal));
+            expect(result.current.tree.current).toEqual([createParent('root-node', [createLeaf('child-node')])]);
+        });
+        expect(result.current.expandedNodes.current).toEqual([]);
+        expect(result.current.treeItemsRecord.current).toEqual({
+            'root-node': { label: 'root-node' },
+            'child-node': { label: 'child-node' },
+        });
+    }));
+});

package/dist/esm/hooks/__tests__/useTreeMultiSelection.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/hooks/__tests__/useTreeMultiSelection.spec.js

@@ -0,0 +1,130 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { useTreeMultiSelection } from '../useTreeMultiSelection';
+const createLeaf = (id) => ({
+    id,
+    title: id,
+});
+const createParent = (id, nested) => ({
+    id,
+    title: id,
+    nested,
+});
+describe('useTreeMultiSelection', () => {
+    it('should keep selected state uncontrolled by default', () => __awaiter(void 0, void 0, void 0, function* () {
+        const { result } = renderHook(() => useTreeMultiSelection({
+            onDataLoad: vi.fn(() => __awaiter(void 0, void 0, void 0, function* () { return ({ preloadedChildren: [], updatedTree: [] }); })),
+            onSelect: () => ({ added: ['a'], removed: [] }),
+        }));
+        expect(result.current.selected).toEqual([]);
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield result.current.onSelect(['a'], createLeaf('a'));
+        }));
+        expect(result.current.selected).toEqual(['a']);
+    }));
+    it('should call onChangeSelected when selection updates', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onChangeSelected = vi.fn();
+        const { result } = renderHook(() => useTreeMultiSelection({
+            onDataLoad: vi.fn(() => __awaiter(void 0, void 0, void 0, function* () { return ({ preloadedChildren: [], updatedTree: [] }); })),
+            onSelect: () => ({ added: ['a'], removed: [] }),
+            onChangeSelected,
+        }));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield result.current.onSelect(['a'], createLeaf('a'));
+        }));
+        expect(onChangeSelected).toHaveBeenCalledWith(['a']);
+    }));
+    it('should treat selected prop as controlled', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onChangeSelected = vi.fn();
+        const { result, rerender } = renderHook(({ selected }) => useTreeMultiSelection({
+            onDataLoad: vi.fn(() => __awaiter(void 0, void 0, void 0, function* () { return ({ preloadedChildren: [], updatedTree: [] }); })),
+            onSelect: () => ({ added: ['b'], removed: [] }),
+            selected,
+            onChangeSelected,
+        }), { initialProps: { selected: ['a'] } });
+        expect(result.current.selected).toEqual(['a']);
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield result.current.onSelect(['a', 'b'], createLeaf('b'));
+        }));
+        // controlled value does not change until parent updates it
+        expect(result.current.selected).toEqual(['a']);
+        expect(onChangeSelected).toHaveBeenCalledWith(['a', 'b']);
+        rerender({ selected: ['a', 'b'] });
+        expect(result.current.selected).toEqual(['a', 'b']);
+    }));
+    it('should preload children when selecting empty parent node and pass cloned node to onSelect', () => __awaiter(void 0, void 0, void 0, function* () {
+        const node = createParent('parent', []);
+        const preloadedChildren = [createLeaf('child-1'), createLeaf('child-2')];
+        const onDataLoad = vi.fn(() => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                preloadedChildren,
+                updatedTree: [createParent('parent', preloadedChildren)],
+            });
+        }));
+        const onSelect = vi.fn(() => ({ added: ['parent', 'child-1', 'child-2'], removed: [] }));
+        const { result } = renderHook(() => useTreeMultiSelection({
+            onDataLoad,
+            onSelect,
+        }));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield result.current.onSelect(['parent'], node);
+        }));
+        expect(onDataLoad).toHaveBeenCalledWith(node);
+        expect(onSelect).toHaveBeenCalledWith({
+            selectedKeys: ['parent'],
+            node: createParent('parent', preloadedChildren),
+            isSelected: true,
+        });
+        expect(result.current.selected.sort()).toEqual(['child-1', 'child-2', 'parent']);
+    }));
+    it('should not preload when parent node already has children', () => __awaiter(void 0, void 0, void 0, function* () {
+        const node = createParent('parent', [createLeaf('child')]);
+        const onDataLoad = vi.fn(() => __awaiter(void 0, void 0, void 0, function* () {
+            return ({
+                preloadedChildren: [],
+                updatedTree: [],
+            });
+        }));
+        const onSelect = vi.fn(() => ({ added: ['parent'], removed: [] }));
+        const { result } = renderHook(() => useTreeMultiSelection({
+            onDataLoad,
+            onSelect,
+        }));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield result.current.onSelect(['parent'], node);
+        }));
+        expect(onDataLoad).not.toHaveBeenCalled();
+        expect(onSelect).toHaveBeenCalledWith({
+            selectedKeys: ['parent'],
+            node,
+            isSelected: true,
+        });
+    }));
+    it('should add and remove ids from selection without duplicates', () => __awaiter(void 0, void 0, void 0, function* () {
+        const { result } = renderHook(() => useTreeMultiSelection({
+            onDataLoad: vi.fn(() => __awaiter(void 0, void 0, void 0, function* () { return ({ preloadedChildren: [], updatedTree: [] }); })),
+            onSelect: () => ({ added: ['a', 'a', 'b'], removed: [] }),
+        }));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield result.current.onSelect(['a'], createLeaf('a'));
+        }));
+        expect(result.current.selected.sort()).toEqual(['a', 'b']);
+        const { result: result2 } = renderHook(() => useTreeMultiSelection({
+            onDataLoad: vi.fn(() => __awaiter(void 0, void 0, void 0, function* () { return ({ preloadedChildren: [], updatedTree: [] }); })),
+            onSelect: () => ({ added: [], removed: ['a'] }),
+            selected: ['a', 'b'],
+        }));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            yield result2.current.onSelect(['b'], createLeaf('a'));
+        }));
+    }));
+});

package/dist/esm/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useSearchableTree';
+export * from './useTreeMultiSelection';

package/dist/esm/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useSearchableTree';
+export * from './useTreeMultiSelection';

package/dist/esm/hooks/useSearchableTree.d.ts

@@ -0,0 +1,28 @@
+import type { SearchableTreeDataLoadResult, TreeNodeProps } from '../types';
+export type SearchResult<TTreeNode extends TreeNodeProps> = {
+    tree: TTreeNode[];
+    needPreloadNodes: string[];
+};
+export type SearchParams = {
+    search: string;
+};
+type UseSearchableTreeParams<TRecordValue, TTreeNode extends TreeNodeProps> = {
+    initTree: TTreeNode[];
+    onPreloadNode: (node: TreeNodeProps) => Promise<TTreeNode[]>;
+    onPreloadNodes: (nodes: string[], signal?: AbortSignal) => Promise<Record<string, TTreeNode[]>>;
+    onSearch: (params: SearchParams, signal?: AbortSignal) => Promise<SearchResult<TTreeNode>>;
+    mapNodeToRecordItem: (node: TTreeNode) => TRecordValue;
+};
+export declare function useSearchableTree<TRecordValue, TTreeNode extends TreeNodeProps>({ initTree, onPreloadNode, onPreloadNodes, onSearch, mapNodeToRecordItem, }: UseSearchableTreeParams<TRecordValue, TTreeNode>): {
+    tree: import("@siberiacancode/reactuse").StateRef<TTreeNode[]>;
+    expandedNodes: import("@siberiacancode/reactuse").StateRef<string[]>;
+    loading: boolean;
+    treeItemsRecord: import("@siberiacancode/reactuse").StateRef<Record<string, TRecordValue>>;
+    search: {
+        value: string;
+        onChange: import("react").Dispatch<import("react").SetStateAction<string>>;
+    };
+    onExpand: (nodes: string[]) => void;
+    onDataLoad: (node: TreeNodeProps) => Promise<SearchableTreeDataLoadResult<TTreeNode, TRecordValue>>;
+};
+export {};

package/dist/esm/hooks/useSearchableTree.js

@@ -0,0 +1,108 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useDebounceValue, useDidUpdate, useRefState } from '@siberiacancode/reactuse';
+import { cancelable } from 'cancelable-promise';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { collectEmptyNestedNodesInExpanded, setChildrenOfTreeNode, traverse } from '../helpers';
+export function useSearchableTree({ initTree, onPreloadNode, onPreloadNodes, onSearch, mapNodeToRecordItem, }) {
+    const tree = useRefState(initTree);
+    const treeItemsRecord = useRefState({});
+    const expandedNodes = useRefState([]);
+    const [search, setSearch] = useState('');
+    const debouncedSearch = useDebounceValue(search, 500);
+    const [loading, setLoading] = useState(false);
+    const searchPromiseRef = useRef(null);
+    const searchAbortControllerRef = useRef(null);
+    const buildTreeItemsRecord = useCallback((nodes) => {
+        const record = {};
+        traverse(nodes, node => {
+            record[node.id] = mapNodeToRecordItem(node);
+        });
+        return record;
+    }, [mapNodeToRecordItem]);
+    const onExpand = useCallback((nodes) => {
+        expandedNodes.current = nodes;
+    }, [expandedNodes]);
+    const onDataLoad = useCallback((node) => __awaiter(this, void 0, void 0, function* () {
+        const preloadedChildren = yield onPreloadNode(node);
+        const updatedTree = setChildrenOfTreeNode(tree.current, node.id, preloadedChildren);
+        tree.current = updatedTree;
+        const newTreeItemsRecord = Object.assign({}, treeItemsRecord.current);
+        traverse(preloadedChildren, child => {
+            newTreeItemsRecord[child.id] = mapNodeToRecordItem(child);
+        });
+        treeItemsRecord.current = newTreeItemsRecord;
+        return { preloadedChildren, updatedTree, newTreeItemsRecord };
+    }), [mapNodeToRecordItem, onPreloadNode, tree, treeItemsRecord]);
+    const handleSearch = useCallback((searchQuery) => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        (_a = searchPromiseRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
+        (_b = searchAbortControllerRef.current) === null || _b === void 0 ? void 0 : _b.abort();
+        setLoading(true);
+        const abortController = new AbortController();
+        searchAbortControllerRef.current = abortController;
+        const searchPromise = cancelable(onSearch({ search: searchQuery }, abortController.signal));
+        searchPromiseRef.current = searchPromise;
+        try {
+            const { tree: searchedTree, needPreloadNodes } = yield searchPromise;
+            if (!searchPromise.isCanceled()) {
+                tree.current = searchedTree;
+                treeItemsRecord.current = buildTreeItemsRecord(searchedTree);
+                const expandedSet = new Set(expandedNodes.current);
+                const toPreloadExpandableNodes = collectEmptyNestedNodesInExpanded(searchedTree, expandedSet);
+                const collectedNodesForPreload = Array.from(new Set([...toPreloadExpandableNodes.map(node => node.id), ...needPreloadNodes]));
+                if (!collectedNodesForPreload.length) {
+                    return;
+                }
+                const preloadedNodes = yield onPreloadNodes(collectedNodesForPreload, abortController.signal);
+                if (searchPromiseRef.current !== searchPromise) {
+                    return;
+                }
+                let tmpTree = [...searchedTree];
+                for (const [nodeId, children] of Object.entries(preloadedNodes)) {
+                    tmpTree = setChildrenOfTreeNode(tmpTree, nodeId, children);
+                }
+                tree.current = tmpTree;
+                treeItemsRecord.current = buildTreeItemsRecord(tmpTree);
+            }
+        }
+        finally {
+            if (searchPromiseRef.current === searchPromise) {
+                setLoading(false);
+                searchPromiseRef.current = null;
+                searchAbortControllerRef.current = null;
+            }
+        }
+    }), [buildTreeItemsRecord, expandedNodes, onPreloadNodes, onSearch, tree, treeItemsRecord]);
+    useDidUpdate(() => {
+        handleSearch(debouncedSearch);
+    }, [debouncedSearch, handleSearch]);
+    useEffect(() => {
+        tree.current = initTree;
+        treeItemsRecord.current = buildTreeItemsRecord(initTree);
+    }, [buildTreeItemsRecord, initTree, tree, treeItemsRecord]);
+    useEffect(() => () => {
+        var _a, _b;
+        (_a = searchPromiseRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
+        (_b = searchAbortControllerRef.current) === null || _b === void 0 ? void 0 : _b.abort();
+    }, []);
+    return {
+        tree,
+        expandedNodes,
+        loading,
+        treeItemsRecord,
+        search: {
+            value: search,
+            onChange: setSearch,
+        },
+        onExpand,
+        onDataLoad,
+    };
+}

package/dist/esm/hooks/useTreeMultiSelection.d.ts

@@ -0,0 +1,12 @@
+import { PreloadNodeHandler, SelectHandler, TreeNodeProps } from '../types';
+type UseTreeMultiSelectionParams<TTreeNode extends TreeNodeProps> = {
+    onDataLoad: PreloadNodeHandler<TTreeNode>;
+    onSelect: SelectHandler;
+    selected?: string[];
+    onChangeSelected?: (newSelected: string[]) => void;
+};
+export declare function useTreeMultiSelection<TTreeNode extends TreeNodeProps>({ onDataLoad, onSelect: onSelectProp, selected, onChangeSelected, }: UseTreeMultiSelectionParams<TTreeNode>): {
+    selected: string[];
+    onSelect: (selectedKeys: string[], node: TreeNodeProps) => Promise<void>;
+};
+export {};

package/dist/esm/hooks/useTreeMultiSelection.js

@@ -0,0 +1,43 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useCallback } from 'react';
+import { useValueControl } from '@snack-uikit/utils';
+const getNewSelectedIds = (selectedIds, added, removed) => {
+    const result = new Set(selectedIds);
+    added.forEach(id => {
+        result.add(id);
+    });
+    removed.forEach(id => {
+        result.delete(id);
+    });
+    return Array.from(result);
+};
+export function useTreeMultiSelection({ onDataLoad, onSelect: onSelectProp, selected, onChangeSelected, }) {
+    const [selectedIds = [], setSelectedIds] = useValueControl({
+        value: selected,
+        defaultValue: [],
+        onChange: onChangeSelected,
+    });
+    const onSelect = useCallback((selectedKeys, node) => __awaiter(this, void 0, void 0, function* () {
+        const isSelected = selectedKeys.includes(node.id);
+        const clonedNode = structuredClone(node);
+        if (node.nested && !node.nested.length) {
+            const { preloadedChildren } = yield onDataLoad(node);
+            clonedNode.nested = preloadedChildren;
+        }
+        const { added, removed } = onSelectProp({ selectedKeys, node: clonedNode, isSelected });
+        const updatedSelectedIds = getNewSelectedIds(selectedIds, added, removed);
+        setSelectedIds(updatedSelectedIds);
+    }), [onDataLoad, onSelectProp, selectedIds, setSelectedIds]);
+    return {
+        selected: selectedIds,
+        onSelect,
+    };
+}

package/dist/esm/types.d.ts

@@ -103,3 +103,20 @@ export type TreeBaseProps = TreeView | TreeMultiSelect | TreeSingleSelect;
 export type ExtendedTreeNodeProps = TreeNodeProps & {
     getTitle?(): void;
 };
+export type PreloadNodeHandler<TTreeNode extends TreeNodeProps> = (node: TreeNodeProps) => Promise<{
+    preloadedChildren: TTreeNode[];
+    updatedTree: TTreeNode[];
+}>;
+export type SearchableTreeDataLoadResult<TTreeNode extends TreeNodeProps, TRecordValue> = {
+    preloadedChildren: TTreeNode[];
+    updatedTree: TTreeNode[];
+    newTreeItemsRecord: Record<string, TRecordValue>;
+};
+export type SelectHandler = (props: {
+    selectedKeys: string[];
+    node: TreeNodeProps;
+    isSelected: boolean;
+}) => {
+    added: string[];
+    removed: string[];
+};