[TreeView] Add label editing feature

docs/data/pages.ts

@@ -510,6 +510,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' },
           { pathname: '/x/react-tree-view/rich-tree-view/ordering', plan: 'pro' },
         ],
       },

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { MUI_X_PRODUCTS } from './products';
+
+export default function ApiMethodUpdateItemLabel() {
+  const [isLabelUpdated, setIsLabelUpdated] = React.useState(false);
+  const apiRef = useTreeViewApiRef();
+
+  const handleUpdateLabel = () => {
+    if (isLabelUpdated) {
+      apiRef.current.updateItemLabel('grid', 'Data Grid');
+      setIsLabelUpdated(false);
+    } else {
+      apiRef.current.updateItemLabel('grid', 'New Label');
+      setIsLabelUpdated(true);
+    }
+  };
+
+  return (
+    <Stack spacing={2}>
+      <Stack spacing={2} direction="row">
+        <Button onClick={handleUpdateLabel}>
+          {isLabelUpdated ? 'Reset Data Grid label' : 'Change Data Grid label'}
+        </Button>
+      </Stack>
+      <Box sx={{ minHeight: 352, minWidth: 260 }}>
+        <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
+      </Box>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { MUI_X_PRODUCTS } from './products';
+
+export default function ApiMethodUpdateItemLabel() {
+  const [isLabelUpdated, setIsLabelUpdated] = React.useState(false);
+  const apiRef = useTreeViewApiRef();
+
+  const handleUpdateLabel = () => {
+    if (isLabelUpdated) {
+      apiRef.current!.updateItemLabel('grid', 'Data Grid');
+      setIsLabelUpdated(false);
+    } else {
+      apiRef.current!.updateItemLabel('grid', 'New Label');
+      setIsLabelUpdated(true);
+    }
+  };
+
+  return (
+    <Stack spacing={2}>
+      <Stack spacing={2} direction="row">
+        <Button onClick={handleUpdateLabel}>
+          {isLabelUpdated ? 'Reset Data Grid label' : 'Change Data Grid label'}
+        </Button>
+      </Stack>
+      <Box sx={{ minHeight: 352, minWidth: 260 }}>
+        <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
+      </Box>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,8 @@
+<Stack spacing={2} direction="row">
+  <Button onClick={handleUpdateLabel}>
+    {isLabelUpdated ? 'Reset Data Grid label' : 'Change Data Grid label'}
+  </Button>
+</Stack>
+<Box sx={{ minHeight: 352, minWidth: 260 }}>
+  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
+</Box>

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
+import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
+
+import { MUI_X_PRODUCTS } from './products';
+
+const CustomTreeItem2 = React.forwardRef(function CustomTreeItem2(props, ref) {
+  const {
+    interactions: { handleCancelItemLabelEditing },
+  } = useTreeItem2Utils({
+    itemId: props.itemId,
+    children: props.children,
+  });
+
+  const handleInputBlur = (event) => {
+    handleCancelItemLabelEditing(event);
+  };
+
+  return (
+    <TreeItem2
+      {...props}
+      ref={ref}
+      slotProps={{
+        labelInput: {
+          onBlur: handleInputBlur,
+        },
+      }}
+    />
+  );
+});
+
+export default function CustomBehavior() {
+  return (
+    <Box sx={{ minHeight: 352, minWidth: 260 }}>
+      <RichTreeView
+        items={MUI_X_PRODUCTS}
+        slots={{ item: CustomTreeItem2 }}
+        isItemEditable
+        defaultExpandedItems={['grid', 'pickers']}
+      />
+    </Box>
+  );
+}

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
+import { TreeItem2, TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
+import { UseTreeItem2LabelInputSlotProps } from '@mui/x-tree-view/useTreeItem2/useTreeItem2.types';
+import { MUI_X_PRODUCTS } from './products';
+
+const CustomTreeItem2 = React.forwardRef(function CustomTreeItem2(
+  props: TreeItem2Props,
+  ref: React.Ref<HTMLLIElement>,
+) {
+  const {
+    interactions: { handleCancelItemLabelEditing },
+  } = useTreeItem2Utils({
+    itemId: props.itemId,
+    children: props.children,
+  });
+
+  const handleInputBlur: UseTreeItem2LabelInputSlotProps['onBlur'] = (event) => {
+    handleCancelItemLabelEditing(event);
+  };
+
+  return (
+    <TreeItem2
+      {...props}
+      ref={ref}
+      slotProps={{
+        labelInput: {
+          onBlur: handleInputBlur,
+        },
+      }}
+    />
+  );
+});
+
+export default function CustomBehavior() {
+  return (
+    <Box sx={{ minHeight: 352, minWidth: 260 }}>
+      <RichTreeView
+        items={MUI_X_PRODUCTS}
+        slots={{ item: CustomTreeItem2 }}
+        isItemEditable
+        defaultExpandedItems={['grid', 'pickers']}
+      />
+    </Box>
+  );
+}

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

@@ -0,0 +1,6 @@
+<RichTreeView
+  items={MUI_X_PRODUCTS}
+  slots={{ item: CustomTreeItem2 }}
+  isItemEditable
+  defaultExpandedItems={['grid', 'pickers']}
+/>

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

@@ -0,0 +1,187 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import CheckIcon from '@mui/icons-material/Check';
+import IconButton from '@mui/material/IconButton';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import { TreeItem2, TreeItem2Label } from '@mui/x-tree-view/TreeItem2';
+
+import { useTreeItem2 } from '@mui/x-tree-view/useTreeItem2/useTreeItem2';
+import { useTreeItem2Utils } from '@mui/x-tree-view/hooks/useTreeItem2Utils';
+
+const StyledLabelInput = styled('input')(({ theme }) => ({
+  ...theme.typography.body1,
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: theme.shape.borderRadius,
+  border: 'none',
+  padding: '0 2px',
+  boxSizing: 'border-box',
+  width: 100,
+  '&:focus': {
+    outline: `1px solid ${theme.palette.primary.main}`,
+  },
+}));
+
+export const ITEMS = [
+  {
+    id: '1',
+    firstName: 'Jane',
+    lastName: 'Doe',
+    editable: true,
+    children: [
+      { id: '1.1', firstName: 'Elena', lastName: 'Kim', editable: true },
+      { id: '1.2', firstName: 'Noah', lastName: 'Rodriguez', editable: true },
+      { id: '1.3', firstName: 'Maya', lastName: 'Patel', editable: true },
+    ],
+  },
+  {
+    id: '2',
+    firstName: 'Liam',
+    lastName: 'Clarke',
+    editable: true,
+    children: [
+      {
+        id: '2.1',
+        firstName: 'Ethan',
+        lastName: 'Lee',
+        editable: true,
+      },
+      { id: '2.2', firstName: 'Ava', lastName: 'Jones', editable: true },
+    ],
+  },
+];
+
+function Label({ children, ...other }) {
+  return (
+    <TreeItem2Label
+      {...other}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2,
+        justifyContent: 'space-between',
+        minHeight: 30,
+      }}
+    >
+      {children}
+    </TreeItem2Label>
+  );
+}
+
+const LabelInput = React.forwardRef(function LabelInput(
+  { item, handleCancelItemLabelEditing, handleSaveItemLabel, ...props },
+  ref,
+) {
+  const [initialNameValue, setInitialNameValue] = React.useState({
+    firstName: item.firstName,
+    lastName: item.lastName,
+  });
+  const [nameValue, setNameValue] = React.useState({
+    firstName: item.firstName,
+    lastName: item.lastName,
+  });
+
+  const handleFirstNameChange = (event) => {
+    setNameValue((prev) => ({ ...prev, firstName: event.target.value }));
+  };
+  const handleLastNameChange = (event) => {
+    setNameValue((prev) => ({ ...prev, lastName: event.target.value }));
+  };
+
+  const reset = () => {
+    setNameValue(initialNameValue);
+  };
+  const save = () => {
+    setInitialNameValue(nameValue);
+  };
+
+  return (
+    <React.Fragment>
+      <StyledLabelInput
+        {...props}
+        onChange={handleFirstNameChange}
+        value={nameValue.firstName}
+        autoFocus
+        type="text"
+        ref={ref}
+      />
+      <StyledLabelInput
+        {...props}
+        onChange={handleLastNameChange}
+        value={nameValue.lastName}
+        type="text"
+        ref={ref}
+      />
+      <IconButton
+        color="success"
+        size="small"
+        onClick={(event) => {
+          handleSaveItemLabel(event, `${nameValue.firstName} ${nameValue.lastName}`);
+          save();
+        }}
+      >
+        <CheckIcon fontSize="small" />
+      </IconButton>
+      <IconButton
+        color="error"
+        size="small"
+        onClick={(event) => {
+          handleCancelItemLabelEditing(event);
+          reset();
+        }}
+      >
+        <CloseRoundedIcon fontSize="small" />
+      </IconButton>
+    </React.Fragment>
+  );
+});
+
+const CustomTreeItem2 = React.forwardRef(function CustomTreeItem2(props, ref) {
+  const {
+    interactions: { handleCancelItemLabelEditing, handleSaveItemLabel },
+  } = useTreeItem2Utils({
+    itemId: props.itemId,
+    children: props.children,
+  });
+  const { publicAPI } = useTreeItem2(props);
+
+  const handleInputBlur = (event) => {
+    event.defaultMuiPrevented = true;
+  };
+
+  const handleInputKeyDown = (event) => {
+    event.defaultMuiPrevented = true;
+  };
+
+  return (
+    <TreeItem2
+      {...props}
+      ref={ref}
+      slots={{ label: Label, labelInput: LabelInput }}
+      slotProps={{
+        labelInput: {
+          item: publicAPI.getItem(props.itemId),
+          onBlur: handleInputBlur,
+          onKeyDown: handleInputKeyDown,
+          handleCancelItemLabelEditing,
+          handleSaveItemLabel,
+        },
+      }}
+    />
+  );
+});
+
+export default function CustomLabelInput() {
+  return (
+    <Box sx={{ minHeight: 352, minWidth: 340 }}>
+      <RichTreeView
+        items={ITEMS}
+        slots={{ item: CustomTreeItem2 }}
+        isItemEditable
+        defaultExpandedItems={['1', '2']}
+        getItemLabel={(item) => `${item.firstName} ${item.lastName}`}
+      />
+    </Box>
+  );
+}