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

package/FunnelChart/FunnelPlot.d.mts

@@ -2,6 +2,10 @@ import * as React from 'react';
 import { type FunnelItemIdentifier } from "./funnel.types.mjs";
 import { type FunnelPlotSlotExtension } from "./funnelPlotSlots.types.mjs";
 export interface FunnelPlotProps extends FunnelPlotSlotExtension {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * Callback fired when a funnel item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/FunnelChart/FunnelPlot.d.ts

@@ -2,6 +2,10 @@ import * as React from 'react';
 import { type FunnelItemIdentifier } from "./funnel.types.js";
 import { type FunnelPlotSlotExtension } from "./funnelPlotSlots.types.js";
 export interface FunnelPlotProps extends FunnelPlotSlotExtension {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * Callback fired when a funnel item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/FunnelChart/FunnelPlot.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _internals = require("@mui/x-charts/internals");
 var _FunnelSection = require("./FunnelSection");
@@ -23,7 +24,7 @@ var _useChartFunnelAxisRendering = require("./funnelAxisPlugin/useChartFunnelAxi
 var _coordinateMapper = require("./coordinateMapper");
 var _get2DExtrema = require("./get2DExtrema");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["onItemClick"];
+const _excluded = ["className", "onItemClick"];
 _internals.cartesianSeriesTypes.addType('funnel');
 const useAggregatedData = () => {
   const seriesData = (0, _useFunnelSeries.useFunnelSeriesContext)();
@@ -107,13 +108,14 @@ const useAggregatedData = () => {
 };
 function FunnelPlot(props) {
   const {
+      className,
       onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const data = useAggregatedData();
   const classes = (0, _funnelClasses.useUtilityClasses)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-    className: classes.root,
+    className: (0, _clsx.default)(classes.root, className),
     children: [data.map(series => {
       if (series.length === 0) {
         return null;

package/FunnelChart/FunnelPlot.mjs

@@ -1,8 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["onItemClick"];
+const _excluded = ["className", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
 import { cartesianSeriesTypes, useStore } from '@mui/x-charts/internals';
 import { FunnelSection } from "./FunnelSection.mjs";
@@ -99,13 +100,14 @@ const useAggregatedData = () => {
 };
 function FunnelPlot(props) {
   const {
+      className,
       onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const data = useAggregatedData();
   const classes = useUtilityClasses();
   return /*#__PURE__*/_jsxs("g", {
-    className: classes.root,
+    className: clsx(classes.root, className),
     children: [data.map(series => {
       if (series.length === 0) {
         return null;

package/FunnelChart/categoryAxis.types.d.mts

@@ -20,7 +20,8 @@ export type CategoryAxis<S extends FunnelScaleName = FunnelScaleName> = S extend
    * The size of the axis.
    * - If the axis is horizontal, the size is the height of the axis.
    * - If the axis is vertical, the size is the width of the axis.
+   * - If set to `'auto'`, the size is automatically calculated based on tick label measurements.
    */
-  size?: number;
+  size?: number | 'auto';
   scaleType?: S;
 } & MakeOptional<Pick<AxisConfig<S, any>, 'disableLine' | 'disableTicks' | 'tickLabelStyle' | 'tickSize' | 'id'>, 'id'> : never;

package/FunnelChart/categoryAxis.types.d.ts

@@ -20,7 +20,8 @@ export type CategoryAxis<S extends FunnelScaleName = FunnelScaleName> = S extend
    * The size of the axis.
    * - If the axis is horizontal, the size is the height of the axis.
    * - If the axis is vertical, the size is the width of the axis.
+   * - If set to `'auto'`, the size is automatically calculated based on tick label measurements.
    */
-  size?: number;
+  size?: number | 'auto';
   scaleType?: S;
 } & MakeOptional<Pick<AxisConfig<S, any>, 'disableLine' | 'disableTicks' | 'tickLabelStyle' | 'tickSize' | 'id'>, 'id'> : never;

package/FunnelChart/funnelAxisPlugin/computeAxisValue.d.mts

@@ -1,6 +1,6 @@
 import { type ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { type ChartDrawingArea } from '@mui/x-charts/hooks';
-import { type ComputedAxisConfig, type ChartSeriesType, type ProcessedSeries, type ChartSeriesConfig, type DefaultedYAxis, type DefaultedXAxis } from '@mui/x-charts/internals';
+import { type ComputedAxisConfig, type ChartSeriesType, type ProcessedSeries, type ChartSeriesConfig, type DefaultedYAxis, type DefaultedXAxis, type AxisId } from '@mui/x-charts/internals';
 import { type ChartsXAxisProps, type ChartsYAxisProps } from '@mui/x-charts/models';
 export declare const xRangeGetter: (drawingArea: ChartDrawingArea, reverse?: boolean, removedSpace?: number) => [number, number];
 export declare const yRangeGetter: (drawingArea: ChartDrawingArea, reverse?: boolean, removedSpace?: number) => [number, number];
@@ -13,6 +13,7 @@ type ComputeCommonParams<SeriesType extends ChartSeriesType = 'funnel'> = {
   formattedSeries: ProcessedSeries<SeriesType>;
   seriesConfig: ChartSeriesConfig<SeriesType>;
   gap: number;
+  autoSizes?: Record<AxisId, number>;
 };
 export declare function computeAxisValue(options: ComputeCommonParams<'funnel'> & {
   axis?: DefaultedYAxis[];

package/FunnelChart/funnelAxisPlugin/computeAxisValue.d.ts

@@ -1,6 +1,6 @@
 import { type ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import { type ChartDrawingArea } from '@mui/x-charts/hooks';
-import { type ComputedAxisConfig, type ChartSeriesType, type ProcessedSeries, type ChartSeriesConfig, type DefaultedYAxis, type DefaultedXAxis } from '@mui/x-charts/internals';
+import { type ComputedAxisConfig, type ChartSeriesType, type ProcessedSeries, type ChartSeriesConfig, type DefaultedYAxis, type DefaultedXAxis, type AxisId } from '@mui/x-charts/internals';
 import { type ChartsXAxisProps, type ChartsYAxisProps } from '@mui/x-charts/models';
 export declare const xRangeGetter: (drawingArea: ChartDrawingArea, reverse?: boolean, removedSpace?: number) => [number, number];
 export declare const yRangeGetter: (drawingArea: ChartDrawingArea, reverse?: boolean, removedSpace?: number) => [number, number];
@@ -13,6 +13,7 @@ type ComputeCommonParams<SeriesType extends ChartSeriesType = 'funnel'> = {
   formattedSeries: ProcessedSeries<SeriesType>;
   seriesConfig: ChartSeriesConfig<SeriesType>;
   gap: number;
+  autoSizes?: Record<AxisId, number>;
 };
 export declare function computeAxisValue(options: ComputeCommonParams<'funnel'> & {
   axis?: DefaultedYAxis[];

package/FunnelChart/funnelAxisPlugin/computeAxisValue.js

@@ -28,7 +28,8 @@ function computeAxisValue({
   axis: allAxis,
   seriesConfig,
   axisDirection,
-  gap
+  gap,
+  autoSizes
 }) {
   if (allAxis === undefined) {
     return {
@@ -51,13 +52,17 @@ function computeAxisValue({
       const N = axis.data.length;
       const bandWidth = (rangeSpace - gap * (N - 1)) / N;
       const step = bandWidth + gap;
+      const resolvedSize = (0, _internals.resolveAxisSize)(axis, autoSizes, axisDirection);
       completeAxis[axis.id] = (0, _extends2.default)({
         offset: 0,
-        height: 0,
         categoryGapRatio: 0,
         barGapRatio: 0,
         triggerTooltip
-      }, axis, {
+      }, axis, axisDirection === 'x' ? {
+        height: resolvedSize
+      } : {
+        width: resolvedSize
+      }, {
         data,
         scale: (0, _internals.scaleBand)(axis.data, scaleRange).paddingInner(gap / step).paddingOuter(0),
         tickNumber: axis.data.length,
@@ -101,11 +106,15 @@ function computeAxisValue({
       const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
       const [minDomain, maxDomain] = finalScale.domain();
       const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
+      const resolvedSize = (0, _internals.resolveAxisSize)(axis, autoSizes, axisDirection);
       completeAxis[axis.id] = (0, _extends2.default)({
         offset: 0,
-        height: 0,
         triggerTooltip
-      }, axis, {
+      }, axis, axisDirection === 'x' ? {
+        height: resolvedSize
+      } : {
+        width: resolvedSize
+      }, {
         data,
         scaleType: scaleType,
         scale: finalScale.domain(domain),

package/FunnelChart/funnelAxisPlugin/computeAxisValue.mjs

@@ -1,6 +1,6 @@
 import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { getAxisExtrema, isBandScaleConfig, isPointScaleConfig, isContinuousScaleConfig, getScale, getColorScale, getOrdinalColorScale, getTickNumber, scaleTickNumberByRange, getCartesianAxisTriggerTooltip, isDateData, createDateFormatter, getDefaultTickNumber, scaleBand } from '@mui/x-charts/internals';
+import { getAxisExtrema, isBandScaleConfig, isPointScaleConfig, isContinuousScaleConfig, getScale, getColorScale, getOrdinalColorScale, getTickNumber, scaleTickNumberByRange, getCartesianAxisTriggerTooltip, isDateData, createDateFormatter, getDefaultTickNumber, scaleBand, resolveAxisSize } from '@mui/x-charts/internals';
 export const xRangeGetter = (drawingArea, reverse, removedSpace = 0) => {
   const range = [drawingArea.left, drawingArea.left + drawingArea.width - removedSpace];
   return reverse ? [range[1], range[0]] : [range[0], range[1]];
@@ -18,7 +18,8 @@ export function computeAxisValue({
   axis: allAxis,
   seriesConfig,
   axisDirection,
-  gap
+  gap,
+  autoSizes
 }) {
   if (allAxis === undefined) {
     return {
@@ -41,13 +42,17 @@ export function computeAxisValue({
       const N = axis.data.length;
       const bandWidth = (rangeSpace - gap * (N - 1)) / N;
       const step = bandWidth + gap;
+      const resolvedSize = resolveAxisSize(axis, autoSizes, axisDirection);
       completeAxis[axis.id] = _extends({
         offset: 0,
-        height: 0,
         categoryGapRatio: 0,
         barGapRatio: 0,
         triggerTooltip
-      }, axis, {
+      }, axis, axisDirection === 'x' ? {
+        height: resolvedSize
+      } : {
+        width: resolvedSize
+      }, {
         data,
         scale: scaleBand(axis.data, scaleRange).paddingInner(gap / step).paddingOuter(0),
         tickNumber: axis.data.length,
@@ -91,11 +96,15 @@ export function computeAxisValue({
       const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
       const [minDomain, maxDomain] = finalScale.domain();
       const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
+      const resolvedSize = resolveAxisSize(axis, autoSizes, axisDirection);
       completeAxis[axis.id] = _extends({
         offset: 0,
-        height: 0,
         triggerTooltip
-      }, axis, {
+      }, axis, axisDirection === 'x' ? {
+        height: resolvedSize
+      } : {
+        width: resolvedSize
+      }, {
         data,
         scaleType: scaleType,
         scale: finalScale.domain(domain),

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.js

@@ -10,19 +10,21 @@ var _computeAxisValue = require("./computeAxisValue");
 const selectorFunnel = state => state.funnel;
 exports.selectorFunnel = selectorFunnel;
 const selectorFunnelGap = exports.selectorFunnelGap = (0, _store.createSelector)(selectorFunnel, funnel => funnel?.gap ?? 0);
-const selectorChartXAxis = exports.selectorChartXAxis = (0, _store.createSelectorMemoized)(_internals.selectorChartRawXAxis, _internals.selectorChartDrawingArea, _internals.selectorChartSeriesProcessed, _internals.selectorChartSeriesConfig, selectorFunnelGap, (axis, drawingArea, formattedSeries, seriesConfig, gap) => (0, _computeAxisValue.computeAxisValue)({
+const selectorChartXAxis = exports.selectorChartXAxis = (0, _store.createSelectorMemoized)(_internals.selectorChartRawXAxis, _internals.selectorChartDrawingArea, _internals.selectorChartSeriesProcessed, _internals.selectorChartSeriesConfig, selectorFunnelGap, _internals.selectorChartXAxisAutoSizes, (axis, drawingArea, formattedSeries, seriesConfig, gap, autoSizes) => (0, _computeAxisValue.computeAxisValue)({
   drawingArea,
   formattedSeries,
   axis,
   seriesConfig,
   axisDirection: 'x',
-  gap
+  gap,
+  autoSizes
 }));
-const selectorChartYAxis = exports.selectorChartYAxis = (0, _store.createSelectorMemoized)(_internals.selectorChartRawYAxis, _internals.selectorChartDrawingArea, _internals.selectorChartSeriesProcessed, _internals.selectorChartSeriesConfig, selectorFunnelGap, (axis, drawingArea, formattedSeries, seriesConfig, gap) => (0, _computeAxisValue.computeAxisValue)({
+const selectorChartYAxis = exports.selectorChartYAxis = (0, _store.createSelectorMemoized)(_internals.selectorChartRawYAxis, _internals.selectorChartDrawingArea, _internals.selectorChartSeriesProcessed, _internals.selectorChartSeriesConfig, selectorFunnelGap, _internals.selectorChartYAxisAutoSizes, (axis, drawingArea, formattedSeries, seriesConfig, gap, autoSizes) => (0, _computeAxisValue.computeAxisValue)({
   drawingArea,
   formattedSeries,
   axis,
   seriesConfig,
   axisDirection: 'y',
-  gap
+  gap,
+  autoSizes
 }));

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.mjs

@@ -1,21 +1,23 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
-import { selectorChartSeriesConfig, selectorChartSeriesProcessed, selectorChartDrawingArea, selectorChartRawXAxis, selectorChartRawYAxis } from '@mui/x-charts/internals';
+import { selectorChartSeriesConfig, selectorChartSeriesProcessed, selectorChartDrawingArea, selectorChartRawXAxis, selectorChartRawYAxis, selectorChartXAxisAutoSizes, selectorChartYAxisAutoSizes } from '@mui/x-charts/internals';
 import { computeAxisValue } from "./computeAxisValue.mjs";
 export const selectorFunnel = state => state.funnel;
 export const selectorFunnelGap = createSelector(selectorFunnel, funnel => funnel?.gap ?? 0);
-export const selectorChartXAxis = createSelectorMemoized(selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorFunnelGap, (axis, drawingArea, formattedSeries, seriesConfig, gap) => computeAxisValue({
+export const selectorChartXAxis = createSelectorMemoized(selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorFunnelGap, selectorChartXAxisAutoSizes, (axis, drawingArea, formattedSeries, seriesConfig, gap, autoSizes) => computeAxisValue({
   drawingArea,
   formattedSeries,
   axis,
   seriesConfig,
   axisDirection: 'x',
-  gap
+  gap,
+  autoSizes
 }));
-export const selectorChartYAxis = createSelectorMemoized(selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorFunnelGap, (axis, drawingArea, formattedSeries, seriesConfig, gap) => computeAxisValue({
+export const selectorChartYAxis = createSelectorMemoized(selectorChartRawYAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorFunnelGap, selectorChartYAxisAutoSizes, (axis, drawingArea, formattedSeries, seriesConfig, gap, autoSizes) => computeAxisValue({
   drawingArea,
   formattedSeries,
   axis,
   seriesConfig,
   axisDirection: 'y',
-  gap
+  gap,
+  autoSizes
 }));

package/FunnelChart/seriesConfig/descriptionGetter.d.mts

@@ -0,0 +1,3 @@
+import { type DescriptionGetter } from '@mui/x-charts/internals';
+declare const descriptionGetter: DescriptionGetter<'funnel'>;
+export default descriptionGetter;

package/FunnelChart/seriesConfig/descriptionGetter.d.ts

@@ -0,0 +1,3 @@
+import { type DescriptionGetter } from '@mui/x-charts/internals';
+declare const descriptionGetter: DescriptionGetter<'funnel'>;
+export default descriptionGetter;

package/FunnelChart/seriesConfig/descriptionGetter.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _internals = require("@mui/x-charts/internals");
+const descriptionGetter = params => {
+  const {
+    identifier,
+    series,
+    localeText
+  } = params;
+  const item = series.data[identifier.dataIndex];
+  const label = (0, _internals.getLabel)(item?.label, 'tooltip');
+  const value = item?.value ?? null;
+  const formattedValue = series.valueFormatter(item, {
+    dataIndex: identifier.dataIndex
+  });
+  return localeText.funnelDescription({
+    value,
+    formattedValue: formattedValue ?? '',
+    seriesLabel: label
+  });
+};
+var _default = exports.default = descriptionGetter;

package/FunnelChart/seriesConfig/descriptionGetter.mjs

@@ -0,0 +1,20 @@
+import { getLabel } from '@mui/x-charts/internals';
+const descriptionGetter = params => {
+  const {
+    identifier,
+    series,
+    localeText
+  } = params;
+  const item = series.data[identifier.dataIndex];
+  const label = getLabel(item?.label, 'tooltip');
+  const value = item?.value ?? null;
+  const formattedValue = series.valueFormatter(item, {
+    dataIndex: identifier.dataIndex
+  });
+  return localeText.funnelDescription({
+    value,
+    formattedValue: formattedValue ?? '',
+    seriesLabel: label
+  });
+};
+export default descriptionGetter;

package/FunnelChart/seriesConfig/index.js

@@ -14,6 +14,7 @@ var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
+var _descriptionGetter = _interopRequireDefault(require("./descriptionGetter"));
 const funnelSeriesConfig = exports.funnelSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   colorProcessor: _getColor.default,
@@ -26,6 +27,7 @@ const funnelSeriesConfig = exports.funnelSeriesConfig = {
   keyboardFocusHandler: _keyboardFocusHandler.default,
   identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex,
   identifierCleaner: _internals.identifierCleanerSeriesIdDataIndex,
+  descriptionGetter: _descriptionGetter.default,
   isHighlightedCreator: _internals.createIsHighlighted,
   isFadedCreator: _internals.createIsFaded
 };

package/FunnelChart/seriesConfig/index.mjs

@@ -7,6 +7,7 @@ import tooltipGetter from "./tooltip.mjs";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.mjs";
 import tooltipItemPositionGetter from "./tooltipPosition.mjs";
 import keyboardFocusHandler from "./keyboardFocusHandler.mjs";
+import descriptionGetter from "./descriptionGetter.mjs";
 export const funnelSeriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
@@ -19,6 +20,7 @@ export const funnelSeriesConfig = {
   keyboardFocusHandler,
   identifierSerializer: identifierSerializerSeriesIdDataIndex,
   identifierCleaner: identifierCleanerSeriesIdDataIndex,
+  descriptionGetter,
   isHighlightedCreator: createIsHighlighted,
   isFadedCreator: createIsFaded
 };

package/Heatmap/Heatmap.js

@@ -305,7 +305,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
       tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -415,7 +415,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number,
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,

package/Heatmap/Heatmap.mjs

@@ -298,7 +298,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
       tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -408,7 +408,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number,
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,

package/Heatmap/Heatmap.types.d.mts

@@ -2,6 +2,10 @@ import { type HeatmapItemProps, type HeatmapItemSlotProps, type HeatmapItemSlots
 export interface HeatmapPlotSlots extends HeatmapItemSlots {}
 export interface HeatmapPlotSlotProps extends HeatmapItemSlotProps {}
 export interface HeatmapRendererPlotProps extends Pick<HeatmapItemProps, 'slots' | 'slotProps'> {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * The border radius of the heatmap cells in pixels.
    */

package/Heatmap/Heatmap.types.d.ts

@@ -2,6 +2,10 @@ import { type HeatmapItemProps, type HeatmapItemSlotProps, type HeatmapItemSlots
 export interface HeatmapPlotSlots extends HeatmapItemSlots {}
 export interface HeatmapPlotSlotProps extends HeatmapItemSlotProps {}
 export interface HeatmapRendererPlotProps extends Pick<HeatmapItemProps, 'slots' | 'slotProps'> {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * The border radius of the heatmap cells in pixels.
    */

package/Heatmap/HeatmapItem.js

@@ -11,10 +11,8 @@ 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 _internals = require("@mui/x-charts/internals");
 var _heatmapClasses = require("./heatmapClasses");
 var _HeatmapCell = require("./HeatmapCell");
-var _shouldRegisterPointerInteractionsGlobally = require("./shouldRegisterPointerInteractionsGlobally");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "color", "value", "isHighlighted", "isFaded", "borderRadius", "xIndex", "yIndex", "slotProps", "slots"];
 /**
@@ -28,22 +26,10 @@ function HeatmapItem(props) {
       isHighlighted = false,
       isFaded = false,
       borderRadius,
-      xIndex,
-      yIndex,
       slotProps = {},
       slots = {}
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-
-  // If we aren't using the default cell, we skip adding interaction props because we have a more efficient way to
-  // calculate them. To avoid breaking changes, we need to keep this behavior. We can remove this in v9.
-  const skipInteractionItemProps = (0, _shouldRegisterPointerInteractionsGlobally.shouldRegisterPointerInteractionsGlobally)(props.slots, props.slotProps);
-  const interactionProps = (0, _internals.useInteractionItemProps)({
-    type: 'heatmap',
-    seriesId,
-    xIndex,
-    yIndex
-  }, skipInteractionItemProps);
   const ownerState = {
     seriesId,
     color,
@@ -55,12 +41,12 @@ function HeatmapItem(props) {
   const Cell = slots?.cell ?? _HeatmapCell.HeatmapCell;
   const cellProps = (0, _useSlotProps.default)({
     elementType: Cell,
-    additionalProps: (0, _extends2.default)({}, interactionProps, {
+    additionalProps: {
       rx: borderRadius,
       ry: borderRadius,
       'data-highlighted': isHighlighted || undefined,
       'data-faded': isFaded || undefined
-    }),
+    },
     externalForwardedProps: (0, _extends2.default)({}, other),
     externalSlotProps: slotProps.cell,
     ownerState,

package/Heatmap/HeatmapItem.mjs

@@ -4,10 +4,8 @@ const _excluded = ["seriesId", "color", "value", "isHighlighted", "isFaded", "bo
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { useInteractionItemProps } from '@mui/x-charts/internals';
 import { useUtilityClasses } from "./heatmapClasses.mjs";
 import { HeatmapCell } from "./HeatmapCell.mjs";
-import { shouldRegisterPointerInteractionsGlobally } from "./shouldRegisterPointerInteractionsGlobally.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -20,22 +18,10 @@ function HeatmapItem(props) {
       isHighlighted = false,
       isFaded = false,
       borderRadius,
-      xIndex,
-      yIndex,
       slotProps = {},
       slots = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-
-  // If we aren't using the default cell, we skip adding interaction props because we have a more efficient way to
-  // calculate them. To avoid breaking changes, we need to keep this behavior. We can remove this in v9.
-  const skipInteractionItemProps = shouldRegisterPointerInteractionsGlobally(props.slots, props.slotProps);
-  const interactionProps = useInteractionItemProps({
-    type: 'heatmap',
-    seriesId,
-    xIndex,
-    yIndex
-  }, skipInteractionItemProps);
   const ownerState = {
     seriesId,
     color,
@@ -47,12 +33,12 @@ function HeatmapItem(props) {
   const Cell = slots?.cell ?? HeatmapCell;
   const cellProps = useSlotProps({
     elementType: Cell,
-    additionalProps: _extends({}, interactionProps, {
+    additionalProps: {
       rx: borderRadius,
       ry: borderRadius,
       'data-highlighted': isHighlighted || undefined,
       'data-faded': isFaded || undefined
-    }),
+    },
     externalForwardedProps: _extends({}, other),
     externalSlotProps: slotProps.cell,
     ownerState,

package/Heatmap/HeatmapPlot.js

@@ -32,6 +32,10 @@ process.env.NODE_ENV !== "production" ? HeatmapPlot.propTypes = {
    * The border radius of the heatmap cells in pixels.
    */
   borderRadius: _propTypes.default.number,
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className: _propTypes.default.string,
   /**
    * The props used for each component slot.
    * @default {}

package/Heatmap/HeatmapPlot.mjs

@@ -25,6 +25,10 @@ process.env.NODE_ENV !== "production" ? HeatmapPlot.propTypes = {
    * The border radius of the heatmap cells in pixels.
    */
   borderRadius: PropTypes.number,
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className: PropTypes.string,
   /**
    * The props used for each component slot.
    * @default {}