[TreeView] Replace `<TreeItem />` with `<TreeItem2 />` and migrate all the components and utils #14913

flaviendelangle · 2024-10-10T13:26:10Z

Remove TreeItem
Rename TreeItem2 => TreeItem (same for all other components and utils with TreeItem2 in their name)
Update doc
Simplify the test setup
Write codemod
Write migration guide
Write changelog highlight (waiting for the migration guide to be review)

Changelog

Tree View

The ContentComponent or ContentProps props of the <TreeItem /> component have been removed in favor of the new slots, slotProps props and of the useTreeItem hook.

Learn more about the anatomy of the Tree Items and the customization utilities provided on the Tree Item Customization page.
The onClick and onMouseDown were the only event callback that were passed to the content of the Tree Item instead of its root.
The goal was to make sure that the callback was not fired when clicking on a descendant of a giving item.
This inconsistency has been solved, all the event manager now target the root of the item, and you can use the onItemClick prop on the Tree View component to target the content of an item:
```
-<SimpleTreeView>
+<SimpleTreeView onItemClick={handleItemClick}>
-  <TreeItem onClick={handleItemClick}>
+  <TreeItem >
 </SimpleTreeView>
```

All the new Tree Item-related components and utils (introduced in the previous major to improve the DX of the Tree Item component) are becoming the default way of using the Tree Item and are therefore losing their 2 suffix:

 import * as React from 'react';
 import {
-  TreeItem2,
+  TreeItem,
-  TreeItem2Root,
+  TreeItemRoot,
-  TreeItem2Content,
+  TreeItemContent,
-  TreeItem2IconContainer,
+  TreeItemIconContainer,
-  TreeItem2GroupTransition,
+  TreeItemGroupTransition,
-  TreeItem2Checkbox,
+  TreeItemCheckbox,
-  TreeItem2Label,
+  TreeItemLabel,
-  TreeItem2Props,
+  TreeItemProps,
-  TreeItem2Slots,
+  TreeItemSlots,
-  TreeItem2SlotProps,
+  TreeItemSlotProps,
- } from '@mui/x-tree-view/TreeItem2';
+ } from '@mui/x-tree-view/TreeItem';
 import {
-  useTreeItem2,
+  useTreeItem,
-  unstable_useTreeItem2 as useAliasedTreeItem,
+  unstable_useTreeItem as useAliasedTreeItem,
-  UseTreeItem2Parameters,
+  UseTreeItemParameters,
-  UseTreeItem2ReturnValue,
+  UseTreeItemReturnValue,
-  UseTreeItem2Status,
+  UseTreeItemStatus,
-  UseTreeItem2RootSlotOwnProps,
+  UseTreeItemRootSlotOwnProps,
-  UseTreeItem2ContentSlotOwnProps,
+  UseTreeItemContentSlotOwnProps,
-  UseTreeItem2LabelInputSlotOwnProps,
+  UseTreeItemLabelInputSlotOwnProps,
-  UseTreeItem2LabelSlotOwnProps,
+  UseTreeItemLabelSlotOwnProps,
-  UseTreeItem2CheckboxSlotOwnProps,
+  UseTreeItemCheckboxSlotOwnProps,
-  UseTreeItem2IconContainerSlotOwnProps,
+  UseTreeItemIconContainerSlotOwnProps,
-  UseTreeItem2GroupTransitionSlotOwnProps,
+  UseTreeItemGroupTransitionSlotOwnProps,
-  UseTreeItem2DragAndDropOverlaySlotOwnProps,
+  UseTreeItemDragAndDropOverlaySlotOwnProps,
- } from '@mui/x-tree-view/useTreeItem2';
+ } from '@mui/x-tree-view/useTreeItem';
- import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
+ import { useTreeItemUtils } from '@mui/x-tree-view/hooks';
 import {
-  TreeItem2Provider,
+  TreeItemProvider,
-  TreeItem2ProviderProps,
+  TreeItemProviderProps,
- } from '@mui/x-tree-view/TreeItem2Provider';
+ } from '@mui/x-tree-view/TreeItemProvider';
 import {
-  TreeItem2Icon,
+  TreeItemIcon,
-  TreeItem2IconProps,
+  TreeItemIconProps,
-  TreeItem2IconSlots,
+  TreeItemIconSlots,
-  TreeItem2IconSlotProps,
+  TreeItemIconSlotProps,
- } from '@mui/x-tree-view/TreeItem2Icon';
+ } from '@mui/x-tree-view/TreeItemIcon';
 import {
-  TreeItem2DragAndDropOverlay,
+  TreeItemDragAndDropOverlay,
-  TreeItem2DragAndDropOverlayProps,
+  TreeItemDragAndDropOverlayProps,
- } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
+ } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
 import {
-  TreeItem2LabelInput,
+  TreeItemLabelInput,
-  TreeItem2LabelInputProps,
+  TreeItemLabelInputProps,
- } from '@mui/x-tree-view/TreeItem2LabelInput';
+ } from '@mui/x-tree-view/TreeItemLabelInput';

mui-bot · 2024-10-10T13:29:59Z

Deploy preview: https://deploy-preview-14913--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against e81b0d8

…ents and utils

github-actions · 2024-10-16T07:52:39Z