[tree view] Use Base UI utils whenever possible

packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { TreeViewPlugin, itemsSelectors, labelSelectors } from '@mui/x-tree-view/internals';
 import { TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
 import {
@@ -249,7 +249,7 @@ export const useTreeViewItemsReordering: TreeViewPlugin<UseTreeViewItemsReorderi
     [store, params.itemChildrenIndentation],
   );
 
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     store.set('itemsReordering', {
       ...store.state.itemsReordering,
       isItemReorderable: params.itemsReordering

packages/x-tree-view-pro/src/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.ts

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
-import useLazyRef from '@mui/utils/useLazyRef';
-import useEventCallback from '@mui/utils/useEventCallback';
+import { useRefWithInit } from '@base-ui-components/utils/useRefWithInit';
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
 import {
   itemsSelectors,
   expansionSelectors,
@@ -42,11 +42,11 @@ export const useTreeViewLazyLoading: TreeViewPlugin<UseTreeViewLazyLoadingSignat
   const isLazyLoadingEnabled = !!params.dataSource;
   const firstRenderRef = React.useRef(true);
 
-  const nestedDataManager = useLazyRef<NestedDataManager, void>(
+  const nestedDataManager = useRefWithInit<NestedDataManager>(
     () => new NestedDataManager(instance),
   ).current;
 
-  const cacheRef = useLazyRef<DataSourceCache, void>(() => getCache(params.dataSourceCache));
+  const cacheRef = useRefWithInit<DataSourceCache>(() => getCache(params.dataSourceCache));
 
   const setDataSourceLoading = useEventCallback((itemId: TreeViewItemId, isLoading: boolean) => {
     if (!isLazyLoadingEnabled) {

packages/x-tree-view/src/hooks/useApplyPropagationToSelectedItemsOnMount.ts

@@ -1,4 +1,4 @@
-import useLazyRef from '@mui/utils/useLazyRef';
+import { useRefWithInit } from '@base-ui-components/utils/useRefWithInit';
 import { TreeViewItemId, TreeViewSelectionPropagation } from '../models';
 import { getLookupFromArray } from '../internals/plugins/useTreeViewSelection/useTreeViewSelection.utils';
 
@@ -58,7 +58,7 @@ export function useApplyPropagationToSelectedItemsOnMount(
     selectionPropagation,
   } = parameters;
 
-  return useLazyRef(() => {
+  return useRefWithInit(() => {
     const lookup = getLookupFromArray(selectedItems);
 
     function walk(items: any[], isParentSelected: boolean) {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
+import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { TreeViewPlugin } from '../../models';
 import {
   UseTreeViewExpansionInstance,
@@ -26,7 +26,7 @@ export const useTreeViewExpansion: TreeViewPlugin<UseTreeViewExpansionSignature>
     defaultValue: params.defaultExpandedItems,
   });
 
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     const newExpansionTrigger = getExpansionTrigger({
       isItemEditable: params.isItemEditable,
       expansionTrigger: params.expansionTrigger,
@@ -132,7 +132,7 @@ export const useTreeViewExpansion: TreeViewPlugin<UseTreeViewExpansionSignature>
   /**
    * Update the controlled model when the `expandedItems` prop changes.
    */
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     const expandedItems = params.expandedItems;
     if (expandedItems !== undefined) {
       store.set('expansion', { ...store.state.expansion, expandedItems });

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
 import { EventHandlers } from '@mui/utils/types';
 import { useStoreEffect } from '@mui/x-internals/store';
 import { TreeViewPlugin } from '../../models';

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

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
 import { TreeViewPlugin } from '../../models';
 import {
   UseTreeViewItemsSignature,

packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx

@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
 import { useStore } from '@mui/x-internals/store';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useForkRef from '@mui/utils/useForkRef';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
+import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
+import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { TreeViewItemPlugin, TreeViewItemMeta, TreeViewPlugin } from '../../models';
 import { UseTreeViewJSXItemsSignature } from './useTreeViewJSXItems.types';
 import { useTreeViewContext } from '../../TreeViewProvider';
@@ -119,11 +119,11 @@ const useTreeViewJSXItemsItemPlugin: TreeViewItemPlugin = ({ props, rootRef, con
 
   const expandable = itemHasChildren(children);
   const pluginContentRef = React.useRef<HTMLDivElement>(null);
-  const handleContentRef = useForkRef(pluginContentRef, contentRef);
+  const handleContentRef = useMergedRefs(pluginContentRef, contentRef);
   const treeId = useStore(store, idSelectors.treeId);
 
   // Prevent any flashing
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     const idAttribute = generateTreeItemIdAttribute({ itemId, treeId, id });
     registerChild(idAttribute, itemId);
 
@@ -133,7 +133,7 @@ const useTreeViewJSXItemsItemPlugin: TreeViewItemPlugin = ({ props, rootRef, con
     };
   }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
 
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     return instance.insertJSXItem({
       id: itemId,
       idAttribute: id,

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

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { useStore } from '@mui/x-internals/store';
 import { useRtl } from '@mui/system/RtlProvider';
-import useEventCallback from '@mui/utils/useEventCallback';
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
 import { TreeViewCancellableEvent } from '../../../models';
 import { TreeViewItemMeta, TreeViewPlugin } from '../../models';
 import {

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

@@ -1,4 +1,4 @@
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { TreeViewPlugin } from '../../models';
 import { TreeViewItemId } from '../../../models';
 import { UseTreeViewLabelSignature } from './useTreeViewLabel.types';
@@ -44,7 +44,7 @@ export const useTreeViewLabel: TreeViewPlugin<UseTreeViewLabelSignature> = ({ st
     }
   };
 
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     store.set('label', { ...store.state.items, isItemEditable: params.isItemEditable });
   }, [store, params.isItemEditable]);
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { TreeViewPlugin } from '../../models';
 import { TreeViewItemId } from '../../../models';
 import {
@@ -224,7 +224,7 @@ export const useTreeViewSelection: TreeViewPlugin<UseTreeViewSelectionSignature>
     setSelectedItems(event, newSelectedItems);
   };
 
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     store.set('selection', {
       selectedItems:
         params.selectedItems === undefined

packages/x-tree-view/src/internals/useTreeView/useTreeView.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRefWithInit } from '@base-ui-components/utils/useRefWithInit';
 import { Store } from '@mui/x-internals/store';
-import useForkRef from '@mui/utils/useForkRef';
+import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
 import { EventHandlers } from '@mui/utils/types';
 import {
   TreeViewAnyPluginSignature,
@@ -81,7 +81,7 @@ export const useTreeView = <
   const instance = useRefWithInit(() => ({}) as TreeViewInstance<TSignatures>).current;
   const publicAPI = useTreeViewApiInitialization<TreeViewPublicAPI<TSignatures>>(apiRef);
   const innerRootRef = React.useRef<HTMLUListElement>(null);
-  const handleRootRef = useForkRef(innerRootRef, rootRef);
+  const handleRootRef = useMergedRefs(innerRootRef, rootRef);
 
   const store = useRefWithInit(() => {
     const initialState = {} as TreeViewState<TSignaturesWithCorePluginSignatures>;

packages/x-tree-view/src/useTreeItem/useTreeItem.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useStore } from '@mui/x-internals/store';
 import { EventHandlers } from '@mui/utils/types';
 import extractEventHandlers from '@mui/utils/extractEventHandlers';
-import useForkRef from '@mui/utils/useForkRef';
+import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
 import { TreeViewCancellableEvent } from '../models';
 import {
   UseTreeItemParameters,
@@ -65,8 +65,8 @@ export const useTreeItem = <
   const { interactions, status } = useTreeItemUtils({ itemId, children });
   const rootRefObject = React.useRef<HTMLLIElement>(null);
   const contentRefObject = React.useRef<HTMLDivElement>(null);
-  const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject)!;
-  const handleContentRef = useForkRef(contentRef, contentRefObject)!;
+  const handleRootRef = useMergedRefs(rootRef, pluginRootRef, rootRefObject)!;
+  const handleContentRef = useMergedRefs(contentRef, contentRefObject)!;
   const checkboxRef = React.useRef<HTMLButtonElement>(null);
 
   const treeId = useStore(store, idSelectors.treeId);