@mui/x-tree-view 7.5.1 → 7.6.0

package/internals/utils/extractPluginParamsFromProps.js

@@ -1,11 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "apiRef"];
+const _excluded = ["slots", "slotProps", "apiRef", "experimentalFeatures"];
 export const extractPluginParamsFromProps = _ref => {
   let {
       props: {
         slots,
         slotProps,
-        apiRef
+        apiRef,
+        experimentalFeatures
       },
       plugins,
       rootRef
@@ -20,6 +21,7 @@ export const extractPluginParamsFromProps = _ref => {
     rootRef,
     slots: slots ?? {},
     slotProps: slotProps ?? {},
+    experimentalFeatures: experimentalFeatures ?? {},
     apiRef
   };
   const otherProps = {};

package/internals/utils/tree.js

@@ -18,7 +18,24 @@ export const getPreviousNavigableItem = (instance, itemId) => {
   if (itemIndex === 0) {
     return itemMeta.parentId;
   }
-  let currentItemId = siblings[itemIndex - 1];
+
+  // Finds the previous navigable sibling.
+  let previousNavigableSiblingIndex = itemIndex - 1;
+  while (!instance.isItemNavigable(siblings[previousNavigableSiblingIndex]) && previousNavigableSiblingIndex >= 0) {
+    previousNavigableSiblingIndex -= 1;
+  }
+  if (previousNavigableSiblingIndex === -1) {
+    // If we are at depth 0, then it means all the items above the current item are not navigable.
+    if (itemMeta.parentId == null) {
+      return null;
+    }
+
+    // Otherwise, we can try to go up a level and find the previous navigable item.
+    return getPreviousNavigableItem(instance, itemMeta.parentId);
+  }
+
+  // Finds the last navigable ancestor of the previous navigable sibling.
+  let currentItemId = siblings[previousNavigableSiblingIndex];
   let lastNavigableChild = getLastNavigableItemInArray(instance, instance.getItemOrderedChildrenIds(currentItemId));
   while (instance.isItemExpanded(currentItemId) && lastNavigableChild != null) {
     currentItemId = lastNavigableChild;

package/modern/RichTreeView/RichTreeView.js

@@ -180,6 +180,14 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Unstable features, breaking changes might be introduced.
+   * For each feature, if the flag is not explicitly set to `true`,
+   * the feature will be fully disabled and any property / method call will not have any effect.
+   */
+  experimentalFeatures: PropTypes.shape({
+    indentationAtItemLevel: PropTypes.bool
+  }),
   /**
    * Used to determine the id of a given item.
    *
@@ -210,6 +218,12 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * @returns {boolean} `true` if the item should be disabled.
    */
   isItemDisabled: PropTypes.func,
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   items: PropTypes.array.isRequired,
   /**
    * If `true`, `ctrl` and `shift` will trigger multiselect.

package/modern/SimpleTreeView/SimpleTreeView.js

@@ -142,11 +142,25 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Unstable features, breaking changes might be introduced.
+   * For each feature, if the flag is not explicitly set to `true`,
+   * the feature will be fully disabled and any property / method call will not have any effect.
+   */
+  experimentalFeatures: PropTypes.shape({
+    indentationAtItemLevel: PropTypes.bool
+  }),
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: PropTypes.string,
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * If `true`, `ctrl` and `shift` will trigger multiselect.
    * @default false

package/modern/TreeItem/TreeItem.js

@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import Collapse from '@mui/material/Collapse';
 import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
 import useForkRef from '@mui/utils/useForkRef';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import unsupportedProp from '@mui/utils/unsupportedProp';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
@@ -19,6 +20,7 @@ import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
 import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
 import { TreeItem2Provider } from '../TreeItem2Provider';
+import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -57,7 +59,8 @@ const StyledTreeItemContent = styled(TreeItemContent, {
     }, styles.label && {
       [`& .${treeItemClasses.label}`]: styles.label
     }];
-  }
+  },
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'indentationAtItemLevel'
 })(({
   theme
 }) => ({
@@ -117,16 +120,33 @@ const StyledTreeItemContent = styled(TreeItemContent, {
   }, theme.typography.body1),
   [`& .${treeItemClasses.checkbox}`]: {
     padding: 0
-  }
+  },
+  variants: [{
+    props: {
+      indentationAtItemLevel: true
+    },
+    style: {
+      paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`
+    }
+  }]
 }));
 const TreeItemGroup = styled(Collapse, {
   name: 'MuiTreeItem',
   slot: 'GroupTransition',
-  overridesResolver: (props, styles) => styles.groupTransition
+  overridesResolver: (props, styles) => styles.groupTransition,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'indentationAtItemLevel'
 })({
   margin: 0,
   padding: 0,
-  paddingLeft: 12
+  paddingLeft: 'var(--TreeView-itemChildrenIndentation)',
+  variants: [{
+    props: {
+      indentationAtItemLevel: true
+    },
+    style: {
+      paddingLeft: 0
+    }
+  }]
 });
 
 /**
@@ -147,8 +167,10 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       multiSelect
     },
     disabledItemsFocusable,
+    indentationAtItemLevel,
     instance
   } = useTreeViewContext();
+  const depthContext = React.useContext(TreeViewItemDepthContext);
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTreeItem'
@@ -197,7 +219,8 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     expanded,
     focused,
     selected,
-    disabled
+    disabled,
+    indentationAtItemLevel
   });
   const classes = useUtilityClasses(ownerState);
   const GroupTransition = slots.groupTransition ?? undefined;
@@ -205,12 +228,14 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     elementType: GroupTransition,
     ownerState: {},
     externalSlotProps: inSlotProps?.groupTransition,
-    additionalProps: {
+    additionalProps: _extends({
       unmountOnExit: true,
       in: expanded,
       component: 'ul',
       role: 'group'
-    },
+    }, indentationAtItemLevel ? {
+      indentationAtItemLevel: true
+    } : {}),
     className: classes.groupTransition
   });
   const ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
@@ -291,6 +316,9 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       onBlur: handleBlur,
       onKeyDown: handleKeyDown,
       ref: handleRootRef,
+      style: indentationAtItemLevel ? _extends({}, other.style, {
+        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
+      }) : other.style,
       children: [/*#__PURE__*/_jsx(StyledTreeItemContent, _extends({
         as: ContentComponent,
         classes: {

package/modern/TreeItem2/TreeItem2.js

@@ -10,10 +10,10 @@ import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import Collapse from '@mui/material/Collapse';
 import MuiCheckbox from '@mui/material/Checkbox';
 import { useSlotProps } from '@mui/base/utils';
-import { shouldForwardProp } from '@mui/system';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import composeClasses from '@mui/utils/composeClasses';
 import { unstable_useTreeItem2 as useTreeItem2 } from '../useTreeItem2';
-import { getTreeItemUtilityClass, treeItemClasses } from '../TreeItem';
+import { getTreeItemUtilityClass } from '../TreeItem';
 import { TreeItem2Icon } from '../TreeItem2Icon';
 import { TreeItem2Provider } from '../TreeItem2Provider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -31,7 +31,7 @@ export const TreeItem2Content = styled('div', {
   name: 'MuiTreeItem2',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content,
-  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'status'
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'status' && prop !== 'indentationAtItemLevel'
 })(({
   theme
 }) => ({
@@ -52,12 +52,14 @@ export const TreeItem2Content = styled('div', {
       backgroundColor: 'transparent'
     }
   },
-  [`& .${treeItemClasses.groupTransition}`]: {
-    margin: 0,
-    padding: 0,
-    paddingLeft: 12
-  },
   variants: [{
+    props: {
+      indentationAtItemLevel: true
+    },
+    style: {
+      paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`
+    }
+  }, {
     props: ({
       status
     }) => status.disabled,
@@ -125,11 +127,20 @@ export const TreeItem2IconContainer = styled('div', {
 export const TreeItem2GroupTransition = styled(Collapse, {
   name: 'MuiTreeItem2',
   slot: 'GroupTransition',
-  overridesResolver: (props, styles) => styles.groupTransition
+  overridesResolver: (props, styles) => styles.groupTransition,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'indentationAtItemLevel'
 })({
   margin: 0,
   padding: 0,
-  paddingLeft: 12
+  paddingLeft: 'var(--TreeView-itemChildrenIndentation)',
+  variants: [{
+    props: {
+      indentationAtItemLevel: true
+    },
+    style: {
+      paddingLeft: 0
+    }
+  }]
 });
 export const TreeItem2Checkbox = styled( /*#__PURE__*/React.forwardRef((props, ref) => {
   const {

package/modern/TreeItem2Provider/TreeItem2Provider.js

@@ -6,11 +6,13 @@ function TreeItem2Provider(props) {
     itemId
   } = props;
   const {
-    wrapItem
+    wrapItem,
+    instance
   } = useTreeViewContext();
   return wrapItem({
     children,
-    itemId
+    itemId,
+    instance
   });
 }
 TreeItem2Provider.propTypes = {

package/modern/TreeView/TreeView.js

@@ -115,11 +115,25 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Unstable features, breaking changes might be introduced.
+   * For each feature, if the flag is not explicitly set to `true`,
+   * the feature will be fully disabled and any property / method call will not have any effect.
+   */
+  experimentalFeatures: PropTypes.shape({
+    indentationAtItemLevel: PropTypes.bool
+  }),
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: PropTypes.string,
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * If `true`, `ctrl` and `shift` will trigger multiselect.
    * @default false

package/modern/index.js

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

package/modern/internals/TreeViewItemDepthContext/TreeViewItemDepthContext.js

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

package/modern/internals/TreeViewItemDepthContext/index.js

@@ -0,0 +1 @@
+export { TreeViewItemDepthContext } from './TreeViewItemDepthContext';

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

@@ -5,17 +5,15 @@ import ownerDocument from '@mui/utils/ownerDocument';
 import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler';
 import { getActiveElement } from '../../utils/utils';
 import { getFirstNavigableItem } from '../../utils/tree';
-const useTabbableItemId = (instance, selectedItems) => {
-  const isItemVisible = itemId => {
+import { convertSelectedItemsToArray } from '../useTreeViewSelection/useTreeViewSelection.utils';
+const useDefaultFocusableItemId = (instance, selectedItems) => {
+  let tabbableItemId = convertSelectedItemsToArray(selectedItems).find(itemId => {
+    if (!instance.isItemNavigable(itemId)) {
+      return false;
+    }
     const itemMeta = instance.getItemMeta(itemId);
     return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
-  };
-  let tabbableItemId;
-  if (Array.isArray(selectedItems)) {
-    tabbableItemId = selectedItems.find(isItemVisible);
-  } else if (selectedItems != null && isItemVisible(selectedItems)) {
-    tabbableItemId = selectedItems;
-  }
+  });
   if (tabbableItemId == null) {
     tabbableItemId = getFirstNavigableItem(instance);
   }
@@ -29,7 +27,7 @@ export const useTreeViewFocus = ({
   models,
   rootRef
 }) => {
-  const tabbableItemId = useTabbableItemId(instance, models.selectedItems.value);
+  const defaultFocusableItemId = useDefaultFocusableItemId(instance, models.selectedItems.value);
   const setFocusedItemId = useEventCallback(itemId => {
     const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedItemId) : itemId;
     if (state.focusedItemId !== cleanItemId) {
@@ -61,18 +59,6 @@ export const useTreeViewFocus = ({
       innerFocusItem(event, itemId);
     }
   });
-  const focusDefaultItem = useEventCallback(event => {
-    let itemToFocusId;
-    if (Array.isArray(models.selectedItems.value)) {
-      itemToFocusId = models.selectedItems.value.find(isItemVisible);
-    } else if (models.selectedItems.value != null && isItemVisible(models.selectedItems.value)) {
-      itemToFocusId = models.selectedItems.value;
-    }
-    if (itemToFocusId == null) {
-      itemToFocusId = getFirstNavigableItem(instance);
-    }
-    innerFocusItem(event, itemToFocusId);
-  });
   const removeFocusedItem = useEventCallback(() => {
     if (state.focusedItemId == null) {
       return;
@@ -86,12 +72,12 @@ export const useTreeViewFocus = ({
     }
     setFocusedItemId(null);
   });
-  const canItemBeTabbed = itemId => itemId === tabbableItemId;
+  const canItemBeTabbed = itemId => itemId === defaultFocusableItemId;
   useInstanceEventHandler(instance, 'removeItem', ({
     id
   }) => {
     if (state.focusedItemId === id) {
-      instance.focusDefaultItem(null);
+      innerFocusItem(null, defaultFocusableItemId);
     }
   });
   const createRootHandleFocus = otherHandlers => event => {
@@ -102,7 +88,7 @@ export const useTreeViewFocus = ({
 
     // if the event bubbled (which is React specific) we don't want to steal focus
     if (event.target === event.currentTarget) {
-      instance.focusDefaultItem(event);
+      innerFocusItem(event, defaultFocusableItemId);
     }
   };
   return {
@@ -116,7 +102,6 @@ export const useTreeViewFocus = ({
       isItemFocused,
       canItemBeTabbed,
       focusItem,
-      focusDefaultItem,
       removeFocusedItem
     }
   };

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

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './useTreeViewItems.utils';
+import { TreeViewItemDepthContext } from '../../TreeViewItemDepthContext';
+import { jsx as _jsx } from "react/jsx-runtime";
 const updateItemsState = ({
   items,
   isItemDisabled,
@@ -13,7 +15,7 @@ const updateItemsState = ({
   const itemOrderedChildrenIds = {
     [TREE_VIEW_ROOT_PARENT_ID]: []
   };
-  const processItem = (item, parentId) => {
+  const processItem = (item, depth, parentId) => {
     const id = getItemId ? getItemId(item) : item.id;
     if (id == null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
@@ -31,7 +33,8 @@ const updateItemsState = ({
       parentId,
       idAttribute: undefined,
       expandable: !!item.children?.length,
-      disabled: isItemDisabled ? isItemDisabled(item) : false
+      disabled: isItemDisabled ? isItemDisabled(item) : false,
+      depth
     };
     itemMap[id] = item;
     itemOrderedChildrenIds[id] = [];
@@ -40,9 +43,9 @@ const updateItemsState = ({
       itemOrderedChildrenIds[parentIdWithDefault] = [];
     }
     itemOrderedChildrenIds[parentIdWithDefault].push(id);
-    item.children?.forEach(child => processItem(child, id));
+    item.children?.forEach(child => processItem(child, depth + 1, id));
   };
-  items.forEach(item => processItem(item, null));
+  items.forEach(item => processItem(item, 0, null));
   const itemChildrenIndexes = {};
   Object.keys(itemOrderedChildrenIds).forEach(parentId => {
     itemChildrenIndexes[parentId] = buildSiblingIndexes(itemOrderedChildrenIds[parentId]);
@@ -58,7 +61,8 @@ export const useTreeViewItems = ({
   instance,
   params,
   state,
-  setState
+  setState,
+  experimentalFeatures
 }) => {
   const getItemMeta = React.useCallback(itemId => state.items.itemMetaMap[itemId], [state.items.itemMetaMap]);
   const getItem = React.useCallback(itemId => state.items.itemMap[itemId], [state.items.itemMap]);
@@ -135,6 +139,11 @@ export const useTreeViewItems = ({
     return state.items.itemOrderedChildrenIds[TREE_VIEW_ROOT_PARENT_ID].map(getPropsFromItemId);
   };
   return {
+    getRootProps: () => ({
+      style: {
+        '--TreeView-itemChildrenIndentation': typeof params.itemChildrenIndentation === 'number' ? `${params.itemChildrenIndentation}px` : params.itemChildrenIndentation
+      }
+    }),
     publicAPI: {
       getItem
     },
@@ -150,7 +159,8 @@ export const useTreeViewItems = ({
       areItemUpdatesPrevented
     },
     contextValue: {
-      disabledItemsFocusable: params.disabledItemsFocusable
+      disabledItemsFocusable: params.disabledItemsFocusable,
+      indentationAtItemLevel: experimentalFeatures.indentationAtItemLevel ?? false
     }
   };
 };
@@ -163,12 +173,23 @@ useTreeViewItems.getInitialState = params => ({
   })
 });
 useTreeViewItems.getDefaultizedParams = params => _extends({}, params, {
-  disabledItemsFocusable: params.disabledItemsFocusable ?? false
+  disabledItemsFocusable: params.disabledItemsFocusable ?? false,
+  itemChildrenIndentation: params.itemChildrenIndentation ?? '12px'
 });
+useTreeViewItems.wrapRoot = ({
+  children,
+  instance
+}) => {
+  return /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
+    value: itemId => instance.getItemMeta(itemId)?.depth ?? 0,
+    children: children
+  });
+};
 useTreeViewItems.params = {
   disabledItemsFocusable: true,
   items: true,
   isItemDisabled: true,
   getItemLabel: true,
-  getItemId: true
+  getItemId: true,
+  itemChildrenIndentation: true
 };

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

@@ -7,6 +7,7 @@ import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
 import { useTreeViewContext } from '../../TreeViewProvider/useTreeViewContext';
 import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from '../../TreeViewProvider/TreeViewChildrenItemProvider';
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from '../useTreeViewItems/useTreeViewItems.utils';
+import { TreeViewItemDepthContext } from '../../TreeViewItemDepthContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useTreeViewJSXItems = ({
   instance,
@@ -33,6 +34,23 @@ export const useTreeViewJSXItems = ({
         })
       });
     });
+    return () => {
+      setState(prevState => {
+        const newItemMetaMap = _extends({}, prevState.items.itemMetaMap);
+        const newItemMap = _extends({}, prevState.items.itemMap);
+        delete newItemMetaMap[item.id];
+        delete newItemMap[item.id];
+        return _extends({}, prevState, {
+          items: _extends({}, prevState.items, {
+            itemMetaMap: newItemMetaMap,
+            itemMap: newItemMap
+          })
+        });
+      });
+      publishTreeViewEvent(instance, 'removeItem', {
+        id: item.id
+      });
+    };
   });
   const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
     const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
@@ -47,23 +65,6 @@ export const useTreeViewJSXItems = ({
       })
     }));
   };
-  const removeJSXItem = useEventCallback(itemId => {
-    setState(prevState => {
-      const newItemMetaMap = _extends({}, prevState.items.itemMetaMap);
-      const newItemMap = _extends({}, prevState.items.itemMap);
-      delete newItemMetaMap[itemId];
-      delete newItemMap[itemId];
-      return _extends({}, prevState, {
-        items: _extends({}, prevState.items, {
-          itemMetaMap: newItemMetaMap,
-          itemMap: newItemMap
-        })
-      });
-    });
-    publishTreeViewEvent(instance, 'removeItem', {
-      id: itemId
-    });
-  });
   const mapFirstCharFromJSX = useEventCallback((itemId, firstChar) => {
     instance.updateFirstCharMap(firstCharMap => {
       firstCharMap[itemId] = firstChar;
@@ -80,7 +81,6 @@ export const useTreeViewJSXItems = ({
   return {
     instance: {
       insertJSXItem,
-      removeJSXItem,
       setJSXItemsOrderedChildrenIds,
       mapFirstCharFromJSX
     }
@@ -129,14 +129,13 @@ const useTreeViewJSXItemsItemPlugin = ({
     };
   }, [instance, registerChild, unregisterChild, itemId, id]);
   React.useEffect(() => {
-    instance.insertJSXItem({
+    return instance.insertJSXItem({
       id: itemId,
       idAttribute: id,
       parentId,
       expandable,
       disabled
     });
-    return () => instance.removeJSXItem(itemId);
   }, [instance, parentId, itemId, expandable, disabled, id]);
   React.useEffect(() => {
     if (label) {
@@ -153,13 +152,23 @@ useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
 useTreeViewJSXItems.wrapItem = ({
   children,
   itemId
-}) => /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
-  itemId: itemId,
-  children: children
-});
+}) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const depthContext = React.useContext(TreeViewItemDepthContext);
+  return /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
+    itemId: itemId,
+    children: /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
+      value: depthContext + 1,
+      children: children
+    })
+  });
+};
 useTreeViewJSXItems.wrapRoot = ({
   children
 }) => /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
-  children: children
+  children: /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
+    value: 0,
+    children: children
+  })
 });
 useTreeViewJSXItems.params = {};

package/modern/internals/useTreeView/useTreeView.js

@@ -48,6 +48,7 @@ export const useTreeView = inParams => {
       params,
       slots: params.slots,
       slotProps: params.slotProps,
+      experimentalFeatures: params.experimentalFeatures,
       state,
       setState,
       rootRef: innerRootRef,
@@ -100,19 +101,23 @@ export const useTreeView = inParams => {
     itemWrappers.forEach(itemWrapper => {
       finalChildren = itemWrapper({
         itemId,
-        children: finalChildren
+        children: finalChildren,
+        instance
       });
     });
     return finalChildren;
   };
-  const rootWrappers = plugins.map(plugin => plugin.wrapRoot).filter(wrapRoot => !!wrapRoot);
+  const rootWrappers = plugins.map(plugin => plugin.wrapRoot).filter(wrapRoot => !!wrapRoot)
+  // The wrappers are reversed to ensure that the first wrapper is the outermost one.
+  .reverse();
   contextValue.wrapRoot = ({
     children
   }) => {
     let finalChildren = children;
     rootWrappers.forEach(rootWrapper => {
       finalChildren = rootWrapper({
-        children: finalChildren
+        children: finalChildren,
+        instance
       });
     });
     return finalChildren;