@mui/x-charts 7.15.0 → 7.17.0

package/modern/SparkLineChart/index.js

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

package/modern/colorPalettes/index.js

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

package/modern/context/CartesianProvider/CartesianProvider.js

@@ -1,10 +1,12 @@
+'use client';
+
 import * as React from 'react';
-import { useDrawingArea } from '../../hooks/useDrawingArea';
-import { useSeries } from '../../hooks/useSeries';
-import { CartesianContext } from './CartesianContext';
-import { computeValue } from './computeValue';
-import { useXExtremumGetter } from '../PluginProvider/useXExtremumGetter';
-import { useYExtremumGetter } from '../PluginProvider';
+import { useDrawingArea } from "../../hooks/useDrawingArea.js";
+import { useSeries } from "../../hooks/useSeries.js";
+import { CartesianContext } from "./CartesianContext.js";
+import { computeValue } from "./computeValue.js";
+import { useXExtremumGetter } from "../PluginProvider/useXExtremumGetter.js";
+import { useYExtremumGetter } from "../PluginProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function CartesianProvider(props) {
   const {

package/modern/context/CartesianProvider/computeValue.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 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';
-import { getScale } from '../../internals/getScale';
-import { zoomScaleRange } from './zoom';
-import { getAxisExtremum } from './getAxisExtremum';
+import { isBandScaleConfig, isPointScaleConfig } from "../../models/axis.js";
+import { getColorScale, getOrdinalColorScale } from "../../internals/colorScale.js";
+import { getTickNumber } from "../../hooks/useTicks.js";
+import { getScale } from "../../internals/getScale.js";
+import { zoomScaleRange } from "./zoom.js";
+import { getAxisExtremum } from "./getAxisExtremum.js";
 const getRange = (drawingArea, axisDirection, isReverse) => {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return isReverse ? range.reverse() : range;

package/modern/context/CartesianProvider/defaultizeAxis.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../../constants';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../../constants/index.js";
 export const defaultizeAxis = (inAxis, axisName) => {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
   return [...(inAxis?.map((axis, index) => _extends({

package/modern/context/CartesianProvider/index.js

@@ -1,8 +1,8 @@
-import { computeValue } from './computeValue';
-export * from './CartesianProvider';
-export * from './CartesianContext';
-export * from './useCartesianContext';
-export * from './Cartesian.types';
+import { computeValue } from "./computeValue.js";
+export * from "./CartesianProvider.js";
+export * from "./CartesianContext.js";
+export * from "./useCartesianContext.js";
+export * from "./Cartesian.types.js";
 const cartesianProviderUtils = {
   computeValue
 };

package/modern/context/CartesianProvider/useCartesianContext.js

@@ -1,5 +1,7 @@
+'use client';
+
 import * as React from 'react';
-import { CartesianContext } from './CartesianContext';
+import { CartesianContext } from "./CartesianContext.js";
 export const useCartesianContext = () => {
   const {
     data

package/modern/context/DrawingProvider.js

@@ -1,7 +1,9 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useId from '@mui/utils/useId';
-import useChartDimensions from '../hooks/useChartDimensions';
+import useChartDimensions from "../hooks/useChartDimensions.js";
 
 /**
  * Defines the area in which it is possible to draw the charts.

package/modern/context/HighlightedProvider/HighlightedProvider.js

@@ -1,13 +1,15 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["highlighted", "faded"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useControlled from '@mui/utils/useControlled';
-import { HighlightedContext } from './HighlightedContext';
-import { createIsFaded } from './createIsFaded';
-import { createIsHighlighted } from './createIsHighlighted';
-import { useSeries } from '../../hooks/useSeries';
+import { HighlightedContext } from "./HighlightedContext.js";
+import { createIsFaded } from "./createIsFaded.js";
+import { createIsHighlighted } from "./createIsHighlighted.js";
+import { useSeries } from "../../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const mergeDeprecatedOptions = options => {
   const _ref = options ?? {},

package/modern/context/HighlightedProvider/index.js

@@ -1,4 +1,4 @@
-export * from './HighlightedProvider';
-export * from './HighlightedContext';
-export * from './useHighlighted';
-export * from './useItemHighlighted';
+export * from "./HighlightedProvider.js";
+export * from "./HighlightedContext.js";
+export * from "./useHighlighted.js";
+export * from "./useItemHighlighted.js";

package/modern/context/HighlightedProvider/useHighlighted.js

@@ -1,5 +1,7 @@
+'use client';
+
 import * as React from 'react';
-import { HighlightedContext } from './HighlightedContext';
+import { HighlightedContext } from "./HighlightedContext.js";
 
 /**
  * A hook to get the highlighted state of the chart.

package/modern/context/HighlightedProvider/useItemHighlighted.js

@@ -1,4 +1,6 @@
-import { useHighlighted } from './useHighlighted';
+'use client';
+
+import { useHighlighted } from "./useHighlighted.js";
 /**
  * A hook to check the highlighted state of the item.
  * This function already calculates that an item is not faded if it is highlighted.

package/modern/context/InteractionProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/context/PluginProvider/PluginProvider.js

@@ -1,6 +1,8 @@
+'use client';
+
 import * as React from 'react';
-import { PluginContext } from './PluginContext';
-import { mergePlugins } from './mergePlugins';
+import { PluginContext } from "./PluginContext.js";
+import { mergePlugins } from "./mergePlugins.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function PluginProvider(props) {
   const {

package/modern/context/PluginProvider/index.js

@@ -1,10 +1,10 @@
-export * from './PluginProvider';
-export * from './Plugin.types';
-export * from './PluginContext';
-export * from './ColorProcessor.types';
-export * from './SeriesFormatter.types';
-export * from './ExtremumGetter.types';
-export * from './useColorProcessor';
-export * from './useSeriesFormatter';
-export * from './useXExtremumGetter';
-export * from './useYExtremumGetter';
+export * from "./PluginProvider.js";
+export * from "./Plugin.types.js";
+export * from "./PluginContext.js";
+export * from "./ColorProcessor.types.js";
+export * from "./SeriesFormatter.types.js";
+export * from "./ExtremumGetter.types.js";
+export * from "./useColorProcessor.js";
+export * from "./useSeriesFormatter.js";
+export * from "./useXExtremumGetter.js";
+export * from "./useYExtremumGetter.js";

package/modern/context/PluginProvider/mergePlugins.js

@@ -1,7 +1,7 @@
-import { plugin as barPlugin } from '../../BarChart/plugin';
-import { plugin as scatterPlugin } from '../../ScatterChart/plugin';
-import { plugin as linePlugin } from '../../LineChart/plugin';
-import { plugin as piePlugin } from '../../PieChart/plugin';
+import { plugin as barPlugin } from "../../BarChart/plugin.js";
+import { plugin as scatterPlugin } from "../../ScatterChart/plugin.js";
+import { plugin as linePlugin } from "../../LineChart/plugin.js";
+import { plugin as piePlugin } from "../../PieChart/plugin.js";
 export const defaultPlugins = [barPlugin, scatterPlugin, linePlugin, piePlugin];
 export function mergePlugins(plugins) {
   const defaultizedPlugins = plugins ?? defaultPlugins;

package/modern/context/PluginProvider/useColorProcessor.js

@@ -1,5 +1,7 @@
+'use client';
+
 import * as React from 'react';
-import { PluginContext } from './PluginContext';
+import { PluginContext } from "./PluginContext.js";
 export function useColorProcessor(seriesType) {
   const {
     isInitialized,

package/modern/context/PluginProvider/useSeriesFormatter.js

@@ -1,5 +1,7 @@
+'use client';
+
 import * as React from 'react';
-import { PluginContext } from './PluginContext';
+import { PluginContext } from "./PluginContext.js";
 export function useSeriesFormatter(seriesType) {
   const {
     isInitialized,

package/modern/context/PluginProvider/useXExtremumGetter.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PluginContext } from './PluginContext';
+import { PluginContext } from "./PluginContext.js";
 export function useXExtremumGetter(seriesType) {
   const {
     isInitialized,

package/modern/context/PluginProvider/useYExtremumGetter.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PluginContext } from './PluginContext';
+import { PluginContext } from "./PluginContext.js";
 export function useYExtremumGetter(seriesType) {
   const {
     isInitialized,

package/modern/context/SeriesProvider/SeriesProvider.js

@@ -1,9 +1,11 @@
+'use client';
+
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
-import { blueberryTwilightPalette } from '../../colorPalettes';
-import { SeriesContext } from './SeriesContext';
-import { preprocessSeries } from './processSeries';
-import { useSeriesFormatter } from '../PluginProvider';
+import { blueberryTwilightPalette } from "../../colorPalettes/index.js";
+import { SeriesContext } from "./SeriesContext.js";
+import { preprocessSeries } from "./processSeries.js";
+import { useSeriesFormatter } from "../PluginProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function SeriesProvider(props) {
   const {

package/modern/context/SeriesProvider/index.js

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

package/modern/context/SeriesProvider/processSeries.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { defaultizeColor } from '../../internals/defaultizeColor';
+import { defaultizeColor } from "../../internals/defaultizeColor.js";
 /**
  * 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

package/modern/context/ZAxisContextProvider.js

@@ -1,7 +1,9 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { getColorScale, getOrdinalColorScale } from '../internals/colorScale';
+import { getColorScale, getOrdinalColorScale } from "../internals/colorScale.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ZAxisContext = /*#__PURE__*/React.createContext({
   zAxis: {},

package/modern/context/index.js

@@ -1,2 +1,2 @@
-export * from './HighlightedProvider';
-export { ZAxisContextProvider } from './ZAxisContextProvider';
+export * from "./HighlightedProvider/index.js";
+export { ZAxisContextProvider } from "./ZAxisContextProvider.js";

package/modern/hooks/index.js

@@ -1,7 +1,7 @@
-export * from './useDrawingArea';
-export * from './useChartId';
-export * from './useScale';
-export * from './useAxis';
-export * from './useColorScale';
-export * from './useSvgRef';
-export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from './useSeries';
+export * from "./useDrawingArea.js";
+export * from "./useChartId.js";
+export * from "./useScale.js";
+export * from "./useAxis.js";
+export * from "./useColorScale.js";
+export * from "./useSvgRef.js";
+export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from "./useSeries.js";

package/modern/hooks/useAxis.js

@@ -1,4 +1,6 @@
-import { useCartesianContext } from '../context/CartesianProvider';
+'use client';
+
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
 export function useXAxis(identifier) {
   const {
     xAxis,

package/modern/hooks/useAxisEvents.js

@@ -1,10 +1,12 @@
+'use client';
+
 import * as React from 'react';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { isBandScale } from '../internals/isBandScale';
-import { getSVGPoint } from '../internals/getSVGPoint';
-import { useSvgRef } from './useSvgRef';
-import { useDrawingArea } from './useDrawingArea';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { isBandScale } from "../internals/isBandScale.js";
+import { getSVGPoint } from "../internals/getSVGPoint.js";
+import { useSvgRef } from "./useSvgRef.js";
+import { useDrawingArea } from "./useDrawingArea.js";
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }

package/modern/hooks/useChartDimensions.js

@@ -1,6 +1,8 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { DEFAULT_MARGINS } from '../constants';
+import { DEFAULT_MARGINS } from "../constants/index.js";
 const useChartDimensions = (width, height, margin) => {
   const defaultizedMargin = _extends({}, DEFAULT_MARGINS, margin);
   const drawingArea = React.useMemo(() => ({

package/modern/hooks/useChartId.js

@@ -1,5 +1,7 @@
+'use client';
+
 import * as React from 'react';
-import { DrawingContext } from '../context/DrawingProvider';
+import { DrawingContext } from "../context/DrawingProvider.js";
 export function useChartId() {
   const {
     chartId

package/modern/hooks/useColorScale.js

@@ -1,6 +1,8 @@
+'use client';
+
 import * as React from 'react';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { ZAxisContext } from '../context/ZAxisContextProvider';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
 export function useXColorScale(identifier) {
   const {
     xAxis,

package/modern/hooks/useDrawingArea.js

@@ -1,5 +1,7 @@
+'use client';
+
 import * as React from 'react';
-import { DrawingContext } from '../context/DrawingProvider';
+import { DrawingContext } from "../context/DrawingProvider.js";
 export function useDrawingArea() {
   const {
     left,

package/modern/hooks/useInteractionItemProps.js

@@ -1,6 +1,8 @@
+'use client';
+
 import * as React from 'react';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useHighlighted } from '../context';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useHighlighted } from "../context/index.js";
 export const useInteractionItemProps = skip => {
   const {
     dispatch: dispatchInteraction

package/modern/hooks/useMounted.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 export function useMounted(defer = false) {

package/modern/hooks/useReducedMotion.js

@@ -1,4 +1,12 @@
+'use client';
+
 import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
+const handleMediaChange = e => {
+  Globals.assign({
+    // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
+    skipAnimation: e.matches || undefined
+  });
+};
 
 /**
  * Returns `boolean` or `null`, used to automatically
@@ -8,23 +16,18 @@ import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
  * The return value, post-effect, is the value of their preferred setting
  */
 export const useReducedMotion = () => {
-  // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13
+  // Taken from: https://github.com/pmndrs/react-spring/blob/fd65b605b85c3a24143c4ce9dd322fdfca9c66be/packages/shared/src/hooks/useReducedMotion.ts
 
   useIsomorphicLayoutEffect(() => {
-    if (!window.matchMedia) {
-      // skip animation in environments where `window.matchMedia` would not be available (i.e. test/jsdom)
-      Globals.assign({
-        skipAnimation: true
+    // Skip animation test/jsdom
+    const shouldSkipAnimation = !window?.matchMedia;
+    if (shouldSkipAnimation) {
+      handleMediaChange({
+        matches: true
       });
-      return () => {};
+      return undefined;
     }
     const mql = window.matchMedia('(prefers-reduced-motion)');
-    const handleMediaChange = event => {
-      Globals.assign({
-        // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
-        skipAnimation: event.matches || undefined
-      });
-    };
     handleMediaChange(mql);
 
     // MatchMedia is not fully supported in all environments, so we need to check if it exists before calling addEventListener

package/modern/hooks/useScale.js

@@ -1,5 +1,7 @@
-import { isBandScale } from '../internals/isBandScale';
-import { useXAxis, useYAxis } from './useAxis';
+'use client';
+
+import { isBandScale } from "../internals/isBandScale.js";
+import { useXAxis, useYAxis } from "./useAxis.js";
 
 /**
  * For a given scale return a function that map value to their position.

package/modern/hooks/useSeries.js

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

package/modern/hooks/useSvgRef.js

@@ -1,5 +1,7 @@
+'use client';
+
 import * as React from 'react';
-import { SvgContext } from '../context/DrawingProvider';
+import { SvgContext } from "../context/DrawingProvider.js";
 export function useSvgRef() {
   const {
     isInitialized,

package/modern/hooks/useTicks.js

@@ -1,6 +1,8 @@
+'use client';
+
 import * as React from 'react';
-import { isBandScale } from '../internals/isBandScale';
-import { isInfinity } from '../internals/isInfinity';
+import { isBandScale } from "../internals/isBandScale.js";
+import { isInfinity } from "../internals/isInfinity.js";
 export function getTickNumber(params) {
   const {
     tickMaxStep,

package/modern/index.js

@@ -1,33 +1,33 @@
 /**
- * @mui/x-charts v7.15.0
+ * @mui/x-charts v7.17.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export * from './constants';
-export * from './context';
-export * from './hooks';
-export * from './colorPalettes';
-export * from './models';
-export * from './ChartsClipPath';
-export * from './ChartsReferenceLine';
-export * from './ChartsAxis';
-export * from './ChartsXAxis';
-export * from './ChartsYAxis';
-export * from './ChartsGrid';
-export * from './ChartsText';
-export * from './ChartsTooltip';
-export * from './ChartsLegend';
-export * from './ChartsAxisHighlight';
-export * from './ChartsVoronoiHandler';
-export * from './ChartsOnAxisClickHandler';
-export * from './BarChart';
-export * from './LineChart';
-export * from './PieChart';
-export * from './ScatterChart';
-export * from './SparkLineChart';
-export * from './Gauge';
-export * from './ChartContainer';
-export * from './ChartsSurface';
-export * from './ResponsiveChartContainer';
+export * from "./constants/index.js";
+export * from "./context/index.js";
+export * from "./hooks/index.js";
+export * from "./colorPalettes/index.js";
+export * from "./models/index.js";
+export * from "./ChartsClipPath/index.js";
+export * from "./ChartsReferenceLine/index.js";
+export * from "./ChartsAxis/index.js";
+export * from "./ChartsXAxis/index.js";
+export * from "./ChartsYAxis/index.js";
+export * from "./ChartsGrid/index.js";
+export * from "./ChartsText/index.js";
+export * from "./ChartsTooltip/index.js";
+export * from "./ChartsLegend/index.js";
+export * from "./ChartsAxisHighlight/index.js";
+export * from "./ChartsVoronoiHandler/index.js";
+export * from "./ChartsOnAxisClickHandler/index.js";
+export * from "./BarChart/index.js";
+export * from "./LineChart/index.js";
+export * from "./PieChart/index.js";
+export * from "./ScatterChart/index.js";
+export * from "./SparkLineChart/index.js";
+export * from "./Gauge/index.js";
+export * from "./ChartContainer/index.js";
+export * from "./ChartsSurface/index.js";
+export * from "./ResponsiveChartContainer/index.js";

package/modern/internals/components/AxisSharedComponents.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
-import { axisClasses } from '../../ChartsAxis/axisClasses';
+import { axisClasses } from "../../ChartsAxis/axisClasses.js";
 export const AxisRoot = styled('g', {
   name: 'MuiChartsAxis',
   slot: 'Root',

package/modern/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { useCartesianContext } from '../../../context/CartesianProvider';
-import { DrawingContext } from '../../../context/DrawingProvider';
-import { useDrawingArea } from '../../../hooks';
-import ChartsPiecewiseGradient from './ChartsPiecewiseGradient';
-import ChartsContinuousGradient from './ChartsContinuousGradient';
+import { useCartesianContext } from "../../../context/CartesianProvider/index.js";
+import { DrawingContext } from "../../../context/DrawingProvider.js";
+import { useDrawingArea } from "../../../hooks/index.js";
+import ChartsPiecewiseGradient from "./ChartsPiecewiseGradient.js";
+import ChartsContinuousGradient from "./ChartsContinuousGradient.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function useChartGradient() {
   const {

package/modern/internals/components/ChartsAxesGradients/index.js

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

package/modern/internals/getWordsByLines.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { getStringSize } from './domUtils';
+import { getStringSize } from "./domUtils.js";
 export function getWordsByLines({
   style,
   needsComputation,