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

package/Heatmap/Heatmap.js

@@ -11,158 +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,
-    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,
-    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, {
+      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, {
         ref: ref,
         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 = {
@@ -178,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.
    */
@@ -210,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,
   /**
@@ -219,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.
@@ -261,6 +163,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.default.func,
   /**
@@ -269,6 +173,13 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.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.default.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -286,11 +197,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
@@ -320,10 +226,10 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    */
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    seriesId: _propTypes.default.string.isRequired,
     type: _propTypes.default.oneOf(['heatmap']).isRequired,
-    xIndex: _propTypes.default.number,
-    yIndex: _propTypes.default.number
+    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.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/Heatmap/Heatmap.plugins.js

@@ -7,4 +7,4 @@ exports.HEATMAP_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-const HEATMAP_PLUGINS = exports.HEATMAP_PLUGINS = [_internals.useChartZAxis, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _useChartProExport.useChartProExport, _internals.useChartBrush, _useChartProZoom.useChartProZoom, _internals.useChartKeyboardNavigation];
+const HEATMAP_PLUGINS = exports.HEATMAP_PLUGINS = [_internals.useChartZAxis, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _useChartProExport.useChartProExport, _internals.useChartBrush, _useChartProZoom.useChartProZoom, _internals.useChartItemClick, _internals.useChartKeyboardNavigation];

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,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/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

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getItemAtPosition;
+var _internals = require("@mui/x-charts/internals");
+function getItemAtPosition(state, point) {
+  const {
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = (0, _internals.selectorChartXAxis)(state);
+  const {
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = (0, _internals.selectorChartYAxis)(state);
+  const series = (0, _internals.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 = (0, _internals.getCartesianAxisIndex)(xAxisWithScale, point.x);
+  const yIndex = (0, _internals.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
+  };
+}

package/Heatmap/seriesConfig/index.js

@@ -12,6 +12,7 @@ var _getColor = _interopRequireDefault(require("./getColor"));
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _getItemAtPosition = _interopRequireDefault(require("./getItemAtPosition"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 _internals.cartesianSeriesTypes.addType('heatmap');
 const heatmapSeriesConfig = exports.heatmapSeriesConfig = {
@@ -24,5 +25,7 @@ const heatmapSeriesConfig = exports.heatmapSeriesConfig = {
   yExtremumGetter: _extremums.getBaseExtremum,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
   identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: _internals.identifierCleanerSeriesIdDataIndex,
+  getItemAtPosition: _getItemAtPosition.default,
   keyboardFocusHandler: _keyboardFocusHandler.default
 };

package/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;
+};