@mui/x-charts-pro 8.18.0 → 8.20.0

package/esm/SankeyChart/plugins/useSankeyHighlight.selectors.js

@@ -1,7 +1,7 @@
-import { createSelector } from '@mui/x-charts/internals';
+import { createSelector } from '@mui/x-internals/store';
+import { selectorChartSeriesProcessed } from '@mui/x-charts/internals';
 const selectorSankeyHighlight = state => state.highlight;
-const selectSeries = state => state.series;
-const selectorSankeySeries = createSelector([selectSeries], series => series.processedSeries.sankey?.series[series.processedSeries.sankey?.seriesOrder[0]] || null);
+const selectorSankeySeries = createSelector(selectorChartSeriesProcessed, processedSeries => processedSeries.sankey?.series[processedSeries.sankey?.seriesOrder[0]] || null);
 const DEFAULT_NODE_HIGHLIGHT = 'links';
 const DEFAULT_LINK_HIGHLIGHT = 'links';
 const DEFAULT_FADE = 'none';
@@ -10,32 +10,32 @@ const DEFAULT_FADE = 'none';
  * Get the node highlight configuration from the Sankey series.
  * Defaults to 'nodes' if not specified.
  */
-export const selectorNodeHighlightConfig = createSelector([selectorSankeySeries], series => series?.nodeOptions?.highlight ?? DEFAULT_NODE_HIGHLIGHT);
+export const selectorNodeHighlightConfig = createSelector(selectorSankeySeries, series => series?.nodeOptions?.highlight ?? DEFAULT_NODE_HIGHLIGHT);
 
 /**
  * Get the node fade configuration from the Sankey series.
  * Defaults to 'none' if not specified.
  */
-export const selectorNodeFadeConfig = createSelector([selectorSankeySeries], series => series?.nodeOptions?.fade ?? DEFAULT_FADE);
+export const selectorNodeFadeConfig = createSelector(selectorSankeySeries, series => series?.nodeOptions?.fade ?? DEFAULT_FADE);
 
 /**
  * Get the link highlight configuration from the Sankey series.
  * Defaults to 'links' if not specified.
  */
-export const selectorLinkHighlightConfig = createSelector([selectorSankeySeries], series => series?.linkOptions?.highlight ?? DEFAULT_LINK_HIGHLIGHT);
+export const selectorLinkHighlightConfig = createSelector(selectorSankeySeries, series => series?.linkOptions?.highlight ?? DEFAULT_LINK_HIGHLIGHT);
 
 /**
  * Get the link fade configuration from the Sankey series.
  * Defaults to 'none' if not specified.
  */
-export const selectorLinkFadeConfig = createSelector([selectorSankeySeries], series => series?.linkOptions?.fade ?? DEFAULT_FADE);
+export const selectorLinkFadeConfig = createSelector(selectorSankeySeries, series => series?.linkOptions?.fade ?? DEFAULT_FADE);
 
 /**
  * Get the currently highlighted item in the Sankey chart.
  * @param {UseSankeyHighlightSignature['state']} state The state of the chart.
  * @returns {SankeyItemIdentifier | null} The highlighted item identifier or null.
  */
-export const selectorSankeyHighlightedItem = createSelector([selectorSankeyHighlight], highlight => highlight.item);
+export const selectorSankeyHighlightedItem = createSelector(selectorSankeyHighlight, highlight => highlight.item);
 
 /**
  * Determines if a specific node should be highlighted.
@@ -43,7 +43,7 @@ export const selectorSankeyHighlightedItem = createSelector([selectorSankeyHighl
  * - It's the highlighted node (unless highlight mode is 'none')
  * - It's connected to a highlighted link (based on linkOptions.highlight)
  */
-export const selectorIsNodeHighlighted = createSelector([selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig], (highlightedItem, nodeHighlight, linkHighlight, nodeId) => {
+export const selectorIsNodeHighlighted = createSelector(selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig, (highlightedItem, nodeHighlight, linkHighlight, nodeId) => {
   if (!highlightedItem) {
     return false;
   }
@@ -78,7 +78,7 @@ export const selectorIsNodeHighlighted = createSelector([selectorSankeyHighlight
  * - It's the highlighted link (unless highlight mode is 'none')
  * - It's connected to a highlighted node (based on nodeOptions.highlight)
  */
-export const selectorIsLinkHighlighted = createSelector([selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig], (highlightedItem, nodeHighlight, linkHighlight, link) => {
+export const selectorIsLinkHighlighted = createSelector(selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig, (highlightedItem, nodeHighlight, linkHighlight, link) => {
   if (!highlightedItem) {
     return false;
   }
@@ -111,7 +111,7 @@ export const selectorIsLinkHighlighted = createSelector([selectorSankeyHighlight
  * - This item is not highlighted
  * - The fade mode is 'global' for the highlighted element type
  */
-export const selectorIsSankeyItemFaded = createSelector([selectorSankeyHighlightedItem, selectorNodeFadeConfig, selectorLinkFadeConfig], (highlightedItem, nodeFade, linkFade, isHighlighted) => {
+export const selectorIsSankeyItemFaded = createSelector(selectorSankeyHighlightedItem, selectorNodeFadeConfig, selectorLinkFadeConfig, (highlightedItem, nodeFade, linkFade, isHighlighted) => {
   if (!highlightedItem || isHighlighted) {
     return false;
   }

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -1423,7 +1423,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * Configuration for zoom interactions.
    */
   zoomInteractionConfig: PropTypes.shape({
-    pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag']), PropTypes.shape({
+    pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag', 'wheel']), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['drag']).isRequired
@@ -1431,6 +1431,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['pressAndDrag']).isRequired
+    }), PropTypes.shape({
+      allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
     })]).isRequired),
     zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
       pointerMode: PropTypes.any,

package/esm/hooks/useFunnelSeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createAllSeriesSelectorOfType, createSeriesSelectorsOfType } from '@mui/x-charts/internals';
-const useSelectorSeries = createSeriesSelectorsOfType('funnel');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('funnel');
+import { useSeriesOfType, useAllSeriesOfType } from '@mui/x-charts/internals';
 
 /**
  * Get access to the internal state of funnel series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('funnel');
  */
 
 export function useFunnelSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('funnel', seriesIds);
 }
 
 /**
@@ -38,5 +36,5 @@ export function useFunnelSeries(seriesIds) {
  * @returns the funnel series
  */
 export function useFunnelSeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('funnel');
 }

package/esm/hooks/useHeatmapSeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createAllSeriesSelectorOfType, createSeriesSelectorsOfType } from '@mui/x-charts/internals';
-const useSelectorSeries = createSeriesSelectorsOfType('heatmap');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('heatmap');
+import { useSeriesOfType, useAllSeriesOfType } from '@mui/x-charts/internals';
 
 /**
  * Get access to the internal state of heatmap series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('heatmap');
  */
 
 export function useHeatmapSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('heatmap', seriesIds);
 }
 
 /**
@@ -38,5 +36,5 @@ export function useHeatmapSeries(seriesIds) {
  * @returns the heatmap series
  */
 export function useHeatmapSeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('heatmap');
 }

package/esm/hooks/useSankeySeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createAllSeriesSelectorOfType, createSeriesSelectorsOfType } from '@mui/x-charts/internals';
-const useSelectorSeries = createSeriesSelectorsOfType('sankey');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('sankey');
+import { useSeriesOfType, useAllSeriesOfType } from '@mui/x-charts/internals';
 
 /**
  * Get access to the internal state of sankey series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('sankey');
  */
 
 export function useSankeySeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('sankey', seriesIds);
 }
 
 /**
@@ -38,5 +36,5 @@ export function useSankeySeries(seriesIds) {
  * @returns the sankey series
  */
 export function useSankeySeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('sankey');
 }

package/esm/index.js

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

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

@@ -8,10 +8,11 @@ export declare const selectorZoomInteractionConfig: (args_0: import("@mui/x-char
     requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
   };
   pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
+  allowedDirection?: "x" | "y" | "xy";
 }) | null;
 export declare const selectorPanInteractionConfig: (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;
-}, interactionName: "drag" | "pressAndDrag") => (Omit<import("./ZoomInteractionConfig.types.js").PanInteraction, "pointerMode"> & {
+}, interactionName: "wheel" | "drag" | "pressAndDrag") => (Omit<import("./ZoomInteractionConfig.types.js").PanInteraction, "pointerMode"> & {
   mouse: {
     requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
   };
@@ -19,15 +20,6 @@ export declare const selectorPanInteractionConfig: (args_0: import("@mui/x-chart
     requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
   };
   pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
+  allowedDirection?: "x" | "y" | "xy";
 }) | null;
-export declare const selectorIsZoomBrushEnabled: (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;
-}) => false | (Omit<import("./ZoomInteractionConfig.types.js").ZoomInteraction, "pointerMode"> & {
-  mouse: {
-    requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
-  };
-  touch: {
-    requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
-  };
-  pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
-});
+export declare const selectorIsZoomBrushEnabled: (args_0: {}, zoomInteractionConfig: any) => any;

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

@@ -1,5 +1,6 @@
-import { createSelector, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { createSelector } from '@mui/x-internals/store';
+import { selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { selectorChartZoomState } from "./useChartProZoom.selectors.js";
-export const selectorZoomInteractionConfig = createSelector([selectorChartZoomState], (zoomState, interactionName) => zoomState.zoomInteractionConfig.zoom[interactionName] ?? null);
-export const selectorPanInteractionConfig = createSelector([selectorChartZoomState], (zoomState, interactionName) => zoomState.zoomInteractionConfig.pan[interactionName] ?? null);
-export const selectorIsZoomBrushEnabled = createSelector([selectorChartZoomOptionsLookup, state => selectorZoomInteractionConfig(state, 'brush')], (zoomOptions, zoomInteractionConfig) => Object.keys(zoomOptions).length > 0 && zoomInteractionConfig || false);
+export const selectorZoomInteractionConfig = createSelector(selectorChartZoomState, (zoomState, interactionName) => zoomState.zoomInteractionConfig.zoom[interactionName] ?? null);
+export const selectorPanInteractionConfig = createSelector(selectorChartZoomState, (zoomState, interactionName) => zoomState.zoomInteractionConfig.pan[interactionName] ?? null);
+export const selectorIsZoomBrushEnabled = createSelector(selectorChartZoomOptionsLookup, state => selectorZoomInteractionConfig(state, 'brush'), (zoomOptions, zoomInteractionConfig) => Object.keys(zoomOptions).length > 0 && zoomInteractionConfig || false);

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

@@ -15,8 +15,9 @@ export type ZoomInteractionConfig = {
    * Defines the interactions that trigger panning.
    * - `drag`: Pans the chart when dragged with the mouse.
    * - `pressAndDrag`: Pans the chart by pressing and holding, then dragging. Useful for avoiding conflicts with selection gestures.
+   * - `wheel`: Pans the chart when the mouse wheel is scrolled (horizontal by default).
    *
-   * @default ['drag']
+   * @default ['drag', 'wheel']
    */
   pan?: readonly (PanInteraction | PanInteraction['type'])[];
 };
@@ -28,13 +29,14 @@ type Entry<T extends AnyInteraction> = { [K in T['type']]?: Omit<T, 'pointerMode
     requiredKeys?: KeyboardKey[];
   };
   pointerMode?: PointerMode[];
+  allowedDirection?: 'x' | 'y' | 'xy';
 } };
 export type DefaultizedZoomInteractionConfig = {
   zoom: Entry<ZoomInteraction>;
   pan: Entry<PanInteraction>;
 };
 export type ZoomInteraction = WheelInteraction | PinchInteraction | TapAndDragInteraction | DoubleTapResetInteraction | BrushInteraction;
-export type PanInteraction = DragInteraction | PressAndDragInteraction;
+export type PanInteraction = DragInteraction | PressAndDragInteraction | WheelPanInteraction;
 export type ZoomInteractionName = ZoomInteraction['type'];
 export type PanInteractionName = PanInteraction['type'];
 export type InteractionMode = Exclude<PointerMode, 'pen'>;
@@ -81,6 +83,17 @@ export type TapAndDragInteraction = Unpack<{
 export type PressAndDragInteraction = Unpack<{
   type: 'pressAndDrag';
 } & AllModeProp & AllKeysProp>;
+export type WheelPanInteraction = Unpack<{
+  type: 'wheel';
+  /**
+   * Defines which axes are affected by pan on wheel.
+   * - `'x'`: Only pan horizontally
+   * - `'y'`: Only pan vertically
+   * - `'xy'`: Pan both axes
+   * @default 'x'
+   */
+  allowedDirection?: 'x' | 'y' | 'xy';
+} & NoModeProp & AllKeysProp>;
 export type DoubleTapResetInteraction = Unpack<{
   type: 'doubleTapReset';
 } & AllModeProp & AllKeysProp>;
@@ -91,6 +104,7 @@ export type AnyInteraction = {
   type: string;
   pointerMode?: InteractionMode;
   requiredKeys?: KeyboardKey[];
+  allowedDirection?: 'x' | 'y' | 'xy';
 };
 export type AnyEntry = Omit<AnyInteraction, 'pointerMode'> & {
   mouse: {
@@ -100,5 +114,6 @@ export type AnyEntry = Omit<AnyInteraction, 'pointerMode'> & {
     requiredKeys?: KeyboardKey[];
   };
   pointerMode?: PointerMode[];
+  allowedDirection?: 'x' | 'y' | 'xy';
 };
 export {};

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.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 usePanOnWheel: ({
+  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/usePanOnWheel.js

@@ -0,0 +1,98 @@
+'use client';
+
+import * as React from 'react';
+import { useSelector, getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { translateZoom } from "./useZoom.utils.js";
+import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
+export const usePanOnWheel = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const startedOutsideRef = React.useRef(false);
+  const startedOutsideTimeoutRef = React.useRef(null);
+  const config = useSelector(store, selectorPanInteractionConfig, 'wheel');
+  const isPanOnWheelEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
+  React.useEffect(() => {
+    if (!isPanOnWheelEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('panTurnWheel', {
+      requiredKeys: config.requiredKeys
+    });
+  }, [config, isPanOnWheelEnabled, instance]);
+
+  // Add event for chart pan on wheel
+  React.useEffect(() => {
+    const element = svgRef.current;
+    const accumulatedChange = {
+      x: 0,
+      y: 0
+    };
+    if (element === null || !isPanOnWheelEnabled) {
+      return () => {};
+    }
+    const rafThrottledSetZoomData = rafThrottle(setZoomDataCallback);
+    const wheelHandler = instance.addInteractionListener('panTurnWheel', event => {
+      const point = getSVGPoint(element, {
+        clientX: event.detail.centroid.x,
+        clientY: event.detail.centroid.y
+      });
+
+      // This prevents a pan event from being triggered when the mouse is outside the chart area.
+      // The timeout is used to prevent an weird behavior where if the mouse is outside but enters due to
+      // scrolling, then the pan event is triggered.
+      if (startedOutsideRef.current || !instance.isPointInside(point.x, point.y)) {
+        startedOutsideRef.current = true;
+        if (startedOutsideTimeoutRef.current) {
+          clearTimeout(startedOutsideTimeoutRef.current);
+        }
+        startedOutsideTimeoutRef.current = setTimeout(() => {
+          startedOutsideRef.current = false;
+          startedOutsideTimeoutRef.current = null;
+        }, 100);
+        return;
+      }
+      event.detail.srcEvent.preventDefault();
+      const allowedDirection = config?.allowedDirection ?? 'x';
+      if (event.detail.deltaX === 0 && event.detail.deltaY === 0) {
+        return;
+      }
+      accumulatedChange.x += event.detail.deltaX;
+      accumulatedChange.y += event.detail.deltaY;
+      rafThrottledSetZoomData(prev => {
+        const x = accumulatedChange.x;
+        const y = accumulatedChange.y;
+        accumulatedChange.x = 0;
+        accumulatedChange.y = 0;
+        let movementX = 0;
+        let movementY = 0;
+        if (allowedDirection === 'x' || allowedDirection === 'xy') {
+          movementX = -x;
+        }
+        if (allowedDirection === 'y' || allowedDirection === 'xy') {
+          movementY = y;
+        }
+        if (movementX === 0 && movementY === 0) {
+          return prev;
+        }
+        return translateZoom(prev, {
+          x: movementX,
+          y: movementY
+        }, drawingArea, optionsLookup, allowedDirection);
+      });
+    });
+    return () => {
+      wheelHandler.cleanup();
+      if (startedOutsideTimeoutRef.current) {
+        clearTimeout(startedOutsideTimeoutRef.current);
+        startedOutsideTimeoutRef.current = null;
+      }
+      startedOutsideRef.current = false;
+      rafThrottledSetZoomData.clear();
+    };
+  }, [svgRef, drawingArea, isPanOnWheelEnabled, optionsLookup, instance, setZoomDataCallback, store, config]);
+};

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

@@ -46,4 +46,4 @@ export declare function translateZoom(initialZoomData: readonly ZoomData[], move
 }, drawingArea: {
   width: number;
   height: number;
-}, optionsLookup: Record<string | number, DefaultizedZoomOptions>): ZoomData[];
+}, optionsLookup: Record<string | number, DefaultizedZoomOptions>, filterMode?: 'x' | 'y' | 'xy'): ZoomData[];

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

@@ -104,10 +104,10 @@ export function getVerticalCenterRatio(point, area, reverse) {
 /**
  * Translate the zoom data by a given movement.
  */
-export function translateZoom(initialZoomData, movement, drawingArea, optionsLookup) {
+export function translateZoom(initialZoomData, movement, drawingArea, optionsLookup, filterMode = 'xy') {
   return initialZoomData.map(zoom => {
     const options = optionsLookup[zoom.axisId];
-    if (!options || !options.panning) {
+    if (!options || !options.panning || options.axisDirection === 'x' && filterMode === 'y' || options.axisDirection === 'y' && filterMode === 'x') {
       return zoom;
     }
     const min = zoom.start;

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

@@ -1,2 +1,3 @@
+import type { AxisId, DefaultizedZoomOptions } from '@mui/x-charts/internals';
 import type { ZoomInteractionConfig, DefaultizedZoomInteractionConfig } from "./ZoomInteractionConfig.types.js";
-export declare const initializeZoomInteractionConfig: (zoomInteractionConfig?: ZoomInteractionConfig) => DefaultizedZoomInteractionConfig;
+export declare const initializeZoomInteractionConfig: (zoomInteractionConfig?: ZoomInteractionConfig, optionsLookup?: Record<AxisId, DefaultizedZoomOptions>) => DefaultizedZoomInteractionConfig;

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

@@ -1,10 +1,12 @@
 'use client';
 
-export const initializeZoomInteractionConfig = zoomInteractionConfig => {
+export const initializeZoomInteractionConfig = (zoomInteractionConfig, optionsLookup) => {
   const defaultizedConfig = {
     zoom: {},
     pan: {}
   };
+
+  // Config for zoom
   if (!zoomInteractionConfig?.zoom) {
     defaultizedConfig.zoom = {
       wheel: {
@@ -21,8 +23,10 @@ export const initializeZoomInteractionConfig = zoomInteractionConfig => {
       }
     };
   } else {
-    defaultizedConfig.zoom = initializeFor(zoomInteractionConfig.zoom);
+    defaultizedConfig.zoom = initializeFor('zoom', zoomInteractionConfig.zoom);
   }
+
+  // Config for pan
   if (!zoomInteractionConfig?.pan) {
     defaultizedConfig.pan = {
       drag: {
@@ -32,12 +36,37 @@ export const initializeZoomInteractionConfig = zoomInteractionConfig => {
         touch: {}
       }
     };
+    let hasXZoom = false;
+    let hasYZoom = false;
+    if (optionsLookup) {
+      Object.values(optionsLookup).forEach(options => {
+        if (options.axisDirection === 'x') {
+          hasXZoom = true;
+        }
+        if (options.axisDirection === 'y') {
+          hasYZoom = true;
+        }
+      });
+    }
+
+    // Only add pan on wheel if the x-axis can pan (has zoom enabled) but the y-axis cannot
+    // This provides a consistent horizontal panning experience that aligns with typical scrolling behavior
+    // When both axes can pan, we avoid wheel interactions to prevent conflicts with vertical scrolling
+    if (hasXZoom && !hasYZoom) {
+      defaultizedConfig.pan.wheel = {
+        type: 'wheel',
+        requiredKeys: [],
+        allowedDirection: 'x',
+        mouse: {},
+        touch: {}
+      };
+    }
   } else {
-    defaultizedConfig.pan = initializeFor(zoomInteractionConfig.pan);
+    defaultizedConfig.pan = initializeFor('pan', zoomInteractionConfig.pan);
   }
   return defaultizedConfig;
 };
-function initializeFor(zoomInteractionConfig) {
+function initializeFor(interactionType, zoomInteractionConfig) {
   // We aggregate interactions by type
   const aggregation = zoomInteractionConfig.reduce((acc, interaction) => {
     if (typeof interaction === 'string') {
@@ -57,7 +86,8 @@ function initializeFor(zoomInteractionConfig) {
     acc[type].push({
       type,
       pointerMode: interaction.pointerMode,
-      requiredKeys: interaction.requiredKeys
+      requiredKeys: interaction.requiredKeys,
+      allowedDirection: interaction.allowedDirection
     });
     return acc;
   }, {});
@@ -81,6 +111,9 @@ function initializeFor(zoomInteractionConfig) {
         requiredKeys: lastTouch?.requiredKeys ?? []
       } : {}
     };
+    if (type === 'wheel' && interactionType === 'pan') {
+      acc[type].allowedDirection = lastEmpty?.allowedDirection ?? 'x';
+    }
   }
   return acc;
 }

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

@@ -6,10 +6,12 @@ import { useSelector, selectorChartZoomOptionsLookup, createZoomLookup, selector
 import debounce from '@mui/utils/debounce';
 import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
 import { useEventCallback } from '@mui/material/utils';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { calculateZoom } from "./calculateZoom.js";
 import { useZoomOnWheel } from "./gestureHooks/useZoomOnWheel.js";
 import { useZoomOnPinch } from "./gestureHooks/useZoomOnPinch.js";
 import { usePanOnDrag } from "./gestureHooks/usePanOnDrag.js";
+import { usePanOnWheel } from "./gestureHooks/usePanOnWheel.js";
 import { useZoomOnTapAndDrag } from "./gestureHooks/useZoomOnTapAndDrag.js";
 import { usePanOnPressAndDrag } from "./gestureHooks/usePanOnPressAndDrag.js";
 import { useZoomOnBrush } from "./gestureHooks/useZoomOnBrush.js";
@@ -30,9 +32,9 @@ export const useChartProZoom = pluginData => {
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
   useEffectAfterFirstRender(() => {
     store.set('zoom', _extends({}, store.state.zoom, {
-      zoomInteractionConfig: initializeZoomInteractionConfig(zoomInteractionConfig)
+      zoomInteractionConfig: initializeZoomInteractionConfig(zoomInteractionConfig, optionsLookup)
     }));
-  }, [store, zoomInteractionConfig]);
+  }, [store, zoomInteractionConfig, optionsLookup]);
 
   // 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, {
@@ -55,6 +57,9 @@ export const useChartProZoom = pluginData => {
   }, [store, paramsZoomData, removeIsInteracting]);
   const setZoomDataCallback = React.useCallback(zoomData => {
     const newZoomData = typeof zoomData === 'function' ? zoomData([...store.state.zoom.zoomData]) : zoomData;
+    if (isDeepEqual(store.state.zoom.zoomData, newZoomData)) {
+      return;
+    }
     onZoomChange(newZoomData);
     if (store.state.zoom.isControlled) {
       store.set('zoom', _extends({}, store.state.zoom, {
@@ -113,6 +118,7 @@ export const useChartProZoom = pluginData => {
   // Add events
   usePanOnDrag(pluginData, setZoomDataCallback);
   usePanOnPressAndDrag(pluginData, setZoomDataCallback);
+  usePanOnWheel(pluginData, setZoomDataCallback);
   useZoomOnWheel(pluginData, setZoomDataCallback);
   useZoomOnPinch(pluginData, setZoomDataCallback);
   useZoomOnTapAndDrag(pluginData, setZoomDataCallback);
@@ -164,7 +170,7 @@ useChartProZoom.getInitialState = params => {
       zoomData: initializeZoomData(optionsLookup, userZoomData),
       isInteracting: false,
       isControlled: zoomData !== undefined,
-      zoomInteractionConfig: initializeZoomInteractionConfig(params.zoomInteractionConfig)
+      zoomInteractionConfig: initializeZoomInteractionConfig(params.zoomInteractionConfig, optionsLookup)
     }
   };
 };

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

@@ -1,16 +1,17 @@
-import { createSelector, selectorChartZoomMap, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { createSelector } from '@mui/x-internals/store';
+import { selectorChartZoomMap, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 export const selectorChartZoomState = state => state.zoom;
-export const selectorChartZoomIsInteracting = createSelector([selectorChartZoomState], zoom => zoom.isInteracting);
-export const selectorChartZoomIsEnabled = createSelector([selectorChartZoomOptionsLookup], optionsLookup => Object.keys(optionsLookup).length > 0);
-export const selectorChartAxisZoomData = createSelector([selectorChartZoomMap], (zoomMap, axisId) => zoomMap?.get(axisId));
-export const selectorChartCanZoomOut = createSelector([selectorChartZoomState, selectorChartZoomOptionsLookup], (zoomState, zoomOptions) => {
+export const selectorChartZoomIsInteracting = createSelector(selectorChartZoomState, zoom => zoom.isInteracting);
+export const selectorChartZoomIsEnabled = createSelector(selectorChartZoomOptionsLookup, optionsLookup => Object.keys(optionsLookup).length > 0);
+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;
     const options = zoomOptions[zoomData.axisId];
     return zoomData.start === options.minStart && zoomData.end === options.maxEnd || span === options.maxSpan;
   });
 });
-export const selectorChartCanZoomIn = createSelector([selectorChartZoomState, selectorChartZoomOptionsLookup], (zoomState, zoomOptions) => {
+export const selectorChartCanZoomIn = createSelector(selectorChartZoomState, selectorChartZoomOptionsLookup, (zoomState, zoomOptions) => {
   return zoomState.zoomData.every(zoomData => {
     const span = zoomData.end - zoomData.start;
     const options = zoomOptions[zoomData.axisId];

package/esm/utils/index.d.ts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/utils';

package/esm/utils/index.js

@@ -0,0 +1,2 @@
+// Re-export automatically generated, to customize, simply remove this line.
+export * from '@mui/x-charts/utils';

package/hooks/useFunnelSeries.js

@@ -7,9 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFunnelSeries = useFunnelSeries;
 exports.useFunnelSeriesContext = useFunnelSeriesContext;
 var _internals = require("@mui/x-charts/internals");
-const useSelectorSeries = (0, _internals.createSeriesSelectorsOfType)('funnel');
-const useSelectorSeriesContext = (0, _internals.createAllSeriesSelectorOfType)('funnel');
-
 /**
  * Get access to the internal state of funnel series.
  *
@@ -33,7 +30,7 @@ const useSelectorSeriesContext = (0, _internals.createAllSeriesSelectorOfType)('
  */
 
 function useFunnelSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return (0, _internals.useSeriesOfType)('funnel', seriesIds);
 }
 
 /**
@@ -44,5 +41,5 @@ function useFunnelSeries(seriesIds) {
  * @returns the funnel series
  */
 function useFunnelSeriesContext() {
-  return useSelectorSeriesContext();
+  return (0, _internals.useAllSeriesOfType)('funnel');
 }

package/hooks/useHeatmapSeries.js

@@ -7,9 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useHeatmapSeries = useHeatmapSeries;
 exports.useHeatmapSeriesContext = useHeatmapSeriesContext;
 var _internals = require("@mui/x-charts/internals");
-const useSelectorSeries = (0, _internals.createSeriesSelectorsOfType)('heatmap');
-const useSelectorSeriesContext = (0, _internals.createAllSeriesSelectorOfType)('heatmap');
-
 /**
  * Get access to the internal state of heatmap series.
  *
@@ -33,7 +30,7 @@ const useSelectorSeriesContext = (0, _internals.createAllSeriesSelectorOfType)('
  */
 
 function useHeatmapSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return (0, _internals.useSeriesOfType)('heatmap', seriesIds);
 }
 
 /**
@@ -44,5 +41,5 @@ function useHeatmapSeries(seriesIds) {
  * @returns the heatmap series
  */
 function useHeatmapSeriesContext() {
-  return useSelectorSeriesContext();
+  return (0, _internals.useAllSeriesOfType)('heatmap');
 }