@mui/x-charts 8.6.0 → 8.7.0

package/esm/index.d.ts

@@ -23,6 +23,7 @@ export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
 export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
-export * from "./ChartContainer/index.js";
+export { ChartContainer } from "./ChartContainer/index.js";
+export type { ChartContainerProps } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.6.0
+ * @mui/x-charts v8.7.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -30,6 +30,6 @@ export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
 export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
-export * from "./ChartContainer/index.js";
+export { ChartContainer } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";

package/esm/internals/index.d.ts

@@ -6,8 +6,12 @@ export { useSeries } from "../hooks/useSeries.js";
 export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";
 export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
+export { useScatterPlotData } from "../ScatterChart/useScatterPlotData.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
+export { useAreaPlotData } from "../LineChart/useAreaPlotData.js";
+export { useLinePlotData } from "../LineChart/useLinePlotData.js";
 export { useBarChartProps } from "../BarChart/useBarChartProps.js";
+export { useBarPlotData } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
@@ -15,6 +19,7 @@ export * from "./createSeriesSelectorOfType.js";
 export * from "./plugins/corePlugins/useChartId/index.js";
 export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";
+export * from "./plugins/corePlugins/useChartInteractionListener/index.js";
 export * from "./plugins/featurePlugins/useChartZAxis/index.js";
 export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
 export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";

package/esm/internals/index.js

@@ -9,8 +9,12 @@ export { useSeries } from "../hooks/useSeries.js";
 export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 export { useDrawingArea } from "../hooks/useDrawingArea.js";
 export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
+export { useScatterPlotData } from "../ScatterChart/useScatterPlotData.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
+export { useAreaPlotData } from "../LineChart/useAreaPlotData.js";
+export { useLinePlotData } from "../LineChart/useLinePlotData.js";
 export { useBarChartProps } from "../BarChart/useBarChartProps.js";
+export { useBarPlotData } from "../BarChart/useBarPlotData.js";
 export { useRadarChartProps } from "../RadarChart/useRadarChartProps.js";
 export * from "../ChartContainer/useChartContainerProps.js";
 export * from "../ChartDataProvider/useChartDataProviderProps.js";
@@ -20,6 +24,7 @@ export * from "./createSeriesSelectorOfType.js";
 export * from "./plugins/corePlugins/useChartId/index.js";
 export * from "./plugins/corePlugins/useChartSeries/index.js";
 export * from "./plugins/corePlugins/useChartDimensions/index.js";
+export * from "./plugins/corePlugins/useChartInteractionListener/index.js";
 export * from "./plugins/featurePlugins/useChartZAxis/index.js";
 export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
 export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";

package/esm/internals/plugins/corePlugins/corePlugins.d.ts

@@ -2,10 +2,11 @@ import { type UseChartAnimationSignature } from "./useChartAnimation/index.js";
 import { type UseChartDimensionsSignature } from "./useChartDimensions/index.js";
 import { type UseChartIdSignature, UseChartIdParameters } from "./useChartId/index.js";
 import { type UseChartSeriesSignature } from "./useChartSeries/index.js";
+import { type UseChartInteractionListenerSignature } from "./useChartInteractionListener/index.js";
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the Charts components.
  */
-export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<UseChartIdSignature>, import("../models/index.js").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesSignature>, import("../models/index.js").ChartPlugin<UseChartAnimationSignature>];
-export type ChartCorePluginSignatures = [UseChartIdSignature, UseChartDimensionsSignature, UseChartSeriesSignature, UseChartAnimationSignature];
+export declare const CHART_CORE_PLUGINS: readonly [import("../models/index.js").ChartPlugin<UseChartIdSignature>, import("../models/index.js").ChartPlugin<UseChartDimensionsSignature>, import("../models/index.js").ChartPlugin<UseChartSeriesSignature>, import("../models/index.js").ChartPlugin<UseChartInteractionListenerSignature>, import("../models/index.js").ChartPlugin<UseChartAnimationSignature>];
+export type ChartCorePluginSignatures = [UseChartIdSignature, UseChartDimensionsSignature, UseChartSeriesSignature, UseChartAnimationSignature, UseChartInteractionListenerSignature];
 export interface ChartCorePluginParameters extends UseChartIdParameters {}

package/esm/internals/plugins/corePlugins/corePlugins.js

@@ -2,9 +2,10 @@ import { useChartAnimation } from "./useChartAnimation/index.js";
 import { useChartDimensions } from "./useChartDimensions/index.js";
 import { useChartId } from "./useChartId/index.js";
 import { useChartSeries } from "./useChartSeries/index.js";
+import { useChartInteractionListener } from "./useChartInteractionListener/index.js";
 
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the Charts components.
  */
-export const CHART_CORE_PLUGINS = [useChartId, useChartDimensions, useChartSeries, useChartAnimation];
+export const CHART_CORE_PLUGINS = [useChartId, useChartDimensions, useChartSeries, useChartInteractionListener, useChartAnimation];

package/esm/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.d.ts

@@ -1,4 +1,4 @@
-export declare const selectorChartSkipAnimation: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartSkipAnimation: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.js

@@ -8,7 +8,6 @@ import { useSelector } from "../../../store/useSelector.js";
 import { DEFAULT_MARGINS } from "../../../../constants/index.js";
 import { selectorChartDrawingArea } from "./useChartDimensions.selectors.js";
 import { defaultizeMargin } from "../../../defaultizeMargin.js";
-import { getSVGPoint } from "../../../getSVGPoint.js";
 const MAX_COMPUTE_RUN = 10;
 export const useChartDimensions = ({
   params,
@@ -155,38 +154,11 @@ export const useChartDimensions = ({
     }
     return isXInside(x) && isYInside(y);
   }, [isXInside, isYInside]);
-  const isElementInside = React.useCallback(element => {
-    const svgElement = svgRef.current;
-    if (!element || !(element instanceof Element) || !svgElement) {
-      return false;
-    }
-    // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
-    if (element.closest('[data-drawing-container]')) {
-      return true;
-    }
-    const rect = element.getBoundingClientRect();
-    const {
-      x: left,
-      y: top
-    } = getSVGPoint(svgElement, {
-      clientX: rect.left,
-      clientY: rect.top
-    });
-    const {
-      x: right,
-      y: bottom
-    } = getSVGPoint(svgElement, {
-      clientX: rect.right,
-      clientY: rect.bottom
-    });
-    return isXInside(left) && isXInside(right) && isYInside(top) && isYInside(bottom);
-  }, [isXInside, isYInside, svgRef]);
   return {
     instance: {
       isPointInside,
       isXInside,
-      isYInside,
-      isElementInside
+      isYInside
     }
   };
 };

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.d.ts

@@ -3,7 +3,7 @@ import type { UseChartDimensionsSignature } from "./useChartDimensions.types.js"
 import { ChartState } from "../../models/chart.js";
 export declare const selectorChartDimensionsState: ChartRootSelector<UseChartDimensionsSignature>;
 export declare const selectorChartMargin: (state: ChartState<[UseChartDimensionsSignature]>) => import("./useChartDimensions.types.js").ChartMargin;
-export declare const selectorChartDrawingArea: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartDrawingArea: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<import("../../../index.js").UseChartCartesianAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -15,7 +15,7 @@ export declare const selectorChartDrawingArea: import("reselect").Selector<impor
   top: number;
   bottom: number;
 }, []>;
-export declare const selectorChartPropsSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartPropsSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -23,7 +23,7 @@ export declare const selectorChartPropsSize: import("reselect").Selector<import(
   width: number | undefined;
   height: number | undefined;
 }, any[]>;
-export declare const selectorChartContainerSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartContainerSize: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/esm/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.d.ts

@@ -63,12 +63,6 @@ export interface UseChartDimensionsState {
   };
 }
 export interface UseChartDimensionsInstance {
-  /**
-   * Checks if an element is inside the drawing area.
-   * @param {Element | EventTarget | null} element The element to check.
-   * @returns {boolean} `true` if the element is inside the drawing area, `false` otherwise.
-   */
-  isElementInside: (element: Element | EventTarget | null | undefined) => boolean;
   /**
    * Checks if a point is inside the drawing area.
    * @param {number} x The x coordinate of the point.

package/esm/internals/plugins/corePlugins/useChartId/useChartId.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { createChartDefaultId } from "./useChartId.utils.js";

package/esm/internals/plugins/corePlugins/useChartId/useChartId.selectors.d.ts

@@ -3,7 +3,7 @@
  * @param {ChartState<[UseChartIdSignature]>} state The state of the chart.
  * @returns {string} The id attribute of the chart.
  */
-export declare const selectorChartId: import("reselect").Selector<import("./useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartId: import("reselect").Selector<import("./useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/esm/internals/plugins/corePlugins/useChartInteractionListener/index.d.ts

@@ -0,0 +1,2 @@
+export { useChartInteractionListener } from "./useChartInteractionListener.js";
+export type { UseChartInteractionListenerParameters, UseChartInteractionListenerState, UseChartInteractionListenerInstance, UseChartInteractionListenerSignature, ChartInteraction } from "./useChartInteractionListener.types.js";

package/esm/internals/plugins/corePlugins/useChartInteractionListener/index.js

@@ -0,0 +1 @@
+export { useChartInteractionListener } from "./useChartInteractionListener.js";

package/esm/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.d.ts

@@ -0,0 +1,3 @@
+import { ChartPlugin } from "../../models/index.js";
+import { UseChartInteractionListenerSignature } from "./useChartInteractionListener.types.js";
+export declare const useChartInteractionListener: ChartPlugin<UseChartInteractionListenerSignature>;

package/esm/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.js

@@ -0,0 +1,77 @@
+'use client';
+
+import * as React from 'react';
+import { GestureManager, MoveGesture, PanGesture, PinchGesture, PressGesture, TapGesture, TurnWheelGesture } from '@mui/x-internal-gestures/core';
+const preventDefault = event => event.preventDefault();
+export const useChartInteractionListener = ({
+  svgRef
+}) => {
+  React.useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return undefined;
+    }
+    const gestureManager = new GestureManager({
+      gestures: [new PanGesture({
+        name: 'pan',
+        threshold: 0,
+        maxPointers: 1
+      }), new MoveGesture({
+        name: 'move',
+        preventIf: ['pan', 'pinch'] // Prevent move gesture when pan is active
+      }), new PinchGesture({
+        name: 'pinch',
+        threshold: 5,
+        preventIf: ['pan']
+      }), new TurnWheelGesture({
+        name: 'turnWheel',
+        sensitivity: 0.01,
+        initialDelta: 1
+      }), new TapGesture({
+        name: 'tap',
+        maxDistance: 10,
+        preventIf: ['pan', 'pinch']
+      }), new PressGesture({
+        name: 'quickPress',
+        duration: 50,
+        maxDistance: 10
+      })]
+    });
+    gestureManager.registerElement(['pan', 'move', 'pinch', 'turnWheel', 'tap', 'quickPress'], svg);
+    return () => {
+      // Cleanup gesture manager
+      gestureManager.destroy();
+    };
+  }, [svgRef]);
+  const addInteractionListener = React.useCallback((interaction, callback, options) => {
+    // Forcefully cast the svgRef to any, it is annoying to fix the types.
+    const svg = svgRef.current;
+    svg?.addEventListener(interaction, callback, options);
+    return {
+      cleanup: () => svg?.removeEventListener(interaction, callback)
+    };
+  }, [svgRef]);
+  React.useEffect(() => {
+    const svg = svgRef.current;
+
+    // Disable gesture on safari
+    // https://use-gesture.netlify.app/docs/gestures/#about-the-pinch-gesture
+    svg?.addEventListener('gesturestart', preventDefault);
+    svg?.addEventListener('gesturechange', preventDefault);
+    svg?.addEventListener('gestureend', preventDefault);
+    return () => {
+      svg?.removeEventListener('gesturestart', preventDefault);
+      svg?.removeEventListener('gesturechange', preventDefault);
+      svg?.removeEventListener('gestureend', preventDefault);
+    };
+  }, [svgRef]);
+  return {
+    instance: {
+      addInteractionListener
+    }
+  };
+};
+useChartInteractionListener.params = {};
+useChartInteractionListener.getInitialState = () => {
+  return {};
+};

package/esm/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.types.d.ts

@@ -0,0 +1,31 @@
+import { MoveEvent, PanEvent, PinchEvent, PressEvent, TapEvent, TurnWheelEvent } from '@mui/x-internal-gestures/core';
+import { ChartPluginSignature } from "../../models/index.js";
+export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'pinch' | 'pinchStart' | 'pinchEnd' | 'move' | 'moveStart' | 'moveEnd' | 'quickPress' | 'quickPressEnd' | 'turnWheel' | 'tap';
+export type InteractionListenerResult = {
+  cleanup: () => void;
+};
+export type AddInteractionListener = {
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pan' | 'panStart' | 'panEnd', callback: (event: PanEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pinch' | 'pinchStart' | 'pinchEnd', callback: (event: PinchEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'turnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'move' | 'moveStart' | 'moveEnd', callback: (event: MoveEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'tap', callback: (event: TapEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'quickPress' | 'quickPressEnd', callback: (event: PressEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+};
+export interface UseChartInteractionListenerParameters {}
+export interface UseChartInteractionListenerState {}
+export interface UseChartInteractionListenerInstance {
+  /**
+   * Adds an interaction listener to the SVG element.
+   *
+   * @param interaction The interaction to listen to.
+   * @param callback The callback to call when the interaction occurs.
+   */
+  addInteractionListener: AddInteractionListener;
+}
+export type UseChartInteractionListenerSignature = ChartPluginSignature<{
+  params: UseChartInteractionListenerParameters;
+  defaultizedParams: UseChartInteractionListenerParameters;
+  state: UseChartInteractionListenerState;
+  instance: UseChartInteractionListenerInstance;
+}>;

package/esm/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.types.js

@@ -0,0 +1 @@
+export {};

package/esm/internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors.d.ts

@@ -1,12 +1,12 @@
 import { ChartRootSelector } from "../../utils/selectors.js";
 import { UseChartSeriesSignature } from "./useChartSeries.types.js";
 export declare const selectorChartSeriesState: ChartRootSelector<UseChartSeriesSignature>;
-export declare const selectorChartSeriesProcessed: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartSeriesProcessed: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }, import("./useChartSeries.types.js").ProcessedSeries<keyof import("../../../index.js").ChartsSeriesConfig>, any[]>;
-export declare const selectorChartSeriesConfig: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartSeriesConfig: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../useChartInteractionListener/index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartAxisSize.selectors.d.ts

@@ -1,19 +1,19 @@
-export declare const selectorChartLeftAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartLeftAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
 }, number, []>;
-export declare const selectorChartRightAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartRightAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
 }, number, []>;
-export declare const selectorChartTopAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartTopAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
 }, number, []>;
-export declare const selectorChartBottomAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartBottomAxisSize: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.js

@@ -62,39 +62,52 @@ export const useChartCartesianAxis = ({
   const usedYAxis = yAxisIds[0];
   React.useEffect(() => {
     const element = svgRef.current;
-    if (!isInteractionEnabled || element === null || params.disableAxisListener) {
+    if (!isInteractionEnabled || !element || params.disableAxisListener) {
       return () => {};
     }
-    const handleOut = () => {
-      instance.cleanInteraction?.();
-    };
-    const handleMove = event => {
-      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = getSVGPoint(element, target);
-      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
+
+    // Clean the interaction when the mouse leaves the chart.
+    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
+      if (!event.detail.activeGestures.pan) {
         instance.cleanInteraction?.();
-        return;
       }
-      instance.setPointerCoordinate?.(svgPoint);
-    };
-    const handleDown = event => {
-      const target = event.currentTarget;
-      if (!target) {
-        return;
+    });
+    const panEndHandler = instance.addInteractionListener('panEnd', event => {
+      if (!event.detail.activeGestures.move) {
+        instance.cleanInteraction?.();
       }
-      if ('hasPointerCapture' in target && target.hasPointerCapture(event.pointerId)) {
-        target.releasePointerCapture(event.pointerId);
+    });
+    const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
+      if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
+        instance.cleanInteraction?.();
       }
+    });
+    const gestureHandler = event => {
+      const srvEvent = event.detail.srcEvent;
+      const target = event.detail.target;
+      const svgPoint = getSVGPoint(element, srvEvent);
+
+      // Release the pointer capture if we are panning, as this would cause the tooltip to
+      // be locked to the first "section" it touches.
+      if (event.detail.srcEvent.buttons >= 1 && target?.hasPointerCapture(event.detail.srcEvent.pointerId) && !target?.closest('[data-charts-zoom-slider]')) {
+        target?.releasePointerCapture(event.detail.srcEvent.pointerId);
+      }
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, target)) {
+        instance.cleanInteraction?.();
+        return;
+      }
+      instance.setPointerCoordinate?.(svgPoint);
     };
-    element.addEventListener('pointerdown', handleDown);
-    element.addEventListener('pointermove', handleMove);
-    element.addEventListener('pointercancel', handleOut);
-    element.addEventListener('pointerleave', handleOut);
+    const moveHandler = instance.addInteractionListener('move', gestureHandler);
+    const panHandler = instance.addInteractionListener('pan', gestureHandler);
+    const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
     return () => {
-      element.removeEventListener('pointerdown', handleDown);
-      element.removeEventListener('pointermove', handleMove);
-      element.removeEventListener('pointercancel', handleOut);
-      element.removeEventListener('pointerleave', handleOut);
+      moveHandler.cleanup();
+      moveEndHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      pressHandler.cleanup();
+      pressEndHandler.cleanup();
     };
   }, [svgRef, store, xAxisWithScale, usedXAxis, yAxisWithScale, usedYAxis, instance, params.disableAxisListener, isInteractionEnabled]);
   React.useEffect(() => {
@@ -103,11 +116,10 @@ export const useChartCartesianAxis = ({
     if (element === null || !onAxisClick) {
       return () => {};
     }
-    const handleMouseClick = event => {
-      event.preventDefault();
+    const axisClickHandler = instance.addInteractionListener('tap', event => {
       let dataIndex = null;
       let isXAxis = false;
-      const svgPoint = getSVGPoint(element, event);
+      const svgPoint = getSVGPoint(element, event.detail.srcEvent);
       const xIndex = getAxisIndex(xAxisWithScale[usedXAxis], svgPoint.x);
       isXAxis = xIndex !== -1;
       dataIndex = isXAxis ? xIndex : getAxisIndex(yAxisWithScale[usedYAxis], svgPoint.y);
@@ -130,17 +142,16 @@ export const useChartCartesianAxis = ({
           }
         });
       });
-      onAxisClick(event, {
+      onAxisClick(event.detail.srcEvent, {
         dataIndex,
         axisValue,
         seriesValues
       });
-    };
-    element.addEventListener('click', handleMouseClick);
+    });
     return () => {
-      element.removeEventListener('click', handleMouseClick);
+      axisClickHandler.cleanup();
     };
-  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis]);
+  }, [params.onAxisClick, processedSeries, svgRef, xAxisWithScale, xAxisIds, yAxisWithScale, yAxisIds, usedXAxis, usedYAxis, instance]);
   return {};
 };
 useChartCartesianAxis.params = {

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

@@ -4,17 +4,17 @@ export declare const createZoomMap: (zoom: readonly ZoomData[]) => Map<AxisId, Z
 /**
  * Following selectors are not exported because they exist in the MIT chart only to ba able to reuse the Zoom state from the pro.
  */
-export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
 }, boolean | undefined, []>;
-export declare const selectorChartZoomMap: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomMap: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
 }, Map<AxisId, ZoomData> | undefined, []>;
-export declare const selectorChartZoomOptionsLookup: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomOptionsLookup: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
@@ -26,12 +26,12 @@ export declare const selectorChartAxisZoomOptionsLookup: import("reselect").Sele
 /**
  * The only interesting selectors that merge axis data and zoom if provided.
  */
-export declare const selectorChartXAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartXAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;
 }, import("./computeAxisValue.js").ComputeResult<import("../../../index.js").ChartsXAxisProps>, []>;
-export declare const selectorChartYAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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 & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & {
+export declare const selectorChartYAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & 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;