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

package/ChartsLegend/ChartsLegend.js

@@ -20,7 +20,7 @@ var _onClickContextBuilder = require("./onClickContextBuilder");
 var _chartsLegendClasses = require("./chartsLegendClasses");
 var _consumeSlots = require("../internals/consumeSlots");
 var _ChartsLabel = require("../ChartsLabel/ChartsLabel");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager");
 var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -81,7 +81,7 @@ const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('Mui
   const data = (0, _useLegend.useLegend)();
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const store = (0, _useStore.useStore)();
   const isItemVisible = store.use(_useChartVisibilityManager.selectorIsItemVisibleGetter);
   const {

package/ChartsLegend/ChartsLegend.mjs

@@ -14,7 +14,7 @@ import { seriesContextBuilder } from "./onClickContextBuilder.mjs";
 import { legendClasses, useUtilityClasses } from "./chartsLegendClasses.mjs";
 import { consumeSlots } from "../internals/consumeSlots.mjs";
 import { ChartsLabel } from "../ChartsLabel/ChartsLabel.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { selectorIsItemVisibleGetter } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -74,7 +74,7 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
   const data = useLegend();
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const store = useStore();
   const isItemVisible = store.use(selectorIsItemVisibleGetter);
   const {

package/ChartsLegend/legendContext.types.d.mts

@@ -1,5 +1,4 @@
 import { type ChartsLabelMarkProps } from "../ChartsLabel/ChartsLabelMark.mjs";
-import { type PieItemId } from "../models/index.mjs";
 import { type SeriesId } from "../models/seriesType/common.mjs";
 import type { ChartSeriesType } from "../models/seriesType/config.mjs";
 interface LegendItemContextBase {
@@ -42,11 +41,6 @@ export interface SeriesLegendItemContext extends LegendItemContextBase {
    * The identifier of the series
    */
   seriesId: SeriesId;
-  /**
-   * The identifier of the pie item
-   * @deprecated use `dataIndex` instead
-   */
-  itemId?: PieItemId;
   /**
    * The data index of the item in the series data array
    */

package/ChartsLegend/legendContext.types.d.ts

@@ -1,5 +1,4 @@
 import { type ChartsLabelMarkProps } from "../ChartsLabel/ChartsLabelMark.js";
-import { type PieItemId } from "../models/index.js";
 import { type SeriesId } from "../models/seriesType/common.js";
 import type { ChartSeriesType } from "../models/seriesType/config.js";
 interface LegendItemContextBase {
@@ -42,11 +41,6 @@ export interface SeriesLegendItemContext extends LegendItemContextBase {
    * The identifier of the series
    */
   seriesId: SeriesId;
-  /**
-   * The identifier of the pie item
-   * @deprecated use `dataIndex` instead
-   */
-  itemId?: PieItemId;
   /**
    * The data index of the item in the series data array
    */

package/ChartsLegend/onClickContextBuilder.js

@@ -9,7 +9,6 @@ const seriesContextBuilder = context => ({
   color: context.color,
   label: context.label,
   seriesId: context.seriesId,
-  itemId: context.itemId,
   dataIndex: context.dataIndex
 });
 exports.seriesContextBuilder = seriesContextBuilder;

package/ChartsLegend/onClickContextBuilder.mjs

@@ -3,6 +3,5 @@ export const seriesContextBuilder = context => ({
   color: context.color,
   label: context.label,
   seriesId: context.seriesId,
-  itemId: context.itemId,
   dataIndex: context.dataIndex
 });

package/ChartsOverlay/ChartsLoadingOverlay.js

@@ -7,17 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ChartsLoadingOverlay = ChartsLoadingOverlay;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-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"];
 function ChartsLoadingOverlay(props) {
-  const {
-      message
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
     top,
     left,
@@ -30,7 +24,7 @@ function ChartsLoadingOverlay(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.StyledText, (0, _extends2.default)({
     x: left + width / 2,
     y: top + height / 2
-  }, other, {
-    children: message ?? localeText.loading
+  }, props, {
+    children: localeText.loading
   }));
 }

package/ChartsOverlay/ChartsLoadingOverlay.mjs

@@ -1,17 +1,11 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["message"];
 import { useDrawingArea } from "../hooks/useDrawingArea.mjs";
 import { useChartsLocalization } from "../hooks/useChartsLocalization.mjs";
 import { StyledText } from "./common.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function ChartsLoadingOverlay(props) {
-  const {
-      message
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     top,
     left,
@@ -24,7 +18,7 @@ export function ChartsLoadingOverlay(props) {
   return /*#__PURE__*/_jsx(StyledText, _extends({
     x: left + width / 2,
     y: top + height / 2
-  }, other, {
-    children: message ?? localeText.loading
+  }, props, {
+    children: localeText.loading
   }));
 }

package/ChartsOverlay/ChartsNoDataOverlay.js

@@ -7,17 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ChartsNoDataOverlay = ChartsNoDataOverlay;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-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"];
 function ChartsNoDataOverlay(props) {
-  const {
-      message
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
     top,
     left,
@@ -30,7 +24,7 @@ function ChartsNoDataOverlay(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.StyledText, (0, _extends2.default)({
     x: left + width / 2,
     y: top + height / 2
-  }, other, {
-    children: message ?? localeText.noData
+  }, props, {
+    children: localeText.noData
   }));
 }

package/ChartsOverlay/ChartsNoDataOverlay.mjs

@@ -1,17 +1,11 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["message"];
 import { useDrawingArea } from "../hooks/useDrawingArea.mjs";
 import { useChartsLocalization } from "../hooks/useChartsLocalization.mjs";
 import { StyledText } from "./common.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function ChartsNoDataOverlay(props) {
-  const {
-      message
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     top,
     left,
@@ -24,7 +18,7 @@ export function ChartsNoDataOverlay(props) {
   return /*#__PURE__*/_jsx(StyledText, _extends({
     x: left + width / 2,
     y: top + height / 2
-  }, other, {
-    children: message ?? localeText.noData
+  }, props, {
+    children: localeText.noData
   }));
 }

package/ChartsOverlay/ChartsOverlay.d.mts

@@ -3,12 +3,6 @@ import { type SxProps, type Theme } from '@mui/material/styles';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 export declare function useNoData(): boolean;
 export type CommonOverlayProps = React.SVGAttributes<SVGTextElement> & {
-  /**
-   * The message displayed by the overlay.
-   * @deprecated The customization of the message should be done with the localization key `loading` and `noData`.
-   * @see See {@link https://mui.com/x/react-charts/localization/ localization docs} for more details.
-   */
-  message?: string;
   sx?: SxProps<Theme>;
 };
 export interface ChartsOverlaySlots {

package/ChartsOverlay/ChartsOverlay.d.ts

@@ -3,12 +3,6 @@ import { type SxProps, type Theme } from '@mui/material/styles';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 export declare function useNoData(): boolean;
 export type CommonOverlayProps = React.SVGAttributes<SVGTextElement> & {
-  /**
-   * The message displayed by the overlay.
-   * @deprecated The customization of the message should be done with the localization key `loading` and `noData`.
-   * @see See {@link https://mui.com/x/react-charts/localization/ localization docs} for more details.
-   */
-  message?: string;
   sx?: SxProps<Theme>;
 };
 export interface ChartsOverlaySlots {

package/ChartsReferenceLine/index.d.mts

@@ -1,4 +1,5 @@
 export * from "./ChartsReferenceLine.mjs";
-export * from "./chartsReferenceLineClasses.mjs";
+export { referenceLineClasses } from "./chartsReferenceLineClasses.mjs";
+export type { ChartsReferenceLineClasses, ChartsReferenceLineClassKey } from "./chartsReferenceLineClasses.mjs";
 export type { ChartsXReferenceLineProps } from "./ChartsXReferenceLine.mjs";
 export type { ChartsYReferenceLineProps } from "./ChartsYReferenceLine.mjs";

package/ChartsReferenceLine/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./ChartsReferenceLine.js";
-export * from "./chartsReferenceLineClasses.js";
+export { referenceLineClasses } from "./chartsReferenceLineClasses.js";
+export type { ChartsReferenceLineClasses, ChartsReferenceLineClassKey } from "./chartsReferenceLineClasses.js";
 export type { ChartsXReferenceLineProps } from "./ChartsXReferenceLine.js";
 export type { ChartsYReferenceLineProps } from "./ChartsYReferenceLine.js";

package/ChartsReferenceLine/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  referenceLineClasses: true
+};
+Object.defineProperty(exports, "referenceLineClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartsReferenceLineClasses.referenceLineClasses;
+  }
+});
 var _ChartsReferenceLine = require("./ChartsReferenceLine");
 Object.keys(_ChartsReferenceLine).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsReferenceLine[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -14,14 +24,4 @@ Object.keys(_ChartsReferenceLine).forEach(function (key) {
     }
   });
 });
-var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
-Object.keys(_chartsReferenceLineClasses).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _chartsReferenceLineClasses[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _chartsReferenceLineClasses[key];
-    }
-  });
-});
+var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");

package/ChartsReferenceLine/index.mjs

@@ -1,3 +1,2 @@
 export * from "./ChartsReferenceLine.mjs";
-export * from "./chartsReferenceLineClasses.mjs";
-export {};
+export { referenceLineClasses } from "./chartsReferenceLineClasses.mjs";

package/ChartsSurface/ChartsSurface.d.mts

@@ -1,9 +1,8 @@
 import { type SxProps, type Theme } from '@mui/material/styles';
 import * as React from 'react';
-export interface ChartsSurfaceProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'> {
+import { type ChartsLayerContainerProps } from "../ChartsLayerContainer/index.mjs";
+export interface ChartsSurfaceProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'>, Pick<ChartsLayerContainerProps, 'title' | 'desc'> {
   className?: string;
-  title?: string;
-  desc?: string;
   sx?: SxProps<Theme>;
   children?: React.ReactNode;
 }

package/ChartsSurface/ChartsSurface.d.ts

@@ -1,9 +1,8 @@
 import { type SxProps, type Theme } from '@mui/material/styles';
 import * as React from 'react';
-export interface ChartsSurfaceProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'> {
+import { type ChartsLayerContainerProps } from "../ChartsLayerContainer/index.js";
+export interface ChartsSurfaceProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'>, Pick<ChartsLayerContainerProps, 'title' | 'desc'> {
   className?: string;
-  title?: string;
-  desc?: string;
   sx?: SxProps<Theme>;
   children?: React.ReactNode;
 }

package/ChartsSurface/ChartsSurface.js

@@ -17,7 +17,7 @@ var _chartsSurfaceClasses = require("./chartsSurfaceClasses");
 var _ChartsSvgLayer = require("../ChartsSvgLayer");
 var _ChartsLayerContainer = require("../ChartsLayerContainer");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className"]; // eslint-disable-next-line import/no-cycle
+const _excluded = ["children", "className", "title", "desc"]; // eslint-disable-next-line import/no-cycle
 /**
  * A helper component that combines `<ChartsLayerContainer>` and `<ChartsSvgLayer>` to provide a surface for drawing charts.
  * If you need more control over the layers, you can use `<ChartsLayerContainer>` and `<ChartsSvgLayer>` separately.
@@ -37,13 +37,17 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
   });
   const {
       children,
-      className
+      className,
+      title,
+      desc
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const classes = (0, _chartsSurfaceClasses.useUtilityClasses)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLayerContainer.ChartsLayerContainer, {
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
+    title: title,
+    desc: desc,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSvgLayer.ChartsSvgLayer, (0, _extends2.default)({}, other, {
       children: children
     }))
@@ -57,7 +61,15 @@ process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
   className: _propTypes.default.string,
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
   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]),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string
 } : void 0;

package/ChartsSurface/ChartsSurface.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className"];
+const _excluded = ["children", "className", "title", "desc"];
 import clsx from 'clsx';
 import { useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
@@ -31,13 +31,17 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
   });
   const {
       children,
-      className
+      className,
+      title,
+      desc
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const classes = useUtilityClasses();
   return /*#__PURE__*/_jsx(ChartsLayerContainer, {
     className: clsx(classes.root, className),
     ref: ref,
+    title: title,
+    desc: desc,
     children: /*#__PURE__*/_jsx(ChartsSvgLayer, _extends({}, other, {
       children: children
     }))
@@ -51,8 +55,16 @@ process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: PropTypes.string
 } : void 0;
 export { ChartsSurface };

package/ChartsSvgLayer/ChartsSvgLayer.d.mts

@@ -2,8 +2,6 @@ import { type SxProps, type Theme } from '@mui/material/styles';
 import * as React from 'react';
 export interface ChartsSvgLayerProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'> {
   className?: string;
-  title?: string;
-  desc?: string;
   sx?: SxProps<Theme>;
   children?: React.ReactNode;
 }
@@ -11,8 +9,6 @@ export interface ChartsSvgLayerProps extends Omit<React.SVGProps<SVGSVGElement>,
  * A layer that provides the drawing area SVG the chart elements.
  * Must be wrapped in a `<ChartsLayerContainer>`.
  *
- * It provides the `title` and `desc` elements for the chart.
- *
  * Demos:
  *
  * - [Composition](https://mui.com/x/api/charts/composition/)

package/ChartsSvgLayer/ChartsSvgLayer.d.ts

@@ -2,8 +2,6 @@ import { type SxProps, type Theme } from '@mui/material/styles';
 import * as React from 'react';
 export interface ChartsSvgLayerProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'> {
   className?: string;
-  title?: string;
-  desc?: string;
   sx?: SxProps<Theme>;
   children?: React.ReactNode;
 }
@@ -11,8 +9,6 @@ export interface ChartsSvgLayerProps extends Omit<React.SVGProps<SVGSVGElement>,
  * A layer that provides the drawing area SVG the chart elements.
  * Must be wrapped in a `<ChartsLayerContainer>`.
  *
- * It provides the `title` and `desc` elements for the chart.
- *
  * Demos:
  *
  * - [Composition](https://mui.com/x/api/charts/composition/)

package/ChartsSvgLayer/ChartsSvgLayer.js

@@ -14,11 +14,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _chartsSvgLayerClasses = require("./chartsSvgLayerClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "title", "desc"];
+const _excluded = ["children", "className"];
 const ChartsSvgLayerStyles = (0, _styles.styled)('svg', {
   name: 'MuiChartsSvgLayer',
   slot: 'Root'
@@ -33,8 +33,6 @@ const ChartsSvgLayerStyles = (0, _styles.styled)('svg', {
  * A layer that provides the drawing area SVG the chart elements.
  * Must be wrapped in a `<ChartsLayerContainer>`.
  *
- * It provides the `title` and `desc` elements for the chart.
- *
  * Demos:
  *
  * - [Composition](https://mui.com/x/api/charts/composition/)
@@ -45,9 +43,8 @@ const ChartsSvgLayerStyles = (0, _styles.styled)('svg', {
  */
 const ChartsSvgLayer = exports.ChartsSvgLayer = /*#__PURE__*/React.forwardRef(function ChartsSvgLayer(inProps, ref) {
   const {
-    store,
-    instance
-  } = (0, _ChartProvider.useChartContext)();
+    store
+  } = (0, _ChartsProvider.useChartsContext)();
   const svgWidth = store.use(_useChartDimensions.selectorChartSvgWidth);
   const svgHeight = store.use(_useChartDimensions.selectorChartSvgHeight);
   const themeProps = (0, _styles.useThemeProps)({
@@ -56,9 +53,7 @@ const ChartsSvgLayer = exports.ChartsSvgLayer = /*#__PURE__*/React.forwardRef(fu
   });
   const {
       children,
-      className,
-      title,
-      desc
+      className
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const classes = (0, _chartsSvgLayerClasses.useUtilityClasses)();
@@ -67,24 +62,9 @@ const ChartsSvgLayer = exports.ChartsSvgLayer = /*#__PURE__*/React.forwardRef(fu
     viewBox: `0 0 ${svgWidth} ${svgHeight}`,
     className: (0, _clsx.default)(classes.root, className)
   }, other, {
-    onPointerEnter: event => {
-      other.onPointerEnter?.(event);
-      instance.handlePointerEnter?.(event);
-    },
-    onPointerLeave: event => {
-      other.onPointerLeave?.(event);
-      instance.handlePointerLeave?.(event);
-    },
-    onClick: event => {
-      other.onClick?.(event);
-      instance.handleClick?.(event);
-    },
     ref: ref,
-    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
-      children: title
-    }), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)("desc", {
-      children: desc
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxesGradients.ChartsAxesGradients, {}), hasIntrinsicSize && children]
+    "aria-hidden": true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxesGradients.ChartsAxesGradients, {}), hasIntrinsicSize && children]
   }));
 });
 if (process.env.NODE_ENV !== "production") ChartsSvgLayer.displayName = "ChartsSvgLayer";
@@ -95,7 +75,5 @@ process.env.NODE_ENV !== "production" ? ChartsSvgLayer.propTypes = {
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
   className: _propTypes.default.string,
-  desc: _propTypes.default.string,
-  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]),
-  title: _propTypes.default.string
+  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])
 } : void 0;

package/ChartsSvgLayer/ChartsSvgLayer.mjs

@@ -2,13 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "title", "desc"];
+const _excluded = ["children", "className"];
 import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import clsx from 'clsx';
 import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { selectorChartSvgWidth, selectorChartSvgHeight } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.mjs";
 import { useUtilityClasses } from "./chartsSvgLayerClasses.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -26,8 +26,6 @@ const ChartsSvgLayerStyles = styled('svg', {
  * A layer that provides the drawing area SVG the chart elements.
  * Must be wrapped in a `<ChartsLayerContainer>`.
  *
- * It provides the `title` and `desc` elements for the chart.
- *
  * Demos:
  *
  * - [Composition](https://mui.com/x/api/charts/composition/)
@@ -38,9 +36,8 @@ const ChartsSvgLayerStyles = styled('svg', {
  */
 const ChartsSvgLayer = /*#__PURE__*/React.forwardRef(function ChartsSvgLayer(inProps, ref) {
   const {
-    store,
-    instance
-  } = useChartContext();
+    store
+  } = useChartsContext();
   const svgWidth = store.use(selectorChartSvgWidth);
   const svgHeight = store.use(selectorChartSvgHeight);
   const themeProps = useThemeProps({
@@ -49,9 +46,7 @@ const ChartsSvgLayer = /*#__PURE__*/React.forwardRef(function ChartsSvgLayer(inP
   });
   const {
       children,
-      className,
-      title,
-      desc
+      className
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const classes = useUtilityClasses();
@@ -60,24 +55,9 @@ const ChartsSvgLayer = /*#__PURE__*/React.forwardRef(function ChartsSvgLayer(inP
     viewBox: `0 0 ${svgWidth} ${svgHeight}`,
     className: clsx(classes.root, className)
   }, other, {
-    onPointerEnter: event => {
-      other.onPointerEnter?.(event);
-      instance.handlePointerEnter?.(event);
-    },
-    onPointerLeave: event => {
-      other.onPointerLeave?.(event);
-      instance.handlePointerLeave?.(event);
-    },
-    onClick: event => {
-      other.onClick?.(event);
-      instance.handleClick?.(event);
-    },
     ref: ref,
-    children: [title && /*#__PURE__*/_jsx("title", {
-      children: title
-    }), desc && /*#__PURE__*/_jsx("desc", {
-      children: desc
-    }), /*#__PURE__*/_jsx(ChartsAxesGradients, {}), hasIntrinsicSize && children]
+    "aria-hidden": true,
+    children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), hasIntrinsicSize && children]
   }));
 });
 if (process.env.NODE_ENV !== "production") ChartsSvgLayer.displayName = "ChartsSvgLayer";
@@ -88,8 +68,6 @@ process.env.NODE_ENV !== "production" ? ChartsSvgLayer.propTypes = {
   // ----------------------------------------------------------------------
   children: PropTypes.node,
   className: PropTypes.string,
-  desc: PropTypes.string,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  title: PropTypes.string
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { ChartsSvgLayer };