From 8d2a5fe1723431387be1e7f046294bbc7e7ed87c Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Fri, 21 Apr 2023 10:18:56 -0400
Subject: [PATCH 01/17] restructure using TreeModel and NodeModel

convert ClickableLabelsExample

add place holder for Show Root Example

update CustomIconsExample

update and fix DisabledExample

update NoCascadeExample

update PessimisticToggleExample

update HiddenCheckboxesExample

update LargeDataExample

update ExpandAllExample and fix errors

updated FilterExample and fixed TreeModel(onCheck and onExpand)

add ShowRootExample

simplify TreeModel

work on FilterExample

replace 'newTreeModel' with 'newTree'

move models into models dir

change onCollapse & onExpand to use nodeKey

add ExpandNodesToLevel and redo getChecked

add radio buttons

change to context for state

add radio button for nativeCheckboxes
---
 examples/src/index.html                       |   14 +-
 examples/src/index.jsx                        |   20 +-
 examples/src/js/BasicExample.jsx              |   42 +-
 examples/src/js/ClickableLabelsExample.jsx    |   46 +-
 examples/src/js/CustomIconsExample.jsx        |   39 +-
 examples/src/js/DisabledExample.jsx           |   43 +-
 examples/src/js/ExpandAllExample.jsx          |   36 +-
 examples/src/js/FilterExample.jsx             |  175 ++-
 examples/src/js/HiddenCheckboxesExample.jsx   |   47 +-
 examples/src/js/LargeDataExample.jsx          |   35 +-
 examples/src/js/NativeCheckboxExample.jsx     |   31 +
 examples/src/js/NoCascadeExample.jsx          |   46 +-
 examples/src/js/PessimisticToggleExample.jsx  |   43 +-
 examples/src/js/RadioButtonExample.jsx        |   30 +
 .../src/js/{common.js => data/empires.js}     |   90 +-
 examples/src/js/data/fileSystem.js            |   80 +
 examples/src/js/data/fileSystemRadio.js       |   83 ++
 examples/src/js/data/index.js                 |    4 +
 examples/src/js/data/mapLayerTree.js          |  736 +++++++++
 src/index.js                                  |    4 +-
 src/js/CheckboxTree.jsx                       |  494 +++----
 src/js/CheckboxTreeContext.jsx                |   35 +
 src/js/NodeModel.js                           |  185 ---
 src/js/components/BareLabel.jsx               |   44 +
 src/js/components/CheckboxIcon.js             |   41 +
 src/js/components/CheckboxLabel.jsx           |  100 ++
 src/js/components/LabelChildren.jsx           |   35 +
 src/js/components/NativeCheckbox.jsx          |   12 +-
 src/js/components/TreeNode.jsx                |  261 +---
 src/js/models/NodeModel.js                    |   80 +
 src/js/models/NodeModelError.js               |    9 +
 src/js/models/TreeModel.js                    |  440 ++++++
 src/js/models/TreeModelError.js               |    9 +
 src/js/shapes/iconsShape.js                   |    3 +
 src/js/shapes/nodeShape.js                    |    2 +
 src/js/shapes/treeShape.js                    |   10 +
 src/js/utils.js                               |   30 -
 src/scss/react-checkbox-tree.scss             |   16 +
 test/CheckboxTree.jsx                         | 1317 ++++++++++-------
 test/TreeNode.jsx                             |   48 +-
 40 files changed, 3206 insertions(+), 1609 deletions(-)
 create mode 100644 examples/src/js/NativeCheckboxExample.jsx
 create mode 100644 examples/src/js/RadioButtonExample.jsx
 rename examples/src/js/{common.js => data/empires.js} (54%)
 create mode 100644 examples/src/js/data/fileSystem.js
 create mode 100644 examples/src/js/data/fileSystemRadio.js
 create mode 100644 examples/src/js/data/index.js
 create mode 100644 examples/src/js/data/mapLayerTree.js
 create mode 100644 src/js/CheckboxTreeContext.jsx
 delete mode 100644 src/js/NodeModel.js
 create mode 100644 src/js/components/BareLabel.jsx
 create mode 100644 src/js/components/CheckboxIcon.js
 create mode 100644 src/js/components/CheckboxLabel.jsx
 create mode 100644 src/js/components/LabelChildren.jsx
 create mode 100644 src/js/models/NodeModel.js
 create mode 100644 src/js/models/NodeModelError.js
 create mode 100644 src/js/models/TreeModel.js
 create mode 100644 src/js/models/TreeModelError.js
 create mode 100644 src/js/shapes/treeShape.js
 delete mode 100644 src/js/utils.js

diff --git a/examples/src/index.html b/examples/src/index.html
index 3a5b52bf..1decfdc8 100644
--- a/examples/src/index.html
+++ b/examples/src/index.html
@@ -52,6 +52,9 @@ <h2>Custom Icons Example</h2>
       <h2>Disabled Example</h2>
       <div id="disabled-example"></div>
 
+      <h2>Native Checkboxes Example</h2>
+      <div id="native-checkboxes-example"></div>
+
       <h2>No Cascading Example</h2>
       <p>
         By default, the check state of children determine the check state of a parent. Similarly, checking or unchecking
@@ -73,8 +76,8 @@ <h2>Clickable Labels Example</h2>
         property, the tree will instead call the provided function and will restrict toggling to the checkbox icon.
       </p>
       <p>
-        When the <code>onClick</code> function is defined, passing the <code>expandOnClick</code> property will also
-        expand the clicked node automatically.
+        When the <code>onClick</code> function is defined, passing the <code>expandOnClick</code> property will
+        cause the clicked node to expand/contract when clicked.
       </p>
       <div id="clickable-labels-example"></div>
 
@@ -100,6 +103,13 @@ <h2>Filter Example</h2>
 	    <p>Filtering tree nodes is possible.</p>
       <div id="filter-example"></div>
 
+      <h2>Radio Button Group Example</h2>
+      <p>
+        By adding <code>isRadioGroup: true</code> to a node in the tree initial
+        configuration, that node's children will work as a Radio Group.
+      </p>
+      <div id="radio-button-example"></div>
+
       <footer class="site-footer">
         <span class="site-footer-owner">
           <a href="https://github.com/jakezatecky/react-checkbox-tree">React Checkbox Tree</a> is maintained by <a href="https://github.com/jakezatecky">jakezatecky</a>.
diff --git a/examples/src/index.jsx b/examples/src/index.jsx
index 3aaae333..d6e1f475 100644
--- a/examples/src/index.jsx
+++ b/examples/src/index.jsx
@@ -2,23 +2,27 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 
 import BasicExample from './js/BasicExample';
-import CustomIconsExample from './js/CustomIconsExample';
 import ClickableLabelsExample from './js/ClickableLabelsExample';
+import CustomIconsExample from './js/CustomIconsExample';
 import DisabledExample from './js/DisabledExample';
 import ExpandAllExample from './js/ExpandAllExample';
+import FilterExample from './js/FilterExample';
 import HiddenCheckboxesExample from './js/HiddenCheckboxesExample';
-import NoCascadeExample from './js/NoCascadeExample';
 import LargeDataExample from './js/LargeDataExample';
+import NativeCheckboxExample from './js/NativeCheckboxExample';
+import NoCascadeExample from './js/NoCascadeExample';
 import PessimisticToggleExample from './js/PessimisticToggleExample';
-import FilterExample from './js/FilterExample';
+import RadioButtonExample from './js/RadioButtonExample';
 
 createRoot(document.getElementById('basic-example')).render(<BasicExample />);
+createRoot(document.getElementById('clickable-labels-example')).render(<ClickableLabelsExample />);
 createRoot(document.getElementById('custom-icons-example')).render(<CustomIconsExample />);
 createRoot(document.getElementById('disabled-example')).render(<DisabledExample />);
-createRoot(document.getElementById('no-cascade-example')).render(<NoCascadeExample />);
-createRoot(document.getElementById('pessimistic-toggle-example')).render(<PessimisticToggleExample />);
-createRoot(document.getElementById('clickable-labels-example')).render(<ClickableLabelsExample />);
-createRoot(document.getElementById('hidden-checkboxes-example')).render(<HiddenCheckboxesExample />);
 createRoot(document.getElementById('expand-all-example')).render(<ExpandAllExample />);
-createRoot(document.getElementById('large-data-example')).render(<LargeDataExample />);
 createRoot(document.getElementById('filter-example')).render(<FilterExample />);
+createRoot(document.getElementById('hidden-checkboxes-example')).render(<HiddenCheckboxesExample />);
+createRoot(document.getElementById('large-data-example')).render(<LargeDataExample />);
+createRoot(document.getElementById('native-checkboxes-example')).render(<NativeCheckboxExample />);
+createRoot(document.getElementById('no-cascade-example')).render(<NoCascadeExample />);
+createRoot(document.getElementById('pessimistic-toggle-example')).render(<PessimisticToggleExample />);
+createRoot(document.getElementById('radio-button-example')).render(<RadioButtonExample />);
diff --git a/examples/src/js/BasicExample.jsx b/examples/src/js/BasicExample.jsx
index b7822054..2015400b 100644
--- a/examples/src/js/BasicExample.jsx
+++ b/examples/src/js/BasicExample.jsx
@@ -1,34 +1,30 @@
-import React, { useState } from 'react';
-import CheckboxTree from 'react-checkbox-tree';
+import React from 'react';
+import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { fileSystem as nodes } from './common';
+import { fileSystem as initialTreeState } from './data';
 
 function BasicExample() {
-    const [checked, setChecked] = useState([
-        '/app/Http/Controllers/WelcomeController.js',
-        '/app/Http/routes.js',
-        '/public/assets/style.css',
-        '/public/index.html',
-        '/.gitignore',
-    ]);
-    const [expanded, setExpanded] = useState(['/app']);
-
-    const onCheck = (value) => {
-        setChecked(value);
+    const onCheck = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label}`);
+        console.log(newTree.getChecked());
     };
 
-    const onExpand = (value) => {
-        setExpanded(value);
+    const onExpand = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
+        console.log(newTree.getExpanded());
     };
 
     return (
-        <CheckboxTree
-            checked={checked}
-            expanded={expanded}
-            nodes={nodes}
-            onCheck={onCheck}
-            onExpand={onExpand}
-        />
+        <CheckboxTreeProvider>
+            <CheckboxTree
+                initialTreeState={initialTreeState}
+                nativeCheckboxes
+                onCheck={onCheck}
+                onExpand={onExpand}
+            />
+        </CheckboxTreeProvider>
     );
 }
 
diff --git a/examples/src/js/ClickableLabelsExample.jsx b/examples/src/js/ClickableLabelsExample.jsx
index 15d5190f..c570d52c 100644
--- a/examples/src/js/ClickableLabelsExample.jsx
+++ b/examples/src/js/ClickableLabelsExample.jsx
@@ -1,29 +1,25 @@
 import React, { useState } from 'react';
-import CheckboxTree from 'react-checkbox-tree';
+import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { fileSystem as nodes } from './common';
+import { fileSystem as initialTreeState } from './data';
 
 function ClickExample() {
-    const [checked, setChecked] = useState([
-        '/app/Http/Controllers/WelcomeController.js',
-        '/app/Http/routes.js',
-        '/public/assets/style.css',
-        '/public/index.html',
-        '/.gitignore',
-    ]);
-    const [expanded, setExpanded] = useState(['/app']);
     const [clicked, setClicked] = useState({});
 
-    const onCheck = (value) => {
-        setChecked(value);
+    const onCheck = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label}`);
+        console.log(newTree.getChecked());
     };
 
-    const onExpand = (value) => {
-        setExpanded(value);
+    const onExpand = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
+        console.log(newTree.getExpanded());
     };
 
-    const onClick = (value) => {
-        setClicked(value);
+    const onClick = (node) => {
+        setClicked(node);
     };
 
     const notClickedText = '(none)';
@@ -31,15 +27,15 @@ function ClickExample() {
 
     return (
         <div className="clickable-labels">
-            <CheckboxTree
-                checked={checked}
-                expandOnClick
-                expanded={expanded}
-                nodes={nodes}
-                onCheck={onCheck}
-                onClick={onClick}
-                onExpand={onExpand}
-            />
+            <CheckboxTreeProvider>
+                <CheckboxTree
+                    expandOnClick
+                    initialTreeState={initialTreeState}
+                    onCheck={onCheck}
+                    onClick={onClick}
+                    onExpand={onExpand}
+                />
+            </CheckboxTreeProvider>
             <div className="clickable-labels-info">
                 <strong>Clicked Node</strong>
                 {`: ${displayText}`}
diff --git a/examples/src/js/CustomIconsExample.jsx b/examples/src/js/CustomIconsExample.jsx
index ce739952..4a91ece5 100644
--- a/examples/src/js/CustomIconsExample.jsx
+++ b/examples/src/js/CustomIconsExample.jsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
-import CheckboxTree from 'react-checkbox-tree';
+import React from 'react';
+import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-const nodes = [
+const initialTreeState = [
     {
         value: 'Documents',
         label: 'Documents',
@@ -41,27 +41,28 @@ const nodes = [
     },
 ];
 
-function CustomIconsExamples() {
-    const [checked, setChecked] = useState([]);
-    const [expanded, setExpanded] = useState(['Documents']);
-
-    const onCheck = (value) => {
-        setChecked(value);
+function CustomIconsExample() {
+    const onCheck = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label}`);
+        console.log(newTree.getChecked());
     };
 
-    const onExpand = (value) => {
-        setExpanded(value);
+    const onExpand = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
+        console.log(newTree.getExpanded());
     };
 
     return (
-        <CheckboxTree
-            checked={checked}
-            expanded={expanded}
-            nodes={nodes}
-            onCheck={onCheck}
-            onExpand={onExpand}
-        />
+        <CheckboxTreeProvider>
+            <CheckboxTree
+                initialTreeState={initialTreeState}
+                onCheck={onCheck}
+                onExpand={onExpand}
+            />
+        </CheckboxTreeProvider>
     );
 }
 
-export default CustomIconsExamples;
+export default CustomIconsExample;
diff --git a/examples/src/js/DisabledExample.jsx b/examples/src/js/DisabledExample.jsx
index 234fdcf5..0ca8ae19 100644
--- a/examples/src/js/DisabledExample.jsx
+++ b/examples/src/js/DisabledExample.jsx
@@ -1,35 +1,30 @@
-import React, { useState } from 'react';
-import CheckboxTree from 'react-checkbox-tree';
+import React from 'react';
+import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { fileSystem as nodes } from './common';
+import { fileSystem as initialTreeState } from './data';
 
 function DisabledExample() {
-    const [checked, setChecked] = useState([
-        '/app/Http/Controllers/WelcomeController.js',
-        '/app/Http/routes.js',
-        '/public/assets/style.css',
-        '/public/index.html',
-        '/.gitignore',
-    ]);
-    const [expanded, setExpanded] = useState(['/app']);
-
-    const onCheck = (value) => {
-        setChecked(value);
+    const onCheck = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label}`);
+        console.log(newTree.getChecked());
     };
 
-    const onExpand = (value) => {
-        setExpanded(value);
+    const onExpand = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
+        console.log(newTree.getExpanded());
     };
 
     return (
-        <CheckboxTree
-            checked={checked}
-            disabled
-            expanded={expanded}
-            nodes={nodes}
-            onCheck={onCheck}
-            onExpand={onExpand}
-        />
+        <CheckboxTreeProvider>
+            <CheckboxTree
+                disabled
+                initialTreeState={initialTreeState}
+                onCheck={onCheck}
+                onExpand={onExpand}
+            />
+        </CheckboxTreeProvider>
     );
 }
 
diff --git a/examples/src/js/ExpandAllExample.jsx b/examples/src/js/ExpandAllExample.jsx
index ef868c4d..8bc85741 100644
--- a/examples/src/js/ExpandAllExample.jsx
+++ b/examples/src/js/ExpandAllExample.jsx
@@ -1,37 +1,31 @@
-import React, { useState } from 'react';
-import CheckboxTree from 'react-checkbox-tree';
+import React from 'react';
+import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { fileSystem as nodes } from './common';
+import { fileSystem as initialTreeState } from './data';
 
 function ExpandAllExample() {
-    const [checked, setChecked] = useState([
-        '/app/Http/Controllers/WelcomeController.js',
-        '/app/Http/routes.js',
-        '/public/assets/style.css',
-        '/public/index.html',
-        '/.gitignore',
-    ]);
-    const [expanded, setExpanded] = useState(['/app']);
-
-    const onCheck = (value) => {
-        setChecked(value);
+    const onCheck = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label}`);
+        console.log(newTree.getChecked());
     };
 
-    const onExpand = (value) => {
-        setExpanded(value);
+    const onExpand = (changedNodeKey, newTree) => {
+        console.log(changedNodeKey);
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
+        console.log(newTree.getExpanded());
     };
 
     return (
-        <div className="expand-all-container">
+        <CheckboxTreeProvider>
             <CheckboxTree
-                checked={checked}
-                expanded={expanded}
-                nodes={nodes}
+                initialTreeState={initialTreeState}
                 showExpandAll
                 onCheck={onCheck}
                 onExpand={onExpand}
             />
-        </div>
+        </CheckboxTreeProvider>
     );
 }
 
diff --git a/examples/src/js/FilterExample.jsx b/examples/src/js/FilterExample.jsx
index a3e6a671..7e7522c7 100644
--- a/examples/src/js/FilterExample.jsx
+++ b/examples/src/js/FilterExample.jsx
@@ -1,104 +1,95 @@
-import React, { Component } from 'react';
-import CheckboxTree from 'react-checkbox-tree';
-
-import { fileSystem as nodes } from './common';
-
-class FilterExample extends Component {
-    state = {
-        checked: [
-            '/app/Http/Controllers/WelcomeController.js',
-            '/app/Http/routes.js',
-            '/public/assets/style.css',
-            '/public/index.html',
-            '/.gitignore',
-        ],
-        expanded: [
-            '/app',
-        ],
-        filterText: '',
-        filteredNodes: nodes,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.onCheck = this.onCheck.bind(this);
-        this.onExpand = this.onExpand.bind(this);
-        this.onFilterChange = this.onFilterChange.bind(this);
-        this.filterTree = this.filterTree.bind(this);
-        this.filterNodes = this.filterNodes.bind(this);
-    }
-
-    onCheck(checked) {
-        this.setState({ checked });
-    }
+import React, { useEffect, useState } from 'react';
+import CheckboxTree, { CheckboxTreeProvider, useCheckboxTree } from 'react-checkbox-tree';
+
+import { fileSystem as initialTreeState } from './data';
+
+// NOTE: FilterWidget must be within CheckboxTreeProvider
+// so useCheckboxTree can be used in FilterWidget function
+function FilterExample() {
+    return (
+        <CheckboxTreeProvider>
+            <FilterWidget />
+        </CheckboxTreeProvider>
+    );
+}
 
-    onExpand(expanded) {
-        this.setState({ expanded });
-    }
+function FilterWidget() {
+    const [filterText, setFilterText] = useState('');
+    const [activeFilter, setActiveFilter] = useState('');
+    const [timeoutId, setTimeoutId] = useState();
 
-    onFilterChange(e) {
-        this.setState({ filterText: e.target.value }, this.filterTree);
-    }
+    const { treeModel } = useCheckboxTree();
 
-    filterTree() {
-        const { filterText } = this.state;
+    const onCheck = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label}`);
+        console.log(newTree.getChecked());
+    };
 
-        // Reset nodes back to unfiltered state
-        if (!filterText) {
-            this.setState({ filteredNodes: nodes });
+    const onExpand = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
+        console.log(newTree.getExpanded());
+    };
 
-            return;
-        }
+    const onFilterChange = (e) => {
+        setFilterText(e.target.value);
+    };
 
-        this.setState({
-            filteredNodes: nodes.reduce(this.filterNodes, []),
-        });
-    }
+    // function to determine if node meets filter test
+    // returns Boolean
+    const filterTest = (node) => (
+        // node's label matches the search string
+        node.label.toLocaleLowerCase().indexOf(filterText.toLocaleLowerCase()) > -1
+    );
 
-    filterNodes(filtered, node) {
-        const { filterText } = this.state;
-        const children = (node.children || []).reduce(this.filterNodes, []);
+    const getFilteredModel = () => {
+        treeModel.filter(filterTest);
+        setActiveFilter(filterText);
+    };
 
-        if (
-            // Node's label matches the search string
-            node.label.toLocaleLowerCase().indexOf(filterText.toLocaleLowerCase()) > -1 ||
-            // Or a children has a matching node
-            children.length
-        ) {
-            filtered.push({ ...node, children });
+    //--------------------------------------------------------------------------
+    useEffect(() => {
+        // timeout is used here to buffer filter text input
+        // so filtering does not occur on every key press
+        const timeoutDelay = 500; // 0.5 seconds
+        clearTimeout(timeoutId);
+
+        // treeModel may not exist on first call
+        if (treeModel) {
+            if (filterText !== '') {
+                // filter is requested
+                if (filterText !== activeFilter) {
+                    // filter has changed
+                    const newTimeoutId = setTimeout(getFilteredModel, timeoutDelay);
+                    setTimeoutId(newTimeoutId);
+                }
+            } else if (activeFilter !== '') {
+                // no filter requested but there was one previously
+                // restore whole tree
+                treeModel.removeFilter();
+                setActiveFilter('');
+            }
         }
-
-        return filtered;
-    }
-
-    render() {
-        const {
-            checked,
-            expanded,
-            filterText,
-            filteredNodes,
-        } = this.state;
-
-        return (
-            <div className="filter-container">
-                <input
-                    className="filter-text"
-                    placeholder="Search..."
-                    type="text"
-                    value={filterText}
-                    onChange={this.onFilterChange}
-                />
-                <CheckboxTree
-                    checked={checked}
-                    expanded={expanded}
-                    nodes={filteredNodes}
-                    onCheck={this.onCheck}
-                    onExpand={this.onExpand}
-                />
-            </div>
-        );
-    }
+    }, [activeFilter, filterText, treeModel]);
+    //--------------------------------------------------------------------------
+
+    return (
+        <div className="filter-container">
+            <input
+                className="filter-text"
+                placeholder="Search..."
+                type="text"
+                value={filterText}
+                onChange={onFilterChange}
+            />
+            <CheckboxTree
+                initialTreeState={initialTreeState}
+                onCheck={onCheck}
+                onExpand={onExpand}
+            />
+        </div>
+    );
 }
 
 export default FilterExample;
diff --git a/examples/src/js/HiddenCheckboxesExample.jsx b/examples/src/js/HiddenCheckboxesExample.jsx
index 0a41fdaa..20570ac3 100644
--- a/examples/src/js/HiddenCheckboxesExample.jsx
+++ b/examples/src/js/HiddenCheckboxesExample.jsx
@@ -1,39 +1,30 @@
-import React, { useState } from 'react';
-import CheckboxTree from 'react-checkbox-tree';
+import React from 'react';
+import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { empires as nodes } from './common';
+import { empires as initialTreeState } from './data';
 
 function HiddenCheckboxesExample() {
-    const [checked, setChecked] = useState([
-        'persian',
-        'spqr',
-        'byzantine',
-        'holy-roman',
-        'inca',
-    ]);
-    const [expanded, setExpanded] = useState([
-        'favorite-empires',
-        'classical-era',
-        'medieval-era',
-    ]);
-
-    const onCheck = (value) => {
-        setChecked(value);
+    const onCheck = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label}`);
+        console.log(newTree.getChecked());
     };
 
-    const onExpand = (value) => {
-        setExpanded(value);
+    const onExpand = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
+        console.log(newTree.getExpanded());
     };
 
     return (
-        <CheckboxTree
-            checked={checked}
-            expanded={expanded}
-            nodes={nodes}
-            onlyLeafCheckboxes
-            onCheck={onCheck}
-            onExpand={onExpand}
-        />
+        <CheckboxTreeProvider>
+            <CheckboxTree
+                initialTreeState={initialTreeState}
+                onlyLeafCheckboxes
+                onCheck={onCheck}
+                onExpand={onExpand}
+            />
+        </CheckboxTreeProvider>
     );
 }
 
diff --git a/examples/src/js/LargeDataExample.jsx b/examples/src/js/LargeDataExample.jsx
index df0afa55..09ae89af 100644
--- a/examples/src/js/LargeDataExample.jsx
+++ b/examples/src/js/LargeDataExample.jsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import CheckboxTree from 'react-checkbox-tree';
+import React from 'react';
+import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
 function makeLargeDataSet() {
     const parents = [];
@@ -28,28 +28,29 @@ function makeLargeDataSet() {
     }];
 }
 
-const nodes = makeLargeDataSet();
+const initialTreeState = makeLargeDataSet();
 
 function LargeDataExample() {
-    const [checked, setChecked] = useState([]);
-    const [expanded, setExpanded] = useState([]);
-
-    const onCheck = (value) => {
-        setChecked(value);
+    const onCheck = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label}`);
+        console.log(newTree.getChecked());
     };
 
-    const onExpand = (value) => {
-        setExpanded(value);
+    const onExpand = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
+        console.log(newTree.getExpanded());
     };
 
     return (
-        <CheckboxTree
-            checked={checked}
-            expanded={expanded}
-            nodes={nodes}
-            onCheck={onCheck}
-            onExpand={onExpand}
-        />
+        <CheckboxTreeProvider>
+            <CheckboxTree
+                initialTreeState={initialTreeState}
+                onCheck={onCheck}
+                onExpand={onExpand}
+            />
+        </CheckboxTreeProvider>
     );
 }
 
diff --git a/examples/src/js/NativeCheckboxExample.jsx b/examples/src/js/NativeCheckboxExample.jsx
new file mode 100644
index 00000000..74569b5a
--- /dev/null
+++ b/examples/src/js/NativeCheckboxExample.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+
+import { fileSystemRadio as initialTreeState } from './data';
+
+function NativeCheckboxExample() {
+    const onCheck = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label}`);
+        console.log(newTree.getChecked());
+    };
+
+    const onExpand = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
+        console.log(newTree.getExpanded());
+    };
+
+    return (
+        <CheckboxTreeProvider>
+            <CheckboxTree
+                initialTreeState={initialTreeState}
+                nativeCheckboxes
+                onCheck={onCheck}
+                onExpand={onExpand}
+            />
+        </CheckboxTreeProvider>
+    );
+}
+
+export default NativeCheckboxExample;
diff --git a/examples/src/js/NoCascadeExample.jsx b/examples/src/js/NoCascadeExample.jsx
index 3e90da28..30f72866 100644
--- a/examples/src/js/NoCascadeExample.jsx
+++ b/examples/src/js/NoCascadeExample.jsx
@@ -1,38 +1,30 @@
-import React, { useState } from 'react';
-import CheckboxTree from 'react-checkbox-tree';
+import React from 'react';
+import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { fileSystem as nodes } from './common';
+import { fileSystem as initialTreeState } from './data';
 
 function NoCascadeExample() {
-    const [checked, setChecked] = useState([
-        '/app/Http/Controllers/WelcomeController.js',
-        '/app/Http/routes.js',
-        '/public/assets/style.css',
-        '/public/index.html',
-        '/.gitignore',
-    ]);
-    const [expanded, setExpanded] = useState([
-        '/app',
-        '/app/Http',
-    ]);
-
-    const onCheck = (value) => {
-        setChecked(value);
+    const onCheck = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label}`);
+        console.log(newTree.getChecked());
     };
 
-    const onExpand = (value) => {
-        setExpanded(value);
+    const onExpand = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
+        console.log(newTree.getExpanded());
     };
 
     return (
-        <CheckboxTree
-            checked={checked}
-            expanded={expanded}
-            noCascade
-            nodes={nodes}
-            onCheck={onCheck}
-            onExpand={onExpand}
-        />
+        <CheckboxTreeProvider>
+            <CheckboxTree
+                initialTreeState={initialTreeState}
+                noCascade
+                onCheck={onCheck}
+                onExpand={onExpand}
+            />
+        </CheckboxTreeProvider>
     );
 }
 
diff --git a/examples/src/js/PessimisticToggleExample.jsx b/examples/src/js/PessimisticToggleExample.jsx
index 75da120c..de54da1f 100644
--- a/examples/src/js/PessimisticToggleExample.jsx
+++ b/examples/src/js/PessimisticToggleExample.jsx
@@ -1,35 +1,30 @@
-import React, { useState } from 'react';
-import CheckboxTree from 'react-checkbox-tree';
+import React from 'react';
+import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { fileSystem as nodes } from './common';
+import { fileSystem as initialTreeState } from './data';
 
 function PessimisticToggleExample() {
-    const [checked, setChecked] = useState([
-        '/app/Http/Controllers/WelcomeController.js',
-        '/app/Http/routes.js',
-        '/public/assets/style.css',
-        '/public/index.html',
-        '/.gitignore',
-    ]);
-    const [expanded, setExpanded] = useState(['/app']);
-
-    const onCheck = (value) => {
-        setChecked(value);
+    const onCheck = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label}`);
+        console.log(newTree.getChecked());
     };
 
-    const onExpand = (value) => {
-        setExpanded(value);
+    const onExpand = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
+        console.log(newTree.getExpanded());
     };
 
     return (
-        <CheckboxTree
-            checked={checked}
-            expanded={expanded}
-            nodes={nodes}
-            optimisticToggle={false}
-            onCheck={onCheck}
-            onExpand={onExpand}
-        />
+        <CheckboxTreeProvider>
+            <CheckboxTree
+                initialTreeState={initialTreeState}
+                optimisticToggle={false}
+                onCheck={onCheck}
+                onExpand={onExpand}
+            />
+        </CheckboxTreeProvider>
     );
 }
 
diff --git a/examples/src/js/RadioButtonExample.jsx b/examples/src/js/RadioButtonExample.jsx
new file mode 100644
index 00000000..0e2a2e3e
--- /dev/null
+++ b/examples/src/js/RadioButtonExample.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+
+import initialTreeState from './data/mapLayerTree';
+
+function RadioButtonExample() {
+    const onCheck = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label}`);
+        console.log(newTree.getChecked());
+    };
+
+    const onExpand = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
+        console.log(newTree.getExpanded());
+    };
+
+    return (
+        <CheckboxTreeProvider>
+            <CheckboxTree
+                initialTreeState={initialTreeState}
+                onCheck={onCheck}
+                onExpand={onExpand}
+            />
+        </CheckboxTreeProvider>
+    );
+}
+
+export default RadioButtonExample;
diff --git a/examples/src/js/common.js b/examples/src/js/data/empires.js
similarity index 54%
rename from examples/src/js/common.js
rename to examples/src/js/data/empires.js
index 1627822e..5686d7bb 100644
--- a/examples/src/js/common.js
+++ b/examples/src/js/data/empires.js
@@ -1,89 +1,13 @@
-const fileSystem = [
-    {
-        value: '/app',
-        label: 'app',
-        children: [
-            {
-                value: '/app/Http',
-                label: 'Http',
-                children: [
-                    {
-                        value: '/app/Http/Controllers',
-                        label: 'Controllers',
-                        children: [{
-                            value: '/app/Http/Controllers/WelcomeController.js',
-                            label: 'WelcomeController.js',
-                        }],
-                    },
-                    {
-                        value: '/app/Http/routes.js',
-                        label: 'routes.js',
-                    },
-                ],
-            },
-            {
-                value: '/app/Providers',
-                label: 'Providers',
-                children: [{
-                    value: '/app/Providers/EventServiceProvider.js',
-                    label: 'EventServiceProvider.js',
-                }],
-            },
-        ],
-    },
-    {
-        value: '/config',
-        label: 'config',
-        children: [
-            {
-                value: '/config/app.js',
-                label: 'app.js',
-            },
-            {
-                value: '/config/database.js',
-                label: 'database.js',
-            },
-        ],
-    },
-    {
-        value: '/public',
-        label: 'public',
-        children: [
-            {
-                value: '/public/assets/',
-                label: 'assets',
-                children: [{
-                    value: '/public/assets/style.css',
-                    label: 'style.css',
-                }],
-            },
-            {
-                value: '/public/index.html',
-                label: 'index.html',
-            },
-        ],
-    },
-    {
-        value: '/.env',
-        label: '.env',
-    },
-    {
-        value: '/.gitignore',
-        label: '.gitignore',
-    },
-    {
-        value: '/README.md',
-        label: 'README.md',
-    },
-];
 const empires = [
     {
         value: 'favorite-empires',
         label: 'Favorite Empires',
+        expanded: true,
         children: [
             {
                 value: 'classical-era',
                 label: 'Classical Era',
+                expanded: true,
                 children: [
                     {
                         value: 'persian',
@@ -92,6 +16,7 @@ const empires = [
                     {
                         value: 'qin',
                         label: 'Qin Dynasty',
+                        checked: true,
                     },
                     {
                         value: 'spqr',
@@ -102,6 +27,7 @@ const empires = [
             {
                 value: 'medieval-era',
                 label: 'Medieval Era',
+                expanded: true,
                 children: [
                     {
                         value: 'abbasid',
@@ -128,10 +54,12 @@ const empires = [
             {
                 value: 'modern-era',
                 label: 'Modern Era',
+                expanded: true,
                 children: [
                     {
                         value: 'aztec',
                         label: 'Aztec Empire',
+                        checked: true,
                     },
                     {
                         value: 'british',
@@ -144,6 +72,7 @@ const empires = [
                     {
                         value: 'qing',
                         label: 'Qing Dynasty',
+                        checked: true,
                     },
                     {
                         value: 'russian',
@@ -159,7 +88,4 @@ const empires = [
     },
 ];
 
-export {
-    fileSystem,
-    empires,
-};
+export default empires;
diff --git a/examples/src/js/data/fileSystem.js b/examples/src/js/data/fileSystem.js
new file mode 100644
index 00000000..579896cb
--- /dev/null
+++ b/examples/src/js/data/fileSystem.js
@@ -0,0 +1,80 @@
+const fileSystem = [
+    {
+        value: '/app',
+        label: 'app',
+        children: [
+            {
+                value: '/app/Http',
+                label: 'Http',
+                children: [
+                    {
+                        value: '/app/Http/Controllers',
+                        label: 'Controllers',
+                        children: [{
+                            value: '/app/Http/Controllers/WelcomeController.js',
+                            label: 'WelcomeController.js',
+                        }],
+                    },
+                    {
+                        value: '/app/Http/routes.js',
+                        label: 'routes.js',
+                    },
+                ],
+            },
+            {
+                value: '/app/Providers',
+                label: 'Providers',
+                children: [{
+                    value: '/app/Providers/EventServiceProvider.js',
+                    label: 'EventServiceProvider.js',
+                }],
+            },
+        ],
+    },
+    {
+        value: '/config',
+        label: 'config',
+        children: [
+            {
+                value: '/config/app.js',
+                label: 'app.js',
+            },
+            {
+                value: '/config/database.js',
+                label: 'database.js',
+            },
+        ],
+    },
+    {
+        value: '/public',
+        label: 'public',
+        children: [
+            {
+                value: '/public/assets/',
+                label: 'assets',
+                children: [{
+                    value: '/public/assets/style.css',
+                    label: 'style.css',
+                }],
+            },
+            {
+                value: '/public/index.html',
+                label: 'index.html',
+            },
+        ],
+    },
+    {
+        value: '/.env',
+        label: '.env',
+    },
+    {
+        value: '/.gitignore',
+        label: '.gitignore',
+    },
+    {
+        value: '/README.md',
+        label: 'README.md',
+    },
+];
+
+export default fileSystem;
diff --git a/examples/src/js/data/fileSystemRadio.js b/examples/src/js/data/fileSystemRadio.js
new file mode 100644
index 00000000..e2d157b6
--- /dev/null
+++ b/examples/src/js/data/fileSystemRadio.js
@@ -0,0 +1,83 @@
+const fileSystem = [
+    {
+        value: '/app',
+        label: 'app',
+        children: [
+            {
+                value: '/app/Http',
+                label: 'Http',
+                children: [
+                    {
+                        value: '/app/Http/Controllers',
+                        label: 'Controllers',
+                        children: [{
+                            value: '/app/Http/Controllers/WelcomeController.js',
+                            label: 'WelcomeController.js',
+                        }],
+                    },
+                    {
+                        value: '/app/Http/routes.js',
+                        label: 'routes.js',
+                    },
+                ],
+            },
+            {
+                value: '/app/Providers',
+                label: 'Providers',
+                children: [{
+                    value: '/app/Providers/EventServiceProvider.js',
+                    label: 'EventServiceProvider.js',
+                }],
+            },
+        ],
+    },
+    {
+        value: '/config',
+        label: 'config',
+        expanded: true,
+        isRadioGroup: true,
+        children: [
+            {
+                value: '/config/app.js',
+                label: 'app.js',
+                checked: true,
+            },
+            {
+                value: '/config/database.js',
+                label: 'database.js',
+            },
+        ],
+    },
+    {
+        value: '/public',
+        label: 'public',
+        children: [
+            {
+                value: '/public/assets/',
+                label: 'assets',
+                children: [{
+                    value: '/public/assets/style.css',
+                    label: 'style.css',
+                }],
+            },
+            {
+                value: '/public/index.html',
+                label: 'index.html',
+            },
+        ],
+    },
+    {
+        value: '/.env',
+        label: '.env',
+    },
+    {
+        value: '/.gitignore',
+        label: '.gitignore',
+    },
+    {
+        value: '/README.md',
+        label: 'README.md',
+    },
+];
+
+export default fileSystem;
diff --git a/examples/src/js/data/index.js b/examples/src/js/data/index.js
new file mode 100644
index 00000000..0e477ab4
--- /dev/null
+++ b/examples/src/js/data/index.js
@@ -0,0 +1,4 @@
+export { default as fileSystem } from './fileSystem';
+export { default as fileSystemRadio } from './fileSystemRadio';
+export { default as mapLayerTree } from './mapLayerTree';
+export { default as empires } from './empires';
diff --git a/examples/src/js/data/mapLayerTree.js b/examples/src/js/data/mapLayerTree.js
new file mode 100644
index 00000000..5b958301
--- /dev/null
+++ b/examples/src/js/data/mapLayerTree.js
@@ -0,0 +1,736 @@
+const mapLayerTree = [
+    {
+        label: 'map layers',
+        value: 'map_layers',
+        expanded: false,
+        children: [
+            {
+                label: 'Boundaries',
+                value: 'Boundaries',
+                mtype: 'Container',
+                checked: true,
+                expanded: true,
+                children: [{
+                    label: 'County Boundary',
+                    value: 'County Boundary',
+                    layerName: 'boundary',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }, {
+                    label: 'Airport Zoning District',
+                    value: 'Airport Zoning District',
+                    layerName: 'Airport Zone',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Buckhorn Res. Protection Area',
+                    value: 'Buckhorn Res. Protection Area',
+                    layerName: 'Buckhorn Area',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2000 Census Tract',
+                    value: '2000 Census Tract',
+                    layerName: 'Census Tract',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'City Limits',
+                    value: 'City Limits',
+                    layerName: 'City_Limits',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }, {
+                    label: 'Dwarf Wedge Mussel Habitat',
+                    value: 'Dwarf Wedge Mussel Habitat',
+                    layerName: 'Mussel_Habitat',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Elections',
+                    value: 'Elections',
+                    mtype: 'Container',
+                    isRadioGroup: true,
+                    checked: false,
+                    expanded: true,
+                    children: [{
+                        label: 'Commissioner Districts',
+                        value: 'Commissioner Districts',
+                        layerName: 'Commissioner',
+                        mtype: 'SingleLayer',
+                        checked: true,
+                    }, {
+                        label: 'Voting Precincts',
+                        value: 'Voting Precincts',
+                        layerName: 'Voting_Districts-background',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'Voting Locations',
+                        value: 'Voting Locations',
+                        layerName: 'Voting_Locations',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'NC House Districts',
+                        value: 'NC House Districts',
+                        layerName: 'NC_House_Districts',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'NC Senate Districts',
+                        value: 'NC Senate Districts',
+                        layerName: 'NC_Senate_Districts',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'US Congressional Districts',
+                        value: 'US Congressional Districts',
+                        layerName: 'US_Congressional_Districts',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'Voting Tabulation Districts',
+                        value: 'Voting Tabulation Districts',
+                        layerName: 'Voting_Tabulation_Districts',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }],
+                }, {
+                    label: 'Electric Districts',
+                    value: 'Electric Districts',
+                    layerName: 'Electric_Power_Districts',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'EMS Districts',
+                    value: 'EMS Districts',
+                    layerName: 'EMS_Districts',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Environmental',
+                    value: 'Environmental',
+                    mtype: 'Container',
+                    checked: false,
+                    expanded: false,
+                    children: [{
+                        label: 'Environmental Boundary',
+                        value: 'Environmental Boundary',
+                        layerName: 'Enviromental_Boundary',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'Inspection Areas',
+                        value: 'Inspection Areas',
+                        layerName: 'Inspection_Areas',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }],
+                }, {
+                    label: 'Enviromentally Sensitive District',
+                    value: 'Enviromentally Sensitive District',
+                    layerName: 'Enviromentally_Sensitive_District',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Fire Districts',
+                    value: 'Fire Districts',
+                    layerName: 'Fire_Districts',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Townships',
+                    value: 'Townships',
+                    layerName: 'Townships',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Vol. Agriculture Districts/Qualifying Farms',
+                    value: 'Voluntary Agriculture Districts/Qualifying Farms',
+                    layerName: 'Voluntary_Agricultural_Districts',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }, {
+                    label: 'Water Districts',
+                    value: 'Water Districts',
+                    layerName: 'Water_Districts',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Watersupply Watersheds',
+                    value: 'Watersupply Watersheds',
+                    layerName: 'Watersheds',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Zip Code',
+                    value: 'Zip Code',
+                    layerName: 'Zipcodes',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }],
+            }, {
+                label: 'Community',
+                value: 'Community',
+                mtype: 'Container',
+                checked: false,
+                expanded: true,
+                isRadioGroup: true,
+                children: [{
+                    label: 'Civic',
+                    value: 'Civic',
+                    mtype: 'Container',
+                    checked: true,
+                    expanded: true,
+                    children: [{
+                        label: 'Convenience Sites',
+                        value: 'Convenience Sites',
+                        layerName: 'Convenience_Sites',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'EMS Locations',
+                        value: 'EMS Locations',
+                        layerName: 'EMSLocations',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'Fire Departments',
+                        value: 'Fire Departments',
+                        layerName: 'FireDeptLocations',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'Hospitals',
+                        value: 'Hospitals',
+                        layerName: 'Hospitals',
+                        mtype: 'SingleLayer',
+                        checked: true,
+                    }, {
+                        label: 'Law Enforcement',
+                        value: 'Law Enforcement',
+                        layerName: 'Law_Enforcement',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'Libraries',
+                        value: 'Libraries',
+                        layerName: 'Libraries',
+                        mtype: 'SingleLayer',
+                        checked: true,
+                    }, {
+                        label: 'Post Offices',
+                        value: 'Post Offices',
+                        layerName: 'Post_Offices',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'Urgent Care',
+                        value: 'Urgent Care',
+                        layerName: 'Urgent_Care',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }],
+                }, {
+                    label: 'Places of Interest',
+                    value: 'Places of Interest',
+                    mtype: 'Container',
+                    checked: false,
+                    expanded: true,
+                    children: [{
+                        label: 'Arts & Entertainment',
+                        value: 'Arts & Entertainment',
+                        layerName: 'Arts_Entertainment',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'Hotels',
+                        value: 'Hotels',
+                        layerName: 'Hotels',
+                        mtype: 'SingleLayer',
+                        checked: true,
+                    }, {
+                        label: 'Meeting/Assembly Venues',
+                        value: 'Meeting/Assembly Venues',
+                        layerName: 'Meeting_Venues',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'Museums & Heritage',
+                        value: 'Museums & Heritage',
+                        layerName: 'Heritage',
+                        mtype: 'SingleLayer',
+                        checked: true,
+                    }, {
+                        label: 'Places of Worship',
+                        value: 'Places of Worship',
+                        layerName: 'PlacesOfWorship',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'Recreation',
+                        value: 'Recreation',
+                        layerName: 'Recreation',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'Restaurants',
+                        value: 'Restaurants',
+                        layerName: 'Restaurants',
+                        mtype: 'SingleLayer',
+                        checked: true,
+                    }, {
+                        label: 'Shopping',
+                        value: 'Shopping',
+                        layerName: 'Shopping',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'Wineries & Breweries',
+                        value: 'Wineries & Breweries',
+                        layerName: 'Wineries_Breweries',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }],
+                }],
+            }, {
+                label: 'Index',
+                value: 'Index',
+                mtype: 'Container',
+                expanded: true,
+                isRadioGroup: true,
+                children: [{
+                    label: 'Block',
+                    value: 'Block',
+                    layerName: 'Block_Index',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }, {
+                    label: 'FIRM',
+                    value: 'FIRM',
+                    layerName: 'FEMA_Index',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Map',
+                    value: 'Map',
+                    layerName: 'Map_Index',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }],
+            }, {
+                label: 'Land Features',
+                value: 'Land Features',
+                mtype: 'Container',
+                children: [{
+                    label: 'Cell Towers',
+                    value: 'Cell Towers',
+                    layerName: 'Cell_Towers',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2 Ft Elevation Contours',
+                    value: '2 Ft Elevation Contours',
+                    layerName: '2-ft_contours',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '10 Ft Elevation Contours',
+                    value: '10 Ft Elevation Contours',
+                    layerName: '10-ft_contours',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2018 Flood Zones',
+                    value: '2018 Flood Zones',
+                    layerName: '2018_Flood_Zones',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2001 Land Cover',
+                    value: '2001 Land Cover',
+                    layerName: 'Land_Cover',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2018 Land Cover',
+                    value: '2018 Land Cover',
+                    layerName: 'Land_Cover_2018',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Proposed Mountain to Sea Trail',
+                    value: 'Proposed Mountain to Sea Trail',
+                    layerName: 'Mountain_to_Sea_Trail',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Soils - colors',
+                    value: 'Soils - colors',
+                    layerName: 'Soils',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Soil Contours',
+                    value: 'Soil Contours',
+                    layerName: 'Soil_Contours',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Survey Monument Locations',
+                    value: 'Survey Monument Locations',
+                    layerName: 'Monuments',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Water Features',
+                    value: 'Water Features',
+                    layerName: 'Hydrology',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }],
+            }, {
+                label: 'Orthophotos',
+                value: 'Orthophotos',
+                isRadioGroup: true,
+                mtype: 'Container',
+                checked: false,
+                expanded: false,
+                radioGroup: true,
+                children: [{
+                    label: 'Soil Orthophotos',
+                    value: 'Soil Orthophotos',
+                    layerName: 'Soil_Orthophotos',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Orthophotos thru Time',
+                    value: 'Orthophotos thru Time',
+                    layerName: 'Orthophotos thru Time',
+                    layerNames: '2001_Orthophotos,2005_Orthophotos,2010_Orthophotos,2013_Orthophotos,2017_Orthophotos,2021_Orthophotos',
+                    mtype: 'MultiLayer',
+                    checked: false,
+                }, {
+                    label: '2001 Orthophotos',
+                    value: '2001 Orthophotos',
+                    layerName: '2001_Orthophotos',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2005 Orthophotos',
+                    value: '2005 Orthophotos',
+                    layerName: '2005_Orthophotos',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2010 Orthophotos',
+                    value: '2010 Orthophotos',
+                    layerName: '2010_Orthophotos',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2013 Orthophotos',
+                    value: '2013 Orthophotos',
+                    layerName: '2013_Orthophotos',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2017 Orthophotos',
+                    value: '2017 Orthophotos',
+                    layerName: '2017_Orthophotos',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2021 Orthophotos',
+                    value: '2021 Orthophotos',
+                    layerName: '2021_Orthophotos',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }],
+            }, {
+                label: 'Parcel',
+                value: 'Parcel',
+                mtype: 'Container',
+                checked: false,
+                expanded: true,
+                children: [{
+                    label: 'Address Points',
+                    value: 'Address Points',
+                    layerName: 'Address_Points',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }, {
+                    label: 'Building Footprints',
+                    value: 'Building Footprints',
+                    layerName: 'Building_Footprints_2010',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Farm Use',
+                    value: 'Farm Use',
+                    layerName: 'Farm_Use',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Parcels',
+                    value: 'Parcels',
+                    layerName: 'Parcels',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }, {
+                    label: 'Parcel Text & Symbols',
+                    value: 'Parcel Text & Symbols',
+                    mtype: 'Container',
+                    checked: true,
+                    expanded: true,
+                    isRadioGroup: true,
+                    children: [{
+                        label: 'Parcel Text',
+                        value: 'Parcel Text',
+                        mtype: 'Container',
+                        checked: true,
+                        expanded: true,
+                        isRadioGroup: true,
+                        children: [{
+                            label: 'Misc.',
+                            value: 'Misc.',
+                            layerName: 'Parcel_Text-misc',
+                            mtype: 'SingleLayer',
+                            checked: false,
+                        }, {
+                            label: 'Pin Number',
+                            value: 'Pin Number',
+                            layerName: 'Parcel_Text-pin_number',
+                            mtype: 'SingleLayer',
+                            checked: true,
+                        }, {
+                            label: 'Acreage',
+                            value: 'Acreage',
+                            layerName: 'Parcel_Text-acreage',
+                            mtype: 'SingleLayer',
+                            checked: false,
+                        }, {
+                            label: 'Dimensions',
+                            value: 'Dimensions',
+                            layerName: 'Parcel_Text-dimensions',
+                            mtype: 'SingleLayer',
+                            checked: false,
+                        }, {
+                            label: 'Parcel Text-index',
+                            value: 'Parcel_Text-index',
+                            layerName: 'Parcel_Text-index',
+                            mtype: 'SingleLayer',
+                            checked: false,
+                        }, {
+                            label: 'Street Names',
+                            value: 'Street Names',
+                            layerName: 'Parcel_Text-street_names',
+                            mtype: 'SingleLayer',
+                            checked: false,
+                        }],
+                    }, {
+                        label: 'Lotlines',
+                        value: 'Lotlines',
+                        layerName: 'Parcel_Lotlines',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'Symbols',
+                        value: 'Symbols',
+                        layerName: 'Parcel_Symbols',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }],
+                }, {
+                    label: 'Permits',
+                    value: 'Permits',
+                    layerName: 'Permits',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Qualified Sales >= 2011',
+                    value: 'Qualified Sales >= 2011',
+                    layerName: 'Parcel_Sales',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Zoning',
+                    value: 'Zoning',
+                    layerName: 'Zoning',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }],
+            }, {
+                label: 'Residential',
+                value: 'Residential',
+                mtype: 'Container',
+                checked: false,
+                expanded: false,
+                children: [{
+                    label: 'Condominium Locations',
+                    value: 'Condominium Locations',
+                    layerName: 'Condos',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Mobile Home Park',
+                    value: 'Mobile Home Park',
+                    layerName: 'Mobile_Home_Parks',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Neighborhoods',
+                    value: 'Neighborhoods',
+                    layerName: 'Neighborhoods',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Subdivision',
+                    value: 'Subdivision',
+                    layerName: 'Subdivisions',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }],
+            }, {
+                label: 'Schools',
+                value: 'Schools',
+                mtype: 'Container',
+                checked: false,
+                expanded: true,
+                isRadioGroup: true,
+                children: [{
+                    label: 'School Locations',
+                    value: 'School Locations',
+                    layerName: 'Schools',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Elementary School Districts',
+                    value: 'Elementary School Districts',
+                    layerName: 'Elementary_School_Districts',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Middle School Districts',
+                    value: 'Middle School Districts',
+                    layerName: 'Middle_School_Districts',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'High School Districts',
+                    value: 'High School Districts',
+                    layerName: 'High_School_Districts',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }, {
+                    label: 'Elementary School Districts-background',
+                    value: 'Elementary School Districts-background',
+                    layerName: 'Elem_Sch_Dist-background',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Middle School Districts-background',
+                    value: 'Middle School Districts-background',
+                    layerName: 'Mid_Sch_Dist-background',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'High School Districts-background',
+                    value: 'High School Districts-background',
+                    layerName: 'High_Sch_Dist-background',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }],
+            }, {
+                label: 'Transportation',
+                value: 'Transportation',
+                mtype: 'Container',
+                expanded: false,
+                children: [{
+                    label: 'Arterial and Collector Roads',
+                    value: 'Arterial and Collector Roads',
+                    layerName: 'Arterial_Collector_Roads',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Street Center Line',
+                    value: 'Street Center Line',
+                    layerName: 'Streets',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }, {
+                    label: 'Text',
+                    value: 'Text',
+                    mtype: 'Container',
+                    checked: true,
+                    expanded: true,
+                    isRadioGroup: true,
+                    children: [{
+                        label: 'Highway Text',
+                        value: 'Highway Text',
+                        layerName: 'Highway_annotation',
+                        mtype: 'SingleLayer',
+                        checked: false,
+                    }, {
+                        label: 'Street Text',
+                        value: 'Street Text',
+                        layerName: 'Streets_Text',
+                        mtype: 'SingleLayer',
+                        checked: true,
+                    }],
+                }],
+            }, {
+                label: 'Utilities',
+                value: 'Utilities',
+                mtype: 'Container',
+                children: [{
+                    label: 'Municipal Fire Hydrants',
+                    value: 'Municipal Fire Hydrants',
+                    layerName: 'Municipal_Hydrants',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'County Fire Hydrants',
+                    value: 'County Fire Hydrants',
+                    layerName: 'County_Hydrants',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Sewer Lines',
+                    value: 'Sewer Lines',
+                    layerName: 'Sewerlines',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Water Lines',
+                    value: 'Water Lines',
+                    layerName: 'Waterlines',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'East Water System (PWS 40-51-018)',
+                    value: 'East_Water_System_(PWS_40-51-018)',
+                    layerName: 'East_Water_System',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'West Water System (PWS 03-51-070)',
+                    value: 'West_Water_System_(PWS_03-51-070)',
+                    layerName: 'West_Water_System',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }],
+            }, {
+                label: 'Base Layer',
+                value: 'Base Layer',
+                layerName: 'basemap',
+                mtype: 'SingleLayer',
+                checked: true,
+                disabled: true,
+            },
+        ],
+    },
+];
+
+export default mapLayerTree;
diff --git a/src/index.js b/src/index.js
index b29e3094..eee79534 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,6 @@
 import CheckboxTree from './js/CheckboxTree';
+import { CheckboxTreeProvider, useCheckboxTree } from './js/CheckboxTreeContext';
+import TreeModel from './js/models/TreeModel';
 
 export default CheckboxTree;
-export * from './js/utils';
+export { CheckboxTreeProvider, useCheckboxTree, TreeModel };
diff --git a/src/js/CheckboxTree.jsx b/src/js/CheckboxTree.jsx
index 1a1769c9..0f4ef774 100644
--- a/src/js/CheckboxTree.jsx
+++ b/src/js/CheckboxTree.jsx
@@ -1,8 +1,12 @@
 import classNames from 'classnames';
-import isEqual from 'lodash/isEqual';
+// import isEqual from 'lodash/isEqual';
 import memoize from 'lodash/memoize';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect } from 'react';
+
+// import CheckboxTreeError from './CheckboxTreeError';
+
+import TreeModel from './models/TreeModel';
 
 import GlobalActions from './components/GlobalActions';
 import HiddenInput from './components/HiddenInput';
@@ -10,11 +14,12 @@ import TreeNode from './components/TreeNode';
 import defaultLang from './lang/default';
 import iconsShape from './shapes/iconsShape';
 import languageShape from './shapes/languageShape';
-import listShape from './shapes/listShape';
+// import listShape from './shapes/listShape';
 import nodeShape from './shapes/nodeShape';
-import { CHECK_MODEL, KEYS } from './constants';
+// import treeShape from './shapes/treeShape';
+import { KEYS } from './constants';
 import { IconContext, LanguageContext } from './contexts';
-import NodeModel from './NodeModel';
+import { useCheckboxTree } from './CheckboxTreeContext';
 
 const combineMemoized = memoize((newValue, defaultValue) => ({ ...defaultValue, ...newValue }));
 
@@ -29,269 +34,153 @@ const defaultIcons = {
     parentClose: <span className="rct-icon rct-icon-parent-close" />,
     parentOpen: <span className="rct-icon rct-icon-parent-open" />,
     leaf: <span className="rct-icon rct-icon-leaf" />,
+    radioOff: <span className="rct-icon rct-icon-radio-off" />,
+    radioOn: <span className="rct-icon rct-icon-radio-on" />,
 };
 
-class CheckboxTree extends React.Component {
-    static propTypes = {
-        nodes: PropTypes.arrayOf(nodeShape).isRequired,
-
-        checkKeys: PropTypes.arrayOf(PropTypes.string),
-        checkModel: PropTypes.oneOf([CHECK_MODEL.LEAF, CHECK_MODEL.ALL]),
-        checked: listShape,
-        direction: PropTypes.string,
-        disabled: PropTypes.bool,
-        expandDisabled: PropTypes.bool,
-        expandOnClick: PropTypes.bool,
-        expanded: listShape,
-        icons: iconsShape,
-        iconsClass: PropTypes.string,
-        id: PropTypes.string,
-        lang: languageShape,
-        name: PropTypes.string,
-        nameAsArray: PropTypes.bool,
-        nativeCheckboxes: PropTypes.bool,
-        noCascade: PropTypes.bool,
-        onlyLeafCheckboxes: PropTypes.bool,
-        optimisticToggle: PropTypes.bool,
-        showExpandAll: PropTypes.bool,
-        showNodeIcon: PropTypes.bool,
-        showNodeTitle: PropTypes.bool,
-        onCheck: PropTypes.func,
-        onClick: PropTypes.func,
-        onContextMenu: PropTypes.func,
-        onExpand: PropTypes.func,
-    };
-
-    static defaultProps = {
-        checkKeys: [KEYS.SPACEBAR, KEYS.ENTER],
-        checkModel: CHECK_MODEL.LEAF,
-        checked: [],
-        direction: 'ltr',
-        disabled: false,
-        expandDisabled: false,
-        expandOnClick: false,
-        expanded: [],
-        icons: defaultIcons,
-        iconsClass: 'fa5',
-        id: null,
-        lang: defaultLang,
-        name: undefined,
-        nameAsArray: false,
-        nativeCheckboxes: false,
-        noCascade: false,
-        onlyLeafCheckboxes: false,
-        optimisticToggle: true,
-        showExpandAll: false,
-        showNodeIcon: true,
-        showNodeTitle: false,
-        onCheck: () => {},
-        onClick: null,
-        onContextMenu: null,
-        onExpand: () => {},
-    };
-
-    constructor(props) {
-        super(props);
-
-        const model = new NodeModel(props);
-        model.flattenNodes(props.nodes);
-        model.deserializeLists({
-            checked: props.checked,
-            expanded: props.expanded,
-        });
-
-        this.state = {
-            model,
-            prevProps: props,
+export default function CheckboxTree({
+    direction,
+    disabled,
+    expandDisabled,
+    icons,
+    iconsClass,
+    id,
+    lang,
+    name,
+    nameAsArray,
+    nativeCheckboxes,
+    showExpandAll,
+    initialTreeState,
+    checkKeys,
+    expandOnClick,
+    onCheck,
+    onClick,
+    onContextMenu,
+    onExpand,
+    onlyLeafCheckboxes,
+    showNodeTitle,
+    showNodeIcon,
+    // for tree model
+    checkModel,
+    noCascade,
+    optimisticToggle,
+}) {
+    const mergedLang = combineMemoized(lang, defaultLang);
+    const mergedIcons = combineMemoized(icons, defaultIcons);
+
+    // get the treeModel from CheckboxTreeProvider
+    const { treeModel, setTreeModel } = useCheckboxTree();
+
+    //--------------------------------------------------------------------------
+    // insert the inital tree state into TreeModel
+    useEffect(() => {
+        // options are from props
+        const options = {
+            checkModel, disabled, noCascade, optimisticToggle, setTreeModel,
         };
 
-        this.onCheck = this.onCheck.bind(this);
-        this.onContextMenu = this.onContextMenu.bind(this);
-        this.onExpand = this.onExpand.bind(this);
-        this.onNodeClick = this.onNodeClick.bind(this);
-        this.onExpandAll = this.onExpandAll.bind(this);
-        this.onCollapseAll = this.onCollapseAll.bind(this);
-    }
-
-    static getDerivedStateFromProps(newProps, prevState) {
-        const { model, prevProps } = prevState;
-        const { disabled, nodes } = newProps;
-        const newState = { ...prevState, prevProps: newProps };
+        const newTreeModel = new TreeModel(initialTreeState, options);
+        setTreeModel(newTreeModel);
+    }, [initialTreeState]);
 
-        // Apply new properties to model
-        model.setProps(newProps);
+    // TODO: how to handle changed props?
 
-        // Since flattening nodes is an expensive task, only update when there is a node change
-        if (!isEqual(prevProps.nodes, nodes) || prevProps.disabled !== disabled) {
-            model.reset();
-            model.flattenNodes(nodes);
-        }
-
-        model.deserializeLists({
-            checked: newProps.checked,
-            expanded: newProps.expanded,
-        });
+    //--------------------------------------------------------------------------
 
-        return newState;
+    // there is no treeModel until first useEffect above is run
+    if (!(treeModel instanceof TreeModel)) {
+        return null;
     }
 
-    onContextMenu(node) {
-        const { onContextMenu } = this.props;
+    //--------------------------------------------------------------------------
+    // methods
 
-        return (event) => {
-            onContextMenu(event, node);
-        };
-    }
+    const onCheckHandler = (nodeKey) => {
+        const newTreeModel = treeModel.toggleChecked(nodeKey);
 
-    onCheck(nodeInfo) {
-        const { checkModel, noCascade, onCheck } = this.props;
-        const { model } = this.state;
-        const newModel = model.clone();
-        const node = newModel.getNode(nodeInfo.value);
-
-        newModel.toggleChecked(nodeInfo, nodeInfo.checked, checkModel, noCascade);
-        onCheck(newModel.serializeList('checked'), { ...node, ...nodeInfo });
-    }
+        // TODO: should toggleChecked return false if no change??
+        // probably...
 
-    onExpand(nodeInfo) {
-        const { onExpand } = this.props;
-        const { model } = this.state;
-        const newModel = model.clone();
-        const node = newModel.getNode(nodeInfo.value);
-
-        newModel.toggleNode(nodeInfo.value, 'expanded', nodeInfo.expanded);
-        onExpand(newModel.serializeList('expanded'), { ...node, ...nodeInfo });
-    }
-
-    onNodeClick(nodeInfo) {
-        const { onClick } = this.props;
-        const { model } = this.state;
-        const node = model.getNode(nodeInfo.value);
-
-        onClick({ ...node, ...nodeInfo });
-    }
-
-    onExpandAll() {
-        this.expandAllNodes();
-    }
-
-    onCollapseAll() {
-        this.expandAllNodes(false);
-    }
-
-    expandAllNodes(expand = true) {
-        const { onExpand } = this.props;
-        const { model } = this.state;
-
-        onExpand(
-            model.clone()
-                .expandAllNodes(expand)
-                .serializeList('expanded'),
-        );
-    }
-
-    determineShallowCheckState(node, noCascade) {
-        const { model } = this.state;
-        const flatNode = model.getNode(node.value);
-
-        if (flatNode.isLeaf || noCascade || node.children.length === 0) {
-            // Note that an empty parent node tracks its own state
-            return flatNode.checked ? 1 : 0;
+        // toggleChecked returns original treeModel if the check is not
+        // changed due to being disabled or being an already checked
+        // radio node so we ignore the check change attempt
+        if (newTreeModel !== treeModel) {
+            setTreeModel(newTreeModel);
+            onCheck(nodeKey, newTreeModel);
         }
+    };
 
-        if (this.isEveryChildChecked(node)) {
-            return 1;
-        }
+    const onCollapseAll = () => {
+        const newTreeModel = treeModel.expandAllNodes(false);
+        onExpand('', newTreeModel);
+        setTreeModel(newTreeModel);
+    };
 
-        if (this.isSomeChildChecked(node)) {
-            return 2;
-        }
+    // TODO: this needs review
+    const onContextMenuHandler = (node) => (event) => {
+        onContextMenu(event, node);
+    };
 
-        return 0;
-    }
+    const onExpandHandler = (nodeKey) => {
+        const newTreeModel = treeModel.toggleExpanded(nodeKey);
+        setTreeModel(newTreeModel);
+        onExpand(nodeKey, newTreeModel);
+    };
 
-    isEveryChildChecked(node) {
-        const { model } = this.state;
+    const onExpandAll = () => {
+        if (!expandDisabled) {
+            const newTreeModel = treeModel.expandAllNodes(true);
+            setTreeModel(newTreeModel);
+            onExpand('', newTreeModel);
+        }
+    };
 
-        return node.children.every(
-            (child) => model.getNode(child.value).checkState === 1,
-        );
-    }
+    const onNodeClick = (nodeKey) => {
+        onClick(treeModel.getNode(nodeKey));
+    };
 
-    isSomeChildChecked(node) {
-        const { model } = this.state;
+    const renderTreeNodes = (childKeys) => {
+        const treeNodes = childKeys.map((nodeKey) => {
+            const node = treeModel.getNode(nodeKey);
+            const parent = node.parentKey ? treeModel.getNode(node.parentKey) : null;
 
-        return node.children.some(
-            (child) => model.getNode(child.value).checkState > 0,
-        );
-    }
+            // render only if not marked hidden by filter or
+            // if parent is expanded or if there is no parent
+            const parentExpanded = parent ? parent.expanded : true;
+            if (node.isHiddenByFilter || !parentExpanded) {
+                return null;
+            }
 
-    renderTreeNodes(nodes, parent = {}) {
-        const {
-            checkKeys,
-            expandDisabled,
-            expandOnClick,
-            id,
-            noCascade,
-            onClick,
-            onlyLeafCheckboxes,
-            optimisticToggle,
-            showNodeTitle,
-            showNodeIcon,
-        } = this.props;
-        const { model } = this.state;
-
-        const treeNodes = nodes.map((node) => {
-            const key = node.value;
-            const flatNode = model.getNode(node.value);
-            const children = flatNode.isParent ? this.renderTreeNodes(node.children, node) : null;
-
-            // Determine the check state after all children check states have been determined
-            // This is done during rendering as to avoid an additional loop during the
-            // deserialization of the `checked` property
-            flatNode.checkState = this.determineShallowCheckState(node, noCascade);
+            // render child nodes here after determining to render this node
+            const children = node.isParent ? renderTreeNodes(node.childKeys) : null;
 
             // Show checkbox only if this is a leaf node or showCheckbox is true
-            const showCheckbox = onlyLeafCheckboxes ? flatNode.isLeaf : flatNode.showCheckbox;
-
-            // Render only if parent is expanded or if there is no root parent
-            const parentExpanded = parent.value ? model.getNode(parent.value).expanded : true;
-
-            if (!parentExpanded) {
-                return null;
-            }
+            const showCheckbox = onlyLeafCheckboxes ? node.isLeaf : node.showCheckbox;
 
             // Prepare node information for context menu usage
             const nodeContext = {
                 ...node,
-                checked: flatNode.checkState,
-                expanded: flatNode.expanded,
+                checked: node.checkState,
+                expanded: node.expanded,
             };
 
             return (
                 <TreeNode
-                    key={key}
+                    key={node.value}
                     checkKeys={checkKeys}
-                    checked={flatNode.checkState}
-                    className={node.className}
-                    disabled={flatNode.disabled}
+                    disabled={disabled}
                     expandDisabled={expandDisabled}
                     expandOnClick={expandOnClick}
-                    expanded={flatNode.expanded}
-                    icon={node.icon}
-                    isLeaf={flatNode.isLeaf}
-                    isParent={flatNode.isParent}
-                    label={node.label}
-                    optimisticToggle={optimisticToggle}
+                    noCascade={noCascade}
+                    node={node}
                     showCheckbox={showCheckbox}
                     showNodeIcon={showNodeIcon}
                     title={showNodeTitle ? node.title || node.label : node.title}
                     treeId={id}
-                    value={node.value}
-                    onCheck={this.onCheck}
-                    onClick={onClick && this.onNodeClick}
-                    onContextMenu={this.onContextMenu(nodeContext)}
-                    onExpand={this.onExpand}
+                    onCheck={onCheckHandler}
+                    onClick={onClick && onNodeClick}
+                    onContextMenu={onContextMenuHandler(nodeContext)}
+                    onExpand={onExpandHandler}
                 >
                     {children}
                 </TreeNode>
@@ -303,59 +192,98 @@ class CheckboxTree extends React.Component {
                 {treeNodes}
             </ol>
         );
-    }
-
-    renderGlobalOptions() {
-        const { showExpandAll } = this.props;
-
-        return showExpandAll ? (
-            <GlobalActions onCollapseAll={this.onCollapseAll} onExpandAll={this.onExpandAll} />
-        ) : null;
-    }
-
-    renderHiddenInput() {
-        const { checked, name, nameAsArray } = this.props;
-
-        return name !== undefined ? (
-            <HiddenInput checked={checked} name={name} nameAsArray={nameAsArray} />
-        ) : null;
-    }
-
-    render() {
-        const {
-            direction,
-            disabled,
-            icons,
-            iconsClass,
-            id,
-            lang,
-            nodes,
-            nativeCheckboxes,
-        } = this.props;
-        const mergedLang = combineMemoized(lang, defaultLang);
-        const mergedIcons = combineMemoized(icons, defaultIcons);
-        const treeNodes = this.renderTreeNodes(nodes);
-
-        const className = classNames({
-            'react-checkbox-tree': true,
-            'rct-disabled': disabled,
-            [`rct-icons-${iconsClass}`]: true,
-            'rct-native-display': nativeCheckboxes,
-            'rct-direction-rtl': direction === 'rtl',
-        });
+    };
 
-        return (
-            <LanguageContext.Provider value={mergedLang}>
-                <IconContext.Provider value={mergedIcons}>
-                    <div className={className} id={id}>
-                        {this.renderGlobalOptions()}
-                        {this.renderHiddenInput()}
-                        {treeNodes}
-                    </div>
-                </IconContext.Provider>
-            </LanguageContext.Provider>
-        );
-    }
+    //--------------------------------------------------------------------------
+    // render CheckboxTree
+
+    const treeNodes = renderTreeNodes(treeModel.rootKeys);
+
+    const className = classNames({
+        'react-checkbox-tree': true,
+        'rct-disabled': disabled,
+        [`rct-icons-${iconsClass}`]: true,
+        'rct-native-display': nativeCheckboxes,
+        'rct-direction-rtl': direction === 'rtl',
+    });
+
+    return (
+        <LanguageContext.Provider value={mergedLang}>
+            <IconContext.Provider value={mergedIcons}>
+                <div className={className} id={id}>
+
+                    {showExpandAll ? (
+                        <GlobalActions
+                            onCollapseAll={onCollapseAll}
+                            onExpandAll={onExpandAll}
+                        />
+                    ) : null}
+
+                    {name !== undefined ? (
+                        <HiddenInput
+                            checked={treeModel.getCheckedArray()}
+                            name={name}
+                            nameAsArray={nameAsArray}
+                        />
+                    ) : null}
+
+                    {treeNodes}
+                </div>
+            </IconContext.Provider>
+        </LanguageContext.Provider>
+    );
 }
 
-export default CheckboxTree;
+CheckboxTree.propTypes = {
+    initialTreeState: PropTypes.arrayOf(nodeShape).isRequired,
+
+    checkKeys: PropTypes.arrayOf(PropTypes.string),
+    checkModel: PropTypes.oneOf(['leaf', 'all']),
+    direction: PropTypes.string,
+    disabled: PropTypes.bool,
+    expandDisabled: PropTypes.bool,
+    expandOnClick: PropTypes.bool,
+    icons: iconsShape,
+    iconsClass: PropTypes.string,
+    id: PropTypes.string,
+    lang: languageShape,
+    name: PropTypes.string,
+    nameAsArray: PropTypes.bool,
+    nativeCheckboxes: PropTypes.bool,
+    noCascade: PropTypes.bool,
+    onlyLeafCheckboxes: PropTypes.bool,
+    optimisticToggle: PropTypes.bool,
+    showExpandAll: PropTypes.bool,
+    showNodeIcon: PropTypes.bool,
+    showNodeTitle: PropTypes.bool,
+    onCheck: PropTypes.func,
+    onClick: PropTypes.func,
+    onContextMenu: PropTypes.func,
+    onExpand: PropTypes.func,
+};
+
+CheckboxTree.defaultProps = {
+    checkKeys: [KEYS.SPACEBAR, KEYS.ENTER],
+    checkModel: 'leaf',
+    direction: 'ltr',
+    disabled: false,
+    expandDisabled: false,
+    expandOnClick: false,
+    icons: defaultIcons,
+    iconsClass: 'fa5',
+    id: null,
+    lang: defaultLang,
+    name: undefined,
+    nameAsArray: false,
+    nativeCheckboxes: false,
+    noCascade: false,
+    onlyLeafCheckboxes: false,
+    optimisticToggle: true,
+    showExpandAll: false,
+    showNodeIcon: true,
+    showNodeTitle: false,
+    onCheck: () => {},
+    onClick: null,
+    onContextMenu: null,
+    onExpand: () => {},
+};
diff --git a/src/js/CheckboxTreeContext.jsx b/src/js/CheckboxTreeContext.jsx
new file mode 100644
index 00000000..250f9b4a
--- /dev/null
+++ b/src/js/CheckboxTreeContext.jsx
@@ -0,0 +1,35 @@
+import React, {
+    createContext,
+    useContext,
+    useMemo,
+    useState,
+} from 'react';
+import PropTypes from 'prop-types';
+
+const CheckboxTreeContext = createContext();
+
+export function CheckboxTreeProvider({ children }) {
+    const [treeModel, setTreeModel] = useState();
+
+    const value = useMemo(() => ({ treeModel, setTreeModel }), [treeModel, setTreeModel]);
+    return (
+        <CheckboxTreeContext.Provider value={value}>
+            {children}
+        </CheckboxTreeContext.Provider>
+    );
+}
+
+export const useCheckboxTree = () => {
+    const value = useContext(CheckboxTreeContext);
+    if (value === undefined) {
+        throw new Error('useCheckboxTree must be used within a CheckboxTreeProvider');
+    }
+    return value;
+};
+
+CheckboxTreeProvider.propTypes = {
+    children: PropTypes.node,
+};
+CheckboxTreeProvider.defaultProps = {
+    children: null,
+};
diff --git a/src/js/NodeModel.js b/src/js/NodeModel.js
deleted file mode 100644
index c1d25e41..00000000
--- a/src/js/NodeModel.js
+++ /dev/null
@@ -1,185 +0,0 @@
-import CheckboxTreeError from './CheckboxTreeError';
-import { CHECK_MODEL } from './constants';
-
-class NodeModel {
-    constructor(props, nodes = {}) {
-        this.props = props;
-        this.flatNodes = nodes;
-    }
-
-    setProps(props) {
-        this.props = props;
-    }
-
-    clone() {
-        const clonedNodes = {};
-
-        // Re-construct nodes one level deep to avoid shallow copy of mutable characteristics
-        Object.keys(this.flatNodes).forEach((value) => {
-            const node = this.flatNodes[value];
-            clonedNodes[value] = { ...node };
-        });
-
-        return new NodeModel(this.props, clonedNodes);
-    }
-
-    getNode(value) {
-        return this.flatNodes[value];
-    }
-
-    reset() {
-        this.flatNodes = {};
-    }
-
-    flattenNodes(nodes, parent = {}, depth = 0) {
-        if (!Array.isArray(nodes) || nodes.length === 0) {
-            return;
-        }
-
-        const { disabled, noCascade } = this.props;
-
-        // Flatten the `node` property for internal lookups
-        nodes.forEach((node, index) => {
-            const isParent = this.nodeHasChildren(node);
-
-            // Protect against duplicate node values
-            if (this.flatNodes[node.value] !== undefined) {
-                throw new CheckboxTreeError(
-                    `Duplicate value '${node.value}' detected. All node values must be unique.`,
-                );
-            }
-
-            this.flatNodes[node.value] = {
-                ...node,
-                parent,
-                isChild: parent.value !== undefined,
-                isParent,
-                isLeaf: !isParent,
-                showCheckbox: node.showCheckbox !== undefined ? node.showCheckbox : true,
-                disabled: this.getDisabledState(node, parent, disabled, noCascade),
-                treeDepth: depth,
-                index,
-            };
-            this.flattenNodes(node.children, node, depth + 1);
-        });
-    }
-
-    nodeHasChildren(node) {
-        return Array.isArray(node.children);
-    }
-
-    getDisabledState(node, parent, disabledProp, noCascade) {
-        if (disabledProp) {
-            return true;
-        }
-
-        if (!noCascade && parent.disabled) {
-            return true;
-        }
-
-        return Boolean(node.disabled);
-    }
-
-    deserializeLists(lists) {
-        const listKeys = ['checked', 'expanded'];
-
-        // Reset values to false
-        Object.keys(this.flatNodes).forEach((value) => {
-            listKeys.forEach((listKey) => {
-                this.flatNodes[value][listKey] = false;
-            });
-        });
-
-        // Deserialize values and set their nodes to true
-        listKeys.forEach((listKey) => {
-            lists[listKey].forEach((value) => {
-                if (this.flatNodes[value] !== undefined) {
-                    this.flatNodes[value][listKey] = true;
-                }
-            });
-        });
-    }
-
-    serializeList(key) {
-        const list = [];
-
-        Object.keys(this.flatNodes).forEach((value) => {
-            if (this.flatNodes[value][key]) {
-                list.push(value);
-            }
-        });
-
-        return list;
-    }
-
-    expandAllNodes(expand) {
-        Object.keys(this.flatNodes).forEach((value) => {
-            if (this.flatNodes[value].isParent) {
-                this.flatNodes[value].expanded = expand;
-            }
-        });
-
-        return this;
-    }
-
-    toggleChecked(node, isChecked, checkModel, noCascade, percolateUpward = true) {
-        const flatNode = this.flatNodes[node.value];
-        const modelHasParents = [CHECK_MODEL.PARENT, CHECK_MODEL.ALL].indexOf(checkModel) > -1;
-        const modelHasLeaves = [CHECK_MODEL.LEAF, CHECK_MODEL.ALL].indexOf(checkModel) > -1;
-
-        if (flatNode.isLeaf || noCascade) {
-            if (node.disabled) {
-                return this;
-            }
-
-            this.toggleNode(node.value, 'checked', isChecked);
-        } else {
-            // Toggle parent check status if the model tracks this OR if it is an empty parent
-            if (modelHasParents || flatNode.children.length === 0) {
-                this.toggleNode(node.value, 'checked', isChecked);
-            }
-
-            if (modelHasLeaves) {
-                // Percolate check status down to all children
-                flatNode.children.forEach((child) => {
-                    this.toggleChecked(child, isChecked, checkModel, noCascade, false);
-                });
-            }
-        }
-
-        // Percolate check status up to parent
-        // The check model must include parent nodes and we must not have already covered the
-        // parent (relevant only when percolating through children)
-        if (percolateUpward && !noCascade && flatNode.isChild && modelHasParents) {
-            this.toggleParentStatus(flatNode.parent, checkModel);
-        }
-
-        return this;
-    }
-
-    toggleParentStatus(node, checkModel) {
-        const flatNode = this.flatNodes[node.value];
-
-        if (flatNode.isChild) {
-            if (checkModel === CHECK_MODEL.ALL) {
-                this.toggleNode(node.value, 'checked', this.isEveryChildChecked(flatNode));
-            }
-
-            this.toggleParentStatus(flatNode.parent, checkModel);
-        } else {
-            this.toggleNode(node.value, 'checked', this.isEveryChildChecked(flatNode));
-        }
-    }
-
-    isEveryChildChecked(node) {
-        return node.children.every((child) => this.getNode(child.value).checked);
-    }
-
-    toggleNode(nodeValue, key, toggleValue) {
-        this.flatNodes[nodeValue][key] = toggleValue;
-
-        return this;
-    }
-}
-
-export default NodeModel;
diff --git a/src/js/components/BareLabel.jsx b/src/js/components/BareLabel.jsx
new file mode 100644
index 00000000..8976f3e6
--- /dev/null
+++ b/src/js/components/BareLabel.jsx
@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function BareLabel({
+    children,
+    clickable,
+    title,
+    onClick,
+    onContextMenu,
+}) {
+    return (
+        <span className="rct-bare-label" title={title}>
+            {clickable ? (
+                <span
+                    className="rct-node-clickable"
+                    role="button"
+                    tabIndex={0}
+                    onClick={onClick}
+                    onContextMenu={onContextMenu}
+                    onKeyPress={onClick}
+                >
+                    {children}
+                </span>
+            ) : children}
+        </span>
+    );
+}
+
+BareLabel.propTypes = {
+
+    children: PropTypes.node,
+    clickable: PropTypes.bool,
+    title: PropTypes.string,
+    onClick: PropTypes.func,
+    onContextMenu: PropTypes.func,
+};
+
+BareLabel.defaultProps = {
+    children: null,
+    clickable: true,
+    title: null,
+    onClick: null,
+    onContextMenu: null,
+};
diff --git a/src/js/components/CheckboxIcon.js b/src/js/components/CheckboxIcon.js
new file mode 100644
index 00000000..37ce650d
--- /dev/null
+++ b/src/js/components/CheckboxIcon.js
@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { IconContext } from '../contexts';
+
+class CheckboxIcon extends React.PureComponent {
+    static propTypes = {
+        checked: PropTypes.number.isRequired,
+        isRadioNode: PropTypes.bool.isRequired,
+        noCascade: PropTypes.bool.isRequired,
+    };
+
+    static contextType = IconContext;
+
+    render() {
+        const { checked, isRadioNode, noCascade } = this.props;
+
+        const {
+            uncheck, check, halfCheck, radioOn, radioOff,
+        } = this.context;
+
+        if (isRadioNode) {
+            if (checked === 0) {
+                return radioOff;
+            }
+
+            return radioOn;
+        }
+
+        if (checked === 0) {
+            return uncheck;
+        }
+
+        if (checked === 1 || (checked === 2 && noCascade)) {
+            return check;
+        }
+
+        return halfCheck;
+    }
+}
+
+export default CheckboxIcon;
diff --git a/src/js/components/CheckboxLabel.jsx b/src/js/components/CheckboxLabel.jsx
new file mode 100644
index 00000000..7fd3b467
--- /dev/null
+++ b/src/js/components/CheckboxLabel.jsx
@@ -0,0 +1,100 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import NativeCheckbox from './NativeCheckbox';
+import CheckboxIcon from './CheckboxIcon';
+
+export default function CheckboxLabel(props) {
+    const {
+        checked,
+        children,
+        clickable,
+        disabled,
+        isRadioNode,
+        noCascade,
+        title,
+        treeId,
+        value,
+        onCheck,
+        onCheckboxKeyUp,
+        onClick,
+        onContextMenu,
+    } = props;
+
+    const valueId = String(value).split(' ').join('_');
+    const inputId = treeId ? `${treeId}-${valueId}` : null;
+
+    return (
+        <>
+            <label key={0} htmlFor={inputId} title={title} onContextMenu={onContextMenu}>
+                <NativeCheckbox
+                    checked={checked === 1}
+                    disabled={disabled}
+                    id={inputId}
+                    indeterminate={checked === 2}
+                    isRadioNode={isRadioNode}
+                    onChange={() => {}}
+                    onClick={onCheck}
+                    onKeyUp={onCheckboxKeyUp}
+                />
+                <span
+                    aria-hidden="true"
+                    className="rct-checkbox"
+                    role="presentation"
+                >
+                    <CheckboxIcon
+                        checked={checked}
+                        isRadioNode={isRadioNode}
+                        noCascade={noCascade}
+                    />
+                </span>
+                {!clickable ? children : null}
+            </label>
+
+            {clickable ? (
+                <span
+                    key={1}
+                    className="rct-node-clickable"
+                    role="button"
+                    tabIndex={0}
+                    onClick={onClick}
+                    onContextMenu={onContextMenu}
+                    onKeyPress={onClick}
+                >
+                    {children}
+                </span>
+            ) : null}
+        </>
+    );
+}
+
+CheckboxLabel.propTypes = {
+    checked: PropTypes.number.isRequired,
+    disabled: PropTypes.bool.isRequired,
+    noCascade: PropTypes.bool.isRequired,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+    ]).isRequired,
+    onCheck: PropTypes.func.isRequired,
+
+    children: PropTypes.node,
+    clickable: PropTypes.bool,
+    isRadioNode: PropTypes.bool,
+    title: PropTypes.string,
+    treeId: PropTypes.string,
+    onCheckboxKeyUp: PropTypes.func,
+    onClick: PropTypes.func,
+    onContextMenu: PropTypes.func,
+};
+
+CheckboxLabel.defaultProps = {
+    children: null,
+    clickable: true,
+    isRadioNode: false,
+    title: null,
+    treeId: null,
+    onCheckboxKeyUp: null,
+    onClick: null,
+    onContextMenu: null,
+};
diff --git a/src/js/components/LabelChildren.jsx b/src/js/components/LabelChildren.jsx
new file mode 100644
index 00000000..42905ec4
--- /dev/null
+++ b/src/js/components/LabelChildren.jsx
@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import NodeIcon from './NodeIcon';
+
+export default function LabelChildren({
+    expanded,
+    icon,
+    isLeaf,
+    label,
+    showNodeIcon,
+}) {
+    return (
+        <>
+            {showNodeIcon && (
+                <NodeIcon expanded={expanded} icon={icon} isLeaf={isLeaf} />
+            )}
+            <span className="rct-label">{label}</span>
+        </>
+    );
+}
+
+LabelChildren.propTypes = {
+    isLeaf: PropTypes.bool.isRequired,
+    label: PropTypes.node.isRequired,
+    showNodeIcon: PropTypes.bool.isRequired,
+
+    expanded: PropTypes.bool,
+    icon: PropTypes.node,
+};
+
+LabelChildren.defaultProps = {
+    expanded: false,
+    icon: null,
+};
diff --git a/src/js/components/NativeCheckbox.jsx b/src/js/components/NativeCheckbox.jsx
index 5f1c167e..5a468710 100644
--- a/src/js/components/NativeCheckbox.jsx
+++ b/src/js/components/NativeCheckbox.jsx
@@ -3,19 +3,27 @@ import React, { useEffect, useRef } from 'react';
 
 const propTypes = {
     indeterminate: PropTypes.bool,
+    isRadioNode: PropTypes.bool,
 };
 const defaultProps = {
     indeterminate: false,
+    isRadioNode: false,
 };
 
-function NativeCheckbox({ indeterminate, ...otherProps }) {
+function NativeCheckbox({ indeterminate, isRadioNode, ...otherProps }) {
     const checkbox = useRef(null);
 
     useEffect(() => {
         checkbox.current.indeterminate = indeterminate;
     });
 
-    return <input {...otherProps} ref={checkbox} type="checkbox" />;
+    return (
+        <input
+            {...otherProps}
+            ref={checkbox}
+            type={isRadioNode ? 'radio' : 'checkbox'}
+        />
+    );
 }
 
 NativeCheckbox.propTypes = propTypes;
diff --git a/src/js/components/TreeNode.jsx b/src/js/components/TreeNode.jsx
index a239ec4c..2bfd93f8 100644
--- a/src/js/components/TreeNode.jsx
+++ b/src/js/components/TreeNode.jsx
@@ -4,35 +4,29 @@ import React from 'react';
 
 import { KEYS } from '../constants';
 import { IconContext } from '../contexts';
+
+import NodeModel from '../models/NodeModel';
+
+import BareLabel from './BareLabel';
+import CheckboxLabel from './CheckboxLabel';
 import ExpandButton from './ExpandButton';
-import NativeCheckbox from './NativeCheckbox';
-import NodeIcon from './NodeIcon';
+import LabelChildren from './LabelChildren';
 
 class TreeNode extends React.PureComponent {
     static contextType = IconContext;
 
     static propTypes = {
         checkKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
-        checked: PropTypes.number.isRequired,
         disabled: PropTypes.bool.isRequired,
         expandDisabled: PropTypes.bool.isRequired,
-        expanded: PropTypes.bool.isRequired,
-        isLeaf: PropTypes.bool.isRequired,
-        isParent: PropTypes.bool.isRequired,
-        label: PropTypes.node.isRequired,
-        optimisticToggle: PropTypes.bool.isRequired,
+        noCascade: PropTypes.bool.isRequired,
+        node: PropTypes.instanceOf(NodeModel).isRequired,
         showNodeIcon: PropTypes.bool.isRequired,
-        value: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number,
-        ]).isRequired,
         onCheck: PropTypes.func.isRequired,
         onExpand: PropTypes.func.isRequired,
 
         children: PropTypes.node,
-        className: PropTypes.string,
         expandOnClick: PropTypes.bool,
-        icon: PropTypes.node,
         showCheckbox: PropTypes.bool,
         title: PropTypes.string,
         treeId: PropTypes.string,
@@ -42,9 +36,7 @@ class TreeNode extends React.PureComponent {
 
     static defaultProps = {
         children: null,
-        className: null,
         expandOnClick: false,
-        icon: null,
         showCheckbox: true,
         title: null,
         treeId: null,
@@ -62,12 +54,8 @@ class TreeNode extends React.PureComponent {
     }
 
     onCheck() {
-        const { value, onCheck } = this.props;
-
-        onCheck({
-            value,
-            checked: this.getCheckState({ toggle: true }),
-        });
+        const { node, onCheck } = this.props;
+        onCheck(node.value);
     }
 
     onCheckboxKeyUp(event) {
@@ -87,209 +75,110 @@ class TreeNode extends React.PureComponent {
     onClick() {
         const {
             expandOnClick,
-            isParent,
-            value,
+            node,
             onClick,
         } = this.props;
 
         // Auto expand if enabled
-        if (isParent && expandOnClick) {
+        if (node.isParent && expandOnClick) {
             this.onExpand();
         }
 
-        onClick({ value, checked: this.getCheckState({ toggle: false }) });
+        onClick(node.value);
     }
 
     onExpand() {
-        const { expanded, value, onExpand } = this.props;
-
-        onExpand({ value, expanded: !expanded });
-    }
-
-    getCheckState({ toggle }) {
-        const { checked, optimisticToggle } = this.props;
-
-        // Toggle off state to checked
-        if (checked === 0 && toggle) {
-            return true;
-        }
-
-        // Node is already checked and we are not toggling
-        if (checked === 1 && !toggle) {
-            return true;
-        }
-
-        // Get/toggle partial state based on cascade model
-        if (checked === 2) {
-            return optimisticToggle;
-        }
-
-        return false;
+        const { node, onExpand } = this.props;
+        onExpand(node.value);
     }
 
-    renderExpandButton() {
-        const { expandDisabled, expanded, isLeaf } = this.props;
-
-        return (
-            <ExpandButton
-                disabled={expandDisabled}
-                expanded={expanded}
-                isLeaf={isLeaf}
-                onClick={this.onExpand}
-            />
-        );
-    }
-
-    renderCheckboxIcon() {
-        const { uncheck, check, halfCheck } = this.context;
-        const { checked } = this.props;
-
-        if (checked === 0) {
-            return uncheck;
-        }
-
-        if (checked === 1) {
-            return check;
-        }
-
-        return halfCheck;
-    }
-
-    renderBareLabel(children) {
-        const { title, onClick, onContextMenu } = this.props;
-        const clickable = onClick !== null;
-
-        return (
-            <span className="rct-bare-label" title={title}>
-                {clickable ? (
-                    <span
-                        className="rct-node-clickable"
-                        role="button"
-                        tabIndex={0}
-                        onClick={this.onClick}
-                        onContextMenu={onContextMenu}
-                        onKeyPress={this.onClick}
-                    >
-                        {children}
-                    </span>
-                ) : children}
-            </span>
-        );
-    }
-
-    renderCheckboxLabel(children) {
+    render() {
         const {
-            checked,
+            children,
             disabled,
+            expandDisabled,
+            noCascade,
+            node,
+            showCheckbox,
+            showNodeIcon,
             title,
             treeId,
-            value,
             onClick,
             onContextMenu,
         } = this.props;
-        const clickable = onClick !== null;
-        const valueId = String(value).split(' ').join('_');
-        const inputId = treeId ? `${treeId}-${valueId}` : null;
-
-        const render = [(
-            <label key={0} htmlFor={inputId} title={title} onContextMenu={onContextMenu}>
-                <NativeCheckbox
-                    checked={checked === 1}
-                    disabled={disabled}
-                    id={inputId}
-                    indeterminate={checked === 2}
-                    onChange={() => {}}
-                    onClick={this.onCheck}
-                    onKeyUp={this.onCheckboxKeyUp}
-                />
-                <span
-                    aria-hidden="true"
-                    className="rct-checkbox"
-                    role="presentation"
-                >
-                    {this.renderCheckboxIcon()}
-                </span>
-                {!clickable ? children : null}
-            </label>
-        )];
-
-        if (clickable) {
-            render.push((
-                <span
-                    key={1}
-                    className="rct-node-clickable"
-                    role="button"
-                    tabIndex={0}
-                    onClick={this.onClick}
-                    onContextMenu={onContextMenu}
-                    onKeyPress={this.onClick}
-                >
-                    {children}
-                </span>
-            ));
-        }
 
-        return render;
-    }
-
-    renderLabel() {
         const {
+            checkState,
+            className,
             expanded,
             icon,
             isLeaf,
             label,
-            showCheckbox,
-            showNodeIcon,
-        } = this.props;
-        const labelChildren = (
-            <>
-                {showNodeIcon && (
-                    <NodeIcon expanded={expanded} icon={icon} isLeaf={isLeaf} />
-                )}
-                <span className="rct-label">{label}</span>
-            </>
-        );
-
-        if (!showCheckbox) {
-            return this.renderBareLabel(labelChildren);
-        }
-
-        return this.renderCheckboxLabel(labelChildren);
-    }
-
-    renderChildren() {
-        const { children, expanded } = this.props;
-
-        if (!expanded) {
-            return null;
-        }
+            value,
+        } = node;
 
-        return children;
-    }
+        const nodeDisabled = disabled || node.disabled;
 
-    render() {
-        const {
-            className,
-            disabled,
-            expanded,
-            isLeaf,
-        } = this.props;
         const nodeClass = classNames({
             'rct-node': true,
             'rct-node-leaf': isLeaf,
             'rct-node-parent': !isLeaf,
             'rct-node-expanded': !isLeaf && expanded,
             'rct-node-collapsed': !isLeaf && !expanded,
-            'rct-disabled': disabled,
+            'rct-disabled': nodeDisabled,
         }, className);
 
+        const clickable = onClick !== null;
+        const labelChildren = (
+            <LabelChildren
+                expanded={expanded}
+                icon={icon}
+                isLeaf={isLeaf}
+                label={label}
+                showNodeIcon={showNodeIcon}
+            />
+        );
+
         return (
             <li className={nodeClass}>
                 <span className="rct-text">
-                    {this.renderExpandButton()}
-                    {this.renderLabel()}
+                    <ExpandButton
+                        disabled={expandDisabled}
+                        expanded={expanded}
+                        isLeaf={isLeaf}
+                        onClick={this.onExpand}
+                    />
+
+                    {showCheckbox ? (
+                        <CheckboxLabel
+                            checked={checkState}
+                            clickable={clickable}
+                            disabled={nodeDisabled}
+                            isRadioNode={node.isRadioNode}
+                            noCascade={noCascade}
+                            title={title}
+                            treeId={treeId}
+                            value={value}
+                            onCheck={this.onCheck}
+                            onCheckboxKeyUp={this.onCheckboxKeyUp}
+                            onClick={this.onClick}
+                            onContextMenu={onContextMenu}
+                        >
+                            {labelChildren}
+                        </CheckboxLabel>
+
+                    ) : (
+                        <BareLabel
+                            clickable={clickable}
+                            title={title}
+                            onClick={this.onClick}
+                            onContextMenu={onContextMenu}
+                        >
+                            {labelChildren}
+                        </BareLabel>
+                    )}
                 </span>
-                {this.renderChildren()}
+                {expanded ? children : null}
             </li>
         );
     }
diff --git a/src/js/models/NodeModel.js b/src/js/models/NodeModel.js
new file mode 100644
index 00000000..72c98a5e
--- /dev/null
+++ b/src/js/models/NodeModel.js
@@ -0,0 +1,80 @@
+import NodeModelError from './NodeModelError';
+
+const requiredProperties = ['label', 'value'];
+
+class NodeModel {
+    constructor(nodeConfig, parent, index, depth) {
+        const checkRequiredProperty = (key) => {
+            if (!(key in nodeConfig)) {
+                throw new NodeModelError(
+                    `Missing property '${key}' detected. All nodes must have a '${key}' property.`,
+                );
+            }
+        };
+
+        requiredProperties.forEach((prop) => {
+            checkRequiredProperty(prop);
+        });
+
+        // TODO: is a shallow copy enough?
+
+        // add all properties of nodeConfig to to new NodeModel
+        Object.keys(nodeConfig).forEach((key) => {
+            this[key] = nodeConfig[key];
+        });
+
+        // if node is instanceof NodeModel
+        //   then we are doing a clone and are done
+        //   otherwise check/add required properties
+
+        if (!(nodeConfig instanceof NodeModel)) {
+            // check for required properties and add missing ones;
+            const isParent = Array.isArray(nodeConfig.children) && nodeConfig.children.length > 0;
+
+            // save node.value of children in this.childKeys
+            // don't save reference to actual child nodes - mutation nightmare
+            if (isParent) {
+                this.childKeys = nodeConfig.children.map((child) => child.value);
+                this.expanded = ('expanded' in nodeConfig) ? nodeConfig.expanded : false;
+            } else {
+                this.childKeys = [];
+                this.expanded = false;
+            }
+
+            // remove unwanted properties copied from nodeConfig
+            if ('children' in this) {
+                delete this.children;
+            }
+            if ('checked' in this) {
+                delete this.checked;
+            }
+
+            // nodeModel uses 'checkState' instead of 'checked' property
+            // 'checkState' is kept current by TreeModel
+            const checked = nodeConfig.checked !== undefined ? nodeConfig.checked : false;
+            this.checkState = checked ? 1 : 0;
+
+            this.parentKey = parent.value ? parent.value : '';
+            this.isChild = parent.value !== undefined;
+            this.isParent = isParent;
+            this.isLeaf = !isParent;
+            this.isRadioGroup = 'isRadioGroup' in nodeConfig ? nodeConfig.isRadioGroup : false;
+            this.isRadioNode = 'isRadioGroup' in parent ? parent.isRadioGroup : false;
+            this.isHiddenByFilter = false;
+
+            this.disabled = 'disabled' in nodeConfig ? nodeConfig.disabled : false;
+            this.icon = 'icon' in nodeConfig ? nodeConfig.icon : null;
+            this.showCheckbox = 'showCheckbox' in nodeConfig ? nodeConfig.showCheckbox : true;
+
+            this.index = index;
+            this.treeDepth = depth;
+        }
+    }
+
+    //---------------------------------------------------------
+    clone() {
+        return new NodeModel(this, this.parent, this.index, this.depth);
+    }
+}
+
+export default NodeModel;
diff --git a/src/js/models/NodeModelError.js b/src/js/models/NodeModelError.js
new file mode 100644
index 00000000..da86bafc
--- /dev/null
+++ b/src/js/models/NodeModelError.js
@@ -0,0 +1,9 @@
+function NodeModelError(message) {
+    this.message = message;
+    this.stack = Error().stack;
+}
+
+NodeModelError.prototype = Object.create(Error.prototype);
+NodeModelError.prototype.name = 'NodeModelError';
+
+export default NodeModelError;
diff --git a/src/js/models/TreeModel.js b/src/js/models/TreeModel.js
new file mode 100644
index 00000000..ba70b867
--- /dev/null
+++ b/src/js/models/TreeModel.js
@@ -0,0 +1,440 @@
+import TreeModelError from './TreeModelError';
+import NodeModel from './NodeModel';
+import { CHECK_MODEL } from '../constants';
+
+class TreeModel {
+    constructor(treeConfig, options = {}) {
+        const flatten = (childNodes, parent = {}, depth = 0) => {
+            if (Array.isArray(childNodes) && childNodes.length !== 0) {
+                childNodes.forEach((node, index) => {
+                    const newNode = new NodeModel(node, parent, index, depth, options);
+                    // TODO: fix disabled - for all nodes? options.disabled?
+                    if (newNode.isChild) {
+                        if ('disabled' in parent) {
+                            newNode.disabled = parent.disabled;
+                        }
+                    }
+                    if (newNode.isParent) {
+                        flatten(node.children, node, depth + 1);
+
+                        // adjust checkState based upon children's checkState
+                        if (newNode.isRadioGroup) {
+                            // TODO: should this have a default instead of Error
+                            const numChecked = this.howManyChildrenChecked(newNode);
+                            if (numChecked !== 1) {
+                                // bad input for radio group
+                                let textOption;
+                                if (numChecked > 1) {
+                                    textOption = 'Too many children';
+                                } else {
+                                    textOption = 'No children';
+                                }
+                                throw new TreeModelError(
+                                    `TreeModel.constructor Error: ${textOption} (${numChecked}) are checked in Node.isRadioGroup (${node.value}).`,
+                                );
+                            }
+                        } else if (!newNode.isRadioNode) {
+                            const checkState = this.getCheckState(newNode);
+                            newNode.checkState = checkState;
+                        }
+                        // else if newNode.isRadioNode => do nothing
+                    }
+
+                    // Protect against duplicate node values
+                    if (this.tree[node.value] !== undefined) {
+                        throw new TreeModelError(
+                            `Duplicate value '${node.value}' detected. All node values must be unique.`,
+                        );
+                    }
+
+                    this.tree[node.value] = newNode;
+                });
+            }
+        };
+        //----------------------------------------------------------------------
+
+        if (treeConfig instanceof TreeModel) {
+            // this is a clone request
+            // NOTE: nodes are not cloned. They are only cloned when
+            //       actually changed to reduce TreeNode rerenders
+            this.tree = {};
+            this.rootKeys = [...treeConfig.rootKeys];
+            this.unfilteredRootKeys = [...treeConfig.unfilteredRootKeys];
+            this.options = { ...treeConfig.options };
+            Object.keys(treeConfig.tree).forEach((key) => {
+                this.tree[key] = treeConfig.tree[key];
+            });
+        } else {
+            // these are options passed from CheckboxTree
+            this.options = { ...options };
+
+            // treeConfig is an array of nodes - save node.value as rootKeys
+            // to allow walking of the tree recursively
+            this.rootKeys = treeConfig.map((node) => node.value);
+            // save a second copy to restore rootKeys when removing filter
+            this.unfilteredRootKeys = [...this.rootKeys];
+            this.tree = {};
+
+            // process the initial tree state into a TreeModel
+            flatten(treeConfig);
+
+            // at this point 'this' is a valid TreeModel and should be valid input for CheckboxTree
+        }
+    }
+
+    // TODO: figure out what functions should be public
+    //--------------------------------------------------------------------------
+    // Public functions
+
+    clone() {
+        return new TreeModel(this);
+    }
+
+    expandAllNodes(expandValue = true) {
+        const newTreeModel = this.clone();
+        Object.keys(newTreeModel.tree).forEach((key) => {
+            const newNode = this.getNode(key);
+            if (newNode.isParent) {
+                newNode.expanded = expandValue;
+                newTreeModel.tree[key] = newNode;
+            }
+        });
+        return newTreeModel;
+    }
+
+    /**
+     * Returns an updated TreeModel.
+     *
+     * @param {number} targetLevel How deep to expand the nodes.
+     *
+     * @returns {TreeModel}
+     */
+    expandNodesToLevel(targetLevel) {
+        const newTreeModel = this.clone();
+
+        const expandLevels = (node, currentLevel = 0) => {
+            if (currentLevel > targetLevel) {
+                return;
+            }
+            Object.keys(newTreeModel.tree).forEach((key) => {
+                const newNode = newTreeModel.getNode[key].clone();
+                if (newNode.isParent) {
+                    newNode.expanded = true;
+                    newTreeModel.tree[key] = newNode;
+                    expandLevels(newNode, currentLevel + 1);
+                }
+            });
+        };
+
+        expandLevels(targetLevel);
+        return newTreeModel;
+    }
+
+    filter(testFunc) {
+        if (typeof testFunc !== 'function') {
+            // invalid value error
+            throw new TreeModelError(
+                `typeof first argument passed to TreeModel.filter (${typeof testFunc}) is not 'function'.`,
+            );
+        }
+
+        const newTreeModel = this.clone().removeFilter();
+
+        const filterNodes = (filtered, nodeKey) => {
+            const node = this.getNode(nodeKey);
+
+            // process children first
+            const childKeys = (node.childKeys || []).reduce(filterNodes, []);
+
+            if (testFunc(node) || childKeys.length) {
+                // passes testFunc or a child is a matching node
+                // this node is a keeper
+                filtered.push(node.value);
+            } else {
+                // hide the node
+                const newNode = node.clone();
+                newNode.isHiddenByFilter = true;
+                newTreeModel.tree[nodeKey] = newNode;
+            }
+            return filtered;
+        };
+
+        newTreeModel.rootKeys = newTreeModel.rootKeys.reduce(filterNodes, []);
+        this.options.setTreeModel(newTreeModel);
+        return newTreeModel;
+    }
+
+    // includes expanded children with parent collapsed
+    getExpanded() {
+        const expandedArray = [];
+        Object.keys(this.tree).forEach((key) => {
+            if (this.tree[key].expanded) {
+                expandedArray.push(key);
+            }
+        });
+        return expandedArray;
+    }
+
+    getChecked() {
+        const checkModel = this.options.checkModel || CHECK_MODEL.LEAF;
+        const checkedArray = [];
+
+        let test;
+        if (checkModel === CHECK_MODEL.ALL) {
+            test = (node) => (node.checkState > 0);
+        } else if (checkModel === CHECK_MODEL.PARENT) {
+            test = (node) => (node.isParent && node.checkState > 0);
+        } else if (checkModel === CHECK_MODEL.LEAF) {
+            test = (node) => (node.isLeaf && node.checkState > 0);
+        } else {
+            // invalid value error
+            throw new TreeModelError(
+                `Invalid value '${checkModel}' of checkModel in TreeModel.getChecked method.`,
+            );
+        }
+
+        const walkTree = (nodeKey) => {
+            const node = this.getNode(nodeKey);
+            if (test(node) && !node.disabled) {
+                checkedArray.push(nodeKey);
+            }
+            // ignore all nodes below an OFF radio group
+            // ignore all nodes below an OFF radio button
+            // NOT ( off && (node.isRadioGroup or node.isRadioNode))
+            // TODO: should the above be switchable on/off?
+            //       ignoreCheckedBelowRadioOff: default to true
+            if (!((node.checkState === 0) && (node.isRadioGroup || node.isRadioNode))) {
+                node.childKeys.forEach((key) => {
+                    walkTree(key);
+                });
+            }
+        };
+
+        this.rootKeys.forEach((key) => {
+            walkTree(key);
+        });
+
+        return checkedArray;
+    }
+
+    /*
+    // with no radio nodes this works
+    getChecked_old() {
+        const checkModel = this.options.checkModel || CHECK_MODEL.LEAF;
+        const checkedArray = [];
+        const keys = Object.keys(this.tree);
+
+        const pushCheckedKeys = (testFn) => {
+            keys.forEach((key) => {
+                const node = this.getNode(key);
+                if (testFn(node)) {
+                    checkedArray.push(key);
+                }
+            });
+        };
+
+        let test;
+        if (checkModel === CHECK_MODEL.ALL) {
+            test = (node) => (node.checkState > 0);
+        } else if (checkModel === CHECK_MODEL.PARENT) {
+            test = (node) => (node.isParent && node.checkState > 0);
+        } else if (checkModel === CHECK_MODEL.LEAF) {
+            test = (node) => (node.isLeaf && node.checkState > 0);
+        } else {
+            // invalid value error
+            throw new TreeModelError(
+                `Invalid value '${checkModel}' passed to TreeModel.getChecked method.`,
+            );
+        }
+
+        pushCheckedKeys(test);
+        return checkedArray;
+    }
+    */
+
+    getNode(nodeKey) {
+        return this.tree[nodeKey];
+    }
+
+    removeFilter() {
+        const newTreeModel = this.clone();
+
+        Object.keys(newTreeModel.tree).forEach((key) => {
+            const newNode = this.getNode(key);
+            newNode.isHiddenByFilter = false;
+            newTreeModel.tree[key] = newNode;
+        });
+        newTreeModel.rootKeys = [...this.unfilteredRootKeys];
+
+        return newTreeModel;
+    }
+
+    toggleChecked(nodeKey) {
+        const node = this.getNode(nodeKey);
+
+        // NOTE: disabled may not be needed here
+        //       toggleChecked does not get called if node is disabled
+        if (node.disabled ||
+            ((node.isRadioNode) && (node.checkState > 0))
+        ) {
+            // TODO: should this be return FALSE?
+            // no change return old treeModel
+            return this;
+        }
+
+        const newTreeModel = this.clone();
+        const newTree = newTreeModel.tree;
+
+        // determine newCheckState
+        let newCheckState;
+        if (node.isRadioNode) {
+            // turn off all siblings of node in newTree
+            newTreeModel.turnOffSiblings(nodeKey);
+            newCheckState = 1;
+        } else if (node.checkState === 2) {
+            newCheckState = this.options.optimisticToggle ? 1 : 0;
+        } else {
+            newCheckState = (node.checkState > 0) ? 0 : 1;
+        }
+
+        //----------------------------------------------------------------------
+        // recursive function to handle toggle
+        // defined here because it uses newCheckState & newTree from above
+        const toggle = (key, checked) => {
+            const newNode = this.getNode(key).clone();
+            if (newNode.isLeaf || this.options.noCascade) {
+                newNode.checkState = checked;
+            } else if (newNode.isRadioGroup || newNode.isRadioNode) {
+                // child nodes remain unchanged
+                newNode.checkState = newCheckState;
+            } else {
+                // toggle child nodes first
+                newNode.childKeys.forEach((childKey) => {
+                    toggle(childKey, newCheckState);
+                });
+                newNode.checkState = newTreeModel.getCheckState(newNode);
+            }
+            newTree[key] = newNode;
+        };
+        //----------------------------------------------------------------------
+
+        toggle(nodeKey, newCheckState);
+
+        // Percolate check status up to parents
+        // if child isRadioNode do not percolate up
+        if (!(this.options.noCascade || node.isRadioNode)) {
+            let child = node;
+            while (child.parentKey !== '') {
+                const { parentKey } = child;
+                const newParent = newTreeModel.getNode(parentKey).clone();
+                if (newParent.isRadioNode) {
+                    // do not percolate up
+                    break;
+                } else {
+                    newParent.checkState = newTreeModel.getCheckState(newParent);
+                    newTree[parentKey] = newParent;
+                    child = newParent;
+                }
+            }
+        }
+
+        return newTreeModel;
+    }
+
+    toggleDisabled(nodeKey) {
+        // TODO: what about this.options.noCascade?
+        const toggleChildren = true;
+        const newTreeModel = this.toggleProperty(nodeKey, 'disabled', toggleChildren);
+        return newTreeModel;
+    }
+
+    toggleExpanded(nodeKey) {
+        const toggleChildren = false;
+        const newTreeModel = this.toggleProperty(nodeKey, 'expanded', toggleChildren);
+        return newTreeModel;
+    }
+
+    //--------------------------------------------------------------------------
+    // Private functions
+
+    getCheckState(node) {
+        if (this.isEveryChildChecked(node)) {
+            return 1;
+        }
+        if (this.isSomeChildChecked(node)) {
+            return node.isRadioGroup ? 1 : 2;
+        }
+        return 0;
+    }
+
+    howManyChildrenChecked(node) {
+        return node.childKeys.filter((childKey) => this.getNode(childKey).checkState !== 0).length;
+    }
+
+    isEveryChildChecked(node) {
+        return node.childKeys.every((childKey) => this.getNode(childKey).checkState === 1);
+    }
+
+    isNoChildChecked(node) {
+        return node.childKeys.every((childKey) => this.getNode(childKey).checkState === 0);
+    }
+
+    isSomeChildChecked(node) {
+        return node.childKeys.some((childKey) => this.getNode(childKey).checkState > 0);
+    }
+
+    toggleProperty(nodeKey, propertyName, toggleChildren = false) {
+        const newNode = this.getNode(nodeKey).clone();
+        const newValue = !newNode[propertyName];
+        newNode[propertyName] = newValue;
+
+        const newTreeModel = this.clone();
+        const newTree = newTreeModel.tree;
+        newTree[nodeKey] = newNode;
+
+        if (toggleChildren && newNode.isParent) {
+            newNode.childKeys.forEach((childKey) => {
+                const node = this.getNode(childKey).clone();
+                node[propertyName] = newValue;
+                newTree[childKey] = node;
+            });
+        }
+
+        return newTreeModel;
+    }
+
+    // this method is private and does not handle cascading
+    // as it is used specifically for radioGroup nodes
+    // to turn off all sibling nodes before turning on the clicked one
+    turnOffSiblings(nodeKey) {
+        const { parentKey } = this.getNode(nodeKey);
+        this.getNode(parentKey).childKeys.forEach((childKey) => {
+            if (childKey !== nodeKey) {
+                const newNode = this.getNode(childKey).clone();
+                newNode.checkState = 0;
+                this.tree[childKey] = newNode;
+            }
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // TODO: these functions need review
+
+    getDisabledState(nodeKey, disabledProp, noCascade) {
+        // TODO: how to handle disabledProp and noCascade
+        //       are they in this.options? or passed
+        const node = this.getNode(nodeKey);
+        const parent = this.getNode(node.parentKey);
+        if (disabledProp) {
+            return true;
+        }
+
+        if (!noCascade && parent.disabled) {
+            return true;
+        }
+
+        return Boolean(node.disabled);
+    }
+}
+
+export default TreeModel;
diff --git a/src/js/models/TreeModelError.js b/src/js/models/TreeModelError.js
new file mode 100644
index 00000000..c0211d78
--- /dev/null
+++ b/src/js/models/TreeModelError.js
@@ -0,0 +1,9 @@
+function TreeModelError(message) {
+    this.message = message;
+    this.stack = Error().stack;
+}
+
+TreeModelError.prototype = Object.create(Error.prototype);
+TreeModelError.prototype.name = 'TreeModelError';
+
+export default TreeModelError;
diff --git a/src/js/shapes/iconsShape.js b/src/js/shapes/iconsShape.js
index afaac2cd..fe5e77ec 100644
--- a/src/js/shapes/iconsShape.js
+++ b/src/js/shapes/iconsShape.js
@@ -11,6 +11,9 @@ const icons = PropTypes.shape({
     parentClose: PropTypes.node,
     parentOpen: PropTypes.node,
     leaf: PropTypes.node,
+    radioOff: PropTypes.node,
+    radioOn: PropTypes.node,
+
 });
 
 export default icons;
diff --git a/src/js/shapes/nodeShape.js b/src/js/shapes/nodeShape.js
index a7c5ab51..28982ca2 100644
--- a/src/js/shapes/nodeShape.js
+++ b/src/js/shapes/nodeShape.js
@@ -7,6 +7,7 @@ const nodeShape = {
         PropTypes.number,
     ]).isRequired,
 
+    checked: PropTypes.bool,
     disabled: PropTypes.bool,
     icon: PropTypes.node,
     showCheckbox: PropTypes.bool,
@@ -17,6 +18,7 @@ const nodeShapeWithChildren = PropTypes.oneOfType([
     PropTypes.shape(nodeShape),
     PropTypes.shape({
         ...nodeShape,
+        expanded: PropTypes.bool,
         children: PropTypes.arrayOf(nodeShape).isRequired,
     }),
 ]);
diff --git a/src/js/shapes/treeShape.js b/src/js/shapes/treeShape.js
new file mode 100644
index 00000000..62265ed0
--- /dev/null
+++ b/src/js/shapes/treeShape.js
@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+import nodeShape from './nodeShape';
+
+const treeShape = PropTypes.shape({
+    tree: PropTypes.shape(nodeShape),
+    rootKey: PropTypes.string,
+    options: PropTypes.shape({}),
+});
+
+export default treeShape;
diff --git a/src/js/utils.js b/src/js/utils.js
deleted file mode 100644
index 7c948dd4..00000000
--- a/src/js/utils.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Return a list of all parent node keys up until `targetLevel`.
- *
- * @param {Array} nodes The nodes to traverse.
- * @param {number} targetLevel How deep to expand the nodes.
- * @param {int} currentLevel The current level in the recursive chain.
- *
- * @returns {Array}
- */
-function expandNodesToLevel(nodes, targetLevel, currentLevel = 0) {
-    if (currentLevel > targetLevel) {
-        return [];
-    }
-
-    let expanded = [];
-    nodes.forEach((node) => {
-        if (node.children) {
-            expanded = [
-                ...expanded,
-                node.value,
-                ...expandNodesToLevel(node.children, targetLevel, currentLevel + 1),
-            ];
-        }
-    });
-
-    return expanded;
-}
-
-// eslint-disable-next-line import/prefer-default-export
-export { expandNodesToLevel };
diff --git a/src/scss/react-checkbox-tree.scss b/src/scss/react-checkbox-tree.scss
index ad6b2c0e..080187ab 100644
--- a/src/scss/react-checkbox-tree.scss
+++ b/src/scss/react-checkbox-tree.scss
@@ -236,6 +236,14 @@ $rct-outline-offset: -2px !default;
     opacity: 0.5;
   }
 
+  .rct-icon-radio-off::before {
+    content: "\f111";
+  }
+
+  .rct-icon-radio-on::before {
+    content: "\f192";
+  }
+
   .rct-icon-leaf::before {
     content: "\f016";
   }
@@ -283,6 +291,14 @@ $rct-outline-offset: -2px !default;
     opacity: 0.5;
   }
 
+  .rct-icon-radio-off::before {
+    content: "\f111";
+  }
+
+  .rct-icon-radio-on::before {
+    content: "\f192";
+  }
+
   .rct-icon-leaf::before {
     content: "\f15b";
   }
diff --git a/test/CheckboxTree.jsx b/test/CheckboxTree.jsx
index 49bd016b..cdbb5626 100644
--- a/test/CheckboxTree.jsx
+++ b/test/CheckboxTree.jsx
@@ -5,7 +5,10 @@ import { configure, fireEvent } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 
 import CheckboxTree from '../src/js/CheckboxTree';
-import CheckboxTreeError from '../src/js/CheckboxTreeError';
+// import CheckboxTreeError from '../src/js/CheckboxTreeError';
+import { CheckboxTreeProvider } from '../src/js/CheckboxTreeContext';
+import TreeModel from '../src/js/models/TreeModel';
+import TreeModelError from '../src/js/models/TreeModelError';
 
 const consoleError = console.error;
 
@@ -18,11 +21,13 @@ describe('<CheckboxTree />', () => {
     describe('component', () => {
         it('should render the react-checkbox-tree container', () => {
             const { container } = render(
-                <CheckboxTree
-                    nodes={[]}
-                    onCheck={() => {}}
-                    onExpand={() => {}}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[]}
+                        onCheck={() => {}}
+                        onExpand={() => {}}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.isNotNull(container.querySelector('.react-checkbox-tree'));
@@ -35,22 +40,24 @@ describe('<CheckboxTree />', () => {
                 let actual = null;
 
                 render(
-                    <CheckboxTree
-                        checkModel="all"
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onCheck={(checked) => {
-                            actual = checked;
-                        }}
-                    />,
+                    <CheckboxTreeProvider>
+                        <CheckboxTree
+                            checkModel="all"
+                            initialTreeState={[
+                                {
+                                    value: 'jupiter',
+                                    label: 'Jupiter',
+                                    children: [
+                                        { value: 'io', label: 'Io' },
+                                        { value: 'europa', label: 'Europa' },
+                                    ],
+                                },
+                            ]}
+                            onCheck={(nodeKey, treeModel) => {
+                                actual = treeModel.getChecked();
+                            }}
+                        />
+                    </CheckboxTreeProvider>,
                 );
 
                 const user = userEvent.setup();
@@ -63,31 +70,41 @@ describe('<CheckboxTree />', () => {
                 let actual = null;
 
                 render(
-                    <CheckboxTree
-                        checkModel="all"
-                        checked={['mercury', 'io']}
-                        expanded={['sol', 'jupiter']}
-                        nodes={[
-                            {
-                                value: 'sol',
-                                label: 'Sol System',
-                                children: [
-                                    { value: 'mercury', label: 'Mercury' },
-                                    {
-                                        value: 'jupiter',
-                                        label: 'Jupiter',
-                                        children: [
-                                            { value: 'io', label: 'Io' },
-                                            { value: 'europa', label: 'Europa' },
-                                        ],
-                                    },
-                                ],
-                            },
-                        ]}
-                        onCheck={(checked) => {
-                            actual = checked;
-                        }}
-                    />,
+                    <CheckboxTreeProvider>
+                        <CheckboxTree
+                            checkModel="all"
+                            initialTreeState={[
+                                {
+                                    value: 'sol',
+                                    label: 'Sol System',
+                                    expanded: true,
+                                    children: [
+                                        {
+                                            value: 'mercury',
+                                            label: 'Mercury',
+                                            checked: true,
+                                        },
+                                        {
+                                            value: 'jupiter',
+                                            label: 'Jupiter',
+                                            expanded: true,
+                                            children: [
+                                                {
+                                                    value: 'io',
+                                                    label: 'Io',
+                                                    checked: true,
+                                                },
+                                                { value: 'europa', label: 'Europa' },
+                                            ],
+                                        },
+                                    ],
+                                },
+                            ]}
+                            onCheck={(nodeKey, treeModel) => {
+                                actual = treeModel.getChecked();
+                            }}
+                        />
+                    </CheckboxTreeProvider>,
                 );
 
                 const user = userEvent.setup();
@@ -96,33 +113,36 @@ describe('<CheckboxTree />', () => {
                 assert.deepEqual(actual, ['sol', 'mercury', 'jupiter', 'io', 'europa']);
             });
 
-            it('should NOT percolate `checked` to the parent if not all leaves are checked', async () => {
+            it('parent.checkState should equal 2 if not all leaves are checked', async () => {
                 let actual = null;
 
                 render(
-                    <CheckboxTree
-                        checkModel="all"
-                        expanded={['jupiter']}
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onCheck={(checked) => {
-                            actual = checked;
-                        }}
-                    />,
+                    <CheckboxTreeProvider>
+                        <CheckboxTree
+                            checkModel="all"
+                            initialTreeState={[
+                                {
+                                    value: 'jupiter',
+                                    label: 'Jupiter',
+                                    expanded: true,
+                                    children: [
+                                        { value: 'io', label: 'Io' },
+                                        { value: 'europa', label: 'Europa' },
+                                    ],
+                                },
+                            ]}
+                            onCheck={(nodeKey, treeModel) => {
+                                const node = treeModel.getNode('jupiter');
+                                actual = node.checkState;
+                            }}
+                        />
+                    </CheckboxTreeProvider>,
                 );
 
                 const user = userEvent.setup();
                 await user.click(screen.getByLabelText('Europa'));
 
-                assert.deepEqual(actual, ['europa']);
+                assert.equal(actual, 2);
             });
         });
 
@@ -131,21 +151,23 @@ describe('<CheckboxTree />', () => {
                 let actual = null;
 
                 render(
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onCheck={(checked) => {
-                            actual = checked;
-                        }}
-                    />,
+                    <CheckboxTreeProvider>
+                        <CheckboxTree
+                            initialTreeState={[
+                                {
+                                    value: 'jupiter',
+                                    label: 'Jupiter',
+                                    children: [
+                                        { value: 'io', label: 'Io' },
+                                        { value: 'europa', label: 'Europa' },
+                                    ],
+                                },
+                            ]}
+                            onCheck={(nodeKey, treeModel) => {
+                                actual = treeModel.getChecked();
+                            }}
+                        />
+                    </CheckboxTreeProvider>,
                 );
 
                 const user = userEvent.setup();
@@ -161,14 +183,16 @@ describe('<CheckboxTree />', () => {
             let actual = null;
 
             render(
-                <CheckboxTree
-                    checkKeys={['Shift']}
-                    checked={[]}
-                    nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                    onCheck={(checked) => {
-                        actual = checked;
-                    }}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        checkKeys={['Shift']}
+                        checked={[]}
+                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                        onCheck={(nodeKey, treeModel) => {
+                            actual = treeModel.getChecked();
+                        }}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             await fireEvent.keyUp(screen.getByRole('checkbox'), { key: 'Shift' });
@@ -177,6 +201,7 @@ describe('<CheckboxTree />', () => {
         });
     });
 
+    /* not applicable as checked array is not an input prop to CheckboxTree
     describe('checked', () => {
         // https://github.com/jakezatecky/react-checkbox-tree/issues/69
         it('should not throw an exception if it contains values that are not in the `nodes` property', () => {
@@ -190,11 +215,17 @@ describe('<CheckboxTree />', () => {
             assert.isNotNull(container.querySelector('.react-checkbox-tree'));
         });
     });
+    */
 
     describe('direction', () => {
         it('should add the class rct-direction-rtl to the root when set to `rtl`', () => {
             const { container } = render(
-                <CheckboxTree direction="rtl" nodes={[]} />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        direction="rtl"
+                        initialTreeState={[]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.isNotNull(container.querySelector('.react-checkbox-tree.rct-direction-rtl'));
@@ -204,13 +235,19 @@ describe('<CheckboxTree />', () => {
     describe('disabled', () => {
         it('should add the class rct-disabled to the root', () => {
             const { container } = render(
-                <CheckboxTree disabled nodes={[]} />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        disabled
+                        initialTreeState={[]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.isNotNull(container.querySelector('.react-checkbox-tree.rct-disabled'));
         });
     });
 
+    /* not applicable as expanded array is not an input prop to CheckboxTree
     describe('expanded', () => {
         // https://github.com/jakezatecky/react-checkbox-tree/issues/69
         it('should not throw an exception if it contains values that are not in the `nodes` property', () => {
@@ -224,15 +261,23 @@ describe('<CheckboxTree />', () => {
             assert.isNotNull(container.querySelector('.react-checkbox-tree'));
         });
     });
+    */
 
     describe('icons', () => {
         it('should pass the property directly to tree nodes', () => {
             const { container } = render(
-                <CheckboxTree
-                    checked={['jupiter']}
-                    icons={{ check: <span className="other-check" /> }}
-                    nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        icons={{ check: <span className="other-check" /> }}
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                checked: true,
+                            },
+                        ]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.isNotNull(container.querySelector('.rct-checkbox > .other-check'));
@@ -240,10 +285,17 @@ describe('<CheckboxTree />', () => {
 
         it('should be merged in with the defaults when keys are missing', () => {
             const { container } = render(
-                <CheckboxTree
-                    icons={{ check: <span className="other-check" /> }}
-                    nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        icons={{ check: <span className="other-check" /> }}
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                            },
+                        ]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.isNotNull(container.querySelector('.rct-checkbox > .rct-icon-uncheck'));
@@ -251,10 +303,12 @@ describe('<CheckboxTree />', () => {
 
         it('should not render the wrapper element when an icon is set to null', () => {
             const { container } = render(
-                <CheckboxTree
-                    icons={{ leaf: null }}
-                    nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        icons={{ leaf: null }}
+                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.isNull(container.querySelector('.rct-node-icon'));
@@ -264,10 +318,12 @@ describe('<CheckboxTree />', () => {
     describe('iconsClass', () => {
         it('should apply the specified icon style to the tree', () => {
             const { container } = render(
-                <CheckboxTree
-                    iconsClass="some-class"
-                    nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        iconsClass="some-class"
+                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.isTrue(container.querySelector('.react-checkbox-tree').classList.contains('rct-icons-some-class'));
@@ -277,10 +333,12 @@ describe('<CheckboxTree />', () => {
     describe('id', () => {
         it('should pass the id to the top-level DOM node', () => {
             const { container } = render(
-                <CheckboxTree
-                    id="my-awesome-id"
-                    nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        id="my-awesome-id"
+                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.equal(container.querySelector('.react-checkbox-tree').id, 'my-awesome-id');
@@ -288,10 +346,12 @@ describe('<CheckboxTree />', () => {
 
         it('should pass the id as a property directly to tree nodes', () => {
             render(
-                <CheckboxTree
-                    id="my-awesome-id"
-                    nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        id="my-awesome-id"
+                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.equal(screen.getByRole('checkbox').id, 'my-awesome-id-jupiter');
@@ -301,16 +361,18 @@ describe('<CheckboxTree />', () => {
     describe('lang', () => {
         it('should override default language values', () => {
             render(
-                <CheckboxTree
-                    lang={{
-                        expandAll: 'Expand all of it',
-                        expandNode: 'Expand it',
-                        collapseAll: 'Collapse all of it',
-                        collapseNode: 'Collapse it',
-                    }}
-                    nodes={[]}
-                    showExpandAll
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[]}
+                        lang={{
+                            expandAll: 'Expand all of it',
+                            expandNode: 'Expand it',
+                            collapseAll: 'Collapse all of it',
+                            collapseNode: 'Collapse it',
+                        }}
+                        showExpandAll
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.isNotNull(screen.queryByLabelText('Expand all of it'));
@@ -320,7 +382,9 @@ describe('<CheckboxTree />', () => {
     describe('nativeCheckboxes', () => {
         it('should add the class `rct-native-display` to the root', () => {
             const { container } = render(
-                <CheckboxTree nativeCheckboxes nodes={[]} />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree initialTreeState={[]} nativeCheckboxes />
+                </CheckboxTreeProvider>,
             );
 
             assert.isNotNull(container.querySelector('.react-checkbox-tree.rct-native-display'));
@@ -335,9 +399,11 @@ describe('<CheckboxTree />', () => {
 
         it('should render the node\'s label', () => {
             render(
-                <CheckboxTree
-                    nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.isNotNull(screen.queryByLabelText('Jupiter'));
@@ -345,10 +411,12 @@ describe('<CheckboxTree />', () => {
 
         it('should render the node\'s value', () => {
             render(
-                <CheckboxTree
-                    id="id"
-                    nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        id="id"
+                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.equal(screen.getByRole('checkbox').id, 'id-jupiter');
@@ -356,13 +424,15 @@ describe('<CheckboxTree />', () => {
 
         it('should render multiple nodes', () => {
             render(
-                <CheckboxTree
-                    id="id"
-                    nodes={[
-                        { value: 'jupiter', label: 'Jupiter' },
-                        { value: 'saturn', label: 'Saturn' },
-                    ]}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        id="id"
+                        initialTreeState={[
+                            { value: 'jupiter', label: 'Jupiter' },
+                            { value: 'saturn', label: 'Saturn' },
+                        ]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.equal(screen.getByLabelText('Jupiter').id, 'id-jupiter');
@@ -371,19 +441,21 @@ describe('<CheckboxTree />', () => {
 
         it('should render child nodes', () => {
             render(
-                <CheckboxTree
-                    expanded={['jupiter']}
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [
-                                { value: 'io', label: 'Io' },
-                                { value: 'europa', label: 'Europa' },
-                            ],
-                        },
-                    ]}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                expanded: true,
+                                children: [
+                                    { value: 'io', label: 'Io' },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.isNotNull(screen.queryByLabelText('Io'));
@@ -392,11 +464,13 @@ describe('<CheckboxTree />', () => {
 
         it('should render a node with no `children` array as a leaf', () => {
             const { container } = render(
-                <CheckboxTree
-                    nodes={[
-                        { value: 'jupiter', label: 'Jupiter' },
-                    ]}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            { value: 'jupiter', label: 'Jupiter' },
+                        ]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             const { classList } = container.querySelector('.rct-node');
@@ -407,15 +481,17 @@ describe('<CheckboxTree />', () => {
 
         it('should render a node with an empty `children` array as a parent', () => {
             const { container } = render(
-                <CheckboxTree
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [],
-                        },
-                    ]}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [],
+                            },
+                        ]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             const { classList } = container.querySelector('.rct-node');
@@ -427,21 +503,23 @@ describe('<CheckboxTree />', () => {
         // https://github.com/jakezatecky/react-checkbox-tree/issues/258
         it('should render a node with an empty `children` array as unchecked by default', () => {
             render(
-                <CheckboxTree
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [],
-                        },
-                    ]}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [],
+                            },
+                        ]}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.isFalse(screen.getByRole('checkbox').checked);
         });
 
-        it('should throw an error when duplicate values are used', async () => {
+        it('should throw an error when duplicate values are used in the same children array', async () => {
             // Suppress caught errors from React
             console.error = () => {};
 
@@ -449,20 +527,57 @@ describe('<CheckboxTree />', () => {
 
             try {
                 render(
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'jupiter', label: 'Jupiter' },
-                                ],
-                            },
-                        ]}
-                    />,
+                    <CheckboxTreeProvider>
+                        <CheckboxTree
+                            initialTreeState={[
+                                {
+                                    value: 'jupiter',
+                                    label: 'Jupiter',
+                                    expanded: true,
+                                    children: [
+                                        { value: 'io', label: 'Io' },
+                                        { value: 'io', label: 'Europa' },
+                                    ],
+                                },
+                            ]}
+                        />
+                    </CheckboxTreeProvider>,
                 );
             } catch (e) {
-                if (e instanceof CheckboxTreeError) {
+                if (e instanceof TreeModelError) {
+                    errorMessage = e.message;
+                } else {
+                    throw e;
+                }
+            }
+
+            assert.equal(errorMessage, "Duplicate value 'io' detected. All node values must be unique.");
+        });
+
+        it('should throw an error when duplicate values are used in different levels of the tree', async () => {
+            // Suppress caught errors from React
+            console.error = () => {};
+
+            let errorMessage = '';
+
+            try {
+                render(
+                    <CheckboxTreeProvider>
+                        <CheckboxTree
+                            initialTreeState={[
+                                {
+                                    value: 'jupiter',
+                                    label: 'Jupiter',
+                                    children: [
+                                        { value: 'jupiter', label: 'Jupiter' },
+                                    ],
+                                },
+                            ]}
+                        />
+                    </CheckboxTreeProvider>,
+                );
+            } catch (e) {
+                if (e instanceof TreeModelError) {
                     errorMessage = e.message;
                 } else {
                     throw e;
@@ -478,22 +593,25 @@ describe('<CheckboxTree />', () => {
             let actual = null;
 
             render(
-                <CheckboxTree
-                    noCascade
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [
-                                { value: 'io', label: 'Io' },
-                                { value: 'europa', label: 'Europa' },
-                            ],
-                        },
-                    ]}
-                    onCheck={(checked) => {
-                        actual = checked;
-                    }}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        checkModel="all"
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [
+                                    { value: 'io', label: 'Io' },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                        noCascade
+                        onCheck={(nodeKey, treeModel) => {
+                            actual = treeModel.getChecked();
+                        }}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             const user = userEvent.setup();
@@ -506,21 +624,23 @@ describe('<CheckboxTree />', () => {
             let actual = null;
 
             render(
-                <CheckboxTree
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [
-                                { value: 'io', label: 'Io' },
-                                { value: 'europa', label: 'Europa' },
-                            ],
-                        },
-                    ]}
-                    onCheck={(checked) => {
-                        actual = checked;
-                    }}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [
+                                    { value: 'io', label: 'Io' },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                        onCheck={(nodeKey, treeModel) => {
+                            actual = treeModel.getChecked();
+                        }}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             const user = userEvent.setup();
@@ -534,18 +654,20 @@ describe('<CheckboxTree />', () => {
         describe('disabled', () => {
             it('should disable the target node when set to true', () => {
                 render(
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                disabled: true,
-                                children: [
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                    />,
+                    <CheckboxTreeProvider>
+                        <CheckboxTree
+                            initialTreeState={[
+                                {
+                                    value: 'jupiter',
+                                    label: 'Jupiter',
+                                    disabled: true,
+                                    children: [
+                                        { value: 'europa', label: 'Europa' },
+                                    ],
+                                },
+                            ]}
+                        />
+                    </CheckboxTreeProvider>,
                 );
 
                 assert.isTrue(screen.getByLabelText('Jupiter').disabled);
@@ -553,19 +675,21 @@ describe('<CheckboxTree />', () => {
 
             it('should disable the child nodes when `noCascade` is false', () => {
                 render(
-                    <CheckboxTree
-                        expanded={['jupiter']}
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                disabled: true,
-                                children: [
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                    />,
+                    <CheckboxTreeProvider>
+                        <CheckboxTree
+                            initialTreeState={[
+                                {
+                                    value: 'jupiter',
+                                    label: 'Jupiter',
+                                    disabled: true,
+                                    expanded: true,
+                                    children: [
+                                        { value: 'europa', label: 'Europa' },
+                                    ],
+                                },
+                            ]}
+                        />
+                    </CheckboxTreeProvider>,
                 );
 
                 assert.isTrue(screen.getByLabelText('Europa').disabled);
@@ -573,20 +697,22 @@ describe('<CheckboxTree />', () => {
 
             it('should NOT disable the child nodes when `noCascade` is true', () => {
                 render(
-                    <CheckboxTree
-                        expanded={['jupiter']}
-                        noCascade
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                disabled: true,
-                                children: [
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                    />,
+                    <CheckboxTreeProvider>
+                        <CheckboxTree
+                            initialTreeState={[
+                                {
+                                    value: 'jupiter',
+                                    label: 'Jupiter',
+                                    disabled: true,
+                                    expanded: true,
+                                    children: [
+                                        { value: 'europa', label: 'Europa' },
+                                    ],
+                                },
+                            ]}
+                            noCascade
+                        />
+                    </CheckboxTreeProvider>,
                 );
 
                 assert.isFalse(screen.getByLabelText('Europa').disabled);
@@ -598,24 +724,27 @@ describe('<CheckboxTree />', () => {
                     {
                         value: 'jupiter',
                         label: 'Jupiter',
+                        expanded: true,
                         children: [
                             { value: 'europa', label: 'Europa' },
                         ],
                     },
                 ];
                 const { rerender } = render(
-                    <CheckboxTree
-                        disabled
-                        expanded={['jupiter']}
-                        nodes={nodes}
-                    />,
+                    <CheckboxTreeProvider>
+                        <CheckboxTree
+                            disabled
+                            initialTreeState={nodes}
+                        />
+                    </CheckboxTreeProvider>,
                 );
 
                 rerender(
-                    <CheckboxTree
-                        expanded={['jupiter']}
-                        nodes={nodes}
-                    />,
+                    <CheckboxTreeProvider>
+                        <CheckboxTree
+                            initialTreeState={nodes}
+                        />
+                    </CheckboxTreeProvider>,
                 );
 
                 assert.isFalse(screen.getByLabelText('Europa').disabled);
@@ -626,20 +755,23 @@ describe('<CheckboxTree />', () => {
     describe('onlyLeafCheckboxes', () => {
         it('should only render checkboxes for leaf nodes', () => {
             render(
-                <CheckboxTree
-                    expanded={['jupiter']}
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [
-                                { value: 'io', label: 'Io' },
-                                { value: 'europa', label: 'Europa' },
-                            ],
-                        },
-                    ]}
-                    onlyLeafCheckboxes
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                expanded: true,
+                                children: [
+                                    { value: 'io', label: 'Io' },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                        onlyLeafCheckboxes
+                    />
+                </CheckboxTreeProvider>,
+
             );
 
             assert.isNull(screen.queryByLabelText('Jupiter'));
@@ -651,10 +783,12 @@ describe('<CheckboxTree />', () => {
     describe('showExpandAll', () => {
         it('should render the expand all/collapse all buttons', () => {
             render(
-                <CheckboxTree
-                    nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                    showExpandAll
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                        showExpandAll
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.isNotNull(screen.queryByLabelText('Expand all'));
@@ -666,34 +800,36 @@ describe('<CheckboxTree />', () => {
                 let actualExpanded = null;
 
                 render(
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'mercury',
-                                label: 'Mercury',
-                            },
-                            {
-                                value: 'mars',
-                                label: 'Mars',
-                                children: [
-                                    { value: 'phobos', label: 'Phobos' },
-                                    { value: 'deimos', label: 'Deimos' },
-                                ],
-                            },
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        showExpandAll
-                        onExpand={(expanded) => {
-                            actualExpanded = expanded;
-                        }}
-                    />,
+                    <CheckboxTreeProvider>
+                        <CheckboxTree
+                            initialTreeState={[
+                                {
+                                    value: 'mercury',
+                                    label: 'Mercury',
+                                },
+                                {
+                                    value: 'mars',
+                                    label: 'Mars',
+                                    children: [
+                                        { value: 'phobos', label: 'Phobos' },
+                                        { value: 'deimos', label: 'Deimos' },
+                                    ],
+                                },
+                                {
+                                    value: 'jupiter',
+                                    label: 'Jupiter',
+                                    children: [
+                                        { value: 'io', label: 'Io' },
+                                        { value: 'europa', label: 'Europa' },
+                                    ],
+                                },
+                            ]}
+                            showExpandAll
+                            onExpand={(nodekey, treeModel) => {
+                                actualExpanded = treeModel.getExpanded();
+                            }}
+                        />
+                    </CheckboxTreeProvider>,
                 );
 
                 const user = userEvent.setup();
@@ -708,35 +844,37 @@ describe('<CheckboxTree />', () => {
                 let actualExpanded = null;
 
                 render(
-                    <CheckboxTree
-                        expanded={['mars', 'jupiter']}
-                        nodes={[
-                            {
-                                value: 'mercury',
-                                label: 'Mercury',
-                            },
-                            {
-                                value: 'mars',
-                                label: 'Mars',
-                                children: [
-                                    { value: 'phobos', label: 'Phobos' },
-                                    { value: 'deimos', label: 'Deimos' },
-                                ],
-                            },
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        showExpandAll
-                        onExpand={(expanded) => {
-                            actualExpanded = expanded;
-                        }}
-                    />,
+                    <CheckboxTreeProvider>
+                        <CheckboxTree
+                            expanded={['mars', 'jupiter']}
+                            initialTreeState={[
+                                {
+                                    value: 'mercury',
+                                    label: 'Mercury',
+                                },
+                                {
+                                    value: 'mars',
+                                    label: 'Mars',
+                                    children: [
+                                        { value: 'phobos', label: 'Phobos' },
+                                        { value: 'deimos', label: 'Deimos' },
+                                    ],
+                                },
+                                {
+                                    value: 'jupiter',
+                                    label: 'Jupiter',
+                                    children: [
+                                        { value: 'io', label: 'Io' },
+                                        { value: 'europa', label: 'Europa' },
+                                    ],
+                                },
+                            ]}
+                            showExpandAll
+                            onExpand={(nodeKey, treeModel) => {
+                                actualExpanded = treeModel.getExpanded();
+                            }}
+                        />
+                    </CheckboxTreeProvider>,
                 );
 
                 const user = userEvent.setup();
@@ -750,15 +888,17 @@ describe('<CheckboxTree />', () => {
     describe('showNodeTitle', () => {
         it('should add `title` properties to a TreeNode from the `label` property when set', () => {
             const { container } = render(
-                <CheckboxTree
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                        },
-                    ]}
-                    showNodeTitle
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                            },
+                        ]}
+                        showNodeTitle
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.equal(container.querySelector('label').title, 'Jupiter');
@@ -766,16 +906,18 @@ describe('<CheckboxTree />', () => {
 
         it('should prioritize the node `title` over the `label', () => {
             const { container } = render(
-                <CheckboxTree
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            title: 'That Big Failed Star',
-                        },
-                    ]}
-                    showNodeTitle
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                title: 'That Big Failed Star',
+                            },
+                        ]}
+                        showNodeTitle
+                    />
+                </CheckboxTreeProvider>,
             );
 
             assert.equal(container.querySelector('label').title, 'That Big Failed Star');
@@ -787,21 +929,23 @@ describe('<CheckboxTree />', () => {
             let actualChecked = null;
 
             render(
-                <CheckboxTree
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [
-                                { value: 'io', label: 'Io' },
-                                { value: 'europa', label: 'Europa' },
-                            ],
-                        },
-                    ]}
-                    onCheck={(checked) => {
-                        actualChecked = checked;
-                    }}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [
+                                    { value: 'io', label: 'Io' },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                        onCheck={(nodeKey, treeModel) => {
+                            actualChecked = treeModel.getChecked();
+                        }}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             const user = userEvent.setup();
@@ -813,54 +957,63 @@ describe('<CheckboxTree />', () => {
         // https://github.com/jakezatecky/react-checkbox-tree/issues/258
         it('should toggle a node with an empty `children` array', async () => {
             let actualChecked = {};
-            const makeEmptyParentNode = (checked) => (
-                <CheckboxTree
-                    checked={checked}
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [],
-                        },
-                    ]}
-                    onCheck={(node) => {
-                        actualChecked = node;
-                    }}
-                />
+            const makeEmptyParentNode = (initialTreeState) => (
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={initialTreeState}
+                        onCheck={(nodeKey, treeModel) => {
+                            actualChecked = treeModel.getChecked();
+                        }}
+                    />
+                </CheckboxTreeProvider>
             );
 
             const user = userEvent.setup();
 
             // Unchecked to checked
-            const { rerender } = render(makeEmptyParentNode([]));
+            const { rerender } = render(makeEmptyParentNode([
+                {
+                    value: 'jupiter',
+                    label: 'Jupiter',
+                    children: [],
+                },
+            ]));
             await user.click(screen.getByRole('checkbox'));
             assert.deepEqual(actualChecked, ['jupiter']);
 
             // Checked to unchecked
-            rerender(makeEmptyParentNode(['jupiter']));
+            rerender(makeEmptyParentNode([
+                {
+                    value: 'jupiter',
+                    label: 'Jupiter',
+                    checked: true,
+                    children: [],
+                },
+            ]));
             await user.click(screen.getByRole('checkbox'));
             assert.deepEqual(actualChecked, []);
         });
 
         it('should not add disabled children to the checked array', async () => {
             let actualChecked = null;
-
             render(
-                <CheckboxTree
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [
-                                { value: 'io', label: 'Io', disabled: true },
-                                { value: 'europa', label: 'Europa' },
-                            ],
-                        },
-                    ]}
-                    onCheck={(checked) => {
-                        actualChecked = checked;
-                    }}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [
+                                    { value: 'io', label: 'Io', disabled: true },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                        onCheck={(nodeKey, treeModel) => {
+                            actualChecked = treeModel.getChecked();
+                        }}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             const user = userEvent.setup();
@@ -869,31 +1022,62 @@ describe('<CheckboxTree />', () => {
             assert.deepEqual(actualChecked, ['europa']);
         });
 
-        it('should pass the node toggled as the second parameter', async () => {
-            let actualNode = null;
+        it('should pass the node.value of the clicked node as the first parameter', async () => {
+            let actual = '';
 
             render(
-                <CheckboxTree
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [
-                                { value: 'io', label: 'Io' },
-                                { value: 'europa', label: 'Europa' },
-                            ],
-                        },
-                    ]}
-                    onCheck={(checked, node) => {
-                        actualNode = node;
-                    }}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [
+                                    { value: 'io', label: 'Io' },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                        onCheck={(nodeKey, treeModel) => {
+                            actual = nodeKey;
+                        }}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             const user = userEvent.setup();
             await user.click(screen.getByLabelText('Jupiter'));
 
-            assert.equal(actualNode.value, 'jupiter');
+            assert.equal(actual, 'jupiter');
+        });
+
+        it('should pass the TreeModel instance as the second parameter', async () => {
+            let actual = false;
+
+            render(
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [
+                                    { value: 'io', label: 'Io' },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                        onCheck={(nodeKey, treeModel) => {
+                            actual = treeModel instanceof TreeModel;
+                        }}
+                    />
+                </CheckboxTreeProvider>,
+            );
+
+            const user = userEvent.setup();
+            await user.click(screen.getByLabelText('Jupiter'));
+
+            assert.equal(actual, true);
         });
     });
 
@@ -902,21 +1086,23 @@ describe('<CheckboxTree />', () => {
             let actualNode = null;
 
             render(
-                <CheckboxTree
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [
-                                { value: 'io', label: 'Io' },
-                                { value: 'europa', label: 'Europa' },
-                            ],
-                        },
-                    ]}
-                    onClick={(node) => {
-                        actualNode = node;
-                    }}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [
+                                    { value: 'io', label: 'Io' },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                        onClick={(node) => {
+                            actualNode = node;
+                        }}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             const user = userEvent.setup();
@@ -931,21 +1117,23 @@ describe('<CheckboxTree />', () => {
             let actualNode = null;
 
             render(
-                <CheckboxTree
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [
-                                { value: 'io', label: 'Io' },
-                                { value: 'europa', label: 'Europa' },
-                            ],
-                        },
-                    ]}
-                    onContextMenu={(event, node) => {
-                        actualNode = node;
-                    }}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [
+                                    { value: 'io', label: 'Io' },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                        onContextMenu={(event, node) => {
+                            actualNode = node;
+                        }}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             const user = userEvent.setup();
@@ -964,21 +1152,23 @@ describe('<CheckboxTree />', () => {
             let actualExpanded = null;
 
             render(
-                <CheckboxTree
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [
-                                { value: 'io', label: 'Io' },
-                                { value: 'europa', label: 'Europa' },
-                            ],
-                        },
-                    ]}
-                    onExpand={(expanded) => {
-                        actualExpanded = expanded;
-                    }}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [
+                                    { value: 'io', label: 'Io' },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                        onExpand={(nodeKey, treeModel) => {
+                            actualExpanded = treeModel.getExpanded();
+                        }}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             const user = userEvent.setup();
@@ -987,31 +1177,62 @@ describe('<CheckboxTree />', () => {
             assert.deepEqual(actualExpanded, ['jupiter']);
         });
 
-        it('should pass the node toggled as the second parameter', async () => {
-            let actualNode = null;
+        it('should pass the node.value of the clicked node as the first parameter', async () => {
+            let actual = '';
 
             render(
-                <CheckboxTree
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [
-                                { value: 'io', label: 'Io' },
-                                { value: 'europa', label: 'Europa' },
-                            ],
-                        },
-                    ]}
-                    onExpand={(expanded, node) => {
-                        actualNode = node;
-                    }}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [
+                                    { value: 'io', label: 'Io' },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                        onExpand={(nodeKey, treeModel) => {
+                            actual = nodeKey;
+                        }}
+                    />
+                </CheckboxTreeProvider>,
             );
 
             const user = userEvent.setup();
             await user.click(screen.getByLabelText('Expand node'));
 
-            assert.equal(actualNode.value, 'jupiter');
+            assert.equal(actual, 'jupiter');
+        });
+
+        it('should pass the TreeModel instance as the second parameter', async () => {
+            let actual = false;
+
+            render(
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                children: [
+                                    { value: 'io', label: 'Io' },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                        onExpand={(nodeKey, treeModel) => {
+                            actual = treeModel instanceof TreeModel;
+                        }}
+                    />
+                </CheckboxTreeProvider>,
+            );
+
+            const user = userEvent.setup();
+            await user.click(screen.getByLabelText('Expand node'));
+
+            assert.equal(actual, true);
         });
     });
 
@@ -1025,64 +1246,110 @@ describe('<CheckboxTree />', () => {
                 const {
                     value,
                     label,
-                    isLeaf,
+                    title,
+                    childKeys,
+                    expanded,
+                    checkState,
+                    parentKey,
+                    isChild,
                     isParent,
-                    treeDepth,
+                    isLeaf,
+                    isRadioGroup,
+                    isRadioNode,
+                    isHiddenByFilter,
+                    disabled,
+                    icon,
+                    showCheckbox,
                     index,
-                    parent: { value: parentValue },
+                    treeDepth,
                 } = node;
 
                 return {
                     value,
                     label,
-                    isLeaf,
+                    title,
+                    childKeys,
+                    expanded,
+                    checkState,
+                    parentKey,
+                    isChild,
                     isParent,
-                    treeDepth,
+                    isLeaf,
+                    isRadioGroup,
+                    isRadioNode,
+                    isHiddenByFilter,
+                    disabled,
+                    icon,
+                    showCheckbox,
                     index,
-                    parentValue,
+                    treeDepth,
                 };
             };
             render(
-                <CheckboxTree
-                    expanded={['jupiter']}
-                    nodes={[
-                        {
-                            value: 'jupiter',
-                            label: 'Jupiter',
-                            children: [
-                                { value: 'io', label: 'Io', title: 'Io' },
-                                { value: 'europa', label: 'Europa' },
-                            ],
-                        },
-                    ]}
-                    onCheck={(checked, node) => {
-                        checkNode = node;
-                    }}
-                    onClick={(node) => {
-                        clickNode = node;
-                    }}
-                    onExpand={(expanded, node) => {
-                        expandNode = node;
-                    }}
-                />,
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        initialTreeState={[
+                            {
+                                value: 'jupiter',
+                                label: 'Jupiter',
+                                expanded: true,
+                                children: [
+                                    { value: 'io', label: 'Io', title: 'Io' },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
+                        onCheck={(nodeKey, treeModel) => {
+                            checkNode = treeModel.getNode(nodeKey);
+                        }}
+                        onClick={(node) => {
+                            clickNode = node;
+                        }}
+                        onExpand={(nodeKey, treeModel) => {
+                            expandNode = treeModel.getNode(nodeKey);
+                        }}
+                    />
+                </CheckboxTreeProvider>,
             );
             const expectedLeafMetadata = {
                 value: 'io',
                 label: 'Io',
-                isLeaf: true,
+                title: 'Io',
+                childKeys: [],
+                expanded: false,
+                checkState: 1,
+                parentKey: 'jupiter',
+                isChild: true,
                 isParent: false,
-                treeDepth: 1,
+                isLeaf: true,
+                isRadioGroup: false,
+                isRadioNode: false,
+                isHiddenByFilter: false,
+                disabled: false,
+                icon: null,
+                showCheckbox: true,
                 index: 0,
-                parentValue: 'jupiter',
+                treeDepth: 1,
             };
             const expectedParentMetadata = {
                 value: 'jupiter',
                 label: 'Jupiter',
-                isLeaf: false,
+                title: undefined,
+                childKeys: ['io', 'europa'],
+                expanded: false,
+                checkState: 2,
+                parentKey: '',
+                isChild: false,
                 isParent: true,
-                treeDepth: 0,
+                isLeaf: false,
+                isRadioGroup: false,
+                isRadioNode: false,
+                isHiddenByFilter: false,
+                disabled: false,
+                icon: null,
+                showCheckbox: true,
                 index: 0,
-                parentValue: undefined,
+                treeDepth: 0,
             };
 
             const user = userEvent.setup();
diff --git a/test/TreeNode.jsx b/test/TreeNode.jsx
index 1daf3368..ddea1d85 100644
--- a/test/TreeNode.jsx
+++ b/test/TreeNode.jsx
@@ -7,6 +7,7 @@ import userEvent from '@testing-library/user-event';
 import BaseTreeNode from '../src/js/components/TreeNode';
 import { IconContext, LanguageContext } from '../src/js/contexts';
 import lang from '../src/js/lang/default';
+import NodeModel from '../src/js/models/NodeModel';
 
 const icons = {
     check: <span className="rct-icon rct-icon-check" />,
@@ -27,14 +28,20 @@ const baseProps = {
     expanded: false,
     isLeaf: true,
     isParent: false,
-    label: 'Jupiter',
+    noCascade: false,
+    node: new NodeModel(
+        { label: 'Jupiter', value: 'jupiter' },
+        {},
+        1,
+        0,
+    ),
     optimisticToggle: true,
     showNodeIcon: true,
     treeId: 'id',
-    value: 'jupiter',
     onCheck: () => {},
     onExpand: () => {},
 };
+
 function TreeNode(props) {
     return (
         <LanguageContext.Provider value={lang}>
@@ -66,7 +73,15 @@ describe('<TreeNode />', () => {
 
         it('should render an id based on an integer value', () => {
             render(
-                <TreeNode {...baseProps} value={0} />,
+                <TreeNode
+                    {...baseProps}
+                    node={new NodeModel(
+                        { label: 'Jupiter', value: '0' },
+                        {},
+                        1,
+                        0,
+                    )}
+                />,
             );
 
             assert.equal(screen.getByLabelText('Jupiter').id, 'id-0');
@@ -74,7 +89,15 @@ describe('<TreeNode />', () => {
 
         it('should render an id based on a float value', () => {
             render(
-                <TreeNode {...baseProps} value={0.25} />,
+                <TreeNode
+                    {...baseProps}
+                    node={new NodeModel(
+                        { label: 'Jupiter', value: '0.25' },
+                        {},
+                        1,
+                        0,
+                    )}
+                />,
             );
 
             assert.equal(screen.getByLabelText('Jupiter').id, 'id-0.25');
@@ -90,8 +113,23 @@ describe('<TreeNode />', () => {
             };
 
             Object.keys(iconMap).forEach((state) => {
+                const node = new NodeModel(
+                    {
+                        label: 'Jupiter',
+                        value: 'jupiter',
+                        checked: parseInt(state, 10),
+                    },
+                    {},
+                    1,
+                    0,
+                );
+                node.checkState = parseInt(state, 10);
+
                 const { container } = render(
-                    <TreeNode {...baseProps} checked={parseInt(state, 10)} />,
+                    <TreeNode
+                        {...baseProps}
+                        node={node}
+                    />,
                 );
 
                 assert.isNotNull(container.querySelector(`.${iconMap[state]}`));

From f396f99e814d68b57acaecaf5e4255758fb74ad5 Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Wed, 3 May 2023 13:45:32 -0400
Subject: [PATCH 02/17] rename function with more appropriate name

---
 examples/src/js/FilterExample.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/src/js/FilterExample.jsx b/examples/src/js/FilterExample.jsx
index 7e7522c7..742c3bba 100644
--- a/examples/src/js/FilterExample.jsx
+++ b/examples/src/js/FilterExample.jsx
@@ -43,7 +43,7 @@ function FilterWidget() {
         node.label.toLocaleLowerCase().indexOf(filterText.toLocaleLowerCase()) > -1
     );
 
-    const getFilteredModel = () => {
+    const applyFilter = () => {
         treeModel.filter(filterTest);
         setActiveFilter(filterText);
     };
@@ -61,7 +61,7 @@ function FilterWidget() {
                 // filter is requested
                 if (filterText !== activeFilter) {
                     // filter has changed
-                    const newTimeoutId = setTimeout(getFilteredModel, timeoutDelay);
+                    const newTimeoutId = setTimeout(applyFilter, timeoutDelay);
                     setTimeoutId(newTimeoutId);
                 }
             } else if (activeFilter !== '') {

From f543159ccdd2ff12391f9458d36d1ef9ab86fd13 Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Wed, 3 May 2023 15:13:00 -0400
Subject: [PATCH 03/17] fix some tests

---
 examples/src/js/BasicExample.jsx |  1 -
 src/js/models/NodeModel.js       |  4 ++--
 src/js/models/TreeModel.js       | 38 ++++++++++++++++++--------------
 test/CheckboxTree.jsx            |  3 ++-
 4 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/examples/src/js/BasicExample.jsx b/examples/src/js/BasicExample.jsx
index 2015400b..c47ea7b7 100644
--- a/examples/src/js/BasicExample.jsx
+++ b/examples/src/js/BasicExample.jsx
@@ -20,7 +20,6 @@ function BasicExample() {
         <CheckboxTreeProvider>
             <CheckboxTree
                 initialTreeState={initialTreeState}
-                nativeCheckboxes
                 onCheck={onCheck}
                 onExpand={onExpand}
             />
diff --git a/src/js/models/NodeModel.js b/src/js/models/NodeModel.js
index 72c98a5e..304e5203 100644
--- a/src/js/models/NodeModel.js
+++ b/src/js/models/NodeModel.js
@@ -29,7 +29,7 @@ class NodeModel {
 
         if (!(nodeConfig instanceof NodeModel)) {
             // check for required properties and add missing ones;
-            const isParent = Array.isArray(nodeConfig.children) && nodeConfig.children.length > 0;
+            const isParent = Array.isArray(nodeConfig.children);
 
             // save node.value of children in this.childKeys
             // don't save reference to actual child nodes - mutation nightmare
@@ -37,7 +37,7 @@ class NodeModel {
                 this.childKeys = nodeConfig.children.map((child) => child.value);
                 this.expanded = ('expanded' in nodeConfig) ? nodeConfig.expanded : false;
             } else {
-                this.childKeys = [];
+                this.childKeys = null;
                 this.expanded = false;
             }
 
diff --git a/src/js/models/TreeModel.js b/src/js/models/TreeModel.js
index ba70b867..92f2de7d 100644
--- a/src/js/models/TreeModel.js
+++ b/src/js/models/TreeModel.js
@@ -14,7 +14,7 @@ class TreeModel {
                             newNode.disabled = parent.disabled;
                         }
                     }
-                    if (newNode.isParent) {
+                    if (newNode.isParent && node.children.length > 0) {
                         flatten(node.children, node, depth + 1);
 
                         // adjust checkState based upon children's checkState
@@ -34,6 +34,7 @@ class TreeModel {
                                 );
                             }
                         } else if (!newNode.isRadioNode) {
+                            // this is for parent nodes with children
                             const checkState = this.getCheckState(newNode);
                             newNode.checkState = checkState;
                         }
@@ -198,15 +199,17 @@ class TreeModel {
             if (test(node) && !node.disabled) {
                 checkedArray.push(nodeKey);
             }
-            // ignore all nodes below an OFF radio group
-            // ignore all nodes below an OFF radio button
-            // NOT ( off && (node.isRadioGroup or node.isRadioNode))
-            // TODO: should the above be switchable on/off?
-            //       ignoreCheckedBelowRadioOff: default to true
-            if (!((node.checkState === 0) && (node.isRadioGroup || node.isRadioNode))) {
-                node.childKeys.forEach((key) => {
-                    walkTree(key);
-                });
+            if (node.isParent) {
+                // ignore all nodes below an OFF radio group
+                // ignore all nodes below an OFF radio button
+                // NOT ( off && (node.isRadioGroup or node.isRadioNode))
+                // TODO: should the above be switchable on/off?
+                //       ignoreCheckedBelowRadioOff: default to true
+                if (!((node.checkState === 0) && (node.isRadioGroup || node.isRadioNode))) {
+                    node.childKeys.forEach((key) => {
+                        walkTree(key);
+                    });
+                }
             }
         };
 
@@ -300,25 +303,28 @@ class TreeModel {
         //----------------------------------------------------------------------
         // recursive function to handle toggle
         // defined here because it uses newCheckState & newTree from above
-        const toggle = (key, checked) => {
+        const toggle = (key) => {
             const newNode = this.getNode(key).clone();
-            if (newNode.isLeaf || this.options.noCascade) {
-                newNode.checkState = checked;
-            } else if (newNode.isRadioGroup || newNode.isRadioNode) {
-                // child nodes remain unchanged
+            if (this.options.noCascade ||
+                newNode.isLeaf ||
+                newNode.childKeys.length === 0 ||
+                newNode.isRadioGroup ||
+                newNode.isRadioNode
+            ) {
                 newNode.checkState = newCheckState;
             } else {
                 // toggle child nodes first
                 newNode.childKeys.forEach((childKey) => {
                     toggle(childKey, newCheckState);
                 });
+                // get checkState based upon childNodes checkState
                 newNode.checkState = newTreeModel.getCheckState(newNode);
             }
             newTree[key] = newNode;
         };
         //----------------------------------------------------------------------
 
-        toggle(nodeKey, newCheckState);
+        toggle(nodeKey);
 
         // Percolate check status up to parents
         // if child isRadioNode do not percolate up
diff --git a/test/CheckboxTree.jsx b/test/CheckboxTree.jsx
index cdbb5626..60d5652a 100644
--- a/test/CheckboxTree.jsx
+++ b/test/CheckboxTree.jsx
@@ -960,6 +960,7 @@ describe('<CheckboxTree />', () => {
             const makeEmptyParentNode = (initialTreeState) => (
                 <CheckboxTreeProvider>
                     <CheckboxTree
+                        checkModel="all"
                         initialTreeState={initialTreeState}
                         onCheck={(nodeKey, treeModel) => {
                             actualChecked = treeModel.getChecked();
@@ -1315,7 +1316,7 @@ describe('<CheckboxTree />', () => {
                 value: 'io',
                 label: 'Io',
                 title: 'Io',
-                childKeys: [],
+                childKeys: null,
                 expanded: false,
                 checkState: 1,
                 parentKey: 'jupiter',

From 021b9d8186a62df207014ba8a69ebc0662b089d7 Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Fri, 5 May 2023 14:36:53 -0400
Subject: [PATCH 04/17] add CustomLabelExample with changes to support it

---
 examples/src/index.html                       |  12 ++
 examples/src/index.jsx                        |   2 +
 examples/src/js/CustomLabelExample.jsx        | 100 ++++++++++
 examples/src/js/data/index.js                 |   1 +
 examples/src/js/data/mapLayerTreeSmall.js     | 176 ++++++++++++++++++
 src/js/CheckboxTree.jsx                       | 139 ++++++++------
 src/js/components/BareLabel.jsx               |  45 ++---
 src/js/components/CheckboxLabel.jsx           |  70 +++----
 src/js/components/Clickable.jsx               |  36 ++++
 .../{LabelChildren.jsx => DefaultLabel.jsx}   |  34 ++--
 src/js/components/TreeNode.jsx                |  68 +++++--
 11 files changed, 536 insertions(+), 147 deletions(-)
 create mode 100644 examples/src/js/CustomLabelExample.jsx
 create mode 100644 examples/src/js/data/mapLayerTreeSmall.js
 create mode 100644 src/js/components/Clickable.jsx
 rename src/js/components/{LabelChildren.jsx => DefaultLabel.jsx} (55%)

diff --git a/examples/src/index.html b/examples/src/index.html
index 1decfdc8..ba30349b 100644
--- a/examples/src/index.html
+++ b/examples/src/index.html
@@ -110,6 +110,18 @@ <h2>Radio Button Group Example</h2>
       </p>
       <div id="radio-button-example"></div>
 
+      <h2>Custom Label Example</h2>
+      <p>
+        A custom label component can be passed to replace the default label
+        component. All labels can be replaced with the same component or parent
+        and leaf nodes can have different replacement label components.
+      </p>
+      <p>
+        See <code>LabelComponent</code>, <code>LeafLabelComponent</code>, and
+        <code>ParentLabelComponent</code> properties of <code>CheckboxTree</code>.
+      </p>
+      <div id="custom-label-example"></div>
+
       <footer class="site-footer">
         <span class="site-footer-owner">
           <a href="https://github.com/jakezatecky/react-checkbox-tree">React Checkbox Tree</a> is maintained by <a href="https://github.com/jakezatecky">jakezatecky</a>.
diff --git a/examples/src/index.jsx b/examples/src/index.jsx
index d6e1f475..8d48d842 100644
--- a/examples/src/index.jsx
+++ b/examples/src/index.jsx
@@ -4,6 +4,7 @@ import { createRoot } from 'react-dom/client';
 import BasicExample from './js/BasicExample';
 import ClickableLabelsExample from './js/ClickableLabelsExample';
 import CustomIconsExample from './js/CustomIconsExample';
+import CustomLabelExample from './js/CustomLabelExample';
 import DisabledExample from './js/DisabledExample';
 import ExpandAllExample from './js/ExpandAllExample';
 import FilterExample from './js/FilterExample';
@@ -26,3 +27,4 @@ createRoot(document.getElementById('native-checkboxes-example')).render(<NativeC
 createRoot(document.getElementById('no-cascade-example')).render(<NoCascadeExample />);
 createRoot(document.getElementById('pessimistic-toggle-example')).render(<PessimisticToggleExample />);
 createRoot(document.getElementById('radio-button-example')).render(<RadioButtonExample />);
+createRoot(document.getElementById('custom-label-example')).render(<CustomLabelExample />);
diff --git a/examples/src/js/CustomLabelExample.jsx b/examples/src/js/CustomLabelExample.jsx
new file mode 100644
index 00000000..a3d4d8fe
--- /dev/null
+++ b/examples/src/js/CustomLabelExample.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+
+import { mapLayerTreeSmall as initialTreeState } from './data';
+
+const CustomLabel = ({node, onChange}) => {
+    const onChangeHandler = (e) => {
+        const nodeKey = e.target.name;
+        const value = e.target.value;
+        onChange(nodeKey, value);
+    }
+
+    return (
+        <div
+            style={{
+                border: "1px solid lightgrey",
+                borderRadius: "8px",
+                margin: "2px",
+                padding: "3px 8px",
+                minWidth: "180px",
+                backgroundColor: "lightblue"
+            }}
+        >
+            <div>
+                {node.label}
+            </div>
+            <div style={{display: 'flex'}}>
+                <label htmlFor="volume">opacity:</label>
+                <span>
+                    <input
+                        type="range"
+                        id={node.value}
+                        name={node.value}
+                        min="0"
+                        max="100"
+                        onChange={onChangeHandler}
+                        style={{
+                            display: "block",
+                            margin: '0.4rem',
+                            opacity: 1,
+                            width: "100px",
+                            height: "2px",
+                        }}
+                    />
+                </span>
+            </div>
+        </div>
+    );
+}
+
+function CustomLabelExample() {
+    const [nodeKey, setNodeKey] = useState('');
+    const [value, setValue] = useState('');
+
+    const onCheck = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label}`);
+        console.log(newTree.getChecked());
+    };
+
+    const onExpand = (changedNodeKey, newTree) => {
+        const changedNode = newTree.getNode(changedNodeKey);
+        console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
+        console.log(newTree.getExpanded());
+    };
+
+    // this handler gets passed by CheckboxTree through TreeNode
+    // along with the CustomLabel replacing the DefaultLabel
+    const onLeafLabelChangeHandler = (nodeKey, value) => {
+        setNodeKey(nodeKey);
+        setValue(value);
+    }
+
+    const defaultText = '(none)';
+    const displayText = nodeKey || defaultText;
+
+    return (
+        <div className="clickable-labels">
+            <CheckboxTreeProvider>
+                <CheckboxTree
+                    initialTreeState={initialTreeState}
+                    LeafLabelComponent={CustomLabel}
+                    onLeafLabelChange={onLeafLabelChangeHandler}
+                    onCheck={onCheck}
+                    onExpand={onExpand}
+                />
+            </CheckboxTreeProvider>
+            <div className="clickable-labels-info">
+                <strong>layer</strong>
+                {`: ${displayText}`}
+                <br/>
+                Slider Value
+                {`: ${value}`}
+
+            </div>
+        </div>
+    );
+}
+
+export default CustomLabelExample;
diff --git a/examples/src/js/data/index.js b/examples/src/js/data/index.js
index 0e477ab4..f1f8d93d 100644
--- a/examples/src/js/data/index.js
+++ b/examples/src/js/data/index.js
@@ -1,4 +1,5 @@
 export { default as fileSystem } from './fileSystem';
 export { default as fileSystemRadio } from './fileSystemRadio';
 export { default as mapLayerTree } from './mapLayerTree';
+export { default as mapLayerTreeSmall } from './mapLayerTreeSmall';
 export { default as empires } from './empires';
diff --git a/examples/src/js/data/mapLayerTreeSmall.js b/examples/src/js/data/mapLayerTreeSmall.js
new file mode 100644
index 00000000..605e509a
--- /dev/null
+++ b/examples/src/js/data/mapLayerTreeSmall.js
@@ -0,0 +1,176 @@
+const mapLayerTree = [
+    {
+        label: 'map layers',
+        value: 'map_layers',
+        expanded: true,
+        children: [
+            {
+                label: 'Orthophotos',
+                value: 'Orthophotos',
+                isRadioGroup: true,
+                mtype: 'Container',
+                checked: false,
+                expanded: false,
+                radioGroup: true,
+                children: [{
+                    label: '2001 Orthophotos',
+                    value: '2001 Orthophotos',
+                    layerName: '2001_Orthophotos',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2005 Orthophotos',
+                    value: '2005 Orthophotos',
+                    layerName: '2005_Orthophotos',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2010 Orthophotos',
+                    value: '2010 Orthophotos',
+                    layerName: '2010_Orthophotos',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2013 Orthophotos',
+                    value: '2013 Orthophotos',
+                    layerName: '2013_Orthophotos',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2017 Orthophotos',
+                    value: '2017 Orthophotos',
+                    layerName: '2017_Orthophotos',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: '2021 Orthophotos',
+                    value: '2021 Orthophotos',
+                    layerName: '2021_Orthophotos',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }],
+            }, {
+                label: 'Parcel',
+                value: 'Parcel',
+                mtype: 'Container',
+                checked: false,
+                expanded: true,
+                children: [{
+                    label: 'Address Points',
+                    value: 'Address Points',
+                    layerName: 'Address_Points',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }, {
+                    label: 'Building Footprints',
+                    value: 'Building Footprints',
+                    layerName: 'Building_Footprints_2010',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Farm Use',
+                    value: 'Farm Use',
+                    layerName: 'Farm_Use',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Parcels',
+                    value: 'Parcels',
+                    layerName: 'Parcels',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }, {
+                    label: 'Permits',
+                    value: 'Permits',
+                    layerName: 'Permits',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Qualified Sales >= 2011',
+                    value: 'Qualified Sales >= 2011',
+                    layerName: 'Parcel_Sales',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Zoning',
+                    value: 'Zoning',
+                    layerName: 'Zoning',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }],
+            }, {
+                label: 'Residential',
+                value: 'Residential',
+                mtype: 'Container',
+                checked: false,
+                expanded: false,
+                children: [{
+                    label: 'Condominium Locations',
+                    value: 'Condominium Locations',
+                    layerName: 'Condos',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Mobile Home Park',
+                    value: 'Mobile Home Park',
+                    layerName: 'Mobile_Home_Parks',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Neighborhoods',
+                    value: 'Neighborhoods',
+                    layerName: 'Neighborhoods',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Subdivision',
+                    value: 'Subdivision',
+                    layerName: 'Subdivisions',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }],
+            }, {
+                label: 'Schools',
+                value: 'Schools',
+                mtype: 'Container',
+                checked: false,
+                expanded: true,
+                isRadioGroup: true,
+                children: [{
+                    label: 'School Locations',
+                    value: 'School Locations',
+                    layerName: 'Schools',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Elementary School Districts',
+                    value: 'Elementary School Districts',
+                    layerName: 'Elementary_School_Districts',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'Middle School Districts',
+                    value: 'Middle School Districts',
+                    layerName: 'Middle_School_Districts',
+                    mtype: 'SingleLayer',
+                    checked: false,
+                }, {
+                    label: 'High School Districts',
+                    value: 'High School Districts',
+                    layerName: 'High_School_Districts',
+                    mtype: 'SingleLayer',
+                    checked: true,
+                }],
+            }, {
+                label: 'Base Layer',
+                value: 'Base Layer',
+                layerName: 'basemap',
+                mtype: 'SingleLayer',
+                checked: true,
+                disabled: true,
+            },
+        ],
+    },
+];
+
+export default mapLayerTree;
diff --git a/src/js/CheckboxTree.jsx b/src/js/CheckboxTree.jsx
index 0f4ef774..697b71c2 100644
--- a/src/js/CheckboxTree.jsx
+++ b/src/js/CheckboxTree.jsx
@@ -38,6 +38,73 @@ const defaultIcons = {
     radioOn: <span className="rct-icon rct-icon-radio-on" />,
 };
 
+const propTypes = {
+    initialTreeState: PropTypes.arrayOf(nodeShape).isRequired,
+
+    checkKeys: PropTypes.arrayOf(PropTypes.string),
+    checkModel: PropTypes.oneOf(['leaf', 'all']),
+    direction: PropTypes.string,
+    disabled: PropTypes.bool,
+    expandDisabled: PropTypes.bool,
+    expandOnClick: PropTypes.bool,
+    icons: iconsShape,
+    iconsClass: PropTypes.string,
+    id: PropTypes.string,
+    lang: languageShape,
+    LabelComponent: PropTypes.func,
+    LeafLabelComponent: PropTypes.func,
+    ParentLabelComponent: PropTypes.func,
+    name: PropTypes.string,
+    nameAsArray: PropTypes.bool,
+    nativeCheckboxes: PropTypes.bool,
+    noCascade: PropTypes.bool,
+    onlyLeafCheckboxes: PropTypes.bool,
+    optimisticToggle: PropTypes.bool,
+    showExpandAll: PropTypes.bool,
+    showNodeIcon: PropTypes.bool,
+    showNodeTitle: PropTypes.bool,
+    onCheck: PropTypes.func,
+    onClick: PropTypes.func,
+    onContextMenu: PropTypes.func,
+    onExpand: PropTypes.func,
+    onLabelChange:  PropTypes.func,
+    onLeafLabelChange:  PropTypes.func,
+    onParentLabelChange:  PropTypes.func,
+};
+
+const defaultProps = {
+    checkKeys: [KEYS.SPACEBAR, KEYS.ENTER],
+    checkModel: 'leaf',
+    direction: 'ltr',
+    disabled: false,
+    expandDisabled: false,
+    expandOnClick: false,
+    icons: defaultIcons,
+    iconsClass: 'fa5',
+    id: null,
+    lang: defaultLang,
+    LabelComponent: null,
+    LeafLabelComponent: null,
+    ParentLabelComponent: null,
+    name: undefined,
+    nameAsArray: false,
+    nativeCheckboxes: false,
+    noCascade: false,
+    onlyLeafCheckboxes: false,
+    optimisticToggle: true,
+    showExpandAll: false,
+    showNodeIcon: true,
+    showNodeTitle: false,
+    onCheck: () => {},
+    onClick: null,
+    onContextMenu: null,
+    onExpand: () => {},
+    onLabelChange:  null,
+    onLeafLabelChange:  null,
+    onParentLabelChange:  null,
+};
+
+
 export default function CheckboxTree({
     direction,
     disabled,
@@ -62,8 +129,14 @@ export default function CheckboxTree({
     showNodeIcon,
     // for tree model
     checkModel,
+    LabelComponent,
+    LeafLabelComponent,
+    ParentLabelComponent,
     noCascade,
     optimisticToggle,
+    onLabelChange,
+    onLeafLabelChange,
+    onParentLabelChange,
 }) {
     const mergedLang = combineMemoized(lang, defaultLang);
     const mergedIcons = combineMemoized(icons, defaultIcons);
@@ -118,7 +191,9 @@ export default function CheckboxTree({
 
     // TODO: this needs review
     const onContextMenuHandler = (node) => (event) => {
-        onContextMenu(event, node);
+        if (typeof onContextMenu === 'function') {
+            onContextMenu(event, node);
+        }
     };
 
     const onExpandHandler = (nodeKey) => {
@@ -163,7 +238,6 @@ export default function CheckboxTree({
                 checked: node.checkState,
                 expanded: node.expanded,
             };
-
             return (
                 <TreeNode
                     key={node.value}
@@ -171,6 +245,9 @@ export default function CheckboxTree({
                     disabled={disabled}
                     expandDisabled={expandDisabled}
                     expandOnClick={expandOnClick}
+                    LabelComponent={LabelComponent}
+                    LeafLabelComponent={LeafLabelComponent}
+                    ParentLabelComponent={ParentLabelComponent}
                     noCascade={noCascade}
                     node={node}
                     showCheckbox={showCheckbox}
@@ -181,6 +258,9 @@ export default function CheckboxTree({
                     onClick={onClick && onNodeClick}
                     onContextMenu={onContextMenuHandler(nodeContext)}
                     onExpand={onExpandHandler}
+                    onLabelChange={onLabelChange}
+                    onLeafLabelChange={onLeafLabelChange}
+                    onParentLabelChange={onParentLabelChange}
                 >
                     {children}
                 </TreeNode>
@@ -234,56 +314,5 @@ export default function CheckboxTree({
     );
 }
 
-CheckboxTree.propTypes = {
-    initialTreeState: PropTypes.arrayOf(nodeShape).isRequired,
-
-    checkKeys: PropTypes.arrayOf(PropTypes.string),
-    checkModel: PropTypes.oneOf(['leaf', 'all']),
-    direction: PropTypes.string,
-    disabled: PropTypes.bool,
-    expandDisabled: PropTypes.bool,
-    expandOnClick: PropTypes.bool,
-    icons: iconsShape,
-    iconsClass: PropTypes.string,
-    id: PropTypes.string,
-    lang: languageShape,
-    name: PropTypes.string,
-    nameAsArray: PropTypes.bool,
-    nativeCheckboxes: PropTypes.bool,
-    noCascade: PropTypes.bool,
-    onlyLeafCheckboxes: PropTypes.bool,
-    optimisticToggle: PropTypes.bool,
-    showExpandAll: PropTypes.bool,
-    showNodeIcon: PropTypes.bool,
-    showNodeTitle: PropTypes.bool,
-    onCheck: PropTypes.func,
-    onClick: PropTypes.func,
-    onContextMenu: PropTypes.func,
-    onExpand: PropTypes.func,
-};
-
-CheckboxTree.defaultProps = {
-    checkKeys: [KEYS.SPACEBAR, KEYS.ENTER],
-    checkModel: 'leaf',
-    direction: 'ltr',
-    disabled: false,
-    expandDisabled: false,
-    expandOnClick: false,
-    icons: defaultIcons,
-    iconsClass: 'fa5',
-    id: null,
-    lang: defaultLang,
-    name: undefined,
-    nameAsArray: false,
-    nativeCheckboxes: false,
-    noCascade: false,
-    onlyLeafCheckboxes: false,
-    optimisticToggle: true,
-    showExpandAll: false,
-    showNodeIcon: true,
-    showNodeTitle: false,
-    onCheck: () => {},
-    onClick: null,
-    onContextMenu: null,
-    onExpand: () => {},
-};
+CheckboxTree.propTypes = propTypes;
+CheckboxTree.defaultProps = defaultProps;
diff --git a/src/js/components/BareLabel.jsx b/src/js/components/BareLabel.jsx
index 8976f3e6..bf75e2ac 100644
--- a/src/js/components/BareLabel.jsx
+++ b/src/js/components/BareLabel.jsx
@@ -1,44 +1,47 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import Clickable from './Clickable';
+
+const propTypes = {
+    children: PropTypes.node,
+    clickable: PropTypes.bool,
+    title: PropTypes.string,
+    onClick: PropTypes.func,
+    onContextMenu: PropTypes.func,
+};
+const defaultProps = {
+    children: null,
+    clickable: false,
+    title: null,
+    onClick: null,
+    onContextMenu: null,
+};
+
 export default function BareLabel({
     children,
-    clickable,
     title,
     onClick,
     onContextMenu,
 }) {
+    const clickable = (typeof onClick === 'function');
+    console.log(clickable);
+
     return (
         <span className="rct-bare-label" title={title}>
             {clickable ? (
-                <span
-                    className="rct-node-clickable"
-                    role="button"
+                <Clickable
                     tabIndex={0}
                     onClick={onClick}
                     onContextMenu={onContextMenu}
                     onKeyPress={onClick}
                 >
                     {children}
-                </span>
+                </Clickable>
             ) : children}
         </span>
     );
 }
 
-BareLabel.propTypes = {
-
-    children: PropTypes.node,
-    clickable: PropTypes.bool,
-    title: PropTypes.string,
-    onClick: PropTypes.func,
-    onContextMenu: PropTypes.func,
-};
-
-BareLabel.defaultProps = {
-    children: null,
-    clickable: true,
-    title: null,
-    onClick: null,
-    onContextMenu: null,
-};
+BareLabel.propTypes = propTypes;
+BareLabel.defaultProps = defaultProps;
diff --git a/src/js/components/CheckboxLabel.jsx b/src/js/components/CheckboxLabel.jsx
index 7fd3b467..12b9a4b5 100644
--- a/src/js/components/CheckboxLabel.jsx
+++ b/src/js/components/CheckboxLabel.jsx
@@ -3,6 +3,37 @@ import React from 'react';
 
 import NativeCheckbox from './NativeCheckbox';
 import CheckboxIcon from './CheckboxIcon';
+import Clickable from './Clickable';
+
+const propTypes = {
+    checked: PropTypes.number.isRequired,
+    disabled: PropTypes.bool.isRequired,
+    noCascade: PropTypes.bool.isRequired,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+    ]).isRequired,
+    onCheck: PropTypes.func.isRequired,
+
+    children: PropTypes.node,
+    clickable: PropTypes.bool,
+    isRadioNode: PropTypes.bool,
+    title: PropTypes.string,
+    treeId: PropTypes.string,
+    onCheckboxKeyUp: PropTypes.func,
+    onClick: PropTypes.func,
+    onContextMenu: PropTypes.func,
+};
+const defaultProps = {
+    children: null,
+    clickable: false,
+    isRadioNode: false,
+    title: null,
+    treeId: null,
+    onCheckboxKeyUp: null,
+    onClick: null,
+    onContextMenu: null,
+};
 
 export default function CheckboxLabel(props) {
     const {
@@ -48,53 +79,24 @@ export default function CheckboxLabel(props) {
                         noCascade={noCascade}
                     />
                 </span>
+
                 {!clickable ? children : null}
             </label>
 
             {clickable ? (
-                <span
+                <Clickable
                     key={1}
-                    className="rct-node-clickable"
-                    role="button"
                     tabIndex={0}
                     onClick={onClick}
                     onContextMenu={onContextMenu}
                     onKeyPress={onClick}
                 >
                     {children}
-                </span>
+                </Clickable>
             ) : null}
         </>
     );
 }
 
-CheckboxLabel.propTypes = {
-    checked: PropTypes.number.isRequired,
-    disabled: PropTypes.bool.isRequired,
-    noCascade: PropTypes.bool.isRequired,
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number,
-    ]).isRequired,
-    onCheck: PropTypes.func.isRequired,
-
-    children: PropTypes.node,
-    clickable: PropTypes.bool,
-    isRadioNode: PropTypes.bool,
-    title: PropTypes.string,
-    treeId: PropTypes.string,
-    onCheckboxKeyUp: PropTypes.func,
-    onClick: PropTypes.func,
-    onContextMenu: PropTypes.func,
-};
-
-CheckboxLabel.defaultProps = {
-    children: null,
-    clickable: true,
-    isRadioNode: false,
-    title: null,
-    treeId: null,
-    onCheckboxKeyUp: null,
-    onClick: null,
-    onContextMenu: null,
-};
+CheckboxLabel.propTypes = propTypes;
+CheckboxLabel.defaultProps = defaultProps;
diff --git a/src/js/components/Clickable.jsx b/src/js/components/Clickable.jsx
new file mode 100644
index 00000000..fc1c3af1
--- /dev/null
+++ b/src/js/components/Clickable.jsx
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const propTypes = {
+    children: PropTypes.node,
+    tabIndex: PropTypes.number,
+    onClick: PropTypes.func,
+};
+const defaultProps = {
+    children: null,
+    tabIndex: 0,
+    onClick: null,
+};
+
+// this component wraps children with a clickable span
+
+function Clickable({
+    children, tabIndex, onClick,
+}) {
+    return (
+        <span
+            className="rct-node-clickable"
+            role="button"
+            tabIndex={tabIndex}
+            onClick={onClick}
+            onKeyPress={onClick}
+        >
+            {children}
+        </span>
+    );
+}
+
+Clickable.propTypes = propTypes;
+Clickable.defaultProps = defaultProps;
+
+export default Clickable;
diff --git a/src/js/components/LabelChildren.jsx b/src/js/components/DefaultLabel.jsx
similarity index 55%
rename from src/js/components/LabelChildren.jsx
rename to src/js/components/DefaultLabel.jsx
index 42905ec4..02ec4e11 100644
--- a/src/js/components/LabelChildren.jsx
+++ b/src/js/components/DefaultLabel.jsx
@@ -2,14 +2,24 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import NodeIcon from './NodeIcon';
+import NodeModel from '../models/NodeModel';
 
-export default function LabelChildren({
-    expanded,
-    icon,
-    isLeaf,
-    label,
+const propTypes = {
+    node: PropTypes.instanceOf(NodeModel).isRequired,
+    showNodeIcon: PropTypes.bool.isRequired,
+};
+
+export default function DefaultLabel({
+    node,
     showNodeIcon,
 }) {
+    const {
+        expanded,
+        icon,
+        isLeaf,
+        label,
+    } = node;
+
     return (
         <>
             {showNodeIcon && (
@@ -20,16 +30,4 @@ export default function LabelChildren({
     );
 }
 
-LabelChildren.propTypes = {
-    isLeaf: PropTypes.bool.isRequired,
-    label: PropTypes.node.isRequired,
-    showNodeIcon: PropTypes.bool.isRequired,
-
-    expanded: PropTypes.bool,
-    icon: PropTypes.node,
-};
-
-LabelChildren.defaultProps = {
-    expanded: false,
-    icon: null,
-};
+DefaultLabel.propTypes = propTypes;
diff --git a/src/js/components/TreeNode.jsx b/src/js/components/TreeNode.jsx
index 2bfd93f8..ac4fb0c6 100644
--- a/src/js/components/TreeNode.jsx
+++ b/src/js/components/TreeNode.jsx
@@ -10,7 +10,7 @@ import NodeModel from '../models/NodeModel';
 import BareLabel from './BareLabel';
 import CheckboxLabel from './CheckboxLabel';
 import ExpandButton from './ExpandButton';
-import LabelChildren from './LabelChildren';
+import DefaultLabel from './DefaultLabel';
 
 class TreeNode extends React.PureComponent {
     static contextType = IconContext;
@@ -25,6 +25,9 @@ class TreeNode extends React.PureComponent {
         onCheck: PropTypes.func.isRequired,
         onExpand: PropTypes.func.isRequired,
 
+        LabelComponent: PropTypes.func,
+        LeafLabelComponent: PropTypes.func,
+        ParentLabelComponent: PropTypes.func,
         children: PropTypes.node,
         expandOnClick: PropTypes.bool,
         showCheckbox: PropTypes.bool,
@@ -32,16 +35,25 @@ class TreeNode extends React.PureComponent {
         treeId: PropTypes.string,
         onClick: PropTypes.func,
         onContextMenu: PropTypes.func,
+        onLabelChange:  PropTypes.func,
+        onLeafLabelChange:  PropTypes.func,
+        onParentLabelChange:  PropTypes.func,
     };
 
     static defaultProps = {
         children: null,
         expandOnClick: false,
+        LabelComponent: null,
+        LeafLabelComponent: null,
+        ParentLabelComponent: null,
         showCheckbox: true,
         title: null,
         treeId: null,
         onClick: null,
         onContextMenu: null,
+        onLabelChange: null,
+        onLeafLabelChange: null,
+        onParentLabelChange: null,
     };
 
     constructor(props) {
@@ -84,7 +96,9 @@ class TreeNode extends React.PureComponent {
             this.onExpand();
         }
 
-        onClick(node.value);
+        if (onClick) {
+            onClick(node.value);
+        }
     }
 
     onExpand() {
@@ -97,13 +111,19 @@ class TreeNode extends React.PureComponent {
             children,
             disabled,
             expandDisabled,
-            noCascade,
             node,
-            showCheckbox,
             showNodeIcon,
+            onClick,
+            LabelComponent,
+            LeafLabelComponent,
+            ParentLabelComponent,
+            onLabelChange,
+            onLeafLabelChange,
+            onParentLabelChange,
+            noCascade,
+            showCheckbox,
             title,
             treeId,
-            onClick,
             onContextMenu,
         } = this.props;
 
@@ -128,16 +148,18 @@ class TreeNode extends React.PureComponent {
             'rct-disabled': nodeDisabled,
         }, className);
 
-        const clickable = onClick !== null;
-        const labelChildren = (
-            <LabelChildren
-                expanded={expanded}
-                icon={icon}
-                isLeaf={isLeaf}
-                label={label}
-                showNodeIcon={showNodeIcon}
-            />
-        );
+        let Label;
+        let labelChangeHandler;
+        if (node.isLeaf) {
+            Label = LeafLabelComponent || LabelComponent || DefaultLabel;
+            labelChangeHandler = onLeafLabelChange || onLabelChange;
+        } else {
+            // parent
+            Label = ParentLabelComponent || LabelComponent || DefaultLabel;
+            labelChangeHandler = onParentLabelChange || onLabelChange;
+        }
+
+        const clickable = (typeof onClick === 'function');
 
         return (
             <li className={nodeClass}>
@@ -164,21 +186,29 @@ class TreeNode extends React.PureComponent {
                             onClick={this.onClick}
                             onContextMenu={onContextMenu}
                         >
-                            {labelChildren}
+                            <Label
+                                node={node}
+                                showNodeIcon={showNodeIcon}
+                                onChange={labelChangeHandler}
+                            />
                         </CheckboxLabel>
 
                     ) : (
                         <BareLabel
-                            clickable={clickable}
                             title={title}
-                            onClick={this.onClick}
+                            onClick={onClick && this.onClick}
                             onContextMenu={onContextMenu}
                         >
-                            {labelChildren}
+                            <Label
+                                node={node}
+                                showNodeIcon={showNodeIcon}
+                            />
                         </BareLabel>
                     )}
                 </span>
+
                 {expanded ? children : null}
+
             </li>
         );
     }

From c5c0d2981a711358593c4d597028fa8f335b94cc Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Mon, 8 May 2023 08:59:23 -0400
Subject: [PATCH 05/17] fix tests, examples and code problems

work on tests

work on docs and code to match

fix tests and examples
---
 README.md                                    | 119 ++--
 examples/src/js/BasicExample.jsx             |   4 +-
 examples/src/js/ClickableLabelsExample.jsx   |   7 +-
 examples/src/js/CustomIconsExample.jsx       |   4 +-
 examples/src/js/CustomLabelExample.jsx       |  66 ++-
 examples/src/js/DisabledExample.jsx          |   4 +-
 examples/src/js/ExpandAllExample.jsx         |   4 +-
 examples/src/js/FilterExample.jsx            |   4 +-
 examples/src/js/HiddenCheckboxesExample.jsx  |   4 +-
 examples/src/js/LargeDataExample.jsx         |   4 +-
 examples/src/js/NativeCheckboxExample.jsx    |   4 +-
 examples/src/js/NoCascadeExample.jsx         |   6 +-
 examples/src/js/PessimisticToggleExample.jsx |   4 +-
 examples/src/js/RadioButtonExample.jsx       |   4 +-
 src/js/CheckboxTree.jsx                      | 115 ++--
 src/js/components/BareLabel.jsx              |   3 -
 src/js/components/CheckboxIcon.js            |   7 +-
 src/js/components/CheckboxLabel.jsx          |  37 +-
 src/js/components/Clickable.jsx              |   4 +-
 src/js/components/ExpandButton.jsx           |   5 +-
 src/js/components/TreeNode.jsx               |  61 +-
 src/js/models/TreeModel.js                   | 164 +++---
 test/CheckboxTree.jsx                        | 235 ++++----
 test/TreeModel.js                            | 474 +++++++++++++++
 test/TreeNode.jsx                            | 577 +++++++++----------
 test/utils.js                                |  46 --
 26 files changed, 1249 insertions(+), 717 deletions(-)
 create mode 100644 test/TreeModel.js
 delete mode 100644 test/utils.js

diff --git a/README.md b/README.md
index 86bd7adf..e297c651 100644
--- a/README.md
+++ b/README.md
@@ -41,11 +41,11 @@ import 'react-checkbox-tree/lib/react-checkbox-tree.css';
 
 ### Render Component
 
-Below is a minimal example using [state hooks][docs-state-hooks]. Note that `CheckboxTree` is a [controlled][docs-controlled] component, so you must update its `checked` and `expanded` properties whenever a change occurs.
+Below is a minimal example. Note that `CheckboxTree` is an [uncontrolled][docs-controlled] component. The tree state is stored in a context provided by `CheckboxTreeProvider`. This allows the `CheckboxTreeProvider` to be moved up in the React component tree to save the `CheckboxTree` state between component mounts. An example would be having the `CheckboxTree` inside a tab which unmounts when the selected tab changes.
 
 ``` jsx
-import React, { useState } from 'react';
-import CheckboxTree from 'react-checkbox-tree';
+import React from 'react';
+import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 import 'react-checkbox-tree/lib/react-checkbox-tree.css';
 
 const nodes = [{
@@ -58,22 +58,29 @@ const nodes = [{
 }];
 
 function Widget() {
-  const [checked, setChecked] = useState([]);
-  const [expanded, setExpanded] = useState([]);
-
   return (
-    <CheckboxTree
-      nodes={nodes}
-      checked={checked}
-      expanded={expanded}
-      onCheck={(checked) => setChecked(checked)}
-      onExpand={(expanded) => setExpanded(expanded)}
-    />
+    <CheckboxTreeProvider>
+      <CheckboxTree
+        nodes={nodes}
+        checked={checked}
+        expanded={expanded}
+        onCheck={(nodeKey, updatedTreeModel) => {
+          const node = updatedTreeModel.getNode(nodeKey);
+        }}
+        onExpand={(nodeKey, updatedTreeModel) => {
+          const node = updatedTreeModel.getNode(nodeKey);
+        }}
+      />
+    </CheckboxTreeProvider>
   );
 }
 ```
 
-> **Note** &ndash; All node objects **must** have a unique `value`. This component serializes the values into the `checked` and `expanded` array for performance optimizations.
+> **Note** &ndash; All node objects **must** have a unique `value`.
+
+#### Initial State of the CheckboxTree
+
+The ***initial*** state of the `CheckboxTree` is supplied to the `nodes` property. This property is used on the first mounting of the `CheckboxTree` component. A `TreeModel` is used internally by `CheckboxTree` to maintain consistent state. Subsequent mounting and rendering of the tree uses the state saved in the context provided by the `CheckboxTreeProvider`.
 
 #### Changing the Default Icons
 
@@ -130,30 +137,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 />
 ```
 
-### Utility Functions
-
-In addition to the `CheckboxTree` component, additional utility functions are available to set the initial state of the tree.
-
-#### `expandNodesToLevel(nodes, targetLevel)`
-
-Creates a list of all parent node keys until `targetLevel`.
-
-Arguments:
-
-* `nodes` (`Array`): The same array of nodes passed into the main `CheckboxTree` component
-* `targetLevel` (`number`): The maximum expansion depth. Use `Infinity` for maximum depth.
-
-Returns:
-
-* `Array`: A list of node keys.
-
 ### Properties
 
 | Property             | Type     | Description                                                                                                            | Default          |
 | -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------- |
-| `nodes`              | array    | **Required**. Specifies the tree nodes and their children.                                                             |                  |
+| `nodes`              | array    | **Required**. Specifies the ***initial*** state of the tree nodes and their children.                                                             |                  |
 | `checkKeys`          | array    | A list of [keyboard keys][mdn-key] that will trigger a toggle of the check status of a node.                           | `[' ', 'Enter']` |
-| `checkModel`         | string   | Specifies which checked nodes should be stored in the `checked` array. Accepts `'leaf'` or `'all'`.                    | `'leaf'`         |
+| `checkModel`         | string   | Specifies which checked nodes should be extracted to the `checked` array. Accepts `'leaf'` or `'all'`.                 | `'leaf'`         |
 | `checked`            | array    | An array of checked node values.                                                                                       | `[]`             |
 | `direction`          | string   | A string that specify whether the direction of the component is left-to-right (`'ltr'`) or right-to-left (`'rtl'`).    | `'ltr'`          |
 | `disabled`           | bool     | If true, the component will be disabled and nodes cannot be checked.                                                   | `false`          |
@@ -167,16 +157,17 @@ Returns:
 | `name`               | string   | Optional name for the hidden `<input>` element.                                                                        | `undefined`      |
 | `nameAsArray`        | bool     | If true, the hidden `<input>` will encode its values as an array rather than a joined string.                          | `false`          |
 | `nativeCheckboxes`   | bool     | If true, native browser checkboxes will be used instead of pseudo-checkbox icons.                                      | `false`          |
-| `noCascade`          | bool     | If true, toggling a parent node will **not** cascade its check state to its children.                                  | `false`          |
+| `noCascadeChecks`    | bool     | If true, toggling a parent node will **not** cascade its check state to its children. See also `percolateChecks`.      | `false`          |
+| `noCascadeDisabled`  | bool     | If true, toggling a parent node will **not** cascade its disabled state to its children.                               | `false`          |
 | `onlyLeafCheckboxes` | bool     | If true, checkboxes will only be shown for leaf nodes.                                                                 | `false`          |
-| `optimisticToggle`   | bool     | If true, toggling a partially-checked node will select all children. If false, it will deselect.                       | `true`           |
+| `optimisticToggle`   | bool     | If true, toggling a partially-checked node will select all children. If false, it will deselect. Requires`noCascade=false`. | `true`           |
 | `showExpandAll`      | bool     | If true, buttons for expanding and collapsing all parent nodes will appear in the tree.                                | `false`          |
 | `showNodeIcon`       | bool     | If true, each node will show a parent or leaf icon.                                                                    | `true`           |
 | `showNodeTitle`      | bool     | If true, the `label` of each node will become the `title` of the resulting DOM node. Overridden by `node.title`.       | `false`          |
-| `onCheck`            | function | onCheck handler: `function(checked, targetNode) {}`                                                                    | `() => {}`       |
-| `onClick`            | function | onClick handler: `function(targetNode) {}`. If set, `onClick` will be called when a node's label has been clicked.     | `null`           |
-| `onContextMenu`      | function | onContextMenu handler: `function(event, targetNode) {}`. Triggers when right-clicking a node element.                  | `null`           |
-| `onExpand`           | function | onExpand handler: `function(expanded, targetNode) {}`                                                                  | `() => {}`       |
+| `onCheck`            | function | onCheck handler: `function(nodeKey, updatedTreeModel) {}`   see [discussion](#oncheck-and-onexpand) below                                                            | `() => {}`       |
+| `onClick`            | function | onClick handler: `function(nodeKey, updatedTreeModel) {}`. If set, `onClick` will be called when a node's label has been clicked.     | `null`           |
+| `onContextMenu`      | function | onContextMenu handler: `function(event, nodeKey, updatedTreeModel) {}`. Triggers when right-clicking a node element.   | `null`           |
+| `onExpand`           | function | onExpand handler: `function(nodeKey, updatedTreeModel) {}`                                                             | `() => {}`       |
 
 #### `onCheck` and `onExpand`
 
@@ -184,16 +175,46 @@ Returns:
 
 Individual nodes within the `nodes` property can have the following structure:
 
-| Property       | Type   | Description                              | Default |
-| -------------- | ------ | ---------------------------------------- | ------- |
-| `label`        | mixed  | **Required**. The node's label.          |         |
-| `value`        | mixed  | **Required**. The node's value.          |         |
-| `children`     | array  | An array of child nodes.                 | `null`  |
-| `className`    | string | A className to add to the node.          | `null`  |
-| `disabled`     | bool   | Whether the node should be disabled.     | `false` |
-| `icon`         | mixed  | A custom icon for the node.              | `null`  |
-| `showCheckbox` | bool   | Whether the node should show a checkbox. | `true`  |
-| `title`        | string | A custom `title` attribute for the node. | `null`  |
+| Property       | Type   | Description                                                              | Default |
+| -------------- | ------ | ------------------------------------------------------------------------ | ------- |
+| `label`        | mixed  | **Required**. The node's label.                                          |         |
+| `value`        | mixed  | **Required**. The node's value.  Must be unique.                         |         |
+| `children`     | array  | An array of child nodes. Can be an empty array to denote a parent node.  | `null`  |
+| `className`    | string | A className to add to the node.                                          | `null`  |
+| `checked`      | bool   | Whether the node is checked.                                             | `false` |
+| `disabled`     | bool   | Whether the node should be disabled.                                     | `false` |
+| `expanded`     | bool   | Whether the node is expanded (parent nodes).                             | `false` |
+| `icon`         | mixed  | A custom icon for the node.                                              | `null`  |
+| `showCheckbox` | bool   | Whether the node should show a checkbox.                                 | `true`  |
+| `title`        | string | A custom `title` attribute for the node.                                 | `null`  |
+
+### TreeModel Public Properties and Methods
+
+The updated `TreeModel` instance is supplied to the `onCheck` and `onExpand` handlers as the second argument.
+
+| Property/Method      | Type     | Description                                                                     |
+| -------------------- | -------- | ------------------------------------------------------------------------------- |
+| `nodes`              | object   | object holding the nodes of the tree indexed by their `value` property.         |
+| `rootKeys`           | array    | list of node `value` properties of the level '0' nodes.                         |
+| `options`            | object   | collection of properties passed from the input 'props' of `CheckboxTree`.       |
+| `clone  `            | function | method to clone the `TreeModel`: `function()`                                   |
+| `expandAllNodes`     | function | method to expand all parent nodes: `function()`                                 |
+| `expandNodesToLevel` | function | method to expand parent nodes down to a particular level: `function(level)`     |
+| `filter`             | function | method to filter nodes: `function(testFunc)` see further explanation below      |
+| `getChecked`         | function | method to get list of checked nodes: `function()`  list contents based upon `checkModel` |
+| `getDisabled`        | function | method to get list of disabled nodes: `function()`                              |
+| `getExpanded`        | function | method to get list of expanded nodes: `function()`                              |
+| `getNode`            | function | method to get a particular node from the tree: `function(nodeKey)`              |
+| `removeFilter`       | function | method to remove the filter from the TreeModel: `function()`       |
+| `setNewOptions`      | function | method to change the options in the TreeModel: `function(newOptions)`              |
+| `setNodeProp`        | function | method to set a property on a particular node in the TreeModel: `function(nodeKey, propertyName, value)`              |
+| `toggleChecked`      | function | method to toggle the check status of a particular node: `function(nodeKey)`     |
+| `toggleDisabled`     | function | method to toggle the disabled status of a particular node: `function(nodeKey)`  |
+| `toggleExpanded`     | function | method to toggle the expanded status of a particular node: `function(nodeKey)`  |
+
+### Filtering Nodes
+
+This is a way to reduce the tree by filtering the visible nodes.   TODO: expand on this section....
 
 [docs-controlled]: https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components
 [docs-state-hooks]: https://react.dev/reference/react/useState
diff --git a/examples/src/js/BasicExample.jsx b/examples/src/js/BasicExample.jsx
index c47ea7b7..b804ce86 100644
--- a/examples/src/js/BasicExample.jsx
+++ b/examples/src/js/BasicExample.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { fileSystem as initialTreeState } from './data';
+import { fileSystem as nodes } from './data';
 
 function BasicExample() {
     const onCheck = (changedNodeKey, newTree) => {
@@ -19,7 +19,7 @@ function BasicExample() {
     return (
         <CheckboxTreeProvider>
             <CheckboxTree
-                initialTreeState={initialTreeState}
+                nodes={nodes}
                 onCheck={onCheck}
                 onExpand={onExpand}
             />
diff --git a/examples/src/js/ClickableLabelsExample.jsx b/examples/src/js/ClickableLabelsExample.jsx
index c570d52c..06ac8443 100644
--- a/examples/src/js/ClickableLabelsExample.jsx
+++ b/examples/src/js/ClickableLabelsExample.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { fileSystem as initialTreeState } from './data';
+import { fileSystem as nodes } from './data';
 
 function ClickExample() {
     const [clicked, setClicked] = useState({});
@@ -18,7 +18,8 @@ function ClickExample() {
         console.log(newTree.getExpanded());
     };
 
-    const onClick = (node) => {
+    const onClick = (nodeKey, treeModel) => {
+        const node = treeModel.getNode(nodeKey);
         setClicked(node);
     };
 
@@ -30,7 +31,7 @@ function ClickExample() {
             <CheckboxTreeProvider>
                 <CheckboxTree
                     expandOnClick
-                    initialTreeState={initialTreeState}
+                    nodes={nodes}
                     onCheck={onCheck}
                     onClick={onClick}
                     onExpand={onExpand}
diff --git a/examples/src/js/CustomIconsExample.jsx b/examples/src/js/CustomIconsExample.jsx
index 4a91ece5..96c1a27c 100644
--- a/examples/src/js/CustomIconsExample.jsx
+++ b/examples/src/js/CustomIconsExample.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-const initialTreeState = [
+const nodes = [
     {
         value: 'Documents',
         label: 'Documents',
@@ -57,7 +57,7 @@ function CustomIconsExample() {
     return (
         <CheckboxTreeProvider>
             <CheckboxTree
-                initialTreeState={initialTreeState}
+                nodes={nodes}
                 onCheck={onCheck}
                 onExpand={onExpand}
             />
diff --git a/examples/src/js/CustomLabelExample.jsx b/examples/src/js/CustomLabelExample.jsx
index a3d4d8fe..7aa0f0fb 100644
--- a/examples/src/js/CustomLabelExample.jsx
+++ b/examples/src/js/CustomLabelExample.jsx
@@ -1,52 +1,66 @@
-import React, { useState } from 'react';
 import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+import NodeModel from '../../../src/js/models/NodeModel';
+
+import { mapLayerTreeSmall as nodes } from './data';
+
+const propTypes = {
+    node: PropTypes.instanceOf(NodeModel).isRequired,
+    onChange: PropTypes.func,
+};
 
-import { mapLayerTreeSmall as initialTreeState } from './data';
+const defaultProps = {
+    onChange: null,
+};
 
-const CustomLabel = ({node, onChange}) => {
+function CustomLabel({ node, onChange }) {
     const onChangeHandler = (e) => {
         const nodeKey = e.target.name;
-        const value = e.target.value;
+        const { value } = e.target;
         onChange(nodeKey, value);
-    }
+    };
 
     return (
         <div
             style={{
-                border: "1px solid lightgrey",
-                borderRadius: "8px",
-                margin: "2px",
-                padding: "3px 8px",
-                minWidth: "180px",
-                backgroundColor: "lightblue"
+                border: '1px solid lightgrey',
+                borderRadius: '8px',
+                margin: '2px',
+                padding: '3px 8px',
+                minWidth: '180px',
+                backgroundColor: 'lightblue',
             }}
         >
             <div>
                 {node.label}
             </div>
-            <div style={{display: 'flex'}}>
+            <div style={{ display: 'flex' }}>
                 <label htmlFor="volume">opacity:</label>
                 <span>
                     <input
-                        type="range"
                         id={node.value}
-                        name={node.value}
-                        min="0"
                         max="100"
-                        onChange={onChangeHandler}
+                        min="0"
+                        name={node.value}
                         style={{
-                            display: "block",
+                            display: 'block',
                             margin: '0.4rem',
                             opacity: 1,
-                            width: "100px",
-                            height: "2px",
+                            width: '100px',
+                            height: '2px',
                         }}
+                        type="range"
+                        onChange={onChangeHandler}
                     />
                 </span>
             </div>
         </div>
     );
 }
+CustomLabel.propTypes = propTypes;
+CustomLabel.defaultProps = defaultProps;
 
 function CustomLabelExample() {
     const [nodeKey, setNodeKey] = useState('');
@@ -66,10 +80,10 @@ function CustomLabelExample() {
 
     // this handler gets passed by CheckboxTree through TreeNode
     // along with the CustomLabel replacing the DefaultLabel
-    const onLeafLabelChangeHandler = (nodeKey, value) => {
-        setNodeKey(nodeKey);
-        setValue(value);
-    }
+    const onLeafLabelChangeHandler = (key, newValue) => {
+        setNodeKey(key);
+        setValue(newValue);
+    };
 
     const defaultText = '(none)';
     const displayText = nodeKey || defaultText;
@@ -78,17 +92,17 @@ function CustomLabelExample() {
         <div className="clickable-labels">
             <CheckboxTreeProvider>
                 <CheckboxTree
-                    initialTreeState={initialTreeState}
                     LeafLabelComponent={CustomLabel}
-                    onLeafLabelChange={onLeafLabelChangeHandler}
+                    nodes={nodes}
                     onCheck={onCheck}
                     onExpand={onExpand}
+                    onLeafLabelChange={onLeafLabelChangeHandler}
                 />
             </CheckboxTreeProvider>
             <div className="clickable-labels-info">
                 <strong>layer</strong>
                 {`: ${displayText}`}
-                <br/>
+                <br />
                 Slider Value
                 {`: ${value}`}
 
diff --git a/examples/src/js/DisabledExample.jsx b/examples/src/js/DisabledExample.jsx
index 0ca8ae19..afc5e6ea 100644
--- a/examples/src/js/DisabledExample.jsx
+++ b/examples/src/js/DisabledExample.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { fileSystem as initialTreeState } from './data';
+import { fileSystem as nodes } from './data';
 
 function DisabledExample() {
     const onCheck = (changedNodeKey, newTree) => {
@@ -20,7 +20,7 @@ function DisabledExample() {
         <CheckboxTreeProvider>
             <CheckboxTree
                 disabled
-                initialTreeState={initialTreeState}
+                nodes={nodes}
                 onCheck={onCheck}
                 onExpand={onExpand}
             />
diff --git a/examples/src/js/ExpandAllExample.jsx b/examples/src/js/ExpandAllExample.jsx
index 8bc85741..33d6f932 100644
--- a/examples/src/js/ExpandAllExample.jsx
+++ b/examples/src/js/ExpandAllExample.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { fileSystem as initialTreeState } from './data';
+import { fileSystem as nodes } from './data';
 
 function ExpandAllExample() {
     const onCheck = (changedNodeKey, newTree) => {
@@ -20,7 +20,7 @@ function ExpandAllExample() {
     return (
         <CheckboxTreeProvider>
             <CheckboxTree
-                initialTreeState={initialTreeState}
+                nodes={nodes}
                 showExpandAll
                 onCheck={onCheck}
                 onExpand={onExpand}
diff --git a/examples/src/js/FilterExample.jsx b/examples/src/js/FilterExample.jsx
index 742c3bba..533ab8f3 100644
--- a/examples/src/js/FilterExample.jsx
+++ b/examples/src/js/FilterExample.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import CheckboxTree, { CheckboxTreeProvider, useCheckboxTree } from 'react-checkbox-tree';
 
-import { fileSystem as initialTreeState } from './data';
+import { fileSystem as nodes } from './data';
 
 // NOTE: FilterWidget must be within CheckboxTreeProvider
 // so useCheckboxTree can be used in FilterWidget function
@@ -84,7 +84,7 @@ function FilterWidget() {
                 onChange={onFilterChange}
             />
             <CheckboxTree
-                initialTreeState={initialTreeState}
+                nodes={nodes}
                 onCheck={onCheck}
                 onExpand={onExpand}
             />
diff --git a/examples/src/js/HiddenCheckboxesExample.jsx b/examples/src/js/HiddenCheckboxesExample.jsx
index 20570ac3..331f641c 100644
--- a/examples/src/js/HiddenCheckboxesExample.jsx
+++ b/examples/src/js/HiddenCheckboxesExample.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { empires as initialTreeState } from './data';
+import { empires as nodes } from './data';
 
 function HiddenCheckboxesExample() {
     const onCheck = (changedNodeKey, newTree) => {
@@ -19,7 +19,7 @@ function HiddenCheckboxesExample() {
     return (
         <CheckboxTreeProvider>
             <CheckboxTree
-                initialTreeState={initialTreeState}
+                nodes={nodes}
                 onlyLeafCheckboxes
                 onCheck={onCheck}
                 onExpand={onExpand}
diff --git a/examples/src/js/LargeDataExample.jsx b/examples/src/js/LargeDataExample.jsx
index 09ae89af..d69f6dbf 100644
--- a/examples/src/js/LargeDataExample.jsx
+++ b/examples/src/js/LargeDataExample.jsx
@@ -28,7 +28,7 @@ function makeLargeDataSet() {
     }];
 }
 
-const initialTreeState = makeLargeDataSet();
+const nodes = makeLargeDataSet();
 
 function LargeDataExample() {
     const onCheck = (changedNodeKey, newTree) => {
@@ -46,7 +46,7 @@ function LargeDataExample() {
     return (
         <CheckboxTreeProvider>
             <CheckboxTree
-                initialTreeState={initialTreeState}
+                nodes={nodes}
                 onCheck={onCheck}
                 onExpand={onExpand}
             />
diff --git a/examples/src/js/NativeCheckboxExample.jsx b/examples/src/js/NativeCheckboxExample.jsx
index 74569b5a..96e828da 100644
--- a/examples/src/js/NativeCheckboxExample.jsx
+++ b/examples/src/js/NativeCheckboxExample.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { fileSystemRadio as initialTreeState } from './data';
+import { fileSystemRadio as nodes } from './data';
 
 function NativeCheckboxExample() {
     const onCheck = (changedNodeKey, newTree) => {
@@ -19,8 +19,8 @@ function NativeCheckboxExample() {
     return (
         <CheckboxTreeProvider>
             <CheckboxTree
-                initialTreeState={initialTreeState}
                 nativeCheckboxes
+                nodes={nodes}
                 onCheck={onCheck}
                 onExpand={onExpand}
             />
diff --git a/examples/src/js/NoCascadeExample.jsx b/examples/src/js/NoCascadeExample.jsx
index 30f72866..4df5d4b1 100644
--- a/examples/src/js/NoCascadeExample.jsx
+++ b/examples/src/js/NoCascadeExample.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { fileSystem as initialTreeState } from './data';
+import { fileSystem as nodes } from './data';
 
 function NoCascadeExample() {
     const onCheck = (changedNodeKey, newTree) => {
@@ -19,8 +19,8 @@ function NoCascadeExample() {
     return (
         <CheckboxTreeProvider>
             <CheckboxTree
-                initialTreeState={initialTreeState}
-                noCascade
+                noCascadeChecks
+                nodes={nodes}
                 onCheck={onCheck}
                 onExpand={onExpand}
             />
diff --git a/examples/src/js/PessimisticToggleExample.jsx b/examples/src/js/PessimisticToggleExample.jsx
index de54da1f..e89cd597 100644
--- a/examples/src/js/PessimisticToggleExample.jsx
+++ b/examples/src/js/PessimisticToggleExample.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import { fileSystem as initialTreeState } from './data';
+import { fileSystem as nodes } from './data';
 
 function PessimisticToggleExample() {
     const onCheck = (changedNodeKey, newTree) => {
@@ -19,7 +19,7 @@ function PessimisticToggleExample() {
     return (
         <CheckboxTreeProvider>
             <CheckboxTree
-                initialTreeState={initialTreeState}
+                nodes={nodes}
                 optimisticToggle={false}
                 onCheck={onCheck}
                 onExpand={onExpand}
diff --git a/examples/src/js/RadioButtonExample.jsx b/examples/src/js/RadioButtonExample.jsx
index 0e2a2e3e..f21918aa 100644
--- a/examples/src/js/RadioButtonExample.jsx
+++ b/examples/src/js/RadioButtonExample.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
 
-import initialTreeState from './data/mapLayerTree';
+import nodes from './data/mapLayerTree';
 
 function RadioButtonExample() {
     const onCheck = (changedNodeKey, newTree) => {
@@ -19,7 +19,7 @@ function RadioButtonExample() {
     return (
         <CheckboxTreeProvider>
             <CheckboxTree
-                initialTreeState={initialTreeState}
+                nodes={nodes}
                 onCheck={onCheck}
                 onExpand={onExpand}
             />
diff --git a/src/js/CheckboxTree.jsx b/src/js/CheckboxTree.jsx
index 697b71c2..85ed0feb 100644
--- a/src/js/CheckboxTree.jsx
+++ b/src/js/CheckboxTree.jsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 // import isEqual from 'lodash/isEqual';
 import memoize from 'lodash/memoize';
 import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 // import CheckboxTreeError from './CheckboxTreeError';
 
@@ -39,8 +39,11 @@ const defaultIcons = {
 };
 
 const propTypes = {
-    initialTreeState: PropTypes.arrayOf(nodeShape).isRequired,
+    nodes: PropTypes.arrayOf(nodeShape).isRequired,
 
+    LabelComponent: PropTypes.func,
+    LeafLabelComponent: PropTypes.func,
+    ParentLabelComponent: PropTypes.func,
     checkKeys: PropTypes.arrayOf(PropTypes.string),
     checkModel: PropTypes.oneOf(['leaf', 'all']),
     direction: PropTypes.string,
@@ -51,13 +54,11 @@ const propTypes = {
     iconsClass: PropTypes.string,
     id: PropTypes.string,
     lang: languageShape,
-    LabelComponent: PropTypes.func,
-    LeafLabelComponent: PropTypes.func,
-    ParentLabelComponent: PropTypes.func,
     name: PropTypes.string,
     nameAsArray: PropTypes.bool,
     nativeCheckboxes: PropTypes.bool,
-    noCascade: PropTypes.bool,
+    noCascadeChecks: PropTypes.bool,
+    noCascadeDisabled: PropTypes.bool,
     onlyLeafCheckboxes: PropTypes.bool,
     optimisticToggle: PropTypes.bool,
     showExpandAll: PropTypes.bool,
@@ -67,9 +68,9 @@ const propTypes = {
     onClick: PropTypes.func,
     onContextMenu: PropTypes.func,
     onExpand: PropTypes.func,
-    onLabelChange:  PropTypes.func,
-    onLeafLabelChange:  PropTypes.func,
-    onParentLabelChange:  PropTypes.func,
+    onLabelChange: PropTypes.func,
+    onLeafLabelChange: PropTypes.func,
+    onParentLabelChange: PropTypes.func,
 };
 
 const defaultProps = {
@@ -89,7 +90,8 @@ const defaultProps = {
     name: undefined,
     nameAsArray: false,
     nativeCheckboxes: false,
-    noCascade: false,
+    noCascadeChecks: false,
+    noCascadeDisabled: false,
     onlyLeafCheckboxes: false,
     optimisticToggle: true,
     showExpandAll: false,
@@ -99,12 +101,11 @@ const defaultProps = {
     onClick: null,
     onContextMenu: null,
     onExpand: () => {},
-    onLabelChange:  null,
-    onLeafLabelChange:  null,
-    onParentLabelChange:  null,
+    onLabelChange: null,
+    onLeafLabelChange: null,
+    onParentLabelChange: null,
 };
 
-
 export default function CheckboxTree({
     direction,
     disabled,
@@ -116,8 +117,8 @@ export default function CheckboxTree({
     name,
     nameAsArray,
     nativeCheckboxes,
+    nodes,
     showExpandAll,
-    initialTreeState,
     checkKeys,
     expandOnClick,
     onCheck,
@@ -132,7 +133,8 @@ export default function CheckboxTree({
     LabelComponent,
     LeafLabelComponent,
     ParentLabelComponent,
-    noCascade,
+    noCascadeChecks,
+    noCascadeDisabled,
     optimisticToggle,
     onLabelChange,
     onLeafLabelChange,
@@ -141,23 +143,48 @@ export default function CheckboxTree({
     const mergedLang = combineMemoized(lang, defaultLang);
     const mergedIcons = combineMemoized(icons, defaultIcons);
 
+    // save nodes prop to check for new value in useEffect
+    const [prevNodes, setPreviousNodes] = useState();
     // get the treeModel from CheckboxTreeProvider
     const { treeModel, setTreeModel } = useCheckboxTree();
+    // bundle props passed to TreeModel
+    const treeModelOptions = useMemo(() => ({
+        checkModel,
+        disabled,
+        noCascadeChecks,
+        noCascadeDisabled,
+        optimisticToggle,
+        setTreeModel,
+    }), [
+        checkModel,
+        disabled,
+        noCascadeChecks,
+        noCascadeDisabled,
+        optimisticToggle,
+        setTreeModel,
+    ]);
 
     //--------------------------------------------------------------------------
-    // insert the inital tree state into TreeModel
     useEffect(() => {
-        // options are from props
-        const options = {
-            checkModel, disabled, noCascade, optimisticToggle, setTreeModel,
-        };
-
-        const newTreeModel = new TreeModel(initialTreeState, options);
-        setTreeModel(newTreeModel);
-    }, [initialTreeState]);
-
-    // TODO: how to handle changed props?
-
+        if (!treeModel || nodes !== prevNodes) {
+            // initial setup or change of nodes prop
+            // convert the inital tree state into a TreeModel and store in context
+            const newTreeModel = new TreeModel(nodes, treeModelOptions);
+            setPreviousNodes(nodes);
+            setTreeModel(newTreeModel);
+        } else if (treeModel && treeModelOptions !== treeModel.options) {
+            // change of options revelant to TreeModel
+            const newTreeModel = treeModel.clone();
+            newTreeModel.options = treeModelOptions;
+            setTreeModel(newTreeModel);
+        }
+    }, [
+        nodes,
+        prevNodes,
+        setTreeModel,
+        treeModel,
+        treeModelOptions,
+    ]);
     //--------------------------------------------------------------------------
 
     // there is no treeModel until first useEffect above is run
@@ -189,7 +216,6 @@ export default function CheckboxTree({
         setTreeModel(newTreeModel);
     };
 
-    // TODO: this needs review
     const onContextMenuHandler = (node) => (event) => {
         if (typeof onContextMenu === 'function') {
             onContextMenu(event, node);
@@ -211,10 +237,10 @@ export default function CheckboxTree({
     };
 
     const onNodeClick = (nodeKey) => {
-        onClick(treeModel.getNode(nodeKey));
+        onClick(nodeKey, treeModel);
     };
 
-    const renderTreeNodes = (childKeys) => {
+    const renderTreeNodes = (childKeys, ancestorDisabled = false) => {
         const treeNodes = childKeys.map((nodeKey) => {
             const node = treeModel.getNode(nodeKey);
             const parent = node.parentKey ? treeModel.getNode(node.parentKey) : null;
@@ -227,7 +253,16 @@ export default function CheckboxTree({
             }
 
             // render child nodes here after determining to render this node
-            const children = node.isParent ? renderTreeNodes(node.childKeys) : null;
+            let children = null;
+            if (node.isParent) {
+                // determine if child nodes should be disabled
+                const disabledByAncestor = !noCascadeDisabled && (
+                    ancestorDisabled || node.disabled ||
+                    (node.isRadioGroup && node.checkState === 0)
+                );
+
+                children = renderTreeNodes(node.childKeys, disabledByAncestor);
+            }
 
             // Show checkbox only if this is a leaf node or showCheckbox is true
             const showCheckbox = onlyLeafCheckboxes ? node.isLeaf : node.showCheckbox;
@@ -235,24 +270,25 @@ export default function CheckboxTree({
             // Prepare node information for context menu usage
             const nodeContext = {
                 ...node,
-                checked: node.checkState,
+                checked: (node.checkState > 0),
                 expanded: node.expanded,
             };
+
             return (
                 <TreeNode
                     key={node.value}
-                    checkKeys={checkKeys}
-                    disabled={disabled}
-                    expandDisabled={expandDisabled}
-                    expandOnClick={expandOnClick}
                     LabelComponent={LabelComponent}
                     LeafLabelComponent={LeafLabelComponent}
                     ParentLabelComponent={ParentLabelComponent}
-                    noCascade={noCascade}
+                    checkKeys={checkKeys}
+                    disabled={disabled || ancestorDisabled || node.disabled}
+                    expandDisabled={expandDisabled}
+                    expandOnClick={expandOnClick}
+                    noCascadeChecks={noCascadeChecks}
                     node={node}
                     showCheckbox={showCheckbox}
                     showNodeIcon={showNodeIcon}
-                    title={showNodeTitle ? node.title || node.label : node.title}
+                    showNodeTitle={showNodeTitle}
                     treeId={id}
                     onCheck={onCheckHandler}
                     onClick={onClick && onNodeClick}
@@ -276,7 +312,6 @@ export default function CheckboxTree({
 
     //--------------------------------------------------------------------------
     // render CheckboxTree
-
     const treeNodes = renderTreeNodes(treeModel.rootKeys);
 
     const className = classNames({
diff --git a/src/js/components/BareLabel.jsx b/src/js/components/BareLabel.jsx
index bf75e2ac..e3c0de52 100644
--- a/src/js/components/BareLabel.jsx
+++ b/src/js/components/BareLabel.jsx
@@ -5,14 +5,12 @@ import Clickable from './Clickable';
 
 const propTypes = {
     children: PropTypes.node,
-    clickable: PropTypes.bool,
     title: PropTypes.string,
     onClick: PropTypes.func,
     onContextMenu: PropTypes.func,
 };
 const defaultProps = {
     children: null,
-    clickable: false,
     title: null,
     onClick: null,
     onContextMenu: null,
@@ -25,7 +23,6 @@ export default function BareLabel({
     onContextMenu,
 }) {
     const clickable = (typeof onClick === 'function');
-    console.log(clickable);
 
     return (
         <span className="rct-bare-label" title={title}>
diff --git a/src/js/components/CheckboxIcon.js b/src/js/components/CheckboxIcon.js
index 37ce650d..bded7c28 100644
--- a/src/js/components/CheckboxIcon.js
+++ b/src/js/components/CheckboxIcon.js
@@ -6,13 +6,13 @@ class CheckboxIcon extends React.PureComponent {
     static propTypes = {
         checked: PropTypes.number.isRequired,
         isRadioNode: PropTypes.bool.isRequired,
-        noCascade: PropTypes.bool.isRequired,
+        noCascadeChecks: PropTypes.bool.isRequired,
     };
 
     static contextType = IconContext;
 
     render() {
-        const { checked, isRadioNode, noCascade } = this.props;
+        const { checked, isRadioNode, noCascadeChecks } = this.props;
 
         const {
             uncheck, check, halfCheck, radioOn, radioOff,
@@ -22,7 +22,6 @@ class CheckboxIcon extends React.PureComponent {
             if (checked === 0) {
                 return radioOff;
             }
-
             return radioOn;
         }
 
@@ -30,7 +29,7 @@ class CheckboxIcon extends React.PureComponent {
             return uncheck;
         }
 
-        if (checked === 1 || (checked === 2 && noCascade)) {
+        if (checked === 1 || (checked === 2 && noCascadeChecks)) {
             return check;
         }
 
diff --git a/src/js/components/CheckboxLabel.jsx b/src/js/components/CheckboxLabel.jsx
index 12b9a4b5..9f014c32 100644
--- a/src/js/components/CheckboxLabel.jsx
+++ b/src/js/components/CheckboxLabel.jsx
@@ -8,7 +8,7 @@ import Clickable from './Clickable';
 const propTypes = {
     checked: PropTypes.number.isRequired,
     disabled: PropTypes.bool.isRequired,
-    noCascade: PropTypes.bool.isRequired,
+    noCascadeChecks: PropTypes.bool.isRequired,
     value: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number,
@@ -16,7 +16,6 @@ const propTypes = {
     onCheck: PropTypes.func.isRequired,
 
     children: PropTypes.node,
-    clickable: PropTypes.bool,
     isRadioNode: PropTypes.bool,
     title: PropTypes.string,
     treeId: PropTypes.string,
@@ -26,7 +25,6 @@ const propTypes = {
 };
 const defaultProps = {
     children: null,
-    clickable: false,
     isRadioNode: false,
     title: null,
     treeId: null,
@@ -35,22 +33,21 @@ const defaultProps = {
     onContextMenu: null,
 };
 
-export default function CheckboxLabel(props) {
-    const {
-        checked,
-        children,
-        clickable,
-        disabled,
-        isRadioNode,
-        noCascade,
-        title,
-        treeId,
-        value,
-        onCheck,
-        onCheckboxKeyUp,
-        onClick,
-        onContextMenu,
-    } = props;
+export default function CheckboxLabel({
+    checked,
+    children,
+    disabled,
+    isRadioNode,
+    noCascadeChecks,
+    title,
+    treeId,
+    value,
+    onCheck,
+    onCheckboxKeyUp,
+    onClick,
+    onContextMenu,
+}) {
+    const clickable = (typeof onClick === 'function');
 
     const valueId = String(value).split(' ').join('_');
     const inputId = treeId ? `${treeId}-${valueId}` : null;
@@ -76,7 +73,7 @@ export default function CheckboxLabel(props) {
                     <CheckboxIcon
                         checked={checked}
                         isRadioNode={isRadioNode}
-                        noCascade={noCascade}
+                        noCascadeChecks={noCascadeChecks}
                     />
                 </span>
 
diff --git a/src/js/components/Clickable.jsx b/src/js/components/Clickable.jsx
index fc1c3af1..d4db4047 100644
--- a/src/js/components/Clickable.jsx
+++ b/src/js/components/Clickable.jsx
@@ -14,9 +14,7 @@ const defaultProps = {
 
 // this component wraps children with a clickable span
 
-function Clickable({
-    children, tabIndex, onClick,
-}) {
+function Clickable({ children, tabIndex, onClick }) {
     return (
         <span
             className="rct-node-clickable"
diff --git a/src/js/components/ExpandButton.jsx b/src/js/components/ExpandButton.jsx
index b08387ec..20932684 100644
--- a/src/js/components/ExpandButton.jsx
+++ b/src/js/components/ExpandButton.jsx
@@ -17,6 +17,9 @@ function ExpandButton({
     isLeaf,
     onClick,
 }) {
+    const { expandClose, expandOpen } = useContext(IconContext);
+    const { collapseNode, expandNode } = useContext(LanguageContext);
+
     if (isLeaf) {
         return (
             <span className="rct-collapse">
@@ -25,8 +28,6 @@ function ExpandButton({
         );
     }
 
-    const { expandClose, expandOpen } = useContext(IconContext);
-    const { collapseNode, expandNode } = useContext(LanguageContext);
     const icon = expanded ? expandOpen : expandClose;
     const title = expanded ? collapseNode : expandNode;
 
diff --git a/src/js/components/TreeNode.jsx b/src/js/components/TreeNode.jsx
index ac4fb0c6..2d445165 100644
--- a/src/js/components/TreeNode.jsx
+++ b/src/js/components/TreeNode.jsx
@@ -19,7 +19,6 @@ class TreeNode extends React.PureComponent {
         checkKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
         disabled: PropTypes.bool.isRequired,
         expandDisabled: PropTypes.bool.isRequired,
-        noCascade: PropTypes.bool.isRequired,
         node: PropTypes.instanceOf(NodeModel).isRequired,
         showNodeIcon: PropTypes.bool.isRequired,
         onCheck: PropTypes.func.isRequired,
@@ -30,14 +29,15 @@ class TreeNode extends React.PureComponent {
         ParentLabelComponent: PropTypes.func,
         children: PropTypes.node,
         expandOnClick: PropTypes.bool,
+        noCascadeChecks: PropTypes.bool,
         showCheckbox: PropTypes.bool,
-        title: PropTypes.string,
+        showNodeTitle: PropTypes.bool,
         treeId: PropTypes.string,
         onClick: PropTypes.func,
         onContextMenu: PropTypes.func,
-        onLabelChange:  PropTypes.func,
-        onLeafLabelChange:  PropTypes.func,
-        onParentLabelChange:  PropTypes.func,
+        onLabelChange: PropTypes.func,
+        onLeafLabelChange: PropTypes.func,
+        onParentLabelChange: PropTypes.func,
     };
 
     static defaultProps = {
@@ -46,8 +46,9 @@ class TreeNode extends React.PureComponent {
         LabelComponent: null,
         LeafLabelComponent: null,
         ParentLabelComponent: null,
+        noCascadeChecks: false,
         showCheckbox: true,
-        title: null,
+        showNodeTitle: false,
         treeId: null,
         onClick: null,
         onContextMenu: null,
@@ -113,40 +114,31 @@ class TreeNode extends React.PureComponent {
             expandDisabled,
             node,
             showNodeIcon,
+            showNodeTitle,
             onClick,
             LabelComponent,
             LeafLabelComponent,
             ParentLabelComponent,
+            onContextMenu,
             onLabelChange,
             onLeafLabelChange,
             onParentLabelChange,
-            noCascade,
+            noCascadeChecks,
             showCheckbox,
-            title,
             treeId,
-            onContextMenu,
         } = this.props;
 
-        const {
-            checkState,
-            className,
-            expanded,
-            icon,
-            isLeaf,
-            label,
-            value,
-        } = node;
-
         const nodeDisabled = disabled || node.disabled;
+        const nodeTitle = showNodeTitle ? (node.title || node.label) : node.title;
 
         const nodeClass = classNames({
             'rct-node': true,
-            'rct-node-leaf': isLeaf,
-            'rct-node-parent': !isLeaf,
-            'rct-node-expanded': !isLeaf && expanded,
-            'rct-node-collapsed': !isLeaf && !expanded,
+            'rct-node-leaf': node.isLeaf,
+            'rct-node-parent': !node.isLeaf,
+            'rct-node-expanded': !node.isLeaf && node.expanded,
+            'rct-node-collapsed': !node.isLeaf && !node.expanded,
             'rct-disabled': nodeDisabled,
-        }, className);
+        }, node.className);
 
         let Label;
         let labelChangeHandler;
@@ -159,31 +151,28 @@ class TreeNode extends React.PureComponent {
             labelChangeHandler = onParentLabelChange || onLabelChange;
         }
 
-        const clickable = (typeof onClick === 'function');
-
         return (
             <li className={nodeClass}>
                 <span className="rct-text">
                     <ExpandButton
                         disabled={expandDisabled}
-                        expanded={expanded}
-                        isLeaf={isLeaf}
+                        expanded={node.expanded}
+                        isLeaf={node.isLeaf}
                         onClick={this.onExpand}
                     />
 
                     {showCheckbox ? (
                         <CheckboxLabel
-                            checked={checkState}
-                            clickable={clickable}
+                            checked={node.checkState}
                             disabled={nodeDisabled}
                             isRadioNode={node.isRadioNode}
-                            noCascade={noCascade}
-                            title={title}
+                            noCascadeChecks={noCascadeChecks}
+                            title={nodeTitle}
                             treeId={treeId}
-                            value={value}
+                            value={node.value}
                             onCheck={this.onCheck}
                             onCheckboxKeyUp={this.onCheckboxKeyUp}
-                            onClick={this.onClick}
+                            onClick={onClick && this.onClick}
                             onContextMenu={onContextMenu}
                         >
                             <Label
@@ -195,7 +184,7 @@ class TreeNode extends React.PureComponent {
 
                     ) : (
                         <BareLabel
-                            title={title}
+                            title={nodeTitle}
                             onClick={onClick && this.onClick}
                             onContextMenu={onContextMenu}
                         >
@@ -207,7 +196,7 @@ class TreeNode extends React.PureComponent {
                     )}
                 </span>
 
-                {expanded ? children : null}
+                {node.expanded ? children : null}
 
             </li>
         );
diff --git a/src/js/models/TreeModel.js b/src/js/models/TreeModel.js
index 92f2de7d..809600b2 100644
--- a/src/js/models/TreeModel.js
+++ b/src/js/models/TreeModel.js
@@ -4,51 +4,61 @@ import { CHECK_MODEL } from '../constants';
 
 class TreeModel {
     constructor(treeConfig, options = {}) {
+        const { noCascadeDisabled } = options;
+
+        //----------------------------------------------------------------------
+        // function to flatten tree from a deep object to a flat object
         const flatten = (childNodes, parent = {}, depth = 0) => {
             if (Array.isArray(childNodes) && childNodes.length !== 0) {
                 childNodes.forEach((node, index) => {
                     const newNode = new NodeModel(node, parent, index, depth, options);
-                    // TODO: fix disabled - for all nodes? options.disabled?
-                    if (newNode.isChild) {
-                        if ('disabled' in parent) {
-                            newNode.disabled = parent.disabled;
-                        }
+
+                    // cascade disabled property down to children
+                    // this makes tree have consistent disabled state
+                    // this already happens in treeNode if noCascadeDisabled = false
+                    if (!noCascadeDisabled) {
+                        newNode.disabled = parent.disabled || newNode.disabled;
                     }
+
+                    // noCascadeChecks is not relevant here
+                    // noCascadeDisabled is
                     if (newNode.isParent && node.children.length > 0) {
-                        flatten(node.children, node, depth + 1);
+                        flatten(node.children, newNode, depth + 1);
 
                         // adjust checkState based upon children's checkState
-                        if (newNode.isRadioGroup) {
-                            // TODO: should this have a default instead of Error
-                            const numChecked = this.howManyChildrenChecked(newNode);
-                            if (numChecked !== 1) {
-                                // bad input for radio group
-                                let textOption;
-                                if (numChecked > 1) {
-                                    textOption = 'Too many children';
-                                } else {
-                                    textOption = 'No children';
-                                }
-                                throw new TreeModelError(
-                                    `TreeModel.constructor Error: ${textOption} (${numChecked}) are checked in Node.isRadioGroup (${node.value}).`,
-                                );
-                            }
-                        } else if (!newNode.isRadioNode) {
-                            // this is for parent nodes with children
+                        if (!(newNode.isRadioGroup || newNode.isRadioNode)) {
                             const checkState = this.getCheckState(newNode);
                             newNode.checkState = checkState;
                         }
-                        // else if newNode.isRadioNode => do nothing
+                    }
+
+                    // check for bad radio group input
+                    if (newNode.isRadioGroup) {
+                        // TODO: should this have a default instead of Error?
+                        //       like default to first checked
+                        const numChecked = this.howManyChildrenChecked(newNode);
+                        if (numChecked !== 1) {
+                            // bad input for radio group
+                            let textOption;
+                            if (numChecked > 1) {
+                                textOption = 'Too many children';
+                            } else {
+                                textOption = 'No children';
+                            }
+                            throw new TreeModelError(
+                                `TreeModel.constructor Error: ${textOption} (${numChecked}) are checked in Node.isRadioGroup (${node.value}).`,
+                            );
+                        }
                     }
 
                     // Protect against duplicate node values
-                    if (this.tree[node.value] !== undefined) {
+                    if (this.nodes[node.value] !== undefined) {
                         throw new TreeModelError(
                             `Duplicate value '${node.value}' detected. All node values must be unique.`,
                         );
                     }
 
-                    this.tree[node.value] = newNode;
+                    this.nodes[node.value] = newNode;
                 });
             }
         };
@@ -58,12 +68,12 @@ class TreeModel {
             // this is a clone request
             // NOTE: nodes are not cloned. They are only cloned when
             //       actually changed to reduce TreeNode rerenders
-            this.tree = {};
             this.rootKeys = [...treeConfig.rootKeys];
             this.unfilteredRootKeys = [...treeConfig.unfilteredRootKeys];
             this.options = { ...treeConfig.options };
-            Object.keys(treeConfig.tree).forEach((key) => {
-                this.tree[key] = treeConfig.tree[key];
+            this.nodes = {};
+            Object.keys(treeConfig.nodes).forEach((key) => {
+                this.nodes[key] = treeConfig.nodes[key];
             });
         } else {
             // these are options passed from CheckboxTree
@@ -74,7 +84,7 @@ class TreeModel {
             this.rootKeys = treeConfig.map((node) => node.value);
             // save a second copy to restore rootKeys when removing filter
             this.unfilteredRootKeys = [...this.rootKeys];
-            this.tree = {};
+            this.nodes = {};
 
             // process the initial tree state into a TreeModel
             flatten(treeConfig);
@@ -93,11 +103,11 @@ class TreeModel {
 
     expandAllNodes(expandValue = true) {
         const newTreeModel = this.clone();
-        Object.keys(newTreeModel.tree).forEach((key) => {
+        Object.keys(newTreeModel.nodes).forEach((key) => {
             const newNode = this.getNode(key);
             if (newNode.isParent) {
                 newNode.expanded = expandValue;
-                newTreeModel.tree[key] = newNode;
+                newTreeModel.nodes[key] = newNode;
             }
         });
         return newTreeModel;
@@ -113,21 +123,21 @@ class TreeModel {
     expandNodesToLevel(targetLevel) {
         const newTreeModel = this.clone();
 
-        const expandLevels = (node, currentLevel = 0) => {
+        const expandLevels = (keys, currentLevel = 0) => {
             if (currentLevel > targetLevel) {
                 return;
             }
-            Object.keys(newTreeModel.tree).forEach((key) => {
-                const newNode = newTreeModel.getNode[key].clone();
+            keys.forEach((key) => {
+                const newNode = newTreeModel.getNode(key).clone();
                 if (newNode.isParent) {
                     newNode.expanded = true;
-                    newTreeModel.tree[key] = newNode;
-                    expandLevels(newNode, currentLevel + 1);
+                    newTreeModel.nodes[key] = newNode;
+                    expandLevels(newNode.childKeys, currentLevel + 1);
                 }
             });
         };
 
-        expandLevels(targetLevel);
+        expandLevels(newTreeModel.rootKeys);
         return newTreeModel;
     }
 
@@ -155,7 +165,7 @@ class TreeModel {
                 // hide the node
                 const newNode = node.clone();
                 newNode.isHiddenByFilter = true;
-                newTreeModel.tree[nodeKey] = newNode;
+                newTreeModel.nodes[nodeKey] = newNode;
             }
             return filtered;
         };
@@ -165,17 +175,6 @@ class TreeModel {
         return newTreeModel;
     }
 
-    // includes expanded children with parent collapsed
-    getExpanded() {
-        const expandedArray = [];
-        Object.keys(this.tree).forEach((key) => {
-            if (this.tree[key].expanded) {
-                expandedArray.push(key);
-            }
-        });
-        return expandedArray;
-    }
-
     getChecked() {
         const checkModel = this.options.checkModel || CHECK_MODEL.LEAF;
         const checkedArray = [];
@@ -225,7 +224,7 @@ class TreeModel {
     getChecked_old() {
         const checkModel = this.options.checkModel || CHECK_MODEL.LEAF;
         const checkedArray = [];
-        const keys = Object.keys(this.tree);
+        const keys = Object.keys(this.nodes);
 
         const pushCheckedKeys = (testFn) => {
             keys.forEach((key) => {
@@ -255,24 +254,60 @@ class TreeModel {
     }
     */
 
+    getDisabled() {
+        const disabledArray = [];
+        Object.keys(this.nodes).forEach((key) => {
+            if (this.nodes[key].disabled) {
+                disabledArray.push(key);
+            }
+        });
+        return disabledArray;
+    }
+
+    // includes expanded children with parent collapsed
+    getExpanded() {
+        const expandedArray = [];
+        Object.keys(this.nodes).forEach((key) => {
+            if (this.nodes[key].expanded) {
+                expandedArray.push(key);
+            }
+        });
+        return expandedArray;
+    }
+
     getNode(nodeKey) {
-        return this.tree[nodeKey];
+        return this.nodes[nodeKey];
     }
 
     removeFilter() {
         const newTreeModel = this.clone();
 
-        Object.keys(newTreeModel.tree).forEach((key) => {
+        Object.keys(newTreeModel.nodes).forEach((key) => {
             const newNode = this.getNode(key);
             newNode.isHiddenByFilter = false;
-            newTreeModel.tree[key] = newNode;
+            newTreeModel.nodes[key] = newNode;
         });
         newTreeModel.rootKeys = [...this.unfilteredRootKeys];
 
         return newTreeModel;
     }
 
+    setNewOptions(newOptions) {
+        const newTreeModel = this.clone();
+        newTreeModel.options = { ...newTreeModel.options, ...newOptions };
+        return newTreeModel;
+    }
+
+    setNodeProp(nodeKey, propertyName, value) {
+        const newTreeModel = this.clone();
+        const newNode = this.getNode(nodeKey).clone();
+        newNode[propertyName] = value;
+        newTreeModel.nodes[nodeKey] = newNode;
+        return newTreeModel;
+    }
+
     toggleChecked(nodeKey) {
+        const { noCascadeChecks, optimisticToggle } = this.options;
         const node = this.getNode(nodeKey);
 
         // NOTE: disabled may not be needed here
@@ -286,26 +321,26 @@ class TreeModel {
         }
 
         const newTreeModel = this.clone();
-        const newTree = newTreeModel.tree;
+        const newTree = newTreeModel.nodes;
 
-        // determine newCheckState
+        // determine newCheckState for this node
         let newCheckState;
         if (node.isRadioNode) {
             // turn off all siblings of node in newTree
             newTreeModel.turnOffSiblings(nodeKey);
             newCheckState = 1;
         } else if (node.checkState === 2) {
-            newCheckState = this.options.optimisticToggle ? 1 : 0;
+            newCheckState = (optimisticToggle && !noCascadeChecks) ? 1 : 0;
         } else {
             newCheckState = (node.checkState > 0) ? 0 : 1;
         }
 
         //----------------------------------------------------------------------
-        // recursive function to handle toggle
+        // recursive function to handle toggle on node and children
         // defined here because it uses newCheckState & newTree from above
         const toggle = (key) => {
             const newNode = this.getNode(key).clone();
-            if (this.options.noCascade ||
+            if (noCascadeChecks ||
                 newNode.isLeaf ||
                 newNode.childKeys.length === 0 ||
                 newNode.isRadioGroup ||
@@ -317,7 +352,7 @@ class TreeModel {
                 newNode.childKeys.forEach((childKey) => {
                     toggle(childKey, newCheckState);
                 });
-                // get checkState based upon childNodes checkState
+                // get checkState based upon childNodes' checkState
                 newNode.checkState = newTreeModel.getCheckState(newNode);
             }
             newTree[key] = newNode;
@@ -328,7 +363,7 @@ class TreeModel {
 
         // Percolate check status up to parents
         // if child isRadioNode do not percolate up
-        if (!(this.options.noCascade || node.isRadioNode)) {
+        if (!(noCascadeChecks || node.isRadioNode)) {
             let child = node;
             while (child.parentKey !== '') {
                 const { parentKey } = child;
@@ -348,8 +383,7 @@ class TreeModel {
     }
 
     toggleDisabled(nodeKey) {
-        // TODO: what about this.options.noCascade?
-        const toggleChildren = true;
+        const toggleChildren = !this.options.noCascadeDisabled;
         const newTreeModel = this.toggleProperty(nodeKey, 'disabled', toggleChildren);
         return newTreeModel;
     }
@@ -395,7 +429,7 @@ class TreeModel {
         newNode[propertyName] = newValue;
 
         const newTreeModel = this.clone();
-        const newTree = newTreeModel.tree;
+        const newTree = newTreeModel.nodes;
         newTree[nodeKey] = newNode;
 
         if (toggleChildren && newNode.isParent) {
@@ -418,7 +452,7 @@ class TreeModel {
             if (childKey !== nodeKey) {
                 const newNode = this.getNode(childKey).clone();
                 newNode.checkState = 0;
-                this.tree[childKey] = newNode;
+                this.nodes[childKey] = newNode;
             }
         });
     }
diff --git a/test/CheckboxTree.jsx b/test/CheckboxTree.jsx
index 60d5652a..7cd38b2b 100644
--- a/test/CheckboxTree.jsx
+++ b/test/CheckboxTree.jsx
@@ -11,7 +11,41 @@ import TreeModel from '../src/js/models/TreeModel';
 import TreeModelError from '../src/js/models/TreeModelError';
 
 const consoleError = console.error;
-
+/*
+const test1 = [
+    {
+        label: 'Jupiter',
+        value: 'jupiter',
+        children: [
+            { value: 'io', label: 'Io', checked: true },
+            { value: 'europa', label: 'Europa' },
+        ],
+    }, {
+        label: 'Saturn',
+        value: 'saturn',
+        children: [
+            { value: ' titan', label: ' Titan', checked: true },
+            { value: ' enceladus', label: ' Enceladus', checked: true },
+        ],
+    }, {
+        label: 'Earth',
+        value: 'earth',
+        children: [
+            { value: 'moon', label: 'Moon' },
+        ],
+    },
+];
+
+const test2 = [
+    {
+        label: 'Earth',
+        value: 'earth',
+        children: [
+            { value: 'moon', label: 'Moon' },
+        ],
+    },
+];
+*/
 // Increase waitFor timeout to prevent unusual issues when there are many tests
 configure({
     asyncUtilTimeout: 10000,
@@ -21,16 +55,52 @@ describe('<CheckboxTree />', () => {
     describe('component', () => {
         it('should render the react-checkbox-tree container', () => {
             const { container } = render(
+                <CheckboxTreeProvider>
+                    <CheckboxTree nodes={[]} />
+                </CheckboxTreeProvider>,
+            );
+
+            assert.isNotNull(container.querySelector('.react-checkbox-tree'));
+        });
+
+        it('should rerender using the nodes prop if that prop has changed', () => {
+            const { rerender } = render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[]}
-                        onCheck={() => {}}
-                        onExpand={() => {}}
+                        nodes={[
+                            {
+                                label: 'Jupiter',
+                                value: 'jupiter',
+                                children: [
+                                    { value: 'io', label: 'Io', checked: true },
+                                    { value: 'europa', label: 'Europa' },
+                                ],
+                            },
+                        ]}
                     />
                 </CheckboxTreeProvider>,
             );
 
-            assert.isNotNull(container.querySelector('.react-checkbox-tree'));
+            assert.isNotNull(screen.queryByLabelText('Jupiter'));
+
+            rerender(
+                <CheckboxTreeProvider>
+                    <CheckboxTree
+                        nodes={[
+                            {
+                                label: 'Earth',
+                                value: 'earth',
+                                children: [
+                                    { value: 'moon', label: 'Moon' },
+                                ],
+                            },
+                        ]}
+                    />
+                </CheckboxTreeProvider>,
+            );
+
+            assert.isNull(screen.queryByLabelText('Jupiter'));
+            assert.isNotNull(screen.queryByLabelText('Earth'));
         });
     });
 
@@ -43,7 +113,7 @@ describe('<CheckboxTree />', () => {
                     <CheckboxTreeProvider>
                         <CheckboxTree
                             checkModel="all"
-                            initialTreeState={[
+                            nodes={[
                                 {
                                     value: 'jupiter',
                                     label: 'Jupiter',
@@ -73,7 +143,7 @@ describe('<CheckboxTree />', () => {
                     <CheckboxTreeProvider>
                         <CheckboxTree
                             checkModel="all"
-                            initialTreeState={[
+                            nodes={[
                                 {
                                     value: 'sol',
                                     label: 'Sol System',
@@ -120,7 +190,7 @@ describe('<CheckboxTree />', () => {
                     <CheckboxTreeProvider>
                         <CheckboxTree
                             checkModel="all"
-                            initialTreeState={[
+                            nodes={[
                                 {
                                     value: 'jupiter',
                                     label: 'Jupiter',
@@ -153,7 +223,7 @@ describe('<CheckboxTree />', () => {
                 render(
                     <CheckboxTreeProvider>
                         <CheckboxTree
-                            initialTreeState={[
+                            nodes={[
                                 {
                                     value: 'jupiter',
                                     label: 'Jupiter',
@@ -187,7 +257,7 @@ describe('<CheckboxTree />', () => {
                     <CheckboxTree
                         checkKeys={['Shift']}
                         checked={[]}
-                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
                         onCheck={(nodeKey, treeModel) => {
                             actual = treeModel.getChecked();
                         }}
@@ -201,29 +271,13 @@ describe('<CheckboxTree />', () => {
         });
     });
 
-    /* not applicable as checked array is not an input prop to CheckboxTree
-    describe('checked', () => {
-        // https://github.com/jakezatecky/react-checkbox-tree/issues/69
-        it('should not throw an exception if it contains values that are not in the `nodes` property', () => {
-            const { container } = render(
-                <CheckboxTree
-                    checked={['neptune']}
-                    nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                />,
-            );
-
-            assert.isNotNull(container.querySelector('.react-checkbox-tree'));
-        });
-    });
-    */
-
     describe('direction', () => {
         it('should add the class rct-direction-rtl to the root when set to `rtl`', () => {
             const { container } = render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
                         direction="rtl"
-                        initialTreeState={[]}
+                        nodes={[]}
                     />
                 </CheckboxTreeProvider>,
             );
@@ -238,7 +292,7 @@ describe('<CheckboxTree />', () => {
                 <CheckboxTreeProvider>
                     <CheckboxTree
                         disabled
-                        initialTreeState={[]}
+                        nodes={[]}
                     />
                 </CheckboxTreeProvider>,
             );
@@ -247,29 +301,13 @@ describe('<CheckboxTree />', () => {
         });
     });
 
-    /* not applicable as expanded array is not an input prop to CheckboxTree
-    describe('expanded', () => {
-        // https://github.com/jakezatecky/react-checkbox-tree/issues/69
-        it('should not throw an exception if it contains values that are not in the `nodes` property', () => {
-            const { container } = render(
-                <CheckboxTree
-                    expanded={['mars']}
-                    nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                />,
-            );
-
-            assert.isNotNull(container.querySelector('.react-checkbox-tree'));
-        });
-    });
-    */
-
     describe('icons', () => {
         it('should pass the property directly to tree nodes', () => {
             const { container } = render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
                         icons={{ check: <span className="other-check" /> }}
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -288,7 +326,7 @@ describe('<CheckboxTree />', () => {
                 <CheckboxTreeProvider>
                     <CheckboxTree
                         icons={{ check: <span className="other-check" /> }}
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -306,7 +344,7 @@ describe('<CheckboxTree />', () => {
                 <CheckboxTreeProvider>
                     <CheckboxTree
                         icons={{ leaf: null }}
-                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
                     />
                 </CheckboxTreeProvider>,
             );
@@ -321,7 +359,7 @@ describe('<CheckboxTree />', () => {
                 <CheckboxTreeProvider>
                     <CheckboxTree
                         iconsClass="some-class"
-                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
                     />
                 </CheckboxTreeProvider>,
             );
@@ -336,7 +374,7 @@ describe('<CheckboxTree />', () => {
                 <CheckboxTreeProvider>
                     <CheckboxTree
                         id="my-awesome-id"
-                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
                     />
                 </CheckboxTreeProvider>,
             );
@@ -349,7 +387,7 @@ describe('<CheckboxTree />', () => {
                 <CheckboxTreeProvider>
                     <CheckboxTree
                         id="my-awesome-id"
-                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
                     />
                 </CheckboxTreeProvider>,
             );
@@ -363,13 +401,13 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[]}
                         lang={{
                             expandAll: 'Expand all of it',
                             expandNode: 'Expand it',
                             collapseAll: 'Collapse all of it',
                             collapseNode: 'Collapse it',
                         }}
+                        nodes={[]}
                         showExpandAll
                     />
                 </CheckboxTreeProvider>,
@@ -383,7 +421,7 @@ describe('<CheckboxTree />', () => {
         it('should add the class `rct-native-display` to the root', () => {
             const { container } = render(
                 <CheckboxTreeProvider>
-                    <CheckboxTree initialTreeState={[]} nativeCheckboxes />
+                    <CheckboxTree nativeCheckboxes nodes={[]} />
                 </CheckboxTreeProvider>,
             );
 
@@ -401,7 +439,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
                     />
                 </CheckboxTreeProvider>,
             );
@@ -414,7 +452,7 @@ describe('<CheckboxTree />', () => {
                 <CheckboxTreeProvider>
                     <CheckboxTree
                         id="id"
-                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
                     />
                 </CheckboxTreeProvider>,
             );
@@ -427,7 +465,7 @@ describe('<CheckboxTree />', () => {
                 <CheckboxTreeProvider>
                     <CheckboxTree
                         id="id"
-                        initialTreeState={[
+                        nodes={[
                             { value: 'jupiter', label: 'Jupiter' },
                             { value: 'saturn', label: 'Saturn' },
                         ]}
@@ -443,7 +481,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -466,7 +504,7 @@ describe('<CheckboxTree />', () => {
             const { container } = render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             { value: 'jupiter', label: 'Jupiter' },
                         ]}
                     />
@@ -483,7 +521,7 @@ describe('<CheckboxTree />', () => {
             const { container } = render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -505,7 +543,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -529,7 +567,7 @@ describe('<CheckboxTree />', () => {
                 render(
                     <CheckboxTreeProvider>
                         <CheckboxTree
-                            initialTreeState={[
+                            nodes={[
                                 {
                                     value: 'jupiter',
                                     label: 'Jupiter',
@@ -564,7 +602,7 @@ describe('<CheckboxTree />', () => {
                 render(
                     <CheckboxTreeProvider>
                         <CheckboxTree
-                            initialTreeState={[
+                            nodes={[
                                 {
                                     value: 'jupiter',
                                     label: 'Jupiter',
@@ -588,7 +626,7 @@ describe('<CheckboxTree />', () => {
         });
     });
 
-    describe('noCascade', () => {
+    describe('noCascadeChecks', () => {
         it('should not toggle the check state of children when set to true', async () => {
             let actual = null;
 
@@ -596,7 +634,8 @@ describe('<CheckboxTree />', () => {
                 <CheckboxTreeProvider>
                     <CheckboxTree
                         checkModel="all"
-                        initialTreeState={[
+                        noCascadeChecks
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -606,7 +645,6 @@ describe('<CheckboxTree />', () => {
                                 ],
                             },
                         ]}
-                        noCascade
                         onCheck={(nodeKey, treeModel) => {
                             actual = treeModel.getChecked();
                         }}
@@ -626,7 +664,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -656,7 +694,7 @@ describe('<CheckboxTree />', () => {
                 render(
                     <CheckboxTreeProvider>
                         <CheckboxTree
-                            initialTreeState={[
+                            nodes={[
                                 {
                                     value: 'jupiter',
                                     label: 'Jupiter',
@@ -673,11 +711,11 @@ describe('<CheckboxTree />', () => {
                 assert.isTrue(screen.getByLabelText('Jupiter').disabled);
             });
 
-            it('should disable the child nodes when `noCascade` is false', () => {
+            it('should disable the child nodes when `noCascadeDisabled` is false', () => {
                 render(
                     <CheckboxTreeProvider>
                         <CheckboxTree
-                            initialTreeState={[
+                            nodes={[
                                 {
                                     value: 'jupiter',
                                     label: 'Jupiter',
@@ -695,11 +733,12 @@ describe('<CheckboxTree />', () => {
                 assert.isTrue(screen.getByLabelText('Europa').disabled);
             });
 
-            it('should NOT disable the child nodes when `noCascade` is true', () => {
+            it('should NOT disable the child nodes when `noCascadeDisabled` is true', () => {
                 render(
                     <CheckboxTreeProvider>
                         <CheckboxTree
-                            initialTreeState={[
+                            noCascadeDisabled
+                            nodes={[
                                 {
                                     value: 'jupiter',
                                     label: 'Jupiter',
@@ -710,7 +749,6 @@ describe('<CheckboxTree />', () => {
                                     ],
                                 },
                             ]}
-                            noCascade
                         />
                     </CheckboxTreeProvider>,
                 );
@@ -734,7 +772,7 @@ describe('<CheckboxTree />', () => {
                     <CheckboxTreeProvider>
                         <CheckboxTree
                             disabled
-                            initialTreeState={nodes}
+                            nodes={nodes}
                         />
                     </CheckboxTreeProvider>,
                 );
@@ -742,7 +780,7 @@ describe('<CheckboxTree />', () => {
                 rerender(
                     <CheckboxTreeProvider>
                         <CheckboxTree
-                            initialTreeState={nodes}
+                            nodes={nodes}
                         />
                     </CheckboxTreeProvider>,
                 );
@@ -757,7 +795,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -785,7 +823,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[{ value: 'jupiter', label: 'Jupiter' }]}
+                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
                         showExpandAll
                     />
                 </CheckboxTreeProvider>,
@@ -802,7 +840,7 @@ describe('<CheckboxTree />', () => {
                 render(
                     <CheckboxTreeProvider>
                         <CheckboxTree
-                            initialTreeState={[
+                            nodes={[
                                 {
                                     value: 'mercury',
                                     label: 'Mercury',
@@ -825,7 +863,7 @@ describe('<CheckboxTree />', () => {
                                 },
                             ]}
                             showExpandAll
-                            onExpand={(nodekey, treeModel) => {
+                            onExpand={(nodeKey, treeModel) => {
                                 actualExpanded = treeModel.getExpanded();
                             }}
                         />
@@ -847,7 +885,7 @@ describe('<CheckboxTree />', () => {
                     <CheckboxTreeProvider>
                         <CheckboxTree
                             expanded={['mars', 'jupiter']}
-                            initialTreeState={[
+                            nodes={[
                                 {
                                     value: 'mercury',
                                     label: 'Mercury',
@@ -890,7 +928,7 @@ describe('<CheckboxTree />', () => {
             const { container } = render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -908,7 +946,7 @@ describe('<CheckboxTree />', () => {
             const { container } = render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -931,7 +969,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -957,11 +995,11 @@ describe('<CheckboxTree />', () => {
         // https://github.com/jakezatecky/react-checkbox-tree/issues/258
         it('should toggle a node with an empty `children` array', async () => {
             let actualChecked = {};
-            const makeEmptyParentNode = (initialTreeState) => (
+            const makeEmptyParentNode = (nodes) => (
                 <CheckboxTreeProvider>
                     <CheckboxTree
                         checkModel="all"
-                        initialTreeState={initialTreeState}
+                        nodes={nodes}
                         onCheck={(nodeKey, treeModel) => {
                             actualChecked = treeModel.getChecked();
                         }}
@@ -1000,7 +1038,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -1029,7 +1067,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -1039,7 +1077,7 @@ describe('<CheckboxTree />', () => {
                                 ],
                             },
                         ]}
-                        onCheck={(nodeKey, treeModel) => {
+                        onCheck={(nodeKey) => {
                             actual = nodeKey;
                         }}
                     />
@@ -1058,7 +1096,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -1083,13 +1121,13 @@ describe('<CheckboxTree />', () => {
     });
 
     describe('onClick', () => {
-        it('should pass the node clicked as the first parameter', async () => {
+        it('should pass the nodeKey(node.value) of the node clicked as the first parameter', async () => {
             let actualNode = null;
 
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -1099,7 +1137,8 @@ describe('<CheckboxTree />', () => {
                                 ],
                             },
                         ]}
-                        onClick={(node) => {
+                        onClick={(nodeKey, treeModel) => {
+                            const node = treeModel.getNode(nodeKey);
                             actualNode = node;
                         }}
                     />
@@ -1120,7 +1159,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -1155,7 +1194,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -1184,7 +1223,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -1194,7 +1233,7 @@ describe('<CheckboxTree />', () => {
                                 ],
                             },
                         ]}
-                        onExpand={(nodeKey, treeModel) => {
+                        onExpand={(nodeKey) => {
                             actual = nodeKey;
                         }}
                     />
@@ -1213,7 +1252,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -1289,7 +1328,7 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTreeProvider>
                     <CheckboxTree
-                        initialTreeState={[
+                        nodes={[
                             {
                                 value: 'jupiter',
                                 label: 'Jupiter',
@@ -1303,8 +1342,8 @@ describe('<CheckboxTree />', () => {
                         onCheck={(nodeKey, treeModel) => {
                             checkNode = treeModel.getNode(nodeKey);
                         }}
-                        onClick={(node) => {
-                            clickNode = node;
+                        onClick={(nodeKey, treeModel) => {
+                            clickNode = treeModel.getNode(nodeKey);
                         }}
                         onExpand={(nodeKey, treeModel) => {
                             expandNode = treeModel.getNode(nodeKey);
diff --git a/test/TreeModel.js b/test/TreeModel.js
new file mode 100644
index 00000000..6f33ace6
--- /dev/null
+++ b/test/TreeModel.js
@@ -0,0 +1,474 @@
+import { assert } from 'chai';
+
+import TreeModel from '../src/js/models/TreeModel';
+
+const nestedTree = [
+    {
+        value: '0',
+        label: 'Node 0',
+        children: [
+            {
+                value: '0-0',
+                label: 'Node 0-0',
+            }, {
+                value: '0-1',
+                label: 'Node 0-1',
+                children: [{
+                    value: '0-1-0',
+                    label: 'Node 0-1-0',
+                    children: [{
+                        value: '0-1-0-0',
+                        label: 'Node 0-1-0-0',
+                        checked: true,
+                    }],
+                }, {
+                    value: '0-1-1',
+                    label: 'Node 0-1-1',
+                    children: [{
+                        value: '0-1-1-0',
+                        label: 'Node 0-1-1-0',
+                    }],
+                }],
+            }, {
+                value: '0-2',
+                label: 'Node 0-2',
+            },
+        ],
+    }, {
+        value: '1',
+        label: 'Node 1',
+    },
+];
+
+const defaultOptions = {
+    checkModel: 'leaf',
+    disabled: false,
+    noCascadeChecks: false,
+    noCascadeDisabled: false,
+    optimisticToggle: true,
+    setTreeModel: () => {},
+};
+
+describe('TreeModel', () => {
+    describe('clone()', () => {
+        it('should return a new cloned TreeModel', () => {
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const cloneTreeModel = treeModel.clone();
+
+            assert.notEqual(treeModel, cloneTreeModel);
+            assert.deepEqual(treeModel, cloneTreeModel);
+        });
+    });
+
+    describe('expandAllNodes(expandValue = true)', () => {
+        it('should expand all nodes of the tree and return the new updated TreeModel', () => {
+            const expected = ['0', '0-1-0', '0-1-1', '0-1'];
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const newTreeModel = treeModel.expandAllNodes();
+            const actual = newTreeModel.getExpanded();
+
+            assert.deepEqual(expected, actual);
+        });
+
+        it('should collapse all nodes of the tree if passed false and return the new updated TreeModel', () => {
+            const expected = [];
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const expandedTreeModel = treeModel.expandAllNodes();
+            const collapsedTreeModel = expandedTreeModel.expandAllNodes(false);
+            const actual = collapsedTreeModel.getExpanded();
+
+            assert.deepEqual(expected, actual);
+        });
+    });
+
+    describe('expandNodesToLevel(targetLevel)', () => {
+        it('should expand the nodes of the tree down to a given level and return the new updated TreeModel', () => {
+            const expected = ['0', '0-1'];
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const newTreeModel = treeModel.expandNodesToLevel(1);
+            const actual = newTreeModel.getExpanded();
+
+            assert.deepEqual(expected, actual);
+        });
+    });
+
+    describe('filter(testFunc)', () => {
+        it('should return a filtered TreeModel', () => {
+            const expected = {
+                rootKeys: ['0'],
+                unfilteredRootKeys: ['0', '1'],
+                options: defaultOptions,
+                nodes: {
+                    0: {
+                        value: '0',
+                        label: 'Node 0',
+                        childKeys: ['0-0', '0-1', '0-2'],
+                        expanded: false,
+                        checkState: 2,
+                        parentKey: '',
+                        isChild: false,
+                        isParent: true,
+                        isLeaf: false,
+                        isRadioGroup: false,
+                        isRadioNode: false,
+                        isHiddenByFilter: false,
+                        disabled: false,
+                        icon: null,
+                        showCheckbox: true,
+                        index: 0,
+                        treeDepth: 0,
+                    },
+                    1: {
+                        value: '1',
+                        label: 'Node 1',
+                        childKeys: null,
+                        expanded: false,
+                        checkState: 0,
+                        parentKey: '',
+                        isChild: false,
+                        isParent: false,
+                        isLeaf: true,
+                        isRadioGroup: false,
+                        isRadioNode: false,
+                        isHiddenByFilter: true,
+                        disabled: false,
+                        icon: null,
+                        showCheckbox: true,
+                        index: 1,
+                        treeDepth: 0,
+                    },
+                    '0-0': {
+                        value: '0-0',
+                        label: 'Node 0-0',
+                        childKeys: null,
+                        expanded: false,
+                        checkState: 0,
+                        parentKey: '0',
+                        isChild: true,
+                        isParent: false,
+                        isLeaf: true,
+                        isRadioGroup: false,
+                        isRadioNode: false,
+                        isHiddenByFilter: true,
+                        disabled: false,
+                        icon: null,
+                        showCheckbox: true,
+                        index: 0,
+                        treeDepth: 1,
+                    },
+                    '0-1-0-0': {
+                        value: '0-1-0-0',
+                        label: 'Node 0-1-0-0',
+                        childKeys: null,
+                        expanded: false,
+                        checkState: 1,
+                        parentKey: '0-1-0',
+                        isChild: true,
+                        isParent: false,
+                        isLeaf: true,
+                        isRadioGroup: false,
+                        isRadioNode: false,
+                        isHiddenByFilter: true,
+                        disabled: false,
+                        icon: null,
+                        showCheckbox: true,
+                        index: 0,
+                        treeDepth: 3,
+                    },
+                    '0-1-0': {
+                        value: '0-1-0',
+                        label: 'Node 0-1-0',
+                        childKeys: ['0-1-0-0'],
+                        expanded: false,
+                        checkState: 1,
+                        parentKey: '0-1',
+                        isChild: true,
+                        isParent: true,
+                        isLeaf: false,
+                        isRadioGroup: false,
+                        isRadioNode: false,
+                        isHiddenByFilter: false,
+                        disabled: false,
+                        icon: null,
+                        showCheckbox: true,
+                        index: 0,
+                        treeDepth: 2,
+                    },
+                    '0-1-1-0': {
+                        value: '0-1-1-0',
+                        label: 'Node 0-1-1-0',
+                        childKeys: null,
+                        expanded: false,
+                        checkState: 0,
+                        parentKey: '0-1-1',
+                        isChild: true,
+                        isParent: false,
+                        isLeaf: true,
+                        isRadioGroup: false,
+                        isRadioNode: false,
+                        isHiddenByFilter: true,
+                        disabled: false,
+                        icon: null,
+                        showCheckbox: true,
+                        index: 0,
+                        treeDepth: 3,
+                    },
+                    '0-1-1': {
+                        value: '0-1-1',
+                        label: 'Node 0-1-1',
+                        childKeys: ['0-1-1-0'],
+                        expanded: false,
+                        checkState: 0,
+                        parentKey: '0-1',
+                        isChild: true,
+                        isParent: true,
+                        isLeaf: false,
+                        isRadioGroup: false,
+                        isRadioNode: false,
+                        isHiddenByFilter: true,
+                        disabled: false,
+                        icon: null,
+                        showCheckbox: true,
+                        index: 1,
+                        treeDepth: 2,
+                    },
+                    '0-1': {
+                        value: '0-1',
+                        label: 'Node 0-1',
+                        childKeys: ['0-1-0', '0-1-1'],
+                        expanded: false,
+                        checkState: 2,
+                        parentKey: '0',
+                        isChild: true,
+                        isParent: true,
+                        isLeaf: false,
+                        isRadioGroup: false,
+                        isRadioNode: false,
+                        isHiddenByFilter: false,
+                        disabled: false,
+                        icon: null,
+                        showCheckbox: true,
+                        index: 1,
+                        treeDepth: 1,
+                    },
+                    '0-2': {
+                        value: '0-2',
+                        label: 'Node 0-2',
+                        childKeys: null,
+                        expanded: false,
+                        checkState: 0,
+                        parentKey: '0',
+                        isChild: true,
+                        isParent: false,
+                        isLeaf: true,
+                        isRadioGroup: false,
+                        isRadioNode: false,
+                        isHiddenByFilter: true,
+                        disabled: false,
+                        icon: null,
+                        showCheckbox: true,
+                        index: 2,
+                        treeDepth: 1,
+                    },
+                },
+            };
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const testFn = (node) => (node.label === 'Node 0-1-0');
+            const filteredTreeModel = treeModel.filter(testFn);
+
+            assert.deepEqual(expected, filteredTreeModel);
+        });
+    });
+
+    describe('getChecked()', () => {
+        it('should return the checked array', () => {
+            const expected = ['0-1-0-0'];
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const actual = treeModel.getChecked();
+
+            assert.deepEqual(expected, actual);
+        });
+
+        it("should return the array of checked leaf nodes if treeModel.options.checkModel === 'leaf'", () => {
+            const expected = ['0-1-0-0'];
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const newTreeModel = treeModel.setNewOptions({ checkModel: 'leaf' });
+            const actual = newTreeModel.getChecked();
+
+            assert.deepEqual(expected, actual);
+        });
+
+        it("should return the array of checked parent nodes if treeModel.options.checkModel === 'parent'", () => {
+            const expected = ['0', '0-1', '0-1-0'];
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const newTreeModel = treeModel.setNewOptions({ checkModel: 'parent' });
+            const actual = newTreeModel.getChecked();
+
+            assert.deepEqual(expected, actual);
+        });
+
+        it("should return the array of all checked nodes if treeModel.options.checkModel === 'all'", () => {
+            const expected = ['0', '0-1', '0-1-0', '0-1-0-0'];
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const newTreeModel = treeModel.setNewOptions({ checkModel: 'all' });
+            const actual = newTreeModel.getChecked();
+
+            assert.deepEqual(expected, actual);
+        });
+    });
+
+    describe('getDisabled()', () => {
+        it('should return the array of disabled nodes', () => {
+            const expected = ['0-1-0', '0-1-1', '0-1'];
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const newTreeModel = treeModel.toggleDisabled('0-1');
+            const actual = newTreeModel.getDisabled();
+
+            assert.deepEqual(expected, actual);
+        });
+    });
+
+    describe('getExpanded()', () => {
+        it('should return the array of expanded nodes', () => {
+            const expected = ['0', '0-1-0', '0-1-1', '0-1'];
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const newTreeModel = treeModel.expandAllNodes();
+            const actual = newTreeModel.getExpanded();
+
+            assert.deepEqual(expected, actual);
+        });
+    });
+
+    describe('getNode(nodeKey)', () => {
+        it('should return the requested node', () => {
+            const expected = {
+                value: '0',
+                label: 'Node 0',
+                childKeys: ['0-0', '0-1', '0-2'],
+                expanded: false,
+                checkState: 2,
+                parentKey: '',
+                isChild: false,
+                isParent: true,
+                isLeaf: false,
+                isRadioGroup: false,
+                isRadioNode: false,
+                isHiddenByFilter: false,
+                disabled: false,
+                icon: null,
+                showCheckbox: true,
+                index: 0,
+                treeDepth: 0,
+            };
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const actual = treeModel.getNode('0');
+
+            assert.deepEqual(expected, actual);
+        });
+    });
+
+    describe('removeFilter()', () => {
+        it('should return the unfiltered TreeModel', () => {
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const filteredTreeModel = treeModel.filter((node) => node.value === 'Node 0-1-0');
+            const unfilteredTreeModel = filteredTreeModel.removeFilter();
+
+            assert.deepEqual(treeModel, unfilteredTreeModel);
+        });
+    });
+
+    describe('setNewOptions(newOptions)', () => {
+        it('should return a new TreeModel with updated options', () => {
+            const expected = defaultOptions;
+            expected.noCascadeChecks = true;
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const newTreeModel = treeModel.setNewOptions({ noCascadeChecks: true });
+
+            assert.deepEqual(expected, newTreeModel.options);
+        });
+    });
+
+    describe('setNodeProp(nodeKey, propertyName, value)', () => {
+        it('should return a new TreeModel with the updated node property', () => {
+            const expected = {
+                value: '0-1',
+                label: 'Node 0-1',
+                childKeys: ['0-1-0', '0-1-1'],
+                expanded: false,
+                checkState: 2,
+                parentKey: '0',
+                isChild: true,
+                isParent: true,
+                isLeaf: false,
+                isRadioGroup: false,
+                isRadioNode: false,
+                isHiddenByFilter: false,
+                disabled: false,
+                icon: null,
+                showCheckbox: true,
+                index: 1,
+                treeDepth: 1,
+                newProp: 'newValue',
+            };
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const newTreeModel = treeModel.setNodeProp('0-1', 'newProp', 'newValue');
+            const updatedNode = newTreeModel.getNode('0-1');
+
+            assert.deepEqual(expected, updatedNode);
+        });
+    });
+
+    describe('toggleChecked(nodeKey)', () => {
+        it('should return a new TreeModel with checked property toggled on node with value === nodeKey', () => {
+            const expected = ['0-1-0-0'];
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const newTreeModel = treeModel.toggleChecked('0-1');
+            const actual = newTreeModel.getChecked();
+
+            assert.deepEqual(expected, actual);
+        });
+
+        it('should toggle parents of the node if needed', () => {
+            const expected = ['0', '0-1-0', '0-1-0-0'];
+            const treeModel = new TreeModel(nestedTree, { ...defaultOptions, checkModel: 'all' });
+            const newTreeModel = treeModel.toggleChecked('0-1');
+            const actual = newTreeModel.getChecked();
+
+            assert.deepEqual(expected, actual);
+        });
+    });
+
+    describe('toggleDisabled(nodeKey)', () => {
+        it('should return a new TreeModel with disabled property toggled on node with value === nodeKey', () => {
+            const expected = ['0-1-0', '0-1-1', '0-1'];
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const newTreeModel = treeModel.toggleDisabled('0-1');
+            const actual = newTreeModel.getDisabled();
+
+            assert.deepEqual(expected, actual);
+        });
+
+        it('should not disable child nodes if noCascadeDisabled === true', () => {
+            const expected = ['0-1'];
+            const treeModel = new TreeModel(
+                nestedTree,
+                { ...defaultOptions, noCascadeDisabled: true },
+            );
+            const newTreeModel = treeModel.toggleDisabled('0-1');
+            const actual = newTreeModel.getDisabled();
+
+            assert.deepEqual(expected, actual);
+        });
+    });
+
+    describe('toggleExpanded(nodeKey)', () => {
+        it('should return a new TreeModel with expanded property toggled on node with value === nodeKey', () => {
+            const expected = ['0-1'];
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            const newTreeModel = treeModel.toggleExpanded('0-1');
+            const actual = newTreeModel.getExpanded();
+
+            assert.deepEqual(expected, actual);
+        });
+    });
+});
diff --git a/test/TreeNode.jsx b/test/TreeNode.jsx
index ddea1d85..26d7e41a 100644
--- a/test/TreeNode.jsx
+++ b/test/TreeNode.jsx
@@ -8,6 +8,7 @@ import BaseTreeNode from '../src/js/components/TreeNode';
 import { IconContext, LanguageContext } from '../src/js/contexts';
 import lang from '../src/js/lang/default';
 import NodeModel from '../src/js/models/NodeModel';
+import TreeModel from '../src/js/models/TreeModel';
 
 const icons = {
     check: <span className="rct-icon rct-icon-check" />,
@@ -20,21 +21,39 @@ const icons = {
     leaf: <span className="rct-icon rct-icon-leaf" />,
 };
 
+const testTree = new TreeModel([
+    {
+        label: 'Jupiter',
+        value: 'jupiter',
+        children: [
+            { value: 'io', label: 'Io', checked: true },
+            { value: 'europa', label: 'Europa' },
+        ],
+    }, {
+        label: 'Saturn',
+        value: 'saturn',
+        children: [
+            { value: ' titan', label: ' Titan', checked: true },
+            { value: ' enceladus', label: ' Enceladus', checked: true },
+        ],
+    }, {
+        label: 'Earth',
+        value: 'earth',
+        children: [
+            { value: 'moon', label: 'Moon' },
+        ],
+    },
+]);
+
 const baseProps = {
     checkKeys: [' ', 'Enter'],
-    checked: 0,
     disabled: false,
     expandDisabled: false,
     expanded: false,
     isLeaf: true,
     isParent: false,
     noCascade: false,
-    node: new NodeModel(
-        { label: 'Jupiter', value: 'jupiter' },
-        {},
-        1,
-        0,
-    ),
+    node: testTree.getNode('jupiter'),
     optimisticToggle: true,
     showNodeIcon: true,
     treeId: 'id',
@@ -64,7 +83,7 @@ describe('<TreeNode />', () => {
 
         it('should render a label associated with a checkbox', () => {
             render(
-                <TreeNode {...baseProps} value="jupiter" />,
+                <TreeNode {...baseProps} />,
             );
 
             assert.equal(screen.getByLabelText('Jupiter').id, 'id-jupiter');
@@ -76,7 +95,7 @@ describe('<TreeNode />', () => {
                 <TreeNode
                     {...baseProps}
                     node={new NodeModel(
-                        { label: 'Jupiter', value: '0' },
+                        { label: 'Jupiter', value: 0 },
                         {},
                         1,
                         0,
@@ -92,7 +111,7 @@ describe('<TreeNode />', () => {
                 <TreeNode
                     {...baseProps}
                     node={new NodeModel(
-                        { label: 'Jupiter', value: '0.25' },
+                        { label: 'Jupiter', value: 0.25 },
                         {},
                         1,
                         0,
@@ -104,177 +123,253 @@ describe('<TreeNode />', () => {
         });
     });
 
-    describe('checked', () => {
-        it('should render icons associated with each check state', () => {
-            const iconMap = {
-                0: 'rct-icon-uncheck',
-                1: 'rct-icon-check',
-                2: 'rct-icon-half-check',
-            };
+    describe('disabled', () => {
+        it('should disable the hidden <input> element', () => {
+            render(
+                <TreeNode {...baseProps} disabled />,
+            );
+
+            assert.isTrue(screen.getByRole('checkbox').disabled);
+        });
+    });
+
+    describe('expandDisabled', () => {
+        it('should disable the expand <button>', () => {
+            render(
+                <TreeNode {...baseProps} expandDisabled isLeaf={false} />,
+            );
+
+            assert.isTrue(screen.getByLabelText('Expand node').disabled);
+        });
+    });
+
+    describe('node', () => {
+        describe('checkState', () => {
+            it('should render icons associated with each check state', () => {
+                const iconMap = {
+                    0: 'rct-icon-uncheck',
+                    1: 'rct-icon-check',
+                    2: 'rct-icon-half-check',
+                };
+
+                Object.keys(iconMap).forEach((state) => {
+                    const node = new NodeModel(
+                        {
+                            label: 'Jupiter',
+                            value: 'jupiter',
+                            checked: parseInt(state, 10),
+                        },
+                        {},
+                        1,
+                        0,
+                    );
+                    node.checkState = parseInt(state, 10);
+
+                    const { container } = render(
+                        <TreeNode
+                            {...baseProps}
+                            node={node}
+                        />,
+                    );
+
+                    assert.isNotNull(container.querySelector(`.${iconMap[state]}`));
+                });
+            });
 
-            Object.keys(iconMap).forEach((state) => {
+            it('should render an unchecked input element when not set to 1', () => {
                 const node = new NodeModel(
                     {
                         label: 'Jupiter',
                         value: 'jupiter',
-                        checked: parseInt(state, 10),
                     },
                     {},
                     1,
                     0,
                 );
-                node.checkState = parseInt(state, 10);
 
-                const { container } = render(
-                    <TreeNode
-                        {...baseProps}
-                        node={node}
-                    />,
+                node.checkState = 0;
+                const { rerender } = render(
+                    <TreeNode {...baseProps} node={node} />,
                 );
 
-                assert.isNotNull(container.querySelector(`.${iconMap[state]}`));
-            });
-        });
+                assert.isFalse(screen.getByRole('checkbox').checked);
 
-        it('should render an unchecked input element when not set to 1', () => {
-            const { rerender } = render(
-                <TreeNode {...baseProps} checked={0} />,
-            );
+                node.checkState = 2;
+                rerender(
+                    <TreeNode {...baseProps} node={node} />,
+                );
 
-            assert.isFalse(screen.getByRole('checkbox').checked);
+                assert.isFalse(screen.getByRole('checkbox').checked);
+            });
 
-            rerender(
-                <TreeNode {...baseProps} checked={2} />,
-            );
+            it('should render a checked input element when set to 1', () => {
+                const node = new NodeModel(
+                    {
+                        label: 'Jupiter',
+                        value: 'jupiter',
+                    },
+                    {},
+                    1,
+                    0,
+                );
+
+                node.checkState = 1;
+                render(
+                    <TreeNode {...baseProps} node={node} />,
+                );
 
-            assert.isFalse(screen.getByRole('checkbox').checked);
+                assert.isTrue(screen.getByRole('checkbox').checked);
+            });
         });
 
-        it('should render a checked input element when set to 1', () => {
-            render(
-                <TreeNode {...baseProps} checked={1} />,
-            );
+        describe('className', () => {
+            it('should append the supplied className to <li> of the node', () => {
+                const node = new NodeModel(
+                    {
+                        label: 'Jupiter',
+                        value: 'jupiter',
+                        className: 'my-test-class',
+                    },
+                    {},
+                    1,
+                    0,
+                );
+                const { container } = render(
+                    <TreeNode {...baseProps} node={node} />,
+                );
 
-            assert.isTrue(screen.getByRole('checkbox').checked);
+                assert.isNotNull(container.querySelector('.my-test-class'));
+            });
         });
-    });
 
-    describe('className', () => {
-        it('should append the supplied className to <li> of the node', () => {
-            const { container } = render(
-                <TreeNode {...baseProps} className="my-test-class" />,
-            );
+        describe('expanded', () => {
+            it('should render children when set to true', async () => {
+                const node = testTree.getNode('jupiter').clone();
+                node.expanded = true;
+                render(
+                    <TreeNode {...baseProps} expanded node={node}>
+                        <ol>
+                            <TreeNode {...baseProps} node={testTree.getNode('io')} />
+                        </ol>
+                    </TreeNode>,
+                );
 
-            assert.isNotNull(container.querySelector('.my-test-class'));
-        });
-    });
+                assert.isNotNull(await screen.queryByLabelText('Io'));
+            });
 
-    describe('disabled', () => {
-        it('should disable the hidden <input> element', () => {
-            render(
-                <TreeNode {...baseProps} disabled />,
-            );
+            it('should not render children when set to false', async () => {
+                const node = testTree.getNode('jupiter').clone();
+                node.expanded = false;
+                render(
+                    <TreeNode {...baseProps} node={node}>
+                        <ol>
+                            <TreeNode {...baseProps} node={testTree.getNode('io')} />
+                            <TreeNode {...baseProps} node={testTree.getNode('europa')} />
+                        </ol>
+                    </TreeNode>,
+                );
 
-            assert.isTrue(screen.getByRole('checkbox').disabled);
-        });
-    });
+                assert.isNull(await screen.queryByLabelText('Io'));
+            });
 
-    describe('expandDisabled', () => {
-        it('should disable the expand <button>', () => {
-            render(
-                <TreeNode {...baseProps} expandDisabled isLeaf={false} />,
-            );
+            it('should render expanded icons when set to true', () => {
+                const node = testTree.getNode('jupiter').clone();
+                node.expanded = true;
+                const { container } = render(
+                    <TreeNode {...baseProps} node={node} />,
+                );
 
-            assert.isTrue(screen.getByLabelText('Expand node').disabled);
-        });
-    });
+                assert.isNotNull(container.querySelector('.rct-icon-expand-open'));
+                assert.isNotNull(container.querySelector('.rct-icon-parent-open'));
+            });
 
-    describe('expanded', () => {
-        it('should render children when set to true', async () => {
-            render(
-                <TreeNode {...baseProps} expanded isLeaf={false}>
-                    <ol>
-                        <TreeNode {...baseProps} label="Europa" value="europa" />
-                    </ol>
-                </TreeNode>,
-            );
+            it('should render collapsed icons when set to false', () => {
+                const node = testTree.getNode('jupiter').clone();
+                node.expanded = false;
+                const { container } = render(
+                    <TreeNode {...baseProps} node={node} />,
+                );
 
-            assert.isNotNull(await screen.queryByLabelText('Europa'));
-        });
+                assert.isNotNull(container.querySelector('.rct-icon-expand-close'));
+                assert.isNotNull(container.querySelector('.rct-icon-parent-close'));
+            });
 
-        it('should not render children when set to false', async () => {
-            render(
-                <TreeNode {...baseProps} expanded={false} isLeaf={false}>
-                    <TreeNode {...baseProps} label="Europa" value="europa" />
-                </TreeNode>,
-            );
+            it('should append the `rct-node-expanded` class to the node when set to true', () => {
+                const node = testTree.getNode('jupiter').clone();
+                node.expanded = true;
+                render(
+                    <TreeNode {...baseProps} node={node} />,
+                );
 
-            assert.isNull(await screen.queryByLabelText('Europa'));
-        });
+                assert.isTrue(screen.getByRole('listitem').classList.contains('rct-node-expanded'));
+            });
 
-        it('should render expanded icons when set to true', () => {
-            const { container } = render(
-                <TreeNode {...baseProps} expanded isLeaf={false} />,
-            );
+            it('should append the `rct-node-collapsed` class to the node when set to false', () => {
+                const node = testTree.getNode('jupiter').clone();
+                node.expanded = false;
+                render(
+                    <TreeNode {...baseProps} node={node} />,
+                );
 
-            assert.isNotNull(container.querySelector('.rct-icon-expand-open'));
-            assert.isNotNull(container.querySelector('.rct-icon-parent-open'));
-        });
+                assert.isTrue(screen.getByRole('listitem').classList.contains('rct-node-collapsed'));
+            });
 
-        it('should render collapsed icons when set to false', () => {
-            const { container } = render(
-                <TreeNode {...baseProps} expanded={false} isLeaf={false} />,
-            );
+            it('should not append any expanded/collapsed classes to the node when a leaf', () => {
+                render(
+                    <TreeNode {...baseProps} node={testTree.getNode('io')} />,
+                );
+
+                const { classList } = screen.getByRole('listitem');
 
-            assert.isNotNull(container.querySelector('.rct-icon-expand-close'));
-            assert.isNotNull(container.querySelector('.rct-icon-parent-close'));
+                assert.isFalse(classList.contains('rct-node-expanded'));
+                assert.isFalse(classList.contains('rct-node-collapsed'));
+            });
         });
 
-        it('should append the `rct-node-expanded` class to the node when set to true', () => {
-            render(
-                <TreeNode {...baseProps} expanded isLeaf={false} />,
-            );
+        describe('icon', () => {
+            it('should replace the node\'s icons with the supplied value', () => {
+                const node = testTree.getNode('jupiter').clone();
+                node.icon = (<span className="fa fa-plus" />);
+                const { container } = render(
+                    <TreeNode {...baseProps} node={node} />,
+                );
 
-            assert.isTrue(screen.getByRole('listitem').classList.contains('rct-node-expanded'));
+                assert.isNotNull(container.querySelector('.rct-node-icon > .fa.fa-plus'));
+            });
         });
 
-        it('should append the `rct-node-collapsed` class to the node when set to true', () => {
-            render(
-                <TreeNode {...baseProps} expanded={false} isLeaf={false} />,
-            );
+        describe('label', () => {
+            it('should render the node\'s label', async () => {
+                render(
+                    <TreeNode {...baseProps} node={testTree.getNode('europa')} />,
+                );
 
-            assert.isTrue(screen.getByRole('listitem').classList.contains('rct-node-collapsed'));
+                assert.isNotNull(screen.queryByLabelText('Europa'));
+            });
         });
 
-        it('should not append any expanded/collapsed classes to the node when a leaf', () => {
-            render(
-                <TreeNode {...baseProps} expanded isLeaf />,
-            );
+        describe('title', () => {
+            it('should add the `title` property to the label when set', () => {
+                const node = testTree.getNode('jupiter').clone();
+                node.title = 'Some extra text';
 
-            const { classList } = screen.getByRole('listitem');
-
-            assert.isFalse(classList.contains('rct-node-expanded'));
-            assert.isFalse(classList.contains('rct-node-collapsed'));
-        });
-    });
+                const { container } = render(
+                    <TreeNode {...baseProps} node={node} />,
+                );
 
-    describe('icon', () => {
-        it('should replace the node\'s icons with the supplied value', () => {
-            const { container } = render(
-                <TreeNode {...baseProps} icon={<span className="fa fa-plus" />} />,
-            );
+                assert.equal(container.querySelector('label').title, 'Some extra text');
+            });
 
-            assert.isNotNull(container.querySelector('.rct-node-icon > .fa.fa-plus'));
-        });
-    });
+            it('should add the `title` property to the bare label when set on a checkbox-less node', () => {
+                const node = testTree.getNode('jupiter').clone();
+                node.title = 'Some extra text';
 
-    describe('label', () => {
-        it('should render the node\'s label', async () => {
-            render(
-                <TreeNode {...baseProps} label="Europa" value="europa" />,
-            );
+                const { container } = render(
+                    <TreeNode {...baseProps} node={node} showCheckbox={false} />,
+                );
 
-            assert.isNotNull(screen.queryByLabelText('Europa'));
+                assert.equal(container.querySelector('.rct-bare-label').title, 'Some extra text');
+            });
         });
     });
 
@@ -284,7 +379,7 @@ describe('<TreeNode />', () => {
                 <TreeNode {...baseProps} />,
             );
 
-            assert.isNotNull(container.querySelector('.rct-checkbox .rct-icon-uncheck'));
+            assert.isNotNull(container.querySelector('.rct-checkbox > .rct-icon-half-check'));
         });
 
         it('should not render a checkbox or label for the node when false', async () => {
@@ -300,7 +395,10 @@ describe('<TreeNode />', () => {
     describe('showNodeIcon', () => {
         it('should render the node icon when true', () => {
             const { container } = render(
-                <TreeNode {...baseProps} />,
+                <TreeNode
+                    {...baseProps}
+                    node={testTree.getNode('io')}
+                />,
             );
 
             assert.isNotNull(container.querySelector('.rct-node-icon > .rct-icon-leaf'));
@@ -308,101 +406,70 @@ describe('<TreeNode />', () => {
 
         it('should not render the node icon when false', () => {
             const { container } = render(
-                <TreeNode {...baseProps} showNodeIcon={false} />,
+                <TreeNode
+                    {...baseProps}
+                    node={testTree.getNode('io')}
+                    showNodeIcon={false}
+                />,
             );
 
             assert.isNull(container.querySelector('.rct-node-icon > .rct-icon-leaf'));
         });
     });
 
-    describe('title', () => {
-        it('should add the `title` property to the label when set', () => {
+    describe('showNodeTitle', () => {
+        it('should add `title` properties to a TreeNode from the `label` property when set', () => {
             const { container } = render(
-                <TreeNode {...baseProps} title="Some extra text" />,
-            );
-
-            assert.equal(container.querySelector('label').title, 'Some extra text');
-        });
-
-        it('should add the `title` property to the bare label when set on a checkbox-less node', () => {
-            const { container } = render(
-                <TreeNode {...baseProps} showCheckbox={false} title="Some extra text" />,
-            );
-
-            assert.equal(container.querySelector('.rct-bare-label').title, 'Some extra text');
-        });
-    });
-
-    describe('onCheck', () => {
-        it('should pass the current node\'s value', async () => {
-            let actual = {};
-
-            render(
                 <TreeNode
                     {...baseProps}
-                    value="jupiter"
-                    onCheck={(node) => {
-                        actual = node;
-                    }}
+                    node={testTree.getNode('jupiter')}
+                    showNodeTitle
                 />,
             );
 
-            const user = userEvent.setup();
-            await user.click(screen.getByRole('checkbox'));
-
-            assert.equal(actual.value, 'jupiter');
+            assert.equal(container.querySelector('label').title, 'Jupiter');
         });
 
-        it('should toggle an unchecked node to checked', async () => {
-            let actual = {};
+        it('should prioritize the node `title` over the `label', () => {
+            const node = testTree.getNode('jupiter').clone();
+            node.title = 'That Big Failed Star';
 
-            render(
+            const { container } = render(
                 <TreeNode
                     {...baseProps}
-                    checked={0}
-                    value="jupiter"
-                    onCheck={(node) => {
-                        actual = node;
-                    }}
+                    node={node}
+                    showNodeTitle
                 />,
             );
 
-            const user = userEvent.setup();
-            await user.click(screen.getByRole('checkbox'));
-
-            assert.isTrue(actual.checked);
+            assert.equal(container.querySelector('label').title, 'That Big Failed Star');
         });
+    });
 
-        it('should toggle a checked node to unchecked', async () => {
-            let actual = {};
-
+    describe('treeId', () => {
+        it('should add {treeId}-{node.value} as id to input checkbox ', async () => {
             render(
                 <TreeNode
                     {...baseProps}
-                    checked={1}
-                    value="jupiter"
-                    onCheck={(node) => {
-                        actual = node;
-                    }}
+                    node={testTree.getNode('jupiter')}
+                    treeId="my-awesome-id"
                 />,
             );
 
-            const user = userEvent.setup();
-            await user.click(screen.getByRole('checkbox'));
-
-            assert.isFalse(actual.checked);
+            assert.equal(screen.getByRole('checkbox').id, 'my-awesome-id-jupiter');
         });
+    });
 
-        it('should toggle a partially-checked node to checked', async () => {
+    describe('onCheck', () => {
+        it('should pass the checked node\'s value property', async () => {
             let actual = {};
 
             render(
                 <TreeNode
                     {...baseProps}
-                    checked={2}
-                    value="jupiter"
-                    onCheck={(node) => {
-                        actual = node;
+                    node={testTree.getNode('jupiter')}
+                    onCheck={(nodeKey) => {
+                        actual = nodeKey;
                     }}
                 />,
             );
@@ -410,7 +477,7 @@ describe('<TreeNode />', () => {
             const user = userEvent.setup();
             await user.click(screen.getByRole('checkbox'));
 
-            assert.isTrue(actual.checked);
+            assert.equal(actual, 'jupiter');
         });
 
         it('should trigger on key press', async () => {
@@ -419,63 +486,37 @@ describe('<TreeNode />', () => {
             render(
                 <TreeNode
                     {...baseProps}
-                    checked={2}
-                    value="jupiter"
-                    onCheck={(node) => {
-                        actual = node;
+                    node={testTree.getNode('jupiter')}
+                    onCheck={(nodeKey) => {
+                        actual = nodeKey;
                     }}
                 />,
             );
 
             await fireEvent.keyUp(screen.getByRole('checkbox'), { key: 'Enter' });
 
-            assert.isTrue(actual.checked);
-        });
-
-        describe('optimisticToggle', () => {
-            it('should toggle a partially-checked node to unchecked', async () => {
-                let actual = {};
-
-                render(
-                    <TreeNode
-                        {...baseProps}
-                        checked={2}
-                        optimisticToggle={false}
-                        value="jupiter"
-                        onCheck={(node) => {
-                            actual = node;
-                        }}
-                    />,
-                );
-
-                const user = userEvent.setup();
-                await user.click(screen.getByRole('checkbox'));
-
-                assert.isFalse(actual.checked);
-            });
+            assert.equal(actual, 'jupiter');
         });
     });
 
     describe('onExpand', () => {
-        it('should toggle the expanded property and pass the current node\'s value', async () => {
+        it('should pass the current node\'s value', async () => {
             let actual = {};
 
             render(
                 <TreeNode
                     {...baseProps}
-                    expanded
-                    isLeaf={false}
-                    value="jupiter"
-                    onExpand={(node) => {
-                        actual = node;
+                    node={testTree.getNode('jupiter')}
+                    onExpand={(nodeKey) => {
+                        actual = nodeKey;
                     }}
                 />,
             );
 
             const user = userEvent.setup();
-            await user.click(screen.getByLabelText('Collapse node'));
+            await user.click(screen.getByLabelText('Expand node'));
 
-            assert.deepEqual(actual, { value: 'jupiter', expanded: false });
+            assert.equal(actual, 'jupiter');
         });
     });
 
@@ -484,7 +525,6 @@ describe('<TreeNode />', () => {
             render(
                 <TreeNode
                     {...baseProps}
-                    value="jupiter"
                     onClick={null}
                 />,
             );
@@ -496,7 +536,6 @@ describe('<TreeNode />', () => {
             render(
                 <TreeNode
                     {...baseProps}
-                    value="jupiter"
                     onClick={() => {}}
                 />,
             );
@@ -504,75 +543,15 @@ describe('<TreeNode />', () => {
             assert.isNull(await screen.queryByLabelText('Jupiter'));
         });
 
-        it('should pass the current node\'s value', async () => {
-            let actual = {};
-
-            render(
-                <TreeNode
-                    {...baseProps}
-                    value="jupiter"
-                    onClick={(node) => {
-                        actual = node;
-                    }}
-                />,
-            );
-
-            const user = userEvent.setup();
-            await user.click(screen.getByText('Jupiter'));
-
-            assert.equal(actual.value, 'jupiter');
-        });
-
-        it('should return the unchecked node as unchecked', async () => {
-            let actual = {};
-
-            render(
-                <TreeNode
-                    {...baseProps}
-                    checked={0}
-                    value="jupiter"
-                    onClick={(node) => {
-                        actual = node;
-                    }}
-                />,
-            );
-
-            const user = userEvent.setup();
-            await user.click(screen.getByText('Jupiter'));
-
-            assert.isFalse(actual.checked);
-        });
-
-        it('should return the checked node as checked', async () => {
-            let actual = {};
-
-            render(
-                <TreeNode
-                    {...baseProps}
-                    checked={1}
-                    value="jupiter"
-                    onClick={(node) => {
-                        actual = node;
-                    }}
-                />,
-            );
-
-            const user = userEvent.setup();
-            await user.click(screen.getByText('Jupiter'));
-
-            assert.isTrue(actual.checked);
-        });
-
-        it('should get the partially-checked node as checked', async () => {
+        it('should pass the clicked node\'s value property', async () => {
             let actual = {};
 
             render(
                 <TreeNode
                     {...baseProps}
-                    checked={2}
-                    value="jupiter"
-                    onClick={(node) => {
-                        actual = node;
+                    node={testTree.getNode('jupiter')}
+                    onClick={(nodeKey) => {
+                        actual = nodeKey;
                     }}
                 />,
             );
@@ -580,7 +559,7 @@ describe('<TreeNode />', () => {
             const user = userEvent.setup();
             await user.click(screen.getByText('Jupiter'));
 
-            assert.isTrue(actual.checked);
+            assert.equal(actual, 'jupiter');
         });
     });
 });
diff --git a/test/utils.js b/test/utils.js
deleted file mode 100644
index 143bbd7e..00000000
--- a/test/utils.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { assert } from 'chai';
-
-import { expandNodesToLevel } from '../src';
-
-const nestedTree = [{
-    value: '0',
-    label: 'Node 0',
-    children: [{
-        value: '0-0',
-        label: 'Node 0-0',
-    }, {
-        value: '0-1',
-        label: 'Node 0-1',
-        children: [{
-            value: '0-1-0',
-            label: 'Node 0-1-0',
-            children: [{
-                value: '0-1-0-0',
-                label: 'Node 0-1-0-0',
-            }],
-        }, {
-            value: '0-1-1',
-            label: 'Node 0-1-1',
-            children: [{
-                value: '0-1-1-0',
-                label: 'Node 0-1-1-0',
-            }],
-        }],
-    }, {
-        value: '0-2',
-        label: 'Node 0-2',
-    }],
-}, {
-    value: '1',
-    label: 'Node 1',
-}];
-
-describe('utils', () => {
-    describe('expandNodesToLevel', () => {
-        it('should recursively traverse a tree of nodes and return the key values of parents from the level specified', () => {
-            const expected = ['0', '0-1'];
-
-            assert.deepEqual(expected, expandNodesToLevel(nestedTree, 1));
-        });
-    });
-});

From a27a0858f6b20d3b72be08af6d842b3fc0929208 Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Tue, 27 Jun 2023 16:20:03 -0400
Subject: [PATCH 06/17] fix incorrect method

---
 src/js/CheckboxTree.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/CheckboxTree.jsx b/src/js/CheckboxTree.jsx
index 85ed0feb..6eff4b54 100644
--- a/src/js/CheckboxTree.jsx
+++ b/src/js/CheckboxTree.jsx
@@ -336,7 +336,7 @@ export default function CheckboxTree({
 
                     {name !== undefined ? (
                         <HiddenInput
-                            checked={treeModel.getCheckedArray()}
+                            checked={treeModel.getChecked()}
                             name={name}
                             nameAsArray={nameAsArray}
                         />

From 5acee9e235df392bbb03390fb7c65986efbc656e Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Thu, 29 Jun 2023 15:12:18 -0400
Subject: [PATCH 07/17] remove context and make component controlled

---
 examples/src/index.jsx                       |    2 +-
 examples/src/js/BasicExample.jsx             |   26 +-
 examples/src/js/ClickableLabelsExample.jsx   |   26 +-
 examples/src/js/CustomIconsExample.jsx       |   25 +-
 examples/src/js/CustomLabelExample.jsx       |   28 +-
 examples/src/js/DisabledExample.jsx          |   27 +-
 examples/src/js/ExpandAllExample.jsx         |   27 +-
 examples/src/js/FilterExample.jsx            |   53 +-
 examples/src/js/HiddenCheckboxesExample.jsx  |   27 +-
 examples/src/js/LargeDataExample.jsx         |   24 +-
 examples/src/js/NativeCheckboxExample.jsx    |   27 +-
 examples/src/js/NoCascadeExample.jsx         |   27 +-
 examples/src/js/PessimisticToggleExample.jsx |   27 +-
 examples/src/js/RadioButtonExample.jsx       |   25 +-
 src/index.js                                 |    3 +-
 src/js/CheckboxTree.jsx                      |   90 +-
 src/js/CheckboxTreeContext.jsx               |   35 -
 src/js/models/TreeModel.js                   |    7 +-
 test/CheckboxTree.jsx                        | 1419 +++++++++---------
 19 files changed, 963 insertions(+), 962 deletions(-)
 delete mode 100644 src/js/CheckboxTreeContext.jsx

diff --git a/examples/src/index.jsx b/examples/src/index.jsx
index 8d48d842..48537a02 100644
--- a/examples/src/index.jsx
+++ b/examples/src/index.jsx
@@ -18,6 +18,7 @@ import RadioButtonExample from './js/RadioButtonExample';
 createRoot(document.getElementById('basic-example')).render(<BasicExample />);
 createRoot(document.getElementById('clickable-labels-example')).render(<ClickableLabelsExample />);
 createRoot(document.getElementById('custom-icons-example')).render(<CustomIconsExample />);
+createRoot(document.getElementById('custom-label-example')).render(<CustomLabelExample />);
 createRoot(document.getElementById('disabled-example')).render(<DisabledExample />);
 createRoot(document.getElementById('expand-all-example')).render(<ExpandAllExample />);
 createRoot(document.getElementById('filter-example')).render(<FilterExample />);
@@ -27,4 +28,3 @@ createRoot(document.getElementById('native-checkboxes-example')).render(<NativeC
 createRoot(document.getElementById('no-cascade-example')).render(<NoCascadeExample />);
 createRoot(document.getElementById('pessimistic-toggle-example')).render(<PessimisticToggleExample />);
 createRoot(document.getElementById('radio-button-example')).render(<RadioButtonExample />);
-createRoot(document.getElementById('custom-label-example')).render(<CustomLabelExample />);
diff --git a/examples/src/js/BasicExample.jsx b/examples/src/js/BasicExample.jsx
index b804ce86..0d03b6cd 100644
--- a/examples/src/js/BasicExample.jsx
+++ b/examples/src/js/BasicExample.jsx
@@ -1,9 +1,17 @@
-import React from 'react';
-import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+import React, { useState } from 'react';
+import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 import { fileSystem as nodes } from './data';
 
+const initialTree = new TreeModel(nodes);
+
 function BasicExample() {
+    const [tree, setTree] = useState(initialTree);
+
+    const onChange = (newTree) => {
+        setTree(newTree);
+    };
+
     const onCheck = (changedNodeKey, newTree) => {
         const changedNode = newTree.getNode(changedNodeKey);
         console.log(`changed node = ${changedNode.label}`);
@@ -17,13 +25,13 @@ function BasicExample() {
     };
 
     return (
-        <CheckboxTreeProvider>
-            <CheckboxTree
-                nodes={nodes}
-                onCheck={onCheck}
-                onExpand={onExpand}
-            />
-        </CheckboxTreeProvider>
+        <CheckboxTree
+            id="my-awesome-id"
+            tree={tree}
+            onChange={onChange}
+            onCheck={onCheck}
+            onExpand={onExpand}
+        />
     );
 }
 
diff --git a/examples/src/js/ClickableLabelsExample.jsx b/examples/src/js/ClickableLabelsExample.jsx
index 06ac8443..e736bdfc 100644
--- a/examples/src/js/ClickableLabelsExample.jsx
+++ b/examples/src/js/ClickableLabelsExample.jsx
@@ -1,11 +1,18 @@
 import React, { useState } from 'react';
-import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 import { fileSystem as nodes } from './data';
 
+const initialTree = new TreeModel(nodes);
+
 function ClickExample() {
+    const [tree, setTree] = useState(initialTree);
     const [clicked, setClicked] = useState({});
 
+    const onChange = (newTree) => {
+        setTree(newTree);
+    };
+
     const onCheck = (changedNodeKey, newTree) => {
         const changedNode = newTree.getNode(changedNodeKey);
         console.log(`changed node = ${changedNode.label}`);
@@ -28,15 +35,14 @@ function ClickExample() {
 
     return (
         <div className="clickable-labels">
-            <CheckboxTreeProvider>
-                <CheckboxTree
-                    expandOnClick
-                    nodes={nodes}
-                    onCheck={onCheck}
-                    onClick={onClick}
-                    onExpand={onExpand}
-                />
-            </CheckboxTreeProvider>
+            <CheckboxTree
+                expandOnClick
+                tree={tree}
+                onChange={onChange}
+                onCheck={onCheck}
+                onClick={onClick}
+                onExpand={onExpand}
+            />
             <div className="clickable-labels-info">
                 <strong>Clicked Node</strong>
                 {`: ${displayText}`}
diff --git a/examples/src/js/CustomIconsExample.jsx b/examples/src/js/CustomIconsExample.jsx
index 96c1a27c..af4680fc 100644
--- a/examples/src/js/CustomIconsExample.jsx
+++ b/examples/src/js/CustomIconsExample.jsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+import React, { useState } from 'react';
+import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 const nodes = [
     {
@@ -41,7 +41,15 @@ const nodes = [
     },
 ];
 
+const initialTree = new TreeModel(nodes);
+
 function CustomIconsExample() {
+    const [tree, setTree] = useState(initialTree);
+
+    const onChange = (newTree) => {
+        setTree(newTree);
+    };
+
     const onCheck = (changedNodeKey, newTree) => {
         const changedNode = newTree.getNode(changedNodeKey);
         console.log(`changed node = ${changedNode.label}`);
@@ -55,13 +63,12 @@ function CustomIconsExample() {
     };
 
     return (
-        <CheckboxTreeProvider>
-            <CheckboxTree
-                nodes={nodes}
-                onCheck={onCheck}
-                onExpand={onExpand}
-            />
-        </CheckboxTreeProvider>
+        <CheckboxTree
+            tree={tree}
+            onChange={onChange}
+            onCheck={onCheck}
+            onExpand={onExpand}
+        />
     );
 }
 
diff --git a/examples/src/js/CustomLabelExample.jsx b/examples/src/js/CustomLabelExample.jsx
index 7aa0f0fb..b0d25ea9 100644
--- a/examples/src/js/CustomLabelExample.jsx
+++ b/examples/src/js/CustomLabelExample.jsx
@@ -1,11 +1,13 @@
-import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
-import PropTypes from 'prop-types';
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 import NodeModel from '../../../src/js/models/NodeModel';
 
 import { mapLayerTreeSmall as nodes } from './data';
 
+const initialTree = new TreeModel(nodes);
+
 const propTypes = {
     node: PropTypes.instanceOf(NodeModel).isRequired,
     onChange: PropTypes.func,
@@ -63,9 +65,14 @@ CustomLabel.propTypes = propTypes;
 CustomLabel.defaultProps = defaultProps;
 
 function CustomLabelExample() {
+    const [tree, setTree] = useState(initialTree);
     const [nodeKey, setNodeKey] = useState('');
     const [value, setValue] = useState('');
 
+    const onChange = (newTree) => {
+        setTree(newTree);
+    };
+
     const onCheck = (changedNodeKey, newTree) => {
         const changedNode = newTree.getNode(changedNodeKey);
         console.log(`changed node = ${changedNode.label}`);
@@ -90,15 +97,14 @@ function CustomLabelExample() {
 
     return (
         <div className="clickable-labels">
-            <CheckboxTreeProvider>
-                <CheckboxTree
-                    LeafLabelComponent={CustomLabel}
-                    nodes={nodes}
-                    onCheck={onCheck}
-                    onExpand={onExpand}
-                    onLeafLabelChange={onLeafLabelChangeHandler}
-                />
-            </CheckboxTreeProvider>
+            <CheckboxTree
+                LeafLabelComponent={CustomLabel}
+                tree={tree}
+                onChange={onChange}
+                onCheck={onCheck}
+                onExpand={onExpand}
+                onLeafLabelChange={onLeafLabelChangeHandler}
+            />
             <div className="clickable-labels-info">
                 <strong>layer</strong>
                 {`: ${displayText}`}
diff --git a/examples/src/js/DisabledExample.jsx b/examples/src/js/DisabledExample.jsx
index afc5e6ea..fc18de5f 100644
--- a/examples/src/js/DisabledExample.jsx
+++ b/examples/src/js/DisabledExample.jsx
@@ -1,9 +1,17 @@
-import React from 'react';
-import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+import React, { useState } from 'react';
+import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 import { fileSystem as nodes } from './data';
 
+const initialTree = new TreeModel(nodes);
+
 function DisabledExample() {
+    const [tree, setTree] = useState(initialTree);
+
+    const onChange = (newTree) => {
+        setTree(newTree);
+    };
+
     const onCheck = (changedNodeKey, newTree) => {
         const changedNode = newTree.getNode(changedNodeKey);
         console.log(`changed node = ${changedNode.label}`);
@@ -17,14 +25,13 @@ function DisabledExample() {
     };
 
     return (
-        <CheckboxTreeProvider>
-            <CheckboxTree
-                disabled
-                nodes={nodes}
-                onCheck={onCheck}
-                onExpand={onExpand}
-            />
-        </CheckboxTreeProvider>
+        <CheckboxTree
+            disabled
+            tree={tree}
+            onChange={onChange}
+            onCheck={onCheck}
+            onExpand={onExpand}
+        />
     );
 }
 
diff --git a/examples/src/js/ExpandAllExample.jsx b/examples/src/js/ExpandAllExample.jsx
index 33d6f932..3f7ef751 100644
--- a/examples/src/js/ExpandAllExample.jsx
+++ b/examples/src/js/ExpandAllExample.jsx
@@ -1,9 +1,17 @@
-import React from 'react';
-import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+import React, { useState } from 'react';
+import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 import { fileSystem as nodes } from './data';
 
+const initialTree = new TreeModel(nodes);
+
 function ExpandAllExample() {
+    const [tree, setTree] = useState(initialTree);
+
+    const onChange = (newTree) => {
+        setTree(newTree);
+    };
+
     const onCheck = (changedNodeKey, newTree) => {
         const changedNode = newTree.getNode(changedNodeKey);
         console.log(`changed node = ${changedNode.label}`);
@@ -18,14 +26,13 @@ function ExpandAllExample() {
     };
 
     return (
-        <CheckboxTreeProvider>
-            <CheckboxTree
-                nodes={nodes}
-                showExpandAll
-                onCheck={onCheck}
-                onExpand={onExpand}
-            />
-        </CheckboxTreeProvider>
+        <CheckboxTree
+            showExpandAll
+            tree={tree}
+            onChange={onChange}
+            onCheck={onCheck}
+            onExpand={onExpand}
+        />
     );
 }
 
diff --git a/examples/src/js/FilterExample.jsx b/examples/src/js/FilterExample.jsx
index 533ab8f3..f64f12f7 100644
--- a/examples/src/js/FilterExample.jsx
+++ b/examples/src/js/FilterExample.jsx
@@ -1,24 +1,19 @@
 import React, { useEffect, useState } from 'react';
-import CheckboxTree, { CheckboxTreeProvider, useCheckboxTree } from 'react-checkbox-tree';
+import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 import { fileSystem as nodes } from './data';
 
-// NOTE: FilterWidget must be within CheckboxTreeProvider
-// so useCheckboxTree can be used in FilterWidget function
-function FilterExample() {
-    return (
-        <CheckboxTreeProvider>
-            <FilterWidget />
-        </CheckboxTreeProvider>
-    );
-}
+const initialTree = new TreeModel(nodes);
 
-function FilterWidget() {
+function FilterExample() {
+    const [tree, setTree] = useState(initialTree);
     const [filterText, setFilterText] = useState('');
     const [activeFilter, setActiveFilter] = useState('');
     const [timeoutId, setTimeoutId] = useState();
 
-    const { treeModel } = useCheckboxTree();
+    const onChange = (newTree) => {
+        setTree(newTree);
+    };
 
     const onCheck = (changedNodeKey, newTree) => {
         const changedNode = newTree.getNode(changedNodeKey);
@@ -44,8 +39,9 @@ function FilterWidget() {
     );
 
     const applyFilter = () => {
-        treeModel.filter(filterTest);
+        const filteredTree = tree.filter(filterTest);
         setActiveFilter(filterText);
+        setTree(filteredTree);
     };
 
     //--------------------------------------------------------------------------
@@ -55,23 +51,21 @@ function FilterWidget() {
         const timeoutDelay = 500; // 0.5 seconds
         clearTimeout(timeoutId);
 
-        // treeModel may not exist on first call
-        if (treeModel) {
-            if (filterText !== '') {
-                // filter is requested
-                if (filterText !== activeFilter) {
-                    // filter has changed
-                    const newTimeoutId = setTimeout(applyFilter, timeoutDelay);
-                    setTimeoutId(newTimeoutId);
-                }
-            } else if (activeFilter !== '') {
-                // no filter requested but there was one previously
-                // restore whole tree
-                treeModel.removeFilter();
-                setActiveFilter('');
+        if (filterText !== '') {
+            // filter is requested
+            if (filterText !== activeFilter) {
+                // filter has changed
+                const newTimeoutId = setTimeout(applyFilter, timeoutDelay);
+                setTimeoutId(newTimeoutId);
             }
+        } else if (activeFilter !== '') {
+            // no filter requested but there was one previously
+            // restore whole tree
+            const unFilteredTree = tree.removeFilter();
+            setTree(unFilteredTree);
+            setActiveFilter('');
         }
-    }, [activeFilter, filterText, treeModel]);
+    }, [activeFilter, filterText, tree]);
     //--------------------------------------------------------------------------
 
     return (
@@ -84,7 +78,8 @@ function FilterWidget() {
                 onChange={onFilterChange}
             />
             <CheckboxTree
-                nodes={nodes}
+                tree={tree}
+                onChange={onChange}
                 onCheck={onCheck}
                 onExpand={onExpand}
             />
diff --git a/examples/src/js/HiddenCheckboxesExample.jsx b/examples/src/js/HiddenCheckboxesExample.jsx
index 331f641c..7fc0a5d6 100644
--- a/examples/src/js/HiddenCheckboxesExample.jsx
+++ b/examples/src/js/HiddenCheckboxesExample.jsx
@@ -1,9 +1,17 @@
-import React from 'react';
-import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+import React, { useState } from 'react';
+import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 import { empires as nodes } from './data';
 
+const initialTree = new TreeModel(nodes);
+
 function HiddenCheckboxesExample() {
+    const [tree, setTree] = useState(initialTree);
+
+    const onChange = (newTree) => {
+        setTree(newTree);
+    };
+
     const onCheck = (changedNodeKey, newTree) => {
         const changedNode = newTree.getNode(changedNodeKey);
         console.log(`changed node = ${changedNode.label}`);
@@ -17,14 +25,13 @@ function HiddenCheckboxesExample() {
     };
 
     return (
-        <CheckboxTreeProvider>
-            <CheckboxTree
-                nodes={nodes}
-                onlyLeafCheckboxes
-                onCheck={onCheck}
-                onExpand={onExpand}
-            />
-        </CheckboxTreeProvider>
+        <CheckboxTree
+            onlyLeafCheckboxes
+            tree={tree}
+            onChange={onChange}
+            onCheck={onCheck}
+            onExpand={onExpand}
+        />
     );
 }
 
diff --git a/examples/src/js/LargeDataExample.jsx b/examples/src/js/LargeDataExample.jsx
index d69f6dbf..84cc9eff 100644
--- a/examples/src/js/LargeDataExample.jsx
+++ b/examples/src/js/LargeDataExample.jsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+import React, { useState } from 'react';
+import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 function makeLargeDataSet() {
     const parents = [];
@@ -29,8 +29,15 @@ function makeLargeDataSet() {
 }
 
 const nodes = makeLargeDataSet();
+const initialTree = new TreeModel(nodes);
 
 function LargeDataExample() {
+    const [tree, setTree] = useState(initialTree);
+
+    const onChange = (newTree) => {
+        setTree(newTree);
+    };
+
     const onCheck = (changedNodeKey, newTree) => {
         const changedNode = newTree.getNode(changedNodeKey);
         console.log(`changed node = ${changedNode.label}`);
@@ -44,13 +51,12 @@ function LargeDataExample() {
     };
 
     return (
-        <CheckboxTreeProvider>
-            <CheckboxTree
-                nodes={nodes}
-                onCheck={onCheck}
-                onExpand={onExpand}
-            />
-        </CheckboxTreeProvider>
+        <CheckboxTree
+            tree={tree}
+            onChange={onChange}
+            onCheck={onCheck}
+            onExpand={onExpand}
+        />
     );
 }
 
diff --git a/examples/src/js/NativeCheckboxExample.jsx b/examples/src/js/NativeCheckboxExample.jsx
index 96e828da..041898da 100644
--- a/examples/src/js/NativeCheckboxExample.jsx
+++ b/examples/src/js/NativeCheckboxExample.jsx
@@ -1,9 +1,17 @@
-import React from 'react';
-import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+import React, { useState } from 'react';
+import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 import { fileSystemRadio as nodes } from './data';
 
+const initialTree = new TreeModel(nodes);
+
 function NativeCheckboxExample() {
+    const [tree, setTree] = useState(initialTree);
+
+    const onChange = (newTree) => {
+        setTree(newTree);
+    };
+
     const onCheck = (changedNodeKey, newTree) => {
         const changedNode = newTree.getNode(changedNodeKey);
         console.log(`changed node = ${changedNode.label}`);
@@ -17,14 +25,13 @@ function NativeCheckboxExample() {
     };
 
     return (
-        <CheckboxTreeProvider>
-            <CheckboxTree
-                nativeCheckboxes
-                nodes={nodes}
-                onCheck={onCheck}
-                onExpand={onExpand}
-            />
-        </CheckboxTreeProvider>
+        <CheckboxTree
+            nativeCheckboxes
+            tree={tree}
+            onChange={onChange}
+            onCheck={onCheck}
+            onExpand={onExpand}
+        />
     );
 }
 
diff --git a/examples/src/js/NoCascadeExample.jsx b/examples/src/js/NoCascadeExample.jsx
index 4df5d4b1..80b7c5d6 100644
--- a/examples/src/js/NoCascadeExample.jsx
+++ b/examples/src/js/NoCascadeExample.jsx
@@ -1,9 +1,17 @@
-import React from 'react';
-import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+import React, { useState } from 'react';
+import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 import { fileSystem as nodes } from './data';
 
+const initialTree = new TreeModel(nodes);
+
 function NoCascadeExample() {
+    const [tree, setTree] = useState(initialTree);
+
+    const onChange = (newTree) => {
+        setTree(newTree);
+    };
+
     const onCheck = (changedNodeKey, newTree) => {
         const changedNode = newTree.getNode(changedNodeKey);
         console.log(`changed node = ${changedNode.label}`);
@@ -17,14 +25,13 @@ function NoCascadeExample() {
     };
 
     return (
-        <CheckboxTreeProvider>
-            <CheckboxTree
-                noCascadeChecks
-                nodes={nodes}
-                onCheck={onCheck}
-                onExpand={onExpand}
-            />
-        </CheckboxTreeProvider>
+        <CheckboxTree
+            noCascadeChecks
+            tree={tree}
+            onChange={onChange}
+            onCheck={onCheck}
+            onExpand={onExpand}
+        />
     );
 }
 
diff --git a/examples/src/js/PessimisticToggleExample.jsx b/examples/src/js/PessimisticToggleExample.jsx
index e89cd597..22904d82 100644
--- a/examples/src/js/PessimisticToggleExample.jsx
+++ b/examples/src/js/PessimisticToggleExample.jsx
@@ -1,9 +1,17 @@
-import React from 'react';
-import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+import React, { useState } from 'react';
+import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 import { fileSystem as nodes } from './data';
 
+const initialTree = new TreeModel(nodes);
+
 function PessimisticToggleExample() {
+    const [tree, setTree] = useState(initialTree);
+
+    const onChange = (newTree) => {
+        setTree(newTree);
+    };
+
     const onCheck = (changedNodeKey, newTree) => {
         const changedNode = newTree.getNode(changedNodeKey);
         console.log(`changed node = ${changedNode.label}`);
@@ -17,14 +25,13 @@ function PessimisticToggleExample() {
     };
 
     return (
-        <CheckboxTreeProvider>
-            <CheckboxTree
-                nodes={nodes}
-                optimisticToggle={false}
-                onCheck={onCheck}
-                onExpand={onExpand}
-            />
-        </CheckboxTreeProvider>
+        <CheckboxTree
+            optimisticToggle={false}
+            tree={tree}
+            onChange={onChange}
+            onCheck={onCheck}
+            onExpand={onExpand}
+        />
     );
 }
 
diff --git a/examples/src/js/RadioButtonExample.jsx b/examples/src/js/RadioButtonExample.jsx
index f21918aa..e616a807 100644
--- a/examples/src/js/RadioButtonExample.jsx
+++ b/examples/src/js/RadioButtonExample.jsx
@@ -1,9 +1,17 @@
-import React from 'react';
-import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+import React, { useState } from 'react';
+import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 import nodes from './data/mapLayerTree';
 
+const initialTree = new TreeModel(nodes);
+
 function RadioButtonExample() {
+    const [tree, setTree] = useState(initialTree);
+
+    const onChange = (newTree) => {
+        setTree(newTree);
+    };
+
     const onCheck = (changedNodeKey, newTree) => {
         const changedNode = newTree.getNode(changedNodeKey);
         console.log(`changed node = ${changedNode.label}`);
@@ -17,13 +25,12 @@ function RadioButtonExample() {
     };
 
     return (
-        <CheckboxTreeProvider>
-            <CheckboxTree
-                nodes={nodes}
-                onCheck={onCheck}
-                onExpand={onExpand}
-            />
-        </CheckboxTreeProvider>
+        <CheckboxTree
+            tree={tree}
+            onChange={onChange}
+            onCheck={onCheck}
+            onExpand={onExpand}
+        />
     );
 }
 
diff --git a/src/index.js b/src/index.js
index eee79534..da33c092 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
 import CheckboxTree from './js/CheckboxTree';
-import { CheckboxTreeProvider, useCheckboxTree } from './js/CheckboxTreeContext';
 import TreeModel from './js/models/TreeModel';
 
 export default CheckboxTree;
-export { CheckboxTreeProvider, useCheckboxTree, TreeModel };
+export { TreeModel };
diff --git a/src/js/CheckboxTree.jsx b/src/js/CheckboxTree.jsx
index 6eff4b54..fbb486e1 100644
--- a/src/js/CheckboxTree.jsx
+++ b/src/js/CheckboxTree.jsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 // import isEqual from 'lodash/isEqual';
 import memoize from 'lodash/memoize';
 import PropTypes from 'prop-types';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useEffect } from 'react';
 
 // import CheckboxTreeError from './CheckboxTreeError';
 
@@ -15,11 +15,10 @@ import defaultLang from './lang/default';
 import iconsShape from './shapes/iconsShape';
 import languageShape from './shapes/languageShape';
 // import listShape from './shapes/listShape';
-import nodeShape from './shapes/nodeShape';
+// import nodeShape from './shapes/nodeShape';
 // import treeShape from './shapes/treeShape';
 import { KEYS } from './constants';
 import { IconContext, LanguageContext } from './contexts';
-import { useCheckboxTree } from './CheckboxTreeContext';
 
 const combineMemoized = memoize((newValue, defaultValue) => ({ ...defaultValue, ...newValue }));
 
@@ -39,7 +38,8 @@ const defaultIcons = {
 };
 
 const propTypes = {
-    nodes: PropTypes.arrayOf(nodeShape).isRequired,
+    tree: PropTypes.instanceOf(TreeModel).isRequired,
+    onChange: PropTypes.func.isRequired,
 
     LabelComponent: PropTypes.func,
     LeafLabelComponent: PropTypes.func,
@@ -117,10 +117,11 @@ export default function CheckboxTree({
     name,
     nameAsArray,
     nativeCheckboxes,
-    nodes,
     showExpandAll,
+    tree,
     checkKeys,
     expandOnClick,
+    onChange,
     onCheck,
     onClick,
     onContextMenu,
@@ -144,59 +145,43 @@ export default function CheckboxTree({
     const mergedIcons = combineMemoized(icons, defaultIcons);
 
     // save nodes prop to check for new value in useEffect
-    const [prevNodes, setPreviousNodes] = useState();
-    // get the treeModel from CheckboxTreeProvider
-    const { treeModel, setTreeModel } = useCheckboxTree();
+    // const [prevNodes, setPreviousNodes] = useState();
+
     // bundle props passed to TreeModel
-    const treeModelOptions = useMemo(() => ({
+    // TODO: how should these be added to TreeModel??????
+    const treeOptions = useMemo(() => ({
         checkModel,
-        disabled,
         noCascadeChecks,
         noCascadeDisabled,
         optimisticToggle,
-        setTreeModel,
     }), [
         checkModel,
-        disabled,
         noCascadeChecks,
         noCascadeDisabled,
         optimisticToggle,
-        setTreeModel,
     ]);
 
-    //--------------------------------------------------------------------------
-    useEffect(() => {
-        if (!treeModel || nodes !== prevNodes) {
-            // initial setup or change of nodes prop
-            // convert the inital tree state into a TreeModel and store in context
-            const newTreeModel = new TreeModel(nodes, treeModelOptions);
-            setPreviousNodes(nodes);
-            setTreeModel(newTreeModel);
-        } else if (treeModel && treeModelOptions !== treeModel.options) {
-            // change of options revelant to TreeModel
-            const newTreeModel = treeModel.clone();
-            newTreeModel.options = treeModelOptions;
-            setTreeModel(newTreeModel);
-        }
-    }, [
-        nodes,
-        prevNodes,
-        setTreeModel,
-        treeModel,
-        treeModelOptions,
-    ]);
+    // insert or update options in tree
+    tree.updateOptions(treeOptions);
+
     //--------------------------------------------------------------------------
 
-    // there is no treeModel until first useEffect above is run
-    if (!(treeModel instanceof TreeModel)) {
+    // TODO: this may not be needed as TreeModel is required
+    // should throw error?
+    if (!(tree instanceof TreeModel)) {
         return null;
     }
 
     //--------------------------------------------------------------------------
     // methods
 
+    // TODO: is this needed?
+    const onChangeHandler = () => {
+
+    }
+
     const onCheckHandler = (nodeKey) => {
-        const newTreeModel = treeModel.toggleChecked(nodeKey);
+        const newTreeModel = tree.toggleChecked(nodeKey);
 
         // TODO: should toggleChecked return false if no change??
         // probably...
@@ -204,16 +189,16 @@ export default function CheckboxTree({
         // toggleChecked returns original treeModel if the check is not
         // changed due to being disabled or being an already checked
         // radio node so we ignore the check change attempt
-        if (newTreeModel !== treeModel) {
-            setTreeModel(newTreeModel);
+        if (newTreeModel !== tree) {
             onCheck(nodeKey, newTreeModel);
+            onChange(newTreeModel);
         }
     };
 
     const onCollapseAll = () => {
-        const newTreeModel = treeModel.expandAllNodes(false);
-        onExpand('', newTreeModel);
-        setTreeModel(newTreeModel);
+        const newTreeModel = tree.expandAllNodes(false);
+        // onExpand('', newTreeModel);
+        onChange(newTreeModel);
     };
 
     const onContextMenuHandler = (node) => (event) => {
@@ -223,27 +208,28 @@ export default function CheckboxTree({
     };
 
     const onExpandHandler = (nodeKey) => {
-        const newTreeModel = treeModel.toggleExpanded(nodeKey);
-        setTreeModel(newTreeModel);
+        const newTreeModel = tree.toggleExpanded(nodeKey);
         onExpand(nodeKey, newTreeModel);
+        onChange(newTreeModel);
     };
 
     const onExpandAll = () => {
         if (!expandDisabled) {
-            const newTreeModel = treeModel.expandAllNodes(true);
-            setTreeModel(newTreeModel);
-            onExpand('', newTreeModel);
+            const newTreeModel = tree.expandAllNodes(true);
+            // onExpand('', newTreeModel);
+            onChange(newTreeModel);
         }
     };
 
     const onNodeClick = (nodeKey) => {
-        onClick(nodeKey, treeModel);
+        onClick(nodeKey, tree);
     };
 
     const renderTreeNodes = (childKeys, ancestorDisabled = false) => {
         const treeNodes = childKeys.map((nodeKey) => {
-            const node = treeModel.getNode(nodeKey);
-            const parent = node.parentKey ? treeModel.getNode(node.parentKey) : null;
+            const node = tree.getNode(nodeKey);
+
+            const parent = node.parentKey ? tree.getNode(node.parentKey) : null;
 
             // render only if not marked hidden by filter or
             // if parent is expanded or if there is no parent
@@ -312,7 +298,7 @@ export default function CheckboxTree({
 
     //--------------------------------------------------------------------------
     // render CheckboxTree
-    const treeNodes = renderTreeNodes(treeModel.rootKeys);
+    const treeNodes = renderTreeNodes(tree.rootKeys);
 
     const className = classNames({
         'react-checkbox-tree': true,
@@ -336,7 +322,7 @@ export default function CheckboxTree({
 
                     {name !== undefined ? (
                         <HiddenInput
-                            checked={treeModel.getChecked()}
+                            checked={tree.getChecked()}
                             name={name}
                             nameAsArray={nameAsArray}
                         />
diff --git a/src/js/CheckboxTreeContext.jsx b/src/js/CheckboxTreeContext.jsx
deleted file mode 100644
index 250f9b4a..00000000
--- a/src/js/CheckboxTreeContext.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, {
-    createContext,
-    useContext,
-    useMemo,
-    useState,
-} from 'react';
-import PropTypes from 'prop-types';
-
-const CheckboxTreeContext = createContext();
-
-export function CheckboxTreeProvider({ children }) {
-    const [treeModel, setTreeModel] = useState();
-
-    const value = useMemo(() => ({ treeModel, setTreeModel }), [treeModel, setTreeModel]);
-    return (
-        <CheckboxTreeContext.Provider value={value}>
-            {children}
-        </CheckboxTreeContext.Provider>
-    );
-}
-
-export const useCheckboxTree = () => {
-    const value = useContext(CheckboxTreeContext);
-    if (value === undefined) {
-        throw new Error('useCheckboxTree must be used within a CheckboxTreeProvider');
-    }
-    return value;
-};
-
-CheckboxTreeProvider.propTypes = {
-    children: PropTypes.node,
-};
-CheckboxTreeProvider.defaultProps = {
-    children: null,
-};
diff --git a/src/js/models/TreeModel.js b/src/js/models/TreeModel.js
index 809600b2..78ad7ff7 100644
--- a/src/js/models/TreeModel.js
+++ b/src/js/models/TreeModel.js
@@ -76,6 +76,7 @@ class TreeModel {
                 this.nodes[key] = treeConfig.nodes[key];
             });
         } else {
+            // treeConfig is a nodeShape
             // these are options passed from CheckboxTree
             this.options = { ...options };
 
@@ -90,6 +91,7 @@ class TreeModel {
             flatten(treeConfig);
 
             // at this point 'this' is a valid TreeModel and should be valid input for CheckboxTree
+            // console.log(this);
         }
     }
 
@@ -171,7 +173,6 @@ class TreeModel {
         };
 
         newTreeModel.rootKeys = newTreeModel.rootKeys.reduce(filterNodes, []);
-        this.options.setTreeModel(newTreeModel);
         return newTreeModel;
     }
 
@@ -457,6 +458,10 @@ class TreeModel {
         });
     }
 
+    updateOptions(newOptions) {
+        this.options = { ...this.options, ...newOptions };
+    }
+
     //--------------------------------------------------------------------------
     // TODO: these functions need review
 
diff --git a/test/CheckboxTree.jsx b/test/CheckboxTree.jsx
index 7cd38b2b..c3f5f968 100644
--- a/test/CheckboxTree.jsx
+++ b/test/CheckboxTree.jsx
@@ -6,26 +6,35 @@ import userEvent from '@testing-library/user-event';
 
 import CheckboxTree from '../src/js/CheckboxTree';
 // import CheckboxTreeError from '../src/js/CheckboxTreeError';
-import { CheckboxTreeProvider } from '../src/js/CheckboxTreeContext';
 import TreeModel from '../src/js/models/TreeModel';
 import TreeModelError from '../src/js/models/TreeModelError';
 
 const consoleError = console.error;
-/*
+
 const test1 = [
+    {
+        label: 'Saturn',
+        value: 'saturn',
+    },
+];
+
+const test2 = [
     {
         label: 'Jupiter',
         value: 'jupiter',
+        expanded: true,
         children: [
-            { value: 'io', label: 'Io', checked: true },
+            { value: 'io', label: 'Io' },
             { value: 'europa', label: 'Europa' },
         ],
     }, {
         label: 'Saturn',
         value: 'saturn',
+        checked: true,
+        expanded: true,
         children: [
-            { value: ' titan', label: ' Titan', checked: true },
-            { value: ' enceladus', label: ' Enceladus', checked: true },
+            { value: 'titan', label: 'Titan', checked: true },
+            { value: 'enceladus', label: 'Enceladus', checked: true },
         ],
     }, {
         label: 'Earth',
@@ -36,16 +45,34 @@ const test1 = [
     },
 ];
 
-const test2 = [
+const test3 = [
     {
         label: 'Earth',
         value: 'earth',
+        expanded: true,
         children: [
             { value: 'moon', label: 'Moon' },
         ],
     },
 ];
-*/
+
+const test4 = [
+    {
+        label: 'Saturn',
+        value: 'saturn',
+        expanded: true,
+        children: [
+            { value: 'titan', label: 'Titan' },
+            { value: 'enceladus', label: 'Enceladus' },
+        ],
+    },
+];
+
+const tree1 = new TreeModel(test1);
+const tree2 = new TreeModel(test2);
+const tree3 = new TreeModel(test3);
+const tree4 = new TreeModel(test4);
+
 // Increase waitFor timeout to prevent unusual issues when there are many tests
 configure({
     asyncUtilTimeout: 10000,
@@ -55,48 +82,30 @@ describe('<CheckboxTree />', () => {
     describe('component', () => {
         it('should render the react-checkbox-tree container', () => {
             const { container } = render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree nodes={[]} />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree1}
+                    onChange={() => {}}
+                />,
             );
 
             assert.isNotNull(container.querySelector('.react-checkbox-tree'));
         });
 
-        it('should rerender using the nodes prop if that prop has changed', () => {
+        it('should rerender using the tree prop if that prop has changed', () => {
             const { rerender } = render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                label: 'Jupiter',
-                                value: 'jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io', checked: true },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree2}
+                    onChange={() => {}}
+                />,
             );
 
             assert.isNotNull(screen.queryByLabelText('Jupiter'));
 
             rerender(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                label: 'Earth',
-                                value: 'earth',
-                                children: [
-                                    { value: 'moon', label: 'Moon' },
-                                ],
-                            },
-                        ]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree3}
+                    onChange={() => {}}
+                />,
             );
 
             assert.isNull(screen.queryByLabelText('Jupiter'));
@@ -106,111 +115,73 @@ describe('<CheckboxTree />', () => {
 
     describe('checkModel', () => {
         describe('all', () => {
-            it('should record checked parent and leaf nodes', async () => {
+            it('should return checked parent and leaf nodes', async () => {
                 let actual = null;
+                let tree = tree2;
 
                 render(
-                    <CheckboxTreeProvider>
-                        <CheckboxTree
-                            checkModel="all"
-                            nodes={[
-                                {
-                                    value: 'jupiter',
-                                    label: 'Jupiter',
-                                    children: [
-                                        { value: 'io', label: 'Io' },
-                                        { value: 'europa', label: 'Europa' },
-                                    ],
-                                },
-                            ]}
-                            onCheck={(nodeKey, treeModel) => {
-                                actual = treeModel.getChecked();
-                            }}
-                        />
-                    </CheckboxTreeProvider>,
+                    <CheckboxTree
+                        checkModel="all"
+                        tree={tree}
+                        onChange={(newTree) => {
+                            tree = newTree;
+                        }}
+                        onCheck={(nodeKey, newTree) => {
+                            actual = newTree.getChecked();
+                        }}
+                    />,
                 );
 
                 const user = userEvent.setup();
                 await user.click(screen.getByLabelText('Jupiter'));
 
-                assert.deepEqual(actual, ['jupiter', 'io', 'europa']);
+                assert.deepEqual(actual, ['jupiter', 'io', 'europa', 'saturn', 'titan', 'enceladus']);
             });
 
             it('should percolate `checked` to all parents and grandparents if all leaves are checked', async () => {
+                // TODO: this needs a deeper test
                 let actual = null;
+                let tree = tree3;
 
                 render(
-                    <CheckboxTreeProvider>
-                        <CheckboxTree
-                            checkModel="all"
-                            nodes={[
-                                {
-                                    value: 'sol',
-                                    label: 'Sol System',
-                                    expanded: true,
-                                    children: [
-                                        {
-                                            value: 'mercury',
-                                            label: 'Mercury',
-                                            checked: true,
-                                        },
-                                        {
-                                            value: 'jupiter',
-                                            label: 'Jupiter',
-                                            expanded: true,
-                                            children: [
-                                                {
-                                                    value: 'io',
-                                                    label: 'Io',
-                                                    checked: true,
-                                                },
-                                                { value: 'europa', label: 'Europa' },
-                                            ],
-                                        },
-                                    ],
-                                },
-                            ]}
-                            onCheck={(nodeKey, treeModel) => {
-                                actual = treeModel.getChecked();
-                            }}
-                        />
-                    </CheckboxTreeProvider>,
+                    <CheckboxTree
+                        checkModel="all"
+                        tree={tree}
+                        onChange={(newTree) => {
+                            tree = newTree;
+                        }}
+                        onCheck={(nodeKey, treeModel) => {
+                            actual = treeModel.getChecked();
+                        }}
+                    />,
                 );
 
                 const user = userEvent.setup();
-                await user.click(screen.getByLabelText('Europa'));
+                await user.click(screen.getByLabelText('Moon'));
 
-                assert.deepEqual(actual, ['sol', 'mercury', 'jupiter', 'io', 'europa']);
+                assert.deepEqual(actual, ['earth', 'moon']);
             });
 
             it('parent.checkState should equal 2 if not all leaves are checked', async () => {
                 let actual = null;
+                let tree = tree4;
 
                 render(
-                    <CheckboxTreeProvider>
-                        <CheckboxTree
-                            checkModel="all"
-                            nodes={[
-                                {
-                                    value: 'jupiter',
-                                    label: 'Jupiter',
-                                    expanded: true,
-                                    children: [
-                                        { value: 'io', label: 'Io' },
-                                        { value: 'europa', label: 'Europa' },
-                                    ],
-                                },
-                            ]}
-                            onCheck={(nodeKey, treeModel) => {
-                                const node = treeModel.getNode('jupiter');
-                                actual = node.checkState;
-                            }}
-                        />
-                    </CheckboxTreeProvider>,
+                    <CheckboxTree
+                        checkModel="all"
+                        tree={tree}
+                        onChange={(newTree) => {
+                            tree = newTree;
+                        }}
+                        onCheck={(nodeKey, treeModel) => {
+                            const node = treeModel.getNode('saturn');
+                            actual = node.checkState;
+                        }}
+                    />,
                 );
 
                 const user = userEvent.setup();
-                await user.click(screen.getByLabelText('Europa'));
+                await user.click(screen.getByLabelText('Enceladus'));
 
                 assert.equal(actual, 2);
             });
@@ -219,31 +190,24 @@ describe('<CheckboxTree />', () => {
         describe('leaf', () => {
             it('should only record leaf nodes in the checked array', async () => {
                 let actual = null;
+                let tree = tree2;
 
                 render(
-                    <CheckboxTreeProvider>
-                        <CheckboxTree
-                            nodes={[
-                                {
-                                    value: 'jupiter',
-                                    label: 'Jupiter',
-                                    children: [
-                                        { value: 'io', label: 'Io' },
-                                        { value: 'europa', label: 'Europa' },
-                                    ],
-                                },
-                            ]}
-                            onCheck={(nodeKey, treeModel) => {
-                                actual = treeModel.getChecked();
-                            }}
-                        />
-                    </CheckboxTreeProvider>,
+                    <CheckboxTree
+                        tree={tree}
+                        onChange={(newTree) => {
+                            tree = newTree;
+                        }}
+                        onCheck={(nodeKey, newTree) => {
+                            actual = newTree.getChecked();
+                        }}
+                    />,
                 );
 
                 const user = userEvent.setup();
                 await user.click(screen.getByLabelText('Jupiter'));
 
-                assert.deepEqual(actual, ['io', 'europa']);
+                assert.deepEqual(actual, ['io', 'europa', 'titan', 'enceladus']);
             });
         });
     });
@@ -251,35 +215,39 @@ describe('<CheckboxTree />', () => {
     describe('checkKeys', () => {
         it('should trigger a check event when pressing one of the supplied values', async () => {
             let actual = null;
+            let tree = tree1;
 
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        checkKeys={['Shift']}
-                        checked={[]}
-                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                        onCheck={(nodeKey, treeModel) => {
-                            actual = treeModel.getChecked();
-                        }}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    checkKeys={['Shift']}
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onCheck={(nodeKey, treeModel) => {
+                        actual = treeModel.getChecked();
+                    }}
+                />,
             );
 
             await fireEvent.keyUp(screen.getByRole('checkbox'), { key: 'Shift' });
 
-            assert.deepEqual(actual, ['jupiter']);
+            assert.deepEqual(actual, ['saturn']);
         });
     });
 
     describe('direction', () => {
         it('should add the class rct-direction-rtl to the root when set to `rtl`', () => {
+            let tree = tree1;
+
             const { container } = render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        direction="rtl"
-                        nodes={[]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    direction="rtl"
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.isNotNull(container.querySelector('.react-checkbox-tree.rct-direction-rtl'));
@@ -288,13 +256,16 @@ describe('<CheckboxTree />', () => {
 
     describe('disabled', () => {
         it('should add the class rct-disabled to the root', () => {
+            let tree = tree1;
+
             const { container } = render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        disabled
-                        nodes={[]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    disabled
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.isNotNull(container.querySelector('.react-checkbox-tree.rct-disabled'));
@@ -303,50 +274,46 @@ describe('<CheckboxTree />', () => {
 
     describe('icons', () => {
         it('should pass the property directly to tree nodes', () => {
+            let tree = tree1;
+            tree = tree.toggleChecked('saturn');
             const { container } = render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        icons={{ check: <span className="other-check" /> }}
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                checked: true,
-                            },
-                        ]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    icons={{ check: <span className="other-check" /> }}
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.isNotNull(container.querySelector('.rct-checkbox > .other-check'));
         });
 
         it('should be merged in with the defaults when keys are missing', () => {
+            let tree = tree1;
             const { container } = render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        icons={{ check: <span className="other-check" /> }}
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                            },
-                        ]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    icons={{ check: <span className="other-check" /> }}
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.isNotNull(container.querySelector('.rct-checkbox > .rct-icon-uncheck'));
         });
 
         it('should not render the wrapper element when an icon is set to null', () => {
+            let tree = tree1;
             const { container } = render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        icons={{ leaf: null }}
-                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    icons={{ leaf: null }}
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.isNull(container.querySelector('.rct-node-icon'));
@@ -355,13 +322,15 @@ describe('<CheckboxTree />', () => {
 
     describe('iconsClass', () => {
         it('should apply the specified icon style to the tree', () => {
+            let tree = tree1;
             const { container } = render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        iconsClass="some-class"
-                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    iconsClass="some-class"
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.isTrue(container.querySelector('.react-checkbox-tree').classList.contains('rct-icons-some-class'));
@@ -370,47 +339,53 @@ describe('<CheckboxTree />', () => {
 
     describe('id', () => {
         it('should pass the id to the top-level DOM node', () => {
+            let tree = tree1;
             const { container } = render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        id="my-awesome-id"
-                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    id="my-awesome-id"
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.equal(container.querySelector('.react-checkbox-tree').id, 'my-awesome-id');
         });
 
         it('should pass the id as a property directly to tree nodes', () => {
+            let tree = tree1;
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        id="my-awesome-id"
-                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    id="my-awesome-id"
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
-            assert.equal(screen.getByRole('checkbox').id, 'my-awesome-id-jupiter');
+            assert.equal(screen.getByRole('checkbox').id, 'my-awesome-id-saturn');
         });
     });
 
     describe('lang', () => {
         it('should override default language values', () => {
+            let tree = tree1;
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        lang={{
-                            expandAll: 'Expand all of it',
-                            expandNode: 'Expand it',
-                            collapseAll: 'Collapse all of it',
-                            collapseNode: 'Collapse it',
-                        }}
-                        nodes={[]}
-                        showExpandAll
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    lang={{
+                        expandAll: 'Expand all of it',
+                        expandNode: 'Expand it',
+                        collapseAll: 'Collapse all of it',
+                        collapseNode: 'Collapse it',
+                    }}
+                    showExpandAll
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.isNotNull(screen.queryByLabelText('Expand all of it'));
@@ -419,10 +394,15 @@ describe('<CheckboxTree />', () => {
 
     describe('nativeCheckboxes', () => {
         it('should add the class `rct-native-display` to the root', () => {
+            let tree = tree1;
             const { container } = render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree nativeCheckboxes nodes={[]} />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    nativeCheckboxes
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.isNotNull(container.querySelector('.react-checkbox-tree.rct-native-display'));
@@ -436,41 +416,44 @@ describe('<CheckboxTree />', () => {
         });
 
         it('should render the node\'s label', () => {
+            let tree = tree1;
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
-            assert.isNotNull(screen.queryByLabelText('Jupiter'));
+            assert.isNotNull(screen.queryByLabelText('Saturn'));
         });
 
         it('should render the node\'s value', () => {
+            let tree = tree1;
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        id="id"
-                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    id="id"
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
-            assert.equal(screen.getByRole('checkbox').id, 'id-jupiter');
+            assert.equal(screen.getByRole('checkbox').id, 'id-saturn');
         });
 
         it('should render multiple nodes', () => {
+            let tree = tree2;
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        id="id"
-                        nodes={[
-                            { value: 'jupiter', label: 'Jupiter' },
-                            { value: 'saturn', label: 'Saturn' },
-                        ]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    id="id"
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.equal(screen.getByLabelText('Jupiter').id, 'id-jupiter');
@@ -478,22 +461,14 @@ describe('<CheckboxTree />', () => {
         });
 
         it('should render child nodes', () => {
+            let tree = tree2;
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                expanded: true,
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.isNotNull(screen.queryByLabelText('Io'));
@@ -501,14 +476,14 @@ describe('<CheckboxTree />', () => {
         });
 
         it('should render a node with no `children` array as a leaf', () => {
+            let tree = tree1;
             const { container } = render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            { value: 'jupiter', label: 'Jupiter' },
-                        ]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             const { classList } = container.querySelector('.rct-node');
@@ -518,18 +493,21 @@ describe('<CheckboxTree />', () => {
         });
 
         it('should render a node with an empty `children` array as a parent', () => {
+            let tree = new TreeModel([
+                {
+                    value: 'jupiter',
+                    label: 'Jupiter',
+                    children: [],
+                },
+            ]);
+
             const { container } = render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [],
-                            },
-                        ]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             const { classList } = container.querySelector('.rct-node');
@@ -540,18 +518,21 @@ describe('<CheckboxTree />', () => {
 
         // https://github.com/jakezatecky/react-checkbox-tree/issues/258
         it('should render a node with an empty `children` array as unchecked by default', () => {
+            let tree = new TreeModel([
+                {
+                    value: 'jupiter',
+                    label: 'Jupiter',
+                    children: [],
+                },
+            ]);
+
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [],
-                            },
-                        ]}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.isFalse(screen.getByRole('checkbox').checked);
@@ -564,22 +545,25 @@ describe('<CheckboxTree />', () => {
             let errorMessage = '';
 
             try {
+                let tree = new TreeModel([
+                    {
+                        value: 'jupiter',
+                        label: 'Jupiter',
+                        expanded: true,
+                        children: [
+                            { value: 'io', label: 'Io' },
+                            { value: 'io', label: 'Europa' },
+                        ],
+                    },
+                ]);
+
                 render(
-                    <CheckboxTreeProvider>
-                        <CheckboxTree
-                            nodes={[
-                                {
-                                    value: 'jupiter',
-                                    label: 'Jupiter',
-                                    expanded: true,
-                                    children: [
-                                        { value: 'io', label: 'Io' },
-                                        { value: 'io', label: 'Europa' },
-                                    ],
-                                },
-                            ]}
-                        />
-                    </CheckboxTreeProvider>,
+                    <CheckboxTree
+                        tree={tree}
+                        onChange={(newTree) => {
+                            tree = newTree;
+                        }}
+                    />,
                 );
             } catch (e) {
                 if (e instanceof TreeModelError) {
@@ -599,20 +583,23 @@ describe('<CheckboxTree />', () => {
             let errorMessage = '';
 
             try {
+                let tree = new TreeModel([
+                    {
+                        value: 'jupiter',
+                        label: 'Jupiter',
+                        children: [
+                            { value: 'jupiter', label: 'Jupiter' },
+                        ],
+                    },
+                ]);
+
                 render(
-                    <CheckboxTreeProvider>
-                        <CheckboxTree
-                            nodes={[
-                                {
-                                    value: 'jupiter',
-                                    label: 'Jupiter',
-                                    children: [
-                                        { value: 'jupiter', label: 'Jupiter' },
-                                    ],
-                                },
-                            ]}
-                        />
-                    </CheckboxTreeProvider>,
+                    <CheckboxTree
+                        tree={tree}
+                        onChange={(newTree) => {
+                            tree = newTree;
+                        }}
+                    />,
                 );
             } catch (e) {
                 if (e instanceof TreeModelError) {
@@ -629,128 +616,124 @@ describe('<CheckboxTree />', () => {
     describe('noCascadeChecks', () => {
         it('should not toggle the check state of children when set to true', async () => {
             let actual = null;
+            let tree = tree4;
 
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        checkModel="all"
-                        noCascadeChecks
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onCheck={(nodeKey, treeModel) => {
-                            actual = treeModel.getChecked();
-                        }}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    checkModel="all"
+                    noCascadeChecks
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onCheck={(nodeKey, treeModel) => {
+                        actual = treeModel.getChecked();
+                    }}
+                />,
             );
 
             const user = userEvent.setup();
-            await user.click(screen.getByLabelText('Jupiter'));
+            await user.click(screen.getByLabelText('Saturn'));
 
-            assert.deepEqual(actual, ['jupiter']);
+            assert.deepEqual(actual, ['saturn']);
         });
 
         it('should toggle the check state of children when set to false', async () => {
             let actual = null;
+            let tree = tree4;
 
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onCheck={(nodeKey, treeModel) => {
-                            actual = treeModel.getChecked();
-                        }}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onCheck={(nodeKey, treeModel) => {
+                        actual = treeModel.getChecked();
+                    }}
+                />,
             );
 
             const user = userEvent.setup();
-            await user.click(screen.getByLabelText('Jupiter'));
+            await user.click(screen.getByLabelText('Saturn'));
 
-            assert.deepEqual(actual, ['io', 'europa']);
+            assert.deepEqual(actual, ['titan', 'enceladus']);
         });
     });
 
     describe('nodeProps', () => {
         describe('disabled', () => {
             it('should disable the target node when set to true', () => {
+                let tree = new TreeModel([
+                    {
+                        value: 'jupiter',
+                        label: 'Jupiter',
+                        disabled: true,
+                        children: [
+                            { value: 'europa', label: 'Europa' },
+                        ],
+                    },
+                ]);
+
                 render(
-                    <CheckboxTreeProvider>
-                        <CheckboxTree
-                            nodes={[
-                                {
-                                    value: 'jupiter',
-                                    label: 'Jupiter',
-                                    disabled: true,
-                                    children: [
-                                        { value: 'europa', label: 'Europa' },
-                                    ],
-                                },
-                            ]}
-                        />
-                    </CheckboxTreeProvider>,
+                    <CheckboxTree
+                        tree={tree}
+                        onChange={(newTree) => {
+                            tree = newTree;
+                        }}
+                    />,
                 );
 
                 assert.isTrue(screen.getByLabelText('Jupiter').disabled);
             });
 
             it('should disable the child nodes when `noCascadeDisabled` is false', () => {
+                let tree = new TreeModel([
+                    {
+                        value: 'jupiter',
+                        label: 'Jupiter',
+                        disabled: true,
+                        expanded: true,
+                        children: [
+                            { value: 'europa', label: 'Europa' },
+                        ],
+                    },
+                ]);
+
                 render(
-                    <CheckboxTreeProvider>
-                        <CheckboxTree
-                            nodes={[
-                                {
-                                    value: 'jupiter',
-                                    label: 'Jupiter',
-                                    disabled: true,
-                                    expanded: true,
-                                    children: [
-                                        { value: 'europa', label: 'Europa' },
-                                    ],
-                                },
-                            ]}
-                        />
-                    </CheckboxTreeProvider>,
+                    <CheckboxTree
+                        tree={tree}
+                        onChange={(newTree) => {
+                            tree = newTree;
+                        }}
+                    />,
                 );
 
                 assert.isTrue(screen.getByLabelText('Europa').disabled);
             });
 
             it('should NOT disable the child nodes when `noCascadeDisabled` is true', () => {
+                // TODO: figure out about TreeModel options
+                let tree = new TreeModel([
+                    {
+                        value: 'jupiter',
+                        label: 'Jupiter',
+                        disabled: true,
+                        expanded: true,
+                        children: [
+                            { value: 'europa', label: 'Europa' },
+                        ],
+                    },
+                ], { noCascadeDisabled: true });
+
                 render(
-                    <CheckboxTreeProvider>
-                        <CheckboxTree
-                            noCascadeDisabled
-                            nodes={[
-                                {
-                                    value: 'jupiter',
-                                    label: 'Jupiter',
-                                    disabled: true,
-                                    expanded: true,
-                                    children: [
-                                        { value: 'europa', label: 'Europa' },
-                                    ],
-                                },
-                            ]}
-                        />
-                    </CheckboxTreeProvider>,
+                    <CheckboxTree
+                        noCascadeDisabled
+                        tree={tree}
+                        onChange={(newTree) => {
+                            tree = newTree;
+                        }}
+                    />,
                 );
 
                 assert.isFalse(screen.getByLabelText('Europa').disabled);
@@ -758,7 +741,7 @@ describe('<CheckboxTree />', () => {
 
             // https://github.com/jakezatecky/react-checkbox-tree/issues/119
             it('should be able to change disabled state after the initial render', () => {
-                const nodes = [
+                let tree = new TreeModel([
                     {
                         value: 'jupiter',
                         label: 'Jupiter',
@@ -767,22 +750,25 @@ describe('<CheckboxTree />', () => {
                             { value: 'europa', label: 'Europa' },
                         ],
                     },
-                ];
+                ]);
+
                 const { rerender } = render(
-                    <CheckboxTreeProvider>
-                        <CheckboxTree
-                            disabled
-                            nodes={nodes}
-                        />
-                    </CheckboxTreeProvider>,
+                    <CheckboxTree
+                        disabled
+                        tree={tree}
+                        onChange={(newTree) => {
+                            tree = newTree;
+                        }}
+                    />,
                 );
 
                 rerender(
-                    <CheckboxTreeProvider>
-                        <CheckboxTree
-                            nodes={nodes}
-                        />
-                    </CheckboxTreeProvider>,
+                    <CheckboxTree
+                        tree={tree}
+                        onChange={(newTree) => {
+                            tree = newTree;
+                        }}
+                    />,
                 );
 
                 assert.isFalse(screen.getByLabelText('Europa').disabled);
@@ -792,24 +778,15 @@ describe('<CheckboxTree />', () => {
 
     describe('onlyLeafCheckboxes', () => {
         it('should only render checkboxes for leaf nodes', () => {
+            let tree = tree2;
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                expanded: true,
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onlyLeafCheckboxes
-                    />
-                </CheckboxTreeProvider>,
-
+                <CheckboxTree
+                    onlyLeafCheckboxes
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.isNull(screen.queryByLabelText('Jupiter'));
@@ -820,13 +797,16 @@ describe('<CheckboxTree />', () => {
 
     describe('showExpandAll', () => {
         it('should render the expand all/collapse all buttons', () => {
+            let tree = tree1;
+
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[{ value: 'jupiter', label: 'Jupiter' }]}
-                        showExpandAll
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    showExpandAll
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.isNotNull(screen.queryByLabelText('Expand all'));
@@ -836,43 +816,48 @@ describe('<CheckboxTree />', () => {
         describe('expandAll', () => {
             it('should add all parent nodes to the `expanded` array', async () => {
                 let actualExpanded = null;
+                let tree = new TreeModel([
+                    {
+                        value: 'mercury',
+                        label: 'Mercury',
+                    },
+                    {
+                        value: 'mars',
+                        label: 'Mars',
+                        children: [
+                            { value: 'phobos', label: 'Phobos' },
+                            { value: 'deimos', label: 'Deimos' },
+                        ],
+                    },
+                    {
+                        value: 'jupiter',
+                        label: 'Jupiter',
+                        children: [
+                            { value: 'io', label: 'Io' },
+                            { value: 'europa', label: 'Europa' },
+                        ],
+                    },
+                ]);
 
                 render(
-                    <CheckboxTreeProvider>
-                        <CheckboxTree
-                            nodes={[
-                                {
-                                    value: 'mercury',
-                                    label: 'Mercury',
-                                },
-                                {
-                                    value: 'mars',
-                                    label: 'Mars',
-                                    children: [
-                                        { value: 'phobos', label: 'Phobos' },
-                                        { value: 'deimos', label: 'Deimos' },
-                                    ],
-                                },
-                                {
-                                    value: 'jupiter',
-                                    label: 'Jupiter',
-                                    children: [
-                                        { value: 'io', label: 'Io' },
-                                        { value: 'europa', label: 'Europa' },
-                                    ],
-                                },
-                            ]}
-                            showExpandAll
-                            onExpand={(nodeKey, treeModel) => {
-                                actualExpanded = treeModel.getExpanded();
-                            }}
-                        />
-                    </CheckboxTreeProvider>,
+                    <CheckboxTree
+                        showExpandAll
+                        tree={tree}
+                        onChange={(newTree) => {
+                            tree = newTree;
+                        }}
+                        onExpand={(nodeKey, treeModel) => {
+                            actualExpanded = treeModel.getExpanded();
+                        }}
+                    />,
                 );
 
                 const user = userEvent.setup();
                 await user.click(screen.getByLabelText('Expand all'));
 
+                // TODO: onExpand is not called by expandAll
+                actualExpanded = tree.getExpanded();
+
                 assert.deepEqual(actualExpanded, ['mars', 'jupiter']);
             });
         });
@@ -880,44 +865,27 @@ describe('<CheckboxTree />', () => {
         describe('collapseAll', () => {
             it('should remove all nodes from the `expanded` array', async () => {
                 let actualExpanded = null;
+                let tree = tree2;
 
                 render(
-                    <CheckboxTreeProvider>
-                        <CheckboxTree
-                            expanded={['mars', 'jupiter']}
-                            nodes={[
-                                {
-                                    value: 'mercury',
-                                    label: 'Mercury',
-                                },
-                                {
-                                    value: 'mars',
-                                    label: 'Mars',
-                                    children: [
-                                        { value: 'phobos', label: 'Phobos' },
-                                        { value: 'deimos', label: 'Deimos' },
-                                    ],
-                                },
-                                {
-                                    value: 'jupiter',
-                                    label: 'Jupiter',
-                                    children: [
-                                        { value: 'io', label: 'Io' },
-                                        { value: 'europa', label: 'Europa' },
-                                    ],
-                                },
-                            ]}
-                            showExpandAll
-                            onExpand={(nodeKey, treeModel) => {
-                                actualExpanded = treeModel.getExpanded();
-                            }}
-                        />
-                    </CheckboxTreeProvider>,
+                    <CheckboxTree
+                        showExpandAll
+                        tree={tree}
+                        onChange={(newTree) => {
+                            tree = newTree;
+                        }}
+                        onExpand={(nodeKey, treeModel) => {
+                            actualExpanded = treeModel.getExpanded();
+                        }}
+                    />,
                 );
 
                 const user = userEvent.setup();
                 await user.click(screen.getByLabelText('Collapse all'));
 
+                // TODO: onExpand is not called by collapseAll
+                actualExpanded = tree.getExpanded();
+
                 assert.deepEqual(actualExpanded, []);
             });
         });
@@ -925,37 +893,38 @@ describe('<CheckboxTree />', () => {
 
     describe('showNodeTitle', () => {
         it('should add `title` properties to a TreeNode from the `label` property when set', () => {
+            let tree = tree1;
+
             const { container } = render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                            },
-                        ]}
-                        showNodeTitle
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    showNodeTitle
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
-            assert.equal(container.querySelector('label').title, 'Jupiter');
+            assert.equal(container.querySelector('label').title, 'Saturn');
         });
 
         it('should prioritize the node `title` over the `label', () => {
+            let tree = new TreeModel([
+                {
+                    value: 'jupiter',
+                    label: 'Jupiter',
+                    title: 'That Big Failed Star',
+                },
+            ]);
+
             const { container } = render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                title: 'That Big Failed Star',
-                            },
-                        ]}
-                        showNodeTitle
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    showNodeTitle
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                />,
             );
 
             assert.equal(container.querySelector('label').title, 'That Big Failed Star');
@@ -965,25 +934,27 @@ describe('<CheckboxTree />', () => {
     describe('onCheck', () => {
         it('should add all children of the checked parent to the checked array', async () => {
             let actualChecked = null;
+            let tree = new TreeModel([
+                {
+                    value: 'jupiter',
+                    label: 'Jupiter',
+                    children: [
+                        { value: 'io', label: 'Io' },
+                        { value: 'europa', label: 'Europa' },
+                    ],
+                },
+            ]);
 
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onCheck={(nodeKey, treeModel) => {
-                            actualChecked = treeModel.getChecked();
-                        }}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onCheck={(nodeKey, treeModel) => {
+                        actualChecked = treeModel.getChecked();
+                    }}
+                />,
             );
 
             const user = userEvent.setup();
@@ -994,65 +965,74 @@ describe('<CheckboxTree />', () => {
 
         // https://github.com/jakezatecky/react-checkbox-tree/issues/258
         it('should toggle a node with an empty `children` array', async () => {
-            let actualChecked = {};
-            const makeEmptyParentNode = (nodes) => (
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        checkModel="all"
-                        nodes={nodes}
-                        onCheck={(nodeKey, treeModel) => {
-                            actualChecked = treeModel.getChecked();
-                        }}
-                    />
-                </CheckboxTreeProvider>
-            );
-
-            const user = userEvent.setup();
-
-            // Unchecked to checked
-            const { rerender } = render(makeEmptyParentNode([
+            let actualChecked = [];
+            let tree = new TreeModel([
                 {
                     value: 'jupiter',
                     label: 'Jupiter',
                     children: [],
                 },
-            ]));
+            ]);
+
+            // Unchecked to checked
+            const { rerender } = render(
+                <CheckboxTree
+                    checkModel="all"
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onCheck={(nodeKey, treeModel) => {
+                        actualChecked = treeModel.getChecked();
+                    }}
+                />,
+            );
+
+            const user = userEvent.setup();
             await user.click(screen.getByRole('checkbox'));
+
             assert.deepEqual(actualChecked, ['jupiter']);
 
             // Checked to unchecked
-            rerender(makeEmptyParentNode([
-                {
-                    value: 'jupiter',
-                    label: 'Jupiter',
-                    checked: true,
-                    children: [],
-                },
-            ]));
+            rerender(
+                <CheckboxTree
+                    checkModel="all"
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onCheck={(nodeKey, treeModel) => {
+                        actualChecked = treeModel.getChecked();
+                    }}
+                />,
+            );
+
             await user.click(screen.getByRole('checkbox'));
             assert.deepEqual(actualChecked, []);
         });
 
         it('should not add disabled children to the checked array', async () => {
             let actualChecked = null;
+            let tree = new TreeModel([
+                {
+                    value: 'jupiter',
+                    label: 'Jupiter',
+                    children: [
+                        { value: 'io', label: 'Io', disabled: true },
+                        { value: 'europa', label: 'Europa' },
+                    ],
+                },
+            ]);
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io', disabled: true },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onCheck={(nodeKey, treeModel) => {
-                            actualChecked = treeModel.getChecked();
-                        }}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onCheck={(nodeKey, treeModel) => {
+                        actualChecked = treeModel.getChecked();
+                    }}
+                />,
             );
 
             const user = userEvent.setup();
@@ -1063,25 +1043,18 @@ describe('<CheckboxTree />', () => {
 
         it('should pass the node.value of the clicked node as the first parameter', async () => {
             let actual = '';
+            let tree = tree2;
 
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onCheck={(nodeKey) => {
-                            actual = nodeKey;
-                        }}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onCheck={(nodeKey) => {
+                        actual = nodeKey;
+                    }}
+                />,
             );
 
             const user = userEvent.setup();
@@ -1092,25 +1065,18 @@ describe('<CheckboxTree />', () => {
 
         it('should pass the TreeModel instance as the second parameter', async () => {
             let actual = false;
+            let tree = tree2;
 
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onCheck={(nodeKey, treeModel) => {
-                            actual = treeModel instanceof TreeModel;
-                        }}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onCheck={(nodeKey, treeModel) => {
+                        actual = treeModel instanceof TreeModel;
+                    }}
+                />,
             );
 
             const user = userEvent.setup();
@@ -1123,26 +1089,19 @@ describe('<CheckboxTree />', () => {
     describe('onClick', () => {
         it('should pass the nodeKey(node.value) of the node clicked as the first parameter', async () => {
             let actualNode = null;
+            let tree = tree2;
 
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onClick={(nodeKey, treeModel) => {
-                            const node = treeModel.getNode(nodeKey);
-                            actualNode = node;
-                        }}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onCheck={(nodeKey, treeModel) => {
+                        const node = treeModel.getNode(nodeKey);
+                        actualNode = node;
+                    }}
+                />,
             );
 
             const user = userEvent.setup();
@@ -1155,25 +1114,18 @@ describe('<CheckboxTree />', () => {
     describe('onContextMenu', () => {
         it('should provide the target node\'s information when right-clicking a label', async () => {
             let actualNode = null;
+            let tree = tree2;
 
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onContextMenu={(event, node) => {
-                            actualNode = node;
-                        }}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onContextMenu={(event, node) => {
+                        actualNode = node;
+                    }}
+                />,
             );
 
             const user = userEvent.setup();
@@ -1190,25 +1142,27 @@ describe('<CheckboxTree />', () => {
     describe('onExpand', () => {
         it('should toggle the expansion state of the target node', async () => {
             let actualExpanded = null;
+            let tree = new TreeModel([
+                {
+                    value: 'jupiter',
+                    label: 'Jupiter',
+                    children: [
+                        { value: 'io', label: 'Io' },
+                        { value: 'europa', label: 'Europa' },
+                    ],
+                },
+            ]);
 
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onExpand={(nodeKey, treeModel) => {
-                            actualExpanded = treeModel.getExpanded();
-                        }}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onExpand={(nodeKey, treeModel) => {
+                        actualExpanded = treeModel.getExpanded();
+                    }}
+                />,
             );
 
             const user = userEvent.setup();
@@ -1219,25 +1173,27 @@ describe('<CheckboxTree />', () => {
 
         it('should pass the node.value of the clicked node as the first parameter', async () => {
             let actual = '';
+            let tree = new TreeModel([
+                {
+                    value: 'jupiter',
+                    label: 'Jupiter',
+                    children: [
+                        { value: 'io', label: 'Io' },
+                        { value: 'europa', label: 'Europa' },
+                    ],
+                },
+            ]);
 
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onExpand={(nodeKey) => {
-                            actual = nodeKey;
-                        }}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onExpand={(nodeKey) => {
+                        actual = nodeKey;
+                    }}
+                />,
             );
 
             const user = userEvent.setup();
@@ -1248,25 +1204,27 @@ describe('<CheckboxTree />', () => {
 
         it('should pass the TreeModel instance as the second parameter', async () => {
             let actual = false;
+            let tree = new TreeModel([
+                {
+                    value: 'jupiter',
+                    label: 'Jupiter',
+                    children: [
+                        { value: 'io', label: 'Io' },
+                        { value: 'europa', label: 'Europa' },
+                    ],
+                },
+            ]);
 
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                children: [
-                                    { value: 'io', label: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onExpand={(nodeKey, treeModel) => {
-                            actual = treeModel instanceof TreeModel;
-                        }}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onExpand={(nodeKey, treeModel) => {
+                        actual = treeModel instanceof TreeModel;
+                    }}
+                />,
             );
 
             const user = userEvent.setup();
@@ -1281,6 +1239,17 @@ describe('<CheckboxTree />', () => {
             let checkNode = null;
             let expandNode = null;
             let clickNode = null;
+            let tree = new TreeModel([
+                {
+                    value: 'jupiter',
+                    label: 'Jupiter',
+                    expanded: true,
+                    children: [
+                        { value: 'io', label: 'Io', title: 'Io' },
+                        { value: 'europa', label: 'Europa' },
+                    ],
+                },
+            ]);
 
             const getNodeMetadata = (node) => {
                 const {
@@ -1325,32 +1294,25 @@ describe('<CheckboxTree />', () => {
                     treeDepth,
                 };
             };
+
             render(
-                <CheckboxTreeProvider>
-                    <CheckboxTree
-                        nodes={[
-                            {
-                                value: 'jupiter',
-                                label: 'Jupiter',
-                                expanded: true,
-                                children: [
-                                    { value: 'io', label: 'Io', title: 'Io' },
-                                    { value: 'europa', label: 'Europa' },
-                                ],
-                            },
-                        ]}
-                        onCheck={(nodeKey, treeModel) => {
-                            checkNode = treeModel.getNode(nodeKey);
-                        }}
-                        onClick={(nodeKey, treeModel) => {
-                            clickNode = treeModel.getNode(nodeKey);
-                        }}
-                        onExpand={(nodeKey, treeModel) => {
-                            expandNode = treeModel.getNode(nodeKey);
-                        }}
-                    />
-                </CheckboxTreeProvider>,
+                <CheckboxTree
+                    tree={tree}
+                    onChange={(newTree) => {
+                        tree = newTree;
+                    }}
+                    onCheck={(nodeKey, treeModel) => {
+                        checkNode = treeModel.getNode(nodeKey);
+                    }}
+                    onClick={(nodeKey, treeModel) => {
+                        clickNode = treeModel.getNode(nodeKey);
+                    }}
+                    onExpand={(nodeKey, treeModel) => {
+                        expandNode = treeModel.getNode(nodeKey);
+                    }}
+                />,
             );
+
             const expectedLeafMetadata = {
                 value: 'io',
                 label: 'Io',
@@ -1371,13 +1333,14 @@ describe('<CheckboxTree />', () => {
                 index: 0,
                 treeDepth: 1,
             };
+
             const expectedParentMetadata = {
                 value: 'jupiter',
                 label: 'Jupiter',
                 title: undefined,
                 childKeys: ['io', 'europa'],
                 expanded: false,
-                checkState: 2,
+                checkState: 0,
                 parentKey: '',
                 isChild: false,
                 isParent: true,
@@ -1396,10 +1359,16 @@ describe('<CheckboxTree />', () => {
 
             // onCheck
             await user.click(screen.getByTitle('Io'));
+
+            // first click makes checked true
+            expectedLeafMetadata.checkState = 1;
             assert.deepEqual(getNodeMetadata(checkNode), expectedLeafMetadata);
 
             // onClick
             await user.click(screen.getByText('Io'));
+            // second click makes checked false
+            expectedLeafMetadata.checkState = 0;
+
             assert.deepEqual(getNodeMetadata(clickNode), expectedLeafMetadata);
 
             // onExpand

From 5d2f8b05109fa79a12ed85ad50b1cae04bdb614f Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Thu, 29 Jun 2023 15:19:26 -0400
Subject: [PATCH 08/17] fix build errors

---
 src/js/CheckboxTree.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/js/CheckboxTree.jsx b/src/js/CheckboxTree.jsx
index fbb486e1..a15c4d4a 100644
--- a/src/js/CheckboxTree.jsx
+++ b/src/js/CheckboxTree.jsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 // import isEqual from 'lodash/isEqual';
 import memoize from 'lodash/memoize';
 import PropTypes from 'prop-types';
-import React, { useMemo, useEffect } from 'react';
+import React, { useMemo } from 'react';
 
 // import CheckboxTreeError from './CheckboxTreeError';
 
@@ -176,9 +176,11 @@ export default function CheckboxTree({
     // methods
 
     // TODO: is this needed?
+    /*
     const onChangeHandler = () => {
 
-    }
+    };
+    */
 
     const onCheckHandler = (nodeKey) => {
         const newTreeModel = tree.toggleChecked(nodeKey);

From f623d9094750d417c55e9b9244a6f8585f556b50 Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Fri, 30 Jun 2023 08:36:49 -0400
Subject: [PATCH 09/17] fix proptypes

---
 src/js/components/TreeNode.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/js/components/TreeNode.jsx b/src/js/components/TreeNode.jsx
index 2d445165..a0adfbc5 100644
--- a/src/js/components/TreeNode.jsx
+++ b/src/js/components/TreeNode.jsx
@@ -19,6 +19,7 @@ class TreeNode extends React.PureComponent {
         checkKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
         disabled: PropTypes.bool.isRequired,
         expandDisabled: PropTypes.bool.isRequired,
+        noCascadeChecks: PropTypes.bool.isRequired,
         node: PropTypes.instanceOf(NodeModel).isRequired,
         showNodeIcon: PropTypes.bool.isRequired,
         onCheck: PropTypes.func.isRequired,
@@ -29,7 +30,6 @@ class TreeNode extends React.PureComponent {
         ParentLabelComponent: PropTypes.func,
         children: PropTypes.node,
         expandOnClick: PropTypes.bool,
-        noCascadeChecks: PropTypes.bool,
         showCheckbox: PropTypes.bool,
         showNodeTitle: PropTypes.bool,
         treeId: PropTypes.string,
@@ -46,7 +46,6 @@ class TreeNode extends React.PureComponent {
         LabelComponent: null,
         LeafLabelComponent: null,
         ParentLabelComponent: null,
-        noCascadeChecks: false,
         showCheckbox: true,
         showNodeTitle: false,
         treeId: null,

From 903ada78c026599f4d9af0f1b48274b1727408fc Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Fri, 30 Jun 2023 08:42:15 -0400
Subject: [PATCH 10/17] variable name cleanup - newTreeModel -> newTree

---
 src/js/CheckboxTree.jsx    | 28 ++++++-------
 src/js/models/TreeModel.js | 84 +++++++++++++++++++-------------------
 2 files changed, 55 insertions(+), 57 deletions(-)

diff --git a/src/js/CheckboxTree.jsx b/src/js/CheckboxTree.jsx
index a15c4d4a..637def88 100644
--- a/src/js/CheckboxTree.jsx
+++ b/src/js/CheckboxTree.jsx
@@ -183,24 +183,24 @@ export default function CheckboxTree({
     */
 
     const onCheckHandler = (nodeKey) => {
-        const newTreeModel = tree.toggleChecked(nodeKey);
+        const newTree = tree.toggleChecked(nodeKey);
 
         // TODO: should toggleChecked return false if no change??
         // probably...
 
-        // toggleChecked returns original treeModel if the check is not
+        // toggleChecked returns original tree if the check is not
         // changed due to being disabled or being an already checked
         // radio node so we ignore the check change attempt
-        if (newTreeModel !== tree) {
-            onCheck(nodeKey, newTreeModel);
-            onChange(newTreeModel);
+        if (newTree !== tree) {
+            onCheck(nodeKey, newTree);
+            onChange(newTree);
         }
     };
 
     const onCollapseAll = () => {
-        const newTreeModel = tree.expandAllNodes(false);
-        // onExpand('', newTreeModel);
-        onChange(newTreeModel);
+        const newTree = tree.expandAllNodes(false);
+        // onExpand('', newTree);
+        onChange(newTree);
     };
 
     const onContextMenuHandler = (node) => (event) => {
@@ -210,16 +210,16 @@ export default function CheckboxTree({
     };
 
     const onExpandHandler = (nodeKey) => {
-        const newTreeModel = tree.toggleExpanded(nodeKey);
-        onExpand(nodeKey, newTreeModel);
-        onChange(newTreeModel);
+        const newTree = tree.toggleExpanded(nodeKey);
+        onExpand(nodeKey, newTree);
+        onChange(newTree);
     };
 
     const onExpandAll = () => {
         if (!expandDisabled) {
-            const newTreeModel = tree.expandAllNodes(true);
-            // onExpand('', newTreeModel);
-            onChange(newTreeModel);
+            const newTree = tree.expandAllNodes(true);
+            // onExpand('', newTree);
+            onChange(newTree);
         }
     };
 
diff --git a/src/js/models/TreeModel.js b/src/js/models/TreeModel.js
index 78ad7ff7..39e63688 100644
--- a/src/js/models/TreeModel.js
+++ b/src/js/models/TreeModel.js
@@ -104,15 +104,15 @@ class TreeModel {
     }
 
     expandAllNodes(expandValue = true) {
-        const newTreeModel = this.clone();
-        Object.keys(newTreeModel.nodes).forEach((key) => {
+        const newTree = this.clone();
+        Object.keys(newTree.nodes).forEach((key) => {
             const newNode = this.getNode(key);
             if (newNode.isParent) {
                 newNode.expanded = expandValue;
-                newTreeModel.nodes[key] = newNode;
+                newTree.nodes[key] = newNode;
             }
         });
-        return newTreeModel;
+        return newTree;
     }
 
     /**
@@ -123,24 +123,24 @@ class TreeModel {
      * @returns {TreeModel}
      */
     expandNodesToLevel(targetLevel) {
-        const newTreeModel = this.clone();
+        const newTree = this.clone();
 
         const expandLevels = (keys, currentLevel = 0) => {
             if (currentLevel > targetLevel) {
                 return;
             }
             keys.forEach((key) => {
-                const newNode = newTreeModel.getNode(key).clone();
+                const newNode = newTree.getNode(key).clone();
                 if (newNode.isParent) {
                     newNode.expanded = true;
-                    newTreeModel.nodes[key] = newNode;
+                    newTree.nodes[key] = newNode;
                     expandLevels(newNode.childKeys, currentLevel + 1);
                 }
             });
         };
 
-        expandLevels(newTreeModel.rootKeys);
-        return newTreeModel;
+        expandLevels(newTree.rootKeys);
+        return newTree;
     }
 
     filter(testFunc) {
@@ -151,7 +151,7 @@ class TreeModel {
             );
         }
 
-        const newTreeModel = this.clone().removeFilter();
+        const newTree = this.clone().removeFilter();
 
         const filterNodes = (filtered, nodeKey) => {
             const node = this.getNode(nodeKey);
@@ -167,13 +167,13 @@ class TreeModel {
                 // hide the node
                 const newNode = node.clone();
                 newNode.isHiddenByFilter = true;
-                newTreeModel.nodes[nodeKey] = newNode;
+                newTree.nodes[nodeKey] = newNode;
             }
             return filtered;
         };
 
-        newTreeModel.rootKeys = newTreeModel.rootKeys.reduce(filterNodes, []);
-        return newTreeModel;
+        newTree.rootKeys = newTree.rootKeys.reduce(filterNodes, []);
+        return newTree;
     }
 
     getChecked() {
@@ -281,30 +281,30 @@ class TreeModel {
     }
 
     removeFilter() {
-        const newTreeModel = this.clone();
+        const newTree = this.clone();
 
-        Object.keys(newTreeModel.nodes).forEach((key) => {
+        Object.keys(newTree.nodes).forEach((key) => {
             const newNode = this.getNode(key);
             newNode.isHiddenByFilter = false;
-            newTreeModel.nodes[key] = newNode;
+            newTree.nodes[key] = newNode;
         });
-        newTreeModel.rootKeys = [...this.unfilteredRootKeys];
+        newTree.rootKeys = [...this.unfilteredRootKeys];
 
-        return newTreeModel;
+        return newTree;
     }
 
     setNewOptions(newOptions) {
-        const newTreeModel = this.clone();
-        newTreeModel.options = { ...newTreeModel.options, ...newOptions };
-        return newTreeModel;
+        const newTree = this.clone();
+        newTree.options = { ...newTree.options, ...newOptions };
+        return newTree;
     }
 
     setNodeProp(nodeKey, propertyName, value) {
-        const newTreeModel = this.clone();
+        const newTree = this.clone();
         const newNode = this.getNode(nodeKey).clone();
         newNode[propertyName] = value;
-        newTreeModel.nodes[nodeKey] = newNode;
-        return newTreeModel;
+        newTree.nodes[nodeKey] = newNode;
+        return newTree;
     }
 
     toggleChecked(nodeKey) {
@@ -317,18 +317,17 @@ class TreeModel {
             ((node.isRadioNode) && (node.checkState > 0))
         ) {
             // TODO: should this be return FALSE?
-            // no change return old treeModel
+            // no change return old tree
             return this;
         }
 
-        const newTreeModel = this.clone();
-        const newTree = newTreeModel.nodes;
+        const newTree = this.clone();
 
         // determine newCheckState for this node
         let newCheckState;
         if (node.isRadioNode) {
             // turn off all siblings of node in newTree
-            newTreeModel.turnOffSiblings(nodeKey);
+            newTree.turnOffSiblings(nodeKey);
             newCheckState = 1;
         } else if (node.checkState === 2) {
             newCheckState = (optimisticToggle && !noCascadeChecks) ? 1 : 0;
@@ -354,9 +353,9 @@ class TreeModel {
                     toggle(childKey, newCheckState);
                 });
                 // get checkState based upon childNodes' checkState
-                newNode.checkState = newTreeModel.getCheckState(newNode);
+                newNode.checkState = newTree.getCheckState(newNode);
             }
-            newTree[key] = newNode;
+            newTree.nodes[key] = newNode;
         };
         //----------------------------------------------------------------------
 
@@ -368,31 +367,31 @@ class TreeModel {
             let child = node;
             while (child.parentKey !== '') {
                 const { parentKey } = child;
-                const newParent = newTreeModel.getNode(parentKey).clone();
+                const newParent = newTree.getNode(parentKey).clone();
                 if (newParent.isRadioNode) {
                     // do not percolate up
                     break;
                 } else {
-                    newParent.checkState = newTreeModel.getCheckState(newParent);
-                    newTree[parentKey] = newParent;
+                    newParent.checkState = newTree.getCheckState(newParent);
+                    newTree.nodes[parentKey] = newParent;
                     child = newParent;
                 }
             }
         }
 
-        return newTreeModel;
+        return newTree;
     }
 
     toggleDisabled(nodeKey) {
         const toggleChildren = !this.options.noCascadeDisabled;
-        const newTreeModel = this.toggleProperty(nodeKey, 'disabled', toggleChildren);
-        return newTreeModel;
+        const newTree = this.toggleProperty(nodeKey, 'disabled', toggleChildren);
+        return newTree;
     }
 
     toggleExpanded(nodeKey) {
         const toggleChildren = false;
-        const newTreeModel = this.toggleProperty(nodeKey, 'expanded', toggleChildren);
-        return newTreeModel;
+        const newTree = this.toggleProperty(nodeKey, 'expanded', toggleChildren);
+        return newTree;
     }
 
     //--------------------------------------------------------------------------
@@ -429,19 +428,18 @@ class TreeModel {
         const newValue = !newNode[propertyName];
         newNode[propertyName] = newValue;
 
-        const newTreeModel = this.clone();
-        const newTree = newTreeModel.nodes;
-        newTree[nodeKey] = newNode;
+        const newTree = this.clone();
+        newTree.nodes[nodeKey] = newNode;
 
         if (toggleChildren && newNode.isParent) {
             newNode.childKeys.forEach((childKey) => {
                 const node = this.getNode(childKey).clone();
                 node[propertyName] = newValue;
-                newTree[childKey] = node;
+                newTree.nodes[childKey] = node;
             });
         }
 
-        return newTreeModel;
+        return newTree;
     }
 
     // this method is private and does not handle cascading

From b956c5faee9eaf45adb6bf838a43faadb6f6a1b3 Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Tue, 4 Jul 2023 13:32:09 -0400
Subject: [PATCH 11/17] fix to return node and misc.

---
 examples/src/js/BasicExample.jsx             |  6 ++--
 examples/src/js/ClickableLabelsExample.jsx   |  9 ++---
 examples/src/js/CustomIconsExample.jsx       |  6 ++--
 examples/src/js/CustomLabelExample.jsx       |  6 ++--
 examples/src/js/DisabledExample.jsx          |  6 ++--
 examples/src/js/ExpandAllExample.jsx         |  7 ++--
 examples/src/js/FilterExample.jsx            |  6 ++--
 examples/src/js/HiddenCheckboxesExample.jsx  |  6 ++--
 examples/src/js/LargeDataExample.jsx         |  6 ++--
 examples/src/js/NativeCheckboxExample.jsx    |  6 ++--
 examples/src/js/NoCascadeExample.jsx         |  6 ++--
 examples/src/js/PessimisticToggleExample.jsx |  6 ++--
 examples/src/js/RadioButtonExample.jsx       |  6 ++--
 src/js/CheckboxTree.jsx                      |  9 +++--
 src/js/models/TreeModel.js                   | 17 ++++++---
 test/CheckboxTree.jsx                        | 37 ++++++++++----------
 test/TreeNode.jsx                            |  2 +-
 17 files changed, 65 insertions(+), 82 deletions(-)

diff --git a/examples/src/js/BasicExample.jsx b/examples/src/js/BasicExample.jsx
index 0d03b6cd..e8a4ad04 100644
--- a/examples/src/js/BasicExample.jsx
+++ b/examples/src/js/BasicExample.jsx
@@ -12,14 +12,12 @@ function BasicExample() {
         setTree(newTree);
     };
 
-    const onCheck = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onCheck = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label}`);
         console.log(newTree.getChecked());
     };
 
-    const onExpand = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onExpand = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
         console.log(newTree.getExpanded());
     };
diff --git a/examples/src/js/ClickableLabelsExample.jsx b/examples/src/js/ClickableLabelsExample.jsx
index e736bdfc..0449762d 100644
--- a/examples/src/js/ClickableLabelsExample.jsx
+++ b/examples/src/js/ClickableLabelsExample.jsx
@@ -13,20 +13,17 @@ function ClickExample() {
         setTree(newTree);
     };
 
-    const onCheck = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onCheck = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label}`);
         console.log(newTree.getChecked());
     };
 
-    const onExpand = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onExpand = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
         console.log(newTree.getExpanded());
     };
 
-    const onClick = (nodeKey, treeModel) => {
-        const node = treeModel.getNode(nodeKey);
+    const onClick = (node, tree) => {
         setClicked(node);
     };
 
diff --git a/examples/src/js/CustomIconsExample.jsx b/examples/src/js/CustomIconsExample.jsx
index af4680fc..4637ecfa 100644
--- a/examples/src/js/CustomIconsExample.jsx
+++ b/examples/src/js/CustomIconsExample.jsx
@@ -50,14 +50,12 @@ function CustomIconsExample() {
         setTree(newTree);
     };
 
-    const onCheck = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onCheck = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label}`);
         console.log(newTree.getChecked());
     };
 
-    const onExpand = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onExpand = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
         console.log(newTree.getExpanded());
     };
diff --git a/examples/src/js/CustomLabelExample.jsx b/examples/src/js/CustomLabelExample.jsx
index b0d25ea9..24e3c698 100644
--- a/examples/src/js/CustomLabelExample.jsx
+++ b/examples/src/js/CustomLabelExample.jsx
@@ -73,14 +73,12 @@ function CustomLabelExample() {
         setTree(newTree);
     };
 
-    const onCheck = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onCheck = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label}`);
         console.log(newTree.getChecked());
     };
 
-    const onExpand = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onExpand = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
         console.log(newTree.getExpanded());
     };
diff --git a/examples/src/js/DisabledExample.jsx b/examples/src/js/DisabledExample.jsx
index fc18de5f..07f09d9e 100644
--- a/examples/src/js/DisabledExample.jsx
+++ b/examples/src/js/DisabledExample.jsx
@@ -12,14 +12,12 @@ function DisabledExample() {
         setTree(newTree);
     };
 
-    const onCheck = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onCheck = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label}`);
         console.log(newTree.getChecked());
     };
 
-    const onExpand = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onExpand = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
         console.log(newTree.getExpanded());
     };
diff --git a/examples/src/js/ExpandAllExample.jsx b/examples/src/js/ExpandAllExample.jsx
index 3f7ef751..42a2c312 100644
--- a/examples/src/js/ExpandAllExample.jsx
+++ b/examples/src/js/ExpandAllExample.jsx
@@ -12,15 +12,12 @@ function ExpandAllExample() {
         setTree(newTree);
     };
 
-    const onCheck = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onCheck = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label}`);
         console.log(newTree.getChecked());
     };
 
-    const onExpand = (changedNodeKey, newTree) => {
-        console.log(changedNodeKey);
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onExpand = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
         console.log(newTree.getExpanded());
     };
diff --git a/examples/src/js/FilterExample.jsx b/examples/src/js/FilterExample.jsx
index f64f12f7..5d74edce 100644
--- a/examples/src/js/FilterExample.jsx
+++ b/examples/src/js/FilterExample.jsx
@@ -15,14 +15,12 @@ function FilterExample() {
         setTree(newTree);
     };
 
-    const onCheck = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onCheck = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label}`);
         console.log(newTree.getChecked());
     };
 
-    const onExpand = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onExpand = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
         console.log(newTree.getExpanded());
     };
diff --git a/examples/src/js/HiddenCheckboxesExample.jsx b/examples/src/js/HiddenCheckboxesExample.jsx
index 7fc0a5d6..9413efc3 100644
--- a/examples/src/js/HiddenCheckboxesExample.jsx
+++ b/examples/src/js/HiddenCheckboxesExample.jsx
@@ -12,14 +12,12 @@ function HiddenCheckboxesExample() {
         setTree(newTree);
     };
 
-    const onCheck = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onCheck = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label}`);
         console.log(newTree.getChecked());
     };
 
-    const onExpand = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onExpand = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
         console.log(newTree.getExpanded());
     };
diff --git a/examples/src/js/LargeDataExample.jsx b/examples/src/js/LargeDataExample.jsx
index 84cc9eff..f41125c6 100644
--- a/examples/src/js/LargeDataExample.jsx
+++ b/examples/src/js/LargeDataExample.jsx
@@ -38,14 +38,12 @@ function LargeDataExample() {
         setTree(newTree);
     };
 
-    const onCheck = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onCheck = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label}`);
         console.log(newTree.getChecked());
     };
 
-    const onExpand = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onExpand = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
         console.log(newTree.getExpanded());
     };
diff --git a/examples/src/js/NativeCheckboxExample.jsx b/examples/src/js/NativeCheckboxExample.jsx
index 041898da..17aa5d44 100644
--- a/examples/src/js/NativeCheckboxExample.jsx
+++ b/examples/src/js/NativeCheckboxExample.jsx
@@ -12,14 +12,12 @@ function NativeCheckboxExample() {
         setTree(newTree);
     };
 
-    const onCheck = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onCheck = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label}`);
         console.log(newTree.getChecked());
     };
 
-    const onExpand = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onExpand = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
         console.log(newTree.getExpanded());
     };
diff --git a/examples/src/js/NoCascadeExample.jsx b/examples/src/js/NoCascadeExample.jsx
index 80b7c5d6..5af2564a 100644
--- a/examples/src/js/NoCascadeExample.jsx
+++ b/examples/src/js/NoCascadeExample.jsx
@@ -12,14 +12,12 @@ function NoCascadeExample() {
         setTree(newTree);
     };
 
-    const onCheck = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onCheck = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label}`);
         console.log(newTree.getChecked());
     };
 
-    const onExpand = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onExpand = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
         console.log(newTree.getExpanded());
     };
diff --git a/examples/src/js/PessimisticToggleExample.jsx b/examples/src/js/PessimisticToggleExample.jsx
index 22904d82..a0ccf9e5 100644
--- a/examples/src/js/PessimisticToggleExample.jsx
+++ b/examples/src/js/PessimisticToggleExample.jsx
@@ -12,14 +12,12 @@ function PessimisticToggleExample() {
         setTree(newTree);
     };
 
-    const onCheck = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onCheck = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label}`);
         console.log(newTree.getChecked());
     };
 
-    const onExpand = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onExpand = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
         console.log(newTree.getExpanded());
     };
diff --git a/examples/src/js/RadioButtonExample.jsx b/examples/src/js/RadioButtonExample.jsx
index e616a807..3a4d2bf3 100644
--- a/examples/src/js/RadioButtonExample.jsx
+++ b/examples/src/js/RadioButtonExample.jsx
@@ -12,14 +12,12 @@ function RadioButtonExample() {
         setTree(newTree);
     };
 
-    const onCheck = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onCheck = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label}`);
         console.log(newTree.getChecked());
     };
 
-    const onExpand = (changedNodeKey, newTree) => {
-        const changedNode = newTree.getNode(changedNodeKey);
+    const onExpand = (changedNode, newTree) => {
         console.log(`changed node = ${changedNode.label} => expanded = ${changedNode.expanded}`);
         console.log(newTree.getExpanded());
     };
diff --git a/src/js/CheckboxTree.jsx b/src/js/CheckboxTree.jsx
index 637def88..9f45e0f7 100644
--- a/src/js/CheckboxTree.jsx
+++ b/src/js/CheckboxTree.jsx
@@ -184,6 +184,7 @@ export default function CheckboxTree({
 
     const onCheckHandler = (nodeKey) => {
         const newTree = tree.toggleChecked(nodeKey);
+        const checkedNode = newTree.getNode(nodeKey);
 
         // TODO: should toggleChecked return false if no change??
         // probably...
@@ -192,7 +193,7 @@ export default function CheckboxTree({
         // changed due to being disabled or being an already checked
         // radio node so we ignore the check change attempt
         if (newTree !== tree) {
-            onCheck(nodeKey, newTree);
+            onCheck(checkedNode, newTree);
             onChange(newTree);
         }
     };
@@ -211,7 +212,8 @@ export default function CheckboxTree({
 
     const onExpandHandler = (nodeKey) => {
         const newTree = tree.toggleExpanded(nodeKey);
-        onExpand(nodeKey, newTree);
+        const expandedNode = newTree.getNode(nodeKey);
+        onExpand(expandedNode, newTree);
         onChange(newTree);
     };
 
@@ -224,7 +226,8 @@ export default function CheckboxTree({
     };
 
     const onNodeClick = (nodeKey) => {
-        onClick(nodeKey, tree);
+        const clickedNode = tree.getNode(nodeKey);
+        onClick(clickedNode, tree);
     };
 
     const renderTreeNodes = (childKeys, ancestorDisabled = false) => {
diff --git a/src/js/models/TreeModel.js b/src/js/models/TreeModel.js
index 39e63688..db4a4bab 100644
--- a/src/js/models/TreeModel.js
+++ b/src/js/models/TreeModel.js
@@ -3,7 +3,12 @@ import NodeModel from './NodeModel';
 import { CHECK_MODEL } from '../constants';
 
 class TreeModel {
-    constructor(treeConfig, options = {}) {
+    constructor(treeConfig, options = {
+        checkModel: CHECK_MODEL.LEAF,
+        noCascadeChecks: false,
+        noCascadeDisabled: false,
+        optimisticToggle: true,
+    }) {
         const { noCascadeDisabled } = options;
 
         //----------------------------------------------------------------------
@@ -11,7 +16,7 @@ class TreeModel {
         const flatten = (childNodes, parent = {}, depth = 0) => {
             if (Array.isArray(childNodes) && childNodes.length !== 0) {
                 childNodes.forEach((node, index) => {
-                    const newNode = new NodeModel(node, parent, index, depth, options);
+                    const newNode = new NodeModel(node, parent, index, depth);
 
                     // cascade disabled property down to children
                     // this makes tree have consistent disabled state
@@ -177,7 +182,9 @@ class TreeModel {
     }
 
     getChecked() {
-        const checkModel = this.options.checkModel || CHECK_MODEL.LEAF;
+        // TODO: should this method have a checkModel argument to override
+        //       the one in options
+        const { checkModel } = this.options;
         const checkedArray = [];
 
         let test;
@@ -196,7 +203,7 @@ class TreeModel {
 
         const walkTree = (nodeKey) => {
             const node = this.getNode(nodeKey);
-            if (test(node) && !node.disabled) {
+            if (!node.disabled && test(node)) {
                 checkedArray.push(nodeKey);
             }
             if (node.isParent) {
@@ -293,6 +300,7 @@ class TreeModel {
         return newTree;
     }
 
+    // TODO: this method or updateOptions???
     setNewOptions(newOptions) {
         const newTree = this.clone();
         newTree.options = { ...newTree.options, ...newOptions };
@@ -308,6 +316,7 @@ class TreeModel {
     }
 
     toggleChecked(nodeKey) {
+        // TODO: should these options be able to be overidden with an options argument
         const { noCascadeChecks, optimisticToggle } = this.options;
         const node = this.getNode(nodeKey);
 
diff --git a/test/CheckboxTree.jsx b/test/CheckboxTree.jsx
index c3f5f968..dbeaf940 100644
--- a/test/CheckboxTree.jsx
+++ b/test/CheckboxTree.jsx
@@ -126,7 +126,7 @@ describe('<CheckboxTree />', () => {
                         onChange={(newTree) => {
                             tree = newTree;
                         }}
-                        onCheck={(nodeKey, newTree) => {
+                        onCheck={(node, newTree) => {
                             actual = newTree.getChecked();
                         }}
                     />,
@@ -150,7 +150,7 @@ describe('<CheckboxTree />', () => {
                         onChange={(newTree) => {
                             tree = newTree;
                         }}
-                        onCheck={(nodeKey, treeModel) => {
+                        onCheck={(node, treeModel) => {
                             actual = treeModel.getChecked();
                         }}
                     />,
@@ -173,9 +173,9 @@ describe('<CheckboxTree />', () => {
                         onChange={(newTree) => {
                             tree = newTree;
                         }}
-                        onCheck={(nodeKey, treeModel) => {
-                            const node = treeModel.getNode('saturn');
-                            actual = node.checkState;
+                        onCheck={(node, treeModel) => {
+                            const parentNode = treeModel.getNode('saturn');
+                            actual = parentNode.checkState;
                         }}
                     />,
                 );
@@ -1041,7 +1041,7 @@ describe('<CheckboxTree />', () => {
             assert.deepEqual(actualChecked, ['europa']);
         });
 
-        it('should pass the node.value of the clicked node as the first parameter', async () => {
+        it('should pass the node of the clicked node as the first parameter', async () => {
             let actual = '';
             let tree = tree2;
 
@@ -1051,8 +1051,8 @@ describe('<CheckboxTree />', () => {
                     onChange={(newTree) => {
                         tree = newTree;
                     }}
-                    onCheck={(nodeKey) => {
-                        actual = nodeKey;
+                    onCheck={(node) => {
+                        actual = node.value;
                     }}
                 />,
             );
@@ -1087,7 +1087,7 @@ describe('<CheckboxTree />', () => {
     });
 
     describe('onClick', () => {
-        it('should pass the nodeKey(node.value) of the node clicked as the first parameter', async () => {
+        it('should pass the node clicked as the first parameter', async () => {
             let actualNode = null;
             let tree = tree2;
 
@@ -1097,8 +1097,7 @@ describe('<CheckboxTree />', () => {
                     onChange={(newTree) => {
                         tree = newTree;
                     }}
-                    onCheck={(nodeKey, treeModel) => {
-                        const node = treeModel.getNode(nodeKey);
+                    onCheck={(node, treeModel) => {
                         actualNode = node;
                     }}
                 />,
@@ -1190,8 +1189,8 @@ describe('<CheckboxTree />', () => {
                     onChange={(newTree) => {
                         tree = newTree;
                     }}
-                    onExpand={(nodeKey) => {
-                        actual = nodeKey;
+                    onExpand={(node) => {
+                        actual = node.value;
                     }}
                 />,
             );
@@ -1301,14 +1300,14 @@ describe('<CheckboxTree />', () => {
                     onChange={(newTree) => {
                         tree = newTree;
                     }}
-                    onCheck={(nodeKey, treeModel) => {
-                        checkNode = treeModel.getNode(nodeKey);
+                    onCheck={(node, treeModel) => {
+                        checkNode = node;
                     }}
-                    onClick={(nodeKey, treeModel) => {
-                        clickNode = treeModel.getNode(nodeKey);
+                    onClick={(node, treeModel) => {
+                        clickNode = node;
                     }}
-                    onExpand={(nodeKey, treeModel) => {
-                        expandNode = treeModel.getNode(nodeKey);
+                    onExpand={(node, treeModel) => {
+                        expandNode = node;
                     }}
                 />,
             );
diff --git a/test/TreeNode.jsx b/test/TreeNode.jsx
index 26d7e41a..c3be02c6 100644
--- a/test/TreeNode.jsx
+++ b/test/TreeNode.jsx
@@ -52,7 +52,7 @@ const baseProps = {
     expanded: false,
     isLeaf: true,
     isParent: false,
-    noCascade: false,
+    noCascadeChecks: false,
     node: testTree.getNode('jupiter'),
     optimisticToggle: true,
     showNodeIcon: true,

From f2881a448844e7e477f94a6a2d27ce400fde17ba Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Wed, 5 Jul 2023 09:46:49 -0400
Subject: [PATCH 12/17] move 'control options' props from CheckboxTree to
 TreeModel

---
 examples/src/js/NoCascadeExample.jsx         |  5 ++-
 examples/src/js/PessimisticToggleExample.jsx |  5 ++-
 src/js/CheckboxTree.jsx                      | 46 ++-----------------
 src/js/components/CheckboxIcon.js            |  6 ++-
 src/js/components/CheckboxLabel.jsx          |  3 +-
 src/js/components/TreeNode.jsx               |  3 +-
 src/js/models/TreeModel.js                   | 19 +++-----
 test/CheckboxTree.jsx                        | 47 +++++++++++---------
 test/TreeModel.js                            | 10 ++---
 9 files changed, 57 insertions(+), 87 deletions(-)

diff --git a/examples/src/js/NoCascadeExample.jsx b/examples/src/js/NoCascadeExample.jsx
index 5af2564a..c337130b 100644
--- a/examples/src/js/NoCascadeExample.jsx
+++ b/examples/src/js/NoCascadeExample.jsx
@@ -3,7 +3,9 @@ import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 import { fileSystem as nodes } from './data';
 
-const initialTree = new TreeModel(nodes);
+const initialTree = new TreeModel(nodes, {
+    noCascadeChecks: true,
+});
 
 function NoCascadeExample() {
     const [tree, setTree] = useState(initialTree);
@@ -24,7 +26,6 @@ function NoCascadeExample() {
 
     return (
         <CheckboxTree
-            noCascadeChecks
             tree={tree}
             onChange={onChange}
             onCheck={onCheck}
diff --git a/examples/src/js/PessimisticToggleExample.jsx b/examples/src/js/PessimisticToggleExample.jsx
index a0ccf9e5..6bb24bbf 100644
--- a/examples/src/js/PessimisticToggleExample.jsx
+++ b/examples/src/js/PessimisticToggleExample.jsx
@@ -3,7 +3,9 @@ import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 
 import { fileSystem as nodes } from './data';
 
-const initialTree = new TreeModel(nodes);
+const initialTree = new TreeModel(nodes, {
+    optimisticToggle: false,
+});
 
 function PessimisticToggleExample() {
     const [tree, setTree] = useState(initialTree);
@@ -24,7 +26,6 @@ function PessimisticToggleExample() {
 
     return (
         <CheckboxTree
-            optimisticToggle={false}
             tree={tree}
             onChange={onChange}
             onCheck={onCheck}
diff --git a/src/js/CheckboxTree.jsx b/src/js/CheckboxTree.jsx
index 9f45e0f7..5113febb 100644
--- a/src/js/CheckboxTree.jsx
+++ b/src/js/CheckboxTree.jsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 // import isEqual from 'lodash/isEqual';
 import memoize from 'lodash/memoize';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React from 'react';
 
 // import CheckboxTreeError from './CheckboxTreeError';
 
@@ -45,7 +45,6 @@ const propTypes = {
     LeafLabelComponent: PropTypes.func,
     ParentLabelComponent: PropTypes.func,
     checkKeys: PropTypes.arrayOf(PropTypes.string),
-    checkModel: PropTypes.oneOf(['leaf', 'all']),
     direction: PropTypes.string,
     disabled: PropTypes.bool,
     expandDisabled: PropTypes.bool,
@@ -57,10 +56,7 @@ const propTypes = {
     name: PropTypes.string,
     nameAsArray: PropTypes.bool,
     nativeCheckboxes: PropTypes.bool,
-    noCascadeChecks: PropTypes.bool,
-    noCascadeDisabled: PropTypes.bool,
     onlyLeafCheckboxes: PropTypes.bool,
-    optimisticToggle: PropTypes.bool,
     showExpandAll: PropTypes.bool,
     showNodeIcon: PropTypes.bool,
     showNodeTitle: PropTypes.bool,
@@ -75,7 +71,6 @@ const propTypes = {
 
 const defaultProps = {
     checkKeys: [KEYS.SPACEBAR, KEYS.ENTER],
-    checkModel: 'leaf',
     direction: 'ltr',
     disabled: false,
     expandDisabled: false,
@@ -90,10 +85,7 @@ const defaultProps = {
     name: undefined,
     nameAsArray: false,
     nativeCheckboxes: false,
-    noCascadeChecks: false,
-    noCascadeDisabled: false,
     onlyLeafCheckboxes: false,
-    optimisticToggle: true,
     showExpandAll: false,
     showNodeIcon: true,
     showNodeTitle: false,
@@ -130,13 +122,9 @@ export default function CheckboxTree({
     showNodeTitle,
     showNodeIcon,
     // for tree model
-    checkModel,
     LabelComponent,
     LeafLabelComponent,
     ParentLabelComponent,
-    noCascadeChecks,
-    noCascadeDisabled,
-    optimisticToggle,
     onLabelChange,
     onLeafLabelChange,
     onParentLabelChange,
@@ -144,26 +132,6 @@ export default function CheckboxTree({
     const mergedLang = combineMemoized(lang, defaultLang);
     const mergedIcons = combineMemoized(icons, defaultIcons);
 
-    // save nodes prop to check for new value in useEffect
-    // const [prevNodes, setPreviousNodes] = useState();
-
-    // bundle props passed to TreeModel
-    // TODO: how should these be added to TreeModel??????
-    const treeOptions = useMemo(() => ({
-        checkModel,
-        noCascadeChecks,
-        noCascadeDisabled,
-        optimisticToggle,
-    }), [
-        checkModel,
-        noCascadeChecks,
-        noCascadeDisabled,
-        optimisticToggle,
-    ]);
-
-    // insert or update options in tree
-    tree.updateOptions(treeOptions);
-
     //--------------------------------------------------------------------------
 
     // TODO: this may not be needed as TreeModel is required
@@ -175,13 +143,6 @@ export default function CheckboxTree({
     //--------------------------------------------------------------------------
     // methods
 
-    // TODO: is this needed?
-    /*
-    const onChangeHandler = () => {
-
-    };
-    */
-
     const onCheckHandler = (nodeKey) => {
         const newTree = tree.toggleChecked(nodeKey);
         const checkedNode = newTree.getNode(nodeKey);
@@ -233,7 +194,6 @@ export default function CheckboxTree({
     const renderTreeNodes = (childKeys, ancestorDisabled = false) => {
         const treeNodes = childKeys.map((nodeKey) => {
             const node = tree.getNode(nodeKey);
-
             const parent = node.parentKey ? tree.getNode(node.parentKey) : null;
 
             // render only if not marked hidden by filter or
@@ -247,7 +207,7 @@ export default function CheckboxTree({
             let children = null;
             if (node.isParent) {
                 // determine if child nodes should be disabled
-                const disabledByAncestor = !noCascadeDisabled && (
+                const disabledByAncestor = !tree.options.noCascadeDisabled && (
                     ancestorDisabled || node.disabled ||
                     (node.isRadioGroup && node.checkState === 0)
                 );
@@ -275,7 +235,7 @@ export default function CheckboxTree({
                     disabled={disabled || ancestorDisabled || node.disabled}
                     expandDisabled={expandDisabled}
                     expandOnClick={expandOnClick}
-                    noCascadeChecks={noCascadeChecks}
+                    noCascadeChecks={tree.options.noCascadeChecks}
                     node={node}
                     showCheckbox={showCheckbox}
                     showNodeIcon={showNodeIcon}
diff --git a/src/js/components/CheckboxIcon.js b/src/js/components/CheckboxIcon.js
index bded7c28..f4b5b278 100644
--- a/src/js/components/CheckboxIcon.js
+++ b/src/js/components/CheckboxIcon.js
@@ -6,7 +6,11 @@ class CheckboxIcon extends React.PureComponent {
     static propTypes = {
         checked: PropTypes.number.isRequired,
         isRadioNode: PropTypes.bool.isRequired,
-        noCascadeChecks: PropTypes.bool.isRequired,
+        noCascadeChecks: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        noCascadeChecks: false,
     };
 
     static contextType = IconContext;
diff --git a/src/js/components/CheckboxLabel.jsx b/src/js/components/CheckboxLabel.jsx
index 9f014c32..ed711a33 100644
--- a/src/js/components/CheckboxLabel.jsx
+++ b/src/js/components/CheckboxLabel.jsx
@@ -8,7 +8,6 @@ import Clickable from './Clickable';
 const propTypes = {
     checked: PropTypes.number.isRequired,
     disabled: PropTypes.bool.isRequired,
-    noCascadeChecks: PropTypes.bool.isRequired,
     value: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number,
@@ -17,6 +16,7 @@ const propTypes = {
 
     children: PropTypes.node,
     isRadioNode: PropTypes.bool,
+    noCascadeChecks: PropTypes.bool,
     title: PropTypes.string,
     treeId: PropTypes.string,
     onCheckboxKeyUp: PropTypes.func,
@@ -26,6 +26,7 @@ const propTypes = {
 const defaultProps = {
     children: null,
     isRadioNode: false,
+    noCascadeChecks: false,
     title: null,
     treeId: null,
     onCheckboxKeyUp: null,
diff --git a/src/js/components/TreeNode.jsx b/src/js/components/TreeNode.jsx
index a0adfbc5..d0f4f828 100644
--- a/src/js/components/TreeNode.jsx
+++ b/src/js/components/TreeNode.jsx
@@ -19,7 +19,6 @@ class TreeNode extends React.PureComponent {
         checkKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
         disabled: PropTypes.bool.isRequired,
         expandDisabled: PropTypes.bool.isRequired,
-        noCascadeChecks: PropTypes.bool.isRequired,
         node: PropTypes.instanceOf(NodeModel).isRequired,
         showNodeIcon: PropTypes.bool.isRequired,
         onCheck: PropTypes.func.isRequired,
@@ -30,6 +29,7 @@ class TreeNode extends React.PureComponent {
         ParentLabelComponent: PropTypes.func,
         children: PropTypes.node,
         expandOnClick: PropTypes.bool,
+        noCascadeChecks: PropTypes.bool,
         showCheckbox: PropTypes.bool,
         showNodeTitle: PropTypes.bool,
         treeId: PropTypes.string,
@@ -45,6 +45,7 @@ class TreeNode extends React.PureComponent {
         expandOnClick: false,
         LabelComponent: null,
         LeafLabelComponent: null,
+        noCascadeChecks: false,
         ParentLabelComponent: null,
         showCheckbox: true,
         showNodeTitle: false,
diff --git a/src/js/models/TreeModel.js b/src/js/models/TreeModel.js
index db4a4bab..1bae66f7 100644
--- a/src/js/models/TreeModel.js
+++ b/src/js/models/TreeModel.js
@@ -300,13 +300,6 @@ class TreeModel {
         return newTree;
     }
 
-    // TODO: this method or updateOptions???
-    setNewOptions(newOptions) {
-        const newTree = this.clone();
-        newTree.options = { ...newTree.options, ...newOptions };
-        return newTree;
-    }
-
     setNodeProp(nodeKey, propertyName, value) {
         const newTree = this.clone();
         const newNode = this.getNode(nodeKey).clone();
@@ -403,8 +396,14 @@ class TreeModel {
         return newTree;
     }
 
-    //--------------------------------------------------------------------------
+    updateOptions(newOptions) {
+        const newTree = this.clone();
+        newTree.options = { ...newTree.options, ...newOptions };
+        return newTree;
+    }
+
     // Private functions
+    //--------------------------------------------------------------------------
 
     getCheckState(node) {
         if (this.isEveryChildChecked(node)) {
@@ -465,10 +464,6 @@ class TreeModel {
         });
     }
 
-    updateOptions(newOptions) {
-        this.options = { ...this.options, ...newOptions };
-    }
-
     //--------------------------------------------------------------------------
     // TODO: these functions need review
 
diff --git a/test/CheckboxTree.jsx b/test/CheckboxTree.jsx
index dbeaf940..4a6e45f6 100644
--- a/test/CheckboxTree.jsx
+++ b/test/CheckboxTree.jsx
@@ -117,11 +117,12 @@ describe('<CheckboxTree />', () => {
         describe('all', () => {
             it('should return checked parent and leaf nodes', async () => {
                 let actual = null;
-                let tree = tree2;
+                let tree = tree2.updateOptions({
+                    checkModel: 'all',
+                });
 
                 render(
                     <CheckboxTree
-                        checkModel="all"
                         tree={tree}
                         onChange={(newTree) => {
                             tree = newTree;
@@ -141,11 +142,12 @@ describe('<CheckboxTree />', () => {
             it('should percolate `checked` to all parents and grandparents if all leaves are checked', async () => {
                 // TODO: this needs a deeper test
                 let actual = null;
-                let tree = tree3;
+                let tree = tree3.updateOptions({
+                    checkModel: 'all',
+                });
 
                 render(
                     <CheckboxTree
-                        checkModel="all"
                         tree={tree}
                         onChange={(newTree) => {
                             tree = newTree;
@@ -164,11 +166,12 @@ describe('<CheckboxTree />', () => {
 
             it('parent.checkState should equal 2 if not all leaves are checked', async () => {
                 let actual = null;
-                let tree = tree4;
+                let tree = tree4.updateOptions({
+                    checkModel: 'all',
+                });
 
                 render(
                     <CheckboxTree
-                        checkModel="all"
                         tree={tree}
                         onChange={(newTree) => {
                             tree = newTree;
@@ -616,12 +619,13 @@ describe('<CheckboxTree />', () => {
     describe('noCascadeChecks', () => {
         it('should not toggle the check state of children when set to true', async () => {
             let actual = null;
-            let tree = tree4;
+            let tree = tree4.updateOptions({
+                checkModel: 'all',
+                noCascadeChecks: true,
+            });
 
             render(
                 <CheckboxTree
-                    checkModel="all"
-                    noCascadeChecks
                     tree={tree}
                     onChange={(newTree) => {
                         tree = newTree;
@@ -966,18 +970,22 @@ describe('<CheckboxTree />', () => {
         // https://github.com/jakezatecky/react-checkbox-tree/issues/258
         it('should toggle a node with an empty `children` array', async () => {
             let actualChecked = [];
-            let tree = new TreeModel([
+            let tree = new TreeModel(
+                [
+                    {
+                        value: 'jupiter',
+                        label: 'Jupiter',
+                        children: [],
+                    },
+                ],
                 {
-                    value: 'jupiter',
-                    label: 'Jupiter',
-                    children: [],
+                    checkModel: 'all',
                 },
-            ]);
+            );
 
             // Unchecked to checked
             const { rerender } = render(
                 <CheckboxTree
-                    checkModel="all"
                     tree={tree}
                     onChange={(newTree) => {
                         tree = newTree;
@@ -996,7 +1004,6 @@ describe('<CheckboxTree />', () => {
             // Checked to unchecked
             rerender(
                 <CheckboxTree
-                    checkModel="all"
                     tree={tree}
                     onChange={(newTree) => {
                         tree = newTree;
@@ -1097,7 +1104,7 @@ describe('<CheckboxTree />', () => {
                     onChange={(newTree) => {
                         tree = newTree;
                     }}
-                    onCheck={(node, treeModel) => {
+                    onCheck={(node) => {
                         actualNode = node;
                     }}
                 />,
@@ -1300,13 +1307,13 @@ describe('<CheckboxTree />', () => {
                     onChange={(newTree) => {
                         tree = newTree;
                     }}
-                    onCheck={(node, treeModel) => {
+                    onCheck={(node) => {
                         checkNode = node;
                     }}
-                    onClick={(node, treeModel) => {
+                    onClick={(node) => {
                         clickNode = node;
                     }}
-                    onExpand={(node, treeModel) => {
+                    onExpand={(node) => {
                         expandNode = node;
                     }}
                 />,
diff --git a/test/TreeModel.js b/test/TreeModel.js
index 6f33ace6..bb41f0f0 100644
--- a/test/TreeModel.js
+++ b/test/TreeModel.js
@@ -292,7 +292,7 @@ describe('TreeModel', () => {
         it("should return the array of checked leaf nodes if treeModel.options.checkModel === 'leaf'", () => {
             const expected = ['0-1-0-0'];
             const treeModel = new TreeModel(nestedTree, defaultOptions);
-            const newTreeModel = treeModel.setNewOptions({ checkModel: 'leaf' });
+            const newTreeModel = treeModel.updateOptions({ checkModel: 'leaf' });
             const actual = newTreeModel.getChecked();
 
             assert.deepEqual(expected, actual);
@@ -301,7 +301,7 @@ describe('TreeModel', () => {
         it("should return the array of checked parent nodes if treeModel.options.checkModel === 'parent'", () => {
             const expected = ['0', '0-1', '0-1-0'];
             const treeModel = new TreeModel(nestedTree, defaultOptions);
-            const newTreeModel = treeModel.setNewOptions({ checkModel: 'parent' });
+            const newTreeModel = treeModel.updateOptions({ checkModel: 'parent' });
             const actual = newTreeModel.getChecked();
 
             assert.deepEqual(expected, actual);
@@ -310,7 +310,7 @@ describe('TreeModel', () => {
         it("should return the array of all checked nodes if treeModel.options.checkModel === 'all'", () => {
             const expected = ['0', '0-1', '0-1-0', '0-1-0-0'];
             const treeModel = new TreeModel(nestedTree, defaultOptions);
-            const newTreeModel = treeModel.setNewOptions({ checkModel: 'all' });
+            const newTreeModel = treeModel.updateOptions({ checkModel: 'all' });
             const actual = newTreeModel.getChecked();
 
             assert.deepEqual(expected, actual);
@@ -377,12 +377,12 @@ describe('TreeModel', () => {
         });
     });
 
-    describe('setNewOptions(newOptions)', () => {
+    describe('updateOptions(newOptions)', () => {
         it('should return a new TreeModel with updated options', () => {
             const expected = defaultOptions;
             expected.noCascadeChecks = true;
             const treeModel = new TreeModel(nestedTree, defaultOptions);
-            const newTreeModel = treeModel.setNewOptions({ noCascadeChecks: true });
+            const newTreeModel = treeModel.updateOptions({ noCascadeChecks: true });
 
             assert.deepEqual(expected, newTreeModel.options);
         });

From 753488683a1e496b56419deec9137057f33830c3 Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Wed, 5 Jul 2023 11:28:05 -0400
Subject: [PATCH 13/17] preliminary work on documentation

---
 README.md | 257 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 164 insertions(+), 93 deletions(-)

diff --git a/README.md b/README.md
index e297c651..6f0ccea7 100644
--- a/README.md
+++ b/README.md
@@ -41,11 +41,11 @@ import 'react-checkbox-tree/lib/react-checkbox-tree.css';
 
 ### Render Component
 
-Below is a minimal example. Note that `CheckboxTree` is an [uncontrolled][docs-controlled] component. The tree state is stored in a context provided by `CheckboxTreeProvider`. This allows the `CheckboxTreeProvider` to be moved up in the React component tree to save the `CheckboxTree` state between component mounts. An example would be having the `CheckboxTree` inside a tab which unmounts when the selected tab changes.
+Below is a minimal example. Note that `CheckboxTree` is a [controlled][docs-controlled] component. 
 
 ``` jsx
-import React from 'react';
-import CheckboxTree, { CheckboxTreeProvider } from 'react-checkbox-tree';
+import React, { useState } from 'react';
+import CheckboxTree, { TreeModel } from 'react-checkbox-tree';
 import 'react-checkbox-tree/lib/react-checkbox-tree.css';
 
 const nodes = [{
@@ -57,32 +57,153 @@ const nodes = [{
   ],
 }];
 
+// optional inputs for TreeModel
+const options = {
+  checkModel: 'all,'
+};
+
+const initialTree = new TreeModel(nodes, options);
+
 function Widget() {
+  const [tree, setTree] = useState(initialTree);
+  
   return (
-    <CheckboxTreeProvider>
-      <CheckboxTree
-        nodes={nodes}
-        checked={checked}
-        expanded={expanded}
-        onCheck={(nodeKey, updatedTreeModel) => {
-          const node = updatedTreeModel.getNode(nodeKey);
-        }}
-        onExpand={(nodeKey, updatedTreeModel) => {
-          const node = updatedTreeModel.getNode(nodeKey);
-        }}
-      />
-    </CheckboxTreeProvider>
+    <CheckboxTree
+      tree={tree}
+      onChange={(updatedTree) => {
+        setTree(updatedTree);
+      }}
+      onCheck={(node, updatedTree) => {
+        console.log(node.label);
+        console.log(updatedTree.getChecked());
+      }}
+      onExpand={(node, updatedTree) => {
+        console.log(node.label);
+        console.log(updatedTree.getExpanded());
+      }}
+    />
   );
 }
 ```
 
-> **Note** &ndash; All node objects **must** have a unique `value`.
+### Initial State of the CheckboxTree
+
+The initial state of the `CheckBoxTree` is defined by an array of *node* objects (`nodes`). This array is input to the [`TreeModel` class](#treemodel-class) to create the `tree` prop for `CheckboxTree`.
+
+### Node Properties
+
+Individual nodes within the `nodes` array must have the following structure:
+
+| Property       | Type   | Description                                                              | Default |
+| -------------- | ------ | ------------------------------------------------------------------------ | ------- |
+| `label`        | mixed  | **Required**. The node's label.                                          |         |
+| `value`        | mixed  | **Required**. The node's value.  Must be **unique**.                     |         |
+| `children`     | array  | An array of child nodes. Can be an empty array to denote a parent node.  | `null`  |
+| `className`    | string | A className to add to the node.                                          | `null`  |
+| `checked`      | bool   | Whether the node is checked.                                             | `false` |
+| `disabled`     | bool   | Whether the node should be disabled.                                     | `false` |
+| `expanded`     | bool   | Whether the node is expanded (parent nodes).                             | `false` |
+| `icon`         | mixed  | A custom icon for the node.                                              | `null`  |
+| `showCheckbox` | bool   | Whether the node should show a checkbox.                                 | `true`  |
+| `title`        | string | A custom `title` attribute for the node.                                 | `null`  |
+
+> **Note**: any additional properties included in an input node will be included in that node in the `TreeModel` instance.
+
+### TreeModel Class
+
+A `TreeModel` class instance defines the state of a `CheckboxTree`. The constructor takes two arguments.
+* `nodes` - the array of nodes defining the [inital state](#initial-state-of-the-checkboxtree) (**required**)
+* `options` - an object of [control properties](#control-properties) (optional)
+
+```
+const tree = new TreeModel(nodes, options);
+```
+
+#### Control Properties
+
+| Control Property     | Type     | Description                                                                                                            | Default          |
+| -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------- |
+| `checkModel`         | string   | Specifies which checked nodes should be extracted to the `checked` array. Accepts `'leaf'`, `'parent'` or `'all'`.     | `'leaf'`         |
+| `noCascadeChecks`    | bool     | If true, toggling a parent node will **not** cascade its check state to its children.                                    | `false`          |
+| `noCascadeDisabled`  | bool     | If true, toggling a parent node will **not** cascade its disabled state to its children.                                | `false`          |
+| `optimisticToggle`   | bool     | If true, toggling a partially-checked node will select all children. If false, it will deselect. Requires`noCascadeChecks=false`. | `true`           |
+
+#### TreeModel Public properties
+
+> **Note**: these properties are **read-only**. Use the `TreeModel` [methods](#treemodel-public-methods) below to manipulate the data in the `TreeModel` instance.
 
-#### Initial State of the CheckboxTree
+| Property             | Type     | Description                                                    |
+| -------------------- | -------- | -------------------------------------------------------------- |
+| `rootKeys`           | array    | list of node `value` properties of the level '0' nodes.        |
+| `options`            | object   | [Control Properties](#control-properties)                      |
 
-The ***initial*** state of the `CheckboxTree` is supplied to the `nodes` property. This property is used on the first mounting of the `CheckboxTree` component. A `TreeModel` is used internally by `CheckboxTree` to maintain consistent state. Subsequent mounting and rendering of the tree uses the state saved in the context provided by the `CheckboxTreeProvider`.
+#### TreeModel Public Methods
 
-#### Changing the Default Icons
+> **Note**: any `TreeModel` method which changes the state will return an updated `TreeModel` instance (`newTree`). This instance should be saved to state to update `CheckBoxTree`.
+
+```
+const newTree = tree.toggleChecked(node.value);
+setTree(newTree);
+```
+
+| Method               | Type     | Description                                                    |
+| -------------------- | -------- | -------------------------------------------------------------- |
+| `clone`              | function | clone the `TreeModel` instance: `clone() => newTree`           |
+| `expandAllNodes`     | function | expand all parent nodes: `expandAllNodes() => newTree`         |
+| `expandNodesToLevel` | function | expand parent nodes down to a particular level: `expandNodesToLevel(level) => newTree` |
+| `filter`             | function | filter nodes visible in tree (see [Filtering Nodes](#filtering-nodes)): `filter(testFunc) => newTree` |
+| `getChecked`         | function | get list of `node.value` for checked nodes based upon `checkModel`: `getChecked() => checkedArray` |
+| `getDisabled`        | function | get list of `node.value` for disabled nodes: `getDisabled() => disabledArray`           |
+| `getExpanded`        | function | get list `node.value` for of expanded nodes: `getExpanded() => expandedArray`           |
+| `getNode`            | function | get a particular node from the tree: `getNode(nodeKey) => node`  |
+| `removeFilter`       | function | remove the filter from the TreeModel: `removeFilter() => newTree` |
+| `setNodeProp`        | function | set a property on a particular node in the TreeModel: `setNodeProp(nodeKey, propertyName, value) => newTree` |
+| `toggleChecked`      | function | toggle the check status of a particular node: `toggleChecked(nodeKey) => newTree` |
+| `toggleDisabled`     | function | toggle the disabled status of a particular node: `toggleDisabled(nodeKey) => newTree` |
+| `toggleExpanded`     | function | toggle the expanded status of a particular node: `toggleExpanded(nodeKey) => newTree` |
+| `updateOptions`      | function | change the options in the TreeModel: `updateOptions(newOptions) => newTree`  |
+
+### CheckBoxTree Component
+
+#### Properties
+
+| Property             | Type     | Description                                     | Default      |
+| -------------------- | -------- | ----------------------------------------------- | ------------ |
+| `tree`               | TreeModel | **Required**. A TreeModel instance defining the current state of the CheckBoxTree. |                  |
+| `checkKeys`          | array    | A list of [keyboard keys][mdn-key] that will trigger a toggle of the check status of a node. | `[' ', 'Enter']` |
+| `direction`          | string   | A string that specify whether the direction of the component is left-to-right (`'ltr'`) or right-to-left (`'rtl'`). | `'ltr'`          |
+| `disabled`           | bool     | If true, the component will be disabled and nodes cannot be checked. | `false` |
+| `expandDisabled`     | bool     | If true, the ability to expand nodes will be disabled. | `false`     |
+| `expandOnClick`      | bool     | If true, nodes will be expanded by clicking on labels. Requires a non-empty `onClick` function. | `false`          |
+| `icons`              | object   | An object containing the mappings for the various icons and their components. See [Changing the Default Icons](#changing-the-default-icons).      | `{ ... }`       |
+| `iconsClass`         | string   | A string that specifies which icons class to utilize. Currently, `'fa4'` and `'fa5'` are supported. | `'fa5'`       |
+| `id`                 | string   | A string to be used for the HTML ID of the rendered tree and its nodes. | `null` |
+| `lang`               | object   | A key-value pairing of localized text. See [`src/js/lang/default.js`][lang-file] for a list of keys. | `{ ... }`        |
+| `name`               | string   | Optional name for the hidden `<input>` element. | `undefined`      |
+| `nameAsArray`        | bool     | If true, the hidden `<input>` will encode its values as an array rather than a joined string. | `false`          |
+| `nativeCheckboxes`   | bool     | If true, native browser checkboxes will be used instead of pseudo-checkbox icons. | `false`          |
+| `onlyLeafCheckboxes` | bool     | If true, checkboxes will only be shown for leaf nodes. | `false`   |
+| `showExpandAll`      | bool     | If true, buttons for expanding and collapsing all parent nodes will appear in the tree. | `false`          |
+| `showNodeIcon`       | bool     | If true, each node will show a parent or leaf icon.    | `true` |
+| `showNodeTitle`      | bool     | If true, the `label` of each node will become the `title` of the resulting DOM node. Overridden by `node.title`. | `false`          |
+| `onChange`           | function | **Required**. `onChange` handler (see [Event Handlers](#event-handlers)): `onChange(updatedTree) {}` Called when there is a state change in the tree.   | `() => {}`       |
+| `onCheck`            | function | `onCheck` handler (see [Event Handlers](#event-handlers)): `onCheck(node, updatedTree) {}` | `() => {}`       |
+| `onClick`            | function | `onClick` handler (see [Event Handlers](#event-handlers)): `onClick(node, updatedTree) {}`. If set, `onClick` will be called when a node's label has been clicked. | `null`           |
+| `onContextMenu`      | function | `onContextMenu` handler (see [Event Handlers](#event-handlers)): `onContextMenu(event, node, updatedTree) {}`. Triggers when right-clicking a node element. | `null`           |
+| `onExpand`           | function | `onExpand` handler (see [Event Handlers](#event-handlers)): `onExpand(node, updatedTree) {}` | `() => {}`  |
+
+> **TODO** add definitions for these properties  - see also [Replacing Default Label Components](#replacing-default-label-components)
+
+```
+LabelComponent: PropTypes.func,
+LeafLabelComponent: PropTypes.func,
+ParentLabelComponent: PropTypes.func,
+onLabelChange: PropTypes.func,
+onLeafLabelChange: PropTypes.func,
+onParentLabelChange: PropTypes.func,
+```
+
+### Changing the Default Icons
 
 By default, **react-checkbox-tree** uses Font Awesome 5/6 for the various icons that appear in the tree. To utilize Font Awesome 4 icons, simply pass in `iconsClass="fa4"`:
 
@@ -137,84 +258,34 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 />
 ```
 
-### Properties
 
-| Property             | Type     | Description                                                                                                            | Default          |
-| -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------- |
-| `nodes`              | array    | **Required**. Specifies the ***initial*** state of the tree nodes and their children.                                                             |                  |
-| `checkKeys`          | array    | A list of [keyboard keys][mdn-key] that will trigger a toggle of the check status of a node.                           | `[' ', 'Enter']` |
-| `checkModel`         | string   | Specifies which checked nodes should be extracted to the `checked` array. Accepts `'leaf'` or `'all'`.                 | `'leaf'`         |
-| `checked`            | array    | An array of checked node values.                                                                                       | `[]`             |
-| `direction`          | string   | A string that specify whether the direction of the component is left-to-right (`'ltr'`) or right-to-left (`'rtl'`).    | `'ltr'`          |
-| `disabled`           | bool     | If true, the component will be disabled and nodes cannot be checked.                                                   | `false`          |
-| `expandDisabled`     | bool     | If true, the ability to expand nodes will be disabled.                                                                 | `false`          |
-| `expandOnClick`      | bool     | If true, nodes will be expanded by clicking on labels. Requires a non-empty `onClick` function.                        | `false`          |
-| `expanded`           | array    | An array of expanded node values.                                                                                      | `[]`             |
-| `icons`              | object   | An object containing the mappings for the various icons and their components. See **Changing the Default Icons**.      | `{ ... }`        |
-| `iconsClass`         | string   | A string that specifies which icons class to utilize. Currently, `'fa4'` and `'fa5'` are supported.                    | `'fa5'`          |
-| `id`                 | string   | A string to be used for the HTML ID of the rendered tree and its nodes.                                                | `null`           |
-| `lang`               | object   | A key-value pairing of localized text. See [`src/js/lang/default.js`][lang-file] for a list of keys.                   | `{ ... }`        |
-| `name`               | string   | Optional name for the hidden `<input>` element.                                                                        | `undefined`      |
-| `nameAsArray`        | bool     | If true, the hidden `<input>` will encode its values as an array rather than a joined string.                          | `false`          |
-| `nativeCheckboxes`   | bool     | If true, native browser checkboxes will be used instead of pseudo-checkbox icons.                                      | `false`          |
-| `noCascadeChecks`    | bool     | If true, toggling a parent node will **not** cascade its check state to its children. See also `percolateChecks`.      | `false`          |
-| `noCascadeDisabled`  | bool     | If true, toggling a parent node will **not** cascade its disabled state to its children.                               | `false`          |
-| `onlyLeafCheckboxes` | bool     | If true, checkboxes will only be shown for leaf nodes.                                                                 | `false`          |
-| `optimisticToggle`   | bool     | If true, toggling a partially-checked node will select all children. If false, it will deselect. Requires`noCascade=false`. | `true`           |
-| `showExpandAll`      | bool     | If true, buttons for expanding and collapsing all parent nodes will appear in the tree.                                | `false`          |
-| `showNodeIcon`       | bool     | If true, each node will show a parent or leaf icon.                                                                    | `true`           |
-| `showNodeTitle`      | bool     | If true, the `label` of each node will become the `title` of the resulting DOM node. Overridden by `node.title`.       | `false`          |
-| `onCheck`            | function | onCheck handler: `function(nodeKey, updatedTreeModel) {}`   see [discussion](#oncheck-and-onexpand) below                                                            | `() => {}`       |
-| `onClick`            | function | onClick handler: `function(nodeKey, updatedTreeModel) {}`. If set, `onClick` will be called when a node's label has been clicked.     | `null`           |
-| `onContextMenu`      | function | onContextMenu handler: `function(event, nodeKey, updatedTreeModel) {}`. Triggers when right-clicking a node element.   | `null`           |
-| `onExpand`           | function | onExpand handler: `function(nodeKey, updatedTreeModel) {}`                                                             | `() => {}`       |
-
-#### `onCheck` and `onExpand`
-
-#### Node Properties
-
-Individual nodes within the `nodes` property can have the following structure:
+### Event Handlers
 
-| Property       | Type   | Description                                                              | Default |
-| -------------- | ------ | ------------------------------------------------------------------------ | ------- |
-| `label`        | mixed  | **Required**. The node's label.                                          |         |
-| `value`        | mixed  | **Required**. The node's value.  Must be unique.                         |         |
-| `children`     | array  | An array of child nodes. Can be an empty array to denote a parent node.  | `null`  |
-| `className`    | string | A className to add to the node.                                          | `null`  |
-| `checked`      | bool   | Whether the node is checked.                                             | `false` |
-| `disabled`     | bool   | Whether the node should be disabled.                                     | `false` |
-| `expanded`     | bool   | Whether the node is expanded (parent nodes).                             | `false` |
-| `icon`         | mixed  | A custom icon for the node.                                              | `null`  |
-| `showCheckbox` | bool   | Whether the node should show a checkbox.                                 | `true`  |
-| `title`        | string | A custom `title` attribute for the node.                                 | `null`  |
-
-### TreeModel Public Properties and Methods
-
-The updated `TreeModel` instance is supplied to the `onCheck` and `onExpand` handlers as the second argument.
-
-| Property/Method      | Type     | Description                                                                     |
-| -------------------- | -------- | ------------------------------------------------------------------------------- |
-| `nodes`              | object   | object holding the nodes of the tree indexed by their `value` property.         |
-| `rootKeys`           | array    | list of node `value` properties of the level '0' nodes.                         |
-| `options`            | object   | collection of properties passed from the input 'props' of `CheckboxTree`.       |
-| `clone  `            | function | method to clone the `TreeModel`: `function()`                                   |
-| `expandAllNodes`     | function | method to expand all parent nodes: `function()`                                 |
-| `expandNodesToLevel` | function | method to expand parent nodes down to a particular level: `function(level)`     |
-| `filter`             | function | method to filter nodes: `function(testFunc)` see further explanation below      |
-| `getChecked`         | function | method to get list of checked nodes: `function()`  list contents based upon `checkModel` |
-| `getDisabled`        | function | method to get list of disabled nodes: `function()`                              |
-| `getExpanded`        | function | method to get list of expanded nodes: `function()`                              |
-| `getNode`            | function | method to get a particular node from the tree: `function(nodeKey)`              |
-| `removeFilter`       | function | method to remove the filter from the TreeModel: `function()`       |
-| `setNewOptions`      | function | method to change the options in the TreeModel: `function(newOptions)`              |
-| `setNodeProp`        | function | method to set a property on a particular node in the TreeModel: `function(nodeKey, propertyName, value)`              |
-| `toggleChecked`      | function | method to toggle the check status of a particular node: `function(nodeKey)`     |
-| `toggleDisabled`     | function | method to toggle the disabled status of a particular node: `function(nodeKey)`  |
-| `toggleExpanded`     | function | method to toggle the expanded status of a particular node: `function(nodeKey)`  |
+> **TODO**: add explanatory text here... `onChange`, `onCheck`, `onClick`, `oncContextMenu`, `onExpand` ...
 
 ### Filtering Nodes
 
-This is a way to reduce the tree by filtering the visible nodes.   TODO: expand on this section....
+The nodes visible in the `CheckBoxTree` can be filtered using the `TreeModel.filter` method.
+
+The `filter` method takes one argument, a test function which determines if the node should be visible. This test function will be provided each node as it's first argument.
+
+```
+// function to determine if node should be visible
+// returns Boolean
+const filterTest = (node) => (
+    // node's label matches the search string
+    node.label.toLocaleLowerCase().indexOf(filterText.toLocaleLowerCase()) > -1
+);
+
+const filteredTree = tree.filter(filterTest);
+setTree(filteredTree);
+
+```
+ See [FilterExample](examples/src/js/FilterExample.jsx) for a complete example.
+ 
+### Replacing Default Label Components
+ 
+ > **TODO**: add explanatory text here...
 
 [docs-controlled]: https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components
 [docs-state-hooks]: https://react.dev/reference/react/useState

From 1ff11c6092ae9f785c3f7bb6213e7d4e4d08ab05 Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Wed, 5 Jul 2023 11:33:53 -0400
Subject: [PATCH 14/17] fix build error

---
 examples/src/js/ClickableLabelsExample.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/src/js/ClickableLabelsExample.jsx b/examples/src/js/ClickableLabelsExample.jsx
index 0449762d..91c474bc 100644
--- a/examples/src/js/ClickableLabelsExample.jsx
+++ b/examples/src/js/ClickableLabelsExample.jsx
@@ -23,7 +23,7 @@ function ClickExample() {
         console.log(newTree.getExpanded());
     };
 
-    const onClick = (node, tree) => {
+    const onClick = (node) => {
         setClicked(node);
     };
 

From 577d0ed9c2d307cec9cc15ed7cfdb34e4f901ea2 Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Wed, 5 Jul 2023 16:49:58 -0400
Subject: [PATCH 15/17] fix disabled cascading in CheckboxTree

---
 src/js/CheckboxTree.jsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/js/CheckboxTree.jsx b/src/js/CheckboxTree.jsx
index 5113febb..89a8384d 100644
--- a/src/js/CheckboxTree.jsx
+++ b/src/js/CheckboxTree.jsx
@@ -207,10 +207,8 @@ export default function CheckboxTree({
             let children = null;
             if (node.isParent) {
                 // determine if child nodes should be disabled
-                const disabledByAncestor = !tree.options.noCascadeDisabled && (
-                    ancestorDisabled || node.disabled ||
-                    (node.isRadioGroup && node.checkState === 0)
-                );
+                const disabledByAncestor = (node.isRadioGroup && node.checkState === 0) ||
+                    (!tree.options.noCascadeDisabled && (ancestorDisabled || node.disabled));
 
                 children = renderTreeNodes(node.childKeys, disabledByAncestor);
             }

From bc134a83c26c20da4e1165b4f4951d8c99422b89 Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Mon, 10 Jul 2023 11:36:09 -0400
Subject: [PATCH 16/17] fix disabled cascading to a consistent definition

---
 src/js/CheckboxTree.jsx    |  2 +-
 src/js/models/TreeModel.js | 60 +++++++++++++++-----------------------
 test/CheckboxTree.jsx      |  7 ++---
 test/TreeModel.js          | 49 ++++++++++++++++++++++++-------
 4 files changed, 66 insertions(+), 52 deletions(-)

diff --git a/src/js/CheckboxTree.jsx b/src/js/CheckboxTree.jsx
index 89a8384d..cb694299 100644
--- a/src/js/CheckboxTree.jsx
+++ b/src/js/CheckboxTree.jsx
@@ -208,7 +208,7 @@ export default function CheckboxTree({
             if (node.isParent) {
                 // determine if child nodes should be disabled
                 const disabledByAncestor = (node.isRadioGroup && node.checkState === 0) ||
-                    (!tree.options.noCascadeDisabled && (ancestorDisabled || node.disabled));
+                    (tree.options.disabledCascade && (ancestorDisabled || node.disabled));
 
                 children = renderTreeNodes(node.childKeys, disabledByAncestor);
             }
diff --git a/src/js/models/TreeModel.js b/src/js/models/TreeModel.js
index 1bae66f7..6d6c7ec8 100644
--- a/src/js/models/TreeModel.js
+++ b/src/js/models/TreeModel.js
@@ -6,27 +6,15 @@ class TreeModel {
     constructor(treeConfig, options = {
         checkModel: CHECK_MODEL.LEAF,
         noCascadeChecks: false,
-        noCascadeDisabled: false,
+        disabledCascade: true,
         optimisticToggle: true,
     }) {
-        const { noCascadeDisabled } = options;
-
-        //----------------------------------------------------------------------
         // function to flatten tree from a deep object to a flat object
         const flatten = (childNodes, parent = {}, depth = 0) => {
             if (Array.isArray(childNodes) && childNodes.length !== 0) {
                 childNodes.forEach((node, index) => {
                     const newNode = new NodeModel(node, parent, index, depth);
 
-                    // cascade disabled property down to children
-                    // this makes tree have consistent disabled state
-                    // this already happens in treeNode if noCascadeDisabled = false
-                    if (!noCascadeDisabled) {
-                        newNode.disabled = parent.disabled || newNode.disabled;
-                    }
-
-                    // noCascadeChecks is not relevant here
-                    // noCascadeDisabled is
                     if (newNode.isParent && node.children.length > 0) {
                         flatten(node.children, newNode, depth + 1);
 
@@ -262,13 +250,26 @@ class TreeModel {
     }
     */
 
-    getDisabled() {
+    getDisabled(disabledCascade = this.options.disabledCascade) {
         const disabledArray = [];
-        Object.keys(this.nodes).forEach((key) => {
-            if (this.nodes[key].disabled) {
-                disabledArray.push(key);
+
+        const walkTree = (nodeKey, ancestorDisabled = false) => {
+            const node = this.getNode(nodeKey);
+            const disabled = node.disabled || (disabledCascade && ancestorDisabled);
+            if (disabled) {
+                disabledArray.push(nodeKey);
             }
+            if (node.childKeys) {
+                node.childKeys.forEach((key) => {
+                    walkTree(key, disabled);
+                });
+            }
+        };
+
+        this.rootKeys.forEach((key) => {
+            walkTree(key);
         });
+
         return disabledArray;
     }
 
@@ -313,6 +314,8 @@ class TreeModel {
         const { noCascadeChecks, optimisticToggle } = this.options;
         const node = this.getNode(nodeKey);
 
+        // TODO: what about ancestor.disabled? and disabledCascade
+
         // NOTE: disabled may not be needed here
         //       toggleChecked does not get called if node is disabled
         if (node.disabled ||
@@ -385,7 +388,9 @@ class TreeModel {
     }
 
     toggleDisabled(nodeKey) {
-        const toggleChildren = !this.options.noCascadeDisabled;
+        // do not change children - they are handled in CheckboxTree when rendered
+        // const toggleChildren = this.options.disabledCascade;
+        const toggleChildren = false;
         const newTree = this.toggleProperty(nodeKey, 'disabled', toggleChildren);
         return newTree;
     }
@@ -463,25 +468,6 @@ class TreeModel {
             }
         });
     }
-
-    //--------------------------------------------------------------------------
-    // TODO: these functions need review
-
-    getDisabledState(nodeKey, disabledProp, noCascade) {
-        // TODO: how to handle disabledProp and noCascade
-        //       are they in this.options? or passed
-        const node = this.getNode(nodeKey);
-        const parent = this.getNode(node.parentKey);
-        if (disabledProp) {
-            return true;
-        }
-
-        if (!noCascade && parent.disabled) {
-            return true;
-        }
-
-        return Boolean(node.disabled);
-    }
 }
 
 export default TreeModel;
diff --git a/test/CheckboxTree.jsx b/test/CheckboxTree.jsx
index 4a6e45f6..d6ccf028 100644
--- a/test/CheckboxTree.jsx
+++ b/test/CheckboxTree.jsx
@@ -691,7 +691,7 @@ describe('<CheckboxTree />', () => {
                 assert.isTrue(screen.getByLabelText('Jupiter').disabled);
             });
 
-            it('should disable the child nodes when `noCascadeDisabled` is false', () => {
+            it('should disable the child nodes when `disabledCascade` is true', () => {
                 let tree = new TreeModel([
                     {
                         value: 'jupiter',
@@ -716,7 +716,7 @@ describe('<CheckboxTree />', () => {
                 assert.isTrue(screen.getByLabelText('Europa').disabled);
             });
 
-            it('should NOT disable the child nodes when `noCascadeDisabled` is true', () => {
+            it('should NOT disable the child nodes when `disabledCascade` is false', () => {
                 // TODO: figure out about TreeModel options
                 let tree = new TreeModel([
                     {
@@ -728,11 +728,10 @@ describe('<CheckboxTree />', () => {
                             { value: 'europa', label: 'Europa' },
                         ],
                     },
-                ], { noCascadeDisabled: true });
+                ], { disabledCascade: false });
 
                 render(
                     <CheckboxTree
-                        noCascadeDisabled
                         tree={tree}
                         onChange={(newTree) => {
                             tree = newTree;
diff --git a/test/TreeModel.js b/test/TreeModel.js
index bb41f0f0..914c71ee 100644
--- a/test/TreeModel.js
+++ b/test/TreeModel.js
@@ -44,7 +44,7 @@ const defaultOptions = {
     checkModel: 'leaf',
     disabled: false,
     noCascadeChecks: false,
-    noCascadeDisabled: false,
+    disabledCascade: true,
     optimisticToggle: true,
     setTreeModel: () => {},
 };
@@ -318,11 +318,38 @@ describe('TreeModel', () => {
     });
 
     describe('getDisabled()', () => {
-        it('should return the array of disabled nodes', () => {
-            const expected = ['0-1-0', '0-1-1', '0-1'];
+        it("should return disabled nodes based upon 'disabledCascade` option in tree.options", () => {
+            const expected1 = ['0-1', '0-1-0', '0-1-0-0', '0-1-1', '0-1-1-0'];
+
+            let treeModel = new TreeModel(nestedTree, { ...defaultOptions, disabledCascade: true });
+            let newTreeModel = treeModel.toggleDisabled('0-1');
+            const actual1 = newTreeModel.getDisabled();
+
+            const expected2 = ['0-1', '0-1-0-0'];
+            treeModel = new TreeModel(nestedTree, { ...defaultOptions, disabledCascade: false });
+            newTreeModel = treeModel.toggleDisabled('0-1');
+            newTreeModel = newTreeModel.toggleDisabled('0-1-0-0');
+            const actual2 = newTreeModel.getDisabled();
+
+            assert.deepEqual(expected1, actual1);
+            assert.deepEqual(expected2, actual2);
+        });
+
+        it('should return nodes with disabled property = true and their children when disabledCascade = true', () => {
+            const expected = ['0-1', '0-1-0', '0-1-0-0', '0-1-1', '0-1-1-0'];
             const treeModel = new TreeModel(nestedTree, defaultOptions);
             const newTreeModel = treeModel.toggleDisabled('0-1');
-            const actual = newTreeModel.getDisabled();
+            const actual = newTreeModel.getDisabled(true);
+
+            assert.deepEqual(expected, actual);
+        });
+
+        it('should return only nodes with disabled property = true when disabledCascade = false', () => {
+            const expected = ['0-1', '0-1-0-0'];
+            const treeModel = new TreeModel(nestedTree, defaultOptions);
+            let newTreeModel = treeModel.toggleDisabled('0-1');
+            newTreeModel = newTreeModel.toggleDisabled('0-1-0-0');
+            const actual = newTreeModel.getDisabled(false);
 
             assert.deepEqual(expected, actual);
         });
@@ -440,21 +467,23 @@ describe('TreeModel', () => {
 
     describe('toggleDisabled(nodeKey)', () => {
         it('should return a new TreeModel with disabled property toggled on node with value === nodeKey', () => {
-            const expected = ['0-1-0', '0-1-1', '0-1'];
+            const expected = ['0-1'];
             const treeModel = new TreeModel(nestedTree, defaultOptions);
             const newTreeModel = treeModel.toggleDisabled('0-1');
-            const actual = newTreeModel.getDisabled();
+            const actual = newTreeModel.getDisabled(false);
 
             assert.deepEqual(expected, actual);
         });
 
-        it('should not disable child nodes if noCascadeDisabled === true', () => {
-            const expected = ['0-1'];
+        // actually toggleDisabled never toggles child nodes!
+        it('should not disable child nodes if disabledCascade === false', () => {
+            const expected = ['0-1', '0-1-0-0'];
             const treeModel = new TreeModel(
                 nestedTree,
-                { ...defaultOptions, noCascadeDisabled: true },
+                { ...defaultOptions, disabledCascade: false },
             );
-            const newTreeModel = treeModel.toggleDisabled('0-1');
+            let newTreeModel = treeModel.toggleDisabled('0-1');
+            newTreeModel = newTreeModel.toggleDisabled('0-1-0-0');
             const actual = newTreeModel.getDisabled();
 
             assert.deepEqual(expected, actual);

From a2f879974d04b0f19ad79326a571335f1c451ded Mon Sep 17 00:00:00 2001
From: Worth Lutz <worthlutz@mindspring.com>
Date: Wed, 12 Jul 2023 15:26:05 -0400
Subject: [PATCH 17/17] update all TreeModel methods to account for disabled
 nodes

---
 src/js/models/TreeModel.js | 214 +++++++++++++++++++++++--------------
 1 file changed, 131 insertions(+), 83 deletions(-)

diff --git a/src/js/models/TreeModel.js b/src/js/models/TreeModel.js
index 6d6c7ec8..bc2bf154 100644
--- a/src/js/models/TreeModel.js
+++ b/src/js/models/TreeModel.js
@@ -59,18 +59,17 @@ class TreeModel {
 
         if (treeConfig instanceof TreeModel) {
             // this is a clone request
-            // NOTE: nodes are not cloned. They are only cloned when
-            //       actually changed to reduce TreeNode rerenders
             this.rootKeys = [...treeConfig.rootKeys];
             this.unfilteredRootKeys = [...treeConfig.unfilteredRootKeys];
             this.options = { ...treeConfig.options };
+            // NOTE: Individual nodes are not cloned. They are only cloned when
+            //       actually changed to reduce TreeNode rerenders
             this.nodes = {};
             Object.keys(treeConfig.nodes).forEach((key) => {
                 this.nodes[key] = treeConfig.nodes[key];
             });
         } else {
-            // treeConfig is a nodeShape
-            // these are options passed from CheckboxTree
+            // treeConfig is a nodeShape to be converted to TreeModel instance
             this.options = { ...options };
 
             // treeConfig is an array of nodes - save node.value as rootKeys
@@ -92,10 +91,22 @@ class TreeModel {
     //--------------------------------------------------------------------------
     // Public functions
 
+    /**
+     * Clones the TreeModel instance.
+     *
+     * @returns {TreeModel} updated TreeModel instance
+     */
     clone() {
         return new TreeModel(this);
     }
 
+    /**
+     * Expands all parent nodes.
+     *
+     * @param {boolean} expandValue whether to expand (true) or compress (false) nodes
+     *
+     * @returns {TreeModel} updated TreeModel instance
+     */
     expandAllNodes(expandValue = true) {
         const newTree = this.clone();
         Object.keys(newTree.nodes).forEach((key) => {
@@ -109,11 +120,11 @@ class TreeModel {
     }
 
     /**
-     * Returns an updated TreeModel.
+     * Expands all parent nodes down to the targetLevel.
      *
      * @param {number} targetLevel How deep to expand the nodes.
      *
-     * @returns {TreeModel}
+     * @returns {TreeModel} updated TreeModel instance
      */
     expandNodesToLevel(targetLevel) {
         const newTree = this.clone();
@@ -136,6 +147,14 @@ class TreeModel {
         return newTree;
     }
 
+    /**
+     * Filters the TreeModel instance based upon a test function.
+     *
+     * @param {function(nodeModel): boolean} testFunc Function which determines if the given
+     *    node should be shown in the tree.
+     *
+     * @returns {TreeModel} updated TreeModel instance
+     */
     filter(testFunc) {
         if (typeof testFunc !== 'function') {
             // invalid value error
@@ -169,29 +188,40 @@ class TreeModel {
         return newTree;
     }
 
-    getChecked() {
-        // TODO: should this method have a checkModel argument to override
-        //       the one in options
-        const { checkModel } = this.options;
+    /**
+     * Returns the array of checked nodes based upon the checkModel value.
+     *
+     * @param {string} [checkModel] checkModel value oneOf ['leaf' || 'parent' || 'all']
+     *
+     * @param {boolean} [excludeDisabled = true] whether checked but disabled nodes will
+     *    be included in array
+     *
+     * @returns {array.<string>} Array of node.value where the node is checked
+     */
+    getChecked(checkModel = '', excludeDisabled = true) {
         const checkedArray = [];
-
-        let test;
-        if (checkModel === CHECK_MODEL.ALL) {
-            test = (node) => (node.checkState > 0);
-        } else if (checkModel === CHECK_MODEL.PARENT) {
-            test = (node) => (node.isParent && node.checkState > 0);
-        } else if (checkModel === CHECK_MODEL.LEAF) {
-            test = (node) => (node.isLeaf && node.checkState > 0);
+        const checkTest = checkModel || this.options.checkModel || CHECK_MODEL.LEAF;
+        const { disabledCascade } = this.options;
+
+        let testFn;
+        if (checkTest === CHECK_MODEL.ALL) {
+            testFn = (node) => (node.checkState > 0);
+        } else if (checkTest === CHECK_MODEL.PARENT) {
+            testFn = (node) => (node.isParent && node.checkState > 0);
+        } else if (checkTest === CHECK_MODEL.LEAF) {
+            testFn = (node) => (node.isLeaf && node.checkState > 0);
         } else {
             // invalid value error
             throw new TreeModelError(
-                `Invalid value '${checkModel}' of checkModel in TreeModel.getChecked method.`,
+                `Invalid value '${checkTest}' of checkModel in TreeModel.getChecked method.`,
             );
         }
 
-        const walkTree = (nodeKey) => {
+        const walkTree = (nodeKey, ancestorDisabled = false) => {
             const node = this.getNode(nodeKey);
-            if (!node.disabled && test(node)) {
+            const disabled = node.disabled || (disabledCascade && ancestorDisabled);
+
+            if ((excludeDisabled && !disabled) && testFn(node)) {
                 checkedArray.push(nodeKey);
             }
             if (node.isParent) {
@@ -202,7 +232,7 @@ class TreeModel {
                 //       ignoreCheckedBelowRadioOff: default to true
                 if (!((node.checkState === 0) && (node.isRadioGroup || node.isRadioNode))) {
                     node.childKeys.forEach((key) => {
-                        walkTree(key);
+                        walkTree(key, disabled);
                     });
                 }
             }
@@ -215,44 +245,19 @@ class TreeModel {
         return checkedArray;
     }
 
-    /*
-    // with no radio nodes this works
-    getChecked_old() {
-        const checkModel = this.options.checkModel || CHECK_MODEL.LEAF;
-        const checkedArray = [];
-        const keys = Object.keys(this.nodes);
-
-        const pushCheckedKeys = (testFn) => {
-            keys.forEach((key) => {
-                const node = this.getNode(key);
-                if (testFn(node)) {
-                    checkedArray.push(key);
-                }
-            });
-        };
-
-        let test;
-        if (checkModel === CHECK_MODEL.ALL) {
-            test = (node) => (node.checkState > 0);
-        } else if (checkModel === CHECK_MODEL.PARENT) {
-            test = (node) => (node.isParent && node.checkState > 0);
-        } else if (checkModel === CHECK_MODEL.LEAF) {
-            test = (node) => (node.isLeaf && node.checkState > 0);
-        } else {
-            // invalid value error
-            throw new TreeModelError(
-                `Invalid value '${checkModel}' passed to TreeModel.getChecked method.`,
-            );
-        }
-
-        pushCheckedKeys(test);
-        return checkedArray;
-    }
-    */
-
+    /**
+     * Returns the array of disabled nodes
+     *
+     * @param {boolean} [disabledCascade = this.options.disabledCascade] optional parameter
+     *    to override the default value from this.options
+     *
+     * @returns {array.<string>} Array of node.value where the node is disabled
+     */
     getDisabled(disabledCascade = this.options.disabledCascade) {
         const disabledArray = [];
 
+        // TODO: what about radio nodes here?
+
         const walkTree = (nodeKey, ancestorDisabled = false) => {
             const node = this.getNode(nodeKey);
             const disabled = node.disabled || (disabledCascade && ancestorDisabled);
@@ -273,8 +278,14 @@ class TreeModel {
         return disabledArray;
     }
 
-    // includes expanded children with parent collapsed
+    /**
+     * Returns the array of expanded nodes
+     *
+     * @returns {array.<string>} Array of node.value where the node is expanded
+     */
     getExpanded() {
+        // includes expanded children with parent collapsed
+        // TODO: should this include above children?
         const expandedArray = [];
         Object.keys(this.nodes).forEach((key) => {
             if (this.nodes[key].expanded) {
@@ -284,10 +295,22 @@ class TreeModel {
         return expandedArray;
     }
 
+    /**
+     * Returns the node with node.value === nodeKey
+     *
+     * @param {string} nodeKey value property of desired node
+     *
+     * @returns {NodeModel}
+     */
     getNode(nodeKey) {
         return this.nodes[nodeKey];
     }
 
+    /**
+     * Removes a filter from the TreeModel instance
+     *
+     * @returns {TreeModel} updated TreeModel instance
+     */
     removeFilter() {
         const newTree = this.clone();
 
@@ -309,16 +332,20 @@ class TreeModel {
         return newTree;
     }
 
+    /**
+     * Toggles the checked property of the node with node.value === nodeKey
+     *
+     * @param {string} nodeKey value property of desired node
+     *
+     * @returns {TreeModel} updated TreeModel instance
+     */
     toggleChecked(nodeKey) {
         // TODO: should these options be able to be overidden with an options argument
-        const { noCascadeChecks, optimisticToggle } = this.options;
+        const { disabledCascade, noCascadeChecks, optimisticToggle } = this.options;
         const node = this.getNode(nodeKey);
 
-        // TODO: what about ancestor.disabled? and disabledCascade
-
-        // NOTE: disabled may not be needed here
-        //       toggleChecked does not get called if node is disabled
-        if (node.disabled ||
+        if (node.disabled || (disabledCascade && this.hasDisabledAncestor(node)) ||
+            // do nothing if radio node is already selected
             ((node.isRadioNode) && (node.checkState > 0))
         ) {
             // TODO: should this be return FALSE?
@@ -374,8 +401,7 @@ class TreeModel {
                 const { parentKey } = child;
                 const newParent = newTree.getNode(parentKey).clone();
                 if (newParent.isRadioNode) {
-                    // do not percolate up
-                    break;
+                    break; // do not percolate up
                 } else {
                     newParent.checkState = newTree.getCheckState(newParent);
                     newTree.nodes[parentKey] = newParent;
@@ -387,20 +413,35 @@ class TreeModel {
         return newTree;
     }
 
+    /**
+     * Toggles the disabled property of the node with node.value === nodeKey
+     *
+     * @param {string} nodeKey value property of desired node
+     *
+     * @returns {TreeModel} updated TreeModel instance
+     */
     toggleDisabled(nodeKey) {
-        // do not change children - they are handled in CheckboxTree when rendered
-        // const toggleChildren = this.options.disabledCascade;
-        const toggleChildren = false;
-        const newTree = this.toggleProperty(nodeKey, 'disabled', toggleChildren);
-        return newTree;
+        return this.toggleProperty(nodeKey, 'disabled');
     }
 
+    /**
+     * Toggles the expanded property of the node with node.value === nodeKey
+     *
+     * @param {string} nodeKey value property of desired node
+     *
+     * @returns {TreeModel} updated TreeModel instance
+     */
     toggleExpanded(nodeKey) {
-        const toggleChildren = false;
-        const newTree = this.toggleProperty(nodeKey, 'expanded', toggleChildren);
-        return newTree;
+        return this.toggleProperty(nodeKey, 'expanded');
     }
 
+    /**
+     * Updates the options property of the TreeModel instance.
+     *
+     * @param {object} newOptions object containing the new options
+     *
+     * @returns {TreeModel} updated TreeModel instance
+     */
     updateOptions(newOptions) {
         const newTree = this.clone();
         newTree.options = { ...newTree.options, ...newOptions };
@@ -420,6 +461,21 @@ class TreeModel {
         return 0;
     }
 
+    hasDisabledAncestor(node) {
+        let child = node;
+
+        let disabled = false;
+        while (child && child.isChild && !disabled) {
+            const parent = this.getNode(child.parentKey);
+            disabled = (parent && (parent.disabled ||
+                // all children below a 'not selected' radio node are disabled
+                ((parent.isRadioNode) && (parent.checkState === 0))
+            ));
+            child = parent;
+        }
+        return disabled;
+    }
+
     howManyChildrenChecked(node) {
         return node.childKeys.filter((childKey) => this.getNode(childKey).checkState !== 0).length;
     }
@@ -436,7 +492,7 @@ class TreeModel {
         return node.childKeys.some((childKey) => this.getNode(childKey).checkState > 0);
     }
 
-    toggleProperty(nodeKey, propertyName, toggleChildren = false) {
+    toggleProperty(nodeKey, propertyName) {
         const newNode = this.getNode(nodeKey).clone();
         const newValue = !newNode[propertyName];
         newNode[propertyName] = newValue;
@@ -444,14 +500,6 @@ class TreeModel {
         const newTree = this.clone();
         newTree.nodes[nodeKey] = newNode;
 
-        if (toggleChildren && newNode.isParent) {
-            newNode.childKeys.forEach((childKey) => {
-                const node = this.getNode(childKey).clone();
-                node[propertyName] = newValue;
-                newTree.nodes[childKey] = node;
-            });
-        }
-
         return newTree;
     }