@mui/x-charts 7.0.0-alpha.3 → 7.0.0-alpha.5

package/legacy/ScatterChart/ScatterChart.js

@@ -7,6 +7,7 @@ import { ChartsAxis } from '../ChartsAxis';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
+import { ChartsVoronoiHandler } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -25,6 +26,8 @@ var ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, re
     series = props.series,
     tooltip = props.tooltip,
     axisHighlight = props.axisHighlight,
+    voronoiMaxRadius = props.voronoiMaxRadius,
+    disableVoronoi = props.disableVoronoi,
     legend = props.legend,
     width = props.width,
     height = props.height,
@@ -52,7 +55,9 @@ var ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, re
     xAxis: xAxis,
     yAxis: yAxis,
     sx: sx,
-    children: [/*#__PURE__*/_jsx(ChartsAxis, {
+    children: [!disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, {
+      voronoiMaxRadius: voronoiMaxRadius
+    }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
@@ -126,6 +131,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   */
+  disableVoronoi: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    * @default undefined
@@ -218,6 +228,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
       x: PropTypes.number.isRequired,
       y: PropTypes.number.isRequired
     })).isRequired,
+    disableHover: PropTypes.bool,
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])
@@ -283,6 +294,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     x: PropTypes.number,
     y: PropTypes.number
   }),
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   * @default undefined
+   */
+  voronoiMaxRadius: PropTypes.number,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    * @default undefined

package/legacy/SparkLineChart/SparkLineChart.js

@@ -84,6 +84,7 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
     sx: sx,
     disableAxisListener: (!showTooltip || (tooltip == null ? void 0 : tooltip.trigger) !== 'axis') && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
+      skipAnimation: true,
       slots: slots,
       slotProps: slotProps,
       sx: {

package/legacy/context/CartesianContextProvider.js

@@ -54,7 +54,7 @@ function CartesianContextProvider(_ref) {
         return axisConfig;
       }
       if (dataset === undefined) {
-        throw Error('MUI: x-axis uses `dataKey` but no `dataset` is provided.');
+        throw Error('MUI-X-Charts: x-axis uses `dataKey` but no `dataset` is provided.');
       }
       return _extends({}, axisConfig, {
         data: dataset.map(function (d) {
@@ -70,7 +70,7 @@ function CartesianContextProvider(_ref) {
         return axisConfig;
       }
       if (dataset === undefined) {
-        throw Error('MUI: y-axis uses `dataKey` but no `dataset` is provided.');
+        throw Error('MUI-X-Charts: y-axis uses `dataKey` but no `dataset` is provided.');
       }
       return _extends({}, axisConfig, {
         data: dataset.map(function (d) {

package/legacy/context/InteractionProvider.js

@@ -8,6 +8,7 @@ export var InteractionContext = /*#__PURE__*/React.createContext({
     x: null,
     y: null
   },
+  useVoronoiInteraction: false,
   dispatch: function dispatch() {
     return null;
   }
@@ -18,6 +19,21 @@ var dataReducer = function dataReducer(prevState, action) {
       return _extends({}, prevState, {
         item: action.data
       });
+    case 'exitChart':
+      if (prevState.item === null && prevState.axis.x === null && prevState.axis.y === null) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        axis: {
+          x: null,
+          y: null
+        },
+        item: null
+      });
+    case 'updateVoronoiUsage':
+      return _extends({}, prevState, {
+        useVoronoiInteraction: action.useVoronoiInteraction
+      });
     case 'leaveItem':
       if (prevState.item === null || Object.keys(action.data).some(function (key) {
         return action.data[key] !== prevState.item[key];
@@ -29,6 +45,9 @@ var dataReducer = function dataReducer(prevState, action) {
         item: null
       });
     case 'updateAxis':
+      if (action.data.x === prevState.axis.x && action.data.y === prevState.axis.y) {
+        return prevState;
+      }
       return _extends({}, prevState, {
         axis: action.data
       });
@@ -43,7 +62,8 @@ export function InteractionProvider(_ref) {
       axis: {
         x: null,
         y: null
-      }
+      },
+      useVoronoiInteraction: false
     }),
     _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
     data = _React$useReducer2[0],

package/legacy/context/SeriesContextProvider.js

@@ -39,7 +39,7 @@ var formatSeries = function formatSeries(series, colors, dataset) {
       };
     }
     if (((_seriesGroups$type = seriesGroups[type]) == null ? void 0 : _seriesGroups$type.series[id]) !== undefined) {
-      throw new Error("MUI: series' id \"".concat(id, "\" is not unique"));
+      throw new Error("MUI-X-Charts: series' id \"".concat(id, "\" is not unique"));
     }
     seriesGroups[type].series[id] = _extends({
       id: id

package/legacy/hooks/useAxisEvents.js

@@ -4,6 +4,10 @@ import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { SVGContext, DrawingContext } from '../context/DrawingProvider';
 import { isBandScale } from '../internals/isBandScale';
+import { getSVGPoint } from '../internals/utils';
+function getAsANumber(value) {
+  return value instanceof Date ? value.getTime() : value;
+}
 export var useAxisEvents = function useAxisEvents(disableAxisListener) {
   var svgRef = React.useContext(SVGContext);
   var _React$useContext = React.useContext(DrawingContext),
@@ -44,17 +48,18 @@ export var useAxisEvents = function useAxisEvents(disableAxisListener) {
             value: value
           };
         }
-        var closestIndex = axisData == null ? void 0 : axisData.findIndex(function (v, index) {
-          if (v > value) {
-            // @ts-ignore
-            if (index === 0 || Math.abs(value - v) <= Math.abs(value - axisData[index - 1])) {
+        var valueAsNumber = getAsANumber(value);
+        var closestIndex = axisData == null ? void 0 : axisData.findIndex(function (pointValue, index) {
+          var v = getAsANumber(pointValue);
+          if (v > valueAsNumber) {
+            if (index === 0 || Math.abs(valueAsNumber - v) <= Math.abs(valueAsNumber - getAsANumber(axisData[index - 1]))) {
               return true;
             }
           }
-          if (v <= value) {
+          if (v <= valueAsNumber) {
             if (index === axisData.length - 1 ||
             // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - axisData[index + 1])) {
+            Math.abs(value - v) < Math.abs(value - getAsANumber(axisData[index + 1]))) {
               return true;
             }
           }
@@ -80,37 +85,25 @@ export var useAxisEvents = function useAxisEvents(disableAxisListener) {
         y: -1
       };
       dispatch({
-        type: 'updateAxis',
-        data: {
-          x: null,
-          y: null
-        }
+        type: 'exitChart'
       });
     };
     var handleMouseMove = function handleMouseMove(event) {
-      // Get mouse coordinate in global SVG space
-      var pt = svgRef.current.createSVGPoint();
-      pt.x = event.clientX;
-      pt.y = event.clientY;
-      var svgPt = pt.matrixTransform(svgRef.current.getScreenCTM().inverse());
+      var svgPoint = getSVGPoint(svgRef.current, event);
       mousePosition.current = {
-        x: svgPt.x,
-        y: svgPt.y
+        x: svgPoint.x,
+        y: svgPoint.y
       };
-      var outsideX = svgPt.x < left || svgPt.x > left + width;
-      var outsideY = svgPt.y < top || svgPt.y > top + height;
+      var outsideX = svgPoint.x < left || svgPoint.x > left + width;
+      var outsideY = svgPoint.y < top || svgPoint.y > top + height;
       if (outsideX || outsideY) {
         dispatch({
-          type: 'updateAxis',
-          data: {
-            x: null,
-            y: null
-          }
+          type: 'exitChart'
         });
         return;
       }
-      var newStateX = getUpdate(xAxis[usedXAxis], svgPt.x);
-      var newStateY = getUpdate(yAxis[usedYAxis], svgPt.y);
+      var newStateX = getUpdate(xAxis[usedXAxis], svgPoint.x);
+      var newStateY = getUpdate(yAxis[usedYAxis], svgPoint.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/legacy/hooks/useInteractionItemProps.js

@@ -1,11 +1,16 @@
 import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
 import { HighlighContext } from '../context/HighlightProvider';
-export var useInteractionItemProps = function useInteractionItemProps(scope) {
+export var useInteractionItemProps = function useInteractionItemProps(scope, skip) {
   var _React$useContext = React.useContext(InteractionContext),
     dispatchInteraction = _React$useContext.dispatch;
   var _React$useContext2 = React.useContext(HighlighContext),
     dispatchHighlight = _React$useContext2.dispatch;
+  if (skip) {
+    return function () {
+      return {};
+    };
+  }
   var getInteractionItemProps = function getInteractionItemProps(data) {
     var onMouseEnter = function onMouseEnter() {
       dispatchInteraction({

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-alpha.3
+ * @mui/x-charts v7.0.0-alpha.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -15,9 +15,11 @@ export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';
+export * from './ChartsText';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
 export * from './ChartsAxisHighlight';
+export * from './ChartsVoronoiHandler';
 export * from './BarChart';
 export * from './LineChart';
 export * from './PieChart';

package/legacy/internals/getWordsByLines.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { getStringSize } from './domUtils';
+export function getWordsByLines(_ref) {
+  var style = _ref.style,
+    needsComputation = _ref.needsComputation,
+    text = _ref.text;
+  return text.split('\n').map(function (subText) {
+    return _extends({
+      text: subText
+    }, needsComputation ? getStringSize(subText, style) : {
+      width: 0,
+      height: 0
+    });
+  });
+}

package/legacy/internals/utils.js

@@ -2,4 +2,44 @@
 export function getSymbol(shape) {
   var symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
   return symbolNames.indexOf(shape) || 0;
+}
+/**
+ * Transform mouse event position to corrdinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+export function getSVGPoint(svg, event) {
+  var pt = svg.createSVGPoint();
+  pt.x = event.clientX;
+  pt.y = event.clientY;
+  return pt.matrixTransform(svg.getScreenCTM().inverse());
+}
+
+/**
+ * Helper that converts values and percentages into values.
+ * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.
+ * @param refValue The numerical value associated to 100%.
+ * @returns The numerical value associated to the provided value.
+ */
+export function getPercentageValue(value, refValue) {
+  if (typeof value === 'number') {
+    return value;
+  }
+  if (value === '100%') {
+    // Avoid potential rounding issues
+    return refValue;
+  }
+  if (value.endsWith('%')) {
+    var percentage = Number.parseFloat(value.slice(0, value.length - 1));
+    if (!Number.isNaN(percentage)) {
+      return percentage * refValue / 100;
+    }
+  }
+  if (value.endsWith('px')) {
+    var val = Number.parseFloat(value.slice(0, value.length - 2));
+    if (!Number.isNaN(val)) {
+      return val;
+    }
+  }
+  throw Error("MUI-Charts: Received an unknown value \"".concat(value, "\". It should be a number, or a string with a percentage value."));
 }

package/models/axis.d.ts

@@ -2,7 +2,7 @@
 import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint } from 'd3-scale';
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
-import { ChartsTextProps } from '../internals/components/ChartsText';
+import { ChartsTextProps } from '../ChartsText';
 export type D3Scale<Domain extends {
     toString(): string;
 } = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;

package/models/seriesType/config.d.ts

@@ -77,10 +77,11 @@ export type FormatterResult<T extends ChartSeriesType> = {
 } ? {
     stackingGroups: StackingGroupsType;
 } : {});
-export type DatasetType<T extends number | string | Date = number | string | Date> = {
+export type DatasetElementType<T> = {
     [key: string]: T;
-}[];
-export type Formatter<T extends ChartSeriesType> = (params: FormatterParams<T>, dataset?: DatasetType<number>) => FormatterResult<T>;
+};
+export type DatasetType<T = number | string | Date | null | undefined> = DatasetElementType<T>[];
+export type Formatter<T extends ChartSeriesType> = (params: FormatterParams<T>, dataset?: DatasetType) => FormatterResult<T>;
 export type LegendParams = {
     /**
      * The color used in the legend

package/models/seriesType/pie.d.ts

@@ -17,14 +17,18 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
     data: Tdata[];
     /**
      * The radius between circle center and the begining of the arc.
+     * Can be a number (in px) or a string with a percentage such as '50%'.
+     * The '100%' is the maximal radius that fit into the drawing area.
      * @default 0
      */
-    innerRadius?: number;
+    innerRadius?: number | string;
     /**
      * The radius between circle center and the end of the arc.
-     * @default R_max The maximal radius that fit into the drawing area.
+     * Can be a number (in px) or a string with a percentage such as '50%'.
+     * The '100%' is the maximal radius that fit into the drawing area.
+     * @default '100%'
      */
-    outerRadius?: number;
+    outerRadius?: number | string;
     /**
      * The radius applied to arc corners (similar to border radius).
      * @default 0
@@ -56,14 +60,18 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
     arcLabelMinAngle?: number;
     /**
      * The x coordinate of the pie center.
-     * @default width/2 the center of the drawing area.
+     * Can be a number (in px) or a string with a percentage such as '50%'.
+     * The '100%' is the width the drawing area.
+     * @default '50%'
      */
-    cx?: number;
+    cx?: number | string;
     /**
      * The y coordinate of the pie center.
-     * @default height/2 the center of the drawing area.
+     * Can be a number (in px) or a string with a percentage such as '50%'.
+     * The '100%' is the height the drawing area.
+     * @default '50%'
      */
-    cy?: number;
+    cy?: number | string;
     /**
      * Override the arc attibutes when it is highlighted.
      */
@@ -107,3 +115,17 @@ export type PieItemIdentifier = {
 export interface DefaultizedPieSeriesType extends DefaultizedProps<PieSeriesType, CommonDefaultizedProps> {
     data: DefaultizedPieValueType[];
 }
+/**
+ * Props received when the parent components has done the percentage conversion.
+ */
+export interface ComputedPieRadius {
+    /**
+     * The radius between circle center and the begining of the arc.
+     * @default 0
+     */
+    innerRadius?: number;
+    /**
+     * The radius between circle center and the end of the arc.
+     */
+    outerRadius: number;
+}

package/models/seriesType/scatter.d.ts

@@ -10,6 +10,11 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType>, C
     data: ScatterValueType[];
     markerSize?: number;
     label?: string;
+    /**
+     * If true, the interaction will not use element hover for this series.
+     * @default false
+     */
+    disableHover?: boolean;
 }
 /**
  * An object that allows to identify a single scatter item.

package/modern/BarChart/BarPlot.js

@@ -8,7 +8,8 @@ import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
 import { isBandScaleConfig } from '../models/axis';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -18,6 +19,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -67,18 +69,18 @@ const useCompletedData = () => {
       let baseScaleConfig;
       if (verticalLayout) {
         if (!isBandScaleConfig(xAxisConfig)) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
+          throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}"`);
         }
         if (xAxis[xAxisKey].data === undefined) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+          throw new Error(`MUI-X-Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} shoud have data property`);
         }
         baseScaleConfig = xAxisConfig;
       } else {
         if (!isBandScaleConfig(yAxisConfig)) {
-          throw new Error(`Axis with id "${yAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
+          throw new Error(`MUI-X-Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud be of type "band" to display the bar series of id "${seriesId}"`);
         }
         if (yAxis[yAxisKey].data === undefined) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+          throw new Error(`MUI-X-Charts: ${yAxisKey === DEFAULT_Y_AXIS_KEY ? 'The first `yAxis`' : `The y-axis with id "${yAxisKey}"`} shoud have data property`);
         }
         baseScaleConfig = yAxisConfig;
       }

package/modern/BarChart/formatter.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from 'd3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
 import defaultizeValueFormatter from '../internals/defaultizeValueFormatter';
+let warnOnce = false;
 const formatter = (params, dataset) => {
   const {
     seriesOrder,
@@ -24,7 +25,7 @@ const formatter = (params, dataset) => {
         }
       });
     } else if (dataset === undefined) {
-      throw new Error([`MUI: bar 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-Charts: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   const completedSeries = {};
@@ -39,13 +40,24 @@ const formatter = (params, dataset) => {
       // Use dataKey if needed and available
       const dataKey = series[id].dataKey;
       return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
-    })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
+    })).value((d, key) => d[key] ?? 0) // defaultize null value to 0
+    .order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = _extends({
         layout: 'vertical'
       }, series[id], {
-        data: dataKey ? dataset.map(d => d[dataKey]) : series[id].data,
+        data: dataKey ? dataset.map(data => {
+          const value = data[dataKey];
+          if (typeof value !== 'number') {
+            if (process.env.NODE_ENV !== 'production' && !warnOnce && value !== null) {
+              warnOnce = true;
+              console.error([`MUI-X charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
+            }
+            return 0;
+          }
+          return value;
+        }) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });
     });

package/modern/ChartsAxis/ChartsAxis.js

@@ -58,16 +58,16 @@ function ChartsAxis(props) {
   const topId = getAxisId(topAxis);
   const rightId = getAxisId(rightAxis);
   if (topId !== null && !xAxis[topId]) {
-    throw Error(`MUI: id used for top axis "${topId}" is not defined`);
+    throw Error([`MUI-X-Charts: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   if (leftId !== null && !yAxis[leftId]) {
-    throw Error(`MUI: id used for left axis "${leftId}" is not defined`);
+    throw Error([`MUI-X-Charts: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (rightId !== null && !yAxis[rightId]) {
-    throw Error(`MUI: id used for right axis "${rightId}" is not defined`);
+    throw Error([`MUI-X-Charts: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (bottomId !== null && !xAxis[bottomId]) {
-    throw Error(`MUI: id used for bottom axis "${bottomId}" is not defined`);
+    throw Error([`MUI-X-Charts: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   const topAxisProps = mergeProps(topAxis, slots, slotProps);
   const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);

package/modern/ChartsLegend/ChartsLegend.js

@@ -12,7 +12,8 @@ import { DrawingContext } from '../context/DrawingProvider';
 import { getSeriesToDisplay } from './utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { getLegendUtilityClass } from './chartsLegendClasses';
-import { ChartsText, getWordsByLines } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
+import { getWordsByLines } from '../internals/getWordsByLines';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {

package/modern/ChartsReferenceLine/ChartsReferenceLine.js

@@ -6,10 +6,10 @@ import { ChartsYReferenceLine } from './ChartsYReferenceLine';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsReferenceLine(props) {
   if (props.x !== undefined && props.y !== undefined) {
-    throw new Error('MUI-X: The ChartsReferenceLine can not have both `x` and `y` props set.');
+    throw new Error('MUI-X-Charts: The ChartsReferenceLine can not have both `x` and `y` props set.');
   }
   if (props.x === undefined && props.y === undefined) {
-    throw new Error('MUI-X: The ChartsReferenceLine should have a value in `x` or `y` prop.');
+    throw new Error('MUI-X-Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
   }
   if (props.x !== undefined) {
     return /*#__PURE__*/_jsx(ChartsXReferenceLine, _extends({}, props));

package/modern/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import { useDrawingArea, useXScale } from '../hooks';
 import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
 import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/modern/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import { useDrawingArea, useYScale } from '../hooks';
 import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../internals/components/ChartsText';
+import { ChartsText } from '../ChartsText';
 import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/modern/{internals/components → ChartsText}/ChartsText.js

@@ -1,23 +1,15 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "style", "text", "ownerState"],
   _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
 import * as React from 'react';
-import { getStringSize } from '../domUtils';
+import PropTypes from 'prop-types';
+import { getWordsByLines } from '../internals/getWordsByLines';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getWordsByLines({
-  style,
-  needsComputation,
-  text
-}) {
-  return text.split('\n').map(subText => _extends({
-    text: subText
-  }, needsComputation ? getStringSize(subText, style) : {
-    width: 0,
-    height: 0
-  }));
-}
-export function ChartsText(props) {
+/**
+ * Helper component to manage multiline text in SVG
+ */
+function ChartsText(props) {
   const {
       x,
       y,
@@ -74,4 +66,29 @@ export function ChartsText(props) {
       children: line.text
     }, index))
   }));
-}
+}
+process.env.NODE_ENV !== "production" ? ChartsText.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Height of a text line (in `em`).
+   */
+  lineHeight: PropTypes.number,
+  /**
+   * If `true`, the line width is computed.
+   * @default false
+   */
+  needsComputation: PropTypes.bool,
+  ownerState: PropTypes.any,
+  /**
+   * Style applied to text elements.
+   */
+  style: PropTypes.object,
+  /**
+   * Text displayed.
+   */
+  text: PropTypes.string.isRequired
+} : void 0;
+export { ChartsText };

package/modern/ChartsText/index.js

@@ -0,0 +1 @@
+export { ChartsText } from './ChartsText';