@mui/x-charts-pro 9.2.0 → 9.4.0

package/internals/plugins/useChartProZoom/useChartProZoom.mjs

@@ -2,11 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { selectorChartZoomOptionsLookup, createZoomLookup, selectorChartAxisZoomOptionsLookup } from '@mui/x-charts/internals';
+import { selectorChartZoomOptionsLookup, createZoomLookup, selectorChartAxisZoomOptionsLookup, selectorChartXAxisWithDomains, selectorChartYAxisWithDomains } from '@mui/x-charts/internals';
 import debounce from '@mui/utils/debounce';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
 import { useEventCallback } from '@mui/material/utils';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { getRangeButtonDomainParams, rangeButtonValueToZoom } from "../../../ChartsToolbarPro/rangeButtonValueToZoom.mjs";
 import { calculateZoom } from "./calculateZoom.mjs";
 import { useZoomOnWheel } from "./gestureHooks/useZoomOnWheel.mjs";
 import { useZoomOnPinch } from "./gestureHooks/useZoomOnPinch.mjs";
@@ -18,6 +20,13 @@ import { useZoomOnBrush } from "./gestureHooks/useZoomOnBrush.mjs";
 import { useZoomOnDoubleTapReset } from "./gestureHooks/useZoomOnDoubleTapReset.mjs";
 import { initializeZoomInteractionConfig } from "./initializeZoomInteractionConfig.mjs";
 import { initializeZoomData } from "./initializeZoomData.mjs";
+
+/**
+ * Type guard for `initialZoom` entries provided as a range value.
+ */
+function isInitialZoomRange(entry) {
+  return 'value' in entry;
+}
 export const useChartProZoom = pluginData => {
   const {
     store,
@@ -55,6 +64,68 @@ export const useChartProZoom = pluginData => {
     }));
     removeIsInteracting();
   }, [store, paramsZoomData, removeIsInteracting]);
+
+  // Resolve `initialZoom` entries provided as range values (e.g. `{ axisId, value: { unit: 'month' } }`).
+  // These depend on the computed axis domains, which are only available after the first render
+  // (unless the user provides explicit `width`/`height`), so they are resolved once on mount.
+  // A layout effect avoids a visible unzoomed frame.
+  const hasResolvedInitialZoomRanges = React.useRef(false);
+  useEnhancedEffect(() => {
+    if (hasResolvedInitialZoomRanges.current) {
+      // `initialZoom` is only read on mount, like the rest of the initial zoom state.
+      return;
+    }
+    hasResolvedInitialZoomRanges.current = true;
+    if (paramsZoomData !== undefined) {
+      // The zoom is controlled, `initialZoom` is ignored.
+      return;
+    }
+    const rangeEntries = (params.initialZoom ?? []).filter(isInitialZoomRange);
+    if (rangeEntries.length === 0) {
+      return;
+    }
+    const {
+      axes: xAxes,
+      domains: xDomains
+    } = selectorChartXAxisWithDomains(store.state);
+    const {
+      axes: yAxes,
+      domains: yDomains
+    } = selectorChartYAxisWithDomains(store.state);
+    const resolvedZoom = new Map();
+    rangeEntries.forEach(entry => {
+      const xAxis = xAxes?.find(axis => axis.id === entry.axisId);
+      const axis = xAxis ?? yAxes?.find(candidate => candidate.id === entry.axisId);
+      if (!axis) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(`MUI X Charts: \`initialZoom\` references the axis with id "${entry.axisId}", which does not exist.\n` + 'The range cannot be resolved. Provide an `axisId` that matches a chart axis.');
+        }
+        return;
+      }
+      const domain = (xAxis ? xDomains : yDomains)[entry.axisId]?.domain;
+      const domainParams = getRangeButtonDomainParams(axis, domain);
+      if (!domainParams) {
+        return;
+      }
+      const {
+        start,
+        end
+      } = rangeButtonValueToZoom(entry.value, domainParams);
+      resolvedZoom.set(entry.axisId, {
+        axisId: entry.axisId,
+        start,
+        end
+      });
+    });
+    if (resolvedZoom.size === 0) {
+      return;
+    }
+    store.set('zoom', _extends({}, store.state.zoom, {
+      isInteracting: true,
+      zoomData: store.state.zoom.zoomData.map(zoom => resolvedZoom.get(zoom.axisId) ?? zoom)
+    }));
+    removeIsInteracting();
+  }, [store, paramsZoomData, params.initialZoom, removeIsInteracting]);
   const setZoomDataCallback = React.useCallback(zoomData => {
     const newZoomData = typeof zoomData === 'function' ? zoomData([...store.state.zoom.zoomData]) : zoomData;
     if (isDeepEqual(store.state.zoom.zoomData, newZoomData)) {
@@ -63,14 +134,12 @@ export const useChartProZoom = pluginData => {
     onZoomChange(newZoomData);
     if (store.state.zoom.isControlled) {
       store.set('zoom', _extends({}, store.state.zoom, {
-        isInteracting: true,
-        activeRangeButtonKey: null
+        isInteracting: true
       }));
     } else {
       store.set('zoom', _extends({}, store.state.zoom, {
         isInteracting: true,
-        zoomData: newZoomData,
-        activeRangeButtonKey: null
+        zoomData: newZoomData
       }));
       removeIsInteracting();
     }
@@ -134,11 +203,6 @@ export const useChartProZoom = pluginData => {
   }, [setZoomDataCallback, store]);
   const zoomIn = React.useCallback(() => zoom(0.1), [zoom]);
   const zoomOut = React.useCallback(() => zoom(-0.1), [zoom]);
-  const setActiveRangeButtonKey = React.useCallback(key => {
-    store.set('zoom', _extends({}, store.state.zoom, {
-      activeRangeButtonKey: key
-    }));
-  }, [store]);
   return {
     publicAPI: {
       setZoomData: setZoomDataCallback,
@@ -151,8 +215,7 @@ export const useChartProZoom = pluginData => {
       setAxisZoomData,
       moveZoomRange,
       zoomIn,
-      zoomOut,
-      setActiveRangeButtonKey
+      zoomOut
     }
   };
 };
@@ -170,16 +233,17 @@ useChartProZoom.getInitialState = params => {
     defaultizedYAxis
   } = params;
   const optionsLookup = _extends({}, createZoomLookup('x')(defaultizedXAxis), createZoomLookup('y')(defaultizedYAxis));
+  // Range-value entries of `initialZoom` are resolved after the first render, once the axis
+  // domains are computed. Only the explicit `ZoomData` entries are applied to the initial state.
   const userZoomData =
   // eslint-disable-next-line no-nested-ternary
-  zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom : undefined;
+  zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom.filter(entry => !isInitialZoomRange(entry)) : undefined;
   return {
     zoom: {
       zoomData: initializeZoomData(optionsLookup, userZoomData),
       isInteracting: false,
       isControlled: zoomData !== undefined,
-      zoomInteractionConfig: initializeZoomInteractionConfig(params.zoomInteractionConfig, optionsLookup),
-      activeRangeButtonKey: null
+      zoomInteractionConfig: initializeZoomInteractionConfig(params.zoomInteractionConfig, optionsLookup)
     }
   };
 };

package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.mts

@@ -13,9 +13,6 @@ export declare const selectorChartAxisZoomData: (args_0: import("@mui/x-charts/i
 export declare const selectorChartCanZoomOut: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.mjs").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;
-export declare const selectorChartActiveRangeButtonKey: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.mjs").UseChartProZoomState & Partial<{}> & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}) => string | null;
 export declare const selectorChartCanZoomIn: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.mjs").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;

package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts

@@ -13,9 +13,6 @@ export declare const selectorChartAxisZoomData: (args_0: import("@mui/x-charts/i
 export declare const selectorChartCanZoomOut: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;
-export declare const selectorChartActiveRangeButtonKey: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}) => string | null;
 export declare const selectorChartCanZoomIn: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean;

package/internals/plugins/useChartProZoom/useChartProZoom.selectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartZoomState = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomIsEnabled = exports.selectorChartCanZoomOut = exports.selectorChartCanZoomIn = exports.selectorChartAxisZoomData = exports.selectorChartActiveRangeButtonKey = void 0;
+exports.selectorChartZoomState = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomIsEnabled = exports.selectorChartCanZoomOut = exports.selectorChartCanZoomIn = exports.selectorChartAxisZoomData = void 0;
 var _store = require("@mui/x-internals/store");
 var _internals = require("@mui/x-charts/internals");
 const selectorChartZoomState = state => state.zoom;
@@ -18,7 +18,6 @@ const selectorChartCanZoomOut = exports.selectorChartCanZoomOut = (0, _store.cre
     return zoomData.start === options.minStart && zoomData.end === options.maxEnd || span === options.maxSpan;
   });
 });
-const selectorChartActiveRangeButtonKey = exports.selectorChartActiveRangeButtonKey = (0, _store.createSelector)(selectorChartZoomState, zoom => zoom.activeRangeButtonKey);
 const selectorChartCanZoomIn = exports.selectorChartCanZoomIn = (0, _store.createSelector)(selectorChartZoomState, _internals.selectorChartZoomOptionsLookup, (zoomState, zoomOptions) => {
   return !zoomState.zoomData.every(zoomData => {
     const span = zoomData.end - zoomData.start;

package/internals/plugins/useChartProZoom/useChartProZoom.selectors.mjs

@@ -11,7 +11,6 @@ export const selectorChartCanZoomOut = createSelector(selectorChartZoomState, se
     return zoomData.start === options.minStart && zoomData.end === options.maxEnd || span === options.maxSpan;
   });
 });
-export const selectorChartActiveRangeButtonKey = createSelector(selectorChartZoomState, zoom => zoom.activeRangeButtonKey);
 export const selectorChartCanZoomIn = createSelector(selectorChartZoomState, selectorChartZoomOptionsLookup, (zoomState, zoomOptions) => {
   return !zoomState.zoomData.every(zoomData => {
     const span = zoomData.end - zoomData.start;

package/internals/plugins/useChartProZoom/useChartProZoom.types.d.mts

@@ -1,11 +1,38 @@
 import { type UseChartSeriesSignature, type ChartPluginSignature, type UseChartCartesianAxisSignature, type UseChartCartesianAxisDefaultizedParameters, type ZoomData, type AxisId, type UseChartBrushSignature } from '@mui/x-charts/internals';
 import { type ZoomInteractionConfig, type DefaultizedZoomInteractionConfig } from "./ZoomInteractionConfig.types.mjs";
+import { type RangeButtonValue } from "../../../ChartsToolbarPro/rangeButtonValueToZoom.mjs";
+/**
+ * Initializes the zoom of an axis with a range value instead of zoom percentages.
+ */
+export interface InitialZoomRange {
+  /**
+   * The id of the axis to apply the zoom to.
+   */
+  axisId: AxisId;
+  /**
+   * The range to zoom to. Accepts the same values as a range button:
+   *
+   * - `{ unit, step }` — A calendar interval from the end of the data.
+   * - `[start, end]` — An absolute date range, or a range between two ordinal axis values.
+   * - `(params) => { start, end }` — A function returning zoom percentages (0-100).
+   * - `null` — Shows all data.
+   */
+  value: RangeButtonValue;
+}
+/**
+ * An entry of the `initialZoom` prop. Either explicit zoom percentages ({@link ZoomData})
+ * or a range value resolved against the axis ({@link InitialZoomRange}).
+ */
+export type InitialZoom = ZoomData | InitialZoomRange;
 export interface UseChartProZoomParameters {
   /**
    * 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?: readonly ZoomData[];
+  initialZoom?: readonly InitialZoom[];
   /**
    * Callback fired when the zoom has changed.
    *
@@ -41,11 +68,6 @@ export interface UseChartProZoomState {
      * Configuration for zoom interactions.
      */
     zoomInteractionConfig: DefaultizedZoomInteractionConfig;
-    /**
-     * The key of the currently active range button, or `null` if no range button is active.
-     * Cleared when the user manually zooms or pans the chart.
-     */
-    activeRangeButtonKey: string | null;
   };
 }
 export interface UseChartProZoomPublicApi {
@@ -78,11 +100,6 @@ export interface UseChartProZoomInstance extends UseChartProZoomPublicApi {
    * Zoom out the chart.
    */
   zoomOut: () => void;
-  /**
-   * Set the active range button key. Pass `null` to clear.
-   * @param {string | null} key The key of the active range button.
-   */
-  setActiveRangeButtonKey: (key: string | null) => void;
 }
 export type UseChartProZoomSignature = ChartPluginSignature<{
   params: UseChartProZoomParameters;

package/internals/plugins/useChartProZoom/useChartProZoom.types.d.ts

@@ -1,11 +1,38 @@
 import { type UseChartSeriesSignature, type ChartPluginSignature, type UseChartCartesianAxisSignature, type UseChartCartesianAxisDefaultizedParameters, type ZoomData, type AxisId, type UseChartBrushSignature } from '@mui/x-charts/internals';
 import { type ZoomInteractionConfig, type DefaultizedZoomInteractionConfig } from "./ZoomInteractionConfig.types.js";
+import { type RangeButtonValue } from "../../../ChartsToolbarPro/rangeButtonValueToZoom.js";
+/**
+ * Initializes the zoom of an axis with a range value instead of zoom percentages.
+ */
+export interface InitialZoomRange {
+  /**
+   * The id of the axis to apply the zoom to.
+   */
+  axisId: AxisId;
+  /**
+   * The range to zoom to. Accepts the same values as a range button:
+   *
+   * - `{ unit, step }` — A calendar interval from the end of the data.
+   * - `[start, end]` — An absolute date range, or a range between two ordinal axis values.
+   * - `(params) => { start, end }` — A function returning zoom percentages (0-100).
+   * - `null` — Shows all data.
+   */
+  value: RangeButtonValue;
+}
+/**
+ * An entry of the `initialZoom` prop. Either explicit zoom percentages ({@link ZoomData})
+ * or a range value resolved against the axis ({@link InitialZoomRange}).
+ */
+export type InitialZoom = ZoomData | InitialZoomRange;
 export interface UseChartProZoomParameters {
   /**
    * 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?: readonly ZoomData[];
+  initialZoom?: readonly InitialZoom[];
   /**
    * Callback fired when the zoom has changed.
    *
@@ -41,11 +68,6 @@ export interface UseChartProZoomState {
      * Configuration for zoom interactions.
      */
     zoomInteractionConfig: DefaultizedZoomInteractionConfig;
-    /**
-     * The key of the currently active range button, or `null` if no range button is active.
-     * Cleared when the user manually zooms or pans the chart.
-     */
-    activeRangeButtonKey: string | null;
   };
 }
 export interface UseChartProZoomPublicApi {
@@ -78,11 +100,6 @@ export interface UseChartProZoomInstance extends UseChartProZoomPublicApi {
    * Zoom out the chart.
    */
   zoomOut: () => void;
-  /**
-   * Set the active range button key. Pass `null` to clear.
-   * @param {string | null} key The key of the active range button.
-   */
-  setActiveRangeButtonKey: (key: string | null) => void;
 }
 export type UseChartProZoomSignature = ChartPluginSignature<{
   params: UseChartProZoomParameters;

package/internals/slots/chartsBaseSlots.d.mts

@@ -1,10 +1,11 @@
 import { type ChartsBaseSlots } from '@mui/x-charts/models';
 import type * as React from 'react';
 import { type ChartBaseDividerProps, type ChartBaseMenuItemProps, type ChartBaseMenuListProps, type ChartBasePopperProps, type ChartBaseTooltipProps } from "./chartBaseSlotProps.mjs";
+import type { BaseDividerPropsOverrides, BaseMenuItemPropsOverrides, BaseMenuListPropsOverrides, BasePopperPropsOverrides, BaseTooltipPropsOverrides } from "../../models/chartsSlotsComponentsPropsPro.mjs";
 export interface ChartsBaseSlotsPro extends ChartsBaseSlots {
-  baseDivider: React.ComponentType<ChartBaseDividerProps>;
-  baseMenuItem: React.ComponentType<ChartBaseMenuItemProps>;
-  baseMenuList: React.ComponentType<ChartBaseMenuListProps>;
-  basePopper: React.ComponentType<ChartBasePopperProps>;
-  baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
+  baseDivider: React.ComponentType<ChartBaseDividerProps & BaseDividerPropsOverrides>;
+  baseMenuItem: React.ComponentType<ChartBaseMenuItemProps & BaseMenuItemPropsOverrides>;
+  baseMenuList: React.ComponentType<ChartBaseMenuListProps & BaseMenuListPropsOverrides>;
+  basePopper: React.ComponentType<ChartBasePopperProps & BasePopperPropsOverrides>;
+  baseTooltip: React.ComponentType<ChartBaseTooltipProps & BaseTooltipPropsOverrides>;
 }

package/internals/slots/chartsBaseSlots.d.ts

@@ -1,10 +1,11 @@
 import { type ChartsBaseSlots } from '@mui/x-charts/models';
 import type * as React from 'react';
 import { type ChartBaseDividerProps, type ChartBaseMenuItemProps, type ChartBaseMenuListProps, type ChartBasePopperProps, type ChartBaseTooltipProps } from "./chartBaseSlotProps.js";
+import type { BaseDividerPropsOverrides, BaseMenuItemPropsOverrides, BaseMenuListPropsOverrides, BasePopperPropsOverrides, BaseTooltipPropsOverrides } from "../../models/chartsSlotsComponentsPropsPro.js";
 export interface ChartsBaseSlotsPro extends ChartsBaseSlots {
-  baseDivider: React.ComponentType<ChartBaseDividerProps>;
-  baseMenuItem: React.ComponentType<ChartBaseMenuItemProps>;
-  baseMenuList: React.ComponentType<ChartBaseMenuListProps>;
-  basePopper: React.ComponentType<ChartBasePopperProps>;
-  baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
+  baseDivider: React.ComponentType<ChartBaseDividerProps & BaseDividerPropsOverrides>;
+  baseMenuItem: React.ComponentType<ChartBaseMenuItemProps & BaseMenuItemPropsOverrides>;
+  baseMenuList: React.ComponentType<ChartBaseMenuListProps & BaseMenuListPropsOverrides>;
+  basePopper: React.ComponentType<ChartBasePopperProps & BasePopperPropsOverrides>;
+  baseTooltip: React.ComponentType<ChartBaseTooltipProps & BaseTooltipPropsOverrides>;
 }

package/internals/slots/chartsIconSlots.d.mts

@@ -1,19 +1,20 @@
 import type * as React from 'react';
 import { type ChartBaseIconProps, type ChartsIconSlots } from '@mui/x-charts/models';
+import type { ZoomInIconPropsOverrides, ZoomOutIconPropsOverrides, ExportIconPropsOverrides } from "../../models/chartsSlotsComponentsPropsPro.mjs";
 export interface ChartsIconSlotsPro extends ChartsIconSlots {
   /**
    * Icon displayed on the toolbar's zoom in button.
    * @default ChartsZoomInIcon
    */
-  zoomInIcon: React.ComponentType<ChartBaseIconProps>;
+  zoomInIcon: React.ComponentType<ChartBaseIconProps & ZoomInIconPropsOverrides>;
   /**
    * Icon displayed on the toolbar's zoom out button.
    * @default ChartsZoomOutIcon
    */
-  zoomOutIcon: React.ComponentType<ChartBaseIconProps>;
+  zoomOutIcon: React.ComponentType<ChartBaseIconProps & ZoomOutIconPropsOverrides>;
   /**
    * Icon displayed on the toolbar's export button.
    * @default ChartsExportIcon
    */
-  exportIcon: React.ComponentType<ChartBaseIconProps>;
+  exportIcon: React.ComponentType<ChartBaseIconProps & ExportIconPropsOverrides>;
 }

package/internals/slots/chartsIconSlots.d.ts

@@ -1,19 +1,20 @@
 import type * as React from 'react';
 import { type ChartBaseIconProps, type ChartsIconSlots } from '@mui/x-charts/models';
+import type { ZoomInIconPropsOverrides, ZoomOutIconPropsOverrides, ExportIconPropsOverrides } from "../../models/chartsSlotsComponentsPropsPro.js";
 export interface ChartsIconSlotsPro extends ChartsIconSlots {
   /**
    * Icon displayed on the toolbar's zoom in button.
    * @default ChartsZoomInIcon
    */
-  zoomInIcon: React.ComponentType<ChartBaseIconProps>;
+  zoomInIcon: React.ComponentType<ChartBaseIconProps & ZoomInIconPropsOverrides>;
   /**
    * Icon displayed on the toolbar's zoom out button.
    * @default ChartsZoomOutIcon
    */
-  zoomOutIcon: React.ComponentType<ChartBaseIconProps>;
+  zoomOutIcon: React.ComponentType<ChartBaseIconProps & ZoomOutIconPropsOverrides>;
   /**
    * Icon displayed on the toolbar's export button.
    * @default ChartsExportIcon
    */
-  exportIcon: React.ComponentType<ChartBaseIconProps>;
+  exportIcon: React.ComponentType<ChartBaseIconProps & ExportIconPropsOverrides>;
 }

package/models/chartsSlotsComponentsPropsPro.d.mts

@@ -0,0 +1,11 @@
+export interface BaseDividerPropsOverrides {}
+export interface BaseMenuItemPropsOverrides {}
+export interface BaseMenuListPropsOverrides {}
+export interface BasePopperPropsOverrides {}
+export interface BaseTooltipPropsOverrides {}
+export interface ZoomInIconPropsOverrides {}
+export interface ZoomOutIconPropsOverrides {}
+export interface ExportIconPropsOverrides {}
+export interface CellPropsOverrides {}
+export interface FunnelSectionPropsOverrides {}
+export interface FunnelSectionLabelPropsOverrides {}

package/models/chartsSlotsComponentsPropsPro.d.ts

@@ -0,0 +1,11 @@
+export interface BaseDividerPropsOverrides {}
+export interface BaseMenuItemPropsOverrides {}
+export interface BaseMenuListPropsOverrides {}
+export interface BasePopperPropsOverrides {}
+export interface BaseTooltipPropsOverrides {}
+export interface ZoomInIconPropsOverrides {}
+export interface ZoomOutIconPropsOverrides {}
+export interface ExportIconPropsOverrides {}
+export interface CellPropsOverrides {}
+export interface FunnelSectionPropsOverrides {}
+export interface FunnelSectionLabelPropsOverrides {}

package/models/chartsSlotsComponentsPropsPro.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/models/chartsSlotsComponentsPropsPro.mjs

@@ -0,0 +1 @@
+export {};

package/models/index.d.mts

@@ -1,4 +1,5 @@
 export * from '@mui/x-charts/models';
 export type { ZoomData, ZoomFilterMode, ZoomOptions, ZoomSliderOptions, ZoomSliderShowTooltip } from '@mui/x-charts/internals';
 export * from "./seriesType/index.mjs";
+export * from "./chartsSlotsComponentsPropsPro.mjs";
 export { defaultOnBeforeExport } from "../internals/plugins/useChartProExport/defaults.mjs";

package/models/index.d.ts

@@ -1,4 +1,5 @@
 export * from '@mui/x-charts/models';
 export type { ZoomData, ZoomFilterMode, ZoomOptions, ZoomSliderOptions, ZoomSliderShowTooltip } from '@mui/x-charts/internals';
 export * from "./seriesType/index.js";
+export * from "./chartsSlotsComponentsPropsPro.js";
 export { defaultOnBeforeExport } from "../internals/plugins/useChartProExport/defaults.js";

package/models/index.js

@@ -36,4 +36,16 @@ Object.keys(_seriesType).forEach(function (key) {
     }
   });
 });
+var _chartsSlotsComponentsPropsPro = require("./chartsSlotsComponentsPropsPro");
+Object.keys(_chartsSlotsComponentsPropsPro).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _chartsSlotsComponentsPropsPro[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chartsSlotsComponentsPropsPro[key];
+    }
+  });
+});
 var _defaults = require("../internals/plugins/useChartProExport/defaults");

package/models/index.mjs

@@ -3,4 +3,5 @@ export * from '@mui/x-charts/models';
 // End of re-export-block
 
 export * from "./seriesType/index.mjs";
+export * from "./chartsSlotsComponentsPropsPro.mjs";
 export { defaultOnBeforeExport } from "../internals/plugins/useChartProExport/defaults.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "9.2.0",
+  "version": "9.4.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -27,15 +27,15 @@
     "directory": "packages/x-charts-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.29.2",
+    "@babel/runtime": "^7.29.7",
     "@mui/utils": "9.0.1",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts-vendor": "^9.0.0",
-    "@mui/x-charts": "^9.2.0",
+    "@mui/x-charts": "^9.4.0",
+    "@mui/x-internal-gestures": "^9.3.0",
+    "@mui/x-charts-vendor": "^9.4.0",
     "@mui/x-internals": "^9.1.0",
-    "@mui/x-license": "^9.2.0",
-    "@mui/x-internal-gestures": "^9.2.0"
+    "@mui/x-license": "^9.4.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",