@mui/x-charts-pro 8.12.0 → 8.13.0

package/BarChartPro/BarChartPro.js

@@ -1423,5 +1423,28 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     end: _propTypes.default.number.isRequired,
     start: _propTypes.default.number.isRequired
-  }))
+  })),
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig: _propTypes.default.shape({
+    pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag']), _propTypes.default.shape({
+      pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['drag']).isRequired
+    })]).isRequired),
+    zoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['pinch', 'tapAndDrag', 'wheel']), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['wheel']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.array,
+      type: _propTypes.default.oneOf(['pinch']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['tapAndDrag']).isRequired
+    })]).isRequired)
+  })
 } : void 0;

package/CHANGELOG.md

@@ -5,6 +5,151 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.13.0
+
+_Oct 1, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 The chart zoom now supports the `tapAndDrag` gesture. Zoom in/out by tapping twice and dragging vertically.
+- 🔎 Charts now allow [fine-grained control for zoom interactions](https://mui.com/x/react-charts/zoom-and-pan/#zoom-interactions-configuration).
+  ```jsx
+  <BarChartPro
+    zoomInteractionConfig={{
+      // Only zoom when Control key is pressed
+      zoom: [{ type: 'wheel', keys: ['Control'] }],
+      // Only pan when Shift key is pressed
+      pan: [{ type: 'drag', keys: ['Shift'] }],
+    }}
+  />
+  ```
+- ➡️ Data Grid grouping rows now persist their expansion state when the rows are updated.
+- 📜 Updated Data Grid vertical scrollbar to include pinned rows and aggregation sections.
+- 📌 Improved the appearance of [pinned columns](https://mui.com/x/react-data-grid/column-pinning/#pinned-columns-appearance) and [pinned rows](https://mui.com/x/react-data-grid/row-pinning/#pinned-rows-appearance) sections in the Data Grid.
+- 🚀 Tree View now fetches the children of expanded items on mount when using lazy loading.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @KenanYusuf, @mapache-salvaje, @MBilalShafi, @mnajdova, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.13.0`
+
+- [DataGrid] Add scroll shadows and fix scrollbar overlap (#16476) @KenanYusuf
+- [DataGrid] Fix row spanning stale state issue (#19733) @MBilalShafi
+- [DataGrid] Fix toolbar `slotProps` not being applied (#19769) @sai6855
+- [DataGrid] Skip calling `fetchRows()` when strategy is not initialized (#19728) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.13.0`, plus:
+
+- [DataGridPro] Retain expansion state on rows update (#19697) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.13.0`, plus:
+
+- [DataGridPremium] Add `metadata.referenceId` to AI assistant prompt resolver (#19695) @hasdfa
+- [DataGridPremium] Fix aggregation value retrieval (#19724) @arminmeh
+- [DataGridPremium] Get correct active chart id while rebuilding data (#19720) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.12.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.12.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.13.0`
+
+- [charts] Add `tapAndDrag` zoom gesture (#19727) @JCQuintas
+- [charts] Add arc focus indicator that follows the arc form (#19696) @mnajdova
+- [charts] Fix outline color (#19752) @alexfauquette
+- [charts] Improve tooltip doc (#19731) @JCQuintas
+- [charts] Make axis highlight reflect the keyboard interaction (#19631) @alexfauquette
+- [charts] Prevent horizontal scroll on keyboard navigation (#19704) @alexfauquette
+- [charts] Simplify gestures by removing bindings (#19767) @JCQuintas
+
+#### `@mui/x-charts-pro@8.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.13.0`, plus:
+
+- [charts-pro] Allow zoom interactions to be configured (#18646) @JCQuintas
+- [charts-pro] Fix zoom preview having wrong domain in some cases (#19723) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.13.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.13.0`
+
+- [tree view] Export the `apiRef` type of each Tree View component (#19543) @flaviendelangle
+- [tree view] Fix indeterminate checkbox state (#19544) @flaviendelangle
+- [tree view] Improve the lazy loading initial expansion (#19284) @flaviendelangle
+- [tree view] Use Base UI utils whenever possible (#19502) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.13.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.12.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add a recipe to customize editing component with Autocomplete (#19651) @siriwatknp
+- [docs] Refine the electricity scatter tooltip (#19689) @alexfauquette
+- [docs] Revise the Axis doc (#19052) @mapache-salvaje
+- [docs] Remove reference to nonexistent `FocusedMark` API page (#19773) @bernardobelchior
+
+### Core
+
+- [code-infra] Change charts codspeed integration to use walltime (#19729) @JCQuintas
+- [code-infra] Port stylelint from core repo (#19633) @Janpot
+- [code-infra] Stabilize fake timers in regression tests (#19719) @Janpot
+- [code-infra] Stabilize size for bundles with `releaseInfo` (#19674) @Janpot
+- [code-infra] Fix `pnpm-lock.yaml` broken lockfile (#19755) @bernardobelchior
+
+## 8.12.1
+
+_Sep 25, 2025_
+
+Release highlight ✨:
+
+- 🐞 Hotfix for Grid-Charts integration issue with aggregated values
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.12.1`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@8.12.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.12.1`.
+
+#### `@mui/x-data-grid-premium@8.12.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.12.1`, plus:
+
+- [DataGridPremium] Collect aggregated values properly for the charts integration context (#19714) @arminmeh
+
 ## 8.12.0
 
 _Sep 25, 2025_

package/ChartContainerPro/useChartContainerProProps.js

@@ -10,13 +10,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _internals = require("@mui/x-charts/internals");
 var _allPlugins = require("../internals/plugins/allPlugins");
-const _excluded = ["initialZoom", "zoomData", "onZoomChange", "plugins", "apiRef"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "zoomInteractionConfig", "plugins", "apiRef"];
 const useChartContainerProProps = (props, ref) => {
   const _ref = props,
     {
       initialZoom,
       zoomData,
       onZoomChange,
+      zoomInteractionConfig,
       plugins,
       apiRef
     } = _ref,
@@ -30,6 +31,7 @@ const useChartContainerProProps = (props, ref) => {
     initialZoom,
     zoomData,
     onZoomChange,
+    zoomInteractionConfig,
     apiRef,
     plugins: plugins ?? _allPlugins.DEFAULT_PLUGINS
   });

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -18,7 +18,7 @@ var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc1ODc1MTIwMDAwMA==";
+const releaseInfo = "MTc1OTI3NjgwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/FunnelChart/funnelAxisPlugin/computeAxisValue.js

@@ -94,10 +94,7 @@ function computeAxisValue({
       axisExtremums[0] = min;
       axisExtremums[1] = max;
     }
-    const rawTickNumber = (0, _internals.getTickNumber)((0, _extends2.default)({}, axis, {
-      range,
-      domain: axisExtremums
-    }));
+    const rawTickNumber = (0, _internals.getTickNumber)(axis, axisExtremums, (0, _internals.getDefaultTickNumber)(Math.abs(range[1] - range[0])));
     const tickNumber = (0, _internals.scaleTickNumberByRange)(rawTickNumber, range);
     const scale = (0, _internals.getScale)(scaleType, axisExtremums, range);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;

package/LineChartPro/LineChartPro.js

@@ -1426,5 +1426,28 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     end: _propTypes.default.number.isRequired,
     start: _propTypes.default.number.isRequired
-  }))
+  })),
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig: _propTypes.default.shape({
+    pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag']), _propTypes.default.shape({
+      pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['drag']).isRequired
+    })]).isRequired),
+    zoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['pinch', 'tapAndDrag', 'wheel']), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['wheel']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.array,
+      type: _propTypes.default.oneOf(['pinch']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['tapAndDrag']).isRequired
+    })]).isRequired)
+  })
 } : void 0;

package/ScatterChartPro/ScatterChartPro.js

@@ -1408,5 +1408,28 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     end: _propTypes.default.number.isRequired,
     start: _propTypes.default.number.isRequired
-  }))
+  })),
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig: _propTypes.default.shape({
+    pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag']), _propTypes.default.shape({
+      pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['drag']).isRequired
+    })]).isRequired),
+    zoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['pinch', 'tapAndDrag', 'wheel']), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['wheel']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.array,
+      type: _propTypes.default.oneOf(['pinch']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['tapAndDrag']).isRequired
+    })]).isRequired)
+  })
 } : void 0;

package/esm/BarChartPro/BarChartPro.js

@@ -1416,6 +1416,29 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     end: PropTypes.number.isRequired,
     start: PropTypes.number.isRequired
-  }))
+  })),
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig: PropTypes.shape({
+    pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag']), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['drag']).isRequired
+    })]).isRequired),
+    zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['pinch']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['tapAndDrag']).isRequired
+    })]).isRequired)
+  })
 } : void 0;
 export { BarChartPro };

package/esm/ChartContainerPro/useChartContainerProProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["initialZoom", "zoomData", "onZoomChange", "plugins", "apiRef"];
+const _excluded = ["initialZoom", "zoomData", "onZoomChange", "zoomInteractionConfig", "plugins", "apiRef"];
 import { useChartContainerProps } from '@mui/x-charts/internals';
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 export const useChartContainerProProps = (props, ref) => {
@@ -11,6 +11,7 @@ export const useChartContainerProProps = (props, ref) => {
       initialZoom,
       zoomData,
       onZoomChange,
+      zoomInteractionConfig,
       plugins,
       apiRef
     } = _ref,
@@ -24,6 +25,7 @@ export const useChartContainerProProps = (props, ref) => {
     initialZoom,
     zoomData,
     onZoomChange,
+    zoomInteractionConfig,
     apiRef,
     plugins: plugins ?? DEFAULT_PLUGINS
   });

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -11,7 +11,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc1ODc1MTIwMDAwMA==";
+const releaseInfo = "MTc1OTI3NjgwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/FunnelChart/funnelAxisPlugin/computeAxisValue.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand } from '@mui/x-charts-vendor/d3-scale';
-import { getAxisExtrema, isBandScaleConfig, getScale, getColorScale, getOrdinalColorScale, getTickNumber, scaleTickNumberByRange, getCartesianAxisTriggerTooltip, isDateData, createDateFormatter } from '@mui/x-charts/internals';
+import { getAxisExtrema, isBandScaleConfig, getScale, getColorScale, getOrdinalColorScale, getTickNumber, scaleTickNumberByRange, getCartesianAxisTriggerTooltip, isDateData, createDateFormatter, getDefaultTickNumber } from '@mui/x-charts/internals';
 export const xRangeGetter = (drawingArea, reverse, removedSpace = 0) => {
   const range = [drawingArea.left, drawingArea.left + drawingArea.width - removedSpace];
   return reverse ? [range[1], range[0]] : [range[0], range[1]];
@@ -84,10 +84,7 @@ export function computeAxisValue({
       axisExtremums[0] = min;
       axisExtremums[1] = max;
     }
-    const rawTickNumber = getTickNumber(_extends({}, axis, {
-      range,
-      domain: axisExtremums
-    }));
+    const rawTickNumber = getTickNumber(axis, axisExtremums, getDefaultTickNumber(Math.abs(range[1] - range[0])));
     const tickNumber = scaleTickNumberByRange(rawTickNumber, range);
     const scale = getScale(scaleType, axisExtremums, range);
     const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;

package/esm/LineChartPro/LineChartPro.js

@@ -1419,6 +1419,29 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     end: PropTypes.number.isRequired,
     start: PropTypes.number.isRequired
-  }))
+  })),
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig: PropTypes.shape({
+    pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag']), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['drag']).isRequired
+    })]).isRequired),
+    zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['pinch']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['tapAndDrag']).isRequired
+    })]).isRequired)
+  })
 } : void 0;
 export { LineChartPro };

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -1401,6 +1401,29 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     end: PropTypes.number.isRequired,
     start: PropTypes.number.isRequired
-  }))
+  })),
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig: PropTypes.shape({
+    pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag']), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['drag']).isRequired
+    })]).isRequired),
+    zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['pinch']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['tapAndDrag']).isRequired
+    })]).isRequired)
+  })
 } : void 0;
 export { ScatterChartPro };

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.12.0
+ * @mui/x-charts-pro v8.13.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

@@ -0,0 +1,22 @@
+export declare const selectorZoomInteractionConfig: import("reselect").Selector<any, (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[];
+}) | null, [interactionName: "wheel" | "pinch" | "tapAndDrag"]>;
+export declare const selectorPanInteractionConfig: import("reselect").Selector<any, (Omit<{
+  type: "drag";
+  pointerMode?: import("./ZoomInteractionConfig.types.js").InteractionMode | undefined;
+  requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[] | undefined;
+}, "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[];
+}) | null, [interactionName: "drag"]>;

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

@@ -0,0 +1,4 @@
+import { createSelector } from '@mui/x-charts/internals';
+import { selectorChartZoomState } from "./useChartProZoom.selectors.js";
+export const selectorZoomInteractionConfig = createSelector([selectorChartZoomState, (_state, interactionName) => interactionName], (zoomState, interactionName) => zoomState.zoomInteractionConfig.zoom[interactionName] ?? null);
+export const selectorPanInteractionConfig = createSelector([selectorChartZoomState, (_state, interactionName) => interactionName], (zoomState, interactionName) => zoomState.zoomInteractionConfig.pan[interactionName] ?? null);

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

@@ -0,0 +1,92 @@
+import type { KeyboardKey, PointerMode } from '@mui/x-internal-gestures/core';
+export type ZoomInteractionConfig = {
+  /**
+   * Defines the interactions that trigger zooming.
+   * - `wheel`: Zooms in or out when the mouse wheel is scrolled.
+   * - `pinch`: Zooms in or out when a pinch gesture is detected.
+   * - `tapAndDrag`: Zooms in or out by tapping twice and then dragging vertically. Dragging up zooms in, dragging down zooms out.
+   *
+   * @default ['wheel', 'pinch']
+   */
+  zoom?: (ZoomInteraction | ZoomInteraction['type'])[];
+  /**
+   * Defines the interactions that trigger panning.
+   * - `drag`: Pans the chart when dragged with the mouse.
+   *
+   * @default ['drag']
+   */
+  pan?: (PanInteraction | PanInteraction['type'])[];
+};
+type Entry<T extends AnyInteraction> = { [K in T['type']]?: Omit<T, 'pointerMode'> & {
+  mouse: {
+    requiredKeys?: KeyboardKey[];
+  };
+  touch: {
+    requiredKeys?: KeyboardKey[];
+  };
+  pointerMode?: PointerMode[];
+} };
+export type DefaultizedZoomInteractionConfig = {
+  zoom: Entry<ZoomInteraction>;
+  pan: Entry<PanInteraction>;
+};
+export type ZoomInteraction = WheelInteraction | PinchInteraction | TapAndDragInteraction;
+export type PanInteraction = DragInteraction;
+export type ZoomInteractionName = ZoomInteraction['type'];
+export type PanInteractionName = PanInteraction['type'];
+export type InteractionMode = Exclude<PointerMode, 'pen'>;
+type AllKeysProp = {
+  /**
+   * The keys that must be pressed to trigger the interaction.
+   */
+  requiredKeys?: KeyboardKey[];
+};
+type AllModeProp = {
+  /**
+   * Defines which type of pointer can trigger the interaction.
+   * - `mouse`: Only mouse interactions will trigger the interaction.
+   * - `touch`: Only touch interactions will trigger the interaction.
+   * - undefined: All interactions will trigger the interaction.
+   */
+  pointerMode?: InteractionMode;
+};
+type NoKeysProp = {
+  /**
+   * This interaction does not support key combinations.
+   */
+  requiredKeys?: any[];
+};
+type NoModeProp = {
+  /**
+   * This gesture only works on a specific pointer mode. Mode has no effect.
+   */
+  pointerMode?: any;
+};
+type Unpack<T> = { [K in keyof T]: T[K] extends object ? Unpack<T[K]> : T[K] };
+export type WheelInteraction = Unpack<{
+  type: 'wheel';
+} & NoModeProp & AllKeysProp>;
+export type PinchInteraction = Unpack<{
+  type: 'pinch';
+} & NoModeProp & NoKeysProp>;
+export type DragInteraction = Unpack<{
+  type: 'drag';
+} & AllModeProp & AllKeysProp>;
+export type TapAndDragInteraction = Unpack<{
+  type: 'tapAndDrag';
+} & AllModeProp & AllKeysProp>;
+export type AnyInteraction = {
+  type: string;
+  pointerMode?: InteractionMode;
+  requiredKeys?: KeyboardKey[];
+};
+export type AnyEntry = Omit<AnyInteraction, 'pointerMode'> & {
+  mouse: {
+    requiredKeys?: KeyboardKey[];
+  };
+  touch: {
+    requiredKeys?: KeyboardKey[];
+  };
+  pointerMode?: PointerMode[];
+};
+export {};

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

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

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useSelector, 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 usePanOnDrag = ({
   store,
   instance,
@@ -12,12 +13,26 @@ export const usePanOnDrag = ({
   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) && config || false, [optionsLookup, config]);
+  React.useEffect(() => {
+    if (!isPanOnDragEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomPan', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [isPanOnDragEnabled, config, instance]);
 
   // Add event for chart panning
-  const isPanEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) || false, [optionsLookup]);
   React.useEffect(() => {
     const element = svgRef.current;
-    if (element === null || !isPanEnabled) {
+    if (element === null || !isPanOnDragEnabled) {
       return () => {};
     }
     const handlePanStart = event => {
@@ -45,14 +60,14 @@ export const usePanOnDrag = ({
       }
       throttledCallback(event, zoomData);
     };
-    const panHandler = instance.addInteractionListener('pan', handlePan);
-    const panStartHandler = instance.addInteractionListener('panStart', handlePanStart);
-    const panEndHandler = instance.addInteractionListener('panEnd', handlePanEnd);
+    const panHandler = instance.addInteractionListener('zoomPan', handlePan);
+    const panStartHandler = instance.addInteractionListener('zoomPanStart', handlePanStart);
+    const panEndHandler = instance.addInteractionListener('zoomPanEnd', handlePanEnd);
     return () => {
       panStartHandler.cleanup();
       panHandler.cleanup();
       panEndHandler.cleanup();
       throttledCallback.clear();
     };
-  }, [instance, svgRef, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, startRef]);
+  }, [instance, svgRef, isPanOnDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, startRef]);
 };

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

@@ -39,7 +39,7 @@ export const zoomAtPoint = (centerRatio, scaleRatio, currentZoomData, options) =
  */
 export function isSpanValid(minRange, maxRange, isZoomIn, option) {
   const newSpanPercent = maxRange - minRange;
-  if (isZoomIn && newSpanPercent < option.minSpan || !isZoomIn && newSpanPercent > option.maxSpan) {
+  if (newSpanPercent < 0 || isZoomIn && newSpanPercent < option.minSpan || !isZoomIn && newSpanPercent > option.maxSpan) {
     return false;
   }
   if (minRange < option.minStart || maxRange > option.maxEnd) {