[docs] Add example for TreeView onNodeExpansionToggle prop

docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md

@@ -73,3 +73,40 @@ If you were using the `treeViewClasses` object, you can replace it with the new
 - const rootClass = treeViewClasses.root;
 + const rootClass = simpleTreeViewClasses.root;
 ```
+
+### Rename `onNodeToggle`, `expanded` and `defaultExpanded`
+
+The expansion props have been renamed to better describe their behaviors:
+
+| Old name          | New name                |
+| :---------------- | :---------------------- |
+| `onNodeToggle`    | `onExpandedNodesChange` |
+| `expanded`        | `expandedNodes`         |
+| `defaultExpanded` | `defaultExpandedNodes`  |
+
+```diff
+  <TreeView
+-   onNodeToggle={handleExpansionChange}
++   onExpandedNodesChange={handleExpansionChange}
+
+-   expanded={expandedNodes}
++   expandedNodes={expandedNodes}
+
+-   defaultExpanded={defaultExpandedNodes}
++   defaultExpandedNodes={defaultExpandedNodes}
+  />
+```
+
+:::info
+If you were using the `onNodeToggle` prop to react to the expansion or collapse of a specific node,
+you can use the new `onNodeExpansionToggle` prop which is called whenever a node is expanded or collapsed with its id and expansion status
+
+```tsx
+<TreeView
+  onNodeExpansionToggle={(event, nodeId, isExpanded) =>
+    console.log(nodeId, isExpanded)
+  }
+/>
+```
+
+:::

docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+
+import Typography from '@mui/material/Typography';
+
+const MUI_X_PRODUCTS = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
+];
+
+export default function TrackNodeExpansionToggle() {
+  const [action, setAction] = React.useState(null);
+
+  const handleNodeExpansionToggle = (event, nodeId, isExpanded) => {
+    setAction({ nodeId, isExpanded });
+  };
+
+  return (
+    <Stack spacing={2}>
+      {action == null ? (
+        <Typography>No action recorded</Typography>
+      ) : (
+        <Typography>
+          Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
+        </Typography>
+      )}
+
+      <Box sx={{ height: 264, flexGrow: 1 }}>
+        <RichTreeView
+          items={MUI_X_PRODUCTS}
+          onNodeExpansionToggle={handleNodeExpansionToggle}
+          defaultCollapseIcon={<ExpandMoreIcon />}
+          defaultExpandIcon={<ChevronRightIcon />}
+        />
+      </Box>
+    </Stack>
+  );
+}

docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+import Typography from '@mui/material/Typography';
+
+const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
+];
+
+export default function TrackNodeExpansionToggle() {
+  const [action, setAction] = React.useState<{
+    nodeId: string;
+    isExpanded: boolean;
+  } | null>(null);
+
+  const handleNodeExpansionToggle = (
+    event: React.SyntheticEvent,
+    nodeId: string,
+    isExpanded: boolean,
+  ) => {
+    setAction({ nodeId, isExpanded });
+  };
+
+  return (
+    <Stack spacing={2}>
+      {action == null ? (
+        <Typography>No action recorded</Typography>
+      ) : (
+        <Typography>
+          Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
+        </Typography>
+      )}
+      <Box sx={{ height: 264, flexGrow: 1 }}>
+        <RichTreeView
+          items={MUI_X_PRODUCTS}
+          onNodeExpansionToggle={handleNodeExpansionToggle}
+          defaultCollapseIcon={<ExpandMoreIcon />}
+          defaultExpandIcon={<ChevronRightIcon />}
+        />
+      </Box>
+    </Stack>
+  );
+}

docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview

@@ -0,0 +1,15 @@
+{action == null ? (
+  <Typography>No action recorded</Typography>
+) : (
+  <Typography>
+    Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
+  </Typography>
+)}
+<Box sx={{ height: 264, flexGrow: 1 }}>
+  <RichTreeView
+    items={MUI_X_PRODUCTS}
+    onNodeExpansionToggle={handleNodeExpansionToggle}
+    defaultCollapseIcon={<ExpandMoreIcon />}
+    defaultExpandIcon={<ChevronRightIcon />}
+  />
+</Box>

docs/data/tree-view/rich-tree-view/expansion/expansion.md

@@ -26,3 +26,9 @@ You can use the `onNodeToggle` prop to listen to changes in the expanded items a
 
 Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
 :::
+
+## Track node expansion change
+
+Use the `onNodeExpansionToggle` if you want to react to a node expansion toggling:
+
+{{"demo": "TrackNodeExpansionToggle.js"}}

docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import Typography from '@mui/material/Typography';
+
+export default function TrackNodeExpansionToggle() {
+  const [action, setAction] = React.useState(null);
+
+  const handleNodeExpansionToggle = (event, nodeId, isExpanded) => {
+    setAction({ nodeId, isExpanded });
+  };
+
+  return (
+    <Stack spacing={2}>
+      {action == null ? (
+        <Typography>No action recorded</Typography>
+      ) : (
+        <Typography>
+          Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
+        </Typography>
+      )}
+
+      <Box sx={{ height: 264, flexGrow: 1 }}>
+        <SimpleTreeView
+          onNodeExpansionToggle={handleNodeExpansionToggle}
+          defaultCollapseIcon={<ExpandMoreIcon />}
+          defaultExpandIcon={<ChevronRightIcon />}
+        >
+          <TreeItem nodeId="grid" label="Data Grid">
+            <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
+            <TreeItem nodeId="grid-pro" label="@mui/x-data-grid-pro" />
+            <TreeItem nodeId="grid-premium" label="@mui/x-data-grid-premium" />
+          </TreeItem>
+          <TreeItem nodeId="pickers" label="Date and Time Pickers">
+            <TreeItem nodeId="pickers-community" label="@mui/x-date-pickers" />
+            <TreeItem nodeId="pickers-pro" label="@mui/x-date-pickers-pro" />
+          </TreeItem>
+          <TreeItem nodeId="charts" label="Charts">
+            <TreeItem nodeId="charts-community" label="@mui/x-charts" />
+          </TreeItem>
+          <TreeItem nodeId="tree-view" label="Tree View">
+            <TreeItem nodeId="tree-view-community" label="@mui/x-tree-view" />
+          </TreeItem>
+        </SimpleTreeView>
+      </Box>
+    </Stack>
+  );
+}

docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import Typography from '@mui/material/Typography';
+
+export default function TrackNodeExpansionToggle() {
+  const [action, setAction] = React.useState<{
+    nodeId: string;
+    isExpanded: boolean;
+  } | null>(null);
+
+  const handleNodeExpansionToggle = (
+    event: React.SyntheticEvent,
+    nodeId: string,
+    isExpanded: boolean,
+  ) => {
+    setAction({ nodeId, isExpanded });
+  };
+
+  return (
+    <Stack spacing={2}>
+      {action == null ? (
+        <Typography>No action recorded</Typography>
+      ) : (
+        <Typography>
+          Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
+        </Typography>
+      )}
+      <Box sx={{ height: 264, flexGrow: 1 }}>
+        <SimpleTreeView
+          onNodeExpansionToggle={handleNodeExpansionToggle}
+          defaultCollapseIcon={<ExpandMoreIcon />}
+          defaultExpandIcon={<ChevronRightIcon />}
+        >
+          <TreeItem nodeId="grid" label="Data Grid">
+            <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
+            <TreeItem nodeId="grid-pro" label="@mui/x-data-grid-pro" />
+            <TreeItem nodeId="grid-premium" label="@mui/x-data-grid-premium" />
+          </TreeItem>
+          <TreeItem nodeId="pickers" label="Date and Time Pickers">
+            <TreeItem nodeId="pickers-community" label="@mui/x-date-pickers" />
+            <TreeItem nodeId="pickers-pro" label="@mui/x-date-pickers-pro" />
+          </TreeItem>
+          <TreeItem nodeId="charts" label="Charts">
+            <TreeItem nodeId="charts-community" label="@mui/x-charts" />
+          </TreeItem>
+          <TreeItem nodeId="tree-view" label="Tree View">
+            <TreeItem nodeId="tree-view-community" label="@mui/x-tree-view" />
+          </TreeItem>
+        </SimpleTreeView>
+      </Box>
+    </Stack>
+  );
+}

docs/data/tree-view/simple-tree-view/expansion/expansion.md

@@ -26,3 +26,9 @@ You can use the `onNodeToggle` prop to listen to changes in the expanded items a
 
 Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
 :::
+
+## Track node expansion change
+
+Use the `onNodeExpansionToggle` if you want to react to a node expansion toggling:
+
+{{"demo": "TrackNodeExpansionToggle.js"}}