react-arborist 2.1.1 → 2.3.0

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

@@ -18,6 +18,7 @@ export interface TreeProps<T> {
     renderCursor?: ElementType<renderers.CursorProps>;
     renderContainer?: ElementType<{}>;
     rowHeight?: number;
+    overscanCount?: number;
     width?: number | string;
     height?: number;
     indent?: number;
@@ -26,6 +27,7 @@ export interface TreeProps<T> {
     padding?: number;
     openByDefault?: boolean;
     selectionFollowsFocus?: boolean;
+    disableMultiSelection?: boolean;
     disableDrag?: string | boolean | BoolFunc<T>;
     disableDrop?: string | boolean | BoolFunc<T>;
     childrenAccessor?: string | ((d: T) => T[] | null);

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "react-arborist",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/module.js",
   "types": "dist/index.d.ts",
-  "repository": "https://github.com/brimdata/react-arborist",
+  "repository": "github:brimdata/react-arborist",
   "homepage": "https://react-arborist.netlify.app",
+  "bugs": "https://github.com/brimdata/react-arborist/issues",
   "keywords": [
     "react",
     "arborist",

package/src/components/default-container.tsx

@@ -73,44 +73,47 @@ export function DefaultContainer() {
           focusPrevElement(e.currentTarget);
           return;
         }
-        if (e.key === "ArrowDown" && !e.shiftKey && !e.metaKey) {
+        if (e.key === "ArrowDown") {
           e.preventDefault();
           const next = tree.nextNode;
-          tree.focus(next);
-          return;
-        }
-        if (e.key === "ArrowDown" && e.shiftKey) {
-          e.preventDefault();
-          const next = tree.nextNode;
-          if (!next) return;
-          const current = tree.focusedNode;
-          if (!current) {
-            tree.focus(tree.firstNode);
-          } else if (current.isSelected) {
-            tree.selectContiguous(next);
+          if (e.metaKey) {
+            tree.select(tree.focusedNode);
+            tree.activate(tree.focusedNode);
+            return;
+          } else if (!e.shiftKey || tree.props.disableMultiSelection) {
+            tree.focus(next);
+            return;
           } else {
-            tree.selectMulti(next);
+            if (!next) return;
+            const current = tree.focusedNode;
+            if (!current) {
+              tree.focus(tree.firstNode);
+            } else if (current.isSelected) {
+              tree.selectContiguous(next);
+            } else {
+              tree.selectMulti(next);
+            }
+            return;
           }
-          return;
         }
-        if (e.key === "ArrowUp" && !e.shiftKey) {
-          e.preventDefault();
-          tree.focus(tree.prevNode);
-          return;
-        }
-        if (e.key === "ArrowUp" && e.shiftKey) {
+        if (e.key === "ArrowUp") {
           e.preventDefault();
           const prev = tree.prevNode;
-          const current = tree.focusedNode;
-          if (!prev) return;
-          if (!current) {
-            tree.focus(tree.lastNode); // ?
-          } else if (current.isSelected) {
-            tree.selectContiguous(prev);
+          if (!e.shiftKey || tree.props.disableMultiSelection) {
+            tree.focus(prev);
+            return;
           } else {
-            tree.selectMulti(prev);
+            if (!prev) return;
+            const current = tree.focusedNode;
+            if (!current) {
+              tree.focus(tree.lastNode); // ?
+            } else if (current.isSelected) {
+              tree.selectContiguous(prev);
+            } else {
+              tree.selectMulti(prev);
+            }
+            return;
           }
-          return;
         }
         if (e.key === "ArrowRight") {
           const node = tree.focusedNode;
@@ -129,13 +132,12 @@ export function DefaultContainer() {
           }
           return;
         }
-        if (e.key === "a" && e.metaKey) {
+        if (e.key === "a" && e.metaKey && !tree.props.disableMultiSelection) {
           e.preventDefault();
           tree.selectAll();
           return;
         }
-        if (e.key === "a" && !e.metaKey) {
-          if (!tree.props.onCreate) return;
+        if (e.key === "a" && !e.metaKey && tree.props.onCreate) {
           tree.createLeaf();
           return;
         }
@@ -182,12 +184,6 @@ export function DefaultContainer() {
           tree.openSiblings(node);
           return;
         }
-        if (e.key === "ArrowDown" && e.metaKey) {
-          e.preventDefault();
-          tree.select(tree.focusedNode);
-          tree.activate(tree.focusedNode);
-          return;
-        }
         if (e.key === "PageUp") {
           e.preventDefault();
           tree.pageUp();
@@ -224,6 +220,7 @@ export function DefaultContainer() {
         height={tree.height}
         width={tree.width}
         itemSize={tree.rowHeight}
+        overscanCount={tree.overscanCount}
         itemKey={(index) => tree.visibleNodes[index]?.id || index}
         outerElementType={ListOuterElement}
         innerElementType={ListInnerElement}

package/src/components/row-container.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useDataUpdates, useNodesContext, useTreeApi } from "../context";
 import { useDragHook } from "../dnd/drag-hook";
 import { useDropHook } from "../dnd/drop-hook";
-import { IdObj } from "../types/utils";
 import { useFreshNode } from "../hooks/use-fresh-node";
 
 type Props = {
@@ -68,7 +67,7 @@ export const RowContainer = React.memo(function RowContainer<T>({
 
   useEffect(() => {
     if (!node.isEditing && node.isFocused) {
-      el.current?.focus();
+      el.current?.focus({ preventScroll: true });
     }
   }, [node.isEditing, node.isFocused, el.current]);
 

package/src/interfaces/node-api.ts

@@ -186,9 +186,9 @@ export class NodeApi<T = any> {
   }
 
   handleClick = (e: React.MouseEvent) => {
-    if (e.metaKey) {
+    if (e.metaKey && !this.tree.props.disableMultiSelection) {
       this.isSelected ? this.deselect() : this.selectMulti();
-    } else if (e.shiftKey) {
+    } else if (e.shiftKey && !this.tree.props.disableMultiSelection) {
       this.selectContiguous();
     } else {
       this.select();

package/src/interfaces/tree-api.ts

@@ -83,6 +83,10 @@ export class TreeApi<T> {
     return this.props.rowHeight ?? 24;
   }
 
+  get overscanCount() {
+    return this.props.overscanCount ?? 1;
+  }
+
   get searchTerm() {
     return (this.props.searchTerm || "").trim();
   }
@@ -479,7 +483,7 @@ export class TreeApi<T> {
         this.list.current?.scrollToItem(index, align);
       })
       .catch(() => {
-        console.log(`Id: ${id} never appeared in the list.`);
+        // Id: ${id} never appeared in the list.
       });
   }
 

package/src/types/tree-props.ts

@@ -26,6 +26,7 @@ export interface TreeProps<T> {
 
   /* Sizes */
   rowHeight?: number;
+  overscanCount?: number;
   width?: number | string;
   height?: number;
   indent?: number;
@@ -36,6 +37,7 @@ export interface TreeProps<T> {
   /* Config */
   openByDefault?: boolean;
   selectionFollowsFocus?: boolean;
+  disableMultiSelection?: boolean;
   disableDrag?: string | boolean | BoolFunc<T>;
   disableDrop?: string | boolean | BoolFunc<T>;
   childrenAccessor?: string | ((d: T) => T[] | null);