react-arborist 1.1.0 → 1.2.0

package/dist/index.js

@@ -2,9 +2,9 @@ var $foSVk$reactjsxruntime = require("react/jsx-runtime");
 var $foSVk$react = require("react");
 var $foSVk$reactdnd = require("react-dnd");
 var $foSVk$reactdndhtml5backend = require("react-dnd-html5-backend");
-var $foSVk$reactwindow = require("react-window");
 var $foSVk$memoizeone = require("memoize-one");
 var $foSVk$reactdom = require("react-dom");
+var $foSVk$reactwindow = require("react-window");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -19,6 +19,48 @@ $parcel$export(module.exports, "TreeApi", () => $f02bc7cefcb30793$export$e2da347
 
 
 
+function $2d914ccbe0a16edd$var$createNode(model, level, parent, children, isOpen, isDraggable, isDroppable) {
+    return {
+        id: model.id,
+        level: level,
+        parent: parent,
+        children: children,
+        isOpen: isOpen,
+        isDraggable: isDraggable,
+        isDroppable: isDroppable,
+        model: model,
+        rowIndex: null
+    };
+}
+function $2d914ccbe0a16edd$var$access(obj, accessor) {
+    if (typeof accessor === "boolean") return accessor;
+    if (typeof accessor === "string") return obj[accessor];
+    return accessor(obj);
+}
+function $2d914ccbe0a16edd$export$9c537176392280a0(model1, hideRoot = false, getChildren = "children", isOpen = "isOpen", disableDrag = false, disableDrop = false, openByDefault = true) {
+    function visitSelfAndChildren(model, level, parent) {
+        const open = $2d914ccbe0a16edd$var$access(model, isOpen);
+        const draggable = !$2d914ccbe0a16edd$var$access(model, disableDrag);
+        const droppable = !$2d914ccbe0a16edd$var$access(model, disableDrop);
+        const node = $2d914ccbe0a16edd$var$createNode(model, level, parent, null, open === undefined ? openByDefault : open, draggable, droppable);
+        const children = $2d914ccbe0a16edd$var$access(model, getChildren);
+        if (children) node.children = children.map((child)=>visitSelfAndChildren(child, level + 1, node)
+        );
+        return node;
+    }
+    return visitSelfAndChildren(model1, hideRoot ? -1 : 0, null);
+}
+
+
+
+
+
+const $6723c76b9de38fd1$export$feef243b04ff4151 = /*#__PURE__*/ $foSVk$react.createContext(null);
+function $6723c76b9de38fd1$export$367b0f2231a90ba0() {
+    const value = $foSVk$react.useContext($6723c76b9de38fd1$export$feef243b04ff4151);
+    if (value === null) throw new Error("No Tree Api Provided");
+    return value;
+}
 
 
 class $13a483230b6b2ece$export$9a58ef0d7ad3278c {
@@ -202,82 +244,182 @@ class $974b6ba4b06bc58f$export$52baac22726c72bf {
 }
 
 
-const $6723c76b9de38fd1$export$7380e5d4146ff2ce = /*#__PURE__*/ $foSVk$react.createContext(null);
-function $6723c76b9de38fd1$export$8e294ac6de4c921f() {
-    return $foSVk$react.useContext($6723c76b9de38fd1$export$7380e5d4146ff2ce);
-}
-const $6723c76b9de38fd1$export$86fe4415b73783a1 = /*#__PURE__*/ $foSVk$react.createContext(false);
-function $6723c76b9de38fd1$export$f3ad962ff713505f() {
-    return $foSVk$react.useContext($6723c76b9de38fd1$export$86fe4415b73783a1);
-}
-const $6723c76b9de38fd1$export$76f51715425ee155 = /*#__PURE__*/ $foSVk$react.createContext(null);
-function $6723c76b9de38fd1$export$6c87584817ff2461() {
-    return $foSVk$react.useContext($6723c76b9de38fd1$export$76f51715425ee155);
-}
-const $6723c76b9de38fd1$export$c1b9a1d3af45b7b6 = /*#__PURE__*/ $foSVk$react.createContext(null);
-function $6723c76b9de38fd1$export$ea6c3ae2bd3a5510() {
-    const value = $foSVk$react.useContext($6723c76b9de38fd1$export$c1b9a1d3af45b7b6);
-    if (!value) throw new Error("Context must be in a provider");
-    return value;
-}
-const $6723c76b9de38fd1$export$f34e95fabff36a8f = /*#__PURE__*/ $foSVk$react.createContext(null);
-function $6723c76b9de38fd1$export$8ad76b76a4c905f8() {
-    const dispatch = $foSVk$react.useContext($6723c76b9de38fd1$export$f34e95fabff36a8f);
-    if (!dispatch) throw new Error("No dispatch provided");
-    return dispatch;
+const $da0693b023d53dfe$export$f6196a6c6bb539b4 = ()=>({
+        visibleIds: [],
+        cursor: {
+            type: "none"
+        },
+        editingId: null,
+        selection: {
+            data: null,
+            ids: []
+        }
+    })
+;
+const $da0693b023d53dfe$export$e324594224ef24da = {
+    setCursorLocation: (cursor)=>({
+            type: "SET_CURSOR_LOCATION",
+            cursor: cursor
+        })
+    ,
+    setVisibleIds: (ids, idMap // id to index
+    )=>({
+            type: "SET_VISIBLE_IDS",
+            ids: ids,
+            idMap: idMap
+        })
+    ,
+    select: (index, meta, shift)=>({
+            type: "SELECT",
+            index: index,
+            meta: meta,
+            shift: shift
+        })
+    ,
+    selectId: (id)=>({
+            type: "SELECT_ID",
+            id: id
+        })
+    ,
+    edit: (id)=>({
+            type: "EDIT",
+            id: id
+        })
+    ,
+    stepUp: (shift, ids)=>({
+            type: "STEP_UP",
+            shift: shift
+        })
+    ,
+    stepDown: (shift, ids)=>({
+            type: "STEP_DOWN",
+            shift: shift
+        })
+};
+function $da0693b023d53dfe$export$1650419e431d3ba3(state, action) {
+    switch(action.type){
+        case "EDIT":
+            return {
+                ...state,
+                editingId: action.id
+            };
+        case "SET_CURSOR_LOCATION":
+            if ($da0693b023d53dfe$var$equal(state.cursor, action.cursor)) return state;
+            else return {
+                ...state,
+                cursor: action.cursor
+            };
+        case "SELECT":
+            var s = $974b6ba4b06bc58f$export$52baac22726c72bf.parse(state.selection.data, state.visibleIds);
+            if (action.index === null) s.clear();
+            else if (action.meta) {
+                if (s.contains(action.index)) s.deselect(action.index);
+                else s.multiSelect(action.index);
+            } else if (action.shift) s.extend(action.index);
+            else s.select(action.index);
+            return {
+                ...state,
+                selection: {
+                    data: s.serialize(),
+                    ids: s.getSelectedItems()
+                }
+            };
+        case "SELECT_ID":
+            return {
+                ...state,
+                selection: {
+                    ...state.selection,
+                    ids: [
+                        action.id
+                    ]
+                }
+            };
+        case "STEP_UP":
+            var s3 = $974b6ba4b06bc58f$export$52baac22726c72bf.parse(state.selection.data, state.visibleIds);
+            var f = s3.getFocus();
+            if (action.shift) s3.extend(f - 1);
+            else s3.select(f - 1);
+            return {
+                ...state,
+                selection: {
+                    data: s3.serialize(),
+                    ids: s3.getSelectedItems()
+                }
+            };
+        case "STEP_DOWN":
+            var s6 = $974b6ba4b06bc58f$export$52baac22726c72bf.parse(state.selection.data, state.visibleIds);
+            var f2 = s6.getFocus();
+            if (action.shift) s6.extend(f2 + 1);
+            else s6.select(f2 + 1);
+            return {
+                ...state,
+                selection: {
+                    data: s6.serialize(),
+                    ids: s6.getSelectedItems()
+                }
+            };
+        case "SET_VISIBLE_IDS":
+            // The visible ids changed
+            var ids = state.selection.ids;
+            // Start with a blank selection
+            var s2 = new $974b6ba4b06bc58f$export$52baac22726c72bf([], null, "none", state.visibleIds);
+            // Add each of the old selected ids to this new selection
+            for (let id of ids)if (id in action.idMap) s2.multiSelect(action.idMap[id]);
+            return {
+                ...state,
+                visibleIds: action.ids,
+                selection: {
+                    ids: ids,
+                    data: s2.serialize()
+                }
+            };
+        default:
+            return state;
+    }
 }
-const $6723c76b9de38fd1$export$7c7a4fd7f1336e2c = /*#__PURE__*/ $foSVk$react.createContext(null);
-function $6723c76b9de38fd1$export$1c9b7756eccadc96() {
-    const value = $foSVk$react.useContext($6723c76b9de38fd1$export$7c7a4fd7f1336e2c);
-    if (!value) throw new Error("Must provide selection context");
-    return value.ids;
+function $da0693b023d53dfe$var$equal(a, b) {
+    if (a === null || b === null) return false;
+    return JSON.stringify(a) === JSON.stringify(b);
 }
-function $6723c76b9de38fd1$export$fb40a80c530e5f2b() {
-    const value = $foSVk$react.useContext($6723c76b9de38fd1$export$7c7a4fd7f1336e2c);
-    if (!value) throw new Error("Must provide selection context");
-    const s = $foSVk$react.useMemo(()=>$974b6ba4b06bc58f$export$52baac22726c72bf.parse(value.data, [])
-    , [
-        value.data
+
+
+
+function $c63d681a73fa226b$export$de605877a37dc399(ref, api) {
+    $foSVk$react.useEffect(()=>{
+        const el = ref.current;
+        const cb = (e)=>{
+            if (e.code === "ArrowDown") {
+                e.preventDefault();
+                api.selectDownwards(e.shiftKey);
+            } else if (e.code === "ArrowUp") {
+                e.preventDefault();
+                api.selectUpwards(e.shiftKey);
+            }
+        };
+        el?.addEventListener("keydown", cb);
+        return ()=>{
+            el?.removeEventListener("keydown", cb);
+        };
+    }, [
+        ref,
+        api
     ]);
-    return (i)=>s.contains(i)
-    ;
-}
-const $6723c76b9de38fd1$export$7f994e57c9e78355 = /*#__PURE__*/ $foSVk$react.createContext(null);
-function $6723c76b9de38fd1$export$9ab192f953c1b33b() {
-    return $foSVk$react.useContext($6723c76b9de38fd1$export$7f994e57c9e78355);
 }
 
 
-function $2d914ccbe0a16edd$var$createNode(model, level, parent, children, isOpen, isDraggable, isDroppable) {
-    return {
-        id: model.id,
-        level: level,
-        parent: parent,
-        children: children,
-        isOpen: isOpen,
-        isDraggable: isDraggable,
-        isDroppable: isDroppable,
-        model: model,
-        rowIndex: null
-    };
-}
-function $2d914ccbe0a16edd$var$access(obj, accessor) {
-    if (typeof accessor === "boolean") return accessor;
-    if (typeof accessor === "string") return obj[accessor];
-    return accessor(obj);
-}
-function $2d914ccbe0a16edd$export$9c537176392280a0(model1, hideRoot = false, getChildren = "children", isOpen = "isOpen", disableDrag = false, disableDrop = false, openByDefault = true) {
-    function visitSelfAndChildren(model, level, parent) {
-        const open = $2d914ccbe0a16edd$var$access(model, isOpen);
-        const draggable = !$2d914ccbe0a16edd$var$access(model, disableDrag);
-        const droppable = !$2d914ccbe0a16edd$var$access(model, disableDrop);
-        const node = $2d914ccbe0a16edd$var$createNode(model, level, parent, null, open === undefined ? openByDefault : open, draggable, droppable);
-        const children = $2d914ccbe0a16edd$var$access(model, getChildren);
-        if (children) node.children = children.map((child)=>visitSelfAndChildren(child, level + 1, node)
-        );
-        return node;
+
+function $d5c6a0d3e116bf17$export$79f9fa345a841d8b(root) {
+    const list = [];
+    let index = 0;
+    function collect(node) {
+        if (node.level >= 0) {
+            node.rowIndex = index++;
+            list.push(node);
+        }
+        if (node.isOpen) node.children?.forEach(collect);
     }
-    return visitSelfAndChildren(model1, hideRoot ? -1 : 0, null);
+    collect(root);
+    return list;
 }
 
 
@@ -312,582 +454,592 @@ function $eb5355379510ac9b$export$8793edee2d425525() {
 }
 
 
-function $462841de7cc5b715$var$measureHover(el, offset) {
-    const rect = el.getBoundingClientRect();
-    const x = offset.x - Math.round(rect.x);
-    const y = offset.y - Math.round(rect.y);
-    const height = rect.height;
-    const inTopHalf = y < height / 2;
-    const inBottomHalf = !inTopHalf;
-    const pad = height / 4;
-    const inMiddle = y > pad && y < height - pad;
-    const atTop = !inMiddle && inTopHalf;
-    const atBottom = !inMiddle && inBottomHalf;
-    return {
-        x: x,
-        inTopHalf: inTopHalf,
-        inBottomHalf: inBottomHalf,
-        inMiddle: inMiddle,
-        atTop: atTop,
-        atBottom: atBottom
-    };
-}
-function $462841de7cc5b715$var$getNodesAroundCursor(node, prev, next, hover) {
-    if (!node) // We're hoving over the empty part of the list, not over an item,
-    // Put the cursor below the last item which is "prev"
-    return [
-        prev,
-        null
-    ];
-    if ($eb5355379510ac9b$export$769c5e872f5f8638(node)) {
-        if (hover.atTop) return [
-            prev,
-            node
-        ];
-        else if (hover.inMiddle) return [
-            node,
-            node
-        ];
-        else return [
-            node,
-            next
-        ];
-    } else {
-        if (hover.inTopHalf) return [
-            prev,
-            node
-        ];
-        else return [
-            node,
-            next
-        ];
-    }
-}
-function $462841de7cc5b715$var$getDropLevel(hovering, aboveCursor, belowCursor, indent) {
-    const hoverLevel = Math.round(Math.max(0, hovering.x - indent) / indent);
-    let min, max;
-    if (!aboveCursor) {
-        max = 0;
-        min = 0;
-    } else if (!belowCursor) {
-        max = aboveCursor.level;
-        min = 0;
-    } else {
-        max = aboveCursor.level;
-        min = belowCursor.level;
-    }
-    return $eb5355379510ac9b$export$adf7c0fe6059d774(hoverLevel, min, max);
-}
-function $462841de7cc5b715$var$canDrop(above, below) {
-    if (!above) return true;
-    let n = above;
-    if ($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,
-        index: index
-    };
-}
-function $462841de7cc5b715$var$lineCursor(index, level) {
-    return {
-        type: "line",
-        index: index,
-        level: level
-    };
-}
-function $462841de7cc5b715$var$noCursor() {
-    return {
-        type: "none"
-    };
-}
-function $462841de7cc5b715$var$highlightCursor(id) {
-    return {
-        type: "highlight",
-        id: id
-    };
-}
-function $462841de7cc5b715$var$walkUpFrom(node, level) {
-    let drop = node;
-    while(drop.parent && drop.level > level)drop = drop.parent;
-    const parentId = drop.parent?.id || null;
-    const index = $eb5355379510ac9b$export$305f7d4e9d4624f2(drop) + 1;
-    return {
-        parentId: parentId,
-        index: index
-    };
-}
-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 && $eb5355379510ac9b$export$769c5e872f5f8638(node) && hover.inMiddle) return {
-        drop: $462841de7cc5b715$var$dropAt(node.id, 0),
-        cursor: $462841de7cc5b715$var$highlightCursor(node.id)
-    };
-    /* At the top of the list */ if (!above) return {
-        drop: $462841de7cc5b715$var$dropAt(below?.parent?.id, 0),
-        cursor: $462841de7cc5b715$var$lineCursor(0, 0)
-    };
-    /* The above node is an item or a closed folder */ if ($eb5355379510ac9b$export$5318634f2ee07019(above) || $eb5355379510ac9b$export$4210f5ea57fbae57(above)) {
-        const level = $462841de7cc5b715$var$getDropLevel(hover, above, below, args.indent);
-        return {
-            drop: $462841de7cc5b715$var$walkUpFrom(above, level),
-            cursor: $462841de7cc5b715$var$lineCursor(above.rowIndex + 1, level)
-        };
-    }
-    /* The above node is an open folder */ return {
-        drop: $462841de7cc5b715$var$dropAt(above?.id, 0),
-        cursor: $462841de7cc5b715$var$lineCursor(above.rowIndex + 1, above.level + 1)
-    };
-}
-
-
-function $6c0a9a91d5e7ff45$export$5a6c424b1725f44f() {
-    const tree = $6723c76b9de38fd1$export$ea6c3ae2bd3a5510();
-    // In case we drop an item at the bottom of the list
-    const [, drop1] = $foSVk$reactdnd.useDrop(()=>({
-            accept: "NODE",
-            hover: (item, m)=>{
-                if (!m.isOver({
-                    shallow: true
-                })) return;
-                const offset = m.getClientOffset();
-                if (!tree.listEl.current || !offset) return;
-                const { cursor: cursor  } = $462841de7cc5b715$export$f502ca02ebb85a1c({
-                    element: tree.listEl.current,
-                    offset: offset,
-                    indent: tree.indent,
-                    node: null,
-                    prevNode: tree.api.visibleNodes[tree.api.visibleNodes.length - 1],
-                    nextNode: null
-                });
-                if (cursor) tree.api.showCursor(cursor);
-            },
-            canDrop: (item, m)=>{
-                return m.isOver({
-                    shallow: true
-                });
-            },
-            drop: (item, m)=>{
-                if (m.didDrop()) return;
-                const offset = m.getClientOffset();
-                if (!tree.listEl.current || !offset) return;
-                const { drop: drop  } = $462841de7cc5b715$export$f502ca02ebb85a1c({
-                    element: tree.listEl.current,
-                    offset: offset,
-                    indent: tree.indent,
-                    node: null,
-                    prevNode: tree.api.visibleNodes[tree.api.visibleNodes.length - 1],
-                    nextNode: null
-                });
-                return drop;
-            }
-        })
-    , [
-        tree
-    ]);
-    drop1(tree.listEl);
-}
 
 
 
-
-
-
-const $da0693b023d53dfe$export$f6196a6c6bb539b4 = ()=>({
-        visibleIds: [],
-        cursor: {
-            type: "none"
-        },
-        editingId: null,
-        selection: {
-            data: null,
-            ids: []
-        }
-    })
-;
-const $da0693b023d53dfe$export$e324594224ef24da = {
-    setCursorLocation: (cursor)=>({
-            type: "SET_CURSOR_LOCATION",
-            cursor: cursor
-        })
-    ,
-    setVisibleIds: (ids, idMap // id to index
-    )=>({
-            type: "SET_VISIBLE_IDS",
-            ids: ids,
-            idMap: idMap
-        })
-    ,
-    select: (index, meta, shift)=>({
-            type: "SELECT",
-            index: index,
-            meta: meta,
-            shift: shift
-        })
-    ,
-    selectId: (id)=>({
-            type: "SELECT_ID",
-            id: id
-        })
-    ,
-    edit: (id)=>({
-            type: "EDIT",
-            id: id
-        })
-    ,
-    stepUp: (shift, ids)=>({
-            type: "STEP_UP",
-            shift: shift
-        })
-    ,
-    stepDown: (shift, ids)=>({
-            type: "STEP_DOWN",
-            shift: shift
-        })
+const $8b3ec294daabcf73$var$placeholderStyle = {
+    display: "flex",
+    alignItems: "center"
 };
-function $da0693b023d53dfe$export$1650419e431d3ba3(state, action) {
-    switch(action.type){
-        case "EDIT":
-            return {
-                ...state,
-                editingId: action.id
-            };
-        case "SET_CURSOR_LOCATION":
-            if ($da0693b023d53dfe$var$equal(state.cursor, action.cursor)) return state;
-            else return {
-                ...state,
-                cursor: action.cursor
-            };
-        case "SELECT":
-            var s = $974b6ba4b06bc58f$export$52baac22726c72bf.parse(state.selection.data, state.visibleIds);
-            if (action.index === null) s.clear();
-            else if (action.meta) {
-                if (s.contains(action.index)) s.deselect(action.index);
-                else s.multiSelect(action.index);
-            } else if (action.shift) s.extend(action.index);
-            else s.select(action.index);
-            return {
-                ...state,
-                selection: {
-                    data: s.serialize(),
-                    ids: s.getSelectedItems()
-                }
-            };
-        case "SELECT_ID":
-            return {
-                ...state,
-                selection: {
-                    ...state.selection,
-                    ids: [
-                        action.id
-                    ]
-                }
-            };
-        case "STEP_UP":
-            var s3 = $974b6ba4b06bc58f$export$52baac22726c72bf.parse(state.selection.data, state.visibleIds);
-            var f = s3.getFocus();
-            if (action.shift) s3.extend(f - 1);
-            else s3.select(f - 1);
-            return {
-                ...state,
-                selection: {
-                    data: s3.serialize(),
-                    ids: s3.getSelectedItems()
-                }
-            };
-        case "STEP_DOWN":
-            var s6 = $974b6ba4b06bc58f$export$52baac22726c72bf.parse(state.selection.data, state.visibleIds);
-            var f2 = s6.getFocus();
-            if (action.shift) s6.extend(f2 + 1);
-            else s6.select(f2 + 1);
-            return {
-                ...state,
-                selection: {
-                    data: s6.serialize(),
-                    ids: s6.getSelectedItems()
+const $8b3ec294daabcf73$var$lineStyle = {
+    flex: 1,
+    height: "2px",
+    background: "#4B91E2",
+    borderRadius: "1px"
+};
+const $8b3ec294daabcf73$var$circleStyle = {
+    width: "4px",
+    height: "4px",
+    boxShadow: "0 0 0 3px #4B91E2",
+    borderRadius: "50%"
+};
+function $8b3ec294daabcf73$var$DefaultCursor({ top: top , left: left , indent: indent  }) {
+    const style = {
+        position: "absolute",
+        pointerEvents: "none",
+        top: top - 2 + "px",
+        left: indent + left + "px",
+        right: indent + "px"
+    };
+    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsxs("div", {
+        style: {
+            ...$8b3ec294daabcf73$var$placeholderStyle,
+            ...style
+        },
+        children: [
+            /*#__PURE__*/ $foSVk$reactjsxruntime.jsx("div", {
+                style: {
+                    ...$8b3ec294daabcf73$var$circleStyle
                 }
-            };
-        case "SET_VISIBLE_IDS":
-            // The visible ids changed
-            var ids = state.selection.ids;
-            // Start with a blank selection
-            var s2 = new $974b6ba4b06bc58f$export$52baac22726c72bf([], null, "none", state.visibleIds);
-            // Add each of the old selected ids to this new selection
-            for (let id of ids)if (id in action.idMap) s2.multiSelect(action.idMap[id]);
-            return {
-                ...state,
-                visibleIds: action.ids,
-                selection: {
-                    ids: ids,
-                    data: s2.serialize()
+            }),
+            /*#__PURE__*/ $foSVk$reactjsxruntime.jsx("div", {
+                style: {
+                    ...$8b3ec294daabcf73$var$lineStyle
                 }
-            };
-        default:
-            return state;
+            })
+        ]
+    }));
+}
+function $8b3ec294daabcf73$export$61a6f16446012f00(props) {
+    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx($8b3ec294daabcf73$var$DefaultCursor, {
+        ...props
+    }));
+}
+
+
+class $f02bc7cefcb30793$export$e2da3477247342d1 {
+    constructor(dispatch, state, props, list, listEl){
+        this.dispatch = dispatch;
+        this.state = state;
+        this.props = props;
+        this.list = list;
+        this.listEl = listEl;
+        this.edits = new Map();
+    }
+    sync(other) {
+        this.dispatch = other.dispatch;
+        this.state = other.state;
+        this.props = other.props;
+        this.list = other.list;
+        this.listEl = other.listEl;
+    }
+    getNode(id) {
+        if (id in this.idToIndex) return this.visibleNodes[this.idToIndex[id]] || null;
+        else return null;
+    }
+    getSelectedIds() {
+        return this.state.selection.ids;
+    }
+    edit(id) {
+        const sid = id.toString();
+        this.resolveEdit(sid, {
+            cancelled: true
+        });
+        this.scrollToId(sid);
+        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.edit(sid));
+        return new Promise((resolve)=>this.edits.set(sid, resolve)
+        );
+    }
+    submit(id, value) {
+        const sid = id.toString();
+        this.onEdit(sid, value);
+        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.edit(null));
+        this.resolveEdit(sid, {
+            cancelled: false,
+            value: value
+        });
+    }
+    reset(id) {
+        const sid = id.toString();
+        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.edit(null));
+        this.resolveEdit(sid, {
+            cancelled: true
+        });
+    }
+    resolveEdit(id, value) {
+        const resolve = this.edits.get(id.toString());
+        if (resolve) resolve(value);
+        this.edits.delete(id);
+    }
+    select(index, meta = false, shift = false) {
+        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.select(index, meta, shift));
+    }
+    selectById(id, meta = false, shift = false) {
+        const index = this.idToIndex[id];
+        this.select(index, meta, shift);
+    }
+    selectUpwards(shiftKey) {
+        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.stepUp(shiftKey, this.visibleIds));
+    }
+    selectDownwards(shiftKey) {
+        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.stepDown(shiftKey, this.visibleIds));
+    }
+    hideCursor() {
+        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.setCursorLocation({
+            type: "none"
+        }));
+    }
+    showCursor(cursor) {
+        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.setCursorLocation(cursor));
+    }
+    scrollToId(id) {
+        if (!this.list) return;
+        const index1 = this.idToIndex[id];
+        if (index1) this.list.current?.scrollToItem(index1);
+        else {
+            this.openParents(id);
+            ($parcel$interopDefault($foSVk$reactdom)).flushSync(()=>{
+                const index = this.idToIndex[id];
+                if (index) this.list.current?.scrollToItem(index);
+            });
+        }
+    }
+    open(id) {
+        this.onToggle(id, true);
+    }
+    openParents(id) {
+        const node = $f02bc7cefcb30793$var$dfs(this.props.root, id);
+        let parent = node?.parent;
+        while(parent){
+            this.open(parent.id);
+            parent = parent.parent;
+        }
+    }
+    get visibleIds() {
+        return $f02bc7cefcb30793$var$getIds(this.visibleNodes);
+    }
+    get idToIndex() {
+        return $f02bc7cefcb30793$var$createIndex(this.visibleNodes);
+    }
+    get visibleNodes() {
+        return $f02bc7cefcb30793$var$createList(this.props.root);
+    }
+    get width() {
+        return this.props.treeProps.width || 300;
+    }
+    get height() {
+        return this.props.treeProps.height || 500;
+    }
+    get indent() {
+        return this.props.treeProps.indent || 24;
+    }
+    get renderer() {
+        return this.props.treeProps.children;
+    }
+    get onToggle() {
+        return this.props.treeProps.onToggle || $eb5355379510ac9b$export$8793edee2d425525;
+    }
+    get rowHeight() {
+        return this.props.treeProps.rowHeight || 24;
+    }
+    get onClick() {
+        return this.props.treeProps.onClick || $eb5355379510ac9b$export$8793edee2d425525;
+    }
+    get onContextMenu() {
+        return this.props.treeProps.onContextMenu || $eb5355379510ac9b$export$8793edee2d425525;
+    }
+    get onMove() {
+        return this.props.treeProps.onMove || $eb5355379510ac9b$export$8793edee2d425525;
+    }
+    get onEdit() {
+        return this.props.treeProps.onEdit || $eb5355379510ac9b$export$8793edee2d425525;
+    }
+    get cursorParentId() {
+        const { cursor: cursor  } = this.state;
+        switch(cursor.type){
+            case "highlight":
+                return cursor.id;
+            default:
+                return null;
+        }
+    }
+    get cursorOverFolder() {
+        return this.state.cursor.type === "highlight";
+    }
+    get editingId() {
+        return this.state.editingId;
+    }
+    isSelected(index) {
+        const selection = $974b6ba4b06bc58f$export$52baac22726c72bf.parse(this.state.selection.data, []);
+        return selection.contains(index);
+    }
+    renderDropCursor(props) {
+        const render = this.props.treeProps.dropCursor || $8b3ec294daabcf73$export$61a6f16446012f00;
+        return render(props);
     }
 }
-function $da0693b023d53dfe$var$equal(a, b) {
-    if (a === null || b === null) return false;
-    return JSON.stringify(a) === JSON.stringify(b);
+const $f02bc7cefcb30793$var$getIds = ($parcel$interopDefault($foSVk$memoizeone))((nodes)=>nodes.map((n)=>n.id
+    )
+);
+const $f02bc7cefcb30793$var$createIndex = ($parcel$interopDefault($foSVk$memoizeone))((nodes)=>{
+    return nodes.reduce((map, node, index)=>{
+        map[node.id] = index;
+        return map;
+    }, {
+    });
+});
+const $f02bc7cefcb30793$var$createList = ($parcel$interopDefault($foSVk$memoizeone))($d5c6a0d3e116bf17$export$79f9fa345a841d8b);
+function $f02bc7cefcb30793$var$dfs(node, id) {
+    if (!node) return null;
+    if (node.id === id) return node;
+    if (node.children) for (let child of node.children){
+        const result = $f02bc7cefcb30793$var$dfs(child, id);
+        if (result) return result;
+    }
+    return null;
 }
 
 
-
-function $c63d681a73fa226b$export$de605877a37dc399(ref, api) {
-    $foSVk$react.useEffect(()=>{
-        const el = ref.current;
-        const cb = (e)=>{
-            if (e.code === "ArrowDown") {
-                e.preventDefault();
-                api.selectDownwards(e.shiftKey);
-            } else if (e.code === "ArrowUp") {
-                e.preventDefault();
-                api.selectUpwards(e.shiftKey);
-            }
-        };
-        el?.addEventListener("keydown", cb);
-        return ()=>{
-            el?.removeEventListener("keydown", cb);
-        };
+function $59c6116b7d090f1c$export$6a399b2f7f12632c(props) {
+    const [state, dispatch] = $foSVk$react.useReducer($da0693b023d53dfe$export$1650419e431d3ba3, $da0693b023d53dfe$export$f6196a6c6bb539b4());
+    const list = $foSVk$react.useRef(null);
+    const listEl = $foSVk$react.useRef(null);
+    const api = $foSVk$react.useMemo(()=>new $f02bc7cefcb30793$export$e2da3477247342d1(dispatch, state, props, list, listEl)
+    , [
+        dispatch,
+        state,
+        props,
+        list,
+        listEl
+    ]);
+    /**
+   * This ensures that the selection remains correct even
+   * after opening and closing a folders
+   */ $foSVk$react.useLayoutEffect(()=>{
+        dispatch($da0693b023d53dfe$export$e324594224ef24da.setVisibleIds(api.visibleIds, api.idToIndex));
     }, [
-        ref,
-        api
+        dispatch,
+        api.visibleIds,
+        api.idToIndex,
+        props.root
     ]);
+    $foSVk$react.useImperativeHandle(props.imperativeHandle, ()=>api
+    );
+    $c63d681a73fa226b$export$de605877a37dc399(listEl, api);
+    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx($6723c76b9de38fd1$export$feef243b04ff4151.Provider, {
+        value: api,
+        children: props.children
+    }));
 }
 
 
 
 
 
-function $d5c6a0d3e116bf17$export$79f9fa345a841d8b(root) {
-    const list = [];
-    let index = 0;
-    function collect(node) {
-        if (node.level >= 0) {
-            node.rowIndex = index++;
-            list.push(node);
-        }
-        if (node.isOpen) node.children?.forEach(collect);
-    }
-    collect(root);
-    return list;
+
+const $8317ba945ccd0ce3$var$layerStyles = {
+    position: "fixed",
+    pointerEvents: "none",
+    zIndex: 100,
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%"
+};
+const $8317ba945ccd0ce3$var$getStyle = (offset)=>{
+    if (!offset) return {
+        display: "none"
+    };
+    const { x: x , y: y  } = offset;
+    return {
+        transform: `translate(${x}px, ${y}px)`
+    };
+};
+const $8317ba945ccd0ce3$var$getCountStyle = (offset)=>{
+    if (!offset) return {
+        display: "none"
+    };
+    const { x: x , y: y  } = offset;
+    return {
+        transform: `translate(${x + 10}px, ${y + 10}px)`
+    };
+};
+function $8317ba945ccd0ce3$export$133773870222880f() {
+    const { offset: offset , mouse: mouse , item: item , isDragging: isDragging  } = $foSVk$reactdnd.useDragLayer((m)=>({
+            offset: m.getSourceClientOffset(),
+            mouse: m.getClientOffset(),
+            item: m.getItem(),
+            isDragging: m.isDragging()
+        })
+    );
+    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsxs($8317ba945ccd0ce3$var$Overlay, {
+        isDragging: isDragging,
+        children: [
+            /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($8317ba945ccd0ce3$var$Position, {
+                offset: offset,
+                children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($8317ba945ccd0ce3$var$PreviewNode, {
+                    item: item
+                })
+            }),
+            /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($8317ba945ccd0ce3$var$Count, {
+                mouse: mouse,
+                item: item
+            })
+        ]
+    }));
 }
+const $8317ba945ccd0ce3$var$Overlay = /*#__PURE__*/ $foSVk$react.memo(function Overlay(props) {
+    if (!props.isDragging) return null;
+    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx("div", {
+        style: $8317ba945ccd0ce3$var$layerStyles,
+        children: props.children
+    }));
+});
+function $8317ba945ccd0ce3$var$Position(props) {
+    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx("div", {
+        className: "row preview",
+        style: $8317ba945ccd0ce3$var$getStyle(props.offset),
+        children: props.children
+    }));
+}
+function $8317ba945ccd0ce3$var$Count(props) {
+    const { item: item , mouse: mouse  } = props;
+    if (item?.dragIds?.length > 1) return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx("div", {
+        className: "selected-count",
+        style: $8317ba945ccd0ce3$var$getCountStyle(mouse),
+        children: item.dragIds.length
+    }));
+    else return null;
+}
+const $8317ba945ccd0ce3$var$PreviewNode = /*#__PURE__*/ $foSVk$react.memo(function PreviewNode(props) {
+    const tree = $6723c76b9de38fd1$export$367b0f2231a90ba0();
+    if (!props.item) return null;
+    const node = tree.getNode(props.item.id);
+    if (!node) return null;
+    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx(tree.renderer, {
+        preview: true,
+        innerRef: ()=>{
+        },
+        data: node.model,
+        styles: {
+            row: {
+            },
+            indent: {
+                paddingLeft: node.level * tree.indent
+            }
+        },
+        tree: tree,
+        state: {
+            isDragging: false,
+            isEditing: false,
+            isSelected: false,
+            isSelectedStart: false,
+            isSelectedEnd: false,
+            isHoveringOverChild: false,
+            isOpen: node.isOpen
+        },
+        handlers: {
+            edit: ()=>Promise.resolve({
+                    cancelled: true
+                })
+            ,
+            select: ()=>{
+            },
+            toggle: ()=>{
+            },
+            submit: ()=>{
+            },
+            reset: ()=>{
+            }
+        }
+    }));
+});
+
 
 
 
 
-class $f02bc7cefcb30793$export$e2da3477247342d1 {
-    constructor(dispatch, state, props, list){
-        this.dispatch = dispatch;
-        this.state = state;
-        this.props = props;
-        this.list = list;
-        this.edits = new Map();
-    }
-    assign(dispatch, state, props, list) {
-        this.dispatch = dispatch;
-        this.state = state;
-        this.props = props;
-        this.list = list;
-    }
-    getNode(id) {
-        if (id in this.idToIndex) return this.visibleNodes[this.idToIndex[id]] || null;
-        else return null;
-    }
-    getSelectedIds() {
-        return this.state.selection.ids;
-    }
-    edit(id) {
-        const sid = id.toString();
-        this.resolveEdit(sid, {
-            cancelled: true
-        });
-        this.scrollToId(sid);
-        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.edit(sid));
-        return new Promise((resolve)=>this.edits.set(sid, resolve)
-        );
-    }
-    submit(id, value) {
-        const sid = id.toString();
-        this.props.onEdit(sid, value);
-        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.edit(null));
-        this.resolveEdit(sid, {
-            cancelled: false,
-            value: value
-        });
-    }
-    reset(id) {
-        const sid = id.toString();
-        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.edit(null));
-        this.resolveEdit(sid, {
-            cancelled: true
-        });
-    }
-    resolveEdit(id, value) {
-        const resolve = this.edits.get(id.toString());
-        if (resolve) resolve(value);
-        this.edits.delete(id);
-    }
-    select(index, meta = false, shift = false) {
-        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.select(index, meta, shift));
-    }
-    selectById(id, meta = false, shift = false) {
-        const index = this.idToIndex[id];
-        this.select(index, meta, shift);
-    }
-    selectUpwards(shiftKey) {
-        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.stepUp(shiftKey, this.visibleIds));
-    }
-    selectDownwards(shiftKey) {
-        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.stepDown(shiftKey, this.visibleIds));
-    }
-    hideCursor() {
-        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.setCursorLocation({
-            type: "none"
-        }));
-    }
-    showCursor(cursor) {
-        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.setCursorLocation(cursor));
-    }
-    scrollToId(id) {
-        if (!this.list) return;
-        const index1 = this.idToIndex[id];
-        if (index1) this.list.scrollToItem(index1);
-        else {
-            this.openParents(id);
-            ($parcel$interopDefault($foSVk$reactdom)).flushSync(()=>{
-                const index = this.idToIndex[id];
-                if (index) this.list?.scrollToItem(index);
-            });
-        }
-    }
-    open(id) {
-        this.props.onToggle(id, true);
-    }
-    openParents(id) {
-        const node = $f02bc7cefcb30793$var$dfs(this.props.root, id);
-        let parent = node?.parent;
-        while(parent){
-            this.open(parent.id);
-            parent = parent.parent;
-        }
-    }
-    get visibleIds() {
-        return $f02bc7cefcb30793$var$getIds(this.visibleNodes);
-    }
-    get idToIndex() {
-        return $f02bc7cefcb30793$var$createIndex(this.visibleNodes);
+function $462841de7cc5b715$var$measureHover(el, offset) {
+    const rect = el.getBoundingClientRect();
+    const x = offset.x - Math.round(rect.x);
+    const y = offset.y - Math.round(rect.y);
+    const height = rect.height;
+    const inTopHalf = y < height / 2;
+    const inBottomHalf = !inTopHalf;
+    const pad = height / 4;
+    const inMiddle = y > pad && y < height - pad;
+    const atTop = !inMiddle && inTopHalf;
+    const atBottom = !inMiddle && inBottomHalf;
+    return {
+        x: x,
+        inTopHalf: inTopHalf,
+        inBottomHalf: inBottomHalf,
+        inMiddle: inMiddle,
+        atTop: atTop,
+        atBottom: atBottom
+    };
+}
+function $462841de7cc5b715$var$getNodesAroundCursor(node, prev, next, hover) {
+    if (!node) // We're hoving over the empty part of the list, not over an item,
+    // Put the cursor below the last item which is "prev"
+    return [
+        prev,
+        null
+    ];
+    if ($eb5355379510ac9b$export$769c5e872f5f8638(node)) {
+        if (hover.atTop) return [
+            prev,
+            node
+        ];
+        else if (hover.inMiddle) return [
+            node,
+            node
+        ];
+        else return [
+            node,
+            next
+        ];
+    } else {
+        if (hover.inTopHalf) return [
+            prev,
+            node
+        ];
+        else return [
+            node,
+            next
+        ];
     }
-    get visibleNodes() {
-        return $f02bc7cefcb30793$var$createList(this.props.root);
+}
+function $462841de7cc5b715$var$getDropLevel(hovering, aboveCursor, belowCursor, indent) {
+    const hoverLevel = Math.round(Math.max(0, hovering.x - indent) / indent);
+    let min, max;
+    if (!aboveCursor) {
+        max = 0;
+        min = 0;
+    } else if (!belowCursor) {
+        max = aboveCursor.level;
+        min = 0;
+    } else {
+        max = aboveCursor.level;
+        min = belowCursor.level;
     }
+    return $eb5355379510ac9b$export$adf7c0fe6059d774(hoverLevel, min, max);
 }
-const $f02bc7cefcb30793$var$getIds = ($parcel$interopDefault($foSVk$memoizeone))((nodes)=>nodes.map((n)=>n.id
-    )
-);
-const $f02bc7cefcb30793$var$createIndex = ($parcel$interopDefault($foSVk$memoizeone))((nodes)=>{
-    return nodes.reduce((map, node, index)=>{
-        map[node.id] = index;
-        return map;
-    }, {
-    });
-});
-const $f02bc7cefcb30793$var$createList = ($parcel$interopDefault($foSVk$memoizeone))($d5c6a0d3e116bf17$export$79f9fa345a841d8b);
-function $f02bc7cefcb30793$var$dfs(node, id) {
-    if (!node) return null;
-    if (node.id === id) return node;
-    if (node.children) for (let child of node.children){
-        const result = $f02bc7cefcb30793$var$dfs(child, id);
-        if (result) return result;
+function $462841de7cc5b715$var$canDrop(above, below) {
+    if (!above) return true;
+    let n = above;
+    if ($eb5355379510ac9b$export$4210f5ea57fbae57(above) && above !== below) n = above.parent;
+    while(n){
+        if (!n.isDroppable) return false;
+        n = n.parent;
     }
-    return null;
+    return true;
 }
-
-
-function $bf7f5844af5991a0$export$367b0f2231a90ba0(state, dispatch, props, list) {
-    /**
-   * We only ever want one instance of the api object
-   * It will get updated as the props change, but the
-   * reference will not.
-   */ const api = $foSVk$react.useMemo(()=>new $f02bc7cefcb30793$export$e2da3477247342d1(dispatch, state, props, list)
-    , // eslint-disable-next-line
-    []);
-    api.assign(dispatch, state, props, list);
-    /**
-   * This ensures that the selection remains correct even
-   * after opening and closing a folders
-   */ $foSVk$react.useLayoutEffect(()=>{
-        dispatch($da0693b023d53dfe$export$e324594224ef24da.setVisibleIds(api.visibleIds, api.idToIndex));
-    }, [
-        dispatch,
-        api,
-        props.root
-    ]);
-    return api;
+function $462841de7cc5b715$var$dropAt(parentId, index) {
+    return {
+        parentId: parentId || null,
+        index: index
+    };
+}
+function $462841de7cc5b715$var$lineCursor(index, level) {
+    return {
+        type: "line",
+        index: index,
+        level: level
+    };
+}
+function $462841de7cc5b715$var$noCursor() {
+    return {
+        type: "none"
+    };
+}
+function $462841de7cc5b715$var$highlightCursor(id) {
+    return {
+        type: "highlight",
+        id: id
+    };
+}
+function $462841de7cc5b715$var$walkUpFrom(node, level) {
+    let drop = node;
+    while(drop.parent && drop.level > level)drop = drop.parent;
+    const parentId = drop.parent?.id || null;
+    const index = $eb5355379510ac9b$export$305f7d4e9d4624f2(drop) + 1;
+    return {
+        parentId: parentId,
+        index: index
+    };
+}
+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 && $eb5355379510ac9b$export$769c5e872f5f8638(node) && hover.inMiddle) return {
+        drop: $462841de7cc5b715$var$dropAt(node.id, 0),
+        cursor: $462841de7cc5b715$var$highlightCursor(node.id)
+    };
+    /* At the top of the list */ if (!above) return {
+        drop: $462841de7cc5b715$var$dropAt(below?.parent?.id, 0),
+        cursor: $462841de7cc5b715$var$lineCursor(0, 0)
+    };
+    /* The above node is an item or a closed folder */ if ($eb5355379510ac9b$export$5318634f2ee07019(above) || $eb5355379510ac9b$export$4210f5ea57fbae57(above)) {
+        const level = $462841de7cc5b715$var$getDropLevel(hover, above, below, args.indent);
+        return {
+            drop: $462841de7cc5b715$var$walkUpFrom(above, level),
+            cursor: $462841de7cc5b715$var$lineCursor(above.rowIndex + 1, level)
+        };
+    }
+    /* The above node is an open folder */ return {
+        drop: $462841de7cc5b715$var$dropAt(above?.id, 0),
+        cursor: $462841de7cc5b715$var$lineCursor(above.rowIndex + 1, above.level + 1)
+    };
 }
 
 
-function $59c6116b7d090f1c$export$6a399b2f7f12632c(props) {
-    const [state, dispatch] = $foSVk$react.useReducer($da0693b023d53dfe$export$1650419e431d3ba3, $da0693b023d53dfe$export$f6196a6c6bb539b4());
-    const list = $foSVk$react.useRef();
-    const api = $bf7f5844af5991a0$export$367b0f2231a90ba0(state, dispatch, props, list.current);
-    $foSVk$react.useImperativeHandle(props.imperativeHandle, ()=>api
-    );
-    $c63d681a73fa226b$export$de605877a37dc399(props.listEl, api);
-    const staticValue = $foSVk$react.useMemo(()=>({
-            ...props,
-            api: api,
-            list: list
+function $6c0a9a91d5e7ff45$export$5a6c424b1725f44f() {
+    const tree = $6723c76b9de38fd1$export$367b0f2231a90ba0();
+    // In case we drop an item at the bottom of the list
+    const [, drop1] = $foSVk$reactdnd.useDrop(()=>({
+            accept: "NODE",
+            hover: (item, m)=>{
+                if (!m.isOver({
+                    shallow: true
+                })) return;
+                const offset = m.getClientOffset();
+                if (!tree.listEl.current || !offset) return;
+                const { cursor: cursor  } = $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);
+            },
+            canDrop: (item, m)=>{
+                return m.isOver({
+                    shallow: true
+                });
+            },
+            drop: (item, m)=>{
+                if (m.didDrop()) return;
+                const offset = m.getClientOffset();
+                if (!tree.listEl.current || !offset) return;
+                const { drop: drop  } = $462841de7cc5b715$export$f502ca02ebb85a1c({
+                    element: tree.listEl.current,
+                    offset: offset,
+                    indent: tree.indent,
+                    node: null,
+                    prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
+                    nextNode: null
+                });
+                return drop;
+            }
         })
     , [
-        props,
-        api,
-        list
+        tree
     ]);
-    /**
-   * This context pattern is ridiculous, next time use redux.
-   */ return(// @ts-ignore
-    /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($6723c76b9de38fd1$export$c1b9a1d3af45b7b6.Provider, {
-        value: staticValue,
-        children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($6723c76b9de38fd1$export$7f994e57c9e78355.Provider, {
-            value: state.editingId,
-            children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($6723c76b9de38fd1$export$7c7a4fd7f1336e2c.Provider, {
-                value: state.selection,
-                children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($6723c76b9de38fd1$export$7380e5d4146ff2ce.Provider, {
-                    value: $59c6116b7d090f1c$var$getParentId(state.cursor),
-                    children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($6723c76b9de38fd1$export$86fe4415b73783a1.Provider, {
-                        value: $59c6116b7d090f1c$var$isOverFolder(state),
-                        children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($6723c76b9de38fd1$export$76f51715425ee155.Provider, {
-                            value: state.cursor,
-                            children: props.children
-                        })
-                    })
-                })
-            })
-        })
-    }));
-}
-function $59c6116b7d090f1c$var$getParentId(cursor) {
-    switch(cursor.type){
-        case "highlight":
-            return cursor.id;
-        default:
-            return null;
-    }
+    drop1(tree.listEl);
 }
-function $59c6116b7d090f1c$var$isOverFolder(state) {
-    return state.cursor.type === "highlight";
+
+
+function $df8d0340a995314b$export$a6ee728c3c6ef11d(props) {
+    $6c0a9a91d5e7ff45$export$5a6c424b1725f44f();
+    return props.children;
 }
 
 
@@ -895,181 +1047,49 @@ function $59c6116b7d090f1c$var$isOverFolder(state) {
 
 
 
+
+
+
 function $8fbadd7be430f501$export$ef961593063b03e8() {
-    const treeView = $6723c76b9de38fd1$export$ea6c3ae2bd3a5510();
-    const cursor = $6723c76b9de38fd1$export$6c87584817ff2461();
+    const tree = $6723c76b9de38fd1$export$367b0f2231a90ba0();
+    const cursor = tree.state.cursor;
     if (!cursor || cursor.type !== "line") return null;
-    const top = treeView.rowHeight * cursor.index;
-    const left = treeView.indent * cursor.level;
-    const style = {
-        position: "absolute",
-        pointerEvents: "none",
-        top: top - 2 + "px",
-        left: treeView.indent + left + "px",
-        right: treeView.indent + "px"
-    };
-    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx($8fbadd7be430f501$var$DefaultCursor, {
-        style: style
-    }));
+    const indent = tree.indent;
+    const top = tree.rowHeight * cursor.index;
+    const left = indent * cursor.level;
+    return tree.renderDropCursor({
+        top: top,
+        left: left,
+        indent: indent
+    });
 }
-const $8fbadd7be430f501$var$placeholderStyle = {
-    display: "flex",
-    alignItems: "center"
-};
-const $8fbadd7be430f501$var$lineStyle = {
-    flex: 1,
-    height: "2px",
-    background: "#4B91E2",
-    borderRadius: "1px"
-};
-const $8fbadd7be430f501$var$circleStyle = {
-    width: "4px",
-    height: "4px",
-    boxShadow: "0 0 0 3px #4B91E2",
-    borderRadius: "50%"
-};
-function $8fbadd7be430f501$var$DefaultCursor({ style: style  }) {
+
+
+const $0e2adc7837d85ac3$export$70c2b8898b86d3ad = /*#__PURE__*/ $foSVk$react.forwardRef(function Outer(props, ref) {
+    const { children: children , ...rest } = props;
+    const tree = $6723c76b9de38fd1$export$367b0f2231a90ba0();
     return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsxs("div", {
-        style: {
-            ...$8fbadd7be430f501$var$placeholderStyle,
-            ...style
-        },
+        // @ts-ignore
+        ref: ref,
+        ...rest,
+        onClick: tree.onClick,
+        onContextMenu: tree.onContextMenu,
         children: [
             /*#__PURE__*/ $foSVk$reactjsxruntime.jsx("div", {
                 style: {
-                    ...$8fbadd7be430f501$var$circleStyle
-                }
-            }),
-            /*#__PURE__*/ $foSVk$reactjsxruntime.jsx("div", {
-                style: {
-                    ...$8fbadd7be430f501$var$lineStyle
-                }
-            })
-        ]
-    }));
-}
-
-
-
-
-
-
-const $8317ba945ccd0ce3$var$layerStyles = {
-    position: "fixed",
-    pointerEvents: "none",
-    zIndex: 100,
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "100%"
-};
-const $8317ba945ccd0ce3$var$getStyle = (offset)=>{
-    if (!offset) return {
-        display: "none"
-    };
-    const { x: x , y: y  } = offset;
-    return {
-        transform: `translate(${x}px, ${y}px)`
-    };
-};
-const $8317ba945ccd0ce3$var$getCountStyle = (offset)=>{
-    if (!offset) return {
-        display: "none"
-    };
-    const { x: x , y: y  } = offset;
-    return {
-        transform: `translate(${x + 10}px, ${y + 10}px)`
-    };
-};
-function $8317ba945ccd0ce3$export$133773870222880f() {
-    const { offset: offset , mouse: mouse , item: item , isDragging: isDragging  } = $foSVk$reactdnd.useDragLayer((m)=>({
-            offset: m.getSourceClientOffset(),
-            mouse: m.getClientOffset(),
-            item: m.getItem(),
-            isDragging: m.isDragging()
-        })
-    );
-    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsxs($8317ba945ccd0ce3$var$Overlay, {
-        isDragging: isDragging,
-        children: [
-            /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($8317ba945ccd0ce3$var$Position, {
-                offset: offset,
-                children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($8317ba945ccd0ce3$var$PreviewNode, {
-                    item: item
+                    height: tree.visibleNodes.length * tree.rowHeight,
+                    width: "100%",
+                    overflow: "hidden",
+                    position: "absolute",
+                    left: "0",
+                    right: "0"
+                },
+                children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($8fbadd7be430f501$export$ef961593063b03e8, {
                 })
             }),
-            /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($8317ba945ccd0ce3$var$Count, {
-                mouse: mouse,
-                item: item
-            })
+            children
         ]
     }));
-}
-const $8317ba945ccd0ce3$var$Overlay = /*#__PURE__*/ $foSVk$react.memo(function Overlay(props) {
-    if (!props.isDragging) return null;
-    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx("div", {
-        style: $8317ba945ccd0ce3$var$layerStyles,
-        children: props.children
-    }));
-});
-function $8317ba945ccd0ce3$var$Position(props) {
-    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx("div", {
-        className: "row preview",
-        style: $8317ba945ccd0ce3$var$getStyle(props.offset),
-        children: props.children
-    }));
-}
-function $8317ba945ccd0ce3$var$Count(props) {
-    const { item: item , mouse: mouse  } = props;
-    if (item?.dragIds?.length > 1) return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx("div", {
-        className: "selected-count",
-        style: $8317ba945ccd0ce3$var$getCountStyle(mouse),
-        children: item.dragIds.length
-    }));
-    else return null;
-}
-const $8317ba945ccd0ce3$var$PreviewNode = /*#__PURE__*/ $foSVk$react.memo(function PreviewNode(props) {
-    const tree = $6723c76b9de38fd1$export$ea6c3ae2bd3a5510();
-    if (!props.item) return null;
-    const node = tree.api.getNode(props.item.id);
-    if (!node) return null;
-    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx(tree.renderer, {
-        preview: true,
-        innerRef: ()=>{
-        },
-        data: node.model,
-        styles: {
-            row: {
-            },
-            indent: {
-                paddingLeft: node.level * tree.indent
-            }
-        },
-        tree: tree.api,
-        state: {
-            isDragging: false,
-            isEditing: false,
-            isSelected: false,
-            isSelectedStart: false,
-            isSelectedEnd: false,
-            isHoveringOverChild: false,
-            isOpen: node.isOpen
-        },
-        handlers: {
-            edit: ()=>Promise.resolve({
-                    cancelled: true
-                })
-            ,
-            select: ()=>{
-            },
-            toggle: ()=>{
-            },
-            submit: ()=>{
-            },
-            reset: ()=>{
-            }
-        }
-    }));
 });
 
 
@@ -1081,16 +1101,15 @@ const $8317ba945ccd0ce3$var$PreviewNode = /*#__PURE__*/ $foSVk$react.memo(functi
 
 
 function $74bee24dbb0f3e2b$export$715c0d031ede7907(node) {
-    const tree = $6723c76b9de38fd1$export$ea6c3ae2bd3a5510();
-    const isSelected = $6723c76b9de38fd1$export$fb40a80c530e5f2b();
-    const ids = $6723c76b9de38fd1$export$1c9b7756eccadc96();
+    const tree = $6723c76b9de38fd1$export$367b0f2231a90ba0();
+    const ids = tree.getSelectedIds();
     const [{ isDragging: isDragging  }, ref, preview] = $foSVk$reactdnd.useDrag(()=>({
             canDrag: ()=>node.isDraggable
             ,
             type: "NODE",
             item: ()=>({
                     id: node.id,
-                    dragIds: isSelected(node.rowIndex) ? ids : [
+                    dragIds: tree.isSelected(node.rowIndex) ? ids : [
                         node.id
                     ]
                 })
@@ -1100,7 +1119,7 @@ function $74bee24dbb0f3e2b$export$715c0d031ede7907(node) {
                 })
             ,
             end: (item, monitor)=>{
-                tree.api.hideCursor();
+                tree.hideCursor();
                 const drop = monitor.getDropResult();
                 if (drop && drop.parentId) {
                     tree.onMove(item.dragIds, drop.parentId, drop.index);
@@ -1131,12 +1150,12 @@ function $74bee24dbb0f3e2b$export$715c0d031ede7907(node) {
 
 
 function $cf8ebdb33758b119$export$57afafec4637d997(el, node, prev, next) {
-    const tree = $6723c76b9de38fd1$export$ea6c3ae2bd3a5510();
+    const tree = $6723c76b9de38fd1$export$367b0f2231a90ba0();
     return $foSVk$reactdnd.useDrop(()=>({
             accept: "NODE",
             canDrop: (item)=>{
                 for (let id of item.dragIds){
-                    const drag = tree.api.getNode(id);
+                    const drag = tree.getNode(id);
                     if (!drag) return false;
                     if ($eb5355379510ac9b$export$769c5e872f5f8638(drag) && $eb5355379510ac9b$export$1e38f72c6c546f70(node, drag)) return false;
                 }
@@ -1154,8 +1173,8 @@ function $cf8ebdb33758b119$export$57afafec4637d997(el, node, prev, next) {
                         prevNode: prev,
                         nextNode: next
                     });
-                    if (cursor) tree.api.showCursor(cursor);
-                } else tree.api.hideCursor();
+                    if (cursor) tree.showCursor(cursor);
+                } else tree.hideCursor();
             },
             drop: (item, m)=>{
                 const offset = m.getClientOffset();
@@ -1181,22 +1200,22 @@ function $cf8ebdb33758b119$export$57afafec4637d997(el, node, prev, next) {
 
 
 const $9a2860bfaab93091$export$b59bdbef9ce70de2 = /*#__PURE__*/ ($parcel$interopDefault($foSVk$react)).memo(function $9a2860bfaab93091$export$b59bdbef9ce70de2({ index: index , style: style  }) {
-    const tree = $6723c76b9de38fd1$export$ea6c3ae2bd3a5510();
-    const selected = $6723c76b9de38fd1$export$fb40a80c530e5f2b();
-    const node = tree.api.visibleNodes[index];
-    const next = tree.api.visibleNodes[index + 1] || null;
-    const prev = tree.api.visibleNodes[index - 1] || null;
-    const cursorParentId = $6723c76b9de38fd1$export$8e294ac6de4c921f();
-    const cursorOverFolder = $6723c76b9de38fd1$export$f3ad962ff713505f();
+    const realTree = $6723c76b9de38fd1$export$367b0f2231a90ba0();
+    const tree = $foSVk$react.useMemo(()=>realTree
+    , []);
+    tree.sync(realTree);
+    const node = tree.visibleNodes[index];
+    const next = tree.visibleNodes[index + 1] || null;
+    const prev = tree.visibleNodes[index - 1] || null;
     const el = $foSVk$react.useRef(null);
     const [{ isDragging: isDragging  }, dragRef] = $74bee24dbb0f3e2b$export$715c0d031ede7907(node);
     const [, dropRef] = $cf8ebdb33758b119$export$57afafec4637d997(el, node, prev, next);
-    const isEditing = node.id === $6723c76b9de38fd1$export$9ab192f953c1b33b();
-    const isSelected = selected(index);
-    const nextSelected = next && selected(index + 1);
-    const prevSelected = prev && selected(index - 1);
-    const isHoveringOverChild = node.id === cursorParentId;
-    const isOverFolder = node.id === cursorParentId && cursorOverFolder;
+    const isEditing = node.id === tree.editingId;
+    const isSelected = tree.isSelected(index);
+    const nextSelected = next && tree.isSelected(index + 1);
+    const prevSelected = prev && tree.isSelected(index - 1);
+    const isHoveringOverChild = node.id === tree.cursorParentId;
+    const isOverFolder = node.id === tree.cursorParentId && tree.cursorOverFolder;
     const isOpen = node.isOpen;
     const indent = tree.indent * node.level;
     const state = $foSVk$react.useMemo(()=>{
@@ -1245,23 +1264,23 @@ const $9a2860bfaab93091$export$b59bdbef9ce70de2 = /*#__PURE__*/ ($parcel$interop
                 selectOnClick: true
             })=>{
                 if (node.rowIndex === null) return;
-                if (args.selectOnClick || e.metaKey || e.shiftKey) tree.api.select(node.rowIndex, e.metaKey, e.shiftKey);
-                else tree.api.select(null, false, false);
+                if (args.selectOnClick || e.metaKey || e.shiftKey) tree.select(node.rowIndex, e.metaKey, e.shiftKey);
+                else tree.select(null, false, false);
             },
             toggle: (e)=>{
                 e.stopPropagation();
                 tree.onToggle(node.id, !node.isOpen);
             },
-            edit: ()=>tree.api.edit(node.id)
+            edit: ()=>tree.edit(node.id)
             ,
             submit: (name)=>{
-                name.trim() ? tree.api.submit(node.id, name) : tree.api.reset(node.id);
+                name.trim() ? tree.submit(node.id, name) : tree.reset(node.id);
             },
-            reset: ()=>tree.api.reset(node.id)
+            reset: ()=>tree.reset(node.id)
         };
     }, [
-        tree,
-        node
+        node,
+        tree
     ]);
     const Renderer = $foSVk$react.useMemo(()=>{
         return(/*#__PURE__*/ ($parcel$interopDefault($foSVk$react)).memo(tree.renderer));
@@ -1275,39 +1294,13 @@ const $9a2860bfaab93091$export$b59bdbef9ce70de2 = /*#__PURE__*/ ($parcel$interop
         state: state,
         handlers: handlers,
         preview: false,
-        tree: tree.api
+        tree: tree
     }));
 });
 
 
-const $641461e16d1a2941$var$OuterElement = /*#__PURE__*/ $foSVk$react.forwardRef(function Outer(props, ref) {
-    const { children: children , ...rest } = props;
-    const tree = $6723c76b9de38fd1$export$ea6c3ae2bd3a5510();
-    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsxs("div", {
-        // @ts-ignore
-        ref: ref,
-        ...rest,
-        onClick: tree.onClick,
-        onContextMenu: tree.onContextMenu,
-        children: [
-            /*#__PURE__*/ $foSVk$reactjsxruntime.jsx("div", {
-                style: {
-                    height: tree.api.visibleNodes.length * tree.rowHeight,
-                    width: "100%",
-                    overflow: "hidden",
-                    position: "absolute",
-                    left: "0",
-                    right: "0"
-                },
-                children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($8fbadd7be430f501$export$ef961593063b03e8, {
-                })
-            }),
-            children
-        ]
-    }));
-});
-function $641461e16d1a2941$var$List(props) {
-    const tree = $6723c76b9de38fd1$export$ea6c3ae2bd3a5510();
+function $07c00e593b4f3d62$export$54c2e3dc7acea9f5(props) {
+    const tree = $6723c76b9de38fd1$export$367b0f2231a90ba0();
     return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx("div", {
         style: {
             height: tree.height,
@@ -1317,23 +1310,20 @@ function $641461e16d1a2941$var$List(props) {
         children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($foSVk$reactwindow.FixedSizeList, {
             className: props.className,
             outerRef: tree.listEl,
-            itemCount: tree.api.visibleNodes.length,
+            itemCount: tree.visibleNodes.length,
             height: tree.height,
             width: tree.width,
             itemSize: tree.rowHeight,
-            itemKey: (index)=>tree.api.visibleNodes[index]?.id || index
+            itemKey: (index)=>tree.visibleNodes[index]?.id || index
             ,
-            outerElementType: $641461e16d1a2941$var$OuterElement,
-            // @ts-ignore
+            outerElementType: $0e2adc7837d85ac3$export$70c2b8898b86d3ad,
             ref: tree.list,
             children: $9a2860bfaab93091$export$b59bdbef9ce70de2
         })
     }));
 }
-function $641461e16d1a2941$var$OuterDrop(props) {
-    $6c0a9a91d5e7ff45$export$5a6c424b1725f44f();
-    return props.children;
-}
+
+
 const $641461e16d1a2941$export$7fbedc92909ed28e = /*#__PURE__*/ $foSVk$react.forwardRef(function $641461e16d1a2941$export$7fbedc92909ed28e(props, ref) {
     const root = $foSVk$react.useMemo(()=>$2d914ccbe0a16edd$export$9c537176392280a0(props.data, props.hideRoot, props.getChildren, props.isOpen, props.disableDrag, props.disableDrop, props.openByDefault)
     , [
@@ -1346,27 +1336,17 @@ const $641461e16d1a2941$export$7fbedc92909ed28e = /*#__PURE__*/ $foSVk$react.for
         props.openByDefault, 
     ]);
     return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx($59c6116b7d090f1c$export$6a399b2f7f12632c, {
+        treeProps: props,
         imperativeHandle: ref,
         root: root,
-        listEl: $foSVk$react.useRef(null),
-        renderer: props.children,
-        width: props.width === undefined ? 300 : props.width,
-        height: props.height === undefined ? 500 : props.height,
-        indent: props.indent === undefined ? 24 : props.indent,
-        rowHeight: props.rowHeight === undefined ? 24 : props.rowHeight,
-        onMove: props.onMove || $eb5355379510ac9b$export$8793edee2d425525,
-        onToggle: props.onToggle || $eb5355379510ac9b$export$8793edee2d425525,
-        onEdit: props.onEdit || $eb5355379510ac9b$export$8793edee2d425525,
-        onClick: props.onClick,
-        onContextMenu: props.onContextMenu,
         children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsxs($foSVk$reactdnd.DndProvider, {
             backend: $foSVk$reactdndhtml5backend.HTML5Backend,
             options: {
                 rootElement: props.dndRootElement || undefined
             },
             children: [
-                /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($641461e16d1a2941$var$OuterDrop, {
-                    children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($641461e16d1a2941$var$List, {
+                /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($df8d0340a995314b$export$a6ee728c3c6ef11d, {
+                    children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($07c00e593b4f3d62$export$54c2e3dc7acea9f5, {
                         className: props.className
                     })
                 }),