react-arborist 0.1.14 → 0.2.0-beta.0

package/dist/index.js

@@ -0,0 +1,1354 @@
+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");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "Tree", () => $641461e16d1a2941$export$7fbedc92909ed28e);
+$parcel$export(module.exports, "TreeApi", () => $f02bc7cefcb30793$export$e2da3477247342d1);
+
+
+
+
+
+
+class $13a483230b6b2ece$export$9a58ef0d7ad3278c {
+    constructor(start, end){
+        this.start = start;
+        this.end = end;
+        if (this.start > this.end) throw new Error("Invalid range: start larger than end");
+    }
+    serialize() {
+        return [
+            this.start,
+            this.end
+        ];
+    }
+    contains(n) {
+        return n >= this.start && n <= this.end;
+    }
+    overlaps(r) {
+        return this.contains(r.start - 1) || this.contains(r.end + 1);
+    }
+    combine(r) {
+        this.start = Math.min(r.start, this.start);
+        this.end = Math.max(r.end, this.end);
+    }
+    get size() {
+        return this.end - this.start + 1;
+    }
+    clone() {
+        return new $13a483230b6b2ece$export$9a58ef0d7ad3278c(this.start, this.end);
+    }
+    map(fn) {
+        let returns = [];
+        for(let i = this.start; i <= this.end; i++)returns.push(fn(i));
+        return returns;
+    }
+    isEqual(other) {
+        return this.start === other.start && this.end === other.end;
+    }
+}
+
+
+class $974b6ba4b06bc58f$export$52baac22726c72bf {
+    static parse(data, items) {
+        if (data) return new $974b6ba4b06bc58f$export$52baac22726c72bf(data.ranges, data.currentIndex, data.direction, items);
+        else return new $974b6ba4b06bc58f$export$52baac22726c72bf();
+    }
+    constructor(ranges = [], currentIndex = ranges.length ? ranges.length - 1 : null, direction = "none", items = []){
+        this.ranges = [];
+        this.direction = "none";
+        ranges.forEach(([s, e])=>this.addRange(s, e)
+        );
+        this.currentIndex = currentIndex;
+        this.direction = direction;
+        this.items = items;
+    }
+    get current() {
+        if (this.currentIndex === null) return null;
+        const range = this.ranges[this.currentIndex];
+        if (!range) return null;
+        else return range;
+    }
+    select(n) {
+        if (n < 0 || n >= this.items.length) return;
+        this.clear();
+        this.currentIndex = this.addRange(n, n);
+    }
+    multiSelect(n) {
+        if (n < 0 || n >= this.items.length) return;
+        if (this.contains(n)) return;
+        this.currentIndex = this.addRange(n, n);
+        this.compact(n);
+    }
+    deselect(n) {
+        if (n < 0 || n >= this.items.length) return;
+        const r1 = this.ranges.find((r)=>r.contains(n)
+        );
+        if (!r1) return;
+        else if (r1.size === 1) this.removeRange(r1);
+        else if (r1.start === n) r1.start++;
+        else if (r1.end === n) r1.end--;
+        else {
+            this.removeRange(r1);
+            this.addRange(r1.start, n - 1);
+            this.currentIndex = this.addRange(n + 1, r1.end);
+        }
+    }
+    getSelectedItems() {
+        return this.ranges.flatMap((range)=>range.map((index)=>this.items[index]
+            )
+        );
+    }
+    extend(n) {
+        if (n < 0 || n >= this.items.length) return;
+        if (this.isEmpty()) this.select(n);
+        else {
+            const anchor = this.getAnchor();
+            if (anchor !== null && this.current) {
+                const [start, end] = [
+                    n,
+                    anchor
+                ].sort((a, b)=>a - b
+                );
+                this.current.start = start;
+                this.current.end = end;
+                this.compact(n);
+            }
+        }
+    }
+    contains(n) {
+        if (n === null) return false;
+        return this.ranges.some((r)=>r.contains(n)
+        );
+    }
+    getRanges() {
+        return this.ranges.map((r)=>r.serialize()
+        );
+    }
+    clear() {
+        this.ranges = [];
+        this.currentIndex = null;
+        this.direction = "none";
+    }
+    serialize() {
+        return {
+            ranges: this.getRanges(),
+            currentIndex: this.currentIndex,
+            direction: this.direction
+        };
+    }
+    isEqual(other) {
+        if (other.ranges.length !== this.ranges.length) return false;
+        for(let i = 0; i < this.ranges.length; ++i){
+            if (!this.ranges[i].isEqual(other.ranges[i])) return false;
+        }
+        return true;
+    }
+    addRange(start, end) {
+        const r2 = new $13a483230b6b2ece$export$9a58ef0d7ad3278c(start, end);
+        // Keep ranges sorted by start
+        const index = this.ranges.findIndex((r)=>r.start >= start
+        );
+        if (index === -1) this.ranges.push(r2);
+        else this.ranges.splice(index, 0, r2);
+        return index === -1 ? this.ranges.length - 1 : index;
+    }
+    removeRange(r) {
+        const index = this.ranges.indexOf(r);
+        this.ranges.splice(index, 1);
+        if (this.isEmpty()) this.currentIndex = null;
+        else if (index === this.currentIndex) this.currentIndex = this.ranges.length - 1;
+    }
+    isEmpty() {
+        return this.ranges.length === 0;
+    }
+    getAnchor() {
+        if (!this.current) return null;
+        return this.direction === "backward" ? this.current.end : this.current.start;
+    }
+    getFocus() {
+        if (!this.current) return -1;
+        return this.direction === "backward" ? this.current.start : this.current.end;
+    }
+    compact(focus) {
+        const removals = [];
+        const current = this.current;
+        for (let r3 of this.ranges){
+            if (!this.current || r3 === this.current) continue;
+            if (this.current.overlaps(r3)) {
+                this.current.combine(r3);
+                removals.push(r3);
+            }
+        }
+        removals.forEach((r)=>this.removeRange(r)
+        );
+        if (current) this.currentIndex = this.ranges.indexOf(current);
+        if (!this.current) return;
+        if (this.current.start < focus) this.direction = "forward";
+        else if (this.current.end > focus) this.direction = "backward";
+        else this.direction = "none";
+    }
+}
+
+
+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 $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 $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
+    ]);
+    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;
+    }
+    return visitSelfAndChildren(model1, hideRoot ? -1 : 0, null);
+}
+
+
+
+
+function $eb5355379510ac9b$export$adf7c0fe6059d774(n, min, max) {
+    return Math.max(Math.min(n, max), min);
+}
+const $eb5355379510ac9b$export$769c5e872f5f8638 = (node)=>!!node.children
+;
+function $eb5355379510ac9b$export$5318634f2ee07019(node) {
+    return node && !$eb5355379510ac9b$export$769c5e872f5f8638(node);
+}
+function $eb5355379510ac9b$export$4210f5ea57fbae57(node) {
+    return node && $eb5355379510ac9b$export$769c5e872f5f8638(node) && !node.isOpen;
+}
+const $eb5355379510ac9b$export$1e38f72c6c546f70 = (a, b)=>{
+    let n = a;
+    while(n){
+        if (n.id === b.id) return true;
+        n = n.parent;
+    }
+    return false;
+};
+const $eb5355379510ac9b$export$305f7d4e9d4624f2 = (node)=>{
+    // This should probably not throw an error, but instead return null
+    if (!node.parent) throw Error("Node does not have a parent");
+    return node.parent.children.findIndex((c)=>c.id === node.id
+    );
+};
+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
+        })
+};
+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;
+    }
+}
+function $da0693b023d53dfe$var$equal(a, b) {
+    if (a === null || b === null) return false;
+    return JSON.stringify(a) === JSON.stringify(b);
+}
+
+
+
+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
+    ]);
+}
+
+
+
+
+
+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;
+}
+
+
+
+class $f02bc7cefcb30793$export$e2da3477247342d1 {
+    constructor(dispatch, state, props, list){
+        this.dispatch = dispatch;
+        this.state = state;
+        this.props = props;
+        this.list = list;
+    }
+    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) {
+        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.edit(id ? id.toString() : null));
+    }
+    select(index, meta, shift) {
+        this.dispatch($da0693b023d53dfe$export$e324594224ef24da.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, "start");
+        else {
+            this.openParents(id);
+            // This appears to be synchronous
+            // But I've only tested it in the console and
+            // not in an event handler which will be batched...
+            // We may need to wrap this in a timeout or trigger an effect somehow
+            setTimeout(()=>{
+                const index = this.idToIndex[id];
+                if (index) this.list?.scrollToItem(index, "start");
+            });
+        }
+    }
+    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);
+    }
+    get visibleNodes() {
+        return $f02bc7cefcb30793$var$createList(this.props.root);
+    }
+}
+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 $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 $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
+        })
+    , [
+        props,
+        api,
+        list
+    ]);
+    /**
+   * 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;
+    }
+}
+function $59c6116b7d090f1c$var$isOverFolder(state) {
+    return state.cursor.type === "highlight";
+}
+
+
+
+
+
+
+function $8fbadd7be430f501$export$ef961593063b03e8() {
+    const treeView = $6723c76b9de38fd1$export$ea6c3ae2bd3a5510();
+    const cursor = $6723c76b9de38fd1$export$6c87584817ff2461();
+    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 $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  }) {
+    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsxs("div", {
+        style: {
+            ...$8fbadd7be430f501$var$placeholderStyle,
+            ...style
+        },
+        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
+                })
+            }),
+            /*#__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$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,
+            isFirstOfSelected: false,
+            isLastOfSelected: false,
+            isHoveringOverChild: false,
+            isOpen: node.isOpen
+        },
+        handlers: {
+            edit: ()=>{
+            },
+            select: ()=>{
+            },
+            toggle: ()=>{
+            },
+            submit: ()=>{
+            },
+            reset: ()=>{
+            }
+        }
+    }));
+});
+
+
+
+
+
+
+
+
+
+function $74bee24dbb0f3e2b$export$715c0d031ede7907(node) {
+    const tree = $6723c76b9de38fd1$export$ea6c3ae2bd3a5510();
+    const isSelected = $6723c76b9de38fd1$export$fb40a80c530e5f2b();
+    const ids = $6723c76b9de38fd1$export$1c9b7756eccadc96();
+    const [{ isDragging: isDragging  }, ref, preview] = $foSVk$reactdnd.useDrag(()=>({
+            canDrag: ()=>node.isDraggable
+            ,
+            type: "NODE",
+            item: ()=>({
+                    id: node.id,
+                    dragIds: isSelected(node.rowIndex) ? ids : [
+                        node.id
+                    ]
+                })
+            ,
+            collect: (m)=>({
+                    isDragging: m.isDragging()
+                })
+            ,
+            end: (item, monitor)=>{
+                tree.api.hideCursor();
+                const drop = monitor.getDropResult();
+                if (drop && drop.parentId) {
+                    tree.onMove(item.dragIds, drop.parentId, drop.index);
+                    tree.onToggle(drop.parentId, true);
+                }
+            }
+        })
+    , [
+        ids,
+        node
+    ]);
+    $foSVk$react.useEffect(()=>{
+        preview($foSVk$reactdndhtml5backend.getEmptyImage());
+    }, [
+        preview
+    ]);
+    return [
+        {
+            isDragging: isDragging
+        },
+        ref
+    ];
+}
+
+
+
+
+
+
+function $cf8ebdb33758b119$export$57afafec4637d997(el, node, prev, next) {
+    const tree = $6723c76b9de38fd1$export$ea6c3ae2bd3a5510();
+    return $foSVk$reactdnd.useDrop(()=>({
+            accept: "NODE",
+            canDrop: (item)=>{
+                for (let id of item.dragIds){
+                    const drag = tree.api.getNode(id);
+                    if (!drag) return false;
+                    if ($eb5355379510ac9b$export$769c5e872f5f8638(drag) && $eb5355379510ac9b$export$1e38f72c6c546f70(node, drag)) return false;
+                }
+                return true;
+            },
+            hover: (item, m)=>{
+                if (m.canDrop()) {
+                    const offset = m.getClientOffset();
+                    if (!el.current || !offset) return;
+                    const { cursor: cursor  } = $462841de7cc5b715$export$f502ca02ebb85a1c({
+                        element: el.current,
+                        offset: offset,
+                        indent: tree.indent,
+                        node: node,
+                        prevNode: prev,
+                        nextNode: next
+                    });
+                    if (cursor) tree.api.showCursor(cursor);
+                } else tree.api.hideCursor();
+            },
+            drop: (item, m)=>{
+                const offset = m.getClientOffset();
+                if (!el.current || !offset) return;
+                const { drop: drop  } = $462841de7cc5b715$export$f502ca02ebb85a1c({
+                    element: el.current,
+                    offset: offset,
+                    indent: tree.indent,
+                    node: node,
+                    prevNode: prev,
+                    nextNode: next
+                });
+                return drop;
+            }
+        })
+    , [
+        node,
+        prev,
+        el,
+        tree
+    ]);
+}
+
+
+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 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 isOpen = node.isOpen;
+    const indent = tree.indent * node.level;
+    const state = $foSVk$react.useMemo(()=>{
+        return {
+            isEditing: isEditing,
+            isDragging: isDragging,
+            isFirstOfSelected: isSelected && !prevSelected,
+            isLastOfSelected: isSelected && !nextSelected,
+            isSelected: isSelected,
+            isHoveringOverChild: isHoveringOverChild,
+            isOpen: isOpen,
+            isOverFolder: isOverFolder
+        };
+    }, [
+        isEditing,
+        isSelected,
+        prevSelected,
+        nextSelected,
+        isHoveringOverChild,
+        isOpen,
+        isDragging,
+        isOverFolder, 
+    ]);
+    if (isSelected) console.log({
+        id: node.id,
+        state: state
+    });
+    const ref = $foSVk$react.useCallback((n)=>{
+        el.current = n;
+        dragRef(dropRef(n));
+    }, [
+        dragRef,
+        dropRef
+    ]);
+    const styles = $foSVk$react.useMemo(()=>({
+            row: {
+                ...style
+            },
+            indent: {
+                paddingLeft: indent
+            }
+        })
+    , [
+        indent,
+        style
+    ]);
+    const handlers = $foSVk$react.useMemo(()=>{
+        return {
+            select: (e, selectOnClick = true)=>{
+                if (node.rowIndex === null) return;
+                if (selectOnClick || e.metaKey || e.shiftKey) tree.api.select(node.rowIndex, e.metaKey, e.shiftKey);
+                else tree.api.select(null, false, false);
+            },
+            toggle: (e)=>{
+                e.stopPropagation();
+                tree.onToggle(node.id, !node.isOpen);
+            },
+            edit: ()=>{
+                tree.api.edit(node.id);
+            },
+            submit: (name)=>{
+                if (name.trim()) tree.onEdit(node.id, name);
+                tree.api.edit(null);
+            },
+            reset: ()=>{
+                tree.api.edit(null);
+            }
+        };
+    }, [
+        tree,
+        node
+    ]);
+    const Renderer = $foSVk$react.useMemo(()=>{
+        return(/*#__PURE__*/ ($parcel$interopDefault($foSVk$react)).memo(tree.renderer));
+    }, [
+        tree.renderer
+    ]);
+    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx(Renderer, {
+        innerRef: ref,
+        data: node.model,
+        styles: styles,
+        state: state,
+        handlers: handlers,
+        preview: false,
+        tree: tree.api
+    }));
+});
+
+
+const $641461e16d1a2941$var$OuterElement = /*#__PURE__*/ $foSVk$react.forwardRef(function Outer(props, ref) {
+    const { children: children , ...rest } = props;
+    const tree = $6723c76b9de38fd1$export$ea6c3ae2bd3a5510();
+    return(// @ts-ignore
+    /*#__PURE__*/ $foSVk$reactjsxruntime.jsxs("div", {
+        ref: ref,
+        ...rest,
+        onClick: tree.onClick,
+        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();
+    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx("div", {
+        style: {
+            height: tree.height,
+            width: tree.width,
+            overflow: "hidden"
+        },
+        children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($foSVk$reactwindow.FixedSizeList, {
+            className: props.className,
+            outerRef: tree.listEl,
+            itemCount: tree.api.visibleNodes.length,
+            height: tree.height,
+            width: tree.width,
+            itemSize: tree.rowHeight,
+            itemKey: (index)=>tree.api.visibleNodes[index]?.id || index
+            ,
+            outerElementType: $641461e16d1a2941$var$OuterElement,
+            // @ts-ignore
+            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)
+    , [
+        props.data,
+        props.hideRoot,
+        props.getChildren,
+        props.isOpen,
+        props.disableDrag,
+        props.disableDrop,
+        props.openByDefault, 
+    ]);
+    return(/*#__PURE__*/ $foSVk$reactjsxruntime.jsx($59c6116b7d090f1c$export$6a399b2f7f12632c, {
+        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,
+            children: [
+                /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($641461e16d1a2941$var$OuterDrop, {
+                    children: /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($641461e16d1a2941$var$List, {
+                        className: props.className,
+                        onClick: props.onClick
+                    })
+                }),
+                /*#__PURE__*/ $foSVk$reactjsxruntime.jsx($8317ba945ccd0ce3$export$133773870222880f, {
+                })
+            ]
+        })
+    }));
+});
+
+
+
+
+
+//# sourceMappingURL=index.js.map