@mui/x-tree-view 7.5.1 → 7.6.1

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;

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

@@ -4,6 +4,7 @@ import { extractEventHandlers } from '@mui/base/utils';
 import useForkRef from '@mui/utils/useForkRef';
 import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
 import { useTreeItem2Utils } from '../hooks/useTreeItem2Utils';
+import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
 export const useTreeItem2 = parameters => {
   const {
     runItemPlugins,
@@ -13,9 +14,11 @@ export const useTreeItem2 = parameters => {
       checkboxSelection
     },
     disabledItemsFocusable,
+    indentationAtItemLevel,
     instance,
     publicAPI
   } = useTreeViewContext();
+  const depthContext = React.useContext(TreeViewItemDepthContext);
   const {
     id,
     itemId,
@@ -106,7 +109,7 @@ export const useTreeItem2 = parameters => {
        */
       ariaSelected = true;
     }
-    return _extends({}, externalEventHandlers, {
+    const response = _extends({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
       tabIndex: instance.canItemBeTabbed(itemId) ? 0 : -1,
@@ -119,15 +122,25 @@ export const useTreeItem2 = parameters => {
       onBlur: createRootHandleBlur(externalEventHandlers),
       onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
+    if (indentationAtItemLevel) {
+      response.style = {
+        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
+      };
+    }
+    return response;
   };
   const getContentProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    return _extends({}, externalEventHandlers, externalProps, {
+    const response = _extends({}, externalEventHandlers, externalProps, {
       ref: contentRef,
       onClick: createContentHandleClick(externalEventHandlers),
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
+    if (indentationAtItemLevel) {
+      response.indentationAtItemLevel = true;
+    }
+    return response;
   };
   const getCheckboxProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
@@ -153,13 +166,17 @@ export const useTreeItem2 = parameters => {
   };
   const getGroupTransitionProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    return _extends({}, externalEventHandlers, {
+    const response = _extends({}, externalEventHandlers, {
       unmountOnExit: true,
       component: 'ul',
       role: 'group',
       in: status.expanded,
       children
     }, externalProps);
+    if (indentationAtItemLevel) {
+      response.indentationAtItemLevel = true;
+    }
+    return response;
   };
   return {
     getRootProps,

package/node/RichTreeView/RichTreeView.js

@@ -189,6 +189,14 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: _propTypes.default.arrayOf(_propTypes.default.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.default.shape({
+    indentationAtItemLevel: _propTypes.default.bool
+  }),
   /**
    * Used to determine the id of a given item.
    *
@@ -219,6 +227,12 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * @returns {boolean} `true` if the item should be disabled.
    */
   isItemDisabled: _propTypes.default.func,
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   items: _propTypes.default.array.isRequired,
   /**
    * If `true`, `ctrl` and `shift` will trigger multiselect.

package/node/SimpleTreeView/SimpleTreeView.js

@@ -151,11 +151,25 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: _propTypes.default.arrayOf(_propTypes.default.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.default.shape({
+    indentationAtItemLevel: _propTypes.default.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.default.string,
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   /**
    * If `true`, `ctrl` and `shift` will trigger multiselect.
    * @default false

package/node/TreeItem/TreeItem.js

@@ -13,6 +13,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
 var _utils = require("@mui/base/utils");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _createStyled = require("@mui/system/createStyled");
 var _styles = require("@mui/material/styles");
 var _unsupportedProp = _interopRequireDefault(require("@mui/utils/unsupportedProp"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
@@ -22,6 +23,7 @@ var _treeItemClasses = require("./treeItemClasses");
 var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
 var _icons = require("../icons");
 var _TreeItem2Provider = require("../TreeItem2Provider");
+var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "itemId", "id", "label", "onClick", "onMouseDown", "onFocus", "onBlur", "onKeyDown"],
   _excluded2 = ["ownerState"],
@@ -66,7 +68,8 @@ const StyledTreeItemContent = (0, _styles.styled)(_TreeItemContent.TreeItemConte
     }, styles.label && {
       [`& .${_treeItemClasses.treeItemClasses.label}`]: styles.label
     }];
-  }
+  },
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'indentationAtItemLevel'
 })(({
   theme
 }) => ({
@@ -126,16 +129,33 @@ const StyledTreeItemContent = (0, _styles.styled)(_TreeItemContent.TreeItemConte
   }, theme.typography.body1),
   [`& .${_treeItemClasses.treeItemClasses.checkbox}`]: {
     padding: 0
-  }
+  },
+  variants: [{
+    props: {
+      indentationAtItemLevel: true
+    },
+    style: {
+      paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`
+    }
+  }]
 }));
 const TreeItemGroup = (0, _styles.styled)(_Collapse.default, {
   name: 'MuiTreeItem',
   slot: 'GroupTransition',
-  overridesResolver: (props, styles) => styles.groupTransition
+  overridesResolver: (props, styles) => styles.groupTransition,
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'indentationAtItemLevel'
 })({
   margin: 0,
   padding: 0,
-  paddingLeft: 12
+  paddingLeft: 'var(--TreeView-itemChildrenIndentation)',
+  variants: [{
+    props: {
+      indentationAtItemLevel: true
+    },
+    style: {
+      paddingLeft: 0
+    }
+  }]
 });
 
 /**
@@ -156,8 +176,10 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       multiSelect
     },
     disabledItemsFocusable,
+    indentationAtItemLevel,
     instance
   } = (0, _useTreeViewContext.useTreeViewContext)();
+  const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiTreeItem'
@@ -206,7 +228,8 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     expanded,
     focused,
     selected,
-    disabled
+    disabled,
+    indentationAtItemLevel
   });
   const classes = useUtilityClasses(ownerState);
   const GroupTransition = slots.groupTransition ?? undefined;
@@ -214,12 +237,14 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     elementType: GroupTransition,
     ownerState: {},
     externalSlotProps: inSlotProps?.groupTransition,
-    additionalProps: {
+    additionalProps: (0, _extends2.default)({
       unmountOnExit: true,
       in: expanded,
       component: 'ul',
       role: 'group'
-    },
+    }, indentationAtItemLevel ? {
+      indentationAtItemLevel: true
+    } : {}),
     className: classes.groupTransition
   });
   const ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
@@ -300,6 +325,9 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       onBlur: handleBlur,
       onKeyDown: handleKeyDown,
       ref: handleRootRef,
+      style: indentationAtItemLevel ? (0, _extends2.default)({}, other.style, {
+        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
+      }) : other.style,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTreeItemContent, (0, _extends2.default)({
         as: ContentComponent,
         classes: {

package/node/TreeItem2/TreeItem2.js

@@ -15,7 +15,7 @@ var _styles = require("@mui/material/styles");
 var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
 var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
 var _utils = require("@mui/base/utils");
-var _system = require("@mui/system");
+var _createStyled = require("@mui/system/createStyled");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useTreeItem = require("../useTreeItem2");
 var _TreeItem = require("../TreeItem");
@@ -40,7 +40,7 @@ const TreeItem2Content = exports.TreeItem2Content = (0, _styles.styled)('div', {
   name: 'MuiTreeItem2',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content,
-  shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'status'
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'status' && prop !== 'indentationAtItemLevel'
 })(({
   theme
 }) => ({
@@ -61,12 +61,14 @@ const TreeItem2Content = exports.TreeItem2Content = (0, _styles.styled)('div', {
       backgroundColor: 'transparent'
     }
   },
-  [`& .${_TreeItem.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,
@@ -134,11 +136,20 @@ const TreeItem2IconContainer = exports.TreeItem2IconContainer = (0, _styles.styl
 const TreeItem2GroupTransition = exports.TreeItem2GroupTransition = (0, _styles.styled)(_Collapse.default, {
   name: 'MuiTreeItem2',
   slot: 'GroupTransition',
-  overridesResolver: (props, styles) => styles.groupTransition
+  overridesResolver: (props, styles) => styles.groupTransition,
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'indentationAtItemLevel'
 })({
   margin: 0,
   padding: 0,
-  paddingLeft: 12
+  paddingLeft: 'var(--TreeView-itemChildrenIndentation)',
+  variants: [{
+    props: {
+      indentationAtItemLevel: true
+    },
+    style: {
+      paddingLeft: 0
+    }
+  }]
 });
 const TreeItem2Checkbox = exports.TreeItem2Checkbox = (0, _styles.styled)( /*#__PURE__*/React.forwardRef((props, ref) => {
   const {

package/node/TreeItem2Provider/TreeItem2Provider.js

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

package/node/TreeView/TreeView.js

@@ -124,11 +124,25 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: _propTypes.default.arrayOf(_propTypes.default.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.default.shape({
+    indentationAtItemLevel: _propTypes.default.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.default.string,
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   /**
    * If `true`, `ctrl` and `shift` will trigger multiselect.
    * @default false

package/node/index.js

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

package/node/internals/TreeViewItemDepthContext/TreeViewItemDepthContext.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewItemDepthContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const TreeViewItemDepthContext = exports.TreeViewItemDepthContext = /*#__PURE__*/React.createContext(() => -1);
+if (process.env.NODE_ENV !== 'production') {
+  TreeViewItemDepthContext.displayName = 'TreeViewItemDepthContext';
+}

package/node/internals/TreeViewItemDepthContext/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TreeViewItemDepthContext", {
+  enumerable: true,
+  get: function () {
+    return _TreeViewItemDepthContext.TreeViewItemDepthContext;
+  }
+});
+var _TreeViewItemDepthContext = require("./TreeViewItemDepthContext");

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

@@ -12,19 +12,17 @@ var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"))
 var _useInstanceEventHandler = require("../../hooks/useInstanceEventHandler");
 var _utils = require("../../utils/utils");
 var _tree = require("../../utils/tree");
+var _useTreeViewSelection = require("../useTreeViewSelection/useTreeViewSelection.utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useTabbableItemId = (instance, selectedItems) => {
-  const isItemVisible = itemId => {
+const useDefaultFocusableItemId = (instance, selectedItems) => {
+  let tabbableItemId = (0, _useTreeViewSelection.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 = (0, _tree.getFirstNavigableItem)(instance);
   }
@@ -38,7 +36,7 @@ const useTreeViewFocus = ({
   models,
   rootRef
 }) => {
-  const tabbableItemId = useTabbableItemId(instance, models.selectedItems.value);
+  const defaultFocusableItemId = useDefaultFocusableItemId(instance, models.selectedItems.value);
   const setFocusedItemId = (0, _useEventCallback.default)(itemId => {
     const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedItemId) : itemId;
     if (state.focusedItemId !== cleanItemId) {
@@ -70,18 +68,6 @@ const useTreeViewFocus = ({
       innerFocusItem(event, itemId);
     }
   });
-  const focusDefaultItem = (0, _useEventCallback.default)(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 = (0, _tree.getFirstNavigableItem)(instance);
-    }
-    innerFocusItem(event, itemToFocusId);
-  });
   const removeFocusedItem = (0, _useEventCallback.default)(() => {
     if (state.focusedItemId == null) {
       return;
@@ -95,12 +81,12 @@ const useTreeViewFocus = ({
     }
     setFocusedItemId(null);
   });
-  const canItemBeTabbed = itemId => itemId === tabbableItemId;
+  const canItemBeTabbed = itemId => itemId === defaultFocusableItemId;
   (0, _useInstanceEventHandler.useInstanceEventHandler)(instance, 'removeItem', ({
     id
   }) => {
     if (state.focusedItemId === id) {
-      instance.focusDefaultItem(null);
+      innerFocusItem(null, defaultFocusableItemId);
     }
   });
   const createRootHandleFocus = otherHandlers => event => {
@@ -111,7 +97,7 @@ 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 {
@@ -125,7 +111,6 @@ const useTreeViewFocus = ({
       isItemFocused,
       canItemBeTabbed,
       focusItem,
-      focusDefaultItem,
       removeFocusedItem
     }
   };