@mui/x-charts-pro 8.3.0 → 8.4.0

package/Heatmap/HeatmapTooltip/HeatmapTooltip.js

@@ -10,118 +10,20 @@ exports.HeatmapTooltip = HeatmapTooltip;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
-var _hooks = require("@mui/x-charts/hooks");
-var _internals = require("@mui/x-charts/internals");
-var _useHeatmapSeries = require("../../hooks/useHeatmapSeries");
-var _HeatmapTooltipAxesValue = require("./HeatmapTooltipAxesValue");
+var _HeatmapTooltipContent = require("./HeatmapTooltipContent");
+var _HeatmapTooltip = require("./HeatmapTooltip.classes");
 var _jsxRuntime = require("react/jsx-runtime");
-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 (0, _composeClasses.default)(slots, _ChartsTooltip.getChartsTooltipUtilityClass, classes);
-};
-function DefaultHeatmapTooltipContent(props) {
-  const classes = useUtilityClasses(props);
-  const xAxis = (0, _hooks.useXAxis)();
-  const yAxis = (0, _hooks.useYAxis)();
-  const heatmapSeries = (0, _useHeatmapSeries.useHeatmapSeriesContext)();
-  const tooltipData = (0, _ChartsTooltip.useItemTooltip)();
-  if (!tooltipData || !heatmapSeries || heatmapSeries.seriesOrder.length === 0) {
-    return null;
-  }
-  const {
-    series,
-    seriesOrder
-  } = heatmapSeries;
-  const seriesId = seriesOrder[0];
-  const {
-    color,
-    value,
-    identifier,
-    markType
-  } = tooltipData;
-  const [xIndex, yIndex] = value;
-  const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
-    location: 'tooltip',
-    scale: xAxis.scale
-  }) ?? xAxis.data[xIndex].toLocaleString();
-  const formattedY = yAxis.valueFormatter?.(yAxis.data[yIndex], {
-    location: 'tooltip',
-    scale: yAxis.scale
-  }) ?? yAxis.data[yIndex].toLocaleString();
-  const formattedValue = series[seriesId].valueFormatter(value, {
-    dataIndex: identifier.dataIndex
-  });
-  const seriesLabel = (0, _internals.getLabel)(series[seriesId].label, 'tooltip');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipPaper, {
-    className: classes.paper,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipTable, {
-      className: classes.table,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_HeatmapTooltipAxesValue.HeatmapTooltipAxesValue, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: formattedX
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: formattedY
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
-          className: classes.row,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipCell, {
-            className: (0, _clsx.default)(classes.labelCell, classes.cell),
-            component: "th",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: classes.markContainer,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.ChartsLabelMark, {
-                type: markType,
-                color: color,
-                className: classes.mark
-              })
-            }), seriesLabel]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-            className: (0, _clsx.default)(classes.valueCell, classes.cell),
-            component: "td",
-            children: formattedValue
-          })]
-        })
-      })]
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? DefaultHeatmapTooltipContent.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: _propTypes.default.object
-} : void 0;
 function HeatmapTooltip(props) {
-  const classes = useUtilityClasses({
+  const classes = (0, _HeatmapTooltip.useUtilityClasses)({
     classes: props.classes
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipContainer, (0, _extends2.default)({
     trigger: "item"
   }, props, {
     classes: classes,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultHeatmapTooltipContent, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeatmapTooltipContent.HeatmapTooltipContent, {
       classes: classes
     })
   }));

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

@@ -0,0 +1,10 @@
+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';
+}

package/Heatmap/HeatmapTooltip/HeatmapTooltip.types.js

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

package/Heatmap/HeatmapTooltip/HeatmapTooltipContent.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { HeatmapTooltipProps } from "./HeatmapTooltip.types.js";
+export interface HeatmapTooltipContentProps extends Pick<HeatmapTooltipProps, 'classes'> {}
+export declare function HeatmapTooltipContent(props: HeatmapTooltipContentProps): React.JSX.Element | null;
+export declare namespace HeatmapTooltipContent {
+  var propTypes: any;
+}

package/Heatmap/HeatmapTooltip/HeatmapTooltipContent.js

@@ -0,0 +1,96 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeatmapTooltipContent = HeatmapTooltipContent;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
+var _hooks = require("@mui/x-charts/hooks");
+var _internals = require("@mui/x-charts/internals");
+var _useHeatmapSeries = require("../../hooks/useHeatmapSeries");
+var _HeatmapTooltipAxesValue = require("./HeatmapTooltipAxesValue");
+var _HeatmapTooltip = require("./HeatmapTooltip.classes");
+var _jsxRuntime = require("react/jsx-runtime");
+function HeatmapTooltipContent(props) {
+  const classes = (0, _HeatmapTooltip.useUtilityClasses)(props);
+  const xAxis = (0, _hooks.useXAxis)();
+  const yAxis = (0, _hooks.useYAxis)();
+  const heatmapSeries = (0, _useHeatmapSeries.useHeatmapSeriesContext)();
+  const tooltipData = (0, _ChartsTooltip.useItemTooltip)();
+  if (!tooltipData || !heatmapSeries || heatmapSeries.seriesOrder.length === 0) {
+    return null;
+  }
+  const {
+    series,
+    seriesOrder
+  } = heatmapSeries;
+  const seriesId = seriesOrder[0];
+  const {
+    color,
+    value,
+    identifier,
+    markType
+  } = tooltipData;
+  const [xIndex, yIndex] = value;
+  const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
+    location: 'tooltip',
+    scale: xAxis.scale
+  }) ?? xAxis.data[xIndex].toLocaleString();
+  const formattedY = yAxis.valueFormatter?.(yAxis.data[yIndex], {
+    location: 'tooltip',
+    scale: yAxis.scale
+  }) ?? yAxis.data[yIndex].toLocaleString();
+  const formattedValue = series[seriesId].valueFormatter(value, {
+    dataIndex: identifier.dataIndex
+  });
+  const seriesLabel = (0, _internals.getLabel)(series[seriesId].label, 'tooltip');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipPaper, {
+    className: classes.paper,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipTable, {
+      className: classes.table,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_HeatmapTooltipAxesValue.HeatmapTooltipAxesValue, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: formattedX
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: formattedY
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
+          className: classes.row,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipCell, {
+            className: (0, _clsx.default)(classes.labelCell, classes.cell),
+            component: "th",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: classes.markContainer,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.ChartsLabelMark, {
+                type: markType,
+                color: color,
+                className: classes.mark
+              })
+            }), seriesLabel]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
+            className: (0, _clsx.default)(classes.valueCell, classes.cell),
+            component: "td",
+            children: formattedValue
+          })]
+        })
+      })]
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? HeatmapTooltipContent.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object
+} : void 0;

package/Heatmap/HeatmapTooltip/index.d.ts

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

package/Heatmap/HeatmapTooltip/index.js

@@ -13,4 +13,15 @@ Object.keys(_HeatmapTooltip).forEach(function (key) {
       return _HeatmapTooltip[key];
     }
   });
+});
+var _HeatmapTooltipContent = require("./HeatmapTooltipContent");
+Object.keys(_HeatmapTooltipContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _HeatmapTooltipContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HeatmapTooltipContent[key];
+    }
+  });
 });

package/LineChartPro/LineChartPro.js

@@ -26,7 +26,7 @@ var _ChartZoomSlider = require("../ChartZoomSlider");
 var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
-var _LineChartPro = require("./LineChartPro.plugins");
+var _LineChartPro2 = require("./LineChartPro.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 /**
@@ -76,7 +76,7 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
     zoomData,
     onZoomChange,
     apiRef,
-    plugins: _LineChartPro.LINE_CHART_PRO_PLUGINS
+    plugins: _LineChartPro2.LINE_CHART_PRO_PLUGINS
   }), ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
@@ -87,11 +87,12 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
         })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.MarkPlot, (0, _extends2.default)({}, markPlotProps))
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
-      }))]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+      })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") LineChartPro.displayName = "LineChartPro";
 process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -322,7 +323,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -385,7 +387,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -443,7 +446,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -501,7 +505,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -559,7 +564,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -617,7 +623,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -675,7 +682,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -733,7 +741,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -803,7 +812,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -865,7 +875,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -922,7 +933,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -979,7 +991,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1036,7 +1049,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1093,7 +1107,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1150,7 +1165,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1207,7 +1223,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])

package/ScatterChartPro/ScatterChartPro.js

@@ -25,7 +25,7 @@ var _ChartZoomSlider = require("../ChartZoomSlider");
 var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
-var _ScatterChartPro = require("./ScatterChartPro.plugins");
+var _ScatterChartPro2 = require("./ScatterChartPro.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 /**
@@ -70,7 +70,7 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
     zoomData,
     onZoomChange,
     apiRef,
-    plugins: _ScatterChartPro.SCATTER_CHART_PRO_PLUGINS
+    plugins: _ScatterChartPro2.SCATTER_CHART_PRO_PLUGINS
   }), ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
@@ -79,13 +79,14 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props?.slotProps?.tooltip, {
-          trigger: "item"
-        })), children]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), children]
+      })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props?.slotProps?.tooltip, {
+        trigger: "item"
       }))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") ScatterChartPro.displayName = "ScatterChartPro";
 process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -316,7 +317,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -379,7 +381,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -437,7 +440,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -495,7 +499,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -553,7 +558,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -611,7 +617,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -669,7 +676,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -727,7 +735,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -797,7 +806,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -859,7 +869,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -916,7 +927,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -973,7 +985,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1030,7 +1043,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1087,7 +1101,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1144,7 +1159,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1201,7 +1217,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])