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

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tree",
-  "version": "0.11.0",
+  "version": "0.11.1-preview-02fd9f01.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -12,9 +12,25 @@
   ],
   "description": "",
   "types": "./dist/esm/index.d.ts",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/esm/index.d.ts"
+      ],
+      "hooks": [
+        "./dist/esm/hooks/index.d.ts"
+      ]
+    }
+  },
   "exports": {
-    "import": "./dist/esm/index.js",
-    "require": "./dist/cjs/index.js"
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./hooks": {
+      "import": "./dist/esm/hooks/index.js",
+      "require": "./dist/cjs/hooks/index.js"
+    }
   },
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/tree",
   "repository": {
@@ -36,6 +52,7 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
+    "@siberiacancode/reactuse": "0.3.14",
     "@snack-uikit/button": "0.19.17",
     "@snack-uikit/icons": "0.27.7",
     "@snack-uikit/list": "0.32.17",
@@ -43,10 +60,11 @@
     "@snack-uikit/truncate-string": "0.7.11",
     "@snack-uikit/typography": "0.8.12",
     "@snack-uikit/utils": "4.0.1",
+    "cancelable-promise": "4.3.1",
     "classnames": "2.5.1",
     "queue-fifo": "0.2.6",
     "react-transition-state": "2.1.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "7b2e29016c5b6630c424b04ce28096adcd2a2d05"
+  "gitHead": "21fc47703dee986985b9c28cc94b94983ebfd4ef"
 }

package/src/helpers/__tests__/collectEmptyNestedNodesInExpanded.spec.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest';
+
+import type { TreeNodeProps } from '../../types';
+import { collectEmptyNestedNodesInExpanded } from '../collectEmptyNestedNodesInExpanded';
+
+const node = (id: string, nested?: TreeNodeProps[]) => ({
+  id,
+  title: id,
+  ...(nested !== undefined && { nested }),
+});
+
+describe('collectEmptyNestedNodesInExpanded', () => {
+  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 = collectEmptyNestedNodesInExpanded(tree, expandedIds);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toMatchObject({ id: 'a', nested: [] });
+  });
+
+  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 = collectEmptyNestedNodesInExpanded(tree, expandedIds);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].id).toBe('b');
+  });
+
+  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 = collectEmptyNestedNodesInExpanded(tree, expandedIds);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].id).toBe('b');
+  });
+
+  it('does not return nodes without nested property (leaf)', () => {
+    const tree = [node('leaf'), node('empty', [])];
+    const expandedIds = new Set(['leaf', 'empty']);
+    const result = collectEmptyNestedNodesInExpanded(tree, expandedIds);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].id).toBe('empty');
+  });
+
+  it('returns empty array for empty tree', () => {
+    const result = collectEmptyNestedNodesInExpanded([], new Set(['any']));
+    expect(result).toEqual([]);
+  });
+
+  it('returns empty array when expandedIds is empty', () => {
+    const tree = [node('a', []), node('b', [])];
+    const result = collectEmptyNestedNodesInExpanded(tree, new Set());
+
+    expect(result).toEqual([]);
+  });
+
+  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 = collectEmptyNestedNodesInExpanded(tree, expandedIds);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toMatchObject({ id: 'child', nested: [] });
+  });
+
+  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 = collectEmptyNestedNodesInExpanded(tree, expandedIds);
+
+    expect(result).toHaveLength(3);
+    expect(result.map(n => n.id).sort()).toEqual(['a', 'b1', 'b2']);
+  });
+
+  it('only includes node if both empty nested and expanded', () => {
+    const tree = [node('expanded', []), node('collapsed', [])];
+    const expandedIds = new Set(['expanded']);
+    const result = collectEmptyNestedNodesInExpanded(tree, expandedIds);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].id).toBe('expanded');
+  });
+});

package/src/helpers/__tests__/setChildrenOfTreeNode.spec.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest';
+
+import type { TreeNodeProps } from '../../types';
+import { setChildrenOfTreeNode } from '../setChildrenOfTreeNode';
+
+const node = (id: string, nested?: { id: string; title: string }[]) => ({
+  id,
+  title: id,
+  ...(nested !== undefined && { nested: nested.map(n => ({ ...n, title: n.id })) }),
+});
+
+describe('setChildrenOfTreeNode', () => {
+  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 = setChildrenOfTreeNode(tree, 'b', children);
+
+    expect(result).toHaveLength(2);
+    expect(result[0]).toMatchObject({ id: 'a', nested: [{ id: 'a1' }] });
+    expect(result[1]).toMatchObject({ id: 'b', nested: [{ id: 'new1' }, { id: 'new2' }] });
+  });
+
+  it('replaces nested for deeply nested node', () => {
+    const childWithNested = node('child');
+    (childWithNested as { nested: { id: string; title: string }[] }).nested = [{ id: 'grand', title: 'grand' }];
+    const tree = [node('root', [childWithNested])];
+    const children = [node('replacement')];
+    const result = setChildrenOfTreeNode(tree, 'child', children);
+
+    const root = result[0] as TreeNodeProps & { nested: (TreeNodeProps & { nested: TreeNodeProps[] })[] };
+    expect(root.nested).toHaveLength(1);
+    expect(root.nested[0]).toMatchObject({ id: 'child', nested: [{ id: 'replacement' }] });
+  });
+
+  it('returns cloned tree when node is not found', () => {
+    const tree = [node('a'), node('b')];
+    const result = setChildrenOfTreeNode(tree, 'missing', [node('x')]);
+
+    expect(result).toHaveLength(2);
+    expect(result[0]).toMatchObject({ id: 'a' });
+    expect(result[1]).toMatchObject({ id: 'b' });
+    expect(result).not.toBe(tree);
+  });
+
+  it('returns empty array for empty tree', () => {
+    const result = setChildrenOfTreeNode([], 'any', [node('x')]);
+    expect(result).toEqual([]);
+  });
+
+  it('sets children for target node that had no nested (leaf)', () => {
+    const tree = [node('leaf'), node('other')];
+    const children = [node('new1')];
+    const result = setChildrenOfTreeNode(tree, 'leaf', children);
+
+    expect(result[0]).toMatchObject({ id: 'leaf', nested: [{ id: 'new1' }] });
+    expect(result[1]).toMatchObject({ id: 'other' });
+  });
+
+  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 = setChildrenOfTreeNode(tree, 'second', children);
+
+    expect(result.map(n => n.id)).toEqual(['first', 'second', 'third']);
+    expect((result[1] as TreeNodeProps & { nested: TreeNodeProps[] }).nested).toHaveLength(2);
+    expect((result[1] as { nested: { id: string }[] }).nested.map(n => n.id)).toEqual(['new1', 'new2']);
+  });
+});

package/src/helpers/collectEmptyNestedNodesInExpanded.ts

@@ -0,0 +1,16 @@
+import { TreeNodeProps } from '../types';
+import { traverse } from './traverse';
+
+export function collectEmptyNestedNodesInExpanded<TTreeNode extends TreeNodeProps>(
+  nodes: TTreeNode[],
+  expandedIds: Set<string>,
+): TTreeNode[] {
+  const result: TTreeNode[] = [];
+  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/src/helpers/index.ts

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

package/src/helpers/setChildrenOfTreeNode.ts

@@ -0,0 +1,30 @@
+import { TreeNodeProps } from '../types';
+import { traverseWithTarget } from './traverse';
+
+export const setChildrenOfTreeNode = <TTreeNode extends TreeNodeProps>(
+  tree: TTreeNode[],
+  nodeId: string,
+  children: TTreeNode[],
+): TTreeNode[] => {
+  const result: TTreeNode[] = [];
+
+  traverseWithTarget(tree, result, (source, _depth, targetList) => {
+    const isTarget = source.id === nodeId;
+    const hasNested = Array.isArray(source.nested);
+
+    let newNested: TTreeNode[] | undefined;
+    if (isTarget) {
+      newNested = children;
+    } else if (hasNested) {
+      newNested = [];
+    }
+
+    const newNode = (newNested !== undefined ? { ...source, nested: newNested } : { ...source }) as TTreeNode;
+
+    targetList.push(newNode);
+
+    return !isTarget && hasNested && source.nested?.length ? newNested : undefined;
+  });
+
+  return result;
+};

package/src/helpers/sortTreeItemsByTitle.ts

@@ -3,8 +3,8 @@ import { extractTreeNodeTitle } from './extractTreeNodeTitle';
 
 export const sortTreeItemsByTitle = (items: ExtendedTreeNodeProps[]) =>
   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/src/helpers/traverse.ts

@@ -1,9 +1,15 @@
 import Queue from 'queue-fifo';
 
-import { TreeNodeProps } from '../';
+import { TreeNodeProps } from '../types';
 
 type NodeWithDepth<T extends TreeNodeProps> = { node: T; depth: number };
 
+type NodeWithDepthAndTarget<T extends TreeNodeProps> = {
+  node: T;
+  depth: number;
+  targetList: T[];
+};
+
 export const traverse = <T extends TreeNodeProps>(nodes: T[], callback: (node: T, depth: number) => void) => {
   const queue = new Queue<NodeWithDepth<T>>();
 
@@ -25,3 +31,34 @@ export const traverse = <T extends TreeNodeProps>(nodes: T[], callback: (node: T
     }
   }
 };
+
+/**
+ * BFS с указанием целевого списка для каждого узла.
+ * Очередь хранит (node, depth, targetList). Callback добавляет узел в targetList
+ * и возвращает массив для детей (или undefined, чтобы не обходить детей).
+ */
+export const traverseWithTarget = <T extends TreeNodeProps>(
+  nodes: T[],
+  rootTargetList: T[],
+  callback: (node: T, depth: number, targetList: T[]) => T[] | undefined,
+) => {
+  const queue = new Queue<NodeWithDepthAndTarget<T>>();
+
+  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 && node.nested?.length) {
+      for (const child of node.nested) {
+        queue.enqueue({ node: child as T, depth: depth + 1, targetList: childTargetList });
+      }
+    }
+  }
+};

package/src/hooks/__tests__/useSearchableTree.spec.ts

@@ -0,0 +1,203 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { type DependencyList, useEffect, useRef } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { SearchableTreeDataLoadResult, TreeNodeProps } from '../../types';
+import { SearchResult, useSearchableTree } from '../useSearchableTree';
+
+vi.mock('@siberiacancode/reactuse', () => ({
+  useDebounceValue: (value: string) => value,
+  useDidUpdate: (effect: () => void, deps: DependencyList) => {
+    const isFirstRenderRef = useRef(true);
+
+    useEffect(() => {
+      if (isFirstRenderRef.current) {
+        isFirstRenderRef.current = false;
+        return;
+      }
+
+      effect();
+    }, [deps, effect]);
+  },
+  useRefState: <TValue>(initialValue: TValue) => useRef<TValue>(initialValue),
+}));
+
+type TreeRecord = {
+  label: string;
+};
+
+const createLeaf = (id: string): TreeNodeProps => ({
+  id,
+  title: id,
+});
+
+const createParent = (id: string, nested: TreeNodeProps[]): TreeNodeProps => ({
+  id,
+  title: id,
+  nested,
+});
+
+const mapNodeToRecordItem = (node: TreeNodeProps): TreeRecord => ({
+  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<TreeRecord, TreeNodeProps>({
+        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<TreeRecord, TreeNodeProps>({
+        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', async () => {
+    const initTree = [createParent('root', [])];
+    const preloadedChildren = [createLeaf('child-1'), createLeaf('child-2')];
+    const onPreloadNode = vi.fn().mockResolvedValue(preloadedChildren);
+
+    const { result } = renderHook(() =>
+      useSearchableTree<TreeRecord, TreeNodeProps>({
+        initTree,
+        onPreloadNode,
+        onPreloadNodes: vi.fn(),
+        onSearch: vi.fn(),
+        mapNodeToRecordItem,
+      }),
+    );
+
+    let loadResult: SearchableTreeDataLoadResult<TreeNodeProps, TreeRecord> | undefined;
+
+    await act(async () => {
+      loadResult = await 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', async () => {
+    const searchedTree = [createParent('expandable-root', []), createLeaf('leaf')];
+    const onSearch = vi.fn(
+      async (): Promise<SearchResult<TreeNodeProps>> => ({
+        tree: searchedTree,
+        needPreloadNodes: ['expandable-root', 'external-root'],
+      }),
+    );
+    const onPreloadNodes = vi.fn(async (nodeIds: string[]) => ({
+      '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<TreeRecord, TreeNodeProps>({
+        initTree: [createParent('init-root', [])],
+        onPreloadNode: vi.fn(),
+        onPreloadNodes,
+        onSearch,
+        mapNodeToRecordItem,
+      }),
+    );
+
+    act(() => {
+      result.current.onExpand(['expandable-root']);
+      result.current.search.onChange('query');
+    });
+
+    await waitFor(() => {
+      expect(onSearch).toHaveBeenCalledWith(
+        { search: 'query', expandedNodes: ['expandable-root'] },
+        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', async () => {
+    const onSearch = vi.fn(async () => ({
+      tree: [createParent('root-node', [createLeaf('child-node')])],
+      needPreloadNodes: [],
+    }));
+
+    const { result } = renderHook(() =>
+      useSearchableTree<TreeRecord, TreeNodeProps>({
+        initTree: [createLeaf('initial')],
+        onPreloadNode: vi.fn(),
+        onPreloadNodes: vi.fn(),
+        onSearch,
+        mapNodeToRecordItem,
+      }),
+    );
+
+    act(() => {
+      result.current.search.onChange('query');
+    });
+
+    await waitFor(() => {
+      expect(onSearch).toHaveBeenCalledWith({ search: 'query', expandedNodes: [] }, 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' },
+    });
+  });
+});