@mui/x-charts 9.10.1 → 9.11.0

package/PieChart/PieArcPlot.js

@@ -14,6 +14,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _PieArc = require("./PieArc");
 var _useTransformData = require("./dataTransform/useTransformData");
+var _useRegisterItemActivation = require("../internals/useRegisterItemActivation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "seriesId", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 const PieArcPlotRoot = (0, _styles.styled)('g', {
@@ -48,6 +49,20 @@ function PieArcPlot(props) {
     faded,
     data
   });
+  (0, _useRegisterItemActivation.useRegisterItemActivation)({
+    type: 'pie',
+    seriesId
+  }, onItemClick && ((event, focusedItem) => {
+    const item = transformedData[focusedItem.dataIndex];
+    if (item === undefined) {
+      return;
+    }
+    onItemClick(event, {
+      type: 'pie',
+      seriesId,
+      dataIndex: focusedItem.dataIndex
+    }, item);
+  }));
   if (data.length === 0) {
     return null;
   }
@@ -137,7 +152,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes /* remove-proptypes
   innerRadius: _propTypes.default.number,
   /**
    * Callback fired when a pie item is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {ChartsActivationEvent<SVGPathElement>} event The event source of the callback.
    * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
    * @param {DefaultizedPieValueType} item The pie item.
    */

package/PieChart/PieArcPlot.mjs

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { PieArc } from "./PieArc.mjs";
 import { useTransformData } from "./dataTransform/useTransformData.mjs";
+import { useRegisterItemActivation } from "../internals/useRegisterItemActivation.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PieArcPlotRoot = styled('g', {
   name: 'MuiPieArcPlot',
@@ -41,6 +42,20 @@ function PieArcPlot(props) {
     faded,
     data
   });
+  useRegisterItemActivation({
+    type: 'pie',
+    seriesId
+  }, onItemClick && ((event, focusedItem) => {
+    const item = transformedData[focusedItem.dataIndex];
+    if (item === undefined) {
+      return;
+    }
+    onItemClick(event, {
+      type: 'pie',
+      seriesId,
+      dataIndex: focusedItem.dataIndex
+    }, item);
+  }));
   if (data.length === 0) {
     return null;
   }
@@ -130,7 +145,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes /* remove-proptypes
   innerRadius: PropTypes.number,
   /**
    * Callback fired when a pie item is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {ChartsActivationEvent<SVGPathElement>} event The event source of the callback.
    * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
    * @param {DefaultizedPieValueType} item The pie item.
    */

package/PieChart/PieChart.js

@@ -140,7 +140,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes /* remove-proptypes *
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: _propTypes.default.object,
+  experimentalFeatures: _propTypes.default.shape({
+    keyboardActivation: _propTypes.default.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/PieChart/PieChart.mjs

@@ -133,7 +133,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes /* remove-proptypes *
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: PropTypes.object,
+  experimentalFeatures: PropTypes.shape({
+    keyboardActivation: PropTypes.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/PieChart/PiePlot.js

@@ -110,7 +110,7 @@ process.env.NODE_ENV !== "production" ? PiePlot.propTypes /* remove-proptypes */
   className: _propTypes.default.string,
   /**
    * Callback fired when a pie item is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {ChartsActivationEvent<SVGPathElement>} event The event source of the callback.
    * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
    * @param {DefaultizedPieValueType} item The pie item.
    */

package/PieChart/PiePlot.mjs

@@ -104,7 +104,7 @@ process.env.NODE_ENV !== "production" ? PiePlot.propTypes /* remove-proptypes */
   className: PropTypes.string,
   /**
    * Callback fired when a pie item is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {ChartsActivationEvent<SVGPathElement>} event The event source of the callback.
    * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
    * @param {DefaultizedPieValueType} item The pie item.
    */

package/README.md

@@ -8,17 +8,7 @@ It's part of [MUI X](https://mui.com/x/), an open-core extension of our Core li
 Install the package in your project directory with:
 
 ```bash
-npm install @mui/x-charts
-```
-
-This component has the following peer dependencies that you need to install as well.
-
-```json
-"peerDependencies": {
-  "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-},
+npm install @mui/x-charts @mui/material @emotion/react @emotion/styled
 ```
 
 ## Documentation

package/RadarChart/RadarAxis/RadarAxis.utils.d.mts

@@ -5,11 +5,11 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
   angle: number;
 }
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
+  transform?: undefined;
   x: number;
   y: number;
   textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
   dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
-  transform?: undefined;
 } | {
   x: number;
   y: number;

package/RadarChart/RadarAxis/RadarAxis.utils.d.ts

@@ -5,11 +5,11 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
   angle: number;
 }
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
+  transform?: undefined;
   x: number;
   y: number;
   textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
   dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
-  transform?: undefined;
 } | {
   x: number;
   y: number;

package/RadarChart/RadarChart.js

@@ -102,7 +102,9 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes /* remove-proptypes
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: _propTypes.default.object,
+  experimentalFeatures: _propTypes.default.shape({
+    keyboardActivation: _propTypes.default.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/RadarChart/RadarChart.mjs

@@ -95,7 +95,9 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes /* remove-proptypes
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: PropTypes.object,
+  experimentalFeatures: PropTypes.shape({
+    keyboardActivation: PropTypes.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.js

@@ -17,6 +17,7 @@ var _radarClasses = require("../radarClasses");
 var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
 var _useInteractionAllItemProps = require("./useInteractionAllItemProps");
 var _useRadarRotationIndex = require("./useRadarRotationIndex");
+var _useRegisterRadarItemActivation = require("./useRegisterRadarItemActivation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "onItemClick", "classes"];
 function getPathProps(params) {
@@ -58,6 +59,7 @@ function RadarSeriesArea(props) {
   const interactionProps = (0, _useInteractionAllItemProps.useInteractionAllItemProps)(seriesCoordinates);
   const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
   const classes = (0, _radarClasses.useUtilityClasses)(inClasses);
+  (0, _useRegisterRadarItemActivation.useRegisterRadarItemActivation)(seriesId, onItemClick, _useRegisterRadarItemActivation.RADAR_ACTIVATION_PRIORITY.area);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,
@@ -104,7 +106,7 @@ process.env.NODE_ENV !== "production" ? RadarSeriesArea.propTypes /* remove-prop
   className: _propTypes.default.string,
   /**
    * Callback fired when an area is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {ChartsActivationEvent<SVGElement>} event The event source of the callback.
    * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
    */
   onItemClick: _propTypes.default.func,

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.mjs

@@ -9,6 +9,7 @@ import { useUtilityClasses } from "../radarClasses.mjs";
 import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
 import { useInteractionAllItemProps } from "./useInteractionAllItemProps.mjs";
 import { useRadarRotationIndex } from "./useRadarRotationIndex.mjs";
+import { RADAR_ACTIVATION_PRIORITY, useRegisterRadarItemActivation } from "./useRegisterRadarItemActivation.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPathProps(params) {
   const {
@@ -49,6 +50,7 @@ function RadarSeriesArea(props) {
   const interactionProps = useInteractionAllItemProps(seriesCoordinates);
   const getHighlightState = useItemHighlightStateGetter();
   const classes = useUtilityClasses(inClasses);
+  useRegisterRadarItemActivation(seriesId, onItemClick, RADAR_ACTIVATION_PRIORITY.area);
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,
@@ -95,7 +97,7 @@ process.env.NODE_ENV !== "production" ? RadarSeriesArea.propTypes /* remove-prop
   className: PropTypes.string,
   /**
    * Callback fired when an area is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {ChartsActivationEvent<SVGElement>} event The event source of the callback.
    * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
    */
   onItemClick: PropTypes.func,

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -14,6 +14,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
 var _radarClasses = require("../radarClasses");
 var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
+var _useRegisterRadarItemActivation = require("./useRegisterRadarItemActivation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "onItemClick", "classes"];
 function getCircleProps(params) {
@@ -45,6 +46,7 @@ function getCircleProps(params) {
 }
 function RadarSeriesMarks(props) {
   const {
+      seriesId,
       onItemClick,
       classes: inClasses
     } = props,
@@ -52,6 +54,7 @@ function RadarSeriesMarks(props) {
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(props.seriesId);
   const classes = (0, _radarClasses.useUtilityClasses)(inClasses);
   const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
+  (0, _useRegisterRadarItemActivation.useRegisterRadarItemActivation)(seriesId, onItemClick, _useRegisterRadarItemActivation.RADAR_ACTIVATION_PRIORITY.mark);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,
@@ -100,7 +103,7 @@ process.env.NODE_ENV !== "production" ? RadarSeriesMarks.propTypes /* remove-pro
   className: _propTypes.default.string,
   /**
    * Callback fired when a mark is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {ChartsActivationEvent<SVGElement>} event The event source of the callback.
    * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
    */
   onItemClick: _propTypes.default.func,

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.mjs

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { useRadarSeriesData } from "./useRadarSeriesData.mjs";
 import { useUtilityClasses } from "../radarClasses.mjs";
 import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
+import { RADAR_ACTIVATION_PRIORITY, useRegisterRadarItemActivation } from "./useRegisterRadarItemActivation.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getCircleProps(params) {
   const {
@@ -36,6 +37,7 @@ export function getCircleProps(params) {
 }
 function RadarSeriesMarks(props) {
   const {
+      seriesId,
       onItemClick,
       classes: inClasses
     } = props,
@@ -43,6 +45,7 @@ function RadarSeriesMarks(props) {
   const seriesCoordinates = useRadarSeriesData(props.seriesId);
   const classes = useUtilityClasses(inClasses);
   const getHighlightState = useItemHighlightStateGetter();
+  useRegisterRadarItemActivation(seriesId, onItemClick, RADAR_ACTIVATION_PRIORITY.mark);
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,
@@ -91,7 +94,7 @@ process.env.NODE_ENV !== "production" ? RadarSeriesMarks.propTypes /* remove-pro
   className: PropTypes.string,
   /**
    * Callback fired when a mark is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {ChartsActivationEvent<SVGElement>} event The event source of the callback.
    * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
    */
   onItemClick: PropTypes.func,

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.types.d.mts

@@ -1,6 +1,7 @@
 import type * as React from 'react';
 import type { RadarClasses } from "../radarClasses.mjs";
 import type { RadarItemIdentifier } from "../../models/seriesType/radar.mjs";
+import type { ChartsActivationEvent } from "../../models/events.mjs";
 interface CommonRadarSeriesPlotProps {
   /**
    * A CSS class name applied to the root element.
@@ -34,17 +35,17 @@ type RadarClickIdentifier = Required<RadarItemIdentifier>;
 export interface RadarSeriesMarksProps extends CommonRadarSeriesPlotProps, React.SVGAttributes<SVGCircleElement> {
   /**
    * Callback fired when a mark is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {ChartsActivationEvent<SVGElement>} event The event source of the callback.
    * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void;
+  onItemClick?: (event: ChartsActivationEvent<SVGElement>, radarItemIdentifier: RadarClickIdentifier) => void;
 }
 export interface RadarSeriesAreaProps extends CommonRadarSeriesPlotProps, React.SVGAttributes<SVGPathElement> {
   /**
    * Callback fired when an area is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {ChartsActivationEvent<SVGElement>} event The event source of the callback.
    * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void;
+  onItemClick?: (event: ChartsActivationEvent<SVGElement>, radarItemIdentifier: RadarClickIdentifier) => void;
 }
 export {};

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.types.d.ts

@@ -1,6 +1,7 @@
 import type * as React from 'react';
 import type { RadarClasses } from "../radarClasses.js";
 import type { RadarItemIdentifier } from "../../models/seriesType/radar.js";
+import type { ChartsActivationEvent } from "../../models/events.js";
 interface CommonRadarSeriesPlotProps {
   /**
    * A CSS class name applied to the root element.
@@ -34,17 +35,17 @@ type RadarClickIdentifier = Required<RadarItemIdentifier>;
 export interface RadarSeriesMarksProps extends CommonRadarSeriesPlotProps, React.SVGAttributes<SVGCircleElement> {
   /**
    * Callback fired when a mark is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {ChartsActivationEvent<SVGElement>} event The event source of the callback.
    * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void;
+  onItemClick?: (event: ChartsActivationEvent<SVGElement>, radarItemIdentifier: RadarClickIdentifier) => void;
 }
 export interface RadarSeriesAreaProps extends CommonRadarSeriesPlotProps, React.SVGAttributes<SVGPathElement> {
   /**
    * Callback fired when an area is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {ChartsActivationEvent<SVGElement>} event The event source of the callback.
    * @param {RadarItemIdentifier} radarItemIdentifier The radar item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, radarItemIdentifier: RadarClickIdentifier) => void;
+  onItemClick?: (event: ChartsActivationEvent<SVGElement>, radarItemIdentifier: RadarClickIdentifier) => void;
 }
 export {};

package/RadarChart/RadarSeriesPlot/useRegisterRadarItemActivation.d.mts

@@ -0,0 +1,15 @@
+import type { SeriesId } from "../../models/seriesType/common.mjs";
+import type { RadarItemIdentifier } from "../../models/seriesType/radar.mjs";
+import type { ChartsActivationEvent } from "../../models/events.mjs";
+/**
+ * Priorities matching the pointer hit-testing order: marks sit above areas.
+ * The topmost callback a pointer would reach is the one keyboard activation fires.
+ */
+export declare const RADAR_ACTIVATION_PRIORITY: {
+  mark: number;
+  area: number;
+};
+/**
+ * Registers <kbd>Enter</kbd>/<kbd>Space</kbd> activation of the focused radar item.
+ */
+export declare function useRegisterRadarItemActivation(seriesId: SeriesId | undefined, onItemClick: ((event: ChartsActivationEvent<SVGElement>, radarItemIdentifier: Required<RadarItemIdentifier>) => void) | undefined, priority: number): void;

package/RadarChart/RadarSeriesPlot/useRegisterRadarItemActivation.d.ts

@@ -0,0 +1,15 @@
+import type { SeriesId } from "../../models/seriesType/common.js";
+import type { RadarItemIdentifier } from "../../models/seriesType/radar.js";
+import type { ChartsActivationEvent } from "../../models/events.js";
+/**
+ * Priorities matching the pointer hit-testing order: marks sit above areas.
+ * The topmost callback a pointer would reach is the one keyboard activation fires.
+ */
+export declare const RADAR_ACTIVATION_PRIORITY: {
+  mark: number;
+  area: number;
+};
+/**
+ * Registers <kbd>Enter</kbd>/<kbd>Space</kbd> activation of the focused radar item.
+ */
+export declare function useRegisterRadarItemActivation(seriesId: SeriesId | undefined, onItemClick: ((event: ChartsActivationEvent<SVGElement>, radarItemIdentifier: Required<RadarItemIdentifier>) => void) | undefined, priority: number): void;

package/RadarChart/RadarSeriesPlot/useRegisterRadarItemActivation.js

@@ -0,0 +1,32 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RADAR_ACTIVATION_PRIORITY = void 0;
+exports.useRegisterRadarItemActivation = useRegisterRadarItemActivation;
+var _useRegisterItemActivation = require("../../internals/useRegisterItemActivation");
+/**
+ * Priorities matching the pointer hit-testing order: marks sit above areas.
+ * The topmost callback a pointer would reach is the one keyboard activation fires.
+ */
+const RADAR_ACTIVATION_PRIORITY = exports.RADAR_ACTIVATION_PRIORITY = {
+  mark: 2,
+  area: 1
+};
+
+/**
+ * Registers <kbd>Enter</kbd>/<kbd>Space</kbd> activation of the focused radar item.
+ */
+function useRegisterRadarItemActivation(seriesId, onItemClick, priority) {
+  (0, _useRegisterItemActivation.useRegisterItemActivation)({
+    type: 'radar',
+    seriesId,
+    priority
+  }, onItemClick && ((event, item) => onItemClick(event, {
+    type: 'radar',
+    seriesId: item.seriesId,
+    dataIndex: item.dataIndex
+  })));
+}

package/RadarChart/RadarSeriesPlot/useRegisterRadarItemActivation.mjs

@@ -0,0 +1,26 @@
+'use client';
+
+import { useRegisterItemActivation } from "../../internals/useRegisterItemActivation.mjs";
+/**
+ * Priorities matching the pointer hit-testing order: marks sit above areas.
+ * The topmost callback a pointer would reach is the one keyboard activation fires.
+ */
+export const RADAR_ACTIVATION_PRIORITY = {
+  mark: 2,
+  area: 1
+};
+
+/**
+ * Registers <kbd>Enter</kbd>/<kbd>Space</kbd> activation of the focused radar item.
+ */
+export function useRegisterRadarItemActivation(seriesId, onItemClick, priority) {
+  useRegisterItemActivation({
+    type: 'radar',
+    seriesId,
+    priority
+  }, onItemClick && ((event, item) => onItemClick(event, {
+    type: 'radar',
+    seriesId: item.seriesId,
+    dataIndex: item.dataIndex
+  })));
+}

package/RadarChart/useRadarChartProps.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useRadarChartProps = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _RadarChart = require("./RadarChart.plugins");
-const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "className"];
+const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "experimentalFeatures", "className"];
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -41,6 +41,7 @@ const useRadarChartProps = props => {
       onAreaClick,
       onMarkClick,
       disableKeyboardNavigation,
+      experimentalFeatures,
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -58,6 +59,7 @@ const useRadarChartProps = props => {
     skipAnimation,
     onAxisClick,
     disableKeyboardNavigation,
+    experimentalFeatures,
     plugins: _RadarChart.RADAR_PLUGINS
   };
   const overlayProps = {
@@ -71,6 +73,8 @@ const useRadarChartProps = props => {
   };
   const chartsWrapperProps = {
     sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction,
     hideLegend: props.hideLegend ?? false,
     className
   };

package/RadarChart/useRadarChartProps.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "className"];
+const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "experimentalFeatures", "className"];
 import { RADAR_PLUGINS } from "./RadarChart.plugins.mjs";
 /**
  * A helper function that extracts RadarChartProps from the input props
@@ -35,6 +35,7 @@ export const useRadarChartProps = props => {
       onAreaClick,
       onMarkClick,
       disableKeyboardNavigation,
+      experimentalFeatures,
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -52,6 +53,7 @@ export const useRadarChartProps = props => {
     skipAnimation,
     onAxisClick,
     disableKeyboardNavigation,
+    experimentalFeatures,
     plugins: RADAR_PLUGINS
   };
   const overlayProps = {
@@ -65,6 +67,8 @@ export const useRadarChartProps = props => {
   };
   const chartsWrapperProps = {
     sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction,
     hideLegend: props.hideLegend ?? false,
     className
   };

package/ScatterChart/Scatter.d.mts

@@ -5,6 +5,7 @@ import type { D3Scale } from "../models/axis.mjs";
 import type { ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
 import type { ScatterSizeGetter } from "./seriesConfig/getMarkerSize.mjs";
 import type { ScatterClasses } from "./scatterClasses.mjs";
+import type { ChartsActivationEvent } from "../models/events.mjs";
 /**
  * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
  */
@@ -25,10 +26,10 @@ export interface ScatterProps {
   sizeGetter: ScatterSizeGetter;
   /**
    * Callback fired when clicking on a scatter item.
-   * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent<SVGElement>} event Event recorded on the `<svg/>` element.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void;
+  onItemClick?: (event: ChartsActivationEvent<SVGElement>, scatterItemIdentifier: ScatterItemIdentifier) => void;
   classes?: Partial<ScatterClasses>;
   slots?: ScatterSlots;
   slotProps?: ScatterSlotProps;

package/ScatterChart/Scatter.d.ts

@@ -5,6 +5,7 @@ import type { D3Scale } from "../models/axis.js";
 import type { ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 import type { ScatterSizeGetter } from "./seriesConfig/getMarkerSize.js";
 import type { ScatterClasses } from "./scatterClasses.js";
+import type { ChartsActivationEvent } from "../models/events.js";
 /**
  * @deprecated The `Scatter` component is an internal implementation detail of `ScatterPlot` and will be removed from the public API in v10. Use `ScatterPlot` instead.
  */
@@ -25,10 +26,10 @@ export interface ScatterProps {
   sizeGetter: ScatterSizeGetter;
   /**
    * Callback fired when clicking on a scatter item.
-   * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent<SVGElement>} event Event recorded on the `<svg/>` element.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void;
+  onItemClick?: (event: ChartsActivationEvent<SVGElement>, scatterItemIdentifier: ScatterItemIdentifier) => void;
   classes?: Partial<ScatterClasses>;
   slots?: ScatterSlots;
   slotProps?: ScatterSlotProps;

package/ScatterChart/Scatter.js

@@ -19,6 +19,7 @@ var _useItemHighlightStateGetter = require("../hooks/useItemHighlightStateGetter
 var _useChartClosestPoint = require("../internals/plugins/featurePlugins/useChartClosestPoint");
 var _ScatterMarker = require("./ScatterMarker");
 var _scatterClasses = require("./scatterClasses");
+var _useRegisterItemActivation = require("../internals/useRegisterItemActivation");
 var _useScatterPlotData = require("./useScatterPlotData");
 var _ChartsProvider = require("../context/ChartsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -77,6 +78,14 @@ function Scatter(props) {
   const classes = (0, _scatterClasses.useUtilityClasses)({
     classes: inClasses
   });
+  (0, _useRegisterItemActivation.useRegisterItemActivation)({
+    type: 'scatter',
+    seriesId: series.id
+  }, onItemClick && ((event, item) => onItemClick(event, {
+    type: 'scatter',
+    seriesId: series.id,
+    dataIndex: item.dataIndex
+  })));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     "data-series": series.id,
     className: classes.series,
@@ -119,7 +128,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes /* remove-proptypes */
   colorGetter: _propTypes.default.func.isRequired,
   /**
    * Callback fired when clicking on a scatter item.
-   * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent<SVGElement>} event Event recorded on the `<svg/>` element.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: _propTypes.default.func,

package/ScatterChart/Scatter.mjs

@@ -13,6 +13,7 @@ import { useItemHighlightStateGetter } from "../hooks/useItemHighlightStateGette
 import { selectorChartsIsVoronoiEnabled } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.mjs";
 import { ScatterMarker } from "./ScatterMarker.mjs";
 import { useUtilityClasses } from "./scatterClasses.mjs";
+import { useRegisterItemActivation } from "../internals/useRegisterItemActivation.mjs";
 import { useScatterPlotData } from "./useScatterPlotData.mjs";
 import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 
@@ -73,6 +74,14 @@ function Scatter(props) {
   const classes = useUtilityClasses({
     classes: inClasses
   });
+  useRegisterItemActivation({
+    type: 'scatter',
+    seriesId: series.id
+  }, onItemClick && ((event, item) => onItemClick(event, {
+    type: 'scatter',
+    seriesId: series.id,
+    dataIndex: item.dataIndex
+  })));
   return /*#__PURE__*/_jsx("g", {
     "data-series": series.id,
     className: classes.series,
@@ -115,7 +124,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes /* remove-proptypes */
   colorGetter: PropTypes.func.isRequired,
   /**
    * Callback fired when clicking on a scatter item.
-   * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent<SVGElement>} event Event recorded on the `<svg/>` element.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: PropTypes.func,