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

package/Heatmap/Heatmap.mjs

@@ -13,7 +13,7 @@ import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay';
 import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
 import { HeatmapPlot } from "./HeatmapPlot.mjs";
 import { HeatmapTooltip } from "./HeatmapTooltip/index.mjs";
-import { ChartDataProviderPro } from "../ChartDataProviderPro/index.mjs";
+import { ChartsDataProviderPro } from "../ChartsDataProviderPro/index.mjs";
 import { ChartsToolbarPro } from "../ChartsToolbarPro/index.mjs";
 import { FocusedHeatmapCell } from "./FocusedHeatmapCell.mjs";
 import { useHeatmapProps } from "./useHeatmapProps.mjs";
@@ -33,7 +33,7 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
     showToolbar = false
   } = props;
   const {
-    chartDataProviderProProps,
+    chartsDataProviderProProps,
     chartsWrapperProps,
     chartsAxisProps,
     clipPathProps,
@@ -45,7 +45,7 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
   } = useHeatmapProps(props);
   const Tooltip = slots?.tooltip ?? HeatmapTooltip;
   const Toolbar = slots?.toolbar ?? ChartsToolbarPro;
-  return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
+  return /*#__PURE__*/_jsx(ChartsDataProviderPro, _extends({}, chartsDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       ref: ref,
       children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsLayerContainer, {
@@ -95,6 +95,10 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * 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.
@@ -102,7 +106,14 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
-  enableKeyboardNavigation: PropTypes.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: PropTypes.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -160,15 +171,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   })]),
-  /**
-   * The function called for onClick events.
-   * The second argument contains information about all line/bar elements at the current mouse position.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
-   *
-   * @deprecated Use `onItemClick` instead to get access to both x- and y-axis values.
-   */
-  onAxisClick: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *
@@ -178,7 +180,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   /**
    * The callback fired when an item is clicked.
    *
-   * @param {React.MouseEvent<SVGSVGElement, MouseEvent>} event The click event.
+   * @param {React.MouseEvent<HTMLDivElement, MouseEvent>} event The click event.
    * @param {SeriesItemIdentifierWithType<SeriesType>} item The clicked item.
    */
   onItemClick: PropTypes.func,
@@ -193,7 +195,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: PropTypes.func,
   /**
@@ -224,6 +226,10 @@ process.env.NODE_ENV !== "production" ? Heatmap.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 configuration of the tooltip.
@@ -243,13 +249,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * Used when the tooltip is controlled.
    */
   tooltipItem: PropTypes.oneOfType([PropTypes.shape({
-    dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['heatmap']).isRequired,
     xIndex: PropTypes.number.isRequired,
     yIndex: PropTypes.number.isRequired
   }), PropTypes.shape({
-    dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
     xIndex: PropTypes.number.isRequired,
     yIndex: PropTypes.number.isRequired
@@ -268,6 +272,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     barGapRatio: PropTypes.number,
     categoryGapRatio: PropTypes.number,
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -349,6 +354,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     barGapRatio: PropTypes.number,
     categoryGapRatio: PropTypes.number,
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -487,8 +493,8 @@ process.env.NODE_ENV !== "production" ? Heatmap.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/Heatmap/HeatmapCell.d.mts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { SeriesId } from "../models/index.mjs";
+import type { HeatmapClasses } from "./heatmapClasses.mjs";
+export interface HeatmapCellOwnerState {
+  seriesId: SeriesId;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<HeatmapClasses>;
+  value: number;
+}
+/**
+ * @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.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { SeriesId } from "../models/index.js";
+import type { HeatmapClasses } from "./heatmapClasses.js";
+export interface HeatmapCellOwnerState {
+  seriesId: SeriesId;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<HeatmapClasses>;
+  value: number;
+}
+/**
+ * @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,62 @@
+"use strict";
+
+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,
+    isFaded: _propTypes.default.bool.isRequired,
+    isHighlighted: _propTypes.default.bool.isRequired,
+    seriesId: _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/HeatmapCell.mjs

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+/**
+ * @deprecated Use `HeatmapCellOwnerState` instead.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const HeatmapCellRoot = 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 = /*#__PURE__*/React.forwardRef(function HeatmapCell(props, ref) {
+  return /*#__PURE__*/_jsx(HeatmapCellRoot, _extends({
+    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.number.isRequired,
+  ownerState: PropTypes.shape({
+    classes: PropTypes.object,
+    color: PropTypes.string.isRequired,
+    isFaded: PropTypes.bool.isRequired,
+    isHighlighted: PropTypes.bool.isRequired,
+    seriesId: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  }).isRequired,
+  width: PropTypes.number.isRequired,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired
+} : void 0;
+export { HeatmapCell };

package/Heatmap/HeatmapItem.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
-import { type HeatmapItemOwnerState } from "./internals/HeatmapCell.mjs";
+import { type HeatmapCellProps } from "./HeatmapCell.mjs";
 export interface HeatmapItemSlots {
   /**
    * The component that renders the heatmap cell.
@@ -12,7 +12,6 @@ export interface HeatmapItemSlotProps {
   cell?: Partial<HeatmapCellProps>;
 }
 export interface HeatmapItemProps {
-  dataIndex: number;
   seriesId: SeriesId;
   value: number;
   width: number;
@@ -39,13 +38,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.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.
@@ -12,7 +12,6 @@ export interface HeatmapItemSlotProps {
   cell?: Partial<HeatmapCellProps>;
 }
 export interface HeatmapItemProps {
-  dataIndex: number;
   seriesId: SeriesId;
   value: number;
   width: number;
@@ -39,13 +38,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,33 +11,18 @@ 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", "borderRadius", "xIndex", "yIndex", "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);
-};
-
+const _excluded = ["seriesId", "color", "value", "isHighlighted", "isFaded", "borderRadius", "xIndex", "yIndex", "slotProps", "slots"];
 /**
  * @ignore - internal component.
  */
 function HeatmapItem(props) {
   const {
       seriesId,
-      dataIndex,
       color,
       value,
       isHighlighted = false,
@@ -56,19 +41,17 @@ function HeatmapItem(props) {
   const interactionProps = (0, _internals.useInteractionItemProps)({
     type: 'heatmap',
     seriesId,
-    dataIndex,
     xIndex,
     yIndex
   }, skipInteractionItemProps);
   const ownerState = {
     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,
@@ -91,7 +74,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/HeatmapItem.mjs

@@ -1,35 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId", "dataIndex", "color", "value", "isHighlighted", "isFaded", "borderRadius", "xIndex", "yIndex", "slotProps", "slots"];
+const _excluded = ["seriesId", "color", "value", "isHighlighted", "isFaded", "borderRadius", "xIndex", "yIndex", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
-import composeClasses from '@mui/utils/composeClasses';
 import { useInteractionItemProps } from '@mui/x-charts/internals';
-import { getHeatmapUtilityClass } from "./heatmapClasses.mjs";
-import { HeatmapCell } from "./internals/HeatmapCell.mjs";
+import { useUtilityClasses } from "./heatmapClasses.mjs";
+import { HeatmapCell } from "./HeatmapCell.mjs";
 import { shouldRegisterPointerInteractionsGlobally } from "./shouldRegisterPointerInteractionsGlobally.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    cell: ['cell', `series-${seriesId}`, isFaded && 'faded', isHighlighted && 'highlighted']
-  };
-  return composeClasses(slots, getHeatmapUtilityClass, classes);
-};
-
 /**
  * @ignore - internal component.
  */
 function HeatmapItem(props) {
   const {
       seriesId,
-      dataIndex,
       color,
       value,
       isHighlighted = false,
@@ -48,17 +33,15 @@ function HeatmapItem(props) {
   const interactionProps = useInteractionItemProps({
     type: 'heatmap',
     seriesId,
-    dataIndex,
     xIndex,
     yIndex
   }, skipInteractionItemProps);
   const ownerState = {
     seriesId,
-    dataIndex,
     color,
-    value,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    value
   };
   const classes = useUtilityClasses(ownerState);
   const Cell = slots?.cell ?? HeatmapCell;
@@ -83,7 +66,6 @@ process.env.NODE_ENV !== "production" ? HeatmapItem.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   color: PropTypes.string.isRequired,
-  dataIndex: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
   seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**

package/Heatmap/HeatmapSVGPlot.js

@@ -7,23 +7,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.HeatmapSVGPlot = HeatmapSVGPlot;
 var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
 var _hooks = require("@mui/x-charts/hooks");
 var _internals = require("@mui/x-charts/internals");
 var _hooks2 = require("../hooks");
 var _HeatmapItem = require("./HeatmapItem");
 var _useChartHeatmapPosition = require("../plugins/selectors/useChartHeatmapPosition.selectors");
 var _shouldRegisterPointerInteractionsGlobally = require("./shouldRegisterPointerInteractionsGlobally");
+var _heatmapClasses = require("./heatmapClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const MemoHeatmapItem = /*#__PURE__*/React.memo(_HeatmapItem.HeatmapItem);
 if (process.env.NODE_ENV !== "production") MemoHeatmapItem.displayName = "MemoHeatmapItem";
+const HeatmapPlotRoot = (0, _styles.styled)('g', {
+  name: 'MuiHeatmapPlot',
+  slot: 'Root'
+})();
 function HeatmapSVGPlot(props) {
   const store = (0, _internals.useStore)();
   const xScale = (0, _hooks.useXScale)();
   const yScale = (0, _hooks.useYScale)();
   const colorScale = (0, _hooks.useZColorScale)();
   const series = (0, _hooks2.useHeatmapSeriesContext)();
-  const isHighlighted = store.use(_internals.selectorChartsIsHighlightedCallback);
-  const isFaded = store.use(_internals.selectorChartsIsFadedCallback);
+  const getHighlightState = store.use(_internals.selectorChartsHighlightStateCallback);
   const xDomain = xScale.domain();
   const yDomain = yScale.domain();
   if (!series || series.seriesOrder.length === 0) {
@@ -31,8 +36,10 @@ function HeatmapSVGPlot(props) {
   }
   const seriesToDisplay = series.series[series.seriesOrder[0]];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [(0, _shouldRegisterPointerInteractionsGlobally.shouldRegisterPointerInteractionsGlobally)(props.slots, props.slotProps) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RegisterHeatmapPointerInteractions, {}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-      children: seriesToDisplay.data.map(([xIndex, yIndex, value], dataIndex) => {
+    children: [(0, _shouldRegisterPointerInteractionsGlobally.shouldRegisterPointerInteractionsGlobally)(props.slots, props.slotProps) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RegisterHeatmapPointerInteractions, {}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(HeatmapPlotRoot, {
+      className: _heatmapClasses.heatmapClasses.root,
+      "data-series": seriesToDisplay.id,
+      children: seriesToDisplay.data.map(([xIndex, yIndex, value]) => {
         const x = xScale(xDomain[xIndex]);
         const y = yScale(yDomain[yIndex]);
         const color = colorScale?.(value);
@@ -45,6 +52,7 @@ function HeatmapSVGPlot(props) {
           xIndex,
           yIndex
         };
+        const highlightState = getHighlightState(item);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(MemoHeatmapItem, {
           width: xScale.bandwidth(),
           height: yScale.bandwidth(),
@@ -53,13 +61,12 @@ function HeatmapSVGPlot(props) {
           xIndex: xIndex,
           yIndex: yIndex,
           color: color,
-          dataIndex: dataIndex,
           seriesId: series.seriesOrder[0],
           value: value,
           slots: props.slots,
           slotProps: props.slotProps,
-          isHighlighted: isHighlighted(item),
-          isFaded: isFaded(item),
+          isHighlighted: highlightState === 'highlighted',
+          isFaded: highlightState === 'faded',
           borderRadius: props.borderRadius
         }, `${xIndex}_${yIndex}`);
       })

package/Heatmap/HeatmapSVGPlot.mjs

@@ -1,23 +1,28 @@
 'use client';
 
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import { useXScale, useYScale, useZColorScale } from '@mui/x-charts/hooks';
-import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback, useStore, useRegisterPointerInteractions } from '@mui/x-charts/internals';
+import { selectorChartsHighlightStateCallback, useStore, useRegisterPointerInteractions } from '@mui/x-charts/internals';
 import { useHeatmapSeriesContext } from "../hooks/index.mjs";
 import { HeatmapItem } from "./HeatmapItem.mjs";
 import { selectorHeatmapItemAtPosition } from "../plugins/selectors/useChartHeatmapPosition.selectors.mjs";
 import { shouldRegisterPointerInteractionsGlobally } from "./shouldRegisterPointerInteractionsGlobally.mjs";
+import { heatmapClasses } from "./heatmapClasses.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MemoHeatmapItem = /*#__PURE__*/React.memo(HeatmapItem);
 if (process.env.NODE_ENV !== "production") MemoHeatmapItem.displayName = "MemoHeatmapItem";
+const HeatmapPlotRoot = styled('g', {
+  name: 'MuiHeatmapPlot',
+  slot: 'Root'
+})();
 export function HeatmapSVGPlot(props) {
   const store = useStore();
   const xScale = useXScale();
   const yScale = useYScale();
   const colorScale = useZColorScale();
   const series = useHeatmapSeriesContext();
-  const isHighlighted = store.use(selectorChartsIsHighlightedCallback);
-  const isFaded = store.use(selectorChartsIsFadedCallback);
+  const getHighlightState = store.use(selectorChartsHighlightStateCallback);
   const xDomain = xScale.domain();
   const yDomain = yScale.domain();
   if (!series || series.seriesOrder.length === 0) {
@@ -25,8 +30,10 @@ export function HeatmapSVGPlot(props) {
   }
   const seriesToDisplay = series.series[series.seriesOrder[0]];
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [shouldRegisterPointerInteractionsGlobally(props.slots, props.slotProps) ? /*#__PURE__*/_jsx(RegisterHeatmapPointerInteractions, {}) : null, /*#__PURE__*/_jsx("g", {
-      children: seriesToDisplay.data.map(([xIndex, yIndex, value], dataIndex) => {
+    children: [shouldRegisterPointerInteractionsGlobally(props.slots, props.slotProps) ? /*#__PURE__*/_jsx(RegisterHeatmapPointerInteractions, {}) : null, /*#__PURE__*/_jsx(HeatmapPlotRoot, {
+      className: heatmapClasses.root,
+      "data-series": seriesToDisplay.id,
+      children: seriesToDisplay.data.map(([xIndex, yIndex, value]) => {
         const x = xScale(xDomain[xIndex]);
         const y = yScale(yDomain[yIndex]);
         const color = colorScale?.(value);
@@ -39,6 +46,7 @@ export function HeatmapSVGPlot(props) {
           xIndex,
           yIndex
         };
+        const highlightState = getHighlightState(item);
         return /*#__PURE__*/_jsx(MemoHeatmapItem, {
           width: xScale.bandwidth(),
           height: yScale.bandwidth(),
@@ -47,13 +55,12 @@ export function HeatmapSVGPlot(props) {
           xIndex: xIndex,
           yIndex: yIndex,
           color: color,
-          dataIndex: dataIndex,
           seriesId: series.seriesOrder[0],
           value: value,
           slots: props.slots,
           slotProps: props.slotProps,
-          isHighlighted: isHighlighted(item),
-          isFaded: isFaded(item),
+          isHighlighted: highlightState === 'highlighted',
+          isFaded: highlightState === 'faded',
           borderRadius: props.borderRadius
         }, `${xIndex}_${yIndex}`);
       })

package/Heatmap/HeatmapTooltip/HeatmapTooltip.classes.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useUtilityClasses = void 0;
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
+var _internals = require("@mui/x-charts/internals");
 const useUtilityClasses = props => {
   const {
     classes
@@ -22,6 +22,6 @@ const useUtilityClasses = props => {
     labelCell: ['labelCell'],
     valueCell: ['valueCell']
   };
-  return (0, _composeClasses.default)(slots, _ChartsTooltip.getChartsTooltipUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _internals.getChartsTooltipUtilityClass, classes);
 };
 exports.useUtilityClasses = useUtilityClasses;