@mui/x-charts 7.14.0 → 7.16.0

package/modern/ChartsGrid/ChartsHorizontalGrid.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useTicks } from "../hooks/useTicks.js";
+import { GridLine } from "./styledCommonents.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export function ChartsGridHorizontal(props) {
+  const {
+    axis,
+    drawingArea,
+    classes
+  } = props;
+  const {
+    scale,
+    tickNumber,
+    tickInterval
+  } = axis;
+  const yTicks = useTicks({
+    scale,
+    tickNumber,
+    tickInterval
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: yTicks.map(({
+      formattedValue,
+      offset
+    }) => /*#__PURE__*/_jsx(GridLine, {
+      y1: offset,
+      y2: offset,
+      x1: drawingArea.left,
+      x2: drawingArea.left + drawingArea.width,
+      className: classes.horizontalLine
+    }, `horizontal-${formattedValue}`))
+  });
+}

package/modern/ChartsGrid/ChartsVerticalGrid.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useTicks } from "../hooks/useTicks.js";
+import { GridLine } from "./styledCommonents.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export function ChartsGridVertical(props) {
+  const {
+    axis,
+    drawingArea,
+    classes
+  } = props;
+  const {
+    scale,
+    tickNumber,
+    tickInterval
+  } = axis;
+  const xTicks = useTicks({
+    scale,
+    tickNumber,
+    tickInterval
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: xTicks.map(({
+      formattedValue,
+      offset
+    }) => /*#__PURE__*/_jsx(GridLine, {
+      y1: drawingArea.top,
+      y2: drawingArea.top + drawingArea.height,
+      x1: offset,
+      x2: offset,
+      className: classes.verticalLine
+    }, `vertical-${formattedValue}`))
+  });
+}

package/modern/ChartsGrid/index.js

@@ -1,2 +1,2 @@
-export * from './ChartsGrid';
-export * from './chartsGridClasses';
+export * from "./ChartsGrid.js";
+export * from "./chartsGridClasses.js";

package/modern/ChartsGrid/styledCommonents.js

@@ -0,0 +1,22 @@
+import { styled } from '@mui/material/styles';
+import { chartsGridClasses } from "./chartsGridClasses.js";
+export const GridRoot = styled('g', {
+  name: 'MuiChartsGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => [{
+    [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine
+  }, {
+    [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine
+  }, styles.root]
+})({});
+export const GridLine = styled('line', {
+  name: 'MuiChartsGrid',
+  slot: 'Line',
+  overridesResolver: (props, styles) => styles.line
+})(({
+  theme
+}) => ({
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1
+}));

package/modern/ChartsLegend/ChartsLegend.js

@@ -1,14 +1,16 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme } from '@mui/material/styles';
-import { getSeriesToDisplay } from './utils';
-import { getLegendUtilityClass } from './chartsLegendClasses';
-import { DefaultChartsLegend } from './DefaultChartsLegend';
-import { useDrawingArea } from '../hooks';
-import { useSeries } from '../hooks/useSeries';
+import { getSeriesToDisplay } from "./utils.js";
+import { getLegendUtilityClass } from "./chartsLegendClasses.js";
+import { DefaultChartsLegend } from "./DefaultChartsLegend.js";
+import { useDrawingArea } from "../hooks/index.js";
+import { useSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -23,27 +25,26 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getLegendUtilityClass, classes);
 };
-const defaultProps = {
-  position: {
-    horizontal: 'middle',
-    vertical: 'top'
-  },
-  direction: 'row'
-};
 function ChartsLegend(inProps) {
   const props = useThemeProps({
-    props: _extends({}, defaultProps, inProps),
+    props: inProps,
     name: 'MuiChartsLegend'
   });
+  const defaultizedProps = _extends({
+    direction: 'row'
+  }, props, {
+    position: _extends({
+      horizontal: 'middle',
+      vertical: 'top'
+    }, props.position)
+  });
   const {
-    position,
-    direction,
-    hidden,
-    slots,
-    slotProps
-  } = props;
+      slots,
+      slotProps
+    } = defaultizedProps,
+    other = _objectWithoutPropertiesLoose(defaultizedProps, _excluded);
   const theme = useTheme();
-  const classes = useUtilityClasses(_extends({}, props, {
+  const classes = useUtilityClasses(_extends({}, defaultizedProps, {
     theme
   }));
   const drawingArea = useDrawingArea();
@@ -53,15 +54,12 @@ function ChartsLegend(inProps) {
   const chartLegendRenderProps = useSlotProps({
     elementType: ChartLegendRender,
     externalSlotProps: slotProps?.legend,
-    additionalProps: {
-      position,
-      direction,
+    additionalProps: _extends({}, other, {
       classes,
       drawingArea,
       series,
-      hidden,
       seriesToDisplay
-    },
+    }),
     ownerState: {}
   });
   return /*#__PURE__*/_jsx(ChartLegendRender, _extends({}, chartLegendRenderProps));
@@ -85,6 +83,42 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * @default false
    */
   hidden: PropTypes.bool,
+  /**
+   * Space between two legend items (in px).
+   * @default 10
+   */
+  itemGap: PropTypes.number,
+  /**
+   * Height of the item mark (in px).
+   * @default 20
+   */
+  itemMarkHeight: PropTypes.number,
+  /**
+   * Width of the item mark (in px).
+   * @default 20
+   */
+  itemMarkWidth: PropTypes.number,
+  /**
+   * Style applied to legend labels.
+   * @default theme.typography.subtitle1
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * Space between the mark and the label (in px).
+   * @default 5
+   */
+  markGap: PropTypes.number,
+  /**
+   * Legend padding (in px).
+   * Can either be a single number, or an object with top, left, bottom, right properties.
+   * @default 10
+   */
+  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  })]),
   /**
    * The position of the legend.
    */

package/modern/ChartsLegend/ContinuousColorLegend.js

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
-import ChartsContinuousGradient from '../internals/components/ChartsAxesGradients/ChartsContinuousGradient';
-import { useChartId, useDrawingArea } from '../hooks';
-import { getScale } from '../internals/getScale';
-import { getPercentageValue } from '../internals/getPercentageValue';
-import { ChartsText } from '../ChartsText';
-import { getStringSize } from '../internals/domUtils';
-import { useAxis } from './useAxis';
+import { useRtl } from '@mui/system/RtlProvider';
+import ChartsContinuousGradient from "../internals/components/ChartsAxesGradients/ChartsContinuousGradient.js";
+import { useChartId, useDrawingArea } from "../hooks/index.js";
+import { getScale } from "../internals/getScale.js";
+import { getPercentageValue } from "../internals/getPercentageValue.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getStringSize } from "../internals/domUtils.js";
+import { useAxis } from "./useAxis.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getPositionOffset(position, legendBox, svgBox) {
   let offsetX = 0;
@@ -187,6 +188,7 @@ const defaultLabelFormatter = ({
 }) => formattedValue;
 function ContinuousColorLegend(props) {
   const theme = useTheme();
+  const isRtl = useRtl();
   const {
     id: idProp,
     minLabel = defaultLabelFormatter,
@@ -204,7 +206,6 @@ function ContinuousColorLegend(props) {
   } = props;
   const chartId = useChartId();
   const id = idProp ?? `gradient-legend-${chartId}`;
-  const isRTL = theme.direction === 'rtl';
   const axisItem = useAxis({
     axisDirection,
     axisId
@@ -255,7 +256,7 @@ function ContinuousColorLegend(props) {
 
   // Place bar and texts
 
-  const barBox = direction === 'column' || isRTL && direction === 'row' ? {
+  const barBox = direction === 'column' || isRtl && direction === 'row' ? {
     width: thickness,
     height: size
   } : {

package/modern/ChartsLegend/DefaultChartsLegend.js

@@ -1,15 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["drawingArea", "seriesToDisplay"];
+const _excluded = ["drawingArea", "seriesToDisplay", "hidden"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { LegendPerItem } from './LegendPerItem';
+import { LegendPerItem } from "./LegendPerItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function DefaultChartsLegend(props) {
   const {
-      seriesToDisplay
+      seriesToDisplay,
+      hidden
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  if (hidden) {
+    return null;
+  }
   return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
     itemsToDisplay: seriesToDisplay
   }));

package/modern/ChartsLegend/LegendPerItem.js

@@ -4,10 +4,11 @@ const _excluded = ["rotate", "dominantBaseline"];
 import * as React from 'react';
 import NoSsr from '@mui/material/NoSsr';
 import { useTheme, styled } from '@mui/material/styles';
-import { ChartsText } from '../ChartsText';
-import { getWordsByLines } from '../internals/getWordsByLines';
-import { legendItemPlacements } from './legendItemsPlacement';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useRtl } from '@mui/system/RtlProvider';
+import { ChartsText } from "../ChartsText/index.js";
+import { getWordsByLines } from "../internals/getWordsByLines.js";
+import { legendItemPlacements } from "./legendItemsPlacement.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ChartsLegendRoot = styled('g', {
   name: 'MuiChartsLegend',
@@ -41,7 +42,6 @@ const getStandardizedPadding = padding => {
  */
 export function LegendPerItem(props) {
   const {
-    hidden,
     position,
     direction,
     itemsToDisplay,
@@ -54,7 +54,7 @@ export function LegendPerItem(props) {
     labelStyle: inLabelStyle
   } = props;
   const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
+  const isRtl = useRtl();
   const drawingArea = useDrawingArea();
   const labelStyle = React.useMemo(() => _extends({}, theme.typography.subtitle1, {
     color: 'inherit',
@@ -107,9 +107,6 @@ export function LegendPerItem(props) {
         return (totalHeight - legendHeight) / 2;
     }
   }, [position.vertical, padding.top, padding.bottom, totalHeight, legendHeight]);
-  if (hidden) {
-    return null;
-  }
   return /*#__PURE__*/_jsx(NoSsr, {
     children: /*#__PURE__*/_jsx(ChartsLegendRoot, {
       className: classes?.root,
@@ -121,10 +118,10 @@ export function LegendPerItem(props) {
         positionY
       }) => /*#__PURE__*/_jsxs("g", {
         className: classes?.series,
-        transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
+        transform: `translate(${gapX + (isRtl ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
         children: [/*#__PURE__*/_jsx("rect", {
           className: classes?.mark,
-          x: isRTL ? -itemMarkWidth : 0,
+          x: isRtl ? -itemMarkWidth : 0,
           y: -itemMarkHeight / 2,
           width: itemMarkWidth,
           height: itemMarkHeight,
@@ -132,7 +129,7 @@ export function LegendPerItem(props) {
         }), /*#__PURE__*/_jsx(ChartsText, {
           style: labelStyle,
           text: label,
-          x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
+          x: (isRtl ? -1 : 1) * (itemMarkWidth + markGap),
           y: 0
         })]
       }, id))

package/modern/ChartsLegend/PiecewiseColorLegend.js

@@ -3,9 +3,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useAxis } from './useAxis';
-import { LegendPerItem } from './LegendPerItem';
-import { notNull } from '../internals/notNull';
+import { useAxis } from "./useAxis.js";
+import { LegendPerItem } from "./LegendPerItem.js";
+import { notNull } from "../internals/notNull.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function defaultLabelFormatter(params) {
   if (params.min === null) {
@@ -93,11 +93,6 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * The default depends on the chart.
    */
   direction: PropTypes.oneOf(['column', 'row']).isRequired,
-  /**
-   * Set to true to hide the legend.
-   * @default false
-   */
-  hidden: PropTypes.bool,
   /**
    * Hide the first item of the legend, corresponding to the [-infinity, min] piece.
    * @default false

package/modern/ChartsLegend/index.js

@@ -1,6 +1,6 @@
-export * from './ChartsLegend';
-export * from './DefaultChartsLegend';
-export * from './ContinuousColorLegend';
-export * from './PiecewiseColorLegend';
-export * from './chartsLegendClasses';
-export * from './utils';
+export * from "./ChartsLegend.js";
+export * from "./DefaultChartsLegend.js";
+export * from "./ContinuousColorLegend.js";
+export * from "./PiecewiseColorLegend.js";
+export * from "./chartsLegendClasses.js";
+export * from "./utils.js";

package/modern/ChartsLegend/useAxis.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useCartesianContext } from '../context/CartesianProvider/useCartesianContext';
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useCartesianContext } from "../context/CartesianProvider/useCartesianContext.js";
 /**
  * Helper to select an axis definition according to its direction and id.
  */

package/modern/ChartsLegend/utils.js

@@ -1,7 +1,7 @@
-import getBarLegend from '../BarChart/legend';
-import getScatterLegend from '../ScatterChart/legend';
-import getLineLegend from '../LineChart/legend';
-import getPieLegend from '../PieChart/legend';
+import getBarLegend from "../BarChart/legend.js";
+import getScatterLegend from "../ScatterChart/legend.js";
+import getLineLegend from "../LineChart/legend.js";
+import getPieLegend from "../PieChart/legend.js";
 const legendGetter = {
   bar: getBarLegend,
   scatter: getScatterLegend,

package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useSeries } from '../hooks/useSeries';
-import { useSvgRef } from '../hooks';
-import { useCartesianContext } from '../context/CartesianProvider';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useSeries } from "../hooks/useSeries.js";
+import { useSvgRef } from "../hooks/index.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsOnAxisClickHandler(props) {
   const {

package/modern/ChartsOnAxisClickHandler/index.js

@@ -1 +1 @@
-export * from './ChartsOnAxisClickHandler';
+export * from "./ChartsOnAxisClickHandler.js";

package/modern/ChartsOverlay/ChartsLoadingOverlay.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledText = styled('text')(({
   theme

package/modern/ChartsOverlay/ChartsNoDataOverlay.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledText = styled('text')(({
   theme

package/modern/ChartsOverlay/ChartsOverlay.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
-import { useSeries } from '../hooks/useSeries';
-import { ChartsNoDataOverlay } from './ChartsNoDataOverlay';
+import { ChartsLoadingOverlay } from "./ChartsLoadingOverlay.js";
+import { useSeries } from "../hooks/useSeries.js";
+import { ChartsNoDataOverlay } from "./ChartsNoDataOverlay.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function useNoData() {
   const seriesPerType = useSeries();

package/modern/ChartsOverlay/index.js

@@ -1,3 +1,3 @@
-export { ChartsOverlay } from './ChartsOverlay';
-export { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
-export { ChartsNoDataOverlay } from './ChartsNoDataOverlay';
+export { ChartsOverlay } from "./ChartsOverlay.js";
+export { ChartsLoadingOverlay } from "./ChartsLoadingOverlay.js";
+export { ChartsNoDataOverlay } from "./ChartsNoDataOverlay.js";

package/modern/ChartsReferenceLine/ChartsReferenceLine.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { ChartsXReferenceLine } from './ChartsXReferenceLine';
-import { ChartsYReferenceLine } from './ChartsYReferenceLine';
+import { ChartsXReferenceLine } from "./ChartsXReferenceLine.js";
+import { ChartsYReferenceLine } from "./ChartsYReferenceLine.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsReferenceLine(props) {
   const {

package/modern/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import { useDrawingArea, useXScale } from '../hooks';
-import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../ChartsText';
-import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
-import { warnOnce } from '../internals/warning';
+import { useDrawingArea, useXScale } from "../hooks/index.js";
+import { ReferenceLineRoot } from "./common.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getReferenceLineUtilityClass } from "./chartsReferenceLineClasses.js";
+import { warnOnce } from "../internals/warning.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   top,

package/modern/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import { useDrawingArea, useYScale } from '../hooks';
-import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../ChartsText';
-import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
-import { warnOnce } from '../internals/warning';
+import { useDrawingArea, useYScale } from "../hooks/index.js";
+import { ReferenceLineRoot } from "./common.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getReferenceLineUtilityClass } from "./chartsReferenceLineClasses.js";
+import { warnOnce } from "../internals/warning.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   left,

package/modern/ChartsReferenceLine/common.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
-import { referenceLineClasses } from './chartsReferenceLineClasses';
+import { referenceLineClasses } from "./chartsReferenceLineClasses.js";
 export const ReferenceLineRoot = styled('g')(({
   theme
 }) => ({

package/modern/ChartsReferenceLine/index.js

@@ -1,2 +1,2 @@
-export * from './ChartsReferenceLine';
-export * from './chartsReferenceLineClasses';
+export * from "./ChartsReferenceLine.js";
+export * from "./chartsReferenceLineClasses.js";

package/{esm → modern/ChartsSurface}/ChartsSurface.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "title", "desc"];
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { useAxisEvents } from './hooks/useAxisEvents';
+import { useAxisEvents } from "../hooks/useAxisEvents.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',
@@ -14,7 +14,11 @@ const ChartChartsSurfaceStyles = styled('svg', {
   // For example, prevent page scroll & zoom.
   touchAction: 'none'
 }));
-const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
+const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiChartsSurface'
+  });
   const {
       children,
       width,

package/modern/ChartsSurface/index.js

@@ -0,0 +1 @@
+export * from "./ChartsSurface.js";

package/modern/ChartsText/ChartsText.js

@@ -4,7 +4,7 @@ const _excluded = ["x", "y", "style", "text", "ownerState"],
   _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { getWordsByLines } from '../internals/getWordsByLines';
+import { getWordsByLines } from "../internals/getWordsByLines.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Helper component to manage multiline text in SVG

package/modern/ChartsText/index.js

@@ -1 +1 @@
-export { ChartsText } from './ChartsText';
+export { ChartsText } from "./ChartsText.js";

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
-import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useColorProcessor } from '../context/PluginProvider/useColorProcessor';
-import { isCartesianSeriesType } from '../internals/isCartesian';
-import { useSeries } from '../hooks/useSeries';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { DefaultChartsAxisTooltipContent } from "./DefaultChartsAxisTooltipContent.js";
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { isCartesianSeriesType } from "../internals/isCartesian.js";
+import { useSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -19,7 +19,7 @@ function ChartsAxisTooltipContent(props) {
     sx,
     classes
   } = props;
-  const isXaxis = (axisData.x && axisData.x.index) !== undefined;
+  const isXaxis = axisData.x && axisData.x.index !== -1;
   const dataIndex = isXaxis ? axisData.x && axisData.x.index : axisData.y && axisData.y.index;
   const axisValue = isXaxis ? axisData.x && axisData.x.value : axisData.y && axisData.y.value;
   const {

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useColorProcessor } from '../context/PluginProvider/useColorProcessor';
-import { useSeries } from '../hooks/useSeries';
+import { DefaultChartsItemTooltipContent } from "./DefaultChartsItemTooltipContent.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { useSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.