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

package/FunnelChart/FunnelSectionLabel.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
-import { type FunnelSectionClasses } from "./funnelSectionClasses.mjs";
+import { type FunnelClasses } from "./funnelClasses.mjs";
 export interface FunnelSectionLabelConfig {
   x: number;
   y: number;
@@ -9,13 +9,19 @@ export interface FunnelSectionLabelConfig {
   dominantBaseline?: React.SVGProps<SVGTextElement>['dominantBaseline'];
 }
 export interface FunnelSectionLabelProps extends Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id'> {
-  classes?: Partial<FunnelSectionClasses>;
+  classes?: Partial<FunnelClasses>;
   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.
  */
-declare const FunnelSectionLabel: React.ForwardRefExoticComponent<FunnelSectionLabelProps & React.RefAttributes<{}>>;
+declare const FunnelSectionLabel: React.ForwardRefExoticComponent<FunnelSectionLabelProps & React.RefAttributes<SVGTextElement>>;
 export { FunnelSectionLabel };

package/FunnelChart/FunnelSectionLabel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
-import { type FunnelSectionClasses } from "./funnelSectionClasses.js";
+import { type FunnelClasses } from "./funnelClasses.js";
 export interface FunnelSectionLabelConfig {
   x: number;
   y: number;
@@ -9,13 +9,19 @@ export interface FunnelSectionLabelConfig {
   dominantBaseline?: React.SVGProps<SVGTextElement>['dominantBaseline'];
 }
 export interface FunnelSectionLabelProps extends Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id'> {
-  classes?: Partial<FunnelSectionClasses>;
+  classes?: Partial<FunnelClasses>;
   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.
  */
-declare const FunnelSectionLabel: React.ForwardRefExoticComponent<FunnelSectionLabelProps & React.RefAttributes<{}>>;
+declare const FunnelSectionLabel: React.ForwardRefExoticComponent<FunnelSectionLabelProps & React.RefAttributes<SVGTextElement>>;
 export { FunnelSectionLabel };

package/FunnelChart/FunnelSectionLabel.js

@@ -6,28 +6,37 @@ 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 _funnelSectionClasses = require("./funnelSectionClasses");
+var _clsx = _interopRequireDefault(require("clsx"));
+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.
  */
 const FunnelSectionLabel = exports.FunnelSectionLabel = (0, _internals.consumeSlots)('MuiFunnelSectionLabel', 'funnelSectionLabel', {
-  classesResolver: _funnelSectionClasses.useLabelUtilityClasses
+  classesResolver: _funnelClasses.useUtilityClasses
 }, /*#__PURE__*/React.forwardRef(function FunnelSectionLabel(props, ref) {
   const {
       classes,
+      className,
       label
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const theme = (0, _styles.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FunnelSectionLabelText, (0, _extends2.default)({
     stroke: "none",
     pointerEvents: "none",
     fontFamily: theme.typography.body2.fontFamily,
@@ -39,7 +48,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)(classes?.sectionLabel, className),
     x: label.x,
     y: label.y,
     textAnchor: label.textAnchor ?? 'middle',

package/FunnelChart/FunnelSectionLabel.mjs

@@ -2,25 +2,34 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "color", "onClick", "className", "label", "seriesId", "dataIndex"];
+const _excluded = ["classes", "color", "onClick", "className", "label", "variant", "seriesId", "dataIndex"];
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { consumeSlots } from '@mui/x-charts/internals';
-import { useLabelUtilityClasses } from "./funnelSectionClasses.mjs";
+import clsx from 'clsx';
+import { useUtilityClasses } from "./funnelClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
+export const FunnelSectionLabelText = 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.
  */
 const FunnelSectionLabel = consumeSlots('MuiFunnelSectionLabel', 'funnelSectionLabel', {
-  classesResolver: useLabelUtilityClasses
+  classesResolver: useUtilityClasses
 }, /*#__PURE__*/React.forwardRef(function FunnelSectionLabel(props, ref) {
   const {
       classes,
+      className,
       label
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
-  return /*#__PURE__*/_jsx("text", _extends({
+  return /*#__PURE__*/_jsx(FunnelSectionLabelText, _extends({
     stroke: "none",
     pointerEvents: "none",
     fontFamily: theme.typography.body2.fontFamily,
@@ -32,7 +41,7 @@ const FunnelSectionLabel = consumeSlots('MuiFunnelSectionLabel', 'funnelSectionL
     fontStyle: theme.typography.body2.fontStyle,
     fontVariant: theme.typography.body2.fontVariant,
     fill: (theme.vars || theme)?.palette?.text?.primary,
-    className: classes?.label,
+    className: clsx(classes?.sectionLabel, className),
     x: label.x,
     y: label.y,
     textAnchor: label.textAnchor ?? 'middle',

package/FunnelChart/funnelClasses.d.mts

@@ -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.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 = 'filled',
+    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/funnelClasses.mjs

@@ -0,0 +1,19 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getFunnelUtilityClass(slot) {
+  return generateUtilityClass('MuiFunnelChart', slot);
+}
+export const funnelClasses = generateUtilityClasses('MuiFunnelChart', ['root', 'section', 'sectionFilled', 'sectionOutlined', 'sectionLabel', 'sectionLabelFilled', 'sectionLabelOutlined']);
+export const useUtilityClasses = options => {
+  const {
+    variant = 'filled',
+    classes
+  } = options ?? {};
+  const slots = {
+    root: ['root'],
+    section: ['section', variant === 'filled' && 'sectionFilled', variant === 'outlined' && 'sectionOutlined'],
+    sectionLabel: ['sectionLabel', variant === 'filled' && 'sectionLabelFilled', variant === 'outlined' && 'sectionLabelOutlined']
+  };
+  return composeClasses(slots, getFunnelUtilityClass, classes);
+};

package/FunnelChart/index.d.mts

@@ -12,7 +12,7 @@ export * from "./categoryAxis.types.mjs";
 export * from "./funnelSlots.types.mjs";
 export * from "./FunnelChart.plugins.mjs";
 export type { FunnelCurveType } from "./curves/index.mjs";
-export { funnelSectionClasses } from "./funnelSectionClasses.mjs";
-export type { FunnelSectionClasses } from "./funnelSectionClasses.mjs";
+export { funnelClasses } from "./funnelClasses.mjs";
+export type { FunnelClassKey, FunnelClasses } from "./funnelClasses.mjs";
 export { FunnelSection } from "./FunnelSection.mjs";
 export { FunnelSectionLabel } from "./FunnelSectionLabel.mjs";

package/FunnelChart/index.d.ts

@@ -12,7 +12,7 @@ export * from "./categoryAxis.types.js";
 export * from "./funnelSlots.types.js";
 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

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

package/FunnelChart/index.mjs

@@ -12,6 +12,6 @@ export * from "./funnel.types.mjs";
 export * from "./categoryAxis.types.mjs";
 export * from "./funnelSlots.types.mjs";
 export * from "./FunnelChart.plugins.mjs";
-export { funnelSectionClasses } from "./funnelSectionClasses.mjs";
+export { funnelClasses } from "./funnelClasses.mjs";
 export { FunnelSection } from "./FunnelSection.mjs";
 export { FunnelSectionLabel } from "./FunnelSectionLabel.mjs";

package/FunnelChart/seriesConfig/legend.js

@@ -16,12 +16,10 @@ const legendGetter = params => {
       if (formattedLabel === undefined) {
         return;
       }
-      const id = item.id ?? dataIndex;
       acc.push({
         type: 'funnel',
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
         seriesId,
-        itemId: id,
         dataIndex,
         color: item.color,
         label: formattedLabel

package/FunnelChart/seriesConfig/legend.mjs

@@ -10,12 +10,10 @@ const legendGetter = params => {
       if (formattedLabel === undefined) {
         return;
       }
-      const id = item.id ?? dataIndex;
       acc.push({
         type: 'funnel',
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
         seriesId,
-        itemId: id,
         dataIndex,
         color: item.color,
         label: formattedLabel

package/FunnelChart/useFunnelChartProps.d.mts

@@ -6,7 +6,7 @@ import type { ChartsWrapperProps } from '@mui/x-charts/ChartsWrapper';
 import { type FunnelChartPluginSignatures } from "./FunnelChart.plugins.mjs";
 import { type FunnelPlotProps } from "./FunnelPlot.mjs";
 import type { FunnelChartProps } from "./FunnelChart.mjs";
-import { type ChartContainerProProps } from "../ChartContainerPro/index.mjs";
+import { type ChartsContainerProProps } from "../ChartsContainerPro/index.mjs";
 /**
  * A helper function that extracts FunnelChartProps from the input props
  * and returns an object with props for the children components of FunnelChart.
@@ -15,7 +15,7 @@ import { type ChartContainerProProps } from "../ChartContainerPro/index.mjs";
  * @returns An object with props for the children components of FunnelChart
  */
 export declare const useFunnelChartProps: (props: FunnelChartProps) => {
-  chartContainerProps: ChartContainerProProps<"funnel", FunnelChartPluginSignatures>;
+  chartsContainerProps: ChartsContainerProProps<"funnel", FunnelChartPluginSignatures>;
   funnelPlotProps: FunnelPlotProps;
   overlayProps: ChartsOverlayProps;
   chartsAxisProps: ChartsAxisProps;

package/FunnelChart/useFunnelChartProps.d.ts

@@ -6,7 +6,7 @@ import type { ChartsWrapperProps } from '@mui/x-charts/ChartsWrapper';
 import { type FunnelChartPluginSignatures } from "./FunnelChart.plugins.js";
 import { type FunnelPlotProps } from "./FunnelPlot.js";
 import type { FunnelChartProps } from "./FunnelChart.js";
-import { type ChartContainerProProps } from "../ChartContainerPro/index.js";
+import { type ChartsContainerProProps } from "../ChartsContainerPro/index.js";
 /**
  * A helper function that extracts FunnelChartProps from the input props
  * and returns an object with props for the children components of FunnelChart.
@@ -15,7 +15,7 @@ import { type ChartContainerProProps } from "../ChartContainerPro/index.js";
  * @returns An object with props for the children components of FunnelChart
  */
 export declare const useFunnelChartProps: (props: FunnelChartProps) => {
-  chartContainerProps: ChartContainerProProps<"funnel", FunnelChartPluginSignatures>;
+  chartsContainerProps: ChartsContainerProProps<"funnel", FunnelChartPluginSignatures>;
   funnelPlotProps: FunnelPlotProps;
   overlayProps: ChartsOverlayProps;
   chartsAxisProps: ChartsAxisProps;

package/FunnelChart/useFunnelChartProps.js

@@ -104,7 +104,7 @@ const useFunnelChartProps = props => {
   };
   const xAxis = isHorizontal ? getCategoryAxisConfig(categoryAxis, series, isHorizontal, 'x') : valueAxisConfig;
   const yAxis = isHorizontal ? valueAxisConfig : getCategoryAxisConfig(categoryAxis, series, isHorizontal, 'y');
-  const chartContainerProps = (0, _extends2.default)({}, other, {
+  const chartsContainerProps = (0, _extends2.default)({}, other, {
     series: series.map(s => (0, _extends2.default)({
       type: 'funnel',
       layout: isHorizontal ? 'horizontal' : 'vertical'
@@ -148,7 +148,7 @@ const useFunnelChartProps = props => {
   };
   const axisHighlightProps = (0, _extends2.default)({}, axisHighlight);
   return {
-    chartContainerProps,
+    chartsContainerProps,
     funnelPlotProps,
     overlayProps,
     chartsAxisProps,

package/FunnelChart/useFunnelChartProps.mjs

@@ -98,7 +98,7 @@ export const useFunnelChartProps = props => {
   };
   const xAxis = isHorizontal ? getCategoryAxisConfig(categoryAxis, series, isHorizontal, 'x') : valueAxisConfig;
   const yAxis = isHorizontal ? valueAxisConfig : getCategoryAxisConfig(categoryAxis, series, isHorizontal, 'y');
-  const chartContainerProps = _extends({}, other, {
+  const chartsContainerProps = _extends({}, other, {
     series: series.map(s => _extends({
       type: 'funnel',
       layout: isHorizontal ? 'horizontal' : 'vertical'
@@ -142,7 +142,7 @@ export const useFunnelChartProps = props => {
   };
   const axisHighlightProps = _extends({}, axisHighlight);
   return {
-    chartContainerProps,
+    chartsContainerProps,
     funnelPlotProps,
     overlayProps,
     chartsAxisProps,

package/Heatmap/Heatmap.d.mts

@@ -6,7 +6,7 @@ import { type ChartsAxisSlots, type ChartsAxisSlotProps, type XAxis, type YAxis
 import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
 import { type ChartsSlotPropsPro, type ChartsSlotsPro } from "../internals/material/index.mjs";
-import { type ChartContainerProProps } from "../ChartContainerPro/index.mjs";
+import { type ChartsContainerProProps } from "../ChartsContainerPro/index.mjs";
 import { type HeatmapSeriesType } from "../models/seriesType/heatmap.mjs";
 import { type HeatmapTooltipProps } from "./HeatmapTooltip/index.mjs";
 import { type HeatmapItemSlotProps, type HeatmapItemSlots } from "./HeatmapItem.mjs";
@@ -28,16 +28,7 @@ export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlot
   tooltip?: Partial<HeatmapTooltipProps>;
 }
 export type HeatmapSeries = MakeOptional<HeatmapSeriesType, 'type'>;
-export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'axesGap' | 'skipAnimation' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange' | 'seriesConfig' | 'onAxisClick'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
-  /**
-   * 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?: ChartContainerProProps<'heatmap', HeatmapPluginSignatures>['onAxisClick'];
+export interface HeatmapProps extends Omit<ChartsContainerProProps<'heatmap', HeatmapPluginSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'axesGap' | 'skipAnimation' | 'slots' | 'slotProps' | 'highlightedAxis' | 'onHighlightedAxisChange' | 'seriesConfig' | 'onAxisClick'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.

package/Heatmap/Heatmap.d.ts

@@ -6,7 +6,7 @@ import { type ChartsAxisSlots, type ChartsAxisSlotProps, type XAxis, type YAxis
 import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
 import { type ChartsSlotPropsPro, type ChartsSlotsPro } from "../internals/material/index.js";
-import { type ChartContainerProProps } from "../ChartContainerPro/index.js";
+import { type ChartsContainerProProps } from "../ChartsContainerPro/index.js";
 import { type HeatmapSeriesType } from "../models/seriesType/heatmap.js";
 import { type HeatmapTooltipProps } from "./HeatmapTooltip/index.js";
 import { type HeatmapItemSlotProps, type HeatmapItemSlots } from "./HeatmapItem.js";
@@ -28,16 +28,7 @@ export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlot
   tooltip?: Partial<HeatmapTooltipProps>;
 }
 export type HeatmapSeries = MakeOptional<HeatmapSeriesType, 'type'>;
-export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', HeatmapPluginSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'axesGap' | 'skipAnimation' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange' | 'seriesConfig' | 'onAxisClick'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
-  /**
-   * 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?: ChartContainerProProps<'heatmap', HeatmapPluginSignatures>['onAxisClick'];
+export interface HeatmapProps extends Omit<ChartsContainerProProps<'heatmap', HeatmapPluginSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'axesGap' | 'skipAnimation' | 'slots' | 'slotProps' | 'highlightedAxis' | 'onHighlightedAxisChange' | 'seriesConfig' | 'onAxisClick'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.

package/Heatmap/Heatmap.js

@@ -20,7 +20,7 @@ var _ChartsBrushOverlay = require("@mui/x-charts/ChartsBrushOverlay");
 var _ChartsLayerContainer = require("@mui/x-charts/ChartsLayerContainer");
 var _HeatmapPlot = require("./HeatmapPlot");
 var _HeatmapTooltip = require("./HeatmapTooltip");
-var _ChartDataProviderPro = require("../ChartDataProviderPro");
+var _ChartsDataProviderPro = require("../ChartsDataProviderPro");
 var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _FocusedHeatmapCell = require("./FocusedHeatmapCell");
 var _useHeatmapProps = require("./useHeatmapProps");
@@ -40,7 +40,7 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
     showToolbar = false
   } = props;
   const {
-    chartDataProviderProProps,
+    chartsDataProviderProProps,
     chartsWrapperProps,
     chartsAxisProps,
     clipPathProps,
@@ -52,7 +52,7 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
   } = (0, _useHeatmapProps.useHeatmapProps)(props);
   const Tooltip = slots?.tooltip ?? _HeatmapTooltip.HeatmapTooltip;
   const Toolbar = slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsDataProviderPro.ChartsDataProviderPro, (0, _extends2.default)({}, chartsDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       ref: ref,
       children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLayerContainer.ChartsLayerContainer, {
@@ -102,6 +102,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.default.arrayOf(_propTypes.default.object),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
   /**
    * If `true`, the charts will not listen to the mouse move event.
@@ -113,6 +117,10 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * If `true`, disables keyboard navigation for the chart.
    */
   disableKeyboardNavigation: _propTypes.default.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -170,15 +178,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.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.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *
@@ -188,7 +187,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.default.func,
@@ -234,6 +233,10 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string,
   /**
    * The configuration of the tooltip.
@@ -276,6 +279,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     barGapRatio: _propTypes.default.number,
     categoryGapRatio: _propTypes.default.number,
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -357,6 +361,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     barGapRatio: _propTypes.default.number,
     categoryGapRatio: _propTypes.default.number,
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -495,8 +500,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)
   })