@mui/x-tree-view 7.2.0 → 7.3.1

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -1,14 +1,25 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { getFirstNavigableItem, getLastNavigableItem, getNavigableItemsInRange } from '../../utils/tree';
+import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from '../../utils/tree';
+import { convertSelectedItemsToArray, getLookupFromArray } from './useTreeViewSelection.utils';
 export const useTreeViewSelection = ({
   instance,
   params,
   models
 }) => {
   const lastSelectedItem = React.useRef(null);
-  const lastSelectionWasRange = React.useRef(false);
-  const currentRangeSelection = React.useRef([]);
+  const lastSelectedRange = React.useRef({});
+  const selectedItemsMap = React.useMemo(() => {
+    const temp = new Map();
+    if (Array.isArray(models.selectedItems.value)) {
+      models.selectedItems.value.forEach(id => {
+        temp.set(id, true);
+      });
+    } else if (models.selectedItems.value != null) {
+      temp.set(models.selectedItems.value, true);
+    }
+    return temp;
+  }, [models.selectedItems.value]);
   const setSelectedItems = (event, newSelectedItems) => {
     if (params.onItemSelectionToggle) {
       if (params.multiSelect) {
@@ -34,115 +45,90 @@ export const useTreeViewSelection = ({
     }
     models.selectedItems.setControlledValue(newSelectedItems);
   };
-  const isItemSelected = itemId => Array.isArray(models.selectedItems.value) ? models.selectedItems.value.indexOf(itemId) !== -1 : models.selectedItems.value === itemId;
+  const isItemSelected = itemId => selectedItemsMap.has(itemId);
   const selectItem = (event, itemId, multiple = false) => {
     if (params.disableSelection) {
       return;
     }
+    let newSelected;
     if (multiple) {
-      if (Array.isArray(models.selectedItems.value)) {
-        let newSelected;
-        if (models.selectedItems.value.indexOf(itemId) !== -1) {
-          newSelected = models.selectedItems.value.filter(id => id !== itemId);
-        } else {
-          newSelected = [itemId].concat(models.selectedItems.value);
-        }
-        setSelectedItems(event, newSelected);
+      const cleanSelectedItems = convertSelectedItemsToArray(models.selectedItems.value);
+      if (instance.isItemSelected(itemId)) {
+        newSelected = cleanSelectedItems.filter(id => id !== itemId);
+      } else {
+        newSelected = [itemId].concat(cleanSelectedItems);
       }
     } else {
-      const newSelected = params.multiSelect ? [itemId] : itemId;
-      setSelectedItems(event, newSelected);
+      newSelected = params.multiSelect ? [itemId] : itemId;
     }
+    setSelectedItems(event, newSelected);
     lastSelectedItem.current = itemId;
-    lastSelectionWasRange.current = false;
-    currentRangeSelection.current = [];
+    lastSelectedRange.current = {};
   };
-  const handleRangeArrowSelect = (event, items) => {
-    let base = models.selectedItems.value.slice();
-    const {
-      start,
-      next,
-      current
-    } = items;
-    if (!next || !current) {
+  const selectRange = (event, [start, end]) => {
+    if (params.disableSelection || !params.multiSelect) {
       return;
     }
-    if (currentRangeSelection.current.indexOf(current) === -1) {
-      currentRangeSelection.current = [];
+    let newSelectedItems = convertSelectedItemsToArray(models.selectedItems.value).slice();
+
+    // If the last selection was a range selection,
+    // remove the items that were part of the last range from the model
+    if (Object.keys(lastSelectedRange.current).length > 0) {
+      newSelectedItems = newSelectedItems.filter(id => !lastSelectedRange.current[id]);
     }
-    if (lastSelectionWasRange.current) {
-      if (currentRangeSelection.current.indexOf(next) !== -1) {
-        base = base.filter(id => id === start || id !== current);
-        currentRangeSelection.current = currentRangeSelection.current.filter(id => id === start || id !== current);
-      } else {
-        base.push(next);
-        currentRangeSelection.current.push(next);
-      }
-    } else {
-      base.push(next);
-      currentRangeSelection.current.push(current, next);
-    }
-    setSelectedItems(event, base);
+
+    // Add to the model the items that are part of the new range and not already part of the model.
+    const selectedItemsLookup = getLookupFromArray(newSelectedItems);
+    const range = getNonDisabledItemsInRange(instance, start, end);
+    const itemsToAddToModel = range.filter(id => !selectedItemsLookup[id]);
+    newSelectedItems = newSelectedItems.concat(itemsToAddToModel);
+    setSelectedItems(event, newSelectedItems);
+    lastSelectedRange.current = getLookupFromArray(range);
   };
-  const handleRangeSelect = (event, items) => {
-    let base = models.selectedItems.value.slice();
-    const {
-      start,
-      end
-    } = items;
-    // If last selection was a range selection ignore items that were selected.
-    if (lastSelectionWasRange.current) {
-      base = base.filter(id => currentRangeSelection.current.indexOf(id) === -1);
+  const expandSelectionRange = (event, itemId) => {
+    if (lastSelectedItem.current != null) {
+      const [start, end] = findOrderInTremauxTree(instance, itemId, lastSelectedItem.current);
+      selectRange(event, [start, end]);
     }
-    let range = getNavigableItemsInRange(instance, start, end);
-    range = range.filter(item => !instance.isItemDisabled(item));
-    currentRangeSelection.current = range;
-    let newSelected = base.concat(range);
-    newSelected = newSelected.filter((id, i) => newSelected.indexOf(id) === i);
-    setSelectedItems(event, newSelected);
   };
-  const selectRange = (event, items, stacked = false) => {
-    if (params.disableSelection) {
+  const selectRangeFromStartToItem = (event, itemId) => {
+    selectRange(event, [getFirstNavigableItem(instance), itemId]);
+  };
+  const selectRangeFromItemToEnd = (event, itemId) => {
+    selectRange(event, [itemId, getLastNavigableItem(instance)]);
+  };
+  const selectAllNavigableItems = event => {
+    if (params.disableSelection || !params.multiSelect) {
       return;
     }
-    const {
-      start = lastSelectedItem.current,
-      end,
-      current
-    } = items;
-    if (stacked) {
-      handleRangeArrowSelect(event, {
-        start,
-        next: end,
-        current
-      });
-    } else if (start != null && end != null) {
-      handleRangeSelect(event, {
-        start,
-        end
-      });
-    }
-    lastSelectionWasRange.current = true;
+    const navigableItems = getAllNavigableItems(instance);
+    setSelectedItems(event, navigableItems);
+    lastSelectedRange.current = getLookupFromArray(navigableItems);
   };
-  const rangeSelectToFirst = (event, itemId) => {
-    if (!lastSelectedItem.current) {
-      lastSelectedItem.current = itemId;
+  const selectItemFromArrowNavigation = (event, currentItem, nextItem) => {
+    if (params.disableSelection || !params.multiSelect) {
+      return;
     }
-    const start = lastSelectionWasRange.current ? lastSelectedItem.current : itemId;
-    instance.selectRange(event, {
-      start,
-      end: getFirstNavigableItem(instance)
-    });
-  };
-  const rangeSelectToLast = (event, itemId) => {
-    if (!lastSelectedItem.current) {
-      lastSelectedItem.current = itemId;
+    let newSelectedItems = convertSelectedItemsToArray(models.selectedItems.value).slice();
+    if (Object.keys(lastSelectedRange.current).length === 0) {
+      newSelectedItems.push(nextItem);
+      lastSelectedRange.current = {
+        [currentItem]: true,
+        [nextItem]: true
+      };
+    } else {
+      if (!lastSelectedRange.current[currentItem]) {
+        lastSelectedRange.current = {};
+      }
+      if (lastSelectedRange.current[nextItem]) {
+        newSelectedItems = newSelectedItems.filter(id => id !== currentItem);
+        delete lastSelectedRange.current[currentItem];
+      } else {
+        newSelectedItems.push(nextItem);
+        lastSelectedRange.current[nextItem] = true;
+      }
     }
-    const start = lastSelectionWasRange.current ? lastSelectedItem.current : itemId;
-    instance.selectRange(event, {
-      start,
-      end: getLastNavigableItem(instance)
-    });
+    setSelectedItems(event, newSelectedItems);
   };
   return {
     getRootProps: () => ({
@@ -151,9 +137,11 @@ export const useTreeViewSelection = ({
     instance: {
       isItemSelected,
       selectItem,
-      selectRange,
-      rangeSelectToLast,
-      rangeSelectToFirst
+      selectAllNavigableItems,
+      expandSelectionRange,
+      selectRangeFromStartToItem,
+      selectRangeFromItemToEnd,
+      selectItemFromArrowNavigation
     },
     contextValue: {
       selection: {

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

@@ -1,13 +1,40 @@
 import * as React from 'react';
-import type { DefaultizedProps, TreeViewItemRange, TreeViewPluginSignature } from '../../models';
+import type { DefaultizedProps, TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
 export interface UseTreeViewSelectionInstance {
     isItemSelected: (itemId: string) => boolean;
-    selectItem: (event: React.SyntheticEvent, itemId: string, multiple?: boolean) => void;
-    selectRange: (event: React.SyntheticEvent, items: TreeViewItemRange, stacked?: boolean) => void;
-    rangeSelectToFirst: (event: React.KeyboardEvent, itemId: string) => void;
-    rangeSelectToLast: (event: React.KeyboardEvent, itemId: string) => void;
+    selectItem: (event: React.SyntheticEvent, itemId: string, keepExistingSelection?: boolean) => void;
+    /**
+     * Select all the navigable items in the tree.
+     * @param {React.SyntheticEvent} event The event source of the callback.
+     */
+    selectAllNavigableItems: (event: React.SyntheticEvent) => void;
+    /**
+     * Expand the current selection range up to the given item.
+     * @param {React.SyntheticEvent} event The event source of the callback.
+     * @param {string} itemId The id of the item to expand the selection to.
+     */
+    expandSelectionRange: (event: React.SyntheticEvent, itemId: string) => void;
+    /**
+     * Expand the current selection range from the first navigable item to the given item.
+     * @param {React.SyntheticEvent} event The event source of the callback.
+     * @param {string} itemId The id of the item up to which the selection range should be expanded.
+     */
+    selectRangeFromStartToItem: (event: React.SyntheticEvent, itemId: string) => void;
+    /**
+     * Expand the current selection range from the given item to the last navigable item.
+     * @param {React.SyntheticEvent} event The event source of the callback.
+     * @param {string} itemId The id of the item from which the selection range should be expanded.
+     */
+    selectRangeFromItemToEnd: (event: React.SyntheticEvent, itemId: string) => void;
+    /**
+     * Update the selection when navigating with ArrowUp / ArrowDown keys.
+     * @param {React.SyntheticEvent} event The event source of the callback.
+     * @param {string} currentItemId The id of the active item before the keyboard navigation.
+     * @param {string} nextItemId The id of the active item after the keyboard navigation.
+     */
+    selectItemFromArrowNavigation: (event: React.SyntheticEvent, currentItemId: string, nextItemId: string) => void;
 }
 type TreeViewSelectionValue<Multiple extends boolean | undefined> = Multiple extends true ? string[] : string | null;
 export interface UseTreeViewSelectionParameters<Multiple extends boolean | undefined> {

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

@@ -0,0 +1,9 @@
+/**
+ * Transform the `selectedItems` model to be an array if it was a string or null.
+ * @param {string[] | string | null} model The raw model.
+ * @returns {string[]} The converted model.
+ */
+export declare const convertSelectedItemsToArray: (model: string[] | string | null) => string[];
+export declare const getLookupFromArray: (array: string[]) => {
+    [itemId: string]: boolean;
+};

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js

@@ -0,0 +1,21 @@
+/**
+ * Transform the `selectedItems` model to be an array if it was a string or null.
+ * @param {string[] | string | null} model The raw model.
+ * @returns {string[]} The converted model.
+ */
+export const convertSelectedItemsToArray = model => {
+  if (Array.isArray(model)) {
+    return model;
+  }
+  if (model != null) {
+    return [model];
+  }
+  return [];
+};
+export const getLookupFromArray = array => {
+  const lookup = {};
+  array.forEach(itemId => {
+    lookup[itemId] = true;
+  });
+  return lookup;
+};

package/internals/useTreeView/useTreeView.types.d.ts

@@ -11,7 +11,7 @@ export interface UseTreeViewBaseParameters<TPlugins extends readonly TreeViewPlu
     slotProps: MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, 'slotProps'>;
 }
 export type UseTreeViewDefaultizedParameters<TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]> = UseTreeViewBaseParameters<TPlugins> & MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, 'defaultizedParams'>;
-export interface UseTreeViewRootSlotProps extends Pick<React.HTMLAttributes<HTMLUListElement>, 'onFocus' | 'onBlur' | 'onKeyDown' | 'id' | 'aria-activedescendant' | 'aria-multiselectable' | 'role' | 'tabIndex'> {
+export interface UseTreeViewRootSlotProps extends Pick<React.HTMLAttributes<HTMLUListElement>, 'onFocus' | 'onBlur' | 'onKeyDown' | 'id' | 'aria-multiselectable' | 'role' | 'tabIndex'> {
     ref: React.Ref<HTMLUListElement>;
 }
 export interface UseTreeViewReturnValue<TPlugins extends readonly TreeViewAnyPluginSignature[]> {

package/internals/useTreeView/useTreeViewModels.d.ts

@@ -3,4 +3,4 @@ import { TreeViewAnyPluginSignature, TreeViewPlugin, ConvertPluginsIntoSignature
  * Implements the same behavior as `useControlled` but for several models.
  * The controlled models are never stored in the state and the state is only updated if the model is not controlled.
  */
-export declare const useTreeViewModels: <TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]>(plugins: TPlugins, props: MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, "defaultizedParams">) => MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, "models">;
+export declare const useTreeViewModels: <TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]>(plugins: TPlugins, props: MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, 'defaultizedParams'>) => MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, "models">;

package/internals/utils/extractPluginParamsFromProps.d.ts

@@ -8,7 +8,7 @@ export declare const extractPluginParamsFromProps: <TPlugins extends readonly Tr
 }>({ props: { slots, slotProps, apiRef, ...props }, plugins, rootRef, }: {
     props: TProps;
     plugins: TPlugins;
-    rootRef?: React.Ref<HTMLUListElement> | undefined;
+    rootRef?: React.Ref<HTMLUListElement>;
 }) => {
     pluginParams: UseTreeViewBaseParameters<TPlugins> & MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, "params">;
     slots: TSlots | undefined;

package/internals/utils/publishTreeViewEvent.d.ts

@@ -2,4 +2,4 @@ import { UseTreeViewInstanceEventsInstance } from '../corePlugins/useTreeViewIns
 import { TreeViewAnyPluginSignature, TreeViewUsedEvents } from '../models';
 export declare const publishTreeViewEvent: <Instance extends UseTreeViewInstanceEventsInstance & {
     $$signature: TreeViewAnyPluginSignature;
-}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergePluginsProperty<[import("../corePlugins").TreeViewCorePluginsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, params: TreeViewUsedEvents<Instance["$$signature"]>[E]["params"]) => void;
+}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergePluginsProperty<[import("../corePlugins").TreeViewCorePluginsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, params: TreeViewUsedEvents<Instance['$$signature']>[E]['params']) => void;

package/internals/utils/tree.d.ts

@@ -5,4 +5,20 @@ export declare const getPreviousNavigableItem: (instance: TreeViewInstance<[UseT
 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[];
+/**
+ * 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
+ */
+export declare const findOrderInTremauxTree: (instance: TreeViewInstance<[UseTreeViewItemsSignature]>, itemAId: string, itemBId: string) => string[];
+export declare const getNonDisabledItemsInRange: (instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemAId: string, itemBId: string) => string[];
+export declare const getAllNavigableItems: (instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>) => string[];

package/internals/utils/tree.js

@@ -84,7 +84,7 @@ export const getFirstNavigableItem = instance => instance.getItemOrderedChildren
  * 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) => {
+export const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
   if (itemAId === itemBId) {
     return [itemAId, itemBId];
   }
@@ -125,13 +125,43 @@ const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
   const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
   return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [itemAId, itemBId] : [itemBId, itemAId];
 };
-export const getNavigableItemsInRange = (instance, itemAId, itemBId) => {
+export const getNonDisabledItemsInRange = (instance, itemAId, itemBId) => {
+  const getNextItem = itemId => {
+    // If the item is expanded and has some children, return the first of them.
+    if (instance.isItemExpandable(itemId) && instance.isItemExpanded(itemId)) {
+      return instance.getItemOrderedChildrenIds(itemId)[0];
+    }
+    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) {
+        return siblings[currentItemIndex + 1];
+      }
+
+      // If the item is the last of its siblings, go up a level to the parent and try again.
+      itemMeta = instance.getItemMeta(itemMeta.parentId);
+    }
+    throw new Error('Invalid range');
+  };
   const [first, last] = findOrderInTremauxTree(instance, itemAId, itemBId);
   const items = [first];
   let current = first;
   while (current !== last) {
-    current = getNextNavigableItem(instance, current);
-    items.push(current);
+    current = getNextItem(current);
+    if (!instance.isItemDisabled(current)) {
+      items.push(current);
+    }
   }
   return items;
+};
+export const getAllNavigableItems = instance => {
+  let item = getFirstNavigableItem(instance);
+  const navigableItems = [];
+  while (item != null) {
+    navigableItems.push(item);
+    item = getNextNavigableItem(instance, item);
+  }
+  return navigableItems;
 };

package/modern/TreeItem/TreeItem.js

@@ -19,8 +19,7 @@ import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
 import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
 import { TreeItem2Provider } from '../TreeItem2Provider';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes

package/modern/TreeItem/TreeItemContent.js

@@ -5,8 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useTreeItemState } from './useTreeItemState';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
  */

package/modern/TreeItem/useTreeItemState.js

@@ -32,9 +32,7 @@ export function useTreeItemState(itemId) {
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
       if (multiple) {
         if (event.shiftKey) {
-          instance.selectRange(event, {
-            end: itemId
-          });
+          instance.expandSelectionRange(event, itemId);
         } else {
           instance.selectItem(event, itemId, true);
         }

package/modern/TreeItem2/TreeItem2.js

@@ -14,8 +14,7 @@ import { unstable_useTreeItem2 as useTreeItem2 } from '../useTreeItem2';
 import { getTreeItemUtilityClass, treeItemClasses } from '../TreeItem';
 import { TreeItem2Icon } from '../TreeItem2Icon';
 import { TreeItem2Provider } from '../TreeItem2Provider';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const TreeItem2Root = styled('li', {
   name: 'MuiTreeItem2',
   slot: 'Root',

package/modern/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -40,9 +40,7 @@ export const useTreeItem2Utils = ({
     const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
     if (multiple) {
       if (event.shiftKey) {
-        instance.selectRange(event, {
-          end: itemId
-        });
+        instance.expandSelectionRange(event, itemId);
       } else {
         instance.selectItem(event, itemId, true);
       }

package/modern/index.js

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

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

@@ -94,19 +94,20 @@ export 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.getItemMeta(state.focusedItemId);
-  const activeDescendant = focusedItem ? instance.getTreeItemIdAttribute(focusedItem.id, focusedItem.idAttribute) : null;
   return {
     getRootProps: otherHandlers => ({
-      onFocus: createHandleFocus(otherHandlers),
-      'aria-activedescendant': activeDescendant ?? undefined
+      onFocus: createRootHandleFocus(otherHandlers)
     }),
     publicAPI: {
       focusItem

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

@@ -86,6 +86,12 @@ export const useTreeViewJSXItems = ({
     }
   };
 };
+const isItemExpandable = reactChildren => {
+  if (Array.isArray(reactChildren)) {
+    return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
+  }
+  return Boolean(reactChildren);
+};
 const useTreeViewJSXItemsItemPlugin = ({
   props,
   rootRef,
@@ -110,13 +116,7 @@ const useTreeViewJSXItemsItemPlugin = ({
     unregisterChild,
     parentId
   } = parentContext;
-  const isExpandable = reactChildren => {
-    if (Array.isArray(reactChildren)) {
-      return reactChildren.length > 0 && reactChildren.some(isExpandable);
-    }
-    return Boolean(reactChildren);
-  };
-  const expandable = isExpandable(children);
+  const expandable = isItemExpandable(children);
   const pluginContentRef = React.useRef(null);
   const handleContentRef = useForkRef(pluginContentRef, contentRef);