@mui/x-charts-pro 8.18.0 → 8.19.0

package/BarChartPro/BarChartPro.js

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

package/CHANGELOG.md

@@ -5,6 +5,119 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.19.0
+
+_Nov 20, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔎 Add pan on `wheel` to the charts zoom
+- ⌨️ Allow opt-in to [tab navigation](https://mui.com/x/react-data-grid/accessibility/#tab-navigation) inside the Data Grid.
+- ⚙️ New way of defining [action columns](https://mui.com/x/react-data-grid/column-definition/#ActionsWithModalGrid.tsx) in the Data Grid that makes it easier to keep `columns` prop stable.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@lauri865, @noobyogi0010, @sai6855
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mj12albert, @noraleonte, @rita-codes, @siriwatknp, @ZeeshanTamboli
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.19.0`
+
+- [DataGrid] Add `tabNavigation` prop to control tab navigation in the grid (#20286) @arminmeh
+- [DataGrid] Allow to focus disabled checkbox cells (#19959) @mj12albert
+- [DataGrid] Alternative actions column definition API (#15041) @cherniavskii
+- [DataGrid] Fix failing tests (#20332) @cherniavskii
+- [DataGrid] Prevent Safari 26 error in the event handler (#20369) @arminmeh
+- [DataGrid] Undeprecate the `autoHeight` prop (#20363) @cherniavskii
+- [DataGrid] Fix print export grid dimensions with dynamic row height and print styles (#19835) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.19.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.19.0`.
+
+#### `@mui/x-data-grid-premium@8.19.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.19.0`, plus:
+
+- [DataGridPremium] Fix aggregation with sorting (#19892) @lauri865
+- [DataGridPremium] Lock `ExcelJS` version (#20329) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.19.0`
+
+- [pickers] Do not loose `slotProps.field.slotProps` (#20322) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.19.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.19.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.19.0`
+
+- [charts] Expose `niceDomain` utility (#20250) @bernardobelchior
+- [charts] Fix benchmark regression by downgrading to JSDOM v26 (#20405) @bernardobelchior
+- [charts] Fix Pie Chart keyboard focus highlight (#20358) @JCQuintas
+- [charts] Memoize series selectors (#20326) @JCQuintas
+- [charts] Relax dataset type (#20294) @bernardobelchior
+- [charts] Remove `touch-action: pan-y` when zoom is disabled (#20204) @bernardobelchior
+- [charts] Use `getBBox()` for correct SVG sizes in firefox (#20309) @JCQuintas
+- [charts] Use directly selector from `@mui/x-internals` (#20365) @alexfauquette
+- [charts] Fix unnecessary errors in dev mode (#20380) @JCQuintas
+
+#### `@mui/x-charts-pro@8.19.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.19.0`, plus:
+
+- [charts-pro] Add pan on `wheel` to zoom (#19998) @JCQuintas
+- [charts-pro] Fix zoom slider preview having an opaque background in dark mode (#20367) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.19.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.19.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.19.0`
+
+- [tree view] Enable lazy load when children count is not know in tree view (#18680) @noobyogi0010
+- [tree view] Fix unwanted behaviors on the item re-ordering (#20368) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.19.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.19.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.19.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add minimum Typescript version to migration guide (#20320) @siriwatknp
+- [docs] Fix Autosizing documentation (#20348) @siriwatknp
+- [docs] Fix separator opacity in demo (#20293) @sai6855
+- [docs] Replace deprecated `LoadingButton` with `Button` component (#20208) @Janpot
+
+### Core
+
+- [code-infra] Add new broken links checker (#20120) @Janpot
+- [code-infra] Disable Codspeed pipeline (#20370) @JCQuintas
+- [code-infra] Optimize `checkMaterialVersion` (#20307) @Janpot
+- [code-infra] Use utils from code-infra for changelog and PR creation (#20406) @brijeshb42
+- [docs-infra] Revert `@docsearch/react` (#20313) @Janpot
+
+### Miscellaneous
+
+- [test] Fix browser tests skipping some projects (#20318) @cherniavskii
+- [test] Update `use-react-version` pnpm script (#20319) @cherniavskii
+
 ## 8.18.0
 
 <!-- generated comparing v8.17.0..master -->

package/ChartDataProviderPro/ChartDataProviderPro.js

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

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -34,12 +34,15 @@ const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect', {
     props: {
       preview: true
     },
-    style: {
-      fill: 'transparent',
+    style: (0, _extends2.default)({
+      fill: 'transparent'
+    }, theme.applyStyles('dark', {
+      fill: 'transparent'
+    }), {
       rx: 4,
       ry: 4,
       stroke: theme.palette.grey[500]
-    }
+    })
   }]
 }));
 function ChartAxisZoomSliderActiveTrack({

package/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.js

@@ -9,7 +9,7 @@ var _internals = require("@mui/x-charts/internals");
 var _computeAxisValue = require("./computeAxisValue");
 const selectorFunnel = state => state.funnel;
 exports.selectorFunnel = selectorFunnel;
-const selectorFunnelGap = exports.selectorFunnelGap = (0, _internals.createSelector)([selectorFunnel], funnel => funnel?.gap ?? 0);
+const selectorFunnelGap = exports.selectorFunnelGap = (0, _store.createSelector)(selectorFunnel, funnel => funnel?.gap ?? 0);
 const selectorChartXAxis = exports.selectorChartXAxis = (0, _store.createSelectorMemoized)(_internals.selectorChartRawXAxis, _internals.selectorChartDrawingArea, _internals.selectorChartSeriesProcessed, _internals.selectorChartSeriesConfig, selectorFunnelGap, (axis, drawingArea, formattedSeries, seriesConfig, gap) => (0, _computeAxisValue.computeAxisValue)({
   drawingArea,
   formattedSeries,

package/LineChartPro/LineChartPro.js

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

package/SankeyChart/plugins/useSankeyHighlight.selectors.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectorSankeyHighlightedItem = exports.selectorNodeHighlightConfig = exports.selectorNodeFadeConfig = exports.selectorLinkHighlightConfig = exports.selectorLinkFadeConfig = exports.selectorIsSankeyItemFaded = exports.selectorIsNodeHighlighted = exports.selectorIsLinkHighlighted = void 0;
-var _internals = require("@mui/x-charts/internals");
+var _store = require("@mui/x-internals/store");
 const selectorSankeyHighlight = state => state.highlight;
 const selectSeries = state => state.series;
-const selectorSankeySeries = (0, _internals.createSelector)([selectSeries], series => series.processedSeries.sankey?.series[series.processedSeries.sankey?.seriesOrder[0]] || null);
+const selectorSankeySeries = (0, _store.createSelector)(selectSeries, series => series.processedSeries.sankey?.series[series.processedSeries.sankey?.seriesOrder[0]] || null);
 const DEFAULT_NODE_HIGHLIGHT = 'links';
 const DEFAULT_LINK_HIGHLIGHT = 'links';
 const DEFAULT_FADE = 'none';
@@ -16,32 +16,32 @@ const DEFAULT_FADE = 'none';
  * Get the node highlight configuration from the Sankey series.
  * Defaults to 'nodes' if not specified.
  */
-const selectorNodeHighlightConfig = exports.selectorNodeHighlightConfig = (0, _internals.createSelector)([selectorSankeySeries], series => series?.nodeOptions?.highlight ?? DEFAULT_NODE_HIGHLIGHT);
+const selectorNodeHighlightConfig = exports.selectorNodeHighlightConfig = (0, _store.createSelector)(selectorSankeySeries, series => series?.nodeOptions?.highlight ?? DEFAULT_NODE_HIGHLIGHT);
 
 /**
  * Get the node fade configuration from the Sankey series.
  * Defaults to 'none' if not specified.
  */
-const selectorNodeFadeConfig = exports.selectorNodeFadeConfig = (0, _internals.createSelector)([selectorSankeySeries], series => series?.nodeOptions?.fade ?? DEFAULT_FADE);
+const selectorNodeFadeConfig = exports.selectorNodeFadeConfig = (0, _store.createSelector)(selectorSankeySeries, series => series?.nodeOptions?.fade ?? DEFAULT_FADE);
 
 /**
  * Get the link highlight configuration from the Sankey series.
  * Defaults to 'links' if not specified.
  */
-const selectorLinkHighlightConfig = exports.selectorLinkHighlightConfig = (0, _internals.createSelector)([selectorSankeySeries], series => series?.linkOptions?.highlight ?? DEFAULT_LINK_HIGHLIGHT);
+const selectorLinkHighlightConfig = exports.selectorLinkHighlightConfig = (0, _store.createSelector)(selectorSankeySeries, series => series?.linkOptions?.highlight ?? DEFAULT_LINK_HIGHLIGHT);
 
 /**
  * Get the link fade configuration from the Sankey series.
  * Defaults to 'none' if not specified.
  */
-const selectorLinkFadeConfig = exports.selectorLinkFadeConfig = (0, _internals.createSelector)([selectorSankeySeries], series => series?.linkOptions?.fade ?? DEFAULT_FADE);
+const selectorLinkFadeConfig = exports.selectorLinkFadeConfig = (0, _store.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.
  */
-const selectorSankeyHighlightedItem = exports.selectorSankeyHighlightedItem = (0, _internals.createSelector)([selectorSankeyHighlight], highlight => highlight.item);
+const selectorSankeyHighlightedItem = exports.selectorSankeyHighlightedItem = (0, _store.createSelector)(selectorSankeyHighlight, highlight => highlight.item);
 
 /**
  * Determines if a specific node should be highlighted.
@@ -49,7 +49,7 @@ const selectorSankeyHighlightedItem = exports.selectorSankeyHighlightedItem = (0
  * - It's the highlighted node (unless highlight mode is 'none')
  * - It's connected to a highlighted link (based on linkOptions.highlight)
  */
-const selectorIsNodeHighlighted = exports.selectorIsNodeHighlighted = (0, _internals.createSelector)([selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig], (highlightedItem, nodeHighlight, linkHighlight, nodeId) => {
+const selectorIsNodeHighlighted = exports.selectorIsNodeHighlighted = (0, _store.createSelector)(selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig, (highlightedItem, nodeHighlight, linkHighlight, nodeId) => {
   if (!highlightedItem) {
     return false;
   }
@@ -84,7 +84,7 @@ const selectorIsNodeHighlighted = exports.selectorIsNodeHighlighted = (0, _inter
  * - It's the highlighted link (unless highlight mode is 'none')
  * - It's connected to a highlighted node (based on nodeOptions.highlight)
  */
-const selectorIsLinkHighlighted = exports.selectorIsLinkHighlighted = (0, _internals.createSelector)([selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig], (highlightedItem, nodeHighlight, linkHighlight, link) => {
+const selectorIsLinkHighlighted = exports.selectorIsLinkHighlighted = (0, _store.createSelector)(selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig, (highlightedItem, nodeHighlight, linkHighlight, link) => {
   if (!highlightedItem) {
     return false;
   }
@@ -117,7 +117,7 @@ const selectorIsLinkHighlighted = exports.selectorIsLinkHighlighted = (0, _inter
  * - This item is not highlighted
  * - The fade mode is 'global' for the highlighted element type
  */
-const selectorIsSankeyItemFaded = exports.selectorIsSankeyItemFaded = (0, _internals.createSelector)([selectorSankeyHighlightedItem, selectorNodeFadeConfig, selectorLinkFadeConfig], (highlightedItem, nodeFade, linkFade, isHighlighted) => {
+const selectorIsSankeyItemFaded = exports.selectorIsSankeyItemFaded = (0, _store.createSelector)(selectorSankeyHighlightedItem, selectorNodeFadeConfig, selectorLinkFadeConfig, (highlightedItem, nodeFade, linkFade, isHighlighted) => {
   if (!highlightedItem || isHighlighted) {
     return false;
   }

package/ScatterChartPro/ScatterChartPro.js

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

package/esm/BarChartPro/BarChartPro.js

@@ -1439,7 +1439,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.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
@@ -1447,6 +1447,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.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/ChartDataProviderPro/ChartDataProviderPro.js

@@ -10,7 +10,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 = "MTc2Mjk5MjAwMDAwMA==";
+const releaseInfo = "MTc2MzU5NjgwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -27,12 +27,15 @@ const ZoomSliderActiveTrackRect = styled('rect', {
     props: {
       preview: true
     },
-    style: {
-      fill: 'transparent',
+    style: _extends({
+      fill: 'transparent'
+    }, theme.applyStyles('dark', {
+      fill: 'transparent'
+    }), {
       rx: 4,
       ry: 4,
       stroke: theme.palette.grey[500]
-    }
+    })
   }]
 }));
 export function ChartAxisZoomSliderActiveTrack({

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.js

@@ -1,8 +1,8 @@
-import { createSelectorMemoized } from '@mui/x-internals/store';
-import { createSelector, selectorChartSeriesConfig, selectorChartSeriesProcessed, selectorChartDrawingArea, selectorChartRawXAxis, selectorChartRawYAxis } from '@mui/x-charts/internals';
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { selectorChartSeriesConfig, selectorChartSeriesProcessed, selectorChartDrawingArea, selectorChartRawXAxis, selectorChartRawYAxis } from '@mui/x-charts/internals';
 import { computeAxisValue } from "./computeAxisValue.js";
 export const selectorFunnel = state => state.funnel;
-export const selectorFunnelGap = createSelector([selectorFunnel], funnel => funnel?.gap ?? 0);
+export const selectorFunnelGap = createSelector(selectorFunnel, funnel => funnel?.gap ?? 0);
 export const selectorChartXAxis = createSelectorMemoized(selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorFunnelGap, (axis, drawingArea, formattedSeries, seriesConfig, gap) => computeAxisValue({
   drawingArea,
   formattedSeries,

package/esm/LineChartPro/LineChartPro.js

@@ -1441,7 +1441,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.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
@@ -1449,6 +1449,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.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/SankeyChart/plugins/useSankeyHighlight.selectors.js

@@ -1,7 +1,7 @@
-import { createSelector } from '@mui/x-charts/internals';
+import { createSelector } from '@mui/x-internals/store';
 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(selectSeries, series => series.processedSeries.sankey?.series[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.19.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);