@mui/x-charts-pro 8.27.2 → 8.27.4

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

@@ -6,7 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartAxisZoomSliderThumb = void 0;
+exports.ChartsAxisZoomSliderThumb = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
@@ -15,7 +15,7 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _rafThrottle = require("@mui/x-internals/rafThrottle");
 var _clsx = _interopRequireDefault(require("clsx"));
-var _chartAxisZoomSliderThumbClasses = require("./chartAxisZoomSliderThumbClasses");
+var _chartsAxisZoomSliderThumbClasses = require("./chartsAxisZoomSliderThumbClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry"];
 const Rect = (0, _styles.styled)('rect', {
@@ -24,17 +24,17 @@ const Rect = (0, _styles.styled)('rect', {
 })(({
   theme
 }) => ({
-  [`&.${_chartAxisZoomSliderThumbClasses.chartAxisZoomSliderThumbClasses.root}`]: (0, _extends2.default)({
+  [`&.${_chartsAxisZoomSliderThumbClasses.chartsAxisZoomSliderThumbClasses.root}`]: (0, _extends2.default)({
     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.chartAxisZoomSliderThumbClasses.horizontal}`]: {
+  [`&.${_chartsAxisZoomSliderThumbClasses.chartsAxisZoomSliderThumbClasses.horizontal}`]: {
     cursor: 'ew-resize'
   },
-  [`&.${_chartAxisZoomSliderThumbClasses.chartAxisZoomSliderThumbClasses.vertical}`]: {
+  [`&.${_chartsAxisZoomSliderThumbClasses.chartsAxisZoomSliderThumbClasses.vertical}`]: {
     cursor: 'ns-resize'
   }
 }));
@@ -46,7 +46,7 @@ function preventDefault(event) {
  * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
  * @internal
  */
-const ChartAxisZoomSliderThumb = exports.ChartAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function ChartAxisZoomSliderThumb(_ref, forwardedRef) {
+const ChartsAxisZoomSliderThumb = exports.ChartsAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function ChartsAxisZoomSliderThumb(_ref, forwardedRef) {
   let {
       className,
       onMove,
@@ -56,7 +56,7 @@ const ChartAxisZoomSliderThumb = exports.ChartAxisZoomSliderThumb = /*#__PURE__*
       ry = 4
     } = _ref,
     other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  const classes = (0, _chartAxisZoomSliderThumbClasses.useUtilityClasses)({
+  const classes = (0, _chartsAxisZoomSliderThumbClasses.useUtilityClasses)({
     onMove,
     orientation,
     placement
@@ -109,4 +109,4 @@ const ChartAxisZoomSliderThumb = exports.ChartAxisZoomSliderThumb = /*#__PURE__*
     ry: ry
   }, other));
 });
-if (process.env.NODE_ENV !== "production") ChartAxisZoomSliderThumb.displayName = "ChartAxisZoomSliderThumb";
+if (process.env.NODE_ENV !== "production") ChartsAxisZoomSliderThumb.displayName = "ChartsAxisZoomSliderThumb";

package/{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/{ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js → ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.js}

@@ -6,7 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartAxisZoomSliderTrack = ChartAxisZoomSliderTrack;
+exports.ChartsAxisZoomSliderTrack = ChartsAxisZoomSliderTrack;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
@@ -16,7 +16,7 @@ var _rafThrottle = require("@mui/x-internals/rafThrottle");
 var _system = require("@mui/system");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _zoomUtils = require("./zoom-utils");
-var _chartAxisZoomSliderTrackClasses = require("./chartAxisZoomSliderTrackClasses");
+var _chartsAxisZoomSliderTrackClasses = require("./chartsAxisZoomSliderTrackClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
 const ZoomSliderTrack = (0, _styles.styled)('rect', {
@@ -48,7 +48,7 @@ const ZoomSliderTrack = (0, _styles.styled)('rect', {
     }
   }]
 }));
-function ChartAxisZoomSliderTrack(_ref) {
+function ChartsAxisZoomSliderTrack(_ref) {
   let {
       axisId,
       axisDirection,
@@ -63,7 +63,7 @@ function ChartAxisZoomSliderTrack(_ref) {
   } = (0, _internals.useChartContext)();
   const store = (0, _internals.useStore)();
   const [isSelecting, setIsSelecting] = React.useState(false);
-  const classes = (0, _chartAxisZoomSliderTrackClasses.useUtilityClasses)({
+  const classes = (0, _chartsAxisZoomSliderTrackClasses.useUtilityClasses)({
     axisDirection
   });
   const onPointerDown = function onPointerDown(event) {

package/{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/{ChartZoomSlider/internals/chartAxisZoomSliderThumbClasses.js → ChartsZoomSlider/internals/chartsAxisZoomSliderThumbClasses.js}

@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.chartAxisZoomSliderThumbClasses = void 0;
+exports.chartsAxisZoomSliderThumbClasses = void 0;
 exports.getAxisZoomSliderThumbUtilityClass = getAxisZoomSliderThumbUtilityClass;
 exports.useUtilityClasses = void 0;
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
-const chartAxisZoomSliderThumbClasses = exports.chartAxisZoomSliderThumbClasses = (0, _generateUtilityClasses.default)('MuiChartAxisZoomSliderThumb', ['root', 'horizontal', 'vertical', 'start', 'end']);
+const chartsAxisZoomSliderThumbClasses = exports.chartsAxisZoomSliderThumbClasses = (0, _generateUtilityClasses.default)('MuiChartAxisZoomSliderThumb', ['root', 'horizontal', 'vertical', 'start', 'end']);
 function getAxisZoomSliderThumbUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiChartAxisZoomSliderThumb', slot);
 }

package/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/{ChartZoomSlider/internals/chartAxisZoomSliderTrackClasses.js → ChartsZoomSlider/internals/chartsAxisZoomSliderTrackClasses.js}

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.chartAxisZoomSliderTrackClasses = void 0;
+exports.chartsAxisZoomSliderTrackClasses = void 0;
 exports.getAxisZoomSliderTrackUtilityClass = getAxisZoomSliderTrackUtilityClass;
 exports.useUtilityClasses = void 0;
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _ClassNameGenerator = _interopRequireDefault(require("@mui/utils/ClassNameGenerator"));
-const chartAxisZoomSliderTrackClasses = exports.chartAxisZoomSliderTrackClasses = ['horizontal', 'vertical', 'background', 'active'].reduce((acc, slot) => {
+const chartsAxisZoomSliderTrackClasses = exports.chartsAxisZoomSliderTrackClasses = ['horizontal', 'vertical', 'background', 'active'].reduce((acc, slot) => {
   acc[slot] = getAxisZoomSliderTrackUtilityClass(slot);
   return acc;
 }, {});

package/LineChartPro/LineChartPro.js

@@ -24,7 +24,7 @@ var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
 var _internals = require("@mui/x-charts/internals");
 var _ChartsWrapper = require("@mui/x-charts/ChartsWrapper");
 var _ChartsBrushOverlay = require("@mui/x-charts/ChartsBrushOverlay");
-var _ChartZoomSlider = require("../ChartZoomSlider");
+var _ChartsZoomSlider = require("../ChartsZoomSlider");
 var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
@@ -87,7 +87,7 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
       children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsZoomSlider.ChartsZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.MarkPlot, (0, _extends2.default)({}, markPlotProps))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsBrushOverlay.ChartsBrushOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]

package/ScatterChartPro/ScatterChartPro.js

@@ -23,7 +23,7 @@ var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _internals = require("@mui/x-charts/internals");
 var _ChartsWrapper = require("@mui/x-charts/ChartsWrapper");
 var _ChartsBrushOverlay = require("@mui/x-charts/ChartsBrushOverlay");
-var _ChartZoomSlider = require("../ChartZoomSlider");
+var _ChartsZoomSlider = require("../ChartsZoomSlider");
 var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
@@ -79,7 +79,7 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsZoomSlider.ChartsZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsBrushOverlay.ChartsBrushOverlay, {}), children]

package/esm/BarChartPro/BarChartPro.js

@@ -18,7 +18,7 @@ import { useBarChartProps } from '@mui/x-charts/internals';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 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";
@@ -78,7 +78,7 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(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(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsZoomSlider, {}), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
       })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
   }));

package/esm/ChartContainerPro/ChartContainerPro.d.ts

@@ -1,35 +1,21 @@
-import * as React from 'react';
-import { type ChartsSurfaceProps } from '@mui/x-charts/ChartsSurface';
 import { type ChartAnyPluginSignature, type ChartSeriesType } from '@mui/x-charts/internals';
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-import { type ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
-export type ChartContainerProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartDataProviderProProps<TSeries, TSignatures> & ChartsSurfaceProps;
-type ChartContainerProComponent = <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProProps<TSeries, TSignatures> & {
-  ref?: React.ForwardedRef<SVGSVGElement>;
-}) => React.JSX.Element;
+import { type ChartsContainerProProps, type ChartsContainerProSlotProps, type ChartsContainerProSlots } from "../ChartsContainerPro/index.js";
+/**
+ * @deprecated Use `ChartsContainerProSlots` instead. We added S to the charts prefix to align with other components.
+ */
+export type ChartContainerProSlots = ChartsContainerProSlots;
+/**
+ * @deprecated Use `ChartsContainerProSlotProps` instead. We added S to the charts prefix to align with other components.
+ */
+export type ChartContainerProSlotProps = ChartsContainerProSlotProps;
+/**
+ * @deprecated Use `ChartsContainerProProps` instead. We added S to the charts prefix to align with other components.
+ */
+export type ChartContainerProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartsContainerProProps<TSeries, TSignatures>;
 /**
- * It sets up the data providers as well as the `<svg>` for the chart.
- *
- * This is a combination of both the `ChartDataProviderPro` and `ChartsSurface` components.
- *
- * Demos:
- *
- * - [Composition](https://mui.com/x/api/charts/composition/)
- *
- * API:
- *
- * - [ChartContainer API](https://mui.com/x/api/charts/chart-container/)
- *
- * @example
- * ```jsx
- * <ChartContainerPro
- *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
- *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
- * >
- *    <BarPlot />
- *    <ChartsXAxis axisId="x-axis" />
- * </ChartContainerPro>
- * ```
+ * @deprecated Use `ChartsContainerPro` instead. We added S to the charts prefix to align with other components.
  */
-declare const ChartContainerPro: ChartContainerProComponent;
-export { ChartContainerPro };
+export declare const ChartContainerPro: <TSeries extends ChartSeriesType = keyof import("@mui/x-charts/internals").ChartsSeriesConfig, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartsContainerProProps<TSeries, TSignatures> & {
+  ref?: React.ForwardedRef<SVGSVGElement>;
+}) => React.JSX.Element;

package/esm/ChartContainerPro/ChartContainerPro.js

@@ -1,291 +1,20 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
-import { useChartContainerProProps } from "./useChartContainerProProps.js";
-import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { ChartsContainerPro } from "../ChartsContainerPro/index.js";
+
 /**
- * It sets up the data providers as well as the `<svg>` for the chart.
- *
- * This is a combination of both the `ChartDataProviderPro` and `ChartsSurface` components.
- *
- * Demos:
- *
- * - [Composition](https://mui.com/x/api/charts/composition/)
- *
- * API:
- *
- * - [ChartContainer API](https://mui.com/x/api/charts/chart-container/)
- *
- * @example
- * ```jsx
- * <ChartContainerPro
- *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
- *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
- * >
- *    <BarPlot />
- *    <ChartsXAxis axisId="x-axis" />
- * </ChartContainerPro>
- * ```
+ * @deprecated Use `ChartsContainerProSlots` instead. We added S to the charts prefix to align with other components.
  */
-const ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainerProInner(props, ref) {
-  const {
-    chartDataProviderProProps,
-    children,
-    chartsSurfaceProps
-  } = useChartContainerProProps(props, ref);
-  return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
-    children: /*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
-      children: children
-    }))
-  }));
-});
 
-// @ts-expect-error the type coercion breaks the prop types
-if (process.env.NODE_ENV !== "production") ChartContainerPro.displayName = "ChartContainerPro";
-process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  apiRef: PropTypes.shape({
-    current: PropTypes.shape({
-      setZoomData: PropTypes.func.isRequired
-    })
-  }),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /**
-   * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
-   */
-  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
-  /**
-   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
-   */
-  dataset: PropTypes.arrayOf(PropTypes.object),
-  desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
-  /**
-   * The height of the chart in px. If not defined, it takes the height of the parent element.
-   */
-  height: PropTypes.number,
-  /**
-   * The highlighted item.
-   * Used when the highlight is controlled.
-   */
-  highlightedItem: PropTypes.shape({
-    dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
-  }),
-  /**
-   * This prop is used to help implement the accessibility logic.
-   * If you don't provide this prop. It falls back to a randomly generated id.
-   */
-  id: PropTypes.string,
-  /**
-   * The list of zoom data related to each axis.
-   */
-  initialZoom: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    end: PropTypes.number.isRequired,
-    start: PropTypes.number.isRequired
-  })),
-  /**
-   * The margin between the SVG and the drawing area.
-   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   */
-  margin: PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  }),
-  /**
-   * The callback fired when the highlighted item changes.
-   *
-   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
-   */
-  onHighlightChange: PropTypes.func,
-  /**
-   * Callback fired when the zoom has changed.
-   *
-   * @param {ZoomData[]} zoomData Updated zoom data.
-   */
-  onZoomChange: PropTypes.func,
-  /**
-   * The array of series to display.
-   * Each type of series has its own specificity.
-   * Please refer to the appropriate docs page to learn more about it.
-   */
-  series: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * If `true`, animations are skipped.
-   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
-   */
-  skipAnimation: PropTypes.bool,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  theme: PropTypes.oneOf(['dark', 'light']),
-  title: PropTypes.string,
-  /**
-   * The width of the chart in px. If not defined, it takes the width of the parent element.
-   */
-  width: PropTypes.number,
-  /**
-   * The configuration of the x-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  xAxis: PropTypes.arrayOf(PropTypes.shape({
-    classes: PropTypes.object,
-    colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
-      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      type: PropTypes.oneOf(['continuous']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
-      type: PropTypes.oneOf(['piecewise']).isRequired
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    fill: PropTypes.string,
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string,
-    labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['bottom', 'top']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func,
-    zoom: PropTypes.oneOfType([PropTypes.shape({
-      filterMode: PropTypes.oneOf(['discard', 'keep']),
-      maxEnd: PropTypes.number,
-      maxSpan: PropTypes.number,
-      minSpan: PropTypes.number,
-      minStart: PropTypes.number,
-      panning: PropTypes.bool,
-      step: PropTypes.number
-    }), PropTypes.bool])
-  })),
-  /**
-   * The configuration of the y-axes.
-   * If not provided, a default axis config is used.
-   * An array of [[AxisConfig]] objects.
-   */
-  yAxis: PropTypes.arrayOf(PropTypes.shape({
-    classes: PropTypes.object,
-    colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
-      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      type: PropTypes.oneOf(['continuous']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
-      type: PropTypes.oneOf(['piecewise']).isRequired
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    fill: PropTypes.string,
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    label: PropTypes.string,
-    labelStyle: PropTypes.object,
-    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    position: PropTypes.oneOf(['left', 'right']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    stroke: PropTypes.string,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: PropTypes.number,
-    valueFormatter: PropTypes.func,
-    zoom: PropTypes.oneOfType([PropTypes.shape({
-      filterMode: PropTypes.oneOf(['discard', 'keep']),
-      maxEnd: PropTypes.number,
-      maxSpan: PropTypes.number,
-      minSpan: PropTypes.number,
-      minStart: PropTypes.number,
-      panning: PropTypes.bool,
-      step: PropTypes.number
-    }), PropTypes.bool])
-  })),
-  /**
-   * The configuration of the z-axes.
-   */
-  zAxis: PropTypes.arrayOf(PropTypes.shape({
-    colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
-      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      type: PropTypes.oneOf(['continuous']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
-      type: PropTypes.oneOf(['piecewise']).isRequired
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    id: PropTypes.string,
-    max: PropTypes.number,
-    min: PropTypes.number
-  }))
-} : void 0;
-export { ChartContainerPro };
+/**
+ * @deprecated Use `ChartsContainerProSlotProps` instead. We added S to the charts prefix to align with other components.
+ */
+
+/**
+ * @deprecated Use `ChartsContainerProProps` instead. We added S to the charts prefix to align with other components.
+ */
+
+/**
+ * @deprecated Use `ChartsContainerPro` instead. We added S to the charts prefix to align with other components.
+ */
+export const ChartContainerPro = ChartsContainerPro;

package/esm/ChartContainerPro/useChartContainerProProps.d.ts

@@ -1,9 +1,13 @@
-import { type ChartAnyPluginSignature, type ChartSeriesType, type UseChartContainerPropsReturnValue } from '@mui/x-charts/internals';
 import type * as React from 'react';
-import type { ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
+import { type ChartAnyPluginSignature, type ChartSeriesType } from '@mui/x-charts/internals';
+import { type UseChartsContainerProPropsReturnValue } from "../ChartsContainerPro/useChartsContainerProProps.js";
 import type { ChartContainerProProps } from "./ChartContainerPro.js";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-export type UseChartContainerProPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = Pick<UseChartContainerPropsReturnValue<TSeries, TSignatures>, 'chartsSurfaceProps' | 'children'> & {
-  chartDataProviderProProps: ChartDataProviderProProps<TSeries, TSignatures>;
-};
+/**
+ * @deprecated Use `UseChartsContainerProPropsReturnValue` instead.
+ */
+export type UseChartContainerProPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = UseChartsContainerProPropsReturnValue<TSeries, TSignatures>;
+/**
+ * @deprecated Use `useChartsContainerProProps` instead.
+ */
 export declare const useChartContainerProProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProProps<TSeries, TSignatures>, ref: React.Ref<SVGSVGElement>) => UseChartContainerProPropsReturnValue<TSeries, TSignatures>;