@mui/x-charts 9.10.1 → 9.11.0

package/LineChart/AreaPlot.d.mts

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import type { AreaElementProps, AreaElementSlotProps, AreaElementSlots } from "./AreaElement.mjs";
 import type { LineItemClickIdentifier } from "../models/seriesType/line.mjs";
+import type { ChartsActivationEvent } from "../models/events.mjs";
 export interface AreaPlotSlots extends AreaElementSlots {}
 export interface AreaPlotSlotProps extends AreaElementSlotProps {}
 export interface AreaPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<AreaElementProps, 'slots' | 'slotProps' | 'skipAnimation'> {
   /**
    * Callback fired when a line area item 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 {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void;
+  onItemClick?: (event: ChartsActivationEvent<SVGElement>, lineItemIdentifier: LineItemClickIdentifier) => void;
 }
 /**
  * Demos:

package/LineChart/AreaPlot.d.ts

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import type { AreaElementProps, AreaElementSlotProps, AreaElementSlots } from "./AreaElement.js";
 import type { LineItemClickIdentifier } from "../models/seriesType/line.js";
+import type { ChartsActivationEvent } from "../models/events.js";
 export interface AreaPlotSlots extends AreaElementSlots {}
 export interface AreaPlotSlotProps extends AreaElementSlotProps {}
 export interface AreaPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<AreaElementProps, 'slots' | 'slotProps' | 'skipAnimation'> {
   /**
    * Callback fired when a line area item 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 {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void;
+  onItemClick?: (event: ChartsActivationEvent<SVGElement>, lineItemIdentifier: LineItemClickIdentifier) => void;
 }
 /**
  * Demos:

package/LineChart/AreaPlot.js

@@ -67,7 +67,13 @@ function AreaPlot(props) {
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
   const classes = (0, _lineClasses.useUtilityClasses)();
-  const onAreaItemClick = (0, _useLineItemClickHandler.useLineItemClickHandler)(onItemClick);
+
+  // The area is drawn only for series that enable it, so a series without an area declines and
+  // activation falls through to the line.
+  const isAreaRendered = ({
+    seriesId
+  }) => completedData.some(series => series.seriesId === seriesId && !!series.area);
+  const onAreaItemClick = (0, _useLineItemClickHandler.useLineItemClickHandler)(onItemClick, _useLineItemClickHandler.LINE_ACTIVATION_PRIORITY.area, isAreaRendered);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaPlotRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.areaPlot, className)
   }, other, {
@@ -96,7 +102,7 @@ process.env.NODE_ENV !== "production" ? AreaPlot.propTypes /* remove-proptypes *
   // ----------------------------------------------------------------------
   /**
    * Callback fired when a line area item 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 {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
   onItemClick: _propTypes.default.func,

package/LineChart/AreaPlot.mjs

@@ -12,7 +12,7 @@ import { useSkipAnimation } from "../hooks/useSkipAnimation.mjs";
 import { useXAxes, useYAxes } from "../hooks/useAxis.mjs";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.mjs";
 import { useAreaPlotData } from "./useAreaPlotData.mjs";
-import { useLineItemClickHandler } from "./useLineItemClickHandler.mjs";
+import { LINE_ACTIVATION_PRIORITY, useLineItemClickHandler } from "./useLineItemClickHandler.mjs";
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.mjs";
 import { lineClasses, useUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -60,7 +60,13 @@ function AreaPlot(props) {
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
   const classes = useUtilityClasses();
-  const onAreaItemClick = useLineItemClickHandler(onItemClick);
+
+  // The area is drawn only for series that enable it, so a series without an area declines and
+  // activation falls through to the line.
+  const isAreaRendered = ({
+    seriesId
+  }) => completedData.some(series => series.seriesId === seriesId && !!series.area);
+  const onAreaItemClick = useLineItemClickHandler(onItemClick, LINE_ACTIVATION_PRIORITY.area, isAreaRendered);
   return /*#__PURE__*/_jsx(AreaPlotRoot, _extends({
     className: clsx(classes.areaPlot, className)
   }, other, {
@@ -89,7 +95,7 @@ process.env.NODE_ENV !== "production" ? AreaPlot.propTypes /* remove-proptypes *
   // ----------------------------------------------------------------------
   /**
    * Callback fired when a line area item 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 {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
   onItemClick: PropTypes.func,

package/LineChart/LineChart.js

@@ -145,7 +145,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes /* remove-proptypes
    * Options to enable features planned for the next major.
    */
   experimentalFeatures: _propTypes.default.shape({
-    enablePositionBasedPointerInteraction: _propTypes.default.bool
+    enablePositionBasedPointerInteraction: _propTypes.default.bool,
+    keyboardActivation: _propTypes.default.bool
   }),
   /**
    * Option to display a cartesian grid in the background.

package/LineChart/LineChart.mjs

@@ -138,7 +138,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes /* remove-proptypes
    * Options to enable features planned for the next major.
    */
   experimentalFeatures: PropTypes.shape({
-    enablePositionBasedPointerInteraction: PropTypes.bool
+    enablePositionBasedPointerInteraction: PropTypes.bool,
+    keyboardActivation: PropTypes.bool
   }),
   /**
    * Option to display a cartesian grid in the background.

package/LineChart/LinePlot.d.mts

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import type { LineElementProps, LineElementSlotProps, LineElementSlots } from "./LineElement.mjs";
 import type { LineItemClickIdentifier } from "../models/seriesType/line.mjs";
+import type { ChartsActivationEvent } from "../models/events.mjs";
 export interface LinePlotSlots extends LineElementSlots {}
 export interface LinePlotSlotProps extends LineElementSlotProps {}
 export interface LinePlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<LineElementProps, 'slots' | 'slotProps' | 'skipAnimation'> {
   /**
    * Callback fired when a line item 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 {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void;
+  onItemClick?: (event: ChartsActivationEvent<SVGElement>, lineItemIdentifier: LineItemClickIdentifier) => void;
 }
 /**
  * Demos:

package/LineChart/LinePlot.d.ts

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import type { LineElementProps, LineElementSlotProps, LineElementSlots } from "./LineElement.js";
 import type { LineItemClickIdentifier } from "../models/seriesType/line.js";
+import type { ChartsActivationEvent } from "../models/events.js";
 export interface LinePlotSlots extends LineElementSlots {}
 export interface LinePlotSlotProps extends LineElementSlotProps {}
 export interface LinePlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<LineElementProps, 'slots' | 'slotProps' | 'skipAnimation'> {
   /**
    * Callback fired when a line item 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 {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void;
+  onItemClick?: (event: ChartsActivationEvent<SVGElement>, lineItemIdentifier: LineItemClickIdentifier) => void;
 }
 /**
  * Demos:

package/LineChart/LinePlot.js

@@ -66,7 +66,7 @@ function LinePlot(props) {
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
   const classes = (0, _lineClasses.useUtilityClasses)();
-  const onLineItemClick = (0, _useLineItemClickHandler.useLineItemClickHandler)(onItemClick);
+  const onLineItemClick = (0, _useLineItemClickHandler.useLineItemClickHandler)(onItemClick, _useLineItemClickHandler.LINE_ACTIVATION_PRIORITY.line);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinePlotRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.linePlot, className)
   }, other, {
@@ -99,7 +99,7 @@ process.env.NODE_ENV !== "production" ? LinePlot.propTypes /* remove-proptypes *
   // ----------------------------------------------------------------------
   /**
    * Callback fired when a line item 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 {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
   onItemClick: _propTypes.default.func,

package/LineChart/LinePlot.mjs

@@ -12,7 +12,7 @@ import { useSkipAnimation } from "../hooks/useSkipAnimation.mjs";
 import { useXAxes, useYAxes } from "../hooks/index.mjs";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.mjs";
 import { useLinePlotData } from "./useLinePlotData.mjs";
-import { useLineItemClickHandler } from "./useLineItemClickHandler.mjs";
+import { LINE_ACTIVATION_PRIORITY, useLineItemClickHandler } from "./useLineItemClickHandler.mjs";
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.mjs";
 import { lineClasses, useUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -59,7 +59,7 @@ function LinePlot(props) {
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
   const classes = useUtilityClasses();
-  const onLineItemClick = useLineItemClickHandler(onItemClick);
+  const onLineItemClick = useLineItemClickHandler(onItemClick, LINE_ACTIVATION_PRIORITY.line);
   return /*#__PURE__*/_jsx(LinePlotRoot, _extends({
     className: clsx(classes.linePlot, className)
   }, other, {
@@ -92,7 +92,7 @@ process.env.NODE_ENV !== "production" ? LinePlot.propTypes /* remove-proptypes *
   // ----------------------------------------------------------------------
   /**
    * Callback fired when a line item 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 {LineItemClickIdentifier} lineItemIdentifier The line item identifier.
    */
   onItemClick: PropTypes.func,

package/LineChart/MarkPlot.d.mts

@@ -1,8 +1,9 @@
-import * as React from 'react';
 import type { WithDataAttributes } from '@mui/utils/types';
+import * as React from 'react';
+import type { MarkPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
+import type { ChartsActivationEvent } from "../models/events.mjs";
 import type { LineItemClickIdentifier } from "../models/seriesType/line.mjs";
 import type { MarkElementProps } from "./MarkElement.mjs";
-import type { MarkPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface MarkPlotSlots {
   mark?: React.JSXElementConstructor<MarkElementProps & MarkPropsOverrides>;
 }
@@ -22,10 +23,10 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<
   slotProps?: MarkPlotSlotProps;
   /**
    * Callback fired when a line mark item 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 {LineItemClickIdentifier} lineItemIdentifier The line mark item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void;
+  onItemClick?: (event: ChartsActivationEvent<SVGElement>, lineItemIdentifier: LineItemClickIdentifier) => void;
 }
 /**
  * Demos:

package/LineChart/MarkPlot.d.ts

@@ -1,8 +1,9 @@
-import * as React from 'react';
 import type { WithDataAttributes } from '@mui/utils/types';
+import * as React from 'react';
+import type { MarkPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
+import type { ChartsActivationEvent } from "../models/events.js";
 import type { LineItemClickIdentifier } from "../models/seriesType/line.js";
 import type { MarkElementProps } from "./MarkElement.js";
-import type { MarkPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface MarkPlotSlots {
   mark?: React.JSXElementConstructor<MarkElementProps & MarkPropsOverrides>;
 }
@@ -22,10 +23,10 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<
   slotProps?: MarkPlotSlotProps;
   /**
    * Callback fired when a line mark item 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 {LineItemClickIdentifier} lineItemIdentifier The line mark item identifier.
    */
-  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void;
+  onItemClick?: (event: ChartsActivationEvent<SVGElement>, lineItemIdentifier: LineItemClickIdentifier) => void;
 }
 /**
  * Demos:

package/LineChart/MarkPlot.js

@@ -9,19 +9,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.MarkPlot = MarkPlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _ChartsProvider = require("../context/ChartsProvider");
+var _hooks = require("../hooks");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _CircleMarkElement = require("./CircleMarkElement");
+var _lineClasses = require("./lineClasses");
 var _MarkElement = require("./MarkElement");
-var _hooks = require("../hooks");
-var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
-var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
-var _ChartsProvider = require("../context/ChartsProvider");
+var _useLineItemClickHandler = require("./useLineItemClickHandler");
 var _useMarkPlotData = require("./useMarkPlotData");
-var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "className"];
 const MarkPlotRoot = (0, _styles.styled)('g', {
@@ -76,6 +77,14 @@ function MarkPlot(props) {
     return rep;
   }, [xAxisHighlightIndexes]);
   const completedData = (0, _useMarkPlotData.useMarkPlotData)(xAxis, yAxis);
+
+  // A mark is activatable only where it is actually rendered, so a hidden mark falls through to the
+  // line, then the area, matching what a pointer would hit.
+  const isMarkRendered = ({
+    seriesId,
+    dataIndex
+  }) => completedData.some(series => series.seriesId === seriesId && !series.hidden && series.marks.some(mark => mark.index === dataIndex));
+  (0, _useLineItemClickHandler.useRegisterLineItemActivation)(onItemClick, _useLineItemClickHandler.LINE_ACTIVATION_PRIORITY.mark, isMarkRendered);
   const classes = (0, _lineClasses.useUtilityClasses)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkPlotRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.markPlot, className)
@@ -134,7 +143,7 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes /* remove-proptypes *
   // ----------------------------------------------------------------------
   /**
    * Callback fired when a line mark item 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 {LineItemClickIdentifier} lineItemIdentifier The line mark item identifier.
    */
   onItemClick: _propTypes.default.func,

package/LineChart/MarkPlot.mjs

@@ -3,19 +3,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "className"];
-import PropTypes from 'prop-types';
-import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
+import { useItemHighlightStateGetter, useXAxes, useYAxes } from "../hooks/index.mjs";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.mjs";
+import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
+import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.mjs";
 import { CircleMarkElement } from "./CircleMarkElement.mjs";
+import { useUtilityClasses } from "./lineClasses.mjs";
 import { MarkElement } from "./MarkElement.mjs";
-import { useItemHighlightStateGetter, useXAxes, useYAxes } from "../hooks/index.mjs";
-import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.mjs";
-import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
-import { useChartsContext } from "../context/ChartsProvider/index.mjs";
+import { LINE_ACTIVATION_PRIORITY, useRegisterLineItemActivation } from "./useLineItemClickHandler.mjs";
 import { useMarkPlotData } from "./useMarkPlotData.mjs";
-import { useUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MarkPlotRoot = styled('g', {
   name: 'MuiMarkPlot',
@@ -69,6 +70,14 @@ function MarkPlot(props) {
     return rep;
   }, [xAxisHighlightIndexes]);
   const completedData = useMarkPlotData(xAxis, yAxis);
+
+  // A mark is activatable only where it is actually rendered, so a hidden mark falls through to the
+  // line, then the area, matching what a pointer would hit.
+  const isMarkRendered = ({
+    seriesId,
+    dataIndex
+  }) => completedData.some(series => series.seriesId === seriesId && !series.hidden && series.marks.some(mark => mark.index === dataIndex));
+  useRegisterLineItemActivation(onItemClick, LINE_ACTIVATION_PRIORITY.mark, isMarkRendered);
   const classes = useUtilityClasses();
   return /*#__PURE__*/_jsx(MarkPlotRoot, _extends({
     className: clsx(classes.markPlot, className)
@@ -127,7 +136,7 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes /* remove-proptypes *
   // ----------------------------------------------------------------------
   /**
    * Callback fired when a line mark item 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 {LineItemClickIdentifier} lineItemIdentifier The line mark item identifier.
    */
   onItemClick: PropTypes.func,

package/LineChart/useLineItemClickHandler.d.mts

@@ -1,6 +1,25 @@
 import * as React from 'react';
 import type { LineItemClickIdentifier } from "../models/seriesType/line.mjs";
 import type { SeriesId } from "../models/seriesType/common.mjs";
+import type { ChartsActivationEvent } from "../models/events.mjs";
+/**
+ * Priorities matching the pointer hit-testing order: marks sit above lines, lines above areas.
+ * The topmost callback a pointer would reach is the one keyboard activation fires.
+ */
+export declare const LINE_ACTIVATION_PRIORITY: {
+  mark: number;
+  line: number;
+  area: number;
+};
+/**
+ * Registers <kbd>Enter</kbd>/<kbd>Space</kbd> activation of the focused line item.
+ */
+export declare function useRegisterLineItemActivation(onItemClick: ((event: ChartsActivationEvent<SVGElement>, lineItemIdentifier: LineItemClickIdentifier) => void) | undefined, priority: number,
+/**
+ * Declines items the caller does not render, so activation falls through to the next handler.
+ * Used by the mark plot: a mark that is not shown should defer to the line, then the area.
+ */
+canActivate?: (item: LineItemClickIdentifier) => boolean): void;
 /**
  * Creates a click handler for line and area paths that enriches the item
  * identifier with the `dataIndex` of the closest data point along the x-axis.
@@ -9,4 +28,9 @@ import type { SeriesId } from "../models/seriesType/common.mjs";
  * axis interaction (tooltip, highlight, `onAxisClick`). The callback is not
  * fired when the click position cannot be associated with a data point.
  */
-export declare function useLineItemClickHandler(onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void): ((event: React.MouseEvent<SVGElement, MouseEvent>, seriesId: SeriesId) => void) | undefined;
+export declare function useLineItemClickHandler(onItemClick: ((event: ChartsActivationEvent<SVGElement>, lineItemIdentifier: LineItemClickIdentifier) => void) | undefined, priority: number,
+/**
+ * Declines items the caller does not render, so activation falls through to the next handler.
+ * The area plot uses it to defer when the series has no area drawn.
+ */
+canActivate?: (item: LineItemClickIdentifier) => boolean): ((event: React.MouseEvent<SVGElement, MouseEvent>, seriesId: SeriesId) => void) | undefined;

package/LineChart/useLineItemClickHandler.d.ts

@@ -1,6 +1,25 @@
 import * as React from 'react';
 import type { LineItemClickIdentifier } from "../models/seriesType/line.js";
 import type { SeriesId } from "../models/seriesType/common.js";
+import type { ChartsActivationEvent } from "../models/events.js";
+/**
+ * Priorities matching the pointer hit-testing order: marks sit above lines, lines above areas.
+ * The topmost callback a pointer would reach is the one keyboard activation fires.
+ */
+export declare const LINE_ACTIVATION_PRIORITY: {
+  mark: number;
+  line: number;
+  area: number;
+};
+/**
+ * Registers <kbd>Enter</kbd>/<kbd>Space</kbd> activation of the focused line item.
+ */
+export declare function useRegisterLineItemActivation(onItemClick: ((event: ChartsActivationEvent<SVGElement>, lineItemIdentifier: LineItemClickIdentifier) => void) | undefined, priority: number,
+/**
+ * Declines items the caller does not render, so activation falls through to the next handler.
+ * Used by the mark plot: a mark that is not shown should defer to the line, then the area.
+ */
+canActivate?: (item: LineItemClickIdentifier) => boolean): void;
 /**
  * Creates a click handler for line and area paths that enriches the item
  * identifier with the `dataIndex` of the closest data point along the x-axis.
@@ -9,4 +28,9 @@ import type { SeriesId } from "../models/seriesType/common.js";
  * axis interaction (tooltip, highlight, `onAxisClick`). The callback is not
  * fired when the click position cannot be associated with a data point.
  */
-export declare function useLineItemClickHandler(onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemClickIdentifier) => void): ((event: React.MouseEvent<SVGElement, MouseEvent>, seriesId: SeriesId) => void) | undefined;
+export declare function useLineItemClickHandler(onItemClick: ((event: ChartsActivationEvent<SVGElement>, lineItemIdentifier: LineItemClickIdentifier) => void) | undefined, priority: number,
+/**
+ * Declines items the caller does not render, so activation falls through to the next handler.
+ * The area plot uses it to defer when the series has no area drawn.
+ */
+canActivate?: (item: LineItemClickIdentifier) => boolean): ((event: React.MouseEvent<SVGElement, MouseEvent>, seriesId: SeriesId) => void) | undefined;

package/LineChart/useLineItemClickHandler.js

@@ -5,13 +5,54 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.LINE_ACTIVATION_PRIORITY = void 0;
 exports.useLineItemClickHandler = useLineItemClickHandler;
+exports.useRegisterLineItemActivation = useRegisterLineItemActivation;
 var React = _interopRequireWildcard(require("react"));
 var _useChartsLayerContainerRef = require("../hooks/useChartsLayerContainerRef");
 var _useAxis = require("../hooks/useAxis");
 var _useLineSeries = require("../hooks/useLineSeries");
 var _getChartPoint = require("../internals/getChartPoint");
 var _getAxisValue = require("../internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue");
+var _useRegisterItemActivation = require("../internals/useRegisterItemActivation");
+/**
+ * Priorities matching the pointer hit-testing order: marks sit above lines, lines above areas.
+ * The topmost callback a pointer would reach is the one keyboard activation fires.
+ */
+const LINE_ACTIVATION_PRIORITY = exports.LINE_ACTIVATION_PRIORITY = {
+  mark: 2,
+  line: 1,
+  area: 0
+};
+
+/**
+ * Registers <kbd>Enter</kbd>/<kbd>Space</kbd> activation of the focused line item.
+ */
+function useRegisterLineItemActivation(onItemClick, priority,
+/**
+ * Declines items the caller does not render, so activation falls through to the next handler.
+ * Used by the mark plot: a mark that is not shown should defer to the line, then the area.
+ */
+canActivate) {
+  (0, _useRegisterItemActivation.useRegisterItemActivation)({
+    type: 'line',
+    priority,
+    canActivate: canActivate && (item => {
+      // The dispatcher matches the `line` type before calling this, so the item is a line item.
+      const lineItem = item;
+      return canActivate({
+        type: 'line',
+        seriesId: lineItem.seriesId,
+        dataIndex: lineItem.dataIndex
+      });
+    })
+  }, onItemClick && ((event, item) => onItemClick(event, {
+    type: 'line',
+    seriesId: item.seriesId,
+    dataIndex: item.dataIndex
+  })));
+}
+
 /**
  * Creates a click handler for line and area paths that enriches the item
  * identifier with the `dataIndex` of the closest data point along the x-axis.
@@ -20,7 +61,13 @@ var _getAxisValue = require("../internals/plugins/featurePlugins/useChartCartesi
  * axis interaction (tooltip, highlight, `onAxisClick`). The callback is not
  * fired when the click position cannot be associated with a data point.
  */
-function useLineItemClickHandler(onItemClick) {
+function useLineItemClickHandler(onItemClick, priority,
+/**
+ * Declines items the caller does not render, so activation falls through to the next handler.
+ * The area plot uses it to defer when the series has no area drawn.
+ */
+canActivate) {
+  useRegisterLineItemActivation(onItemClick, priority, canActivate);
   const chartsLayerContainerRef = (0, _useChartsLayerContainerRef.useChartsLayerContainerRef)();
   const {
     xAxis: xAxes,

package/LineChart/useLineItemClickHandler.mjs

@@ -6,6 +6,46 @@ import { useXAxes } from "../hooks/useAxis.mjs";
 import { useLineSeriesContext } from "../hooks/useLineSeries.mjs";
 import { getChartPoint } from "../internals/getChartPoint.mjs";
 import { getAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.mjs";
+import { useRegisterItemActivation } from "../internals/useRegisterItemActivation.mjs";
+
+/**
+ * Priorities matching the pointer hit-testing order: marks sit above lines, lines above areas.
+ * The topmost callback a pointer would reach is the one keyboard activation fires.
+ */
+export const LINE_ACTIVATION_PRIORITY = {
+  mark: 2,
+  line: 1,
+  area: 0
+};
+
+/**
+ * Registers <kbd>Enter</kbd>/<kbd>Space</kbd> activation of the focused line item.
+ */
+export function useRegisterLineItemActivation(onItemClick, priority,
+/**
+ * Declines items the caller does not render, so activation falls through to the next handler.
+ * Used by the mark plot: a mark that is not shown should defer to the line, then the area.
+ */
+canActivate) {
+  useRegisterItemActivation({
+    type: 'line',
+    priority,
+    canActivate: canActivate && (item => {
+      // The dispatcher matches the `line` type before calling this, so the item is a line item.
+      const lineItem = item;
+      return canActivate({
+        type: 'line',
+        seriesId: lineItem.seriesId,
+        dataIndex: lineItem.dataIndex
+      });
+    })
+  }, onItemClick && ((event, item) => onItemClick(event, {
+    type: 'line',
+    seriesId: item.seriesId,
+    dataIndex: item.dataIndex
+  })));
+}
+
 /**
  * Creates a click handler for line and area paths that enriches the item
  * identifier with the `dataIndex` of the closest data point along the x-axis.
@@ -14,7 +54,13 @@ import { getAxisIndex } from "../internals/plugins/featurePlugins/useChartCartes
  * axis interaction (tooltip, highlight, `onAxisClick`). The callback is not
  * fired when the click position cannot be associated with a data point.
  */
-export function useLineItemClickHandler(onItemClick) {
+export function useLineItemClickHandler(onItemClick, priority,
+/**
+ * Declines items the caller does not render, so activation falls through to the next handler.
+ * The area plot uses it to defer when the series has no area drawn.
+ */
+canActivate) {
+  useRegisterLineItemActivation(onItemClick, priority, canActivate);
   const chartsLayerContainerRef = useChartsLayerContainerRef();
   const {
     xAxis: xAxes,

package/PieChart/PieArcPlot.d.mts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { WithDataAttributes } from '@mui/utils/types';
 import type { PieArcProps } from "./PieArc.mjs";
 import type { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType, PieItemIdentifier } from "../models/seriesType/pie.mjs";
+import type { ChartsActivationEvent } from "../models/events.mjs";
 import type { PieArcPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface PieArcPlotSlots {
   pieArc?: React.JSXElementConstructor<PieArcProps & PieArcPropsOverrides>;
@@ -31,11 +32,11 @@ export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' |
   slotProps?: PieArcPlotSlotProps;
   /**
    * 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.
    */
-  onItemClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void;
+  onItemClick?: (event: ChartsActivationEvent<SVGPathElement>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void;
   /**
    * If `true`, animations are skipped.
    * @default false

package/PieChart/PieArcPlot.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { WithDataAttributes } from '@mui/utils/types';
 import type { PieArcProps } from "./PieArc.js";
 import type { ComputedPieRadius, DefaultizedPieSeriesType, DefaultizedPieValueType, PieItemIdentifier } from "../models/seriesType/pie.js";
+import type { ChartsActivationEvent } from "../models/events.js";
 import type { PieArcPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface PieArcPlotSlots {
   pieArc?: React.JSXElementConstructor<PieArcProps & PieArcPropsOverrides>;
@@ -31,11 +32,11 @@ export interface PieArcPlotProps extends Pick<DefaultizedPieSeriesType, 'data' |
   slotProps?: PieArcPlotSlotProps;
   /**
    * 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.
    */
-  onItemClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void;
+  onItemClick?: (event: ChartsActivationEvent<SVGPathElement>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void;
   /**
    * If `true`, animations are skipped.
    * @default false