@asup/tree-of-nodes 0.9.0 → 1.0.0

package/dist/{esm/main.js → 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',
-            ...style,
-            display: 'inline-block',
-        });
-    }, [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)
-            menuItems.push({ label: 'Add directory', action: addChild });
-        if (canRename)
+        if (canAddChildren) {
+            menuItems.push({ label: 'Add', action: addChild });
+        }
+        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, { 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/src/__mocks__/mockNodes.d.ts

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

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

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

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

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

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

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

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

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

package/dist/{esm → src}/components/ContextMenu.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { contextMenuProps } from './ContextMenuProvider';
+import './ContextMenu.css';
 export declare const ContextMenu: React.ForwardRefExoticComponent<contextMenuProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,20 @@
+import { Key } from 'react';
+import { iNodeUpdate, TreeNodeData } from './TreeOfNodesContext';
+interface iTreeOfNodes<T> {
+    id: string;
+    nodeList: TreeNodeData<T>[];
+    roots: Key[];
+    selectedId?: Key;
+    handleSelect?: (ret: Key) => void;
+    onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
+    onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;
+    onRemove?: (childId: Key) => Promise<iNodeUpdate>;
+    canAddRoot?: boolean;
+    canRemoveRoot?: boolean;
+    canRenameRoot?: boolean;
+    canAddChildren?: boolean;
+    canRemoveChildren?: boolean;
+    canRenameChildren?: boolean;
+}
+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/src/components/TreeOfNodesContext.d.ts

@@ -0,0 +1,28 @@
+import { Key } from 'react';
+export interface iNodeUpdate {
+    success: boolean;
+    ErrorText?: string;
+}
+export type TreeNodeBase = {
+    id: Key;
+    label: string;
+    parentId?: Key;
+};
+export type TreeNodeData<T> = {
+    id: Key;
+    label: string;
+    parentId?: Key;
+    data: T;
+};
+export type 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/{esm → src}/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/{esm → src}/components/index.d.ts

@@ -1,7 +1,8 @@
 import { ContextMenu } from './ContextMenu';
 import { ContextMenuProvider } from './ContextMenuProvider';
 import { TreeNode } from './TreeNode';
-import { iNodeUpdate, 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 { TreeNodeData, iNodeUpdate };
+export type { TreeNodeBase, TreeNodeData, iNodeUpdate };

package/dist/style.css

@@ -0,0 +1 @@
+.context-menu{background-color:#fbfdf6;border:1px solid #111418;border-radius:8px;opacity:1;position:absolute;visibility:hidden}.context-menu.visible{visibility:"inherit"}.context-menu-item{color:#111418;cursor:pointer;min-width:80px;padding:0 4px}.context-menu-item:first-child{padding-top:2px}.context-menu-item:last-child{padding-bottom:2px}.context-menu-item:hover{background-color:#fbe9e6}.context-menu-item:hover:first-child{border-radius:6px 6px 0 0}.context-menu-item:hover:last-child{border-radius:0 0 6px 6px}

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

@@ -1,70 +1,32 @@
-import React, { Key } from 'react';
+import * as React from 'react';
 
-interface contextMenuProps {
-    entries: iMenuItem[];
-    visible: boolean;
-    xPos: number;
-    yPos: number;
-}
-interface iMenuItem {
-    label?: string;
-    action?: () => void;
-}
-interface iContextMenuProvider {
-    children: React.ReactNode;
-}
-declare const ContextMenuProvider: ({ children }: iContextMenuProvider) => JSX.Element;
+declare const ContextMenu: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+declare function ContextMenuProvider({ children }: {
+    children: any;
+}): any;
+declare function TreeNode({ id, canRemove, canRename, canAddChildren, canRemoveChildren, canRenameChildren, }: {
+    id: any;
+    canRemove: any;
+    canRename: any;
+    canAddChildren: any;
+    canRemoveChildren: any;
+    canRenameChildren: any;
+}): any;
+declare function TreeOfNodes({ id, nodeList, roots, canRemoveRoot, canRenameRoot, canAddChildren, canRemoveChildren, canRenameChildren, selectedId, handleSelect, onAdd, onRename, onRemove, }: {
+    id: any;
+    nodeList: any;
+    roots: any;
+    canRemoveRoot?: boolean | undefined;
+    canRenameRoot?: boolean | undefined;
+    canAddChildren?: boolean | undefined;
+    canRemoveChildren?: boolean | undefined;
+    canRenameChildren?: boolean | undefined;
+    selectedId: any;
+    handleSelect?: (() => void) | undefined;
+    onAdd: any;
+    onRename: any;
+    onRemove: any;
+}): any;
+declare const WordEntry: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 
-declare const ContextMenu: React.ForwardRefExoticComponent<contextMenuProps & React.RefAttributes<HTMLDivElement>>;
-
-interface TreeNodeProps {
-    id: Key;
-    indentLevel?: number;
-    canRemove?: boolean;
-    canRename?: boolean;
-    canAddChildren?: boolean;
-    canRemoveChildren?: boolean;
-    canRenameChildren?: boolean;
-    refresh?: () => void;
-}
-declare const TreeNode: ({ id, canRemove, canRename, canAddChildren, canRemoveChildren, canRenameChildren, }: TreeNodeProps) => JSX.Element;
-
-declare type TreeNodeData<T> = {
-    id: Key;
-    label: string;
-    parentId?: Key;
-    data: T;
-};
-interface iNodeUpdate {
-    success: boolean;
-    ErrorText?: string;
-}
-interface iTreeOfNodes<T> {
-    nodeList: TreeNodeData<T>[];
-    roots: Key[];
-    selectedId?: Key;
-    handleSelect?: (ret: Key) => void;
-    onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
-    onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;
-    onRemove?: (childId: Key) => Promise<iNodeUpdate>;
-    canAddRoot?: boolean;
-    canRemoveRoot?: boolean;
-    canRenameRoot?: boolean;
-    canAddChildren?: boolean;
-    canRemoveChildren?: boolean;
-    canRenameChildren?: boolean;
-}
-declare const TreeOfNodes: <T extends object>({ nodeList, roots, canRemoveRoot, canRenameRoot, canAddChildren, canRemoveChildren, canRenameChildren, selectedId, handleSelect, onAdd, onRename, onRemove, }: iTreeOfNodes<T>) => JSX.Element;
-
-interface WordEntryProps {
-    id?: string;
-    value?: string;
-    editing?: boolean;
-    saving?: boolean;
-    setValue?: (ret: string) => void;
-    sendEscape?: () => void;
-    style?: React.CSSProperties;
-}
-declare const WordEntry: React.ForwardRefExoticComponent<WordEntryProps & React.RefAttributes<HTMLInputElement>>;
-
-export { ContextMenu, ContextMenuProvider, TreeNode, TreeNodeData, TreeOfNodes, WordEntry, iNodeUpdate };
+export { ContextMenu, ContextMenuProvider, TreeNode, TreeOfNodes, WordEntry };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asup/tree-of-nodes",
-  "version": "0.9.0",
+  "version": "1.0.0",
   "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.0",
     "lint-staged": "^13.0.3",
     "parcel": "^2.7.0",
     "postcss": "^8.4.18",
@@ -61,15 +62,17 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.34.1",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4"
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.3"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
   },
   "main": "dist/cjs/main.js",
-  "module": "dist/esm/main.js",
+  "module": "dist/main.js",
   "types": "dist/tree-of-nodes.d.ts",
   "files": [
     "dist"
@@ -93,8 +96,8 @@
     ]
   },
   "scripts": {
-    "build": "rollup -c --configPlugin typescript && parcel build demo/index.html -d demo/public --public-url ./",
-    "start": "parcel demo/index.html",
-    "test": "jest"
+    "build": "rollup -c --configPlugin typescript",
+    "start": "parcel demo/index.html --dist-dir demo/dist",
+    "test": "jest --watch"
   }
 }

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

@@ -1,44 +0,0 @@
-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;
-}
-interface iTreeOfNodes<T> {
-    nodeList: TreeNodeData<T>[];
-    roots: Key[];
-    selectedId?: Key;
-    handleSelect?: (ret: Key) => void;
-    onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
-    onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;
-    onRemove?: (childId: Key) => Promise<iNodeUpdate>;
-    canAddRoot?: boolean;
-    canRemoveRoot?: boolean;
-    canRenameRoot?: boolean;
-    canAddChildren?: boolean;
-    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<object>>;
-export declare const TreeOfNodes: <T extends object>({ nodeList, roots, canRemoveRoot, canRenameRoot, canAddChildren, canRemoveChildren, canRenameChildren, selectedId, handleSelect, onAdd, onRename, onRemove, }: iTreeOfNodes<T>) => JSX.Element;
-export {};

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

@@ -1,44 +0,0 @@
-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;
-}
-interface iTreeOfNodes<T> {
-    nodeList: TreeNodeData<T>[];
-    roots: Key[];
-    selectedId?: Key;
-    handleSelect?: (ret: Key) => void;
-    onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
-    onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;
-    onRemove?: (childId: Key) => Promise<iNodeUpdate>;
-    canAddRoot?: boolean;
-    canRemoveRoot?: boolean;
-    canRenameRoot?: boolean;
-    canAddChildren?: boolean;
-    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<object>>;
-export declare const TreeOfNodes: <T extends object>({ nodeList, roots, canRemoveRoot, canRenameRoot, canAddChildren, canRemoveChildren, canRenameChildren, selectedId, handleSelect, onAdd, onRename, onRemove, }: iTreeOfNodes<T>) => JSX.Element;
-export {};