@mui/x-charts-premium 9.7.0 → 9.8.0

package/Map/reprojectEquirectangularImage.mjs

@@ -0,0 +1,110 @@
+import { createGetVisibleCoordinate } from "../internals/createGetVisibleCoordinate.mjs";
+/**
+ * Warps an equirectangular raster so it matches an arbitrary d3-geo `projection`,
+ * returning the result as a PNG data URL (or `null` when it cannot be produced).
+ *
+ * ### Why inverse mapping
+ *
+ * Forward-projecting each *source* pixel to the screen leaves holes and overlaps,
+ * because the mapping is non-linear and area-distorting. Instead we walk every
+ * *destination* pixel and pull the color it should show from the source — inverse
+ * (destination-to-source) resampling, which fills the output exactly once.
+ *
+ * ### Algorithm
+ *
+ * For each destination pixel `(px, py)` of the drawing area:
+ *
+ * 1. Convert it to SVG coordinates `(left + px, top + py)` and resolve it to a
+ *    `[lon, lat]` coordinate with {@link createVisibleCoordinate}, which returns
+ *    `null` for pixels outside the visible map (post-clip and the spherical
+ *    round-trip), leaving them transparent.
+ * 2. Discard coordinates outside `imageBounds` (no source data there).
+ * 3. Map `[lon, lat]` to a source pixel with nearest-neighbor sampling (the image
+ *    being equirectangular, both axes are linear) and copy its RGBA.
+ *
+ * ### Failure modes
+ *
+ * Returns `null` when a 2D canvas context is unavailable, or when reading the
+ * source pixels throws because a cross-origin image without CORS headers has
+ * tainted the canvas.
+ *
+ * Complexity is `O(width × height)`; callers should treat it as a per-resize
+ * computation rather than a per-frame one.
+ */
+export function reprojectEquirectangularImage(params) {
+  const {
+    image,
+    projection,
+    area,
+    imageBounds
+  } = params;
+  if (typeof projection.invert !== 'function') {
+    return null;
+  }
+  const getVisibleCoordinate = createGetVisibleCoordinate(projection);
+  const {
+    left,
+    top
+  } = area;
+  const outWidth = Math.max(1, Math.round(area.width));
+  const outHeight = Math.max(1, Math.round(area.height));
+  const [[west, south], [east, north]] = imageBounds;
+  const source = document.createElement('canvas');
+  source.width = image.naturalWidth;
+  source.height = image.naturalHeight;
+  const sourceCtx = source.getContext('2d');
+  const output = document.createElement('canvas');
+  output.width = outWidth;
+  output.height = outHeight;
+  const outputCtx = output.getContext('2d');
+  if (!sourceCtx || !outputCtx) {
+    return null;
+  }
+  sourceCtx.drawImage(image, 0, 0);
+  let sourcePixels;
+  try {
+    sourcePixels = sourceCtx.getImageData(0, 0, source.width, source.height);
+  } catch {
+    // Cross-origin image without CORS taints the canvas: bail out.
+    return null;
+  }
+  const sourceWidth = source.width;
+  const sourceHeight = source.height;
+  const target = outputCtx.createImageData(outWidth, outHeight);
+
+  // `west > east` means the source wraps across the antimeridian (e.g. 170°E..-170°E).
+  const lonWraps = east < west;
+  const lonSpan = lonWraps ? east - west + 360 : east - west;
+  for (let py = 0; py < outHeight; py += 1) {
+    for (let px = 0; px < outWidth; px += 1) {
+      // 1. Destination pixel -> geographic coordinate, or skip if not on the map.
+      const coordinates = getVisibleCoordinate([left + px, top + py]);
+      if (!coordinates) {
+        continue;
+      }
+      const [lon, lat] = coordinates;
+
+      // 2. Outside the source image extent: nothing to sample.
+      const insideLon = lonWraps ? lon >= west || lon <= east : lon >= west && lon <= east;
+      if (!insideLon || lat < south || lat > north) {
+        continue;
+      }
+
+      // 3. Geographic coordinate -> source pixel (nearest neighbor). When the
+      // bounds wrap, longitudes past the antimeridian are offset by a full turn.
+      const lonOffset = lonWraps && lon <= east ? lon - west + 360 : lon - west;
+      let sx = Math.floor(lonOffset / lonSpan * sourceWidth);
+      let sy = Math.floor((north - lat) / (north - south) * sourceHeight);
+      sx = Math.min(Math.max(sx, 0), sourceWidth - 1);
+      sy = Math.min(Math.max(sy, 0), sourceHeight - 1);
+      const sourceIndex = (sy * sourceWidth + sx) * 4;
+      const targetIndex = (py * outWidth + px) * 4;
+      target.data[targetIndex] = sourcePixels.data[sourceIndex];
+      target.data[targetIndex + 1] = sourcePixels.data[sourceIndex + 1];
+      target.data[targetIndex + 2] = sourcePixels.data[sourceIndex + 2];
+      target.data[targetIndex + 3] = sourcePixels.data[sourceIndex + 3];
+    }
+  }
+  outputCtx.putImageData(target, 0, 0);
+  return output.toDataURL();
+}

package/Map/seriesConfig/descriptionGetter.js

@@ -9,7 +9,11 @@ const descriptionGetter = ({
   identifier,
   series
 }) => {
-  const item = series.data[identifier.dataIndex];
+  const itemIndex = series.lookupByName.get(identifier.name);
+  if (itemIndex === undefined) {
+    return '';
+  }
+  const item = series.data[itemIndex];
   if (!item) {
     return '';
   }

package/Map/seriesConfig/descriptionGetter.mjs

@@ -3,7 +3,11 @@ const descriptionGetter = ({
   identifier,
   series
 }) => {
-  const item = series.data[identifier.dataIndex];
+  const itemIndex = series.lookupByName.get(identifier.name);
+  if (itemIndex === undefined) {
+    return '';
+  }
+  const item = series.data[itemIndex];
   if (!item) {
     return '';
   }

package/Map/seriesConfig/getColor.js

@@ -7,11 +7,18 @@ exports.default = void 0;
 const getColor = (series, _mainAxis, _secondaryAxis, zAxis) => {
   const colorScale = zAxis?.colorScale;
   if (colorScale) {
-    return dataIndex => {
-      if (dataIndex == null) {
+    return name => {
+      if (name == null) {
+        return series.color;
+      }
+      const itemIndex = series.lookupByName.get(name);
+      if (itemIndex === undefined) {
+        return series.color;
+      }
+      const item = series.data[itemIndex];
+      if (item === undefined) {
         return series.color;
       }
-      const item = series.data[dataIndex];
       if (item.color !== undefined) {
         return item.color;
       }
@@ -20,11 +27,16 @@ const getColor = (series, _mainAxis, _secondaryAxis, zAxis) => {
       return color;
     };
   }
-  return dataIndex => {
-    if (dataIndex == null) {
+  return name => {
+    if (name == null) {
+      return series.color;
+    }
+    const itemIndex = series.lookupByName.get(name);
+    if (itemIndex === undefined) {
       return series.color;
     }
-    return series.data[dataIndex].color ?? series.color;
+    const item = series.data[itemIndex];
+    return item?.color ?? series.color;
   };
 };
 var _default = exports.default = getColor;

package/Map/seriesConfig/getColor.mjs

@@ -1,11 +1,18 @@
 const getColor = (series, _mainAxis, _secondaryAxis, zAxis) => {
   const colorScale = zAxis?.colorScale;
   if (colorScale) {
-    return dataIndex => {
-      if (dataIndex == null) {
+    return name => {
+      if (name == null) {
+        return series.color;
+      }
+      const itemIndex = series.lookupByName.get(name);
+      if (itemIndex === undefined) {
+        return series.color;
+      }
+      const item = series.data[itemIndex];
+      if (item === undefined) {
         return series.color;
       }
-      const item = series.data[dataIndex];
       if (item.color !== undefined) {
         return item.color;
       }
@@ -14,11 +21,16 @@ const getColor = (series, _mainAxis, _secondaryAxis, zAxis) => {
       return color;
     };
   }
-  return dataIndex => {
-    if (dataIndex == null) {
+  return name => {
+    if (name == null) {
+      return series.color;
+    }
+    const itemIndex = series.lookupByName.get(name);
+    if (itemIndex === undefined) {
       return series.color;
     }
-    return series.data[dataIndex].color ?? series.color;
+    const item = series.data[itemIndex];
+    return item?.color ?? series.color;
   };
 };
 export default getColor;

package/Map/seriesConfig/highlight.d.mts

@@ -0,0 +1,10 @@
+import type { HighlightScope } from '@mui/x-charts/context';
+import type { HighlightItemIdentifier } from '@mui/x-charts/models';
+/**
+ * The isHighlighted logic for main charts (those that are identified by an id and a name)
+ */
+export declare function createIsHighlighted(highlightScope: HighlightScope<'mapShape'> | null | undefined, highlightedItem: HighlightItemIdentifier<'mapShape'> | null): (item: HighlightItemIdentifier<"mapShape"> | null) => boolean;
+/**
+ * The isFade logic for main charts (those that are identified by an id and a name)
+ */
+export declare function createIsFaded(highlightScope: HighlightScope<'mapShape'> | null | undefined, highlightedItem: HighlightItemIdentifier<'mapShape'> | null): (item: HighlightItemIdentifier<"mapShape"> | null) => boolean;

package/Map/seriesConfig/highlight.d.ts

@@ -0,0 +1,10 @@
+import type { HighlightScope } from '@mui/x-charts/context';
+import type { HighlightItemIdentifier } from '@mui/x-charts/models';
+/**
+ * The isHighlighted logic for main charts (those that are identified by an id and a name)
+ */
+export declare function createIsHighlighted(highlightScope: HighlightScope<'mapShape'> | null | undefined, highlightedItem: HighlightItemIdentifier<'mapShape'> | null): (item: HighlightItemIdentifier<"mapShape"> | null) => boolean;
+/**
+ * The isFade logic for main charts (those that are identified by an id and a name)
+ */
+export declare function createIsFaded(highlightScope: HighlightScope<'mapShape'> | null | undefined, highlightedItem: HighlightItemIdentifier<'mapShape'> | null): (item: HighlightItemIdentifier<"mapShape"> | null) => boolean;

package/Map/seriesConfig/highlight.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createIsFaded = createIsFaded;
+exports.createIsHighlighted = createIsHighlighted;
+function alwaysFalse() {
+  return false;
+}
+
+/**
+ * The isHighlighted logic for main charts (those that are identified by an id and a name)
+ */
+function createIsHighlighted(highlightScope, highlightedItem) {
+  if (!highlightScope || !highlightedItem) {
+    return alwaysFalse;
+  }
+  return function isHighlighted(item) {
+    if (!item) {
+      return false;
+    }
+    if (highlightScope.highlight === 'series') {
+      return item.seriesId === highlightedItem.seriesId;
+    }
+    if (highlightScope.highlight === 'item') {
+      return item.name === highlightedItem.name && item.seriesId === highlightedItem.seriesId;
+    }
+    return false;
+  };
+}
+
+/**
+ * The isFade logic for main charts (those that are identified by an id and a name)
+ */
+function createIsFaded(highlightScope, highlightedItem) {
+  if (!highlightScope || !highlightedItem) {
+    return alwaysFalse;
+  }
+  return function isFaded(item) {
+    if (!item) {
+      return false;
+    }
+    if (highlightScope.fade === 'series') {
+      return item.seriesId === highlightedItem.seriesId && item.name !== highlightedItem.name;
+    }
+    if (highlightScope.fade === 'global') {
+      return item.seriesId !== highlightedItem.seriesId || item.name !== highlightedItem.name;
+    }
+    return false;
+  };
+}

package/Map/seriesConfig/highlight.mjs

@@ -0,0 +1,45 @@
+function alwaysFalse() {
+  return false;
+}
+
+/**
+ * The isHighlighted logic for main charts (those that are identified by an id and a name)
+ */
+export function createIsHighlighted(highlightScope, highlightedItem) {
+  if (!highlightScope || !highlightedItem) {
+    return alwaysFalse;
+  }
+  return function isHighlighted(item) {
+    if (!item) {
+      return false;
+    }
+    if (highlightScope.highlight === 'series') {
+      return item.seriesId === highlightedItem.seriesId;
+    }
+    if (highlightScope.highlight === 'item') {
+      return item.name === highlightedItem.name && item.seriesId === highlightedItem.seriesId;
+    }
+    return false;
+  };
+}
+
+/**
+ * The isFade logic for main charts (those that are identified by an id and a name)
+ */
+export function createIsFaded(highlightScope, highlightedItem) {
+  if (!highlightScope || !highlightedItem) {
+    return alwaysFalse;
+  }
+  return function isFaded(item) {
+    if (!item) {
+      return false;
+    }
+    if (highlightScope.fade === 'series') {
+      return item.seriesId === highlightedItem.seriesId && item.name !== highlightedItem.name;
+    }
+    if (highlightScope.fade === 'global') {
+      return item.seriesId !== highlightedItem.seriesId || item.name !== highlightedItem.name;
+    }
+    return false;
+  };
+}

package/Map/seriesConfig/identifierCleaner.d.mts

@@ -0,0 +1,3 @@
+import type { IdentifierCleaner } from '@mui/x-charts/internals';
+declare const identifierCleaner: IdentifierCleaner<'mapShape'>;
+export default identifierCleaner;

package/Map/seriesConfig/identifierCleaner.d.ts

@@ -0,0 +1,3 @@
+import type { IdentifierCleaner } from '@mui/x-charts/internals';
+declare const identifierCleaner: IdentifierCleaner<'mapShape'>;
+export default identifierCleaner;

package/Map/seriesConfig/identifierCleaner.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const identifierCleaner = identifier => {
+  return {
+    type: identifier.type,
+    seriesId: identifier.seriesId,
+    name: identifier.name
+  };
+};
+var _default = exports.default = identifierCleaner;

package/Map/seriesConfig/identifierCleaner.mjs

@@ -0,0 +1,8 @@
+const identifierCleaner = identifier => {
+  return {
+    type: identifier.type,
+    seriesId: identifier.seriesId,
+    name: identifier.name
+  };
+};
+export default identifierCleaner;

package/Map/seriesConfig/identifierSerializer.d.mts

@@ -0,0 +1,3 @@
+import type { IdentifierSerializer } from '@mui/x-charts/internals';
+declare const identifierSerializer: IdentifierSerializer<'mapShape'>;
+export default identifierSerializer;

package/Map/seriesConfig/identifierSerializer.d.ts

@@ -0,0 +1,3 @@
+import type { IdentifierSerializer } from '@mui/x-charts/internals';
+declare const identifierSerializer: IdentifierSerializer<'mapShape'>;
+export default identifierSerializer;

package/Map/seriesConfig/identifierSerializer.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _internals = require("@mui/x-charts/internals");
+const identifierSerializer = identifier => {
+  const namePart = identifier.name == null ? '' : `(${identifier.name})`;
+  return `${(0, _internals.typeSerializer)(identifier.type)}${(0, _internals.seriesIdSerializer)(identifier.seriesId)}Name(${namePart})`;
+};
+var _default = exports.default = identifierSerializer;

package/Map/seriesConfig/identifierSerializer.mjs

@@ -0,0 +1,6 @@
+import { typeSerializer, seriesIdSerializer } from '@mui/x-charts/internals';
+const identifierSerializer = identifier => {
+  const namePart = identifier.name == null ? '' : `(${identifier.name})`;
+  return `${typeSerializer(identifier.type)}${seriesIdSerializer(identifier.seriesId)}Name(${namePart})`;
+};
+export default identifierSerializer;

package/Map/seriesConfig/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.mapShapeSeriesConfig = void 0;
-var _internals = require("@mui/x-charts/internals");
 var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _legend = _interopRequireDefault(require("./legend"));
@@ -14,17 +13,20 @@ var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWit
 var _descriptionGetter = _interopRequireDefault(require("./descriptionGetter"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _identifierSerializer = _interopRequireDefault(require("./identifierSerializer"));
+var _identifierCleaner = _interopRequireDefault(require("./identifierCleaner"));
+var _highlight = require("./highlight");
 const mapShapeSeriesConfig = exports.mapShapeSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   colorProcessor: _getColor.default,
   legendGetter: _legend.default,
   tooltipGetter: _tooltip.default,
-  tooltipItemPositionGetter: _tooltipPosition.default,
+  selectorTooltipItemPosition: _tooltipPosition.default,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
   keyboardFocusHandler: _keyboardFocusHandler.default,
-  identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex,
-  identifierCleaner: _internals.identifierCleanerSeriesIdDataIndex,
+  identifierSerializer: _identifierSerializer.default,
+  identifierCleaner: _identifierCleaner.default,
   descriptionGetter: _descriptionGetter.default,
-  isHighlightedCreator: _internals.createIsHighlighted,
-  isFadedCreator: _internals.createIsFaded
+  isHighlightedCreator: _highlight.createIsHighlighted,
+  isFadedCreator: _highlight.createIsFaded
 };

package/Map/seriesConfig/index.mjs

@@ -1,4 +1,3 @@
-import { identifierSerializerSeriesIdDataIndex, identifierCleanerSeriesIdDataIndex, createIsHighlighted, createIsFaded } from '@mui/x-charts/internals';
 import seriesProcessor from "./seriesProcessor.mjs";
 import getColor from "./getColor.mjs";
 import legendGetter from "./legend.mjs";
@@ -6,17 +5,20 @@ import tooltipGetter from "./tooltip.mjs";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.mjs";
 import descriptionGetter from "./descriptionGetter.mjs";
 import keyboardFocusHandler from "./keyboardFocusHandler.mjs";
-import tooltipItemPositionGetter from "./tooltipPosition.mjs";
+import selectorTooltipItemPosition from "./tooltipPosition.mjs";
+import identifierSerializer from "./identifierSerializer.mjs";
+import identifierCleaner from "./identifierCleaner.mjs";
+import { createIsHighlighted, createIsFaded } from "./highlight.mjs";
 export const mapShapeSeriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
   legendGetter,
   tooltipGetter,
-  tooltipItemPositionGetter,
+  selectorTooltipItemPosition,
   getSeriesWithDefaultValues,
   keyboardFocusHandler,
-  identifierSerializer: identifierSerializerSeriesIdDataIndex,
-  identifierCleaner: identifierCleanerSeriesIdDataIndex,
+  identifierSerializer,
+  identifierCleaner,
   descriptionGetter,
   isHighlightedCreator: createIsHighlighted,
   isFadedCreator: createIsFaded

package/Map/seriesConfig/keyboardFocusHandler.d.mts

@@ -1,9 +1,3 @@
 import type { KeyboardFocusHandler } from '@mui/x-charts/internals';
-/**
- * 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.
- */
 declare const keyboardFocusHandler: KeyboardFocusHandler<'mapShape', 'mapShape'>;
 export default keyboardFocusHandler;

package/Map/seriesConfig/keyboardFocusHandler.d.ts

@@ -1,9 +1,3 @@
 import type { KeyboardFocusHandler } from '@mui/x-charts/internals';
-/**
- * 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.
- */
 declare const keyboardFocusHandler: KeyboardFocusHandler<'mapShape', 'mapShape'>;
 export default keyboardFocusHandler;

package/Map/seriesConfig/keyboardFocusHandler.js

@@ -5,15 +5,48 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _internals = require("@mui/x-charts/internals");
+/**
+ * Keyboard navigation for the map series.
+ *
+ * The `mapShape` identifier is keyed by the feature `name` (a string), but navigation itself
+ * is position-based, so the shared `createCommonKeyboardFocusHandler` does all the work
+ * (stepping, hidden-skipping, boundaries, moving between series). This handler only adapts the
+ * boundaries: it translates the focused `name` to a `dataIndex` on the way in (through the
+ * series `lookupByName` map), and the resulting `dataIndex` back to a `name` on the way out.
+ *
+ * `ArrowRight`/`ArrowLeft` step within the focused series, `ArrowUp`/`ArrowDown` move between series.
+ */
+
 const mapShapeSeriesTypes = new Set(['mapShape']);
 const allowCycles = false;
 const useCurrentSeriesMaxLength = true;
+const commonFocusHandler = (0, _internals.createCommonKeyboardFocusHandler)(mapShapeSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
+const keyboardFocusHandler = event => {
+  const updateFocusedItem = commonFocusHandler(event);
+  if (!updateFocusedItem) {
+    return null;
+  }
+  return (currentItem, state) => {
+    const mapSeries = (0, _internals.selectorChartSeriesProcessed)(state).mapShape;
 
-/**
- * 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 = (0, _internals.createCommonKeyboardFocusHandler)(mapShapeSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
+    // name -> dataIndex
+    const current = currentItem ? {
+      type: 'mapShape',
+      seriesId: currentItem.seriesId,
+      dataIndex: mapSeries?.series[currentItem.seriesId]?.lookupByName.get(currentItem.name) ?? -1
+    } : null;
+    const next = updateFocusedItem(current, state);
+    if (!next) {
+      return null;
+    }
+
+    // dataIndex -> name
+    const name = mapSeries?.series[next.seriesId]?.data[next.dataIndex]?.name;
+    return name === undefined ? null : {
+      type: 'mapShape',
+      seriesId: next.seriesId,
+      name
+    };
+  };
+};
 var _default = exports.default = keyboardFocusHandler;

package/Map/seriesConfig/keyboardFocusHandler.mjs

@@ -1,13 +1,46 @@
-import { createCommonKeyboardFocusHandler } from '@mui/x-charts/internals';
+import { createCommonKeyboardFocusHandler, selectorChartSeriesProcessed } from '@mui/x-charts/internals';
+/**
+ * Keyboard navigation for the map series.
+ *
+ * The `mapShape` identifier is keyed by the feature `name` (a string), but navigation itself
+ * is position-based, so the shared `createCommonKeyboardFocusHandler` does all the work
+ * (stepping, hidden-skipping, boundaries, moving between series). This handler only adapts the
+ * boundaries: it translates the focused `name` to a `dataIndex` on the way in (through the
+ * series `lookupByName` map), and the resulting `dataIndex` back to a `name` on the way out.
+ *
+ * `ArrowRight`/`ArrowLeft` step within the focused series, `ArrowUp`/`ArrowDown` move between series.
+ */
+
 const mapShapeSeriesTypes = new Set(['mapShape']);
 const allowCycles = false;
 const useCurrentSeriesMaxLength = true;
+const commonFocusHandler = createCommonKeyboardFocusHandler(mapShapeSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
+const keyboardFocusHandler = event => {
+  const updateFocusedItem = commonFocusHandler(event);
+  if (!updateFocusedItem) {
+    return null;
+  }
+  return (currentItem, state) => {
+    const mapSeries = selectorChartSeriesProcessed(state).mapShape;
 
-/**
- * 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 = createCommonKeyboardFocusHandler(mapShapeSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
+    // name -> dataIndex
+    const current = currentItem ? {
+      type: 'mapShape',
+      seriesId: currentItem.seriesId,
+      dataIndex: mapSeries?.series[currentItem.seriesId]?.lookupByName.get(currentItem.name) ?? -1
+    } : null;
+    const next = updateFocusedItem(current, state);
+    if (!next) {
+      return null;
+    }
+
+    // dataIndex -> name
+    const name = mapSeries?.series[next.seriesId]?.data[next.dataIndex]?.name;
+    return name === undefined ? null : {
+      type: 'mapShape',
+      seriesId: next.seriesId,
+      name
+    };
+  };
+};
 export default keyboardFocusHandler;

package/Map/seriesConfig/seriesProcessor.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _internals = require("@mui/x-charts/internals");
 const defaultValueFormatter = v => v == null ? '' : String(v.value);
 const seriesProcessor = ({
@@ -41,16 +42,24 @@ const seriesProcessor = ({
     } else {
       data = input.data ?? [];
     }
+    const lookupByName = new Map();
+    data.forEach((item, index) => {
+      if (lookupByName.has(item.name)) {
+        throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Series "${seriesId}" has a duplicated name "${item.name}".\n` + `Map shapes are identified by their name, so duplicates cannot be told apart for coloring, tooltips, and highlighting.\n` + `Ensure each data entry has a unique name.` : (0, _formatErrorMessage2.default)(294, seriesId, item.name));
+      }
+      lookupByName.set(item.name, index);
+    });
     defaultizedSeries[seriesId] = (0, _extends2.default)({
       labelMarkType: 'square'
     }, input, {
-      data: data.map((item, dataIndex) => (0, _extends2.default)({}, item, {
+      data: data.map(item => (0, _extends2.default)({}, item, {
         hidden: !isItemVisible?.({
           type: 'mapShape',
           seriesId,
-          dataIndex
+          name: item.name
         })
       })),
+      lookupByName,
       hidden: !isItemVisible?.({
         type: 'mapShape',
         seriesId