@mui/x-charts 8.6.0 → 8.8.0

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.6.0
+ * @mui/x-charts v8.8.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/constants.d.ts

@@ -1,8 +1,11 @@
 import type { ZoomSliderShowTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/zoom.types.js";
 /** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
 export declare const ZOOM_SLIDER_MARGIN = 4;
+/** Size of the zoom slider preview. */
+export declare const ZOOM_SLIDER_PREVIEW_SIZE = 40;
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
 export declare const DEFAULT_ZOOM_SLIDER_SIZE: number;
+export declare const DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE: number;
 export declare const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP: ZoomSliderShowTooltip;
 /** Default margin for pie charts. */
 export declare const DEFAULT_PIE_CHART_MARGIN: {

package/esm/internals/constants.js

@@ -1,8 +1,12 @@
 /** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
 export const ZOOM_SLIDER_MARGIN = 4;
 
+/** Size of the zoom slider preview. */
+export const ZOOM_SLIDER_PREVIEW_SIZE = 40;
+
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
 export const DEFAULT_ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;
+export const DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE = 40 + 2 * ZOOM_SLIDER_MARGIN;
 export const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = 'hover';
 
 /** Default margin for pie charts. */

package/esm/internals/getLabel.d.ts

@@ -1 +1 @@
-export declare function getLabel<Location extends string>(value: string | ((location: Location) => string) | undefined, location: Location): string | undefined;
+export declare function getLabel<Location extends string>(value: string | ((location: Location) => string | undefined) | undefined, location: Location): string | undefined;

package/esm/internals/index.d.ts

@@ -6,8 +6,13 @@ 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 { seriesConfig as scatterSeriesConfig } from "../ScatterChart/seriesConfig/index.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 +20,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,13 @@ 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 { seriesConfig as scatterSeriesConfig } from "../ScatterChart/seriesConfig/index.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 +25,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

@@ -1,11 +1,13 @@
 import { type UseChartAnimationSignature } from "./useChartAnimation/index.js";
 import { type UseChartDimensionsSignature } from "./useChartDimensions/index.js";
+import { type UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature/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<UseChartExperimentalFeaturesSignature>, 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, UseChartExperimentalFeaturesSignature, UseChartDimensionsSignature, UseChartSeriesSignature, UseChartAnimationSignature, UseChartInteractionListenerSignature];
 export interface ChartCorePluginParameters extends UseChartIdParameters {}

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

@@ -1,10 +1,12 @@
 import { useChartAnimation } from "./useChartAnimation/index.js";
 import { useChartDimensions } from "./useChartDimensions/index.js";
+import { useChartExperimentalFeatures } from "./useChartExperimentalFeature/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, useChartExperimentalFeatures, 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("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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/useChartExperimentalFeature/index.d.ts

@@ -0,0 +1,3 @@
+export { useChartExperimentalFeatures } from "./useChartExperimentalFeature.js";
+export type { UseChartExperimentalFeaturesSignature, UseChartExperimentalFeaturesParameters } from "./useChartExperimentalFeature.types.js";
+export * from "./useChartExperimentalFeature.selectors.js";

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

@@ -0,0 +1,2 @@
+export { useChartExperimentalFeatures } from "./useChartExperimentalFeature.js";
+export * from "./useChartExperimentalFeature.selectors.js";

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

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

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

@@ -0,0 +1,27 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+export const useChartExperimentalFeatures = ({
+  params,
+  store
+}) => {
+  useEnhancedEffect(() => {
+    store.update(prevState => {
+      return _extends({}, prevState, {
+        experimentalFeatures: params.experimentalFeatures
+      });
+    });
+  }, [store, params.experimentalFeatures]);
+  return {};
+};
+useChartExperimentalFeatures.params = {
+  experimentalFeatures: true
+};
+useChartExperimentalFeatures.getInitialState = ({
+  experimentalFeatures
+}) => {
+  return {
+    experimentalFeatures
+  };
+};

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

@@ -0,0 +1,8 @@
+import { ChartRootSelector } from "../../utils/selectors.js";
+import type { UseChartExperimentalFeaturesSignature } from "./useChartExperimentalFeature.types.js";
+export declare const selectorChartExperimentalFeaturesState: ChartRootSelector<UseChartExperimentalFeaturesSignature>;
+export declare const selectorPreferStrictDomainInLineCharts: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("./useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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;
+}, boolean, any[]>;

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

@@ -0,0 +1,3 @@
+import { createSelector } from "../../utils/selectors.js";
+export const selectorChartExperimentalFeaturesState = state => state.experimentalFeatures;
+export const selectorPreferStrictDomainInLineCharts = createSelector([selectorChartExperimentalFeaturesState], features => Boolean(features?.preferStrictDomainInLineCharts));

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

@@ -0,0 +1,21 @@
+import { ChartPluginSignature } from "../../models/index.js";
+export interface ChartExperimentalFeatures {
+  /**
+   * Default domainLimit to strict for line chart x-axis.
+   */
+  preferStrictDomainInLineCharts?: boolean;
+}
+export interface UseChartExperimentalFeaturesParameters {
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures?: ChartExperimentalFeatures;
+}
+export interface UseChartExperimentalFeaturesState {
+  experimentalFeatures?: ChartExperimentalFeatures;
+}
+export type UseChartExperimentalFeaturesSignature = ChartPluginSignature<{
+  params: UseChartExperimentalFeaturesParameters;
+  defaultizedParams: UseChartExperimentalFeaturesParameters;
+  state: UseChartExperimentalFeaturesState;
+}>;

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

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

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("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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("../useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & 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/computeAxisValue.d.ts

@@ -7,7 +7,7 @@ import { ProcessedSeries } from "../../corePlugins/useChartSeries/useChartSeries
 import { GetZoomAxisFilters, ZoomData } from "./zoom.types.js";
 export type ComputeResult<T extends ChartsAxisProps> = {
   axis: ComputedAxisConfig<T>;
-  axisIds: string[];
+  axisIds: AxisId[];
 };
 type ComputeCommonParams<T extends ChartSeriesType = ChartSeriesType> = {
   drawingArea: ChartDrawingArea;
@@ -16,6 +16,10 @@ type ComputeCommonParams<T extends ChartSeriesType = ChartSeriesType> = {
   zoomMap?: Map<AxisId, ZoomData>;
   zoomOptions?: Record<AxisId, DefaultizedZoomOptions>;
   getFilters?: GetZoomAxisFilters;
+  /**
+   * @deprecated To remove in v9. This is an experimental feature to avoid breaking change.
+   */
+  preferStrictDomainInLineCharts?: boolean;
 };
 export declare function computeAxisValue<T extends ChartSeriesType>(options: ComputeCommonParams<T> & {
   axis?: DefaultedYAxis[];

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

@@ -9,6 +9,7 @@ import { isDateData, createDateFormatter } from "../../../dateHelpers.js";
 import { zoomScaleRange } from "./zoom.js";
 import { getAxisExtremum } from "./getAxisExtremum.js";
 import { getAxisTriggerTooltip } from "./getAxisTriggerTooltip.js";
+import { getAxisDomainLimit } from "./getAxisDomainLimit.js";
 function getRange(drawingArea, axisDirection,
 // | 'rotation' | 'radius',
 axis) {
@@ -25,7 +26,8 @@ export function computeAxisValue({
   axisDirection,
   zoomMap,
   zoomOptions,
-  getFilters
+  getFilters,
+  preferStrictDomainInLineCharts
 }) {
   if (allAxis === undefined) {
     return {
@@ -95,7 +97,7 @@ export function computeAxisValue({
       return;
     }
     const scaleType = axis.scaleType ?? 'linear';
-    const domainLimit = axis.domainLimit ?? 'nice';
+    const domainLimit = preferStrictDomainInLineCharts ? getAxisDomainLimit(axis, axisDirection, axisIndex, formattedSeries) : axis.domainLimit ?? 'nice';
     const axisExtremums = [axis.min ?? minData, axis.max ?? maxData];
     if (typeof domainLimit === 'function') {
       const {

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.d.ts

@@ -11,6 +11,7 @@ export declare const defaultZoomOptions: {
   filterMode: "keep";
   slider: {
     enabled: false;
+    preview: false;
     size: number;
     showTooltip: import("./zoom.types.js").ZoomSliderShowTooltip;
   };

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, DEFAULT_ZOOM_SLIDER_SIZE } from "../../../constants.js";
+import { DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE, DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, DEFAULT_ZOOM_SLIDER_SIZE } from "../../../constants.js";
 export const defaultZoomOptions = {
   minStart: 0,
   maxEnd: 100,
@@ -10,6 +10,7 @@ export const defaultZoomOptions = {
   filterMode: 'keep',
   slider: {
     enabled: false,
+    preview: false,
     size: DEFAULT_ZOOM_SLIDER_SIZE,
     showTooltip: DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP
   }
@@ -28,6 +29,8 @@ export const defaultizeZoom = (zoom, axisId, axisDirection) => {
     axisId,
     axisDirection
   }, defaultZoomOptions, zoom, {
-    slider: _extends({}, defaultZoomOptions.slider, zoom.slider)
+    slider: _extends({}, defaultZoomOptions.slider, {
+      size: zoom.slider?.preview ?? defaultZoomOptions.slider.preview ? DEFAULT_ZOOM_SLIDER_PREVIEW_SIZE : DEFAULT_ZOOM_SLIDER_SIZE
+    }, zoom.slider)
   });
 };

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisDomainLimit.d.ts

@@ -0,0 +1,7 @@
+import { AxisConfig } from "../../../../models/axis.js";
+import { CartesianChartSeriesType } from "../../../../models/seriesType/config.js";
+import { ProcessedSeries } from "../../corePlugins/useChartSeries/index.js";
+export declare const getAxisDomainLimit: <T extends CartesianChartSeriesType>(axis: AxisConfig, axisDirection: "x" | "y", axisIndex: number, formattedSeries: ProcessedSeries<T | "line">) => "nice" | "strict" | ((min: number, max: number) => {
+  min: number;
+  max: number;
+});

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

@@ -0,0 +1,14 @@
+export const getAxisDomainLimit = (axis, axisDirection, axisIndex, formattedSeries) => {
+  if (axis.domainLimit !== undefined) {
+    return axis.domainLimit;
+  }
+  if (axisDirection === 'x') {
+    for (const seriesId of formattedSeries.line?.seriesOrder ?? []) {
+      const series = formattedSeries.line.series[seriesId];
+      if (series.xAxisId === axis.id || series.xAxisId === undefined && axisIndex === 0) {
+        return 'strict';
+      }
+    }
+  }
+  return 'nice';
+};

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/index.d.ts

@@ -3,6 +3,8 @@ export type * from "./useChartCartesianAxis.types.js";
 export * from "./useChartCartesianAxisRendering.selectors.js";
 export * from "./useChartCartesianAxisLayout.selectors.js";
 export * from "./useChartCartesianInteraction.selectors.js";
+export * from "./useChartCartesianHighlight.selectors.js";
+export * from "./useChartCartesianAxisPreview.selectors.js";
 export { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
 export * from "./computeAxisValue.js";
 export * from "./createZoomLookup.js";

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

@@ -2,6 +2,8 @@ export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
 export * from "./useChartCartesianAxisRendering.selectors.js";
 export * from "./useChartCartesianAxisLayout.selectors.js";
 export * from "./useChartCartesianInteraction.selectors.js";
+export * from "./useChartCartesianHighlight.selectors.js";
+export * from "./useChartCartesianAxisPreview.selectors.js";
 export { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
 export * from "./computeAxisValue.js";
 export * from "./createZoomLookup.js";