[TreeView] Introduce a new TreeItem2 component and a new useTreeItem2 hook

docs/data/pages.ts

@@ -501,6 +501,7 @@ const pages: MuiPage[] = [
           { pathname: '/x/react-tree-view/rich-tree-view/items' },
           { pathname: '/x/react-tree-view/rich-tree-view/selection' },
           { pathname: '/x/react-tree-view/rich-tree-view/expansion' },
+          { pathname: '/x/react-tree-view/rich-tree-view/customization' },
           { pathname: '/x/react-tree-view/rich-tree-view/focus' },
         ],
       },

docs/data/tree-view-component-api-pages.ts

@@ -13,6 +13,10 @@ const apiPages: MuiPage[] = [
     pathname: '/x/api/tree-view/tree-item',
     title: 'TreeItem',
   },
+  {
+    pathname: '/x/api/tree-view/tree-item-2',
+    title: 'TreeItem2',
+  },
   {
     pathname: '/x/api/tree-view/tree-view',
     title: 'TreeView',

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

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { TreeItem2, TreeItem2Label } from '@mui/x-tree-view/TreeItem2';
+import { RichTreeView } from '@mui/x-tree-view';
+
+function CustomLabel(props) {
+  const { children, onChange, ...other } = props;
+
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [value, setValue] = React.useState('');
+  const editingLabelRef = React.useRef(null);
+
+  const handleLabelDoubleClick = (event) => {
+    event.stopPropagation();
+    setIsEditing(true);
+    setValue(children);
+  };
+
+  const handleEditingLabelChange = (event) => {
+    setValue(event.target.value);
+  };
+
+  const handleEditingLabelKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      event.stopPropagation();
+      setIsEditing(false);
+      onChange(value);
+    }
+  };
+
+  React.useEffect(() => {
+    if (isEditing) {
+      editingLabelRef.current?.focus();
+    }
+  }, [isEditing]);
+
+  if (isEditing) {
+    return (
+      <input
+        value={value}
+        onChange={handleEditingLabelChange}
+        onKeyDown={handleEditingLabelKeyDown}
+        ref={editingLabelRef}
+      />
+    );
+  }
+
+  return (
+    <TreeItem2Label {...other} onDoubleClick={handleLabelDoubleClick}>
+      {children}
+    </TreeItem2Label>
+  );
+}
+
+const TreeItemContext = React.createContext({ onLabelValueChange: () => {} });
+
+const CustomTreeItem = React.forwardRef((props, ref) => {
+  const { onLabelValueChange } = React.useContext(TreeItemContext);
+
+  const handleLabelValueChange = (newLabel) => {
+    onLabelValueChange(props.nodeId, newLabel);
+  };
+
+  return (
+    <TreeItem2
+      ref={ref}
+      {...props}
+      slots={{
+        label: CustomLabel,
+      }}
+      slotProps={{
+        label: {
+          onChange: handleLabelValueChange,
+        },
+      }}
+    />
+  );
+});
+
+const DEFAULT_MUI_X_PRODUCTS = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+];
+
+const DEFAULT_EXPANDED_NODES = ['pickers'];
+
+export default function LabelSlots() {
+  const [products, setProducts] = React.useState(DEFAULT_MUI_X_PRODUCTS);
+
+  const context = React.useMemo(
+    () => ({
+      onLabelValueChange: (nodeId, label) =>
+        setProducts((prev) => {
+          const walkTree = (item) => {
+            if (item.id === nodeId) {
+              return { ...item, label };
+            }
+            if (item.children) {
+              return { ...item, children: item.children.map(walkTree) };
+            }
+
+            return item;
+          };
+
+          return prev.map(walkTree);
+        }),
+    }),
+    [],
+  );
+
+  return (
+    <TreeItemContext.Provider value={context}>
+      <RichTreeView
+        items={products}
+        aria-label="customized"
+        defaultExpandedNodes={DEFAULT_EXPANDED_NODES}
+        sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }}
+        slots={{ item: CustomTreeItem }}
+      />
+    </TreeItemContext.Provider>
+  );
+}

docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import {
+  TreeItem2,
+  TreeItem2Label,
+  TreeItem2Props,
+} from '@mui/x-tree-view/TreeItem2';
+import { RichTreeView, TreeViewBaseItem } from '@mui/x-tree-view';
+
+interface CustomLabelProps {
+  children: string;
+  className: string;
+  onChange: (value: string) => void;
+}
+
+function CustomLabel(props: CustomLabelProps) {
+  const { children, onChange, ...other } = props;
+
+  const [isEditing, setIsEditing] = React.useState<boolean>(false);
+  const [value, setValue] = React.useState('');
+  const editingLabelRef = React.useRef<HTMLInputElement>(null);
+
+  const handleLabelDoubleClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    setIsEditing(true);
+    setValue(children);
+  };
+
+  const handleEditingLabelChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const handleEditingLabelKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      event.stopPropagation();
+      setIsEditing(false);
+      onChange(value);
+    }
+  };
+
+  React.useEffect(() => {
+    if (isEditing) {
+      editingLabelRef.current?.focus();
+    }
+  }, [isEditing]);
+
+  if (isEditing) {
+    return (
+      <input
+        value={value}
+        onChange={handleEditingLabelChange}
+        onKeyDown={handleEditingLabelKeyDown}
+        ref={editingLabelRef}
+      />
+    );
+  }
+
+  return (
+    <TreeItem2Label {...other} onDoubleClick={handleLabelDoubleClick}>
+      {children}
+    </TreeItem2Label>
+  );
+}
+
+const TreeItemContext = React.createContext<{
+  onLabelValueChange: (nodeId: string, label: string) => void;
+}>({ onLabelValueChange: () => {} });
+
+const CustomTreeItem = React.forwardRef(
+  (props: TreeItem2Props, ref: React.Ref<HTMLLIElement>) => {
+    const { onLabelValueChange } = React.useContext(TreeItemContext);
+
+    const handleLabelValueChange = (newLabel: string) => {
+      onLabelValueChange(props.nodeId, newLabel);
+    };
+
+    return (
+      <TreeItem2
+        ref={ref}
+        {...props}
+        slots={{
+          label: CustomLabel,
+        }}
+        slotProps={{
+          label: {
+            onChange: handleLabelValueChange,
+          } as any,
+        }}
+      />
+    );
+  },
+);
+
+const DEFAULT_MUI_X_PRODUCTS: TreeViewBaseItem[] = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+];
+
+const DEFAULT_EXPANDED_NODES = ['pickers'];
+
+export default function LabelSlots() {
+  const [products, setProducts] = React.useState(DEFAULT_MUI_X_PRODUCTS);
+
+  const context = React.useMemo(
+    () => ({
+      onLabelValueChange: (nodeId: string, label: string) =>
+        setProducts((prev) => {
+          const walkTree = (item: TreeViewBaseItem): TreeViewBaseItem => {
+            if (item.id === nodeId) {
+              return { ...item, label };
+            }
+            if (item.children) {
+              return { ...item, children: item.children.map(walkTree) };
+            }
+
+            return item;
+          };
+
+          return prev.map(walkTree);
+        }),
+    }),
+    [],
+  );
+
+  return (
+    <TreeItemContext.Provider value={context}>
+      <RichTreeView
+        items={products}
+        aria-label="customized"
+        defaultExpandedNodes={DEFAULT_EXPANDED_NODES}
+        sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }}
+        slots={{ item: CustomTreeItem }}
+      />
+    </TreeItemContext.Provider>
+  );
+}

docs/data/tree-view/rich-tree-view/customization/LabelSlots.tsx.preview

@@ -0,0 +1,9 @@
+<TreeItemContext.Provider value={context}>
+  <RichTreeView
+    items={products}
+    aria-label="customized"
+    defaultExpandedNodes={DEFAULT_EXPANDED_NODES}
+    sx={{ overflowX: 'hidden', minHeight: 224, flexGrow: 1, maxWidth: 300 }}
+    slots={{ item: CustomTreeItem }}
+  />
+</TreeItemContext.Provider>

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

@@ -0,0 +1,29 @@
+---
+productId: x-tree-view
+title: Rich Tree View - Customization
+components: RichTreeView, TreeItem, TreeItem2
+packageName: '@mui/x-tree-view'
+githubLabel: 'component: tree view'
+waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+---
+
+# Rich Tree View - Customization
+
+<p class="description">Learn how to customize the rich version of the Tree View component.</p>
+
+## Basics
+
+### Custom label
+
+Use the `label` slot to customize the Tree Item label or to replace it with an entirely custom component.
+
+The `slotProps` prop allows you to pass props to the default label component:
+
+:::warning
+TODO
+:::
+
+The `slots` prop allows you to replace the default label with your own component.
+The demo below shows how to implement a very basic label-editing feature:
+
+{{"demo": "LabelSlots.js", "defaultCodeOpen": false}}

docs/data/tree-view/rich-tree-view/headless/headless.md

@@ -206,8 +206,8 @@
 You can use the `contextValue` property in the returned object to pass elements to the Tree Item:
 
 :::warning
-The context is private for now and cannot be accessed outside of our own plugins.
-You need to modify the `useTreeItem` hook to return the new value returned by your plugin.
+The context is private for now and cannot be accessed outside our own plugins.
+You need to modify the `useTreeItemState` hook to return the new value returned by your plugin.
 :::
 
 ```tsx
@@ -219,25 +219,25 @@
   };
 };
 
-function useTreeItem(nodeId: string) {
+function useTreeItemState(nodeId: string) {
   const {
     customPlugin,
     // ...other elements returned by the context
   } = useTreeViewContext<DefaultTreeViewPlugins>();
 
-  // ...rest of the `useTreeItem` hook content
+  // ...rest of the `useTreeItemState` hook content
 
   return {
     customPlugin,
-    // ...other elements returned by `useTreeItem`
+    // ...other elements returned by `useTreeItemState`
   };
 }
 
 function TreeItemContent() {
   const {
     customPlugin,
-    // ...other elements returned by `useTreeItem`
-  } = useTreeItem(props.nodeId);
+    // ...other elements returned by `useTreeItemState`
+  } = useTreeItemState(props.nodeId);
 
   // Do something with customPlugin.enabled
 }

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)}`,