@mui/x-charts 8.22.1 → 8.24.0

package/esm/internals/invertScale.js

@@ -1,8 +1,16 @@
 import { isOrdinalScale } from "./scaleGuards.js";
 export function invertScale(scale, data, value) {
   if (isOrdinalScale(scale)) {
-    const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
+    const dataIndex = getDataIndexForOrdinalScaleValue(scale, value);
     return data[dataIndex];
   }
   return scale.invert(value);
+}
+
+/**
+ * Get the data index for a given value on an ordinal scale.
+ */
+export function getDataIndexForOrdinalScaleValue(scale, value) {
+  const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
+  return dataIndex;
 }

package/esm/internals/plugins/allPlugins.d.ts

@@ -7,7 +7,8 @@ import { type UseChartPolarAxisSignature } from "./featurePlugins/useChartPolarA
 import { type UseChartClosestPointSignature } from "./featurePlugins/useChartClosestPoint/index.js";
 import { type UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/index.js";
 import { type UseChartBrushSignature } from "./featurePlugins/useChartBrush/index.js";
+import { type UseChartVisibilityManagerSignature } from "./featurePlugins/useChartVisibilityManager/index.js";
 import { type UseChartTooltipSignature } from "./featurePlugins/useChartTooltip/index.js";
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
-export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartBrushSignature>, import("./models/index.js").ChartPlugin<UseChartTooltipSignature>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>];
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVisibilityManagerSignature<TSeries>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<TSeries>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<TSeries>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartBrushSignature>, import("./models/index.js").ChartPlugin<UseChartTooltipSignature>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartVisibilityManagerSignature<any>>, import("./models/index.js").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>];

package/esm/internals/plugins/allPlugins.js

@@ -7,5 +7,6 @@ import { useChartKeyboardNavigation } from "./featurePlugins/useChartKeyboardNav
 import { useChartClosestPoint } from "./featurePlugins/useChartClosestPoint/index.js";
 import { useChartZAxis } from "./featurePlugins/useChartZAxis/index.js";
 import { useChartBrush } from "./featurePlugins/useChartBrush/index.js";
+import { useChartVisibilityManager } from "./featurePlugins/useChartVisibilityManager/index.js";
 import { useChartTooltip } from "./featurePlugins/useChartTooltip/index.js";
-export const DEFAULT_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation];
+export const DEFAULT_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartVisibilityManager, useChartClosestPoint, useChartKeyboardNavigation];

package/esm/internals/plugins/corePlugins/useChartSeries/serializeIdentifier.d.ts

@@ -0,0 +1,14 @@
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import type { ChartSeriesConfig } from "../../models/index.js";
+/**
+ * Serializes a series item identifier into a unique string using the appropriate serializer
+ * from the provided series configuration.
+ *
+ * @param {ChartSeriesConfig<ChartSeriesType>} seriesConfig - The configuration object for chart series.
+ * @param {SeriesItemIdentifier<ChartSeriesType>} identifier - The series item identifier to serialize.
+ * @returns {string} A unique string representation of the identifier.
+ * @throws Will throw an error if no serializer is found for the given series type.
+ */
+export declare const serializeIdentifier: <T extends ChartSeriesType, U extends {
+  type: T;
+}>(seriesConfig: ChartSeriesConfig<T>, identifier: U) => string;

package/esm/internals/plugins/corePlugins/useChartSeries/serializeIdentifier.js

@@ -0,0 +1,18 @@
+/**
+ * Serializes a series item identifier into a unique string using the appropriate serializer
+ * from the provided series configuration.
+ *
+ * @param {ChartSeriesConfig<ChartSeriesType>} seriesConfig - The configuration object for chart series.
+ * @param {SeriesItemIdentifier<ChartSeriesType>} identifier - The series item identifier to serialize.
+ * @returns {string} A unique string representation of the identifier.
+ * @throws Will throw an error if no serializer is found for the given series type.
+ */
+export const serializeIdentifier = (seriesConfig, identifier) => {
+  const serializer = seriesConfig[identifier.type]?.identifierSerializer;
+  if (!serializer) {
+    throw new Error(`MUI X Charts: No identifier serializer found for series type "${identifier.type}".`);
+  }
+  // @ts-expect-error identifierSerializer expects the full object,
+  // but this function accepts a partial one in order be able to serialize all identifiers.
+  return serializer(identifier);
+};

package/esm/internals/plugins/corePlugins/useChartSeries/useChartSeries.js

@@ -2,8 +2,10 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { rainbowSurgePalette } from "../../../../colorPalettes/index.js";
 import { defaultizeSeries } from "./processSeries.js";
+import { serializeIdentifier as serializeIdentifierFn } from "./serializeIdentifier.js";
 export const useChartSeries = ({
   params,
   store,
@@ -28,7 +30,12 @@ export const useChartSeries = ({
       dataset
     }));
   }, [colors, dataset, series, theme, seriesConfig, store]);
-  return {};
+  const serializeIdentifier = useEventCallback(identifier => serializeIdentifierFn(seriesConfig, identifier));
+  return {
+    instance: {
+      serializeIdentifier
+    }
+  };
 };
 useChartSeries.params = {
   dataset: true,

package/esm/internals/plugins/corePlugins/useChartSeries/useChartSeries.types.d.ts

@@ -45,7 +45,18 @@ export interface UseChartSeriesState<T extends ChartSeriesType = ChartSeriesType
     dataset?: Readonly<DatasetType>;
   };
 }
-export interface UseChartSeriesInstance {}
+export type SerializeIdentifierFunction = <T extends {
+  type: ChartSeriesType;
+}>(identifier: T) => string;
+export interface UseChartSeriesInstance {
+  /**
+   * Function to serialize a series item identifier into a unique string.
+   *
+   * @param identifier The identifier to serialize.
+   * @returns A unique string representing the identifier.
+   */
+  serializeIdentifier: SerializeIdentifierFunction;
+}
 export type UseChartSeriesSignature<SeriesType extends ChartSeriesType = ChartSeriesType> = ChartPluginSignature<{
   params: UseChartSeriesParameters;
   defaultizedParams: UseChartSeriesDefaultizedParameters<SeriesType>;

package/esm/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.d.ts

@@ -0,0 +1,11 @@
+import { type SeriesItemIdentifier } from "../../../../models/seriesType/index.js";
+import { type UseChartHighlightSignature } from "../useChartHighlight/index.js";
+import { type UseChartCartesianAxisSignature } from "../useChartCartesianAxis/index.js";
+import { type ChartState } from "../../models/index.js";
+/**
+ * Hook to get pointer interaction props for chart items.
+ */
+export declare function useRegisterPointerInteractions(getItemAtPosition: (state: ChartState<[UseChartCartesianAxisSignature, UseChartHighlightSignature]>, point: {
+  x: number;
+  y: number;
+}) => SeriesItemIdentifier | undefined, onItemEnter?: () => void, onItemLeave?: () => void): void;

package/esm/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.js

@@ -0,0 +1,74 @@
+'use client';
+
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useSvgRef } from "../../../../hooks/index.js";
+import { useStore } from "../../../store/useStore.js";
+import { useChartContext } from "../../../../context/ChartProvider/index.js";
+import { getSVGPoint } from "../../../getSVGPoint.js";
+/**
+ * Hook to get pointer interaction props for chart items.
+ */
+export function useRegisterPointerInteractions(getItemAtPosition, onItemEnter, onItemLeave) {
+  const {
+    instance
+  } = useChartContext();
+  const svgRef = useSvgRef();
+  const store = useStore();
+  const interactionActive = React.useRef(false);
+  const lastItemRef = React.useRef(undefined);
+  const onItemEnterRef = useEventCallback(() => onItemEnter?.());
+  const onItemLeaveRef = useEventCallback(() => onItemLeave?.());
+  React.useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return undefined;
+    }
+    function onPointerEnter() {
+      interactionActive.current = true;
+    }
+    function reset() {
+      const lastItem = lastItemRef.current;
+      if (lastItem) {
+        lastItemRef.current = undefined;
+        instance.removeTooltipItem(lastItem);
+        instance.clearHighlight();
+        onItemLeaveRef();
+      }
+    }
+    function onPointerLeave() {
+      interactionActive.current = false;
+      reset();
+    }
+    const onPointerMove = function onPointerMove(event) {
+      const svgPoint = getSVGPoint(svg, event);
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
+        reset();
+        return;
+      }
+      const item = getItemAtPosition(store.state, svgPoint);
+      if (item) {
+        instance.setLastUpdateSource('pointer');
+        instance.setTooltipItem(item);
+        instance.setHighlight(item);
+        onItemEnterRef();
+        lastItemRef.current = item;
+      } else {
+        reset();
+      }
+    };
+    svg.addEventListener('pointerleave', onPointerLeave);
+    svg.addEventListener('pointermove', onPointerMove);
+    svg.addEventListener('pointerenter', onPointerEnter);
+    return () => {
+      svg.removeEventListener('pointerenter', onPointerEnter);
+      svg.removeEventListener('pointermove', onPointerMove);
+      svg.removeEventListener('pointerleave', onPointerLeave);
+
+      /* Clean up state if this item is unmounted while active. */
+      if (interactionActive.current) {
+        onPointerLeave();
+      }
+    };
+  }, [getItemAtPosition, instance, onItemEnterRef, onItemLeaveRef, store, svgRef]);
+}

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

@@ -13,6 +13,16 @@ reverse) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return reverse ? [range[1], range[0]] : range;
 }
+function shouldIgnoreGapRatios(scale, categoryGapRatio) {
+  const step = scale.step();
+  const paddingPx = step * categoryGapRatio;
+
+  /* If the padding is less than 0.1px, we consider it negligible and ignore it.
+   * This prevents issues where very small gaps cause rendering artifacts or unexpected layouts.
+   * A threshold of 0.1px is chosen as it's generally below the perceptible limit for most displays.
+   */
+  return paddingPx < 0.1;
+}
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
 export function computeAxisValue({
@@ -47,8 +57,10 @@ export function computeAxisValue({
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
       const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
       if (isBandScale(scale) && isBandScaleConfig(axis)) {
-        const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
-        const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
+        const desiredCategoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+        const ignoreGapRatios = shouldIgnoreGapRatios(scale, desiredCategoryGapRatio);
+        const categoryGapRatio = ignoreGapRatios ? 0 : desiredCategoryGapRatio;
+        const barGapRatio = ignoreGapRatios ? 0 : axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
         completeAxis[axis.id] = _extends({
           offset: 0,
           height: 0,
@@ -57,7 +69,12 @@ export function computeAxisValue({
           triggerTooltip
         }, axis, {
           data,
-          scale,
+          /* Doing this here is technically wrong, but acceptable in practice.
+           * In theory, this should be done in the normalized scale selector, but then we'd need that selector to depend
+           * on the zoom range, which would void its goal (which is to be independent of zoom).
+           * Since we only ignore gap ratios when they're practically invisible, the small errors caused by this
+           * discrepancy will hopefully not be noticeable. */
+          scale: ignoreGapRatios ? scale.copy().padding(0) : scale,
           tickNumber,
           colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? getOrdinalColorScale(_extends({
             values: axis.data

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

@@ -16,6 +16,7 @@ import { getSVGPoint } from "../../../getSVGPoint.js";
 import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/index.js";
 import { selectorChartAxisInteraction } from "./useChartCartesianInteraction.selectors.js";
 import { checkHasInteractionPlugin } from "../useChartInteraction/checkHasInteractionPlugin.js";
+const AXIS_CLICK_SERIES_TYPES = new Set(['bar', 'rangeBar', 'line']);
 export const useChartCartesianAxis = ({
   params,
   store,
@@ -165,13 +166,19 @@ export const useChartCartesianAxis = ({
       // The .data exist because otherwise the dataIndex would be null or -1.
       const axisValue = (isXAxis ? xAxisWithScale : yAxisWithScale)[USED_AXIS_ID].data[dataIndex];
       const seriesValues = {};
-      Object.keys(processedSeries).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
-        processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
-          const seriesItem = processedSeries[seriesType].series[seriesId];
+      Object.keys(processedSeries).filter(seriesType => AXIS_CLICK_SERIES_TYPES.has(seriesType)).forEach(seriesType => {
+        // @ts-ignore
+        const seriesTypeConfig = processedSeries[seriesType];
+        seriesTypeConfig?.seriesOrder.forEach(seriesId => {
+          const seriesItem = seriesTypeConfig.series[seriesId];
           const providedXAxisId = seriesItem.xAxisId;
           const providedYAxisId = seriesItem.yAxisId;
           const axisKey = isXAxis ? providedXAxisId : providedYAxisId;
           if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+            // @ts-ignore This is safe because users need to opt in to use range bar series.
+            // In that case, they should import the module augmentation from `x-charts-pro/moduleAugmentation/rangeBarOnClick`
+            // Which adds the proper type to the series data.
+            // TODO(v9): Remove this ts-ignore when we can make the breaking change to ChartsAxisData.
             seriesValues[seriesId] = seriesItem.data[dataIndex];
           }
         });

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.d.ts

@@ -0,0 +1,4 @@
+import { type BarItemIdentifier } from "../../../../models/index.js";
+export declare const selectorBarItemAtPosition: (args_0: 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<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, svgPoint: Pick<DOMPoint, "x" | "y">) => BarItemIdentifier | undefined;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.js

@@ -0,0 +1,83 @@
+import { createSelector } from '@mui/x-internals/store';
+import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
+import { getBandSize } from "../../../getBandSize.js";
+import { isBandScale } from "../../../scaleGuards.js";
+import { getDataIndexForOrdinalScaleValue } from "../../../invertScale.js";
+export const selectorBarItemAtPosition = createSelector(selectorChartXAxis, selectorChartYAxis, selectorChartSeriesProcessed, function selectorBarItemAtPosition({
+  axis: xAxes,
+  axisIds: xAxisIds
+}, {
+  axis: yAxes,
+  axisIds: yAxisIds
+}, processedSeries, svgPoint) {
+  const {
+    series,
+    stackingGroups = []
+  } = processedSeries?.bar ?? {};
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  let item = undefined;
+  for (let stackIndex = 0; stackIndex < stackingGroups.length; stackIndex += 1) {
+    const group = stackingGroups[stackIndex];
+    const seriesIds = group.ids;
+    for (const seriesId of seriesIds) {
+      const aSeries = (series ?? {})[seriesId];
+      const xAxisId = aSeries.xAxisId ?? defaultXAxisId;
+      const yAxisId = aSeries.yAxisId ?? defaultYAxisId;
+      const xAxis = xAxes[xAxisId];
+      const yAxis = yAxes[yAxisId];
+      const bandAxis = aSeries.layout === 'horizontal' ? yAxis : xAxis;
+      const continuousAxis = aSeries.layout === 'horizontal' ? xAxis : yAxis;
+      const bandScale = bandAxis.scale;
+      const svgPointBandCoordinate = aSeries.layout === 'horizontal' ? svgPoint.y : svgPoint.x;
+      if (!isBandScale(bandScale)) {
+        continue;
+      }
+      const dataIndex = getDataIndexForOrdinalScaleValue(bandScale, svgPointBandCoordinate);
+      const {
+        barWidth,
+        offset
+      } = getBandSize(bandScale.bandwidth(), stackingGroups.length, bandAxis.barGapRatio);
+      const barOffset = stackIndex * (barWidth + offset);
+      const bandValue = bandAxis.data?.[dataIndex];
+      if (bandValue == null) {
+        continue;
+      }
+      const bandStart = bandScale(bandValue);
+      if (bandStart == null) {
+        continue;
+      }
+      const bandBarStart = bandStart + barOffset;
+      const bandBarEnd = bandBarStart + barWidth;
+      const bandBarMin = Math.min(bandBarStart, bandBarEnd);
+      const bandBarMax = Math.max(bandBarStart, bandBarEnd);
+      if (svgPointBandCoordinate >= bandBarMin && svgPointBandCoordinate <= bandBarMax) {
+        // The point is inside the band for this series
+        const svgPointContinuousCoordinate = aSeries.layout === 'horizontal' ? svgPoint.x : svgPoint.y;
+        const bar = aSeries.stackedData[dataIndex];
+        const start = continuousAxis.scale(bar[0]);
+        const end = continuousAxis.scale(bar[1]);
+        if (start == null || end == null) {
+          continue;
+        }
+        const continuousMin = Math.min(start, end);
+        const continuousMax = Math.max(start, end);
+        if (svgPointContinuousCoordinate >= continuousMin && svgPointContinuousCoordinate <= continuousMax) {
+          item = {
+            seriesId,
+            dataIndex
+          };
+        }
+      }
+    }
+  }
+  if (item) {
+    return {
+      type: 'bar',
+      seriesId: item.seriesId,
+      dataIndex: item.dataIndex
+    };
+  }
+  return undefined;
+});

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

@@ -0,0 +1,13 @@
+import type { ChartSeriesType } from "../../../../models/seriesType/config.js";
+import type { FocusedItemIdentifier } from "../../../../models/seriesType/index.js";
+import type { UseChartKeyboardNavigationSignature } from "./useChartKeyboardNavigation.types.js";
+import type { ChartState } from "../../models/chart.js";
+export type FocusedItemUpdater<TSeriesType extends ChartSeriesType, OutputSeriesType extends ChartSeriesType = ChartSeriesType> = (currentItem: (TSeriesType extends any ? FocusedItemIdentifier<TSeriesType> : never) | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => FocusedItemIdentifier<OutputSeriesType> | null;
+/**
+ * Get the next focusable item in the chart.
+ * @param {SeriesItemIdentifier<TSeriesType> | null} currentItem The current focused item.
+ * @param {KeyboardEvent} event The keyboard event that triggered the navigation.
+ * @param {ChartState<[UseChartKeyboardNavigationSignature], []>} state The current chart state.
+ * @returns {SeriesItemIdentifier<ChartSeriesType> | null} The next focusable item or null if none found.
+ */
+export type KeyboardFocusHandler<TSeriesType extends ChartSeriesType, OutputSeriesType extends ChartSeriesType = ChartSeriesType> = (event: KeyboardEvent) => FocusedItemUpdater<TSeriesType, OutputSeriesType> | null;

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

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

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

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

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

@@ -4,92 +4,7 @@ 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";
-import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
-function getNextIndexFocusedItem(state) {
-  const processedSeries = selectorChartSeriesProcessed(state);
-  let {
-    type,
-    seriesId
-  } = state.keyboardNavigation.item ?? {};
-  if (type === undefined ||
-  // @ts-ignore sankey is not in MIT version
-  type === 'sankey' || seriesId === undefined || !seriesHasData(processedSeries, type, seriesId)) {
-    const nextSeries = getNextSeriesWithData(processedSeries, type, seriesId);
-    if (nextSeries === null) {
-      return null;
-    }
-    type = nextSeries.type;
-    seriesId = nextSeries.seriesId;
-  }
-  const dataLength = processedSeries[type].series[seriesId].data.length;
-  return {
-    type,
-    seriesId,
-    dataIndex: ((state.keyboardNavigation.item?.dataIndex ?? -1) + 1) % dataLength
-  };
-}
-function getPreviousIndexFocusedItem(state) {
-  const processedSeries = selectorChartSeriesProcessed(state);
-  let {
-    type,
-    seriesId
-  } = state.keyboardNavigation.item ?? {};
-  if (type === undefined ||
-  // @ts-ignore sankey is not in MIT version
-  type === 'sankey' || seriesId === undefined || !seriesHasData(processedSeries, type, seriesId)) {
-    const previousSeries = getPreviousSeriesWithData(processedSeries, type, seriesId);
-    if (previousSeries === null) {
-      return null;
-    }
-    type = previousSeries.type;
-    seriesId = previousSeries.seriesId;
-  }
-  const dataLength = processedSeries[type].series[seriesId].data.length;
-  return {
-    type,
-    seriesId,
-    dataIndex: (dataLength + (state.keyboardNavigation.item?.dataIndex ?? 1) - 1) % dataLength
-  };
-}
-function getNextSeriesFocusedItem(state) {
-  const processedSeries = selectorChartSeriesProcessed(state);
-  let {
-    type,
-    seriesId
-  } = state.keyboardNavigation.item ?? {};
-  const nextSeries = getNextSeriesWithData(processedSeries, type, seriesId);
-  if (nextSeries === null) {
-    return null; // No series to move the focus to.
-  }
-  type = nextSeries.type;
-  seriesId = nextSeries.seriesId;
-  const dataLength = processedSeries[type].series[seriesId].data.length;
-  return {
-    type,
-    seriesId,
-    dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
-  };
-}
-function getPreviousSeriesFocusedItem(state) {
-  const processedSeries = selectorChartSeriesProcessed(state);
-  let {
-    type,
-    seriesId
-  } = state.keyboardNavigation.item ?? {};
-  const previousSeries = getPreviousSeriesWithData(processedSeries, type, seriesId);
-  if (previousSeries === null) {
-    return null; // No series to move the focus to.
-  }
-  type = previousSeries.type;
-  seriesId = previousSeries.seriesId;
-  const dataLength = processedSeries[type].series[seriesId].data.length;
-  return {
-    type,
-    seriesId,
-    dataIndex: Math.min(dataLength - 1, state.keyboardNavigation.item?.dataIndex ?? 0)
-  };
-}
+import { selectorChartDefaultizedSeries } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
 export const useChartKeyboardNavigation = ({
   params,
   store,
@@ -109,26 +24,18 @@ export const useChartKeyboardNavigation = ({
     }
     function keyboardHandler(event) {
       let newFocusedItem = store.state.keyboardNavigation.item;
-      switch (event.key) {
-        case 'ArrowRight':
-          newFocusedItem = getNextIndexFocusedItem(store.state);
-          break;
-        case 'ArrowLeft':
-          newFocusedItem = getPreviousIndexFocusedItem(store.state);
-          break;
-        case 'ArrowDown':
-          {
-            newFocusedItem = getPreviousSeriesFocusedItem(store.state);
-            break;
-          }
-        case 'ArrowUp':
-          {
-            newFocusedItem = getNextSeriesFocusedItem(store.state);
-            break;
-          }
-        default:
-          break;
+      let seriesType = newFocusedItem?.type;
+      if (!seriesType) {
+        seriesType = Object.keys(selectorChartDefaultizedSeries(store.state)).find(key => store.state.series.seriesConfig[key] !== undefined);
+        if (seriesType === undefined) {
+          return;
+        }
+      }
+      const calculateFocusedItem = store.state.series.seriesConfig[seriesType]?.keyboardFocusHandler?.(event);
+      if (!calculateFocusedItem) {
+        return;
       }
+      newFocusedItem = calculateFocusedItem(newFocusedItem, store.state);
       if (newFocusedItem !== store.state.keyboardNavigation.item) {
         event.preventDefault();
         store.update(_extends({}, store.state.highlight && {

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

@@ -1,21 +1,14 @@
-import { type SeriesId } from "../../../../models/seriesType/common.js";
+import type { FocusedItemIdentifier } from "../../../../models/seriesType/index.js";
 import { type AxisItemIdentifier } from "../../../../models/axis.js";
-import { type FocusedItemData } from "../../../../hooks/useFocusedItem.js";
 export declare const selectorChartsItemIsFocused: (args_0: 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;
-}, item: FocusedItemData) => boolean;
+}, item: FocusedItemIdentifier<keyof import("../../../index.js").ChartsSeriesConfig>) => boolean;
 export declare const selectorChartsHasFocusedItem: (args_0: 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;
 }) => boolean;
-export declare const selectorChartsFocusedSeriesType: (args_0: 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> & {
+export declare const selectorChartsFocusedItem: (args_0: 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;
-}) => "line" | "bar" | "scatter" | "pie" | undefined;
-export declare const selectorChartsFocusedSeriesId: (args_0: 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;
-}) => SeriesId | undefined;
-export declare const selectorChartsFocusedDataIndex: (args_0: 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;
-}) => number | undefined;
+}) => FocusedItemIdentifier<keyof import("../../../index.js").ChartsSeriesConfig> | null;
 export declare const selectorChartsIsKeyboardNavigationEnabled: (args_0: 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;
 }) => boolean;
@@ -27,23 +20,4 @@ export declare const selectorChartsKeyboardYAxisIndex: (args_0: import("../../co
 }) => AxisItemIdentifier | undefined;
 export declare const selectorChartsKeyboardItem: (args_0: 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;
-}) => {
-  type: "line";
-  seriesId: SeriesId;
-  dataIndex: number;
-} | {
-  type: "bar";
-  seriesId: SeriesId;
-  dataIndex: number;
-} | {
-  type: "scatter";
-  seriesId: SeriesId;
-  dataIndex: number;
-} | {
-  type: "pie";
-  seriesId: SeriesId;
-  dataIndex: number;
-} | null;
-export declare const selectorChartsKeyboardItemIsDefined: (args_0: 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;
-}) => boolean;
+}) => FocusedItemIdentifier<keyof import("../../../index.js").ChartsSeriesConfig> | null;