Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TreeView] Rename nodeId to itemId #12418

Merged
merged 13 commits into from
Mar 14, 2024
Merged

[TreeView] Rename nodeId to itemId #12418

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
af9869e
remove occurences of nodeId
noraleonte Mar 8, 2024
2e0bcb4
create codemod
noraleonte Mar 8, 2024
afc4ee0
update doc demos
noraleonte Mar 11, 2024
6e98d70
wip
noraleonte Mar 11, 2024
a82b02b
scripts
noraleonte Mar 11, 2024
9b5166e
update migration guide
noraleonte Mar 11, 2024
222534c
Merge branch 'next'
noraleonte Mar 11, 2024
82d543b
Merge branch 'next' of github.com:noraleonte/mui-x into rename-nodeId…
noraleonte Mar 12, 2024
a4da4c2
Merge branch 'next'
noraleonte Mar 12, 2024
18cfc56
scripts
noraleonte Mar 12, 2024
e2efdc6
fix
noraleonte Mar 13, 2024
725e334
Apply suggestions from code review - Lukas
noraleonte Mar 14, 2024
33c7c81
update guide
noraleonte Mar 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 24 additions & 13 deletions docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

Expand Down Expand Up @@ -47,7 +47,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>
);
Expand Down Expand Up @@ -122,7 +122,7 @@ you need to use the new `expandIcon` slot on this component:
```diff
<SimpleTreeView>
<TreeItem
nodeId="1"
itemId="1"
label="Node 1"
- expandIcon={<MyCustomExpandIcon />}
+ slots={{ expandIcon: MyCustomExpandIcon }}
Expand Down Expand Up @@ -170,7 +170,7 @@ you need to use the new `collapseIcon` slot on this component:
```diff
<SimpleTreeView>
<TreeItem
nodeId="1"
itemId="1"
label="Node 1"
- collapseIcon={<MyCustomCollapseIcon />}
+ slots={{ collapseIcon: MyCustomCollapseIcon }}
Expand Down Expand Up @@ -222,7 +222,7 @@ you need to use the new `endIcon` slot on this component:
```diff
<SimpleTreeView>
<TreeItem
nodeId="1"
itemId="1"
label="Node 1"
- endIcon={<MyCustomEndIcon />}
+ slots={{ endIcon: MyCustomEndIcon }}
Expand All @@ -241,7 +241,7 @@ you need to use the new `icon` slot on this component:
```diff
<SimpleTreeView>
<TreeItem
nodeId="1"
itemId="1"
label="Node 1"
- icon={<MyCustomIcon />}
+ slots={{ icon: MyCustomIcon }}
Expand All @@ -264,7 +264,7 @@ you need to use the new `groupTransition` slot on this component:
```diff
<SimpleTreeView>
<TreeItem
nodeId="1"
itemId="1"
label="Node 1"
- TransitionComponent={Fade}
+ slots={{ groupTransition: Fade }}
Expand Down Expand Up @@ -317,8 +317,8 @@ you can use the new `onNodeExpansionToggle` prop which is called whenever a node
```tsx
// It is also available on the deprecated `TreeView` component
<SimpleTreeView
onNodeExpansionToggle={(event, nodeId, isExpanded) =>
console.log(nodeId, isExpanded)
onNodeExpansionToggle={(event, itemId, isExpanded) =>
console.log(itemId, isExpanded)
}
/>
```
Expand Down Expand Up @@ -355,8 +355,8 @@ you can use the new `onNodeSelectionToggle` prop which is called whenever a node
```tsx
// It is also available on the deprecated `TreeView` component
<SimpleTreeView
onNodeSelectionToggle={(event, nodeId, isSelected) =>
console.log(nodeId, isSelected)
onNodeSelectionToggle={(event, itemId, isSelected) =>
console.log(itemId, isSelected)
}
/>
```
Expand All @@ -373,8 +373,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
});
Expand All @@ -387,3 +387,14 @@ This will help create a new headless version of the `TreeItem` component based o
)
}
```

### ✅ Rename `nodeId` to `itemId`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably worth mentioning the nodeId prop received by the ContentComponent prop of TreeItem as well (it's in this PR from what I saw)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WDYT, would it make sense to mention this section before any other section using itemId (first is on line 59) to reduce confusion? 🤔


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>
```
12 changes: 6 additions & 6 deletions docs/data/tree-view/getting-started/FirstComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions docs/data/tree-view/getting-started/FirstComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions docs/data/tree-view/getting-started/FirstComponent.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
14 changes: 7 additions & 7 deletions docs/data/tree-view/overview/BasicSimpleTreeView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions docs/data/tree-view/overview/BasicSimpleTreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions docs/data/tree-view/overview/BasicSimpleTreeView.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 4 additions & 4 deletions docs/data/tree-view/overview/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down Expand Up @@ -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>
);
}
Expand Down
6 changes: 3 additions & 3 deletions docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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()}>
Expand Down
6 changes: 3 additions & 3 deletions docs/data/tree-view/rich-tree-view/customization/CustomContentTreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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()}>
Expand Down
4 changes: 2 additions & 2 deletions docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const CustomContent = React.forwardRef(function CustomContent(props, ref) {
classes,
className,
label,
nodeId,
itemId,
icon: iconProp,
expansionIcon,
displayIcon,
Expand All @@ -44,7 +44,7 @@ const CustomContent = React.forwardRef(function CustomContent(props, ref) {
handleExpansion,
handleSelection,
preventSelection,
} = useTreeItemState(nodeId);
} = useTreeItemState(itemId);

const icon = iconProp || expansionIcon || displayIcon;

Expand Down
4 changes: 2 additions & 2 deletions docs/data/tree-view/rich-tree-view/customization/IconExpansionTreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const CustomContent = React.forwardRef(function CustomContent(
classes,
className,
label,
nodeId,
itemId,
icon: iconProp,
expansionIcon,
displayIcon,
Expand All @@ -48,7 +48,7 @@ const CustomContent = React.forwardRef(function CustomContent(
handleExpansion,
handleSelection,
preventSelection,
} = useTreeItemState(nodeId);
} = useTreeItemState(itemId);

const icon = iconProp || expansionIcon || displayIcon;

Expand Down
2 changes: 1 addition & 1 deletion docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const CustomTreeItem = React.forwardRef((props, ref) => (
{...props}
slotProps={{
label: {
id: `${props.nodeId}-label`,
id: `${props.itemId}-label`,
},
}}
/>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/tree-view/rich-tree-view/customization/LabelSlotProps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const CustomTreeItem = React.forwardRef(
{...props}
slotProps={{
label: {
id: `${props.nodeId}-label`,
id: `${props.itemId}-label`,
},
}}
/>
Expand Down
8 changes: 4 additions & 4 deletions docs/data/tree-view/rich-tree-view/customization/LabelSlots.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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) {
Expand Down
Loading
Loading