react-arborist 2.1.0 → 2.2.0

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

@@ -6,8 +6,8 @@ import { ListOnScrollProps } from "react-window";
 import { NodeApi } from "../interfaces/node-api";
 import { OpenMap } from "../state/open-slice";
 export interface TreeProps<T> {
-    data?: T[];
-    initialData?: T[];
+    data?: readonly T[];
+    initialData?: readonly T[];
     onCreate?: handlers.CreateHandler<T>;
     onMove?: handlers.MoveHandler<T>;
     onRename?: handlers.RenameHandler<T>;
@@ -18,7 +18,7 @@ export interface TreeProps<T> {
     renderCursor?: ElementType<renderers.CursorProps>;
     renderContainer?: ElementType<{}>;
     rowHeight?: number;
-    width?: number;
+    width?: number | string;
     height?: number;
     indent?: number;
     paddingTop?: number;
@@ -26,9 +26,10 @@ 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[]);
+    childrenAccessor?: string | ((d: T) => T[] | null);
     idAccessor?: string | ((d: T) => string);
     onActivate?: (node: NodeApi<T>) => void;
     onSelect?: (nodes: NodeApi<T>[]) => void;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "react-arborist",
-  "version": "2.1.0",
+  "version": "2.2.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,7 +132,7 @@ export function DefaultContainer() {
           }
           return;
         }
-        if (e.key === "a" && e.metaKey) {
+        if (e.key === "a" && e.metaKey && !tree.props.disableMultiSelection) {
           e.preventDefault();
           tree.selectAll();
           return;
@@ -182,12 +185,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();

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/data/create-root.ts

@@ -44,7 +44,7 @@ export function createRoot<T>(tree: TreeApi<T>): NodeApi<T> {
     rowIndex: null,
   });
 
-  const data: T[] = tree.props.data ?? [];
+  const data: readonly T[] = tree.props.data ?? [];
 
   root.children = data.map((child) => {
     return visitSelfAndChildren(child, 0, root);

package/src/hooks/use-simple-tree.ts

@@ -16,7 +16,7 @@ export type SimpleTreeData = {
 
 let nextId = 0;
 
-export function useSimpleTree<T>(initialData: T[]) {
+export function useSimpleTree<T>(initialData: readonly T[]) {
   const [data, setData] = useState(initialData);
   const tree = useMemo(
     () =>

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

@@ -479,7 +479,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

@@ -8,8 +8,8 @@ import { OpenMap, OpenSlice } from "../state/open-slice";
 
 export interface TreeProps<T> {
   /* Data Options */
-  data?: T[];
-  initialData?: T[];
+  data?: readonly T[];
+  initialData?: readonly T[];
 
   /* Data Handlers */
   onCreate?: handlers.CreateHandler<T>;
@@ -26,7 +26,7 @@ export interface TreeProps<T> {
 
   /* Sizes */
   rowHeight?: number;
-  width?: number;
+  width?: number | string;
   height?: number;
   indent?: number;
   paddingTop?: number;
@@ -36,9 +36,10 @@ 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[]);
+  childrenAccessor?: string | ((d: T) => T[] | null);
   idAccessor?: string | ((d: T) => string);
 
   /* Event Handlers */