@mui/x-charts 7.14.0 → 7.16.0

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,4 @@
-import { useCartesianContext } from '../context/CartesianProvider';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
 export function useXAxis(identifier) {
   const {
     xAxis,

package/modern/hooks/useAxisEvents.js

@@ -1,10 +1,10 @@
 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;
 }
@@ -44,7 +44,8 @@ export const useAxisEvents = disableAxisListener => {
         const value = scale.invert(mouseValue);
         if (axisData === undefined) {
           return {
-            value
+            value,
+            index: -1
           };
         }
         const valueAsNumber = getAsANumber(value);

package/modern/hooks/useChartDimensions.js

@@ -1,6 +1,6 @@
 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,5 @@
 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,6 @@
 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,5 @@
 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,6 @@
 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/useReducedMotion.js

@@ -1,4 +1,10 @@
 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 +14,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,5 @@
-import { isBandScale } from '../internals/isBandScale';
-import { useXAxis, useYAxis } from './useAxis';
+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,5 @@
 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,5 @@
 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,6 @@
 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.14.0
+ * @mui/x-charts v7.16.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,

package/modern/internals/index.js

@@ -1,40 +1,41 @@
 // Components
-export * from './components/ChartsAxesGradients';
-export * from '../ResponsiveChartContainer/useChartContainerDimensions';
-export * from '../ResponsiveChartContainer/ResizableContainer';
+export * from "./components/ChartsAxesGradients/index.js";
+export * from "../ResponsiveChartContainer/useChartContainerDimensions.js";
+export * from "../ResponsiveChartContainer/ResizableContainer.js";
 
 // hooks
-export { useReducedMotion } from '../hooks/useReducedMotion';
-export { useSeries } from '../hooks/useSeries';
-export { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-export { useDrawingArea } from '../hooks/useDrawingArea';
-export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
-export { useLineChartProps } from '../LineChart/useLineChartProps';
-export { useBarChartProps } from '../BarChart/useBarChartProps';
-export { useResponsiveChartContainerProps } from '../ResponsiveChartContainer/useResponsiveChartContainerProps';
-export { useChartContainerProps } from '../ChartContainer/useChartContainerProps';
+export { useReducedMotion } from "../hooks/useReducedMotion.js";
+export { useSeries } from "../hooks/useSeries.js";
+export { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+export { useDrawingArea } from "../hooks/useDrawingArea.js";
+export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
+export { useLineChartProps } from "../LineChart/useLineChartProps.js";
+export { useBarChartProps } from "../BarChart/useBarChartProps.js";
+export { useResponsiveChartContainerProps } from "../ResponsiveChartContainer/useResponsiveChartContainerProps.js";
+export { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
 
 // utils
-export * from './defaultizeValueFormatter';
-export * from './configInit';
-export * from './getLabel';
-export * from './getSVGPoint';
-export * from './isDefined';
-export { unstable_cleanupDOM } from './domUtils';
+export * from "./defaultizeValueFormatter.js";
+export * from "./configInit.js";
+export * from "./getLabel.js";
+export * from "./getSVGPoint.js";
+export * from "./isDefined.js";
+export { unstable_cleanupDOM } from "./domUtils.js";
+export * from "./getScale.js";
 
 // contexts
 
-export * from '../context/CartesianProvider';
-export * from '../context/DrawingProvider';
-export * from '../context/InteractionProvider';
-export * from '../context/SeriesProvider';
-export * from '../context/ZAxisContextProvider';
-export * from '../context/PluginProvider';
-export { getAxisExtremum } from '../context/CartesianProvider/getAxisExtremum';
+export * from "../context/CartesianProvider/index.js";
+export * from "../context/DrawingProvider.js";
+export * from "../context/InteractionProvider.js";
+export * from "../context/SeriesProvider/index.js";
+export * from "../context/ZAxisContextProvider.js";
+export * from "../context/PluginProvider/index.js";
+export { getAxisExtremum } from "../context/CartesianProvider/getAxisExtremum.js";
 
 // series configuration
-export * from '../models/seriesType/config';
-export * from '../models/seriesType/common';
-export * from '../models/helpers';
-export * from '../models/z-axis';
-export * from '../models/axis';
+export * from "../models/seriesType/config.js";
+export * from "../models/seriesType/common.js";
+export * from "../models/helpers.js";
+export * from "../models/z-axis.js";
+export * from "../models/axis.js";

package/modern/internals/isCartesian.js

@@ -1,4 +1,4 @@
-import { cartesianSeriesTypes } from './configInit';
+import { cartesianSeriesTypes } from "./configInit.js";
 export function isCartesianSeriesType(seriesType) {
   return cartesianSeriesTypes.getTypes().has(seriesType);
 }

package/modern/internals/useStringInterpolator.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
+function usePrevious(value) {
+  const ref = React.useRef({
+    currentPath: value,
+    previousPath: undefined
+  });
+  if (ref.current.currentPath !== value) {
+    ref.current = {
+      currentPath: value,
+      previousPath: ref.current.currentPath
+    };
+  }
+  return ref.current;
+}
+export const useStringInterpolator = path => {
+  const memoryRef = usePrevious(path);
+  const interpolator = React.useMemo(() => memoryRef.previousPath ? interpolateString(memoryRef.previousPath, memoryRef.currentPath) : () => memoryRef.currentPath, [memoryRef.currentPath, memoryRef.previousPath]);
+  return interpolator;
+};

package/modern/models/index.js

@@ -1,4 +1,6 @@
-export * from './seriesType';
-export * from './layout';
-export * from './stacking';
+export * from "./seriesType/index.js";
+export * from "./layout.js";
+export * from "./stacking.js";
+
+// Utils shared across the X packages
 export {};

package/modern/models/seriesType/index.js

@@ -2,10 +2,10 @@
 
 // item identifier
 
-export * from './line';
-export * from './bar';
-export * from './scatter';
-export * from './pie';
+export * from "./line.js";
+export * from "./bar.js";
+export * from "./scatter.js";
+export * from "./pie.js";
 // Helpers
 
 export function isDefaultizedBarSeries(series) {

package/modern/themeAugmentation/index.js

@@ -1,3 +0,0 @@
-export * from './overrides';
-export * from './props';
-export * from './components';