react-arborist 2.0.0-rc.1 → 2.0.0-rc.2

package/README.md

@@ -2,9 +2,13 @@
 
 <h1>React Arborist</h1>
 
-The tree view is ubiquitous in software applications. This library provides the React ecosystem with complete solution to build the equivalent of the VSCode sidebar, the Mac Finder, the Windows Explorer, or the Sketch/Figma layers panel.
+[See the Demos](https://react-arborist.netlify.app/)
 
-_New Link To Demo_
+The tree view is ubiquitous in software applications. This library provides the React ecosystem with a complete solution to build the equivalent of a VSCode sidebar, Mac Finder, Windows Explorer, or Sketch/Figma layers panel.
+
+Here is a Gmail sidebar clone built with react-arborist.
+
+<img src="https://user-images.githubusercontent.com/3460638/197306119-59fe59e6-50ae-4bc2-8cb9-3faa2bc52cd2.gif" width="270px" alt="Gmail sidebar clone built with react-arborist" />
 
 ## Features
 
@@ -23,8 +27,6 @@ _New Link To Demo_
 - More callbacks (onScroll, onActivate, onSelect)
 - Controlled or uncontrolled trees
 
-_NEW DEMO GIF HERE_
-
 > These docs are for version 2. It contains breaking changes. Here is the [v1.2.0 README](https://github.com/brimdata/react-arborist/tree/4fe9659d2c4cbd57582294330863d4fd7e7af74b).
 
 ## Installation
@@ -267,8 +269,7 @@ interface TreeProps<T extends IdObj> {
   children?: ElementType<renderers.NodeRendererProps<T>>;
   renderRow?: ElementType<renderers.RowRendererProps<T>>;
   renderDragPreview?: ElementType<renderers.DragPreviewProps>;
-  renderCursor?: ElementType<renderers.DropCursorProps>;
-  renderContainer?: ElementType<{}>;
+  renderCursor?: ElementType<renderers.CursorProps>;
 
   /* Sizes */
   rowHeight?: number;
@@ -291,6 +292,8 @@ interface TreeProps<T extends IdObj> {
   onActivate?: (node: NodeApi<T>) => void;
   onSelect?: (nodes: NodeApi<T>[]) => void;
   onScroll?: (props: ListOnScrollProps) => void;
+  onToggle?: (id: string) => void;
+  onFocus?: (node: NodeApi<T>) => void;
 
   /* Selection */
   selection?: string;
@@ -304,6 +307,7 @@ interface TreeProps<T extends IdObj> {
 
   /* Extra */
   className?: string | undefined;
+  rowClassName?: string | undefined;
   dndRootElement?: globalThis.Node | null;
   onClick?: MouseEventHandler;
   onContextMenu?: MouseEventHandler;
@@ -327,7 +331,7 @@ type RowRendererProps<T extends IdObj> = {
 
 The _\<NodeRenderer\>_ is responsible for attaching the drag ref, the node style (padding for indentation), the visual look of the node, the edit input of the node, and anything else you can dream up.
 
-There is a default renderer, but it's only there as a placeholder to get started. You'll wan't to create your own component for this. It is passed as the _\<Tree\>_ components only child.
+There is a default renderer, but it's only there as a placeholder to get started. You'll want to create your own component for this. It is passed as the _\<Tree\>_ components only child.
 
 ```ts
 export type NodeRendererProps<T extends IdObj> = {
@@ -358,7 +362,7 @@ type DragPreviewProps = {
 The _\<Cursor\>_ is responsible for showing a line that indicates where the node will move to when it's dropped. The default is a blue line with circle on the left side. You may want to customize this. Pass your own component to the _renderCursor_ prop.
 
 ```ts
-export type DropCursorProps = {
+export type CursorProps = {
   top: number;
   left: number;
   indent: number;
@@ -367,7 +371,7 @@ export type DropCursorProps = {
 
 ## Node API Reference
 
-#### State Properties
+### State Properties
 
 All these properties on the node instance return booleans related to the state of the node.
 
@@ -403,6 +407,10 @@ _node_.**isSelectedEnd**
 
 Returns true if node is the last of a contiguous group of selected nodes. Useful for styling.
 
+_node_.**isOnlySelection**
+
+Returns true if node is the only node selected in the tree.
+
 _node_.**isFocused**
 
 Returns true if node is focused.
@@ -428,11 +436,14 @@ type NodeState = {
   isSelectedEnd: boolean;
   isFocused: boolean;
   isOpen: boolean;
+  isClosed: boolean;
+  isLeaf: boolean;
+  isInternal: boolean;
   willReceiveDrop: boolean;
 };
 ```
 
-#### Accessors
+### Accessors
 
 _node_.**childIndex**
 
@@ -450,7 +461,7 @@ _node_.**nextSibling**
 
 Returns the next sibling in the data of this node. Returns null if none exist.
 
-#### Selection Methods
+### Selection Methods
 
 _node_.**select**()
 
@@ -468,7 +479,7 @@ _node_.**selectContiguous**()
 
 Deselect all nodes from the anchor node to the last selected node, the select all nodes from the anchor node to this node. The anchor changes to the focused node after calling _select()_ or _selectMulti()_.
 
-#### Activation Methods
+### Activation Methods
 
 _node_.**activate**()
 
@@ -478,7 +489,7 @@ _node_.**focus**()
 
 Focus this node.
 
-#### Open/Close Methods
+### Open/Close Methods
 
 _node_.**open**()
 
@@ -508,7 +519,7 @@ _node_.**reset**()
 
 Moves this node out of the editing state without submitting a new name.
 
-#### Event Handlers
+### Event Handlers
 
 _node_.**handleClick**(_event_)
 
@@ -518,7 +529,7 @@ Useful for using the standard selection methods when a node is clicked. If the m
 
 The tree api reference is stable across re-renders. It always has the most recent state and props.
 
-#### Node Accessors
+### Node Accessors
 
 _tree_.**get**(_id_) : _NodeApi | null_
 
@@ -556,7 +567,7 @@ _tree_.**prevNode** : _NodeApi | null_
 
 The node directly before the _focusedNode_ in the _visibleNodes_ array.
 
-#### Focus Methods
+### Focus Methods
 
 _tree_.**hasFocus** : _boolean_
 
@@ -578,7 +589,7 @@ _tree_.**pageDown**()
 
 Move focus down one page.
 
-#### Selection Methods
+### Selection Methods
 
 _tree_.**selectedIds** : _Set\<string\>_
 
@@ -588,6 +599,18 @@ _tree_.**selectedNodes** : _NodeApi[]_
 
 Returns an array of nodes that are selected.
 
+_tree_.**hasNoSelection** : boolean
+
+Returns true if nothing is selected in the tree.
+
+_tree_.**hasSingleSelection** : boolean
+
+Returns true if there is only one selection.
+
+_tree_.**hasMultipleSelections** : boolean
+
+Returns true if there is more than one selection.
+
 _tree_.**isSelected**(_id_) : _boolean_
 
 Returns true if the node with _id_ is selected.
@@ -616,7 +639,7 @@ _tree_.**selectAll**()
 
 Select all nodes.
 
-#### Visibility
+### Visibility
 
 _tree_.**open**(_id_)
 
@@ -638,11 +661,19 @@ _tree_.**openSiblings**(_id_)
 
 Open all siblings of the node with _id_.
 
+_tree_.**openAll**()
+
+Open all internal nodes.
+
+_tree_.**closeAll**()
+
+Close all internal nodes.
+
 _tree_.**isOpen**(_id_) : _boolean_
 
 Returns true if the node with _id_ is open.
 
-#### Drag and Drop
+### Drag and Drop
 
 _tree_.**isDragging**(_id_) : _boolean_
 
@@ -652,13 +683,13 @@ _tree_.**willReceiveDrop**(_id_) : _boolean_
 
 Returns true if the node with _id_ is internal and is under the dragged node.
 
-#### Scrolling
+### Scrolling
 
 _tree_.**scrollTo**(_id_, _[align]_)
 
 Scroll to the node with _id_. If this node is not visible, this method will open all its parents. The align argument can be _"auto" | "smart" | "center" | "end" | "start"_.
 
-#### Properties
+### Properties
 
 _tree_.**isEditing** : _boolean_
 

package/dist/components/cursor.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare function DropCursor(): JSX.Element | null;
+export declare function Cursor(): JSX.Element | null;

package/dist/components/default-cursor.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import { DropCursorProps } from "../types/renderers";
-export declare const DefaultCursor: React.NamedExoticComponent<DropCursorProps>;
+import { CursorProps } from "../types/renderers";
+export declare const DefaultCursor: React.NamedExoticComponent<CursorProps>;

package/dist/index.js

@@ -72,6 +72,7 @@ $parcel$export($eb5355379510ac9b$exports, "isDecendent", () => $eb5355379510ac9b
 $parcel$export($eb5355379510ac9b$exports, "indexOf", () => $eb5355379510ac9b$export$305f7d4e9d4624f2);
 $parcel$export($eb5355379510ac9b$exports, "noop", () => $eb5355379510ac9b$export$8793edee2d425525);
 $parcel$export($eb5355379510ac9b$exports, "dfs", () => $eb5355379510ac9b$export$51b654aff22fc5a6);
+$parcel$export($eb5355379510ac9b$exports, "walk", () => $eb5355379510ac9b$export$588732934346abbf);
 $parcel$export($eb5355379510ac9b$exports, "focusNextElement", () => $eb5355379510ac9b$export$3b0237e8566c8d65);
 $parcel$export($eb5355379510ac9b$exports, "focusPrevElement", () => $eb5355379510ac9b$export$33b47db07a82b2fb);
 $parcel$export($eb5355379510ac9b$exports, "access", () => $eb5355379510ac9b$export$9bb0e144ba4929ca);
@@ -80,6 +81,8 @@ $parcel$export($eb5355379510ac9b$exports, "identify", () => $eb5355379510ac9b$ex
 $parcel$export($eb5355379510ac9b$exports, "mergeRefs", () => $eb5355379510ac9b$export$c9058316764c140e);
 $parcel$export($eb5355379510ac9b$exports, "safeRun", () => $eb5355379510ac9b$export$c6d63370cef03886);
 $parcel$export($eb5355379510ac9b$exports, "waitFor", () => $eb5355379510ac9b$export$9bbfceb27f687c1b);
+$parcel$export($eb5355379510ac9b$exports, "getInsertIndex", () => $eb5355379510ac9b$export$e12bf2314d0bc2a9);
+$parcel$export($eb5355379510ac9b$exports, "getInsertParentId", () => $eb5355379510ac9b$export$58fe32731f07ed56);
 function $eb5355379510ac9b$export$adf7c0fe6059d774(n, min, max) {
     return Math.max(Math.min(n, max), min);
 }
@@ -111,6 +114,10 @@ function $eb5355379510ac9b$export$51b654aff22fc5a6(node, id) {
     }
     return null;
 }
+function $eb5355379510ac9b$export$588732934346abbf(node, fn) {
+    fn(node);
+    if (node.children) for (let child of node.children)$eb5355379510ac9b$export$588732934346abbf(child, fn);
+}
 function $eb5355379510ac9b$export$3b0237e8566c8d65(target) {
     const elements = $eb5355379510ac9b$var$getFocusable(target);
     let next;
@@ -183,6 +190,20 @@ function $eb5355379510ac9b$export$9bbfceb27f687c1b(fn) {
         check();
     });
 }
+function $eb5355379510ac9b$export$e12bf2314d0bc2a9(tree) {
+    const focus = tree.focusedNode;
+    if (!focus) return tree.root.children?.length ?? 0;
+    if (focus.isOpen) return 0;
+    if (focus.parent) return focus.childIndex + 1;
+    return 0;
+}
+function $eb5355379510ac9b$export$58fe32731f07ed56(tree) {
+    const focus = tree.focusedNode;
+    if (!focus) return null;
+    if (focus.isOpen) return focus.id;
+    if (focus.parent) return focus.parent.id;
+    return null;
+}
 
 
 
@@ -368,12 +389,18 @@ class $9b37fe5960a1a3c6$export$d4b903da0f522dc8 {
     get isOpen() {
         return this.isLeaf ? false : this.tree.isOpen(this.id);
     }
+    get isClosed() {
+        return this.isLeaf ? false : !this.tree.isOpen(this.id);
+    }
     get isEditing() {
         return this.tree.editingId === this.id;
     }
     get isSelected() {
         return this.tree.isSelected(this.id);
     }
+    get isOnlySelection() {
+        return this.isSelected && this.tree.hasOneSelection;
+    }
     get isSelectedStart() {
         return this.isSelected && !this.prev?.isSelected;
     }
@@ -391,13 +418,16 @@ class $9b37fe5960a1a3c6$export$d4b903da0f522dc8 {
     }
     get state() {
         return {
-            isEditing: this.isEditing,
+            isClosed: this.isClosed,
             isDragging: this.isDragging,
-            isSelected: this.isSelected,
-            isSelectedStart: this.isSelectedStart,
-            isSelectedEnd: this.isSelectedEnd,
+            isEditing: this.isEditing,
             isFocused: this.isFocused,
+            isInternal: this.isInternal,
+            isLeaf: this.isLeaf,
             isOpen: this.isOpen,
+            isSelected: this.isSelected,
+            isSelectedEnd: this.isSelectedEnd,
+            isSelectedStart: this.isSelectedStart,
             willReceiveDrop: this.willReceiveDrop
         };
     }
@@ -833,7 +863,7 @@ const $6e3db8c23c41dfc9$var$PreviewNode = /*#__PURE__*/ (0, $foSVk$react.memo)(f
 
 
 
-function $e527b4e3d64e6932$export$ef961593063b03e8() {
+function $e527b4e3d64e6932$export$b6a79797ad180576() {
     const tree = (0, $d5cb84d44d1b8acc$export$367b0f2231a90ba0)();
     const state = (0, $d5cb84d44d1b8acc$export$4930f6bf413be70e)();
     const cursor = state.cursor;
@@ -876,10 +906,7 @@ const $0e2adc7837d85ac3$var$DropContainer = ()=>{
             left: "0",
             right: "0"
         },
-        onClick: (e)=>{
-            console.log(e.currentTarget, e.target);
-        },
-        children: /*#__PURE__*/ (0, $foSVk$reactjsxruntime.jsx)((0, $e527b4e3d64e6932$export$ef961593063b03e8), {})
+        children: /*#__PURE__*/ (0, $foSVk$reactjsxruntime.jsx)((0, $e527b4e3d64e6932$export$b6a79797ad180576), {})
     });
 };
 
@@ -1228,7 +1255,8 @@ const $37e3f46f8fd1101f$export$a9754b3c8daa5172 = /*#__PURE__*/ (0, ($parcel$int
         "aria-level": node.level,
         "aria-selected": node.isSelected,
         style: rowStyle,
-        tabIndex: -1
+        tabIndex: -1,
+        className: tree.props.rowClassName
     };
     (0, $foSVk$react.useEffect)(()=>{
         if (!node.isEditing && node.isFocused) el.current?.focus();
@@ -1530,16 +1558,16 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
         return this.state.nodes.open.unfiltered;
     }
     /* Tree Props */ get width() {
-        return this.props.width || 300;
+        return this.props.width ?? 300;
     }
     get height() {
-        return this.props.height || 500;
+        return this.props.height ?? 500;
     }
     get indent() {
-        return this.props.indent || 24;
+        return this.props.indent ?? 24;
     }
     get rowHeight() {
-        return this.props.rowHeight || 24;
+        return this.props.rowHeight ?? 24;
     }
     get searchTerm() {
         return (this.props.searchTerm || "").trim();
@@ -1609,31 +1637,20 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
         return this.state.nodes.edit.id;
     }
     createInternal() {
-        return this.create("internal");
+        return this.create({
+            type: "internal"
+        });
     }
     createLeaf() {
-        return this.create("leaf");
-    }
-    async create(type) {
-        let index;
-        let parentId;
-        const focus = this.focusedNode;
-        if (focus && focus.parent) {
-            if (focus.isInternal && focus.isOpen) {
-                parentId = focus.id;
-                index = 0;
-            } else {
-                index = focus.childIndex + 1;
-                parentId = focus.parent.isRoot ? null : focus.parent.id;
-            }
-        } else {
-            index = this.root?.children?.length || -1;
-            parentId = null;
-        }
+        return this.create({
+            type: "leaf"
+        });
+    }
+    async create(opts = {}) {
         const data = await $5c74fef433be2b0a$var$safeRun(this.props.onCreate, {
-            parentId: parentId,
-            index: index,
-            type: type
+            type: opts.type ?? "leaf",
+            parentId: opts.parentId === undefined ? $eb5355379510ac9b$exports.getInsertParentId(this) : opts.parentId,
+            index: opts.index ?? $eb5355379510ac9b$exports.getInsertIndex(this)
         });
         if (data) {
             this.focus(data);
@@ -1716,6 +1733,7 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
         else {
             this.dispatch((0, $61ef7f2c3c9633e7$export$d7ddd398f22d79ef)($5c74fef433be2b0a$var$identify(node)));
             if (opts.scroll !== false) this.scrollTo(node);
+            if (this.focusedNode) $5c74fef433be2b0a$var$safeRun(this.props.onFocus, this.focusedNode);
         }
     }
     pageUp() {
@@ -1744,6 +1762,7 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
         this.dispatch((0, $58f9381615aa3d17$export$e324594224ef24da).anchor(id));
         this.dispatch((0, $58f9381615aa3d17$export$e324594224ef24da).mostRecent(id));
         this.scrollTo(id, opts.align);
+        if (this.focusedNode) $5c74fef433be2b0a$var$safeRun(this.props.onFocus, this.focusedNode);
         $5c74fef433be2b0a$var$safeRun(this.props.onSelect, this.selectedNodes);
     }
     deselect(node) {
@@ -1759,6 +1778,7 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
         this.dispatch((0, $58f9381615aa3d17$export$e324594224ef24da).anchor(node.id));
         this.dispatch((0, $58f9381615aa3d17$export$e324594224ef24da).mostRecent(node.id));
         this.scrollTo(node);
+        if (this.focusedNode) $5c74fef433be2b0a$var$safeRun(this.props.onFocus, this.focusedNode);
         $5c74fef433be2b0a$var$safeRun(this.props.onSelect, this.selectedNodes);
     }
     selectContiguous(identity) {
@@ -1770,6 +1790,7 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
         this.dispatch((0, $58f9381615aa3d17$export$e324594224ef24da).add(this.nodesBetween(anchor, $5c74fef433be2b0a$var$identifyNull(id))));
         this.dispatch((0, $58f9381615aa3d17$export$e324594224ef24da).mostRecent(id));
         this.scrollTo(id);
+        if (this.focusedNode) $5c74fef433be2b0a$var$safeRun(this.props.onFocus, this.focusedNode);
         $5c74fef433be2b0a$var$safeRun(this.props.onSelect, this.selectedNodes);
     }
     deselectAll() {
@@ -1783,6 +1804,7 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
         this.dispatch((0, $61ef7f2c3c9633e7$export$d7ddd398f22d79ef)(this.lastNode?.id));
         this.dispatch((0, $58f9381615aa3d17$export$e324594224ef24da).anchor(this.firstNode));
         this.dispatch((0, $58f9381615aa3d17$export$e324594224ef24da).mostRecent(this.lastNode));
+        if (this.focusedNode) $5c74fef433be2b0a$var$safeRun(this.props.onFocus, this.focusedNode);
         $5c74fef433be2b0a$var$safeRun(this.props.onSelect, this.selectedNodes);
     }
     /* Drag and Drop */ get cursorParentId() {
@@ -1808,12 +1830,16 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
     /* Visibility */ open(identity) {
         const id = $5c74fef433be2b0a$var$identifyNull(identity);
         if (!id) return;
+        if (this.isOpen(id)) return;
         this.dispatch((0, $d519ceb3313d9d0e$export$e324594224ef24da).open(id, this.isFiltered));
+        $5c74fef433be2b0a$var$safeRun(this.props.onToggle, id);
     }
     close(identity) {
         const id = $5c74fef433be2b0a$var$identifyNull(identity);
         if (!id) return;
+        if (!this.isOpen(id)) return;
         this.dispatch((0, $d519ceb3313d9d0e$export$e324594224ef24da).close(id, this.isFiltered));
+        $5c74fef433be2b0a$var$safeRun(this.props.onToggle, id);
     }
     toggle(identity) {
         const id = $5c74fef433be2b0a$var$identifyNull(identity);
@@ -1839,6 +1865,16 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
             this.scrollTo(this.focusedNode);
         }
     }
+    openAll() {
+        $eb5355379510ac9b$exports.walk(this.root, (node)=>{
+            if (node.isInternal) node.open();
+        });
+    }
+    closeAll() {
+        $eb5355379510ac9b$exports.walk(this.root, (node)=>{
+            if (node.isInternal) node.close();
+        });
+    }
     /* Scrolling */ scrollTo(identity, align = "smart") {
         if (!identity) return;
         const id = $5c74fef433be2b0a$var$identify(identity);
@@ -1860,6 +1896,15 @@ class $5c74fef433be2b0a$export$e2da3477247342d1 {
     get hasFocus() {
         return this.state.nodes.focus.treeFocused;
     }
+    get hasNoSelection() {
+        return this.state.nodes.selection.ids.size === 0;
+    }
+    get hasOneSelection() {
+        return this.state.nodes.selection.ids.size === 1;
+    }
+    get hasMultipleSelections() {
+        return this.state.nodes.selection.ids.size > 1;
+    }
     isSelected(id) {
         if (!id) return false;
         return this.state.nodes.selection.ids.has(id);
@@ -2033,6 +2078,7 @@ function $9511ad6af37da13b$export$c49dab5eb1b4ce0c({ treeProps: treeProps , impe
 
 
 
+
 function $6c0a9a91d5e7ff45$export$5a6c424b1725f44f() {
     const tree = (0, $d5cb84d44d1b8acc$export$367b0f2231a90ba0)();
     // In case we drop an item at the bottom of the list
@@ -2042,9 +2088,28 @@ function $6c0a9a91d5e7ff45$export$5a6c424b1725f44f() {
                 if (!m.isOver({
                     shallow: true
                 })) return;
+                if (m.canDrop()) {
+                    const offset = m.getClientOffset();
+                    if (!tree.listEl.current || !offset) return;
+                    const { cursor: cursor  } = (0, $462841de7cc5b715$export$f502ca02ebb85a1c)({
+                        element: tree.listEl.current,
+                        offset: offset,
+                        indent: tree.indent,
+                        node: null,
+                        prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
+                        nextNode: null
+                    });
+                    if (cursor) tree.showCursor(cursor);
+                } else tree.hideCursor();
+            },
+            canDrop: (item, m)=>{
+                if (!m.isOver({
+                    shallow: true
+                })) return false;
+                if (tree.isFiltered) return false;
                 const offset = m.getClientOffset();
-                if (!tree.listEl.current || !offset) return;
-                const { cursor: cursor  } = (0, $462841de7cc5b715$export$f502ca02ebb85a1c)({
+                if (!tree.listEl.current || !offset) return false;
+                const { drop: drop  } = (0, $462841de7cc5b715$export$f502ca02ebb85a1c)({
                     element: tree.listEl.current,
                     offset: offset,
                     indent: tree.indent,
@@ -2052,12 +2117,15 @@ function $6c0a9a91d5e7ff45$export$5a6c424b1725f44f() {
                     prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
                     nextNode: null
                 });
-                if (cursor) tree.showCursor(cursor);
-            },
-            canDrop: (item, m)=>{
-                return m.isOver({
-                    shallow: true
-                });
+                if (!drop) return false;
+                const dropParent = tree.get(drop.parentId) ?? tree.root;
+                for (let id of item.dragIds){
+                    const drag = tree.get(id);
+                    if (!drag) return false;
+                    if (!dropParent) return false;
+                    if (drag.isInternal && (0, $eb5355379510ac9b$export$1e38f72c6c546f70)(dropParent, drag)) return false;
+                }
+                return true;
             },
             drop: (item, m)=>{
                 if (m.didDrop()) return;