@mui/x-charts-pro 8.0.0-beta.2 → 8.0.0

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.0.0-beta.2
+ * @mui/x-charts-pro v8.0.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

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 useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useSelector, getSVGPoint, selectorChartDrawingArea, createZoomLookup, selectorChartZoomOptionsLookup } 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 { 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.
 function initializeZoomData(options) {
   return Object.values(options).map(({
@@ -26,15 +27,15 @@ export const useChartProZoom = ({
 }) => {
   const {
     zoomData: paramsZoomData,
-    onZoomChange
+    onZoomChange: onZoomChangeProp
   } = params;
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
   const isZoomEnabled = Object.keys(optionsLookup).length > 0;
+  const onZoomChange = useEventCallback(onZoomChangeProp ?? (() => {}));
 
   // Manage controlled state
-
-  useEnhancedEffect(() => {
+  React.useEffect(() => {
     if (paramsZoomData === undefined) {
       return undefined;
     }
@@ -63,34 +64,44 @@ export const useChartProZoom = ({
     };
   }, [store, paramsZoomData]);
 
-  // Add instance methods
-  const setIsInteracting = React.useCallback(isInteracting => {
-    store.update(prev => _extends({}, prev, {
-      zoom: _extends({}, prev.zoom, {
-        isInteracting
+  // This is debounced. We want to run it only once after the interaction ends.
+  const removeIsInteracting = React.useMemo(() => debounce(() => store.update(prevState => {
+    return _extends({}, prevState, {
+      zoom: _extends({}, prevState.zoom, {
+        isInteracting: false
       })
-    }));
-  }, [store]);
-  const setZoomDataCallback = React.useCallback(zoomData => {
+    });
+  }), 166), [store]);
+
+  // This is throttled. We want to run it at most once per frame.
+  // By joining the two, we ensure that interacting and zooming are in sync.
+  const setZoomDataCallback = React.useMemo(() => rafThrottle(zoomData => {
     store.update(prevState => {
       const newZoomData = typeof zoomData === 'function' ? zoomData([...prevState.zoom.zoomData]) : zoomData;
       onZoomChange?.(newZoomData);
       if (prevState.zoom.isControlled) {
         return prevState;
       }
+      removeIsInteracting();
       return _extends({}, prevState, {
         zoom: _extends({}, prevState.zoom, {
+          isInteracting: true,
           zoomData: newZoomData
         })
       });
     });
-  }, [onZoomChange, store]);
+  }), [onZoomChange, store, removeIsInteracting]);
+  React.useEffect(() => {
+    return () => {
+      setZoomDataCallback.clear();
+      removeIsInteracting.clear();
+    };
+  }, [setZoomDataCallback, removeIsInteracting]);
 
   // Add events
   const panningEventCacheRef = React.useRef([]);
   const zoomEventCacheRef = React.useRef([]);
   const eventPrevDiff = React.useRef(0);
-  const interactionTimeoutRef = React.useRef(undefined);
 
   // Add event for chart panning
   const isPanEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) || false, [optionsLookup]);
@@ -154,7 +165,6 @@ export const useChartProZoom = ({
         event.preventDefault();
       }
       isDraggingRef.current = true;
-      setIsInteracting(true);
       touchStartRef.current = {
         x: point.x,
         y: point.y,
@@ -163,7 +173,6 @@ export const useChartProZoom = ({
     };
     const handleUp = event => {
       panningEventCacheRef.current.splice(panningEventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
-      setIsInteracting(false);
       isDraggingRef.current = false;
       touchStartRef.current = null;
     };
@@ -179,7 +188,7 @@ export const useChartProZoom = ({
       document.removeEventListener('pointercancel', handleUp);
       document.removeEventListener('pointerleave', handleUp);
     };
-  }, [instance, svgRef, isDraggingRef, setIsInteracting, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
+  }, [instance, svgRef, isDraggingRef, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
 
   // Add event for chart zoom in/out
   React.useEffect(() => {
@@ -196,15 +205,6 @@ export const useChartProZoom = ({
         return;
       }
       event.preventDefault();
-      if (interactionTimeoutRef.current) {
-        clearTimeout(interactionTimeoutRef.current);
-      }
-      setIsInteracting(true);
-      // Debounce transition to `isInteractive=false`.
-      // Useful because wheel events don't have an "end" event.
-      interactionTimeoutRef.current = window.setTimeout(() => {
-        setIsInteracting(false);
-      }, 166);
       setZoomDataCallback(prevZoomData => {
         return prevZoomData.map(zoom => {
           const option = optionsLookup[zoom.axisId];
@@ -230,7 +230,6 @@ export const useChartProZoom = ({
     };
     function pointerDownHandler(event) {
       zoomEventCacheRef.current.push(event);
-      setIsInteracting(true);
     }
     function pointerMoveHandler(event) {
       if (element === null) {
@@ -281,9 +280,6 @@ export const useChartProZoom = ({
       if (zoomEventCacheRef.current.length < 2) {
         eventPrevDiff.current = 0;
       }
-      if (event.type === 'pointerup' || event.type === 'pointercancel') {
-        setIsInteracting(false);
-      }
     }
     element.addEventListener('wheel', wheelHandler);
     element.addEventListener('pointerdown', pointerDownHandler);
@@ -306,11 +302,8 @@ export const useChartProZoom = ({
       element.removeEventListener('pointerleave', pointerUpHandler);
       element.removeEventListener('touchstart', preventDefault);
       element.removeEventListener('touchmove', preventDefault);
-      if (interactionTimeoutRef.current) {
-        clearTimeout(interactionTimeoutRef.current);
-      }
     };
-  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, setIsInteracting, instance, setZoomDataCallback]);
+  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback]);
   return {
     publicAPI: {
       setZoomData: setZoomDataCallback

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

@@ -1,7 +1,7 @@
 import { 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("./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").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean) & {
   clearCache: () => void;
@@ -32,7 +32,7 @@ export declare const selectorChartZoomIsInteracting: ((state: import("@mui/x-cha
   argsMemoize: typeof import("reselect").weakMapMemoize;
   memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartZoomIsEnabled: ((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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomIsEnabled: ((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;
 }) => boolean) & {
   clearCache: () => void;
@@ -52,7 +52,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
     resetResultsCount: () => void;
   };
   lastResult: () => boolean;
-  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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+  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;
   }) => {
     [x: string]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
@@ -78,7 +78,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
       [x: string]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
       [x: number]: 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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+    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>) & {
       clearCache: () => void;
@@ -92,7 +92,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
         resetResultsCount: () => void;
       };
       lastResult: () => Record<import("@mui/x-charts/internals").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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+      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) & {
         clearCache: () => void;
@@ -131,7 +131,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
     } & {
       memoize: typeof import("reselect").weakMapMemoize;
       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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+    }, ((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>) & {
       clearCache: () => void;
@@ -145,7 +145,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
         resetResultsCount: () => void;
       };
       lastResult: () => Record<import("@mui/x-charts/internals").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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+      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) & {
         clearCache: () => void;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.0.0-beta.2
+ * @mui/x-charts-pro v8.0.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -9,8 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChartProZoom = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 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 _useChartProZoom = require("./useChartProZoom.utils");
 // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
 function initializeZoomData(options) {
@@ -32,15 +34,15 @@ const useChartProZoom = ({
 }) => {
   const {
     zoomData: paramsZoomData,
-    onZoomChange
+    onZoomChange: onZoomChangeProp
   } = params;
   const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
   const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
   const isZoomEnabled = Object.keys(optionsLookup).length > 0;
+  const onZoomChange = (0, _utils.useEventCallback)(onZoomChangeProp ?? (() => {}));
 
   // Manage controlled state
-
-  (0, _useEnhancedEffect.default)(() => {
+  React.useEffect(() => {
     if (paramsZoomData === undefined) {
       return undefined;
     }
@@ -69,34 +71,44 @@ const useChartProZoom = ({
     };
   }, [store, paramsZoomData]);
 
-  // Add instance methods
-  const setIsInteracting = React.useCallback(isInteracting => {
-    store.update(prev => (0, _extends2.default)({}, prev, {
-      zoom: (0, _extends2.default)({}, prev.zoom, {
-        isInteracting
+  // This is debounced. We want to run it only once after the interaction ends.
+  const removeIsInteracting = React.useMemo(() => (0, _debounce.default)(() => store.update(prevState => {
+    return (0, _extends2.default)({}, prevState, {
+      zoom: (0, _extends2.default)({}, prevState.zoom, {
+        isInteracting: false
       })
-    }));
-  }, [store]);
-  const setZoomDataCallback = React.useCallback(zoomData => {
+    });
+  }), 166), [store]);
+
+  // This is throttled. We want to run it at most once per frame.
+  // By joining the two, we ensure that interacting and zooming are in sync.
+  const setZoomDataCallback = React.useMemo(() => (0, _rafThrottle.rafThrottle)(zoomData => {
     store.update(prevState => {
       const newZoomData = typeof zoomData === 'function' ? zoomData([...prevState.zoom.zoomData]) : zoomData;
       onZoomChange?.(newZoomData);
       if (prevState.zoom.isControlled) {
         return prevState;
       }
+      removeIsInteracting();
       return (0, _extends2.default)({}, prevState, {
         zoom: (0, _extends2.default)({}, prevState.zoom, {
+          isInteracting: true,
           zoomData: newZoomData
         })
       });
     });
-  }, [onZoomChange, store]);
+  }), [onZoomChange, store, removeIsInteracting]);
+  React.useEffect(() => {
+    return () => {
+      setZoomDataCallback.clear();
+      removeIsInteracting.clear();
+    };
+  }, [setZoomDataCallback, removeIsInteracting]);
 
   // Add events
   const panningEventCacheRef = React.useRef([]);
   const zoomEventCacheRef = React.useRef([]);
   const eventPrevDiff = React.useRef(0);
-  const interactionTimeoutRef = React.useRef(undefined);
 
   // Add event for chart panning
   const isPanEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) || false, [optionsLookup]);
@@ -160,7 +172,6 @@ const useChartProZoom = ({
         event.preventDefault();
       }
       isDraggingRef.current = true;
-      setIsInteracting(true);
       touchStartRef.current = {
         x: point.x,
         y: point.y,
@@ -169,7 +180,6 @@ const useChartProZoom = ({
     };
     const handleUp = event => {
       panningEventCacheRef.current.splice(panningEventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
-      setIsInteracting(false);
       isDraggingRef.current = false;
       touchStartRef.current = null;
     };
@@ -185,7 +195,7 @@ const useChartProZoom = ({
       document.removeEventListener('pointercancel', handleUp);
       document.removeEventListener('pointerleave', handleUp);
     };
-  }, [instance, svgRef, isDraggingRef, setIsInteracting, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
+  }, [instance, svgRef, isDraggingRef, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
 
   // Add event for chart zoom in/out
   React.useEffect(() => {
@@ -202,15 +212,6 @@ const useChartProZoom = ({
         return;
       }
       event.preventDefault();
-      if (interactionTimeoutRef.current) {
-        clearTimeout(interactionTimeoutRef.current);
-      }
-      setIsInteracting(true);
-      // Debounce transition to `isInteractive=false`.
-      // Useful because wheel events don't have an "end" event.
-      interactionTimeoutRef.current = window.setTimeout(() => {
-        setIsInteracting(false);
-      }, 166);
       setZoomDataCallback(prevZoomData => {
         return prevZoomData.map(zoom => {
           const option = optionsLookup[zoom.axisId];
@@ -236,7 +237,6 @@ const useChartProZoom = ({
     };
     function pointerDownHandler(event) {
       zoomEventCacheRef.current.push(event);
-      setIsInteracting(true);
     }
     function pointerMoveHandler(event) {
       if (element === null) {
@@ -287,9 +287,6 @@ const useChartProZoom = ({
       if (zoomEventCacheRef.current.length < 2) {
         eventPrevDiff.current = 0;
       }
-      if (event.type === 'pointerup' || event.type === 'pointercancel') {
-        setIsInteracting(false);
-      }
     }
     element.addEventListener('wheel', wheelHandler);
     element.addEventListener('pointerdown', pointerDownHandler);
@@ -312,11 +309,8 @@ const useChartProZoom = ({
       element.removeEventListener('pointerleave', pointerUpHandler);
       element.removeEventListener('touchstart', _useChartProZoom.preventDefault);
       element.removeEventListener('touchmove', _useChartProZoom.preventDefault);
-      if (interactionTimeoutRef.current) {
-        clearTimeout(interactionTimeoutRef.current);
-      }
     };
-  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, setIsInteracting, instance, setZoomDataCallback]);
+  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback]);
   return {
     publicAPI: {
       setZoomData: setZoomDataCallback

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

@@ -1,7 +1,7 @@
 import { 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("./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").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean) & {
   clearCache: () => void;
@@ -32,7 +32,7 @@ export declare const selectorChartZoomIsInteracting: ((state: import("@mui/x-cha
   argsMemoize: typeof import("reselect").weakMapMemoize;
   memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartZoomIsEnabled: ((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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomIsEnabled: ((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;
 }) => boolean) & {
   clearCache: () => void;
@@ -52,7 +52,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
     resetResultsCount: () => void;
   };
   lastResult: () => boolean;
-  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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+  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;
   }) => {
     [x: string]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
@@ -78,7 +78,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
       [x: string]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
       [x: number]: 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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+    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>) & {
       clearCache: () => void;
@@ -92,7 +92,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
         resetResultsCount: () => void;
       };
       lastResult: () => Record<import("@mui/x-charts/internals").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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+      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) & {
         clearCache: () => void;
@@ -131,7 +131,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
     } & {
       memoize: typeof import("reselect").weakMapMemoize;
       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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+    }, ((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>) & {
       clearCache: () => void;
@@ -145,7 +145,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
         resetResultsCount: () => void;
       };
       lastResult: () => Record<import("@mui/x-charts/internals").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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+      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) & {
         clearCache: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0",
   "description": "The Pro plan edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -29,22 +29,20 @@
     "directory": "packages/x-charts-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.10",
-    "@mui/utils": "^7.0.0 || ^7.0.0-beta",
-    "@react-spring/rafz": "^9.7.5",
-    "@react-spring/web": "^9.7.5",
+    "@babel/runtime": "^7.27.0",
+    "@mui/utils": "^7.0.2",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-internals": "8.0.0-beta.2",
-    "@mui/x-charts": "8.0.0-beta.2",
-    "@mui/x-charts-vendor": "8.0.0-beta.1",
-    "@mui/x-license": "8.0.0-beta.2"
+    "@mui/x-charts-vendor": "8.0.0",
+    "@mui/x-license": "8.0.0",
+    "@mui/x-charts": "8.0.0",
+    "@mui/x-internals": "8.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta",
+    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
@@ -71,10 +69,6 @@
       "import": {
         "types": "./esm/index.d.ts",
         "default": "./esm/index.js"
-      },
-      "mui-modern": {
-        "types": "./modern/index.d.ts",
-        "default": "./modern/index.js"
       }
     },
     "./*": {
@@ -85,10 +79,6 @@
       "import": {
         "types": "./esm/*/index.d.ts",
         "default": "./esm/*/index.js"
-      },
-      "mui-modern": {
-        "types": "./modern/*/index.d.ts",
-        "default": "./modern/*/index.js"
       }
     },
     "./esm": null,