react-arborist 3.0.2 → 3.1.0

package/dist/types/tree-props.d.ts

@@ -5,6 +5,7 @@ import { ElementType, MouseEventHandler } from "react";
 import { ListOnScrollProps } from "react-window";
 import { NodeApi } from "../interfaces/node-api";
 import { OpenMap } from "../state/open-slice";
+import { useDragDropManager } from "react-dnd";
 export interface TreeProps<T> {
     data?: readonly T[];
     initialData?: readonly T[];
@@ -51,4 +52,5 @@ export interface TreeProps<T> {
     dndRootElement?: globalThis.Node | null;
     onClick?: MouseEventHandler;
     onContextMenu?: MouseEventHandler;
+    dndManager?: ReturnType<typeof useDragDropManager>;
 }

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "react-arborist",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/module.js",
   "types": "dist/index.d.ts",
+  "sideEffects": false,
   "scripts": {
-    "start": "run-p 'watch:**'",
+    "start": "run-p 'start:**'",
     "build": "npm-run-all clean -p 'build:**'",
     "test": "jest",
     "build:js": "parcel build --target main --target module",

package/src/components/provider.tsx

@@ -65,7 +65,7 @@ export function TreeProvider<T>({
   /* Change selection based on props */
   useEffect(() => {
     if (api.props.selection) {
-      api.select(api.props.selection);
+      api.select(api.props.selection, { focus: false });
     } else {
       api.deselectAll();
     }
@@ -86,6 +86,7 @@ export function TreeProvider<T>({
             <DndProvider
               backend={HTML5Backend}
               options={{ rootElement: api.props.dndRootElement || undefined }}
+              {...(treeProps.dndManager && { manager: treeProps.dndManager })}
             >
               {children}
             </DndProvider>

package/src/data/create-list.ts

@@ -29,24 +29,35 @@ function flattenAndFilterTree<T>(
   root: NodeApi<T>,
   isMatch: (n: NodeApi<T>) => boolean
 ): NodeApi<T>[] {
-  function collect(node: NodeApi<T>) {
-    let result: NodeApi<T>[] = [];
-    const yes = !node.isRoot && isMatch(node);
+  const matches: Record<string, boolean> = {};
+  const list: NodeApi<T>[] = [];
 
-    if (node.children) {
-      for (let child of node.children) {
-        result = result.concat(collect(child));
+  function markMatch(node: NodeApi<T>) {
+    const yes = !node.isRoot && isMatch(node);
+    if (yes) {
+      matches[node.id] = true;
+      let parent = node.parent;
+      while (parent) {
+        matches[parent.id] = true;
+        parent = parent.parent;
       }
     }
-    if (result.length) {
-      if (!node.isRoot) result.unshift(node);
-      return result;
+    if (node.children) {
+      for (let child of node.children) markMatch(child);
     }
-    if (yes) return [node];
-    else return [];
   }
 
-  const list = collect(root).filter((n) => n.parent?.isOpen);
+  function collect(node: NodeApi<T>) {
+    if (node.level >= 0 && matches[node.id]) {
+      list.push(node);
+    }
+    if (node.isOpen) {
+      node.children?.forEach(collect);
+    }
+  }
+
+  markMatch(root);
+  collect(root);
   list.forEach(assignRowIndex);
   return list;
 }

package/src/interfaces/tree-api.ts

@@ -323,15 +323,18 @@ export class TreeApi<T> {
     this.focus(this.at(index));
   }
 
-  select(node: Identity, opts: { align?: Align } = {}) {
+  select(node: Identity, opts: { align?: Align; focus?: boolean } = {}) {
     if (!node) return;
+    const changeFocus = opts.focus !== false;
     const id = identify(node);
-    this.dispatch(focus(id));
+    if (changeFocus) this.dispatch(focus(id));
     this.dispatch(selection.only(id));
     this.dispatch(selection.anchor(id));
     this.dispatch(selection.mostRecent(id));
     this.scrollTo(id, opts.align);
-    if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
+    if (this.focusedNode && changeFocus) {
+      safeRun(this.props.onFocus, this.focusedNode);
+    }
     safeRun(this.props.onSelect, this.selectedNodes);
   }
 

package/src/types/tree-props.ts

@@ -5,6 +5,7 @@ import { ElementType, MouseEventHandler } from "react";
 import { ListOnScrollProps } from "react-window";
 import { NodeApi } from "../interfaces/node-api";
 import { OpenMap } from "../state/open-slice";
+import { useDragDropManager } from "react-dnd"
 
 export interface TreeProps<T> {
   /* Data Options */
@@ -75,4 +76,5 @@ export interface TreeProps<T> {
   dndRootElement?: globalThis.Node | null;
   onClick?: MouseEventHandler;
   onContextMenu?: MouseEventHandler;
+  dndManager?: ReturnType<typeof useDragDropManager>
 }