diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md
index 9f04e9d48e7c..337391ba7eba 100644
--- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md
+++ b/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
+
+```
+
+:::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
+
+ console.log(nodeId, isExpanded)
+ }
+/>
+```
+
+:::
diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js
new file mode 100644
index 000000000000..f9f262020d0a
--- /dev/null
+++ b/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 (
+
+ {action == null ? (
+ No action recorded
+ ) : (
+
+ Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
+
+ )}
+
+
+ }
+ defaultExpandIcon={}
+ />
+
+
+ );
+}
diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx
new file mode 100644
index 000000000000..c2ead67ee60d
--- /dev/null
+++ b/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 (
+
+ {action == null ? (
+ No action recorded
+ ) : (
+
+ Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
+
+ )}
+
+ }
+ defaultExpandIcon={}
+ />
+
+
+ );
+}
diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview
new file mode 100644
index 000000000000..f72ae69f0d3d
--- /dev/null
+++ b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview
@@ -0,0 +1,15 @@
+{action == null ? (
+ No action recorded
+) : (
+
+ Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
+
+)}
+
+ }
+ defaultExpandIcon={}
+ />
+
\ No newline at end of file
diff --git a/docs/data/tree-view/rich-tree-view/expansion/expansion.md b/docs/data/tree-view/rich-tree-view/expansion/expansion.md
index 98a3574501fa..a0c5d31feeb2 100644
--- a/docs/data/tree-view/rich-tree-view/expansion/expansion.md
+++ b/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"}}
diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js b/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js
new file mode 100644
index 000000000000..89f288ac3617
--- /dev/null
+++ b/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 (
+
+ {action == null ? (
+ No action recorded
+ ) : (
+
+ Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
+
+ )}
+
+
+ }
+ defaultExpandIcon={}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx b/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx
new file mode 100644
index 000000000000..82add0a74e37
--- /dev/null
+++ b/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 (
+
+ {action == null ? (
+ No action recorded
+ ) : (
+
+ Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
+
+ )}
+
+ }
+ defaultExpandIcon={}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/tree-view/simple-tree-view/expansion/expansion.md b/docs/data/tree-view/simple-tree-view/expansion/expansion.md
index fea4b42db244..a71aa5eefe39 100644
--- a/docs/data/tree-view/simple-tree-view/expansion/expansion.md
+++ b/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"}}