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

package/dist/interfaces/node-api.d.ts

@@ -23,9 +23,6 @@ export declare class NodeApi<T extends IdObj = IdObj> {
     isDroppable: boolean;
     rowIndex: number | null;
     constructor(params: Params<T>);
-    get next(): NodeApi<T> | null;
-    get prev(): NodeApi<T> | null;
-    get nextSibling(): NodeApi<T> | null;
     get isRoot(): boolean;
     get isLeaf(): boolean;
     get isInternal(): boolean;
@@ -35,7 +32,6 @@ export declare class NodeApi<T extends IdObj = IdObj> {
     get isSelectedStart(): boolean;
     get isSelectedEnd(): boolean;
     get isFocused(): boolean;
-    get childIndex(): number;
     get isDragging(): boolean;
     get willReceiveDrop(): boolean;
     get state(): {
@@ -48,6 +44,10 @@ export declare class NodeApi<T extends IdObj = IdObj> {
         isOpen: boolean;
         willReceiveDrop: boolean;
     };
+    get childIndex(): number;
+    get next(): NodeApi<T> | null;
+    get prev(): NodeApi<T> | null;
+    get nextSibling(): NodeApi<T> | null;
     select(): void;
     deselect(): void;
     selectMulti(): void;

package/dist/interfaces/tree-api.d.ts

@@ -44,7 +44,8 @@ export declare class TreeApi<T extends IdObj> {
     get rowHeight(): number;
     get searchTerm(): string;
     get matchFn(): (node: NodeApi<T>) => boolean;
-    getChildren(data: T): T[] | null;
+    accessChildren(data: T): T[] | null;
+    accessId(data: T): string;
     get firstNode(): NodeApi<T>;
     get lastNode(): NodeApi<T>;
     get focusedNode(): NodeApi<T> | null;
@@ -78,7 +79,7 @@ export declare class TreeApi<T extends IdObj> {
     deselect(node: Identity): void;
     selectMulti(identity: Identity): void;
     selectContiguous(identity: Identity): void;
-    selectNone(): void;
+    deselectAll(): void;
     selectAll(): void;
     get cursorParentId(): string | null;
     get cursorOverFolder(): boolean;

package/dist/module.js

@@ -227,16 +227,51 @@ function $164e874d21fcd87e$export$f9c541e71856c524({ node: node , attrs: attrs ,
 
 
 
-function $c4edd692d5290432$export$909e23cbfbbd3351({ style: style , node: node , dragHandle: dragHandle  }) {
+function $c4edd692d5290432$export$909e23cbfbbd3351(props) {
     return /*#__PURE__*/ (0, $g00cZ$jsxs)("div", {
-        style: style,
-        ref: dragHandle,
+        ref: props.dragHandle,
+        style: props.style,
         children: [
-            "ID: ",
-            node.data.id
+            /*#__PURE__*/ (0, $g00cZ$jsx)("span", {
+                onClick: (e)=>{
+                    e.stopPropagation();
+                    props.node.toggle();
+                },
+                children: props.node.isLeaf ? "\uD83C\uDF33" : props.node.isOpen ? "\uD83D\uDDC1" : "\uD83D\uDDC0"
+            }),
+            " ",
+            props.node.isEditing ? /*#__PURE__*/ (0, $g00cZ$jsx)($c4edd692d5290432$var$Edit, {
+                ...props
+            }) : /*#__PURE__*/ (0, $g00cZ$jsx)($c4edd692d5290432$var$Show, {
+                ...props
+            })
         ]
     });
 }
+function $c4edd692d5290432$var$Show(props) {
+    return /*#__PURE__*/ (0, $g00cZ$jsx)((0, $g00cZ$Fragment), {
+        children: /*#__PURE__*/ (0, $g00cZ$jsx)("span", {
+            children: props.node.data.name
+        })
+    });
+}
+function $c4edd692d5290432$var$Edit({ node: node  }) {
+    const input = (0, $g00cZ$useRef)();
+    (0, $g00cZ$useEffect)(()=>{
+        input.current?.focus();
+        input.current?.select();
+    }, []);
+    return /*#__PURE__*/ (0, $g00cZ$jsx)("input", {
+        ref: input,
+        // @ts-ignore
+        defaultValue: node.data.name,
+        onBlur: ()=>node.reset(),
+        onKeyDown: (e)=>{
+            if (e.key === "Escape") node.reset();
+            if (e.key === "Enter") node.submit(input.current?.value || "");
+        }
+    });
+}
 
 
 function $21783d2b0251be67$export$e1a8e267487c59d1(id) {
@@ -300,18 +335,6 @@ class $096e74084443e9a3$export$d4b903da0f522dc8 {
         this.isDroppable = params.isDroppable;
         this.rowIndex = params.rowIndex;
     }
-    get next() {
-        if (this.rowIndex === null) return null;
-        return this.tree.at(this.rowIndex + 1);
-    }
-    get prev() {
-        if (this.rowIndex === null) return null;
-        return this.tree.at(this.rowIndex - 1);
-    }
-    get nextSibling() {
-        const i = this.childIndex;
-        return this.parent?.children[i + 1] ?? null;
-    }
     get isRoot() {
         return this.id === (0, $81080a351c006222$export$ec71a3379b43ae5c);
     }
@@ -339,10 +362,6 @@ class $096e74084443e9a3$export$d4b903da0f522dc8 {
     get isFocused() {
         return this.tree.isFocused(this.id);
     }
-    get childIndex() {
-        if (this.parent && this.parent.children) return this.parent.children.findIndex((child)=>child.id === this.id);
-        else return -1;
-    }
     get isDragging() {
         return this.tree.isDragging(this.id);
     }
@@ -361,6 +380,22 @@ class $096e74084443e9a3$export$d4b903da0f522dc8 {
             willReceiveDrop: this.willReceiveDrop
         };
     }
+    get childIndex() {
+        if (this.parent && this.parent.children) return this.parent.children.findIndex((child)=>child.id === this.id);
+        else return -1;
+    }
+    get next() {
+        if (this.rowIndex === null) return null;
+        return this.tree.at(this.rowIndex + 1);
+    }
+    get prev() {
+        if (this.rowIndex === null) return null;
+        return this.tree.at(this.rowIndex - 1);
+    }
+    get nextSibling() {
+        const i = this.childIndex;
+        return this.parent?.children[i + 1] ?? null;
+    }
     select() {
         this.tree.select(this);
     }
@@ -419,18 +454,19 @@ class $096e74084443e9a3$export$d4b903da0f522dc8 {
 const $81080a351c006222$export$ec71a3379b43ae5c = "__REACT_ARBORIST_INTERNAL_ROOT__";
 function $81080a351c006222$export$882461b6382ed46c(tree) {
     function visitSelfAndChildren(data, level, parent) {
+        const id = tree.accessId(data);
         const node = new (0, $096e74084443e9a3$export$d4b903da0f522dc8)({
             tree: tree,
             data: data,
             level: level,
             parent: parent,
-            id: data.id,
+            id: id,
             children: null,
             isDraggable: tree.isDraggable(data),
             isDroppable: tree.isDroppable(data),
             rowIndex: null
         });
-        const children = tree.getChildren(data);
+        const children = tree.accessChildren(data);
         if (children) node.children = children.map((child)=>visitSelfAndChildren(child, level + 1, node));
         return node;
     }
@@ -801,7 +837,7 @@ const $05f64c7ebcbad8b5$export$70c2b8898b86d3ad = /*#__PURE__*/ (0, $g00cZ$forwa
         ref: ref,
         ...rest,
         onClick: (e)=>{
-            if (e.currentTarget === e.target) tree.selectNone();
+            if (e.currentTarget === e.target) tree.deselectAll();
         },
         children: [
             /*#__PURE__*/ (0, $g00cZ$jsx)($05f64c7ebcbad8b5$var$DropContainer, {}),
@@ -1220,6 +1256,7 @@ function $065a164934293bf2$export$ff4858a4110d9246() {
         onKeyDown: (e)=>{
             if (tree.isEditing) return;
             if (e.key === "Backspace") {
+                if (!tree.props.onDelete) return;
                 const ids = Array.from(tree.selectedIds);
                 if (ids.length > 1) {
                     let nextFocus = tree.mostRecentNode;
@@ -1303,10 +1340,12 @@ function $065a164934293bf2$export$ff4858a4110d9246() {
                 return;
             }
             if (e.key === "a" && !e.metaKey) {
+                if (!tree.props.onCreate) return;
                 tree.createLeaf();
                 return;
             }
             if (e.key === "A" && !e.metaKey) {
+                if (!tree.props.onCreate) return;
                 tree.createInternal();
                 return;
             }
@@ -1323,6 +1362,7 @@ function $065a164934293bf2$export$ff4858a4110d9246() {
                 return;
             }
             if (e.key === "Enter") {
+                if (!tree.props.onRename) return;
                 setTimeout(()=>{
                     if (tree.focusedNode) tree.edit(tree.focusedNode);
                 });
@@ -1490,10 +1530,16 @@ class $bfece7c4aed4e9c4$export$e2da3477247342d1 {
         });
         return (node)=>match(node, this.searchTerm);
     }
-    getChildren(data) {
-        const get = this.props.getChildren || "children";
+    accessChildren(data) {
+        const get = this.props.childrenAccessor || "children";
         return $0e6083160f4b36ed$exports.access(data, get) ?? null;
     }
+    accessId(data) {
+        const get = this.props.idAccessor || "id";
+        const id = $0e6083160f4b36ed$exports.access(data, get);
+        if (!id) throw new Error("Data must contain an 'id' property or props.idAccessor must return a string");
+        return id;
+    }
     /* Node Access */ get firstNode() {
         return this.visibleNodes[0] ?? null;
     }
@@ -1705,7 +1751,7 @@ class $bfece7c4aed4e9c4$export$e2da3477247342d1 {
         this.scrollTo(id);
         $bfece7c4aed4e9c4$var$safeRun(this.props.onSelect, this.selectedNodes);
     }
-    selectNone() {
+    deselectAll() {
         this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).clear());
         this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).anchor(null));
         this.dispatch((0, $37bc167debff36d2$export$e324594224ef24da).mostRecent(null));
@@ -1932,7 +1978,7 @@ function $dac24389e46ba09d$export$c49dab5eb1b4ce0c({ treeProps: treeProps , impe
     /* Expose the tree api */ (0, $g00cZ$useImperativeHandle)(imperativeHandle, ()=>api);
     /* Change selection based on props */ (0, $g00cZ$useEffect)(()=>{
         if (api.props.selection) api.select(api.props.selection);
-        else api.selectNone();
+        else api.deselectAll();
     }, [
         api.props.selection
     ]);