[TreeView] Expose the item slots at the tree view level

[flaviendelangle]

The following issue should only be done in v8 because I don't want to introduce an API on the tree view components that would not work with the default TreeItem component. So I'm waiting for us to drop the old customization API before doing it.

Add the following slots to the tree view components:

• itemRoot (passed to the root slot of the TreeItem component)
• itemContent (passed to the content slot of the TreeItem component)
• itemGroupTransition (passed to the groupTransition slot of the TreeItem component)
• itemIconContainer (passed to the iconContainer slot of the TreeItem component)
• itemCheckbox (passed to the checkbox slot of the TreeItem component)
• itemLabel (passed to the label slot of the TreeItem component)

I propose to add those to both SimpleTreeView and RichTreeView and if the slot is defined at the item level then it overrides the one at the tree view level (same as what we do for the icons).

Here is a few customization examples it would simplify:

CustomAnimation.tsx:

--- a/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/CustomAnimation.tsx
@@ -56,7 +56,7 @@ export default function CustomAnimation() {
     <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView
         defaultExpandedItems={['grid']}
-        slotProps={{ item: { slots: { groupTransition: TransitionComponent } } }}
+        slots={{ itemGroupTransition: TransitionComponent }}
         items={MUI_X_PRODUCTS}
       />
     </Box>

LabelSlotProps.tsx:

--- a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx
+++ b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx
@@ -34,27 +34,17 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
   },
 ];
 
-const CustomTreeItem = React.forwardRef(
-  (props: TreeItem2Props, ref: React.Ref<HTMLLIElement>) => (
-    <TreeItem2
-      ref={ref}
-      {...props}
-      slotProps={{
-        label: {
-          id: `${props.itemId}-label`,
-        },
-      }}
-    />
-  ),
-);
-
 export default function LabelSlotProps() {
   return (
     <Box sx={{ minHeight: 352, minWidth: 250 }}>
       <RichTreeView
         items={MUI_X_PRODUCTS}
         defaultExpandedItems={['grid']}
-        slots={{ item: CustomTreeItem }}
+        slotProps={{
+          itemLabel: ({ itemId }) => ({
+            id: `${itemId}-label`,
+          }),
+        }}
       />
     </Box>
   );

Search keywords: