@mui/x-charts 8.22.0 → 8.23.0

package/esm/hooks/useItemHighlighted.js

@@ -1,7 +1,6 @@
 'use client';
 
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { selectorChartsIsFaded, selectorChartsIsHighlighted } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 /**
  * A hook to check the highlighted state of the item.
@@ -14,8 +13,8 @@ import { selectorChartsIsFaded, selectorChartsIsHighlighted } from "../internals
  */
 export function useItemHighlighted(item) {
   const store = useStore();
-  const isHighlighted = useSelector(store, selectorChartsIsHighlighted, item);
-  const isFaded = useSelector(store, selectorChartsIsFaded, item);
+  const isHighlighted = store.use(selectorChartsIsHighlighted, item);
+  const isFaded = store.use(selectorChartsIsFaded, item);
   return {
     isHighlighted,
     isFaded: !isHighlighted && isFaded

package/esm/hooks/useItemHighlightedGetter.js

@@ -1,6 +1,5 @@
 'use client';
 
-import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback } from "../internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js";
 /**
@@ -13,8 +12,8 @@ import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback } fr
  */
 export function useItemHighlightedGetter() {
   const store = useStore();
-  const isHighlighted = useSelector(store, selectorChartsIsHighlightedCallback);
-  const isFaded = useSelector(store, selectorChartsIsFadedCallback);
+  const isHighlighted = store.use(selectorChartsIsHighlightedCallback);
+  const isFaded = store.use(selectorChartsIsFadedCallback);
   return {
     isHighlighted,
     isFaded

package/esm/hooks/useLegend.js

@@ -3,7 +3,6 @@
 import { selectorChartSeriesConfig } from "../internals/plugins/corePlugins/useChartSeries/index.js";
 import { useSeries } from "./useSeries.js";
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 function getSeriesToDisplay(series, seriesConfig) {
   return Object.keys(series).flatMap(seriesType => {
     const getter = seriesConfig[seriesType].legendGetter;
@@ -23,7 +22,7 @@ function getSeriesToDisplay(series, seriesConfig) {
 export function useLegend() {
   const series = useSeries();
   const store = useStore();
-  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
+  const seriesConfig = store.use(selectorChartSeriesConfig);
   return {
     items: getSeriesToDisplay(series, seriesConfig)
   };

package/esm/hooks/usePieSeries.js

@@ -3,7 +3,6 @@
 import { useSeriesOfType, useAllSeriesOfType } from "../internals/seriesSelectorOfType.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartSeriesLayout } from "../internals/plugins/corePlugins/useChartSeries/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
 
 /**
  * Get access to the internal state of pie series.
@@ -48,6 +47,6 @@ export function usePieSeriesContext() {
  */
 export function usePieSeriesLayout() {
   const store = useStore();
-  const seriesLayout = useSelector(store, selectorChartSeriesLayout);
+  const seriesLayout = store.use(selectorChartSeriesLayout);
   return seriesLayout.pie ?? {};
 }

package/esm/hooks/useSeries.js

@@ -1,7 +1,6 @@
 'use client';
 
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 import { selectorChartSeriesProcessed } from "../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.js";
 /**
  * Get access to the internal state of series.
@@ -11,5 +10,5 @@ import { selectorChartSeriesProcessed } from "../internals/plugins/corePlugins/u
  */
 export function useSeries() {
   const store = useStore();
-  return useSelector(store, selectorChartSeriesProcessed);
+  return store.use(selectorChartSeriesProcessed);
 }

package/esm/hooks/useSkipAnimation.js

@@ -2,7 +2,6 @@
 
 import { selectorChartSkipAnimation } from "../internals/plugins/corePlugins/useChartAnimation/index.js";
 import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
 
 /**
  * A hook to get if chart animations should be skipped.
@@ -11,6 +10,6 @@ import { useSelector } from "../internals/store/useSelector.js";
  */
 export function useSkipAnimation(skipAnimation) {
   const store = useStore();
-  const storeSkipAnimation = useSelector(store, selectorChartSkipAnimation);
+  const storeSkipAnimation = store.use(selectorChartSkipAnimation);
   return skipAnimation || storeSkipAnimation;
 }

package/esm/hooks/useZAxis.js

@@ -2,13 +2,12 @@
 
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
-import { useSelector } from "../internals/store/useSelector.js";
 export function useZAxes() {
   const store = useStore();
   const {
     axis: zAxis,
     axisIds: zAxisIds
-  } = useSelector(store, selectorChartZAxis) ?? {
+  } = store.use(selectorChartZAxis) ?? {
     axis: {},
     axisIds: []
   };

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.22.0
+ * @mui/x-charts v8.23.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/commonNextFocusItem.d.ts

@@ -0,0 +1,14 @@
+import type { UseChartKeyboardNavigationSignature } from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import type { ChartState } from "./plugins/models/chart.js";
+import type { ChartSeriesType } from "../models/seriesType/config.js";
+import type { FocusedItemIdentifier, SeriesId, SeriesItemIdentifier } from "../models/seriesType/index.js";
+type ReturnedItem<OutSeriesType extends ChartSeriesType> = {
+  type: OutSeriesType;
+  seriesId: SeriesId;
+  dataIndex: number;
+} | null;
+export declare function createGetNextIndexFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey'> = InSeriesType>(compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: FocusedItemIdentifier<InSeriesType> | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => ReturnedItem<OutSeriesType>;
+export declare function createGetPreviousIndexFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey'> = InSeriesType>(compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: SeriesItemIdentifier<InSeriesType> | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => ReturnedItem<OutSeriesType>;
+export declare function createGetNextSeriesFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey'> = InSeriesType>(compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: SeriesItemIdentifier<InSeriesType> | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => ReturnedItem<OutSeriesType>;
+export declare function createGetPreviousSeriesFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey'> = InSeriesType>(compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: SeriesItemIdentifier<InSeriesType> | null, state: ChartState<[UseChartKeyboardNavigationSignature], []>) => ReturnedItem<OutSeriesType>;
+export {};

package/esm/internals/commonNextFocusItem.js

@@ -0,0 +1,84 @@
+import { getPreviousNonEmptySeries } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries.js";
+import { selectorChartSeriesProcessed } from "./plugins/corePlugins/useChartSeries/index.js";
+import { getNextNonEmptySeries } from "./plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries.js";
+import { seriesHasData } from "./seriesHasData.js";
+export function createGetNextIndexFocusedItem(compatibleSeriesTypes) {
+  return function getNextIndexFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    if (!type || seriesId == null || !seriesHasData(processedSeries, type, seriesId)) {
+      const nextSeries = getNextNonEmptySeries(processedSeries, compatibleSeriesTypes, 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: ((currentItem?.dataIndex ?? -1) + 1) % dataLength
+    };
+  };
+}
+export function createGetPreviousIndexFocusedItem(compatibleSeriesTypes) {
+  return function getPreviousIndexFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    if (!type || seriesId == null || !seriesHasData(processedSeries, type, seriesId)) {
+      const previousSeries = getPreviousNonEmptySeries(processedSeries, compatibleSeriesTypes, 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 + (currentItem?.dataIndex ?? 1) - 1) % dataLength
+    };
+  };
+}
+export function createGetNextSeriesFocusedItem(compatibleSeriesTypes) {
+  return function getNextSeriesFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    const nextSeries = getNextNonEmptySeries(processedSeries, compatibleSeriesTypes, 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, currentItem?.dataIndex ?? 0)
+    };
+  };
+}
+export function createGetPreviousSeriesFocusedItem(compatibleSeriesTypes) {
+  return function getPreviousSeriesFocusedItem(currentItem, state) {
+    const processedSeries = selectorChartSeriesProcessed(state);
+    let seriesId = currentItem?.seriesId;
+    let type = currentItem?.type;
+    const previousSeries = getPreviousNonEmptySeries(processedSeries, compatibleSeriesTypes, 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, currentItem?.dataIndex ?? 0)
+    };
+  };
+}

package/esm/internals/index.d.ts

@@ -37,7 +37,6 @@ export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugi
 export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";
 export * from "./store/useCharts.js";
 export * from "./store/useStore.js";
-export * from "./store/useSelector.js";
 export * from "../BarChart/BarChart.plugins.js";
 export * from "../LineChart/LineChart.plugins.js";
 export * from "../ScatterChart/ScatterChart.plugins.js";
@@ -48,7 +47,7 @@ export * from "./getLabel.js";
 export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
 export * from "./getScale.js";
-export * from "./stackSeries.js";
+export * from "./stacking/index.js";
 export * from "./getCurve.js";
 export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.js";

package/esm/internals/index.js

@@ -42,7 +42,6 @@ export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugi
 export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";
 export * from "./store/useCharts.js";
 export * from "./store/useStore.js";
-export * from "./store/useSelector.js";
 
 // plugins configs
 
@@ -58,7 +57,7 @@ export * from "./getLabel.js";
 export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
 export * from "./getScale.js";
-export * from "./stackSeries.js";
+export * from "./stacking/index.js";
 export * from "./getCurve.js";
 export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.js";

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

@@ -5,7 +5,6 @@ import * as React from 'react';
 import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
-import { useSelector } from "../../../store/useSelector.js";
 import { DEFAULT_MARGINS } from "../../../../constants/index.js";
 import { selectorChartDrawingArea } from "./useChartDimensions.selectors.js";
 import { defaultizeMargin } from "../../../defaultizeMargin.js";
@@ -136,7 +135,7 @@ export const useChartDimensions = ({
       stateRef.current.displayError = false;
     }
   }
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const drawingArea = store.use(selectorChartDrawingArea);
   const isXInside = React.useCallback(x => x >= drawingArea.left - 1 && x <= drawingArea.left + drawingArea.width, [drawingArea.left, drawingArea.width]);
   const isYInside = React.useCallback(y => y >= drawingArea.top - 1 && y <= drawingArea.top + drawingArea.height, [drawingArea.height, drawingArea.top]);
   const isPointInside = React.useCallback((x, y, targetElement) => {

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

@@ -1,12 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { useSelector } from "../../../store/useSelector.js";
 import { useStore } from "../../../store/useStore.js";
 import { selectorChartSeriesConfig } from "./useChartSeries.selectors.js";
 export function useColorProcessor(seriesType) {
   const store = useStore();
-  const seriesConfig = useSelector(store, selectorChartSeriesConfig);
+  const seriesConfig = store.use(selectorChartSeriesConfig);
   const colorProcessors = React.useMemo(() => {
     const rep = {};
     Object.keys(seriesConfig).forEach(seriesT => {

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

@@ -5,7 +5,6 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getSVGPoint } from "../../../getSVGPoint.js";
-import { useSelector } from "../../../store/useSelector.js";
 import { selectorIsBrushEnabled } from "./useChartBrush.selectors.js";
 export const useChartBrush = ({
   store,
@@ -13,7 +12,7 @@ export const useChartBrush = ({
   instance,
   params
 }) => {
-  const isEnabled = useSelector(store, selectorIsBrushEnabled);
+  const isEnabled = store.use(selectorIsBrushEnabled);
   useEnhancedEffect(() => {
     store.set('brush', _extends({}, store.state.brush, {
       enabled: params.brushConfig.enabled,

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

@@ -7,7 +7,6 @@ import { useStoreEffect } from '@mui/x-internals/store';
 import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
 import { warnOnce } from '@mui/x-internals/warning';
 import { rainbowSurgePalette } from "../../../../colorPalettes/index.js";
-import { useSelector } from "../../../store/useSelector.js";
 import { selectorChartDrawingArea } from "../../corePlugins/useChartDimensions/useChartDimensions.selectors.js";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
 import { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
@@ -37,17 +36,17 @@ export const useChartCartesianAxis = ({
       warnOnce([`MUI X Charts: The following axis ids are duplicated: ${Array.from(duplicates).join(', ')}.`, `Please make sure that each axis has a unique id.`].join('\n'), 'error');
     }
   }
-  const drawingArea = useSelector(store, selectorChartDrawingArea);
-  const processedSeries = useSelector(store, selectorChartSeriesProcessed);
-  const isInteractionEnabled = useSelector(store, selectorChartsInteractionIsInitialized);
+  const drawingArea = store.use(selectorChartDrawingArea);
+  const processedSeries = store.use(selectorChartSeriesProcessed);
+  const isInteractionEnabled = store.use(selectorChartsInteractionIsInitialized);
   const {
     axis: xAxisWithScale,
     axisIds: xAxisIds
-  } = useSelector(store, selectorChartXAxis);
+  } = store.use(selectorChartXAxis);
   const {
     axis: yAxisWithScale,
     axisIds: yAxisIds
-  } = useSelector(store, selectorChartYAxis);
+  } = store.use(selectorChartYAxis);
   useAssertModelConsistency({
     warningPrefix: 'MUI X Charts',
     componentName: 'Chart',

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { useSelector } from "../../../store/useSelector.js";
 import { useStore } from "../../../store/useStore.js";
 import { selectorChartZoomIsInteracting } from "./useChartCartesianAxisRendering.selectors.js";
 /**
@@ -14,6 +13,6 @@ import { selectorChartZoomIsInteracting } from "./useChartCartesianAxisRendering
  */
 export function useInternalIsZoomInteracting() {
   const store = useStore();
-  const isInteracting = useSelector(store, selectorChartZoomIsInteracting);
+  const isInteracting = store.use(selectorChartZoomIsInteracting);
   return isInteracting;
 }

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

@@ -5,7 +5,6 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { getSVGPoint } from "../../../getSVGPoint.js";
-import { useSelector } from "../../../store/useSelector.js";
 import { selectorChartAxisZoomData, selectorChartSeriesEmptyFlatbushMap, selectorChartSeriesFlatbushMap, selectorChartXAxis, selectorChartYAxis, selectorChartZoomIsInteracting } from "../useChartCartesianAxis/index.js";
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
 import { findClosestPoints } from "./findClosestPoints.js";
@@ -23,17 +22,17 @@ export const useChartClosestPoint = ({
   const {
     axis: xAxis,
     axisIds: xAxisIds
-  } = useSelector(store, selectorChartXAxis);
+  } = store.use(selectorChartXAxis);
   const {
     axis: yAxis,
     axisIds: yAxisIds
-  } = useSelector(store, selectorChartYAxis);
-  const zoomIsInteracting = useSelector(store, selectorChartZoomIsInteracting);
+  } = store.use(selectorChartYAxis);
+  const zoomIsInteracting = store.use(selectorChartZoomIsInteracting);
   const {
     series,
     seriesOrder
-  } = useSelector(store, selectorChartSeriesProcessed)?.scatter ?? {};
-  const flatbushMap = useSelector(store, zoomIsInteracting ? selectorChartSeriesEmptyFlatbushMap : selectorChartSeriesFlatbushMap);
+  } = store.use(selectorChartSeriesProcessed)?.scatter ?? {};
+  const flatbushMap = store.use(zoomIsInteracting ? selectorChartSeriesEmptyFlatbushMap : selectorChartSeriesFlatbushMap);
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   useEnhancedEffect(() => {

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

@@ -41,10 +41,13 @@ export const useChartHighlight = ({
   });
   const setHighlight = useEventCallback(newItem => {
     const prevHighlight = store.state.highlight;
-    if (prevHighlight.isControlled || fastObjectShallowCompare(prevHighlight.item, newItem)) {
+    if (fastObjectShallowCompare(prevHighlight.item, newItem)) {
       return;
     }
     params.onHighlightChange?.(newItem);
+    if (prevHighlight.isControlled) {
+      return;
+    }
     store.set('highlight', {
       item: newItem,
       lastUpdate: 'pointer',

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;