[charts] Support focus on map shapes

Author: alexfauquette

packages/x-charts-premium/src/Map/FocusedMapShape.tsx

@@ -0,0 +1,61 @@
+'use client';
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { useFocusedItem } from '../hooks';
+import { useGeoData } from '../hooks/useGeoData';
+import { useGeoPath } from '../hooks/useGeoPath';
+import { useGeoFeatureIndexesByName } from '../hooks/useGeoFeatureIndexesByName';
+import { useMapShapeSeries } from '../hooks/useMapShapeSeries';
+
+const FocusedMapShapeRoot = styled('path', {
+  name: 'MuiMapShape',
+  slot: 'Focused',
+})(({ theme }) => ({
+  fill: 'none',
+  stroke: (theme.vars ?? theme).palette.text.primary,
+  strokeWidth: 2,
+  pointerEvents: 'none',
+}));
+
+/**
+ * Renders an outline around the map shape currently focused through keyboard navigation.
+ */
+export function FocusedMapShape() {
+  const focusedItem = useFocusedItem();
+  const geoData = useGeoData();
+  const path = useGeoPath();
+  const featureIndexesByName = useGeoFeatureIndexesByName();
+  const series = useMapShapeSeries();
+
+  if (focusedItem?.type !== 'mapShape' || !geoData || !path) {
+    return null;
+  }
+
+  const seriesItem = series.find((item) => item.id === focusedItem.seriesId);
+  if (!seriesItem || seriesItem.hidden) {
+    return null;
+  }
+
+  const dataItem = seriesItem.data[focusedItem.dataIndex];
+  if (!dataItem || dataItem.hidden) {
+    return null;
+  }
+
+  const featureIndexes = featureIndexesByName.get(dataItem.name);
+  if (featureIndexes === undefined || featureIndexes.length === 0) {
+    return null;
+  }
+
+  return (
+    <g aria-hidden>
+      {featureIndexes.map((featureIndex) => {
+        const feature = geoData.features[featureIndex];
+        const d = path(feature);
+        if (!d) {
+          return null;
+        }
+        return <FocusedMapShapeRoot key={featureIndex} d={d} />;
+      })}
+    </g>
+  );
+}

packages/x-charts-premium/src/Map/MapShapePlot.tsx

@@ -6,6 +6,7 @@ import { useGeoPath } from '../hooks/useGeoPath';
 import { useMapShapeSeries } from '../hooks/useMapShapeSeries';
 import { useGeoFeatureIndexesByName } from '../hooks/useGeoFeatureIndexesByName';
 import { MapShape } from './MapShape';
+import { FocusedMapShape } from './FocusedMapShape';
 import { mapShapeSeriesConfig } from './seriesConfig';
 
 export interface MapShapePlotProps {
@@ -93,6 +94,7 @@ export function MapShapePlot(props: MapShapePlotProps) {
           </g>
         );
       })}
+      <FocusedMapShape />
     </g>
   );
 }

packages/x-charts-premium/src/Map/index.ts

@@ -1,6 +1,7 @@
 export * from './GeoDataPlot';
 export * from './MapShapePlot';
 export * from './MapShape';
+export * from './FocusedMapShape';
 export * from './Graticule';
 
 // Types useful to the public API of the Map charts

packages/x-charts-premium/src/Map/seriesConfig/index.ts

@@ -11,13 +11,15 @@ import legendGetter from './legend';
 import tooltipGetter from './tooltip';
 import getSeriesWithDefaultValues from './getSeriesWithDefaultValues';
 import descriptionGetter from './descriptionGetter';
+import keyboardFocusHandler from './keyboardFocusHandler';
 
 export const mapShapeSeriesConfig: ChartSeriesTypeConfig<'mapShape'> = {
   seriesProcessor,
   colorProcessor: getColor,
   legendGetter,
   tooltipGetter,
   getSeriesWithDefaultValues,
+  keyboardFocusHandler,
   identifierSerializer: identifierSerializerSeriesIdDataIndex,
   identifierCleaner: identifierCleanerSeriesIdDataIndex,
   descriptionGetter,

packages/x-charts-premium/src/Map/seriesConfig/keyboardFocusHandler.ts

@@ -0,0 +1,17 @@
+import {
+  createCommonKeyboardFocusHandler,
+  type KeyboardFocusHandler,
+} from '@mui/x-charts/internals';
+
+const mapShapeSeriesTypes = new Set(['mapShape'] as const);
+
+/**
+ * Move the focus across the shapes of the map series.
+ *
+ * `ArrowRight`/`ArrowLeft` move to the next/previous shape of the focused series,
+ * while `ArrowUp`/`ArrowDown` move between series.
+ */
+const keyboardFocusHandler: KeyboardFocusHandler<'mapShape', 'mapShape'> =
+  createCommonKeyboardFocusHandler(mapShapeSeriesTypes);
+
+export default keyboardFocusHandler;