@mui/x-charts 7.11.0 → 7.12.0

package/esm/LineChart/formatter.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { stack as d3Stack } from 'd3-shape';
+import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
 import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
 let warnedOnce = false;
@@ -31,7 +31,7 @@ const formatter = (params, dataset) => {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
-      throw new Error([`MUI X Charts: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+      throw new Error([`MUI X: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   const completedSeries = {};
@@ -56,7 +56,7 @@ const formatter = (params, dataset) => {
           if (typeof value !== 'number') {
             if (process.env.NODE_ENV !== 'production' && !warnedOnce && value !== null) {
               warnedOnce = true;
-              console.error([`MUI X charts: your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
+              console.error([`MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
             }
             return null;
           }

package/esm/PieChart/PieArc.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle", "highlightScope"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { arc as d3Arc } from 'd3-shape';
+import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { animated, to } from '@react-spring/web';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
@@ -73,6 +73,7 @@ function PieArc(props) {
       innerRadius: iR,
       outerRadius: oR
     })),
+    visibility: to([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible'),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,

package/esm/PieChart/PieArcLabel.js

@@ -4,7 +4,7 @@ const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingA
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { animated, to } from '@react-spring/web';
-import { arc as d3Arc } from 'd3-shape';
+import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';

package/esm/PieChart/PieChart.js

@@ -284,7 +284,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -337,7 +336,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,

package/esm/PieChart/formatter.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { pie as d3Pie } from 'd3-shape';
+import { pie as d3Pie } from '@mui/x-charts-vendor/d3-shape';
 import { getLabel } from '../internals/getLabel';
 const getSortingComparator = (comparator = 'none') => {
   if (typeof comparator === 'function') {

package/esm/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -96,7 +96,6 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -149,7 +148,6 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,

package/esm/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -54,11 +54,11 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
   }, [computeSize, inHeight, inWidth]);
   if (process.env.NODE_ENV !== 'production') {
     if (displayError.current && inWidth === undefined && width === 0) {
-      console.error(`MUI X Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
+      console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
       displayError.current = false;
     }
     if (displayError.current && inHeight === undefined && height === 0) {
-      console.error(`MUI X Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
+      console.error(`MUI X: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
       displayError.current = false;
     }
   }

package/esm/ScatterChart/ScatterChart.js

@@ -41,7 +41,10 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     ref: ref
   }, chartContainerProps, {
     children: /*#__PURE__*/_jsxs(ZAxisContextProvider, _extends({}, zAxisProps, {
-      children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), children]
+      children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
+        "data-drawing-container": true,
+        children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
+      }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), children]
     }))
   }));
 });
@@ -218,7 +221,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -271,7 +273,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,

package/esm/ScatterChart/ScatterPlot.js

@@ -53,12 +53,15 @@ function ScatterPlot(props) {
         xAxisKey,
         yAxisKey,
         zAxisKey,
+        xAxisId,
+        yAxisId,
+        zAxisId,
         markerSize,
         color
       } = series[seriesId];
-      const colorGetter = getColor(series[seriesId], xAxis[xAxisKey ?? defaultXAxisId], yAxis[yAxisKey ?? defaultYAxisId], zAxis[zAxisKey ?? defaultZAxisId]);
-      const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
-      const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
+      const colorGetter = getColor(series[seriesId], xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId], yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId], zAxis[zAxisId ?? zAxisKey ?? defaultZAxisId]);
+      const xScale = xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId].scale;
       return /*#__PURE__*/_jsx(ScatterItems, _extends({
         xScale: xScale,
         yScale: yScale,

package/esm/ScatterChart/extremums.js

@@ -13,7 +13,10 @@ export const getExtremumX = params => {
     axis,
     isDefaultAxis
   } = params;
-  return Object.keys(series).filter(seriesId => series[seriesId].xAxisKey === axis.id || series[seriesId].xAxisKey === undefined && isDefaultAxis).reduce((acc, seriesId) => {
+  return Object.keys(series).filter(seriesId => {
+    const axisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey;
+    return axisId === axis.id || axisId === undefined && isDefaultAxis;
+  }).reduce((acc, seriesId) => {
     const seriesMinMax = series[seriesId].data.reduce((accSeries, {
       x
     }) => {
@@ -29,7 +32,10 @@ export const getExtremumY = params => {
     axis,
     isDefaultAxis
   } = params;
-  return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || series[seriesId].yAxisKey === undefined && isDefaultAxis).reduce((acc, seriesId) => {
+  return Object.keys(series).filter(seriesId => {
+    const axisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    return axisId === axis.id || axisId === undefined && isDefaultAxis;
+  }).reduce((acc, seriesId) => {
     const seriesMinMax = series[seriesId].data.reduce((accSeries, {
       y
     }) => {

package/esm/SparkLineChart/SparkLineChart.js

@@ -245,7 +245,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   xAxis: PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -297,7 +296,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   yAxis: PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,

package/esm/context/CartesianProvider/computeValue.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { scaleBand, scalePoint, scaleTime } from 'd3-scale';
+import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
 import { isBandScaleConfig, isPointScaleConfig } from '../../models/axis';
 import { getColorScale, getOrdinalColorScale } from '../../internals/colorScale';
 import { getTickNumber } from '../../hooks/useTicks';

package/esm/context/CartesianProvider/normalizeAxis.js

@@ -6,7 +6,7 @@ export const normalizeAxis = (axis, dataset, axisName) => {
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error(`MUI X Charts: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
+      throw Error(`MUI X: ${axisName}-axis uses \`dataKey\` but no \`dataset\` is provided.`);
     }
     return _extends({}, axisConfig, {
       data: dataset.map(d => d[dataKey])

package/esm/context/DrawingProvider.js

@@ -42,7 +42,13 @@ export function DrawingProvider(props) {
   const isPointInside = React.useCallback(({
     x,
     y
-  }) => x >= drawingArea.left && x <= drawingArea.left + drawingArea.width && y >= drawingArea.top && y <= drawingArea.top + drawingArea.height, [drawingArea]);
+  }, targetElement) => {
+    // For element allowed to overflow, wrapping them in <g data-drawing-container /> make them fully part of the drawing area.
+    if (targetElement && targetElement.closest('[data-drawing-container]')) {
+      return true;
+    }
+    return x >= drawingArea.left && x <= drawingArea.left + drawingArea.width && y >= drawingArea.top && y <= drawingArea.top + drawingArea.height;
+  }, [drawingArea]);
   const value = React.useMemo(() => _extends({
     chartId: chartId ?? ''
   }, drawingArea, {

package/esm/context/SeriesProvider/Series.types.js

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

package/esm/context/SeriesProvider/SeriesContext.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export const SeriesContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {}
+});
+if (process.env.NODE_ENV !== 'production') {
+  SeriesContext.displayName = 'SeriesContext';
+}

package/esm/context/SeriesProvider/SeriesProvider.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { blueberryTwilightPalette } from '../../colorPalettes';
+import { SeriesContext } from './SeriesContext';
+import { preprocessSeries } from './processSeries';
+import { jsx as _jsx } from "react/jsx-runtime";
+function SeriesProvider(props) {
+  const {
+    series,
+    dataset,
+    colors = blueberryTwilightPalette,
+    seriesFormatters,
+    children
+  } = props;
+  const theme = useTheme();
+  const formattedSeries = React.useMemo(() => ({
+    isInitialized: true,
+    data: preprocessSeries({
+      series,
+      colors: typeof colors === 'function' ? colors(theme.palette.mode) : colors,
+      seriesFormatters,
+      dataset: dataset
+    })
+  }), [series, colors, theme.palette.mode, seriesFormatters, dataset]);
+  return /*#__PURE__*/_jsx(SeriesContext.Provider, {
+    value: formattedSeries,
+    children: children
+  });
+}
+export { SeriesProvider };

package/esm/context/SeriesProvider/index.js

@@ -0,0 +1,8 @@
+import { preprocessSeries } from './processSeries';
+export * from './SeriesProvider';
+export * from './SeriesContext';
+export * from './Series.types';
+const seriesProviderUtils = {
+  preprocessSeries
+};
+export { seriesProviderUtils };

package/esm/context/{SeriesContextProvider.js → SeriesProvider/processSeries.js}

@@ -1,25 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import { defaultizeColor } from '../internals/defaultizeColor';
-import { blueberryTwilightPalette } from '../colorPalettes';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const SeriesContext = /*#__PURE__*/React.createContext({
-  isInitialized: false,
-  data: {}
-});
-if (process.env.NODE_ENV !== 'production') {
-  SeriesContext.displayName = 'SeriesContext';
-}
+import { defaultizeColor } from '../../internals/defaultizeColor';
 /**
  * This methods is the interface between what the developer is providing and what components receives
  * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
  * It also add defaultized values such as the ids, colors
- * @param series The array of series provided by devs
+ * @param series The array of series provided by the developer
  * @param colors The color palette used to defaultize series colors
  * @returns An object structuring all the series by type.
  */
-const preprocessSeries = (series, colors, seriesFormatters, dataset) => {
+export const preprocessSeries = ({
+  series,
+  colors,
+  seriesFormatters,
+  dataset
+}) => {
   // Group series by type
   const seriesGroups = {};
   series.forEach((seriesData, seriesIndex) => {
@@ -34,7 +28,7 @@ const preprocessSeries = (series, colors, seriesFormatters, dataset) => {
       };
     }
     if (seriesGroups[type]?.series[id] !== undefined) {
-      throw new Error(`MUI X Charts: series' id "${id}" is not unique.`);
+      throw new Error(`MUI X: series' id "${id}" is not unique.`);
     }
     seriesGroups[type].series[id] = _extends({
       id
@@ -50,23 +44,4 @@ const preprocessSeries = (series, colors, seriesFormatters, dataset) => {
     }
   });
   return formattedSeries;
-};
-function SeriesContextProvider(props) {
-  const {
-    series,
-    dataset,
-    colors = blueberryTwilightPalette,
-    seriesFormatters,
-    children
-  } = props;
-  const theme = useTheme();
-  const formattedSeries = React.useMemo(() => ({
-    isInitialized: true,
-    data: preprocessSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors, seriesFormatters, dataset)
-  }), [series, colors, theme.palette.mode, seriesFormatters, dataset]);
-  return /*#__PURE__*/_jsx(SeriesContext.Provider, {
-    value: formattedSeries,
-    children: children
-  });
-}
-export { SeriesContextProvider };
+};

package/esm/context/ZAxisContextProvider.js

@@ -22,7 +22,7 @@ function ZAxisContextProvider(props) {
       return axisConfig;
     }
     if (dataset === undefined) {
-      throw Error('MUI X Charts: z-axis uses `dataKey` but no `dataset` is provided.');
+      throw Error('MUI X: z-axis uses `dataKey` but no `dataset` is provided.');
     }
     return _extends({}, axisConfig, {
       data: dataset.map(d => d[dataKey])

package/esm/hooks/useAxisEvents.js

@@ -25,6 +25,7 @@ export const useAxisEvents = disableAxisListener => {
 
   // Use a ref to avoid rerendering on every mousemove event.
   const mousePosition = React.useRef({
+    isInChart: false,
     x: -1,
     y: -1
   });
@@ -84,6 +85,7 @@ export const useAxisEvents = disableAxisListener => {
     }
     const handleOut = () => {
       mousePosition.current = {
+        isInChart: false,
         x: -1,
         y: -1
       };
@@ -94,16 +96,18 @@ export const useAxisEvents = disableAxisListener => {
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
       const svgPoint = getSVGPoint(element, target);
-      mousePosition.current = {
-        x: svgPoint.x,
-        y: svgPoint.y
-      };
-      if (!drawingArea.isPointInside(svgPoint)) {
-        dispatch({
-          type: 'exitChart'
-        });
+      mousePosition.current.x = svgPoint.x;
+      mousePosition.current.y = svgPoint.y;
+      if (!drawingArea.isPointInside(svgPoint, event.target)) {
+        if (mousePosition.current.isInChart) {
+          dispatch({
+            type: 'exitChart'
+          });
+          mousePosition.current.isInChart = false;
+        }
         return;
       }
+      mousePosition.current.isInChart = true;
       const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
       const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
       dispatch({

package/esm/hooks/useReducedMotion.js

@@ -19,10 +19,10 @@ export const useReducedMotion = () => {
       return () => {};
     }
     const mql = window.matchMedia('(prefers-reduced-motion)');
-    const handleMediaChange = e => {
+    const handleMediaChange = event => {
       Globals.assign({
         // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
-        skipAnimation: e.matches || undefined
+        skipAnimation: event.matches || undefined
       });
     };
     handleMediaChange(mql);

package/esm/hooks/useSeries.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SeriesContext } from '../context/SeriesContextProvider';
+import { SeriesContext } from '../context/SeriesProvider';
 
 /**
  * Get access to the internal state of series.

package/esm/internals/SlotComponentPropsFromProps.js

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

package/esm/internals/colorScale.js

@@ -1,4 +1,4 @@
-import { scaleOrdinal, scaleThreshold, scaleSequential } from 'd3-scale';
+import { scaleOrdinal, scaleThreshold, scaleSequential } from '@mui/x-charts-vendor/d3-scale';
 export function getSequentialColorScale(config) {
   if (config.type === 'piecewise') {
     return scaleThreshold(config.thresholds, config.colors);

package/esm/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { interpolateDate, interpolateNumber } from 'd3-interpolate';
+import { interpolateDate, interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
 import { jsx as _jsx } from "react/jsx-runtime";
 const PX_PRECISION = 10;
 export default function ChartsContinuousGradient(props) {

package/esm/internals/geometry.js

@@ -14,7 +14,7 @@ export function getMinXTranslation(width, height, angle = 0) {
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnce && angle > 90 && angle < -90) {
       warnedOnce = true;
-      console.warn([`MUI X Charts: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`].join('\n'));
+      console.warn([`MUI X: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`].join('\n'));
     }
   }
   const standardAngle = Math.min(Math.abs(angle) % 180, Math.abs(Math.abs(angle) % 180 - 180) % 180); // Map from R to [0, 90]

package/esm/internals/getCurve.js

@@ -1,4 +1,4 @@
-import { curveCatmullRom, curveLinear, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore } from 'd3-shape';
+import { curveCatmullRom, curveLinear, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore } from '@mui/x-charts-vendor/d3-shape';
 export default function getCurveFactory(curveType) {
   switch (curveType) {
     case 'catmullRom':

package/esm/internals/getPercentageValue.js

@@ -24,5 +24,5 @@ export function getPercentageValue(value, refValue) {
       return val;
     }
   }
-  throw Error(`MUI X Charts: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
+  throw Error(`MUI X: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/esm/internals/getScale.js

@@ -1,4 +1,4 @@
-import { scaleLog, scalePow, scaleSqrt, scaleTime, scaleUtc, scaleLinear } from 'd3-scale';
+import { scaleLog, scalePow, scaleSqrt, scaleTime, scaleUtc, scaleLinear } from '@mui/x-charts-vendor/d3-scale';
 export function getScale(scaleType, domain, range) {
   switch (scaleType) {
     case 'log':

package/esm/internals/index.js

@@ -27,7 +27,7 @@ export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';
 export * from '../context/ColorProvider';
 export * from '../context/InteractionProvider';
-export * from '../context/SeriesContextProvider';
+export * from '../context/SeriesProvider';
 export * from '../context/ZAxisContextProvider';
 // series configuration
 export * from '../models/seriesType/config';

package/esm/internals/stackSeries.js

@@ -1,4 +1,4 @@
-import { stackOrderAppearance as d3StackOrderAppearance, stackOrderAscending as d3StackOrderAscending, stackOrderDescending as d3StackOrderDescending, stackOrderInsideOut as d3StackOrderInsideOut, stackOrderNone as d3StackOrderNone, stackOrderReverse as d3StackOrderReverse, stackOffsetExpand as d3StackOffsetExpand, stackOffsetDiverging as d3StackOffsetDiverging, stackOffsetNone as d3StackOffsetNone, stackOffsetSilhouette as d3StackOffsetSilhouette, stackOffsetWiggle as d3StackOffsetWiggle } from 'd3-shape';
+import { stackOrderAppearance as d3StackOrderAppearance, stackOrderAscending as d3StackOrderAscending, stackOrderDescending as d3StackOrderDescending, stackOrderInsideOut as d3StackOrderInsideOut, stackOrderNone as d3StackOrderNone, stackOrderReverse as d3StackOrderReverse, stackOffsetExpand as d3StackOffsetExpand, stackOffsetDiverging as d3StackOffsetDiverging, stackOffsetNone as d3StackOffsetNone, stackOffsetSilhouette as d3StackOffsetSilhouette, stackOffsetWiggle as d3StackOffsetWiggle } from '@mui/x-charts-vendor/d3-shape';
 export const StackOrder = {
   /**
    * Series order such that the earliest series (according to the maximum value) is at the bottom.

package/esm/internals/useAnimatedPath.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { interpolateString } from 'd3-interpolate';
+import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
 import { useSpring, to } from '@react-spring/web';
 function usePrevious(value) {
   const ref = React.useRef(null);

package/esm/internals/warning.js

@@ -1,13 +1,21 @@
-export function buildWarning(message, gravity = 'warning') {
-  let alreadyWarned = false;
-  return (...args) => {
-    if (!alreadyWarned) {
-      alreadyWarned = true;
-      if (gravity === 'error') {
-        console.error(message(...args));
-      } else {
-        console.warn(message(...args));
-      }
+const warnedOnceCache = new Set();
+
+// TODO move to @mui/x-internals
+// TODO eventually move to @base_ui/internals. Base UI, etc. too need this helper.
+export function warnOnce(message, gravity = 'warning') {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+  const cleanMessage = Array.isArray(message) ? message.join('\n') : message;
+  if (!warnedOnceCache.has(cleanMessage)) {
+    warnedOnceCache.add(cleanMessage);
+    if (gravity === 'error') {
+      console.error(cleanMessage);
+    } else {
+      console.warn(cleanMessage);
     }
-  };
+  }
+}
+export function clearWarningsCache() {
+  warnedOnceCache.clear();
 }

package/hooks/useAxisEvents.js

@@ -33,6 +33,7 @@ const useAxisEvents = disableAxisListener => {
 
   // Use a ref to avoid rerendering on every mousemove event.
   const mousePosition = React.useRef({
+    isInChart: false,
     x: -1,
     y: -1
   });
@@ -92,6 +93,7 @@ const useAxisEvents = disableAxisListener => {
     }
     const handleOut = () => {
       mousePosition.current = {
+        isInChart: false,
         x: -1,
         y: -1
       };
@@ -102,16 +104,18 @@ const useAxisEvents = disableAxisListener => {
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
-      mousePosition.current = {
-        x: svgPoint.x,
-        y: svgPoint.y
-      };
-      if (!drawingArea.isPointInside(svgPoint)) {
-        dispatch({
-          type: 'exitChart'
-        });
+      mousePosition.current.x = svgPoint.x;
+      mousePosition.current.y = svgPoint.y;
+      if (!drawingArea.isPointInside(svgPoint, event.target)) {
+        if (mousePosition.current.isInChart) {
+          dispatch({
+            type: 'exitChart'
+          });
+          mousePosition.current.isInChart = false;
+        }
         return;
       }
+      mousePosition.current.isInChart = true;
       const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
       const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
       dispatch({

package/hooks/useReducedMotion.js

@@ -24,10 +24,10 @@ const useReducedMotion = () => {
       return () => {};
     }
     const mql = window.matchMedia('(prefers-reduced-motion)');
-    const handleMediaChange = e => {
+    const handleMediaChange = event => {
       _web.Globals.assign({
         // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
-        skipAnimation: e.matches || undefined
+        skipAnimation: event.matches || undefined
       });
     };
     handleMediaChange(mql);

package/hooks/useSeries.d.ts

@@ -1,4 +1,4 @@
-import { FormattedSeries } from '../context/SeriesContextProvider';
+import { FormattedSeries } from '../context/SeriesProvider';
 /**
  * Get access to the internal state of series.
  * Structured by type of series:

package/hooks/useSeries.js

@@ -9,7 +9,7 @@ exports.usePieSeries = usePieSeries;
 exports.useScatterSeries = useScatterSeries;
 exports.useSeries = useSeries;
 var React = _interopRequireWildcard(require("react"));
-var _SeriesContextProvider = require("../context/SeriesContextProvider");
+var _SeriesProvider = require("../context/SeriesProvider");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -22,7 +22,7 @@ function useSeries() {
   const {
     isInitialized,
     data
-  } = React.useContext(_SeriesContextProvider.SeriesContext);
+  } = React.useContext(_SeriesProvider.SeriesContext);
   if (!isInitialized) {
     throw new Error(['MUI X: Could not find the series ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }