@asup/tree-of-nodes 1.0.4 → 1.0.6

package/dist/cjs/main.js

@@ -1,13 +1,13 @@
-require("./main.css");
-var $gTuX4$reactjsxruntime = require("react/jsx-runtime");
-var $gTuX4$react = require("react");
-var $gTuX4$swchelperslib_sliced_to_arrayjs = require("@swc/helpers/lib/_sliced_to_array.js");
 var $gTuX4$swchelperslib_async_to_generatorjs = require("@swc/helpers/lib/_async_to_generator.js");
+var $gTuX4$swchelperslib_sliced_to_arrayjs = require("@swc/helpers/lib/_sliced_to_array.js");
 var $gTuX4$swchelperslib_ts_generatorjs = require("@swc/helpers/lib/_ts_generator.js");
-var $gTuX4$reactbootstrap = require("react-bootstrap");
+var $gTuX4$reactjsxruntime = require("react/jsx-runtime");
+var $gTuX4$asupcontextmenu = require("@asup/context-menu");
+var $gTuX4$react = require("react");
 var $gTuX4$reactbootstrapicons = require("react-bootstrap-icons");
-var $gTuX4$swchelperslib_object_spreadjs = require("@swc/helpers/lib/_object_spread.js");
 var $gTuX4$swchelperslib_to_consumable_arrayjs = require("@swc/helpers/lib/_to_consumable_array.js");
+var $gTuX4$swchelperslib_object_spreadjs = require("@swc/helpers/lib/_object_spread.js");
+var $gTuX4$reactbootstrap = require("react-bootstrap");
 
 function $parcel$exportWildcard(dest, source) {
   Object.keys(source).forEach(function(key) {
@@ -33,118 +33,39 @@ function $parcel$interopDefault(a) {
 }
 var $a68bd8a6c0fd98c2$exports = {};
 
-$parcel$export($a68bd8a6c0fd98c2$exports, "ContextMenu", function () { return $5150b66b01c99189$export$8dc6765e8be191c7; });
-$parcel$export($a68bd8a6c0fd98c2$exports, "ContextMenuProvider", function () { return $bad272ba85e71af5$export$434a17f82a8154e4; });
 $parcel$export($a68bd8a6c0fd98c2$exports, "TreeNode", function () { return $a56aac35d4408806$export$2eba8ec3a333fdbb; });
 $parcel$export($a68bd8a6c0fd98c2$exports, "TreeOfNodes", function () { return $9becaaec3a803ae7$export$5580fff3e08a8be5; });
 $parcel$export($a68bd8a6c0fd98c2$exports, "WordEntry", function () { return $176d21a51def1fce$export$14f190ac910bde69; });
 
 
 
-var $5150b66b01c99189$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, ($parcel$interopDefault($gTuX4$react))).forwardRef(function(param, ref) {
-    var entries = param.entries, visible = param.visible, xPos = param.xPos, yPos = param.yPos;
-    $5150b66b01c99189$export$8dc6765e8be191c7.displayName = "ContextMenu";
-    var _e_label;
-    return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-        ref: ref,
-        className: "context-menu ".concat(visible ? "visible" : ""),
-        style: {
-            top: "".concat(yPos, "px"),
-            left: "".concat(xPos, "px")
-        },
-        children: entries.map(function(e, i) {
-            return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                className: "context-menu-item",
-                onClick: function() {
-                    e.action && e.action();
-                },
-                children: (_e_label = e.label) !== null && _e_label !== void 0 ? _e_label : ""
-            }, i);
-        })
-    });
-});
 
 
 
 
 
 
-var $bad272ba85e71af5$export$c7e742effb1c51e2 = /*#__PURE__*/ (0, ($parcel$interopDefault($gTuX4$react))).createContext({});
-var $bad272ba85e71af5$export$434a17f82a8154e4 = function(param) {
-    var children = param.children;
-    // Menu resources
-    var divRef = (0, $gTuX4$react.useRef)(null);
-    var menuRef = (0, $gTuX4$react.useRef)(null);
-    var _useState = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)(0), 2), menuXPos = _useState[0], setMenuXPos = _useState[1];
-    var _useState1 = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)(0), 2), menuYPos = _useState1[0], setMenuYPos = _useState1[1];
-    var _useState2 = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)(false), 2), menuVisible = _useState2[0], setMenuVisible = _useState2[1];
-    var _useState3 = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)([]), 2), menuItems = _useState3[0], setMenuItems = _useState3[1];
-    // Update menu items
-    var updateMenu = (0, $gTuX4$react.useCallback)(function(ret) {
-        if (divRef.current) {
-            if (ret.visible !== undefined) setMenuVisible(ret.visible);
-            if (ret.x) setMenuXPos(ret.x - window.scrollX - divRef.current.getBoundingClientRect().x);
-            if (ret.y) setMenuYPos(ret.y - window.scrollX - divRef.current.getBoundingClientRect().y);
-            if (ret.menuItems !== undefined) setMenuItems(ret.menuItems);
-        }
-    }, []);
-    // Handle click off the menu
-    var handleClick = (0, $gTuX4$react.useCallback)(function(e) {
-        var _menuRef_current;
-        if (menuRef.current && (e.target instanceof Element && !((_menuRef_current = menuRef.current) === null || _menuRef_current === void 0 ? void 0 : _menuRef_current.contains(e.target)) || !(e.target instanceof Element))) setMenuVisible(false);
-    }, []);
-    // Update the document click handler
-    (0, $gTuX4$react.useEffect)(function() {
-        if (menuVisible) document.addEventListener("mousedown", handleClick);
-        else document.removeEventListener("mousedown", handleClick);
-        return function() {
-            document.removeEventListener("mousedown", handleClick);
-        };
-    }, [
-        handleClick,
-        menuVisible
-    ]);
-    return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)($bad272ba85e71af5$export$c7e742effb1c51e2.Provider, {
-        value: {
-            visible: menuVisible,
-            x: menuXPos,
-            y: menuYPos,
-            set: updateMenu
-        },
-        children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
-            className: "menu-context-provider",
-            style: {
-                position: "relative"
-            },
-            ref: divRef,
-            children: [
-                children,
-                /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $5150b66b01c99189$export$8dc6765e8be191c7), {
-                    ref: menuRef,
-                    entries: menuItems,
-                    visible: menuVisible,
-                    xPos: menuXPos,
-                    yPos: menuYPos
-                })
-            ]
-        })
+var $580f9b3e262282c9$export$c6fd3ab3f44300d0 = function(id, included, hierarchyNodes) {
+    // Get current node
+    var current = hierarchyNodes.find(function(h) {
+        return h.id === id;
+    });
+    if (current === undefined) return [];
+    // Get parent node
+    var parent = hierarchyNodes.find(function(h) {
+        return h.id === current.parentId;
     });
+    // Stop if no more parents
+    return parent === undefined ? included : $580f9b3e262282c9$export$c6fd3ab3f44300d0(parent.id, (0, ($parcel$interopDefault($gTuX4$swchelperslib_to_consumable_arrayjs)))(included.filter(function(i) {
+        return i.id !== parent.id;
+    })).concat([
+        parent
+    ]), hierarchyNodes);
 };
 
 
 
-
-
-
-
-
-
-
-
-var $ff9cca1fe8f6b24e$export$29ec378200e05207 = (0, $gTuX4$react.createContext)({
-    id: "tree-of-nodes",
-    nodeList: []
-});
+var $ff9cca1fe8f6b24e$export$29ec378200e05207 = (0, $gTuX4$react.createContext)(undefined);
 
 
 
@@ -205,6 +126,7 @@ var $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$inter
                 animation: "border"
             }),
             /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("input", {
+                autoFocus: true,
                 id: String(id),
                 ref: ref,
                 type: "text",
@@ -231,51 +153,55 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
     var id = param.id, canRemove = param.canRemove, canRename = param.canRename, canAddChildren = param.canAddChildren, canRemoveChildren = param.canRemoveChildren, canRenameChildren = param.canRenameChildren;
     // Contexts
     var treeContext = (0, $gTuX4$react.useContext)((0, $ff9cca1fe8f6b24e$export$29ec378200e05207));
-    var menuContext = (0, $gTuX4$react.useContext)((0, $bad272ba85e71af5$export$c7e742effb1c51e2));
     // Node information
     var thisNode = (0, $gTuX4$react.useMemo)(function() {
-        return treeContext.nodeList.find(function(n) {
+        return treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList.find(function(n) {
             return n.id === id;
         });
     }, [
         id,
-        treeContext.nodeList
+        treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList
     ]);
     var childNodes = (0, $gTuX4$react.useMemo)(function() {
-        return treeContext.nodeList.filter(function(n) {
+        return treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList.filter(function(n) {
             return n.parentId === id;
         });
     }, [
         id,
-        treeContext.nodeList
+        treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList
     ]);
     // State
-    var loading = (0, $gTuX4$react.useMemo)(function() {
-        return treeContext.nodeList.findIndex(function(n) {
-            return n.id === id;
-        }) === -1;
-    }, [
-        id,
-        treeContext.nodeList
-    ]);
     var _useState = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)(false), 2), error = _useState[0], setError = _useState[1];
     var _useState1 = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)(null), 2), errorText = _useState1[0], setErrotText = _useState1[1];
     var expanded = (0, $gTuX4$react.useMemo)(function() {
-        var _treeContext_expandedNodes;
         var _treeContext_expandedNodes_findIndex;
-        return ((_treeContext_expandedNodes_findIndex = (_treeContext_expandedNodes = treeContext.expandedNodes) === null || _treeContext_expandedNodes === void 0 ? void 0 : _treeContext_expandedNodes.findIndex(function(e) {
+        return ((_treeContext_expandedNodes_findIndex = treeContext === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes.findIndex(function(e) {
             return e === id;
         })) !== null && _treeContext_expandedNodes_findIndex !== void 0 ? _treeContext_expandedNodes_findIndex : -1) > -1;
     }, [
         id,
-        treeContext.expandedNodes
+        treeContext === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes
     ]);
     // // Apply selected borer
     var currentBorder = (0, $gTuX4$react.useMemo)(function() {
-        return id === treeContext.selectedId ? "1px solid black" : "";
+        return id === (treeContext === null || treeContext === void 0 ? void 0 : treeContext.selectedId) ? "1px solid black" : "";
     }, [
         id,
-        treeContext.selectedId
+        treeContext === null || treeContext === void 0 ? void 0 : treeContext.selectedId
+    ]);
+    var nodeColour = (0, $gTuX4$react.useMemo)(function() {
+        if (treeContext && treeContext.selectedId) {
+            var anc = (0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(treeContext.selectedId, [], treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList).map(function(n) {
+                return n.id;
+            });
+            if ((0, ($parcel$interopDefault($gTuX4$swchelperslib_to_consumable_arrayjs)))(anc).concat([
+                treeContext.selectedId
+            ]).includes(id)) return treeContext.nodeHighlight;
+        }
+        return;
+    }, [
+        id,
+        treeContext
     ]);
     // New node parameters
     var newNameRef = (0, $gTuX4$react.useRef)(null);
@@ -302,7 +228,7 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
                 switch(_state.label){
                     case 0:
                         setSavingNewNode(true);
-                        if (!treeContext.onAddChild) return [
+                        if (!(treeContext === null || treeContext === void 0 ? void 0 : treeContext.onAddChild)) return [
                             3,
                             2
                         ];
@@ -338,11 +264,11 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
                 switch(_state.label){
                     case 0:
                         setRenaming(false);
-                        setUpdatingNode(true);
-                        if (!treeContext.onRename) return [
+                        if (!(treeContext === null || treeContext === void 0 ? void 0 : treeContext.onRename)) return [
                             3,
                             2
                         ];
+                        setUpdatingNode(true);
                         return [
                             4,
                             treeContext.onRename(id, newLabel)
@@ -351,9 +277,9 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
                         handleReturn.apply(void 0, [
                             _state.sent()
                         ]);
+                        setUpdatingNode(false);
                         _state.label = 2;
                     case 2:
-                        setUpdatingNode(false);
                         return [
                             2
                         ];
@@ -372,11 +298,11 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
         return (0, ($parcel$interopDefault($gTuX4$swchelperslib_ts_generatorjs)))(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    setUpdatingNode(true);
-                    if (!treeContext.onRemove) return [
+                    if (!(treeContext === null || treeContext === void 0 ? void 0 : treeContext.onRemove)) return [
                         3,
                         2
                     ];
+                    setUpdatingNode(true);
                     return [
                         4,
                         treeContext.onRemove(id)
@@ -385,9 +311,9 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
                     handleReturn.apply(void 0, [
                         _state.sent()
                     ]);
+                    setUpdatingNode(false);
                     _state.label = 2;
                 case 2:
-                    setUpdatingNode(false);
                     return [
                         2
                     ];
@@ -400,16 +326,10 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
     ]);
     // Context actions
     var addChild = (0, $gTuX4$react.useCallback)(function() {
-        if (menuContext.set) {
-            menuContext.set({
-                visible: false
-            });
-            setShowNewNode(true);
-            treeContext.handleExpandClick && treeContext.handleExpandClick(id, true);
-        }
+        setShowNewNode(true);
+        treeContext && treeContext.handleExpandClick(id, true);
     }, [
         id,
-        menuContext,
         treeContext
     ]);
     (0, $gTuX4$react.useEffect)(function() {
@@ -418,35 +338,14 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
         showNewNode
     ]);
     var renameThis = (0, $gTuX4$react.useCallback)(function() {
-        if (menuContext.set) {
-            menuContext.set({
-                visible: false
-            });
-            setRenaming(true);
-        }
-    }, [
-        menuContext
-    ]);
-    (0, $gTuX4$react.useEffect)(function() {
-        if (renaming === true && currentNameRef.current) currentNameRef.current.focus();
-    }, [
-        renaming
-    ]);
-    var removeThis = (0, $gTuX4$react.useCallback)(function() {
-        if (menuContext.set) {
-            menuContext.set({
-                visible: false
-            });
-            deleteThis();
-        }
+        setRenaming(true);
+        treeContext === null || treeContext === void 0 ? void 0 : treeContext.handleSelect(id);
     }, [
-        menuContext,
-        deleteThis
+        id,
+        treeContext
     ]);
     // Context menu
-    var showMenu = (0, $gTuX4$react.useCallback)(function(e) {
-        e.preventDefault();
-        e.stopPropagation();
+    var menuItems = (0, $gTuX4$react.useMemo)(function() {
         var menuItems = [];
         if (canAddChildren) menuItems.push({
             label: "Add",
@@ -458,138 +357,135 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
         });
         if (canRemove && (childNodes === undefined || childNodes.length === 0)) menuItems.push({
             label: "Delete",
-            action: removeThis
-        });
-        if (typeof menuContext.set === "function") menuContext.set({
-            visible: true,
-            y: e.pageY,
-            x: e.pageX,
-            menuItems: menuItems
+            action: deleteThis
         });
+        return menuItems;
     }, [
         addChild,
         canAddChildren,
         canRemove,
         canRename,
         childNodes,
-        menuContext,
-        removeThis,
+        deleteThis,
         renameThis
     ]);
     // Return node
-    return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
-        id: "".concat(treeContext.id, "-treenode-").concat(id),
-        className: "treenode",
-        onClickCapture: function() {
-            return treeContext.handleSelect && treeContext.handleSelect(id);
-        },
-        onContextMenuCapture: function() {
-            return treeContext.handleSelect && treeContext.handleSelect(id);
-        },
-        onFocusCapture: function() {
-            return treeContext.handleSelect && treeContext.handleSelect(id);
-        },
-        children: [
-            error ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)((0, $gTuX4$reactjsxruntime.Fragment), {
-                children: [
-                    /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.ExclamationCircleFill), {
-                        color: "var(--bs-danger)"
-                    }),
-                    " ",
-                    errorText && errorText !== "" ? errorText : "An unknown error has occured"
-                ]
-            }) : loading ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)((0, $gTuX4$reactjsxruntime.Fragment), {
-                children: [
-                    /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrap.Spinner), {
-                        size: "sm",
-                        animation: "border"
-                    }),
-                    " ",
-                    "Loading..."
-                ]
-            }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("span", {
-                onContextMenu: showMenu,
-                children: [
-                    childNodes !== undefined && childNodes.length > 0 ? !expanded ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRightFill), {
-                        role: "button",
-                        "aria-expanded": false,
-                        id: "".concat(treeContext.id, "-treenode-caret-").concat(id),
-                        onClick: function() {
-                            return treeContext.handleExpandClick && treeContext.handleExpandClick(id);
-                        }
-                    }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretDownFill), {
-                        role: "button",
-                        "aria-expanded": true,
-                        id: "".concat(treeContext.id, "-treenode-caret-").concat(id),
-                        onClick: function() {
-                            return treeContext.handleExpandClick && treeContext.handleExpandClick(id);
-                        }
-                    }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRight), {
-                        role: "button",
-                        "aria-expanded": false,
-                        "aria-disabled": true
-                    }),
-                    thisNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $176d21a51def1fce$export$14f190ac910bde69), {
-                        id: "".concat(treeContext.id, "-treenode-entry-").concat(id),
-                        ref: currentNameRef,
-                        value: thisNode.label,
-                        editing: renaming,
-                        saving: updatingNode,
+    if (!treeContext) return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactjsxruntime.Fragment), {});
+    return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$asupcontextmenu.ContextMenuHandler), {
+        menuItems: menuItems,
+        children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
+            id: "".concat(treeContext.id, "-treenode-").concat(id),
+            className: "treenode",
+            children: [
+                error ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)((0, $gTuX4$reactjsxruntime.Fragment), {
+                    children: [
+                        /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.ExclamationCircleFill), {
+                            color: "var(--bs-danger)"
+                        }),
+                        " ",
+                        errorText && errorText !== "" ? errorText : "An unknown error has occured"
+                    ]
+                }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("span", {
+                    children: [
+                        childNodes !== undefined && childNodes.length > 0 ? !expanded ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRightFill), {
+                            id: "".concat(treeContext.id, "-treenode-caret-").concat(id),
+                            role: "button",
+                            color: nodeColour,
+                            "aria-expanded": false,
+                            onClick: function() {
+                                return treeContext.handleExpandClick(id);
+                            }
+                        }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretDownFill), {
+                            id: "".concat(treeContext.id, "-treenode-caret-").concat(id),
+                            role: "button",
+                            "aria-expanded": true,
+                            color: nodeColour,
+                            onClick: function() {
+                                treeContext.handleExpandClick(id);
+                            }
+                        }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRight), {
+                            id: "".concat(treeContext.id, "-treenode-caret-").concat(id),
+                            role: "button",
+                            color: nodeColour,
+                            "aria-expanded": false,
+                            "aria-disabled": true
+                        }),
+                        thisNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
+                            style: {
+                                display: "inline-block"
+                            },
+                            onContextMenuCapture: function() {
+                                return treeContext.handleSelect(id);
+                            },
+                            onClickCapture: function() {
+                                return treeContext.handleSelect(id);
+                            },
+                            onFocusCapture: function() {
+                                return treeContext.handleSelect(id);
+                            },
+                            children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $176d21a51def1fce$export$14f190ac910bde69), {
+                                id: "".concat(treeContext.id, "-treenode-entry-").concat(id),
+                                ref: currentNameRef,
+                                value: thisNode.label,
+                                editing: renaming,
+                                saving: updatingNode,
+                                setValue: function(ret) {
+                                    return renameNode(ret);
+                                },
+                                sendEscape: function() {
+                                    return setRenaming(false);
+                                },
+                                style: {
+                                    border: currentBorder,
+                                    margin: currentBorder === "" ? "1px" : "",
+                                    backgroundColor: currentBorder === "" ? "" : treeContext.textHighlight
+                                }
+                            })
+                        })
+                    ]
+                }),
+                childNodes !== undefined && childNodes.map(function(h) {
+                    return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
+                        id: "".concat(treeContext.id, "-treenode-child-").concat(h.id),
+                        style: {
+                            marginLeft: "16px",
+                            display: "block",
+                            maxHeight: expanded ? "99999px" : "0px",
+                            height: expanded ? "auto" : "0px",
+                            overflowY: "hidden",
+                            visibility: expanded ? "inherit" : "hidden",
+                            opacity: expanded ? 1 : 0,
+                            transition: "visibility .3s, opacity .3s ease-in-out, max-height 0.3s ease-in-out"
+                        },
+                        children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)($a56aac35d4408806$export$2eba8ec3a333fdbb, {
+                            id: h.id,
+                            canRemove: canRemoveChildren,
+                            canRename: canRenameChildren,
+                            canAddChildren: canAddChildren,
+                            canRemoveChildren: canRemoveChildren,
+                            canRenameChildren: canRenameChildren
+                        })
+                    }, h.id);
+                }),
+                showNewNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
+                    children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $176d21a51def1fce$export$14f190ac910bde69), {
+                        style: {
+                            marginLeft: "14px"
+                        },
+                        id: "treenode-new-".concat(id),
+                        ref: newNameRef,
+                        editing: true,
                         setValue: function(ret) {
-                            return renameNode(ret);
+                            confirmNewNode(ret);
                         },
+                        saving: savingNewNode,
                         sendEscape: function() {
-                            return setRenaming(false);
-                        },
-                        style: {
-                            border: currentBorder,
-                            margin: currentBorder === "" ? "1px" : "",
-                            backgroundColor: currentBorder === "" ? "" : "lightgrey"
+                            setShowNewNode(false);
                         }
                     })
-                ]
-            }),
-            childNodes !== undefined && childNodes.map(function(h, i) {
-                return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
-                    id: "".concat(treeContext.id, "-treenode-child-").concat(h.id),
-                    style: {
-                        marginLeft: "16px",
-                        display: "block",
-                        maxHeight: expanded ? "99999px" : "0px",
-                        height: expanded ? "auto" : "0px",
-                        overflowY: "hidden",
-                        visibility: expanded ? "inherit" : "hidden",
-                        opacity: expanded ? 1 : 0,
-                        transition: "visibility .3s, opacity .3s ease-in-out, max-height 0.3s ease-in-out"
-                    },
-                    children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)($a56aac35d4408806$export$2eba8ec3a333fdbb, {
-                        id: h.id,
-                        canRemove: canRemoveChildren,
-                        canRename: canRenameChildren,
-                        canAddChildren: canAddChildren,
-                        canRemoveChildren: canRemoveChildren,
-                        canRenameChildren: canRenameChildren
-                    })
-                }, h.id);
-            }),
-            showNewNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $176d21a51def1fce$export$14f190ac910bde69), {
-                    style: {
-                        marginLeft: "14px"
-                    },
-                    id: "treenode-new-".concat(id),
-                    ref: newNameRef,
-                    editing: true,
-                    setValue: function(ret) {
-                        confirmNewNode(ret);
-                    },
-                    saving: savingNewNode,
-                    sendEscape: function() {
-                        setShowNewNode(false);
-                    }
                 })
-            })
-        ]
+            ]
+        })
     });
 };
 
@@ -600,51 +496,39 @@ var $a56aac35d4408806$export$2eba8ec3a333fdbb = function(param) {
 
 
 
-var $a983ffa23085f8d6$export$85488b7eb1e4976f = function(id, included, hierarchyNodes) {
-    // Get current node
-    var current = hierarchyNodes.find(function(h) {
-        return h.id === id;
-    });
-    if (current === undefined) return [];
-    // Set return as children, current node or parent's return
-    var ret = current.parentId === undefined || current.parentId === null || hierarchyNodes.findIndex(function(h) {
-        return h.id === (current === null || current === void 0 ? void 0 : current.parentId);
-    }) === -1 ? (0, ($parcel$interopDefault($gTuX4$swchelperslib_to_consumable_arrayjs)))(included).concat([
-        current
-    ]) : $a983ffa23085f8d6$export$85488b7eb1e4976f(current.parentId, (0, ($parcel$interopDefault($gTuX4$swchelperslib_to_consumable_arrayjs)))(included.filter(function(c) {
-        return c.id !== current.parentId && c.id !== current.id;
-    })).concat([
-        current
-    ]), hierarchyNodes);
-    return ret;
-};
-
-
 var $f31429c9cc6d3bce$export$40c47a7ac5f85aba = function(nodeList, selectedId, expandedNodes) {
-    var k = (0, ($parcel$interopDefault($gTuX4$swchelperslib_to_consumable_arrayjs)))(expandedNodes).concat((0, ($parcel$interopDefault($gTuX4$swchelperslib_to_consumable_arrayjs)))((0, $a983ffa23085f8d6$export$85488b7eb1e4976f)(selectedId, [], nodeList).map(function(n) {
+    return (0, ($parcel$interopDefault($gTuX4$swchelperslib_to_consumable_arrayjs)))(expandedNodes).concat((0, ($parcel$interopDefault($gTuX4$swchelperslib_to_consumable_arrayjs)))((0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(selectedId, [], nodeList).map(function(n) {
         return n.id;
     }).filter(function(k) {
         return !expandedNodes.includes(k);
     }))).sort(function(a, b) {
         return "".concat(a).localeCompare("".concat(b));
     });
-    return k;
 };
 
 
 
 
-
 var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
     var id = param.id, nodeList = param.nodeList, roots = param.roots, _param_canRemoveRoot = param.// canAddRoot = false,
     canRemoveRoot, canRemoveRoot = _param_canRemoveRoot === void 0 ? false : _param_canRemoveRoot, _param_canRenameRoot = param.canRenameRoot, canRenameRoot = _param_canRenameRoot === void 0 ? false : _param_canRenameRoot, _param_canAddChildren = param.canAddChildren, canAddChildren = _param_canAddChildren === void 0 ? false : _param_canAddChildren, _param_canRemoveChildren = param.canRemoveChildren, canRemoveChildren = _param_canRemoveChildren === void 0 ? false : _param_canRemoveChildren, _param_canRenameChildren = param.canRenameChildren, canRenameChildren = _param_canRenameChildren === void 0 ? false : _param_canRenameChildren, selectedId = param.selectedId, _param_handleSelect = param.handleSelect, handleSelect = _param_handleSelect === void 0 ? function() {
         return;
-    } : _param_handleSelect, onAdd = param.onAdd, onRename = param.onRename, onRemove = param.onRemove;
+    } : _param_handleSelect, onAdd = param.onAdd, onRename = param.onRename, onRemove = param.onRemove, _param_nodeHighlight = param.nodeHighlight, nodeHighlight = _param_nodeHighlight === void 0 ? "red" : _param_nodeHighlight, _param_textHighlight = param.textHighlight, textHighlight = _param_textHighlight === void 0 ? "rgba(255, 0, 0, 0.2)" : _param_textHighlight;
     var _useState = (0, ($parcel$interopDefault($gTuX4$swchelperslib_sliced_to_arrayjs)))((0, $gTuX4$react.useState)([]), 2), expandedNodes = _useState[0], setExpandedNodes = _useState[1];
     (0, $gTuX4$react.useEffect)(function() {
-        selectedId !== undefined && setExpandedNodes((0, $f31429c9cc6d3bce$export$40c47a7ac5f85aba)(nodeList, selectedId, expandedNodes));
-    }, []);
-    // Change expansion and update context
+        if (selectedId) {
+            // Check all nodes are showing that should be
+            var shouldExpand = (0, $f31429c9cc6d3bce$export$40c47a7ac5f85aba)(nodeList, selectedId, expandedNodes);
+            shouldExpand.filter(function(n) {
+                return !expandedNodes.includes(n);
+            }).length > 0 && setExpandedNodes(shouldExpand);
+        }
+    }, [
+        expandedNodes,
+        nodeList,
+        selectedId
+    ]);
+    // Change expansion and update contexts
     var changeExpand = (0, $gTuX4$react.useCallback)(function(eKey, force) {
         var newExpandedNodes = (0, ($parcel$interopDefault($gTuX4$swchelperslib_to_consumable_arrayjs)))(expandedNodes);
         var ix = newExpandedNodes.findIndex(function(nKey) {
@@ -656,31 +540,31 @@ var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
     }, [
         expandedNodes
     ]);
-    return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $bad272ba85e71af5$export$434a17f82a8154e4), {
-        children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $ff9cca1fe8f6b24e$export$29ec378200e05207).Provider, {
-            value: {
-                id: id,
-                nodeList: nodeList,
-                selectedId: selectedId,
-                handleSelect: handleSelect,
-                expandedNodes: expandedNodes,
-                handleExpandClick: function(r, f) {
-                    return changeExpand(r, f);
-                },
-                onAddChild: onAdd,
-                onRename: onRename,
-                onRemove: onRemove
+    return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $ff9cca1fe8f6b24e$export$29ec378200e05207).Provider, {
+        value: {
+            id: id,
+            nodeList: nodeList,
+            selectedId: selectedId,
+            handleSelect: handleSelect,
+            expandedNodes: expandedNodes,
+            handleExpandClick: function(r, f) {
+                return changeExpand(r, f);
             },
-            children: roots.map(function(r) {
-                return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $a56aac35d4408806$export$2eba8ec3a333fdbb), {
-                    id: r,
-                    canRemove: canRemoveRoot,
-                    canAddChildren: canAddChildren,
-                    canRename: canRenameRoot,
-                    canRemoveChildren: canRemoveChildren,
-                    canRenameChildren: canRenameChildren
-                }, r);
-            })
+            onAddChild: onAdd,
+            onRename: onRename,
+            onRemove: onRemove,
+            nodeHighlight: nodeHighlight,
+            textHighlight: textHighlight
+        },
+        children: roots.map(function(r) {
+            return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $a56aac35d4408806$export$2eba8ec3a333fdbb), {
+                id: r,
+                canRemove: canRemoveRoot,
+                canAddChildren: canAddChildren,
+                canRename: canRenameRoot,
+                canRemoveChildren: canRemoveChildren,
+                canRenameChildren: canRenameChildren
+            }, r);
         })
     });
 };
@@ -691,7 +575,7 @@ var $9becaaec3a803ae7$export$5580fff3e08a8be5 = function(param) {
 
 var $f8937e88ee74204e$exports = {};
 
-$parcel$export($f8937e88ee74204e$exports, "getParents", function () { return $a983ffa23085f8d6$export$85488b7eb1e4976f; });
+$parcel$export($f8937e88ee74204e$exports, "getParents", function () { return $580f9b3e262282c9$export$c6fd3ab3f44300d0; });