@mui/x-tree-view 8.11.1 → 8.11.2

package/CHANGELOG.md

@@ -5,6 +5,101 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.11.2
+
+_Sep 10, 2025_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@ludvigeriksson, @sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @brijeshb42, @flaviendelangle, @Janpot, @LukasTy, @MBilalShafi, @noraleonte, @rita-codes, @romgrk, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.11.2`
+
+- [DataGrid] Allow opting out of the exclude row selection model (#19423) @MBilalShafi
+- [DataGrid] Fix column dropdown menu text alignment for the "Unpin" menu item (#19462) @MBilalShafi
+- [DataGrid] Fix indeterminate state for "Select all" checkbox with exclude model (#19466) @MBilalShafi
+- [DataGrid] Fix styled API arguments error (#19460) @MBilalShafi
+- [DataGrid] Fix `stringify()` for theme objects (#19427) @romgrk
+
+#### `@mui/x-data-grid-pro@8.11.2` [![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.11.2`.
+
+#### `@mui/x-data-grid-premium@8.11.2` [![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.11.2`, plus:
+
+- [DataGridPremium] Fallback to the regular reorder method for plain data (#19467) @MBilalShafi
+- [DataGridPremium] Fix showing `0` as total aggregation value when aggregation position is set to `null` for row groups (#19515) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.11.2`
+
+- [pickers] Gracefully handle `textField.slotProps` (#18980) @LukasTy
+- [pickers] Improve hour and minute placement in Date Time Picker (#19227) @MBilalShafi
+- [pickers] Use `calendarState.currentMonth` in Month Calendar when available (#19073) @LukasTy
+- [pickers] Improve invalid value pasting into a section (#19357) @sai6855
+- [fields] Remove redundant `id` and `aria-labelledby` attributes from spinbuttons (#19523) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.11.2` [![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.11.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.11.2`
+
+- [charts] Fix highlight regression (#19486) @alexfauquette
+- [charts] Improve code reuse in `ChartsXAxis` and `ChartsYAxis` (#19198) @bernardobelchior
+- [charts] Simplify params in `getRange` and `createDateFormatter` (#19517) @bernardobelchior
+- [charts] Handle domain edge cases with `filterMode: 'discard'` (#19199) @bernardobelchior
+- [l10n] Add Swedish (sv-SE) locale (#19489) @ludvigeriksson
+
+#### `@mui/x-charts-pro@8.11.2` [![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.11.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.11.2`
+
+- [TreeView] Do not mutate `props.items` in the `getItemTree()` method (#19483) @flaviendelangle
+- [TreeView] Expose a new hook to apply selection propagation on the selected items (#19402) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.11.2` [![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.11.2`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.11.2`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add recipe for save and manage filters from the panel (#19361) @siriwatknp
+
+### Core
+
+- [code-infra] Remove log when restarting dev server (#19490) @bernardobelchior
+- [code-infra] Store test results in CI (#19507) @Janpot
+
+### Miscellaneous
+
+- [infra] Set nodejs versions of various CIs to 22.18 (#19503) @brijeshb42
+- [test] Split infinitive @romgrk
+
 ## 8.11.1
 
 _Sep 4, 2025_

package/esm/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
 export { useTreeItemUtils } from "./useTreeItemUtils/index.js";
-export { useTreeItemModel } from "./useTreeItemModel.js";
+export { useTreeItemModel } from "./useTreeItemModel.js";
+export { useApplyPropagationToSelectedItemsOnMount } from "./useApplyPropagationToSelectedItemsOnMount.js";

package/esm/hooks/index.js

@@ -1,3 +1,4 @@
 export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
 export { useTreeItemUtils } from "./useTreeItemUtils/index.js";
-export { useTreeItemModel } from "./useTreeItemModel.js";
+export { useTreeItemModel } from "./useTreeItemModel.js";
+export { useApplyPropagationToSelectedItemsOnMount } from "./useApplyPropagationToSelectedItemsOnMount.js";

package/esm/hooks/useApplyPropagationToSelectedItemsOnMount.d.ts

@@ -0,0 +1,53 @@
+import { TreeViewItemId, TreeViewSelectionPropagation } from "../models/index.js";
+/**
+ * Applies the selection propagation rules to the selected items.
+ * The value is only computed during the first render, any update of the parameters will be ignored.
+ *
+ * Uncontrolled example:
+ * ```tsx
+ * const defaultSelectedItems = useApplyPropagationToSelectedItemsOnMount({
+ *   items: props.items,
+ *   selectionPropagation: props.selectionPropagation,
+ *   selectedItems: ['10', '11', '13', '14'],
+ * });
+ *
+ * return (
+ *   <RichTreeView
+ *     items={props.items}
+ *     selectionPropagation={props.selectionPropagation}
+ *     defaultSelectedItems={defaultSelectedItems}
+ *   />
+ * );
+ * ```
+ *
+ * Controlled example:
+ * ```tsx
+ * const initialSelectedItems = useApplyPropagationToSelectedItemsOnMount({
+ *   items: props.items,
+ *   selectionPropagation: props.selectionPropagation,
+ *   selectedItems: ['10', '11', '13', '14'],
+ * });
+ *
+ * const [selectedItems, setSelectedItems] = React.useState(initialSelectedItems);
+ *
+ * return (
+ *   <RichTreeView
+ *     items={props.items}
+ *     selectionPropagation={props.selectionPropagation}
+ *     selectedItems={selectedItems}
+ *     onSelectedItemsChange={setSelectedItems}
+ *   />
+ * );
+ * ```
+ */
+export declare function useApplyPropagationToSelectedItemsOnMount(parameters: UseApplyPropagationToDefaultSelectedItemsParameters<any>): string[];
+interface UseApplyPropagationToDefaultSelectedItemsParameters<R extends {
+  children?: R[];
+}> {
+  items: R[];
+  getItemId?: (item: R) => TreeViewItemId;
+  getItemChildren?: (item: R) => R[] | undefined;
+  selectedItems: string[];
+  selectionPropagation: TreeViewSelectionPropagation;
+}
+export {};

package/esm/hooks/useApplyPropagationToSelectedItemsOnMount.js

@@ -0,0 +1,80 @@
+import useLazyRef from '@mui/utils/useLazyRef';
+import { getLookupFromArray } from "../internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js";
+const defaultGetItemId = item => item.id;
+const defaultGetItemChildren = item => item.children;
+
+/**
+ * Applies the selection propagation rules to the selected items.
+ * The value is only computed during the first render, any update of the parameters will be ignored.
+ *
+ * Uncontrolled example:
+ * ```tsx
+ * const defaultSelectedItems = useApplyPropagationToSelectedItemsOnMount({
+ *   items: props.items,
+ *   selectionPropagation: props.selectionPropagation,
+ *   selectedItems: ['10', '11', '13', '14'],
+ * });
+ *
+ * return (
+ *   <RichTreeView
+ *     items={props.items}
+ *     selectionPropagation={props.selectionPropagation}
+ *     defaultSelectedItems={defaultSelectedItems}
+ *   />
+ * );
+ * ```
+ *
+ * Controlled example:
+ * ```tsx
+ * const initialSelectedItems = useApplyPropagationToSelectedItemsOnMount({
+ *   items: props.items,
+ *   selectionPropagation: props.selectionPropagation,
+ *   selectedItems: ['10', '11', '13', '14'],
+ * });
+ *
+ * const [selectedItems, setSelectedItems] = React.useState(initialSelectedItems);
+ *
+ * return (
+ *   <RichTreeView
+ *     items={props.items}
+ *     selectionPropagation={props.selectionPropagation}
+ *     selectedItems={selectedItems}
+ *     onSelectedItemsChange={setSelectedItems}
+ *   />
+ * );
+ * ```
+ */
+export function useApplyPropagationToSelectedItemsOnMount(parameters) {
+  const {
+    items: itemsParam,
+    getItemId = defaultGetItemId,
+    getItemChildren = defaultGetItemChildren,
+    selectedItems,
+    selectionPropagation
+  } = parameters;
+  return useLazyRef(() => {
+    const lookup = getLookupFromArray(selectedItems);
+    function walk(items, isParentSelected) {
+      for (const item of items) {
+        const itemId = getItemId(item);
+        let isSelected = lookup[itemId];
+        if (!isSelected && selectionPropagation.descendants && isParentSelected) {
+          lookup[itemId] = true;
+          isSelected = true;
+        }
+        const children = getItemChildren(item) ?? [];
+        if (children.length > 0) {
+          walk(children, isSelected);
+          if (!isSelected && selectionPropagation.parents) {
+            const areAllChildrenSelected = children.every(childId => lookup[getItemId(childId)]);
+            if (areAllChildrenSelected) {
+              lookup[itemId] = true;
+            }
+          }
+        }
+      }
+    }
+    walk(itemsParam, false);
+    return Object.keys(lookup);
+  }).current;
+}

package/esm/index.js

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

package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -115,13 +115,14 @@ export const useTreeViewItems = ({
   const getItemTree = React.useCallback(() => {
     const getItemFromItemId = itemId => {
       const item = itemsSelectors.itemModel(store.state, itemId);
+      const itemToMutate = _extends({}, item);
       const newChildren = itemsSelectors.itemOrderedChildrenIds(store.state, itemId);
       if (newChildren.length > 0) {
-        item.children = newChildren.map(getItemFromItemId);
+        itemToMutate.children = newChildren.map(getItemFromItemId);
       } else {
-        delete item.children;
+        delete itemToMutate.children;
       }
-      return item;
+      return itemToMutate;
     };
     return itemsSelectors.itemOrderedChildrenIds(store.state, null).map(getItemFromItemId);
   }, [store]);

package/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
 export { useTreeItemUtils } from "./useTreeItemUtils/index.js";
-export { useTreeItemModel } from "./useTreeItemModel.js";
+export { useTreeItemModel } from "./useTreeItemModel.js";
+export { useApplyPropagationToSelectedItemsOnMount } from "./useApplyPropagationToSelectedItemsOnMount.js";

package/hooks/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useApplyPropagationToSelectedItemsOnMount", {
+  enumerable: true,
+  get: function () {
+    return _useApplyPropagationToSelectedItemsOnMount.useApplyPropagationToSelectedItemsOnMount;
+  }
+});
 Object.defineProperty(exports, "useTreeItemModel", {
   enumerable: true,
   get: function () {
@@ -23,4 +29,5 @@ Object.defineProperty(exports, "useTreeViewApiRef", {
 });
 var _useTreeViewApiRef = require("./useTreeViewApiRef");
 var _useTreeItemUtils = require("./useTreeItemUtils");
-var _useTreeItemModel = require("./useTreeItemModel");
+var _useTreeItemModel = require("./useTreeItemModel");
+var _useApplyPropagationToSelectedItemsOnMount = require("./useApplyPropagationToSelectedItemsOnMount");

package/hooks/useApplyPropagationToSelectedItemsOnMount.d.ts

@@ -0,0 +1,53 @@
+import { TreeViewItemId, TreeViewSelectionPropagation } from "../models/index.js";
+/**
+ * Applies the selection propagation rules to the selected items.
+ * The value is only computed during the first render, any update of the parameters will be ignored.
+ *
+ * Uncontrolled example:
+ * ```tsx
+ * const defaultSelectedItems = useApplyPropagationToSelectedItemsOnMount({
+ *   items: props.items,
+ *   selectionPropagation: props.selectionPropagation,
+ *   selectedItems: ['10', '11', '13', '14'],
+ * });
+ *
+ * return (
+ *   <RichTreeView
+ *     items={props.items}
+ *     selectionPropagation={props.selectionPropagation}
+ *     defaultSelectedItems={defaultSelectedItems}
+ *   />
+ * );
+ * ```
+ *
+ * Controlled example:
+ * ```tsx
+ * const initialSelectedItems = useApplyPropagationToSelectedItemsOnMount({
+ *   items: props.items,
+ *   selectionPropagation: props.selectionPropagation,
+ *   selectedItems: ['10', '11', '13', '14'],
+ * });
+ *
+ * const [selectedItems, setSelectedItems] = React.useState(initialSelectedItems);
+ *
+ * return (
+ *   <RichTreeView
+ *     items={props.items}
+ *     selectionPropagation={props.selectionPropagation}
+ *     selectedItems={selectedItems}
+ *     onSelectedItemsChange={setSelectedItems}
+ *   />
+ * );
+ * ```
+ */
+export declare function useApplyPropagationToSelectedItemsOnMount(parameters: UseApplyPropagationToDefaultSelectedItemsParameters<any>): string[];
+interface UseApplyPropagationToDefaultSelectedItemsParameters<R extends {
+  children?: R[];
+}> {
+  items: R[];
+  getItemId?: (item: R) => TreeViewItemId;
+  getItemChildren?: (item: R) => R[] | undefined;
+  selectedItems: string[];
+  selectionPropagation: TreeViewSelectionPropagation;
+}
+export {};

package/hooks/useApplyPropagationToSelectedItemsOnMount.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useApplyPropagationToSelectedItemsOnMount = useApplyPropagationToSelectedItemsOnMount;
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection/useTreeViewSelection.utils");
+const defaultGetItemId = item => item.id;
+const defaultGetItemChildren = item => item.children;
+
+/**
+ * Applies the selection propagation rules to the selected items.
+ * The value is only computed during the first render, any update of the parameters will be ignored.
+ *
+ * Uncontrolled example:
+ * ```tsx
+ * const defaultSelectedItems = useApplyPropagationToSelectedItemsOnMount({
+ *   items: props.items,
+ *   selectionPropagation: props.selectionPropagation,
+ *   selectedItems: ['10', '11', '13', '14'],
+ * });
+ *
+ * return (
+ *   <RichTreeView
+ *     items={props.items}
+ *     selectionPropagation={props.selectionPropagation}
+ *     defaultSelectedItems={defaultSelectedItems}
+ *   />
+ * );
+ * ```
+ *
+ * Controlled example:
+ * ```tsx
+ * const initialSelectedItems = useApplyPropagationToSelectedItemsOnMount({
+ *   items: props.items,
+ *   selectionPropagation: props.selectionPropagation,
+ *   selectedItems: ['10', '11', '13', '14'],
+ * });
+ *
+ * const [selectedItems, setSelectedItems] = React.useState(initialSelectedItems);
+ *
+ * return (
+ *   <RichTreeView
+ *     items={props.items}
+ *     selectionPropagation={props.selectionPropagation}
+ *     selectedItems={selectedItems}
+ *     onSelectedItemsChange={setSelectedItems}
+ *   />
+ * );
+ * ```
+ */
+function useApplyPropagationToSelectedItemsOnMount(parameters) {
+  const {
+    items: itemsParam,
+    getItemId = defaultGetItemId,
+    getItemChildren = defaultGetItemChildren,
+    selectedItems,
+    selectionPropagation
+  } = parameters;
+  return (0, _useLazyRef.default)(() => {
+    const lookup = (0, _useTreeViewSelection.getLookupFromArray)(selectedItems);
+    function walk(items, isParentSelected) {
+      for (const item of items) {
+        const itemId = getItemId(item);
+        let isSelected = lookup[itemId];
+        if (!isSelected && selectionPropagation.descendants && isParentSelected) {
+          lookup[itemId] = true;
+          isSelected = true;
+        }
+        const children = getItemChildren(item) ?? [];
+        if (children.length > 0) {
+          walk(children, isSelected);
+          if (!isSelected && selectionPropagation.parents) {
+            const areAllChildrenSelected = children.every(childId => lookup[getItemId(childId)]);
+            if (areAllChildrenSelected) {
+              lookup[itemId] = true;
+            }
+          }
+        }
+      }
+    }
+    walk(itemsParam, false);
+    return Object.keys(lookup);
+  }).current;
+}

package/index.js

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

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -122,13 +122,14 @@ const useTreeViewItems = ({
   const getItemTree = React.useCallback(() => {
     const getItemFromItemId = itemId => {
       const item = _useTreeViewItems2.itemsSelectors.itemModel(store.state, itemId);
+      const itemToMutate = (0, _extends2.default)({}, item);
       const newChildren = _useTreeViewItems2.itemsSelectors.itemOrderedChildrenIds(store.state, itemId);
       if (newChildren.length > 0) {
-        item.children = newChildren.map(getItemFromItemId);
+        itemToMutate.children = newChildren.map(getItemFromItemId);
       } else {
-        delete item.children;
+        delete itemToMutate.children;
       }
-      return item;
+      return itemToMutate;
     };
     return _useTreeViewItems2.itemsSelectors.itemOrderedChildrenIds(store.state, null).map(getItemFromItemId);
   }, [store]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.11.1",
+  "version": "8.11.2",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Tree View components.",
   "license": "MIT",
@@ -32,13 +32,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.2",
-    "@base-ui-components/utils": "0.1.0",
-    "@mui/utils": "^7.3.1",
+    "@base-ui-components/utils": "0.1.1",
+    "@mui/utils": "^7.3.2",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.11.1"
+    "@mui/x-internals": "8.11.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",