@mui/x-charts-pro 9.0.0-alpha.0 → 9.0.0-alpha.1

package/BarChartPro/BarChartPro.d.ts

@@ -29,5 +29,5 @@ export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots'
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-declare const BarChartPro: React.ForwardRefExoticComponent<BarChartProProps & React.RefAttributes<SVGSVGElement>>;
+declare const BarChartPro: React.ForwardRefExoticComponent<BarChartProProps & React.RefAttributes<HTMLDivElement>>;
 export { BarChartPro };

package/BarChartPro/BarChartPro.js

@@ -77,11 +77,12 @@ const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function
     onZoomChange,
     apiRef,
     plugins: _BarChartPro2.BAR_CHART_PRO_PLUGINS
-  }), ref);
+  }));
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      ref: ref,
       children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
@@ -192,8 +193,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -243,8 +244,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar'])
   })),
   /**
    * The list of zoom data related to each axis.
@@ -313,6 +314,14 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: _propTypes.default.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -362,6 +371,14 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
@@ -369,7 +386,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    type: _propTypes.default.oneOf(['bar'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/CHANGELOG.md

@@ -1,5 +1,123 @@
 # Changelog
 
+## 9.0.0-alpha.1
+
+_Feb 26, 2026_
+
+We'd like to extend a big thank you to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡️ Improved dynamic data support and cache invalidation in lazy loading for Data Grid Pro
+- ⌨️ Keyboard support for selecting day, month, and year in Date Pickers
+- 📊 Axis tooltip sorting and control improvements in Charts
+- 🐞 Bugfixes and internal improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@EllGree, @lion1963
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @brijeshb42, @cherniavskii, @dav-is, @flaviendelangle, @Janpot, @JCQuintas, @mapache-salvaje, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @sai6855, @siriwatknp, @ZeeshanTamboli
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.0.0-alpha.1`
+
+- [DataGrid] Forward rest props in `GridFilterInputMultipleValue` (#21407) @siriwatknp
+- [DataGrid] Preserve key input during row edit when using `rowModesModel` (#20759) @michelengelen
+- [DataGrid] Remove double rtl inversion logic for columns pinning (#21371) @siriwatknp
+
+#### `@mui/x-data-grid-pro@9.0.0-alpha.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@9.0.0-alpha.1`, plus:
+
+- [DataGridPro] Fix number input visibility in header filters (#21328) @michelengelen
+- [DataGridPro] Improve dynamic data support and cache invalidation in lazy loading (#21282) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@9.0.0-alpha.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@9.0.0-alpha.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.0.0-alpha.1`
+
+- [DatePicker] Add keyboard support for selecting day, month, and year (#20859) @michelengelen
+
+#### `@mui/x-date-pickers-pro@9.0.0-alpha.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-date-pickers@9.0.0-alpha.1`, plus:
+
+- [DateRangePicker] Fix timezone update issue leading to `invalidRange` error (#20863) @michelengelen
+
+### Charts
+
+#### `@mui/x-charts@9.0.0-alpha.1`
+
+- [charts] Add `sort` props to the axis tooltip (#21293) @alexfauquette
+- [charts] Controll axis tooltip (#21351) @alexfauquette
+- [charts] De duplicate keyboard focus handler function (#21267) @sai6855
+- [charts] Make `type` optional in identifiers (#21311) @alexfauquette
+- [charts] Move ref to the root component (#21396) @alexfauquette
+- [charts] Refactor loading and no data overlays to use a shared OverlayText component (#21414) @sai6855
+- [charts] Require series ids to be unique (#21330) @alexfauquette
+- [charts] Set `showMark` as `false` by default (#21373) @alexfauquette
+- [charts] Use `createGetNextIndexFocusedItem()` util in Funnel and RangeBar charts (#21390) @sai6855
+- [charts] Remove unnecessary string concatenation (#21418) @sai6855
+
+#### `@mui/x-charts-pro@9.0.0-alpha.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-charts@9.0.0-alpha.1`.
+
+#### `@mui/x-charts-premium@9.0.0-alpha.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-charts-pro@9.0.0-alpha.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@9.0.0-alpha.1`
+
+- [tree view] Focus item sibling on unmount instead of the 1st item (#21254) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@9.0.0-alpha.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-tree-view@9.0.0-alpha.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.0.0-alpha.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix external 301s (#21377) @Janpot
+- [docs] Show premium in the overview (#21343) @alexfauquette
+- [docs][charts] Revise the useLegend hook doc (#21352) @mapache-salvaje
+- [docs][charts] Revise the axis hooks doc (#21317) @mapache-salvaje
+- [docs][charts] Revise the scale hooks doc (#21316) @mapache-salvaje
+- [docs][charts] Revise the series hooks doc (#21353) @mapache-salvaje
+- [docs][charts] Revise the useDataset doc (#21336) @mapache-salvaje
+- [docs][charts] Revise the useDrawingArea doc (#21333) @mapache-salvaje
+
+### Core
+
+- [core] Update docs deploy script to the `docs-next` branch (#21341) @siriwatknp
+- [code-infra] Cleanup unused babel plugins (#21453) @brijeshb42
+- [code-infra] Do not append `x` to the last version for the compare API (#21408) @arminmeh
+- [code-infra] Upgrade react-docgen to v8 X (#21155) @JCQuintas
+- [code-infra] Modernize codemod (#21096) @JCQuintas
+- [docs-infra] Fix current version detection logic (#21417) @cherniavskii
+- [docs-infra] Reapply Cookie Banner (#21281) @dav-is
+- [internal] Headless filtering plugin (#21302) @arminmeh
+- [internal] Headless pagination plugin (#21183) @arminmeh
+- [internal] Headless virtualization followups (#21327) @cherniavskii
+- [internal] Keep cached data for disabled pipe processors (#21348) @arminmeh
+- [internal] Remove autoprefixer package (#21440) @ZeeshanTamboli
+
+### Miscellaneous
+
+- [l10n] Fix Czech (csCZ) locale: sort/filter labels are swapped (#21400) @EllGree
+- [l10n] Improve Ukrainian (uk-UA) locale (#21366) @lion1963
+
 ## 9.0.0-alpha.0
 
 _Feb 16, 2026_

package/ChartContainerPro/useChartContainerProProps.d.ts

@@ -1,4 +1,3 @@
-import type * as React from 'react';
 import { type ChartAnyPluginSignature, type ChartSeriesType } from '@mui/x-charts/internals';
 import { type UseChartsContainerProPropsReturnValue } from "../ChartsContainerPro/useChartsContainerProProps.js";
 import type { ChartContainerProProps } from "./ChartContainerPro.js";
@@ -10,4 +9,4 @@ export type UseChartContainerProPropsReturnValue<TSeries extends ChartSeriesType
 /**
  * @deprecated Use `useChartsContainerProProps` instead.
  */
-export declare const useChartContainerProProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProProps<TSeries, TSignatures>, ref: React.Ref<SVGSVGElement>) => UseChartContainerProPropsReturnValue<TSeries, TSignatures>;
+export declare const useChartContainerProProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProProps<TSeries, TSignatures>) => UseChartContainerProPropsReturnValue<TSeries, TSignatures>;

package/ChartContainerPro/useChartContainerProProps.js

@@ -13,7 +13,7 @@ var _useChartsContainerProProps = require("../ChartsContainerPro/useChartsContai
 /**
  * @deprecated Use `useChartsContainerProProps` instead.
  */
-const useChartContainerProProps = (props, ref) => {
-  return (0, _useChartsContainerProProps.useChartsContainerProProps)(props, ref);
+const useChartContainerProProps = props => {
+  return (0, _useChartsContainerProProps.useChartsContainerProProps)(props);
 };
 exports.useChartContainerProProps = useChartContainerProProps;

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -17,7 +17,7 @@ var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc3MTIwMDAwMDAwMA==";
+const releaseInfo = "MTc3MjA2NDAwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 const defaultSeriesConfigPro = exports.defaultSeriesConfigPro = _internals.defaultSeriesConfig;
 

package/ChartsContainerPro/ChartsContainerPro.js

@@ -43,9 +43,10 @@ const ChartsContainerPro = exports.ChartsContainerPro = /*#__PURE__*/React.forwa
     chartDataProviderProProps,
     children,
     chartsSurfaceProps
-  } = (0, _useChartsContainerProProps.useChartsContainerProProps)(props, ref);
+  } = (0, _useChartsContainerProProps.useChartsContainerProProps)(props);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      ref: ref,
       children: children
     }))
   }));

package/ChartsContainerPro/useChartsContainerProProps.d.ts

@@ -1,9 +1,8 @@
 import { type ChartAnyPluginSignature, type ChartSeriesType, type UseChartsContainerPropsReturnValue } from '@mui/x-charts/internals';
-import type * as React from 'react';
 import type { ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
 import type { ChartsContainerProProps } from "./ChartsContainerPro.js";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export type UseChartsContainerProPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = Pick<UseChartsContainerPropsReturnValue<TSeries, TSignatures>, 'chartsSurfaceProps' | 'children'> & {
   chartDataProviderProProps: ChartDataProviderProProps<TSeries, TSignatures>;
 };
-export declare const useChartsContainerProProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsContainerProProps<TSeries, TSignatures>, ref: React.Ref<SVGSVGElement>) => UseChartsContainerProPropsReturnValue<TSeries, TSignatures>;
+export declare const useChartsContainerProProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsContainerProProps<TSeries, TSignatures>) => UseChartsContainerProPropsReturnValue<TSeries, TSignatures>;

package/ChartsContainerPro/useChartsContainerProProps.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _internals = require("@mui/x-charts/internals");
 var _allPlugins = require("../internals/plugins/allPlugins");
 const _excluded = ["initialZoom", "zoomData", "onZoomChange", "zoomInteractionConfig", "plugins", "apiRef"];
-const useChartsContainerProProps = (props, ref) => {
+const useChartsContainerProProps = props => {
   const _ref = props,
     {
       initialZoom,
@@ -26,7 +26,7 @@ const useChartsContainerProProps = (props, ref) => {
     chartDataProviderProps,
     chartsSurfaceProps,
     children
-  } = (0, _internals.useChartsContainerProps)(baseProps, ref);
+  } = (0, _internals.useChartsContainerProps)(baseProps);
   const chartDataProviderProProps = (0, _extends2.default)({}, chartDataProviderProps, {
     initialZoom,
     zoomData,

package/FunnelChart/FunnelChart.d.ts

@@ -35,5 +35,5 @@ export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel',
    */
   axisHighlight?: ChartsAxisHighlightProps;
 }
-declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<SVGSVGElement>>;
+declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLDivElement>>;
 export { FunnelChart };

package/FunnelChart/FunnelChart.js

@@ -47,13 +47,14 @@ const FunnelChart = exports.FunnelChart = /*#__PURE__*/React.forwardRef(function
   const {
     chartDataProviderProProps,
     chartsSurfaceProps
-  } = (0, _useChartContainerProProps.useChartContainerProProps)(chartContainerProps, ref);
+  } = (0, _useChartContainerProProps.useChartContainerProProps)(chartContainerProps);
   const Tooltip = themedProps.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     gap: themedProps.gap,
     seriesConfig: seriesConfig,
     plugins: _FunnelChart2.FUNNEL_CHART_PLUGINS,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      ref: ref,
       children: [!themedProps.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FunnelPlot.FunnelPlot, (0, _extends2.default)({}, funnelPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedFunnelSection.FocusedFunnelSection, {}), children]
       })), !themedProps.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
@@ -215,8 +216,8 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
-    type: _propTypes.default.oneOf(['funnel']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['funnel'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -259,8 +260,8 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
-    type: _propTypes.default.oneOf(['funnel']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['funnel'])
   })),
   /**
    * If `true`, a loading overlay is displayed.
@@ -343,7 +344,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['funnel']).isRequired
+    type: _propTypes.default.oneOf(['funnel'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.types.d.ts

@@ -1,6 +1,6 @@
 import { type ChartPluginSignature, type UseChartCartesianAxisDefaultizedParameters, type UseChartCartesianAxisParameters, type UseChartCartesianAxisState, type UseChartInteractionSignature, type UseChartSeriesSignature, type ChartsAxisData } from '@mui/x-charts/internals';
 export type UseChartFunnelAxisSignature = ChartPluginSignature<{
-  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis' | 'axesGap'> & {
+  params: Omit<UseChartCartesianAxisParameters, 'onAxisClick' | 'onHighlightedAxisChange' | 'highlightedAxis' | 'onTooltipAxisChange' | 'tooltipAxis' | 'axesGap'> & {
     /**
      * The gap, in pixels, between funnel sections.
      * @default 0

package/FunnelChart/funnelSlots.types.d.ts

@@ -1,17 +1,11 @@
 import { type ChartsOverlaySlotProps, type ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
-import { type ChartsTooltipProps, type ChartsTooltipSlotProps, type ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
+import { type ChartsTooltipSlotProps, type ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
 import { type ChartsAxisSlotProps, type ChartsAxisSlots, type ChartsSlotProps, type ChartsSlots } from '@mui/x-charts/internals';
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
 import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
 import { type FunnelPlotSlotProps, type FunnelPlotSlots } from "./funnelPlotSlots.types.js";
-export interface FunnelChartSlots extends ChartsAxisSlots, FunnelPlotSlots, ChartsLegendSlots, ChartsTooltipSlots, ChartsOverlaySlots, ChartsAxisSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
-export interface FunnelChartSlotProps extends ChartsAxisSlotProps, FunnelPlotSlotProps, ChartsLegendSlotProps, Omit<ChartsTooltipSlotProps, 'tooltip'>, ChartsOverlaySlotProps, ChartsAxisSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {
-  /**
-   * Slot props for the tooltip component.
-   * @default {}
-   */
-  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
-}
+export interface FunnelChartSlots extends ChartsAxisSlots, FunnelPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsAxisSlots, ChartsToolbarSlots, ChartsTooltipSlots<'item' | 'none'>, Partial<ChartsSlots> {}
+export interface FunnelChartSlotProps extends ChartsAxisSlotProps, FunnelPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsAxisSlotProps, ChartsToolbarSlotProps, ChartsTooltipSlotProps<'item' | 'none'>, Partial<ChartsSlotProps> {}
 export interface FunnelChartSlotExtension {
   /**
    * Overridable component slots.

package/FunnelChart/index.d.ts

@@ -2,7 +2,7 @@ export { FunnelChart } from "./FunnelChart.js";
 /**
  * @deprecated funnel chart is now stable, import `FunnelChart` instead
  */
-export declare const Unstable_FunnelChart: import("react").ForwardRefExoticComponent<import("./FunnelChart.js").FunnelChartProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Unstable_FunnelChart: import("react").ForwardRefExoticComponent<import("./FunnelChart.js").FunnelChartProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { FunnelChartProps, FunnelSeries } from "./FunnelChart.js";
 export * from "./FunnelPlot.js";
 export * from "./funnelPlotSlots.types.js";

package/FunnelChart/seriesConfig/keyboardFocusHandler.js

@@ -6,18 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _internals = require("@mui/x-charts/internals");
 const outSeriesTypes = new Set(['funnel']);
-const keyboardFocusHandler = event => {
-  switch (event.key) {
-    case 'ArrowRight':
-      return (0, _internals.createGetNextIndexFocusedItem)(outSeriesTypes);
-    case 'ArrowLeft':
-      return (0, _internals.createGetPreviousIndexFocusedItem)(outSeriesTypes);
-    case 'ArrowDown':
-      return (0, _internals.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
-    case 'ArrowUp':
-      return (0, _internals.createGetNextSeriesFocusedItem)(outSeriesTypes);
-    default:
-      return null;
-  }
-};
+const keyboardFocusHandler = (0, _internals.createCommonKeyboardFocusHandler)(outSeriesTypes);
 var _default = exports.default = keyboardFocusHandler;

package/Heatmap/Heatmap.d.ts

@@ -84,5 +84,5 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
    */
   slotProps?: HeatmapSlotProps;
 }
-declare const Heatmap: React.ForwardRefExoticComponent<HeatmapProps & React.RefAttributes<SVGSVGElement>>;
+declare const Heatmap: React.ForwardRefExoticComponent<HeatmapProps & React.RefAttributes<HTMLDivElement>>;
 export { Heatmap };

package/Heatmap/Heatmap.js

@@ -53,8 +53,8 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
   const Toolbar = slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      ref: ref,
       children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, {
-        ref: ref,
         sx: sx,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeatmapPlot.HeatmapPlot, (0, _extends2.default)({}, heatmapPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedHeatmapCell.FocusedHeatmapCell, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps))]
@@ -177,9 +177,17 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * The callback fired when an item is clicked.
    *
    * @param {React.MouseEvent<SVGSVGElement, MouseEvent>} event The click event.
-   * @param {SeriesItemIdentifier<SeriesType>} item The clicked item.
+   * @param {SeriesItemIdentifierWithType<SeriesType>} item The clicked item.
    */
   onItemClick: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: _propTypes.default.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -220,6 +228,14 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
    */
   tooltip: _propTypes.default.object,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
@@ -227,7 +243,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['heatmap']).isRequired,
+    type: _propTypes.default.oneOf(['heatmap']),
     xIndex: _propTypes.default.number.isRequired,
     yIndex: _propTypes.default.number.isRequired
   }),

package/Heatmap/HeatmapTooltip/HeatmapTooltip.types.d.ts

@@ -1,9 +1,21 @@
-import { type ChartsTooltipContainerProps, type ChartsTooltipClasses, type ChartsTooltipSlots, type ChartsTooltipSlotProps } from '@mui/x-charts/ChartsTooltip';
-export interface HeatmapTooltipSlots extends ChartsTooltipSlots {}
-export interface HeatmapTooltipSlotProps extends ChartsTooltipSlotProps {}
+import { type ChartsTooltipContainerProps, type ChartsTooltipClasses } from '@mui/x-charts/ChartsTooltip';
+export interface HeatmapTooltipSlots {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<HeatmapTooltipProps>;
+}
+export interface HeatmapTooltipSlotProps {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<HeatmapTooltipProps>;
+}
 export interface HeatmapTooltipClasses extends ChartsTooltipClasses {}
 export interface HeatmapTooltipContentClasses extends ChartsTooltipClasses {}
-export interface HeatmapTooltipProps extends Omit<ChartsTooltipContainerProps, 'trigger' | 'children'> {
+export interface HeatmapTooltipProps extends Omit<ChartsTooltipContainerProps<'item' | 'none'>, 'trigger' | 'children'> {
   /**
    * Select the kind of tooltip to display
    * - 'item': Shows data about the item below the mouse.

package/Heatmap/seriesConfig/getItemAtPosition.d.ts

@@ -1,6 +1,6 @@
 import type { ChartState, UseChartCartesianAxisSignature } from '@mui/x-charts/internals';
-import type { SeriesItemIdentifier } from '@mui/x-charts/models';
+import type { SeriesItemIdentifierWithType } from '@mui/x-charts/models';
 export default function getItemAtPosition(state: ChartState<[UseChartCartesianAxisSignature]>, point: {
   x: number;
   y: number;
-}): SeriesItemIdentifier<'heatmap'> | undefined;
+}): SeriesItemIdentifierWithType<'heatmap'> | undefined;

package/LineChartPro/LineChartPro.d.ts

@@ -28,5 +28,5 @@ export interface LineChartProProps extends Omit<LineChartProps, 'apiRef' | 'slot
  *
  * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
  */
-declare const LineChartPro: React.ForwardRefExoticComponent<LineChartProProps & React.RefAttributes<SVGSVGElement>>;
+declare const LineChartPro: React.ForwardRefExoticComponent<LineChartProProps & React.RefAttributes<HTMLDivElement>>;
 export { LineChartPro };

package/LineChartPro/LineChartPro.js

@@ -79,11 +79,12 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
     onZoomChange,
     apiRef,
     plugins: _LineChartPro2.LINE_CHART_PRO_PLUGINS
-  }), ref);
+  }));
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      ref: ref,
       children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
@@ -193,8 +194,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
-    type: _propTypes.default.oneOf(['line']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -244,8 +245,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
-    type: _propTypes.default.oneOf(['line']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line'])
   })),
   /**
    * The list of zoom data related to each axis.
@@ -315,6 +316,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * Callback fired when a mark element is clicked.
    */
   onMarkClick: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: _propTypes.default.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -355,6 +364,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
@@ -362,7 +379,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['line']).isRequired
+    type: _propTypes.default.oneOf(['line'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/PieChartPro/PieChartPro.d.ts

@@ -18,5 +18,5 @@ export interface PieChartProProps extends Omit<PieChartProps, 'apiRef' | 'slots'
    */
   slotProps?: PieChartProSlotProps;
 }
-declare const PieChartPro: React.ForwardRefExoticComponent<PieChartProProps & React.RefAttributes<SVGSVGElement>>;
+declare const PieChartPro: React.ForwardRefExoticComponent<PieChartProProps & React.RefAttributes<HTMLDivElement>>;
 export { PieChartPro };