Skip to content

Commit a518d0a

Browse files
noraleonteLukasTy
noraleonte
and
LukasTy
authored
[TreeView] Rename nodeId to itemId (#12418)
Signed-off-by: Nora <72460825+noraleonte@users.noreply.github.com> Co-authored-by: Lukas <llukas.tyla@gmail.com>
1 parent e5e95f3 commit a518d0a

File tree

108 files changed

+1269
-1175
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

108 files changed

+1269
-1175
lines changed

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

+39-9
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ productId: x-tree-view
1212

1313
TBD
1414

15-
## Start using the alpha release
15+
## Start using the beta release
1616

1717
In `package.json`, change the version of the tree view package to `next`.
1818

@@ -41,6 +41,36 @@ The `legacy` bundle that used to support old browsers like IE11 is no longer inc
4141
If you need support for IE11, you will need to keep using the latest version of the `v6` release.
4242
:::
4343

44+
### ✅ Rename `nodeId` to `itemId`
45+
46+
The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency:
47+
48+
```diff
49+
<TreeView>
50+
- <TreeItem label='Item 1' nodeId='one'>
51+
+ <TreeItem label='Item 1' itemId='one'>
52+
</TreeView>
53+
```
54+
55+
The same change has been applied to the and `ContentComponent` prop:
56+
57+
```diff
58+
const CustomContent = React.forwardRef((props, ref) => {
59+
- const id = props.nodeId;
60+
+ const id = props.itemId;
61+
62+
// Render some UI
63+
});
64+
65+
function App() {
66+
return (
67+
<SimpleTreeView>
68+
<TreeItem ContentComponent={CustomContent} />
69+
</SimpleTreeView>
70+
)
71+
}
72+
```
73+
4474
### ✅ Use `SimpleTreeView` instead of `TreeView`
4575

4676
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
5686
return (
5787
- <TreeView>
5888
+ <SimpleTreeView>
59-
<TreeItem nodeId="1" label="First item" />
89+
<TreeItem itemId="1" label="First item" />
6090
- </TreeView>
6191
+ </SimpleTreeView>
6292
);
@@ -131,7 +161,7 @@ you need to use the new `expandIcon` slot on this component:
131161
```diff
132162
<SimpleTreeView>
133163
<TreeItem
134-
nodeId="1"
164+
itemId="1"
135165
label="Item 1"
136166
- expandIcon={<MyCustomExpandIcon />}
137167
+ slots={{ expandIcon: MyCustomExpandIcon }}
@@ -179,7 +209,7 @@ you need to use the new `collapseIcon` slot on this component:
179209
```diff
180210
<SimpleTreeView>
181211
<TreeItem
182-
nodeId="1"
212+
itemId="1"
183213
label="Item 1"
184214
- collapseIcon={<MyCustomCollapseIcon />}
185215
+ slots={{ collapseIcon: MyCustomCollapseIcon }}
@@ -231,7 +261,7 @@ you need to use the new `endIcon` slot on this component:
231261
```diff
232262
<SimpleTreeView>
233263
<TreeItem
234-
nodeId="1"
264+
itemId="1"
235265
label="Item 1"
236266
- endIcon={<MyCustomEndIcon />}
237267
+ slots={{ endIcon: MyCustomEndIcon }}
@@ -250,7 +280,7 @@ you need to use the new `icon` slot on this component:
250280
```diff
251281
<SimpleTreeView>
252282
<TreeItem
253-
nodeId="1"
283+
itemId="1"
254284
label="Item 1"
255285
- icon={<MyCustomIcon />}
256286
+ slots={{ icon: MyCustomIcon }}
@@ -273,7 +303,7 @@ you need to use the new `groupTransition` slot on this component:
273303
```diff
274304
<SimpleTreeView>
275305
<TreeItem
276-
nodeId="1"
306+
itemId="1"
277307
label="Item 1"
278308
- TransitionComponent={Fade}
279309
+ slots={{ groupTransition: Fade }}
@@ -382,8 +412,8 @@ This will help create a new headless version of the `TreeItem` component based o
382412
+import { TreeItem, useTreeItemState } from '@mui/x-tree-view/TreeItem';
383413

384414
const CustomContent = React.forwardRef((props, ref) => {
385-
- const { disabled } = useTreeItem(props.nodeId);
386-
+ const { disabled } = useTreeItemState(props.nodeId);
415+
- const { disabled } = useTreeItem(props.itemId);
416+
+ const { disabled } = useTreeItemState(props.itemId);
387417

388418
// Render some UI
389419
});

‎docs/data/tree-view/getting-started/FirstComponent.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ export default function FirstComponent() {
88
aria-label="file system navigator"
99
sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
1010
>
11-
<TreeItem nodeId="1" label="Applications">
12-
<TreeItem nodeId="2" label="Calendar" />
11+
<TreeItem itemId="1" label="Applications">
12+
<TreeItem itemId="2" label="Calendar" />
1313
</TreeItem>
14-
<TreeItem nodeId="5" label="Documents">
15-
<TreeItem nodeId="10" label="OSS" />
16-
<TreeItem nodeId="6" label="MUI">
17-
<TreeItem nodeId="8" label="index.js" />
14+
<TreeItem itemId="5" label="Documents">
15+
<TreeItem itemId="10" label="OSS" />
16+
<TreeItem itemId="6" label="MUI">
17+
<TreeItem itemId="8" label="index.js" />
1818
</TreeItem>
1919
</TreeItem>
2020
</SimpleTreeView>

‎docs/data/tree-view/getting-started/FirstComponent.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ export default function FirstComponent() {
88
aria-label="file system navigator"
99
sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
1010
>
11-
<TreeItem nodeId="1" label="Applications">
12-
<TreeItem nodeId="2" label="Calendar" />
11+
<TreeItem itemId="1" label="Applications">
12+
<TreeItem itemId="2" label="Calendar" />
1313
</TreeItem>
14-
<TreeItem nodeId="5" label="Documents">
15-
<TreeItem nodeId="10" label="OSS" />
16-
<TreeItem nodeId="6" label="MUI">
17-
<TreeItem nodeId="8" label="index.js" />
14+
<TreeItem itemId="5" label="Documents">
15+
<TreeItem itemId="10" label="OSS" />
16+
<TreeItem itemId="6" label="MUI">
17+
<TreeItem itemId="8" label="index.js" />
1818
</TreeItem>
1919
</TreeItem>
2020
</SimpleTreeView>

‎docs/data/tree-view/getting-started/FirstComponent.tsx.preview

+6-6
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
aria-label="file system navigator"
33
sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
44
>
5-
<TreeItem nodeId="1" label="Applications">
6-
<TreeItem nodeId="2" label="Calendar" />
5+
<TreeItem itemId="1" label="Applications">
6+
<TreeItem itemId="2" label="Calendar" />
77
</TreeItem>
8-
<TreeItem nodeId="5" label="Documents">
9-
<TreeItem nodeId="10" label="OSS" />
10-
<TreeItem nodeId="6" label="MUI">
11-
<TreeItem nodeId="8" label="index.js" />
8+
<TreeItem itemId="5" label="Documents">
9+
<TreeItem itemId="10" label="OSS" />
10+
<TreeItem itemId="6" label="MUI">
11+
<TreeItem itemId="8" label="index.js" />
1212
</TreeItem>
1313
</TreeItem>
1414
</SimpleTreeView>

‎docs/data/tree-view/overview/BasicSimpleTreeView.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ export default function BasicSimpleTreeView() {
77
return (
88
<Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
99
<SimpleTreeView>
10-
<TreeItem nodeId="grid" label="Data Grid">
11-
<TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
12-
<TreeItem nodeId="grid-pro" label="@mui/x-data-grid-pro" />
13-
<TreeItem nodeId="grid-premium" label="@mui/x-data-grid-premium" />
10+
<TreeItem itemId="grid" label="Data Grid">
11+
<TreeItem itemId="grid-community" label="@mui/x-data-grid" />
12+
<TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
13+
<TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
1414
</TreeItem>
15-
<TreeItem nodeId="pickers" label="Date and Time Pickers">
16-
<TreeItem nodeId="pickers-community" label="@mui/x-date-pickers" />
17-
<TreeItem nodeId="pickers-pro" label="@mui/x-date-pickers-pro" />
15+
<TreeItem itemId="pickers" label="Date and Time Pickers">
16+
<TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
17+
<TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
1818
</TreeItem>
1919
</SimpleTreeView>
2020
</Box>

‎docs/data/tree-view/overview/BasicSimpleTreeView.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ export default function BasicSimpleTreeView() {
77
return (
88
<Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
99
<SimpleTreeView>
10-
<TreeItem nodeId="grid" label="Data Grid">
11-
<TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
12-
<TreeItem nodeId="grid-pro" label="@mui/x-data-grid-pro" />
13-
<TreeItem nodeId="grid-premium" label="@mui/x-data-grid-premium" />
10+
<TreeItem itemId="grid" label="Data Grid">
11+
<TreeItem itemId="grid-community" label="@mui/x-data-grid" />
12+
<TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
13+
<TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
1414
</TreeItem>
15-
<TreeItem nodeId="pickers" label="Date and Time Pickers">
16-
<TreeItem nodeId="pickers-community" label="@mui/x-date-pickers" />
17-
<TreeItem nodeId="pickers-pro" label="@mui/x-date-pickers-pro" />
15+
<TreeItem itemId="pickers" label="Date and Time Pickers">
16+
<TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
17+
<TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
1818
</TreeItem>
1919
</SimpleTreeView>
2020
</Box>

‎docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<SimpleTreeView>
2-
<TreeItem nodeId="grid" label="Data Grid">
3-
<TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
4-
<TreeItem nodeId="grid-pro" label="@mui/x-data-grid-pro" />
5-
<TreeItem nodeId="grid-premium" label="@mui/x-data-grid-premium" />
2+
<TreeItem itemId="grid" label="Data Grid">
3+
<TreeItem itemId="grid-community" label="@mui/x-data-grid" />
4+
<TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
5+
<TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
66
</TreeItem>
7-
<TreeItem nodeId="pickers" label="Date and Time Pickers">
8-
<TreeItem nodeId="pickers-community" label="@mui/x-date-pickers" />
9-
<TreeItem nodeId="pickers-pro" label="@mui/x-date-pickers-pro" />
7+
<TreeItem itemId="pickers" label="Date and Time Pickers">
8+
<TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
9+
<TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
1010
</TreeItem>
1111
</SimpleTreeView>

‎docs/data/tree-view/overview/overview.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
6363
export default function App() {
6464
return (
6565
<SimpleTreeView>
66-
<TreeItem nodeId="1" label="Item 1" />
67-
<TreeItem nodeId="2" label="Item 2" />
66+
<TreeItem itemId="1" label="Item 1" />
67+
<TreeItem itemId="2" label="Item 2" />
6868
</SimpleTreeView>
6969
);
7070
}
@@ -95,8 +95,8 @@ import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
9595
export default function App() {
9696
return (
9797
<SimpleTreeView>
98-
<TreeItem2 nodeId="1" label="Item 1" />
99-
<TreeItem2 nodeId="2" label="Item 2" />
98+
<TreeItem2 itemId="1" label="Item 1" />
99+
<TreeItem2 itemId="2" label="Item 2" />
100100
</SimpleTreeView>
101101
);
102102
}

‎docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
4040
}));
4141

4242
const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
43-
const { id, nodeId, label, disabled, children, ...other } = props;
43+
const { id, itemId, label, disabled, children, ...other } = props;
4444

4545
const {
4646
getRootProps,
@@ -49,10 +49,10 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
4949
getLabelProps,
5050
getGroupTransitionProps,
5151
status,
52-
} = useTreeItem2({ id, nodeId, children, label, disabled, rootRef: ref });
52+
} = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
5353

5454
return (
55-
<TreeItem2Provider nodeId={nodeId}>
55+
<TreeItem2Provider itemId={itemId}>
5656
<TreeItem2Root {...getRootProps(other)}>
5757
<CustomTreeItemContent {...getContentProps()}>
5858
<TreeItem2IconContainer {...getIconContainerProps()}>

‎docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
5050
props: CustomTreeItemProps,
5151
ref: React.Ref<HTMLLIElement>,
5252
) {
53-
const { id, nodeId, label, disabled, children, ...other } = props;
53+
const { id, itemId, label, disabled, children, ...other } = props;
5454

5555
const {
5656
getRootProps,
@@ -59,10 +59,10 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
5959
getLabelProps,
6060
getGroupTransitionProps,
6161
status,
62-
} = useTreeItem2({ id, nodeId, children, label, disabled, rootRef: ref });
62+
} = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
6363

6464
return (
65-
<TreeItem2Provider nodeId={nodeId}>
65+
<TreeItem2Provider itemId={itemId}>
6666
<TreeItem2Root {...getRootProps(other)}>
6767
<CustomTreeItemContent {...getContentProps()}>
6868
<TreeItem2IconContainer {...getIconContainerProps()}>

‎docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const CustomContent = React.forwardRef(function CustomContent(props, ref) {
3030
classes,
3131
className,
3232
label,
33-
nodeId,
33+
itemId,
3434
icon: iconProp,
3535
expansionIcon,
3636
displayIcon,
@@ -44,7 +44,7 @@ const CustomContent = React.forwardRef(function CustomContent(props, ref) {
4444
handleExpansion,
4545
handleSelection,
4646
preventSelection,
47-
} = useTreeItemState(nodeId);
47+
} = useTreeItemState(itemId);
4848

4949
const icon = iconProp || expansionIcon || displayIcon;
5050

‎docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const CustomContent = React.forwardRef(function CustomContent(
3434
classes,
3535
className,
3636
label,
37-
nodeId,
37+
itemId,
3838
icon: iconProp,
3939
expansionIcon,
4040
displayIcon,
@@ -48,7 +48,7 @@ const CustomContent = React.forwardRef(function CustomContent(
4848
handleExpansion,
4949
handleSelection,
5050
preventSelection,
51-
} = useTreeItemState(nodeId);
51+
} = useTreeItemState(itemId);
5252

5353
const icon = iconProp || expansionIcon || displayIcon;
5454

‎docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const CustomTreeItem = React.forwardRef((props, ref) => (
2828
{...props}
2929
slotProps={{
3030
label: {
31-
id: `${props.nodeId}-label`,
31+
id: `${props.itemId}-label`,
3232
},
3333
}}
3434
/>

‎docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const CustomTreeItem = React.forwardRef(
3030
{...props}
3131
slotProps={{
3232
label: {
33-
id: `${props.nodeId}-label`,
33+
id: `${props.itemId}-label`,
3434
},
3535
}}
3636
/>

‎docs/data/tree-view/rich-tree-view/customization/LabelSlots.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,14 @@ const TreeItemContext = React.createContext({ onLabelValueChange: () => {} });
5959

6060
const CustomTreeItem = React.forwardRef((props, ref) => {
6161
const { interactions } = useTreeItem2Utils({
62-
nodeId: props.nodeId,
62+
itemId: props.itemId,
6363
children: props.children,
6464
});
6565

6666
const { onLabelValueChange } = React.useContext(TreeItemContext);
6767

6868
const handleLabelValueChange = (newLabel) => {
69-
onLabelValueChange(props.nodeId, newLabel);
69+
onLabelValueChange(props.itemId, newLabel);
7070
};
7171

7272
const handleContentClick = (event) => {
@@ -123,10 +123,10 @@ export default function LabelSlots() {
123123

124124
const context = React.useMemo(
125125
() => ({
126-
onLabelValueChange: (nodeId, label) =>
126+
onLabelValueChange: (itemId, label) =>
127127
setProducts((prev) => {
128128
const walkTree = (item) => {
129-
if (item.id === nodeId) {
129+
if (item.id === itemId) {
130130
return { ...item, label };
131131
}
132132
if (item.children) {

0 commit comments

Comments
 (0)