@mui/x-charts 9.10.0 → 9.11.0

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.js

@@ -12,6 +12,8 @@ var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries.selectors");
 var _useChartSeriesConfig = require("../../corePlugins/useChartSeriesConfig");
+var _itemActivation = require("./itemActivation");
+var _useChartKeyboardNavigation = require("./useChartKeyboardNavigation.selectors");
 const useChartKeyboardNavigation = ({
   params,
   store,
@@ -20,6 +22,20 @@ const useChartKeyboardNavigation = ({
   const {
     chartsLayerContainerRef
   } = instance;
+  const activationRegistrationsRef = React.useRef(new Map());
+  const nextRegistrationIdRef = React.useRef(0);
+  const registerItemActivationHandler = React.useCallback((scope, handler) => {
+    const registrationId = nextRegistrationIdRef.current;
+    nextRegistrationIdRef.current += 1;
+    const registrations = activationRegistrationsRef.current;
+    registrations.set(registrationId, {
+      scope,
+      handler
+    });
+    return () => {
+      registrations.delete(registrationId);
+    };
+  }, []);
   React.useEffect(() => {
     const element = chartsLayerContainerRef.current;
     if (!element || params.disableKeyboardNavigation) {
@@ -31,12 +47,14 @@ const useChartKeyboardNavigation = ({
 
       // Avoid removing focus if we know it is moving to another children in the chart.
       // This avoid extra computation ot remove/add focus at each keyboard pressed when navigating in the chart.
-      if (root && next instanceof Node && !root.contains(next)) {
-        if (store.state.keyboardNavigation.isFocused) {
-          store.set('keyboardNavigation', (0, _extends2.default)({}, store.state.keyboardNavigation, {
-            isFocused: false
-          }));
-        }
+      // A null relatedTarget means focus left to a non-focusable element (clicking outside), so focus is removed.
+      if (root && next !== null && root.contains(next)) {
+        return;
+      }
+      if (store.state.keyboardNavigation.isFocused) {
+        store.set('keyboardNavigation', (0, _extends2.default)({}, store.state.keyboardNavigation, {
+          isFocused: false
+        }));
       }
     }
     function restoreFocus() {
@@ -56,6 +74,22 @@ const useChartKeyboardNavigation = ({
         }));
       }
     }
+    function activationHandler(event) {
+      // Ignore the auto-repeat while the key is held: a pointer click does not repeat either.
+      if (event.repeat || !(0, _itemActivation.isItemActivationKey)(event) || !(0, _useChartKeyboardNavigation.selectorChartsIsKeyboardActivationEnabled)(store.state)) {
+        return;
+      }
+      const focusedItem = store.state.keyboardNavigation.item;
+      if (focusedItem === null || !store.state.keyboardNavigation.isFocused) {
+        return;
+      }
+      const handler = (0, _itemActivation.findItemActivationHandler)(activationRegistrationsRef.current.values(), focusedItem);
+      if (handler === null) {
+        return;
+      }
+      event.preventDefault();
+      handler(event, focusedItem);
+    }
     function keyboardHandler(event) {
       let newFocusedItem = store.state.keyboardNavigation.item;
       const seriesConfig = (0, _useChartSeriesConfig.selectorChartSeriesConfig)(store.state);
@@ -88,10 +122,12 @@ const useChartKeyboardNavigation = ({
         }));
       }
     }
+    element.addEventListener('keydown', activationHandler);
     element.addEventListener('keydown', keyboardHandler);
     element.addEventListener('focusout', removeFocus);
     element.addEventListener('focusin', restoreFocus);
     return () => {
+      element.removeEventListener('keydown', activationHandler);
       element.removeEventListener('keydown', keyboardHandler);
       element.removeEventListener('focusout', removeFocus);
       element.removeEventListener('focusin', restoreFocus);
@@ -102,7 +138,11 @@ const useChartKeyboardNavigation = ({
       enabled: !params.disableKeyboardNavigation
     }));
   }, [store, params.disableKeyboardNavigation]);
-  return {};
+  return {
+    instance: {
+      registerItemActivationHandler
+    }
+  };
 };
 exports.useChartKeyboardNavigation = useChartKeyboardNavigation;
 useChartKeyboardNavigation.getInitialState = params => ({

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.mjs

@@ -5,6 +5,8 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { selectorChartDefaultizedSeries } from "../../corePlugins/useChartSeries/useChartSeries.selectors.mjs";
 import { selectorChartSeriesConfig } from "../../corePlugins/useChartSeriesConfig/index.mjs";
+import { findItemActivationHandler, isItemActivationKey } from "./itemActivation.mjs";
+import { selectorChartsIsKeyboardActivationEnabled } from "./useChartKeyboardNavigation.selectors.mjs";
 export const useChartKeyboardNavigation = ({
   params,
   store,
@@ -13,6 +15,20 @@ export const useChartKeyboardNavigation = ({
   const {
     chartsLayerContainerRef
   } = instance;
+  const activationRegistrationsRef = React.useRef(new Map());
+  const nextRegistrationIdRef = React.useRef(0);
+  const registerItemActivationHandler = React.useCallback((scope, handler) => {
+    const registrationId = nextRegistrationIdRef.current;
+    nextRegistrationIdRef.current += 1;
+    const registrations = activationRegistrationsRef.current;
+    registrations.set(registrationId, {
+      scope,
+      handler
+    });
+    return () => {
+      registrations.delete(registrationId);
+    };
+  }, []);
   React.useEffect(() => {
     const element = chartsLayerContainerRef.current;
     if (!element || params.disableKeyboardNavigation) {
@@ -24,12 +40,14 @@ export const useChartKeyboardNavigation = ({
 
       // Avoid removing focus if we know it is moving to another children in the chart.
       // This avoid extra computation ot remove/add focus at each keyboard pressed when navigating in the chart.
-      if (root && next instanceof Node && !root.contains(next)) {
-        if (store.state.keyboardNavigation.isFocused) {
-          store.set('keyboardNavigation', _extends({}, store.state.keyboardNavigation, {
-            isFocused: false
-          }));
-        }
+      // A null relatedTarget means focus left to a non-focusable element (clicking outside), so focus is removed.
+      if (root && next !== null && root.contains(next)) {
+        return;
+      }
+      if (store.state.keyboardNavigation.isFocused) {
+        store.set('keyboardNavigation', _extends({}, store.state.keyboardNavigation, {
+          isFocused: false
+        }));
       }
     }
     function restoreFocus() {
@@ -49,6 +67,22 @@ export const useChartKeyboardNavigation = ({
         }));
       }
     }
+    function activationHandler(event) {
+      // Ignore the auto-repeat while the key is held: a pointer click does not repeat either.
+      if (event.repeat || !isItemActivationKey(event) || !selectorChartsIsKeyboardActivationEnabled(store.state)) {
+        return;
+      }
+      const focusedItem = store.state.keyboardNavigation.item;
+      if (focusedItem === null || !store.state.keyboardNavigation.isFocused) {
+        return;
+      }
+      const handler = findItemActivationHandler(activationRegistrationsRef.current.values(), focusedItem);
+      if (handler === null) {
+        return;
+      }
+      event.preventDefault();
+      handler(event, focusedItem);
+    }
     function keyboardHandler(event) {
       let newFocusedItem = store.state.keyboardNavigation.item;
       const seriesConfig = selectorChartSeriesConfig(store.state);
@@ -81,10 +115,12 @@ export const useChartKeyboardNavigation = ({
         }));
       }
     }
+    element.addEventListener('keydown', activationHandler);
     element.addEventListener('keydown', keyboardHandler);
     element.addEventListener('focusout', removeFocus);
     element.addEventListener('focusin', restoreFocus);
     return () => {
+      element.removeEventListener('keydown', activationHandler);
       element.removeEventListener('keydown', keyboardHandler);
       element.removeEventListener('focusout', removeFocus);
       element.removeEventListener('focusin', restoreFocus);
@@ -95,7 +131,11 @@ export const useChartKeyboardNavigation = ({
       enabled: !params.disableKeyboardNavigation
     }));
   }, [store, params.disableKeyboardNavigation]);
-  return {};
+  return {
+    instance: {
+      registerItemActivationHandler
+    }
+  };
 };
 useChartKeyboardNavigation.getInitialState = params => ({
   keyboardNavigation: {

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.d.mts

@@ -20,6 +20,9 @@ export declare const selectorChartsFocusedOrToFocusedItem: (args_0: import("../.
 export declare const selectorChartsIsKeyboardNavigationEnabled: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.mjs").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => boolean;
+export declare const selectorChartsIsKeyboardActivationEnabled: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.mjs").UseChartKeyboardNavigationState> & {
+  cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
+}) => boolean;
 export declare const selectorChartsKeyboardXAxisIndex: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.mjs").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => AxisItemIdentifier | undefined;

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.d.ts

@@ -20,6 +20,9 @@ export declare const selectorChartsFocusedOrToFocusedItem: (args_0: import("../.
 export declare const selectorChartsIsKeyboardNavigationEnabled: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => boolean;
+export declare const selectorChartsIsKeyboardActivationEnabled: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}) => boolean;
 export declare const selectorChartsKeyboardXAxisIndex: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => AxisItemIdentifier | undefined;

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardItem = exports.selectorChartsItemIsFocused = exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedOrToFocusedItem = exports.selectorChartsFocusedItem = void 0;
+exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardItem = exports.selectorChartsItemIsFocused = exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsIsKeyboardActivationEnabled = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedOrToFocusedItem = exports.selectorChartsFocusedItem = void 0;
 var _store = require("@mui/x-internals/store");
 var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
@@ -20,6 +20,8 @@ const selectorChartsFocusedItem = exports.selectorChartsFocusedItem = (0, _store
  */
 const selectorChartsFocusedOrToFocusedItem = exports.selectorChartsFocusedOrToFocusedItem = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item ?? null);
 const selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsIsKeyboardNavigationEnabled = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => !!keyboardNavigationState?.enabled);
+const selectKeyboardActivationFeature = state => state.experimentalFeatures?.keyboardActivation;
+const selectorChartsIsKeyboardActivationEnabled = exports.selectorChartsIsKeyboardActivationEnabled = (0, _store.createSelector)(selectKeyboardNavigation, selectKeyboardActivationFeature, (keyboardNavigationState, keyboardActivation) => keyboardActivation === true && !!keyboardNavigationState?.enabled);
 
 /**
  * Selectors to override highlight behavior.

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.mjs

@@ -14,6 +14,8 @@ export const selectorChartsFocusedItem = createSelector(selectKeyboardNavigation
  */
 export const selectorChartsFocusedOrToFocusedItem = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item ?? null);
 export const selectorChartsIsKeyboardNavigationEnabled = createSelector(selectKeyboardNavigation, keyboardNavigationState => !!keyboardNavigationState?.enabled);
+const selectKeyboardActivationFeature = state => state.experimentalFeatures?.keyboardActivation;
+export const selectorChartsIsKeyboardActivationEnabled = createSelector(selectKeyboardNavigation, selectKeyboardActivationFeature, (keyboardNavigationState, keyboardActivation) => keyboardActivation === true && !!keyboardNavigationState?.enabled);
 
 /**
  * Selectors to override highlight behavior.

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.types.d.mts

@@ -2,9 +2,46 @@ import type { ChartPluginSignature } from "../../models/index.mjs";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.mjs";
 import type { UseChartCartesianAxisSignature } from "../useChartCartesianAxis/index.mjs";
 import type { UseChartHighlightSignature } from "../useChartHighlight/index.mjs";
-import type { FocusedItemIdentifier } from "../../../../models/seriesType/index.mjs";
+import type { FocusedItemIdentifier, SeriesId } from "../../../../models/seriesType/index.mjs";
 import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
-export interface UseChartKeyboardNavigationInstance {}
+/**
+ * Called when the focused item is activated with the keyboard.
+ * @param {KeyboardEvent} event The keyboard event that triggered the activation.
+ * @param {FocusedItemIdentifier<ChartSeriesType>} item The activated item.
+ */
+export type ItemActivationHandler = (event: KeyboardEvent, item: FocusedItemIdentifier<ChartSeriesType>) => void;
+/**
+ * The items a handler covers. An empty scope covers every item.
+ */
+export interface ItemActivationScope {
+  type?: ChartSeriesType;
+  seriesId?: SeriesId;
+  /**
+   * Breaks ties between handlers covering the same items, highest first.
+   * Mirrors pointer hit-testing, where marks sit above lines, and lines above areas.
+   * @default 0
+   */
+  priority?: number;
+  /**
+   * When set, the handler is a candidate only for items it returns `true` for. Lets a plot decline
+   * an item a pointer could not reach — e.g. a line mark that is not rendered — so activation falls
+   * through to the next handler.
+   * @param {FocusedItemIdentifier<ChartSeriesType>} item The focused item.
+   * @returns {boolean} Whether the handler can activate this item.
+   */
+  canActivate?: (item: FocusedItemIdentifier<ChartSeriesType>) => boolean;
+}
+export interface UseChartKeyboardNavigationInstance {
+  /**
+   * Registers a handler triggered when the focused item is activated with the keyboard.
+   * Only the handler with the most specific matching scope runs, so plots sharing a series
+   * do not fire the callback twice.
+   * @param {ItemActivationScope} scope The items the handler covers.
+   * @param {ItemActivationHandler} handler The handler to call on activation.
+   * @returns {() => void} A cleanup function unregistering the handler.
+   */
+  registerItemActivationHandler: (scope: ItemActivationScope, handler: ItemActivationHandler) => () => void;
+}
 export interface UseChartKeyboardNavigationState {
   keyboardNavigation: {
     /**

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.types.d.ts

@@ -2,9 +2,46 @@ import type { ChartPluginSignature } from "../../models/index.js";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.js";
 import type { UseChartCartesianAxisSignature } from "../useChartCartesianAxis/index.js";
 import type { UseChartHighlightSignature } from "../useChartHighlight/index.js";
-import type { FocusedItemIdentifier } from "../../../../models/seriesType/index.js";
+import type { FocusedItemIdentifier, SeriesId } from "../../../../models/seriesType/index.js";
 import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
-export interface UseChartKeyboardNavigationInstance {}
+/**
+ * Called when the focused item is activated with the keyboard.
+ * @param {KeyboardEvent} event The keyboard event that triggered the activation.
+ * @param {FocusedItemIdentifier<ChartSeriesType>} item The activated item.
+ */
+export type ItemActivationHandler = (event: KeyboardEvent, item: FocusedItemIdentifier<ChartSeriesType>) => void;
+/**
+ * The items a handler covers. An empty scope covers every item.
+ */
+export interface ItemActivationScope {
+  type?: ChartSeriesType;
+  seriesId?: SeriesId;
+  /**
+   * Breaks ties between handlers covering the same items, highest first.
+   * Mirrors pointer hit-testing, where marks sit above lines, and lines above areas.
+   * @default 0
+   */
+  priority?: number;
+  /**
+   * When set, the handler is a candidate only for items it returns `true` for. Lets a plot decline
+   * an item a pointer could not reach — e.g. a line mark that is not rendered — so activation falls
+   * through to the next handler.
+   * @param {FocusedItemIdentifier<ChartSeriesType>} item The focused item.
+   * @returns {boolean} Whether the handler can activate this item.
+   */
+  canActivate?: (item: FocusedItemIdentifier<ChartSeriesType>) => boolean;
+}
+export interface UseChartKeyboardNavigationInstance {
+  /**
+   * Registers a handler triggered when the focused item is activated with the keyboard.
+   * Only the handler with the most specific matching scope runs, so plots sharing a series
+   * do not fire the callback twice.
+   * @param {ItemActivationScope} scope The items the handler covers.
+   * @param {ItemActivationHandler} handler The handler to call on activation.
+   * @returns {() => void} A cleanup function unregistering the handler.
+   */
+  registerItemActivationHandler: (scope: ItemActivationScope, handler: ItemActivationHandler) => () => void;
+}
 export interface UseChartKeyboardNavigationState {
   keyboardNavigation: {
     /**

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/findVisibleDataIndex.d.mts

@@ -5,6 +5,9 @@ import type { ProcessedSeries } from "../../../corePlugins/useChartSeries/useCha
  * Walk forward (or backward) from `startIndex` and return the first dataIndex
  * whose data point is visible. Returns `null` if every traversed index is hidden.
  *
+ * Shared-axis types (line, bar) opt out of `useCurrentSeriesMaxLength`, so `dataLength`
+ * can exceed the focused series length to focus an index with no value.
+ *
  * Series-level hidden flags are filtered upstream (see `getNonEmptySeriesArray`),
  * so only per-data-point hidden flags are relevant here. Today only Pie sets a
  * `hidden` flag on individual data items; for other series types the data

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/findVisibleDataIndex.d.ts

@@ -5,6 +5,9 @@ import type { ProcessedSeries } from "../../../corePlugins/useChartSeries/useCha
  * Walk forward (or backward) from `startIndex` and return the first dataIndex
  * whose data point is visible. Returns `null` if every traversed index is hidden.
  *
+ * Shared-axis types (line, bar) opt out of `useCurrentSeriesMaxLength`, so `dataLength`
+ * can exceed the focused series length to focus an index with no value.
+ *
  * Series-level hidden flags are filtered upstream (see `getNonEmptySeriesArray`),
  * so only per-data-point hidden flags are relevant here. Today only Pie sets a
  * `hidden` flag on individual data items; for other series types the data

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/findVisibleDataIndex.js

@@ -8,6 +8,9 @@ exports.findVisibleDataIndex = findVisibleDataIndex;
  * Walk forward (or backward) from `startIndex` and return the first dataIndex
  * whose data point is visible. Returns `null` if every traversed index is hidden.
  *
+ * Shared-axis types (line, bar) opt out of `useCurrentSeriesMaxLength`, so `dataLength`
+ * can exceed the focused series length to focus an index with no value.
+ *
  * Series-level hidden flags are filtered upstream (see `getNonEmptySeriesArray`),
  * so only per-data-point hidden flags are relevant here. Today only Pie sets a
  * `hidden` flag on individual data items; for other series types the data

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/findVisibleDataIndex.mjs

@@ -2,6 +2,9 @@
  * Walk forward (or backward) from `startIndex` and return the first dataIndex
  * whose data point is visible. Returns `null` if every traversed index is hidden.
  *
+ * Shared-axis types (line, bar) opt out of `useCurrentSeriesMaxLength`, so `dataLength`
+ * can exceed the focused series length to focus an index with no value.
+ *
  * Series-level hidden flags are filtered upstream (see `getNonEmptySeriesArray`),
  * so only per-data-point hidden flags are relevant here. Today only Pie sets a
  * `hidden` flag on individual data items; for other series types the data

package/internals/plugins/featurePlugins/useChartPolarAxis/getPolarAxisClickPayload.d.mts

@@ -0,0 +1,27 @@
+import type { ChartsAxisData } from "../../../../models/axis.mjs";
+import type { ProcessedSeries } from "../../corePlugins/useChartSeries/index.mjs";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
+type PolarAxes = {
+  axis: Record<string, {
+    data?: readonly any[];
+  }>;
+  axisIds: string[];
+};
+/**
+ * Builds the `onAxisClick` payload for a data index on a polar axis.
+ * Returns `null` when the axis has no value at this index.
+ */
+export declare function getPolarAxisClickPayload({
+  dataIndex,
+  isRotationAxis,
+  rotationAxes,
+  radiusAxes,
+  processedSeries
+}: {
+  dataIndex: number;
+  isRotationAxis: boolean;
+  rotationAxes: PolarAxes;
+  radiusAxes: PolarAxes;
+  processedSeries: ProcessedSeries<ChartSeriesType>;
+}): ChartsAxisData | null;
+export {};

package/internals/plugins/featurePlugins/useChartPolarAxis/getPolarAxisClickPayload.d.ts

@@ -0,0 +1,27 @@
+import type { ChartsAxisData } from "../../../../models/axis.js";
+import type { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+type PolarAxes = {
+  axis: Record<string, {
+    data?: readonly any[];
+  }>;
+  axisIds: string[];
+};
+/**
+ * Builds the `onAxisClick` payload for a data index on a polar axis.
+ * Returns `null` when the axis has no value at this index.
+ */
+export declare function getPolarAxisClickPayload({
+  dataIndex,
+  isRotationAxis,
+  rotationAxes,
+  radiusAxes,
+  processedSeries
+}: {
+  dataIndex: number;
+  isRotationAxis: boolean;
+  rotationAxes: PolarAxes;
+  radiusAxes: PolarAxes;
+  processedSeries: ProcessedSeries<ChartSeriesType>;
+}): ChartsAxisData | null;
+export {};

package/internals/plugins/featurePlugins/useChartPolarAxis/getPolarAxisClickPayload.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPolarAxisClickPayload = getPolarAxisClickPayload;
+var _isPolar = require("../../../isPolar");
+/**
+ * Builds the `onAxisClick` payload for a data index on a polar axis.
+ * Returns `null` when the axis has no value at this index.
+ */
+function getPolarAxisClickPayload({
+  dataIndex,
+  isRotationAxis,
+  rotationAxes,
+  radiusAxes,
+  processedSeries
+}) {
+  const axes = isRotationAxis ? rotationAxes : radiusAxes;
+  const axisValue = axes.axis[axes.axisIds[0]]?.data?.[dataIndex];
+  if (axisValue === undefined) {
+    return null;
+  }
+  const seriesValues = {};
+  Object.keys(processedSeries).filter(_isPolar.isPolarSeriesType).forEach(seriesType => {
+    processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
+      const seriesItem = processedSeries[seriesType].series[seriesId];
+      seriesValues[seriesId] = seriesItem.data[dataIndex];
+    });
+  });
+  return {
+    dataIndex,
+    axisValue,
+    seriesValues
+  };
+}

package/internals/plugins/featurePlugins/useChartPolarAxis/getPolarAxisClickPayload.mjs

@@ -0,0 +1,30 @@
+import { isPolarSeriesType } from "../../../isPolar.mjs";
+/**
+ * Builds the `onAxisClick` payload for a data index on a polar axis.
+ * Returns `null` when the axis has no value at this index.
+ */
+export function getPolarAxisClickPayload({
+  dataIndex,
+  isRotationAxis,
+  rotationAxes,
+  radiusAxes,
+  processedSeries
+}) {
+  const axes = isRotationAxis ? rotationAxes : radiusAxes;
+  const axisValue = axes.axis[axes.axisIds[0]]?.data?.[dataIndex];
+  if (axisValue === undefined) {
+    return null;
+  }
+  const seriesValues = {};
+  Object.keys(processedSeries).filter(isPolarSeriesType).forEach(seriesType => {
+    processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
+      const seriesItem = processedSeries[seriesType].series[seriesId];
+      seriesValues[seriesId] = seriesItem.data[dataIndex];
+    });
+  });
+  return {
+    dataIndex,
+    axisValue,
+    seriesValues
+  };
+}

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js

@@ -19,7 +19,7 @@ var _coordinateTransformation = require("./coordinateTransformation");
 var _getAxisIndex = require("./getAxisIndex");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
 var _checkHasInteractionPlugin = require("../useChartInteraction/checkHasInteractionPlugin");
-var _isPolar = require("../../../isPolar");
+var _getPolarAxisClickPayload = require("./getPolarAxisClickPayload");
 const useChartPolarAxis = ({
   params,
   store,
@@ -174,34 +174,33 @@ const useChartPolarAxis = ({
       return () => {};
     }
     const axisClickHandler = instance.addInteractionListener('tap', event => {
-      let dataIndex = null;
-      let isRotationAxis = false;
       const svgPoint = (0, _getChartPoint.getChartPoint)(element, event.detail.srcEvent);
       const rotation = (0, _coordinateTransformation.generateSvg2rotation)(center)(svgPoint.x, svgPoint.y);
       const rotationIndex = (0, _getAxisIndex.getRotationAxisIndex)(rotationAxisWithScale[usedRotationAxisId], rotation);
       const radius = (0, _coordinateTransformation.generateSvg2radius)(center)(svgPoint.x, svgPoint.y);
       const radiusIndex = (0, _getAxisIndex.getRadiusAxisIndex)(radiusAxisWithScale[usedRadiusAxisId], radius);
-      isRotationAxis = rotationIndex !== -1;
-      dataIndex = isRotationAxis ? rotationIndex : radiusIndex;
-      const USED_AXIS_ID = isRotationAxis ? usedRotationAxisId : usedRadiusAxisId;
-      if (dataIndex == null || dataIndex === -1) {
+      const isRotationAxis = rotationIndex !== -1;
+      const dataIndex = isRotationAxis ? rotationIndex : radiusIndex;
+      if (dataIndex === -1) {
         return;
       }
-
-      // The .data exist because otherwise the dataIndex would be null or -1.
-      const axisValue = (isRotationAxis ? rotationAxisWithScale : radiusAxisWithScale)[USED_AXIS_ID].data[dataIndex];
-      const seriesValues = {};
-      Object.keys(processedSeries).filter(_isPolar.isPolarSeriesType).forEach(seriesType => {
-        processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
-          const seriesItem = processedSeries[seriesType].series[seriesId];
-          seriesValues[seriesId] = seriesItem.data[dataIndex];
-        });
-      });
-      onAxisClick(event.detail.srcEvent, {
+      const payload = (0, _getPolarAxisClickPayload.getPolarAxisClickPayload)({
         dataIndex,
-        axisValue,
-        seriesValues
+        isRotationAxis,
+        rotationAxes: {
+          axis: rotationAxisWithScale,
+          axisIds: [usedRotationAxisId]
+        },
+        radiusAxes: {
+          axis: radiusAxisWithScale,
+          axisIds: [usedRadiusAxisId]
+        },
+        processedSeries
       });
+      if (payload === null) {
+        return;
+      }
+      onAxisClick(event.detail.srcEvent, payload);
     });
     return () => {
       axisClickHandler.cleanup();