@mui/x-charts-pro 8.0.0-alpha.0 → 8.0.0-alpha.1

package/node/BarChartPro/BarChartPro.js

@@ -106,9 +106,9 @@ const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function
     chartsAxisProps,
     axisHighlightProps,
     legendProps,
-    tooltipProps,
     children
   } = (0, _internals.useBarChartProps)(other);
+  const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainerPro.ChartContainerPro, (0, _extends2.default)({
     ref: ref
   }, chartContainerProps, {
@@ -116,7 +116,7 @@ const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function
     onZoomChange: onZoomChange,
     children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BarChartPlotZoom, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomSetup.ZoomSetup, {}), children]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomSetup.ZoomSetup, {}), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
@@ -128,7 +128,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
    * Depends on `layout` prop.
-   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
    */
   axisHighlight: _propTypes.default.shape({
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
@@ -245,16 +245,6 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * @param {ZoomData[]} zoomData Updated zoom data.
    */
   onZoomChange: _propTypes.default.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: _propTypes.default.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -283,30 +273,12 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   title: _propTypes.default.string,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   */
-  tooltip: _propTypes.default.shape({
-    axisContent: _propTypes.default.elementType,
-    classes: _propTypes.default.object,
-    itemContent: _propTypes.default.elementType,
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
-  }),
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
-  viewBox: _propTypes.default.shape({
-    height: _propTypes.default.number,
-    width: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/node/ChartContainerPro/ChartContainerPro.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Watermark = require("@mui/x-license/Watermark");
 var _internals = require("@mui/x-charts/internals");
+var _xCharts = require("@mui/x-charts");
 var _releaseInfo = require("../internals/utils/releaseInfo");
 var _ChartDataProviderPro = require("../context/ChartDataProviderPro");
 var _useChartContainerProProps = require("./useChartContainerProProps");
@@ -20,14 +21,19 @@ const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
 const ChartContainerPro = exports.ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainerPro(props, ref) {
   const {
     chartDataProviderProProps,
-    resizableChartContainerProps,
-    hasIntrinsicSize
+    children,
+    resizableContainerProps,
+    chartsSurfaceProps
   } = (0, _useChartContainerProProps.useChartContainerProProps)(props, ref);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ResizableContainer, (0, _extends2.default)({}, resizableChartContainerProps, {
-    children: [hasIntrinsicSize ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps)) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Watermark.Watermark, {
-      packageName: "x-charts-pro",
-      releaseInfo: releaseInfo
-    })]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ResizableContainer, (0, _extends2.default)({}, resizableContainerProps, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xCharts.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+        children: children
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Watermark.Watermark, {
+        packageName: "x-charts-pro",
+        releaseInfo: releaseInfo
+      })]
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
@@ -93,16 +99,6 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
    * If not provided, the container supports line, bar, scatter and pie charts.
    */
   plugins: _propTypes.default.arrayOf(_propTypes.default.object),
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: _propTypes.default.bool,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
@@ -116,12 +112,6 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
   skipAnimation: _propTypes.default.bool,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   title: _propTypes.default.string,
-  viewBox: _propTypes.default.shape({
-    height: _propTypes.default.number,
-    width: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/node/ChartContainerPro/useChartContainerProProps.js

@@ -22,13 +22,15 @@ const useChartContainerProProps = (props, ref) => {
   };
   const {
     chartDataProviderProps,
-    resizableChartContainerProps,
-    hasIntrinsicSize
+    chartsSurfaceProps,
+    resizableContainerProps,
+    children
   } = (0, _internals.useChartContainerProps)(baseProps, ref);
   return {
     chartDataProviderProProps: (0, _extends2.default)({}, chartDataProviderProps, chartDataProviderProProps),
-    resizableChartContainerProps,
-    hasIntrinsicSize
+    resizableContainerProps,
+    chartsSurfaceProps,
+    children
   };
 };
 exports.useChartContainerProProps = useChartContainerProProps;

package/node/Heatmap/Heatmap.js

@@ -14,14 +14,13 @@ 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 _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
 var _ChartsOnAxisClickHandler = require("@mui/x-charts/ChartsOnAxisClickHandler");
 var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
 var _ChartContainerPro = require("../ChartContainerPro");
 var _HeatmapPlot = require("./HeatmapPlot");
 var _plugin = require("./plugin");
-var _DefaultHeatmapTooltip = require("./DefaultHeatmapTooltip");
+var _HeatmapTooltip = require("./HeatmapTooltip");
 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']);
@@ -41,7 +40,6 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
     colors,
     dataset,
     sx,
-    tooltip,
     topAxis,
     leftAxis,
     rightAxis,
@@ -72,6 +70,7 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
       color: defaultColorMap
     }
   }], [zAxis]);
+  const Tooltip = props.slots?.tooltip ?? _HeatmapTooltip.HeatmapTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainerPro.ChartContainerPro, {
     ref: ref,
     plugins: [_plugin.plugin],
@@ -109,14 +108,7 @@ const Heatmap = exports.Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap
       bottomAxis: bottomAxis,
       slots: slots,
       slotProps: slotProps
-    }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({
-      trigger: "item"
-    }, tooltip, {
-      slots: (0, _extends2.default)({
-        itemContent: _DefaultHeatmapTooltip.DefaultHeatmapTooltip
-      }, slots),
-      slotProps: slotProps
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
+    }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -197,16 +189,6 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: _propTypes.default.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -234,26 +216,13 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * The configuration of the tooltip.
    * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
    */
-  tooltip: _propTypes.default.shape({
-    axisContent: _propTypes.default.elementType,
-    classes: _propTypes.default.object,
-    itemContent: _propTypes.default.elementType,
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
-  }),
+  tooltip: _propTypes.default.object,
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
-  viewBox: _propTypes.default.shape({
-    height: _propTypes.default.number,
-    width: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/node/Heatmap/HeatmapTooltip.js

@@ -0,0 +1,300 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _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 _useSeries = require("../hooks/useSeries");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    paper: ['paper'],
+    table: ['table'],
+    row: ['row'],
+    cell: ['cell'],
+    mark: ['mark'],
+    markCell: ['markCell'],
+    labelCell: ['labelCell'],
+    valueCell: ['valueCell']
+  };
+  return (0, _composeClasses.default)(slots, _ChartsTooltip.getChartsTooltipUtilityClass, classes);
+};
+
+/**
+ * @ignore - internal component.
+ */
+function DefaultHeatmapTooltipContent(props) {
+  const {
+    classes
+  } = props;
+  const xAxis = (0, _hooks.useXAxis)();
+  const yAxis = (0, _hooks.useYAxis)();
+  const heatmapSeries = (0, _useSeries.useHeatmapSeries)();
+  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
+  } = tooltipData;
+  const [xIndex, yIndex] = value;
+  const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
+    location: 'tooltip'
+  }) ?? xAxis.data[xIndex].toLocaleString();
+  const formattedY = yAxis.valueFormatter?.(yAxis.data[yIndex], {
+    location: 'tooltip'
+  }) ?? 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.jsx)("thead", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
+          className: classes?.row,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
+            className: classes?.cell,
+            children: formattedX
+          }), formattedX && formattedY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
+            className: classes?.cell,
+            children: formattedY
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
+          className: classes?.row,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
+            className: (0, _clsx.default)(classes?.markCell, classes?.cell),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipMark, {
+              color: color,
+              className: classes?.mark
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
+            className: (0, _clsx.default)(classes?.labelCell, classes?.cell),
+            children: seriesLabel
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
+            className: (0, _clsx.default)(classes?.valueCell, classes?.cell),
+            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({
+    classes: props.classes
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipContainer, (0, _extends2.default)({}, props, {
+    classes: classes,
+    trigger: "item",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultHeatmapTooltipContent, {
+      classes: classes
+    })
+  }));
+}
+process.env.NODE_ENV !== "production" ? HeatmapTooltip.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
+   * or a function that returns either.
+   * It's used to set the position of the popper.
+   * The return value will passed as the reference object of the Popper instance.
+   */
+  anchorEl: _propTypes.default.oneOfType([(props, propName) => {
+    if (props[propName] == null) {
+      return new Error(`Prop '${propName}' is required but wasn't specified`);
+    }
+    if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+      return new Error(`Expected prop '${propName}' to be of type Element`);
+    }
+    return null;
+  }, _propTypes.default.func, _propTypes.default.shape({
+    contextElement: (props, propName) => {
+      if (props[propName] == null) {
+        return null;
+      }
+      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error(`Expected prop '${propName}' to be of type Element`);
+      }
+      return null;
+    },
+    getBoundingClientRect: _propTypes.default.func.isRequired
+  })]),
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
+  /**
+   * The components used for each slot inside the Popper.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: _propTypes.default.shape({
+    Root: _propTypes.default.elementType
+  }),
+  /**
+   * The props used for each slot inside the Popper.
+   * @default {}
+   */
+  componentsProps: _propTypes.default.shape({
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * An HTML element or function that returns one.
+   * The `container` will have the portal children appended to it.
+   *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
+   * By default, it uses the body of the top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container: _propTypes.default.oneOfType([(props, propName) => {
+    if (props[propName] == null) {
+      return new Error(`Prop '${propName}' is required but wasn't specified`);
+    }
+    if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+      return new Error(`Expected prop '${propName}' to be of type Element`);
+    }
+    return null;
+  }, _propTypes.default.func]),
+  /**
+   * The `children` will be under the DOM hierarchy of the parent component.
+   * @default false
+   */
+  disablePortal: _propTypes.default.bool,
+  /**
+   * Always keep the children in the DOM.
+   * This prop can be useful in SEO situation or
+   * when you want to maximize the responsiveness of the Popper.
+   * @default false
+   */
+  keepMounted: _propTypes.default.bool,
+  /**
+   * Popper.js is based on a "plugin-like" architecture,
+   * most of its features are fully encapsulated "modifiers".
+   *
+   * A modifier is a function that is called each time Popper.js needs to
+   * compute the position of the popper.
+   * For this reason, modifiers should be very performant to avoid bottlenecks.
+   * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
+   */
+  modifiers: _propTypes.default.arrayOf(_propTypes.default.shape({
+    data: _propTypes.default.object,
+    effect: _propTypes.default.func,
+    enabled: _propTypes.default.bool,
+    fn: _propTypes.default.func,
+    name: _propTypes.default.any,
+    options: _propTypes.default.object,
+    phase: _propTypes.default.oneOf(['afterMain', 'afterRead', 'afterWrite', 'beforeMain', 'beforeRead', 'beforeWrite', 'main', 'read', 'write']),
+    requires: _propTypes.default.arrayOf(_propTypes.default.string),
+    requiresIfExists: _propTypes.default.arrayOf(_propTypes.default.string)
+  })),
+  /**
+   * If `true`, the component is shown.
+   */
+  open: _propTypes.default.bool,
+  /**
+   * Popper placement.
+   * @default 'bottom'
+   */
+  placement: _propTypes.default.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+  /**
+   * Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
+   * @default {}
+   */
+  popperOptions: _propTypes.default.shape({
+    modifiers: _propTypes.default.array,
+    onFirstUpdate: _propTypes.default.func,
+    placement: _propTypes.default.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+    strategy: _propTypes.default.oneOf(['absolute', 'fixed'])
+  }),
+  /**
+   * A ref that points to the used popper instance.
+   */
+  popperRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      destroy: _propTypes.default.func.isRequired,
+      forceUpdate: _propTypes.default.func.isRequired,
+      setOptions: _propTypes.default.func.isRequired,
+      state: _propTypes.default.shape({
+        attributes: _propTypes.default.object.isRequired,
+        elements: _propTypes.default.object.isRequired,
+        modifiersData: _propTypes.default.object.isRequired,
+        options: _propTypes.default.object.isRequired,
+        orderedModifiers: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+        placement: _propTypes.default.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']).isRequired,
+        rects: _propTypes.default.object.isRequired,
+        reset: _propTypes.default.bool.isRequired,
+        scrollParents: _propTypes.default.object.isRequired,
+        strategy: _propTypes.default.oneOf(['absolute', 'fixed']).isRequired,
+        styles: _propTypes.default.object.isRequired
+      }).isRequired,
+      update: _propTypes.default.func.isRequired
+    })
+  })]),
+  /**
+   * The props used for each slot inside the Popper.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * The components used for each slot inside the Popper.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Help supporting a react-transition-group/Transition component.
+   * @default false
+   */
+  transition: _propTypes.default.bool
+} : void 0;

package/node/Heatmap/index.js

@@ -21,15 +21,15 @@ Object.defineProperty(exports, "HeatmapPlot", {
 });
 var _Heatmap = require("./Heatmap");
 var _HeatmapPlot = require("./HeatmapPlot");
-var _DefaultHeatmapTooltip = require("./DefaultHeatmapTooltip");
-Object.keys(_DefaultHeatmapTooltip).forEach(function (key) {
+var _HeatmapTooltip = require("./HeatmapTooltip");
+Object.keys(_HeatmapTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _DefaultHeatmapTooltip[key]) return;
+  if (key in exports && exports[key] === _HeatmapTooltip[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _DefaultHeatmapTooltip[key];
+      return _HeatmapTooltip[key];
     }
   });
 });

package/node/LineChartPro/LineChartPro.js

@@ -172,9 +172,9 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
     axisHighlightProps,
     lineHighlightPlotProps,
     legendProps,
-    tooltipProps,
     children
   } = (0, _internals.useLineChartProps)(other);
+  const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainerPro.ChartContainerPro, (0, _extends2.default)({
     ref: ref
   }, chartContainerProps, {
@@ -185,7 +185,7 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       "data-drawing-container": true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkPlotZoom, (0, _extends2.default)({}, markPlotProps))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomSetup.ZoomSetup, {}), children]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomSetup.ZoomSetup, {}), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
@@ -195,7 +195,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
    * @default { x: 'line' }
    */
   axisHighlight: _propTypes.default.shape({
@@ -310,16 +310,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * @param {ZoomData[]} zoomData Updated zoom data.
    */
   onZoomChange: _propTypes.default.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: _propTypes.default.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -348,31 +338,12 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   title: _propTypes.default.string,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   * @default { trigger: 'item' }
-   */
-  tooltip: _propTypes.default.shape({
-    axisContent: _propTypes.default.elementType,
-    classes: _propTypes.default.object,
-    itemContent: _propTypes.default.elementType,
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
-  }),
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
-  viewBox: _propTypes.default.shape({
-    height: _propTypes.default.number,
-    width: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */