@mui/x-charts-pro 8.27.5 → 8.28.0

package/BarChartPro/BarChartPro.js

@@ -1595,8 +1595,8 @@ process.env.NODE_ENV !== "production" ? BarChartPro.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/CHANGELOG.md

@@ -5,6 +5,84 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.28.0
+
+_Mar 19, 2026_
+
+We'd like to extend a big thank you to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+TODO INSERT HIGHLIGHTS
+
+The following team members contributed to this release:
+@alexfauquette, @brijeshb42, @Janpot, @JCQuintas, @sai6855
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.28.0`
+
+- [DataGrid] Move `elementOverrides` to constants and remove duplicates (@sai6855) (#21752) @github-actions[bot]
+
+#### `@mui/x-data-grid-pro@8.28.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.28.0`.
+
+#### `@mui/x-data-grid-premium@8.28.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.28.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.27.2`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.27.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.27.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.28.0`
+
+- [charts] Improve deprecation warnings (#21760) (#21767) @alexfauquette
+- [charts] Refactor `FunnelChart` classes structure (@JCQuintas) (#21763) @github-actions[bot]
+- [charts] Refactor `Heatmap` classes structure (#21653) (#21745) @JCQuintas
+- [charts] Refactor `PieChart` classes structure (@JCQuintas) (#21715) @github-actions[bot]
+- [charts] Refactor `RadarChart` classes structure (@JCQuintas) (#21730) @github-actions[bot]
+- [charts] Refactor `SankeyChart` classes structure (#21654) (#21726) @JCQuintas
+- [charts] Rename `data-series-id` by `data-series` (#21761) (#21772) @alexfauquette
+
+#### `@mui/x-charts-pro@8.28.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.28.0`, plus:
+
+- [charts-pro] Allow `brush` interaction to accept `requiredKeys/pointerMode` (#21723) @JCQuintas
+
+#### `@mui/x-charts-premium@8.28.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.28.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.27.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.27.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.27.2`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.27.0`
+
+Internal changes.
+
+### Core
+
+- [code-infra] Fix contributor generation in changelog (#21712) @brijeshb42
+- [code-infra] Install pkg-pr-new (#21778) @Janpot
+
 ## 8.27.5
 
 _Mar 11, 2026_

package/ChartsDataProviderPro/ChartsDataProviderPro.js

@@ -17,7 +17,7 @@ var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartsDataProviderProProps = require("./useChartsDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc3MzE4NzIwMDAwMA==";
+const releaseInfo = "MTc3Mzk2NDgwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 const defaultSeriesConfigPro = exports.defaultSeriesConfigPro = _internals.defaultSeriesConfig;
 

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/FunnelSection.js

@@ -15,11 +15,12 @@ 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'
 }));
@@ -52,6 +53,9 @@ const FunnelSection = exports.FunnelSection = (0, _internals.consumeSlots)('MuiF
     seriesId,
     dataIndex
   });
+  const newClasses = (0, _funnelClasses.useUtilityClasses)({
+    variant
+  });
   const isOutlined = variant === 'outlined';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FunnelSectionPath, (0, _extends2.default)({}, interactionProps, {
     filter: isHighlighted && !isOutlined ? 'brightness(120%)' : undefined,
@@ -65,7 +69,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)(newClasses.section, classes?.root, className, isOutlined ? classes?.outlined : classes?.filled, isHighlighted && classes?.highlighted, isFaded && classes?.faded)
   }, other, {
     ref: ref
   }));

package/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.
  */

package/FunnelChart/FunnelSectionLabel.js

@@ -6,15 +6,24 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FunnelSectionLabel = void 0;
+exports.FunnelSectionLabelText = exports.FunnelSectionLabel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-charts/internals");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _funnelSectionClasses = require("./funnelSectionClasses");
+var _funnelClasses = require("./funnelClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classes", "color", "onClick", "className", "label", "seriesId", "dataIndex"];
+const _excluded = ["classes", "color", "onClick", "className", "label", "variant", "seriesId", "dataIndex"];
+const FunnelSectionLabelText = exports.FunnelSectionLabelText = (0, _styles.styled)('text', {
+  name: 'MuiFunnelChart',
+  slot: 'SectionLabel'
+})(() => ({
+  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, fill-opacity 0.2s ease-in, filter 0.2s ease-in'
+}));
+
 /**
  * @ignore - internal component.
  */
@@ -23,11 +32,15 @@ const FunnelSectionLabel = exports.FunnelSectionLabel = (0, _internals.consumeSl
 }, /*#__PURE__*/React.forwardRef(function FunnelSectionLabel(props, ref) {
   const {
       classes,
-      label
+      label,
+      variant = 'filled'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const theme = (0, _styles.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", (0, _extends2.default)({
+  const newClasses = (0, _funnelClasses.useUtilityClasses)({
+    variant
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FunnelSectionLabelText, (0, _extends2.default)({
     stroke: "none",
     pointerEvents: "none",
     fontFamily: theme.typography.body2.fontFamily,
@@ -39,7 +52,7 @@ const FunnelSectionLabel = exports.FunnelSectionLabel = (0, _internals.consumeSl
     fontStyle: theme.typography.body2.fontStyle,
     fontVariant: theme.typography.body2.fontVariant,
     fill: (theme.vars || theme)?.palette?.text?.primary,
-    className: classes?.label,
+    className: (0, _clsx.default)(newClasses.sectionLabel, classes?.label),
     x: label.x,
     y: label.y,
     textAnchor: label.textAnchor ?? 'middle',

package/FunnelChart/funnelClasses.d.ts

@@ -0,0 +1,29 @@
+import { type SeriesId } from '@mui/x-charts/internals';
+export interface FunnelClasses {
+  /** Styles applied to the funnel plot element. */
+  root: string;
+  /** Styles applied to an individual funnel section element. */
+  section: string;
+  /** Styles applied to a funnel section element if `variant="filled"`. */
+  sectionFilled: string;
+  /** Styles applied to a funnel section element if `variant="outlined"`. */
+  sectionOutlined: string;
+  /** Styles applied to a funnel section label element. */
+  sectionLabel: string;
+}
+export type FunnelClassKey = keyof FunnelClasses;
+export interface FunnelSectionOwnerState {
+  seriesId: SeriesId;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<FunnelClasses>;
+}
+export declare function getFunnelUtilityClass(slot: string): string;
+export declare const funnelClasses: FunnelClasses;
+export interface UseUtilityClassesOptions {
+  variant?: 'filled' | 'outlined';
+  classes?: Partial<FunnelClasses>;
+}
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"section" | "sectionLabel" | "root", string>;

package/FunnelChart/funnelClasses.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.funnelClasses = void 0;
+exports.getFunnelUtilityClass = getFunnelUtilityClass;
+exports.useUtilityClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getFunnelUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiFunnelChart', slot);
+}
+const funnelClasses = exports.funnelClasses = (0, _generateUtilityClasses.default)('MuiFunnelChart', ['root', 'section', 'sectionFilled', 'sectionOutlined', 'sectionLabel', 'sectionLabelFilled', 'sectionLabelOutlined']);
+const useUtilityClasses = options => {
+  const {
+    variant,
+    classes
+  } = options ?? {};
+  const slots = {
+    root: ['root'],
+    section: ['section', variant === 'filled' && 'sectionFilled', variant === 'outlined' && 'sectionOutlined'],
+    sectionLabel: ['sectionLabel', variant === 'filled' && 'sectionLabelFilled', variant === 'outlined' && 'sectionLabelOutlined']
+  };
+  return (0, _composeClasses.default)(slots, getFunnelUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/FunnelChart/funnelSectionClasses.d.ts

@@ -1,5 +1,8 @@
 import type { FunnelSectionProps } from "./FunnelSection.js";
 import type { FunnelSectionLabelProps } from "./FunnelSectionLabel.js";
+/**
+ * @deprecated Use `FunnelClasses` from `funnelClasses` instead.
+ */
 export interface FunnelSectionClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -16,9 +19,19 @@ export interface FunnelSectionClasses {
   /**
    * Styles applied to the root element for a specified series.
    * Needs to be suffixed with the series ID: `.${funnelSectionClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series]` selector instead.
    */
   series: string;
 }
+/**
+ * @deprecated Use `useUtilityClasses` from `funnelClasses` instead.
+ */
 export declare const useUtilityClasses: (props: FunnelSectionProps) => Record<"label" | "filled" | "outlined" | "highlighted" | "faded" | "root", string>;
+/**
+ * @deprecated Use `useUtilityClasses` from `funnelClasses` instead.
+ */
 export declare const useLabelUtilityClasses: (props: FunnelSectionLabelProps) => Record<"label", string>;
+/**
+ * @deprecated Use `funnelClasses` from `funnelClasses` instead.
+ */
 export declare const funnelSectionClasses: FunnelSectionClasses;

package/FunnelChart/funnelSectionClasses.js

@@ -8,9 +8,20 @@ exports.useUtilityClasses = exports.useLabelUtilityClasses = exports.funnelSecti
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+/**
+ * @deprecated Use `FunnelClasses` from `funnelClasses` instead.
+ */
+
+/**
+ * @deprecated Use `getFunnelUtilityClass` from `funnelClasses` instead.
+ */
 function getFunnelSectionUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiFunnelSection', slot);
 }
+
+/**
+ * @deprecated Use `useUtilityClasses` from `funnelClasses` instead.
+ */
 const useUtilityClasses = props => {
   const {
     classes,
@@ -28,6 +39,10 @@ const useUtilityClasses = props => {
   };
   return (0, _composeClasses.default)(slots, getFunnelSectionUtilityClass, classes);
 };
+
+/**
+ * @deprecated Use `useUtilityClasses` from `funnelClasses` instead.
+ */
 exports.useUtilityClasses = useUtilityClasses;
 const useLabelUtilityClasses = props => {
   const {
@@ -40,5 +55,9 @@ const useLabelUtilityClasses = props => {
   };
   return (0, _composeClasses.default)(slots, getFunnelSectionUtilityClass, classes);
 };
+
+/**
+ * @deprecated Use `funnelClasses` from `funnelClasses` instead.
+ */
 exports.useLabelUtilityClasses = useLabelUtilityClasses;
 const funnelSectionClasses = exports.funnelSectionClasses = (0, _generateUtilityClasses.default)('MuiFunnelSection', ['root', 'highlighted', 'faded', 'filled', 'outlined', 'label', 'series', 'data-index']);

package/FunnelChart/index.d.ts

@@ -13,5 +13,7 @@ export * from "./FunnelChart.plugins.js";
 export type { FunnelCurveType } from "./curves/index.js";
 export { funnelSectionClasses } from "./funnelSectionClasses.js";
 export type { FunnelSectionClasses } from "./funnelSectionClasses.js";
+export { funnelClasses } from "./funnelClasses.js";
+export type { FunnelClassKey, FunnelClasses } from "./funnelClasses.js";
 export { FunnelSection } from "./FunnelSection.js";
 export { FunnelSectionLabel } from "./FunnelSectionLabel.js";

package/FunnelChart/index.js

@@ -7,6 +7,7 @@ var _exportNames = {
   Unstable_FunnelChart: true,
   FunnelChart: true,
   funnelSectionClasses: true,
+  funnelClasses: true,
   FunnelSection: true,
   FunnelSectionLabel: true
 };
@@ -29,6 +30,12 @@ Object.defineProperty(exports, "FunnelSectionLabel", {
   }
 });
 exports.Unstable_FunnelChart = void 0;
+Object.defineProperty(exports, "funnelClasses", {
+  enumerable: true,
+  get: function () {
+    return _funnelClasses.funnelClasses;
+  }
+});
 Object.defineProperty(exports, "funnelSectionClasses", {
   enumerable: true,
   get: function () {
@@ -109,6 +116,7 @@ Object.keys(_FunnelChart2).forEach(function (key) {
   });
 });
 var _funnelSectionClasses = require("./funnelSectionClasses");
+var _funnelClasses = require("./funnelClasses");
 var _FunnelSection = require("./FunnelSection");
 var _FunnelSectionLabel = require("./FunnelSectionLabel");
 /**

package/Heatmap/Heatmap.js

@@ -569,8 +569,8 @@ process.env.NODE_ENV !== "production" ? Heatmap.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/Heatmap/HeatmapCell.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { SeriesId } from "../models/index.js";
+import type { HeatmapClasses } from "./heatmapClasses.js";
+export interface HeatmapCellOwnerState {
+  seriesId: SeriesId;
+  dataIndex: number;
+  color: string;
+  value: number;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<HeatmapClasses>;
+}
+/**
+ * @deprecated Use `HeatmapCellOwnerState` instead.
+ */
+export type HeatmapItemOwnerState = HeatmapCellOwnerState;
+export interface HeatmapCellProps extends React.ComponentPropsWithRef<'rect'> {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  ownerState: HeatmapCellOwnerState;
+}
+/**
+ * Demos:
+ *
+ * - [Heatmap](https://mui.com/x/react-charts/heatmap/)
+ *
+ * API:
+ *
+ * - [HeatmapCell API](https://mui.com/x/api/charts/heatmap-cell/)
+ */
+declare const HeatmapCell: React.ForwardRefExoticComponent<Omit<HeatmapCellProps, "ref"> & React.RefAttributes<SVGRectElement>>;
+export { HeatmapCell };

package/Heatmap/HeatmapCell.js

@@ -0,0 +1,64 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeatmapCell = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @deprecated Use `HeatmapCellOwnerState` instead.
+ */
+
+const HeatmapCellRoot = (0, _styles.styled)('rect', {
+  name: 'MuiHeatmap',
+  slot: 'Cell',
+  overridesResolver: (_, styles) => styles.cell
+})(({
+  ownerState
+}) => ({
+  filter: ownerState.isHighlighted && 'saturate(120%)' || ownerState.isFaded && 'saturate(80%)' || undefined,
+  fill: ownerState.color,
+  shapeRendering: 'crispEdges'
+}));
+
+/**
+ * Demos:
+ *
+ * - [Heatmap](https://mui.com/x/react-charts/heatmap/)
+ *
+ * API:
+ *
+ * - [HeatmapCell API](https://mui.com/x/api/charts/heatmap-cell/)
+ */
+const HeatmapCell = exports.HeatmapCell = /*#__PURE__*/React.forwardRef(function HeatmapCell(props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(HeatmapCellRoot, (0, _extends2.default)({
+    ref: ref
+  }, props));
+});
+if (process.env.NODE_ENV !== "production") HeatmapCell.displayName = "HeatmapCell";
+process.env.NODE_ENV !== "production" ? HeatmapCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  height: _propTypes.default.number.isRequired,
+  ownerState: _propTypes.default.shape({
+    classes: _propTypes.default.object,
+    color: _propTypes.default.string.isRequired,
+    dataIndex: _propTypes.default.number.isRequired,
+    isFaded: _propTypes.default.bool.isRequired,
+    isHighlighted: _propTypes.default.bool.isRequired,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    value: _propTypes.default.number.isRequired
+  }).isRequired,
+  width: _propTypes.default.number.isRequired,
+  x: _propTypes.default.number.isRequired,
+  y: _propTypes.default.number.isRequired
+} : void 0;

package/Heatmap/HeatmapItem.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
-import { type HeatmapItemOwnerState } from "./internals/HeatmapCell.js";
+import { type HeatmapCellProps } from "./HeatmapCell.js";
 export interface HeatmapItemSlots {
   /**
    * The component that renders the heatmap cell.
@@ -33,13 +33,6 @@ export interface HeatmapItemProps {
    */
   slots?: HeatmapItemSlots;
 }
-export interface HeatmapCellProps extends React.ComponentPropsWithRef<'rect'> {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  ownerState: HeatmapItemOwnerState;
-}
 /**
  * @ignore - internal component.
  */

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;