@asup/tree-of-nodes 1.0.4 → 1.0.6

package/dist/main.js

@@ -1,118 +1,37 @@
-import "./main.css";
-import {jsx as $duWW8$jsx, jsxs as $duWW8$jsxs, Fragment as $duWW8$Fragment} from "react/jsx-runtime";
-import $duWW8$react, {useRef as $duWW8$useRef, useState as $duWW8$useState, useCallback as $duWW8$useCallback, useEffect as $duWW8$useEffect, useContext as $duWW8$useContext, useMemo as $duWW8$useMemo, createContext as $duWW8$createContext} from "react";
-import {Spinner as $duWW8$Spinner} from "react-bootstrap";
+import {jsx as $duWW8$jsx, Fragment as $duWW8$Fragment, jsxs as $duWW8$jsxs} from "react/jsx-runtime";
+import {ContextMenuHandler as $duWW8$ContextMenuHandler} from "@asup/context-menu";
+import $duWW8$react, {useContext as $duWW8$useContext, useMemo as $duWW8$useMemo, useState as $duWW8$useState, useRef as $duWW8$useRef, useCallback as $duWW8$useCallback, useEffect as $duWW8$useEffect, createContext as $duWW8$createContext} from "react";
 import {ExclamationCircleFill as $duWW8$ExclamationCircleFill, CaretRightFill as $duWW8$CaretRightFill, CaretDownFill as $duWW8$CaretDownFill, CaretRight as $duWW8$CaretRight} from "react-bootstrap-icons";
+import {Spinner as $duWW8$Spinner} from "react-bootstrap";
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 var $b65191f6d0a0a991$exports = {};
 
-$parcel$export($b65191f6d0a0a991$exports, "ContextMenu", function () { return $567ed433af94513f$export$8dc6765e8be191c7; });
-$parcel$export($b65191f6d0a0a991$exports, "ContextMenuProvider", function () { return $9c3c2ad4d66e1cfe$export$434a17f82a8154e4; });
 $parcel$export($b65191f6d0a0a991$exports, "TreeNode", function () { return $47c36cf4281201f5$export$2eba8ec3a333fdbb; });
 $parcel$export($b65191f6d0a0a991$exports, "TreeOfNodes", function () { return $ba47aaf387735a90$export$5580fff3e08a8be5; });
 $parcel$export($b65191f6d0a0a991$exports, "WordEntry", function () { return $84765747a8c6bfe2$export$14f190ac910bde69; });
 
 
 
-const $567ed433af94513f$export$8dc6765e8be191c7 = /*#__PURE__*/ (0, $duWW8$react).forwardRef(({ entries: entries , visible: visible , xPos: xPos , yPos: yPos  }, ref)=>{
-    $567ed433af94513f$export$8dc6765e8be191c7.displayName = "ContextMenu";
-    var _e_label;
-    return /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-        ref: ref,
-        className: `context-menu ${visible ? "visible" : ""}`,
-        style: {
-            top: `${yPos}px`,
-            left: `${xPos}px`
-        },
-        children: entries.map((e, i)=>/*#__PURE__*/ (0, $duWW8$jsx)("div", {
-                className: "context-menu-item",
-                onClick: ()=>{
-                    e.action && e.action();
-                },
-                children: (_e_label = e.label) !== null && _e_label !== void 0 ? _e_label : ""
-            }, i))
-    });
-});
 
-
-
-
-
-const $9c3c2ad4d66e1cfe$export$c7e742effb1c51e2 = /*#__PURE__*/ (0, $duWW8$react).createContext({});
-const $9c3c2ad4d66e1cfe$export$434a17f82a8154e4 = ({ children: children  })=>{
-    // Menu resources
-    const divRef = (0, $duWW8$useRef)(null);
-    const menuRef = (0, $duWW8$useRef)(null);
-    const [menuXPos, setMenuXPos] = (0, $duWW8$useState)(0);
-    const [menuYPos, setMenuYPos] = (0, $duWW8$useState)(0);
-    const [menuVisible, setMenuVisible] = (0, $duWW8$useState)(false);
-    const [menuItems, setMenuItems] = (0, $duWW8$useState)([]);
-    // Update menu items
-    const updateMenu = (0, $duWW8$useCallback)((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
-    const handleClick = (0, $duWW8$useCallback)((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, $duWW8$useEffect)(()=>{
-        if (menuVisible) document.addEventListener("mousedown", handleClick);
-        else document.removeEventListener("mousedown", handleClick);
-        return ()=>{
-            document.removeEventListener("mousedown", handleClick);
-        };
-    }, [
-        handleClick,
-        menuVisible
-    ]);
-    return /*#__PURE__*/ (0, $duWW8$jsx)($9c3c2ad4d66e1cfe$export$c7e742effb1c51e2.Provider, {
-        value: {
-            visible: menuVisible,
-            x: menuXPos,
-            y: menuYPos,
-            set: updateMenu
-        },
-        children: /*#__PURE__*/ (0, $duWW8$jsxs)("div", {
-            className: "menu-context-provider",
-            style: {
-                position: "relative"
-            },
-            ref: divRef,
-            children: [
-                children,
-                /*#__PURE__*/ (0, $duWW8$jsx)((0, $567ed433af94513f$export$8dc6765e8be191c7), {
-                    ref: menuRef,
-                    entries: menuItems,
-                    visible: menuVisible,
-                    xPos: menuXPos,
-                    yPos: menuYPos
-                })
-            ]
-        })
-    });
+const $6303f0814ed0ce8b$export$c6fd3ab3f44300d0 = (id, included, hierarchyNodes)=>{
+    // Get current node
+    const current = hierarchyNodes.find((h)=>h.id === id);
+    if (current === undefined) return [];
+    // Get parent node
+    const parent = hierarchyNodes.find((h)=>h.id === current.parentId);
+    // Stop if no more parents
+    return parent === undefined ? included : $6303f0814ed0ce8b$export$c6fd3ab3f44300d0(parent.id, [
+        ...included.filter((i)=>i.id !== parent.id),
+        parent
+    ], hierarchyNodes);
 };
 
 
 
-
-
-
-
-
-const $886f402bccb0fd30$export$29ec378200e05207 = (0, $duWW8$createContext)({
-    id: "tree-of-nodes",
-    nodeList: []
-});
+const $886f402bccb0fd30$export$29ec378200e05207 = (0, $duWW8$createContext)(undefined);
 
 
 
@@ -171,6 +90,7 @@ const $84765747a8c6bfe2$export$14f190ac910bde69 = /*#__PURE__*/ (0, $duWW8$react
                 animation: "border"
             }),
             /*#__PURE__*/ (0, $duWW8$jsx)("input", {
+                autoFocus: true,
                 id: String(id),
                 ref: ref,
                 type: "text",
@@ -194,37 +114,48 @@ const $84765747a8c6bfe2$export$14f190ac910bde69 = /*#__PURE__*/ (0, $duWW8$react
 const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id , canRemove: canRemove , canRename: canRename , canAddChildren: canAddChildren , canRemoveChildren: canRemoveChildren , canRenameChildren: canRenameChildren  })=>{
     // Contexts
     const treeContext = (0, $duWW8$useContext)((0, $886f402bccb0fd30$export$29ec378200e05207));
-    const menuContext = (0, $duWW8$useContext)((0, $9c3c2ad4d66e1cfe$export$c7e742effb1c51e2));
     // Node information
-    const thisNode = (0, $duWW8$useMemo)(()=>treeContext.nodeList.find((n)=>n.id === id), [
+    const thisNode = (0, $duWW8$useMemo)(()=>{
+        return treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList.find((n)=>n.id === id);
+    }, [
         id,
-        treeContext.nodeList
+        treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList
     ]);
-    const childNodes = (0, $duWW8$useMemo)(()=>treeContext.nodeList.filter((n)=>n.parentId === id), [
+    const childNodes = (0, $duWW8$useMemo)(()=>{
+        return treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList.filter((n)=>n.parentId === id);
+    }, [
         id,
-        treeContext.nodeList
+        treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList
     ]);
     // State
-    const loading = (0, $duWW8$useMemo)(()=>treeContext.nodeList.findIndex((n)=>n.id === id) === -1, [
-        id,
-        treeContext.nodeList
-    ]);
     const [error, setError] = (0, $duWW8$useState)(false);
     const [errorText, setErrotText] = (0, $duWW8$useState)(null);
     const expanded = (0, $duWW8$useMemo)(()=>{
-        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((e)=>e === id)) !== null && _treeContext_expandedNodes_findIndex !== void 0 ? _treeContext_expandedNodes_findIndex : -1) > -1;
+        return ((_treeContext_expandedNodes_findIndex = treeContext === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes.findIndex((e)=>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
     const currentBorder = (0, $duWW8$useMemo)(()=>{
-        return id === treeContext.selectedId ? "1px solid black" : "";
+        return id === (treeContext === null || treeContext === void 0 ? void 0 : treeContext.selectedId) ? "1px solid black" : "";
+    }, [
+        id,
+        treeContext === null || treeContext === void 0 ? void 0 : treeContext.selectedId
+    ]);
+    const nodeColour = (0, $duWW8$useMemo)(()=>{
+        if (treeContext && treeContext.selectedId) {
+            const anc = (0, $6303f0814ed0ce8b$export$c6fd3ab3f44300d0)(treeContext.selectedId, [], treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList).map((n)=>n.id);
+            if ([
+                ...anc,
+                treeContext.selectedId
+            ].includes(id)) return treeContext.nodeHighlight;
+        }
+        return;
     }, [
         id,
-        treeContext.selectedId
+        treeContext
     ]);
     // New node parameters
     const newNameRef = (0, $duWW8$useRef)(null);
@@ -247,7 +178,7 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id , canRemove: canRemo
     }, []);
     const confirmNewNode = (0, $duWW8$useCallback)(async (label)=>{
         setSavingNewNode(true);
-        if (treeContext.onAddChild) handleReturn(await treeContext.onAddChild(id, label));
+        if (treeContext === null || treeContext === void 0 ? void 0 : treeContext.onAddChild) handleReturn(await treeContext.onAddChild(id, label));
         setSavingNewNode(false);
         setShowNewNode(false);
     }, [
@@ -257,18 +188,22 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id , canRemove: canRemo
     ]);
     const renameNode = (0, $duWW8$useCallback)(async (newLabel)=>{
         setRenaming(false);
-        setUpdatingNode(true);
-        if (treeContext.onRename) handleReturn(await treeContext.onRename(id, newLabel));
-        setUpdatingNode(false);
+        if (treeContext === null || treeContext === void 0 ? void 0 : treeContext.onRename) {
+            setUpdatingNode(true);
+            handleReturn(await treeContext.onRename(id, newLabel));
+            setUpdatingNode(false);
+        }
     }, [
         handleReturn,
         id,
         treeContext
     ]);
     const deleteThis = (0, $duWW8$useCallback)(async ()=>{
-        setUpdatingNode(true);
-        if (treeContext.onRemove) handleReturn(await treeContext.onRemove(id));
-        setUpdatingNode(false);
+        if (treeContext === null || treeContext === void 0 ? void 0 : treeContext.onRemove) {
+            setUpdatingNode(true);
+            handleReturn(await treeContext.onRemove(id));
+            setUpdatingNode(false);
+        }
     }, [
         handleReturn,
         id,
@@ -276,16 +211,10 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id , canRemove: canRemo
     ]);
     // Context actions
     const addChild = (0, $duWW8$useCallback)(()=>{
-        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, $duWW8$useEffect)(()=>{
@@ -294,35 +223,14 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id , canRemove: canRemo
         showNewNode
     ]);
     const renameThis = (0, $duWW8$useCallback)(()=>{
-        if (menuContext.set) {
-            menuContext.set({
-                visible: false
-            });
-            setRenaming(true);
-        }
+        setRenaming(true);
+        treeContext === null || treeContext === void 0 ? void 0 : treeContext.handleSelect(id);
     }, [
-        menuContext
-    ]);
-    (0, $duWW8$useEffect)(()=>{
-        if (renaming === true && currentNameRef.current) currentNameRef.current.focus();
-    }, [
-        renaming
-    ]);
-    const removeThis = (0, $duWW8$useCallback)(()=>{
-        if (menuContext.set) {
-            menuContext.set({
-                visible: false
-            });
-            deleteThis();
-        }
-    }, [
-        menuContext,
-        deleteThis
+        id,
+        treeContext
     ]);
     // Context menu
-    const showMenu = (0, $duWW8$useCallback)((e)=>{
-        e.preventDefault();
-        e.stopPropagation();
+    const menuItems = (0, $duWW8$useMemo)(()=>{
         const menuItems = [];
         if (canAddChildren) menuItems.push({
             label: "Add",
@@ -334,167 +242,155 @@ const $47c36cf4281201f5$export$2eba8ec3a333fdbb = ({ id: id , canRemove: canRemo
         });
         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, $duWW8$jsxs)("div", {
-        id: `${treeContext.id}-treenode-${id}`,
-        className: "treenode",
-        onClickCapture: ()=>treeContext.handleSelect && treeContext.handleSelect(id),
-        onContextMenuCapture: ()=>treeContext.handleSelect && treeContext.handleSelect(id),
-        onFocusCapture: ()=>treeContext.handleSelect && treeContext.handleSelect(id),
-        children: [
-            error ? /*#__PURE__*/ (0, $duWW8$jsxs)((0, $duWW8$Fragment), {
-                children: [
-                    /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$ExclamationCircleFill), {
-                        color: "var(--bs-danger)"
-                    }),
-                    " ",
-                    errorText && errorText !== "" ? errorText : "An unknown error has occured"
-                ]
-            }) : loading ? /*#__PURE__*/ (0, $duWW8$jsxs)((0, $duWW8$Fragment), {
-                children: [
-                    /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$Spinner), {
-                        size: "sm",
-                        animation: "border"
-                    }),
-                    " ",
-                    "Loading..."
-                ]
-            }) : /*#__PURE__*/ (0, $duWW8$jsxs)("span", {
-                onContextMenu: showMenu,
-                children: [
-                    childNodes !== undefined && childNodes.length > 0 ? !expanded ? /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$CaretRightFill), {
-                        role: "button",
-                        "aria-expanded": false,
-                        id: `${treeContext.id}-treenode-caret-${id}`,
-                        onClick: ()=>treeContext.handleExpandClick && treeContext.handleExpandClick(id)
-                    }) : /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$CaretDownFill), {
-                        role: "button",
-                        "aria-expanded": true,
-                        id: `${treeContext.id}-treenode-caret-${id}`,
-                        onClick: ()=>treeContext.handleExpandClick && treeContext.handleExpandClick(id)
-                    }) : /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$CaretRight), {
-                        role: "button",
-                        "aria-expanded": false,
-                        "aria-disabled": true
-                    }),
-                    thisNode && /*#__PURE__*/ (0, $duWW8$jsx)((0, $84765747a8c6bfe2$export$14f190ac910bde69), {
-                        id: `${treeContext.id}-treenode-entry-${id}`,
-                        ref: currentNameRef,
-                        value: thisNode.label,
-                        editing: renaming,
-                        saving: updatingNode,
-                        setValue: (ret)=>renameNode(ret),
-                        sendEscape: ()=>setRenaming(false),
+    if (!treeContext) return /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$Fragment), {});
+    return /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$ContextMenuHandler), {
+        menuItems: menuItems,
+        children: /*#__PURE__*/ (0, $duWW8$jsxs)("div", {
+            id: `${treeContext.id}-treenode-${id}`,
+            className: "treenode",
+            children: [
+                error ? /*#__PURE__*/ (0, $duWW8$jsxs)((0, $duWW8$Fragment), {
+                    children: [
+                        /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$ExclamationCircleFill), {
+                            color: "var(--bs-danger)"
+                        }),
+                        " ",
+                        errorText && errorText !== "" ? errorText : "An unknown error has occured"
+                    ]
+                }) : /*#__PURE__*/ (0, $duWW8$jsxs)("span", {
+                    children: [
+                        childNodes !== undefined && childNodes.length > 0 ? !expanded ? /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$CaretRightFill), {
+                            id: `${treeContext.id}-treenode-caret-${id}`,
+                            role: "button",
+                            color: nodeColour,
+                            "aria-expanded": false,
+                            onClick: ()=>treeContext.handleExpandClick(id)
+                        }) : /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$CaretDownFill), {
+                            id: `${treeContext.id}-treenode-caret-${id}`,
+                            role: "button",
+                            "aria-expanded": true,
+                            color: nodeColour,
+                            onClick: ()=>{
+                                treeContext.handleExpandClick(id);
+                            }
+                        }) : /*#__PURE__*/ (0, $duWW8$jsx)((0, $duWW8$CaretRight), {
+                            id: `${treeContext.id}-treenode-caret-${id}`,
+                            role: "button",
+                            color: nodeColour,
+                            "aria-expanded": false,
+                            "aria-disabled": true
+                        }),
+                        thisNode && /*#__PURE__*/ (0, $duWW8$jsx)("div", {
+                            style: {
+                                display: "inline-block"
+                            },
+                            onContextMenuCapture: ()=>treeContext.handleSelect(id),
+                            onClickCapture: ()=>treeContext.handleSelect(id),
+                            onFocusCapture: ()=>treeContext.handleSelect(id),
+                            children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $84765747a8c6bfe2$export$14f190ac910bde69), {
+                                id: `${treeContext.id}-treenode-entry-${id}`,
+                                ref: currentNameRef,
+                                value: thisNode.label,
+                                editing: renaming,
+                                saving: updatingNode,
+                                setValue: (ret)=>renameNode(ret),
+                                sendEscape: ()=>setRenaming(false),
+                                style: {
+                                    border: currentBorder,
+                                    margin: currentBorder === "" ? "1px" : "",
+                                    backgroundColor: currentBorder === "" ? "" : treeContext.textHighlight
+                                }
+                            })
+                        })
+                    ]
+                }),
+                childNodes !== undefined && childNodes.map((h)=>/*#__PURE__*/ (0, $duWW8$jsx)("span", {
+                        id: `${treeContext.id}-treenode-child-${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, $duWW8$jsx)($47c36cf4281201f5$export$2eba8ec3a333fdbb, {
+                            id: h.id,
+                            canRemove: canRemoveChildren,
+                            canRename: canRenameChildren,
+                            canAddChildren: canAddChildren,
+                            canRemoveChildren: canRemoveChildren,
+                            canRenameChildren: canRenameChildren
+                        })
+                    }, h.id)),
+                showNewNode && /*#__PURE__*/ (0, $duWW8$jsx)("div", {
+                    children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $84765747a8c6bfe2$export$14f190ac910bde69), {
                         style: {
-                            border: currentBorder,
-                            margin: currentBorder === "" ? "1px" : "",
-                            backgroundColor: currentBorder === "" ? "" : "lightgrey"
+                            marginLeft: "14px"
+                        },
+                        id: `treenode-new-${id}`,
+                        ref: newNameRef,
+                        editing: true,
+                        setValue: (ret)=>{
+                            confirmNewNode(ret);
+                        },
+                        saving: savingNewNode,
+                        sendEscape: ()=>{
+                            setShowNewNode(false);
                         }
                     })
-                ]
-            }),
-            childNodes !== undefined && childNodes.map((h, i)=>/*#__PURE__*/ (0, $duWW8$jsx)("span", {
-                    id: `${treeContext.id}-treenode-child-${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, $duWW8$jsx)($47c36cf4281201f5$export$2eba8ec3a333fdbb, {
-                        id: h.id,
-                        canRemove: canRemoveChildren,
-                        canRename: canRenameChildren,
-                        canAddChildren: canAddChildren,
-                        canRemoveChildren: canRemoveChildren,
-                        canRenameChildren: canRenameChildren
-                    })
-                }, h.id)),
-            showNewNode && /*#__PURE__*/ (0, $duWW8$jsx)("div", {
-                children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $84765747a8c6bfe2$export$14f190ac910bde69), {
-                    style: {
-                        marginLeft: "14px"
-                    },
-                    id: `treenode-new-${id}`,
-                    ref: newNameRef,
-                    editing: true,
-                    setValue: (ret)=>{
-                        confirmNewNode(ret);
-                    },
-                    saving: savingNewNode,
-                    sendEscape: ()=>{
-                        setShowNewNode(false);
-                    }
                 })
-            })
-        ]
+            ]
+        })
     });
 };
 
 
 
 
-const $03b5c1380eb9c122$export$85488b7eb1e4976f = (id, included, hierarchyNodes)=>{
-    // Get current node
-    const current = hierarchyNodes.find((h)=>h.id === id);
-    if (current === undefined) return [];
-    // Set return as children, current node or parent's return
-    const ret = current.parentId === undefined || current.parentId === null || hierarchyNodes.findIndex((h)=>{
-        return h.id === (current === null || current === void 0 ? void 0 : current.parentId);
-    }) === -1 ? [
-        ...included,
-        current
-    ] : $03b5c1380eb9c122$export$85488b7eb1e4976f(current.parentId, [
-        ...included.filter((c)=>c.id !== current.parentId && c.id !== current.id),
-        current
-    ], hierarchyNodes);
-    return ret;
-};
-
 
 const $c7008d808d3e1c7a$export$40c47a7ac5f85aba = (nodeList, selectedId, expandedNodes)=>{
-    const k = [
+    return [
         ...expandedNodes,
-        ...(0, $03b5c1380eb9c122$export$85488b7eb1e4976f)(selectedId, [], nodeList).map((n)=>n.id).filter((k)=>!expandedNodes.includes(k))
+        ...(0, $6303f0814ed0ce8b$export$c6fd3ab3f44300d0)(selectedId, [], nodeList).map((n)=>n.id).filter((k)=>!expandedNodes.includes(k))
     ].sort((a, b)=>`${a}`.localeCompare(`${b}`));
-    return k;
 };
 
 
 
 
-
 const $ba47aaf387735a90$export$5580fff3e08a8be5 = ({ id: id , nodeList: nodeList , roots: roots , canRemoveRoot: // canAddRoot = false,
 canRemoveRoot = false , canRenameRoot: canRenameRoot = false , canAddChildren: canAddChildren = false , canRemoveChildren: canRemoveChildren = false , canRenameChildren: canRenameChildren = false , selectedId: selectedId , handleSelect: handleSelect = ()=>{
     return;
-} , onAdd: onAdd , onRename: onRename , onRemove: onRemove  })=>{
+} , onAdd: onAdd , onRename: onRename , onRemove: onRemove , nodeHighlight: nodeHighlight = "red" , textHighlight: textHighlight = "rgba(255, 0, 0, 0.2)"  })=>{
     const [expandedNodes, setExpandedNodes] = (0, $duWW8$useState)([]);
     (0, $duWW8$useEffect)(()=>{
-        selectedId !== undefined && setExpandedNodes((0, $c7008d808d3e1c7a$export$40c47a7ac5f85aba)(nodeList, selectedId, expandedNodes));
-    }, []);
-    // Change expansion and update context
+        if (selectedId) {
+            // Check all nodes are showing that should be
+            const shouldExpand = (0, $c7008d808d3e1c7a$export$40c47a7ac5f85aba)(nodeList, selectedId, expandedNodes);
+            shouldExpand.filter((n)=>!expandedNodes.includes(n)).length > 0 && setExpandedNodes(shouldExpand);
+        }
+    }, [
+        expandedNodes,
+        nodeList,
+        selectedId
+    ]);
+    // Change expansion and update contexts
     const changeExpand = (0, $duWW8$useCallback)((eKey, force)=>{
         const newExpandedNodes = [
             ...expandedNodes
@@ -506,28 +402,28 @@ canRemoveRoot = false , canRenameRoot: canRenameRoot = false , canAddChildren: c
     }, [
         expandedNodes
     ]);
-    return /*#__PURE__*/ (0, $duWW8$jsx)((0, $9c3c2ad4d66e1cfe$export$434a17f82a8154e4), {
-        children: /*#__PURE__*/ (0, $duWW8$jsx)((0, $886f402bccb0fd30$export$29ec378200e05207).Provider, {
-            value: {
-                id: id,
-                nodeList: nodeList,
-                selectedId: selectedId,
-                handleSelect: handleSelect,
-                expandedNodes: expandedNodes,
-                handleExpandClick: (r, f)=>changeExpand(r, f),
-                onAddChild: onAdd,
-                onRename: onRename,
-                onRemove: onRemove
-            },
-            children: roots.map((r)=>/*#__PURE__*/ (0, $duWW8$jsx)((0, $47c36cf4281201f5$export$2eba8ec3a333fdbb), {
-                    id: r,
-                    canRemove: canRemoveRoot,
-                    canAddChildren: canAddChildren,
-                    canRename: canRenameRoot,
-                    canRemoveChildren: canRemoveChildren,
-                    canRenameChildren: canRenameChildren
-                }, r))
-        })
+    return /*#__PURE__*/ (0, $duWW8$jsx)((0, $886f402bccb0fd30$export$29ec378200e05207).Provider, {
+        value: {
+            id: id,
+            nodeList: nodeList,
+            selectedId: selectedId,
+            handleSelect: handleSelect,
+            expandedNodes: expandedNodes,
+            handleExpandClick: (r, f)=>changeExpand(r, f),
+            onAddChild: onAdd,
+            onRename: onRename,
+            onRemove: onRemove,
+            nodeHighlight: nodeHighlight,
+            textHighlight: textHighlight
+        },
+        children: roots.map((r)=>/*#__PURE__*/ (0, $duWW8$jsx)((0, $47c36cf4281201f5$export$2eba8ec3a333fdbb), {
+                id: r,
+                canRemove: canRemoveRoot,
+                canAddChildren: canAddChildren,
+                canRename: canRenameRoot,
+                canRemoveChildren: canRemoveChildren,
+                canRenameChildren: canRenameChildren
+            }, r))
     });
 };
 
@@ -537,11 +433,11 @@ canRemoveRoot = false , canRenameRoot: canRenameRoot = false , canAddChildren: c
 
 var $3d005c8713d7dfb7$exports = {};
 
-$parcel$export($3d005c8713d7dfb7$exports, "getParents", function () { return $03b5c1380eb9c122$export$85488b7eb1e4976f; });
+$parcel$export($3d005c8713d7dfb7$exports, "getParents", function () { return $6303f0814ed0ce8b$export$c6fd3ab3f44300d0; });
 
 
 
 
 
-export {$567ed433af94513f$export$8dc6765e8be191c7 as ContextMenu, $9c3c2ad4d66e1cfe$export$434a17f82a8154e4 as ContextMenuProvider, $47c36cf4281201f5$export$2eba8ec3a333fdbb as TreeNode, $ba47aaf387735a90$export$5580fff3e08a8be5 as TreeOfNodes, $84765747a8c6bfe2$export$14f190ac910bde69 as WordEntry, $03b5c1380eb9c122$export$85488b7eb1e4976f as getParents};
+export {$47c36cf4281201f5$export$2eba8ec3a333fdbb as TreeNode, $ba47aaf387735a90$export$5580fff3e08a8be5 as TreeOfNodes, $84765747a8c6bfe2$export$14f190ac910bde69 as WordEntry, $6303f0814ed0ce8b$export$c6fd3ab3f44300d0 as getAncestors};
 //# sourceMappingURL=main.js.map