react-arborist 3.3.0-rc.1 → 3.3.1-0

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

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

package/dist/main/components/cursor.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cursor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const context_1 = require("../context");
+function Cursor() {
+    var _a, _b;
+    const tree = (0, context_1.useTreeApi)();
+    const state = (0, context_1.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 (0, jsx_runtime_1.jsx)(Cursor, { top, left, indent });
+}
+exports.Cursor = Cursor;

package/dist/{components → main/components}/default-container.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 /**
  * 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(): JSX.Element;
+export declare function DefaultContainer(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,238 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_window_1 = require("react-window");
+const context_1 = require("../context");
+const utils_1 = require("../utils");
+const list_outer_element_1 = require("./list-outer-element");
+const list_inner_element_1 = require("./list-inner-element");
+const row_container_1 = require("./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.
+ */
+function DefaultContainer() {
+    (0, context_1.useDataUpdates)();
+    const tree = (0, context_1.useTreeApi)();
+    return ((0, jsx_runtime_1.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();
+                (0, utils_1.focusNextElement)(e.currentTarget);
+                return;
+            }
+            if (e.key === "Tab" && e.shiftKey) {
+                e.preventDefault();
+                (0, utils_1.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: (0, jsx_runtime_1.jsx)(react_window_1.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: list_outer_element_1.ListOuterElement, innerElementType: list_inner_element_1.ListInnerElement, onScroll: tree.props.onScroll, onItemsRendered: tree.onItemsRendered.bind(tree), ref: tree.list, children: row_container_1.RowContainer }) }));
+}
+exports.DefaultContainer = DefaultContainer;

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

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultCursor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("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%",
+};
+exports.DefaultCursor = react_1.default.memo(function DefaultCursor({ top, left, indent, }) {
+    const style = {
+        position: "absolute",
+        pointerEvents: "none",
+        top: top - 2 + "px",
+        left: left + "px",
+        right: indent + "px",
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: Object.assign(Object.assign({}, placeholderStyle), style), children: [(0, jsx_runtime_1.jsx)("div", { style: Object.assign({}, circleStyle) }), (0, jsx_runtime_1.jsx)("div", { style: Object.assign({}, lineStyle) })] }));
+});

package/dist/{components → main/components}/default-drag-preview.d.ts

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

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultDragPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const context_1 = require("../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)` };
+};
+function DefaultDragPreview({ offset, mouse, id, dragIds, isDragging, }) {
+    return ((0, jsx_runtime_1.jsxs)(Overlay, { isDragging: isDragging, children: [(0, jsx_runtime_1.jsx)(Position, { offset: offset, children: (0, jsx_runtime_1.jsx)(PreviewNode, { id: id, dragIds: dragIds }) }), (0, jsx_runtime_1.jsx)(Count, { mouse: mouse, count: dragIds.length })] }));
+}
+exports.DefaultDragPreview = DefaultDragPreview;
+const Overlay = (0, react_1.memo)(function Overlay(props) {
+    if (!props.isDragging)
+        return null;
+    return (0, jsx_runtime_1.jsx)("div", { style: layerStyles, children: props.children });
+});
+function Position(props) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "row preview", style: getStyle(props.offset), children: props.children }));
+}
+function Count(props) {
+    const { count, mouse } = props;
+    if (count > 1)
+        return ((0, jsx_runtime_1.jsx)("div", { className: "selected-count", style: getCountStyle(mouse), children: count }));
+    else
+        return null;
+}
+const PreviewNode = (0, react_1.memo)(function PreviewNode(props) {
+    const tree = (0, context_1.useTreeApi)();
+    const node = tree.get(props.id);
+    if (!node)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(tree.renderNode, { preview: true, node: node, style: {
+            paddingLeft: node.level * tree.indent,
+            opacity: 0.2,
+            background: "transparent",
+        }, tree: tree }));
+});

package/dist/{components → main/components}/default-node.d.ts

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

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultNode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function DefaultNode(props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: props.dragHandle, style: props.style, children: [(0, jsx_runtime_1.jsx)("span", { onClick: (e) => {
+                    e.stopPropagation();
+                    props.node.toggle();
+                }, children: props.node.isLeaf ? "🌳" : props.node.isOpen ? "🗁" : "🗀" }), " ", props.node.isEditing ? (0, jsx_runtime_1.jsx)(Edit, Object.assign({}, props)) : (0, jsx_runtime_1.jsx)(Show, Object.assign({}, props))] }));
+}
+exports.DefaultNode = DefaultNode;
+function Show(props) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("span", { children: props.node.data.name }) }));
+}
+function Edit({ node }) {
+    const input = (0, react_1.useRef)();
+    (0, react_1.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 ((0, jsx_runtime_1.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/{components → main/components}/default-row.d.ts

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

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function DefaultRow({ node, attrs, innerRef, children, }) {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, attrs, { ref: innerRef, onFocus: (e) => e.stopPropagation(), onClick: node.handleClick, children: children })));
+}
+exports.DefaultRow = DefaultRow;

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

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

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragPreviewContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dnd_1 = require("react-dnd");
+const context_1 = require("../context");
+const default_drag_preview_1 = require("./default-drag-preview");
+function DragPreviewContainer() {
+    const tree = (0, context_1.useTreeApi)();
+    const { offset, mouse, item, isDragging } = (0, react_dnd_1.useDragLayer)((m) => {
+        return {
+            offset: m.getSourceClientOffset(),
+            mouse: m.getClientOffset(),
+            item: m.getItem(),
+            isDragging: m.isDragging(),
+        };
+    });
+    const DragPreview = tree.props.renderDragPreview || default_drag_preview_1.DefaultDragPreview;
+    return ((0, jsx_runtime_1.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 }));
+}
+exports.DragPreviewContainer = DragPreviewContainer;

package/dist/{components → main/components}/list-inner-element.d.ts

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

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

@@ -0,0 +1,25 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListInnerElement = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const context_1 = require("../context");
+exports.ListInnerElement = (0, react_1.forwardRef)(function InnerElement(_a, ref) {
+    var _b, _c, _d, _e;
+    var { style } = _a, rest = __rest(_a, ["style"]);
+    const tree = (0, context_1.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 ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: Object.assign(Object.assign({}, style), { height: `${parseFloat(style.height) + paddingTop + paddingBottom}px` }) }, rest)));
+});

package/dist/main/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/main/components/list-outer-element.js

@@ -0,0 +1,38 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListOuterElement = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const context_1 = require("../context");
+const cursor_1 = require("./cursor");
+exports.ListOuterElement = (0, react_1.forwardRef)(function Outer(props, ref) {
+    const { children } = props, rest = __rest(props, ["children"]);
+    const tree = (0, context_1.useTreeApi)();
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ 
+        // @ts-ignore
+        ref: ref }, rest, { onClick: (e) => {
+            if (e.currentTarget === e.target)
+                tree.deselectAll();
+        }, children: [(0, jsx_runtime_1.jsx)(DropContainer, {}), children] })));
+});
+const DropContainer = () => {
+    const tree = (0, context_1.useTreeApi)();
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            height: tree.visibleNodes.length * tree.rowHeight,
+            width: "100%",
+            position: "absolute",
+            left: "0",
+            right: "0",
+        }, children: (0, jsx_runtime_1.jsx)(cursor_1.Cursor, {}) }));
+};

package/dist/main/components/outer-drop.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OuterDrop = void 0;
+const outer_drop_hook_1 = require("../dnd/outer-drop-hook");
+function OuterDrop(props) {
+    (0, outer_drop_hook_1.useOuterDrop)();
+    return props.children;
+}
+exports.OuterDrop = OuterDrop;

package/dist/{components → main/components}/provider.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from "react";
 import { TreeApi } from "../interfaces/tree-api";
 import { TreeProps } from "../types/tree-props";
-declare type Props<T> = {
+type Props<T> = {
     treeProps: TreeProps<T>;
     imperativeHandle: React.Ref<TreeApi<T> | undefined>;
     children: ReactNode;
 };
-export declare function TreeProvider<T>({ treeProps, imperativeHandle, children, }: Props<T>): JSX.Element;
+export declare function TreeProvider<T>({ treeProps, imperativeHandle, children, }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/main/components/provider.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const shim_1 = require("use-sync-external-store/shim");
+const context_1 = require("../context");
+const tree_api_1 = require("../interfaces/tree-api");
+const initial_1 = require("../state/initial");
+const root_reducer_1 = require("../state/root-reducer");
+const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
+const react_dnd_1 = require("react-dnd");
+const redux_1 = require("redux");
+const open_slice_1 = require("../state/open-slice");
+const SERVER_STATE = (0, initial_1.initialState)();
+function TreeProvider({ treeProps, imperativeHandle, children, }) {
+    const list = (0, react_1.useRef)(null);
+    const listEl = (0, react_1.useRef)(null);
+    const store = (0, react_1.useRef)(
+    // @ts-ignore
+    (0, redux_1.createStore)(root_reducer_1.rootReducer, (0, initial_1.initialState)(treeProps)));
+    const state = (0, shim_1.useSyncExternalStore)(store.current.subscribe, store.current.getState, () => SERVER_STATE);
+    /* The tree api object is stable. */
+    const api = (0, react_1.useMemo)(() => {
+        return new tree_api_1.TreeApi(store.current, treeProps, list, listEl);
+    }, []);
+    /* Make sure the tree instance stays in sync */
+    const updateCount = (0, react_1.useRef)(0);
+    (0, react_1.useMemo)(() => {
+        updateCount.current += 1;
+        api.update(treeProps);
+    }, [...Object.values(treeProps), state.nodes.open]);
+    /* Expose the tree api */
+    (0, react_1.useImperativeHandle)(imperativeHandle, () => api);
+    /* Change selection based on props */
+    (0, react_1.useEffect)(() => {
+        if (api.props.selection) {
+            api.select(api.props.selection, { focus: false });
+        }
+        else {
+            api.deselectAll();
+        }
+    }, [api.props.selection]);
+    /* Clear visability for filtered nodes */
+    (0, react_1.useEffect)(() => {
+        if (!api.props.searchTerm) {
+            store.current.dispatch(open_slice_1.actions.clear(true));
+        }
+    }, [api.props.searchTerm]);
+    return ((0, jsx_runtime_1.jsx)(context_1.TreeApiContext.Provider, { value: api, children: (0, jsx_runtime_1.jsx)(context_1.DataUpdatesContext.Provider, { value: updateCount.current, children: (0, jsx_runtime_1.jsx)(context_1.NodesContext.Provider, { value: state.nodes, children: (0, jsx_runtime_1.jsx)(context_1.DndContext.Provider, { value: state.dnd, children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, Object.assign({ backend: react_dnd_html5_backend_1.HTML5Backend, options: { rootElement: api.props.dndRootElement || undefined } }, (treeProps.dndManager && { manager: treeProps.dndManager }), { children: children })) }) }) }) }));
+}
+exports.TreeProvider = TreeProvider;

package/dist/{components → main/components}/row-container.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-declare type Props = {
+type Props = {
     style: React.CSSProperties;
     index: number;
 };
-export declare const RowContainer: React.MemoExoticComponent<(<T>({ index, style, }: Props) => JSX.Element)>;
+export declare const RowContainer: React.MemoExoticComponent<(<T>({ index, style, }: Props) => import("react/jsx-runtime").JSX.Element)>;
 export {};