@mui/x-charts-pro 8.15.0 → 8.17.0

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

@@ -12,9 +12,8 @@ export const usePanOnDrag = ({
 }, setZoomDataCallback) => {
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
-  const startRef = React.useRef(null);
-  const config = useSelector(store, selectorPanInteractionConfig, ['drag']);
-  const isPanOnDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && Boolean(config) || false, [optionsLookup, config]);
+  const config = useSelector(store, selectorPanInteractionConfig, 'drag');
+  const isPanOnDragEnabled = Object.values(optionsLookup).some(v => v.panning) && Boolean(config);
   React.useEffect(() => {
     if (!isPanOnDragEnabled) {
       return;
@@ -32,33 +31,42 @@ export const usePanOnDrag = ({
   // Add event for chart panning
   React.useEffect(() => {
     const element = svgRef.current;
+    let isInteracting = false;
+    const accumulatedChange = {
+      x: 0,
+      y: 0
+    };
     if (element === null || !isPanOnDragEnabled) {
       return () => {};
     }
     const handlePanStart = event => {
       if (!event.detail.target?.closest('[data-charts-zoom-slider]')) {
-        startRef.current = store.value.zoom.zoomData;
+        isInteracting = true;
       }
     };
     const handlePanEnd = () => {
-      startRef.current = null;
+      isInteracting = false;
     };
-    const throttledCallback = rafThrottle((event, zoomData) => {
-      const newZoomData = translateZoom(zoomData, {
-        x: event.detail.activeDeltaX,
-        y: -event.detail.activeDeltaY
+    const throttledCallback = rafThrottle(() => {
+      const x = accumulatedChange.x;
+      const y = accumulatedChange.y;
+      accumulatedChange.x = 0;
+      accumulatedChange.y = 0;
+      setZoomDataCallback(prev => translateZoom(prev, {
+        x,
+        y: -y
       }, {
         width: drawingArea.width,
         height: drawingArea.height
-      }, optionsLookup);
-      setZoomDataCallback(newZoomData);
+      }, optionsLookup));
     });
     const handlePan = event => {
-      const zoomData = startRef.current;
-      if (!zoomData) {
+      if (!isInteracting) {
         return;
       }
-      throttledCallback(event, zoomData);
+      accumulatedChange.x += event.detail.deltaX;
+      accumulatedChange.y += event.detail.deltaY;
+      throttledCallback();
     };
     const panHandler = instance.addInteractionListener('zoomPan', handlePan);
     const panStartHandler = instance.addInteractionListener('zoomPanStart', handlePanStart);
@@ -69,5 +77,5 @@ export const usePanOnDrag = ({
       panEndHandler.cleanup();
       throttledCallback.clear();
     };
-  }, [instance, svgRef, isPanOnDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, startRef]);
+  }, [instance, svgRef, isPanOnDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
 };

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

@@ -12,9 +12,13 @@ export const usePanOnPressAndDrag = ({
 }, setZoomDataCallback) => {
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
-  const startRef = React.useRef(null);
-  const config = useSelector(store, selectorPanInteractionConfig, ['pressAndDrag']);
-  const isPanOnPressAndDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && Boolean(config) || false, [optionsLookup, config]);
+  const isInteracting = React.useRef(false);
+  const accumulatedChange = React.useRef({
+    x: 0,
+    y: 0
+  });
+  const config = useSelector(store, selectorPanInteractionConfig, 'pressAndDrag');
+  const isPanOnPressAndDragEnabled = Object.values(optionsLookup).some(v => v.panning) && Boolean(config);
   React.useEffect(() => {
     if (!isPanOnPressAndDragEnabled) {
       return;
@@ -37,28 +41,36 @@ export const usePanOnPressAndDrag = ({
     }
     const handlePressAndDragStart = event => {
       if (!event.detail.target?.closest('[data-charts-zoom-slider]')) {
-        startRef.current = store.value.zoom.zoomData;
+        isInteracting.current = true;
+        accumulatedChange.current = {
+          x: 0,
+          y: 0
+        };
       }
     };
     const handlePressAndDragEnd = () => {
-      startRef.current = null;
+      isInteracting.current = false;
     };
-    const throttledCallback = rafThrottle((event, zoomData) => {
-      const newZoomData = translateZoom(zoomData, {
-        x: event.detail.activeDeltaX,
-        y: -event.detail.activeDeltaY
+    const throttledCallback = rafThrottle(() => {
+      const x = accumulatedChange.current.x;
+      const y = accumulatedChange.current.y;
+      accumulatedChange.current.x = 0;
+      accumulatedChange.current.y = 0;
+      setZoomDataCallback(prev => translateZoom(prev, {
+        x,
+        y: -y
       }, {
         width: drawingArea.width,
         height: drawingArea.height
-      }, optionsLookup);
-      setZoomDataCallback(newZoomData);
+      }, optionsLookup));
     });
     const handlePressAndDrag = event => {
-      const zoomData = startRef.current;
-      if (!zoomData) {
+      if (!isInteracting.current) {
         return;
       }
-      throttledCallback(event, zoomData);
+      accumulatedChange.current.x += event.detail.deltaX;
+      accumulatedChange.current.y += event.detail.deltaY;
+      throttledCallback();
     };
     const pressAndDragHandler = instance.addInteractionListener('zoomPressAndDrag', handlePressAndDrag);
     const pressAndDragStartHandler = instance.addInteractionListener('zoomPressAndDragStart', handlePressAndDragStart);
@@ -69,5 +81,5 @@ export const usePanOnPressAndDrag = ({
       pressAndDragEndHandler.cleanup();
       throttledCallback.clear();
     };
-  }, [instance, svgRef, isPanOnPressAndDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, startRef]);
+  }, [instance, svgRef, isPanOnPressAndDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, isInteracting]);
 };

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.d.ts

@@ -26,7 +26,7 @@ export declare function getHorizontalCenterRatio(point: {
 }, area: {
   left: number;
   width: number;
-}, reverse?: boolean): number;
+}, reverse: boolean): number;
 /**
  * Get the ratio of the point in the vertical center of the area.
  */
@@ -36,7 +36,7 @@ export declare function getVerticalCenterRatio(point: {
 }, area: {
   top: number;
   height: number;
-}, reverse?: boolean): number;
+}, reverse: boolean): number;
 /**
  * Translate the zoom data by a given movement.
  */

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.js

@@ -80,7 +80,7 @@ export function getWheelScaleRatio(event, step) {
 /**
  * Get the ratio of the point in the horizontal center of the area.
  */
-export function getHorizontalCenterRatio(point, area, reverse = false) {
+export function getHorizontalCenterRatio(point, area, reverse) {
   const {
     left,
     width
@@ -92,7 +92,7 @@ export function getHorizontalCenterRatio(point, area, reverse = false) {
 /**
  * Get the ratio of the point in the vertical center of the area.
  */
-export function getVerticalCenterRatio(point, area, reverse = false) {
+export function getVerticalCenterRatio(point, area, reverse) {
   const {
     top,
     height

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+export declare const useZoomOnBrush: ({
+  store,
+  instance,
+  svgRef
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<(prev: ZoomData[]) => ZoomData[]>) => void;

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

@@ -0,0 +1,100 @@
+'use client';
+
+import * as React from 'react';
+import { useSelector, getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid } from "./useZoom.utils.js";
+import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
+export const useZoomOnBrush = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const config = useSelector(store, selectorZoomInteractionConfig, 'brush');
+  const isZoomOnBrushEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
+  React.useEffect(() => {
+    instance.setZoomBrushEnabled(isZoomOnBrushEnabled);
+  }, [isZoomOnBrushEnabled, instance]);
+
+  // Zoom on brush
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isZoomOnBrushEnabled) {
+      return () => {};
+    }
+    const handleBrushEnd = event => {
+      // Convert the brush rectangle to zoom percentages for each axis
+      setZoomDataCallback(prev => {
+        const startPoint = getSVGPoint(element, {
+          clientX: event.detail.initialCentroid.x,
+          clientY: event.detail.initialCentroid.y
+        });
+        const endPoint = getSVGPoint(element, {
+          clientX: event.detail.centroid.x,
+          clientY: event.detail.centroid.y
+        });
+
+        // Calculate the brush rectangle
+        const minX = Math.min(startPoint.x, endPoint.x);
+        const maxX = Math.max(startPoint.x, endPoint.x);
+        const minY = Math.min(startPoint.y, endPoint.y);
+        const maxY = Math.max(startPoint.y, endPoint.y);
+        return prev.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          let startRatio;
+          let endRatio;
+          const reverse = option.reverse;
+          if (option.axisDirection === 'x') {
+            startRatio = getHorizontalCenterRatio({
+              x: minX,
+              y: 0
+            }, drawingArea, reverse);
+            endRatio = getHorizontalCenterRatio({
+              x: maxX,
+              y: 0
+            }, drawingArea, reverse);
+          } else {
+            startRatio = getVerticalCenterRatio({
+              x: 0,
+              y: maxY
+            }, drawingArea, reverse);
+            endRatio = getVerticalCenterRatio({
+              x: 0,
+              y: minY
+            }, drawingArea, reverse);
+          }
+
+          // Ensure start < end regardless of reverse
+          const minRatio = Math.min(startRatio, endRatio);
+          const maxRatio = Math.max(startRatio, endRatio);
+
+          // Calculate the new zoom range based on the current zoom state
+          // This is important: we need to map the brush selection ratios to the current zoom range
+          const currentStart = zoom.start;
+          const currentEnd = zoom.end;
+          const currentSpan = currentEnd - currentStart;
+          const newStart = currentStart + minRatio * currentSpan;
+          const newEnd = currentStart + maxRatio * currentSpan;
+          const clampedStart = Math.max(option.minStart, Math.min(option.maxEnd, newStart));
+          const clampedEnd = Math.max(option.minStart, Math.min(option.maxEnd, newEnd));
+          if (!isSpanValid(clampedStart, clampedEnd, true, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: clampedStart,
+            end: clampedEnd
+          };
+        });
+      });
+    };
+    const brushEndHandler = instance.addInteractionListener('brushEnd', handleBrushEnd);
+    return () => {
+      brushEndHandler.cleanup();
+    };
+  }, [svgRef, drawingArea, isZoomOnBrushEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+};

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnDoubleTapReset.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+export declare const useZoomOnDoubleTapReset: ({
+  store,
+  instance,
+  svgRef
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

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

@@ -0,0 +1,57 @@
+'use client';
+
+import * as React from 'react';
+import { useSelector, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
+export const useZoomOnDoubleTapReset = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const config = useSelector(store, selectorZoomInteractionConfig, 'doubleTapReset');
+  const isZoomOnDoubleTapResetEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
+  React.useEffect(() => {
+    if (!isZoomOnDoubleTapResetEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomDoubleTapReset', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [config, isZoomOnDoubleTapResetEnabled, instance]);
+
+  // Reset zoom on double tap
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isZoomOnDoubleTapResetEnabled) {
+      return () => {};
+    }
+    const handleDoubleTapReset = () => {
+      // Reset all axes to their default zoom state
+      setZoomDataCallback(prev => {
+        return prev.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+
+          // Reset to the full range (minStart to maxEnd)
+          return {
+            axisId: zoom.axisId,
+            start: option.minStart,
+            end: option.maxEnd
+          };
+        });
+      });
+    };
+    const doubleTapResetHandler = instance.addInteractionListener('zoomDoubleTapReset', handleDoubleTapReset);
+    return () => {
+      doubleTapResetHandler.cleanup();
+    };
+  }, [svgRef, isZoomOnDoubleTapResetEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+};

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

@@ -12,8 +12,8 @@ export const useZoomOnPinch = ({
 }, setZoomDataCallback) => {
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
-  const config = useSelector(store, selectorZoomInteractionConfig, ['pinch']);
-  const isZoomOnPinchEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
+  const config = useSelector(store, selectorZoomInteractionConfig, 'pinch');
+  const isZoomOnPinchEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     if (!isZoomOnPinchEnabled) {
       return;

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

@@ -12,8 +12,8 @@ export const useZoomOnTapAndDrag = ({
 }, setZoomDataCallback) => {
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
-  const config = useSelector(store, selectorZoomInteractionConfig, ['tapAndDrag']);
-  const isZoomOnTapAndDragEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
+  const config = useSelector(store, selectorZoomInteractionConfig, 'tapAndDrag');
+  const isZoomOnTapAndDragEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     if (!isZoomOnTapAndDragEnabled) {
       return;

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

@@ -14,8 +14,8 @@ export const useZoomOnWheel = ({
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
   const startedOutsideRef = React.useRef(false);
   const startedOutsideTimeoutRef = React.useRef(null);
-  const config = useSelector(store, selectorZoomInteractionConfig, ['wheel']);
-  const isZoomOnWheelEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && Boolean(config) || false, [optionsLookup, config]);
+  const config = useSelector(store, selectorZoomInteractionConfig, 'wheel');
+  const isZoomOnWheelEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
   React.useEffect(() => {
     if (!isZoomOnWheelEnabled) {
       return;

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

@@ -12,6 +12,8 @@ import { useZoomOnPinch } from "./gestureHooks/useZoomOnPinch.js";
 import { usePanOnDrag } from "./gestureHooks/usePanOnDrag.js";
 import { useZoomOnTapAndDrag } from "./gestureHooks/useZoomOnTapAndDrag.js";
 import { usePanOnPressAndDrag } from "./gestureHooks/usePanOnPressAndDrag.js";
+import { useZoomOnBrush } from "./gestureHooks/useZoomOnBrush.js";
+import { useZoomOnDoubleTapReset } from "./gestureHooks/useZoomOnDoubleTapReset.js";
 import { initializeZoomInteractionConfig } from "./initializeZoomInteractionConfig.js";
 import { initializeZoomData } from "./initializeZoomData.js";
 export const useChartProZoom = pluginData => {
@@ -27,68 +29,44 @@ export const useChartProZoom = pluginData => {
   const onZoomChange = useEventCallback(onZoomChangeProp ?? (() => {}));
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
   useEffectAfterFirstRender(() => {
-    store.update(prevState => {
-      return _extends({}, prevState, {
-        zoom: _extends({}, prevState.zoom, {
-          zoomInteractionConfig: initializeZoomInteractionConfig(zoomInteractionConfig)
-        })
-      });
-    });
+    store.set('zoom', _extends({}, store.state.zoom, {
+      zoomInteractionConfig: initializeZoomInteractionConfig(zoomInteractionConfig)
+    }));
   }, [store, zoomInteractionConfig]);
 
+  // This is debounced. We want to run it only once after the interaction ends.
+  const removeIsInteracting = React.useMemo(() => debounce(() => store.set('zoom', _extends({}, store.state.zoom, {
+    isInteracting: false
+  })), 166), [store]);
+
   // Manage controlled state
   React.useEffect(() => {
     if (paramsZoomData === undefined) {
-      return undefined;
+      return;
     }
-    store.update(prevState => {
-      if (process.env.NODE_ENV !== 'production' && !prevState.zoom.isControlled) {
-        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, {
-          isInteracting: true,
-          zoomData: paramsZoomData
-        })
-      });
-    });
-    const timeout = setTimeout(() => {
-      store.update(prevState => {
-        return _extends({}, prevState, {
-          zoom: _extends({}, prevState.zoom, {
-            isInteracting: false
-          })
-        });
-      });
-    }, 166);
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [store, paramsZoomData]);
-
-  // 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
-      })
-    });
-  }), 166), [store]);
+    if (process.env.NODE_ENV !== 'production' && !store.state.zoom.isControlled) {
+      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'));
+    }
+    store.set('zoom', _extends({}, store.state.zoom, {
+      isInteracting: true,
+      zoomData: paramsZoomData
+    }));
+    removeIsInteracting();
+  }, [store, paramsZoomData, removeIsInteracting]);
   const setZoomDataCallback = React.useCallback(zoomData => {
-    store.update(prevState => {
-      const newZoomData = typeof zoomData === 'function' ? zoomData([...prevState.zoom.zoomData]) : zoomData;
-      onZoomChange?.(newZoomData);
-      if (prevState.zoom.isControlled) {
-        return prevState;
-      }
+    const newZoomData = typeof zoomData === 'function' ? zoomData([...store.state.zoom.zoomData]) : zoomData;
+    onZoomChange(newZoomData);
+    if (store.state.zoom.isControlled) {
+      store.set('zoom', _extends({}, store.state.zoom, {
+        isInteracting: true
+      }));
+    } else {
+      store.set('zoom', _extends({}, store.state.zoom, {
+        isInteracting: true,
+        zoomData: newZoomData
+      }));
       removeIsInteracting();
-      return _extends({}, prevState, {
-        zoom: _extends({}, prevState.zoom, {
-          isInteracting: true,
-          zoomData: newZoomData
-        })
-      });
-    });
+    }
   }, [onZoomChange, store, removeIsInteracting]);
   const setAxisZoomData = React.useCallback((axisId, zoomData) => {
     setZoomDataCallback(prev => prev.map(prevZoom => {
@@ -138,6 +116,8 @@ export const useChartProZoom = pluginData => {
   useZoomOnWheel(pluginData, setZoomDataCallback);
   useZoomOnPinch(pluginData, setZoomDataCallback);
   useZoomOnTapAndDrag(pluginData, setZoomDataCallback);
+  useZoomOnBrush(pluginData, setZoomDataCallback);
+  useZoomOnDoubleTapReset(pluginData, setZoomDataCallback);
   const zoom = React.useCallback(step => {
     setZoomDataCallback(prev => prev.map(zoomData => {
       const zoomOptions = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), zoomData.axisId);

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

@@ -1,34 +1,18 @@
 import { AxisId, ChartRootSelector } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
-export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature>;
-export declare const selectorChartZoomIsInteracting: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature, 'zoom'>;
+export declare const selectorChartZoomIsInteracting: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & {
+}) => boolean;
+export declare const selectorChartZoomIsEnabled: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}, boolean, any[]>;
-export declare const selectorChartZoomIsEnabled: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+}) => boolean;
+export declare const selectorChartAxisZoomData: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & {
+}, axisId: AxisId) => import("@mui/x-charts/internals").ZoomData | undefined;
+export declare const selectorChartCanZoomOut: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & {
+}) => boolean;
+export declare const selectorChartCanZoomIn: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}, boolean, []>;
-export declare const selectorChartAxisZoomData: import("reselect").Selector<any, import("@mui/x-charts/internals").ZoomData | undefined, [axisId: AxisId]>;
-export declare const selectorChartCanZoomOut: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}, boolean, any[]>;
-export declare const selectorChartCanZoomIn: import("reselect").Selector<import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-} & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}, boolean, any[]>;
+}) => boolean;

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

@@ -2,7 +2,7 @@ import { createSelector, selectorChartZoomMap, selectorChartZoomOptionsLookup }
 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 selectorChartAxisZoomData = createSelector([selectorChartZoomMap, (state, axisId) => axisId], (zoomMap, axisId) => zoomMap?.get(axisId));
+export const selectorChartAxisZoomData = createSelector([selectorChartZoomMap], (zoomMap, axisId) => zoomMap?.get(axisId));
 export const selectorChartCanZoomOut = createSelector([selectorChartZoomState, selectorChartZoomOptionsLookup], (zoomState, zoomOptions) => {
   return zoomState.zoomData.every(zoomData => {
     const span = zoomData.end - zoomData.start;

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

@@ -1,4 +1,4 @@
-import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData, AxisId } from '@mui/x-charts/internals';
+import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData, AxisId, type UseChartBrushSignature } from '@mui/x-charts/internals';
 import { ZoomInteractionConfig, DefaultizedZoomInteractionConfig } from "./ZoomInteractionConfig.types.js";
 export interface UseChartProZoomParameters {
   /**
@@ -80,5 +80,5 @@ export type UseChartProZoomSignature = ChartPluginSignature<{
   state: UseChartProZoomState;
   publicAPI: UseChartProZoomPublicApi;
   instance: UseChartProZoomInstance;
-  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
+  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature, UseChartBrushSignature];
 }>;

package/esm/models/seriesType/heatmap.d.ts

@@ -1,7 +1,7 @@
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { CommonDefaultizedProps, CommonSeriesType, CartesianSeriesType } from '@mui/x-charts/internals';
 export type HeatmapValueType = readonly [number, number, number];
-export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType>, 'color'>, CartesianSeriesType {
+export interface HeatmapSeriesType extends Omit<CommonSeriesType<HeatmapValueType>, 'color' | 'colorGetter'>, CartesianSeriesType {
   type: 'heatmap';
   /**
    * Data associated to each bar.

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.15.0
+ * @mui/x-charts-pro v8.17.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/internals/material/components/BaseMenuItem.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
 import { ChartBaseMenuItemProps } from "../../slots/chartBaseSlotProps.js";
-export declare function BaseMenuItem(props: ChartBaseMenuItemProps): React.JSX.Element;
+export declare function BaseMenuItem(props: ChartBaseMenuItemProps): import("react/jsx-runtime").JSX.Element;

package/internals/material/components/BaseMenuItem.js

@@ -1,14 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BaseMenuItem = BaseMenuItem;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));