@mui/x-charts-pro 8.18.0 → 8.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/BarChartPro/BarChartPro.js +6 -1
  2. package/CHANGELOG.md +175 -0
  3. package/ChartDataProviderPro/ChartDataProviderPro.js +1 -1
  4. package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js +6 -3
  5. package/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js +20 -6
  6. package/ChartZoomSlider/internals/previews/AreaPreviewPlot.js +1 -1
  7. package/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.js +1 -1
  8. package/LineChartPro/LineChartPro.js +6 -1
  9. package/SankeyChart/plugins/useSankeyHighlight.selectors.js +10 -10
  10. package/ScatterChartPro/ScatterChartPro.js +6 -1
  11. package/esm/BarChartPro/BarChartPro.js +6 -1
  12. package/esm/ChartDataProviderPro/ChartDataProviderPro.js +1 -1
  13. package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js +6 -3
  14. package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js +20 -6
  15. package/esm/ChartZoomSlider/internals/previews/AreaPreviewPlot.js +1 -1
  16. package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.js +3 -3
  17. package/esm/LineChartPro/LineChartPro.js +6 -1
  18. package/esm/SankeyChart/plugins/useSankeyHighlight.selectors.js +11 -11
  19. package/esm/ScatterChartPro/ScatterChartPro.js +6 -1
  20. package/esm/hooks/useFunnelSeries.js +3 -5
  21. package/esm/hooks/useHeatmapSeries.js +3 -5
  22. package/esm/hooks/useSankeySeries.js +3 -5
  23. package/esm/index.js +1 -1
  24. package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.d.ts +4 -12
  25. package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.js +5 -4
  26. package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.ts +17 -2
  27. package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.d.ts +8 -0
  28. package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.js +98 -0
  29. package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.d.ts +1 -1
  30. package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.js +2 -2
  31. package/esm/internals/plugins/useChartProZoom/initializeZoomInteractionConfig.d.ts +2 -1
  32. package/esm/internals/plugins/useChartProZoom/initializeZoomInteractionConfig.js +38 -5
  33. package/esm/internals/plugins/useChartProZoom/useChartProZoom.js +9 -3
  34. package/esm/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +7 -6
  35. package/esm/utils/index.d.ts +1 -0
  36. package/esm/utils/index.js +2 -0
  37. package/hooks/useFunnelSeries.js +2 -5
  38. package/hooks/useHeatmapSeries.js +2 -5
  39. package/hooks/useSankeySeries.js +2 -5
  40. package/index.js +1 -1
  41. package/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.d.ts +4 -12
  42. package/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.js +4 -3
  43. package/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.ts +17 -2
  44. package/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.d.ts +8 -0
  45. package/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.js +105 -0
  46. package/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.d.ts +1 -1
  47. package/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.js +2 -2
  48. package/internals/plugins/useChartProZoom/initializeZoomInteractionConfig.d.ts +2 -1
  49. package/internals/plugins/useChartProZoom/initializeZoomInteractionConfig.js +38 -5
  50. package/internals/plugins/useChartProZoom/useChartProZoom.js +9 -3
  51. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +6 -5
  52. package/package.json +6 -6
  53. package/utils/index.d.ts +1 -0
  54. package/utils/index.js +16 -0
@@ -1446,7 +1446,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
1446
1446
  * Configuration for zoom interactions.
1447
1447
  */
1448
1448
  zoomInteractionConfig: _propTypes.default.shape({
1449
- pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag']), _propTypes.default.shape({
1449
+ pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag', 'wheel']), _propTypes.default.shape({
1450
1450
  pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
1451
1451
  requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
1452
1452
  type: _propTypes.default.oneOf(['drag']).isRequired
@@ -1454,6 +1454,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
1454
1454
  pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
1455
1455
  requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
1456
1456
  type: _propTypes.default.oneOf(['pressAndDrag']).isRequired
1457
+ }), _propTypes.default.shape({
1458
+ allowedDirection: _propTypes.default.oneOf(['x', 'xy', 'y']),
1459
+ pointerMode: _propTypes.default.any,
1460
+ requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
1461
+ type: _propTypes.default.oneOf(['wheel']).isRequired
1457
1462
  })]).isRequired),
1458
1463
  zoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), _propTypes.default.shape({
1459
1464
  pointerMode: _propTypes.default.any,
package/CHANGELOG.md CHANGED
@@ -5,6 +5,181 @@
5
5
  All notable changes to this project will be documented in this file.
6
6
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
7
7
 
8
+ ## 8.20.0
9
+
10
+ _Nov 26, 2025_
11
+
12
+ We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
13
+
14
+ - 🔃 Data Grid tree data now supports row reordering. See the [Drag-and-drop tree data reordering](https://mui.com/x/react-data-grid/tree-data/#drag-and-drop-tree-data-reordering) section for more details.
15
+ - 🐞 Bugfixes
16
+
17
+ The following team members contributed to this release:
18
+ @alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @siriwatknp, @JCQuintas, @MBilalShafi, @prakhargupta1
19
+
20
+ ### Data Grid
21
+
22
+ #### `@mui/x-data-grid@8.20.0`
23
+
24
+ - [DataGrid] Fix RTL virtualization to display columns when viewport width is larger than the grid (#20409) @siriwatknp
25
+ - [DataGrid] Fix row range selection (#20442) @arminmeh
26
+ - [DataGrid] Initialize data grid core packages (#20276) @cherniavskii
27
+ - [DataGrid] Improve accessibility of the sort icon (#20430) @arminmeh
28
+ - [DataGrid] Use `viewport` as a boundary for the `BasePopper` flip (#20311) @arminmeh
29
+
30
+ #### `@mui/x-data-grid-pro@8.20.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
31
+
32
+ Same changes as in `@mui/x-data-grid@8.20.0`, plus:
33
+
34
+ - [DataGridPro] Avoid automatic scroll back to the focused header filter after it leaves the viewport (#20416) @arminmeh
35
+ - [DataGridPro] Tree data row reordering (#19401) @MBilalShafi
36
+
37
+ #### `@mui/x-data-grid-premium@8.20.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
38
+
39
+ Same changes as in `@mui/x-data-grid-pro@8.20.0`.
40
+
41
+ ### Charts
42
+
43
+ #### `@mui/x-charts@8.20.0`
44
+
45
+ - [charts] Fix item tooltip position with node anchor (#20421) @alexfauquette
46
+ - [charts] Fix radar item tooltip closing bug (#20429) @alexfauquette
47
+ - [charts] Move series processing to selector (#20388) @JCQuintas
48
+ - [charts] Prevent pointer out from removing controlled highlight (#20385) @alexfauquette
49
+
50
+ #### `@mui/x-charts-pro@8.20.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
51
+
52
+ Same changes as in `@mui/x-charts@8.20.0`, plus:
53
+
54
+ - [charts-pro] Fix Content-Security-Policy nonce not being correctly set on export (#20395) @bernardobelchior
55
+ - [charts-pro] Improve vertical zoom slider thumb on mobile (#20439) @bernardobelchior
56
+ - [charts-pro] Provide arguments to the `AreaPlotRoot` styled component (#20414) @arminmeh
57
+ - [charts-pro] Remove grid outside the drawing area (#20412) @alexfauquette
58
+
59
+ #### `@mui/x-charts-premium@8.20.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
60
+
61
+ Same changes as in `@mui/x-charts-pro@8.20.0`, plus:
62
+
63
+ - [charts-premium] Add explicit return type to `ChartsRenderer` for better compatibility with React 18 (#20413) @arminmeh
64
+
65
+ ### Docs
66
+
67
+ - [docs] Add `llms.txt` link to the sidebar (#20312) @siriwatknp
68
+ - [docs] Add a line chart demo for the Overview section (#20239) @prakhargupta1
69
+
70
+ ## 8.19.0
71
+
72
+ _Nov 20, 2025_
73
+
74
+ We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
75
+
76
+ - 🔎 Add pan on `wheel` to the charts zoom
77
+ - ⌨️ Allow opt-in to [tab navigation](https://mui.com/x/react-data-grid/accessibility/#tab-navigation) inside the Data Grid.
78
+ - ⚙️ 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.
79
+ - 🐞 Bugfixes
80
+ - 📚 Documentation improvements
81
+
82
+ Special thanks go out to these community members for their valuable contributions:
83
+ @lauri865, @noobyogi0010, @sai6855
84
+
85
+ The following team members contributed to this release:
86
+ @alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mj12albert, @noraleonte, @rita-codes, @siriwatknp, @ZeeshanTamboli
87
+
88
+ ### Data Grid
89
+
90
+ #### `@mui/x-data-grid@8.19.0`
91
+
92
+ - [DataGrid] Add `tabNavigation` prop to control tab navigation in the grid (#20286) @arminmeh
93
+ - [DataGrid] Allow to focus disabled checkbox cells (#19959) @mj12albert
94
+ - [DataGrid] Alternative actions column definition API (#15041) @cherniavskii
95
+ - [DataGrid] Fix failing tests (#20332) @cherniavskii
96
+ - [DataGrid] Prevent Safari 26 error in the event handler (#20369) @arminmeh
97
+ - [DataGrid] Undeprecate the `autoHeight` prop (#20363) @cherniavskii
98
+ - [DataGrid] Fix print export grid dimensions with dynamic row height and print styles (#19835) @cherniavskii
99
+
100
+ #### `@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')
101
+
102
+ Same changes as in `@mui/x-data-grid@8.19.0`.
103
+
104
+ #### `@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')
105
+
106
+ Same changes as in `@mui/x-data-grid-pro@8.19.0`, plus:
107
+
108
+ - [DataGridPremium] Fix aggregation with sorting (#19892) @lauri865
109
+ - [DataGridPremium] Lock `ExcelJS` version (#20329) @cherniavskii
110
+
111
+ ### Date and Time Pickers
112
+
113
+ #### `@mui/x-date-pickers@8.19.0`
114
+
115
+ - [pickers] Do not loose `slotProps.field.slotProps` (#20322) @flaviendelangle
116
+
117
+ #### `@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')
118
+
119
+ Same changes as in `@mui/x-date-pickers@8.19.0`.
120
+
121
+ ### Charts
122
+
123
+ #### `@mui/x-charts@8.19.0`
124
+
125
+ - [charts] Expose `niceDomain` utility (#20250) @bernardobelchior
126
+ - [charts] Fix benchmark regression by downgrading to JSDOM v26 (#20405) @bernardobelchior
127
+ - [charts] Fix Pie Chart keyboard focus highlight (#20358) @JCQuintas
128
+ - [charts] Memoize series selectors (#20326) @JCQuintas
129
+ - [charts] Relax dataset type (#20294) @bernardobelchior
130
+ - [charts] Remove `touch-action: pan-y` when zoom is disabled (#20204) @bernardobelchior
131
+ - [charts] Use `getBBox()` for correct SVG sizes in firefox (#20309) @JCQuintas
132
+ - [charts] Use directly selector from `@mui/x-internals` (#20365) @alexfauquette
133
+ - [charts] Fix unnecessary errors in dev mode (#20380) @JCQuintas
134
+
135
+ #### `@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')
136
+
137
+ Same changes as in `@mui/x-charts@8.19.0`, plus:
138
+
139
+ - [charts-pro] Add pan on `wheel` to zoom (#19998) @JCQuintas
140
+ - [charts-pro] Fix zoom slider preview having an opaque background in dark mode (#20367) @bernardobelchior
141
+
142
+ #### `@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')
143
+
144
+ Same changes as in `@mui/x-charts-pro@8.19.0`.
145
+
146
+ ### Tree View
147
+
148
+ #### `@mui/x-tree-view@8.19.0`
149
+
150
+ - [tree view] Enable lazy load when children count is not know in tree view (#18680) @noobyogi0010
151
+ - [tree view] Fix unwanted behaviors on the item re-ordering (#20368) @flaviendelangle
152
+
153
+ #### `@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')
154
+
155
+ Same changes as in `@mui/x-tree-view@8.19.0`.
156
+
157
+ ### Codemod
158
+
159
+ #### `@mui/x-codemod@8.19.0`
160
+
161
+ Internal changes.
162
+
163
+ ### Docs
164
+
165
+ - [docs] Add minimum Typescript version to migration guide (#20320) @siriwatknp
166
+ - [docs] Fix Autosizing documentation (#20348) @siriwatknp
167
+ - [docs] Fix separator opacity in demo (#20293) @sai6855
168
+ - [docs] Replace deprecated `LoadingButton` with `Button` component (#20208) @Janpot
169
+
170
+ ### Core
171
+
172
+ - [code-infra] Add new broken links checker (#20120) @Janpot
173
+ - [code-infra] Disable Codspeed pipeline (#20370) @JCQuintas
174
+ - [code-infra] Optimize `checkMaterialVersion` (#20307) @Janpot
175
+ - [code-infra] Use utils from code-infra for changelog and PR creation (#20406) @brijeshb42
176
+ - [docs-infra] Revert `@docsearch/react` (#20313) @Janpot
177
+
178
+ ### Miscellaneous
179
+
180
+ - [test] Fix browser tests skipping some projects (#20318) @cherniavskii
181
+ - [test] Update `use-react-version` pnpm script (#20319) @cherniavskii
182
+
8
183
  ## 8.18.0
9
184
 
10
185
  <!-- generated comparing v8.17.0..master -->
@@ -16,7 +16,7 @@ var _material = require("../internals/material");
16
16
  var _allPlugins = require("../internals/plugins/allPlugins");
17
17
  var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
18
18
  var _jsxRuntime = require("react/jsx-runtime");
19
- const releaseInfo = "MTc2Mjk5MjAwMDAwMA==";
19
+ const releaseInfo = "MTc2NDExNTIwMDAwMA==";
20
20
  const packageIdentifier = 'x-charts-pro';
21
21
  /**
22
22
  * Orchestrates the data providers for the chart components and hooks.
@@ -34,12 +34,15 @@ const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect', {
34
34
  props: {
35
35
  preview: true
36
36
  },
37
- style: {
38
- fill: 'transparent',
37
+ style: (0, _extends2.default)({
38
+ fill: 'transparent'
39
+ }, theme.applyStyles('dark', {
40
+ fill: 'transparent'
41
+ }), {
39
42
  rx: 4,
40
43
  ry: 4,
41
44
  stroke: theme.palette.grey[500]
42
- }
45
+ })
43
46
  }]
44
47
  }));
45
48
  function ChartAxisZoomSliderActiveTrack({
@@ -35,6 +35,10 @@ const Rect = (0, _styles.styled)('rect')(({
35
35
  cursor: 'ns-resize'
36
36
  }
37
37
  }));
38
+ function preventDefault(event) {
39
+ event.preventDefault();
40
+ }
41
+
38
42
  /**
39
43
  * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
40
44
  * @internal
@@ -60,28 +64,38 @@ const ChartAxisZoomSliderThumb = exports.ChartAxisZoomSliderThumb = /*#__PURE__*
60
64
  React.useEffect(() => {
61
65
  const thumb = thumbRef.current;
62
66
  if (!thumb) {
63
- return;
67
+ return () => {};
64
68
  }
69
+
70
+ // Prevent scrolling on touch devices when dragging the thumb
71
+ thumb.addEventListener('touchmove', preventDefault, {
72
+ passive: false
73
+ });
65
74
  const onPointerMove = (0, _rafThrottle.rafThrottle)(event => {
66
75
  onMoveEvent(event);
67
76
  });
68
- const onPointerUp = () => {
77
+ const onPointerEnd = event => {
69
78
  thumb.removeEventListener('pointermove', onPointerMove);
70
- thumb.removeEventListener('pointerup', onPointerUp);
79
+ thumb.removeEventListener('pointerup', onPointerEnd);
80
+ thumb.removeEventListener('pointercancel', onPointerEnd);
81
+ thumb.releasePointerCapture(event.pointerId);
71
82
  };
72
83
  const onPointerDown = event => {
73
84
  // Prevent text selection when dragging the thumb
74
85
  event.preventDefault();
75
86
  event.stopPropagation();
76
87
  thumb.setPointerCapture(event.pointerId);
77
- thumb.addEventListener('pointerup', onPointerUp);
78
88
  thumb.addEventListener('pointermove', onPointerMove);
89
+ thumb.addEventListener('pointercancel', onPointerEnd);
90
+ thumb.addEventListener('pointerup', onPointerEnd);
79
91
  };
80
92
  thumb.addEventListener('pointerdown', onPointerDown);
81
-
82
- // eslint-disable-next-line consistent-return
83
93
  return () => {
84
94
  thumb.removeEventListener('pointerdown', onPointerDown);
95
+ thumb.removeEventListener('pointermove', onPointerMove);
96
+ thumb.removeEventListener('pointercancel', onPointerEnd);
97
+ thumb.removeEventListener('pointerup', onPointerEnd);
98
+ thumb.removeEventListener('touchmove', preventDefault);
85
99
  onPointerMove.clear();
86
100
  };
87
101
  }, [onMoveEvent, orientation]);
@@ -16,7 +16,7 @@ const _excluded = ["id", "color", "gradientId", "onClick"];
16
16
  const AreaPlotRoot = (0, _styles.styled)('g', {
17
17
  name: 'MuiAreaPlot',
18
18
  slot: 'Root'
19
- })();
19
+ })({});
20
20
  function AreaPreviewPlot({
21
21
  axisId
22
22
  }) {
@@ -9,7 +9,7 @@ var _internals = require("@mui/x-charts/internals");
9
9
  var _computeAxisValue = require("./computeAxisValue");
10
10
  const selectorFunnel = state => state.funnel;
11
11
  exports.selectorFunnel = selectorFunnel;
12
- const selectorFunnelGap = exports.selectorFunnelGap = (0, _internals.createSelector)([selectorFunnel], funnel => funnel?.gap ?? 0);
12
+ const selectorFunnelGap = exports.selectorFunnelGap = (0, _store.createSelector)(selectorFunnel, funnel => funnel?.gap ?? 0);
13
13
  const selectorChartXAxis = exports.selectorChartXAxis = (0, _store.createSelectorMemoized)(_internals.selectorChartRawXAxis, _internals.selectorChartDrawingArea, _internals.selectorChartSeriesProcessed, _internals.selectorChartSeriesConfig, selectorFunnelGap, (axis, drawingArea, formattedSeries, seriesConfig, gap) => (0, _computeAxisValue.computeAxisValue)({
14
14
  drawingArea,
15
15
  formattedSeries,
@@ -1448,7 +1448,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
1448
1448
  * Configuration for zoom interactions.
1449
1449
  */
1450
1450
  zoomInteractionConfig: _propTypes.default.shape({
1451
- pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag']), _propTypes.default.shape({
1451
+ pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag', 'wheel']), _propTypes.default.shape({
1452
1452
  pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
1453
1453
  requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
1454
1454
  type: _propTypes.default.oneOf(['drag']).isRequired
@@ -1456,6 +1456,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
1456
1456
  pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
1457
1457
  requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
1458
1458
  type: _propTypes.default.oneOf(['pressAndDrag']).isRequired
1459
+ }), _propTypes.default.shape({
1460
+ allowedDirection: _propTypes.default.oneOf(['x', 'xy', 'y']),
1461
+ pointerMode: _propTypes.default.any,
1462
+ requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
1463
+ type: _propTypes.default.oneOf(['wheel']).isRequired
1459
1464
  })]).isRequired),
1460
1465
  zoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), _propTypes.default.shape({
1461
1466
  pointerMode: _propTypes.default.any,
@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.selectorSankeyHighlightedItem = exports.selectorNodeHighlightConfig = exports.selectorNodeFadeConfig = exports.selectorLinkHighlightConfig = exports.selectorLinkFadeConfig = exports.selectorIsSankeyItemFaded = exports.selectorIsNodeHighlighted = exports.selectorIsLinkHighlighted = void 0;
7
+ var _store = require("@mui/x-internals/store");
7
8
  var _internals = require("@mui/x-charts/internals");
8
9
  const selectorSankeyHighlight = state => state.highlight;
9
- const selectSeries = state => state.series;
10
- const selectorSankeySeries = (0, _internals.createSelector)([selectSeries], series => series.processedSeries.sankey?.series[series.processedSeries.sankey?.seriesOrder[0]] || null);
10
+ const selectorSankeySeries = (0, _store.createSelector)(_internals.selectorChartSeriesProcessed, processedSeries => processedSeries.sankey?.series[processedSeries.sankey?.seriesOrder[0]] || null);
11
11
  const DEFAULT_NODE_HIGHLIGHT = 'links';
12
12
  const DEFAULT_LINK_HIGHLIGHT = 'links';
13
13
  const DEFAULT_FADE = 'none';
@@ -16,32 +16,32 @@ const DEFAULT_FADE = 'none';
16
16
  * Get the node highlight configuration from the Sankey series.
17
17
  * Defaults to 'nodes' if not specified.
18
18
  */
19
- const selectorNodeHighlightConfig = exports.selectorNodeHighlightConfig = (0, _internals.createSelector)([selectorSankeySeries], series => series?.nodeOptions?.highlight ?? DEFAULT_NODE_HIGHLIGHT);
19
+ const selectorNodeHighlightConfig = exports.selectorNodeHighlightConfig = (0, _store.createSelector)(selectorSankeySeries, series => series?.nodeOptions?.highlight ?? DEFAULT_NODE_HIGHLIGHT);
20
20
 
21
21
  /**
22
22
  * Get the node fade configuration from the Sankey series.
23
23
  * Defaults to 'none' if not specified.
24
24
  */
25
- const selectorNodeFadeConfig = exports.selectorNodeFadeConfig = (0, _internals.createSelector)([selectorSankeySeries], series => series?.nodeOptions?.fade ?? DEFAULT_FADE);
25
+ const selectorNodeFadeConfig = exports.selectorNodeFadeConfig = (0, _store.createSelector)(selectorSankeySeries, series => series?.nodeOptions?.fade ?? DEFAULT_FADE);
26
26
 
27
27
  /**
28
28
  * Get the link highlight configuration from the Sankey series.
29
29
  * Defaults to 'links' if not specified.
30
30
  */
31
- const selectorLinkHighlightConfig = exports.selectorLinkHighlightConfig = (0, _internals.createSelector)([selectorSankeySeries], series => series?.linkOptions?.highlight ?? DEFAULT_LINK_HIGHLIGHT);
31
+ const selectorLinkHighlightConfig = exports.selectorLinkHighlightConfig = (0, _store.createSelector)(selectorSankeySeries, series => series?.linkOptions?.highlight ?? DEFAULT_LINK_HIGHLIGHT);
32
32
 
33
33
  /**
34
34
  * Get the link fade configuration from the Sankey series.
35
35
  * Defaults to 'none' if not specified.
36
36
  */
37
- const selectorLinkFadeConfig = exports.selectorLinkFadeConfig = (0, _internals.createSelector)([selectorSankeySeries], series => series?.linkOptions?.fade ?? DEFAULT_FADE);
37
+ const selectorLinkFadeConfig = exports.selectorLinkFadeConfig = (0, _store.createSelector)(selectorSankeySeries, series => series?.linkOptions?.fade ?? DEFAULT_FADE);
38
38
 
39
39
  /**
40
40
  * Get the currently highlighted item in the Sankey chart.
41
41
  * @param {UseSankeyHighlightSignature['state']} state The state of the chart.
42
42
  * @returns {SankeyItemIdentifier | null} The highlighted item identifier or null.
43
43
  */
44
- const selectorSankeyHighlightedItem = exports.selectorSankeyHighlightedItem = (0, _internals.createSelector)([selectorSankeyHighlight], highlight => highlight.item);
44
+ const selectorSankeyHighlightedItem = exports.selectorSankeyHighlightedItem = (0, _store.createSelector)(selectorSankeyHighlight, highlight => highlight.item);
45
45
 
46
46
  /**
47
47
  * Determines if a specific node should be highlighted.
@@ -49,7 +49,7 @@ const selectorSankeyHighlightedItem = exports.selectorSankeyHighlightedItem = (0
49
49
  * - It's the highlighted node (unless highlight mode is 'none')
50
50
  * - It's connected to a highlighted link (based on linkOptions.highlight)
51
51
  */
52
- const selectorIsNodeHighlighted = exports.selectorIsNodeHighlighted = (0, _internals.createSelector)([selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig], (highlightedItem, nodeHighlight, linkHighlight, nodeId) => {
52
+ const selectorIsNodeHighlighted = exports.selectorIsNodeHighlighted = (0, _store.createSelector)(selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig, (highlightedItem, nodeHighlight, linkHighlight, nodeId) => {
53
53
  if (!highlightedItem) {
54
54
  return false;
55
55
  }
@@ -84,7 +84,7 @@ const selectorIsNodeHighlighted = exports.selectorIsNodeHighlighted = (0, _inter
84
84
  * - It's the highlighted link (unless highlight mode is 'none')
85
85
  * - It's connected to a highlighted node (based on nodeOptions.highlight)
86
86
  */
87
- const selectorIsLinkHighlighted = exports.selectorIsLinkHighlighted = (0, _internals.createSelector)([selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig], (highlightedItem, nodeHighlight, linkHighlight, link) => {
87
+ const selectorIsLinkHighlighted = exports.selectorIsLinkHighlighted = (0, _store.createSelector)(selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig, (highlightedItem, nodeHighlight, linkHighlight, link) => {
88
88
  if (!highlightedItem) {
89
89
  return false;
90
90
  }
@@ -117,7 +117,7 @@ const selectorIsLinkHighlighted = exports.selectorIsLinkHighlighted = (0, _inter
117
117
  * - This item is not highlighted
118
118
  * - The fade mode is 'global' for the highlighted element type
119
119
  */
120
- const selectorIsSankeyItemFaded = exports.selectorIsSankeyItemFaded = (0, _internals.createSelector)([selectorSankeyHighlightedItem, selectorNodeFadeConfig, selectorLinkFadeConfig], (highlightedItem, nodeFade, linkFade, isHighlighted) => {
120
+ const selectorIsSankeyItemFaded = exports.selectorIsSankeyItemFaded = (0, _store.createSelector)(selectorSankeyHighlightedItem, selectorNodeFadeConfig, selectorLinkFadeConfig, (highlightedItem, nodeFade, linkFade, isHighlighted) => {
121
121
  if (!highlightedItem || isHighlighted) {
122
122
  return false;
123
123
  }
@@ -1430,7 +1430,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
1430
1430
  * Configuration for zoom interactions.
1431
1431
  */
1432
1432
  zoomInteractionConfig: _propTypes.default.shape({
1433
- pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag']), _propTypes.default.shape({
1433
+ pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag', 'wheel']), _propTypes.default.shape({
1434
1434
  pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
1435
1435
  requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
1436
1436
  type: _propTypes.default.oneOf(['drag']).isRequired
@@ -1438,6 +1438,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
1438
1438
  pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
1439
1439
  requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
1440
1440
  type: _propTypes.default.oneOf(['pressAndDrag']).isRequired
1441
+ }), _propTypes.default.shape({
1442
+ allowedDirection: _propTypes.default.oneOf(['x', 'xy', 'y']),
1443
+ pointerMode: _propTypes.default.any,
1444
+ requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
1445
+ type: _propTypes.default.oneOf(['wheel']).isRequired
1441
1446
  })]).isRequired),
1442
1447
  zoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), _propTypes.default.shape({
1443
1448
  pointerMode: _propTypes.default.any,
@@ -1439,7 +1439,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
1439
1439
  * Configuration for zoom interactions.
1440
1440
  */
1441
1441
  zoomInteractionConfig: PropTypes.shape({
1442
- pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag']), PropTypes.shape({
1442
+ pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag', 'wheel']), PropTypes.shape({
1443
1443
  pointerMode: PropTypes.oneOf(['mouse', 'touch']),
1444
1444
  requiredKeys: PropTypes.arrayOf(PropTypes.string),
1445
1445
  type: PropTypes.oneOf(['drag']).isRequired
@@ -1447,6 +1447,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
1447
1447
  pointerMode: PropTypes.oneOf(['mouse', 'touch']),
1448
1448
  requiredKeys: PropTypes.arrayOf(PropTypes.string),
1449
1449
  type: PropTypes.oneOf(['pressAndDrag']).isRequired
1450
+ }), PropTypes.shape({
1451
+ allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
1452
+ pointerMode: PropTypes.any,
1453
+ requiredKeys: PropTypes.arrayOf(PropTypes.string),
1454
+ type: PropTypes.oneOf(['wheel']).isRequired
1450
1455
  })]).isRequired),
1451
1456
  zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
1452
1457
  pointerMode: PropTypes.any,
@@ -10,7 +10,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
10
10
  import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
11
11
  import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
12
12
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
- const releaseInfo = "MTc2Mjk5MjAwMDAwMA==";
13
+ const releaseInfo = "MTc2NDExNTIwMDAwMA==";
14
14
  const packageIdentifier = 'x-charts-pro';
15
15
  /**
16
16
  * Orchestrates the data providers for the chart components and hooks.
@@ -27,12 +27,15 @@ const ZoomSliderActiveTrackRect = styled('rect', {
27
27
  props: {
28
28
  preview: true
29
29
  },
30
- style: {
31
- fill: 'transparent',
30
+ style: _extends({
31
+ fill: 'transparent'
32
+ }, theme.applyStyles('dark', {
33
+ fill: 'transparent'
34
+ }), {
32
35
  rx: 4,
33
36
  ry: 4,
34
37
  stroke: theme.palette.grey[500]
35
- }
38
+ })
36
39
  }]
37
40
  }));
38
41
  export function ChartAxisZoomSliderActiveTrack({
@@ -28,6 +28,10 @@ const Rect = styled('rect')(({
28
28
  cursor: 'ns-resize'
29
29
  }
30
30
  }));
31
+ function preventDefault(event) {
32
+ event.preventDefault();
33
+ }
34
+
31
35
  /**
32
36
  * Renders the zoom slider thumb, which is responsible for resizing the zoom range.
33
37
  * @internal
@@ -53,28 +57,38 @@ export const ChartAxisZoomSliderThumb = /*#__PURE__*/React.forwardRef(function C
53
57
  React.useEffect(() => {
54
58
  const thumb = thumbRef.current;
55
59
  if (!thumb) {
56
- return;
60
+ return () => {};
57
61
  }
62
+
63
+ // Prevent scrolling on touch devices when dragging the thumb
64
+ thumb.addEventListener('touchmove', preventDefault, {
65
+ passive: false
66
+ });
58
67
  const onPointerMove = rafThrottle(event => {
59
68
  onMoveEvent(event);
60
69
  });
61
- const onPointerUp = () => {
70
+ const onPointerEnd = event => {
62
71
  thumb.removeEventListener('pointermove', onPointerMove);
63
- thumb.removeEventListener('pointerup', onPointerUp);
72
+ thumb.removeEventListener('pointerup', onPointerEnd);
73
+ thumb.removeEventListener('pointercancel', onPointerEnd);
74
+ thumb.releasePointerCapture(event.pointerId);
64
75
  };
65
76
  const onPointerDown = event => {
66
77
  // Prevent text selection when dragging the thumb
67
78
  event.preventDefault();
68
79
  event.stopPropagation();
69
80
  thumb.setPointerCapture(event.pointerId);
70
- thumb.addEventListener('pointerup', onPointerUp);
71
81
  thumb.addEventListener('pointermove', onPointerMove);
82
+ thumb.addEventListener('pointercancel', onPointerEnd);
83
+ thumb.addEventListener('pointerup', onPointerEnd);
72
84
  };
73
85
  thumb.addEventListener('pointerdown', onPointerDown);
74
-
75
- // eslint-disable-next-line consistent-return
76
86
  return () => {
77
87
  thumb.removeEventListener('pointerdown', onPointerDown);
88
+ thumb.removeEventListener('pointermove', onPointerMove);
89
+ thumb.removeEventListener('pointercancel', onPointerEnd);
90
+ thumb.removeEventListener('pointerup', onPointerEnd);
91
+ thumb.removeEventListener('touchmove', preventDefault);
78
92
  onPointerMove.clear();
79
93
  };
80
94
  }, [onMoveEvent, orientation]);
@@ -8,7 +8,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
8
8
  const AreaPlotRoot = styled('g', {
9
9
  name: 'MuiAreaPlot',
10
10
  slot: 'Root'
11
- })();
11
+ })({});
12
12
  export function AreaPreviewPlot({
13
13
  axisId
14
14
  }) {
@@ -1,8 +1,8 @@
1
- import { createSelectorMemoized } from '@mui/x-internals/store';
2
- import { createSelector, selectorChartSeriesConfig, selectorChartSeriesProcessed, selectorChartDrawingArea, selectorChartRawXAxis, selectorChartRawYAxis } from '@mui/x-charts/internals';
1
+ import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
2
+ import { selectorChartSeriesConfig, selectorChartSeriesProcessed, selectorChartDrawingArea, selectorChartRawXAxis, selectorChartRawYAxis } from '@mui/x-charts/internals';
3
3
  import { computeAxisValue } from "./computeAxisValue.js";
4
4
  export const selectorFunnel = state => state.funnel;
5
- export const selectorFunnelGap = createSelector([selectorFunnel], funnel => funnel?.gap ?? 0);
5
+ export const selectorFunnelGap = createSelector(selectorFunnel, funnel => funnel?.gap ?? 0);
6
6
  export const selectorChartXAxis = createSelectorMemoized(selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorFunnelGap, (axis, drawingArea, formattedSeries, seriesConfig, gap) => computeAxisValue({
7
7
  drawingArea,
8
8
  formattedSeries,
@@ -1441,7 +1441,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
1441
1441
  * Configuration for zoom interactions.
1442
1442
  */
1443
1443
  zoomInteractionConfig: PropTypes.shape({
1444
- pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag']), PropTypes.shape({
1444
+ pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag', 'wheel']), PropTypes.shape({
1445
1445
  pointerMode: PropTypes.oneOf(['mouse', 'touch']),
1446
1446
  requiredKeys: PropTypes.arrayOf(PropTypes.string),
1447
1447
  type: PropTypes.oneOf(['drag']).isRequired
@@ -1449,6 +1449,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
1449
1449
  pointerMode: PropTypes.oneOf(['mouse', 'touch']),
1450
1450
  requiredKeys: PropTypes.arrayOf(PropTypes.string),
1451
1451
  type: PropTypes.oneOf(['pressAndDrag']).isRequired
1452
+ }), PropTypes.shape({
1453
+ allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
1454
+ pointerMode: PropTypes.any,
1455
+ requiredKeys: PropTypes.arrayOf(PropTypes.string),
1456
+ type: PropTypes.oneOf(['wheel']).isRequired
1452
1457
  })]).isRequired),
1453
1458
  zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
1454
1459
  pointerMode: PropTypes.any,