react-arborist 2.2.0 → 3.0.0

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

@@ -7,7 +7,6 @@ declare type Params<T> = {
     children: NodeApi<T>[] | null;
     parent: NodeApi<T> | null;
     isDraggable: boolean;
-    isDroppable: boolean;
     rowIndex: number | null;
     tree: TreeApi<T>;
 };
@@ -19,7 +18,6 @@ export declare class NodeApi<T = any> {
     children: NodeApi<T>[] | null;
     parent: NodeApi<T> | null;
     isDraggable: boolean;
-    isDroppable: boolean;
     rowIndex: number | null;
     constructor(params: Params<T>);
     get isRoot(): boolean;
@@ -27,6 +25,7 @@ export declare class NodeApi<T = any> {
     get isInternal(): boolean;
     get isOpen(): boolean;
     get isClosed(): boolean;
+    get isEditable(): boolean;
     get isEditing(): boolean;
     get isSelected(): boolean;
     get isOnlySelection(): boolean;

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

@@ -42,6 +42,7 @@ export declare class TreeApi<T> {
     get height(): number;
     get indent(): number;
     get rowHeight(): number;
+    get overscanCount(): number;
     get searchTerm(): string;
     get matchFn(): (node: NodeApi<T>) => boolean;
     accessChildren(data: T): T[] | null;
@@ -87,6 +88,8 @@ export declare class TreeApi<T> {
     selectAll(): void;
     get cursorParentId(): string | null;
     get cursorOverFolder(): boolean;
+    get dragNodes(): NodeApi<T>[];
+    canDrop(): boolean;
     hideCursor(): void;
     showCursor(cursor: Cursor): void;
     open(identity: Identity): void;
@@ -105,8 +108,8 @@ export declare class TreeApi<T> {
     get hasMultipleSelections(): boolean;
     isSelected(id?: string): boolean;
     isOpen(id?: string): boolean;
+    isEditable(data: T): boolean;
     isDraggable(data: T): boolean;
-    isDroppable(data: T): boolean;
     isDragging(node: string | IdObj | null): boolean;
     isFocused(id: string): boolean;
     isMatch(node: NodeApi<T>): boolean;

package/dist/module.js

@@ -180,7 +180,7 @@ function $0e6083160f4b36ed$export$58fe32731f07ed56(tree) {
     const focus = tree.focusedNode;
     if (!focus) return null;
     if (focus.isOpen) return focus.id;
-    if (focus.parent) return focus.parent.id;
+    if (focus.parent && !focus.parent.isRoot) return focus.parent.id;
     return null;
 }
 
@@ -353,7 +353,6 @@ class $096e74084443e9a3$export$d4b903da0f522dc8 {
         this.children = params.children;
         this.parent = params.parent;
         this.isDraggable = params.isDraggable;
-        this.isDroppable = params.isDroppable;
         this.rowIndex = params.rowIndex;
     }
     get isRoot() {
@@ -371,6 +370,9 @@ class $096e74084443e9a3$export$d4b903da0f522dc8 {
     get isClosed() {
         return this.isLeaf ? false : !this.tree.isOpen(this.id);
     }
+    get isEditable() {
+        return this.tree.isEditable(this.data);
+    }
     get isEditing() {
         return this.tree.editingId === this.id;
     }
@@ -493,7 +495,6 @@ function $81080a351c006222$export$882461b6382ed46c(tree) {
             id: id,
             children: null,
             isDraggable: tree.isDraggable(data),
-            isDroppable: tree.isDroppable(data),
             rowIndex: null
         });
         const children = tree.accessChildren(data);
@@ -511,7 +512,6 @@ function $81080a351c006222$export$882461b6382ed46c(tree) {
         parent: null,
         children: null,
         isDraggable: true,
-        isDroppable: true,
         rowIndex: null
     });
     const data = tree.props.data ?? [];
@@ -614,7 +614,10 @@ const $6ad32e02250c922e$export$d4c72bab9d6cc13a = (props)=>({
             cursor: {
                 type: "none"
             },
-            dragId: null
+            dragId: null,
+            dragIds: [],
+            parentId: null,
+            index: -1
         }
     });
 
@@ -710,16 +713,24 @@ const $59f144a8dd651e5e$export$e324594224ef24da = {
             cursor: cursor
         };
     },
-    dragStart (id) {
+    dragStart (id, dragIds) {
         return {
             type: "DND_DRAG_START",
-            id: id
+            id: id,
+            dragIds: dragIds
         };
     },
     dragEnd () {
         return {
             type: "DND_DRAG_END"
         };
+    },
+    hovering (parentId, index) {
+        return {
+            type: "DND_HOVERING",
+            parentId: parentId,
+            index: index
+        };
     }
 };
 function $59f144a8dd651e5e$export$1650419e431d3ba3(state = (0, $6ad32e02250c922e$export$d4c72bab9d6cc13a)()["dnd"], action) {
@@ -732,12 +743,16 @@ function $59f144a8dd651e5e$export$1650419e431d3ba3(state = (0, $6ad32e02250c922e
         case "DND_DRAG_START":
             return {
                 ...state,
-                dragId: action.id
+                dragId: action.id,
+                dragIds: action.dragIds
             };
         case "DND_DRAG_END":
+            return (0, $6ad32e02250c922e$export$d4c72bab9d6cc13a)()["dnd"];
+        case "DND_HOVERING":
             return {
                 ...state,
-                dragId: null
+                parentId: action.parentId,
+                index: action.index
             };
         default:
             return state;
@@ -925,32 +940,32 @@ function $907e707a330ef23a$export$715c0d031ede7907(node) {
     const [_, ref, preview] = (0, $g00cZ$useDrag)(()=>({
             canDrag: ()=>node.isDraggable,
             type: "NODE",
-            item: ()=>({
-                    id: node.id,
-                    dragIds: tree.isSelected(node.id) ? Array.from(ids) : [
-                        node.id
-                    ]
-                }),
-            start: ()=>{
-                tree.dispatch((0, $59f144a8dd651e5e$export$e324594224ef24da).dragStart(node.id));
+            item: ()=>{
+                // This is fired once at the begging of a drag operation
+                const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [
+                    node.id
+                ];
+                tree.dispatch((0, $59f144a8dd651e5e$export$e324594224ef24da).dragStart(node.id, dragIds));
+                return {
+                    id: node.id
+                };
             },
-            end: (item, monitor)=>{
-                tree.dispatch((0, $59f144a8dd651e5e$export$e324594224ef24da).dragEnd());
+            end: ()=>{
                 tree.hideCursor();
-                const drop = monitor.getDropResult();
+                let { parentId: parentId , index: index , dragIds: dragIds  } = tree.state.dnd;
                 // If they held down meta, we need to create a copy
                 // if (drop.dropEffect === "copy")
-                if (drop && drop.parentId) {
-                    const parentId = drop.parentId === (0, $81080a351c006222$export$ec71a3379b43ae5c) ? null : drop.parentId;
+                if (tree.canDrop()) {
                     (0, $0e6083160f4b36ed$export$c6d63370cef03886)(tree.props.onMove, {
-                        dragIds: item.dragIds,
-                        parentId: parentId,
-                        index: drop.index,
-                        dragNodes: item.dragIds.map((id)=>tree.get(id)),
-                        parentNode: tree.get(drop.parentId)
+                        dragIds: dragIds,
+                        parentId: parentId === (0, $81080a351c006222$export$ec71a3379b43ae5c) ? null : parentId,
+                        index: index,
+                        dragNodes: tree.dragNodes,
+                        parentNode: tree.get(parentId)
                     });
-                    tree.open(drop.parentId);
+                    tree.open(parentId);
                 }
+                tree.dispatch((0, $59f144a8dd651e5e$export$e324594224ef24da).dragEnd());
             }
         }), [
         ids,
@@ -968,7 +983,6 @@ function $907e707a330ef23a$export$715c0d031ede7907(node) {
 
 
 
-
 function $2db980bfed6822da$var$measureHover(el, offset) {
     const rect = el.getBoundingClientRect();
     const x = offset.x - Math.round(rect.x);
@@ -1035,16 +1049,6 @@ function $2db980bfed6822da$var$getDropLevel(hovering, aboveCursor, belowCursor,
     }
     return (0, $0e6083160f4b36ed$export$adf7c0fe6059d774)(hoverLevel, min, max);
 }
-function $2db980bfed6822da$var$canDrop(above, below) {
-    if (!above) return true;
-    let n = above;
-    if ((0, $0e6083160f4b36ed$export$4210f5ea57fbae57)(above) && above !== below) n = above.parent;
-    while(n){
-        if (!n.isDroppable) return false;
-        n = n.parent;
-    }
-    return true;
-}
 function $2db980bfed6822da$var$dropAt(parentId, index) {
     return {
         parentId: parentId || null,
@@ -1083,10 +1087,6 @@ function $2db980bfed6822da$export$f502ca02ebb85a1c(args) {
     const hover = $2db980bfed6822da$var$measureHover(args.element, args.offset);
     const { node: node , nextNode: nextNode , prevNode: prevNode  } = args;
     const [above, below] = $2db980bfed6822da$var$getNodesAroundCursor(node, prevNode, nextNode, hover);
-    if (!$2db980bfed6822da$var$canDrop(above, below)) return {
-        drop: null,
-        cursor: $2db980bfed6822da$var$noCursor()
-    };
     /* Hovering over the middle of a folder */ if (node && node.isInternal && hover.inMiddle) return {
         drop: $2db980bfed6822da$var$dropAt(node.id, 0),
         cursor: $2db980bfed6822da$var$highlightCursor(node.id)
@@ -1109,15 +1109,16 @@ function $2db980bfed6822da$export$f502ca02ebb85a1c(args) {
 }
 
 
+
 function $d38aa53467160173$export$57afafec4637d997(el, node) {
     const tree = (0, $89e93131aae74bd9$export$367b0f2231a90ba0)();
     const [_, dropRef] = (0, $g00cZ$useDrop)(()=>({
             accept: "NODE",
-            canDrop: (item, m)=>{
-                if (node.tree.isFiltered) return false;
+            canDrop: ()=>tree.canDrop(),
+            hover: (_item, m)=>{
                 const offset = m.getClientOffset();
-                if (!el.current || !offset) return false;
-                const { drop: drop  } = (0, $2db980bfed6822da$export$f502ca02ebb85a1c)({
+                if (!el.current || !offset) return;
+                const { cursor: cursor , drop: drop  } = (0, $2db980bfed6822da$export$f502ca02ebb85a1c)({
                     element: el.current,
                     offset: offset,
                     indent: tree.indent,
@@ -1125,43 +1126,13 @@ function $d38aa53467160173$export$57afafec4637d997(el, node) {
                     prevNode: node.prev,
                     nextNode: node.next
                 });
-                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, $0e6083160f4b36ed$export$1e38f72c6c546f70)(dropParent, drag)) return false;
-                }
-                return true;
-            },
-            hover: (item, m)=>{
+                if (drop) tree.dispatch((0, $59f144a8dd651e5e$export$e324594224ef24da).hovering(drop.parentId, drop.index));
                 if (m.canDrop()) {
-                    const offset = m.getClientOffset();
-                    if (!el.current || !offset) return;
-                    const { cursor: cursor  } = (0, $2db980bfed6822da$export$f502ca02ebb85a1c)({
-                        element: el.current,
-                        offset: offset,
-                        indent: tree.indent,
-                        node: node,
-                        prevNode: node.prev,
-                        nextNode: node.next
-                    });
                     if (cursor) tree.showCursor(cursor);
                 } else tree.hideCursor();
             },
-            drop: (item, m)=>{
-                const offset = m.getClientOffset();
-                if (!el.current || !offset) return;
-                const { drop: drop  } = (0, $2db980bfed6822da$export$f502ca02ebb85a1c)({
-                    element: el.current,
-                    offset: offset,
-                    indent: tree.indent,
-                    node: node,
-                    prevNode: node.prev,
-                    nextNode: node.next
-                });
-                return drop;
+            drop: (_, m)=>{
+                if (!m.canDrop()) return null;
             }
         }), [
         node,
@@ -1375,8 +1346,7 @@ function $065a164934293bf2$export$ff4858a4110d9246() {
                 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;
             }
@@ -1398,26 +1368,28 @@ function $065a164934293bf2$export$ff4858a4110d9246() {
                 return;
             }
             if (e.key === "Enter") {
-                if (!tree.props.onRename) return;
+                const node3 = tree.focusedNode;
+                if (!node3) return;
+                if (!node3.isEditable || !tree.props.onRename) return;
                 setTimeout(()=>{
-                    if (tree.focusedNode) tree.edit(tree.focusedNode);
+                    if (node3) tree.edit(node3);
                 });
                 return;
             }
             if (e.key === " ") {
                 e.preventDefault();
-                const node3 = tree.focusedNode;
-                if (!node3) return;
-                if (node3.isLeaf) {
-                    node3.select();
-                    node3.activate();
-                } else node3.toggle();
+                const node4 = tree.focusedNode;
+                if (!node4) return;
+                if (node4.isLeaf) {
+                    node4.select();
+                    node4.activate();
+                } else node4.toggle();
                 return;
             }
             if (e.key === "*") {
-                const node4 = tree.focusedNode;
-                if (!node4) return;
-                tree.openSiblings(node4);
+                const node5 = tree.focusedNode;
+                if (!node5) return;
+                tree.openSiblings(node5);
                 return;
             }
             if (e.key === "PageUp") {
@@ -1438,13 +1410,13 @@ function $065a164934293bf2$export$ff4858a4110d9246() {
             $065a164934293bf2$var$timeoutId = setTimeout(()=>{
                 $065a164934293bf2$var$focusSearchTerm = "";
             }, 600);
-            const node5 = tree.visibleNodes.find((n)=>{
+            const node6 = tree.visibleNodes.find((n)=>{
                 // @ts-ignore
                 const name = n.data.name;
                 if (typeof name === "string") return name.toLowerCase().startsWith($065a164934293bf2$var$focusSearchTerm);
                 else return false;
             });
-            if (node5) tree.focus(node5.id);
+            if (node6) tree.focus(node6.id);
         },
         children: /*#__PURE__*/ (0, $g00cZ$jsx)((0, $g00cZ$FixedSizeList), {
             className: tree.props.className,
@@ -1453,6 +1425,7 @@ function $065a164934293bf2$export$ff4858a4110d9246() {
             height: tree.height,
             width: tree.width,
             itemSize: tree.rowHeight,
+            overscanCount: tree.overscanCount,
             itemKey: (index)=>tree.visibleNodes[index]?.id || index,
             outerElementType: (0, $05f64c7ebcbad8b5$export$70c2b8898b86d3ad),
             innerElementType: (0, $da9a6b47b6fff922$export$a9af0da3ae60cd00),
@@ -1550,6 +1523,9 @@ class $bfece7c4aed4e9c4$export$e2da3477247342d1 {
     get rowHeight() {
         return this.props.rowHeight ?? 24;
     }
+    get overscanCount() {
+        return this.props.overscanCount ?? 1;
+    }
     get searchTerm() {
         return (this.props.searchTerm || "").trim();
     }
@@ -1807,6 +1783,30 @@ class $bfece7c4aed4e9c4$export$e2da3477247342d1 {
     get cursorOverFolder() {
         return this.state.dnd.cursor.type === "highlight";
     }
+    get dragNodes() {
+        return this.state.dnd.dragIds.map((id)=>this.get(id)).filter((n)=>!!n);
+    }
+    canDrop() {
+        if (this.isFiltered) return false;
+        const parentNode = this.get(this.state.dnd.parentId) ?? this.root;
+        const dragNodes = this.dragNodes;
+        const check = this.props.disableDrop;
+        for (const drag of dragNodes){
+            if (!drag) return false;
+            if (!parentNode) return false;
+            if (drag.isInternal && $0e6083160f4b36ed$exports.isDecendent(parentNode, drag)) return false;
+        }
+        // Allow the user to insert their own logic
+        if (typeof check == "function") return check({
+            parentNode: parentNode,
+            dragNodes: this.dragNodes,
+            index: this.state.dnd.index
+        });
+        else if (typeof check == "string") // @ts-ignore
+        return !!parentNode.data[check];
+        else if (typeof check === "boolean") return check;
+        else return true;
+    }
     hideCursor() {
         this.dispatch((0, $59f144a8dd651e5e$export$e324594224ef24da).cursor({
             type: "none"
@@ -1904,12 +1904,12 @@ class $bfece7c4aed4e9c4$export$e2da3477247342d1 {
         if (this.isFiltered) return this.state.nodes.open.filtered[id] ?? true; // Filtered folders are always opened by default
         else return this.state.nodes.open.unfiltered[id] ?? def;
     }
-    isDraggable(data) {
-        const check = this.props.disableDrag || (()=>false);
+    isEditable(data) {
+        const check = this.props.disableEdit || (()=>false);
         return !$0e6083160f4b36ed$exports.access(data, check) ?? true;
     }
-    isDroppable(data) {
-        const check = this.props.disableDrop || (()=>false);
+    isDraggable(data) {
+        const check = this.props.disableDrag || (()=>false);
         return !$0e6083160f4b36ed$exports.access(data, check) ?? true;
     }
     isDragging(node) {
@@ -2072,54 +2072,19 @@ function $e739455e59c6aed3$export$5a6c424b1725f44f() {
     // In case we drop an item at the bottom of the list
     const [, drop] = (0, $g00cZ$useDrop)(()=>({
             accept: "NODE",
-            hover: (item, m)=>{
+            canDrop: (_item, m)=>{
                 if (!m.isOver({
                     shallow: true
-                })) return;
-                if (m.canDrop()) {
-                    const offset = m.getClientOffset();
-                    if (!tree.listEl.current || !offset) return;
-                    const { cursor: cursor  } = (0, $2db980bfed6822da$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();
+                })) return false;
+                return tree.canDrop();
             },
-            canDrop: (item, m)=>{
+            hover: (_item, m)=>{
                 if (!m.isOver({
                     shallow: true
-                })) return false;
-                if (tree.isFiltered) return false;
-                const offset = m.getClientOffset();
-                if (!tree.listEl.current || !offset) return false;
-                const { drop: drop  } = (0, $2db980bfed6822da$export$f502ca02ebb85a1c)({
-                    element: tree.listEl.current,
-                    offset: offset,
-                    indent: tree.indent,
-                    node: null,
-                    prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
-                    nextNode: null
-                });
-                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, $0e6083160f4b36ed$export$1e38f72c6c546f70)(dropParent, drag)) return false;
-                }
-                return true;
-            },
-            drop: (item, m)=>{
-                if (m.didDrop()) return;
+                })) return;
                 const offset = m.getClientOffset();
                 if (!tree.listEl.current || !offset) return;
-                const { drop: drop  } = (0, $2db980bfed6822da$export$f502ca02ebb85a1c)({
+                const { cursor: cursor , drop: drop  } = (0, $2db980bfed6822da$export$f502ca02ebb85a1c)({
                     element: tree.listEl.current,
                     offset: offset,
                     indent: tree.indent,
@@ -2127,7 +2092,10 @@ function $e739455e59c6aed3$export$5a6c424b1725f44f() {
                     prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
                     nextNode: null
                 });
-                return drop;
+                if (drop) tree.dispatch((0, $59f144a8dd651e5e$export$e324594224ef24da).hovering(drop.parentId, drop.index));
+                if (m.canDrop()) {
+                    if (cursor) tree.showCursor(cursor);
+                } else tree.hideCursor();
             }
         }), [
         tree