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

package/Heatmap/Heatmap.d.ts

@@ -28,7 +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' | 'skipAnimation' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange' | 'onAxisClick'>, 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.
@@ -62,7 +62,6 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
   tooltip?: ChartsTooltipProps;
   /**
    * If `true`, the legend is not rendered.
-   * @default true
    */
   hideLegend?: boolean;
   /**
@@ -70,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 {}
@@ -81,5 +84,5 @@ export interface HeatmapProps extends Omit<ChartContainerProProps<'heatmap', Hea
    */
   slotProps?: HeatmapSlotProps;
 }
-declare const Heatmap: React.ForwardRefExoticComponent<HeatmapProps & React.RefAttributes<SVGSVGElement>>;
+declare const Heatmap: React.ForwardRefExoticComponent<HeatmapProps & React.RefAttributes<HTMLDivElement>>;
 export { Heatmap };

package/Heatmap/Heatmap.js

@@ -11,160 +11,57 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
-var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
 var _ChartsAxis = require("@mui/x-charts/ChartsAxis");
 var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
 var _ChartsWrapper = require("@mui/x-charts/ChartsWrapper");
 var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
 var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
-var _constants = require("@mui/x-charts/constants");
 var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
 var _ChartsBrushOverlay = require("@mui/x-charts/ChartsBrushOverlay");
 var _HeatmapPlot = require("./HeatmapPlot");
-var _seriesConfig = require("./seriesConfig");
 var _HeatmapTooltip = require("./HeatmapTooltip");
-var _Heatmap2 = require("./Heatmap.plugins");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
 var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _FocusedHeatmapCell = require("./FocusedHeatmapCell");
+var _useHeatmapProps = require("./useHeatmapProps");
 var _jsxRuntime = require("react/jsx-runtime");
-// The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
-const defaultColorMap = (0, _d3Interpolate.interpolateRgbBasis)(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
-const seriesConfig = {
-  heatmap: _seriesConfig.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 = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
   const props = (0, _styles.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 = (0, _useId.default)();
-  const clipPathId = `${id}-clip-path`;
-  const xAxisWithDefault = React.useMemo(() => (xAxis && xAxis.length > 0 ? xAxis : [{
-    id: _constants.DEFAULT_X_AXIS_KEY
-  }]).map(axis => (0, _extends2.default)({
-    scaleType: 'band',
-    categoryGapRatio: 0
-  }, axis, {
-    data: axis.data ?? getDefaultDataForXAxis(series)
-  })), [series, xAxis]);
-  const yAxisWithDefault = React.useMemo(() => (yAxis && yAxis.length > 0 ? yAxis : [{
-    id: _constants.DEFAULT_Y_AXIS_KEY
-  }]).map(axis => (0, _extends2.default)({
-    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
+  } = (0, _useHeatmapProps.useHeatmapProps)(props);
   const Tooltip = slots?.tooltip ?? _HeatmapTooltip.HeatmapTooltip;
   const Toolbar = slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, {
-    apiRef: apiRef,
-    seriesConfig: seriesConfig,
-    series: series.map(s => (0, _extends2.default)({
-      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: _Heatmap2.HEATMAP_PLUGINS,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
-        slots: (0, _extends2.default)({}, slots, {
-          legend: slots?.legend ?? _ChartsLegend.ContinuousColorLegend
-        }),
-        slotProps: {
-          legend: (0, _extends2.default)({
-            labelPosition: 'extremes'
-          }, slotProps?.legend)
-        },
-        sx: slotProps?.legend?.direction === 'vertical' ? {
-          height: 150
-        } : {
-          width: '50%'
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, {
-        ref: ref,
+      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.jsxs)(_ChartsSurface.ChartsSurface, {
         sx: sx,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-          clipPath: `url(#${clipPathId})`,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeatmapPlot.HeatmapPlot, {
-            slots: slots,
-            slotProps: slotProps
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedHeatmapCell.FocusedHeatmapCell, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
-            loading: loading,
-            slots: slots,
-            slotProps: slotProps
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
-          slots: slots,
-          slotProps: slotProps
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
-          id: clipPathId
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsBrushOverlay.ChartsBrushOverlay, {}), children]
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeatmapPlot.HeatmapPlot, (0, _extends2.default)({}, heatmapPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedHeatmapCell.FocusedHeatmapCell, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps))]
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsBrushOverlay.ChartsBrushOverlay, {}), children]
       }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps?.tooltip))]
     }))
-  });
+  }));
 });
 if (process.env.NODE_ENV !== "production") Heatmap.displayName = "Heatmap";
 process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
@@ -180,6 +77,10 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
       setZoomData: _propTypes.default.func.isRequired
     })
   }),
+  /**
+   * The border radius of the heatmap cells in pixels.
+   */
+  borderRadius: _propTypes.default.number,
   /**
    * Configuration for the brush interaction.
    */
@@ -212,7 +113,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   height: _propTypes.default.number,
   /**
    * If `true`, the legend is not rendered.
-   * @default true
    */
   hideLegend: _propTypes.default.bool,
   /**
@@ -221,7 +121,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -277,9 +177,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.default.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.default.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -297,11 +205,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * An array of [[HeatmapSeries]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  /**
-   * The configuration helpers used to compute attributes according to the series type.
-   * @ignore Unstable props for internal usage.
-   */
-  seriesConfig: _propTypes.default.object,
   /**
    * If true, shows the default chart toolbar.
    * @default false
@@ -325,16 +228,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.default.object,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['heatmap']).isRequired,
-    xIndex: _propTypes.default.number,
-    yIndex: _propTypes.default.number
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['heatmap']),
+    xIndex: _propTypes.default.number.isRequired,
+    yIndex: _propTypes.default.number.isRequired
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/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/Heatmap/Heatmap.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/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/Heatmap/HeatmapItem.js

@@ -17,7 +17,7 @@ var _heatmapClasses = require("./heatmapClasses");
 var _HeatmapCell = require("./internals/HeatmapCell");
 var _shouldRegisterPointerInteractionsGlobally = require("./shouldRegisterPointerInteractionsGlobally");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesId", "dataIndex", "color", "value", "isHighlighted", "isFaded", "slotProps", "slots"];
+const _excluded = ["seriesId", "dataIndex", "color", "value", "isHighlighted", "isFaded", "borderRadius", "xIndex", "yIndex", "slotProps", "slots"];
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -42,6 +42,9 @@ function HeatmapItem(props) {
       value,
       isHighlighted = false,
       isFaded = false,
+      borderRadius,
+      xIndex,
+      yIndex,
       slotProps = {},
       slots = {}
     } = props,
@@ -53,7 +56,9 @@ function HeatmapItem(props) {
   const interactionProps = (0, _internals.useInteractionItemProps)({
     type: 'heatmap',
     seriesId,
-    dataIndex
+    dataIndex,
+    xIndex,
+    yIndex
   }, skipInteractionItemProps);
   const ownerState = {
     seriesId,
@@ -67,7 +72,10 @@ function HeatmapItem(props) {
   const Cell = slots?.cell ?? _HeatmapCell.HeatmapCell;
   const cellProps = (0, _useSlotProps.default)({
     elementType: Cell,
-    additionalProps: interactionProps,
+    additionalProps: (0, _extends2.default)({}, interactionProps, {
+      rx: borderRadius,
+      ry: borderRadius
+    }),
     externalForwardedProps: (0, _extends2.default)({}, other),
     externalSlotProps: slotProps.cell,
     ownerState,

package/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/Heatmap/HeatmapPlot.js

@@ -7,69 +7,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HeatmapPlot = HeatmapPlot;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _hooks = require("@mui/x-charts/hooks");
-var _internals = require("@mui/x-charts/internals");
-var _useHeatmapSeries = require("../hooks/useHeatmapSeries");
-var _HeatmapItem = require("./HeatmapItem");
-var _useChartHeatmapPosition = require("../plugins/selectors/useChartHeatmapPosition.selectors");
-var _shouldRegisterPointerInteractionsGlobally = require("./shouldRegisterPointerInteractionsGlobally");
+var _HeatmapSVGPlot = require("./HeatmapSVGPlot");
 var _jsxRuntime = require("react/jsx-runtime");
-function HeatmapPlot(props) {
-  const store = (0, _internals.useStore)();
-  const xScale = (0, _hooks.useXScale)();
-  const yScale = (0, _hooks.useYScale)();
-  const colorScale = (0, _hooks.useZColorScale)();
-  const series = (0, _useHeatmapSeries.useHeatmapSeriesContext)();
-  const isHighlighted = store.use(_internals.selectorChartsIsHighlightedCallback);
-  const isFaded = store.use(_internals.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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [(0, _shouldRegisterPointerInteractionsGlobally.shouldRegisterPointerInteractionsGlobally)(props.slots, props.slotProps) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RegisterHeatmapPointerInteractions, {}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-      children: seriesToDisplay.data.map(([xIndex, yIndex, value], dataIndex) => {
-        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__*/(0, _jsxRuntime.jsx)(_HeatmapItem.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() {
-  (0, _internals.useRegisterPointerInteractions)(_useChartHeatmapPosition.selectorHeatmapItemAtPosition);
-  return null;
+const _excluded = ["borderRadius"];
+function HeatmapPlot(_ref) {
+  let {
+      borderRadius
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeatmapSVGPlot.HeatmapSVGPlot, (0, _extends2.default)({
+    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.default.number,
   /**
    * The props used for each component slot.
    * @default {}

package/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/Heatmap/HeatmapSVGPlot.js

@@ -0,0 +1,70 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeatmapSVGPlot = HeatmapSVGPlot;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("@mui/x-charts/hooks");
+var _internals = require("@mui/x-charts/internals");
+var _hooks2 = require("../hooks");
+var _HeatmapItem = require("./HeatmapItem");
+var _useChartHeatmapPosition = require("../plugins/selectors/useChartHeatmapPosition.selectors");
+var _shouldRegisterPointerInteractionsGlobally = require("./shouldRegisterPointerInteractionsGlobally");
+var _jsxRuntime = require("react/jsx-runtime");
+const MemoHeatmapItem = /*#__PURE__*/React.memo(_HeatmapItem.HeatmapItem);
+if (process.env.NODE_ENV !== "production") MemoHeatmapItem.displayName = "MemoHeatmapItem";
+function HeatmapSVGPlot(props) {
+  const store = (0, _internals.useStore)();
+  const xScale = (0, _hooks.useXScale)();
+  const yScale = (0, _hooks.useYScale)();
+  const colorScale = (0, _hooks.useZColorScale)();
+  const series = (0, _hooks2.useHeatmapSeriesContext)();
+  const isHighlighted = store.use(_internals.selectorChartsIsHighlightedCallback);
+  const isFaded = store.use(_internals.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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [(0, _shouldRegisterPointerInteractionsGlobally.shouldRegisterPointerInteractionsGlobally)(props.slots, props.slotProps) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RegisterHeatmapPointerInteractions, {}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      children: seriesToDisplay.data.map(([xIndex, yIndex, value], dataIndex) => {
+        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__*/(0, _jsxRuntime.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() {
+  (0, _internals.useRegisterPointerInteractions)(_useChartHeatmapPosition.selectorHeatmapItemAtPosition);
+  return null;
+}

package/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/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/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/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/Heatmap/seriesConfig/getItemAtPosition.js

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

package/Heatmap/seriesConfig/index.js

@@ -25,6 +25,7 @@ const heatmapSeriesConfig = exports.heatmapSeriesConfig = {
   yExtremumGetter: _extremums.getBaseExtremum,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
   identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: _internals.identifierCleanerSeriesIdDataIndex,
   getItemAtPosition: _getItemAtPosition.default,
   keyboardFocusHandler: _keyboardFocusHandler.default
 };