@mui/x-charts 9.11.0 → 9.12.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 (68) hide show
  1. package/BarChart/BarChart.js +7 -0
  2. package/BarChart/BarChart.mjs +7 -0
  3. package/CHANGELOG.md +165 -0
  4. package/ChartsContainer/ChartsContainer.js +7 -0
  5. package/ChartsContainer/ChartsContainer.mjs +7 -0
  6. package/ChartsContainer/useChartsContainerProps.js +3 -1
  7. package/ChartsContainer/useChartsContainerProps.mjs +3 -1
  8. package/ChartsTooltip/ChartsAxisTooltipContent.js +2 -9
  9. package/ChartsTooltip/ChartsAxisTooltipContent.mjs +2 -9
  10. package/ChartsTooltip/ChartsItemTooltipContent.js +2 -2
  11. package/ChartsTooltip/ChartsItemTooltipContent.mjs +2 -2
  12. package/ChartsTooltip/ChartsTooltipContainer.js +6 -2
  13. package/ChartsTooltip/ChartsTooltipContainer.mjs +6 -2
  14. package/LineChart/CircleMarkElement.js +0 -4
  15. package/LineChart/CircleMarkElement.mjs +0 -4
  16. package/LineChart/LineChart.js +7 -0
  17. package/LineChart/LineChart.mjs +7 -0
  18. package/PieChart/PieChart.js +7 -0
  19. package/PieChart/PieChart.mjs +7 -0
  20. package/RadarChart/RadarAxis/RadarAxis.utils.d.mts +1 -1
  21. package/RadarChart/RadarAxis/RadarAxis.utils.d.ts +1 -1
  22. package/RadarChart/RadarChart.js +7 -0
  23. package/RadarChart/RadarChart.mjs +7 -0
  24. package/RadarChart/useRadarChartProps.js +3 -1
  25. package/RadarChart/useRadarChartProps.mjs +3 -1
  26. package/ScatterChart/ScatterChart.js +7 -0
  27. package/ScatterChart/ScatterChart.mjs +7 -0
  28. package/SparkLineChart/SparkLineChart.js +7 -0
  29. package/SparkLineChart/SparkLineChart.mjs +7 -0
  30. package/hooks/useInteractionItemProps.js +4 -0
  31. package/hooks/useInteractionItemProps.mjs +4 -0
  32. package/index.js +1 -1
  33. package/index.mjs +1 -1
  34. package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.js +13 -3
  35. package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.mjs +12 -3
  36. package/internals/components/ChartsAccessibilityProxy/focusAccessibilityProxy.d.mts +8 -0
  37. package/internals/components/ChartsAccessibilityProxy/focusAccessibilityProxy.d.ts +8 -0
  38. package/internals/components/ChartsAccessibilityProxy/focusAccessibilityProxy.js +25 -0
  39. package/internals/components/ChartsAccessibilityProxy/focusAccessibilityProxy.mjs +19 -0
  40. package/internals/components/ChartsAccessibilityProxy/index.d.mts +2 -1
  41. package/internals/components/ChartsAccessibilityProxy/index.d.ts +2 -1
  42. package/internals/components/ChartsAccessibilityProxy/index.js +11 -0
  43. package/internals/components/ChartsAccessibilityProxy/index.mjs +2 -1
  44. package/internals/plugins/corePlugins/useChartElementRef/useChartElementRef.js +3 -1
  45. package/internals/plugins/corePlugins/useChartElementRef/useChartElementRef.mjs +3 -1
  46. package/internals/plugins/corePlugins/useChartElementRef/useChartElementRef.types.d.mts +5 -0
  47. package/internals/plugins/corePlugins/useChartElementRef/useChartElementRef.types.d.ts +5 -0
  48. package/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.js +10 -0
  49. package/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.mjs +10 -0
  50. package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.js +22 -0
  51. package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.mjs +22 -0
  52. package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js +27 -1
  53. package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.mjs +27 -1
  54. package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.mts +20 -0
  55. package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.types.d.ts +20 -0
  56. package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.js +209 -35
  57. package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.mjs +211 -36
  58. package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.d.mts +3 -0
  59. package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.d.ts +3 -0
  60. package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.js +12 -5
  61. package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.mjs +11 -4
  62. package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.types.d.mts +29 -0
  63. package/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.types.d.ts +29 -0
  64. package/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getItemAtAxisPosition.d.mts +28 -0
  65. package/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getItemAtAxisPosition.d.ts +28 -0
  66. package/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getItemAtAxisPosition.js +81 -0
  67. package/internals/plugins/featurePlugins/useChartKeyboardNavigation/utils/getItemAtAxisPosition.mjs +76 -0
  68. package/package.json +4 -4
@@ -140,6 +140,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes /* remove-proptypes *
140
140
  experimentalFeatures: _propTypes.default.shape({
141
141
  keyboardActivation: _propTypes.default.bool
142
142
  }),
143
+ /**
144
+ * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
145
+ * By default, clicking sets the item that keyboard navigation starts from, but the focus
146
+ * indicator stays hidden until the user presses a key.
147
+ * @default false
148
+ */
149
+ focusItemOnClick: _propTypes.default.bool,
143
150
  /**
144
151
  * Option to display a cartesian grid in the background.
145
152
  */
@@ -133,6 +133,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes /* remove-proptypes *
133
133
  experimentalFeatures: PropTypes.shape({
134
134
  keyboardActivation: PropTypes.bool
135
135
  }),
136
+ /**
137
+ * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
138
+ * By default, clicking sets the item that keyboard navigation starts from, but the focus
139
+ * indicator stays hidden until the user presses a key.
140
+ * @default false
141
+ */
142
+ focusItemOnClick: PropTypes.bool,
136
143
  /**
137
144
  * Option to display a cartesian grid in the background.
138
145
  */
package/CHANGELOG.md CHANGED
@@ -1,5 +1,170 @@
1
1
  # Changelog
2
2
 
3
+ ## 9.12.0
4
+
5
+ _Aug 21, 2026_
6
+
7
+ We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
8
+
9
+ - 🧮 Support [Formulas](https://mui.com/x/react-data-grid/formulas/) on the Data Grid: cells in opted-in columns can hold spreadsheet-like formulas (`=SUM(RANGE(…))`, `=price * quantity`) evaluated by a built-in engine, with a formula editor and [Formula Bar](https://mui.com/x/react-data-grid/components/formula-bar/), autocomplete, reference highlighting, optional A1 notation, fill-handle reference adjustment, custom functions, and live formula Excel export
10
+ - ♿️ Improve the accessibility of Data Grid cells and picker day cells
11
+ - 🗓️ Enable multi-resource event creation and editing in the Scheduler
12
+ - 🐞 Bugfixes
13
+ - 📚 Documentation improvements
14
+
15
+ Special thanks go out to these community members for their valuable contributions:
16
+ @Anexus5919, @mustafajw07
17
+
18
+ The following team members contributed to this release:
19
+ @brijeshb42, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @romgrk, @silviuaavram
20
+
21
+ ### Data Grid
22
+
23
+ #### `@mui/x-data-grid@9.12.0`
24
+
25
+ - [DataGrid] Expose `apiRef` on `GridCallbackDetails` for selector access in callbacks (#22973) @michelengelen
26
+ - [DataGrid] Fix header height not updating when `headerFilters` or `columnGroupingModel` change (#23059) @MBilalShafi
27
+ - [DataGrid] Fix unhandled rejection when unmounting mid-autosize (#23319) @JCQuintas
28
+ - [DataGrid] Label the blank `singleSelect` filter option (#23294) @JCQuintas
29
+ - [DataGrid] Stop sending incomplete filter items to the data source (#23303) @JCQuintas
30
+ - [DataGrid] Support the `rowheader` attribute for grid cells (#23340) @silviuaavram
31
+
32
+ #### `@mui/x-data-grid-pro@9.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
33
+
34
+ Same changes as in `@mui/x-data-grid@9.12.0`, plus:
35
+
36
+ - [DataGridPro] Honor `hasNextPage` in infinite lazy loading (#23048) @MBilalShafi
37
+
38
+ #### `@mui/x-data-grid-premium@9.12.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
39
+
40
+ Same changes as in `@mui/x-data-grid-pro@9.12.0`, plus:
41
+
42
+ - [DataGridPremium] Formula support (#22807) @MBilalShafi
43
+
44
+ ### Date and Time Pickers
45
+
46
+ #### `@mui/x-date-pickers@9.12.0`
47
+
48
+ - [fields] Keep the selected section on blank space clicks (#23318) @LukasTy
49
+ - [pickers] Associate the day cells with their week day column header (#23339) @LukasTy
50
+ - [pickers] Keep the `gridcell` role and the column index on filler cells (#23326) @Anexus5919
51
+
52
+ #### `@mui/x-date-pickers-pro@9.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
53
+
54
+ Same changes as in `@mui/x-date-pickers@9.12.0`, plus:
55
+
56
+ - [DateRangeCalendar] Round the range highlight at the month grid edges (#23297) @JCQuintas
57
+ - [DateRangePicker] Keep the range highlight opaque for disabled days (#23317) @JCQuintas
58
+
59
+ ### Charts
60
+
61
+ #### `@mui/x-charts@9.12.0`
62
+
63
+ - [charts] Add a demo for label on grid row (#23333) @noraleonte
64
+ - [charts] Fix React 18 `propTypes` warnings and stray-pointer test flakiness (#23384) @LukasTy
65
+ - [charts] Focus the clicked item for keyboard navigation (#23247) @JCQuintas
66
+
67
+ #### `@mui/x-charts-pro@9.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
68
+
69
+ Same changes as in `@mui/x-charts@9.12.0`.
70
+
71
+ #### `@mui/x-charts-premium@9.12.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
72
+
73
+ Same changes as in `@mui/x-charts-pro@9.12.0`, plus:
74
+
75
+ - [charts-premium] Add `onItemClick` to the radial charts (#23253) @JCQuintas
76
+
77
+ ### Tree View
78
+
79
+ #### `@mui/x-tree-view@9.12.0`
80
+
81
+ Internal changes.
82
+
83
+ #### `@mui/x-tree-view-pro@9.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
84
+
85
+ Same changes as in `@mui/x-tree-view@9.12.0`.
86
+
87
+ ### Scheduler
88
+
89
+ #### `@mui/x-scheduler@9.0.0-beta.10`
90
+
91
+ - [scheduler] Add `onEventEditingStart` to let consumers open their own edit UI (#23361) @rita-codes
92
+ - [scheduler] Fix keyboard and focus issues around the "+N more" popover (#23312) @rita-codes
93
+ - [scheduler] Honor `viewConfig` hour limits in the compact day and week views (#23316) @rita-codes
94
+ - [scheduler] Share timeline event layout data (#23366) @flaviendelangle
95
+ - [scheduler] enable multi-resource event creation and editing (#23313) @mustafajw07
96
+
97
+ #### `@mui/x-scheduler-premium@9.0.0-beta.10` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
98
+
99
+ Same changes as in `@mui/x-scheduler@9.0.0-beta.10`, plus:
100
+
101
+ - [scheduler-premium] Allow to control the min and max hour in the Event Timeline (#23212) @rita-codes
102
+ - [scheduler-premium] Dependencies - Create, select and delete via terminals (#23200) @rita-codes
103
+
104
+ ### Codemod
105
+
106
+ #### `@mui/x-codemod@9.12.0`
107
+
108
+ Internal changes.
109
+
110
+ ### Docs
111
+
112
+ - [docs][charts] Document line mark size customization (#23370) @JCQuintas
113
+ - [docs] Add recipe for constraining the `make-child` drop action by item type (#22940) @michelengelen
114
+ - [docs] Redirect the renamed Event Timeline views page (#23324) @brijeshb42
115
+ - [docs] Remove unused `adapter-dependencies.json` (#23328) @LukasTy
116
+
117
+ ### Core
118
+
119
+ - [code-infra] Add release skill (#23308) @brijeshb42
120
+ - [code-infra] Fix changelog categorization of docs and `DateRangeCalendar` tags (#23385) @JCQuintas
121
+ - [code-infra] Sync mui-release skill (#23330) @brijeshb42
122
+
123
+ ### Miscellaneous
124
+
125
+ - [core] Declare the missing `react-dom` peer dependencies (#23381) @LukasTy
126
+ - [test] Fix act warnings in the data source filter tests (#23360) @JCQuintas
127
+ - [virtualizer] Add inverse-sticky layout (#23053) @romgrk
128
+
129
+ ## 9.11.1
130
+
131
+ _Aug 6, 2026_
132
+
133
+ We'd like to extend a big thank you to the 2 contributors who made this release possible. Here are some highlights ✨:
134
+
135
+ - 🐛 Fix the empty `@mui/x-charts-vendor` package published in v9.11.0
136
+
137
+ The following team members contributed to this release:
138
+ @JCQuintas, @rita-codes
139
+
140
+ ### Charts
141
+
142
+ #### `@mui/x-charts@9.11.1`
143
+
144
+ - [charts] Fix empty `@mui/x-charts-vendor` published package (#23310) @JCQuintas
145
+
146
+ #### `@mui/x-charts-pro@9.11.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
147
+
148
+ Same changes as in `@mui/x-charts@9.11.1`.
149
+
150
+ #### `@mui/x-charts-premium@9.11.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
151
+
152
+ Same changes as in `@mui/x-charts-pro@9.11.1`.
153
+
154
+ #### `@mui/x-charts-vendor@9.11.1`
155
+
156
+ - [charts] Fix empty `@mui/x-charts-vendor` published package (#23310) @JCQuintas
157
+
158
+ ### Scheduler
159
+
160
+ #### `@mui/x-scheduler@9.0.0-beta.9`
161
+
162
+ - [scheduler] Show the range validation errors on the End date and End time fields (#23291) @rita-codes
163
+
164
+ #### `@mui/x-scheduler-premium@9.0.0-beta.9` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
165
+
166
+ Same changes as in `@mui/x-scheduler@9.0.0-beta.9`.
167
+
3
168
  ## 9.11.0
4
169
 
5
170
  _Aug 6, 2026_
@@ -111,6 +111,13 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes /* remove-prop
111
111
  experimentalFeatures: _propTypes.default.shape({
112
112
  keyboardActivation: _propTypes.default.bool
113
113
  }),
114
+ /**
115
+ * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
116
+ * By default, clicking sets the item that keyboard navigation starts from, but the focus
117
+ * indicator stays hidden until the user presses a key.
118
+ * @default false
119
+ */
120
+ focusItemOnClick: _propTypes.default.bool,
114
121
  /**
115
122
  * The height of the chart in px. If not defined, it takes the height of the parent element.
116
123
  */
@@ -104,6 +104,13 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes /* remove-prop
104
104
  experimentalFeatures: PropTypes.shape({
105
105
  keyboardActivation: PropTypes.bool
106
106
  }),
107
+ /**
108
+ * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
109
+ * By default, clicking sets the item that keyboard navigation starts from, but the focus
110
+ * indicator stays hidden until the user presses a key.
111
+ * @default false
112
+ */
113
+ focusItemOnClick: PropTypes.bool,
107
114
  /**
108
115
  * The height of the chart in px. If not defined, it takes the height of the parent element.
109
116
  */
@@ -9,7 +9,7 @@ exports.useChartsContainerProps = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
11
11
  var _allPlugins = require("../internals/plugins/allPlugins");
12
- const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableHitArea", "hitAreaRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "experimentalFeatures", "plugins", "localeText", "slots", "slotProps", "disableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
12
+ const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableHitArea", "hitAreaRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "experimentalFeatures", "plugins", "localeText", "slots", "slotProps", "disableKeyboardNavigation", "focusItemOnClick", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
13
13
  const useChartsContainerProps = props => {
14
14
  const _ref = props,
15
15
  {
@@ -50,6 +50,7 @@ const useChartsContainerProps = props => {
50
50
  slots,
51
51
  slotProps,
52
52
  disableKeyboardNavigation,
53
+ focusItemOnClick,
53
54
  brushConfig,
54
55
  onHiddenItemsChange,
55
56
  hiddenItems,
@@ -92,6 +93,7 @@ const useChartsContainerProps = props => {
92
93
  seriesConfig,
93
94
  experimentalFeatures,
94
95
  disableKeyboardNavigation,
96
+ focusItemOnClick,
95
97
  brushConfig,
96
98
  onHiddenItemsChange,
97
99
  hiddenItems,
@@ -2,7 +2,7 @@
2
2
 
3
3
  import _extends from "@babel/runtime/helpers/esm/extends";
4
4
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
5
- const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableHitArea", "hitAreaRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "experimentalFeatures", "plugins", "localeText", "slots", "slotProps", "disableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
5
+ const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableHitArea", "hitAreaRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "experimentalFeatures", "plugins", "localeText", "slots", "slotProps", "disableKeyboardNavigation", "focusItemOnClick", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
6
6
  import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.mjs";
7
7
  export const useChartsContainerProps = props => {
8
8
  const _ref = props,
@@ -44,6 +44,7 @@ export const useChartsContainerProps = props => {
44
44
  slots,
45
45
  slotProps,
46
46
  disableKeyboardNavigation,
47
+ focusItemOnClick,
47
48
  brushConfig,
48
49
  onHiddenItemsChange,
49
50
  hiddenItems,
@@ -86,6 +87,7 @@ export const useChartsContainerProps = props => {
86
87
  seriesConfig,
87
88
  experimentalFeatures,
88
89
  disableKeyboardNavigation,
90
+ focusItemOnClick,
89
91
  brushConfig,
90
92
  onHiddenItemsChange,
91
93
  hiddenItems,
@@ -110,21 +110,14 @@ process.env.NODE_ENV !== "production" ? DefaultContent.propTypes /* remove-propt
110
110
  * Override or extend the styles applied to the component.
111
111
  */
112
112
  classes: _propTypes.default.object,
113
- item: _propTypes.default.shape({
113
+ item: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
114
114
  color: _propTypes.default.string.isRequired,
115
115
  formattedLabel: _propTypes.default.string,
116
116
  formattedValue: _propTypes.default.string.isRequired,
117
117
  markShape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']),
118
118
  markType: _propTypes.default.oneOfType([_propTypes.default.oneOf(['circle', 'line', 'line+mark', 'square']), _propTypes.default.func]),
119
119
  seriesId: _propTypes.default.string.isRequired,
120
- value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
121
- colorValue: _propTypes.default.any,
122
- id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
123
- sizeValue: _propTypes.default.any,
124
- x: _propTypes.default.number.isRequired,
125
- y: _propTypes.default.number.isRequired,
126
- z: _propTypes.default.any
127
- })])
120
+ value: _propTypes.default.any
128
121
  }).isRequired
129
122
  } : void 0;
130
123
  process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes /* remove-proptypes */ = {
@@ -104,21 +104,14 @@ process.env.NODE_ENV !== "production" ? DefaultContent.propTypes /* remove-propt
104
104
  * Override or extend the styles applied to the component.
105
105
  */
106
106
  classes: PropTypes.object,
107
- item: PropTypes.shape({
107
+ item: PropTypes /* @typescript-to-proptypes-ignore */.shape({
108
108
  color: PropTypes.string.isRequired,
109
109
  formattedLabel: PropTypes.string,
110
110
  formattedValue: PropTypes.string.isRequired,
111
111
  markShape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']),
112
112
  markType: PropTypes.oneOfType([PropTypes.oneOf(['circle', 'line', 'line+mark', 'square']), PropTypes.func]),
113
113
  seriesId: PropTypes.string.isRequired,
114
- value: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
115
- colorValue: PropTypes.any,
116
- id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
117
- sizeValue: PropTypes.any,
118
- x: PropTypes.number.isRequired,
119
- y: PropTypes.number.isRequired,
120
- z: PropTypes.any
121
- })])
114
+ value: PropTypes.any
122
115
  }).isRequired
123
116
  } : void 0;
124
117
  process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes /* remove-proptypes */ = {
@@ -180,13 +180,13 @@ process.env.NODE_ENV !== "production" ? DefaultSingleValueContent.propTypes /* r
180
180
  * Override or extend the styles applied to the component.
181
181
  */
182
182
  classes: _propTypes.default.object,
183
- item: _propTypes.default.shape({
183
+ item: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
184
184
  color: _propTypes.default.string.isRequired,
185
185
  formattedValue: _propTypes.default.any.isRequired,
186
186
  identifier: _propTypes.default.shape({
187
187
  dataIndex: _propTypes.default.number,
188
188
  seriesId: _propTypes.default.string.isRequired,
189
- type: _propTypes.default.oneOf(['bar', 'line', 'pie', 'radar', 'scatter']).isRequired
189
+ type: _propTypes.default.string.isRequired
190
190
  }).isRequired,
191
191
  label: _propTypes.default.string,
192
192
  markShape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']),
@@ -173,13 +173,13 @@ process.env.NODE_ENV !== "production" ? DefaultSingleValueContent.propTypes /* r
173
173
  * Override or extend the styles applied to the component.
174
174
  */
175
175
  classes: PropTypes.object,
176
- item: PropTypes.shape({
176
+ item: PropTypes /* @typescript-to-proptypes-ignore */.shape({
177
177
  color: PropTypes.string.isRequired,
178
178
  formattedValue: PropTypes.any.isRequired,
179
179
  identifier: PropTypes.shape({
180
180
  dataIndex: PropTypes.number,
181
181
  seriesId: PropTypes.string.isRequired,
182
- type: PropTypes.oneOf(['bar', 'line', 'pie', 'radar', 'scatter']).isRequired
182
+ type: PropTypes.string.isRequired
183
183
  }).isRequired,
184
184
  label: PropTypes.string,
185
185
  markShape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']),
@@ -181,6 +181,10 @@ function ChartsTooltipContainer(inProps) {
181
181
  toJSON: () => ''
182
182
  })
183
183
  }), [positionRef]);
184
+
185
+ // `anchorEl` is only set once the portal below is mounted. Rendering the popper
186
+ // without an anchor makes Popper warn about an invalid `anchorEl`.
187
+ const tooltipAnchorEl = itemPosition ? anchorEl : pointerAnchorEl;
184
188
  const isMouse = pointerType === 'mouse' || isFineMainPointer;
185
189
  const isTouch = pointerType === 'touch' || !isFineMainPointer;
186
190
  const modifiers = React.useMemo(() => [{
@@ -226,14 +230,14 @@ function ChartsTooltipContainer(inProps) {
226
230
  height: 1
227
231
  }
228
232
  }), chartsLayerContainerRef.current), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
229
- children: isOpen && /*#__PURE__*/(0, _react.createElement)(ChartsTooltipRoot, (0, _extends2.default)({}, other, {
233
+ children: isOpen && tooltipAnchorEl && /*#__PURE__*/(0, _react.createElement)(ChartsTooltipRoot, (0, _extends2.default)({}, other, {
230
234
  // The key is here to make sure the tooltip uses the new anchor immediately.
231
235
  key: itemPosition ? 'charts-anchored' : 'charts-pointer',
232
236
  className: classes?.root,
233
237
  open: isOpen,
234
238
  placement: other.placement ?? position ?? (!isTooltipNodeAnchored && isMouse ? 'right-start' : 'top'),
235
239
  popperRef: popperRef,
236
- anchorEl: itemPosition ? anchorEl : pointerAnchorEl,
240
+ anchorEl: tooltipAnchorEl,
237
241
  modifiers: modifiers,
238
242
  container: other.container ?? chartsLayerContainerRef.current,
239
243
  popperOptions: (0, _extends2.default)({}, other.popperOptions, {
@@ -174,6 +174,10 @@ function ChartsTooltipContainer(inProps) {
174
174
  toJSON: () => ''
175
175
  })
176
176
  }), [positionRef]);
177
+
178
+ // `anchorEl` is only set once the portal below is mounted. Rendering the popper
179
+ // without an anchor makes Popper warn about an invalid `anchorEl`.
180
+ const tooltipAnchorEl = itemPosition ? anchorEl : pointerAnchorEl;
177
181
  const isMouse = pointerType === 'mouse' || isFineMainPointer;
178
182
  const isTouch = pointerType === 'touch' || !isFineMainPointer;
179
183
  const modifiers = React.useMemo(() => [{
@@ -219,14 +223,14 @@ function ChartsTooltipContainer(inProps) {
219
223
  height: 1
220
224
  }
221
225
  }), chartsLayerContainerRef.current), /*#__PURE__*/_jsx(NoSsr, {
222
- children: isOpen && /*#__PURE__*/_createElement(ChartsTooltipRoot, _extends({}, other, {
226
+ children: isOpen && tooltipAnchorEl && /*#__PURE__*/_createElement(ChartsTooltipRoot, _extends({}, other, {
223
227
  // The key is here to make sure the tooltip uses the new anchor immediately.
224
228
  key: itemPosition ? 'charts-anchored' : 'charts-pointer',
225
229
  className: classes?.root,
226
230
  open: isOpen,
227
231
  placement: other.placement ?? position ?? (!isTooltipNodeAnchored && isMouse ? 'right-start' : 'top'),
228
232
  popperRef: popperRef,
229
- anchorEl: itemPosition ? anchorEl : pointerAnchorEl,
233
+ anchorEl: tooltipAnchorEl,
230
234
  modifiers: modifiers,
231
235
  container: other.container ?? chartsLayerContainerRef.current,
232
236
  popperOptions: _extends({}, other.popperOptions, {
@@ -102,10 +102,6 @@ process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
102
102
  */
103
103
  dataIndex: _propTypes.default.number.isRequired,
104
104
  seriesId: _propTypes.default.string.isRequired,
105
- /**
106
- * The shape of the marker.
107
- */
108
- shape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
109
105
  /**
110
106
  * If `true`, animations are skipped.
111
107
  * @default false
@@ -95,10 +95,6 @@ process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
95
95
  */
96
96
  dataIndex: PropTypes.number.isRequired,
97
97
  seriesId: PropTypes.string.isRequired,
98
- /**
99
- * The shape of the marker.
100
- */
101
- shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
102
98
  /**
103
99
  * If `true`, animations are skipped.
104
100
  * @default false
@@ -148,6 +148,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes /* remove-proptypes
148
148
  enablePositionBasedPointerInteraction: _propTypes.default.bool,
149
149
  keyboardActivation: _propTypes.default.bool
150
150
  }),
151
+ /**
152
+ * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
153
+ * By default, clicking sets the item that keyboard navigation starts from, but the focus
154
+ * indicator stays hidden until the user presses a key.
155
+ * @default false
156
+ */
157
+ focusItemOnClick: _propTypes.default.bool,
151
158
  /**
152
159
  * Option to display a cartesian grid in the background.
153
160
  */
@@ -141,6 +141,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes /* remove-proptypes
141
141
  enablePositionBasedPointerInteraction: PropTypes.bool,
142
142
  keyboardActivation: PropTypes.bool
143
143
  }),
144
+ /**
145
+ * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
146
+ * By default, clicking sets the item that keyboard navigation starts from, but the focus
147
+ * indicator stays hidden until the user presses a key.
148
+ * @default false
149
+ */
150
+ focusItemOnClick: PropTypes.bool,
144
151
  /**
145
152
  * Option to display a cartesian grid in the background.
146
153
  */
@@ -143,6 +143,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes /* remove-proptypes *
143
143
  experimentalFeatures: _propTypes.default.shape({
144
144
  keyboardActivation: _propTypes.default.bool
145
145
  }),
146
+ /**
147
+ * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
148
+ * By default, clicking sets the item that keyboard navigation starts from, but the focus
149
+ * indicator stays hidden until the user presses a key.
150
+ * @default false
151
+ */
152
+ focusItemOnClick: _propTypes.default.bool,
146
153
  /**
147
154
  * The height of the chart in px. If not defined, it takes the height of the parent element.
148
155
  */
@@ -136,6 +136,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes /* remove-proptypes *
136
136
  experimentalFeatures: PropTypes.shape({
137
137
  keyboardActivation: PropTypes.bool
138
138
  }),
139
+ /**
140
+ * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
141
+ * By default, clicking sets the item that keyboard navigation starts from, but the focus
142
+ * indicator stays hidden until the user presses a key.
143
+ * @default false
144
+ */
145
+ focusItemOnClick: PropTypes.bool,
139
146
  /**
140
147
  * The height of the chart in px. If not defined, it takes the height of the parent element.
141
148
  */
@@ -5,11 +5,11 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
5
5
  angle: number;
6
6
  }
7
7
  export declare function getLabelAttributes(params: GetLabelAttributesParams): {
8
- transform?: undefined;
9
8
  x: number;
10
9
  y: number;
11
10
  textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
12
11
  dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
12
+ transform?: undefined;
13
13
  } | {
14
14
  x: number;
15
15
  y: number;
@@ -5,11 +5,11 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
5
5
  angle: number;
6
6
  }
7
7
  export declare function getLabelAttributes(params: GetLabelAttributesParams): {
8
- transform?: undefined;
9
8
  x: number;
10
9
  y: number;
11
10
  textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
12
11
  dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
12
+ transform?: undefined;
13
13
  } | {
14
14
  x: number;
15
15
  y: number;
@@ -105,6 +105,13 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes /* remove-proptypes
105
105
  experimentalFeatures: _propTypes.default.shape({
106
106
  keyboardActivation: _propTypes.default.bool
107
107
  }),
108
+ /**
109
+ * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
110
+ * By default, clicking sets the item that keyboard navigation starts from, but the focus
111
+ * indicator stays hidden until the user presses a key.
112
+ * @default false
113
+ */
114
+ focusItemOnClick: _propTypes.default.bool,
108
115
  /**
109
116
  * The height of the chart in px. If not defined, it takes the height of the parent element.
110
117
  */
@@ -98,6 +98,13 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes /* remove-proptypes
98
98
  experimentalFeatures: PropTypes.shape({
99
99
  keyboardActivation: PropTypes.bool
100
100
  }),
101
+ /**
102
+ * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
103
+ * By default, clicking sets the item that keyboard navigation starts from, but the focus
104
+ * indicator stays hidden until the user presses a key.
105
+ * @default false
106
+ */
107
+ focusItemOnClick: PropTypes.bool,
101
108
  /**
102
109
  * The height of the chart in px. If not defined, it takes the height of the parent element.
103
110
  */
@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.useRadarChartProps = void 0;
9
9
  var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
10
10
  var _RadarChart = require("./RadarChart.plugins");
11
- const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "experimentalFeatures", "className"];
11
+ const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "focusItemOnClick", "experimentalFeatures", "className"];
12
12
  /**
13
13
  * A helper function that extracts RadarChartProps from the input props
14
14
  * and returns an object with props for the children components of RadarChart.
@@ -41,6 +41,7 @@ const useRadarChartProps = props => {
41
41
  onAreaClick,
42
42
  onMarkClick,
43
43
  disableKeyboardNavigation,
44
+ focusItemOnClick,
44
45
  experimentalFeatures,
45
46
  className
46
47
  } = props,
@@ -59,6 +60,7 @@ const useRadarChartProps = props => {
59
60
  skipAnimation,
60
61
  onAxisClick,
61
62
  disableKeyboardNavigation,
63
+ focusItemOnClick,
62
64
  experimentalFeatures,
63
65
  plugins: _RadarChart.RADAR_PLUGINS
64
66
  };
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
 
3
3
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
4
- const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "experimentalFeatures", "className"];
4
+ const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "focusItemOnClick", "experimentalFeatures", "className"];
5
5
  import { RADAR_PLUGINS } from "./RadarChart.plugins.mjs";
6
6
  /**
7
7
  * A helper function that extracts RadarChartProps from the input props
@@ -35,6 +35,7 @@ export const useRadarChartProps = props => {
35
35
  onAreaClick,
36
36
  onMarkClick,
37
37
  disableKeyboardNavigation,
38
+ focusItemOnClick,
38
39
  experimentalFeatures,
39
40
  className
40
41
  } = props,
@@ -53,6 +54,7 @@ export const useRadarChartProps = props => {
53
54
  skipAnimation,
54
55
  onAxisClick,
55
56
  disableKeyboardNavigation,
57
+ focusItemOnClick,
56
58
  experimentalFeatures,
57
59
  plugins: RADAR_PLUGINS
58
60
  };
@@ -152,6 +152,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
152
152
  keyboardActivation: _propTypes.default.bool,
153
153
  progressiveRendering: _propTypes.default.bool
154
154
  }),
155
+ /**
156
+ * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
157
+ * By default, clicking sets the item that keyboard navigation starts from, but the focus
158
+ * indicator stays hidden until the user presses a key.
159
+ * @default false
160
+ */
161
+ focusItemOnClick: _propTypes.default.bool,
155
162
  /**
156
163
  * Option to display a cartesian grid in the background.
157
164
  */