@mui/x-tree-view 8.12.0 → 8.13.0

package/CHANGELOG.md

@@ -5,6 +5,151 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.13.0
+
+_Oct 1, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 The chart zoom now supports the `tapAndDrag` gesture. Zoom in/out by tapping twice and dragging vertically.
+- 🔎 Charts now allow [fine-grained control for zoom interactions](https://mui.com/x/react-charts/zoom-and-pan/#zoom-interactions-configuration).
+  ```jsx
+  <BarChartPro
+    zoomInteractionConfig={{
+      // Only zoom when Control key is pressed
+      zoom: [{ type: 'wheel', keys: ['Control'] }],
+      // Only pan when Shift key is pressed
+      pan: [{ type: 'drag', keys: ['Shift'] }],
+    }}
+  />
+  ```
+- ➡️ Data Grid grouping rows now persist their expansion state when the rows are updated.
+- 📜 Updated Data Grid vertical scrollbar to include pinned rows and aggregation sections.
+- 📌 Improved the appearance of [pinned columns](https://mui.com/x/react-data-grid/column-pinning/#pinned-columns-appearance) and [pinned rows](https://mui.com/x/react-data-grid/row-pinning/#pinned-rows-appearance) sections in the Data Grid.
+- 🚀 Tree View now fetches the children of expanded items on mount when using lazy loading.
+- 🐞 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, @arminmeh, @bernardobelchior, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @KenanYusuf, @mapache-salvaje, @MBilalShafi, @mnajdova, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.13.0`
+
+- [DataGrid] Add scroll shadows and fix scrollbar overlap (#16476) @KenanYusuf
+- [DataGrid] Fix row spanning stale state issue (#19733) @MBilalShafi
+- [DataGrid] Fix toolbar `slotProps` not being applied (#19769) @sai6855
+- [DataGrid] Skip calling `fetchRows()` when strategy is not initialized (#19728) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.13.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.13.0`, plus:
+
+- [DataGridPro] Retain expansion state on rows update (#19697) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.13.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.13.0`, plus:
+
+- [DataGridPremium] Add `metadata.referenceId` to AI assistant prompt resolver (#19695) @hasdfa
+- [DataGridPremium] Fix aggregation value retrieval (#19724) @arminmeh
+- [DataGridPremium] Get correct active chart id while rebuilding data (#19720) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.12.0`
+
+Internal changes.
+
+#### `@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.13.0`
+
+- [charts] Add `tapAndDrag` zoom gesture (#19727) @JCQuintas
+- [charts] Add arc focus indicator that follows the arc form (#19696) @mnajdova
+- [charts] Fix outline color (#19752) @alexfauquette
+- [charts] Improve tooltip doc (#19731) @JCQuintas
+- [charts] Make axis highlight reflect the keyboard interaction (#19631) @alexfauquette
+- [charts] Prevent horizontal scroll on keyboard navigation (#19704) @alexfauquette
+- [charts] Simplify gestures by removing bindings (#19767) @JCQuintas
+
+#### `@mui/x-charts-pro@8.13.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.13.0`, plus:
+
+- [charts-pro] Allow zoom interactions to be configured (#18646) @JCQuintas
+- [charts-pro] Fix zoom preview having wrong domain in some cases (#19723) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.13.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.13.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.13.0`
+
+- [tree view] Export the `apiRef` type of each Tree View component (#19543) @flaviendelangle
+- [tree view] Fix indeterminate checkbox state (#19544) @flaviendelangle
+- [tree view] Improve the lazy loading initial expansion (#19284) @flaviendelangle
+- [tree view] Use Base UI utils whenever possible (#19502) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.13.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.13.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.12.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add a recipe to customize editing component with Autocomplete (#19651) @siriwatknp
+- [docs] Refine the electricity scatter tooltip (#19689) @alexfauquette
+- [docs] Revise the Axis doc (#19052) @mapache-salvaje
+- [docs] Remove reference to nonexistent `FocusedMark` API page (#19773) @bernardobelchior
+
+### Core
+
+- [code-infra] Change charts codspeed integration to use walltime (#19729) @JCQuintas
+- [code-infra] Port stylelint from core repo (#19633) @Janpot
+- [code-infra] Stabilize fake timers in regression tests (#19719) @Janpot
+- [code-infra] Stabilize size for bundles with `releaseInfo` (#19674) @Janpot
+- [code-infra] Fix `pnpm-lock.yaml` broken lockfile (#19755) @bernardobelchior
+
+## 8.12.1
+
+_Sep 25, 2025_
+
+Release highlight ✨:
+
+- 🐞 Hotfix for Grid-Charts integration issue with aggregated values
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.12.1`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@8.12.1` [![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.1`.
+
+#### `@mui/x-data-grid-premium@8.12.1` [![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.1`, plus:
+
+- [DataGridPremium] Collect aggregated values properly for the charts integration context (#19714) @arminmeh
+
 ## 8.12.0
 
 _Sep 25, 2025_

package/RichTreeView/RichTreeView.js

@@ -23,7 +23,7 @@ var _useTreeView = require("../internals/useTreeView");
 var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _RichTreeView2 = require("./RichTreeView.plugins");
 var _RichTreeViewItems = require("../internals/components/RichTreeViewItems");
-var _useTreeViewItems = require("../internals/plugins/useTreeViewItems");
+var _useTreeViewLazyLoading = require("../internals/plugins/useTreeViewLazyLoading");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiRichTreeView');
@@ -90,8 +90,8 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
     rootRef: ref,
     props: other
   });
-  const isLoading = (0, _store.useStore)(contextValue.store, _useTreeViewItems.itemsSelectors.isLoading);
-  const treeViewError = (0, _store.useStore)(contextValue.store, _useTreeViewItems.itemsSelectors.error);
+  const isLoading = (0, _store.useStore)(contextValue.store, _useTreeViewLazyLoading.lazyLoadingSelectors.isItemLoading, null);
+  const error = (0, _store.useStore)(contextValue.store, _useTreeViewLazyLoading.lazyLoadingSelectors.itemError, null);
   const classes = useUtilityClasses(props);
   const Root = slots?.root ?? RichTreeViewRoot;
   const rootProps = (0, _useSlotProps.default)({
@@ -106,10 +106,10 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
       children: "Loading..."
     });
   }
-  if (treeViewError) {
+  if (error) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
       severity: "error",
-      children: treeViewError.message
+      children: error.message
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewProvider.TreeViewProvider, {

package/RichTreeView/RichTreeView.types.d.ts

@@ -17,7 +17,7 @@ export interface RichTreeViewSlots extends TreeViewSlots, RichTreeViewItemsSlots
 export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends TreeViewSlotProps, RichTreeViewItemsSlotProps {
   root?: SlotComponentProps<'ul', {}, RichTreeViewProps<R, Multiple>>;
 }
-type RichTreeViewApiRef = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewPluginSignatures>> | undefined>;
+export type RichTreeViewApiRef = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewPluginSignatures>> | undefined>;
 export interface RichTreeViewPropsBase extends React.HTMLAttributes<HTMLUListElement> {
   className?: string;
   /**
@@ -44,5 +44,4 @@ export interface RichTreeViewProps<R extends {}, Multiple extends boolean | unde
    * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
    */
   apiRef?: RichTreeViewApiRef;
-}
-export {};
+}

package/RichTreeView/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./RichTreeView.js";
 export * from "./richTreeViewClasses.js";
-export type { RichTreeViewProps, RichTreeViewPropsBase, RichTreeViewSlots, RichTreeViewSlotProps } from "./RichTreeView.types.js";
+export type { RichTreeViewProps, RichTreeViewPropsBase, RichTreeViewSlots, RichTreeViewSlotProps, RichTreeViewApiRef } from "./RichTreeView.types.js";
 export { RICH_TREE_VIEW_PLUGINS } from "./RichTreeView.plugins.js";
 export type { RichTreeViewPluginParameters } from "./RichTreeView.plugins.js";

package/SimpleTreeView/SimpleTreeView.types.d.ts

@@ -16,7 +16,7 @@ export interface SimpleTreeViewSlots extends TreeViewSlots {
 export interface SimpleTreeViewSlotProps extends TreeViewSlotProps {
   root?: SlotComponentProps<'ul', {}, {}>;
 }
-type SimpleTreeViewApiRef = React.RefObject<Partial<TreeViewPublicAPI<SimpleTreeViewPluginSignatures>> | undefined>;
+export type SimpleTreeViewApiRef = React.RefObject<Partial<TreeViewPublicAPI<SimpleTreeViewPluginSignatures>> | undefined>;
 export interface SimpleTreeViewProps<Multiple extends boolean | undefined> extends SimpleTreeViewPluginParameters<Multiple>, React.HTMLAttributes<HTMLUListElement> {
   /**
    * The content of the component.
@@ -43,5 +43,4 @@ export interface SimpleTreeViewProps<Multiple extends boolean | undefined> exten
    * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
    */
   apiRef?: SimpleTreeViewApiRef;
-}
-export {};
+}

package/SimpleTreeView/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./SimpleTreeView.js";
 export * from "./simpleTreeViewClasses.js";
-export type { SimpleTreeViewProps, SimpleTreeViewSlots, SimpleTreeViewSlotProps } from "./SimpleTreeView.types.js";
+export type { SimpleTreeViewProps, SimpleTreeViewSlots, SimpleTreeViewSlotProps, SimpleTreeViewApiRef } from "./SimpleTreeView.types.js";

package/esm/RichTreeView/RichTreeView.js

@@ -17,7 +17,7 @@ import { useTreeView } from "../internals/useTreeView/index.js";
 import { TreeViewProvider } from "../internals/TreeViewProvider/index.js";
 import { RICH_TREE_VIEW_PLUGINS } from "./RichTreeView.plugins.js";
 import { RichTreeViewItems } from "../internals/components/RichTreeViewItems.js";
-import { itemsSelectors } from "../internals/plugins/useTreeViewItems/index.js";
+import { lazyLoadingSelectors } from "../internals/plugins/useTreeViewLazyLoading/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiRichTreeView');
 const useUtilityClasses = ownerState => {
@@ -83,8 +83,8 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     rootRef: ref,
     props: other
   });
-  const isLoading = useStore(contextValue.store, itemsSelectors.isLoading);
-  const treeViewError = useStore(contextValue.store, itemsSelectors.error);
+  const isLoading = useStore(contextValue.store, lazyLoadingSelectors.isItemLoading, null);
+  const error = useStore(contextValue.store, lazyLoadingSelectors.itemError, null);
   const classes = useUtilityClasses(props);
   const Root = slots?.root ?? RichTreeViewRoot;
   const rootProps = useSlotProps({
@@ -99,10 +99,10 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
       children: "Loading..."
     });
   }
-  if (treeViewError) {
+  if (error) {
     return /*#__PURE__*/_jsx(Alert, {
       severity: "error",
-      children: treeViewError.message
+      children: error.message
     });
   }
   return /*#__PURE__*/_jsx(TreeViewProvider, {

package/esm/RichTreeView/RichTreeView.types.d.ts

@@ -17,7 +17,7 @@ export interface RichTreeViewSlots extends TreeViewSlots, RichTreeViewItemsSlots
 export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends TreeViewSlotProps, RichTreeViewItemsSlotProps {
   root?: SlotComponentProps<'ul', {}, RichTreeViewProps<R, Multiple>>;
 }
-type RichTreeViewApiRef = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewPluginSignatures>> | undefined>;
+export type RichTreeViewApiRef = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewPluginSignatures>> | undefined>;
 export interface RichTreeViewPropsBase extends React.HTMLAttributes<HTMLUListElement> {
   className?: string;
   /**
@@ -44,5 +44,4 @@ export interface RichTreeViewProps<R extends {}, Multiple extends boolean | unde
    * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
    */
   apiRef?: RichTreeViewApiRef;
-}
-export {};
+}

package/esm/RichTreeView/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./RichTreeView.js";
 export * from "./richTreeViewClasses.js";
-export type { RichTreeViewProps, RichTreeViewPropsBase, RichTreeViewSlots, RichTreeViewSlotProps } from "./RichTreeView.types.js";
+export type { RichTreeViewProps, RichTreeViewPropsBase, RichTreeViewSlots, RichTreeViewSlotProps, RichTreeViewApiRef } from "./RichTreeView.types.js";
 export { RICH_TREE_VIEW_PLUGINS } from "./RichTreeView.plugins.js";
 export type { RichTreeViewPluginParameters } from "./RichTreeView.plugins.js";

package/esm/SimpleTreeView/SimpleTreeView.types.d.ts

@@ -16,7 +16,7 @@ export interface SimpleTreeViewSlots extends TreeViewSlots {
 export interface SimpleTreeViewSlotProps extends TreeViewSlotProps {
   root?: SlotComponentProps<'ul', {}, {}>;
 }
-type SimpleTreeViewApiRef = React.RefObject<Partial<TreeViewPublicAPI<SimpleTreeViewPluginSignatures>> | undefined>;
+export type SimpleTreeViewApiRef = React.RefObject<Partial<TreeViewPublicAPI<SimpleTreeViewPluginSignatures>> | undefined>;
 export interface SimpleTreeViewProps<Multiple extends boolean | undefined> extends SimpleTreeViewPluginParameters<Multiple>, React.HTMLAttributes<HTMLUListElement> {
   /**
    * The content of the component.
@@ -43,5 +43,4 @@ export interface SimpleTreeViewProps<Multiple extends boolean | undefined> exten
    * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
    */
   apiRef?: SimpleTreeViewApiRef;
-}
-export {};
+}

package/esm/SimpleTreeView/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./SimpleTreeView.js";
 export * from "./simpleTreeViewClasses.js";
-export type { SimpleTreeViewProps, SimpleTreeViewSlots, SimpleTreeViewSlotProps } from "./SimpleTreeView.types.js";
+export type { SimpleTreeViewProps, SimpleTreeViewSlots, SimpleTreeViewSlotProps, SimpleTreeViewApiRef } from "./SimpleTreeView.types.js";

package/esm/hooks/useApplyPropagationToSelectedItemsOnMount.js

@@ -1,4 +1,4 @@
-import useLazyRef from '@mui/utils/useLazyRef';
+import { useRefWithInit } from '@base-ui-components/utils/useRefWithInit';
 import { getLookupFromArray } from "../internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js";
 const defaultGetItemId = item => item.id;
 const defaultGetItemChildren = item => item.children;
@@ -52,7 +52,7 @@ export function useApplyPropagationToSelectedItemsOnMount(parameters) {
     selectedItems,
     selectionPropagation
   } = parameters;
-  return useLazyRef(() => {
+  return useRefWithInit(() => {
     const lookup = getLookupFromArray(selectedItems);
     function walk(items, isParentSelected) {
       for (const item of items) {

package/esm/index.js

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

package/esm/internals/index.d.ts

@@ -3,7 +3,7 @@ export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.j
 export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
 export type { RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from "./components/RichTreeViewItems.js";
 export { unstable_resetCleanupTracking, useInstanceEventHandler } from "./hooks/useInstanceEventHandler.js";
-export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewState, TreeViewItemMeta, TreeViewInstance, TreeViewItemPlugin, TreeViewUsedStore } from "./models/index.js";
+export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewState, TreeViewItemMeta, TreeViewInstance, TreeViewItemPlugin, TreeViewUsedStore, TreeViewUsedInstance, TreeViewUsedParamsWithDefaults } from "./models/index.js";
 export type { TreeViewCorePluginParameters } from "./corePlugins/index.js";
 export { useTreeViewExpansion, expansionSelectors } from "./plugins/useTreeViewExpansion/index.js";
 export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters } from "./plugins/useTreeViewExpansion/index.js";
@@ -17,7 +17,7 @@ export { useTreeViewItems, buildSiblingIndexes, itemsSelectors, TREE_VIEW_ROOT_P
 export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsState } from "./plugins/useTreeViewItems/index.js";
 export { useTreeViewLabel, labelSelectors } from "./plugins/useTreeViewLabel/index.js";
 export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters } from "./plugins/useTreeViewLabel/index.js";
-export type { UseTreeViewLazyLoadingSignature, UseTreeViewLazyLoadingParameters, UseTreeViewLazyLoadingInstance } from "./plugins/useTreeViewLazyLoading/index.js";
+export type { UseTreeViewLazyLoadingSignature, UseTreeViewLazyLoadingParameters, UseTreeViewLazyLoadingInstance, DataSource } from "./plugins/useTreeViewLazyLoading/index.js";
 export { lazyLoadingSelectors } from "./plugins/useTreeViewLazyLoading/index.js";
 export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
 export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters } from "./plugins/useTreeViewJSXItems/index.js";

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
+import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { expansionSelectors } from "./useTreeViewExpansion.selectors.js";
 import { getExpansionTrigger } from "./useTreeViewExpansion.utils.js";
 import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
@@ -17,7 +17,7 @@ export const useTreeViewExpansion = ({
     controlled: params.expandedItems,
     defaultValue: params.defaultExpandedItems
   });
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     const newExpansionTrigger = getExpansionTrigger({
       isItemEditable: params.isItemEditable,
       expansionTrigger: params.expansionTrigger
@@ -107,7 +107,7 @@ export const useTreeViewExpansion = ({
   /**
    * Update the controlled model when the `expandedItems` prop changes.
    */
-  useEnhancedEffect(() => {
+  useIsoLayoutEffect(() => {
     const expandedItems = params.expandedItems;
     if (expandedItems !== undefined) {
       store.set('expansion', _extends({}, store.state.expansion, {

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import useEventCallback from '@mui/utils/useEventCallback';
+import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
 import { useStoreEffect } from '@mui/x-internals/store';
 import { focusSelectors } from "./useTreeViewFocus.selectors.js";
 import { expansionSelectors } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";