@snack-uikit/tree 0.10.1 → 0.10.2-preview-13f87e77.0

package/README.md

@@ -108,6 +108,23 @@ function TreeAsyncLoadExample() {
 | selected | `string \| string[]` | - | Состояние для выбраных элементов: <br> - При <strong>selectionMode</strong>=`Multi` - принимает массив строк <br> - При <strong>selectionMode</strong>=`Single` - принимает строку |
 | onSelect | `((selectedKeys: string[], node: TreeNodeProps) => void) \| ((selectedKey: string, node: TreeNodeProps) => void)` | - | Колбэк при изменении выбраных элементов: <br> - При <strong>selectionMode</strong>=`Multi` - возвращает массив строк <br> - При <strong>selectionMode</strong>=`Single` - возвращает строку |
 | showToggle | `boolean` | - |  |
+## useTreeWithPreload
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| mapNodeToRecordItem* | `(node: TTreeNode) => TRecordValue` | - |  |
+| onSearch* | `(params: SearchParams) => Promise<SearchResult<TTreeNode>>` | - |  |
+| onPreloadNodes* | `(nodes: string[]) => Promise<Record<string, TTreeNode[]>>` | - |  |
+| onPreloadNode* | `(node: TreeNodeProps) => Promise<TTreeNode[]>` | - |  |
+| initTree* | `TTreeNode[]` | - |  |
+## useTreeMultiSelection
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| onSelect* | `SelectHandler` | - |  |
+| onDataLoad* | `PreloadNodeHandler<TTreeNode>` | - |  |
+| selected | `string[]` | - |  |
+| onChangeSelected | `(newSelected: string[]) => void` | - |  |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/cjs/helpers/__tests__/collectEmptyNestedNodesInExpanded.spec.d.ts

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

package/dist/cjs/helpers/__tests__/collectEmptyNestedNodesInExpanded.spec.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const vitest_1 = require("vitest");
+const collectEmptyNestedNodesInExpanded_1 = require("../collectEmptyNestedNodesInExpanded");
+const node = (id, nested) => Object.assign({
+  id,
+  title: id
+}, nested !== undefined && {
+  nested
+});
+(0, vitest_1.describe)('collectEmptyNestedNodesInExpanded', () => {
+  (0, vitest_1.it)('returns nodes with empty nested array that are in expandedIds', () => {
+    const tree = [node('a', []), node('b', [node('b1')])];
+    const expandedIds = new Set(['a']);
+    const result = (0, collectEmptyNestedNodesInExpanded_1.collectEmptyNestedNodesInExpanded)(tree, expandedIds);
+    (0, vitest_1.expect)(result).toHaveLength(1);
+    (0, vitest_1.expect)(result[0]).toMatchObject({
+      id: 'a',
+      nested: []
+    });
+  });
+  (0, vitest_1.it)('does not return nodes with empty nested if not in expandedIds', () => {
+    const tree = [node('a', []), node('b', [])];
+    const expandedIds = new Set(['b']);
+    const result = (0, collectEmptyNestedNodesInExpanded_1.collectEmptyNestedNodesInExpanded)(tree, expandedIds);
+    (0, vitest_1.expect)(result).toHaveLength(1);
+    (0, vitest_1.expect)(result[0].id).toBe('b');
+  });
+  (0, vitest_1.it)('does not return nodes that have non-empty nested', () => {
+    const tree = [node('a', [node('a1')]), node('b', [])];
+    const expandedIds = new Set(['a', 'b']);
+    const result = (0, collectEmptyNestedNodesInExpanded_1.collectEmptyNestedNodesInExpanded)(tree, expandedIds);
+    (0, vitest_1.expect)(result).toHaveLength(1);
+    (0, vitest_1.expect)(result[0].id).toBe('b');
+  });
+  (0, vitest_1.it)('does not return nodes without nested property (leaf)', () => {
+    const tree = [node('leaf'), node('empty', [])];
+    const expandedIds = new Set(['leaf', 'empty']);
+    const result = (0, collectEmptyNestedNodesInExpanded_1.collectEmptyNestedNodesInExpanded)(tree, expandedIds);
+    (0, vitest_1.expect)(result).toHaveLength(1);
+    (0, vitest_1.expect)(result[0].id).toBe('empty');
+  });
+  (0, vitest_1.it)('returns empty array for empty tree', () => {
+    const result = (0, collectEmptyNestedNodesInExpanded_1.collectEmptyNestedNodesInExpanded)([], new Set(['any']));
+    (0, vitest_1.expect)(result).toEqual([]);
+  });
+  (0, vitest_1.it)('returns empty array when expandedIds is empty', () => {
+    const tree = [node('a', []), node('b', [])];
+    const result = (0, collectEmptyNestedNodesInExpanded_1.collectEmptyNestedNodesInExpanded)(tree, new Set());
+    (0, vitest_1.expect)(result).toEqual([]);
+  });
+  (0, vitest_1.it)('collects from deeply nested nodes', () => {
+    const child = node('child', []);
+    const tree = [node('root', [node('mid', [child])])];
+    const expandedIds = new Set(['root', 'mid', 'child']);
+    const result = (0, collectEmptyNestedNodesInExpanded_1.collectEmptyNestedNodesInExpanded)(tree, expandedIds);
+    (0, vitest_1.expect)(result).toHaveLength(1);
+    (0, vitest_1.expect)(result[0]).toMatchObject({
+      id: 'child',
+      nested: []
+    });
+  });
+  (0, vitest_1.it)('returns all matching nodes from different levels', () => {
+    const tree = [node('a', []), node('b', [node('b1', []), node('b2', [])])];
+    const expandedIds = new Set(['a', 'b', 'b1', 'b2']);
+    const result = (0, collectEmptyNestedNodesInExpanded_1.collectEmptyNestedNodesInExpanded)(tree, expandedIds);
+    (0, vitest_1.expect)(result).toHaveLength(3);
+    (0, vitest_1.expect)(result.map(n => n.id).sort()).toEqual(['a', 'b1', 'b2']);
+  });
+  (0, vitest_1.it)('only includes node if both empty nested and expanded', () => {
+    const tree = [node('expanded', []), node('collapsed', [])];
+    const expandedIds = new Set(['expanded']);
+    const result = (0, collectEmptyNestedNodesInExpanded_1.collectEmptyNestedNodesInExpanded)(tree, expandedIds);
+    (0, vitest_1.expect)(result).toHaveLength(1);
+    (0, vitest_1.expect)(result[0].id).toBe('expanded');
+  });
+});

package/dist/cjs/helpers/__tests__/setChildrenOfTreeNode.spec.d.ts

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

package/dist/cjs/helpers/__tests__/setChildrenOfTreeNode.spec.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const vitest_1 = require("vitest");
+const setChildrenOfTreeNode_1 = require("../setChildrenOfTreeNode");
+const node = (id, nested) => Object.assign({
+  id,
+  title: id
+}, nested !== undefined && {
+  nested: nested.map(n => Object.assign(Object.assign({}, n), {
+    title: n.id
+  }))
+});
+(0, vitest_1.describe)('setChildrenOfTreeNode', () => {
+  (0, vitest_1.it)('replaces nested for root-level node', () => {
+    const tree = [node('a', [{
+      id: 'a1',
+      title: 'a1'
+    }]), node('b', [{
+      id: 'b1',
+      title: 'b1'
+    }])];
+    const children = [node('new1'), node('new2')];
+    const result = (0, setChildrenOfTreeNode_1.setChildrenOfTreeNode)(tree, 'b', children);
+    (0, vitest_1.expect)(result).toHaveLength(2);
+    (0, vitest_1.expect)(result[0]).toMatchObject({
+      id: 'a',
+      nested: [{
+        id: 'a1'
+      }]
+    });
+    (0, vitest_1.expect)(result[1]).toMatchObject({
+      id: 'b',
+      nested: [{
+        id: 'new1'
+      }, {
+        id: 'new2'
+      }]
+    });
+  });
+  (0, vitest_1.it)('replaces nested for deeply nested node', () => {
+    const childWithNested = node('child');
+    childWithNested.nested = [{
+      id: 'grand',
+      title: 'grand'
+    }];
+    const tree = [node('root', [childWithNested])];
+    const children = [node('replacement')];
+    const result = (0, setChildrenOfTreeNode_1.setChildrenOfTreeNode)(tree, 'child', children);
+    const root = result[0];
+    (0, vitest_1.expect)(root.nested).toHaveLength(1);
+    (0, vitest_1.expect)(root.nested[0]).toMatchObject({
+      id: 'child',
+      nested: [{
+        id: 'replacement'
+      }]
+    });
+  });
+  (0, vitest_1.it)('returns cloned tree when node is not found', () => {
+    const tree = [node('a'), node('b')];
+    const result = (0, setChildrenOfTreeNode_1.setChildrenOfTreeNode)(tree, 'missing', [node('x')]);
+    (0, vitest_1.expect)(result).toHaveLength(2);
+    (0, vitest_1.expect)(result[0]).toMatchObject({
+      id: 'a'
+    });
+    (0, vitest_1.expect)(result[1]).toMatchObject({
+      id: 'b'
+    });
+    (0, vitest_1.expect)(result).not.toBe(tree);
+  });
+  (0, vitest_1.it)('returns empty array for empty tree', () => {
+    const result = (0, setChildrenOfTreeNode_1.setChildrenOfTreeNode)([], 'any', [node('x')]);
+    (0, vitest_1.expect)(result).toEqual([]);
+  });
+  (0, vitest_1.it)('sets children for target node that had no nested (leaf)', () => {
+    const tree = [node('leaf'), node('other')];
+    const children = [node('new1')];
+    const result = (0, setChildrenOfTreeNode_1.setChildrenOfTreeNode)(tree, 'leaf', children);
+    (0, vitest_1.expect)(result[0]).toMatchObject({
+      id: 'leaf',
+      nested: [{
+        id: 'new1'
+      }]
+    });
+    (0, vitest_1.expect)(result[1]).toMatchObject({
+      id: 'other'
+    });
+  });
+  (0, vitest_1.it)('preserves order of root nodes when target is second', () => {
+    const tree = [node('first'), node('second', [{
+      id: 's1',
+      title: 's1'
+    }]), node('third')];
+    const children = [node('new1'), node('new2')];
+    const result = (0, setChildrenOfTreeNode_1.setChildrenOfTreeNode)(tree, 'second', children);
+    (0, vitest_1.expect)(result.map(n => n.id)).toEqual(['first', 'second', 'third']);
+    (0, vitest_1.expect)(result[1].nested).toHaveLength(2);
+    (0, vitest_1.expect)(result[1].nested.map(n => n.id)).toEqual(['new1', 'new2']);
+  });
+});

package/dist/cjs/helpers/collectEmptyNestedNodesInExpanded.d.ts

@@ -0,0 +1,2 @@
+import { TreeNodeProps } from '../types';
+export declare function collectEmptyNestedNodesInExpanded<TTreeNode extends TreeNodeProps>(nodes: TTreeNode[], expandedIds: Set<string>): TTreeNode[];

package/dist/cjs/helpers/collectEmptyNestedNodesInExpanded.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectEmptyNestedNodesInExpanded = collectEmptyNestedNodesInExpanded;
+const traverse_1 = require("./traverse");
+function collectEmptyNestedNodesInExpanded(nodes, expandedIds) {
+  const result = [];
+  (0, traverse_1.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/cjs/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/cjs/helpers/index.js

@@ -29,4 +29,6 @@ __exportStar(require("./getSearchedTreeItems"), exports);
 __exportStar(require("./getSearchedTreeNodeById"), exports);
 __exportStar(require("./lookupTreeForSelectedNodes"), exports);
 __exportStar(require("./sortTreeItemsByTitle"), exports);
-__exportStar(require("./traverse"), exports);
+__exportStar(require("./traverse"), exports);
+__exportStar(require("./setChildrenOfTreeNode"), exports);
+__exportStar(require("./collectEmptyNestedNodesInExpanded"), exports);

package/dist/cjs/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/cjs/helpers/setChildrenOfTreeNode.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setChildrenOfTreeNode = void 0;
+const traverse_1 = require("./traverse");
+const setChildrenOfTreeNode = (tree, nodeId, children) => {
+  const result = [];
+  (0, traverse_1.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;
+};
+exports.setChildrenOfTreeNode = setChildrenOfTreeNode;

package/dist/cjs/helpers/sortTreeItemsByTitle.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.sortTreeItemsByTitle = void 0;
 const extractTreeNodeTitle_1 = require("./extractTreeNodeTitle");
 const sortTreeItemsByTitle = items => items === null || items === void 0 ? void 0 : items.toSorted((itemA, itemB) => {
-  const valueA = (0, extractTreeNodeTitle_1.extractTreeNodeTitle)(itemA);
-  const valueB = (0, extractTreeNodeTitle_1.extractTreeNodeTitle)(itemB);
+  const valueA = (0, extractTreeNodeTitle_1.extractTreeNodeTitle)(itemA).toLowerCase();
+  const valueB = (0, extractTreeNodeTitle_1.extractTreeNodeTitle)(itemB).toLowerCase();
   return valueA.localeCompare(valueB);
 });
 exports.sortTreeItemsByTitle = sortTreeItemsByTitle;

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

@@ -1,2 +1,8 @@
 import { TreeNodeProps } from '../';
 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/cjs/helpers/traverse.js

@@ -8,7 +8,7 @@ var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.traverse = void 0;
+exports.traverseWithTarget = exports.traverse = void 0;
 const queue_fifo_1 = __importDefault(require("queue-fifo"));
 const traverse = (nodes, callback) => {
   var _a;
@@ -37,4 +37,40 @@ const traverse = (nodes, callback) => {
     }
   }
 };
-exports.traverse = traverse;
+exports.traverse = traverse;
+/**
+ * BFS с указанием целевого списка для каждого узла.
+ * Очередь хранит (node, depth, targetList). Callback добавляет узел в targetList
+ * и возвращает массив для детей (или undefined, чтобы не обходить детей).
+ */
+const traverseWithTarget = (nodes, rootTargetList, callback) => {
+  var _a;
+  const queue = new queue_fifo_1.default();
+  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
+        });
+      }
+    }
+  }
+};
+exports.traverseWithTarget = traverseWithTarget;

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

@@ -0,0 +1,2 @@
+export * from './useTreeWithPreload';
+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("./useTreeWithPreload"), exports);
+__exportStar(require("./useTreeMultiSelection"), exports);

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 {};

package/dist/cjs/hooks/useTreeMultiSelection.js

@@ -0,0 +1,82 @@
+"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.useTreeMultiSelection = useTreeMultiSelection;
+const react_1 = require("react");
+const utils_1 = require("@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);
+};
+function useTreeMultiSelection(_ref) {
+  let {
+    onDataLoad,
+    onSelect: onSelectProp,
+    selected,
+    onChangeSelected
+  } = _ref;
+  const [selectedIds = [], setSelectedIds] = (0, utils_1.useValueControl)({
+    value: selected,
+    defaultValue: [],
+    onChange: onChangeSelected
+  });
+  const onSelect = (0, react_1.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/cjs/hooks/useTreeWithPreload.d.ts

@@ -0,0 +1,33 @@
+import { TreeNodeProps } from '../types';
+export type SearchResult<TTreeNode extends TreeNodeProps> = {
+    tree: TTreeNode[];
+    needPreloadNodes: string[];
+};
+export type SearchParams = {
+    search: string;
+    expandedNodes: string[];
+};
+type UseTreeWithPreloadParams<TRecordValue, TTreeNode extends TreeNodeProps> = {
+    initTree: TTreeNode[];
+    onPreloadNode: (node: TreeNodeProps) => Promise<TTreeNode[]>;
+    onPreloadNodes: (nodes: string[]) => Promise<Record<string, TTreeNode[]>>;
+    onSearch: (params: SearchParams) => Promise<SearchResult<TTreeNode>>;
+    mapNodeToRecordItem: (node: TTreeNode) => TRecordValue;
+};
+export declare function useTreeWithPreload<TRecordValue, TTreeNode extends TreeNodeProps>({ initTree, onPreloadNode, onPreloadNodes, onSearch, mapNodeToRecordItem, }: UseTreeWithPreloadParams<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<{
+        preloadedChildren: TTreeNode[];
+        updatedTree: TTreeNode[];
+        newTreeItemsRecord: Record<string, TRecordValue>;
+    }>;
+};
+export {};

package/dist/cjs/hooks/useTreeWithPreload.js

@@ -0,0 +1,138 @@
+"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.useTreeWithPreload = useTreeWithPreload;
+const reactuse_1 = require("@siberiacancode/reactuse");
+const cancelable_promise_1 = require("cancelable-promise");
+const react_1 = require("react");
+const helpers_1 = require("../helpers");
+function useTreeWithPreload(_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 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;
+    (_a = searchPromiseRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
+    setLoading(true);
+    const searchPromise = (0, cancelable_promise_1.cancelable)(onSearch({
+      search: searchQuery,
+      expandedNodes: expandedNodes.current
+    }));
+    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);
+        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;
+      }
+    }
+  }), [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]);
+  return {
+    tree,
+    expandedNodes,
+    loading,
+    treeItemsRecord,
+    search: {
+      value: search,
+      onChange: setSearch
+    },
+    onExpand,
+    onDataLoad
+  };
+}

package/dist/cjs/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export type { OnNodeClick, TreeNodeId, TreeNodeProps } from './types';
 export { setNonce } from '@snack-uikit/list';
+export * from './hooks';