[TreeView] Add expansionTrigger prop (#13533)

Signed-off-by: Nora <72460825+noraleonte@users.noreply.github.com>
Co-authored-by: Flavien DELANGLE <flaviendelangle@gmail.com>

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

@@ -64,12 +64,6 @@ The demo below shows how to add an avatar and custom typography elements.
 
 ## Common examples
 
-### Limit expansion to icon container
-
-The demo below shows how to trigger the expansion interaction just by clicking on the icon container instead of the whole Tree Item surface.
-
-{{"demo": "IconExpansionTreeView.js", "defaultCodeOpen": false}}
-
 ### File explorer
 
 :::warning

docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js → docs/data/tree-view/rich-tree-view/expansion/IconExpansionTreeView.js

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
-
-import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
 
 const MUI_X_PRODUCTS = [
   {
@@ -35,37 +32,10 @@ const MUI_X_PRODUCTS = [
   },
 ];
 
-const CustomTreeItem = React.forwardRef(function MyTreeItem(props, ref) {
-  const { interactions } = useTreeItem2Utils({
-    itemId: props.itemId,
-    children: props.children,
-  });
-
-  const handleContentClick = (event) => {
-    event.defaultMuiPrevented = true;
-    interactions.handleSelection(event);
-  };
-
-  const handleIconContainerClick = (event) => {
-    interactions.handleExpansion(event);
-  };
-
-  return (
-    <TreeItem2
-      {...props}
-      ref={ref}
-      slotProps={{
-        content: { onClick: handleContentClick },
-        iconContainer: { onClick: handleIconContainerClick },
-      }}
-    />
-  );
-});
-
 export default function IconExpansionTreeView() {
   return (
     <Box sx={{ minHeight: 352, minWidth: 250 }}>
-      <RichTreeView items={MUI_X_PRODUCTS} slots={{ item: CustomTreeItem }} />
+      <RichTreeView items={MUI_X_PRODUCTS} expansionTrigger="iconContainer" />
     </Box>
   );
 }

docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx → docs/data/tree-view/rich-tree-view/expansion/IconExpansionTreeView.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
-import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
-import { UseTreeItem2ContentSlotOwnProps } from '@mui/x-tree-view/useTreeItem2';
-import { TreeItem2, TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
 import { TreeViewBaseItem } from '@mui/x-tree-view/models';
 
 const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
@@ -36,40 +33,10 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   },
 ];
 
-const CustomTreeItem = React.forwardRef(function MyTreeItem(
-  props: TreeItem2Props,
-  ref: React.Ref<HTMLLIElement>,
-) {
-  const { interactions } = useTreeItem2Utils({
-    itemId: props.itemId,
-    children: props.children,
-  });
-
-  const handleContentClick: UseTreeItem2ContentSlotOwnProps['onClick'] = (event) => {
-    event.defaultMuiPrevented = true;
-    interactions.handleSelection(event);
-  };
-
-  const handleIconContainerClick = (event: React.MouseEvent) => {
-    interactions.handleExpansion(event);
-  };
-
-  return (
-    <TreeItem2
-      {...props}
-      ref={ref}
-      slotProps={{
-        content: { onClick: handleContentClick },
-        iconContainer: { onClick: handleIconContainerClick },
-      }}
-    />
-  );
-});
-
 export default function IconExpansionTreeView() {
   return (
     <Box sx={{ minHeight: 352, minWidth: 250 }}>
-      <RichTreeView items={MUI_X_PRODUCTS} slots={{ item: CustomTreeItem }} />
+      <RichTreeView items={MUI_X_PRODUCTS} expansionTrigger="iconContainer" />
     </Box>
   );
 }

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

@@ -0,0 +1 @@
+<RichTreeView items={MUI_X_PRODUCTS} expansionTrigger="iconContainer" />

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

@@ -33,6 +33,12 @@ Use the `onItemExpansionToggle` prop if you want to react to an item expansion c
 
 {{"demo": "TrackItemExpansionToggle.js"}}
 
+## Limit expansion to icon container
+
+You can use the `expansionTrigger` prop to decide if the expansion interaction should be triggered by clicking on the icon container instead of the whole Tree Item content.
+
+{{"demo": "IconExpansionTreeView.js"}}
+
 ## Imperative API
 
 :::success

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

@@ -70,19 +70,6 @@ Target the `treeItemClasses.groupTransition` class to add connection borders bet
 
 {{"demo": "BorderedTreeView.js", "defaultCodeOpen": false}}
 
-### Limit expansion to icon container
-
-:::warning
-This example is built using the new `TreeItem2` component
-which adds several slots to modify the content of the Tree Item or change its behavior.
-
-You can learn more about this new component in the [Overview page](/x/react-tree-view/#tree-item-components).
-:::
-
-The demo below shows how to trigger the expansion interaction just by clicking on the icon container instead of the whole Tree Item surface.
-
-{{"demo": "IconExpansionTreeView.js", "defaultCodeOpen": false}}
-
 ### Gmail clone
 
 :::warning

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+
+export default function IconExpansionTreeView() {
+  return (
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView aria-label="icon expansion" expansionTrigger="iconContainer">
+        <TreeItem itemId="grid" label="Data Grid">
+          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
+          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
+        </TreeItem>
+        <TreeItem itemId="pickers" label="Date and Time Pickers">
+          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </TreeItem>
+        <TreeItem itemId="charts" label="Charts">
+          <TreeItem itemId="charts-community" label="@mui/x-charts" />
+        </TreeItem>
+        <TreeItem itemId="tree-view" label="Tree View">
+          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </TreeItem>
+      </SimpleTreeView>
+    </Box>
+  );
+}

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+
+export default function IconExpansionTreeView() {
+  return (
+    <Box sx={{ minHeight: 352, minWidth: 250 }}>
+      <SimpleTreeView aria-label="icon expansion" expansionTrigger="iconContainer">
+        <TreeItem itemId="grid" label="Data Grid">
+          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
+          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
+          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
+        </TreeItem>
+        <TreeItem itemId="pickers" label="Date and Time Pickers">
+          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
+          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </TreeItem>
+        <TreeItem itemId="charts" label="Charts">
+          <TreeItem itemId="charts-community" label="@mui/x-charts" />
+        </TreeItem>
+        <TreeItem itemId="tree-view" label="Tree View">
+          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
+        </TreeItem>
+      </SimpleTreeView>
+    </Box>
+  );
+}

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

@@ -32,6 +32,12 @@ Use the `onItemExpansionToggle` prop to trigger an action upon an item being exp
 
 {{"demo": "TrackItemExpansionToggle.js"}}
 
+## Limit expansion to icon container
+
+You can use the `expansionTrigger` prop to decide if the expansion interaction should be triggered by clicking on the icon container instead of the whole Tree Item content.
+
+{{"demo": "IconExpansionTreeView.js"}}
+
 ## Imperative API
 
 :::success

docs/pages/x/api/tree-view/rich-tree-view.json

@@ -16,6 +16,10 @@
     "disabledItemsFocusable": { "type": { "name": "bool" }, "default": "false" },
     "disableSelection": { "type": { "name": "bool" }, "default": "false" },
     "expandedItems": { "type": { "name": "arrayOf", "description": "Array<string>" } },
+    "expansionTrigger": {
+      "type": { "name": "enum", "description": "'content'<br>&#124;&nbsp;'iconContainer'" },
+      "default": "'content'"
+    },
     "experimentalFeatures": {
       "type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" }
     },

docs/pages/x/api/tree-view/simple-tree-view.json

@@ -17,6 +17,10 @@
     "disabledItemsFocusable": { "type": { "name": "bool" }, "default": "false" },
     "disableSelection": { "type": { "name": "bool" }, "default": "false" },
     "expandedItems": { "type": { "name": "arrayOf", "description": "Array<string>" } },
+    "expansionTrigger": {
+      "type": { "name": "enum", "description": "'content'<br>&#124;&nbsp;'iconContainer'" },
+      "default": "'content'"
+    },
     "experimentalFeatures": {
       "type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" }
     },

docs/pages/x/api/tree-view/tree-view.json

@@ -17,6 +17,10 @@
     "disabledItemsFocusable": { "type": { "name": "bool" }, "default": "false" },
     "disableSelection": { "type": { "name": "bool" }, "default": "false" },
     "expandedItems": { "type": { "name": "arrayOf", "description": "Array<string>" } },
+    "expansionTrigger": {
+      "type": { "name": "enum", "description": "'content'<br>&#124;&nbsp;'iconContainer'" },
+      "default": "'content'"
+    },
     "experimentalFeatures": {
       "type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" }
     },

docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json

@@ -21,6 +21,9 @@
     "expandedItems": {
       "description": "Expanded item ids. Used when the item's expansion is controlled."
     },
+    "expansionTrigger": {
+      "description": "The slot that triggers the item's expansion when clicked."
+    },
     "experimentalFeatures": {
       "description": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to <code>true</code>, the feature will be fully disabled and any property / method call will not have any effect."
     },

docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json

@@ -22,6 +22,9 @@
     "expandedItems": {
       "description": "Expanded item ids. Used when the item's expansion is controlled."
     },
+    "expansionTrigger": {
+      "description": "The slot that triggers the item's expansion when clicked."
+    },
     "experimentalFeatures": {
       "description": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to <code>true</code>, the feature will be fully disabled and any property / method call will not have any effect."
     },