@mui/x-charts-pro 8.3.0 → 8.4.0

package/esm/ChartZoomSlider/internals/{chartAxisZoomSliderHandleClasses.js → chartAxisZoomSliderThumbClasses.js}

@@ -1,9 +1,9 @@
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export const chartAxisZoomSliderHandleClasses = generateUtilityClasses('MuiChartAxisZoomSliderHandle', ['root', 'horizontal', 'vertical', 'start', 'end']);
-export function getAxisZoomSliderHandleUtilityClass(slot) {
-  return generateUtilityClass('MuiChartAxisZoomSliderHandle', slot);
+export const chartAxisZoomSliderThumbClasses = generateUtilityClasses('MuiChartAxisZoomSliderThumb', ['root', 'horizontal', 'vertical', 'start', 'end']);
+export function getAxisZoomSliderThumbUtilityClass(slot) {
+  return generateUtilityClass('MuiChartAxisZoomSliderThumb', slot);
 }
 export const useUtilityClasses = ownerState => {
   const {
@@ -13,5 +13,5 @@ export const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', orientation === 'horizontal' ? 'horizontal' : 'vertical', placement === 'start' ? 'start' : 'end']
   };
-  return composeClasses(slots, getAxisZoomSliderHandleUtilityClass);
+  return composeClasses(slots, getAxisZoomSliderThumbUtilityClass);
 };

package/esm/FunnelChart/FunnelChart.js

@@ -44,13 +44,14 @@ const FunnelChart = /*#__PURE__*/React.forwardRef(function FunnelChart(props, re
     seriesConfig: seriesConfig,
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [!themedProps.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: [/*#__PURE__*/_jsx(FunnelPlot, _extends({}, funnelPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !themedProps.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, themedProps.slotProps?.tooltip, {
-          trigger: "item"
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), children]
+        children: [/*#__PURE__*/_jsx(FunnelPlot, _extends({}, funnelPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), children]
+      })), !themedProps.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, themedProps.slotProps?.tooltip, {
+        trigger: "item"
       }))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") FunnelChart.displayName = "FunnelChart";
 process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/FunnelChart/FunnelPlot.js

@@ -78,12 +78,14 @@ const useAggregatedData = gap => {
           seriesId,
           value: currentSeries.data[dataIndex].value
         }) : currentSeries.sectionLabel;
+        const isIncreasing = currentSeries.dataDirection === 'increasing';
         const curve = getFunnelCurve(currentSeries.curve, {
           isHorizontal,
           gap,
           position: dataIndex,
           sections: currentSeries.dataPoints.length,
           borderRadius: currentSeries.borderRadius,
+          isIncreasing,
           min: minPoint,
           max: maxPoint
         });

package/esm/FunnelChart/FunnelSection.js

@@ -58,4 +58,5 @@ const FunnelSection = consumeSlots('MuiFunnelSection', 'funnelSection', {
     ref: ref
   }));
 }));
+if (process.env.NODE_ENV !== "production") FunnelSection.displayName = "FunnelSection";
 export { FunnelSection };

package/esm/FunnelChart/curves/curve.types.d.ts

@@ -8,6 +8,10 @@ export type CurveOptions = {
    * Indicates if the main axis of the visualization.
    */
   isHorizontal?: boolean;
+  /**
+   * Indicates if the segments values are increasing or decreasing.
+   */
+  isIncreasing?: boolean;
   /**
    * The order position of the segment.
    */

package/esm/FunnelChart/curves/pyramid.d.ts

@@ -11,6 +11,7 @@ export declare class Pyramid implements CurveGenerator {
   private position;
   private sections;
   private isHorizontal;
+  private isIncreasing;
   private gap;
   private borderRadius;
   private min;
@@ -23,7 +24,8 @@ export declare class Pyramid implements CurveGenerator {
     sections,
     borderRadius,
     min,
-    max
+    max,
+    isIncreasing
   }: CurveOptions);
   areaStart(): void;
   areaEnd(): void;

package/esm/FunnelChart/curves/pyramid.js

@@ -17,12 +17,14 @@ export class Pyramid {
     sections,
     borderRadius,
     min,
-    max
+    max,
+    isIncreasing
   }) {
     this.context = void 0;
     this.position = 0;
     this.sections = 0;
     this.isHorizontal = false;
+    this.isIncreasing = false;
     this.gap = 0;
     this.borderRadius = 0;
     this.min = {
@@ -40,6 +42,7 @@ export class Pyramid {
     this.position = position ?? 0;
     this.sections = sections ?? 1;
     this.borderRadius = borderRadius ?? 0;
+    this.isIncreasing = isIncreasing ?? false;
     this.min = min ?? {
       x: 0,
       y: 0
@@ -48,6 +51,12 @@ export class Pyramid {
       x: 0,
       y: 0
     };
+    if (isIncreasing) {
+      const currentMin = this.min;
+      const currentMax = this.max;
+      this.min = currentMax;
+      this.max = currentMin;
+    }
   }
   areaStart() {}
   areaEnd() {}
@@ -57,14 +66,25 @@ export class Pyramid {
     if (this.gap > 0) {
       return this.borderRadius;
     }
-    if (this.position === 0) {
-      return [0, 0, this.borderRadius, this.borderRadius];
-    }
-    if (this.position === this.sections - 1 && this.gap <= 0) {
-      return [this.borderRadius];
+    if (this.isIncreasing) {
+      // Is largest section
+      if (this.position === this.sections - 1) {
+        return [this.borderRadius, this.borderRadius];
+      }
+      // Is smallest section and shaped like a triangle
+      if (this.position === 0) {
+        return [0, 0, this.borderRadius];
+      }
     }
-    if (this.position === this.sections - 1) {
-      return [this.borderRadius, this.borderRadius];
+    if (!this.isIncreasing) {
+      // Is largest section
+      if (this.position === 0) {
+        return [0, 0, this.borderRadius, this.borderRadius];
+      }
+      // Is smallest section and shaped like a triangle
+      if (this.position === this.sections - 1) {
+        return [this.borderRadius];
+      }
     }
     return 0;
   }
@@ -113,8 +133,15 @@ export class Pyramid {
 
     // In the last section, to form a triangle we need 3 points instead of 4
     // Else the algorithm will break.
-    if (this.position === this.sections - 1 && this.gap <= 0) {
-      this.points = [this.points[0], this.points[1], this.points[3]];
+    const isLastSection = this.position === this.sections - 1;
+    const isFirstSection = this.position === 0;
+    if (this.gap <= 0) {
+      if (isFirstSection && this.isIncreasing) {
+        this.points = [this.points[0], this.points[1], this.points[2]];
+      }
+      if (isLastSection && !this.isIncreasing) {
+        this.points = [this.points[0], this.points[1], this.points[3]];
+      }
     }
     borderRadiusPolygon(this.context, this.points, this.getBorderRadius());
   }

package/esm/FunnelChart/curves/step-pyramid.d.ts

@@ -1,5 +1,5 @@
 import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
-import { CurveOptions } from "./curve.types.js";
+import { CurveOptions, Point } from "./curve.types.js";
 /**
  * This is a custom "step-pyramid" curve generator.
  * It creates a step pyramid, which is a step-like shape with static lengths.
@@ -8,7 +8,9 @@ import { CurveOptions } from "./curve.types.js";
 export declare class StepPyramid implements CurveGenerator {
   private context;
   private position;
+  private sections;
   private isHorizontal;
+  private isIncreasing;
   private gap;
   private borderRadius;
   private min;
@@ -18,14 +20,20 @@ export declare class StepPyramid implements CurveGenerator {
     isHorizontal,
     gap,
     position,
+    sections,
     borderRadius,
     min,
-    max
+    max,
+    isIncreasing
   }: CurveOptions);
   areaStart(): void;
   areaEnd(): void;
   lineStart(): void;
   lineEnd(): void;
   protected getBorderRadius(): number | number[];
+  slopeStart(index: number): Point;
+  slopeEnd(index: number): Point;
+  initialX(index: number): number;
+  initialY(index: number): number;
   point(xIn: number, yIn: number): void;
 }

package/esm/FunnelChart/curves/step-pyramid.js

@@ -13,13 +13,17 @@ export class StepPyramid {
     isHorizontal,
     gap,
     position,
+    sections,
     borderRadius,
     min,
-    max
+    max,
+    isIncreasing
   }) {
     this.context = void 0;
     this.position = 0;
+    this.sections = 0;
     this.isHorizontal = false;
+    this.isIncreasing = false;
     this.gap = 0;
     this.borderRadius = 0;
     this.min = {
@@ -35,7 +39,9 @@ export class StepPyramid {
     this.isHorizontal = isHorizontal ?? false;
     this.gap = (gap ?? 0) / 2;
     this.position = position ?? 0;
+    this.sections = sections ?? 1;
     this.borderRadius = borderRadius ?? 0;
+    this.isIncreasing = isIncreasing ?? false;
     this.min = min ?? {
       x: 0,
       y: 0
@@ -50,7 +56,91 @@ export class StepPyramid {
   lineStart() {}
   lineEnd() {}
   getBorderRadius() {
-    return this.gap > 0 || this.position === 0 ? this.borderRadius : [this.borderRadius, this.borderRadius];
+    if (this.gap > 0) {
+      return this.borderRadius;
+    }
+    if (this.isIncreasing) {
+      if (this.position === this.sections - 1) {
+        return this.borderRadius;
+      }
+      return [0, 0, this.borderRadius, this.borderRadius];
+    }
+    if (this.position === 0) {
+      return this.borderRadius;
+    }
+    return [this.borderRadius, this.borderRadius];
+  }
+  slopeStart(index) {
+    if (this.isIncreasing) {
+      if (this.isHorizontal) {
+        return {
+          x: this.min.x,
+          y: (this.min.y + this.max.y) / 2
+        };
+      }
+      return {
+        x: (this.min.x + this.max.x) / 2,
+        y: this.min.y
+      };
+    }
+    if (this.isHorizontal) {
+      if (index <= 1) {
+        return this.min;
+      }
+      return {
+        x: this.min.x,
+        y: this.max.y
+      };
+    }
+    if (index <= 1) {
+      return {
+        x: this.max.x,
+        y: this.min.y
+      };
+    }
+    return this.min;
+  }
+  slopeEnd(index) {
+    if (this.isIncreasing) {
+      if (this.isHorizontal) {
+        if (index <= 1) {
+          return {
+            x: this.max.x,
+            y: this.min.y
+          };
+        }
+        return this.max;
+      }
+      if (index <= 1) {
+        return this.max;
+      }
+      return {
+        x: this.min.x,
+        y: this.max.y
+      };
+    }
+    if (this.isHorizontal) {
+      return {
+        x: this.max.x,
+        y: (this.max.y + this.min.y) / 2
+      };
+    }
+    return {
+      x: (this.max.x + this.min.x) / 2,
+      y: this.max.y
+    };
+  }
+  initialX(index) {
+    if (this.isIncreasing) {
+      return index === 0 || index === 1 ? this.points.at(1).x : this.points.at(2).x;
+    }
+    return index === 0 || index === 1 ? this.points.at(0).x : this.points.at(3).x;
+  }
+  initialY(index) {
+    if (this.isIncreasing) {
+      return index === 0 || index === 1 ? this.points.at(1).y : this.points.at(2).y;
+    }
+    return index === 0 || index === 1 ? this.points.at(0).y : this.points.at(3).y;
   }
   point(xIn, yIn) {
     this.points.push({
@@ -63,34 +153,20 @@ export class StepPyramid {
 
     // Add gaps where they are needed.
     this.points = this.points.map((point, index) => {
+      const slopeStart = this.slopeStart(index);
+      const slopeEnd = this.slopeEnd(index);
       if (this.isHorizontal) {
-        const slopeEnd = {
-          x: this.max.x,
-          y: (this.max.y + this.min.y) / 2
-        };
-        const slopeStart = index <= 1 ? this.min : {
-          x: this.min.x,
-          y: this.max.y
-        };
         const yGetter = lerpY(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
         const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
-        const xInitial = index === 0 || index === 1 ? this.points.at(0).x : this.points.at(3).x;
+        const xInitial = this.initialX(index);
         return {
           x: xGap,
           y: yGetter(xInitial)
         };
       }
-      const slopeEnd = {
-        x: (this.max.x + this.min.x) / 2,
-        y: this.max.y
-      };
-      const slopeStart = index <= 1 ? {
-        x: this.max.x,
-        y: this.min.y
-      } : this.min;
       const xGetter = lerpX(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
       const yGap = point.y + (index === 0 || index === 3 ? this.gap : -this.gap);
-      const yInitial = index === 0 || index === 1 ? this.points.at(0).y : this.points.at(3).y;
+      const yInitial = this.initialY(index);
       return {
         x: xGetter(yInitial),
         y: yGap

package/esm/FunnelChart/curves/step.d.ts

@@ -13,15 +13,19 @@ import { CurveOptions } from "./curve.types.js";
 export declare class Step implements CurveGenerator {
   private context;
   private isHorizontal;
+  private isIncreasing;
   private gap;
   private borderRadius;
   private position;
+  private sections;
   private points;
   constructor(context: CanvasRenderingContext2D, {
     isHorizontal,
     gap,
     position,
-    borderRadius
+    borderRadius,
+    isIncreasing,
+    sections
   }: CurveOptions);
   areaStart(): void;
   areaEnd(): void;

package/esm/FunnelChart/curves/step.js

@@ -18,26 +18,44 @@ export class Step {
     isHorizontal,
     gap,
     position,
-    borderRadius
+    borderRadius,
+    isIncreasing,
+    sections
   }) {
     this.context = void 0;
     this.isHorizontal = false;
+    this.isIncreasing = false;
     this.gap = 0;
     this.borderRadius = 0;
     this.position = 0;
+    this.sections = 0;
     this.points = [];
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
     this.gap = (gap ?? 0) / 2;
     this.position = position ?? 0;
+    this.sections = sections ?? 1;
     this.borderRadius = borderRadius ?? 0;
+    this.isIncreasing = isIncreasing ?? false;
   }
   areaStart() {}
   areaEnd() {}
   lineStart() {}
   lineEnd() {}
   getBorderRadius() {
-    return this.gap > 0 || this.position === 0 ? this.borderRadius : [this.borderRadius, this.borderRadius];
+    if (this.gap > 0) {
+      return this.borderRadius;
+    }
+    if (this.isIncreasing) {
+      if (this.position === this.sections - 1) {
+        return this.borderRadius;
+      }
+      return [0, 0, this.borderRadius, this.borderRadius];
+    }
+    if (this.position === 0) {
+      return this.borderRadius;
+    }
+    return [this.borderRadius, this.borderRadius];
   }
   point(xIn, yIn) {
     this.points.push({

package/esm/FunnelChart/funnel.types.d.ts

@@ -110,6 +110,13 @@ export type FunnelItem = {
 export interface DefaultizedFunnelSeriesType extends DefaultizedProps<FunnelSeriesType, CommonDefaultizedProps | 'layout'> {
   dataPoints: FunnelDataPoints[][];
   data: Readonly<MakeRequired<FunnelValueType, 'id' | 'color'>[]>;
+  /**
+   * Denotes if the data is increasing, first data point is less than the last data point.
+   * While the data is decreasing if the first data point is greater than the last data point.
+   *
+   * This is used to determine the direction of the funnel.
+   */
+  dataDirection: 'increasing' | 'decreasing';
 }
 export type FunnelDataPoints = Record<'x' | 'y', number> & {
   useBandWidth: boolean;

package/esm/FunnelChart/seriesConfig/seriesProcessor.js

@@ -25,6 +25,9 @@ const seriesProcessor = params => {
   const isHorizontal = seriesOrder.some(seriesId => series[seriesId].layout === 'horizontal');
   seriesOrder.forEach(seriesId => {
     const currentSeries = series[seriesId];
+    const firstDataPoint = currentSeries.data.at(0);
+    const lastDataPoint = currentSeries.data.at(-1);
+    const dataDirection = firstDataPoint !== undefined && lastDataPoint !== undefined && firstDataPoint.value < lastDataPoint.value ? 'increasing' : 'decreasing';
     completedSeries[seriesId] = _extends({
       labelMarkType: 'square',
       layout: isHorizontal ? 'horizontal' : 'vertical',
@@ -33,6 +36,7 @@ const seriesProcessor = params => {
       data: currentSeries.data.map((v, i) => _extends({
         id: `${seriesId}-funnel-item-${v.id ?? i}`
       }, v)),
+      dataDirection,
       dataPoints: []
     });
     const stackOffsets = completedSeries[seriesId].data.toReversed().map((_, i, array) => array.slice(0, i).reduce((acc, item) => acc + item.value, 0)).toReversed();
@@ -40,12 +44,54 @@ const seriesProcessor = params => {
       // Main = main axis, Other = other axis
       // For horizontal layout, main is y, other is x
       // For vertical layout, main is x, other is y
+      const isIncreasing = completedSeries[seriesId].dataDirection === 'increasing';
       const currentMaxMain = item.value;
-      const nextDataIndex = dataIndex === array.length - 1 ? dataIndex : dataIndex + 1;
+      const getNextDataIndex = () => {
+        if (isIncreasing) {
+          return dataIndex === 0 ? dataIndex : dataIndex - 1;
+        }
+        return dataIndex === array.length - 1 ? dataIndex : dataIndex + 1;
+      };
+      const nextDataIndex = getNextDataIndex();
       const nextMaxMain = array[nextDataIndex].value ?? 0;
       const nextMaxOther = 0;
       const currentMaxOther = completedSeries[seriesId].data[dataIndex].value;
       const stackOffset = stackOffsets[dataIndex];
+      if (isIncreasing) {
+        return [
+        // Top right (vertical) or Top left (horizontal)
+        createPoint({
+          main: nextMaxMain,
+          other: nextMaxOther,
+          inverse: isHorizontal,
+          useBandWidth: false,
+          stackOffset
+        }),
+        // Bottom right (vertical) or Top right (horizontal)
+        createPoint({
+          main: currentMaxMain,
+          other: currentMaxOther,
+          inverse: isHorizontal,
+          useBandWidth: true,
+          stackOffset
+        }),
+        // Bottom left (vertical) or Bottom right (horizontal)
+        createPoint({
+          main: -currentMaxMain,
+          other: currentMaxOther,
+          inverse: isHorizontal,
+          useBandWidth: true,
+          stackOffset
+        }),
+        // Top left (vertical) or Bottom left (horizontal)
+        createPoint({
+          main: -nextMaxMain,
+          other: nextMaxOther,
+          inverse: isHorizontal,
+          useBandWidth: false,
+          stackOffset
+        })];
+      }
       return [
       // Top right (vertical) or Top left (horizontal)
       createPoint({

package/esm/Heatmap/Heatmap.d.ts

@@ -6,7 +6,7 @@ import { ChartsAxisSlots, ChartsAxisSlotProps, XAxis, YAxis } from '@mui/x-chart
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { HeatmapSeriesType } from "../models/seriesType/heatmap.js";
-import { HeatmapTooltipProps } from "./HeatmapTooltip/HeatmapTooltip.js";
+import { HeatmapTooltipProps } from "./HeatmapTooltip/index.js";
 import { HeatmapItemSlotProps, HeatmapItemSlots } from "./HeatmapItem.js";
 import { HeatmapPluginsSignatures } from "./Heatmap.plugins.js";
 export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots {

package/esm/Heatmap/Heatmap.js

@@ -7,14 +7,15 @@ 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 { 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 { ChartContainerPro } from "../ChartContainerPro/index.js";
 import { HeatmapPlot } from "./HeatmapPlot.js";
 import { seriesConfig as heatmapSeriesConfig } from "./seriesConfig/index.js";
-import { HeatmapTooltip } from "./HeatmapTooltip/HeatmapTooltip.js";
+import { HeatmapTooltip } from "./HeatmapTooltip/index.js";
 import { HEATMAP_PLUGINS } from "./Heatmap.plugins.js";
+import { ChartDataProviderPro } from "../ChartDataProviderPro/index.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']);
@@ -82,8 +83,7 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
     }
   }], [zAxis]);
   const Tooltip = props.slots?.tooltip ?? HeatmapTooltip;
-  return /*#__PURE__*/_jsxs(ChartContainerPro, {
-    ref: ref,
+  return /*#__PURE__*/_jsxs(ChartDataProviderPro, {
     seriesConfig: seriesConfig,
     series: series.map(s => _extends({
       type: 'heatmap'
@@ -96,30 +96,34 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
     zAxis: zAxisWithDefault,
     colors: colors,
     dataset: dataset,
-    sx: sx,
     disableAxisListener: true,
     highlightedItem: highlightedItem,
     onHighlightChange: onHighlightChange,
     onAxisClick: onAxisClick,
     plugins: HEATMAP_PLUGINS,
-    children: [/*#__PURE__*/_jsxs("g", {
-      clipPath: `url(#${clipPathId})`,
-      children: [/*#__PURE__*/_jsx(HeatmapPlot, {
+    children: [/*#__PURE__*/_jsxs(ChartsSurface, {
+      ref: ref,
+      sx: sx,
+      children: [/*#__PURE__*/_jsxs("g", {
+        clipPath: `url(#${clipPathId})`,
+        children: [/*#__PURE__*/_jsx(HeatmapPlot, {
+          slots: slots,
+          slotProps: slotProps
+        }), /*#__PURE__*/_jsx(ChartsOverlay, {
+          loading: loading,
+          slots: slots,
+          slotProps: slotProps
+        })]
+      }), /*#__PURE__*/_jsx(ChartsAxis, {
         slots: slots,
         slotProps: slotProps
-      }), /*#__PURE__*/_jsx(ChartsOverlay, {
-        loading: loading,
-        slots: slots,
-        slotProps: slotProps
-      })]
-    }), /*#__PURE__*/_jsx(ChartsAxis, {
-      slots: slots,
-      slotProps: slotProps
-    }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
-      id: clipPathId
-    }), children]
+      }), /*#__PURE__*/_jsx(ChartsClipPath, {
+        id: clipPathId
+      }), children]
+    }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps?.tooltip))]
   });
 });
+if (process.env.NODE_ENV !== "production") Heatmap.displayName = "Heatmap";
 process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

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

@@ -0,0 +1,2 @@
+import { HeatmapTooltipProps } from "./HeatmapTooltip.types.js";
+export declare const useUtilityClasses: (props: Pick<HeatmapTooltipProps, "classes">) => Record<"mark" | "table" | "cell" | "row" | "root" | "paper" | "markContainer" | "labelCell" | "valueCell", string>;

package/esm/Heatmap/HeatmapTooltip/HeatmapTooltip.classes.js

@@ -0,0 +1,19 @@
+import composeClasses from '@mui/utils/composeClasses';
+import { getChartsTooltipUtilityClass } from '@mui/x-charts/ChartsTooltip';
+export const useUtilityClasses = props => {
+  const {
+    classes
+  } = props;
+  const slots = {
+    root: ['root'],
+    paper: ['paper'],
+    table: ['table'],
+    row: ['row'],
+    cell: ['cell'],
+    mark: ['mark'],
+    markContainer: ['markContainer'],
+    labelCell: ['labelCell'],
+    valueCell: ['valueCell']
+  };
+  return composeClasses(slots, getChartsTooltipUtilityClass, classes);
+};

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

@@ -1,14 +1,5 @@
 import * as React from 'react';
-import { ChartsTooltipContainerProps } from '@mui/x-charts/ChartsTooltip';
-export interface HeatmapTooltipProps extends Omit<ChartsTooltipContainerProps, 'trigger' | 'children'> {
-  /**
-   * Select the kind of tooltip to display
-   * - 'item': Shows data about the item below the mouse.
-   * - 'none': Does not display tooltip
-   * @default 'item'
-   */
-  trigger?: 'item' | 'none';
-}
+import { HeatmapTooltipProps } from "./HeatmapTooltip.types.js";
 declare function HeatmapTooltip(props: HeatmapTooltipProps): React.JSX.Element;
 declare namespace HeatmapTooltip {
   var propTypes: any;