@mui/x-charts 9.11.1 → 9.13.0

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

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getItemAtAxisPosition = getItemAtAxisPosition;
+var _composition = require("../../../../../models/seriesType/composition");
+var _getAxisValue = require("../../useChartCartesianAxis/getAxisValue");
+var _getNonEmptySeriesArray = require("./getNonEmptySeriesArray");
+var _findVisibleDataIndex = require("./findVisibleDataIndex");
+/**
+ * Resolves the item a click falls on when it hit no item, by looking at the axis under the
+ * pointer. Keeps the focused series when there is one, so clicking the empty space above a bar
+ * moves along the series the user was already navigating.
+ *
+ * Returns `null` for charts without a cartesian axis, and when the axis resolves no index.
+ */
+function getItemAtAxisPosition({
+  point,
+  xAxis,
+  yAxis,
+  processedSeries,
+  focusedItem
+}) {
+  const target = getTargetSeries(processedSeries, focusedItem);
+  if (target === null) {
+    return null;
+  }
+  const series = processedSeries[target.type]?.series[target.seriesId];
+  const data = series?.data;
+  if (!data || data.length === 0) {
+    return null;
+  }
+
+  // Read the index off the axis the target series is bound to, which is not necessarily the
+  // default one on a chart with several axes.
+  const xAxisId = (series && 'xAxisId' in series ? series.xAxisId : undefined) ?? xAxis?.axisIds[0];
+  const yAxisId = (series && 'yAxisId' in series ? series.yAxisId : undefined) ?? yAxis?.axisIds[0];
+  const xAxisConfig = xAxisId === undefined ? undefined : xAxis?.axis[xAxisId];
+  const yAxisConfig = yAxisId === undefined ? undefined : yAxis?.axis[yAxisId];
+  if (!xAxisConfig && !yAxisConfig) {
+    return null;
+  }
+  const xIndex = xAxisConfig ? (0, _getAxisValue.getAxisIndex)(xAxisConfig, point.x) : -1;
+  const yIndex = yAxisConfig ? (0, _getAxisValue.getAxisIndex)(yAxisConfig, point.y) : -1;
+  const dataIndex = xIndex !== -1 ? xIndex : yIndex;
+  if (dataIndex === -1) {
+    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 a cartesian one, the first series with data otherwise. */
+function getTargetSeries(processedSeries, focusedItem) {
+  if (focusedItem != null && _composition.composableCartesianSeriesTypes.has(focusedItem.type) && processedSeries[focusedItem.type]?.series[focusedItem.seriesId] !== undefined) {
+    return {
+      type: focusedItem.type,
+      seriesId: focusedItem.seriesId
+    };
+  }
+  return (0, _getNonEmptySeriesArray.getNonEmptySeriesArray)(processedSeries, _composition.composableCartesianSeriesTypes)[0] ?? null;
+}

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

@@ -0,0 +1,76 @@
+import { composableCartesianSeriesTypes } from "../../../../../models/seriesType/composition.mjs";
+import { getAxisIndex } from "../../useChartCartesianAxis/getAxisValue.mjs";
+import { getNonEmptySeriesArray } from "./getNonEmptySeriesArray.mjs";
+import { findVisibleDataIndex } from "./findVisibleDataIndex.mjs";
+
+/**
+ * Resolves the item a click falls on when it hit no item, by looking at the axis under the
+ * pointer. Keeps the focused series when there is one, so clicking the empty space above a bar
+ * moves along the series the user was already navigating.
+ *
+ * Returns `null` for charts without a cartesian axis, and when the axis resolves no index.
+ */
+export function getItemAtAxisPosition({
+  point,
+  xAxis,
+  yAxis,
+  processedSeries,
+  focusedItem
+}) {
+  const target = getTargetSeries(processedSeries, focusedItem);
+  if (target === null) {
+    return null;
+  }
+  const series = processedSeries[target.type]?.series[target.seriesId];
+  const data = series?.data;
+  if (!data || data.length === 0) {
+    return null;
+  }
+
+  // Read the index off the axis the target series is bound to, which is not necessarily the
+  // default one on a chart with several axes.
+  const xAxisId = (series && 'xAxisId' in series ? series.xAxisId : undefined) ?? xAxis?.axisIds[0];
+  const yAxisId = (series && 'yAxisId' in series ? series.yAxisId : undefined) ?? yAxis?.axisIds[0];
+  const xAxisConfig = xAxisId === undefined ? undefined : xAxis?.axis[xAxisId];
+  const yAxisConfig = yAxisId === undefined ? undefined : yAxis?.axis[yAxisId];
+  if (!xAxisConfig && !yAxisConfig) {
+    return null;
+  }
+  const xIndex = xAxisConfig ? getAxisIndex(xAxisConfig, point.x) : -1;
+  const yIndex = yAxisConfig ? getAxisIndex(yAxisConfig, point.y) : -1;
+  const dataIndex = xIndex !== -1 ? xIndex : yIndex;
+  if (dataIndex === -1) {
+    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 a cartesian one, the first series with data otherwise. */
+function getTargetSeries(processedSeries, focusedItem) {
+  if (focusedItem != null && composableCartesianSeriesTypes.has(focusedItem.type) && processedSeries[focusedItem.type]?.series[focusedItem.seriesId] !== undefined) {
+    return {
+      type: focusedItem.type,
+      seriesId: focusedItem.seriesId
+    };
+  }
+  return getNonEmptySeriesArray(processedSeries, composableCartesianSeriesTypes)[0] ?? null;
+}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "9.11.1",
+  "version": "9.13.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "license": "MIT",
@@ -28,15 +28,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@mui/utils": "^9.3.0",
+    "@mui/utils": "^9.4.0",
+    "@mui/x-charts-vendor": "^9.13.0",
+    "@mui/x-internal-gestures": "^9.13.0",
+    "@mui/x-internals": "^9.13.0",
     "bezier-easing": "^3.0.1",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.2.0",
-    "use-sync-external-store": "^1.6.0",
-    "@mui/x-charts-vendor": "^9.11.1",
-    "@mui/x-internal-gestures": "^9.10.0",
-    "@mui/x-internals": "^9.11.0"
+    "use-sync-external-store": "^1.6.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",