@mui/x-charts-pro 9.0.0-alpha.3 → 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.
@@ -106,6 +110,10 @@ process.env.NODE_ENV !== "production" ? Heatmap.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 height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -163,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.
    *
@@ -181,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,
@@ -227,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.
@@ -269,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,
@@ -350,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,
@@ -488,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,
@@ -61,13 +46,12 @@ function HeatmapItem(props) {
   }, 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,
@@ -90,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,
@@ -53,11 +38,10 @@ function HeatmapItem(props) {
   }, skipInteractionItemProps);
   const ownerState = {
     seriesId,
-    dataIndex,
     color,
-    value,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    value
   };
   const classes = useUtilityClasses(ownerState);
   const Cell = slots?.cell ?? HeatmapCell;
@@ -82,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,15 +7,21 @@ 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)();
@@ -30,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);
@@ -53,7 +61,6 @@ function HeatmapSVGPlot(props) {
           xIndex: xIndex,
           yIndex: yIndex,
           color: color,
-          dataIndex: dataIndex,
           seriesId: series.seriesOrder[0],
           value: value,
           slots: props.slots,

package/Heatmap/HeatmapSVGPlot.mjs

@@ -1,15 +1,21 @@
 'use client';
 
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import { useXScale, useYScale, useZColorScale } from '@mui/x-charts/hooks';
 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();
@@ -24,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);
@@ -47,7 +55,6 @@ export function HeatmapSVGPlot(props) {
           xIndex: xIndex,
           yIndex: yIndex,
           color: color,
-          dataIndex: dataIndex,
           seriesId: series.seriesOrder[0],
           value: value,
           slots: props.slots,

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;

package/Heatmap/HeatmapTooltip/HeatmapTooltip.classes.mjs

@@ -1,5 +1,5 @@
 import composeClasses from '@mui/utils/composeClasses';
-import { getChartsTooltipUtilityClass } from '@mui/x-charts/ChartsTooltip';
+import { getChartsTooltipUtilityClass } from '@mui/x-charts/internals';
 export const useUtilityClasses = props => {
   const {
     classes

package/Heatmap/heatmapClasses.d.mts

@@ -1,4 +1,7 @@
+import type { HeatmapCellOwnerState } from "./HeatmapCell.mjs";
 export interface HeatmapClasses {
+  /** Styles applied to the heatmap plot root element. */
+  root: string;
   /** Styles applied to the heatmap cells. */
   cell: string;
   /**
@@ -14,9 +17,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.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;
   /**
@@ -14,9 +17,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;