@mui/x-charts-pro 7.0.0-alpha.0

package/modern/context/CartesianProviderPro/CartesianProviderPro.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { useDrawingArea, useSeries, CartesianContext, cartesianProviderUtils, useXExtremumGetter, useYExtremumGetter } from '@mui/x-charts/internals';
+import { useZoom } from '../ZoomProvider/useZoom';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  computeValue
+} = cartesianProviderUtils;
+function CartesianContextProviderPro(props) {
+  const {
+    xAxis,
+    yAxis,
+    dataset,
+    children
+  } = props;
+  const formattedSeries = useSeries();
+  const drawingArea = useDrawingArea();
+  const {
+    zoomData
+  } = useZoom();
+  const xExtremumGetters = useXExtremumGetter();
+  const yExtremumGetters = useYExtremumGetter();
+  const xValues = React.useMemo(() => computeValue({
+    drawingArea,
+    formattedSeries,
+    axis: xAxis,
+    extremumGetters: xExtremumGetters,
+    dataset,
+    axisDirection: 'x',
+    zoomData
+  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, dataset, zoomData]);
+  const yValues = React.useMemo(() => computeValue({
+    drawingArea,
+    formattedSeries,
+    axis: yAxis,
+    extremumGetters: yExtremumGetters,
+    dataset,
+    axisDirection: 'y',
+    zoomData
+  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, dataset, zoomData]);
+  const value = React.useMemo(() => ({
+    isInitialized: true,
+    data: {
+      xAxis: xValues.axis,
+      yAxis: yValues.axis,
+      xAxisIds: xValues.axisIds,
+      yAxisIds: yValues.axisIds
+    }
+  }), [xValues, yValues]);
+  return /*#__PURE__*/_jsx(CartesianContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+export { CartesianContextProviderPro };

package/modern/context/CartesianProviderPro/index.js

@@ -0,0 +1 @@
+export * from './CartesianProviderPro';

package/modern/context/ZoomProvider/Zoom.types.js

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

package/modern/context/ZoomProvider/ZoomContext.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export const ZoomContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    isZoomEnabled: false,
+    isPanEnabled: false,
+    options: {},
+    zoomData: [],
+    setZoomData: () => {},
+    isInteracting: false,
+    setIsInteracting: () => {}
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  ZoomContext.displayName = 'ZoomContext';
+}

package/modern/context/ZoomProvider/ZoomProvider.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import useControlled from '@mui/utils/useControlled';
+import { ZoomContext } from './ZoomContext';
+import { defaultizeZoom } from './defaultizeZoom';
+import { initializeZoomData } from './initializeZoomData';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ZoomProvider({
+  children,
+  xAxis,
+  yAxis,
+  zoom,
+  onZoomChange
+}) {
+  const [isInteracting, setIsInteracting] = React.useState(false);
+  const options = React.useMemo(() => [...defaultizeZoom(xAxis, 'x'), ...defaultizeZoom(yAxis, 'y')].reduce((acc, v) => {
+    acc[v.axisId] = v;
+    return acc;
+  }, {}), [xAxis, yAxis]);
+
+  // Default zoom data is initialized only once when uncontrolled. If the user changes the options
+  // after the initial render, the zoom data will not be updated until the next zoom interaction.
+  // This is required to avoid warnings about controlled/uncontrolled components.
+  const defaultZoomData = React.useRef(initializeZoomData(options));
+  const [zoomData, setZoomData] = useControlled({
+    controlled: zoom,
+    default: defaultZoomData.current,
+    name: 'ZoomProvider',
+    state: 'zoom'
+  });
+  const setZoomDataCallback = React.useCallback(newZoomData => {
+    setZoomData(newZoomData);
+    onZoomChange?.(newZoomData);
+  }, [setZoomData, onZoomChange]);
+  const value = React.useMemo(() => ({
+    isInitialized: true,
+    data: {
+      isZoomEnabled: Object.keys(options).length > 0,
+      isPanEnabled: isPanEnabled(options),
+      options,
+      zoomData,
+      setZoomData: setZoomDataCallback,
+      isInteracting,
+      setIsInteracting
+    }
+  }), [zoomData, isInteracting, setIsInteracting, options, setZoomDataCallback]);
+  return /*#__PURE__*/_jsx(ZoomContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+function isPanEnabled(options) {
+  return Object.values(options).some(v => v.panning) || false;
+}

package/modern/context/ZoomProvider/ZoomSetup.js

@@ -0,0 +1,16 @@
+import { useSetupPan } from './useSetupPan';
+import { useSetupZoom } from './useSetupZoom';
+
+/**
+ * Sets up the zoom functionality if using composition or a custom chart.
+ *
+ * Simply add this component at the same level as the chart component to enable zooming and panning.
+ *
+ * See: [Composition](https://mui.com/x/react-charts/composition/)
+ */
+function ZoomSetup() {
+  useSetupZoom();
+  useSetupPan();
+  return null;
+}
+export { ZoomSetup };

package/modern/context/ZoomProvider/defaultizeZoom.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { isDefined } from '@mui/x-charts/internals';
+const defaultZoomOptions = {
+  minStart: 0,
+  maxEnd: 100,
+  step: 5,
+  minSpan: 10,
+  maxSpan: 100,
+  panning: true
+};
+export const defaultizeZoom = (axis, axisDirection) => {
+  if (!axis) {
+    return [];
+  }
+  const defaultized = axis.map(v => {
+    if (!v.zoom) {
+      return undefined;
+    }
+    if (v.zoom === true) {
+      return _extends({
+        axisId: v.id,
+        axisDirection
+      }, defaultZoomOptions);
+    }
+    return _extends({
+      axisId: v.id,
+      axisDirection
+    }, defaultZoomOptions, v.zoom);
+  }).filter(isDefined);
+  return defaultized;
+};

package/modern/context/ZoomProvider/index.js

@@ -0,0 +1,3 @@
+export * from './ZoomContext';
+export * from './ZoomProvider';
+export * from './Zoom.types';

package/modern/context/ZoomProvider/initializeZoomData.js

@@ -0,0 +1,13 @@
+// This function is used to initialize the zoom data when it is not provided by the user.
+// It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
+export const initializeZoomData = options => {
+  return Object.values(options).map(({
+    axisId,
+    minStart: start,
+    maxEnd: end
+  }) => ({
+    axisId,
+    start,
+    end
+  }));
+};

package/modern/context/ZoomProvider/useSetupPan.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useDrawingArea, useSvgRef } from '@mui/x-charts/hooks';
+import { getSVGPoint } from '@mui/x-charts/internals';
+import { useZoom } from './useZoom';
+export const useSetupPan = () => {
+  const {
+    zoomData,
+    setZoomData,
+    setIsInteracting,
+    isPanEnabled,
+    options
+  } = useZoom();
+  const drawingArea = useDrawingArea();
+  const svgRef = useSvgRef();
+  const isDraggingRef = React.useRef(false);
+  const touchStartRef = React.useRef(null);
+  const eventCacheRef = React.useRef([]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isPanEnabled) {
+      return () => {};
+    }
+    const handlePan = event => {
+      if (element === null || !isDraggingRef.current || eventCacheRef.current.length > 1) {
+        return;
+      }
+      if (touchStartRef.current == null) {
+        return;
+      }
+      const point = getSVGPoint(element, event);
+      const movementX = point.x - touchStartRef.current.x;
+      const movementY = (point.y - touchStartRef.current.y) * -1;
+      const newZoomData = touchStartRef.current.zoomData.map(zoom => {
+        const option = options[zoom.axisId];
+        if (!option || !option.panning) {
+          return zoom;
+        }
+        const min = zoom.start;
+        const max = zoom.end;
+        const span = max - min;
+        const MIN_PERCENT = option.minStart;
+        const MAX_PERCENT = option.maxEnd;
+        const movement = option.axisDirection === 'x' ? movementX : movementY;
+        const dimension = option.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
+        let newMinPercent = min - movement / dimension * span;
+        let newMaxPercent = max - movement / dimension * span;
+        if (newMinPercent < MIN_PERCENT) {
+          newMinPercent = MIN_PERCENT;
+          newMaxPercent = newMinPercent + span;
+        }
+        if (newMaxPercent > MAX_PERCENT) {
+          newMaxPercent = MAX_PERCENT;
+          newMinPercent = newMaxPercent - span;
+        }
+        if (newMinPercent < MIN_PERCENT || newMaxPercent > MAX_PERCENT || span < option.minSpan || span > option.maxSpan) {
+          return zoom;
+        }
+        return _extends({}, zoom, {
+          start: newMinPercent,
+          end: newMaxPercent
+        });
+      });
+      setZoomData(newZoomData);
+    };
+    const handleDown = event => {
+      eventCacheRef.current.push(event);
+      const point = getSVGPoint(element, event);
+      if (!drawingArea.isPointInside(point)) {
+        return;
+      }
+
+      // If there is only one pointer, prevent selecting text
+      if (eventCacheRef.current.length === 1) {
+        event.preventDefault();
+      }
+      isDraggingRef.current = true;
+      setIsInteracting(true);
+      touchStartRef.current = {
+        x: point.x,
+        y: point.y,
+        zoomData
+      };
+    };
+    const handleUp = event => {
+      eventCacheRef.current.splice(eventCacheRef.current.findIndex(e => e.pointerId === event.pointerId), 1);
+      setIsInteracting(false);
+      isDraggingRef.current = false;
+      touchStartRef.current = null;
+    };
+    element.addEventListener('pointerdown', handleDown);
+    document.addEventListener('pointermove', handlePan);
+    document.addEventListener('pointerup', handleUp);
+    document.addEventListener('pointercancel', handleUp);
+    document.addEventListener('pointerleave', handleUp);
+    return () => {
+      element.removeEventListener('pointerdown', handleDown);
+      document.removeEventListener('pointermove', handlePan);
+      document.removeEventListener('pointerup', handleUp);
+      document.removeEventListener('pointercancel', handleUp);
+      document.removeEventListener('pointerleave', handleUp);
+    };
+  }, [drawingArea, svgRef, isDraggingRef, setIsInteracting, zoomData, setZoomData, isPanEnabled, options]);
+};

package/modern/context/ZoomProvider/useSetupZoom.js

@@ -0,0 +1,272 @@
+import * as React from 'react';
+import { useDrawingArea, useSvgRef } from '@mui/x-charts/hooks';
+import { getSVGPoint } from '@mui/x-charts/internals';
+import { useZoom } from './useZoom';
+/**
+ * Helper to get the range (in percents of a reference range) corresponding to a given scale.
+ * @param centerRatio {number} The ratio of the point that should not move between the previous and next range.
+ * @param scaleRatio {number} The target scale ratio.
+ * @returns The range to display.
+ */
+const zoomAtPoint = (centerRatio, scaleRatio, currentZoomData, options) => {
+  const MIN_RANGE = options.minStart;
+  const MAX_RANGE = options.maxEnd;
+  const MIN_ALLOWED_SPAN = options.minSpan;
+  const minRange = currentZoomData.start;
+  const maxRange = currentZoomData.end;
+  const point = minRange + centerRatio * (maxRange - minRange);
+  let newMinRange = (minRange + point * (scaleRatio - 1)) / scaleRatio;
+  let newMaxRange = (maxRange + point * (scaleRatio - 1)) / scaleRatio;
+  let minSpillover = 0;
+  let maxSpillover = 0;
+  if (newMinRange < MIN_RANGE) {
+    minSpillover = Math.abs(newMinRange);
+    newMinRange = MIN_RANGE;
+  }
+  if (newMaxRange > MAX_RANGE) {
+    maxSpillover = Math.abs(newMaxRange - MAX_RANGE);
+    newMaxRange = MAX_RANGE;
+  }
+  if (minSpillover > 0 && maxSpillover > 0) {
+    return [MIN_RANGE, MAX_RANGE];
+  }
+  newMaxRange += minSpillover;
+  newMinRange -= maxSpillover;
+  newMinRange = Math.min(MAX_RANGE - MIN_ALLOWED_SPAN, Math.max(MIN_RANGE, newMinRange));
+  newMaxRange = Math.max(MIN_ALLOWED_SPAN, Math.min(MAX_RANGE, newMaxRange));
+  return [newMinRange, newMaxRange];
+};
+export const useSetupZoom = () => {
+  const {
+    setZoomData,
+    isZoomEnabled,
+    options,
+    setIsInteracting
+  } = useZoom();
+  const drawingArea = useDrawingArea();
+  const svgRef = useSvgRef();
+  const eventCacheRef = React.useRef([]);
+  const eventPrevDiff = React.useRef(0);
+  const interactionTimeoutRef = React.useRef(undefined);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isZoomEnabled) {
+      return () => {};
+    }
+    const wheelHandler = event => {
+      if (element === null) {
+        return;
+      }
+      const point = getSVGPoint(element, event);
+      if (!drawingArea.isPointInside(point)) {
+        return;
+      }
+      event.preventDefault();
+      if (interactionTimeoutRef.current) {
+        clearTimeout(interactionTimeoutRef.current);
+      }
+      setIsInteracting(true);
+      // Debounce transition to `isInteractive=false`.
+      // Useful because wheel events don't have an "end" event.
+      interactionTimeoutRef.current = window.setTimeout(() => {
+        setIsInteracting(false);
+      }, 166);
+      setZoomData(prevZoomData => {
+        return prevZoomData.map(zoom => {
+          const option = options[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const {
+            scaleRatio,
+            isZoomIn
+          } = getWheelScaleRatio(event, option.step);
+          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
+          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: newMinRange,
+            end: newMaxRange
+          };
+        });
+      });
+    };
+    function pointerDownHandler(event) {
+      eventCacheRef.current.push(event);
+      setIsInteracting(true);
+    }
+    function pointerMoveHandler(event) {
+      if (element === null) {
+        return;
+      }
+      const index = eventCacheRef.current.findIndex(cachedEv => cachedEv.pointerId === event.pointerId);
+      eventCacheRef.current[index] = event;
+
+      // Not a pinch gesture
+      if (eventCacheRef.current.length !== 2) {
+        return;
+      }
+      const firstEvent = eventCacheRef.current[0];
+      const curDiff = getDiff(eventCacheRef.current);
+      setZoomData(prevZoomData => {
+        const newZoomData = prevZoomData.map(zoom => {
+          const option = options[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          const {
+            scaleRatio,
+            isZoomIn
+          } = getPinchScaleRatio(curDiff, eventPrevDiff.current, option.step);
+
+          // If the scale ratio is 0, it means the pinch gesture is not valid.
+          if (scaleRatio === 0) {
+            return zoom;
+          }
+          const point = getSVGPoint(element, firstEvent);
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
+          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: newMinRange,
+            end: newMaxRange
+          };
+        });
+        eventPrevDiff.current = curDiff;
+        return newZoomData;
+      });
+    }
+    function pointerUpHandler(event) {
+      eventCacheRef.current.splice(eventCacheRef.current.findIndex(e => e.pointerId === event.pointerId), 1);
+      if (eventCacheRef.current.length < 2) {
+        eventPrevDiff.current = 0;
+      }
+      if (event.type === 'pointerup' || event.type === 'pointercancel') {
+        setIsInteracting(false);
+      }
+    }
+    element.addEventListener('wheel', wheelHandler);
+    element.addEventListener('pointerdown', pointerDownHandler);
+    element.addEventListener('pointermove', pointerMoveHandler);
+    element.addEventListener('pointerup', pointerUpHandler);
+    element.addEventListener('pointercancel', pointerUpHandler);
+    element.addEventListener('pointerout', pointerUpHandler);
+    element.addEventListener('pointerleave', pointerUpHandler);
+
+    // Prevent zooming the entire page on touch devices
+    element.addEventListener('touchstart', preventDefault);
+    element.addEventListener('touchmove', preventDefault);
+    return () => {
+      element.removeEventListener('wheel', wheelHandler);
+      element.removeEventListener('pointerdown', pointerDownHandler);
+      element.removeEventListener('pointermove', pointerMoveHandler);
+      element.removeEventListener('pointerup', pointerUpHandler);
+      element.removeEventListener('pointercancel', pointerUpHandler);
+      element.removeEventListener('pointerout', pointerUpHandler);
+      element.removeEventListener('pointerleave', pointerUpHandler);
+      element.removeEventListener('touchstart', preventDefault);
+      element.removeEventListener('touchmove', preventDefault);
+      if (interactionTimeoutRef.current) {
+        clearTimeout(interactionTimeoutRef.current);
+      }
+    };
+  }, [svgRef, setZoomData, drawingArea, isZoomEnabled, options, setIsInteracting]);
+};
+
+/**
+ * Checks if the new span is valid.
+ */
+function isSpanValid(minRange, maxRange, isZoomIn, option) {
+  const newSpanPercent = maxRange - minRange;
+  if (isZoomIn && newSpanPercent < option.minSpan || !isZoomIn && newSpanPercent > option.maxSpan) {
+    return false;
+  }
+  if (minRange < option.minStart || maxRange > option.maxEnd) {
+    return false;
+  }
+  return true;
+}
+function getMultiplier(event) {
+  const ctrlMultiplier = event.ctrlKey ? 3 : 1;
+
+  // DeltaMode: 0 is pixel, 1 is line, 2 is page
+  // This is defined by the browser.
+  if (event.deltaMode === 1) {
+    return 1 * ctrlMultiplier;
+  }
+  if (event.deltaMode) {
+    return 10 * ctrlMultiplier;
+  }
+  return 0.2 * ctrlMultiplier;
+}
+
+/**
+ * Get the scale ratio and if it's a zoom in or out from a wheel event.
+ */
+function getWheelScaleRatio(event, step) {
+  const deltaY = -event.deltaY;
+  const multiplier = getMultiplier(event);
+  const scaledStep = step * multiplier * deltaY / 1000;
+  // Clamp the scale ratio between 0.1 and 1.9 so that the zoom is not too big or too small.
+  const scaleRatio = Math.min(Math.max(1 + scaledStep, 0.1), 1.9);
+  const isZoomIn = deltaY > 0;
+  return {
+    scaleRatio,
+    isZoomIn
+  };
+}
+
+/**
+ * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
+ */
+function getPinchScaleRatio(curDiff, prevDiff, step) {
+  const scaledStep = step / 1000;
+  let scaleRatio = 0;
+  let isZoomIn = false;
+  const hasMoved = prevDiff > 0;
+  if (hasMoved && curDiff > prevDiff) {
+    // The distance between the two pointers has increased
+    scaleRatio = 1 + scaledStep;
+    isZoomIn = true;
+  }
+  if (hasMoved && curDiff < prevDiff) {
+    // The distance between the two pointers has decreased
+    scaleRatio = 1 - scaledStep;
+    isZoomIn = false;
+  }
+  return {
+    scaleRatio,
+    isZoomIn
+  };
+}
+function getDiff(eventCache) {
+  const [firstEvent, secondEvent] = eventCache;
+  return Math.hypot(firstEvent.pageX - secondEvent.pageX, firstEvent.pageY - secondEvent.pageY);
+}
+
+/**
+ * Get the ratio of the point in the horizontal center of the area.
+ */
+function getHorizontalCenterRatio(point, area) {
+  const {
+    left,
+    width
+  } = area;
+  return (point.x - left) / width;
+}
+function preventDefault(event) {
+  event.preventDefault();
+}
+function getVerticalCenterRatio(point, area) {
+  const {
+    top,
+    height
+  } = area;
+  return (point.y - top) / height * -1 + 1;
+}

package/modern/context/ZoomProvider/useZoom.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ZoomContext } from './ZoomContext';
+/**
+ * Get access to the zoom state.
+ *
+ * @returns {ZoomState} The zoom state.
+ */
+export function useZoom() {
+  const {
+    data,
+    isInitialized
+  } = React.useContext(ZoomContext);
+  if (!isInitialized) {
+    throw new Error(['MUI X: Could not find the zoom context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  return data;
+}

package/modern/context/index.js

@@ -0,0 +1,5 @@
+// # Zoom & Pan
+
+export * from './ZoomProvider/useZoom';
+export * from './ZoomProvider/ZoomSetup';
+export {};

package/modern/hooks/index.js

@@ -0,0 +1 @@
+export { useHeatmapSeries as unstable_useHeatmapSeries } from './useSeries';

package/modern/hooks/useSeries.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useSeries } from '@mui/x-charts/internals';
+
+/**
+ * Get access to the internal state of heatmap series.
+ * The returned object contains:
+ * - series: a mapping from ids to series attributes.
+ * - seriesOrder: the array of series ids.
+ * @returns { series: Record<SeriesId, DefaultizedHeatmapSeriesType>; seriesOrder: SeriesId[]; } | undefined heatmapSeries
+ */
+export function useHeatmapSeries() {
+  const series = useSeries();
+  return React.useMemo(() => series.heatmap, [series.heatmap]);
+}

package/modern/index.js

@@ -0,0 +1,45 @@
+/**
+ * @mui/x-charts-pro v7.0.0-alpha.0
+ *
+ * @license MUI X Commercial
+ * This source code is licensed under the commercial license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './typeOverloads/modules';
+
+// exports from MIT package
+export * from '@mui/x-charts/constants';
+export * from '@mui/x-charts/context';
+export * from '@mui/x-charts/hooks';
+export * from '@mui/x-charts/colorPalettes';
+export * from '@mui/x-charts/models';
+export * from '@mui/x-charts/ChartsClipPath';
+export * from '@mui/x-charts/ChartsReferenceLine';
+export * from '@mui/x-charts/ChartsAxis';
+export * from '@mui/x-charts/ChartsXAxis';
+export * from '@mui/x-charts/ChartsYAxis';
+export * from '@mui/x-charts/ChartsGrid';
+export * from '@mui/x-charts/ChartsText';
+export * from '@mui/x-charts/ChartsTooltip';
+export * from '@mui/x-charts/ChartsLegend';
+export * from '@mui/x-charts/ChartsAxisHighlight';
+export * from '@mui/x-charts/ChartsVoronoiHandler';
+export * from '@mui/x-charts/ChartsOnAxisClickHandler';
+export * from '@mui/x-charts/BarChart';
+export * from '@mui/x-charts/LineChart';
+export * from '@mui/x-charts/PieChart';
+export * from '@mui/x-charts/ScatterChart';
+export * from '@mui/x-charts/SparkLineChart';
+export * from '@mui/x-charts/Gauge';
+export * from '@mui/x-charts/ChartsSurface';
+
+// Pro components
+export * from './Heatmap';
+export * from './ResponsiveChartContainerPro';
+export * from './ChartContainerPro';
+export * from './ScatterChartPro';
+export * from './BarChartPro';
+export * from './LineChartPro';
+
+// Pro context
+export * from './context';

package/modern/internals/utils/releaseInfo.js

@@ -0,0 +1,13 @@
+import { ponyfillGlobal } from '@mui/utils';
+export const getReleaseInfo = () => {
+  const releaseInfo = "MTcyMzE1NDQwMDAwMA==";
+  if (process.env.NODE_ENV !== 'production') {
+    // A simple hack to set the value in the test environment (has no build step).
+    // eslint-disable-next-line no-useless-concat
+    if (releaseInfo === '__RELEASE' + '_INFO__') {
+      // eslint-disable-next-line no-underscore-dangle
+      return ponyfillGlobal.__MUI_RELEASE_INFO__;
+    }
+  }
+  return releaseInfo;
+};

package/modern/models/index.js

@@ -0,0 +1 @@
+export * from './seriesType';