@asup/tree-of-nodes 2.0.5 → 3.0.0

package/dist/cjs/main.css

@@ -1,3 +1,16 @@
+:root {
+  --ton-transition-time: .3s;
+  --ton-long-transition-time: .6s;
+}
+
+.tree-of-nodes {
+  flex-direction: column;
+  gap: 1px;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+}
+
 .ton-checkbox {
   margin-top: 3px;
   margin-right: 3px;
@@ -12,18 +25,26 @@
   align-items: center;
   width: 100%;
   max-width: 100%;
-  height: 34px;
+  height: 30px;
   display: flex;
 }
 
 .ton-label {
-  height: 34px;
+  height: 26px;
 }
 
 .ton-label-span {
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
   text-overflow: ellipsis;
   white-space: nowrap;
+  border: 1px solid #0000;
+  border-radius: 3px;
   width: 100%;
+  padding: 1px 3px;
+  line-height: 24px;
   display: inline-block;
   overflow: hidden;
 }
@@ -33,16 +54,27 @@
 }
 
 .ton-rename {
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
   border: 1px dotted #000;
+  border-radius: 3px;
   width: 100%;
   min-width: 0;
-  line-height: .75rem;
+  padding: 1px 3px;
+  line-height: 24px;
+}
+
+.ton-rename:focus {
+  box-shadow: none;
+  outline: none;
 }
 
 .ton-child {
   opacity: 1;
+  transition: opacity var(--ton-long-transition-time) linear;
   margin-left: 16px;
-  transition: opacity .6s linear;
   display: block;
 }
 
@@ -55,29 +87,33 @@
 
 .ton-collapsible-wrapper:after {
   content: "";
-  height: 20px;
+  height: 1px;
+  transition: height var(--ton-transition-time) linear, max-height 0s var(--ton-transition-time) linear;
   max-height: 0;
-  transition: height .3s linear, max-height 0s linear .3s;
 }
 
 .ton-collapsible {
+  transition: margin-bottom var(--ton-transition-time) cubic-bezier(0, 0, 0, 1);
+  flex-direction: column;
+  gap: 1px;
   width: 100%;
   max-height: 10000px;
-  margin-bottom: 0;
-  transition: margin-bottom .3s cubic-bezier(0, 0, 0, 1);
+  margin-top: 1px;
+  margin-bottom: 1px;
+  display: flex;
 }
 
 .ton-collapsible-wrapper.collapsed > .ton-collapsible {
+  transition: margin-bottom var(--ton-transition-time) cubic-bezier(1, 0, 1, 1), visibility 0s var(--ton-transition-time), max-height 0s var(--ton-transition-time);
   visibility: hidden;
   max-height: 0;
   margin-bottom: -2000px;
-  transition: margin-bottom .3s cubic-bezier(1, 0, 1, 1), visibility 0s .3s, max-height 0s .3s;
 }
 
 .ton-collapsible-wrapper.collapsed:after {
   height: 0;
+  transition: height var(--ton-transition-time) linear;
   max-height: 20px;
-  transition: height .3s linear;
 }
 
 .ton-collapsible-wrapper.collapsed {
@@ -86,6 +122,6 @@
 
 .ton-collapsible-wrapper.collapsed .ton-child {
   opacity: 0;
-  transition: opacity .6s linear;
+  transition: opacity var(--ton-long-transition-time) linear;
 }
 /*# sourceMappingURL=main.css.map */

package/dist/cjs/main.css.map

@@ -1 +1 @@
-{"mappings":"AAAA;;;;;AAKA;;;;AAIA;;;;;;;;;AASA;;;;AAIA;;;;;;;;AAQA;;;;AAIA;;;;;;;AAOA;;;;;;;AAOA;;;;;;;AAMA;;;;;;;AAQA;;;;;;;AAMA;;;;;;;AASA;;;;;;AAKA;;;;AAGA","sources":["src/components/TreeNode.css"],"sourcesContent":[".ton-checkbox {\n  margin-right: 3px;\n  margin-top: 3px;\n}\n\n.ton-expander {\n  margin: 0;\n}\n\n.ton-node {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: 100%;\n  max-width: 100%;\n  height: 34px;\n}\n\n.ton-label {\n  height: 34px;\n}\n\n.ton-label-span {\n  display: inline-block;\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ton-rename-holder {\n  width: 100%;\n}\n\n.ton-rename {\n  line-height: 0.75rem;\n  border: 1px dotted black;\n  width: 100%;\n  min-width: 0;\n}\n\n.ton-child {\n  margin-left: 16px;\n  display: block;\n  opacity: 1;\n  transition: opacity 0.6s linear;\n}\n\n.ton-collapsible-wrapper {\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n  max-width: 100%;\n}\n.ton-collapsible-wrapper:after {\n  content: \"\";\n  height: 20px;\n  transition:\n    height 0.3s linear,\n    max-height 0s 0.3s linear;\n  max-height: 0px;\n}\n.ton-collapsible {\n  transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);\n  margin-bottom: 0;\n  max-height: 10000px;\n  width: 100%;\n}\n.ton-collapsible-wrapper.collapsed > .ton-collapsible {\n  margin-bottom: -2000px;\n  transition:\n    margin-bottom 0.3s cubic-bezier(1, 0, 1, 1),\n    visibility 0s 0.3s,\n    max-height 0s 0.3s;\n  visibility: hidden;\n  max-height: 0;\n}\n.ton-collapsible-wrapper.collapsed:after {\n  height: 0;\n  transition: height 0.3s linear;\n  max-height: 20px;\n}\n.ton-collapsible-wrapper.collapsed {\n  visibility: hidden;\n}\n.ton-collapsible-wrapper.collapsed .ton-child {\n  opacity: 0;\n  transition: opacity 0.6s linear;\n}\n"],"names":[],"version":3,"file":"main.css.map"}
+{"mappings":"AAAA;;;;;AAKA;;;;;;;;AAQA;;;;;AAKA;;;;AAIA;;;;;;;;;AASA;;;;AAIA;;;;;;;;;;;;;;;;AAgBA;;;;AAIA;;;;;;;;;;;;;AAaA;;;;;AAKA;;;;;;;AAOA;;;;;;;AAMA;;;;;;;AAQA;;;;;;;;;;;AAUA;;;;;;;AASA;;;;;;AAKA;;;;AAGA","sources":["src/components/TreeNode.css"],"sourcesContent":[":root {\n  --ton-transition-time: 0.3s;\n  --ton-long-transition-time: 0.6s;\n}\n\n.tree-of-nodes {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 100%;\n  gap: 1px;\n}\n\n.ton-checkbox {\n  margin-right: 3px;\n  margin-top: 3px;\n}\n\n.ton-expander {\n  margin: 0;\n}\n\n.ton-node {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: 100%;\n  max-width: 100%;\n  height: 30px;\n}\n\n.ton-label {\n  height: 26px;\n}\n\n.ton-label-span {\n  border-radius: 3px;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: inline-block;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 24px;\n  overflow: hidden;\n  padding: 1px 3px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.ton-rename-holder {\n  width: 100%;\n}\n\n.ton-rename {\n  border-radius: 3px;\n  border: 1px dotted black;\n  box-sizing: border-box;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 24px;\n  min-width: 0;\n  padding: 1px 3px;\n  width: 100%;\n}\n\n.ton-rename:focus {\n  outline: none;\n  box-shadow: none;\n}\n\n.ton-child {\n  margin-left: 16px;\n  display: block;\n  opacity: 1;\n  transition: opacity var(--ton-long-transition-time) linear;\n}\n\n.ton-collapsible-wrapper {\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n  max-width: 100%;\n}\n.ton-collapsible-wrapper:after {\n  content: \"\";\n  height: 1px;\n  transition:\n    height var(--ton-transition-time) linear,\n    max-height 0s var(--ton-transition-time) linear;\n  max-height: 0px;\n}\n.ton-collapsible {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  transition: margin-bottom var(--ton-transition-time) cubic-bezier(0, 0, 0, 1);\n  margin-top: 1px;\n  margin-bottom: 1px;\n  max-height: 10000px;\n  width: 100%;\n}\n.ton-collapsible-wrapper.collapsed > .ton-collapsible {\n  margin-bottom: -2000px;\n  transition:\n    margin-bottom var(--ton-transition-time) cubic-bezier(1, 0, 1, 1),\n    visibility 0s var(--ton-transition-time),\n    max-height 0s var(--ton-transition-time);\n  visibility: hidden;\n  max-height: 0;\n}\n.ton-collapsible-wrapper.collapsed:after {\n  height: 0;\n  transition: height var(--ton-transition-time) linear;\n  max-height: 20px;\n}\n.ton-collapsible-wrapper.collapsed {\n  visibility: hidden;\n}\n.ton-collapsible-wrapper.collapsed .ton-child {\n  opacity: 0;\n  transition: opacity var(--ton-long-transition-time) linear;\n}\n"],"names":[],"version":3,"file":"main.css.map"}

package/dist/cjs/main.js

@@ -3,7 +3,6 @@ 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$swchelperscjs_object_spreadcjs = require("@swc/helpers/cjs/_object_spread.cjs");
 var $gTuX4$reactbootstrap = require("react-bootstrap");
 
 
@@ -27,10 +26,6 @@ function $parcel$exportWildcard(dest, source) {
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
 var $a68bd8a6c0fd98c2$exports = {};
 
 $parcel$export($a68bd8a6c0fd98c2$exports, "TreeNode", function () { return $a56aac35d4408806$export$2eba8ec3a333fdbb; });
@@ -75,54 +70,48 @@ const $ff9cca1fe8f6b24e$export$29ec378200e05207 = (0, $gTuX4$react.createContext
 
 
 
-
-const $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$interopDefault($gTuX4$react))).forwardRef(({ id: id, value: value, editing: editing, saving: saving, setValue: setValue, sendEscape: sendEscape, style: style, spellCheck: spellCheck = "true" }, ref)=>{
-    $176d21a51def1fce$export$14f190ac910bde69.displayName = "WordEntry";
-    const currentStyle = (0, $gTuX4$react.useMemo)(()=>{
-        return (0, $gTuX4$swchelperscjs_object_spreadcjs._)({
-            display: "inline-block",
-            padding: "1px",
-            paddingLeft: "3px",
-            paddingRight: "3px",
-            border: "1px",
-            borderRadius: "3px"
-        }, style);
-    }, [
-        style
-    ]);
+const $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, $gTuX4$react.forwardRef)(({ id: id, className: className, value: value, editing: editing, saving: saving, setValue: setValue, sendEscape: sendEscape, style: style, spellCheck: spellCheck = "true" }, ref)=>{
     const [currentValue, setCurrentValue] = (0, $gTuX4$react.useState)(value !== null && value !== void 0 ? value : "");
     (0, $gTuX4$react.useEffect)(()=>{
         setCurrentValue(value !== null && value !== void 0 ? value : "");
     }, [
         value
     ]);
-    const returnData = (0, $gTuX4$react.useCallback)(()=>{
-        setValue === null || setValue === void 0 ? void 0 : setValue(currentValue);
-    }, [
-        currentValue,
-        setValue
-    ]);
-    const keyPress = (0, $gTuX4$react.useCallback)((e)=>{
+    const keyPress = (e)=>{
         if (e.code === "Escape") {
             setCurrentValue(value !== null && value !== void 0 ? value : "");
             sendEscape === null || sendEscape === void 0 ? void 0 : sendEscape();
-        } else if (e.code === "Enter") returnData();
+        } else if (e.code === "Enter") setValue === null || setValue === void 0 ? void 0 : setValue(currentValue);
+    };
+    // Add window onMouseDown event to stop events when editing
+    (0, $gTuX4$react.useEffect)(()=>{
+        const handleMouseDown = (e)=>{
+            const target = e.target;
+            if (editing && target.id !== `${id}` && target.id !== `${id}-holder` && target.id !== `${id}-spinner` && target.className !== "ton-rename") {
+                e.preventDefault();
+                e.stopPropagation();
+                setValue === null || setValue === void 0 ? void 0 : setValue(currentValue);
+            }
+        };
+        window.addEventListener("mousedown", handleMouseDown);
+        return ()=>{
+            window.removeEventListener("mousedown", handleMouseDown);
+        };
     }, [
-        returnData,
-        sendEscape,
-        value
+        currentValue,
+        editing,
+        id,
+        setValue
     ]);
-    // Simple if not editing
-    if (!editing) return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
+    return !editing ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
         className: "ton-label-span",
-        style: currentStyle,
+        style: style,
         id: `${id}`,
         children: value ? value : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactjsxruntime.Fragment), {
             children: "\xa0"
         })
-    });
-    return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
-        style: currentStyle,
+    }) : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)("div", {
+        style: style,
         id: `${id}-holder`,
         className: "ton-rename-holder",
         children: [
@@ -137,47 +126,35 @@ const $176d21a51def1fce$export$14f190ac910bde69 = /*#__PURE__*/ (0, ($parcel$int
                 id: String(id),
                 ref: ref,
                 type: "text",
-                className: "ton-rename",
+                className: [
+                    "ton-rename",
+                    className
+                ].filter(Boolean).join(" "),
                 value: currentValue,
                 disabled: saving,
                 onChange: (e)=>setCurrentValue(e.currentTarget.value),
-                onBlur: returnData,
+                onBlur: (e)=>setValue === null || setValue === void 0 ? void 0 : setValue(e.currentTarget.value),
                 onKeyDownCapture: keyPress
             })
         ]
     });
 });
+$176d21a51def1fce$export$14f190ac910bde69.displayName = "WordEntry";
 
 
 const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemove, canRename: canRename, canAddChildren: canAddChildren, canRemoveChildren: canRemoveChildren, canRenameChildren: canRenameChildren })=>{
     // Contexts
     const treeContext = (0, $gTuX4$react.useContext)((0, $ff9cca1fe8f6b24e$export$29ec378200e05207));
     // Node information
-    const thisNode = (0, $gTuX4$react.useMemo)(()=>treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList.find((n)=>n.id === id), [
-        id,
-        treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList
-    ]);
-    const childNodes = (0, $gTuX4$react.useMemo)(()=>treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList.filter((n)=>n.parentId === id), [
-        id,
-        treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList
-    ]);
-    const descendents = (0, $gTuX4$react.useMemo)(()=>{
-        var _treeContext_nodeList;
-        return (0, $a19ef65643ae39e0$export$bd923365b402cb04)(id, (_treeContext_nodeList = treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList) !== null && _treeContext_nodeList !== void 0 ? _treeContext_nodeList : []);
-    }, [
-        id,
-        treeContext
-    ]);
+    const thisNode = treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList.find((n)=>n.id === id);
+    const childNodes = treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList.filter((n)=>n.parentId === id);
+    var _treeContext_nodeList;
+    const descendents = (0, $a19ef65643ae39e0$export$bd923365b402cb04)(id, (_treeContext_nodeList = treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList) !== null && _treeContext_nodeList !== void 0 ? _treeContext_nodeList : []);
     // State
     const [error, setError] = (0, $gTuX4$react.useState)(false);
-    const [errorText, setErrotText] = (0, $gTuX4$react.useState)("");
-    const expanded = (0, $gTuX4$react.useMemo)(()=>{
-        var _treeContext_expandedNodes_findIndex;
-        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 === null || treeContext === void 0 ? void 0 : treeContext.expandedNodes
-    ]);
+    const [errorText, setErrorText] = (0, $gTuX4$react.useState)("");
+    var _treeContext_expandedNodes_findIndex;
+    const expanded = ((_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;
     // Checkbox
     const checkRef = (0, $gTuX4$react.useRef)(null);
     (0, $gTuX4$react.useEffect)(()=>{
@@ -199,13 +176,8 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
         treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected
     ]);
     // Apply selected border
-    const currentBorder = (0, $gTuX4$react.useMemo)(()=>{
-        return (treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(id)) ? "1px solid black" : "";
-    }, [
-        id,
-        treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected
-    ]);
-    const nodeColour = (0, $gTuX4$react.useMemo)(()=>{
+    const currentBorder = (treeContext === null || treeContext === void 0 ? void 0 : treeContext.selected.includes(id)) ? "1px solid black" : "";
+    const nodeColour = (()=>{
         if (treeContext && treeContext.selected) {
             const anc = (0, $580f9b3e262282c9$export$c6fd3ab3f44300d0)(treeContext.selected, [], treeContext === null || treeContext === void 0 ? void 0 : treeContext.nodeList).map((n)=>n.id);
             if ([
@@ -214,10 +186,7 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
             ].includes(id)) return treeContext.nodeHighlight;
         }
         return;
-    }, [
-        id,
-        treeContext
-    ]);
+    })();
     // New node parameters
     const newNameRef = (0, $gTuX4$react.useRef)(null);
     const [showNewNode, setShowNewNode] = (0, $gTuX4$react.useState)(false);
@@ -227,95 +196,66 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
     const [renaming, setRenaming] = (0, $gTuX4$react.useState)(false);
     const [updatingNode, setUpdatingNode] = (0, $gTuX4$react.useState)(false);
     // Context functions
-    const handleReturn = (0, $gTuX4$react.useCallback)((ret)=>{
+    const handleReturn = (ret)=>{
         if (!ret.success) {
             setError(true);
             var _ret_ErrorText;
-            setErrotText((_ret_ErrorText = ret.ErrorText) !== null && _ret_ErrorText !== void 0 ? _ret_ErrorText : "An unknown error has occured");
+            setErrorText((_ret_ErrorText = ret.ErrorText) !== null && _ret_ErrorText !== void 0 ? _ret_ErrorText : "An unknown error has occured");
         } else {
             setError(false);
-            setErrotText("");
+            setErrorText("");
         }
-    }, []);
-    const confirmNewNode = (0, $gTuX4$react.useCallback)(async (label)=>{
+    };
+    const confirmNewNode = async (label)=>{
         setSavingNewNode(true);
         if (treeContext === null || treeContext === void 0 ? void 0 : treeContext.onAddChild) handleReturn(await treeContext.onAddChild(id, label));
         setSavingNewNode(false);
         setShowNewNode(false);
-    }, [
-        handleReturn,
-        id,
-        treeContext
-    ]);
-    const renameNode = (0, $gTuX4$react.useCallback)(async (newLabel)=>{
+    };
+    const renameNode = async (newLabel)=>{
         setRenaming(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, $gTuX4$react.useCallback)(async ()=>{
+    };
+    const deleteThis = async ()=>{
         if (treeContext === null || treeContext === void 0 ? void 0 : treeContext.onRemove) {
             setUpdatingNode(true);
             handleReturn(await treeContext.onRemove(id));
             setUpdatingNode(false);
         }
-    }, [
-        handleReturn,
-        id,
-        treeContext
-    ]);
+    };
     // Context actions
-    const addChild = (0, $gTuX4$react.useCallback)(()=>{
+    const addChild = ()=>{
         var _treeContext_handleExpandClick;
         setShowNewNode(true);
         treeContext === null || treeContext === void 0 ? void 0 : (_treeContext_handleExpandClick = treeContext.handleExpandClick) === null || _treeContext_handleExpandClick === void 0 ? void 0 : _treeContext_handleExpandClick.call(treeContext, id, true);
-    }, [
-        id,
-        treeContext
-    ]);
-    (0, $gTuX4$react.useEffect)(()=>{
-        if (showNewNode === true && newNameRef.current) newNameRef.current.focus();
-    }, [
-        showNewNode
-    ]);
-    const renameThis = (0, $gTuX4$react.useCallback)(()=>{
+    };
+    const renameThis = ()=>{
         var _treeContext_handleSelect;
         setRenaming(true);
         treeContext === null || treeContext === void 0 ? void 0 : (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, id);
-    }, [
-        id,
-        treeContext
-    ]);
+    };
     // Context menu
-    const menuItems = (0, $gTuX4$react.useMemo)(()=>{
-        const menuItems = [];
-        if (canAddChildren) menuItems.push({
-            label: "Add",
-            action: addChild
-        });
-        if (canRename) menuItems.push({
-            label: "Rename",
-            action: renameThis
-        });
-        if (canRemove && (childNodes === undefined || childNodes.length === 0)) menuItems.push({
-            label: "Delete",
-            action: deleteThis
-        });
-        return menuItems;
+    const menuItems = [];
+    if (canAddChildren) menuItems.push({
+        label: "Add",
+        action: addChild
+    });
+    if (canRename) menuItems.push({
+        label: "Rename",
+        action: renameThis
+    });
+    if (canRemove && (childNodes === undefined || childNodes.length === 0)) menuItems.push({
+        label: "Delete",
+        action: deleteThis
+    });
+    (0, $gTuX4$react.useEffect)(()=>{
+        if (showNewNode === true && newNameRef.current) newNameRef.current.focus();
     }, [
-        addChild,
-        canAddChildren,
-        canRemove,
-        canRename,
-        childNodes,
-        deleteThis,
-        renameThis
+        showNewNode
     ]);
     // Return node
     return !treeContext ? null : /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsxs)((0, $gTuX4$reactjsxruntime.Fragment), {
@@ -348,10 +288,10 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
                                 id: `${treeContext.id}-treenode-checkbox-${id}`,
                                 onClick: ()=>{
                                     var _treeContext_handleSelect;
-                                    return treeContext === null || treeContext === void 0 ? void 0 : (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, descendents);
+                                    return (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, descendents);
                                 }
                             }),
-                            childNodes !== undefined && childNodes.length > 0 ? !expanded ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRightFill), {
+                            childNodes && childNodes.length > 0 ? !expanded ? /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $gTuX4$reactbootstrapicons.CaretRightFill), {
                                 id: `${treeContext.id}-treenode-caret-${id}`,
                                 style: {
                                     width: "16px",
@@ -394,7 +334,8 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
                                 },
                                 onClickCapture: ()=>{
                                     var _treeContext_handleSelect;
-                                    return (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, id);
+                                    if (!treeContext.expandedNodes.includes(id)) treeContext.handleExpandClick(id);
+                                    (_treeContext_handleSelect = treeContext.handleSelect) === null || _treeContext_handleSelect === void 0 ? void 0 : _treeContext_handleSelect.call(treeContext, id);
                                 },
                                 onFocusCapture: ()=>{
                                     var _treeContext_handleSelect;
@@ -402,6 +343,7 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
                                 },
                                 children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $176d21a51def1fce$export$14f190ac910bde69), {
                                     id: `${treeContext.id}-treenode-entry-${id}`,
+                                    className: currentBorder ? "selected" : "",
                                     ref: currentNameRef,
                                     value: thisNode.label,
                                     editing: renaming,
@@ -420,21 +362,9 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
                     })
                 })
             }),
-            showNewNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $176d21a51def1fce$export$14f190ac910bde69), {
-                style: {
-                    marginLeft: "14px"
-                },
-                id: `treenode-new-${id}`,
-                ref: newNameRef,
-                editing: true,
-                setValue: (ret)=>confirmNewNode(ret),
-                saving: savingNewNode,
-                sendEscape: ()=>setShowNewNode(false),
-                spellCheck: treeContext.spellCheck
-            }),
-            childNodes !== undefined && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
-                className: `ton-collapsible-wrapper ${expanded ? "" : "collapsed"}`,
-                children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
+            childNodes && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
+                className: `ton-collapsible-wrapper ${expanded && childNodes.length > 0 ? "" : "collapsed"}`,
+                children: childNodes.length > 0 && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
                     className: "ton-collapsible",
                     children: childNodes.map((h)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("span", {
                             id: `${treeContext.id}-treenode-child-${h.id}`,
@@ -449,6 +379,18 @@ const $a56aac35d4408806$export$2eba8ec3a333fdbb = ({ id: id, canRemove: canRemov
                             })
                         }, h.id))
                 })
+            }),
+            showNewNode && /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $176d21a51def1fce$export$14f190ac910bde69), {
+                style: {
+                    marginLeft: "14px"
+                },
+                id: `treenode-new-${id}`,
+                ref: newNameRef,
+                editing: true,
+                setValue: (ret)=>confirmNewNode(ret),
+                saving: savingNewNode,
+                sendEscape: ()=>setShowNewNode(false),
+                spellCheck: treeContext.spellCheck
             })
         ]
     });
@@ -469,26 +411,28 @@ const $f31429c9cc6d3bce$export$40c47a7ac5f85aba = (nodeList, selected, expandedN
 
 
 
-const $9becaaec3a803ae7$export$5580fff3e08a8be5 = ({ id: id, nodeList: nodeList, roots: roots, selected: selected = [], showCheckBox: showCheckBox = false, handleSelect: handleSelect, onAdd: onAdd, onRename: onRename, onRemove: onRemove, canRemoveRoot: canRemoveRoot = false, canRenameRoot: canRenameRoot = false, canAddChildren: canAddChildren = false, canRemoveChildren: canRemoveChildren = false, canRenameChildren: canRenameChildren = false, nodeHighlight: nodeHighlight = "red", textHighlight: textHighlight = "rgba(255, 0, 0, 0.2)", spellCheck: spellCheck = "true" })=>{
+const $9becaaec3a803ae7$export$5580fff3e08a8be5 = ({ alwaysShowSelected: alwaysShowSelected = "first", canAddChildren: canAddChildren = false, canRemoveChildren: canRemoveChildren = false, canRemoveRoot: canRemoveRoot = false, canRenameChildren: canRenameChildren = false, canRenameRoot: canRenameRoot = false, handleSelect: handleSelect, id: id, nodeHighlight: nodeHighlight = "red", nodeList: nodeList, onAdd: onAdd, onRemove: onRemove, onRename: onRename, roots: roots, selected: selected = [], showCheckBox: showCheckBox = false, spellCheck: spellCheck = "true", textHighlight: textHighlight = "rgba(255, 0, 0, 0.2)" })=>{
+    const [firstRender, setFirstRender] = (0, $gTuX4$react.useState)(alwaysShowSelected === "first");
     const [expandedNodes, setExpandedNodes] = (0, $gTuX4$react.useState)([]);
-    const selectedArray = (0, $gTuX4$react.useMemo)(()=>Array.isArray(selected) ? selected : [
-            selected
-        ], [
-        selected
-    ]);
     (0, $gTuX4$react.useEffect)(()=>{
-        if (selectedArray.length > 0) {
+        const selectedArray = Array.isArray(selected) ? selected : [
+            selected
+        ];
+        if ((alwaysShowSelected === "always" || firstRender) && selectedArray.length > 0) {
             // Check all nodes are showing that should be
             const shouldExpand = (0, $f31429c9cc6d3bce$export$40c47a7ac5f85aba)(nodeList, selectedArray, expandedNodes);
             if (shouldExpand.filter((n)=>!expandedNodes.includes(n)).length > 0) setExpandedNodes(shouldExpand);
+            setFirstRender(false);
         }
     }, [
+        alwaysShowSelected,
+        firstRender,
         expandedNodes,
         nodeList,
-        selectedArray
+        selected
     ]);
     // Change expansion and update contexts
-    const changeExpand = (0, $gTuX4$react.useCallback)((eKey, force)=>{
+    const changeExpand = (eKey, force)=>{
         const newExpandedNodes = [
             ...expandedNodes
         ];
@@ -496,27 +440,27 @@ const $9becaaec3a803ae7$export$5580fff3e08a8be5 = ({ id: id, nodeList: nodeList,
         if (ix === -1 && force === undefined || force === true) newExpandedNodes.push(eKey);
         else newExpandedNodes.splice(ix, 1);
         setExpandedNodes(newExpandedNodes);
-    }, [
-        expandedNodes
-    ]);
+    };
     return /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)("div", {
         id: id,
         className: "tree-of-nodes",
         children: /*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $ff9cca1fe8f6b24e$export$29ec378200e05207).Provider, {
             value: {
                 id: id,
-                nodeList: nodeList,
-                selected: selectedArray,
-                showCheckBox: showCheckBox,
-                handleSelect: handleSelect,
                 expandedNodes: expandedNodes,
                 handleExpandClick: (r, f)=>changeExpand(r, f),
+                handleSelect: handleSelect,
+                nodeHighlight: nodeHighlight,
+                nodeList: nodeList,
                 onAddChild: onAdd,
-                onRename: onRename,
                 onRemove: onRemove,
-                nodeHighlight: nodeHighlight,
-                textHighlight: textHighlight,
-                spellCheck: spellCheck
+                onRename: onRename,
+                selected: Array.isArray(selected) ? selected : [
+                    selected
+                ],
+                showCheckBox: showCheckBox,
+                spellCheck: spellCheck,
+                textHighlight: textHighlight
             },
             children: roots.map((r)=>/*#__PURE__*/ (0, $gTuX4$reactjsxruntime.jsx)((0, $a56aac35d4408806$export$2eba8ec3a333fdbb), {
                     id: r,