@mui/x-tree-view 7.12.1 → 7.13.0

package/modern/useTreeItem2/useTreeItem2.js

@@ -5,6 +5,7 @@ import useForkRef from '@mui/utils/useForkRef';
 import { useTreeViewContext } from '../internals/TreeViewProvider';
 import { useTreeItem2Utils } from '../hooks/useTreeItem2Utils';
 import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
+import { isTargetInDescendants } from '../internals/utils/tree';
 export const useTreeItem2 = parameters => {
   const {
     runItemPlugins,
@@ -50,6 +51,7 @@ export const useTreeItem2 = parameters => {
   const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
+  const rootTabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
     if (event.defaultMuiPrevented) {
@@ -65,15 +67,33 @@ export const useTreeItem2 = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
+    const rootElement = instance.getItemDOMElement(itemId);
+
+    // Don't blur the root when switching to editing mode
+    // the input that triggers the root blur can be either the relatedTarget (when entering editing state) or the target (when exiting editing state)
+    // when we enter the editing state, we focus the input -> we don't want to remove the focused item from the state
+    if (status.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, rootElement) && (event.target && event.target?.dataset?.element === 'labelInput' && isTargetInDescendants(event.target, rootElement) || event.relatedTarget?.dataset?.element === 'labelInput')) {
+      return;
+    }
     instance.removeFocusedItem();
   };
   const createRootHandleKeyDown = otherHandlers => event => {
     otherHandlers.onKeyDown?.(event);
-    if (event.defaultMuiPrevented) {
+    if (event.defaultMuiPrevented || event.target?.dataset?.element === 'labelInput') {
       return;
     }
     instance.handleItemKeyDown(event, itemId);
   };
+  const createLabelHandleDoubleClick = otherHandlers => event => {
+    otherHandlers.onDoubleClick?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    interactions.toggleItemEditing();
+  };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
     onItemClick?.(event, itemId);
@@ -108,6 +128,27 @@ export const useTreeItem2 = parameters => {
     }
     interactions.handleCheckboxSelection(event);
   };
+  const createInputHandleKeydown = otherHandlers => event => {
+    otherHandlers.onKeyDown?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    const target = event.target;
+    if (event.key === 'Enter' && target.value) {
+      interactions.handleSaveItemLabel(event, target.value);
+    } else if (event.key === 'Escape') {
+      interactions.handleCancelItemLabelEditing(event);
+    }
+  };
+  const createInputHandleBlur = otherHandlers => event => {
+    otherHandlers.onBlur?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    if (event.target.value) {
+      interactions.handleSaveItemLabel(event, event.target.value);
+    }
+  };
   const createIconContainerHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
     if (event.defaultMuiPrevented) {
@@ -134,7 +175,7 @@ export const useTreeItem2 = parameters => {
     const props = _extends({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
-      tabIndex: instance.canItemBeTabbed(itemId) ? 0 : -1,
+      tabIndex: rootTabIndex,
       id: idAttribute,
       'aria-expanded': status.expandable ? status.expanded : undefined,
       'aria-selected': ariaSelected,
@@ -188,9 +229,28 @@ export const useTreeItem2 = parameters => {
   };
   const getLabelProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(externalProps));
-    return _extends({}, externalEventHandlers, {
+    const props = _extends({}, externalEventHandlers, {
       children: label
-    }, externalProps);
+    }, externalProps, {
+      onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
+    });
+    if (instance.isTreeViewEditable) {
+      props.editable = status.editable;
+    }
+    return props;
+  };
+  const getLabelInputProps = (externalProps = {}) => {
+    const externalEventHandlers = extractEventHandlers(externalProps);
+    const props = _extends({}, externalEventHandlers, externalProps, {
+      onKeyDown: createInputHandleKeydown(externalEventHandlers),
+      onBlur: createInputHandleBlur(externalEventHandlers)
+    });
+    const enhancedlabelInputProps = propsEnhancers.labelInput?.({
+      rootRefObject,
+      contentRefObject,
+      externalEventHandlers
+    }) ?? {};
+    return _extends({}, props, enhancedlabelInputProps);
   };
   const getIconContainerProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
@@ -228,6 +288,7 @@ export const useTreeItem2 = parameters => {
     getIconContainerProps,
     getCheckboxProps,
     getLabelProps,
+    getLabelInputProps,
     getDragAndDropOverlayProps,
     rootRef: handleRootRef,
     status,

package/node/RichTreeView/RichTreeView.js

@@ -149,7 +149,8 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
       getItemOrderedChildrenIds: _propTypes.default.func.isRequired,
       getItemTree: _propTypes.default.func.isRequired,
       selectItem: _propTypes.default.func.isRequired,
-      setItemExpansion: _propTypes.default.func.isRequired
+      setItemExpansion: _propTypes.default.func.isRequired,
+      updateItemLabel: _propTypes.default.func.isRequired
     })
   }),
   /**
@@ -200,7 +201,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.default.shape({
-    indentationAtItemLevel: _propTypes.default.bool
+    indentationAtItemLevel: _propTypes.default.bool,
+    labelEditing: _propTypes.default.bool
   }),
   /**
    * Used to determine the id of a given item.
@@ -232,6 +234,16 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * @returns {boolean} `true` if the item should be disabled.
    */
   isItemDisabled: _propTypes.default.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.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
   /**
    * Horizontal indentation between an item and its children.
    * Examples: 24, "24px", "2rem", "2em".
@@ -269,6 +281,12 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * @param {string} itemId The id of the focused item.
    */
   onItemFocus: _propTypes.default.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.default.func,
   /**
    * Callback fired when a tree item is selected or deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.

package/node/RichTreeView/RichTreeView.plugins.js

@@ -10,6 +10,7 @@ var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection")
 var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus");
 var _useTreeViewKeyboardNavigation = require("../internals/plugins/useTreeViewKeyboardNavigation");
 var _useTreeViewIcons = require("../internals/plugins/useTreeViewIcons");
-const RICH_TREE_VIEW_PLUGINS = exports.RICH_TREE_VIEW_PLUGINS = [_useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons];
+var _useTreeViewLabel = require("../internals/plugins/useTreeViewLabel");
+const RICH_TREE_VIEW_PLUGINS = exports.RICH_TREE_VIEW_PLUGINS = [_useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons, _useTreeViewLabel.useTreeViewLabel];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/node/TreeItem/TreeItem.js

@@ -28,6 +28,7 @@ var _icons = require("../icons");
 var _TreeItem2Provider = require("../TreeItem2Provider");
 var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
 var _useTreeItemState = require("./useTreeItemState");
+var _tree = require("../internals/utils/tree");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "itemId", "id", "label", "onClick", "onMouseDown", "onFocus", "onBlur", "onKeyDown"],
   _excluded2 = ["ownerState"],
@@ -50,6 +51,9 @@ const useUtilityClasses = ownerState => {
     iconContainer: ['iconContainer'],
     checkbox: ['checkbox'],
     label: ['label'],
+    labelInput: ['labelInput'],
+    editing: ['editing'],
+    editable: ['editable'],
     groupTransition: ['groupTransition']
   };
   return (0, _composeClasses.default)(slots, _treeItemClasses.getTreeItemUtilityClass, classes);
@@ -216,6 +220,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     focused,
     selected,
     disabled,
+    editing,
     handleExpansion
   } = (0, _useTreeItemState.useTreeItemState)(itemId);
   const {
@@ -326,10 +331,19 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
   }
   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 && (0, _tree.isTargetInDescendants)(event.relatedTarget, rootRefObject.current) && (event.target && event.target?.dataset?.element === 'labelInput' && (0, _tree.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);
@@ -349,6 +363,11 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     contentRefObject,
     externalEventHandlers: {}
   }) ?? {};
+  const enhancedLabelInputProps = propsEnhancers.labelInput?.({
+    rootRefObject,
+    contentRefObject,
+    externalEventHandlers: {}
+  }) ?? {};
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2Provider.TreeItem2Provider, {
     itemId: itemId,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TreeItemRoot, (0, _extends2.default)({
@@ -377,8 +396,11 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
           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,
@@ -391,6 +413,8 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
         ownerState: ownerState
       }, ContentProps, enhancedContentProps, enhancedDragAndDropOverlayProps.action == null ? {} : {
         dragAndDropOverlayProps: enhancedDragAndDropOverlayProps
+      }, enhancedLabelInputProps.value == null ? {} : {
+        labelInputProps: enhancedLabelInputProps
       }, {
         ref: handleContentRef
       })), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemGroup, (0, _extends2.default)({

package/node/TreeItem/TreeItemContent.js

@@ -13,8 +13,9 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
 var _useTreeItemState = require("./useTreeItemState");
 var _TreeItem2DragAndDropOverlay = require("../TreeItem2DragAndDropOverlay");
+var _TreeItem2LabelInput = require("../TreeItem2LabelInput");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -31,7 +32,8 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
       itemId,
       onClick,
       onMouseDown,
-      dragAndDropOverlayProps
+      dragAndDropOverlayProps,
+      labelInputProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -39,6 +41,8 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
     expanded,
     selected,
     focused,
+    editing,
+    editable,
     disableSelection,
     checkboxSelection,
     handleExpansion,
@@ -46,7 +50,10 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
     handleCheckboxSelection,
     handleContentClick,
     preventSelection,
-    expansionTrigger
+    expansionTrigger,
+    toggleItemEditing,
+    handleSaveItemLabel,
+    handleCancelItemLabelEditing
   } = (0, _useTreeItemState.useTreeItemState)(itemId);
   const icon = iconProp || expansionIcon || displayIcon;
   const checkboxRef = React.useRef(null);
@@ -71,11 +78,36 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
       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 */
     (0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({}, other, {
-      className: (0, _clsx.default)(className, classes.root, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled),
+      className: (0, _clsx.default)(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,
@@ -89,10 +121,17 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
         disabled: disabled || disableSelection,
         ref: checkboxRef,
         tabIndex: -1
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: classes.label,
+      }), editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2LabelInput.TreeItem2LabelInput, (0, _extends2.default)({}, labelInputProps, {
+        className: classes.labelInput,
+        onBlur: handleLabelInputBlur,
+        onKeyDown: handleLabelInputKeydown
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
+        className: classes.label
+      }, editable && {
+        onDoubleClick: handleLabelDoubleClick
+      }, {
         children: label
-      }), dragAndDropOverlayProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2DragAndDropOverlay.TreeItem2DragAndDropOverlay, (0, _extends2.default)({}, dragAndDropOverlayProps))]
+      })), dragAndDropOverlayProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2DragAndDropOverlay.TreeItem2DragAndDropOverlay, (0, _extends2.default)({}, dragAndDropOverlayProps))]
     }))
   );
 });
@@ -129,5 +168,6 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   /**
    * The tree item label.
    */
-  label: _propTypes.default.node
+  label: _propTypes.default.node,
+  labelInputProps: _propTypes.default.object
 } : void 0;

package/node/TreeItem/treeItemClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getTreeItemUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiTreeItem', slot);
 }
-const treeItemClasses = exports.treeItemClasses = (0, _generateUtilityClasses.default)('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label', 'checkbox', 'dragAndDropOverlay']);
+const treeItemClasses = exports.treeItemClasses = (0, _generateUtilityClasses.default)('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label', 'checkbox', 'labelInput', 'editable', 'editing', 'dragAndDropOverlay']);

package/node/TreeItem/useTreeItemState.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeItemState = useTreeItemState;
 var _TreeViewProvider = require("../internals/TreeViewProvider");
+var _useTreeViewLabel = require("../internals/plugins/useTreeViewLabel");
+var _plugins = require("../internals/utils/plugins");
 function useTreeItemState(itemId) {
   const {
     instance,
@@ -25,6 +27,8 @@ 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) {
@@ -85,11 +89,49 @@ function useTreeItemState(itemId) {
       event.preventDefault();
     }
   };
+  const toggleItemEditing = () => {
+    if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
+      return;
+    }
+    if (instance.isItemEditable(itemId)) {
+      if (instance.isItemBeingEdited(itemId)) {
+        instance.setEditedItemId(null);
+      } else {
+        instance.setEditedItemId(itemId);
+      }
+    }
+  };
+  const handleSaveItemLabel = (event, label) => {
+    if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.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 (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
+      return;
+    }
+    if (instance.isItemBeingEditedRef(itemId)) {
+      toggleItemEditing();
+      instance.focusItem(event, itemId);
+    }
+  };
   return {
     disabled,
     expanded,
     selected,
     focused,
+    editable,
+    editing,
     disableSelection,
     checkboxSelection,
     handleExpansion,
@@ -97,6 +139,9 @@ function useTreeItemState(itemId) {
     handleCheckboxSelection,
     handleContentClick: onItemClick,
     preventSelection,
-    expansionTrigger
+    expansionTrigger,
+    toggleItemEditing,
+    handleSaveItemLabel,
+    handleCancelItemLabelEditing
   };
 }

package/node/TreeItem2/TreeItem2.js

@@ -23,6 +23,7 @@ var _TreeItem = require("../TreeItem");
 var _TreeItem2Icon = require("../TreeItem2Icon");
 var _TreeItem2DragAndDropOverlay = require("../TreeItem2DragAndDropOverlay");
 var _TreeItem2Provider = require("../TreeItem2Provider");
+var _TreeItem2LabelInput = require("../TreeItem2LabelInput");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["visible"],
   _excluded2 = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
@@ -113,7 +114,8 @@ const TreeItem2Content = exports.TreeItem2Content = (0, _zeroStyled.styled)('div
 const TreeItem2Label = exports.TreeItem2Label = (0, _zeroStyled.styled)('div', {
   name: 'MuiTreeItem2',
   slot: 'Label',
-  overridesResolver: (props, styles) => styles.label
+  overridesResolver: (props, styles) => styles.label,
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'editable'
 })(({
   theme
 }) => (0, _extends2.default)({
@@ -122,8 +124,18 @@ const TreeItem2Label = exports.TreeItem2Label = (0, _zeroStyled.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'
+    }
+  }]
+}));
 const TreeItem2IconContainer = exports.TreeItem2IconContainer = (0, _zeroStyled.styled)('div', {
   name: 'MuiTreeItem2',
   slot: 'IconContainer',
@@ -181,6 +193,8 @@ const useUtilityClasses = ownerState => {
     root: ['root'],
     content: ['content'],
     expanded: ['expanded'],
+    editing: ['editing'],
+    editable: ['editable'],
     selected: ['selected'],
     focused: ['focused'],
     disabled: ['disabled'],
@@ -188,6 +202,7 @@ const useUtilityClasses = ownerState => {
     checkbox: ['checkbox'],
     label: ['label'],
     groupTransition: ['groupTransition'],
+    labelInput: ['labelInput'],
     dragAndDropOverlay: ['dragAndDropOverlay']
   };
   return (0, _composeClasses.default)(slots, _TreeItem.getTreeItemUtilityClass, classes);
@@ -224,6 +239,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
     getCheckboxProps,
     getLabelProps,
     getGroupTransitionProps,
+    getLabelInputProps,
     getDragAndDropOverlayProps,
     status
   } = (0, _useTreeItem.unstable_useTreeItem2)({
@@ -253,7 +269,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
     getSlotProps: getContentProps,
     externalSlotProps: slotProps.content,
     ownerState: {},
-    className: (0, _clsx.default)(classes.content, status.expanded && classes.expanded, status.selected && classes.selected, status.focused && classes.focused, status.disabled && classes.disabled)
+    className: (0, _clsx.default)(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 = (0, _useSlotProps.default)({
@@ -287,6 +303,14 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
     ownerState: {},
     className: classes.groupTransition
   });
+  const LabelInput = slots.labelInput ?? _TreeItem2LabelInput.TreeItem2LabelInput;
+  const labelInputProps = (0, _useSlotProps.default)({
+    elementType: LabelInput,
+    getSlotProps: getLabelInputProps,
+    externalSlotProps: slotProps.labelInput,
+    ownerState: {},
+    className: classes.labelInput
+  });
   const DragAndDropOverlay = slots.dragAndDropOverlay ?? _TreeItem2DragAndDropOverlay.TreeItem2DragAndDropOverlay;
   const dragAndDropOverlayProps = (0, _useSlotProps.default)({
     elementType: DragAndDropOverlay,
@@ -305,7 +329,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
             slots: slots,
             slotProps: slotProps
           })
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, checkboxProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(DragAndDropOverlay, (0, _extends2.default)({}, dragAndDropOverlayProps))]
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, checkboxProps)), status.editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelInput, (0, _extends2.default)({}, labelInputProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(DragAndDropOverlay, (0, _extends2.default)({}, dragAndDropOverlayProps))]
       })), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItem2GroupTransition, (0, _extends2.default)({
         as: GroupTransition
       }, groupTransitionProps))]

package/node/TreeItem2Icon/TreeItem2Icon.js

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

package/node/TreeItem2LabelInput/TreeItem2LabelInput.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeItem2LabelInput = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _zeroStyled = require("../internals/zero-styled");
+const TreeItem2LabelInput = exports.TreeItem2LabelInput = (0, _zeroStyled.styled)('input', {
+  name: 'MuiTreeItem2',
+  slot: 'LabelInput',
+  overridesResolver: (props, styles) => styles.labelInput
+})(({
+  theme
+}) => (0, _extends2.default)({}, theme.typography.body1, {
+  width: '100%',
+  backgroundColor: theme.palette.background.paper,
+  borderRadius: theme.shape.borderRadius,
+  border: 'none',
+  padding: '0 2px',
+  boxSizing: 'border-box',
+  '&:focus': {
+    outline: `1px solid ${theme.palette.primary.main}`
+  }
+}));

package/node/TreeItem2LabelInput/TreeItem2LabelInput.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/TreeItem2LabelInput/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TreeItem2LabelInput", {
+  enumerable: true,
+  get: function () {
+    return _TreeItem2LabelInput.TreeItem2LabelInput;
+  }
+});
+var _TreeItem2LabelInput = require("./TreeItem2LabelInput");