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

package/ScatterChart/seriesConfig/descriptionGetter.mjs

@@ -0,0 +1,28 @@
+import { getLabel } from "../../internals/getLabel.mjs";
+const descriptionGetter = params => {
+  const {
+    identifier,
+    series,
+    xAxis,
+    yAxis,
+    localeText
+  } = params;
+  const label = getLabel(series.label, 'tooltip');
+  const item = series.data[identifier.dataIndex];
+  const formattedXValue = xAxis.valueFormatter?.(item?.x, {
+    location: 'tooltip',
+    scale: xAxis.scale
+  }) ?? '';
+  const formattedYValue = yAxis.valueFormatter?.(item?.y, {
+    location: 'tooltip',
+    scale: yAxis.scale
+  }) ?? '';
+  return localeText.scatterDescription({
+    x: item?.x ?? null,
+    y: item?.y ?? null,
+    formattedXValue,
+    formattedYValue,
+    seriesLabel: label
+  });
+};
+export default descriptionGetter;

package/ScatterChart/seriesConfig/index.js

@@ -16,6 +16,7 @@ var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandl
 var _identifierSerializer = require("../../internals/identifierSerializer");
 var _identifierCleaner = require("../../internals/identifierCleaner");
 var _useChartHighlight = require("../../internals/plugins/featurePlugins/useChartHighlight");
+var _descriptionGetter = _interopRequireDefault(require("./descriptionGetter"));
 const scatterSeriesConfig = exports.scatterSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   colorProcessor: _getColor.default,
@@ -28,6 +29,7 @@ const scatterSeriesConfig = exports.scatterSeriesConfig = {
   keyboardFocusHandler: _keyboardFocusHandler.default,
   identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex,
   identifierCleaner: _identifierCleaner.identifierCleanerSeriesIdDataIndex,
+  descriptionGetter: _descriptionGetter.default,
   isHighlightedCreator: _useChartHighlight.createIsHighlighted,
   isFadedCreator: _useChartHighlight.createIsFaded
 };

package/ScatterChart/seriesConfig/index.mjs

@@ -9,6 +9,7 @@ import keyboardFocusHandler from "./keyboardFocusHandler.mjs";
 import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.mjs";
 import { identifierCleanerSeriesIdDataIndex } from "../../internals/identifierCleaner.mjs";
 import { createIsHighlighted, createIsFaded } from "../../internals/plugins/featurePlugins/useChartHighlight/index.mjs";
+import descriptionGetter from "./descriptionGetter.mjs";
 export const scatterSeriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
@@ -21,6 +22,7 @@ export const scatterSeriesConfig = {
   keyboardFocusHandler,
   identifierSerializer: identifierSerializerSeriesIdDataIndex,
   identifierCleaner: identifierCleanerSeriesIdDataIndex,
+  descriptionGetter,
   isHighlightedCreator: createIsHighlighted,
   isFadedCreator: createIsFaded
 };

package/SparkLineChart/SparkLineChart.js

@@ -254,7 +254,9 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: _propTypes.default.object,
+  experimentalFeatures: _propTypes.default.shape({
+    enablePositionBasedPointerInteraction: _propTypes.default.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -617,7 +619,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
       tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -676,7 +678,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
       tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -725,7 +727,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -772,7 +774,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -818,7 +820,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -864,7 +866,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -910,7 +912,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -960,7 +962,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -1010,7 +1012,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -1101,7 +1103,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -1159,7 +1161,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -1204,7 +1206,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -1250,7 +1252,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -1295,7 +1297,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -1340,7 +1342,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -1389,7 +1391,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -1438,7 +1440,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -1483,6 +1485,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   })])
 } : void 0;

package/SparkLineChart/SparkLineChart.mjs

@@ -247,7 +247,9 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: PropTypes.object,
+  experimentalFeatures: PropTypes.shape({
+    enablePositionBasedPointerInteraction: PropTypes.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -610,7 +612,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
       tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -669,7 +671,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
       tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -718,7 +720,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -765,7 +767,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -811,7 +813,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -857,7 +859,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -903,7 +905,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -953,7 +955,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -1003,7 +1005,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -1094,7 +1096,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -1152,7 +1154,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -1197,7 +1199,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -1243,7 +1245,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -1288,7 +1290,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -1333,7 +1335,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -1382,7 +1384,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -1431,7 +1433,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -1476,7 +1478,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   })])
 } : void 0;
 export { SparkLineChart };

package/constants/index.js

@@ -16,6 +16,4 @@ const DEFAULT_MARGINS = exports.DEFAULT_MARGINS = {
 };
 const DEFAULT_AXIS_SIZE_WIDTH = exports.DEFAULT_AXIS_SIZE_WIDTH = 45;
 const DEFAULT_AXIS_SIZE_HEIGHT = exports.DEFAULT_AXIS_SIZE_HEIGHT = 25;
-
-// How many pixels to add to the default axis size if that axis has a label
 const AXIS_LABEL_DEFAULT_HEIGHT = exports.AXIS_LABEL_DEFAULT_HEIGHT = 20;

package/constants/index.mjs

@@ -10,6 +10,4 @@ export const DEFAULT_MARGINS = {
 };
 export const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export const DEFAULT_AXIS_SIZE_HEIGHT = 25;
-
-// How many pixels to add to the default axis size if that axis has a label
 export const AXIS_LABEL_DEFAULT_HEIGHT = 20;

package/hooks/useInteractionItemProps.d.mts

@@ -5,7 +5,7 @@ import type { ChartSeriesType } from "../models/seriesType/config.mjs";
 import type { SeriesItemIdentifierWithType } from "../models/seriesType/index.mjs";
 import type { ChartInstance } from "../internals/plugins/models/index.mjs";
 import type { UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.mjs";
-export declare const useInteractionItemProps: <SeriesType extends ChartSeriesType>(data: SeriesItemIdentifierWithType<SeriesType>, skip?: boolean) => {
+export declare const useInteractionItemProps: <SeriesType extends ChartSeriesType>(data: SeriesItemIdentifierWithType<SeriesType>) => {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;

package/hooks/useInteractionItemProps.d.ts

@@ -5,7 +5,7 @@ import type { ChartSeriesType } from "../models/seriesType/config.js";
 import type { SeriesItemIdentifierWithType } from "../models/seriesType/index.js";
 import type { ChartInstance } from "../internals/plugins/models/index.js";
 import type { UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
-export declare const useInteractionItemProps: <SeriesType extends ChartSeriesType>(data: SeriesItemIdentifierWithType<SeriesType>, skip?: boolean) => {
+export declare const useInteractionItemProps: <SeriesType extends ChartSeriesType>(data: SeriesItemIdentifierWithType<SeriesType>) => {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;

package/hooks/useInteractionItemProps.js

@@ -16,7 +16,7 @@ function onPointerDown(event) {
     event.currentTarget.releasePointerCapture(event.pointerId);
   }
 }
-const useInteractionItemProps = (data, skip) => {
+const useInteractionItemProps = data => {
   const {
     instance
   } = (0, _ChartsProvider.useChartsContext)();
@@ -40,11 +40,11 @@ const useInteractionItemProps = (data, skip) => {
       }
     };
   }, [onPointerLeave]);
-  return React.useMemo(() => skip ? {} : {
+  return React.useMemo(() => ({
     onPointerEnter,
     onPointerLeave,
     onPointerDown
-  }, [skip, onPointerEnter, onPointerLeave]);
+  }), [onPointerEnter, onPointerLeave]);
 };
 exports.useInteractionItemProps = useInteractionItemProps;
 function getInteractionItemProps(instance, item) {

package/hooks/useInteractionItemProps.mjs

@@ -8,7 +8,7 @@ function onPointerDown(event) {
     event.currentTarget.releasePointerCapture(event.pointerId);
   }
 }
-export const useInteractionItemProps = (data, skip) => {
+export const useInteractionItemProps = data => {
   const {
     instance
   } = useChartsContext();
@@ -32,11 +32,11 @@ export const useInteractionItemProps = (data, skip) => {
       }
     };
   }, [onPointerLeave]);
-  return React.useMemo(() => skip ? {} : {
+  return React.useMemo(() => ({
     onPointerEnter,
     onPointerLeave,
     onPointerDown
-  }, [skip, onPointerEnter, onPointerLeave]);
+  }), [onPointerEnter, onPointerLeave]);
 };
 export function getInteractionItemProps(instance, item) {
   function onPointerEnter() {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.0.0-alpha.4
+ * @mui/x-charts v9.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.0.0-alpha.4
+ * @mui/x-charts v9.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.d.mts

@@ -0,0 +1,5 @@
+/**
+ * This component provides an accessibility proxy for charts.
+ * It uses two divs to let screen readers announce the focused content when it changes.
+ */
+export declare function ChartsAccessibilityProxy(): import("react/jsx-runtime").JSX.Element;

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This component provides an accessibility proxy for charts.
+ * It uses two divs to let screen readers announce the focused content when it changes.
+ */
+export declare function ChartsAccessibilityProxy(): import("react/jsx-runtime").JSX.Element;

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.js

@@ -0,0 +1,100 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsAccessibilityProxy = ChartsAccessibilityProxy;
+var React = _interopRequireWildcard(require("react"));
+var _useChartId = require("../../../hooks/useChartId");
+var _useDescription = require("./useDescription");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Make the proxy looks like a layer.
+ * Having a non-zero size is important for some screen readers to announce the content.
+ */const fullSizeLayerStyle = {
+  borderWidth: 0,
+  width: '100%',
+  height: '100%',
+  overflow: 'hidden',
+  position: 'absolute',
+  inset: 0,
+  padding: 0,
+  outline: 'none',
+  pointerEvents: 'none'
+};
+
+// The proxy is implemented by having two divs with the same content, and toggling the visibility of each one when the content changes.
+// The idea is to imitate the behavior of the focus moving from a list element to another, but with the minimal number of DOM elements.
+
+/**
+ * This component provides an accessibility proxy for charts.
+ * It uses two divs to let screen readers announce the focused content when it changes.
+ */
+function ChartsAccessibilityProxy() {
+  const message = (0, _useDescription.useDescription)();
+  const chartId = (0, _useChartId.useChartId)();
+  const currentFormatRef = React.useRef(null);
+  const currentIndexRef = React.useRef(0);
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    // Initialize children if not present
+    if (container.children.length === 0) {
+      for (let i = 0; i < 2; i += 1) {
+        const div = document.createElement('div');
+        div.setAttribute('id', i === 0 ? `voiceover-${chartId}-1` : `voiceover-${chartId}-2`);
+        div.style.display = 'none';
+        container.appendChild(div);
+      }
+
+      // The divs with the message content
+      for (let i = 0; i < 2; i += 1) {
+        const div = document.createElement('div');
+        if (i === (currentIndexRef.current + 1) % 2 && message) {
+          div.setAttribute('tabindex', '0');
+        }
+        div.setAttribute('role', 'img');
+        div.setAttribute('aria-labelledby', i === 0 ? `voiceover-${chartId}-1` : `voiceover-${chartId}-2`);
+        div.style.width = '100%';
+        div.style.height = '100%';
+        div.style.outline = 'none';
+        container.appendChild(div);
+      }
+    }
+    if (message && message !== currentFormatRef.current) {
+      currentFormatRef.current = message;
+      const inactiveIndex = currentIndexRef.current;
+      currentIndexRef.current = (currentIndexRef.current + 1) % 2;
+      const activeIndex = currentIndexRef.current;
+      const activeDiv = container.children[2 + activeIndex];
+      const inactiveDiv = container.children[2 + inactiveIndex];
+      const activeTextDiv = container.children[activeIndex];
+      const inactiveTextDiv = container.children[inactiveIndex];
+
+      // Both get text update
+      activeTextDiv.textContent = message ?? '';
+      inactiveTextDiv.textContent = message ?? '';
+      activeDiv.setAttribute('aria-hidden', 'false');
+      activeDiv.setAttribute('aria-labelledby', activeIndex === 0 ? `voiceover-${chartId}-1` : `voiceover-${chartId}-2`);
+      if (message) {
+        activeDiv.setAttribute('tabindex', '0');
+      }
+      inactiveDiv.setAttribute('aria-hidden', 'true');
+      inactiveDiv.setAttribute('aria-labelledby', activeIndex === 0 ? `voiceover-${chartId}-1` : `voiceover-${chartId}-2`);
+      inactiveDiv.removeAttribute('tabindex');
+      activeDiv.focus();
+    }
+  }, [message, chartId]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    role: "presentation",
+    tabIndex: message ? undefined : 0,
+    ref: containerRef,
+    style: fullSizeLayerStyle
+  });
+}