@mui/x-tree-view 8.3.1 → 8.4.0

package/CHANGELOG.md

@@ -5,6 +5,116 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.4.0
+
+_May 21, 2025_
+
+We'd like to offer a big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔺 Support regular [`pyramid` variation in the `<FunnelChart />` component](https://mui.com/x/react-charts/funnel/#pyramid-chart):
+
+  <img width="398" alt="Pyramid funnel chart" src="https://github.com/user-attachments/assets/90ccb221-3a48-4ffa-8878-89c6db16da86" />
+
+- 📚 Documentation improvements
+- 🌎 Improve Icelandic (is-IS) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@aizerin, @arminmeh, @campmarc, @jyash97, @mapache-salvaje, @noraleonte, @nusr, @ragnarr18, @romgrk, @whereisrmsqhs.
+Following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @rita-codes.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.4.0`
+
+- [DataGrid] Fix content rendering for large rows while using automatic page size (#14737) @campmarc
+- [DataGrid] Fix disabled typography variants crashing grid (#17934) @KenanYusuf
+- [DataGrid] Fix tree data demo crash (#17904) @MBilalShafi
+- [DataGrid] Use `exclude` selection model type if quick filter does not have actual values (#17899) @arminmeh
+- [DataGrid] Fix clipboard copy behavior for cell ranges with empty cells (#16797) @nusr
+- [l10n] Improve Icelandic (is-IS) locale (#17915) @ragnarr18
+
+#### `@mui/x-data-grid-pro@8.4.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@8.4.0`, plus:
+
+- [DataGridPro] Add `aria-expanded` attribute to the master detail toggle button (#17122) @whereisrmsqhs
+- [DataGridPro] Preserve row state during server-side lazy loading (#17743) @arminmeh
+- [DataGridPro] Prevent text selection when reordering rows (#16568) @jyash97
+
+#### `@mui/x-data-grid-premium@8.4.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@8.4.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.4.0`
+
+- [fields] Ensure fresh `disabled` value is used when focusing or clicking (#17914) @aizerin
+- [fields] Improve the field controlled edition (#17816) @flaviendelangle
+- [pickers] Fix `PickersTextField` overflow (#17942) @noraleonte
+
+#### `@mui/x-date-pickers-pro@8.4.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@8.4.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.4.0`
+
+- [charts] Add grouped axes demo (#17848) @bernardobelchior
+- [charts] Enable tooltip disable portal (#17871) @alexfauquette
+- [charts] Improve performance in scatter chart (#17849) @bernardobelchior
+- [charts] Recreate `isPointInside` less often (#17850) @bernardobelchior
+- [charts] Try fix for flaky `useAnimate` test (#17777) @JCQuintas
+- [charts] Add `isXInside` and `isYInside` (#17911) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.4.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-charts@8.4.0`, plus:
+
+- [charts-pro] Add size for zoom slider (#17736) @bernardobelchior
+- [charts-pro] Add zoom slider tooltip (#17733) @bernardobelchior
+- [charts-pro] Clean and document Heatmap Tooltip (#17933) @alexfauquette
+- [charts-pro] Introduce `Pyramid` chart (#17783) @JCQuintas
+- [charts-pro] Update zoom slider nomenclature (#17938) @bernardobelchior
+- [charts-pro] Fix error when importing rasterizehtml (#17897) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.4.0`
+
+- [TreeView] Add `getItemChildren` prop in `RichTreeView` (#17894) @rita-codes
+- [TreeView] Add a method in the `apiRef` to toggle the editing status of an item (#17768) @rita-codes
+- [TreeView] Add missing sx prop on the Tree Item component (#17930) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.4.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-tree-view@8.4.0`.
+
+### Docs
+
+- [docs] Add a recipe for drag and drop row grouping (#17638) @KenanYusuf
+- [docs] Add introductory text to Data Grid component pages (#17902) @KenanYusuf
+- [docs] Refactor embedded CodeSandbox on Data Grid—Quickstart page (#17749) @rita-codes
+- [docs] Remove double border on Data Grid—Quickstart demo (#17932) @rita-codes
+- [docs] Standardize `apiRef` copy (#17776) @mapache-salvaje
+- [docs][DataGrid] Revise server-side data docs (#17007) @mapache-salvaje
+- [docs][DataGrid] Audit and revise the tree data doc (#17650) @mapache-salvaje
+- [docs][pickers] Fix migration guide references to range fields (#17861) @LukasTy
+- [docs][charts] Reorganize the Tooltip documentation (#17917) @alexfauquette
+
+### Core
+
+- [core] refactor: remove manual `displayName` (#17845) @romgrk
+- [code-infra] Document how to use `vitest` cli (#17847) @JCQuintas
+- [code-infra] Increase charts export test timeout (#17909) @JCQuintas
+- [code-infra] Set `isolatedModules=true` in tsconfig (#17781) @JCQuintas
+- [infra] Ensure proper docs preview path resolution (#17863) @LukasTy
+
 ## 8.3.1
 
 _May 14, 2025_

package/RichTreeView/RichTreeView.js

@@ -20,7 +20,7 @@ var _richTreeViewClasses = require("./richTreeViewClasses");
 var _zeroStyled = require("../internals/zero-styled");
 var _useTreeView = require("../internals/useTreeView");
 var _TreeViewProvider = require("../internals/TreeViewProvider");
-var _RichTreeView = require("./RichTreeView.plugins");
+var _RichTreeView2 = require("./RichTreeView.plugins");
 var _RichTreeViewItems = require("../internals/components/RichTreeViewItems");
 var _useSelector = require("../internals/hooks/useSelector");
 var _useTreeViewItems = require("../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
@@ -86,7 +86,7 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
     getRootProps,
     contextValue
   } = (0, _useTreeView.useTreeView)({
-    plugins: _RichTreeView.RICH_TREE_VIEW_PLUGINS,
+    plugins: _RichTreeView2.RICH_TREE_VIEW_PLUGINS,
     rootRef: ref,
     props: other
   });
@@ -125,6 +125,7 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
     }))
   });
 });
+if (process.env.NODE_ENV !== "production") RichTreeView.displayName = "RichTreeView";
 process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -141,6 +142,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
       getItemOrderedChildrenIds: _propTypes.default.func.isRequired,
       getItemTree: _propTypes.default.func.isRequired,
       getParentId: _propTypes.default.func.isRequired,
+      setEditedItem: _propTypes.default.func.isRequired,
       setIsItemDisabled: _propTypes.default.func.isRequired,
       setItemExpansion: _propTypes.default.func.isRequired,
       setItemSelection: _propTypes.default.func.isRequired,
@@ -189,6 +191,15 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * @default 'content'
    */
   expansionTrigger: _propTypes.default.oneOf(['content', 'iconContainer']),
+  /**
+   * Used to determine the children of a given item.
+   *
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {R[]} The children of the item.
+   * @default (item) => item.children
+   */
+  getItemChildren: _propTypes.default.func,
   /**
    * Used to determine the id of a given item.
    *

package/SimpleTreeView/SimpleTreeView.js

@@ -18,7 +18,7 @@ var _zeroStyled = require("../internals/zero-styled");
 var _simpleTreeViewClasses = require("./simpleTreeViewClasses");
 var _useTreeView = require("../internals/useTreeView");
 var _TreeViewProvider = require("../internals/TreeViewProvider");
-var _SimpleTreeView = require("./SimpleTreeView.plugins");
+var _SimpleTreeView2 = require("./SimpleTreeView.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiSimpleTreeView');
@@ -83,7 +83,7 @@ const SimpleTreeView = exports.SimpleTreeView = /*#__PURE__*/React.forwardRef(fu
     getRootProps,
     contextValue
   } = (0, _useTreeView.useTreeView)({
-    plugins: _SimpleTreeView.SIMPLE_TREE_VIEW_PLUGINS,
+    plugins: _SimpleTreeView2.SIMPLE_TREE_VIEW_PLUGINS,
     rootRef: ref,
     props: (0, _extends2.default)({}, other, {
       items: EMPTY_ITEMS
@@ -106,6 +106,7 @@ const SimpleTreeView = exports.SimpleTreeView = /*#__PURE__*/React.forwardRef(fu
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps))
   });
 });
+if (process.env.NODE_ENV !== "production") SimpleTreeView.displayName = "SimpleTreeView";
 process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/SimpleTreeView/SimpleTreeView.plugins.d.ts

@@ -6,4 +6,4 @@ import { UseTreeViewFocusParameters } from "../internals/plugins/useTreeViewFocu
 import { ConvertPluginsIntoSignatures } from "../internals/models/index.js";
 export declare const SIMPLE_TREE_VIEW_PLUGINS: readonly [import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewItemsSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewExpansionSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewSelectionSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewFocusSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewKeyboardNavigationSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewJSXItemsSignature>];
 export type SimpleTreeViewPluginSignatures = ConvertPluginsIntoSignatures<typeof SIMPLE_TREE_VIEW_PLUGINS>;
-export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple> {}
+export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemChildren' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple> {}

package/TreeItem/TreeItem.js

@@ -167,6 +167,7 @@ const TreeItemCheckbox = exports.TreeItemCheckbox = (0, _zeroStyled.styled)(/*#_
 })({
   padding: 0
 });
+if (process.env.NODE_ENV !== "production") TreeItemCheckbox.displayName = "TreeItemCheckbox";
 const useUtilityClasses = classesProp => {
   const {
     classes: classesFromTreeView
@@ -350,6 +351,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") TreeItem.displayName = "TreeItem";
 process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -404,5 +406,9 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
    * Overridable component slots.
    * @default {}
    */
-  slots: _propTypes.default.object
+  slots: _propTypes.default.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;

package/TreeItem/TreeItem.types.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
 import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { TransitionProps } from '@mui/material/transitions';
 import { SlotComponentProps } from '@mui/utils/types';
@@ -76,6 +78,10 @@ export interface TreeItemSlotProps extends TreeItemIconSlotProps {
 }
 export interface TreeItemProps extends Omit<UseTreeItemParameters, 'rootRef'>, Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {
   className?: string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
   /**
    * Override or extend the styles applied to the component.
    */

package/esm/RichTreeView/RichTreeView.js

@@ -118,6 +118,7 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     }))
   });
 });
+if (process.env.NODE_ENV !== "production") RichTreeView.displayName = "RichTreeView";
 process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -134,6 +135,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
       getItemOrderedChildrenIds: PropTypes.func.isRequired,
       getItemTree: PropTypes.func.isRequired,
       getParentId: PropTypes.func.isRequired,
+      setEditedItem: PropTypes.func.isRequired,
       setIsItemDisabled: PropTypes.func.isRequired,
       setItemExpansion: PropTypes.func.isRequired,
       setItemSelection: PropTypes.func.isRequired,
@@ -182,6 +184,15 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * @default 'content'
    */
   expansionTrigger: PropTypes.oneOf(['content', 'iconContainer']),
+  /**
+   * Used to determine the children of a given item.
+   *
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {R[]} The children of the item.
+   * @default (item) => item.children
+   */
+  getItemChildren: PropTypes.func,
   /**
    * Used to determine the id of a given item.
    *

package/esm/SimpleTreeView/SimpleTreeView.js

@@ -99,6 +99,7 @@ const SimpleTreeView = /*#__PURE__*/React.forwardRef(function SimpleTreeView(inP
     children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps))
   });
 });
+if (process.env.NODE_ENV !== "production") SimpleTreeView.displayName = "SimpleTreeView";
 process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/SimpleTreeView/SimpleTreeView.plugins.d.ts

@@ -6,4 +6,4 @@ import { UseTreeViewFocusParameters } from "../internals/plugins/useTreeViewFocu
 import { ConvertPluginsIntoSignatures } from "../internals/models/index.js";
 export declare const SIMPLE_TREE_VIEW_PLUGINS: readonly [import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewItemsSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewExpansionSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewSelectionSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewFocusSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewKeyboardNavigationSignature>, import("../internals/index.js").TreeViewPlugin<import("../internals/index.js").UseTreeViewJSXItemsSignature>];
 export type SimpleTreeViewPluginSignatures = ConvertPluginsIntoSignatures<typeof SIMPLE_TREE_VIEW_PLUGINS>;
-export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple> {}
+export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemChildren' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple> {}

package/esm/TreeItem/TreeItem.js

@@ -160,6 +160,7 @@ export const TreeItemCheckbox = styled(/*#__PURE__*/React.forwardRef((props, ref
 })({
   padding: 0
 });
+if (process.env.NODE_ENV !== "production") TreeItemCheckbox.displayName = "TreeItemCheckbox";
 const useUtilityClasses = classesProp => {
   const {
     classes: classesFromTreeView
@@ -343,6 +344,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") TreeItem.displayName = "TreeItem";
 process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -397,5 +399,9 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
    * Overridable component slots.
    * @default {}
    */
-  slots: PropTypes.object
+  slots: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;

package/esm/TreeItem/TreeItem.types.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
 import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { TransitionProps } from '@mui/material/transitions';
 import { SlotComponentProps } from '@mui/utils/types';
@@ -76,6 +78,10 @@ export interface TreeItemSlotProps extends TreeItemIconSlotProps {
 }
 export interface TreeItemProps extends Omit<UseTreeItemParameters, 'rootRef'>, Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {
   className?: string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
   /**
    * Override or extend the styles applied to the component.
    */

package/esm/hooks/useTreeItemUtils/useTreeItemUtils.js

@@ -118,12 +118,10 @@ export const useTreeItemUtils = ({
     if (!hasPlugin(instance, useTreeViewLabel)) {
       return;
     }
-    if (isEditable) {
-      if (isEditing) {
-        instance.setEditedItemId(null);
-      } else {
-        instance.setEditedItemId(itemId);
-      }
+    if (isEditing) {
+      instance.setEditedItem(null);
+    } else {
+      instance.setEditedItem(itemId);
     }
   };
   const handleSaveItemLabel = (event, newLabel) => {

package/esm/index.js

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

package/esm/internals/TreeViewItemDepthContext/TreeViewItemDepthContext.js

@@ -1,5 +1,3 @@
 import * as React from 'react';
 export const TreeViewItemDepthContext = /*#__PURE__*/React.createContext(() => -1);
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewItemDepthContext.displayName = 'TreeViewItemDepthContext';
-}
+if (process.env.NODE_ENV !== "production") TreeViewItemDepthContext.displayName = "TreeViewItemDepthContext";

package/esm/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -5,9 +5,7 @@ import { escapeOperandAttributeSelector } from "../utils/utils.js";
 import { selectorItemOrderedChildrenIds } from "../plugins/useTreeViewItems/useTreeViewItems.selectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewChildrenItemContext.displayName = 'TreeViewChildrenItemContext';
-}
+if (process.env.NODE_ENV !== "production") TreeViewChildrenItemContext.displayName = "TreeViewChildrenItemContext";
 export function TreeViewChildrenItemProvider(props) {
   const {
     children,

package/esm/internals/TreeViewProvider/TreeViewContext.js

@@ -3,9 +3,7 @@ import * as React from 'react';
  * @ignore - internal component.
  */
 export const TreeViewContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewContext.displayName = 'TreeViewContext';
-}
+if (process.env.NODE_ENV !== "production") TreeViewContext.displayName = "TreeViewContext";
 export const useTreeViewContext = () => {
   const context = React.useContext(TreeViewContext);
   if (context == null) {

package/esm/internals/TreeViewProvider/TreeViewStyleContext.js

@@ -7,9 +7,7 @@ export const TreeViewStyleContext = /*#__PURE__*/React.createContext({
   slots: {},
   slotProps: {}
 });
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewStyleContext.displayName = 'TreeViewStyleContext';
-}
+if (process.env.NODE_ENV !== "production") TreeViewStyleContext.displayName = "TreeViewStyleContext";
 export const useTreeViewStyleContext = () => {
   return React.useContext(TreeViewStyleContext);
 };

package/esm/internals/components/RichTreeViewItems.js

@@ -10,9 +10,7 @@ import { selectorItemMeta, selectorItemOrderedChildrenIds } from "../plugins/use
 import { useTreeViewContext } from "../TreeViewProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  RichTreeViewItemsContext.displayName = 'RichTreeViewItemsProvider';
-}
+if (process.env.NODE_ENV !== "production") RichTreeViewItemsContext.displayName = "RichTreeViewItemsContext";
 const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
   itemSlot,
   itemSlotProps,
@@ -43,6 +41,7 @@ const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
     children: children?.map(renderItemForRichTreeView)
   }));
 }, fastObjectShallowCompare);
+if (process.env.NODE_ENV !== "production") WrappedTreeItem.displayName = "WrappedTreeItem";
 export function RichTreeViewItems(props) {
   const {
     slots,

package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -21,6 +21,7 @@ const processItemsLookups = ({
   items,
   isItemDisabled,
   getItemLabel,
+  getItemChildren,
   getItemId,
   initialDepth = 0,
   initialParentId = null,
@@ -39,12 +40,13 @@ const processItemsLookups = ({
     if (label == null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'Alternatively, you can use the `getItemLabel` prop to specify a custom label for each item.', 'An item was provided without label in the `items` prop:', JSON.stringify(item)].join('\n'));
     }
+    const children = getItemChildren ? getItemChildren(item) : item.children;
     itemMetaLookup[id] = {
       id,
       label,
       parentId,
       idAttribute: undefined,
-      expandable: getChildrenCount ? getChildrenCount(item) > 0 : !!item.children?.length,
+      expandable: getChildrenCount ? getChildrenCount(item) > 0 : !!children?.length,
       disabled: isItemDisabled ? isItemDisabled(item) : false,
       depth
     };
@@ -57,7 +59,7 @@ const processItemsLookups = ({
 
     // if lazy loading is enabled, we don't want to process children passed through the `items` prop
     if (!ignoreChildren) {
-      item.children?.forEach(child => processItem(child, depth + 1, id));
+      children?.forEach(child => processItem(child, depth + 1, id));
     }
   };
   items?.forEach(item => processItem(item, initialDepth, initialParentId));
@@ -160,6 +162,7 @@ export const useTreeViewItems = ({
         isItemDisabled: params.isItemDisabled,
         getItemId: params.getItemId,
         getItemLabel: params.getItemLabel,
+        getItemChildren: params.getItemChildren,
         getChildrenCount,
         initialDepth: depth,
         initialParentId: parentId,
@@ -241,7 +244,8 @@ export const useTreeViewItems = ({
         items: params.items,
         isItemDisabled: params.isItemDisabled,
         getItemId: params.getItemId,
-        getItemLabel: params.getItemLabel
+        getItemLabel: params.getItemLabel,
+        getItemChildren: params.getItemChildren
       });
       Object.values(prevState.items.itemMetaLookup).forEach(item => {
         if (!newState.itemMetaLookup[item.id]) {
@@ -254,7 +258,7 @@ export const useTreeViewItems = ({
         items: _extends({}, prevState.items, newState)
       });
     });
-  }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel]);
+  }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel, params.getItemChildren]);
 
   // Wrap `props.onItemClick` with `useEventCallback` to prevent unneeded context updates.
   const handleItemClick = useEventCallback((event, itemId) => {
@@ -294,7 +298,8 @@ useTreeViewItems.getInitialState = params => ({
     items: params.items,
     isItemDisabled: params.isItemDisabled,
     getItemId: params.getItemId,
-    getItemLabel: params.getItemLabel
+    getItemLabel: params.getItemLabel,
+    getItemChildren: params.getItemChildren
   }), {
     loading: false,
     error: null
@@ -314,11 +319,13 @@ useTreeViewItems.wrapRoot = ({
     children: children
   });
 };
+if (process.env.NODE_ENV !== "production") useTreeViewItems.wrapRoot.displayName = "useTreeViewItems.wrapRoot";
 useTreeViewItems.params = {
   disabledItemsFocusable: true,
   items: true,
   isItemDisabled: true,
   getItemLabel: true,
+  getItemChildren: true,
   getItemId: true,
   onItemClick: true,
   itemChildrenIndentation: true

package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts

@@ -115,6 +115,15 @@ export interface UseTreeViewItemsParameters<R extends {
    * @default (item) => item.label
    */
   getItemLabel?: (item: R) => string;
+  /**
+   * Used to determine the children of a given item.
+   *
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {R[]} The children of the item.
+   * @default (item) => item.children
+   */
+  getItemChildren?: (item: R) => R[] | undefined;
   /**
    * Used to determine the id of a given item.
    *

package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -170,6 +170,7 @@ useTreeViewJSXItems.wrapItem = ({
     })
   });
 };
+if (process.env.NODE_ENV !== "production") useTreeViewJSXItems.wrapItem.displayName = "useTreeViewJSXItems.wrapItem";
 useTreeViewJSXItems.wrapRoot = ({
   children
 }) => /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
@@ -180,4 +181,5 @@ useTreeViewJSXItems.wrapRoot = ({
     children: children
   })
 });
+if (process.env.NODE_ENV !== "production") useTreeViewJSXItems.wrapRoot.displayName = "useTreeViewJSXItems.wrapRoot";
 useTreeViewJSXItems.params = {};

package/esm/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -99,7 +99,7 @@ export const useTreeViewKeyboardNavigation = ({
       case key === 'Enter':
         {
           if (hasPlugin(instance, useTreeViewLabel) && selectorIsItemEditable(store.value, itemId) && !selectorIsItemBeingEdited(store.value, itemId)) {
-            instance.setEditedItemId(itemId);
+            instance.setEditedItem(itemId);
           } else if (canToggleItemExpansion(itemId)) {
             instance.setItemExpansion({
               event,

package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -1,11 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useTreeViewLabelItemPlugin } from "./useTreeViewLabel.itemPlugin.js";
+import { selectorIsItemEditable } from "./useTreeViewLabel.selectors.js";
 export const useTreeViewLabel = ({
   store,
   params
 }) => {
-  const setEditedItemId = editedItemId => {
+  const setEditedItem = editedItemId => {
+    if (editedItemId !== null) {
+      const isEditable = selectorIsItemEditable(store.value, editedItemId);
+      if (!isEditable) {
+        return;
+      }
+    }
     store.update(prevState => _extends({}, prevState, {
       label: _extends({}, prevState.label, {
         editedItemId
@@ -44,10 +51,11 @@ export const useTreeViewLabel = ({
   }, [store, params.isItemEditable]);
   return {
     instance: {
-      setEditedItemId,
+      setEditedItem,
       updateItemLabel
     },
     publicAPI: {
+      setEditedItem,
       updateItemLabel
     }
   };

package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.d.ts

@@ -10,15 +10,14 @@ export interface UseTreeViewLabelPublicAPI {
    * @param {string} newLabel The new label of the item.
    */
   updateItemLabel: (itemId: TreeViewItemId, newLabel: string) => void;
-}
-export interface UseTreeViewLabelInstance extends UseTreeViewLabelPublicAPI {
   /**
-   * Updates which item is currently being edited.
-   * @param {TreeViewItemId} itemId The id of the item that is currently being edited.
-   * @returns {void}.
+   * Set which item is currently being edited.
+   * You can pass `null` to exit editing mode.
+   * @param {TreeViewItemId | null} itemId The id of the item to edit, or `null` to exit editing mode.
    */
-  setEditedItemId: (itemId: TreeViewItemId | null) => void;
+  setEditedItem: (itemId: TreeViewItemId | null) => void;
 }
+export interface UseTreeViewLabelInstance extends UseTreeViewLabelPublicAPI {}
 export interface UseTreeViewLabelParameters<R extends {}> {
   /**
    * Callback fired when the label of an item changes.

package/hooks/useTreeItemUtils/useTreeItemUtils.js

@@ -123,12 +123,10 @@ const useTreeItemUtils = ({
     if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
       return;
     }
-    if (isEditable) {
-      if (isEditing) {
-        instance.setEditedItemId(null);
-      } else {
-        instance.setEditedItemId(itemId);
-      }
+    if (isEditing) {
+      instance.setEditedItem(null);
+    } else {
+      instance.setEditedItem(itemId);
     }
   };
   const handleSaveItemLabel = (event, newLabel) => {

package/index.js

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

package/internals/TreeViewItemDepthContext/TreeViewItemDepthContext.js

@@ -7,6 +7,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.TreeViewItemDepthContext = void 0;
 var React = _interopRequireWildcard(require("react"));
 const TreeViewItemDepthContext = exports.TreeViewItemDepthContext = /*#__PURE__*/React.createContext(() => -1);
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewItemDepthContext.displayName = 'TreeViewItemDepthContext';
-}
+if (process.env.NODE_ENV !== "production") TreeViewItemDepthContext.displayName = "TreeViewItemDepthContext";

package/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -14,9 +14,7 @@ var _utils = require("../utils/utils");
 var _useTreeViewItems = require("../plugins/useTreeViewItems/useTreeViewItems.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const TreeViewChildrenItemContext = exports.TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewChildrenItemContext.displayName = 'TreeViewChildrenItemContext';
-}
+if (process.env.NODE_ENV !== "production") TreeViewChildrenItemContext.displayName = "TreeViewChildrenItemContext";
 function TreeViewChildrenItemProvider(props) {
   const {
     children,

package/internals/TreeViewProvider/TreeViewContext.js

@@ -10,9 +10,7 @@ var React = _interopRequireWildcard(require("react"));
  * @ignore - internal component.
  */
 const TreeViewContext = exports.TreeViewContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewContext.displayName = 'TreeViewContext';
-}
+if (process.env.NODE_ENV !== "production") TreeViewContext.displayName = "TreeViewContext";
 const useTreeViewContext = () => {
   const context = React.useContext(TreeViewContext);
   if (context == null) {

package/internals/TreeViewProvider/TreeViewStyleContext.js

@@ -14,9 +14,7 @@ const TreeViewStyleContext = exports.TreeViewStyleContext = /*#__PURE__*/React.c
   slots: {},
   slotProps: {}
 });
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewStyleContext.displayName = 'TreeViewStyleContext';
-}
+if (process.env.NODE_ENV !== "production") TreeViewStyleContext.displayName = "TreeViewStyleContext";
 const useTreeViewStyleContext = () => {
   return React.useContext(TreeViewStyleContext);
 };

package/internals/components/RichTreeViewItems.js

@@ -18,9 +18,7 @@ var _TreeViewProvider = require("../TreeViewProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ownerState"];
 const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  RichTreeViewItemsContext.displayName = 'RichTreeViewItemsProvider';
-}
+if (process.env.NODE_ENV !== "production") RichTreeViewItemsContext.displayName = "RichTreeViewItemsContext";
 const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
   itemSlot,
   itemSlotProps,
@@ -51,6 +49,7 @@ const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
     children: children?.map(renderItemForRichTreeView)
   }));
 }, _fastObjectShallowCompare.fastObjectShallowCompare);
+if (process.env.NODE_ENV !== "production") WrappedTreeItem.displayName = "WrappedTreeItem";
 function RichTreeViewItems(props) {
   const {
     slots,

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -29,6 +29,7 @@ const processItemsLookups = ({
   items,
   isItemDisabled,
   getItemLabel,
+  getItemChildren,
   getItemId,
   initialDepth = 0,
   initialParentId = null,
@@ -47,12 +48,13 @@ const processItemsLookups = ({
     if (label == null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'Alternatively, you can use the `getItemLabel` prop to specify a custom label for each item.', 'An item was provided without label in the `items` prop:', JSON.stringify(item)].join('\n'));
     }
+    const children = getItemChildren ? getItemChildren(item) : item.children;
     itemMetaLookup[id] = {
       id,
       label,
       parentId,
       idAttribute: undefined,
-      expandable: getChildrenCount ? getChildrenCount(item) > 0 : !!item.children?.length,
+      expandable: getChildrenCount ? getChildrenCount(item) > 0 : !!children?.length,
       disabled: isItemDisabled ? isItemDisabled(item) : false,
       depth
     };
@@ -65,7 +67,7 @@ const processItemsLookups = ({
 
     // if lazy loading is enabled, we don't want to process children passed through the `items` prop
     if (!ignoreChildren) {
-      item.children?.forEach(child => processItem(child, depth + 1, id));
+      children?.forEach(child => processItem(child, depth + 1, id));
     }
   };
   items?.forEach(item => processItem(item, initialDepth, initialParentId));
@@ -168,6 +170,7 @@ const useTreeViewItems = ({
         isItemDisabled: params.isItemDisabled,
         getItemId: params.getItemId,
         getItemLabel: params.getItemLabel,
+        getItemChildren: params.getItemChildren,
         getChildrenCount,
         initialDepth: depth,
         initialParentId: parentId,
@@ -249,7 +252,8 @@ const useTreeViewItems = ({
         items: params.items,
         isItemDisabled: params.isItemDisabled,
         getItemId: params.getItemId,
-        getItemLabel: params.getItemLabel
+        getItemLabel: params.getItemLabel,
+        getItemChildren: params.getItemChildren
       });
       Object.values(prevState.items.itemMetaLookup).forEach(item => {
         if (!newState.itemMetaLookup[item.id]) {
@@ -262,7 +266,7 @@ const useTreeViewItems = ({
         items: (0, _extends2.default)({}, prevState.items, newState)
       });
     });
-  }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel]);
+  }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel, params.getItemChildren]);
 
   // Wrap `props.onItemClick` with `useEventCallback` to prevent unneeded context updates.
   const handleItemClick = (0, _useEventCallback.default)((event, itemId) => {
@@ -303,7 +307,8 @@ useTreeViewItems.getInitialState = params => ({
     items: params.items,
     isItemDisabled: params.isItemDisabled,
     getItemId: params.getItemId,
-    getItemLabel: params.getItemLabel
+    getItemLabel: params.getItemLabel,
+    getItemChildren: params.getItemChildren
   }), {
     loading: false,
     error: null
@@ -323,11 +328,13 @@ useTreeViewItems.wrapRoot = ({
     children: children
   });
 };
+if (process.env.NODE_ENV !== "production") useTreeViewItems.wrapRoot.displayName = "useTreeViewItems.wrapRoot";
 useTreeViewItems.params = {
   disabledItemsFocusable: true,
   items: true,
   isItemDisabled: true,
   getItemLabel: true,
+  getItemChildren: true,
   getItemId: true,
   onItemClick: true,
   itemChildrenIndentation: true

package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts

@@ -115,6 +115,15 @@ export interface UseTreeViewItemsParameters<R extends {
    * @default (item) => item.label
    */
   getItemLabel?: (item: R) => string;
+  /**
+   * Used to determine the children of a given item.
+   *
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {R[]} The children of the item.
+   * @default (item) => item.children
+   */
+  getItemChildren?: (item: R) => R[] | undefined;
   /**
    * Used to determine the id of a given item.
    *

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -179,6 +179,7 @@ useTreeViewJSXItems.wrapItem = ({
     })
   });
 };
+if (process.env.NODE_ENV !== "production") useTreeViewJSXItems.wrapItem.displayName = "useTreeViewJSXItems.wrapItem";
 useTreeViewJSXItems.wrapRoot = ({
   children
 }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewChildrenItemProvider.TreeViewChildrenItemProvider, {
@@ -189,4 +190,5 @@ useTreeViewJSXItems.wrapRoot = ({
     children: children
   })
 });
+if (process.env.NODE_ENV !== "production") useTreeViewJSXItems.wrapRoot.displayName = "useTreeViewJSXItems.wrapRoot";
 useTreeViewJSXItems.params = {};

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -107,7 +107,7 @@ const useTreeViewKeyboardNavigation = ({
       case key === 'Enter':
         {
           if ((0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel) && (0, _useTreeViewLabel2.selectorIsItemEditable)(store.value, itemId) && !(0, _useTreeViewLabel2.selectorIsItemBeingEdited)(store.value, itemId)) {
-            instance.setEditedItemId(itemId);
+            instance.setEditedItem(itemId);
           } else if (canToggleItemExpansion(itemId)) {
             instance.setItemExpansion({
               event,

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -8,11 +8,18 @@ exports.useTreeViewLabel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useTreeViewLabel = require("./useTreeViewLabel.itemPlugin");
+var _useTreeViewLabel2 = require("./useTreeViewLabel.selectors");
 const useTreeViewLabel = ({
   store,
   params
 }) => {
-  const setEditedItemId = editedItemId => {
+  const setEditedItem = editedItemId => {
+    if (editedItemId !== null) {
+      const isEditable = (0, _useTreeViewLabel2.selectorIsItemEditable)(store.value, editedItemId);
+      if (!isEditable) {
+        return;
+      }
+    }
     store.update(prevState => (0, _extends2.default)({}, prevState, {
       label: (0, _extends2.default)({}, prevState.label, {
         editedItemId
@@ -51,10 +58,11 @@ const useTreeViewLabel = ({
   }, [store, params.isItemEditable]);
   return {
     instance: {
-      setEditedItemId,
+      setEditedItem,
       updateItemLabel
     },
     publicAPI: {
+      setEditedItem,
       updateItemLabel
     }
   };

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.d.ts

@@ -10,15 +10,14 @@ export interface UseTreeViewLabelPublicAPI {
    * @param {string} newLabel The new label of the item.
    */
   updateItemLabel: (itemId: TreeViewItemId, newLabel: string) => void;
-}
-export interface UseTreeViewLabelInstance extends UseTreeViewLabelPublicAPI {
   /**
-   * Updates which item is currently being edited.
-   * @param {TreeViewItemId} itemId The id of the item that is currently being edited.
-   * @returns {void}.
+   * Set which item is currently being edited.
+   * You can pass `null` to exit editing mode.
+   * @param {TreeViewItemId | null} itemId The id of the item to edit, or `null` to exit editing mode.
    */
-  setEditedItemId: (itemId: TreeViewItemId | null) => void;
+  setEditedItem: (itemId: TreeViewItemId | null) => void;
 }
+export interface UseTreeViewLabelInstance extends UseTreeViewLabelPublicAPI {}
 export interface UseTreeViewLabelParameters<R extends {}> {
   /**
    * Callback fired when the label of an item changes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.3.1",
+  "version": "8.4.0",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Tree View components.",
   "main": "./index.js",
@@ -41,7 +41,7 @@
     "react-transition-group": "^4.4.5",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
-    "@mui/x-internals": "8.3.1"
+    "@mui/x-internals": "8.4.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",