[TreeView] Add label editing feature

docs/data/pages.ts

@@ -503,6 +503,7 @@ const pages: MuiPage[] = [
           { 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' },
+          { pathname: '/x/react-tree-view/rich-tree-view/editing' },
         ],
       },
       {

docs/data/tree-view/rich-tree-view/editing/LabelEditing.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
+
+const 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: 'I am editable',
+    editable: true,
+    children: [
+      {
+        id: 'pickers-community',
+        label: 'also editable',
+        editable: true,
+      },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+];
+
+export default function LabelEditing() {
+  return (
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+      <RichTreeView
+        items={MUI_X_PRODUCTS}
+        slots={{ item: TreeItem2 }}
+        isItemEditable={(item) => Boolean(item?.editable)}
+        defaultExpandedItems={['grid', 'pickers']}
+        checkboxSelection
+      />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/editing/LabelEditing.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
+
+type ExtendedTreeItemProps = {
+  editable?: boolean;
+  id: string;
+  label: string;
+};
+
+const MUI_X_PRODUCTS: TreeViewBaseItem<ExtendedTreeItemProps>[] = [
+  {
+    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: 'I am editable',
+    editable: true,
+    children: [
+      {
+        id: 'pickers-community',
+        label: 'also editable',
+        editable: true,
+      },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+];
+
+export default function LabelEditing() {
+  return (
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
+      <RichTreeView
+        items={MUI_X_PRODUCTS}
+        slots={{ item: TreeItem2 }}
+        isItemEditable={(item) => Boolean(item?.editable)}
+        defaultExpandedItems={['grid', 'pickers']}
+        checkboxSelection
+      />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/editing/LabelEditing.tsx.preview

@@ -0,0 +1,7 @@
+<RichTreeView
+  items={MUI_X_PRODUCTS}
+  slots={{ item: TreeItem2 }}
+  isItemEditable={(item) => Boolean(item?.editable)}
+  defaultExpandedItems={['grid', 'pickers']}
+  checkboxSelection
+/>

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

@@ -0,0 +1,22 @@
+---
+productId: x-tree-view
+title: Rich Tree View - Focus
+githubLabel: 'component: tree view'
+packageName: '@mui/x-tree-view'
+waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+packageName: '@mui/x-tree-view'
+---
+
+# Rich Tree View - label editing
+
+<p class="description">Learn how to edit the label of Tree View items.</p>
+
+:::warning
+this doc page is stip WIP
+:::
+
+To edit a label double click the item or press Enter on the keyboard
+
+Enter again after editing will save the new label. Bluring or pressing escape will cancel the editing
+
+{{"demo": "LabelEditing.js"}}

docs/pages/x/api/tree-view/rich-tree-view.json

@@ -46,6 +46,14 @@
         "returned": "boolean"
       }
     },
+    "isItemEditable": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(item: R) => boolean",
+        "describedArgs": ["item"],
+        "returned": "boolean"
+      }
+    },
     "itemChildrenIndentation": {
       "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },
       "default": "12px"

docs/pages/x/api/tree-view/simple-tree-view.json

@@ -21,6 +21,14 @@
       "type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" }
     },
     "id": { "type": { "name": "string" } },
+    "isItemEditable": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(item: R) => boolean",
+        "describedArgs": ["item"],
+        "returned": "boolean"
+      }
+    },
     "itemChildrenIndentation": {
       "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },
       "default": "12px"

docs/pages/x/api/tree-view/tree-item-2.json

@@ -56,6 +56,12 @@
       "default": "TreeItem2Label",
       "class": "MuiTreeItem2-label"
     },
+    {
+      "name": "labelInput",
+      "description": "The component that renders the input to edit the label when the item is editable and is currently being edited.",
+      "default": "TreeItem2LabelInput",
+      "class": null
+    },
     { "name": "collapseIcon", "description": "The icon used to collapse the item.", "class": null },
     { "name": "expandIcon", "description": "The icon used to expand the item.", "class": null },
     { "name": "endIcon", "description": "The icon displayed next to an end item.", "class": null },

docs/pages/x/api/tree-view/tree-view.json

@@ -21,6 +21,14 @@
       "type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" }
     },
     "id": { "type": { "name": "string" } },
+    "isItemEditable": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(item: R) => boolean",
+        "describedArgs": ["item"],
+        "returned": "boolean"
+      }
+    },
     "itemChildrenIndentation": {
       "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },
       "default": "12px"

docs/pages/x/react-tree-view/rich-tree-view/editing.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docsx/data/tree-view/rich-tree-view/editing/editing.md?muiMarkdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}

docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json

@@ -42,6 +42,13 @@
         "boolean": "<code>true</code> if the item should be disabled."
       }
     },
+    "isItemEditable": {
+      "description": "Used to determine if a given item is editable.",
+      "typeDescriptions": {
+        "item": "The item to check.",
+        "boolean": "<code>true</code> if the item should be editable."
+      }
+    },
     "itemChildrenIndentation": {
       "description": "Horizontal indentation between an item and its children. Examples: 24, &quot;24px&quot;, &quot;2rem&quot;, &quot;2em&quot;."
     },

docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json

@@ -28,6 +28,13 @@
     "id": {
       "description": "This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id."
     },
+    "isItemEditable": {
+      "description": "Used to determine if a given item is editable.",
+      "typeDescriptions": {
+        "item": "The item to check.",
+        "boolean": "<code>true</code> if the item should be editable."
+      }
+    },
     "itemChildrenIndentation": {
       "description": "Horizontal indentation between an item and its children. Examples: 24, &quot;24px&quot;, &quot;2rem&quot;, &quot;2em&quot;."
     },

docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json

@@ -45,6 +45,7 @@
     "icon": "The icon to display next to the tree item's label.",
     "iconContainer": "The component that renders the icon.",
     "label": "The component that renders the item label.",
+    "labelInput": "The component that renders the input to edit the label when the item is editable and is currently being edited.",
     "root": "The component that renders the root."
   }
 }

docs/translations/api-docs/tree-view/tree-view/tree-view.json

@@ -28,6 +28,13 @@
     "id": {
       "description": "This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id."
     },
+    "isItemEditable": {
+      "description": "Used to determine if a given item is editable.",
+      "typeDescriptions": {
+        "item": "The item to check.",
+        "boolean": "<code>true</code> if the item should be editable."
+      }
+    },
     "itemChildrenIndentation": {
       "description": "Horizontal indentation between an item and its children. Examples: 24, &quot;24px&quot;, &quot;2rem&quot;, &quot;2em&quot;."
     },

packages/x-tree-view/src/RichTreeView/RichTreeView.tsx

@@ -47,14 +47,15 @@ function WrappedTreeItem<R extends {}>({
   id,
   itemId,
   children,
+  isBeingEdited,
 }: Pick<RichTreeViewProps<R, any>, 'slots' | 'slotProps'> &
-  Pick<TreeItemProps, 'id' | 'itemId' | 'children'> & { label: string }) {
+  Pick<TreeItemProps, 'id' | 'itemId' | 'children' | 'isBeingEdited'> & { label: string }) {
   const Item = slots?.item ?? TreeItem;
   const itemProps = useSlotProps({
     elementType: Item,
     externalSlotProps: slotProps?.item,
-    additionalProps: { itemId, id, label },
-    ownerState: { itemId, label },
+    additionalProps: { itemId, id, label, isBeingEdited },
+    ownerState: { itemId, label, isBeingEdited },
   });
 
   return <Item {...itemProps}>{children}</Item>;
@@ -120,6 +121,7 @@ const RichTreeView = React.forwardRef(function RichTreeView<
     itemId,
     id,
     children,
+    isBeingEdited,
   }: ReturnType<typeof instance.getItemsToRender>[number]) => {
     return (
       <WrappedTreeItem
@@ -129,6 +131,7 @@ const RichTreeView = React.forwardRef(function RichTreeView<
         label={label}
         id={id}
         itemId={itemId}
+        isBeingEdited={isBeingEdited}
       >
         {children?.map(renderItem)}
       </WrappedTreeItem>
@@ -232,6 +235,13 @@ RichTreeView.propTypes = {
    * @returns {boolean} `true` if the item should be disabled.
    */
   isItemDisabled: PropTypes.func,
+  /**
+   * Used to determine if a given item is editable.
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {boolean} `true` if the item should be editable.
+   */
+  isItemEditable: PropTypes.func,
   /**
    * Horizontal indentation between an item and its children.
    * Examples: 24, "24px", "2rem", "2em".

packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx

@@ -174,6 +174,13 @@ SimpleTreeView.propTypes = {
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: PropTypes.string,
+  /**
+   * Used to determine if a given item is editable.
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {boolean} `true` if the item should be editable.
+   */
+  isItemEditable: PropTypes.func,
   /**
    * Horizontal indentation between an item and its children.
    * Examples: 24, "24px", "2rem", "2em".

packages/x-tree-view/src/TreeItem/TreeItem.tsx

@@ -422,6 +422,7 @@ TreeItem.propTypes = {
    * @default false
    */
   disabled: PropTypes.bool,
+  isBeingEdited: PropTypes.bool.isRequired,
   /**
    * The id of the item.
    */

packages/x-tree-view/src/TreeItem/TreeItem.types.ts

@@ -91,6 +91,7 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme>;
+  isBeingEdited: boolean;
 }
 
 export interface TreeItemOwnerState extends TreeItemProps {