@mui/x-charts 8.11.3 → 8.13.0

package/esm/internals/plugins/featurePlugins/useChartHighlight/highlightStates.js

@@ -0,0 +1,32 @@
+export function isSeriesHighlighted(scope, item, seriesId) {
+  return scope?.highlight === 'series' && item?.seriesId === seriesId;
+}
+export function isSeriesFaded(scope, item, seriesId) {
+  if (isSeriesHighlighted(scope, item, seriesId)) {
+    return false;
+  }
+  return scope?.fade === 'global' && item != null || scope?.fade === 'series' && item?.seriesId === seriesId;
+}
+
+/**
+ * Returns the data index of the highlighted item for a specific series.
+ * If the item is not highlighted, it returns `null`.
+ */
+export function getSeriesHighlightedItem(scope, item, seriesId) {
+  return scope?.highlight === 'item' && item?.seriesId === seriesId ? item.dataIndex : null;
+}
+
+/**
+ * Returns the data index of the "unfaded item" for a specific series.
+ * An "unfaded item" is the only item of a faded series that shouldn't be faded.
+ * If the series is not faded or if there is no highlighted item, it returns `null`.
+ */
+export function getSeriesUnfadedItem(scope, item, seriesId) {
+  if (isSeriesHighlighted(scope, item, seriesId)) {
+    return null;
+  }
+  if (getSeriesHighlightedItem(scope, item, seriesId) === item?.dataIndex) {
+    return null;
+  }
+  return (scope?.fade === 'series' || scope?.fade === 'global') && item?.seriesId === seriesId ? item.dataIndex : null;
+}

package/esm/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.d.ts

@@ -27,4 +27,8 @@ export declare const selectorChartsIsFadedCallback: import("reselect").Selector<
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & import("./useChartHighlight.types.js").UseChartHighlightState, (item: HighlightItemData | null) => boolean, any[]>;
 export declare const selectorChartsIsHighlighted: import("reselect").Selector<any, boolean, [item: HighlightItemData | null]>;
+export declare const selectorChartIsSeriesHighlighted: import("reselect").Selector<any, boolean, [seriesId: SeriesId]>;
+export declare const selectorChartIsSeriesFaded: import("reselect").Selector<any, boolean, [seriesId: SeriesId]>;
+export declare const selectorChartSeriesUnfadedItem: import("reselect").Selector<any, number | null | undefined, [seriesId: SeriesId]>;
+export declare const selectorChartSeriesHighlightedItem: import("reselect").Selector<any, number | null | undefined, [seriesId: SeriesId]>;
 export declare const selectorChartsIsFaded: import("reselect").Selector<any, boolean, [item: HighlightItemData | null]>;

package/esm/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js

@@ -1,6 +1,7 @@
 import { createSelector } from "../../utils/selectors.js";
 import { createIsHighlighted } from "./createIsHighlighted.js";
 import { createIsFaded } from "./createIsFaded.js";
+import { getSeriesHighlightedItem, getSeriesUnfadedItem, isSeriesFaded, isSeriesHighlighted } from "./highlightStates.js";
 const selectHighlight = state => state.highlight;
 const selectSeries = state => state.series;
 export const selectorChartsHighlightScopePerSeriesId = createSelector([selectSeries], series => {
@@ -32,6 +33,10 @@ export const selectorChartsIsFadedCallback = createSelector([selectorChartsHighl
 export const selectorChartsIsHighlighted = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, item) => item], function selectorChartsIsHighlighted(highlightScope, highlightedItem, item) {
   return createIsHighlighted(highlightScope, highlightedItem)(item);
 });
+export const selectorChartIsSeriesHighlighted = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, seriesId) => seriesId], isSeriesHighlighted);
+export const selectorChartIsSeriesFaded = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, seriesId) => seriesId], isSeriesFaded);
+export const selectorChartSeriesUnfadedItem = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, seriesId) => seriesId], getSeriesUnfadedItem);
+export const selectorChartSeriesHighlightedItem = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, seriesId) => seriesId], getSeriesHighlightedItem);
 export const selectorChartsIsFaded = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, item) => item], function selectorChartsIsFaded(highlightScope, highlightedItem, item) {
   return createIsFaded(highlightScope, highlightedItem)(item);
 });

package/esm/internals/plugins/featurePlugins/useChartInteraction/checkHasInteractionPlugin.d.ts

@@ -0,0 +1,3 @@
+import { ChartAnyPluginSignature, ChartUsedInstance } from "../../models/plugin.js";
+import { UseChartInteractionInstance } from "./useChartInteraction.types.js";
+export declare function checkHasInteractionPlugin<T extends ChartAnyPluginSignature>(instance: ChartUsedInstance<T>): instance is ChartUsedInstance<T> & UseChartInteractionInstance;

package/esm/internals/plugins/featurePlugins/useChartInteraction/checkHasInteractionPlugin.js

@@ -0,0 +1,3 @@
+export function checkHasInteractionPlugin(instance) {
+  return instance.setPointerCoordinate !== undefined;
+}

package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -7,10 +7,10 @@ export const useChartInteraction = ({
   const cleanInteraction = useEventCallback(function cleanInteraction() {
     store.update(prev => {
       return _extends({}, prev, {
-        interaction: {
+        interaction: _extends({}, prev.interaction, {
           pointer: null,
           item: null
-        }
+        })
       });
     });
   });
@@ -51,7 +51,8 @@ export const useChartInteraction = ({
   const setPointerCoordinate = useEventCallback(function setPointerCoordinate(coordinate) {
     store.update(prev => _extends({}, prev, {
       interaction: _extends({}, prev.interaction, {
-        pointer: coordinate
+        pointer: coordinate,
+        lastUpdate: coordinate !== null ? 'pointer' : prev.interaction.lastUpdate
       })
     }));
   });
@@ -67,7 +68,8 @@ export const useChartInteraction = ({
 useChartInteraction.getInitialState = () => ({
   interaction: {
     item: null,
-    pointer: null
+    pointer: null,
+    lastUpdate: 'pointer'
   }
 });
 useChartInteraction.params = {};

package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.d.ts

@@ -27,4 +27,9 @@ export declare const selectorChartsInteractionItemIsDefined: import("reselect").
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, boolean, any[]>;
+}, boolean, any[]>;
+export declare const selectorChartsLastInteraction: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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("./useChartInteraction.types.js").UseChartInteractionState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, import("./useChartInteraction.types.js").InteractionUpdateSource | undefined, any[]>;

package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.selectors.js

@@ -5,4 +5,5 @@ export const selectorChartsInteractionItem = createSelector([selectInteraction],
 export const selectorChartsInteractionPointer = createSelector([selectInteraction], interaction => interaction?.pointer ?? null);
 export const selectorChartsInteractionPointerX = createSelector([selectorChartsInteractionPointer], pointer => pointer && pointer.x);
 export const selectorChartsInteractionPointerY = createSelector([selectorChartsInteractionPointer], pointer => pointer && pointer.y);
-export const selectorChartsInteractionItemIsDefined = createSelector([selectorChartsInteractionItem], item => item !== null);
+export const selectorChartsInteractionItemIsDefined = createSelector([selectorChartsInteractionItem], item => item !== null);
+export const selectorChartsLastInteraction = createSelector([selectInteraction], interaction => interaction?.lastUpdate);

package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.ts

@@ -4,6 +4,7 @@ export type Coordinate = {
   x: number;
   y: number;
 };
+export type InteractionUpdateSource = 'pointer' | 'keyboard';
 export interface UseChartInteractionInstance {
   /**
    * Remove all interaction.
@@ -35,6 +36,11 @@ export interface UseChartInteractionState {
      * The x/y SVG coordinate of the "main" pointer
      */
     pointer: Coordinate | null;
+    /**
+     * The last interaction highlight update.
+     * Used to decide if highlight should be based on pointer position or keyboard navigation.
+     */
+    lastUpdate: InteractionUpdateSource;
   };
 }
 export type UseChartInteractionSignature = ChartPluginSignature<{

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

@@ -0,0 +1,3 @@
+export { useChartKeyboardNavigation } from "./useChartKeyboardNavigation.js";
+export * from "./useChartKeyboardNavigation.selectors.js";
+export type { UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.js";

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

@@ -0,0 +1,2 @@
+export { useChartKeyboardNavigation } from "./useChartKeyboardNavigation.js";
+export * from "./useChartKeyboardNavigation.selectors.js";

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

@@ -0,0 +1,3 @@
+import { ChartPlugin } from "../../models/index.js";
+import { UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.js";
+export declare const useChartKeyboardNavigation: ChartPlugin<UseChartKeyboardNavigationSignature>;

package/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.helpers.d.ts

@@ -0,0 +1,20 @@
+import { ChartSeriesType, ChartsSeriesConfig } from "../../../../models/seriesType/config.js";
+import { SeriesId } from "../../../../models/seriesType/common.js";
+import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
+/**
+ * Returns the next series type and id that contains some data.
+ * Returns `null` if no other series have data.
+ */
+export declare function getNextSeriesWithData(series: ProcessedSeries<keyof ChartsSeriesConfig>, type?: ChartSeriesType, seriesId?: SeriesId): {
+  type: Exclude<ChartSeriesType, 'sankey'>;
+  seriesId: SeriesId;
+} | null;
+/**
+ * Returns the previous series type and id that contains some data.
+ * Returns `null` if no other series have data.
+ */
+export declare function getPreviousSeriesWithData(series: ProcessedSeries<keyof ChartsSeriesConfig>, type?: ChartSeriesType, seriesId?: SeriesId): {
+  type: Exclude<ChartSeriesType, 'sankey'>;
+  seriesId: SeriesId;
+} | null;
+export declare function seriesHasData(series: ProcessedSeries<keyof ChartsSeriesConfig>, type: ChartSeriesType, seriesId: SeriesId): boolean | undefined;

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

@@ -0,0 +1,88 @@
+/**
+ * Returns the next series type and id that contains some data.
+ * Returns `null` if no other series have data.
+ */
+export function getNextSeriesWithData(series, type, seriesId) {
+  const startingTypeIndex = type !== undefined && series[type] ? Object.keys(series).indexOf(type) : 0;
+  const currentSeriesIndex = type !== undefined && seriesId !== undefined && series[type] && series[type].series[seriesId] ? series[type].seriesOrder.indexOf(seriesId) : -1;
+  const typesAvailable = Object.keys(series).filter(t => t !== 'sankey');
+
+  // Loop over all series types starting with the current seriesType
+  for (let typeGap = 0; typeGap < typesAvailable.length; typeGap += 1) {
+    const typeIndex = (startingTypeIndex + typeGap) % typesAvailable.length;
+    const seriesOfType = series[typesAvailable[typeIndex]];
+
+    // Edge case for the current series type: we don't loop on previous series of the same type.
+    const startingSeriesIndex = typeGap === 0 ? currentSeriesIndex + 1 : 0;
+    for (let seriesIndex = startingSeriesIndex; seriesIndex < seriesOfType.seriesOrder.length; seriesIndex += 1) {
+      if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
+        return {
+          type: typesAvailable[typeIndex],
+          seriesId: seriesOfType.seriesOrder[seriesIndex]
+        };
+      }
+    }
+  }
+
+  // End looping on the initial type up to the initial series (excluded)
+  const typeIndex = startingTypeIndex;
+  const seriesOfType = series[typesAvailable[typeIndex]];
+  const endingSeriesIndex = currentSeriesIndex;
+  for (let seriesIndex = 0; seriesIndex < endingSeriesIndex; seriesIndex += 1) {
+    if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
+      return {
+        type: typesAvailable[typeIndex],
+        seriesId: seriesOfType.seriesOrder[seriesIndex]
+      };
+    }
+  }
+  return null;
+}
+
+/**
+ * Returns the previous series type and id that contains some data.
+ * Returns `null` if no other series have data.
+ */
+export function getPreviousSeriesWithData(series, type, seriesId) {
+  const startingTypeIndex = type !== undefined && series[type] ? Object.keys(series).indexOf(type) : 0;
+  const startingSeriesIndex = type !== undefined && seriesId !== undefined && series[type] && series[type].series[seriesId] ? series[type].seriesOrder.indexOf(seriesId) : 1;
+  const typesAvailable = Object.keys(series).filter(t => t !== 'sankey');
+
+  // Loop over all series types starting with the current seriesType
+  for (let typeGap = 0; typeGap < typesAvailable.length; typeGap += 1) {
+    const typeIndex = (typesAvailable.length + startingTypeIndex - typeGap) % typesAvailable.length;
+    const seriesOfType = series[typesAvailable[typeIndex]];
+    const maxGap = typeGap === 0 ? startingSeriesIndex + 1 : seriesOfType.seriesOrder.length;
+    for (let seriesGap = 1; seriesGap < maxGap; seriesGap += 1) {
+      const seriesIndex = (seriesOfType.seriesOrder.length + startingSeriesIndex - seriesGap) % seriesOfType.seriesOrder.length;
+      if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
+        return {
+          type: typesAvailable[typeIndex],
+          seriesId: seriesOfType.seriesOrder[seriesIndex]
+        };
+      }
+    }
+  }
+
+  // End looping on the initial type down to the initial series (excluded)
+  const typeIndex = startingTypeIndex;
+  const seriesOfType = series[typesAvailable[typeIndex]];
+  const availableSeriesIds = seriesOfType.seriesOrder;
+  for (let seriesIndex = availableSeriesIds.length - 1; seriesIndex > startingSeriesIndex; seriesIndex -= 1) {
+    if (seriesOfType.series[seriesOfType.seriesOrder[seriesIndex]].data.length > 0) {
+      return {
+        type: typesAvailable[typeIndex],
+        seriesId: seriesOfType.seriesOrder[seriesIndex]
+      };
+    }
+  }
+  return null;
+}
+export function seriesHasData(series, type, seriesId) {
+  // @ts-ignore snakey is not in MIT version
+  if (type === 'sankey') {
+    return false;
+  }
+  const data = series[type]?.series[seriesId]?.data;
+  return data && data.length > 0;
+}

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

@@ -0,0 +1,170 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { getNextSeriesWithData, getPreviousSeriesWithData, seriesHasData } from "./useChartKeyboardNavigation.helpers.js";
+function getNextIndexFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  if (type === undefined ||
+  // @ts-ignore sankey is not in MIT version
+  type === 'sankey' || seriesId === undefined || !seriesHasData(state.series.processedSeries, type, seriesId)) {
+    const nextSeries = getNextSeriesWithData(state.series.processedSeries, type, seriesId);
+    if (nextSeries === null) {
+      return null;
+    }
+    type = nextSeries.type;
+    seriesId = nextSeries.seriesId;
+  }
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: ((state.keyboardNavigation.item?.dataIndex ?? -1) + 1) % dataLength
+  };
+}
+function getPreviousIndexFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  if (type === undefined ||
+  // @ts-ignore sankey is not in MIT version
+  type === 'sankey' || seriesId === undefined || !seriesHasData(state.series.processedSeries, type, seriesId)) {
+    const previousSeries = getPreviousSeriesWithData(state.series.processedSeries, type, seriesId);
+    if (previousSeries === null) {
+      return null;
+    }
+    type = previousSeries.type;
+    seriesId = previousSeries.seriesId;
+  }
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: (dataLength + (state.keyboardNavigation.item?.dataIndex ?? 1) - 1) % dataLength
+  };
+}
+function getNextSeriesFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  const nextSeries = getNextSeriesWithData(state.series.processedSeries, type, seriesId);
+  if (nextSeries === null) {
+    return null; // No series to move the focus to.
+  }
+  type = nextSeries.type;
+  seriesId = nextSeries.seriesId;
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
+  };
+}
+function getPreviousSeriesFocusedItem(state) {
+  let {
+    type,
+    seriesId
+  } = state.keyboardNavigation.item ?? {};
+  const previousSeries = getPreviousSeriesWithData(state.series.processedSeries, type, seriesId);
+  if (previousSeries === null) {
+    return null; // No series to move the focus to.
+  }
+  type = previousSeries.type;
+  seriesId = previousSeries.seriesId;
+  const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+  return {
+    type,
+    seriesId,
+    dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
+  };
+}
+export const useChartKeyboardNavigation = ({
+  params,
+  store,
+  svgRef
+}) => {
+  const removeFocus = useEventCallback(function removeFocus() {
+    store.update(state => {
+      if (state.keyboardNavigation.item === null) {
+        return state;
+      }
+      return _extends({}, state, {
+        keyboardNavigation: _extends({}, state.keyboardNavigation, {
+          item: null
+        })
+      });
+    });
+  });
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (!element || !params.enableKeyboardNavigation) {
+      return undefined;
+    }
+    function keyboardHandler(event) {
+      store.update(prevState => {
+        let newFocusedItem = prevState.keyboardNavigation.item;
+        switch (event.key) {
+          case 'ArrowRight':
+            newFocusedItem = getNextIndexFocusedItem(prevState);
+            break;
+          case 'ArrowLeft':
+            newFocusedItem = getPreviousIndexFocusedItem(prevState);
+            break;
+          case 'ArrowDown':
+            {
+              newFocusedItem = getPreviousSeriesFocusedItem(prevState);
+              break;
+            }
+          case 'ArrowUp':
+            {
+              newFocusedItem = getNextSeriesFocusedItem(prevState);
+              break;
+            }
+          default:
+            break;
+        }
+        if (newFocusedItem !== prevState.keyboardNavigation.item) {
+          event.preventDefault();
+          return _extends({}, prevState, prevState.interaction && {
+            interaction: _extends({}, prevState.interaction, {
+              lastUpdate: 'keyboard'
+            })
+          }, {
+            keyboardNavigation: _extends({}, prevState.keyboardNavigation, {
+              item: newFocusedItem
+            })
+          });
+        }
+        return prevState;
+      });
+    }
+    element.addEventListener('keydown', keyboardHandler);
+    element.addEventListener('blur', removeFocus);
+    return () => {
+      element.removeEventListener('keydown', keyboardHandler);
+      element.removeEventListener('blur', removeFocus);
+    };
+  }, [svgRef, removeFocus, params.enableKeyboardNavigation, store]);
+  useEnhancedEffect(() => store.update(prev => prev.keyboardNavigation.enableKeyboardNavigation === params.enableKeyboardNavigation ? prev : _extends({}, prev, {
+    keyboardNavigation: _extends({}, prev.keyboardNavigation, {
+      enableKeyboardNavigation: !!params.enableKeyboardNavigation
+    })
+  })), [store, params.enableKeyboardNavigation]);
+  return {};
+};
+useChartKeyboardNavigation.getInitialState = params => ({
+  keyboardNavigation: {
+    item: null,
+    enableKeyboardNavigation: !!params.enableKeyboardNavigation
+  }
+});
+useChartKeyboardNavigation.params = {
+  enableKeyboardNavigation: true
+};

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

@@ -0,0 +1,37 @@
+import { SeriesId } from "../../../../models/seriesType/common.js";
+import { AxisItemIdentifier } from "../../../../models/axis.js";
+export declare const selectorChartsHasFocusedItem: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, boolean, any[]>;
+export declare const selectorChartsFocusedSeriesType: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, keyof import("../../../index.js").ChartsSeriesConfig | undefined, any[]>;
+export declare const selectorChartsFocusedSeriesId: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, SeriesId | undefined, any[]>;
+export declare const selectorChartsFocusedDataIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, number | undefined, any[]>;
+export declare const selectorChartsIsKeyboardNavigationEnabled: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, boolean, any[]>;
+export declare const selectorChartsKeyboardXAxisIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier | undefined, any[]>;
+export declare const selectorChartsKeyboardYAxisIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
+} & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier | undefined, any[]>;

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

@@ -0,0 +1,33 @@
+import { createSelector } from "../../utils/selectors.js";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
+import { selectorChartXAxis, selectorChartYAxis } from "../useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js";
+const selectKeyboardNavigation = state => state.keyboardNavigation;
+export const selectorChartsHasFocusedItem = createSelector([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item != null);
+export const selectorChartsFocusedSeriesType = createSelector([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.type);
+export const selectorChartsFocusedSeriesId = createSelector([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.seriesId);
+export const selectorChartsFocusedDataIndex = createSelector([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.dataIndex);
+export const selectorChartsIsKeyboardNavigationEnabled = createSelector([selectKeyboardNavigation], keyboardNavigationState => !!keyboardNavigationState?.enableKeyboardNavigation);
+
+/**
+ * Selectors to override highlight behavior.
+ */
+
+const createSelectAxisHighlight = direction => (type, seriesId, dataIndex, axis, series) => {
+  if (type === undefined || seriesId === undefined || dataIndex === undefined) {
+    return undefined;
+  }
+  const seriesConfig = series[type]?.series[seriesId];
+  if (!seriesConfig) {
+    return undefined;
+  }
+  let axisId = direction === 'x' ? 'xAxisId' in seriesConfig && seriesConfig.xAxisId : 'yAxisId' in seriesConfig && seriesConfig.yAxisId;
+  if (axisId === undefined || axisId === false) {
+    axisId = axis.axisIds[0];
+  }
+  return {
+    axisId,
+    dataIndex
+  };
+};
+export const selectorChartsKeyboardXAxisIndex = createSelector([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, selectorChartXAxis, selectorChartSeriesProcessed], createSelectAxisHighlight('x'));
+export const selectorChartsKeyboardYAxisIndex = createSelector([selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex, selectorChartYAxis, selectorChartSeriesProcessed], createSelectAxisHighlight('y'));

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

@@ -0,0 +1,36 @@
+import { ChartPluginSignature } from "../../models/index.js";
+import { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import { SeriesId } from "../../../../models/seriesType/common.js";
+import { UseChartInteractionSignature } from "../useChartInteraction/index.js";
+export interface UseChartKeyboardNavigationInstance {}
+type SeriesItemIdentifier = {
+  /**
+   * The type of the series
+   */
+  type: ChartSeriesType;
+  /**
+   * The id of the series with focus.
+   */
+  seriesId: SeriesId;
+  /**
+   * The index of the data point with focus.
+   */
+  dataIndex: number;
+};
+export interface UseChartKeyboardNavigationState {
+  keyboardNavigation: {
+    item: null | SeriesItemIdentifier;
+    enableKeyboardNavigation: boolean;
+  };
+}
+type UseChartKeyboardNavigationParameters = {
+  enableKeyboardNavigation?: boolean;
+};
+export type UseChartKeyboardNavigationSignature = ChartPluginSignature<{
+  params: UseChartKeyboardNavigationParameters;
+  defaultizedParams: UseChartKeyboardNavigationParameters;
+  instance: UseChartKeyboardNavigationInstance;
+  state: UseChartKeyboardNavigationState;
+  optionalDependencies: [UseChartInteractionSignature];
+}>;
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint } from '@mui/x-charts-vendor/d3-scale';
 import { isBandScaleConfig, isPointScaleConfig } from "../../../../models/axis.js";
 import { getColorScale, getOrdinalColorScale } from "../../../colorScale.js";
-import { getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
+import { getDefaultTickNumber, getTickNumber, scaleTickNumberByRange } from "../../../ticks.js";
 import { getScale } from "../../../getScale.js";
 import { isDateData, createDateFormatter } from "../../../dateHelpers.js";
 import { getAxisExtremum } from "./getAxisExtremum.js";
@@ -99,10 +99,7 @@ export function computeAxisValue({
       axisExtremums[0] = min;
       axisExtremums[1] = max;
     }
-    const rawTickNumber = getTickNumber(_extends({}, axis, {
-      range,
-      domain: axisExtremums
-    }));
+    const rawTickNumber = getTickNumber(axis, axisExtremums, getDefaultTickNumber(Math.abs(range[1] - range[0])));
     const tickNumber = scaleTickNumberByRange(rawTickNumber, range);
     const scale = getScale(scaleType, axisExtremums, range);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;