@mui/x-date-pickers 9.11.0 → 9.13.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,322 @@
1
1
  # Changelog
2
2
 
3
+ ## 9.13.0
4
+
5
+ <!-- generated comparing v9.12.0..master -->
6
+
7
+ _Sep 4, 2026_
8
+
9
+ We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
10
+
11
+ - 🦮 Improve keyboard navigation features of the Charts.
12
+ - 🎨 Improved customization of the edit event dialog in the `EventCalendar`
13
+ - 🐞 Bugfixes
14
+ - 📚 Documentation improvements
15
+
16
+ Special thanks go out to these community members for their valuable contributions:
17
+ @Anexus5919, @jvskriubakken, @mustafajw07, @roychan1
18
+
19
+ The following team members contributed to this release:
20
+ @brijeshb42, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @LukasTy, @michelengelen, @noraleonte, @rita-codes, @silviuaavram
21
+
22
+ ### Data Grid
23
+
24
+ #### `@mui/x-data-grid@9.13.0`
25
+
26
+ - [DataGrid] Call `onValueChange` after `setEditCellValue` in edit cells (#23417) @michelengelen
27
+ - [DataGrid] Add support for replacing rows instead of merging updates (#23323) @jvskriubakken
28
+ - [DataGrid] Always render `rowHeader` in virtualized setups (#23386) @silviuaavram
29
+ - [DataGrid] Export `ToolbarRoot` (#23322) @JCQuintas
30
+ - [DataGrid] Fix `rowsPerPage` selector appearing when `autoPageSize` is enabled and `pageSize` is one of `pageSizeOptions` (#23401) @roychan1
31
+ - [DataGrid] Fix row tree reset when a data source grid becomes visible (#23288) @JCQuintas
32
+
33
+ #### `@mui/x-data-grid-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
34
+
35
+ Same changes as in `@mui/x-data-grid@9.13.0`, plus:
36
+
37
+ - [DataGridPro] Remove rows deleted server-side on nested lazy loading revalidation (#23320) @JCQuintas
38
+ - [DataGridPro] Stop `disableDebounce` from reaching the DOM in multi select filter (#23445) @JCQuintas
39
+
40
+ #### `@mui/x-data-grid-premium@9.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
41
+
42
+ Same changes as in `@mui/x-data-grid-pro@9.13.0`, plus:
43
+
44
+ - [DataGridPremium] Refine cell selection and speed up clipboard copy (#23473) @michelengelen
45
+ - [DataGridPremium] Select all cells with Ctrl+A (#23415) @michelengelen
46
+
47
+ ### Date and Time Pickers
48
+
49
+ #### `@mui/x-date-pickers@9.13.0`
50
+
51
+ Internal changes.
52
+
53
+ #### `@mui/x-date-pickers-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
54
+
55
+ Same changes as in `@mui/x-date-pickers@9.13.0`.
56
+
57
+ ### Charts
58
+
59
+ #### `@mui/x-charts@9.13.0`
60
+
61
+ - [charts] Activate the focused axis with Enter/Space (#23219) @JCQuintas
62
+ - [charts] Add keyboard zoom and pan (#23369) @JCQuintas
63
+ - [charts] Fix line mark position under browser zoom in Safari (#23387) @noraleonte
64
+ - [charts] Fix y axis tick labels shortened near the top of the chart (#23435) @JCQuintas
65
+ - [charts] Focus the clicked item on radar charts (#23287) @JCQuintas
66
+ - [charts] Stop text measurements leaking into each other (#23430) @JCQuintas
67
+
68
+ #### `@mui/x-charts-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
69
+
70
+ Same changes as in `@mui/x-charts@9.13.0`.
71
+
72
+ #### `@mui/x-charts-premium@9.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
73
+
74
+ Same changes as in `@mui/x-charts-pro@9.13.0`.
75
+
76
+ ### Tree View
77
+
78
+ #### `@mui/x-tree-view@9.13.0`
79
+
80
+ - [tree view] Add `loading` prop and customizable loading UI (#22251) @michelengelen
81
+ - [tree view] Reduce selector bundle size (#23412) @flaviendelangle
82
+ - [tree view] Remove dead UI from community component (#23487) @noraleonte
83
+ - [tree view] Remove unused dependencies (#23488) @noraleonte
84
+ - [tree view] Use `useId` for the default tree id (#23341) @Anexus5919
85
+
86
+ #### `@mui/x-tree-view-pro@9.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
87
+
88
+ Same changes as in `@mui/x-tree-view@9.13.0`.
89
+
90
+ ### Scheduler
91
+
92
+ #### `@mui/x-scheduler@9.0.0-beta.11`
93
+
94
+ - [scheduler] Absorb un-acted `ResizeObserver` deliveries after rendering the timeline (#23444) @rita-codes
95
+ - [scheduler] Add `EventContextMenu` with Edit and Delete actions (#23379) @mustafajw07
96
+ - [scheduler] Add aria-hidden to collapsed side panel and refactor landmark structure (#23425) @mustafajw07
97
+ - [scheduler] Add the `eventDialogGeneralTab` slot (#23338) @rita-codes
98
+ - [scheduler] Fix the un-awaited act warning in the event dialog slot test (#23446) @JCQuintas
99
+ - [scheduler] Improve timeline event layout performance (#23364) @flaviendelangle
100
+ - [scheduler] Keep `aria-expanded` present when ViewSwitcher and PreferencesMenu menus are closed (#23427) @mustafajw07
101
+ - [scheduler] Make the event dialog General-tab building blocks public (#23398) @rita-codes
102
+ - [scheduler] Migrate to the pragmatic-drag-and-drop v3 entry points (#23442) @rita-codes
103
+ - [scheduler] Reduce selector bundle size (#23413) @flaviendelangle
104
+ - [scheduler] Reuse processed events between updates (#23363) @flaviendelangle
105
+ - [scheduler] Add `aria-expanded` and `aria-controls` to side panel toggle button (#23402) @mustafajw07
106
+
107
+ #### `@mui/x-scheduler-premium@9.0.0-beta.11` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
108
+
109
+ Same changes as in `@mui/x-scheduler@9.0.0-beta.11`, plus:
110
+
111
+ - [scheduler-premium] Dependencies - Keep event drags working over the arrow hit-areas (#23441) @rita-codes
112
+ - [scheduler-premium] Dependencies - Reject dependencies that would create a cycle (#23389) @rita-codes
113
+ - [scheduler-premium] Key recurring `exDates` on their data-timezone day (#23467) @rita-codes
114
+
115
+ ### Codemod
116
+
117
+ #### `@mui/x-codemod@9.13.0`
118
+
119
+ Internal changes.
120
+
121
+ ### Docs
122
+
123
+ - [docs] Add synchronized tooltip and crosshair demo to charts (#23368) @JCQuintas
124
+ - [docs] Add sticky headers recipe to `RichTreeView` customization (#22908) @michelengelen
125
+ - [docs] Pin the visible date of the scheduler preferences demos (#23432) @rita-codes
126
+ - [docs] Star-prefix bare :where() dark-mode selectors (#23419) @Janpot
127
+ - [docs] Consolidate demo data into shared dataset files (#23496) @michelengelen
128
+
129
+ ### Core
130
+
131
+ - [code-infra] Consume shared commands from code-infra orb (#23485) @brijeshb42
132
+ - [code-infra] Move the shared spy helpers off Sinon (#23466) @JCQuintas
133
+ - [code-infra] Point the support validator link at frontend-public (#23422) @Janpot
134
+ - [code-infra] Reduce per-page memory in the browser test suite (#23424) @Janpot
135
+ - [code-infra] Remove Sinon (#23476) @JCQuintas
136
+ - [code-infra] Remove the explicit `styled-components` dependency (#23479) @LukasTy
137
+ - [code-infra] Replace the mechanical sinon `spy()` usages with `vi.fn()` (#23443) @JCQuintas
138
+ - [code-infra] Replace the sinon `spy(fn)` usages with `vi.fn(fn)` (#23460) @JCQuintas
139
+ - [code-infra] Replace the sinon spy types with the Vitest ones (#23464) @JCQuintas
140
+ - [code-infra] Replace the sinon spy-on-object calls with `vi.spyOn` (#23474) @JCQuintas
141
+ - [code-infra] Replace the sinon stubs with Vitest mocks (#23472) @JCQuintas
142
+ - [code-infra] Run TypeScript 7 alongside the TS6 JS API (#23471) @brijeshb42
143
+ - [code-infra] Trim the shared browser test setup graph (#23426) @LukasTy
144
+ - [code-infra] Update CircleCI orb (#23418) @JCQuintas
145
+ - [code-infra] Use explicit vitest imports in test files (#23375) @michelengelen
146
+
147
+ ### Miscellaneous
148
+
149
+ - [chat] Enforce top-level type imports (#23037) @Janpot
150
+ - [chat] Fix global preload error from the `remend` import (#23263) @hasdfa
151
+ - [ci] Add Claude PR review via mui-public reusable workflow (#23423) @Janpot
152
+ - [telemetry] Fix get-context test leaking mock from sender test (#23447) @JCQuintas
153
+ - [test] Fail the regression run when a webfont does not load (#23376) @LukasTy
154
+
155
+ ## 9.12.0
156
+
157
+ _Aug 21, 2026_
158
+
159
+ We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
160
+
161
+ - 🧮 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
162
+ - ♿️ Improve the accessibility of Data Grid cells and picker day cells
163
+ - 🗓️ Enable multi-resource event creation and editing in the Scheduler
164
+ - 🐞 Bugfixes
165
+ - 📚 Documentation improvements
166
+
167
+ Special thanks go out to these community members for their valuable contributions:
168
+ @Anexus5919, @mustafajw07
169
+
170
+ The following team members contributed to this release:
171
+ @brijeshb42, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @romgrk, @silviuaavram
172
+
173
+ ### Data Grid
174
+
175
+ #### `@mui/x-data-grid@9.12.0`
176
+
177
+ - [DataGrid] Expose `apiRef` on `GridCallbackDetails` for selector access in callbacks (#22973) @michelengelen
178
+ - [DataGrid] Fix header height not updating when `headerFilters` or `columnGroupingModel` change (#23059) @MBilalShafi
179
+ - [DataGrid] Fix unhandled rejection when unmounting mid-autosize (#23319) @JCQuintas
180
+ - [DataGrid] Label the blank `singleSelect` filter option (#23294) @JCQuintas
181
+ - [DataGrid] Stop sending incomplete filter items to the data source (#23303) @JCQuintas
182
+ - [DataGrid] Support the `rowheader` attribute for grid cells (#23340) @silviuaavram
183
+
184
+ #### `@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')
185
+
186
+ Same changes as in `@mui/x-data-grid@9.12.0`, plus:
187
+
188
+ - [DataGridPro] Honor `hasNextPage` in infinite lazy loading (#23048) @MBilalShafi
189
+
190
+ #### `@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')
191
+
192
+ Same changes as in `@mui/x-data-grid-pro@9.12.0`, plus:
193
+
194
+ - [DataGridPremium] Formula support (#22807) @MBilalShafi
195
+
196
+ ### Date and Time Pickers
197
+
198
+ #### `@mui/x-date-pickers@9.12.0`
199
+
200
+ - [fields] Keep the selected section on blank space clicks (#23318) @LukasTy
201
+ - [pickers] Associate the day cells with their week day column header (#23339) @LukasTy
202
+ - [pickers] Keep the `gridcell` role and the column index on filler cells (#23326) @Anexus5919
203
+
204
+ #### `@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')
205
+
206
+ Same changes as in `@mui/x-date-pickers@9.12.0`, plus:
207
+
208
+ - [DateRangeCalendar] Round the range highlight at the month grid edges (#23297) @JCQuintas
209
+ - [DateRangePicker] Keep the range highlight opaque for disabled days (#23317) @JCQuintas
210
+
211
+ ### Charts
212
+
213
+ #### `@mui/x-charts@9.12.0`
214
+
215
+ - [charts] Add a demo for label on grid row (#23333) @noraleonte
216
+ - [charts] Fix React 18 `propTypes` warnings and stray-pointer test flakiness (#23384) @LukasTy
217
+ - [charts] Focus the clicked item for keyboard navigation (#23247) @JCQuintas
218
+
219
+ #### `@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')
220
+
221
+ Same changes as in `@mui/x-charts@9.12.0`.
222
+
223
+ #### `@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')
224
+
225
+ Same changes as in `@mui/x-charts-pro@9.12.0`, plus:
226
+
227
+ - [charts-premium] Add `onItemClick` to the radial charts (#23253) @JCQuintas
228
+
229
+ ### Tree View
230
+
231
+ #### `@mui/x-tree-view@9.12.0`
232
+
233
+ Internal changes.
234
+
235
+ #### `@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')
236
+
237
+ Same changes as in `@mui/x-tree-view@9.12.0`.
238
+
239
+ ### Scheduler
240
+
241
+ #### `@mui/x-scheduler@9.0.0-beta.10`
242
+
243
+ - [scheduler] Add `onEventEditingStart` to let consumers open their own edit UI (#23361) @rita-codes
244
+ - [scheduler] Fix keyboard and focus issues around the "+N more" popover (#23312) @rita-codes
245
+ - [scheduler] Honor `viewConfig` hour limits in the compact day and week views (#23316) @rita-codes
246
+ - [scheduler] Share timeline event layout data (#23366) @flaviendelangle
247
+ - [scheduler] enable multi-resource event creation and editing (#23313) @mustafajw07
248
+
249
+ #### `@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')
250
+
251
+ Same changes as in `@mui/x-scheduler@9.0.0-beta.10`, plus:
252
+
253
+ - [scheduler-premium] Allow to control the min and max hour in the Event Timeline (#23212) @rita-codes
254
+ - [scheduler-premium] Dependencies - Create, select and delete via terminals (#23200) @rita-codes
255
+
256
+ ### Codemod
257
+
258
+ #### `@mui/x-codemod@9.12.0`
259
+
260
+ Internal changes.
261
+
262
+ ### Docs
263
+
264
+ - [docs][charts] Document line mark size customization (#23370) @JCQuintas
265
+ - [docs] Add recipe for constraining the `make-child` drop action by item type (#22940) @michelengelen
266
+ - [docs] Redirect the renamed Event Timeline views page (#23324) @brijeshb42
267
+ - [docs] Remove unused `adapter-dependencies.json` (#23328) @LukasTy
268
+
269
+ ### Core
270
+
271
+ - [code-infra] Add release skill (#23308) @brijeshb42
272
+ - [code-infra] Fix changelog categorization of docs and `DateRangeCalendar` tags (#23385) @JCQuintas
273
+ - [code-infra] Sync mui-release skill (#23330) @brijeshb42
274
+
275
+ ### Miscellaneous
276
+
277
+ - [core] Declare the missing `react-dom` peer dependencies (#23381) @LukasTy
278
+ - [test] Fix act warnings in the data source filter tests (#23360) @JCQuintas
279
+ - [virtualizer] Add inverse-sticky layout (#23053) @romgrk
280
+
281
+ ## 9.11.1
282
+
283
+ _Aug 6, 2026_
284
+
285
+ We'd like to extend a big thank you to the 2 contributors who made this release possible. Here are some highlights ✨:
286
+
287
+ - 🐛 Fix the empty `@mui/x-charts-vendor` package published in v9.11.0
288
+
289
+ The following team members contributed to this release:
290
+ @JCQuintas, @rita-codes
291
+
292
+ ### Charts
293
+
294
+ #### `@mui/x-charts@9.11.1`
295
+
296
+ - [charts] Fix empty `@mui/x-charts-vendor` published package (#23310) @JCQuintas
297
+
298
+ #### `@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')
299
+
300
+ Same changes as in `@mui/x-charts@9.11.1`.
301
+
302
+ #### `@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')
303
+
304
+ Same changes as in `@mui/x-charts-pro@9.11.1`.
305
+
306
+ #### `@mui/x-charts-vendor@9.11.1`
307
+
308
+ - [charts] Fix empty `@mui/x-charts-vendor` published package (#23310) @JCQuintas
309
+
310
+ ### Scheduler
311
+
312
+ #### `@mui/x-scheduler@9.0.0-beta.9`
313
+
314
+ - [scheduler] Show the range validation errors on the End date and End time fields (#23291) @rita-codes
315
+
316
+ #### `@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')
317
+
318
+ Same changes as in `@mui/x-scheduler@9.0.0-beta.9`.
319
+
3
320
  ## 9.11.0
4
321
 
5
322
  _Aug 6, 2026_
@@ -262,6 +262,8 @@ function DayCalendar(inProps) {
262
262
  const now = (0, _useUtils.useNow)(timezone);
263
263
  const classes = useUtilityClasses(classesProp);
264
264
  const isRtl = (0, _RtlProvider.useRtl)();
265
+ // The week number is a `rowheader`, so it takes the first column of the grid.
266
+ const columnIndexOffset = displayWeekNumber ? 1 : 0;
265
267
  const isDateDisabled = (0, _useIsDateDisabled.useIsDateDisabled)({
266
268
  shouldDisableDate,
267
269
  shouldDisableMonth,
@@ -384,19 +386,24 @@ function DayCalendar(inProps) {
384
386
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickerCalendarDayRoot, {
385
387
  role: "grid",
386
388
  "aria-labelledby": gridLabelId,
389
+ "aria-colcount": columnIndexOffset + 7,
390
+ "aria-rowcount": weeksToDisplay.length + 1,
387
391
  className: classes.root,
388
392
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PickerCalendarDayHeader, {
389
393
  role: "row",
394
+ "aria-rowindex": 1,
390
395
  className: classes.header,
391
396
  children: [displayWeekNumber && /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerCalendarWeekNumberLabel, {
392
397
  variant: "caption",
393
398
  role: "columnheader",
399
+ "aria-colindex": 1,
394
400
  "aria-label": translations.calendarWeekNumberHeaderLabel,
395
401
  className: classes.weekNumberLabel,
396
402
  children: translations.calendarWeekNumberHeaderText
397
403
  }), (0, _dateUtils.getWeekdays)(adapter, now).map((weekday, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerCalendarWeekDayLabel, {
398
404
  variant: "caption",
399
405
  role: "columnheader",
406
+ "aria-colindex": columnIndexOffset + i + 1,
400
407
  "aria-label": adapter.format(weekday, 'weekday'),
401
408
  className: classes.weekDayLabel,
402
409
  children: dayOfWeekFormatter(weekday)
@@ -419,13 +426,13 @@ function DayCalendar(inProps) {
419
426
  children: weeksToDisplay.map((week, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickerCalendarWeek, {
420
427
  role: "row",
421
428
  className: classes.weekContainer
422
- // fix issue of announcing row 1 as row 2
423
- // caused by week day labels row
429
+ // The week day labels row is the first row of the grid.
424
430
  ,
425
- "aria-rowindex": index + 1,
431
+ "aria-rowindex": index + 2,
426
432
  children: [displayWeekNumber && /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerCalendarWeekNumber, {
427
433
  className: classes.weekNumber,
428
434
  role: "rowheader",
435
+ "aria-colindex": 1,
429
436
  "aria-label": translations.calendarWeekNumberAriaLabelText(adapter.getWeekNumber(week[0])),
430
437
  children: translations.calendarWeekNumberText(adapter.getWeekNumber(week[0]))
431
438
  }), week.map((day, dayIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedDay, {
@@ -439,10 +446,8 @@ function DayCalendar(inProps) {
439
446
  onBlur: handleBlur,
440
447
  onDaySelect: handleDaySelect,
441
448
  isDateDisabled: isDateDisabled,
442
- currentMonthNumber: currentMonthNumber
443
- // fix issue of announcing column 1 as column 2 when `displayWeekNumber` is enabled
444
- ,
445
- "aria-colindex": dayIndex + 1
449
+ currentMonthNumber: currentMonthNumber,
450
+ "aria-colindex": columnIndexOffset + dayIndex + 1
446
451
  }, day.toString()))]
447
452
  }, `week-${week[0]}`))
448
453
  })
@@ -255,6 +255,8 @@ export function DayCalendar(inProps) {
255
255
  const now = useNow(timezone);
256
256
  const classes = useUtilityClasses(classesProp);
257
257
  const isRtl = useRtl();
258
+ // The week number is a `rowheader`, so it takes the first column of the grid.
259
+ const columnIndexOffset = displayWeekNumber ? 1 : 0;
258
260
  const isDateDisabled = useIsDateDisabled({
259
261
  shouldDisableDate,
260
262
  shouldDisableMonth,
@@ -377,19 +379,24 @@ export function DayCalendar(inProps) {
377
379
  return /*#__PURE__*/_jsxs(PickerCalendarDayRoot, {
378
380
  role: "grid",
379
381
  "aria-labelledby": gridLabelId,
382
+ "aria-colcount": columnIndexOffset + 7,
383
+ "aria-rowcount": weeksToDisplay.length + 1,
380
384
  className: classes.root,
381
385
  children: [/*#__PURE__*/_jsxs(PickerCalendarDayHeader, {
382
386
  role: "row",
387
+ "aria-rowindex": 1,
383
388
  className: classes.header,
384
389
  children: [displayWeekNumber && /*#__PURE__*/_jsx(PickerCalendarWeekNumberLabel, {
385
390
  variant: "caption",
386
391
  role: "columnheader",
392
+ "aria-colindex": 1,
387
393
  "aria-label": translations.calendarWeekNumberHeaderLabel,
388
394
  className: classes.weekNumberLabel,
389
395
  children: translations.calendarWeekNumberHeaderText
390
396
  }), getWeekdays(adapter, now).map((weekday, i) => /*#__PURE__*/_jsx(PickerCalendarWeekDayLabel, {
391
397
  variant: "caption",
392
398
  role: "columnheader",
399
+ "aria-colindex": columnIndexOffset + i + 1,
393
400
  "aria-label": adapter.format(weekday, 'weekday'),
394
401
  className: classes.weekDayLabel,
395
402
  children: dayOfWeekFormatter(weekday)
@@ -412,13 +419,13 @@ export function DayCalendar(inProps) {
412
419
  children: weeksToDisplay.map((week, index) => /*#__PURE__*/_jsxs(PickerCalendarWeek, {
413
420
  role: "row",
414
421
  className: classes.weekContainer
415
- // fix issue of announcing row 1 as row 2
416
- // caused by week day labels row
422
+ // The week day labels row is the first row of the grid.
417
423
  ,
418
- "aria-rowindex": index + 1,
424
+ "aria-rowindex": index + 2,
419
425
  children: [displayWeekNumber && /*#__PURE__*/_jsx(PickerCalendarWeekNumber, {
420
426
  className: classes.weekNumber,
421
427
  role: "rowheader",
428
+ "aria-colindex": 1,
422
429
  "aria-label": translations.calendarWeekNumberAriaLabelText(adapter.getWeekNumber(week[0])),
423
430
  children: translations.calendarWeekNumberText(adapter.getWeekNumber(week[0]))
424
431
  }), week.map((day, dayIndex) => /*#__PURE__*/_jsx(WrappedDay, {
@@ -432,10 +439,8 @@ export function DayCalendar(inProps) {
432
439
  onBlur: handleBlur,
433
440
  onDaySelect: handleDaySelect,
434
441
  isDateDisabled: isDateDisabled,
435
- currentMonthNumber: currentMonthNumber
436
- // fix issue of announcing column 1 as column 2 when `displayWeekNumber` is enabled
437
- ,
438
- "aria-colindex": dayIndex + 1
442
+ currentMonthNumber: currentMonthNumber,
443
+ "aria-colindex": columnIndexOffset + dayIndex + 1
439
444
  }, day.toString()))]
440
445
  }, `week-${week[0]}`))
441
446
  })
@@ -115,7 +115,9 @@ function PickersSlideTransition(inProps) {
115
115
  const classes = useUtilityClasses(classesProp, ownerState);
116
116
  const theme = (0, _styles.useTheme)();
117
117
  if (reduceAnimations) {
118
+ // `role="none"` keeps the day rows owned by the calendar grid.
118
119
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
120
+ role: "none",
119
121
  className: (0, _clsx.default)(classes.root, className),
120
122
  children: children
121
123
  });
@@ -107,7 +107,9 @@ export function PickersSlideTransition(inProps) {
107
107
  const classes = useUtilityClasses(classesProp, ownerState);
108
108
  const theme = useTheme();
109
109
  if (reduceAnimations) {
110
+ // `role="none"` keeps the day rows owned by the calendar grid.
110
111
  return /*#__PURE__*/_jsx("div", {
112
+ role: "none",
111
113
  className: clsx(classes.root, className),
112
114
  children: children
113
115
  });
@@ -91,6 +91,16 @@ const PickerDayRoot = (0, _styles.styled)(_ButtonBase.default, {
91
91
  }
92
92
  }
93
93
  }, {
94
+ props: {
95
+ isDayOutsideMonth: true
96
+ },
97
+ style: {
98
+ color: (theme.vars || theme).palette.text.secondary
99
+ }
100
+ },
101
+ // Must come after `isDayOutsideMonth` so that a disabled day outside the current month
102
+ // uses the disabled text color.
103
+ {
94
104
  props: {
95
105
  isDayDisabled: true
96
106
  },
@@ -107,13 +117,6 @@ const PickerDayRoot = (0, _styles.styled)(_ButtonBase.default, {
107
117
  opacity: 0,
108
118
  pointerEvents: 'none'
109
119
  }
110
- }, {
111
- props: {
112
- isDayOutsideMonth: true
113
- },
114
- style: {
115
- color: (theme.vars || theme).palette.text.secondary
116
- }
117
120
  }, {
118
121
  props: {
119
122
  isDayCurrent: true,
@@ -205,6 +208,7 @@ const PickerDayRaw = /*#__PURE__*/React.forwardRef(function PickerDay(inProps, f
205
208
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerDayRoot, {
206
209
  ref: handleRef,
207
210
  role: other.role,
211
+ "aria-colindex": other['aria-colindex'],
208
212
  ownerState: ownerState,
209
213
  className: (0, _clsx.default)(classes.root, className),
210
214
  as: "div"
@@ -84,6 +84,16 @@ const PickerDayRoot = styled(ButtonBase, {
84
84
  }
85
85
  }
86
86
  }, {
87
+ props: {
88
+ isDayOutsideMonth: true
89
+ },
90
+ style: {
91
+ color: (theme.vars || theme).palette.text.secondary
92
+ }
93
+ },
94
+ // Must come after `isDayOutsideMonth` so that a disabled day outside the current month
95
+ // uses the disabled text color.
96
+ {
87
97
  props: {
88
98
  isDayDisabled: true
89
99
  },
@@ -100,13 +110,6 @@ const PickerDayRoot = styled(ButtonBase, {
100
110
  opacity: 0,
101
111
  pointerEvents: 'none'
102
112
  }
103
- }, {
104
- props: {
105
- isDayOutsideMonth: true
106
- },
107
- style: {
108
- color: (theme.vars || theme).palette.text.secondary
109
- }
110
113
  }, {
111
114
  props: {
112
115
  isDayCurrent: true,
@@ -198,6 +201,7 @@ const PickerDayRaw = /*#__PURE__*/React.forwardRef(function PickerDay(inProps, f
198
201
  return /*#__PURE__*/_jsx(PickerDayRoot, {
199
202
  ref: handleRef,
200
203
  role: other.role,
204
+ "aria-colindex": other['aria-colindex'],
201
205
  ownerState: ownerState,
202
206
  className: clsx(classes.root, className),
203
207
  as: "div"
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers v9.11.0
2
+ * @mui/x-date-pickers v9.13.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-date-pickers v9.11.0
2
+ * @mui/x-date-pickers v9.13.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -208,18 +208,32 @@ function useFieldRootProps(parameters) {
208
208
  return;
209
209
  }
210
210
  const target = event.target;
211
- // `sectionListRoot` is the sections container (a descendant of the
212
- // InputBase root that owns this handler). The guard rejects clicks on
213
- // sibling adornments (open / clear buttons, etc.) which have their own
214
- // behavior and must not get intercepted here.
215
211
  const sectionListRoot = domGetters.getRoot();
216
- if (!sectionListRoot.contains(target)) {
212
+ const isInsideSectionList = sectionListRoot.contains(target);
213
+ // Only the field root is ours outside the sections container: it is the
214
+ // target of a padding click. The adornments keep their own behavior.
215
+ if (!isInsideSectionList && target !== event.currentTarget) {
217
216
  return;
218
217
  }
218
+ const sectionElement = isInsideSectionList ? target.closest('[data-sectionindex]') : null;
219
+
220
+ // Blank space is the field padding and the area past the sections. Mimic
221
+ // the native date input: first section on entry, keep it afterwards.
222
+ // `preventDefault` is what keeps it, by stopping both the browser blur and
223
+ // Chromium's focus delegation.
224
+ const isBlankSpaceClick = sectionElement == null && (!isInsideSectionList || isPointOutsideSections(sectionListRoot, event.clientX));
225
+ if (isBlankSpaceClick) {
226
+ event.preventDefault();
227
+ if (!focused) {
228
+ setFocused(true);
229
+ setSelectedSections(sectionOrder.startIndex);
230
+ }
231
+ return;
232
+ }
233
+
219
234
  // Prefer the visually-containing section (matches Chromium's
220
235
  // delegation + section container `onClick`), fall back to the
221
- // closest-by-distance section for padding / past-last-section clicks.
222
- const sectionElement = target.closest('[data-sectionindex]');
236
+ // closest-by-distance section for clicks on the container padding.
223
237
  const parsedIndex = sectionElement ? Number(sectionElement.dataset.sectionindex) : findClosestSectionIndexToPoint(sectionListRoot, event.clientX);
224
238
  // `Number(undefined) === NaN` and `NaN == null === false`, so guard
225
239
  // explicitly here even though `data-sectionindex` is set by
@@ -313,6 +327,32 @@ function useFieldRootProps(parameters) {
313
327
  };
314
328
  }
315
329
 
330
+ /**
331
+ * Slop on each side of the sections, so a click that just misses the outermost
332
+ * one still selects it. Under half a digit at the default font size.
333
+ */
334
+ const BLANK_SPACE_TOLERANCE = 4;
335
+
336
+ /**
337
+ * Returns `true` when `clientX` sits past the sections on either side.
338
+ * Horizontal only: a click in the container's vertical padding still belongs to
339
+ * the section above or below it.
340
+ */
341
+ function isPointOutsideSections(root, clientX) {
342
+ const sections = root.querySelectorAll('[data-sectionindex]');
343
+ if (sections.length === 0) {
344
+ return false;
345
+ }
346
+ let left = Infinity;
347
+ let right = -Infinity;
348
+ for (let i = 0; i < sections.length; i += 1) {
349
+ const rect = sections[i].getBoundingClientRect();
350
+ left = Math.min(left, rect.left);
351
+ right = Math.max(right, rect.right);
352
+ }
353
+ return clientX < left - BLANK_SPACE_TOLERANCE || clientX > right + BLANK_SPACE_TOLERANCE;
354
+ }
355
+
316
356
  /**
317
357
  * Returns the index of the section whose horizontal center is closest to `clientX`.
318
358
  * Returns `null` if the field renders no `[role="spinbutton"]` descendants
@@ -202,18 +202,32 @@ export function useFieldRootProps(parameters) {
202
202
  return;
203
203
  }
204
204
  const target = event.target;
205
- // `sectionListRoot` is the sections container (a descendant of the
206
- // InputBase root that owns this handler). The guard rejects clicks on
207
- // sibling adornments (open / clear buttons, etc.) which have their own
208
- // behavior and must not get intercepted here.
209
205
  const sectionListRoot = domGetters.getRoot();
210
- if (!sectionListRoot.contains(target)) {
206
+ const isInsideSectionList = sectionListRoot.contains(target);
207
+ // Only the field root is ours outside the sections container: it is the
208
+ // target of a padding click. The adornments keep their own behavior.
209
+ if (!isInsideSectionList && target !== event.currentTarget) {
211
210
  return;
212
211
  }
212
+ const sectionElement = isInsideSectionList ? target.closest('[data-sectionindex]') : null;
213
+
214
+ // Blank space is the field padding and the area past the sections. Mimic
215
+ // the native date input: first section on entry, keep it afterwards.
216
+ // `preventDefault` is what keeps it, by stopping both the browser blur and
217
+ // Chromium's focus delegation.
218
+ const isBlankSpaceClick = sectionElement == null && (!isInsideSectionList || isPointOutsideSections(sectionListRoot, event.clientX));
219
+ if (isBlankSpaceClick) {
220
+ event.preventDefault();
221
+ if (!focused) {
222
+ setFocused(true);
223
+ setSelectedSections(sectionOrder.startIndex);
224
+ }
225
+ return;
226
+ }
227
+
213
228
  // Prefer the visually-containing section (matches Chromium's
214
229
  // delegation + section container `onClick`), fall back to the
215
- // closest-by-distance section for padding / past-last-section clicks.
216
- const sectionElement = target.closest('[data-sectionindex]');
230
+ // closest-by-distance section for clicks on the container padding.
217
231
  const parsedIndex = sectionElement ? Number(sectionElement.dataset.sectionindex) : findClosestSectionIndexToPoint(sectionListRoot, event.clientX);
218
232
  // `Number(undefined) === NaN` and `NaN == null === false`, so guard
219
233
  // explicitly here even though `data-sectionindex` is set by
@@ -307,6 +321,32 @@ export function useFieldRootProps(parameters) {
307
321
  };
308
322
  }
309
323
 
324
+ /**
325
+ * Slop on each side of the sections, so a click that just misses the outermost
326
+ * one still selects it. Under half a digit at the default font size.
327
+ */
328
+ const BLANK_SPACE_TOLERANCE = 4;
329
+
330
+ /**
331
+ * Returns `true` when `clientX` sits past the sections on either side.
332
+ * Horizontal only: a click in the container's vertical padding still belongs to
333
+ * the section above or below it.
334
+ */
335
+ function isPointOutsideSections(root, clientX) {
336
+ const sections = root.querySelectorAll('[data-sectionindex]');
337
+ if (sections.length === 0) {
338
+ return false;
339
+ }
340
+ let left = Infinity;
341
+ let right = -Infinity;
342
+ for (let i = 0; i < sections.length; i += 1) {
343
+ const rect = sections[i].getBoundingClientRect();
344
+ left = Math.min(left, rect.left);
345
+ right = Math.max(right, rect.right);
346
+ }
347
+ return clientX < left - BLANK_SPACE_TOLERANCE || clientX > right + BLANK_SPACE_TOLERANCE;
348
+ }
349
+
310
350
  /**
311
351
  * Returns the index of the section whose horizontal center is closest to `clientX`.
312
352
  * Returns `null` if the field renders no `[role="spinbutton"]` descendants
@@ -1,4 +1,4 @@
1
1
  /**
2
2
  * Returns the private context passed by the Picker wrapping the current component.
3
3
  */
4
- export declare const usePickerPrivateContext: () => import("../components/PickerProvider.mjs").PickerPrivateContextValue;
4
+ export declare const usePickerPrivateContext: () => import("../index.mjs").PickerPrivateContextValue;
@@ -1,4 +1,4 @@
1
1
  /**
2
2
  * Returns the private context passed by the Picker wrapping the current component.
3
3
  */
4
- export declare const usePickerPrivateContext: () => import("../components/PickerProvider.js").PickerPrivateContextValue;
4
+ export declare const usePickerPrivateContext: () => import("../index.js").PickerPrivateContextValue;
@@ -2,8 +2,8 @@ export { PickersArrowSwitcher } from "./components/PickersArrowSwitcher/PickersA
2
2
  export type { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps } from "./components/PickersArrowSwitcher/index.mjs";
3
3
  export { PickerFieldUI, PickerFieldUIContextProvider, cleanFieldResponse, useFieldTextFieldProps, PickerFieldUIContext, mergeSlotProps } from "./components/PickerFieldUI.mjs";
4
4
  export type { ExportedPickerFieldUIProps, PickerFieldUISlots, PickerFieldUISlotProps, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "./components/PickerFieldUI.mjs";
5
- export { PickerProvider } from "./components/PickerProvider.mjs";
6
- export type { PickerContextValue } from "./components/PickerProvider.mjs";
5
+ export { PickerProvider, PickerPrivateContext } from "./components/PickerProvider.mjs";
6
+ export type { PickerContextValue, PickerPrivateContextValue } from "./components/PickerProvider.mjs";
7
7
  export { PickersModalDialog } from "./components/PickersModalDialog.mjs";
8
8
  export type { PickersModalDialogSlots, PickersModalDialogSlotProps } from "./components/PickersModalDialog.mjs";
9
9
  export { PickerPopper } from "./components/PickerPopper/PickerPopper.mjs";
@@ -2,8 +2,8 @@ export { PickersArrowSwitcher } from "./components/PickersArrowSwitcher/PickersA
2
2
  export type { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps } from "./components/PickersArrowSwitcher/index.js";
3
3
  export { PickerFieldUI, PickerFieldUIContextProvider, cleanFieldResponse, useFieldTextFieldProps, PickerFieldUIContext, mergeSlotProps } from "./components/PickerFieldUI.js";
4
4
  export type { ExportedPickerFieldUIProps, PickerFieldUISlots, PickerFieldUISlotProps, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "./components/PickerFieldUI.js";
5
- export { PickerProvider } from "./components/PickerProvider.js";
6
- export type { PickerContextValue } from "./components/PickerProvider.js";
5
+ export { PickerProvider, PickerPrivateContext } from "./components/PickerProvider.js";
6
+ export type { PickerContextValue, PickerPrivateContextValue } from "./components/PickerProvider.js";
7
7
  export { PickersModalDialog } from "./components/PickersModalDialog.js";
8
8
  export type { PickersModalDialogSlots, PickersModalDialogSlotProps } from "./components/PickersModalDialog.js";
9
9
  export { PickerPopper } from "./components/PickerPopper/PickerPopper.js";
@@ -75,6 +75,12 @@ Object.defineProperty(exports, "PickerPopper", {
75
75
  return _PickerPopper.PickerPopper;
76
76
  }
77
77
  });
78
+ Object.defineProperty(exports, "PickerPrivateContext", {
79
+ enumerable: true,
80
+ get: function () {
81
+ return _PickerProvider.PickerPrivateContext;
82
+ }
83
+ });
78
84
  Object.defineProperty(exports, "PickerProvider", {
79
85
  enumerable: true,
80
86
  get: function () {
@@ -1,6 +1,6 @@
1
1
  export { PickersArrowSwitcher } from "./components/PickersArrowSwitcher/PickersArrowSwitcher.mjs";
2
2
  export { PickerFieldUI, PickerFieldUIContextProvider, cleanFieldResponse, useFieldTextFieldProps, PickerFieldUIContext, mergeSlotProps } from "./components/PickerFieldUI.mjs";
3
- export { PickerProvider } from "./components/PickerProvider.mjs";
3
+ export { PickerProvider, PickerPrivateContext } from "./components/PickerProvider.mjs";
4
4
  export { PickersModalDialog } from "./components/PickersModalDialog.mjs";
5
5
  export { PickerPopper } from "./components/PickerPopper/PickerPopper.mjs";
6
6
  export { pickerPopperClasses } from "./components/PickerPopper/pickerPopperClasses.mjs";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/x-date-pickers",
3
- "version": "9.11.0",
3
+ "version": "9.13.0",
4
4
  "author": "MUI Team",
5
5
  "description": "The community edition of the MUI X Date and Time Picker components.",
6
6
  "license": "MIT",
@@ -34,12 +34,12 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@babel/runtime": "^7.29.7",
37
- "@mui/utils": "^9.3.0",
37
+ "@mui/utils": "^9.4.0",
38
+ "@mui/x-internals": "^9.13.0",
38
39
  "@types/react-transition-group": "^4.4.12",
39
40
  "clsx": "^2.1.1",
40
41
  "prop-types": "^15.8.1",
41
- "react-transition-group": "^4.4.5",
42
- "@mui/x-internals": "^9.11.0"
42
+ "react-transition-group": "^4.4.5"
43
43
  },
44
44
  "peerDependencies": {
45
45
  "@emotion/react": "^11.9.0",