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

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

@@ -0,0 +1,230 @@
+"use strict";
+
+var __awaiter = void 0 && (void 0).__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());
+  });
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const react_1 = require("@testing-library/react");
+const react_2 = require("react");
+const vitest_1 = require("vitest");
+const useSearchableTree_1 = require("../useSearchableTree");
+vitest_1.vi.mock('@siberiacancode/reactuse', () => ({
+  useDebounceValue: value => value,
+  useDidUpdate: (effect, deps) => {
+    const isFirstRenderRef = (0, react_2.useRef)(true);
+    (0, react_2.useEffect)(() => {
+      if (isFirstRenderRef.current) {
+        isFirstRenderRef.current = false;
+        return;
+      }
+      effect();
+    }, [deps, effect]);
+  },
+  useRefState: initialValue => (0, react_2.useRef)(initialValue)
+}));
+const createLeaf = id => ({
+  id,
+  title: id
+});
+const createParent = (id, nested) => ({
+  id,
+  title: id,
+  nested
+});
+const mapNodeToRecordItem = node => ({
+  label: String(node.title)
+});
+(0, vitest_1.describe)('useSearchableTree', () => {
+  (0, vitest_1.it)('should initialize tree and treeItemsRecord from initTree', () => {
+    const initTree = [createLeaf('node-1'), createParent('node-2', [createLeaf('node-2-1')])];
+    const {
+      result
+    } = (0, react_1.renderHook)(() => (0, useSearchableTree_1.useSearchableTree)({
+      initTree,
+      onPreloadNode: vitest_1.vi.fn(),
+      onPreloadNodes: vitest_1.vi.fn(),
+      onSearch: vitest_1.vi.fn(),
+      mapNodeToRecordItem
+    }));
+    (0, vitest_1.expect)(result.current.tree.current).toEqual(initTree);
+    (0, vitest_1.expect)(result.current.treeItemsRecord.current).toEqual({
+      'node-1': {
+        label: 'node-1'
+      },
+      'node-2': {
+        label: 'node-2'
+      },
+      'node-2-1': {
+        label: 'node-2-1'
+      }
+    });
+  });
+  (0, vitest_1.it)('should update expandedNodes on onExpand call', () => {
+    const {
+      result
+    } = (0, react_1.renderHook)(() => (0, useSearchableTree_1.useSearchableTree)({
+      initTree: [createLeaf('root')],
+      onPreloadNode: vitest_1.vi.fn(),
+      onPreloadNodes: vitest_1.vi.fn(),
+      onSearch: vitest_1.vi.fn(),
+      mapNodeToRecordItem
+    }));
+    (0, react_1.act)(() => {
+      result.current.onExpand(['root', 'child']);
+    });
+    (0, vitest_1.expect)(result.current.expandedNodes.current).toEqual(['root', 'child']);
+  });
+  (0, vitest_1.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 = vitest_1.vi.fn().mockResolvedValue(preloadedChildren);
+    const {
+      result
+    } = (0, react_1.renderHook)(() => (0, useSearchableTree_1.useSearchableTree)({
+      initTree,
+      onPreloadNode,
+      onPreloadNodes: vitest_1.vi.fn(),
+      onSearch: vitest_1.vi.fn(),
+      mapNodeToRecordItem
+    }));
+    let loadResult;
+    yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+      loadResult = yield result.current.onDataLoad(createParent('root', []));
+    }));
+    (0, vitest_1.expect)(onPreloadNode).toHaveBeenCalledWith(createParent('root', []));
+    (0, vitest_1.expect)(loadResult).toEqual({
+      preloadedChildren,
+      updatedTree: [createParent('root', preloadedChildren)],
+      newTreeItemsRecord: {
+        root: {
+          label: 'root'
+        },
+        'child-1': {
+          label: 'child-1'
+        },
+        'child-2': {
+          label: 'child-2'
+        }
+      }
+    });
+    (0, vitest_1.expect)(result.current.tree.current).toEqual([createParent('root', preloadedChildren)]);
+    (0, vitest_1.expect)(result.current.treeItemsRecord.current).toEqual({
+      root: {
+        label: 'root'
+      },
+      'child-1': {
+        label: 'child-1'
+      },
+      'child-2': {
+        label: 'child-2'
+      }
+    });
+  }));
+  (0, vitest_1.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 = vitest_1.vi.fn(() => __awaiter(void 0, void 0, void 0, function* () {
+      return {
+        tree: searchedTree,
+        needPreloadNodes: ['expandable-root', 'external-root']
+      };
+    }));
+    const onPreloadNodes = vitest_1.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
+    } = (0, react_1.renderHook)(() => (0, useSearchableTree_1.useSearchableTree)({
+      initTree: [createParent('init-root', [])],
+      onPreloadNode: vitest_1.vi.fn(),
+      onPreloadNodes,
+      onSearch,
+      mapNodeToRecordItem
+    }));
+    (0, react_1.act)(() => {
+      result.current.onExpand(['expandable-root']);
+      result.current.search.onChange('query');
+    });
+    yield (0, react_1.waitFor)(() => {
+      (0, vitest_1.expect)(onSearch).toHaveBeenCalledWith({
+        search: 'query'
+      }, vitest_1.expect.any(AbortSignal));
+      (0, vitest_1.expect)(onPreloadNodes).toHaveBeenCalledWith(['expandable-root', 'external-root'], vitest_1.expect.any(AbortSignal));
+    });
+    (0, vitest_1.expect)(result.current.tree.current).toEqual([createParent('expandable-root', [createLeaf('expandable-child')]), createLeaf('leaf')]);
+    (0, vitest_1.expect)(result.current.treeItemsRecord.current).toEqual({
+      'expandable-root': {
+        label: 'expandable-root'
+      },
+      'expandable-child': {
+        label: 'expandable-child'
+      },
+      leaf: {
+        label: 'leaf'
+      }
+    });
+  }));
+  (0, vitest_1.it)('should update tree and record from search result without preloading', () => __awaiter(void 0, void 0, void 0, function* () {
+    const onSearch = vitest_1.vi.fn(() => __awaiter(void 0, void 0, void 0, function* () {
+      return {
+        tree: [createParent('root-node', [createLeaf('child-node')])],
+        needPreloadNodes: []
+      };
+    }));
+    const {
+      result
+    } = (0, react_1.renderHook)(() => (0, useSearchableTree_1.useSearchableTree)({
+      initTree: [createLeaf('initial')],
+      onPreloadNode: vitest_1.vi.fn(),
+      onPreloadNodes: vitest_1.vi.fn(),
+      onSearch,
+      mapNodeToRecordItem
+    }));
+    (0, react_1.act)(() => {
+      result.current.search.onChange('query');
+    });
+    yield (0, react_1.waitFor)(() => {
+      (0, vitest_1.expect)(onSearch).toHaveBeenCalledWith({
+        search: 'query'
+      }, vitest_1.expect.any(AbortSignal));
+      (0, vitest_1.expect)(result.current.tree.current).toEqual([createParent('root-node', [createLeaf('child-node')])]);
+    });
+    (0, vitest_1.expect)(result.current.expandedNodes.current).toEqual([]);
+    (0, vitest_1.expect)(result.current.treeItemsRecord.current).toEqual({
+      'root-node': {
+        label: 'root-node'
+      },
+      'child-node': {
+        label: 'child-node'
+      }
+    });
+  }));
+});

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

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

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

@@ -0,0 +1,225 @@
+"use strict";
+
+var __awaiter = void 0 && (void 0).__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());
+  });
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const react_1 = require("@testing-library/react");
+const vitest_1 = require("vitest");
+const useTreeMultiSelection_1 = require("../useTreeMultiSelection");
+const createLeaf = id => ({
+  id,
+  title: id
+});
+const createParent = (id, nested) => ({
+  id,
+  title: id,
+  nested
+});
+(0, vitest_1.describe)('useTreeMultiSelection', () => {
+  (0, vitest_1.it)('should keep selected state uncontrolled by default', () => __awaiter(void 0, void 0, void 0, function* () {
+    const {
+      result
+    } = (0, react_1.renderHook)(() => (0, useTreeMultiSelection_1.useTreeMultiSelection)({
+      onDataLoad: vitest_1.vi.fn(() => __awaiter(void 0, void 0, void 0, function* () {
+        return {
+          preloadedChildren: [],
+          updatedTree: []
+        };
+      })),
+      onSelect: () => ({
+        added: ['a'],
+        removed: []
+      })
+    }));
+    (0, vitest_1.expect)(result.current.selected).toEqual([]);
+    yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+      yield result.current.onSelect(['a'], createLeaf('a'));
+    }));
+    (0, vitest_1.expect)(result.current.selected).toEqual(['a']);
+  }));
+  (0, vitest_1.it)('should call onChangeSelected when selection updates', () => __awaiter(void 0, void 0, void 0, function* () {
+    const onChangeSelected = vitest_1.vi.fn();
+    const {
+      result
+    } = (0, react_1.renderHook)(() => (0, useTreeMultiSelection_1.useTreeMultiSelection)({
+      onDataLoad: vitest_1.vi.fn(() => __awaiter(void 0, void 0, void 0, function* () {
+        return {
+          preloadedChildren: [],
+          updatedTree: []
+        };
+      })),
+      onSelect: () => ({
+        added: ['a'],
+        removed: []
+      }),
+      onChangeSelected
+    }));
+    yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+      yield result.current.onSelect(['a'], createLeaf('a'));
+    }));
+    (0, vitest_1.expect)(onChangeSelected).toHaveBeenCalledWith(['a']);
+  }));
+  (0, vitest_1.it)('should treat selected prop as controlled', () => __awaiter(void 0, void 0, void 0, function* () {
+    const onChangeSelected = vitest_1.vi.fn();
+    const {
+      result,
+      rerender
+    } = (0, react_1.renderHook)(_ref => {
+      let {
+        selected
+      } = _ref;
+      return (0, useTreeMultiSelection_1.useTreeMultiSelection)({
+        onDataLoad: vitest_1.vi.fn(() => __awaiter(void 0, void 0, void 0, function* () {
+          return {
+            preloadedChildren: [],
+            updatedTree: []
+          };
+        })),
+        onSelect: () => ({
+          added: ['b'],
+          removed: []
+        }),
+        selected,
+        onChangeSelected
+      });
+    }, {
+      initialProps: {
+        selected: ['a']
+      }
+    });
+    (0, vitest_1.expect)(result.current.selected).toEqual(['a']);
+    yield (0, react_1.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
+    (0, vitest_1.expect)(result.current.selected).toEqual(['a']);
+    (0, vitest_1.expect)(onChangeSelected).toHaveBeenCalledWith(['a', 'b']);
+    rerender({
+      selected: ['a', 'b']
+    });
+    (0, vitest_1.expect)(result.current.selected).toEqual(['a', 'b']);
+  }));
+  (0, vitest_1.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 = vitest_1.vi.fn(() => __awaiter(void 0, void 0, void 0, function* () {
+      return {
+        preloadedChildren,
+        updatedTree: [createParent('parent', preloadedChildren)]
+      };
+    }));
+    const onSelect = vitest_1.vi.fn(() => ({
+      added: ['parent', 'child-1', 'child-2'],
+      removed: []
+    }));
+    const {
+      result
+    } = (0, react_1.renderHook)(() => (0, useTreeMultiSelection_1.useTreeMultiSelection)({
+      onDataLoad,
+      onSelect
+    }));
+    yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+      yield result.current.onSelect(['parent'], node);
+    }));
+    (0, vitest_1.expect)(onDataLoad).toHaveBeenCalledWith(node);
+    (0, vitest_1.expect)(onSelect).toHaveBeenCalledWith({
+      selectedKeys: ['parent'],
+      node: createParent('parent', preloadedChildren),
+      isSelected: true
+    });
+    (0, vitest_1.expect)(result.current.selected.sort()).toEqual(['child-1', 'child-2', 'parent']);
+  }));
+  (0, vitest_1.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 = vitest_1.vi.fn(() => __awaiter(void 0, void 0, void 0, function* () {
+      return {
+        preloadedChildren: [],
+        updatedTree: []
+      };
+    }));
+    const onSelect = vitest_1.vi.fn(() => ({
+      added: ['parent'],
+      removed: []
+    }));
+    const {
+      result
+    } = (0, react_1.renderHook)(() => (0, useTreeMultiSelection_1.useTreeMultiSelection)({
+      onDataLoad,
+      onSelect
+    }));
+    yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+      yield result.current.onSelect(['parent'], node);
+    }));
+    (0, vitest_1.expect)(onDataLoad).not.toHaveBeenCalled();
+    (0, vitest_1.expect)(onSelect).toHaveBeenCalledWith({
+      selectedKeys: ['parent'],
+      node,
+      isSelected: true
+    });
+  }));
+  (0, vitest_1.it)('should add and remove ids from selection without duplicates', () => __awaiter(void 0, void 0, void 0, function* () {
+    const {
+      result
+    } = (0, react_1.renderHook)(() => (0, useTreeMultiSelection_1.useTreeMultiSelection)({
+      onDataLoad: vitest_1.vi.fn(() => __awaiter(void 0, void 0, void 0, function* () {
+        return {
+          preloadedChildren: [],
+          updatedTree: []
+        };
+      })),
+      onSelect: () => ({
+        added: ['a', 'a', 'b'],
+        removed: []
+      })
+    }));
+    yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+      yield result.current.onSelect(['a'], createLeaf('a'));
+    }));
+    (0, vitest_1.expect)(result.current.selected.sort()).toEqual(['a', 'b']);
+    const {
+      result: result2
+    } = (0, react_1.renderHook)(() => (0, useTreeMultiSelection_1.useTreeMultiSelection)({
+      onDataLoad: vitest_1.vi.fn(() => __awaiter(void 0, void 0, void 0, function* () {
+        return {
+          preloadedChildren: [],
+          updatedTree: []
+        };
+      })),
+      onSelect: () => ({
+        added: [],
+        removed: ['a']
+      }),
+      selected: ['a', 'b']
+    }));
+    yield (0, react_1.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+      yield result2.current.onSelect(['b'], createLeaf('a'));
+    }));
+  }));
+});

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

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

package/dist/cjs/hooks/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./useSearchableTree"), exports);
+__exportStar(require("./useTreeMultiSelection"), exports);

package/dist/cjs/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/cjs/hooks/useSearchableTree.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var __awaiter = void 0 && (void 0).__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());
+  });
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSearchableTree = useSearchableTree;
+const reactuse_1 = require("@siberiacancode/reactuse");
+const cancelable_promise_1 = require("cancelable-promise");
+const react_1 = require("react");
+const helpers_1 = require("../helpers");
+function useSearchableTree(_ref) {
+  let {
+    initTree,
+    onPreloadNode,
+    onPreloadNodes,
+    onSearch,
+    mapNodeToRecordItem
+  } = _ref;
+  const tree = (0, reactuse_1.useRefState)(initTree);
+  const treeItemsRecord = (0, reactuse_1.useRefState)({});
+  const expandedNodes = (0, reactuse_1.useRefState)([]);
+  const [search, setSearch] = (0, react_1.useState)('');
+  const debouncedSearch = (0, reactuse_1.useDebounceValue)(search, 500);
+  const [loading, setLoading] = (0, react_1.useState)(false);
+  const searchPromiseRef = (0, react_1.useRef)(null);
+  const searchAbortControllerRef = (0, react_1.useRef)(null);
+  const buildTreeItemsRecord = (0, react_1.useCallback)(nodes => {
+    const record = {};
+    (0, helpers_1.traverse)(nodes, node => {
+      record[node.id] = mapNodeToRecordItem(node);
+    });
+    return record;
+  }, [mapNodeToRecordItem]);
+  const onExpand = (0, react_1.useCallback)(nodes => {
+    expandedNodes.current = nodes;
+  }, [expandedNodes]);
+  const onDataLoad = (0, react_1.useCallback)(node => __awaiter(this, void 0, void 0, function* () {
+    const preloadedChildren = yield onPreloadNode(node);
+    const updatedTree = (0, helpers_1.setChildrenOfTreeNode)(tree.current, node.id, preloadedChildren);
+    tree.current = updatedTree;
+    const newTreeItemsRecord = Object.assign({}, treeItemsRecord.current);
+    (0, helpers_1.traverse)(preloadedChildren, child => {
+      newTreeItemsRecord[child.id] = mapNodeToRecordItem(child);
+    });
+    treeItemsRecord.current = newTreeItemsRecord;
+    return {
+      preloadedChildren,
+      updatedTree,
+      newTreeItemsRecord
+    };
+  }), [mapNodeToRecordItem, onPreloadNode, tree, treeItemsRecord]);
+  const handleSearch = (0, react_1.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 = (0, cancelable_promise_1.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 = (0, helpers_1.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 = (0, helpers_1.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]);
+  (0, reactuse_1.useDidUpdate)(() => {
+    handleSearch(debouncedSearch);
+  }, [debouncedSearch, handleSearch]);
+  (0, react_1.useEffect)(() => {
+    tree.current = initTree;
+    treeItemsRecord.current = buildTreeItemsRecord(initTree);
+  }, [buildTreeItemsRecord, initTree, tree, treeItemsRecord]);
+  (0, react_1.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/cjs/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 {};