improved main example

apps/website/src/content/docs/tree.mdx

@@ -1,12 +1,16 @@
 ---
 title: Tree
-description: A tree provides a hierarchial lists of data with nested expandable levels.
+description: A tree provides a hierarchical lists of data with nested expandable levels.
 thumbnail: Tree
 ---
 
 <p>{frontmatter.description}</p>
-The `Tree` component can be used to organize data in an application specific way, or it can be used to
-sort, filter, group, or search data as the user deems appropriate.
+
+<LiveExample src='Tree.main.jsx'>
+  <AllExamples.TreeMainExample client:load />
+</LiveExample>
+
+The `Tree` component can be used to organize data in an application specific way, or it can be used to sort, filter, group, or search data as the user deems appropriate.
 
 ## Usage
 
@@ -16,10 +20,6 @@ To initialize the tree component, the following props are required:
 - `getNode`: A function that maps your `data` entry to `NodeData` that has all information about the node state. Here is where one can control the state of expanded, selected and disabled nodes. The function must be memoized.
 - `nodeRenderer`: A function to render the tree node using `NodeData`. We recommend this function to return the `TreeNode` component. This function must be memoized.
 
-<LiveExample src='Tree.main.jsx'>
-  <AllExamples.TreeMainExample client:load />
-</LiveExample>
-
 ### Subnode
 
 The tree supports hierarchial data structures where each node can have subnodes, which can be expanded or collapsed. Subnodes allow handling nested data up to any desired depth.
@@ -63,7 +63,7 @@ The `getNode` function then needs to map the user `data` to a `NodeData`. The pr
 const getNode = React.useCallback(
   (node) => {
     return {
-      /* {Other node's information} */
+      /*...*/
       subNodes: node.subItems,
       hasSubNodes: node.subItems.length > 0,
     };
@@ -91,7 +91,7 @@ The `isExpanded` flag which indicates whether the node is expanded to display it
 const getNode = React.useCallback(
   (node) => {
     return {
-      /* ... */
+      /*...*/
       isExpanded: expandedNodes[node.id],
     };
   },

examples/Tree.main.jsx

@@ -6,28 +6,47 @@ import * as React from 'react';
 import { Tree, TreeNode } from '@itwin/itwinui-react';
 
 export default () => {
-  const generateItem = React.useCallback((index, parentNode = '') => {
-    const keyValue = parentNode ? `${parentNode}-${index}` : `${index}`;
-    return {
-      id: `Node-${keyValue}`,
-      label: `Node ${keyValue}`,
-    };
+  const [expandedNodes, setExpandedNodes] = React.useState({});
+
+  const onNodeExpanded = React.useCallback((nodeId, isExpanded) => {
+    setExpandedNodes((oldExpanded) => ({
+      ...oldExpanded,
+      [nodeId]: isExpanded,
+    }));
   }, []);
 
   const data = React.useMemo(
-    () =>
-      Array(3)
-        .fill(null)
-        .map((_, index) => generateItem(index)),
-    [generateItem],
+    () => [
+      {
+        id: 'Node-0',
+        label: 'Node 0',
+      },
+      {
+        id: 'Node-1',
+        label: 'Node 1',
+        subItems: [{ id: 'Subnode-1', label: 'Subnode 1' }],
+      },
+      {
+        id: 'Node-2',
+        label: 'Node 2',
+        subItems: [{ id: 'Subnode-2', label: 'Subnode 2' }],
+      },
+    ],
+    [],
   );
 
-  const getNode = React.useCallback((node) => {
-    return {
-      nodeId: node.id,
-      node: node,
-    };
-  }, []);
+  const getNode = React.useCallback(
+    (node) => {
+      return {
+        subNodes: node.subItems,
+        nodeId: node.id,
+        node: node,
+        isExpanded: expandedNodes[node.id],
+        hasSubNodes: node.subItems?.length > 0,
+      };
+    },
+    [expandedNodes],
+  );
 
   return (
     <Tree
@@ -36,9 +55,9 @@ export default () => {
       getNode={getNode}
       nodeRenderer={React.useCallback(
         ({ node, ...rest }) => (
-          <TreeNode label={node.label} {...rest} />
+          <TreeNode label={node.label} onExpanded={onNodeExpanded} {...rest} />
         ),
-        [],
+        [onNodeExpanded],
       )}
     />
   );