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

package/BarChart/BarChart.d.ts

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

package/BarChart/BarChart.js

@@ -58,11 +58,12 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
   const {
     chartDataProviderProps,
     chartsSurfaceProps
-  } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps, ref);
+  } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      ref: ref,
       children: [props.showToolbar && Toolbar ? /*#__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)(_BarPlot.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)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedBar.FocusedBar, {})]
@@ -168,8 +169,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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.
@@ -219,8 +220,8 @@ process.env.NODE_ENV !== "production" ? BarChart.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 direction of the bar elements.
@@ -280,6 +281,14 @@ process.env.NODE_ENV !== "production" ? BarChart.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.
    *
@@ -323,6 +332,14 @@ process.env.NODE_ENV !== "production" ? BarChart.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.
@@ -330,7 +347,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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/BarChart/seriesConfig/bar/keyboardFocusHandler.d.ts

@@ -1,4 +1,4 @@
-import { type ComposableCartesianChartSeriesType } from "../../../internals/commonNextFocusItem.js";
 import type { KeyboardFocusHandler } from "../../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
+import { type ComposableCartesianChartSeriesType } from "../../../internals/commonNextFocusItem.js";
 declare const keyboardFocusHandler: KeyboardFocusHandler<'bar', ComposableCartesianChartSeriesType>;
 export default keyboardFocusHandler;

package/BarChart/seriesConfig/bar/keyboardFocusHandler.js

@@ -4,19 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _createCommonKeyboardFocusHandler = require("../../../internals/createCommonKeyboardFocusHandler");
 var _commonNextFocusItem = require("../../../internals/commonNextFocusItem");
-const keyboardFocusHandler = event => {
-  switch (event.key) {
-    case 'ArrowRight':
-      return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(_commonNextFocusItem.composableCartesianSeriesTypes);
-    case 'ArrowLeft':
-      return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(_commonNextFocusItem.composableCartesianSeriesTypes);
-    case 'ArrowDown':
-      return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(_commonNextFocusItem.composableCartesianSeriesTypes);
-    case 'ArrowUp':
-      return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(_commonNextFocusItem.composableCartesianSeriesTypes);
-    default:
-      return null;
-  }
-};
+const keyboardFocusHandler = (0, _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler)(_commonNextFocusItem.composableCartesianSeriesTypes);
 var _default = exports.default = keyboardFocusHandler;

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/ChartContainer/useChartContainerProps.d.ts

@@ -1,4 +1,3 @@
-import type * as React from 'react';
 import { type ChartSeriesType } from "../models/seriesType/config.js";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { type ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
@@ -11,4 +10,4 @@ export type UseChartContainerPropsReturnValue<TSeries extends ChartSeriesType, T
 /**
  * @deprecated Use `useChartsContainerProps` instead.
  */
-export declare const useChartContainerProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProps<TSeries, TSignatures>, ref: React.Ref<SVGSVGElement>) => UseChartContainerPropsReturnValue<TSeries, TSignatures>;
+export declare const useChartContainerProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProps<TSeries, TSignatures>) => UseChartContainerPropsReturnValue<TSeries, TSignatures>;

package/ChartContainer/useChartContainerProps.js

@@ -13,7 +13,7 @@ var _useChartsContainerProps = require("../ChartsContainer/useChartsContainerPro
 /**
  * @deprecated Use `useChartsContainerProps` instead.
  */
-const useChartContainerProps = (props, ref) => {
-  return (0, _useChartsContainerProps.useChartsContainerProps)(props, ref);
+const useChartContainerProps = props => {
+  return (0, _useChartsContainerProps.useChartsContainerProps)(props);
 };
 exports.useChartContainerProps = useChartContainerProps;

package/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ChartsXHighlight;
 var React = _interopRequireWildcard(require("react"));
-var _useScale = require("../hooks/useScale");
+var _getValueToPositionMapper = require("../hooks/getValueToPositionMapper");
 var _scaleGuards = require("../internals/scaleGuards");
 var _useStore = require("../internals/store/useStore");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
@@ -38,7 +38,7 @@ function ChartsXHighlight(props) {
   }) => {
     const xAxis = xAxes.axis[axisId];
     const xScale = xAxis.scale;
-    const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
+    const getXPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(xScale);
     const isXScaleOrdinal = type === 'band' && value !== null && (0, _scaleGuards.isOrdinalScale)(xScale);
     if (process.env.NODE_ENV !== 'production') {
       const isError = isXScaleOrdinal && xScale(value) === undefined;

package/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ChartsYHighlight;
 var React = _interopRequireWildcard(require("react"));
-var _useScale = require("../hooks/useScale");
+var _getValueToPositionMapper = require("../hooks/getValueToPositionMapper");
 var _scaleGuards = require("../internals/scaleGuards");
 var _useStore = require("../internals/store/useStore");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
@@ -38,7 +38,7 @@ function ChartsYHighlight(props) {
   }) => {
     const yAxis = yAxes.axis[axisId];
     const yScale = yAxis.scale;
-    const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+    const getYPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(yScale);
     const isYScaleOrdinal = type === 'band' && value !== null && (0, _scaleGuards.isOrdinalScale)(yScale);
     if (process.env.NODE_ENV !== 'production') {
       const isError = isYScaleOrdinal && yScale(value) === undefined;

package/ChartsContainer/ChartsContainer.js

@@ -43,9 +43,10 @@ const ChartsContainer = exports.ChartsContainer = /*#__PURE__*/React.forwardRef(
     chartDataProviderProps,
     children,
     chartsSurfaceProps
-  } = (0, _useChartsContainerProps.useChartsContainerProps)(props, ref);
+  } = (0, _useChartsContainerProps.useChartsContainerProps)(props);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      ref: ref,
       children: children
     }))
   }));
@@ -128,9 +129,9 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
    * ```
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
-    dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
-    type: _propTypes.default.object.isRequired
+    dataIndex: _propTypes.default.any,
+    seriesId: _propTypes.default.object.isRequired,
+    type: _propTypes.default.object
   })),
   /**
    * The controlled axis highlight.
@@ -175,9 +176,9 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
    * ```
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
-    dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string,
-    type: _propTypes.default.object.isRequired
+    dataIndex: _propTypes.default.any,
+    seriesId: _propTypes.default.object.isRequired,
+    type: _propTypes.default.object
   })),
   /**
    * Localized text for chart components.
@@ -228,6 +229,14 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier Identify which item got clicked
    */
   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.
    *
@@ -764,6 +773,14 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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.
@@ -771,7 +788,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar', 'line', 'pie', 'radar', 'scatter']).isRequired
+    type: _propTypes.default.oneOf(['bar', 'line', 'pie', 'radar', 'scatter'])
   }),
   /**
    * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.

package/ChartsContainer/useChartsContainerProps.d.ts

@@ -1,4 +1,3 @@
-import type * as React from 'react';
 import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { type ChartDataProviderProps } from "../ChartDataProvider/index.js";
 import type { ChartsContainerProps } from "./ChartsContainer.js";
@@ -7,9 +6,7 @@ import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { type ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
 export type UseChartsContainerPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = {
   chartDataProviderProps: ChartDataProviderProps<TSeries, TSignatures>;
-  chartsSurfaceProps: ChartsSurfaceProps & {
-    ref: React.Ref<SVGSVGElement>;
-  };
+  chartsSurfaceProps: ChartsSurfaceProps;
   children: React.ReactNode;
 };
-export declare const useChartsContainerProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsContainerProps<TSeries, TSignatures>, ref: React.Ref<SVGSVGElement>) => UseChartsContainerPropsReturnValue<TSeries, TSignatures>;
+export declare const useChartsContainerProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsContainerProps<TSeries, TSignatures>) => UseChartsContainerPropsReturnValue<TSeries, TSignatures>;

package/ChartsContainer/useChartsContainerProps.js

@@ -9,8 +9,8 @@ exports.useChartsContainerProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _allPlugins = require("../internals/plugins/allPlugins");
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipItem", "onTooltipItemChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
-const useChartsContainerProps = (props, ref) => {
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
+const useChartsContainerProps = props => {
   const _ref = props,
     {
       width,
@@ -24,6 +24,8 @@ const useChartsContainerProps = (props, ref) => {
       onAxisClick,
       highlightedAxis,
       onHighlightedAxisChange,
+      tooltipAxis,
+      onTooltipAxisChange,
       tooltipItem,
       onTooltipItemChange,
       disableVoronoi,
@@ -57,8 +59,7 @@ const useChartsContainerProps = (props, ref) => {
   const chartsSurfaceProps = (0, _extends2.default)({
     title,
     desc,
-    sx,
-    ref
+    sx
   }, other);
   const chartDataProviderProps = {
     margin,
@@ -71,6 +72,8 @@ const useChartsContainerProps = (props, ref) => {
     onAxisClick,
     highlightedAxis,
     onHighlightedAxisChange,
+    tooltipAxis,
+    onTooltipAxisChange,
     tooltipItem,
     onTooltipItemChange,
     disableVoronoi,

package/ChartsLegend/ChartsLegend.js

@@ -92,7 +92,6 @@ const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('Mui
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isButton = Boolean(onItemClick || toggleVisibilityOnClick);
-  const Element = isButton ? 'button' : 'div';
   const handleClick = (0, _useEventCallback.default)((item, i) => event => {
     if (onItemClick && item) {
       onItemClick(event, (0, _onClickContextBuilder.seriesContextBuilder)(item), i);
@@ -123,13 +122,20 @@ const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('Mui
         className: classes?.item,
         "data-series": item.seriesId,
         "data-index": item.dataIndex,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Element, {
+        children: isButton ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+          className: (0, _clsx.default)(classes?.series, !isVisible && classes?.hidden),
+          onClick: handleClick(item, i),
+          type: "button",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+            className: classes?.mark,
+            color: item.color,
+            type: item.markType
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
+            className: classes?.label,
+            children: item.label
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: (0, _clsx.default)(classes?.series, !isVisible && classes?.hidden),
-          role: isButton ? 'button' : undefined,
-          type: isButton ? 'button' : undefined
-          // @ts-expect-error onClick is only attached to a button
-          ,
-          onClick: isButton ? handleClick(item, i) : undefined,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
             className: classes?.mark,
             color: item.color,

package/ChartsLegend/legendContext.types.d.ts

@@ -19,6 +19,17 @@ export interface LegendItemParams extends Partial<Omit<SeriesLegendItemContext,
   type: ChartSeriesType;
   markType: ChartsLabelMarkProps['type'];
 }
+export interface SeriesLegendItemParams extends Partial<Omit<SeriesLegendItemContext, 'type' | keyof LegendItemContextBase>>, LegendItemContextBase {
+  /**
+   * The identifier of the series
+   */
+  seriesId: SeriesId;
+  /**
+   * The type of the series
+   */
+  type: ChartSeriesType;
+  markType: ChartsLabelMarkProps['type'];
+}
 export interface SeriesLegendItemContext extends LegendItemContextBase {
   /**
    * The type of the legend item

package/ChartsOverlay/ChartsLoadingOverlay.js

@@ -6,25 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsLoadingOverlay = ChartsLoadingOverlay;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _styles = require("@mui/material/styles");
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useChartsLocalization = require("../hooks/useChartsLocalization");
+var _common = require("./common");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["message"];
-const StyledText = (0, _styles.styled)('text', {
-  slot: 'internal',
-  shouldForwardProp: undefined
-})(({
-  theme
-}) => (0, _extends2.default)({}, theme.typography.body2, {
-  stroke: 'none',
-  fill: (theme.vars || theme).palette.text.primary,
-  shapeRendering: 'crispEdges',
-  textAnchor: 'middle',
-  dominantBaseline: 'middle'
-}));
 function ChartsLoadingOverlay(props) {
   const {
       message
@@ -39,7 +27,7 @@ function ChartsLoadingOverlay(props) {
   const {
     localeText
   } = (0, _useChartsLocalization.useChartsLocalization)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.StyledText, (0, _extends2.default)({
     x: left + width / 2,
     y: top + height / 2
   }, other, {

package/ChartsOverlay/ChartsNoDataOverlay.js

@@ -6,25 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsNoDataOverlay = ChartsNoDataOverlay;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _styles = require("@mui/material/styles");
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useChartsLocalization = require("../hooks/useChartsLocalization");
+var _common = require("./common");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["message"];
-const StyledText = (0, _styles.styled)('text', {
-  slot: 'internal',
-  shouldForwardProp: undefined
-})(({
-  theme
-}) => (0, _extends2.default)({}, theme.typography.body2, {
-  stroke: 'none',
-  fill: (theme.vars || theme).palette.text.primary,
-  shapeRendering: 'crispEdges',
-  textAnchor: 'middle',
-  dominantBaseline: 'middle'
-}));
 function ChartsNoDataOverlay(props) {
   const {
       message
@@ -39,7 +27,7 @@ function ChartsNoDataOverlay(props) {
   const {
     localeText
   } = (0, _useChartsLocalization.useChartsLocalization)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.StyledText, (0, _extends2.default)({
     x: left + width / 2,
     y: top + height / 2
   }, other, {

package/ChartsOverlay/common.d.ts

@@ -0,0 +1 @@
+export declare const StyledText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGTextElementAttributes<SVGTextElement>, keyof import("react").SVGTextElementAttributes<SVGTextElement>>, {}>;

package/ChartsOverlay/common.js

@@ -0,0 +1,22 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledText = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+const StyledText = exports.StyledText = (0, _styles.styled)('text', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
+  theme
+}) => (0, _extends2.default)({}, theme.typography.body2, {
+  stroke: 'none',
+  fill: (theme.vars || theme).palette.text.primary,
+  shapeRendering: 'crispEdges',
+  textAnchor: 'middle',
+  dominantBaseline: 'middle'
+}));

package/ChartsSurface/ChartsSurface.js

@@ -88,7 +88,7 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
       width: propsWidth,
       height: propsHeight
     },
-    viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
+    viewBox: `0 0 ${svgWidth} ${svgHeight}`,
     className: (0, _clsx.default)(classes.root, className),
     tabIndex: isKeyboardNavigationEnabled ? 0 : undefined
   }, other, {

package/ChartsTooltip/ChartTooltip.types.d.ts

@@ -1,15 +1,16 @@
 import { type ChartsTooltipProps } from "./ChartsTooltip.js";
-export interface ChartsTooltipSlots {
+import { type TriggerOptions } from "./utils.js";
+export interface ChartsTooltipSlots<T extends TriggerOptions = TriggerOptions> {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: React.ElementType<ChartsTooltipProps>;
+  tooltip?: React.ElementType<ChartsTooltipProps<T>>;
 }
-export interface ChartsTooltipSlotProps {
+export interface ChartsTooltipSlotProps<T extends TriggerOptions = TriggerOptions> {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: Partial<ChartsTooltipProps>;
+  tooltip?: Partial<ChartsTooltipProps<T>>;
 }

package/ChartsTooltip/ChartsAxisTooltipContent.d.ts

@@ -7,6 +7,12 @@ export interface ChartsAxisTooltipContentProps {
    */
   classes?: Partial<ChartsTooltipClasses>;
   sx?: SxProps<Theme>;
+  /**
+   * The sort in which series items are displayed in the tooltip.
+   * When set to `none`, series are sorted as they are provided in the series property. Otherwise they are sorted by their value.
+   * @default 'none'
+   */
+  sort?: 'none' | 'asc' | 'desc';
 }
 declare function ChartsAxisTooltipContent(props: ChartsAxisTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ChartsAxisTooltipContent {