@mui/x-charts-pro 8.27.0 → 8.27.4

package/esm/{ChartZoomSlider/internals/ChartAxisZoomSlider.d.ts → ChartsZoomSlider/internals/ChartsAxisZoomSlider.d.ts}

@@ -1,5 +1,5 @@
 import { type AxisId } from '@mui/x-charts/internals';
-interface ChartZoomSliderProps {
+interface ChartsZoomSliderProps {
   /**
    * The ID of the axis this overview refers to.
    */
@@ -13,8 +13,8 @@ interface ChartZoomSliderProps {
  * Renders the zoom slider for a specific axis.
  * @internal
  */
-export declare function ChartAxisZoomSlider({
+export declare function ChartsAxisZoomSlider({
   axisDirection,
   axisId
-}: ChartZoomSliderProps): import("react/jsx-runtime").JSX.Element | null;
+}: ChartsZoomSliderProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/esm/{ChartZoomSlider/internals/ChartAxisZoomSlider.js → ChartsZoomSlider/internals/ChartsAxisZoomSlider.js}

@@ -3,17 +3,17 @@
 import * as React from 'react';
 import { DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP, selectorChartAxisZoomOptionsLookup, useDrawingArea, useStore, ZOOM_SLIDER_MARGIN, ZOOM_SLIDER_PREVIEW_SIZE } from '@mui/x-charts/internals';
 import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
-import { ChartAxisZoomSliderPreview } from "./ChartAxisZoomSliderPreview.js";
+import { ChartsAxisZoomSliderPreview } from "./ChartsAxisZoomSliderPreview.js";
 import { ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_SIZE, ZOOM_SLIDER_TRACK_SIZE } from "./constants.js";
 import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
-import { ChartAxisZoomSliderTrack } from "./ChartAxisZoomSliderTrack.js";
-import { ChartAxisZoomSliderActiveTrack } from "./ChartAxisZoomSliderActiveTrack.js";
+import { ChartsAxisZoomSliderTrack } from "./ChartsAxisZoomSliderTrack.js";
+import { ChartsAxisZoomSliderActiveTrack } from "./ChartsAxisZoomSliderActiveTrack.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Renders the zoom slider for a specific axis.
  * @internal
  */
-export function ChartAxisZoomSlider({
+export function ChartsAxisZoomSlider({
   axisDirection,
   axisId
 }) {
@@ -62,7 +62,7 @@ export function ChartAxisZoomSlider({
     tooltipConditions = axis.zoom?.slider?.showTooltip ?? DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP;
   }
   const backgroundRectOffset = (sliderSize - ZOOM_SLIDER_TRACK_SIZE) / 2;
-  const track = showPreview ? /*#__PURE__*/_jsx(ChartAxisZoomSliderPreview, {
+  const track = showPreview ? /*#__PURE__*/_jsx(ChartsAxisZoomSliderPreview, {
     axisId: axisId,
     axisDirection: axisDirection,
     reverse: reverse,
@@ -70,7 +70,7 @@ export function ChartAxisZoomSlider({
     y: 0,
     height: axisDirection === 'x' ? ZOOM_SLIDER_PREVIEW_SIZE : drawingArea.height,
     width: axisDirection === 'x' ? drawingArea.width : ZOOM_SLIDER_PREVIEW_SIZE
-  }) : /*#__PURE__*/_jsx(ChartAxisZoomSliderTrack, {
+  }) : /*#__PURE__*/_jsx(ChartsAxisZoomSliderTrack, {
     x: axisDirection === 'x' ? 0 : backgroundRectOffset,
     y: axisDirection === 'x' ? backgroundRectOffset : 0,
     height: axisDirection === 'x' ? ZOOM_SLIDER_TRACK_SIZE : drawingArea.height,
@@ -89,7 +89,7 @@ export function ChartAxisZoomSlider({
     style: {
       touchAction: 'none'
     },
-    children: [track, /*#__PURE__*/_jsx(ChartAxisZoomSliderActiveTrack, {
+    children: [track, /*#__PURE__*/_jsx(ChartsAxisZoomSliderActiveTrack, {
       zoomData: zoomData,
       axisId: axisId,
       axisPosition: axisPosition,

package/esm/{ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.d.ts → ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.d.ts}

@@ -1,5 +1,5 @@
 import { type AxisId, type ZoomData } from '@mui/x-charts/internals';
-export interface ChartAxisZoomSliderActiveTrackProps {
+export interface ChartsAxisZoomSliderActiveTrackProps {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
   axisPosition: 'top' | 'bottom' | 'left' | 'right';
@@ -11,7 +11,7 @@ export interface ChartAxisZoomSliderActiveTrackProps {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
 }
-export declare function ChartAxisZoomSliderActiveTrack({
+export declare function ChartsAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
   axisPosition,
@@ -22,4 +22,4 @@ export declare function ChartAxisZoomSliderActiveTrack({
   showTooltip,
   onPointerEnter,
   onPointerLeave
-}: ChartAxisZoomSliderActiveTrackProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsAxisZoomSliderActiveTrackProps): import("react/jsx-runtime").JSX.Element;

package/esm/{ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js → ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.js}

@@ -7,11 +7,11 @@ import * as React from 'react';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { shouldForwardProp } from '@mui/system';
 import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
-import { ChartAxisZoomSliderThumb } from "./ChartAxisZoomSliderThumb.js";
+import { ChartsAxisZoomSliderThumb } from "./ChartsAxisZoomSliderThumb.js";
 import { ChartsTooltipZoomSliderValue } from "./ChartsTooltipZoomSliderValue.js";
 import { calculateZoomEnd, calculateZoomFromPoint, calculateZoomStart } from "./zoom-utils.js";
 import { ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH } from "./constants.js";
-import { useUtilityClasses } from "./chartAxisZoomSliderTrackClasses.js";
+import { useUtilityClasses } from "./chartsAxisZoomSliderTrackClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ZoomSliderActiveTrackRect = styled('rect', {
   slot: 'internal',
@@ -39,7 +39,7 @@ const ZoomSliderActiveTrackRect = styled('rect', {
     })
   }]
 }));
-export function ChartAxisZoomSliderActiveTrack({
+export function ChartsAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
   axisPosition,
@@ -224,7 +224,7 @@ export function ChartAxisZoomSliderActiveTrack({
       onPointerEnter: onPointerEnter,
       onPointerLeave: onPointerLeave,
       className: classes.active
-    }), /*#__PURE__*/_jsx(ChartAxisZoomSliderThumb, {
+    }), /*#__PURE__*/_jsx(ChartsAxisZoomSliderThumb, {
       ref: setStartThumbEl,
       x: startThumbX,
       y: startThumbY,
@@ -235,7 +235,7 @@ export function ChartAxisZoomSliderActiveTrack({
       onPointerEnter: onPointerEnter,
       onPointerLeave: onPointerLeave,
       placement: "start"
-    }), /*#__PURE__*/_jsx(ChartAxisZoomSliderThumb, {
+    }), /*#__PURE__*/_jsx(ChartsAxisZoomSliderThumb, {
       ref: setEndThumbEl,
       x: endThumbX,
       y: endThumbY,

package/esm/{ChartZoomSlider/internals/ChartAxisZoomSliderPreview.d.ts → ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.d.ts}

@@ -1,5 +1,5 @@
 import { type AxisId } from '@mui/x-charts/internals';
-interface ChartAxisZoomSliderPreviewProps {
+interface ChartsAxisZoomSliderPreviewProps {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
   reverse: boolean;
@@ -8,10 +8,10 @@ interface ChartAxisZoomSliderPreviewProps {
   height: number;
   width: number;
 }
-export declare function ChartAxisZoomSliderPreview({
+export declare function ChartsAxisZoomSliderPreview({
   axisId,
   axisDirection,
   reverse,
   ...props
-}: ChartAxisZoomSliderPreviewProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsAxisZoomSliderPreviewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/{ChartZoomSlider/internals/ChartAxisZoomSliderPreview.js → ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.js}

@@ -7,7 +7,7 @@ import { selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/inte
 import { alpha } from '@mui/system';
 import useId from '@mui/utils/useId';
 import { selectorChartAxisZoomData } from "../../internals/plugins/useChartProZoom/index.js";
-import { ChartAxisZoomSliderPreviewContent } from "./ChartAxisZoomSliderPreviewContent.js";
+import { ChartsAxisZoomSliderPreviewContent } from "./ChartsAxisZoomSliderPreviewContent.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PreviewBackgroundRect = styled('rect', {
   slot: 'internal',
@@ -20,7 +20,7 @@ const PreviewBackgroundRect = styled('rect', {
   stroke: theme.palette.grey[700],
   fill: alpha(theme.palette.grey[700], 0.4)
 }));
-export function ChartAxisZoomSliderPreview(_ref) {
+export function ChartsAxisZoomSliderPreview(_ref) {
   let {
       axisId,
       axisDirection
@@ -34,7 +34,7 @@ export function ChartAxisZoomSliderPreview(_ref) {
       fill: "transparent",
       rx: 4,
       ry: 4
-    })), /*#__PURE__*/_jsx(ChartAxisZoomSliderPreviewContent, _extends({
+    })), /*#__PURE__*/_jsx(ChartsAxisZoomSliderPreviewContent, _extends({
       axisId: axisId
     }, props))]
   }));

package/esm/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreviewContent.d.ts

@@ -0,0 +1,9 @@
+import { type AxisId } from '@mui/x-charts/internals';
+export interface ChartsAxisZoomSliderPreviewContentProps {
+  axisId: AxisId;
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+export declare function ChartsAxisZoomSliderPreviewContent(props: ChartsAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;

package/esm/{ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.js → ChartsZoomSlider/internals/ChartsAxisZoomSliderPreviewContent.js}

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { selectorChartSeriesProcessed, useStore } from '@mui/x-charts/internals';
 import { seriesPreviewPlotMap } from "./seriesPreviewPlotMap.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ChartAxisZoomSliderPreviewContent(props) {
+export function ChartsAxisZoomSliderPreviewContent(props) {
   const {
     axisId,
     x,

package/esm/ChartsZoomSlider/internals/ChartsAxisZoomSliderThumb.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface ChartsZoomSliderThumbOwnerState {
+  onMove: (event: PointerEvent) => void;
+  orientation: 'horizontal' | 'vertical';
+  placement: 'start' | 'end';
+}
+export interface ChartsZoomSliderThumbProps extends Omit<React.ComponentProps<'rect'>, 'orientation'>, ChartsZoomSliderThumbOwnerState {}
+/**
+ * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
+ * @internal
+ */
+export declare const ChartsAxisZoomSliderThumb: React.ForwardRefExoticComponent<Omit<ChartsZoomSliderThumbProps, "ref"> & React.RefAttributes<SVGRectElement>>;

package/esm/{ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js → ChartsZoomSlider/internals/ChartsAxisZoomSliderThumb.js}

@@ -9,7 +9,7 @@ import useForkRef from '@mui/utils/useForkRef';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import clsx from 'clsx';
-import { chartAxisZoomSliderThumbClasses, useUtilityClasses } from "./chartAxisZoomSliderThumbClasses.js";
+import { chartsAxisZoomSliderThumbClasses, useUtilityClasses } from "./chartsAxisZoomSliderThumbClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Rect = styled('rect', {
   slot: 'internal',
@@ -17,17 +17,17 @@ const Rect = styled('rect', {
 })(({
   theme
 }) => ({
-  [`&.${chartAxisZoomSliderThumbClasses.root}`]: _extends({
+  [`&.${chartsAxisZoomSliderThumbClasses.root}`]: _extends({
     fill: (theme.vars || theme).palette.common.white,
     stroke: (theme.vars || theme).palette.grey[500]
   }, theme.applyStyles('dark', {
     fill: (theme.vars || theme).palette.grey[300],
     stroke: (theme.vars || theme).palette.grey[600]
   })),
-  [`&.${chartAxisZoomSliderThumbClasses.horizontal}`]: {
+  [`&.${chartsAxisZoomSliderThumbClasses.horizontal}`]: {
     cursor: 'ew-resize'
   },
-  [`&.${chartAxisZoomSliderThumbClasses.vertical}`]: {
+  [`&.${chartsAxisZoomSliderThumbClasses.vertical}`]: {
     cursor: 'ns-resize'
   }
 }));
@@ -39,7 +39,7 @@ function preventDefault(event) {
  * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
  * @internal
  */
-export const ChartAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function ChartAxisZoomSliderThumb(_ref, forwardedRef) {
+export const ChartsAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function ChartsAxisZoomSliderThumb(_ref, forwardedRef) {
   let {
       className,
       onMove,
@@ -102,4 +102,4 @@ export const ChartAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function C
     ry: ry
   }, other));
 });
-if (process.env.NODE_ENV !== "production") ChartAxisZoomSliderThumb.displayName = "ChartAxisZoomSliderThumb";
+if (process.env.NODE_ENV !== "production") ChartsAxisZoomSliderThumb.displayName = "ChartsAxisZoomSliderThumb";

package/esm/{ChartZoomSlider/internals/ChartAxisZoomSliderTrack.d.ts → ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.d.ts}

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import { type AxisId } from '@mui/x-charts/internals';
-interface ChartAxisZoomSliderTrackProps extends React.ComponentProps<'rect'> {
+interface ChartsAxisZoomSliderTrackProps extends React.ComponentProps<'rect'> {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
   reverse: boolean;
   onSelectStart?: () => void;
   onSelectEnd?: () => void;
 }
-export declare function ChartAxisZoomSliderTrack({
+export declare function ChartsAxisZoomSliderTrack({
   axisId,
   axisDirection,
   reverse,
   onSelectStart,
   onSelectEnd,
   ...other
-}: ChartAxisZoomSliderTrackProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsAxisZoomSliderTrackProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/{ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js → ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.js}

@@ -10,7 +10,7 @@ import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { shouldForwardProp } from '@mui/system';
 import clsx from 'clsx';
 import { calculateZoomEnd, calculateZoomFromPoint, calculateZoomStart } from "./zoom-utils.js";
-import { useUtilityClasses } from "./chartAxisZoomSliderTrackClasses.js";
+import { useUtilityClasses } from "./chartsAxisZoomSliderTrackClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ZoomSliderTrack = styled('rect', {
   slot: 'internal',
@@ -41,7 +41,7 @@ const ZoomSliderTrack = styled('rect', {
     }
   }]
 }));
-export function ChartAxisZoomSliderTrack(_ref) {
+export function ChartsAxisZoomSliderTrack(_ref) {
   let {
       axisId,
       axisDirection,

package/esm/{ChartZoomSlider/internals/chartAxisZoomSliderThumbClasses.d.ts → ChartsZoomSlider/internals/chartsAxisZoomSliderThumbClasses.d.ts}

@@ -1,5 +1,5 @@
-import type { ChartZoomSliderThumbOwnerState } from "./ChartAxisZoomSliderThumb.js";
-export interface ChartAxisZoomSliderThumbClasses {
+import type { ChartsZoomSliderThumbOwnerState } from "./ChartsAxisZoomSliderThumb.js";
+export interface ChartsAxisZoomSliderThumbClasses {
   /** Styles applied to the root element. */
   root: string;
   /** Styles applied to the root element when it is horizontal. */
@@ -11,7 +11,7 @@ export interface ChartAxisZoomSliderThumbClasses {
   /** Styles applied to the root element when it is an end thumb. */
   end: string;
 }
-export type ChartAxisZoomSliderThumbClassKey = keyof ChartAxisZoomSliderThumbClasses;
-export declare const chartAxisZoomSliderThumbClasses: ChartAxisZoomSliderThumbClasses;
+export type ChartsAxisZoomSliderThumbClassKey = keyof ChartsAxisZoomSliderThumbClasses;
+export declare const chartsAxisZoomSliderThumbClasses: ChartsAxisZoomSliderThumbClasses;
 export declare function getAxisZoomSliderThumbUtilityClass(slot: string): string;
-export declare const useUtilityClasses: (ownerState: ChartZoomSliderThumbOwnerState) => Record<"root", string>;
+export declare const useUtilityClasses: (ownerState: ChartsZoomSliderThumbOwnerState) => Record<"root", string>;

package/esm/{ChartZoomSlider/internals/chartAxisZoomSliderThumbClasses.js → ChartsZoomSlider/internals/chartsAxisZoomSliderThumbClasses.js}

@@ -1,7 +1,7 @@
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export const chartAxisZoomSliderThumbClasses = generateUtilityClasses('MuiChartAxisZoomSliderThumb', ['root', 'horizontal', 'vertical', 'start', 'end']);
+export const chartsAxisZoomSliderThumbClasses = generateUtilityClasses('MuiChartAxisZoomSliderThumb', ['root', 'horizontal', 'vertical', 'start', 'end']);
 export function getAxisZoomSliderThumbUtilityClass(slot) {
   return generateUtilityClass('MuiChartAxisZoomSliderThumb', slot);
 }

package/esm/ChartsZoomSlider/internals/chartsAxisZoomSliderTrackClasses.d.ts

@@ -0,0 +1,15 @@
+import type { ChartsAxisZoomSliderActiveTrackProps } from "./ChartsAxisZoomSliderActiveTrack.js";
+export interface ChartsAxisZoomSliderTrackClasses {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+}
+export type ChartsAxisZoomSliderTrackClassKey = keyof ChartsAxisZoomSliderTrackClasses;
+export declare const chartsAxisZoomSliderTrackClasses: ChartsAxisZoomSliderTrackClasses;
+export declare function getAxisZoomSliderTrackUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (props: Partial<ChartsAxisZoomSliderActiveTrackProps>) => Record<"background" | "active", string>;

package/esm/{ChartZoomSlider/internals/chartAxisZoomSliderTrackClasses.js → ChartsZoomSlider/internals/chartsAxisZoomSliderTrackClasses.js}

@@ -1,6 +1,6 @@
 import composeClasses from '@mui/utils/composeClasses';
 import ClassNameGenerator from '@mui/utils/ClassNameGenerator';
-export const chartAxisZoomSliderTrackClasses = ['horizontal', 'vertical', 'background', 'active'].reduce((acc, slot) => {
+export const chartsAxisZoomSliderTrackClasses = ['horizontal', 'vertical', 'background', 'active'].reduce((acc, slot) => {
   acc[slot] = getAxisZoomSliderTrackUtilityClass(slot);
   return acc;
 }, {});

package/esm/LineChartPro/LineChartPro.js

@@ -18,7 +18,7 @@ import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { useLineChartProps } from '@mui/x-charts/internals';
 import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
 import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay';
-import { ChartZoomSlider } from "../ChartZoomSlider/index.js";
+import { ChartsZoomSlider } from "../ChartsZoomSlider/index.js";
 import { ChartsToolbarPro } from "../ChartsToolbarPro/index.js";
 import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
@@ -80,7 +80,7 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
       children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx("g", {
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsZoomSlider, {}), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
         }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -17,7 +17,7 @@ import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { useScatterChartProps } from '@mui/x-charts/internals';
 import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
 import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay';
-import { ChartZoomSlider } from "../ChartZoomSlider/index.js";
+import { ChartsZoomSlider } from "../ChartsZoomSlider/index.js";
 import { ChartsToolbarPro } from "../ChartsToolbarPro/index.js";
 import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
@@ -72,7 +72,7 @@ const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(i
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: [/*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
+        children: [/*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsZoomSlider, {}), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
         }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), children]

package/esm/index.d.ts

@@ -18,6 +18,7 @@ export * from '@mui/x-charts/SparkLineChart';
 export * from '@mui/x-charts/Gauge';
 export * from '@mui/x-charts/RadarChart';
 export * from '@mui/x-charts/ChartsSurface';
+export * from '@mui/x-charts/ChartsDataProvider';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
 export * from '@mui/x-charts/ChartsOverlay';
@@ -29,8 +30,11 @@ export * from "./models/index.js";
 export * from "./plugins/index.js";
 export * from "./colorPalettes/index.js";
 export * from "./Heatmap/index.js";
+export { ChartsContainerPro } from "./ChartsContainerPro/index.js";
+export type { ChartsContainerProProps, ChartsContainerProSlots, ChartsContainerProSlotProps } from "./ChartsContainerPro/index.js";
 export { ChartContainerPro } from "./ChartContainerPro/index.js";
-export type { ChartContainerProProps } from "./ChartContainerPro/index.js";
+export type { ChartContainerProProps, ChartContainerProSlots, ChartContainerProSlotProps } from "./ChartContainerPro/index.js";
+export * from "./ChartsDataProviderPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./SankeyChart/index.js";
@@ -40,5 +44,6 @@ export * from "./PieChartPro/index.js";
 export * from "./FunnelChart/index.js";
 export * from "./RadarChartPro/index.js";
 export * from "./ChartZoomSlider/index.js";
+export * from "./ChartsZoomSlider/index.js";
 export * from "./ChartsToolbarPro/index.js";
 export type { ChartImageExportOptions, ChartPrintExportOptions } from "./internals/plugins/useChartProExport/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.27.0
+ * @mui/x-charts-pro v8.27.4
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -27,6 +27,7 @@ export * from '@mui/x-charts/SparkLineChart';
 export * from '@mui/x-charts/Gauge';
 export * from '@mui/x-charts/RadarChart';
 export * from '@mui/x-charts/ChartsSurface';
+export * from '@mui/x-charts/ChartsDataProvider';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
 export * from '@mui/x-charts/ChartsOverlay';
@@ -44,7 +45,9 @@ export * from "./colorPalettes/index.js";
 
 // Pro components
 export * from "./Heatmap/index.js";
+export { ChartsContainerPro } from "./ChartsContainerPro/index.js";
 export { ChartContainerPro } from "./ChartContainerPro/index.js";
+export * from "./ChartsDataProviderPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./SankeyChart/index.js";
@@ -54,4 +57,5 @@ export * from "./PieChartPro/index.js";
 export * from "./FunnelChart/index.js";
 export * from "./RadarChartPro/index.js";
 export * from "./ChartZoomSlider/index.js";
+export * from "./ChartsZoomSlider/index.js";
 export * from "./ChartsToolbarPro/index.js";

package/esm/internals/index.d.ts

@@ -1,7 +1,9 @@
+export { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.js";
+export type { UseChartsContainerProPropsReturnValue } from "../ChartsContainerPro/useChartsContainerProProps.js";
 export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.js";
-export { seriesPreviewPlotMap } from "../ChartZoomSlider/internals/seriesPreviewPlotMap.js";
-export type { PreviewPlotProps } from "../ChartZoomSlider/internals/previews/PreviewPlot.types.js";
-export { defaultSeriesConfigPro } from "../ChartDataProviderPro/ChartDataProviderPro.js";
+export { seriesPreviewPlotMap } from "../ChartsZoomSlider/internals/seriesPreviewPlotMap.js";
+export type { PreviewPlotProps } from "../ChartsZoomSlider/internals/previews/PreviewPlot.types.js";
+export { defaultSeriesConfigPro } from "../ChartsDataProviderPro/ChartsDataProviderPro.js";
 export type { ProPluginsPerSeriesType } from "../context/ChartProApi.js";
 export { defaultSlotsMaterial } from "./material/index.js";

package/esm/internals/index.js

@@ -1,4 +1,5 @@
+export { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.js";
 export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
-export { seriesPreviewPlotMap } from "../ChartZoomSlider/internals/seriesPreviewPlotMap.js";
-export { defaultSeriesConfigPro } from "../ChartDataProviderPro/ChartDataProviderPro.js";
+export { seriesPreviewPlotMap } from "../ChartsZoomSlider/internals/seriesPreviewPlotMap.js";
+export { defaultSeriesConfigPro } from "../ChartsDataProviderPro/ChartsDataProviderPro.js";
 export { defaultSlotsMaterial } from "./material/index.js";

package/esm/internals/plugins/useChartProExport/exportImage.js

@@ -40,6 +40,10 @@ export async function exportImage(element, svg, params) {
     applyStyles(svg, previousStyles);
     exportDoc.body.replaceChildren(elementClone);
     exportDoc.body.style.margin = '0px';
+    /* Set display block through styles to ensure that CSS rules that target `body` don't accidentally target this
+     * iframe's body, which might cause the body to have no intrinsic width or height, leading to the canvas having a
+     * size of 0px, which causes the `toBlob` call to return null. */
+    exportDoc.body.style.display = 'block';
     /* The body's parent has a width of 0, so we use fit-content to ensure that the body adjusts its width to the width
      * of its children. */
     exportDoc.body.style.width = 'fit-content';
@@ -63,6 +67,10 @@ export async function exportImage(element, svg, params) {
   canvas.height = exportDocBodySize.height * ratio;
   canvas.style.width = `${exportDocBodySize.width}px`;
   canvas.style.height = `${exportDocBodySize.height}px`;
+  if (canvas.width === 0 || canvas.height === 0) {
+    doc.body.removeChild(iframe);
+    throw new Error(`MUI X Charts: Cannot export an image with zero width or height. Width: ${canvas.width}px. Height: ${canvas.height}px.`);
+  }
   try {
     await drawDocument(iframe.contentDocument, canvas, {
       // Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71

package/index.d.ts

@@ -18,6 +18,7 @@ export * from '@mui/x-charts/SparkLineChart';
 export * from '@mui/x-charts/Gauge';
 export * from '@mui/x-charts/RadarChart';
 export * from '@mui/x-charts/ChartsSurface';
+export * from '@mui/x-charts/ChartsDataProvider';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
 export * from '@mui/x-charts/ChartsOverlay';
@@ -29,8 +30,11 @@ export * from "./models/index.js";
 export * from "./plugins/index.js";
 export * from "./colorPalettes/index.js";
 export * from "./Heatmap/index.js";
+export { ChartsContainerPro } from "./ChartsContainerPro/index.js";
+export type { ChartsContainerProProps, ChartsContainerProSlots, ChartsContainerProSlotProps } from "./ChartsContainerPro/index.js";
 export { ChartContainerPro } from "./ChartContainerPro/index.js";
-export type { ChartContainerProProps } from "./ChartContainerPro/index.js";
+export type { ChartContainerProProps, ChartContainerProSlots, ChartContainerProSlotProps } from "./ChartContainerPro/index.js";
+export * from "./ChartsDataProviderPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./SankeyChart/index.js";
@@ -40,5 +44,6 @@ export * from "./PieChartPro/index.js";
 export * from "./FunnelChart/index.js";
 export * from "./RadarChartPro/index.js";
 export * from "./ChartZoomSlider/index.js";
+export * from "./ChartsZoomSlider/index.js";
 export * from "./ChartsToolbarPro/index.js";
 export type { ChartImageExportOptions, ChartPrintExportOptions } from "./internals/plugins/useChartProExport/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.27.0
+ * @mui/x-charts-pro v8.27.4
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -11,6 +11,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  ChartsContainerPro: true,
   ChartContainerPro: true
 };
 Object.defineProperty(exports, "ChartContainerPro", {
@@ -19,6 +20,12 @@ Object.defineProperty(exports, "ChartContainerPro", {
     return _ChartContainerPro.ChartContainerPro;
   }
 });
+Object.defineProperty(exports, "ChartsContainerPro", {
+  enumerable: true,
+  get: function () {
+    return _ChartsContainerPro.ChartsContainerPro;
+  }
+});
 require("./typeOverloads/modules");
 var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
 Object.keys(_ChartsClipPath).forEach(function (key) {
@@ -248,6 +255,18 @@ Object.keys(_ChartsSurface).forEach(function (key) {
     }
   });
 });
+var _ChartsDataProvider = require("@mui/x-charts/ChartsDataProvider");
+Object.keys(_ChartsDataProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartsDataProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsDataProvider[key];
+    }
+  });
+});
 var _ChartDataProvider = require("@mui/x-charts/ChartDataProvider");
 Object.keys(_ChartDataProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -380,7 +399,20 @@ Object.keys(_Heatmap).forEach(function (key) {
     }
   });
 });
+var _ChartsContainerPro = require("./ChartsContainerPro");
 var _ChartContainerPro = require("./ChartContainerPro");
+var _ChartsDataProviderPro = require("./ChartsDataProviderPro");
+Object.keys(_ChartsDataProviderPro).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartsDataProviderPro[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsDataProviderPro[key];
+    }
+  });
+});
 var _ChartDataProviderPro = require("./ChartDataProviderPro");
 Object.keys(_ChartDataProviderPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -489,6 +521,18 @@ Object.keys(_ChartZoomSlider).forEach(function (key) {
     }
   });
 });
+var _ChartsZoomSlider = require("./ChartsZoomSlider");
+Object.keys(_ChartsZoomSlider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartsZoomSlider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsZoomSlider[key];
+    }
+  });
+});
 var _ChartsToolbarPro = require("./ChartsToolbarPro");
 Object.keys(_ChartsToolbarPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/index.d.ts

@@ -1,7 +1,9 @@
+export { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.js";
+export type { UseChartsContainerProPropsReturnValue } from "../ChartsContainerPro/useChartsContainerProProps.js";
 export { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.js";
 export type { ChartsSlotsPro, ChartsSlotPropsPro } from "./material/index.js";
-export { seriesPreviewPlotMap } from "../ChartZoomSlider/internals/seriesPreviewPlotMap.js";
-export type { PreviewPlotProps } from "../ChartZoomSlider/internals/previews/PreviewPlot.types.js";
-export { defaultSeriesConfigPro } from "../ChartDataProviderPro/ChartDataProviderPro.js";
+export { seriesPreviewPlotMap } from "../ChartsZoomSlider/internals/seriesPreviewPlotMap.js";
+export type { PreviewPlotProps } from "../ChartsZoomSlider/internals/previews/PreviewPlot.types.js";
+export { defaultSeriesConfigPro } from "../ChartsDataProviderPro/ChartsDataProviderPro.js";
 export type { ProPluginsPerSeriesType } from "../context/ChartProApi.js";
 export { defaultSlotsMaterial } from "./material/index.js";