@mui/x-tree-view 8.11.2 → 8.11.3

package/CHANGELOG.md

@@ -5,6 +5,92 @@
 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_

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

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v8.11.2
+ * @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";
@@ -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.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");
@@ -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.11.3",
   "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.11.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",