@mui/x-tree-view-pro 8.12.0 → 8.13.1

package/CHANGELOG.md

@@ -5,6 +5,213 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.13.1
+
+_Oct 1, 2025_
+
+- 🐛 Fix `@mui/x-charts-pro` failure on import due to missing `@mui/x-internals` release
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.13.1`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@8.13.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.13.1`.
+
+#### `@mui/x-data-grid-premium@8.13.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.13.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.12.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.12.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.13.1`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@8.13.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.13.1`, plus:
+
+- [charts-pro] Fix `@mui/x-charts-pro` failure on import due to missing `@mui/x-internals` release @bernardobelchior
+
+#### `@mui/x-charts-premium@8.13.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.13.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.13.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.13.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.13.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.12.0`
+
+Internal changes.
+
+## 8.13.0
+
+_Oct 1, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 The chart zoom now supports the `tapAndDrag` gesture. Zoom in/out by tapping twice and dragging vertically.
+- 🔎 Charts now allow [fine-grained control for zoom interactions](https://mui.com/x/react-charts/zoom-and-pan/#zoom-interactions-configuration).
+  ```jsx
+  <BarChartPro
+    zoomInteractionConfig={{
+      // Only zoom when Control key is pressed
+      zoom: [{ type: 'wheel', keys: ['Control'] }],
+      // Only pan when Shift key is pressed
+      pan: [{ type: 'drag', keys: ['Shift'] }],
+    }}
+  />
+  ```
+- ➡️ Data Grid grouping rows now persist their expansion state when the rows are updated.
+- 📜 Updated Data Grid vertical scrollbar to include pinned rows and aggregation sections.
+- 📌 Improved the appearance of [pinned columns](https://mui.com/x/react-data-grid/column-pinning/#pinned-columns-appearance) and [pinned rows](https://mui.com/x/react-data-grid/row-pinning/#pinned-rows-appearance) sections in the Data Grid.
+- 🚀 Tree View now fetches the children of expanded items on mount when using lazy loading.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @KenanYusuf, @mapache-salvaje, @MBilalShafi, @mnajdova, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.13.0`
+
+- [DataGrid] Add scroll shadows and fix scrollbar overlap (#16476) @KenanYusuf
+- [DataGrid] Fix row spanning stale state issue (#19733) @MBilalShafi
+- [DataGrid] Fix toolbar `slotProps` not being applied (#19769) @sai6855
+- [DataGrid] Skip calling `fetchRows()` when strategy is not initialized (#19728) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.13.0`, plus:
+
+- [DataGridPro] Retain expansion state on rows update (#19697) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.13.0`, plus:
+
+- [DataGridPremium] Add `metadata.referenceId` to AI assistant prompt resolver (#19695) @hasdfa
+- [DataGridPremium] Fix aggregation value retrieval (#19724) @arminmeh
+- [DataGridPremium] Get correct active chart id while rebuilding data (#19720) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.12.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.12.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.13.0`
+
+- [charts] Add `tapAndDrag` zoom gesture (#19727) @JCQuintas
+- [charts] Add arc focus indicator that follows the arc form (#19696) @mnajdova
+- [charts] Fix outline color (#19752) @alexfauquette
+- [charts] Improve tooltip doc (#19731) @JCQuintas
+- [charts] Make axis highlight reflect the keyboard interaction (#19631) @alexfauquette
+- [charts] Prevent horizontal scroll on keyboard navigation (#19704) @alexfauquette
+- [charts] Simplify gestures by removing bindings (#19767) @JCQuintas
+
+#### `@mui/x-charts-pro@8.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.13.0`, plus:
+
+- [charts-pro] Allow zoom interactions to be configured (#18646) @JCQuintas
+- [charts-pro] Fix zoom preview having wrong domain in some cases (#19723) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.13.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.13.0`
+
+- [tree view] Export the `apiRef` type of each Tree View component (#19543) @flaviendelangle
+- [tree view] Fix indeterminate checkbox state (#19544) @flaviendelangle
+- [tree view] Improve the lazy loading initial expansion (#19284) @flaviendelangle
+- [tree view] Use Base UI utils whenever possible (#19502) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.13.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.12.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add a recipe to customize editing component with Autocomplete (#19651) @siriwatknp
+- [docs] Refine the electricity scatter tooltip (#19689) @alexfauquette
+- [docs] Revise the Axis doc (#19052) @mapache-salvaje
+- [docs] Remove reference to nonexistent `FocusedMark` API page (#19773) @bernardobelchior
+
+### Core
+
+- [code-infra] Change charts codspeed integration to use walltime (#19729) @JCQuintas
+- [code-infra] Port stylelint from core repo (#19633) @Janpot
+- [code-infra] Stabilize fake timers in regression tests (#19719) @Janpot
+- [code-infra] Stabilize size for bundles with `releaseInfo` (#19674) @Janpot
+- [code-infra] Fix `pnpm-lock.yaml` broken lockfile (#19755) @bernardobelchior
+
+## 8.12.1
+
+_Sep 25, 2025_
+
+Release highlight ✨:
+
+- 🐞 Hotfix for Grid-Charts integration issue with aggregated values
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.12.1`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@8.12.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.12.1`.
+
+#### `@mui/x-data-grid-premium@8.12.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.12.1`, plus:
+
+- [DataGridPremium] Collect aggregated values properly for the charts integration context (#19714) @arminmeh
+
 ## 8.12.0
 
 _Sep 25, 2025_

package/RichTreeViewPro/RichTreeViewPro.js

@@ -52,7 +52,7 @@ const RichTreeViewProRoot = exports.RichTreeViewProRoot = (0, _zeroStyled.styled
   outline: 0,
   position: 'relative'
 });
-const releaseInfo = "MTc1ODc1MTIwMDAwMA==";
+const releaseInfo = "MTc1OTI3NjgwMDAwMA==";
 
 /**
  *

package/RichTreeViewPro/RichTreeViewPro.types.d.ts

@@ -15,7 +15,7 @@ export interface RichTreeViewProSlots extends TreeViewSlots, RichTreeViewItemsSl
 export interface RichTreeViewProSlotProps<R extends {}, Multiple extends boolean | undefined> extends TreeViewSlotProps, RichTreeViewItemsSlotProps {
   root?: SlotComponentProps<'ul', {}, RichTreeViewProProps<R, Multiple>>;
 }
-type RichTreeViewProApiRef = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewProPluginSignatures>> | undefined>;
+export type RichTreeViewProApiRef = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewProPluginSignatures>> | undefined>;
 export interface RichTreeViewProPropsBase extends React.HTMLAttributes<HTMLUListElement> {
   className?: string;
   /**
@@ -42,5 +42,4 @@ export interface RichTreeViewProProps<R extends {}, Multiple extends boolean | u
    * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
    */
   apiRef?: RichTreeViewProApiRef;
-}
-export {};
+}

package/RichTreeViewPro/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./RichTreeViewPro.js";
 export * from "./richTreeViewProClasses.js";
-export type { RichTreeViewProProps, RichTreeViewProPropsBase, RichTreeViewProSlots, RichTreeViewProSlotProps } from "./RichTreeViewPro.types.js";
+export type { RichTreeViewProProps, RichTreeViewProPropsBase, RichTreeViewProSlots, RichTreeViewProSlotProps, RichTreeViewProApiRef } from "./RichTreeViewPro.types.js";
 export type { RichTreeViewProPluginSignatures } from "./RichTreeViewPro.plugins.js";

package/esm/RichTreeViewPro/RichTreeViewPro.js

@@ -45,7 +45,7 @@ export const RichTreeViewProRoot = styled('ul', {
   outline: 0,
   position: 'relative'
 });
-const releaseInfo = "MTc1ODc1MTIwMDAwMA==";
+const releaseInfo = "MTc1OTI3NjgwMDAwMA==";
 
 /**
  *

package/esm/RichTreeViewPro/RichTreeViewPro.types.d.ts

@@ -15,7 +15,7 @@ export interface RichTreeViewProSlots extends TreeViewSlots, RichTreeViewItemsSl
 export interface RichTreeViewProSlotProps<R extends {}, Multiple extends boolean | undefined> extends TreeViewSlotProps, RichTreeViewItemsSlotProps {
   root?: SlotComponentProps<'ul', {}, RichTreeViewProProps<R, Multiple>>;
 }
-type RichTreeViewProApiRef = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewProPluginSignatures>> | undefined>;
+export type RichTreeViewProApiRef = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewProPluginSignatures>> | undefined>;
 export interface RichTreeViewProPropsBase extends React.HTMLAttributes<HTMLUListElement> {
   className?: string;
   /**
@@ -42,5 +42,4 @@ export interface RichTreeViewProProps<R extends {}, Multiple extends boolean | u
    * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
    */
   apiRef?: RichTreeViewProApiRef;
-}
-export {};
+}

package/esm/RichTreeViewPro/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./RichTreeViewPro.js";
 export * from "./richTreeViewProClasses.js";
-export type { RichTreeViewProProps, RichTreeViewProPropsBase, RichTreeViewProSlots, RichTreeViewProSlotProps } from "./RichTreeViewPro.types.js";
+export type { RichTreeViewProProps, RichTreeViewProPropsBase, RichTreeViewProSlots, RichTreeViewProSlotProps, RichTreeViewProApiRef } from "./RichTreeViewPro.types.js";
 export type { RichTreeViewProPluginSignatures } from "./RichTreeViewPro.plugins.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view-pro v8.12.0
+ * @mui/x-tree-view-pro v8.13.1
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { itemsSelectors, labelSelectors } from '@mui/x-tree-view/internals';
 import { chooseActionToApply, isAncestor, moveItemInTree } from "./useTreeViewItemsReordering.utils.js";
 import { useTreeViewItemsReorderingItemPlugin } from "./useTreeViewItemsReordering.itemPlugin.js";
@@ -171,7 +171,7 @@ export const useTreeViewItemsReordering = ({
       })
     }));
   }, [store, params.itemChildrenIndentation]);
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     store.set('itemsReordering', _extends({}, store.state.itemsReordering, {
       isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
     }));

package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.d.ts

@@ -1,3 +1,2 @@
-import { TreeViewPlugin } from '@mui/x-tree-view/internals';
-import type { UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
+import { TreeViewPlugin, UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
 export declare const useTreeViewLazyLoading: TreeViewPlugin<UseTreeViewLazyLoadingSignature>;

package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js

@@ -2,205 +2,144 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useLazyRef from '@mui/utils/useLazyRef';
-import useEventCallback from '@mui/utils/useEventCallback';
-import { itemsSelectors, expansionSelectors, selectionSelectors, lazyLoadingSelectors, useInstanceEventHandler } from '@mui/x-tree-view/internals';
+import { useRefWithInit } from '@base-ui-components/utils/useRefWithInit';
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { itemsSelectors, expansionSelectors, selectionSelectors, lazyLoadingSelectors, useInstanceEventHandler, TREE_VIEW_ROOT_PARENT_ID } from '@mui/x-tree-view/internals';
 import { DataSourceCacheDefault } from '@mui/x-tree-view/utils';
 import { NestedDataManager } from "./utils.js";
 const INITIAL_STATE = {
   loading: {},
   errors: {}
 };
-const noopCache = {
-  clear: () => {},
-  get: () => undefined,
-  set: () => {}
-};
-function getCache(cacheProp) {
-  if (cacheProp === null) {
-    return noopCache;
-  }
-  return cacheProp ?? new DataSourceCacheDefault({});
-}
 export const useTreeViewLazyLoading = ({
   instance,
   params,
   store
 }) => {
-  const isLazyLoadingEnabled = !!params.dataSource;
-  const firstRenderRef = React.useRef(true);
-  const nestedDataManager = useLazyRef(() => new NestedDataManager(instance)).current;
-  const cacheRef = useLazyRef(() => getCache(params.dataSourceCache));
+  const nestedDataManager = useRefWithInit(() => new NestedDataManager(instance)).current;
+  const cache = useRefWithInit(() => params.dataSourceCache ?? new DataSourceCacheDefault({})).current;
   const setDataSourceLoading = useEventCallback((itemId, isLoading) => {
-    if (!isLazyLoadingEnabled) {
+    if (!params.dataSource) {
       return;
     }
-    if (lazyLoadingSelectors.isItemLoading(store.state, itemId) === isLoading) {
+    const itemIdWithDefault = itemId ?? TREE_VIEW_ROOT_PARENT_ID;
+    if (lazyLoadingSelectors.isItemLoading(store.state, itemIdWithDefault) === isLoading) {
       return;
     }
-    const loadingState = _extends({}, store.state.lazyLoading.dataSource.loading);
+    const loading = _extends({}, store.state.lazyLoading.dataSource.loading);
     if (isLoading === false) {
-      delete loadingState[itemId];
+      delete loading[itemIdWithDefault];
     } else {
-      loadingState[itemId] = isLoading;
+      loading[itemIdWithDefault] = isLoading;
     }
     store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
       dataSource: _extends({}, store.state.lazyLoading.dataSource, {
-        loading: loadingState
+        loading
       })
     }));
   });
-  const setDataSourceError = (itemId, error) => {
-    if (!isLazyLoadingEnabled) {
+  const setDataSourceError = useEventCallback((itemId, error) => {
+    if (!params.dataSource) {
+      return;
+    }
+    if (lazyLoadingSelectors.itemError(store.state, itemId) === error) {
       return;
     }
+    const stateId = itemId ?? TREE_VIEW_ROOT_PARENT_ID;
     const errors = _extends({}, store.state.lazyLoading.dataSource.errors);
-    if (error === null && errors[itemId] !== undefined) {
-      delete errors[itemId];
+    if (error === null && errors[stateId] !== undefined) {
+      delete errors[stateId];
     } else {
-      errors[itemId] = error;
+      errors[stateId] = error;
     }
-    errors[itemId] = error;
     store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
       dataSource: _extends({}, store.state.lazyLoading.dataSource, {
         errors
       })
     }));
-  };
-  const resetDataSourceState = useEventCallback(() => {
-    if (!isLazyLoadingEnabled) {
-      return;
-    }
-    store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
-      dataSource: INITIAL_STATE
-    }));
-  });
-  const fetchItems = useEventCallback(async parentIds => {
-    if (!isLazyLoadingEnabled) {
-      return;
-    }
-    const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
-    const getTreeItems = params.dataSource?.getTreeItems;
-    if (!getTreeItems) {
-      return;
-    }
-    if (parentIds) {
-      await nestedDataManager.queue(parentIds);
-      return;
-    }
-    nestedDataManager.clear();
-    // handle loading here
-    instance.setTreeViewLoading(true);
-    // reset the state if we are refetching the first visible items
-    if (lazyLoadingSelectors.dataSource(store.state) !== INITIAL_STATE) {
-      resetDataSourceState();
-    }
-    // handle caching here
-    const cachedData = cacheRef.current.get('root');
-    if (cachedData !== undefined && cachedData !== -1) {
-      instance.addItems({
-        items: cachedData,
-        depth: 0,
-        getChildrenCount
-      });
-      instance.setTreeViewLoading(false);
-      return;
-    }
-    try {
-      const getTreeItemsResponse = await getTreeItems();
-
-      // set caching
-      cacheRef.current.set('root', getTreeItemsResponse);
-
-      // update the items in the state
-      instance.addItems({
-        items: getTreeItemsResponse,
-        depth: 0,
-        getChildrenCount
-      });
-    } catch (error) {
-      // set the items to empty
-      instance.addItems({
-        items: [],
-        depth: 0,
-        getChildrenCount
-      });
-      // set error state
-      instance.setTreeViewError(error);
-    } finally {
-      // set loading state
-      instance.setTreeViewLoading(false);
-    }
   });
+  const fetchItems = useEventCallback(async parentIds => nestedDataManager.queue(parentIds));
   const fetchItemChildren = useEventCallback(async ({
     itemId,
     forceRefresh
   }) => {
-    if (!isLazyLoadingEnabled) {
+    if (!params.dataSource) {
       return;
     }
-    const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
-    const getTreeItems = params.dataSource?.getTreeItems;
-    if (!getTreeItems) {
+    const {
+      getChildrenCount,
+      getTreeItems
+    } = params.dataSource;
+    // clear the request if the item is not in the tree
+    if (itemId != null && !itemsSelectors.itemMeta(store.state, itemId)) {
       nestedDataManager.clearPendingRequest(itemId);
       return;
     }
-    const parent = itemsSelectors.itemMeta(store.state, itemId);
-    if (!parent) {
-      nestedDataManager.clearPendingRequest(itemId);
-      return;
-    }
-    const depth = parent.depth ? parent.depth + 1 : 1;
 
-    // handle loading here
-    instance.setDataSourceLoading(itemId, true);
-
-    // handle caching here
+    // reset the state if we are fetching the root items
+    if (itemId == null && lazyLoadingSelectors.dataSource(store.state) !== INITIAL_STATE) {
+      store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
+        dataSource: INITIAL_STATE
+      }));
+    }
+    const cacheKey = itemId ?? TREE_VIEW_ROOT_PARENT_ID;
     if (!forceRefresh) {
-      const cachedData = cacheRef.current.get(itemId);
+      // reads from the value from the cache
+      const cachedData = cache.get(cacheKey);
       if (cachedData !== undefined && cachedData !== -1) {
-        nestedDataManager.setRequestSettled(itemId);
-        instance.addItems({
+        if (itemId != null) {
+          nestedDataManager.setRequestSettled(itemId);
+        }
+        instance.setItemChildren({
           items: cachedData,
-          depth,
           parentId: itemId,
           getChildrenCount
         });
         instance.setDataSourceLoading(itemId, false);
         return;
       }
+
+      // set the item loading status to true
+      instance.setDataSourceLoading(itemId, true);
       if (cachedData === -1) {
         instance.removeChildren(itemId);
       }
     }
-    if (lazyLoadingSelectors.itemHasError(store.state, itemId)) {
+
+    // reset existing error if any
+    if (lazyLoadingSelectors.itemError(store.state, itemId)) {
       instance.setDataSourceError(itemId, null);
     }
     try {
-      const getTreeItemsResponse = await getTreeItems(itemId);
-      nestedDataManager.setRequestSettled(itemId);
-
-      // set caching
-      cacheRef.current.set(itemId, getTreeItemsResponse);
-      // update the items in the state
-      if (forceRefresh) {
-        instance.removeChildren(itemId);
+      let response;
+      if (itemId == null) {
+        response = await getTreeItems();
+      } else {
+        response = await getTreeItems(itemId);
+        nestedDataManager.setRequestSettled(itemId);
       }
-      instance.addItems({
-        items: getTreeItemsResponse,
-        depth,
+      // save the response in the cache
+      cache.set(cacheKey, response);
+      // update the items in the state
+      instance.setItemChildren({
+        items: response,
         parentId: itemId,
         getChildrenCount
       });
     } catch (error) {
       const childrenFetchError = error;
-      // handle errors here
+      // set the item error in the state
       instance.setDataSourceError(itemId, childrenFetchError);
-      instance.removeChildren(itemId);
+      if (forceRefresh) {
+        instance.removeChildren(itemId);
+      }
     } finally {
-      // unset loading
+      // set the item loading status to false
       instance.setDataSourceLoading(itemId, false);
-      nestedDataManager.setRequestSettled(itemId);
+      if (itemId != null) {
+        nestedDataManager.setRequestSettled(itemId);
+      }
     }
   });
   const updateItemChildren = useEventCallback(itemId => {
@@ -210,15 +149,15 @@ export const useTreeViewLazyLoading = ({
     });
   });
   useInstanceEventHandler(instance, 'beforeItemToggleExpansion', async eventParameters => {
-    if (!isLazyLoadingEnabled || !eventParameters.shouldBeExpanded) {
+    if (!params.dataSource || !eventParameters.shouldBeExpanded) {
       return;
     }
-    // prevent the default expansion behavior
 
+    // prevent the default expansion behavior
     eventParameters.isExpansionPrevented = true;
     await instance.fetchItems([eventParameters.itemId]);
-    const itemHasError = lazyLoadingSelectors.itemHasError(store.state, eventParameters.itemId);
-    if (!itemHasError) {
+    const hasError = lazyLoadingSelectors.itemHasError(store.state, eventParameters.itemId);
+    if (!hasError) {
       instance.applyItemExpansion({
         itemId: eventParameters.itemId,
         shouldBeExpanded: true,
@@ -235,29 +174,12 @@ export const useTreeViewLazyLoading = ({
       }
     }
   });
-  React.useEffect(() => {
-    if (isLazyLoadingEnabled && firstRenderRef.current) {
-      store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
-        enabled: true
-      }));
-      if (params.items.length) {
-        const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
-        instance.addItems({
-          items: params.items,
-          depth: 0,
-          getChildrenCount
-        });
-      } else {
-        const expandedItems = expansionSelectors.expandedItemsRaw(store.state);
-        if (expandedItems.length > 0) {
-          instance.resetItemExpansion();
-        }
-        instance.fetchItems();
-      }
-      firstRenderRef.current = false;
-    }
-  }, [instance, params.items, params.dataSource, isLazyLoadingEnabled, store]);
-  if (isLazyLoadingEnabled) {
+  useLazyLoadOnMount({
+    instance,
+    params,
+    store
+  });
+  if (params.dataSource) {
     instance.preventItemUpdates();
   }
   return {
@@ -282,4 +204,48 @@ useTreeViewLazyLoading.getInitialState = () => ({
 useTreeViewLazyLoading.params = {
   dataSource: true,
   dataSourceCache: true
-};
+};
+function useLazyLoadOnMount({
+  instance,
+  params,
+  store
+}) {
+  const firstRenderRef = React.useRef(true);
+  useEnhancedEffect(() => {
+    if (!params.dataSource || !firstRenderRef.current) {
+      return;
+    }
+    firstRenderRef.current = false;
+    store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
+      enabled: true
+    }));
+    async function fetchAllExpandedItems() {
+      async function fetchChildrenIfExpanded(parentIds) {
+        const expandedItems = parentIds.filter(id => expansionSelectors.isItemExpanded(store.state, id));
+        if (expandedItems.length > 0) {
+          const itemsToLazyLoad = expandedItems.filter(id => itemsSelectors.itemOrderedChildrenIds(store.state, id).length === 0);
+          if (itemsToLazyLoad.length > 0) {
+            await instance.fetchItems(itemsToLazyLoad);
+          }
+          const childrenIds = expandedItems.flatMap(id => itemsSelectors.itemOrderedChildrenIds(store.state, id));
+          await fetchChildrenIfExpanded(childrenIds);
+        }
+      }
+      if (params.items.length) {
+        const newlyExpandableItems = getExpandableItemsFromDataSource(store, params.dataSource);
+        if (newlyExpandableItems.length > 0) {
+          instance.addExpandableItems(newlyExpandableItems);
+        }
+      } else {
+        await instance.fetchItemChildren({
+          itemId: null
+        });
+      }
+      await fetchChildrenIfExpanded(itemsSelectors.itemOrderedChildrenIds(store.state, null));
+    }
+    fetchAllExpandedItems();
+  }, [instance, params.items, params.dataSource, store]);
+}
+function getExpandableItemsFromDataSource(store, dataSource) {
+  return Object.values(store.state.items.itemMetaLookup).filter(itemMeta => !itemMeta.expandable && dataSource.getChildrenCount(store.state.items.itemModelLookup[itemMeta.id]) > 0).map(item => item.id);
+}

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view-pro v8.12.0
+ * @mui/x-tree-view-pro v8.13.1
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewItemsReordering = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
 var _internals = require("@mui/x-tree-view/internals");
 var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering.utils");
 var _useTreeViewItemsReordering2 = require("./useTreeViewItemsReordering.itemPlugin");
@@ -179,7 +179,7 @@ const useTreeViewItemsReordering = ({
       })
     }));
   }, [store, params.itemChildrenIndentation]);
-  (0, _useEnhancedEffect.default)(() => {
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
       isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
     }));

package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.d.ts

@@ -1,3 +1,2 @@
-import { TreeViewPlugin } from '@mui/x-tree-view/internals';
-import type { UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
+import { TreeViewPlugin, UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
 export declare const useTreeViewLazyLoading: TreeViewPlugin<UseTreeViewLazyLoadingSignature>;

package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js

@@ -9,8 +9,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewLazyLoading = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useRefWithInit = require("@base-ui-components/utils/useRefWithInit");
+var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _internals = require("@mui/x-tree-view/internals");
 var _utils = require("@mui/x-tree-view/utils");
 var _utils2 = require("./utils");
@@ -18,214 +19,152 @@ const INITIAL_STATE = {
   loading: {},
   errors: {}
 };
-const noopCache = {
-  clear: () => {},
-  get: () => undefined,
-  set: () => {}
-};
-function getCache(cacheProp) {
-  if (cacheProp === null) {
-    return noopCache;
-  }
-  return cacheProp ?? new _utils.DataSourceCacheDefault({});
-}
 const useTreeViewLazyLoading = ({
   instance,
   params,
   store
 }) => {
-  const isLazyLoadingEnabled = !!params.dataSource;
-  const firstRenderRef = React.useRef(true);
-  const nestedDataManager = (0, _useLazyRef.default)(() => new _utils2.NestedDataManager(instance)).current;
-  const cacheRef = (0, _useLazyRef.default)(() => getCache(params.dataSourceCache));
-  const setDataSourceLoading = (0, _useEventCallback.default)((itemId, isLoading) => {
-    if (!isLazyLoadingEnabled) {
+  const nestedDataManager = (0, _useRefWithInit.useRefWithInit)(() => new _utils2.NestedDataManager(instance)).current;
+  const cache = (0, _useRefWithInit.useRefWithInit)(() => params.dataSourceCache ?? new _utils.DataSourceCacheDefault({})).current;
+  const setDataSourceLoading = (0, _useEventCallback.useEventCallback)((itemId, isLoading) => {
+    if (!params.dataSource) {
       return;
     }
-    if (_internals.lazyLoadingSelectors.isItemLoading(store.state, itemId) === isLoading) {
+    const itemIdWithDefault = itemId ?? _internals.TREE_VIEW_ROOT_PARENT_ID;
+    if (_internals.lazyLoadingSelectors.isItemLoading(store.state, itemIdWithDefault) === isLoading) {
       return;
     }
-    const loadingState = (0, _extends2.default)({}, store.state.lazyLoading.dataSource.loading);
+    const loading = (0, _extends2.default)({}, store.state.lazyLoading.dataSource.loading);
     if (isLoading === false) {
-      delete loadingState[itemId];
+      delete loading[itemIdWithDefault];
     } else {
-      loadingState[itemId] = isLoading;
+      loading[itemIdWithDefault] = isLoading;
     }
     store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
       dataSource: (0, _extends2.default)({}, store.state.lazyLoading.dataSource, {
-        loading: loadingState
+        loading
       })
     }));
   });
-  const setDataSourceError = (itemId, error) => {
-    if (!isLazyLoadingEnabled) {
+  const setDataSourceError = (0, _useEventCallback.useEventCallback)((itemId, error) => {
+    if (!params.dataSource) {
+      return;
+    }
+    if (_internals.lazyLoadingSelectors.itemError(store.state, itemId) === error) {
       return;
     }
+    const stateId = itemId ?? _internals.TREE_VIEW_ROOT_PARENT_ID;
     const errors = (0, _extends2.default)({}, store.state.lazyLoading.dataSource.errors);
-    if (error === null && errors[itemId] !== undefined) {
-      delete errors[itemId];
+    if (error === null && errors[stateId] !== undefined) {
+      delete errors[stateId];
     } else {
-      errors[itemId] = error;
+      errors[stateId] = error;
     }
-    errors[itemId] = error;
     store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
       dataSource: (0, _extends2.default)({}, store.state.lazyLoading.dataSource, {
         errors
       })
     }));
-  };
-  const resetDataSourceState = (0, _useEventCallback.default)(() => {
-    if (!isLazyLoadingEnabled) {
-      return;
-    }
-    store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
-      dataSource: INITIAL_STATE
-    }));
   });
-  const fetchItems = (0, _useEventCallback.default)(async parentIds => {
-    if (!isLazyLoadingEnabled) {
-      return;
-    }
-    const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
-    const getTreeItems = params.dataSource?.getTreeItems;
-    if (!getTreeItems) {
-      return;
-    }
-    if (parentIds) {
-      await nestedDataManager.queue(parentIds);
-      return;
-    }
-    nestedDataManager.clear();
-    // handle loading here
-    instance.setTreeViewLoading(true);
-    // reset the state if we are refetching the first visible items
-    if (_internals.lazyLoadingSelectors.dataSource(store.state) !== INITIAL_STATE) {
-      resetDataSourceState();
-    }
-    // handle caching here
-    const cachedData = cacheRef.current.get('root');
-    if (cachedData !== undefined && cachedData !== -1) {
-      instance.addItems({
-        items: cachedData,
-        depth: 0,
-        getChildrenCount
-      });
-      instance.setTreeViewLoading(false);
-      return;
-    }
-    try {
-      const getTreeItemsResponse = await getTreeItems();
-
-      // set caching
-      cacheRef.current.set('root', getTreeItemsResponse);
-
-      // update the items in the state
-      instance.addItems({
-        items: getTreeItemsResponse,
-        depth: 0,
-        getChildrenCount
-      });
-    } catch (error) {
-      // set the items to empty
-      instance.addItems({
-        items: [],
-        depth: 0,
-        getChildrenCount
-      });
-      // set error state
-      instance.setTreeViewError(error);
-    } finally {
-      // set loading state
-      instance.setTreeViewLoading(false);
-    }
-  });
-  const fetchItemChildren = (0, _useEventCallback.default)(async ({
+  const fetchItems = (0, _useEventCallback.useEventCallback)(async parentIds => nestedDataManager.queue(parentIds));
+  const fetchItemChildren = (0, _useEventCallback.useEventCallback)(async ({
     itemId,
     forceRefresh
   }) => {
-    if (!isLazyLoadingEnabled) {
+    if (!params.dataSource) {
       return;
     }
-    const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
-    const getTreeItems = params.dataSource?.getTreeItems;
-    if (!getTreeItems) {
+    const {
+      getChildrenCount,
+      getTreeItems
+    } = params.dataSource;
+    // clear the request if the item is not in the tree
+    if (itemId != null && !_internals.itemsSelectors.itemMeta(store.state, itemId)) {
       nestedDataManager.clearPendingRequest(itemId);
       return;
     }
-    const parent = _internals.itemsSelectors.itemMeta(store.state, itemId);
-    if (!parent) {
-      nestedDataManager.clearPendingRequest(itemId);
-      return;
-    }
-    const depth = parent.depth ? parent.depth + 1 : 1;
 
-    // handle loading here
-    instance.setDataSourceLoading(itemId, true);
-
-    // handle caching here
+    // reset the state if we are fetching the root items
+    if (itemId == null && _internals.lazyLoadingSelectors.dataSource(store.state) !== INITIAL_STATE) {
+      store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
+        dataSource: INITIAL_STATE
+      }));
+    }
+    const cacheKey = itemId ?? _internals.TREE_VIEW_ROOT_PARENT_ID;
     if (!forceRefresh) {
-      const cachedData = cacheRef.current.get(itemId);
+      // reads from the value from the cache
+      const cachedData = cache.get(cacheKey);
       if (cachedData !== undefined && cachedData !== -1) {
-        nestedDataManager.setRequestSettled(itemId);
-        instance.addItems({
+        if (itemId != null) {
+          nestedDataManager.setRequestSettled(itemId);
+        }
+        instance.setItemChildren({
           items: cachedData,
-          depth,
           parentId: itemId,
           getChildrenCount
         });
         instance.setDataSourceLoading(itemId, false);
         return;
       }
+
+      // set the item loading status to true
+      instance.setDataSourceLoading(itemId, true);
       if (cachedData === -1) {
         instance.removeChildren(itemId);
       }
     }
-    if (_internals.lazyLoadingSelectors.itemHasError(store.state, itemId)) {
+
+    // reset existing error if any
+    if (_internals.lazyLoadingSelectors.itemError(store.state, itemId)) {
       instance.setDataSourceError(itemId, null);
     }
     try {
-      const getTreeItemsResponse = await getTreeItems(itemId);
-      nestedDataManager.setRequestSettled(itemId);
-
-      // set caching
-      cacheRef.current.set(itemId, getTreeItemsResponse);
-      // update the items in the state
-      if (forceRefresh) {
-        instance.removeChildren(itemId);
+      let response;
+      if (itemId == null) {
+        response = await getTreeItems();
+      } else {
+        response = await getTreeItems(itemId);
+        nestedDataManager.setRequestSettled(itemId);
       }
-      instance.addItems({
-        items: getTreeItemsResponse,
-        depth,
+      // save the response in the cache
+      cache.set(cacheKey, response);
+      // update the items in the state
+      instance.setItemChildren({
+        items: response,
         parentId: itemId,
         getChildrenCount
       });
     } catch (error) {
       const childrenFetchError = error;
-      // handle errors here
+      // set the item error in the state
       instance.setDataSourceError(itemId, childrenFetchError);
-      instance.removeChildren(itemId);
+      if (forceRefresh) {
+        instance.removeChildren(itemId);
+      }
     } finally {
-      // unset loading
+      // set the item loading status to false
       instance.setDataSourceLoading(itemId, false);
-      nestedDataManager.setRequestSettled(itemId);
+      if (itemId != null) {
+        nestedDataManager.setRequestSettled(itemId);
+      }
     }
   });
-  const updateItemChildren = (0, _useEventCallback.default)(itemId => {
+  const updateItemChildren = (0, _useEventCallback.useEventCallback)(itemId => {
     return instance.fetchItemChildren({
       itemId,
       forceRefresh: true
     });
   });
   (0, _internals.useInstanceEventHandler)(instance, 'beforeItemToggleExpansion', async eventParameters => {
-    if (!isLazyLoadingEnabled || !eventParameters.shouldBeExpanded) {
+    if (!params.dataSource || !eventParameters.shouldBeExpanded) {
       return;
     }
-    // prevent the default expansion behavior
 
+    // prevent the default expansion behavior
     eventParameters.isExpansionPrevented = true;
     await instance.fetchItems([eventParameters.itemId]);
-    const itemHasError = _internals.lazyLoadingSelectors.itemHasError(store.state, eventParameters.itemId);
-    if (!itemHasError) {
+    const hasError = _internals.lazyLoadingSelectors.itemHasError(store.state, eventParameters.itemId);
+    if (!hasError) {
       instance.applyItemExpansion({
         itemId: eventParameters.itemId,
         shouldBeExpanded: true,
@@ -242,29 +181,12 @@ const useTreeViewLazyLoading = ({
       }
     }
   });
-  React.useEffect(() => {
-    if (isLazyLoadingEnabled && firstRenderRef.current) {
-      store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
-        enabled: true
-      }));
-      if (params.items.length) {
-        const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
-        instance.addItems({
-          items: params.items,
-          depth: 0,
-          getChildrenCount
-        });
-      } else {
-        const expandedItems = _internals.expansionSelectors.expandedItemsRaw(store.state);
-        if (expandedItems.length > 0) {
-          instance.resetItemExpansion();
-        }
-        instance.fetchItems();
-      }
-      firstRenderRef.current = false;
-    }
-  }, [instance, params.items, params.dataSource, isLazyLoadingEnabled, store]);
-  if (isLazyLoadingEnabled) {
+  useLazyLoadOnMount({
+    instance,
+    params,
+    store
+  });
+  if (params.dataSource) {
     instance.preventItemUpdates();
   }
   return {
@@ -290,4 +212,48 @@ useTreeViewLazyLoading.getInitialState = () => ({
 useTreeViewLazyLoading.params = {
   dataSource: true,
   dataSourceCache: true
-};
+};
+function useLazyLoadOnMount({
+  instance,
+  params,
+  store
+}) {
+  const firstRenderRef = React.useRef(true);
+  (0, _useEnhancedEffect.default)(() => {
+    if (!params.dataSource || !firstRenderRef.current) {
+      return;
+    }
+    firstRenderRef.current = false;
+    store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
+      enabled: true
+    }));
+    async function fetchAllExpandedItems() {
+      async function fetchChildrenIfExpanded(parentIds) {
+        const expandedItems = parentIds.filter(id => _internals.expansionSelectors.isItemExpanded(store.state, id));
+        if (expandedItems.length > 0) {
+          const itemsToLazyLoad = expandedItems.filter(id => _internals.itemsSelectors.itemOrderedChildrenIds(store.state, id).length === 0);
+          if (itemsToLazyLoad.length > 0) {
+            await instance.fetchItems(itemsToLazyLoad);
+          }
+          const childrenIds = expandedItems.flatMap(id => _internals.itemsSelectors.itemOrderedChildrenIds(store.state, id));
+          await fetchChildrenIfExpanded(childrenIds);
+        }
+      }
+      if (params.items.length) {
+        const newlyExpandableItems = getExpandableItemsFromDataSource(store, params.dataSource);
+        if (newlyExpandableItems.length > 0) {
+          instance.addExpandableItems(newlyExpandableItems);
+        }
+      } else {
+        await instance.fetchItemChildren({
+          itemId: null
+        });
+      }
+      await fetchChildrenIfExpanded(_internals.itemsSelectors.itemOrderedChildrenIds(store.state, null));
+    }
+    fetchAllExpandedItems();
+  }, [instance, params.items, params.dataSource, store]);
+}
+function getExpandableItemsFromDataSource(store, dataSource) {
+  return Object.values(store.state.items.itemMetaLookup).filter(itemMeta => !itemMeta.expandable && dataSource.getChildrenCount(store.state.items.itemModelLookup[itemMeta.id]) > 0).map(item => item.id);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view-pro",
-  "version": "8.12.0",
+  "version": "8.13.1",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Tree View components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -31,7 +31,7 @@
     "directory": "packages/x-tree-view-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.2",
+    "@babel/runtime": "^7.28.4",
     "@base-ui-components/utils": "0.1.1",
     "@mui/utils": "^7.3.2",
     "@types/react-transition-group": "^4.4.12",
@@ -40,9 +40,9 @@
     "react-transition-group": "^4.4.5",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
-    "@mui/x-internals": "8.12.0",
-    "@mui/x-tree-view": "8.12.0",
-    "@mui/x-license": "8.12.0"
+    "@mui/x-internals": "8.13.1",
+    "@mui/x-license": "8.12.0",
+    "@mui/x-tree-view": "8.13.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",