@mui/x-charts-pro 8.27.4 → 8.28.0

package/Heatmap/HeatmapItem.js

@@ -11,26 +11,12 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _internals = require("@mui/x-charts/internals");
 var _heatmapClasses = require("./heatmapClasses");
-var _HeatmapCell = require("./internals/HeatmapCell");
+var _HeatmapCell = require("./HeatmapCell");
 var _shouldRegisterPointerInteractionsGlobally = require("./shouldRegisterPointerInteractionsGlobally");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "dataIndex", "color", "value", "isHighlighted", "isFaded", "slotProps", "slots"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    cell: ['cell', `series-${seriesId}`, isFaded && 'faded', isHighlighted && 'highlighted']
-  };
-  return (0, _composeClasses.default)(slots, _heatmapClasses.getHeatmapUtilityClass, classes);
-};
-
 /**
  * @ignore - internal component.
  */
@@ -59,11 +45,11 @@ function HeatmapItem(props) {
     seriesId,
     dataIndex,
     color,
-    value,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    value
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = (0, _heatmapClasses.useUtilityClasses)(ownerState);
   const Cell = slots?.cell ?? _HeatmapCell.HeatmapCell;
   const cellProps = (0, _useSlotProps.default)({
     elementType: Cell,
@@ -81,7 +67,6 @@ process.env.NODE_ENV !== "production" ? HeatmapItem.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   color: _propTypes.default.string.isRequired,
-  dataIndex: _propTypes.default.number.isRequired,
   height: _propTypes.default.number.isRequired,
   seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**

package/Heatmap/heatmapClasses.d.ts

@@ -1,4 +1,7 @@
+import type { HeatmapCellOwnerState } from "./HeatmapCell.js";
 export interface HeatmapClasses {
+  /** Styles applied to the heatmap plot root element. */
+  root: string;
   /** Styles applied to the heatmap cells. */
   cell: string;
   /** Styles applied to the cell element if highlighted. */
@@ -8,9 +11,11 @@ export interface HeatmapClasses {
   /**
    * Styles applied to the root element for a specified series.
    * Needs to be suffixed with the series ID: `.${heatmapClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
    */
   series: string;
 }
 export type HeatmapClassKey = keyof HeatmapClasses;
 export declare function getHeatmapUtilityClass(slot: string): string;
-export declare const heatmapClasses: HeatmapClasses;
+export declare const heatmapClasses: HeatmapClasses;
+export declare const useUtilityClasses: (ownerState: HeatmapCellOwnerState) => Record<"cell" | "root", string>;

package/Heatmap/heatmapClasses.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getHeatmapUtilityClass = getHeatmapUtilityClass;
-exports.heatmapClasses = void 0;
+exports.useUtilityClasses = exports.heatmapClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getHeatmapUtilityClass(slot) {
   // Those should be common to all charts
@@ -16,7 +17,21 @@ function getHeatmapUtilityClass(slot) {
   }
   return (0, _generateUtilityClass.default)('MuiHeatmap', slot);
 }
-const heatmapClasses = exports.heatmapClasses = (0, _extends2.default)({}, (0, _generateUtilityClasses.default)('MuiHeatmap', ['cell', 'series']), {
+const heatmapClasses = exports.heatmapClasses = (0, _extends2.default)({}, (0, _generateUtilityClasses.default)('MuiHeatmap', ['root', 'cell', 'series']), {
   highlighted: 'Charts-highlighted',
   faded: 'Charts-faded'
-});
+});
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    seriesId,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    cell: ['cell', `series-${seriesId}`, isFaded && 'faded', isHighlighted && 'highlighted']
+  };
+  return (0, _composeClasses.default)(slots, getHeatmapUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/Heatmap/index.d.ts

@@ -2,7 +2,9 @@ export { Heatmap } from "./Heatmap.js";
 export type { HeatmapSeries, HeatmapProps } from "./Heatmap.js";
 export { HeatmapPlot } from "./HeatmapPlot.js";
 export * from "./FocusedHeatmapCell.js";
-export type { HeatmapCellProps } from "./internals/HeatmapCell.js";
+export { HeatmapCell } from "./HeatmapCell.js";
+export type { HeatmapCellProps, HeatmapCellOwnerState } from "./HeatmapCell.js";
 export * from "./HeatmapTooltip/index.js";
 export * from "./Heatmap.plugins.js";
-export * from "./heatmapClasses.js";
+export { heatmapClasses } from "./heatmapClasses.js";
+export type { HeatmapClasses, HeatmapClassKey } from "./heatmapClasses.js";

package/Heatmap/index.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Heatmap: true,
-  HeatmapPlot: true
+  HeatmapPlot: true,
+  HeatmapCell: true,
+  heatmapClasses: true
 };
 Object.defineProperty(exports, "Heatmap", {
   enumerable: true,
@@ -13,12 +15,24 @@ Object.defineProperty(exports, "Heatmap", {
     return _Heatmap.Heatmap;
   }
 });
+Object.defineProperty(exports, "HeatmapCell", {
+  enumerable: true,
+  get: function () {
+    return _HeatmapCell.HeatmapCell;
+  }
+});
 Object.defineProperty(exports, "HeatmapPlot", {
   enumerable: true,
   get: function () {
     return _HeatmapPlot.HeatmapPlot;
   }
 });
+Object.defineProperty(exports, "heatmapClasses", {
+  enumerable: true,
+  get: function () {
+    return _heatmapClasses.heatmapClasses;
+  }
+});
 var _Heatmap = require("./Heatmap");
 var _HeatmapPlot = require("./HeatmapPlot");
 var _FocusedHeatmapCell = require("./FocusedHeatmapCell");
@@ -33,6 +47,7 @@ Object.keys(_FocusedHeatmapCell).forEach(function (key) {
     }
   });
 });
+var _HeatmapCell = require("./HeatmapCell");
 var _HeatmapTooltip = require("./HeatmapTooltip");
 Object.keys(_HeatmapTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -57,15 +72,4 @@ Object.keys(_Heatmap2).forEach(function (key) {
     }
   });
 });
-var _heatmapClasses = require("./heatmapClasses");
-Object.keys(_heatmapClasses).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _heatmapClasses[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _heatmapClasses[key];
-    }
-  });
-});
+var _heatmapClasses = require("./heatmapClasses");

package/Heatmap/shouldRegisterPointerInteractionsGlobally.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.shouldRegisterPointerInteractionsGlobally = shouldRegisterPointerInteractionsGlobally;
-var _HeatmapCell = require("./internals/HeatmapCell");
+var _HeatmapCell = require("./HeatmapCell");
 /* Global pointer interactions should be registered when we're using the default HeatmapCell.
  * We only want to return false when a custom slot is being used to avoid breaking changes.
  *

package/LineChartPro/LineChartPro.js

@@ -1588,8 +1588,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
       type: _propTypes.default.oneOf(['doubleTapReset']).isRequired
     }), _propTypes.default.shape({
-      pointerMode: _propTypes.default.any,
-      requiredKeys: _propTypes.default.array,
+      pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
       type: _propTypes.default.oneOf(['brush']).isRequired
     })]).isRequired)
   })

package/SankeyChart/SankeyLinkElement.js

@@ -11,8 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _internals = require("@mui/x-charts/internals");
-var _plugins = require("./plugins");
 var _useSankeyHighlight = require("./plugins/useSankeyHighlight.selectors");
+var _sankeyClasses = require("./sankeyClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -33,11 +33,12 @@ const SankeyLinkElement = exports.SankeyLinkElement = /*#__PURE__*/React.forward
     sourceId: link.source.id,
     link
   };
-  const isHighlighted = store.use(_plugins.selectorIsLinkHighlighted, link);
+  const isHighlighted = store.use(_useSankeyHighlight.selectorIsLinkHighlighted, link);
   const isFaded = store.use(_useSankeyHighlight.selectorIsSankeyItemFaded, isHighlighted);
 
   // Add interaction props for tooltips
   const interactionProps = (0, _internals.useInteractionItemProps)(identifier);
+  const classes = (0, _sankeyClasses.useUtilityClasses)();
   const handleClick = (0, _useEventCallback.default)(event => {
     onClick?.(event, identifier);
   });
@@ -52,6 +53,7 @@ const SankeyLinkElement = exports.SankeyLinkElement = /*#__PURE__*/React.forward
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
     ref: ref,
+    className: classes.link,
     d: link.path,
     fill: link.color,
     opacity: finalOpacity,

package/SankeyChart/SankeyLinkLabel.js

@@ -9,6 +9,7 @@ exports.SankeyLinkLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _useSankeySeries = require("../hooks/useSankeySeries");
+var _sankeyClasses = require("./sankeyClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const getLinkMidpoint = link => {
   if (link.y0 === undefined || link.y1 === undefined) {
@@ -38,6 +39,7 @@ const SankeyLinkLabel = exports.SankeyLinkLabel = /*#__PURE__*/React.forwardRef(
   } = props;
   const theme = (0, _styles.useTheme)();
   const series = (0, _useSankeySeries.useSankeySeries)()[0];
+  const classes = (0, _sankeyClasses.useUtilityClasses)();
   if (!link.path || link.y0 === undefined || link.y1 === undefined) {
     return null; // No path defined or invalid coordinates, nothing to render
   }
@@ -52,6 +54,7 @@ const SankeyLinkLabel = exports.SankeyLinkLabel = /*#__PURE__*/React.forwardRef(
   }) : link.value;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
     ref: ref,
+    className: classes.linkLabel,
     x: midpoint.x,
     y: midpoint.y,
     textAnchor: "middle",

package/SankeyChart/SankeyNodeElement.d.ts

@@ -20,4 +20,4 @@ export interface SankeyNodeElementProps {
 /**
  * @ignore - internal component.
  */
-export declare const SankeyNodeElement: React.ForwardRefExoticComponent<SankeyNodeElementProps & React.RefAttributes<SVGGElement>>;
+export declare const SankeyNodeElement: React.ForwardRefExoticComponent<SankeyNodeElementProps & React.RefAttributes<SVGRectElement>>;

package/SankeyChart/SankeyNodeElement.js

@@ -11,8 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _internals = require("@mui/x-charts/internals");
-var _plugins = require("./plugins");
 var _useSankeyHighlight = require("./plugins/useSankeyHighlight.selectors");
+var _sankeyClasses = require("./sankeyClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -37,11 +37,12 @@ const SankeyNodeElement = exports.SankeyNodeElement = /*#__PURE__*/React.forward
     nodeId: node.id,
     node
   };
-  const isHighlighted = store.use(_plugins.selectorIsNodeHighlighted, node.id);
+  const isHighlighted = store.use(_useSankeyHighlight.selectorIsNodeHighlighted, node.id);
   const isFaded = store.use(_useSankeyHighlight.selectorIsSankeyItemFaded, isHighlighted);
 
   // Add interaction props for tooltips
   const interactionProps = (0, _internals.useInteractionItemProps)(identifier);
+  const classes = (0, _sankeyClasses.useUtilityClasses)();
   const handleClick = (0, _useEventCallback.default)(event => {
     onClick?.(event, identifier);
   });
@@ -65,7 +66,8 @@ const SankeyNodeElement = exports.SankeyNodeElement = /*#__PURE__*/React.forward
       cursor: onClick ? 'pointer' : 'default',
       stroke: "none",
       "data-highlighted": isHighlighted || undefined,
-      "data-faded": isFaded || undefined
+      "data-faded": isFaded || undefined,
+      className: classes.node
     }, interactionProps))
   });
 });

package/SankeyChart/SankeyNodeLabel.js

@@ -9,6 +9,7 @@ exports.SankeyNodeLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _sankeyHighlightHooks = require("./sankeyHighlightHooks");
+var _sankeyClasses = require("./sankeyClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -29,6 +30,7 @@ const SankeyNodeLabel = exports.SankeyNodeLabel = /*#__PURE__*/React.forwardRef(
   : x0 - 6; // Left side for other columns
 
   const labelAnchor = isRightSide ? 'start' : 'end';
+  const classes = (0, _sankeyClasses.useUtilityClasses)();
   const highlightState = (0, _sankeyHighlightHooks.useSankeyNodeHighlightState)(node.id);
   let opacity = 1;
   if (highlightState === 'faded') {
@@ -41,6 +43,7 @@ const SankeyNodeLabel = exports.SankeyNodeLabel = /*#__PURE__*/React.forwardRef(
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
     ref: ref,
+    className: classes.nodeLabel,
     x: labelX,
     y: (y0 + y1) / 2,
     textAnchor: labelAnchor,

package/SankeyChart/SankeyPlot.js

@@ -18,8 +18,8 @@ var _SankeyNodeLabelPlot = require("./SankeyNodeLabelPlot");
 var _SankeyLinkLabelPlot = require("./SankeyLinkLabelPlot");
 var _jsxRuntime = require("react/jsx-runtime");
 const SankeyPlotRoot = (0, _styles.styled)('g', {
-  slot: 'internal',
-  shouldForwardProp: undefined
+  name: 'MuiSankeyPlot',
+  slot: 'Root'
 })({});
 
 /**

package/SankeyChart/index.d.ts

@@ -12,6 +12,7 @@ export * from "./sankey.types.js";
 export * from "./sankeySlots.types.js";
 export * from "./sankeyHighlightHooks.js";
 export * from "../hooks/useSankeySeries.js";
-export { type SankeyPlotClasses, sankeyPlotClasses } from "./sankeyClasses.js";
+export { type SankeyPlotClasses, sankeyPlotClasses, sankeyClasses } from "./sankeyClasses.js";
+export type { SankeyClassKey, SankeyClasses } from "./sankeyClasses.js";
 export { SankeyTooltip, SankeyTooltipContent } from "./SankeyTooltip/index.js";
 export type { SankeyTooltipProps } from "./SankeyTooltip/index.js";

package/SankeyChart/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   Unstable_SankeyChart: true,
   sankeyPlotClasses: true,
+  sankeyClasses: true,
   SankeyTooltip: true,
   SankeyTooltipContent: true
 };
@@ -27,6 +28,12 @@ Object.defineProperty(exports, "Unstable_SankeyChart", {
     return _SankeyChart.SankeyChart;
   }
 });
+Object.defineProperty(exports, "sankeyClasses", {
+  enumerable: true,
+  get: function () {
+    return _sankeyClasses.sankeyClasses;
+  }
+});
 Object.defineProperty(exports, "sankeyPlotClasses", {
   enumerable: true,
   get: function () {

package/SankeyChart/sankeyClasses.d.ts

@@ -1,4 +1,4 @@
-export interface SankeyPlotClasses {
+export interface SankeyClasses {
   /** Styles applied to the root element. */
   root: string;
   /** Styles applied to the nodes container. */
@@ -9,9 +9,30 @@ export interface SankeyPlotClasses {
   links: string;
   /** Styles applied to the link label container. */
   linkLabels: string;
+  /** Styles applied to an individual node element. */
+  node: string;
+  /** Styles applied to an individual link element. */
+  link: string;
+  /** Styles applied to an individual node label element. */
+  nodeLabel: string;
+  /** Styles applied to an individual link label element. */
+  linkLabel: string;
 }
-export declare function getSankeyPlotUtilityClass(slot: string): string;
-export declare const sankeyPlotClasses: SankeyPlotClasses;
-export declare const useUtilityClasses: (ownerState: {
-  classes?: Partial<SankeyPlotClasses>;
-}) => Record<"nodes" | "links" | "root" | "nodeLabels" | "linkLabels", string>;
+export type SankeyClassKey = keyof SankeyClasses;
+/**
+ * @deprecated Use `SankeyClasses` instead.
+ */
+export type SankeyPlotClasses = SankeyClasses;
+export declare function getSankeyUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `getSankeyUtilityClass` instead.
+ */
+export declare const getSankeyPlotUtilityClass: typeof getSankeyUtilityClass;
+export declare const sankeyClasses: SankeyClasses;
+/**
+ * @deprecated Use `sankeyClasses` instead.
+ */
+export declare const sankeyPlotClasses: SankeyClasses;
+export declare const useUtilityClasses: (options?: {
+  classes?: Partial<SankeyClasses>;
+}) => Record<"nodes" | "links" | "node" | "link" | "root" | "nodeLabels" | "linkLabels" | "nodeLabel" | "linkLabel", string>;

package/SankeyChart/sankeyClasses.js

@@ -4,26 +4,45 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSankeyPlotUtilityClass = getSankeyPlotUtilityClass;
-exports.useUtilityClasses = exports.sankeyPlotClasses = void 0;
+exports.getSankeyPlotUtilityClass = void 0;
+exports.getSankeyUtilityClass = getSankeyUtilityClass;
+exports.useUtilityClasses = exports.sankeyPlotClasses = exports.sankeyClasses = void 0;
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
-function getSankeyPlotUtilityClass(slot) {
+/**
+ * @deprecated Use `SankeyClasses` instead.
+ */
+
+function getSankeyUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiSankeyChart', slot);
 }
-const sankeyPlotClasses = exports.sankeyPlotClasses = (0, _generateUtilityClasses.default)('MuiSankeyChart', ['root', 'nodes', 'nodeLabels', 'links', 'linkLabels']);
-const useUtilityClasses = ownerState => {
+
+/**
+ * @deprecated Use `getSankeyUtilityClass` instead.
+ */
+const getSankeyPlotUtilityClass = exports.getSankeyPlotUtilityClass = getSankeyUtilityClass;
+const sankeyClasses = exports.sankeyClasses = (0, _generateUtilityClasses.default)('MuiSankeyChart', ['root', 'nodes', 'nodeLabels', 'links', 'linkLabels', 'node', 'link', 'nodeLabel', 'linkLabel']);
+
+/**
+ * @deprecated Use `sankeyClasses` instead.
+ */
+const sankeyPlotClasses = exports.sankeyPlotClasses = sankeyClasses;
+const useUtilityClasses = options => {
   const {
     classes
-  } = ownerState;
+  } = options ?? {};
   const slots = {
     root: ['root'],
     nodes: ['nodes'],
     nodeLabels: ['nodeLabels'],
     links: ['links'],
-    linkLabels: ['linkLabels']
+    linkLabels: ['linkLabels'],
+    node: ['node'],
+    link: ['link'],
+    nodeLabel: ['nodeLabel'],
+    linkLabel: ['linkLabel']
   };
-  return (0, _composeClasses.default)(slots, getSankeyPlotUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, getSankeyUtilityClass, classes);
 };
 exports.useUtilityClasses = useUtilityClasses;

package/ScatterChartPro/ScatterChartPro.js

@@ -1570,8 +1570,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
       type: _propTypes.default.oneOf(['doubleTapReset']).isRequired
     }), _propTypes.default.shape({
-      pointerMode: _propTypes.default.any,
-      requiredKeys: _propTypes.default.array,
+      pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
       type: _propTypes.default.oneOf(['brush']).isRequired
     })]).isRequired)
   })

package/esm/BarChartPro/BarChartPro.js

@@ -1588,8 +1588,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['doubleTapReset']).isRequired
     }), PropTypes.shape({
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.array,
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['brush']).isRequired
     })]).isRequired)
   })

package/esm/ChartsDataProviderPro/ChartsDataProviderPro.js

@@ -10,7 +10,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartsDataProviderProProps } from "./useChartsDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc3MjY2ODgwMDAwMA==";
+const releaseInfo = "MTc3Mzk2NDgwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 export const defaultSeriesConfigPro = defaultSeriesConfig;
 

package/esm/FunnelChart/FunnelPlot.js

@@ -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.js";
 import { alignLabel, positionLabel } from "./labelUtils.js";
+import { useUtilityClasses } from "./funnelClasses.js";
 import { useFunnelSeriesContext } from "../hooks/useFunnelSeries.js";
 import { getFunnelCurve } from "./curves/index.js";
 import { FunnelSectionLabel } from "./FunnelSectionLabel.js";
@@ -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/esm/FunnelChart/FunnelSection.js

@@ -8,11 +8,12 @@ import { styled } from '@mui/material/styles';
 import { useInteractionItemProps, consumeSlots } from '@mui/x-charts/internals';
 import { useItemHighlighted } from '@mui/x-charts/hooks';
 import clsx from 'clsx';
-import { useUtilityClasses } from "./funnelSectionClasses.js";
+import { useUtilityClasses as useDeprecatedUtilityClasses } from "./funnelSectionClasses.js";
+import { useUtilityClasses } from "./funnelClasses.js";
 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'
 }));
@@ -21,7 +22,7 @@ export const FunnelSectionPath = styled('path', {
  * @ignore - internal component.
  */
 const FunnelSection = consumeSlots('MuiFunnelSection', 'funnelSection', {
-  classesResolver: useUtilityClasses
+  classesResolver: useDeprecatedUtilityClasses
 }, /*#__PURE__*/React.forwardRef(function FunnelSection(props, ref) {
   const {
       seriesId,
@@ -45,6 +46,9 @@ const FunnelSection = consumeSlots('MuiFunnelSection', 'funnelSection', {
     seriesId,
     dataIndex
   });
+  const newClasses = useUtilityClasses({
+    variant
+  });
   const isOutlined = variant === 'outlined';
   return /*#__PURE__*/_jsx(FunnelSectionPath, _extends({}, interactionProps, {
     filter: isHighlighted && !isOutlined ? 'brightness(120%)' : undefined,
@@ -58,7 +62,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(newClasses.section, classes?.root, className, isOutlined ? classes?.outlined : classes?.filled, isHighlighted && classes?.highlighted, isFaded && classes?.faded)
   }, other, {
     ref: ref
   }));

package/esm/FunnelChart/FunnelSectionLabel.d.ts

@@ -11,9 +11,15 @@ export interface FunnelSectionLabelConfig {
 export interface FunnelSectionLabelProps extends Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id'> {
   classes?: Partial<FunnelSectionClasses>;
   label: FunnelSectionLabelConfig;
+  /**
+   * Indicate if the section is filled or outlined.
+   * Can be used to apply different styles to the label.
+   */
+  variant?: 'filled' | 'outlined';
   seriesId: SeriesId;
   dataIndex: number;
 }
+export declare const FunnelSectionLabelText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGTextElementAttributes<SVGTextElement>, keyof React.SVGTextElementAttributes<SVGTextElement>>, {}>;
 /**
  * @ignore - internal component.
  */