react-arborist 2.3.0 → 3.0.1

package/README.md

@@ -17,18 +17,13 @@ Here is a Gmail sidebar clone built with react-arborist.
 - Inline renaming
 - Virtualized rendering
 - Custom styling
-
-**New Features in Version 2**
-
 - Keyboard navigation
 - Aria attributes
 - Tree filtering
 - Selection synchronization
-- More callbacks (onScroll, onActivate, onSelect)
+- Callbacks (onScroll, onActivate, onSelect)
 - Controlled or uncontrolled trees
 
-> 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
 
 ```
@@ -265,25 +260,26 @@ These are all the props you can pass to the Tree component.
 ```ts
 interface TreeProps<T> {
   /* Data Options */
-  data?: T[];
-  initialData?: T[];
+  data?: readonly T[];
+  initialData?: readonly T[];
 
   /* Data Handlers */
-  onCreate?: handlers.CreateHandler;
-  onMove?: handlers.MoveHandler;
-  onRename?: handlers.RenameHandler;
-  onDelete?: handlers.DeleteHandler;
+  onCreate?: handlers.CreateHandler<T>;
+  onMove?: handlers.MoveHandler<T>;
+  onRename?: handlers.RenameHandler<T>;
+  onDelete?: handlers.DeleteHandler<T>;
 
   /* Renderers*/
   children?: ElementType<renderers.NodeRendererProps<T>>;
   renderRow?: ElementType<renderers.RowRendererProps<T>>;
   renderDragPreview?: ElementType<renderers.DragPreviewProps>;
   renderCursor?: ElementType<renderers.CursorProps>;
+  renderContainer?: ElementType<{}>;
 
   /* Sizes */
   rowHeight?: number;
   overscanCount?: number;
-  width?: number;
+  width?: number | string;
   height?: number;
   indent?: number;
   paddingTop?: number;
@@ -291,13 +287,21 @@ interface TreeProps<T> {
   padding?: number;
 
   /* Config */
+  childrenAccessor?: string | ((d: T) => T[] | null);
+  idAccessor?: string | ((d: T) => string);
   openByDefault?: boolean;
   selectionFollowsFocus?: boolean;
   disableMultiSelection?: boolean;
+  disableEdit?: string | boolean | BoolFunc<T>;
   disableDrag?: string | boolean | BoolFunc<T>;
-  disableDrop?: string | boolean | BoolFunc<T>;
-  childrenAccessor?: string | ((d: T) => T[]);
-  idAccessor?: string | ((d: T) => string);
+  disableDrop?:
+    | string
+    | boolean
+    | ((args: {
+        parentNode: NodeApi<T>;
+        dragNodes: NodeApi<T>[];
+        index: number;
+      }) => boolean);
 
   /* Event Handlers */
   onActivate?: (node: NodeApi<T>) => void;
@@ -319,6 +323,7 @@ interface TreeProps<T> {
   /* Extra */
   className?: string | undefined;
   rowClassName?: string | undefined;
+
   dndRootElement?: globalThis.Node | null;
   onClick?: MouseEventHandler;
   onContextMenu?: MouseEventHandler;

package/dist/components/list-inner-element.d.ts

@@ -1,2 +1,2 @@
 import React from "react";
-export declare const ListInnerElement: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const ListInnerElement: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<any>>;

package/dist/components/list-outer-element.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const ListOuterElement: (props: import("react").HTMLProps<HTMLDivElement> & import("react").RefAttributes<unknown>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export declare const ListOuterElement: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLProps<HTMLDivElement>, "id" | "children" | "data" | "open" | "cite" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "start" | "hidden" | "color" | "content" | "size" | "default" | "wrap" | "multiple" | "disabled" | "onFocus" | "onClick" | "list" | "name" | "defaultValue" | "onBlur" | "onKeyDown" | "accessKey" | "dir" | "draggable" | "lang" | "translate" | "className" | "classID" | "value" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "download" | "alt" | "coords" | "autoPlay" | "controls" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "accept" | "capture" | "checked" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "charSet" | "httpEquiv" | "high" | "low" | "reversed" | "selected" | "async" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "maxLength" | "minLength" | "kind" | "src" | "srcLang" | "preload" | "crossOrigin" | "defer" | "height" | "href" | "hrefLang" | "integrity" | "loop" | "marginHeight" | "marginWidth" | "max" | "media" | "mediaGroup" | "method" | "min" | "muted" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "readOnly" | "rel" | "required" | "rows" | "sandbox" | "scoped" | "scrolling" | "seamless" | "shape" | "sizes" | "srcDoc" | "srcSet" | "step" | "target" | "type" | "useMap" | "width" | "wmode" | "contentEditable" | "contextMenu" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import("react").RefAttributes<unknown>>;

package/dist/components/tree.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { TreeApi } from "../interfaces/tree-api";
 import { TreeProps } from "../types/tree-props";
-export declare const Tree: <T>(props: TreeProps<T> & import("react").RefAttributes<TreeApi<T> | undefined>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+declare function TreeComponent<T>(props: TreeProps<T>, ref: React.Ref<TreeApi<T> | undefined>): JSX.Element;
+export declare const Tree: <T>(props: TreeProps<T> & {
+    ref?: import("react").ForwardedRef<TreeApi<T> | undefined> | undefined;
+}) => ReturnType<typeof TreeComponent>;
+export {};

package/dist/index.js

@@ -201,7 +201,7 @@ 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;
+    if (focus.parent && !focus.parent.isRoot) return focus.parent.id;
     return null;
 }
 
@@ -374,7 +374,6 @@ class $9b37fe5960a1a3c6$export$d4b903da0f522dc8 {
         this.children = params.children;
         this.parent = params.parent;
         this.isDraggable = params.isDraggable;
-        this.isDroppable = params.isDroppable;
         this.rowIndex = params.rowIndex;
     }
     get isRoot() {
@@ -392,6 +391,9 @@ class $9b37fe5960a1a3c6$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;
     }
@@ -514,7 +516,6 @@ function $0d7f39915c1a8ae9$export$882461b6382ed46c(tree) {
             id: id,
             children: null,
             isDraggable: tree.isDraggable(data),
-            isDroppable: tree.isDroppable(data),
             rowIndex: null
         });
         const children = tree.accessChildren(data);
@@ -532,7 +533,6 @@ function $0d7f39915c1a8ae9$export$882461b6382ed46c(tree) {
         parent: null,
         children: null,
         isDraggable: true,
-        isDroppable: true,
         rowIndex: null
     });
     const data = tree.props.data ?? [];
@@ -635,7 +635,10 @@ const $9d556ecd8e421ffe$export$d4c72bab9d6cc13a = (props)=>({
             cursor: {
                 type: "none"
             },
-            dragId: null
+            dragId: null,
+            dragIds: [],
+            parentId: null,
+            index: -1
         }
     });
 
@@ -731,16 +734,24 @@ const $7d98f5b84ecaa66b$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 $7d98f5b84ecaa66b$export$1650419e431d3ba3(state = (0, $9d556ecd8e421ffe$export$d4c72bab9d6cc13a)()["dnd"], action) {
@@ -753,12 +764,16 @@ function $7d98f5b84ecaa66b$export$1650419e431d3ba3(state = (0, $9d556ecd8e421ffe
         case "DND_DRAG_START":
             return {
                 ...state,
-                dragId: action.id
+                dragId: action.id,
+                dragIds: action.dragIds
             };
         case "DND_DRAG_END":
+            return (0, $9d556ecd8e421ffe$export$d4c72bab9d6cc13a)()["dnd"];
+        case "DND_HOVERING":
             return {
                 ...state,
-                dragId: null
+                parentId: action.parentId,
+                index: action.index
             };
         default:
             return state;
@@ -946,32 +961,32 @@ function $74bee24dbb0f3e2b$export$715c0d031ede7907(node) {
     const [_, ref, preview] = (0, $foSVk$reactdnd.useDrag)(()=>({
             canDrag: ()=>node.isDraggable,
             type: "NODE",
-            item: ()=>({
-                    id: node.id,
-                    dragIds: tree.isSelected(node.id) ? Array.from(ids) : [
-                        node.id
-                    ]
-                }),
-            start: ()=>{
-                tree.dispatch((0, $7d98f5b84ecaa66b$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, $7d98f5b84ecaa66b$export$e324594224ef24da).dragStart(node.id, dragIds));
+                return {
+                    id: node.id
+                };
             },
-            end: (item, monitor)=>{
-                tree.dispatch((0, $7d98f5b84ecaa66b$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, $0d7f39915c1a8ae9$export$ec71a3379b43ae5c) ? null : drop.parentId;
+                if (tree.canDrop()) {
                     (0, $eb5355379510ac9b$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, $0d7f39915c1a8ae9$export$ec71a3379b43ae5c) ? null : parentId,
+                        index: index,
+                        dragNodes: tree.dragNodes,
+                        parentNode: tree.get(parentId)
                     });
-                    tree.open(drop.parentId);
+                    tree.open(parentId);
                 }
+                tree.dispatch((0, $7d98f5b84ecaa66b$export$e324594224ef24da).dragEnd());
             }
         }), [
         ids,
@@ -989,7 +1004,6 @@ function $74bee24dbb0f3e2b$export$715c0d031ede7907(node) {
 
 
 
-
 function $462841de7cc5b715$var$measureHover(el, offset) {
     const rect = el.getBoundingClientRect();
     const x = offset.x - Math.round(rect.x);
@@ -1056,16 +1070,6 @@ function $462841de7cc5b715$var$getDropLevel(hovering, aboveCursor, belowCursor,
     }
     return (0, $eb5355379510ac9b$export$adf7c0fe6059d774)(hoverLevel, min, max);
 }
-function $462841de7cc5b715$var$canDrop(above, below) {
-    if (!above) return true;
-    let n = above;
-    if ((0, $eb5355379510ac9b$export$4210f5ea57fbae57)(above) && above !== below) n = above.parent;
-    while(n){
-        if (!n.isDroppable) return false;
-        n = n.parent;
-    }
-    return true;
-}
 function $462841de7cc5b715$var$dropAt(parentId, index) {
     return {
         parentId: parentId || null,
@@ -1104,10 +1108,6 @@ function $462841de7cc5b715$export$f502ca02ebb85a1c(args) {
     const hover = $462841de7cc5b715$var$measureHover(args.element, args.offset);
     const { node: node , nextNode: nextNode , prevNode: prevNode  } = args;
     const [above, below] = $462841de7cc5b715$var$getNodesAroundCursor(node, prevNode, nextNode, hover);
-    if (!$462841de7cc5b715$var$canDrop(above, below)) return {
-        drop: null,
-        cursor: $462841de7cc5b715$var$noCursor()
-    };
     /* Hovering over the middle of a folder */ if (node && node.isInternal && hover.inMiddle) return {
         drop: $462841de7cc5b715$var$dropAt(node.id, 0),
         cursor: $462841de7cc5b715$var$highlightCursor(node.id)
@@ -1130,15 +1130,16 @@ function $462841de7cc5b715$export$f502ca02ebb85a1c(args) {
 }
 
 
+
 function $cf8ebdb33758b119$export$57afafec4637d997(el, node) {
     const tree = (0, $d5cb84d44d1b8acc$export$367b0f2231a90ba0)();
     const [_, dropRef] = (0, $foSVk$reactdnd.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, $462841de7cc5b715$export$f502ca02ebb85a1c)({
+                if (!el.current || !offset) return;
+                const { cursor: cursor , drop: drop  } = (0, $462841de7cc5b715$export$f502ca02ebb85a1c)({
                     element: el.current,
                     offset: offset,
                     indent: tree.indent,
@@ -1146,43 +1147,13 @@ function $cf8ebdb33758b119$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, $eb5355379510ac9b$export$1e38f72c6c546f70)(dropParent, drag)) return false;
-                }
-                return true;
-            },
-            hover: (item, m)=>{
+                if (drop) tree.dispatch((0, $7d98f5b84ecaa66b$export$e324594224ef24da).hovering(drop.parentId, drop.index));
                 if (m.canDrop()) {
-                    const offset = m.getClientOffset();
-                    if (!el.current || !offset) return;
-                    const { cursor: cursor  } = (0, $462841de7cc5b715$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, $462841de7cc5b715$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,
@@ -1418,26 +1389,28 @@ function $bb9a1e34249689ac$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") {
@@ -1458,13 +1431,13 @@ function $bb9a1e34249689ac$export$ff4858a4110d9246() {
             $bb9a1e34249689ac$var$timeoutId = setTimeout(()=>{
                 $bb9a1e34249689ac$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($bb9a1e34249689ac$var$focusSearchTerm);
                 else return false;
             });
-            if (node5) tree.focus(node5.id);
+            if (node6) tree.focus(node6.id);
         },
         children: /*#__PURE__*/ (0, $foSVk$reactjsxruntime.jsx)((0, $foSVk$reactwindow.FixedSizeList), {
             className: tree.props.className,
@@ -1831,6 +1804,30 @@ class $5c74fef433be2b0a$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 && $eb5355379510ac9b$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, $7d98f5b84ecaa66b$export$e324594224ef24da).cursor({
             type: "none"
@@ -1928,12 +1925,12 @@ class $5c74fef433be2b0a$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 !$eb5355379510ac9b$exports.access(data, check) ?? true;
     }
-    isDroppable(data) {
-        const check = this.props.disableDrop || (()=>false);
+    isDraggable(data) {
+        const check = this.props.disableDrag || (()=>false);
         return !$eb5355379510ac9b$exports.access(data, check) ?? true;
     }
     isDragging(node) {
@@ -2096,54 +2093,19 @@ function $6c0a9a91d5e7ff45$export$5a6c424b1725f44f() {
     // In case we drop an item at the bottom of the list
     const [, drop] = (0, $foSVk$reactdnd.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, $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();
+                })) 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, $462841de7cc5b715$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, $eb5355379510ac9b$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, $462841de7cc5b715$export$f502ca02ebb85a1c)({
+                const { cursor: cursor , drop: drop  } = (0, $462841de7cc5b715$export$f502ca02ebb85a1c)({
                     element: tree.listEl.current,
                     offset: offset,
                     indent: tree.indent,
@@ -2151,7 +2113,10 @@ function $6c0a9a91d5e7ff45$export$5a6c424b1725f44f() {
                     prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
                     nextNode: null
                 });
-                return drop;
+                if (drop) tree.dispatch((0, $7d98f5b84ecaa66b$export$e324594224ef24da).hovering(drop.parentId, drop.index));
+                if (m.canDrop()) {
+                    if (cursor) tree.showCursor(cursor);
+                } else tree.hideCursor();
             }
         }), [
         tree
@@ -2379,7 +2344,7 @@ Use the data prop if you want to provide your own handlers.`);
 }
 
 
-const $641461e16d1a2941$export$7fbedc92909ed28e = /*#__PURE__*/ (0, $foSVk$react.forwardRef)(function Tree(props, ref) {
+function $641461e16d1a2941$var$TreeComponent(props, ref) {
     const treeProps = (0, $8e1ae4dab2259e77$export$d227906824a13416)(props);
     return /*#__PURE__*/ (0, $foSVk$reactjsxruntime.jsxs)((0, $9511ad6af37da13b$export$c49dab5eb1b4ce0c), {
         treeProps: treeProps,
@@ -2391,7 +2356,8 @@ const $641461e16d1a2941$export$7fbedc92909ed28e = /*#__PURE__*/ (0, $foSVk$react
             /*#__PURE__*/ (0, $foSVk$reactjsxruntime.jsx)((0, $ed13b1d404b3872b$export$3e21b60650ec7e55), {})
         ]
     });
-});
+}
+const $641461e16d1a2941$export$7fbedc92909ed28e = /*#__PURE__*/ (0, $foSVk$react.forwardRef)($641461e16d1a2941$var$TreeComponent);
 
 
 var $73c61fb8fd3b5237$exports = {};