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

package/esm/FunnelChart/seriesConfig/legend.js

@@ -15,7 +15,6 @@ const legendGetter = params => {
         type: 'funnel',
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
         seriesId,
-        id,
         itemId: id,
         dataIndex,
         color: item.color,

package/esm/Heatmap/Heatmap.d.ts

@@ -28,7 +28,16 @@ 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' | 'skipAnimation' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+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'];
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
@@ -53,7 +62,6 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
   tooltip?: ChartsTooltipProps;
   /**
    * If `true`, the legend is not rendered.
-   * @default true
    */
   hideLegend?: boolean;
   /**
@@ -61,6 +69,10 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
    * @default false
    */
   showToolbar?: boolean;
+  /**
+   * The border radius of the heatmap cells in pixels.
+   */
+  borderRadius?: number;
   /**
    * Overridable component slots.
    * @default {}

package/esm/Heatmap/Heatmap.js

@@ -4,158 +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,
-    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,
-    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, {
+      children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, {
         ref: ref,
         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 = {
@@ -171,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.
    */
@@ -203,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,
   /**
@@ -212,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.
@@ -254,6 +156,8 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * 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,
   /**
@@ -262,6 +166,13 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * The callback fired when an item is clicked.
+   *
+   * @param {React.MouseEvent<SVGSVGElement, MouseEvent>} event The click event.
+   * @param {SeriesItemIdentifier<SeriesType>} item The clicked item.
+   */
+  onItemClick: PropTypes.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -279,11 +190,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
@@ -313,10 +219,10 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['heatmap']).isRequired,
-    xIndex: PropTypes.number,
-    yIndex: PropTypes.number
+    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.plugins.d.ts

@@ -1,5 +1,5 @@
-import { type UseChartZAxisSignature, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartHighlightSignature, type ConvertSignaturesIntoPlugins, type UseChartBrushSignature, type UseChartKeyboardNavigationSignature } from '@mui/x-charts/internals';
+import { type UseChartZAxisSignature, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartHighlightSignature, type UseChartBrushSignature, type UseChartItemClickSignature, type UseChartKeyboardNavigationSignature, type ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { type UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type HeatmapPluginSignatures = [UseChartZAxisSignature, UseChartTooltipSignature<'heatmap'>, UseChartInteractionSignature, UseChartCartesianAxisSignature<'heatmap'>, UseChartHighlightSignature, UseChartProExportSignature, UseChartBrushSignature, UseChartProZoomSignature, UseChartKeyboardNavigationSignature];
+export type HeatmapPluginSignatures = [UseChartZAxisSignature, UseChartTooltipSignature<'heatmap'>, UseChartInteractionSignature, UseChartCartesianAxisSignature<'heatmap'>, UseChartHighlightSignature, UseChartProExportSignature, UseChartBrushSignature, UseChartProZoomSignature, UseChartItemClickSignature<'heatmap'>, UseChartKeyboardNavigationSignature];
 export declare const HEATMAP_PLUGINS: ConvertSignaturesIntoPlugins<HeatmapPluginSignatures>;

package/esm/Heatmap/Heatmap.plugins.js

@@ -1,4 +1,4 @@
-import { useChartZAxis, useChartCartesianAxis, useChartTooltip, useChartInteraction, useChartHighlight, useChartBrush, useChartKeyboardNavigation } from '@mui/x-charts/internals';
+import { useChartZAxis, useChartCartesianAxis, useChartTooltip, useChartInteraction, useChartHighlight, useChartBrush, useChartItemClick, useChartKeyboardNavigation } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const HEATMAP_PLUGINS = [useChartZAxis, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartProExport, useChartBrush, useChartProZoom, useChartKeyboardNavigation];
+export const HEATMAP_PLUGINS = [useChartZAxis, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartProExport, useChartBrush, useChartProZoom, useChartItemClick, useChartKeyboardNavigation];

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,4 +1,8 @@
-import { type ChartsTooltipContainerProps } from '@mui/x-charts/ChartsTooltip';
+import { type ChartsTooltipContainerProps, type ChartsTooltipClasses, type ChartsTooltipSlots, type ChartsTooltipSlotProps } from '@mui/x-charts/ChartsTooltip';
+export interface HeatmapTooltipSlots extends ChartsTooltipSlots {}
+export interface HeatmapTooltipSlotProps extends ChartsTooltipSlotProps {}
+export interface HeatmapTooltipClasses extends ChartsTooltipClasses {}
+export interface HeatmapTooltipContentClasses extends ChartsTooltipClasses {}
 export interface HeatmapTooltipProps extends Omit<ChartsTooltipContainerProps, 'trigger' | 'children'> {
   /**
    * Select the kind of tooltip to display

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

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

package/esm/Heatmap/seriesConfig/getItemAtPosition.js

@@ -0,0 +1,39 @@
+import { selectorAllSeriesOfType, selectorChartXAxis, selectorChartYAxis, getCartesianAxisIndex } from '@mui/x-charts/internals';
+export default function getItemAtPosition(state, point) {
+  const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = selectorChartXAxis(state);
+  const {
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = selectorChartYAxis(state);
+  const series = selectorAllSeriesOfType(state, 'heatmap');
+  const xAxisWithScale = xAxis[xAxisIds[0]];
+  const yAxisWithScale = yAxis[yAxisIds[0]];
+  const seriesId = series?.seriesOrder[0];
+  if (seriesId === undefined) {
+    return undefined;
+  }
+  const xIndex = getCartesianAxisIndex(xAxisWithScale, point.x);
+  const yIndex = getCartesianAxisIndex(yAxisWithScale, point.y);
+  if (xIndex === -1 || yIndex === -1) {
+    return undefined;
+  }
+  const dataIndex = series ? series.series[series.seriesOrder[0]].data.findIndex(d => d[0] === xIndex && d[1] === yIndex) : -1;
+  if (dataIndex === -1) {
+    return {
+      type: 'heatmap',
+      seriesId,
+      xIndex,
+      yIndex
+    };
+  }
+  return {
+    type: 'heatmap',
+    seriesId,
+    dataIndex,
+    xIndex,
+    yIndex
+  };
+}