@mui/x-charts-pro 9.3.0 → 9.5.0

package/FunnelChart/funnelPlotSlots.types.d.ts

@@ -1,21 +1,22 @@
 import type * as React from 'react';
 import type { FunnelSectionProps } from "./FunnelSection.js";
 import { type FunnelSectionLabelProps } from "./FunnelSectionLabel.js";
+import type { FunnelSectionPropsOverrides, FunnelSectionLabelPropsOverrides } from "../models/chartsSlotsComponentsPropsPro.js";
 export interface FunnelPlotSlots {
   /**
    * Custom component for funnel section.
    * @default FunnelSection
    */
-  funnelSection?: React.ElementType<FunnelSectionProps>;
+  funnelSection?: React.ElementType<FunnelSectionProps & FunnelSectionPropsOverrides>;
   /**
    * Custom component for funnel section label.
    * @default FunnelSectionLabel
    */
-  funnelSectionLabel?: React.ElementType<FunnelSectionLabelProps>;
+  funnelSectionLabel?: React.ElementType<FunnelSectionLabelProps & FunnelSectionLabelPropsOverrides>;
 }
 export interface FunnelPlotSlotProps {
-  funnelSection?: FunnelSectionProps;
-  funnelSectionLabel?: FunnelSectionLabelProps;
+  funnelSection?: Partial<FunnelSectionProps> & FunnelSectionPropsOverrides;
+  funnelSectionLabel?: Partial<FunnelSectionLabelProps> & FunnelSectionLabelPropsOverrides;
 }
 export interface FunnelPlotSlotExtension {
   /**

package/Heatmap/Heatmap.d.mts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
 import { type ChartsAxisSlots, type ChartsAxisSlotProps, type XAxis, type YAxis } from '@mui/x-charts/internals';
+import type { TooltipPropsOverrides } from '@mui/x-charts/models';
 import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
 import { type ChartsSlotPropsPro, type ChartsSlotsPro } from "../internals/material/index.mjs";
@@ -16,7 +17,7 @@ export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, Heatm
    * Custom component for the tooltip.
    * @default ChartsTooltipRoot
    */
-  tooltip?: React.ElementType<HeatmapTooltipProps>;
+  tooltip?: React.ElementType<HeatmapTooltipProps & TooltipPropsOverrides>;
   /**
    * Custom component for the legend.
    * @default ContinuousColorLegendProps
@@ -24,7 +25,7 @@ export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, Heatm
   legend?: ChartsLegendSlots['legend'];
 }
 export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps, ChartsLegendSlotProps, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {
-  tooltip?: Partial<HeatmapTooltipProps>;
+  tooltip?: Partial<HeatmapTooltipProps> & TooltipPropsOverrides;
 }
 export type HeatmapSeries = MakeOptional<HeatmapSeriesType, 'type'>;
 export interface HeatmapProps extends Omit<ChartsContainerProProps<'heatmap', HeatmapPluginSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'axesGap' | 'skipAnimation' | 'slots' | 'slotProps' | 'highlightedAxis' | 'onHighlightedAxisChange' | 'seriesConfig' | 'onAxisClick'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {

package/Heatmap/Heatmap.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
 import { type ChartsAxisSlots, type ChartsAxisSlotProps, type XAxis, type YAxis } from '@mui/x-charts/internals';
+import type { TooltipPropsOverrides } from '@mui/x-charts/models';
 import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from '@mui/x-charts/ChartsOverlay';
 import { type ChartsLegendSlotProps, type ChartsLegendSlots } from '@mui/x-charts/ChartsLegend';
 import { type ChartsSlotPropsPro, type ChartsSlotsPro } from "../internals/material/index.js";
@@ -16,7 +17,7 @@ export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, Heatm
    * Custom component for the tooltip.
    * @default ChartsTooltipRoot
    */
-  tooltip?: React.ElementType<HeatmapTooltipProps>;
+  tooltip?: React.ElementType<HeatmapTooltipProps & TooltipPropsOverrides>;
   /**
    * Custom component for the legend.
    * @default ContinuousColorLegendProps
@@ -24,7 +25,7 @@ export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, Heatm
   legend?: ChartsLegendSlots['legend'];
 }
 export interface HeatmapSlotProps extends ChartsAxisSlotProps, ChartsOverlaySlotProps, HeatmapItemSlotProps, ChartsLegendSlotProps, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {
-  tooltip?: Partial<HeatmapTooltipProps>;
+  tooltip?: Partial<HeatmapTooltipProps> & TooltipPropsOverrides;
 }
 export type HeatmapSeries = MakeOptional<HeatmapSeriesType, 'type'>;
 export interface HeatmapProps extends Omit<ChartsContainerProProps<'heatmap', HeatmapPluginSignatures>, 'series' | 'plugins' | 'xAxis' | 'yAxis' | 'axesGap' | 'skipAnimation' | 'slots' | 'slotProps' | 'highlightedAxis' | 'onHighlightedAxisChange' | 'seriesConfig' | 'onAxisClick'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {

package/Heatmap/Heatmap.js

@@ -151,12 +151,21 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   /**
    * The list of zoom data related to each axis.
    * Used to initialize the zoom in a specific configuration without controlling it.
+   *
+   * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
+   * range value (`{ axisId, value }`) resolved against the axis domain.
    */
-  initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
+  initialZoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     end: _propTypes.default.number.isRequired,
     start: _propTypes.default.number.isRequired
-  })),
+  }), _propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.instanceOf(Date).isRequired), _propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func, _propTypes.default.shape({
+      step: _propTypes.default.number,
+      unit: _propTypes.default.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })]).isRequired),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -305,6 +314,27 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     id: _propTypes.default.string,
     max: _propTypes.default.number,
     min: _propTypes.default.number,
+    sizeMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      interpolator: _propTypes.default.oneOf(['linear', 'log', 'sqrt']),
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.arrayOf(_propTypes.default.number.isRequired).isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.func.isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownSize: _propTypes.default.number,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
     valueGetter: _propTypes.default.func
   })),
   /**

package/Heatmap/Heatmap.mjs

@@ -144,12 +144,21 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   /**
    * The list of zoom data related to each axis.
    * Used to initialize the zoom in a specific configuration without controlling it.
+   *
+   * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
+   * range value (`{ axisId, value }`) resolved against the axis domain.
    */
-  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+  initialZoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     end: PropTypes.number.isRequired,
     start: PropTypes.number.isRequired
-  })),
+  }), PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date).isRequired), PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func, PropTypes.shape({
+      step: PropTypes.number,
+      unit: PropTypes.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })]).isRequired),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -298,6 +307,27 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     id: PropTypes.string,
     max: PropTypes.number,
     min: PropTypes.number,
+    sizeMap: PropTypes.oneOfType([PropTypes.shape({
+      interpolator: PropTypes.oneOf(['linear', 'log', 'sqrt']),
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.func.isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownSize: PropTypes.number,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
     valueGetter: PropTypes.func
   })),
   /**

package/Heatmap/HeatmapItem.d.mts

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
 import { type HeatmapCellProps } from "./HeatmapCell.mjs";
+import type { CellPropsOverrides } from "../models/chartsSlotsComponentsPropsPro.mjs";
 export interface HeatmapItemSlots {
   /**
    * The component that renders the heatmap cell.
    * @default HeatmapCell
    */
-  cell?: React.ElementType;
+  cell?: React.ElementType<HeatmapCellProps & CellPropsOverrides>;
 }
 export interface HeatmapItemSlotProps {
-  cell?: Partial<HeatmapCellProps>;
+  cell?: Partial<HeatmapCellProps> & CellPropsOverrides;
 }
 export interface HeatmapItemProps {
   seriesId: SeriesId;

package/Heatmap/HeatmapItem.d.ts

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
 import { type HeatmapCellProps } from "./HeatmapCell.js";
+import type { CellPropsOverrides } from "../models/chartsSlotsComponentsPropsPro.js";
 export interface HeatmapItemSlots {
   /**
    * The component that renders the heatmap cell.
    * @default HeatmapCell
    */
-  cell?: React.ElementType;
+  cell?: React.ElementType<HeatmapCellProps & CellPropsOverrides>;
 }
 export interface HeatmapItemSlotProps {
-  cell?: Partial<HeatmapCellProps>;
+  cell?: Partial<HeatmapCellProps> & CellPropsOverrides;
 }
 export interface HeatmapItemProps {
   seriesId: SeriesId;

package/Heatmap/HeatmapItem.js

@@ -52,6 +52,8 @@ function HeatmapItem(props) {
     ownerState,
     className: classes.cell
   });
+
+  // `useSlotProps` returns a loosely-typed object; the required `x/y/width/height` flow in via `...other`.
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Cell, (0, _extends2.default)({}, cellProps));
 }
 process.env.NODE_ENV !== "production" ? HeatmapItem.propTypes = {

package/Heatmap/HeatmapItem.mjs

@@ -44,6 +44,8 @@ function HeatmapItem(props) {
     ownerState,
     className: classes.cell
   });
+
+  // `useSlotProps` returns a loosely-typed object; the required `x/y/width/height` flow in via `...other`.
   return /*#__PURE__*/_jsx(Cell, _extends({}, cellProps));
 }
 process.env.NODE_ENV !== "production" ? HeatmapItem.propTypes = {

package/Heatmap/HeatmapTooltip/HeatmapTooltip.types.d.mts

@@ -1,17 +1,18 @@
 import { type ChartsTooltipContainerProps, type ChartsTooltipClasses } from '@mui/x-charts/ChartsTooltip';
+import type { TooltipPropsOverrides } from '@mui/x-charts/models';
 export interface HeatmapTooltipSlots {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: React.ElementType<HeatmapTooltipProps>;
+  tooltip?: React.ElementType<HeatmapTooltipProps & TooltipPropsOverrides>;
 }
 export interface HeatmapTooltipSlotProps {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: Partial<HeatmapTooltipProps>;
+  tooltip?: Partial<HeatmapTooltipProps> & TooltipPropsOverrides;
 }
 export interface HeatmapTooltipClasses extends ChartsTooltipClasses {}
 export interface HeatmapTooltipContentClasses extends ChartsTooltipClasses {}

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

@@ -1,17 +1,18 @@
 import { type ChartsTooltipContainerProps, type ChartsTooltipClasses } from '@mui/x-charts/ChartsTooltip';
+import type { TooltipPropsOverrides } from '@mui/x-charts/models';
 export interface HeatmapTooltipSlots {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: React.ElementType<HeatmapTooltipProps>;
+  tooltip?: React.ElementType<HeatmapTooltipProps & TooltipPropsOverrides>;
 }
 export interface HeatmapTooltipSlotProps {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: Partial<HeatmapTooltipProps>;
+  tooltip?: Partial<HeatmapTooltipProps> & TooltipPropsOverrides;
 }
 export interface HeatmapTooltipClasses extends ChartsTooltipClasses {}
 export interface HeatmapTooltipContentClasses extends ChartsTooltipClasses {}

package/LineChartPro/LineChartPro.js

@@ -88,7 +88,7 @@ const LineChartPro = exports.LineChartPro = /*#__PURE__*/React.forwardRef(functi
       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))]
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsZoomSlider.ChartsZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.FocusedLineMark, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsZoomSlider.ChartsZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.MarkPlot, (0, _extends2.default)({}, markPlotProps))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsBrushOverlay.ChartsBrushOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
@@ -270,12 +270,21 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   /**
    * The list of zoom data related to each axis.
    * Used to initialize the zoom in a specific configuration without controlling it.
+   *
+   * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
+   * range value (`{ axisId, value }`) resolved against the axis domain.
    */
-  initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
+  initialZoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     end: _propTypes.default.number.isRequired,
     start: _propTypes.default.number.isRequired
-  })),
+  }), _propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.instanceOf(Date).isRequired), _propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func, _propTypes.default.shape({
+      step: _propTypes.default.number,
+      unit: _propTypes.default.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })]).isRequired),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -447,6 +456,27 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     id: _propTypes.default.string,
     max: _propTypes.default.number,
     min: _propTypes.default.number,
+    sizeMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      interpolator: _propTypes.default.oneOf(['linear', 'log', 'sqrt']),
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.arrayOf(_propTypes.default.number.isRequired).isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.func.isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownSize: _propTypes.default.number,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
     valueGetter: _propTypes.default.func
   })),
   /**

package/LineChartPro/LineChartPro.mjs

@@ -6,7 +6,7 @@ const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToo
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
-import { AreaPlot, LineHighlightPlot, LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
+import { AreaPlot, LineHighlightPlot, LinePlot, MarkPlot, FocusedLineMark } from '@mui/x-charts/LineChart';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
@@ -81,7 +81,7 @@ const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps
       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))]
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsZoomSlider, {}), /*#__PURE__*/_jsx("g", {
+        })), /*#__PURE__*/_jsx(FocusedLineMark, {}), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsZoomSlider, {}), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
         }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
@@ -263,12 +263,21 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
   /**
    * The list of zoom data related to each axis.
    * Used to initialize the zoom in a specific configuration without controlling it.
+   *
+   * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
+   * range value (`{ axisId, value }`) resolved against the axis domain.
    */
-  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+  initialZoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     end: PropTypes.number.isRequired,
     start: PropTypes.number.isRequired
-  })),
+  }), PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date).isRequired), PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func, PropTypes.shape({
+      step: PropTypes.number,
+      unit: PropTypes.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })]).isRequired),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -440,6 +449,27 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     id: PropTypes.string,
     max: PropTypes.number,
     min: PropTypes.number,
+    sizeMap: PropTypes.oneOfType([PropTypes.shape({
+      interpolator: PropTypes.oneOf(['linear', 'log', 'sqrt']),
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.func.isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownSize: PropTypes.number,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
     valueGetter: PropTypes.func
   })),
   /**

package/PieChartPro/PieChartPro.js

@@ -85,7 +85,7 @@ const PieChartPro = exports.PieChartPro = /*#__PURE__*/React.forwardRef(function
           slots: slots,
           slotProps: slotProps,
           onItemClick: onItemClick
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieChart.FocusedPieArc, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
           loading: loading,
           slots: slots,
           slotProps: slotProps

package/PieChartPro/PieChartPro.mjs

@@ -9,7 +9,7 @@ import * as React from 'react';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
-import { PiePlot } from '@mui/x-charts/PieChart';
+import { FocusedPieArc, PiePlot } from '@mui/x-charts/PieChart';
 import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
 import { useChartsContainerProProps } from "../ChartsContainerPro/useChartsContainerProProps.mjs";
 import { ChartsDataProviderPro } from "../ChartsDataProviderPro/index.mjs";
@@ -77,7 +77,7 @@ const PieChartPro = /*#__PURE__*/React.forwardRef(function PieChartPro(inProps,
           slots: slots,
           slotProps: slotProps,
           onItemClick: onItemClick
-        }), /*#__PURE__*/_jsx(ChartsOverlay, {
+        }), /*#__PURE__*/_jsx(FocusedPieArc, {}), /*#__PURE__*/_jsx(ChartsOverlay, {
           loading: loading,
           slots: slots,
           slotProps: slotProps

package/RadarChartPro/RadarChartPro.js

@@ -55,7 +55,7 @@ const RadarChartPro = exports.RadarChartPro = /*#__PURE__*/React.forwardRef(func
     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, {
-        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]
+        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)(_RadarChart.FocusedRadarMark, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), children]
       })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
   }));

package/RadarChartPro/RadarChartPro.mjs

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { RadarAxisHighlight, RadarDataProvider, RadarGrid, RadarMetricLabels, RadarSeriesArea, RadarSeriesMarks } from '@mui/x-charts/RadarChart';
+import { RadarAxisHighlight, RadarDataProvider, RadarGrid, RadarMetricLabels, RadarSeriesArea, RadarSeriesMarks, FocusedRadarMark } from '@mui/x-charts/RadarChart';
 import { useThemeProps } from '@mui/material/styles';
 import { useRadarChartProps } from '@mui/x-charts/internals';
 import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
@@ -48,7 +48,7 @@ const RadarChartPro = /*#__PURE__*/React.forwardRef(function RadarChartPro(inPro
     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, {
-        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]
+        children: [/*#__PURE__*/_jsx(RadarGrid, _extends({}, radarGrid)), /*#__PURE__*/_jsx(RadarMetricLabels, {}), /*#__PURE__*/_jsx(RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/_jsx(RadarAxisHighlight, {}), /*#__PURE__*/_jsx(RadarSeriesMarks, {}), /*#__PURE__*/_jsx(FocusedRadarMark, {}), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), children]
       })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
   }));

package/ScatterChartPro/ScatterChartPro.d.mts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type ScatterChartProps, type ScatterChartSlotProps, type ScatterChartSlots } from '@mui/x-charts/ScatterChart';
 import { type ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
+import type { TooltipPropsOverrides } from '@mui/x-charts/models';
 import { type ChartsSlotPropsPro, type ChartsSlotsPro } from "../internals/material/index.mjs";
 import { type ChartsContainerProProps } from "../ChartsContainerPro/ChartsContainerPro.mjs";
 import { type ScatterChartProPluginSignatures } from "./ScatterChartPro.plugins.mjs";
@@ -11,7 +12,7 @@ export interface ScatterChartProSlotProps extends Omit<ScatterChartSlotProps, 't
    * Slot props for the tooltip component.
    * @default {}
    */
-  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>> & TooltipPropsOverrides;
 }
 export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps' | 'plugins' | 'seriesConfig'>, Omit<ChartsContainerProProps<'scatter', ScatterChartProPluginSignatures>, 'series' | 'onItemClick' | 'slots' | 'slotProps' | 'highlightedAxis' | 'onHighlightedAxisChange'> {
   /**

package/ScatterChartPro/ScatterChartPro.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type ScatterChartProps, type ScatterChartSlotProps, type ScatterChartSlots } from '@mui/x-charts/ScatterChart';
 import { type ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
+import type { TooltipPropsOverrides } from '@mui/x-charts/models';
 import { type ChartsSlotPropsPro, type ChartsSlotsPro } from "../internals/material/index.js";
 import { type ChartsContainerProProps } from "../ChartsContainerPro/ChartsContainerPro.js";
 import { type ScatterChartProPluginSignatures } from "./ScatterChartPro.plugins.js";
@@ -11,7 +12,7 @@ export interface ScatterChartProSlotProps extends Omit<ScatterChartSlotProps, 't
    * Slot props for the tooltip component.
    * @default {}
    */
-  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
+  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>> & TooltipPropsOverrides;
 }
 export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps' | 'plugins' | 'seriesConfig'>, Omit<ChartsContainerProProps<'scatter', ScatterChartProPluginSignatures>, 'series' | 'onItemClick' | 'slots' | 'slotProps' | 'highlightedAxis' | 'onHighlightedAxisChange'> {
   /**

package/ScatterChartPro/ScatterChartPro.js

@@ -83,7 +83,7 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsZoomSlider.ChartsZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsBrushOverlay.ChartsBrushOverlay, {}), children]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.FocusedScatterMark, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsBrushOverlay.ChartsBrushOverlay, {}), children]
       })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
         trigger: "item"
       }, props.slotProps?.tooltip))]
@@ -172,7 +172,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: _propTypes.default.object,
+  experimentalFeatures: _propTypes.default.shape({
+    progressiveRendering: _propTypes.default.bool
+  }),
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -273,12 +275,21 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   /**
    * The list of zoom data related to each axis.
    * Used to initialize the zoom in a specific configuration without controlling it.
+   *
+   * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
+   * range value (`{ axisId, value }`) resolved against the axis domain.
    */
-  initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
+  initialZoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     end: _propTypes.default.number.isRequired,
     start: _propTypes.default.number.isRequired
-  })),
+  }), _propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.instanceOf(Date).isRequired), _propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func, _propTypes.default.shape({
+      step: _propTypes.default.number,
+      unit: _propTypes.default.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })]).isRequired),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -346,13 +357,15 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   onZoomChange: _propTypes.default.func,
   /**
    * The type of renderer to use for the scatter plot.
-   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element, synchronously.
+   * - `svg-progressive`: Renders every scatter item in a `<circle />` element, in progressive batches that paint over several animation frames to keep the main thread responsive.
    * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
    *                Read more: https://mui.com/x/react-charts/scatter/#performance
    *
+   * When not set, defaults to `svg-single`. Enable the `progressiveRendering` experimental feature to auto-select `svg-progressive` above an internal point-count threshold; this will become the default in the next major version.
    * @default 'svg-single'
    */
-  renderer: _propTypes.default.oneOf(['svg-batch', 'svg-single']),
+  renderer: _propTypes.default.oneOf(['svg-batch', 'svg-progressive', 'svg-single']),
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -445,6 +458,27 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     id: _propTypes.default.string,
     max: _propTypes.default.number,
     min: _propTypes.default.number,
+    sizeMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      interpolator: _propTypes.default.oneOf(['linear', 'log', 'sqrt']),
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.arrayOf(_propTypes.default.number.isRequired).isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      size: _propTypes.default.func.isRequired,
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownSize: _propTypes.default.number,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
     valueGetter: _propTypes.default.func
   })),
   /**