@mui/x-charts/esm/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.js

The community edition of MUI X Charts components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import useEventCallback from '@mui/utils/useEventCallback';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
import { selectorChartDefaultizedSeries } from "../../corePlugins/useChartSeries/useChartSeries.selectors.js";
export const useChartKeyboardNavigation = ({
  params,
  store,
  svgRef
}) => {
  const removeFocus = useEventCallback(function removeFocus() {
    if (store.state.keyboardNavigation.item !== null) {
      store.set('keyboardNavigation', _extends({}, store.state.keyboardNavigation, {
        item: null
      }));
    }
  });
  React.useEffect(() => {
    const element = svgRef.current;
    if (!element || !params.enableKeyboardNavigation) {
      return undefined;
    }
    function keyboardHandler(event) {
      let newFocusedItem = store.state.keyboardNavigation.item;
      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 && {
          highlight: _extends({}, store.state.highlight, {
            lastUpdate: 'keyboard'
          })
        }, store.state.interaction && {
          interaction: _extends({}, store.state.interaction, {
            lastUpdate: 'keyboard'
          })
        }, {
          keyboardNavigation: _extends({}, store.state.keyboardNavigation, {
            item: newFocusedItem
          })
        }));
      }
    }
    element.addEventListener('keydown', keyboardHandler);
    element.addEventListener('blur', removeFocus);
    return () => {
      element.removeEventListener('keydown', keyboardHandler);
      element.removeEventListener('blur', removeFocus);
    };
  }, [svgRef, removeFocus, params.enableKeyboardNavigation, store]);
  useEnhancedEffect(() => {
    if (store.state.keyboardNavigation.enableKeyboardNavigation !== params.enableKeyboardNavigation) {
      store.set('keyboardNavigation', _extends({}, store.state.keyboardNavigation, {
        enableKeyboardNavigation: !!params.enableKeyboardNavigation
      }));
    }
  }, [store, params.enableKeyboardNavigation]);
  return {};
};
useChartKeyboardNavigation.getInitialState = params => ({
  keyboardNavigation: {
    item: null,
    enableKeyboardNavigation: !!params.enableKeyboardNavigation
  }
});
useChartKeyboardNavigation.params = {
  enableKeyboardNavigation: true
};