@mui/x-charts-pro 8.1.0 → 8.3.0

package/esm/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -2,10 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useSelector, getSVGPoint, selectorChartDrawingArea, createZoomLookup, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { useSelector, getSVGPoint, selectorChartDrawingArea, createZoomLookup, selectorChartZoomOptionsLookup, selectorChartAxisZoomOptionsLookup } from '@mui/x-charts/internals';
 import { useEventCallback } from '@mui/material/utils';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import debounce from '@mui/utils/debounce';
+import { calculateZoom } from "./calculateZoom.js";
 import { getDiff, getHorizontalCenterRatio, getPinchScaleRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, preventDefault, zoomAtPoint } from "./useChartProZoom.utils.js";
 
 // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
@@ -54,7 +55,7 @@ export const useChartProZoom = ({
     }
     store.update(prevState => {
       if (process.env.NODE_ENV !== 'production' && !prevState.zoom.isControlled) {
-        console.error([`MUI X: A chart component is changing the \`zoomData\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
+        console.error([`MUI X Charts: A chart component is changing the \`zoomData\` from uncontrolled to controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', 'Decide between using a controlled or uncontrolled for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
       }
       return _extends({}, prevState, {
         zoom: _extends({}, prevState.zoom, {
@@ -101,6 +102,34 @@ export const useChartProZoom = ({
       });
     });
   }, [onZoomChange, store, removeIsInteracting]);
+  const moveZoomRange = React.useCallback((axisId, by) => {
+    setZoomDataCallback(prevZoomData => {
+      return prevZoomData.map(zoom => {
+        if (zoom.axisId !== axisId) {
+          return zoom;
+        }
+        const options = optionsLookup[axisId];
+        if (!options) {
+          return zoom;
+        }
+        let start = zoom.start;
+        let end = zoom.end;
+        if (by > 0) {
+          const span = end - start;
+          end = Math.min(end + by, options.maxEnd);
+          start = end - span;
+        } else {
+          const span = end - start;
+          start = Math.max(start + by, options.minStart);
+          end = start + span;
+        }
+        return _extends({}, zoom, {
+          start,
+          end
+        });
+      });
+    });
+  }, [optionsLookup, setZoomDataCallback]);
   React.useEffect(() => {
     return () => {
       removeIsInteracting.clear();
@@ -327,12 +356,25 @@ export const useChartProZoom = ({
       rafThrottledSetZoomData.clear();
     };
   }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback]);
+  const zoom = React.useCallback(step => {
+    setZoomDataCallback(prev => prev.map(zoomData => {
+      const zoomOptions = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), zoomData.axisId);
+      return calculateZoom(zoomData, step, zoomOptions);
+    }));
+  }, [setZoomDataCallback, store]);
+  const zoomIn = React.useCallback(() => zoom(0.1), [zoom]);
+  const zoomOut = React.useCallback(() => zoom(-0.1), [zoom]);
   return {
     publicAPI: {
-      setZoomData: setZoomDataCallback
+      setZoomData: setZoomDataCallback,
+      zoomIn,
+      zoomOut
     },
     instance: {
-      setZoomData: setZoomDataCallback
+      setZoomData: setZoomDataCallback,
+      moveZoomRange,
+      zoomIn,
+      zoomOut
     }
   };
 };

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

@@ -1,7 +1,7 @@
-import { ChartRootSelector } from '@mui/x-charts/internals';
+import { AxisId, ChartRootSelector } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
 export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature>;
-export declare const selectorChartZoomIsInteracting: ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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("./useChartProZoom.types").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartZoomIsInteracting: ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean) & {
   clearCache: () => void;
@@ -62,11 +62,11 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
     resultsCount: () => number;
     resetResultsCount: () => void;
   } & {
-    resultFunc: (resultFuncArgs_0: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>, resultFuncArgs_1: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) => {
+    resultFunc: (resultFuncArgs_0: Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>, resultFuncArgs_1: Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) => {
       [x: string]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
       [x: number]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
     };
-    memoizedResultFunc: ((resultFuncArgs_0: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>, resultFuncArgs_1: Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) => {
+    memoizedResultFunc: ((resultFuncArgs_0: Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>, resultFuncArgs_1: Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) => {
       [x: string]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
       [x: number]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
     }) & {
@@ -80,41 +80,41 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
     };
     dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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 & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
       cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-    }) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
+    }) => Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
       clearCache: () => void;
       resultsCount: () => number;
       resetResultsCount: () => void;
     } & {
-      resultFunc: (resultFuncArgs_0: import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
-      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
+      resultFunc: (resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedXAxis[] | undefined) => Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedXAxis[] | undefined) => Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
       };
-      lastResult: () => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+      lastResult: () => Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
       dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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 & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
         cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-      }) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined) & {
+      }) => import("@mui/x-charts/internals").DefaultedXAxis[] | undefined) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
       } & {
         resultFunc: (resultFuncArgs_0: {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
-        } | undefined) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined;
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
+        } | undefined) => import("@mui/x-charts/internals").DefaultedXAxis[] | undefined;
         memoizedResultFunc: ((resultFuncArgs_0: {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
-        } | undefined) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined) & {
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
+        } | undefined) => import("@mui/x-charts/internals").DefaultedXAxis[] | undefined) & {
           clearCache: () => void;
           resultsCount: () => number;
           resetResultsCount: () => void;
         };
-        lastResult: () => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined;
+        lastResult: () => import("@mui/x-charts/internals").DefaultedXAxis[] | undefined;
         dependencies: [(state: import("@mui/x-charts/internals").ChartState<[], [import("@mui/x-charts/internals").UseChartCartesianAxisSignature]>) => {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
         } | undefined];
         recomputations: () => number;
         resetRecomputations: () => void;
@@ -133,41 +133,41 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
       argsMemoize: typeof import("reselect").weakMapMemoize;
     }, ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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 & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
       cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-    }) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
+    }) => Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
       clearCache: () => void;
       resultsCount: () => number;
       resetResultsCount: () => void;
     } & {
-      resultFunc: (resultFuncArgs_0: import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
-      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
+      resultFunc: (resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedYAxis[] | undefined) => Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedYAxis[] | undefined) => Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
       };
-      lastResult: () => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
+      lastResult: () => Record<AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
       dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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 & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
         cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-      }) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined) & {
+      }) => import("@mui/x-charts/internals").DefaultedYAxis[] | undefined) & {
         clearCache: () => void;
         resultsCount: () => number;
         resetResultsCount: () => void;
       } & {
         resultFunc: (resultFuncArgs_0: {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
-        } | undefined) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined;
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
+        } | undefined) => import("@mui/x-charts/internals").DefaultedYAxis[] | undefined;
         memoizedResultFunc: ((resultFuncArgs_0: {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
-        } | undefined) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined) & {
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
+        } | undefined) => import("@mui/x-charts/internals").DefaultedYAxis[] | undefined) & {
           clearCache: () => void;
           resultsCount: () => number;
           resetResultsCount: () => void;
         };
-        lastResult: () => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined;
+        lastResult: () => import("@mui/x-charts/internals").DefaultedYAxis[] | undefined;
         dependencies: [(state: import("@mui/x-charts/internals").ChartState<[], [import("@mui/x-charts/internals").UseChartCartesianAxisSignature]>) => {
-          x: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsXAxisProps>[];
-          y: import("@mui/x-charts").AxisConfig<import("@mui/x-charts").ScaleName, any, import("@mui/x-charts").ChartsYAxisProps>[];
+          x: import("@mui/x-charts/internals").DefaultedXAxis[];
+          y: import("@mui/x-charts/internals").DefaultedYAxis[];
         } | undefined];
         recomputations: () => number;
         resetRecomputations: () => void;
@@ -200,4 +200,56 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
 } & {
   argsMemoize: typeof import("reselect").weakMapMemoize;
   memoize: typeof import("reselect").weakMapMemoize;
+};
+export declare const selectorChartAxisZoomData: ((state: any, axisId: AxisId) => import("@mui/x-charts/internals").ZoomData | undefined) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: Map<AxisId, import("@mui/x-charts/internals").ZoomData> | undefined, resultFuncArgs_1: AxisId) => import("@mui/x-charts/internals").ZoomData | undefined;
+  memoizedResultFunc: ((resultFuncArgs_0: Map<AxisId, import("@mui/x-charts/internals").ZoomData> | undefined, resultFuncArgs_1: AxisId) => import("@mui/x-charts/internals").ZoomData | undefined) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => import("@mui/x-charts/internals").ZoomData | undefined;
+  dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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 & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+    cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
+  }) => Map<AxisId, import("@mui/x-charts/internals").ZoomData> | undefined) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  } & {
+    resultFunc: (resultFuncArgs_0: {
+      isInteracting: boolean;
+      zoomData: readonly import("@mui/x-charts/internals").ZoomData[];
+    } | undefined) => Map<AxisId, import("@mui/x-charts/internals").ZoomData> | undefined;
+    memoizedResultFunc: ((resultFuncArgs_0: {
+      isInteracting: boolean;
+      zoomData: readonly import("@mui/x-charts/internals").ZoomData[];
+    } | undefined) => Map<AxisId, import("@mui/x-charts/internals").ZoomData> | undefined) & {
+      clearCache: () => void;
+      resultsCount: () => number;
+      resetResultsCount: () => void;
+    };
+    lastResult: () => Map<AxisId, import("@mui/x-charts/internals").ZoomData> | undefined;
+    dependencies: [(state: import("@mui/x-charts/internals").ChartState<[], [import("@mui/x-charts/internals").UseChartCartesianAxisSignature]>) => {
+      isInteracting: boolean;
+      zoomData: readonly import("@mui/x-charts/internals").ZoomData[];
+    } | undefined];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+  } & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+  }, (state: any, axisId: AxisId) => AxisId];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
 };

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

@@ -1,4 +1,5 @@
-import { createSelector, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { createSelector, selectorChartZoomMap, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 export const selectorChartZoomState = state => state.zoom;
 export const selectorChartZoomIsInteracting = createSelector(selectorChartZoomState, zoom => zoom.isInteracting);
-export const selectorChartZoomIsEnabled = createSelector(selectorChartZoomOptionsLookup, optionsLookup => Object.keys(optionsLookup).length > 0);
+export const selectorChartZoomIsEnabled = createSelector(selectorChartZoomOptionsLookup, optionsLookup => Object.keys(optionsLookup).length > 0);
+export const selectorChartAxisZoomData = createSelector([selectorChartZoomMap, (state, axisId) => axisId], (zoomMap, axisId) => zoomMap?.get(axisId));

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

@@ -1,4 +1,4 @@
-import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData } from '@mui/x-charts/internals';
+import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData, AxisId } from '@mui/x-charts/internals';
 export interface UseChartProZoomParameters {
   /**
    * The list of zoom data related to each axis.
@@ -42,7 +42,22 @@ export interface UseChartProZoomPublicApi {
    */
   setZoomData: (value: ZoomData[] | ((prev: ZoomData[]) => ZoomData[])) => void;
 }
-export interface UseChartProZoomInstance extends UseChartProZoomPublicApi {}
+export interface UseChartProZoomInstance extends UseChartProZoomPublicApi {
+  /**
+   * Translate the zoom range (i.e., both start and end) for a specific axis.
+   * @param {AxisId} axisId The id of the axis to move the zoom range for.
+   * @param {number} by The amount to move the zoom range by. Ranges from 0 to 100.
+   */
+  moveZoomRange: (axisId: AxisId, by: number) => void;
+  /**
+   * Zoom in the chart.
+   */
+  zoomIn: () => void;
+  /**
+   * Zoom out the chart.
+   */
+  zoomOut: () => void;
+}
 export type UseChartProZoomSignature = ChartPluginSignature<{
   params: UseChartProZoomParameters;
   defaultizedParams: UseChartProZoomDefaultizedParameters;

package/esm/internals/slots/chartBaseSlotProps.d.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+import { ChartBaseCommonProps } from '@mui/x-charts/models';
+export type ChartBaseTooltipProps = ChartBaseCommonProps & {
+  children: React.ReactElement<any, any>;
+  enterDelay?: number;
+  title: React.ReactNode;
+};
+export type ChartBaseIconButtonProps = ChartBaseCommonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+};

package/esm/internals/slots/chartBaseSlotProps.js

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

package/esm/internals/slots/chartsBaseSlots.d.ts

@@ -0,0 +1,6 @@
+import { ChartsBaseSlots } from '@mui/x-charts/models';
+import * as React from 'react';
+import { ChartBaseTooltipProps } from "./chartBaseSlotProps.js";
+export interface ChartsBaseSlotsPro extends ChartsBaseSlots {
+  baseTooltip: React.ComponentType<ChartBaseTooltipProps>;
+}

package/esm/internals/slots/chartsBaseSlots.js

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

package/esm/internals/slots/chartsIconSlots.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ChartBaseIconProps, ChartsIconSlots } from '@mui/x-charts/models';
+export interface ChartsIconSlotsPro extends ChartsIconSlots {
+  /**
+   * Icon displayed on the toolbar's zoom in button.
+   * @default ChartsZoomInIcon
+   */
+  zoomInIcon: React.ComponentType<ChartBaseIconProps>;
+  /**
+   * Icon displayed on the toolbar's zoom out button.
+   * @default ChartsZoomOutIcon
+   */
+  zoomOutIcon: React.ComponentType<ChartBaseIconProps>;
+}

package/esm/internals/slots/chartsIconSlots.js

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

package/esm/themeAugmentation/components.d.ts

@@ -1,19 +1,15 @@
 import { ComponentsProps, ComponentsOverrides } from '@mui/material/styles';
 export interface ChartsProComponents<Theme = unknown> {
-  // BarChartPro components
   MuiBarChartPro?: {
     defaultProps?: ComponentsProps['MuiBarChartPro'];
   };
-  // LineChartPro components
   MuiLineChartPro?: {
     defaultProps?: ComponentsProps['MuiLineChartPro'];
   };
-  // Heatmap components
   MuiHeatmap?: {
     defaultProps?: ComponentsProps['MuiHeatmap'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiHeatmap'];
   };
-  // ScatterChartPro components
   MuiScatterChartPro?: {
     defaultProps?: ComponentsProps['MuiScatterChartPro'];
   };

package/esm/themeAugmentation/components.js

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

package/esm/themeAugmentation/index.d.ts

@@ -1,4 +1,4 @@
 export type * from '@mui/x-charts/themeAugmentation';
-export type * from './overrides';
-export type * from './props';
-export type * from './components';
+export type * from "./overrides.js";
+export type * from "./props.js";
+export type * from "./components.js";

package/esm/themeAugmentation/overrides.d.ts

@@ -1,11 +1,8 @@
 import { HeatmapClassKey } from "../Heatmap/index.js";
 export interface ChartsProComponentNameToClassKey {
-  // Heatmap components
   MuiHeatmap: HeatmapClassKey;
 }
 declare module '@mui/material/styles' {
   interface ComponentNameToClassKey extends ChartsProComponentNameToClassKey {}
 }
-
-// disable automatic export
 export {};

package/esm/themeAugmentation/overrides.js

@@ -0,0 +1,2 @@
+// disable automatic export
+export {};

package/esm/themeAugmentation/props.d.ts

@@ -3,18 +3,12 @@ import { BarChartProProps } from "../BarChartPro/index.js";
 import { HeatmapProps } from "../Heatmap/Heatmap.js";
 import { LineChartProProps } from "../LineChartPro/index.js";
 export interface ChartsProComponentsPropsList {
-  // BarChartPro components
   MuiBarChartPro: BarChartProProps;
-  // LineChartPro components
   MuiLineChartPro: LineChartProProps;
-  // Heatmap components
   MuiHeatmap: HeatmapProps;
-  // ScatterChartPro components
   MuiScatterChartPro: ScatterChartProProps;
 }
 declare module '@mui/material/styles' {
   interface ComponentsPropsList extends ChartsProComponentsPropsList {}
 }
-
-// disable automatic export
 export {};

package/esm/themeAugmentation/props.js

@@ -0,0 +1,2 @@
+// disable automatic export
+export {};

package/esm/typeOverloads/modules.d.ts

@@ -1,7 +1,7 @@
 import { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
 import { AxisId, ZoomOptions } from '@mui/x-charts/internals';
-import { HeatmapItemIdentifier, HeatmapSeriesType, DefaultizedHeatmapSeriesType, HeatmapValueType } from "../models/seriesType/heatmap.js";
 import { DefaultizedFunnelSeriesType, FunnelItemIdentifier, FunnelSeriesType, FunnelValueType } from "../FunnelChart/funnel.types.js";
+import { HeatmapItemIdentifier, HeatmapSeriesType, DefaultizedHeatmapSeriesType, HeatmapValueType } from "../models/seriesType/heatmap.js";
 declare module '@mui/x-charts/internals' {
   interface ChartsSeriesConfig {
     heatmap: {

package/index.d.ts

@@ -25,6 +25,7 @@ export * from '@mui/x-charts/RadarChart';
 export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
+export { ZoomData, ZoomFilterMode, ZoomOptions, ZoomSliderOptions } from '@mui/x-charts/internals';
 export * from "./hooks/index.js";
 export * from "./Heatmap/index.js";
 export * from "./ChartContainerPro/index.js";
@@ -32,4 +33,6 @@ export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";
 export * from "./LineChartPro/index.js";
-export * from "./FunnelChart/index.js";
+export * from "./FunnelChart/index.js";
+export * from "./ChartZoomSlider/index.js";
+export * from "./ChartsToolbarPro/index.js";