@mui/x-tree-view 7.12.1 → 7.14.0

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/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js

@@ -44,9 +44,9 @@ const TreeItem2DragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
     style: (0, _extends2.default)({
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
       borderTop: `1px solid ${(0, _styles.alpha)((theme.vars || theme).palette.grey[900], 0.6)}`
-    }, theme.palette.mode === 'dark' && {
-      borderTop: `1px solid ${(0, _styles.alpha)((theme.vars || theme).palette.grey[100], 0.6)}`
-    })
+    }, theme.applyStyles('dark', {
+      borderTopColor: (0, _styles.alpha)((theme.vars || theme).palette.grey[100], 0.6)
+    }))
   }, {
     props: {
       action: 'reorder-below'
@@ -54,9 +54,9 @@ const TreeItem2DragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
     style: (0, _extends2.default)({
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
       borderBottom: `1px solid ${(0, _styles.alpha)((theme.vars || theme).palette.grey[900], 0.6)}`
-    }, theme.palette.mode === 'dark' && {
-      borderBottom: `1px solid ${(0, _styles.alpha)((theme.vars || theme).palette.grey[100], 0.6)}`
-    })
+    }, theme.applyStyles('dark', {
+      borderBottomColor: (0, _styles.alpha)((theme.vars || theme).palette.grey[100], 0.6)
+    }))
   }, {
     props: {
       action: 'move-to-parent'
@@ -64,9 +64,9 @@ const TreeItem2DragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
     style: (0, _extends2.default)({
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))',
       borderBottom: `1px solid ${(0, _styles.alpha)((theme.vars || theme).palette.grey[900], 0.6)}`
-    }, theme.palette.mode === 'dark' && {
-      borderBottom: `1px solid ${(0, _styles.alpha)((theme.vars || theme).palette.grey[900], 0.6)}`
-    })
+    }, theme.applyStyles('dark', {
+      borderBottomColor: (0, _styles.alpha)((theme.vars || theme).palette.grey[900], 0.6)
+    }))
   }]
 }));
 function TreeItem2DragAndDropOverlay(props) {

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");

package/node/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeItem2Utils = void 0;
 var _TreeViewProvider = require("../../internals/TreeViewProvider");
+var _useTreeViewLabel = require("../../internals/plugins/useTreeViewLabel");
+var _plugins = require("../../internals/utils/plugins");
 const isItemExpandable = reactChildren => {
   if (Array.isArray(reactChildren)) {
     return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
@@ -35,7 +37,9 @@ const useTreeItem2Utils = ({
     expanded: instance.isItemExpanded(itemId),
     focused: instance.isItemFocused(itemId),
     selected: instance.isItemSelected(itemId),
-    disabled: instance.isItemDisabled(itemId)
+    disabled: instance.isItemDisabled(itemId),
+    editing: instance?.isItemBeingEdited ? instance?.isItemBeingEdited(itemId) : false,
+    editable: instance.isItemEditable ? instance.isItemEditable(itemId) : false
   };
   const handleExpansion = event => {
     if (status.disabled) {
@@ -90,10 +94,49 @@ const useTreeItem2Utils = ({
       });
     }
   };
+  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);
+    }
+  };
   const interactions = {
     handleExpansion,
     handleSelection,
-    handleCheckboxSelection
+    handleCheckboxSelection,
+    toggleItemEditing,
+    handleSaveItemLabel,
+    handleCancelItemLabelEditing
   };
   return {
     interactions,

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.12.1
+ * @mui/x-tree-view v7.14.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/index.js

@@ -81,6 +81,12 @@ Object.defineProperty(exports, "useTreeViewKeyboardNavigation", {
     return _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation;
   }
 });
+Object.defineProperty(exports, "useTreeViewLabel", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewLabel.useTreeViewLabel;
+  }
+});
 Object.defineProperty(exports, "useTreeViewSelection", {
   enumerable: true,
   get: function () {
@@ -102,6 +108,7 @@ var _useTreeViewFocus = require("./plugins/useTreeViewFocus");
 var _useTreeViewKeyboardNavigation = require("./plugins/useTreeViewKeyboardNavigation");
 var _useTreeViewIcons = require("./plugins/useTreeViewIcons");
 var _useTreeViewItems = require("./plugins/useTreeViewItems");
+var _useTreeViewLabel = require("./plugins/useTreeViewLabel");
 var _useTreeViewJSXItems = require("./plugins/useTreeViewJSXItems");
 var _tree = require("./utils/tree");
 var _warning = require("./utils/warning");

package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -66,8 +66,11 @@ const useTreeViewExpansion = ({
     if (params.expansionTrigger) {
       return params.expansionTrigger;
     }
+    if (instance.isTreeViewEditable) {
+      return 'iconContainer';
+    }
     return 'content';
-  }, [params.expansionTrigger]);
+  }, [params.expansionTrigger, instance.isTreeViewEditable]);
   return {
     publicAPI: {
       setItemExpansion

package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -9,6 +9,8 @@ var React = _interopRequireWildcard(require("react"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _tree = require("../../utils/tree");
+var _plugins = require("../../utils/plugins");
+var _useTreeViewLabel = require("../useTreeViewLabel");
 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; }
 function isPrintableCharacter(string) {
@@ -98,7 +100,9 @@ const useTreeViewKeyboardNavigation = ({
       // If the focused item has no children, we select it.
       case key === 'Enter':
         {
-          if (canToggleItemExpansion(itemId)) {
+          if ((0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel) && instance.isItemEditable(itemId) && !instance.isItemBeingEdited(itemId)) {
+            instance.setEditedItemId(itemId);
+          } else if (canToggleItemExpansion(itemId)) {
             instance.toggleItemExpansion(event, itemId);
             event.preventDefault();
           } else if (canToggleItemSelection(itemId)) {

package/node/internals/plugins/useTreeViewLabel/index.js

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

package/node/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewLabelItemPlugin = exports.isAndroid = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _TreeViewProvider = require("../../TreeViewProvider");
+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; }
+const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
+exports.isAndroid = isAndroid;
+const useTreeViewLabelItemPlugin = ({
+  props
+}) => {
+  const {
+    instance
+  } = (0, _TreeViewProvider.useTreeViewContext)();
+  const {
+    label,
+    itemId
+  } = props;
+  const [labelInputValue, setLabelInputValue] = React.useState(label);
+  const isItemBeingEdited = instance.isItemBeingEdited(itemId);
+  React.useEffect(() => {
+    if (!isItemBeingEdited) {
+      setLabelInputValue(label);
+    }
+  }, [isItemBeingEdited, label]);
+  return {
+    propsEnhancers: {
+      labelInput: ({
+        externalEventHandlers
+      }) => {
+        const editable = instance.isItemEditable(itemId);
+        if (!editable) {
+          return {};
+        }
+        const handleInputChange = event => {
+          externalEventHandlers.onChange?.(event);
+          setLabelInputValue(event.target.value);
+        };
+        return {
+          value: labelInputValue ?? '',
+          'data-element': 'labelInput',
+          onChange: handleInputChange,
+          autoFocus: true,
+          type: 'text'
+        };
+      }
+    }
+  };
+};
+exports.useTreeViewLabelItemPlugin = useTreeViewLabelItemPlugin;

package/node/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewLabel = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _warning = require("../../utils/warning");
+var _useTreeViewLabel = require("./useTreeViewLabel.itemPlugin");
+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; }
+const useTreeViewLabel = ({
+  instance,
+  state,
+  setState,
+  params,
+  experimentalFeatures
+}) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (params.isItemEditable && !experimentalFeatures?.labelEditing) {
+      (0, _warning.warnOnce)(['MUI X: The label editing feature requires the `labelEditing` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ labelEditing: true}}` to the `RichTreeViewPro` component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/editing/']);
+    }
+  }
+  const editedItemRef = React.useRef(state.editedItemId);
+  const isItemBeingEditedRef = itemId => editedItemRef.current === itemId;
+  const setEditedItemId = editedItemId => {
+    setState(prevState => (0, _extends2.default)({}, prevState, {
+      editedItemId
+    }));
+    editedItemRef.current = editedItemId;
+  };
+  const isItemBeingEdited = itemId => itemId === state.editedItemId;
+  const isTreeViewEditable = Boolean(params.isItemEditable) && !!experimentalFeatures.labelEditing;
+  const isItemEditable = itemId => {
+    if (itemId == null || !isTreeViewEditable) {
+      return false;
+    }
+    const item = instance.getItem(itemId);
+    if (!item) {
+      return false;
+    }
+    return typeof params.isItemEditable === 'function' ? params.isItemEditable(item) : Boolean(params.isItemEditable);
+  };
+  const updateItemLabel = (itemId, label) => {
+    if (!label) {
+      throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'The label of an item cannot be empty.', itemId].join('\n'));
+    }
+    setState(prevState => {
+      const item = prevState.items.itemMetaMap[itemId];
+      if (item.label !== label) {
+        return (0, _extends2.default)({}, prevState, {
+          items: (0, _extends2.default)({}, prevState.items, {
+            itemMetaMap: (0, _extends2.default)({}, prevState.items.itemMetaMap, {
+              [itemId]: (0, _extends2.default)({}, item, {
+                label
+              })
+            })
+          })
+        });
+      }
+      return prevState;
+    });
+    if (params.onItemLabelChange) {
+      params.onItemLabelChange(itemId, label);
+    }
+  };
+  return {
+    instance: {
+      setEditedItemId,
+      isItemBeingEdited,
+      updateItemLabel,
+      isItemEditable,
+      isTreeViewEditable,
+      isItemBeingEditedRef
+    },
+    publicAPI: {
+      updateItemLabel
+    }
+  };
+};
+exports.useTreeViewLabel = useTreeViewLabel;
+useTreeViewLabel.itemPlugin = _useTreeViewLabel.useTreeViewLabelItemPlugin;
+useTreeViewLabel.getInitialState = () => ({
+  editedItemId: null
+});
+useTreeViewLabel.params = {
+  onItemLabelChange: true,
+  isItemEditable: true
+};

package/node/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.js

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

package/node/useTreeItem2/useTreeItem2.js

@@ -12,6 +12,7 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _useTreeItem2Utils = require("../hooks/useTreeItem2Utils");
 var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
+var _tree = require("../internals/utils/tree");
 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; }
 const useTreeItem2 = parameters => {
@@ -59,6 +60,7 @@ const useTreeItem2 = parameters => {
   const handleRootRef = (0, _useForkRef.default)(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = (0, _useForkRef.default)(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
+  const rootTabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
     if (event.defaultMuiPrevented) {
@@ -74,15 +76,33 @@ 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 && (0, _tree.isTargetInDescendants)(event.relatedTarget, rootElement) && (event.target && event.target?.dataset?.element === 'labelInput' && (0, _tree.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);
@@ -117,6 +137,27 @@ 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) {
@@ -143,7 +184,7 @@ const useTreeItem2 = parameters => {
     const props = (0, _extends2.default)({}, 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,
@@ -197,9 +238,28 @@ const useTreeItem2 = parameters => {
   };
   const getLabelProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(externalProps));
-    return (0, _extends2.default)({}, externalEventHandlers, {
+    const props = (0, _extends2.default)({}, externalEventHandlers, {
       children: label
-    }, externalProps);
+    }, externalProps, {
+      onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
+    });
+    if (instance.isTreeViewEditable) {
+      props.editable = status.editable;
+    }
+    return props;
+  };
+  const getLabelInputProps = (externalProps = {}) => {
+    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
+    const props = (0, _extends2.default)({}, externalEventHandlers, externalProps, {
+      onKeyDown: createInputHandleKeydown(externalEventHandlers),
+      onBlur: createInputHandleBlur(externalEventHandlers)
+    });
+    const enhancedlabelInputProps = propsEnhancers.labelInput?.({
+      rootRefObject,
+      contentRefObject,
+      externalEventHandlers
+    }) ?? {};
+    return (0, _extends2.default)({}, props, enhancedlabelInputProps);
   };
   const getIconContainerProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
@@ -237,6 +297,7 @@ const useTreeItem2 = parameters => {
     getIconContainerProps,
     getCheckboxProps,
     getLabelProps,
+    getLabelInputProps,
     getDragAndDropOverlayProps,
     rootRef: handleRootRef,
     status,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.12.1",
+  "version": "7.14.0",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -34,13 +34,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.0",
-    "@mui/system": "^5.16.5",
-    "@mui/utils": "^5.16.5",
-    "@types/react-transition-group": "^4.4.10",
+    "@mui/system": "^5.16.7",
+    "@mui/utils": "^5.16.6",
+    "@types/react-transition-group": "^4.4.11",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "7.12.0"
+    "@mui/x-internals": "7.14.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/useTreeItem2/index.d.ts

@@ -1,2 +1,2 @@
 export { useTreeItem2 as unstable_useTreeItem2 } from './useTreeItem2';
-export type { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2Status, UseTreeItem2RootSlotOwnProps, UseTreeItem2ContentSlotOwnProps, UseTreeItem2LabelSlotOwnProps, UseTreeItem2IconContainerSlotOwnProps, UseTreeItem2GroupTransitionSlotOwnProps, UseTreeItem2DragAndDropOverlaySlotOwnProps, } from './useTreeItem2.types';
+export type { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2Status, UseTreeItem2RootSlotOwnProps, UseTreeItem2ContentSlotOwnProps, UseTreeItem2LabelInputSlotOwnProps, UseTreeItem2LabelSlotOwnProps, UseTreeItem2IconContainerSlotOwnProps, UseTreeItem2GroupTransitionSlotOwnProps, UseTreeItem2DragAndDropOverlaySlotOwnProps, } from './useTreeItem2.types';