@snack-uikit/tree 0.10.2-preview-013112d8.0 → 0.10.2

package/dist/esm/hooks/useTreeMultiSelection.js

@@ -1,43 +0,0 @@
-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/src/helpers/__tests__/collectEmptyNestedNodesInExpanded.spec.ts

@@ -1,88 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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/setChildrenOfTreeNode.ts

@@ -1,30 +0,0 @@
-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/hooks/index.ts

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

package/src/hooks/useSearchableTree.ts

@@ -1,150 +0,0 @@
-import { useDebounceValue, useDidUpdate, useRefState } from '@siberiacancode/reactuse';
-import { cancelable, CancelablePromise } from 'cancelable-promise';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { collectEmptyNestedNodesInExpanded, setChildrenOfTreeNode, traverse } from '../helpers';
-import { TreeNodeProps } from '../types';
-
-export type SearchResult<TTreeNode extends TreeNodeProps> = {
-  tree: TTreeNode[];
-  needPreloadNodes: string[];
-};
-
-export type SearchParams = {
-  search: string;
-  expandedNodes: string[];
-};
-
-type UseSearchableTreeParams<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 function useSearchableTree<TRecordValue, TTreeNode extends TreeNodeProps>({
-  initTree,
-  onPreloadNode,
-  onPreloadNodes,
-  onSearch,
-  mapNodeToRecordItem,
-}: UseSearchableTreeParams<TRecordValue, TTreeNode>) {
-  const tree = useRefState<TTreeNode[]>(initTree);
-  const treeItemsRecord = useRefState<Record<string, TRecordValue>>({});
-
-  const expandedNodes = useRefState<string[]>([]);
-
-  const [search, setSearch] = useState<string>('');
-  const debouncedSearch = useDebounceValue(search, 500);
-
-  const [loading, setLoading] = useState(false);
-  const searchPromiseRef = useRef<CancelablePromise<SearchResult<TTreeNode>> | null>(null);
-
-  const buildTreeItemsRecord = useCallback(
-    (nodes: TTreeNode[]): Record<string, TRecordValue> => {
-      const record: Record<string, TRecordValue> = {};
-
-      traverse<TTreeNode>(nodes, node => {
-        record[node.id] = mapNodeToRecordItem(node);
-      });
-
-      return record;
-    },
-    [mapNodeToRecordItem],
-  );
-
-  const onExpand = useCallback(
-    (nodes: string[]) => {
-      expandedNodes.current = nodes;
-    },
-    [expandedNodes],
-  );
-
-  const onDataLoad = useCallback(
-    async (node: TreeNodeProps) => {
-      const preloadedChildren = await onPreloadNode(node);
-      const updatedTree = setChildrenOfTreeNode(tree.current, node.id, preloadedChildren);
-      tree.current = updatedTree;
-
-      const newTreeItemsRecord: Record<string, TRecordValue> = { ...treeItemsRecord.current };
-      traverse<TTreeNode>(preloadedChildren, child => {
-        newTreeItemsRecord[child.id] = mapNodeToRecordItem(child);
-      });
-      treeItemsRecord.current = newTreeItemsRecord;
-
-      return { preloadedChildren, updatedTree, newTreeItemsRecord };
-    },
-    [mapNodeToRecordItem, onPreloadNode, tree, treeItemsRecord],
-  );
-
-  const handleSearch = useCallback(
-    async (searchQuery: string) => {
-      searchPromiseRef.current?.cancel();
-
-      setLoading(true);
-      const searchPromise = cancelable(onSearch({ search: searchQuery, expandedNodes: expandedNodes.current }));
-      searchPromiseRef.current = searchPromise;
-
-      try {
-        const { tree: searchedTree, needPreloadNodes } = await 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 = await onPreloadNodes(collectedNodesForPreload);
-
-          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;
-        }
-      }
-    },
-    [buildTreeItemsRecord, expandedNodes, onPreloadNodes, onSearch, tree, treeItemsRecord],
-  );
-
-  useDidUpdate(() => {
-    handleSearch(debouncedSearch);
-  }, [debouncedSearch, handleSearch]);
-
-  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/src/hooks/useTreeMultiSelection.ts

@@ -1,61 +0,0 @@
-import { useCallback } from 'react';
-
-import { useValueControl } from '@snack-uikit/utils';
-
-import { PreloadNodeHandler, SelectHandler, TreeNodeProps } from '../types';
-
-type UseTreeMultiSelectionParams<TTreeNode extends TreeNodeProps> = {
-  onDataLoad: PreloadNodeHandler<TTreeNode>;
-  onSelect: SelectHandler;
-  selected?: string[];
-  onChangeSelected?: (newSelected: string[]) => void;
-};
-
-const getNewSelectedIds = (selectedIds: string[], added: string[], removed: string[]): string[] => {
-  const result = new Set(selectedIds);
-
-  added.forEach(id => {
-    result.add(id);
-  });
-
-  removed.forEach(id => {
-    result.delete(id);
-  });
-
-  return Array.from(result);
-};
-
-export function useTreeMultiSelection<TTreeNode extends TreeNodeProps>({
-  onDataLoad,
-  onSelect: onSelectProp,
-  selected,
-  onChangeSelected,
-}: UseTreeMultiSelectionParams<TTreeNode>) {
-  const [selectedIds = [], setSelectedIds] = useValueControl<string[]>({
-    value: selected,
-    defaultValue: [],
-    onChange: onChangeSelected,
-  });
-
-  const onSelect = useCallback(
-    async (selectedKeys: string[], node: TreeNodeProps) => {
-      const isSelected = selectedKeys.includes(node.id);
-      const clonedNode = structuredClone(node);
-
-      if (node.nested && !node.nested.length) {
-        const { preloadedChildren } = await onDataLoad(node as TTreeNode);
-        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,
-  };
-}