@mui/x-charts-pro 8.2.0 → 8.3.0

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

@@ -0,0 +1,23 @@
+import { DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+/**
+ * Calculates the new zoom range based on the current zoom, step, and constraints.
+ *
+ * A step of 0.1 or -0.1 means that 10% of the current range will be subtracted/added, respectively, and assuming no
+ * constraints (e.g., minSpan, maxEnd) are faced.
+ *
+ * @param zoom Current zoom range with start and end values.
+ * @param step Percentage of the current zoom range to adjust (positive to zoom in, negative to zoom out). Ranges from 0 to 1.
+ * @param minSpan Minimum allowed span between start and end values.
+ * @param maxSpan Maximum allowed span between start and end values.
+ * @param minStart Minimum allowed start value.
+ * @param maxEnd Maximum allowed end value.
+ */
+export declare function calculateZoom<T extends Readonly<Pick<ZoomData, 'start' | 'end'>>>(zoom: T, step: number, {
+  minSpan,
+  maxSpan,
+  minStart,
+  maxEnd
+}: Pick<DefaultizedZoomOptions, 'minSpan' | 'maxSpan' | 'minStart' | 'maxEnd'>): T & {
+  start: number;
+  end: number;
+};

package/internals/plugins/useChartProZoom/calculateZoom.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateZoom = calculateZoom;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+/**
+ * Calculates the new zoom range based on the current zoom, step, and constraints.
+ *
+ * A step of 0.1 or -0.1 means that 10% of the current range will be subtracted/added, respectively, and assuming no
+ * constraints (e.g., minSpan, maxEnd) are faced.
+ *
+ * @param zoom Current zoom range with start and end values.
+ * @param step Percentage of the current zoom range to adjust (positive to zoom in, negative to zoom out). Ranges from 0 to 1.
+ * @param minSpan Minimum allowed span between start and end values.
+ * @param maxSpan Maximum allowed span between start and end values.
+ * @param minStart Minimum allowed start value.
+ * @param maxEnd Maximum allowed end value.
+ */
+function calculateZoom(zoom, step, {
+  minSpan,
+  maxSpan,
+  minStart,
+  maxEnd
+}) {
+  const span = zoom.end - zoom.start;
+  let delta = span * step / 2;
+  if (delta > 0) {
+    delta = Math.min(delta, (span - minSpan) / 2);
+  } else {
+    delta = Math.max(delta, (span - maxSpan) / 2);
+  }
+  return (0, _extends2.default)({}, zoom, {
+    start: Math.max(minStart, zoom.start + delta),
+    end: Math.min(maxEnd, zoom.end - delta)
+  });
+}

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

@@ -1,4 +1,4 @@
 import { ChartPlugin, AxisId, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
-export declare function initializeZoomData(options: Record<AxisId, DefaultizedZoomOptions>, zoomData?: readonly ZoomData[]): ZoomData[];
+export declare function initializeZoomData(options: Record<AxisId, Pick<DefaultizedZoomOptions, 'axisId' | 'minStart' | 'maxEnd'>>, zoomData?: readonly ZoomData[]): ZoomData[];
 export declare const useChartProZoom: ChartPlugin<UseChartProZoomSignature>;

package/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -14,6 +14,7 @@ var _internals = require("@mui/x-charts/internals");
 var _utils = require("@mui/material/utils");
 var _rafThrottle = require("@mui/x-internals/rafThrottle");
 var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
+var _calculateZoom = require("./calculateZoom");
 var _useChartProZoom = require("./useChartProZoom.utils");
 // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
 function initializeZoomData(options, zoomData) {
@@ -108,6 +109,34 @@ 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 (0, _extends2.default)({}, zoom, {
+          start,
+          end
+        });
+      });
+    });
+  }, [optionsLookup, setZoomDataCallback]);
   React.useEffect(() => {
     return () => {
       removeIsInteracting.clear();
@@ -334,12 +363,25 @@ const useChartProZoom = ({
       rafThrottledSetZoomData.clear();
     };
   }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback]);
+  const zoom = React.useCallback(step => {
+    setZoomDataCallback(prev => prev.map(zoomData => {
+      const zoomOptions = (0, _internals.selectorChartAxisZoomOptionsLookup)(store.getSnapshot(), zoomData.axisId);
+      return (0, _calculateZoom.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/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts

@@ -1,4 +1,4 @@
-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.js").UseChartProZoomState & Partial<{}> & {
@@ -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,18 +80,18 @@ 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/internals").DefaultedXAxis[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
-      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedXAxis[] | 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/internals").DefaultedXAxis[] | undefined) & {
@@ -133,18 +133,18 @@ 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/internals").DefaultedYAxis[] | undefined) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
-      memoizedResultFunc: ((resultFuncArgs_0: import("@mui/x-charts/internals").DefaultedYAxis[] | 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/internals").DefaultedYAxis[] | undefined) & {
@@ -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/internals/plugins/useChartProZoom/useChartProZoom.selectors.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartZoomState = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomIsEnabled = void 0;
+exports.selectorChartZoomState = exports.selectorChartZoomIsInteracting = exports.selectorChartZoomIsEnabled = exports.selectorChartAxisZoomData = void 0;
 var _internals = require("@mui/x-charts/internals");
 const selectorChartZoomState = state => state.zoom;
 exports.selectorChartZoomState = selectorChartZoomState;
 const selectorChartZoomIsInteracting = exports.selectorChartZoomIsInteracting = (0, _internals.createSelector)(selectorChartZoomState, zoom => zoom.isInteracting);
-const selectorChartZoomIsEnabled = exports.selectorChartZoomIsEnabled = (0, _internals.createSelector)(_internals.selectorChartZoomOptionsLookup, optionsLookup => Object.keys(optionsLookup).length > 0);
+const selectorChartZoomIsEnabled = exports.selectorChartZoomIsEnabled = (0, _internals.createSelector)(_internals.selectorChartZoomOptionsLookup, optionsLookup => Object.keys(optionsLookup).length > 0);
+const selectorChartAxisZoomData = exports.selectorChartAxisZoomData = (0, _internals.createSelector)([_internals.selectorChartZoomMap, (state, axisId) => axisId], (zoomMap, axisId) => zoomMap?.get(axisId));

package/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/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/internals/slots/chartBaseSlotProps.js

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

package/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/internals/slots/chartsBaseSlots.js

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

package/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/internals/slots/chartsIconSlots.js

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.2.0",
-  "description": "The Pro plan edition of the Charts components (MUI X).",
+  "version": "8.3.0",
   "author": "MUI Team",
+  "description": "The Pro plan edition of the MUI X Charts components.",
   "main": "./index.js",
   "license": "SEE LICENSE IN LICENSE",
   "bugs": {
@@ -29,14 +29,14 @@
     "directory": "packages/x-charts-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.0",
+    "@babel/runtime": "^7.27.1",
     "@mui/utils": "^7.0.2",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts": "8.2.0",
-    "@mui/x-internals": "8.2.0",
-    "@mui/x-charts-vendor": "8.0.0",
-    "@mui/x-license": "8.2.0"
+    "@mui/x-internals": "8.3.0",
+    "@mui/x-license": "8.3.0",
+    "@mui/x-charts": "8.3.0",
+    "@mui/x-charts-vendor": "8.3.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/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/FunnelChart/curves/funnelStep.d.ts

@@ -1,25 +0,0 @@
-import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
-/**
- * This is a custom "step" curve generator for the funnel chart.
- * It is used to draw the funnel using "rectangles" without having to rework the rendering logic.
- *
- * It takes into account the gap between the points and draws a smooth curve between them.
- *
- * It is based on the d3-shape step curve generator.
- * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
- */
-export declare class FunnelStep implements CurveGenerator {
-  private context;
-  private line;
-  private x;
-  private y;
-  private currentPoint;
-  private isHorizontal;
-  private gap;
-  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
-  areaStart(): void;
-  areaEnd(): void;
-  lineStart(): void;
-  lineEnd(): void;
-  point(x: number, y: number): void;
-}

package/FunnelChart/curves/funnelStep.js

@@ -1,87 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FunnelStep = void 0;
-/**
- * This is a custom "step" curve generator for the funnel chart.
- * It is used to draw the funnel using "rectangles" without having to rework the rendering logic.
- *
- * It takes into account the gap between the points and draws a smooth curve between them.
- *
- * It is based on the d3-shape step curve generator.
- * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
- */
-class FunnelStep {
-  constructor(context, isHorizontal, gap = 0) {
-    this.context = void 0;
-    this.line = NaN;
-    this.x = NaN;
-    this.y = NaN;
-    this.currentPoint = 0;
-    this.isHorizontal = false;
-    this.gap = 0;
-    this.context = context;
-    this.isHorizontal = isHorizontal;
-    this.gap = gap / 2;
-  }
-  areaStart() {
-    this.line = 0;
-  }
-  areaEnd() {
-    this.line = NaN;
-  }
-  lineStart() {
-    this.x = NaN;
-    this.y = NaN;
-    this.currentPoint = 0;
-  }
-  lineEnd() {
-    if (this.currentPoint === 2) {
-      this.context.lineTo(this.x, this.y);
-    }
-    if (this.line || this.line !== 0 && this.currentPoint === 1) {
-      this.context.closePath();
-    }
-    if (this.line >= 0) {
-      this.line = 1 - this.line;
-    }
-  }
-  point(x, y) {
-    x = +x;
-    y = +y;
-
-    // 0 is the top-left corner.
-    if (this.isHorizontal) {
-      if (this.currentPoint === 0) {
-        this.context.moveTo(x + this.gap, y);
-      } else if (this.currentPoint === 1 || this.currentPoint === 2) {
-        this.context.lineTo(x - this.gap, this.y);
-        this.context.lineTo(x - this.gap, y);
-      } else {
-        this.context.lineTo(this.x - this.gap, y);
-        this.context.lineTo(x + this.gap, y);
-      }
-      this.currentPoint += 1;
-      this.x = x;
-      this.y = y;
-      return;
-    }
-
-    // 0 is the top-right corner.
-    if (this.currentPoint === 0) {
-      this.context.moveTo(x, y + this.gap);
-    } else if (this.currentPoint === 3) {
-      this.context.lineTo(x, this.y - this.gap);
-      this.context.lineTo(x, y + this.gap);
-    } else {
-      this.context.lineTo(this.x, y - this.gap);
-      this.context.lineTo(x, y - this.gap);
-    }
-    this.currentPoint += 1;
-    this.x = x;
-    this.y = y;
-  }
-}
-exports.FunnelStep = FunnelStep;

package/esm/FunnelChart/curves/funnelStep.d.ts

@@ -1,25 +0,0 @@
-import { CurveGenerator } from '@mui/x-charts-vendor/d3-shape';
-/**
- * This is a custom "step" curve generator for the funnel chart.
- * It is used to draw the funnel using "rectangles" without having to rework the rendering logic.
- *
- * It takes into account the gap between the points and draws a smooth curve between them.
- *
- * It is based on the d3-shape step curve generator.
- * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
- */
-export declare class FunnelStep implements CurveGenerator {
-  private context;
-  private line;
-  private x;
-  private y;
-  private currentPoint;
-  private isHorizontal;
-  private gap;
-  constructor(context: CanvasRenderingContext2D, isHorizontal: boolean, gap?: number);
-  areaStart(): void;
-  areaEnd(): void;
-  lineStart(): void;
-  lineEnd(): void;
-  point(x: number, y: number): void;
-}

package/esm/FunnelChart/curves/funnelStep.js

@@ -1,80 +0,0 @@
-/**
- * This is a custom "step" curve generator for the funnel chart.
- * It is used to draw the funnel using "rectangles" without having to rework the rendering logic.
- *
- * It takes into account the gap between the points and draws a smooth curve between them.
- *
- * It is based on the d3-shape step curve generator.
- * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/step.js
- */
-export class FunnelStep {
-  constructor(context, isHorizontal, gap = 0) {
-    this.context = void 0;
-    this.line = NaN;
-    this.x = NaN;
-    this.y = NaN;
-    this.currentPoint = 0;
-    this.isHorizontal = false;
-    this.gap = 0;
-    this.context = context;
-    this.isHorizontal = isHorizontal;
-    this.gap = gap / 2;
-  }
-  areaStart() {
-    this.line = 0;
-  }
-  areaEnd() {
-    this.line = NaN;
-  }
-  lineStart() {
-    this.x = NaN;
-    this.y = NaN;
-    this.currentPoint = 0;
-  }
-  lineEnd() {
-    if (this.currentPoint === 2) {
-      this.context.lineTo(this.x, this.y);
-    }
-    if (this.line || this.line !== 0 && this.currentPoint === 1) {
-      this.context.closePath();
-    }
-    if (this.line >= 0) {
-      this.line = 1 - this.line;
-    }
-  }
-  point(x, y) {
-    x = +x;
-    y = +y;
-
-    // 0 is the top-left corner.
-    if (this.isHorizontal) {
-      if (this.currentPoint === 0) {
-        this.context.moveTo(x + this.gap, y);
-      } else if (this.currentPoint === 1 || this.currentPoint === 2) {
-        this.context.lineTo(x - this.gap, this.y);
-        this.context.lineTo(x - this.gap, y);
-      } else {
-        this.context.lineTo(this.x - this.gap, y);
-        this.context.lineTo(x + this.gap, y);
-      }
-      this.currentPoint += 1;
-      this.x = x;
-      this.y = y;
-      return;
-    }
-
-    // 0 is the top-right corner.
-    if (this.currentPoint === 0) {
-      this.context.moveTo(x, y + this.gap);
-    } else if (this.currentPoint === 3) {
-      this.context.lineTo(x, this.y - this.gap);
-      this.context.lineTo(x, y + this.gap);
-    } else {
-      this.context.lineTo(this.x, y - this.gap);
-      this.context.lineTo(x, y - this.gap);
-    }
-    this.currentPoint += 1;
-    this.x = x;
-    this.y = y;
-  }
-}