[TreeView] Improve performances by removing getNavigableChildrenIds m…

…ethod

packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts

@@ -6,6 +6,7 @@ import { TreeViewPlugin, TreeViewUsedInstance } from '../../models';
 import { UseTreeViewFocusSignature } from './useTreeViewFocus.types';
 import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler';
 import { getActiveElement } from '../../utils/utils';
+import { getFirstNavigableItem } from '../../useTreeView/useTreeView.utils';
 
 const useTabbableItemId = (
   instance: TreeViewUsedInstance<UseTreeViewFocusSignature>,
@@ -24,7 +25,7 @@ const useTabbableItemId = (
   }
 
   if (tabbableItemId == null) {
-    tabbableItemId = instance.getNavigableChildrenIds(null)[0];
+    tabbableItemId = getFirstNavigableItem(instance);
   }
 
   return tabbableItemId;
@@ -95,7 +96,7 @@ export const useTreeViewFocus: TreeViewPlugin<UseTreeViewFocusSignature> = ({
     }
 
     if (itemToFocusId == null) {
-      itemToFocusId = instance.getNavigableChildrenIds(null)[0];
+      itemToFocusId = getFirstNavigableItem(instance);
     }
 
     innerFocusItem(event, itemToFocusId);

packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.ts

@@ -144,13 +144,11 @@ export const useTreeViewItems: TreeViewPlugin<UseTreeViewItemsSignature> = ({
     [state.items.itemMetaMap],
   );
 
-  const getNavigableChildrenIds = (itemId: string | null) => {
-    let childrenIds = instance.getChildrenIds(itemId);
-
-    if (!params.disabledItemsFocusable) {
-      childrenIds = childrenIds.filter((item) => !instance.isItemDisabled(item));
+  const isItemNavigable = (itemId: string) => {
+    if (params.disabledItemsFocusable) {
+      return true;
     }
-    return childrenIds;
+    return !instance.isItemDisabled(itemId);
   };
 
   const areItemUpdatesPreventedRef = React.useRef(false);
@@ -216,8 +214,8 @@ export const useTreeViewItems: TreeViewPlugin<UseTreeViewItemsSignature> = ({
       getItem,
       getItemsToRender,
       getChildrenIds,
-      getNavigableChildrenIds,
       isItemDisabled,
+      isItemNavigable,
       preventItemUpdates,
       areItemUpdatesPrevented,
     },

packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts

@@ -21,8 +21,8 @@ export interface UseTreeViewItemsInstance<R extends {}> extends UseTreeViewItems
   getItemMeta: (itemId: string) => TreeViewItemMeta;
   getItemsToRender: () => TreeViewItemProps[];
   getChildrenIds: (itemId: string | null) => string[];
-  getNavigableChildrenIds: (itemId: string | null) => string[];
-  isItemDisabled: (itemId: string | null) => itemId is string;
+  isItemDisabled: (itemId: string) => itemId is string;
+  isItemNavigable: (itemId: string) => boolean;
   /**
    * 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.

packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts

@@ -3,10 +3,10 @@ import { useTheme } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { TreeViewItemMeta, TreeViewPlugin } from '../../models';
 import {
-  getFirstItem,
-  getLastItem,
-  getNextItem,
-  getPreviousItem,
+  getFirstNavigableItem,
+  getLastNavigableItem,
+  getNextNavigableItem,
+  getPreviousNavigableItem,
 } from '../../useTreeView/useTreeView.utils';
 import {
   TreeViewFirstCharMap,
@@ -157,7 +157,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
 
       // 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);
@@ -181,7 +181,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
 
       // 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);
@@ -207,7 +207,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
       // If the focused item is collapsed and has children, we expand it
       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();
@@ -239,7 +239,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
 
       // 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.
@@ -253,7 +253,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
 
       // 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.
@@ -276,8 +276,8 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
       // Selects all the items
       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;

packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { TreeViewPlugin, TreeViewItemRange } from '../../models';
-import { getNextItem, getFirstItem, getLastItem } from '../../useTreeView/useTreeView.utils';
+import {
+  getFirstNavigableItem,
+  getLastNavigableItem,
+  getNavigableItemsInRange,
+} from '../../useTreeView/useTreeView.utils';
 import { UseTreeViewSelectionSignature } from './useTreeViewSelection.types';
-import { findOrderInTremauxTree } from './useTreeViewSelection.utils';
 
 export const useTreeViewSelection: TreeViewPlugin<UseTreeViewSelectionSignature> = ({
   instance,
@@ -80,20 +83,6 @@ export const useTreeViewSelection: TreeViewPlugin<UseTreeViewSelectionSignature>
     currentRangeSelection.current = [];
   };
 
-  const getItemsInRange = (itemAId: string, itemBId: string) => {
-    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: React.SyntheticEvent, items: TreeViewItemRange) => {
     let base = (models.selectedItems.value as string[]).slice();
     const { start, next, current } = items;
@@ -134,7 +123,7 @@ export const useTreeViewSelection: TreeViewPlugin<UseTreeViewSelectionSignature>
       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);
@@ -165,7 +154,7 @@ export const useTreeViewSelection: TreeViewPlugin<UseTreeViewSelectionSignature>
 
     instance.selectRange(event, {
       start,
-      end: getFirstItem(instance),
+      end: getFirstNavigableItem(instance),
     });
   };
 
@@ -178,7 +167,7 @@ export const useTreeViewSelection: TreeViewPlugin<UseTreeViewSelectionSignature>
 
     instance.selectRange(event, {
       start,
-      end: getLastItem(instance),
+      end: getLastNavigableItem(instance),
     });
   };