@mui/x-charts 8.11.2 → 8.12.0

package/internals/plugins/featurePlugins/{useChartVoronoi/useChartVoronoi.types.d.ts → useChartClosestPoint/useChartClosestPoint.types.d.ts}

@@ -29,10 +29,11 @@ export interface UseChartVoronoiParameters {
    */
   disableVoronoi?: boolean;
   /**
-   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
    * If `undefined`, the radius is assumed to be infinite.
    */
-  voronoiMaxRadius?: number | undefined;
+  voronoiMaxRadius?: 'item' | number | undefined;
   /**
    * Callback fired when clicking close to an item.
    * This is only available for scatter plot for now.
@@ -41,10 +42,13 @@ export interface UseChartVoronoiParameters {
    */
   onItemClick?: (event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void;
 }
-export type UseChartVoronoiDefaultizedParameters = UseChartVoronoiParameters & {
+export type UseChartVoronoiDefaultizedParameters = Pick<UseChartVoronoiParameters, 'voronoiMaxRadius' | 'onItemClick'> & {
+  /**
+   * If true, the voronoi plugin is disabled.
+   */
   disableVoronoi: boolean;
 };
-export type UseChartVoronoiSignature = ChartPluginSignature<{
+export type UseChartClosestPointSignature = ChartPluginSignature<{
   instance: UseChartVoronoiInstance;
   state: UseChartVoronoiState;
   params: UseChartVoronoiParameters;

package/internals/plugins/featurePlugins/useChartHighlight/highlightStates.d.ts

@@ -0,0 +1,16 @@
+import { HighlightItemData } from "./useChartHighlight.types.js";
+import { HighlightScope } from "./highlightConfig.types.js";
+import { SeriesId } from "../../../../models/seriesType/common.js";
+export declare function isSeriesHighlighted(scope: Partial<HighlightScope> | null, item: HighlightItemData | null, seriesId: SeriesId): boolean;
+export declare function isSeriesFaded(scope: Partial<HighlightScope> | null, item: HighlightItemData | null, seriesId: SeriesId): boolean;
+/**
+ * Returns the data index of the highlighted item for a specific series.
+ * If the item is not highlighted, it returns `null`.
+ */
+export declare function getSeriesHighlightedItem(scope: Partial<HighlightScope> | null, item: HighlightItemData | null, seriesId: SeriesId): number | null | undefined;
+/**
+ * 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 declare function getSeriesUnfadedItem(scope: Partial<HighlightScope> | null, item: HighlightItemData | null, seriesId: SeriesId): number | null | undefined;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSeriesHighlightedItem = getSeriesHighlightedItem;
+exports.getSeriesUnfadedItem = getSeriesUnfadedItem;
+exports.isSeriesFaded = isSeriesFaded;
+exports.isSeriesHighlighted = isSeriesHighlighted;
+function isSeriesHighlighted(scope, item, seriesId) {
+  return scope?.highlight === 'series' && item?.seriesId === seriesId;
+}
+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`.
+ */
+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`.
+ */
+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/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/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartsIsHighlightedCallback = exports.selectorChartsIsHighlighted = exports.selectorChartsIsFadedCallback = exports.selectorChartsIsFaded = exports.selectorChartsHighlightedItem = exports.selectorChartsHighlightScopePerSeriesId = exports.selectorChartsHighlightScope = void 0;
+exports.selectorChartsIsHighlightedCallback = exports.selectorChartsIsHighlighted = exports.selectorChartsIsFadedCallback = exports.selectorChartsIsFaded = exports.selectorChartsHighlightedItem = exports.selectorChartsHighlightScopePerSeriesId = exports.selectorChartsHighlightScope = exports.selectorChartSeriesUnfadedItem = exports.selectorChartSeriesHighlightedItem = exports.selectorChartIsSeriesHighlighted = exports.selectorChartIsSeriesFaded = void 0;
 var _selectors = require("../../utils/selectors");
 var _createIsHighlighted = require("./createIsHighlighted");
 var _createIsFaded = require("./createIsFaded");
+var _highlightStates = require("./highlightStates");
 const selectHighlight = state => state.highlight;
 const selectSeries = state => state.series;
 const selectorChartsHighlightScopePerSeriesId = exports.selectorChartsHighlightScopePerSeriesId = (0, _selectors.createSelector)([selectSeries], series => {
@@ -38,6 +39,10 @@ const selectorChartsIsFadedCallback = exports.selectorChartsIsFadedCallback = (0
 const selectorChartsIsHighlighted = exports.selectorChartsIsHighlighted = (0, _selectors.createSelector)([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, item) => item], function selectorChartsIsHighlighted(highlightScope, highlightedItem, item) {
   return (0, _createIsHighlighted.createIsHighlighted)(highlightScope, highlightedItem)(item);
 });
+const selectorChartIsSeriesHighlighted = exports.selectorChartIsSeriesHighlighted = (0, _selectors.createSelector)([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, seriesId) => seriesId], _highlightStates.isSeriesHighlighted);
+const selectorChartIsSeriesFaded = exports.selectorChartIsSeriesFaded = (0, _selectors.createSelector)([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, seriesId) => seriesId], _highlightStates.isSeriesFaded);
+const selectorChartSeriesUnfadedItem = exports.selectorChartSeriesUnfadedItem = (0, _selectors.createSelector)([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, seriesId) => seriesId], _highlightStates.getSeriesUnfadedItem);
+const selectorChartSeriesHighlightedItem = exports.selectorChartSeriesHighlightedItem = (0, _selectors.createSelector)([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, seriesId) => seriesId], _highlightStates.getSeriesHighlightedItem);
 const selectorChartsIsFaded = exports.selectorChartsIsFaded = (0, _selectors.createSelector)([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, item) => item], function selectorChartsIsFaded(highlightScope, highlightedItem, item) {
   return (0, _createIsFaded.createIsFaded)(highlightScope, highlightedItem)(item);
 });

package/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/internals/plugins/featurePlugins/useChartInteraction/checkHasInteractionPlugin.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkHasInteractionPlugin = checkHasInteractionPlugin;
+function checkHasInteractionPlugin(instance) {
+  return instance.setPointerCoordinate !== undefined;
+}

package/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/internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useChartKeyboardNavigation: true
+};
+Object.defineProperty(exports, "useChartKeyboardNavigation", {
+  enumerable: true,
+  get: function () {
+    return _useChartKeyboardNavigation.useChartKeyboardNavigation;
+  }
+});
+var _useChartKeyboardNavigation = require("./useChartKeyboardNavigation");
+var _useChartKeyboardNavigation2 = require("./useChartKeyboardNavigation.selectors");
+Object.keys(_useChartKeyboardNavigation2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartKeyboardNavigation2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartKeyboardNavigation2[key];
+    }
+  });
+});

package/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/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/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.helpers.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNextSeriesWithData = getNextSeriesWithData;
+exports.getPreviousSeriesWithData = getPreviousSeriesWithData;
+exports.seriesHasData = seriesHasData;
+/**
+ * Returns the next series type and id that contains some data.
+ * Returns `null` if no other series have data.
+ */
+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.
+ */
+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;
+}
+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/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.js

@@ -0,0 +1,218 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartKeyboardNavigation = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useChartKeyboardNavigation = require("./useChartKeyboardNavigation.helpers");
+const useChartKeyboardNavigation = ({
+  params,
+  store,
+  svgRef
+}) => {
+  const focusNextItem = (0, _useEventCallback.default)(function focusNextItem() {
+    store.update(state => {
+      let {
+        type,
+        seriesId
+      } = state.keyboardNavigation.item ?? {};
+      if (type === undefined ||
+      // @ts-ignore sankey is not in MIT version
+      type === 'sankey' || seriesId === undefined || !(0, _useChartKeyboardNavigation.seriesHasData)(state.series.processedSeries, type, seriesId)) {
+        const nextSeries = (0, _useChartKeyboardNavigation.getNextSeriesWithData)(state.series.processedSeries, type, seriesId);
+        if (nextSeries === null) {
+          return (0, _extends2.default)({}, state, {
+            keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
+              item: null // No series to move the focus too.
+            })
+          });
+        }
+        type = nextSeries.type;
+        seriesId = nextSeries.seriesId;
+      }
+      const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+      return (0, _extends2.default)({}, state, {
+        keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
+          item: {
+            type,
+            seriesId,
+            dataIndex: ((state.keyboardNavigation.item?.dataIndex ?? -1) + 1) % dataLength
+          }
+        })
+      });
+    });
+  });
+  const focusPreviousItem = (0, _useEventCallback.default)(function focusPreviousItem() {
+    store.update(state => {
+      let {
+        type,
+        seriesId
+      } = state.keyboardNavigation.item ?? {};
+      if (type === undefined ||
+      // @ts-ignore sankey is not in MIT version
+      type === 'sankey' || seriesId === undefined || !(0, _useChartKeyboardNavigation.seriesHasData)(state.series.processedSeries, type, seriesId)) {
+        const previousSeries = (0, _useChartKeyboardNavigation.getPreviousSeriesWithData)(state.series.processedSeries, type, seriesId);
+        if (previousSeries === null) {
+          return (0, _extends2.default)({}, state, {
+            keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
+              item: null // No series to move the focus too.} };
+            })
+          });
+        }
+        type = previousSeries.type;
+        seriesId = previousSeries.seriesId;
+      }
+      const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+      return (0, _extends2.default)({}, state, {
+        keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
+          item: {
+            type,
+            seriesId,
+            dataIndex: (dataLength + (state.keyboardNavigation.item?.dataIndex ?? 1) - 1) % dataLength
+          }
+        })
+      });
+    });
+  });
+  const focusPreviousSeries = (0, _useEventCallback.default)(function focusPreviousSeries() {
+    let setNewSeries = false;
+    store.update(state => {
+      let {
+        type,
+        seriesId
+      } = state.keyboardNavigation.item ?? {};
+      const previousSeries = (0, _useChartKeyboardNavigation.getPreviousSeriesWithData)(state.series.processedSeries, type, seriesId);
+      if (previousSeries === null) {
+        return (0, _extends2.default)({}, state, {
+          keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
+            item: null // No series to move the focus too.
+          })
+        });
+      }
+      type = previousSeries.type;
+      seriesId = previousSeries.seriesId;
+      const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+      setNewSeries = true;
+      return (0, _extends2.default)({}, state, {
+        keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
+          item: {
+            type,
+            seriesId,
+            dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
+          }
+        })
+      });
+    });
+    return setNewSeries;
+  });
+  const focusNextSeries = (0, _useEventCallback.default)(function focusNextSeries() {
+    let setNewSeries = false;
+    store.update(state => {
+      let {
+        type,
+        seriesId
+      } = state.keyboardNavigation.item ?? {};
+      const nextSeries = (0, _useChartKeyboardNavigation.getNextSeriesWithData)(state.series.processedSeries, type, seriesId);
+      if (nextSeries === null) {
+        return (0, _extends2.default)({}, state, {
+          keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
+            item: null // No series to move the focus too.
+          })
+        });
+      }
+      type = nextSeries.type;
+      seriesId = nextSeries.seriesId;
+      const dataLength = state.series.processedSeries[type].series[seriesId].data.length;
+      setNewSeries = true;
+      return (0, _extends2.default)({}, state, {
+        keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
+          item: {
+            type,
+            seriesId,
+            dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
+          }
+        })
+      });
+    });
+    return setNewSeries;
+  });
+  const removeFocus = (0, _useEventCallback.default)(function removeFocus() {
+    store.update(state => {
+      if (state.keyboardNavigation.item === null) {
+        return state;
+      }
+      return (0, _extends2.default)({}, state, {
+        keyboardNavigation: (0, _extends2.default)({}, state.keyboardNavigation, {
+          item: null
+        })
+      });
+    });
+  });
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (!element || !params.enableKeyboardNavigation) {
+      return undefined;
+    }
+    function keyboardHandler(event) {
+      switch (event.key) {
+        case 'ArrowRight':
+          focusNextItem();
+          break;
+        case 'ArrowLeft':
+          focusPreviousItem();
+          break;
+        case 'ArrowDown':
+          {
+            const updatedStore = focusPreviousSeries();
+            if (updatedStore) {
+              // prevents scrolling
+              event.preventDefault();
+            }
+            break;
+          }
+        case 'ArrowUp':
+          {
+            const updatedStore = focusNextSeries();
+            if (updatedStore) {
+              // prevents scrolling
+              event.preventDefault();
+            }
+            break;
+          }
+        default:
+          break;
+      }
+    }
+    element.addEventListener('keydown', keyboardHandler);
+    element.addEventListener('blur', removeFocus);
+    return () => {
+      element.removeEventListener('keydown', keyboardHandler);
+      element.removeEventListener('blur', removeFocus);
+    };
+  }, [svgRef, focusNextItem, focusPreviousItem, removeFocus, focusPreviousSeries, focusNextSeries, params.enableKeyboardNavigation]);
+  (0, _useEnhancedEffect.default)(() => store.update(prev => prev.keyboardNavigation.enableKeyboardNavigation === params.enableKeyboardNavigation ? prev : (0, _extends2.default)({}, prev, {
+    keyboardNavigation: (0, _extends2.default)({}, prev.keyboardNavigation, {
+      enableKeyboardNavigation: !!params.enableKeyboardNavigation
+    })
+  })), [store, params.enableKeyboardNavigation]);
+  return {
+    instance: {}
+  };
+};
+exports.useChartKeyboardNavigation = useChartKeyboardNavigation;
+useChartKeyboardNavigation.getInitialState = params => ({
+  keyboardNavigation: {
+    item: null,
+    enableKeyboardNavigation: !!params.enableKeyboardNavigation
+  }
+});
+useChartKeyboardNavigation.params = {
+  enableKeyboardNavigation: true
+};

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

@@ -0,0 +1,25 @@
+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;
+}, import("../../../index.js").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[]>;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsHasFocusedItem = exports.selectorChartsFocusedSeriesType = exports.selectorChartsFocusedSeriesId = exports.selectorChartsFocusedDataIndex = void 0;
+var _selectors = require("../../utils/selectors");
+const selectKeyboardNavigation = state => state.keyboardNavigation;
+const selectorChartsHasFocusedItem = exports.selectorChartsHasFocusedItem = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item != null);
+const selectorChartsFocusedSeriesType = exports.selectorChartsFocusedSeriesType = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.type);
+const selectorChartsFocusedSeriesId = exports.selectorChartsFocusedSeriesId = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.seriesId);
+const selectorChartsFocusedDataIndex = exports.selectorChartsFocusedDataIndex = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => keyboardNavigationState?.item?.dataIndex);
+const selectorChartsIsKeyboardNavigationEnabled = exports.selectorChartsIsKeyboardNavigationEnabled = (0, _selectors.createSelector)([selectKeyboardNavigation], keyboardNavigationState => !!keyboardNavigationState?.enableKeyboardNavigation);

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

@@ -0,0 +1,34 @@
+import { ChartPluginSignature } from "../../models/index.js";
+import { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import { SeriesId } from "../../../../models/seriesType/common.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;
+}>;
+export {};

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getAxisIndex = getAxisIndex;
-var _isBandScale = require("../../../isBandScale");
+var _scaleGuards = require("../../../scaleGuards");
 var _clampAngle = require("../../../clampAngle");
 /**
  * For a pointer coordinate, this function returns the value and dataIndex associated.
@@ -16,7 +16,7 @@ function getAxisIndex(axisConfig, pointerValue) {
     data: axisData,
     reverse
   } = axisConfig;
-  if (!(0, _isBandScale.isBandScale)(scale)) {
+  if (!(0, _scaleGuards.isOrdinalScale)(scale)) {
     throw new Error('MUI X Charts: getAxisValue is not implemented for polare continuous axes.');
   }
   if (!axisData) {