@mui/x-tree-view 7.1.1 → 7.3.0

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { populateInstance, getNextItem, getFirstItem, getLastItem } from '../../useTreeView/useTreeView.utils';
-import { findOrderInTremauxTree } from './useTreeViewSelection.utils';
+import { getFirstNavigableItem, getLastNavigableItem, getNavigableItemsInRange } from '../../utils/tree';
 export const useTreeViewSelection = ({
   instance,
   params,
@@ -58,16 +57,6 @@ export const useTreeViewSelection = ({
     lastSelectionWasRange.current = false;
     currentRangeSelection.current = [];
   };
-  const getItemsInRange = (itemAId, itemBId) => {
-    const [first, last] = findOrderInTremauxTree(instance, itemAId, itemBId);
-    const items = [first];
-    let current = first;
-    while (current !== last) {
-      current = getNextItem(instance, current);
-      items.push(current);
-    }
-    return items;
-  };
   const handleRangeArrowSelect = (event, items) => {
     let base = models.selectedItems.value.slice();
     const {
@@ -105,7 +94,7 @@ export const useTreeViewSelection = ({
     if (lastSelectionWasRange.current) {
       base = base.filter(id => currentRangeSelection.current.indexOf(id) === -1);
     }
-    let range = getItemsInRange(start, end);
+    let range = getNavigableItemsInRange(instance, start, end);
     range = range.filter(item => !instance.isItemDisabled(item));
     currentRangeSelection.current = range;
     let newSelected = base.concat(range);
@@ -142,7 +131,7 @@ export const useTreeViewSelection = ({
     const start = lastSelectionWasRange.current ? lastSelectedItem.current : itemId;
     instance.selectRange(event, {
       start,
-      end: getFirstItem(instance)
+      end: getFirstNavigableItem(instance)
     });
   };
   const rangeSelectToLast = (event, itemId) => {
@@ -152,20 +141,20 @@ export const useTreeViewSelection = ({
     const start = lastSelectionWasRange.current ? lastSelectedItem.current : itemId;
     instance.selectRange(event, {
       start,
-      end: getLastItem(instance)
+      end: getLastNavigableItem(instance)
     });
   };
-  populateInstance(instance, {
-    isItemSelected,
-    selectItem,
-    selectRange,
-    rangeSelectToLast,
-    rangeSelectToFirst
-  });
   return {
     getRootProps: () => ({
       'aria-multiselectable': params.multiSelect
     }),
+    instance: {
+      isItemSelected,
+      selectItem,
+      selectRange,
+      rangeSelectToLast,
+      rangeSelectToFirst
+    },
     contextValue: {
       selection: {
         multiSelect: params.multiSelect

package/modern/internals/useTreeView/useTreeView.js

@@ -39,12 +39,12 @@ export const useTreeView = inParams => {
   const rootPropsGetters = [];
   const contextValue = {
     publicAPI,
-    instance: instance
+    instance: instance,
+    rootRef: innerRootRef
   };
   const runPlugin = plugin => {
     const pluginResponse = plugin({
       instance,
-      publicAPI,
       params,
       slots: params.slots,
       slotProps: params.slotProps,
@@ -52,10 +52,16 @@ export const useTreeView = inParams => {
       setState,
       rootRef: innerRootRef,
       models
-    }) || {};
+    });
     if (pluginResponse.getRootProps) {
       rootPropsGetters.push(pluginResponse.getRootProps);
     }
+    if (pluginResponse.publicAPI) {
+      Object.assign(publicAPI, pluginResponse.publicAPI);
+    }
+    if (pluginResponse.instance) {
+      Object.assign(instance, pluginResponse.instance);
+    }
     if (pluginResponse.contextValue) {
       Object.assign(contextValue, pluginResponse.contextValue);
     }
@@ -99,6 +105,18 @@ export const useTreeView = inParams => {
     });
     return finalChildren;
   };
+  const rootWrappers = plugins.map(plugin => plugin.wrapRoot).filter(wrapRoot => !!wrapRoot);
+  contextValue.wrapRoot = ({
+    children
+  }) => {
+    let finalChildren = children;
+    rootWrappers.forEach(rootWrapper => {
+      finalChildren = rootWrapper({
+        children: finalChildren
+      });
+    });
+    return finalChildren;
+  };
   const getRootProps = (otherHandlers = {}) => {
     const rootProps = _extends({
       role: 'tree'

package/modern/internals/utils/tree.js

@@ -0,0 +1,137 @@
+const getLastNavigableItemInArray = (instance, items) => {
+  // Equivalent to Array.prototype.findLastIndex
+  let itemIndex = items.length - 1;
+  while (itemIndex >= 0 && !instance.isItemNavigable(items[itemIndex])) {
+    itemIndex -= 1;
+  }
+  if (itemIndex === -1) {
+    return undefined;
+  }
+  return items[itemIndex];
+};
+export const getPreviousNavigableItem = (instance, itemId) => {
+  const itemMeta = instance.getItemMeta(itemId);
+  const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
+  const itemIndex = instance.getItemIndex(itemId);
+
+  // TODO: What should we do if the parent is not navigable?
+  if (itemIndex === 0) {
+    return itemMeta.parentId;
+  }
+  let currentItemId = siblings[itemIndex - 1];
+  let lastNavigableChild = getLastNavigableItemInArray(instance, instance.getItemOrderedChildrenIds(currentItemId));
+  while (instance.isItemExpanded(currentItemId) && lastNavigableChild != null) {
+    currentItemId = lastNavigableChild;
+    lastNavigableChild = instance.getItemOrderedChildrenIds(currentItemId).find(instance.isItemNavigable);
+  }
+  return currentItemId;
+};
+export const getNextNavigableItem = (instance, itemId) => {
+  // If the item is expanded and has some navigable children, return the first of them.
+  if (instance.isItemExpanded(itemId)) {
+    const firstNavigableChild = instance.getItemOrderedChildrenIds(itemId).find(instance.isItemNavigable);
+    if (firstNavigableChild != null) {
+      return firstNavigableChild;
+    }
+  }
+  let itemMeta = instance.getItemMeta(itemId);
+  while (itemMeta != null) {
+    // Try to find the first navigable sibling after the current item.
+    const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
+    const currentItemIndex = instance.getItemIndex(itemMeta.id);
+    if (currentItemIndex < siblings.length - 1) {
+      let nextItemIndex = currentItemIndex + 1;
+      while (!instance.isItemNavigable(siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
+        nextItemIndex += 1;
+      }
+      if (instance.isItemNavigable(siblings[nextItemIndex])) {
+        return siblings[nextItemIndex];
+      }
+    }
+
+    // If the sibling does not exist, go up a level to the parent and try again.
+    itemMeta = instance.getItemMeta(itemMeta.parentId);
+  }
+  return null;
+};
+export const getLastNavigableItem = instance => {
+  let itemId = null;
+  while (itemId == null || instance.isItemExpanded(itemId)) {
+    const children = instance.getItemOrderedChildrenIds(itemId);
+    const lastNavigableChild = getLastNavigableItemInArray(instance, children);
+
+    // The item has no navigable children.
+    if (lastNavigableChild == null) {
+      return itemId;
+    }
+    itemId = lastNavigableChild;
+  }
+  return itemId;
+};
+export const getFirstNavigableItem = instance => instance.getItemOrderedChildrenIds(null).find(instance.isItemNavigable);
+
+/**
+ * This is used to determine the start and end of a selection range so
+ * we can get the items between the two border items.
+ *
+ * It finds the items' common ancestor using
+ * a naive implementation of a lowest common ancestor algorithm
+ * (https://en.wikipedia.org/wiki/Lowest_common_ancestor).
+ * Then compares the ancestor's 2 children that are ancestors of itemA and ItemB
+ * so we can compare their indexes to work out which item comes first in a depth first search.
+ * (https://en.wikipedia.org/wiki/Depth-first_search)
+ *
+ * Another way to put it is which item is shallower in a trémaux tree
+ * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
+ */
+const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
+  if (itemAId === itemBId) {
+    return [itemAId, itemBId];
+  }
+  const itemMetaA = instance.getItemMeta(itemAId);
+  const itemMetaB = instance.getItemMeta(itemBId);
+  if (itemMetaA.parentId === itemMetaB.id || itemMetaB.parentId === itemMetaA.id) {
+    return itemMetaB.parentId === itemMetaA.id ? [itemMetaA.id, itemMetaB.id] : [itemMetaB.id, itemMetaA.id];
+  }
+  const aFamily = [itemMetaA.id];
+  const bFamily = [itemMetaB.id];
+  let aAncestor = itemMetaA.parentId;
+  let bAncestor = itemMetaB.parentId;
+  let aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
+  let bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
+  let continueA = true;
+  let continueB = true;
+  while (!bAncestorIsCommon && !aAncestorIsCommon) {
+    if (continueA) {
+      aFamily.push(aAncestor);
+      aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
+      continueA = aAncestor !== null;
+      if (!aAncestorIsCommon && continueA) {
+        aAncestor = instance.getItemMeta(aAncestor).parentId;
+      }
+    }
+    if (continueB && !aAncestorIsCommon) {
+      bFamily.push(bAncestor);
+      bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
+      continueB = bAncestor !== null;
+      if (!bAncestorIsCommon && continueB) {
+        bAncestor = instance.getItemMeta(bAncestor).parentId;
+      }
+    }
+  }
+  const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
+  const ancestorFamily = instance.getItemOrderedChildrenIds(commonAncestor);
+  const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
+  const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
+  return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [itemAId, itemBId] : [itemBId, itemAId];
+};
+export const getNavigableItemsInRange = (instance, itemAId, itemBId) => {
+  const [first, last] = findOrderInTremauxTree(instance, itemAId, itemBId);
+  const items = [first];
+  let current = first;
+  while (current !== last) {
+    current = getNextNavigableItem(instance, current);
+    items.push(current);
+  }
+  return items;
+};

package/modern/useTreeItem2/useTreeItem2.js

@@ -31,7 +31,7 @@ export const useTreeItem2 = parameters => {
     itemId,
     children
   });
-  const idAttribute = instance.getTreeItemId(itemId, id);
+  const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
   const handleRootRef = useForkRef(rootRef, pluginRootRef);
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);

package/node/TreeItem/TreeItem.js

@@ -278,7 +278,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     onKeyDown?.(event);
     instance.handleItemKeyDown(event, itemId);
   };
-  const idAttribute = instance.getTreeItemId(itemId, id);
+  const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
   const tabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2Provider.TreeItem2Provider, {
     itemId: itemId,

package/node/TreeItem2/TreeItem2.js

@@ -155,7 +155,6 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _TreeItem.getTreeItemUtilityClass, classes);
 };
-
 /**
  *
  * Demos:

package/node/index.js

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

package/node/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewChildrenItemContext = void 0;
+exports.TreeViewChildrenItemProvider = TreeViewChildrenItemProvider;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useTreeViewContext = require("./useTreeViewContext");
+var _jsxRuntime = require("react/jsx-runtime");
+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 && Object.prototype.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 TreeViewChildrenItemContext = exports.TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+  TreeViewChildrenItemContext.displayName = 'TreeViewChildrenItemContext';
+}
+function TreeViewChildrenItemProvider(props) {
+  const {
+    children,
+    itemId = null
+  } = props;
+  const {
+    instance,
+    rootRef
+  } = (0, _useTreeViewContext.useTreeViewContext)();
+  const childrenIdAttrToIdRef = React.useRef(new Map());
+  React.useEffect(() => {
+    if (!rootRef.current) {
+      return;
+    }
+    let idAttr = null;
+    if (itemId == null) {
+      idAttr = rootRef.current.id;
+    } else {
+      // Undefined during 1st render
+      const itemMeta = instance.getItemMeta(itemId);
+      if (itemMeta !== undefined) {
+        idAttr = instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute);
+      }
+    }
+    if (idAttr == null) {
+      return;
+    }
+    const previousChildrenIds = instance.getItemOrderedChildrenIds(itemId ?? null) ?? [];
+    const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${idAttr}"] `}[role="treeitem"]:not(*[id="${idAttr}"] [role="treeitem"] [role="treeitem"])`);
+    const childrenIds = Array.from(childrenElements).map(child => childrenIdAttrToIdRef.current.get(child.id));
+    const hasChanged = childrenIds.length !== previousChildrenIds.length || childrenIds.some((childId, index) => childId !== previousChildrenIds[index]);
+    if (hasChanged) {
+      instance.setJSXItemsOrderedChildrenIds(itemId ?? null, childrenIds);
+    }
+  });
+  const value = React.useMemo(() => ({
+    registerChild: (childIdAttribute, childItemId) => childrenIdAttrToIdRef.current.set(childIdAttribute, childItemId),
+    unregisterChild: childIdAttribute => childrenIdAttrToIdRef.current.delete(childIdAttribute),
+    parentId: itemId
+  }), [itemId]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeViewChildrenItemContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+process.env.NODE_ENV !== "production" ? TreeViewChildrenItemProvider.propTypes = {
+  children: _propTypes.default.node,
+  id: _propTypes.default.string
+} : void 0;

package/node/internals/TreeViewProvider/TreeViewProvider.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.TreeViewProvider = TreeViewProvider;
 var React = _interopRequireWildcard(require("react"));
 var _TreeViewContext = require("./TreeViewContext");
-var _DescendantProvider = require("./DescendantProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 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 && Object.prototype.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; }
@@ -22,8 +21,8 @@ function TreeViewProvider(props) {
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewContext.TreeViewContext.Provider, {
     value: value,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DescendantProvider.DescendantProvider, {
-      children: children
+    children: value.wrapRoot({
+      children
     })
   });
 }

package/node/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js

@@ -6,15 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewInstanceEvents = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _EventManager = require("../../utils/EventManager");
-var _useTreeView = require("../../useTreeView/useTreeView.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 && Object.prototype.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 isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
 };
-const useTreeViewInstanceEvents = ({
-  instance
-}) => {
+const useTreeViewInstanceEvents = () => {
   const [eventManager] = React.useState(() => new _EventManager.EventManager());
   const publishEvent = React.useCallback((...args) => {
     const [name, params, event = {}] = args;
@@ -30,10 +27,12 @@ const useTreeViewInstanceEvents = ({
       eventManager.removeListener(event, handler);
     };
   }, [eventManager]);
-  (0, _useTreeView.populateInstance)(instance, {
-    $$publishEvent: publishEvent,
-    $$subscribeEvent: subscribeEvent
-  });
+  return {
+    instance: {
+      $$publishEvent: publishEvent,
+      $$subscribeEvent: subscribeEvent
+    }
+  };
 };
 exports.useTreeViewInstanceEvents = useTreeViewInstanceEvents;
 useTreeViewInstanceEvents.params = {};

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

@@ -8,12 +8,10 @@ exports.useTreeViewExpansion = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useTreeView = require("../../useTreeView/useTreeView.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 && Object.prototype.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 useTreeViewExpansion = ({
   instance,
-  publicAPI,
   params,
   models
 }) => {
@@ -29,7 +27,7 @@ const useTreeViewExpansion = ({
     models.expandedItems.setControlledValue(value);
   };
   const isItemExpanded = React.useCallback(itemId => expandedItemsMap.has(itemId), [expandedItemsMap]);
-  const isItemExpandable = React.useCallback(itemId => !!instance.getNode(itemId)?.expandable, [instance]);
+  const isItemExpandable = React.useCallback(itemId => !!instance.getItemMeta(itemId)?.expandable, [instance]);
   const toggleItemExpansion = (0, _useEventCallback.default)((event, itemId) => {
     const isExpandedBefore = instance.isItemExpanded(itemId);
     instance.setItemExpansion(event, itemId, !isExpandedBefore);
@@ -51,8 +49,8 @@ const useTreeViewExpansion = ({
     setExpandedItems(event, newExpanded);
   });
   const expandAllSiblings = (event, itemId) => {
-    const node = instance.getNode(itemId);
-    const siblings = instance.getChildrenIds(node.parentId);
+    const itemMeta = instance.getItemMeta(itemId);
+    const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
     const diff = siblings.filter(child => instance.isItemExpandable(child) && !instance.isItemExpanded(child));
     const newExpanded = models.expandedItems.value.concat(diff);
     if (diff.length > 0) {
@@ -64,16 +62,18 @@ const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
-  (0, _useTreeView.populateInstance)(instance, {
-    isItemExpanded,
-    isItemExpandable,
-    setItemExpansion,
-    toggleItemExpansion,
-    expandAllSiblings
-  });
-  (0, _useTreeView.populatePublicAPI)(publicAPI, {
-    setItemExpansion
-  });
+  return {
+    publicAPI: {
+      setItemExpansion
+    },
+    instance: {
+      isItemExpanded,
+      isItemExpandable,
+      setItemExpansion,
+      toggleItemExpansion,
+      expandAllSiblings
+    }
+  };
 };
 exports.useTreeViewExpansion = useTreeViewExpansion;
 useTreeViewExpansion.models = {

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

@@ -9,15 +9,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
-var _useTreeView = require("../../useTreeView/useTreeView.utils");
 var _useInstanceEventHandler = require("../../hooks/useInstanceEventHandler");
 var _utils = require("../../utils/utils");
+var _tree = require("../../utils/tree");
 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 && Object.prototype.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 node = instance.getNode(itemId);
-    return node && (node.parentId == null || instance.isItemExpanded(node.parentId));
+    const itemMeta = instance.getItemMeta(itemId);
+    return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
   };
   let tabbableItemId;
   if (Array.isArray(selectedItems)) {
@@ -26,13 +26,12 @@ const useTabbableItemId = (instance, selectedItems) => {
     tabbableItemId = selectedItems;
   }
   if (tabbableItemId == null) {
-    tabbableItemId = instance.getNavigableChildrenIds(null)[0];
+    tabbableItemId = (0, _tree.getFirstNavigableItem)(instance);
   }
   return tabbableItemId;
 };
 const useTreeViewFocus = ({
   instance,
-  publicAPI,
   params,
   state,
   setState,
@@ -51,12 +50,12 @@ const useTreeViewFocus = ({
   const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current.contains((0, _utils.getActiveElement)((0, _ownerDocument.default)(rootRef.current))), [rootRef]);
   const isItemFocused = React.useCallback(itemId => state.focusedItemId === itemId && isTreeViewFocused(), [state.focusedItemId, isTreeViewFocused]);
   const isItemVisible = itemId => {
-    const node = instance.getNode(itemId);
-    return node && (node.parentId == null || instance.isItemExpanded(node.parentId));
+    const itemMeta = instance.getItemMeta(itemId);
+    return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
   };
   const innerFocusItem = (event, itemId) => {
-    const node = instance.getNode(itemId);
-    const itemElement = document.getElementById(instance.getTreeItemId(itemId, node.idAttribute));
+    const itemMeta = instance.getItemMeta(itemId);
+    const itemElement = document.getElementById(instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute));
     if (itemElement) {
       itemElement.focus();
     }
@@ -79,7 +78,7 @@ const useTreeViewFocus = ({
       itemToFocusId = models.selectedItems.value;
     }
     if (itemToFocusId == null) {
-      itemToFocusId = instance.getNavigableChildrenIds(null)[0];
+      itemToFocusId = (0, _tree.getFirstNavigableItem)(instance);
     }
     innerFocusItem(event, itemToFocusId);
   });
@@ -87,9 +86,9 @@ const useTreeViewFocus = ({
     if (state.focusedItemId == null) {
       return;
     }
-    const node = instance.getNode(state.focusedItemId);
-    if (node) {
-      const itemElement = document.getElementById(instance.getTreeItemId(state.focusedItemId, node.idAttribute));
+    const itemMeta = instance.getItemMeta(state.focusedItemId);
+    if (itemMeta) {
+      const itemElement = document.getElementById(instance.getTreeItemIdAttribute(state.focusedItemId, itemMeta.idAttribute));
       if (itemElement) {
         itemElement.blur();
       }
@@ -97,16 +96,6 @@ const useTreeViewFocus = ({
     setFocusedItemId(null);
   });
   const canItemBeTabbed = itemId => itemId === tabbableItemId;
-  (0, _useTreeView.populateInstance)(instance, {
-    isItemFocused,
-    canItemBeTabbed,
-    focusItem,
-    focusDefaultItem,
-    removeFocusedItem
-  });
-  (0, _useTreeView.populatePublicAPI)(publicAPI, {
-    focusItem
-  });
   (0, _useInstanceEventHandler.useInstanceEventHandler)(instance, 'removeItem', ({
     id
   }) => {
@@ -114,20 +103,34 @@ const useTreeViewFocus = ({
       instance.focusDefaultItem(null);
     }
   });
-  const createHandleFocus = otherHandlers => event => {
+  const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+
     // if the event bubbled (which is React specific) we don't want to steal focus
     if (event.target === event.currentTarget) {
       instance.focusDefaultItem(event);
     }
   };
-  const focusedItem = instance.getNode(state.focusedItemId);
-  const activeDescendant = focusedItem ? instance.getTreeItemId(focusedItem.id, focusedItem.idAttribute) : null;
+  const focusedItem = instance.getItemMeta(state.focusedItemId);
+  const activeDescendant = focusedItem ? instance.getTreeItemIdAttribute(focusedItem.id, focusedItem.idAttribute) : null;
   return {
     getRootProps: otherHandlers => ({
-      onFocus: createHandleFocus(otherHandlers),
+      onFocus: createRootHandleFocus(otherHandlers),
       'aria-activedescendant': activeDescendant ?? undefined
-    })
+    }),
+    publicAPI: {
+      focusItem
+    },
+    instance: {
+      isItemFocused,
+      canItemBeTabbed,
+      focusItem,
+      focusDefaultItem,
+      removeFocusedItem
+    }
   };
 };
 exports.useTreeViewFocus = useTreeViewFocus;

package/node/internals/plugins/useTreeViewId/useTreeViewId.js

@@ -7,22 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewId = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
-var _useTreeView = require("../../useTreeView/useTreeView.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 && Object.prototype.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 useTreeViewId = ({
-  instance,
   params
 }) => {
   const treeId = (0, _useId.default)(params.id);
-  const getTreeItemId = React.useCallback((itemId, idAttribute) => idAttribute ?? `${treeId}-${itemId}`, [treeId]);
-  (0, _useTreeView.populateInstance)(instance, {
-    getTreeItemId
-  });
+  const getTreeItemIdAttribute = React.useCallback((itemId, idAttribute) => idAttribute ?? `${treeId}-${itemId}`, [treeId]);
   return {
     getRootProps: () => ({
       id: treeId
-    })
+    }),
+    instance: {
+      getTreeItemIdAttribute
+    }
   };
 };
 exports.useTreeViewId = useTreeViewId;