@mui/x-tree-view 7.18.0 → 7.20.0

package/modern/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/useTreeItem2/useTreeItem2.js

@@ -6,6 +6,7 @@ import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
 import { useTreeItem2Utils } from "../hooks/useTreeItem2Utils/index.js";
 import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.js";
 import { isTargetInDescendants } from "../internals/utils/tree.js";
+import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
 export const useTreeItem2 = parameters => {
   const {
     runItemPlugins,
@@ -22,6 +23,7 @@ export const useTreeItem2 = parameters => {
     expansion: {
       expansionTrigger
     },
+    treeId,
     instance,
     publicAPI
   } = useTreeViewContext();
@@ -47,10 +49,14 @@ export const useTreeItem2 = parameters => {
   });
   const rootRefObject = React.useRef(null);
   const contentRefObject = React.useRef(null);
-  const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
   const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
+  const idAttribute = generateTreeItemIdAttribute({
+    itemId,
+    treeId,
+    id
+  });
   const rootTabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
   const sharedPropsEnhancerParams = {
     rootRefObject,

package/node/RichTreeView/RichTreeView.js

@@ -18,7 +18,7 @@ var _zeroStyled = require("../internals/zero-styled");
 var _useTreeView = require("../internals/useTreeView");
 var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _RichTreeView = require("./RichTreeView.plugins");
-var _TreeItem = require("../TreeItem");
+var _RichTreeViewItems = require("../internals/components/RichTreeViewItems");
 var _jsxRuntime = require("react/jsx-runtime");
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiRichTreeView');
 const useUtilityClasses = ownerState => {
@@ -41,33 +41,6 @@ const RichTreeViewRoot = exports.RichTreeViewRoot = (0, _zeroStyled.styled)('ul'
   outline: 0,
   position: 'relative'
 });
-function WrappedTreeItem({
-  slots,
-  slotProps,
-  label,
-  id,
-  itemId,
-  children
-}) {
-  const Item = slots?.item ?? _TreeItem.TreeItem;
-  const itemProps = (0, _useSlotProps.default)({
-    elementType: Item,
-    externalSlotProps: slotProps?.item,
-    additionalProps: {
-      itemId,
-      id,
-      label
-    },
-    ownerState: {
-      itemId,
-      label
-    }
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, (0, _extends2.default)({}, itemProps, {
-    children: children
-  }));
-}
-
 /**
  *
  * Demos:
@@ -110,26 +83,14 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
     getSlotProps: getRootProps,
     ownerState: props
   });
-  const itemsToRender = instance.getItemsToRender();
-  const renderItem = ({
-    label,
-    itemId,
-    id,
-    children
-  }) => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedTreeItem, {
-      slots: slots,
-      slotProps: slotProps,
-      label: label,
-      id: id,
-      itemId: itemId,
-      children: children?.map(renderItem)
-    }, itemId);
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewProvider.TreeViewProvider, {
     value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
-      children: itemsToRender.map(renderItem)
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichTreeViewItems.RichTreeViewItems, {
+        slots: slots,
+        slotProps: slotProps,
+        itemsToRender: instance.getItemsToRender()
+      })
     }))
   });
 });

package/node/TreeItem/TreeItem.js

@@ -22,6 +22,7 @@ var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveC
 var _useSlotProps4 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _unsupportedProp = _interopRequireDefault(require("@mui/utils/unsupportedProp"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
+var _warning = require("@mui/x-internals/warning");
 var _zeroStyled = require("../internals/zero-styled");
 var _TreeItemContent = require("./TreeItemContent");
 var _treeItemClasses = require("./treeItemClasses");
@@ -31,6 +32,7 @@ var _TreeItem2Provider = require("../TreeItem2Provider");
 var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
 var _useTreeItemState = require("./useTreeItemState");
 var _tree = require("../internals/utils/tree");
+var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeViewId.utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "itemId", "id", "label", "onClick", "onMouseDown", "onFocus", "onBlur", "onKeyDown"],
   _excluded2 = ["ownerState"],
@@ -192,6 +194,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     expansion: {
       expansionTrigger
     },
+    treeId,
     instance
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
@@ -225,6 +228,15 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     handleCancelItemLabelEditing,
     handleSaveItemLabel
   } = (0, _useTreeItemState.useTreeItemState)(itemId);
+  if (process.env.NODE_ENV !== 'production') {
+    // Checking directly the `props` to avoid having the default value applied
+    if (props.ContentComponent) {
+      (0, _warning.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) {
+      (0, _warning.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,
@@ -348,7 +360,11 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     }
     instance.handleItemKeyDown(event, itemId);
   };
-  const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
+  const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
+    itemId,
+    treeId,
+    id
+  });
   const tabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
   const sharedPropsEnhancerParams = {
     rootRefObject,
@@ -443,11 +459,13 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   className: _propTypes.default.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.default,
   /**
    * 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.default.object,
   /**

package/node/TreeItem/TreeItemContent.js

@@ -81,35 +81,31 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
     }
     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 */
-    (0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({}, other, {
-      className: (0, _clsx.default)(className, classes.root, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled, editing && classes.editing, editable && classes.editable),
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      ref: ref,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: classes.iconContainer,
-        children: icon
-      }), checkboxSelection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
-        className: classes.checkbox,
-        checked: selected,
-        onChange: handleCheckboxSelection,
-        disabled: disabled || disableSelection,
-        ref: checkboxRef,
-        tabIndex: -1
-      }), editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2LabelInput.TreeItem2LabelInput, (0, _extends2.default)({}, labelInputProps, {
-        className: classes.labelInput
-      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
-        className: classes.label
-      }, editable && {
-        onDoubleClick: handleLabelDoubleClick
-      }, {
-        children: label
-      })), dragAndDropOverlayProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2DragAndDropOverlay.TreeItem2DragAndDropOverlay, (0, _extends2.default)({}, dragAndDropOverlayProps))]
-    }))
-  );
+  return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({}, other, {
+    className: (0, _clsx.default)(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__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.iconContainer,
+      children: icon
+    }), checkboxSelection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+      className: classes.checkbox,
+      checked: selected,
+      onChange: handleCheckboxSelection,
+      disabled: disabled || disableSelection,
+      ref: checkboxRef,
+      tabIndex: -1
+    }), editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2LabelInput.TreeItem2LabelInput, (0, _extends2.default)({}, labelInputProps, {
+      className: classes.labelInput
+    })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
+      className: classes.label
+    }, editable && {
+      onDoubleClick: handleLabelDoubleClick
+    }, {
+      children: label
+    })), dragAndDropOverlayProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2DragAndDropOverlay.TreeItem2DragAndDropOverlay, (0, _extends2.default)({}, dragAndDropOverlayProps))]
+  }));
 });
 process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -7,13 +7,6 @@ exports.useTreeItem2Utils = void 0;
 var _TreeViewProvider = require("../../internals/TreeViewProvider");
 var _useTreeViewLabel = require("../../internals/plugins/useTreeViewLabel");
 var _plugins = require("../../internals/utils/plugins");
-const isItemExpandable = reactChildren => {
-  if (Array.isArray(reactChildren)) {
-    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
-  }
-  return Boolean(reactChildren);
-};
-
 /**
  * Plugins that need to be present in the Tree View in order for `useTreeItem2Utils` to work correctly.
  */
@@ -22,6 +15,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);
+};
 const useTreeItem2Utils = ({
   itemId,
   children
@@ -30,7 +29,8 @@ const useTreeItem2Utils = ({
     instance,
     selection: {
       multiSelect
-    }
+    },
+    publicAPI
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const status = {
     expandable: isItemExpandable(children),
@@ -140,7 +140,8 @@ const useTreeItem2Utils = ({
   };
   return {
     interactions,
-    status
+    status,
+    publicAPI
   };
 };
 exports.useTreeItem2Utils = useTreeItem2Utils;

package/node/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/node/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useTreeViewContext = require("./useTreeViewContext");
 var _utils = require("../utils/utils");
+var _useTreeViewId = require("../corePlugins/useTreeViewId/useTreeViewId.utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const TreeViewChildrenItemContext = exports.TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
@@ -23,6 +24,7 @@ function TreeViewChildrenItemProvider(props) {
   } = props;
   const {
     instance,
+    treeId,
     rootRef
   } = (0, _useTreeViewContext.useTreeViewContext)();
   const childrenIdAttrToIdRef = React.useRef(new Map());
@@ -37,7 +39,11 @@ function TreeViewChildrenItemProvider(props) {
       // Undefined during 1st render
       const itemMeta = instance.getItemMeta(itemId);
       if (itemMeta !== undefined) {
-        idAttr = instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute);
+        idAttr = (0, _useTreeViewId.generateTreeItemIdAttribute)({
+          itemId,
+          treeId,
+          id: itemMeta.idAttribute
+        });
       }
     }
     if (idAttr == null) {

package/node/internals/TreeViewProvider/TreeViewProvider.js

@@ -21,7 +21,8 @@ function TreeViewProvider(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewContext.TreeViewContext.Provider, {
     value: value,
     children: value.wrapRoot({
-      children
+      children,
+      instance: value.instance
     })
   });
 }

package/node/internals/components/RichTreeViewItems.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RichTreeViewItems = RichTreeViewItems;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _TreeItem = require("../../TreeItem");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ownerState"];
+function WrappedTreeItem({
+  slots,
+  slotProps,
+  label,
+  id,
+  itemId,
+  itemsToRender
+}) {
+  const Item = slots?.item ?? _TreeItem.TreeItem;
+  const _useSlotProps = (0, _useSlotProps2.default)({
+      elementType: Item,
+      externalSlotProps: slotProps?.item,
+      additionalProps: {
+        itemId,
+        id,
+        label
+      },
+      ownerState: {
+        itemId,
+        label
+      }
+    }),
+    itemProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
+  const children = React.useMemo(() => itemsToRender ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItems, {
+    itemsToRender: itemsToRender,
+    slots: slots,
+    slotProps: slotProps
+  }) : null, [itemsToRender, slots, slotProps]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, (0, _extends2.default)({}, itemProps, {
+    children: children
+  }));
+}
+function RichTreeViewItems(props) {
+  const {
+    itemsToRender,
+    slots,
+    slotProps
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: itemsToRender.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedTreeItem, {
+      slots: slots,
+      slotProps: slotProps,
+      label: item.label,
+      id: item.id,
+      itemId: item.itemId,
+      itemsToRender: item.children
+    }, item.itemId))
+  });
+}

package/node/internals/corePlugins/useTreeViewId/useTreeViewId.js

@@ -1,28 +1,49 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTreeViewId = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useTreeViewId = require("./useTreeViewId.utils");
 const useTreeViewId = ({
-  params
+  params,
+  state,
+  setState
 }) => {
-  const treeId = (0, _useId.default)(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 (0, _extends2.default)({}, prevState, {
+        id: (0, _extends2.default)({}, prevState.id, {
+          treeId: params.id ?? (0, _useTreeViewId.createTreeViewDefaultId)()
+        })
+      });
+    });
+  }, [setState, params.id]);
   return {
     getRootProps: () => ({
       id: treeId
     }),
-    instance: {
-      getTreeItemIdAttribute
+    contextValue: {
+      treeId
     }
   };
 };
 exports.useTreeViewId = useTreeViewId;
 useTreeViewId.params = {
   id: true
-};
+};
+useTreeViewId.getInitialState = ({
+  id
+}) => ({
+  id: {
+    treeId: id ?? (0, _useTreeViewId.createTreeViewDefaultId)()
+  }
+});

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateTreeItemIdAttribute = exports.createTreeViewDefaultId = void 0;
+let globalTreeViewDefaultId = 0;
+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.
+ */
+exports.createTreeViewDefaultId = createTreeViewDefaultId;
+const generateTreeItemIdAttribute = ({
+  id,
+  treeId = '',
+  itemId
+}) => {
+  if (id != null) {
+    return id;
+  }
+  return `${treeId}-${itemId}`;
+};
+exports.generateTreeItemIdAttribute = generateTreeItemIdAttribute;

package/node/internals/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "RichTreeViewItems", {
+  enumerable: true,
+  get: function () {
+    return _RichTreeViewItems.RichTreeViewItems;
+  }
+});
 Object.defineProperty(exports, "TREE_VIEW_ROOT_PARENT_ID", {
   enumerable: true,
   get: function () {
@@ -95,6 +101,7 @@ Object.defineProperty(exports, "useTreeViewSelection", {
 });
 var _useTreeView = require("./useTreeView");
 var _TreeViewProvider = require("./TreeViewProvider");
+var _RichTreeViewItems = require("./components/RichTreeViewItems");
 var _useInstanceEventHandler = require("./hooks/useInstanceEventHandler");
 var _useTreeViewExpansion = require("./plugins/useTreeViewExpansion");
 var _useTreeViewSelection = require("./plugins/useTreeViewSelection");

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

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

package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -72,7 +72,7 @@ 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/node/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
 var _useTreeViewItems = require("./useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
+var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children"];
 const updateItemsState = ({
@@ -118,7 +119,11 @@ const useTreeViewItems = ({
     if (itemMeta == null) {
       return null;
     }
-    return document.getElementById(instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute));
+    return document.getElementById((0, _useTreeViewId.generateTreeItemIdAttribute)({
+      treeId: state.id.treeId,
+      itemId,
+      id: itemMeta.idAttribute
+    }));
   };
   const isItemNavigable = itemId => {
     if (params.disabledItemsFocusable) {
@@ -209,7 +214,9 @@ useTreeViewItems.getInitialState = params => ({
     getItemLabel: params.getItemLabel
   })
 });
-useTreeViewItems.getDefaultizedParams = params => (0, _extends2.default)({}, params, {
+useTreeViewItems.getDefaultizedParams = ({
+  params
+}) => (0, _extends2.default)({}, params, {
   disabledItemsFocusable: params.disabledItemsFocusable ?? false,
   itemChildrenIndentation: params.itemChildrenIndentation ?? '12px'
 });

package/node/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -16,6 +16,7 @@ var _TreeViewProvider = require("../../TreeViewProvider");
 var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
+var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useTreeViewJSXItems = ({
   instance,
@@ -107,7 +108,8 @@ const useTreeViewJSXItemsItemPlugin = ({
   contentRef
 }) => {
   const {
-    instance
+    instance,
+    treeId
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const {
     children,
@@ -131,12 +133,16 @@ const useTreeViewJSXItemsItemPlugin = ({
 
   // Prevent any flashing
   (0, _useEnhancedEffect.default)(() => {
-    const idAttributeWithDefault = instance.getTreeItemIdAttribute(itemId, id);
-    registerChild(idAttributeWithDefault, itemId);
+    const idAttribute = (0, _useTreeViewId.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/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -161,6 +161,9 @@ 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 = (0, _tree.getNextNavigableItem)(instance, itemId);
             if (nextItemId) {
@@ -178,6 +181,9 @@ 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();