@mui/x-tree-view 7.1.0 → 7.2.0

package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts

@@ -1,4 +1,4 @@
-import { TreeViewNode, DefaultizedProps, TreeViewPluginSignature } from '../../models';
+import { TreeViewItemMeta, DefaultizedProps, TreeViewPluginSignature } from '../../models';
 import { TreeViewItemId } from '../../../models';
 interface TreeViewItemProps {
     label: string;
@@ -6,27 +6,33 @@ interface TreeViewItemProps {
     id: string | undefined;
     children?: TreeViewItemProps[];
 }
-export interface UseTreeViewItemsInstance<R extends {}> {
-    getNode: (itemId: string) => TreeViewNode;
+export interface UseTreeViewItemsPublicAPI<R extends {}> {
+    /**
+     * Get the item with the given id.
+     * @param {string} itemId The id of the item to return.
+     * @returns {R} The item with the given id.
+     */
     getItem: (itemId: string) => R;
+}
+export interface UseTreeViewItemsInstance<R extends {}> extends UseTreeViewItemsPublicAPI<R> {
+    getItemMeta: (itemId: string) => TreeViewItemMeta;
     getItemsToRender: () => TreeViewItemProps[];
-    getChildrenIds: (itemId: string | null) => string[];
-    getNavigableChildrenIds: (itemId: string | null) => string[];
-    isItemDisabled: (itemId: string | null) => itemId is string;
+    getItemOrderedChildrenIds: (parentId: string | null) => string[];
+    isItemDisabled: (itemId: string) => itemId is string;
+    isItemNavigable: (itemId: string) => boolean;
+    getItemIndex: (itemId: string) => number;
     /**
      * Freeze any future update to the state based on the `items` prop.
-     * This is useful when `useTreeViewJSXNodes` is used to avoid having conflicting sources of truth.
+     * This is useful when `useTreeViewJSXItems` is used to avoid having conflicting sources of truth.
      */
     preventItemUpdates: () => void;
     /**
      * Check if the updates to the state based on the `items` prop are prevented.
-     * This is useful when `useTreeViewJSXNodes` is used to avoid having conflicting sources of truth.
+     * This is useful when `useTreeViewJSXItems` is used to avoid having conflicting sources of truth.
      * @returns {boolean} `true` if the updates to the state based on the `items` prop are prevented.
      */
     areItemUpdatesPrevented: () => boolean;
 }
-export interface UseTreeViewItemsPublicAPI<R extends {}> extends Pick<UseTreeViewItemsInstance<R>, 'getItem'> {
-}
 export interface UseTreeViewItemsParameters<R extends {}> {
     /**
      * If `true`, will allow focus on disabled items.
@@ -47,16 +53,16 @@ export interface UseTreeViewItemsParameters<R extends {}> {
      * @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?: (item: R) => 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?: (item: R) => TreeViewItemId;
 }
@@ -68,15 +74,18 @@ interface UseTreeViewItemsEventLookup {
         };
     };
 }
-export interface TreeViewItemIdAndChildren {
-    id: TreeViewItemId;
-    children?: TreeViewItemIdAndChildren[];
-}
 export interface UseTreeViewItemsState<R extends {}> {
     items: {
-        nodeTree: TreeViewItemIdAndChildren[];
-        nodeMap: TreeViewNodeMap;
+        itemMetaMap: TreeViewItemMetaMap;
         itemMap: TreeViewItemMap<R>;
+        itemOrderedChildrenIds: {
+            [parentItemId: string]: string[];
+        };
+        itemChildrenIndexes: {
+            [parentItemId: string]: {
+                [itemId: string]: number;
+            };
+        };
     };
 }
 interface UseTreeViewItemsContextValue extends Pick<UseTreeViewItemsDefaultizedParameters<any>, 'disabledItemsFocusable'> {
@@ -90,8 +99,8 @@ export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
     state: UseTreeViewItemsState<any>;
     contextValue: UseTreeViewItemsContextValue;
 }>;
-export type TreeViewNodeMap = {
-    [itemId: string]: TreeViewNode;
+export type TreeViewItemMetaMap = {
+    [itemId: string]: TreeViewItemMeta;
 };
 export type TreeViewItemMap<R extends {}> = {
     [itemId: string]: R;

package/internals/plugins/useTreeViewItems/useTreeViewItems.utils.d.ts

@@ -0,0 +1,4 @@
+export declare const TREE_VIEW_ROOT_PARENT_ID = "__TREE_VIEW_ROOT_PARENT_ID__";
+export declare const buildSiblingIndexes: (siblings: string[]) => {
+    [itemId: string]: number;
+};

package/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js

@@ -0,0 +1,8 @@
+export const TREE_VIEW_ROOT_PARENT_ID = '__TREE_VIEW_ROOT_PARENT_ID__';
+export const buildSiblingIndexes = siblings => {
+  const siblingsIndexLookup = {};
+  siblings.forEach((childId, index) => {
+    siblingsIndexLookup[childId] = index;
+  });
+  return siblingsIndexLookup;
+};

package/internals/plugins/useTreeViewJSXItems/index.d.ts

@@ -1,2 +1,2 @@
 export { useTreeViewJSXItems } from './useTreeViewJSXItems';
-export type { UseTreeViewJSXItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, } from './useTreeViewJSXItems.types';
+export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters, UseTreeViewItemsDefaultizedParameters, } from './useTreeViewJSXItems.types';

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -2,10 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
 import { useTreeViewContext } from '../../TreeViewProvider/useTreeViewContext';
-import { DescendantProvider, useDescendant } from '../../TreeViewProvider/DescendantProvider';
+import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from '../../TreeViewProvider/TreeViewChildrenItemProvider';
+import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from '../useTreeViewItems/useTreeViewItems.utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useTreeViewJSXItems = ({
   instance,
@@ -14,12 +15,12 @@ export const useTreeViewJSXItems = ({
   instance.preventItemUpdates();
   const insertJSXItem = useEventCallback(item => {
     setState(prevState => {
-      if (prevState.items.nodeMap[item.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.', `Tow items were provided with the same id in the \`items\` prop: "${item.id}"`].join('\n'));
+      if (prevState.items.itemMetaMap[item.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.', `Two items were provided with the same id in the \`items\` prop: "${item.id}"`].join('\n'));
       }
       return _extends({}, prevState, {
         items: _extends({}, prevState.items, {
-          nodeMap: _extends({}, prevState.items.nodeMap, {
+          itemMetaMap: _extends({}, prevState.items.itemMetaMap, {
             [item.id]: item
           }),
           // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
@@ -33,15 +34,28 @@ export const useTreeViewJSXItems = ({
       });
     });
   });
+  const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
+    const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
+    setState(prevState => _extends({}, prevState, {
+      items: _extends({}, prevState.items, {
+        itemOrderedChildrenIds: _extends({}, prevState.items.itemOrderedChildrenIds, {
+          [parentIdWithDefault]: orderedChildrenIds
+        }),
+        itemChildrenIndexes: _extends({}, prevState.items.itemChildrenIndexes, {
+          [parentIdWithDefault]: buildSiblingIndexes(orderedChildrenIds)
+        })
+      })
+    }));
+  };
   const removeJSXItem = useEventCallback(itemId => {
     setState(prevState => {
-      const newNodeMap = _extends({}, prevState.items.nodeMap);
+      const newItemMetaMap = _extends({}, prevState.items.itemMetaMap);
       const newItemMap = _extends({}, prevState.items.itemMap);
-      delete newNodeMap[itemId];
+      delete newItemMetaMap[itemId];
       delete newItemMap[itemId];
       return _extends({}, prevState, {
         items: _extends({}, prevState.items, {
-          nodeMap: newNodeMap,
+          itemMetaMap: newItemMetaMap,
           itemMap: newItemMap
         })
       });
@@ -63,17 +77,23 @@ export const useTreeViewJSXItems = ({
       });
     };
   });
-  populateInstance(instance, {
-    insertJSXItem,
-    removeJSXItem,
-    mapFirstCharFromJSX
-  });
+  return {
+    instance: {
+      insertJSXItem,
+      removeJSXItem,
+      setJSXItemsOrderedChildrenIds,
+      mapFirstCharFromJSX
+    }
+  };
 };
 const useTreeViewJSXItemsItemPlugin = ({
   props,
   rootRef,
   contentRef
 }) => {
+  const {
+    instance
+  } = useTreeViewContext();
   const {
     children,
     disabled = false,
@@ -81,9 +101,15 @@ const useTreeViewJSXItemsItemPlugin = ({
     itemId,
     id
   } = props;
+  const parentContext = React.useContext(TreeViewChildrenItemContext);
+  if (parentContext == null) {
+    throw new Error(['MUI X: Could not find the Tree View Children Item context.', 'It looks like you rendered your component outside of a SimpleTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
+  }
   const {
-    instance
-  } = useTreeViewContext();
+    registerChild,
+    unregisterChild,
+    parentId
+  } = parentContext;
   const isExpandable = reactChildren => {
     if (Array.isArray(reactChildren)) {
       return reactChildren.length > 0 && reactChildren.some(isExpandable);
@@ -91,33 +117,27 @@ const useTreeViewJSXItemsItemPlugin = ({
     return Boolean(reactChildren);
   };
   const expandable = isExpandable(children);
-  const [treeItemElement, setTreeItemElement] = React.useState(null);
   const pluginContentRef = React.useRef(null);
-  const handleRootRef = useForkRef(setTreeItemElement, rootRef);
   const handleContentRef = useForkRef(pluginContentRef, contentRef);
-  const descendant = React.useMemo(() => ({
-    element: treeItemElement,
-    id: itemId
-  }), [itemId, treeItemElement]);
-  const {
-    index,
-    parentId
-  } = useDescendant(descendant);
+
+  // Prevent any flashing
+  useEnhancedEffect(() => {
+    const idAttributeWithDefault = instance.getTreeItemIdAttribute(itemId, id);
+    registerChild(idAttributeWithDefault, itemId);
+    return () => {
+      unregisterChild(idAttributeWithDefault);
+    };
+  }, [instance, registerChild, unregisterChild, itemId, id]);
   React.useEffect(() => {
-    // On the first render a item's index will be -1. We want to wait for the real index.
-    if (index !== -1) {
-      instance.insertJSXItem({
-        id: itemId,
-        idAttribute: id,
-        index,
-        parentId,
-        expandable,
-        disabled
-      });
-      return () => instance.removeJSXItem(itemId);
-    }
-    return undefined;
-  }, [instance, parentId, index, itemId, expandable, disabled, id]);
+    instance.insertJSXItem({
+      id: itemId,
+      idAttribute: id,
+      parentId,
+      expandable,
+      disabled
+    });
+    return () => instance.removeJSXItem(itemId);
+  }, [instance, parentId, itemId, expandable, disabled, id]);
   React.useEffect(() => {
     if (label) {
       return instance.mapFirstCharFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
@@ -126,15 +146,20 @@ const useTreeViewJSXItemsItemPlugin = ({
   }, [instance, itemId, label]);
   return {
     contentRef: handleContentRef,
-    rootRef: handleRootRef
+    rootRef
   };
 };
 useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
 useTreeViewJSXItems.wrapItem = ({
   children,
   itemId
-}) => /*#__PURE__*/_jsx(DescendantProvider, {
-  id: itemId,
+}) => /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
+  itemId: itemId,
+  children: children
+});
+useTreeViewJSXItems.wrapRoot = ({
+  children
+}) => /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
   children: children
 });
 useTreeViewJSXItems.params = {};

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.types.d.ts

@@ -1,17 +1,18 @@
-import { TreeViewNode, TreeViewPluginSignature } from '../../models';
+import { TreeViewItemMeta, TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewKeyboardNavigationSignature } from '../useTreeViewKeyboardNavigation';
 export interface UseTreeViewItemsInstance {
-    insertJSXItem: (item: TreeViewNode) => void;
+    insertJSXItem: (item: TreeViewItemMeta) => void;
     removeJSXItem: (itemId: string) => void;
     mapFirstCharFromJSX: (itemId: string, firstChar: string) => () => void;
+    setJSXItemsOrderedChildrenIds: (parentId: string | null, orderedChildrenIds: string[]) => void;
 }
-export interface UseTreeViewItemsParameters {
+export interface UseTreeViewJSXItemsParameters {
 }
 export interface UseTreeViewItemsDefaultizedParameters {
 }
 export type UseTreeViewJSXItemsSignature = TreeViewPluginSignature<{
-    params: UseTreeViewItemsParameters;
+    params: UseTreeViewJSXItemsParameters;
     defaultizedParams: UseTreeViewItemsDefaultizedParameters;
     instance: UseTreeViewItemsInstance;
     dependantPlugins: [UseTreeViewItemsSignature, UseTreeViewKeyboardNavigationSignature];

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { getFirstItem, getLastItem, getNextItem, getPreviousItem, populateInstance } from '../../useTreeView/useTreeView.utils';
+import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem } from '../../utils/tree';
 function isPrintableCharacter(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
@@ -29,12 +29,12 @@ export const useTreeViewKeyboardNavigation = ({
       return;
     }
     const newFirstCharMap = {};
-    const processItem = node => {
-      newFirstCharMap[node.id] = node.label.substring(0, 1).toLowerCase();
+    const processItem = item => {
+      newFirstCharMap[item.id] = item.label.substring(0, 1).toLowerCase();
     };
-    Object.values(state.items.nodeMap).forEach(processItem);
+    Object.values(state.items.itemMetaMap).forEach(processItem);
     firstCharMap.current = newFirstCharMap;
-  }, [state.items.nodeMap, params.getItemId, instance]);
+  }, [state.items.itemMetaMap, params.getItemId, instance]);
   const getFirstMatchingItem = (itemId, firstChar) => {
     let start;
     let index;
@@ -43,7 +43,7 @@ export const useTreeViewKeyboardNavigation = ({
     const firstChars = [];
     // This really only works since the ids are strings
     Object.keys(firstCharMap.current).forEach(mapItemId => {
-      const map = instance.getNode(mapItemId);
+      const map = instance.getItemMeta(mapItemId);
       const visible = map.parentId ? instance.isItemExpanded(map.parentId) : true;
       const shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isItemDisabled(mapItemId);
       if (visible && !shouldBeSkipped) {
@@ -128,7 +128,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Focus the next focusable item
       case key === 'ArrowDown':
         {
-          const nextItem = getNextItem(instance, itemId);
+          const nextItem = getNextNavigableItem(instance, itemId);
           if (nextItem) {
             event.preventDefault();
             instance.focusItem(event, nextItem);
@@ -148,7 +148,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Focuses the previous focusable item
       case key === 'ArrowUp':
         {
-          const previousItem = getPreviousItem(instance, itemId);
+          const previousItem = getPreviousNavigableItem(instance, itemId);
           if (previousItem) {
             event.preventDefault();
             instance.focusItem(event, previousItem);
@@ -170,7 +170,7 @@ export const useTreeViewKeyboardNavigation = ({
       case key === 'ArrowRight' && !isRTL || key === 'ArrowLeft' && isRTL:
         {
           if (instance.isItemExpanded(itemId)) {
-            const nextItemId = getNextItem(instance, itemId);
+            const nextItemId = getNextNavigableItem(instance, itemId);
             if (nextItemId) {
               instance.focusItem(event, nextItemId);
               event.preventDefault();
@@ -190,7 +190,7 @@ export const useTreeViewKeyboardNavigation = ({
             instance.toggleItemExpansion(event, itemId);
             event.preventDefault();
           } else {
-            const parent = instance.getNode(itemId).parentId;
+            const parent = instance.getItemMeta(itemId).parentId;
             if (parent) {
               instance.focusItem(event, parent);
               event.preventDefault();
@@ -202,7 +202,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Focuses the first item in the tree
       case key === 'Home':
         {
-          instance.focusItem(event, getFirstItem(instance));
+          instance.focusItem(event, getFirstNavigableItem(instance));
 
           // Multi select behavior when pressing Ctrl + Shift + Home
           // Selects the focused item and all items up to the first item.
@@ -216,7 +216,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Focuses the last item in the tree
       case key === 'End':
         {
-          instance.focusItem(event, getLastItem(instance));
+          instance.focusItem(event, getLastNavigableItem(instance));
 
           // Multi select behavior when pressing Ctrl + Shirt + End
           // Selects the focused item and all the items down to the last item.
@@ -240,8 +240,8 @@ export const useTreeViewKeyboardNavigation = ({
       case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection:
         {
           instance.selectRange(event, {
-            start: getFirstItem(instance),
-            end: getLastItem(instance)
+            start: getFirstNavigableItem(instance),
+            end: getLastNavigableItem(instance)
           });
           event.preventDefault();
           break;
@@ -260,9 +260,11 @@ export const useTreeViewKeyboardNavigation = ({
         }
     }
   };
-  populateInstance(instance, {
-    updateFirstCharMap,
-    handleItemKeyDown
-  });
+  return {
+    instance: {
+      updateFirstCharMap,
+      handleItemKeyDown
+    }
+  };
 };
 useTreeViewKeyboardNavigation.params = {};

package/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/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/internals/useTreeView/useTreeViewModels.js

@@ -22,7 +22,7 @@ export const useTreeViewModels = (plugins, props) => {
     return initialState;
   });
   const models = Object.fromEntries(Object.entries(modelsRef.current).map(([modelName, model]) => {
-    const value = model.isControlled ? props[modelName] : modelsState[modelName];
+    const value = props[modelName] ?? modelsState[modelName];
     return [modelName, {
       value,
       setControlledValue: newValue => {
@@ -53,7 +53,7 @@ export const useTreeViewModels = (plugins, props) => {
         if (!model.isControlled && defaultValue !== newDefaultValue) {
           console.error([`MUI X: A component is changing the default ${modelName} state of an uncontrolled TreeView after being initialized. ` + `To suppress this warning opt to use a controlled TreeView.`].join('\n'));
         }
-      }, [JSON.stringify(defaultValue)]);
+      }, [JSON.stringify(newDefaultValue)]);
     });
   }
   /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */

package/internals/utils/tree.d.ts

@@ -0,0 +1,8 @@
+import { TreeViewInstance } from '../models';
+import type { UseTreeViewExpansionSignature } from '../plugins/useTreeViewExpansion';
+import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
+export declare const getPreviousNavigableItem: (instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
+export declare const getNextNavigableItem: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>, itemId: string) => string | null;
+export declare const getLastNavigableItem: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>) => string;
+export declare const getFirstNavigableItem: (instance: TreeViewInstance<[UseTreeViewItemsSignature]>) => string;
+export declare const getNavigableItemsInRange: (instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemAId: string, itemBId: string) => string[];