@snack-uikit/tree 0.9.37 → 0.10.0

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

@@ -0,0 +1,8 @@
+export * from './checkNestedNodesSelection';
+export * from './collectIds';
+export * from './findAllExpandedChildNodeIds';
+export * from './getSearchedTreeItems';
+export * from './getSearchedTreeNodeById';
+export * from './lookupTreeForSelectedNodes';
+export * from './sortTreeItemsByTitle';
+export * from './traverse';

package/dist/esm/helpers/index.js

@@ -0,0 +1,8 @@
+export * from './checkNestedNodesSelection';
+export * from './collectIds';
+export * from './findAllExpandedChildNodeIds';
+export * from './getSearchedTreeItems';
+export * from './getSearchedTreeNodeById';
+export * from './lookupTreeForSelectedNodes';
+export * from './sortTreeItemsByTitle';
+export * from './traverse';

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

@@ -0,0 +1,6 @@
+import { ParentNode, TreeNodeId, TreeNodeProps } from '../types';
+export declare function lookupTreeForSelectedNodes({ node, selectedNodes, parentNode, }: {
+    node: Pick<TreeNodeProps, 'id' | 'nested' | 'disabled'>;
+    selectedNodes: TreeNodeId[];
+    parentNode?: ParentNode;
+}): string[];

package/dist/esm/{helpers.js → helpers/lookupTreeForSelectedNodes.js}

@@ -1,41 +1,5 @@
-function findAllChildNodeIds(nodes) {
-    var _a;
-    const stack = [...nodes];
-    const ids = [];
-    let node;
-    while ((node = stack.pop())) {
-        if (!node.disabled) {
-            ids.push(node.id);
-            if ((_a = node.nested) === null || _a === void 0 ? void 0 : _a.length) {
-                stack.push(...node.nested);
-            }
-        }
-    }
-    return ids;
-}
-export function checkNestedNodesSelection(nodes, selectedKeys) {
-    const allIds = findAllChildNodeIds(nodes);
-    const selected = allIds.filter(id => selectedKeys.includes(id));
-    const someSelected = selected.length > 0;
-    const allSelected = someSelected && allIds.length === selected.length;
-    return {
-        someSelected: !allSelected && someSelected,
-        allSelected,
-    };
-}
-export function findAllExpandedChildNodeIds(nodes, expandedNodes) {
-    var _a;
-    const stack = [...nodes];
-    const ids = [];
-    let node;
-    while ((node = stack.shift())) {
-        ids.push(node.id);
-        if (((_a = node.nested) === null || _a === void 0 ? void 0 : _a.length) && expandedNodes.includes(node.id)) {
-            stack.unshift(...node.nested);
-        }
-    }
-    return ids;
-}
+import { checkNestedNodesSelection } from './checkNestedNodesSelection';
+import { findAllChildNodeIds } from './findAllChildNodeIds';
 export function lookupTreeForSelectedNodes({ node, selectedNodes, parentNode, }) {
     var _a;
     const { nested } = node;

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

@@ -0,0 +1,2 @@
+import { ExtendedTreeNodeProps } from '../types';
+export declare const sortTreeItemsByTitle: (items: ExtendedTreeNodeProps[]) => ExtendedTreeNodeProps[];

package/dist/esm/helpers/sortTreeItemsByTitle.js

@@ -0,0 +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);
+    return valueA.localeCompare(valueB);
+});

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

@@ -0,0 +1,2 @@
+import { TreeNodeProps } from '../';
+export declare const traverse: <T extends TreeNodeProps>(nodes: T[], callback: (node: T, depth: number) => void) => void;

package/dist/esm/helpers/traverse.js

@@ -0,0 +1,19 @@
+import Queue from 'queue-fifo';
+export const traverse = (nodes, callback) => {
+    var _a;
+    const queue = new Queue();
+    for (const node of nodes) {
+        queue.enqueue({ node, depth: 0 });
+    }
+    while (!queue.isEmpty()) {
+        const nodeWithDepth = queue.dequeue();
+        if (!nodeWithDepth) {
+            continue;
+        }
+        const { node, depth } = nodeWithDepth;
+        callback(node, depth);
+        for (const child of (_a = node.nested) !== null && _a !== void 0 ? _a : []) {
+            queue.enqueue({ node: child, depth: depth + 1 });
+        }
+    }
+};

package/dist/esm/types.d.ts

@@ -100,3 +100,6 @@ export type TreeMultiSelect = Omit<TreeCommonProps, 'selected'> & {
     onSelect?(selectedKeys: TreeNodeId[], node: TreeNodeProps): void;
 };
 export type TreeBaseProps = TreeView | TreeMultiSelect | TreeSingleSelect;
+export type ExtendedTreeNodeProps = TreeNodeProps & {
+    getTitle?(): void;
+};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tree",
-  "version": "0.9.37",
+  "version": "0.10.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -44,8 +44,9 @@
     "@snack-uikit/typography": "0.8.12",
     "@snack-uikit/utils": "4.0.1",
     "classnames": "2.5.1",
+    "queue-fifo": "0.2.6",
     "react-transition-state": "2.1.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "0dbf2d0248621db41f5f53a7e4df55338d6ff4bd"
+  "gitHead": "afb2d2dbb5fdeedfed3e1056b6fd2fc197f42ab0"
 }

package/src/helperComponents/TreeNode/TreeNode.tsx

@@ -3,6 +3,7 @@ import {
   FocusEvent,
   forwardRef,
   KeyboardEventHandler,
+  MouseEvent,
   MouseEventHandler,
   useEffect,
   useMemo,
@@ -128,7 +129,7 @@ export const TreeNode = forwardRef<HTMLDivElement, TreeNodeComponentProps>(
       );
     };
 
-    const handleAnchorClick = (e: React.MouseEvent<Element>) => {
+    const handleAnchorClick = (e: MouseEvent<Element>) => {
       e.stopPropagation();
       if (e?.metaKey || e?.ctrlKey || e?.button === 1) {
         return;

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

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+
+import { collectIds } from '../collectIds';
+import { tree } from './constants';
+
+describe('collect tree ids', () => {
+  it('find all ids', () => {
+    const expected: string[] = [
+      'customer 1',
+      'customer 2',
+      'same_hierarchy customer',
+      'department 1.1',
+      'department 1.2',
+      'department 2.1',
+      'same_hierarchy department',
+      'project 1.1.1',
+      'project 1.1.2',
+      'same_hierarchy project',
+    ];
+
+    expect(collectIds(tree)).toEqual(expected);
+  });
+});

package/src/helpers/__tests__/constants.ts

@@ -0,0 +1,54 @@
+import { TreeNodeProps } from '../../types';
+
+export const tree: TreeNodeProps[] = [
+  {
+    id: 'customer 1',
+    title: 'customer 1',
+    nested: [
+      {
+        id: 'department 1.1',
+        title: 'department 1.1',
+        nested: [
+          {
+            id: 'project 1.1.1',
+            title: 'project 1.1.1',
+          },
+          {
+            id: 'project 1.1.2',
+            title: 'project 1.1.2',
+          },
+        ],
+      },
+      {
+        id: 'department 1.2',
+        title: 'department 1.2',
+      },
+    ],
+  },
+  {
+    id: 'customer 2',
+    title: 'customer 2',
+    nested: [
+      {
+        id: 'department 2.1',
+        title: 'department 2.1',
+      },
+    ],
+  },
+  {
+    id: 'same_hierarchy customer',
+    title: 'same_hierarchy customer',
+    nested: [
+      {
+        id: 'same_hierarchy department',
+        title: 'same_hierarchy department',
+        nested: [
+          {
+            id: 'same_hierarchy project',
+            title: 'same_hierarchy project',
+          },
+        ],
+      },
+    ],
+  },
+];

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

@@ -0,0 +1,191 @@
+import { describe, expect, it } from 'vitest';
+
+import type { TreeNodeProps } from '../../types';
+import { getSearchedTreeItems } from '../getSearchedTreeItems';
+import { tree } from './constants';
+
+describe('search tree items', () => {
+  it('find items if 1 project is matched', () => {
+    const expected: TreeNodeProps[] = [
+      {
+        id: 'customer 1',
+        title: 'customer 1',
+        nested: [
+          {
+            id: 'department 1.1',
+            title: 'department 1.1',
+            nested: [
+              {
+                id: 'project 1.1.1',
+                title: 'project 1.1.1',
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    expect(getSearchedTreeItems({ tree, searchOptions: { query: 'project 1.1.1' } })).toEqual(expected);
+  });
+
+  it('find items if 2 projects are matched', () => {
+    const expected: TreeNodeProps[] = [
+      {
+        id: 'customer 1',
+        title: 'customer 1',
+        nested: [
+          {
+            id: 'department 1.1',
+            title: 'department 1.1',
+            nested: [
+              {
+                id: 'project 1.1.1',
+                title: 'project 1.1.1',
+              },
+              {
+                id: 'project 1.1.2',
+                title: 'project 1.1.2',
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    expect(getSearchedTreeItems({ tree, searchOptions: { query: 'project 1.1' } })).toEqual(expected);
+  });
+
+  it('find items if 1 department is matched', () => {
+    const expected: TreeNodeProps[] = [
+      {
+        id: 'customer 1',
+        title: 'customer 1',
+        nested: [
+          {
+            id: 'department 1.1',
+            title: 'department 1.1',
+          },
+        ],
+      },
+    ];
+
+    expect(getSearchedTreeItems({ tree, searchOptions: { query: 'department 1.1' } })).toEqual(expected);
+  });
+
+  it('find items if 2 departments are matched', () => {
+    const expected: TreeNodeProps[] = [
+      {
+        id: 'customer 1',
+        title: 'customer 1',
+        nested: [
+          {
+            id: 'department 1.1',
+            title: 'department 1.1',
+          },
+          {
+            id: 'department 1.2',
+            title: 'department 1.2',
+          },
+        ],
+      },
+    ];
+
+    expect(getSearchedTreeItems({ tree, searchOptions: { query: 'department 1.' } })).toEqual(expected);
+  });
+
+  it('find items if 1 customer is matched', () => {
+    const expected: TreeNodeProps[] = [
+      {
+        id: 'customer 1',
+        title: 'customer 1',
+      },
+    ];
+
+    expect(getSearchedTreeItems({ tree, searchOptions: { query: 'customer 1' } })).toEqual(expected);
+  });
+
+  it('find items if not one items are matched', () => {
+    const expected: TreeNodeProps[] = [];
+
+    expect(getSearchedTreeItems({ tree, searchOptions: { query: 'test' } })).toEqual(expected);
+  });
+
+  it('find items if empty query', () => {
+    expect(getSearchedTreeItems({ tree, searchOptions: { query: '' } })).toEqual(tree);
+  });
+
+  it('find items if empty searchOptions', () => {
+    expect(getSearchedTreeItems({ tree })).toEqual(tree);
+  });
+
+  it('find matches in the same hierarchy', () => {
+    const expected: TreeNodeProps[] = [
+      {
+        id: 'same_hierarchy customer',
+        title: 'same_hierarchy customer',
+        nested: [
+          {
+            id: 'same_hierarchy department',
+            title: 'same_hierarchy department',
+            nested: [
+              {
+                id: 'same_hierarchy project',
+                title: 'same_hierarchy project',
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    expect(getSearchedTreeItems({ tree, searchOptions: { query: 'same_hierarchy' } })).toEqual(expected);
+  });
+
+  it('find all items from customer 2', () => {
+    const expected: TreeNodeProps[] = [
+      {
+        id: 'customer 2',
+        title: 'customer 2',
+        nested: [
+          {
+            id: 'department 2.1',
+            title: 'department 2.1',
+          },
+        ],
+      },
+    ];
+
+    expect(
+      getSearchedTreeItems({ tree, searchOptions: { query: 'customer 2', includeChildrenMatchedParent: true } }),
+    ).toEqual(expected);
+  });
+
+  it('find all items from department 1.1', () => {
+    const expected: TreeNodeProps[] = [
+      {
+        id: 'customer 1',
+        title: 'customer 1',
+        nested: [
+          {
+            id: 'department 1.1',
+            title: 'department 1.1',
+            nested: [
+              {
+                id: 'project 1.1.1',
+                title: 'project 1.1.1',
+              },
+              {
+                id: 'project 1.1.2',
+                title: 'project 1.1.2',
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    expect(
+      getSearchedTreeItems({ tree, searchOptions: { query: 'department 1.1', includeChildrenMatchedParent: true } }),
+    ).toEqual(expected);
+  });
+});

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

@@ -0,0 +1,138 @@
+import { describe, expect, it } from 'vitest';
+
+import type { TreeNodeProps } from '../../types';
+import { getSearchedTreeNodeById } from '../getSearchedTreeNodeById';
+import { tree } from './constants';
+
+describe('get tree items by id', () => {
+  it('should return the item with nested when it exists', () => {
+    const expected: TreeNodeProps = {
+      id: 'customer 1',
+      title: 'customer 1',
+      nested: [
+        {
+          id: 'department 1.1',
+          title: 'department 1.1',
+          nested: [
+            {
+              id: 'project 1.1.1',
+              title: 'project 1.1.1',
+            },
+            {
+              id: 'project 1.1.2',
+              title: 'project 1.1.2',
+            },
+          ],
+        },
+        {
+          id: 'department 1.2',
+          title: 'department 1.2',
+        },
+      ],
+    };
+
+    expect(getSearchedTreeNodeById({ tree, searchOptions: { id: 'customer 1' } })).toEqual(expected);
+  });
+
+  it('should return the item without nested when it exists', () => {
+    const expected: TreeNodeProps = {
+      id: 'customer 1',
+      title: 'customer 1',
+    };
+
+    expect(getSearchedTreeNodeById({ tree, searchOptions: { id: 'customer 1', includeNested: false } })).toEqual(
+      expected,
+    );
+  });
+
+  it('should return null or undefined when the item does not exist', () => {
+    const expected = null;
+
+    expect(getSearchedTreeNodeById({ tree, searchOptions: { id: 'customer none' } })).toEqual(expected);
+  });
+});
+
+describe('get tree items by ids', () => {
+  it('should return the item when only 1 item exists with nested', () => {
+    const expected: TreeNodeProps[] = [
+      {
+        id: 'department 1.1',
+        title: 'department 1.1',
+        nested: [
+          {
+            id: 'project 1.1.1',
+            title: 'project 1.1.1',
+          },
+          {
+            id: 'project 1.1.2',
+            title: 'project 1.1.2',
+          },
+        ],
+      },
+    ];
+
+    expect(
+      getSearchedTreeNodeById({
+        tree,
+        searchOptions: { id: ['department 1.1'] },
+      }),
+    ).toEqual(expected);
+  });
+
+  it('should return the item when only 1 item exists without nested', () => {
+    const expected: TreeNodeProps[] = [
+      {
+        id: 'department 1.1',
+        title: 'department 1.1',
+      },
+    ];
+
+    expect(
+      getSearchedTreeNodeById({
+        tree,
+        searchOptions: { id: ['department 1.1'], includeNested: false },
+      }),
+    ).toEqual(expected);
+  });
+
+  it('should return both items when 2 items exist', () => {
+    const expected: TreeNodeProps[] = [
+      {
+        id: 'department 1.1',
+        title: 'department 1.1',
+        nested: [
+          {
+            id: 'project 1.1.1',
+            title: 'project 1.1.1',
+          },
+          {
+            id: 'project 1.1.2',
+            title: 'project 1.1.2',
+          },
+        ],
+      },
+      {
+        id: 'department 1.2',
+        title: 'department 1.2',
+      },
+    ];
+
+    expect(
+      getSearchedTreeNodeById({
+        tree,
+        searchOptions: { id: ['department 1.1', 'department 1.2'] },
+      }),
+    ).toEqual(expected);
+  });
+
+  it('should return an empty array or null when no items exist', () => {
+    const expected: TreeNodeProps[] = [];
+
+    expect(
+      getSearchedTreeNodeById({
+        tree,
+        searchOptions: { id: ['department 1.1test', 'department 1.2test'] },
+      }),
+    ).toEqual(expected);
+  });
+});

package/src/helpers/checkNestedNodesSelection.ts

@@ -0,0 +1,15 @@
+import { TreeNodeId, TreeNodeProps } from '../types';
+import { findAllChildNodeIds } from './findAllChildNodeIds';
+
+export function checkNestedNodesSelection(nodes: TreeNodeProps[], selectedKeys: TreeNodeId[]) {
+  const allIds = findAllChildNodeIds(nodes);
+
+  const selected = allIds.filter(id => selectedKeys.includes(id));
+  const someSelected = selected.length > 0;
+  const allSelected = someSelected && allIds.length === selected.length;
+
+  return {
+    someSelected: !allSelected && someSelected,
+    allSelected,
+  };
+}

package/src/helpers/collectIds.ts

@@ -0,0 +1,10 @@
+import { TreeNodeProps } from '../types';
+import { traverse } from './traverse';
+
+export const collectIds = (treeNodes: TreeNodeProps[]) => {
+  const ids: string[] = [];
+
+  traverse(treeNodes, node => ids.push(node.id));
+
+  return ids;
+};

package/src/helpers/extractTreeNodeTitle.ts

@@ -0,0 +1,4 @@
+import { ExtendedTreeNodeProps } from '../types';
+
+export const extractTreeNodeTitle = ({ title, getTitle }: ExtendedTreeNodeProps) =>
+  typeof title === 'string' ? title : (getTitle?.() ?? '');

package/src/helpers/findAllChildNodeIds.ts

@@ -0,0 +1,20 @@
+import { TreeNodeId, TreeNodeProps } from '../types';
+
+export function findAllChildNodeIds(nodes: TreeNodeProps[]): TreeNodeId[] {
+  const stack = [...nodes];
+  const ids: TreeNodeId[] = [];
+
+  let node: TreeNodeProps | undefined;
+
+  while ((node = stack.pop())) {
+    if (!node.disabled) {
+      ids.push(node.id);
+
+      if (node.nested?.length) {
+        stack.push(...node.nested);
+      }
+    }
+  }
+
+  return ids;
+}

package/src/helpers/findAllExpandedChildNodeIds.ts

@@ -0,0 +1,18 @@
+import { TreeNodeId, TreeNodeProps } from '../types';
+
+export function findAllExpandedChildNodeIds(nodes: TreeNodeProps[], expandedNodes: TreeNodeId[]) {
+  const stack = [...nodes];
+  const ids: TreeNodeId[] = [];
+
+  let node: TreeNodeProps | undefined;
+
+  while ((node = stack.shift())) {
+    ids.push(node.id);
+
+    if (node.nested?.length && expandedNodes.includes(node.id)) {
+      stack.unshift(...node.nested);
+    }
+  }
+
+  return ids;
+}

package/src/helpers/getSearchedTreeItems.ts

@@ -0,0 +1,50 @@
+import { ExtendedTreeNodeProps } from '../types';
+import { extractTreeNodeTitle } from './extractTreeNodeTitle';
+
+const isMatchedTreeItem = (search: string) => {
+  const searchLower = search.toLocaleLowerCase();
+  return (treeItem: ExtendedTreeNodeProps) => {
+    const currentValue = extractTreeNodeTitle(treeItem);
+    return currentValue.toLocaleLowerCase().includes(searchLower);
+  };
+};
+
+type SearchParams = {
+  tree: ExtendedTreeNodeProps[];
+  searchOptions?: Partial<{
+    query: string;
+    includeChildrenMatchedParent: boolean;
+  }>;
+};
+
+export const getSearchedTreeItems = ({ tree, searchOptions }: SearchParams) => {
+  if (!searchOptions?.query) return tree;
+
+  const { query = '', includeChildrenMatchedParent } = searchOptions;
+
+  const matchFunc = isMatchedTreeItem(query);
+
+  const searchItems = (treeItems: ExtendedTreeNodeProps[]): ExtendedTreeNodeProps[] =>
+    treeItems.reduce<ExtendedTreeNodeProps[]>((acc, item) => {
+      const hasMatchingTitle = matchFunc(item);
+      const needDeepSearch = !(hasMatchingTitle && includeChildrenMatchedParent);
+
+      const matchedChildren = item.nested && (needDeepSearch ? searchItems(item.nested) : item.nested);
+
+      if (hasMatchingTitle || matchedChildren?.length) {
+        const newItem = { ...item };
+
+        if (matchedChildren?.length) {
+          newItem.nested = matchedChildren;
+        } else {
+          delete newItem.nested;
+        }
+
+        acc.push(newItem);
+      }
+
+      return acc;
+    }, []);
+
+  return searchItems(tree);
+};