@mui/x-charts-pro 9.3.0 → 9.5.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 (132) hide show
  1. package/BarChartPro/BarChartPro.js +33 -3
  2. package/BarChartPro/BarChartPro.mjs +34 -4
  3. package/CHANGELOG.md +296 -0
  4. package/ChartsDataProviderPro/ChartsDataProviderPro.js +2 -2
  5. package/ChartsDataProviderPro/ChartsDataProviderPro.mjs +2 -2
  6. package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js +1 -0
  7. package/ChartsToolbarPro/ChartsToolbarImageExportTrigger.mjs +1 -0
  8. package/ChartsToolbarPro/ChartsToolbarPro.d.mts +1 -1
  9. package/ChartsToolbarPro/ChartsToolbarPro.d.ts +1 -1
  10. package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.d.mts +1 -1
  11. package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.d.ts +1 -1
  12. package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.js +35 -38
  13. package/ChartsToolbarPro/ChartsToolbarRangeButtonTrigger.mjs +37 -40
  14. package/ChartsToolbarPro/Toolbar.types.d.mts +3 -2
  15. package/ChartsToolbarPro/Toolbar.types.d.ts +3 -2
  16. package/ChartsToolbarPro/rangeButtonValueToZoom.d.mts +18 -2
  17. package/ChartsToolbarPro/rangeButtonValueToZoom.d.ts +18 -2
  18. package/ChartsToolbarPro/rangeButtonValueToZoom.js +73 -10
  19. package/ChartsToolbarPro/rangeButtonValueToZoom.mjs +72 -10
  20. package/ChartsZoomSlider/internals/chartsAxisZoomSliderThumbClasses.js +9 -2
  21. package/ChartsZoomSlider/internals/chartsAxisZoomSliderThumbClasses.mjs +9 -2
  22. package/ChartsZoomSlider/internals/previews/ScatterPreviewPlot.js +2 -1
  23. package/ChartsZoomSlider/internals/previews/ScatterPreviewPlot.mjs +2 -1
  24. package/FunnelChart/funnel.types.d.mts +1 -1
  25. package/FunnelChart/funnel.types.d.ts +1 -1
  26. package/FunnelChart/funnelPlotSlots.types.d.mts +5 -4
  27. package/FunnelChart/funnelPlotSlots.types.d.ts +5 -4
  28. package/Heatmap/Heatmap.d.mts +3 -2
  29. package/Heatmap/Heatmap.d.ts +3 -2
  30. package/Heatmap/Heatmap.js +32 -2
  31. package/Heatmap/Heatmap.mjs +32 -2
  32. package/Heatmap/HeatmapItem.d.mts +3 -2
  33. package/Heatmap/HeatmapItem.d.ts +3 -2
  34. package/Heatmap/HeatmapItem.js +2 -0
  35. package/Heatmap/HeatmapItem.mjs +2 -0
  36. package/Heatmap/HeatmapTooltip/HeatmapTooltip.types.d.mts +3 -2
  37. package/Heatmap/HeatmapTooltip/HeatmapTooltip.types.d.ts +3 -2
  38. package/LineChartPro/LineChartPro.js +33 -3
  39. package/LineChartPro/LineChartPro.mjs +34 -4
  40. package/PieChartPro/PieChartPro.js +1 -1
  41. package/PieChartPro/PieChartPro.mjs +2 -2
  42. package/RadarChartPro/RadarChartPro.js +1 -1
  43. package/RadarChartPro/RadarChartPro.mjs +2 -2
  44. package/ScatterChartPro/ScatterChartPro.d.mts +2 -1
  45. package/ScatterChartPro/ScatterChartPro.d.ts +2 -1
  46. package/ScatterChartPro/ScatterChartPro.js +40 -6
  47. package/ScatterChartPro/ScatterChartPro.mjs +41 -7
  48. package/ScatterChartPro/ScatterChartPro.plugins.d.mts +2 -2
  49. package/ScatterChartPro/ScatterChartPro.plugins.d.ts +2 -2
  50. package/ScatterChartPro/ScatterChartPro.plugins.js +1 -1
  51. package/ScatterChartPro/ScatterChartPro.plugins.mjs +2 -2
  52. package/index.js +1 -1
  53. package/index.mjs +1 -1
  54. package/internals/plugins/allPlugins.d.mts +5 -5
  55. package/internals/plugins/allPlugins.d.ts +5 -5
  56. package/internals/plugins/allPlugins.js +2 -2
  57. package/internals/plugins/allPlugins.mjs +3 -3
  58. package/internals/plugins/useChartProExport/exportImage.js +8 -2
  59. package/internals/plugins/useChartProExport/exportImage.mjs +8 -2
  60. package/internals/plugins/useChartProExport/print.js +1 -0
  61. package/internals/plugins/useChartProExport/print.mjs +1 -0
  62. package/internals/plugins/useChartProExport/useChartProExport.types.d.mts +6 -0
  63. package/internals/plugins/useChartProExport/useChartProExport.types.d.ts +6 -0
  64. package/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.d.mts +36 -4
  65. package/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.d.ts +36 -4
  66. package/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.js +2 -4
  67. package/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.mjs +1 -3
  68. package/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.mts +11 -11
  69. package/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.ts +11 -11
  70. package/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.d.mts +0 -1
  71. package/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.d.ts +0 -1
  72. package/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.js +9 -65
  73. package/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.mjs +9 -64
  74. package/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.d.mts +0 -1
  75. package/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.d.ts +0 -1
  76. package/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.js +9 -69
  77. package/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.mjs +9 -68
  78. package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.d.mts +0 -1
  79. package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.d.ts +0 -1
  80. package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.js +9 -39
  81. package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.mjs +10 -39
  82. package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.d.mts +0 -1
  83. package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.d.ts +0 -1
  84. package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.js +9 -58
  85. package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.mjs +10 -58
  86. package/internals/plugins/useChartProZoom/useChartProZoom.js +77 -14
  87. package/internals/plugins/useChartProZoom/useChartProZoom.mjs +79 -15
  88. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.mts +0 -3
  89. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts +0 -3
  90. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.js +1 -2
  91. package/internals/plugins/useChartProZoom/useChartProZoom.selectors.mjs +0 -1
  92. package/internals/plugins/useChartProZoom/useChartProZoom.types.d.mts +28 -11
  93. package/internals/plugins/useChartProZoom/useChartProZoom.types.d.ts +28 -11
  94. package/internals/plugins/zoomGestures/index.d.mts +5 -0
  95. package/internals/plugins/zoomGestures/index.d.ts +5 -0
  96. package/internals/plugins/zoomGestures/index.js +33 -0
  97. package/internals/plugins/zoomGestures/index.mjs +4 -0
  98. package/internals/plugins/zoomGestures/useDragGesture.d.mts +30 -0
  99. package/internals/plugins/zoomGestures/useDragGesture.d.ts +30 -0
  100. package/internals/plugins/zoomGestures/useDragGesture.js +105 -0
  101. package/internals/plugins/zoomGestures/useDragGesture.mjs +99 -0
  102. package/internals/plugins/zoomGestures/useDragOnPressGesture.d.mts +30 -0
  103. package/internals/plugins/zoomGestures/useDragOnPressGesture.d.ts +30 -0
  104. package/internals/plugins/zoomGestures/useDragOnPressGesture.js +105 -0
  105. package/internals/plugins/zoomGestures/useDragOnPressGesture.mjs +99 -0
  106. package/internals/plugins/zoomGestures/usePinchGesture.d.mts +22 -0
  107. package/internals/plugins/zoomGestures/usePinchGesture.d.ts +22 -0
  108. package/internals/plugins/zoomGestures/usePinchGesture.js +77 -0
  109. package/internals/plugins/zoomGestures/usePinchGesture.mjs +71 -0
  110. package/internals/plugins/zoomGestures/useWheelGesture.d.mts +21 -0
  111. package/internals/plugins/zoomGestures/useWheelGesture.d.ts +21 -0
  112. package/internals/plugins/zoomGestures/useWheelGesture.js +78 -0
  113. package/internals/plugins/zoomGestures/useWheelGesture.mjs +72 -0
  114. package/internals/plugins/zoomGestures/zoomGestures.types.d.mts +29 -0
  115. package/internals/plugins/zoomGestures/zoomGestures.types.d.ts +29 -0
  116. package/internals/plugins/zoomGestures/zoomGestures.types.js +5 -0
  117. package/internals/plugins/zoomGestures/zoomGestures.types.mjs +1 -0
  118. package/internals/slots/chartsBaseSlots.d.mts +6 -5
  119. package/internals/slots/chartsBaseSlots.d.ts +6 -5
  120. package/internals/slots/chartsIconSlots.d.mts +4 -3
  121. package/internals/slots/chartsIconSlots.d.ts +4 -3
  122. package/models/chartsSlotsComponentsPropsPro.d.mts +11 -0
  123. package/models/chartsSlotsComponentsPropsPro.d.ts +11 -0
  124. package/models/chartsSlotsComponentsPropsPro.js +5 -0
  125. package/models/chartsSlotsComponentsPropsPro.mjs +1 -0
  126. package/models/index.d.mts +1 -0
  127. package/models/index.d.ts +1 -0
  128. package/models/index.js +12 -0
  129. package/models/index.mjs +1 -0
  130. package/models/seriesType/heatmap.d.mts +1 -1
  131. package/models/seriesType/heatmap.d.ts +1 -1
  132. package/package.json +5 -5
@@ -85,7 +85,7 @@ const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function
85
85
  ref: ref,
86
86
  children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
87
87
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
88
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
88
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.FocusedBar, {})]
89
89
  })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsZoomSlider.ChartsZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsBrushOverlay.ChartsBrushOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
90
90
  })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
91
91
  }))
@@ -264,12 +264,21 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
264
264
  /**
265
265
  * The list of zoom data related to each axis.
266
266
  * Used to initialize the zoom in a specific configuration without controlling it.
267
+ *
268
+ * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
269
+ * range value (`{ axisId, value }`) resolved against the axis domain.
267
270
  */
268
- initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
271
+ initialZoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
269
272
  axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
270
273
  end: _propTypes.default.number.isRequired,
271
274
  start: _propTypes.default.number.isRequired
272
- })),
275
+ }), _propTypes.default.shape({
276
+ axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
277
+ value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.instanceOf(Date).isRequired), _propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func, _propTypes.default.shape({
278
+ step: _propTypes.default.number,
279
+ unit: _propTypes.default.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
280
+ })])
281
+ })]).isRequired),
273
282
  /**
274
283
  * The direction of the bar elements.
275
284
  * @default 'vertical'
@@ -449,6 +458,27 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
449
458
  id: _propTypes.default.string,
450
459
  max: _propTypes.default.number,
451
460
  min: _propTypes.default.number,
461
+ sizeMap: _propTypes.default.oneOfType([_propTypes.default.shape({
462
+ interpolator: _propTypes.default.oneOf(['linear', 'log', 'sqrt']),
463
+ max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
464
+ min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
465
+ size: _propTypes.default.arrayOf(_propTypes.default.number.isRequired).isRequired,
466
+ type: _propTypes.default.oneOf(['continuous']).isRequired
467
+ }), _propTypes.default.shape({
468
+ max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
469
+ min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
470
+ size: _propTypes.default.func.isRequired,
471
+ type: _propTypes.default.oneOf(['continuous']).isRequired
472
+ }), _propTypes.default.shape({
473
+ sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
474
+ thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
475
+ type: _propTypes.default.oneOf(['piecewise']).isRequired
476
+ }), _propTypes.default.shape({
477
+ sizes: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
478
+ type: _propTypes.default.oneOf(['ordinal']).isRequired,
479
+ unknownSize: _propTypes.default.number,
480
+ values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
481
+ })]),
452
482
  valueGetter: _propTypes.default.func
453
483
  })),
454
484
  /**
@@ -6,7 +6,7 @@ const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToo
6
6
  import * as React from 'react';
7
7
  import PropTypes from 'prop-types';
8
8
  import { useThemeProps } from '@mui/material/styles';
9
- import { BarPlot } from '@mui/x-charts/BarChart';
9
+ import { BarPlot, FocusedBar } from '@mui/x-charts/BarChart';
10
10
  import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
11
11
  import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
12
12
  import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
@@ -78,7 +78,7 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
78
78
  ref: ref,
79
79
  children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
80
80
  children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
81
- children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
81
+ children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(FocusedBar, {})]
82
82
  })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsZoomSlider, {}), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
83
83
  })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
84
84
  }))
@@ -257,12 +257,21 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
257
257
  /**
258
258
  * The list of zoom data related to each axis.
259
259
  * Used to initialize the zoom in a specific configuration without controlling it.
260
+ *
261
+ * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
262
+ * range value (`{ axisId, value }`) resolved against the axis domain.
260
263
  */
261
- initialZoom: PropTypes.arrayOf(PropTypes.shape({
264
+ initialZoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
262
265
  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
263
266
  end: PropTypes.number.isRequired,
264
267
  start: PropTypes.number.isRequired
265
- })),
268
+ }), PropTypes.shape({
269
+ axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
270
+ value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date).isRequired), PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func, PropTypes.shape({
271
+ step: PropTypes.number,
272
+ unit: PropTypes.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
273
+ })])
274
+ })]).isRequired),
266
275
  /**
267
276
  * The direction of the bar elements.
268
277
  * @default 'vertical'
@@ -442,6 +451,27 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
442
451
  id: PropTypes.string,
443
452
  max: PropTypes.number,
444
453
  min: PropTypes.number,
454
+ sizeMap: PropTypes.oneOfType([PropTypes.shape({
455
+ interpolator: PropTypes.oneOf(['linear', 'log', 'sqrt']),
456
+ max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
457
+ min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
458
+ size: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired,
459
+ type: PropTypes.oneOf(['continuous']).isRequired
460
+ }), PropTypes.shape({
461
+ max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
462
+ min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
463
+ size: PropTypes.func.isRequired,
464
+ type: PropTypes.oneOf(['continuous']).isRequired
465
+ }), PropTypes.shape({
466
+ sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
467
+ thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
468
+ type: PropTypes.oneOf(['piecewise']).isRequired
469
+ }), PropTypes.shape({
470
+ sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
471
+ type: PropTypes.oneOf(['ordinal']).isRequired,
472
+ unknownSize: PropTypes.number,
473
+ values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
474
+ })]),
445
475
  valueGetter: PropTypes.func
446
476
  })),
447
477
  /**
package/CHANGELOG.md CHANGED
@@ -1,5 +1,301 @@
1
1
  # Changelog
2
2
 
3
+ ## 9.5.0
4
+
5
+ _Jun 11, 2026_
6
+
7
+ We'd like to extend a big thank you to the 9 contributors who made this release possible. Here are some highlights ✨:
8
+
9
+ - 🎁 New [`multiSelect` column type for Data Grid Pro](https://mui.com/x/react-data-grid/column-definition/#MultiSelectColumn)
10
+ - 🚀 New [renderer="svg-progressive"](https://mui.com/x/react-charts/scatter/#progressive-renderer) paints scatter points in batched frames so large datasets render smoothly without blocking the main thread.
11
+ - 🐞 Bugfixes
12
+ - 📚 Documentation improvements
13
+
14
+ Special thanks go out to community members @mustafajw07 and @Anexus5919 for their valuable contribution.
15
+
16
+ The following team members contributed to this release:
17
+ @alexfauquette, @JCQuintas, @rita-codes, @rluzists1, @sai6855, @siriwatknp, @arminmeh, @brijeshb42
18
+
19
+ ### Data Grid
20
+
21
+ #### `@mui/x-data-grid@9.5.0`
22
+
23
+ - [DataGrid] Restrict warning messages to non-production environments in various components (#22461) @sai6855
24
+ - [DataGrid] Prevent React state update before mount (#22374) @arminmeh
25
+
26
+ #### `@mui/x-data-grid-pro@9.5.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
27
+
28
+ Same changes as in `@mui/x-data-grid@9.5.0`, plus:
29
+
30
+ - [DataGridPro] Add new `multiSelect` column type (#21157) @siriwatknp
31
+
32
+ #### `@mui/x-data-grid-premium@9.5.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
33
+
34
+ Same changes as in `@mui/x-data-grid-pro@9.5.0`.
35
+
36
+ ### Date and Time Pickers
37
+
38
+ #### `@mui/x-date-pickers@9.5.0`
39
+
40
+ - [pickers] Fix missing export of `th-TH` (#22703) @alexfauquette
41
+
42
+ #### `@mui/x-date-pickers-pro@9.5.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
43
+
44
+ Same changes as in `@mui/x-date-pickers@9.5.0`.
45
+
46
+ ### Charts
47
+
48
+ #### `@mui/x-charts@9.5.0`
49
+
50
+ - [charts] Add `FocusedBar` component to `BarScatterComposition` demo (#22704) @sai6855
51
+ - [charts] Add dedicated Bubble Chart documentation page (#22688) @mustafajw07
52
+ - [charts] Add progressive scatter renderer (#22518) @JCQuintas
53
+ - [charts] Avoid full axis pipeline rebuild on resize (#22695) @JCQuintas
54
+ - [charts] Document focus indicator in composition page (#22712) @JCQuintas
55
+ - [charts] Fix `ChartsTooltip` `container` and `disablePortal` props being ignored (#22690) @JCQuintas
56
+ - [charts] Make ordinal scales O(1) to copy and re-range (#22691) @JCQuintas
57
+ - [charts] Stabilize WebGL bar rendering at sub-pixel widths (#22678) @JCQuintas
58
+ - [charts] Use the series config to define value types (#22693) @sai6855
59
+ - [charts] Decouple interaction hook from the cartesian zoom (#22708) @alexfauquette
60
+
61
+ #### `@mui/x-charts-pro@9.5.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
62
+
63
+ Same changes as in `@mui/x-charts@9.5.0`, plus:
64
+
65
+ - [charts-pro] Add missing focus highlight (#22689) @alexfauquette
66
+
67
+ #### `@mui/x-charts-premium@9.5.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
68
+
69
+ Same changes as in `@mui/x-charts-pro@9.5.0`, plus:
70
+
71
+ - [charts-premium] Set `Heatmap` WebGL render as stable (#22665) @alexfauquette
72
+ - [charts-premium] Stabilize candlestick charts (#22666) @alexfauquette
73
+ - [charts-premium] Stabilize the radial charts (#22655) @alexfauquette
74
+
75
+ ### Scheduler
76
+
77
+ #### `@mui/x-scheduler@9.0.0-beta.1`
78
+
79
+ Internal changes.
80
+
81
+ #### `@mui/x-scheduler-premium@9.0.0-beta.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
82
+
83
+ Same changes as in `@mui/x-scheduler@9.0.0-beta.1`, plus:
84
+
85
+ - [scheduler] Remove dead CSS variable writes in `EventTimelinePremiumContent` (#22720) @rita-codes
86
+ - [scheduler] Show scope dialog when deleting a recurring event (#22552) @Anexus5919
87
+
88
+ ### Core
89
+
90
+ - [docs-infra] Fix immutable cache headers for `/\_next/static` assets (#22747) @brijeshb42
91
+ - [docs-infra] Prefix `/\_next/static` cache header rule with `/x` basePath (#22748) @brijeshb42
92
+ - [code-infra] Update dependencies to resolve Dependabot security alerts (#22714) @Janpot
93
+
94
+ ### Docs
95
+
96
+ - [docs] Fix broken links checker crashing on 404 known-targets fetch (#22707) @sai6855
97
+ - [docs] Fix country data (#22716) @alexfauquette
98
+
99
+ ### Miscellaneous
100
+
101
+ - [legal] Update EULA links in docs (#22717) @rluzists1
102
+
103
+ ## 9.4.0
104
+
105
+ <!-- generated comparing v9.3.0..master -->
106
+
107
+ _Jun 4, 2026_
108
+
109
+ We'd like to extend a big thank you to the 21 contributors who made this release possible. Here are some highlights ✨:
110
+
111
+ - 🎉 Scheduler is now in Beta shipping with Timeline vitualization and lazy loading
112
+ - 📆 Implement Event Timeline virtualization (#22339)
113
+ - 🫧 Introduce bubble charts (#22537)
114
+ - 🐞 Bugfixes
115
+ - 📚 Documentation improvements
116
+
117
+ Special thanks go out to these community members for their valuable contributions:
118
+ @imxv, @mixelburg, @mustafajw07
119
+
120
+ The following team members contributed to this release:
121
+ @aemartos, @alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @joserodolfofreitas, @LukasTy, @MBilalShafi, @michelengelen, @mj12albert, @noraleonte, @oliviertassinari, @rita-codes, @romgrk, @sai6855
122
+
123
+ ### Data Grid
124
+
125
+ #### `@mui/x-data-grid@9.4.0`
126
+
127
+ - [DataGrid] Fix `avg` aggregation when the average is zero (#22652) @mj12albert
128
+ - [DataGrid] Inherit icon `fontSize` from `baseIconButton` size (#22187) @imxv
129
+ - [DataGrid] Fix `noRowsOverlay` flicker between `dataSource` re-fetches (#22465) @LukasTy
130
+
131
+ #### `@mui/x-data-grid-pro@9.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
132
+
133
+ Same changes as in `@mui/x-data-grid@9.4.0`.
134
+
135
+ #### `@mui/x-data-grid-premium@9.4.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
136
+
137
+ > This release includes a version bump of the `@mui/x-internal-exceljs-fork` package to address the vulnerable dependencies.
138
+ > The following CVEs are fixed:
139
+ >
140
+ > - <https://github.com/advisories/GHSA-ph9p-34f9-6g65>
141
+ > - <https://github.com/isaacs/minimatch/security/advisories/GHSA-23c5-xmqv-rm74>
142
+ > - <https://github.com/advisories/GHSA-w5hq-g745-h8pq>
143
+ >
144
+ > To make this security update possible, we bumped the `node` version requirement from `>=14.0.0` to `>=14.17.0`.
145
+ > [Node.js 14.17.0](https://nodejs.org/en/blog/release/v14.17.0) was released in May 2021, so we consider it safe to bump the requirement without causing issues for our users.
146
+
147
+ Same changes as in `@mui/x-data-grid-pro@9.4.0`, plus:
148
+
149
+ - [DataGridPremium] Nested Lazy Loading (#21043) @MBilalShafi
150
+ - [DataGridPremium] Update exceljs fork (#22658) @cherniavskii
151
+
152
+ ### Date and Time Pickers
153
+
154
+ #### `@mui/x-date-pickers@9.4.0`
155
+
156
+ Internal changes.
157
+
158
+ #### `@mui/x-date-pickers-pro@9.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
159
+
160
+ Same changes as in `@mui/x-date-pickers@9.4.0`.
161
+
162
+ ### Charts
163
+
164
+ #### `@mui/x-charts@9.4.0`
165
+
166
+ - [charts] Add functionality to hide elements during chart export (#22525) @sai6855
167
+ - [charts] Add option to show marks only on the first/last values (#22645) @alexfauquette
168
+ - [charts] Add text customization section and demo for axis labels (#22597) @sai6855
169
+ - [charts] Allow axes to scale according to the visible series only (#22566) @alexfauquette
170
+ - [charts] Correctly handle different identifiers for each series (#22556) @sai6855
171
+ - [charts] Fix inverted Y axis zoom/pan on ordinal scales (#22654) @JCQuintas
172
+ - [charts] Introduce bubble charts (#22537) @alexfauquette
173
+ - [charts] Let scatter chart tooltip ignore hidden series (#22614) @alexfauquette
174
+ - [charts] Make `'sqrt'` size mapping the default (#22683) @alexfauquette
175
+ - [charts] Remove unused proptypes (#22618) @alexfauquette
176
+ - [charts] Support module augmentation for slots (#22519) @sai6855
177
+ - [charts] Support multiple marker size in `findClosestPoint` (#22622) @alexfauquette
178
+ - [charts] Upgrade bezier-easing to v3 and use it for line chart hit-detection (#22608) @sai6855
179
+ - [charts] Use `useLayoutEffect` with `ResizeObserver` (#22646) @JCQuintas
180
+
181
+ #### `@mui/x-charts-pro@9.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
182
+
183
+ Same changes as in `@mui/x-charts@9.4.0`, plus:
184
+
185
+ - [charts-pro] Auto-select range button matching current zoom (#22137) @JCQuintas
186
+ - [charts-pro] Support range values in `initialZoom` (#22563) @JCQuintas
187
+
188
+ #### `@mui/x-charts-premium@9.4.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
189
+
190
+ Same changes as in `@mui/x-charts-pro@9.4.0`, plus:
191
+
192
+ - [charts-premium] Support range-bar series in WebGL bar renderer (#22607) @JCQuintas
193
+ - [charts-premium] Fix `onAxisClick` for radial bar and lines (#22522) @alexfauquette
194
+
195
+ ### Tree View
196
+
197
+ #### `@mui/x-tree-view@9.4.0`
198
+
199
+ Internal changes.
200
+
201
+ #### `@mui/x-tree-view-pro@9.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
202
+
203
+ Same changes as in `@mui/x-tree-view@9.4.0`.
204
+
205
+ ### Scheduler
206
+
207
+ #### Breaking changes
208
+
209
+ The theme `styleOverrides` slots for the skeleton and the error container were
210
+ renamed and unified. The CSS utility class names (for example
211
+ `.MuiEventCalendar-eventSkeleton`) are **not** affected — only
212
+ `theme.components.*` overrides need updating.
213
+
214
+ **Event skeleton**
215
+
216
+ | Before | After |
217
+ | --------------------------------------- | ------------------------------ |
218
+ | `MuiEventCalendar` slot `EventSkeleton` | `MuiEventSkeleton` slot `Root` |
219
+ | `MuiEventTimeline` slot `EventSkeleton` | `MuiEventSkeleton` slot `Root` |
220
+
221
+ **Error container**
222
+
223
+ | Before | After |
224
+ | ------------------------------------------------------------- | --------------------------------------- |
225
+ | `MuiEventCalendar` / `MuiEventTimeline` slot `ErrorContainer` | `MuiEventErrorContainer` slot `Root` |
226
+ | `MuiEventCalendar` / `MuiEventTimeline` slot `ErrorAlert` | `MuiEventErrorContainer` slot `Alert` |
227
+ | `MuiEventCalendar` / `MuiEventTimeline` slot `ErrorMessage` | `MuiEventErrorContainer` slot `Message` |
228
+
229
+ If you customized these through the theme, update the component name and slot
230
+ names accordingly:
231
+
232
+ ```diff
233
+ components: {
234
+ - MuiEventCalendar: {
235
+ + MuiEventSkeleton: {
236
+ styleOverrides: {
237
+ - EventSkeleton: { /* ... */ },
238
+ + Root: { /* ... */ },
239
+ },
240
+ },
241
+ },
242
+ }
243
+ ```
244
+
245
+ #### `@mui/x-scheduler@9.0.0-beta.0`
246
+
247
+ - [scheduler] Add a prop to control whether the resource of an event can be cleared (#22464) @rita-codes
248
+ - [scheduler] Add week number labels to agenda, day and week views (#22594) @mustafajw07
249
+ - [scheduler] Add `weekStartsOn` preference and update date functions to support custom week start (#22426) @mustafajw07
250
+ - [scheduler] Export premium version of the standalone views (#22621) @flaviendelangle
251
+ - [scheduler] Implement timeline virtualization (#22339) @romgrk
252
+ - [scheduler] Split scheduler overview (#22453) @joserodolfofreitas
253
+ - [scheduler] Unify `EventSkeleton` and `ErrorContainer` between `EventCalendar` and `EventTimeline` (#22676) @noraleonte
254
+
255
+ #### `@mui/x-scheduler-premium@9.0.0-beta.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
256
+
257
+ Same changes as in `@mui/x-scheduler@9.0.0-beta.0`.
258
+
259
+ ### Docs
260
+
261
+ - [docs] Add a performance docs page for charts (#22656) @alexfauquette
262
+ - [docs] Add real dataset for maps documentation (#22599) @alexfauquette
263
+ - [docs] Add spacing between selects on charts overview demo (#22589) @bernardobelchior
264
+ - [docs] Reorganize existing chat docs navigation (#22478) @hasdfa
265
+ - [docs] Switch to visionscarto's world atlas dataset (#22669) @cherniavskii
266
+ - [docs] Update TreeView `domstructure` docs and add demo (#22420) @mj12albert
267
+ - [docs] Fix indexation of Scheduler (#22567) @oliviertassinari
268
+ - [docs] Fix wide layout on event timeline lazy loading and Import title (#22604) @rita-codes
269
+ - [docs] Derive class name owners for shared charts classes (#22674) @JCQuintas
270
+
271
+ ### Core
272
+
273
+ - [code-infra] Drop unused and now-transitive deps from docs/package.json (#22549) @LukasTy
274
+ - [code-infra] Refresh CI Node pins to 22.22.3 (#22598) @LukasTy
275
+ - [code-infra] Skip empty product sections in changelog (#22541) @rita-codes
276
+ - [code-infra] Stabilize DataGridScrollRestoration visual regression test (#22553) @Janpot
277
+ - [internal] Add license to the `x-data-grid-generator` (#22240) @arminmeh
278
+ - [internal] Express default value for resource_class (#22569) @oliviertassinari
279
+ - [internal] Fix use of ellipsis (#21852) @oliviertassinari
280
+ - [internal] `useLayoutEffect` with `ResizeObserver` (#22428) @romgrk
281
+
282
+ ### Miscellaneous
283
+
284
+ - [chat-headless] Add built-in chat adapters (#22479) @hasdfa
285
+ - [chat-headless] Harden runtime model and message errors (#22480) @hasdfa
286
+ - [core] Prepare for TypeScript 6 bump (#22551) @LukasTy
287
+ - [core] Use CircleCI Gen2 resource classes (#22610) @LukasTy
288
+ - [infra] Fix broken tag retrieval on `master` during release (#22174) @michelengelen
289
+ - [infra] Group Base UI renovate updates (#22590) @LukasTy
290
+ - [pnpm] Add security settings to pnpm-workspace.yaml (#22611) @Janpot
291
+ - [release] Fix release PR scripts (#22680) @JCQuintas
292
+ - [test] Add a Tree View regression test for lazy loading with getChildrenCount returning -1 (#22605) @mixelburg
293
+ - [test] Disable LCD subpixel antialiasing in regression screenshots (#22602) @Janpot
294
+ - [test] Fix flaky Data Grid Pro data source tree data tests (#22659) @LukasTy
295
+ - [test] Remove stale form-submit TODO from e2e suite (#22564) @LukasTy
296
+ - [x-license] Exclude test keys from the published npm package (#22647) @aemartos
297
+ - [test] Fix flaky WebGL benchmark by polling for canvas content (#22535) @JCQuintas
298
+
3
299
  ## 9.3.0
4
300
 
5
301
  _May 21, 2026_
@@ -18,8 +18,8 @@ var _useChartsDataProviderProProps = require("./useChartsDataProviderProProps");
18
18
  var _ChartsWatermark = require("../internals/ChartsWatermark");
19
19
  var _jsxRuntime = require("react/jsx-runtime");
20
20
  const packageInfo = {
21
- releaseDate: "MTc3OTMyMTYwMDAwMA==",
22
- version: "9.3.0",
21
+ releaseDate: "MTc4MTEzNjAwMDAwMA==",
22
+ version: "9.5.0",
23
23
  name: 'x-charts-pro'
24
24
  };
25
25
  const defaultSeriesConfigPro = exports.defaultSeriesConfigPro = _internals.defaultSeriesConfig;
@@ -11,8 +11,8 @@ import { useChartsDataProviderProProps } from "./useChartsDataProviderProProps.m
11
11
  import { ChartsWatermark } from "../internals/ChartsWatermark.mjs";
12
12
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
13
  const packageInfo = {
14
- releaseDate: "MTc3OTMyMTYwMDAwMA==",
15
- version: "9.3.0",
14
+ releaseDate: "MTc4MTEzNjAwMDAwMA==",
15
+ version: "9.5.0",
16
16
  name: 'x-charts-pro'
17
17
  };
18
18
  export const defaultSeriesConfigPro = defaultSeriesConfig;
@@ -68,6 +68,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propType
68
68
  fileName: _propTypes.default.string,
69
69
  nonce: _propTypes.default.string,
70
70
  onBeforeExport: _propTypes.default.func,
71
+ pixelRatio: _propTypes.default.number,
71
72
  quality: _propTypes.default.number,
72
73
  type: _propTypes.default.string.isRequired
73
74
  }),
@@ -60,6 +60,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propType
60
60
  fileName: PropTypes.string,
61
61
  nonce: PropTypes.string,
62
62
  onBeforeExport: PropTypes.func,
63
+ pixelRatio: PropTypes.number,
63
64
  quality: PropTypes.number,
64
65
  type: PropTypes.string.isRequired
65
66
  }),
@@ -3,7 +3,7 @@ import { type AxisId } from '@mui/x-charts/internals';
3
3
  import { type RangeButtonValue } from "./rangeButtonValueToZoom.mjs";
4
4
  import { type ChartsToolbarPrintExportOptions } from "./ChartsToolbarPrintExportTrigger.mjs";
5
5
  import { type ChartsToolbarImageExportOptions } from "./ChartsToolbarImageExportTrigger.mjs";
6
- export type { RangeButtonFunctionParams } from "./rangeButtonValueToZoom.mjs";
6
+ export type { RangeButtonFunctionParams, RangeButtonValue, RangeButtonIntervalUnit } from "./rangeButtonValueToZoom.mjs";
7
7
  export interface RangeButtonConfig {
8
8
  /**
9
9
  * The label displayed on the button (e.g., "1M", "3M", "1Y").
@@ -3,7 +3,7 @@ import { type AxisId } from '@mui/x-charts/internals';
3
3
  import { type RangeButtonValue } from "./rangeButtonValueToZoom.js";
4
4
  import { type ChartsToolbarPrintExportOptions } from "./ChartsToolbarPrintExportTrigger.js";
5
5
  import { type ChartsToolbarImageExportOptions } from "./ChartsToolbarImageExportTrigger.js";
6
- export type { RangeButtonFunctionParams } from "./rangeButtonValueToZoom.js";
6
+ export type { RangeButtonFunctionParams, RangeButtonValue, RangeButtonIntervalUnit } from "./rangeButtonValueToZoom.js";
7
7
  export interface RangeButtonConfig {
8
8
  /**
9
9
  * The label displayed on the button (e.g., "1M", "3M", "1Y").
@@ -11,7 +11,7 @@ export interface ChartsToolbarRangeButtonTriggerProps {
11
11
  * The range value. Specifies how far back from the end of the data to zoom.
12
12
  *
13
13
  * - `{ unit, step }` — A calendar interval from the end of the data (e.g., `{ unit: 'month', step: 3 }` for 3 months).
14
- * - `[start, end]` — An absolute date range.
14
+ * - `[start, end]` — An absolute date range, or a range between two ordinal (band/point) axis values.
15
15
  * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
16
16
  * - `null` — Resets zoom to show all data.
17
17
  */
@@ -11,7 +11,7 @@ export interface ChartsToolbarRangeButtonTriggerProps {
11
11
  * The range value. Specifies how far back from the end of the data to zoom.
12
12
  *
13
13
  * - `{ unit, step }` — A calendar interval from the end of the data (e.g., `{ unit: 'month', step: 3 }` for 3 months).
14
- * - `[start, end]` — An absolute date range.
14
+ * - `[start, end]` — An absolute date range, or a range between two ordinal (band/point) axis values.
15
15
  * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
16
16
  * - `null` — Resets zoom to show all data.
17
17
  */
@@ -38,7 +38,6 @@ const ChartsToolbarRangeButtonTrigger = exports.ChartsToolbarRangeButtonTrigger
38
38
  instance,
39
39
  store
40
40
  } = (0, _internals.useChartsContext)();
41
- const activeRangeButtonKey = store.use(_useChartProZoom.selectorChartActiveRangeButtonKey);
42
41
  const canZoomOut = store.use(_useChartProZoom.selectorChartCanZoomOut);
43
42
  const zoomOptionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
44
43
  const rawXAxes = store.use(_internals.selectorChartRawXAxis);
@@ -56,55 +55,53 @@ const ChartsToolbarRangeButtonTrigger = exports.ChartsToolbarRangeButtonTrigger
56
55
  }
57
56
  return rawXAxes.find(axis => zoomOptionsLookup[axis.id] !== undefined)?.id;
58
57
  }, [axisIdProp, rawXAxes, zoomOptionsLookup]);
59
-
60
- // Determine if the resolved axis is ordinal (band/point) to use index-based domain.
58
+ const currentAxisZoom = store.use(_useChartProZoom.selectorChartAxisZoomData, resolvedAxisId);
61
59
  const resolvedAxis = React.useMemo(() => rawXAxes?.find(axis => axis.id === resolvedAxisId), [rawXAxes, resolvedAxisId]);
62
- const isOrdinal = resolvedAxis?.scaleType === 'band' || resolvedAxis?.scaleType === 'point';
60
+ // Use isValueNull instead of value === null to avoid unnecessary re-renders when value is a new function/object on each render.
61
+ const isValueNull = value === null;
63
62
 
64
- // Get the full domain for the target axis, ignoring the current zoom.
65
- // For ordinal axes (band/point), use index-based range since domain values are categories.
66
- const axisDomain = React.useMemo(() => {
67
- if (resolvedAxisId === undefined) {
68
- return undefined;
69
- }
70
- const domainDef = domains[resolvedAxisId];
71
- if (!domainDef || domainDef.domain.length < 2) {
63
+ // Build the range conversion params for the target axis, ignoring the current zoom.
64
+ const domainParams = React.useMemo(() => {
65
+ if (resolvedAxisId === undefined || resolvedAxis === undefined) {
72
66
  return undefined;
73
67
  }
74
- if (isOrdinal) {
68
+ return (0, _rangeButtonValueToZoom.getRangeButtonDomainParams)(resolvedAxis, domains[resolvedAxisId]?.domain);
69
+ }, [resolvedAxisId, resolvedAxis, domains]);
70
+
71
+ // Destructure so that returning a new object from rangeButtonValueToZoom doesn't cause unnecessary re-renders in handleClick.
72
+ const {
73
+ start: startZoom,
74
+ end: endZoom
75
+ } = React.useMemo(() => {
76
+ if (domainParams === undefined) {
75
77
  return {
76
- min: 0,
77
- max: domainDef.domain.length - 1
78
+ start: undefined,
79
+ end: undefined
78
80
  };
79
81
  }
80
- const min = domainDef.domain[0];
81
- const max = domainDef.domain[domainDef.domain.length - 1];
82
- return {
83
- min: Number(min),
84
- max: Number(max)
85
- };
86
- }, [resolvedAxisId, domains, isOrdinal]);
82
+ return (0, _rangeButtonValueToZoom.rangeButtonValueToZoom)(value, domainParams);
83
+ }, [domainParams, value]);
87
84
  const handleClick = React.useCallback(() => {
88
- if (resolvedAxisId === undefined || !axisDomain) {
85
+ if (resolvedAxisId === undefined || startZoom === undefined || endZoom === undefined) {
89
86
  return;
90
87
  }
91
- const zoom = (0, _rangeButtonValueToZoom.rangeButtonValueToZoom)(value, {
92
- scaleType: resolvedAxis?.scaleType ?? 'linear',
93
- data: resolvedAxis?.data,
94
- domain: axisDomain
95
- });
96
88
  instance.setAxisZoomData(resolvedAxisId, {
97
89
  axisId: resolvedAxisId,
98
- start: zoom.start,
99
- end: zoom.end
90
+ start: startZoom,
91
+ end: endZoom
100
92
  });
101
- instance.setActiveRangeButtonKey(label);
102
- }, [resolvedAxisId, resolvedAxis, axisDomain, value, instance, label]);
93
+ }, [resolvedAxisId, startZoom, endZoom, instance]);
103
94
 
104
- // Determine if this button is selected.
105
- // When explicitly clicked, activeRangeButtonKey matches the label.
106
- // When no button has been clicked and zoom is at full range, the null-value button is active.
107
- const isActive = activeRangeButtonKey === label || activeRangeButtonKey === null && value === null && !canZoomOut;
95
+ // A button is selected when the current zoom range matches its computed range.
96
+ const isActive = React.useMemo(() => {
97
+ if (startZoom === undefined || endZoom === undefined) {
98
+ return isValueNull && !canZoomOut;
99
+ }
100
+ const start = currentAxisZoom?.start ?? 0;
101
+ const end = currentAxisZoom?.end ?? 100;
102
+ const epsilon = 0.01;
103
+ return Math.abs(start - startZoom) < epsilon && Math.abs(end - endZoom) < epsilon;
104
+ }, [startZoom, endZoom, isValueNull, currentAxisZoom, canZoomOut]);
108
105
  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseToggleButton, render, (0, _extends2.default)({}, slotProps.baseToggleButton, {
109
106
  onClick: handleClick,
110
107
  selected: isActive,
@@ -145,11 +142,11 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarRangeButtonTrigger.propType
145
142
  * The range value. Specifies how far back from the end of the data to zoom.
146
143
  *
147
144
  * - `{ unit, step }` — A calendar interval from the end of the data (e.g., `{ unit: 'month', step: 3 }` for 3 months).
148
- * - `[start, end]` — An absolute date range.
145
+ * - `[start, end]` — An absolute date range, or a range between two ordinal (band/point) axis values.
149
146
  * - `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100).
150
147
  * - `null` — Resets zoom to show all data.
151
148
  */
152
- value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.instanceOf(Date).isRequired), _propTypes.default.func, _propTypes.default.shape({
149
+ value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.instanceOf(Date).isRequired), _propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func, _propTypes.default.shape({
153
150
  step: _propTypes.default.number,
154
151
  unit: _propTypes.default.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
155
152
  })])