react-arborist 3.0.1 → 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/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

package/package.json

@@ -1,11 +1,23 @@
 {
   "name": "react-arborist",
-  "version": "3.0.1",
+  "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 'start:**'",
+    "build": "npm-run-all clean -p 'build:**'",
+    "test": "jest",
+    "build:js": "parcel build --target main --target module",
+    "build:types": "tsc --outDir dist",
+    "clean": "rimraf dist",
+    "start:js": "parcel watch --target main --target module --no-hmr --no-cache",
+    "start:types": "tsc --outDir dist --watch",
+    "prepack": "yarn build"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/brimdata/react-arborist.git"
@@ -30,15 +42,6 @@
     "redux": "^4.1.1",
     "use-sync-external-store": "^1.2.0"
   },
-  "scripts": {
-    "build": "run-p 'build:**'",
-    "build:js": "parcel build --target main --target module",
-    "build:types": "tsc --outDir dist",
-    "watch:js": "parcel watch --target main --target module --no-hmr --no-cache",
-    "watch:types": "tsc --outDir dist --watch",
-    "watch": "run-p 'watch:**'",
-    "prepack": "yarn build"
-  },
   "peerDependencies": {
     "react": ">= 16.14",
     "react-dom": ">= 16.14"
@@ -49,9 +52,11 @@
     "@types/react": "^18.0.0",
     "@types/react-window": "^1.8.5",
     "@types/use-sync-external-store": "^0.0.3",
-    "jest": "^27.5.1",
+    "jest": "^29.4.1",
     "npm-run-all": "^4.1.5",
     "parcel": "^2.3.2",
+    "rimraf": "^4.1.2",
+    "ts-jest": "^29.0.5",
     "typescript": "^4.6.2"
   }
 }

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.test.ts

@@ -0,0 +1,15 @@
+import { createStore } from "redux";
+import { rootReducer } from "../state/root-reducer";
+import { TreeProps } from "../types/tree-props";
+import { TreeApi } from "./tree-api";
+
+function setupApi(props: TreeProps<any>) {
+  const store = createStore(rootReducer);
+  return new TreeApi(store, props, { current: null }, { current: null });
+}
+
+test("tree.canDrop()", () => {
+  expect(setupApi({ disableDrop: true }).canDrop()).toBe(false);
+  expect(setupApi({ disableDrop: () => false }).canDrop()).toBe(true);
+  expect(setupApi({ disableDrop: false }).canDrop()).toBe(true);
+});

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);
   }
 
@@ -408,7 +411,7 @@ export class TreeApi<T> {
     if (this.isFiltered) return false;
     const parentNode = this.get(this.state.dnd.parentId) ?? this.root;
     const dragNodes = this.dragNodes;
-    const check = this.props.disableDrop;
+    const isDisabled = this.props.disableDrop;
 
     for (const drag of dragNodes) {
       if (!drag) return false;
@@ -417,17 +420,17 @@ export class TreeApi<T> {
     }
 
     // Allow the user to insert their own logic
-    if (typeof check == "function") {
-      return check({
+    if (typeof isDisabled == "function") {
+      return !isDisabled({
         parentNode,
         dragNodes: this.dragNodes,
         index: this.state.dnd.index,
       });
-    } else if (typeof check == "string") {
+    } else if (typeof isDisabled == "string") {
       // @ts-ignore
-      return !!parentNode.data[check];
-    } else if (typeof check === "boolean") {
-      return check;
+      return !parentNode.data[isDisabled];
+    } else if (typeof isDisabled === "boolean") {
+      return !isDisabled;
     } else {
       return true;
     }

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