@mui/x-charts 9.12.0 → 9.13.0

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

@@ -13,6 +13,9 @@ import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/i
 import { selectorChartXAxis, selectorChartYAxis } from "../useChartCartesianAxis/useChartCartesianAxisRendering.selectors.mjs";
 import { getChartPoint } from "../../../getChartPoint.mjs";
 import { getItemAtAxisPosition } from "./utils/getItemAtAxisPosition.mjs";
+import { getItemAtRotationIndex } from "./utils/getItemAtRotationIndex.mjs";
+import { selectorChartRotationAxis } from "../useChartPolarAxis/useChartPolarAxis.selectors.mjs";
+import { selectorChartsInteractionRotationAxisIndex } from "../useChartPolarAxis/useChartPolarInteraction.selectors.mjs";
 import { findItemActivationHandler, isItemActivationKey } from "./itemActivation.mjs";
 import { selectorChartsIsFocusVisible, selectorChartsIsKeyboardActivationEnabled } from "./useChartKeyboardNavigation.selectors.mjs";
 
@@ -131,30 +134,55 @@ export const useChartKeyboardNavigation = ({
   });
 
   /**
-   * The item a click landed on, read from the item the pointer is over. Falls back to the axis
-   * under the pointer, which covers the line and area paths, whose hovered item only knows its
-   * series.
+   * The item a click landed on, read from the item the pointer is over. An area or line path only
+   * knows its series, and a radar reports no item at all, so an incomplete one falls back to the
+   * axis under the pointer.
    *
    * A click that resolves nothing is left alone rather than focusing the chart. The drawing area
    * is a rectangle, but the data rarely fills it: taking the focus from a click next to a pie,
    * outside its circle, reads as the chart grabbing clicks that were not meant for it.
    */
   const resolveItemAtPointer = useEventCallback(event => {
-    // Every series reports the item under the pointer, so the click itself needs no wiring.
+    const seriesConfig = selectorChartSeriesConfig(store.state);
     const hoveredItem = store.state.interaction?.hoveredItem;
-    if (hoveredItem != null) {
-      return hoveredItem;
+    // Cleaned before the check, because what a series stores is not always an identifier: the
+    // scatter reports its whole data point, whose optional `id` would read as an incomplete one.
+    const cleanedHoveredItem = hoveredItem == null ? null : cleanIdentifier(seriesConfig, hoveredItem);
+
+    // Series that report a complete item need no further wiring.
+    if (cleanedHoveredItem != null && isCompleteFocusIdentifier(cleanedHoveredItem)) {
+      return cleanedHoveredItem;
     }
     const element = chartsLayerContainerRef.current;
     const point = element === null ? null : getChartPoint(element, event);
-    const item = point && instance.isPointInside?.(point.x, point.y) ? getItemAtAxisPosition({
+    if (!point || !instance.isPointInside?.(point.x, point.y)) {
+      return null;
+    }
+    const processedSeries = selectorChartSeriesProcessed(store.state);
+    // An incomplete hovered item still names the series under the pointer, which is a better
+    // target than the focused one: a click on a series should stay on it.
+    const focusedItem = cleanedHoveredItem ?? store.state.keyboardNavigation.item;
+    const item = getItemAtAxisPosition({
       point,
       xAxis: selectorChartXAxis(store.state),
       yAxis: selectorChartYAxis(store.state),
-      processedSeries: selectorChartSeriesProcessed(store.state),
-      focusedItem: store.state.keyboardNavigation.item
-    }) : null;
-    return item;
+      processedSeries,
+      focusedItem
+    });
+    if (item !== null) {
+      return item;
+    }
+
+    // A radar area only covers the polygon the data draws, so a click inside the chart but outside
+    // it resolves nothing above. Fall back to the rotation axis, the same one the highlight uses.
+    if (selectorChartRotationAxis(store.state).axisIds.length === 0) {
+      return null;
+    }
+    return getItemAtRotationIndex({
+      dataIndex: selectorChartsInteractionRotationAxisIndex(store.state),
+      processedSeries,
+      focusedItem
+    });
   });
   const activationRegistrationsRef = React.useRef(new Map());
   const nextRegistrationIdRef = React.useRef(0);
@@ -234,6 +262,11 @@ export const useChartKeyboardNavigation = ({
       handler(event, focusedItem);
     }
     function keyboardHandler(event) {
+      // Item navigation only uses unmodified keys.
+      // Modified ones are left to the browser, and to chart interactions such as keyboard zoom and pan.
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+        return;
+      }
       let newFocusedItem = store.state.keyboardNavigation.item;
       const seriesConfig = selectorChartSeriesConfig(store.state);
       let seriesType = newFocusedItem?.type;

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.12.0",
+  "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-internals": "^9.12.0",
-    "@mui/x-internal-gestures": "^9.12.0"
+    "use-sync-external-store": "^1.6.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",