@mui/x-charts-pro 9.3.0 → 9.5.0

package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.mjs

@@ -7,8 +7,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useChartsContext, useChartsSlots, selectorChartRawXAxis, selectorChartXAxisWithDomains, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
-import { selectorChartActiveRangeButtonKey, selectorChartCanZoomOut } from "../internals/plugins/useChartProZoom/index.mjs";
-import { rangeButtonValueToZoom } from "./rangeButtonValueToZoom.mjs";
+import { selectorChartAxisZoomData, selectorChartCanZoomOut } from "../internals/plugins/useChartProZoom/index.mjs";
+import { getRangeButtonDomainParams, rangeButtonValueToZoom } from "./rangeButtonValueToZoom.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button that sets the chart zoom to a predefined range.
@@ -31,7 +31,6 @@ const ChartsToolbarRangeButtonTrigger = /*#__PURE__*/React.forwardRef(function C
     instance,
     store
   } = useChartsContext();
-  const activeRangeButtonKey = store.use(selectorChartActiveRangeButtonKey);
   const canZoomOut = store.use(selectorChartCanZoomOut);
   const zoomOptionsLookup = store.use(selectorChartZoomOptionsLookup);
   const rawXAxes = store.use(selectorChartRawXAxis);
@@ -49,55 +48,53 @@ const ChartsToolbarRangeButtonTrigger = /*#__PURE__*/React.forwardRef(function C
     }
     return rawXAxes.find(axis => zoomOptionsLookup[axis.id] !== undefined)?.id;
   }, [axisIdProp, rawXAxes, zoomOptionsLookup]);
-
-  // Determine if the resolved axis is ordinal (band/point) to use index-based domain.
+  const currentAxisZoom = store.use(selectorChartAxisZoomData, resolvedAxisId);
   const resolvedAxis = React.useMemo(() => rawXAxes?.find(axis => axis.id === resolvedAxisId), [rawXAxes, resolvedAxisId]);
-  const isOrdinal = resolvedAxis?.scaleType === 'band' || resolvedAxis?.scaleType === 'point';
+  // Use isValueNull instead of value === null to avoid unnecessary re-renders when value is a new function/object on each render.
+  const isValueNull = value === null;
 
-  // Get the full domain for the target axis, ignoring the current zoom.
-  // For ordinal axes (band/point), use index-based range since domain values are categories.
-  const axisDomain = React.useMemo(() => {
-    if (resolvedAxisId === undefined) {
-      return undefined;
-    }
-    const domainDef = domains[resolvedAxisId];
-    if (!domainDef || domainDef.domain.length < 2) {
+  // Build the range conversion params for the target axis, ignoring the current zoom.
+  const domainParams = React.useMemo(() => {
+    if (resolvedAxisId === undefined || resolvedAxis === undefined) {
       return undefined;
     }
-    if (isOrdinal) {
+    return getRangeButtonDomainParams(resolvedAxis, domains[resolvedAxisId]?.domain);
+  }, [resolvedAxisId, resolvedAxis, domains]);
+
+  // Destructure so that returning a new object from rangeButtonValueToZoom doesn't cause unnecessary re-renders in handleClick.
+  const {
+    start: startZoom,
+    end: endZoom
+  } = React.useMemo(() => {
+    if (domainParams === undefined) {
       return {
-        min: 0,
-        max: domainDef.domain.length - 1
+        start: undefined,
+        end: undefined
       };
     }
-    const min = domainDef.domain[0];
-    const max = domainDef.domain[domainDef.domain.length - 1];
-    return {
-      min: Number(min),
-      max: Number(max)
-    };
-  }, [resolvedAxisId, domains, isOrdinal]);
+    return rangeButtonValueToZoom(value, domainParams);
+  }, [domainParams, value]);
   const handleClick = React.useCallback(() => {
-    if (resolvedAxisId === undefined || !axisDomain) {
+    if (resolvedAxisId === undefined || startZoom === undefined || endZoom === undefined) {
       return;
     }
-    const zoom = rangeButtonValueToZoom(value, {
-      scaleType: resolvedAxis?.scaleType ?? 'linear',
-      data: resolvedAxis?.data,
-      domain: axisDomain
-    });
     instance.setAxisZoomData(resolvedAxisId, {
       axisId: resolvedAxisId,
-      start: zoom.start,
-      end: zoom.end
+      start: startZoom,
+      end: endZoom
     });
-    instance.setActiveRangeButtonKey(label);
-  }, [resolvedAxisId, resolvedAxis, axisDomain, value, instance, label]);
+  }, [resolvedAxisId, startZoom, endZoom, instance]);
 
-  // Determine if this button is selected.
-  // When explicitly clicked, activeRangeButtonKey matches the label.
-  // When no button has been clicked and zoom is at full range, the null-value button is active.
-  const isActive = activeRangeButtonKey === label || activeRangeButtonKey === null && value === null && !canZoomOut;
+  // A button is selected when the current zoom range matches its computed range.
+  const isActive = React.useMemo(() => {
+    if (startZoom === undefined || endZoom === undefined) {
+      return isValueNull && !canZoomOut;
+    }
+    const start = currentAxisZoom?.start ?? 0;
+    const end = currentAxisZoom?.end ?? 100;
+    const epsilon = 0.01;
+    return Math.abs(start - startZoom) < epsilon && Math.abs(end - endZoom) < epsilon;
+  }, [startZoom, endZoom, isValueNull, currentAxisZoom, canZoomOut]);
   const element = useComponentRenderer(slots.baseToggleButton, render, _extends({}, slotProps.baseToggleButton, {
     onClick: handleClick,
     selected: isActive,
@@ -138,11 +135,11 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarRangeButtonTrigger.propType
    * The range value. Specifies how far back from the end of the data to zoom.
    *
    * - `{ unit, step }` — A calendar interval from the end of the data (e.g., `{ unit: 'month', step: 3 }` for 3 months).
-   * - `[start, end]` — An absolute date range.
+   * - `[start, end]` — An absolute date range, or a range between two ordinal (band/point) axis values.
    * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
    * - `null` — Resets zoom to show all data.
    */
-  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date).isRequired), PropTypes.func, PropTypes.shape({
+  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
   })])

package/ChartsToolbarPro/Toolbar.types.d.mts

@@ -1,15 +1,16 @@
 import type * as React from 'react';
+import type { ToolbarPropsOverrides } from '@mui/x-charts/models';
 import { type ChartsToolbarProProps } from "./ChartsToolbarPro.mjs";
 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/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/funnel.types.d.mts

@@ -27,7 +27,7 @@ export type FunnelValueType = {
    */
   labelMarkType?: ChartsLabelMarkProps['type'];
 };
-export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType, 'funnel'>, 'color' | 'colorGetter'>, CartesianSeriesType {
+export interface FunnelSeriesType extends Omit<CommonSeriesType<'funnel'>, 'color' | 'colorGetter'>, CartesianSeriesType {
   type: 'funnel';
   /**
    * Data associated to the funnel section.

package/FunnelChart/funnel.types.d.ts

@@ -27,7 +27,7 @@ export type FunnelValueType = {
    */
   labelMarkType?: ChartsLabelMarkProps['type'];
 };
-export interface FunnelSeriesType extends Omit<CommonSeriesType<FunnelValueType, 'funnel'>, 'color' | 'colorGetter'>, CartesianSeriesType {
+export interface FunnelSeriesType extends Omit<CommonSeriesType<'funnel'>, 'color' | 'colorGetter'>, CartesianSeriesType {
   type: 'funnel';
   /**
    * Data associated to the funnel section.

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 {
   /**