@asup/tree-of-nodes 0.9.1 → 1.0.1

package/README.md

@@ -1,5 +1,138 @@
-# Tree of nodes for REACT
+[npm]: https://img.shields.io/npm/v/@asup/tree-of-nodes
+[npm-url]: https://www.npmjs.com/package/@asup/tree-of-nodes
+[size]: https://packagephobia.now.sh/badge?p=@asup/tree-of-nodes
+[size-url]: https://packagephobia.now.sh/result?p=@asup/tree-of-nodes
+
+[![npm][npm]][npm-url]
+[![size][size]][size-url]
+![npm bundle size](https://img.shields.io/bundlephobia/min/@asup/simple-table)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://raw.githubusercontent.com/PaulDThomas/tree-of-nodes/master/LICENCE)
+
+# @asup/tree-of-notes
 
 REACT treeview, because I couldn't quite find what I wanted.
 
 Works with/needs bootstrap, react-bootstrap, react-bootstrap-icons.
+Uses a context menu to facilitate Add/Rename/Remove actions.
+
+## Installation
+
+```
+# with npm
+npm install @asup/tree-of-nodes
+```
+
+## Tree-of-nodes Usage
+
+```
+import { iNodeUpdate, TreeNodeData, TreeOfNodes } from '@asup/tree-of-nodes';
+import '@asup/tree-of-nodes/dist/style.css';
+
+... inside REACT component
+
+<TreeOfNodes<T>
+  id: string;
+  nodeList: TreeNodeData<T>[];
+  roots: Key[];
+  selectedId?: Key;
+  handleSelect?: (ret: Key) => void;
+  onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
+  onRemove?: (childId: Key) => Promise<iNodeUpdate>;
+  onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;
+  canAddRoot?: boolean;
+  canRemoveRoot?: boolean;
+  canRenameRoot?: boolean;
+  canAddChildren?: boolean;
+  canRemoveChildren?: boolean;
+  canRenameChildren?: boolean;
+  />
+```
+
+The component expects a list of nodes of type `TreeNodeData<T>` with unique `Key`s.
+
+## Properties
+
+| Prop              | Description                                                                                     |      Default      |
+| :---------------- | :---------------------------------------------------------------------------------------------- | :---------------: |
+| id                | HTML id attribute                                                                               |                   |
+| nodeList          | Array of node data                                                                              |                   |
+| roots             | One or more node Keys to use as the root of the tree                                            |
+| selectedId        | Currently selectedId                                                                            |                   |
+| handleSelect      | Function called when a node is clicked (selected), this should be used to update the selectedId | `() => {return;}` |
+| onAdd             | Function called when a new node is added, this should be used to update the nodeList            |                   |
+| onRemove          | Function called when a node is removed, this should be used to update the nodeList              |                   |
+| onRename          | Function called when a node is renamed, this should be used to update the nodeList              |                   |
+| ~~canAddRoot~~    | Not currently implemented                                                                       |                   |
+| canRemoveRoot     | Allows removal of a root node in combination with specification of onRemove function            |      `false`      |
+| canRenameRoot     | Allows renaming of a root node in combination with specification of onRename function           |      `false`      |
+| canAddChildren    | Allows addition of children in combination with specification of onAdd function                 |      `false`      |
+| canRemoveChildren | Allows renaming of non-root nodes in combination with specification of onRemove function        |      `false`      |
+| canRenameChildren | Allows renaming of non-root nodes in combination with specification of onRename function        |      `false`      |
+
+### TreeNodeData
+
+Required format for list of nodes, includes a holder for any type of data, which is there specified in the `TreeOfNodes` specification.
+
+```
+export type TreeNodeData<T> = {
+  id: Key;
+  label: string;
+  parentId?: Key;
+  data: T;
+};
+```
+
+### iNodeUpdate
+
+Use this format to return from update functions.
+
+```
+export interface iNodeUpdate {
+  success: boolean;
+  ErrorText?: string;
+}
+```
+
+## Context Menu Usage
+
+Inbuilt context menu provider, takes a list of available actions and renders a context menu on appropriate click.
+
+```
+import { ContextMenuProvider, iMenuItem } from '@asup/tree-of-nodes';
+import '@asup/tree-of-nodes/dist/style.css';
+
+... inside REACT component
+
+<ContextMenuProvider>
+
+  <SomeChild
+
+    const showMenu () = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const menuItems: iMenuItem[] = [
+        { label: 'Item 1', action: item1Function },
+        { label: 'Item 2', action: item2Function },
+        ...
+      ];
+      menuContext.set && menuContext.set({
+          visible: true,
+          y: e.pageY,
+          x: e.pageX,
+          menuItems: menuItems,
+        });
+      }
+    },
+    [...]);
+
+    return (
+      <div onContextMenu={showMenu}>
+      </div>
+    );
+  >
+
+</ContextMenuProvider>
+```
+
+Add an `onContextMenu` action to an element inside the `ContextMenuProvider`, and create a corresponding function that loads the menuItems array and then sets it to visible.

package/dist/__mocks__/mockNodes.d.ts

@@ -0,0 +1,4 @@
+import { TreeNodeData } from 'components/TreeOfNodesContext';
+export declare const mockNodes: TreeNodeData<{
+    value: number;
+} | number | undefined>[];

package/dist/__mocks__/styleMock.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/__tests__/ContextMenu.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/TreeNode.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/TreeOfNodes.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/WordEntry.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/__mocks__/mockNodes.d.ts

@@ -0,0 +1,4 @@
+import { TreeNodeData } from 'components/TreeOfNodesContext';
+export declare const mockNodes: TreeNodeData<{
+    value: number;
+} | number | undefined>[];

package/dist/cjs/__mocks__/styleMock.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/cjs/__tests__/ContextMenu.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/__tests__/TreeNode.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/__tests__/TreeOfNodes.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/__tests__/WordEntry.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/TreeOfNodes.d.ts

@@ -1,20 +1,7 @@
 import { Key } from 'react';
-export declare type TreeNodeBase = {
-    id: Key;
-    label: string;
-    parentId?: Key;
-};
-export declare type TreeNodeData<T> = {
-    id: Key;
-    label: string;
-    parentId?: Key;
-    data: T;
-};
-export interface iNodeUpdate {
-    success: boolean;
-    ErrorText?: string;
-}
+import { iNodeUpdate, TreeNodeData } from './TreeOfNodesContext';
 interface iTreeOfNodes<T> {
+    id: string;
     nodeList: TreeNodeData<T>[];
     roots: Key[];
     selectedId?: Key;
@@ -29,16 +16,5 @@ interface iTreeOfNodes<T> {
     canRemoveChildren?: boolean;
     canRenameChildren?: boolean;
 }
-declare type TreeOfNodesContextData<T> = {
-    nodeList: TreeNodeData<T>[];
-    selectedId?: Key;
-    handleSelect?: (ret: Key) => void;
-    expandedNodes?: Key[];
-    handleExpandClick?: (ret: Key, force?: boolean) => void;
-    onAddChild?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
-    onRename?: (id: Key, newName: string) => Promise<iNodeUpdate>;
-    onRemove?: (id: Key) => Promise<iNodeUpdate>;
-};
-export declare const TreeOfNodesContext: import("react").Context<TreeOfNodesContextData<unknown>>;
-export declare const TreeOfNodes: <T extends unknown>({ nodeList, roots, canRemoveRoot, canRenameRoot, canAddChildren, canRemoveChildren, canRenameChildren, selectedId, handleSelect, onAdd, onRename, onRemove, }: iTreeOfNodes<T>) => JSX.Element;
+export declare const TreeOfNodes: <T extends unknown>({ id, nodeList, roots, canRemoveRoot, canRenameRoot, canAddChildren, canRemoveChildren, canRenameChildren, selectedId, handleSelect, onAdd, onRename, onRemove, }: iTreeOfNodes<T>) => JSX.Element;
 export {};

package/dist/cjs/components/TreeOfNodesContext.d.ts

@@ -0,0 +1,28 @@
+import { Key } from 'react';
+export interface iNodeUpdate {
+    success: boolean;
+    ErrorText?: string;
+}
+export interface TreeNodeBase {
+    id: Key;
+    label: string;
+    parentId?: Key;
+}
+export interface TreeNodeData<T> {
+    id: Key;
+    label: string;
+    parentId?: Key;
+    data: T;
+}
+export interface TreeOfNodesContextData<T> {
+    id: string;
+    nodeList: TreeNodeData<T>[];
+    selectedId?: Key;
+    handleSelect?: (ret: Key) => void;
+    expandedNodes?: Key[];
+    handleExpandClick?: (ret: Key, force?: boolean) => void;
+    onAddChild?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
+    onRename?: (id: Key, newName: string) => Promise<iNodeUpdate>;
+    onRemove?: (id: Key) => Promise<iNodeUpdate>;
+}
+export declare const TreeOfNodesContext: import("react").Context<TreeOfNodesContextData<unknown>>;

package/dist/cjs/components/WordEntry.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { Key } from 'react';
 interface WordEntryProps {
-    id?: string;
+    id: Key;
     value?: string;
     editing?: boolean;
     saving?: boolean;

package/dist/cjs/components/index.d.ts

@@ -1,7 +1,8 @@
 import { ContextMenu } from './ContextMenu';
 import { ContextMenuProvider } from './ContextMenuProvider';
 import { TreeNode } from './TreeNode';
-import { iNodeUpdate, TreeNodeBase, TreeNodeData, TreeOfNodes } from './TreeOfNodes';
+import { TreeOfNodes } from './TreeOfNodes';
+import { iNodeUpdate, TreeNodeBase, TreeNodeData } from './TreeOfNodesContext';
 import { WordEntry } from './WordEntry';
 export { ContextMenu, ContextMenuProvider, TreeNode, TreeOfNodes, WordEntry };
 export type { TreeNodeBase, TreeNodeData, iNodeUpdate };

package/dist/cjs/main.js

@@ -28,8 +28,7 @@ const ContextMenu = React.forwardRef(({ entries, visible, xPos, yPos }, ref) =>
             top: `${yPos}px`,
             left: `${xPos}px`,
         }, children: entries.map((e, i) => (jsxRuntime.jsx("div", { className: 'context-menu-item', onClick: () => {
-                if (typeof e.action === 'function')
-                    e.action();
+                e.action && e.action();
             }, children: e.label ?? '' }, i))) }));
 });
 
@@ -1342,7 +1341,7 @@ if (process.env.NODE_ENV !== 'production') {
 const Spinner = /*#__PURE__*/React__namespace.forwardRef(({
   bsPrefix,
   variant,
-  animation,
+  animation = 'border',
   size,
   // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
   as: Component = 'div',
@@ -1505,79 +1504,46 @@ ExclamationCircleFill.defaultProps = {
 var ExclamationCircleFill$1 = ExclamationCircleFill;
 
 const TreeOfNodesContext = React.createContext({
+    id: 'tree-of-nodes',
     nodeList: [],
-});
-const TreeOfNodes = ({ nodeList, roots, 
-// canAddRoot = false,
-canRemoveRoot = false, canRenameRoot = false, canAddChildren = false, canRemoveChildren = false, canRenameChildren = false, selectedId, handleSelect = () => {
-    return;
-}, onAdd, onRename, onRemove, }) => {
-    const [expandedNodes, setExpandedNodes] = React.useState([]);
-    // Change expansion and update context
-    const changeExpand = React.useCallback((eKey, force) => {
-        const newExpandedNodes = [...expandedNodes];
-        const ix = newExpandedNodes.findIndex((nKey) => nKey === eKey);
-        if ((ix === -1 && force === undefined) || force === true)
-            newExpandedNodes.push(eKey);
-        else
-            newExpandedNodes.splice(ix, 1);
-        setExpandedNodes(newExpandedNodes);
-    }, [expandedNodes]);
-    return (jsxRuntime.jsx(ContextMenuProvider, { children: jsxRuntime.jsx(TreeOfNodesContext.Provider, { value: {
-                nodeList,
-                selectedId,
-                handleSelect,
-                expandedNodes,
-                handleExpandClick: (r, f) => changeExpand(r, f),
-                onAddChild: onAdd,
-                onRename,
-                onRemove,
-            }, children: roots.map((r) => (jsxRuntime.jsx(TreeNode, { id: r, canRemove: canRemoveRoot, canAddChildren: canAddChildren, canRename: canRenameRoot, canRemoveChildren: canRemoveChildren, canRenameChildren: canRenameChildren }, r))) }) }));
-};
+});
 
 const WordEntry = React.forwardRef(({ id, value, editing, saving, setValue, sendEscape, style }, ref) => {
-    const [currentStyle, setCurrentStyle] = React.useState({
-        display: 'inline-block',
-    });
     WordEntry.displayName = 'WordEntry';
+    const currentStyle = React.useMemo(() => {
+        return {
+            display: 'inline-block',
+            padding: '1px',
+            paddingLeft: '3px',
+            paddingRight: '3px',
+            border: '1px',
+            borderRadius: '3px',
+            ...style,
+        };
+    }, [style]);
     const [currentValue, setCurrentValue] = React.useState(value ?? '');
     React.useEffect(() => {
         setCurrentValue(value ?? '');
     }, [value]);
     const returnData = React.useCallback(() => {
-        if (typeof setValue !== 'function')
-            return;
-        setValue(currentValue);
+        setValue && setValue(currentValue);
     }, [currentValue, setValue]);
     const keyPress = React.useCallback((e) => {
         if (e.code === 'Escape') {
             setCurrentValue(value ?? '');
-            if (typeof sendEscape === 'function')
-                sendEscape();
+            sendEscape && sendEscape();
         }
         else if (e.code === 'Enter') {
             returnData();
         }
     }, [returnData, sendEscape, value]);
-    React.useEffect(() => {
-        setCurrentStyle({
-            padding: '1px',
-            paddingLeft: '3px',
-            paddingRight: '3px',
-            border: '1px',
-            borderRadius: '3px',
-            display: 'inline-block',
-            ...style,
-        });
-    }, [style]);
     // Simple if not editing
     if (!editing) {
-        return jsxRuntime.jsx("span", { style: currentStyle, children: value });
+        return (jsxRuntime.jsx("span", { style: currentStyle, id: String(id), children: value }));
     }
-    return (jsxRuntime.jsxs("div", { style: currentStyle, id: id, children: [saving && (jsxRuntime.jsx(Spinner$1, { id: id ? `${id}-spinner` : undefined, size: 'sm', animation: 'border' })), jsxRuntime.jsx("input", { id: id ? `${id}-input` : undefined, ref: ref, type: 'text', style: {
+    return (jsxRuntime.jsxs("div", { style: currentStyle, id: `${id}-holder`, children: [saving && (jsxRuntime.jsx(Spinner$1, { id: `${id}-spinner`, size: 'sm', animation: 'border' })), jsxRuntime.jsx("input", { id: String(id), ref: ref, type: 'text', style: {
                     lineHeight: '0.75rem',
-                    border: editing ? '1px dotted black' : saving ? '' : '1px dotted grey',
-                    margin: !saving && !editing ? '1px' : '',
+                    border: '1px dotted black',
                     width: 'auto',
                     minWidth: '0',
                 }, value: currentValue, disabled: saving, onChange: (e) => setCurrentValue(e.currentTarget.value), onBlur: returnData, onKeyDownCapture: keyPress })] }));
@@ -1590,7 +1556,7 @@ const TreeNode = ({ id, canRemove, canRename, canAddChildren, canRemoveChildren,
     // Node information
     const thisNode = React.useMemo(() => treeContext.nodeList.find((n) => n.id === id), [id, treeContext.nodeList]);
     const childNodes = React.useMemo(() => treeContext.nodeList.filter((n) => n.parentId === id), [id, treeContext.nodeList]);
-    // Axios state
+    // State
     const loading = React.useMemo(() => treeContext.nodeList.findIndex((n) => n.id === id) === -1, [id, treeContext.nodeList]);
     const [error, setError] = React.useState(false);
     const [errorText, setErrotText] = React.useState(null);
@@ -1638,14 +1604,12 @@ const TreeNode = ({ id, canRemove, canRename, canAddChildren, canRemoveChildren,
     }, [handleReturn, id, treeContext]);
     const deleteThis = React.useCallback(async () => {
         setUpdatingNode(true);
-        if (thisNode === undefined)
-            return;
         if (treeContext.onRemove) {
             handleReturn(await treeContext.onRemove(id));
         }
         setUpdatingNode(false);
-    }, [handleReturn, id, thisNode, treeContext]);
-    // // Context actions
+    }, [handleReturn, id, treeContext]);
+    // Context actions
     const addChild = React.useCallback(() => {
         if (menuContext.set) {
             menuContext.set({ visible: false });
@@ -1678,12 +1642,15 @@ const TreeNode = ({ id, canRemove, canRename, canAddChildren, canRemoveChildren,
         e.preventDefault();
         e.stopPropagation();
         const menuItems = [];
-        if (canAddChildren)
+        if (canAddChildren) {
             menuItems.push({ label: 'Add', action: addChild });
-        if (canRename)
+        }
+        if (canRename) {
             menuItems.push({ label: 'Rename', action: renameThis });
-        if (canRemove && (childNodes === undefined || childNodes.length === 0))
+        }
+        if (canRemove && (childNodes === undefined || childNodes.length === 0)) {
             menuItems.push({ label: 'Delete', action: removeThis });
+        }
         if (typeof menuContext.set === 'function') {
             menuContext.set({
                 visible: true,
@@ -1703,11 +1670,12 @@ const TreeNode = ({ id, canRemove, canRename, canAddChildren, canRemoveChildren,
         renameThis,
     ]);
     // Return node
-    return (jsxRuntime.jsxs("div", { className: 'hierarchy-node', onClickCapture: () => treeContext.handleSelect && treeContext.handleSelect(id), onContextMenuCapture: () => treeContext.handleSelect && treeContext.handleSelect(id), onFocusCapture: () => treeContext.handleSelect && treeContext.handleSelect(id), children: [error ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExclamationCircleFill$1, { color: 'var(--bs-danger)' }), ' ', errorText && errorText !== '' ? errorText : 'An unknown error has occured'] })) : loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner$1, { size: 'sm', animation: 'border' }), ' ', "Loading..."] })) : (jsxRuntime.jsxs("span", { onContextMenu: showMenu, children: [childNodes !== undefined && childNodes.length > 0 ? (!expanded ? (jsxRuntime.jsx(CaretRightFill$1, { id: `hierarchynode-caret-${id}`, onClick: () => treeContext.handleExpandClick && treeContext.handleExpandClick(id) })) : (jsxRuntime.jsx(CaretDownFill$1, { id: `hierarchynode-caret-${id}`, onClick: () => treeContext.handleExpandClick && treeContext.handleExpandClick(id) }))) : (jsxRuntime.jsx(CaretRight$1, {})), thisNode !== undefined ? (jsxRuntime.jsx(WordEntry, { id: id ? `treenode-word-${id}` : undefined, ref: currentNameRef, value: thisNode.label, editing: renaming, saving: updatingNode, setValue: (ret) => renameNode(ret), style: {
+    return (jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExclamationCircleFill$1, { color: 'var(--bs-danger)' }), ' ', errorText && errorText !== '' ? errorText : 'An unknown error has occured'] })) : loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner$1, { size: 'sm', animation: 'border' }), ' ', "Loading..."] })) : (jsxRuntime.jsxs("span", { onContextMenu: showMenu, children: [childNodes !== undefined && childNodes.length > 0 ? (!expanded ? (jsxRuntime.jsx(CaretRightFill$1, { role: 'button', "aria-expanded": false, id: `${treeContext.id}-treenode-caret-${id}`, onClick: () => treeContext.handleExpandClick && treeContext.handleExpandClick(id) })) : (jsxRuntime.jsx(CaretDownFill$1, { role: 'button', "aria-expanded": true, id: `${treeContext.id}-treenode-caret-${id}`, onClick: () => treeContext.handleExpandClick && treeContext.handleExpandClick(id) }))) : (jsxRuntime.jsx(CaretRight$1, { role: 'button', "aria-expanded": false, "aria-disabled": true })), thisNode && (jsxRuntime.jsx(WordEntry, { 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 === '' ? '' : 'lightgrey',
-                        } })) : (jsxRuntime.jsx("i", { children: "No name" }))] })), childNodes !== undefined && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: childNodes.map((h) => (jsxRuntime.jsx("span", { style: {
+                        } }))] })), childNodes !== undefined &&
+                childNodes.map((h, i) => (jsxRuntime.jsx("span", { id: `${treeContext.id}-treenode-child-${h.id}`, style: {
                         marginLeft: '16px',
                         display: 'block',
                         maxHeight: expanded ? '99999px' : '0px',
@@ -1716,13 +1684,42 @@ const TreeNode = ({ id, canRemove, canRename, canAddChildren, canRemoveChildren,
                         visibility: expanded ? 'inherit' : 'hidden',
                         opacity: expanded ? 1 : 0,
                         transition: 'visibility .3s, opacity .3s ease-in-out, max-height 0.3s ease-in-out',
-                    }, children: jsxRuntime.jsx(TreeNode, { id: h.id, canRemove: canRemoveChildren, canRename: canRenameChildren, canAddChildren: canAddChildren, canRemoveChildren: canRemoveChildren, canRenameChildren: canRenameChildren }) }, h.id))) })), showNewNode && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(WordEntry, { style: { marginLeft: '14px' }, id: id ? `hierarchynode-new-${id}` : undefined, ref: newNameRef, editing: true, setValue: (ret) => {
+                    }, children: jsxRuntime.jsx(TreeNode, { id: h.id, canRemove: canRemoveChildren, canRename: canRenameChildren, canAddChildren: canAddChildren, canRemoveChildren: canRemoveChildren, canRenameChildren: canRenameChildren }) }, h.id))), showNewNode && (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(WordEntry, { style: { marginLeft: '14px' }, id: `treenode-new-${id}`, ref: newNameRef, editing: true, setValue: (ret) => {
                         confirmNewNode(ret);
                     }, saving: savingNewNode, sendEscape: () => {
                         setShowNewNode(false);
                     } }) }))] }));
 };
 
+const TreeOfNodes = ({ id, nodeList, roots, 
+// canAddRoot = false,
+canRemoveRoot = false, canRenameRoot = false, canAddChildren = false, canRemoveChildren = false, canRenameChildren = false, selectedId, handleSelect = () => {
+    return;
+}, onAdd, onRename, onRemove, }) => {
+    const [expandedNodes, setExpandedNodes] = React.useState([]);
+    // Change expansion and update context
+    const changeExpand = React.useCallback((eKey, force) => {
+        const newExpandedNodes = [...expandedNodes];
+        const ix = newExpandedNodes.findIndex((nKey) => nKey === eKey);
+        if ((ix === -1 && force === undefined) || force === true)
+            newExpandedNodes.push(eKey);
+        else
+            newExpandedNodes.splice(ix, 1);
+        setExpandedNodes(newExpandedNodes);
+    }, [expandedNodes]);
+    return (jsxRuntime.jsx(ContextMenuProvider, { children: jsxRuntime.jsx(TreeOfNodesContext.Provider, { value: {
+                id: id,
+                nodeList,
+                selectedId,
+                handleSelect,
+                expandedNodes,
+                handleExpandClick: (r, f) => changeExpand(r, f),
+                onAddChild: onAdd,
+                onRename,
+                onRemove,
+            }, children: roots.map((r) => (jsxRuntime.jsx(TreeNode, { id: r, canRemove: canRemoveRoot, canAddChildren: canAddChildren, canRename: canRenameRoot, canRemoveChildren: canRemoveChildren, canRenameChildren: canRenameChildren }, r))) }) }));
+};
+
 exports.ContextMenu = ContextMenu;
 exports.ContextMenuProvider = ContextMenuProvider;
 exports.TreeNode = TreeNode;

package/dist/components/TreeOfNodes.d.ts

@@ -1,20 +1,7 @@
 import { Key } from 'react';
-export declare type TreeNodeBase = {
-    id: Key;
-    label: string;
-    parentId?: Key;
-};
-export declare type TreeNodeData<T> = {
-    id: Key;
-    label: string;
-    parentId?: Key;
-    data: T;
-};
-export interface iNodeUpdate {
-    success: boolean;
-    ErrorText?: string;
-}
+import { iNodeUpdate, TreeNodeData } from './TreeOfNodesContext';
 interface iTreeOfNodes<T> {
+    id: string;
     nodeList: TreeNodeData<T>[];
     roots: Key[];
     selectedId?: Key;
@@ -29,16 +16,5 @@ interface iTreeOfNodes<T> {
     canRemoveChildren?: boolean;
     canRenameChildren?: boolean;
 }
-declare type TreeOfNodesContextData<T> = {
-    nodeList: TreeNodeData<T>[];
-    selectedId?: Key;
-    handleSelect?: (ret: Key) => void;
-    expandedNodes?: Key[];
-    handleExpandClick?: (ret: Key, force?: boolean) => void;
-    onAddChild?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
-    onRename?: (id: Key, newName: string) => Promise<iNodeUpdate>;
-    onRemove?: (id: Key) => Promise<iNodeUpdate>;
-};
-export declare const TreeOfNodesContext: import("react").Context<TreeOfNodesContextData<unknown>>;
-export declare const TreeOfNodes: <T extends unknown>({ nodeList, roots, canRemoveRoot, canRenameRoot, canAddChildren, canRemoveChildren, canRenameChildren, selectedId, handleSelect, onAdd, onRename, onRemove, }: iTreeOfNodes<T>) => JSX.Element;
+export declare const TreeOfNodes: <T extends unknown>({ id, nodeList, roots, canRemoveRoot, canRenameRoot, canAddChildren, canRemoveChildren, canRenameChildren, selectedId, handleSelect, onAdd, onRename, onRemove, }: iTreeOfNodes<T>) => JSX.Element;
 export {};

package/dist/components/TreeOfNodesContext.d.ts

@@ -0,0 +1,28 @@
+import { Key } from 'react';
+export interface iNodeUpdate {
+    success: boolean;
+    ErrorText?: string;
+}
+export interface TreeNodeBase {
+    id: Key;
+    label: string;
+    parentId?: Key;
+}
+export interface TreeNodeData<T> {
+    id: Key;
+    label: string;
+    parentId?: Key;
+    data: T;
+}
+export interface TreeOfNodesContextData<T> {
+    id: string;
+    nodeList: TreeNodeData<T>[];
+    selectedId?: Key;
+    handleSelect?: (ret: Key) => void;
+    expandedNodes?: Key[];
+    handleExpandClick?: (ret: Key, force?: boolean) => void;
+    onAddChild?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
+    onRename?: (id: Key, newName: string) => Promise<iNodeUpdate>;
+    onRemove?: (id: Key) => Promise<iNodeUpdate>;
+}
+export declare const TreeOfNodesContext: import("react").Context<TreeOfNodesContextData<unknown>>;

package/dist/components/WordEntry.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { Key } from 'react';
 interface WordEntryProps {
-    id?: string;
+    id: Key;
     value?: string;
     editing?: boolean;
     saving?: boolean;

package/dist/components/index.d.ts

@@ -1,7 +1,8 @@
 import { ContextMenu } from './ContextMenu';
 import { ContextMenuProvider } from './ContextMenuProvider';
 import { TreeNode } from './TreeNode';
-import { iNodeUpdate, TreeNodeBase, TreeNodeData, TreeOfNodes } from './TreeOfNodes';
+import { TreeOfNodes } from './TreeOfNodes';
+import { iNodeUpdate, TreeNodeBase, TreeNodeData } from './TreeOfNodesContext';
 import { WordEntry } from './WordEntry';
 export { ContextMenu, ContextMenuProvider, TreeNode, TreeOfNodes, WordEntry };
 export type { TreeNodeBase, TreeNodeData, iNodeUpdate };

package/dist/main.js

@@ -8,8 +8,7 @@ const ContextMenu = React__default.forwardRef(({ entries, visible, xPos, yPos },
             top: `${yPos}px`,
             left: `${xPos}px`,
         }, children: entries.map((e, i) => (jsx("div", { className: 'context-menu-item', onClick: () => {
-                if (typeof e.action === 'function')
-                    e.action();
+                e.action && e.action();
             }, children: e.label ?? '' }, i))) }));
 });
 
@@ -1322,7 +1321,7 @@ if (process.env.NODE_ENV !== 'production') {
 const Spinner = /*#__PURE__*/React.forwardRef(({
   bsPrefix,
   variant,
-  animation,
+  animation = 'border',
   size,
   // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
   as: Component = 'div',
@@ -1485,79 +1484,46 @@ ExclamationCircleFill.defaultProps = {
 var ExclamationCircleFill$1 = ExclamationCircleFill;
 
 const TreeOfNodesContext = createContext({
+    id: 'tree-of-nodes',
     nodeList: [],
-});
-const TreeOfNodes = ({ nodeList, roots, 
-// canAddRoot = false,
-canRemoveRoot = false, canRenameRoot = false, canAddChildren = false, canRemoveChildren = false, canRenameChildren = false, selectedId, handleSelect = () => {
-    return;
-}, onAdd, onRename, onRemove, }) => {
-    const [expandedNodes, setExpandedNodes] = useState([]);
-    // Change expansion and update context
-    const changeExpand = useCallback((eKey, force) => {
-        const newExpandedNodes = [...expandedNodes];
-        const ix = newExpandedNodes.findIndex((nKey) => nKey === eKey);
-        if ((ix === -1 && force === undefined) || force === true)
-            newExpandedNodes.push(eKey);
-        else
-            newExpandedNodes.splice(ix, 1);
-        setExpandedNodes(newExpandedNodes);
-    }, [expandedNodes]);
-    return (jsx(ContextMenuProvider, { children: jsx(TreeOfNodesContext.Provider, { value: {
-                nodeList,
-                selectedId,
-                handleSelect,
-                expandedNodes,
-                handleExpandClick: (r, f) => changeExpand(r, f),
-                onAddChild: onAdd,
-                onRename,
-                onRemove,
-            }, children: roots.map((r) => (jsx(TreeNode, { id: r, canRemove: canRemoveRoot, canAddChildren: canAddChildren, canRename: canRenameRoot, canRemoveChildren: canRemoveChildren, canRenameChildren: canRenameChildren }, r))) }) }));
-};
+});
 
 const WordEntry = React__default.forwardRef(({ id, value, editing, saving, setValue, sendEscape, style }, ref) => {
-    const [currentStyle, setCurrentStyle] = useState({
-        display: 'inline-block',
-    });
     WordEntry.displayName = 'WordEntry';
+    const currentStyle = useMemo(() => {
+        return {
+            display: 'inline-block',
+            padding: '1px',
+            paddingLeft: '3px',
+            paddingRight: '3px',
+            border: '1px',
+            borderRadius: '3px',
+            ...style,
+        };
+    }, [style]);
     const [currentValue, setCurrentValue] = useState(value ?? '');
     useEffect(() => {
         setCurrentValue(value ?? '');
     }, [value]);
     const returnData = useCallback(() => {
-        if (typeof setValue !== 'function')
-            return;
-        setValue(currentValue);
+        setValue && setValue(currentValue);
     }, [currentValue, setValue]);
     const keyPress = useCallback((e) => {
         if (e.code === 'Escape') {
             setCurrentValue(value ?? '');
-            if (typeof sendEscape === 'function')
-                sendEscape();
+            sendEscape && sendEscape();
         }
         else if (e.code === 'Enter') {
             returnData();
         }
     }, [returnData, sendEscape, value]);
-    useEffect(() => {
-        setCurrentStyle({
-            padding: '1px',
-            paddingLeft: '3px',
-            paddingRight: '3px',
-            border: '1px',
-            borderRadius: '3px',
-            display: 'inline-block',
-            ...style,
-        });
-    }, [style]);
     // Simple if not editing
     if (!editing) {
-        return jsx("span", { style: currentStyle, children: value });
+        return (jsx("span", { style: currentStyle, id: String(id), children: value }));
     }
-    return (jsxs("div", { style: currentStyle, id: id, children: [saving && (jsx(Spinner$1, { id: id ? `${id}-spinner` : undefined, size: 'sm', animation: 'border' })), jsx("input", { id: id ? `${id}-input` : undefined, ref: ref, type: 'text', style: {
+    return (jsxs("div", { style: currentStyle, id: `${id}-holder`, children: [saving && (jsx(Spinner$1, { id: `${id}-spinner`, size: 'sm', animation: 'border' })), jsx("input", { id: String(id), ref: ref, type: 'text', style: {
                     lineHeight: '0.75rem',
-                    border: editing ? '1px dotted black' : saving ? '' : '1px dotted grey',
-                    margin: !saving && !editing ? '1px' : '',
+                    border: '1px dotted black',
                     width: 'auto',
                     minWidth: '0',
                 }, value: currentValue, disabled: saving, onChange: (e) => setCurrentValue(e.currentTarget.value), onBlur: returnData, onKeyDownCapture: keyPress })] }));
@@ -1570,7 +1536,7 @@ const TreeNode = ({ id, canRemove, canRename, canAddChildren, canRemoveChildren,
     // Node information
     const thisNode = useMemo(() => treeContext.nodeList.find((n) => n.id === id), [id, treeContext.nodeList]);
     const childNodes = useMemo(() => treeContext.nodeList.filter((n) => n.parentId === id), [id, treeContext.nodeList]);
-    // Axios state
+    // State
     const loading = useMemo(() => treeContext.nodeList.findIndex((n) => n.id === id) === -1, [id, treeContext.nodeList]);
     const [error, setError] = useState(false);
     const [errorText, setErrotText] = useState(null);
@@ -1618,14 +1584,12 @@ const TreeNode = ({ id, canRemove, canRename, canAddChildren, canRemoveChildren,
     }, [handleReturn, id, treeContext]);
     const deleteThis = useCallback(async () => {
         setUpdatingNode(true);
-        if (thisNode === undefined)
-            return;
         if (treeContext.onRemove) {
             handleReturn(await treeContext.onRemove(id));
         }
         setUpdatingNode(false);
-    }, [handleReturn, id, thisNode, treeContext]);
-    // // Context actions
+    }, [handleReturn, id, treeContext]);
+    // Context actions
     const addChild = useCallback(() => {
         if (menuContext.set) {
             menuContext.set({ visible: false });
@@ -1658,12 +1622,15 @@ const TreeNode = ({ id, canRemove, canRename, canAddChildren, canRemoveChildren,
         e.preventDefault();
         e.stopPropagation();
         const menuItems = [];
-        if (canAddChildren)
+        if (canAddChildren) {
             menuItems.push({ label: 'Add', action: addChild });
-        if (canRename)
+        }
+        if (canRename) {
             menuItems.push({ label: 'Rename', action: renameThis });
-        if (canRemove && (childNodes === undefined || childNodes.length === 0))
+        }
+        if (canRemove && (childNodes === undefined || childNodes.length === 0)) {
             menuItems.push({ label: 'Delete', action: removeThis });
+        }
         if (typeof menuContext.set === 'function') {
             menuContext.set({
                 visible: true,
@@ -1683,11 +1650,12 @@ const TreeNode = ({ id, canRemove, canRename, canAddChildren, canRemoveChildren,
         renameThis,
     ]);
     // Return node
-    return (jsxs("div", { className: 'hierarchy-node', onClickCapture: () => treeContext.handleSelect && treeContext.handleSelect(id), onContextMenuCapture: () => treeContext.handleSelect && treeContext.handleSelect(id), onFocusCapture: () => treeContext.handleSelect && treeContext.handleSelect(id), children: [error ? (jsxs(Fragment, { children: [jsx(ExclamationCircleFill$1, { color: 'var(--bs-danger)' }), ' ', errorText && errorText !== '' ? errorText : 'An unknown error has occured'] })) : loading ? (jsxs(Fragment, { children: [jsx(Spinner$1, { size: 'sm', animation: 'border' }), ' ', "Loading..."] })) : (jsxs("span", { onContextMenu: showMenu, children: [childNodes !== undefined && childNodes.length > 0 ? (!expanded ? (jsx(CaretRightFill$1, { id: `hierarchynode-caret-${id}`, onClick: () => treeContext.handleExpandClick && treeContext.handleExpandClick(id) })) : (jsx(CaretDownFill$1, { id: `hierarchynode-caret-${id}`, onClick: () => treeContext.handleExpandClick && treeContext.handleExpandClick(id) }))) : (jsx(CaretRight$1, {})), thisNode !== undefined ? (jsx(WordEntry, { id: id ? `treenode-word-${id}` : undefined, ref: currentNameRef, value: thisNode.label, editing: renaming, saving: updatingNode, setValue: (ret) => renameNode(ret), style: {
+    return (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 ? (jsxs(Fragment, { children: [jsx(ExclamationCircleFill$1, { color: 'var(--bs-danger)' }), ' ', errorText && errorText !== '' ? errorText : 'An unknown error has occured'] })) : loading ? (jsxs(Fragment, { children: [jsx(Spinner$1, { size: 'sm', animation: 'border' }), ' ', "Loading..."] })) : (jsxs("span", { onContextMenu: showMenu, children: [childNodes !== undefined && childNodes.length > 0 ? (!expanded ? (jsx(CaretRightFill$1, { role: 'button', "aria-expanded": false, id: `${treeContext.id}-treenode-caret-${id}`, onClick: () => treeContext.handleExpandClick && treeContext.handleExpandClick(id) })) : (jsx(CaretDownFill$1, { role: 'button', "aria-expanded": true, id: `${treeContext.id}-treenode-caret-${id}`, onClick: () => treeContext.handleExpandClick && treeContext.handleExpandClick(id) }))) : (jsx(CaretRight$1, { role: 'button', "aria-expanded": false, "aria-disabled": true })), thisNode && (jsx(WordEntry, { 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 === '' ? '' : 'lightgrey',
-                        } })) : (jsx("i", { children: "No name" }))] })), childNodes !== undefined && (jsx(Fragment, { children: childNodes.map((h) => (jsx("span", { style: {
+                        } }))] })), childNodes !== undefined &&
+                childNodes.map((h, i) => (jsx("span", { id: `${treeContext.id}-treenode-child-${h.id}`, style: {
                         marginLeft: '16px',
                         display: 'block',
                         maxHeight: expanded ? '99999px' : '0px',
@@ -1696,11 +1664,40 @@ const TreeNode = ({ id, canRemove, canRename, canAddChildren, canRemoveChildren,
                         visibility: expanded ? 'inherit' : 'hidden',
                         opacity: expanded ? 1 : 0,
                         transition: 'visibility .3s, opacity .3s ease-in-out, max-height 0.3s ease-in-out',
-                    }, children: jsx(TreeNode, { id: h.id, canRemove: canRemoveChildren, canRename: canRenameChildren, canAddChildren: canAddChildren, canRemoveChildren: canRemoveChildren, canRenameChildren: canRenameChildren }) }, h.id))) })), showNewNode && (jsx("div", { children: jsx(WordEntry, { style: { marginLeft: '14px' }, id: id ? `hierarchynode-new-${id}` : undefined, ref: newNameRef, editing: true, setValue: (ret) => {
+                    }, children: jsx(TreeNode, { id: h.id, canRemove: canRemoveChildren, canRename: canRenameChildren, canAddChildren: canAddChildren, canRemoveChildren: canRemoveChildren, canRenameChildren: canRenameChildren }) }, h.id))), showNewNode && (jsx("div", { children: jsx(WordEntry, { style: { marginLeft: '14px' }, id: `treenode-new-${id}`, ref: newNameRef, editing: true, setValue: (ret) => {
                         confirmNewNode(ret);
                     }, saving: savingNewNode, sendEscape: () => {
                         setShowNewNode(false);
                     } }) }))] }));
 };
 
+const TreeOfNodes = ({ id, nodeList, roots, 
+// canAddRoot = false,
+canRemoveRoot = false, canRenameRoot = false, canAddChildren = false, canRemoveChildren = false, canRenameChildren = false, selectedId, handleSelect = () => {
+    return;
+}, onAdd, onRename, onRemove, }) => {
+    const [expandedNodes, setExpandedNodes] = useState([]);
+    // Change expansion and update context
+    const changeExpand = useCallback((eKey, force) => {
+        const newExpandedNodes = [...expandedNodes];
+        const ix = newExpandedNodes.findIndex((nKey) => nKey === eKey);
+        if ((ix === -1 && force === undefined) || force === true)
+            newExpandedNodes.push(eKey);
+        else
+            newExpandedNodes.splice(ix, 1);
+        setExpandedNodes(newExpandedNodes);
+    }, [expandedNodes]);
+    return (jsx(ContextMenuProvider, { children: jsx(TreeOfNodesContext.Provider, { value: {
+                id: id,
+                nodeList,
+                selectedId,
+                handleSelect,
+                expandedNodes,
+                handleExpandClick: (r, f) => changeExpand(r, f),
+                onAddChild: onAdd,
+                onRename,
+                onRemove,
+            }, children: roots.map((r) => (jsx(TreeNode, { id: r, canRemove: canRemoveRoot, canAddChildren: canAddChildren, canRename: canRenameRoot, canRemoveChildren: canRemoveChildren, canRenameChildren: canRenameChildren }, r))) }) }));
+};
+
 export { ContextMenu, ContextMenuProvider, TreeNode, TreeOfNodes, WordEntry };

package/dist/tree-of-nodes.d.ts

@@ -29,22 +29,24 @@ interface TreeNodeProps {
 }
 declare const TreeNode: ({ id, canRemove, canRename, canAddChildren, canRemoveChildren, canRenameChildren, }: TreeNodeProps) => JSX.Element;
 
-declare type TreeNodeBase = {
+interface iNodeUpdate {
+    success: boolean;
+    ErrorText?: string;
+}
+interface TreeNodeBase {
     id: Key;
     label: string;
     parentId?: Key;
-};
-declare type TreeNodeData<T> = {
+}
+interface TreeNodeData<T> {
     id: Key;
     label: string;
     parentId?: Key;
     data: T;
-};
-interface iNodeUpdate {
-    success: boolean;
-    ErrorText?: string;
-}
+}
+
 interface iTreeOfNodes<T> {
+    id: string;
     nodeList: TreeNodeData<T>[];
     roots: Key[];
     selectedId?: Key;
@@ -59,10 +61,10 @@ interface iTreeOfNodes<T> {
     canRemoveChildren?: boolean;
     canRenameChildren?: boolean;
 }
-declare const TreeOfNodes: <T extends unknown>({ nodeList, roots, canRemoveRoot, canRenameRoot, canAddChildren, canRemoveChildren, canRenameChildren, selectedId, handleSelect, onAdd, onRename, onRemove, }: iTreeOfNodes<T>) => JSX.Element;
+declare const TreeOfNodes: <T extends unknown>({ id, nodeList, roots, canRemoveRoot, canRenameRoot, canAddChildren, canRemoveChildren, canRenameChildren, selectedId, handleSelect, onAdd, onRename, onRemove, }: iTreeOfNodes<T>) => JSX.Element;
 
 interface WordEntryProps {
-    id?: string;
+    id: Key;
     value?: string;
     editing?: boolean;
     saving?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asup/tree-of-nodes",
-  "version": "0.9.1",
+  "version": "1.0.1",
   "description": "REACT Typescript Treeview component",
   "author": "Paul Thomas <@PaulDThomas>",
   "private": false,
@@ -51,6 +51,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^13.0.3",
     "parcel": "^2.7.0",
     "postcss": "^8.4.18",
@@ -63,7 +64,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.3"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
@@ -95,6 +96,6 @@
   "scripts": {
     "build": "rollup -c --configPlugin typescript",
     "start": "parcel demo/index.html --dist-dir demo/dist",
-    "test": "jest"
+    "test": "jest --watch"
   }
 }