@mui/x-charts 9.10.1 → 9.11.1

package/internals/plugins/featurePlugins/useChartItemClick/useChartItemClick.js

@@ -1,10 +1,12 @@
 "use strict";
 'use client';
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useChartItemClick = void 0;
+var React = _interopRequireWildcard(require("react"));
 var _getChartPoint = require("../../../getChartPoint");
 const useChartItemClick = ({
   params,
@@ -14,6 +16,19 @@ const useChartItemClick = ({
   const {
     onItemClick
   } = params;
+  React.useEffect(() => {
+    if (!onItemClick || !instance.registerItemActivationHandler) {
+      return undefined;
+    }
+    return instance.registerItemActivationHandler({}, (event, item) => {
+      const seriesTypeConfig = store.state.seriesConfig.config[item.type];
+      // @ts-ignore The type inference for store.state does not support generic yet
+      const itemWithData = seriesTypeConfig?.getItemWithData?.(store.state, item);
+
+      // The callback only describes the pointer event unless the user augments the types.
+      onItemClick(event, itemWithData ?? item);
+    });
+  }, [instance, onItemClick, store]);
   if (!onItemClick) {
     return {
       instance: {}

package/internals/plugins/featurePlugins/useChartItemClick/useChartItemClick.mjs

@@ -1,5 +1,6 @@
 'use client';
 
+import * as React from 'react';
 import { getChartPoint } from "../../../getChartPoint.mjs";
 export const useChartItemClick = ({
   params,
@@ -9,6 +10,19 @@ export const useChartItemClick = ({
   const {
     onItemClick
   } = params;
+  React.useEffect(() => {
+    if (!onItemClick || !instance.registerItemActivationHandler) {
+      return undefined;
+    }
+    return instance.registerItemActivationHandler({}, (event, item) => {
+      const seriesTypeConfig = store.state.seriesConfig.config[item.type];
+      // @ts-ignore The type inference for store.state does not support generic yet
+      const itemWithData = seriesTypeConfig?.getItemWithData?.(store.state, item);
+
+      // The callback only describes the pointer event unless the user augments the types.
+      onItemClick(event, itemWithData ?? item);
+    });
+  }, [instance, onItemClick, store]);
   if (!onItemClick) {
     return {
       instance: {}

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

@@ -2,14 +2,16 @@ import type { ChartPluginSignature } from "../../models/index.mjs";
 import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
 import type { SeriesItemIdentifierWithType } from "../../../../models/seriesType/index.mjs";
 import type { ChartSeriesTypeRequiredPlugins } from "../../corePlugins/useChartSeriesConfig/index.mjs";
+import type { UseChartKeyboardNavigationSignature } from "../useChartKeyboardNavigation/index.mjs";
+import type { ChartsActivationEvent } from "../../../../models/events.mjs";
 export interface UseChartItemClickParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * The callback fired when an item is clicked.
    *
-   * @param {React.MouseEvent<HTMLDivElement, MouseEvent>} event The click event.
+   * @param {ChartsActivationEvent<HTMLDivElement>} event The click event.
    * @param {SeriesItemIdentifierWithType<SeriesType>} item The clicked item.
    */
-  onItemClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: SeriesItemIdentifierWithType<SeriesType>) => void;
+  onItemClick?: (event: ChartsActivationEvent<HTMLDivElement>, item: SeriesItemIdentifierWithType<SeriesType>) => void;
 }
 export interface UseChartItemClickInstance {
   handleClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
@@ -20,4 +22,5 @@ export type UseChartItemClickSignature<SeriesType extends ChartSeriesType = Char
   defaultizedParams: UseChartItemClickParameters<SeriesType>;
   instance: UseChartItemClickInstance;
   dependencies: ChartSeriesTypeRequiredPlugins<SeriesType>;
+  optionalDependencies: [UseChartKeyboardNavigationSignature];
 }>;

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

@@ -2,14 +2,16 @@ import type { ChartPluginSignature } from "../../models/index.js";
 import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
 import type { SeriesItemIdentifierWithType } from "../../../../models/seriesType/index.js";
 import type { ChartSeriesTypeRequiredPlugins } from "../../corePlugins/useChartSeriesConfig/index.js";
+import type { UseChartKeyboardNavigationSignature } from "../useChartKeyboardNavigation/index.js";
+import type { ChartsActivationEvent } from "../../../../models/events.js";
 export interface UseChartItemClickParameters<SeriesType extends ChartSeriesType = ChartSeriesType> {
   /**
    * The callback fired when an item is clicked.
    *
-   * @param {React.MouseEvent<HTMLDivElement, MouseEvent>} event The click event.
+   * @param {ChartsActivationEvent<HTMLDivElement>} event The click event.
    * @param {SeriesItemIdentifierWithType<SeriesType>} item The clicked item.
    */
-  onItemClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: SeriesItemIdentifierWithType<SeriesType>) => void;
+  onItemClick?: (event: ChartsActivationEvent<HTMLDivElement>, item: SeriesItemIdentifierWithType<SeriesType>) => void;
 }
 export interface UseChartItemClickInstance {
   handleClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
@@ -20,4 +22,5 @@ export type UseChartItemClickSignature<SeriesType extends ChartSeriesType = Char
   defaultizedParams: UseChartItemClickParameters<SeriesType>;
   instance: UseChartItemClickInstance;
   dependencies: ChartSeriesTypeRequiredPlugins<SeriesType>;
+  optionalDependencies: [UseChartKeyboardNavigationSignature];
 }>;

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

@@ -1,4 +1,5 @@
 export { useChartKeyboardNavigation } from "./useChartKeyboardNavigation.mjs";
 export * from "./useChartKeyboardNavigation.selectors.mjs";
-export type { UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.mjs";
+export type { UseChartKeyboardNavigationSignature, ItemActivationHandler, ItemActivationScope } from "./useChartKeyboardNavigation.types.mjs";
+export { isItemActivationKey } from "./itemActivation.mjs";
 export type * from "./keyboardFocusHandler.types.mjs";

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

@@ -1,4 +1,5 @@
 export { useChartKeyboardNavigation } from "./useChartKeyboardNavigation.js";
 export * from "./useChartKeyboardNavigation.selectors.js";
-export type { UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.js";
+export type { UseChartKeyboardNavigationSignature, ItemActivationHandler, ItemActivationScope } from "./useChartKeyboardNavigation.types.js";
+export { isItemActivationKey } from "./itemActivation.js";
 export type * from "./keyboardFocusHandler.types.js";

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

@@ -4,8 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  useChartKeyboardNavigation: true
+  useChartKeyboardNavigation: true,
+  isItemActivationKey: true
 };
+Object.defineProperty(exports, "isItemActivationKey", {
+  enumerable: true,
+  get: function () {
+    return _itemActivation.isItemActivationKey;
+  }
+});
 Object.defineProperty(exports, "useChartKeyboardNavigation", {
   enumerable: true,
   get: function () {
@@ -24,4 +31,5 @@ Object.keys(_useChartKeyboardNavigation2).forEach(function (key) {
       return _useChartKeyboardNavigation2[key];
     }
   });
-});
+});
+var _itemActivation = require("./itemActivation");

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

@@ -1,2 +1,3 @@
 export { useChartKeyboardNavigation } from "./useChartKeyboardNavigation.mjs";
-export * from "./useChartKeyboardNavigation.selectors.mjs";
+export * from "./useChartKeyboardNavigation.selectors.mjs";
+export { isItemActivationKey } from "./itemActivation.mjs";

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

@@ -0,0 +1,13 @@
+import type { FocusedItemIdentifier } from "../../../../models/seriesType/index.mjs";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.mjs";
+import type { ItemActivationHandler, ItemActivationScope } from "./useChartKeyboardNavigation.types.mjs";
+export type ItemActivationRegistration = {
+  scope: ItemActivationScope;
+  handler: ItemActivationHandler;
+};
+export declare function isItemActivationKey(event: KeyboardEvent): boolean;
+/**
+ * Returns the handler matching the item with the most specific scope, the highest priority
+ * breaking ties, or `null` when none matches.
+ */
+export declare function findItemActivationHandler(registrations: Iterable<ItemActivationRegistration>, item: FocusedItemIdentifier<ChartSeriesType>): ItemActivationHandler | null;

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

@@ -0,0 +1,13 @@
+import type { FocusedItemIdentifier } from "../../../../models/seriesType/index.js";
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import type { ItemActivationHandler, ItemActivationScope } from "./useChartKeyboardNavigation.types.js";
+export type ItemActivationRegistration = {
+  scope: ItemActivationScope;
+  handler: ItemActivationHandler;
+};
+export declare function isItemActivationKey(event: KeyboardEvent): boolean;
+/**
+ * Returns the handler matching the item with the most specific scope, the highest priority
+ * breaking ties, or `null` when none matches.
+ */
+export declare function findItemActivationHandler(registrations: Iterable<ItemActivationRegistration>, item: FocusedItemIdentifier<ChartSeriesType>): ItemActivationHandler | null;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findItemActivationHandler = findItemActivationHandler;
+exports.isItemActivationKey = isItemActivationKey;
+function isItemActivationKey(event) {
+  return event.key === 'Enter' || event.key === ' ';
+}
+function getScopeSpecificity(scope, item) {
+  if (scope.type !== undefined && scope.type !== item.type) {
+    return null;
+  }
+  if (scope.seriesId !== undefined && (!('seriesId' in item) || scope.seriesId !== item.seriesId)) {
+    return null;
+  }
+  return (scope.type === undefined ? 0 : 1) + (scope.seriesId === undefined ? 0 : 1);
+}
+
+/**
+ * Returns the handler matching the item with the most specific scope, the highest priority
+ * breaking ties, or `null` when none matches.
+ */
+function findItemActivationHandler(registrations, item) {
+  let bestHandler = null;
+  let bestSpecificity = -1;
+  let bestPriority = -1;
+  for (const registration of registrations) {
+    const specificity = getScopeSpecificity(registration.scope, item);
+    const priority = registration.scope.priority ?? 0;
+    if (specificity !== null && (registration.scope.canActivate === undefined || registration.scope.canActivate(item)) && (specificity > bestSpecificity || specificity === bestSpecificity && priority > bestPriority)) {
+      bestHandler = registration.handler;
+      bestSpecificity = specificity;
+      bestPriority = priority;
+    }
+  }
+  return bestHandler;
+}

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

@@ -0,0 +1,32 @@
+export function isItemActivationKey(event) {
+  return event.key === 'Enter' || event.key === ' ';
+}
+function getScopeSpecificity(scope, item) {
+  if (scope.type !== undefined && scope.type !== item.type) {
+    return null;
+  }
+  if (scope.seriesId !== undefined && (!('seriesId' in item) || scope.seriesId !== item.seriesId)) {
+    return null;
+  }
+  return (scope.type === undefined ? 0 : 1) + (scope.seriesId === undefined ? 0 : 1);
+}
+
+/**
+ * Returns the handler matching the item with the most specific scope, the highest priority
+ * breaking ties, or `null` when none matches.
+ */
+export function findItemActivationHandler(registrations, item) {
+  let bestHandler = null;
+  let bestSpecificity = -1;
+  let bestPriority = -1;
+  for (const registration of registrations) {
+    const specificity = getScopeSpecificity(registration.scope, item);
+    const priority = registration.scope.priority ?? 0;
+    if (specificity !== null && (registration.scope.canActivate === undefined || registration.scope.canActivate(item)) && (specificity > bestSpecificity || specificity === bestSpecificity && priority > bestPriority)) {
+      bestHandler = registration.handler;
+      bestSpecificity = specificity;
+      bestPriority = priority;
+    }
+  }
+  return bestHandler;
+}

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: {
     /**