react-arborist 3.0.2 → 3.2.0

package/dist/state/selection-slice.d.ts

@@ -20,9 +20,15 @@ export declare const actions: {
         type: "SELECTION_REMOVE";
         ids: string[];
     };
-    set: (ids: Set<string>) => {
-        type: "SELECTION_SET";
+    set: (args: {
+        ids: Set<string>;
+        anchor: string | null;
+        mostRecent: string | null;
+    }) => {
         ids: Set<string>;
+        anchor: string | null;
+        mostRecent: string | null;
+        type: "SELECTION_SET";
     };
     mostRecent: (id: string | null | IdObj) => {
         type: "SELECTION_MOST_RECENT";

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.2.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

@@ -14,7 +14,6 @@ import {
   TreeApiContext,
 } from "../context";
 import { TreeApi } from "../interfaces/tree-api";
-import { IdObj } from "../types/utils";
 import { initialState } from "../state/initial";
 import { rootReducer, RootState } from "../state/root-reducer";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -65,7 +64,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 +85,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);
   }
 
@@ -367,21 +370,33 @@ export class TreeApi<T> {
   }
 
   deselectAll() {
-    this.dispatch(selection.clear());
-    this.dispatch(selection.anchor(null));
-    this.dispatch(selection.mostRecent(null));
+    this.setSelection({ ids: [], anchor: null, mostRecent: null });
     safeRun(this.props.onSelect, this.selectedNodes);
   }
 
   selectAll() {
-    this.dispatch(selection.set(new Set(Object.keys(this.idToIndex))));
+    this.setSelection({
+      ids: Object.keys(this.idToIndex),
+      anchor: this.firstNode,
+      mostRecent: this.lastNode,
+    });
     this.dispatch(focus(this.lastNode?.id));
-    this.dispatch(selection.anchor(this.firstNode));
-    this.dispatch(selection.mostRecent(this.lastNode));
     if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
     safeRun(this.props.onSelect, this.selectedNodes);
   }
 
+  setSelection(args: {
+    ids: (IdObj | string)[] | null;
+    anchor: IdObj | string | null;
+    mostRecent: IdObj | string | null;
+  }) {
+    const ids = new Set(args.ids?.map(identify));
+    const anchor = identifyNull(args.anchor);
+    const mostRecent = identifyNull(args.mostRecent);
+    this.dispatch(selection.set({ ids, anchor, mostRecent }));
+    safeRun(this.props.onSelect, this.selectedNodes);
+  }
+
   /* Drag and Drop */
 
   get cursorParentId() {

package/src/state/selection-slice.ts

@@ -28,9 +28,13 @@ export const actions = {
     ids: (Array.isArray(id) ? id : [id]).map(identify),
   }),
 
-  set: (ids: Set<string>) => ({
+  set: (args: {
+    ids: Set<string>;
+    anchor: string | null;
+    mostRecent: string | null;
+  }) => ({
     type: "SELECTION_SET" as const,
-    ids,
+    ...args,
   }),
 
   mostRecent: (id: string | null | IdObj) => ({
@@ -64,7 +68,12 @@ export function reducer(
       action.ids.forEach((id) => ids.delete(id));
       return { ...state, ids: new Set(ids) };
     case "SELECTION_SET":
-      return { ...state, ids: new Set(action.ids) };
+      return {
+        ...state,
+        ids: action.ids,
+        mostRecent: action.mostRecent,
+        anchor: action.anchor,
+      };
     case "SELECTION_MOST_RECENT":
       return { ...state, mostRecent: action.id };
     case "SELECTION_ANCHOR":

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