@mui/x-tree-view 7.1.0 → 7.2.0

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/RichTreeView/RichTreeView.js

@@ -38,7 +38,8 @@ const RichTreeViewRoot = exports.RichTreeViewRoot = (0, _styles.styled)('ul', {
   padding: 0,
   margin: 0,
   listStyle: 'none',
-  outline: 0
+  outline: 0,
+  position: 'relative'
 });
 function WrappedTreeItem({
   slots,
@@ -147,7 +148,8 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
       focusItem: _propTypes.default.func.isRequired,
-      getItem: _propTypes.default.func.isRequired
+      getItem: _propTypes.default.func.isRequired,
+      setItemExpansion: _propTypes.default.func.isRequired
     })
   }),
   /**
@@ -183,12 +185,12 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   expandedItems: _propTypes.default.arrayOf(_propTypes.default.string),
   /**
-   * Used to determine the string label for a given item.
+   * Used to determine the id of a given item.
    *
    * @template R
    * @param {R} item The item to check.
    * @returns {string} The id of the item.
-   * @default `(item) => item.id`
+   * @default (item) => item.id
    */
   getItemId: _propTypes.default.func,
   /**
@@ -197,7 +199,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * @template R
    * @param {R} item The item to check.
    * @returns {string} The label of the item.
-   * @default `(item) => item.label`
+   * @default (item) => item.label
    */
   getItemLabel: _propTypes.default.func,
   /**

package/node/SimpleTreeView/SimpleTreeView.js

@@ -37,7 +37,8 @@ const SimpleTreeViewRoot = exports.SimpleTreeViewRoot = (0, _styles.styled)('ul'
   padding: 0,
   margin: 0,
   listStyle: 'none',
-  outline: 0
+  outline: 0,
+  position: 'relative'
 });
 const EMPTY_ITEMS = [];
 const itemsPropWarning = (0, _warning.buildWarning)(['MUI X: The `SimpleTreeView` component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/simple-tree-view/items/']);
@@ -105,7 +106,8 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
       focusItem: _propTypes.default.func.isRequired,
-      getItem: _propTypes.default.func.isRequired
+      getItem: _propTypes.default.func.isRequired,
+      setItemExpansion: _propTypes.default.func.isRequired
     })
   }),
   /**

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/TreeView/TreeView.js

@@ -79,7 +79,8 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.shape({
       focusItem: _propTypes.default.func.isRequired,
-      getItem: _propTypes.default.func.isRequired
+      getItem: _propTypes.default.func.isRequired,
+      setItemExpansion: _propTypes.default.func.isRequired
     })
   }),
   /**

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.1.0
+ * @mui/x-tree-view v7.2.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/index.js

@@ -15,19 +15,89 @@ Object.defineProperty(exports, "TreeViewProvider", {
     return _TreeViewProvider.TreeViewProvider;
   }
 });
+Object.defineProperty(exports, "buildWarning", {
+  enumerable: true,
+  get: function () {
+    return _warning.buildWarning;
+  }
+});
 Object.defineProperty(exports, "extractPluginParamsFromProps", {
   enumerable: true,
   get: function () {
     return _extractPluginParamsFromProps.extractPluginParamsFromProps;
   }
 });
+Object.defineProperty(exports, "unstable_resetCleanupTracking", {
+  enumerable: true,
+  get: function () {
+    return _useInstanceEventHandler.unstable_resetCleanupTracking;
+  }
+});
 Object.defineProperty(exports, "useTreeView", {
   enumerable: true,
   get: function () {
     return _useTreeView.useTreeView;
   }
 });
+Object.defineProperty(exports, "useTreeViewExpansion", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewExpansion.useTreeViewExpansion;
+  }
+});
+Object.defineProperty(exports, "useTreeViewFocus", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewFocus.useTreeViewFocus;
+  }
+});
+Object.defineProperty(exports, "useTreeViewIcons", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewIcons.useTreeViewIcons;
+  }
+});
+Object.defineProperty(exports, "useTreeViewId", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewId.useTreeViewId;
+  }
+});
+Object.defineProperty(exports, "useTreeViewItems", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems.useTreeViewItems;
+  }
+});
+Object.defineProperty(exports, "useTreeViewJSXItems", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewJSXItems.useTreeViewJSXItems;
+  }
+});
+Object.defineProperty(exports, "useTreeViewKeyboardNavigation", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation;
+  }
+});
+Object.defineProperty(exports, "useTreeViewSelection", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewSelection.useTreeViewSelection;
+  }
+});
 var _useTreeView = require("./useTreeView");
 var _TreeViewProvider = require("./TreeViewProvider");
+var _useInstanceEventHandler = require("./hooks/useInstanceEventHandler");
 var _defaultPlugins = require("./plugins/defaultPlugins");
+var _useTreeViewExpansion = require("./plugins/useTreeViewExpansion");
+var _useTreeViewSelection = require("./plugins/useTreeViewSelection");
+var _useTreeViewFocus = require("./plugins/useTreeViewFocus");
+var _useTreeViewKeyboardNavigation = require("./plugins/useTreeViewKeyboardNavigation");
+var _useTreeViewId = require("./plugins/useTreeViewId");
+var _useTreeViewIcons = require("./plugins/useTreeViewIcons");
+var _useTreeViewItems = require("./plugins/useTreeViewItems");
+var _useTreeViewJSXItems = require("./plugins/useTreeViewJSXItems");
+var _warning = require("./utils/warning");
 var _extractPluginParamsFromProps = require("./utils/extractPluginParamsFromProps");

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

@@ -8,7 +8,6 @@ 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 = ({
@@ -16,33 +15,42 @@ const useTreeViewExpansion = ({
   params,
   models
 }) => {
+  const expandedItemsMap = React.useMemo(() => {
+    const temp = new Map();
+    models.expandedItems.value.forEach(id => {
+      temp.set(id, true);
+    });
+    return temp;
+  }, [models.expandedItems.value]);
   const setExpandedItems = (event, value) => {
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
   };
-  const isItemExpanded = React.useCallback(itemId => {
-    return Array.isArray(models.expandedItems.value) ? models.expandedItems.value.indexOf(itemId) !== -1 : false;
-  }, [models.expandedItems.value]);
-  const isItemExpandable = React.useCallback(itemId => !!instance.getNode(itemId)?.expandable, [instance]);
+  const isItemExpanded = React.useCallback(itemId => expandedItemsMap.has(itemId), [expandedItemsMap]);
+  const isItemExpandable = React.useCallback(itemId => !!instance.getItemMeta(itemId)?.expandable, [instance]);
   const toggleItemExpansion = (0, _useEventCallback.default)((event, itemId) => {
-    if (itemId == null) {
+    const isExpandedBefore = instance.isItemExpanded(itemId);
+    instance.setItemExpansion(event, itemId, !isExpandedBefore);
+  });
+  const setItemExpansion = (0, _useEventCallback.default)((event, itemId, isExpanded) => {
+    const isExpandedBefore = instance.isItemExpanded(itemId);
+    if (isExpandedBefore === isExpanded) {
       return;
     }
-    const isExpandedBefore = models.expandedItems.value.indexOf(itemId) !== -1;
     let newExpanded;
-    if (isExpandedBefore) {
-      newExpanded = models.expandedItems.value.filter(id => id !== itemId);
-    } else {
+    if (isExpanded) {
       newExpanded = [itemId].concat(models.expandedItems.value);
+    } else {
+      newExpanded = models.expandedItems.value.filter(id => id !== itemId);
     }
     if (params.onItemExpansionToggle) {
-      params.onItemExpansionToggle(event, itemId, !isExpandedBefore);
+      params.onItemExpansionToggle(event, itemId, isExpanded);
     }
     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) {
@@ -54,12 +62,18 @@ const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
-  (0, _useTreeView.populateInstance)(instance, {
-    isItemExpanded,
-    isItemExpandable,
-    toggleItemExpansion,
-    expandAllSiblings
-  });
+  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
   }) => {
@@ -121,13 +110,23 @@ const useTreeViewFocus = ({
       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),
       'aria-activedescendant': activeDescendant ?? undefined
-    })
+    }),
+    publicAPI: {
+      focusItem
+    },
+    instance: {
+      isItemFocused,
+      canItemBeTabbed,
+      focusItem,
+      focusDefaultItem,
+      removeFocusedItem
+    }
   };
 };
 exports.useTreeViewFocus = useTreeViewFocus;