react-arborist 3.3.0-rc.1 → 3.3.1

package/dist/main/utils.js

@@ -0,0 +1,183 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInsertParentId = exports.getInsertIndex = exports.waitFor = exports.safeRun = exports.mergeRefs = exports.identify = exports.identifyNull = exports.access = exports.focusPrevElement = exports.focusNextElement = exports.walk = exports.dfs = exports.noop = exports.indexOf = exports.isDescendant = exports.isClosed = exports.isItem = exports.bound = void 0;
+function bound(n, min, max) {
+    return Math.max(Math.min(n, max), min);
+}
+exports.bound = bound;
+function isItem(node) {
+    return node && node.isLeaf;
+}
+exports.isItem = isItem;
+function isClosed(node) {
+    return node && node.isInternal && !node.isOpen;
+}
+exports.isClosed = isClosed;
+/**
+ * Is first param a descendant of the second param
+ */
+const isDescendant = (a, b) => {
+    let n = a;
+    while (n) {
+        if (n.id === b.id)
+            return true;
+        n = n.parent;
+    }
+    return false;
+};
+exports.isDescendant = isDescendant;
+const indexOf = (node) => {
+    if (!node.parent)
+        throw Error("Node does not have a parent");
+    return node.parent.children.findIndex((c) => c.id === node.id);
+};
+exports.indexOf = indexOf;
+function noop() { }
+exports.noop = noop;
+function dfs(node, id) {
+    if (!node)
+        return null;
+    if (node.id === id)
+        return node;
+    if (node.children) {
+        for (let child of node.children) {
+            const result = dfs(child, id);
+            if (result)
+                return result;
+        }
+    }
+    return null;
+}
+exports.dfs = dfs;
+function walk(node, fn) {
+    fn(node);
+    if (node.children) {
+        for (let child of node.children) {
+            walk(child, fn);
+        }
+    }
+}
+exports.walk = walk;
+function focusNextElement(target) {
+    const elements = getFocusable(target);
+    let next;
+    for (let i = 0; i < elements.length; ++i) {
+        const item = elements[i];
+        if (item === target) {
+            next = nextItem(elements, i);
+            break;
+        }
+    }
+    // @ts-ignore ??
+    next === null || next === void 0 ? void 0 : next.focus();
+}
+exports.focusNextElement = focusNextElement;
+function focusPrevElement(target) {
+    const elements = getFocusable(target);
+    let next;
+    for (let i = 0; i < elements.length; ++i) {
+        const item = elements[i];
+        if (item === target) {
+            next = prevItem(elements, i);
+            break;
+        }
+    }
+    // @ts-ignore
+    next === null || next === void 0 ? void 0 : next.focus();
+}
+exports.focusPrevElement = focusPrevElement;
+function nextItem(list, index) {
+    if (index + 1 < list.length) {
+        return list[index + 1];
+    }
+    else {
+        return list[0];
+    }
+}
+function prevItem(list, index) {
+    if (index - 1 >= 0) {
+        return list[index - 1];
+    }
+    else {
+        return list[list.length - 1];
+    }
+}
+function getFocusable(target) {
+    return Array.from(document.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)')).filter((e) => e === target || !target.contains(e));
+}
+function access(obj, accessor) {
+    if (typeof accessor === "boolean")
+        return accessor;
+    if (typeof accessor === "string")
+        return obj[accessor];
+    return accessor(obj);
+}
+exports.access = access;
+function identifyNull(obj) {
+    if (obj === null)
+        return null;
+    else
+        return identify(obj);
+}
+exports.identifyNull = identifyNull;
+function identify(obj) {
+    return typeof obj === "string" ? obj : obj.id;
+}
+exports.identify = identify;
+function mergeRefs(...refs) {
+    return (instance) => {
+        refs.forEach((ref) => {
+            if (typeof ref === "function") {
+                ref(instance);
+            }
+            else if (ref != null) {
+                ref.current = instance;
+            }
+        });
+    };
+}
+exports.mergeRefs = mergeRefs;
+function safeRun(fn, ...args) {
+    if (fn)
+        return fn(...args);
+}
+exports.safeRun = safeRun;
+function waitFor(fn) {
+    return new Promise((resolve, reject) => {
+        let tries = 0;
+        function check() {
+            tries += 1;
+            if (tries === 100)
+                reject();
+            if (fn())
+                resolve();
+            else
+                setTimeout(check, 10);
+        }
+        check();
+    });
+}
+exports.waitFor = waitFor;
+function getInsertIndex(tree) {
+    var _a, _b;
+    const focus = tree.focusedNode;
+    if (!focus)
+        return (_b = (_a = tree.root.children) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    if (focus.isOpen)
+        return 0;
+    if (focus.parent)
+        return focus.childIndex + 1;
+    return 0;
+}
+exports.getInsertIndex = getInsertIndex;
+function getInsertParentId(tree) {
+    const focus = tree.focusedNode;
+    if (!focus)
+        return null;
+    if (focus.isOpen)
+        return focus.id;
+    if (focus.parent && !focus.parent.isRoot)
+        return focus.parent.id;
+    return null;
+}
+exports.getInsertParentId = getInsertParentId;

package/dist/module/components/cursor.d.ts

@@ -0,0 +1 @@
+export declare function Cursor(): import("react/jsx-runtime").JSX.Element | null;

package/dist/module/components/cursor.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDndContext, useTreeApi } from "../context";
+export function Cursor() {
+    var _a, _b;
+    const tree = useTreeApi();
+    const state = useDndContext();
+    const cursor = state.cursor;
+    if (!cursor || cursor.type !== "line")
+        return null;
+    const indent = tree.indent;
+    const top = tree.rowHeight * cursor.index +
+        ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0);
+    const left = indent * cursor.level;
+    const Cursor = tree.renderCursor;
+    return _jsx(Cursor, { top, left, indent });
+}

package/dist/module/components/default-container.d.ts

@@ -0,0 +1,6 @@
+/**
+ * All these keyboard shortcuts seem like they should be configurable.
+ * Each operation should be a given a name and separated from
+ * the event handler. Future clean up welcome.
+ */
+export declare function DefaultContainer(): import("react/jsx-runtime").JSX.Element;

package/dist/module/components/default-container.js

@@ -0,0 +1,234 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FixedSizeList } from "react-window";
+import { useDataUpdates, useTreeApi } from "../context";
+import { focusNextElement, focusPrevElement } from "../utils";
+import { ListOuterElement } from "./list-outer-element";
+import { ListInnerElement } from "./list-inner-element";
+import { RowContainer } from "./row-container";
+let focusSearchTerm = "";
+let timeoutId = null;
+/**
+ * All these keyboard shortcuts seem like they should be configurable.
+ * Each operation should be a given a name and separated from
+ * the event handler. Future clean up welcome.
+ */
+export function DefaultContainer() {
+    useDataUpdates();
+    const tree = useTreeApi();
+    return (_jsx("div", { role: "tree", style: {
+            height: tree.height,
+            width: tree.width,
+            minHeight: 0,
+            minWidth: 0,
+        }, onContextMenu: tree.props.onContextMenu, onClick: tree.props.onClick, tabIndex: 0, onFocus: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+                tree.onFocus();
+            }
+        }, onBlur: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+                tree.onBlur();
+            }
+        }, onKeyDown: (e) => {
+            var _a;
+            if (tree.isEditing) {
+                return;
+            }
+            if (e.key === "Backspace") {
+                if (!tree.props.onDelete)
+                    return;
+                const ids = Array.from(tree.selectedIds);
+                if (ids.length > 1) {
+                    let nextFocus = tree.mostRecentNode;
+                    while (nextFocus && nextFocus.isSelected) {
+                        nextFocus = nextFocus.nextSibling;
+                    }
+                    if (!nextFocus)
+                        nextFocus = tree.lastNode;
+                    tree.focus(nextFocus, { scroll: false });
+                    tree.delete(Array.from(ids));
+                }
+                else {
+                    const node = tree.focusedNode;
+                    if (node) {
+                        const sib = node.nextSibling;
+                        const parent = node.parent;
+                        tree.focus(sib || parent, { scroll: false });
+                        tree.delete(node);
+                    }
+                }
+                return;
+            }
+            if (e.key === "Tab" && !e.shiftKey) {
+                e.preventDefault();
+                focusNextElement(e.currentTarget);
+                return;
+            }
+            if (e.key === "Tab" && e.shiftKey) {
+                e.preventDefault();
+                focusPrevElement(e.currentTarget);
+                return;
+            }
+            if (e.key === "ArrowDown") {
+                e.preventDefault();
+                const next = tree.nextNode;
+                if (e.metaKey) {
+                    tree.select(tree.focusedNode);
+                    tree.activate(tree.focusedNode);
+                    return;
+                }
+                else if (!e.shiftKey || tree.props.disableMultiSelection) {
+                    tree.focus(next);
+                    return;
+                }
+                else {
+                    if (!next)
+                        return;
+                    const current = tree.focusedNode;
+                    if (!current) {
+                        tree.focus(tree.firstNode);
+                    }
+                    else if (current.isSelected) {
+                        tree.selectContiguous(next);
+                    }
+                    else {
+                        tree.selectMulti(next);
+                    }
+                    return;
+                }
+            }
+            if (e.key === "ArrowUp") {
+                e.preventDefault();
+                const prev = tree.prevNode;
+                if (!e.shiftKey || tree.props.disableMultiSelection) {
+                    tree.focus(prev);
+                    return;
+                }
+                else {
+                    if (!prev)
+                        return;
+                    const current = tree.focusedNode;
+                    if (!current) {
+                        tree.focus(tree.lastNode); // ?
+                    }
+                    else if (current.isSelected) {
+                        tree.selectContiguous(prev);
+                    }
+                    else {
+                        tree.selectMulti(prev);
+                    }
+                    return;
+                }
+            }
+            if (e.key === "ArrowRight") {
+                const node = tree.focusedNode;
+                if (!node)
+                    return;
+                if (node.isInternal && node.isOpen) {
+                    tree.focus(tree.nextNode);
+                }
+                else if (node.isInternal)
+                    tree.open(node.id);
+                return;
+            }
+            if (e.key === "ArrowLeft") {
+                const node = tree.focusedNode;
+                if (!node || node.isRoot)
+                    return;
+                if (node.isInternal && node.isOpen)
+                    tree.close(node.id);
+                else if (!((_a = node.parent) === null || _a === void 0 ? void 0 : _a.isRoot)) {
+                    tree.focus(node.parent);
+                }
+                return;
+            }
+            if (e.key === "a" && e.metaKey && !tree.props.disableMultiSelection) {
+                e.preventDefault();
+                tree.selectAll();
+                return;
+            }
+            if (e.key === "a" && !e.metaKey && tree.props.onCreate) {
+                tree.createLeaf();
+                return;
+            }
+            if (e.key === "A" && !e.metaKey) {
+                if (!tree.props.onCreate)
+                    return;
+                tree.createInternal();
+                return;
+            }
+            if (e.key === "Home") {
+                // add shift keys
+                e.preventDefault();
+                tree.focus(tree.firstNode);
+                return;
+            }
+            if (e.key === "End") {
+                // add shift keys
+                e.preventDefault();
+                tree.focus(tree.lastNode);
+                return;
+            }
+            if (e.key === "Enter") {
+                const node = tree.focusedNode;
+                if (!node)
+                    return;
+                if (!node.isEditable || !tree.props.onRename)
+                    return;
+                setTimeout(() => {
+                    if (node)
+                        tree.edit(node);
+                });
+                return;
+            }
+            if (e.key === " ") {
+                e.preventDefault();
+                const node = tree.focusedNode;
+                if (!node)
+                    return;
+                if (node.isLeaf) {
+                    node.select();
+                    node.activate();
+                }
+                else {
+                    node.toggle();
+                }
+                return;
+            }
+            if (e.key === "*") {
+                const node = tree.focusedNode;
+                if (!node)
+                    return;
+                tree.openSiblings(node);
+                return;
+            }
+            if (e.key === "PageUp") {
+                e.preventDefault();
+                tree.pageUp();
+                return;
+            }
+            if (e.key === "PageDown") {
+                e.preventDefault();
+                tree.pageDown();
+            }
+            // If they type a sequence of characters
+            // collect them. Reset them after a timeout.
+            // Use it to search the tree for a node, then focus it.
+            // Clean this up a bit later
+            clearTimeout(timeoutId);
+            focusSearchTerm += e.key;
+            timeoutId = setTimeout(() => {
+                focusSearchTerm = "";
+            }, 600);
+            const node = tree.visibleNodes.find((n) => {
+                // @ts-ignore
+                const name = n.data.name;
+                if (typeof name === "string") {
+                    return name.toLowerCase().startsWith(focusSearchTerm);
+                }
+                else
+                    return false;
+            });
+            if (node)
+                tree.focus(node.id);
+        }, children: _jsx(FixedSizeList, { className: tree.props.className, outerRef: tree.listEl, itemCount: tree.visibleNodes.length, height: tree.height, width: tree.width, itemSize: tree.rowHeight, overscanCount: tree.overscanCount, itemKey: (index) => { var _a; return ((_a = tree.visibleNodes[index]) === null || _a === void 0 ? void 0 : _a.id) || index; }, outerElementType: ListOuterElement, innerElementType: ListInnerElement, onScroll: tree.props.onScroll, onItemsRendered: tree.onItemsRendered.bind(tree), ref: tree.list, children: RowContainer }) }));
+}

package/dist/module/components/default-cursor.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { CursorProps } from "../types/renderers";
+export declare const DefaultCursor: React.NamedExoticComponent<CursorProps>;

package/dist/module/components/default-cursor.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+const placeholderStyle = {
+    display: "flex",
+    alignItems: "center",
+    zIndex: 1,
+};
+const lineStyle = {
+    flex: 1,
+    height: "2px",
+    background: "#4B91E2",
+    borderRadius: "1px",
+};
+const circleStyle = {
+    width: "4px",
+    height: "4px",
+    boxShadow: "0 0 0 3px #4B91E2",
+    borderRadius: "50%",
+};
+export const DefaultCursor = React.memo(function DefaultCursor({ top, left, indent, }) {
+    const style = {
+        position: "absolute",
+        pointerEvents: "none",
+        top: top - 2 + "px",
+        left: left + "px",
+        right: indent + "px",
+    };
+    return (_jsxs("div", { style: Object.assign(Object.assign({}, placeholderStyle), style), children: [_jsx("div", { style: Object.assign({}, circleStyle) }), _jsx("div", { style: Object.assign({}, lineStyle) })] }));
+});

package/dist/module/components/default-drag-preview.d.ts

@@ -0,0 +1,2 @@
+import { DragPreviewProps } from "../types/renderers";
+export declare function DefaultDragPreview({ offset, mouse, id, dragIds, isDragging, }: DragPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/module/components/default-drag-preview.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { useTreeApi } from "../context";
+const layerStyles = {
+    position: "fixed",
+    pointerEvents: "none",
+    zIndex: 100,
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+};
+const getStyle = (offset) => {
+    if (!offset)
+        return { display: "none" };
+    const { x, y } = offset;
+    return { transform: `translate(${x}px, ${y}px)` };
+};
+const getCountStyle = (offset) => {
+    if (!offset)
+        return { display: "none" };
+    const { x, y } = offset;
+    return { transform: `translate(${x + 10}px, ${y + 10}px)` };
+};
+export function DefaultDragPreview({ offset, mouse, id, dragIds, isDragging, }) {
+    return (_jsxs(Overlay, { isDragging: isDragging, children: [_jsx(Position, { offset: offset, children: _jsx(PreviewNode, { id: id, dragIds: dragIds }) }), _jsx(Count, { mouse: mouse, count: dragIds.length })] }));
+}
+const Overlay = memo(function Overlay(props) {
+    if (!props.isDragging)
+        return null;
+    return _jsx("div", { style: layerStyles, children: props.children });
+});
+function Position(props) {
+    return (_jsx("div", { className: "row preview", style: getStyle(props.offset), children: props.children }));
+}
+function Count(props) {
+    const { count, mouse } = props;
+    if (count > 1)
+        return (_jsx("div", { className: "selected-count", style: getCountStyle(mouse), children: count }));
+    else
+        return null;
+}
+const PreviewNode = memo(function PreviewNode(props) {
+    const tree = useTreeApi();
+    const node = tree.get(props.id);
+    if (!node)
+        return null;
+    return (_jsx(tree.renderNode, { preview: true, node: node, style: {
+            paddingLeft: node.level * tree.indent,
+            opacity: 0.2,
+            background: "transparent",
+        }, tree: tree }));
+});

package/dist/module/components/default-node.d.ts

@@ -0,0 +1,2 @@
+import { NodeRendererProps } from "../types/renderers";
+export declare function DefaultNode<T>(props: NodeRendererProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/module/components/default-node.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+export function DefaultNode(props) {
+    return (_jsxs("div", { ref: props.dragHandle, style: props.style, children: [_jsx("span", { onClick: (e) => {
+                    e.stopPropagation();
+                    props.node.toggle();
+                }, children: props.node.isLeaf ? "🌳" : props.node.isOpen ? "🗁" : "🗀" }), " ", props.node.isEditing ? _jsx(Edit, Object.assign({}, props)) : _jsx(Show, Object.assign({}, props))] }));
+}
+function Show(props) {
+    return (_jsx(_Fragment, { children: _jsx("span", { children: props.node.data.name }) }));
+}
+function Edit({ node }) {
+    const input = useRef();
+    useEffect(() => {
+        var _a, _b;
+        (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = input.current) === null || _b === void 0 ? void 0 : _b.select();
+    }, []);
+    return (_jsx("input", { ref: input, 
+        // @ts-ignore
+        defaultValue: node.data.name, onBlur: () => node.reset(), onKeyDown: (e) => {
+            var _a;
+            if (e.key === "Escape")
+                node.reset();
+            if (e.key === "Enter")
+                node.submit(((_a = input.current) === null || _a === void 0 ? void 0 : _a.value) || "");
+        } }));
+}

package/dist/module/components/default-row.d.ts

@@ -0,0 +1,2 @@
+import { RowRendererProps } from "../types/renderers";
+export declare function DefaultRow<T>({ node, attrs, innerRef, children, }: RowRendererProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/module/components/default-row.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DefaultRow({ node, attrs, innerRef, children, }) {
+    return (_jsx("div", Object.assign({}, attrs, { ref: innerRef, onFocus: (e) => e.stopPropagation(), onClick: node.handleClick, children: children })));
+}

package/dist/module/components/drag-preview-container.d.ts

@@ -0,0 +1 @@
+export declare function DragPreviewContainer(): import("react/jsx-runtime").JSX.Element;

package/dist/module/components/drag-preview-container.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDragLayer } from "react-dnd";
+import { useTreeApi } from "../context";
+import { DefaultDragPreview } from "./default-drag-preview";
+export function DragPreviewContainer() {
+    const tree = useTreeApi();
+    const { offset, mouse, item, isDragging } = useDragLayer((m) => {
+        return {
+            offset: m.getSourceClientOffset(),
+            mouse: m.getClientOffset(),
+            item: m.getItem(),
+            isDragging: m.isDragging(),
+        };
+    });
+    const DragPreview = tree.props.renderDragPreview || DefaultDragPreview;
+    return (_jsx(DragPreview, { offset: offset, mouse: mouse, id: (item === null || item === void 0 ? void 0 : item.id) || null, dragIds: (item === null || item === void 0 ? void 0 : item.dragIds) || [], isDragging: isDragging }));
+}

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ListInnerElement: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;

package/dist/module/components/list-inner-element.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTreeApi } from "../context";
+export const ListInnerElement = forwardRef(function InnerElement(_a, ref) {
+    var _b, _c, _d, _e;
+    var { style } = _a, rest = __rest(_a, ["style"]);
+    const tree = useTreeApi();
+    const paddingTop = (_c = (_b = tree.props.padding) !== null && _b !== void 0 ? _b : tree.props.paddingTop) !== null && _c !== void 0 ? _c : 0;
+    const paddingBottom = (_e = (_d = tree.props.padding) !== null && _d !== void 0 ? _d : tree.props.paddingBottom) !== null && _e !== void 0 ? _e : 0;
+    return (_jsx("div", Object.assign({ ref: ref, style: Object.assign(Object.assign({}, style), { height: `${parseFloat(style.height) + paddingTop + paddingBottom}px` }) }, rest)));
+});

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ListOuterElement: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/module/components/list-outer-element.js

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTreeApi } from "../context";
+import { Cursor } from "./cursor";
+export const ListOuterElement = forwardRef(function Outer(props, ref) {
+    const { children } = props, rest = __rest(props, ["children"]);
+    const tree = useTreeApi();
+    return (_jsxs("div", Object.assign({ 
+        // @ts-ignore
+        ref: ref }, rest, { onClick: (e) => {
+            if (e.currentTarget === e.target)
+                tree.deselectAll();
+        }, children: [_jsx(DropContainer, {}), children] })));
+});
+const DropContainer = () => {
+    const tree = useTreeApi();
+    return (_jsx("div", { style: {
+            height: tree.visibleNodes.length * tree.rowHeight,
+            width: "100%",
+            position: "absolute",
+            left: "0",
+            right: "0",
+        }, children: _jsx(Cursor, {}) }));
+};

package/dist/module/components/outer-drop.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from "react";
+export declare function OuterDrop(props: {
+    children: ReactElement;
+}): ReactElement<any, string | import("react").JSXElementConstructor<any>>;