Merge branch 'next' into issue-11945

docs/data/charts/composition/composition.md

@@ -95,6 +95,12 @@ By modifying the series `type` property, you can switch between rendering a line
 
 ## Subcomponents
 
+:::info
+The CSS `z-index` property does not exist on SVG elements.
+Elements rendered after overlap on top of elements rendered before.
+The order of elements in composition is the only way to define how they overlap.
+:::
+
 ### Plotting
 
 To display data, you have components named `<XxxPlot />` such as `<LinePlot />`, `<AreaPlot />`, `<MarkPlot />`, `<BarPlot />`, etc.

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

@@ -85,7 +85,7 @@ If you were using the `treeViewClasses` object, you can replace it with the new
 #### Define `expandIcon`
 
 The icon used to expand the children of a node (rendered when this node is collapsed)
-is now defined as a slot both on the Tree View and the Tree Item components.
+is now defined as a slot both on the Tree View and the `TreeItem` components.
 
 If you were using the `ChevronRight` icon from `@mui/icons-material`,
 you can stop passing it to your component because it is now the default value:
@@ -116,7 +116,7 @@ you need to use the new `expandIcon` slot on this component:
 Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component.
 :::
 
-If you were passing another icon to your Tree Item component,
+If you were passing another icon to your `TreeItem` component,
 you need to use the new `expandIcon` slot on this component:
 
 ```diff
@@ -133,7 +133,7 @@ you need to use the new `expandIcon` slot on this component:
 #### Define `collapseIcon`
 
 The icon used to collapse the children of a node (rendered when this node is expanded)
-is now defined as a slot both on the Tree View and the Tree Item components.
+is now defined as a slot both on the Tree View and the `TreeItem` components.
 
 If you were using the `ExpandMore` icon from `@mui/icons-material`,
 you can stop passing it to your component because it is now the default value:
@@ -164,7 +164,7 @@ you need to use the new `collapseIcon` slot on this component:
 Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component.
 :::
 
-If you were passing another icon to your Tree Item component,
+If you were passing another icon to your `TreeItem` component,
 you need to use the new `collapseIcon` slot on this component:
 
 ```diff
@@ -198,7 +198,7 @@ by passing the same icon to both the `collapseIcon` and the `expandIcon` slots o
 #### Define `endIcon`
 
 The icon rendered next to an item without children
-is now defined as a slot both on the Tree View and the Tree Item components.
+is now defined as a slot both on the Tree View and the `TreeItem` components.
 
 If you were passing an icon to your Tree View component,
 you need to use the new `endIcon` slot on this component:
@@ -216,7 +216,7 @@ you need to use the new `endIcon` slot on this component:
 Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component.
 :::
 
-If you were passing an icon to your Tree Item component,
+If you were passing an icon to your `TreeItem` component,
 you need to use the new `endIcon` slot on this component:
 
 ```diff
@@ -233,9 +233,9 @@ you need to use the new `endIcon` slot on this component:
 #### Define `icon`
 
 The icon rendered next to an item
-is now defined as a slot on the Tree Item component.
+is now defined as a slot on the `TreeItem` component.
 
-If you were passing an icon to your Tree Item component,
+If you were passing an icon to your `TreeItem` component,
 you need to use the new `icon` slot on this component:
 
 ```diff
@@ -253,6 +253,40 @@ you need to use the new `icon` slot on this component:
 Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component.
 :::
 
+### ✅ Use slots to define the group transition
+
+The component used to animate the item children
+is now defined as a slot on the `TreeItem` component.
+
+If you were passing a `TransitionComponent` or `TransitionProps` to your `TreeItem` component,
+you need to use the new `groupTransition` slot on this component:
+
+```diff
+ <SimpleTreeView>
+   <TreeItem
+     nodeId="1"
+     label="Node 1"
+-    TransitionComponent={Fade}
++    slots={{ groupTransition: Fade }}
+-    TransitionProps={{ timeout: 600 }}
++    slotProps={{ groupTransition: { timeout: 600 } }}
+   />
+ </SimpleTreeView>
+```
+
+### Rename the `group` class of the `TreeItem` component
+
+The `group` class of the `TreeItem` component has been renamed to `groupTransition` to match with its new slot name.
+
+```diff
+ const StyledTreeItem = styled(TreeItem)({
+-  [`& .${treeItemClasses.group}`]: {
++  [`& .${treeItemClasses.groupTransition}`]: {
+    marginLeft: 20,
+  },
+ });
+```
+
 ### ✅ Rename `onNodeToggle`, `expanded` and `defaultExpanded`
 
 The expansion props have been renamed to better describe their behaviors:

docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.js

@@ -16,7 +16,7 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
       opacity: 0.3,
     },
   },
-  [`& .${treeItemClasses.group}`]: {
+  [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: 15,
     paddingLeft: 18,
     borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,

docs/data/tree-view/simple-tree-view/customization/BorderedTreeView.tsx

@@ -16,7 +16,7 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
       opacity: 0.3,
     },
   },
-  [`& .${treeItemClasses.group}`]: {
+  [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: 15,
     paddingLeft: 18,
     borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,

docs/data/tree-view/simple-tree-view/customization/CustomAnimation.js

@@ -21,7 +21,11 @@ function TransitionComponent(props) {
 }
 
 const CustomTreeItem = React.forwardRef((props, ref) => (
-  <TreeItem {...props} TransitionComponent={TransitionComponent} ref={ref} />
+  <TreeItem
+    {...props}
+    slots={{ groupTransition: TransitionComponent, ...props.slots }}
+    ref={ref}
+  />
 ));
 
 export default function CustomAnimation() {

docs/data/tree-view/simple-tree-view/customization/CustomAnimation.tsx

@@ -22,7 +22,11 @@ function TransitionComponent(props: TransitionProps) {
 
 const CustomTreeItem = React.forwardRef(
   (props: TreeItemProps, ref: React.Ref<HTMLLIElement>) => (
-    <TreeItem {...props} TransitionComponent={TransitionComponent} ref={ref} />
+    <TreeItem
+      {...props}
+      slots={{ groupTransition: TransitionComponent, ...props.slots }}
+      ref={ref}
+    />
   ),
 );
 

docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.js

@@ -89,7 +89,7 @@ const StyledTreeItemRoot = styled(TreeItem)(({ theme }) => ({
       color: 'white',
     },
   },
-  [`& .${treeItemClasses.group}`]: {
+  [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: theme.spacing(3.5),
     [`& .${treeItemClasses.content}`]: {
       fontWeight: 500,
@@ -132,7 +132,7 @@ const StyledTreeItem = React.forwardRef(function StyledTreeItem(props, ref) {
         </Box>
       }
       {...other}
-      TransitionComponent={TransitionComponent}
+      slots={{ groupTransition: TransitionComponent }}
       ref={ref}
     />
   );

docs/data/tree-view/simple-tree-view/customization/CustomizedTreeView.tsx

@@ -101,7 +101,7 @@ const StyledTreeItemRoot = styled(TreeItem)(({ theme }) => ({
       color: 'white',
     },
   },
-  [`& .${treeItemClasses.group}`]: {
+  [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: theme.spacing(3.5),
     [`& .${treeItemClasses.content}`]: {
       fontWeight: 500,
@@ -147,7 +147,7 @@ const StyledTreeItem = React.forwardRef(function StyledTreeItem(
         </Box>
       }
       {...other}
-      TransitionComponent={TransitionComponent}
+      slots={{ groupTransition: TransitionComponent }}
       ref={ref}
     />
   );

docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js

@@ -41,7 +41,7 @@ const StyledTreeItemRoot = styled(TreeItem)(({ theme }) => ({
       marginRight: theme.spacing(1),
     },
   },
-  [`& .${treeItemClasses.group}`]: {
+  [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: 0,
     [`& .${treeItemClasses.content}`]: {
       paddingLeft: theme.spacing(2),

docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx

@@ -58,7 +58,7 @@ const StyledTreeItemRoot = styled(TreeItem)(({ theme }) => ({
       marginRight: theme.spacing(1),
     },
   },
-  [`& .${treeItemClasses.group}`]: {
+  [`& .${treeItemClasses.groupTransition}`]: {
     marginLeft: 0,
     [`& .${treeItemClasses.content}`]: {
       paddingLeft: theme.spacing(2),

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

@@ -45,7 +45,7 @@ The demo below shows how to add an avatar and custom typography elements.
 
 ### Connection border
 
-Target the `treeItemClasses.group` class to add connection borders between the Tree View items.
+Target the `treeItemClasses.groupTransition` class to add connection borders between the Tree View items.
 
 {{"demo": "BorderedTreeView.js", "defaultCodeOpen": false}}
 

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

@@ -23,9 +23,7 @@
         "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
       },
       "additionalInfo": { "sx": true }
-    },
-    "TransitionComponent": { "type": { "name": "elementType" }, "default": "Collapse" },
-    "TransitionProps": { "type": { "name": "object" } }
+    }
   },
   "name": "TreeItem",
   "imports": [
@@ -40,6 +38,12 @@
       "name": "icon",
       "description": "The icon to display next to the tree node's label.",
       "class": null
+    },
+    {
+      "name": "groupTransition",
+      "description": "The component that animates to appearance / disappearance of the item's children.",
+      "default": "TreeItem2Group",
+      "class": "MuiTreeItem-groupTransition"
     }
   ],
   "classes": [
@@ -67,12 +71,6 @@
       "description": "State class applied to the content element when focused.",
       "isGlobal": true
     },
-    {
-      "key": "group",
-      "className": "MuiTreeItem-group",
-      "description": "Styles applied to the transition component.",
-      "isGlobal": false
-    },
     {
       "key": "iconContainer",
       "className": "MuiTreeItem-iconContainer",

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

@@ -18,12 +18,6 @@
     "slots": { "description": "Overridable component slots." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
-    },
-    "TransitionComponent": {
-      "description": "The component used for the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
-    },
-    "TransitionProps": {
-      "description": "Props applied to the transition element. By default, the element is based on this <a href=\"https://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component."
     }
   },
   "classDescriptions": {
@@ -46,10 +40,6 @@
       "nodeName": "the content element",
       "conditions": "focused"
     },
-    "group": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the transition component"
-    },
     "iconContainer": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the tree node icon"
@@ -66,6 +56,7 @@
     "collapseIcon": "The icon used to collapse the node.",
     "endIcon": "The icon displayed next to an end node.",
     "expandIcon": "The icon used to expand the node.",
+    "groupTransition": "The component that animates to appearance / disappearance of the item&#39;s children.",
     "icon": "The icon to display next to the tree node&#39;s label."
   }
 }

packages/x-codemod/README.md

@@ -221,6 +221,7 @@ The list includes these transformers
 - [`rename-use-tree-item`](#rename-use-tree-item)
 - [`rename-expansion-props`](#rename-expansion-props)
 - [`rename-selection-props`](#rename-selection-props)
+- [`replace-transition-props-by-slot`](#replace-transition-props-by-slot)
 
 #### `rename-tree-view-simple-tree-view`
 
@@ -300,6 +301,20 @@ Rename the selection props
  />
 ```
 
+#### `replace-transition-props-by-slot`
+
+Replace the `TransitionComponent` and `TransitionProps` components with the `groupTransition` slot:
+
+```diff
+ <TreeItem
+-  TransitionComponent={Fade}
++  slots={{ groupTransition: Fade }}
+
+-  TransitionProps={{ timeout: 600 }}
++  slotProps={{ groupTransition: { timeout: 600 } }}
+ />
+```
+
 ## v6.0.0
 
 ### 🚀 `preset-safe` for v6.0.0

packages/x-codemod/src/v7.0.0/tree-view/preset-safe/actual.spec.tsx

@@ -5,6 +5,7 @@ import { TreeItem, useTreeItem } from '@mui/x-tree-view/TreeItem';
 
 const className = treeViewClasses.root;
 
+// prettier-ignore
 <TreeView
   expanded={[]}
   defaultExpanded={[]}
@@ -13,5 +14,10 @@ const className = treeViewClasses.root;
   defaultSelected={null}
   onNodeSelect={selectionCallback}
 >
-  <TreeItem nodeId="1" label="Item 1" />
+  <TreeItem
+    nodeId="1"
+    label="Item 1"
+    TransitionComponent={Fade}
+    TransitionProps={{ timeout: 600 }}
+  />
 </TreeView>;

packages/x-codemod/src/v7.0.0/tree-view/preset-safe/expected.spec.tsx

@@ -5,6 +5,7 @@ import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem';
 
 const className = simpleTreeViewClasses.root;
 
+// prettier-ignore
 <SimpleTreeView
   expandedNodes={[]}
   defaultExpandedNodes={[]}
@@ -13,5 +14,13 @@ const className = simpleTreeViewClasses.root;
   defaultSelectedNodes={null}
   onSelectedNodesChange={selectionCallback}
 >
-  <TreeItem nodeId="1" label="Item 1" />
+  <TreeItem
+    nodeId="1"
+    label="Item 1"
+    slots={{
+      groupTransition: Fade,
+    }}
+    slotProps={{
+      groupTransition: { timeout: 600 },
+    }} />
 </SimpleTreeView>;

packages/x-codemod/src/v7.0.0/tree-view/preset-safe/index.ts

@@ -1,5 +1,6 @@
 import transformRenameExpansionProps from '../rename-expansion-props';
 import transformRenameSelectionProps from '../rename-selection-props';
+import transformReplaceTransitionPropsBySlot from '../replace-transition-props-by-slot';
 import transformRenameUseTreeItem from '../rename-use-tree-item';
 import transformRenameTreeViewSimpleTreeView from '../rename-tree-view-simple-tree-view';
 
@@ -8,6 +9,7 @@ import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types';
 export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) {
   file.source = transformRenameExpansionProps(file, api, options);
   file.source = transformRenameSelectionProps(file, api, options);
+  file.source = transformReplaceTransitionPropsBySlot(file, api, options);
   file.source = transformRenameUseTreeItem(file, api, options);
   file.source = transformRenameTreeViewSimpleTreeView(file, api, options);
 

packages/x-codemod/src/v7.0.0/tree-view/replace-transition-props-by-slot/actual.spec.js

@@ -0,0 +1,12 @@
+<TreeItem
+  TransitionComponent={Fade}
+  TransitionProps={{ timeout: 600 }}
+/>;
+
+<TreeItem
+  TransitionComponent={Fade}
+  TransitionProps={{ timeout: 600 }}
+  slots={{
+    icon: Icon,
+  }}
+/>;