@mui/x-charts 8.0.0-beta.0 → 8.0.0-beta.2

package/ScatterChart/useScatterChartProps.js

@@ -2,12 +2,14 @@
 'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useScatterChartProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
 var _ScatterChart = require("./ScatterChart.plugins");
 const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
 /**
@@ -42,10 +44,11 @@ const useScatterChartProps = props => {
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const seriesWithDefault = React.useMemo(() => series.map(s => (0, _extends2.default)({
+    type: 'scatter'
+  }, s)), [series]);
   const chartContainerProps = (0, _extends2.default)({}, other, {
-    series: series.map(s => (0, _extends2.default)({
-      type: 'scatter'
-    }, s)),
+    series: seriesWithDefault,
     width,
     height,
     margin,

package/esm/BarChart/seriesConfig/extremums.js

@@ -36,8 +36,8 @@ const getValueExtremum = direction => params => {
     isDefaultAxis
   } = params;
   return Object.keys(series).filter(seriesId => {
-    const yAxisId = series[seriesId].yAxisId;
-    return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
+    const axisId = direction === 'x' ? series[seriesId].xAxisId : series[seriesId].yAxisId;
+    return axisId === axis.id || isDefaultAxis && axisId === undefined;
   }).reduce((acc, seriesId) => {
     const {
       stackedData

package/esm/BarChart/useBarChartProps.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { BarChartProps } from './BarChart';
 import { ChartContainerProps } from "../ChartContainer/index.js";
 import { BarPlotProps } from "./BarPlot.js";
@@ -29,5 +30,5 @@ export declare const useBarChartProps: (props: BarChartProps) => {
   chartsAxisProps: ChartsAxisProps;
   axisHighlightProps: ChartsAxisHighlightProps;
   legendProps: ChartsLegendSlotExtension;
-  children: import("react").ReactNode;
+  children: React.ReactNode;
 };

package/esm/BarChart/useBarChartProps.js

@@ -3,6 +3,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", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
+import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 import { BAR_CHART_PLUGINS } from "./BarChart.plugins.js";
@@ -44,29 +45,34 @@ export const useBarChartProps = props => {
   const id = useId();
   const clipPathId = `${id}-clip-path`;
   const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
-  const defaultAxisConfig = {
+  const defaultBandXAxis = React.useMemo(() => [{
+    id: DEFAULT_X_AXIS_KEY,
     scaleType: 'band',
     data: Array.from({
       length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
     }, (_, index) => index)
-  };
+  }], [dataset, series]);
+  const defaultBandYAxis = React.useMemo(() => [{
+    id: DEFAULT_Y_AXIS_KEY,
+    scaleType: 'band',
+    data: Array.from({
+      length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
+    }, (_, index) => index)
+  }], [dataset, series]);
+  const seriesWithDefault = React.useMemo(() => series.map(s => _extends({
+    type: 'bar'
+  }, s, {
+    layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
+  })), [hasHorizontalSeries, series]);
   const chartContainerProps = _extends({}, rest, {
-    series: series.map(s => _extends({
-      type: 'bar'
-    }, s, {
-      layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
-    })),
+    series: seriesWithDefault,
     width,
     height,
     margin,
     colors,
     dataset,
-    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [_extends({
-      id: DEFAULT_X_AXIS_KEY
-    }, defaultAxisConfig)]),
-    yAxis: yAxis ?? (hasHorizontalSeries ? [_extends({
-      id: DEFAULT_Y_AXIS_KEY
-    }, defaultAxisConfig)] : undefined),
+    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : defaultBandXAxis),
+    yAxis: yAxis ?? (hasHorizontalSeries ? defaultBandYAxis : undefined),
     highlightedItem,
     onHighlightChange,
     disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',

package/esm/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -5,7 +5,7 @@ import { getValueToPositionMapper, useXScale } from "../hooks/useScale.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
-import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { selectorChartsInteractionXAxisValue } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useDrawingArea } from "../hooks/index.js";
 import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
 
@@ -24,26 +24,26 @@ export default function ChartsXHighlight(props) {
   } = useDrawingArea();
   const xScale = useXScale();
   const store = useStore();
-  const axisX = useSelector(store, selectorChartsInteractionXAxis);
+  const axisXValue = useSelector(store, selectorChartsInteractionXAxisValue);
   const getXPosition = getValueToPositionMapper(xScale);
-  const isBandScaleX = type === 'band' && axisX !== null && isBandScale(xScale);
+  const isBandScaleX = type === 'band' && axisXValue !== null && isBandScale(xScale);
   if (process.env.NODE_ENV !== 'production') {
-    const isError = isBandScaleX && xScale(axisX.value) === undefined;
+    const isError = isBandScaleX && xScale(axisXValue) === undefined;
     if (isError) {
       console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
     }
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [isBandScaleX && xScale(axisX.value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath
+    children: [isBandScaleX && xScale(axisXValue) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath
     // @ts-expect-error, xScale value is checked in the statement above
     , {
-      d: `M ${xScale(axisX.value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
+      d: `M ${xScale(axisXValue) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'band'
       }
-    }), type === 'line' && axisX !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${getXPosition(axisX.value)} ${top} L ${getXPosition(axisX.value)} ${top + height}`,
+    }), type === 'line' && axisXValue !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+      d: `M ${getXPosition(axisXValue)} ${top} L ${getXPosition(axisXValue)} ${top + height}`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'line'

package/esm/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -5,7 +5,7 @@ import { getValueToPositionMapper, useYScale } from "../hooks/useScale.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
-import { selectorChartsInteractionYAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { selectorChartsInteractionYAxisValue } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useDrawingArea } from "../hooks/index.js";
 import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
 
@@ -24,26 +24,26 @@ export default function ChartsYHighlight(props) {
   } = useDrawingArea();
   const yScale = useYScale();
   const store = useStore();
-  const axisY = useSelector(store, selectorChartsInteractionYAxis);
+  const axisYValue = useSelector(store, selectorChartsInteractionYAxisValue);
   const getYPosition = getValueToPositionMapper(yScale);
-  const isBandScaleY = type === 'band' && axisY !== null && isBandScale(yScale);
+  const isBandScaleY = type === 'band' && axisYValue !== null && isBandScale(yScale);
   if (process.env.NODE_ENV !== 'production') {
-    const isError = isBandScaleY && yScale(axisY.value) === undefined;
+    const isError = isBandScaleY && yScale(axisYValue) === undefined;
     if (isError) {
       console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
     }
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [isBandScaleY && yScale(axisY.value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+    children: [isBandScaleY && yScale(axisYValue) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
       d: `M ${left} ${
       // @ts-expect-error, yScale value is checked in the statement above
-      yScale(axisY.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
+      yScale(axisYValue) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'band'
       }
-    }), type === 'line' && axisY !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${left} ${getYPosition(axisY.value)} L ${left + width} ${getYPosition(axisY.value)}`,
+    }), type === 'line' && axisYValue !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+      d: `M ${left} ${getYPosition(axisYValue)} L ${left + width} ${getYPosition(axisYValue)}`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'line'

package/esm/ChartsOverlay/ChartsLoadingOverlay.js

@@ -11,7 +11,7 @@ const StyledText = styled('text')(({
   theme
 }) => _extends({}, theme.typography.body2, {
   stroke: 'none',
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges',
   textAnchor: 'middle',
   dominantBaseline: 'middle'

package/esm/ChartsOverlay/ChartsNoDataOverlay.js

@@ -11,7 +11,7 @@ const StyledText = styled('text')(({
   theme
 }) => _extends({}, theme.typography.body2, {
   stroke: 'none',
-  fill: theme.palette.text.primary,
+  fill: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges',
   textAnchor: 'middle',
   dominantBaseline: 'middle'

package/esm/ChartsTooltip/ChartsTooltipContainer.js

@@ -15,7 +15,8 @@ import { usePointerType } from "./utils.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { useXAxis } from "../hooks/index.js";
-import { selectorChartsInteractionItemIsDefined, selectorChartsInteractionXAxisIsDefined, selectorChartsInteractionYAxisIsDefined } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { selectorChartsInteractionItemIsDefined } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { selectorChartsInteractionXAxisIsDefined, selectorChartsInteractionYAxisIsDefined } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ChartsTooltipRoot = styled(Popper, {
   name: 'MuiChartsTooltip',

package/esm/ChartsTooltip/useAxisTooltip.js

@@ -9,7 +9,7 @@ import { isCartesianSeriesType } from "../internals/isCartesian.js";
 import { utcFormatter } from "./utils.js";
 import { useXAxes, useXAxis, useYAxes, useYAxis } from "../hooks/useAxis.js";
 import { useZAxes } from "../hooks/useZAxis.js";
-import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 export function useAxisTooltip() {
   const defaultXAxis = useXAxis();
   const defaultYAxis = useYAxis();

package/esm/LineChart/CircleMarkElement.js

@@ -11,7 +11,7 @@ import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
 import { useUtilityClasses } from "./markElementClasses.js";
 import { useSelector } from "../internals/store/useSelector.js";
-import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

package/esm/LineChart/LineHighlightPlot.js

@@ -13,7 +13,7 @@ import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useLineSeriesContext } from "../hooks/useLineSeries.js";
 import getColor from "./seriesConfig/getColor.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
-import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

package/esm/LineChart/MarkElement.js

@@ -12,7 +12,7 @@ import { getSymbol } from "../internals/getSymbol.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
 import { useUtilityClasses } from "./markElementClasses.js";
-import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/LineChart/useLineChartProps.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
 import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { ChartsClipPathProps } from "../ChartsClipPath/index.js";
@@ -35,5 +36,5 @@ export declare const useLineChartProps: (props: LineChartProps) => {
   axisHighlightProps: ChartsAxisHighlightProps;
   lineHighlightPlotProps: LineHighlightPlotProps;
   legendProps: ChartsLegendSlotExtension;
-  children: import("react").ReactNode;
+  children: React.ReactNode;
 };

package/esm/LineChart/useLineChartProps.js

@@ -3,6 +3,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", "dataset", "sx", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
+import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { LINE_CHART_PLUGINS } from "./LineChart.plugins.js";
@@ -43,11 +44,12 @@ export const useLineChartProps = props => {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
   const clipPathId = `${id}-clip-path`;
+  const seriesWithDefault = React.useMemo(() => series.map(s => _extends({
+    disableHighlight: !!disableLineItemHighlight,
+    type: 'line'
+  }, s)), [disableLineItemHighlight, series]);
   const chartContainerProps = _extends({}, other, {
-    series: series.map(s => _extends({
-      disableHighlight: !!disableLineItemHighlight,
-      type: 'line'
-    }, s)),
+    series: seriesWithDefault,
     width,
     height,
     margin,

package/esm/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js

@@ -5,7 +5,7 @@ import { useSelector } from "../../internals/store/useSelector.js";
 import { useStore } from "../../internals/store/useStore.js";
 import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
 import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
-import { selectorChartsInteractionXAxis } from "../../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { selectorChartsInteractionRotationAxisIndex, selectorChartsInteractionRotationAxisValue } from "../../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.js";
 export function useRadarAxisHighlight(params) {
   const {
     includesNeighbors = false
@@ -20,10 +20,14 @@ export function useRadarAxisHighlight(params) {
     instance
   } = useChartContext();
   const store = useStore();
-  const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
+  const rotationAxisIndex = useSelector(store, selectorChartsInteractionRotationAxisIndex);
+  const rotationAxisValue = useSelector(store, selectorChartsInteractionRotationAxisValue);
   const center = useSelector(store, selectorChartPolarCenter);
-  const highlightedIndex = xAxisIdentifier?.index;
-  if (highlightedIndex === undefined) {
+  const highlightedIndex = rotationAxisIndex;
+  if (!rotationScale) {
+    return null;
+  }
+  if (highlightedIndex === null || highlightedIndex === -1) {
     return null;
   }
   if (radarSeries === undefined || radarSeries.length === 0) {
@@ -31,7 +35,7 @@ export function useRadarAxisHighlight(params) {
   }
   const metric = radiusAxisIds[highlightedIndex];
   const radiusScale = radiusAxis[metric].scale;
-  const angle = rotationScale(xAxisIdentifier?.value);
+  const angle = rotationScale(rotationAxisValue);
   const radius = radiusScale.range()[1];
   return {
     center,

package/esm/RadarChart/RadarGrid/RadarGrid.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RadarGridProps } from "./RadarGrid.types.js";
-declare function RadarGrid(props: RadarGridProps): React.JSX.Element;
+declare function RadarGrid(props: RadarGridProps): React.JSX.Element | null;
 declare namespace RadarGrid {
   var propTypes: any;
 }

package/esm/RadarChart/RadarGrid/RadarGrid.js

@@ -9,11 +9,15 @@ function RadarGrid(props) {
     divisions = 5,
     shape = 'sharp'
   } = props;
+  const gridData = useRadarGridData();
+  if (gridData === null) {
+    return null;
+  }
   const {
     center,
     corners,
     radius
-  } = useRadarGridData();
+  } = gridData;
   return shape === 'sharp' ? /*#__PURE__*/_jsx(SharpRadarGrid, {
     divisions: divisions,
     corners: corners,

package/esm/RadarChart/RadarGrid/useRadarGridData.d.ts

@@ -8,4 +8,4 @@ export declare function useRadarGridData(): {
     y: number;
   }[];
   radius: number;
-};
+} | null;

package/esm/RadarChart/RadarGrid/useRadarGridData.js

@@ -13,6 +13,9 @@ export function useRadarGridData() {
   const drawingArea = useDrawingArea();
   const cx = drawingArea.left + drawingArea.width / 2;
   const cy = drawingArea.top + drawingArea.height / 2;
+  if (!rotationScale || rotationScale.domain().length === 0) {
+    return null;
+  }
   const metrics = rotationScale.domain();
   const angles = metrics.map(key => rotationScale(key));
   return {

package/esm/RadarChart/RadarSeriesPlot/useRadarSeriesData.js

@@ -23,8 +23,8 @@ export function useRadarSeriesData(querySeriesId) {
     isFaded: isItemFaded,
     isHighlighted: isItemHighlighted
   } = useItemHighlightedGetter();
-  const metrics = rotationScale.domain();
-  const angles = metrics.map(key => rotationScale(key));
+  const metrics = rotationScale?.domain() ?? [];
+  const angles = metrics.map(key => rotationScale?.(key));
   return radarSeries.map(series => {
     const seriesId = series.id;
     const isSeriesHighlighted = isItemHighlighted({

package/esm/ScatterChart/useScatterChartProps.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
 import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
@@ -24,5 +25,5 @@ export declare const useScatterChartProps: (props: ScatterChartProps) => {
   overlayProps: ChartsOverlayProps;
   legendProps: ChartsLegendSlotExtension;
   axisHighlightProps: ChartsAxisHighlightProps;
-  children: import("react").ReactNode;
+  children: React.ReactNode;
 };

package/esm/ScatterChart/useScatterChartProps.js

@@ -3,6 +3,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", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
+import * as React from 'react';
 import { SCATTER_CHART_PLUGINS } from "./ScatterChart.plugins.js";
 /**
  * A helper function that extracts ScatterChartProps from the input props
@@ -36,10 +37,11 @@ export const useScatterChartProps = props => {
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const seriesWithDefault = React.useMemo(() => series.map(s => _extends({
+    type: 'scatter'
+  }, s)), [series]);
   const chartContainerProps = _extends({}, other, {
-    series: series.map(s => _extends({
-      type: 'scatter'
-    }, s)),
+    series: seriesWithDefault,
     width,
     height,
     margin,

package/esm/hooks/useAxis.d.ts

@@ -1,4 +1,4 @@
-import { AxisId } from "../models/axis.js";
+import { AxisId, ChartsRadiusAxisProps, ChartsRotationAxisProps, PolarAxisDefaultized, ScaleName } from "../models/axis.js";
 /**
  * Get all the x-axes.
  *
@@ -40,12 +40,12 @@ export declare function useXAxis(axisId?: AxisId): import("../internals").AxisDe
  */
 export declare function useYAxis(axisId?: AxisId): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("..").ChartsYAxisProps>;
 export declare function useRotationAxes(): {
-  rotationAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue").DefaultizedAxisConfig<import("../internals").ChartsRotationAxisProps>;
+  rotationAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue").DefaultizedAxisConfig<ChartsRotationAxisProps>;
   rotationAxisIds: string[];
 };
 export declare function useRadiusAxes(): {
-  radiusAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue").DefaultizedAxisConfig<import("../internals").ChartsRadiusAxisProps>;
+  radiusAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue").DefaultizedAxisConfig<ChartsRadiusAxisProps>;
   radiusAxisIds: string[];
 };
-export declare function useRotationAxis(identifier?: number | string): import("../internals").PolarAxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("../internals").ChartsRotationAxisProps>;
-export declare function useRadiusAxis(identifier?: number | string): import("../internals").PolarAxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("../internals").ChartsRadiusAxisProps>;
+export declare function useRotationAxis(identifier?: number | string): PolarAxisDefaultized<ScaleName, any, ChartsRotationAxisProps> | undefined;
+export declare function useRadiusAxis(identifier?: number | string): PolarAxisDefaultized<ScaleName, any, ChartsRadiusAxisProps> | undefined;

package/esm/hooks/useInteractionItemProps.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useChartContext } from "../context/ChartProvider/index.js";
 const onPointerDown = event => {
-  if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+  if ('hasPointerCapture' in event.currentTarget && event.currentTarget.hasPointerCapture(event.pointerId)) {
     event.currentTarget.releasePointerCapture(event.pointerId);
   }
 };

package/esm/hooks/useScale.d.ts

@@ -20,5 +20,5 @@ export declare function useXScale<S extends ScaleName>(axisId?: AxisId): AxisSca
  * @returns {AxisScaleConfig[S]['scale']} The scale for the specified Y axis.
  */
 export declare function useYScale<S extends ScaleName>(axisId?: AxisId): AxisScaleConfig[S]['scale'];
-export declare function useRotationScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'];
-export declare function useRadiusScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'];
+export declare function useRotationScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'] | undefined;
+export declare function useRadiusScale<S extends ScaleName>(identifier?: number | string): AxisScaleConfig[S]['scale'] | undefined;

package/esm/hooks/useScale.js

@@ -39,9 +39,9 @@ export function useYScale(axisId) {
 }
 export function useRotationScale(identifier) {
   const axis = useRotationAxis(identifier);
-  return axis.scale;
+  return axis?.scale;
 }
 export function useRadiusScale(identifier) {
   const axis = useRadiusAxis(identifier);
-  return axis.scale;
+  return axis?.scale;
 }

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-beta.0
+ * @mui/x-charts v8.0.0-beta.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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

@@ -1,9 +1,11 @@
 import { AxisDefaultized } from "../../../../models/axis.js";
 /**
- * For a pointer coordinate, this function returns the value and dataIndex associated.
- * Returns `null` if the coordinate is outside of values.
+ * For a pointer coordinate, this function returns the dataIndex associated.
+ * Returns `-1` if no dataIndex matches.
  */
-export declare function getAxisValue(axisConfig: AxisDefaultized, pointerValue: number): {
-  value: any;
-  index: number;
-} | null;
+export declare function getAxisIndex(axisConfig: AxisDefaultized, pointerValue: number): number;
+/**
+ * For a pointer coordinate, this function returns the value associated.
+ * Returns `null` if the coordinate has no value associated.
+ */
+export declare function getAxisValue(axisConfig: AxisDefaultized, pointerValue: number, dataIndex: number): number | Date | null;

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

@@ -4,10 +4,10 @@ function getAsANumber(value) {
 }
 
 /**
- * For a pointer coordinate, this function returns the value and dataIndex associated.
- * Returns `null` if the coordinate is outside of values.
+ * For a pointer coordinate, this function returns the dataIndex associated.
+ * Returns `-1` if no dataIndex matches.
  */
-export function getAxisValue(axisConfig, pointerValue) {
+export function getAxisIndex(axisConfig, pointerValue) {
   const {
     scale,
     data: axisData,
@@ -16,10 +16,7 @@ export function getAxisValue(axisConfig, pointerValue) {
   if (!isBandScale(scale)) {
     const value = scale.invert(pointerValue);
     if (axisData === undefined) {
-      return {
-        value,
-        index: -1
-      };
+      return -1;
     }
     const valueAsNumber = getAsANumber(value);
     const closestIndex = axisData?.findIndex((pointValue, index) => {
@@ -36,24 +33,33 @@ export function getAxisValue(axisConfig, pointerValue) {
       }
       return false;
     });
-    return {
-      value: closestIndex !== undefined && closestIndex >= 0 ? axisData[closestIndex] : value,
-      index: closestIndex
-    };
+    return 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;
+    return -1;
+  }
+  return reverse ? axisData.length - 1 - dataIndex : dataIndex;
+}
+
+/**
+ * For a pointer coordinate, this function returns the value associated.
+ * Returns `null` if the coordinate has no value associated.
+ */
+export function getAxisValue(axisConfig, pointerValue, dataIndex) {
+  const {
+    scale,
+    data: axisData
+  } = axisConfig;
+  if (!isBandScale(scale)) {
+    const value = scale.invert(pointerValue);
+    if (dataIndex < 0) {
+      return value;
+    }
+    return axisData[dataIndex];
   }
-  if (reverse) {
-    const reverseIndex = axisData.length - 1 - dataIndex;
-    return {
-      index: reverseIndex,
-      value: axisData[reverseIndex]
-    };
+  if (dataIndex < 0 || dataIndex >= axisData.length) {
+    return null;
   }
-  return {
-    index: dataIndex,
-    value: axisData[dataIndex]
-  };
+  return axisData[dataIndex];
 }

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

@@ -1,6 +1,7 @@
 export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
 export type * from './useChartCartesianAxis.types';
 export * from "./useChartCartesianAxisRendering.selectors.js";
+export * from "./useChartCartesianInteraction.selectors.js";
 export { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
 export * from "./computeAxisValue.js";
 export * from "./createZoomLookup.js";

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

@@ -1,5 +1,6 @@
 export { useChartCartesianAxis } from "./useChartCartesianAxis.js";
 export * from "./useChartCartesianAxisRendering.selectors.js";
+export * from "./useChartCartesianInteraction.selectors.js";
 export { defaultizeXAxis, defaultizeYAxis } from "./defaultizeAxis.js";
 export * from "./computeAxisValue.js";
 export * from "./createZoomLookup.js";