react-arborist 2.1.1 → 2.3.0

package/README.md

@@ -96,6 +96,7 @@ function App() {
       height={1000}
       indent={24}
       rowHeight={36}
+      overscanCount={1}
       paddingTop={30}
       paddingBottom={10}
       padding={25 /* sets both */}
@@ -281,6 +282,7 @@ interface TreeProps<T> {
 
   /* Sizes */
   rowHeight?: number;
+  overscanCount?: number;
   width?: number;
   height?: number;
   indent?: number;
@@ -291,6 +293,7 @@ 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[]);
@@ -717,6 +720,4 @@ Returns the root _NodeApi_ instance. Its children are the Node representations o
 
 ## Author
 
-This library was created by James Kerr while working at Brim Data on the [Zui desktop app](https://www.youtube.com/watch?v=I2y663n8d2A). Work with data? Check us out at [brimdata.io](https://www.brimdata.io)
-
-[Follow me on Twitter](https://twitter.com/specialCaseDev) for react-arborist updates.
+[James Kerr](https://twitter.com/specialCaseDev) at [Brim Data](https://brimdata.io) for the [Zui desktop app](https://www.youtube.com/watch?v=I2y663n8d2A).

package/dist/index.js

@@ -492,8 +492,8 @@ class $9b37fe5960a1a3c6$export$d4b903da0f522dc8 {
         return this.tree.edit(this);
     }
     handleClick = (e)=>{
-        if (e.metaKey) this.isSelected ? this.deselect() : this.selectMulti();
-        else if (e.shiftKey) this.selectContiguous();
+        if (e.metaKey && !this.tree.props.disableMultiSelection) this.isSelected ? this.deselect() : this.selectMulti();
+        else if (e.shiftKey && !this.tree.props.disableMultiSelection) this.selectContiguous();
         else {
             this.select();
             this.activate();
@@ -1262,7 +1262,9 @@ const $37e3f46f8fd1101f$export$a9754b3c8daa5172 = /*#__PURE__*/ (0, ($parcel$int
         className: tree.props.rowClassName
     };
     (0, $foSVk$react.useEffect)(()=>{
-        if (!node.isEditing && node.isFocused) el.current?.focus();
+        if (!node.isEditing && node.isFocused) el.current?.focus({
+            preventScroll: true
+        });
     }, [
         node.isEditing,
         node.isFocused,
@@ -1341,36 +1343,39 @@ function $bb9a1e34249689ac$export$ff4858a4110d9246() {
                 (0, $eb5355379510ac9b$export$33b47db07a82b2fb)(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 next1 = tree.nextNode;
-                if (!next1) return;
-                const current = tree.focusedNode;
-                if (!current) tree.focus(tree.firstNode);
-                else if (current.isSelected) tree.selectContiguous(next1);
-                else tree.selectMulti(next1);
-                return;
-            }
-            if (e.key === "ArrowUp" && !e.shiftKey) {
-                e.preventDefault();
-                tree.focus(tree.prevNode);
-                return;
+                if (e.metaKey) {
+                    tree.select(tree.focusedNode);
+                    tree.activate(tree.focusedNode);
+                    return;
+                } else if (!e.shiftKey || tree.props.disableMultiSelection) {
+                    tree.focus(next);
+                    return;
+                } else {
+                    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;
+                }
             }
-            if (e.key === "ArrowUp" && e.shiftKey) {
+            if (e.key === "ArrowUp") {
                 e.preventDefault();
                 const prev = tree.prevNode;
-                const current1 = tree.focusedNode;
-                if (!prev) return;
-                if (!current1) tree.focus(tree.lastNode); // ?
-                else if (current1.isSelected) tree.selectContiguous(prev);
-                else tree.selectMulti(prev);
-                return;
+                if (!e.shiftKey || tree.props.disableMultiSelection) {
+                    tree.focus(prev);
+                    return;
+                } else {
+                    if (!prev) return;
+                    const current1 = tree.focusedNode;
+                    if (!current1) tree.focus(tree.lastNode); // ?
+                    else if (current1.isSelected) tree.selectContiguous(prev);
+                    else tree.selectMulti(prev);
+                    return;
+                }
             }
             if (e.key === "ArrowRight") {
                 const node1 = tree.focusedNode;
@@ -1386,13 +1391,12 @@ function $bb9a1e34249689ac$export$ff4858a4110d9246() {
                 else if (!node2.parent?.isRoot) tree.focus(node2.parent);
                 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;
             }
@@ -1436,12 +1440,6 @@ function $bb9a1e34249689ac$export$ff4858a4110d9246() {
                 tree.openSiblings(node4);
                 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();
@@ -1475,6 +1473,7 @@ function $bb9a1e34249689ac$export$ff4858a4110d9246() {
             height: tree.height,
             width: tree.width,
             itemSize: tree.rowHeight,
+            overscanCount: tree.overscanCount,
             itemKey: (index)=>tree.visibleNodes[index]?.id || index,
             outerElementType: (0, $0e2adc7837d85ac3$export$70c2b8898b86d3ad),
             innerElementType: (0, $472f3c5b35f3bf96$export$a9af0da3ae60cd00),
@@ -1572,6 +1571,9 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
     get rowHeight() {
         return this.props.rowHeight ?? 24;
     }
+    get overscanCount() {
+        return this.props.overscanCount ?? 1;
+    }
     get searchTerm() {
         return (this.props.searchTerm || "").trim();
     }
@@ -1894,7 +1896,7 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
             if (index === undefined) return;
             this.list.current?.scrollToItem(index, align);
         }).catch(()=>{
-            console.log(`Id: ${id} never appeared in the list.`);
+        // Id: ${id} never appeared in the list.
         });
     }
     /* State Checks */ get isEditing() {