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

package/esm/Heatmap/useHeatmapProps.js

@@ -0,0 +1,151 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useId from '@mui/utils/useId';
+import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
+import * as React from 'react';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
+import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';
+import { HEATMAP_PLUGINS } from "./Heatmap.plugins.js";
+import { heatmapSeriesConfig } from "./seriesConfig/index.js";
+const seriesConfig = {
+  heatmap: heatmapSeriesConfig
+};
+
+// The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
+const defaultColorMap = interpolateRgbBasis(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
+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);
+export 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 = useId();
+  const clipPathId = `${id}-clip-path`;
+  const xAxisWithDefault = React.useMemo(() => (xAxis && xAxis.length > 0 ? xAxis : [{
+    id: DEFAULT_X_AXIS_KEY
+  }]).map(axis => _extends({
+    scaleType: 'band',
+    categoryGapRatio: 0
+  }, axis, {
+    data: axis.data ?? getDefaultDataForXAxis(series)
+  })), [series, xAxis]);
+  const yAxisWithDefault = React.useMemo(() => (yAxis && yAxis.length > 0 ? yAxis : [{
+    id: DEFAULT_Y_AXIS_KEY
+  }]).map(axis => _extends({
+    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 => _extends({
+    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_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: _extends({}, slots, {
+      legend: slots?.legend ?? ContinuousColorLegend
+    }),
+    slotProps: {
+      legend: _extends({
+        labelPosition: 'extremes'
+      }, slotProps?.legend)
+    },
+    sx: slotProps?.legend?.direction === 'vertical' ? {
+      height: 150
+    } : {
+      width: '50%'
+    }
+  };
+  return {
+    chartDataProviderProProps,
+    chartsWrapperProps,
+    heatmapPlotProps,
+    clipPathProps,
+    clipPathGroupProps,
+    overlayProps,
+    chartsAxisProps,
+    legendProps,
+    children
+  };
+}

package/esm/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/esm/LineChartPro/LineChartPro.js

@@ -72,11 +72,12 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
     onZoomChange,
     apiRef,
     plugins: LINE_CHART_PRO_PLUGINS
-  }), ref);
+  }));
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      ref: ref,
       children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
@@ -102,6 +103,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       setZoomData: PropTypes.func.isRequired
     })
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: PropTypes.number,
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -181,8 +187,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['line']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['line'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -202,7 +208,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -232,8 +238,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['line']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['line'])
   })),
   /**
    * The list of zoom data related to each axis.
@@ -303,6 +309,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * Callback fired when a mark element is clicked.
    */
   onMarkClick: PropTypes.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.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -343,14 +357,22 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    dataIndex: PropTypes.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['line']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['line'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/esm/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/esm/PieChartPro/PieChartPro.js

@@ -58,7 +58,7 @@ const PieChartPro = /*#__PURE__*/React.forwardRef(function PieChartPro(inProps,
     className,
     skipAnimation,
     plugins: PIE_CHART_PRO_PLUGINS
-  }), ref);
+  }));
   const Tooltip = slots?.tooltip ?? ChartsTooltip;
   const Toolbar = slots?.toolbar ?? ChartsToolbarPro;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
@@ -67,6 +67,7 @@ const PieChartPro = /*#__PURE__*/React.forwardRef(function PieChartPro(inProps,
       legendDirection: slotProps?.legend?.direction ?? 'vertical',
       sx: sx,
       hideLegend: hideLegend ?? false,
+      ref: ref,
       children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
         direction: slotProps?.legend?.direction ?? 'vertical',
         slots: slots,
@@ -138,8 +139,8 @@ process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['pie']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['pie'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -151,7 +152,7 @@ process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -181,8 +182,8 @@ process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['pie']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['pie'])
   })),
   /**
    * If `true`, a loading overlay is displayed.
@@ -260,8 +261,8 @@ process.env.NODE_ENV !== "production" ? PieChartPro.propTypes = {
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['pie']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['pie'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/esm/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/esm/RadarChartPro/RadarChartPro.js

@@ -46,8 +46,8 @@ const RadarChartPro = /*#__PURE__*/React.forwardRef(function RadarChartPro(inPro
   });
   return /*#__PURE__*/_jsx(RadarDataProvider, _extends({}, radarDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      ref: ref,
       children: [props.showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        ref: ref,
         children: [/*#__PURE__*/_jsx(RadarGrid, _extends({}, radarGrid)), /*#__PURE__*/_jsx(RadarMetricLabels, {}), /*#__PURE__*/_jsx(RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/_jsx(RadarAxisHighlight, {}), /*#__PURE__*/_jsx(RadarSeriesMarks, {}), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), children]
       })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
@@ -110,8 +110,8 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
    */
   hiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['radar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['radar'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -128,7 +128,7 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
    */
   highlightedItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
+    seriesId: PropTypes.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -158,8 +158,8 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
    */
   initialHiddenItems: PropTypes.arrayOf(PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.oneOf(['radar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['radar'])
   })),
   /**
    * If `true`, a loading overlay is displayed.
@@ -278,8 +278,8 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.propTypes = {
    */
   tooltipItem: PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['radar']).isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['radar'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/esm/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/esm/SankeyChart/SankeyChart.js

@@ -43,7 +43,7 @@ const SankeyChart = /*#__PURE__*/React.forwardRef(function SankeyChart(props, re
     chartsWrapperProps,
     children
   } = useSankeyChartProps(themedProps);
-  const _useChartContainerPro = useChartContainerProProps(chartContainerProps, ref),
+  const _useChartContainerPro = useChartContainerProProps(chartContainerProps),
     {
       chartDataProviderProProps: {
         series
@@ -56,6 +56,7 @@ const SankeyChart = /*#__PURE__*/React.forwardRef(function SankeyChart(props, re
     series: series
   }, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      ref: ref,
       children: [/*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(SankeyPlot, _extends({}, sankeyPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(FocusedSankeyNode, {}), /*#__PURE__*/_jsx(FocusedSankeyLink, {}), children]
       })), !themedProps.loading && /*#__PURE__*/_jsx(Tooltip, _extends({
@@ -104,7 +105,7 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
    */
   highlightedItem: PropTypes.oneOfType([PropTypes.shape({
     nodeId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     subType: PropTypes.oneOf([
     /**
      * Subtype to differentiate between node and link
@@ -112,7 +113,7 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
     'node']).isRequired,
     type: PropTypes.oneOf(['sankey']).isRequired
   }), PropTypes.shape({
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.string.isRequired,
     sourceId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     subType: PropTypes.oneOf([
     /**
@@ -194,26 +195,11 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
-  tooltipItem: PropTypes.oneOfType([PropTypes.shape({
-    nodeId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    subType: PropTypes.oneOf([
-    /**
-     * Subtype to differentiate between node and link
-     */
-    'node']).isRequired,
-    type: PropTypes.oneOf(['sankey']).isRequired
-  }), PropTypes.shape({
-    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    sourceId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    subType: PropTypes.oneOf([
-    /**
-     * Subtype to differentiate between node and link
-     */
-    'link']).isRequired,
-    targetId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    type: PropTypes.oneOf(['sankey']).isRequired
-  })]),
+  tooltipItem: PropTypes.shape({
+    seriesId: PropTypes.string.isRequired,
+    subType: PropTypes.oneOf(['link', 'node']).isRequired,
+    type: PropTypes.oneOf(['sankey'])
+  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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';

package/esm/SankeyChart/sankeySlots.types.d.ts

@@ -1,15 +1,9 @@
 import { type ChartsOverlaySlotProps, type ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
-import { type ChartsTooltipProps, type ChartsTooltipSlotProps, type ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
+import { type ChartsTooltipSlotProps, type ChartsTooltipSlots } from '@mui/x-charts/ChartsTooltip';
 import { type ChartsSlotProps, type ChartsSlots } from '@mui/x-charts/internals';
 import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from '@mui/x-charts/Toolbar';
-export interface SankeyChartSlots extends ChartsTooltipSlots, ChartsOverlaySlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
-export interface SankeyChartSlotProps extends Omit<ChartsTooltipSlotProps, 'tooltip'>, ChartsOverlaySlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {
-  /**
-   * Slot props for the tooltip component.
-   * @default {}
-   */
-  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
-}
+export interface SankeyChartSlots extends ChartsTooltipSlots<'item' | 'none'>, ChartsOverlaySlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface SankeyChartSlotProps extends ChartsTooltipSlotProps<'item' | 'none'>, ChartsOverlaySlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface SankeyChartSlotExtension {
   /**
    * Overridable component slots.