@mui/x-tree-view 7.18.0 → 7.20.0

package/hooks/useTreeItem2Utils/useTreeItem2Utils.d.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
+import { UseTreeViewSelectionSignature } from '../../internals/plugins/useTreeViewSelection';
+import { UseTreeViewExpansionSignature } from '../../internals/plugins/useTreeViewExpansion';
+import { UseTreeViewItemsSignature } from '../../internals/plugins/useTreeViewItems';
+import { UseTreeViewFocusSignature } from '../../internals/plugins/useTreeViewFocus';
 import { UseTreeViewLabelSignature } from '../../internals/plugins/useTreeViewLabel';
 import type { UseTreeItem2Status } from '../../useTreeItem2';
+import { TreeViewPublicAPI } from '../../internals/models';
 export interface UseTreeItem2Interactions {
     handleExpansion: (event: React.MouseEvent) => void;
     handleSelection: (event: React.MouseEvent) => void;
@@ -9,16 +14,29 @@ export interface UseTreeItem2Interactions {
     handleSaveItemLabel: (event: React.SyntheticEvent, label: string) => void;
     handleCancelItemLabelEditing: (event: React.SyntheticEvent) => void;
 }
-interface UseTreeItem2UtilsReturnValue {
-    interactions: UseTreeItem2Interactions;
-    status: UseTreeItem2Status;
-}
+/**
+ * Plugins that need to be present in the Tree View in order for `useTreeItem2Utils` to work correctly.
+ */
+type UseTreeItem2UtilsMinimalPlugins = readonly [
+    UseTreeViewSelectionSignature,
+    UseTreeViewExpansionSignature,
+    UseTreeViewItemsSignature,
+    UseTreeViewFocusSignature
+];
 /**
  * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
  */
 export type UseTreeItem2UtilsOptionalPlugins = readonly [UseTreeViewLabelSignature];
-export declare const useTreeItem2Utils: ({ itemId, children, }: {
+interface UseTreeItem2UtilsReturnValue<TSignatures extends UseTreeItem2UtilsMinimalPlugins, TOptionalSignatures extends UseTreeItem2UtilsOptionalPlugins> {
+    interactions: UseTreeItem2Interactions;
+    status: UseTreeItem2Status;
+    /**
+     * The object the allows Tree View manipulation.
+     */
+    publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
+}
+export declare const useTreeItem2Utils: <TSignatures extends UseTreeItem2UtilsMinimalPlugins = UseTreeItem2UtilsMinimalPlugins, TOptionalSignatures extends UseTreeItem2UtilsOptionalPlugins = UseTreeItem2UtilsOptionalPlugins>({ itemId, children, }: {
     itemId: string;
     children: React.ReactNode;
-}) => UseTreeItem2UtilsReturnValue;
+}) => UseTreeItem2UtilsReturnValue<TSignatures, TOptionalSignatures>;
 export {};

package/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/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/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/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/internals/TreeViewProvider/TreeViewProvider.types.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { MergeSignaturesProperty, TreeItemWrapper, TreeRootWrapper, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewItemPluginResponse, TreeViewPublicAPI } from '../models';
+import { TreeViewCorePluginSignatures } from '../corePlugins';
 export type TreeViewItemPluginsRunner = <TProps extends {}>(props: TProps) => Required<TreeViewItemPluginResponse>;
-export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<TSignatures, 'contextValue'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'contextValue'>> & {
+export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'contextValue'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'contextValue'>> & {
     instance: TreeViewInstance<TSignatures, TOptionalSignatures>;
     publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
     rootRef: React.RefObject<HTMLUListElement>;

package/internals/TreeViewProvider/useTreeViewContext.d.ts

@@ -1,3 +1,3 @@
 import { TreeViewAnyPluginSignature } from '../models';
 import { TreeViewContextValue } from './TreeViewProvider.types';
-export declare const useTreeViewContext: <TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []>() => NonNullable<TreeViewContextValue<TSignatures, TOptionalSignatures>>;
+export declare const useTreeViewContext: <TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []>() => TreeViewContextValue<TSignatures, TOptionalSignatures>;

package/internals/components/RichTreeViewItems.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/utils';
+import { TreeItem, TreeItemProps } from '../../TreeItem';
+import { TreeItem2Props } from '../../TreeItem2';
+import { TreeViewItemId } from '../../models';
+import { TreeViewItemToRenderProps } from '../plugins/useTreeViewItems';
+interface RichTreeViewItemsOwnerState {
+    itemId: TreeViewItemId;
+    label: string;
+}
+export interface RichTreeViewItemsSlots {
+    /**
+     * Custom component for the item.
+     * @default TreeItem.
+     */
+    item?: React.JSXElementConstructor<TreeItemProps> | React.JSXElementConstructor<TreeItem2Props>;
+}
+export interface RichTreeViewItemsSlotProps {
+    item?: SlotComponentProps<typeof TreeItem, {}, RichTreeViewItemsOwnerState>;
+}
+export interface RichTreeViewItemsProps {
+    itemsToRender: TreeViewItemToRenderProps[];
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: RichTreeViewItemsSlots;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: RichTreeViewItemsSlotProps;
+}
+export declare function RichTreeViewItems(props: RichTreeViewItemsProps): React.JSX.Element;
+export {};

package/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/internals/corePlugins/corePlugins.d.ts

@@ -4,7 +4,7 @@ import { ConvertPluginsIntoSignatures } from '../models';
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the tree view components.
  */
-export declare const TREE_VIEW_CORE_PLUGINS: readonly [import("../models").TreeViewPlugin<import("./useTreeViewInstanceEvents").UseTreeViewInstanceEventsSignature>, import("../models").TreeViewPlugin<import("./useTreeViewOptionalPlugins").UseTreeViewOptionalPluginsSignature>, import("../models").TreeViewPlugin<import("./useTreeViewId").UseTreeViewIdSignature>];
+export declare const TREE_VIEW_CORE_PLUGINS: readonly [import("..").TreeViewPlugin<import("./useTreeViewInstanceEvents").UseTreeViewInstanceEventsSignature>, import("..").TreeViewPlugin<import("./useTreeViewOptionalPlugins").UseTreeViewOptionalPluginsSignature>, import("..").TreeViewPlugin<import("./useTreeViewId").UseTreeViewIdSignature>];
 export type TreeViewCorePluginSignatures = ConvertPluginsIntoSignatures<typeof TREE_VIEW_CORE_PLUGINS>;
 export interface TreeViewCorePluginParameters extends UseTreeViewIdParameters {
 }

package/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/internals/corePlugins/useTreeViewId/useTreeViewId.types.d.ts

@@ -1,16 +1,4 @@
 import { TreeViewPluginSignature } from '../../models';
-import { TreeViewItemId } from '../../../models';
-export interface UseTreeViewIdInstance {
-    /**
-     * Get 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 created a unique id for the item based on the Tree View id attribute and the item `itemId`
-     * @param {TreeViewItemId} itemId The id of the item to get the id attribute of.
-     * @param {string | undefined} idAttribute The id attribute of the item if explicitly defined by the user.
-     * @returns {string} The id attribute of the item.
-     */
-    getTreeItemIdAttribute: (itemId: TreeViewItemId, idAttribute: string | undefined) => string;
-}
 export interface UseTreeViewIdParameters {
     /**
      * This prop is used to help implement the accessibility logic.
@@ -19,8 +7,18 @@ export interface UseTreeViewIdParameters {
     id?: string;
 }
 export type UseTreeViewIdDefaultizedParameters = UseTreeViewIdParameters;
+export interface UseTreeViewIdState {
+    id: {
+        treeId: string;
+    };
+}
+interface UseTreeViewIdContextValue {
+    treeId: string | undefined;
+}
 export type UseTreeViewIdSignature = TreeViewPluginSignature<{
     params: UseTreeViewIdParameters;
     defaultizedParams: UseTreeViewIdDefaultizedParameters;
-    instance: UseTreeViewIdInstance;
+    state: UseTreeViewIdState;
+    contextValue: UseTreeViewIdContextValue;
 }>;
+export {};

package/internals/corePlugins/useTreeViewId/useTreeViewId.utils.d.ts

@@ -0,0 +1,17 @@
+import { TreeViewItemId } from '../../../models';
+export declare const createTreeViewDefaultId: () => string;
+/**
+ * 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 declare const generateTreeItemIdAttribute: ({ id, treeId, itemId, }: {
+    id: TreeViewItemId | undefined;
+    treeId: string | undefined;
+    itemId: string;
+}) => string;

package/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/internals/index.d.ts

@@ -1,5 +1,6 @@
 export { useTreeView } from './useTreeView';
 export { TreeViewProvider, useTreeViewContext } from './TreeViewProvider';
+export { RichTreeViewItems } from './components/RichTreeViewItems';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
 export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, TreeViewItemMeta, TreeViewInstance, DefaultizedProps, TreeViewItemPlugin, MuiCancellableEvent, MuiCancellableEventHandler, } from './models';
 export type { TreeViewCorePluginParameters } from './corePlugins';

package/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/internals/models/plugin.d.ts

@@ -138,7 +138,10 @@ export type TreeRootWrapper<TSignatures extends readonly TreeViewAnyPluginSignat
 }) => React.ReactNode;
 export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
     (options: TreeViewPluginOptions<TSignature>): TreeViewResponse<TSignature>;
-    getDefaultizedParams?: (params: TreeViewUsedParams<TSignature>) => TSignature['defaultizedParams'];
+    getDefaultizedParams?: (options: {
+        params: TreeViewUsedParams<TSignature>;
+        experimentalFeatures: TreeViewUsedExperimentalFeatures<TSignature>;
+    }) => TSignature['defaultizedParams'];
     getInitialState?: (params: TreeViewUsedDefaultizedParams<TSignature>) => TSignature['state'];
     models?: TreeViewModelsInitializer<TSignature>;
     params: Record<keyof TSignature['params'], true>;

package/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/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/internals/plugins/useTreeViewItems/index.d.ts

@@ -1,3 +1,3 @@
 export { useTreeViewItems } from './useTreeViewItems';
-export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, UseTreeViewItemsState, } from './useTreeViewItems.types';
+export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, UseTreeViewItemsState, TreeViewItemToRenderProps, } from './useTreeViewItems.types';
 export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './useTreeViewItems.utils';

package/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/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { TreeViewItemMeta, DefaultizedProps, TreeViewPluginSignature } from '../../models';
 import { TreeViewBaseItem, TreeViewItemId } from '../../../models';
-interface TreeViewItemProps {
+export interface TreeViewItemToRenderProps {
     label: string;
     itemId: string;
     id: string | undefined;
-    children?: TreeViewItemProps[];
+    children?: TreeViewItemToRenderProps[];
 }
 export interface UseTreeViewItemsPublicAPI<R extends {}> {
     /**
@@ -31,7 +31,7 @@ export interface UseTreeViewItemsPublicAPI<R extends {}> {
     getItemOrderedChildrenIds: (itemId: TreeViewItemId | null) => TreeViewItemId[];
     /**
      * Get all the items in the same format as provided by `props.items`.
-     * @returns {TreeViewItemProps[]} The items in the tree.
+     * @returns {TreeViewItemToRenderProps[]} The items in the tree.
      */
     getItemTree: () => TreeViewBaseItem[];
 }
@@ -46,10 +46,10 @@ export interface UseTreeViewItemsInstance<R extends {}> extends UseTreeViewItems
     /**
      * Get the item that should be rendered.
      * This method is only used on Rich Tree View components.
-     * Check the `TreeViewItemProps` type for more information.
-     * @returns {TreeViewItemProps[]} The items to render.
+     * Check the `TreeViewItemToRenderProps` type for more information.
+     * @returns {TreeViewItemToRenderProps[]} The items to render.
      */
-    getItemsToRender: () => TreeViewItemProps[];
+    getItemsToRender: () => TreeViewItemToRenderProps[];
     /**
      * Check if a given item is disabled.
      * An item is disabled if it was marked as disabled or if one of its ancestors is disabled.

package/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/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/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/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.d.ts

@@ -1,4 +1,4 @@
-import { TreeViewPluginSignature } from '../../models';
+import { DefaultizedProps, TreeViewPluginSignature } from '../../models';
 import { TreeViewItemId } from '../../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { TreeItem2LabelInputProps } from '../../../TreeItem2LabelInput';
@@ -59,12 +59,13 @@ export interface UseTreeViewLabelParameters<R extends {}> {
      */
     isItemEditable?: boolean | ((item: R) => boolean);
 }
+export type UseTreeViewLabelDefaultizedParameters<R extends {}> = DefaultizedProps<UseTreeViewLabelParameters<R>, 'isItemEditable'>;
 export interface UseTreeViewLabelState {
     editedItemId: string | null;
 }
 export type UseTreeViewLabelSignature = TreeViewPluginSignature<{
     params: UseTreeViewLabelParameters<any>;
-    defaultizedParams: UseTreeViewLabelParameters<any>;
+    defaultizedParams: UseTreeViewLabelDefaultizedParameters<any>;
     publicAPI: UseTreeViewLabelPublicAPI;
     instance: UseTreeViewLabelInstance;
     state: UseTreeViewLabelState;