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

package/ChartsContainer/useChartsContainerProps.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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", "disableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableHitArea", "hitAreaRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "experimentalFeatures", "plugins", "localeText", "slots", "slotProps", "disableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.mjs";
 export const useChartsContainerProps = props => {
   const _ref = props,
@@ -22,8 +22,8 @@ export const useChartsContainerProps = props => {
       onTooltipAxisChange,
       tooltipItem,
       onTooltipItemChange,
-      disableVoronoi,
-      voronoiMaxRadius,
+      disableHitArea,
+      hitAreaRadius,
       onItemClick,
       disableAxisListener,
       highlightedItem,
@@ -38,11 +38,11 @@ export const useChartsContainerProps = props => {
       radiusAxis,
       skipAnimation,
       seriesConfig,
+      experimentalFeatures,
       plugins,
       localeText,
       slots,
       slotProps,
-      experimentalFeatures,
       disableKeyboardNavigation,
       brushConfig,
       onHiddenItemsChange,
@@ -55,7 +55,7 @@ export const useChartsContainerProps = props => {
     desc,
     sx
   }, other);
-  const chartDataProviderProps = {
+  const chartsDataProviderProps = {
     margin,
     series,
     colors,
@@ -70,8 +70,8 @@ export const useChartsContainerProps = props => {
     onTooltipAxisChange,
     tooltipItem,
     onTooltipItemChange,
-    disableVoronoi,
-    voronoiMaxRadius,
+    disableHitArea,
+    hitAreaRadius,
     onItemClick,
     axesGap,
     xAxis,
@@ -95,7 +95,7 @@ export const useChartsContainerProps = props => {
     slotProps
   };
   return {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps,
     children
   };

package/ChartsDataProvider/ChartsDataProvider.js

@@ -80,12 +80,6 @@ process.env.NODE_ENV !== "production" ? ChartsDataProvider.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
-  /**
-   * Options to enable features planned for the next major.
-   */
-  experimentalFeatures: _propTypes.default.shape({
-    preferStrictDomainInLineCharts: _propTypes.default.bool
-  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/ChartsDataProvider/ChartsDataProvider.mjs

@@ -73,12 +73,6 @@ process.env.NODE_ENV !== "production" ? ChartsDataProvider.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * Options to enable features planned for the next major.
-   */
-  experimentalFeatures: PropTypes.shape({
-    preferStrictDomainInLineCharts: PropTypes.bool
-  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/ChartsDataProvider/useChartsDataProviderProps.js

@@ -16,7 +16,7 @@ const useChartsDataProviderProps = inProps => {
   // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const themedProps = (0, _styles.useThemeProps)({
     props: inProps,
-    name: 'MuiChartDataProvider'
+    name: 'MuiChartsDataProvider'
   });
   // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const props = (0, _styles.useThemeProps)({

package/ChartsDataProvider/useChartsDataProviderProps.mjs

@@ -10,7 +10,7 @@ export const useChartsDataProviderProps = inProps => {
   // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const themedProps = useThemeProps({
     props: inProps,
-    name: 'MuiChartDataProvider'
+    name: 'MuiChartsDataProvider'
   });
   // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const props = useThemeProps({

package/ChartsGrid/ChartsGrid.d.mts

@@ -1,5 +1,9 @@
 import { type ChartsGridClasses } from "./chartsGridClasses.mjs";
 export interface ChartsGridProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * Displays vertical grid.
    */

package/ChartsGrid/ChartsGrid.d.ts

@@ -1,5 +1,9 @@
 import { type ChartsGridClasses } from "./chartsGridClasses.js";
 export interface ChartsGridProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * Displays vertical grid.
    */

package/ChartsGrid/ChartsGrid.js

@@ -9,6 +9,7 @@ exports.ChartsGrid = ChartsGrid;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
 var _chartsGridClasses = require("./chartsGridClasses");
@@ -18,7 +19,7 @@ var _ChartsVerticalGrid = require("./ChartsVerticalGrid");
 var _ChartsHorizontalGrid = require("./ChartsHorizontalGrid");
 var _useAxis = require("../hooks/useAxis");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["vertical", "horizontal"];
+const _excluded = ["className", "vertical", "horizontal"];
 const useUtilityClasses = ({
   classes
 }) => {
@@ -45,6 +46,7 @@ function ChartsGrid(inProps) {
   });
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const {
+      className,
       vertical,
       horizontal
     } = props,
@@ -61,7 +63,7 @@ function ChartsGrid(inProps) {
   const horizontalAxis = yAxis[yAxisIds[0]];
   const verticalAxis = xAxis[xAxisIds[0]];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledComponents.GridRoot, (0, _extends2.default)({}, other, {
-    className: classes.root,
+    className: (0, _clsx.default)(classes.root, className),
     children: [vertical && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVerticalGrid.ChartsGridVertical, {
       axis: verticalAxis,
       start: drawingArea.top,

package/ChartsGrid/ChartsGrid.mjs

@@ -2,8 +2,9 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["vertical", "horizontal"];
+const _excluded = ["className", "vertical", "horizontal"];
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps } from '@mui/material/styles';
 import { getChartsGridUtilityClass } from "./chartsGridClasses.mjs";
@@ -39,6 +40,7 @@ function ChartsGrid(inProps) {
   });
   const drawingArea = useDrawingArea();
   const {
+      className,
       vertical,
       horizontal
     } = props,
@@ -55,7 +57,7 @@ function ChartsGrid(inProps) {
   const horizontalAxis = yAxis[yAxisIds[0]];
   const verticalAxis = xAxis[xAxisIds[0]];
   return /*#__PURE__*/_jsxs(GridRoot, _extends({}, other, {
-    className: classes.root,
+    className: clsx(classes.root, className),
     children: [vertical && /*#__PURE__*/_jsx(ChartsGridVertical, {
       axis: verticalAxis,
       start: drawingArea.top,

package/ChartsGrid/ChartsHorizontalGrid.js

@@ -8,7 +8,7 @@ exports.ChartsGridHorizontal = ChartsGridHorizontal;
 var React = _interopRequireWildcard(require("react"));
 var _useTicks = require("../hooks/useTicks");
 var _styledComponents = require("./styledComponents");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -16,7 +16,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ChartsGridHorizontal(props) {
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const {
     axis,
     start,

package/ChartsGrid/ChartsHorizontalGrid.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTicks } from "../hooks/useTicks.mjs";
 import { GridLine } from "./styledComponents.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function ChartsGridHorizontal(props) {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const {
     axis,
     start,

package/ChartsGrid/ChartsVerticalGrid.js

@@ -8,7 +8,7 @@ exports.ChartsGridVertical = ChartsGridVertical;
 var React = _interopRequireWildcard(require("react"));
 var _useTicks = require("../hooks/useTicks");
 var _styledComponents = require("./styledComponents");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -16,7 +16,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ChartsGridVertical(props) {
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const {
     axis,
     start,

package/ChartsGrid/ChartsVerticalGrid.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTicks } from "../hooks/useTicks.mjs";
 import { GridLine } from "./styledComponents.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function ChartsGridVertical(props) {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const {
     axis,
     start,

package/ChartsGrid/index.d.mts

@@ -1,2 +1,3 @@
 export * from "./ChartsGrid.mjs";
-export * from "./chartsGridClasses.mjs";
+export { chartsGridClasses } from "./chartsGridClasses.mjs";
+export type { ChartsGridClasses, ChartsGridClassKey } from "./chartsGridClasses.mjs";

package/ChartsGrid/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./ChartsGrid.js";
-export * from "./chartsGridClasses.js";
+export { chartsGridClasses } from "./chartsGridClasses.js";
+export type { ChartsGridClasses, ChartsGridClassKey } from "./chartsGridClasses.js";

package/ChartsGrid/index.js

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

package/ChartsGrid/index.mjs

@@ -1,2 +1,2 @@
 export * from "./ChartsGrid.mjs";
-export * from "./chartsGridClasses.mjs";
+export { chartsGridClasses } from "./chartsGridClasses.mjs";

package/ChartsLayerContainer/ChartsLayerContainer.d.mts

@@ -1,6 +1,16 @@
 import * as React from 'react';
 import { type SxProps, type Theme } from '@mui/material/styles';
 export interface ChartsLayerContainerProps extends React.ComponentProps<'div'> {
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
   sx?: SxProps<Theme>;
 }
 /**

package/ChartsLayerContainer/ChartsLayerContainer.d.ts

@@ -1,6 +1,16 @@
 import * as React from 'react';
 import { type SxProps, type Theme } from '@mui/material/styles';
 export interface ChartsLayerContainerProps extends React.ComponentProps<'div'> {
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
+  title?: string;
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
+  desc?: string;
   sx?: SxProps<Theme>;
 }
 /**

package/ChartsLayerContainer/ChartsLayerContainer.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -10,16 +11,21 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _warning = require("@mui/x-internals/warning");
 var _styles = require("@mui/material/styles");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _chartsSurfaceClasses = require("../ChartsSurface/chartsSurfaceClasses");
 var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _hooks = require("../hooks");
+var _useRegisterPointerInteractions = require("../internals/plugins/featurePlugins/shared/useRegisterPointerInteractions");
 var _ChartsSurface = require("../ChartsSurface");
+var _ChartsAccessibilityProxy = require("../internals/components/ChartsAccessibilityProxy");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children"]; // eslint-disable-next-line import/no-cycle
+const _excluded = ["children", "title", "desc", "className"]; // eslint-disable-next-line import/no-cycle
 const ChartsLayerContainerDiv = (0, _styles.styled)('div', {
   name: 'MuiChartsLayerContainer',
   slot: 'Root'
@@ -49,21 +55,28 @@ const ChartsLayerContainerDiv = (0, _styles.styled)('div', {
  */
 const ChartsLayerContainer = exports.ChartsLayerContainer = /*#__PURE__*/React.forwardRef(function ChartsLayerContainer(inProps, ref) {
   const {
-    store
-  } = (0, _ChartProvider.useChartContext)();
+    store,
+    instance
+  } = (0, _ChartsProvider.useChartsContext)();
   const propsWidth = store.use(_useChartDimensions.selectorChartPropsWidth);
   const propsHeight = store.use(_useChartDimensions.selectorChartPropsHeight);
   const isKeyboardNavigationEnabled = store.use(_useChartKeyboardNavigation.selectorChartsIsKeyboardNavigationEnabled);
+  (0, _useRegisterPointerInteractions.useRegisterPointerInteractions)();
   const themeProps = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiChartsLayerContainer'
   });
   const {
-      children
+      children,
+      title,
+      desc,
+      className
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
+  const classes = (0, _chartsSurfaceClasses.useUtilityClasses)();
   const chartsLayerContainerRef = (0, _hooks.useChartsLayerContainerRef)();
   const handleRef = (0, _useForkRef.default)(chartsLayerContainerRef, ref);
+  const descId = (0, _useId.default)();
   if (process.env.NODE_ENV !== 'production') {
     React.Children.forEach(children, child => {
       if (typeof child === 'object' && child != null && 'type' in child && child.type === _ChartsSurface.ChartsSurface) {
@@ -71,15 +84,36 @@ const ChartsLayerContainer = exports.ChartsLayerContainer = /*#__PURE__*/React.f
       }
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLayerContainerDiv, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsLayerContainerDiv, (0, _extends2.default)({
     ref: handleRef,
     ownerState: {
       width: propsWidth,
       height: propsHeight
     },
-    tabIndex: isKeyboardNavigationEnabled ? 0 : undefined
+    role: "presentation",
+    "aria-label": title,
+    "aria-describedby": desc ? descId : undefined,
+    className: (0, _clsx.default)(classes.root, className)
   }, other, {
-    children: children
+    onPointerEnter: event => {
+      other.onPointerEnter?.(event);
+      instance.handlePointerEnter?.(event);
+    },
+    onPointerLeave: event => {
+      other.onPointerLeave?.(event);
+      instance.handlePointerLeave?.(event);
+    },
+    onClick: event => {
+      other.onClick?.(event);
+      instance.handleClick?.(event);
+    },
+    children: [isKeyboardNavigationEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAccessibilityProxy.ChartsAccessibilityProxy, {}), desc && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      id: descId,
+      style: {
+        display: 'none'
+      },
+      children: desc
+    }), children]
   }));
 });
 if (process.env.NODE_ENV !== "production") ChartsLayerContainer.displayName = "ChartsLayerContainer";
@@ -88,5 +122,15 @@ process.env.NODE_ENV !== "production" ? ChartsLayerContainer.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm 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])
+  /**
+   * 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/ChartsLayerContainer/ChartsLayerContainer.mjs

@@ -1,18 +1,25 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children"];
+const _excluded = ["children", "title", "desc", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { warnOnce } from '@mui/x-internals/warning';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useForkRef from '@mui/utils/useForkRef';
+import useId from '@mui/utils/useId';
+import { useUtilityClasses } from "../ChartsSurface/chartsSurfaceClasses.mjs";
 import { selectorChartPropsHeight, selectorChartPropsWidth } from "../internals/plugins/corePlugins/useChartDimensions/index.mjs";
 import { selectorChartsIsKeyboardNavigationEnabled } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { useChartsLayerContainerRef } from "../hooks/index.mjs";
+import { useRegisterPointerInteractions } from "../internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.mjs";
 // eslint-disable-next-line import/no-cycle
 import { ChartsSurface } from "../ChartsSurface/index.mjs";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { ChartsAccessibilityProxy } from "../internals/components/ChartsAccessibilityProxy/index.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartsLayerContainerDiv = styled('div', {
   name: 'MuiChartsLayerContainer',
   slot: 'Root'
@@ -42,21 +49,28 @@ const ChartsLayerContainerDiv = styled('div', {
  */
 const ChartsLayerContainer = /*#__PURE__*/React.forwardRef(function ChartsLayerContainer(inProps, ref) {
   const {
-    store
-  } = useChartContext();
+    store,
+    instance
+  } = useChartsContext();
   const propsWidth = store.use(selectorChartPropsWidth);
   const propsHeight = store.use(selectorChartPropsHeight);
   const isKeyboardNavigationEnabled = store.use(selectorChartsIsKeyboardNavigationEnabled);
+  useRegisterPointerInteractions();
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiChartsLayerContainer'
   });
   const {
-      children
+      children,
+      title,
+      desc,
+      className
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
+  const classes = useUtilityClasses();
   const chartsLayerContainerRef = useChartsLayerContainerRef();
   const handleRef = useForkRef(chartsLayerContainerRef, ref);
+  const descId = useId();
   if (process.env.NODE_ENV !== 'production') {
     React.Children.forEach(children, child => {
       if (typeof child === 'object' && child != null && 'type' in child && child.type === ChartsSurface) {
@@ -64,15 +78,36 @@ const ChartsLayerContainer = /*#__PURE__*/React.forwardRef(function ChartsLayerC
       }
     });
   }
-  return /*#__PURE__*/_jsx(ChartsLayerContainerDiv, _extends({
+  return /*#__PURE__*/_jsxs(ChartsLayerContainerDiv, _extends({
     ref: handleRef,
     ownerState: {
       width: propsWidth,
       height: propsHeight
     },
-    tabIndex: isKeyboardNavigationEnabled ? 0 : undefined
+    role: "presentation",
+    "aria-label": title,
+    "aria-describedby": desc ? descId : undefined,
+    className: clsx(classes.root, className)
   }, other, {
-    children: children
+    onPointerEnter: event => {
+      other.onPointerEnter?.(event);
+      instance.handlePointerEnter?.(event);
+    },
+    onPointerLeave: event => {
+      other.onPointerLeave?.(event);
+      instance.handlePointerLeave?.(event);
+    },
+    onClick: event => {
+      other.onClick?.(event);
+      instance.handleClick?.(event);
+    },
+    children: [isKeyboardNavigationEnabled && /*#__PURE__*/_jsx(ChartsAccessibilityProxy, {}), desc && /*#__PURE__*/_jsx("span", {
+      id: descId,
+      style: {
+        display: 'none'
+      },
+      children: desc
+    }), children]
   }));
 });
 if (process.env.NODE_ENV !== "production") ChartsLayerContainer.displayName = "ChartsLayerContainer";
@@ -81,6 +116,16 @@ process.env.NODE_ENV !== "production" ? ChartsLayerContainer.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  /**
+   * 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 { ChartsLayerContainer };

package/ChartsLayerContainer/chartsLayerContainerClasses.d.mts

@@ -0,0 +1,6 @@
+export interface ChartsLayerContainerClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export declare const useUtilityClasses: () => Record<"root", string>;
+export declare const chartsLayerContainerClasses: ChartsLayerContainerClasses;

package/ChartsLayerContainer/chartsLayerContainerClasses.d.ts

@@ -0,0 +1,6 @@
+export interface ChartsLayerContainerClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export declare const useUtilityClasses: () => Record<"root", string>;
+export declare const chartsLayerContainerClasses: ChartsLayerContainerClasses;

package/ChartsLayerContainer/chartsLayerContainerClasses.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUtilityClasses = exports.chartsLayerContainerClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+function getLayerContainerUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsLayerContainer', slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['root']
+  };
+  return (0, _composeClasses.default)(slots, getLayerContainerUtilityClass);
+};
+exports.useUtilityClasses = useUtilityClasses;
+const chartsLayerContainerClasses = exports.chartsLayerContainerClasses = (0, _generateUtilityClasses.default)('MuiChartsLayerContainer', ['root']);

package/ChartsLayerContainer/chartsLayerContainerClasses.mjs

@@ -0,0 +1,13 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+function getLayerContainerUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsLayerContainer', slot);
+}
+export const useUtilityClasses = () => {
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getLayerContainerUtilityClass);
+};
+export const chartsLayerContainerClasses = generateUtilityClasses('MuiChartsLayerContainer', ['root']);