@mui/x-charts 9.12.0 → 9.14.0

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

@@ -20,6 +20,9 @@ export declare const selectorChartsFocusedItem: (args_0: import("../../corePlugi
 export declare const selectorChartsFocusedOrToFocusedItem: (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;
 }) => FocusedItemIdentifier<keyof import("../../../index.js").ChartsSeriesConfig> | null;
+export declare const selectorChartsZoomAnnouncement: (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;
+}) => number;
 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;

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.selectorChartsIsKeyboardActivationEnabled = exports.selectorChartsIsFocusVisible = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedOrToFocusedItem = exports.selectorChartsFocusedItem = void 0;
+exports.selectorChartsZoomAnnouncement = exports.selectorChartsKeyboardYAxisIndex = exports.selectorChartsKeyboardXAxisIndex = exports.selectorChartsKeyboardItem = exports.selectorChartsItemIsFocused = exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsIsKeyboardActivationEnabled = exports.selectorChartsIsFocusVisible = 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");
@@ -26,6 +26,7 @@ const selectorChartsFocusedItem = exports.selectorChartsFocusedItem = (0, _store
  * - will be focused when user focuses the chart
  */
 const selectorChartsFocusedOrToFocusedItem = exports.selectorChartsFocusedOrToFocusedItem = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item ?? null);
+const selectorChartsZoomAnnouncement = exports.selectorChartsZoomAnnouncement = (0, _store.createSelector)(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.zoomAnnouncement ?? 0);
 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);

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

@@ -20,6 +20,7 @@ export const selectorChartsFocusedItem = createSelector(selectKeyboardNavigation
  * - will be focused when user focuses the chart
  */
 export const selectorChartsFocusedOrToFocusedItem = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.item ?? null);
+export const selectorChartsZoomAnnouncement = createSelector(selectKeyboardNavigation, keyboardNavigationState => keyboardNavigationState?.zoomAnnouncement ?? 0);
 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);

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

@@ -58,6 +58,12 @@ export interface UseChartKeyboardNavigationInstance {
    * @returns {() => void} A cleanup function unregistering the handler.
    */
   registerItemActivationHandler: (scope: ItemActivationScope, handler: ItemActivationHandler) => () => void;
+  /**
+   * Asks for the visible zoom range to be announced to screen readers.
+   * Called by the plugin owning keyboard zoom and pan, on each change the user makes with the keys.
+   * @returns {void}
+   */
+  announceZoomChange: () => void;
 }
 export interface UseChartKeyboardNavigationState {
   keyboardNavigation: {
@@ -78,6 +84,12 @@ export interface UseChartKeyboardNavigationState {
      * Indicates whether keyboard navigation is enabled or not.
      */
     enabled: boolean;
+    /**
+     * Incremented on each zoom change the user makes with the keyboard, and reset when the chart
+     * loses focus. The live region reads the visible range when it changes, so a zoom coming from
+     * the pointer or from the application is not announced.
+     */
+    zoomAnnouncement: number;
   };
 }
 type UseChartKeyboardNavigationParameters = {

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

@@ -58,6 +58,12 @@ export interface UseChartKeyboardNavigationInstance {
    * @returns {() => void} A cleanup function unregistering the handler.
    */
   registerItemActivationHandler: (scope: ItemActivationScope, handler: ItemActivationHandler) => () => void;
+  /**
+   * Asks for the visible zoom range to be announced to screen readers.
+   * Called by the plugin owning keyboard zoom and pan, on each change the user makes with the keys.
+   * @returns {void}
+   */
+  announceZoomChange: () => void;
 }
 export interface UseChartKeyboardNavigationState {
   keyboardNavigation: {
@@ -78,6 +84,12 @@ export interface UseChartKeyboardNavigationState {
      * Indicates whether keyboard navigation is enabled or not.
      */
     enabled: boolean;
+    /**
+     * Incremented on each zoom change the user makes with the keyboard, and reset when the chart
+     * loses focus. The live region reads the visible range when it changes, so a zoom coming from
+     * the pointer or from the application is not announced.
+     */
+    zoomAnnouncement: number;
   };
 }
 type UseChartKeyboardNavigationParameters = {

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

@@ -0,0 +1,18 @@
+import type { ChartSeriesType } from "../../../../../models/seriesType/config.mjs";
+import type { FocusedItemIdentifier } from "../../../../../models/seriesType/index.mjs";
+import type { ProcessedSeries } from "../../../corePlugins/useChartSeries/useChartSeries.types.mjs";
+/**
+ * Resolves the item a click falls on from the rotation axis index, for charts with no cartesian
+ * axis to fall back to. Keeps the focused series when there is one.
+ *
+ * The index comes from the axis highlight, so a click between two spokes picks the one it shows.
+ */
+export declare function getItemAtRotationIndex({
+  dataIndex,
+  processedSeries,
+  focusedItem
+}: {
+  dataIndex: number | null;
+  processedSeries: ProcessedSeries<ChartSeriesType>;
+  focusedItem: FocusedItemIdentifier<ChartSeriesType> | null;
+}): FocusedItemIdentifier<ChartSeriesType> | null;

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

@@ -0,0 +1,18 @@
+import type { ChartSeriesType } from "../../../../../models/seriesType/config.js";
+import type { FocusedItemIdentifier } from "../../../../../models/seriesType/index.js";
+import type { ProcessedSeries } from "../../../corePlugins/useChartSeries/useChartSeries.types.js";
+/**
+ * Resolves the item a click falls on from the rotation axis index, for charts with no cartesian
+ * axis to fall back to. Keeps the focused series when there is one.
+ *
+ * The index comes from the axis highlight, so a click between two spokes picks the one it shows.
+ */
+export declare function getItemAtRotationIndex({
+  dataIndex,
+  processedSeries,
+  focusedItem
+}: {
+  dataIndex: number | null;
+  processedSeries: ProcessedSeries<ChartSeriesType>;
+  focusedItem: FocusedItemIdentifier<ChartSeriesType> | null;
+}): FocusedItemIdentifier<ChartSeriesType> | null;

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

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getItemAtRotationIndex = getItemAtRotationIndex;
+var _getNonEmptySeriesArray = require("./getNonEmptySeriesArray");
+var _findVisibleDataIndex = require("./findVisibleDataIndex");
+/** Series drawn against a rotation axis, and navigable with the keyboard. */
+const rotationSeriesTypes = new Set(['radar']);
+
+/**
+ * Resolves the item a click falls on from the rotation axis index, for charts with no cartesian
+ * axis to fall back to. Keeps the focused series when there is one.
+ *
+ * The index comes from the axis highlight, so a click between two spokes picks the one it shows.
+ */
+function getItemAtRotationIndex({
+  dataIndex,
+  processedSeries,
+  focusedItem
+}) {
+  if (dataIndex === null || dataIndex < 0) {
+    return null;
+  }
+  const target = getTargetSeries(processedSeries, focusedItem);
+  if (target === null) {
+    return null;
+  }
+  const data = processedSeries[target.type]?.series[target.seriesId]?.data;
+  if (!data || data.length === 0) {
+    return null;
+  }
+
+  // The axis can be longer than the series it is shared with, and the index may be hidden.
+  const findVisible = direction => (0, _findVisibleDataIndex.findVisibleDataIndex)({
+    processedSeries,
+    type: target.type,
+    seriesId: target.seriesId,
+    startIndex: Math.min(dataIndex, data.length - 1),
+    dataLength: data.length,
+    direction,
+    allowCycles: false
+  });
+  const visibleDataIndex = findVisible(1) ?? findVisible(-1);
+  if (visibleDataIndex === null) {
+    return null;
+  }
+  return {
+    type: target.type,
+    seriesId: target.seriesId,
+    dataIndex: visibleDataIndex
+  };
+}
+
+/** The focused series when it is drawn against a rotation axis, the first one with data otherwise. */
+function getTargetSeries(processedSeries, focusedItem) {
+  if (focusedItem != null && rotationSeriesTypes.has(focusedItem.type) && processedSeries[focusedItem.type]?.series[focusedItem.seriesId] !== undefined) {
+    return {
+      type: focusedItem.type,
+      seriesId: focusedItem.seriesId
+    };
+  }
+  return (0, _getNonEmptySeriesArray.getNonEmptySeriesArray)(processedSeries, rotationSeriesTypes)[0] ?? null;
+}

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

@@ -0,0 +1,60 @@
+import { getNonEmptySeriesArray } from "./getNonEmptySeriesArray.mjs";
+import { findVisibleDataIndex } from "./findVisibleDataIndex.mjs";
+
+/** Series drawn against a rotation axis, and navigable with the keyboard. */
+const rotationSeriesTypes = new Set(['radar']);
+
+/**
+ * Resolves the item a click falls on from the rotation axis index, for charts with no cartesian
+ * axis to fall back to. Keeps the focused series when there is one.
+ *
+ * The index comes from the axis highlight, so a click between two spokes picks the one it shows.
+ */
+export function getItemAtRotationIndex({
+  dataIndex,
+  processedSeries,
+  focusedItem
+}) {
+  if (dataIndex === null || dataIndex < 0) {
+    return null;
+  }
+  const target = getTargetSeries(processedSeries, focusedItem);
+  if (target === null) {
+    return null;
+  }
+  const data = processedSeries[target.type]?.series[target.seriesId]?.data;
+  if (!data || data.length === 0) {
+    return null;
+  }
+
+  // The axis can be longer than the series it is shared with, and the index may be hidden.
+  const findVisible = direction => findVisibleDataIndex({
+    processedSeries,
+    type: target.type,
+    seriesId: target.seriesId,
+    startIndex: Math.min(dataIndex, data.length - 1),
+    dataLength: data.length,
+    direction,
+    allowCycles: false
+  });
+  const visibleDataIndex = findVisible(1) ?? findVisible(-1);
+  if (visibleDataIndex === null) {
+    return null;
+  }
+  return {
+    type: target.type,
+    seriesId: target.seriesId,
+    dataIndex: visibleDataIndex
+  };
+}
+
+/** The focused series when it is drawn against a rotation axis, the first one with data otherwise. */
+function getTargetSeries(processedSeries, focusedItem) {
+  if (focusedItem != null && rotationSeriesTypes.has(focusedItem.type) && processedSeries[focusedItem.type]?.series[focusedItem.seriesId] !== undefined) {
+    return {
+      type: focusedItem.type,
+      seriesId: focusedItem.seriesId
+    };
+  }
+  return getNonEmptySeriesArray(processedSeries, rotationSeriesTypes)[0] ?? null;
+}

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

@@ -10,6 +10,7 @@ exports.useChartPolarAxis = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _warning = require("@mui/x-internals/warning");
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useChartDimensions = require("../../corePlugins/useChartDimensions/useChartDimensions.selectors");
 var _defaultizeAxis = require("./defaultizeAxis");
 var _useChartInteraction = require("../useChartInteraction");
@@ -20,6 +21,7 @@ var _getAxisIndex = require("./getAxisIndex");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
 var _checkHasInteractionPlugin = require("../useChartInteraction/checkHasInteractionPlugin");
 var _getPolarAxisClickPayload = require("./getPolarAxisClickPayload");
+var _useChartKeyboardNavigation = require("../useChartKeyboardNavigation");
 const useChartPolarAxis = ({
   params,
   store,
@@ -205,7 +207,47 @@ const useChartPolarAxis = ({
     return () => {
       axisClickHandler.cleanup();
     };
-  }, [center, instance, params.onAxisClick, processedSeries, radiusAxisWithScale, rotationAxisWithScale, chartsLayerContainerRef, usedRadiusAxisId, usedRotationAxisId]);
+  }, [center, instance, params.onAxisClick, processedSeries, store, radiusAxisWithScale, rotationAxisWithScale, chartsLayerContainerRef, usedRadiusAxisId, usedRotationAxisId]);
+
+  /**
+   * Kept out of the pointer effect so the listener survives re-renders. See the cartesian axis
+   * plugin for why re-subscribing per render drops keystrokes.
+   */
+  const handleKeyboardActivation = (0, _useEventCallback.default)(event => {
+    const onAxisClick = params.onAxisClick;
+    if (!onAxisClick ||
+    // Ignore the auto-repeat while the key is held: a pointer click does not repeat either.
+    event.repeat || !(0, _useChartKeyboardNavigation.isItemActivationKey)(event) || !(0, _useChartKeyboardNavigation.selectorChartsIsKeyboardActivationEnabled)(store.state)) {
+      return;
+    }
+    const focusedItem = (0, _useChartKeyboardNavigation.selectorChartsFocusedItem)(store.state);
+    if (focusedItem === null || !('dataIndex' in focusedItem)) {
+      return;
+    }
+    const payload = (0, _getPolarAxisClickPayload.getPolarAxisClickPayload)({
+      dataIndex: focusedItem.dataIndex,
+      isRotationAxis: true,
+      rotationAxes: (0, _useChartPolarAxis.selectorChartRotationAxis)(store.state),
+      radiusAxes: (0, _useChartPolarAxis.selectorChartRadiusAxis)(store.state),
+      processedSeries: (0, _useChartSeries.selectorChartSeriesProcessed)(store.state)
+    });
+    if (payload === null) {
+      return;
+    }
+    event.preventDefault();
+    // The callback only describes the pointer event unless the user augments the types.
+    onAxisClick(event, payload);
+  });
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (element === null) {
+      return undefined;
+    }
+    element.addEventListener('keydown', handleKeyboardActivation);
+    return () => {
+      element.removeEventListener('keydown', handleKeyboardActivation);
+    };
+  }, [chartsLayerContainerRef, handleKeyboardActivation]);
   return {
     instance: {
       svg2polar,

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

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { warnOnce } from '@mui/x-internals/warning';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.mjs";
 import { defaultizeAxis } from "./defaultizeAxis.mjs";
 import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.mjs";
@@ -13,6 +14,7 @@ import { getRadiusAxisIndex, getRotationAxisIndex } from "./getAxisIndex.mjs";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.mjs";
 import { checkHasInteractionPlugin } from "../useChartInteraction/checkHasInteractionPlugin.mjs";
 import { getPolarAxisClickPayload } from "./getPolarAxisClickPayload.mjs";
+import { isItemActivationKey, selectorChartsFocusedItem, selectorChartsIsKeyboardActivationEnabled } from "../useChartKeyboardNavigation/index.mjs";
 export const useChartPolarAxis = ({
   params,
   store,
@@ -198,7 +200,47 @@ export const useChartPolarAxis = ({
     return () => {
       axisClickHandler.cleanup();
     };
-  }, [center, instance, params.onAxisClick, processedSeries, radiusAxisWithScale, rotationAxisWithScale, chartsLayerContainerRef, usedRadiusAxisId, usedRotationAxisId]);
+  }, [center, instance, params.onAxisClick, processedSeries, store, radiusAxisWithScale, rotationAxisWithScale, chartsLayerContainerRef, usedRadiusAxisId, usedRotationAxisId]);
+
+  /**
+   * Kept out of the pointer effect so the listener survives re-renders. See the cartesian axis
+   * plugin for why re-subscribing per render drops keystrokes.
+   */
+  const handleKeyboardActivation = useEventCallback(event => {
+    const onAxisClick = params.onAxisClick;
+    if (!onAxisClick ||
+    // Ignore the auto-repeat while the key is held: a pointer click does not repeat either.
+    event.repeat || !isItemActivationKey(event) || !selectorChartsIsKeyboardActivationEnabled(store.state)) {
+      return;
+    }
+    const focusedItem = selectorChartsFocusedItem(store.state);
+    if (focusedItem === null || !('dataIndex' in focusedItem)) {
+      return;
+    }
+    const payload = getPolarAxisClickPayload({
+      dataIndex: focusedItem.dataIndex,
+      isRotationAxis: true,
+      rotationAxes: selectorChartRotationAxis(store.state),
+      radiusAxes: selectorChartRadiusAxis(store.state),
+      processedSeries: selectorChartSeriesProcessed(store.state)
+    });
+    if (payload === null) {
+      return;
+    }
+    event.preventDefault();
+    // The callback only describes the pointer event unless the user augments the types.
+    onAxisClick(event, payload);
+  });
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (element === null) {
+      return undefined;
+    }
+    element.addEventListener('keydown', handleKeyboardActivation);
+    return () => {
+      element.removeEventListener('keydown', handleKeyboardActivation);
+    };
+  }, [chartsLayerContainerRef, handleKeyboardActivation]);
   return {
     instance: {
       svg2polar,

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

@@ -3,6 +3,7 @@ import type { ChartSeriesType, DatasetType } from "../../../../models/seriesType
 import type { ScaleName, PolarAxisConfig, ChartsRotationAxisProps, ChartsRadiusAxisProps, RadiusAxis, RotationAxis, ChartsAxisData } from "../../../../models/axis.mjs";
 import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.mjs";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.mjs";
+import type { ChartsActivationEvent } from "../../../../models/events.mjs";
 export interface UseChartPolarAxisInstance {
   /**
    * Transform (rotation, radius) to the SVG (x, y).
@@ -52,10 +53,10 @@ export interface UseChartPolarAxisParameters {
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
-  onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
+  onAxisClick?: (event: ChartsActivationEvent, data: null | ChartsAxisData) => void;
 }
 export type UseChartPolarAxisDefaultizedParameters = UseChartPolarAxisParameters & {};
 export interface UseChartPolarAxisState {

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

@@ -3,6 +3,7 @@ import type { ChartSeriesType, DatasetType } from "../../../../models/seriesType
 import type { ScaleName, PolarAxisConfig, ChartsRotationAxisProps, ChartsRadiusAxisProps, RadiusAxis, RotationAxis, ChartsAxisData } from "../../../../models/axis.js";
 import type { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
 import type { UseChartInteractionSignature } from "../useChartInteraction/index.js";
+import type { ChartsActivationEvent } from "../../../../models/events.js";
 export interface UseChartPolarAxisInstance {
   /**
    * Transform (rotation, radius) to the SVG (x, y).
@@ -52,10 +53,10 @@ export interface UseChartPolarAxisParameters {
   /**
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {ChartsActivationEvent} event The event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
-  onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
+  onAxisClick?: (event: ChartsActivationEvent, data: null | ChartsAxisData) => void;
 }
 export type UseChartPolarAxisDefaultizedParameters = UseChartPolarAxisParameters & {};
 export interface UseChartPolarAxisState {

package/internals/useDefaultTickLabelStyle.d.mts

@@ -0,0 +1,7 @@
+import type { ChartsTextStyle } from "./getWordsByLines.mjs";
+/**
+ * The font the axes render their tick labels with.
+ * Axis auto-sizing measures outside React, so it cannot read the theme itself and needs this handed
+ * to it. Keep in sync with the style `useAxisTicksProps` renders the ticks with.
+ */
+export declare function useDefaultTickLabelStyle(): ChartsTextStyle;

package/internals/useDefaultTickLabelStyle.d.ts

@@ -0,0 +1,7 @@
+import type { ChartsTextStyle } from "./getWordsByLines.js";
+/**
+ * The font the axes render their tick labels with.
+ * Axis auto-sizing measures outside React, so it cannot read the theme itself and needs this handed
+ * to it. Keep in sync with the style `useAxisTicksProps` renders the ticks with.
+ */
+export declare function useDefaultTickLabelStyle(): ChartsTextStyle;

package/internals/useDefaultTickLabelStyle.js

@@ -0,0 +1,34 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDefaultTickLabelStyle = useDefaultTickLabelStyle;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _constants = require("../constants");
+/**
+ * The font the axes render their tick labels with.
+ * Axis auto-sizing measures outside React, so it cannot read the theme itself and needs this handed
+ * to it. Keep in sync with the style `useAxisTicksProps` renders the ticks with.
+ */
+function useDefaultTickLabelStyle() {
+  const theme = (0, _styles.useTheme)();
+  const {
+    fontFamily,
+    fontStyle,
+    fontWeight,
+    letterSpacing,
+    textTransform
+  } = theme.typography.caption;
+  return React.useMemo(() => ({
+    fontFamily,
+    fontStyle,
+    fontWeight,
+    letterSpacing,
+    textTransform,
+    fontSize: _constants.DEFAULT_TICK_LABEL_FONT_SIZE
+  }), [fontFamily, fontStyle, fontWeight, letterSpacing, textTransform]);
+}

package/internals/useDefaultTickLabelStyle.mjs

@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { DEFAULT_TICK_LABEL_FONT_SIZE } from "../constants/index.mjs";
+/**
+ * The font the axes render their tick labels with.
+ * Axis auto-sizing measures outside React, so it cannot read the theme itself and needs this handed
+ * to it. Keep in sync with the style `useAxisTicksProps` renders the ticks with.
+ */
+export function useDefaultTickLabelStyle() {
+  const theme = useTheme();
+  const {
+    fontFamily,
+    fontStyle,
+    fontWeight,
+    letterSpacing,
+    textTransform
+  } = theme.typography.caption;
+  return React.useMemo(() => ({
+    fontFamily,
+    fontStyle,
+    fontWeight,
+    letterSpacing,
+    textTransform,
+    fontSize: DEFAULT_TICK_LABEL_FONT_SIZE
+  }), [fontFamily, fontStyle, fontWeight, letterSpacing, textTransform]);
+}

package/locales/elGR.d.mts

@@ -114,6 +114,11 @@ export declare const elGR: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/elGR.d.ts

@@ -114,6 +114,11 @@ export declare const elGR: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/elGR.js

@@ -125,6 +125,14 @@ const elGRLocaleText = exports.elGRLocaleText = {
   // Accessibility descriptions
   // a11yNoValue: 'no value',
   // a11yConnector: '; ',
+  // zoomRangeDescription: function zoomRangeDescription({
+  //   axisDirection,
+  //   start,
+  //   end
+  // }) {
+  //   const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+  //   return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  // },
   // barDescription: function barDescription({
   //   value,
   //   formattedValue,

package/locales/elGR.mjs

@@ -119,6 +119,14 @@ export const elGRLocaleText = {
   // Accessibility descriptions
   // a11yNoValue: 'no value',
   // a11yConnector: '; ',
+  // zoomRangeDescription: function zoomRangeDescription({
+  //   axisDirection,
+  //   start,
+  //   end
+  // }) {
+  //   const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+  //   return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  // },
   // barDescription: function barDescription({
   //   value,
   //   formattedValue,

package/locales/enUS.d.mts

@@ -115,6 +115,11 @@ export declare const enUS: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/enUS.d.ts

@@ -115,6 +115,11 @@ export declare const enUS: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;

package/locales/enUS.js

@@ -125,6 +125,14 @@ const enUSLocaleText = exports.enUSLocaleText = {
   // Accessibility descriptions
   a11yNoValue: 'no value',
   a11yConnector: '; ',
+  zoomRangeDescription: function zoomRangeDescription({
+    axisDirection,
+    start,
+    end
+  }) {
+    const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+    return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  },
   barDescription: function barDescription({
     value,
     formattedValue,

package/locales/enUS.mjs

@@ -120,6 +120,14 @@ export const enUSLocaleText = {
   // Accessibility descriptions
   a11yNoValue: 'no value',
   a11yConnector: '; ',
+  zoomRangeDescription: function zoomRangeDescription({
+    axisDirection,
+    start,
+    end
+  }) {
+    const axisName = axisDirection === 'x' ? 'horizontal axis' : 'vertical axis';
+    return `Showing ${Math.round(start)}% to ${Math.round(end)}% of the ${axisName}`;
+  },
   barDescription: function barDescription({
     value,
     formattedValue,

package/locales/frFR.d.mts

@@ -114,6 +114,11 @@ export declare const frFR: {
           close?: string | undefined;
           a11yNoValue?: string | undefined;
           a11yConnector?: string | undefined;
+          zoomRangeDescription?: ((params: {
+            axisDirection: 'x' | 'y';
+            start: number;
+            end: number;
+          }) => string) | undefined;
           barDescription?: ((params: {
             value: number | null;
             formattedValue: string;