@mui/x-charts 8.0.0-alpha.10 → 8.0.0-alpha.11

package/modern/LineChart/LineChart.js

@@ -14,7 +14,6 @@ import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
 import { ChartsClipPath } from "../ChartsClipPath/index.js";
 import { LineHighlightPlot } from "./LineHighlightPlot.js";
 import { ChartsGrid } from "../ChartsGrid/index.js";
-import { ChartsOnAxisClickHandler } from "../ChartsOnAxisClickHandler/index.js";
 import { ChartsOverlay } from "../ChartsOverlay/index.js";
 import { useLineChartProps } from "./useLineChartProps.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
@@ -40,7 +39,6 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
   const {
     chartsWrapperProps,
     chartContainerProps,
-    axisClickHandlerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,
@@ -62,7 +60,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+        children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
         })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
@@ -99,7 +97,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

package/modern/LineChart/LineChart.plugins.js

@@ -0,0 +1,5 @@
+import { useChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
+import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export const LINE_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight];

package/modern/LineChart/useLineChartProps.js

@@ -2,10 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { calculateMargins } from "../internals/calculateMargins.js";
+import { LINE_CHART_PLUGINS } from "./LineChart.plugins.js";
 
 /**
  * A helper function that extracts LineChartProps from the input props
@@ -25,7 +26,6 @@ export const useLineChartProps = props => {
       colors,
       dataset,
       sx,
-      onAxisClick,
       onAreaClick,
       onLineClick,
       onMarkClick,
@@ -74,13 +74,11 @@ export const useLineChartProps = props => {
     yAxis,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     className,
-    skipAnimation
+    skipAnimation,
+    plugins: LINE_CHART_PLUGINS
   });
-  const axisClickHandlerProps = {
-    onAxisClick
-  };
   const gridProps = {
     vertical: grid?.vertical,
     horizontal: grid?.horizontal
@@ -139,7 +137,6 @@ export const useLineChartProps = props => {
   return {
     chartsWrapperProps,
     chartContainerProps,
-    axisClickHandlerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,

package/modern/PieChart/PieChart.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["series", "width", "height", "margin", "colors", "sx", "skipAnimation", "hideLegend", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
@@ -14,7 +14,10 @@ import { ChartsSurface } from "../ChartsSurface/index.js";
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PIE_CHART_PLUGGINS = [useChartInteraction, useChartHighlight];
 const defaultMargin = {
   top: 5,
   bottom: 5,
@@ -68,11 +71,11 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     height,
     margin,
     colors,
-    disableAxisListener: true,
     highlightedItem,
     onHighlightChange,
     className,
-    skipAnimation
+    skipAnimation,
+    plugins: PIE_CHART_PLUGGINS
   }), ref);
   const Tooltip = slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
@@ -112,7 +115,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**
@@ -120,12 +123,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -199,110 +196,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
-  width: PropTypes.number,
-  /**
-   * The configuration of the x-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  xAxis: PropTypes.arrayOf(PropTypes.shape({
-    classes: PropTypes.object,
-    colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
-      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      type: PropTypes.oneOf(['continuous']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
-      type: PropTypes.oneOf(['piecewise']).isRequired
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    fill: PropTypes.string,
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string,
-    labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'top']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
-  })),
-  /**
-   * The configuration of the y-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  yAxis: PropTypes.arrayOf(PropTypes.shape({
-    classes: PropTypes.object,
-    colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
-      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      type: PropTypes.oneOf(['continuous']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
-      type: PropTypes.oneOf(['piecewise']).isRequired
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    fill: PropTypes.string,
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string,
-    labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['left', 'right']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func
-  }))
+  width: PropTypes.number
 } : void 0;
 export { PieChart };

package/modern/PieChart/PieChart.plugins.js

@@ -0,0 +1,3 @@
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export const PIE_CHART_PLUGINS = [useChartInteraction, useChartHighlight];

package/modern/ScatterChart/ScatterChart.js

@@ -90,7 +90,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**
@@ -159,6 +159,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/modern/ScatterChart/ScatterChart.plugins.js

@@ -0,0 +1,5 @@
+import { useChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
+import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight];

package/modern/ScatterChart/useScatterChartProps.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
 import { calculateMargins } from "../internals/calculateMargins.js";
+import { SCATTER_CHART_PLUGINS } from "./ScatterChart.plugins.js";
 
 /**
  * A helper function that extracts ScatterChartProps from the input props
@@ -60,7 +61,8 @@ export const useScatterChartProps = props => {
     zAxis,
     highlightedItem,
     onHighlightChange,
-    className
+    className,
+    plugins: SCATTER_CHART_PLUGINS
   });
   const voronoiHandlerProps = {
     voronoiMaxRadius,

package/modern/SparkLineChart/SparkLineChart.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "colors", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
+const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "color", "colors", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { BarPlot } from "../BarChart/index.js";
@@ -35,7 +35,8 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       width,
       height,
       margin = SPARKLINE_DEFAULT_MARGIN,
-      colors,
+      color,
+      colors: deprecatedColors,
       sx,
       showTooltip,
       showHighlight,
@@ -58,6 +59,12 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
   };
   const axisHighlight = _extends({}, defaultXHighlight, inAxisHighlight);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const colors = React.useMemo(() => {
+    if (color == null) {
+      return undefined;
+    }
+    return typeof color === 'function' ? mode => [color(mode)] : [color];
+  }, [color]);
   return /*#__PURE__*/_jsxs(ChartContainer, _extends({}, other, {
     ref: ref,
     series: [_extends({
@@ -84,7 +91,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     yAxis: [_extends({
       id: DEFAULT_Y_AXIS_KEY
     }, yAxis)],
-    colors: colors,
+    colors: colors ?? deprecatedColors,
     sx: sx,
     disableAxisListener: (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
@@ -127,9 +134,15 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   }),
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * Color used to colorize the sparkline.
+   * @default rainbowSurgePalette[0]
+   */
+  color: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
+   * @deprecated use the `color` prop instead
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**
@@ -185,6 +198,13 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/modern/hooks/useAxisEvents.js

@@ -1,165 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { isBandScale } from "../internals/isBandScale.js";
-import { getSVGPoint } from "../internals/getSVGPoint.js";
-import { useSvgRef } from "./useSvgRef.js";
-import { useStore } from "../internals/store/useStore.js";
-import { useChartContext } from "../context/ChartProvider/index.js";
-import { useXAxes, useYAxes } from "./useAxis.js";
-function getAsANumber(value) {
-  return value instanceof Date ? value.getTime() : value;
-}
-export const useAxisEvents = disableAxisListener => {
-  const svgRef = useSvgRef();
-  const {
-    instance
-  } = useChartContext();
-  const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
-  const {
-    yAxis,
-    yAxisIds
-  } = useYAxes();
-  const store = useStore();
-  const usedXAxis = xAxisIds[0];
-  const usedYAxis = yAxisIds[0];
-
-  // Use a ref to avoid rerendering on every mousemove event.
-  const mousePosition = React.useRef({
-    isInChart: false,
-    x: -1,
-    y: -1
-  });
-  React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null || disableAxisListener || !store) {
-      return () => {};
-    }
-    function getNewAxisState(axisConfig, mouseValue) {
-      const {
-        scale,
-        data: axisData,
-        reverse
-      } = axisConfig;
-      if (!isBandScale(scale)) {
-        const value = scale.invert(mouseValue);
-        if (axisData === undefined) {
-          return {
-            value,
-            index: -1
-          };
-        }
-        const valueAsNumber = getAsANumber(value);
-        const closestIndex = axisData?.findIndex((pointValue, index) => {
-          const v = getAsANumber(pointValue);
-          if (v > valueAsNumber) {
-            if (index === 0 || Math.abs(valueAsNumber - v) <= Math.abs(valueAsNumber - getAsANumber(axisData[index - 1]))) {
-              return true;
-            }
-          }
-          if (v <= valueAsNumber) {
-            if (index === axisData.length - 1 || Math.abs(getAsANumber(value) - v) < Math.abs(getAsANumber(value) - getAsANumber(axisData[index + 1]))) {
-              return true;
-            }
-          }
-          return false;
-        });
-        return {
-          value: closestIndex !== undefined && closestIndex >= 0 ? axisData[closestIndex] : value,
-          index: closestIndex
-        };
-      }
-      const dataIndex = scale.bandwidth() === 0 ? Math.floor((mouseValue - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((mouseValue - Math.min(...scale.range())) / scale.step());
-      if (dataIndex < 0 || dataIndex >= axisData.length) {
-        return null;
-      }
-      if (reverse) {
-        const reverseIndex = axisData.length - 1 - dataIndex;
-        return {
-          index: reverseIndex,
-          value: axisData[reverseIndex]
-        };
-      }
-      return {
-        index: dataIndex,
-        value: axisData[dataIndex]
-      };
-    }
-    const handleOut = () => {
-      mousePosition.current = {
-        isInChart: false,
-        x: -1,
-        y: -1
-      };
-      store.update(prev => _extends({}, prev, {
-        interaction: {
-          item: null,
-          axis: {
-            x: null,
-            y: null
-          }
-        }
-      }));
-    };
-    const handleMove = event => {
-      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = getSVGPoint(element, target);
-      mousePosition.current.x = svgPoint.x;
-      mousePosition.current.y = svgPoint.y;
-      if (!instance.isPointInside(svgPoint, {
-        targetElement: event.target
-      })) {
-        if (mousePosition.current.isInChart) {
-          store.update(prev => _extends({}, prev, {
-            interaction: {
-              item: null,
-              axis: {
-                x: null,
-                y: null
-              }
-            }
-          }));
-          mousePosition.current.isInChart = false;
-        }
-        return;
-      }
-      mousePosition.current.isInChart = true;
-      const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
-      const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
-      store.update(prev => _extends({}, prev, {
-        interaction: _extends({}, prev.interaction, {
-          axis: _extends({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
-            x: newStateX
-          } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
-            y: newStateY
-          } : {})
-        })
-      }));
-    };
-    const handleDown = event => {
-      const target = event.currentTarget;
-      if (!target) {
-        return;
-      }
-      if (target.hasPointerCapture(event.pointerId)) {
-        target.releasePointerCapture(event.pointerId);
-      }
-    };
-    element.addEventListener('pointerdown', handleDown);
-    element.addEventListener('pointermove', handleMove);
-    element.addEventListener('pointerout', handleOut);
-    element.addEventListener('pointercancel', handleOut);
-    element.addEventListener('pointerleave', handleOut);
-    return () => {
-      element.removeEventListener('pointerdown', handleDown);
-      element.removeEventListener('pointermove', handleMove);
-      element.removeEventListener('pointerout', handleOut);
-      element.removeEventListener('pointercancel', handleOut);
-      element.removeEventListener('pointerleave', handleOut);
-    };
-  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, instance]);
-};

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.10
+ * @mui/x-charts v8.0.0-alpha.11
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -22,7 +22,6 @@ export * from "./ChartsLabel/index.js";
 export * from "./ChartsLegend/index.js";
 export * from "./ChartsAxisHighlight/index.js";
 export * from "./ChartsVoronoiHandler/index.js";
-export * from "./ChartsOnAxisClickHandler/index.js";
 export * from "./BarChart/index.js";
 export * from "./LineChart/index.js";
 export * from "./PieChart/index.js";

package/modern/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js

@@ -0,0 +1,59 @@
+import { isBandScale } from "../../../isBandScale.js";
+function getAsANumber(value) {
+  return value instanceof Date ? value.getTime() : value;
+}
+
+/**
+ * For a pointer coordinate, this function returns the value and dataIndex associated.
+ * Returns `null` if the coordinate is outside of values.
+ */
+export function getAxisValue(axisConfig, pointerValue) {
+  const {
+    scale,
+    data: axisData,
+    reverse
+  } = axisConfig;
+  if (!isBandScale(scale)) {
+    const value = scale.invert(pointerValue);
+    if (axisData === undefined) {
+      return {
+        value,
+        index: -1
+      };
+    }
+    const valueAsNumber = getAsANumber(value);
+    const closestIndex = axisData?.findIndex((pointValue, index) => {
+      const v = getAsANumber(pointValue);
+      if (v > valueAsNumber) {
+        if (index === 0 || Math.abs(valueAsNumber - v) <= Math.abs(valueAsNumber - getAsANumber(axisData[index - 1]))) {
+          return true;
+        }
+      }
+      if (v <= valueAsNumber) {
+        if (index === axisData.length - 1 || Math.abs(getAsANumber(value) - v) < Math.abs(getAsANumber(value) - getAsANumber(axisData[index + 1]))) {
+          return true;
+        }
+      }
+      return false;
+    });
+    return {
+      value: closestIndex !== undefined && closestIndex >= 0 ? axisData[closestIndex] : value,
+      index: closestIndex
+    };
+  }
+  const dataIndex = scale.bandwidth() === 0 ? Math.floor((pointerValue - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((pointerValue - Math.min(...scale.range())) / scale.step());
+  if (dataIndex < 0 || dataIndex >= axisData.length) {
+    return null;
+  }
+  if (reverse) {
+    const reverseIndex = axisData.length - 1 - dataIndex;
+    return {
+      index: reverseIndex,
+      value: axisData[reverseIndex]
+    };
+  }
+  return {
+    index: dataIndex,
+    value: axisData[dataIndex]
+  };
+}