@mui/x-tree-view-pro 8.10.0 → 8.10.1

package/CHANGELOG.md

@@ -5,6 +5,102 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.10.1
+
+_Aug 15, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Y-axes can now be grouped by category when using `band` and `point` scales.
+- 📚 Documentation improvements
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @Janpot, @JCQuintas, @mnajdova, @oliviertassinari, @prakhargupta1, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.10.1`
+
+- [DataGrid] Fix scroll jumping (#19156) @romgrk
+- [DataGrid] Fix scroll restoration (#19182) @romgrk
+- [DataGrid] Fix "no row with id" error (#19193) @romgrk
+
+#### `@mui/x-data-grid-pro@8.10.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.10.1`.
+
+#### `@mui/x-data-grid-premium@8.10.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.10.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.10.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.10.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.10.0`.
+
+### Charts
+
+- Axes can now be grouped by category when using `band` and `point` scales
+
+  <img width="643" height="455" alt="Bar chart with y-axis grouped per categories" src="https://github.com/user-attachments/assets/59044afe-bcc5-4152-8bf1-225db0635025" />
+
+#### `@mui/x-charts@8.10.1`
+
+- [charts] Allow y-axis to be grouped (#19081) @JCQuintas
+- [charts] Fix default axis highlight for axes without data attribute (#18985) @alexfauquette
+- [charts] Fix tooltip mark unexpected wrapping in mobile (#19122) @bernardobelchior
+- [charts] Prevent overflow on charts tooltip (#19123) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.10.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.10.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.10.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.10.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.10.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.10.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add all planned charts on the overview page (#19077) @prakhargupta1
+- [docs] Add future charts components link in the sidebar (#19140) @prakhargupta1
+- [docs] Fix Heatmap docs duplicate text (#19138) @JCQuintas
+- [docs] Remove preview from Toolbar & Funnel (#19131) @mnajdova
+- [docs] Reproduce npm sparkline (#19089) @alexfauquette
+
+### Core
+
+- [core] Fix licensing model name (#19025) @oliviertassinari
+- [core] Fix usage of `:catalog` for `@babel/runtime` (#19028) @oliviertassinari
+- [core] Refactor virtualizer API (#18995) @romgrk
+
+### Miscellaneous
+
+- [code-infra] Remove namespaces (#19071) @Janpot
+- [code-infra] Fix `fs-extra` removal from `formattedTSDemos` script (#19132) @bernardobelchior
+- [code-infra] Remove unused code and dependency (#19139) @bernardobelchior
+- [code-infra] Replace `fs-extra` with `node:fs` where possible (#19127) @bernardobelchior
+- [internal] Edit, keep `lockFileMaintenance` simple @oliviertassinari
+- [internal] Fix writing style action name @oliviertassinari
+- [internal] Make it clear that `lockFileMaintenance` is enabled @oliviertassinari
+- [support-infra] Remove default issue label (#19104) @oliviertassinari
+
 ## 8.10.0
 
 _Aug 8, 2025_

package/RichTreeViewPro/RichTreeViewPro.js

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

package/esm/RichTreeViewPro/RichTreeViewPro.js

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

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view-pro v8.10.0
+ * @mui/x-tree-view-pro v8.10.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/useTreeViewLazyLoading/useTreeViewLazyLoading.js

@@ -4,7 +4,7 @@ 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 { selectorItemMeta, selectorIsItemSelected, useInstanceEventHandler, selectorDataSourceState, selectorGetTreeItemError } from '@mui/x-tree-view/internals';
+import { selectorItemMeta, selectorIsItemSelected, useInstanceEventHandler, selectorDataSourceState, selectorGetTreeItemError, selectorExpandedItems } from '@mui/x-tree-view/internals';
 import { DataSourceCacheDefault } from '@mui/x-tree-view/utils';
 import { NestedDataManager } from "./utils.js";
 const INITIAL_STATE = {
@@ -99,19 +99,23 @@ export const useTreeViewLazyLoading = ({
       return;
     }
     nestedDataManager.clear();
-
+    // handle loading here
+    instance.setTreeViewLoading(true);
     // reset the state if we are refetching the first visible items
     if (selectorDataSourceState(store.value) !== INITIAL_STATE) {
       resetDataSourceState();
     }
     // handle caching here
     const cachedData = cacheRef.current.get('root');
-    if (cachedData !== undefined) {
+    if (cachedData !== undefined && cachedData !== -1) {
+      instance.addItems({
+        items: cachedData,
+        depth: 0,
+        getChildrenCount
+      });
+      instance.setTreeViewLoading(false);
       return;
     }
-
-    // handle loading here
-    instance.setTreeViewLoading(true);
     try {
       const getTreeItemsResponse = await getTreeItems();
 
@@ -206,6 +210,8 @@ export const useTreeViewLazyLoading = ({
     if (!isLazyLoadingEnabled || !eventParameters.shouldBeExpanded) {
       return;
     }
+    // prevent the default expansion behavior
+
     eventParameters.isExpansionPrevented = true;
     await instance.fetchItems([eventParameters.itemId]);
     const fetchErrors = Boolean(selectorGetTreeItemError(store.value, eventParameters.itemId));
@@ -241,6 +247,10 @@ export const useTreeViewLazyLoading = ({
           getChildrenCount
         });
       } else {
+        const expandedItems = selectorExpandedItems(store.value);
+        if (expandedItems.length > 0) {
+          instance.resetItemExpansion();
+        }
         instance.fetchItems();
       }
       firstRenderRef.current = false;

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

@@ -21,65 +21,63 @@ export let RequestStatus = /*#__PURE__*/function (RequestStatus) {
  * Uses `ParentId` to uniquely identify a request
  */
 export class NestedDataManager {
+  pendingRequests = (() => new Set())();
+  queuedRequests = (() => new Set())();
+  settledRequests = (() => new Set())();
   constructor(instance, maxConcurrentRequests = MAX_CONCURRENT_REQUESTS) {
-    this.pendingRequests = new Set();
-    this.queuedRequests = new Set();
-    this.settledRequests = new Set();
-    this.instance = void 0;
-    this.maxConcurrentRequests = void 0;
-    this.processQueue = async () => {
-      if (this.queuedRequests.size === 0 || this.pendingRequests.size >= this.maxConcurrentRequests) {
-        return;
-      }
-      const loopLength = Math.min(this.maxConcurrentRequests - this.pendingRequests.size, this.queuedRequests.size);
-      if (loopLength === 0) {
-        return;
-      }
-      const fetchQueue = Array.from(this.queuedRequests);
-      const fetchPromises = [];
-      for (let i = 0; i < loopLength; i += 1) {
-        const id = fetchQueue[i];
-        this.queuedRequests.delete(id);
-        this.pendingRequests.add(id);
-        fetchPromises.push(this.instance.fetchItemChildren(id));
-      }
-      await Promise.all(fetchPromises);
-    };
-    this.queue = async ids => {
-      const loadingIds = {};
-      ids.forEach(id => {
-        this.queuedRequests.add(id);
-        loadingIds[id] = true;
-      });
-      await this.processQueue();
-    };
-    this.setRequestSettled = async id => {
-      this.pendingRequests.delete(id);
-      this.settledRequests.add(id);
-      await this.processQueue();
-    };
-    this.clear = () => {
-      this.queuedRequests.clear();
-      Array.from(this.pendingRequests).forEach(id => this.clearPendingRequest(id));
-    };
-    this.clearPendingRequest = async id => {
-      this.pendingRequests.delete(id);
-      await this.processQueue();
-    };
-    this.getRequestStatus = id => {
-      if (this.pendingRequests.has(id)) {
-        return RequestStatus.PENDING;
-      }
-      if (this.queuedRequests.has(id)) {
-        return RequestStatus.QUEUED;
-      }
-      if (this.settledRequests.has(id)) {
-        return RequestStatus.SETTLED;
-      }
-      return RequestStatus.UNKNOWN;
-    };
-    this.getActiveRequestsCount = () => this.pendingRequests.size + this.queuedRequests.size;
     this.instance = instance;
     this.maxConcurrentRequests = maxConcurrentRequests;
   }
+  processQueue = async () => {
+    if (this.queuedRequests.size === 0 || this.pendingRequests.size >= this.maxConcurrentRequests) {
+      return;
+    }
+    const loopLength = Math.min(this.maxConcurrentRequests - this.pendingRequests.size, this.queuedRequests.size);
+    if (loopLength === 0) {
+      return;
+    }
+    const fetchQueue = Array.from(this.queuedRequests);
+    const fetchPromises = [];
+    for (let i = 0; i < loopLength; i += 1) {
+      const id = fetchQueue[i];
+      this.queuedRequests.delete(id);
+      this.pendingRequests.add(id);
+      fetchPromises.push(this.instance.fetchItemChildren(id));
+    }
+    await Promise.all(fetchPromises);
+  };
+  queue = async ids => {
+    const loadingIds = {};
+    ids.forEach(id => {
+      this.queuedRequests.add(id);
+      loadingIds[id] = true;
+    });
+    await this.processQueue();
+  };
+  setRequestSettled = async id => {
+    this.pendingRequests.delete(id);
+    this.settledRequests.add(id);
+    await this.processQueue();
+  };
+  clear = () => {
+    this.queuedRequests.clear();
+    Array.from(this.pendingRequests).forEach(id => this.clearPendingRequest(id));
+  };
+  clearPendingRequest = async id => {
+    this.pendingRequests.delete(id);
+    await this.processQueue();
+  };
+  getRequestStatus = id => {
+    if (this.pendingRequests.has(id)) {
+      return RequestStatus.PENDING;
+    }
+    if (this.queuedRequests.has(id)) {
+      return RequestStatus.QUEUED;
+    }
+    if (this.settledRequests.has(id)) {
+      return RequestStatus.SETTLED;
+    }
+    return RequestStatus.UNKNOWN;
+  };
+  getActiveRequestsCount = () => this.pendingRequests.size + this.queuedRequests.size;
 }

package/index.js

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

package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js

@@ -106,19 +106,23 @@ const useTreeViewLazyLoading = ({
       return;
     }
     nestedDataManager.clear();
-
+    // handle loading here
+    instance.setTreeViewLoading(true);
     // reset the state if we are refetching the first visible items
     if ((0, _internals.selectorDataSourceState)(store.value) !== INITIAL_STATE) {
       resetDataSourceState();
     }
     // handle caching here
     const cachedData = cacheRef.current.get('root');
-    if (cachedData !== undefined) {
+    if (cachedData !== undefined && cachedData !== -1) {
+      instance.addItems({
+        items: cachedData,
+        depth: 0,
+        getChildrenCount
+      });
+      instance.setTreeViewLoading(false);
       return;
     }
-
-    // handle loading here
-    instance.setTreeViewLoading(true);
     try {
       const getTreeItemsResponse = await getTreeItems();
 
@@ -213,6 +217,8 @@ const useTreeViewLazyLoading = ({
     if (!isLazyLoadingEnabled || !eventParameters.shouldBeExpanded) {
       return;
     }
+    // prevent the default expansion behavior
+
     eventParameters.isExpansionPrevented = true;
     await instance.fetchItems([eventParameters.itemId]);
     const fetchErrors = Boolean((0, _internals.selectorGetTreeItemError)(store.value, eventParameters.itemId));
@@ -248,6 +254,10 @@ const useTreeViewLazyLoading = ({
           getChildrenCount
         });
       } else {
+        const expandedItems = (0, _internals.selectorExpandedItems)(store.value);
+        if (expandedItems.length > 0) {
+          instance.resetItemExpansion();
+        }
         instance.fetchItems();
       }
       firstRenderRef.current = false;

package/internals/plugins/useTreeViewLazyLoading/utils.js

@@ -24,66 +24,64 @@ let RequestStatus = exports.RequestStatus = /*#__PURE__*/function (RequestStatus
  * Uses `ParentId` to uniquely identify a request
  */
 class NestedDataManager {
+  pendingRequests = new Set();
+  queuedRequests = new Set();
+  settledRequests = new Set();
   constructor(instance, maxConcurrentRequests = MAX_CONCURRENT_REQUESTS) {
-    this.pendingRequests = new Set();
-    this.queuedRequests = new Set();
-    this.settledRequests = new Set();
-    this.instance = void 0;
-    this.maxConcurrentRequests = void 0;
-    this.processQueue = async () => {
-      if (this.queuedRequests.size === 0 || this.pendingRequests.size >= this.maxConcurrentRequests) {
-        return;
-      }
-      const loopLength = Math.min(this.maxConcurrentRequests - this.pendingRequests.size, this.queuedRequests.size);
-      if (loopLength === 0) {
-        return;
-      }
-      const fetchQueue = Array.from(this.queuedRequests);
-      const fetchPromises = [];
-      for (let i = 0; i < loopLength; i += 1) {
-        const id = fetchQueue[i];
-        this.queuedRequests.delete(id);
-        this.pendingRequests.add(id);
-        fetchPromises.push(this.instance.fetchItemChildren(id));
-      }
-      await Promise.all(fetchPromises);
-    };
-    this.queue = async ids => {
-      const loadingIds = {};
-      ids.forEach(id => {
-        this.queuedRequests.add(id);
-        loadingIds[id] = true;
-      });
-      await this.processQueue();
-    };
-    this.setRequestSettled = async id => {
-      this.pendingRequests.delete(id);
-      this.settledRequests.add(id);
-      await this.processQueue();
-    };
-    this.clear = () => {
-      this.queuedRequests.clear();
-      Array.from(this.pendingRequests).forEach(id => this.clearPendingRequest(id));
-    };
-    this.clearPendingRequest = async id => {
-      this.pendingRequests.delete(id);
-      await this.processQueue();
-    };
-    this.getRequestStatus = id => {
-      if (this.pendingRequests.has(id)) {
-        return RequestStatus.PENDING;
-      }
-      if (this.queuedRequests.has(id)) {
-        return RequestStatus.QUEUED;
-      }
-      if (this.settledRequests.has(id)) {
-        return RequestStatus.SETTLED;
-      }
-      return RequestStatus.UNKNOWN;
-    };
-    this.getActiveRequestsCount = () => this.pendingRequests.size + this.queuedRequests.size;
     this.instance = instance;
     this.maxConcurrentRequests = maxConcurrentRequests;
   }
+  processQueue = async () => {
+    if (this.queuedRequests.size === 0 || this.pendingRequests.size >= this.maxConcurrentRequests) {
+      return;
+    }
+    const loopLength = Math.min(this.maxConcurrentRequests - this.pendingRequests.size, this.queuedRequests.size);
+    if (loopLength === 0) {
+      return;
+    }
+    const fetchQueue = Array.from(this.queuedRequests);
+    const fetchPromises = [];
+    for (let i = 0; i < loopLength; i += 1) {
+      const id = fetchQueue[i];
+      this.queuedRequests.delete(id);
+      this.pendingRequests.add(id);
+      fetchPromises.push(this.instance.fetchItemChildren(id));
+    }
+    await Promise.all(fetchPromises);
+  };
+  queue = async ids => {
+    const loadingIds = {};
+    ids.forEach(id => {
+      this.queuedRequests.add(id);
+      loadingIds[id] = true;
+    });
+    await this.processQueue();
+  };
+  setRequestSettled = async id => {
+    this.pendingRequests.delete(id);
+    this.settledRequests.add(id);
+    await this.processQueue();
+  };
+  clear = () => {
+    this.queuedRequests.clear();
+    Array.from(this.pendingRequests).forEach(id => this.clearPendingRequest(id));
+  };
+  clearPendingRequest = async id => {
+    this.pendingRequests.delete(id);
+    await this.processQueue();
+  };
+  getRequestStatus = id => {
+    if (this.pendingRequests.has(id)) {
+      return RequestStatus.PENDING;
+    }
+    if (this.queuedRequests.has(id)) {
+      return RequestStatus.QUEUED;
+    }
+    if (this.settledRequests.has(id)) {
+      return RequestStatus.SETTLED;
+    }
+    return RequestStatus.UNKNOWN;
+  };
+  getActiveRequestsCount = () => this.pendingRequests.size + this.queuedRequests.size;
 }
 exports.NestedDataManager = NestedDataManager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view-pro",
-  "version": "8.10.0",
+  "version": "8.10.1",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Tree View components.",
   "main": "./index.js",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.2",
-    "@mui/utils": "^7.2.0",
+    "@mui/utils": "^7.3.1",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
@@ -41,8 +41,8 @@
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
     "@mui/x-internals": "8.10.0",
-    "@mui/x-tree-view": "8.10.0",
-    "@mui/x-license": "8.10.0"
+    "@mui/x-license": "8.10.1",
+    "@mui/x-tree-view": "8.10.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -63,31 +63,30 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "private": false,
+  "type": "commonjs",
+  "types": "./index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "require": {
-        "types": "./index.d.ts",
-        "default": "./index.js"
-      },
       "import": {
         "types": "./esm/index.d.ts",
         "default": "./esm/index.js"
+      },
+      "require": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
       }
     },
     "./*": {
-      "require": {
-        "types": "./*/index.d.ts",
-        "default": "./*/index.js"
-      },
       "import": {
         "types": "./esm/*/index.d.ts",
         "default": "./esm/*/index.js"
+      },
+      "require": {
+        "types": "./*/index.d.ts",
+        "default": "./*/index.js"
       }
     },
-    "./esm": null,
-    "./modern": null
-  },
-  "types": "./index.d.ts"
+    "./esm": null
+  }
 }