@mui/x-charts 9.0.0-alpha.4 → 9.0.0-beta.0

package/BarChart/BarPlot.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "skipAnimation", "onItemClick", "borderRadius", "barLabel", "renderer"];
+const _excluded = ["className", "skipAnimation", "onItemClick", "borderRadius", "renderer"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -45,7 +45,6 @@ function BarPlot(props) {
       skipAnimation: inSkipAnimation,
       onItemClick,
       borderRadius,
-      barLabel,
       renderer
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -72,16 +71,12 @@ function BarPlot(props) {
       /* The batch renderer doesn't animate bars after the initial mount. Providing skipAnimation was causing an issue
        * where bars would animate again after a zoom interaction because skipAnimation would change from true to false. */,
       skipAnimation: renderer === 'svg-batch' ? batchSkipAnimation : skipAnimation,
-      onItemClick:
-      /* `onItemClick` accepts a `MouseEvent` when the renderer is "svg-batch" and a `React.MouseEvent` otherwise,
-       * so we need this cast to prevent TypeScript from complaining. */
-      onItemClick,
+      onItemClick: onItemClick,
       borderRadius: borderRadius
     }, other)), completedData.map(processedSeries => /*#__PURE__*/_jsx(BarLabelPlot, _extends({
       className: classes.seriesLabels,
       processedSeries: processedSeries,
-      skipAnimation: skipAnimation,
-      barLabel: barLabel
+      skipAnimation: skipAnimation
     }, other), processedSeries.seriesId))]
   });
 }
@@ -90,15 +85,6 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * @deprecated Use `barLabel` in the chart series instead.
-   * If provided, the function will be used to format the label of the bar.
-   * It can be set to 'value' to display the current value.
-   * @param {BarItem} item The item to format.
-   * @param {BarLabelContext} context data about the bar.
-   * @returns {string} The formatted label.
-   */
-  barLabel: PropTypes.oneOfType([PropTypes.oneOf(['value']), PropTypes.func]),
   /**
    * Defines the border radius of the bar element.
    */
@@ -109,7 +95,7 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   className: PropTypes.string,
   /**
    * Callback fired when a bar item is clicked.
-   * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
+   * @param {MouseEvent} event The event source of the callback.
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,

package/BarChart/BatchBarPlot/BatchBarPlot.js

@@ -7,15 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BatchBarPlot = BatchBarPlot;
 var React = _interopRequireWildcard(require("react"));
-var _hooks = require("../../hooks");
 var _barClasses = require("../barClasses");
 var _useChartsContext = require("../../context/ChartsProvider/useChartsContext");
 var _useChartHighlight = require("../../internals/plugins/featurePlugins/useChartHighlight");
 var _useRegisterItemClickHandlers = require("../useRegisterItemClickHandlers");
 var _useCreateBarPaths = require("./useCreateBarPaths");
 var _BarGroup = require("./BarGroup");
-var _useRegisterPointerInteractions = require("../../internals/plugins/featurePlugins/shared/useRegisterPointerInteractions");
-var _useChartCartesianAxisPosition = require("../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 function BatchBarPlot({
   completedData,
@@ -23,30 +20,6 @@ function BatchBarPlot({
   onItemClick,
   skipAnimation = false
 }) {
-  const prevCursorRef = React.useRef(null);
-  const chartsLayerContainerRef = (0, _hooks.useChartsLayerContainerRef)();
-  const onItemEnter = onItemClick ? () => {
-    const svg = chartsLayerContainerRef.current;
-    if (!svg) {
-      return;
-    }
-    if (prevCursorRef.current == null) {
-      prevCursorRef.current = svg.style.cursor;
-      // eslint-disable-next-line react-compiler/react-compiler
-      svg.style.cursor = 'pointer';
-    }
-  } : undefined;
-  const onItemLeave = onItemClick ? () => {
-    const svg = chartsLayerContainerRef.current;
-    if (!svg) {
-      return;
-    }
-    if (prevCursorRef.current != null) {
-      svg.style.cursor = prevCursorRef.current;
-      prevCursorRef.current = null;
-    }
-  } : undefined;
-  (0, _useRegisterPointerInteractions.useRegisterPointerInteractions)(_useChartCartesianAxisPosition.selectorBarItemAtPosition, onItemEnter, onItemLeave);
   (0, _useRegisterItemClickHandlers.useRegisterItemClickHandlers)(onItemClick);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: completedData.map(series => /*#__PURE__*/(0, _jsxRuntime.jsx)(SeriesBatchPlot, {

package/BarChart/BatchBarPlot/BatchBarPlot.mjs

@@ -1,15 +1,12 @@
 'use client';
 
 import * as React from 'react';
-import { useChartsLayerContainerRef } from "../../hooks/index.mjs";
 import { useUtilityClasses } from "../barClasses.mjs";
 import { useChartsContext } from "../../context/ChartsProvider/useChartsContext.mjs";
 import { selectorChartIsSeriesFaded, selectorChartIsSeriesHighlighted, selectorChartSeriesHighlightedItem, selectorChartSeriesUnfadedItem } from "../../internals/plugins/featurePlugins/useChartHighlight/index.mjs";
 import { useRegisterItemClickHandlers } from "../useRegisterItemClickHandlers.mjs";
 import { createPath, useCreateBarPaths } from "./useCreateBarPaths.mjs";
 import { BarGroup } from "./BarGroup.mjs";
-import { useRegisterPointerInteractions } from "../../internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.mjs";
-import { selectorBarItemAtPosition } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function BatchBarPlot({
   completedData,
@@ -17,30 +14,6 @@ export function BatchBarPlot({
   onItemClick,
   skipAnimation = false
 }) {
-  const prevCursorRef = React.useRef(null);
-  const chartsLayerContainerRef = useChartsLayerContainerRef();
-  const onItemEnter = onItemClick ? () => {
-    const svg = chartsLayerContainerRef.current;
-    if (!svg) {
-      return;
-    }
-    if (prevCursorRef.current == null) {
-      prevCursorRef.current = svg.style.cursor;
-      // eslint-disable-next-line react-compiler/react-compiler
-      svg.style.cursor = 'pointer';
-    }
-  } : undefined;
-  const onItemLeave = onItemClick ? () => {
-    const svg = chartsLayerContainerRef.current;
-    if (!svg) {
-      return;
-    }
-    if (prevCursorRef.current != null) {
-      svg.style.cursor = prevCursorRef.current;
-      prevCursorRef.current = null;
-    }
-  } : undefined;
-  useRegisterPointerInteractions(selectorBarItemAtPosition, onItemEnter, onItemLeave);
   useRegisterItemClickHandlers(onItemClick);
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: completedData.map(series => /*#__PURE__*/_jsx(SeriesBatchPlot, {

package/BarChart/IndividualBarPlot.d.mts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { type BarPlotSlotProps, type BarPlotSlots } from "./BarPlot.mjs";
 import { type BarItemIdentifier } from "../models/index.mjs";
 import { type MaskData, type ProcessedBarSeriesData } from "./types.mjs";
@@ -7,7 +6,7 @@ export interface IndividualBarPlotProps {
   masksData: MaskData[];
   borderRadius?: number;
   skipAnimation?: boolean;
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void;
+  onItemClick?: (event: MouseEvent, barItemIdentifier: BarItemIdentifier) => void;
   slotProps?: BarPlotSlotProps;
   slots?: BarPlotSlots;
 }

package/BarChart/IndividualBarPlot.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { type BarPlotSlotProps, type BarPlotSlots } from "./BarPlot.js";
 import { type BarItemIdentifier } from "../models/index.js";
 import { type MaskData, type ProcessedBarSeriesData } from "./types.js";
@@ -7,7 +6,7 @@ export interface IndividualBarPlotProps {
   masksData: MaskData[];
   borderRadius?: number;
   skipAnimation?: boolean;
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void;
+  onItemClick?: (event: MouseEvent, barItemIdentifier: BarItemIdentifier) => void;
   slotProps?: BarPlotSlotProps;
   slots?: BarPlotSlots;
 }

package/BarChart/IndividualBarPlot.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _BarElement = require("./BarElement");
 var _barClasses = require("./barClasses");
 var _BarClipPath = require("./BarClipPath");
+var _useRegisterItemClickHandlers = require("./useRegisterItemClickHandlers");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["completedData", "masksData", "borderRadius", "onItemClick", "skipAnimation"];
 function IndividualBarPlot(_ref) {
@@ -23,6 +24,7 @@ function IndividualBarPlot(_ref) {
       skipAnimation
     } = _ref,
     other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  (0, _useRegisterItemClickHandlers.useRegisterItemClickHandlers)(onItemClick);
   const classes = (0, _barClasses.useUtilityClasses)();
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
@@ -82,16 +84,9 @@ function IndividualBarPlot(_ref) {
             y: y,
             yOrigin: yOrigin,
             width: width,
-            height: height
-          }, other, {
-            onClick: onItemClick && (event => {
-              onItemClick(event, {
-                type: 'bar',
-                seriesId,
-                dataIndex
-              });
-            })
-          }), dataIndex);
+            height: height,
+            cursor: onItemClick ? 'pointer' : undefined
+          }, other), dataIndex);
           if (withoutBorderRadius) {
             return barElement;
           }

package/BarChart/IndividualBarPlot.mjs

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { BarElement } from "./BarElement.mjs";
 import { useUtilityClasses } from "./barClasses.mjs";
 import { BarClipPath } from "./BarClipPath.mjs";
+import { useRegisterItemClickHandlers } from "./useRegisterItemClickHandlers.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function IndividualBarPlot(_ref) {
   let {
@@ -15,6 +16,7 @@ export function IndividualBarPlot(_ref) {
       skipAnimation
     } = _ref,
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  useRegisterItemClickHandlers(onItemClick);
   const classes = useUtilityClasses();
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
   return /*#__PURE__*/_jsxs(React.Fragment, {
@@ -74,16 +76,9 @@ export function IndividualBarPlot(_ref) {
             y: y,
             yOrigin: yOrigin,
             width: width,
-            height: height
-          }, other, {
-            onClick: onItemClick && (event => {
-              onItemClick(event, {
-                type: 'bar',
-                seriesId,
-                dataIndex
-              });
-            })
-          }), dataIndex);
+            height: height,
+            cursor: onItemClick ? 'pointer' : undefined
+          }, other), dataIndex);
           if (withoutBorderRadius) {
             return barElement;
           }

package/BarChart/seriesConfig/bar/descriptionGetter.d.mts

@@ -0,0 +1,3 @@
+import type { DescriptionGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+declare const descriptionGetter: DescriptionGetter<'bar'>;
+export default descriptionGetter;

package/BarChart/seriesConfig/bar/descriptionGetter.d.ts

@@ -0,0 +1,3 @@
+import type { DescriptionGetter } from "../../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
+declare const descriptionGetter: DescriptionGetter<'bar'>;
+export default descriptionGetter;

package/BarChart/seriesConfig/bar/descriptionGetter.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _getLabel = require("../../../internals/getLabel");
+const descriptionGetter = params => {
+  const {
+    identifier,
+    series,
+    xAxis,
+    yAxis,
+    localeText
+  } = params;
+  const label = (0, _getLabel.getLabel)(series.label, 'tooltip');
+  const value = series.data[identifier.dataIndex] ?? null;
+  const isHorizontal = series.layout === 'horizontal';
+  const categoryAxis = isHorizontal ? yAxis : xAxis;
+  const categoryValue = categoryAxis.data?.[identifier.dataIndex] ?? null;
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex: identifier.dataIndex
+  });
+  const formattedCategory = categoryAxis.valueFormatter?.(categoryValue, {
+    location: 'tooltip',
+    scale: categoryAxis.scale
+  });
+  return localeText.barDescription({
+    value,
+    formattedValue: formattedValue ?? '',
+    categoryValue,
+    formattedCategoryValue: formattedCategory ?? '',
+    seriesLabel: label
+  });
+};
+var _default = exports.default = descriptionGetter;

package/BarChart/seriesConfig/bar/descriptionGetter.mjs

@@ -0,0 +1,30 @@
+import { getLabel } from "../../../internals/getLabel.mjs";
+const descriptionGetter = params => {
+  const {
+    identifier,
+    series,
+    xAxis,
+    yAxis,
+    localeText
+  } = params;
+  const label = getLabel(series.label, 'tooltip');
+  const value = series.data[identifier.dataIndex] ?? null;
+  const isHorizontal = series.layout === 'horizontal';
+  const categoryAxis = isHorizontal ? yAxis : xAxis;
+  const categoryValue = categoryAxis.data?.[identifier.dataIndex] ?? null;
+  const formattedValue = series.valueFormatter(value, {
+    dataIndex: identifier.dataIndex
+  });
+  const formattedCategory = categoryAxis.valueFormatter?.(categoryValue, {
+    location: 'tooltip',
+    scale: categoryAxis.scale
+  });
+  return localeText.barDescription({
+    value,
+    formattedValue: formattedValue ?? '',
+    categoryValue,
+    formattedCategoryValue: formattedCategory ?? '',
+    seriesLabel: label
+  });
+};
+export default descriptionGetter;

package/BarChart/seriesConfig/index.js

@@ -14,8 +14,10 @@ var _keyboardFocusHandler = _interopRequireDefault(require("./bar/keyboardFocusH
 var _tooltip = _interopRequireWildcard(require("./bar/tooltip"));
 var _tooltipPosition = _interopRequireDefault(require("./bar/tooltipPosition"));
 var _getSeriesWithDefaultValues = require("./bar/getSeriesWithDefaultValues");
+var _useChartCartesianAxisPosition = require("../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors");
 var _identifierSerializer = require("../../internals/identifierSerializer");
 var _identifierCleaner = require("../../internals/identifierCleaner");
+var _descriptionGetter = _interopRequireDefault(require("./bar/descriptionGetter"));
 var _useChartHighlight = require("../../internals/plugins/featurePlugins/useChartHighlight");
 const barSeriesConfig = exports.barSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
@@ -27,9 +29,11 @@ const barSeriesConfig = exports.barSeriesConfig = {
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.getSeriesWithDefaultValues,
-  keyboardFocusHandler: _keyboardFocusHandler.default,
+  getItemAtPosition: _useChartCartesianAxisPosition.selectorBarItemAtPosition,
   identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex,
   identifierCleaner: _identifierCleaner.identifierCleanerSeriesIdDataIndex,
+  descriptionGetter: _descriptionGetter.default,
+  keyboardFocusHandler: _keyboardFocusHandler.default,
   isHighlightedCreator: _useChartHighlight.createIsHighlighted,
   isFadedCreator: _useChartHighlight.createIsFaded
 };

package/BarChart/seriesConfig/index.mjs

@@ -6,8 +6,10 @@ import keyboardFocusHandler from "./bar/keyboardFocusHandler.mjs";
 import tooltipGetter, { axisTooltipGetter } from "./bar/tooltip.mjs";
 import tooltipItemPositionGetter from "./bar/tooltipPosition.mjs";
 import { getSeriesWithDefaultValues } from "./bar/getSeriesWithDefaultValues.mjs";
+import { selectorBarItemAtPosition } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.mjs";
 import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.mjs";
 import { identifierCleanerSeriesIdDataIndex } from "../../internals/identifierCleaner.mjs";
+import descriptionGetter from "./bar/descriptionGetter.mjs";
 import { createIsHighlighted, createIsFaded } from "../../internals/plugins/featurePlugins/useChartHighlight/index.mjs";
 export const barSeriesConfig = {
   seriesProcessor,
@@ -19,9 +21,11 @@ export const barSeriesConfig = {
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues,
-  keyboardFocusHandler,
+  getItemAtPosition: selectorBarItemAtPosition,
   identifierSerializer: identifierSerializerSeriesIdDataIndex,
   identifierCleaner: identifierCleanerSeriesIdDataIndex,
+  descriptionGetter,
+  keyboardFocusHandler,
   isHighlightedCreator: createIsHighlighted,
   isFadedCreator: createIsFaded
 };

package/BarChart/useBarChartProps.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
 var _BarChart = require("./BarChart.plugins");
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar", "brushConfig", "renderer"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "className", "hideLegend", "showToolbar", "brushConfig", "renderer"];
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -44,7 +44,6 @@ const useBarChartProps = props => {
       highlightedItem,
       onHighlightChange,
       borderRadius,
-      barLabel,
       className,
       brushConfig,
       renderer
@@ -111,8 +110,7 @@ const useBarChartProps = props => {
     slots,
     slotProps,
     borderRadius,
-    renderer,
-    barLabel
+    renderer
   };
   const gridProps = {
     vertical: grid?.vertical,

package/BarChart/useBarChartProps.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar", "brushConfig", "renderer"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "className", "hideLegend", "showToolbar", "brushConfig", "renderer"];
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.mjs";
@@ -37,7 +37,6 @@ export const useBarChartProps = props => {
       highlightedItem,
       onHighlightChange,
       borderRadius,
-      barLabel,
       className,
       brushConfig,
       renderer
@@ -104,8 +103,7 @@ export const useBarChartProps = props => {
     slots,
     slotProps,
     borderRadius,
-    renderer,
-    barLabel
+    renderer
   };
   const gridProps = {
     vertical: grid?.vertical,

package/CHANGELOG.md

@@ -1,5 +1,111 @@
 # Changelog
 
+## 9.0.0-beta.0
+
+<!-- generated comparing v9.0.0-alpha.4..master -->
+
+_Mar 27, 2026_
+
+We'd like to extend a big thank you to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔊 New Charts voiceover component for improved screen reader support
+- ⌨️ Charts keyboard navigation improvements: axis tooltip now shows when navigating with the keyboard
+- 📊 Charts axes now can be set to automatically resize to fit their content
+- 📝 New `rowCheckbox` slot in Data Grid for easier checkbox column customization
+- ⚡️ `fetchRows()` API in Data Grid Pro now defaults `start` and `end` based on scroll position with lazy loading
+- 🐞 Bugfixes and internal improvements
+
+The following team members contributed to this release:
+@aemartos, @alexfauquette, @arminmeh, @cherniavskii, @Janpot, @JCQuintas, @mapache-salvaje, @michelengelen, @noraleonte, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.0.0-beta.0`
+
+- [DataGrid] Add `rowCheckbox` slot for easier customization (#21797) @michelengelen
+- [DataGrid] Prevent repeated `hasScrollbar` state updates (#21820) @arminmeh
+
+#### `@mui/x-data-grid-pro@9.0.0-beta.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@9.0.0-beta.0`, plus:
+
+- [DataGridPro] `fetchRows()` API's default `start` and `end` params based on scroll position with lazy loading (#21742) @arminmeh
+
+#### `@mui/x-data-grid-premium@9.0.0-beta.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@9.0.0-beta.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.0.0-beta.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@9.0.0-beta.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@9.0.0-beta.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.0.0-beta.0`
+
+- [charts] Add `className` prop to Pro chart plot components (#21793) @JCQuintas
+- [charts] Add experimental position-based pointer interaction for line series (#21809) @JCQuintas
+- [charts] Add l10n to the bar accessibility (#21815) @alexfauquette
+- [charts] Add localization for the basic charts (#21822) @alexfauquette
+- [charts] Add voiceover component (#21344) @alexfauquette
+- [charts] Allow axes to automatically resize to content (#21087) @JCQuintas
+- [charts] Document multiple use-cases for references (#21768) @alexfauquette
+- [charts] Remove compatibility layer for React vs native events (#21780) @JCQuintas
+- [charts] Remove deprecated `barLabel` props (#21783) @alexfauquette
+- [charts] Show axis tooltip when navigating with keyboard (#21689) @Copilot
+
+#### `@mui/x-charts-pro@9.0.0-beta.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@9.0.0-beta.0`.
+
+#### `@mui/x-charts-premium@9.0.0-beta.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@9.0.0-beta.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@9.0.0-alpha.4`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.0.0-alpha.4` [![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@9.0.0-alpha.4`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.0.0-alpha.4`
+
+Internal changes.
+
+### Docs
+
+- [docs] Document how to customize voiceover announcement (#21833) @alexfauquette
+- [docs] Remove Discord mention from docs (#21855) @mapache-salvaje
+- [docs] Remove stabilized experimental feature from demo (#21869) @JCQuintas
+- [docs] Update telemetry guide to reflect pseudonymous data collection and license compliance (#21812) @aemartos
+- [docs] Revise the Sparkline doc (#21614) @mapache-salvaje
+- [docs] Revise the Gauge doc (#21673) @mapache-salvaje
+- [docs] Revise the Heatmap doc (#21676) @mapache-salvaje
+
+### Core
+
+- [code-infra] Remove unused deps and unify es-toolkit via catalog (#21840) @Janpot
+- [code-infra] Update @mui/internal-bundle-size-checker to canary.68 (#21836) @Janpot
+- [code-infra] Update next (#21837) @Janpot
+- [internal] Remove headless data grid packages (#21843) @cherniavskii
+
+### Miscellaneous
+
+- Add @romgrk to CODEOWNERS for `x-virtualizer` and `x-internals` (#21819) @Copilot
+- [x-license] add 2022 plan version (#21814) @aemartos
+
 ## 9.0.0-alpha.4
 
 _Mar 19, 2026_
@@ -59,7 +165,7 @@ Same changes as in `@mui/x-date-pickers@9.0.0-alpha.4`.
 - [charts] Remove deprecated `useMouseTracker()` (#21787) @alexfauquette
 - [charts] Remove deprecated classes (#21775) @alexfauquette
 - [charts] Remove deprecated props from PieArcLabel animation (#21789) @alexfauquette
-- [charts] Remove get*UtilityClass from public exports (#21769) @JCQuintas
+- [charts] Remove get\*UtilityClass from public exports (#21769) @JCQuintas
 - [charts] Remove the deprecated `disableHover` property (#21785) @alexfauquette
 - [charts] Remove the deprecated `message` prop (#21784) @alexfauquette
 - [charts] Remove deprecated props about voronoi (#21796) @alexfauquette