@mui/x-charts-pro 8.27.2 → 9.0.0-alpha.1

package/esm/Heatmap/Heatmap.js

@@ -4,160 +4,57 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
-import useId from '@mui/utils/useId';
-import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
-import { ChartsLegend, ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';
+import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
 import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay';
 import { HeatmapPlot } from "./HeatmapPlot.js";
-import { heatmapSeriesConfig } from "./seriesConfig/index.js";
 import { HeatmapTooltip } from "./HeatmapTooltip/index.js";
-import { HEATMAP_PLUGINS } from "./Heatmap.plugins.js";
 import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
 import { ChartsToolbarPro } from "../ChartsToolbarPro/index.js";
 import { FocusedHeatmapCell } from "./FocusedHeatmapCell.js";
+import { useHeatmapProps } from "./useHeatmapProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
-const defaultColorMap = interpolateRgbBasis(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
-const seriesConfig = {
-  heatmap: heatmapSeriesConfig
-};
-function getDefaultDataForAxis(series, dimension) {
-  if (series?.[0]?.data === undefined || series[0].data.length === 0) {
-    return [];
-  }
-  return Array.from({
-    length: Math.max(...series[0].data.map(dataPoint => dataPoint[dimension])) + 1
-  }, (_, index) => index);
-}
-const getDefaultDataForXAxis = series => getDefaultDataForAxis(series, 0);
-const getDefaultDataForYAxis = series => getDefaultDataForAxis(series, 1);
 const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiHeatmap'
   });
   const {
-    apiRef,
-    xAxis,
-    yAxis,
-    zAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
     sx,
-    onAxisClick,
-    children,
     slots,
     slotProps,
     loading,
-    highlightedItem,
-    onHighlightChange,
-    onItemClick,
-    enableKeyboardNavigation,
-    hideLegend = true,
+    hideLegend,
     showToolbar = false
   } = props;
-  const id = useId();
-  const clipPathId = `${id}-clip-path`;
-  const xAxisWithDefault = React.useMemo(() => (xAxis && xAxis.length > 0 ? xAxis : [{
-    id: DEFAULT_X_AXIS_KEY
-  }]).map(axis => _extends({
-    scaleType: 'band',
-    categoryGapRatio: 0
-  }, axis, {
-    data: axis.data ?? getDefaultDataForXAxis(series)
-  })), [series, xAxis]);
-  const yAxisWithDefault = React.useMemo(() => (yAxis && yAxis.length > 0 ? yAxis : [{
-    id: DEFAULT_Y_AXIS_KEY
-  }]).map(axis => _extends({
-    scaleType: 'band',
-    categoryGapRatio: 0
-  }, axis, {
-    data: axis.data ?? getDefaultDataForYAxis(series)
-  })), [series, yAxis]);
-  const zAxisWithDefault = React.useMemo(() => zAxis ?? [{
-    colorMap: {
-      type: 'continuous',
-      min: 0,
-      max: 100,
-      color: defaultColorMap
-    }
-  }], [zAxis]);
-  const chartsWrapperProps = {
-    sx,
-    legendPosition: props.slotProps?.legend?.position,
-    legendDirection: props.slotProps?.legend?.direction,
-    hideLegend
-  };
+  const {
+    chartDataProviderProProps,
+    chartsWrapperProps,
+    chartsAxisProps,
+    clipPathProps,
+    clipPathGroupProps,
+    legendProps,
+    heatmapPlotProps,
+    overlayProps,
+    children
+  } = useHeatmapProps(props);
   const Tooltip = slots?.tooltip ?? HeatmapTooltip;
   const Toolbar = slots?.toolbar ?? ChartsToolbarPro;
-  return /*#__PURE__*/_jsx(ChartDataProviderPro, {
-    apiRef: apiRef,
-    seriesConfig: seriesConfig,
-    series: series.map(s => _extends({
-      type: 'heatmap'
-    }, s)),
-    width: width,
-    height: height,
-    margin: margin,
-    xAxis: xAxisWithDefault,
-    yAxis: yAxisWithDefault,
-    zAxis: zAxisWithDefault,
-    colors: colors,
-    dataset: dataset,
-    disableAxisListener: true,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
-    enableKeyboardNavigation: enableKeyboardNavigation,
-    onAxisClick: onAxisClick,
-    onItemClick: onItemClick,
-    plugins: HEATMAP_PLUGINS,
+  return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
-        slots: _extends({}, slots, {
-          legend: slots?.legend ?? ContinuousColorLegend
-        }),
-        slotProps: {
-          legend: _extends({
-            labelPosition: 'extremes'
-          }, slotProps?.legend)
-        },
-        sx: slotProps?.legend?.direction === 'vertical' ? {
-          height: 150
-        } : {
-          width: '50%'
-        }
-      }), /*#__PURE__*/_jsxs(ChartsSurface, {
-        ref: ref,
+      ref: ref,
+      children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, {
         sx: sx,
-        children: [/*#__PURE__*/_jsxs("g", {
-          clipPath: `url(#${clipPathId})`,
-          children: [/*#__PURE__*/_jsx(HeatmapPlot, {
-            slots: slots,
-            slotProps: slotProps
-          }), /*#__PURE__*/_jsx(FocusedHeatmapCell, {}), /*#__PURE__*/_jsx(ChartsOverlay, {
-            loading: loading,
-            slots: slots,
-            slotProps: slotProps
-          })]
-        }), /*#__PURE__*/_jsx(ChartsAxis, {
-          slots: slots,
-          slotProps: slotProps
-        }), /*#__PURE__*/_jsx(ChartsClipPath, {
-          id: clipPathId
-        }), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), children]
+        children: [/*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+          children: [/*#__PURE__*/_jsx(HeatmapPlot, _extends({}, heatmapPlotProps)), /*#__PURE__*/_jsx(FocusedHeatmapCell, {}), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps))]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), children]
       }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps?.tooltip))]
     }))
-  });
+  }));
 });
 if (process.env.NODE_ENV !== "production") Heatmap.displayName = "Heatmap";
 process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
@@ -173,6 +70,10 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
       setZoomData: PropTypes.func.isRequired
     })
   }),
+  /**
+   * The border radius of the heatmap cells in pixels.
+   */
+  borderRadius: PropTypes.number,
   /**
    * Configuration for the brush interaction.
    */
@@ -205,7 +106,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   height: PropTypes.number,
   /**
    * If `true`, the legend is not rendered.
-   * @default true
    */
   hideLegend: PropTypes.bool,
   /**
@@ -214,7 +114,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -270,9 +170,17 @@ 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 {SeriesItemIdentifier<SeriesType>} item The clicked item.
+   * @param {SeriesItemIdentifierWithType<SeriesType>} item The clicked item.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: PropTypes.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -290,11 +198,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * An array of [[HeatmapSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * The configuration helpers used to compute attributes according to the series type.
-   * @ignore Unstable props for internal usage.
-   */
-  seriesConfig: PropTypes.object,
   /**
    * If true, shows the default chart toolbar.
    * @default false
@@ -318,16 +221,24 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
    */
   tooltip: PropTypes.object,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    dataIndex: PropTypes.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['heatmap']).isRequired,
-    xIndex: PropTypes.number,
-    yIndex: PropTypes.number
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['heatmap']),
+    xIndex: PropTypes.number.isRequired,
+    yIndex: PropTypes.number.isRequired
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/esm/Heatmap/Heatmap.types.d.ts

@@ -0,0 +1,19 @@
+import { type HeatmapItemProps, type HeatmapItemSlotProps, type HeatmapItemSlots } from "./HeatmapItem.js";
+export interface HeatmapPlotSlots extends HeatmapItemSlots {}
+export interface HeatmapPlotSlotProps extends HeatmapItemSlotProps {}
+export interface HeatmapRendererPlotProps extends Pick<HeatmapItemProps, 'slots' | 'slotProps'> {
+  /**
+   * The border radius of the heatmap cells in pixels.
+   */
+  borderRadius?: number;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: HeatmapPlotSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: HeatmapPlotSlotProps;
+}

package/esm/Heatmap/Heatmap.types.js

@@ -0,0 +1 @@
+export {};

package/esm/Heatmap/HeatmapItem.d.ts

@@ -19,9 +19,15 @@ export interface HeatmapItemProps {
   height: number;
   x: number;
   y: number;
+  xIndex: number;
+  yIndex: number;
   color: string;
   isHighlighted?: boolean;
   isFaded?: boolean;
+  /**
+   * The border radius of the heatmap cell in pixels.
+   */
+  borderRadius?: number;
   /**
    * The props used for each component slot.
    * @default {}

package/esm/Heatmap/HeatmapItem.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId", "dataIndex", "color", "value", "isHighlighted", "isFaded", "slotProps", "slots"];
+const _excluded = ["seriesId", "dataIndex", "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';
@@ -34,6 +34,9 @@ function HeatmapItem(props) {
       value,
       isHighlighted = false,
       isFaded = false,
+      borderRadius,
+      xIndex,
+      yIndex,
       slotProps = {},
       slots = {}
     } = props,
@@ -45,7 +48,9 @@ function HeatmapItem(props) {
   const interactionProps = useInteractionItemProps({
     type: 'heatmap',
     seriesId,
-    dataIndex
+    dataIndex,
+    xIndex,
+    yIndex
   }, skipInteractionItemProps);
   const ownerState = {
     seriesId,
@@ -59,7 +64,10 @@ function HeatmapItem(props) {
   const Cell = slots?.cell ?? HeatmapCell;
   const cellProps = useSlotProps({
     elementType: Cell,
-    additionalProps: interactionProps,
+    additionalProps: _extends({}, interactionProps, {
+      rx: borderRadius,
+      ry: borderRadius
+    }),
     externalForwardedProps: _extends({}, other),
     externalSlotProps: slotProps.cell,
     ownerState,

package/esm/Heatmap/HeatmapPlot.d.ts

@@ -1,6 +1,10 @@
-import { type HeatmapItemProps } from "./HeatmapItem.js";
-export interface HeatmapPlotProps extends Pick<HeatmapItemProps, 'slots' | 'slotProps'> {}
-declare function HeatmapPlot(props: HeatmapPlotProps): import("react/jsx-runtime").JSX.Element | null;
+import * as React from 'react';
+import { type HeatmapRendererPlotProps } from "./Heatmap.types.js";
+export interface HeatmapPlotProps extends HeatmapRendererPlotProps {}
+declare function HeatmapPlot({
+  borderRadius,
+  ...props
+}: HeatmapPlotProps): React.ReactNode;
 declare namespace HeatmapPlot {
   var propTypes: any;
 }

package/esm/Heatmap/HeatmapPlot.js

@@ -1,69 +1,30 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["borderRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useXScale, useYScale, useZColorScale } from '@mui/x-charts/hooks';
-import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback, useStore } from '@mui/x-charts/internals';
-import { useRegisterPointerInteractions } from '@mui/x-charts/internals';
-import { useHeatmapSeriesContext } from "../hooks/useHeatmapSeries.js";
-import { HeatmapItem } from "./HeatmapItem.js";
-import { selectorHeatmapItemAtPosition } from "../plugins/selectors/useChartHeatmapPosition.selectors.js";
-import { shouldRegisterPointerInteractionsGlobally } from "./shouldRegisterPointerInteractionsGlobally.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function HeatmapPlot(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 xDomain = xScale.domain();
-  const yDomain = yScale.domain();
-  if (!series || series.seriesOrder.length === 0) {
-    return null;
-  }
-  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) => {
-        const x = xScale(xDomain[xIndex]);
-        const y = yScale(yDomain[yIndex]);
-        const color = colorScale?.(value);
-        if (x === undefined || y === undefined || !color) {
-          return null;
-        }
-        const item = {
-          seriesId: seriesToDisplay.id,
-          dataIndex
-        };
-        return /*#__PURE__*/_jsx(HeatmapItem, {
-          width: xScale.bandwidth(),
-          height: yScale.bandwidth(),
-          x: x,
-          y: y,
-          color: color,
-          dataIndex: dataIndex,
-          seriesId: series.seriesOrder[0],
-          value: value,
-          slots: props.slots,
-          slotProps: props.slotProps,
-          isHighlighted: isHighlighted(item),
-          isFaded: isFaded(item)
-        }, `${xIndex}_${yIndex}`);
-      })
-    })]
-  });
-}
-function RegisterHeatmapPointerInteractions() {
-  useRegisterPointerInteractions(selectorHeatmapItemAtPosition);
-  return null;
+import { HeatmapSVGPlot } from "./HeatmapSVGPlot.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function HeatmapPlot(_ref) {
+  let {
+      borderRadius
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(HeatmapSVGPlot, _extends({
+    borderRadius: borderRadius
+  }, props));
 }
 process.env.NODE_ENV !== "production" ? HeatmapPlot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * The border radius of the heatmap cells in pixels.
+   */
+  borderRadius: PropTypes.number,
   /**
    * The props used for each component slot.
    * @default {}

package/esm/Heatmap/HeatmapSVGPlot.d.ts

@@ -0,0 +1,2 @@
+import { type HeatmapRendererPlotProps } from "./Heatmap.types.js";
+export declare function HeatmapSVGPlot(props: HeatmapRendererPlotProps): import("react/jsx-runtime").JSX.Element | null;

package/esm/Heatmap/HeatmapSVGPlot.js

@@ -0,0 +1,64 @@
+'use client';
+
+import * as React from 'react';
+import { useXScale, useYScale, useZColorScale } from '@mui/x-charts/hooks';
+import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback, useStore, useRegisterPointerInteractions } from '@mui/x-charts/internals';
+import { useHeatmapSeriesContext } from "../hooks/index.js";
+import { HeatmapItem } from "./HeatmapItem.js";
+import { selectorHeatmapItemAtPosition } from "../plugins/selectors/useChartHeatmapPosition.selectors.js";
+import { shouldRegisterPointerInteractionsGlobally } from "./shouldRegisterPointerInteractionsGlobally.js";
+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";
+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 xDomain = xScale.domain();
+  const yDomain = yScale.domain();
+  if (!series || series.seriesOrder.length === 0) {
+    return null;
+  }
+  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) => {
+        const x = xScale(xDomain[xIndex]);
+        const y = yScale(yDomain[yIndex]);
+        const color = colorScale?.(value);
+        if (x === undefined || y === undefined || !color) {
+          return null;
+        }
+        const item = {
+          seriesId: seriesToDisplay.id,
+          dataIndex
+        };
+        return /*#__PURE__*/_jsx(MemoHeatmapItem, {
+          width: xScale.bandwidth(),
+          height: yScale.bandwidth(),
+          x: x,
+          y: y,
+          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),
+          borderRadius: props.borderRadius
+        }, `${xIndex}_${yIndex}`);
+      })
+    })]
+  });
+}
+function RegisterHeatmapPointerInteractions() {
+  useRegisterPointerInteractions(selectorHeatmapItemAtPosition);
+  return null;
+}

package/esm/Heatmap/HeatmapTooltip/HeatmapTooltip.types.d.ts

@@ -1,5 +1,21 @@
-import { type ChartsTooltipContainerProps } from '@mui/x-charts/ChartsTooltip';
-export interface HeatmapTooltipProps extends Omit<ChartsTooltipContainerProps, 'trigger' | 'children'> {
+import { type ChartsTooltipContainerProps, type ChartsTooltipClasses } from '@mui/x-charts/ChartsTooltip';
+export interface HeatmapTooltipSlots {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: React.ElementType<HeatmapTooltipProps>;
+}
+export interface HeatmapTooltipSlotProps {
+  /**
+   * Custom component for the tooltip popper.
+   * @default ChartsTooltipRoot
+   */
+  tooltip?: Partial<HeatmapTooltipProps>;
+}
+export interface HeatmapTooltipClasses extends ChartsTooltipClasses {}
+export interface HeatmapTooltipContentClasses extends ChartsTooltipClasses {}
+export interface HeatmapTooltipProps extends Omit<ChartsTooltipContainerProps<'item' | 'none'>, 'trigger' | 'children'> {
   /**
    * Select the kind of tooltip to display
    * - 'item': Shows data about the item below the mouse.

package/esm/Heatmap/HeatmapTooltip/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./HeatmapTooltip.js";
 export * from "./HeatmapTooltipContent.js";
-export type { HeatmapTooltipProps } from "./HeatmapTooltip.types.js";
+export type { HeatmapTooltipProps, HeatmapTooltipClasses, HeatmapTooltipContentClasses, HeatmapTooltipSlots, HeatmapTooltipSlotProps } from "./HeatmapTooltip.types.js";

package/esm/Heatmap/index.d.ts

@@ -1,6 +1,7 @@
 export { Heatmap } from "./Heatmap.js";
-export type { HeatmapSeries, HeatmapProps } from "./Heatmap.js";
-export { HeatmapPlot } from "./HeatmapPlot.js";
+export type { HeatmapSeries, HeatmapProps, HeatmapSlots, HeatmapSlotProps } from "./Heatmap.js";
+export { HeatmapPlot, type HeatmapPlotProps } from "./HeatmapPlot.js";
+export type { HeatmapPlotSlots, HeatmapPlotSlotProps } from "./Heatmap.types.js";
 export * from "./FocusedHeatmapCell.js";
 export type { HeatmapCellProps } from "./internals/HeatmapCell.js";
 export * from "./HeatmapTooltip/index.js";

package/esm/Heatmap/seriesConfig/getItemAtPosition.d.ts

@@ -1,6 +1,6 @@
 import type { ChartState, UseChartCartesianAxisSignature } from '@mui/x-charts/internals';
-import type { SeriesItemIdentifier } from '@mui/x-charts/models';
+import type { SeriesItemIdentifierWithType } from '@mui/x-charts/models';
 export default function getItemAtPosition(state: ChartState<[UseChartCartesianAxisSignature]>, point: {
   x: number;
   y: number;
-}): SeriesItemIdentifier<'heatmap'> | undefined;
+}): SeriesItemIdentifierWithType<'heatmap'> | undefined;

package/esm/Heatmap/seriesConfig/getItemAtPosition.js

@@ -24,12 +24,16 @@ export default function getItemAtPosition(state, point) {
   if (dataIndex === -1) {
     return {
       type: 'heatmap',
-      seriesId
+      seriesId,
+      xIndex,
+      yIndex
     };
   }
   return {
     type: 'heatmap',
     seriesId,
-    dataIndex
+    dataIndex,
+    xIndex,
+    yIndex
   };
 }

package/esm/Heatmap/seriesConfig/index.js

@@ -1,4 +1,4 @@
-import { cartesianSeriesTypes, identifierSerializerSeriesIdDataIndex } from '@mui/x-charts/internals';
+import { cartesianSeriesTypes, identifierSerializerSeriesIdDataIndex, identifierCleanerSeriesIdDataIndex } from '@mui/x-charts/internals';
 import { getBaseExtremum } from "./extremums.js";
 import seriesProcessor from "./seriesProcessor.js";
 import getColor from "./getColor.js";
@@ -18,6 +18,7 @@ export const heatmapSeriesConfig = {
   yExtremumGetter: getBaseExtremum,
   getSeriesWithDefaultValues,
   identifierSerializer: identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: identifierCleanerSeriesIdDataIndex,
   getItemAtPosition,
   keyboardFocusHandler
 };

package/esm/Heatmap/useHeatmapProps.d.ts

@@ -0,0 +1,24 @@
+import { type ChartsWrapperProps } from '@mui/x-charts/ChartsWrapper';
+import * as React from 'react';
+import { type ChartsLegendProps, type ChartsLegendSlotExtension } from '@mui/x-charts/ChartsLegend';
+import type { ChartsOverlayProps } from '@mui/x-charts/ChartsOverlay';
+import { type ChartsClipPathProps } from '@mui/x-charts/ChartsClipPath';
+import type { ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
+import { type HeatmapPluginSignatures } from "./Heatmap.plugins.js";
+import { type HeatmapProps } from "./Heatmap.js";
+import { type ChartDataProviderProProps } from "../ChartDataProviderPro/index.js";
+import { type HeatmapPlotProps } from "./HeatmapPlot.js";
+export type UseHeatmapProps = HeatmapProps;
+export declare function useHeatmapProps(props: UseHeatmapProps): {
+  chartDataProviderProProps: ChartDataProviderProProps<"heatmap", HeatmapPluginSignatures>;
+  chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
+  heatmapPlotProps: HeatmapPlotProps;
+  clipPathProps: ChartsClipPathProps;
+  clipPathGroupProps: {
+    clipPath: string;
+  };
+  overlayProps: ChartsOverlayProps;
+  chartsAxisProps: ChartsAxisProps;
+  legendProps: ChartsLegendProps | ChartsLegendSlotExtension;
+  children: React.ReactNode;
+};