@mui/x-tree-view 8.11.2 → 8.12.0

package/CHANGELOG.md

@@ -5,6 +5,237 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.12.0
+
+_Sep 25, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🤝 Grid-Charts integration
+
+![Grid x Charts](https://github.com/user-attachments/assets/0817c36f-f87f-4688-8f30-fa0db638ca8c)
+
+  👉 [🎥 Watch the full video](https://github.com/user-attachments/assets/28f1848e-dc85-4077-8756-a3e88afd4e54)
+
+- ⌨️ Charts keyboard navigation
+- ⚡️ Charts: Add new `renderer="svg-batch"` prop to Scatter charts that provides improved performance for large datasets
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🧰 Codemod requires Node >=20.19
+
+`@mui/x-codemod` minimum supported Node version is `20.19`.
+This was only the case due to using the v18 `yargs` package; this now explicitly aligns with it. (#18979)
+
+Special thanks go out to the community members for their valuable contributions:
+@deade1e, @sai6855, @thomas-mcdonald
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @michelengelen, @prakhargupta1, @rita-codes, @siriwatknp, @arminmeh, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.12.0`
+
+- [DataGrid] Fix flex column width diff calculation while resizing (#19667) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.12.0`.
+
+#### `@mui/x-data-grid-premium@8.12.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.12.0`, plus:
+
+- [DataGridPremium] Grid-Charts integration (#18021) @arminmeh
+- [DataGridPremium] Fix sorting and filtering of the tree group columns with aggregation (#19607) @arminmeh
+- [DataGridPremium] Disable aggregation on the grouping column by default (#19692) @arminmeh
+- [DataGridPremium] Do not rely on the group separation constant to retrieve the column name for the charts panel (#19677) @arminmeh
+- [DataGridPremium] Fix stale aggregation state (#19690) @arminmeh
+- [DataGridPremium] Fix pivot column being hidden on autosizing (#19699) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.12.0`
+
+- [pickers] Ensure reference value is not updated for invalid values (#19635) @michelengelen
+- [pickers] Fix `slotProps.textField.slotProps.htmlInput` resolution (#19713) @LukasTy
+- [pickers] Preserve time format when using single column layout on Time Range Picker (#19626) @sai6855
+- [pickers] Preserve time format when using single column layout on Date Time Picker and Date Time Range Picker (#19608) @sai6855
+
+#### `@mui/x-date-pickers-pro@8.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.12.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.12.0`
+
+- [charts] Add batch renderer for scatter chart (#19075) @bernardobelchior
+- [charts] Add renderer suffix to performance benchmarks (#19620) @bernardobelchior
+- [charts] Document how plugins can be used (#19343) @alexfauquette
+- [charts] Export chart plugins per series type (#19337) @alexfauquette
+- [charts] Export plugins (#19335) @alexfauquette
+- [charts] Fix horizontal layout and toolbar (#19655) @alexfauquette
+- [charts] Fix performance issue with JS animations (#19606) @bernardobelchior
+- [charts] Fix piecewise scale causing wrong colors in axis with min/max (#19610) @bernardobelchior
+- [charts] Fix zoom discard inconsistency (#19535) @bernardobelchior
+- [charts] Introduce keyboard navigation (#19155) @alexfauquette
+- [charts] Refactor `getAxisExtremum` (#19627) @bernardobelchior
+- [charts] Remove unused code path from `getAxisScale` (#19673) @bernardobelchior
+- [charts] Make new hideLegend prop on ChartWrapper optional (#19694) @thomas-mcdonald
+- [charts] Fix chart crash in test environment (#19711) @JCQuintas
+
+#### `@mui/x-charts-pro@8.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.12.0`, plus:
+
+- [charts-pro] Add `valueFormatter` to sankey (#19636) @JCQuintas
+- [charts-pro] Allow `source/target` keywords in sankey link color (#19634) @JCQuintas
+- [charts-pro] Allow exporting `SankeyChart` (#19659) @JCQuintas
+- [charts-pro] Fix axis inversion when using axis `max` and `filterMode: 'discard'` (#19200) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.12.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.12.0`, plus:
+
+- [charts-premium] Grid-Charts integration (#18021) @arminmeh
+
+### Tree View
+
+#### `@mui/x-tree-view@8.12.0`
+
+- [tree view] Allow to pass `null` to the icon slots (#19569) @flaviendelangle
+- [tree view] Fix `apiRef.current.isItemExpanded()` method (#19619) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.12.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.12.0`
+
+- [codemod] Bump `engines.node` to `>=20.19` to align with `yargs` package (#18979) @LukasTy
+
+### Docs
+
+- [docs] Add missing label to Charts example (#19616) @prakhargupta1
+- [docs] Replace axis type and axis data with a table (#19618) @prakhargupta1
+- [docs] Add Charts example collection page (#18353) @prakhargupta1
+- [docs] Add a Charts demo showcasing bar and scatter composition (#19605) @prakhargupta1
+- [docs] Add composition Charts demo for legends and tooltip (#19602) @prakhargupta1
+- [docs] Add recipe about server-side data export (#19617) @siriwatknp
+- [docs] Clarify DataGrid layout requirements (#19413) @romgrk
+- [docs] Fix `ExportServerSideData` demo layout shift (#19669) @siriwatknp
+- [docs] Improve server-side `updateRow()` description (#19554) @deade1e
+- [docs] Show how to customize drawing area background (#19682) @alexfauquette
+- [docs] Add hook documentation pages (#19334) @Copilot
+
+### Core
+
+- [code-infra] Add copilot instructions specific to x repo (#19623) @JCQuintas
+- [code-infra] Load `tsx` files in visual regression (#19595) @JCQuintas
+- [code-infra] Remove renovate automerge (#19501) @Janpot
+- [code-infra] Update `DEFAULT_TIMESTAMP` format to ISO 8601 (#19624) @Janpot
+- [code-infra] Update `findLatestTaggedVersion` to filter tags based on major version (#19693) @michelengelen
+- [code-infra] Fix changelog generation for charts premium (#19701) @JCQuintas
+- [code-infra] Run prettier on `createReleasePR.mjs` (#19702) @bernardobelchior
+- [code-infra] Make `x-charts-premium` releasable (#18959) @JCQuintas
+- [docs-infra] Ensure `create-playground` script only runs if target file is absent (#19603) @michelengelen
+- [docs-infra] Add @prakhargupta1 as a codeowner of the docs (#19679) @alexfauquette
+
+### Miscellaneous
+
+- [test] Reduce time for wheel zoom test (#19571) @alexfauquette
+- Change `matchPackageNames` to `matchDepNames` for date-fns-v2 @Janpot
+- Remove groupName for date-fns-v2 in renovate.json @Janpot
+
+## 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_

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/TreeItemIcon/TreeItemIcon.js

@@ -15,6 +15,15 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _TreeViewStyleContext = require("../internals/TreeViewProvider/TreeViewStyleContext");
 var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
+function pickIcon(treeItemIcon, treeViewIcon, fallback) {
+  if (treeItemIcon !== undefined) {
+    return treeItemIcon;
+  }
+  if (treeViewIcon !== undefined) {
+    return treeViewIcon;
+  }
+  return fallback;
+}
 function TreeItemIcon(props) {
   const {
     slots: slotsFromTreeItem,
@@ -26,9 +35,9 @@ function TreeItemIcon(props) {
     slotProps: slotPropsFromTreeView
   } = (0, _TreeViewStyleContext.useTreeViewStyleContext)();
   const slots = {
-    collapseIcon: slotsFromTreeItem?.collapseIcon ?? slotsFromTreeView.collapseIcon ?? _icons.TreeViewCollapseIcon,
-    expandIcon: slotsFromTreeItem?.expandIcon ?? slotsFromTreeView.expandIcon ?? _icons.TreeViewExpandIcon,
-    endIcon: slotsFromTreeItem?.endIcon ?? slotsFromTreeView.endIcon,
+    collapseIcon: pickIcon(slotsFromTreeItem?.collapseIcon, slotsFromTreeView.collapseIcon, _icons.TreeViewCollapseIcon),
+    expandIcon: pickIcon(slotsFromTreeItem?.expandIcon, slotsFromTreeView.expandIcon, _icons.TreeViewExpandIcon),
+    endIcon: pickIcon(slotsFromTreeItem?.endIcon, slotsFromTreeView.endIcon),
     icon: slotsFromTreeItem?.icon
   };
   let iconName;

package/TreeItemIcon/TreeItemIcon.types.d.ts

@@ -5,19 +5,19 @@ export interface TreeItemIconSlots {
   /**
    * The icon used to collapse the item.
    */
-  collapseIcon?: React.ElementType;
+  collapseIcon?: React.ElementType | null;
   /**
    * The icon used to expand the item.
    */
-  expandIcon?: React.ElementType;
+  expandIcon?: React.ElementType | null;
   /**
    * The icon displayed next to an end item.
    */
-  endIcon?: React.ElementType;
+  endIcon?: React.ElementType | null;
   /**
    * The icon to display next to the Tree Item's label.
    */
-  icon?: React.ElementType;
+  icon?: React.ElementType | null;
 }
 export interface TreeItemIconSlotProps {
   collapseIcon?: SlotComponentProps<'svg', {}, {}>;

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/TreeItemIcon/TreeItemIcon.js

@@ -8,6 +8,15 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import { useTreeViewStyleContext } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from "../icons/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+function pickIcon(treeItemIcon, treeViewIcon, fallback) {
+  if (treeItemIcon !== undefined) {
+    return treeItemIcon;
+  }
+  if (treeViewIcon !== undefined) {
+    return treeViewIcon;
+  }
+  return fallback;
+}
 function TreeItemIcon(props) {
   const {
     slots: slotsFromTreeItem,
@@ -19,9 +28,9 @@ function TreeItemIcon(props) {
     slotProps: slotPropsFromTreeView
   } = useTreeViewStyleContext();
   const slots = {
-    collapseIcon: slotsFromTreeItem?.collapseIcon ?? slotsFromTreeView.collapseIcon ?? TreeViewCollapseIcon,
-    expandIcon: slotsFromTreeItem?.expandIcon ?? slotsFromTreeView.expandIcon ?? TreeViewExpandIcon,
-    endIcon: slotsFromTreeItem?.endIcon ?? slotsFromTreeView.endIcon,
+    collapseIcon: pickIcon(slotsFromTreeItem?.collapseIcon, slotsFromTreeView.collapseIcon, TreeViewCollapseIcon),
+    expandIcon: pickIcon(slotsFromTreeItem?.expandIcon, slotsFromTreeView.expandIcon, TreeViewExpandIcon),
+    endIcon: pickIcon(slotsFromTreeItem?.endIcon, slotsFromTreeView.endIcon),
     icon: slotsFromTreeItem?.icon
   };
   let iconName;

package/esm/TreeItemIcon/TreeItemIcon.types.d.ts

@@ -5,19 +5,19 @@ export interface TreeItemIconSlots {
   /**
    * The icon used to collapse the item.
    */
-  collapseIcon?: React.ElementType;
+  collapseIcon?: React.ElementType | null;
   /**
    * The icon used to expand the item.
    */
-  expandIcon?: React.ElementType;
+  expandIcon?: React.ElementType | null;
   /**
    * The icon displayed next to an end item.
    */
-  endIcon?: React.ElementType;
+  endIcon?: React.ElementType | null;
   /**
    * The icon to display next to the Tree Item's label.
    */
-  icon?: React.ElementType;
+  icon?: React.ElementType | null;
 }
 export interface TreeItemIconSlotProps {
   collapseIcon?: SlotComponentProps<'svg', {}, {}>;

package/esm/index.js

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

package/esm/internals/TreeViewProvider/TreeViewStyleContext.d.ts

@@ -28,16 +28,16 @@ export interface TreeViewSlots {
   /**
    * The default icon used to collapse the item.
    */
-  collapseIcon?: React.ElementType;
+  collapseIcon?: React.ElementType | null;
   /**
    * The default icon used to expand the item.
    */
-  expandIcon?: React.ElementType;
+  expandIcon?: React.ElementType | null;
   /**
    * The default icon displayed next to an end item.
    * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
    */
-  endIcon?: React.ElementType;
+  endIcon?: React.ElementType | null;
 }
 export interface TreeViewSlotProps {
   collapseIcon?: SlotComponentProps<'svg', {}, {}>;

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.js

@@ -84,7 +84,7 @@ export const useTreeViewExpansion = ({
     });
   });
   const isItemExpanded = useEventCallback(itemId => {
-    return expansionSelectors.isItemExpandable(store.state, itemId);
+    return expansionSelectors.isItemExpanded(store.state, itemId);
   });
   const expandAllSiblings = (event, itemId) => {
     const itemMeta = itemsSelectors.itemMeta(store.state, itemId);

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/useTreeViewFocus/useTreeViewFocus.types.d.ts

@@ -9,10 +9,10 @@ export interface UseTreeViewFocusPublicAPI {
    *
    * If the item is the child of a collapsed item, then this method will do nothing.
    * Make sure to expand the ancestors of the item before calling this method if needed.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change.
    * @param {TreeViewItemId} itemId The id of the item to focus.
    */
-  focusItem: (event: React.SyntheticEvent, itemId: string) => void;
+  focusItem: (event: React.SyntheticEvent | null, itemId: string) => void;
 }
 export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
   /**

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";
@@ -179,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));
     }
   };
@@ -200,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, {
@@ -232,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]);
 
@@ -284,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/index.js

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

package/internals/TreeViewProvider/TreeViewStyleContext.d.ts

@@ -28,16 +28,16 @@ export interface TreeViewSlots {
   /**
    * The default icon used to collapse the item.
    */
-  collapseIcon?: React.ElementType;
+  collapseIcon?: React.ElementType | null;
   /**
    * The default icon used to expand the item.
    */
-  expandIcon?: React.ElementType;
+  expandIcon?: React.ElementType | null;
   /**
    * The default icon displayed next to an end item.
    * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
    */
-  endIcon?: React.ElementType;
+  endIcon?: React.ElementType | null;
 }
 export interface TreeViewSlotProps {
   collapseIcon?: SlotComponentProps<'svg', {}, {}>;

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.js

@@ -91,7 +91,7 @@ const useTreeViewExpansion = ({
     });
   });
   const isItemExpanded = (0, _useEventCallback.default)(itemId => {
-    return _useTreeViewExpansion.expansionSelectors.isItemExpandable(store.state, itemId);
+    return _useTreeViewExpansion.expansionSelectors.isItemExpanded(store.state, itemId);
   });
   const expandAllSiblings = (event, itemId) => {
     const itemMeta = _useTreeViewItems.itemsSelectors.itemMeta(store.state, itemId);

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/useTreeViewFocus/useTreeViewFocus.types.d.ts

@@ -9,10 +9,10 @@ export interface UseTreeViewFocusPublicAPI {
    *
    * If the item is the child of a collapsed item, then this method will do nothing.
    * Make sure to expand the ancestors of the item before calling this method if needed.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change.
    * @param {TreeViewItemId} itemId The id of the item to focus.
    */
-  focusItem: (event: React.SyntheticEvent, itemId: string) => void;
+  focusItem: (event: React.SyntheticEvent | null, itemId: string) => void;
 }
 export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
   /**

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");
@@ -186,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));
     }
   };
@@ -207,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, {
@@ -239,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]);
 
@@ -292,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.2",
+  "version": "8.12.0",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Tree View components.",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.11.2"
+    "@mui/x-internals": "8.12.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",