@mui/x-charts 9.10.1 → 9.11.0

package/ScatterChart/ScatterChart.js

@@ -149,6 +149,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
    * Options to enable features planned for the next major.
    */
   experimentalFeatures: _propTypes.default.shape({
+    keyboardActivation: _propTypes.default.bool,
     progressiveRendering: _propTypes.default.bool
   }),
   /**

package/ScatterChart/ScatterChart.mjs

@@ -142,6 +142,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
    * Options to enable features planned for the next major.
    */
   experimentalFeatures: PropTypes.shape({
+    keyboardActivation: PropTypes.bool,
     progressiveRendering: PropTypes.bool
   }),
   /**

package/ScatterChart/async/ScatterAsync.js

@@ -15,6 +15,7 @@ var _useStore = require("../../internals/store/useStore");
 var _useProgressiveRendering = require("../../internals/plugins/featurePlugins/useProgressiveRendering");
 var _useChartCartesianAxis = require("../../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _scatterRenderData = require("./scatterRenderData.selectors");
+var _useRegisterItemActivation = require("../../internals/useRegisterItemActivation");
 var _jsxRuntime = require("react/jsx-runtime");
 /** Per-series points sampled while interacting; the rest fills in on settle. */const INTERACTION_POINT_BUDGET = 2000;
 
@@ -57,6 +58,14 @@ function ScatterAsync(props) {
   // `count` (total points) is constant across zoom/pan, so the sampled set is
   // stable while panning.
   const interactionStep = getInteractionStep(count, nBatches, INTERACTION_POINT_BUDGET);
+  (0, _useRegisterItemActivation.useRegisterItemActivation)({
+    type: 'scatter',
+    seriesId: series.id
+  }, onItemClick && ((event, item) => onItemClick(event, {
+    type: 'scatter',
+    seriesId: series.id,
+    dataIndex: item.dataIndex
+  })));
   const batches = [];
   for (let b = 0; b < mountedBatches; b += 1) {
     batches.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterAsyncBatch.ScatterAsyncBatch, {

package/ScatterChart/async/ScatterAsync.mjs

@@ -7,6 +7,7 @@ import { useStore } from "../../internals/store/useStore.mjs";
 import { selectorProgressiveBatchSize, selectorProgressiveSeriesRevealedBatches } from "../../internals/plugins/featurePlugins/useProgressiveRendering/index.mjs";
 import { selectorChartZoomIsInteracting } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
 import { selectorScatterSeriesRenderData } from "./scatterRenderData.selectors.mjs";
+import { useRegisterItemActivation } from "../../internals/useRegisterItemActivation.mjs";
 
 /** Per-series points sampled while interacting; the rest fills in on settle. */
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -51,6 +52,14 @@ function ScatterAsync(props) {
   // `count` (total points) is constant across zoom/pan, so the sampled set is
   // stable while panning.
   const interactionStep = getInteractionStep(count, nBatches, INTERACTION_POINT_BUDGET);
+  useRegisterItemActivation({
+    type: 'scatter',
+    seriesId: series.id
+  }, onItemClick && ((event, item) => onItemClick(event, {
+    type: 'scatter',
+    seriesId: series.id,
+    dataIndex: item.dataIndex
+  })));
   const batches = [];
   for (let b = 0; b < mountedBatches; b += 1) {
     batches.push(/*#__PURE__*/_jsx(ScatterAsyncBatch, {

package/SparkLineChart/SparkLineChart.js

@@ -256,6 +256,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
    */
   experimentalFeatures: _propTypes.default.shape({
     enablePositionBasedPointerInteraction: _propTypes.default.bool,
+    keyboardActivation: _propTypes.default.bool,
     progressiveRendering: _propTypes.default.bool
   }),
   /**
@@ -478,7 +479,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
   /**
    * Callback fired when clicking close to an item.
    * This is only available for scatter plot for now.
-   * @param {MouseEvent} event Mouse event caught at the svg level
+   * @param {ChartsActivationEvent} event Event caught at the svg level
    * @param {ScatterItemIdentifier} scatterItemIdentifier Identify which item got clicked
    */
   onItemClick: _propTypes.default.func,

package/SparkLineChart/SparkLineChart.mjs

@@ -249,6 +249,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
    */
   experimentalFeatures: PropTypes.shape({
     enablePositionBasedPointerInteraction: PropTypes.bool,
+    keyboardActivation: PropTypes.bool,
     progressiveRendering: PropTypes.bool
   }),
   /**
@@ -471,7 +472,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
   /**
    * Callback fired when clicking close to an item.
    * This is only available for scatter plot for now.
-   * @param {MouseEvent} event Mouse event caught at the svg level
+   * @param {ChartsActivationEvent} event Event caught at the svg level
    * @param {ScatterItemIdentifier} scatterItemIdentifier Identify which item got clicked
    */
   onItemClick: PropTypes.func,

package/Toolbar/ToolbarButton.js

@@ -16,7 +16,7 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _ToolbarContext = require("@mui/x-internals/ToolbarContext");
 var _ChartsSlotsContext = require("../context/ChartsSlotsContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"],
+const _excluded = ["render", "onKeyDown", "onFocus", "onBlur", "disabled", "aria-disabled"],
   _excluded2 = ["tabIndex"];
 const ToolbarButton = exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButton(props, ref) {
   const {

package/Toolbar/ToolbarButton.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"],
+const _excluded = ["render", "onKeyDown", "onFocus", "onBlur", "disabled", "aria-disabled"],
   _excluded2 = ["tabIndex"];
 import PropTypes from 'prop-types';
 import * as React from 'react';

package/hooks/useFocusedItem.d.mts

@@ -1,4 +1,4 @@
 /**
  * Get the focused item from keyboard navigation.
  */
-export declare function useFocusedItem(): import("../index.mjs").FocusedItemIdentifier<keyof import("../internals/index.mjs").ChartsSeriesConfig> | null;
+export declare function useFocusedItem(): import("@mui/x-charts/models").FocusedItemIdentifier<keyof import("../internals/index.mjs").ChartsSeriesConfig> | null;

package/hooks/useFocusedItem.d.ts

@@ -1,4 +1,4 @@
 /**
  * Get the focused item from keyboard navigation.
  */
-export declare function useFocusedItem(): import("../index.js").FocusedItemIdentifier<keyof import("../internals/index.js").ChartsSeriesConfig> | null;
+export declare function useFocusedItem(): import("@mui/x-charts/models").FocusedItemIdentifier<keyof import("../internals/index.js").ChartsSeriesConfig> | null;

package/hooks/useItemHighlightStateGetter.d.mts

@@ -6,4 +6,4 @@ import type { ChartSeriesType } from "../models/seriesType/config.mjs";
  *
  * @returns {(item: HighlightItemIdentifierWithType | null) => HighlightState} callback to get the highlight state of an item.
  */
-export declare function useItemHighlightStateGetter<SeriesType extends ChartSeriesType>(): (item: import("../index.mjs").HighlightItemIdentifierWithType<import("../internals/index.mjs").ComposableChartSeriesType<keyof import("../internals/index.mjs").ChartsSeriesConfig>> | null) => import("./useItemHighlightState.mjs").HighlightState;
+export declare function useItemHighlightStateGetter<SeriesType extends ChartSeriesType>(): (item: import("@mui/x-charts/models").HighlightItemIdentifierWithType<import("../internals/index.mjs").ComposableChartSeriesType<keyof import("../internals/index.mjs").ChartsSeriesConfig>> | null) => import("./useItemHighlightState.mjs").HighlightState;

package/hooks/useItemHighlightStateGetter.d.ts

@@ -6,4 +6,4 @@ import type { ChartSeriesType } from "../models/seriesType/config.js";
  *
  * @returns {(item: HighlightItemIdentifierWithType | null) => HighlightState} callback to get the highlight state of an item.
  */
-export declare function useItemHighlightStateGetter<SeriesType extends ChartSeriesType>(): (item: import("../index.js").HighlightItemIdentifierWithType<import("../internals/index.js").ComposableChartSeriesType<keyof import("../internals/index.js").ChartsSeriesConfig>> | null) => import("./useItemHighlightState.js").HighlightState;
+export declare function useItemHighlightStateGetter<SeriesType extends ChartSeriesType>(): (item: import("@mui/x-charts/models").HighlightItemIdentifierWithType<import("../internals/index.js").ComposableChartSeriesType<keyof import("../internals/index.js").ChartsSeriesConfig>> | null) => import("./useItemHighlightState.js").HighlightState;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.10.1
+ * @mui/x-charts v9.11.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.10.1
+ * @mui/x-charts v9.11.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/createCommonKeyboardFocusHandler.d.mts

@@ -4,7 +4,7 @@ import type { ChartSeriesType } from "../models/seriesType/config.mjs";
  */
 export declare function createCommonKeyboardFocusHandler<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = SeriesType>(outSeriesTypes: Set<SeriesType>, allowCycles?: boolean, useCurrentSeriesMaxLength?: boolean): (event: KeyboardEvent) => ((currentItem: {
   type: Exclude<ChartSeriesType, 'sankey' | 'heatmap'>;
-  seriesId: import("../index.mjs").SeriesId;
+  seriesId: import("@mui/x-charts/models").SeriesId;
   dataIndex?: number;
 } | null, state: {
   series: {
@@ -14,6 +14,6 @@ export declare function createCommonKeyboardFocusHandler<SeriesType extends Excl
   };
 }) => {
   type: SeriesType;
-  seriesId: import("../index.mjs").SeriesId;
+  seriesId: import("@mui/x-charts/models").SeriesId;
   dataIndex: number;
 } | null) | null;

package/internals/createCommonKeyboardFocusHandler.d.ts

@@ -4,7 +4,7 @@ import type { ChartSeriesType } from "../models/seriesType/config.js";
  */
 export declare function createCommonKeyboardFocusHandler<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = SeriesType>(outSeriesTypes: Set<SeriesType>, allowCycles?: boolean, useCurrentSeriesMaxLength?: boolean): (event: KeyboardEvent) => ((currentItem: {
   type: Exclude<ChartSeriesType, 'sankey' | 'heatmap'>;
-  seriesId: import("../index.js").SeriesId;
+  seriesId: import("@mui/x-charts/models").SeriesId;
   dataIndex?: number;
 } | null, state: {
   series: {
@@ -14,6 +14,6 @@ export declare function createCommonKeyboardFocusHandler<SeriesType extends Excl
   };
 }) => {
   type: SeriesType;
-  seriesId: import("../index.js").SeriesId;
+  seriesId: import("@mui/x-charts/models").SeriesId;
   dataIndex: number;
 } | null) | null;

package/internals/index.d.mts

@@ -76,6 +76,7 @@ export * from "./scaleGuards.mjs";
 export * from "./findMinMax.mjs";
 export * from "./commonNextFocusItem.mjs";
 export { createCommonKeyboardFocusHandler } from "./createCommonKeyboardFocusHandler.mjs";
+export { useRegisterItemActivation } from "./useRegisterItemActivation.mjs";
 export { getSeriesColorFn } from "./getSeriesColorFn.mjs";
 export { resolveColorProcessor } from "./resolveColorProcessor.mjs";
 export { processLineLikeSeries } from "./processLineLikeSeries.mjs";

package/internals/index.d.ts

@@ -76,6 +76,7 @@ export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
 export * from "./commonNextFocusItem.js";
 export { createCommonKeyboardFocusHandler } from "./createCommonKeyboardFocusHandler.js";
+export { useRegisterItemActivation } from "./useRegisterItemActivation.js";
 export { getSeriesColorFn } from "./getSeriesColorFn.js";
 export { resolveColorProcessor } from "./resolveColorProcessor.js";
 export { processLineLikeSeries } from "./processLineLikeSeries.js";

package/internals/index.js

@@ -23,6 +23,7 @@ var _exportNames = {
   getCartesianAxisIndex: true,
   getRotationAxisIndex: true,
   createCommonKeyboardFocusHandler: true,
+  useRegisterItemActivation: true,
   getSeriesColorFn: true,
   resolveColorProcessor: true,
   processLineLikeSeries: true,
@@ -186,6 +187,12 @@ Object.defineProperty(exports, "useRadarChartProps", {
     return _useRadarChartProps.useRadarChartProps;
   }
 });
+Object.defineProperty(exports, "useRegisterItemActivation", {
+  enumerable: true,
+  get: function () {
+    return _useRegisterItemActivation.useRegisterItemActivation;
+  }
+});
 Object.defineProperty(exports, "useRegisterPointerInteractions", {
   enumerable: true,
   get: function () {
@@ -953,6 +960,7 @@ Object.keys(_commonNextFocusItem).forEach(function (key) {
   });
 });
 var _createCommonKeyboardFocusHandler = require("./createCommonKeyboardFocusHandler");
+var _useRegisterItemActivation = require("./useRegisterItemActivation");
 var _getSeriesColorFn = require("./getSeriesColorFn");
 var _resolveColorProcessor = require("./resolveColorProcessor");
 var _processLineLikeSeries = require("./processLineLikeSeries");

package/internals/index.mjs

@@ -84,6 +84,7 @@ export * from "./scaleGuards.mjs";
 export * from "./findMinMax.mjs";
 export * from "./commonNextFocusItem.mjs";
 export { createCommonKeyboardFocusHandler } from "./createCommonKeyboardFocusHandler.mjs";
+export { useRegisterItemActivation } from "./useRegisterItemActivation.mjs";
 export { getSeriesColorFn } from "./getSeriesColorFn.mjs";
 export { resolveColorProcessor } from "./resolveColorProcessor.mjs";
 export { processLineLikeSeries } from "./processLineLikeSeries.mjs";

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.d.mts

@@ -1,5 +1,12 @@
 import type { ChartPluginSignature } from "../../models/index.mjs";
 import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
+interface CommonExperimentalFeatures {
+  /**
+   * Enables activating the keyboard-focused item with <kbd>Enter</kbd> or <kbd>Space</kbd>,
+   * firing `onItemClick` and `onAxisClick` as a pointer click would.
+   */
+  keyboardActivation?: boolean;
+}
 interface LineExperimentalFeatures {
   /**
    * Enables pointer-based interaction detection for line and area series.
@@ -27,7 +34,7 @@ interface ScatterExperimentalFeatures {
    */
   progressiveRendering?: boolean;
 }
-export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = ('line' extends SeriesType ? LineExperimentalFeatures : {}) & ('scatter' extends SeriesType ? ScatterExperimentalFeatures : {});
+export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = CommonExperimentalFeatures & ('line' extends SeriesType ? LineExperimentalFeatures : {}) & ('scatter' extends SeriesType ? ScatterExperimentalFeatures : {});
 export interface UseChartExperimentalFeaturesParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * Options to enable features planned for the next major.

package/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.d.ts

@@ -1,5 +1,12 @@
 import type { ChartPluginSignature } from "../../models/index.js";
 import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+interface CommonExperimentalFeatures {
+  /**
+   * Enables activating the keyboard-focused item with <kbd>Enter</kbd> or <kbd>Space</kbd>,
+   * firing `onItemClick` and `onAxisClick` as a pointer click would.
+   */
+  keyboardActivation?: boolean;
+}
 interface LineExperimentalFeatures {
   /**
    * Enables pointer-based interaction detection for line and area series.
@@ -27,7 +34,7 @@ interface ScatterExperimentalFeatures {
    */
   progressiveRendering?: boolean;
 }
-export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = ('line' extends SeriesType ? LineExperimentalFeatures : {}) & ('scatter' extends SeriesType ? ScatterExperimentalFeatures : {});
+export type ChartExperimentalFeatures<SeriesType extends ChartSeriesType = ChartSeriesType> = CommonExperimentalFeatures & ('line' extends SeriesType ? LineExperimentalFeatures : {}) & ('scatter' extends SeriesType ? ScatterExperimentalFeatures : {});
 export interface UseChartExperimentalFeaturesParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * Options to enable features planned for the next major.

package/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.js

@@ -32,7 +32,10 @@ const useChartInteractionListener = ({
           preventIf: ['pan', 'zoomPinch', 'zoomPan']
         }), new _core.TapGesture({
           name: 'tap',
-          preventIf: ['pan', 'zoomPinch', 'zoomPan']
+          // `pan` is intentionally omitted: it has `threshold: 0`, so any pointer drift during a
+          // click activates it and would cancel the tap, discarding the click. The tap's own
+          // `maxDistance` already discriminates a click from a drag. See https://github.com/mui/mui-x/issues/20364
+          preventIf: ['zoomPinch', 'zoomPan']
         }), new _core.PressGesture({
           name: 'quickPress',
           duration: 50
@@ -51,8 +54,13 @@ const useChartInteractionListener = ({
     }
     gestureManager.registerElement(['pan', 'move', 'tap', 'quickPress', 'brush'], svg);
     return () => {
-      // Cleanup gesture manager
-      gestureManager.unregisterAllGestures(svg);
+      // Cleanup gesture manager. `destroy()` unregisters every element's gestures like
+      // `unregisterAllGestures()` does, and is additionally the only path that removes the
+      // document/window listeners owned by the internal PointerManager and KeyboardManager.
+      gestureManager.destroy();
+      // The manager is unusable once destroyed, so drop it and let the next mount build a
+      // fresh one. Reusing a destroyed manager loses its gesture templates.
+      gestureManagerRef.current = null;
     };
   }, [chartsLayerContainerRef, gestureManagerRef]);
   const addInteractionListener = React.useCallback((interaction, callback, options) => {

package/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.mjs

@@ -26,7 +26,10 @@ export const useChartInteractionListener = ({
           preventIf: ['pan', 'zoomPinch', 'zoomPan']
         }), new TapGesture({
           name: 'tap',
-          preventIf: ['pan', 'zoomPinch', 'zoomPan']
+          // `pan` is intentionally omitted: it has `threshold: 0`, so any pointer drift during a
+          // click activates it and would cancel the tap, discarding the click. The tap's own
+          // `maxDistance` already discriminates a click from a drag. See https://github.com/mui/mui-x/issues/20364
+          preventIf: ['zoomPinch', 'zoomPan']
         }), new PressGesture({
           name: 'quickPress',
           duration: 50
@@ -45,8 +48,13 @@ export const useChartInteractionListener = ({
     }
     gestureManager.registerElement(['pan', 'move', 'tap', 'quickPress', 'brush'], svg);
     return () => {
-      // Cleanup gesture manager
-      gestureManager.unregisterAllGestures(svg);
+      // Cleanup gesture manager. `destroy()` unregisters every element's gestures like
+      // `unregisterAllGestures()` does, and is additionally the only path that removes the
+      // document/window listeners owned by the internal PointerManager and KeyboardManager.
+      gestureManager.destroy();
+      // The manager is unusable once destroyed, so drop it and let the next mount build a
+      // fresh one. Reusing a destroyed manager loses its gesture templates.
+      gestureManagerRef.current = null;
     };
   }, [chartsLayerContainerRef, gestureManagerRef]);
   const addInteractionListener = React.useCallback((interaction, callback, options) => {

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.mts

@@ -38,6 +38,7 @@ export declare const selectorChartSeriesConfigGetter: (args_0: import("../useCha
   identifierSerializer: import("../useChartSeriesConfig/index.mjs").IdentifierSerializer<"pie">;
   identifierCleaner: import("../useChartSeriesConfig/index.mjs").IdentifierCleaner<"pie">;
   getItemAtPosition?: import("../useChartSeriesConfig/index.mjs").GetItemAtPosition<"pie"> | undefined;
+  getItemWithData?: import("../useChartSeriesConfig/index.mjs").GetItemWithData<"pie"> | undefined;
   sampler?: import("../../../index.mjs").SamplingStrategy<"pie", unknown> | undefined;
   descriptionGetter: import("../useChartSeriesConfig/index.mjs").DescriptionGetter<"pie">;
   isHighlightedCreator: import("../../featurePlugins/useChartHighlight/highlightCreator.types.mjs").HighlightCreator<"pie">;

package/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.ts

@@ -38,6 +38,7 @@ export declare const selectorChartSeriesConfigGetter: (args_0: import("../useCha
   identifierSerializer: import("../useChartSeriesConfig/index.js").IdentifierSerializer<"pie">;
   identifierCleaner: import("../useChartSeriesConfig/index.js").IdentifierCleaner<"pie">;
   getItemAtPosition?: import("../useChartSeriesConfig/index.js").GetItemAtPosition<"pie"> | undefined;
+  getItemWithData?: import("../useChartSeriesConfig/index.js").GetItemWithData<"pie"> | undefined;
   sampler?: import("../../../index.js").SamplingStrategy<"pie", unknown> | undefined;
   descriptionGetter: import("../useChartSeriesConfig/index.js").DescriptionGetter<"pie">;
   isHighlightedCreator: import("../../featurePlugins/useChartHighlight/highlightCreator.types.js").HighlightCreator<"pie">;

package/internals/plugins/corePlugins/useChartSeriesConfig/types/getItemWithData.types.d.mts

@@ -0,0 +1,12 @@
+import type { SeriesItemIdentifierWithType, FocusedItemIdentifier } from "../../../../../models/seriesType/index.mjs";
+import type { ChartState } from "../../../models/chart.mjs";
+import type { ChartSeriesType } from "../../../../../models/seriesType/config.mjs";
+import type { ChartSeriesTypeRequiredPlugins } from "./seriesConfig.types.mjs";
+/**
+ * Completes an item identifier with the data a pointer click would provide, so keyboard activation
+ * emits the same payload as `getItemAtPosition`.
+ * @param {ChartState} state The chart state.
+ * @param {FocusedItemIdentifier<SeriesType>} identifier The identifier to complete.
+ * @returns {SeriesItemIdentifierWithType<SeriesType>} The identifier with its click data.
+ */
+export type GetItemWithData<SeriesType extends ChartSeriesType> = (state: ChartState<ChartSeriesTypeRequiredPlugins<SeriesType>>, identifier: FocusedItemIdentifier<SeriesType>) => SeriesItemIdentifierWithType<SeriesType>;

package/internals/plugins/corePlugins/useChartSeriesConfig/types/getItemWithData.types.d.ts

@@ -0,0 +1,12 @@
+import type { SeriesItemIdentifierWithType, FocusedItemIdentifier } from "../../../../../models/seriesType/index.js";
+import type { ChartState } from "../../../models/chart.js";
+import type { ChartSeriesType } from "../../../../../models/seriesType/config.js";
+import type { ChartSeriesTypeRequiredPlugins } from "./seriesConfig.types.js";
+/**
+ * Completes an item identifier with the data a pointer click would provide, so keyboard activation
+ * emits the same payload as `getItemAtPosition`.
+ * @param {ChartState} state The chart state.
+ * @param {FocusedItemIdentifier<SeriesType>} identifier The identifier to complete.
+ * @returns {SeriesItemIdentifierWithType<SeriesType>} The identifier with its click data.
+ */
+export type GetItemWithData<SeriesType extends ChartSeriesType> = (state: ChartState<ChartSeriesTypeRequiredPlugins<SeriesType>>, identifier: FocusedItemIdentifier<SeriesType>) => SeriesItemIdentifierWithType<SeriesType>;

package/internals/plugins/corePlugins/useChartSeriesConfig/types/getItemWithData.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/plugins/corePlugins/useChartSeriesConfig/types/getItemWithData.types.mjs

@@ -0,0 +1 @@
+export {};

package/internals/plugins/corePlugins/useChartSeriesConfig/types/index.d.mts

@@ -11,5 +11,6 @@ export * from "./getSeriesWithDefaultValues.types.mjs";
 export * from "./identifierSerializer.types.mjs";
 export * from "./identifierCleaner.types.mjs";
 export * from "./getItemAtPosition.types.mjs";
+export * from "./getItemWithData.types.mjs";
 export * from "./descriptionGetter.types.mjs";
 export * from "./TooltipContent.types.mjs";

package/internals/plugins/corePlugins/useChartSeriesConfig/types/index.d.ts

@@ -11,5 +11,6 @@ export * from "./getSeriesWithDefaultValues.types.js";
 export * from "./identifierSerializer.types.js";
 export * from "./identifierCleaner.types.js";
 export * from "./getItemAtPosition.types.js";
+export * from "./getItemWithData.types.js";
 export * from "./descriptionGetter.types.js";
 export * from "./TooltipContent.types.js";

package/internals/plugins/corePlugins/useChartSeriesConfig/types/index.js

@@ -146,6 +146,17 @@ Object.keys(_getItemAtPosition).forEach(function (key) {
     }
   });
 });
+var _getItemWithData = require("./getItemWithData.types");
+Object.keys(_getItemWithData).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getItemWithData[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getItemWithData[key];
+    }
+  });
+});
 var _descriptionGetter = require("./descriptionGetter.types");
 Object.keys(_descriptionGetter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/plugins/corePlugins/useChartSeriesConfig/types/index.mjs

@@ -11,5 +11,6 @@ export * from "./getSeriesWithDefaultValues.types.mjs";
 export * from "./identifierSerializer.types.mjs";
 export * from "./identifierCleaner.types.mjs";
 export * from "./getItemAtPosition.types.mjs";
+export * from "./getItemWithData.types.mjs";
 export * from "./descriptionGetter.types.mjs";
 export * from "./TooltipContent.types.mjs";

package/internals/plugins/corePlugins/useChartSeriesConfig/types/seriesConfig.types.d.mts

@@ -13,6 +13,7 @@ import type { KeyboardFocusHandler } from "../../../featurePlugins/useChartKeybo
 import type { IdentifierSerializer } from "./identifierSerializer.types.mjs";
 import type { IdentifierCleaner } from "./identifierCleaner.types.mjs";
 import type { GetItemAtPosition } from "./getItemAtPosition.types.mjs";
+import type { GetItemWithData } from "./getItemWithData.types.mjs";
 import type { DescriptionGetter } from "./descriptionGetter.types.mjs";
 import type { UseChartCartesianAxisSignature } from "../../../featurePlugins/useChartCartesianAxis/index.mjs";
 import type { UseChartPolarAxisSignature } from "../../../featurePlugins/useChartPolarAxis/index.mjs";
@@ -56,6 +57,11 @@ export type ChartSeriesTypeConfig<SeriesType extends ChartSeriesType> = {
    */
   identifierCleaner: IdentifierCleaner<SeriesType>;
   getItemAtPosition?: GetItemAtPosition<SeriesType>;
+  /**
+   * Completes a focused item identifier with the data a pointer click provides.
+   * Used by keyboard activation to emit the same payload as a click.
+   */
+  getItemWithData?: GetItemWithData<SeriesType>;
   /**
    * Optional sampling strategy used to render large datasets. When set and sampling is enabled,
    * the series is reduced to a zoom-appropriate level of detail before rendering.

package/internals/plugins/corePlugins/useChartSeriesConfig/types/seriesConfig.types.d.ts

@@ -13,6 +13,7 @@ import type { KeyboardFocusHandler } from "../../../featurePlugins/useChartKeybo
 import type { IdentifierSerializer } from "./identifierSerializer.types.js";
 import type { IdentifierCleaner } from "./identifierCleaner.types.js";
 import type { GetItemAtPosition } from "./getItemAtPosition.types.js";
+import type { GetItemWithData } from "./getItemWithData.types.js";
 import type { DescriptionGetter } from "./descriptionGetter.types.js";
 import type { UseChartCartesianAxisSignature } from "../../../featurePlugins/useChartCartesianAxis/index.js";
 import type { UseChartPolarAxisSignature } from "../../../featurePlugins/useChartPolarAxis/index.js";
@@ -56,6 +57,11 @@ export type ChartSeriesTypeConfig<SeriesType extends ChartSeriesType> = {
    */
   identifierCleaner: IdentifierCleaner<SeriesType>;
   getItemAtPosition?: GetItemAtPosition<SeriesType>;
+  /**
+   * Completes a focused item identifier with the data a pointer click provides.
+   * Used by keyboard activation to emit the same payload as a click.
+   */
+  getItemWithData?: GetItemWithData<SeriesType>;
   /**
    * Optional sampling strategy used to render large datasets. When set and sampling is enabled,
    * the series is reduced to a zoom-appropriate level of detail before rendering.

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisClickPayload.d.mts

@@ -0,0 +1,21 @@
+import type { AxisId, ChartsAxisData, ChartsAxisProps } from "../../../../models/axis.mjs";
+import type { ProcessedSeries } from "../../corePlugins/useChartSeries/index.mjs";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
+import type { ComputeResult } from "./computeAxisValue.mjs";
+/**
+ * Builds the `onAxisClick` payload for a data index on a given axis.
+ * Returns `null` when the axis has no value at this index.
+ */
+export declare function getAxisClickPayload({
+  axisId,
+  dataIndex,
+  isXAxis,
+  axes,
+  processedSeries
+}: {
+  axisId: AxisId;
+  dataIndex: number;
+  isXAxis: boolean;
+  axes: ComputeResult<ChartsAxisProps>['axis'];
+  processedSeries: ProcessedSeries<ChartSeriesType>;
+}): ChartsAxisData | null;

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisClickPayload.d.ts

@@ -0,0 +1,21 @@
+import type { AxisId, ChartsAxisData, ChartsAxisProps } from "../../../../models/axis.js";
+import type { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import type { ComputeResult } from "./computeAxisValue.js";
+/**
+ * Builds the `onAxisClick` payload for a data index on a given axis.
+ * Returns `null` when the axis has no value at this index.
+ */
+export declare function getAxisClickPayload({
+  axisId,
+  dataIndex,
+  isXAxis,
+  axes,
+  processedSeries
+}: {
+  axisId: AxisId;
+  dataIndex: number;
+  isXAxis: boolean;
+  axes: ComputeResult<ChartsAxisProps>['axis'];
+  processedSeries: ProcessedSeries<ChartSeriesType>;
+}): ChartsAxisData | null;

package/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisClickPayload.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAxisClickPayload = getAxisClickPayload;
+const AXIS_CLICK_SERIES_TYPES = new Set(['bar', 'rangeBar', 'line']);
+/**
+ * Builds the `onAxisClick` payload for a data index on a given axis.
+ * Returns `null` when the axis has no value at this index.
+ */
+function getAxisClickPayload({
+  axisId,
+  dataIndex,
+  isXAxis,
+  axes,
+  processedSeries
+}) {
+  const axisValue = axes[axisId]?.data?.[dataIndex];
+  if (axisValue === undefined) {
+    return null;
+  }
+  const seriesValues = {};
+  Object.keys(processedSeries).filter(seriesType => AXIS_CLICK_SERIES_TYPES.has(seriesType)).forEach(seriesType => {
+    // @ts-ignore
+    const seriesTypeConfig = processedSeries[seriesType];
+    seriesTypeConfig?.seriesOrder.forEach(seriesId => {
+      const seriesItem = seriesTypeConfig.series[seriesId];
+      const providedXAxisId = seriesItem.xAxisId;
+      const providedYAxisId = seriesItem.yAxisId;
+      const axisKey = isXAxis ? providedXAxisId : providedYAxisId;
+      if (axisKey === undefined || axisKey === axisId) {
+        // @ts-ignore This is safe because users need to opt in to use range bar series.
+        // In that case, they should import the module augmentation from `x-charts-pro/moduleAugmentation/rangeBarOnClick`
+        // Which adds the proper type to the series data.
+        // TODO(v10): Remove this ts-ignore when we can make the breaking change to ChartsAxisData.
+        seriesValues[seriesId] = seriesItem.data[dataIndex];
+      }
+    });
+  });
+  return {
+    dataIndex,
+    axisValue,
+    seriesValues
+  };
+}