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

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

package/Heatmap/useHeatmapProps.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHeatmapProps = useHeatmapProps;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var React = _interopRequireWildcard(require("react"));
+var _constants = require("@mui/x-charts/constants");
+var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
+var _Heatmap = require("./Heatmap.plugins");
+var _seriesConfig = require("./seriesConfig");
+const seriesConfig = {
+  heatmap: _seriesConfig.heatmapSeriesConfig
+};
+
+// 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']);
+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);
+function useHeatmapProps(props) {
+  const {
+    apiRef,
+    xAxis,
+    yAxis,
+    zAxis,
+    series,
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    sx,
+    onAxisClick,
+    onItemClick,
+    children,
+    slots,
+    slotProps,
+    loading,
+    highlightedItem,
+    onHighlightChange,
+    enableKeyboardNavigation,
+    borderRadius,
+    hideLegend
+  } = 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 seriesWithDefault = series.map(s => (0, _extends2.default)({
+    type: 'heatmap'
+  }, s));
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend
+  };
+  const chartDataProviderProProps = {
+    apiRef,
+    seriesConfig,
+    series: seriesWithDefault,
+    width,
+    height,
+    margin,
+    xAxis: xAxisWithDefault,
+    yAxis: yAxisWithDefault,
+    zAxis: zAxisWithDefault,
+    colors,
+    dataset,
+    disableAxisListener: true,
+    highlightedItem,
+    onHighlightChange,
+    enableKeyboardNavigation,
+    onAxisClick,
+    onItemClick,
+    plugins: _Heatmap.HEATMAP_PLUGINS
+  };
+  const heatmapPlotProps = {
+    borderRadius,
+    slots,
+    slotProps
+  };
+  const overlayProps = {
+    slots,
+    slotProps,
+    loading
+  };
+  const clipPathGroupProps = {
+    clipPath: `url(#${clipPathId})`
+  };
+  const clipPathProps = {
+    id: clipPathId
+  };
+  const chartsAxisProps = {
+    slots,
+    slotProps
+  };
+  const legendProps = {
+    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%'
+    }
+  };
+  return {
+    chartDataProviderProProps,
+    chartsWrapperProps,
+    heatmapPlotProps,
+    clipPathProps,
+    clipPathGroupProps,
+    overlayProps,
+    chartsAxisProps,
+    legendProps,
+    children
+  };
+}

package/LineChartPro/LineChartPro.d.ts

@@ -28,5 +28,5 @@ export interface LineChartProProps extends Omit<LineChartProps, 'apiRef' | 'slot
  *
  * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
  */
-declare const LineChartPro: React.ForwardRefExoticComponent<LineChartProProps & React.RefAttributes<SVGSVGElement>>;
+declare const LineChartPro: React.ForwardRefExoticComponent<LineChartProProps & React.RefAttributes<HTMLDivElement>>;
 export { LineChartPro };

package/LineChartPro/LineChartPro.js

@@ -79,11 +79,12 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
     onZoomChange,
     apiRef,
     plugins: _LineChartPro2.LINE_CHART_PRO_PLUGINS
-  }), ref);
+  }));
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      ref: ref,
       children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
@@ -109,6 +110,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       setZoomData: _propTypes.default.func.isRequired
     })
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: _propTypes.default.number,
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -188,8 +194,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['line']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -209,7 +215,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.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.
@@ -239,8 +245,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['line']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line'])
   })),
   /**
    * The list of zoom data related to each axis.
@@ -310,6 +316,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * Callback fired when a mark element is clicked.
    */
   onMarkClick: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: _propTypes.default.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -350,14 +364,22 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   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]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['line']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['line'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/PieChartPro/PieChartPro.d.ts

@@ -18,5 +18,5 @@ export interface PieChartProProps extends Omit<PieChartProps, 'apiRef' | 'slots'
    */
   slotProps?: PieChartProSlotProps;
 }
-declare const PieChartPro: React.ForwardRefExoticComponent<PieChartProProps & React.RefAttributes<SVGSVGElement>>;
+declare const PieChartPro: React.ForwardRefExoticComponent<PieChartProProps & React.RefAttributes<HTMLDivElement>>;
 export { PieChartPro };

package/PieChartPro/PieChartPro.js

@@ -66,7 +66,7 @@ const PieChartPro = exports.PieChartPro = /*#__PURE__*/React.forwardRef(function
     className,
     skipAnimation,
     plugins: _PieChartPro2.PIE_CHART_PRO_PLUGINS
-  }), ref);
+  }));
   const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
@@ -75,6 +75,7 @@ const PieChartPro = exports.PieChartPro = /*#__PURE__*/React.forwardRef(function
       legendDirection: slotProps?.legend?.direction ?? 'vertical',
       sx: sx,
       hideLegend: hideLegend ?? false,
+      ref: ref,
       children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
         direction: slotProps?.legend?.direction ?? 'vertical',
         slots: slots,
@@ -146,8 +147,8 @@ process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['pie']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['pie'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -159,7 +160,7 @@ process.env.NODE_ENV !== "production" ? PieChartPro.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.
@@ -189,8 +190,8 @@ process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['pie']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['pie'])
   })),
   /**
    * If `true`, a loading overlay is displayed.
@@ -268,8 +269,8 @@ process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
    */
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['pie']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['pie'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/RadarChartPro/RadarChartPro.d.ts

@@ -26,5 +26,5 @@ export interface RadarChartProProps extends Omit<RadarChartProps, 'apiRef' | 'sl
  *
  * - [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
  */
-declare const RadarChartPro: React.ForwardRefExoticComponent<RadarChartProProps & React.RefAttributes<SVGSVGElement>>;
+declare const RadarChartPro: React.ForwardRefExoticComponent<RadarChartProProps & React.RefAttributes<HTMLDivElement>>;
 export { RadarChartPro };

package/RadarChartPro/RadarChartPro.js

@@ -53,8 +53,8 @@ const RadarChartPro = exports.RadarChartPro = /*#__PURE__*/React.forwardRef(func
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarDataProvider, (0, _extends2.default)({}, radarDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      ref: ref,
       children: [props.showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-        ref: ref,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarGrid, (0, _extends2.default)({}, radarGrid)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarMetricLabels, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarAxisHighlight, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarChart.RadarSeriesMarks, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), children]
       })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
@@ -117,8 +117,8 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['radar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radar'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -135,7 +135,7 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.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.
@@ -165,8 +165,8 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['radar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radar'])
   })),
   /**
    * If `true`, a loading overlay is displayed.
@@ -285,8 +285,8 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
    */
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['radar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radar'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/SankeyChart/SankeyChart.d.ts

@@ -28,5 +28,5 @@ export interface SankeyChartProps extends Omit<ChartContainerProProps<'sankey',
  *
  * - [SankeyChart API](https://mui.com/x/api/charts/sankey-chart/)
  */
-declare const SankeyChart: React.ForwardRefExoticComponent<SankeyChartProps & React.RefAttributes<SVGSVGElement>>;
+declare const SankeyChart: React.ForwardRefExoticComponent<SankeyChartProps & React.RefAttributes<HTMLDivElement>>;
 export { SankeyChart };

package/SankeyChart/SankeyChart.js

@@ -50,7 +50,7 @@ const SankeyChart = exports.SankeyChart = /*#__PURE__*/React.forwardRef(function
     chartsWrapperProps,
     children
   } = (0, _useSankeyChartProps.useSankeyChartProps)(themedProps);
-  const _useChartContainerPro = (0, _useChartContainerProProps.useChartContainerProProps)(chartContainerProps, ref),
+  const _useChartContainerPro = (0, _useChartContainerProProps.useChartContainerProProps)(chartContainerProps),
     {
       chartDataProviderProProps: {
         series
@@ -63,6 +63,7 @@ const SankeyChart = exports.SankeyChart = /*#__PURE__*/React.forwardRef(function
     series: series
   }, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      ref: ref,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SankeyPlot.SankeyPlot, (0, _extends2.default)({}, sankeyPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedSankeyNode.FocusedSankeyNode, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedSankeyLink.FocusedSankeyLink, {}), children]
       })), !themedProps.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
@@ -111,7 +112,7 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
    */
   highlightedItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     nodeId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    seriesId: _propTypes.default.string.isRequired,
     subType: _propTypes.default.oneOf([
     /**
      * Subtype to differentiate between node and link
@@ -119,7 +120,7 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
     'node']).isRequired,
     type: _propTypes.default.oneOf(['sankey']).isRequired
   }), _propTypes.default.shape({
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    seriesId: _propTypes.default.string.isRequired,
     sourceId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     subType: _propTypes.default.oneOf([
     /**
@@ -201,26 +202,11 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
-  tooltipItem: _propTypes.default.oneOfType([_propTypes.default.shape({
-    nodeId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    subType: _propTypes.default.oneOf([
-    /**
-     * Subtype to differentiate between node and link
-     */
-    'node']).isRequired,
-    type: _propTypes.default.oneOf(['sankey']).isRequired
-  }), _propTypes.default.shape({
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    sourceId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    subType: _propTypes.default.oneOf([
-    /**
-     * Subtype to differentiate between node and link
-     */
-    'link']).isRequired,
-    targetId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['sankey']).isRequired
-  })]),
+  tooltipItem: _propTypes.default.shape({
+    seriesId: _propTypes.default.string.isRequired,
+    subType: _propTypes.default.oneOf(['link', 'node']).isRequired,
+    type: _propTypes.default.oneOf(['sankey'])
+  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/SankeyChart/SankeyTooltip/SankeyTooltip.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 SankeyTooltipSlots extends ChartsTooltipSlots {}
+export interface SankeyTooltipSlotProps extends ChartsTooltipSlotProps {}
+export interface SankeyTooltipClasses extends ChartsTooltipClasses {}
+export interface SankeyTooltipContentClasses extends ChartsTooltipClasses {}
 export interface SankeyTooltipProps extends Omit<ChartsTooltipContainerProps, 'trigger' | 'children'> {
   /**
    * Select the kind of tooltip to display

package/SankeyChart/SankeyTooltip/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./SankeyTooltip.js";
 export * from "./SankeyTooltipContent.js";
-export type { SankeyTooltipProps } from "./SankeyTooltip.types.js";
+export type { SankeyTooltipProps, SankeyTooltipClasses, SankeyTooltipContentClasses, SankeyTooltipSlots, SankeyTooltipSlotProps } from "./SankeyTooltip.types.js";

package/SankeyChart/index.d.ts

@@ -14,4 +14,4 @@ export * from "./sankeyHighlightHooks.js";
 export * from "../hooks/useSankeySeries.js";
 export { type SankeyPlotClasses, sankeyPlotClasses } from "./sankeyClasses.js";
 export { SankeyTooltip, SankeyTooltipContent } from "./SankeyTooltip/index.js";
-export type { SankeyTooltipProps } from "./SankeyTooltip/index.js";
+export type { SankeyTooltipProps, SankeyTooltipClasses, SankeyTooltipContentClasses, SankeyTooltipSlots, SankeyTooltipSlotProps } from "./SankeyTooltip/index.js";

package/SankeyChart/plugins/useSankeyHighlight.selectors.d.ts

@@ -4,28 +4,28 @@ import type { SankeyLinkFade, SankeyLinkHighlight, SankeyNodeFade, SankeyNodeHig
  * Get the node highlight configuration from the Sankey series.
  * Defaults to 'nodes' if not specified.
  */
-export declare const selectorNodeHighlightConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorNodeHighlightConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => SankeyNodeHighlight;
 /**
  * Get the node fade configuration from the Sankey series.
  * Defaults to 'none' if not specified.
  */
-export declare const selectorNodeFadeConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorNodeFadeConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => SankeyNodeFade;
 /**
  * Get the link highlight configuration from the Sankey series.
  * Defaults to 'links' if not specified.
  */
-export declare const selectorLinkHighlightConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorLinkHighlightConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => SankeyLinkHighlight;
 /**
  * Get the link fade configuration from the Sankey series.
  * Defaults to 'none' if not specified.
  */
-export declare const selectorLinkFadeConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorLinkFadeConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => SankeyLinkFade;
 /**
@@ -40,7 +40,7 @@ export declare const selectorSankeyHighlightedItem: (args_0: import("./useSankey
  * - It's the highlighted node (unless highlight mode is 'none')
  * - It's connected to a highlighted link (based on linkOptions.highlight)
  */
-export declare const selectorIsNodeHighlighted: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorIsNodeHighlighted: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, nodeId: SankeyNodeId) => boolean;
 /**
@@ -49,7 +49,7 @@ export declare const selectorIsNodeHighlighted: (args_0: import("@mui/x-charts/i
  * - It's the highlighted link (unless highlight mode is 'none')
  * - It's connected to a highlighted node (based on nodeOptions.highlight)
  */
-export declare const selectorIsLinkHighlighted: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorIsLinkHighlighted: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, link: import("../index.js").SankeyLayoutLinkWithPosition) => boolean;
 /**
@@ -59,6 +59,6 @@ export declare const selectorIsLinkHighlighted: (args_0: import("@mui/x-charts/i
  * - This item is not highlighted
  * - The fade mode is 'global' for the highlighted element type
  */
-export declare const selectorIsSankeyItemFaded: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorIsSankeyItemFaded: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, isHighlighted: boolean) => boolean;

package/SankeyChart/sankey.highlight.types.d.ts

@@ -39,4 +39,8 @@ export type SankeyLinkHighlightScope = {
    * @default 'none'
    */
   fade?: SankeyLinkFade;
+};
+export type SankeyHighlightScope = {
+  nodes: SankeyNodeHighlightScope;
+  links: SankeyLinkHighlightScope;
 };

package/SankeyChart/sankey.types.d.ts

@@ -1,7 +1,7 @@
-import type { HighlightScope, SeriesId } from '@mui/x-charts/internals';
+import type { SeriesId } from '@mui/x-charts/internals';
 import type { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
 import type { SankeyLink as D3SankeyLink, SankeyNode as D3SankeyNode } from "./d3Sankey/index.js";
-import type { SankeyLinkHighlightScope, SankeyNodeHighlightScope } from "./sankey.highlight.types.js";
+import type { SankeyHighlightScope, SankeyLinkHighlightScope, SankeyNodeHighlightScope } from "./sankey.highlight.types.js";
 export type SankeyNodeId = string | number;
 export interface SankeyNode {
   /**
@@ -216,7 +216,10 @@ export interface SankeyLayout<WithPosition extends boolean = true> {
 }
 export interface DefaultizedSankeySeriesType extends DefaultizedProps<Omit<SankeySeriesType, 'data'>, 'id' | 'valueFormatter'> {
   data: SankeyLayout<false>;
-  highlightScope?: HighlightScope;
+  /**
+   * Highlight scope for the series derived from nodeOptions and linksOptions
+   */
+  highlightScope: SankeyHighlightScope;
 }
 type SankeyNodeIdentifierBase = {
   type: 'sankey';