@mui/x-tree-view 8.27.1 → 8.27.2

package/CHANGELOG.md

@@ -5,6 +5,78 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.27.2
+
+_Feb 20, 2026_
+
+We'd like to extend a big thank you to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.2`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@8.27.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.27.2`, plus:
+
+- [DataGridPro] Fix number input visibility in header filters (#21345) @michelengelen
+
+#### `@mui/x-data-grid-premium@8.27.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.27.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.27.2`
+
+- [DatePicker] Add keyboard support for selecting day, month, and year (#21399) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.27.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.27.2`, plus:
+
+- [DateRangePicker] Fix timezone update issue leading to `invalidRange` error (#21382) @michelengelen
+
+### Charts
+
+#### `@mui/x-charts@8.27.2`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@8.27.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.27.2`, plus:
+
+- [charts-pro] Handle edge case in export image (#21206) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.27.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-charts-pro@8.27.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.27.2`
+
+- [tree view] Focus item sibling on unmount instead of the 1st item (#21386) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.27.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.27.2`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.27.2`
+
+Internal changes.
+
+### Core
+
+- [code-infra] Only ignore `renovate[bot]` in changelog generation script (#21188) @bernardobelchior
+
 ## v8.27.1
 
 <!-- generated comparing v8.27.0..v8.x -->

package/esm/index.js

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

package/esm/internals/plugins/focus/TreeViewFocusPlugin.js

@@ -1,6 +1,7 @@
 import { expansionSelectors } from "../expansion/index.js";
 import { focusSelectors } from "./selectors.js";
 import { itemsSelectors } from "../items/index.js";
+import { getFirstNavigableItem, getNextNavigableItem, getPreviousNavigableItem } from "../../utils/tree.js";
 export class TreeViewFocusPlugin {
   // We can't type `store`, otherwise we get the following TS error:
   // 'focus' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
@@ -8,21 +9,27 @@ export class TreeViewFocusPlugin {
     this.store = store;
 
     // Whenever the items change, we need to ensure the focused item is still present.
-    this.store.registerStoreEffect(itemsSelectors.itemMetaLookup, () => {
-      const focusedItemId = focusSelectors.focusedItemId(store.state);
-      if (focusedItemId == null) {
+    // If the focused item was removed, focus the closest neighbor instead of the first item.
+    let previousState = store.state;
+    this.store.subscribe(newState => {
+      // Only run when items actually changed.
+      if (newState.itemMetaLookup === previousState.itemMetaLookup) {
+        previousState = newState;
         return;
       }
-      const hasItemBeenRemoved = !itemsSelectors.itemMeta(store.state, focusedItemId);
-      if (!hasItemBeenRemoved) {
+      const focusedItemId = focusSelectors.focusedItemId(newState);
+      if (focusedItemId == null || itemsSelectors.itemMeta(newState, focusedItemId)) {
+        previousState = newState;
         return;
       }
-      const defaultFocusableItemId = focusSelectors.defaultFocusableItemId(store.state);
-      if (defaultFocusableItemId == null) {
+      const checkItemInNewTree = itemId => itemId == null || !itemsSelectors.itemMeta(newState, itemId) ? null : itemId;
+      const itemToFocusId = checkItemInNewTree(getNextNavigableItem(previousState, focusedItemId)) ?? checkItemInNewTree(getPreviousNavigableItem(previousState, focusedItemId)) ?? getFirstNavigableItem(newState);
+      if (itemToFocusId == null) {
         this.setFocusedItemId(null);
-        return;
+      } else {
+        this.applyItemFocus(null, itemToFocusId);
       }
-      this.applyItemFocus(null, defaultFocusableItemId);
+      previousState = newState;
     });
   }
   setFocusedItemId = itemId => {

package/esm/internals/plugins/items/selectors.js

@@ -56,7 +56,7 @@ export const itemsSelectors = {
   /**
    * Checks whether an item can be focused.
    */
-  canItemBeFocused: createSelector((state, itemId) => state.disabledItemsFocusable || !isItemDisabled(state.itemMetaLookup, itemId)),
+  canItemBeFocused: createSelector((state, itemId) => state.disabledItemsFocusable || state.itemModelLookup[itemId] != null && !isItemDisabled(state.itemMetaLookup, itemId)),
   /**
    * Gets the identation between an item and its children.
    */

package/esm/internals/plugins/jsxItems/TreeViewJSXItemsPlugin.d.ts

@@ -3,13 +3,18 @@ import { TreeViewItemMeta } from "../../models/index.js";
 import type { SimpleTreeViewStore } from "../../SimpleTreeViewStore/index.js";
 export declare class TreeViewJSXItemsPlugin {
   private store;
+  /**
+   * Tracks which component instance owns each item id,
+   * so that duplicate ids from different components can be detected.
+   */
+  private itemOwners;
   constructor(store: SimpleTreeViewStore<any>);
   /**
-   * Insert a new item in the state from a Tree Item component.
-   * @param {TreeViewItemMeta} item The meta-information of the item to insert.
-   * @returns {() => void} A function to remove the item from the state.
+   * Insert or update an item in the state from a Tree Item component.
+   * If the item already exists and belongs to the same owner (e.g. after a deps-change re-run of the layout effect),
+   * its meta is updated in place instead of removing and re-inserting.
    */
-  insertJSXItem: (item: TreeViewItemMeta) => () => void;
+  upsertJSXItem: (item: TreeViewItemMeta, ownerToken: symbol) => () => void;
   /**
    * Updates the `labelMap` to register the first character of the given item's label.
    * This map is used to navigate the tree using type-ahead search.

package/esm/internals/plugins/jsxItems/TreeViewJSXItemsPlugin.js

@@ -1,34 +1,61 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../items/index.js";
+import { buildSiblingIndexes, itemsSelectors, TREE_VIEW_ROOT_PARENT_ID } from "../items/index.js";
 import { jsxItemsitemWrapper, useJSXItemsItemPlugin } from "./itemPlugin.js";
 export class TreeViewJSXItemsPlugin {
+  /**
+   * Tracks which component instance owns each item id,
+   * so that duplicate ids from different components can be detected.
+   */
+  itemOwners = (() => new Map())();
   constructor(store) {
     this.store = store;
     store.itemPluginManager.register(useJSXItemsItemPlugin, jsxItemsitemWrapper);
   }
 
   /**
-   * Insert a new item in the state from a Tree Item component.
-   * @param {TreeViewItemMeta} item The meta-information of the item to insert.
-   * @returns {() => void} A function to remove the item from the state.
+   * Insert or update an item in the state from a Tree Item component.
+   * If the item already exists and belongs to the same owner (e.g. after a deps-change re-run of the layout effect),
+   * its meta is updated in place instead of removing and re-inserting.
    */
-  insertJSXItem = item => {
-    if (this.store.state.itemMetaLookup[item.id] != null) {
+  upsertJSXItem = (item, ownerToken) => {
+    const currentOwner = this.itemOwners.get(item.id);
+    if (currentOwner != null && currentOwner !== ownerToken) {
       throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${item.id}"`].join('\n'));
     }
-    this.store.update({
-      itemMetaLookup: _extends({}, this.store.state.itemMetaLookup, {
-        [item.id]: item
-      }),
-      // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
-      itemModelLookup: _extends({}, this.store.state.itemModelLookup, {
-        [item.id]: {
-          id: item.id,
-          label: item.label ?? ''
+    this.itemOwners.set(item.id, ownerToken);
+    const existingMeta = itemsSelectors.itemMeta(this.store.state, item.id);
+    if (existingMeta != null) {
+      // Update the existing item in place.
+      let hasChanges = false;
+      for (const key of Object.keys(item)) {
+        if (existingMeta[key] !== item[key]) {
+          hasChanges = true;
+          break;
         }
-      })
-    });
+      }
+      if (hasChanges) {
+        this.store.update({
+          itemMetaLookup: _extends({}, this.store.state.itemMetaLookup, {
+            [item.id]: _extends({}, existingMeta, item)
+          })
+        });
+      }
+    } else {
+      this.store.update({
+        itemMetaLookup: _extends({}, this.store.state.itemMetaLookup, {
+          [item.id]: item
+        }),
+        // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
+        itemModelLookup: _extends({}, this.store.state.itemModelLookup, {
+          [item.id]: {
+            id: item.id,
+            label: item.label ?? ''
+          }
+        })
+      });
+    }
     return () => {
+      this.itemOwners.delete(item.id);
       const newItemMetaLookup = _extends({}, this.store.state.itemMetaLookup);
       const newItemModelLookup = _extends({}, this.store.state.itemModelLookup);
       delete newItemMetaLookup[item.id];

package/esm/internals/plugins/jsxItems/itemPlugin.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useStore } from '@mui/x-internals/store';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { useTreeViewContext } from "../../TreeViewProvider/index.js";
 import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
@@ -39,6 +40,8 @@ export const useJSXItemsItemPlugin = ({
   const pluginContentRef = React.useRef(null);
   const handleContentRef = useMergedRefs(pluginContentRef, contentRef);
   const idAttribute = useStore(store, idSelectors.treeItemIdAttribute, itemId, id);
+  const isMountedRef = React.useRef(true);
+  const ownerTokenRef = useRefWithInit(Symbol);
 
   // Prevent any flashing
   useIsoLayoutEffect(() => {
@@ -49,15 +52,27 @@ export const useJSXItemsItemPlugin = ({
     };
   }, [store, registerChild, unregisterChild, idAttribute, itemId]);
   useIsoLayoutEffect(() => {
-    return store.jsxItems.insertJSXItem({
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  useIsoLayoutEffect(() => {
+    const remove = store.jsxItems.upsertJSXItem({
       id: itemId,
       idAttribute: id,
       parentId,
       expandable,
       disabled,
       selectable: !disableSelection
-    });
-  }, [store, parentId, itemId, expandable, disabled, disableSelection, id]);
+    }, ownerTokenRef.current);
+    return () => {
+      // Only remove the item if the component is unmounting, not if the dependencies are changing.
+      if (!isMountedRef.current) {
+        remove();
+      }
+    };
+  }, [store, parentId, itemId, expandable, disabled, disableSelection, id, ownerTokenRef]);
   React.useEffect(() => {
     if (label) {
       return store.jsxItems.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());

package/index.js

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

package/internals/plugins/focus/TreeViewFocusPlugin.js

@@ -7,6 +7,7 @@ exports.TreeViewFocusPlugin = void 0;
 var _expansion = require("../expansion");
 var _selectors = require("./selectors");
 var _items = require("../items");
+var _tree = require("../../utils/tree");
 class TreeViewFocusPlugin {
   // We can't type `store`, otherwise we get the following TS error:
   // 'focus' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
@@ -14,21 +15,27 @@ class TreeViewFocusPlugin {
     this.store = store;
 
     // Whenever the items change, we need to ensure the focused item is still present.
-    this.store.registerStoreEffect(_items.itemsSelectors.itemMetaLookup, () => {
-      const focusedItemId = _selectors.focusSelectors.focusedItemId(store.state);
-      if (focusedItemId == null) {
+    // If the focused item was removed, focus the closest neighbor instead of the first item.
+    let previousState = store.state;
+    this.store.subscribe(newState => {
+      // Only run when items actually changed.
+      if (newState.itemMetaLookup === previousState.itemMetaLookup) {
+        previousState = newState;
         return;
       }
-      const hasItemBeenRemoved = !_items.itemsSelectors.itemMeta(store.state, focusedItemId);
-      if (!hasItemBeenRemoved) {
+      const focusedItemId = _selectors.focusSelectors.focusedItemId(newState);
+      if (focusedItemId == null || _items.itemsSelectors.itemMeta(newState, focusedItemId)) {
+        previousState = newState;
         return;
       }
-      const defaultFocusableItemId = _selectors.focusSelectors.defaultFocusableItemId(store.state);
-      if (defaultFocusableItemId == null) {
+      const checkItemInNewTree = itemId => itemId == null || !_items.itemsSelectors.itemMeta(newState, itemId) ? null : itemId;
+      const itemToFocusId = checkItemInNewTree((0, _tree.getNextNavigableItem)(previousState, focusedItemId)) ?? checkItemInNewTree((0, _tree.getPreviousNavigableItem)(previousState, focusedItemId)) ?? (0, _tree.getFirstNavigableItem)(newState);
+      if (itemToFocusId == null) {
         this.setFocusedItemId(null);
-        return;
+      } else {
+        this.applyItemFocus(null, itemToFocusId);
       }
-      this.applyItemFocus(null, defaultFocusableItemId);
+      previousState = newState;
     });
   }
   setFocusedItemId = itemId => {

package/internals/plugins/items/selectors.js

@@ -62,7 +62,7 @@ const itemsSelectors = exports.itemsSelectors = {
   /**
    * Checks whether an item can be focused.
    */
-  canItemBeFocused: (0, _store.createSelector)((state, itemId) => state.disabledItemsFocusable || !(0, _utils.isItemDisabled)(state.itemMetaLookup, itemId)),
+  canItemBeFocused: (0, _store.createSelector)((state, itemId) => state.disabledItemsFocusable || state.itemModelLookup[itemId] != null && !(0, _utils.isItemDisabled)(state.itemMetaLookup, itemId)),
   /**
    * Gets the identation between an item and its children.
    */

package/internals/plugins/jsxItems/TreeViewJSXItemsPlugin.d.ts

@@ -3,13 +3,18 @@ import { TreeViewItemMeta } from "../../models/index.js";
 import type { SimpleTreeViewStore } from "../../SimpleTreeViewStore/index.js";
 export declare class TreeViewJSXItemsPlugin {
   private store;
+  /**
+   * Tracks which component instance owns each item id,
+   * so that duplicate ids from different components can be detected.
+   */
+  private itemOwners;
   constructor(store: SimpleTreeViewStore<any>);
   /**
-   * Insert a new item in the state from a Tree Item component.
-   * @param {TreeViewItemMeta} item The meta-information of the item to insert.
-   * @returns {() => void} A function to remove the item from the state.
+   * Insert or update an item in the state from a Tree Item component.
+   * If the item already exists and belongs to the same owner (e.g. after a deps-change re-run of the layout effect),
+   * its meta is updated in place instead of removing and re-inserting.
    */
-  insertJSXItem: (item: TreeViewItemMeta) => () => void;
+  upsertJSXItem: (item: TreeViewItemMeta, ownerToken: symbol) => () => void;
   /**
    * Updates the `labelMap` to register the first character of the given item's label.
    * This map is used to navigate the tree using type-ahead search.

package/internals/plugins/jsxItems/TreeViewJSXItemsPlugin.js

@@ -9,33 +9,60 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _items = require("../items");
 var _itemPlugin = require("./itemPlugin");
 class TreeViewJSXItemsPlugin {
+  /**
+   * Tracks which component instance owns each item id,
+   * so that duplicate ids from different components can be detected.
+   */
+  itemOwners = new Map();
   constructor(store) {
     this.store = store;
     store.itemPluginManager.register(_itemPlugin.useJSXItemsItemPlugin, _itemPlugin.jsxItemsitemWrapper);
   }
 
   /**
-   * Insert a new item in the state from a Tree Item component.
-   * @param {TreeViewItemMeta} item The meta-information of the item to insert.
-   * @returns {() => void} A function to remove the item from the state.
+   * Insert or update an item in the state from a Tree Item component.
+   * If the item already exists and belongs to the same owner (e.g. after a deps-change re-run of the layout effect),
+   * its meta is updated in place instead of removing and re-inserting.
    */
-  insertJSXItem = item => {
-    if (this.store.state.itemMetaLookup[item.id] != null) {
+  upsertJSXItem = (item, ownerToken) => {
+    const currentOwner = this.itemOwners.get(item.id);
+    if (currentOwner != null && currentOwner !== ownerToken) {
       throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${item.id}"`].join('\n'));
     }
-    this.store.update({
-      itemMetaLookup: (0, _extends2.default)({}, this.store.state.itemMetaLookup, {
-        [item.id]: item
-      }),
-      // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
-      itemModelLookup: (0, _extends2.default)({}, this.store.state.itemModelLookup, {
-        [item.id]: {
-          id: item.id,
-          label: item.label ?? ''
+    this.itemOwners.set(item.id, ownerToken);
+    const existingMeta = _items.itemsSelectors.itemMeta(this.store.state, item.id);
+    if (existingMeta != null) {
+      // Update the existing item in place.
+      let hasChanges = false;
+      for (const key of Object.keys(item)) {
+        if (existingMeta[key] !== item[key]) {
+          hasChanges = true;
+          break;
         }
-      })
-    });
+      }
+      if (hasChanges) {
+        this.store.update({
+          itemMetaLookup: (0, _extends2.default)({}, this.store.state.itemMetaLookup, {
+            [item.id]: (0, _extends2.default)({}, existingMeta, item)
+          })
+        });
+      }
+    } else {
+      this.store.update({
+        itemMetaLookup: (0, _extends2.default)({}, this.store.state.itemMetaLookup, {
+          [item.id]: item
+        }),
+        // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
+        itemModelLookup: (0, _extends2.default)({}, this.store.state.itemModelLookup, {
+          [item.id]: {
+            id: item.id,
+            label: item.label ?? ''
+          }
+        })
+      });
+    }
     return () => {
+      this.itemOwners.delete(item.id);
       const newItemMetaLookup = (0, _extends2.default)({}, this.store.state.itemMetaLookup);
       const newItemModelLookup = (0, _extends2.default)({}, this.store.state.itemModelLookup);
       delete newItemMetaLookup[item.id];

package/internals/plugins/jsxItems/itemPlugin.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _store = require("@mui/x-internals/store");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _TreeViewProvider = require("../../TreeViewProvider");
 var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
@@ -45,6 +46,8 @@ const useJSXItemsItemPlugin = ({
   const pluginContentRef = React.useRef(null);
   const handleContentRef = (0, _useMergedRefs.useMergedRefs)(pluginContentRef, contentRef);
   const idAttribute = (0, _store.useStore)(store, _id.idSelectors.treeItemIdAttribute, itemId, id);
+  const isMountedRef = React.useRef(true);
+  const ownerTokenRef = (0, _useRefWithInit.useRefWithInit)(Symbol);
 
   // Prevent any flashing
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
@@ -55,15 +58,27 @@ const useJSXItemsItemPlugin = ({
     };
   }, [store, registerChild, unregisterChild, idAttribute, itemId]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    return store.jsxItems.insertJSXItem({
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const remove = store.jsxItems.upsertJSXItem({
       id: itemId,
       idAttribute: id,
       parentId,
       expandable,
       disabled,
       selectable: !disableSelection
-    });
-  }, [store, parentId, itemId, expandable, disabled, disableSelection, id]);
+    }, ownerTokenRef.current);
+    return () => {
+      // Only remove the item if the component is unmounting, not if the dependencies are changing.
+      if (!isMountedRef.current) {
+        remove();
+      }
+    };
+  }, [store, parentId, itemId, expandable, disabled, disableSelection, id, ownerTokenRef]);
   React.useEffect(() => {
     if (label) {
       return store.jsxItems.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.27.1",
+  "version": "8.27.2",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Tree View components.",
   "license": "MIT",