[TreeView] Rename nodeId to itemId (#12418)

Signed-off-by: Nora <[email protected]> Co-authored-by: Lukas <[email protected]>
mui · Mar 14, 2024 · a518d0a · a518d0a
1 parent e5e95f3
commit a518d0a
Show file tree

Hide file tree

Showing 108 changed files with 1,269 additions and 1,175 deletions.
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
@@ -12,7 +12,7 @@ productId: x-tree-view
 
 TBD
 
-## Start using the alpha release
+## Start using the beta release
 
 In `package.json`, change the version of the tree view package to `next`.
 
@@ -41,6 +41,36 @@ The `legacy` bundle that used to support old browsers like IE11 is no longer inc
 If you need support for IE11, you will need to keep using the latest version of the `v6` release.
 :::
 
+### ✅ Rename `nodeId` to `itemId`
+
+The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency:
+
+```diff
+ <TreeView>
+-    <TreeItem label='Item 1' nodeId='one'>
++    <TreeItem label='Item 1' itemId='one'>
+ </TreeView>
+```
+
+The same change has been applied to the and `ContentComponent` prop:
+
+```diff
+  const CustomContent = React.forwardRef((props, ref) => {
+-  const id = props.nodeId;
++  const id = props.itemId;
+
+     // Render some UI
+   });
+
+   function App() {
+     return (
+       <SimpleTreeView>
+         <TreeItem ContentComponent={CustomContent} />
+       </SimpleTreeView>
+     )
+   }
+```
+
 ### ✅ Use `SimpleTreeView` instead of `TreeView`
 
 The `TreeView` component has been deprecated and will be removed in the next major.
@@ -56,7 +86,7 @@ You can start replacing it with the new `SimpleTreeView` component which has exa
    return (
 -    <TreeView>
 +    <SimpleTreeView>
-       <TreeItem nodeId="1" label="First item" />
+       <TreeItem itemId="1" label="First item" />
 -    </TreeView>
 +    </SimpleTreeView>
    );
@@ -131,7 +161,7 @@ you need to use the new `expandIcon` slot on this component:
 ```diff
   <SimpleTreeView>
     <TreeItem
-      nodeId="1"
+      itemId="1"
       label="Item 1"
 -     expandIcon={<MyCustomExpandIcon />}
 +     slots={{ expandIcon: MyCustomExpandIcon }}
@@ -179,7 +209,7 @@ you need to use the new `collapseIcon` slot on this component:
 ```diff
   <SimpleTreeView>
     <TreeItem
-      nodeId="1"
+      itemId="1"
       label="Item 1"
 -     collapseIcon={<MyCustomCollapseIcon />}
 +     slots={{ collapseIcon: MyCustomCollapseIcon }}
@@ -231,7 +261,7 @@ you need to use the new `endIcon` slot on this component:
 ```diff
   <SimpleTreeView>
     <TreeItem
-      nodeId="1"
+      itemId="1"
       label="Item 1"
 -     endIcon={<MyCustomEndIcon />}
 +     slots={{ endIcon: MyCustomEndIcon }}
@@ -250,7 +280,7 @@ you need to use the new `icon` slot on this component:
 ```diff
   <SimpleTreeView>
     <TreeItem
-      nodeId="1"
+      itemId="1"
       label="Item 1"
 -     icon={<MyCustomIcon />}
 +     slots={{ icon: MyCustomIcon }}
@@ -273,7 +303,7 @@ you need to use the new `groupTransition` slot on this component:
 ```diff
  <SimpleTreeView>
    <TreeItem
-     nodeId="1"
+     itemId="1"
      label="Item 1"
 -    TransitionComponent={Fade}
 +    slots={{ groupTransition: Fade }}
@@ -382,8 +412,8 @@ This will help create a new headless version of the `TreeItem` component based o
 +import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem';
 
  const CustomContent = React.forwardRef((props, ref) => {
--  const { disabled } = useTreeItem(props.nodeId);
-+  const { disabled } = useTreeItemState(props.nodeId);
+-  const { disabled } = useTreeItem(props.itemId);
++  const { disabled } = useTreeItemState(props.itemId);
 
    // Render some UI
  });

diff --git a/docs/data/tree-view/getting-started/FirstComponent.js b/docs/data/tree-view/getting-started/FirstComponent.js
@@ -8,13 +8,13 @@ export default function FirstComponent() {
       aria-label="file system navigator"
       sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
     >
-      <TreeItem nodeId="1" label="Applications">
-        <TreeItem nodeId="2" label="Calendar" />
+      <TreeItem itemId="1" label="Applications">
+        <TreeItem itemId="2" label="Calendar" />
       </TreeItem>
-      <TreeItem nodeId="5" label="Documents">
-        <TreeItem nodeId="10" label="OSS" />
-        <TreeItem nodeId="6" label="MUI">
-          <TreeItem nodeId="8" label="index.js" />
+      <TreeItem itemId="5" label="Documents">
+        <TreeItem itemId="10" label="OSS" />
+        <TreeItem itemId="6" label="MUI">
+          <TreeItem itemId="8" label="index.js" />
         </TreeItem>
       </TreeItem>
     </SimpleTreeView>

diff --git a/docs/data/tree-view/getting-started/FirstComponent.tsx b/docs/data/tree-view/getting-started/FirstComponent.tsx
@@ -8,13 +8,13 @@ export default function FirstComponent() {
       aria-label="file system navigator"
       sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
     >
-      <TreeItem nodeId="1" label="Applications">
-        <TreeItem nodeId="2" label="Calendar" />
+      <TreeItem itemId="1" label="Applications">
+        <TreeItem itemId="2" label="Calendar" />
       </TreeItem>
-      <TreeItem nodeId="5" label="Documents">
-        <TreeItem nodeId="10" label="OSS" />
-        <TreeItem nodeId="6" label="MUI">
-          <TreeItem nodeId="8" label="index.js" />
+      <TreeItem itemId="5" label="Documents">
+        <TreeItem itemId="10" label="OSS" />
+        <TreeItem itemId="6" label="MUI">
+          <TreeItem itemId="8" label="index.js" />
         </TreeItem>
       </TreeItem>
     </SimpleTreeView>

diff --git a/docs/data/tree-view/getting-started/FirstComponent.tsx.preview b/docs/data/tree-view/getting-started/FirstComponent.tsx.preview
@@ -2,13 +2,13 @@
   aria-label="file system navigator"
   sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
 >
-  <TreeItem nodeId="1" label="Applications">
-    <TreeItem nodeId="2" label="Calendar" />
+  <TreeItem itemId="1" label="Applications">
+    <TreeItem itemId="2" label="Calendar" />
   </TreeItem>
-  <TreeItem nodeId="5" label="Documents">
-    <TreeItem nodeId="10" label="OSS" />
-    <TreeItem nodeId="6" label="MUI">
-      <TreeItem nodeId="8" label="index.js" />
+  <TreeItem itemId="5" label="Documents">
+    <TreeItem itemId="10" label="OSS" />
+    <TreeItem itemId="6" label="MUI">
+      <TreeItem itemId="8" label="index.js" />
     </TreeItem>
   </TreeItem>
 </SimpleTreeView>
diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.js b/docs/data/tree-view/overview/BasicSimpleTreeView.js
@@ -7,14 +7,14 @@ export default function BasicSimpleTreeView() {
   return (
     <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView>
-        <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 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 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 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>
       </SimpleTreeView>
     </Box>

diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx
@@ -7,14 +7,14 @@ export default function BasicSimpleTreeView() {
   return (
     <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView>
-        <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 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 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 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>
       </SimpleTreeView>
     </Box>

diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview
@@ -1,11 +1,11 @@
 <SimpleTreeView>
-  <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 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 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 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>
 </SimpleTreeView>
diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md
@@ -63,8 +63,8 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 export default function App() {
   return (
     <SimpleTreeView>
-      <TreeItem nodeId="1" label="Item 1" />
-      <TreeItem nodeId="2" label="Item 2" />
+      <TreeItem itemId="1" label="Item 1" />
+      <TreeItem itemId="2" label="Item 2" />
     </SimpleTreeView>
   );
 }
@@ -95,8 +95,8 @@ import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
 export default function App() {
   return (
     <SimpleTreeView>
-      <TreeItem2 nodeId="1" label="Item 1" />
-      <TreeItem2 nodeId="2" label="Item 2" />
+      <TreeItem2 itemId="1" label="Item 1" />
+      <TreeItem2 itemId="2" label="Item 2" />
     </SimpleTreeView>
   );
 }

diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.js b/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.js
@@ -40,7 +40,7 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
 }));
 
 const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
-  const { id, nodeId, label, disabled, children, ...other } = props;
+  const { id, itemId, label, disabled, children, ...other } = props;
 
   const {
     getRootProps,
@@ -49,10 +49,10 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
     getLabelProps,
     getGroupTransitionProps,
     status,
-  } = useTreeItem2({ id, nodeId, children, label, disabled, rootRef: ref });
+  } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
 
   return (
-    <TreeItem2Provider nodeId={nodeId}>
+    <TreeItem2Provider itemId={itemId}>
       <TreeItem2Root {...getRootProps(other)}>
         <CustomTreeItemContent {...getContentProps()}>
           <TreeItem2IconContainer {...getIconContainerProps()}>

diff --git a/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx b/docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx
@@ -50,7 +50,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
   props: CustomTreeItemProps,
   ref: React.Ref<HTMLLIElement>,
 ) {
-  const { id, nodeId, label, disabled, children, ...other } = props;
+  const { id, itemId, label, disabled, children, ...other } = props;
 
   const {
     getRootProps,
@@ -59,10 +59,10 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
     getLabelProps,
     getGroupTransitionProps,
     status,
-  } = useTreeItem2({ id, nodeId, children, label, disabled, rootRef: ref });
+  } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
 
   return (
-    <TreeItem2Provider nodeId={nodeId}>
+    <TreeItem2Provider itemId={itemId}>
       <TreeItem2Root {...getRootProps(other)}>
         <CustomTreeItemContent {...getContentProps()}>
           <TreeItem2IconContainer {...getIconContainerProps()}>

diff --git a/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js
@@ -30,7 +30,7 @@ const CustomContent = React.forwardRef(function CustomContent(props, ref) {
     classes,
     className,
     label,
-    nodeId,
+    itemId,
     icon: iconProp,
     expansionIcon,
     displayIcon,
@@ -44,7 +44,7 @@ const CustomContent = React.forwardRef(function CustomContent(props, ref) {
     handleExpansion,
     handleSelection,
     preventSelection,
-  } = useTreeItemState(nodeId);
+  } = useTreeItemState(itemId);
 
   const icon = iconProp || expansionIcon || displayIcon;
 

diff --git a/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx b/docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx
@@ -34,7 +34,7 @@ const CustomContent = React.forwardRef(function CustomContent(
     classes,
     className,
     label,
-    nodeId,
+    itemId,
     icon: iconProp,
     expansionIcon,
     displayIcon,
@@ -48,7 +48,7 @@ const CustomContent = React.forwardRef(function CustomContent(
     handleExpansion,
     handleSelection,
     preventSelection,
-  } = useTreeItemState(nodeId);
+  } = useTreeItemState(itemId);
 
   const icon = iconProp || expansionIcon || displayIcon;
 

diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js
@@ -28,7 +28,7 @@ const CustomTreeItem = React.forwardRef((props, ref) => (
     {...props}
     slotProps={{
       label: {
-        id: `${props.nodeId}-label`,
+        id: `${props.itemId}-label`,
       },
     }}
   />

diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx b/docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx
@@ -30,7 +30,7 @@ const CustomTreeItem = React.forwardRef(
       {...props}
       slotProps={{
         label: {
-          id: `${props.nodeId}-label`,
+          id: `${props.itemId}-label`,
         },
       }}
     />

diff --git a/docs/data/tree-view/rich-tree-view/customization/LabelSlots.js b/docs/data/tree-view/rich-tree-view/customization/LabelSlots.js
@@ -59,14 +59,14 @@ const TreeItemContext = React.createContext({ onLabelValueChange: () => {} });
 
 const CustomTreeItem = React.forwardRef((props, ref) => {
   const { interactions } = useTreeItem2Utils({
-    nodeId: props.nodeId,
+    itemId: props.itemId,
     children: props.children,
   });
 
   const { onLabelValueChange } = React.useContext(TreeItemContext);
 
   const handleLabelValueChange = (newLabel) => {
-    onLabelValueChange(props.nodeId, newLabel);
+    onLabelValueChange(props.itemId, newLabel);
   };
 
   const handleContentClick = (event) => {
@@ -123,10 +123,10 @@ export default function LabelSlots() {
 
   const context = React.useMemo(
     () => ({
-      onLabelValueChange: (nodeId, label) =>
+      onLabelValueChange: (itemId, label) =>
         setProducts((prev) => {
           const walkTree = (item) => {
-            if (item.id === nodeId) {
+            if (item.id === itemId) {
               return { ...item, label };
             }
             if (item.children) {