@mui/x-charts-pro 9.3.0 → 9.4.0

package/ChartsToolbarPro/Toolbar.types.d.ts

@@ -1,15 +1,16 @@
 import type * as React from 'react';
+import type { ToolbarPropsOverrides } from '@mui/x-charts/models';
 import { type ChartsToolbarProProps } from "./ChartsToolbarPro.js";
 export interface ChartsToolbarProSlots {
   /**
    * Custom component for the toolbar.
    * @default ChartsToolbar
    */
-  toolbar?: React.ElementType<ChartsToolbarProProps>;
+  toolbar?: React.ElementType<ChartsToolbarProProps & ToolbarPropsOverrides>;
 }
 export interface ChartsToolbarProSlotProps {
   /**
    * Props for the toolbar component.
    */
-  toolbar?: Partial<ChartsToolbarProProps>;
+  toolbar?: Partial<ChartsToolbarProProps> & ToolbarPropsOverrides;
 }

package/ChartsToolbarPro/rangeButtonValueToZoom.d.mts

@@ -31,6 +31,8 @@ export interface RangeButtonFunctionParams {
  *   @example { unit: 'year' } // Last year (step defaults to 1)
  * - `[start, end]` — An absolute date range.
  *   @example [new Date(2024, 0, 1), new Date(2024, 6, 1)] // Jan–Jul 2024
+ * - `[start, end]` of strings — A range between two axis values, for ordinal (band/point) axes.
+ *   @example ['Feb', 'May'] // From the 'Feb' category to the 'May' category
  * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
  *   @example ({ domain }) => ({ start: 0, end: 50 }) // First half of data
  *   @example ({ data }) => {
@@ -43,7 +45,7 @@ export interface RangeButtonFunctionParams {
 export type RangeButtonValue = {
   unit: RangeButtonIntervalUnit;
   step?: number;
-} | [Date, Date] | ((params: RangeButtonFunctionParams) => {
+} | [Date, Date] | [string, string] | ((params: RangeButtonFunctionParams) => {
   start: number;
   end: number;
 }) | null;
@@ -63,4 +65,18 @@ export type RangeButtonValue = {
 export declare function rangeButtonValueToZoom(value: RangeButtonValue, params: RangeButtonFunctionParams): {
   start: number;
   end: number;
-};
+};
+/**
+ * Builds the {@link RangeButtonFunctionParams} for an axis from its computed domain.
+ *
+ * For ordinal (band/point) axes the domain is index-based; for continuous axes it
+ * uses the first and last domain values.
+ *
+ * @param axis The axis scale type and data.
+ * @param domain The computed domain values of the axis.
+ * @returns The params to pass to {@link rangeButtonValueToZoom}, or `undefined` if the domain is too small to zoom.
+ */
+export declare function getRangeButtonDomainParams(axis: {
+  scaleType?: string;
+  data?: readonly unknown[];
+}, domain: readonly unknown[] | undefined): RangeButtonFunctionParams | undefined;

package/ChartsToolbarPro/rangeButtonValueToZoom.d.ts

@@ -31,6 +31,8 @@ export interface RangeButtonFunctionParams {
  *   @example { unit: 'year' } // Last year (step defaults to 1)
  * - `[start, end]` — An absolute date range.
  *   @example [new Date(2024, 0, 1), new Date(2024, 6, 1)] // Jan–Jul 2024
+ * - `[start, end]` of strings — A range between two axis values, for ordinal (band/point) axes.
+ *   @example ['Feb', 'May'] // From the 'Feb' category to the 'May' category
  * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
  *   @example ({ domain }) => ({ start: 0, end: 50 }) // First half of data
  *   @example ({ data }) => {
@@ -43,7 +45,7 @@ export interface RangeButtonFunctionParams {
 export type RangeButtonValue = {
   unit: RangeButtonIntervalUnit;
   step?: number;
-} | [Date, Date] | ((params: RangeButtonFunctionParams) => {
+} | [Date, Date] | [string, string] | ((params: RangeButtonFunctionParams) => {
   start: number;
   end: number;
 }) | null;
@@ -63,4 +65,18 @@ export type RangeButtonValue = {
 export declare function rangeButtonValueToZoom(value: RangeButtonValue, params: RangeButtonFunctionParams): {
   start: number;
   end: number;
-};
+};
+/**
+ * Builds the {@link RangeButtonFunctionParams} for an axis from its computed domain.
+ *
+ * For ordinal (band/point) axes the domain is index-based; for continuous axes it
+ * uses the first and last domain values.
+ *
+ * @param axis The axis scale type and data.
+ * @param domain The computed domain values of the axis.
+ * @returns The params to pass to {@link rangeButtonValueToZoom}, or `undefined` if the domain is too small to zoom.
+ */
+export declare function getRangeButtonDomainParams(axis: {
+  scaleType?: string;
+  data?: readonly unknown[];
+}, domain: readonly unknown[] | undefined): RangeButtonFunctionParams | undefined;

package/ChartsToolbarPro/rangeButtonValueToZoom.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getRangeButtonDomainParams = getRangeButtonDomainParams;
 exports.rangeButtonValueToZoom = rangeButtonValueToZoom;
 var _warning = require("@mui/x-internals/warning");
 /**
@@ -21,6 +22,8 @@ var _warning = require("@mui/x-internals/warning");
  *   @example { unit: 'year' } // Last year (step defaults to 1)
  * - `[start, end]` — An absolute date range.
  *   @example [new Date(2024, 0, 1), new Date(2024, 6, 1)] // Jan–Jul 2024
+ * - `[start, end]` of strings — A range between two axis values, for ordinal (band/point) axes.
+ *   @example ['Feb', 'May'] // From the 'Feb' category to the 'May' category
  * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
  *   @example ({ domain }) => ({ start: 0, end: 50 }) // First half of data
  *   @example ({ data }) => {
@@ -104,6 +107,7 @@ function rangeButtonValueToZoom(value, params) {
     };
   }
   const {
+    scaleType,
     domain: {
       min: domainMin,
       max: domainMax
@@ -111,13 +115,42 @@ function rangeButtonValueToZoom(value, params) {
     data: ordinalData
   } = params;
 
+  // Ordinal axis range — resolve each endpoint to its matching value on the axis.
+  // Band/point axes can carry strings, numbers, or dates, so the match is by strict equality.
+  if (Array.isArray(value) && ordinalData) {
+    const startIndex = ordinalData.findIndex(item => item === value[0]);
+    const endIndex = ordinalData.findIndex(item => item === value[1]);
+    if (startIndex !== -1 && endIndex !== -1) {
+      if (process.env.NODE_ENV !== 'production' && endIndex < startIndex) {
+        (0, _warning.warnOnce)(['MUI X Charts: Range button received a range whose end value comes before its start value.', 'This produces an empty zoom range.']);
+      }
+      // Band items span [i/L, (i+1)/L] along the axis; point items sit at i/(L-1).
+      // For band, the end index is inclusive, so the right edge of the band is `(endIndex + 1) / L`.
+      if (scaleType === 'band') {
+        return {
+          start: startIndex / ordinalData.length * 100,
+          end: (endIndex + 1) / ordinalData.length * 100
+        };
+      }
+      const maxIndex = ordinalData.length - 1;
+      return {
+        start: maxIndex === 0 ? 0 : startIndex / maxIndex * 100,
+        end: maxIndex === 0 ? 100 : endIndex / maxIndex * 100
+      };
+    }
+    // No match on the axis values — fall through in case they are date-like.
+  }
+
   // For ordinal axes with date-like data, resolve date ranges and intervals to matching indices.
   const timestamps = ordinalData ? toTimestampArray(ordinalData) : undefined;
   if (timestamps) {
+    const isBand = scaleType === 'band';
+    const denominator = isBand ? timestamps.length : timestamps.length - 1;
     const maxIndex = timestamps.length - 1;
+    const toPercent = (i, defaultPercent) => denominator === 0 ? defaultPercent : i / denominator * 100;
     if (Array.isArray(value)) {
-      const startTarget = value[0].getTime();
-      const endTarget = value[1].getTime();
+      const startTarget = toTimestamp(value[0]) ?? Number.NaN;
+      const endTarget = toTimestamp(value[1]) ?? Number.NaN;
       if (process.env.NODE_ENV !== 'production' && endTarget < startTarget) {
         (0, _warning.warnOnce)(['MUI X Charts: Range button received a date range whose end is before its start.', 'This produces an empty zoom range.']);
       }
@@ -126,8 +159,8 @@ function rangeButtonValueToZoom(value, params) {
       const startIndex = firstGte === -1 ? maxIndex : firstGte;
       const endIndex = lastLte === -1 ? 0 : lastLte;
       return {
-        start: startIndex / maxIndex * 100,
-        end: endIndex / maxIndex * 100
+        start: toPercent(startIndex, 0),
+        end: toPercent(endIndex + (isBand ? 1 : 0), 100)
       };
     }
 
@@ -138,12 +171,12 @@ function rangeButtonValueToZoom(value, params) {
     const firstGte = timestamps.findIndex(ts => !Number.isNaN(ts) && ts >= targetStartMs);
     const startIndex = firstGte === -1 ? maxIndex : firstGte;
     return {
-      start: startIndex / maxIndex * 100,
+      start: toPercent(startIndex, 0),
       end: 100
     };
   }
   if (process.env.NODE_ENV !== 'production' && ordinalData !== undefined) {
-    (0, _warning.warnOnce)(['MUI X Charts: Range button received a date value for an ordinal axis whose data could not be parsed as dates.', 'The zoom range may not match the intended selection. Provide date-like axis data or use a function value.']);
+    (0, _warning.warnOnce)(['MUI X Charts: Range button received a value for an ordinal axis whose data could not be matched.', 'The zoom range may not match the intended selection. Provide axis values that exist on the axis, date-like axis data, or use a function value.']);
   }
   const domainRange = domainMax - domainMin;
   if (domainRange <= 0) {
@@ -155,12 +188,13 @@ function rangeButtonValueToZoom(value, params) {
 
   // Absolute date range
   if (Array.isArray(value)) {
-    const [rangeStart, rangeEnd] = value;
-    if (process.env.NODE_ENV !== 'production' && rangeEnd.getTime() < rangeStart.getTime()) {
+    const rangeStart = toTimestamp(value[0]) ?? domainMin;
+    const rangeEnd = toTimestamp(value[1]) ?? domainMax;
+    if (process.env.NODE_ENV !== 'production' && rangeEnd < rangeStart) {
       (0, _warning.warnOnce)(['MUI X Charts: Range button received a date range whose end is before its start.', 'This produces an empty zoom range.']);
     }
-    const startPercent = (rangeStart.getTime() - domainMin) / domainRange * 100;
-    const endPercent = (rangeEnd.getTime() - domainMin) / domainRange * 100;
+    const startPercent = (rangeStart - domainMin) / domainRange * 100;
+    const endPercent = (rangeEnd - domainMin) / domainRange * 100;
     return {
       start: startPercent,
       end: endPercent
@@ -176,6 +210,35 @@ function rangeButtonValueToZoom(value, params) {
   };
 }
 
+/**
+ * Builds the {@link RangeButtonFunctionParams} for an axis from its computed domain.
+ *
+ * For ordinal (band/point) axes the domain is index-based; for continuous axes it
+ * uses the first and last domain values.
+ *
+ * @param axis The axis scale type and data.
+ * @param domain The computed domain values of the axis.
+ * @returns The params to pass to {@link rangeButtonValueToZoom}, or `undefined` if the domain is too small to zoom.
+ */
+function getRangeButtonDomainParams(axis, domain) {
+  if (!domain || domain.length < 2) {
+    return undefined;
+  }
+  const scaleType = axis.scaleType ?? 'linear';
+  const isOrdinal = scaleType === 'band' || scaleType === 'point';
+  return {
+    scaleType,
+    data: axis.data,
+    domain: isOrdinal ? {
+      min: 0,
+      max: domain.length - 1
+    } : {
+      min: Number(domain[0]),
+      max: Number(domain[domain.length - 1])
+    }
+  };
+}
+
 /**
  * Computes the start timestamp for a calendar interval subtracted from a reference point.
  */

package/ChartsToolbarPro/rangeButtonValueToZoom.mjs

@@ -16,6 +16,8 @@ import { warnOnce } from '@mui/x-internals/warning';
  *   @example { unit: 'year' } // Last year (step defaults to 1)
  * - `[start, end]` — An absolute date range.
  *   @example [new Date(2024, 0, 1), new Date(2024, 6, 1)] // Jan–Jul 2024
+ * - `[start, end]` of strings — A range between two axis values, for ordinal (band/point) axes.
+ *   @example ['Feb', 'May'] // From the 'Feb' category to the 'May' category
  * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
  *   @example ({ domain }) => ({ start: 0, end: 50 }) // First half of data
  *   @example ({ data }) => {
@@ -99,6 +101,7 @@ export function rangeButtonValueToZoom(value, params) {
     };
   }
   const {
+    scaleType,
     domain: {
       min: domainMin,
       max: domainMax
@@ -106,13 +109,42 @@ export function rangeButtonValueToZoom(value, params) {
     data: ordinalData
   } = params;
 
+  // Ordinal axis range — resolve each endpoint to its matching value on the axis.
+  // Band/point axes can carry strings, numbers, or dates, so the match is by strict equality.
+  if (Array.isArray(value) && ordinalData) {
+    const startIndex = ordinalData.findIndex(item => item === value[0]);
+    const endIndex = ordinalData.findIndex(item => item === value[1]);
+    if (startIndex !== -1 && endIndex !== -1) {
+      if (process.env.NODE_ENV !== 'production' && endIndex < startIndex) {
+        warnOnce(['MUI X Charts: Range button received a range whose end value comes before its start value.', 'This produces an empty zoom range.']);
+      }
+      // Band items span [i/L, (i+1)/L] along the axis; point items sit at i/(L-1).
+      // For band, the end index is inclusive, so the right edge of the band is `(endIndex + 1) / L`.
+      if (scaleType === 'band') {
+        return {
+          start: startIndex / ordinalData.length * 100,
+          end: (endIndex + 1) / ordinalData.length * 100
+        };
+      }
+      const maxIndex = ordinalData.length - 1;
+      return {
+        start: maxIndex === 0 ? 0 : startIndex / maxIndex * 100,
+        end: maxIndex === 0 ? 100 : endIndex / maxIndex * 100
+      };
+    }
+    // No match on the axis values — fall through in case they are date-like.
+  }
+
   // For ordinal axes with date-like data, resolve date ranges and intervals to matching indices.
   const timestamps = ordinalData ? toTimestampArray(ordinalData) : undefined;
   if (timestamps) {
+    const isBand = scaleType === 'band';
+    const denominator = isBand ? timestamps.length : timestamps.length - 1;
     const maxIndex = timestamps.length - 1;
+    const toPercent = (i, defaultPercent) => denominator === 0 ? defaultPercent : i / denominator * 100;
     if (Array.isArray(value)) {
-      const startTarget = value[0].getTime();
-      const endTarget = value[1].getTime();
+      const startTarget = toTimestamp(value[0]) ?? Number.NaN;
+      const endTarget = toTimestamp(value[1]) ?? Number.NaN;
       if (process.env.NODE_ENV !== 'production' && endTarget < startTarget) {
         warnOnce(['MUI X Charts: Range button received a date range whose end is before its start.', 'This produces an empty zoom range.']);
       }
@@ -121,8 +153,8 @@ export function rangeButtonValueToZoom(value, params) {
       const startIndex = firstGte === -1 ? maxIndex : firstGte;
       const endIndex = lastLte === -1 ? 0 : lastLte;
       return {
-        start: startIndex / maxIndex * 100,
-        end: endIndex / maxIndex * 100
+        start: toPercent(startIndex, 0),
+        end: toPercent(endIndex + (isBand ? 1 : 0), 100)
       };
     }
 
@@ -133,12 +165,12 @@ export function rangeButtonValueToZoom(value, params) {
     const firstGte = timestamps.findIndex(ts => !Number.isNaN(ts) && ts >= targetStartMs);
     const startIndex = firstGte === -1 ? maxIndex : firstGte;
     return {
-      start: startIndex / maxIndex * 100,
+      start: toPercent(startIndex, 0),
       end: 100
     };
   }
   if (process.env.NODE_ENV !== 'production' && ordinalData !== undefined) {
-    warnOnce(['MUI X Charts: Range button received a date value for an ordinal axis whose data could not be parsed as dates.', 'The zoom range may not match the intended selection. Provide date-like axis data or use a function value.']);
+    warnOnce(['MUI X Charts: Range button received a value for an ordinal axis whose data could not be matched.', 'The zoom range may not match the intended selection. Provide axis values that exist on the axis, date-like axis data, or use a function value.']);
   }
   const domainRange = domainMax - domainMin;
   if (domainRange <= 0) {
@@ -150,12 +182,13 @@ export function rangeButtonValueToZoom(value, params) {
 
   // Absolute date range
   if (Array.isArray(value)) {
-    const [rangeStart, rangeEnd] = value;
-    if (process.env.NODE_ENV !== 'production' && rangeEnd.getTime() < rangeStart.getTime()) {
+    const rangeStart = toTimestamp(value[0]) ?? domainMin;
+    const rangeEnd = toTimestamp(value[1]) ?? domainMax;
+    if (process.env.NODE_ENV !== 'production' && rangeEnd < rangeStart) {
       warnOnce(['MUI X Charts: Range button received a date range whose end is before its start.', 'This produces an empty zoom range.']);
     }
-    const startPercent = (rangeStart.getTime() - domainMin) / domainRange * 100;
-    const endPercent = (rangeEnd.getTime() - domainMin) / domainRange * 100;
+    const startPercent = (rangeStart - domainMin) / domainRange * 100;
+    const endPercent = (rangeEnd - domainMin) / domainRange * 100;
     return {
       start: startPercent,
       end: endPercent
@@ -171,6 +204,35 @@ export function rangeButtonValueToZoom(value, params) {
   };
 }
 
+/**
+ * Builds the {@link RangeButtonFunctionParams} for an axis from its computed domain.
+ *
+ * For ordinal (band/point) axes the domain is index-based; for continuous axes it
+ * uses the first and last domain values.
+ *
+ * @param axis The axis scale type and data.
+ * @param domain The computed domain values of the axis.
+ * @returns The params to pass to {@link rangeButtonValueToZoom}, or `undefined` if the domain is too small to zoom.
+ */
+export function getRangeButtonDomainParams(axis, domain) {
+  if (!domain || domain.length < 2) {
+    return undefined;
+  }
+  const scaleType = axis.scaleType ?? 'linear';
+  const isOrdinal = scaleType === 'band' || scaleType === 'point';
+  return {
+    scaleType,
+    data: axis.data,
+    domain: isOrdinal ? {
+      min: 0,
+      max: domain.length - 1
+    } : {
+      min: Number(domain[0]),
+      max: Number(domain[domain.length - 1])
+    }
+  };
+}
+
 /**
  * Computes the start timestamp for a calendar interval subtracted from a reference point.
  */

package/ChartsZoomSlider/internals/chartsAxisZoomSliderThumbClasses.js

@@ -10,9 +10,16 @@ exports.useUtilityClasses = void 0;
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
-const chartsAxisZoomSliderThumbClasses = exports.chartsAxisZoomSliderThumbClasses = (0, _generateUtilityClasses.default)('MuiChartAxisZoomSliderThumb', ['root', 'horizontal', 'vertical', 'start', 'end']);
+const CORRECT_PREFIX = 'MuiChartsAxisZoomSliderThumb';
+// TODO v10: remove `MuiChartAxisZoomSliderThumb`. Kept for backwards compatibility with
+// users targeting the historically-incorrect prefix (missing the `s` in `Charts`).
+const LEGACY_PREFIX = 'MuiChartAxisZoomSliderThumb';
+const chartsAxisZoomSliderThumbClasses = exports.chartsAxisZoomSliderThumbClasses = (0, _generateUtilityClasses.default)(CORRECT_PREFIX, ['root', 'horizontal', 'vertical', 'start', 'end']);
+
+// Returns both the correct and legacy class names so existing CSS targeting the legacy
+// prefix continues to work.
 function getAxisZoomSliderThumbUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiChartAxisZoomSliderThumb', slot);
+  return `${(0, _generateUtilityClass.default)(CORRECT_PREFIX, slot)} ${(0, _generateUtilityClass.default)(LEGACY_PREFIX, slot)}`;
 }
 const useUtilityClasses = ownerState => {
   const {

package/ChartsZoomSlider/internals/chartsAxisZoomSliderThumbClasses.mjs

@@ -1,9 +1,16 @@
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export const chartsAxisZoomSliderThumbClasses = generateUtilityClasses('MuiChartAxisZoomSliderThumb', ['root', 'horizontal', 'vertical', 'start', 'end']);
+const CORRECT_PREFIX = 'MuiChartsAxisZoomSliderThumb';
+// TODO v10: remove `MuiChartAxisZoomSliderThumb`. Kept for backwards compatibility with
+// users targeting the historically-incorrect prefix (missing the `s` in `Charts`).
+const LEGACY_PREFIX = 'MuiChartAxisZoomSliderThumb';
+export const chartsAxisZoomSliderThumbClasses = generateUtilityClasses(CORRECT_PREFIX, ['root', 'horizontal', 'vertical', 'start', 'end']);
+
+// Returns both the correct and legacy class names so existing CSS targeting the legacy
+// prefix continues to work.
 export function getAxisZoomSliderThumbUtilityClass(slot) {
-  return generateUtilityClass('MuiChartAxisZoomSliderThumb', slot);
+  return `${generateUtilityClass(CORRECT_PREFIX, slot)} ${generateUtilityClass(LEGACY_PREFIX, slot)}`;
 }
 export const useUtilityClasses = ownerState => {
   const {

package/ChartsZoomSlider/internals/previews/ScatterPreviewPlot.js

@@ -47,6 +47,7 @@ function ScatterPreviewPlot({
         id,
         xAxisId,
         yAxisId,
+        colorAxisId,
         zAxisId,
         color
       } = series[seriesId];
@@ -57,7 +58,7 @@ function ScatterPreviewPlot({
       if (xAxis?.id !== axisId && yAxis?.id !== axisId) {
         return null;
       }
-      const colorGetter = _internals.scatterSeriesConfig.colorProcessor(series[seriesId], xAxis, yAxis, zAxes[zAxisId ?? defaultZAxisId]);
+      const colorGetter = _internals.scatterSeriesConfig.colorProcessor(series[seriesId], xAxis, yAxis, zAxes[colorAxisId ?? zAxisId ?? defaultZAxisId]);
       const xScale = xAxis.scale;
       const yScale = yAxis.scale;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScatterPreviewItems, {

package/ChartsZoomSlider/internals/previews/ScatterPreviewPlot.mjs

@@ -40,6 +40,7 @@ export function ScatterPreviewPlot({
         id,
         xAxisId,
         yAxisId,
+        colorAxisId,
         zAxisId,
         color
       } = series[seriesId];
@@ -50,7 +51,7 @@ export function ScatterPreviewPlot({
       if (xAxis?.id !== axisId && yAxis?.id !== axisId) {
         return null;
       }
-      const colorGetter = scatterSeriesConfig.colorProcessor(series[seriesId], xAxis, yAxis, zAxes[zAxisId ?? defaultZAxisId]);
+      const colorGetter = scatterSeriesConfig.colorProcessor(series[seriesId], xAxis, yAxis, zAxes[colorAxisId ?? zAxisId ?? defaultZAxisId]);
       const xScale = xAxis.scale;
       const yScale = yAxis.scale;
       return /*#__PURE__*/_jsx(ScatterPreviewItems, {

package/FunnelChart/funnelPlotSlots.types.d.mts

@@ -1,21 +1,22 @@
 import type * as React from 'react';
 import type { FunnelSectionProps } from "./FunnelSection.mjs";
 import { type FunnelSectionLabelProps } from "./FunnelSectionLabel.mjs";
+import type { FunnelSectionPropsOverrides, FunnelSectionLabelPropsOverrides } from "../models/chartsSlotsComponentsPropsPro.mjs";
 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/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
   })),
   /**