@mui/x-charts-pro 9.0.0-alpha.3 → 9.0.0-alpha.4

package/ChartsContainerPro/useChartsContainerProProps.d.ts

@@ -1,8 +1,8 @@
 import { type ChartAnyPluginSignature, type ChartSeriesType, type UseChartsContainerPropsReturnValue } from '@mui/x-charts/internals';
-import type { ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
+import type { ChartsDataProviderProProps } from "../ChartsDataProviderPro/index.js";
 import type { ChartsContainerProProps } from "./ChartsContainerPro.js";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export type UseChartsContainerProPropsReturnValue<SeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = Pick<UseChartsContainerPropsReturnValue<SeriesType, TSignatures>, 'chartsSurfaceProps' | 'children'> & {
-  chartDataProviderProProps: ChartDataProviderProProps<SeriesType, TSignatures>;
+  chartsDataProviderProProps: ChartsDataProviderProProps<SeriesType, TSignatures>;
 };
 export declare const useChartsContainerProProps: <SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>>(props: ChartsContainerProProps<SeriesType, TSignatures>) => UseChartsContainerProPropsReturnValue<SeriesType, TSignatures>;

package/ChartsContainerPro/useChartsContainerProProps.js

@@ -23,11 +23,11 @@ const useChartsContainerProProps = props => {
     } = _ref,
     baseProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps,
     children
   } = (0, _internals.useChartsContainerProps)(baseProps);
-  const chartDataProviderProProps = (0, _extends2.default)({}, chartDataProviderProps, {
+  const chartsDataProviderProProps = (0, _extends2.default)({}, chartsDataProviderProps, {
     initialZoom,
     zoomData,
     onZoomChange,
@@ -36,7 +36,7 @@ const useChartsContainerProProps = props => {
     plugins: plugins ?? _allPlugins.DEFAULT_PLUGINS
   });
   return {
-    chartDataProviderProProps,
+    chartsDataProviderProProps,
     chartsSurfaceProps,
     children
   };

package/ChartsContainerPro/useChartsContainerProProps.mjs

@@ -17,11 +17,11 @@ export const useChartsContainerProProps = props => {
     } = _ref,
     baseProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps,
     children
   } = useChartsContainerProps(baseProps);
-  const chartDataProviderProProps = _extends({}, chartDataProviderProps, {
+  const chartsDataProviderProProps = _extends({}, chartsDataProviderProps, {
     initialZoom,
     zoomData,
     onZoomChange,
@@ -30,7 +30,7 @@ export const useChartsContainerProProps = props => {
     plugins: plugins ?? DEFAULT_PLUGINS
   });
   return {
-    chartDataProviderProProps,
+    chartsDataProviderProProps,
     chartsSurfaceProps,
     children
   };

package/ChartsDataProviderPro/ChartsDataProviderPro.js

@@ -18,8 +18,8 @@ var _useChartsDataProviderProProps = require("./useChartsDataProviderProProps");
 var _ChartsWatermark = require("../internals/ChartsWatermark");
 var _jsxRuntime = require("react/jsx-runtime");
 const packageInfo = {
-  releaseDate: "MTc3MzI3MzYwMDAwMA==",
-  version: process.env.MUI_VERSION,
+  releaseDate: "MTc3Mzk2NDgwMDAwMA==",
+  version: "9.0.0-alpha.4",
   name: 'x-charts-pro'
 };
 const defaultSeriesConfigPro = exports.defaultSeriesConfigPro = _internals.defaultSeriesConfig;
@@ -94,12 +94,6 @@ process.env.NODE_ENV !== "production" ? ChartsDataProviderPro.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
-  /**
-   * Options to enable features planned for the next major.
-   */
-  experimentalFeatures: _propTypes.default.shape({
-    preferStrictDomainInLineCharts: _propTypes.default.bool
-  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/ChartsDataProviderPro/ChartsDataProviderPro.mjs

@@ -11,8 +11,8 @@ import { useChartsDataProviderProProps } from "./useChartsDataProviderProProps.m
 import { ChartsWatermark } from "../internals/ChartsWatermark.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const packageInfo = {
-  releaseDate: "MTc3MzI3MzYwMDAwMA==",
-  version: process.env.MUI_VERSION,
+  releaseDate: "MTc3Mzk2NDgwMDAwMA==",
+  version: "9.0.0-alpha.4",
   name: 'x-charts-pro'
 };
 export const defaultSeriesConfigPro = defaultSeriesConfig;
@@ -87,12 +87,6 @@ process.env.NODE_ENV !== "production" ? ChartsDataProviderPro.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * Options to enable features planned for the next major.
-   */
-  experimentalFeatures: PropTypes.shape({
-    preferStrictDomainInLineCharts: PropTypes.bool
-  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/ChartsToolbarPro/ChartsToolbarPro.js

@@ -43,7 +43,7 @@ function ChartsToolbarPro(_ref) {
   } = (0, _internals.useChartsSlots)();
   const {
     store
-  } = (0, _internals.useChartContext)();
+  } = (0, _internals.useChartsContext)();
   const {
     localeText
   } = (0, _hooks.useChartsLocalization)();

package/ChartsToolbarPro/ChartsToolbarPro.mjs

@@ -6,7 +6,7 @@ const _excluded = ["printOptions", "imageExportOptions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Toolbar, ToolbarButton } from '@mui/x-charts/Toolbar';
-import { useChartContext, useChartsSlots } from '@mui/x-charts/internals';
+import { useChartsContext, useChartsSlots } from '@mui/x-charts/internals';
 import { useChartsLocalization } from '@mui/x-charts/hooks';
 import useId from '@mui/utils/useId';
 import { ChartsToolbarDivider } from "./internals/ChartsToolbarDivider.mjs";
@@ -36,7 +36,7 @@ function ChartsToolbarPro(_ref) {
   } = useChartsSlots();
   const {
     store
-  } = useChartContext();
+  } = useChartsContext();
   const {
     localeText
   } = useChartsLocalization();

package/ChartsToolbarPro/ChartsToolbarZoomInTrigger.js

@@ -32,7 +32,7 @@ const ChartsToolbarZoomInTrigger = exports.ChartsToolbarZoomInTrigger = /*#__PUR
   const {
     instance,
     store
-  } = (0, _internals.useChartContext)();
+  } = (0, _internals.useChartsContext)();
   const disabled = store.use(_useChartProZoom.selectorChartCanZoomIn);
   const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseButton, render, (0, _extends2.default)({}, slotProps.baseButton, {
     onClick: () => instance.zoomIn(),

package/ChartsToolbarPro/ChartsToolbarZoomInTrigger.mjs

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["render"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useChartContext, useChartsSlots } from '@mui/x-charts/internals';
+import { useChartsContext, useChartsSlots } from '@mui/x-charts/internals';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { selectorChartCanZoomIn } from "../internals/plugins/useChartProZoom/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,7 +25,7 @@ const ChartsToolbarZoomInTrigger = /*#__PURE__*/React.forwardRef(function Charts
   const {
     instance,
     store
-  } = useChartContext();
+  } = useChartsContext();
   const disabled = store.use(selectorChartCanZoomIn);
   const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps.baseButton, {
     onClick: () => instance.zoomIn(),

package/ChartsToolbarPro/ChartsToolbarZoomOutTrigger.js

@@ -32,7 +32,7 @@ const ChartsToolbarZoomOutTrigger = exports.ChartsToolbarZoomOutTrigger = /*#__P
   const {
     instance,
     store
-  } = (0, _internals.useChartContext)();
+  } = (0, _internals.useChartsContext)();
   const disabled = store.use(_useChartProZoom.selectorChartCanZoomOut);
   const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseButton, render, (0, _extends2.default)({}, slotProps.baseButton, {
     onClick: () => instance.zoomOut(),

package/ChartsToolbarPro/ChartsToolbarZoomOutTrigger.mjs

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["render"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useChartContext, useChartsSlots } from '@mui/x-charts/internals';
+import { useChartsContext, useChartsSlots } from '@mui/x-charts/internals';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
 import { selectorChartCanZoomOut } from "../internals/plugins/useChartProZoom/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,7 +25,7 @@ const ChartsToolbarZoomOutTrigger = /*#__PURE__*/React.forwardRef(function Chart
   const {
     instance,
     store
-  } = useChartContext();
+  } = useChartsContext();
   const disabled = store.use(selectorChartCanZoomOut);
   const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps.baseButton, {
     onClick: () => instance.zoomOut(),

package/ChartsToolbarPro/index.d.mts

@@ -2,4 +2,5 @@ export * from "./ChartsToolbarPro.mjs";
 export * from "./ChartsToolbarZoomInTrigger.mjs";
 export * from "./ChartsToolbarZoomOutTrigger.mjs";
 export * from "./ChartsToolbarPrintExportTrigger.mjs";
-export * from "./ChartsToolbarImageExportTrigger.mjs";
+export * from "./ChartsToolbarImageExportTrigger.mjs";
+export type { ChartsToolbarProSlots, ChartsToolbarProSlotProps } from "./Toolbar.types.mjs";

package/ChartsToolbarPro/index.d.ts

@@ -2,4 +2,5 @@ export * from "./ChartsToolbarPro.js";
 export * from "./ChartsToolbarZoomInTrigger.js";
 export * from "./ChartsToolbarZoomOutTrigger.js";
 export * from "./ChartsToolbarPrintExportTrigger.js";
-export * from "./ChartsToolbarImageExportTrigger.js";
+export * from "./ChartsToolbarImageExportTrigger.js";
+export type { ChartsToolbarProSlots, ChartsToolbarProSlotProps } from "./Toolbar.types.js";

package/ChartsToolbarPro/index.mjs

@@ -2,4 +2,5 @@ export * from "./ChartsToolbarPro.mjs";
 export * from "./ChartsToolbarZoomInTrigger.mjs";
 export * from "./ChartsToolbarZoomOutTrigger.mjs";
 export * from "./ChartsToolbarPrintExportTrigger.mjs";
-export * from "./ChartsToolbarImageExportTrigger.mjs";
+export * from "./ChartsToolbarImageExportTrigger.mjs";
+export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.js

@@ -60,7 +60,7 @@ function ChartsAxisZoomSliderActiveTrack({
 }) {
   const {
     instance
-  } = (0, _internals.useChartContext)();
+  } = (0, _internals.useChartsContext)();
   const {
     chartsLayerContainerRef
   } = instance;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
-import { getChartPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, useChartContext, useDrawingArea, useStore } from '@mui/x-charts/internals';
+import { getChartPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, useChartsContext, useDrawingArea, useStore } from '@mui/x-charts/internals';
 import * as React from 'react';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { shouldForwardProp } from '@mui/system';
@@ -53,7 +53,7 @@ export function ChartsAxisZoomSliderActiveTrack({
 }) {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const {
     chartsLayerContainerRef
   } = instance;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.js

@@ -59,7 +59,7 @@ function ChartsAxisZoomSliderTrack(_ref) {
   const ref = React.useRef(null);
   const {
     instance
-  } = (0, _internals.useChartContext)();
+  } = (0, _internals.useChartsContext)();
   const {
     chartsLayerContainerRef
   } = instance;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.mjs

@@ -4,7 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
 import * as React from 'react';
-import { useChartContext, getChartPoint, selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
+import { useChartsContext, getChartPoint, selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
 import { styled } from '@mui/material/styles';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { shouldForwardProp } from '@mui/system';
@@ -52,7 +52,7 @@ export function ChartsAxisZoomSliderTrack(_ref) {
   const ref = React.useRef(null);
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const {
     chartsLayerContainerRef
   } = instance;

package/FunnelChart/FunnelChart.d.mts

@@ -4,12 +4,12 @@ import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
 import { type FunnelPlotProps } from "./FunnelPlot.mjs";
 import { type FunnelSeriesType } from "./funnel.types.mjs";
-import { type ChartContainerProProps } from "../ChartContainerPro/index.mjs";
+import { type ChartsContainerProProps } from "../ChartsContainerPro/index.mjs";
 import { type FunnelChartSlotExtension } from "./funnelSlots.types.mjs";
 import { type CategoryAxis } from "./categoryAxis.types.mjs";
 import { type FunnelChartPluginSignatures } from "./FunnelChart.plugins.mjs";
 export type FunnelSeries = MakeOptional<FunnelSeriesType, 'type'>;
-export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel', FunnelChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps' | 'experimentalFeatures'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
+export interface FunnelChartProps extends Omit<ChartsContainerProProps<'funnel', FunnelChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
   /**
    * The series to display in the funnel chart.
    * An array of [[FunnelSeries]] objects.

package/FunnelChart/FunnelChart.d.ts

@@ -4,12 +4,12 @@ import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsAxisHighlightProps } from '@mui/x-charts/ChartsAxisHighlight';
 import { type FunnelPlotProps } from "./FunnelPlot.js";
 import { type FunnelSeriesType } from "./funnel.types.js";
-import { type ChartContainerProProps } from "../ChartContainerPro/index.js";
+import { type ChartsContainerProProps } from "../ChartsContainerPro/index.js";
 import { type FunnelChartSlotExtension } from "./funnelSlots.types.js";
 import { type CategoryAxis } from "./categoryAxis.types.js";
 import { type FunnelChartPluginSignatures } from "./FunnelChart.plugins.js";
 export type FunnelSeries = MakeOptional<FunnelSeriesType, 'type'>;
-export interface FunnelChartProps extends Omit<ChartContainerProProps<'funnel', FunnelChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps' | 'experimentalFeatures'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
+export interface FunnelChartProps extends Omit<ChartsContainerProProps<'funnel', FunnelChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'zoom' | 'onZoomChange' | 'dataset' | 'yAxis' | 'xAxis' | 'rotationAxis' | 'radiusAxis' | 'slots' | 'slotProps'>, Omit<FunnelPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, FunnelChartSlotExtension {
   /**
    * The series to display in the funnel chart.
    * An array of [[FunnelSeries]] objects.

package/FunnelChart/FunnelChart.js

@@ -21,8 +21,8 @@ var _ChartsWrapper = require("@mui/x-charts/ChartsWrapper");
 var _FunnelPlot = require("./FunnelPlot");
 var _useFunnelChartProps = require("./useFunnelChartProps");
 var _seriesConfig = require("./seriesConfig");
-var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
-var _ChartDataProviderPro = require("../ChartDataProviderPro");
+var _useChartsContainerProProps = require("../ChartsContainerPro/useChartsContainerProProps");
+var _ChartsDataProviderPro = require("../ChartsDataProviderPro");
 var _FunnelChart2 = require("./FunnelChart.plugins");
 var _FocusedFunnelSection = require("./FocusedFunnelSection");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -35,7 +35,7 @@ const FunnelChart = exports.FunnelChart = /*#__PURE__*/React.forwardRef(function
     name: 'MuiFunnelChart'
   });
   const {
-    chartContainerProps,
+    chartsContainerProps,
     funnelPlotProps,
     overlayProps,
     legendProps,
@@ -45,11 +45,11 @@ const FunnelChart = exports.FunnelChart = /*#__PURE__*/React.forwardRef(function
     children
   } = (0, _useFunnelChartProps.useFunnelChartProps)(themedProps);
   const {
-    chartDataProviderProProps,
+    chartsDataProviderProProps,
     chartsSurfaceProps
-  } = (0, _useChartContainerProProps.useChartContainerProProps)(chartContainerProps);
+  } = (0, _useChartsContainerProProps.useChartsContainerProProps)(chartsContainerProps);
   const Tooltip = themedProps.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsDataProviderPro.ChartsDataProviderPro, (0, _extends2.default)({}, chartsDataProviderProProps, {
     gap: themedProps.gap,
     seriesConfig: seriesConfig,
     plugins: _FunnelChart2.FUNNEL_CHART_PLUGINS,
@@ -177,6 +177,10 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * @default rainbowSurgePalette
    */
   colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
   /**
    * If `true`, the charts will not listen to the mouse move event.
@@ -188,6 +192,10 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * If `true`, disables keyboard navigation for the chart.
    */
   disableKeyboardNavigation: _propTypes.default.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.object,
   /**
    * The gap, in pixels, between funnel sections.
    * @default 0
@@ -351,6 +359,10 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string,
   /**
    * The tooltip item.

package/FunnelChart/FunnelChart.mjs

@@ -14,8 +14,8 @@ import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
 import { FunnelPlot } from "./FunnelPlot.mjs";
 import { useFunnelChartProps } from "./useFunnelChartProps.mjs";
 import { funnelSeriesConfig } from "./seriesConfig/index.mjs";
-import { useChartContainerProProps } from "../ChartContainerPro/useChartContainerProProps.mjs";
-import { ChartDataProviderPro } from "../ChartDataProviderPro/index.mjs";
+import { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.mjs";
+import { ChartsDataProviderPro } from "../ChartsDataProviderPro/index.mjs";
 import { FUNNEL_CHART_PLUGINS } from "./FunnelChart.plugins.mjs";
 import { FocusedFunnelSection } from "./FocusedFunnelSection.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,7 +28,7 @@ const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, re
     name: 'MuiFunnelChart'
   });
   const {
-    chartContainerProps,
+    chartsContainerProps,
     funnelPlotProps,
     overlayProps,
     legendProps,
@@ -38,11 +38,11 @@ const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, re
     children
   } = useFunnelChartProps(themedProps);
   const {
-    chartDataProviderProProps,
+    chartsDataProviderProProps,
     chartsSurfaceProps
-  } = useChartContainerProProps(chartContainerProps);
+  } = useChartsContainerProProps(chartsContainerProps);
   const Tooltip = themedProps.slots?.tooltip ?? ChartsTooltip;
-  return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
+  return /*#__PURE__*/_jsx(ChartsDataProviderPro, _extends({}, chartsDataProviderProProps, {
     gap: themedProps.gap,
     seriesConfig: seriesConfig,
     plugins: FUNNEL_CHART_PLUGINS,
@@ -170,6 +170,10 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
   /**
    * If `true`, the charts will not listen to the mouse move event.
@@ -181,6 +185,10 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
    * If `true`, disables keyboard navigation for the chart.
    */
   disableKeyboardNavigation: PropTypes.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.object,
   /**
    * The gap, in pixels, between funnel sections.
    * @default 0
@@ -344,6 +352,10 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: PropTypes.string,
   /**
    * The tooltip item.

package/FunnelChart/FunnelPlot.js

@@ -15,6 +15,7 @@ var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _internals = require("@mui/x-charts/internals");
 var _FunnelSection = require("./FunnelSection");
 var _labelUtils = require("./labelUtils");
+var _funnelClasses = require("./funnelClasses");
 var _useFunnelSeries = require("../hooks/useFunnelSeries");
 var _curves = require("./curves");
 var _FunnelSectionLabel = require("./FunnelSectionLabel");
@@ -110,7 +111,9 @@ function FunnelPlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const data = useAggregatedData();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+  const classes = (0, _funnelClasses.useUtilityClasses)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    className: classes.root,
     children: [data.map(series => {
       if (series.length === 0) {
         return null;
@@ -150,7 +153,8 @@ function FunnelPlot(props) {
           id,
           label,
           seriesId,
-          dataIndex
+          dataIndex,
+          variant
         }) => {
           if (!label || !label.value) {
             return null;
@@ -158,7 +162,8 @@ function FunnelPlot(props) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FunnelSectionLabel.FunnelSectionLabel, (0, _extends2.default)({
             label: label,
             dataIndex: dataIndex,
-            seriesId: seriesId
+            seriesId: seriesId,
+            variant: variant
           }, other), id);
         })
       }, series[0].seriesId);

package/FunnelChart/FunnelPlot.mjs

@@ -7,6 +7,7 @@ import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
 import { cartesianSeriesTypes, useStore } from '@mui/x-charts/internals';
 import { FunnelSection } from "./FunnelSection.mjs";
 import { alignLabel, positionLabel } from "./labelUtils.mjs";
+import { useUtilityClasses } from "./funnelClasses.mjs";
 import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.mjs";
 import { getFunnelCurve } from "./curves/index.mjs";
 import { FunnelSectionLabel } from "./FunnelSectionLabel.mjs";
@@ -102,7 +103,9 @@ function FunnelPlot(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const data = useAggregatedData();
-  return /*#__PURE__*/_jsxs(React.Fragment, {
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/_jsxs("g", {
+    className: classes.root,
     children: [data.map(series => {
       if (series.length === 0) {
         return null;
@@ -142,7 +145,8 @@ function FunnelPlot(props) {
           id,
           label,
           seriesId,
-          dataIndex
+          dataIndex,
+          variant
         }) => {
           if (!label || !label.value) {
             return null;
@@ -150,7 +154,8 @@ function FunnelPlot(props) {
           return /*#__PURE__*/_jsx(FunnelSectionLabel, _extends({
             label: label,
             dataIndex: dataIndex,
-            seriesId: seriesId
+            seriesId: seriesId,
+            variant: variant
           }, other), id);
         })
       }, series[0].seriesId);

package/FunnelChart/FunnelSection.d.mts

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
-import { type FunnelSectionClasses } from "./funnelSectionClasses.mjs";
+import { type FunnelClasses } from "./funnelClasses.mjs";
 export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>, 'ref'> {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;
-  classes?: Partial<FunnelSectionClasses>;
+  classes?: Partial<FunnelClasses>;
   variant?: 'filled' | 'outlined';
 }
 export declare const FunnelSectionPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGProps<SVGPathElement>, keyof React.SVGProps<SVGPathElement>>, {}>;
 /**
  * @ignore - internal component.
  */
-declare const FunnelSection: React.ForwardRefExoticComponent<FunnelSectionProps & React.RefAttributes<{}>>;
+declare const FunnelSection: React.ForwardRefExoticComponent<FunnelSectionProps & React.RefAttributes<SVGPathElement>>;
 export { FunnelSection };

package/FunnelChart/FunnelSection.d.ts

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
-import { type FunnelSectionClasses } from "./funnelSectionClasses.js";
+import { type FunnelClasses } from "./funnelClasses.js";
 export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>, 'ref'> {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;
-  classes?: Partial<FunnelSectionClasses>;
+  classes?: Partial<FunnelClasses>;
   variant?: 'filled' | 'outlined';
 }
 export declare const FunnelSectionPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGProps<SVGPathElement>, keyof React.SVGProps<SVGPathElement>>, {}>;
 /**
  * @ignore - internal component.
  */
-declare const FunnelSection: React.ForwardRefExoticComponent<FunnelSectionProps & React.RefAttributes<{}>>;
+declare const FunnelSection: React.ForwardRefExoticComponent<FunnelSectionProps & React.RefAttributes<SVGPathElement>>;
 export { FunnelSection };

package/FunnelChart/FunnelSection.js

@@ -14,12 +14,12 @@ var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-charts/internals");
 var _hooks = require("@mui/x-charts/hooks");
 var _clsx = _interopRequireDefault(require("clsx"));
-var _funnelSectionClasses = require("./funnelSectionClasses");
+var _funnelClasses = require("./funnelClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "dataIndex", "classes", "color", "onClick", "className", "variant"];
 const FunnelSectionPath = exports.FunnelSectionPath = (0, _styles.styled)('path', {
-  slot: 'internal',
-  shouldForwardProp: undefined
+  name: 'MuiFunnelChart',
+  slot: 'Section'
 })(() => ({
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, fill-opacity 0.2s ease-in, filter 0.2s ease-in'
 }));
@@ -28,7 +28,7 @@ const FunnelSectionPath = exports.FunnelSectionPath = (0, _styles.styled)('path'
  * @ignore - internal component.
  */
 const FunnelSection = exports.FunnelSection = (0, _internals.consumeSlots)('MuiFunnelSection', 'funnelSection', {
-  classesResolver: _funnelSectionClasses.useUtilityClasses
+  classesResolver: _funnelClasses.useUtilityClasses
 }, /*#__PURE__*/React.forwardRef(function FunnelSection(props, ref) {
   const {
       seriesId,
@@ -62,7 +62,7 @@ const FunnelSection = exports.FunnelSection = (0, _internals.consumeSlots)('MuiF
     onClick: onClick,
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined,
-    className: (0, _clsx.default)(classes?.root, className, isOutlined ? classes?.outlined : classes?.filled, isHighlighted && classes?.highlighted, isFaded && classes?.faded)
+    className: (0, _clsx.default)(classes?.section, className)
   }, other, {
     ref: ref
   }));

package/FunnelChart/FunnelSection.mjs

@@ -8,11 +8,11 @@ import { styled } from '@mui/material/styles';
 import { useInteractionItemProps, consumeSlots } from '@mui/x-charts/internals';
 import { useItemHighlightState } from '@mui/x-charts/hooks';
 import clsx from 'clsx';
-import { useUtilityClasses } from "./funnelSectionClasses.mjs";
+import { useUtilityClasses } from "./funnelClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const FunnelSectionPath = styled('path', {
-  slot: 'internal',
-  shouldForwardProp: undefined
+  name: 'MuiFunnelChart',
+  slot: 'Section'
 })(() => ({
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, fill-opacity 0.2s ease-in, filter 0.2s ease-in'
 }));
@@ -55,7 +55,7 @@ const FunnelSection = consumeSlots('MuiFunnelSection', 'funnelSection', {
     onClick: onClick,
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined,
-    className: clsx(classes?.root, className, isOutlined ? classes?.outlined : classes?.filled, isHighlighted && classes?.highlighted, isFaded && classes?.faded)
+    className: clsx(classes?.section, className)
   }, other, {
     ref: ref
   }));