@mui/x-tree-view 7.12.1 → 7.13.0

package/CHANGELOG.md

@@ -3,6 +3,87 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.13.0
+
+_Aug 16, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Allow to [edit the label](https://mui.com/x/react-tree-view/rich-tree-view/editing/) of Tree View's items.
+
+  <img width="344" src="https://github.com/user-attachments/assets/1a6cf765-2dc8-4906-bd93-139086eed148" alt="Item label editing" />
+
+- 🔧 Improve rows accessibility on the Data Grid features "Tree Data" and "Row Grouping". Certain "Row Grouping" accessibility updates will only be applied if experimental feature flag is enabled. See the [documentation](https://mui.com/x/react-data-grid/row-grouping/#accessibility-changes-in-v8) for more information.
+- 🌍 Improve Vietnamese (vi-VN) locale on the Data Grid
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.13.0`
+
+- [DataGrid] Fix CSV export for `null` and `undefined` values (#14166) @k-rajat19
+- [DataGrid] Fix error logged during skeleton loading with nested data grid (#14186) @KenanYusuf
+- [DataGrid] Remove needless check in `useGridStateInitialization` (#14181) @k-rajat19
+- [DataGrid] Add recipe for persisting filters in local storage (#14208) @cherniavskii
+- [l10n] Improve Vietnamese (vi-VN) locale (#14216) @hungnd-casso
+
+#### `@mui/x-data-grid-pro@7.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.13.0`, plus:
+
+- [DataGridPro] Fix Tree Data and Row Grouping rows accessibility (#13623) @arminmeh
+
+#### `@mui/x-data-grid-premium@7.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.13.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.13.0`
+
+- [pickers] Fix date and time merging to retain milliseconds (#14173) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.13.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.13.0`
+
+- [charts] Add `baseline` property to the `LineChart` `series` (#14153) @JCQuintas
+- [charts] Fix issue where tooltip would disappear on mouse click (#14187) @alexfauquette
+- [charts] Rename `CartesianContextProvider` to `CartesianProvider` (#14102) @JCQuintas
+- [charts] Support axis with the same value for all data points (#14191) @alexfauquette
+
+#### `@mui/x-date-charts-pro@7.0.0-alpha.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.13.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.13.0`
+
+- [TreeView] Add label editing feature (#13388) @noraleonte
+- [TreeView] Fix the parameters passed for the `canMoveItemToNewPosition` prop (#14176) @flaviendelangle
+
+### Docs
+
+- [docs] Extract dataset in the Line chart docs (#14034) @alexfauquette
+- [docs] Remove redundant encoding in the mock data source server (#14185) @MBilalShafi
+- [docs] Use Netflix financial results to document bar charts (#13991) @alexfauquette
+- [docs] Remove relience of abbreviations (#14226) @oliviertassinari
+
+### Core
+
+- [core] Bump monorepo (#14141) @Janpot
+- [core] Fix ESLint issue (#14207) @LukasTy
+- [core] Fix Netlify build cache issue (#14182) @cherniavskii
+- [code-infra] Refactor Netlify `cache-docs` plugin setup (#14105) @LukasTy
+- [internals] Move utils needed for tree view virtualization to shared package (#14202) @flaviendelangle
+
 ## 7.12.1
 
 _Aug 8, 2024_

package/RichTreeView/RichTreeView.js

@@ -140,7 +140,8 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
       getItemOrderedChildrenIds: PropTypes.func.isRequired,
       getItemTree: PropTypes.func.isRequired,
       selectItem: PropTypes.func.isRequired,
-      setItemExpansion: PropTypes.func.isRequired
+      setItemExpansion: PropTypes.func.isRequired,
+      updateItemLabel: PropTypes.func.isRequired
     })
   }),
   /**
@@ -191,7 +192,8 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
-    indentationAtItemLevel: PropTypes.bool
+    indentationAtItemLevel: PropTypes.bool,
+    labelEditing: PropTypes.bool
   }),
   /**
    * Used to determine the id of a given item.
@@ -223,6 +225,16 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * @returns {boolean} `true` if the item should be disabled.
    */
   isItemDisabled: PropTypes.func,
+  /**
+   * Determines if a given item is editable or not.
+   * Make sure to also enable the `labelEditing` experimental feature:
+   * `<RichTreeViewPro experimentalFeatures={{ labelEditing: true }}  />`.
+   * By default, the items are not editable.
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {boolean} `true` if the item is editable.
+   */
+  isItemEditable: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   /**
    * Horizontal indentation between an item and its children.
    * Examples: 24, "24px", "2rem", "2em".
@@ -260,6 +272,12 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * @param {string} itemId The id of the focused item.
    */
   onItemFocus: PropTypes.func,
+  /**
+   * Callback fired when the label of an item changes.
+   * @param {TreeViewItemId} itemId The id of the item that was edited.
+   * @param {string} newLabel The new label of the items.
+   */
+  onItemLabelChange: PropTypes.func,
   /**
    * Callback fired when a tree item is selected or deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.

package/RichTreeView/RichTreeView.plugins.d.ts

@@ -5,9 +5,10 @@ import { UseTreeViewSelectionParameters } from '../internals/plugins/useTreeView
 import { UseTreeViewFocusParameters } from '../internals/plugins/useTreeViewFocus';
 import { UseTreeViewIconsParameters } from '../internals/plugins/useTreeViewIcons';
 import { ConvertPluginsIntoSignatures, MergeSignaturesProperty } from '../internals/models';
-export declare const RICH_TREE_VIEW_PLUGINS: readonly [import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewItems").UseTreeViewItemsSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewExpansion").UseTreeViewExpansionSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewSelection").UseTreeViewSelectionSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewFocus").UseTreeViewFocusSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewKeyboardNavigation").UseTreeViewKeyboardNavigationSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewIcons").UseTreeViewIconsSignature>];
+import { UseTreeViewLabelParameters } from '../internals/plugins/useTreeViewLabel';
+export declare const RICH_TREE_VIEW_PLUGINS: readonly [import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewItems").UseTreeViewItemsSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewExpansion").UseTreeViewExpansionSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewSelection").UseTreeViewSelectionSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewFocus").UseTreeViewFocusSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewKeyboardNavigation").UseTreeViewKeyboardNavigationSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewIcons").UseTreeViewIconsSignature>, import("../internals/models").TreeViewPlugin<import("../internals/plugins/useTreeViewLabel").UseTreeViewLabelSignature>];
 export type RichTreeViewPluginSignatures = ConvertPluginsIntoSignatures<typeof RICH_TREE_VIEW_PLUGINS>;
 export type RichTreeViewPluginSlots = MergeSignaturesProperty<RichTreeViewPluginSignatures, 'slots'>;
 export type RichTreeViewPluginSlotProps = MergeSignaturesProperty<RichTreeViewPluginSignatures, 'slotProps'>;
-export interface RichTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters {
+export interface RichTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters, UseTreeViewLabelParameters<R> {
 }

package/RichTreeView/RichTreeView.plugins.js

@@ -4,6 +4,7 @@ import { useTreeViewSelection } from '../internals/plugins/useTreeViewSelection'
 import { useTreeViewFocus } from '../internals/plugins/useTreeViewFocus';
 import { useTreeViewKeyboardNavigation } from '../internals/plugins/useTreeViewKeyboardNavigation';
 import { useTreeViewIcons } from '../internals/plugins/useTreeViewIcons';
-export const RICH_TREE_VIEW_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons];
+import { useTreeViewLabel } from '../internals/plugins/useTreeViewLabel';
+export const RICH_TREE_VIEW_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons, useTreeViewLabel];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/TreeItem/TreeItem.js

@@ -25,6 +25,7 @@ import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
 import { TreeItem2Provider } from '../TreeItem2Provider';
 import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
 import { useTreeItemState } from './useTreeItemState';
+import { isTargetInDescendants } from '../internals/utils/tree';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTreeItem');
 const useUtilityClasses = ownerState => {
@@ -41,6 +42,9 @@ const useUtilityClasses = ownerState => {
     iconContainer: ['iconContainer'],
     checkbox: ['checkbox'],
     label: ['label'],
+    labelInput: ['labelInput'],
+    editing: ['editing'],
+    editable: ['editable'],
     groupTransition: ['groupTransition']
   };
   return composeClasses(slots, getTreeItemUtilityClass, classes);
@@ -207,6 +211,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     focused,
     selected,
     disabled,
+    editing,
     handleExpansion
   } = useTreeItemState(itemId);
   const {
@@ -317,10 +322,19 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
   }
   function handleBlur(event) {
     onBlur?.(event);
+    if (editing ||
+    // we can exit the editing state by clicking outside the input (within the tree item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases
+    // we can also exit the editing state by clicking on the root itself -> want to remove the focused item from the state in this case
+    event.relatedTarget && isTargetInDescendants(event.relatedTarget, rootRefObject.current) && (event.target && event.target?.dataset?.element === 'labelInput' && isTargetInDescendants(event.target, rootRefObject.current) || event.relatedTarget?.dataset?.element === 'labelInput')) {
+      return;
+    }
     instance.removeFocusedItem();
   }
   const handleKeyDown = event => {
     onKeyDown?.(event);
+    if (event.target?.dataset?.element === 'labelInput') {
+      return;
+    }
     instance.handleItemKeyDown(event, itemId);
   };
   const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
@@ -340,6 +354,11 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     contentRefObject,
     externalEventHandlers: {}
   }) ?? {};
+  const enhancedLabelInputProps = propsEnhancers.labelInput?.({
+    rootRefObject,
+    contentRefObject,
+    externalEventHandlers: {}
+  }) ?? {};
   return /*#__PURE__*/_jsx(TreeItem2Provider, {
     itemId: itemId,
     children: /*#__PURE__*/_jsxs(TreeItemRoot, _extends({
@@ -368,8 +387,11 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
           selected: classes.selected,
           focused: classes.focused,
           disabled: classes.disabled,
+          editable: classes.editable,
+          editing: classes.editing,
           iconContainer: classes.iconContainer,
           label: classes.label,
+          labelInput: classes.labelInput,
           checkbox: classes.checkbox
         },
         label: label,
@@ -382,6 +404,8 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
         ownerState: ownerState
       }, ContentProps, enhancedContentProps, enhancedDragAndDropOverlayProps.action == null ? {} : {
         dragAndDropOverlayProps: enhancedDragAndDropOverlayProps
+      }, enhancedLabelInputProps.value == null ? {} : {
+        labelInputProps: enhancedLabelInputProps
       }, {
         ref: handleContentRef
       })), children && /*#__PURE__*/_jsx(TreeItemGroup, _extends({

package/TreeItem/TreeItemContent.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { TreeItem2DragAndDropOverlayProps } from '../TreeItem2DragAndDropOverlay';
+import { TreeItem2LabelInputProps } from '../TreeItem2LabelInput';
 export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement> {
     className?: string;
     /**
@@ -22,6 +23,12 @@ export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement>
         label: string;
         /** Styles applied to the checkbox element. */
         checkbox: string;
+        /** Styles applied to the input element that is visible when editing is enabled. */
+        labelInput: string;
+        /** Styles applied to the content element when editing is enabled. */
+        editing: string;
+        /** Styles applied to the content of the items that are editable. */
+        editable: string;
     };
     /**
      * The tree item label.
@@ -44,6 +51,7 @@ export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement>
      */
     displayIcon?: React.ReactNode;
     dragAndDropOverlayProps?: TreeItem2DragAndDropOverlayProps;
+    labelInputProps?: TreeItem2LabelInputProps;
 }
 export type TreeItemContentClassKey = keyof NonNullable<TreeItemContentProps['classes']>;
 /**

package/TreeItem/TreeItemContent.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "itemId", "onClick", "onMouseDown", "dragAndDropOverlayProps"];
+const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "itemId", "onClick", "onMouseDown", "dragAndDropOverlayProps", "labelInputProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Checkbox from '@mui/material/Checkbox';
 import { useTreeItemState } from './useTreeItemState';
 import { TreeItem2DragAndDropOverlay } from '../TreeItem2DragAndDropOverlay';
+import { TreeItem2LabelInput } from '../TreeItem2LabelInput';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -22,7 +23,8 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
       itemId,
       onClick,
       onMouseDown,
-      dragAndDropOverlayProps
+      dragAndDropOverlayProps,
+      labelInputProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -30,6 +32,8 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
     expanded,
     selected,
     focused,
+    editing,
+    editable,
     disableSelection,
     checkboxSelection,
     handleExpansion,
@@ -37,7 +41,10 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
     handleCheckboxSelection,
     handleContentClick,
     preventSelection,
-    expansionTrigger
+    expansionTrigger,
+    toggleItemEditing,
+    handleSaveItemLabel,
+    handleCancelItemLabelEditing
   } = useTreeItemState(itemId);
   const icon = iconProp || expansionIcon || displayIcon;
   const checkboxRef = React.useRef(null);
@@ -62,11 +69,36 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
       onClick(event);
     }
   };
+  const handleLabelDoubleClick = event => {
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    toggleItemEditing();
+  };
+  const handleLabelInputBlur = event => {
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    if (event.target.value) {
+      handleSaveItemLabel(event, event.target.value);
+    }
+  };
+  const handleLabelInputKeydown = event => {
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    const target = event.target;
+    if (event.key === 'Enter' && target.value) {
+      handleSaveItemLabel(event, target.value);
+    } else if (event.key === 'Escape') {
+      handleCancelItemLabelEditing(event);
+    }
+  };
   return (
     /*#__PURE__*/
     /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
     _jsxs("div", _extends({}, other, {
-      className: clsx(className, classes.root, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled),
+      className: clsx(className, classes.root, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
       onClick: handleClick,
       onMouseDown: handleMouseDown,
       ref: ref,
@@ -80,10 +112,17 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
         disabled: disabled || disableSelection,
         ref: checkboxRef,
         tabIndex: -1
-      }), /*#__PURE__*/_jsx("div", {
-        className: classes.label,
+      }), editing ? /*#__PURE__*/_jsx(TreeItem2LabelInput, _extends({}, labelInputProps, {
+        className: classes.labelInput,
+        onBlur: handleLabelInputBlur,
+        onKeyDown: handleLabelInputKeydown
+      })) : /*#__PURE__*/_jsx("div", _extends({
+        className: classes.label
+      }, editable && {
+        onDoubleClick: handleLabelDoubleClick
+      }, {
         children: label
-      }), dragAndDropOverlayProps && /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
+      })), dragAndDropOverlayProps && /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
     }))
   );
 });
@@ -120,6 +159,7 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   /**
    * The tree item label.
    */
-  label: PropTypes.node
+  label: PropTypes.node,
+  labelInputProps: PropTypes.object
 } : void 0;
 export { TreeItemContent };

package/TreeItem/treeItemClasses.d.ts

@@ -19,6 +19,12 @@ export interface TreeItemClasses {
     label: string;
     /** Styles applied to the checkbox element. */
     checkbox: string;
+    /** Styles applied to the input element that is visible when editing is enabled. */
+    labelInput: string;
+    /** Styles applied to the content element when editing is enabled. */
+    editing: string;
+    /** Styles applied to the content of the items that are editable. */
+    editable: string;
     /** Styles applied to the drag and drop overlay. */
     dragAndDropOverlay: string;
 }

package/TreeItem/treeItemClasses.js

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getTreeItemUtilityClass(slot) {
   return generateUtilityClass('MuiTreeItem', slot);
 }
-export const treeItemClasses = generateUtilityClasses('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label', 'checkbox', 'dragAndDropOverlay']);
+export const treeItemClasses = generateUtilityClasses('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label', 'checkbox', 'labelInput', 'editable', 'editing', 'dragAndDropOverlay']);

package/TreeItem/useTreeItemState.d.ts

@@ -1,9 +1,12 @@
 import * as React from 'react';
+import { MuiCancellableEvent } from '../internals/models/MuiCancellableEvent';
 export declare function useTreeItemState(itemId: string): {
     disabled: boolean;
     expanded: boolean;
     selected: boolean;
     focused: boolean;
+    editable: boolean;
+    editing: boolean;
     disableSelection: boolean;
     checkboxSelection: boolean;
     handleExpansion: (event: React.MouseEvent<HTMLDivElement>) => void;
@@ -12,4 +15,7 @@ export declare function useTreeItemState(itemId: string): {
     handleContentClick: ((event: React.MouseEvent, itemId: string) => void) | undefined;
     preventSelection: (event: React.MouseEvent<HTMLDivElement>) => void;
     expansionTrigger: "content" | "iconContainer" | undefined;
+    toggleItemEditing: () => void;
+    handleSaveItemLabel: (event: React.SyntheticEvent & MuiCancellableEvent, label: string) => void;
+    handleCancelItemLabelEditing: (event: React.SyntheticEvent) => void;
 };

package/TreeItem/useTreeItemState.js

@@ -1,4 +1,6 @@
 import { useTreeViewContext } from '../internals/TreeViewProvider';
+import { useTreeViewLabel } from '../internals/plugins/useTreeViewLabel';
+import { hasPlugin } from '../internals/utils/plugins';
 export function useTreeItemState(itemId) {
   const {
     instance,
@@ -19,6 +21,8 @@ export function useTreeItemState(itemId) {
   const focused = instance.isItemFocused(itemId);
   const selected = instance.isItemSelected(itemId);
   const disabled = instance.isItemDisabled(itemId);
+  const editing = instance?.isItemBeingEdited ? instance?.isItemBeingEdited(itemId) : false;
+  const editable = instance.isItemEditable ? instance.isItemEditable(itemId) : false;
   const handleExpansion = event => {
     if (!disabled) {
       if (!focused) {
@@ -79,11 +83,49 @@ export function useTreeItemState(itemId) {
       event.preventDefault();
     }
   };
+  const toggleItemEditing = () => {
+    if (!hasPlugin(instance, useTreeViewLabel)) {
+      return;
+    }
+    if (instance.isItemEditable(itemId)) {
+      if (instance.isItemBeingEdited(itemId)) {
+        instance.setEditedItemId(null);
+      } else {
+        instance.setEditedItemId(itemId);
+      }
+    }
+  };
+  const handleSaveItemLabel = (event, label) => {
+    if (!hasPlugin(instance, useTreeViewLabel)) {
+      return;
+    }
+
+    // As a side effect of `instance.focusItem` called here and in `handleCancelItemLabelEditing` the `labelInput` is blurred
+    // The `onBlur` event is triggered, which calls `handleSaveItemLabel` again.
+    // To avoid creating an unwanted behavior we need to check if the item is being edited before calling `updateItemLabel`
+    // using `instance.isItemBeingEditedRef` instead of `instance.isItemBeingEdited` since the state is not yet updated in this point
+    if (instance.isItemBeingEditedRef(itemId)) {
+      instance.updateItemLabel(itemId, label);
+      toggleItemEditing();
+      instance.focusItem(event, itemId);
+    }
+  };
+  const handleCancelItemLabelEditing = event => {
+    if (!hasPlugin(instance, useTreeViewLabel)) {
+      return;
+    }
+    if (instance.isItemBeingEditedRef(itemId)) {
+      toggleItemEditing();
+      instance.focusItem(event, itemId);
+    }
+  };
   return {
     disabled,
     expanded,
     selected,
     focused,
+    editable,
+    editing,
     disableSelection,
     checkboxSelection,
     handleExpansion,
@@ -91,6 +133,9 @@ export function useTreeItemState(itemId) {
     handleCheckboxSelection,
     handleContentClick: onItemClick,
     preventSelection,
-    expansionTrigger
+    expansionTrigger,
+    toggleItemEditing,
+    handleSaveItemLabel,
+    handleCancelItemLabelEditing
   };
 }

package/TreeItem2/TreeItem2.d.ts

@@ -7,7 +7,9 @@ export declare const TreeItem2Content: import("@emotion/styled").StyledComponent
     status: UseTreeItem2Status;
     indentationAtItemLevel?: true;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TreeItem2Label: import("@emotion/styled").StyledComponent<import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const TreeItem2Label: import("@emotion/styled").StyledComponent<import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    editable?: boolean;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TreeItem2IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const TreeItem2GroupTransition: import("@emotion/styled").StyledComponent<import("@mui/material/Collapse").CollapseProps & import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     indentationAtItemLevel?: true;

package/TreeItem2/TreeItem2.js

@@ -18,6 +18,7 @@ import { getTreeItemUtilityClass } from '../TreeItem';
 import { TreeItem2Icon } from '../TreeItem2Icon';
 import { TreeItem2DragAndDropOverlay } from '../TreeItem2DragAndDropOverlay';
 import { TreeItem2Provider } from '../TreeItem2Provider';
+import { TreeItem2LabelInput } from '../TreeItem2LabelInput';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTreeItem2');
 export const TreeItem2Root = styled('li', {
@@ -104,7 +105,8 @@ export const TreeItem2Content = styled('div', {
 export const TreeItem2Label = styled('div', {
   name: 'MuiTreeItem2',
   slot: 'Label',
-  overridesResolver: (props, styles) => styles.label
+  overridesResolver: (props, styles) => styles.label,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'editable'
 })(({
   theme
 }) => _extends({
@@ -113,8 +115,18 @@ export const TreeItem2Label = styled('div', {
   // prevent width + padding to overflow
   // fixes overflow - see https://github.com/mui/material-ui/issues/27372
   minWidth: 0,
-  position: 'relative'
-}, theme.typography.body1));
+  position: 'relative',
+  overflow: 'hidden'
+}, theme.typography.body1, {
+  variants: [{
+    props: ({
+      editable
+    }) => editable,
+    style: {
+      paddingLeft: '2px'
+    }
+  }]
+}));
 export const TreeItem2IconContainer = styled('div', {
   name: 'MuiTreeItem2',
   slot: 'IconContainer',
@@ -172,6 +184,8 @@ const useUtilityClasses = ownerState => {
     root: ['root'],
     content: ['content'],
     expanded: ['expanded'],
+    editing: ['editing'],
+    editable: ['editable'],
     selected: ['selected'],
     focused: ['focused'],
     disabled: ['disabled'],
@@ -179,6 +193,7 @@ const useUtilityClasses = ownerState => {
     checkbox: ['checkbox'],
     label: ['label'],
     groupTransition: ['groupTransition'],
+    labelInput: ['labelInput'],
     dragAndDropOverlay: ['dragAndDropOverlay']
   };
   return composeClasses(slots, getTreeItemUtilityClass, classes);
@@ -215,6 +230,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     getCheckboxProps,
     getLabelProps,
     getGroupTransitionProps,
+    getLabelInputProps,
     getDragAndDropOverlayProps,
     status
   } = useTreeItem2({
@@ -244,7 +260,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     getSlotProps: getContentProps,
     externalSlotProps: slotProps.content,
     ownerState: {},
-    className: clsx(classes.content, status.expanded && classes.expanded, status.selected && classes.selected, status.focused && classes.focused, status.disabled && classes.disabled)
+    className: clsx(classes.content, status.expanded && classes.expanded, status.selected && classes.selected, status.focused && classes.focused, status.disabled && classes.disabled, status.editing && classes.editing, status.editable && classes.editable)
   });
   const IconContainer = slots.iconContainer ?? TreeItem2IconContainer;
   const iconContainerProps = useSlotProps({
@@ -278,6 +294,14 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     ownerState: {},
     className: classes.groupTransition
   });
+  const LabelInput = slots.labelInput ?? TreeItem2LabelInput;
+  const labelInputProps = useSlotProps({
+    elementType: LabelInput,
+    getSlotProps: getLabelInputProps,
+    externalSlotProps: slotProps.labelInput,
+    ownerState: {},
+    className: classes.labelInput
+  });
   const DragAndDropOverlay = slots.dragAndDropOverlay ?? TreeItem2DragAndDropOverlay;
   const dragAndDropOverlayProps = useSlotProps({
     elementType: DragAndDropOverlay,
@@ -296,7 +320,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
             slots: slots,
             slotProps: slotProps
           })
-        })), /*#__PURE__*/_jsx(Checkbox, _extends({}, checkboxProps)), /*#__PURE__*/_jsx(Label, _extends({}, labelProps)), /*#__PURE__*/_jsx(DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
+        })), /*#__PURE__*/_jsx(Checkbox, _extends({}, checkboxProps)), status.editing ? /*#__PURE__*/_jsx(LabelInput, _extends({}, labelInputProps)) : /*#__PURE__*/_jsx(Label, _extends({}, labelProps)), /*#__PURE__*/_jsx(DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
       })), children && /*#__PURE__*/_jsx(TreeItem2GroupTransition, _extends({
         as: GroupTransition
       }, groupTransitionProps))]

package/TreeItem2/TreeItem2.types.d.ts

@@ -36,6 +36,11 @@ export interface TreeItem2Slots extends TreeItem2IconSlots {
      * @default TreeItem2Label
      */
     label?: React.ElementType;
+    /**
+     * The component that renders the input to edit the label when the item is editable and is currently being edited.
+     * @default TreeItem2LabelInput
+     */
+    labelInput?: React.ElementType;
     /**
      * The component that renders the overlay when an item reordering is ongoing.
      * Warning: This slot is only useful when using the `RichTreeViewPro` component.
@@ -50,6 +55,7 @@ export interface TreeItem2SlotProps extends TreeItem2IconSlotProps {
     iconContainer?: SlotComponentProps<'div', {}, {}>;
     checkbox?: SlotComponentProps<'button', {}, {}>;
     label?: SlotComponentProps<'div', {}, {}>;
+    labelInput?: SlotComponentProps<'input', {}, {}>;
     dragAndDropOverlay?: SlotComponentProps<'div', {}, {}>;
 }
 export interface TreeItem2Props extends Omit<UseTreeItem2Parameters, 'rootRef'>, Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {

package/TreeItem2Icon/TreeItem2Icon.js

@@ -59,6 +59,8 @@ process.env.NODE_ENV !== "production" ? TreeItem2Icon.propTypes = {
   slots: PropTypes.object,
   status: PropTypes.shape({
     disabled: PropTypes.bool.isRequired,
+    editable: PropTypes.bool.isRequired,
+    editing: PropTypes.bool.isRequired,
     expandable: PropTypes.bool.isRequired,
     expanded: PropTypes.bool.isRequired,
     focused: PropTypes.bool.isRequired,

package/TreeItem2LabelInput/TreeItem2LabelInput.d.ts

@@ -0,0 +1,2 @@
+declare const TreeItem2LabelInput: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, {}>;
+export { TreeItem2LabelInput };