react-arborist 0.1.4 → 0.1.5

package/dist/lib/components/drop-cursor.js

@@ -10,12 +10,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropCursor = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_dom_1 = require("react-dom");
 var context_1 = require("../context");
 function DropCursor(_a) {
@@ -32,7 +29,7 @@ function DropCursor(_a) {
         left: left + "px",
         right: treeView.indent + "px",
     };
-    return (0, react_dom_1.createPortal)(react_1.default.createElement(DefaultCursor, { style: style }), root);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(DefaultCursor, { style: style }, void 0), root);
 }
 exports.DropCursor = DropCursor;
 var placeholderStyle = {
@@ -52,7 +49,5 @@ var circleStyle = {
 };
 function DefaultCursor(_a) {
     var style = _a.style;
-    return (react_1.default.createElement("div", { style: __assign(__assign({}, placeholderStyle), style) },
-        react_1.default.createElement("div", { style: __assign({}, circleStyle) }),
-        react_1.default.createElement("div", { style: __assign({}, lineStyle) })));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: __assign(__assign({}, placeholderStyle), style) }, { children: [(0, jsx_runtime_1.jsx)("div", { style: __assign({}, circleStyle) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: __assign({}, lineStyle) }, void 0)] }), void 0));
 }

package/dist/lib/components/preview.js

@@ -1,10 +1,18 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Preview = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_dnd_1 = require("react-dnd");
 var context_1 = require("../context");
 var layerStyles = {
@@ -41,19 +49,16 @@ function Preview() {
     var node = treeView.getNode(item.id);
     if (!node)
         return null;
-    return (react_1.default.createElement("div", { style: layerStyles },
-        react_1.default.createElement("div", { className: "row preview", style: getStyle(offset) },
-            react_1.default.createElement(treeView.renderer, { preview: true, node: node, props: {}, state: {
-                    isEditing: false,
-                    isSelected: false,
-                    isHoveringOverChild: false,
-                    isOpen: node.isOpen,
-                }, indent: treeView.indent * node.level, handlers: {
-                    toggleIsEditing: function () { },
-                    toggleIsSelected: function () { },
-                    toggleIsOpen: function () { },
-                    rename: function () { },
-                } })),
-        item.dragIds.length > 1 && (react_1.default.createElement("div", { className: "selected-count", style: getCountStyle(mouse) }, item.dragIds.length))));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: layerStyles }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "row preview", style: getStyle(offset) }, { children: (0, jsx_runtime_1.jsx)(treeView.renderer, { preview: true, node: node, props: { style: {}, ref: function () { } }, state: {
+                        isEditing: false,
+                        isSelected: false,
+                        isHoveringOverChild: false,
+                        isOpen: node.isOpen,
+                    }, indent: treeView.indent * node.level, handlers: {
+                        toggleIsEditing: function () { },
+                        toggleIsSelected: function () { },
+                        toggleIsOpen: function () { },
+                        rename: function () { },
+                    } }, void 0) }), void 0), item.dragIds.length > 1 && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "selected-count", style: getCountStyle(mouse) }, { children: item.dragIds.length }), void 0))] }), void 0));
 }
 exports.Preview = Preview;

package/dist/lib/components/row.js

@@ -1,26 +1,8 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Row = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var context_1 = require("../context");
 var drag_hook_1 = require("../dnd/drag-hook");
 var drop_hook_1 = require("../dnd/drop-hook");
@@ -97,5 +79,5 @@ exports.Row = (0, react_1.memo)(function Row(_a) {
     var Renderer = (0, react_1.useMemo)(function () {
         return (0, react_1.memo)(treeView.renderer);
     }, [treeView.renderer]);
-    return (react_1.default.createElement(Renderer, { preview: false, node: node, props: props, state: state, indent: treeView.indent * node.level, handlers: handlers }));
+    return ((0, jsx_runtime_1.jsx)(Renderer, { preview: false, node: node, props: props, state: state, indent: treeView.indent * node.level, handlers: handlers }, void 0));
 });

package/dist/lib/components/tree.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
-import { TreeViewHandle, TreeViewProps } from "../types";
-export declare const Tree: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<TreeViewHandle>>;
+import { IdObj, TreeProps } from "../types";
+export declare function Tree<T extends IdObj>(props: TreeProps<T>): JSX.Element;

package/dist/lib/components/tree.js

@@ -1,89 +1,37 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tree = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_dnd_1 = require("react-dnd");
 var react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
 var react_window_1 = require("react-window");
 var context_1 = require("../context");
-var compute_drop_1 = require("../dnd/compute-drop");
-var reducer_1 = require("../reducer");
+var visible_nodes_hook_1 = require("../data/visible-nodes-hook");
+var outer_drop_hook_1 = require("../dnd/outer-drop-hook");
 var utils_1 = require("../utils");
 var preview_1 = require("./preview");
 var row_1 = require("./row");
-function TreeComponent(props, ref) {
-    var root = (0, react_1.useMemo)(function () { return (0, utils_1.enrichTree)(props.data, props.hideRoot); }, [props.data, props.hideRoot]);
-    var visibleNodes = (0, react_1.useMemo)(function () { return (0, utils_1.flattenTree)(root); }, [root]);
-    var listRef = (0, react_1.useRef)(null);
-    return (react_1.default.createElement(context_1.TreeViewProvider, { handle: ref, visibleNodes: visibleNodes, listRef: listRef, renderer: props.children, width: props.width, height: props.height, indent: props.indent || 12, rowHeight: props.rowHeight || 24, onClose: props.onClose || utils_1.noop, onMove: props.onMove || utils_1.noop, onOpen: props.onOpen || utils_1.noop, onRename: props.onRename || utils_1.noop },
-        react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend },
-            react_1.default.createElement(OuterDrop, null,
-                react_1.default.createElement(List, { className: props.className })),
-            react_1.default.createElement(preview_1.Preview, null))));
+function Tree(props) {
+    return ((0, jsx_runtime_1.jsx)(context_1.TreeViewProvider, __assign({ handle: props.handle, visibleNodes: (0, visible_nodes_hook_1.useVisibleNodes)(props), listRef: (0, react_1.useRef)(null), renderer: props.children, width: props.width, height: props.height, indent: props.indent || 12, rowHeight: props.rowHeight || 24, onClose: props.onClose || utils_1.noop, onMove: props.onMove || utils_1.noop, onOpen: props.onOpen || utils_1.noop, onRename: props.onRename || utils_1.noop }, { children: (0, jsx_runtime_1.jsxs)(react_dnd_1.DndProvider, __assign({ backend: react_dnd_html5_backend_1.HTML5Backend }, { children: [(0, jsx_runtime_1.jsx)(OuterDrop, { children: (0, jsx_runtime_1.jsx)(List, { className: props.className }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(preview_1.Preview, {}, void 0)] }), void 0) }), void 0));
 }
+exports.Tree = Tree;
 function OuterDrop(props) {
-    var tree = (0, context_1.useStaticContext)();
-    // In case we drop an item at the bottom of the list
-    var _a = (0, react_dnd_1.useDrop)(function () { return ({
-        accept: "NODE",
-        hover: function (item, m) {
-            if (!m.isOver({ shallow: true }))
-                return;
-            var offset = m.getClientOffset();
-            if (!tree.listRef.current || !offset)
-                return;
-            var cursor = (0, compute_drop_1.computeDrop)({
-                element: tree.listRef.current,
-                offset: offset,
-                indent: tree.indent,
-                node: null,
-                prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
-                nextNode: null,
-            }).cursor;
-            tree.dispatch((0, reducer_1.setCursorLocation)(cursor));
-        },
-        drop: function (item, m) {
-            if (m.didDrop())
-                return;
-            console.log("drop!!");
-            var offset = m.getClientOffset();
-            if (!tree.listRef.current || !offset)
-                return;
-            var _a = (0, compute_drop_1.computeDrop)({
-                element: tree.listRef.current,
-                offset: offset,
-                indent: tree.indent,
-                node: null,
-                prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
-                nextNode: null,
-            }), parentId = _a.parentId, index = _a.index;
-            return { parentId: parentId, index: index };
-        },
-    }); }, [tree]), drop = _a[1];
-    drop(tree.listRef);
+    (0, outer_drop_hook_1.useOuterDrop)();
     return props.children;
 }
 function List(props) {
     var tree = (0, context_1.useStaticContext)();
-    return (react_1.default.createElement(react_window_1.FixedSizeList, { className: props.className, outerRef: tree.listRef, itemCount: tree.visibleNodes.length, height: tree.height, width: tree.width, itemSize: tree.rowHeight }, row_1.Row));
+    return ((0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, __assign({ className: props.className, outerRef: tree.listRef, itemCount: tree.visibleNodes.length, height: tree.height, width: tree.width, itemSize: tree.rowHeight }, { children: row_1.Row }), void 0));
 }
-exports.Tree = (0, react_1.forwardRef)(TreeComponent);

package/dist/lib/context.d.ts

@@ -1,8 +1,8 @@
-import { StaticContext, TreeViewProviderProps } from "./types";
+import { IdObj, StaticContext, TreeProviderProps } from "./types";
 export declare function useCursorParentId(): string | null;
-export declare function useStaticContext(): StaticContext;
+export declare function useStaticContext(): StaticContext<IdObj>;
 export declare function useDispatch(): never;
 export declare function useSelectedIds(): string[];
 export declare function useIsSelected(): (index: number | null) => boolean;
 export declare function useEditingId(): string | null;
-export declare function TreeViewProvider(props: TreeViewProviderProps): JSX.Element;
+export declare function TreeViewProvider<T>(props: TreeProviderProps<T>): JSX.Element;

package/dist/lib/context.js

@@ -10,28 +10,10 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeViewProvider = exports.useEditingId = exports.useIsSelected = exports.useSelectedIds = exports.useDispatch = exports.useStaticContext = exports.useCursorParentId = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var drop_cursor_1 = require("./components/drop-cursor");
 var reducer_1 = require("./reducer");
 var selection_1 = require("./selection/selection");
@@ -115,10 +97,6 @@ function TreeViewProvider(props) {
     }); }, [staticValue, state.selection.ids]);
     return (
     // @ts-ignore
-    react_1.default.createElement(Static.Provider, { value: staticValue },
-        react_1.default.createElement(EditingIdContext.Provider, { value: state.editingId },
-            react_1.default.createElement(SelectionContext.Provider, { value: state.selection },
-                react_1.default.createElement(CursorParentId.Provider, { value: ((_a = state.cursorLocation) === null || _a === void 0 ? void 0 : _a.parentId) || null }, props.children),
-                react_1.default.createElement(drop_cursor_1.DropCursor, { root: props.listRef.current, cursor: state.cursorLocation })))));
+    (0, jsx_runtime_1.jsx)(Static.Provider, __assign({ value: staticValue }, { children: (0, jsx_runtime_1.jsx)(EditingIdContext.Provider, __assign({ value: state.editingId }, { children: (0, jsx_runtime_1.jsxs)(SelectionContext.Provider, __assign({ value: state.selection }, { children: [(0, jsx_runtime_1.jsx)(CursorParentId.Provider, __assign({ value: ((_a = state.cursorLocation) === null || _a === void 0 ? void 0 : _a.parentId) || null }, { children: props.children }), void 0), (0, jsx_runtime_1.jsx)(drop_cursor_1.DropCursor, { root: props.listRef.current, cursor: state.cursorLocation }, void 0)] }), void 0) }), void 0) }), void 0));
 }
 exports.TreeViewProvider = TreeViewProvider;

package/dist/lib/data/enrich-tree.d.ts

@@ -0,0 +1,2 @@
+import { IdObj, Node } from "../types";
+export declare function enrichTree<T extends IdObj>(model: T, hideRoot?: boolean, getChildren?: (m: T) => T[] | undefined, getIsOpen?: (m: T) => boolean): Node<T>;

package/dist/lib/data/enrich-tree.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.enrichTree = void 0;
+var defaultGetIsOpen = function (m) { return m.isOpen; };
+var defaultGetChildren = function (m) { return m.children; };
+function createNode(model, level, parent, children, isOpen) {
+    return {
+        id: model.id,
+        level: level,
+        parent: parent,
+        children: children,
+        isOpen: isOpen,
+        model: model,
+        rowIndex: null,
+    };
+}
+function enrichTree(model, hideRoot, getChildren, getIsOpen) {
+    if (hideRoot === void 0) { hideRoot = false; }
+    if (getChildren === void 0) { getChildren = defaultGetChildren; }
+    if (getIsOpen === void 0) { getIsOpen = defaultGetIsOpen; }
+    function visitSelfAndChildren(model, level, parent) {
+        var isOpen = getIsOpen(model);
+        var node = createNode(model, level, parent, null, isOpen);
+        var children = getChildren(model);
+        if (children) {
+            node.children = children.map(function (child) {
+                return visitSelfAndChildren(child, level + 1, node);
+            });
+        }
+        return node;
+    }
+    return visitSelfAndChildren(model, hideRoot ? -1 : 0, null);
+}
+exports.enrichTree = enrichTree;

package/dist/lib/data/flatten-tree.d.ts

@@ -0,0 +1,2 @@
+import { Node } from "../types";
+export declare function flattenTree<T>(root: Node<T>): Node<T>[];

package/dist/lib/data/flatten-tree.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flattenTree = void 0;
+function flattenTree(root) {
+    var list = [];
+    var index = 0;
+    function collect(node) {
+        var _a;
+        if (node.level >= 0) {
+            node.rowIndex = index++;
+            list.push(node);
+        }
+        if (node.isOpen) {
+            (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(collect);
+        }
+    }
+    collect(root);
+    return list;
+}
+exports.flattenTree = flattenTree;

package/dist/lib/data/make-tree.d.ts

@@ -0,0 +1,5 @@
+export declare function makeTree(string: string): {
+    id: string;
+    name: string;
+    isOpen: boolean;
+};

package/dist/lib/data/make-tree.js

@@ -0,0 +1,40 @@
+"use strict";
+// A function that turns a string of text into a tree
+// Each line is a node
+// The number of spaces at the beginning indicate the level
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeTree = void 0;
+function makeTree(string) {
+    var root = { id: "ROOT", name: "ROOT", isOpen: true };
+    var prevNode = root;
+    var prevLevel = -1;
+    var id = 1;
+    string.split("\n").forEach(function (line) {
+        var name = line.trimStart();
+        var level = line.length - name.length;
+        var diff = level - prevLevel;
+        var node = { id: (id++).toString(), name: name, isOpen: true };
+        if (diff === 1) {
+            // First child
+            //@ts-ignore
+            node.parent = prevNode;
+            //@ts-ignore
+            prevNode.children = [node];
+        }
+        else {
+            // Find the parent and go up
+            //@ts-ignore
+            var parent_1 = prevNode.parent;
+            for (var i = diff; i < 0; i++) {
+                parent_1 = parent_1.parent;
+            }
+            //@ts-ignore
+            node.parent = parent_1;
+            parent_1.children.push(node);
+        }
+        prevNode = node;
+        prevLevel = level;
+    });
+    return root;
+}
+exports.makeTree = makeTree;

package/dist/lib/data/visible-nodes-hook.d.ts

@@ -0,0 +1,2 @@
+import { TreeProps, Node, IdObj } from "../types";
+export declare function useVisibleNodes<T extends IdObj>(props: TreeProps<T>): Node<T>[];

package/dist/lib/data/visible-nodes-hook.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVisibleNodes = void 0;
+var react_1 = require("react");
+var enrich_tree_1 = require("./enrich-tree");
+var flatten_tree_1 = require("./flatten-tree");
+function useVisibleNodes(props) {
+    var root = (0, react_1.useMemo)(function () {
+        return (0, enrich_tree_1.enrichTree)(props.data, props.hideRoot, props.getChildren, props.getIsOpen);
+    }, [props.data, props.hideRoot, props.getChildren, props.getIsOpen]);
+    return (0, react_1.useMemo)(function () { return (0, flatten_tree_1.flattenTree)(root); }, [root]);
+}
+exports.useVisibleNodes = useVisibleNodes;

package/dist/lib/dnd/outer-drop-hook.d.ts

@@ -0,0 +1 @@
+export declare function useOuterDrop(): void;

package/dist/lib/dnd/outer-drop-hook.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOuterDrop = void 0;
+var react_dnd_1 = require("react-dnd");
+var context_1 = require("../context");
+var reducer_1 = require("../reducer");
+var compute_drop_1 = require("./compute-drop");
+function useOuterDrop() {
+    var tree = (0, context_1.useStaticContext)();
+    // In case we drop an item at the bottom of the list
+    var _a = (0, react_dnd_1.useDrop)(function () { return ({
+        accept: "NODE",
+        hover: function (item, m) {
+            if (!m.isOver({ shallow: true }))
+                return;
+            var offset = m.getClientOffset();
+            if (!tree.listRef.current || !offset)
+                return;
+            var cursor = (0, compute_drop_1.computeDrop)({
+                element: tree.listRef.current,
+                offset: offset,
+                indent: tree.indent,
+                node: null,
+                prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
+                nextNode: null,
+            }).cursor;
+            tree.dispatch((0, reducer_1.setCursorLocation)(cursor));
+        },
+        drop: function (item, m) {
+            if (m.didDrop())
+                return;
+            console.log("drop!!");
+            var offset = m.getClientOffset();
+            if (!tree.listRef.current || !offset)
+                return;
+            var _a = (0, compute_drop_1.computeDrop)({
+                element: tree.listRef.current,
+                offset: offset,
+                indent: tree.indent,
+                node: null,
+                prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
+                nextNode: null,
+            }), parentId = _a.parentId, index = _a.index;
+            return { parentId: parentId, index: index };
+        },
+    }); }, [tree]), drop = _a[1];
+    drop(tree.listRef);
+}
+exports.useOuterDrop = useOuterDrop;

package/dist/lib/types.d.ts

@@ -1,27 +1,28 @@
-import { ComponentType, Ref, MouseEvent, MouseEventHandler, MutableRefObject, ReactElement } from "react";
+import { ComponentType, CSSProperties, MouseEvent, MouseEventHandler, MutableRefObject, ReactElement, Ref } from "react";
 import { Action } from "./reducer";
 import { SelectionData } from "./selection/selection";
-export declare type Node<M extends NodeModel = NodeModel> = {
+export declare type Node<T = unknown> = {
     id: string;
-    model: M;
+    model: T;
     level: number;
-    children: Node<M>[] | null;
-    parent: Node<M> | null;
+    children: Node<T>[] | null;
+    parent: Node<T> | null;
     isOpen: boolean;
     rowIndex: number | null;
 };
-export declare type NodesById = {
-    [id: string]: Node;
+export declare type NodesById<T> = {
+    [id: string]: Node<T>;
 };
-export declare type NodeModel = {
+export interface IdObj {
     id: string;
-    children?: NodeModel[];
-    isOpen?: boolean;
-};
-export declare type NodeRendererProps<M extends NodeModel> = {
+}
+export declare type NodeRendererProps<T> = {
     preview: boolean;
-    node: Node<M>;
-    props: object;
+    node: Node<T>;
+    props: {
+        style: CSSProperties;
+        ref: Ref<any>;
+    };
     indent: number;
     state: NodeState;
     handlers: NodeHandlers;
@@ -38,67 +39,70 @@ export declare type NodeHandlers = {
     toggleIsEditing: () => void;
     rename: (name: string) => void;
 };
-export declare type NodeRenderer<M extends NodeModel = NodeModel> = ComponentType<NodeRendererProps<M>>;
+export declare type NodeRenderer<T> = ComponentType<NodeRendererProps<T>>;
 export declare type OnMove = (dragIds: string[], parentId: string | null, index: number) => void;
 export declare type IdHandler = (id: string) => void;
 export declare type RenameHandler = (id: string, name: string) => void;
-export declare type NodeClickHandler = (e: MouseEvent, n: Node) => void;
+export declare type NodeClickHandler<T> = (e: MouseEvent, n: Node<T>) => void;
 export declare type IndexClickHandler = (e: MouseEvent, index: number) => void;
 export declare type SelectedCheck = (index: number) => boolean;
 export declare type CursorLocation = {
-    parentId: string | null;
     index: number | null;
     level: number | null;
+    parentId: string | null;
 };
 export declare type DragItem = {
-    id: string;
     dragIds: string[];
+    id: string;
 };
 export declare type SelectionState = {
-    ids: string[];
     data: SelectionData | null;
+    ids: string[];
 };
 export declare type StateContext = {
-    visibleIds: string[];
-    editingId: string | null;
     cursorLocation: CursorLocation | null;
+    editingId: string | null;
     selection: SelectionState;
+    visibleIds: string[];
 };
-export declare type TreeViewProps = {
-    children: NodeRenderer<any>;
-    data: NodeModel;
-    width: number;
+export interface TreeProps<T> {
+    children: NodeRenderer<T>;
+    data: T;
     height: number;
+    width: number;
+    className?: string | undefined;
+    getChildren?: (model: T) => T[] | undefined;
+    getIsOpen?: (model: T) => boolean;
+    handle?: Ref<TreeHandle>;
+    hideRoot?: boolean;
     indent?: number;
-    rowHeight?: number;
+    onClose?: IdHandler;
     onMove?: OnMove;
     onOpen?: IdHandler;
-    onClose?: IdHandler;
     onRename?: RenameHandler;
-    className?: string | undefined;
-    hideRoot?: boolean;
-};
-export declare type TreeViewProviderProps = {
-    handle: Ref<TreeViewHandle>;
-    renderer: NodeRenderer<any>;
-    visibleNodes: Node[];
-    listRef: MutableRefObject<HTMLDivElement | null>;
+    rowHeight?: number;
+}
+export declare type TreeProviderProps<T> = {
     children: ReactElement;
-    indent: number;
-    rowHeight: number;
-    width: number;
+    handle?: Ref<TreeHandle>;
     height: number;
+    indent: number;
+    listRef: MutableRefObject<HTMLDivElement | null>;
+    onClose: IdHandler;
     onMove: OnMove;
     onOpen: IdHandler;
-    onClose: IdHandler;
     onRename: RenameHandler;
+    renderer: NodeRenderer<any>;
+    rowHeight: number;
+    visibleNodes: Node<T>[];
+    width: number;
 };
-export declare type StaticContext = TreeViewProviderProps & {
+export declare type StaticContext<T> = TreeProviderProps<T> & {
     dispatch: (a: Action) => void;
-    getNode: (id: string) => Node | null;
+    getNode: (id: string) => Node<T> | null;
 };
-export declare type TreeViewHandle = {
+export declare type TreeHandle = {
+    edit: (id: string) => void;
     selectedIds: string[];
     selectId: (id: string) => void;
-    edit: (id: string) => void;
 };

package/dist/lib/utils.d.ts

@@ -1,17 +1,9 @@
-import { Node, NodeModel } from "./types";
+import { Node } from "./types";
 export declare function bound(n: number, min: number, max: number): number;
 export declare const isFolder: (node: Node<any>) => boolean;
-export declare const isHiddenRoot: (node: Node) => boolean;
 /**
  * Is first param a decendent of the second param
  */
 export declare const isDecendent: (a: Node, b: Node) => boolean;
 export declare const indexOf: (node: Node) => number;
-export declare function enrichTree(model: NodeModel, hideRoot?: boolean): Node;
-export declare function flattenTree(root: Node): Node[];
-export declare function createNode(model: NodeModel, level: number, parent: Node | null, children: Node[] | null): Node;
 export declare function noop(): void;
-export declare function makeTree(string: string): {
-    id: string;
-    isOpen: boolean;
-};

package/dist/lib/utils.js

@@ -1,15 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeTree = exports.noop = exports.createNode = exports.flattenTree = exports.enrichTree = exports.indexOf = exports.isDecendent = exports.isHiddenRoot = exports.isFolder = exports.bound = void 0;
-var nanoid_1 = require("nanoid");
+exports.noop = exports.indexOf = exports.isDecendent = exports.isFolder = exports.bound = void 0;
 function bound(n, min, max) {
     return Math.max(Math.min(n, max), min);
 }
 exports.bound = bound;
 var isFolder = function (node) { return !!node.children; };
 exports.isFolder = isFolder;
-var isHiddenRoot = function (node) { return node.id === "HIDDEN"; };
-exports.isHiddenRoot = isHiddenRoot;
 /**
  * Is first param a decendent of the second param
  */
@@ -29,82 +26,5 @@ var indexOf = function (node) {
     return node.parent.children.findIndex(function (c) { return c.id === node.id; });
 };
 exports.indexOf = indexOf;
-function enrichTree(model, hideRoot) {
-    if (hideRoot === void 0) { hideRoot = false; }
-    function visitSelfAndChildren(m, level, parent) {
-        var n = createNode(m, level, parent, null);
-        if (m.children) {
-            n.children = m.children.map(function (child) {
-                return visitSelfAndChildren(child, level + 1, n);
-            });
-        }
-        return n;
-    }
-    return visitSelfAndChildren(model, hideRoot ? -1 : 0, null);
-}
-exports.enrichTree = enrichTree;
-function flattenTree(root) {
-    var list = [];
-    var index = 0;
-    function collect(node) {
-        var _a;
-        if (node.level >= 0) {
-            node.rowIndex = index++;
-            list.push(node);
-        }
-        if (node.isOpen) {
-            (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(collect);
-        }
-    }
-    collect(root);
-    return list;
-}
-exports.flattenTree = flattenTree;
-function createNode(model, level, parent, children) {
-    return {
-        id: model.id,
-        level: level,
-        parent: parent,
-        children: children,
-        isOpen: !!model.isOpen,
-        model: model,
-        rowIndex: null,
-    };
-}
-exports.createNode = createNode;
 function noop() { }
 exports.noop = noop;
-var gotLineage = "House Arryn\n Jon\n  Robin\nHouse Tully\n Hoster\n  Lysa\n  Edmure\n  Catelyn\nHouse Stark\n Rickard\n  Brandon\n  Eddard\n   Robb\n   Sansa\n   Arya\n   Brandon\n   Rckon\n  Benjen\n  Lyanna\nHouse Targaryen\n Aerys II (the Mad)\n  Rhaegar\n   Jon Snow\n  Viserys\n  Daenerys\nHouse Baratheon\n Steffon\n  Robert\n  Stannis\n   Shireen\n  Renly\nHouse Lanister\n Tywin\n  Jaime\n  Cersei\n   Joffery\n   Myrcella\n   Tommen\n  Tyrion\nHouse Tyrell\n Olenna\n  Mace\n   Margaery\n   Loras\nHouse Martell\n Doran\n  Trystane\n Elia\n Oberyn\n  Sand Snakes\n";
-function makeTree(string) {
-    var root = { id: "ROOT", isOpen: true };
-    var prevNode = root;
-    var prevLevel = -1;
-    string.split("\n").forEach(function (line) {
-        var name = line.trimStart();
-        var level = line.length - name.length;
-        var diff = level - prevLevel;
-        var node = { id: (0, nanoid_1.nanoid)(), name: name, isOpen: true };
-        if (diff === 1) {
-            // First child
-            //@ts-ignore
-            node.parent = prevNode;
-            //@ts-ignore
-            prevNode.children = [node];
-        }
-        else {
-            // Find the parent and go up
-            //@ts-ignore
-            var parent_1 = prevNode.parent;
-            for (var i = diff; i < 0; i++) {
-                parent_1 = parent_1.parent;
-            }
-            //@ts-ignore
-            node.parent = parent_1;
-            parent_1.children.push(node);
-        }
-        prevNode = node;
-        prevLevel = level;
-    });
-    return root;
-}
-exports.makeTree = makeTree;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "license": "MIT",
   "files": [
     "dist/lib"
@@ -50,6 +50,8 @@
     "@types/react-dom": "^16.8.0",
     "@types/react-window": "^1.8.5",
     "classnames": "^2.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-feather": "^2.0.9",
     "react-scripts": "4.0.3",
     "react-use-dimensions": "^1.2.1",