@mui/x-charts 8.13.0 → 8.14.0

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.d.ts

@@ -1,5 +1,6 @@
+import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { ZoomData } from "./zoom.types.js";
-import { AxisId } from "../../../../models/axis.js";
+import { AxisId, D3Scale } from "../../../../models/axis.js";
 export declare const createZoomMap: (zoom: readonly ZoomData[]) => Map<AxisId, ZoomData>;
 /**
  * Following selectors are not exported because they exist in the MIT chart only to ba able to reuse the Zoom state from the pro.
@@ -33,21 +34,55 @@ export declare const selectorDefaultYAxisTickNumber: import("reselect").Selector
 } & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, number, []>;
-export declare const selectorChartXScales: import("reselect").Selector<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("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+type DomainDefinition = {
+  domain: ReadonlyArray<string | NumberValue>;
+  tickNumber?: number;
+};
+export declare const selectorChartXDomains: import("reselect").Selector<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("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, Record<AxisId, import("./getAxisScale.js").ScaleDefinition>, []>;
-export declare const selectorChartYScales: import("reselect").Selector<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("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+}, Record<AxisId, DomainDefinition>, []>;
+export declare const selectorChartYDomains: import("reselect").Selector<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("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, Record<AxisId, import("./getAxisScale.js").ScaleDefinition>, []>;
+}, Record<AxisId, DomainDefinition>, []>;
 export declare const selectorChartZoomAxisFilters: import("reselect").Selector<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("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<{}>, import("./zoom.types.js").GetZoomAxisFilters | undefined, []>;
+export declare const selectorChartFilteredXDomains: import("reselect").Selector<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("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, Record<AxisId, readonly (string | NumberValue)[]>, []>;
+export declare const selectorChartFilteredYDomains: import("reselect").Selector<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("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, Record<AxisId, readonly (string | NumberValue)[]>, []>;
+export declare const selectorChartNormalizedXScales: import("reselect").Selector<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("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, Record<AxisId, D3Scale>, []>;
+export declare const selectorChartNormalizedYScales: import("reselect").Selector<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("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, Record<AxisId, D3Scale>, []>;
+export declare const selectorChartXScales: import("reselect").Selector<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("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, Record<AxisId, D3Scale>, []>;
+export declare const selectorChartYScales: import("reselect").Selector<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("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+} & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, Record<AxisId, D3Scale>, []>;
 /**
  * The only interesting selectors that merge axis data and zoom if provided.
  */
@@ -62,4 +97,129 @@ export declare const selectorChartYAxis: import("reselect").Selector<import("../
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, import("./computeAxisValue.js").ComputeResult<import("../../../index.js").ChartsYAxisProps>, []>;
 export declare const selectorChartAxis: import("reselect").Selector<any, import("../../../index.js").ComputedAxis<keyof import("../../../index.js").AxisScaleConfig, any, import("../../../index.js").ChartsXAxisProps>, [axisId: AxisId]>;
-export declare const selectorChartRawAxis: import("reselect").Selector<any, import("../../../index.js").DefaultedXAxis | import("../../../index.js").DefaultedYAxis | undefined, [axisId: AxisId]>;
+export declare const selectorChartRawAxis: import("reselect").Selector<any, ({
+  offset?: number;
+} & {
+  id: AxisId;
+  data?: readonly any[] | undefined;
+  dataKey?: string;
+  valueFormatter?: (<TScaleName extends keyof import("../../../index.js").AxisScaleConfig>(value: any, context: import("../../../index.js").AxisValueFormatterContext<TScaleName>) => string) | undefined;
+  hideTooltip?: boolean;
+  reverse?: boolean;
+  domainLimit?: "nice" | "strict" | ((min: number, max: number) => {
+    min: number;
+    max: number;
+  });
+  ignoreTooltip?: boolean;
+} & Omit<Partial<import("../../../index.js").ChartsXAxisProps>, "axisId"> & Partial<Omit<{
+  scaleType: "time";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScaleTime<number, number>;
+  colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} | {
+  scaleType: "linear";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScaleLinear<number, number>;
+  colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} | {
+  scaleType: "log";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScaleLogarithmic<number, number>;
+  colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} | {
+  scaleType: "symlog";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScaleSymLog<number, number>;
+  colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+  constant?: number;
+} | {
+  scaleType: "pow";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScalePower<number, number>;
+  colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} | {
+  scaleType: "sqrt";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScalePower<number, number>;
+  colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} | {
+  scaleType: "utc";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScaleTime<number, number>;
+  colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} | ({
+  scaleType: "band";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScaleBand<{
+    toString(): string;
+  }>;
+  categoryGapRatio: number;
+  barGapRatio: number;
+  colorMap?: import("../../../../models/colorMapping.js").OrdinalColorConfig | import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} & import("../../../index.js").AxisGroups & Pick<import("../../../../hooks/useTicks.js").TickParams, "tickPlacement" | "tickLabelPlacement">) | ({
+  scaleType: "point";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScalePoint<{
+    toString(): string;
+  }>;
+  colorMap?: import("../../../../models/colorMapping.js").OrdinalColorConfig | import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} & import("../../../index.js").AxisGroups), "scale">> & {
+  position?: "top" | "bottom" | "none";
+  height?: number;
+} & import("../../../../hooks/useTicks.js").TickParams & import("../../../index.js").AxisConfigExtension & {
+  zoom: import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions | undefined;
+}) | ({
+  offset?: number;
+} & {
+  id: AxisId;
+  data?: readonly any[] | undefined;
+  dataKey?: string;
+  valueFormatter?: (<TScaleName extends keyof import("../../../index.js").AxisScaleConfig>(value: any, context: import("../../../index.js").AxisValueFormatterContext<TScaleName>) => string) | undefined;
+  hideTooltip?: boolean;
+  reverse?: boolean;
+  domainLimit?: "nice" | "strict" | ((min: number, max: number) => {
+    min: number;
+    max: number;
+  });
+  ignoreTooltip?: boolean;
+} & Omit<Partial<import("../../../index.js").ChartsYAxisProps>, "axisId"> & Partial<Omit<{
+  scaleType: "time";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScaleTime<number, number>;
+  colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} | {
+  scaleType: "linear";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScaleLinear<number, number>;
+  colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} | {
+  scaleType: "log";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScaleLogarithmic<number, number>;
+  colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} | {
+  scaleType: "symlog";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScaleSymLog<number, number>;
+  colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+  constant?: number;
+} | {
+  scaleType: "pow";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScalePower<number, number>;
+  colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} | {
+  scaleType: "sqrt";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScalePower<number, number>;
+  colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} | {
+  scaleType: "utc";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScaleTime<number, number>;
+  colorMap?: import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} | ({
+  scaleType: "band";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScaleBand<{
+    toString(): string;
+  }>;
+  categoryGapRatio: number;
+  barGapRatio: number;
+  colorMap?: import("../../../../models/colorMapping.js").OrdinalColorConfig | import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} & import("../../../index.js").AxisGroups & Pick<import("../../../../hooks/useTicks.js").TickParams, "tickPlacement" | "tickLabelPlacement">) | ({
+  scaleType: "point";
+  scale: import("@mui/x-charts-vendor/d3-scale").ScalePoint<{
+    toString(): string;
+  }>;
+  colorMap?: import("../../../../models/colorMapping.js").OrdinalColorConfig | import("../../../../models/colorMapping.js").ContinuousColorConfig | import("../../../../models/colorMapping.js").PiecewiseColorConfig;
+} & import("../../../index.js").AxisGroups), "scale">> & {
+  position?: "left" | "right" | "none";
+  width?: number;
+} & import("../../../../hooks/useTicks.js").TickParams & import("../../../index.js").AxisConfigExtension & {
+  zoom: import("./useChartCartesianAxis.types.js").DefaultizedZoomOptions | undefined;
+}) | undefined, [axisId: AxisId]>;
+export {};

package/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorDefaultYAxisTickNumber = exports.selectorDefaultXAxisTickNumber = exports.selectorChartZoomOptionsLookup = exports.selectorChartZoomMap = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomAxisFilters = exports.selectorChartYScales = exports.selectorChartYAxis = exports.selectorChartXScales = exports.selectorChartXAxis = exports.selectorChartRawAxis = exports.selectorChartAxisZoomOptionsLookup = exports.selectorChartAxis = exports.createZoomMap = void 0;
+exports.selectorDefaultYAxisTickNumber = exports.selectorDefaultXAxisTickNumber = exports.selectorChartZoomOptionsLookup = exports.selectorChartZoomMap = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomAxisFilters = exports.selectorChartYScales = exports.selectorChartYDomains = exports.selectorChartYAxis = exports.selectorChartXScales = exports.selectorChartXDomains = exports.selectorChartXAxis = exports.selectorChartRawAxis = exports.selectorChartNormalizedYScales = exports.selectorChartNormalizedXScales = exports.selectorChartFilteredYDomains = exports.selectorChartFilteredXDomains = exports.selectorChartAxisZoomOptionsLookup = exports.selectorChartAxis = exports.createZoomMap = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useChartDimensions = require("../../corePlugins/useChartDimensions");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
@@ -12,10 +12,15 @@ var _selectors = require("../../utils/selectors");
 var _computeAxisValue = require("./computeAxisValue");
 var _createAxisFilterMapper = require("./createAxisFilterMapper");
 var _createZoomLookup = require("./createZoomLookup");
+var _axis = require("../../../../models/axis");
 var _useChartCartesianAxisLayout = require("./useChartCartesianAxisLayout.selectors");
 var _useChartExperimentalFeature = require("../../corePlugins/useChartExperimentalFeature");
-var _getAxisScale = require("./getAxisScale");
 var _ticks = require("../../../ticks");
+var _getAxisScale = require("./getAxisScale");
+var _scaleGuards = require("../../../scaleGuards");
+var _zoom = require("./zoom");
+var _getAxisExtrema = require("./getAxisExtrema");
+var _domain = require("./domain");
 const createZoomMap = zoom => {
   const zoomItemMap = new Map();
   zoom.forEach(zoomItem => {
@@ -34,66 +39,176 @@ const selectorChartZoomIsInteracting = exports.selectorChartZoomIsInteracting =
 const selectorChartZoomMap = exports.selectorChartZoomMap = (0, _selectors.createSelector)([selectorChartZoomState], zoom => zoom?.zoomData && createZoomMap(zoom?.zoomData));
 const selectorChartZoomOptionsLookup = exports.selectorChartZoomOptionsLookup = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis], (xAxis, yAxis) => (0, _extends2.default)({}, (0, _createZoomLookup.createZoomLookup)('x')(xAxis), (0, _createZoomLookup.createZoomLookup)('y')(yAxis)));
 const selectorChartAxisZoomOptionsLookup = exports.selectorChartAxisZoomOptionsLookup = (0, _selectors.createSelector)([selectorChartZoomOptionsLookup, (_, axisId) => axisId], (axisLookup, axisId) => axisLookup[axisId]);
-const selectorChartXFilter = (0, _selectors.createSelector)([selectorChartZoomMap, selectorChartZoomOptionsLookup], (zoomMap, zoomOptions) => zoomMap && zoomOptions && (0, _createAxisFilterMapper.createAxisFilterMapper)(zoomMap, zoomOptions, 'x'));
-const selectorChartYFilter = (0, _selectors.createSelector)([selectorChartZoomMap, selectorChartZoomOptionsLookup], (zoomMap, zoomOptions) => zoomMap && zoomOptions && (0, _createAxisFilterMapper.createAxisFilterMapper)(zoomMap, zoomOptions, 'y'));
 const selectorDefaultXAxisTickNumber = exports.selectorDefaultXAxisTickNumber = (0, _selectors.createSelector)([_useChartDimensions.selectorChartDrawingArea], function selectorDefaultXAxisTickNumber(drawingArea) {
   return (0, _ticks.getDefaultTickNumber)(drawingArea.width);
 });
 const selectorDefaultYAxisTickNumber = exports.selectorDefaultYAxisTickNumber = (0, _selectors.createSelector)([_useChartDimensions.selectorChartDrawingArea], function selectorDefaultYAxisTickNumber(drawingArea) {
   return (0, _ticks.getDefaultTickNumber)(drawingArea.height);
 });
-const selectorChartXScales = exports.selectorChartXScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorDefaultXAxisTickNumber], function selectorChartXScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts, defaultTickNumber) {
-  return (0, _getAxisScale.getXAxesScales)({
-    drawingArea,
-    formattedSeries,
-    axis,
-    seriesConfig,
-    zoomMap,
-    preferStrictDomainInLineCharts,
-    defaultTickNumber
+const selectorChartXDomains = exports.selectorChartXDomains = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorDefaultXAxisTickNumber], function selectorChartXDomains(axes, formattedSeries, seriesConfig, preferStrictDomainInLineCharts, defaultTickNumber) {
+  const axisDirection = 'x';
+  const domains = {};
+  axes?.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
+    if ((0, _axis.isBandScaleConfig)(axis) || (0, _axis.isPointScaleConfig)(axis)) {
+      domains[axis.id] = {
+        domain: axis.data
+      };
+      return;
+    }
+    const axisExtrema = (0, _getAxisExtrema.getAxisExtrema)(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
+    domains[axis.id] = (0, _domain.calculateInitialDomainAndTickNumber)(axis, 'x', axisIndex, formattedSeries, axisExtrema, defaultTickNumber, preferStrictDomainInLineCharts);
   });
+  return domains;
 });
-const selectorChartYScales = exports.selectorChartYScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorDefaultYAxisTickNumber], function selectorChartYScales(axis, drawingArea, formattedSeries, seriesConfig, zoomMap, preferStrictDomainInLineCharts, defaultTickNumber) {
-  return (0, _getAxisScale.getYAxesScales)({
-    drawingArea,
-    formattedSeries,
-    axis,
-    seriesConfig,
-    zoomMap,
-    preferStrictDomainInLineCharts,
-    defaultTickNumber
+const selectorChartYDomains = exports.selectorChartYDomains = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorDefaultYAxisTickNumber], function selectorChartYDomains(axes, formattedSeries, seriesConfig, preferStrictDomainInLineCharts, defaultTickNumber) {
+  const axisDirection = 'y';
+  const domains = {};
+  axes?.forEach((eachAxis, axisIndex) => {
+    const axis = eachAxis;
+    if ((0, _axis.isBandScaleConfig)(axis) || (0, _axis.isPointScaleConfig)(axis)) {
+      domains[axis.id] = {
+        domain: axis.data
+      };
+      return;
+    }
+    const axisExtrema = (0, _getAxisExtrema.getAxisExtrema)(axis, axisDirection, seriesConfig, axisIndex, formattedSeries);
+    domains[axis.id] = (0, _domain.calculateInitialDomainAndTickNumber)(axis, 'y', axisIndex, formattedSeries, axisExtrema, defaultTickNumber, preferStrictDomainInLineCharts);
   });
+  return domains;
 });
-const selectorChartZoomAxisFilters = exports.selectorChartZoomAxisFilters = (0, _selectors.createSelector)([selectorChartXFilter, selectorChartYFilter, _useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis, selectorChartXScales, selectorChartYScales], (xMapper, yMapper, xAxis, yAxis, xScales, yScales) => {
-  if (xMapper === undefined || yMapper === undefined) {
-    // Early return if there is no zoom.
+const selectorChartZoomAxisFilters = exports.selectorChartZoomAxisFilters = (0, _selectors.createSelector)([selectorChartZoomMap, selectorChartZoomOptionsLookup, _useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis, selectorChartXDomains, selectorChartYDomains], (zoomMap, zoomOptions, xAxis, yAxis, xDomains, yDomains) => {
+  if (!zoomMap || !zoomOptions) {
     return undefined;
   }
-  const xFilters = xAxis?.reduce((acc, axis) => {
-    const filter = xMapper(axis.id, axis.data, xScales[axis.id].scale);
-    if (filter !== null) {
-      acc[axis.id] = filter;
+  let hasFilter = false;
+  const filters = {};
+  const axes = [...(xAxis ?? []), ...(yAxis ?? [])];
+  for (let i = 0; i < axes.length; i += 1) {
+    const axis = axes[i];
+    if (!zoomOptions[axis.id] || zoomOptions[axis.id].filterMode !== 'discard') {
+      continue;
+    }
+    const zoom = zoomMap.get(axis.id);
+    if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
+      // No zoom, or zoom with all data visible
+      continue;
     }
-    return acc;
-  }, {});
-  const yFilters = yAxis?.reduce((acc, axis) => {
-    const filter = yMapper(axis.id, axis.data, yScales[axis.id].scale);
-    if (filter !== null) {
-      acc[axis.id] = filter;
+    const axisDirection = i < (xAxis?.length ?? 0) ? 'x' : 'y';
+    if (axis.scaleType === 'band' || axis.scaleType === 'point') {
+      filters[axis.id] = (0, _createAxisFilterMapper.createDiscreteScaleGetAxisFilter)(axis.data, zoom.start, zoom.end, axisDirection);
+    } else {
+      const {
+        domain
+      } = axisDirection === 'x' ? xDomains[axis.id] : yDomains[axis.id];
+      filters[axis.id] = (0, _createAxisFilterMapper.createContinuousScaleGetAxisFilter)(
+      // For continuous scales, the domain is always a two-value array.
+      domain, zoom.start, zoom.end, axisDirection, axis.data);
     }
-    return acc;
-  }, {});
-  if (Object.keys(xFilters ?? {}).length === 0 && Object.keys(yFilters ?? {}).length === 0) {
+    hasFilter = true;
+  }
+  if (!hasFilter) {
     return undefined;
   }
-  return (0, _createAxisFilterMapper.createGetAxisFilters)((0, _extends2.default)({}, xFilters, yFilters));
+  return (0, _createAxisFilterMapper.createGetAxisFilters)(filters);
+});
+const selectorChartFilteredXDomains = exports.selectorChartFilteredXDomains = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorChartXDomains], (axes, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts, domains) => {
+  const filteredDomains = {};
+  axes?.forEach((axis, axisIndex) => {
+    const domain = domains[axis.id].domain;
+    if ((0, _axis.isBandScaleConfig)(axis) || (0, _axis.isPointScaleConfig)(axis)) {
+      filteredDomains[axis.id] = domain;
+      return;
+    }
+    const zoom = zoomMap?.get(axis.id);
+    const zoomOption = zoomOptions?.[axis.id];
+    const filter = zoom === undefined && !zoomOption ? getFilters : undefined; // Do not apply filtering if zoom is already defined.
+
+    if (!filter) {
+      filteredDomains[axis.id] = domain;
+      return;
+    }
+    const rawTickNumber = domains[axis.id].tickNumber;
+    const axisExtrema = (0, _getAxisExtrema.getAxisExtrema)(axis, 'x', seriesConfig, axisIndex, formattedSeries, filter);
+    filteredDomains[axis.id] = (0, _domain.calculateFinalDomain)(axis, 'x', axisIndex, formattedSeries, axisExtrema, rawTickNumber, preferStrictDomainInLineCharts);
+  });
+  return filteredDomains;
+});
+const selectorChartFilteredYDomains = exports.selectorChartFilteredYDomains = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorChartYDomains], (axes, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts, domains) => {
+  const filteredDomains = {};
+  axes?.forEach((axis, axisIndex) => {
+    const domain = domains[axis.id].domain;
+    if ((0, _axis.isBandScaleConfig)(axis) || (0, _axis.isPointScaleConfig)(axis)) {
+      filteredDomains[axis.id] = domain;
+      return;
+    }
+    const zoom = zoomMap?.get(axis.id);
+    const zoomOption = zoomOptions?.[axis.id];
+    const filter = zoom === undefined && !zoomOption ? getFilters : undefined; // Do not apply filtering if zoom is already defined.
+
+    if (!filter) {
+      filteredDomains[axis.id] = domain;
+      return;
+    }
+    const rawTickNumber = domains[axis.id].tickNumber;
+    const axisExtrema = (0, _getAxisExtrema.getAxisExtrema)(axis, 'y', seriesConfig, axisIndex, formattedSeries, filter);
+    filteredDomains[axis.id] = (0, _domain.calculateFinalDomain)(axis, 'y', axisIndex, formattedSeries, axisExtrema, rawTickNumber, preferStrictDomainInLineCharts);
+  });
+  return filteredDomains;
+});
+const selectorChartNormalizedXScales = exports.selectorChartNormalizedXScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, selectorChartFilteredXDomains], function selectorChartNormalizedXScales(axes, filteredDomains) {
+  const scales = {};
+  axes?.forEach(eachAxis => {
+    const axis = eachAxis;
+    const domain = filteredDomains[axis.id];
+    scales[axis.id] = (0, _getAxisScale.getNormalizedAxisScale)(axis, domain);
+  });
+  return scales;
+});
+const selectorChartNormalizedYScales = exports.selectorChartNormalizedYScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, selectorChartFilteredYDomains], function selectorChartNormalizedYScales(axes, filteredDomains) {
+  const scales = {};
+  axes?.forEach(eachAxis => {
+    const axis = eachAxis;
+    const domain = filteredDomains[axis.id];
+    scales[axis.id] = (0, _getAxisScale.getNormalizedAxisScale)(axis, domain);
+  });
+  return scales;
+});
+const selectorChartXScales = exports.selectorChartXScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, selectorChartNormalizedXScales, _useChartDimensions.selectorChartDrawingArea, selectorChartZoomMap], function selectorChartXScales(axes, normalizedScales, drawingArea, zoomMap) {
+  const scales = {};
+  axes?.forEach(eachAxis => {
+    const axis = eachAxis;
+    const zoom = zoomMap?.get(axis.id);
+    const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
+    const range = (0, _getAxisScale.getRange)(drawingArea, 'x', axis);
+    const scale = normalizedScales[axis.id].copy();
+    const zoomedRange = (0, _zoom.zoomScaleRange)(range, zoomRange);
+    scale.range(zoomedRange);
+    scales[axis.id] = scale;
+  });
+  return scales;
+});
+const selectorChartYScales = exports.selectorChartYScales = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, selectorChartNormalizedYScales, _useChartDimensions.selectorChartDrawingArea, selectorChartZoomMap], function selectorChartYScales(axes, normalizedScales, drawingArea, zoomMap) {
+  const scales = {};
+  axes?.forEach(eachAxis => {
+    const axis = eachAxis;
+    const zoom = zoomMap?.get(axis.id);
+    const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
+    const range = (0, _getAxisScale.getRange)(drawingArea, 'y', axis);
+    const scale = normalizedScales[axis.id].copy();
+    const scaleRange = (0, _scaleGuards.isOrdinalScale)(scale) ? range.reverse() : range;
+    const zoomedRange = (0, _zoom.zoomScaleRange)(scaleRange, zoomRange);
+    scale.range(zoomedRange);
+    scales[axis.id] = scale;
+  });
+  return scales;
 });
 
 /**
  * The only interesting selectors that merge axis data and zoom if provided.
  */
 
-const selectorChartXAxis = exports.selectorChartXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorChartXScales], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts, scales) => (0, _computeAxisValue.computeAxisValue)({
+const selectorChartXAxis = exports.selectorChartXAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartXDomains, selectorChartXScales], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, domains, scales) => (0, _computeAxisValue.computeAxisValue)({
   scales,
   drawingArea,
   formattedSeries,
@@ -101,11 +216,9 @@ const selectorChartXAxis = exports.selectorChartXAxis = (0, _selectors.createSel
   seriesConfig,
   axisDirection: 'x',
   zoomMap,
-  zoomOptions,
-  getFilters,
-  preferStrictDomainInLineCharts
+  domains
 }));
-const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartZoomOptionsLookup, selectorChartZoomAxisFilters, _useChartExperimentalFeature.selectorPreferStrictDomainInLineCharts, selectorChartYScales], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, zoomOptions, getFilters, preferStrictDomainInLineCharts, scales) => (0, _computeAxisValue.computeAxisValue)({
+const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawYAxis, _useChartDimensions.selectorChartDrawingArea, _useChartSeries.selectorChartSeriesProcessed, _useChartSeries.selectorChartSeriesConfig, selectorChartZoomMap, selectorChartYDomains, selectorChartYScales], (axis, drawingArea, formattedSeries, seriesConfig, zoomMap, domains, scales) => (0, _computeAxisValue.computeAxisValue)({
   scales,
   drawingArea,
   formattedSeries,
@@ -113,9 +226,7 @@ const selectorChartYAxis = exports.selectorChartYAxis = (0, _selectors.createSel
   seriesConfig,
   axisDirection: 'y',
   zoomMap,
-  zoomOptions,
-  getFilters,
-  preferStrictDomainInLineCharts
+  domains
 }));
 const selectorChartAxis = exports.selectorChartAxis = (0, _selectors.createSelector)([selectorChartXAxis, selectorChartYAxis, (_, axisId) => axisId], (xAxes, yAxes, axisId) => xAxes?.axis[axisId] ?? yAxes?.axis[axisId]);
 const selectorChartRawAxis = exports.selectorChartRawAxis = (0, _selectors.createSelector)([_useChartCartesianAxisLayout.selectorChartRawXAxis, _useChartCartesianAxisLayout.selectorChartRawYAxis, (state, axisId) => axisId], (xAxes, yAxes, axisId) => {

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

@@ -30,9 +30,14 @@ const useChartHighlight = ({
   }, [store, params.highlightedItem]);
   const clearHighlight = (0, _useEventCallback.default)(() => {
     params.onHighlightChange?.(null);
+    const prevItem = store.getSnapshot().highlight.item;
+    if (prevItem === null) {
+      return;
+    }
     store.update(prev => (0, _extends2.default)({}, prev, {
       highlight: {
-        item: null
+        item: null,
+        lastUpdate: 'pointer'
       }
     }));
   });
@@ -44,7 +49,8 @@ const useChartHighlight = ({
     params.onHighlightChange?.(newItem);
     store.update(prev => (0, _extends2.default)({}, prev, {
       highlight: {
-        item: newItem
+        item: newItem,
+        lastUpdate: 'pointer'
       }
     }));
   });
@@ -63,7 +69,8 @@ useChartHighlight.getDefaultizedParams = ({
 });
 useChartHighlight.getInitialState = params => ({
   highlight: {
-    item: params.highlightedItem
+    item: params.highlightedItem,
+    lastUpdate: 'pointer'
   }
 });
 useChartHighlight.params = {

package/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.d.ts

@@ -8,24 +8,24 @@ export declare const selectorChartsHighlightScopePerSeriesId: import("reselect")
 }, Map<SeriesId, Partial<HighlightScope> | undefined>, any[]>;
 export declare const selectorChartsHighlightedItem: import("reselect").Selector<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 & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
+} & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, HighlightItemData | null, any[]>;
 export declare const selectorChartsHighlightScope: import("reselect").Selector<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<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & import("./useChartHighlight.types.js").UseChartHighlightState, Partial<HighlightScope> | null, any[]>;
+} & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, Partial<HighlightScope> | null, any[]>;
 export declare const selectorChartsIsHighlightedCallback: import("reselect").Selector<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<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & import("./useChartHighlight.types.js").UseChartHighlightState, (item: HighlightItemData | null) => boolean, any[]>;
+} & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, (item: HighlightItemData | null) => boolean, any[]>;
 export declare const selectorChartsIsFadedCallback: import("reselect").Selector<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<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & import("./useChartHighlight.types.js").UseChartHighlightState, (item: HighlightItemData | null) => boolean, any[]>;
+} & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, (item: HighlightItemData | null) => boolean, any[]>;
 export declare const selectorChartsIsHighlighted: import("reselect").Selector<any, boolean, [item: HighlightItemData | null]>;
 export declare const selectorChartIsSeriesHighlighted: import("reselect").Selector<any, boolean, [seriesId: SeriesId]>;
 export declare const selectorChartIsSeriesFaded: import("reselect").Selector<any, boolean, [seriesId: SeriesId]>;

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

@@ -8,6 +8,7 @@ var _selectors = require("../../utils/selectors");
 var _createIsHighlighted = require("./createIsHighlighted");
 var _createIsFaded = require("./createIsFaded");
 var _highlightStates = require("./highlightStates");
+var _useChartKeyboardNavigation = require("../useChartKeyboardNavigation");
 const selectHighlight = state => state.highlight;
 const selectSeries = state => state.series;
 const selectorChartsHighlightScopePerSeriesId = exports.selectorChartsHighlightScopePerSeriesId = (0, _selectors.createSelector)([selectSeries], series => {
@@ -21,8 +22,8 @@ const selectorChartsHighlightScopePerSeriesId = exports.selectorChartsHighlightS
   });
   return map;
 });
-const selectorChartsHighlightedItem = exports.selectorChartsHighlightedItem = (0, _selectors.createSelector)([selectHighlight], function selectorChartsHighlightedItem(highlight) {
-  return highlight.item;
+const selectorChartsHighlightedItem = exports.selectorChartsHighlightedItem = (0, _selectors.createSelector)([selectHighlight, _useChartKeyboardNavigation.selectorChartsKeyboardItem], function selectorChartsHighlightedItem(highlight, keyboardItem) {
+  return highlight.lastUpdate === 'pointer' ? highlight.item : keyboardItem;
 });
 const selectorChartsHighlightScope = exports.selectorChartsHighlightScope = (0, _selectors.createSelector)([selectorChartsHighlightScopePerSeriesId, selectorChartsHighlightedItem], function selectorChartsHighlightScope(seriesIdToHighlightScope, highlightedItem) {
   if (!highlightedItem) {

package/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.types.d.ts

@@ -28,6 +28,7 @@ export type HighlightItemData = {
    */
   dataIndex?: number;
 };
+export type HighlightUpdateSource = 'pointer' | 'keyboard';
 export interface UseChartHighlightInstance {
   /**
    * Remove all highlight.
@@ -59,6 +60,11 @@ export interface UseChartHighlightState {
      * The item currently highlighted.
      */
     item: HighlightItemData | null;
+    /**
+     * The last interaction highlight update.
+     * Used to decide if highlight should be based on pointer position or keyboard navigation.
+     */
+    lastUpdate: HighlightUpdateSource;
   };
 }
 export type UseChartHighlightSignature = ChartPluginSignature<{

package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.js

@@ -139,7 +139,11 @@ const useChartKeyboardNavigation = ({
         }
         if (newFocusedItem !== prevState.keyboardNavigation.item) {
           event.preventDefault();
-          return (0, _extends2.default)({}, prevState, prevState.interaction && {
+          return (0, _extends2.default)({}, prevState, prevState.highlight && {
+            highlight: (0, _extends2.default)({}, prevState.highlight, {
+              lastUpdate: 'keyboard'
+            })
+          }, prevState.interaction && {
             interaction: (0, _extends2.default)({}, prevState.interaction, {
               lastUpdate: 'keyboard'
             })