@mui/x-charts-pro 9.0.0-alpha.2 → 9.0.0-alpha.4

package/Heatmap/HeatmapTooltip/HeatmapTooltip.classes.mjs

@@ -1,5 +1,5 @@
 import composeClasses from '@mui/utils/composeClasses';
-import { getChartsTooltipUtilityClass } from '@mui/x-charts/ChartsTooltip';
+import { getChartsTooltipUtilityClass } from '@mui/x-charts/internals';
 export const useUtilityClasses = props => {
   const {
     classes

package/Heatmap/HeatmapTooltip/HeatmapTooltipContent.js

@@ -21,21 +21,23 @@ function HeatmapTooltipContent(props) {
   const yAxis = (0, _hooks.useYAxis)();
   const heatmapSeries = (0, _useHeatmapSeries.useHeatmapSeriesContext)();
   const tooltipData = (0, _ChartsTooltip.useItemTooltip)();
-  const dataIndex = tooltipData?.identifier.dataIndex;
-  if (!tooltipData || dataIndex === undefined || !heatmapSeries || heatmapSeries.seriesOrder.length === 0) {
+  if (!tooltipData || !heatmapSeries || heatmapSeries.seriesOrder.length === 0) {
     return null;
   }
-  const {
-    series,
-    seriesOrder
-  } = heatmapSeries;
-  const seriesId = seriesOrder[0];
   const {
     color,
-    value,
-    markType
+    markType,
+    identifier
   } = tooltipData;
-  const [xIndex, yIndex] = value;
+  const thisSeries = heatmapSeries.series[heatmapSeries.seriesOrder[0]];
+  const value = thisSeries.heatmapData.getValue(identifier.xIndex, identifier.yIndex) ?? null;
+  if (value === null) {
+    return null;
+  }
+  const {
+    xIndex,
+    yIndex
+  } = identifier;
   const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
     location: 'tooltip',
     scale: xAxis.scale
@@ -44,10 +46,11 @@ function HeatmapTooltipContent(props) {
     location: 'tooltip',
     scale: yAxis.scale
   }) ?? yAxis.data[yIndex].toLocaleString();
-  const formattedValue = series[seriesId].valueFormatter(value, {
-    dataIndex
+  const formattedValue = thisSeries.valueFormatter(value, {
+    xIndex,
+    yIndex
   });
-  const seriesLabel = (0, _internals.getLabel)(series[seriesId].label, 'tooltip');
+  const seriesLabel = (0, _internals.getLabel)(thisSeries.label, 'tooltip');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipPaper, {
     className: classes.paper,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipTable, {

package/Heatmap/HeatmapTooltip/HeatmapTooltipContent.mjs

@@ -15,21 +15,23 @@ export function HeatmapTooltipContent(props) {
   const yAxis = useYAxis();
   const heatmapSeries = useHeatmapSeriesContext();
   const tooltipData = useItemTooltip();
-  const dataIndex = tooltipData?.identifier.dataIndex;
-  if (!tooltipData || dataIndex === undefined || !heatmapSeries || heatmapSeries.seriesOrder.length === 0) {
+  if (!tooltipData || !heatmapSeries || heatmapSeries.seriesOrder.length === 0) {
     return null;
   }
-  const {
-    series,
-    seriesOrder
-  } = heatmapSeries;
-  const seriesId = seriesOrder[0];
   const {
     color,
-    value,
-    markType
+    markType,
+    identifier
   } = tooltipData;
-  const [xIndex, yIndex] = value;
+  const thisSeries = heatmapSeries.series[heatmapSeries.seriesOrder[0]];
+  const value = thisSeries.heatmapData.getValue(identifier.xIndex, identifier.yIndex) ?? null;
+  if (value === null) {
+    return null;
+  }
+  const {
+    xIndex,
+    yIndex
+  } = identifier;
   const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
     location: 'tooltip',
     scale: xAxis.scale
@@ -38,10 +40,11 @@ export function HeatmapTooltipContent(props) {
     location: 'tooltip',
     scale: yAxis.scale
   }) ?? yAxis.data[yIndex].toLocaleString();
-  const formattedValue = series[seriesId].valueFormatter(value, {
-    dataIndex
+  const formattedValue = thisSeries.valueFormatter(value, {
+    xIndex,
+    yIndex
   });
-  const seriesLabel = getLabel(series[seriesId].label, 'tooltip');
+  const seriesLabel = getLabel(thisSeries.label, 'tooltip');
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     className: classes.paper,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {

package/Heatmap/heatmapClasses.d.mts

@@ -1,4 +1,7 @@
+import type { HeatmapCellOwnerState } from "./HeatmapCell.mjs";
 export interface HeatmapClasses {
+  /** Styles applied to the heatmap plot root element. */
+  root: string;
   /** Styles applied to the heatmap cells. */
   cell: string;
   /**
@@ -14,9 +17,11 @@ export interface HeatmapClasses {
   /**
    * Styles applied to the root element for a specified series.
    * Needs to be suffixed with the series ID: `.${heatmapClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
    */
   series: string;
 }
 export type HeatmapClassKey = keyof HeatmapClasses;
 export declare function getHeatmapUtilityClass(slot: string): string;
-export declare const heatmapClasses: HeatmapClasses;
+export declare const heatmapClasses: HeatmapClasses;
+export declare const useUtilityClasses: (ownerState: HeatmapCellOwnerState) => Record<"cell" | "root", string>;

package/Heatmap/heatmapClasses.d.ts

@@ -1,4 +1,7 @@
+import type { HeatmapCellOwnerState } from "./HeatmapCell.js";
 export interface HeatmapClasses {
+  /** Styles applied to the heatmap plot root element. */
+  root: string;
   /** Styles applied to the heatmap cells. */
   cell: string;
   /**
@@ -14,9 +17,11 @@ export interface HeatmapClasses {
   /**
    * Styles applied to the root element for a specified series.
    * Needs to be suffixed with the series ID: `.${heatmapClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
    */
   series: string;
 }
 export type HeatmapClassKey = keyof HeatmapClasses;
 export declare function getHeatmapUtilityClass(slot: string): string;
-export declare const heatmapClasses: HeatmapClasses;
+export declare const heatmapClasses: HeatmapClasses;
+export declare const useUtilityClasses: (ownerState: HeatmapCellOwnerState) => Record<"cell" | "root", string>;

package/Heatmap/heatmapClasses.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getHeatmapUtilityClass = getHeatmapUtilityClass;
-exports.heatmapClasses = void 0;
+exports.useUtilityClasses = exports.heatmapClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getHeatmapUtilityClass(slot) {
   // Those should be common to all charts
@@ -16,7 +17,21 @@ function getHeatmapUtilityClass(slot) {
   }
   return (0, _generateUtilityClass.default)('MuiHeatmap', slot);
 }
-const heatmapClasses = exports.heatmapClasses = (0, _extends2.default)({}, (0, _generateUtilityClasses.default)('MuiHeatmap', ['cell', 'series']), {
+const heatmapClasses = exports.heatmapClasses = (0, _extends2.default)({}, (0, _generateUtilityClasses.default)('MuiHeatmap', ['root', 'cell', 'series']), {
   highlighted: 'Charts-highlighted',
   faded: 'Charts-faded'
-});
+});
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    seriesId,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    cell: ['cell', `series-${seriesId}`, isFaded && 'faded', isHighlighted && 'highlighted']
+  };
+  return (0, _composeClasses.default)(slots, getHeatmapUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/Heatmap/heatmapClasses.mjs

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getHeatmapUtilityClass(slot) {
   // Those should be common to all charts
@@ -8,7 +9,20 @@ export function getHeatmapUtilityClass(slot) {
   }
   return generateUtilityClass('MuiHeatmap', slot);
 }
-export const heatmapClasses = _extends({}, generateUtilityClasses('MuiHeatmap', ['cell', 'series']), {
+export const heatmapClasses = _extends({}, generateUtilityClasses('MuiHeatmap', ['root', 'cell', 'series']), {
   highlighted: 'Charts-highlighted',
   faded: 'Charts-faded'
-});
+});
+export const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    seriesId,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    cell: ['cell', `series-${seriesId}`, isFaded && 'faded', isHighlighted && 'highlighted']
+  };
+  return composeClasses(slots, getHeatmapUtilityClass, classes);
+};

package/Heatmap/index.d.mts

@@ -3,7 +3,9 @@ export type { HeatmapSeries, HeatmapProps, HeatmapSlots, HeatmapSlotProps } from
 export { HeatmapPlot, type HeatmapPlotProps } from "./HeatmapPlot.mjs";
 export type { HeatmapPlotSlots, HeatmapPlotSlotProps } from "./Heatmap.types.mjs";
 export * from "./FocusedHeatmapCell.mjs";
-export type { HeatmapCellProps } from "./internals/HeatmapCell.mjs";
+export { HeatmapCell } from "./HeatmapCell.mjs";
+export type { HeatmapCellProps, HeatmapCellOwnerState } from "./HeatmapCell.mjs";
 export * from "./HeatmapTooltip/index.mjs";
 export * from "./Heatmap.plugins.mjs";
-export * from "./heatmapClasses.mjs";
+export { heatmapClasses } from "./heatmapClasses.mjs";
+export type { HeatmapClasses, HeatmapClassKey } from "./heatmapClasses.mjs";

package/Heatmap/index.d.ts

@@ -3,7 +3,9 @@ export type { HeatmapSeries, HeatmapProps, HeatmapSlots, HeatmapSlotProps } from
 export { HeatmapPlot, type HeatmapPlotProps } from "./HeatmapPlot.js";
 export type { HeatmapPlotSlots, HeatmapPlotSlotProps } from "./Heatmap.types.js";
 export * from "./FocusedHeatmapCell.js";
-export type { HeatmapCellProps } from "./internals/HeatmapCell.js";
+export { HeatmapCell } from "./HeatmapCell.js";
+export type { HeatmapCellProps, HeatmapCellOwnerState } from "./HeatmapCell.js";
 export * from "./HeatmapTooltip/index.js";
 export * from "./Heatmap.plugins.js";
-export * from "./heatmapClasses.js";
+export { heatmapClasses } from "./heatmapClasses.js";
+export type { HeatmapClasses, HeatmapClassKey } from "./heatmapClasses.js";

package/Heatmap/index.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Heatmap: true,
-  HeatmapPlot: true
+  HeatmapPlot: true,
+  HeatmapCell: true,
+  heatmapClasses: true
 };
 Object.defineProperty(exports, "Heatmap", {
   enumerable: true,
@@ -13,12 +15,24 @@ Object.defineProperty(exports, "Heatmap", {
     return _Heatmap.Heatmap;
   }
 });
+Object.defineProperty(exports, "HeatmapCell", {
+  enumerable: true,
+  get: function () {
+    return _HeatmapCell.HeatmapCell;
+  }
+});
 Object.defineProperty(exports, "HeatmapPlot", {
   enumerable: true,
   get: function () {
     return _HeatmapPlot.HeatmapPlot;
   }
 });
+Object.defineProperty(exports, "heatmapClasses", {
+  enumerable: true,
+  get: function () {
+    return _heatmapClasses.heatmapClasses;
+  }
+});
 var _Heatmap = require("./Heatmap");
 var _HeatmapPlot = require("./HeatmapPlot");
 var _FocusedHeatmapCell = require("./FocusedHeatmapCell");
@@ -33,6 +47,7 @@ Object.keys(_FocusedHeatmapCell).forEach(function (key) {
     }
   });
 });
+var _HeatmapCell = require("./HeatmapCell");
 var _HeatmapTooltip = require("./HeatmapTooltip");
 Object.keys(_HeatmapTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -57,15 +72,4 @@ Object.keys(_Heatmap2).forEach(function (key) {
     }
   });
 });
-var _heatmapClasses = require("./heatmapClasses");
-Object.keys(_heatmapClasses).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _heatmapClasses[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _heatmapClasses[key];
-    }
-  });
-});
+var _heatmapClasses = require("./heatmapClasses");

package/Heatmap/index.mjs

@@ -1,6 +1,7 @@
 export { Heatmap } from "./Heatmap.mjs";
 export { HeatmapPlot } from "./HeatmapPlot.mjs";
 export * from "./FocusedHeatmapCell.mjs";
+export { HeatmapCell } from "./HeatmapCell.mjs";
 export * from "./HeatmapTooltip/index.mjs";
 export * from "./Heatmap.plugins.mjs";
-export * from "./heatmapClasses.mjs";
+export { heatmapClasses } from "./heatmapClasses.mjs";

package/Heatmap/seriesConfig/getColor.js

@@ -7,9 +7,11 @@ exports.default = void 0;
 const getColor = (series, xAxis, yAxis, zAxis) => {
   const zColorScale = zAxis?.colorScale;
   if (zColorScale) {
-    return dataIndex => {
-      const value = series.data[dataIndex];
-      const color = zColorScale(value[2]);
+    return value => {
+      if (value === null) {
+        return '';
+      }
+      const color = zColorScale(value);
       if (color === null) {
         return '';
       }

package/Heatmap/seriesConfig/getColor.mjs

@@ -1,9 +1,11 @@
 const getColor = (series, xAxis, yAxis, zAxis) => {
   const zColorScale = zAxis?.colorScale;
   if (zColorScale) {
-    return dataIndex => {
-      const value = series.data[dataIndex];
-      const color = zColorScale(value[2]);
+    return value => {
+      if (value === null) {
+        return '';
+      }
+      const color = zColorScale(value);
       if (color === null) {
         return '';
       }

package/Heatmap/seriesConfig/getItemAtPosition.d.mts

@@ -1,6 +1,6 @@
 import type { ChartState, UseChartCartesianAxisSignature } from '@mui/x-charts/internals';
-import type { SeriesItemIdentifierWithType } from '@mui/x-charts/models';
+import type { SeriesItemIdentifierWithData } from '@mui/x-charts/models';
 export default function getItemAtPosition(state: ChartState<[UseChartCartesianAxisSignature]>, point: {
   x: number;
   y: number;
-}): SeriesItemIdentifierWithType<'heatmap'> | undefined;
+}): SeriesItemIdentifierWithData<'heatmap'> | undefined;

package/Heatmap/seriesConfig/getItemAtPosition.d.ts

@@ -1,6 +1,6 @@
 import type { ChartState, UseChartCartesianAxisSignature } from '@mui/x-charts/internals';
-import type { SeriesItemIdentifierWithType } from '@mui/x-charts/models';
+import type { SeriesItemIdentifierWithData } from '@mui/x-charts/models';
 export default function getItemAtPosition(state: ChartState<[UseChartCartesianAxisSignature]>, point: {
   x: number;
   y: number;
-}): SeriesItemIdentifierWithType<'heatmap'> | undefined;
+}): SeriesItemIdentifierWithData<'heatmap'> | undefined;

package/Heatmap/seriesConfig/getItemAtPosition.js

@@ -26,20 +26,12 @@ function getItemAtPosition(state, point) {
   if (xIndex === -1 || yIndex === -1) {
     return undefined;
   }
-  const dataIndex = series ? series.series[series.seriesOrder[0]].data.findIndex(d => d[0] === xIndex && d[1] === yIndex) : -1;
-  if (dataIndex === -1) {
-    return {
-      type: 'heatmap',
-      seriesId,
-      xIndex,
-      yIndex
-    };
-  }
+  const value = series?.series[series.seriesOrder[0]].heatmapData.getValue(xIndex, yIndex) ?? null;
   return {
     type: 'heatmap',
     seriesId,
-    dataIndex,
     xIndex,
-    yIndex
+    yIndex,
+    value
   };
 }

package/Heatmap/seriesConfig/getItemAtPosition.mjs

@@ -20,20 +20,12 @@ export default function getItemAtPosition(state, point) {
   if (xIndex === -1 || yIndex === -1) {
     return undefined;
   }
-  const dataIndex = series ? series.series[series.seriesOrder[0]].data.findIndex(d => d[0] === xIndex && d[1] === yIndex) : -1;
-  if (dataIndex === -1) {
-    return {
-      type: 'heatmap',
-      seriesId,
-      xIndex,
-      yIndex
-    };
-  }
+  const value = series?.series[series.seriesOrder[0]].heatmapData.getValue(xIndex, yIndex) ?? null;
   return {
     type: 'heatmap',
     seriesId,
-    dataIndex,
     xIndex,
-    yIndex
+    yIndex,
+    value
   };
 }

package/Heatmap/seriesConfig/identifierCleaner.d.mts

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

package/Heatmap/seriesConfig/identifierCleaner.d.ts

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

package/Heatmap/seriesConfig/identifierCleaner.js

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

package/Heatmap/seriesConfig/identifierCleaner.mjs

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

package/Heatmap/seriesConfig/identifierSerializer.d.mts

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

package/Heatmap/seriesConfig/identifierSerializer.d.ts

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

package/Heatmap/seriesConfig/identifierSerializer.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _internals = require("@mui/x-charts/internals");
+const identifierSerializer = identifier => {
+  return `${(0, _internals.typeSerializer)(identifier.type)}${(0, _internals.seriesIdSerializer)(identifier.seriesId)}X(${identifier.xIndex})Y(${identifier.yIndex})`;
+};
+var _default = exports.default = identifierSerializer;

package/Heatmap/seriesConfig/identifierSerializer.mjs

@@ -0,0 +1,5 @@
+import { typeSerializer, seriesIdSerializer } from '@mui/x-charts/internals';
+const identifierSerializer = identifier => {
+  return `${typeSerializer(identifier.type)}${seriesIdSerializer(identifier.seriesId)}X(${identifier.xIndex})Y(${identifier.yIndex})`;
+};
+export default identifierSerializer;

package/Heatmap/seriesConfig/index.js

@@ -15,6 +15,8 @@ var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
 var _getItemAtPosition = _interopRequireDefault(require("./getItemAtPosition"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _highlight = require("./highlight");
+var _identifierSerializer = _interopRequireDefault(require("./identifierSerializer"));
+var _identifierCleaner = _interopRequireDefault(require("./identifierCleaner"));
 _internals.cartesianSeriesTypes.addType('heatmap');
 const heatmapSeriesConfig = exports.heatmapSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
@@ -25,8 +27,8 @@ const heatmapSeriesConfig = exports.heatmapSeriesConfig = {
   xExtremumGetter: _extremums.getBaseExtremum,
   yExtremumGetter: _extremums.getBaseExtremum,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
-  identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex,
-  identifierCleaner: _internals.identifierCleanerSeriesIdDataIndex,
+  identifierSerializer: _identifierSerializer.default,
+  identifierCleaner: _identifierCleaner.default,
   getItemAtPosition: _getItemAtPosition.default,
   keyboardFocusHandler: _keyboardFocusHandler.default,
   isHighlightedCreator: _highlight.createIsHighlighted,

package/Heatmap/seriesConfig/index.mjs

@@ -1,4 +1,4 @@
-import { cartesianSeriesTypes, identifierSerializerSeriesIdDataIndex, identifierCleanerSeriesIdDataIndex } from '@mui/x-charts/internals';
+import { cartesianSeriesTypes } from '@mui/x-charts/internals';
 import { getBaseExtremum } from "./extremums.mjs";
 import seriesProcessor from "./seriesProcessor.mjs";
 import getColor from "./getColor.mjs";
@@ -8,6 +8,8 @@ import tooltipItemPositionGetter from "./tooltipPosition.mjs";
 import getItemAtPosition from "./getItemAtPosition.mjs";
 import keyboardFocusHandler from "./keyboardFocusHandler.mjs";
 import { createIsFaded, createIsHighlighted } from "./highlight.mjs";
+import identifierSerializer from "./identifierSerializer.mjs";
+import identifierCleaner from "./identifierCleaner.mjs";
 cartesianSeriesTypes.addType('heatmap');
 export const heatmapSeriesConfig = {
   seriesProcessor,
@@ -18,8 +20,8 @@ export const heatmapSeriesConfig = {
   xExtremumGetter: getBaseExtremum,
   yExtremumGetter: getBaseExtremum,
   getSeriesWithDefaultValues,
-  identifierSerializer: identifierSerializerSeriesIdDataIndex,
-  identifierCleaner: identifierCleanerSeriesIdDataIndex,
+  identifierSerializer,
+  identifierCleaner,
   getItemAtPosition,
   keyboardFocusHandler,
   isHighlightedCreator: createIsHighlighted,

package/Heatmap/seriesConfig/keyboardFocusHandler.js

@@ -13,30 +13,17 @@ function getFirstCell(state) {
   if (!seriesId || !series || !data || data.length === 0) {
     return null;
   }
-  const dataIndex = data.findIndex(value => value[0] === 0 && value[1] === 0);
-  if (dataIndex === -1) {
-    return {
-      type: 'heatmap',
-      seriesId,
-      xIndex: 0,
-      yIndex: 0
-    };
-  }
   return {
     type: 'heatmap',
     seriesId,
-    dataIndex,
     xIndex: 0,
     yIndex: 0
   };
 }
-const updateCoordinates = (newXIndex, newYIndex, currentItem, state) => {
-  const seriesData = state.series.defaultizedSeries.heatmap?.series[currentItem.seriesId]?.data;
-  const dataIndex = seriesData?.findIndex(value => value[0] === newXIndex && value[1] === newYIndex);
+const updateCoordinates = (newXIndex, newYIndex, currentItem) => {
   return (0, _extends2.default)({}, currentItem, {
     xIndex: newXIndex,
-    yIndex: newYIndex,
-    dataIndex: dataIndex === -1 || dataIndex === undefined ? undefined : dataIndex
+    yIndex: newYIndex
   });
 };
 const keyboardFocusHandler = event => {
@@ -50,7 +37,7 @@ const keyboardFocusHandler = event => {
         if (currentItem.xIndex + 1 === (maxLength ?? 0)) {
           return currentItem;
         }
-        return updateCoordinates(currentItem.xIndex + 1, currentItem.yIndex, currentItem, state);
+        return updateCoordinates(currentItem.xIndex + 1, currentItem.yIndex, currentItem);
       };
     case 'ArrowLeft':
       return (currentItem, state) => {
@@ -60,7 +47,7 @@ const keyboardFocusHandler = event => {
         if (currentItem.xIndex - 1 < 0) {
           return currentItem;
         }
-        return updateCoordinates(currentItem.xIndex - 1, currentItem.yIndex, currentItem, state);
+        return updateCoordinates(currentItem.xIndex - 1, currentItem.yIndex, currentItem);
       };
     case 'ArrowDown':
       return (currentItem, state) => {
@@ -71,7 +58,7 @@ const keyboardFocusHandler = event => {
         if (currentItem.yIndex + 1 === (maxLength ?? 0)) {
           return currentItem;
         }
-        return updateCoordinates(currentItem.xIndex, currentItem.yIndex + 1, currentItem, state);
+        return updateCoordinates(currentItem.xIndex, currentItem.yIndex + 1, currentItem);
       };
     case 'ArrowUp':
       return (currentItem, state) => {
@@ -81,7 +68,7 @@ const keyboardFocusHandler = event => {
         if (currentItem.yIndex - 1 < 0) {
           return currentItem;
         }
-        return updateCoordinates(currentItem.xIndex, currentItem.yIndex - 1, currentItem, state);
+        return updateCoordinates(currentItem.xIndex, currentItem.yIndex - 1, currentItem);
       };
     default:
       return null;