@mui/x-tree-view 8.11.1 → 8.11.3

package/CHANGELOG.md

@@ -5,6 +5,187 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.11.3
+
+_Sep 16, 2025_
+
+We'd like to extend a big thank you to the 11 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:
+@sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.11.3`
+
+- [DataGrid] Fix numeric font size not being applied (#19552) @cherniavskii
+- [DataGrid] Improve `operator` types to display literal values (#19529) @siriwatknp
+
+#### `@mui/x-data-grid-pro@8.11.3` [![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.3`.
+
+#### `@mui/x-data-grid-premium@8.11.3` [![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.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.11.3`
+
+- [pickers] Refactor `slots` and `slotProps` propagation strategy (#18867) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.11.3` [![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.3`.
+
+### Charts
+
+#### `@mui/x-charts@8.11.3`
+
+- [charts] Add `inline-` piecewise legend options (#19382) @JCQuintas
+- [charts] Add bar gradient example (#19174) @bernardobelchior
+- [charts] Ignore empty tick labels in label overlap computation (#19547) @alexfauquette
+- [charts] Rename `isBandScale` to `isDiscreteScale` (#19514) @bernardobelchior
+- [charts] Fix legend position affecting toolbar's position (#19257) @sai6855
+
+#### `@mui/x-charts-pro@8.11.3` [![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.3`, plus:
+
+- [charts-pro] Add chart title and caption to export demo (#19524) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.11.3`
+
+- [tree view] Stop looping through all items to publish the `removeItem` event (#19500) @flaviendelangle
+- [tree view] Support flat DOM structure (#19350) @flaviendelangle
+- [tree view] Update cursor styles for disabled TreeItem (#19548) @sai6855
+
+#### `@mui/x-tree-view-pro@8.11.3` [![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.3`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.11.3`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add styling row group recipe (#19349) @siriwatknp
+- [docs] Group demos data into the dataset folder (#19549) @alexfauquette
+- [docs] Add `shiny` bar chart example at the top  (#19416) @JCQuintas
+
+### Core
+
+- [code-infra] Axios update (#19577) @Janpot
+- [code-infra] Remove usage of copy-files command from code-infra (#19518) @brijeshb42
+- [internal] Fix naming to match convention @oliviertassinari
+
+## 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/TreeItem/TreeItem.js

@@ -69,7 +69,8 @@ const TreeItemContent = exports.TreeItemContent = (0, _zeroStyled.styled)('div',
   },
   '&[data-disabled]': {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
+    cursor: 'auto'
   },
   '&[data-focused]': {
     backgroundColor: (theme.vars || theme).palette.action.focus
@@ -121,6 +122,7 @@ const TreeItemIconContainer = exports.TreeItemIconContainer = (0, _zeroStyled.st
   flexShrink: 0,
   justifyContent: 'center',
   position: 'relative',
+  cursor: 'inherit',
   '& svg': {
     fontSize: 18
   }

package/esm/TreeItem/TreeItem.js

@@ -62,7 +62,8 @@ export const TreeItemContent = styled('div', {
   },
   '&[data-disabled]': {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
+    cursor: 'auto'
   },
   '&[data-focused]': {
     backgroundColor: (theme.vars || theme).palette.action.focus
@@ -114,6 +115,7 @@ export const TreeItemIconContainer = styled('div', {
   flexShrink: 0,
   justifyContent: 'center',
   position: 'relative',
+  cursor: 'inherit',
   '& svg': {
     fontSize: 18
   }

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.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/components/RichTreeViewItems.js

@@ -10,20 +10,24 @@ import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowComp
 import { TreeItem } from "../../TreeItem/index.js";
 import { itemsSelectors } from "../plugins/useTreeViewItems/index.js";
 import { useTreeViewContext } from "../TreeViewProvider/index.js";
+import { expansionSelectors } from "../plugins/useTreeViewExpansion/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") RichTreeViewItemsContext.displayName = "RichTreeViewItemsContext";
+const EMPTY_ARRAY = [];
+const selectorNoChildren = () => EMPTY_ARRAY;
 const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
   itemSlot,
   itemSlotProps,
-  itemId
+  itemId,
+  skipChildren
 }) {
   const renderItemForRichTreeView = React.useContext(RichTreeViewItemsContext);
   const {
     store
   } = useTreeViewContext();
   const itemMeta = useStore(store, itemsSelectors.itemMeta, itemId);
-  const children = useStore(store, itemsSelectors.itemOrderedChildrenIds, itemId);
+  const children = useStore(store, skipChildren ? selectorNoChildren : itemsSelectors.itemOrderedChildrenIds, itemId);
   const Item = itemSlot ?? TreeItem;
   const _useSlotProps = useSlotProps({
       elementType: Item,
@@ -54,14 +58,17 @@ export function RichTreeViewItems(props) {
   } = useTreeViewContext();
   const itemSlot = slots?.item;
   const itemSlotProps = slotProps?.item;
-  const items = useStore(store, itemsSelectors.itemOrderedChildrenIds, null);
+  const domStructure = useStore(store, itemsSelectors.domStructure);
+  const items = useStore(store, domStructure === 'flat' ? state => expansionSelectors.flatList(state) : state => itemsSelectors.itemOrderedChildrenIds(state, null));
+  const skipChildren = domStructure === 'flat';
   const renderItem = React.useCallback(itemId => {
     return /*#__PURE__*/_jsx(WrappedTreeItem, {
       itemSlot: itemSlot,
       itemSlotProps: itemSlotProps,
-      itemId: itemId
+      itemId: itemId,
+      skipChildren: skipChildren
     }, itemId);
-  }, [itemSlot, itemSlotProps]);
+  }, [itemSlot, itemSlotProps, skipChildren]);
   return /*#__PURE__*/_jsx(RichTreeViewItemsContext.Provider, {
     value: renderItem,
     children: items.map(renderItem)

package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts

@@ -6,11 +6,13 @@ export declare const expansionSelectors: {
    */
   expandedItemsRaw: (state: TreeViewState<[UseTreeViewExpansionSignature]>) => string[];
   /**
-   * Get the expanded items as a Map.
-   * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
-   * @returns {TreeViewExpansionValue} The expanded items as a Map.
+   * Gets the expanded items as a Map.
    */
   expandedItemsMap: (args_0: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewExpansion.types.js").UseTreeViewExpansionState & Partial<{}>) => Map<string, true>;
+  /**
+   * Gets the items to render as a flat list (the descendants of an expanded item are listed as siblings of the item).
+   */
+  flatList: (args_0: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewExpansion.types.js").UseTreeViewExpansionState & Partial<{}>) => string[];
   /**
    * Gets the slot that triggers the item's expansion when clicked.
    */

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

@@ -1,5 +1,6 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
 import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
+import { TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/index.js";
 const expandedItemMapSelector = createSelectorMemoized(state => state.expansion.expandedItems, expandedItems => {
   const expandedItemsMap = new Map();
   expandedItems.forEach(id => {
@@ -13,11 +14,26 @@ export const expansionSelectors = {
    */
   expandedItemsRaw: createSelector(state => state.expansion.expandedItems),
   /**
-   * Get the expanded items as a Map.
-   * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
-   * @returns {TreeViewExpansionValue} The expanded items as a Map.
+   * Gets the expanded items as a Map.
    */
   expandedItemsMap: expandedItemMapSelector,
+  /**
+   * Gets the items to render as a flat list (the descendants of an expanded item are listed as siblings of the item).
+   */
+  flatList: createSelectorMemoized(itemsSelectors.itemOrderedChildrenIdsLookup, expandedItemMapSelector, (itemOrderedChildrenIds, expandedItemsMap) => {
+    function appendChildren(itemId) {
+      if (!expandedItemsMap.has(itemId)) {
+        return [itemId];
+      }
+      const itemsWithDescendants = [itemId];
+      const children = itemOrderedChildrenIds[itemId] || [];
+      for (const childId of children) {
+        itemsWithDescendants.push(...appendChildren(childId));
+      }
+      return itemsWithDescendants;
+    }
+    return (itemOrderedChildrenIds[TREE_VIEW_ROOT_PARENT_ID] ?? []).flatMap(appendChildren);
+  }),
   /**
    * Gets the slot that triggers the item's expansion when clicked.
    */

package/esm/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useInstanceEventHandler } from "../../hooks/useInstanceEventHandler.js";
+import { useStoreEffect } from '@mui/x-internals/store';
 import { focusSelectors } from "./useTreeViewFocus.selectors.js";
 import { expansionSelectors } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
 import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
@@ -52,14 +52,23 @@ export const useTreeViewFocus = ({
     }
     setFocusedItemId(null);
   });
-  useInstanceEventHandler(instance, 'removeItem', ({
-    id
-  }) => {
+
+  // Whenever the items change, we need to ensure the focused item is still present.
+  useStoreEffect(store, itemsSelectors.itemMetaLookup, () => {
     const focusedItemId = focusSelectors.focusedItemId(store.state);
+    if (focusedItemId == null) {
+      return;
+    }
+    const hasItemBeenRemoved = !itemsSelectors.itemMeta(store.state, focusedItemId);
+    if (!hasItemBeenRemoved) {
+      return;
+    }
     const defaultFocusableItemId = focusSelectors.defaultFocusableItemId(store.state);
-    if (focusedItemId === id && defaultFocusableItemId != null) {
-      innerFocusItem(null, defaultFocusableItemId);
+    if (defaultFocusableItemId == null) {
+      setFocusedItemId(null);
+      return;
     }
+    innerFocusItem(null, defaultFocusableItemId);
   });
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);

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

@@ -3,7 +3,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { publishTreeViewEvent } from "../../utils/publishTreeViewEvent.js";
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
 import { itemsSelectors } from "./useTreeViewItems.selectors.js";
@@ -115,13 +114,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]);
@@ -178,13 +178,6 @@ export const useTreeViewItems = ({
           itemChildrenIndexesLookup: newState.itemChildrenIndexesLookup
         };
       }
-      Object.values(store.state.items.itemMetaLookup).forEach(item => {
-        if (!newItems.itemMetaLookup[item.id]) {
-          publishTreeViewEvent(instance, 'removeItem', {
-            id: item.id
-          });
-        }
-      });
       store.set('items', _extends({}, store.state.items, newItems));
     }
   };
@@ -199,9 +192,6 @@ export const useTreeViewItems = ({
       const newMetaMap = Object.keys(store.state.items.itemMetaLookup).reduce((acc, key) => {
         const item = store.state.items.itemMetaLookup[key];
         if (item.parentId === parentId) {
-          publishTreeViewEvent(instance, 'removeItem', {
-            id: item.id
-          });
           return acc;
         }
         return _extends({}, acc, {
@@ -231,13 +221,6 @@ export const useTreeViewItems = ({
       getItemLabel: params.getItemLabel,
       getItemChildren: params.getItemChildren
     });
-    Object.values(store.state.items.itemMetaLookup).forEach(item => {
-      if (!newState.itemMetaLookup[item.id]) {
-        publishTreeViewEvent(instance, 'removeItem', {
-          id: item.id
-        });
-      }
-    });
     store.set('items', _extends({}, store.state.items, newState));
   }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel, params.getItemChildren]);
 
@@ -283,7 +266,8 @@ useTreeViewItems.getInitialState = params => ({
     getItemChildren: params.getItemChildren
   }), {
     loading: false,
-    error: null
+    error: null,
+    domStructure: 'nested'
   })
 });
 useTreeViewItems.applyDefaultValuesToParams = ({

package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.d.ts

@@ -9,6 +9,10 @@ export declare const itemsSelectors: {
    * Gets the error state for the Tree View.
    */
   error: (state: TreeViewState<[UseTreeViewItemsSignature]>) => Error | null;
+  /**
+   * Gets the DOM structure of the Tree View.
+   */
+  domStructure: (state: TreeViewState<[UseTreeViewItemsSignature]>) => "flat" | "nested";
   /**
    * Checks whether the disabled items are focusable.
    */
@@ -19,6 +23,12 @@ export declare const itemsSelectors: {
   itemMetaLookup: (state: TreeViewState<[UseTreeViewItemsSignature]>) => {
     [itemId: string]: TreeViewItemMeta;
   };
+  /**
+   * Gets the ordered children ids of all items.
+   */
+  itemOrderedChildrenIdsLookup: (state: TreeViewState<[UseTreeViewItemsSignature]>) => {
+    [parentItemId: string]: string[];
+  };
   /**
    * Gets the meta-information of an item.
    */

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

@@ -10,6 +10,10 @@ export const itemsSelectors = {
    * Gets the error state for the Tree View.
    */
   error: createSelector(state => state.items.error),
+  /**
+   * Gets the DOM structure of the Tree View.
+   */
+  domStructure: createSelector(state => state.items.domStructure),
   /**
    * Checks whether the disabled items are focusable.
    */
@@ -18,6 +22,10 @@ export const itemsSelectors = {
    * Gets the meta-information of all items.
    */
   itemMetaLookup: createSelector(state => state.items.itemMetaLookup),
+  /**
+   * Gets the ordered children ids of all items.
+   */
+  itemOrderedChildrenIdsLookup: createSelector(state => state.items.itemOrderedChildrenIdsLookup),
   /**
    * Gets the meta-information of an item.
    */

package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts

@@ -149,13 +149,6 @@ export interface UseTreeViewItemsParameters<R extends {
 export type UseTreeViewItemsParametersWithDefaults<R extends {
   children?: R[];
 }> = DefaultizedProps<UseTreeViewItemsParameters<R>, 'disabledItemsFocusable' | 'itemChildrenIndentation'>;
-interface UseTreeViewItemsEventLookup {
-  removeItem: {
-    params: {
-      id: string;
-    };
-  };
-}
 export interface UseTreeViewItemsState<R extends {}> {
   items: {
     /**
@@ -183,7 +176,7 @@ export interface UseTreeViewItemsState<R extends {}> {
      * Ordered children ids of each item.
      */
     itemOrderedChildrenIdsLookup: {
-      [parentItemId: string]: string[];
+      [parentItemId: string]: TreeViewItemId[];
     };
     /**
      * Index of each child in the ordered children ids of its parent.
@@ -201,6 +194,12 @@ export interface UseTreeViewItemsState<R extends {}> {
      * The error state of the tree.
      */
     error: Error | null;
+    /**
+     * When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).
+     * When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).
+     * Nested DOM structure is not compatible with collapse / expansion animations.
+     */
+    domStructure: 'flat' | 'nested';
   };
 }
 export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
@@ -208,7 +207,5 @@ export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
   paramsWithDefaults: UseTreeViewItemsParametersWithDefaults<any>;
   instance: UseTreeViewItemsInstance<any>;
   publicAPI: UseTreeViewItemsPublicAPI<any>;
-  events: UseTreeViewItemsEventLookup;
   state: UseTreeViewItemsState<TreeViewDefaultItemModelProperties>;
-}>;
-export {};
+}>;

package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -6,7 +6,6 @@ import { useStore } from '@mui/x-internals/store';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { publishTreeViewEvent } from "../../utils/publishTreeViewEvent.js";
 import { useTreeViewContext } from "../../TreeViewProvider/index.js";
 import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/useTreeViewItems.utils.js";
@@ -45,9 +44,6 @@ export const useTreeViewJSXItems = ({
         itemMetaLookup: newItemMetaLookup,
         itemModelLookup: newItemModelLookup
       }));
-      publishTreeViewEvent(instance, 'removeItem', {
-        id: item.id
-      });
     };
   });
   const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {

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.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/RichTreeViewItems.js

@@ -16,21 +16,25 @@ var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompa
 var _TreeItem = require("../../TreeItem");
 var _useTreeViewItems = require("../plugins/useTreeViewItems");
 var _TreeViewProvider = require("../TreeViewProvider");
+var _useTreeViewExpansion = require("../plugins/useTreeViewExpansion");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ownerState"];
 const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") RichTreeViewItemsContext.displayName = "RichTreeViewItemsContext";
+const EMPTY_ARRAY = [];
+const selectorNoChildren = () => EMPTY_ARRAY;
 const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
   itemSlot,
   itemSlotProps,
-  itemId
+  itemId,
+  skipChildren
 }) {
   const renderItemForRichTreeView = React.useContext(RichTreeViewItemsContext);
   const {
     store
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const itemMeta = (0, _store.useStore)(store, _useTreeViewItems.itemsSelectors.itemMeta, itemId);
-  const children = (0, _store.useStore)(store, _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds, itemId);
+  const children = (0, _store.useStore)(store, skipChildren ? selectorNoChildren : _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds, itemId);
   const Item = itemSlot ?? _TreeItem.TreeItem;
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Item,
@@ -61,14 +65,17 @@ function RichTreeViewItems(props) {
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const itemSlot = slots?.item;
   const itemSlotProps = slotProps?.item;
-  const items = (0, _store.useStore)(store, _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds, null);
+  const domStructure = (0, _store.useStore)(store, _useTreeViewItems.itemsSelectors.domStructure);
+  const items = (0, _store.useStore)(store, domStructure === 'flat' ? state => _useTreeViewExpansion.expansionSelectors.flatList(state) : state => _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(state, null));
+  const skipChildren = domStructure === 'flat';
   const renderItem = React.useCallback(itemId => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedTreeItem, {
       itemSlot: itemSlot,
       itemSlotProps: itemSlotProps,
-      itemId: itemId
+      itemId: itemId,
+      skipChildren: skipChildren
     }, itemId);
-  }, [itemSlot, itemSlotProps]);
+  }, [itemSlot, itemSlotProps, skipChildren]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItemsContext.Provider, {
     value: renderItem,
     children: items.map(renderItem)

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts

@@ -6,11 +6,13 @@ export declare const expansionSelectors: {
    */
   expandedItemsRaw: (state: TreeViewState<[UseTreeViewExpansionSignature]>) => string[];
   /**
-   * Get the expanded items as a Map.
-   * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
-   * @returns {TreeViewExpansionValue} The expanded items as a Map.
+   * Gets the expanded items as a Map.
    */
   expandedItemsMap: (args_0: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewExpansion.types.js").UseTreeViewExpansionState & Partial<{}>) => Map<string, true>;
+  /**
+   * Gets the items to render as a flat list (the descendants of an expanded item are listed as siblings of the item).
+   */
+  flatList: (args_0: import("../../corePlugins/useTreeViewId/useTreeViewId.types.js").UseTreeViewIdState & import("./useTreeViewExpansion.types.js").UseTreeViewExpansionState & Partial<{}>) => string[];
   /**
    * Gets the slot that triggers the item's expansion when clicked.
    */

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.expansionSelectors = void 0;
 var _store = require("@mui/x-internals/store");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
+var _useTreeViewItems2 = require("../useTreeViewItems");
 const expandedItemMapSelector = (0, _store.createSelectorMemoized)(state => state.expansion.expandedItems, expandedItems => {
   const expandedItemsMap = new Map();
   expandedItems.forEach(id => {
@@ -19,11 +20,26 @@ const expansionSelectors = exports.expansionSelectors = {
    */
   expandedItemsRaw: (0, _store.createSelector)(state => state.expansion.expandedItems),
   /**
-   * Get the expanded items as a Map.
-   * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
-   * @returns {TreeViewExpansionValue} The expanded items as a Map.
+   * Gets the expanded items as a Map.
    */
   expandedItemsMap: expandedItemMapSelector,
+  /**
+   * Gets the items to render as a flat list (the descendants of an expanded item are listed as siblings of the item).
+   */
+  flatList: (0, _store.createSelectorMemoized)(_useTreeViewItems.itemsSelectors.itemOrderedChildrenIdsLookup, expandedItemMapSelector, (itemOrderedChildrenIds, expandedItemsMap) => {
+    function appendChildren(itemId) {
+      if (!expandedItemsMap.has(itemId)) {
+        return [itemId];
+      }
+      const itemsWithDescendants = [itemId];
+      const children = itemOrderedChildrenIds[itemId] || [];
+      for (const childId of children) {
+        itemsWithDescendants.push(...appendChildren(childId));
+      }
+      return itemsWithDescendants;
+    }
+    return (itemOrderedChildrenIds[_useTreeViewItems2.TREE_VIEW_ROOT_PARENT_ID] ?? []).flatMap(appendChildren);
+  }),
   /**
    * Gets the slot that triggers the item's expansion when clicked.
    */

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewFocus = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useInstanceEventHandler = require("../../hooks/useInstanceEventHandler");
+var _store = require("@mui/x-internals/store");
 var _useTreeViewFocus = require("./useTreeViewFocus.selectors");
 var _useTreeViewExpansion = require("../useTreeViewExpansion/useTreeViewExpansion.selectors");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
@@ -59,14 +59,23 @@ const useTreeViewFocus = ({
     }
     setFocusedItemId(null);
   });
-  (0, _useInstanceEventHandler.useInstanceEventHandler)(instance, 'removeItem', ({
-    id
-  }) => {
+
+  // Whenever the items change, we need to ensure the focused item is still present.
+  (0, _store.useStoreEffect)(store, _useTreeViewItems.itemsSelectors.itemMetaLookup, () => {
     const focusedItemId = _useTreeViewFocus.focusSelectors.focusedItemId(store.state);
+    if (focusedItemId == null) {
+      return;
+    }
+    const hasItemBeenRemoved = !_useTreeViewItems.itemsSelectors.itemMeta(store.state, focusedItemId);
+    if (!hasItemBeenRemoved) {
+      return;
+    }
     const defaultFocusableItemId = _useTreeViewFocus.focusSelectors.defaultFocusableItemId(store.state);
-    if (focusedItemId === id && defaultFocusableItemId != null) {
-      innerFocusItem(null, defaultFocusableItemId);
+    if (defaultFocusableItemId == null) {
+      setFocusedItemId(null);
+      return;
     }
+    innerFocusItem(null, defaultFocusableItemId);
   });
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -10,7 +10,6 @@ exports.useTreeViewItems = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
 var _useTreeViewItems = require("./useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
 var _useTreeViewItems2 = require("./useTreeViewItems.selectors");
@@ -122,13 +121,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]);
@@ -185,13 +185,6 @@ const useTreeViewItems = ({
           itemChildrenIndexesLookup: newState.itemChildrenIndexesLookup
         };
       }
-      Object.values(store.state.items.itemMetaLookup).forEach(item => {
-        if (!newItems.itemMetaLookup[item.id]) {
-          (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
-            id: item.id
-          });
-        }
-      });
       store.set('items', (0, _extends2.default)({}, store.state.items, newItems));
     }
   };
@@ -206,9 +199,6 @@ const useTreeViewItems = ({
       const newMetaMap = Object.keys(store.state.items.itemMetaLookup).reduce((acc, key) => {
         const item = store.state.items.itemMetaLookup[key];
         if (item.parentId === parentId) {
-          (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
-            id: item.id
-          });
           return acc;
         }
         return (0, _extends2.default)({}, acc, {
@@ -238,13 +228,6 @@ const useTreeViewItems = ({
       getItemLabel: params.getItemLabel,
       getItemChildren: params.getItemChildren
     });
-    Object.values(store.state.items.itemMetaLookup).forEach(item => {
-      if (!newState.itemMetaLookup[item.id]) {
-        (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
-          id: item.id
-        });
-      }
-    });
     store.set('items', (0, _extends2.default)({}, store.state.items, newState));
   }, [instance, store, params.items, params.disabledItemsFocusable, params.isItemDisabled, params.getItemId, params.getItemLabel, params.getItemChildren]);
 
@@ -291,7 +274,8 @@ useTreeViewItems.getInitialState = params => ({
     getItemChildren: params.getItemChildren
   }), {
     loading: false,
-    error: null
+    error: null,
+    domStructure: 'nested'
   })
 });
 useTreeViewItems.applyDefaultValuesToParams = ({

package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.d.ts

@@ -9,6 +9,10 @@ export declare const itemsSelectors: {
    * Gets the error state for the Tree View.
    */
   error: (state: TreeViewState<[UseTreeViewItemsSignature]>) => Error | null;
+  /**
+   * Gets the DOM structure of the Tree View.
+   */
+  domStructure: (state: TreeViewState<[UseTreeViewItemsSignature]>) => "flat" | "nested";
   /**
    * Checks whether the disabled items are focusable.
    */
@@ -19,6 +23,12 @@ export declare const itemsSelectors: {
   itemMetaLookup: (state: TreeViewState<[UseTreeViewItemsSignature]>) => {
     [itemId: string]: TreeViewItemMeta;
   };
+  /**
+   * Gets the ordered children ids of all items.
+   */
+  itemOrderedChildrenIdsLookup: (state: TreeViewState<[UseTreeViewItemsSignature]>) => {
+    [parentItemId: string]: string[];
+  };
   /**
    * Gets the meta-information of an item.
    */

package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js

@@ -16,6 +16,10 @@ const itemsSelectors = exports.itemsSelectors = {
    * Gets the error state for the Tree View.
    */
   error: (0, _store.createSelector)(state => state.items.error),
+  /**
+   * Gets the DOM structure of the Tree View.
+   */
+  domStructure: (0, _store.createSelector)(state => state.items.domStructure),
   /**
    * Checks whether the disabled items are focusable.
    */
@@ -24,6 +28,10 @@ const itemsSelectors = exports.itemsSelectors = {
    * Gets the meta-information of all items.
    */
   itemMetaLookup: (0, _store.createSelector)(state => state.items.itemMetaLookup),
+  /**
+   * Gets the ordered children ids of all items.
+   */
+  itemOrderedChildrenIdsLookup: (0, _store.createSelector)(state => state.items.itemOrderedChildrenIdsLookup),
   /**
    * Gets the meta-information of an item.
    */

package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts

@@ -149,13 +149,6 @@ export interface UseTreeViewItemsParameters<R extends {
 export type UseTreeViewItemsParametersWithDefaults<R extends {
   children?: R[];
 }> = DefaultizedProps<UseTreeViewItemsParameters<R>, 'disabledItemsFocusable' | 'itemChildrenIndentation'>;
-interface UseTreeViewItemsEventLookup {
-  removeItem: {
-    params: {
-      id: string;
-    };
-  };
-}
 export interface UseTreeViewItemsState<R extends {}> {
   items: {
     /**
@@ -183,7 +176,7 @@ export interface UseTreeViewItemsState<R extends {}> {
      * Ordered children ids of each item.
      */
     itemOrderedChildrenIdsLookup: {
-      [parentItemId: string]: string[];
+      [parentItemId: string]: TreeViewItemId[];
     };
     /**
      * Index of each child in the ordered children ids of its parent.
@@ -201,6 +194,12 @@ export interface UseTreeViewItemsState<R extends {}> {
      * The error state of the tree.
      */
     error: Error | null;
+    /**
+     * When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).
+     * When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).
+     * Nested DOM structure is not compatible with collapse / expansion animations.
+     */
+    domStructure: 'flat' | 'nested';
   };
 }
 export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
@@ -208,7 +207,5 @@ export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
   paramsWithDefaults: UseTreeViewItemsParametersWithDefaults<any>;
   instance: UseTreeViewItemsInstance<any>;
   publicAPI: UseTreeViewItemsPublicAPI<any>;
-  events: UseTreeViewItemsEventLookup;
   state: UseTreeViewItemsState<TreeViewDefaultItemModelProperties>;
-}>;
-export {};
+}>;

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -13,7 +13,6 @@ var _store = require("@mui/x-internals/store");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
 var _TreeViewProvider = require("../../TreeViewProvider");
 var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.utils");
@@ -52,9 +51,6 @@ const useTreeViewJSXItems = ({
         itemMetaLookup: newItemMetaLookup,
         itemModelLookup: newItemModelLookup
       }));
-      (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
-        id: item.id
-      });
     };
   });
   const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.11.1",
+  "version": "8.11.3",
   "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.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",