@mui/x-tree-view 7.18.0 → 7.20.0

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -174,7 +174,9 @@ useTreeViewSelection.models = {
   }
 };
 const DEFAULT_SELECTED_ITEMS = [];
-useTreeViewSelection.getDefaultizedParams = params => _extends({}, params, {
+useTreeViewSelection.getDefaultizedParams = ({
+  params
+}) => _extends({}, params, {
   disableSelection: params.disableSelection ?? false,
   multiSelect: params.multiSelect ?? false,
   checkboxSelection: params.checkboxSelection ?? false,

package/internals/useTreeView/extractPluginParamsFromProps.d.ts

@@ -9,5 +9,5 @@ interface ExtractPluginParamsFromPropsReturnValue<TSignatures extends readonly T
     pluginParams: MergeSignaturesProperty<TSignatures, 'defaultizedParams'>;
     forwardedProps: Omit<TProps, keyof MergeSignaturesProperty<TSignatures, 'params'>>;
 }
-export declare const extractPluginParamsFromProps: <TSignatures extends readonly TreeViewPluginSignature<any>[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>>({ props: { slots, slotProps, apiRef, experimentalFeatures, ...props }, plugins, }: ExtractPluginParamsFromPropsParameters<TSignatures, TProps>) => ExtractPluginParamsFromPropsReturnValue<TSignatures, TProps>;
+export declare const extractPluginParamsFromProps: <TSignatures extends readonly TreeViewPluginSignature<any>[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>>({ props: { slots, slotProps, apiRef, experimentalFeatures: inExperimentalFeatures, ...props }, plugins, }: ExtractPluginParamsFromPropsParameters<TSignatures, TProps>) => ExtractPluginParamsFromPropsReturnValue<TSignatures, TProps>;
 export {};

package/internals/useTreeView/extractPluginParamsFromProps.js

@@ -6,7 +6,7 @@ export const extractPluginParamsFromProps = _ref => {
         slots,
         slotProps,
         apiRef,
-        experimentalFeatures
+        experimentalFeatures: inExperimentalFeatures
       },
       plugins
     } = _ref,
@@ -25,9 +25,13 @@ export const extractPluginParamsFromProps = _ref => {
       forwardedProps[propName] = prop;
     }
   });
+  const experimentalFeatures = inExperimentalFeatures ?? {};
   const defaultizedPluginParams = plugins.reduce((acc, plugin) => {
     if (plugin.getDefaultizedParams) {
-      return plugin.getDefaultizedParams(acc);
+      return plugin.getDefaultizedParams({
+        params: acc,
+        experimentalFeatures
+      });
     }
     return acc;
   }, pluginParams);
@@ -37,6 +41,6 @@ export const extractPluginParamsFromProps = _ref => {
     pluginParams: defaultizedPluginParams,
     slots: slots ?? {},
     slotProps: slotProps ?? {},
-    experimentalFeatures: experimentalFeatures ?? {}
+    experimentalFeatures
   };
 };

package/modern/RichTreeView/RichTreeView.js

@@ -11,7 +11,7 @@ import { styled, createUseThemeProps } from "../internals/zero-styled/index.js";
 import { useTreeView } from "../internals/useTreeView/index.js";
 import { TreeViewProvider } from "../internals/TreeViewProvider/index.js";
 import { RICH_TREE_VIEW_PLUGINS } from "./RichTreeView.plugins.js";
-import { TreeItem } from "../TreeItem/index.js";
+import { RichTreeViewItems } from "../internals/components/RichTreeViewItems.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiRichTreeView');
 const useUtilityClasses = ownerState => {
@@ -34,33 +34,6 @@ export const RichTreeViewRoot = styled('ul', {
   outline: 0,
   position: 'relative'
 });
-function WrappedTreeItem({
-  slots,
-  slotProps,
-  label,
-  id,
-  itemId,
-  children
-}) {
-  const Item = slots?.item ?? TreeItem;
-  const itemProps = useSlotProps({
-    elementType: Item,
-    externalSlotProps: slotProps?.item,
-    additionalProps: {
-      itemId,
-      id,
-      label
-    },
-    ownerState: {
-      itemId,
-      label
-    }
-  });
-  return /*#__PURE__*/_jsx(Item, _extends({}, itemProps, {
-    children: children
-  }));
-}
-
 /**
  *
  * Demos:
@@ -103,26 +76,14 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     getSlotProps: getRootProps,
     ownerState: props
   });
-  const itemsToRender = instance.getItemsToRender();
-  const renderItem = ({
-    label,
-    itemId,
-    id,
-    children
-  }) => {
-    return /*#__PURE__*/_jsx(WrappedTreeItem, {
-      slots: slots,
-      slotProps: slotProps,
-      label: label,
-      id: id,
-      itemId: itemId,
-      children: children?.map(renderItem)
-    }, itemId);
-  };
   return /*#__PURE__*/_jsx(TreeViewProvider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
-      children: itemsToRender.map(renderItem)
+      children: /*#__PURE__*/_jsx(RichTreeViewItems, {
+        slots: slots,
+        slotProps: slotProps,
+        itemsToRender: instance.getItemsToRender()
+      })
     }))
   });
 });

package/modern/TreeItem/TreeItem.js

@@ -19,6 +19,7 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import useSlotProps from '@mui/utils/useSlotProps';
 import unsupportedProp from '@mui/utils/unsupportedProp';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
+import { warnOnce } from '@mui/x-internals/warning';
 import { styled, createUseThemeProps } from "../internals/zero-styled/index.js";
 import { TreeItemContent } from "./TreeItemContent.js";
 import { treeItemClasses, getTreeItemUtilityClass } from "./treeItemClasses.js";
@@ -28,6 +29,7 @@ import { TreeItem2Provider } from "../TreeItem2Provider/index.js";
 import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.js";
 import { useTreeItemState } from "./useTreeItemState.js";
 import { isTargetInDescendants } from "../internals/utils/tree.js";
+import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTreeItem');
 const useUtilityClasses = ownerState => {
@@ -185,6 +187,7 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     expansion: {
       expansionTrigger
     },
+    treeId,
     instance
   } = useTreeViewContext();
   const depthContext = React.useContext(TreeViewItemDepthContext);
@@ -218,6 +221,15 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     handleCancelItemLabelEditing,
     handleSaveItemLabel
   } = useTreeItemState(itemId);
+  if (process.env.NODE_ENV !== 'production') {
+    // Checking directly the `props` to avoid having the default value applied
+    if (props.ContentComponent) {
+      warnOnce(['MUI X: The ContentComponent prop of the TreeItem component is deprecated and will be removed in the next major release.', 'You can use the new TreeItem2 component or the new useTreeItem2 hook to customize the rendering of the content.', 'For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.']);
+    }
+    if (props.ContentProps) {
+      warnOnce(['MUI X: The ContentProps prop of the TreeItem component is deprecated and will be removed in the next major release.', 'You can use the new TreeItem2 component or the new useTreeItem2 hook to customize the rendering of the content.', 'For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.']);
+    }
+  }
   const {
     contentRef,
     rootRef,
@@ -341,7 +353,11 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     }
     instance.handleItemKeyDown(event, itemId);
   };
-  const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
+  const idAttribute = generateTreeItemIdAttribute({
+    itemId,
+    treeId,
+    id
+  });
   const tabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
   const sharedPropsEnhancerParams = {
     rootRefObject,
@@ -436,11 +452,13 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   className: PropTypes.string,
   /**
    * The component used to render the content of the item.
+   * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
    * @default TreeItemContent
    */
   ContentComponent: elementTypeAcceptingRef,
   /**
    * Props applied to ContentComponent.
+   * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
    */
   ContentProps: PropTypes.object,
   /**

package/modern/TreeItem/TreeItemContent.js

@@ -73,35 +73,31 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
     }
     toggleItemEditing();
   };
-  return (
-    /*#__PURE__*/
-    /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
-    _jsxs("div", _extends({}, other, {
-      className: clsx(className, classes.root, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      ref: ref,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: classes.iconContainer,
-        children: icon
-      }), checkboxSelection && /*#__PURE__*/_jsx(Checkbox, {
-        className: classes.checkbox,
-        checked: selected,
-        onChange: handleCheckboxSelection,
-        disabled: disabled || disableSelection,
-        ref: checkboxRef,
-        tabIndex: -1
-      }), editing ? /*#__PURE__*/_jsx(TreeItem2LabelInput, _extends({}, labelInputProps, {
-        className: classes.labelInput
-      })) : /*#__PURE__*/_jsx("div", _extends({
-        className: classes.label
-      }, editable && {
-        onDoubleClick: handleLabelDoubleClick
-      }, {
-        children: label
-      })), dragAndDropOverlayProps && /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
-    }))
-  );
+  return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */_jsxs("div", _extends({}, other, {
+    className: clsx(classes.root, className, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.iconContainer,
+      children: icon
+    }), checkboxSelection && /*#__PURE__*/_jsx(Checkbox, {
+      className: classes.checkbox,
+      checked: selected,
+      onChange: handleCheckboxSelection,
+      disabled: disabled || disableSelection,
+      ref: checkboxRef,
+      tabIndex: -1
+    }), editing ? /*#__PURE__*/_jsx(TreeItem2LabelInput, _extends({}, labelInputProps, {
+      className: classes.labelInput
+    })) : /*#__PURE__*/_jsx("div", _extends({
+      className: classes.label
+    }, editable && {
+      onDoubleClick: handleLabelDoubleClick
+    }, {
+      children: label
+    })), dragAndDropOverlayProps && /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
+  }));
 });
 process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -1,12 +1,6 @@
 import { useTreeViewContext } from "../../internals/TreeViewProvider/index.js";
 import { useTreeViewLabel } from "../../internals/plugins/useTreeViewLabel/index.js";
 import { hasPlugin } from "../../internals/utils/plugins.js";
-const isItemExpandable = reactChildren => {
-  if (Array.isArray(reactChildren)) {
-    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
-  }
-  return Boolean(reactChildren);
-};
 
 /**
  * Plugins that need to be present in the Tree View in order for `useTreeItem2Utils` to work correctly.
@@ -16,6 +10,12 @@ const isItemExpandable = reactChildren => {
  * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
  */
 
+const isItemExpandable = reactChildren => {
+  if (Array.isArray(reactChildren)) {
+    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
+  }
+  return Boolean(reactChildren);
+};
 export const useTreeItem2Utils = ({
   itemId,
   children
@@ -24,7 +24,8 @@ export const useTreeItem2Utils = ({
     instance,
     selection: {
       multiSelect
-    }
+    },
+    publicAPI
   } = useTreeViewContext();
   const status = {
     expandable: isItemExpandable(children),
@@ -134,6 +135,7 @@ export const useTreeItem2Utils = ({
   };
   return {
     interactions,
-    status
+    status,
+    publicAPI
   };
 };

package/modern/index.js

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

package/modern/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from "./useTreeViewContext.js";
 import { escapeOperandAttributeSelector } from "../utils/utils.js";
+import { generateTreeItemIdAttribute } from "../corePlugins/useTreeViewId/useTreeViewId.utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
@@ -14,6 +15,7 @@ export function TreeViewChildrenItemProvider(props) {
   } = props;
   const {
     instance,
+    treeId,
     rootRef
   } = useTreeViewContext();
   const childrenIdAttrToIdRef = React.useRef(new Map());
@@ -28,7 +30,11 @@ export function TreeViewChildrenItemProvider(props) {
       // Undefined during 1st render
       const itemMeta = instance.getItemMeta(itemId);
       if (itemMeta !== undefined) {
-        idAttr = instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute);
+        idAttr = generateTreeItemIdAttribute({
+          itemId,
+          treeId,
+          id: itemMeta.idAttribute
+        });
       }
     }
     if (idAttr == null) {

package/modern/internals/TreeViewProvider/TreeViewProvider.js

@@ -14,7 +14,8 @@ export function TreeViewProvider(props) {
   return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
     value: value,
     children: value.wrapRoot({
-      children
+      children,
+      instance: value.instance
     })
   });
 }

package/modern/internals/components/RichTreeViewItems.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ownerState"];
+import * as React from 'react';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { TreeItem } from "../../TreeItem/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function WrappedTreeItem({
+  slots,
+  slotProps,
+  label,
+  id,
+  itemId,
+  itemsToRender
+}) {
+  const Item = slots?.item ?? TreeItem;
+  const _useSlotProps = useSlotProps({
+      elementType: Item,
+      externalSlotProps: slotProps?.item,
+      additionalProps: {
+        itemId,
+        id,
+        label
+      },
+      ownerState: {
+        itemId,
+        label
+      }
+    }),
+    itemProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
+  const children = React.useMemo(() => itemsToRender ? /*#__PURE__*/_jsx(RichTreeViewItems, {
+    itemsToRender: itemsToRender,
+    slots: slots,
+    slotProps: slotProps
+  }) : null, [itemsToRender, slots, slotProps]);
+  return /*#__PURE__*/_jsx(Item, _extends({}, itemProps, {
+    children: children
+  }));
+}
+export function RichTreeViewItems(props) {
+  const {
+    itemsToRender,
+    slots,
+    slotProps
+  } = props;
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: itemsToRender.map(item => /*#__PURE__*/_jsx(WrappedTreeItem, {
+      slots: slots,
+      slotProps: slotProps,
+      label: item.label,
+      id: item.id,
+      itemId: item.itemId,
+      itemsToRender: item.children
+    }, item.itemId))
+  });
+}

package/modern/internals/corePlugins/useTreeViewId/useTreeViewId.js

@@ -1,19 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useId from '@mui/utils/useId';
+import { createTreeViewDefaultId } from "./useTreeViewId.utils.js";
 export const useTreeViewId = ({
-  params
+  params,
+  state,
+  setState
 }) => {
-  const treeId = useId(params.id);
-  const getTreeItemIdAttribute = React.useCallback((itemId, idAttribute) => idAttribute ?? `${treeId}-${itemId}`, [treeId]);
+  const treeId = state.id.treeId;
+  React.useEffect(() => {
+    setState(prevState => {
+      if (prevState.id.treeId === params.id) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        id: _extends({}, prevState.id, {
+          treeId: params.id ?? createTreeViewDefaultId()
+        })
+      });
+    });
+  }, [setState, params.id]);
   return {
     getRootProps: () => ({
       id: treeId
     }),
-    instance: {
-      getTreeItemIdAttribute
+    contextValue: {
+      treeId
     }
   };
 };
 useTreeViewId.params = {
   id: true
-};
+};
+useTreeViewId.getInitialState = ({
+  id
+}) => ({
+  id: {
+    treeId: id ?? createTreeViewDefaultId()
+  }
+});

package/modern/internals/corePlugins/useTreeViewId/useTreeViewId.utils.js

@@ -0,0 +1,26 @@
+let globalTreeViewDefaultId = 0;
+export const createTreeViewDefaultId = () => {
+  globalTreeViewDefaultId += 1;
+  return `mui-tree-view-${globalTreeViewDefaultId}`;
+};
+
+/**
+ * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a tree item.
+ * If the user explicitly defined an id attribute, it will be returned.
+ * Otherwise, the method creates a unique id for the item based on the Tree View id attribute and the item `itemId`
+ * @param {object} params The parameters to determine the id attribute of the item.
+ * @param {TreeViewItemId} params.itemId The id of the item to get the id attribute of.
+ * @param {string | undefined} params.idAttribute The id attribute of the item if explicitly defined by the user.
+ * @param {string} params.treeId The id attribute of the Tree View.
+ * @returns {string} The id attribute of the item.
+ */
+export const generateTreeItemIdAttribute = ({
+  id,
+  treeId = '',
+  itemId
+}) => {
+  if (id != null) {
+    return id;
+  }
+  return `${treeId}-${itemId}`;
+};

package/modern/internals/index.js

@@ -1,5 +1,6 @@
 export { useTreeView } from "./useTreeView/index.js";
 export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
+export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
 export { unstable_resetCleanupTracking } from "./hooks/useInstanceEventHandler.js";
 
 // Core plugins

package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -86,7 +86,9 @@ useTreeViewExpansion.models = {
   }
 };
 const DEFAULT_EXPANDED_ITEMS = [];
-useTreeViewExpansion.getDefaultizedParams = params => _extends({}, params, {
+useTreeViewExpansion.getDefaultizedParams = ({
+  params
+}) => _extends({}, params, {
   defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_ITEMS
 });
 useTreeViewExpansion.params = {

package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -64,7 +64,7 @@ export const useTreeViewFocus = ({
     }
     const itemMeta = instance.getItemMeta(state.focusedItemId);
     if (itemMeta) {
-      const itemElement = document.getElementById(instance.getTreeItemIdAttribute(state.focusedItemId, itemMeta.idAttribute));
+      const itemElement = instance.getItemDOMElement(state.focusedItemId);
       if (itemElement) {
         itemElement.blur();
       }

package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { publishTreeViewEvent } from "../../utils/publishTreeViewEvent.js";
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
+import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const updateItemsState = ({
   items,
@@ -110,7 +111,11 @@ export const useTreeViewItems = ({
     if (itemMeta == null) {
       return null;
     }
-    return document.getElementById(instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute));
+    return document.getElementById(generateTreeItemIdAttribute({
+      treeId: state.id.treeId,
+      itemId,
+      id: itemMeta.idAttribute
+    }));
   };
   const isItemNavigable = itemId => {
     if (params.disabledItemsFocusable) {
@@ -200,7 +205,9 @@ useTreeViewItems.getInitialState = params => ({
     getItemLabel: params.getItemLabel
   })
 });
-useTreeViewItems.getDefaultizedParams = params => _extends({}, params, {
+useTreeViewItems.getDefaultizedParams = ({
+  params
+}) => _extends({}, params, {
   disabledItemsFocusable: params.disabledItemsFocusable ?? false,
   itemChildrenIndentation: params.itemChildrenIndentation ?? '12px'
 });

package/modern/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -8,6 +8,7 @@ import { useTreeViewContext } from "../../TreeViewProvider/index.js";
 import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/useTreeViewItems.utils.js";
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
+import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useTreeViewJSXItems = ({
   instance,
@@ -98,7 +99,8 @@ const useTreeViewJSXItemsItemPlugin = ({
   contentRef
 }) => {
   const {
-    instance
+    instance,
+    treeId
   } = useTreeViewContext();
   const {
     children,
@@ -122,12 +124,16 @@ const useTreeViewJSXItemsItemPlugin = ({
 
   // Prevent any flashing
   useEnhancedEffect(() => {
-    const idAttributeWithDefault = instance.getTreeItemIdAttribute(itemId, id);
-    registerChild(idAttributeWithDefault, itemId);
+    const idAttribute = generateTreeItemIdAttribute({
+      itemId,
+      treeId,
+      id
+    });
+    registerChild(idAttribute, itemId);
     return () => {
-      unregisterChild(idAttributeWithDefault);
+      unregisterChild(idAttribute);
     };
-  }, [instance, registerChild, unregisterChild, itemId, id]);
+  }, [registerChild, unregisterChild, itemId, id, treeId]);
   React.useEffect(() => {
     return instance.insertJSXItem({
       id: itemId,

package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -153,6 +153,9 @@ export const useTreeViewKeyboardNavigation = ({
       // If the focused item is collapsed and has children, we expand it
       case key === 'ArrowRight' && !isRtl || key === 'ArrowLeft' && isRtl:
         {
+          if (ctrlPressed) {
+            return;
+          }
           if (instance.isItemExpanded(itemId)) {
             const nextItemId = getNextNavigableItem(instance, itemId);
             if (nextItemId) {
@@ -170,6 +173,9 @@ export const useTreeViewKeyboardNavigation = ({
       // If the focused item is collapsed and has a parent, we move the focus to this parent
       case key === 'ArrowLeft' && !isRtl || key === 'ArrowRight' && isRtl:
         {
+          if (ctrlPressed) {
+            return;
+          }
           if (canToggleItemExpansion(itemId) && instance.isItemExpanded(itemId)) {
             instance.toggleItemExpansion(event, itemId);
             event.preventDefault();

package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -6,14 +6,8 @@ export const useTreeViewLabel = ({
   instance,
   state,
   setState,
-  params,
-  experimentalFeatures
+  params
 }) => {
-  if (process.env.NODE_ENV !== 'production') {
-    if (params.isItemEditable && !experimentalFeatures?.labelEditing) {
-      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 => {
@@ -23,7 +17,7 @@ export const useTreeViewLabel = ({
     editedItemRef.current = editedItemId;
   };
   const isItemBeingEdited = itemId => itemId === state.editedItemId;
-  const isTreeViewEditable = Boolean(params.isItemEditable) && !!experimentalFeatures.labelEditing;
+  const isTreeViewEditable = Boolean(params.isItemEditable);
   const isItemEditable = itemId => {
     if (itemId == null || !isTreeViewEditable) {
       return false;
@@ -72,6 +66,20 @@ export const useTreeViewLabel = ({
   };
 };
 useTreeViewLabel.itemPlugin = useTreeViewLabelItemPlugin;
+useTreeViewLabel.getDefaultizedParams = ({
+  params,
+  experimentalFeatures
+}) => {
+  const canUseFeature = experimentalFeatures?.labelEditing;
+  if (process.env.NODE_ENV !== 'production') {
+    if (params.isItemEditable && !canUseFeature) {
+      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/']);
+    }
+  }
+  return _extends({}, params, {
+    isItemEditable: canUseFeature ? params.isItemEditable ?? false : false
+  });
+};
 useTreeViewLabel.getInitialState = () => ({
   editedItemId: null
 });

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -174,7 +174,9 @@ useTreeViewSelection.models = {
   }
 };
 const DEFAULT_SELECTED_ITEMS = [];
-useTreeViewSelection.getDefaultizedParams = params => _extends({}, params, {
+useTreeViewSelection.getDefaultizedParams = ({
+  params
+}) => _extends({}, params, {
   disableSelection: params.disableSelection ?? false,
   multiSelect: params.multiSelect ?? false,
   checkboxSelection: params.checkboxSelection ?? false,